Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit75e635a

Browse files
iamfaranraheeliftikhar5
authored andcommitted
[Feat]: make chat component flexible
1 parent4585d15 commit75e635a

File tree

9 files changed

+437
-31
lines changed

9 files changed

+437
-31
lines changed

‎client/packages/lowcoder/src/comps/comps/chatComp/chatCompTypes.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,29 +11,31 @@ import { AutoHeightControl } from "@lowcoder-ee/comps/controls/autoHeightControl
1111
constModelTypeOptions=[
1212
{label:"Direct LLM",value:"direct-llm"},
1313
{label:"n8n Workflow",value:"n8n"},
14+
{label:"Query",value:"query"},
1415
]asconst;
1516

1617
exportconstchatChildrenMap={
1718
text:withDefault(StringControl,"Chat Component Placeholder"),
1819
chatQuery:QuerySelectControl,
1920
currentMessage:stringExposingStateControl("currentMessage",""),
20-
modelType:dropdownControl(ModelTypeOptions,"direct-llm"),
21+
modelType:dropdownControl(ModelTypeOptions,"query"),
2122
modelHost:withDefault(StringControl,""),
2223
streaming:BoolControl.DEFAULT_TRUE,
2324
systemPrompt:withDefault(StringControl,"You are a helpful assistant."),
2425
agent:BoolControl,
2526
maxInteractions:withDefault(NumberControl,10),
26-
autoHeight:AutoHeightControl,
27-
tableName:withDefault(StringControl,""),
27+
tableName:withDefault(StringControl,"default"),
2828
};
2929

3030
exporttypeChatCompProps={
3131
text:string;
3232
chatQuery:string;
3333
currentMessage:string;
3434
modelType:string;
35+
modelHost:string;
3536
streaming:boolean;
3637
systemPrompt:string;
3738
agent:boolean;
3839
maxInteractions:number;
40+
tableName:string;
3941
};
Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
// client/packages/lowcoder/src/comps/comps/chatComp/chatView.tsx
2-
importReactfrom"react";
2+
importReact,{useMemo}from"react";
33
import{ChatCompProps}from"./chatCompTypes";
44
import{CompAction}from"lowcoder-core";
55
import{ChatApp}from"./components/ChatApp";
6+
import{createChatStorage}from'./utils/chatStorageFactory';
67

78
import"@assistant-ui/styles/index.css";
89
import"@assistant-ui/styles/markdown.css";
@@ -13,8 +14,33 @@ interface ChatViewProps extends ChatCompProps {
1314
}
1415

1516
exportconstChatView=React.memo((props:ChatViewProps)=>{
16-
const{ chatQuery, currentMessage, dispatch}=props;
17-
return<ChatAppchatQuery={chatQuery}currentMessage={currentMessage}dispatch={dispatch}/>;
17+
const{
18+
chatQuery,
19+
currentMessage,
20+
dispatch,
21+
modelType,
22+
modelHost,
23+
systemPrompt,
24+
streaming,
25+
tableName
26+
}=props;
27+
28+
// Create storage instance based on tableName
29+
conststorage=useMemo(()=>createChatStorage(tableName||"default"),[tableName]);
30+
31+
return(
32+
<ChatApp
33+
chatQuery={chatQuery}
34+
currentMessage={currentMessage}
35+
dispatch={dispatch}
36+
modelType={modelType}
37+
modelHost={modelHost}
38+
systemPrompt={systemPrompt}
39+
streaming={streaming}
40+
tableName={tableName}
41+
storage={storage}
42+
/>
43+
);
1844
});
1945

2046
ChatView.displayName='ChatView';
Lines changed: 30 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,43 @@
11
import{ChatProvider}from"./context/ChatContext";
22
import{ChatMain}from"./ChatMain";
33
import{CompAction}from"lowcoder-core";
4+
import{createChatStorage}from"../utils/chatStorageFactory";
45

56
interfaceChatAppProps{
67
chatQuery:string;
78
currentMessage:string;
89
dispatch?:(action:CompAction<any>)=>void;
10+
modelType:string;
11+
modelHost?:string;
12+
systemPrompt?:string;
13+
streaming?:boolean;
14+
tableName:string;
15+
storage:ReturnType<typeofcreateChatStorage>;
916
}
1017

