> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mobile-starter.amisi.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Chat

> Build in-app AI chat experiences with reusable UI and conversation history

# @amisi/chat

`@amisi/chat` provides reusable chat UI components, typed chat models, local conversation history, and mock handlers for AI assistant experiences.

## What it includes

* **UI components**
  * `ChatContainer`
  * `ChatHeader`
  * `ChatMessageBubble`
  * `ChatComposer`
  * `ChatSuggestionChips`
  * `ChatTypingIndicator`

* **Typed models**
  * Zod-backed message and conversation schemas.
  * Shared `ChatConfig`, message role, and handler types.

* **Conversation persistence**
  * Local conversation storage utilities using MMKV.
  * History retrieval and management via `useChatHistory`.

* **Mock handlers**
  * Streaming and non-streaming mock handlers for local development.

## Render a chat container

```tsx theme={null}
import { ChatContainer } from '@amisi/chat';

export function AssistantScreen() {
  return (
    <ChatContainer
      suggestions={['Explain this app', 'Show me the features']}
      placeholder="Ask me anything..."
    />
  );
}
```

## Use chat history

```tsx theme={null}
import { useChatHistory } from '@amisi/chat';

export function HistoryScreen() {
  const { conversations, count, clearAll } = useChatHistory();

  const handleClear = () => {
    clearAll();
  };

  return null;
}
```

## AI integration strategy

You can start with the built-in mock handlers and then swap in real providers by passing your own handlers to `ChatContainer`:

* `onSendMessage` for request-response handling
* `onStreamMessage` for token streaming

This keeps UI behavior stable while provider logic evolves.