@ofi-summer-ai/mark-chatbot

A granular React chatbot UI component library. Every part of a chatbot — the bubble, the avatar, the input, the header — is its own independently importable component. Build only what you need, style it your way.

Features

• 24 individual components — use any single one or compose them all
• SSE streaming hook ready for mark-backend
• Markdown rendering in assistant messages
• Copy / thumbs-up / thumbs-down message actions
• Auto-scroll to bottom as messages arrive
• Floating "scroll to bottom" button
• Typing indicator with animated dots
• Online status indicator
• localStorage chat history persistence hook
• Full TypeScript types
• Tailwind CSS 4 styling with dark-mode support
• Zero framework lock-in — works with any React 18+ project

Installation

npm install @ofi-summer-ai/mark-chatbot
# or
pnpm add @ofi-summer-ai/mark-chatbot

Import the stylesheet once in your app entry point:

import '@ofi-summer-ai/mark-chatbot/style.css';

Quick Start

Option 1 — Drop-in chatbot (zero config)

import { ChatBot } from '@ofi-summer-ai/mark-chatbot';
import '@ofi-summer-ai/mark-chatbot/style.css';

export default function App() {
  return (
    <ChatBot
      config={{
        apiBaseUrl: 'https://api.example.com',
        authToken: 'Bearer your-token',
        campaignId: 'your-campaign-uuid',
        botName: 'Mark AI',
        botAvatar: '/bot-avatar.png',
        placeholder: 'Ask me about your campaign...',
      }}
      initialMessage="Hi! I'm Mark. How can I help with your marketing today?"
      height="600px"
    />
  );
}

Option 2 — Compose with ChatWindow

import { ChatWindow } from '@ofi-summer-ai/mark-chatbot/components';
import { useChatStream } from '@ofi-summer-ai/mark-chatbot/hooks';

const { messages, isLoading, sendMessage } = useChatStream({
  config: { apiBaseUrl: '...', campaignId: '...' },
});

<ChatWindow
  messages={messages}
  isLoading={isLoading}
  onSendMessage={sendMessage}
  headerProps={{ title: 'Mark AI', status: 'online' }}
  botAvatar="/bot.png"
  height="500px"
/>

Option 3 — Build your own from atoms

import {
  ChatBubble,
  ChatAvatar,
  ChatTimestamp,
  ChatMessageContent,
} from '@ofi-summer-ai/mark-chatbot/components';

<div className="flex gap-2">
  <ChatAvatar role="assistant" src="/bot.png" />
  <div>
    <ChatBubble variant="assistant">
      <ChatMessageContent content="**Hello!** How can I help?" />
    </ChatBubble>
    <ChatTimestamp timestamp={new Date().toISOString()} />
  </div>
</div>

Import Paths

| Import | What you get | |--------|-------------| | @ofi-summer-ai/mark-chatbot | Everything: types + hooks + components | | @ofi-summer-ai/mark-chatbot/components | All UI components only | | @ofi-summer-ai/mark-chatbot/hooks | All hooks only | | @ofi-summer-ai/mark-chatbot/style.css | Tailwind CSS stylesheet |

Component Overview

Layout

| Component | Description | |-----------|-------------| | ChatWindow | Full window: header + body + footer | | ChatHeader | Top bar with avatar, title, status, close button | | ChatBody | Scrollable messages area with auto-scroll | | ChatFooter | Input area wrapper |

Message

| Component | Description | |-----------|-------------| | ChatMessage | Complete message row (avatar + bubble + timestamp + actions) | | ChatBubble | The bubble shape — user / assistant / error variants | | ChatAvatar | Circular avatar with image or icon fallback | | ChatTimestamp | Formatted time display | | ChatMessageContent | Markdown-rendered message text | | ChatMessageActions | Copy / thumbs-up / thumbs-down row | | ChatMessageError | Error bubble with red styling | | ChatMessageSystem | Centered system / status pill |

Input

| Component | Description | |-----------|-------------| | ChatInput | Full input row: textarea + send button + hint | | ChatTextarea | Auto-growing textarea | | ChatSendButton | Send icon button with loading spinner | | ChatInputHint | Keyboard shortcut hint line |

Status / Feedback

| Component | Description | |-----------|-------------| | ChatTypingIndicator | Animated three-dot "Thinking..." indicator | | ChatOnlineIndicator | Online / offline / away status dot | | ChatScrollButton | Floating scroll-to-bottom button | | ChatEmptyState | Empty conversation placeholder | | ChatTokenCount | Token usage display |

All-in-One

| Component | Description | |-----------|-------------| | ChatBot | Drop-in complete chatbot with SSE streaming |

Hook Overview

| Hook | Description | |------|-------------| | useChat | Message array state management | | useChatStream | SSE streaming for mark-backend | | useAutoScroll | Auto-scroll ref to bottom of a list | | useChatHistory | localStorage chat history persistence |

Peer Dependencies

{
  "react": ">=18.0.0",
  "react-dom": ">=18.0.0"
}

License

MIT © OFI Summer AI