11-
exportfunctionChatApp({ chatQuery, currentMessage, dispatch}:ChatAppProps){
18+
exportfunctionChatApp({
19+
chatQuery,
20+
currentMessage,
21+
dispatch,
22+
modelType,
23+
modelHost,
24+
systemPrompt,
25+
streaming,
26+
tableName,
27+
storage
28+
}:ChatAppProps){
1229
return(
13-
<ChatProvider>
14-
<ChatMainchatQuery={chatQuery}currentMessage={currentMessage}dispatch={dispatch}/>
30+
<ChatProviderstorage={storage}>
31+
<ChatMain
32+
chatQuery={chatQuery}
33+
currentMessage={currentMessage}
34+
dispatch={dispatch}
35+
modelType={modelType}
36+
modelHost={modelHost}
37+
systemPrompt={systemPrompt}
38+
streaming={streaming}
39+
tableName={tableName}
40+
/>
1541
</ChatProvider>
1642
);
17-
}
43+
}

‎client/packages/lowcoder/src/comps/comps/chatComp/components/ChatMain.tsx‎

Lines changed: 36 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,9 @@ import {
1818
importstyledfrom"styled-components";
1919
import{routeByNameAction,executeQueryAction,CompAction,changeChildAction}from"lowcoder-core";
2020
import{getPromiseAfterDispatch}from"util/promiseUtils";
21+
// ADD THIS IMPORT:
22+
import{createResponseHandler}from'../utils/responseFactory';
23+
import{useMemo}from'react';// if not already imported
2124

2225
constChatContainer=styled.div<{$autoHeight?:boolean}>`
2326
display: flex;
@@ -95,13 +98,28 @@ const callQuery = async (
9598
}
9699
};
97100

101+
// AFTER:
98102
interfaceChatMainProps{
99103
chatQuery:string;
100104
currentMessage:string;
101105
dispatch?:(action:CompAction<any>)=>void;
106+
// Add new props for response handling
107+
modelType:string;
108+
modelHost?:string;
109+
systemPrompt?:string;
110+
streaming?:boolean;
111+
tableName:string;
102112
}
103113

104-
exportfunctionChatMain({ chatQuery, currentMessage, dispatch}:ChatMainProps){
114+
exportfunctionChatMain({
115+
chatQuery,
116+
currentMessage,
117+
dispatch,
118+
modelType,
119+
modelHost,
120+
systemPrompt,
121+
streaming,
122+
tableName}:ChatMainProps){
105123
const{ state, actions}=useChatContext();
106124
const[isRunning,setIsRunning]=useState(false);
107125
consteditorState=useContext(EditorContext);
@@ -113,6 +131,21 @@ export function ChatMain({ chatQuery, currentMessage, dispatch }: ChatMainProps)
113131
editorStateRef.current=editorState;
114132
},[editorState]);
115133

134+
// Create response handler based on model type
135+
constresponseHandler=useMemo(()=>{
136+
constresponseType=modelType==="n8n" ?"direct-api" :"query";
137+
138+
returncreateResponseHandler(responseType,{
139+
// Query handler config
140+
chatQuery,
141+
dispatch,
142+
// Direct API handler config
143+
modelHost,
144+
systemPrompt,
145+
streaming
146+
});
147+
},[modelType,chatQuery,dispatch,modelHost,systemPrompt,streaming]);
148+
116149
console.log("STATE",state);
117150

118151
// Get messages for current thread
@@ -205,7 +238,7 @@ export function ChatMain({ chatQuery, currentMessage, dispatch }: ChatMainProps)
205238

206239
try{
207240
// Call selected query / fallback to mock
208-
constresponse=awaitcallQuery(chatQuery,userMessage.text,dispatch);
241+
constresponse=awaitresponseHandler.sendMessage(userMessage.text);
209242

210243
constassistantMessage:MyMessage={
211244
id:generateId(),
@@ -263,7 +296,7 @@ export function ChatMain({ chatQuery, currentMessage, dispatch }: ChatMainProps)
263296
setIsRunning(true);
264297

265298
try{
266-
constresponse=awaitcallQuery(chatQuery,editedMessage.text,dispatch);
299+
constresponse=awaitresponseHandler.sendMessage(editedMessage.text);
267300

268301
constassistantMessage:MyMessage={
269302
id:generateId(),

‎client/packages/lowcoder/src/comps/comps/chatComp/components/context/ChatContext.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
importReact,{createContext,useContext,useReducer,useEffect,ReactNode}from"react";
2-
import{chatStorage,ThreadDataasStoredThreadData}from"../../utils/chatStorage";
3-
2+
import{ThreadDataasStoredThreadData}from"../../utils/chatStorageFactory";
43
// Define thread-specific message type
54
exportinterfaceMyMessage{
65
id:string;
@@ -176,18 +175,19 @@ interface ChatContextType {
176175
constChatContext=createContext<ChatContextType|null>(null);
177176

178177
// Chat provider component
179-
exportfunctionChatProvider({ children}:{children:ReactNode}){
178+
exportfunctionChatProvider({ children, storage}:{children:ReactNode,storage:ReturnType<typeofimport("../../utils/chatStorageFactory").createChatStorage>;
179+
}){
180180
const[state,dispatch]=useReducer(chatReducer,initialState);
181181

182182
// Initialize data from storage
183183
constinitialize=async()=>{
184184
dispatch({type:"INITIALIZE_START"});
185185

186186
try{
187-
awaitchatStorage.initialize();
187+
awaitstorage.initialize();
188188

189189
// Load all threads from storage
190-
conststoredThreads=awaitchatStorage.getAllThreads();
190+
conststoredThreads=awaitstorage.getAllThreads();
191191

192192
if(storedThreads.length>0){
193193
// Convert stored threads to UI format
@@ -200,7 +200,7 @@ export function ChatProvider({ children }: { children: ReactNode }) {
200200
// Load messages for each thread
201201
constthreadMessages=newMap<string,MyMessage[]>();
202202
for(constthreadofstoredThreads){
203-
constmessages=awaitchatStorage.getMessages(thread.threadId);
203+
constmessages=awaitstorage.getMessages(thread.threadId);
204204
threadMessages.set(thread.threadId,messages);
205205
}
206206

@@ -228,7 +228,7 @@ export function ChatProvider({ children }: { children: ReactNode }) {
228228
createdAt:Date.now(),
229229
updatedAt:Date.now(),
230230
};
231-
awaitchatStorage.saveThread(defaultThread);
231+
awaitstorage.saveThread(defaultThread);
232232

233233
dispatch({
234234
type:"INITIALIZE_SUCCESS",
@@ -268,7 +268,7 @@ export function ChatProvider({ children }: { children: ReactNode }) {
268268
createdAt:Date.now(),
269269
updatedAt:Date.now(),
270270
};
271-
awaitchatStorage.saveThread(storedThread);
271+
awaitstorage.saveThread(storedThread);
272272
dispatch({type:"MARK_SAVED"});
273273
}catch(error){
274274
console.error("Failed to save new thread:",error);
@@ -283,14 +283,14 @@ export function ChatProvider({ children }: { children: ReactNode }) {
283283

284284
// Save to storage
285285
try{
286-
constexistingThread=awaitchatStorage.getThread(threadId);
286+
constexistingThread=awaitstorage.getThread(threadId);
287287
if(existingThread){
288288
constupdatedThread:StoredThreadData={
289289
...existingThread,
290290
...updates,
291291
updatedAt:Date.now(),
292292
};
293-
awaitchatStorage.saveThread(updatedThread);
293+
awaitstorage.saveThread(updatedThread);
294294
dispatch({type:"MARK_SAVED"});
295295
}
296296
}catch(error){
@@ -304,7 +304,7 @@ export function ChatProvider({ children }: { children: ReactNode }) {
304304

305305
// Delete from storage
306306
try{
307-
awaitchatStorage.deleteThread(threadId);
307+
awaitstorage.deleteThread(threadId);
308308
dispatch({type:"MARK_SAVED"});
309309
}catch(error){
310310
console.error("Failed to delete thread:",error);
@@ -318,7 +318,7 @@ export function ChatProvider({ children }: { children: ReactNode }) {
318318

319319
// Save to storage
320320
try{
321-
awaitchatStorage.saveMessage(message,threadId);
321+
awaitstorage.saveMessage(message,threadId);
322322
dispatch({type:"MARK_SAVED"});
323323
}catch(error){
324324
console.error("Failed to save message:",error);
@@ -331,7 +331,7 @@ export function ChatProvider({ children }: { children: ReactNode }) {
331331

332332
// Save to storage
333333
try{
334-
awaitchatStorage.saveMessages(messages,threadId);
334+
awaitstorage.saveMessages(messages,threadId);
335335
dispatch({type:"MARK_SAVED"});
336336
}catch(error){
337337
console.error("Failed to save messages:",error);

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp