Spectrum Chat

A parameterized wrapper for the deep-chat widget that provides custom styling, intro panel, and enhanced functionality. This component can be easily integrated into any website with minimal configuration.

Features

• 🎨 Customizable Styling: Colors, positioning, size, and appearance
• 📱 Responsive Design: Works on desktop and mobile devices
• 🔧 Easy Integration: Simple HTML tag with configuration attributes
• 💬 Intro Panel: Customizable welcome message
• 🔗 Citation Support: Clickable citations with hover tooltips
• 🎯 Multiple Positions: Bottom-right, bottom-left, top-right, top-left
• ⚡ Event System: Listen to chat open/close events
• 🔄 Dynamic Configuration: Update settings programmatically
• 📦 Easy Setup: Simple script inclusion with automatic deep-chat loading

Installation

NPM (Recommended)

npm install spectrum-chat

CDN

<script src="https://unpkg.com/spectrum-chat@latest/dist/spectrum-chat.js"></script>

Manual Download

Download the latest release from the releases page.

Quick Start

1. Include Dependencies

<!-- Include Deep Chat -->
<script type="module" src="https://unpkg.com/deep-chat@latest/dist/deepChat.bundle.js"></script>

<!-- Include Spectrum Chat Component -->
<script src="dist/spectrum-chat.js"></script>

2. Add the Component

<spectrum-chat
  api-url="https://your-api.com/chat"
  tenant-id="your-tenant-id"
  title="Your AI Assistant"
  intro-text="Hello! How can I help you today?"
  primary-color="hsl(145 73% 35%)"
  user-color="hsl(195 82% 45%)"
  position="bottom-right"
  width="320px"
  height="350px"
  show-intro="true"
  enable-citations="true"
  max-messages="100"
></spectrum-chat>

Configuration Options

| Attribute | Type | Default | Description | |-----------|------|---------|-------------| | api-url | string | required | API endpoint for chat requests | | tenant-id | string | required | Tenant identifier for API | | title | string | "AI Assistant" | Chat widget title | | intro-text | string | "Hello! How can I help you?" | Welcome message | | primary-color | string | "hsl(145 73% 35%)" | Primary theme color | | user-color | string | "hsl(195 82% 45%)" | User message color | | ai-color | string | "hsl(145 73% 35%)" | AI message color | | position | string | "bottom-right" | Widget position (bottom-right, bottom-left, top-right, top-left) | | width | string | "320px" | Widget width | | height | string | "350px" | Widget height | | show-intro | boolean | true | Show intro panel | | enable-citations | boolean | true | Enable citation support | | max-messages | number | 100 | Maximum messages to display | | browser-storage | boolean | true | Enable browser storage | | fab-icon | string | "💬" | FAB icon | | fab-color | string | "hsl(145 73% 35%)" | FAB color | | panel-border-radius | string | "12px" | Panel border radius |

Usage Examples

Basic Usage

<spectrum-chat
  api-url="https://api.example.com/chat"
  tenant-id="my-tenant-123"
  title="Customer Support"
  intro-text="Hi! I'm here to help with your questions."
></spectrum-chat>

Custom Styling

<spectrum-chat
  api-url="https://api.example.com/chat"
  tenant-id="my-tenant-123"
  title="Brand Assistant"
  intro-text="Welcome to our support chat!"
  primary-color="#ff6b6b"
  user-color="#4ecdc4"
  position="bottom-left"
  width="400px"
  height="500px"
  fab-icon="🤖"
  fab-color="#ff6b6b"
></spectrum-chat>

Programmatic Control

// Get the component
const chatWidget = document.querySelector('spectrum-chat');

// Listen to events
chatWidget.addEventListener('chat-opened', () => {
  console.log('Chat opened');
});

chatWidget.addEventListener('chat-closed', () => {
  console.log('Chat closed');
});

// Update configuration
chatWidget.setAttribute('title', 'New Title');
chatWidget.setAttribute('intro-text', 'Updated intro message');

Build Versions

This package includes three different build versions:

1. Standard Version (spectrum-chat.js): Requires deep-chat to be loaded separately
2. Bundled Version (spectrum-chat-bundled.js): Includes deep-chat loading logic
3. Fully Bundled Version (spectrum-chat-fully-bundled.js): Completely standalone with all dependencies

Choose the version that best fits your needs:

• Use standard if you already have deep-chat loaded
• Use bundled if you want automatic deep-chat loading
• Use fully bundled if you want a completely standalone solution

Development

Building

# Install dependencies
npm install

# Build bundled version
npm run build

# Run demo server
npm run demo

File Structure

spectrum-chat/
├── lib/                          # Library files
│   └── spectrum-chat.js          # Main component (standard)
├── dist/                         # Distribution files
│   ├── spectrum-chat-bundled.js  # Bundled version
│   └── spectrum-chat-fully-bundled.js # Fully bundled version
├── src/                          # Source files
│   ├── spectrum-chat.js          # Source for main component
│   ├── spectrum-chat-bundled.js  # Source for bundled version
│   ├── legacy-main.js            # Legacy main.js from arrowhead project
│   └── legacy-build.js           # Legacy build.js from arrowhead project
├── examples/                     # Usage examples
│   ├── basic-usage.html          # Basic usage example
│   └── bundled-usage.html        # Bundled usage example
├── demo/                         # Demo files
│   ├── spectrum-chat-demo.html
│   ├── bundled-demo.html
│   ├── fully-bundled-demo.html
│   └── no-frills-demo.html
├── docs/                         # Documentation
├── create-bundled.js             # Build script
├── package.json                  # NPM package configuration
├── README.md                     # This file
└── LICENSE                       # MIT License

Browser Support

• Chrome 54+
• Firefox 63+
• Safari 10.1+
• Edge 79+

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

License

MIT License - see LICENSE file for details.

Support

For issues and questions:

• GitHub Issues
• Documentation

Changelog

v1.0.0

• Initial release
• Customizable styling and positioning
• Intro panel support
• Citation support
• Event system
• Multiple build versions