GenX Chat Widget

A customizable chat widget for React and Next.js applications.

Installation

npm install genx-chat-widget
# or
yarn add genx-chat-widget

Features

• Easy integration with React/Next.js applications
• Real-time chat functionality using Socket.io
• Customizable themes
• Two main components: JoinChat and ChatRoom
• Seamless guest session management
• UI customization support with component overrides
• Markdown support for chat messages
• CSS variable-based styling system

Usage

Basic Setup

import { createChatConfig, JoinChat, ChatRoom } from "genx-chat-widget";

// Create configuration
const chatConfig = createChatConfig({
  socketUrl: "https://your-socket-server.com",
  chatbotId: "optional-chatbot-id", // Optional
  business: {
    businessId: "your-business-id",
    name: "Your Business Name",
    primaryColor: "teal-600", // Optional, defaults to teal-600
    hoverColor: "teal-700", // Optional, defaults to teal-700
  },
});

// Join Chat Component
function YourJoinChatComponent() {
  const handleRoomJoined = (roomId) => {
    console.log("Room joined:", roomId);
    // Navigate to chat room or update state
  };

  const handleSessionCreated = (session) => {
    console.log("Session created:", session);
    // Store session information if needed
  };

  return (
    <JoinChat
      config={chatConfig}
      onRoomJoined={handleRoomJoined}
      onSessionCreated={handleSessionCreated}
      customStorageKey="your-app-chat-session" // Optional
      apiBasePath="/api/chat" // Optional
    />
  );
}

// Chat Room Component
function YourChatRoomComponent({ roomId }) {
  const handleBack = () => {
    // Handle navigation back to join screen
  };

  return (
    <ChatRoom
      config={chatConfig}
      roomId={roomId}
      onBack={handleBack}
      apiBasePath="/api/chat" // Optional
      customStorageKey="your-app-chat-session" // Optional
    />
  );
}

Markdown Support

The chat widget supports basic markdown in messages:

• Bold text using **bold**
• Italic text using *italic*
• Links using [link text](url)
• Code snippets using backticks

• Blockquotes using > prefix

• Ordered and unordered lists

Example message with markdown:

**Hello!** I can help with your *question*.

Here are some options:
- Option 1
- Option 2

Check our [documentation](https://example.com) for more info.

Styling Options

The widget supports styling through CSS variables:

:root {
  /* Colors */
  --genx-chat-primary-color: #3b82f6;
  --genx-chat-primary-hover-color: #2563eb;
  --genx-chat-text-color: #374151;
  --genx-chat-background-color: #ffffff;
  --genx-chat-incoming-msg-bg: #f3f4f6;
  --genx-chat-outgoing-msg-bg: #dbeafe;
  --genx-chat-border-color: #e5e7eb;

  /* Typography */
  --genx-chat-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --genx-chat-font-size: 14px;
  --genx-chat-font-size-small: 12px;
  --genx-chat-font-size-large: 16px;

  /* Layout */
  --genx-chat-spacing: 16px;
  --genx-chat-spacing-small: 8px;
  --genx-chat-spacing-large: 24px;
  --genx-chat-border-radius: 8px;
  --genx-chat-border-radius-small: 4px;
}

You can also access and modify styles programmatically:

import { defaultStyles, componentStyles } from "genx-chat-widget";

// Override default styles
const customStyles = {
  ...defaultStyles,
  primaryColor: "#ff0000", // Change primary color to red
};

// Use in your custom components
const CustomHeader = ({ businessName }) => (
  <header style={{ backgroundColor: customStyles.primaryColor }}>
    {businessName}
  </header>
);

UI Customization

GenX Chat Widget supports full UI customization similar to shadcn/ui, allowing you to create your own UI components while retaining the core functionality.

Custom JoinChat UI

import { createChatConfig, createJoinChat } from "genx-chat-widget";

// Create your custom JoinChat component
const CustomJoinChat = createJoinChat({
  // Override the default UI components
  components: {
    Container: ({ children }) => (
      <div className="my-custom-container">{children}</div>
    ),
    Form: ({ onSubmit, children }) => (
      <form onSubmit={onSubmit} className="my-custom-form">
        {children}
      </form>
    ),
    Input: ({ value, onChange, placeholder, type }) => (
      <input
        type={type}
        value={value}
        onChange={onChange}
        placeholder={placeholder}
        className="my-custom-input"
      />
    ),
    Button: ({ onClick, disabled, children }) => (
      <button
        onClick={onClick}
        disabled={disabled}
        className="my-custom-button"
      >
        {children}
      </button>
    ),
    PreviousChatsList: ({ chats, onChatSelect }) => (
      <div className="my-custom-chats-list">
        <h3 className="text-lg font-medium">Previous Conversations</h3>
        {chats.map((chat) => (
          <div
            key={chat.id}
            onClick={() => onChatSelect(chat.id)}
            className="my-custom-chat-item"
          >
            <span>{chat.name}</span>
            <span>{new Date(chat.updatedAt).toLocaleString()}</span>
          </div>
        ))}
      </div>
    ),
  },
});

// Usage remains the same
function YourCustomizedJoinChat() {
  return (
    <CustomJoinChat
      config={chatConfig}
      onRoomJoined={handleRoomJoined}
      onSessionCreated={handleSessionCreated}
    />
  );
}

Custom ChatRoom UI

import { createChatConfig, createChatRoom, Markdown } from "genx-chat-widget";

// Create your custom ChatRoom component
const CustomChatRoom = createChatRoom({
  components: {
    Container: ({ children }) => (
      <div className="my-custom-chat-container">{children}</div>
    ),
    Header: ({ businessName, onBack }) => (
      <header className="my-custom-header">
        <button onClick={onBack} className="back-button">
          Back
        </button>
        <h2>{businessName}</h2>
      </header>
    ),
    MessageList: ({ children, onScroll }) => (
      <div className="my-custom-message-list" onScroll={onScroll}>
        {children}
      </div>
    ),
    Message: ({ message, timestamp, sender, isOutgoing }) => (
      <div
        className={`my-custom-message ${isOutgoing ? "outgoing" : "incoming"}`}
      >
        {!isOutgoing && <div className="sender">{sender}</div>}
        <Markdown content={message} className="content" />
        <div className="timestamp">{timestamp}</div>
      </div>
    ),
    InputArea: ({ value, onChange, onSubmit, isSending }) => (
      <form onSubmit={onSubmit} className="my-custom-input-area">
        <input
          value={value}
          onChange={onChange}
          placeholder="Type a message..."
          className="message-input"
          disabled={isSending}
        />
        <button type="submit" disabled={isSending || !value.trim()}>
          {isSending ? "Sending..." : "Send"}
        </button>
      </form>
    ),
    TypingIndicator: ({ users, isAITyping }) => (
      <div className="my-custom-typing-indicator">
        {isAITyping && <span>AI is typing...</span>}
        {users.length > 0 && <span>{users.join(", ")} is typing...</span>}
      </div>
    ),
    StatusIndicator: ({ isAIEnabled }) => (
      <div className="my-custom-status">
        {isAIEnabled ? "AI assistant is enabled" : "AI assistant is disabled"}
      </div>
    ),
  },
});

// Usage
function YourCustomizedChatRoom() {
  return (
    <CustomChatRoom config={chatConfig} roomId={roomId} onBack={handleBack} />
  );
}

Configuration Options

The createChatConfig function accepts the following parameters:

| Parameter | Type | Description | Required | | --------------------- | ------ | -------------------------------- | -------- | | socketUrl | string | URL for Socket.io connection | Yes | | chatbotId | string | ID for the chatbot if applicable | No | | business.businessId | string | Your business identifier | Yes | | business.name | string | Your business name | Yes | | business.primaryColor | string | Primary theme color | No | | business.hoverColor | string | Hover theme color | No |

Component Props

JoinChat Props

| Prop | Type | Description | Required | | ---------------- | ------------------------------- | ------------------------------------------- | -------- | | config | ChatLibConfig | Configuration created with createChatConfig | Yes | | onRoomJoined | (roomId: string) => void | Callback when a room is joined | No | | onSessionCreated | (session: GuestSession) => void | Callback when guest session is created | No | | customStorageKey | string | Custom key for local storage | No | | apiBasePath | string | Custom API base path | No |

ChatRoom Props

| Prop | Type | Description | Required | | ---------------- | ------------- | ------------------------------------------- | -------- | | config | ChatLibConfig | Configuration created with createChatConfig | Yes | | roomId | string | ID of the chat room | Yes | | onBack | () => void | Callback for back navigation | No | | customStorageKey | string | Custom key for local storage | No | | apiBasePath | string | Custom API base path | No |

TypeScript Support

This package includes TypeScript definitions for all components and configuration options.

License

MIT