juq-llm-kit/src/types.ts

Customizable UI components for React Native (Expo) chat applications

import { ViewStyle, TextStyle } from 'react-native';
import { ReactNode } from 'react';

// ChatInput types
export interface ChatInputProps {
  /** Placeholder text for the input field */
  placeholder?: string;
  /** Initial value for the input field */
  initialValue?: string;
  /** Function to call when message is submitted */
  onSubmit?: (message: string) => void;
  /** Whether the input is in loading state */
  isLoading?: boolean;
  /** Custom loading text phrases */
  loadingPhrases?: string[];
  /** Maximum height of the input in pixels */
  maxHeight?: number;
  /** Category buttons to display */
  categoryButtons?: CategoryButtonProps[];
  /** Style for the container */
  containerStyle?: ViewStyle;
  /** Style for the input */
  inputStyle?: TextStyle;
  /** Custom font family */
  fontFamily?: string;
  /** Theme - light or dark */
  theme?: 'light' | 'dark';
}

export interface CategoryButtonProps {
  /** Icon to display in the button */
  icon: ReactNode;
  /** Label for the button */
  label: string;
  /** Function to call when button is pressed */
  onPress?: () => void;
  /** Custom style for the button */
  style?: ViewStyle;
  /** Custom style for the icon container */
  iconStyle?: ViewStyle;
}

// LoadingTextAnimation types
export interface LoadingTextAnimationProps {
  /** Text phrases to display in sequence */
  phrases?: string[];
  /** Animation duration in milliseconds */
  animationDuration?: number;
  /** Text style */
  textStyle?: TextStyle;
  /** Container style */
  containerStyle?: ViewStyle;
  /** Custom font family */
  fontFamily?: string;
  /** Theme - light or dark */
  theme?: 'light' | 'dark';
}

// Messages types
export interface Message {
  /** Unique identifier for the message */
  id: number | string;
  /** Role of the message sender */
  role: 'user' | 'assistant' | string;
  /** Content of the message */
  content: string;
  /** Timestamp of the message */
  timestamp: string;
}

export interface MessagesProps {
  /** Array of messages to display */
  messages?: Message[];
  /** Function to call when a message is copied */
  onCopy?: (text: string) => void;
  /** Function to call when a message is regenerated */
  onRegenerate?: (messageId: number | string) => void;
  /** Container style */
  containerStyle?: ViewStyle;
  /** Message bubble style */
  bubbleStyle?: ViewStyle;
  /** Text style for messages */
  messageTextStyle?: TextStyle;
  /** Custom font family */
  fontFamily?: string;
  /** Theme - light or dark */
  theme?: 'light' | 'dark';
  /** Custom actions for messages */
  customActions?: {
    icon: ReactNode;
    onPress: (messageId: number | string) => void;
  }[];
}

// Sidebar types
export interface SidebarProps {
  /** Function to call when sidebar collapsed state changes */
  onCollapsedChange?: (collapsed: boolean) => void;
  /** Initial collapsed state */
  initialCollapsed?: boolean;
  /** Projects to display */
  projects?: ProjectItemProps[];
  /** History items to display */
  historyItems?: HistoryItemProps[];
  /** Subscription card title */
  subscriptionTitle?: string;
  /** Subscription card text */
  subscriptionText?: string;
  /** Container style */
  containerStyle?: ViewStyle;
  /** Theme - light or dark */
  theme?: 'light' | 'dark';
}

export interface ProjectItemProps {
  /** Project name */
  name: string;
  /** Project id */
  id?: string | number;
  /** Function to call when project is selected */
  onSelect?: () => void;
}

export interface HistoryItemProps {
  /** History item name */
  name: string;
  /** History item date */
  date: Date;
  /** History item id */
  id?: string | number;
  /** Function to call when history item is selected */
  onSelect?: () => void;
}