@5minds/node-red-dashboard-2-processcube-chat 0.1.3 → 0.2.0

package/ui/components/UIDeepChat.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="deep-chat-container">
         <deep-chat
+            ref="deepChat"
             :style="deepChatStyle"
             :textInput="textInputConfig"
             :introMessage="introMessageConfig"
@@ -26,6 +27,7 @@ export default {
     data() {
         return {
             conversation: [],
+            signals: undefined,
         };
     },
 
@@ -59,12 +61,18 @@ export default {
             };
         },
     },
+    mounted() {
+        this.$socket.on('msg-input:' + this.id, (msg) => {
+            this.handleNodeREDResponse(msg);
+        });
+    },
     beforeUnmount() {
         this.$socket.off('msg-input:' + this.id);
     },
 
     methods: {
         async handleConnection(body, signals) {
+            this.signals = signals;
             try {
                 // Extract messages and files from FormData
                 let newMessages = [];
@@ -114,7 +122,7 @@ export default {
                 this.sendToNodeRED(payload, signals);
             } catch (error) {
                 console.error('Error in handleConnection:', error);
-                this.sendErrorResponse(signals, 'Sorry, there was an error processing your message.');
+                this.sendErrorResponse('Sorry, there was an error processing your message.');
             }
         },
 
@@ -319,13 +327,9 @@ export default {
 
         sendToNodeRED(payload, signals, fallbackMessage = null) {
             this.$socket.emit('widget-action', this.id, { payload });
-
-            this.$socket.once('msg-input:' + this.id, (msg) => {
-                this.handleNodeREDResponse(msg, signals);
-            });
         },
 
-        handleNodeREDResponse(msg, signals) {
+        handleNodeREDResponse(msg) {
             try {
                 // Store the complete ChatGPT response in conversation
                 const fullResponse = msg.payload;
@@ -349,30 +353,34 @@ export default {
                 // For the chat display, show appropriate response
                 if (fullResponse.message?.tool_calls) {
                     // If ChatGPT wants to call tools, show a message
-                    signals.onResponse({
-                        text: 'Function call requested...',
+                    this.$refs.deepChat.addMessage({
+                        text: `Tool **'${msg.payload.message.tool_calls[0].function.name}'** aufgerufen.`,
                         role: 'ai',
                     });
                 } else if (fullResponse.message?.content || fullResponse.content) {
-                    // Normal text response
-                    signals.onResponse({
+                    const message = {
                         text: fullResponse.message?.content || fullResponse.content,
                         role: 'ai',
-                    });
+                    };
+
+                    // Normal text response
+                    if (msg.payload.intermediateMessage) {
+                        this.$refs.deepChat.addMessage(message);
+                    } else {
+                        this.signals.onResponse(message);
+                    }
                 }
             } catch (error) {
                 console.error('Error handling response:', error);
-                this.sendErrorResponse(signals, 'Error processing response');
+                this.sendErrorResponse('Error processing response');
             }
         },
 
-        sendErrorResponse(signals, message) {
-            if (signals && signals.onResponse) {
-                signals.onResponse({
-                    text: message,
-                    role: 'ai',
-                });
-            }
+        sendErrorResponse(message) {      
+            this.$refs.deepChat.addMessage({
+                text: message,
+                role: 'ai',
+            }, true);
         },
     },
 };