Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom modification not working #198

Open
Jaison-jj opened this issue Jun 19, 2024 · 0 comments
Open

Custom modification not working #198

Jaison-jj opened this issue Jun 19, 2024 · 0 comments

Comments

@Jaison-jj
Copy link

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant