complete chat styles

Author: iamfaran

client/packages/lowcoder/src/comps/comps/chatComp/chatComp.tsx

@@ -27,6 +27,7 @@ import {
   ChatInputStyle,
   ChatSendButtonStyle,
   ChatNewThreadButtonStyle,
+  ChatThreadItemStyle,
 } from "comps/controls/styleControlConstants";
 import { AnimationStyle } from "comps/controls/styleControlConstants";
 
@@ -176,6 +177,7 @@ export const chatChildrenMap = {
   inputStyle: styleControl(ChatInputStyle),
   sendButtonStyle: styleControl(ChatSendButtonStyle),
   newThreadButtonStyle: styleControl(ChatNewThreadButtonStyle),
+  threadItemStyle: styleControl(ChatThreadItemStyle),
   animationStyle: styleControl(AnimationStyle),
 
   // Exposed Variables (not shown in Property View)
@@ -301,6 +303,7 @@ const ChatTmpComp = new UICompBuilder(
         inputStyle={props.inputStyle}
         sendButtonStyle={props.sendButtonStyle}
         newThreadButtonStyle={props.newThreadButtonStyle}
+        threadItemStyle={props.threadItemStyle}
         animationStyle={props.animationStyle}
       />
     );

client/packages/lowcoder/src/comps/comps/chatComp/chatPropertyView.tsx

@@ -118,6 +118,10 @@ export const ChatPropertyView = React.memo((props: any) => {
         {children.newThreadButtonStyle.getPropertyView()}
       </Section>
 
+      <Section name={trans("chat.threadItemStyle")}>
+        {children.threadItemStyle.getPropertyView()}
+      </Section>
+
       <Section name={sectionNames.animationStyle} hasTooltip={true}>
         {children.animationStyle.getPropertyView()}
       </Section>

client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCore.tsx

@@ -25,6 +25,7 @@ export function ChatCore({
   inputStyle,
   sendButtonStyle,
   newThreadButtonStyle,
+  threadItemStyle,
   animationStyle
 }: ChatCoreProps) {
   return (
@@ -44,6 +45,7 @@ export function ChatCore({
           inputStyle={inputStyle}
           sendButtonStyle={sendButtonStyle}
           newThreadButtonStyle={newThreadButtonStyle}
+          threadItemStyle={threadItemStyle}
           animationStyle={animationStyle}
         />
       </ChatProvider>

client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCoreMain.tsx

@@ -36,6 +36,7 @@ const ChatContainer = styled.div<{
   $inputStyle?: any;
   $sendButtonStyle?: any;
   $newThreadButtonStyle?: any;
+  $threadItemStyle?: any;
   $animationStyle?: any;
 }>`
   display: flex;
@@ -106,7 +107,7 @@ const ChatContainer = styled.div<{
   }
 
   /* New Thread Button Styles */
-  .aui-thread-list-root button[type="button"]:first-child {
+  .aui-thread-list-root > button {
     background-color: ${(props) => props.$newThreadButtonStyle?.newThreadBackground || "#3b82f6"} !important;
     color: ${(props) => props.$newThreadButtonStyle?.newThreadText || "#ffffff"} !important;
     border-color: ${(props) => props.$newThreadButtonStyle?.newThreadBackground || "#3b82f6"} !important;
@@ -116,10 +117,14 @@ const ChatContainer = styled.div<{
   .aui-thread-list-item {
     cursor: pointer;
     transition: background-color 0.2s ease;
+    background-color: ${(props) => props.$threadItemStyle?.threadItemBackground || "transparent"};
+    color: ${(props) => props.$threadItemStyle?.threadItemText || "inherit"};
+    border: 1px solid ${(props) => props.$threadItemStyle?.threadItemBorder || "transparent"};
 
     &[data-active="true"] {
-      background-color: #dbeafe;
-      border: 1px solid #bfdbfe;
+      background-color: ${(props) => props.$threadItemStyle?.activeThreadBackground || "#dbeafe"};
+      color: ${(props) => props.$threadItemStyle?.activeThreadText || "inherit"};
+      border: 1px solid ${(props) => props.$threadItemStyle?.activeThreadBorder || "#bfdbfe"};
     }
   }
 `;
@@ -145,6 +150,7 @@ interface ChatCoreMainProps {
   inputStyle?: any;
   sendButtonStyle?: any;
   newThreadButtonStyle?: any;
+  threadItemStyle?: any;
   animationStyle?: any;
 }
 
@@ -164,6 +170,7 @@ export function ChatCoreMain({
   inputStyle,
   sendButtonStyle,
   newThreadButtonStyle,
+  threadItemStyle,
   animationStyle
 }: ChatCoreMainProps) {
   const { state, actions } = useChatContext();
@@ -401,6 +408,7 @@ export function ChatCoreMain({
         $inputStyle={inputStyle}
         $sendButtonStyle={sendButtonStyle}
         $newThreadButtonStyle={newThreadButtonStyle}
+        $threadItemStyle={threadItemStyle}
         $animationStyle={animationStyle}
       >
         <ThreadList />

client/packages/lowcoder/src/comps/comps/chatComp/types/chatTypes.ts

@@ -89,6 +89,7 @@ export interface ChatCoreProps {
   inputStyle?: any;
   sendButtonStyle?: any;
   newThreadButtonStyle?: any;
+  threadItemStyle?: any;
   animationStyle?: any;
 }
 

client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx

@@ -2489,6 +2489,39 @@ export const ChatNewThreadButtonStyle = [
   },
 ] as const;
 
+export const ChatThreadItemStyle = [
+  {
+    name: "threadItemBackground",
+    label: trans("style.threadItemBackground"),
+    color: "transparent",
+  },
+  {
+    name: "threadItemText",
+    label: trans("style.threadItemText"),
+    color: "inherit",
+  },
+  {
+    name: "threadItemBorder",
+    label: trans("style.threadItemBorder"),
+    color: "transparent",
+  },
+  {
+    name: "activeThreadBackground",
+    label: trans("style.activeThreadBackground"),
+    color: "#dbeafe",
+  },
+  {
+    name: "activeThreadText",
+    label: trans("style.activeThreadText"),
+    color: "inherit",
+  },
+  {
+    name: "activeThreadBorder",
+    label: trans("style.activeThreadBorder"),
+    color: "#bfdbfe",
+  },
+] as const;
+
 export type QRCodeStyleType = StyleConfigType<typeof QRCodeStyle>;
 export type TimeLineStyleType = StyleConfigType<typeof TimeLineStyle>;
 export type AvatarStyleType = StyleConfigType<typeof AvatarStyle>;
@@ -2613,6 +2646,7 @@ export type ChatMessagesStyleType = StyleConfigType<typeof ChatMessagesStyle>;
 export type ChatInputStyleType = StyleConfigType<typeof ChatInputStyle>;
 export type ChatSendButtonStyleType = StyleConfigType<typeof ChatSendButtonStyle>;
 export type ChatNewThreadButtonStyleType = StyleConfigType<typeof ChatNewThreadButtonStyle>;
+export type ChatThreadItemStyleType = StyleConfigType<typeof ChatThreadItemStyle>;
 
 export function widthCalculator(margin: string) {
   const marginArr = margin?.trim().replace(/\s+/g, " ").split(" ") || "";

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -615,6 +615,12 @@ export const en = {
     "sendButtonIcon": "Send Button Icon Color",
     "newThreadBackground": "New Thread Button Background",
     "newThreadText": "New Thread Button Text",
+    "threadItemBackground": "Thread Item Background",
+    "threadItemText": "Thread Item Text",
+    "threadItemBorder": "Thread Item Border",
+    "activeThreadBackground": "Active Thread Background",
+    "activeThreadText": "Active Thread Text",
+    "activeThreadBorder": "Active Thread Border",
 
     "radiusTip": "Specifies the radius of the element's corners. Example: 5px, 50%, or 1em.",
     "gapTip": "Specifies the gap between rows and columns in a grid or flex container. Example: 10px, 1rem, or 5%.",
@@ -1507,7 +1513,8 @@ export const en = {
     "messagesStyle": "Messages Style",
     "inputStyle": "Input Field Style",
     "sendButtonStyle": "Send Button Style",
-    "newThreadButtonStyle": "New Thread Button Style"
+    "newThreadButtonStyle": "New Thread Button Style",
+    "threadItemStyle": "Thread Item Style"
   },
 
   "chatBox": {