Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
dec4b30
AI Chatbot
kientv Aug 26, 2025
216ac6f
Add onRequest when send message
PhucLe1107 Sep 30, 2025
02d767e
Merge pull request #3 from kientv/on-request-send-message
kientv Oct 2, 2025
35f81f1
fix width height chat widget
PhucLe1107 Nov 3, 2025
2e49449
Authorization chatbot
PhucLe1107 Oct 13, 2025
f66f8c7
Support body.uploads
kientv Nov 26, 2025
67fb7f1
fix callback oidc
PhucLe1107 Nov 28, 2025
880134b
git rm -r --cached dist
kientv Dec 2, 2025
28ff908
Get recording payload data to push user messages
PhucLe1107 Dec 2, 2025
7c6371e
Add TTS feature with autoplay
0xi4o Aug 26, 2025
b4cd943
Fix lint errors and formatting
0xi4o Aug 26, 2025
24d0234
Port fixes from internal chat
0xi4o Sep 21, 2025
1978320
Port more fixes
0xi4o Sep 22, 2025
82353eb
Fix abort issues for autoplay and manual TTS
0xi4o Sep 26, 2025
6782456
Apply prettier
0xi4o Sep 26, 2025
520162d
Remove react component
0xi4o Sep 26, 2025
3199723
Fix audio overlap due to malfunctioning abort
0xi4o Sep 30, 2025
5521d37
flowise-embed@3.0.5
HenryHengZJ Oct 3, 2025
6252183
AI Chatbot
kientv Aug 26, 2025
a6f7370
Authorization chatbot
PhucLe1107 Oct 13, 2025
8829f0e
git rm -r --cached dist
kientv Dec 2, 2025
95f8e08
TTS for chatbot
kientv Dec 3, 2025
23adc83
Customize message date and time and don't automatically reopen the ch…
PhucLe1107 Dec 4, 2025
4dfde5e
Improve tts endpoint
kientv Dec 5, 2025
3f9802d
Fix bug speaker
PhucLe1107 Dec 8, 2025
285aca0
Require enter a message when uploading image
PhucLe1107 Dec 12, 2025
c8c0f09
Fix can not send audio
PhucLe1107 Dec 17, 2025
05ee456
Move the image url position into the message content
PhucLe1107 Dec 23, 2025
1a29a71
The image can be enlarged
PhucLe1107 Dec 25, 2025
632a227
hide text and icon
haviet4012 Jan 6, 2026
54d04d6
Reduce the height by less on a 768px screen
PhucLe1107 Jan 8, 2026
c903623
Feature onUpload
PhucLe1107 Jan 6, 2026
eed7b76
Fix QuotaExceededError when using TTS
PhucLe1107 Jan 12, 2026
c62db0c
Display a chatbot service expiration message
PhucLe1107 Jan 19, 2026
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions .env.example
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,11 @@ FLOWISE_API_KEY=
# CHATFLOWS CONFIGURATION (required)
# ==============================================

# Format: [identifier]=[chatflowId],[allowedDomain1],[allowedDomain2],...
# Format: [identifier]=[chatbot],[allowedDomain1],[allowedDomain2],...
#
# Each entry consists of:
# - identifier: Any name you choose (e.g., agent1, support, salesbot)
# - chatflowId: The UUID of your Flowise chatflow
# - chatbot: The chatbot name
# - allowedDomains: Comma-separated list of domains where this chat can be embedded
# Note: Wildcard domains (*) are not supported for security reasons
#
Expand Down
3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
node_modules
.idea
.env
.env
dist
66 changes: 31 additions & 35 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
<!-- markdownlint-disable MD030 -->

# Flowise Embed

Javascript library to display flowise chatbot on your website

