update chat component to be used in bottom panel

raheeliftikhar5 · raheeliftikhar5 · commit 2bb9ae82779e · 2025-07-07T15:08:28.000+05:00
diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/chatComp.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/chatComp.tsx
@@ -4,15 +4,42 @@ import { NameConfig, withExposingConfigs } from "comps/generators/withExposing";
 import { chatChildrenMap } from "./chatCompTypes";
 import { ChatView } from "./chatView";
 import { ChatPropertyView } from "./chatPropertyView";
+import { useEffect, useState } from "react";
+import { changeChildAction } from "lowcoder-core";
 
 // Build the component
-const ChatTmpComp = new UICompBuilder(
+let ChatTmpComp = new UICompBuilder(
   chatChildrenMap, 
-  (props) => <ChatView {...props} chatQuery={props.chatQuery.value} />
+  (props, dispatch) => {
+    useEffect(() => {
+      if (Boolean(props.tableName)) return;
+
+      // Generate a unique database name for this ChatApp instance
+      const generateUniqueTableName = () => {
+        const timestamp = Date.now();
+        const randomId = Math.random().toString(36).substring(2, 15);
+        return `TABLE_${timestamp}`;
+      };
+      
+      const tableName = generateUniqueTableName();
+      dispatch(changeChildAction('tableName', tableName, true));
+    }, [props.tableName]);
+    
+    if (!props.tableName) {
+      return null; // Don't render until we have a unique DB name
+    }
+    return <ChatView {...props} chatQuery={props.chatQuery.value} />;
+  }
 )
   .setPropertyViewFn((children) => <ChatPropertyView children={children} />)
   .build();
 
+ChatTmpComp = class extends ChatTmpComp {
+  override autoHeight(): boolean {
+    return this.children.autoHeight.getView();
+  }
+};
+
 // Export the component
 export const ChatComp = withExposingConfigs(ChatTmpComp, [
   new NameConfig("text", "Chat component text"),
diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/chatCompTypes.ts b/client/packages/lowcoder/src/comps/comps/chatComp/chatCompTypes.ts
@@ -4,6 +4,7 @@ import { withDefault } from "comps/generators";
 import { BoolControl } from "comps/controls/boolControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import QuerySelectControl from "comps/controls/querySelectControl";
+import { AutoHeightControl } from "@lowcoder-ee/comps/controls/autoHeightControl";
 
 // Model type dropdown options
 const ModelTypeOptions = [
@@ -13,20 +14,26 @@ const ModelTypeOptions = [
 
 export const chatChildrenMap = {
   text: withDefault(StringControl, "Chat Component Placeholder"),
-  chatQuery: QuerySelectControl,
   modelType: dropdownControl(ModelTypeOptions, "direct-llm"),
+  modelHost: withDefault(StringControl, ""),
   streaming: BoolControl.DEFAULT_TRUE,
   systemPrompt: withDefault(StringControl, "You are a helpful assistant."),
   agent: BoolControl,
   maxInteractions: withDefault(NumberControl, 10),
+  chatQuery: QuerySelectControl,
+  autoHeight: AutoHeightControl,
+  tableName: withDefault(StringControl, ""),
 };
 
 export type ChatCompProps = {
-  text: string;
-  chatQuery: string;
-  modelType: string;
-  streaming: boolean;
-  systemPrompt: string;
-  agent: boolean;
-  maxInteractions: number;
+  text?: string;
+  chatQuery?: string;
+  modelType?: string;
+  streaming?: boolean;
+  systemPrompt?: string;
+  agent?: boolean;
+  maxInteractions?: number;
+  modelHost?: string;
+  autoHeight?: boolean;
+  tableName?: string;
 };
diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/chatPropertyView.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/chatPropertyView.tsx
@@ -1,27 +1,34 @@
 // client/packages/lowcoder/src/comps/comps/chatComp/chatPropertyView.tsx
 import React from "react";
 import { Section, sectionNames } from "lowcoder-design";
+import { trans } from "i18n";
 
 export const ChatPropertyView = React.memo((props: any) => {
   const { children } = props;
 
   return (
-    <Section name={sectionNames.basic}>
-      {children.text.propertyView({ label: "Text" })}
-      {children.chatQuery.propertyView({ label: "Chat Query" })}
-      {children.modelType.propertyView({ label: "Model Type" })}
-      {children.streaming.propertyView({ label: "Enable Streaming" })}
-      {children.systemPrompt.propertyView({ 
-        label: "System Prompt",
-        placeholder: "Enter system prompt...",
-        enableSpellCheck: false,
-      })}
-      {children.agent.propertyView({ label: "Enable Agent Mode" })}
-      {children.maxInteractions.propertyView({ 
-        label: "Max Interactions",
-        placeholder: "10",
-      })}
-    </Section>
+    <>
+      <Section name={sectionNames.basic}>
+        {children.modelType.propertyView({ label: "Model Type" })}
+        {children.modelHost.propertyView({ label: "Model Host" })}
+        {/* {children.text.propertyView({ label: "Text" })}
+        {children.chatQuery.propertyView({ label: "Chat Query" })} */}
+        {children.streaming.propertyView({ label: "Enable Streaming" })}
+        {children.systemPrompt.propertyView({ 
+          label: "System Prompt",
+          placeholder: "Enter system prompt...",
+          enableSpellCheck: false,
+        })}
+        {children.agent.propertyView({ label: "Enable Agent Mode" })}
+        {children.maxInteractions.propertyView({ 
+          label: "Max Interactions",
+          placeholder: "10",
+        })}
+      </Section>
+      <Section name={sectionNames.layout}>
+        {children.autoHeight.propertyView({ label: trans("prop.height") })}
+      </Section>
+    </>
   );
 });
 
diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/chatView.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/chatView.tsx
@@ -7,7 +7,7 @@ import "@assistant-ui/styles/index.css";
 import "@assistant-ui/styles/markdown.css";
 
 export const ChatView = React.memo((props: ChatCompProps) => {
-  return <ChatApp />;
+  return <ChatApp {...props} />;
 });
 
 ChatView.displayName = 'ChatView';
diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatApp.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatApp.tsx
@@ -1,10 +1,16 @@
 import { ChatProvider } from "./context/ChatContext";
 import { ChatMain } from "./ChatMain";
+import { ChatCompProps } from "../chatCompTypes";
+import { useEffect, useState } from "react";
 
-export function ChatApp() {
+export function ChatApp(props: ChatCompProps) {
+  if (!Boolean(props.tableName)) {
+    return null; // Don't render until we have a unique DB name
+  }
+  
   return (
     <ChatProvider>
-      <ChatMain />
+      <ChatMain {...props} />
     </ChatProvider>
   );
 }
diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatMain.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatMain.tsx
@@ -16,10 +16,15 @@ import {
   ArchivedThreadData 
 } from "./context/ChatContext";
 import styled from "styled-components";
+import { ChatCompProps } from "../chatCompTypes";
 
-const ChatContainer = styled.div`
+const ChatContainer = styled.div<{ $autoHeight?: boolean }>`
   display: flex;
-  height: 500px;
+  height: ${props => props.$autoHeight ? '500px' : '100%'};
+
+  p {
+    margin: 0;
+  }
 
   .aui-thread-list-root {
     width: 250px;
@@ -45,7 +50,18 @@ const ChatContainer = styled.div`
 
 const generateId = () => Math.random().toString(36).substr(2, 9);
 
-const callYourAPI = async (text: string) => {
+const callYourAPI = async (params: {
+  text: string,
+  modelHost: string,
+  modelType: string,
+}) => {
+  const { text, modelHost, modelType } = params;
+
+  let url = modelHost;
+  if (modelType === "direct-llm") {
+    url = `${modelHost}/api/chat/completions`;
+  }
+
   // Simulate API delay
   await new Promise(resolve => setTimeout(resolve, 1500));
   
@@ -55,7 +71,7 @@ const callYourAPI = async (text: string) => {
   };
 };
 
-export function ChatMain() {
+export function ChatMain(props: ChatCompProps) {
   const { state, actions } = useChatContext();
   const [isRunning, setIsRunning] = useState(false);
 
@@ -92,7 +108,11 @@ export function ChatMain() {
 
     try {
       // Call mock API
-      const response = await callYourAPI(userMessage.text);
+      const response = await callYourAPI({
+        text: userMessage.text,
+        modelHost: props.modelHost!,
+        modelType: props.modelType!,
+      });
       
       const assistantMessage: MyMessage = {
         id: generateId(),
@@ -146,7 +166,11 @@ export function ChatMain() {
 
     try {
       // Generate new response
-      const response = await callYourAPI(editedMessage.text);
+      const response = await callYourAPI({
+        text: editedMessage.text,
+        modelHost: props.modelHost!,
+        modelType: props.modelType!,
+      });
       
       const assistantMessage: MyMessage = {
         id: generateId(),
@@ -221,7 +245,7 @@ export function ChatMain() {
 
   return (
     <AssistantRuntimeProvider runtime={runtime}>
-      <ChatContainer>
+      <ChatContainer $autoHeight={props.autoHeight}>
         <ThreadList />
         <Thread />
       </ChatContainer>
diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/components/assistant-ui/thread-list.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/components/assistant-ui/thread-list.tsx
@@ -7,30 +7,32 @@ import { PencilIcon, PlusIcon, Trash2Icon } from "lucide-react";
 
 import { TooltipIconButton } from "./tooltip-icon-button";
 import { useThreadListItemRuntime } from "@assistant-ui/react";
-import { Button } from "antd";
+import { Button, Flex } from "antd";
 
 import styled from "styled-components";
 import { useChatContext } from "../context/ChatContext";
 
 const StyledPrimaryButton = styled(Button)`
-  padding: 20px;
-  margin-bottom: 20px;
+  // padding: 20px;
+  // margin-bottom: 20px;
 `;
 
 
 export const ThreadList: FC = () => {
   return (
     <ThreadListPrimitive.Root className="aui-root aui-thread-list-root">
       <ThreadListNew />
-      <ThreadListItems />
+      <Flex vertical style={{flex: 1, overflow: 'auto', gap: 4}}>
+        <ThreadListItems />
+      </Flex>
     </ThreadListPrimitive.Root>
   );
 };
 
 const ThreadListNew: FC = () => {
   return (
     <ThreadListPrimitive.New asChild>
-      <StyledPrimaryButton size="large" type="primary" icon={<PlusIcon />}>
+      <StyledPrimaryButton size="middle" type="primary" icon={<PlusIcon size={16}/>}>
         New Thread
       </StyledPrimaryButton>
     </ThreadListPrimitive.New>
@@ -54,9 +56,8 @@ const ThreadListItem: FC = () => {
 };
 
 const ThreadListItemTitle: FC = () => {
-
   return (
-    <p className="aui-thread-list-item-title">
+    <p className="aui-thread-list-item-title" style={{margin: 0}}>
       <ThreadListItemPrimitive.Title fallback="New Chat" />
     </p>
   );
