Skip to content

Commit 4585d15

Browse files
iamfaranraheeliftikhar5
iamfaran
authored and
raheeliftikhar5
committed
[feat] replace mock data with query
1 parent 6d5fbfd commit 4585d15

File tree

6 files changed

+125
-125
lines changed

6 files changed

+125
-125
lines changed

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

Lines changed: 12 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -8,39 +8,22 @@ import { useEffect, useState } from "react";
88
import { changeChildAction } from "lowcoder-core";
99

1010
// Build the component
11-
let ChatTmpComp = new UICompBuilder(
12-
chatChildrenMap,
13-
(props, dispatch) => {
14-
useEffect(() => {
15-
if (Boolean(props.tableName)) return;
16-
17-
// Generate a unique database name for this ChatApp instance
18-
const generateUniqueTableName = () => {
19-
const timestamp = Date.now();
20-
const randomId = Math.random().toString(36).substring(2, 15);
21-
return `TABLE_${timestamp}`;
22-
};
23-
24-
const tableName = generateUniqueTableName();
25-
dispatch(changeChildAction('tableName', tableName, true));
26-
}, [props.tableName]);
27-
28-
if (!props.tableName) {
29-
return null; // Don't render until we have a unique DB name
30-
}
31-
return <ChatView {...props} chatQuery={props.chatQuery.value} />;
32-
}
11+
const ChatTmpComp = new UICompBuilder(
12+
chatChildrenMap,
13+
(props, dispatch) => (
14+
<ChatView
15+
{...props}
16+
chatQuery={props.chatQuery.value}
17+
currentMessage={props.currentMessage.value}
18+
dispatch={dispatch}
19+
/>
20+
)
3321
)
3422
.setPropertyViewFn((children) => <ChatPropertyView children={children} />)
3523
.build();
3624

37-
ChatTmpComp = class extends ChatTmpComp {
38-
override autoHeight(): boolean {
39-
return this.children.autoHeight.getView();
40-
}
41-
};
42-
43-
// Export the component
25+
// Export the component with exposed variables
4426
export const ChatComp = withExposingConfigs(ChatTmpComp, [
4527
new NameConfig("text", "Chat component text"),
28+
new NameConfig("currentMessage", "Current user message"),
4629
]);

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

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
// client/packages/lowcoder/src/comps/comps/chatComp/chatCompTypes.ts
22
import { StringControl, NumberControl } from "comps/controls/codeControl";
3+
import { stringExposingStateControl } from "comps/controls/codeStateControl";
34
import { withDefault } from "comps/generators";
45
import { BoolControl } from "comps/controls/boolControl";
56
import { dropdownControl } from "comps/controls/dropdownControl";
@@ -14,26 +15,25 @@ const ModelTypeOptions = [
1415

1516
export const chatChildrenMap = {
1617
text: withDefault(StringControl, "Chat Component Placeholder"),
18+
chatQuery: QuerySelectControl,
19+
currentMessage: stringExposingStateControl("currentMessage", ""),
1720
modelType: dropdownControl(ModelTypeOptions, "direct-llm"),
1821
modelHost: withDefault(StringControl, ""),
1922
streaming: BoolControl.DEFAULT_TRUE,
2023
systemPrompt: withDefault(StringControl, "You are a helpful assistant."),
2124
agent: BoolControl,
2225
maxInteractions: withDefault(NumberControl, 10),
23-
chatQuery: QuerySelectControl,
2426
autoHeight: AutoHeightControl,
2527
tableName: withDefault(StringControl, ""),
2628
};
2729

2830
export type ChatCompProps = {
29-
text?: string;
30-
chatQuery?: string;
31-
modelType?: string;
32-
streaming?: boolean;
33-
systemPrompt?: string;
34-
agent?: boolean;
35-
maxInteractions?: number;
36-
modelHost?: string;
37-
autoHeight?: boolean;
38-
tableName?: string;
31+
text: string;
32+
chatQuery: string;
33+
currentMessage: string;
34+
modelType: string;
35+
streaming: boolean;
36+
systemPrompt: string;
37+
agent: boolean;
38+
maxInteractions: number;
3939
};

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

Lines changed: 21 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -7,28 +7,27 @@ export const ChatPropertyView = React.memo((props: any) => {
77
const { children } = props;
88

99
return (
10-
<>
11-
<Section name={sectionNames.basic}>
12-
{children.modelType.propertyView({ label: "Model Type" })}
13-
{children.modelHost.propertyView({ label: "Model Host" })}
14-
{/* {children.text.propertyView({ label: "Text" })}
15-
{children.chatQuery.propertyView({ label: "Chat Query" })} */}
16-
{children.streaming.propertyView({ label: "Enable Streaming" })}
17-
{children.systemPrompt.propertyView({
18-
label: "System Prompt",
19-
placeholder: "Enter system prompt...",
20-
enableSpellCheck: false,
21-
})}
22-
{children.agent.propertyView({ label: "Enable Agent Mode" })}
23-
{children.maxInteractions.propertyView({
24-
label: "Max Interactions",
25-
placeholder: "10",
26-
})}
27-
</Section>
28-
<Section name={sectionNames.layout}>
29-
{children.autoHeight.propertyView({ label: trans("prop.height") })}
30-
</Section>
31-
</>
10+
<Section name={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>
3231
);
3332
});
3433

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,20 @@
11
// client/packages/lowcoder/src/comps/comps/chatComp/chatView.tsx
22
import React from "react";
33
import { ChatCompProps } from "./chatCompTypes";
4+
import { CompAction } from "lowcoder-core";
45
import { ChatApp } from "./components/ChatApp";
56

67
import "@assistant-ui/styles/index.css";
78
import "@assistant-ui/styles/markdown.css";
89

9-
export const ChatView = React.memo((props: ChatCompProps) => {
10-
return <ChatApp {...props} />;
10+
// Extend the props we receive so we can forward the redux dispatch
11+
interface ChatViewProps extends ChatCompProps {
12+
dispatch?: (action: CompAction<any>) => void;
13+
}
14+
15+
export const ChatView = React.memo((props: ChatViewProps) => {
16+
const { chatQuery, currentMessage, dispatch } = props;
17+
return <ChatApp chatQuery={chatQuery} currentMessage={currentMessage} dispatch={dispatch} />;
1118
});
1219

1320
ChatView.displayName = 'ChatView';

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

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
import { ChatProvider } from "./context/ChatContext";
22
import { ChatMain } from "./ChatMain";
3-
import { ChatCompProps } from "../chatCompTypes";
4-
import { useEffect, useState } from "react";
3+
import { CompAction } from "lowcoder-core";
54

6-
export function ChatApp(props: ChatCompProps) {
7-
if (!Boolean(props.tableName)) {
8-
return null; // Don't render until we have a unique DB name
9-
}
10-
5+
interface ChatAppProps {
6+
chatQuery: string;
7+
currentMessage: string;
8+
dispatch?: (action: CompAction<any>) => void;
9+
}
10+
11+
export function ChatApp({ chatQuery, currentMessage, dispatch }: ChatAppProps) {
1112
return (
1213
<ChatProvider>
13-
<ChatMain {...props} />
14+
<ChatMain chatQuery={chatQuery} currentMessage={currentMessage} dispatch={dispatch} />
1415
</ChatProvider>
1516
);
1617
}

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

Lines changed: 63 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,8 @@ import {
1616
ArchivedThreadData
1717
} from "./context/ChatContext";
1818
import styled from "styled-components";
19-
import { ChatCompProps } from "../chatCompTypes";
20-
import { message } from "antd";
21-
import { EditorContext } from "@lowcoder-ee/comps/editorState";
22-
import { addComponentAction, nestComponentAction } from "../../preLoadComp/actions/componentManagement";
23-
import { configureComponentAction } from "../../preLoadComp/actions/componentConfiguration";
19+
import { routeByNameAction, executeQueryAction, CompAction, changeChildAction } from "lowcoder-core";
20+
import { getPromiseAfterDispatch } from "util/promiseUtils";
2421

2522
const ChatContainer = styled.div<{ $autoHeight?: boolean }>`
2623
display: flex;
@@ -54,38 +51,57 @@ const ChatContainer = styled.div<{ $autoHeight?: boolean }>`
5451

5552
const generateId = () => Math.random().toString(36).substr(2, 9);
5653

57-
const callYourAPI = async (params: {
58-
text: string,
59-
modelHost: string,
60-
modelType: string,
61-
sessionId: string,
62-
}) => {
63-
const { text, modelHost, modelType, sessionId } = params;
64-
65-
let url = modelHost;
66-
if (modelType === "direct-llm") {
67-
url = `${modelHost}/api/chat/completions`;
54+
// Helper to call the Lowcoder query system
55+
const callQuery = async (
56+
queryName: string,
57+
prompt: string,
58+
dispatch?: (action: CompAction<any>) => void
59+
) => {
60+
// If no query selected or dispatch unavailable, fallback with mock response
61+
if (!queryName || !dispatch) {
62+
await new Promise((res) => setTimeout(res, 500));
63+
return { content: "(mock) You typed: " + prompt };
6864
}
6965

70-
const response = await fetch(`${url}`, {
71-
method: "POST",
72-
body: JSON.stringify({
73-
text,
74-
sessionId,
75-
}),
76-
});
66+
try {
67+
const result: any = await getPromiseAfterDispatch(
68+
dispatch,
69+
routeByNameAction(
70+
queryName,
71+
executeQueryAction({
72+
// Send the user prompt as variable named 'prompt' by default
73+
args: { prompt: { value: prompt } },
74+
})
75+
)
76+
);
77+
78+
// Extract reply text from the query result
79+
let reply: string;
80+
if (typeof result === "string") {
81+
reply = result;
82+
} else if (result && typeof result === "object") {
83+
reply =
84+
(result as any).response ??
85+
(result as any).message ??
86+
(result as any).content ??
87+
JSON.stringify(result);
88+
} else {
89+
reply = String(result);
90+
}
7791

78-
return response.json();
79-
// Simulate API delay
80-
// await new Promise(resolve => setTimeout(resolve, 1500));
81-
82-
// Simple responses
83-
// return {
84-
// content: "This is a mock response from your backend. You typed: " + text
85-
// };
92+
return { content: reply };
93+
} catch (e: any) {
94+
throw new Error(e?.message || "Query execution failed");
95+
}
8696
};
8797

88-
export function ChatMain(props: ChatCompProps) {
98+
interface ChatMainProps {
99+
chatQuery: string;
100+
currentMessage: string;
101+
dispatch?: (action: CompAction<any>) => void;
102+
}
103+
104+
export function ChatMain({ chatQuery, currentMessage, dispatch }: ChatMainProps) {
89105
const { state, actions } = useChatContext();
90106
const [isRunning, setIsRunning] = useState(false);
91107
const editorState = useContext(EditorContext);
@@ -178,21 +194,19 @@ export function ChatMain(props: ChatCompProps) {
178194
timestamp: Date.now(),
179195
};
180196

197+
// Update currentMessage state to expose to queries
198+
if (dispatch) {
199+
dispatch(changeChildAction("currentMessage", userMessage.text, false));
200+
}
201+
181202
// Update current thread with new user message
182203
await actions.addMessage(state.currentThreadId, userMessage);
183204
setIsRunning(true);
184205

185206
try {
186-
// Call mock API
187-
const response = await callYourAPI({
188-
text: userMessage.text,
189-
modelHost: props.modelHost!,
190-
modelType: props.modelType!,
191-
sessionId: state.currentThreadId,
192-
});
193-
const {explanation: reply, actions: editorActions} = JSON.parse(response?.output);
194-
performAction(editorActions);
195-
207+
// Call selected query / fallback to mock
208+
const response = await callQuery(chatQuery, userMessage.text, dispatch);
209+
196210
const assistantMessage: MyMessage = {
197211
id: generateId(),
198212
role: "assistant",
@@ -239,22 +253,18 @@ export function ChatMain(props: ChatCompProps) {
239253
};
240254
newMessages.push(editedMessage);
241255

256+
// Update currentMessage state to expose to queries
257+
if (dispatch) {
258+
dispatch(changeChildAction("currentMessage", editedMessage.text, false));
259+
}
260+
242261
// Update messages using the new context action
243262
await actions.updateMessages(state.currentThreadId, newMessages);
244263
setIsRunning(true);
245264

246265
try {
247-
// Generate new response
248-
const response = await callYourAPI({
249-
text: editedMessage.text,
250-
modelHost: props.modelHost!,
251-
modelType: props.modelType!,
252-
sessionId: state.currentThreadId,
253-
});
254-
255-
const {explanation: reply, actions: editorActions} = JSON.parse(response?.output);
256-
performAction(editorActions);
257-
266+
const response = await callQuery(chatQuery, editedMessage.text, dispatch);
267+
258268
const assistantMessage: MyMessage = {
259269
id: generateId(),
260270
role: "assistant",

0 commit comments

Comments
 (0)