BrandSafway AI Chat Assistant

AI-powered assistant integrated with Enterprise 360, Finance, and Operations data

Live Demo

AI Assistant

Chat Statistics

Message Templates

Drop files here to upload

0 / 2000

Quick Start Guide

1. Include Required Files

<!-- CSS -->
<link rel="stylesheet" href="/static/css/generic-chat.css">

<!-- JavaScript -->
<script src="/static/js/generic-chat.js"></script>

2. Add HTML Container

<div id="myChat" class="generic-chat-container">
    <!-- See full HTML structure in example -->
</div>

3. Initialize Chat

const chat = new GenericChat({
    containerId: 'myChat',
    apiEndpoint: '/api/chat',
    storagePrefix: 'myapp',

    features: {
        voiceInput: true,
        reactions: true,
        analytics: true,
        templates: true
    },

    callbacks: {
        onSend: async (message) => {
            // Handle message sending
            return "Response from server";
        }
    }
});

// Make it globally accessible
window.demoChat = chat;

25+ Features Included

  • Voice input (speech-to-text)
  • Message reactions (5 emojis)
  • Pin/unpin messages
  • Multi-format export (TXT, JSON, MD, HTML)
  • Chat analytics dashboard
  • Message templates
  • Text formatting toolbar
  • Smart autocomplete
  • Message search with highlighting
  • Quick reply buttons
  • Drag & drop file upload
  • Markdown rendering
  • Message timestamps
  • Copy/delete message actions
  • Character counter
  • Typing indicator
  • Session persistence
  • And more...

Configuration Options

containerId: 'string'      // Container element ID
apiEndpoint: 'string'      // API endpoint URL
storagePrefix: 'string'    // Storage key prefix
planIdKey: 'string'        // Plan ID key
maxMessageLength: number   // Max chars (default: 2000)

features: {
    voiceInput: boolean,
    reactions: boolean,
    pinning: boolean,
    analytics: boolean,
    templates: boolean,
    search: boolean,
    export: boolean,
    formatting: boolean,
    autocomplete: boolean,
    quickReplies: boolean,
    fileUpload: boolean
}

callbacks: {
    onSend: function(msg),
    onResponse: function(response),
    onError: function(error),
    onInit: function(chat)
}

Public Methods

chat.addMessage(role, content, options)
chat.sendMessage(text)
chat.searchMessages(query)
chat.clearChat()
chat.exportChat(format)
chat.toggleVoiceInput()
chat.toggleAnalytics()
chat.toggleTemplates()
chat.setPlanId(id)
chat.getHistory()
chat.resetHistory()

Complete HTML Structure

Copy this structure to use the chat component on any page:

<div id="yourChatId" class="generic-chat-container" style="height: 600px;">
    <div class="chat-header">
        <h3><i class="fas fa-robot"></i> Chat Title</h3>
    </div>

    <div class="chat-panel">
        <div class="chat-toolbar">
            <div class="chat-search-box">
                <i class="fas fa-search"></i>
                <input type="text" placeholder="Search..."
                       oninput="yourChat.searchMessages(this.value)">
            </div>
            <button class="chat-toolbar-btn" onclick="yourChat.toggleAnalytics()">
                <i class="fas fa-chart-bar"></i> Analytics
            </button>
            <!-- Add more toolbar buttons as needed -->
        </div>

        <div class="chat-analytics">
            <h4>Chat Statistics</h4>
            <div class="analytics-grid"></div>
        </div>

        <div class="templates-panel">
            <div class="templates-header">
                <h4>Templates</h4>
                <button onclick="yourChat.saveAsTemplate()">Save</button>
            </div>
            <div class="templates-list"></div>
        </div>

        <div class="quick-replies">
            <!-- Quick reply buttons -->
        </div>

        <div class="chat-messages">
            <div class="typing-indicator">
                <div class="typing-dot"></div>
                <div class="typing-dot"></div>
                <div class="typing-dot"></div>
            </div>
        </div>

        <div class="chat-drop-overlay">
            <div class="drop-message">
                <i class="fas fa-cloud-upload-alt"></i>
                <p>Drop files here</p>
            </div>
        </div>
    </div>

    <div class="chat-input-area">
        <div class="formatting-toolbar">
            <button onclick="yourChat.insertFormat('**', '**')">
                <i class="fas fa-bold"></i>
            </button>
            <!-- More formatting buttons -->
        </div>

        <div class="input-wrapper">
            <div class="autocomplete-suggestions"></div>
            <textarea class="chat-input" placeholder="Type..."></textarea>
            <button class="voice-input-btn" onclick="yourChat.toggleVoiceInput()">
                <i class="fas fa-microphone"></i>
            </button>
            <button class="send-btn" onclick="yourChat.sendMessage()">
                Send
            </button>
        </div>

        <div class="char-counter">0 / 2000</div>
    </div>
</div>