Customizable Web Chat Widget π¬
Currently this chat widget optimized for https://nous.my, but to change to use your own should be super easy to do it.
- Collapse and expand animation.
- Waiting chat respond animation.
- Customize chat bubbles logo, launcher logo, color, title, font family and first message.
- Support SSE Streaming, OpenAI compatibility.
- Audio streaming using RecordRTC.
- Interrupt button to stop streaming for text input.
- Interrupt voice to stop streaming for audio input.
- Auto generate user UUID and store the historical chats in UserSession.
- Error message on exception.
- Support Markdown and code blocks real-time rendering.
audio-interrupt.mp4
streaming-codeblock.mov
- Use Yarn,
yarn install
yarn run dev
- Access http://localhost:5173
- Use Yarn,
yarn build
- Run build.html.
const props = defineProps({
webhookUrl: {
type: String,
required: true,
},
color: {
type: String,
default: "#ff2627",
},
title: {
type: String,
default: "Padi Bot",
},
firstMessage: {
type: String,
default: "Chat with us",
},
secondMessage: {
type: String,
default: "How can we help you today?",
},
initPayload: {
type: String,
default: "SpecialInitPayLoadDoNotTouch",
},
zIndex: {
type: String,
default: "1000",
},
asrChunk: {
type: Number,
default: 800,
},
asrLanguage: {
type: String,
default: "en",
},
minimumSilentSecond: {
type: Number,
default: 1.5,
},
});
To initialize,
<script src="./dist/nous-chat.js"></script>
<script>
Nous.init({
color: "#1076EE",
zIndex: "1000",
webhookUrl:
"https://search-api-v2.nous.mesolitica.com/chat/[email protected]/2968",
title: "Bot",
firstMessage: "Hi there!",
secondMessage: "How can I help you today?",
initPayload: "SpecialInitPayLoadDoNotTouch",
});
</script>