1
- import React , { useState } from "react" ;
1
+ import React , { useContext , useState , useRef , useEffect } from "react" ;
2
2
import {
3
3
useExternalStoreRuntime ,
4
4
ThreadMessageLike ,
@@ -17,6 +17,9 @@ import {
17
17
} from "./context/ChatContext" ;
18
18
import styled from "styled-components" ;
19
19
import { ChatCompProps } from "../chatCompTypes" ;
20
+ import { message } from "antd" ;
21
+ import { EditorContext } from "@lowcoder-ee/comps/editorState" ;
22
+ import { addComponentAction } from "../../preLoadComp/actions/componentManagement" ;
20
23
21
24
const ChatContainer = styled . div < { $autoHeight ?: boolean } > `
22
25
display: flex;
@@ -54,26 +57,44 @@ const callYourAPI = async (params: {
54
57
text : string ,
55
58
modelHost : string ,
56
59
modelType : string ,
60
+ sessionId : string ,
57
61
} ) => {
58
- const { text, modelHost, modelType } = params ;
62
+ const { text, modelHost, modelType, sessionId } = params ;
59
63
60
64
let url = modelHost ;
61
65
if ( modelType === "direct-llm" ) {
62
66
url = `${ modelHost } /api/chat/completions` ;
63
67
}
64
68
69
+ const response = await fetch ( `${ url } ` , {
70
+ method : "POST" ,
71
+ body : JSON . stringify ( {
72
+ text,
73
+ sessionId,
74
+ } ) ,
75
+ } ) ;
76
+
77
+ return response . json ( ) ;
65
78
// Simulate API delay
66
- await new Promise ( resolve => setTimeout ( resolve , 1500 ) ) ;
79
+ // await new Promise(resolve => setTimeout(resolve, 1500));
67
80
68
81
// Simple responses
69
- return {
70
- content : "This is a mock response from your backend. You typed: " + text
71
- } ;
82
+ // return {
83
+ // content: "This is a mock response from your backend. You typed: " + text
84
+ // };
72
85
} ;
73
86
74
87
export function ChatMain ( props : ChatCompProps ) {
75
88
const { state, actions } = useChatContext ( ) ;
76
89
const [ isRunning , setIsRunning ] = useState ( false ) ;
90
+ const editorState = useContext ( EditorContext ) ;
91
+ const editorStateRef = useRef ( editorState ) ;
92
+
93
+ // Keep the ref updated with the latest editorState
94
+ useEffect ( ( ) => {
95
+ console . log ( "EDITOR STATE CHANGE ---> " , editorState ) ;
96
+ editorStateRef . current = editorState ;
97
+ } , [ editorState ] ) ;
77
98
78
99
console . log ( "STATE" , state ) ;
79
100
@@ -88,6 +109,36 @@ export function ChatMain(props: ChatCompProps) {
88
109
createdAt : new Date ( message . timestamp ) ,
89
110
} ) ;
90
111
112
+ const performAction = async ( actions : any [ ] ) => {
113
+ const comp = editorStateRef . current . getUIComp ( ) . children . comp ;
114
+ if ( ! comp ) {
115
+ console . error ( "No comp found" ) ;
116
+ return ;
117
+ }
118
+ // const layout = comp.children.layout.getView();
119
+ // console.log("LAYOUT", layout);
120
+
121
+ for ( const action of actions ) {
122
+ const { action_name, action_parameters, action_payload } = action ;
123
+
124
+ switch ( action_name ) {
125
+ case "place_component" :
126
+ await addComponentAction . execute ( {
127
+ actionKey : action_name ,
128
+ actionValue : "" ,
129
+ actionPayload : action_payload ,
130
+ selectedComponent : action_parameters ,
131
+ selectedEditorComponent : null ,
132
+ editorState : editorStateRef . current
133
+ } ) ;
134
+ break ;
135
+ default :
136
+ break ;
137
+ }
138
+ await new Promise ( resolve => setTimeout ( resolve , 1000 ) ) ;
139
+ }
140
+ } ;
141
+
91
142
const onNew = async ( message : AppendMessage ) => {
92
143
// Extract text from AppendMessage content array
93
144
if ( message . content . length !== 1 || message . content [ 0 ] ?. type !== "text" ) {
@@ -112,12 +163,15 @@ export function ChatMain(props: ChatCompProps) {
112
163
text : userMessage . text ,
113
164
modelHost : props . modelHost ! ,
114
165
modelType : props . modelType ! ,
166
+ sessionId : state . currentThreadId ,
115
167
} ) ;
116
-
168
+ const { reply, actions : editorActions } = JSON . parse ( response ?. output ) ;
169
+ performAction ( editorActions ) ;
170
+
117
171
const assistantMessage : MyMessage = {
118
172
id : generateId ( ) ,
119
173
role : "assistant" ,
120
- text : response . content ,
174
+ text : reply ,
121
175
timestamp : Date . now ( ) ,
122
176
} ;
123
177
@@ -170,12 +224,16 @@ export function ChatMain(props: ChatCompProps) {
170
224
text : editedMessage . text ,
171
225
modelHost : props . modelHost ! ,
172
226
modelType : props . modelType ! ,
227
+ sessionId : state . currentThreadId ,
173
228
} ) ;
174
-
229
+
230
+ const { reply, actions : editorActions } = JSON . parse ( response ?. output ) ;
231
+ performAction ( editorActions ) ;
232
+
175
233
const assistantMessage : MyMessage = {
176
234
id : generateId ( ) ,
177
235
role : "assistant" ,
178
- text : response . content ,
236
+ text : reply ,
179
237
timestamp : Date . now ( ) ,
180
238
} ;
181
239
0 commit comments