Skip to content

mesolitica/chat-widget

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

chat-widget 💬

Customizable Web Chat Widget 💬, deprecated, use https://github.com/mesolitica/nous-chat-widget

Features 🔥

  • Collapse and expand animation.
  • Fullscreen button and animation.
  • Waiting chat respond animation.
  • Customize color, title, font family and first message.
  • Custom POST request.
  • Auto generate user UUID and store the historical chats in UserSession.
  • Error message on exception.
  • 100% pure vanilla Javascript.
Screen.Recording.2024-06-24.at.7.57.24.PM.mov

how-to

localhost

Use Python webserver,

python3 server.py --port 8080 --host 0.0.0.0

Existing website

Minimal as,

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

  <script src="https://cdn.jsdelivr.net/gh/mesolitica/chat-widget@0.1.1/chat.js"></script>
  <script>
    ChatWidget.init(
      'https://example.com',
      color = '#1076EE',
      first_message = 'Hi, my name is bot!',
    );
  </script>
</body>

</html>

Parameters

window.ChatWidget = {
    init: function (
        url,
        color = "#0056FF",
        title = "Conversation",
        font_family = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif",
        first_message = "Hello, my name is bot!",
        init_payload = 'SpecialInitPayLoadDoNotTouch',
        z_index = '1000',
    ) {
        createChatWidget(url, color, title, font_family, first_message, init_payload, z_index);
    }
};

What kind of parameters we use for POST request?

const jsonData = {
    sender: userUUID,
    message: text
};

fetch(url, {
    method: 'POST',
    headers: headers,
    body: JSON.stringify(jsonData)
})
    .then(response => response.json())
    .then(data => {
        const r = data;
        removeTypingIndicator(typingIndicator);
        for (let i = 0; i < r.length; i++) {
            addMessage(r[i]['text'], 'ai');
        }
    })
    .catch(error => {
        removeTypingIndicator(typingIndicator);
        addErrorMessage(error);
    });

The API must returned a single array with a dictionary element and text for the key.

We will support streaming soon.