add unique storage / expose convo history

Author: iamfaran

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

@@ -3,7 +3,7 @@
 import { UICompBuilder } from "comps/generators";
 import { NameConfig, withExposingConfigs } from "comps/generators/withExposing";
 import { StringControl } from "comps/controls/codeControl";
-import { stringExposingStateControl } from "comps/controls/codeStateControl";
+import { arrayObjectExposingStateControl, stringExposingStateControl } from "comps/controls/codeStateControl";
 import { withDefault } from "comps/generators";
 import { BoolControl } from "comps/controls/boolControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
@@ -12,7 +12,7 @@ import { ChatCore } from "./components/ChatCore";
 import { ChatPropertyView } from "./chatPropertyView";
 import { createChatStorage } from "./utils/storageFactory";
 import { QueryHandler, createMessageHandler } from "./handlers/messageHandlers";
-import { useMemo } from "react";
+import { useMemo, useRef, useEffect } from "react";  
 import { changeChildAction } from "lowcoder-core";
 
 import "@assistant-ui/styles/index.css";
@@ -22,15 +22,19 @@ import "@assistant-ui/styles/markdown.css";
 // SIMPLIFIED CHILDREN MAP - ONLY ESSENTIAL PROPS
 // ============================================================================
 
+function generateUniqueTableName(): string {
+  return `chat${Math.floor(1000 + Math.random() * 9000)}`;
+ }
+
 const ModelTypeOptions = [
   { label: "Query", value: "query" },
   { label: "N8N Workflow", value: "n8n" },
 ] as const;
 
 export const chatChildrenMap = {
   // Storage
-  tableName: withDefault(StringControl, "default"),
-  
+  // Storage (add the hidden property here)
+  _internalDbName: withDefault(StringControl, ""),
   // Message Handler Configuration
   handlerType: dropdownControl(ModelTypeOptions, "query"),
   chatQuery: QuerySelectControl,                    // Only used for "query" type
@@ -41,8 +45,12 @@ export const chatChildrenMap = {
   // UI Configuration  
   placeholder: withDefault(StringControl, "Chat Component"),
 
+  // Database Information (read-only)
+  databaseName: withDefault(StringControl, ""),
+  
   // Exposed Variables (not shown in Property View)
   currentMessage: stringExposingStateControl("currentMessage", ""),
+  conversationHistory: stringExposingStateControl("conversationHistory", "[]"),
 };
 
 // ============================================================================
@@ -52,10 +60,27 @@ export const chatChildrenMap = {
 const ChatTmpComp = new UICompBuilder(
   chatChildrenMap,
   (props, dispatch) => {
-    // Create storage from tableName
-    const storage = useMemo(() => 
-      createChatStorage(props.tableName), 
-      [props.tableName]
+
+    const uniqueTableName = useRef<string>();
+
+      // Generate unique table name once (with persistence)
+    if (!uniqueTableName.current) {
+      // Use persisted name if exists, otherwise generate new one
+      uniqueTableName.current = props._internalDbName || generateUniqueTableName();
+      
+      // Save the name for future refreshes
+      if (!props._internalDbName) {
+        dispatch(changeChildAction("_internalDbName", uniqueTableName.current, false));
+      }
+      
+      // Update the database name in the props for display
+      const dbName = `ChatDB_${uniqueTableName.current}`;
+      dispatch(changeChildAction("databaseName", dbName, false));
+    }
+     // Create storage with unique table name
+     const storage = useMemo(() => 
+      createChatStorage(uniqueTableName.current!), 
+      []
     );
 
     // Create message handler based on type
@@ -96,11 +121,35 @@ const ChatTmpComp = new UICompBuilder(
       dispatch(changeChildAction("currentMessage", message, false));
     };
 
+    // Handle conversation history updates for exposed variable
+    const handleConversationUpdate = (conversationHistory: any[]) => {
+      // Format conversation history for use in queries
+      const formattedHistory = conversationHistory.map(msg => ({
+        role: msg.role,
+        content: msg.text,
+        timestamp: msg.timestamp
+      }));
+      dispatch(changeChildAction("conversationHistory", JSON.stringify(formattedHistory), false));
+    };
+
+       // Cleanup on unmount
+       useEffect(() => {
+        console.log("cleanup on unmount");
+        return () => {
+          console.log("cleanup on unmount");
+          const tableName = uniqueTableName.current;
+          if (tableName) {
+            storage.cleanup();
+          }
+        };
+      }, []);
+
     return (
       <ChatCore
         storage={storage}
         messageHandler={messageHandler}
         onMessageUpdate={handleMessageUpdate}
+        onConversationUpdate={handleConversationUpdate}
       />
     );
   }
@@ -114,4 +163,5 @@ const ChatTmpComp = new UICompBuilder(
 
 export const ChatComp = withExposingConfigs(ChatTmpComp, [
   new NameConfig("currentMessage", "Current user message"),
+  new NameConfig("conversationHistory", "Full conversation history as JSON array"),
 ]);

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

@@ -19,11 +19,13 @@ export const ChatPropertyView = React.memo((props: any) => {
           placeholder: "Enter placeholder text..."
         })}
 
-        {children.tableName.propertyView({ 
-          label: "Storage Table",
-          placeholder: "default",
-          tooltip: "Storage identifier - use same value to share conversations between components"
+        {children.databaseName.propertyView({ 
+          label: "Database Name",
+          placeholder: "Database will be auto-generated...",
+          tooltip: "Read-only: Auto-generated database name for data persistence. You can reference this in queries if needed.",
+          disabled: true
         })}
+        
       </Section>
 
       {/* Message Handler Configuration */}

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

@@ -9,12 +9,13 @@ import { ChatCoreProps } from "../types/chatTypes";
 // CHAT CORE - THE SHARED FOUNDATION
 // ============================================================================
 
-export function ChatCore({ storage, messageHandler, onMessageUpdate }: ChatCoreProps) {
+export function ChatCore({ storage, messageHandler, onMessageUpdate, onConversationUpdate }: ChatCoreProps) {
   return (
     <ChatProvider storage={storage}>
       <ChatCoreMain 
         messageHandler={messageHandler}
         onMessageUpdate={onMessageUpdate}
+        onConversationUpdate={onConversationUpdate}
       />
     </ChatProvider>
   );

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

@@ -60,11 +60,12 @@ const ChatContainer = styled.div`
 interface ChatCoreMainProps {
   messageHandler: MessageHandler;
   onMessageUpdate?: (message: string) => void;
+  onConversationUpdate?: (conversationHistory: ChatMessage[]) => void;
 }
 
 const generateId = () => Math.random().toString(36).substr(2, 9);
 
-export function ChatCoreMain({ messageHandler, onMessageUpdate }: ChatCoreMainProps) {
+export function ChatCoreMain({ messageHandler, onMessageUpdate, onConversationUpdate }: ChatCoreMainProps) {
   const { state, actions } = useChatContext();
   const [isRunning, setIsRunning] = useState(false);
 
@@ -73,6 +74,14 @@ export function ChatCoreMain({ messageHandler, onMessageUpdate }: ChatCoreMainPr
   // Get messages for current thread
   const currentMessages = actions.getCurrentMessages();
 
+
+  console.log("CURRENT MESSAGES", currentMessages);
+
+  // Notify parent component of conversation changes
+  React.useEffect(() => {
+    onConversationUpdate?.(currentMessages);
+  }, [currentMessages]);
+
   // Convert custom format to ThreadMessageLike (same as your current implementation)
   const convertMessage = (message: ChatMessage): ThreadMessageLike => ({
     role: message.role,
@@ -106,6 +115,8 @@ export function ChatCoreMain({ messageHandler, onMessageUpdate }: ChatCoreMainPr
     try {
       // Use the message handler (no more complex logic here!)
       const response = await messageHandler.sendMessage(userMessage.text);
+
+      console.log("AI RESPONSE", response);
 
       const assistantMessage: ChatMessage = {
         id: generateId(),

client/packages/lowcoder/src/comps/comps/chatComp/handlers/messageHandlers.ts

@@ -75,21 +75,7 @@ export class QueryHandler implements MessageHandler {
         )
       );
 
-      // Extract reply text from the query result (same logic as your current implementation)
-      let content: string;
-      if (typeof result === "string") {
-        content = result;
-      } else if (result && typeof result === "object") {
-        content =
-          (result as any).response ??
-          (result as any).message ??
-          (result as any).content ??
-          JSON.stringify(result);
-      } else {
-        content = String(result);
-      }
-
-      return { content };
+     return result.message
     } catch (e: any) {
       throw new Error(e?.message || "Query execution failed");
     }

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

@@ -35,6 +35,7 @@ export interface ChatMessage {
     deleteMessages(threadId: string): Promise<void>;
     clearAllData(): Promise<void>;
     resetDatabase(): Promise<void>;
+    cleanup(): Promise<void>;
   }
 
   // ============================================================================
@@ -75,6 +76,7 @@ export interface ChatMessage {
     storage: ChatStorage;
     messageHandler: MessageHandler;
     onMessageUpdate?: (message: string) => void;
+    onConversationUpdate?: (conversationHistory: ChatMessage[]) => void;
   }
 
   export interface ChatPanelProps {

client/packages/lowcoder/src/comps/comps/chatComp/utils/storageFactory.ts

@@ -9,16 +9,15 @@ import { ChatMessage, ChatThread, ChatStorage } from "../types/chatTypes";
 
 export function createChatStorage(tableName: string): ChatStorage {
   const dbName = `ChatDB_${tableName}`;
-  const threadsTable = `${tableName}_threads`;
-  const messagesTable = `${tableName}_messages`;
+  const threadsTable = `${dbName}.${tableName}_threads`;
+  const messagesTable = `${dbName}.${tableName}_messages`;
 
   return {
     async initialize() {
       try {
         // Create database with localStorage backend
         await alasql.promise(`CREATE LOCALSTORAGE DATABASE IF NOT EXISTS ${dbName}`);
         await alasql.promise(`ATTACH LOCALSTORAGE DATABASE ${dbName}`);
-        await alasql.promise(`USE ${dbName}`);
 
         // Create threads table
         await alasql.promise(`
@@ -176,6 +175,14 @@ export function createChatStorage(tableName: string): ChatStorage {
         console.error("Failed to reset database:", error);
         throw error;
       }
+    },
+    async cleanup() {
+      try {
+        await alasql.promise(`DROP LOCALSTORAGE DATABASE IF EXISTS ${dbName}`);
+      } catch (error) {
+        console.error("Failed to cleanup database:", error);
+        throw error;
+      }
     }
   };
 }