@mounaji_npm/chat

Chat widget and conversation UI components for Mounaji-based projects. Provides a floating chat widget, an inline chat window, message bubbles, and a smart input — all styled via @mounaji_npm/tokens.

Install

npm install @mounaji_npm/tokens @mounaji_npm/chat

Quick Start

Floating widget (most common)

Drop ChatWidget anywhere in your app. It renders as a floating button that opens a chat panel.

import { TokensProvider } from '@mounaji_npm/tokens';
import { ChatWidget } from '@mounaji_npm/chat';

export default function App() {
  return (
    <TokensProvider>
      <YourApp />
      <ChatWidget
        apiUrl="https://api.yourapp.com"
        assistantId="asst_xxx"
        position="bottom-right"
      />
    </TokensProvider>
  );
}

Inline chat (embedded in a page)

import { TokensProvider } from '@mounaji_npm/tokens';
import { ChatWindow } from '@mounaji_npm/chat';

export default function ChatPage() {
  return (
    <TokensProvider>
      <ChatWindow
        apiUrl="https://api.yourapp.com"
        assistantId="asst_xxx"
        style={{ height: '600px' }}
      />
    </TokensProvider>
  );
}

Components

ChatWidget

Floating chat widget with a trigger button and an animated panel.

import { ChatWidget } from '@mounaji_npm/chat';

<ChatWidget
  apiUrl="https://api.yourapp.com"
  assistantId="asst_xxx"
  position="bottom-right"
  botName="Aria"
  botEmoji="🤖"
  welcomeMessage="Hi! How can I help you today?"
  primaryColor="#7C3AED"
  tokens={{ colorPrimary: '#7C3AED' }}
/>

| Prop | Type | Default | Description | |---|---|---|---| | apiUrl | string | — | Backend URL | | assistantId | string | — | Assistant ID | | position | string | 'bottom-right' | bottom-right bottom-left top-right top-left | | botName | string | 'Assistant' | Name shown in chat header | | botEmoji | string | '🤖' | Emoji in trigger button and header | | botAvatar | string | — | Avatar image URL | | welcomeMessage | string | — | First message shown to new users | | primaryColor | string | — | Quick color override (sets --mn-color-primary) | | tokens | object | — | Full token overrides merged with DEFAULT_TOKENS | | defaultOpen | boolean | false | Start with panel open |

ChatWindow

Inline chat panel — no floating trigger. Use this when you want the chat embedded in a page layout.

import { ChatWindow } from '@mounaji_npm/chat';

<ChatWindow
  apiUrl="https://api.yourapp.com"
  assistantId="asst_xxx"
  messages={messages}
  onSend={handleSend}
  loading={isLoading}
  emptyState={<p>Start a conversation</p>}
  style={{ height: '500px', border: '1px solid #eee' }}
/>

| Prop | Type | Default | Description | |---|---|---|---| | apiUrl | string | — | Backend URL | | assistantId | string | — | Assistant ID | | messages | array | [] | Controlled message list (see shape below) | | onSend | function | — | (text: string) => void | | loading | boolean | false | Shows TypingIndicator | | emptyState | ReactNode | default | Shown when messages is empty | | style | object | — | Container style (set height here) |

Message shape:

{
  id:        string,
  role:      'user' | 'assistant',
  content:   string,              // markdown supported
  timestamp: number,              // Unix ms
}

MessageBubble

Renders a single message. Used internally by ChatWindow but exportable for custom layouts.

import { MessageBubble } from '@mounaji_npm/chat';

<MessageBubble
  message={{ id: '1', role: 'user', content: 'Hello!', timestamp: Date.now() }}
/>

<MessageBubble
  message={{ id: '2', role: 'assistant', content: 'Hi there! How can I help?', timestamp: Date.now() }}
  botName="Aria"
  botEmoji="🤖"
/>

TypingIndicator

Animated three-dot bounce. Shown while the assistant is generating a response.

import { TypingIndicator } from '@mounaji_npm/chat';

{isLoading && <TypingIndicator botName="Aria" />}

ChatInput

Auto-resize textarea with keyboard shortcuts. Enter sends, Shift+Enter adds a newline.

import { ChatInput } from '@mounaji_npm/chat';

<ChatInput
  onSend={(text) => handleSend(text)}
  placeholder="Type a message..."
  disabled={isLoading}
/>

| Prop | Type | Default | Description | |---|---|---|---| | onSend | function | — | Called with the message text when submitted | | placeholder | string | 'Type a message...' | Input placeholder | | disabled | boolean | false | Disables input and send button |

Controlled (bring your own state)

For full control over messages and API calls:

import { useState } from 'react';
import { ChatWindow } from '@mounaji_npm/chat';

export default function ChatPage() {
  const [messages, setMessages] = useState([]);
  const [loading, setLoading]   = useState(false);

  async function handleSend(text) {
    const userMsg = { id: Date.now(), role: 'user', content: text, timestamp: Date.now() };
    setMessages(prev => [...prev, userMsg]);
    setLoading(true);

    const res  = await fetch('/api/chat', {
      method: 'POST',
      body: JSON.stringify({ message: text, assistantId: 'asst_xxx' }),
      headers: { 'Content-Type': 'application/json' },
    });
    const data = await res.json();

    setMessages(prev => [...prev, {
      id: Date.now() + 1,
      role: 'assistant',
      content: data.reply,
      timestamp: Date.now(),
    }]);
    setLoading(false);
  }

  return (
    <ChatWindow
      messages={messages}
      onSend={handleSend}
      loading={loading}
      style={{ height: '600px' }}
    />
  );
}