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

Commitac38c66

Browse files
iamfaranraheeliftikhar5
authored andcommitted
add system prompt and improve edit UI
1 parent5d88dbe commitac38c66

File tree

5 files changed

+113
-49
lines changed

5 files changed

+113
-49
lines changed

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

Lines changed: 45 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { createChatStorage } from "./utils/storageFactory";
1515
import{QueryHandler,createMessageHandler}from"./handlers/messageHandlers";
1616
import{useMemo,useRef,useEffect}from"react";
1717
import{changeChildAction}from"lowcoder-core";
18+
import{ChatMessage}from"./types/chatTypes";
1819

1920
import"@assistant-ui/styles/index.css";
2021
import"@assistant-ui/styles/markdown.css";
@@ -74,6 +75,30 @@ export const ChatEventHandlerControl = eventHandlerControl(ChatEventOptions);
7475
// SIMPLIFIED CHILDREN MAP - WITH EVENT HANDLERS
7576
// ============================================================================
7677

78+
79+
exportfunctionaddSystemPromptToHistory(
80+
conversationHistory:ChatMessage[],
81+
systemPrompt:string
82+
):Array<{role:string;content:string;timestamp:number}>{
83+
// Format conversation history for use in queries
84+
constformattedHistory=conversationHistory.map(msg=>({
85+
role:msg.role,
86+
content:msg.text,
87+
timestamp:msg.timestamp
88+
}));
89+
90+
// Create system message (always exists since we have default)
91+
constsystemMessage=[{
92+
role:"system"asconst,
93+
content:systemPrompt,
94+
timestamp:Date.now()-1000000// Ensure it's always first chronologically
95+
}];
96+
97+
// Return complete history with system prompt prepended
98+
return[...systemMessage, ...formattedHistory];
99+
}
100+
101+
77102
functiongenerateUniqueTableName():string{
78103
return`chat${Math.floor(1000+Math.random()*9000)}`;
79104
}
@@ -117,7 +142,6 @@ const ChatTmpComp = new UICompBuilder(
117142
(props,dispatch)=>{
118143

119144
constuniqueTableName=useRef<string>();
120-
121145
// Generate unique table name once (with persistence)
122146
if(!uniqueTableName.current){
123147
// Use persisted name if exists, otherwise generate new one
@@ -146,7 +170,7 @@ const ChatTmpComp = new UICompBuilder(
146170
returnnewQueryHandler({
147171
chatQuery:props.chatQuery.value,
148172
dispatch,
149-
streaming:props.streaming
173+
streaming:props.streaming,
150174
});
151175
}elseif(handlerType==="n8n"){
152176
returncreateMessageHandler("n8n",{
@@ -168,7 +192,7 @@ const ChatTmpComp = new UICompBuilder(
168192
props.modelHost,
169193
props.systemPrompt,
170194
props.streaming,
171-
dispatch
195+
dispatch,
172196
]);
173197

174198
// Handle message updates for exposed variable
@@ -179,21 +203,23 @@ const ChatTmpComp = new UICompBuilder(
179203
};
180204

181205
// Handle conversation history updates for exposed variable
182-
consthandleConversationUpdate=(conversationHistory:any[])=>{
183-
// Format conversation history for use in queries
184-
constformattedHistory=conversationHistory.map(msg=>({
185-
role:msg.role,
186-
content:msg.text,
187-
timestamp:msg.timestamp
188-
}));
189-
dispatch(changeChildAction("conversationHistory",JSON.stringify(formattedHistory),false));
190-
191-
// Trigger messageReceived event when bot responds
192-
constlastMessage=conversationHistory[conversationHistory.length-1];
193-
if(lastMessage&&lastMessage.role==='assistant'){
194-
props.onEvent("messageReceived");
195-
}
196-
};
206+
// Handle conversation history updates for exposed variable
207+
consthandleConversationUpdate=(conversationHistory:any[])=>{
208+
// Use utility function to create complete history with system prompt
209+
consthistoryWithSystemPrompt=addSystemPromptToHistory(
210+
conversationHistory,
211+
props.systemPrompt
212+
);
213+
214+
// Expose the complete history (with system prompt) for use in queries
215+
dispatch(changeChildAction("conversationHistory",JSON.stringify(historyWithSystemPrompt),false));
216+
217+
// Trigger messageReceived event when bot responds
218+
constlastMessage=conversationHistory[conversationHistory.length-1];
219+
if(lastMessage&&lastMessage.role==='assistant'){
220+
props.onEvent("messageReceived");
221+
}
222+
};
197223

198224
// Cleanup on unmount
199225
useEffect(()=>{
@@ -226,5 +252,5 @@ const ChatTmpComp = new UICompBuilder(
226252

227253
exportconstChatComp=withExposingConfigs(ChatTmpComp,[
228254
newNameConfig("currentMessage","Current user message"),
229-
newNameConfig("conversationHistory","Full conversation history as JSON array"),
255+
newNameConfig("conversationHistory","Full conversation history as JSON array (includes system prompt for API calls)"),
230256
]);

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,7 @@ export function ChatCoreMain({
127127
setIsRunning(true);
128128

129129
try{
130+
130131
// Use the message handler (no more complex logic here!)
131132
constresponse=awaitmessageHandler.sendMessage(userMessage.text);
132133

‎client/packages/lowcoder/src/comps/comps/chatComp/components/assistant-ui/thread-list.tsx‎

Lines changed: 58 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
importtype{FC}from"react";
2+
import{useState}from"react";
23
import{
34
ThreadListItemPrimitive,
45
ThreadListPrimitive,
6+
useThreadListItem,
57
}from"@assistant-ui/react";
68
import{PencilIcon,PlusIcon,Trash2Icon}from"lucide-react";
7-
89
import{TooltipIconButton}from"./tooltip-icon-button";
910
import{useThreadListItemRuntime}from"@assistant-ui/react";
10-
import{Button,Flex}from"antd";
11+
import{Button,Flex,Input}from"antd";
1112

1213
importstyledfrom"styled-components";
13-
import{useChatContext}from"../context/ChatContext";
1414

1515
constStyledPrimaryButton=styled(Button)`
1616
// padding: 20px;
@@ -44,12 +44,23 @@ const ThreadListItems: FC = () => {
4444
};
4545

4646
constThreadListItem:FC=()=>{
47+
const[editing,setEditing]=useState(false);
48+
4749
return(
4850
<ThreadListItemPrimitive.RootclassName="aui-thread-list-item">
4951
<ThreadListItemPrimitive.TriggerclassName="aui-thread-list-item-trigger">
50-
<ThreadListItemTitle/>
52+
{editing ?(
53+
<ThreadListItemEditInput
54+
onFinish={()=>setEditing(false)}
55+
/>
56+
) :(
57+
<ThreadListItemTitle/>
58+
)}
5159
</ThreadListItemPrimitive.Trigger>
52-
<ThreadListItemRename/>
60+
<ThreadListItemRename
61+
onStartEdit={()=>setEditing(true)}
62+
editing={editing}
63+
/>
5364
<ThreadListItemDelete/>
5465
</ThreadListItemPrimitive.Root>
5566
);
@@ -78,37 +89,57 @@ const ThreadListItemDelete: FC = () => {
7889
};
7990

8091

81-
constThreadListItemRename:FC=()=>{
82-
construntime=useThreadListItemRuntime();
92+
93+
constThreadListItemEditInput:FC<{onFinish:()=>void}>=({ onFinish})=>{
94+
constthreadItem=useThreadListItem();
95+
constthreadRuntime=useThreadListItemRuntime();
8396

84-
consthandleClick=async()=>{
85-
// runtime doesn't expose a direct `title` prop; read it from its state
86-
letcurrent="";
87-
try{
88-
// getState is part of the public runtime surface
89-
current=(runtime.getState?.()asany)?.title??"";
90-
}catch{
91-
// fallback – generate a title if the runtime provides a helper
92-
if(typeof(runtimeasany).generateTitle==="function"){
93-
// generateTitle(threadId) in older builds, generateTitle() in newer ones
94-
current=(runtimeasany).generateTitle((runtimeasany).threadId??undefined);
95-
}
97+
constcurrentTitle=threadItem?.title||"New Chat";
98+
99+
consthandleRename=async(newTitle:string)=>{
100+
if(!newTitle.trim()||newTitle===currentTitle){
101+
onFinish();
102+
return;
96103
}
97-
98-
constnext=prompt("Rename thread",current)?.trim();
99-
if(next&&next!==current){
100-
awaitruntime.rename(next);
104+
105+
try{
106+
awaitthreadRuntime.rename(newTitle);
107+
onFinish();
108+
}catch(error){
109+
console.error("Failed to rename thread:",error);
101110
}
102111
};
103112

113+
return(
114+
<Input
115+
size="small"
116+
defaultValue={currentTitle}
117+
onBlur={(e)=>handleRename(e.target.value)}
118+
onPressEnter={(e)=>handleRename((e.targetasHTMLInputElement).value)}
119+
onKeyDown={(e)=>{
120+
if(e.key==='Escape')onFinish();
121+
}}
122+
autoFocus
123+
style={{fontSize:'14px',padding:'2px 8px'}}
124+
/>
125+
);
126+
};
127+
128+
129+
constThreadListItemRename:FC<{onStartEdit:()=>void;editing:boolean}>=({
130+
onStartEdit,
131+
editing
132+
})=>{
133+
if(editing)returnnull;
134+
104135
return(
105136
<TooltipIconButton
106-
tooltip="Rename thread"
107137
variant="ghost"
108-
onClick={handleClick}
109-
className="aui-thread-list-item-rename"
138+
tooltip="Rename thread"
139+
onClick={onStartEdit}
110140
>
111141
<PencilIcon/>
112142
</TooltipIconButton>
113143
);
114-
};
144+
};
145+

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

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export class QueryHandler implements MessageHandler {
5555
constructor(privateconfig:QueryHandlerConfig){}
5656

5757
asyncsendMessage(message:string):Promise<MessageResponse>{
58-
const{ chatQuery, dispatch}=this.config;
58+
const{ chatQuery, dispatch}=this.config;
5959

6060
// If no query selected or dispatch unavailable, return mock response
6161
if(!chatQuery||!dispatch){
@@ -64,17 +64,22 @@ export class QueryHandler implements MessageHandler {
6464
}
6565

6666
try{
67+
6768
constresult:any=awaitgetPromiseAfterDispatch(
6869
dispatch,
6970
routeByNameAction(
7071
chatQuery,
7172
executeQueryAction({
72-
// Send the user prompt as variable named 'prompt' by default
73-
args:{prompt:{value:message}},
73+
// Send both individual prompt and full conversation history
74+
args:{
75+
prompt:{value:message},
76+
},
7477
})
7578
)
7679
);
7780

81+
console.log("QUERY RESULT",result);
82+
7883
returnresult.message
7984
}catch(e:any){
8085
thrownewError(e?.message||"Query execution failed");

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ export interface ChatMessage {
6666
chatQuery:string;
6767
dispatch:any;
6868
streaming?:boolean;
69+
systemPrompt?:string;
6970
}
7071

7172
// ============================================================================

0 commit comments

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