@5minds/node-red-dashboard-2-processcube-chat 0.1.1-add-functionality-5f8f20-mde6na5h

package/ui/components/UIDeepChat.vue

@@ -0,0 +1,302 @@
+<template>
+    <div class="deep-chat-container">
+        <deep-chat
+            :style="deepChatStyle"
+            :textInput="textInputConfig"
+            :introMessage="introMessageConfig"
+            :connect="connectConfig"
+            :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 {
+            conversation: [],
+        };
+    },
+
+    computed: {
+        deepChatStyle() {
+            return {
+                width: '100%',
+                maxWidth: '600px',
+                height: '80vh',
+                borderRadius: '8px',
+            };
+        },
+
+        textInputConfig() {
+            return {
+                placeholder: {
+                    text: this.props.placeholder || 'Type a message...',
+                },
+            };
+        },
+
+        introMessageConfig() {
+            return {
+                text: this.props.introMessage || 'Hello! How can I help you today?',
+            };
+        },
+
+        connectConfig() {
+            return {
+                handler: this.handleConnection,
+            };
+        },
+    },
+    beforeUnmount() {
+        this.$socket.off('msg-input:' + this.id);
+    },
+
+    methods: {
+        async handleConnection(body, signals) {
+            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);
+                    }
+                } 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 in handleConnection:', error);
+                this.sendErrorResponse(signals, 'Sorry, there was an error processing your message.');
+            }
+        },
+
+        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 [];
+            }
+        },
+
+        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);
+            });
+        },
+
+        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);
+            });
+        },
+
+        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);
+                    }
+                };
+                reader.onerror = () => reject(new Error('Failed to read document'));
+                reader.readAsDataURL(file);
+            });
+        },
+
+        formatForChatGPT(conversation, textOnly = false) {
+            return {
+                messages: conversation.map((msg) => {
+                    if (msg.text && (!msg.files || msg.files.length === 0)) {
+                        return {
+                            role: msg.role === 'ai' ? 'assistant' : 'user',
+                            content: msg.text,
+                        };
+                    } else if (msg.files && msg.files.length > 0) {
+                        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 {
+                            role: msg.role === 'ai' ? 'assistant' : 'user',
+                            content: content,
+                        };
+                    }
+
+                    return {
+                        role: msg.role === 'ai' ? 'assistant' : 'user',
+                        content: msg.text || '',
+                    };
+                }),
+                model: this.props.model,
+            };
+        },
+
+        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';
+        },
+
+        sendToNodeRED(payload, signals, fallbackMessage = null) {
+            this.$socket.emit('widget-action', this.id, { payload });
+
+            const responseTimeout = setTimeout(() => {
+                console.warn('No response from Node-RED after 30 seconds');
+                this.sendErrorResponse(signals, fallbackMessage || 'No response from server. Please try again.');
+            }, 30000);
+
+            this.$socket.once('msg-input:' + this.id, (msg) => {
+                clearTimeout(responseTimeout);
+                this.handleNodeREDResponse(msg, signals);
+            });
+        },
+
+        handleNodeREDResponse(msg, signals) {
+            try {
+                const aiMessage = {
+                    text: msg.payload.text || msg.payload.content,
+                    role: 'ai',
+                };
+
+                this.conversation.push(aiMessage);
+
+                if (msg.payload) {
+                    signals.onResponse({
+                        text: msg.payload.text || msg.payload.content,
+                        role: 'ai',
+                    });
+                }
+            } catch (error) {
+                console.error('Error handling response:', error);
+                this.sendErrorResponse(signals, 'Error processing response');
+            }
+        },
+
+        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>

package/ui/index.js

@@ -0,0 +1,2 @@
+/* Exports of all of the components in this node */
+export { default as UIDeepChat } from './components/UIDeepChat.vue';