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

package/ui/components/UIDeepChat.vue

@@ -1,14 +1,14 @@
 <template>
     <div ref="deepChatContainer" class="ui-deepchat-container" :style="containerStyle">
-        <deep-chat
+        <deep-chat width="100%"
             ref="deepChat"
+            :style="deepChatStyle"
             :intro-message="config.introMessage"
-            :placeholder-text="config.placeholder"
-            :text-input="config.textInput"
+            :text-input="textInputConfig"
             :speech-to-text="speechToTextConfig"
             :camera="cameraConfig"
             :microphone="microphoneConfig"
-            :mixedFiles="attachmentsConfig"
+            :mixed-files="attachmentsConfig"
             :avatars="config.avatars"
             :names="config.names"
             :timestamps="config.timestamps"
@@ -24,10 +24,12 @@
 </template>
 
 <script>
+import 'deep-chat'
+
 export default {
     name: 'UIDeepChat',
     props: ['id', 'props', 'state'],
-    
+    inject: ['$socket'],
     data() {
         return {
             config: {
@@ -46,7 +48,6 @@ export default {
                 timestamps: false,
                 stream: false
             },
-            isDeepChatLoaded: false,
             messages: []
         }
     },
@@ -59,6 +60,53 @@ export default {
                 minHeight: '400px'
             }
         },
+
+        deepChatStyle() {
+            return {
+                width: '300px',
+                height: '300px',
+                flex: '1',
+                border: 'none',
+                borderRadius: '8px'
+            }
+        },
+        
+        speechToTextConfig() {
+            return this.config.speechToText ? {
+                button: true,
+                displayInterimResults: true
+            } : false
+        },
+        
+        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
+        },
+        
+        textInputConfig() {
+            if (!this.config.textInput) return false
+            
+            return {
+                placeholder: {
+                    text: this.config.placeholder
+                }
+            }
+        },
         
         speechToTextConfig() {
             return this.config.speechToText ? {
@@ -114,7 +162,6 @@ export default {
     },
     
     mounted() {
-        this.loadDeepChat()
         this.setupSocketListeners()
         this.applyConfiguration()
     },
@@ -124,42 +171,6 @@ export default {
     },
     
     methods: {
-        async loadDeepChat() {
-            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()
-                        })
-                    }
-                    document.head.appendChild(script)
-                } else {
-                    this.isDeepChatLoaded = true
-                    this.$nextTick(() => {
-                        this.initializeDeepChat()
-                    })
-                }
-            } catch (error) {
-                console.error('Error loading Deep Chat:', error)
-            }
-        },
-        
-        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')
-                }
-            }
-        },
-        
         setupSocketListeners() {
             // Neue Nachricht von Node-RED empfangen
             this.$socket.on('deepchat-newMessage:' + this.id, (data) => {
@@ -169,7 +180,7 @@ export default {
             // Konfiguration aktualisieren
             this.$socket.on('deepchat-updateConfig:' + this.id, (newConfig) => {
                 this.config = { ...this.config, ...newConfig }
-                this.applyConfiguration()
+                this.updateConfiguration()
             })
             
             // Chat löschen
@@ -184,6 +195,7 @@ export default {
                 }
                 if (msg.config) {
                     this.config = { ...this.config, ...msg.config }
+                    this.updateConfiguration()
                 }
                 if (msg.clear) {
                     this.clearMessages()
@@ -209,32 +221,6 @@ export default {
             }
         },
         
-        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)
-            }
-        },
-        
         clearMessages() {
             try {
                 if (this.$refs.deepChat) {
@@ -246,6 +232,13 @@ export default {
             }
         },
         
+        updateConfiguration() {
+            if (this.deepChatInstance) {
+                // Bestehende Instanz aktualisieren
+                this.applyConfigToElement(this.deepChatInstance)
+            }
+        },
+        
         handleCustomConnection(body, signals) {
             // Node-RED Integration: Nachricht an Node-RED senden
             this.$socket.emit('chat-message', this.id, {