lua-ai-chat 0.0.1

package/README.md

@@ -0,0 +1,67 @@
+# lua-ai-chat
+
+A comprehensive set of React components for building chat interfaces in the Lua ai ecosystem.
+
+## Installation
+
+```bash
+npm install lua-ai-chat
+# or
+yarn add lua-ai-chat
+# or
+pnpm add lua-ai-chat
+```
+
+## Usage
+
+```tsx
+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
+
+This package is built with:
+- React 18+
+- TypeScript
+- Tailwind CSS
+- Radix UI primitives
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,269 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { RefObject, ReactNode } from 'react';
+
+type AudioRecorderProps = {
+    onAudioRecorded: (audioBlob: Blob, messageText?: string) => void;
+    onClose: () => void;
+    inputMessage?: string;
+};
+declare function AudioRecorder({ onAudioRecorded, onClose, inputMessage, }: AudioRecorderProps): react_jsx_runtime.JSX.Element;
+
+type VideoDialogProps = {
+    videoRef: RefObject<HTMLVideoElement>;
+    isRecording: boolean;
+    recordingTime: number;
+    loading: boolean;
+    onStartRecording: () => void;
+    onStopRecording: () => void;
+    onClose: () => void;
+    open: boolean;
+};
+declare function VideoDialog({ videoRef, isRecording, recordingTime, loading, onStartRecording, onStopRecording, onClose, open, }: VideoDialogProps): react_jsx_runtime.JSX.Element;
+
+type ImageDialogProps = {
+    url: string;
+    alt?: string;
+    open: boolean;
+    onClose: () => void;
+};
+declare function ImageDialog({ url, alt, open, onClose }: ImageDialogProps): react_jsx_runtime.JSX.Element;
+
+type CarouselImage = {
+    src: string;
+    alt: string;
+};
+type CarouselImageDialogProps = {
+    images: CarouselImage[];
+    initialIndex?: number;
+    open: boolean;
+    onClose: () => void;
+};
+declare function CarouselImageDialog({ images, initialIndex, open, onClose, }: CarouselImageDialogProps): react_jsx_runtime.JSX.Element;
+
+type CameraDialogProps = {
+    videoRef: RefObject<HTMLVideoElement>;
+    canvasRef: RefObject<HTMLCanvasElement>;
+    onCapture: () => void;
+    onClose: () => void;
+    open: boolean;
+};
+declare function CameraDialog({ videoRef, canvasRef, onCapture, onClose, open, }: CameraDialogProps): react_jsx_runtime.JSX.Element;
+
+type LocationDialogProps = {
+    locationError: string;
+    currentLocation: {
+        latitude: number;
+        longitude: number;
+        address?: string;
+    } | null;
+    loading: boolean;
+    onShare: () => void;
+    onClose: () => void;
+};
+declare function LocationDialog({ locationError, currentLocation, loading, onShare, onClose, }: LocationDialogProps): react_jsx_runtime.JSX.Element;
+
+type ChatMessageProps = {
+    id: string;
+    role: "user" | "assistant";
+    content: string;
+    type?: "text" | "image" | "video" | "audio" | "location" | "actions" | "links" | "tool" | "payment" | "file";
+    image?: string;
+    video?: string;
+    audio?: string;
+    mimeType?: string;
+    text?: string;
+    location?: {
+        latitude: number;
+        longitude: number;
+        address?: string;
+    };
+    url?: string;
+    waitingMessage?: string;
+    isUploading?: boolean;
+    uploadProgress?: number;
+    createdAt: string;
+    onSelect?: (text: string) => void;
+    luaApiUrl?: string;
+};
+declare const ChatMessage: react.NamedExoticComponent<{
+    message: ChatMessageProps;
+    onSelect?: (text: string) => void;
+    luaApiUrl?: string;
+    authToken?: string;
+    disablePreviewOnLinks?: boolean;
+    onNavigate?: (pathname: string, options: {
+        query: Record<string, string>;
+    }) => void;
+}>;
+
+type CodeBlockProps = {
+    children: ReactNode;
+    className?: string;
+    language?: string;
+};
+declare function CodeBlock({ children, language }: CodeBlockProps): react_jsx_runtime.JSX.Element;
+
+declare function LoadingMessage$1(): react_jsx_runtime.JSX.Element | null;
+
+type ActionButton = {
+    text: string;
+    onClick: string;
+};
+
+type ActionMessageProps = {
+    buttons: ActionButton[];
+    onClick: (text: string) => void;
+};
+declare function ActionMessage({ buttons, onClick }: ActionMessageProps): react_jsx_runtime.JSX.Element;
+
+type ChatActions = {
+    onSelect: (text: string) => void;
+};
+declare function ChatActions({ onSelect }: ChatActions): react_jsx_runtime.JSX.Element | null;
+
+type AudioPreviewProps = {
+    message: {
+        audio?: string;
+        content: string;
+        isUploading?: boolean;
+        url?: string;
+    };
+};
+declare function AudioPreview({ message }: AudioPreviewProps): react_jsx_runtime.JSX.Element;
+
+type PaymentPreviewProps = {
+    url: string;
+};
+declare function PaymentPreview({ url }: PaymentPreviewProps): react_jsx_runtime.JSX.Element;
+
+type ChatInputProps = {
+    loading: boolean;
+    disabled: boolean;
+    onSend: () => void;
+    onFilePaste?: (files: File[]) => void;
+};
+declare const ChatInput: react.NamedExoticComponent<ChatInputProps>;
+
+type FileMetadata = {
+    file: File;
+    url: string;
+    type: "image" | "video" | "audio" | "document" | "archive" | "other";
+    mimeType: string;
+    propertyName: "image" | "data";
+};
+type FilePreviewProps = {
+    files: File[];
+    onRemove: (index: number) => void;
+    cdnUrl: string;
+    fileMetadata?: FileMetadata[];
+    onFileUploadComplete?: (file: File, url: string) => void;
+};
+declare function FilePreview({ files, onRemove, cdnUrl, fileMetadata, onFileUploadComplete, }: FilePreviewProps): react_jsx_runtime.JSX.Element | null;
+
+type FilePreviewCardProps = {
+    file: File;
+    onRemove: () => void;
+    cdnUrl: string;
+    initialUrl?: string;
+    onUploadComplete?: (file: File, url: string) => void;
+};
+declare function FilePreviewCard({ file, onRemove, cdnUrl, initialUrl, onUploadComplete, }: FilePreviewCardProps): react_jsx_runtime.JSX.Element;
+
+type ToolbarProps = {
+    loading: boolean;
+    onFileClick: () => void;
+    onCameraClick: () => void;
+    onVideoClick: () => void;
+    onAudioClick: () => void;
+    onLocationClick: () => void;
+    onSendClick: () => void;
+    uploadProgress: number;
+};
+declare function Toolbar({ loading, onFileClick, onCameraClick, onVideoClick, onAudioClick, onLocationClick, onSendClick, }: ToolbarProps): react_jsx_runtime.JSX.Element;
+
+declare const parseActions: (content: string) => ActionButton[];
+
+declare const markdownStyles: {
+    p: string;
+    h1: string;
+    h2: string;
+    h3: string;
+    h4: string;
+    ul: string;
+    ol: string;
+    li: string;
+    a: string;
+    blockquote: string;
+    pre: string;
+    code: string;
+    img: string;
+    table: string;
+    th: string;
+    td: string;
+};
+
+declare function uploadFile(file: File, cdnUrl: string, onProgress?: (progress: number) => void): Promise<{
+    fileId: string;
+}>;
+
+type Message = {
+    id: string;
+    role: "user" | "assistant";
+    content: string;
+    type?: "text" | "image" | "video" | "audio" | "location" | "tool" | "file";
+    url?: string;
+    image?: string;
+    video?: string;
+    audio?: string;
+    location?: {
+        latitude: number;
+        longitude: number;
+        address?: string;
+    };
+    waitingMessage?: string;
+    isUploading?: boolean;
+    createdAt: string;
+    data?: string;
+    mimeType?: string;
+    uploadProgress?: number;
+};
+type LoadingMessage = string | null;
+type ChatContextType = {
+    messages: Message[];
+    setMessages: React.Dispatch<React.SetStateAction<Message[]>>;
+    inputMessage: string;
+    setInputMessage: React.Dispatch<React.SetStateAction<string>>;
+    loadingMessage: LoadingMessage | null;
+    setLoadingMessage: React.Dispatch<React.SetStateAction<LoadingMessage | null>>;
+    hasUnreadMessages: boolean;
+    setHasUnreadMessages: React.Dispatch<React.SetStateAction<boolean>>;
+    getFileUrl: (file: File) => string;
+    removeFileUrl: (file: File) => void;
+};
+declare function ChatProvider({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function useMessages(): {
+    messages: Message[];
+    setMessages: React.Dispatch<React.SetStateAction<Message[]>>;
+};
+declare function useInput(): {
+    inputMessage: string;
+    setInputMessage: React.Dispatch<React.SetStateAction<string>>;
+};
+declare function useLoadingMessage(): {
+    loadingMessage: LoadingMessage | null;
+    setLoadingMessage: React.Dispatch<React.SetStateAction<LoadingMessage | null>>;
+};
+declare function useFileUrls(): {
+    getFileUrl: (file: File) => string;
+    removeFileUrl: (file: File) => void;
+};
+declare function useUnreadMessages(): {
+    hasUnreadMessages: boolean;
+    setHasUnreadMessages: React.Dispatch<React.SetStateAction<boolean>>;
+};
+declare function useChat(): ChatContextType;
+
+export { type ActionButton, ActionMessage, AudioPreview, AudioRecorder, CameraDialog, CarouselImageDialog, ChatActions, ChatInput, ChatMessage, type ChatMessageProps, ChatProvider, CodeBlock, type FileMetadata, FilePreview, FilePreviewCard, ImageDialog, LoadingMessage$1 as LoadingMessage, LocationDialog, PaymentPreview, Toolbar, VideoDialog, markdownStyles, parseActions, uploadFile, useChat, useFileUrls, useInput, useLoadingMessage, useMessages, useUnreadMessages };

package/dist/index.d.ts

@@ -0,0 +1,269 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { RefObject, ReactNode } from 'react';
+
+type AudioRecorderProps = {
+    onAudioRecorded: (audioBlob: Blob, messageText?: string) => void;
+    onClose: () => void;
+    inputMessage?: string;
+};
+declare function AudioRecorder({ onAudioRecorded, onClose, inputMessage, }: AudioRecorderProps): react_jsx_runtime.JSX.Element;
+
+type VideoDialogProps = {
+    videoRef: RefObject<HTMLVideoElement>;
+    isRecording: boolean;
+    recordingTime: number;
+    loading: boolean;
+    onStartRecording: () => void;
+    onStopRecording: () => void;
+    onClose: () => void;
+    open: boolean;
+};
+declare function VideoDialog({ videoRef, isRecording, recordingTime, loading, onStartRecording, onStopRecording, onClose, open, }: VideoDialogProps): react_jsx_runtime.JSX.Element;
+
+type ImageDialogProps = {
+    url: string;
+    alt?: string;
+    open: boolean;
+    onClose: () => void;
+};
+declare function ImageDialog({ url, alt, open, onClose }: ImageDialogProps): react_jsx_runtime.JSX.Element;
+
+type CarouselImage = {
+    src: string;
+    alt: string;
+};
+type CarouselImageDialogProps = {
+    images: CarouselImage[];
+    initialIndex?: number;
+    open: boolean;
+    onClose: () => void;
+};
+declare function CarouselImageDialog({ images, initialIndex, open, onClose, }: CarouselImageDialogProps): react_jsx_runtime.JSX.Element;
+
+type CameraDialogProps = {
+    videoRef: RefObject<HTMLVideoElement>;
+    canvasRef: RefObject<HTMLCanvasElement>;
+    onCapture: () => void;
+    onClose: () => void;
+    open: boolean;
+};
+declare function CameraDialog({ videoRef, canvasRef, onCapture, onClose, open, }: CameraDialogProps): react_jsx_runtime.JSX.Element;
+
+type LocationDialogProps = {
+    locationError: string;
+    currentLocation: {
+        latitude: number;
+        longitude: number;
+        address?: string;
+    } | null;
+    loading: boolean;
+    onShare: () => void;
+    onClose: () => void;
+};
+declare function LocationDialog({ locationError, currentLocation, loading, onShare, onClose, }: LocationDialogProps): react_jsx_runtime.JSX.Element;
+
+type ChatMessageProps = {
+    id: string;
+    role: "user" | "assistant";
+    content: string;
+    type?: "text" | "image" | "video" | "audio" | "location" | "actions" | "links" | "tool" | "payment" | "file";
+    image?: string;
+    video?: string;
+    audio?: string;
+    mimeType?: string;
+    text?: string;
+    location?: {
+        latitude: number;
+        longitude: number;
+        address?: string;
+    };
+    url?: string;
+    waitingMessage?: string;
+    isUploading?: boolean;
+    uploadProgress?: number;
+    createdAt: string;
+    onSelect?: (text: string) => void;
+    luaApiUrl?: string;
+};
+declare const ChatMessage: react.NamedExoticComponent<{
+    message: ChatMessageProps;
+    onSelect?: (text: string) => void;
+    luaApiUrl?: string;
+    authToken?: string;
+    disablePreviewOnLinks?: boolean;
+    onNavigate?: (pathname: string, options: {
+        query: Record<string, string>;
+    }) => void;
+}>;
+
+type CodeBlockProps = {
+    children: ReactNode;
+    className?: string;
+    language?: string;
+};
+declare function CodeBlock({ children, language }: CodeBlockProps): react_jsx_runtime.JSX.Element;
+
+declare function LoadingMessage$1(): react_jsx_runtime.JSX.Element | null;
+
+type ActionButton = {
+    text: string;
+    onClick: string;
+};
+
+type ActionMessageProps = {
+    buttons: ActionButton[];
+    onClick: (text: string) => void;
+};
+declare function ActionMessage({ buttons, onClick }: ActionMessageProps): react_jsx_runtime.JSX.Element;
+
+type ChatActions = {
+    onSelect: (text: string) => void;
+};
+declare function ChatActions({ onSelect }: ChatActions): react_jsx_runtime.JSX.Element | null;
+
+type AudioPreviewProps = {
+    message: {
+        audio?: string;
+        content: string;
+        isUploading?: boolean;
+        url?: string;
+    };
+};
+declare function AudioPreview({ message }: AudioPreviewProps): react_jsx_runtime.JSX.Element;
+
+type PaymentPreviewProps = {
+    url: string;
+};
+declare function PaymentPreview({ url }: PaymentPreviewProps): react_jsx_runtime.JSX.Element;
+
+type ChatInputProps = {
+    loading: boolean;
+    disabled: boolean;
+    onSend: () => void;
+    onFilePaste?: (files: File[]) => void;
+};
+declare const ChatInput: react.NamedExoticComponent<ChatInputProps>;
+
+type FileMetadata = {
+    file: File;
+    url: string;
+    type: "image" | "video" | "audio" | "document" | "archive" | "other";
+    mimeType: string;
+    propertyName: "image" | "data";
+};
+type FilePreviewProps = {
+    files: File[];
+    onRemove: (index: number) => void;
+    cdnUrl: string;
+    fileMetadata?: FileMetadata[];
+    onFileUploadComplete?: (file: File, url: string) => void;
+};
+declare function FilePreview({ files, onRemove, cdnUrl, fileMetadata, onFileUploadComplete, }: FilePreviewProps): react_jsx_runtime.JSX.Element | null;
+
+type FilePreviewCardProps = {
+    file: File;
+    onRemove: () => void;
+    cdnUrl: string;
+    initialUrl?: string;
+    onUploadComplete?: (file: File, url: string) => void;
+};
+declare function FilePreviewCard({ file, onRemove, cdnUrl, initialUrl, onUploadComplete, }: FilePreviewCardProps): react_jsx_runtime.JSX.Element;
+
+type ToolbarProps = {
+    loading: boolean;
+    onFileClick: () => void;
+    onCameraClick: () => void;
+    onVideoClick: () => void;
+    onAudioClick: () => void;
+    onLocationClick: () => void;
+    onSendClick: () => void;
+    uploadProgress: number;
+};
+declare function Toolbar({ loading, onFileClick, onCameraClick, onVideoClick, onAudioClick, onLocationClick, onSendClick, }: ToolbarProps): react_jsx_runtime.JSX.Element;
+
+declare const parseActions: (content: string) => ActionButton[];
+
+declare const markdownStyles: {
+    p: string;
+    h1: string;
+    h2: string;
+    h3: string;
+    h4: string;
+    ul: string;
+    ol: string;
+    li: string;
+    a: string;
+    blockquote: string;
+    pre: string;
+    code: string;
+    img: string;
+    table: string;
+    th: string;
+    td: string;
+};
+
+declare function uploadFile(file: File, cdnUrl: string, onProgress?: (progress: number) => void): Promise<{
+    fileId: string;
+}>;
+
+type Message = {
+    id: string;
+    role: "user" | "assistant";
+    content: string;
+    type?: "text" | "image" | "video" | "audio" | "location" | "tool" | "file";
+    url?: string;
+    image?: string;
+    video?: string;
+    audio?: string;
+    location?: {
+        latitude: number;
+        longitude: number;
+        address?: string;
+    };
+    waitingMessage?: string;
+    isUploading?: boolean;
+    createdAt: string;
+    data?: string;
+    mimeType?: string;
+    uploadProgress?: number;
+};
+type LoadingMessage = string | null;
+type ChatContextType = {
+    messages: Message[];
+    setMessages: React.Dispatch<React.SetStateAction<Message[]>>;
+    inputMessage: string;
+    setInputMessage: React.Dispatch<React.SetStateAction<string>>;
+    loadingMessage: LoadingMessage | null;
+    setLoadingMessage: React.Dispatch<React.SetStateAction<LoadingMessage | null>>;
+    hasUnreadMessages: boolean;
+    setHasUnreadMessages: React.Dispatch<React.SetStateAction<boolean>>;
+    getFileUrl: (file: File) => string;
+    removeFileUrl: (file: File) => void;
+};
+declare function ChatProvider({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function useMessages(): {
+    messages: Message[];
+    setMessages: React.Dispatch<React.SetStateAction<Message[]>>;
+};
+declare function useInput(): {
+    inputMessage: string;
+    setInputMessage: React.Dispatch<React.SetStateAction<string>>;
+};
+declare function useLoadingMessage(): {
+    loadingMessage: LoadingMessage | null;
+    setLoadingMessage: React.Dispatch<React.SetStateAction<LoadingMessage | null>>;
+};
+declare function useFileUrls(): {
+    getFileUrl: (file: File) => string;
+    removeFileUrl: (file: File) => void;
+};
+declare function useUnreadMessages(): {
+    hasUnreadMessages: boolean;
+    setHasUnreadMessages: React.Dispatch<React.SetStateAction<boolean>>;
+};
+declare function useChat(): ChatContextType;
+
+export { type ActionButton, ActionMessage, AudioPreview, AudioRecorder, CameraDialog, CarouselImageDialog, ChatActions, ChatInput, ChatMessage, type ChatMessageProps, ChatProvider, CodeBlock, type FileMetadata, FilePreview, FilePreviewCard, ImageDialog, LoadingMessage$1 as LoadingMessage, LocationDialog, PaymentPreview, Toolbar, VideoDialog, markdownStyles, parseActions, uploadFile, useChat, useFileUrls, useInput, useLoadingMessage, useMessages, useUnreadMessages };