@gendive/chatllm 0.1.0 → 0.2.0

package/dist/react/index.d.ts

@@ -0,0 +1,426 @@
+import React$1 from 'react';
+
+type StyleLevel = 'low' | 'medium' | 'high';
+type FormattingStyle = 'minimal' | 'default' | 'rich';
+/**
+ * 응답 스타일 설정
+ */
+interface ResponseStyle {
+    /** 따뜻함 수준 */
+    warmth: StyleLevel;
+    /** 열정/에너지 수준 */
+    enthusiasm: StyleLevel;
+    /** 이모지 사용 수준 */
+    emojiUsage: StyleLevel;
+    /** 포맷팅 스타일 (헤더, 목록 등) */
+    formatting: FormattingStyle;
+    /** 응답 길이 선호 */
+    verbosity: 'concise' | 'balanced' | 'detailed';
+}
+/**
+ * 사용자 프로필 정보
+ */
+interface UserProfile {
+    /** 사용자 닉네임/호칭 */
+    nickname?: string;
+    /** 직업/역할 */
+    occupation?: string;
+    /** 추가 정보 (관심사, 가치, 선호 사항) */
+    additionalInfo?: string;
+    /** 선호 언어 */
+    preferredLanguage?: string;
+    /** 전문 분야 */
+    expertise?: string[];
+    /** 커스텀 지시사항 */
+    customInstructions?: string;
+}
+/**
+ * 개인화 설정 전체
+ */
+interface PersonalizationConfig {
+    /** 응답 스타일 */
+    responseStyle: ResponseStyle;
+    /** 사용자 프로필 */
+    userProfile: UserProfile;
+    /** 메모리 참조 활성화 */
+    useMemory: boolean;
+    /** 언어 설정 ('auto' | 'ko' | 'en' | etc.) */
+    language: string;
+}
+
+/**
+ * @description React UI 컴포넌트 타입 정의
+ */
+
+interface AlternativeResponse {
+    id: string;
+    model: string;
+    content: string;
+    timestamp: number;
+}
+interface ChatMessage {
+    id: string;
+    role: 'user' | 'assistant' | 'system';
+    content: string;
+    model?: string;
+    timestamp: number;
+    alternatives?: AlternativeResponse[];
+}
+interface ChatSession {
+    id: string;
+    title: string;
+    messages: ChatMessage[];
+    model: string;
+    createdAt: number;
+    updatedAt: number;
+    contextSummary?: string;
+    summaryAfterIndex?: number;
+}
+interface ActionItem {
+    id: string;
+    label: string;
+    icon: string;
+    description: string;
+    systemPrompt?: string;
+}
+type ProviderType = 'ollama' | 'devdive' | 'openai' | 'anthropic' | 'gemini';
+interface ModelConfig {
+    id: string;
+    name: string;
+    provider: ProviderType;
+    description?: string;
+}
+interface PromptTemplate {
+    id: string;
+    title: string;
+    description: string;
+    prompt: string;
+    category: string;
+    icon?: string;
+}
+type SettingsTab = 'general' | 'personalization' | 'data' | 'api';
+type ThemeMode = 'light' | 'dark' | 'system';
+interface ThemeConfig {
+    mode: ThemeMode;
+    primaryColor?: string;
+    borderRadius?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+}
+interface ChatUIProps {
+    /** 사용 가능한 모델 목록 */
+    models: ModelConfig[];
+    /** 사용 가능한 Actions */
+    actions?: ActionItem[];
+    /** 프롬프트 템플릿 */
+    templates?: PromptTemplate[];
+    /** 개인화 설정 */
+    personalization?: Partial<PersonalizationConfig>;
+    /** API 키 (DevDive 등 외부 프로바이더용) */
+    apiKey?: string;
+    /** API 엔드포인트 */
+    apiEndpoint?: string;
+    /** 테마 설정 */
+    theme?: ThemeConfig;
+    /** 사이드바 표시 여부 */
+    showSidebar?: boolean;
+    /** 설정 버튼 표시 여부 */
+    showSettings?: boolean;
+    /** 모델 선택기 표시 여부 */
+    showModelSelector?: boolean;
+    /** 초기 시스템 프롬프트 */
+    systemPrompt?: string;
+    /** 컨텍스트 압축 임계값 */
+    contextCompressionThreshold?: number;
+    /** 압축 후 유지할 메시지 수 */
+    keepRecentMessages?: number;
+    /** 스토리지 키 (로컬 저장용) */
+    storageKey?: string;
+    /** CSS 클래스 */
+    className?: string;
+    /** 메시지 전송 핸들러 (커스텀 API 사용 시) */
+    onSendMessage?: (params: SendMessageParams) => Promise<ReadableStream<Uint8Array> | string>;
+    /** 세션 변경 핸들러 */
+    onSessionChange?: (session: ChatSession | null) => void;
+    /** 에러 핸들러 */
+    onError?: (error: Error) => void;
+}
+interface SendMessageParams {
+    messages: {
+        role: 'user' | 'assistant' | 'system';
+        content: string;
+    }[];
+    model: string;
+    provider: ProviderType;
+    apiKey?: string;
+    systemPrompt?: string;
+}
+interface ChatUIComponents {
+    /** 사이드바 컴포넌트 */
+    Sidebar?: React.ComponentType<SidebarProps>;
+    /** 메시지 목록 컴포넌트 */
+    MessageList?: React.ComponentType<MessageListProps>;
+    /** 메시지 버블 컴포넌트 */
+    MessageBubble?: React.ComponentType<MessageBubbleProps>;
+    /** 입력창 컴포넌트 */
+    Input?: React.ComponentType<InputProps>;
+    /** 헤더 컴포넌트 */
+    Header?: React.ComponentType<HeaderProps>;
+    /** 빈 상태 컴포넌트 */
+    EmptyState?: React.ComponentType<EmptyStateProps>;
+    /** 로딩 인디케이터 */
+    LoadingIndicator?: React.ComponentType;
+    /** 액션 메뉴 컴포넌트 */
+    ActionMenu?: React.ComponentType<ActionMenuProps>;
+    /** 모델 선택기 컴포넌트 */
+    ModelSelector?: React.ComponentType<ModelSelectorProps>;
+}
+interface SidebarProps {
+    sessions: ChatSession[];
+    currentSessionId: string | null;
+    onSelectSession: (id: string) => void;
+    onNewSession: () => void;
+    onDeleteSession: (id: string) => void;
+    isOpen: boolean;
+    onToggle: () => void;
+}
+interface MessageListProps {
+    messages: ChatMessage[];
+    isLoading: boolean;
+    onCopy: (content: string, id: string) => void;
+    onEdit: (message: ChatMessage) => void;
+    onRegenerate: (id: string) => void;
+    onQuote: (text: string) => void;
+    copiedId: string | null;
+    editingId: string | null;
+}
+interface MessageBubbleProps {
+    message: ChatMessage;
+    isLoading?: boolean;
+    isCopied?: boolean;
+    isEditing?: boolean;
+    onCopy: () => void;
+    onEdit: () => void;
+    onRegenerate?: () => void;
+    onQuote?: (text: string) => void;
+    alternatives?: AlternativeResponse[];
+    activeAlternativeIndex?: number;
+    onAlternativeChange?: (index: number) => void;
+}
+interface InputProps {
+    value: string;
+    onChange: (value: string) => void;
+    onSubmit: () => void;
+    onStop?: () => void;
+    isLoading: boolean;
+    placeholder?: string;
+    quotedText?: string | null;
+    onClearQuote?: () => void;
+    selectedAction?: ActionItem | null;
+    onClearAction?: () => void;
+    onActionSelect?: (action: ActionItem) => void;
+    actions?: ActionItem[];
+}
+interface HeaderProps {
+    title: string;
+    model: string;
+    models: ModelConfig[];
+    onModelChange: (model: string) => void;
+    onSettingsOpen: () => void;
+    onSidebarToggle: () => void;
+    sidebarOpen: boolean;
+}
+interface EmptyStateProps {
+    greeting: string;
+    templates?: PromptTemplate[];
+    onTemplateClick: (template: PromptTemplate) => void;
+    actions?: ActionItem[];
+    onActionSelect?: (action: ActionItem) => void;
+}
+interface ActionMenuProps {
+    actions: ActionItem[];
+    isOpen: boolean;
+    onToggle: () => void;
+    onSelect: (action: ActionItem) => void;
+    selectedAction?: ActionItem | null;
+}
+interface ModelSelectorProps {
+    models: ModelConfig[];
+    selectedModel: string;
+    onSelect: (model: string) => void;
+}
+interface UseChatUIReturn {
+    sessions: ChatSession[];
+    currentSession: ChatSession | null;
+    currentSessionId: string | null;
+    messages: ChatMessage[];
+    input: string;
+    isLoading: boolean;
+    selectedModel: string;
+    sidebarOpen: boolean;
+    settingsOpen: boolean;
+    quotedText: string | null;
+    selectedAction: ActionItem | null;
+    copiedMessageId: string | null;
+    editingMessageId: string | null;
+    personalization: PersonalizationConfig;
+    setInput: (value: string) => void;
+    sendMessage: (content?: string) => Promise<void>;
+    stopGeneration: () => void;
+    newSession: () => void;
+    selectSession: (id: string) => void;
+    deleteSession: (id: string) => void;
+    setModel: (model: string) => void;
+    toggleSidebar: () => void;
+    openSettings: () => void;
+    closeSettings: () => void;
+    setQuotedText: (text: string | null) => void;
+    setSelectedAction: (action: ActionItem | null) => void;
+    copyMessage: (content: string, id: string) => void;
+    startEdit: (message: ChatMessage) => void;
+    cancelEdit: () => void;
+    saveEdit: (content: string) => Promise<void>;
+    regenerate: (messageId: string) => Promise<void>;
+    updatePersonalization: (config: Partial<PersonalizationConfig>) => void;
+}
+
+/**
+ * @description ChatUI 메인 컴포넌트
+ * 풀 기능 채팅 UI
+ */
+
+declare const ChatUI: React$1.FC<ChatUIProps>;
+
+/**
+ * @description Headless Chat UI Hook
+ * 상태 관리와 로직만 제공, UI는 자유롭게 구현 가능
+ */
+
+interface UseChatUIOptions {
+    /** 사용 가능한 모델 목록 */
+    models: ModelConfig[];
+    /** 사용 가능한 Actions */
+    actions?: ActionItem[];
+    /** 초기 개인화 설정 */
+    initialPersonalization?: Partial<PersonalizationConfig>;
+    /** API 키 */
+    apiKey?: string;
+    /** API 엔드포인트 */
+    apiEndpoint?: string;
+    /** 초기 모델 */
+    initialModel?: string;
+    /** 스토리지 키 */
+    storageKey?: string;
+    /** 컨텍스트 압축 임계값 */
+    contextCompressionThreshold?: number;
+    /** 압축 후 유지할 메시지 수 */
+    keepRecentMessages?: number;
+    /** 커스텀 메시지 전송 핸들러 */
+    onSendMessage?: (params: SendMessageParams) => Promise<ReadableStream<Uint8Array> | string>;
+    /** 세션 변경 핸들러 */
+    onSessionChange?: (session: ChatSession | null) => void;
+    /** 에러 핸들러 */
+    onError?: (error: Error) => void;
+}
+declare const useChatUI: (options: UseChatUIOptions) => UseChatUIReturn;
+
+/**
+ * @description Remix Icons wrapper component
+ * @see https://remixicon.com/
+ * Using Remix Icons 4.6.0 via CDN or npm package
+ */
+
+type IconName = 'menu-line' | 'close-line' | 'arrow-left-line' | 'arrow-right-line' | 'arrow-down-s-line' | 'arrow-up-s-line' | 'more-line' | 'more-2-line' | 'settings-3-line' | 'settings-4-line' | 'chat-1-line' | 'chat-3-line' | 'chat-new-line' | 'message-2-line' | 'send-plane-line' | 'send-plane-fill' | 'question-answer-line' | 'add-line' | 'add-circle-line' | 'delete-bin-line' | 'delete-bin-6-line' | 'edit-line' | 'edit-2-line' | 'pencil-line' | 'check-line' | 'close-circle-line' | 'refresh-line' | 'loop-left-line' | 'stop-line' | 'stop-circle-line' | 'play-line' | 'pause-line' | 'file-copy-line' | 'clipboard-line' | 'quote-text' | 'double-quotes-l' | 'double-quotes-r' | 'search-line' | 'search-2-line' | 'global-line' | 'image-line' | 'image-add-line' | 'gallery-line' | 'video-line' | 'mic-line' | 'code-line' | 'code-s-slash-line' | 'terminal-box-line' | 'bug-line' | 'git-branch-line' | 'file-text-line' | 'file-list-line' | 'article-line' | 'draft-line' | 'book-2-line' | 'magic-line' | 'sparkling-line' | 'sparkling-2-line' | 'robot-line' | 'brain-line' | 'user-line' | 'user-3-line' | 'user-settings-line' | 'account-circle-line' | 'sun-line' | 'moon-line' | 'computer-line' | 'information-line' | 'error-warning-line' | 'checkbox-circle-line' | 'loader-4-line' | 'translate-2' | 'time-line' | 'history-line' | 'star-line' | 'star-fill' | 'heart-line' | 'thumb-up-line' | 'thumb-down-line' | 'attachment-line' | 'link' | 'external-link-line' | 'download-line' | 'upload-line' | 'folder-line' | 'home-line' | 'dashboard-line' | 'list-check' | 'list-unordered' | 'key-line' | 'lock-line' | 'eye-line' | 'eye-off-line';
+interface IconProps {
+    /** Icon name from Remix Icons */
+    name: IconName;
+    /** Size in pixels or CSS value */
+    size?: number | string;
+    /** CSS color value */
+    color?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Click handler */
+    onClick?: () => void;
+    /** Accessibility label */
+    'aria-label'?: string;
+}
+/**
+ * Remix Icons component
+ * Uses CSS class-based icons (requires remixicon CSS)
+ */
+declare const Icon: React$1.FC<IconProps>;
+/**
+ * SVG-based Icon component (no external CSS required)
+ * Icons are rendered inline as SVG
+ */
+declare const IconSvg: React$1.FC<IconProps>;
+
+/**
+ * @description 채팅 사이드바 컴포넌트
+ * 세션 목록, 새 대화 버튼
+ */
+
+declare const ChatSidebar: React$1.FC<SidebarProps>;
+
+/**
+ * @description 채팅 입력창 컴포넌트
+ * 텍스트 입력, 액션 메뉴, 인용문 칩
+ */
+
+declare const ChatInput: React$1.FC<InputProps>;
+
+/**
+ * @description 채팅 헤더 컴포넌트
+ * 모델 선택, 설정 버튼
+ */
+
+declare const ChatHeader: React$1.FC<HeaderProps>;
+
+/**
+ * @description 메시지 버블 컴포넌트
+ * 사용자/AI 메시지 표시, 복사, 수정, 재생성
+ */
+
+declare const MessageBubble: React$1.FC<MessageBubbleProps>;
+
+/**
+ * @description 메시지 목록 컴포넌트
+ */
+
+declare const MessageList: React$1.FC<MessageListProps>;
+
+/**
+ * @description 빈 상태 컴포넌트
+ * 대화가 없을 때 표시되는 시작 화면
+ */
+
+declare const EmptyState: React$1.FC<EmptyStateProps>;
+
+/**
+ * @description 메모리 패널 컴포넌트
+ * 저장된 메모리, 컨텍스트 요약, 학습된 정보 조회
+ */
+
+interface MemoryItem {
+    id: string;
+    key: string;
+    value: string;
+    category?: 'context' | 'preference' | 'skill' | 'fact';
+    timestamp: number;
+}
+interface MemoryPanelProps {
+    /** 메모리 아이템 목록 */
+    items: MemoryItem[];
+    /** 컨텍스트 요약 (압축된 대화) */
+    contextSummary?: string;
+    /** 삭제 핸들러 */
+    onDelete?: (id: string) => void;
+    /** 전체 삭제 핸들러 */
+    onClearAll?: () => void;
+    /** 패널 열림 상태 */
+    isOpen: boolean;
+    /** 패널 토글 */
+    onToggle: () => void;
+}
+declare const MemoryPanel: React$1.FC<MemoryPanelProps>;
+
+export { type ActionItem, type ActionMenuProps, type AlternativeResponse, ChatHeader, ChatInput, type ChatMessage, type ChatSession, ChatSidebar, ChatUI, type ChatUIComponents, type ChatUIProps, EmptyState, type EmptyStateProps, type HeaderProps, Icon, type IconName, type IconProps, IconSvg, type InputProps, type MemoryItem, MemoryPanel, type MemoryPanelProps, MessageBubble, type MessageBubbleProps, MessageList, type MessageListProps, type ModelConfig, type ModelSelectorProps, type PersonalizationConfig, type PromptTemplate, type ProviderType, type ResponseStyle, type SendMessageParams, type SettingsTab, type SidebarProps, type ThemeConfig, type ThemeMode, type UseChatUIOptions, type UseChatUIReturn, type UserProfile, useChatUI };