flowisechatembed's People
Forkers
yannicknicot anvychow scriptonics fotoflo tevans2 alfasignde convocat agenciamav msgpo nikoma fellow-soft liqlab11 67spider dperales2022 jinghai trepont simar525 vikingdadmedic jeffrey-devhkg anon2578 magnusmoaner vortextech01 jinglt henryhengzj capson jenspacito zochory surafel-dem devtechdigital moodmnky-llc cnj125 sebastianmaierofficial toshilow adminstarlightai mbamin phive151 risewitholu hg988 andersonamaral2 robotwesley-ae ritchel-reachality aquaqamelob riju951 aidantilgner shravankapavarapu paixai leonardosepulvedat capson lukonobson robertonet lcacademy jefmari yongtae723 eduardo-meik zhengxiang5965 pez1980 mr777xx adxactly nieljacobs gporceban gregoriolombardi muchanga-dev boktoday apollohuang1 amprzybylowicz zxs731 bb-ika raffareis vasconceloscezar metagameindustries canybec barizon1 mkalinovich1 crobins1 luoweb gadsdencode rajathooda derekcheungsa subrealism juanmackie reality-reimagined dearbornio llmspace elijsg makemoney2023 surencarter tick20045 ballavamsi felixangelini davgit synapply mehr-vertrieb noe-briffa willnco charafeddine26 hhhomeinsp zerocomplex-ai anviladrian golytics antoinegounelflowisechatembed's Issues
copy
Implement replication function and add replication function to each conversation record
Font size of the botMessage
Hi Team,
As the attached screenshot. appears that the font size of the botMessage is indeed smaller than the userMessage, although i have added the Embed Chat Config, and when i change the font size it reflect on userMessage only, and botMessage is stays the same.
very strange issue, anyone faced this before ?
Starter prompts after every interaction.
I was wondering if any one has tried LLM generated, starter prompts as follow up questions after every answer or configurable on specific answers or chat flows.
Option not to focus on input mount
Hello,
I'm using a standalone (flowise-fullchatbot) chat widget and, by default, it triggers input focus on component mount.
This results in automatically scrolling to that element on the page, which is unwanted behavior in my case.
I'd love to be able to opt-out of the default input focus.
Getting a 401 Unauthorized
I embedded the full and the bubble version of the script. But both return a 401 Unauthorized on the first user message.
I couldn't find how to add a header with the API key, am I missing something?
The chat in Flowise Admin works as expected. Also CURL works fine, after adding a second API-Key.
Feature: Embed the chat into the website
Hello,
I see there are 2 options to embed Flowise into the website.
1.) fullScreen
2.) bubble
Is there a way to embed it into the page, into an element?
Current issue:
Suppose I use the fullScreen embed option to add it into a section on the website... when the page is opened it scrolls automatically to the Flowise Chat. The page can't be used properly.
Is there a way to make it work properly to embed into a section in the website?
Thank you.
After refreshing the page, the user's chat history is lost
After refreshing the page, the user's chat history is lost
Is it possible to save the recent chat history even after refreshing the page? Similar effect in chatflows admin backend
ArrowUP/Down and ScrollBar not working
I see 2 problems when embed FlowiseChatEmbed to website:
- When I press keys Arrow UP or Arrow Down then only scroll page, not scroll chatbox
- Scrollbar of chatbox is not showing.
How to fix them in code.
The FullPageChat does not support multi-line input box by holding down the shift key.
The FullPageChat ( via shared link) does not support multi-line input when holding down the shift key; however, the popup one in editing mode can do this.
Thank you!
Unable to change the font-size of bot message
When setting font-size for chatWindow
element it affects all elements (title, user message, etc), except for the BOT message.
See image attached.
Chatbot.initFull({
chatflowid: CHATBOT_CHATFLOWID,
apiHost: CHATBOT_APIHOST,
theme: {
chatWindow: {
showTitle: true,
title: 'AI Assistant',
height: 500,
fontSize: 10 // <- does not affect bot message
}
}
})
Title Bar Color & ShowTitle: False (Not Working)
This is a bit of a deal breaker for styling. Is there a way to set the Title Bar Color or is it blue or die? Blue does not fit with 70% of my projects. The comment states show hide the title bar but only hides the text.
CSS Misconfiguration
There is a small css misconfiguration with the feedback box. Currency there is not margins when you use the Popup HTML script. (700x400px by default).
Now:
.mx-auto {
margin-left: auto;
margin-right: auto;
}
It can be fixed by changing the left and right values to 20px or by injecting .mx-auto { margin: 20px !important; }
at the end of index.css
It will fit good with the Popup & Fullpage HTML scripts.
Result:
Is there a method to modify or conceal the 'powered by' text?
instant question buttons
Is it possible to add buttons that have an instant question? Such as "What are your business hours" or "Do you have any specials". It would be great if such functionality could be added by reading an array or Google Sheet that could put that question into the prompt.
Like Shopify's online order chat at:
https://shop.wildrepublic.com/?syclid=ceac36fc-9300-44ee-9b6c-e8ec4d9ab3cb
Shopify's documentation
https://help.shopify.com/en/manual/inbox/chat-settings-and-appearance/instant-answers
Changing import Chatbot from Location
Hey there - I've run through the following
Copy GitHub repo to within the parent Flowise repo location on my machine. CD'd to the new folder and run through the 'yarn install' and 'yarn build'.
Everything shows as ok - no errors seen.
I restart the 'yarn start' command from the parent Flowise repo folder and load up the service. All ok at this point.
I navigate to one of my flow and copy the embed scrip. Adjust the following on my reference HTML page:
<script type="module"> import Chatbot from "./web.js"; Chatbot.initFull({ chatflowid: "###################", //obviously I've hashed out the real ID apiHost: "http://localhost:4321", //yes I've also customised the port which this runs on }); </script>Nothing happens - I reload the page and the popup doesn't show nor does the icon.
I revert the import chatbot from to the provided link on the flowise UI and it works ok.
I want to use the embed so I can customise the chat bubble and change some of the branding elements at the bottom.
Any help would be appreciated. Thanks.
livereload.js: Failed to load resource: net::ERR_CONNECTION_REFUSED
Hello
Loading the web.js file causes a ERR_CONNECTION_REFUSED on missing livereload.js.
Problem with github pages
I have encountered a problem when using a website hosted on gitpages to deploy a chat bot. On my local computer, the websocket connection with the chat works fine, but when I put the chat on gitpages, there is no websocket connection with flowise and the chat freezes. What could be the cause of this problem?
System message on Chatbot.init
It'd be great if we could include a system message on init, epsecially useful if we want to automatically pass user interactions from a website to the bot to process... being as this stuff is in shadowRoot, it's difficult to extend the functionality for a tailored experience.
This request would be ideal especially when there are so many great things happening in our flows stored in the flowise installation!
Custom modification not working
I am following this doc for modifying some part of the styles of the chat window. Here is what I did,
- Fork the Flowise Chat Embed repository
- Make changes to the Bot.tsx file (some css changes and added some classes)
- Ran
pnpm build
- Pushed the code to the forked repo
- 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>
Render upload
Good morning I’m having issues where the upload on render is not working. Anyone has information on how to fix it
STT(Speech to text) vanished. It was working till days ago.
STT(Speech to text) button vanished. It was working till days ago.
{Solved} XHR errors localhost on fullchatbot
Solved it with some JS magic, thanks
401 Unauthorized /api/v1/public-chatbotConfig/ac8240fc...
Hello,
This issue could be related to circumstances outside of flowsieai, such as Cloudflare or Nginx Proxy Manager.
I have successfully deployed the chatbot with GPT4 integration and everything is working without any issues.
Every resource is loading without issues. There's just one file per the screenshot that is failing to load due to "unauthorized access" /api/v1/public-chatbotConfig/ac8240fc...
Your support is highly appreciated.
Display multiple chatbot instances at the same time
HI team,
In my scenario I want to be able to display multiple full page Chat instances at the same time:
- Display Chat on the main page layout in the sidebar
- Display Chat inside the popup (without page reload)
What happens is that when the popup is opened and we initialize the second Chatbot instance,
the first instance gets removed from the main layout.
Would it be possible to keep both?
Thanks!
RTL Support
For RTL projects:
- Is there a way to set the chat interface to RTL directionality?
- Is there a way to set the button location to be 20px from the left i.s.o the right?
Setup Husky for Pre-commit and Pre-push Hooks
Objective:
The purpose of this issue is to integrate Husky into our project to manage and enforce code quality checks through pre-commit and pre-push hooks.
Details:
We aim to set up Husky to run linters, formatters, and tests before commits and pushes.
This will ensure that all committed code adheres to our project's coding standards and passes all tests.
Tasks:
Tasks:
-
Install Husky and necessary dependencies.
- Install the Husky package using npm or yarn.
- Ensure all peer dependencies are also installed as required.
-
Configure Husky to trigger pre-commit hooks for linting and formatting.
- Set up pre-commit hooks in Husky to run linters like ESLint or Prettier.
- Ensure these hooks are configured to run automatically before each commit.
chatWindow goes outside (right) on mobile devices
Reset / start new message placement wrong
Please see this screenshot: https://share.zight.com/o0uKLxdq
I am not sure why the blue bar shows up in the top of my pages instead of inside the chatbox.
Proposal to Integrate Prettier for Consistent Code Formatting
Description:
This issue tracks the addition of Prettier to our codebase, which will enforce consistent code formatting standards across the project. Benefits include:
Consistency: Enforces a uniform coding style, eliminating discrepancies.
Time-saving: Reduces time spent on style discussions during code reviews.
Ease of Contribution: Simplifies the process for contributors to adhere to coding standards.
Proposed Changes:
Add a .prettierrc file with our project-specific configuration settings.
Apply Prettier formatting to all existing files in the codebase to establish a baseline.
How to make the chat embed responsive?
I am embedding the chat module but it seems that the chat window is not responsive in mobile. I am using the custom config as suggested. Any ideas how to make the chat window responsive?
Chatbot Button Size
Ability to set chatbot button size via px
?
The sizes "small", "medium" and "large" are not sufficient
Embedding the flowise chat-bot with default nginx index.html caused CORS issue.
hi there,
I just test the flowise chat-bot with defaul nginx index.html page with following steps:
- There has been a flowise flow with host like 'aiflowise.kq.eu.org'
- There has been another default nginx index.html page with host like 'abc-18688.xyz'.
Following the code as doc showing to insert below code into the default index.html.
<script type="module"> import Chatbot from "https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js" Chatbot.init({ chatflowid: "b8f72c44-1502-4c86-bc96-ef799660a4d1", apiHost: "https://aiflowise.kq.eu.org", }) </script>- Reload the nginx process, and the chat-bot has been displayed.
But, the page got the issue
Access to fetch at 'https://aiflowise.kq.eu.org/api/v1/chatflows-streaming/b8f72c44-1502-4c86-bc96-ef799660a4d1' from origin 'https://abc-18688.xyz' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
'Access to XMLHttpRequest at 'https://aiflowise.kq.eu.org/socket.io/?EIO=4&transport=polling&t=O-fPO6P' from origin 'https://abc-18688.xyz' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.'
Is there any configuration that I missed?
The nginx.conf configued with these headers
location / {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
add_header 'Access-Control-Expose-Headers' 'Content-length, Content-Range';
root /var/www/html;
index index.html;
}
Any suggestion or feedback is appreciated.
BR
Kimi
How can we format output message for the embed chat message?
The canvas chat bubble has nicely formatted output when the bot sends the response.
But when I use the pop up react module from this library, the output are displayed along with markdown syntax.
Is there a way we can enable formatting same as its displayed in canvas when the messages are displayed to the user ?
is it possible to embed in a next.js project?
I'm having the same issue as here:
https://stackoverflow.com/questions/76999705/embedding-flowise-ai-chatbot-into-my-react-app
However, the suggested craco fix from henry doesnt work with a next js project
All chatflows gets deleted
STT(Speech to text) vanished. It was working till days ago.
STT(Speech to text) button vanished. It was working till days ago.
Indented
Missing theme types
Chatbot init
and initFull
method type declarations are missing theme
object:
https://github.com/FlowiseAI/FlowiseChatEmbed/blob/main/dist/web.d.ts
declare const chatbot: {
initFull: (props: {
chatflowid: string;
apiHost?: string | undefined;
chatflowConfig?: Record<string, unknown> | undefined;
observersConfig?: import("./components/Bot").observersConfigType | undefined;
} & {
id?: string | undefined;
}) => void;
init: (props: {
chatflowid: string;
apiHost?: string | undefined;
chatflowConfig?: Record<string, unknown> | undefined;
observersConfig?: import("./components/Bot").observersConfigType | undefined;
}) => void;
};
export default chatbot;
//# sourceMappingURL=web.d.ts.map
Popup Mode misconfiguration
Right now, It makes no much sense to set up the position of the button
since the bot
(or chatWindows) does not follow and there is not an easy way to move it a round, no without touch the source code and cook a new web.js.
--
And this because it renders as two independent elements in the body.
--
Why do not we wrap them up so they can be moved together?
Getting 404 on my chatEmbed implementation
I have been using flowiseAI/chatembed for a long time now, but it has stopped working now.
I've tried using V1.6.0 and 1.6.2, both flowise instances runs fine:
but chatembed stopped working.
Also my postman.co stopped working when i try to get a prediction
I'm running code like this:
const script = document.createElement('script');
script.type = 'module';
script.textContent = `import Chatbot from 'https://cdn.jsdelivr.net/gh/FlowiseAI/FlowiseChatEmbed/dist/web.js';`;
// script.textContent = `import Chatbot from 'https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js;`;
const s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(script, s);
Chatbot.initFull({
chatflowid: this.chatId,
apiHost: this.chatbotBuilderApiHost,
theme: this.theme ? this.theme : this.defaultConfig,
});
whether I use my own fork of chatembed, the old or the official chatEmbed i get this error:
React component not working!
while installing the library for React component :
import { FullPageChat } from "flowise-embed-react"
npm i flowise-embed-react
i am getting the error :
Can't resolve 'flowise-embed/dist/web'
properties of undefined
Hi! Before all, thanks for your contribution!
I was trying to put your chat instance on a react app, and this is what i got when i click on submit.
But if do the request to the route "/api/v1/prediction/uuid" using axios for instance its all ok.
Do you know what is happening? Whats could be the issue/bug?
Support for Multiline Text Input like chatGPT
Feature Request: Multiline Text Input like chatGPT
Problem: The current sidebar widget in FlowiseChatEmbed only supports single-line text input, limiting detailed conversations.
Thank you for considering this enhancement to FlowiseChatEmbed!
Destroy instance of the bot window
Hi, we have the bot implemented in a document repository. When the user switches documents, we end up with multiple instances of the bot. How do we destroy or reinitialize the bot without a page reload?
We're not that familiar with loading Javascript modules. Thanks in advance.
We tried to use Chatbot.toggleBot() but that function is not exported?
Fullchatbot is not working
Full chatbot is throwing error : 'fullchatbot' element not found
Default font size on BotBubble is now 1rem due to prose
The prose
class adds 1rem
font-size to BotBubble. This is supposed to be override by the defaultFontSize
which is 16
, but this doesn't seem to work due to lack of px
on the definition. Here is the current constant and use in BotBubble.tsx
:
...
const defaultFontSize = 16;
...
'font-size': props.fontSize ? `${props.fontSize}px` : `${defaultFontSize}`,
If you run it as-is and inspect the message from the system, it'll be 1rem
which for me is 14px
.
I believe this font-size
line needs to be:
'font-size': props.fontSize ? `${props.fontSize}px` : `${defaultFontSize}px`,
On my local instance this solves it, but the same would have to be done for all the defaultFontSize
usages in the embed app.
How to add contextual variables to the chatbot?
I have specific contextual variables that need to be loaded with the chatbot. Is there a way to init the chat bot passing these vatiables? Such as:
Chatbot.init({
initialContext: { var1 = a, var2 = b, var3 = c },
...
userMessage: {
//Or here?
initialContext: { var1 = a, var2 = b, var3 = c }
},
})
Pop up message
[BUG] Agentflows only shows last worker message and no others when using "FlowiseChatEmbed"
Describe the bug
As per the title, when using share chatbot no agentflow messages appear except for the very last one on Finish. No supervisor or any other workers messages are displayed.
To Reproduce
Steps to reproduce the behavior:
Go to '.Share Chatbot"
Click on '.Send Message'
Scroll down to '.N/A'
See error
Expected behavior
To show the sequence of messages from Supervisor through workers
Setup
Installation [Docker]
Flowise Version [1.8.3]
OS: [Win 11]
Browser [Chrome]
Refer to same issue fixed in "Share Bot"
FlowiseAI/Flowise#2746
No Response on Initial Message
Sometimes, in the Flowise embedded chat, when a user types a message for the first time, there is a loading period in the chatbot, but then it does not produce any response.
@HenryHengZJ , After reviewing the Flowise embed code, I suggest adding an extra condition in:
https://github.com/FlowiseAI/FlowiseChatEmbed/blob/83576e276a6940c916bded323e4a8bd4a76f0475/src/components/Bot.tsx
https://github.com/FlowiseAI/FlowiseChatEmbed/blob/83576e276a6940c916bded323e4a8bd4a76f0475/src/queries/sendMessageQuery.ts
The condition should check if the websocket is not connected, and if so, produce the output directly. This adjustment could help alleviate the issue to some extent, enabling users with lower CPU and RAM to use it smoothly, as the current Flowise only works well with good CPU and RAM.
Note: I also checked your Digital Ocean video here https://youtu.be/nchOuARbqEk?si=yKvtNbsI9DrX0Hfb and followed the same steps, facing the same issue of websocket connection delay. Thus, I believe addressing this should be a priority.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.