From e0a03ad46d237b0b93c146185ee28f961d7b6696 Mon Sep 17 00:00:00 2001
From: Aman Soni <amansoni7477030@gmail.com>
Date: Thu, 6 Jun 2024 02:25:27 +0530
Subject: [PATCH] HTML Embed Chat popup configuration updated (#2583)

* HTML Embed Chat popup configuration updated

* HTML Embed Chat popup configuration

* Update EmbedChat.jsx

update spacing to be consistent

---------

Co-authored-by: Henry Heng <henryheng@flowiseai.com>
---
 packages/ui/src/views/chatflows/EmbedChat.jsx | 56 +++++++++++++++----
 1 file changed, 44 insertions(+), 12 deletions(-)

diff --git a/packages/ui/src/views/chatflows/EmbedChat.jsx b/packages/ui/src/views/chatflows/EmbedChat.jsx
index 25212a02..d2c4f8ae 100644
--- a/packages/ui/src/views/chatflows/EmbedChat.jsx
+++ b/packages/ui/src/views/chatflows/EmbedChat.jsx
@@ -88,7 +88,8 @@ const buttonConfig = (isReact = false) => {
                     backgroundColor: "#3B81F6",
                     right: 20,
                     bottom: 20,
-                    size: "medium",
+                    size: 48, // small | medium | large | number
+                    dragAndDrop: true,
                     iconColor: "white",
                     customIconSrc: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/google-messages.svg",
                 }`
@@ -96,7 +97,8 @@ const buttonConfig = (isReact = false) => {
                 backgroundColor: "#3B81F6",
                 right: 20,
                 bottom: 20,
-                size: "medium",
+                size: 48, // small | medium | large | number
+                dragAndDrop: true,
                 iconColor: "white",
                 customIconSrc: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/google-messages.svg",
             }`
@@ -105,7 +107,11 @@ const buttonConfig = (isReact = false) => {
 const chatwindowConfig = (isReact = false) => {
     return isReact
         ? `chatWindow: {
-                    welcomeMessage: "Hello! This is custom welcome message",
+                    showTitle: true,
+                    title: 'Flowise Bot',
+                    titleAvatarSrc: 'https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/google-messages.svg',
+                    welcomeMessage: 'Hello! This is custom welcome message',
+                    errorMessage: 'This is a custom error message',
                     backgroundColor: "#ffffff",
                     height: 700,
                     width: 400,
@@ -124,14 +130,29 @@ const chatwindowConfig = (isReact = false) => {
                         avatarSrc: "https://raw.githubusercontent.com/zahidkhawaja/langchain-chat-nextjs/main/public/usericon.png",
                     },
                     textInput: {
-                        placeholder: "Type your question",
-                        backgroundColor: "#ffffff",
-                        textColor: "#303235",
-                        sendButtonColor: "#3B81F6",
+                        placeholder: 'Type your question',
+                        backgroundColor: '#ffffff',
+                        textColor: '#303235',
+                        sendButtonColor: '#3B81F6',
+                        maxChars: 50,
+                        maxCharsWarningMessage: 'You exceeded the characters limit. Please input less than 50 characters.',
+                    },
+                    feedback: {
+                        color: '#303235',
+                    },
+                    footer: {
+                        textColor: '#303235',
+                        text: 'Powered by',
+                        company: 'Flowise',
+                        companyLink: 'https://flowiseai.com',
                     }
                 }`
         : `chatWindow: {
-                welcomeMessage: "Hello! This is custom welcome message",
+                showTitle: true,
+                title: 'Flowise Bot',
+                titleAvatarSrc: 'https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/google-messages.svg',
+                welcomeMessage: 'Hello! This is custom welcome message',
+                errorMessage: 'This is a custom error message',
                 backgroundColor: "#ffffff",
                 height: 700,
                 width: 400,
@@ -150,10 +171,21 @@ const chatwindowConfig = (isReact = false) => {
                     avatarSrc: "https://raw.githubusercontent.com/zahidkhawaja/langchain-chat-nextjs/main/public/usericon.png",
                 },
                 textInput: {
-                    placeholder: "Type your question",
-                    backgroundColor: "#ffffff",
-                    textColor: "#303235",
-                    sendButtonColor: "#3B81F6",
+                    placeholder: 'Type your question',
+                    backgroundColor: '#ffffff',
+                    textColor: '#303235',
+                    sendButtonColor: '#3B81F6',
+                    maxChars: 50,
+                    maxCharsWarningMessage: 'You exceeded the characters limit. Please input less than 50 characters.',
+                },
+                feedback: {
+                    color: '#303235',
+                },
+                footer: {
+                    textColor: '#303235',
+                    text: 'Powered by',
+                    company: 'Flowise',
+                    companyLink: 'https://flowiseai.com',
                 }
             }`
 }