TypeScript Chat Widget

This TypeScript chat widget provides a customizable, real-time chat interface that can be easily integrated into web applications. It uses WebSocket for real-time communication and supports various configuration options.

Features

• Real-time messaging using WebSocket
• Customizable appearance (position, theme)
• Automatic reconnection on connection loss
• TypeScript support with full type definitions
• JSDoc comments for better code documentation

Installation

1. Clone this repository or copy the TypeScript files into your project.
2. Install the required dependencies:

pnpm install

Usage

1. Include the compiled JavaScript file in your HTML:

<script src="path/to/chat-widget.js"></script>

2. Initialize the chat widget with your configuration:

const chat = chatWidget({
  position: "bottom-right",
  theme: "light",
  orgID: "your-org-id",
  fileID: "your-file-id"
});

// Open the chat window
chat.open();

// Close the chat window
chat.close();

// Check if the chat window is open
console.log(chat.isOpen());

Configuration Options

• position: Position of the chat widget ("bottom-right", "bottom-left", "top-right", "top-left")
• theme: Color theme of the widget ("light" or "dark")
• companyName: Name of your company or support team
• orgID: Your organization's unique identifier
• fileID: (Optional) Unique identifier for aidentifier
• fileID: (Optional) Unique identifier for a specific file or conversation

API

The chat widget returns an API object with the following methods:

• open(): Opens the chat window
• close(): Closes the chat window
• isOpen(): Returns a boolean indicating whether the chat window is currently open

Customization

You can customize the appearance of the chat widget by modifying the CSS styles in the addStyles function within the chat-widget.ts file.

Development

To make changes to the chat widget:

1. Modify the TypeScript files (chat-widget.ts and types.ts)
2. Recompile the TypeScript files: