lua-ai-chat

A comprehensive set of React components for building chat interfaces in the Lua ai ecosystem.

Installation

npm install lua-ai-chat
# or
yarn add lua-ai-chat
# or
pnpm add lua-ai-chat

Usage

import { ChatMessage, ChatInput, ChatContext } from 'lua-ai-chat';

function MyChatApp() {
  return (
    <ChatContext.Provider value={chatContextValue}>
      <div className="chat-container">
        <ChatMessage message={message} />
        <ChatInput onSend={handleSend} />
      </div>
    </ChatContext.Provider>
  );
}

Components

Messages

• ChatMessage - Main message component
• ActionMessage - Action-based messages
• DocumentsMessage - Document display
• ImageMessage - Image display
• VideoMessage - Video display
• LocationMessage - Location display
• LoadingMessage - Loading state

Input & Toolbar

• ChatInput - Main input component
• Toolbar - Message composition toolbar
• FilePreview - File preview components

Dialogs

• ImageDialog - Image viewing dialog
• VideoDialog - Video viewing dialog
• LocationDialog - Location viewing dialog
• CameraDialog - Camera interface

Audio

• AudioRecorder - Audio recording component

Development

Running the Demo

To see all components in action, run the demo application:

pnpm install
pnpm dev:demo

Then open http://localhost:3001 in your browser.

Building the Library

pnpm build

Library Development (Watch Mode)

pnpm dev

This package is built with:

• React 18+
• TypeScript
• Tailwind CSS
• Radix UI primitives

License

MIT