IXP RAG Widget

A plug-and-play support chat widget for websites, connecting to a chatbot server via WebSocket. Easily integrates with any site and supports NPM or direct script loading.

Features

• WebSocket-based chat with a backend server
• Prefills chat history on initialization
• User and chatbot messages, with live updates
• Collapsible UI pinned to the bottom right
• Send messages via button or Enter key
• Auto-scrolls to latest message
• Easy configuration and initialization

Getting Started

1. Installation

NPM

npm install ixp-rag-widget

Direct Script

Include the following in your HTML:

<script src="./src/ixp-rag-widget.js"></script>
<script src="./src/init-ixp-rag-widget.js"></script>
<link rel="stylesheet" href="./src/ixp-rag-widget.css" />

2. Configuration

Add a configuration script before the widget scripts:

<script>
  const APP_ID = "APP_ID";
  const user = {
    id: "user-123",
    name: "John Doe",
    email: "[email protected]",
    createdAt: "2025-10-13",
  };
  window.ixpRagSettings = {
    websocket_base: "wss://base-url.com",
    app_id: APP_ID,
    user_id: user.id,
    name: user.name,
    email: user.email,
  };
</script>

3. Initialization

The widget will automatically initialize and connect using the provided settings.

Message Format

• Question:

{
  "text": "what is a tree?",
  "conversation_id": "CONVERSATION_ID"
}

• Reply:

{
  "id": "MESSAGE_ID",
  "text": "Who even knows...",
  "conversation_id": "CONVERSATION_ID"
}

• History (on initialization):

[
  {
    "id": "MESSAGE_ID",
    "role": "user" | "model",
    "text": "question or reply",
    "message_time": "2025-10-13T02:13:51.825430+00:00"
  }
]

Customization

• Style the widget via src/ixp-rag-widget.css or override in your own CSS.
• The widget can be collapsed/expanded by clicking the header.

Author

ZeroMarginKe