Skip to content

mesolitica/nous-chat-widget

Repository files navigation

Chat Widget πŸ’¬

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.

Features πŸ”₯

  • 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.

Voice interrupt example

audio-interrupt.mp4

Voice code block real-time rendering example

streaming-codeblock.mov

how to

development

  1. Use Yarn,
yarn install
yarn run dev
  1. Access http://localhost:5173

build

  1. Use Yarn,
yarn build
  1. Run build.html.

Parameters

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>