@aichatkit/ui/README.md

Composable chat UI components for AI powered apps

# @aichatkit/ui

React components for building chat interfaces with Hypermode ChatKit.

## Installation

```bash
npm install @aichatkit/ui
```

## Quick Start

```tsx
import "@aichatkit/ui/dist/base.css"
import { ChatInterface, Avatar } from "@aichatkit/ui"
import { ApolloAdapter } from "@aichatkit/apollo-adapter"
import { LocalStorageAdapter } from "@aichatkit/localstorage-adapter"
import { SendIcon, PlusIcon, XIcon } from "lucide-react"

// Initialize adapters
const networkAdapter = new ApolloAdapter({
  apiUrl: "https://your-api.com/graphql",
})

const storageAdapter = new LocalStorageAdapter()
await storageAdapter.initialize()

// Connect storage with network for syncing
storageAdapter.setNetworkCallbacks({
  getConversationHistory: (agentId) => networkAdapter.getConversationHistory(agentId),
  clearConversationHistory: (agentId) => networkAdapter.clearConversationHistory(agentId),
})

// Use the chat interface
function ChatApp() {
  return (
    <ChatInterface
      networkAdapter={networkAdapter}
      storageAdapter={storageAdapter}
      hypermodeStyle={true}
      sendButtonIcon={<SendIcon size={18} />}
      newConversationIcon={<PlusIcon size={18} />}
      deleteConversationIcon={<XIcon size={16} />}
      userAvatar={<Avatar initial="U" role="user" hypermodeStyle={true} />}
      assistantAvatar={<Avatar initial="A" hypermodeStyle={true} />}
    />
  )
}
```

## Components

### Main Components

#### ChatInterface

Complete chat interface with messages, input, and sidebar.

```tsx
interface ChatInterfaceProps {
  networkAdapter?: NetworkAdapter
  storageAdapter?: StorageAdapter
  showSidebar?: boolean
  className?: string
  chatAreaClassName?: string
  sidebarClassName?: string
  inputAreaClassName?: string
  headerClassName?: string
  headerContent?: ReactNode
  sidebarHeaderContent?: ReactNode
  userProfileContent?: ReactNode
  username?: string
  inputPlaceholder?: string
  sendButtonIcon?: ReactNode
  newConversationIcon?: ReactNode
  deleteConversationIcon?: ReactNode
  hypermodeStyle?: boolean
  userAvatar?: ReactNode
  assistantAvatar?: ReactNode
}
```

#### ChatBubble

Individual message bubble component.

```tsx
<ChatBubble
  content="Hello world!"
  role="user"
  timestamp={new Date()}
  hypermodeStyle={true}
  avatar={<Avatar initial="U" role="user" />}
/>
```

#### ChatSidebar

Sidebar for displaying and managing conversations.

```tsx
<ChatSidebar
  conversations={conversations}
  currentConversationId={currentId}
  onCreateConversation={handleCreate}
  onDeleteConversation={handleDelete}
  onSelectConversation={handleSelect}
  username="User"
  hypermodeStyle={true}
/>
```

#### LoadingIndicator

Loading animation for messages.

```tsx
<LoadingIndicator dots={3} />
<LoadingChatBubble hypermodeStyle={true} />
```

### UI Components

#### Avatar

User or assistant avatar component.

```tsx
<Avatar initial="U" role="user" size="md" hypermodeStyle={true} />
```

Props:

- `initial`: String - The initial to display
- `role`: 'user' | 'assistant' - The role of the user
- `size`: 'sm' | 'md' | 'lg' - Size of the avatar
- `hypermodeStyle`: boolean - Whether to use Hypermode styling

#### Button

Reusable button component with variants.

```tsx
<Button variant="primary" size="default" onClick={handleClick}>
  Click me
</Button>
```

Variants:

- `primary` - Primary action button
- `secondary` - Secondary action button
- `ghost` - Minimal styling
- `destructive` - For dangerous actions
- `warning` - Warning actions

#### Input

Text input field component.

```tsx
<Input type="text" placeholder="Type a message..." value={value} onChange={handleChange} />
```

## Styling

The components support two styling modes:

### 1. Default Style

Clean, neutral design with light/dark mode support using CSS custom properties.

### 2. Hypermode Style

Dark mode with purple accents designed for AI applications.

Enable Hypermode styling by setting `hypermodeStyle={true}` on components:

```tsx
<ChatInterface hypermodeStyle={true} />
<ChatBubble hypermodeStyle={true} />
<Avatar hypermodeStyle={true} />
```

### CSS Import

Include the base styles in your application:

```tsx
// Import styles directly
import "@aichatkit/ui/dist/base.css"

// Or use the path constant
import { CHATKIT_CSS_PATH } from "@aichatkit/ui"
```

### Tailwind CSS Integration

If using Tailwind CSS, add the component paths to your content configuration:

```js
// tailwind.config.js
module.exports = {
  content: [
    // ... your content
    "node_modules/@aichatkit/ui/dist/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        hypermode: {
          bg: "#121212",
          card: "#1c1c1c",
          border: "#2a2a2a",
          hover: "#282828",
          input: "#222222",
          accent: "#9333ea",
          "accent-light": "#a855f7",
        },
      },
    },
  },
  plugins: [],
}
```

## Advanced Usage

### Custom Avatars

```tsx
import { User, Bot } from "lucide-react"
;<ChatInterface
  userAvatar={
    <div className="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center">
      <User size={16} className="text-white" />
    </div>
  }
  assistantAvatar={
    <div className="w-8 h-8 bg-purple-500 rounded-full flex items-center justify-center">
      <Bot size={16} className="text-white" />
    </div>
  }
/>
```

### Custom Header

```tsx
<ChatInterface
  headerContent={
    <div className="p-4 border-b flex items-center justify-between">
      <h1>My AI Assistant</h1>
      <button>Settings</button>
    </div>
  }
/>
```

### Individual Components

You can use components individually for custom layouts:

```tsx
import { ChatBubble, Input, Button, Avatar } from "@aichatkit/ui"

function CustomChatInterface() {
  return (
    <div className="flex flex-col h-full">
      <div className="flex-1 overflow-y-auto p-4">
        {messages.map((message) => (
          <ChatBubble
            key={message.id}
            content={message.content}
            role={message.role}
            hypermodeStyle={true}
          />
        ))}
      </div>

      <form className="p-4 border-t">
        <div className="flex gap-2">
          <Input
            placeholder="Type a message..."
            value={input}
            onChange={(e) => setInput(e.target.value)}
          />
          <Button type="submit">Send</Button>
        </div>
      </form>
    </div>
  )
}
```

## TypeScript

The package includes comprehensive TypeScript definitions:

```tsx
import type { Message, Conversation, ChatInterfaceProps } from "@aichatkit/ui"

const message: Message = {
  id: "1",
  content: "Hello",
  role: "user",
  timestamp: new Date().toISOString(),
}

const conversation: Conversation = {
  id: "conv-1",
  title: "Chat with AI",
  messages: [message],
}
```

## License

[MIT](../../LICENSE) © Hypermode