Skip to content

Commit b820f8e

Browse files
iamfaraniamfaran
committed
use mock data
1 parent aec9485 commit b820f8e

File tree

2 files changed

+75
-112
lines changed

2 files changed

+75
-112
lines changed

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

Lines changed: 5 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -1,128 +1,21 @@
11
// client/packages/lowcoder/src/comps/comps/chatComp/chatView.tsx
2-
import React, { useState, useContext } from "react";
2+
import React from "react";
33
import { ChatCompProps } from "./chatCompTypes";
44
import { Thread } from "./components/assistant-ui/thread";
55

6-
// Import assistant-ui components for external store runtime
7-
import {
8-
AssistantRuntimeProvider,
9-
useExternalStoreRuntime,
10-
ThreadMessageLike,
11-
AppendMessage
12-
} from "@assistant-ui/react";
136
import "@assistant-ui/styles/index.css";
147
import "@assistant-ui/styles/markdown.css";
158

16-
// Import Lowcoder query execution
17-
import { EditorContext } from "comps/editorState";
18-
import { executeQueryAction, routeByNameAction } from "lowcoder-core";
199

20-
const convertMessage = (message: ThreadMessageLike) => {
21-
return message;
22-
};
10+
import { MyRuntimeProvider } from "./components/context/MyRuntimeProvider";
2311

24-
export const ChatView = React.memo((props: ChatCompProps) => {
25-
const [messages, setMessages] = useState<readonly ThreadMessageLike[]>([]);
26-
const editorState = useContext(EditorContext);
27-
28-
const onNew = async (message: AppendMessage) => {
29-
if (message.content.length !== 1 || message.content[0]?.type !== "text") {
30-
throw new Error("Only text content is supported");
31-
}
32-
33-
// Add user message immediately
34-
const userMessage: ThreadMessageLike = {
35-
role: "user",
36-
content: [{ type: "text", text: message.content[0].text }],
37-
};
38-
setMessages((currentMessages) => [...currentMessages, userMessage]);
39-
40-
try {
41-
// Execute the selected Lowcoder query
42-
if (props.chatQuery) {
43-
// Prepare query arguments with chat context
44-
const queryArgs = {
45-
message: message.content[0].text,
46-
systemPrompt: props.systemPrompt,
47-
streaming: props.streaming,
48-
agent: props.agent,
49-
maxInteractions: props.maxInteractions,
50-
modelType: props.modelType,
51-
// Pass entire conversation history for context
52-
messages: messages.concat([userMessage]).map(msg => ({
53-
role: msg.role,
54-
content: Array.isArray(msg.content) && msg.content[0] && typeof msg.content[0] === "object" && "text" in msg.content[0]
55-
? msg.content[0].text
56-
: typeof msg.content === "string" ? msg.content : ""
57-
}))
58-
};
59-
60-
// Execute the query through Lowcoder's query system
61-
const result = await new Promise((resolve, reject) => {
62-
const queryComp = editorState?.getQueriesComp()
63-
.getView()
64-
.find(q => q.children.name.getView() === props.chatQuery);
6512

66-
if (!queryComp) {
67-
reject(new Error(`Query "${props.chatQuery}" not found`));
68-
return;
69-
}
70-
71-
queryComp.dispatch(
72-
executeQueryAction({
73-
args: queryArgs,
74-
afterExecFunc: () => {
75-
const queryResult = queryComp.children.data.getView();
76-
resolve(queryResult);
77-
}
78-
})
79-
);
80-
});
81-
82-
// Add assistant response
83-
const assistantMessage: ThreadMessageLike = {
84-
role: "assistant",
85-
content: [{
86-
type: "text",
87-
text: typeof result === "string"
88-
? result
89-
: (result as any)?.message || (result as any)?.response || "No response"
90-
}],
91-
};
92-
setMessages((currentMessages) => [...currentMessages, assistantMessage]);
93-
94-
} else {
95-
// Fallback response when no query is selected
96-
const assistantMessage: ThreadMessageLike = {
97-
role: "assistant",
98-
content: [{ type: "text", text: "Please select a chat query in the component properties." }],
99-
};
100-
setMessages((currentMessages) => [...currentMessages, assistantMessage]);
101-
}
102-
} catch (error) {
103-
// Error handling
104-
const errorMessage: ThreadMessageLike = {
105-
role: "assistant",
106-
content: [{
107-
type: "text",
108-
text: `Error: ${error instanceof Error ? error.message : "Unknown error occurred"}`
109-
}],
110-
};
111-
setMessages((currentMessages) => [...currentMessages, errorMessage]);
112-
}
113-
};
114-
115-
const runtime = useExternalStoreRuntime<ThreadMessageLike>({
116-
messages,
117-
setMessages,
118-
onNew,
119-
convertMessage,
120-
});
12113

14+
export const ChatView = React.memo((props: ChatCompProps) => {
12215
return (
123-
<AssistantRuntimeProvider runtime={runtime}>
16+
<MyRuntimeProvider>
12417
<Thread />
125-
</AssistantRuntimeProvider>
18+
</MyRuntimeProvider>
12619
);
12720
});
12821

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

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import { useState } from "react";
2+
import {
3+
useExternalStoreRuntime,
4+
ThreadMessageLike,
5+
AppendMessage,
6+
AssistantRuntimeProvider,
7+
} from "@assistant-ui/react";
8+
9+
const callYourAPI = async (message: AppendMessage) => {
10+
// Simulate API delay
11+
await new Promise(resolve => setTimeout(resolve, 1500));
12+
13+
// Simple responses
14+
return {
15+
content: "This is a mock response from your backend. You typed: " +
16+
(typeof message.content === 'string' ? message.content : 'something')
17+
};
18+
};
19+
20+
export function MyRuntimeProvider({ children }: { children: React.ReactNode }) {
21+
const [messages, setMessages] = useState<ThreadMessageLike[]>([]);
22+
const [isRunning, setIsRunning] = useState(false);
23+
24+
const onNew = async (message: AppendMessage) => {
25+
// Add user message
26+
const userMessage: ThreadMessageLike = {
27+
role: "user",
28+
content: message.content,
29+
};
30+
31+
setMessages(prev => [...prev, userMessage]);
32+
setIsRunning(true);
33+
34+
try {
35+
// Call mock API
36+
const response = await callYourAPI(message);
37+
38+
const assistantMessage: ThreadMessageLike = {
39+
role: "assistant",
40+
content: response.content,
41+
};
42+
43+
setMessages(prev => [...prev, assistantMessage]);
44+
} catch (error) {
45+
// Handle errors gracefully
46+
const errorMessage: ThreadMessageLike = {
47+
role: "assistant",
48+
content: `Sorry, I encountered an error: ${error instanceof Error ? error.message : 'Unknown error'}. This is expected in mock mode for testing error handling.`,
49+
};
50+
51+
setMessages(prev => [...prev, errorMessage]);
52+
} finally {
53+
setIsRunning(false);
54+
}
55+
};
56+
57+
const runtime = useExternalStoreRuntime<ThreadMessageLike>({
58+
messages,
59+
setMessages,
60+
isRunning,
61+
onNew,
62+
convertMessage: (message) => message,
63+
});
64+
65+
return (
66+
<AssistantRuntimeProvider runtime={runtime}>
67+
{children}
68+
</AssistantRuntimeProvider>
69+
);
70+
}

0 commit comments

Comments
 (0)