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

Commitcf0b99c

Browse files
iamfaranraheeliftikhar5
authored andcommitted
chat component refactor
1 parent7b68581 commitcf0b99c

File tree

17 files changed

+1453
-1690
lines changed

17 files changed

+1453
-1690
lines changed
Lines changed: 116 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,117 @@
1-
// client/packages/lowcoder/src/comps/comps/chatComp/chatComp.tsx
2-
import{UICompBuilder}from"comps/generators";
3-
import{NameConfig,withExposingConfigs}from"comps/generators/withExposing";
4-
import{chatChildrenMap}from"./chatCompTypes";
5-
import{ChatView}from"./chatView";
6-
import{ChatPropertyView}from"./chatPropertyView";
7-
import{useEffect,useState}from"react";
8-
import{changeChildAction}from"lowcoder-core";
9-
10-
// Build the component
11-
constChatTmpComp=newUICompBuilder(
12-
chatChildrenMap,
13-
(props,dispatch)=>(
14-
<ChatView
15-
{...props}
16-
chatQuery={props.chatQuery.value}
17-
currentMessage={props.currentMessage.value}
18-
dispatch={dispatch}
19-
/>
20-
)
21-
)
22-
.setPropertyViewFn((children)=><ChatPropertyViewchildren={children}/>)
23-
.build();
24-
25-
// Export the component with exposed variables
26-
exportconstChatComp=withExposingConfigs(ChatTmpComp,[
27-
newNameConfig("text","Chat component text"),
28-
newNameConfig("currentMessage","Current user message"),
1+
// client/packages/lowcoder/src/comps/comps/chatComp/chatComp.tsx
2+
3+
import{UICompBuilder}from"comps/generators";
4+
import{NameConfig,withExposingConfigs}from"comps/generators/withExposing";
5+
import{StringControl}from"comps/controls/codeControl";
6+
import{stringExposingStateControl}from"comps/controls/codeStateControl";
7+
import{withDefault}from"comps/generators";
8+
import{BoolControl}from"comps/controls/boolControl";
9+
import{dropdownControl}from"comps/controls/dropdownControl";
10+
importQuerySelectControlfrom"comps/controls/querySelectControl";
11+
import{ChatCore}from"./components/ChatCore";
12+
import{ChatPropertyView}from"./chatPropertyView";
13+
import{createChatStorage}from"./utils/storageFactory";
14+
import{QueryHandler,createMessageHandler}from"./handlers/messageHandlers";
15+
import{useMemo}from"react";
16+
import{changeChildAction}from"lowcoder-core";
17+
18+
import"@assistant-ui/styles/index.css";
19+
import"@assistant-ui/styles/markdown.css";
20+
21+
// ============================================================================
22+
// SIMPLIFIED CHILDREN MAP - ONLY ESSENTIAL PROPS
23+
// ============================================================================
24+
25+
constModelTypeOptions=[
26+
{label:"Query",value:"query"},
27+
{label:"N8N Workflow",value:"n8n"},
28+
]asconst;
29+
30+
exportconstchatChildrenMap={
31+
// Storage
32+
tableName:withDefault(StringControl,"default"),
33+
34+
// Message Handler Configuration
35+
handlerType:dropdownControl(ModelTypeOptions,"query"),
36+
chatQuery:QuerySelectControl,// Only used for "query" type
37+
modelHost:withDefault(StringControl,""),// Only used for "n8n" type
38+
systemPrompt:withDefault(StringControl,"You are a helpful assistant."),
39+
streaming:BoolControl.DEFAULT_TRUE,
40+
41+
// UI Configuration
42+
placeholder:withDefault(StringControl,"Chat Component"),
43+
44+
// Exposed Variables (not shown in Property View)
45+
currentMessage:stringExposingStateControl("currentMessage",""),
46+
};
47+
48+
// ============================================================================
49+
// CLEAN CHATCOMP - USES NEW ARCHITECTURE
50+
// ============================================================================
51+
52+
constChatTmpComp=newUICompBuilder(
53+
chatChildrenMap,
54+
(props,dispatch)=>{
55+
// Create storage from tableName
56+
conststorage=useMemo(()=>
57+
createChatStorage(props.tableName),
58+
[props.tableName]
59+
);
60+
61+
// Create message handler based on type
62+
constmessageHandler=useMemo(()=>{
63+
consthandlerType=props.handlerType;
64+
65+
if(handlerType==="query"){
66+
returnnewQueryHandler({
67+
chatQuery:props.chatQuery.value,
68+
dispatch,
69+
streaming:props.streaming
70+
});
71+
}elseif(handlerType==="n8n"){
72+
returncreateMessageHandler("n8n",{
73+
modelHost:props.modelHost,
74+
systemPrompt:props.systemPrompt,
75+
streaming:props.streaming
76+
});
77+
}else{
78+
// Fallback to mock handler
79+
returncreateMessageHandler("mock",{
80+
chatQuery:props.chatQuery.value,
81+
dispatch,
82+
streaming:props.streaming
83+
});
84+
}
85+
},[
86+
props.handlerType,
87+
props.chatQuery,
88+
props.modelHost,
89+
props.systemPrompt,
90+
props.streaming,
91+
dispatch
92+
]);
93+
94+
// Handle message updates for exposed variable
95+
consthandleMessageUpdate=(message:string)=>{
96+
dispatch(changeChildAction("currentMessage",message,false));
97+
};
98+
99+
return(
100+
<ChatCore
101+
storage={storage}
102+
messageHandler={messageHandler}
103+
onMessageUpdate={handleMessageUpdate}
104+
/>
105+
);
106+
}
107+
)
108+
.setPropertyViewFn((children)=><ChatPropertyViewchildren={children}/>)
109+
.build();
110+
111+
// ============================================================================
112+
// EXPORT WITH EXPOSED VARIABLES
113+
// ============================================================================
114+
115+
exportconstChatComp=withExposingConfigs(ChatTmpComp,[
116+
newNameConfig("currentMessage","Current user message"),
29117
]);
Lines changed: 21 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,26 @@
11
// client/packages/lowcoder/src/comps/comps/chatComp/chatCompTypes.ts
2-
import{StringControl,NumberControl}from"comps/controls/codeControl";
3-
import{stringExposingStateControl}from"comps/controls/codeStateControl";
4-
import{withDefault}from"comps/generators";
5-
import{BoolControl}from"comps/controls/boolControl";
6-
import{dropdownControl}from"comps/controls/dropdownControl";
7-
importQuerySelectControlfrom"comps/controls/querySelectControl";
8-
import{AutoHeightControl}from"@lowcoder-ee/comps/controls/autoHeightControl";
92

10-
// Model type dropdown options
11-
constModelTypeOptions=[
12-
{label:"Direct LLM",value:"direct-llm"},
13-
{label:"n8n Workflow",value:"n8n"},
14-
{label:"Query",value:"query"},
15-
]asconst;
16-
17-
exportconstchatChildrenMap={
18-
text:withDefault(StringControl,"Chat Component Placeholder"),
19-
chatQuery:QuerySelectControl,
20-
currentMessage:stringExposingStateControl("currentMessage",""),
21-
modelType:dropdownControl(ModelTypeOptions,"query"),
22-
modelHost:withDefault(StringControl,""),
23-
streaming:BoolControl.DEFAULT_TRUE,
24-
systemPrompt:withDefault(StringControl,"You are a helpful assistant."),
25-
agent:BoolControl,
26-
maxInteractions:withDefault(NumberControl,10),
27-
tableName:withDefault(StringControl,"default"),
28-
};
3+
// ============================================================================
4+
// CLEAN CHATCOMP TYPES - SIMPLIFIED AND FOCUSED
5+
// ============================================================================
296

307
exporttypeChatCompProps={
31-
text:string;
32-
chatQuery:string;
33-
currentMessage:string;
34-
modelType:string;
35-
modelHost:string;
36-
streaming:boolean;
37-
systemPrompt:string;
38-
agent:boolean;
39-
maxInteractions:number;
8+
// Storage
409
tableName:string;
41-
};
10+
11+
// Message Handler
12+
handlerType:"query"|"n8n";
13+
chatQuery:string;// Only used when handlerType === "query"
14+
modelHost:string;// Only used when handlerType === "n8n"
15+
systemPrompt:string;
16+
streaming:boolean;
17+
18+
// UI
19+
placeholder:string;
20+
21+
// Exposed Variables
22+
currentMessage:string;// Read-only exposed variable
23+
};
24+
25+
// Legacy export for backwards compatibility (if needed)
26+
exporttypeChatCompLegacyProps=ChatCompProps;
Lines changed: 68 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,69 @@
1-
// client/packages/lowcoder/src/comps/comps/chatComp/chatPropertyView.tsx
2-
importReactfrom"react";
3-
import{Section,sectionNames}from"lowcoder-design";
4-
import{trans}from"i18n";
5-
6-
exportconstChatPropertyView=React.memo((props:any)=>{
7-
const{ children}=props;
8-
9-
return(
10-
<Sectionname={sectionNames.basic}>
11-
{children.text.propertyView({label:"Text"})}
12-
{children.chatQuery.propertyView({label:"Chat Query"})}
13-
{children.currentMessage.propertyView({
14-
label:"Current Message (Dynamic)",
15-
placeholder:"Shows the current user message",
16-
disabled:true
17-
})}
18-
{children.modelType.propertyView({label:"Model Type"})}
19-
{children.streaming.propertyView({label:"Enable Streaming"})}
20-
{children.systemPrompt.propertyView({
21-
label:"System Prompt",
22-
placeholder:"Enter system prompt...",
23-
enableSpellCheck:false,
24-
})}
25-
{children.agent.propertyView({label:"Enable Agent Mode"})}
26-
{children.maxInteractions.propertyView({
27-
label:"Max Interactions",
28-
placeholder:"10",
29-
})}
30-
</Section>
31-
);
32-
});
33-
1+
// client/packages/lowcoder/src/comps/comps/chatComp/chatPropertyView.tsx
2+
3+
importReactfrom"react";
4+
import{Section,sectionNames}from"lowcoder-design";
5+
6+
// ============================================================================
7+
// CLEAN PROPERTY VIEW - FOCUSED ON ESSENTIAL CONFIGURATION
8+
// ============================================================================
9+
10+
exportconstChatPropertyView=React.memo((props:any)=>{
11+
const{ children}=props;
12+
13+
return(
14+
<>
15+
{/* Basic Configuration */}
16+
<Sectionname={sectionNames.basic}>
17+
{children.placeholder.propertyView({
18+
label:"Placeholder Text",
19+
placeholder:"Enter placeholder text..."
20+
})}
21+
22+
{children.tableName.propertyView({
23+
label:"Storage Table",
24+
placeholder:"default",
25+
tooltip:"Storage identifier - use same value to share conversations between components"
26+
})}
27+
</Section>
28+
29+
{/* Message Handler Configuration */}
30+
<Sectionname="Message Handler">
31+
{children.handlerType.propertyView({
32+
label:"Handler Type",
33+
tooltip:"How messages are processed"
34+
})}
35+
36+
{/* Show chatQuery field only for "query" handler */}
37+
{children.handlerType.value==="query"&&(
38+
children.chatQuery.propertyView({
39+
label:"Chat Query",
40+
placeholder:"Select a query to handle messages"
41+
})
42+
)}
43+
44+
{/* Show modelHost field only for "n8n" handler */}
45+
{children.handlerType.value==="n8n"&&(
46+
children.modelHost.propertyView({
47+
label:"N8N Webhook URL",
48+
placeholder:"http://localhost:5678/webhook/...",
49+
tooltip:"N8N webhook endpoint for processing messages"
50+
})
51+
)}
52+
53+
{children.systemPrompt.propertyView({
54+
label:"System Prompt",
55+
placeholder:"You are a helpful assistant...",
56+
tooltip:"Initial instructions for the AI"
57+
})}
58+
59+
{children.streaming.propertyView({
60+
label:"Enable Streaming",
61+
tooltip:"Stream responses in real-time (when supported)"
62+
})}
63+
</Section>
64+
65+
</>
66+
);
67+
});
68+
3469
ChatPropertyView.displayName='ChatPropertyView';

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

Lines changed: 0 additions & 46 deletions
This file was deleted.

0 commit comments

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