![Flowise](https://github.com/FlowiseAI/FlowiseChatEmbed/blob/main/images/ChatEmbed.gif?raw=true)
# aichatbot.com.vn Embed

Install:

Expand All @@ -18,15 +14,15 @@ Dev:
yarn dev
```

A development server will be running on http://localhost:5678 automatically. Update `public/index.html` to connect directly to Flowise:
A development server will be running on http://localhost:5678 automatically. Update `public/index.html` to connect directly to aichatbot.com.vn:

```html
<!-- public/index.html -->
<script type="module">
import Chatbot from 'https://localhost:5678/web.js'; // Change to from './web.js' to 'https://localhost:5678/web.js'
Chatbot.init({
chatflowid: '91e9c803-5169-4db9-8207-3c0915d71c5f', // Add your Flowise chatflowid
apiHost: 'https://your-flowise-instance.com', // Add your Flowise apiHost
chatbot: 'mitiga', // Add your chatbot name
apiHost: 'https://aichatbot.com.vn',
});
</script>
```
Expand All @@ -43,9 +39,9 @@ yarn build

```html
<script type="module">
import Chatbot from 'https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js';
import Chatbot from 'https://aichatbot.com.vn/chatbox_v3.js';
Chatbot.init({
chatflowid: '<chatflowid>',
chatbot: '<chatbot_name>',
apiHost: 'http://localhost:3000',
});
</script>
Expand All @@ -55,23 +51,23 @@ yarn build

```html
<script type="module">
import Chatbot from 'https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js';
import Chatbot from 'https://aichatbot.com.vn/chatbox_v3.js';
Chatbot.initFull({
chatflowid: '<chatflowid>',
chatbot: '<chatbot_name>',
apiHost: 'http://localhost:3000',
});
</script>
<flowise-fullchatbot></flowise-fullchatbot>
<ai-fullchatbot></ai-fullchatbot>
```

To enable full screen, add `margin: 0` to <code>body</code> style, and confirm you don't set height and width

```html
<body style="margin: 0">
<script type="module">
import Chatbot from 'https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js';
import Chatbot from 'https://aichatbot.com.vn/chatbox_v3.js';
Chatbot.initFull({
chatflowid: '<chatflowid>',
chatbot: '<chatbot_name>',
apiHost: 'http://localhost:3000',
theme: {
chatWindow: {
Expand All @@ -90,11 +86,11 @@ You can also customize chatbot with different configuration

```html
<script type="module">
import Chatbot from 'https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js';
import Chatbot from 'https://aichatbot.com.vn/chatbox_v3.js';
Chatbot.init({
chatflowid: '91e9c803-5169-4db9-8207-3c0915d71c5f',
chatbot: 'mitiga',
apiHost: 'http://localhost:3000',
chatflowConfig: {
config: {
// topK: 2
},
observersConfig: {
Expand Down Expand Up @@ -136,7 +132,7 @@ You can also customize chatbot with different configuration
},
disclaimer: {
title: 'Disclaimer',
message: 'By using this chatbot, you agree to the <a target="_blank" href="https://flowiseai.com/terms">Terms & Condition</a>',
message: 'By using this chatbot, you agree to the <a target="_blank" href="https://aichatbot.com.vn/terms">Terms & Condition</a>',
textColor: 'black',
buttonColor: '#3b82f6',
buttonText: 'Start Chatting',
Expand All @@ -154,7 +150,7 @@ You can also customize chatbot with different configuration
chatWindow: {
showTitle: true,
showAgentMessages: true,
title: 'Flowise Bot',
title: 'MITIGA AI',
titleAvatarSrc: 'https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/google-messages.svg',
titleBackgroundColor: '#3B81F6',
titleTextColor: '#ffffff',
Expand Down Expand Up @@ -205,8 +201,8 @@ You can also customize chatbot with different configuration
footer: {
textColor: '#303235',
text: 'Powered by',
company: 'Flowise',
companyLink: 'https://flowiseai.com',
company: 'MITIGA AI',
companyLink: 'https://aichatbot.com.vn',
},
},
},
Expand All @@ -216,7 +212,7 @@ You can also customize chatbot with different configuration

## (Experimental) Proxy Server Setup

The Flowise Embed Proxy Server enhances the security of your chatbot implementation by acting as a protective intermediary layer. This server eliminates the need to expose sensitive Flowise instance details in your frontend code and provides several key security benefits:
The aichatbot.com.vn Embed Proxy Server enhances the security of your chatbot implementation by acting as a protective intermediary layer. This server eliminates the need to expose sensitive Flowise instance details in your frontend code and provides several key security benefits:

![Proxy Server](https://github.com/FlowiseAI/FlowiseChatEmbed/blob/main/images/proxyserver.png?raw=true)

Expand All @@ -233,14 +229,14 @@ This proxy server can be deployed to any Node.js hosting platform.

```bash
# Copy .env.example to .env and configure required settings:
API_HOST=https://your-flowise-instance.com
FLOWISE_API_KEY=your-api-key
API_HOST=https://aichatbot.com.vn
API_KEY=your-api-key

# Configure your chatflows:
# Format: [identifier]=[chatflowId],[allowedDomain1],[allowedDomain2],...
# Format: [identifier]=[chatbot],[allowedDomain1],[allowedDomain2],...
#
# identifier: Any name you choose (e.g., agent1, support, salesbot)
# chatflowId: The UUID of your Flowise chatflow
# chatbot: The chatbot name
# allowedDomains: Comma-separated list of domains where this chat can be embedded
#
# Examples:
Expand All @@ -264,15 +260,15 @@ yarn start
# - Cloud: [Your Platform URL] (e.g., https://your-app.herokuapp.com)
```

4. Once the proxy server is running in production, you will be able to embed your chatbots safely without exposing your Flowise API host and chatflow IDs as below:
4. Once the proxy server is running in production, you will be able to embed your chatbots safely without exposing your aichatbot.com.vn API host and chatbot name as below:

```html
<script type="module">
import Chatbot from 'your-proxy-server-url/web.js'; // Must be 'your-proxy-server-url/web.js'
Chatbot.init({
chatflowid: 'your-identifier-here', // Must match an identifier from your .env
chatbot: 'your-identifier-here', // Must match an identifier from your .env
apiHost: 'your-proxy-server-url', // Must match the URL of your proxy server
chatflowConfig: {
config: {
// ...
},
});
Expand All @@ -283,7 +279,7 @@ yarn start

```html
<!-- public/index.html -->
chatflowid: 'your-identifier-here' // Must match an identifier from your .env
chatbot: 'your-identifier-here' // Must match an identifier from your .env
```

**Important Notes:**
Expand Down Expand Up @@ -311,14 +307,14 @@ yarn start
3. Update the test page configuration:

- Open `public/index.html` in your code editor
- Modify the `chatflowid` and `apiHost` to match your `.env` settings:
- Modify the `chatbot` and `apiHost` to match your `.env` settings:

```html
<!-- public/index.html -->
<script type="module">
import Chatbot from './web.js';
Chatbot.init({
chatflowid: 'agent1', // Must match an identifier from your .env
chatbot: 'agent1', // Must match an identifier from your .env
apiHost: 'http://localhost:3001', // Change this from window.location.origin to 'http://localhost:3001'
});
</script>
Expand All @@ -328,11 +324,11 @@ For full page testing, use this configuration instead:

```html
<!-- public/index.html -->
<flowise-fullchatbot></flowise-fullchatbot>
<ai-fullchatbot></ai-fullchatbot>
<script type="module">
import Chatbot from './web.js';
Chatbot.initFull({
chatflowid: 'agent1', // Must match an identifier from your .env
chatbot: 'agent1', // Must match an identifier from your .env
apiHost: 'http://localhost:3001', // Change this from window.location.origin to 'http://localhost:3001'
});
</script>
Expand Down
10 changes: 0 additions & 10 deletions dist/components/Badge.d.ts

This file was deleted.

1 change: 0 additions & 1 deletion dist/components/Badge.d.ts.map

This file was deleted.

134 changes: 0 additions & 134 deletions dist/components/Bot.d.ts

This file was deleted.

1 change: 0 additions & 1 deletion dist/components/Bot.d.ts.map

This file was deleted.

10 changes: 0 additions & 10 deletions dist/components/FeedbackContentDialog.d.ts

This file was deleted.

1 change: 0 additions & 1 deletion dist/components/FeedbackContentDialog.d.ts.map

This file was deleted.

Loading