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>
pull/2592/head
Aman Soni 2024-06-06 02:25:27 +05:30 committed by GitHub
parent 582dcc8508
commit e0a03ad46d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 44 additions and 12 deletions

View File

@ -88,7 +88,8 @@ const buttonConfig = (isReact = false) => {
backgroundColor: "#3B81F6", backgroundColor: "#3B81F6",
right: 20, right: 20,
bottom: 20, bottom: 20,
size: "medium", size: 48, // small | medium | large | number
dragAndDrop: true,
iconColor: "white", iconColor: "white",
customIconSrc: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/google-messages.svg", customIconSrc: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/google-messages.svg",
}` }`
@ -96,7 +97,8 @@ const buttonConfig = (isReact = false) => {
backgroundColor: "#3B81F6", backgroundColor: "#3B81F6",
right: 20, right: 20,
bottom: 20, bottom: 20,
size: "medium", size: 48, // small | medium | large | number
dragAndDrop: true,
iconColor: "white", iconColor: "white",
customIconSrc: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/google-messages.svg", 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) => { const chatwindowConfig = (isReact = false) => {
return isReact return isReact
? `chatWindow: { ? `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", backgroundColor: "#ffffff",
height: 700, height: 700,
width: 400, width: 400,
@ -124,14 +130,29 @@ const chatwindowConfig = (isReact = false) => {
avatarSrc: "https://raw.githubusercontent.com/zahidkhawaja/langchain-chat-nextjs/main/public/usericon.png", avatarSrc: "https://raw.githubusercontent.com/zahidkhawaja/langchain-chat-nextjs/main/public/usericon.png",
}, },
textInput: { textInput: {
placeholder: "Type your question", placeholder: 'Type your question',
backgroundColor: "#ffffff", backgroundColor: '#ffffff',
textColor: "#303235", textColor: '#303235',
sendButtonColor: "#3B81F6", 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: { : `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", backgroundColor: "#ffffff",
height: 700, height: 700,
width: 400, width: 400,
@ -150,10 +171,21 @@ const chatwindowConfig = (isReact = false) => {
avatarSrc: "https://raw.githubusercontent.com/zahidkhawaja/langchain-chat-nextjs/main/public/usericon.png", avatarSrc: "https://raw.githubusercontent.com/zahidkhawaja/langchain-chat-nextjs/main/public/usericon.png",
}, },
textInput: { textInput: {
placeholder: "Type your question", placeholder: 'Type your question',
backgroundColor: "#ffffff", backgroundColor: '#ffffff',
textColor: "#303235", textColor: '#303235',
sendButtonColor: "#3B81F6", 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',
} }
}` }`
} }