@5minds/node-red-dashboard-2-processcube-chat 0.1.1-develop-bd0cb7-mcvkuzxr → 0.1.1-develop-cb2322-mf120t2z

package/ui/components/UIDeepChat.vue

@@ -1,349 +1,374 @@
 <template>
-    <div ref="deepChatContainer" class="ui-deepchat-container" :style="containerStyle">
+    <div class="deep-chat-container">
         <deep-chat
-            ref="deepChat"
-            :intro-message="config.introMessage"
-            :placeholder-text="config.placeholder"
-            :text-input="config.textInput"
-            :speech-to-text="speechToTextConfig"
-            :camera="cameraConfig"
-            :microphone="microphoneConfig"
-            :mixedFiles="attachmentsConfig"
-            :avatars="config.avatars"
-            :names="config.names"
-            :timestamps="config.timestamps"
-            :stream="config.stream"
+            :style="deepChatStyle"
+            :textInput="textInputConfig"
+            :introMessage="introMessageConfig"
             :connect="connectConfig"
-            @onNewMessage="handleNewMessage"
-            @onClearMessages="handleClearMessages"
-            @onComponentRender="handleComponentRender"
-            @onResponse="handleResponse"
-            @onError="handleError"
+            :speechToText="props.speechToText"
+            :camera="props.camera"
+            :mixedFiles="props.attachments"
+            :avatars="props.avatars"
+            :names="props.names"
+            :timestamps="props.timestamps"
+            :stream="props.stream"
         ></deep-chat>
     </div>
 </template>
 
 <script>
+import 'deep-chat';
+
 export default {
     name: 'UIDeepChat',
     props: ['id', 'props', 'state'],
-    
+    inject: ['$socket'],
     data() {
         return {
-            config: {
-                introMessage: 'Hello! How can I help you today?',
-                placeholder: 'Type a message...',
-                apiUrl: '',
-                apiKey: '',
-                model: 'gpt-3.5-turbo',
-                textInput: true,
-                speechToText: false,
-                camera: false,
-                microphone: false,
-                attachments: false,
-                avatars: true,
-                names: true,
-                timestamps: false,
-                stream: false
-            },
-            isDeepChatLoaded: false,
-            messages: []
-        }
+            conversation: [],
+        };
     },
-    
+
     computed: {
-        containerStyle() {
+        deepChatStyle() {
             return {
                 width: '100%',
-                height: '100%',
-                minHeight: '400px'
-            }
-        },
-        
-        speechToTextConfig() {
-            return this.config.speechToText ? {
-                button: true,
-                displayInterimResults: true
-            } : false
+                maxWidth: '600px',
+                height: '80vh',
+                borderRadius: '8px',
+            };
         },
-        
-        cameraConfig() {
-            return this.config.camera ? {
-                button: true
-            } : false
-        },
-        
-        microphoneConfig() {
-            return this.config.microphone ? {
-                button: true,
-                audio: true
-            } : false
+
+        textInputConfig() {
+            return {
+                placeholder: {
+                    text: this.props.placeholder || 'Type a message...',
+                },
+            };
         },
-        
-        attachmentsConfig() {
-            return this.config.attachments ? {
-                button: true,
-                acceptedFormats: ".jpeg,.jpg,.png,.gif,.pdf,.txt,.doc,.docx"
-            } : false
+
+        introMessageConfig() {
+            return {
+                text: this.props.introMessage || 'Hello! How can I help you today?',
+            };
         },
-        
+
         connectConfig() {
-            if (this.config.apiUrl && this.config.apiKey) {
-                return {
-                    url: this.config.apiUrl,
-                    method: 'POST',
-                    headers: {
-                        'Authorization': `Bearer ${this.config.apiKey}`,
-                        'Content-Type': 'application/json'
-                    },
-                    body: {
-                        model: this.config.model,
-                        max_tokens: 2000,
-                        temperature: 0.7
-                    },
-                    stream: this.config.stream
-                }
-            }
-            
-            // Custom Handler für Node-RED Integration
             return {
-                handler: this.handleCustomConnection,
-                stream: this.config.stream
-            }
-        }
-    },
-    
-    mounted() {
-        this.loadDeepChat()
-        this.setupSocketListeners()
-        this.applyConfiguration()
+                handler: this.handleConnection,
+            };
+        },
     },
-    
     beforeUnmount() {
-        this.removeSocketListeners()
+        this.$socket.off('msg-input:' + this.id);
     },
-    
+
     methods: {
-        async loadDeepChat() {
+        async handleConnection(body, signals) {
             try {
-                // Deep Chat von CDN laden
-                if (!window.DeepChat) {
-                    const script = document.createElement('script')
-                    script.src = 'https://unpkg.com/deep-chat@latest/dist/deepChat.bundle.js'
-                    script.onload = () => {
-                        this.isDeepChatLoaded = true
-                        this.$nextTick(() => {
-                            this.initializeDeepChat()
-                        })
+                // Extract messages and files from FormData
+                let newMessages = [];
+                let files = [];
+
+                if (body instanceof FormData) {
+                    for (let [key, value] of body.entries()) {
+                        if (key.startsWith('message')) {
+                            try {
+                                const messageContent = JSON.parse(value);
+                                newMessages.push(messageContent);
+                            } catch (e) {
+                                console.error('Error parsing message:', e);
+                            }
+                        } else if (key === 'files') {
+                            files.push(value);
+                        }
                     }
-                    document.head.appendChild(script)
-                } else {
-                    this.isDeepChatLoaded = true
-                    this.$nextTick(() => {
-                        this.initializeDeepChat()
-                    })
+
+                    // Process files if present
+                    if (files.length > 0 && newMessages.length > 0) {
+                        const lastMessage = newMessages[newMessages.length - 1];
+                        lastMessage.files = await this.processFiles(files);
+                    }
+                } else if (body.messages) {
+                    newMessages = body.messages;
                 }
+
+                // Add to conversation history
+                this.conversation.push(...newMessages);
+
+                // Send to Node-RED
+                const payload = this.formatForChatGPT(this.conversation);
+                this.sendToNodeRED(payload, signals);
             } catch (error) {
-                console.error('Error loading Deep Chat:', error)
+                console.error('Error in handleConnection:', error);
+                this.sendErrorResponse(signals, 'Sorry, there was an error processing your message.');
             }
         },
-        
-        initializeDeepChat() {
-            if (this.$refs.deepChat) {
-                // Deep Chat ist bereit
-                console.log('Deep Chat initialized for widget:', this.id)
-                
-                // Intro Message senden falls konfiguriert
-                if (this.config.introMessage) {
-                    this.addMessage(this.config.introMessage, 'ai')
-                }
+
+        async processFiles(files) {
+            try {
+                return await Promise.all(
+                    files.map(async (file) => {
+                        if (!(file instanceof File)) return file;
+
+                        if (file.type.startsWith('image/')) {
+                            return await this.processImageFile(file);
+                        } else if (file.type.startsWith('audio/')) {
+                            return await this.processAudioFile(file);
+                        } else {
+                            // Handle other file types (PDFs, documents, etc.)
+                            return await this.processDocumentFile(file);
+                        }
+                    })
+                );
+            } catch (error) {
+                console.error('Error processing files:', error);
+                return [];
             }
         },
-        
-        setupSocketListeners() {
-            // Neue Nachricht von Node-RED empfangen
-            this.$socket.on('deepchat-newMessage:' + this.id, (data) => {
-                this.addMessage(data.message, data.role || 'ai', data.html, data.files)
-            })
-            
-            // Konfiguration aktualisieren
-            this.$socket.on('deepchat-updateConfig:' + this.id, (newConfig) => {
-                this.config = { ...this.config, ...newConfig }
-                this.applyConfiguration()
-            })
-            
-            // Chat löschen
-            this.$socket.on('deepchat-clearMessages:' + this.id, () => {
-                this.clearMessages()
-            })
-            
-            // Standard Dashboard Message Input
-            this.$socket.on('msg-input:' + this.id, (msg) => {
-                if (msg.payload) {
-                    this.addMessage(msg.payload, msg.role || 'ai', msg.html, msg.files)
-                }
-                if (msg.config) {
-                    this.config = { ...this.config, ...msg.config }
-                }
-                if (msg.clear) {
-                    this.clearMessages()
-                }
-            })
-        },
-        
-        removeSocketListeners() {
-            this.$socket.off('deepchat-newMessage:' + this.id)
-            this.$socket.off('deepchat-updateConfig:' + this.id)
-            this.$socket.off('deepchat-clearMessages:' + this.id)
-            this.$socket.off('msg-input:' + this.id)
+
+        processImageFile(file) {
+            return new Promise((resolve, reject) => {
+                const reader = new FileReader();
+                reader.onload = (e) =>
+                    resolve({
+                        name: file.name,
+                        type: file.type,
+                        size: file.size,
+                        src: e.target.result,
+                    });
+                reader.onerror = () => reject(new Error('Failed to read image'));
+                reader.readAsDataURL(file);
+            });
         },
-        
-        applyConfiguration() {
-            // Konfiguration aus props übernehmen
-            if (this.props) {
-                Object.keys(this.props).forEach(key => {
-                    if (this.config.hasOwnProperty(key)) {
-                        this.config[key] = this.props[key]
+
+        processAudioFile(file) {
+            return new Promise((resolve, reject) => {
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    try {
+                        const result = e.target.result;
+                        const commaIndex = result.indexOf(',');
+                        if (commaIndex === -1) {
+                            throw new Error('Invalid data URL format: missing comma separator');
+                        }
+                        const base64Data = result.split(',')[1]; // Remove data URL prefix
+
+                        resolve({
+                            name: file.name,
+                            type: file.type,
+                            size: file.size,
+                            base64Data: base64Data,
+                        });
+                    } catch (error) {
+                        reject(error);
                     }
-                })
-            }
+                };
+                reader.onerror = () => reject(new Error('Failed to read audio'));
+                reader.readAsDataURL(file);
+            });
         },
-        
-        addMessage(content, role = 'ai', isHtml = false, files = []) {
-            try {
-                if (this.$refs.deepChat) {
-                    const message = {
-                        text: content,
-                        role: role
-                    }
-                    
-                    if (isHtml) {
-                        message.html = content
-                        delete message.text
-                    }
-                    
-                    if (files && files.length > 0) {
-                        message.files = files
+
+        processDocumentFile(file) {
+            return new Promise((resolve, reject) => {
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    try {
+                        const base64Data = e.target.result.split(',')[1]; // Remove data URL prefix
+
+                        resolve({
+                            name: file.name,
+                            type: file.type,
+                            size: file.size,
+                            fileData: base64Data, // Use fileData for documents
+                        });
+                    } catch (error) {
+                        reject(error);
                     }
-                    
-                    // Nachricht zu Deep Chat hinzufügen
-                    this.$refs.deepChat.addMessage(message)
-                    this.messages.push(message)
-                }
-            } catch (error) {
-                console.error('Error adding message to Deep Chat:', error)
-            }
+                };
+                reader.onerror = () => reject(new Error('Failed to read document'));
+                reader.readAsDataURL(file);
+            });
         },
-        
-        clearMessages() {
-            try {
-                if (this.$refs.deepChat) {
-                    this.$refs.deepChat.clearMessages()
-                    this.messages = []
-                }
-            } catch (error) {
-                console.error('Error clearing Deep Chat messages:', error)
+
+        formatForChatGPT(conversation, textOnly = false) {
+            const payload = {
+                messages: conversation.map((msg) => this.formatMessage(msg, textOnly)),
+                model: this.props.model,
+            };
+
+            // Add ChatGPT API extensions
+            if (this.props.tools) {
+                payload.tools = this.props.tools;
             }
+
+            if (this.props.tool_choice) {
+                payload.tool_choice = this.props.tool_choice;
+            }
+
+            if (this.props.temperature !== undefined) {
+                payload.temperature = this.props.temperature;
+            }
+
+            if (this.props.max_tokens) {
+                payload.max_tokens = this.props.max_tokens;
+            }
+
+            if (this.props.top_p !== undefined) {
+                payload.top_p = this.props.top_p;
+            }
+
+            if (this.props.frequency_penalty !== undefined) {
+                payload.frequency_penalty = this.props.frequency_penalty;
+            }
+
+            if (this.props.presence_penalty !== undefined) {
+                payload.presence_penalty = this.props.presence_penalty;
+            }
+
+            if (this.props.response_format) {
+                payload.response_format = this.props.response_format;
+            }
+
+            return payload;
         },
-        
-        handleCustomConnection(body, signals) {
-            // Node-RED Integration: Nachricht an Node-RED senden
-            this.$socket.emit('chat-message', this.id, {
-                message: body.messages || body,
-                timestamp: new Date().toISOString(),
-                files: body.files || []
-            })
-            
-            // Temporary loading message
-            signals.onOpen({
-                text: 'Processing...',
-                role: 'ai'
-            })
-        },
-        
-        handleNewMessage(event) {
-            // Event an Node-RED weiterleiten
-            this.$socket.emit('deepchat-onNewMessage', this.id, {
-                message: event.message,
-                role: event.role || 'user',
-                timestamp: new Date().toISOString()
-            })
+
+        formatMessage(msg, textOnly = false) {
+            const message = {
+                role: msg.role === 'ai' ? 'assistant' : 'user',
+            };
+
+            // Handle tool calls (for assistant messages)
+            if (msg.tool_calls) {
+                message.tool_calls = msg.tool_calls;
+                message.content = msg.content || null;
+                return message;
+            }
+
+            // Handle tool responses (for tool messages)
+            if (msg.role === 'tool') {
+                message.role = 'tool';
+                message.content = msg.content;
+                message.tool_call_id = msg.tool_call_id;
+                return message;
+            }
+
+            // Handle messages with files
+            if (msg.files && msg.files.length > 0) {
+                message.content = this.buildContentArray(msg, textOnly);
+                return message;
+            }
+
+            // Handle text-only messages
+            message.content = msg.text || msg.content || '';
+            return message;
         },
-        
-        handleClearMessages() {
-            // Event an Node-RED weiterleiten
-            this.$socket.emit('deepchat-onClearMessages', this.id, {
-                timestamp: new Date().toISOString()
-            })
+
+        buildContentArray(msg, textOnly) {
+            const content = [{ type: 'text', text: msg.text || '' }];
+
+            msg.files.forEach((file) => {
+                if (file.type && file.type.startsWith('image/') && file.src) {
+                    content.push({
+                        type: 'image_url',
+                        image_url: { url: file.src },
+                    });
+                } else if (!textOnly && file.type && file.type.startsWith('audio/') && file.base64Data) {
+                    const format = this.getAudioFormat(file.type);
+                    content.push({
+                        type: 'input_audio',
+                        input_audio: {
+                            data: file.base64Data,
+                            format: format,
+                        },
+                    });
+                } else if (!textOnly && file.fileData) {
+                    content.push({
+                        type: 'file',
+                        file: {
+                            filename: file.name,
+                            file_data: file.fileData,
+                        },
+                    });
+                }
+            });
+
+            return content;
         },
-        
-        handleComponentRender(event) {
-            // Event an Node-RED weiterleiten
-            this.$socket.emit('deepchat-onComponentRender', this.id, {
-                event: event,
-                timestamp: new Date().toISOString()
-            })
+
+        getAudioFormat(mimeType) {
+            if (mimeType.includes('mp3')) return 'mp3';
+            if (mimeType.includes('wav')) return 'wav';
+            if (mimeType.includes('webm')) return 'webm';
+            if (mimeType.includes('m4a')) return 'm4a';
+            return 'wav';
         },
-        
-        handleResponse(event) {
-            console.log('Deep Chat Response:', event)
+
+        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);
+            });
         },
-        
-        handleError(error) {
-            console.error('Deep Chat Error:', error)
-            
-            // Fehler an Node-RED melden
-            this.$socket.emit('chat-message', this.id, {
-                error: error.message || error,
-                timestamp: new Date().toISOString()
-            })
-        }
-    }
-}
-</script>
 
-<style scoped>
-.ui-deepchat-container {
-    position: relative;
-    border-radius: 8px;
-    overflow: hidden;
-    background: var(--v-theme-surface);
-}
+        handleNodeREDResponse(msg, signals) {
+            try {
+                // Store the complete ChatGPT response in conversation
+                const fullResponse = msg.payload;
 
-/* Deep Chat Styling Integration */
-.ui-deepchat-container :deep(deep-chat) {
-    width: 100% !important;
-    height: 100% !important;
-    border: none !important;
-    border-radius: 8px;
-    font-family: var(--v-font-family) !important;
-}
+                // Create AI message with complete response data
+                const aiMessage = {
+                    role: 'ai',
+                    content: fullResponse.message?.content || fullResponse.content,
+                    text: fullResponse.message?.content || fullResponse.content,
+                    fullResponse: fullResponse,
+                };
 
-/* Dark theme support */
-.ui-deepchat-container :deep(deep-chat) {
-    --chat-background-color: var(--v-theme-surface);
-    --user-message-color: var(--v-theme-primary);
-    --ai-message-color: var(--v-theme-secondary);
-    --border-color: var(--v-theme-outline);
-    --text-color: var(--v-theme-on-surface);
-    --placeholder-color: var(--v-theme-on-surface-variant);
-}
+                // Handle tool calls if present
+                if (fullResponse.message?.tool_calls) {
+                    aiMessage.tool_calls = fullResponse.message.tool_calls;
+                    aiMessage.content = fullResponse.message.content || null;
+                }
 
-/* Input area styling */
-.ui-deepchat-container :deep(.text-input-container) {
-    border-top: 1px solid var(--v-theme-outline) !important;
-    background: var(--v-theme-surface) !important;
-}
+                this.conversation.push(aiMessage);
 
-/* Message bubbles */
-.ui-deepchat-container :deep(.message-bubble) {
-    border-radius: 12px !important;
-}
+                // 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...',
+                        role: 'ai',
+                    });
+                } else if (fullResponse.message?.content || fullResponse.content) {
+                    // Normal text response
+                    signals.onResponse({
+                        text: fullResponse.message?.content || fullResponse.content,
+                        role: 'ai',
+                    });
+                }
+            } catch (error) {
+                console.error('Error handling response:', error);
+                this.sendErrorResponse(signals, 'Error processing response');
+            }
+        },
 
-/* Responsive design */
-@media (max-width: 768px) {
-    .ui-deepchat-container {
-        border-radius: 0;
-    }
+        sendErrorResponse(signals, message) {
+            if (signals && signals.onResponse) {
+                signals.onResponse({
+                    text: message,
+                    role: 'ai',
+                });
+            }
+        },
+    },
+};
+</script>
+
+<style scoped>
+.deep-chat-container {
+    display: flex;
+    justify-content: center;
+    width: 100%;
 }
-</style>
+</style>