@amisi-mobile-starter/chat

@amisi-mobile-starter/chat exports six UI components, Zod schemas and inferred types, useChatHistory, conversation-storage functions, and two mock handlers. ChatContainer calls useAnalytics, so render it below AnalyticsProvider.

Render a chat

import { ChatContainer, mockStreamHandler } from '@amisi-mobile-starter/chat';

export const AssistantScreen = () => {
  return (
    <ChatContainer
      suggestions={['Explain this app', 'Show me the features']}
      initialAssistantMessage="How can I help?"
      onStreamMessage={mockStreamHandler}
      placeholder="Ask me anything..."
      onClose={() => undefined}
    />
  );
};

ChatContainerProps extends this configuration:

interface ChatConfig {
  apiEndpoint?: string;
  suggestions?: string[];
  initialAssistantMessage?: string;
  onSendMessage?: (message: string) => Promise<string>;
  onStreamMessage?: (message: string) => AsyncIterable<string>;
  placeholder?: string;
  systemPrompt?: string;
  onClose?: () => void;
}

interface ChatContainerProps extends ChatConfig {
  visible?: boolean;
}

The current component consumes suggestions, initialAssistantMessage, onSendMessage, onStreamMessage, placeholder, and onClose. It does not consume apiEndpoint, systemPrompt, or visible. When onStreamMessage exists, the component streams through that handler. Otherwise it calls onSendMessage; if neither handler exists, the non-streaming response is an empty string. mockStreamHandler is used only as the internal fallback in the streaming path.

Components

The package exports ChatContainer, ChatHeader, ChatMessageBubble, ChatComposer, ChatSuggestionChips, and ChatTypingIndicator. Their props are exported from @amisi-mobile-starter/chat.

Conversation history

ChatContainer saves a conversation when its close handler runs and at least one message exists. Storage uses @amisi-mobile-starter/core key-value storage, keeps at most 20 conversations, and derives the title from the first user message.

import { useChatHistory } from '@amisi-mobile-starter/chat';

export const HistoryScreen = () => {
  const { conversations, count, refresh, getById, deleteById, clearAll } =
    useChatHistory();

  return null;
};

The direct synchronous exports are saveConversation(messages), getAllConversations(), getConversationById(id), deleteConversation(id), clearAllConversations(), and getConversationCount(). Messages have id, role, content, and timestamp. Roles are user, assistant, or system. Conversations have id, title, messages, createdAt, and updatedAt.

readStreamAsText and readSSEStream exist in src/utils/streamReader.ts, but the package barrel does not export them.

Configuration

AI

Generators

Packages

Chat

@amisi-mobile-starter/chat

Render a chat

Components

Conversation history

​@amisi-mobile-starter/chat

​Render a chat

​Components

​Conversation history

@amisi-mobile-starter/chat

Render a chat

Components

Conversation history