Configuration Overview

To configure the helixml/chat-widget within a development environment, follow the steps outlined below. The process primarily involves adjusting TypeScript and HTML configurations to tailor the chat widget behavior and appearance.

Step 1: Setting Up the Configuration File

Create a configuration file named chat-config.ts in your TypeScript project. This file will contain all the necessary configuration settings for the chat widget.

Example:

export const chatConfig = {
    apiUrl: "https://api.yourservice.com/chat",
    localization: {
        defaultLanguage: "en",
        supportedLanguages: ["en", "es", "fr"]
    },
    appearance: {
        theme: "dark",
        position: "bottom-right",
        customStyles: {
            backgroundColor: "#333",
            color: "#fff",
            buttonColor: "#007bff"
        }
    },
    features: {
        typingIndicator: true,
        fileUpload: true,
        chatHistory: false,
    }
};

Step 2: Importing the Configuration

In your main application file, ensure to import the configuration settings from the chat-config.ts file. This will allow the chat widget to utilize these settings.

Example:

import { chatConfig } from './chat-config';

// Initialize the chat widget with configurations
initializeChatWidget(chatConfig);

Step 3: Customizing HTML Elements

You can customize the chat widget’s HTML structure to accommodate your branding and user experience requirements. Edit the HTML file where the chat widget will be rendered, ensuring it reflects the adjustments needed.

Example:

<div id="chat-widget" style="position: fixed; bottom: 20px; right: 20px; background-color: #333; color: #fff;">
    <header style="background-color: #007bff; padding: 10px; text-align: center;">
        <h3>Chat with Us</h3>
    </header>
    <div id="messages" style="height: 300px; overflow-y: scroll;"></div>
    <textarea id="user-input" placeholder="Type your message..." style="width: 100%;"></textarea>
    <button id="send-button" style="background-color: #007bff; color: #fff;">Send</button>
</div>

Step 4: Implementing the Chat Logic

You will need to implement the logic for handling user interactions with the chat widget. This includes setting up event listeners for sending messages, updating the chat UI, and incorporating features like typing indicators, if enabled.

Example:

document.getElementById('send-button').addEventListener('click', () => {
    const userInput = (document.getElementById('user-input') as HTMLTextAreaElement).value;
    
    if (userInput.trim()) {
        sendMessage(userInput);
        (document.getElementById('user-input') as HTMLTextAreaElement).value = ''; // Clear input field
    }
});

function sendMessage(message: string) {
    // Logic to send message to the chat API
    fetch(chatConfig.apiUrl, {
        method: 'POST',
        body: JSON.stringify({ text: message }),
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        displayMessage(data.reply); // Handle the reply and update UI accordingly
    });
}

Step 5: Enhancing User Experience

Consider adding additional features based on the configuration settings. For instance, you can enable a typing indicator or allow users to send files.

Here’s an example of how you might implement a typing indicator by using setTimeout to simulate typing.

Example:

let typingTimeout;

document.getElementById('user-input').addEventListener('input', () => {
    clearTimeout(typingTimeout);
    // Show typing indicator
    showTypingIndicator();

    typingTimeout = setTimeout(() => {
        hideTypingIndicator();
    }, 1000);
});

function showTypingIndicator() {
    // Logic to show typing indicator on the chat UI
}

function hideTypingIndicator() {
    // Logic to hide typing indicator
}

Conclusion

This configuration guide captures the essentials required to set up the helixml/chat-widget in a development environment. Adjust the provided examples as needed to suit your specific application requirements.

Source: helixml/chat-widget configuration guidelines