FlowiseAI / FlowiseChatEmbed

335 stars 1.35k forks source link

Custom modification not working #198

Open Jaison-jj opened 5 months ago

Jaison-jj commented 5 months ago

I am following this doc for modifying some part of the styles of the chat window. Here is what I did,

  1. Fork the Flowise Chat Embed repository
  2. Make changes to the Bot.tsx file (some css changes and added some classes)
  3. Ran pnpm build
  4. Pushed the code to the forked repo
  5. Changed cdn url with my username and forked-repo

Here is my script.

<script type="module">
                import Chatbot from "https://cdn.jsdelivr.net/gh/Jaison-jj/FlowiseChatEmbedJaison/dist/web.js"
                Chatbot.init({
                    chatflowid: "my-id", //masked for posting here
                    apiHost: "https://flowise-ileaf-production.up.railway.app",
                    chatflowConfig: {
                        // topK: 2
                    },
                    theme: {
                        button: {
                            backgroundColor: "blue",
                            right: 20,
                            bottom: 20,
                            size: 48, // small | medium | large | number
                            dragAndDrop: true,
                            iconColor: "white",
                            customIconSrc: "https://www.topdevelopers.co/upload/thumb_new/201910220616521854976192.png",
                        },
                        chatWindow: {
                            showTitle: true,
                            title: 'iLeaf Assistant',
                            titleAvatarSrc: 'https://www.topdevelopers.co/upload/thumb_new/201910220616521854976192.png',
                            welcomeMessage: 'Hello! Welcome to iLeaf Solutions.I am iLeaf Assistant How can I help you?',
                            errorMessage: 'Seems like assistant is not well, apologies could not able to provide a support',
                            backgroundColor: "#ffffff",
                            height: 700,
                            width: 400,
                            fontSize: 16,
                            poweredByTextColor: "#303235",
                            botMessage: {
                                backgroundColor: "#f7f8ff",
                                textColor: "#303235",
                                showAvatar: true,
                                avatarSrc: "https://www.topdevelopers.co/upload/thumb_new/201910220616521854976192.png",
                            },
                            userMessage: {
                                backgroundColor: "#3B81F6",
                                textColor: "#ffffff",
                                showAvatar: true,
                                avatarSrc: "https://raw.githubusercontent.com/zahidkhawaja/langchain-chat-nextjs/main/public/usericon.png",
                            },
                            textInput: {
                                placeholder: 'Type your question',
                                backgroundColor: '#ffffff',
                                textColor: '#303235',
                                sendButtonColor: '#3B81F6',
                                maxChars: 1000,
                                maxCharsWarningMessage: 'You exceeded the characters limit. Please input less than 1000 characters.',
                            },
                            feedback: {
                                color: '#303235',
                            },
                            footer: {
                                textColor: '#303235',
                                text: 'Powered by',
                                company: 'iLeaf Solutions',
                                companyLink: 'https://www.ileafsolutions.com',
                            },
                        }
                    }
                })
            </script>