From 4585d15e898058481a36a00e92a269c799b59806 Mon Sep 17 00:00:00 2001 From: FARAN Date: Mon, 7 Jul 2025 18:27:25 +0500 Subject: [PATCH 01/17] [feat] replace mock data with query --- .../src/comps/comps/chatComp/chatComp.tsx | 41 ++----- .../src/comps/comps/chatComp/chatCompTypes.ts | 22 ++-- .../comps/comps/chatComp/chatPropertyView.tsx | 43 ++++--- .../src/comps/comps/chatComp/chatView.tsx | 11 +- .../comps/chatComp/components/ChatApp.tsx | 17 +-- .../comps/chatComp/components/ChatMain.tsx | 116 ++++++++++-------- 6 files changed, 125 insertions(+), 125 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/chatComp.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/chatComp.tsx index d26dce7b2..921ed8083 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/chatComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/chatComp/chatComp.tsx @@ -8,39 +8,22 @@ import { useEffect, useState } from "react"; import { changeChildAction } from "lowcoder-core"; // Build the component -let ChatTmpComp = new UICompBuilder( - chatChildrenMap, - (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 ; - } +const ChatTmpComp = new UICompBuilder( + chatChildrenMap, + (props, dispatch) => ( + + ) ) .setPropertyViewFn((children) => ) .build(); -ChatTmpComp = class extends ChatTmpComp { - override autoHeight(): boolean { - return this.children.autoHeight.getView(); - } -}; - -// Export the component +// Export the component with exposed variables export const ChatComp = withExposingConfigs(ChatTmpComp, [ new NameConfig("text", "Chat component text"), + new NameConfig("currentMessage", "Current user message"), ]); \ No newline at end of file diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/chatCompTypes.ts b/client/packages/lowcoder/src/comps/comps/chatComp/chatCompTypes.ts index 87dca43a3..4484c1543 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/chatCompTypes.ts +++ b/client/packages/lowcoder/src/comps/comps/chatComp/chatCompTypes.ts @@ -1,5 +1,6 @@ // client/packages/lowcoder/src/comps/comps/chatComp/chatCompTypes.ts import { StringControl, NumberControl } from "comps/controls/codeControl"; +import { stringExposingStateControl } from "comps/controls/codeStateControl"; import { withDefault } from "comps/generators"; import { BoolControl } from "comps/controls/boolControl"; import { dropdownControl } from "comps/controls/dropdownControl"; @@ -14,26 +15,25 @@ const ModelTypeOptions = [ export const chatChildrenMap = { text: withDefault(StringControl, "Chat Component Placeholder"), + chatQuery: QuerySelectControl, + currentMessage: stringExposingStateControl("currentMessage", ""), 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; - modelHost?: string; - autoHeight?: boolean; - tableName?: string; + text: string; + chatQuery: string; + currentMessage: string; + modelType: string; + streaming: boolean; + systemPrompt: string; + agent: boolean; + maxInteractions: number; }; \ No newline at end of file diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/chatPropertyView.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/chatPropertyView.tsx index 2a9143c4a..a5b3f5249 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/chatPropertyView.tsx +++ b/client/packages/lowcoder/src/comps/comps/chatComp/chatPropertyView.tsx @@ -7,28 +7,27 @@ export const ChatPropertyView = React.memo((props: any) => { const { children } = props; return ( - <> -
- {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", - })} -
-
- {children.autoHeight.propertyView({ label: trans("prop.height") })} -
- +
+ {children.text.propertyView({ label: "Text" })} + {children.chatQuery.propertyView({ label: "Chat Query" })} + {children.currentMessage.propertyView({ + label: "Current Message (Dynamic)", + placeholder: "Shows the current user message", + disabled: true + })} + {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", + })} +
); }); diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/chatView.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/chatView.tsx index eca764ba6..93b95af4c 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/chatView.tsx +++ b/client/packages/lowcoder/src/comps/comps/chatComp/chatView.tsx @@ -1,13 +1,20 @@ // client/packages/lowcoder/src/comps/comps/chatComp/chatView.tsx import React from "react"; import { ChatCompProps } from "./chatCompTypes"; +import { CompAction } from "lowcoder-core"; import { ChatApp } from "./components/ChatApp"; import "@assistant-ui/styles/index.css"; import "@assistant-ui/styles/markdown.css"; -export const ChatView = React.memo((props: ChatCompProps) => { - return ; +// Extend the props we receive so we can forward the redux dispatch +interface ChatViewProps extends ChatCompProps { + dispatch?: (action: CompAction) => void; +} + +export const ChatView = React.memo((props: ChatViewProps) => { + const { chatQuery, currentMessage, dispatch } = props; + return ; }); ChatView.displayName = 'ChatView'; \ No newline at end of file diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatApp.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatApp.tsx index e8092a494..3353de689 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatApp.tsx +++ b/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatApp.tsx @@ -1,16 +1,17 @@ import { ChatProvider } from "./context/ChatContext"; import { ChatMain } from "./ChatMain"; -import { ChatCompProps } from "../chatCompTypes"; -import { useEffect, useState } from "react"; +import { CompAction } from "lowcoder-core"; -export function ChatApp(props: ChatCompProps) { - if (!Boolean(props.tableName)) { - return null; // Don't render until we have a unique DB name - } - +interface ChatAppProps { + chatQuery: string; + currentMessage: string; + dispatch?: (action: CompAction) => void; +} + +export function ChatApp({ chatQuery, currentMessage, dispatch }: ChatAppProps) { return ( - + ); } diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatMain.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatMain.tsx index 1c906e408..d9718b803 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatMain.tsx +++ b/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatMain.tsx @@ -16,11 +16,8 @@ import { ArchivedThreadData } from "./context/ChatContext"; import styled from "styled-components"; -import { ChatCompProps } from "../chatCompTypes"; -import { message } from "antd"; -import { EditorContext } from "@lowcoder-ee/comps/editorState"; -import { addComponentAction, nestComponentAction } from "../../preLoadComp/actions/componentManagement"; -import { configureComponentAction } from "../../preLoadComp/actions/componentConfiguration"; +import { routeByNameAction, executeQueryAction, CompAction, changeChildAction } from "lowcoder-core"; +import { getPromiseAfterDispatch } from "util/promiseUtils"; const ChatContainer = styled.div<{ $autoHeight?: boolean }>` display: flex; @@ -54,38 +51,57 @@ const ChatContainer = styled.div<{ $autoHeight?: boolean }>` const generateId = () => Math.random().toString(36).substr(2, 9); -const callYourAPI = async (params: { - text: string, - modelHost: string, - modelType: string, - sessionId: string, -}) => { - const { text, modelHost, modelType, sessionId } = params; - - let url = modelHost; - if (modelType === "direct-llm") { - url = `${modelHost}/api/chat/completions`; +// Helper to call the Lowcoder query system +const callQuery = async ( + queryName: string, + prompt: string, + dispatch?: (action: CompAction) => void +) => { + // If no query selected or dispatch unavailable, fallback with mock response + if (!queryName || !dispatch) { + await new Promise((res) => setTimeout(res, 500)); + return { content: "(mock) You typed: " + prompt }; } - const response = await fetch(`${url}`, { - method: "POST", - body: JSON.stringify({ - text, - sessionId, - }), - }); + try { + const result: any = await getPromiseAfterDispatch( + dispatch, + routeByNameAction( + queryName, + executeQueryAction({ + // Send the user prompt as variable named 'prompt' by default + args: { prompt: { value: prompt } }, + }) + ) + ); + + // Extract reply text from the query result + let reply: string; + if (typeof result === "string") { + reply = result; + } else if (result && typeof result === "object") { + reply = + (result as any).response ?? + (result as any).message ?? + (result as any).content ?? + JSON.stringify(result); + } else { + reply = String(result); + } - return response.json(); - // Simulate API delay - // await new Promise(resolve => setTimeout(resolve, 1500)); - - // Simple responses - // return { - // content: "This is a mock response from your backend. You typed: " + text - // }; + return { content: reply }; + } catch (e: any) { + throw new Error(e?.message || "Query execution failed"); + } }; -export function ChatMain(props: ChatCompProps) { +interface ChatMainProps { + chatQuery: string; + currentMessage: string; + dispatch?: (action: CompAction) => void; +} + +export function ChatMain({ chatQuery, currentMessage, dispatch }: ChatMainProps) { const { state, actions } = useChatContext(); const [isRunning, setIsRunning] = useState(false); const editorState = useContext(EditorContext); @@ -178,21 +194,19 @@ export function ChatMain(props: ChatCompProps) { timestamp: Date.now(), }; + // Update currentMessage state to expose to queries + if (dispatch) { + dispatch(changeChildAction("currentMessage", userMessage.text, false)); + } + // Update current thread with new user message await actions.addMessage(state.currentThreadId, userMessage); setIsRunning(true); try { - // Call mock API - const response = await callYourAPI({ - text: userMessage.text, - modelHost: props.modelHost!, - modelType: props.modelType!, - sessionId: state.currentThreadId, - }); - const {explanation: reply, actions: editorActions} = JSON.parse(response?.output); - performAction(editorActions); - + // Call selected query / fallback to mock + const response = await callQuery(chatQuery, userMessage.text, dispatch); + const assistantMessage: MyMessage = { id: generateId(), role: "assistant", @@ -239,22 +253,18 @@ export function ChatMain(props: ChatCompProps) { }; newMessages.push(editedMessage); + // Update currentMessage state to expose to queries + if (dispatch) { + dispatch(changeChildAction("currentMessage", editedMessage.text, false)); + } + // Update messages using the new context action await actions.updateMessages(state.currentThreadId, newMessages); setIsRunning(true); try { - // Generate new response - const response = await callYourAPI({ - text: editedMessage.text, - modelHost: props.modelHost!, - modelType: props.modelType!, - sessionId: state.currentThreadId, - }); - - const {explanation: reply, actions: editorActions} = JSON.parse(response?.output); - performAction(editorActions); - + const response = await callQuery(chatQuery, editedMessage.text, dispatch); + const assistantMessage: MyMessage = { id: generateId(), role: "assistant", From 75e635a25d62b9a3a59b8591de07be2680bd8610 Mon Sep 17 00:00:00 2001 From: FARAN Date: Mon, 7 Jul 2025 23:28:05 +0500 Subject: [PATCH 02/17] [Feat]: make chat component flexible --- .../src/comps/comps/chatComp/chatCompTypes.ts | 8 +- .../src/comps/comps/chatComp/chatView.tsx | 32 ++- .../comps/chatComp/components/ChatApp.tsx | 34 +++- .../comps/chatComp/components/ChatMain.tsx | 39 +++- .../components/context/ChatContext.tsx | 26 +-- .../chatComp/utils/chatStorageFactory.ts | 189 ++++++++++++++++++ .../comps/chatComp/utils/responseFactory.ts | 27 +++ .../comps/chatComp/utils/responseHandlers.ts | 99 +++++++++ .../src/pages/editor/bottom/BottomPanel.tsx | 14 +- 9 files changed, 437 insertions(+), 31 deletions(-) create mode 100644 client/packages/lowcoder/src/comps/comps/chatComp/utils/chatStorageFactory.ts create mode 100644 client/packages/lowcoder/src/comps/comps/chatComp/utils/responseFactory.ts create mode 100644 client/packages/lowcoder/src/comps/comps/chatComp/utils/responseHandlers.ts diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/chatCompTypes.ts b/client/packages/lowcoder/src/comps/comps/chatComp/chatCompTypes.ts index 4484c1543..5c5574471 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/chatCompTypes.ts +++ b/client/packages/lowcoder/src/comps/comps/chatComp/chatCompTypes.ts @@ -11,20 +11,20 @@ import { AutoHeightControl } from "@lowcoder-ee/comps/controls/autoHeightControl const ModelTypeOptions = [ { label: "Direct LLM", value: "direct-llm" }, { label: "n8n Workflow", value: "n8n" }, + { label: "Query", value: "query" }, ] as const; export const chatChildrenMap = { text: withDefault(StringControl, "Chat Component Placeholder"), chatQuery: QuerySelectControl, currentMessage: stringExposingStateControl("currentMessage", ""), - modelType: dropdownControl(ModelTypeOptions, "direct-llm"), + modelType: dropdownControl(ModelTypeOptions, "query"), modelHost: withDefault(StringControl, ""), streaming: BoolControl.DEFAULT_TRUE, systemPrompt: withDefault(StringControl, "You are a helpful assistant."), agent: BoolControl, maxInteractions: withDefault(NumberControl, 10), - autoHeight: AutoHeightControl, - tableName: withDefault(StringControl, ""), + tableName: withDefault(StringControl, "default"), }; export type ChatCompProps = { @@ -32,8 +32,10 @@ export type ChatCompProps = { chatQuery: string; currentMessage: string; modelType: string; + modelHost: string; streaming: boolean; systemPrompt: string; agent: boolean; maxInteractions: number; + tableName: string; }; \ No newline at end of file diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/chatView.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/chatView.tsx index 93b95af4c..544e73e8d 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/chatView.tsx +++ b/client/packages/lowcoder/src/comps/comps/chatComp/chatView.tsx @@ -1,8 +1,9 @@ // client/packages/lowcoder/src/comps/comps/chatComp/chatView.tsx -import React from "react"; +import React, { useMemo } from "react"; import { ChatCompProps } from "./chatCompTypes"; import { CompAction } from "lowcoder-core"; import { ChatApp } from "./components/ChatApp"; +import { createChatStorage } from './utils/chatStorageFactory'; import "@assistant-ui/styles/index.css"; import "@assistant-ui/styles/markdown.css"; @@ -13,8 +14,33 @@ interface ChatViewProps extends ChatCompProps { } export const ChatView = React.memo((props: ChatViewProps) => { - const { chatQuery, currentMessage, dispatch } = props; - return ; + const { + chatQuery, + currentMessage, + dispatch, + modelType, + modelHost, + systemPrompt, + streaming, + tableName + } = props; + + // Create storage instance based on tableName + const storage = useMemo(() => createChatStorage(tableName || "default"), [tableName]); + + return ( + + ); }); ChatView.displayName = 'ChatView'; \ No newline at end of file diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatApp.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatApp.tsx index 3353de689..12ee0071f 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatApp.tsx +++ b/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatApp.tsx @@ -1,17 +1,43 @@ import { ChatProvider } from "./context/ChatContext"; import { ChatMain } from "./ChatMain"; import { CompAction } from "lowcoder-core"; +import { createChatStorage } from "../utils/chatStorageFactory"; interface ChatAppProps { chatQuery: string; currentMessage: string; dispatch?: (action: CompAction) => void; + modelType: string; + modelHost?: string; + systemPrompt?: string; + streaming?: boolean; + tableName: string; + storage: ReturnType; } -export function ChatApp({ chatQuery, currentMessage, dispatch }: ChatAppProps) { +export function ChatApp({ + chatQuery, + currentMessage, + dispatch, + modelType, + modelHost, + systemPrompt, + streaming, + tableName, + storage +}: ChatAppProps) { return ( - - + + ); -} +} \ No newline at end of file diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatMain.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatMain.tsx index d9718b803..3359c7580 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatMain.tsx +++ b/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatMain.tsx @@ -18,6 +18,9 @@ import { import styled from "styled-components"; import { routeByNameAction, executeQueryAction, CompAction, changeChildAction } from "lowcoder-core"; import { getPromiseAfterDispatch } from "util/promiseUtils"; +// ADD THIS IMPORT: +import { createResponseHandler } from '../utils/responseFactory'; +import { useMemo } from 'react'; // if not already imported const ChatContainer = styled.div<{ $autoHeight?: boolean }>` display: flex; @@ -95,13 +98,28 @@ const callQuery = async ( } }; +// AFTER: interface ChatMainProps { chatQuery: string; currentMessage: string; dispatch?: (action: CompAction) => void; + // Add new props for response handling + modelType: string; + modelHost?: string; + systemPrompt?: string; + streaming?: boolean; + tableName: string; } -export function ChatMain({ chatQuery, currentMessage, dispatch }: ChatMainProps) { +export function ChatMain({ + chatQuery, + currentMessage, + dispatch, + modelType, + modelHost, + systemPrompt, + streaming, + tableName }: ChatMainProps) { const { state, actions } = useChatContext(); const [isRunning, setIsRunning] = useState(false); const editorState = useContext(EditorContext); @@ -113,6 +131,21 @@ export function ChatMain({ chatQuery, currentMessage, dispatch }: ChatMainProps) editorStateRef.current = editorState; }, [editorState]); +// Create response handler based on model type +const responseHandler = useMemo(() => { + const responseType = modelType === "n8n" ? "direct-api" : "query"; + + return createResponseHandler(responseType, { + // Query handler config + chatQuery, + dispatch, + // Direct API handler config + modelHost, + systemPrompt, + streaming + }); +}, [modelType, chatQuery, dispatch, modelHost, systemPrompt, streaming]); + console.log("STATE", state); // Get messages for current thread @@ -205,7 +238,7 @@ export function ChatMain({ chatQuery, currentMessage, dispatch }: ChatMainProps) try { // Call selected query / fallback to mock - const response = await callQuery(chatQuery, userMessage.text, dispatch); + const response = await responseHandler.sendMessage(userMessage.text); const assistantMessage: MyMessage = { id: generateId(), @@ -263,7 +296,7 @@ export function ChatMain({ chatQuery, currentMessage, dispatch }: ChatMainProps) setIsRunning(true); try { - const response = await callQuery(chatQuery, editedMessage.text, dispatch); + const response = await responseHandler.sendMessage(editedMessage.text); const assistantMessage: MyMessage = { id: generateId(), diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/components/context/ChatContext.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/components/context/ChatContext.tsx index 41ef892af..68c4d4206 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/components/context/ChatContext.tsx +++ b/client/packages/lowcoder/src/comps/comps/chatComp/components/context/ChatContext.tsx @@ -1,6 +1,5 @@ import React, { createContext, useContext, useReducer, useEffect, ReactNode } from "react"; -import { chatStorage, ThreadData as StoredThreadData } from "../../utils/chatStorage"; - +import { ThreadData as StoredThreadData } from "../../utils/chatStorageFactory"; // Define thread-specific message type export interface MyMessage { id: string; @@ -176,7 +175,8 @@ interface ChatContextType { const ChatContext = createContext(null); // Chat provider component -export function ChatProvider({ children }: { children: ReactNode }) { + export function ChatProvider({ children, storage }: { children: ReactNode, storage: ReturnType; + }) { const [state, dispatch] = useReducer(chatReducer, initialState); // Initialize data from storage @@ -184,10 +184,10 @@ export function ChatProvider({ children }: { children: ReactNode }) { dispatch({ type: "INITIALIZE_START" }); try { - await chatStorage.initialize(); + await storage.initialize(); // Load all threads from storage - const storedThreads = await chatStorage.getAllThreads(); + const storedThreads = await storage.getAllThreads(); if (storedThreads.length > 0) { // Convert stored threads to UI format @@ -200,7 +200,7 @@ export function ChatProvider({ children }: { children: ReactNode }) { // Load messages for each thread const threadMessages = new Map(); for (const thread of storedThreads) { - const messages = await chatStorage.getMessages(thread.threadId); + const messages = await storage.getMessages(thread.threadId); threadMessages.set(thread.threadId, messages); } @@ -228,7 +228,7 @@ export function ChatProvider({ children }: { children: ReactNode }) { createdAt: Date.now(), updatedAt: Date.now(), }; - await chatStorage.saveThread(defaultThread); + await storage.saveThread(defaultThread); dispatch({ type: "INITIALIZE_SUCCESS", @@ -268,7 +268,7 @@ export function ChatProvider({ children }: { children: ReactNode }) { createdAt: Date.now(), updatedAt: Date.now(), }; - await chatStorage.saveThread(storedThread); + await storage.saveThread(storedThread); dispatch({ type: "MARK_SAVED" }); } catch (error) { console.error("Failed to save new thread:", error); @@ -283,14 +283,14 @@ export function ChatProvider({ children }: { children: ReactNode }) { // Save to storage try { - const existingThread = await chatStorage.getThread(threadId); + const existingThread = await storage.getThread(threadId); if (existingThread) { const updatedThread: StoredThreadData = { ...existingThread, ...updates, updatedAt: Date.now(), }; - await chatStorage.saveThread(updatedThread); + await storage.saveThread(updatedThread); dispatch({ type: "MARK_SAVED" }); } } catch (error) { @@ -304,7 +304,7 @@ export function ChatProvider({ children }: { children: ReactNode }) { // Delete from storage try { - await chatStorage.deleteThread(threadId); + await storage.deleteThread(threadId); dispatch({ type: "MARK_SAVED" }); } catch (error) { console.error("Failed to delete thread:", error); @@ -318,7 +318,7 @@ export function ChatProvider({ children }: { children: ReactNode }) { // Save to storage try { - await chatStorage.saveMessage(message, threadId); + await storage.saveMessage(message, threadId); dispatch({ type: "MARK_SAVED" }); } catch (error) { console.error("Failed to save message:", error); @@ -331,7 +331,7 @@ export function ChatProvider({ children }: { children: ReactNode }) { // Save to storage try { - await chatStorage.saveMessages(messages, threadId); + await storage.saveMessages(messages, threadId); dispatch({ type: "MARK_SAVED" }); } catch (error) { console.error("Failed to save messages:", error); diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/utils/chatStorageFactory.ts b/client/packages/lowcoder/src/comps/comps/chatComp/utils/chatStorageFactory.ts new file mode 100644 index 000000000..e7f44a26c --- /dev/null +++ b/client/packages/lowcoder/src/comps/comps/chatComp/utils/chatStorageFactory.ts @@ -0,0 +1,189 @@ +// client/packages/lowcoder/src/comps/comps/chatComp/utils/chatStorageFactory.ts +import alasql from "alasql"; +import { MyMessage } from "../components/context/ChatContext"; + +// Thread data interface +export interface ThreadData { + threadId: string; + status: "regular" | "archived"; + title: string; + createdAt: number; + updatedAt: number; +} + +export const createChatStorage = (tableName: string) => { + const dbName = `ChatDB_${tableName}`; + const threadsTable = `${tableName}_threads`; + const messagesTable = `${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(` + CREATE TABLE IF NOT EXISTS ${threadsTable} ( + threadId STRING PRIMARY KEY, + status STRING, + title STRING, + createdAt NUMBER, + updatedAt NUMBER + ) + `); + + // Create messages table + await alasql.promise(` + CREATE TABLE IF NOT EXISTS ${messagesTable} ( + id STRING PRIMARY KEY, + threadId STRING, + role STRING, + text STRING, + timestamp NUMBER + ) + `); + + console.log(`✅ Chat database initialized: ${dbName}`); + } catch (error) { + console.error(`Failed to initialize chat database ${dbName}:`, error); + throw error; + } + }, + + async saveThread(thread: ThreadData) { + try { + // Insert or replace thread + await alasql.promise(` + DELETE FROM ${threadsTable} WHERE threadId = ? + `, [thread.threadId]); + + await alasql.promise(` + INSERT INTO ${threadsTable} VALUES (?, ?, ?, ?, ?) + `, [thread.threadId, thread.status, thread.title, thread.createdAt, thread.updatedAt]); + } catch (error) { + console.error("Failed to save thread:", error); + throw error; + } + }, + + async getThread(threadId: string) { + try { + const result = await alasql.promise(` + SELECT * FROM ${threadsTable} WHERE threadId = ? + `, [threadId]) as ThreadData[]; + + return result && result.length > 0 ? result[0] : null; + } catch (error) { + console.error("Failed to get thread:", error); + return null; + } + }, + + async getAllThreads() { + try { + const result = await alasql.promise(` + SELECT * FROM ${threadsTable} ORDER BY updatedAt DESC + `) as ThreadData[]; + + return Array.isArray(result) ? result : []; + } catch (error) { + console.error("Failed to get threads:", error); + return []; + } + }, + + async deleteThread(threadId: string) { + try { + // Delete thread and all its messages + await alasql.promise(`DELETE FROM ${threadsTable} WHERE threadId = ?`, [threadId]); + await alasql.promise(`DELETE FROM ${messagesTable} WHERE threadId = ?`, [threadId]); + } catch (error) { + console.error("Failed to delete thread:", error); + throw error; + } + }, + + async saveMessage(message: MyMessage, threadId: string) { + try { + // Insert or replace message + await alasql.promise(` + DELETE FROM ${messagesTable} WHERE id = ? + `, [message.id]); + + await alasql.promise(` + INSERT INTO ${messagesTable} VALUES (?, ?, ?, ?, ?) + `, [message.id, threadId, message.role, message.text, message.timestamp]); + } catch (error) { + console.error("Failed to save message:", error); + throw error; + } + }, + + async saveMessages(messages: MyMessage[], threadId: string) { + try { + // Delete existing messages for this thread + await alasql.promise(`DELETE FROM ${messagesTable} WHERE threadId = ?`, [threadId]); + + // Insert all messages + for (const message of messages) { + await alasql.promise(` + INSERT INTO ${messagesTable} VALUES (?, ?, ?, ?, ?) + `, [message.id, threadId, message.role, message.text, message.timestamp]); + } + } catch (error) { + console.error("Failed to save messages:", error); + throw error; + } + }, + + async getMessages(threadId: string) { + try { + const result = await alasql.promise(` + SELECT id, role, text, timestamp FROM ${messagesTable} + WHERE threadId = ? ORDER BY timestamp ASC + `, [threadId]) as MyMessage[]; + + return Array.isArray(result) ? result : []; + } catch (error) { + console.error("Failed to get messages:", error); + return []; + } + }, + + async deleteMessages(threadId: string) { + try { + await alasql.promise(`DELETE FROM ${messagesTable} WHERE threadId = ?`, [threadId]); + } catch (error) { + console.error("Failed to delete messages:", error); + throw error; + } + }, + + async clearAllData() { + try { + await alasql.promise(`DELETE FROM ${threadsTable}`); + await alasql.promise(`DELETE FROM ${messagesTable}`); + } catch (error) { + console.error("Failed to clear all data:", error); + throw error; + } + }, + + async resetDatabase() { + try { + // Drop the entire database + await alasql.promise(`DROP LOCALSTORAGE DATABASE IF EXISTS ${dbName}`); + + // Reinitialize fresh + await this.initialize(); + console.log(`✅ Database reset and reinitialized: ${dbName}`); + } catch (error) { + console.error("Failed to reset database:", error); + throw error; + } + } + }; +}; \ No newline at end of file diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/utils/responseFactory.ts b/client/packages/lowcoder/src/comps/comps/chatComp/utils/responseFactory.ts new file mode 100644 index 000000000..91d479335 --- /dev/null +++ b/client/packages/lowcoder/src/comps/comps/chatComp/utils/responseFactory.ts @@ -0,0 +1,27 @@ +// client/packages/lowcoder/src/comps/comps/chatComp/utils/responseFactory.ts +import { + queryResponseHandler, + directApiResponseHandler, + mockResponseHandler + } from './responseHandlers'; + + export const createResponseHandler = (type: string, config: any) => { + const sendMessage = async (message: string) => { + switch (type) { + case "query": + return await queryResponseHandler(message, config); + + case "direct-api": + case "n8n": + return await directApiResponseHandler(message, config); + + case "mock": + return await mockResponseHandler(message, config); + + default: + throw new Error(`Unknown response type: ${type}`); + } + }; + + return { sendMessage }; + }; \ No newline at end of file diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/utils/responseHandlers.ts b/client/packages/lowcoder/src/comps/comps/chatComp/utils/responseHandlers.ts new file mode 100644 index 000000000..ae384660c --- /dev/null +++ b/client/packages/lowcoder/src/comps/comps/chatComp/utils/responseHandlers.ts @@ -0,0 +1,99 @@ +// client/packages/lowcoder/src/comps/comps/chatComp/utils/responseHandlers.ts +import { CompAction, routeByNameAction, executeQueryAction } from "lowcoder-core"; +import { getPromiseAfterDispatch } from "util/promiseUtils"; + +// Query response handler (your current logic) +export const queryResponseHandler = async ( + message: string, + config: { chatQuery: string; dispatch?: (action: CompAction) => void } +) => { + const { chatQuery, dispatch } = config; + + // If no query selected or dispatch unavailable, fallback with mock response + if (!chatQuery || !dispatch) { + await new Promise((res) => setTimeout(res, 500)); + return { content: "(mock) You typed: " + message }; + } + + try { + const result: any = await getPromiseAfterDispatch( + dispatch, + routeByNameAction( + chatQuery, + executeQueryAction({ + // Send the user prompt as variable named 'prompt' by default + args: { prompt: { value: message } }, + }) + ) + ); + + // Extract reply text from the query result + let reply: string; + if (typeof result === "string") { + reply = result; + } else if (result && typeof result === "object") { + reply = + (result as any).response ?? + (result as any).message ?? + (result as any).content ?? + JSON.stringify(result); + } else { + reply = String(result); + } + + return { content: reply }; + } catch (e: any) { + throw new Error(e?.message || "Query execution failed"); + } +}; + +// Direct API response handler (for bottom panel usage) +export const directApiResponseHandler = async ( + message: string, + config: { modelHost: string; systemPrompt: string; streaming?: boolean } +) => { + const { modelHost, systemPrompt, streaming } = config; + + if (!modelHost) { + throw new Error("Model host is required for direct API calls"); + } + + try { + const response = await fetch(modelHost, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + message, + systemPrompt: systemPrompt || "You are a helpful assistant.", + streaming: streaming || false + }) + }); + + if (!response.ok) { + throw new Error(`API call failed: ${response.status} ${response.statusText}`); + } + + const data = await response.json(); + + // Extract content from various possible response formats + const content = data.response || data.message || data.content || data.text || String(data); + + return { content }; + } catch (error) { + throw new Error(`Direct API call failed: ${error instanceof Error ? error.message : 'Unknown error'}`); + } +}; + +// Mock response handler (for testing) +export const mockResponseHandler = async ( + message: string, + config: { delay?: number; prefix?: string } +) => { + const { delay = 1000, prefix = "Mock response" } = config; + + await new Promise(resolve => setTimeout(resolve, delay)); + + return { content: `${prefix}: ${message}` }; +}; \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/editor/bottom/BottomPanel.tsx b/client/packages/lowcoder/src/pages/editor/bottom/BottomPanel.tsx index d074696f1..8903ef237 100644 --- a/client/packages/lowcoder/src/pages/editor/bottom/BottomPanel.tsx +++ b/client/packages/lowcoder/src/pages/editor/bottom/BottomPanel.tsx @@ -121,11 +121,15 @@ function Bottom(props: any) { )} From 56e5247bb8ec2fb3b3f00a855c5b96089fb70d7a Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Tue, 8 Jul 2025 22:51:15 +0500 Subject: [PATCH 03/17] setup sse http query --- .../src/components/ResCreatePanel.tsx | 12 +- .../comps/queries/httpQuery/sseHttpQuery.tsx | 435 ++++++++++++++++++ .../src/constants/datasourceConstants.ts | 1 + .../lowcoder/src/constants/queryConstants.ts | 3 + .../packages/lowcoder/src/i18n/locales/en.ts | 1 + .../lowcoder/src/util/bottomResUtils.tsx | 2 + 6 files changed, 453 insertions(+), 1 deletion(-) create mode 100644 client/packages/lowcoder/src/comps/queries/httpQuery/sseHttpQuery.tsx diff --git a/client/packages/lowcoder/src/components/ResCreatePanel.tsx b/client/packages/lowcoder/src/components/ResCreatePanel.tsx index 04ed9fb79..e52ea93df 100644 --- a/client/packages/lowcoder/src/components/ResCreatePanel.tsx +++ b/client/packages/lowcoder/src/components/ResCreatePanel.tsx @@ -13,7 +13,7 @@ import { BottomResTypeEnum } from "types/bottomRes"; import { LargeBottomResIconWrapper } from "util/bottomResUtils"; import type { PageType } from "../constants/pageConstants"; import type { SizeType } from "antd/es/config-provider/SizeContext"; -import { Datasource } from "constants/datasourceConstants"; +import { Datasource, QUICK_SSE_HTTP_API_ID } from "constants/datasourceConstants"; import { QUICK_GRAPHQL_ID, QUICK_REST_API_ID, @@ -172,6 +172,7 @@ const ResButton = (props: { compType: "streamApi", }, }, + alasql: { label: trans("query.quickAlasql"), type: BottomResTypeEnum.Query, @@ -179,6 +180,14 @@ const ResButton = (props: { compType: "alasql", }, }, + sseHttpApi: { + label: trans("query.quickSseHttpAPI"), + type: BottomResTypeEnum.Query, + extra: { + compType: "sseHttpApi", + dataSourceId: QUICK_SSE_HTTP_API_ID, + }, + }, graphql: { label: trans("query.quickGraphql"), type: BottomResTypeEnum.Query, @@ -339,6 +348,7 @@ export function ResCreatePanel(props: ResCreateModalProps) { + setCurlModalVisible(true)}> diff --git a/client/packages/lowcoder/src/comps/queries/httpQuery/sseHttpQuery.tsx b/client/packages/lowcoder/src/comps/queries/httpQuery/sseHttpQuery.tsx new file mode 100644 index 000000000..126063d09 --- /dev/null +++ b/client/packages/lowcoder/src/comps/queries/httpQuery/sseHttpQuery.tsx @@ -0,0 +1,435 @@ +import { Dropdown, ValueFromOption } from "components/Dropdown"; +import { QueryConfigItemWrapper, QueryConfigLabel, QueryConfigWrapper } from "components/query"; +import { valueComp, withDefault } from "comps/generators"; +import { trans } from "i18n"; +import { includes } from "lodash"; +import { CompAction, MultiBaseComp } from "lowcoder-core"; +import { keyValueListControl } from "../../controls/keyValueListControl"; +import { ParamsJsonControl, ParamsStringControl } from "../../controls/paramsControl"; +import { withTypeAndChildrenAbstract } from "../../generators/withType"; +import { QueryResult } from "../queryComp"; +import { QUERY_EXECUTION_ERROR, QUERY_EXECUTION_OK } from "constants/queryConstants"; +import { JSONValue } from "util/jsonTypes"; +import { + HttpHeaderPropertyView, + HttpParametersPropertyView, + HttpPathPropertyView, +} from "./httpQueryConstants"; + +const BodyTypeOptions = [ + { label: "JSON", value: "application/json" }, + { label: "Raw", value: "text/plain" }, + { + label: "x-www-form-urlencoded", + value: "application/x-www-form-urlencoded", + }, + { label: "Form Data", value: "multipart/form-data" }, + { label: "None", value: "none" }, +] as const; +type BodyTypeValue = ValueFromOption; + +const HttpMethodOptions = [ + { label: "GET", value: "GET" }, + { label: "POST", value: "POST" }, + { label: "PUT", value: "PUT" }, + { label: "DELETE", value: "DELETE" }, + { label: "PATCH", value: "PATCH" }, + { label: "HEAD", value: "HEAD" }, + { label: "OPTIONS", value: "OPTIONS" }, + { label: "TRACE", value: "TRACE" }, +] as const; +type HttpMethodValue = ValueFromOption; + +const CommandMap = { + "application/json": ParamsJsonControl, + "text/plain": ParamsStringControl, + "application/x-www-form-urlencoded": ParamsStringControl, + "multipart/form-data": ParamsStringControl, + none: ParamsStringControl, +}; + +const childrenMap = { + httpMethod: valueComp("GET"), + path: ParamsStringControl, + headers: withDefault(keyValueListControl(), [{ key: "", value: "" }]), + params: withDefault(keyValueListControl(), [{ key: "", value: "" }]), + bodyFormData: withDefault( + keyValueListControl(true, [ + { label: trans("httpQuery.text"), value: "text" }, + { label: trans("httpQuery.file"), value: "file" }, + ] as const), + [{ key: "", value: "", type: "text" }] + ), +}; + +const SseHttpTmpQuery = withTypeAndChildrenAbstract( + CommandMap, + "none", + childrenMap, + "bodyType", + "body" +); + +export class SseHttpQuery extends SseHttpTmpQuery { + private eventSource: EventSource | undefined; + private controller: AbortController | undefined; + + isWrite(action: CompAction) { + return ( + action.path.includes("httpMethod") && "value" in action && !includes(["GET"], action.value) + ); + } + + override getView() { + return async (props: { + args?: Record; + callback?: (result: QueryResult) => void; + }): Promise => { + const children = this.children; + + try { + const timer = performance.now(); + + // Build the complete URL with parameters + const baseUrl = this.buildUrl(props.args); + const headers = this.buildHeaders(props.args); + const method = children.httpMethod.getView(); + + // For GET requests, use EventSource API (standard SSE) + if (method === "GET") { + return this.handleEventSource(baseUrl, headers, props, timer); + } else { + // For POST/PUT/etc, use fetch with streaming response + return this.handleStreamingFetch(baseUrl, headers, method, props, timer); + } + + } catch (error) { + return this.createErrorResponse((error as Error).message); + } + }; + } + + private async handleEventSource( + url: string, + headers: Record, + props: any, + timer: number + ): Promise { + return new Promise((resolve, reject) => { + // Clean up any existing connection + this.cleanup(); + + this.eventSource = new EventSource(url); + + this.eventSource.onopen = () => { + resolve(this.createSuccessResponse("SSE connection established", timer)); + }; + + this.eventSource.onmessage = (event) => { + try { + const data = JSON.parse(event.data); + props.callback?.(this.createSuccessResponse(data)); + } catch (error) { + // Handle non-JSON data + props.callback?.(this.createSuccessResponse(event.data)); + } + }; + + this.eventSource.onerror = (error) => { + this.cleanup(); + reject(this.createErrorResponse("SSE connection error")); + }; + }); + } + + private async handleStreamingFetch( + url: string, + headers: Record, + method: string, + props: any, + timer: number + ): Promise { + // Clean up any existing connection + this.cleanup(); + + this.controller = new AbortController(); + + const response = await fetch(url, { + method, + headers: { + ...headers, + 'Accept': 'text/event-stream', + 'Cache-Control': 'no-cache', + }, + body: this.buildRequestBody(props.args), + signal: this.controller.signal, + }); + + if (!response.ok) { + throw new Error(`HTTP ${response.status}: ${response.statusText}`); + } + + // Handle streaming response + const reader = response.body?.getReader(); + const decoder = new TextDecoder(); + + if (!reader) { + throw new Error("No readable stream available"); + } + + // Process stream in background + this.processStream(reader, decoder, props.callback); + + return this.createSuccessResponse("Stream connection established", timer); + } + + private async processStream( + reader: ReadableStreamDefaultReader, + decoder: TextDecoder, + callback?: (result: QueryResult) => void + ) { + let buffer = ''; + + try { + while (true) { + const { done, value } = await reader.read(); + + if (done) break; + + buffer += decoder.decode(value, { stream: true }); + + // Process complete JSON objects or SSE events + const lines = buffer.split('\n'); + buffer = lines.pop() || ''; + + for (const line of lines) { + if (line.trim()) { + try { + // Handle SSE format: data: {...} + let jsonData = line.trim(); + if (jsonData.startsWith('data: ')) { + jsonData = jsonData.substring(6); + } + + // Skip SSE control messages + if (jsonData === '[DONE]' || jsonData.startsWith('event:') || jsonData.startsWith('id:')) { + continue; + } + + const data = JSON.parse(jsonData); + callback?.(this.createSuccessResponse(data)); + } catch (error) { + // Handle non-JSON lines or plain text + if (line.trim() !== '') { + callback?.(this.createSuccessResponse(line.trim())); + } + } + } + } + } + } catch (error: any) { + if (error.name !== 'AbortError') { + callback?.(this.createErrorResponse((error as Error).message)); + } + } finally { + reader.releaseLock(); + } + } + + private buildUrl(args?: Record): string { + const children = this.children; + const basePath = children.path.children.text.getView(); + const params = children.params.getView(); + + // Build URL with parameters + const url = new URL(basePath); + params.forEach((param: any) => { + if (param.key && param.value) { + const value = typeof param.value === 'function' ? param.value(args) : param.value; + url.searchParams.append(param.key, String(value)); + } + }); + + return url.toString(); + } + + private buildHeaders(args?: Record): Record { + const headers: Record = {}; + + this.children.headers.getView().forEach((header: any) => { + if (header.key && header.value) { + const value = typeof header.value === 'function' ? header.value(args) : header.value; + headers[header.key] = String(value); + } + }); + + return headers; + } + + private buildRequestBody(args?: Record): string | FormData | undefined { + const bodyType = this.children.bodyType.getView(); + + switch (bodyType) { + case "application/json": + return this.children.body.children.text.getView() as string; + case "text/plain": + return this.children.body.children.text.getView() as string; + case "application/x-www-form-urlencoded": + const formData = new URLSearchParams(); + this.children.bodyFormData.getView().forEach((item: any) => { + if (item.key && item.value) { + const value = typeof item.value === 'function' ? item.value(args) : item.value; + formData.append(item.key, String(value)); + } + }); + return formData.toString(); + case "multipart/form-data": + const multipartData = new FormData(); + this.children.bodyFormData.getView().forEach((item: any) => { + if (item.key && item.value) { + const value = typeof item.value === 'function' ? item.value(args) : item.value; + multipartData.append(item.key, String(value)); + } + }); + return multipartData; + default: + return undefined; + } + } + + private createSuccessResponse(data: JSONValue, runTime?: number): QueryResult { + return { + data, + runTime: runTime || 0, + success: true, + code: QUERY_EXECUTION_OK, + }; + } + + private createErrorResponse(message: string): QueryResult { + return { + message, + data: "", + success: false, + code: QUERY_EXECUTION_ERROR, + }; + } + + public cleanup() { + if (this.eventSource) { + this.eventSource.close(); + this.eventSource = undefined; + } + if (this.controller) { + this.controller.abort(); + this.controller = undefined; + } + } + + propertyView(props: { + datasourceId: string; + urlPlaceholder?: string; + supportHttpMethods?: HttpMethodValue[]; + supportBodyTypes?: BodyTypeValue[]; + }) { + return ; + } + + getHttpMethod() { + return this.children.httpMethod.getView(); + } +} + +type ChildrenType = InstanceType extends MultiBaseComp ? X : never; + +const ContentTypeKey = "Content-Type"; + +const showBodyConfig = (children: ChildrenType) => { + switch (children.bodyType.getView() as BodyTypeValue) { + case "application/x-www-form-urlencoded": + return children.bodyFormData.propertyView({}); + case "multipart/form-data": + return children.bodyFormData.propertyView({ + showType: true, + typeTooltip: trans("httpQuery.bodyFormDataTooltip", { + type: `"${trans("httpQuery.file")}"`, + object: "{ data: base64 string, name: string }", + example: "{{ {data: file1.value[0], name: file1.files[0].name} }}", + }), + }); + case "application/json": + case "text/plain": + return children.body.propertyView({ styleName: "medium", width: "100%" }); + default: + return <>; + } +}; + +const SseHttpQueryPropertyView = (props: { + comp: InstanceType; + datasourceId: string; + urlPlaceholder?: string; + supportHttpMethods?: HttpMethodValue[]; + supportBodyTypes?: BodyTypeValue[]; +}) => { + const { comp, supportHttpMethods, supportBodyTypes } = props; + const { children, dispatch } = comp; + + return ( + <> + !supportHttpMethods || supportHttpMethods.includes(o.value) + )} + label={"HTTP Method"} + onChange={(value: HttpMethodValue) => { + children.httpMethod.dispatchChangeValueAction(value); + }} + /> + + + + + + + + !supportBodyTypes || supportBodyTypes?.includes(o.value) + )} + value={children.bodyType.getView()} + onChange={(value) => { + let headers = children.headers + .toJsonValue() + .filter((header) => header.key !== ContentTypeKey); + if (value !== "none") { + headers = [ + { + key: ContentTypeKey, + value: value, + }, + ...headers, + ]; + } + + dispatch( + comp.changeValueAction({ ...comp.toJsonValue(), bodyType: value, headers: headers }) + ); + }} + /> + + + + {showBodyConfig(children)} + + + ); +}; \ No newline at end of file diff --git a/client/packages/lowcoder/src/constants/datasourceConstants.ts b/client/packages/lowcoder/src/constants/datasourceConstants.ts index 0c65449f3..3d010f02f 100644 --- a/client/packages/lowcoder/src/constants/datasourceConstants.ts +++ b/client/packages/lowcoder/src/constants/datasourceConstants.ts @@ -45,3 +45,4 @@ export const QUICK_REST_API_ID = "#QUICK_REST_API"; export const QUICK_GRAPHQL_ID = "#QUICK_GRAPHQL"; export const JS_CODE_ID = "#JS_CODE"; export const OLD_LOWCODER_DATASOURCE: Partial[] = []; +export const QUICK_SSE_HTTP_API_ID = "#QUICK_SSE_HTTP_API"; diff --git a/client/packages/lowcoder/src/constants/queryConstants.ts b/client/packages/lowcoder/src/constants/queryConstants.ts index be78de0d6..06de2507c 100644 --- a/client/packages/lowcoder/src/constants/queryConstants.ts +++ b/client/packages/lowcoder/src/constants/queryConstants.ts @@ -14,12 +14,14 @@ import { toPluginQuery } from "comps/queries/pluginQuery/pluginQuery"; import { MultiCompConstructor } from "lowcoder-core"; import { DataSourcePluginMeta } from "lowcoder-sdk/dataSource"; import { AlaSqlQuery } from "@lowcoder-ee/comps/queries/httpQuery/alasqlQuery"; +import { SseHttpQuery } from "@lowcoder-ee/comps/queries/httpQuery/sseHttpQuery"; export type DatasourceType = | "mysql" | "mongodb" | "restApi" | "streamApi" + | "sseHttpApi" | "postgres" | "redis" | "es" @@ -41,6 +43,7 @@ export const QueryMap = { alasql: AlaSqlQuery, restApi: HttpQuery, streamApi: StreamQuery, + sseHttpApi: SseHttpQuery, mongodb: MongoQuery, postgres: SQLQuery, redis: RedisQuery, diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index 43bcb3986..b897add3f 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -744,6 +744,7 @@ export const en = { "transformer": "Transformer", "quickRestAPI": "REST Query", "quickStreamAPI": "Stream Query", + "quickSseHttpAPI": "SSE HTTP Stream Query", "quickGraphql": "GraphQL Query", "quickAlasql": "Local SQL Query", "databaseType": "Database Type", diff --git a/client/packages/lowcoder/src/util/bottomResUtils.tsx b/client/packages/lowcoder/src/util/bottomResUtils.tsx index b2f2baf42..78c5a4de3 100644 --- a/client/packages/lowcoder/src/util/bottomResUtils.tsx +++ b/client/packages/lowcoder/src/util/bottomResUtils.tsx @@ -110,6 +110,8 @@ export const getBottomResIcon = ( return ; case "streamApi": return ; + case "sseHttpApi": + return ; case "alasql": return ; case "restApi": From 4664b5b9f58575f9250475173fcdb36093fc6e19 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Tue, 8 Jul 2025 23:08:41 +0500 Subject: [PATCH 04/17] fix linter errors --- .../comps/queries/httpQuery/sseHttpQuery.tsx | 163 ++++++++++-------- 1 file changed, 91 insertions(+), 72 deletions(-) diff --git a/client/packages/lowcoder/src/comps/queries/httpQuery/sseHttpQuery.tsx b/client/packages/lowcoder/src/comps/queries/httpQuery/sseHttpQuery.tsx index 126063d09..5584736c9 100644 --- a/client/packages/lowcoder/src/comps/queries/httpQuery/sseHttpQuery.tsx +++ b/client/packages/lowcoder/src/comps/queries/httpQuery/sseHttpQuery.tsx @@ -5,11 +5,12 @@ import { trans } from "i18n"; import { includes } from "lodash"; import { CompAction, MultiBaseComp } from "lowcoder-core"; import { keyValueListControl } from "../../controls/keyValueListControl"; -import { ParamsJsonControl, ParamsStringControl } from "../../controls/paramsControl"; +import { ParamsJsonControl, ParamsStringControl, ParamsControlType } from "../../controls/paramsControl"; import { withTypeAndChildrenAbstract } from "../../generators/withType"; import { QueryResult } from "../queryComp"; import { QUERY_EXECUTION_ERROR, QUERY_EXECUTION_OK } from "constants/queryConstants"; import { JSONValue } from "util/jsonTypes"; +import { FunctionProperty } from "../queryCompUtils"; import { HttpHeaderPropertyView, HttpParametersPropertyView, @@ -81,26 +82,43 @@ export class SseHttpQuery extends SseHttpTmpQuery { } override getView() { + const children = this.children; + const params = [ + ...children.headers.getQueryParams(), + ...children.params.getQueryParams(), + ...children.bodyFormData.getQueryParams(), + ...children.path.getQueryParams(), + ...children.body.getQueryParams(), + ]; + + return this.createStreamingQueryView(params); + } + + private createStreamingQueryView(params: FunctionProperty[]) { return async (props: { + queryId: string; + applicationId: string; + applicationPath: string[]; args?: Record; + variables?: any; + timeout: InstanceType; callback?: (result: QueryResult) => void; }): Promise => { - const children = this.children; try { const timer = performance.now(); - // Build the complete URL with parameters - const baseUrl = this.buildUrl(props.args); - const headers = this.buildHeaders(props.args); - const method = children.httpMethod.getView(); + // Process parameters like toQueryView does + const processedParams = this.processParameters(params, props); + + // Build request from processed parameters + const { url, headers, method, body } = this.buildRequestFromParams(processedParams); - // For GET requests, use EventSource API (standard SSE) + // Execute streaming logic if (method === "GET") { - return this.handleEventSource(baseUrl, headers, props, timer); + return this.handleEventSource(url, headers, props, timer); } else { - // For POST/PUT/etc, use fetch with streaming response - return this.handleStreamingFetch(baseUrl, headers, method, props, timer); + return this.handleStreamingFetch(url, headers, method, body, props, timer); } } catch (error) { @@ -109,6 +127,67 @@ export class SseHttpQuery extends SseHttpTmpQuery { }; } + private processParameters(params: FunctionProperty[], props: any) { + let mappedVariables: Array<{key: string, value: string}> = []; + Object.keys(props.variables || {}) + .filter(k => k !== "$queryName") + .forEach(key => { + const value = Object.hasOwn(props.variables[key], 'value') ? props.variables[key].value : props.variables[key]; + mappedVariables.push({ + key: `${key}.value`, + value: value || "" + }); + }); + + return [ + ...params.filter(param => { + return !mappedVariables.map(v => v.key).includes(param.key); + }).map(({ key, value }) => ({ key, value: value(props.args) })), + ...Object.entries(props.timeout.getView()).map(([key, value]) => ({ + key, + value: (value as any)(props.args), + })), + ...mappedVariables, + ]; + } + + private buildRequestFromParams(processedParams: Array<{key: string, value: any}>) { + debugger; + const paramMap = new Map(processedParams.map(p => [p.key, p.value])); + + // Extract URL + const baseUrl = paramMap.get('path') || ''; + const url = new URL(baseUrl); + + // Add query parameters + Object.entries(paramMap).forEach(([key, value]) => { + if (key.startsWith('params.') && key.endsWith('.value')) { + const paramName = key.replace('params.', '').replace('.value', ''); + if (value) url.searchParams.append(paramName, String(value)); + } + }); + + // Build headers + const headers: Record = {}; + Object.entries(paramMap).forEach(([key, value]) => { + if (key.startsWith('headers.') && key.endsWith('.value')) { + const headerName = key.replace('headers.', '').replace('.value', ''); + if (value) headers[headerName] = String(value); + } + }); + + // Get method and body + const method = paramMap.get('httpMethod') || 'GET'; + const bodyType = paramMap.get('bodyType'); + let body: string | FormData | undefined; + + if (bodyType === 'application/json' || bodyType === 'text/plain') { + body = paramMap.get('body') as string; + } + + return { url: url.toString(), headers, method, body }; + } + private async handleEventSource( url: string, headers: Record, @@ -146,6 +225,7 @@ export class SseHttpQuery extends SseHttpTmpQuery { url: string, headers: Record, method: string, + body: string | FormData | undefined, props: any, timer: number ): Promise { @@ -161,7 +241,7 @@ export class SseHttpQuery extends SseHttpTmpQuery { 'Accept': 'text/event-stream', 'Cache-Control': 'no-cache', }, - body: this.buildRequestBody(props.args), + body, signal: this.controller.signal, }); @@ -236,67 +316,6 @@ export class SseHttpQuery extends SseHttpTmpQuery { } } - private buildUrl(args?: Record): string { - const children = this.children; - const basePath = children.path.children.text.getView(); - const params = children.params.getView(); - - // Build URL with parameters - const url = new URL(basePath); - params.forEach((param: any) => { - if (param.key && param.value) { - const value = typeof param.value === 'function' ? param.value(args) : param.value; - url.searchParams.append(param.key, String(value)); - } - }); - - return url.toString(); - } - - private buildHeaders(args?: Record): Record { - const headers: Record = {}; - - this.children.headers.getView().forEach((header: any) => { - if (header.key && header.value) { - const value = typeof header.value === 'function' ? header.value(args) : header.value; - headers[header.key] = String(value); - } - }); - - return headers; - } - - private buildRequestBody(args?: Record): string | FormData | undefined { - const bodyType = this.children.bodyType.getView(); - - switch (bodyType) { - case "application/json": - return this.children.body.children.text.getView() as string; - case "text/plain": - return this.children.body.children.text.getView() as string; - case "application/x-www-form-urlencoded": - const formData = new URLSearchParams(); - this.children.bodyFormData.getView().forEach((item: any) => { - if (item.key && item.value) { - const value = typeof item.value === 'function' ? item.value(args) : item.value; - formData.append(item.key, String(value)); - } - }); - return formData.toString(); - case "multipart/form-data": - const multipartData = new FormData(); - this.children.bodyFormData.getView().forEach((item: any) => { - if (item.key && item.value) { - const value = typeof item.value === 'function' ? item.value(args) : item.value; - multipartData.append(item.key, String(value)); - } - }); - return multipartData; - default: - return undefined; - } - } - private createSuccessResponse(data: JSONValue, runTime?: number): QueryResult { return { data, From 188f9cbf906f69d3b10197ac6cfcd4e28ce06c8b Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Tue, 8 Jul 2025 23:51:31 +0500 Subject: [PATCH 05/17] setup http streaming with dummy data --- .../comps/queries/httpQuery/sseHttpQuery.tsx | 49 ++++++------------- 1 file changed, 15 insertions(+), 34 deletions(-) diff --git a/client/packages/lowcoder/src/comps/queries/httpQuery/sseHttpQuery.tsx b/client/packages/lowcoder/src/comps/queries/httpQuery/sseHttpQuery.tsx index 5584736c9..11341e096 100644 --- a/client/packages/lowcoder/src/comps/queries/httpQuery/sseHttpQuery.tsx +++ b/client/packages/lowcoder/src/comps/queries/httpQuery/sseHttpQuery.tsx @@ -112,7 +112,7 @@ export class SseHttpQuery extends SseHttpTmpQuery { const processedParams = this.processParameters(params, props); // Build request from processed parameters - const { url, headers, method, body } = this.buildRequestFromParams(processedParams); + const { url, headers, method, body } = this.buildRequestFromParams(processedParams, props.args); // Execute streaming logic if (method === "GET") { @@ -151,41 +151,23 @@ export class SseHttpQuery extends SseHttpTmpQuery { ]; } - private buildRequestFromParams(processedParams: Array<{key: string, value: any}>) { - debugger; - const paramMap = new Map(processedParams.map(p => [p.key, p.value])); - - // Extract URL - const baseUrl = paramMap.get('path') || ''; - const url = new URL(baseUrl); - - // Add query parameters - Object.entries(paramMap).forEach(([key, value]) => { - if (key.startsWith('params.') && key.endsWith('.value')) { - const paramName = key.replace('params.', '').replace('.value', ''); - if (value) url.searchParams.append(paramName, String(value)); - } - }); - - // Build headers - const headers: Record = {}; - Object.entries(paramMap).forEach(([key, value]) => { - if (key.startsWith('headers.') && key.endsWith('.value')) { - const headerName = key.replace('headers.', '').replace('.value', ''); - if (value) headers[headerName] = String(value); - } + private buildRequestFromParams(processedParams: Array<{key: string, value: any}>, args: Record = {}) { + // Hardcoded values from the screenshot for testing + const url = "http://localhost:11434/api/generate"; + const headers = { + "Content-Type": "application/json", + "Accept": "text/event-stream" + }; + const method = "POST"; + const body = JSON.stringify({ + "model": "gemma3", + "prompt": "Tell me a short story about a robot", + "stream": true }); - // Get method and body - const method = paramMap.get('httpMethod') || 'GET'; - const bodyType = paramMap.get('bodyType'); - let body: string | FormData | undefined; + console.log("Hardcoded request:", { url, headers, method, body }); - if (bodyType === 'application/json' || bodyType === 'text/plain') { - body = paramMap.get('body') as string; - } - - return { url: url.toString(), headers, method, body }; + return { url, headers, method, body }; } private async handleEventSource( @@ -239,7 +221,6 @@ export class SseHttpQuery extends SseHttpTmpQuery { headers: { ...headers, 'Accept': 'text/event-stream', - 'Cache-Control': 'no-cache', }, body, signal: this.controller.signal, From 7b6858163a66848c7c837c580131ca1aa873da6f Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Wed, 9 Jul 2025 17:25:31 +0500 Subject: [PATCH 06/17] setup frontend for ssehttpquery --- .../comps/queries/httpQuery/sseHttpQuery.tsx | 271 ++----------- .../src/comps/queries/queryCompUtils.tsx | 361 +++++++++++++++++- .../src/constants/datasourceConstants.ts | 2 +- 3 files changed, 390 insertions(+), 244 deletions(-) diff --git a/client/packages/lowcoder/src/comps/queries/httpQuery/sseHttpQuery.tsx b/client/packages/lowcoder/src/comps/queries/httpQuery/sseHttpQuery.tsx index 11341e096..2271f582e 100644 --- a/client/packages/lowcoder/src/comps/queries/httpQuery/sseHttpQuery.tsx +++ b/client/packages/lowcoder/src/comps/queries/httpQuery/sseHttpQuery.tsx @@ -1,3 +1,4 @@ +// SSEHTTPQUERY.tsx import { Dropdown, ValueFromOption } from "components/Dropdown"; import { QueryConfigItemWrapper, QueryConfigLabel, QueryConfigWrapper } from "components/query"; import { valueComp, withDefault } from "comps/generators"; @@ -5,12 +6,9 @@ import { trans } from "i18n"; import { includes } from "lodash"; import { CompAction, MultiBaseComp } from "lowcoder-core"; import { keyValueListControl } from "../../controls/keyValueListControl"; -import { ParamsJsonControl, ParamsStringControl, ParamsControlType } from "../../controls/paramsControl"; +import { ParamsJsonControl, ParamsStringControl } from "../../controls/paramsControl"; import { withTypeAndChildrenAbstract } from "../../generators/withType"; -import { QueryResult } from "../queryComp"; -import { QUERY_EXECUTION_ERROR, QUERY_EXECUTION_OK } from "constants/queryConstants"; -import { JSONValue } from "util/jsonTypes"; -import { FunctionProperty } from "../queryCompUtils"; +import { toSseQueryView } from "../queryCompUtils"; import { HttpHeaderPropertyView, HttpParametersPropertyView, @@ -52,7 +50,9 @@ const CommandMap = { const childrenMap = { httpMethod: valueComp("GET"), path: ParamsStringControl, - headers: withDefault(keyValueListControl(), [{ key: "", value: "" }]), + headers: withDefault(keyValueListControl(), [ + { key: "Accept", value: "text/event-stream" } + ]), params: withDefault(keyValueListControl(), [{ key: "", value: "" }]), bodyFormData: withDefault( keyValueListControl(true, [ @@ -61,6 +61,8 @@ const childrenMap = { ] as const), [{ key: "", value: "", type: "text" }] ), + // Add SSE-specific configuration + streamingEnabled: valueComp(true), }; const SseHttpTmpQuery = withTypeAndChildrenAbstract( @@ -72,9 +74,6 @@ const SseHttpTmpQuery = withTypeAndChildrenAbstract( ); export class SseHttpQuery extends SseHttpTmpQuery { - private eventSource: EventSource | undefined; - private controller: AbortController | undefined; - isWrite(action: CompAction) { return ( action.path.includes("httpMethod") && "value" in action && !includes(["GET"], action.value) @@ -89,241 +88,13 @@ export class SseHttpQuery extends SseHttpTmpQuery { ...children.bodyFormData.getQueryParams(), ...children.path.getQueryParams(), ...children.body.getQueryParams(), + // Add streaming flag to params + { key: "_streaming", value: () => "true" }, + { key: "_streamingEnabled", value: () => children.streamingEnabled.getView() } ]; - return this.createStreamingQueryView(params); - } - - private createStreamingQueryView(params: FunctionProperty[]) { - return async (props: { - queryId: string; - applicationId: string; - applicationPath: string[]; - args?: Record; - variables?: any; - timeout: InstanceType; - callback?: (result: QueryResult) => void; - }): Promise => { - - try { - const timer = performance.now(); - - // Process parameters like toQueryView does - const processedParams = this.processParameters(params, props); - - // Build request from processed parameters - const { url, headers, method, body } = this.buildRequestFromParams(processedParams, props.args); - - // Execute streaming logic - if (method === "GET") { - return this.handleEventSource(url, headers, props, timer); - } else { - return this.handleStreamingFetch(url, headers, method, body, props, timer); - } - - } catch (error) { - return this.createErrorResponse((error as Error).message); - } - }; - } - - private processParameters(params: FunctionProperty[], props: any) { - let mappedVariables: Array<{key: string, value: string}> = []; - Object.keys(props.variables || {}) - .filter(k => k !== "$queryName") - .forEach(key => { - const value = Object.hasOwn(props.variables[key], 'value') ? props.variables[key].value : props.variables[key]; - mappedVariables.push({ - key: `${key}.value`, - value: value || "" - }); - }); - - return [ - ...params.filter(param => { - return !mappedVariables.map(v => v.key).includes(param.key); - }).map(({ key, value }) => ({ key, value: value(props.args) })), - ...Object.entries(props.timeout.getView()).map(([key, value]) => ({ - key, - value: (value as any)(props.args), - })), - ...mappedVariables, - ]; - } - - private buildRequestFromParams(processedParams: Array<{key: string, value: any}>, args: Record = {}) { - // Hardcoded values from the screenshot for testing - const url = "http://localhost:11434/api/generate"; - const headers = { - "Content-Type": "application/json", - "Accept": "text/event-stream" - }; - const method = "POST"; - const body = JSON.stringify({ - "model": "gemma3", - "prompt": "Tell me a short story about a robot", - "stream": true - }); - - console.log("Hardcoded request:", { url, headers, method, body }); - - return { url, headers, method, body }; - } - - private async handleEventSource( - url: string, - headers: Record, - props: any, - timer: number - ): Promise { - return new Promise((resolve, reject) => { - // Clean up any existing connection - this.cleanup(); - - this.eventSource = new EventSource(url); - - this.eventSource.onopen = () => { - resolve(this.createSuccessResponse("SSE connection established", timer)); - }; - - this.eventSource.onmessage = (event) => { - try { - const data = JSON.parse(event.data); - props.callback?.(this.createSuccessResponse(data)); - } catch (error) { - // Handle non-JSON data - props.callback?.(this.createSuccessResponse(event.data)); - } - }; - - this.eventSource.onerror = (error) => { - this.cleanup(); - reject(this.createErrorResponse("SSE connection error")); - }; - }); - } - - private async handleStreamingFetch( - url: string, - headers: Record, - method: string, - body: string | FormData | undefined, - props: any, - timer: number - ): Promise { - // Clean up any existing connection - this.cleanup(); - - this.controller = new AbortController(); - - const response = await fetch(url, { - method, - headers: { - ...headers, - 'Accept': 'text/event-stream', - }, - body, - signal: this.controller.signal, - }); - - if (!response.ok) { - throw new Error(`HTTP ${response.status}: ${response.statusText}`); - } - - // Handle streaming response - const reader = response.body?.getReader(); - const decoder = new TextDecoder(); - - if (!reader) { - throw new Error("No readable stream available"); - } - - // Process stream in background - this.processStream(reader, decoder, props.callback); - - return this.createSuccessResponse("Stream connection established", timer); - } - - private async processStream( - reader: ReadableStreamDefaultReader, - decoder: TextDecoder, - callback?: (result: QueryResult) => void - ) { - let buffer = ''; - - try { - while (true) { - const { done, value } = await reader.read(); - - if (done) break; - - buffer += decoder.decode(value, { stream: true }); - - // Process complete JSON objects or SSE events - const lines = buffer.split('\n'); - buffer = lines.pop() || ''; - - for (const line of lines) { - if (line.trim()) { - try { - // Handle SSE format: data: {...} - let jsonData = line.trim(); - if (jsonData.startsWith('data: ')) { - jsonData = jsonData.substring(6); - } - - // Skip SSE control messages - if (jsonData === '[DONE]' || jsonData.startsWith('event:') || jsonData.startsWith('id:')) { - continue; - } - - const data = JSON.parse(jsonData); - callback?.(this.createSuccessResponse(data)); - } catch (error) { - // Handle non-JSON lines or plain text - if (line.trim() !== '') { - callback?.(this.createSuccessResponse(line.trim())); - } - } - } - } - } - } catch (error: any) { - if (error.name !== 'AbortError') { - callback?.(this.createErrorResponse((error as Error).message)); - } - } finally { - reader.releaseLock(); - } - } - - private createSuccessResponse(data: JSONValue, runTime?: number): QueryResult { - return { - data, - runTime: runTime || 0, - success: true, - code: QUERY_EXECUTION_OK, - }; - } - - private createErrorResponse(message: string): QueryResult { - return { - message, - data: "", - success: false, - code: QUERY_EXECUTION_ERROR, - }; - } - - public cleanup() { - if (this.eventSource) { - this.eventSource.close(); - this.eventSource = undefined; - } - if (this.controller) { - this.controller.abort(); - this.controller = undefined; - } + // Use SSE-specific query view + return toSseQueryView(params); } propertyView(props: { @@ -410,6 +181,13 @@ const SseHttpQueryPropertyView = (props: { let headers = children.headers .toJsonValue() .filter((header) => header.key !== ContentTypeKey); + + // Always ensure Accept: text/event-stream for SSE + const hasAcceptHeader = headers.some(h => h.key === "Accept"); + if (!hasAcceptHeader) { + headers.push({ key: "Accept", value: "text/event-stream" }); + } + if (value !== "none") { headers = [ { @@ -430,6 +208,15 @@ const SseHttpQueryPropertyView = (props: { {showBodyConfig(children)} + + + Streaming Options + +
+ This query will establish a Server-Sent Events connection for real-time data streaming. +
+ + ); }; \ No newline at end of file diff --git a/client/packages/lowcoder/src/comps/queries/queryCompUtils.tsx b/client/packages/lowcoder/src/comps/queries/queryCompUtils.tsx index bf49517af..87f3926bc 100644 --- a/client/packages/lowcoder/src/comps/queries/queryCompUtils.tsx +++ b/client/packages/lowcoder/src/comps/queries/queryCompUtils.tsx @@ -82,7 +82,7 @@ export function toQueryView(params: FunctionProperty[]) { }).map(({ key, value }) => ({ key, value: value(props.args) })), ...Object.entries(props.timeout.getView()).map(([key, value]) => ({ key, - value: value(props.args), + value: (value as ValueFunction)(props.args), })), ...mappedVariables, ], @@ -143,3 +143,362 @@ export function onlyManualTrigger(type: ResourceType) { export function getTriggerType(comp: any): TriggerType { return comp.children.triggerType.getView(); } + +// STREAMING QUERY + +export interface SseQueryResult extends QueryResult { + streamId?: string; + isStreaming?: boolean; +} + +export interface SseQueryViewProps { + queryId: string; + applicationId: string; + applicationPath: string[]; + args?: Record; + variables?: any; + timeout: any; + onStreamData?: (data: any) => void; + onStreamError?: (error: any) => void; + onStreamEnd?: () => void; +} + +/** + * SSE-specific query view that handles streaming responses + */ +export function toSseQueryView(params: FunctionProperty[]) { + // Store active connections + const activeConnections = new Map(); + + return async (props: SseQueryViewProps): Promise => { + const { applicationId, isViewMode } = getGlobalSettings(); + + // Process parameters similar to toQueryView + let mappedVariables: Array<{key: string, value: string}> = []; + Object.keys(props.variables || {}) + .filter(k => k !== "$queryName") + .forEach(key => { + const value = Object.hasOwn(props.variables[key], 'value') + ? props.variables[key].value + : props.variables[key]; + mappedVariables.push({ + key: `${key}.value`, + value: value || "" + }); + mappedVariables.push({ + key: `${props.args?.$queryName}.variables.${key}`, + value: value || "" + }); + }); + + let request: QueryExecuteRequest = { + path: props.applicationPath, + params: [ + ...params.filter(param => { + return !mappedVariables.map(v => v.key).includes(param.key); + }).map(({ key, value }) => ({ key, value: value(props.args) })), + ...Object.entries(props.timeout.getView()).map(([key, value]) => ({ + key, + value: (value as ValueFunction)(props.args), + })), + ...mappedVariables, + ], + viewMode: !!isViewMode, + }; + + if (!applicationId) { + request = { ...request, libraryQueryId: props.queryId, libraryQueryRecordId: "latest" }; + } else { + request = { ...request, applicationId: props.applicationId, queryId: props.queryId }; + } + + try { + // For SSE queries, we need a different approach + // Option 1: If your backend supports SSE proxying + const streamId = `sse_${props.queryId}_${Date.now()}`; + + // First, initiate the SSE connection through your backend + const initResponse = await QueryApi.executeQuery( + { + ...request, + // Add SSE-specific flags + params: [ + ...(request.params || []), + { key: "_sseInit", value: "true" }, + { key: "_streamId", value: streamId } + ] + }, + props.timeout.children.text.getView() as number + ); + + if (!initResponse.data.success) { + return { + ...initResponse.data, + code: initResponse.data.queryCode, + extra: _.omit(initResponse.data, ["code", "message", "data", "success", "runTime", "queryCode"]), + }; + } + + // Get the SSE endpoint from backend response + const sseEndpoint = (initResponse.data.data as any)?.sseEndpoint; + + if (sseEndpoint) { + // Establish SSE connection + establishSseConnection( + streamId, + sseEndpoint, + props.onStreamData, + props.onStreamError, + props.onStreamEnd, + activeConnections + ); + + return { + ...initResponse.data, + code: QUERY_EXECUTION_OK, + streamId, + isStreaming: true, + extra: { + ..._.omit(initResponse.data, ["code", "message", "data", "success", "runTime", "queryCode"]), + streamId, + closeStream: () => closeSseConnection(streamId, activeConnections) + } + }; + } + + // Fallback to regular response if SSE not available + return { + ...initResponse.data, + code: initResponse.data.queryCode, + extra: _.omit(initResponse.data, ["code", "message", "data", "success", "runTime", "queryCode"]), + }; + + } catch (error) { + return { + success: false, + data: "", + code: QUERY_EXECUTION_ERROR, + message: (error as any).message || "Failed to execute SSE query", + }; + } + }; +} + +function establishSseConnection( + streamId: string, + endpoint: string, + onData?: (data: any) => void, + onError?: (error: any) => void, + onEnd?: () => void, + connections?: Map +) { + // Close any existing connection with the same ID + if (connections?.has(streamId)) { + connections.get(streamId)?.close(); + } + + const eventSource = new EventSource(endpoint); + + eventSource.onmessage = (event) => { + try { + const data = JSON.parse(event.data); + onData?.(data); + } catch (error) { + // Handle non-JSON data + onData?.(event.data); + } + }; + + eventSource.onerror = (error) => { + onError?.(error); + eventSource.close(); + connections?.delete(streamId); + onEnd?.(); + }; + + eventSource.onopen = () => { + console.log(`SSE connection established: ${streamId}`); + }; + + // Store the connection + connections?.set(streamId, eventSource); +} + +function closeSseConnection(streamId: string, connections?: Map) { + const eventSource = connections?.get(streamId); + if (eventSource) { + eventSource.close(); + connections?.delete(streamId); + console.log(`SSE connection closed: ${streamId}`); + } +} + +// Alternative implementation using fetch with ReadableStream +export function toSseQueryViewWithFetch(params: FunctionProperty[]) { + const activeControllers = new Map(); + + return async (props: SseQueryViewProps): Promise => { + const { applicationId, isViewMode } = getGlobalSettings(); + + // Similar parameter processing as above... + let mappedVariables: Array<{key: string, value: string}> = []; + Object.keys(props.variables || {}) + .filter(k => k !== "$queryName") + .forEach(key => { + const value = Object.hasOwn(props.variables[key], 'value') + ? props.variables[key].value + : props.variables[key]; + mappedVariables.push({ + key: `${key}.value`, + value: value || "" + }); + }); + + const processedParams = [ + ...params.filter(param => { + return !mappedVariables.map(v => v.key).includes(param.key); + }).map(({ key, value }) => ({ key, value: value(props.args) })), + ...Object.entries(props.timeout.getView()).map(([key, value]) => ({ + key, + value: (value as ValueFunction)(props.args), + })), + ...mappedVariables, + ]; + + // Build the request configuration from params + const config = buildRequestConfig(processedParams); + + const streamId = `fetch_${props.queryId}_${Date.now()}`; + const controller = new AbortController(); + activeControllers.set(streamId, controller); + + try { + const response = await fetch(config.url, { + method: config.method, + headers: config.headers, + body: config.body, + signal: controller.signal, + }); + + if (!response.ok) { + throw new Error(`HTTP ${response.status}: ${response.statusText}`); + } + + // Process the stream + if (response.body) { + processStream( + response.body, + props.onStreamData, + props.onStreamError, + props.onStreamEnd + ); + } + + return { + success: true, + data: { message: "Stream started" }, + code: QUERY_EXECUTION_OK, + streamId, + isStreaming: true, + runTime: 0, + extra: { + streamId, + closeStream: () => { + controller.abort(); + activeControllers.delete(streamId); + } + } + }; + + } catch (error) { + activeControllers.delete(streamId); + return { + success: false, + data: "", + code: QUERY_EXECUTION_ERROR, + message: (error as any).message || "Failed to establish stream", + }; + } + }; +} + +function buildRequestConfig(params: Array<{key: string, value: any}>) { + const config: any = { + url: "", + method: "GET", + headers: {}, + body: undefined, + }; + + params.forEach(param => { + if (param.key === "url" || param.key === "path") { + config.url = param.value; + } else if (param.key === "method") { + config.method = param.value; + } else if (param.key.startsWith("header.")) { + const headerName = param.key.substring(7); + config.headers[headerName] = param.value; + } else if (param.key === "body") { + config.body = param.value; + } + }); + + return config; +} + +async function processStream( + readableStream: ReadableStream, + onData?: (data: any) => void, + onError?: (error: any) => void, + onEnd?: () => void +) { + const reader = readableStream.getReader(); + const decoder = new TextDecoder(); + let buffer = ''; + + try { + while (true) { + const { done, value } = await reader.read(); + + if (done) { + onEnd?.(); + break; + } + + buffer += decoder.decode(value, { stream: true }); + + // Process complete lines + const lines = buffer.split('\n'); + buffer = lines.pop() || ''; + + for (const line of lines) { + if (line.trim()) { + try { + // Handle SSE format + let data = line.trim(); + if (data.startsWith('data: ')) { + data = data.substring(6); + } + + // Skip control messages + if (data === '[DONE]' || data.startsWith('event:') || data.startsWith('id:')) { + continue; + } + + const jsonData = JSON.parse(data); + onData?.(jsonData); + } catch (error) { + // Handle non-JSON lines + if (line.trim() !== '') { + onData?.(line.trim()); + } + } + } + } + } + } catch (error) { + onError?.(error); + } finally { + reader.releaseLock(); + } +} \ No newline at end of file diff --git a/client/packages/lowcoder/src/constants/datasourceConstants.ts b/client/packages/lowcoder/src/constants/datasourceConstants.ts index 3d010f02f..31094d43d 100644 --- a/client/packages/lowcoder/src/constants/datasourceConstants.ts +++ b/client/packages/lowcoder/src/constants/datasourceConstants.ts @@ -45,4 +45,4 @@ export const QUICK_REST_API_ID = "#QUICK_REST_API"; export const QUICK_GRAPHQL_ID = "#QUICK_GRAPHQL"; export const JS_CODE_ID = "#JS_CODE"; export const OLD_LOWCODER_DATASOURCE: Partial[] = []; -export const QUICK_SSE_HTTP_API_ID = "#QUICK_SSE_HTTP_API"; +export const QUICK_SSE_HTTP_API_ID = "#QUICK_REST_API"; From cf0b99c1acb5219fa78db7750c2d119f0eb19948 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Thu, 10 Jul 2025 17:57:02 +0500 Subject: [PATCH 07/17] chat component refactor --- .../src/comps/comps/chatComp/chatComp.tsx | 144 +++- .../src/comps/comps/chatComp/chatCompTypes.ts | 57 +- .../comps/comps/chatComp/chatPropertyView.tsx | 101 ++- .../src/comps/comps/chatComp/chatView.tsx | 46 -- .../comps/chatComp/components/ChatApp.tsx | 43 - .../comps/chatComp/components/ChatCore.tsx | 21 + .../chatComp/components/ChatCoreMain.tsx | 246 ++++++ .../comps/chatComp/components/ChatMain.tsx | 381 --------- .../comps/chatComp/components/ChatPanel.tsx | 47 ++ .../components/context/ChatContext.tsx | 763 +++++++++--------- .../chatComp/handlers/messageHandlers.ts | 133 +++ .../comps/comps/chatComp/types/chatTypes.ts | 86 ++ .../comps/comps/chatComp/utils/chatStorage.ts | 281 ------- .../comps/chatComp/utils/responseFactory.ts | 27 - .../comps/chatComp/utils/responseHandlers.ts | 99 --- ...hatStorageFactory.ts => storageFactory.ts} | 370 +++++---- .../src/pages/editor/bottom/BottomPanel.tsx | 298 +++---- 17 files changed, 1453 insertions(+), 1690 deletions(-) delete mode 100644 client/packages/lowcoder/src/comps/comps/chatComp/chatView.tsx delete mode 100644 client/packages/lowcoder/src/comps/comps/chatComp/components/ChatApp.tsx create mode 100644 client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCore.tsx create mode 100644 client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCoreMain.tsx delete mode 100644 client/packages/lowcoder/src/comps/comps/chatComp/components/ChatMain.tsx create mode 100644 client/packages/lowcoder/src/comps/comps/chatComp/components/ChatPanel.tsx create mode 100644 client/packages/lowcoder/src/comps/comps/chatComp/handlers/messageHandlers.ts create mode 100644 client/packages/lowcoder/src/comps/comps/chatComp/types/chatTypes.ts delete mode 100644 client/packages/lowcoder/src/comps/comps/chatComp/utils/chatStorage.ts delete mode 100644 client/packages/lowcoder/src/comps/comps/chatComp/utils/responseFactory.ts delete mode 100644 client/packages/lowcoder/src/comps/comps/chatComp/utils/responseHandlers.ts rename client/packages/lowcoder/src/comps/comps/chatComp/utils/{chatStorageFactory.ts => storageFactory.ts} (81%) diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/chatComp.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/chatComp.tsx index 921ed8083..ac32527bf 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/chatComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/chatComp/chatComp.tsx @@ -1,29 +1,117 @@ -// client/packages/lowcoder/src/comps/comps/chatComp/chatComp.tsx -import { UICompBuilder } from "comps/generators"; -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( - chatChildrenMap, - (props, dispatch) => ( - - ) -) - .setPropertyViewFn((children) => ) - .build(); - -// Export the component with exposed variables -export const ChatComp = withExposingConfigs(ChatTmpComp, [ - new NameConfig("text", "Chat component text"), - new NameConfig("currentMessage", "Current user message"), +// client/packages/lowcoder/src/comps/comps/chatComp/chatComp.tsx + +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 { withDefault } from "comps/generators"; +import { BoolControl } from "comps/controls/boolControl"; +import { dropdownControl } from "comps/controls/dropdownControl"; +import QuerySelectControl from "comps/controls/querySelectControl"; +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 { changeChildAction } from "lowcoder-core"; + +import "@assistant-ui/styles/index.css"; +import "@assistant-ui/styles/markdown.css"; + +// ============================================================================ +// SIMPLIFIED CHILDREN MAP - ONLY ESSENTIAL PROPS +// ============================================================================ + +const ModelTypeOptions = [ + { label: "Query", value: "query" }, + { label: "N8N Workflow", value: "n8n" }, +] as const; + +export const chatChildrenMap = { + // Storage + tableName: withDefault(StringControl, "default"), + + // Message Handler Configuration + handlerType: dropdownControl(ModelTypeOptions, "query"), + chatQuery: QuerySelectControl, // Only used for "query" type + modelHost: withDefault(StringControl, ""), // Only used for "n8n" type + systemPrompt: withDefault(StringControl, "You are a helpful assistant."), + streaming: BoolControl.DEFAULT_TRUE, + + // UI Configuration + placeholder: withDefault(StringControl, "Chat Component"), + + // Exposed Variables (not shown in Property View) + currentMessage: stringExposingStateControl("currentMessage", ""), +}; + +// ============================================================================ +// CLEAN CHATCOMP - USES NEW ARCHITECTURE +// ============================================================================ + +const ChatTmpComp = new UICompBuilder( + chatChildrenMap, + (props, dispatch) => { + // Create storage from tableName + const storage = useMemo(() => + createChatStorage(props.tableName), + [props.tableName] + ); + + // Create message handler based on type + const messageHandler = useMemo(() => { + const handlerType = props.handlerType; + + if (handlerType === "query") { + return new QueryHandler({ + chatQuery: props.chatQuery.value, + dispatch, + streaming: props.streaming + }); + } else if (handlerType === "n8n") { + return createMessageHandler("n8n", { + modelHost: props.modelHost, + systemPrompt: props.systemPrompt, + streaming: props.streaming + }); + } else { + // Fallback to mock handler + return createMessageHandler("mock", { + chatQuery: props.chatQuery.value, + dispatch, + streaming: props.streaming + }); + } + }, [ + props.handlerType, + props.chatQuery, + props.modelHost, + props.systemPrompt, + props.streaming, + dispatch + ]); + + // Handle message updates for exposed variable + const handleMessageUpdate = (message: string) => { + dispatch(changeChildAction("currentMessage", message, false)); + }; + + return ( + + ); + } +) +.setPropertyViewFn((children) => ) +.build(); + +// ============================================================================ +// EXPORT WITH EXPOSED VARIABLES +// ============================================================================ + +export const ChatComp = withExposingConfigs(ChatTmpComp, [ + new NameConfig("currentMessage", "Current user message"), ]); \ No newline at end of file diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/chatCompTypes.ts b/client/packages/lowcoder/src/comps/comps/chatComp/chatCompTypes.ts index 5c5574471..3151bff6a 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/chatCompTypes.ts +++ b/client/packages/lowcoder/src/comps/comps/chatComp/chatCompTypes.ts @@ -1,41 +1,26 @@ // client/packages/lowcoder/src/comps/comps/chatComp/chatCompTypes.ts -import { StringControl, NumberControl } from "comps/controls/codeControl"; -import { stringExposingStateControl } from "comps/controls/codeStateControl"; -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 = [ - { label: "Direct LLM", value: "direct-llm" }, - { label: "n8n Workflow", value: "n8n" }, - { label: "Query", value: "query" }, -] as const; - -export const chatChildrenMap = { - text: withDefault(StringControl, "Chat Component Placeholder"), - chatQuery: QuerySelectControl, - currentMessage: stringExposingStateControl("currentMessage", ""), - modelType: dropdownControl(ModelTypeOptions, "query"), - modelHost: withDefault(StringControl, ""), - streaming: BoolControl.DEFAULT_TRUE, - systemPrompt: withDefault(StringControl, "You are a helpful assistant."), - agent: BoolControl, - maxInteractions: withDefault(NumberControl, 10), - tableName: withDefault(StringControl, "default"), -}; +// ============================================================================ +// CLEAN CHATCOMP TYPES - SIMPLIFIED AND FOCUSED +// ============================================================================ export type ChatCompProps = { - text: string; - chatQuery: string; - currentMessage: string; - modelType: string; - modelHost: string; - streaming: boolean; - systemPrompt: string; - agent: boolean; - maxInteractions: number; + // Storage tableName: string; -}; \ No newline at end of file + + // Message Handler + handlerType: "query" | "n8n"; + chatQuery: string; // Only used when handlerType === "query" + modelHost: string; // Only used when handlerType === "n8n" + systemPrompt: string; + streaming: boolean; + + // UI + placeholder: string; + + // Exposed Variables + currentMessage: string; // Read-only exposed variable +}; + +// Legacy export for backwards compatibility (if needed) +export type ChatCompLegacyProps = ChatCompProps; diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/chatPropertyView.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/chatPropertyView.tsx index a5b3f5249..784ef44b5 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/chatPropertyView.tsx +++ b/client/packages/lowcoder/src/comps/comps/chatComp/chatPropertyView.tsx @@ -1,34 +1,69 @@ -// 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 ( -
- {children.text.propertyView({ label: "Text" })} - {children.chatQuery.propertyView({ label: "Chat Query" })} - {children.currentMessage.propertyView({ - label: "Current Message (Dynamic)", - placeholder: "Shows the current user message", - disabled: true - })} - {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", - })} -
- ); -}); - +// client/packages/lowcoder/src/comps/comps/chatComp/chatPropertyView.tsx + +import React from "react"; +import { Section, sectionNames } from "lowcoder-design"; + +// ============================================================================ +// CLEAN PROPERTY VIEW - FOCUSED ON ESSENTIAL CONFIGURATION +// ============================================================================ + +export const ChatPropertyView = React.memo((props: any) => { + const { children } = props; + + return ( + <> + {/* Basic Configuration */} +
+ {children.placeholder.propertyView({ + label: "Placeholder Text", + placeholder: "Enter placeholder text..." + })} + + {children.tableName.propertyView({ + label: "Storage Table", + placeholder: "default", + tooltip: "Storage identifier - use same value to share conversations between components" + })} +
+ + {/* Message Handler Configuration */} +
+ {children.handlerType.propertyView({ + label: "Handler Type", + tooltip: "How messages are processed" + })} + + {/* Show chatQuery field only for "query" handler */} + {children.handlerType.value === "query" && ( + children.chatQuery.propertyView({ + label: "Chat Query", + placeholder: "Select a query to handle messages" + }) + )} + + {/* Show modelHost field only for "n8n" handler */} + {children.handlerType.value === "n8n" && ( + children.modelHost.propertyView({ + label: "N8N Webhook URL", + placeholder: "http://localhost:5678/webhook/...", + tooltip: "N8N webhook endpoint for processing messages" + }) + )} + + {children.systemPrompt.propertyView({ + label: "System Prompt", + placeholder: "You are a helpful assistant...", + tooltip: "Initial instructions for the AI" + })} + + {children.streaming.propertyView({ + label: "Enable Streaming", + tooltip: "Stream responses in real-time (when supported)" + })} +
+ + + ); +}); + ChatPropertyView.displayName = 'ChatPropertyView'; \ No newline at end of file diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/chatView.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/chatView.tsx deleted file mode 100644 index 544e73e8d..000000000 --- a/client/packages/lowcoder/src/comps/comps/chatComp/chatView.tsx +++ /dev/null @@ -1,46 +0,0 @@ -// client/packages/lowcoder/src/comps/comps/chatComp/chatView.tsx -import React, { useMemo } from "react"; -import { ChatCompProps } from "./chatCompTypes"; -import { CompAction } from "lowcoder-core"; -import { ChatApp } from "./components/ChatApp"; -import { createChatStorage } from './utils/chatStorageFactory'; - -import "@assistant-ui/styles/index.css"; -import "@assistant-ui/styles/markdown.css"; - -// Extend the props we receive so we can forward the redux dispatch -interface ChatViewProps extends ChatCompProps { - dispatch?: (action: CompAction) => void; -} - -export const ChatView = React.memo((props: ChatViewProps) => { - const { - chatQuery, - currentMessage, - dispatch, - modelType, - modelHost, - systemPrompt, - streaming, - tableName - } = props; - - // Create storage instance based on tableName - const storage = useMemo(() => createChatStorage(tableName || "default"), [tableName]); - - return ( - - ); -}); - -ChatView.displayName = 'ChatView'; \ No newline at end of file diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatApp.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatApp.tsx deleted file mode 100644 index 12ee0071f..000000000 --- a/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatApp.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { ChatProvider } from "./context/ChatContext"; -import { ChatMain } from "./ChatMain"; -import { CompAction } from "lowcoder-core"; -import { createChatStorage } from "../utils/chatStorageFactory"; - -interface ChatAppProps { - chatQuery: string; - currentMessage: string; - dispatch?: (action: CompAction) => void; - modelType: string; - modelHost?: string; - systemPrompt?: string; - streaming?: boolean; - tableName: string; - storage: ReturnType; -} - -export function ChatApp({ - chatQuery, - currentMessage, - dispatch, - modelType, - modelHost, - systemPrompt, - streaming, - tableName, - storage -}: ChatAppProps) { - return ( - - - - ); -} \ No newline at end of file diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCore.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCore.tsx new file mode 100644 index 000000000..c40151dd5 --- /dev/null +++ b/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCore.tsx @@ -0,0 +1,21 @@ +// client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCore.tsx + +import React from "react"; +import { ChatProvider } from "./context/ChatContext"; +import { ChatCoreMain } from "./ChatCoreMain"; +import { ChatCoreProps } from "../types/chatTypes"; + +// ============================================================================ +// CHAT CORE - THE SHARED FOUNDATION +// ============================================================================ + +export function ChatCore({ storage, messageHandler, onMessageUpdate }: ChatCoreProps) { + return ( + + + + ); +} \ No newline at end of file diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCoreMain.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCoreMain.tsx new file mode 100644 index 000000000..1459d00e5 --- /dev/null +++ b/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCoreMain.tsx @@ -0,0 +1,246 @@ +// client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCoreMain.tsx + +import React, { useState } from "react"; +import { + useExternalStoreRuntime, + ThreadMessageLike, + AppendMessage, + AssistantRuntimeProvider, + ExternalStoreThreadListAdapter, +} from "@assistant-ui/react"; +import { Thread } from "./assistant-ui/thread"; +import { ThreadList } from "./assistant-ui/thread-list"; +import { + useChatContext, + ChatMessage, + RegularThreadData, + ArchivedThreadData +} from "./context/ChatContext"; +import { MessageHandler } from "../types/chatTypes"; +import styled from "styled-components"; + +// ============================================================================ +// STYLED COMPONENTS (same as your current ChatMain) +// ============================================================================ + +const ChatContainer = styled.div` + display: flex; + height: 500px; + + p { + margin: 0; + } + + .aui-thread-list-root { + width: 250px; + background-color: #fff; + padding: 10px; + } + + .aui-thread-root { + flex: 1; + background-color: #f9fafb; + } + + .aui-thread-list-item { + cursor: pointer; + transition: background-color 0.2s ease; + + &[data-active="true"] { + background-color: #dbeafe; + border: 1px solid #bfdbfe; + } + } +`; + +// ============================================================================ +// CHAT CORE MAIN - CLEAN PROPS, FOCUSED RESPONSIBILITY +// ============================================================================ + +interface ChatCoreMainProps { + messageHandler: MessageHandler; + onMessageUpdate?: (message: string) => void; +} + +const generateId = () => Math.random().toString(36).substr(2, 9); + +export function ChatCoreMain({ messageHandler, onMessageUpdate }: ChatCoreMainProps) { + const { state, actions } = useChatContext(); + const [isRunning, setIsRunning] = useState(false); + + console.log("CHAT CORE STATE", state); + + // Get messages for current thread + const currentMessages = actions.getCurrentMessages(); + + // Convert custom format to ThreadMessageLike (same as your current implementation) + const convertMessage = (message: ChatMessage): ThreadMessageLike => ({ + role: message.role, + content: [{ type: "text", text: message.text }], + id: message.id, + createdAt: new Date(message.timestamp), + }); + + // Handle new message - MUCH CLEANER with messageHandler + const onNew = async (message: AppendMessage) => { + // Extract text from AppendMessage content array + if (message.content.length !== 1 || message.content[0]?.type !== "text") { + throw new Error("Only text content is supported"); + } + + // Add user message in custom format + const userMessage: ChatMessage = { + id: generateId(), + role: "user", + text: message.content[0].text, + timestamp: Date.now(), + }; + + // Update currentMessage state to expose to queries + onMessageUpdate?.(userMessage.text); + + // Update current thread with new user message + await actions.addMessage(state.currentThreadId, userMessage); + setIsRunning(true); + + try { + // Use the message handler (no more complex logic here!) + const response = await messageHandler.sendMessage(userMessage.text); + + const assistantMessage: ChatMessage = { + id: generateId(), + role: "assistant", + text: response.content, + timestamp: Date.now(), + }; + + // Update current thread with assistant response + await actions.addMessage(state.currentThreadId, assistantMessage); + } catch (error) { + // Handle errors gracefully + const errorMessage: ChatMessage = { + id: generateId(), + role: "assistant", + text: `Sorry, I encountered an error: ${error instanceof Error ? error.message : 'Unknown error'}`, + timestamp: Date.now(), + }; + + await actions.addMessage(state.currentThreadId, errorMessage); + } finally { + setIsRunning(false); + } + }; + + // Handle edit message - CLEANER with messageHandler + const onEdit = async (message: AppendMessage) => { + // Extract text from AppendMessage content array + if (message.content.length !== 1 || message.content[0]?.type !== "text") { + throw new Error("Only text content is supported"); + } + + // Find the index where to insert the edited message + const index = currentMessages.findIndex((m) => m.id === message.parentId) + 1; + + // Keep messages up to the parent + const newMessages = [...currentMessages.slice(0, index)]; + + // Add the edited message in custom format + const editedMessage: ChatMessage = { + id: generateId(), + role: "user", + text: message.content[0].text, + timestamp: Date.now(), + }; + newMessages.push(editedMessage); + + // Update currentMessage state to expose to queries + onMessageUpdate?.(editedMessage.text); + + // Update messages using the new context action + await actions.updateMessages(state.currentThreadId, newMessages); + setIsRunning(true); + + try { + // Use the message handler (clean!) + const response = await messageHandler.sendMessage(editedMessage.text); + + const assistantMessage: ChatMessage = { + id: generateId(), + role: "assistant", + text: response.content, + timestamp: Date.now(), + }; + + newMessages.push(assistantMessage); + await actions.updateMessages(state.currentThreadId, newMessages); + } catch (error) { + // Handle errors gracefully + const errorMessage: ChatMessage = { + id: generateId(), + role: "assistant", + text: `Sorry, I encountered an error: ${error instanceof Error ? error.message : 'Unknown error'}`, + timestamp: Date.now(), + }; + + newMessages.push(errorMessage); + await actions.updateMessages(state.currentThreadId, newMessages); + } finally { + setIsRunning(false); + } + }; + + // Thread list adapter for managing multiple threads (same as your current implementation) + const threadListAdapter: ExternalStoreThreadListAdapter = { + threadId: state.currentThreadId, + threads: state.threadList.filter((t): t is RegularThreadData => t.status === "regular"), + archivedThreads: state.threadList.filter((t): t is ArchivedThreadData => t.status === "archived"), + + onSwitchToNewThread: async () => { + const threadId = await actions.createThread("New Chat"); + actions.setCurrentThread(threadId); + }, + + onSwitchToThread: (threadId) => { + actions.setCurrentThread(threadId); + }, + + onRename: async (threadId, newTitle) => { + await actions.updateThread(threadId, { title: newTitle }); + }, + + onArchive: async (threadId) => { + await actions.updateThread(threadId, { status: "archived" }); + }, + + onDelete: async (threadId) => { + await actions.deleteThread(threadId); + }, + }; + + const runtime = useExternalStoreRuntime({ + messages: currentMessages, + setMessages: (messages) => { + actions.updateMessages(state.currentThreadId, messages); + }, + convertMessage, + isRunning, + onNew, + onEdit, + adapters: { + threadList: threadListAdapter, + }, + }); + + if (!state.isInitialized) { + return
Loading...
; + } + + return ( + + + + + + + ); +} diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatMain.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatMain.tsx deleted file mode 100644 index 3359c7580..000000000 --- a/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatMain.tsx +++ /dev/null @@ -1,381 +0,0 @@ -import React, { useContext, useState, useRef, useEffect } from "react"; -import { - useExternalStoreRuntime, - ThreadMessageLike, - AppendMessage, - AssistantRuntimeProvider, - ExternalStoreThreadListAdapter, -} from "@assistant-ui/react"; -import { Thread } from "./assistant-ui/thread"; -import { ThreadList } from "./assistant-ui/thread-list"; -import { - useChatContext, - MyMessage, - ThreadData, - RegularThreadData, - ArchivedThreadData -} from "./context/ChatContext"; -import styled from "styled-components"; -import { routeByNameAction, executeQueryAction, CompAction, changeChildAction } from "lowcoder-core"; -import { getPromiseAfterDispatch } from "util/promiseUtils"; -// ADD THIS IMPORT: -import { createResponseHandler } from '../utils/responseFactory'; -import { useMemo } from 'react'; // if not already imported - -const ChatContainer = styled.div<{ $autoHeight?: boolean }>` - display: flex; - height: ${props => props.$autoHeight ? '500px' : '100%'}; - - p { - margin: 0; - } - - .aui-thread-list-root { - width: 250px; - background-color: #fff; - padding: 10px; - } - - .aui-thread-root { - flex: 1; - background-color: #f9fafb; - } - - .aui-thread-list-item { - cursor: pointer; - transition: background-color 0.2s ease; - - &[data-active="true"] { - background-color: #dbeafe; - border: 1px solid #bfdbfe; - } - } -`; - -const generateId = () => Math.random().toString(36).substr(2, 9); - -// Helper to call the Lowcoder query system -const callQuery = async ( - queryName: string, - prompt: string, - dispatch?: (action: CompAction) => void -) => { - // If no query selected or dispatch unavailable, fallback with mock response - if (!queryName || !dispatch) { - await new Promise((res) => setTimeout(res, 500)); - return { content: "(mock) You typed: " + prompt }; - } - - try { - const result: any = await getPromiseAfterDispatch( - dispatch, - routeByNameAction( - queryName, - executeQueryAction({ - // Send the user prompt as variable named 'prompt' by default - args: { prompt: { value: prompt } }, - }) - ) - ); - - // Extract reply text from the query result - let reply: string; - if (typeof result === "string") { - reply = result; - } else if (result && typeof result === "object") { - reply = - (result as any).response ?? - (result as any).message ?? - (result as any).content ?? - JSON.stringify(result); - } else { - reply = String(result); - } - - return { content: reply }; - } catch (e: any) { - throw new Error(e?.message || "Query execution failed"); - } -}; - -// AFTER: -interface ChatMainProps { - chatQuery: string; - currentMessage: string; - dispatch?: (action: CompAction) => void; - // Add new props for response handling - modelType: string; - modelHost?: string; - systemPrompt?: string; - streaming?: boolean; - tableName: string; -} - -export function ChatMain({ - chatQuery, - currentMessage, - dispatch, - modelType, - modelHost, - systemPrompt, - streaming, - tableName }: ChatMainProps) { - const { state, actions } = useChatContext(); - const [isRunning, setIsRunning] = useState(false); - const editorState = useContext(EditorContext); - const editorStateRef = useRef(editorState); - - // Keep the ref updated with the latest editorState - useEffect(() => { - // console.log("EDITOR STATE CHANGE ---> ", editorState); - editorStateRef.current = editorState; - }, [editorState]); - -// Create response handler based on model type -const responseHandler = useMemo(() => { - const responseType = modelType === "n8n" ? "direct-api" : "query"; - - return createResponseHandler(responseType, { - // Query handler config - chatQuery, - dispatch, - // Direct API handler config - modelHost, - systemPrompt, - streaming - }); -}, [modelType, chatQuery, dispatch, modelHost, systemPrompt, streaming]); - - console.log("STATE", state); - - // Get messages for current thread - const currentMessages = actions.getCurrentMessages(); - - // Convert custom format to ThreadMessageLike - const convertMessage = (message: MyMessage): ThreadMessageLike => ({ - role: message.role, - content: [{ type: "text", text: message.text }], - id: message.id, - createdAt: new Date(message.timestamp), - }); - - const performAction = async (actions: any[]) => { - const comp = editorStateRef.current.getUIComp().children.comp; - if (!comp) { - console.error("No comp found"); - return; - } - // const layout = comp.children.layout.getView(); - // console.log("LAYOUT", layout); - - for (const actionItem of actions) { - const { action, component, ...action_payload } = actionItem; - - switch (action) { - case "place_component": - await addComponentAction.execute({ - actionKey: action, - actionValue: "", - actionPayload: action_payload, - selectedComponent: component, - selectedEditorComponent: null, - selectedNestComponent: null, - editorState: editorStateRef.current - }); - break; - case "nest_component": - await nestComponentAction.execute({ - actionKey: action, - actionValue: "", - actionPayload: action_payload, - selectedComponent: component, - selectedEditorComponent: null, - selectedNestComponent: null, - editorState: editorStateRef.current - }); - break; - case "set_properties": - debugger; - await configureComponentAction.execute({ - actionKey: action, - actionValue: component, - actionPayload: action_payload, - selectedEditorComponent: null, - selectedComponent: null, - selectedNestComponent: null, - editorState: editorStateRef.current - }); - break; - default: - break; - } - await new Promise(resolve => setTimeout(resolve, 1000)); - } - }; - - const onNew = async (message: AppendMessage) => { - // Extract text from AppendMessage content array - if (message.content.length !== 1 || message.content[0]?.type !== "text") { - throw new Error("Only text content is supported"); - } - - // Add user message in custom format - const userMessage: MyMessage = { - id: generateId(), - role: "user", - text: message.content[0].text, - timestamp: Date.now(), - }; - - // Update currentMessage state to expose to queries - if (dispatch) { - dispatch(changeChildAction("currentMessage", userMessage.text, false)); - } - - // Update current thread with new user message - await actions.addMessage(state.currentThreadId, userMessage); - setIsRunning(true); - - try { - // Call selected query / fallback to mock - const response = await responseHandler.sendMessage(userMessage.text); - - const assistantMessage: MyMessage = { - id: generateId(), - role: "assistant", - text: reply, - timestamp: Date.now(), - }; - - // Update current thread with assistant response - await actions.addMessage(state.currentThreadId, assistantMessage); - } catch (error) { - // Handle errors gracefully - const errorMessage: MyMessage = { - id: generateId(), - role: "assistant", - text: `Sorry, I encountered an error: ${error instanceof Error ? error.message : 'Unknown error'}`, - timestamp: Date.now(), - }; - - await actions.addMessage(state.currentThreadId, errorMessage); - } finally { - setIsRunning(false); - } - }; - - // Add onEdit functionality - const onEdit = async (message: AppendMessage) => { - // Extract text from AppendMessage content array - if (message.content.length !== 1 || message.content[0]?.type !== "text") { - throw new Error("Only text content is supported"); - } - - // Find the index where to insert the edited message - const index = currentMessages.findIndex((m) => m.id === message.parentId) + 1; - - // Keep messages up to the parent - const newMessages = [...currentMessages.slice(0, index)]; - - // Add the edited message in custom format - const editedMessage: MyMessage = { - id: generateId(), - role: "user", - text: message.content[0].text, - timestamp: Date.now(), - }; - newMessages.push(editedMessage); - - // Update currentMessage state to expose to queries - if (dispatch) { - dispatch(changeChildAction("currentMessage", editedMessage.text, false)); - } - - // Update messages using the new context action - await actions.updateMessages(state.currentThreadId, newMessages); - setIsRunning(true); - - try { - const response = await responseHandler.sendMessage(editedMessage.text); - - const assistantMessage: MyMessage = { - id: generateId(), - role: "assistant", - text: reply, - timestamp: Date.now(), - }; - - newMessages.push(assistantMessage); - await actions.updateMessages(state.currentThreadId, newMessages); - } catch (error) { - // Handle errors gracefully - const errorMessage: MyMessage = { - id: generateId(), - role: "assistant", - text: `Sorry, I encountered an error: ${error instanceof Error ? error.message : 'Unknown error'}`, - timestamp: Date.now(), - }; - - newMessages.push(errorMessage); - await actions.updateMessages(state.currentThreadId, newMessages); - } finally { - setIsRunning(false); - } - }; - - // Thread list adapter for managing multiple threads - const threadListAdapter: ExternalStoreThreadListAdapter = { - threadId: state.currentThreadId, - threads: state.threadList.filter((t): t is RegularThreadData => t.status === "regular"), - archivedThreads: state.threadList.filter((t): t is ArchivedThreadData => t.status === "archived"), - - onSwitchToNewThread: async () => { - const threadId = await actions.createThread("New Chat"); - actions.setCurrentThread(threadId); - }, - - onSwitchToThread: (threadId) => { - actions.setCurrentThread(threadId); - }, - - onRename: async (threadId, newTitle) => { - await actions.updateThread(threadId, { title: newTitle }); - }, - - onArchive: async (threadId) => { - await actions.updateThread(threadId, { status: "archived" }); - }, - - onDelete: async (threadId) => { - await actions.deleteThread(threadId); - }, - }; - - const runtime = useExternalStoreRuntime({ - messages: currentMessages, - setMessages: (messages) => { - actions.updateMessages(state.currentThreadId, messages); - }, - convertMessage, - isRunning, - onNew, - onEdit, - adapters: { - threadList: threadListAdapter, - }, - }); - - if (!state.isInitialized) { - return
Loading...
; - } - - return ( - - - - - - - ); -} - diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatPanel.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatPanel.tsx new file mode 100644 index 000000000..a36c1f38e --- /dev/null +++ b/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatPanel.tsx @@ -0,0 +1,47 @@ +// client/packages/lowcoder/src/comps/comps/chatComp/components/ChatPanel.tsx + +import React, { useMemo } from "react"; +import { ChatCore } from "./ChatCore"; +import { createChatStorage } from "../utils/storageFactory"; +import { N8NHandler } from "../handlers/messageHandlers"; +import { ChatPanelProps } from "../types/chatTypes"; + +import "@assistant-ui/styles/index.css"; +import "@assistant-ui/styles/markdown.css"; + +// ============================================================================ +// CHAT PANEL - CLEAN BOTTOM PANEL COMPONENT +// ============================================================================ + +export function ChatPanel({ + tableName, + modelHost, + systemPrompt = "You are a helpful assistant.", + streaming = true, + onMessageUpdate +}: ChatPanelProps) { + + // Create storage instance + const storage = useMemo(() => + createChatStorage(tableName), + [tableName] + ); + + // Create N8N message handler + const messageHandler = useMemo(() => + new N8NHandler({ + modelHost, + systemPrompt, + streaming + }), + [modelHost, systemPrompt, streaming] + ); + + return ( + + ); +} \ No newline at end of file diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/components/context/ChatContext.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/components/context/ChatContext.tsx index 68c4d4206..65670edff 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/components/context/ChatContext.tsx +++ b/client/packages/lowcoder/src/comps/comps/chatComp/components/context/ChatContext.tsx @@ -1,378 +1,385 @@ -import React, { createContext, useContext, useReducer, useEffect, ReactNode } from "react"; -import { ThreadData as StoredThreadData } from "../../utils/chatStorageFactory"; -// Define thread-specific message type -export interface MyMessage { - id: string; - role: "user" | "assistant"; - text: string; - timestamp: number; -} - -// Thread data interfaces -export interface RegularThreadData { - threadId: string; - status: "regular"; - title: string; -} - -export interface ArchivedThreadData { - threadId: string; - status: "archived"; - title: string; -} - -export type ThreadData = RegularThreadData | ArchivedThreadData; - -// Chat state interface -interface ChatState { - isInitialized: boolean; - isLoading: boolean; - currentThreadId: string; - threadList: ThreadData[]; - threads: Map; - lastSaved: number; // Timestamp for tracking when data was last saved -} - -// Action types -type ChatAction = - | { type: "INITIALIZE_START" } - | { type: "INITIALIZE_SUCCESS"; threadList: ThreadData[]; threads: Map; currentThreadId: string } - | { type: "INITIALIZE_ERROR" } - | { type: "SET_CURRENT_THREAD"; threadId: string } - | { type: "ADD_THREAD"; thread: ThreadData } - | { type: "UPDATE_THREAD"; threadId: string; updates: Partial } - | { type: "DELETE_THREAD"; threadId: string } - | { type: "SET_MESSAGES"; threadId: string; messages: MyMessage[] } - | { type: "ADD_MESSAGE"; threadId: string; message: MyMessage } - | { type: "UPDATE_MESSAGES"; threadId: string; messages: MyMessage[] } - | { type: "MARK_SAVED" }; - -// Initial state -const initialState: ChatState = { - isInitialized: false, - isLoading: false, - currentThreadId: "default", - threadList: [{ threadId: "default", status: "regular", title: "New Chat" }], - threads: new Map([["default", []]]), - lastSaved: 0, -}; - -// Reducer function -function chatReducer(state: ChatState, action: ChatAction): ChatState { - switch (action.type) { - case "INITIALIZE_START": - return { - ...state, - isLoading: true, - }; - - case "INITIALIZE_SUCCESS": - return { - ...state, - isInitialized: true, - isLoading: false, - threadList: action.threadList, - threads: action.threads, - currentThreadId: action.currentThreadId, - lastSaved: Date.now(), - }; - - case "INITIALIZE_ERROR": - return { - ...state, - isInitialized: true, - isLoading: false, - }; - - case "SET_CURRENT_THREAD": - return { - ...state, - currentThreadId: action.threadId, - }; - - case "ADD_THREAD": - return { - ...state, - threadList: [...state.threadList, action.thread], - threads: new Map(state.threads).set(action.thread.threadId, []), - }; - - case "UPDATE_THREAD": - return { - ...state, - threadList: state.threadList.map(thread => - thread.threadId === action.threadId - ? { ...thread, ...action.updates } - : thread - ), - }; - - case "DELETE_THREAD": - const newThreads = new Map(state.threads); - newThreads.delete(action.threadId); - return { - ...state, - threadList: state.threadList.filter(t => t.threadId !== action.threadId), - threads: newThreads, - currentThreadId: state.currentThreadId === action.threadId - ? "default" - : state.currentThreadId, - }; - - case "SET_MESSAGES": - return { - ...state, - threads: new Map(state.threads).set(action.threadId, action.messages), - }; - - case "ADD_MESSAGE": - const currentMessages = state.threads.get(action.threadId) || []; - return { - ...state, - threads: new Map(state.threads).set(action.threadId, [...currentMessages, action.message]), - }; - - case "UPDATE_MESSAGES": - return { - ...state, - threads: new Map(state.threads).set(action.threadId, action.messages), - }; - - case "MARK_SAVED": - return { - ...state, - lastSaved: Date.now(), - }; - - default: - return state; - } -} - -// Context type -interface ChatContextType { - state: ChatState; - actions: { - // Initialization - initialize: () => Promise; - - // Thread management - setCurrentThread: (threadId: string) => void; - createThread: (title?: string) => Promise; - updateThread: (threadId: string, updates: Partial) => Promise; - deleteThread: (threadId: string) => Promise; - - // Message management - addMessage: (threadId: string, message: MyMessage) => Promise; - updateMessages: (threadId: string, messages: MyMessage[]) => Promise; - - // Utility - getCurrentMessages: () => MyMessage[]; - }; -} - -// Create the context -const ChatContext = createContext(null); - -// Chat provider component - export function ChatProvider({ children, storage }: { children: ReactNode, storage: ReturnType; - }) { - const [state, dispatch] = useReducer(chatReducer, initialState); - - // Initialize data from storage - const initialize = async () => { - dispatch({ type: "INITIALIZE_START" }); - - try { - await storage.initialize(); - - // Load all threads from storage - const storedThreads = await storage.getAllThreads(); - - if (storedThreads.length > 0) { - // Convert stored threads to UI format - const uiThreads: ThreadData[] = storedThreads.map(stored => ({ - threadId: stored.threadId, - status: stored.status as "regular" | "archived", - title: stored.title, - })); - - // Load messages for each thread - const threadMessages = new Map(); - for (const thread of storedThreads) { - const messages = await storage.getMessages(thread.threadId); - threadMessages.set(thread.threadId, messages); - } - - // Ensure default thread exists - if (!threadMessages.has("default")) { - threadMessages.set("default", []); - } - - // Find the most recently updated thread - const latestThread = storedThreads.sort((a, b) => b.updatedAt - a.updatedAt)[0]; - const currentThreadId = latestThread ? latestThread.threadId : "default"; - - dispatch({ - type: "INITIALIZE_SUCCESS", - threadList: uiThreads, - threads: threadMessages, - currentThreadId - }); - } else { - // Initialize with default thread - const defaultThread: StoredThreadData = { - threadId: "default", - status: "regular", - title: "New Chat", - createdAt: Date.now(), - updatedAt: Date.now(), - }; - await storage.saveThread(defaultThread); - - dispatch({ - type: "INITIALIZE_SUCCESS", - threadList: initialState.threadList, - threads: initialState.threads, - currentThreadId: "default" - }); - } - } catch (error) { - console.error("Failed to initialize chat data:", error); - dispatch({ type: "INITIALIZE_ERROR" }); - } - }; - - // Thread management actions - const setCurrentThread = (threadId: string) => { - dispatch({ type: "SET_CURRENT_THREAD", threadId }); - }; - - const createThread = async (title: string = "New Chat"): Promise => { - const threadId = `thread-${Date.now()}`; - const newThread: ThreadData = { - threadId, - status: "regular", - title, - }; - - // Update local state first - dispatch({ type: "ADD_THREAD", thread: newThread }); - - // Save to storage - try { - const storedThread: StoredThreadData = { - threadId, - status: "regular", - title, - createdAt: Date.now(), - updatedAt: Date.now(), - }; - await storage.saveThread(storedThread); - dispatch({ type: "MARK_SAVED" }); - } catch (error) { - console.error("Failed to save new thread:", error); - } - - return threadId; - }; - - const updateThread = async (threadId: string, updates: Partial) => { - // Update local state first - dispatch({ type: "UPDATE_THREAD", threadId, updates }); - - // Save to storage - try { - const existingThread = await storage.getThread(threadId); - if (existingThread) { - const updatedThread: StoredThreadData = { - ...existingThread, - ...updates, - updatedAt: Date.now(), - }; - await storage.saveThread(updatedThread); - dispatch({ type: "MARK_SAVED" }); - } - } catch (error) { - console.error("Failed to update thread:", error); - } - }; - - const deleteThread = async (threadId: string) => { - // Update local state first - dispatch({ type: "DELETE_THREAD", threadId }); - - // Delete from storage - try { - await storage.deleteThread(threadId); - dispatch({ type: "MARK_SAVED" }); - } catch (error) { - console.error("Failed to delete thread:", error); - } - }; - - // Message management actions - const addMessage = async (threadId: string, message: MyMessage) => { - // Update local state first - dispatch({ type: "ADD_MESSAGE", threadId, message }); - - // Save to storage - try { - await storage.saveMessage(message, threadId); - dispatch({ type: "MARK_SAVED" }); - } catch (error) { - console.error("Failed to save message:", error); - } - }; - - const updateMessages = async (threadId: string, messages: MyMessage[]) => { - // Update local state first - dispatch({ type: "UPDATE_MESSAGES", threadId, messages }); - - // Save to storage - try { - await storage.saveMessages(messages, threadId); - dispatch({ type: "MARK_SAVED" }); - } catch (error) { - console.error("Failed to save messages:", error); - } - }; - - // Utility functions - const getCurrentMessages = (): MyMessage[] => { - return state.threads.get(state.currentThreadId) || []; - }; - - // Auto-initialize on mount - useEffect(() => { - if (!state.isInitialized && !state.isLoading) { - initialize(); - } - }, [state.isInitialized, state.isLoading]); - - const actions = { - initialize, - setCurrentThread, - createThread, - updateThread, - deleteThread, - addMessage, - updateMessages, - getCurrentMessages, - }; - - return ( - - {children} - - ); -} - -// Hook for accessing chat context -export function useChatContext() { - const context = useContext(ChatContext); - if (!context) { - throw new Error("useChatContext must be used within ChatProvider"); - } - return context; -} \ No newline at end of file +// client/packages/lowcoder/src/comps/comps/chatComp/context/ChatContext.tsx + +import React, { createContext, useContext, useReducer, useEffect, ReactNode } from "react"; +import { ChatStorage, ChatMessage, ChatThread } from "../../types/chatTypes"; + +// ============================================================================ +// UPDATED CONTEXT WITH CLEAN TYPES +// ============================================================================ + +// Thread data interfaces (using clean types) +export interface RegularThreadData { + threadId: string; + status: "regular"; + title: string; +} + +export interface ArchivedThreadData { + threadId: string; + status: "archived"; + title: string; +} + +export type ThreadData = RegularThreadData | ArchivedThreadData; + +// Chat state interface (cleaned up) +interface ChatState { + isInitialized: boolean; + isLoading: boolean; + currentThreadId: string; + threadList: ThreadData[]; + threads: Map; + lastSaved: number; +} + +// Action types (same as before) +type ChatAction = + | { type: "INITIALIZE_START" } + | { type: "INITIALIZE_SUCCESS"; threadList: ThreadData[]; threads: Map; currentThreadId: string } + | { type: "INITIALIZE_ERROR" } + | { type: "SET_CURRENT_THREAD"; threadId: string } + | { type: "ADD_THREAD"; thread: ThreadData } + | { type: "UPDATE_THREAD"; threadId: string; updates: Partial } + | { type: "DELETE_THREAD"; threadId: string } + | { type: "SET_MESSAGES"; threadId: string; messages: ChatMessage[] } + | { type: "ADD_MESSAGE"; threadId: string; message: ChatMessage } + | { type: "UPDATE_MESSAGES"; threadId: string; messages: ChatMessage[] } + | { type: "MARK_SAVED" }; + +// Initial state +const initialState: ChatState = { + isInitialized: false, + isLoading: false, + currentThreadId: "default", + threadList: [{ threadId: "default", status: "regular", title: "New Chat" }], + threads: new Map([["default", []]]), + lastSaved: 0, +}; + +// Reducer function (same logic, updated types) +function chatReducer(state: ChatState, action: ChatAction): ChatState { + switch (action.type) { + case "INITIALIZE_START": + return { + ...state, + isLoading: true, + }; + + case "INITIALIZE_SUCCESS": + return { + ...state, + isInitialized: true, + isLoading: false, + threadList: action.threadList, + threads: action.threads, + currentThreadId: action.currentThreadId, + lastSaved: Date.now(), + }; + + case "INITIALIZE_ERROR": + return { + ...state, + isInitialized: true, + isLoading: false, + }; + + case "SET_CURRENT_THREAD": + return { + ...state, + currentThreadId: action.threadId, + }; + + case "ADD_THREAD": + return { + ...state, + threadList: [...state.threadList, action.thread], + threads: new Map(state.threads).set(action.thread.threadId, []), + }; + + case "UPDATE_THREAD": + return { + ...state, + threadList: state.threadList.map(thread => + thread.threadId === action.threadId + ? { ...thread, ...action.updates } + : thread + ), + }; + + case "DELETE_THREAD": + const newThreads = new Map(state.threads); + newThreads.delete(action.threadId); + return { + ...state, + threadList: state.threadList.filter(t => t.threadId !== action.threadId), + threads: newThreads, + currentThreadId: state.currentThreadId === action.threadId + ? "default" + : state.currentThreadId, + }; + + case "SET_MESSAGES": + return { + ...state, + threads: new Map(state.threads).set(action.threadId, action.messages), + }; + + case "ADD_MESSAGE": + const currentMessages = state.threads.get(action.threadId) || []; + return { + ...state, + threads: new Map(state.threads).set(action.threadId, [...currentMessages, action.message]), + }; + + case "UPDATE_MESSAGES": + return { + ...state, + threads: new Map(state.threads).set(action.threadId, action.messages), + }; + + case "MARK_SAVED": + return { + ...state, + lastSaved: Date.now(), + }; + + default: + return state; + } +} + +// Context type (cleaned up) +interface ChatContextType { + state: ChatState; + actions: { + // Initialization + initialize: () => Promise; + + // Thread management + setCurrentThread: (threadId: string) => void; + createThread: (title?: string) => Promise; + updateThread: (threadId: string, updates: Partial) => Promise; + deleteThread: (threadId: string) => Promise; + + // Message management + addMessage: (threadId: string, message: ChatMessage) => Promise; + updateMessages: (threadId: string, messages: ChatMessage[]) => Promise; + + // Utility + getCurrentMessages: () => ChatMessage[]; + }; +} + +// Create the context +const ChatContext = createContext(null); + +// ============================================================================ +// CHAT PROVIDER - UPDATED TO USE CLEAN STORAGE INTERFACE +// ============================================================================ + +export function ChatProvider({ children, storage }: { + children: ReactNode; + storage: ChatStorage; +}) { + const [state, dispatch] = useReducer(chatReducer, initialState); + + // Initialize data from storage + const initialize = async () => { + dispatch({ type: "INITIALIZE_START" }); + + try { + await storage.initialize(); + + // Load all threads from storage + const storedThreads = await storage.getAllThreads(); + + if (storedThreads.length > 0) { + // Convert stored threads to UI format + const uiThreads: ThreadData[] = storedThreads.map(stored => ({ + threadId: stored.threadId, + status: stored.status as "regular" | "archived", + title: stored.title, + })); + + // Load messages for each thread + const threadMessages = new Map(); + for (const thread of storedThreads) { + const messages = await storage.getMessages(thread.threadId); + threadMessages.set(thread.threadId, messages); + } + + // Ensure default thread exists + if (!threadMessages.has("default")) { + threadMessages.set("default", []); + } + + // Find the most recently updated thread + const latestThread = storedThreads.sort((a, b) => b.updatedAt - a.updatedAt)[0]; + const currentThreadId = latestThread ? latestThread.threadId : "default"; + + dispatch({ + type: "INITIALIZE_SUCCESS", + threadList: uiThreads, + threads: threadMessages, + currentThreadId + }); + } else { + // Initialize with default thread + const defaultThread: ChatThread = { + threadId: "default", + status: "regular", + title: "New Chat", + createdAt: Date.now(), + updatedAt: Date.now(), + }; + await storage.saveThread(defaultThread); + + dispatch({ + type: "INITIALIZE_SUCCESS", + threadList: initialState.threadList, + threads: initialState.threads, + currentThreadId: "default" + }); + } + } catch (error) { + console.error("Failed to initialize chat data:", error); + dispatch({ type: "INITIALIZE_ERROR" }); + } + }; + + // Thread management actions (same logic, cleaner types) + const setCurrentThread = (threadId: string) => { + dispatch({ type: "SET_CURRENT_THREAD", threadId }); + }; + + const createThread = async (title: string = "New Chat"): Promise => { + const threadId = `thread-${Date.now()}`; + const newThread: ThreadData = { + threadId, + status: "regular", + title, + }; + + // Update local state first + dispatch({ type: "ADD_THREAD", thread: newThread }); + + // Save to storage + try { + const storedThread: ChatThread = { + threadId, + status: "regular", + title, + createdAt: Date.now(), + updatedAt: Date.now(), + }; + await storage.saveThread(storedThread); + dispatch({ type: "MARK_SAVED" }); + } catch (error) { + console.error("Failed to save new thread:", error); + } + + return threadId; + }; + + const updateThread = async (threadId: string, updates: Partial) => { + // Update local state first + dispatch({ type: "UPDATE_THREAD", threadId, updates }); + + // Save to storage + try { + const existingThread = await storage.getThread(threadId); + if (existingThread) { + const updatedThread: ChatThread = { + ...existingThread, + ...updates, + updatedAt: Date.now(), + }; + await storage.saveThread(updatedThread); + dispatch({ type: "MARK_SAVED" }); + } + } catch (error) { + console.error("Failed to update thread:", error); + } + }; + + const deleteThread = async (threadId: string) => { + // Update local state first + dispatch({ type: "DELETE_THREAD", threadId }); + + // Delete from storage + try { + await storage.deleteThread(threadId); + dispatch({ type: "MARK_SAVED" }); + } catch (error) { + console.error("Failed to delete thread:", error); + } + }; + + // Message management actions (same logic) + const addMessage = async (threadId: string, message: ChatMessage) => { + // Update local state first + dispatch({ type: "ADD_MESSAGE", threadId, message }); + + // Save to storage + try { + await storage.saveMessage(message, threadId); + dispatch({ type: "MARK_SAVED" }); + } catch (error) { + console.error("Failed to save message:", error); + } + }; + + const updateMessages = async (threadId: string, messages: ChatMessage[]) => { + // Update local state first + dispatch({ type: "UPDATE_MESSAGES", threadId, messages }); + + // Save to storage + try { + await storage.saveMessages(messages, threadId); + dispatch({ type: "MARK_SAVED" }); + } catch (error) { + console.error("Failed to save messages:", error); + } + }; + + // Utility functions + const getCurrentMessages = (): ChatMessage[] => { + return state.threads.get(state.currentThreadId) || []; + }; + + // Auto-initialize on mount + useEffect(() => { + if (!state.isInitialized && !state.isLoading) { + initialize(); + } + }, [state.isInitialized, state.isLoading]); + + const actions = { + initialize, + setCurrentThread, + createThread, + updateThread, + deleteThread, + addMessage, + updateMessages, + getCurrentMessages, + }; + + return ( + + {children} + + ); +} + +// Hook for accessing chat context +export function useChatContext() { + const context = useContext(ChatContext); + if (!context) { + throw new Error("useChatContext must be used within ChatProvider"); + } + return context; +} + +// Re-export types for convenience +export type { ChatMessage, ChatThread }; \ No newline at end of file diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/handlers/messageHandlers.ts b/client/packages/lowcoder/src/comps/comps/chatComp/handlers/messageHandlers.ts new file mode 100644 index 000000000..14dcf5a71 --- /dev/null +++ b/client/packages/lowcoder/src/comps/comps/chatComp/handlers/messageHandlers.ts @@ -0,0 +1,133 @@ +// client/packages/lowcoder/src/comps/comps/chatComp/handlers/messageHandlers.ts + +import { MessageHandler, MessageResponse, N8NHandlerConfig, QueryHandlerConfig } from "../types/chatTypes"; +import { CompAction, routeByNameAction, executeQueryAction } from "lowcoder-core"; +import { getPromiseAfterDispatch } from "util/promiseUtils"; + +// ============================================================================ +// N8N HANDLER (for Bottom Panel) +// ============================================================================ + +export class N8NHandler implements MessageHandler { + constructor(private config: N8NHandlerConfig) {} + + async sendMessage(message: string): Promise { + const { modelHost, systemPrompt, streaming } = this.config; + + if (!modelHost) { + throw new Error("Model host is required for N8N calls"); + } + + try { + const response = await fetch(modelHost, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + message, + systemPrompt: systemPrompt || "You are a helpful assistant.", + streaming: streaming || false + }) + }); + + if (!response.ok) { + throw new Error(`N8N call failed: ${response.status} ${response.statusText}`); + } + + const data = await response.json(); + + // Extract content from various possible response formats + const content = data.response || data.message || data.content || data.text || String(data); + + return { content }; + } catch (error) { + throw new Error(`N8N call failed: ${error instanceof Error ? error.message : 'Unknown error'}`); + } + } +} + +// ============================================================================ +// QUERY HANDLER (for Canvas Components) +// ============================================================================ + +export class QueryHandler implements MessageHandler { + constructor(private config: QueryHandlerConfig) {} + + async sendMessage(message: string): Promise { + const { chatQuery, dispatch } = this.config; + + // If no query selected or dispatch unavailable, return mock response + if (!chatQuery || !dispatch) { + await new Promise((res) => setTimeout(res, 500)); + return { content: "(mock) You typed: " + message }; + } + + try { + const result: any = await getPromiseAfterDispatch( + dispatch, + routeByNameAction( + chatQuery, + executeQueryAction({ + // Send the user prompt as variable named 'prompt' by default + args: { prompt: { value: message } }, + }) + ) + ); + + // 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 }; + } catch (e: any) { + throw new Error(e?.message || "Query execution failed"); + } + } +} + +// ============================================================================ +// MOCK HANDLER (for testing/fallbacks) +// ============================================================================ + +export class MockHandler implements MessageHandler { + constructor(private delay: number = 1000) {} + + async sendMessage(message: string): Promise { + await new Promise(resolve => setTimeout(resolve, this.delay)); + return { content: `Mock response: ${message}` }; + } +} + +// ============================================================================ +// HANDLER FACTORY (creates the right handler based on type) +// ============================================================================ + +export function createMessageHandler( + type: "n8n" | "query" | "mock", + config: N8NHandlerConfig | QueryHandlerConfig +): MessageHandler { + switch (type) { + case "n8n": + return new N8NHandler(config as N8NHandlerConfig); + + case "query": + return new QueryHandler(config as QueryHandlerConfig); + + case "mock": + return new MockHandler(); + + default: + throw new Error(`Unknown message handler type: ${type}`); + } +} \ No newline at end of file diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/types/chatTypes.ts b/client/packages/lowcoder/src/comps/comps/chatComp/types/chatTypes.ts new file mode 100644 index 000000000..f820d55ee --- /dev/null +++ b/client/packages/lowcoder/src/comps/comps/chatComp/types/chatTypes.ts @@ -0,0 +1,86 @@ +// client/packages/lowcoder/src/comps/comps/chatComp/types/chatTypes.ts + +// ============================================================================ +// CORE MESSAGE AND THREAD TYPES (cleaned up from your existing types) +// ============================================================================ + +export interface ChatMessage { + id: string; + role: "user" | "assistant"; + text: string; + timestamp: number; + } + + export interface ChatThread { + threadId: string; + status: "regular" | "archived"; + title: string; + createdAt: number; + updatedAt: number; + } + + // ============================================================================ + // STORAGE INTERFACE (abstracted from your existing storage factory) + // ============================================================================ + + export interface ChatStorage { + initialize(): Promise; + saveThread(thread: ChatThread): Promise; + getThread(threadId: string): Promise; + getAllThreads(): Promise; + deleteThread(threadId: string): Promise; + saveMessage(message: ChatMessage, threadId: string): Promise; + saveMessages(messages: ChatMessage[], threadId: string): Promise; + getMessages(threadId: string): Promise; + deleteMessages(threadId: string): Promise; + clearAllData(): Promise; + resetDatabase(): Promise; + } + + // ============================================================================ + // MESSAGE HANDLER INTERFACE (new clean abstraction) + // ============================================================================ + + export interface MessageHandler { + sendMessage(message: string): Promise; + // Future: sendMessageStream?(message: string): AsyncGenerator; + } + + export interface MessageResponse { + content: string; + metadata?: any; + } + + // ============================================================================ + // CONFIGURATION TYPES (simplified) + // ============================================================================ + + export interface N8NHandlerConfig { + modelHost: string; + systemPrompt?: string; + streaming?: boolean; + } + + export interface QueryHandlerConfig { + chatQuery: string; + dispatch: any; + streaming?: boolean; + } + + // ============================================================================ + // COMPONENT PROPS (what each component actually needs) + // ============================================================================ + + export interface ChatCoreProps { + storage: ChatStorage; + messageHandler: MessageHandler; + onMessageUpdate?: (message: string) => void; + } + + export interface ChatPanelProps { + tableName: string; + modelHost: string; + systemPrompt?: string; + streaming?: boolean; + onMessageUpdate?: (message: string) => void; + } \ No newline at end of file diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/utils/chatStorage.ts b/client/packages/lowcoder/src/comps/comps/chatComp/utils/chatStorage.ts deleted file mode 100644 index edc68a0d9..000000000 --- a/client/packages/lowcoder/src/comps/comps/chatComp/utils/chatStorage.ts +++ /dev/null @@ -1,281 +0,0 @@ -import alasql from "alasql"; -import { MyMessage } from "../components/context/ChatContext"; - -// Database configuration -const DB_NAME = "ChatDB"; -const THREADS_TABLE = "threads"; -const MESSAGES_TABLE = "messages"; - -// Thread data interface -export interface ThreadData { - threadId: string; - status: "regular" | "archived"; - title: string; - createdAt: number; - updatedAt: number; -} - -// Initialize the database -class ChatStorage { - private initialized = false; - - async initialize() { - if (this.initialized) return; - - try { - // Create database with localStorage backend - await alasql.promise(`CREATE LOCALSTORAGE DATABASE IF NOT EXISTS ${DB_NAME}`); - await alasql.promise(`ATTACH LOCALSTORAGE DATABASE ${DB_NAME}`); - await alasql.promise(`USE ${DB_NAME}`); - - // Create threads table - await alasql.promise(` - CREATE TABLE IF NOT EXISTS ${THREADS_TABLE} ( - threadId STRING PRIMARY KEY, - status STRING, - title STRING, - createdAt NUMBER, - updatedAt NUMBER - ) - `); - - // Create messages table - await alasql.promise(` - CREATE TABLE IF NOT EXISTS ${MESSAGES_TABLE} ( - id STRING PRIMARY KEY, - threadId STRING, - role STRING, - text STRING, - timestamp NUMBER - ) - `); - - this.initialized = true; - console.log("Chat database initialized successfully"); - } catch (error) { - console.error("Failed to initialize chat database:", error); - throw error; - } - } - - // Thread operations - async saveThread(thread: ThreadData): Promise { - await this.initialize(); - - try { - // Insert or replace thread - await alasql.promise(` - DELETE FROM ${THREADS_TABLE} WHERE threadId = ? - `, [thread.threadId]); - - await alasql.promise(` - INSERT INTO ${THREADS_TABLE} VALUES (?, ?, ?, ?, ?) - `, [thread.threadId, thread.status, thread.title, thread.createdAt, thread.updatedAt]); - } catch (error) { - console.error("Failed to save thread:", error); - throw error; - } - } - - async getThread(threadId: string): Promise { - await this.initialize(); - - try { - const result = await alasql.promise(` - SELECT * FROM ${THREADS_TABLE} WHERE threadId = ? - `, [threadId]) as ThreadData[]; - - return result && result.length > 0 ? result[0] : null; - } catch (error) { - console.error("Failed to get thread:", error); - return null; - } - } - - async getAllThreads(): Promise { - await this.initialize(); - - try { - const result = await alasql.promise(` - SELECT * FROM ${THREADS_TABLE} ORDER BY updatedAt DESC - `) as ThreadData[]; - - return Array.isArray(result) ? result : []; - } catch (error) { - console.error("Failed to get threads:", error); - return []; - } - } - - async deleteThread(threadId: string): Promise { - await this.initialize(); - - try { - // Delete thread and all its messages - await alasql.promise(`DELETE FROM ${THREADS_TABLE} WHERE threadId = ?`, [threadId]); - await alasql.promise(`DELETE FROM ${MESSAGES_TABLE} WHERE threadId = ?`, [threadId]); - } catch (error) { - console.error("Failed to delete thread:", error); - throw error; - } - } - - // Message operations - async saveMessage(message: MyMessage, threadId: string): Promise { - await this.initialize(); - - try { - // Insert or replace message - await alasql.promise(` - DELETE FROM ${MESSAGES_TABLE} WHERE id = ? - `, [message.id]); - - await alasql.promise(` - INSERT INTO ${MESSAGES_TABLE} VALUES (?, ?, ?, ?, ?) - `, [message.id, threadId, message.role, message.text, message.timestamp]); - } catch (error) { - console.error("Failed to save message:", error); - throw error; - } - } - - async saveMessages(messages: MyMessage[], threadId: string): Promise { - await this.initialize(); - - try { - // Delete existing messages for this thread - await alasql.promise(`DELETE FROM ${MESSAGES_TABLE} WHERE threadId = ?`, [threadId]); - - // Insert all messages - for (const message of messages) { - await alasql.promise(` - INSERT INTO ${MESSAGES_TABLE} VALUES (?, ?, ?, ?, ?) - `, [message.id, threadId, message.role, message.text, message.timestamp]); - } - } catch (error) { - console.error("Failed to save messages:", error); - throw error; - } - } - - async getMessages(threadId: string): Promise { - await this.initialize(); - - try { - const result = await alasql.promise(` - SELECT id, role, text, timestamp FROM ${MESSAGES_TABLE} - WHERE threadId = ? ORDER BY timestamp ASC - `, [threadId]) as MyMessage[]; - - return Array.isArray(result) ? result : []; - } catch (error) { - console.error("Failed to get messages:", error); - return []; - } - } - - async deleteMessages(threadId: string): Promise { - await this.initialize(); - - try { - await alasql.promise(`DELETE FROM ${MESSAGES_TABLE} WHERE threadId = ?`, [threadId]); - } catch (error) { - console.error("Failed to delete messages:", error); - throw error; - } - } - - // Utility methods - async clearAllData(): Promise { - await this.initialize(); - - try { - await alasql.promise(`DELETE FROM ${THREADS_TABLE}`); - await alasql.promise(`DELETE FROM ${MESSAGES_TABLE}`); - } catch (error) { - console.error("Failed to clear all data:", error); - throw error; - } - } - - async resetDatabase(): Promise { - try { - // Drop the entire database - await alasql.promise(`DROP LOCALSTORAGE DATABASE IF EXISTS ${DB_NAME}`); - this.initialized = false; - - // Reinitialize fresh - await this.initialize(); - console.log("✅ Database reset and reinitialized"); - } catch (error) { - console.error("Failed to reset database:", error); - throw error; - } - } - - async clearOnlyMessages(): Promise { - await this.initialize(); - - try { - await alasql.promise(`DELETE FROM ${MESSAGES_TABLE}`); - console.log("✅ All messages cleared, threads preserved"); - } catch (error) { - console.error("Failed to clear messages:", error); - throw error; - } - } - - async clearOnlyThreads(): Promise { - await this.initialize(); - - try { - await alasql.promise(`DELETE FROM ${THREADS_TABLE}`); - await alasql.promise(`DELETE FROM ${MESSAGES_TABLE}`); // Clear orphaned messages - console.log("✅ All threads and messages cleared"); - } catch (error) { - console.error("Failed to clear threads:", error); - throw error; - } - } - - async exportData(): Promise<{ threads: ThreadData[]; messages: any[] }> { - await this.initialize(); - - try { - const threads = await this.getAllThreads(); - const messages = await alasql.promise(`SELECT * FROM ${MESSAGES_TABLE}`) as any[]; - - return { threads, messages: Array.isArray(messages) ? messages : [] }; - } catch (error) { - console.error("Failed to export data:", error); - throw error; - } - } - - async importData(data: { threads: ThreadData[]; messages: any[] }): Promise { - await this.initialize(); - - try { - // Clear existing data - await this.clearAllData(); - - // Import threads - for (const thread of data.threads) { - await this.saveThread(thread); - } - - // Import messages - for (const message of data.messages) { - await alasql.promise(` - INSERT INTO ${MESSAGES_TABLE} VALUES (?, ?, ?, ?, ?) - `, [message.id, message.threadId, message.role, message.text, message.timestamp]); - } - } catch (error) { - console.error("Failed to import data:", error); - throw error; - } - } -} - -// Export singleton instance -export const chatStorage = new ChatStorage(); \ No newline at end of file diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/utils/responseFactory.ts b/client/packages/lowcoder/src/comps/comps/chatComp/utils/responseFactory.ts deleted file mode 100644 index 91d479335..000000000 --- a/client/packages/lowcoder/src/comps/comps/chatComp/utils/responseFactory.ts +++ /dev/null @@ -1,27 +0,0 @@ -// client/packages/lowcoder/src/comps/comps/chatComp/utils/responseFactory.ts -import { - queryResponseHandler, - directApiResponseHandler, - mockResponseHandler - } from './responseHandlers'; - - export const createResponseHandler = (type: string, config: any) => { - const sendMessage = async (message: string) => { - switch (type) { - case "query": - return await queryResponseHandler(message, config); - - case "direct-api": - case "n8n": - return await directApiResponseHandler(message, config); - - case "mock": - return await mockResponseHandler(message, config); - - default: - throw new Error(`Unknown response type: ${type}`); - } - }; - - return { sendMessage }; - }; \ No newline at end of file diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/utils/responseHandlers.ts b/client/packages/lowcoder/src/comps/comps/chatComp/utils/responseHandlers.ts deleted file mode 100644 index ae384660c..000000000 --- a/client/packages/lowcoder/src/comps/comps/chatComp/utils/responseHandlers.ts +++ /dev/null @@ -1,99 +0,0 @@ -// client/packages/lowcoder/src/comps/comps/chatComp/utils/responseHandlers.ts -import { CompAction, routeByNameAction, executeQueryAction } from "lowcoder-core"; -import { getPromiseAfterDispatch } from "util/promiseUtils"; - -// Query response handler (your current logic) -export const queryResponseHandler = async ( - message: string, - config: { chatQuery: string; dispatch?: (action: CompAction) => void } -) => { - const { chatQuery, dispatch } = config; - - // If no query selected or dispatch unavailable, fallback with mock response - if (!chatQuery || !dispatch) { - await new Promise((res) => setTimeout(res, 500)); - return { content: "(mock) You typed: " + message }; - } - - try { - const result: any = await getPromiseAfterDispatch( - dispatch, - routeByNameAction( - chatQuery, - executeQueryAction({ - // Send the user prompt as variable named 'prompt' by default - args: { prompt: { value: message } }, - }) - ) - ); - - // Extract reply text from the query result - let reply: string; - if (typeof result === "string") { - reply = result; - } else if (result && typeof result === "object") { - reply = - (result as any).response ?? - (result as any).message ?? - (result as any).content ?? - JSON.stringify(result); - } else { - reply = String(result); - } - - return { content: reply }; - } catch (e: any) { - throw new Error(e?.message || "Query execution failed"); - } -}; - -// Direct API response handler (for bottom panel usage) -export const directApiResponseHandler = async ( - message: string, - config: { modelHost: string; systemPrompt: string; streaming?: boolean } -) => { - const { modelHost, systemPrompt, streaming } = config; - - if (!modelHost) { - throw new Error("Model host is required for direct API calls"); - } - - try { - const response = await fetch(modelHost, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ - message, - systemPrompt: systemPrompt || "You are a helpful assistant.", - streaming: streaming || false - }) - }); - - if (!response.ok) { - throw new Error(`API call failed: ${response.status} ${response.statusText}`); - } - - const data = await response.json(); - - // Extract content from various possible response formats - const content = data.response || data.message || data.content || data.text || String(data); - - return { content }; - } catch (error) { - throw new Error(`Direct API call failed: ${error instanceof Error ? error.message : 'Unknown error'}`); - } -}; - -// Mock response handler (for testing) -export const mockResponseHandler = async ( - message: string, - config: { delay?: number; prefix?: string } -) => { - const { delay = 1000, prefix = "Mock response" } = config; - - await new Promise(resolve => setTimeout(resolve, delay)); - - return { content: `${prefix}: ${message}` }; -}; \ No newline at end of file diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/utils/chatStorageFactory.ts b/client/packages/lowcoder/src/comps/comps/chatComp/utils/storageFactory.ts similarity index 81% rename from client/packages/lowcoder/src/comps/comps/chatComp/utils/chatStorageFactory.ts rename to client/packages/lowcoder/src/comps/comps/chatComp/utils/storageFactory.ts index e7f44a26c..8e62e4274 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/utils/chatStorageFactory.ts +++ b/client/packages/lowcoder/src/comps/comps/chatComp/utils/storageFactory.ts @@ -1,189 +1,181 @@ -// client/packages/lowcoder/src/comps/comps/chatComp/utils/chatStorageFactory.ts -import alasql from "alasql"; -import { MyMessage } from "../components/context/ChatContext"; - -// Thread data interface -export interface ThreadData { - threadId: string; - status: "regular" | "archived"; - title: string; - createdAt: number; - updatedAt: number; -} - -export const createChatStorage = (tableName: string) => { - const dbName = `ChatDB_${tableName}`; - const threadsTable = `${tableName}_threads`; - const messagesTable = `${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(` - CREATE TABLE IF NOT EXISTS ${threadsTable} ( - threadId STRING PRIMARY KEY, - status STRING, - title STRING, - createdAt NUMBER, - updatedAt NUMBER - ) - `); - - // Create messages table - await alasql.promise(` - CREATE TABLE IF NOT EXISTS ${messagesTable} ( - id STRING PRIMARY KEY, - threadId STRING, - role STRING, - text STRING, - timestamp NUMBER - ) - `); - - console.log(`✅ Chat database initialized: ${dbName}`); - } catch (error) { - console.error(`Failed to initialize chat database ${dbName}:`, error); - throw error; - } - }, - - async saveThread(thread: ThreadData) { - try { - // Insert or replace thread - await alasql.promise(` - DELETE FROM ${threadsTable} WHERE threadId = ? - `, [thread.threadId]); - - await alasql.promise(` - INSERT INTO ${threadsTable} VALUES (?, ?, ?, ?, ?) - `, [thread.threadId, thread.status, thread.title, thread.createdAt, thread.updatedAt]); - } catch (error) { - console.error("Failed to save thread:", error); - throw error; - } - }, - - async getThread(threadId: string) { - try { - const result = await alasql.promise(` - SELECT * FROM ${threadsTable} WHERE threadId = ? - `, [threadId]) as ThreadData[]; - - return result && result.length > 0 ? result[0] : null; - } catch (error) { - console.error("Failed to get thread:", error); - return null; - } - }, - - async getAllThreads() { - try { - const result = await alasql.promise(` - SELECT * FROM ${threadsTable} ORDER BY updatedAt DESC - `) as ThreadData[]; - - return Array.isArray(result) ? result : []; - } catch (error) { - console.error("Failed to get threads:", error); - return []; - } - }, - - async deleteThread(threadId: string) { - try { - // Delete thread and all its messages - await alasql.promise(`DELETE FROM ${threadsTable} WHERE threadId = ?`, [threadId]); - await alasql.promise(`DELETE FROM ${messagesTable} WHERE threadId = ?`, [threadId]); - } catch (error) { - console.error("Failed to delete thread:", error); - throw error; - } - }, - - async saveMessage(message: MyMessage, threadId: string) { - try { - // Insert or replace message - await alasql.promise(` - DELETE FROM ${messagesTable} WHERE id = ? - `, [message.id]); - - await alasql.promise(` - INSERT INTO ${messagesTable} VALUES (?, ?, ?, ?, ?) - `, [message.id, threadId, message.role, message.text, message.timestamp]); - } catch (error) { - console.error("Failed to save message:", error); - throw error; - } - }, - - async saveMessages(messages: MyMessage[], threadId: string) { - try { - // Delete existing messages for this thread - await alasql.promise(`DELETE FROM ${messagesTable} WHERE threadId = ?`, [threadId]); - - // Insert all messages - for (const message of messages) { - await alasql.promise(` - INSERT INTO ${messagesTable} VALUES (?, ?, ?, ?, ?) - `, [message.id, threadId, message.role, message.text, message.timestamp]); - } - } catch (error) { - console.error("Failed to save messages:", error); - throw error; - } - }, - - async getMessages(threadId: string) { - try { - const result = await alasql.promise(` - SELECT id, role, text, timestamp FROM ${messagesTable} - WHERE threadId = ? ORDER BY timestamp ASC - `, [threadId]) as MyMessage[]; - - return Array.isArray(result) ? result : []; - } catch (error) { - console.error("Failed to get messages:", error); - return []; - } - }, - - async deleteMessages(threadId: string) { - try { - await alasql.promise(`DELETE FROM ${messagesTable} WHERE threadId = ?`, [threadId]); - } catch (error) { - console.error("Failed to delete messages:", error); - throw error; - } - }, - - async clearAllData() { - try { - await alasql.promise(`DELETE FROM ${threadsTable}`); - await alasql.promise(`DELETE FROM ${messagesTable}`); - } catch (error) { - console.error("Failed to clear all data:", error); - throw error; - } - }, - - async resetDatabase() { - try { - // Drop the entire database - await alasql.promise(`DROP LOCALSTORAGE DATABASE IF EXISTS ${dbName}`); - - // Reinitialize fresh - await this.initialize(); - console.log(`✅ Database reset and reinitialized: ${dbName}`); - } catch (error) { - console.error("Failed to reset database:", error); - throw error; - } - } - }; -}; \ No newline at end of file +// client/packages/lowcoder/src/comps/comps/chatComp/utils/storageFactory.ts + +import alasql from "alasql"; +import { ChatMessage, ChatThread, ChatStorage } from "../types/chatTypes"; + +// ============================================================================ +// CLEAN STORAGE FACTORY (simplified from your existing implementation) +// ============================================================================ + +export function createChatStorage(tableName: string): ChatStorage { + const dbName = `ChatDB_${tableName}`; + const threadsTable = `${tableName}_threads`; + const messagesTable = `${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(` + CREATE TABLE IF NOT EXISTS ${threadsTable} ( + threadId STRING PRIMARY KEY, + status STRING, + title STRING, + createdAt NUMBER, + updatedAt NUMBER + ) + `); + + // Create messages table + await alasql.promise(` + CREATE TABLE IF NOT EXISTS ${messagesTable} ( + id STRING PRIMARY KEY, + threadId STRING, + role STRING, + text STRING, + timestamp NUMBER + ) + `); + + console.log(`✅ Chat database initialized: ${dbName}`); + } catch (error) { + console.error(`Failed to initialize chat database ${dbName}:`, error); + throw error; + } + }, + + async saveThread(thread: ChatThread) { + try { + // Insert or replace thread + await alasql.promise(`DELETE FROM ${threadsTable} WHERE threadId = ?`, [thread.threadId]); + + await alasql.promise(` + INSERT INTO ${threadsTable} VALUES (?, ?, ?, ?, ?) + `, [thread.threadId, thread.status, thread.title, thread.createdAt, thread.updatedAt]); + } catch (error) { + console.error("Failed to save thread:", error); + throw error; + } + }, + + async getThread(threadId: string) { + try { + const result = await alasql.promise(` + SELECT * FROM ${threadsTable} WHERE threadId = ? + `, [threadId]) as ChatThread[]; + + return result && result.length > 0 ? result[0] : null; + } catch (error) { + console.error("Failed to get thread:", error); + return null; + } + }, + + async getAllThreads() { + try { + const result = await alasql.promise(` + SELECT * FROM ${threadsTable} ORDER BY updatedAt DESC + `) as ChatThread[]; + + return Array.isArray(result) ? result : []; + } catch (error) { + console.error("Failed to get threads:", error); + return []; + } + }, + + async deleteThread(threadId: string) { + try { + // Delete thread and all its messages + await alasql.promise(`DELETE FROM ${threadsTable} WHERE threadId = ?`, [threadId]); + await alasql.promise(`DELETE FROM ${messagesTable} WHERE threadId = ?`, [threadId]); + } catch (error) { + console.error("Failed to delete thread:", error); + throw error; + } + }, + + async saveMessage(message: ChatMessage, threadId: string) { + try { + // Insert or replace message + await alasql.promise(`DELETE FROM ${messagesTable} WHERE id = ?`, [message.id]); + + await alasql.promise(` + INSERT INTO ${messagesTable} VALUES (?, ?, ?, ?, ?) + `, [message.id, threadId, message.role, message.text, message.timestamp]); + } catch (error) { + console.error("Failed to save message:", error); + throw error; + } + }, + + async saveMessages(messages: ChatMessage[], threadId: string) { + try { + // Delete existing messages for this thread + await alasql.promise(`DELETE FROM ${messagesTable} WHERE threadId = ?`, [threadId]); + + // Insert all messages + for (const message of messages) { + await alasql.promise(` + INSERT INTO ${messagesTable} VALUES (?, ?, ?, ?, ?) + `, [message.id, threadId, message.role, message.text, message.timestamp]); + } + } catch (error) { + console.error("Failed to save messages:", error); + throw error; + } + }, + + async getMessages(threadId: string) { + try { + const result = await alasql.promise(` + SELECT id, role, text, timestamp FROM ${messagesTable} + WHERE threadId = ? ORDER BY timestamp ASC + `, [threadId]) as ChatMessage[]; + + return Array.isArray(result) ? result : []; + } catch (error) { + console.error("Failed to get messages:", error); + return []; + } + }, + + async deleteMessages(threadId: string) { + try { + await alasql.promise(`DELETE FROM ${messagesTable} WHERE threadId = ?`, [threadId]); + } catch (error) { + console.error("Failed to delete messages:", error); + throw error; + } + }, + + async clearAllData() { + try { + await alasql.promise(`DELETE FROM ${threadsTable}`); + await alasql.promise(`DELETE FROM ${messagesTable}`); + } catch (error) { + console.error("Failed to clear all data:", error); + throw error; + } + }, + + async resetDatabase() { + try { + // Drop the entire database + await alasql.promise(`DROP LOCALSTORAGE DATABASE IF EXISTS ${dbName}`); + + // Reinitialize fresh + await this.initialize(); + console.log(`✅ Database reset and reinitialized: ${dbName}`); + } catch (error) { + console.error("Failed to reset database:", error); + throw error; + } + } + }; +} \ No newline at end of file diff --git a/client/packages/lowcoder/src/pages/editor/bottom/BottomPanel.tsx b/client/packages/lowcoder/src/pages/editor/bottom/BottomPanel.tsx index 8903ef237..0ca02f6b2 100644 --- a/client/packages/lowcoder/src/pages/editor/bottom/BottomPanel.tsx +++ b/client/packages/lowcoder/src/pages/editor/bottom/BottomPanel.tsx @@ -1,149 +1,149 @@ -import { BottomContent } from "pages/editor/bottom/BottomContent"; -import { ResizableBox, ResizeCallbackData } from "react-resizable"; -import styled from "styled-components"; -import * as React from "react"; -import { useMemo, useState } from "react"; -import { getPanelStyle, savePanelStyle } from "util/localStorageUtil"; -import { BottomResultPanel } from "../../../components/resultPanel/BottomResultPanel"; -import { AppState } from "../../../redux/reducers"; -import { getUser } from "../../../redux/selectors/usersSelectors"; -import { connect } from "react-redux"; -import { Layers } from "constants/Layers"; -import Flex from "antd/es/flex"; -import type { MenuProps } from 'antd/es/menu'; -import { BuildOutlined, DatabaseOutlined } from "@ant-design/icons"; -import Menu from "antd/es/menu/menu"; -import { ChatView } from "@lowcoder-ee/comps/comps/chatComp/chatView"; -import { AIGenerate } from "lowcoder-design"; - -type MenuItem = Required['items'][number]; - -const StyledResizableBox = styled(ResizableBox)` - position: relative; - box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); - border-top: 1px solid #e1e3eb; - z-index: ${Layers.bottomPanel}; - - .react-resizable-handle { - position: absolute; - border-top: transparent solid 3px; - width: 100%; - padding: 0 3px 3px 0; - top: 0; - cursor: row-resize; - } -`; - -const StyledMenu = styled(Menu)` - width: 40px; - padding: 6px 0; - - .ant-menu-item { - height: 30px; - line-height: 30px; - } -`; - -const ChatHeader = styled.div` - flex: 0 0 35px; - padding: 0 16px; - display: flex; - align-items: center; - justify-content: space-between; - border-bottom: 1px solid #e1e3eb; - background: #fafafa; -`; -const ChatTitle = styled.h3` - margin: 0; - font-size: 14px; - font-weight: 500; - color: #222222; -`; - -const preventDefault = (e: any) => { - e.preventDefault(); -}; - -// prevent the editor window slide when resize -const addListener = () => { - window.addEventListener("mousedown", preventDefault); -}; - -const removeListener = () => { - window.removeEventListener("mousedown", preventDefault); -}; - -function Bottom(props: any) { - const panelStyle = useMemo(() => getPanelStyle(), []); - const clientHeight = document.documentElement.clientHeight; - const resizeStop = (e: React.SyntheticEvent, data: ResizeCallbackData) => { - savePanelStyle({ ...panelStyle, bottom: { h: data.size.height } }); - setBottomHeight(data.size.height); - removeListener(); - }; - - const [bottomHeight, setBottomHeight] = useState(panelStyle.bottom.h); - const [currentOption, setCurrentOption] = useState("data"); - - const items: MenuItem[] = [ - { key: 'data', icon: , label: 'Data Queries' }, - { key: 'ai', icon: , label: 'Lowcoder AI' }, - ]; - - return ( - <> - - - - { - setCurrentOption(key); - }} - /> - { currentOption === "data" && } - { currentOption === "ai" && ( - - - Lowcoder AI Assistant - - - - )} - - - - ); -} - -const mapStateToProps = (state: AppState) => { - return { - orgId: getUser(state).currentOrgId, - datasourceInfos: state.entities.datasource.data, - }; -}; - -export default connect(mapStateToProps, null)(Bottom); +import { BottomContent } from "pages/editor/bottom/BottomContent"; +import { ResizableBox, ResizeCallbackData } from "react-resizable"; +import styled from "styled-components"; +import * as React from "react"; +import { useMemo, useState } from "react"; +import { getPanelStyle, savePanelStyle } from "util/localStorageUtil"; +import { BottomResultPanel } from "../../../components/resultPanel/BottomResultPanel"; +import { AppState } from "../../../redux/reducers"; +import { getUser } from "../../../redux/selectors/usersSelectors"; +import { connect } from "react-redux"; +import { Layers } from "constants/Layers"; +import Flex from "antd/es/flex"; +import type { MenuProps } from 'antd/es/menu'; +import { BuildOutlined, DatabaseOutlined } from "@ant-design/icons"; +import Menu from "antd/es/menu/menu"; +import { AIGenerate } from "lowcoder-design"; +import { ChatPanel } from "@lowcoder-ee/comps/comps/chatComp/components/ChatPanel"; + +type MenuItem = Required['items'][number]; + +const StyledResizableBox = styled(ResizableBox)` + position: relative; + box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); + border-top: 1px solid #e1e3eb; + z-index: ${Layers.bottomPanel}; + + .react-resizable-handle { + position: absolute; + border-top: transparent solid 3px; + width: 100%; + padding: 0 3px 3px 0; + top: 0; + cursor: row-resize; + } +`; + +const StyledMenu = styled(Menu)` + width: 40px; + padding: 6px 0; + + .ant-menu-item { + height: 30px; + line-height: 30px; + } +`; + +const ChatHeader = styled.div` + flex: 0 0 35px; + padding: 0 16px; + display: flex; + align-items: center; + justify-content: space-between; + border-bottom: 1px solid #e1e3eb; + background: #fafafa; +`; +const ChatTitle = styled.h3` + margin: 0; + font-size: 14px; + font-weight: 500; + color: #222222; +`; + +const preventDefault = (e: any) => { + e.preventDefault(); +}; + +// prevent the editor window slide when resize +const addListener = () => { + window.addEventListener("mousedown", preventDefault); +}; + +const removeListener = () => { + window.removeEventListener("mousedown", preventDefault); +}; + +function Bottom(props: any) { + const panelStyle = useMemo(() => getPanelStyle(), []); + const clientHeight = document.documentElement.clientHeight; + const resizeStop = (e: React.SyntheticEvent, data: ResizeCallbackData) => { + savePanelStyle({ ...panelStyle, bottom: { h: data.size.height } }); + setBottomHeight(data.size.height); + removeListener(); + }; + + const [bottomHeight, setBottomHeight] = useState(panelStyle.bottom.h); + const [currentOption, setCurrentOption] = useState("data"); + + const items: MenuItem[] = [ + { key: 'data', icon: , label: 'Data Queries' }, + { key: 'ai', icon: , label: 'Lowcoder AI' }, + ]; + + return ( + <> + + + + { + setCurrentOption(key); + }} + /> + { currentOption === "data" && } + { currentOption === "ai" && ( + + + Lowcoder AI Assistant + + {/* */} + + + )} + + + + ); +} + +const mapStateToProps = (state: AppState) => { + return { + orgId: getUser(state).currentOrgId, + datasourceInfos: state.entities.datasource.data, + }; +}; + +export default connect(mapStateToProps, null)(Bottom); From a349af4b4a9e1d22b623a76d2cb31b3be984125f Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Fri, 11 Jul 2025 23:59:16 +0500 Subject: [PATCH 08/17] add unique storage / expose convo history --- .../src/comps/comps/chatComp/chatComp.tsx | 66 ++- .../comps/comps/chatComp/chatPropertyView.tsx | 10 +- .../comps/chatComp/components/ChatCore.tsx | 3 +- .../chatComp/components/ChatCoreMain.tsx | 503 +++++++++--------- .../chatComp/handlers/messageHandlers.ts | 16 +- .../comps/comps/chatComp/types/chatTypes.ts | 2 + .../comps/chatComp/utils/storageFactory.ts | 13 +- 7 files changed, 336 insertions(+), 277 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/chatComp.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/chatComp.tsx index ac32527bf..59e93b4bf 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/chatComp.tsx +++ b/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,6 +22,10 @@ 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" }, @@ -29,8 +33,8 @@ const ModelTypeOptions = [ 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(); + + // 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 ( ); } @@ -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"), ]); \ No newline at end of file diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/chatPropertyView.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/chatPropertyView.tsx index 784ef44b5..9e7cac4ab 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/chatPropertyView.tsx +++ b/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 })} + {/* Message Handler Configuration */} diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCore.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCore.tsx index c40151dd5..d153a53d2 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCore.tsx +++ b/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 ( ); diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCoreMain.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCoreMain.tsx index 1459d00e5..4c804e49d 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCoreMain.tsx +++ b/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCoreMain.tsx @@ -1,246 +1,257 @@ -// client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCoreMain.tsx - -import React, { useState } from "react"; -import { - useExternalStoreRuntime, - ThreadMessageLike, - AppendMessage, - AssistantRuntimeProvider, - ExternalStoreThreadListAdapter, -} from "@assistant-ui/react"; -import { Thread } from "./assistant-ui/thread"; -import { ThreadList } from "./assistant-ui/thread-list"; -import { - useChatContext, - ChatMessage, - RegularThreadData, - ArchivedThreadData -} from "./context/ChatContext"; -import { MessageHandler } from "../types/chatTypes"; -import styled from "styled-components"; - -// ============================================================================ -// STYLED COMPONENTS (same as your current ChatMain) -// ============================================================================ - -const ChatContainer = styled.div` - display: flex; - height: 500px; - - p { - margin: 0; - } - - .aui-thread-list-root { - width: 250px; - background-color: #fff; - padding: 10px; - } - - .aui-thread-root { - flex: 1; - background-color: #f9fafb; - } - - .aui-thread-list-item { - cursor: pointer; - transition: background-color 0.2s ease; - - &[data-active="true"] { - background-color: #dbeafe; - border: 1px solid #bfdbfe; - } - } -`; - -// ============================================================================ -// CHAT CORE MAIN - CLEAN PROPS, FOCUSED RESPONSIBILITY -// ============================================================================ - -interface ChatCoreMainProps { - messageHandler: MessageHandler; - onMessageUpdate?: (message: string) => void; -} - -const generateId = () => Math.random().toString(36).substr(2, 9); - -export function ChatCoreMain({ messageHandler, onMessageUpdate }: ChatCoreMainProps) { - const { state, actions } = useChatContext(); - const [isRunning, setIsRunning] = useState(false); - - console.log("CHAT CORE STATE", state); - - // Get messages for current thread - const currentMessages = actions.getCurrentMessages(); - - // Convert custom format to ThreadMessageLike (same as your current implementation) - const convertMessage = (message: ChatMessage): ThreadMessageLike => ({ - role: message.role, - content: [{ type: "text", text: message.text }], - id: message.id, - createdAt: new Date(message.timestamp), - }); - - // Handle new message - MUCH CLEANER with messageHandler - const onNew = async (message: AppendMessage) => { - // Extract text from AppendMessage content array - if (message.content.length !== 1 || message.content[0]?.type !== "text") { - throw new Error("Only text content is supported"); - } - - // Add user message in custom format - const userMessage: ChatMessage = { - id: generateId(), - role: "user", - text: message.content[0].text, - timestamp: Date.now(), - }; - - // Update currentMessage state to expose to queries - onMessageUpdate?.(userMessage.text); - - // Update current thread with new user message - await actions.addMessage(state.currentThreadId, userMessage); - setIsRunning(true); - - try { - // Use the message handler (no more complex logic here!) - const response = await messageHandler.sendMessage(userMessage.text); - - const assistantMessage: ChatMessage = { - id: generateId(), - role: "assistant", - text: response.content, - timestamp: Date.now(), - }; - - // Update current thread with assistant response - await actions.addMessage(state.currentThreadId, assistantMessage); - } catch (error) { - // Handle errors gracefully - const errorMessage: ChatMessage = { - id: generateId(), - role: "assistant", - text: `Sorry, I encountered an error: ${error instanceof Error ? error.message : 'Unknown error'}`, - timestamp: Date.now(), - }; - - await actions.addMessage(state.currentThreadId, errorMessage); - } finally { - setIsRunning(false); - } - }; - - // Handle edit message - CLEANER with messageHandler - const onEdit = async (message: AppendMessage) => { - // Extract text from AppendMessage content array - if (message.content.length !== 1 || message.content[0]?.type !== "text") { - throw new Error("Only text content is supported"); - } - - // Find the index where to insert the edited message - const index = currentMessages.findIndex((m) => m.id === message.parentId) + 1; - - // Keep messages up to the parent - const newMessages = [...currentMessages.slice(0, index)]; - - // Add the edited message in custom format - const editedMessage: ChatMessage = { - id: generateId(), - role: "user", - text: message.content[0].text, - timestamp: Date.now(), - }; - newMessages.push(editedMessage); - - // Update currentMessage state to expose to queries - onMessageUpdate?.(editedMessage.text); - - // Update messages using the new context action - await actions.updateMessages(state.currentThreadId, newMessages); - setIsRunning(true); - - try { - // Use the message handler (clean!) - const response = await messageHandler.sendMessage(editedMessage.text); - - const assistantMessage: ChatMessage = { - id: generateId(), - role: "assistant", - text: response.content, - timestamp: Date.now(), - }; - - newMessages.push(assistantMessage); - await actions.updateMessages(state.currentThreadId, newMessages); - } catch (error) { - // Handle errors gracefully - const errorMessage: ChatMessage = { - id: generateId(), - role: "assistant", - text: `Sorry, I encountered an error: ${error instanceof Error ? error.message : 'Unknown error'}`, - timestamp: Date.now(), - }; - - newMessages.push(errorMessage); - await actions.updateMessages(state.currentThreadId, newMessages); - } finally { - setIsRunning(false); - } - }; - - // Thread list adapter for managing multiple threads (same as your current implementation) - const threadListAdapter: ExternalStoreThreadListAdapter = { - threadId: state.currentThreadId, - threads: state.threadList.filter((t): t is RegularThreadData => t.status === "regular"), - archivedThreads: state.threadList.filter((t): t is ArchivedThreadData => t.status === "archived"), - - onSwitchToNewThread: async () => { - const threadId = await actions.createThread("New Chat"); - actions.setCurrentThread(threadId); - }, - - onSwitchToThread: (threadId) => { - actions.setCurrentThread(threadId); - }, - - onRename: async (threadId, newTitle) => { - await actions.updateThread(threadId, { title: newTitle }); - }, - - onArchive: async (threadId) => { - await actions.updateThread(threadId, { status: "archived" }); - }, - - onDelete: async (threadId) => { - await actions.deleteThread(threadId); - }, - }; - - const runtime = useExternalStoreRuntime({ - messages: currentMessages, - setMessages: (messages) => { - actions.updateMessages(state.currentThreadId, messages); - }, - convertMessage, - isRunning, - onNew, - onEdit, - adapters: { - threadList: threadListAdapter, - }, - }); - - if (!state.isInitialized) { - return
Loading...
; - } - - return ( - - - - - - - ); -} +// client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCoreMain.tsx + +import React, { useState } from "react"; +import { + useExternalStoreRuntime, + ThreadMessageLike, + AppendMessage, + AssistantRuntimeProvider, + ExternalStoreThreadListAdapter, +} from "@assistant-ui/react"; +import { Thread } from "./assistant-ui/thread"; +import { ThreadList } from "./assistant-ui/thread-list"; +import { + useChatContext, + ChatMessage, + RegularThreadData, + ArchivedThreadData +} from "./context/ChatContext"; +import { MessageHandler } from "../types/chatTypes"; +import styled from "styled-components"; + +// ============================================================================ +// STYLED COMPONENTS (same as your current ChatMain) +// ============================================================================ + +const ChatContainer = styled.div` + display: flex; + height: 500px; + + p { + margin: 0; + } + + .aui-thread-list-root { + width: 250px; + background-color: #fff; + padding: 10px; + } + + .aui-thread-root { + flex: 1; + background-color: #f9fafb; + } + + .aui-thread-list-item { + cursor: pointer; + transition: background-color 0.2s ease; + + &[data-active="true"] { + background-color: #dbeafe; + border: 1px solid #bfdbfe; + } + } +`; + +// ============================================================================ +// CHAT CORE MAIN - CLEAN PROPS, FOCUSED RESPONSIBILITY +// ============================================================================ + +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, onConversationUpdate }: ChatCoreMainProps) { + const { state, actions } = useChatContext(); + const [isRunning, setIsRunning] = useState(false); + + console.log("CHAT CORE STATE", state); + + // 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, + content: [{ type: "text", text: message.text }], + id: message.id, + createdAt: new Date(message.timestamp), + }); + + // Handle new message - MUCH CLEANER with messageHandler + const onNew = async (message: AppendMessage) => { + // Extract text from AppendMessage content array + if (message.content.length !== 1 || message.content[0]?.type !== "text") { + throw new Error("Only text content is supported"); + } + + // Add user message in custom format + const userMessage: ChatMessage = { + id: generateId(), + role: "user", + text: message.content[0].text, + timestamp: Date.now(), + }; + + // Update currentMessage state to expose to queries + onMessageUpdate?.(userMessage.text); + + // Update current thread with new user message + await actions.addMessage(state.currentThreadId, userMessage); + setIsRunning(true); + + 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(), + role: "assistant", + text: response.content, + timestamp: Date.now(), + }; + + // Update current thread with assistant response + await actions.addMessage(state.currentThreadId, assistantMessage); + } catch (error) { + // Handle errors gracefully + const errorMessage: ChatMessage = { + id: generateId(), + role: "assistant", + text: `Sorry, I encountered an error: ${error instanceof Error ? error.message : 'Unknown error'}`, + timestamp: Date.now(), + }; + + await actions.addMessage(state.currentThreadId, errorMessage); + } finally { + setIsRunning(false); + } + }; + + // Handle edit message - CLEANER with messageHandler + const onEdit = async (message: AppendMessage) => { + // Extract text from AppendMessage content array + if (message.content.length !== 1 || message.content[0]?.type !== "text") { + throw new Error("Only text content is supported"); + } + + // Find the index where to insert the edited message + const index = currentMessages.findIndex((m) => m.id === message.parentId) + 1; + + // Keep messages up to the parent + const newMessages = [...currentMessages.slice(0, index)]; + + // Add the edited message in custom format + const editedMessage: ChatMessage = { + id: generateId(), + role: "user", + text: message.content[0].text, + timestamp: Date.now(), + }; + newMessages.push(editedMessage); + + // Update currentMessage state to expose to queries + onMessageUpdate?.(editedMessage.text); + + // Update messages using the new context action + await actions.updateMessages(state.currentThreadId, newMessages); + setIsRunning(true); + + try { + // Use the message handler (clean!) + const response = await messageHandler.sendMessage(editedMessage.text); + + const assistantMessage: ChatMessage = { + id: generateId(), + role: "assistant", + text: response.content, + timestamp: Date.now(), + }; + + newMessages.push(assistantMessage); + await actions.updateMessages(state.currentThreadId, newMessages); + } catch (error) { + // Handle errors gracefully + const errorMessage: ChatMessage = { + id: generateId(), + role: "assistant", + text: `Sorry, I encountered an error: ${error instanceof Error ? error.message : 'Unknown error'}`, + timestamp: Date.now(), + }; + + newMessages.push(errorMessage); + await actions.updateMessages(state.currentThreadId, newMessages); + } finally { + setIsRunning(false); + } + }; + + // Thread list adapter for managing multiple threads (same as your current implementation) + const threadListAdapter: ExternalStoreThreadListAdapter = { + threadId: state.currentThreadId, + threads: state.threadList.filter((t): t is RegularThreadData => t.status === "regular"), + archivedThreads: state.threadList.filter((t): t is ArchivedThreadData => t.status === "archived"), + + onSwitchToNewThread: async () => { + const threadId = await actions.createThread("New Chat"); + actions.setCurrentThread(threadId); + }, + + onSwitchToThread: (threadId) => { + actions.setCurrentThread(threadId); + }, + + onRename: async (threadId, newTitle) => { + await actions.updateThread(threadId, { title: newTitle }); + }, + + onArchive: async (threadId) => { + await actions.updateThread(threadId, { status: "archived" }); + }, + + onDelete: async (threadId) => { + await actions.deleteThread(threadId); + }, + }; + + const runtime = useExternalStoreRuntime({ + messages: currentMessages, + setMessages: (messages) => { + actions.updateMessages(state.currentThreadId, messages); + }, + convertMessage, + isRunning, + onNew, + onEdit, + adapters: { + threadList: threadListAdapter, + }, + }); + + if (!state.isInitialized) { + return
Loading...
; + } + + return ( + + + + + + + ); +} diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/handlers/messageHandlers.ts b/client/packages/lowcoder/src/comps/comps/chatComp/handlers/messageHandlers.ts index 14dcf5a71..53287d1cc 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/handlers/messageHandlers.ts +++ b/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"); } diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/types/chatTypes.ts b/client/packages/lowcoder/src/comps/comps/chatComp/types/chatTypes.ts index f820d55ee..caab3e858 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/types/chatTypes.ts +++ b/client/packages/lowcoder/src/comps/comps/chatComp/types/chatTypes.ts @@ -35,6 +35,7 @@ export interface ChatMessage { deleteMessages(threadId: string): Promise; clearAllData(): Promise; resetDatabase(): Promise; + cleanup(): Promise; } // ============================================================================ @@ -75,6 +76,7 @@ export interface ChatMessage { storage: ChatStorage; messageHandler: MessageHandler; onMessageUpdate?: (message: string) => void; + onConversationUpdate?: (conversationHistory: ChatMessage[]) => void; } export interface ChatPanelProps { diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/utils/storageFactory.ts b/client/packages/lowcoder/src/comps/comps/chatComp/utils/storageFactory.ts index 8e62e4274..0ef893c75 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/utils/storageFactory.ts +++ b/client/packages/lowcoder/src/comps/comps/chatComp/utils/storageFactory.ts @@ -9,8 +9,8 @@ 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() { @@ -18,7 +18,6 @@ export function createChatStorage(tableName: string): ChatStorage { // 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; + } } }; } \ No newline at end of file From 5d88dbe0deb34341548ba2cccffd1964ddcfb4d9 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Tue, 15 Jul 2025 00:31:52 +0500 Subject: [PATCH 09/17] add event listeners for the chat component --- .../src/comps/comps/chatComp/chatComp.tsx | 87 ++++++++++++++++--- .../comps/comps/chatComp/chatPropertyView.tsx | 41 +++++---- .../comps/chatComp/components/ChatCore.tsx | 11 ++- .../chatComp/components/ChatCoreMain.tsx | 26 +++++- .../components/assistant-ui/thread.tsx | 12 ++- .../comps/comps/chatComp/types/chatTypes.ts | 3 + 6 files changed, 140 insertions(+), 40 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/chatComp.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/chatComp.tsx index 59e93b4bf..51164c142 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/chatComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/chatComp/chatComp.tsx @@ -8,6 +8,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 { eventHandlerControl, EventConfigType } from "comps/controls/eventHandlerControl"; import { ChatCore } from "./components/ChatCore"; import { ChatPropertyView } from "./chatPropertyView"; import { createChatStorage } from "./utils/storageFactory"; @@ -19,7 +20,58 @@ import "@assistant-ui/styles/index.css"; import "@assistant-ui/styles/markdown.css"; // ============================================================================ -// SIMPLIFIED CHILDREN MAP - ONLY ESSENTIAL PROPS +// CHAT-SPECIFIC EVENTS +// ============================================================================ + +export const componentLoadEvent: EventConfigType = { + label: "Component Load", + value: "componentLoad", + description: "Triggered when the chat component finishes loading - Load existing data from backend", +}; + +export const messageSentEvent: EventConfigType = { + label: "Message Sent", + value: "messageSent", + description: "Triggered when a user sends a message - Auto-save user messages", +}; + +export const messageReceivedEvent: EventConfigType = { + label: "Message Received", + value: "messageReceived", + description: "Triggered when a response is received from the AI - Auto-save AI responses", +}; + +export const threadCreatedEvent: EventConfigType = { + label: "Thread Created", + value: "threadCreated", + description: "Triggered when a new thread is created - Auto-save new threads", +}; + +export const threadUpdatedEvent: EventConfigType = { + label: "Thread Updated", + value: "threadUpdated", + description: "Triggered when a thread is updated - Auto-save thread changes", +}; + +export const threadDeletedEvent: EventConfigType = { + label: "Thread Deleted", + value: "threadDeleted", + description: "Triggered when a thread is deleted - Delete thread from backend", +}; + +const ChatEventOptions = [ + componentLoadEvent, + messageSentEvent, + messageReceivedEvent, + threadCreatedEvent, + threadUpdatedEvent, + threadDeletedEvent, +] as const; + +export const ChatEventHandlerControl = eventHandlerControl(ChatEventOptions); + +// ============================================================================ +// SIMPLIFIED CHILDREN MAP - WITH EVENT HANDLERS // ============================================================================ function generateUniqueTableName(): string { @@ -48,6 +100,9 @@ export const chatChildrenMap = { // Database Information (read-only) databaseName: withDefault(StringControl, ""), + // Event Handlers + onEvent: ChatEventHandlerControl, + // Exposed Variables (not shown in Property View) currentMessage: stringExposingStateControl("currentMessage", ""), conversationHistory: stringExposingStateControl("conversationHistory", "[]"), @@ -119,6 +174,8 @@ const ChatTmpComp = new UICompBuilder( // Handle message updates for exposed variable const handleMessageUpdate = (message: string) => { dispatch(changeChildAction("currentMessage", message, false)); + // Trigger messageSent event + props.onEvent("messageSent"); }; // Handle conversation history updates for exposed variable @@ -130,26 +187,32 @@ const ChatTmpComp = new UICompBuilder( timestamp: msg.timestamp })); dispatch(changeChildAction("conversationHistory", JSON.stringify(formattedHistory), false)); + + // Trigger messageReceived event when bot responds + const lastMessage = conversationHistory[conversationHistory.length - 1]; + if (lastMessage && lastMessage.role === 'assistant') { + props.onEvent("messageReceived"); + } }; - // Cleanup on unmount - useEffect(() => { - console.log("cleanup on unmount"); - return () => { - console.log("cleanup on unmount"); - const tableName = uniqueTableName.current; - if (tableName) { - storage.cleanup(); - } - }; - }, []); + // Cleanup on unmount + useEffect(() => { + return () => { + const tableName = uniqueTableName.current; + if (tableName) { + storage.cleanup(); + } + }; + }, []); return ( ); } diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/chatPropertyView.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/chatPropertyView.tsx index 9e7cac4ab..bfa72bf76 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/chatPropertyView.tsx +++ b/client/packages/lowcoder/src/comps/comps/chatComp/chatPropertyView.tsx @@ -1,7 +1,8 @@ // client/packages/lowcoder/src/comps/comps/chatComp/chatPropertyView.tsx -import React from "react"; +import React, { useMemo } from "react"; import { Section, sectionNames } from "lowcoder-design"; +import { placeholderPropertyView } from "../../utils/propertyUtils"; // ============================================================================ // CLEAN PROPERTY VIEW - FOCUSED ON ESSENTIAL CONFIGURATION @@ -10,24 +11,8 @@ import { Section, sectionNames } from "lowcoder-design"; export const ChatPropertyView = React.memo((props: any) => { const { children } = props; - return ( + return useMemo(() => ( <> - {/* Basic Configuration */} -
- {children.placeholder.propertyView({ - label: "Placeholder Text", - placeholder: "Enter placeholder text..." - })} - - {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 - })} - -
- {/* Message Handler Configuration */}
{children.handlerType.propertyView({ @@ -64,8 +49,26 @@ export const ChatPropertyView = React.memo((props: any) => { })}
+ {/* UI Configuration */} +
+ {placeholderPropertyView(children)} +
+ + {/* Database Information */} +
+ {children.databaseName.propertyView({ + label: "Database Name", + tooltip: "Auto-generated database name for this chat component (read-only)" + })} +
+ + {/* STANDARD EVENT HANDLERS SECTION */} +
+ {children.onEvent.getPropertyView()} +
+ - ); + ), [children]); }); ChatPropertyView.displayName = 'ChatPropertyView'; \ No newline at end of file diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCore.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCore.tsx index d153a53d2..af867b7f5 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCore.tsx +++ b/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCore.tsx @@ -9,13 +9,22 @@ import { ChatCoreProps } from "../types/chatTypes"; // CHAT CORE - THE SHARED FOUNDATION // ============================================================================ -export function ChatCore({ storage, messageHandler, onMessageUpdate, onConversationUpdate }: ChatCoreProps) { +export function ChatCore({ + storage, + messageHandler, + placeholder, + onMessageUpdate, + onConversationUpdate, + onEvent +}: ChatCoreProps) { return ( ); diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCoreMain.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCoreMain.tsx index 4c804e49d..3efa451bb 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCoreMain.tsx +++ b/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCoreMain.tsx @@ -1,6 +1,6 @@ // client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCoreMain.tsx -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import { useExternalStoreRuntime, ThreadMessageLike, @@ -59,13 +59,22 @@ const ChatContainer = styled.div` interface ChatCoreMainProps { messageHandler: MessageHandler; + placeholder?: string; onMessageUpdate?: (message: string) => void; onConversationUpdate?: (conversationHistory: ChatMessage[]) => void; + // STANDARD LOWCODER EVENT PATTERN - SINGLE CALLBACK (OPTIONAL) + onEvent?: (eventName: string) => void; } const generateId = () => Math.random().toString(36).substr(2, 9); -export function ChatCoreMain({ messageHandler, onMessageUpdate, onConversationUpdate }: ChatCoreMainProps) { +export function ChatCoreMain({ + messageHandler, + placeholder, + onMessageUpdate, + onConversationUpdate, + onEvent +}: ChatCoreMainProps) { const { state, actions } = useChatContext(); const [isRunning, setIsRunning] = useState(false); @@ -78,10 +87,15 @@ export function ChatCoreMain({ messageHandler, onMessageUpdate, onConversationUp console.log("CURRENT MESSAGES", currentMessages); // Notify parent component of conversation changes - React.useEffect(() => { + useEffect(() => { onConversationUpdate?.(currentMessages); }, [currentMessages]); + // Trigger component load event on mount + useEffect(() => { + onEvent?.("componentLoad"); + }, [onEvent]); + // Convert custom format to ThreadMessageLike (same as your current implementation) const convertMessage = (message: ChatMessage): ThreadMessageLike => ({ role: message.role, @@ -209,6 +223,7 @@ export function ChatCoreMain({ messageHandler, onMessageUpdate, onConversationUp onSwitchToNewThread: async () => { const threadId = await actions.createThread("New Chat"); actions.setCurrentThread(threadId); + onEvent?.("threadCreated"); }, onSwitchToThread: (threadId) => { @@ -217,14 +232,17 @@ export function ChatCoreMain({ messageHandler, onMessageUpdate, onConversationUp onRename: async (threadId, newTitle) => { await actions.updateThread(threadId, { title: newTitle }); + onEvent?.("threadUpdated"); }, onArchive: async (threadId) => { await actions.updateThread(threadId, { status: "archived" }); + onEvent?.("threadUpdated"); }, onDelete: async (threadId) => { await actions.deleteThread(threadId); + onEvent?.("threadDeleted"); }, }; @@ -250,7 +268,7 @@ export function ChatCoreMain({ messageHandler, onMessageUpdate, onConversationUp - + ); diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/components/assistant-ui/thread.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/components/assistant-ui/thread.tsx index ae3749fb7..d7c27a07f 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/components/assistant-ui/thread.tsx +++ b/client/packages/lowcoder/src/comps/comps/chatComp/components/assistant-ui/thread.tsx @@ -22,7 +22,11 @@ import { import { MarkdownText } from "./markdown-text"; import { TooltipIconButton } from "./tooltip-icon-button"; - export const Thread: FC = () => { + interface ThreadProps { + placeholder?: string; + } + + export const Thread: FC = ({ placeholder = "Write a message..." }) => { return ( - + @@ -110,13 +114,13 @@ import { ); }; - const Composer: FC = () => { + const Composer: FC<{ placeholder?: string }> = ({ placeholder = "Write a message..." }) => { return ( diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/types/chatTypes.ts b/client/packages/lowcoder/src/comps/comps/chatComp/types/chatTypes.ts index caab3e858..7efb658d4 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/types/chatTypes.ts +++ b/client/packages/lowcoder/src/comps/comps/chatComp/types/chatTypes.ts @@ -75,8 +75,11 @@ export interface ChatMessage { export interface ChatCoreProps { storage: ChatStorage; messageHandler: MessageHandler; + placeholder?: string; onMessageUpdate?: (message: string) => void; onConversationUpdate?: (conversationHistory: ChatMessage[]) => void; + // STANDARD LOWCODER EVENT PATTERN - SINGLE CALLBACK + onEvent?: (eventName: string) => void; } export interface ChatPanelProps { From ac38c66b242f0451f63f5d107855de382ff42f96 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Tue, 15 Jul 2025 22:38:35 +0500 Subject: [PATCH 10/17] add system prompt and improve edit UI --- .../src/comps/comps/chatComp/chatComp.tsx | 64 +++++++++----- .../chatComp/components/ChatCoreMain.tsx | 1 + .../components/assistant-ui/thread-list.tsx | 85 +++++++++++++------ .../chatComp/handlers/messageHandlers.ts | 11 ++- .../comps/comps/chatComp/types/chatTypes.ts | 1 + 5 files changed, 113 insertions(+), 49 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/chatComp.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/chatComp.tsx index 51164c142..eb227b23f 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/chatComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/chatComp/chatComp.tsx @@ -15,6 +15,7 @@ import { createChatStorage } from "./utils/storageFactory"; import { QueryHandler, createMessageHandler } from "./handlers/messageHandlers"; import { useMemo, useRef, useEffect } from "react"; import { changeChildAction } from "lowcoder-core"; +import { ChatMessage } from "./types/chatTypes"; import "@assistant-ui/styles/index.css"; import "@assistant-ui/styles/markdown.css"; @@ -74,6 +75,30 @@ export const ChatEventHandlerControl = eventHandlerControl(ChatEventOptions); // SIMPLIFIED CHILDREN MAP - WITH EVENT HANDLERS // ============================================================================ + +export function addSystemPromptToHistory( + conversationHistory: ChatMessage[], + systemPrompt: string +): Array<{ role: string; content: string; timestamp: number }> { + // Format conversation history for use in queries + const formattedHistory = conversationHistory.map(msg => ({ + role: msg.role, + content: msg.text, + timestamp: msg.timestamp + })); + + // Create system message (always exists since we have default) + const systemMessage = [{ + role: "system" as const, + content: systemPrompt, + timestamp: Date.now() - 1000000 // Ensure it's always first chronologically + }]; + + // Return complete history with system prompt prepended + return [...systemMessage, ...formattedHistory]; +} + + function generateUniqueTableName(): string { return `chat${Math.floor(1000 + Math.random() * 9000)}`; } @@ -117,7 +142,6 @@ const ChatTmpComp = new UICompBuilder( (props, dispatch) => { const uniqueTableName = useRef(); - // Generate unique table name once (with persistence) if (!uniqueTableName.current) { // Use persisted name if exists, otherwise generate new one @@ -146,7 +170,7 @@ const ChatTmpComp = new UICompBuilder( return new QueryHandler({ chatQuery: props.chatQuery.value, dispatch, - streaming: props.streaming + streaming: props.streaming, }); } else if (handlerType === "n8n") { return createMessageHandler("n8n", { @@ -168,7 +192,7 @@ const ChatTmpComp = new UICompBuilder( props.modelHost, props.systemPrompt, props.streaming, - dispatch + dispatch, ]); // Handle message updates for exposed variable @@ -179,21 +203,23 @@ const ChatTmpComp = new UICompBuilder( }; // 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)); - - // Trigger messageReceived event when bot responds - const lastMessage = conversationHistory[conversationHistory.length - 1]; - if (lastMessage && lastMessage.role === 'assistant') { - props.onEvent("messageReceived"); - } - }; + // Handle conversation history updates for exposed variable +const handleConversationUpdate = (conversationHistory: any[]) => { + // Use utility function to create complete history with system prompt + const historyWithSystemPrompt = addSystemPromptToHistory( + conversationHistory, + props.systemPrompt + ); + + // Expose the complete history (with system prompt) for use in queries + dispatch(changeChildAction("conversationHistory", JSON.stringify(historyWithSystemPrompt), false)); + + // Trigger messageReceived event when bot responds + const lastMessage = conversationHistory[conversationHistory.length - 1]; + if (lastMessage && lastMessage.role === 'assistant') { + props.onEvent("messageReceived"); + } +}; // Cleanup on unmount useEffect(() => { @@ -226,5 +252,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"), + new NameConfig("conversationHistory", "Full conversation history as JSON array (includes system prompt for API calls)"), ]); \ No newline at end of file diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCoreMain.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCoreMain.tsx index 3efa451bb..79a6272ce 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCoreMain.tsx +++ b/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCoreMain.tsx @@ -127,6 +127,7 @@ export function ChatCoreMain({ setIsRunning(true); try { + // Use the message handler (no more complex logic here!) const response = await messageHandler.sendMessage(userMessage.text); 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 index 54dcbc508..af703048c 100644 --- 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 @@ -1,16 +1,16 @@ import type { FC } from "react"; +import { useState } from "react"; import { ThreadListItemPrimitive, ThreadListPrimitive, + useThreadListItem, } from "@assistant-ui/react"; import { PencilIcon, PlusIcon, Trash2Icon } from "lucide-react"; - import { TooltipIconButton } from "./tooltip-icon-button"; import { useThreadListItemRuntime } from "@assistant-ui/react"; -import { Button, Flex } from "antd"; +import { Button, Flex, Input } from "antd"; import styled from "styled-components"; -import { useChatContext } from "../context/ChatContext"; const StyledPrimaryButton = styled(Button)` // padding: 20px; @@ -44,12 +44,23 @@ const ThreadListItems: FC = () => { }; const ThreadListItem: FC = () => { + const [editing, setEditing] = useState(false); + return ( - + {editing ? ( + setEditing(false)} + /> + ) : ( + + )} - + setEditing(true)} + editing={editing} + /> ); @@ -78,37 +89,57 @@ const ThreadListItemDelete: FC = () => { }; -const ThreadListItemRename: FC = () => { - const runtime = useThreadListItemRuntime(); + +const ThreadListItemEditInput: FC<{ onFinish: () => void }> = ({ onFinish }) => { + const threadItem = useThreadListItem(); + const threadRuntime = useThreadListItemRuntime(); - const handleClick = async () => { - // runtime doesn't expose a direct `title` prop; read it from its state - let current = ""; - try { - // getState is part of the public runtime surface - current = (runtime.getState?.() as any)?.title ?? ""; - } catch { - // fallback – generate a title if the runtime provides a helper - if (typeof (runtime as any).generateTitle === "function") { - // generateTitle(threadId) in older builds, generateTitle() in newer ones - current = (runtime as any).generateTitle((runtime as any).threadId ?? undefined); - } + const currentTitle = threadItem?.title || "New Chat"; + + const handleRename = async (newTitle: string) => { + if (!newTitle.trim() || newTitle === currentTitle){ + onFinish(); + return; } - - const next = prompt("Rename thread", current)?.trim(); - if (next && next !== current) { - await runtime.rename(next); + + try { + await threadRuntime.rename(newTitle); + onFinish(); + } catch (error) { + console.error("Failed to rename thread:", error); } }; + return ( + handleRename(e.target.value)} + onPressEnter={(e) => handleRename((e.target as HTMLInputElement).value)} + onKeyDown={(e) => { + if (e.key === 'Escape') onFinish(); + }} + autoFocus + style={{ fontSize: '14px', padding: '2px 8px' }} + /> + ); +}; + + +const ThreadListItemRename: FC<{ onStartEdit: () => void; editing: boolean }> = ({ + onStartEdit, + editing +}) => { + if (editing) return null; + return ( ); -}; \ No newline at end of file +}; + diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/handlers/messageHandlers.ts b/client/packages/lowcoder/src/comps/comps/chatComp/handlers/messageHandlers.ts index 53287d1cc..a4f20ec12 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/handlers/messageHandlers.ts +++ b/client/packages/lowcoder/src/comps/comps/chatComp/handlers/messageHandlers.ts @@ -55,7 +55,7 @@ export class QueryHandler implements MessageHandler { constructor(private config: QueryHandlerConfig) {} async sendMessage(message: string): Promise { - const { chatQuery, dispatch } = this.config; + const { chatQuery, dispatch} = this.config; // If no query selected or dispatch unavailable, return mock response if (!chatQuery || !dispatch) { @@ -64,17 +64,22 @@ export class QueryHandler implements MessageHandler { } try { + const result: any = await getPromiseAfterDispatch( dispatch, routeByNameAction( chatQuery, executeQueryAction({ - // Send the user prompt as variable named 'prompt' by default - args: { prompt: { value: message } }, + // Send both individual prompt and full conversation history + args: { + prompt: { value: message }, + }, }) ) ); + console.log("QUERY RESULT", result); + return result.message } catch (e: any) { throw new Error(e?.message || "Query execution failed"); diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/types/chatTypes.ts b/client/packages/lowcoder/src/comps/comps/chatComp/types/chatTypes.ts index 7efb658d4..25595b44d 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/types/chatTypes.ts +++ b/client/packages/lowcoder/src/comps/comps/chatComp/types/chatTypes.ts @@ -66,6 +66,7 @@ export interface ChatMessage { chatQuery: string; dispatch: any; streaming?: boolean; + systemPrompt?: string; } // ============================================================================ From b2dcf3fb22bb6900c2a2159016fe39b8d1f1fe8b Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Tue, 15 Jul 2025 22:57:32 +0500 Subject: [PATCH 11/17] add docs button in chat component --- .../src/comps/comps/chatComp/chatPropertyView.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/chatPropertyView.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/chatPropertyView.tsx index bfa72bf76..793da2b5f 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/chatPropertyView.tsx +++ b/client/packages/lowcoder/src/comps/comps/chatComp/chatPropertyView.tsx @@ -1,7 +1,7 @@ // client/packages/lowcoder/src/comps/comps/chatComp/chatPropertyView.tsx import React, { useMemo } from "react"; -import { Section, sectionNames } from "lowcoder-design"; +import { Section, sectionNames, DocLink } from "lowcoder-design"; import { placeholderPropertyView } from "../../utils/propertyUtils"; // ============================================================================ @@ -13,6 +13,17 @@ export const ChatPropertyView = React.memo((props: any) => { return useMemo(() => ( <> + {/* Help & Documentation - Outside of Section */} +
+ + 📖 View Documentation + +
+ {/* Message Handler Configuration */}
{children.handlerType.propertyView({ From 35b061459fe0289ff4caa483c9f91d48dda83cfc Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Wed, 16 Jul 2025 18:39:15 +0500 Subject: [PATCH 12/17] fix no threads infinite re render --- .../comps/chatComp/components/context/ChatContext.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/components/context/ChatContext.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/components/context/ChatContext.tsx index 65670edff..e126109da 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/components/context/ChatContext.tsx +++ b/client/packages/lowcoder/src/comps/comps/chatComp/components/context/ChatContext.tsx @@ -303,6 +303,9 @@ export function ChatProvider({ children, storage }: { }; const deleteThread = async (threadId: string) => { + // Determine if this is the last remaining thread BEFORE we delete it + const isLastThread = state.threadList.length === 1; + // Update local state first dispatch({ type: "DELETE_THREAD", threadId }); @@ -310,6 +313,13 @@ export function ChatProvider({ children, storage }: { try { await storage.deleteThread(threadId); dispatch({ type: "MARK_SAVED" }); + // avoid deleting the last thread + // if there are no threads left, create a new one + // avoid infinite re-renders + if (isLastThread) { + const newThreadId = await createThread("New Chat"); + setCurrentThread(newThreadId); + } } catch (error) { console.error("Failed to delete thread:", error); } From b2d9d118929c3079bb0142f346bf90af13960f94 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Wed, 16 Jul 2025 22:31:40 +0500 Subject: [PATCH 13/17] fix table name for better queries --- .../packages/lowcoder/src/comps/comps/chatComp/chatComp.tsx | 1 + .../lowcoder/src/comps/comps/chatComp/utils/storageFactory.ts | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/chatComp.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/chatComp.tsx index eb227b23f..da3bf6be1 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/chatComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/chatComp/chatComp.tsx @@ -253,4 +253,5 @@ const handleConversationUpdate = (conversationHistory: any[]) => { export const ChatComp = withExposingConfigs(ChatTmpComp, [ new NameConfig("currentMessage", "Current user message"), new NameConfig("conversationHistory", "Full conversation history as JSON array (includes system prompt for API calls)"), + new NameConfig("databaseName", "Database name for SQL queries (ChatDB_)"), ]); \ No newline at end of file diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/utils/storageFactory.ts b/client/packages/lowcoder/src/comps/comps/chatComp/utils/storageFactory.ts index 0ef893c75..b4d092af5 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/utils/storageFactory.ts +++ b/client/packages/lowcoder/src/comps/comps/chatComp/utils/storageFactory.ts @@ -9,8 +9,8 @@ import { ChatMessage, ChatThread, ChatStorage } from "../types/chatTypes"; export function createChatStorage(tableName: string): ChatStorage { const dbName = `ChatDB_${tableName}`; - const threadsTable = `${dbName}.${tableName}_threads`; - const messagesTable = `${dbName}.${tableName}_messages`; + const threadsTable = `${dbName}.threads`; + const messagesTable = `${dbName}.messages`; return { async initialize() { From aa405854e2c2978ab6a71869dc35a369c130bfd8 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Thu, 17 Jul 2025 00:19:04 +0500 Subject: [PATCH 14/17] add custom loader --- .../components/assistant-ui/thread.tsx | 36 +++++++++++++++++-- 1 file changed, 34 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/components/assistant-ui/thread.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/components/assistant-ui/thread.tsx index d7c27a07f..d28bc07c9 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/components/assistant-ui/thread.tsx +++ b/client/packages/lowcoder/src/comps/comps/chatComp/components/assistant-ui/thread.tsx @@ -21,6 +21,34 @@ import { import { Button } from "../ui/button"; import { MarkdownText } from "./markdown-text"; import { TooltipIconButton } from "./tooltip-icon-button"; + import { Spin, Flex } from "antd"; + import { LoadingOutlined } from "@ant-design/icons"; + import styled from "styled-components"; + const SimpleANTDLoader = () => { + const antIcon = ; + + return ( +
+ + + Working on it... + +
+ ); + }; + + const StyledThreadRoot = styled(ThreadPrimitive.Root)` + /* Hide entire assistant message container when it contains running status */ + .aui-assistant-message-root:has([data-status="running"]) { + display: none; + } + + /* Fallback for older browsers that don't support :has() */ + .aui-assistant-message-content [data-status="running"] { + display: none; + } +`; + interface ThreadProps { placeholder?: string; @@ -28,7 +56,7 @@ import { export const Thread: FC = ({ placeholder = "Write a message..." }) => { return ( - + + + +
@@ -54,7 +86,7 @@ import {
- + ); }; From b1bc01a609103c3ca00392eaa93c436a790622cd Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Fri, 18 Jul 2025 21:06:16 +0500 Subject: [PATCH 15/17] add translations for the chat component --- .../src/comps/comps/chatComp/chatComp.tsx | 35 +++++----- .../comps/comps/chatComp/chatPropertyView.tsx | 62 +++++++++-------- .../chatComp/components/ChatCoreMain.tsx | 7 +- .../comps/chatComp/components/ChatPanel.tsx | 3 +- .../components/assistant-ui/thread-list.tsx | 7 +- .../components/assistant-ui/thread.tsx | 15 ++-- .../components/context/ChatContext.tsx | 9 +-- client/packages/lowcoder/src/comps/index.tsx | 8 +-- .../packages/lowcoder/src/i18n/locales/en.ts | 69 ++++++++++++++++++- 9 files changed, 146 insertions(+), 69 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/chatComp.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/chatComp.tsx index da3bf6be1..0091ed6ab 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/chatComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/chatComp/chatComp.tsx @@ -16,6 +16,7 @@ import { QueryHandler, createMessageHandler } from "./handlers/messageHandlers"; import { useMemo, useRef, useEffect } from "react"; import { changeChildAction } from "lowcoder-core"; import { ChatMessage } from "./types/chatTypes"; +import { trans } from "i18n"; import "@assistant-ui/styles/index.css"; import "@assistant-ui/styles/markdown.css"; @@ -25,39 +26,39 @@ import "@assistant-ui/styles/markdown.css"; // ============================================================================ export const componentLoadEvent: EventConfigType = { - label: "Component Load", + label: trans("chat.componentLoad"), value: "componentLoad", - description: "Triggered when the chat component finishes loading - Load existing data from backend", + description: trans("chat.componentLoadDesc"), }; export const messageSentEvent: EventConfigType = { - label: "Message Sent", + label: trans("chat.messageSent"), value: "messageSent", - description: "Triggered when a user sends a message - Auto-save user messages", + description: trans("chat.messageSentDesc"), }; export const messageReceivedEvent: EventConfigType = { - label: "Message Received", - value: "messageReceived", - description: "Triggered when a response is received from the AI - Auto-save AI responses", + label: trans("chat.messageReceived"), + value: "messageReceived", + description: trans("chat.messageReceivedDesc"), }; export const threadCreatedEvent: EventConfigType = { - label: "Thread Created", + label: trans("chat.threadCreated"), value: "threadCreated", - description: "Triggered when a new thread is created - Auto-save new threads", + description: trans("chat.threadCreatedDesc"), }; export const threadUpdatedEvent: EventConfigType = { - label: "Thread Updated", + label: trans("chat.threadUpdated"), value: "threadUpdated", - description: "Triggered when a thread is updated - Auto-save thread changes", + description: trans("chat.threadUpdatedDesc"), }; export const threadDeletedEvent: EventConfigType = { - label: "Thread Deleted", + label: trans("chat.threadDeleted"), value: "threadDeleted", - description: "Triggered when a thread is deleted - Delete thread from backend", + description: trans("chat.threadDeletedDesc"), }; const ChatEventOptions = [ @@ -104,8 +105,8 @@ function generateUniqueTableName(): string { } const ModelTypeOptions = [ - { label: "Query", value: "query" }, - { label: "N8N Workflow", value: "n8n" }, + { label: trans("chat.handlerTypeQuery"), value: "query" }, + { label: trans("chat.handlerTypeN8N"), value: "n8n" }, ] as const; export const chatChildrenMap = { @@ -116,11 +117,11 @@ export const chatChildrenMap = { handlerType: dropdownControl(ModelTypeOptions, "query"), chatQuery: QuerySelectControl, // Only used for "query" type modelHost: withDefault(StringControl, ""), // Only used for "n8n" type - systemPrompt: withDefault(StringControl, "You are a helpful assistant."), + systemPrompt: withDefault(StringControl, trans("chat.defaultSystemPrompt")), streaming: BoolControl.DEFAULT_TRUE, // UI Configuration - placeholder: withDefault(StringControl, "Chat Component"), + placeholder: withDefault(StringControl, trans("chat.defaultPlaceholder")), // Database Information (read-only) databaseName: withDefault(StringControl, ""), diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/chatPropertyView.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/chatPropertyView.tsx index 793da2b5f..0e2fd0290 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/chatPropertyView.tsx +++ b/client/packages/lowcoder/src/comps/comps/chatComp/chatPropertyView.tsx @@ -3,6 +3,7 @@ import React, { useMemo } from "react"; import { Section, sectionNames, DocLink } from "lowcoder-design"; import { placeholderPropertyView } from "../../utils/propertyUtils"; +import { trans } from "i18n"; // ============================================================================ // CLEAN PROPERTY VIEW - FOCUSED ON ESSENTIAL CONFIGURATION @@ -25,51 +26,56 @@ export const ChatPropertyView = React.memo((props: any) => { {/* Message Handler Configuration */} -
+
{children.handlerType.propertyView({ - label: "Handler Type", - tooltip: "How messages are processed" + label: trans("chat.handlerType"), + tooltip: trans("chat.handlerTypeTooltip"), })} - - {/* Show chatQuery field only for "query" handler */} - {children.handlerType.value === "query" && ( + + {/* Conditional Query Selection */} + {children.handlerType.getView() === "query" && ( children.chatQuery.propertyView({ - label: "Chat Query", - placeholder: "Select a query to handle messages" + label: trans("chat.chatQuery"), + placeholder: trans("chat.chatQueryPlaceholder"), }) )} - - {/* Show modelHost field only for "n8n" handler */} - {children.handlerType.value === "n8n" && ( + + {/* Conditional N8N Configuration */} + {children.handlerType.getView() === "n8n" && ( children.modelHost.propertyView({ - label: "N8N Webhook URL", - placeholder: "http://localhost:5678/webhook/...", - tooltip: "N8N webhook endpoint for processing messages" + label: trans("chat.modelHost"), + placeholder: trans("chat.modelHostPlaceholder"), + tooltip: trans("chat.modelHostTooltip"), }) )} - + {children.systemPrompt.propertyView({ - label: "System Prompt", - placeholder: "You are a helpful assistant...", - tooltip: "Initial instructions for the AI" + label: trans("chat.systemPrompt"), + placeholder: trans("chat.systemPromptPlaceholder"), + tooltip: trans("chat.systemPromptTooltip"), })} - - {children.streaming.propertyView({ - label: "Enable Streaming", - tooltip: "Stream responses in real-time (when supported)" + + {children.streaming.propertyView({ + label: trans("chat.streaming"), + tooltip: trans("chat.streamingTooltip"), })}
{/* UI Configuration */} -
- {placeholderPropertyView(children)} +
+ {children.placeholder.propertyView({ + label: trans("chat.placeholderLabel"), + placeholder: trans("chat.defaultPlaceholder"), + tooltip: trans("chat.placeholderTooltip"), + })}
- {/* Database Information */} -
+ {/* Database Section */} +
{children.databaseName.propertyView({ - label: "Database Name", - tooltip: "Auto-generated database name for this chat component (read-only)" + label: trans("chat.databaseName"), + tooltip: trans("chat.databaseNameTooltip"), + readonly: true })}
diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCoreMain.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCoreMain.tsx index 79a6272ce..0de952584 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCoreMain.tsx +++ b/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCoreMain.tsx @@ -18,6 +18,7 @@ import { } from "./context/ChatContext"; import { MessageHandler } from "../types/chatTypes"; import styled from "styled-components"; +import { trans } from "i18n"; // ============================================================================ // STYLED COMPONENTS (same as your current ChatMain) @@ -147,7 +148,7 @@ export function ChatCoreMain({ const errorMessage: ChatMessage = { id: generateId(), role: "assistant", - text: `Sorry, I encountered an error: ${error instanceof Error ? error.message : 'Unknown error'}`, + text: trans("chat.errorUnknown"), timestamp: Date.now(), }; @@ -204,7 +205,7 @@ export function ChatCoreMain({ const errorMessage: ChatMessage = { id: generateId(), role: "assistant", - text: `Sorry, I encountered an error: ${error instanceof Error ? error.message : 'Unknown error'}`, + text: trans("chat.errorUnknown"), timestamp: Date.now(), }; @@ -222,7 +223,7 @@ export function ChatCoreMain({ archivedThreads: state.threadList.filter((t): t is ArchivedThreadData => t.status === "archived"), onSwitchToNewThread: async () => { - const threadId = await actions.createThread("New Chat"); + const threadId = await actions.createThread(trans("chat.newChatTitle")); actions.setCurrentThread(threadId); onEvent?.("threadCreated"); }, diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatPanel.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatPanel.tsx index a36c1f38e..530c3fce3 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatPanel.tsx +++ b/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatPanel.tsx @@ -5,6 +5,7 @@ import { ChatCore } from "./ChatCore"; import { createChatStorage } from "../utils/storageFactory"; import { N8NHandler } from "../handlers/messageHandlers"; import { ChatPanelProps } from "../types/chatTypes"; +import { trans } from "i18n"; import "@assistant-ui/styles/index.css"; import "@assistant-ui/styles/markdown.css"; @@ -16,7 +17,7 @@ import "@assistant-ui/styles/markdown.css"; export function ChatPanel({ tableName, modelHost, - systemPrompt = "You are a helpful assistant.", + systemPrompt = trans("chat.defaultSystemPrompt"), streaming = true, onMessageUpdate }: ChatPanelProps) { 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 index af703048c..46bf98eed 100644 --- 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 @@ -9,6 +9,7 @@ import { PencilIcon, PlusIcon, Trash2Icon } from "lucide-react"; import { TooltipIconButton } from "./tooltip-icon-button"; import { useThreadListItemRuntime } from "@assistant-ui/react"; import { Button, Flex, Input } from "antd"; +import { trans } from "i18n"; import styled from "styled-components"; @@ -33,7 +34,7 @@ const ThreadListNew: FC = () => { return ( }> - New Thread + {trans("chat.newThread")} ); @@ -69,7 +70,7 @@ const ThreadListItem: FC = () => { const ThreadListItemTitle: FC = () => { return (

- +

); }; @@ -94,7 +95,7 @@ const ThreadListItemEditInput: FC<{ onFinish: () => void }> = ({ onFinish }) => const threadItem = useThreadListItem(); const threadRuntime = useThreadListItemRuntime(); - const currentTitle = threadItem?.title || "New Chat"; + const currentTitle = threadItem?.title || trans("chat.newChatTitle"); const handleRename = async (newTitle: string) => { if (!newTitle.trim() || newTitle === currentTitle){ diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/components/assistant-ui/thread.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/components/assistant-ui/thread.tsx index d28bc07c9..8a2de20f0 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/components/assistant-ui/thread.tsx +++ b/client/packages/lowcoder/src/comps/comps/chatComp/components/assistant-ui/thread.tsx @@ -6,6 +6,7 @@ import { ThreadPrimitive, } from "@assistant-ui/react"; import type { FC } from "react"; + import { trans } from "i18n"; import { ArrowDownIcon, CheckIcon, @@ -54,7 +55,7 @@ import { placeholder?: string; } - export const Thread: FC = ({ placeholder = "Write a message..." }) => { + export const Thread: FC = ({ placeholder = trans("chat.composerPlaceholder") }) => { return (

- How can I help you today? + {trans("chat.welcomeMessage")}

@@ -124,29 +125,29 @@ import {
- What is the weather in Tokyo? + {trans("chat.suggestionWeather")} - What is assistant-ui? + {trans("chat.suggestionAssistant")}
); }; - const Composer: FC<{ placeholder?: string }> = ({ placeholder = "Write a message..." }) => { + const Composer: FC<{ placeholder?: string }> = ({ placeholder = trans("chat.composerPlaceholder") }) => { return ( => { + const createThread = async (title: string = trans("chat.newChatTitle")): Promise => { const threadId = `thread-${Date.now()}`; const newThread: ThreadData = { threadId, @@ -317,7 +318,7 @@ export function ChatProvider({ children, storage }: { // if there are no threads left, create a new one // avoid infinite re-renders if (isLastThread) { - const newThreadId = await createThread("New Chat"); + const newThreadId = await createThread(trans("chat.newChatTitle")); setCurrentThread(newThreadId); } } catch (error) { diff --git a/client/packages/lowcoder/src/comps/index.tsx b/client/packages/lowcoder/src/comps/index.tsx index b6eb5ad31..bd4d0f54e 100644 --- a/client/packages/lowcoder/src/comps/index.tsx +++ b/client/packages/lowcoder/src/comps/index.tsx @@ -1684,12 +1684,12 @@ export var uiCompMap: Registry = { }, }, chat: { - name: "Chat", - enName: "Chat", - description: "Chat Component", + name: trans("uiComp.chatCompName"), + enName: "AI Chat", + description: trans("uiComp.chatCompDesc"), categories: ["collaboration"], icon: CommentCompIcon, // Use existing icon for now - keywords: "chat,conversation", + keywords: trans("uiComp.chatCompKeywords"), comp: ChatComp, layoutInfo: { w: 12, diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index b897add3f..05ab251a0 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -1413,12 +1413,77 @@ export const en = { "timerCompDesc": "A component that displays a countdown or elapsed time, useful for tracking durations and deadlines.", "timerCompKeywords": "timer, countdown, elapsed time, tracking, durations, deadlines", + "chatCompName": "AI Chat", + "chatCompDesc": "An interactive chat component for AI conversations with support for multiple message handlers and streaming responses.", + "chatCompKeywords": "chat, ai, conversation, assistant, messaging, streaming", }, - + + "chat": { + // Property View Labels & Tooltips + "handlerType": "Handler Type", + "handlerTypeTooltip": "How messages are processed", + "chatQuery": "Chat Query", + "chatQueryPlaceholder": "Select a query to handle messages", + "modelHost": "N8N Webhook URL", + "modelHostPlaceholder": "http://localhost:5678/webhook/...", + "modelHostTooltip": "N8N webhook endpoint for processing messages", + "systemPrompt": "System Prompt", + "systemPromptPlaceholder": "You are a helpful assistant...", + "systemPromptTooltip": "Initial instructions for the AI", + "streaming": "Enable Streaming", + "streamingTooltip": "Stream responses in real-time (when supported)", + "databaseName": "Database Name", + "databaseNameTooltip": "Auto-generated database name for this chat component (read-only)", + + // Default Values & Placeholders + "defaultSystemPrompt": "You are a helpful assistant.", + "defaultPlaceholder": "Type your message here...", + "composerPlaceholder": "Write a message...", + "defaultErrorMessage": "Sorry, I encountered an error. Please try again.", + "newChatTitle": "New Chat", + "placeholderLabel": "Placeholder", + "placeholderTooltip": "Placeholder text for the composer input", + "newThread": "New Thread", + "welcomeMessage": "How can I help you today?", + "suggestionWeather": "What's the weather in Tokyo?", + "suggestionAssistant": "What's the news today?", + + + + // Error Messages + "errorUnknown": "Sorry, I encountered an error. Please try again.", + + // Handler Types + "handlerTypeQuery": "Query", + "handlerTypeN8N": "N8N Workflow", + + // Section Names + "messageHandler": "Message Handler", + "uiConfiguration": "UI Configuration", + "database": "Database", + + // Event Labels & Descriptions + "componentLoad": "Component Load", + "componentLoadDesc": "Triggered when the chat component finishes loading - Load existing data from backend", + "messageSent": "Message Sent", + "messageSentDesc": "Triggered when a user sends a message - Auto-save user messages", + "messageReceived": "Message Received", + "messageReceivedDesc": "Triggered when a response is received from the AI - Auto-save AI responses", + "threadCreated": "Thread Created", + "threadCreatedDesc": "Triggered when a new thread is created - Auto-save new threads", + "threadUpdated": "Thread Updated", + "threadUpdatedDesc": "Triggered when a thread is updated - Auto-save thread changes", + "threadDeleted": "Thread Deleted", + "threadDeletedDesc": "Triggered when a thread is deleted - Delete thread from backend", + + // Exposed Variables (for documentation) + "currentMessage": "Current user message", + "conversationHistory": "Full conversation history as JSON array", + "databaseNameExposed": "Database name for SQL queries (ChatDB_)" + }, // eighth part - "comp": { "menuViewDocs": "View Documentation", "menuViewPlayground": "View interactive Playground", From 68b2802559fefdd0c324f2f0bc8770e788507e23 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Fri, 18 Jul 2025 21:09:23 +0500 Subject: [PATCH 16/17] remove console logs --- .../src/comps/comps/chatComp/components/ChatCoreMain.tsx | 7 ------- .../src/comps/comps/chatComp/handlers/messageHandlers.ts | 4 +--- .../src/comps/comps/chatComp/utils/storageFactory.ts | 2 -- 3 files changed, 1 insertion(+), 12 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCoreMain.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCoreMain.tsx index 0de952584..4bc7363b9 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCoreMain.tsx +++ b/client/packages/lowcoder/src/comps/comps/chatComp/components/ChatCoreMain.tsx @@ -79,14 +79,9 @@ export function ChatCoreMain({ const { state, actions } = useChatContext(); const [isRunning, setIsRunning] = useState(false); - console.log("CHAT CORE STATE", state); - // Get messages for current thread const currentMessages = actions.getCurrentMessages(); - - console.log("CURRENT MESSAGES", currentMessages); - // Notify parent component of conversation changes useEffect(() => { onConversationUpdate?.(currentMessages); @@ -132,8 +127,6 @@ export function ChatCoreMain({ // 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(), role: "assistant", diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/handlers/messageHandlers.ts b/client/packages/lowcoder/src/comps/comps/chatComp/handlers/messageHandlers.ts index a4f20ec12..1d674d04e 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/handlers/messageHandlers.ts +++ b/client/packages/lowcoder/src/comps/comps/chatComp/handlers/messageHandlers.ts @@ -78,9 +78,7 @@ export class QueryHandler implements MessageHandler { ) ); - console.log("QUERY RESULT", result); - - return result.message + return result.message } catch (e: any) { throw new Error(e?.message || "Query execution failed"); } diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/utils/storageFactory.ts b/client/packages/lowcoder/src/comps/comps/chatComp/utils/storageFactory.ts index b4d092af5..cc563ba66 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/utils/storageFactory.ts +++ b/client/packages/lowcoder/src/comps/comps/chatComp/utils/storageFactory.ts @@ -41,7 +41,6 @@ export function createChatStorage(tableName: string): ChatStorage { ) `); - console.log(`✅ Chat database initialized: ${dbName}`); } catch (error) { console.error(`Failed to initialize chat database ${dbName}:`, error); throw error; @@ -170,7 +169,6 @@ export function createChatStorage(tableName: string): ChatStorage { // Reinitialize fresh await this.initialize(); - console.log(`✅ Database reset and reinitialized: ${dbName}`); } catch (error) { console.error("Failed to reset database:", error); throw error; From 4f9fbbafb9847168098d8999dd5d12d3c993a9e8 Mon Sep 17 00:00:00 2001 From: FARAN Date: Tue, 22 Jul 2025 20:29:18 +0500 Subject: [PATCH 17/17] add file attachments components --- client/packages/lowcoder/package.json | 2 + .../components/assistant-ui/thread.tsx | 3 + .../chatComp/components/ui/attachment.tsx | 346 ++++++++++++++++++ .../comps/chatComp/components/ui/avatar.tsx | 72 ++++ .../comps/chatComp/components/ui/dialog.tsx | 230 ++++++++++++ client/yarn.lock | 74 +++- 6 files changed, 726 insertions(+), 1 deletion(-) create mode 100644 client/packages/lowcoder/src/comps/comps/chatComp/components/ui/attachment.tsx create mode 100644 client/packages/lowcoder/src/comps/comps/chatComp/components/ui/avatar.tsx create mode 100644 client/packages/lowcoder/src/comps/comps/chatComp/components/ui/dialog.tsx diff --git a/client/packages/lowcoder/package.json b/client/packages/lowcoder/package.json index 04a4c3053..323a2a7b7 100644 --- a/client/packages/lowcoder/package.json +++ b/client/packages/lowcoder/package.json @@ -33,6 +33,8 @@ "@jsonforms/core": "^3.5.1", "@lottiefiles/dotlottie-react": "^0.13.0", "@manaflair/redux-batch": "^1.0.0", + "@radix-ui/react-avatar": "^1.1.10", + "@radix-ui/react-dialog": "^1.1.14", "@radix-ui/react-slot": "^1.2.3", "@radix-ui/react-tooltip": "^1.2.7", "@rjsf/antd": "^5.24.9", diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/components/assistant-ui/thread.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/components/assistant-ui/thread.tsx index 8a2de20f0..4018cbe5d 100644 --- a/client/packages/lowcoder/src/comps/comps/chatComp/components/assistant-ui/thread.tsx +++ b/client/packages/lowcoder/src/comps/comps/chatComp/components/assistant-ui/thread.tsx @@ -25,6 +25,7 @@ import { import { Spin, Flex } from "antd"; import { LoadingOutlined } from "@ant-design/icons"; import styled from "styled-components"; +import { ComposerAddAttachment, ComposerAttachments } from "../ui/attachment"; const SimpleANTDLoader = () => { const antIcon = ; @@ -150,6 +151,8 @@ import { const Composer: FC<{ placeholder?: string }> = ({ placeholder = trans("chat.composerPlaceholder") }) => { return ( + + (selector: (state: any) => T): ((state: any) => T) => selector; + +const useFileSrc = (file: File | undefined) => { + const [src, setSrc] = useState(undefined); + + useEffect(() => { + if (!file) { + setSrc(undefined); + return; + } + + const objectUrl = URL.createObjectURL(file); + setSrc(objectUrl); + + return () => { + URL.revokeObjectURL(objectUrl); + }; + }, [file]); + + return src; +}; + +const useAttachmentSrc = () => { + const { file, src } = useAttachment( + useShallow((a): { file?: File; src?: string } => { + if (a.type !== "image") return {}; + if (a.file) return { file: a.file }; + const src = a.content?.filter((c: any) => c.type === "image")[0]?.image; + if (!src) return {}; + return { src }; + }) + ); + + return useFileSrc(file) ?? src; +}; + +// ============================================================================ +// ATTACHMENT COMPONENTS +// ============================================================================ + +type AttachmentPreviewProps = { + src: string; +}; + +const AttachmentPreview: FC = ({ src }) => { + const [isLoaded, setIsLoaded] = useState(false); + + return ( + setIsLoaded(true)} + alt="Preview" + /> + ); +}; + +const AttachmentPreviewDialog: FC = ({ children }) => { + const src = useAttachmentSrc(); + + if (!src) return <>{children}; + + return ( + + + {children} + + + + Image Attachment Preview + + + + + ); +}; + +const AttachmentThumb: FC = () => { + const isImage = useAttachment((a) => a.type === "image"); + const src = useAttachmentSrc(); + return ( + + + + + + + ); +}; + +const AttachmentUI: FC = () => { + const canRemove = useAttachment((a) => a.source !== "message"); + const typeLabel = useAttachment((a) => { + const type = a.type; + switch (type) { + case "image": + return "Image"; + case "document": + return "Document"; + case "file": + return "File"; + default: + const _exhaustiveCheck: never = type; + throw new Error(`Unknown attachment type: ${_exhaustiveCheck}`); + } + }); + + return ( + + + + + + + + + + + {typeLabel} + + + + + {canRemove && } + + + + + + ); +}; + +const AttachmentRemove: FC = () => { + return ( + + + + + + ); +}; + +// ============================================================================ +// EXPORTED COMPONENTS +// ============================================================================ + +export const UserMessageAttachments: FC = () => { + return ( + + + + ); +}; + +export const ComposerAttachments: FC = () => { + return ( + + + + ); +}; + +export const ComposerAddAttachment: FC = () => { + return ( + + + + + + ); +}; + +const AttachmentDialogContent: FC = ({ children }) => ( + + + + {children} + + +); \ No newline at end of file diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/components/ui/avatar.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/components/ui/avatar.tsx new file mode 100644 index 000000000..aa9032abc --- /dev/null +++ b/client/packages/lowcoder/src/comps/comps/chatComp/components/ui/avatar.tsx @@ -0,0 +1,72 @@ +"use client" + +import * as React from "react" +import * as AvatarPrimitive from "@radix-ui/react-avatar" +import styled from "styled-components" + +const StyledAvatarRoot = styled(AvatarPrimitive.Root)` + position: relative; + display: flex; + width: 32px; + height: 32px; + flex-shrink: 0; + overflow: hidden; + border-radius: 50%; +`; + +const StyledAvatarImage = styled(AvatarPrimitive.Image)` + aspect-ratio: 1; + width: 100%; + height: 100%; +`; + +const StyledAvatarFallback = styled(AvatarPrimitive.Fallback)` + background-color: #f1f5f9; + display: flex; + width: 100%; + height: 100%; + align-items: center; + justify-content: center; + border-radius: 50%; +`; + +function Avatar({ + className, + ...props +}: Omit, 'ref'>) { + return ( + + ) +} + +function AvatarImage({ + className, + ...props +}: Omit, 'ref'>) { + return ( + + ) +} + +function AvatarFallback({ + className, + ...props +}: Omit, 'ref'>) { + return ( + + ) +} + +export { Avatar, AvatarImage, AvatarFallback } \ No newline at end of file diff --git a/client/packages/lowcoder/src/comps/comps/chatComp/components/ui/dialog.tsx b/client/packages/lowcoder/src/comps/comps/chatComp/components/ui/dialog.tsx new file mode 100644 index 000000000..058caebae --- /dev/null +++ b/client/packages/lowcoder/src/comps/comps/chatComp/components/ui/dialog.tsx @@ -0,0 +1,230 @@ +"use client" + +import * as React from "react" +import * as DialogPrimitive from "@radix-ui/react-dialog" +import { XIcon } from "lucide-react" +import styled from "styled-components" + +const StyledDialogOverlay = styled(DialogPrimitive.Overlay)` + position: fixed; + inset: 0; + z-index: 50; + background-color: rgba(0, 0, 0, 0.5); +`; + +const StyledDialogContent = styled(DialogPrimitive.Content)` + background-color: white; + position: fixed; + top: 50%; + left: 50%; + z-index: 50; + display: grid; + width: 100%; + max-width: calc(100% - 2rem); + transform: translate(-50%, -50%); + gap: 16px; + border-radius: 8px; + border: 1px solid #e2e8f0; + padding: 24px; + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + + @media (min-width: 640px) { + max-width: 512px; + } +`; + +const StyledDialogClose = styled(DialogPrimitive.Close)` + position: absolute; + top: 16px; + right: 16px; + border-radius: 4px; + opacity: 0.7; + transition: opacity 0.2s; + border: none; + background: none; + cursor: pointer; + padding: 4px; + display: flex; + align-items: center; + justify-content: center; + + &:hover { + opacity: 1; + } + + & svg { + width: 16px; + height: 16px; + } +`; + +const StyledDialogHeader = styled.div` + display: flex; + flex-direction: column; + gap: 8px; + text-align: center; + + @media (min-width: 640px) { + text-align: left; + } +`; + +const StyledDialogFooter = styled.div` + display: flex; + flex-direction: column-reverse; + gap: 8px; + + @media (min-width: 640px) { + flex-direction: row; + justify-content: flex-end; + } +`; + +const StyledDialogTitle = styled(DialogPrimitive.Title)` + font-size: 18px; + line-height: 1; + font-weight: 600; +`; + +const StyledDialogDescription = styled(DialogPrimitive.Description)` + color: #64748b; + font-size: 14px; +`; + +const ScreenReaderOnly = styled.span` + position: absolute; + left: -10000px; + width: 1px; + height: 1px; + overflow: hidden; +`; + +function Dialog({ + ...props +}: React.ComponentProps) { + return +} + +function DialogTrigger({ + ...props +}: React.ComponentProps) { + return +} + +function DialogPortal({ + ...props +}: React.ComponentProps) { + return +} + +function DialogClose({ + ...props +}: React.ComponentProps) { + return +} + +function DialogOverlay({ + className, + ...props +}: Omit, 'ref'>) { + return ( + + ) +} + +function DialogContent({ + className, + children, + showCloseButton = true, + ...props +}: Omit, 'ref'> & { + showCloseButton?: boolean +}) { + return ( + + + + {children} + {showCloseButton && ( + + + Close + + )} + + + ) +} + +function DialogHeader({ + className, + ...props +}: React.ComponentProps<"div">) { + return ( + + ) +} + +function DialogFooter({ + className, + ...props +}: React.ComponentProps<"div">) { + return ( + + ) +} + +function DialogTitle({ + className, + ...props +}: Omit, 'ref'>) { + return ( + + ) +} + +function DialogDescription({ + className, + ...props +}: Omit, 'ref'>) { + return ( + + ) +} + +export { + Dialog, + DialogClose, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogOverlay, + DialogPortal, + DialogTitle, + DialogTrigger, +} \ No newline at end of file diff --git a/client/yarn.lock b/client/yarn.lock index e8357b3c0..10f5dafee 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -3401,6 +3401,29 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-avatar@npm:^1.1.10": + version: 1.1.10 + resolution: "@radix-ui/react-avatar@npm:1.1.10" + dependencies: + "@radix-ui/react-context": 1.1.2 + "@radix-ui/react-primitive": 2.1.3 + "@radix-ui/react-use-callback-ref": 1.1.1 + "@radix-ui/react-use-is-hydrated": 0.1.0 + "@radix-ui/react-use-layout-effect": 1.1.1 + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 3d63c9b99549c574be0f3f24028ab3f339e51ca85fc0821887f83e30af1342a41b3a3f40bf0fc12cdb2814340342530b4aba6b758deda9e99f6846b41d2f987f + languageName: node + linkType: hard + "@radix-ui/react-compose-refs@npm:1.1.2, @radix-ui/react-compose-refs@npm:^1.1.2": version: 1.1.2 resolution: "@radix-ui/react-compose-refs@npm:1.1.2" @@ -3427,6 +3450,38 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-dialog@npm:^1.1.14": + version: 1.1.14 + resolution: "@radix-ui/react-dialog@npm:1.1.14" + dependencies: + "@radix-ui/primitive": 1.1.2 + "@radix-ui/react-compose-refs": 1.1.2 + "@radix-ui/react-context": 1.1.2 + "@radix-ui/react-dismissable-layer": 1.1.10 + "@radix-ui/react-focus-guards": 1.1.2 + "@radix-ui/react-focus-scope": 1.1.7 + "@radix-ui/react-id": 1.1.1 + "@radix-ui/react-portal": 1.1.9 + "@radix-ui/react-presence": 1.1.4 + "@radix-ui/react-primitive": 2.1.3 + "@radix-ui/react-slot": 1.2.3 + "@radix-ui/react-use-controllable-state": 1.2.2 + aria-hidden: ^1.2.4 + react-remove-scroll: ^2.6.3 + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 4928c0bf84b3a054eb3b4659b8e87192d8c120333d8437fcbd9d9311502d5eea9e9c87173929d4bfbc0db61b1134fcd98015756011d67ddcd2aed1b4a0134d7c + languageName: node + linkType: hard + "@radix-ui/react-dismissable-layer@npm:1.1.10": version: 1.1.10 resolution: "@radix-ui/react-dismissable-layer@npm:1.1.10" @@ -3723,6 +3778,21 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-use-is-hydrated@npm:0.1.0": + version: 0.1.0 + resolution: "@radix-ui/react-use-is-hydrated@npm:0.1.0" + dependencies: + use-sync-external-store: ^1.5.0 + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 72e68a85a7a4a6dafd255a0cc87b6410bf0356c5e296e2eb82c265559408a735204cd150408b9c0d598057dafad3d51086e0362633bd728e95655b3bfd70ae26 + languageName: node + linkType: hard + "@radix-ui/react-use-layout-effect@npm:1.1.1": version: 1.1.1 resolution: "@radix-ui/react-use-layout-effect@npm:1.1.1" @@ -14877,6 +14947,8 @@ coolshapes-react@lowcoder-org/coolshapes-react: "@jsonforms/core": ^3.5.1 "@lottiefiles/dotlottie-react": ^0.13.0 "@manaflair/redux-batch": ^1.0.0 + "@radix-ui/react-avatar": ^1.1.10 + "@radix-ui/react-dialog": ^1.1.14 "@radix-ui/react-slot": ^1.2.3 "@radix-ui/react-tooltip": ^1.2.7 "@rjsf/antd": ^5.24.9 @@ -22428,7 +22500,7 @@ coolshapes-react@lowcoder-org/coolshapes-react: languageName: node linkType: hard -"use-sync-external-store@npm:^1.2.0, use-sync-external-store@npm:^1.4.0": +"use-sync-external-store@npm:^1.2.0, use-sync-external-store@npm:^1.4.0, use-sync-external-store@npm:^1.5.0": version: 1.5.0 resolution: "use-sync-external-store@npm:1.5.0" peerDependencies: