@5minds/node-red-dashboard-2-processcube-chat 0.1.1-add-functionality-043ee8-mdy8o5ki → 0.1.1-develop-bd0cb7-mcvkuzxr

package/ui/components/UIDeepChat.vue

@@ -1,369 +1,349 @@
 <template>
-    <div class="deep-chat-container">
+    <div ref="deepChatContainer" class="ui-deepchat-container" :style="containerStyle">
         <deep-chat
-            :style="deepChatStyle"
-            :textInput="textInputConfig"
-            :introMessage="introMessageConfig"
+            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"
             :connect="connectConfig"
-            :speechToText="props.speechToText"
-            :camera="props.camera"
-            :mixedFiles="props.attachments"
-            :avatars="props.avatars"
-            :names="props.names"
-            :timestamps="props.timestamps"
-            :stream="props.stream"
+            @onNewMessage="handleNewMessage"
+            @onClearMessages="handleClearMessages"
+            @onComponentRender="handleComponentRender"
+            @onResponse="handleResponse"
+            @onError="handleError"
         ></deep-chat>
     </div>
 </template>
 
 <script>
-import 'deep-chat';
-
 export default {
     name: 'UIDeepChat',
     props: ['id', 'props', 'state'],
-    inject: ['$socket'],
+    
     data() {
         return {
-            conversation: [],
-        };
+            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: []
+        }
     },
-
+    
     computed: {
-        deepChatStyle() {
+        containerStyle() {
             return {
                 width: '100%',
-                maxWidth: '600px',
-                height: '80vh',
-                borderRadius: '8px',
-            };
+                height: '100%',
+                minHeight: '400px'
+            }
         },
-
-        textInputConfig() {
-            return {
-                placeholder: {
-                    text: this.props.placeholder || 'Type a message...',
-                },
-            };
+        
+        speechToTextConfig() {
+            return this.config.speechToText ? {
+                button: true,
+                displayInterimResults: true
+            } : false
         },
-
-        introMessageConfig() {
-            return {
-                text: this.props.introMessage || 'Hello! How can I help you today?',
-            };
+        
+        cameraConfig() {
+            return this.config.camera ? {
+                button: true
+            } : false
         },
-
+        
+        microphoneConfig() {
+            return this.config.microphone ? {
+                button: true,
+                audio: true
+            } : false
+        },
+        
+        attachmentsConfig() {
+            return this.config.attachments ? {
+                button: true,
+                acceptedFormats: ".jpeg,.jpg,.png,.gif,.pdf,.txt,.doc,.docx"
+            } : false
+        },
+        
         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.handleConnection,
-            };
-        },
+                handler: this.handleCustomConnection,
+                stream: this.config.stream
+            }
+        }
+    },
+    
+    mounted() {
+        this.loadDeepChat()
+        this.setupSocketListeners()
+        this.applyConfiguration()
     },
+    
     beforeUnmount() {
-        this.$socket.off('msg-input:' + this.id);
+        this.removeSocketListeners()
     },
-
+    
     methods: {
-        async handleConnection(body, signals) {
+        async loadDeepChat() {
             try {
-                // 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);
-                        }
-                    }
-
-                    // Process files if present
-                    if (files.length > 0 && newMessages.length > 0) {
-                        const lastMessage = newMessages[newMessages.length - 1];
-                        lastMessage.files = await this.processFiles(files);
+                // 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()
+                        })
                     }
-                } else if (body.messages) {
-                    newMessages = body.messages;
+                    document.head.appendChild(script)
+                } else {
+                    this.isDeepChatLoaded = true
+                    this.$nextTick(() => {
+                        this.initializeDeepChat()
+                    })
                 }
-
-                // 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 in handleConnection:', error);
-                this.sendErrorResponse(signals, 'Sorry, there was an error processing your message.');
+                console.error('Error loading Deep Chat:', error)
             }
         },
-
-        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 [];
+        
+        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')
+                }
             }
         },
-
-        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);
-            });
+        
+        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()
+                }
+            })
         },
-
-        processAudioFile(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,
-                            base64Data: base64Data,
-                        });
-                    } catch (error) {
-                        reject(error);
-                    }
-                };
-                reader.onerror = () => reject(new Error('Failed to read audio'));
-                reader.readAsDataURL(file);
-            });
+        
+        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)
         },
-
-        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);
+        
+        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]
                     }
-                };
-                reader.onerror = () => reject(new Error('Failed to read document'));
-                reader.readAsDataURL(file);
-            });
-        },
-
-        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;
         },
-
-        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;
+        
+        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
+                    }
+                    
+                    // 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)
             }
-
-            // Handle text-only messages
-            message.content = msg.text || msg.content || '';
-            return message;
         },
-
-        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,
-                        },
-                    });
+        
+        clearMessages() {
+            try {
+                if (this.$refs.deepChat) {
+                    this.$refs.deepChat.clearMessages()
+                    this.messages = []
                 }
-            });
-
-            return content;
+            } catch (error) {
+                console.error('Error clearing Deep Chat messages:', error)
+            }
         },
-
-        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';
+        
+        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'
+            })
         },
-
-        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);
-            });
+        
+        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()
+            })
         },
+        
+        handleClearMessages() {
+            // Event an Node-RED weiterleiten
+            this.$socket.emit('deepchat-onClearMessages', this.id, {
+                timestamp: new Date().toISOString()
+            })
+        },
+        
+        handleComponentRender(event) {
+            // Event an Node-RED weiterleiten
+            this.$socket.emit('deepchat-onComponentRender', this.id, {
+                event: event,
+                timestamp: new Date().toISOString()
+            })
+        },
+        
+        handleResponse(event) {
+            console.log('Deep Chat Response:', event)
+        },
+        
+        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>
 
-        handleNodeREDResponse(msg, signals) {
-            try {
-                // Store the complete ChatGPT response in conversation
-                const fullResponse = msg.payload;
-
-                // 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,
-                };
+<style scoped>
+.ui-deepchat-container {
+    position: relative;
+    border-radius: 8px;
+    overflow: hidden;
+    background: var(--v-theme-surface);
+}
 
-                // Handle tool calls if present
-                if (fullResponse.message?.tool_calls) {
-                    aiMessage.tool_calls = fullResponse.message.tool_calls;
-                    aiMessage.content = fullResponse.message.content || null;
-                }
+/* 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;
+}
 
-                this.conversation.push(aiMessage);
+/* 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);
+}
 
-                // 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');
-            }
-        },
+/* 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;
+}
 
-        sendErrorResponse(signals, message) {
-            if (signals && signals.onResponse) {
-                signals.onResponse({
-                    text: message,
-                    role: 'ai',
-                });
-            }
-        },
-    },
-};
-</script>
+/* Message bubbles */
+.ui-deepchat-container :deep(.message-bubble) {
+    border-radius: 12px !important;
+}
 
-<style scoped>
-.deep-chat-container {
-    display: flex;
-    justify-content: center;
-    width: 100%;
+/* Responsive design */
+@media (max-width: 768px) {
+    .ui-deepchat-container {
+        border-radius: 0;
+    }
 }
-</style>
+</style>