@gendive/chatllm 0.8.0 → 0.9.0

package/dist/react/index.d.mts

@@ -248,6 +248,11 @@ interface ChatUIProps {
     onError?: (error: Error) => void;
     /** @Todo vibecode - 세션 제목 변경 핸들러 */
     onTitleChange?: (sessionId: string, newTitle: string) => void;
+    /**
+     * @description 첫 메시지 전송 시 LLM으로 제목 생성 콜백
+     * @Todo vibecode - 자동 제목 생성 기능
+     */
+    generateTitle?: (firstMessage: string) => Promise<string> | string;
     /** 재압축 임계값 - 새 메시지 수 (기본: 10) */
     recompressionThreshold?: number;
     /** 토큰 한도 (기본: 8000) */
@@ -260,6 +265,55 @@ interface ChatUIProps {
     enableAutoExtraction?: boolean;
     /** 정보 추출 설정 */
     infoExtractionConfig?: Partial<InfoExtractionConfig>;
+    /**
+     * @description 외부 스토리지 사용 여부
+     * @Todo vibecode - true 시 localStorage 대신 콜백 사용
+     */
+    useExternalStorage?: boolean;
+    /**
+     * @description 세션 목록 로드 콜백
+     * @Todo vibecode - 컴포넌트 마운트 시 호출
+     */
+    onLoadSessions?: () => Promise<{
+        id: string;
+        title: string;
+    }[]>;
+    /**
+     * @description 세션 생성 콜백
+     * @Todo vibecode - 새 채팅 생성 시 호출
+     */
+    onCreateSession?: () => Promise<{
+        id: string;
+        title: string;
+    }>;
+    /**
+     * @description 세션 상세 로드 콜백 (메시지 포함)
+     * @Todo vibecode - 세션 선택 시 호출 (lazy loading)
+     */
+    onLoadSession?: (sessionId: string) => Promise<{
+        id: string;
+        title: string;
+        messages: ChatMessage[];
+        memory_data?: object;
+    }>;
+    /**
+     * @description 세션 삭제 콜백
+     * @Todo vibecode - 세션 삭제 시 호출
+     */
+    onDeleteSession?: (sessionId: string) => Promise<void>;
+    /**
+     * @description 세션 제목 수정 콜백
+     * @Todo vibecode - 세션 제목 변경 시 호출
+     */
+    onUpdateSessionTitle?: (sessionId: string, title: string) => Promise<void>;
+    /**
+     * @description 메시지 저장 콜백
+     * @Todo vibecode - 메시지 전송 완료 후 호출
+     */
+    onSaveMessages?: (sessionId: string, messages: {
+        role: 'USER' | 'ASSISTANT';
+        message: string;
+    }[]) => Promise<void>;
 }
 interface SendMessageParams {
     messages: {
@@ -432,6 +486,16 @@ interface UseChatUIReturn {
     compressionState: CompressionState | null;
     /** 수동으로 정보 추출 트리거 */
     extractUserInfo: () => Promise<void>;
+    /**
+     * @description 세션 목록 로딩 상태
+     * @Todo vibecode - 외부 스토리지 사용 시 세션 목록 로드 중
+     */
+    isSessionsLoading: boolean;
+    /**
+     * @description 단일 세션 로딩 상태
+     * @Todo vibecode - 외부 스토리지 사용 시 세션 상세 로드 중
+     */
+    isSessionLoading: boolean;
 }
 
 /**
@@ -473,12 +537,66 @@ interface UseChatUIOptions {
     onError?: (error: Error) => void;
     /** @Todo vibecode - 세션 제목 변경 핸들러 */
     onTitleChange?: (sessionId: string, newTitle: string) => void;
+    /**
+     * @description 첫 메시지 전송 시 LLM으로 제목 생성 콜백
+     * @Todo vibecode - 자동 제목 생성 기능
+     */
+    generateTitle?: (firstMessage: string) => Promise<string> | string;
     /** 글로벌 메모리 사용 여부 (기본: true) */
     useGlobalMemoryEnabled?: boolean;
     /** 글로벌 메모리 설정 */
     globalMemoryConfig?: GlobalMemoryConfig;
     /** 자동 정보 추출 활성화 (기본: true) */
     enableAutoExtraction?: boolean;
+    /**
+     * @description 외부 스토리지 사용 여부
+     * @Todo vibecode - true 시 localStorage 대신 콜백 사용
+     */
+    useExternalStorage?: boolean;
+    /**
+     * @description 세션 목록 로드 콜백
+     * @Todo vibecode - 컴포넌트 마운트 시 호출
+     */
+    onLoadSessions?: () => Promise<{
+        id: string;
+        title: string;
+    }[]>;
+    /**
+     * @description 세션 생성 콜백
+     * @Todo vibecode - 새 채팅 생성 시 호출
+     */
+    onCreateSession?: () => Promise<{
+        id: string;
+        title: string;
+    }>;
+    /**
+     * @description 세션 상세 로드 콜백 (메시지 포함)
+     * @Todo vibecode - 세션 선택 시 호출 (lazy loading)
+     */
+    onLoadSession?: (sessionId: string) => Promise<{
+        id: string;
+        title: string;
+        messages: ChatMessage[];
+        memory_data?: object;
+    }>;
+    /**
+     * @description 세션 삭제 콜백
+     * @Todo vibecode - 세션 삭제 시 호출
+     */
+    onDeleteSession?: (sessionId: string) => Promise<void>;
+    /**
+     * @description 세션 제목 수정 콜백
+     * @Todo vibecode - 세션 제목 변경 시 호출
+     */
+    onUpdateSessionTitle?: (sessionId: string, title: string) => Promise<void>;
+    /**
+     * @description 메시지 저장 콜백
+     * @Todo vibecode - 메시지 전송 완료 후 호출
+     */
+    onSaveMessages?: (sessionId: string, messages: {
+        role: 'USER' | 'ASSISTANT';
+        message: string;
+    }[]) => Promise<void>;
 }
 declare const useChatUI: (options: UseChatUIOptions) => UseChatUIReturn;
 

package/dist/react/index.d.ts

@@ -248,6 +248,11 @@ interface ChatUIProps {
     onError?: (error: Error) => void;
     /** @Todo vibecode - 세션 제목 변경 핸들러 */
     onTitleChange?: (sessionId: string, newTitle: string) => void;
+    /**
+     * @description 첫 메시지 전송 시 LLM으로 제목 생성 콜백
+     * @Todo vibecode - 자동 제목 생성 기능
+     */
+    generateTitle?: (firstMessage: string) => Promise<string> | string;
     /** 재압축 임계값 - 새 메시지 수 (기본: 10) */
     recompressionThreshold?: number;
     /** 토큰 한도 (기본: 8000) */
@@ -260,6 +265,55 @@ interface ChatUIProps {
     enableAutoExtraction?: boolean;
     /** 정보 추출 설정 */
     infoExtractionConfig?: Partial<InfoExtractionConfig>;
+    /**
+     * @description 외부 스토리지 사용 여부
+     * @Todo vibecode - true 시 localStorage 대신 콜백 사용
+     */
+    useExternalStorage?: boolean;
+    /**
+     * @description 세션 목록 로드 콜백
+     * @Todo vibecode - 컴포넌트 마운트 시 호출
+     */
+    onLoadSessions?: () => Promise<{
+        id: string;
+        title: string;
+    }[]>;
+    /**
+     * @description 세션 생성 콜백
+     * @Todo vibecode - 새 채팅 생성 시 호출
+     */
+    onCreateSession?: () => Promise<{
+        id: string;
+        title: string;
+    }>;
+    /**
+     * @description 세션 상세 로드 콜백 (메시지 포함)
+     * @Todo vibecode - 세션 선택 시 호출 (lazy loading)
+     */
+    onLoadSession?: (sessionId: string) => Promise<{
+        id: string;
+        title: string;
+        messages: ChatMessage[];
+        memory_data?: object;
+    }>;
+    /**
+     * @description 세션 삭제 콜백
+     * @Todo vibecode - 세션 삭제 시 호출
+     */
+    onDeleteSession?: (sessionId: string) => Promise<void>;
+    /**
+     * @description 세션 제목 수정 콜백
+     * @Todo vibecode - 세션 제목 변경 시 호출
+     */
+    onUpdateSessionTitle?: (sessionId: string, title: string) => Promise<void>;
+    /**
+     * @description 메시지 저장 콜백
+     * @Todo vibecode - 메시지 전송 완료 후 호출
+     */
+    onSaveMessages?: (sessionId: string, messages: {
+        role: 'USER' | 'ASSISTANT';
+        message: string;
+    }[]) => Promise<void>;
 }
 interface SendMessageParams {
     messages: {
@@ -432,6 +486,16 @@ interface UseChatUIReturn {
     compressionState: CompressionState | null;
     /** 수동으로 정보 추출 트리거 */
     extractUserInfo: () => Promise<void>;
+    /**
+     * @description 세션 목록 로딩 상태
+     * @Todo vibecode - 외부 스토리지 사용 시 세션 목록 로드 중
+     */
+    isSessionsLoading: boolean;
+    /**
+     * @description 단일 세션 로딩 상태
+     * @Todo vibecode - 외부 스토리지 사용 시 세션 상세 로드 중
+     */
+    isSessionLoading: boolean;
 }
 
 /**
@@ -473,12 +537,66 @@ interface UseChatUIOptions {
     onError?: (error: Error) => void;
     /** @Todo vibecode - 세션 제목 변경 핸들러 */
     onTitleChange?: (sessionId: string, newTitle: string) => void;
+    /**
+     * @description 첫 메시지 전송 시 LLM으로 제목 생성 콜백
+     * @Todo vibecode - 자동 제목 생성 기능
+     */
+    generateTitle?: (firstMessage: string) => Promise<string> | string;
     /** 글로벌 메모리 사용 여부 (기본: true) */
     useGlobalMemoryEnabled?: boolean;
     /** 글로벌 메모리 설정 */
     globalMemoryConfig?: GlobalMemoryConfig;
     /** 자동 정보 추출 활성화 (기본: true) */
     enableAutoExtraction?: boolean;
+    /**
+     * @description 외부 스토리지 사용 여부
+     * @Todo vibecode - true 시 localStorage 대신 콜백 사용
+     */
+    useExternalStorage?: boolean;
+    /**
+     * @description 세션 목록 로드 콜백
+     * @Todo vibecode - 컴포넌트 마운트 시 호출
+     */
+    onLoadSessions?: () => Promise<{
+        id: string;
+        title: string;
+    }[]>;
+    /**
+     * @description 세션 생성 콜백
+     * @Todo vibecode - 새 채팅 생성 시 호출
+     */
+    onCreateSession?: () => Promise<{
+        id: string;
+        title: string;
+    }>;
+    /**
+     * @description 세션 상세 로드 콜백 (메시지 포함)
+     * @Todo vibecode - 세션 선택 시 호출 (lazy loading)
+     */
+    onLoadSession?: (sessionId: string) => Promise<{
+        id: string;
+        title: string;
+        messages: ChatMessage[];
+        memory_data?: object;
+    }>;
+    /**
+     * @description 세션 삭제 콜백
+     * @Todo vibecode - 세션 삭제 시 호출
+     */
+    onDeleteSession?: (sessionId: string) => Promise<void>;
+    /**
+     * @description 세션 제목 수정 콜백
+     * @Todo vibecode - 세션 제목 변경 시 호출
+     */
+    onUpdateSessionTitle?: (sessionId: string, title: string) => Promise<void>;
+    /**
+     * @description 메시지 저장 콜백
+     * @Todo vibecode - 메시지 전송 완료 후 호출
+     */
+    onSaveMessages?: (sessionId: string, messages: {
+        role: 'USER' | 'ASSISTANT';
+        message: string;
+    }[]) => Promise<void>;
 }
 declare const useChatUI: (options: UseChatUIOptions) => UseChatUIReturn;
 

package/dist/react/index.js

@@ -564,10 +564,19 @@ var useChatUI = (options) => {
     onSessionChange,
     onError,
     onTitleChange,
+    generateTitle: generateTitleCallback,
     // Memory options
     useGlobalMemoryEnabled = true,
     globalMemoryConfig,
-    enableAutoExtraction = true
+    enableAutoExtraction = true,
+    // External storage options
+    useExternalStorage = false,
+    onLoadSessions,
+    onCreateSession,
+    onLoadSession,
+    onDeleteSession: onDeleteSessionCallback,
+    onUpdateSessionTitle,
+    onSaveMessages
   } = options;
   const [sessions, setSessions] = (0, import_react3.useState)([]);
   const [currentSessionId, setCurrentSessionId] = (0, import_react3.useState)(null);
@@ -585,6 +594,8 @@ var useChatUI = (options) => {
     ...initialPersonalization
   });
   const [activeAlternatives, setActiveAlternatives] = (0, import_react3.useState)({});
+  const [isSessionsLoading, setIsSessionsLoading] = (0, import_react3.useState)(false);
+  const [isSessionLoading, setIsSessionLoading] = (0, import_react3.useState)(false);
   const abortControllerRef = (0, import_react3.useRef)(null);
   const memoryOptions = (0, import_react3.useMemo)(
     () => ({
@@ -608,6 +619,36 @@ var useChatUI = (options) => {
   const compressionState = currentSession?.compressionState || null;
   (0, import_react3.useEffect)(() => {
     if (typeof window === "undefined") return;
+    if (useExternalStorage && onLoadSessions) {
+      setIsSessionsLoading(true);
+      onLoadSessions().then((sessionList) => {
+        const sessionsWithoutMessages = sessionList.map((s) => ({
+          id: s.id,
+          title: s.title,
+          messages: [],
+          // 메시지는 세션 선택 시 로드
+          model: initialModel || models[0]?.id || "",
+          createdAt: Date.now(),
+          updatedAt: Date.now()
+        }));
+        setSessions(sessionsWithoutMessages);
+        if (sessionsWithoutMessages.length > 0) {
+          setCurrentSessionId(sessionsWithoutMessages[0].id);
+        }
+      }).catch((error) => {
+        onError?.(error instanceof Error ? error : new Error("Failed to load sessions"));
+      }).finally(() => {
+        setIsSessionsLoading(false);
+      });
+      const savedPersonalization2 = localStorage.getItem(`${storageKey}_personalization`);
+      if (savedPersonalization2) {
+        try {
+          setPersonalization(JSON.parse(savedPersonalization2));
+        } catch {
+        }
+      }
+      return;
+    }
     const saved = localStorage.getItem(storageKey);
     if (saved) {
       try {
@@ -627,13 +668,14 @@ var useChatUI = (options) => {
       } catch {
       }
     }
-  }, [storageKey]);
+  }, [storageKey, useExternalStorage, onLoadSessions, initialModel, models, onError]);
   (0, import_react3.useEffect)(() => {
     if (typeof window === "undefined") return;
+    if (useExternalStorage) return;
     if (sessions.length > 0) {
       localStorage.setItem(storageKey, JSON.stringify(sessions));
     }
-  }, [sessions, storageKey]);
+  }, [sessions, storageKey, useExternalStorage]);
   (0, import_react3.useEffect)(() => {
     if (typeof window === "undefined") return;
     localStorage.setItem(`${storageKey}_personalization`, JSON.stringify(personalization));
@@ -786,7 +828,29 @@ ${newConversation}
   const estimateTokens = (0, import_react3.useCallback)((messages2) => {
     return messages2.reduce((sum, m) => sum + Math.ceil(m.content.length / 4), 0);
   }, []);
-  const newSession = (0, import_react3.useCallback)(() => {
+  const newSession = (0, import_react3.useCallback)(async () => {
+    if (useExternalStorage && onCreateSession) {
+      setIsSessionLoading(true);
+      try {
+        const created = await onCreateSession();
+        const now2 = Date.now();
+        const newSess2 = {
+          id: created.id,
+          title: created.title,
+          messages: [],
+          model: selectedModel,
+          createdAt: now2,
+          updatedAt: now2
+        };
+        setSessions((prev) => [newSess2, ...prev]);
+        setCurrentSessionId(newSess2.id);
+      } catch (error) {
+        onError?.(error instanceof Error ? error : new Error("Failed to create session"));
+      } finally {
+        setIsSessionLoading(false);
+      }
+      return;
+    }
     const now = Date.now();
     const newSess = {
       id: generateId("session"),
@@ -798,15 +862,60 @@ ${newConversation}
     };
     setSessions((prev) => [newSess, ...prev]);
     setCurrentSessionId(newSess.id);
-  }, [selectedModel]);
-  const selectSession = (0, import_react3.useCallback)((id) => {
+  }, [selectedModel, useExternalStorage, onCreateSession, onError]);
+  const selectSession = (0, import_react3.useCallback)(async (id) => {
+    if (useExternalStorage && onLoadSession) {
+      setIsSessionLoading(true);
+      try {
+        const sessionDetail = await onLoadSession(id);
+        const loadedMessages = sessionDetail.messages.map((m, idx) => ({
+          id: m.id || generateId("msg"),
+          role: typeof m.role === "string" ? m.role.toLowerCase() : m.role,
+          content: m.content,
+          timestamp: m.timestamp || Date.now() - (sessionDetail.messages.length - idx) * 1e3,
+          model: m.model,
+          alternatives: m.alternatives,
+          sources: m.sources
+        }));
+        setSessions(
+          (prev) => prev.map(
+            (s) => s.id === id ? { ...s, title: sessionDetail.title, messages: loadedMessages, updatedAt: Date.now() } : s
+          )
+        );
+        setCurrentSessionId(id);
+        const existingSession = sessions.find((s) => s.id === id);
+        if (existingSession) {
+          setSelectedModel(existingSession.model);
+        }
+      } catch (error) {
+        onError?.(error instanceof Error ? error : new Error("Failed to load session"));
+      } finally {
+        setIsSessionLoading(false);
+      }
+      return;
+    }
     const session = sessions.find((s) => s.id === id);
     if (session) {
       setCurrentSessionId(id);
       setSelectedModel(session.model);
     }
-  }, [sessions]);
-  const deleteSession = (0, import_react3.useCallback)((id) => {
+  }, [sessions, useExternalStorage, onLoadSession, onError]);
+  const deleteSession = (0, import_react3.useCallback)(async (id) => {
+    if (useExternalStorage && onDeleteSessionCallback) {
+      try {
+        await onDeleteSessionCallback(id);
+        setSessions((prev) => {
+          const filtered = prev.filter((s) => s.id !== id);
+          if (currentSessionId === id) {
+            setCurrentSessionId(filtered.length > 0 ? filtered[0].id : null);
+          }
+          return filtered;
+        });
+      } catch (error) {
+        onError?.(error instanceof Error ? error : new Error("Failed to delete session"));
+      }
+      return;
+    }
     setSessions((prev) => {
       const filtered = prev.filter((s) => s.id !== id);
       if (currentSessionId === id) {
@@ -817,16 +926,30 @@ ${newConversation}
       }
       return filtered;
     });
-  }, [currentSessionId, storageKey]);
-  const renameSession = (0, import_react3.useCallback)((id, newTitle) => {
+  }, [currentSessionId, storageKey, useExternalStorage, onDeleteSessionCallback, onError]);
+  const renameSession = (0, import_react3.useCallback)(async (id, newTitle) => {
     if (!newTitle.trim()) return;
+    if (useExternalStorage && onUpdateSessionTitle) {
+      try {
+        await onUpdateSessionTitle(id, newTitle.trim());
+        setSessions(
+          (prev) => prev.map(
+            (s) => s.id === id ? { ...s, title: newTitle.trim(), updatedAt: Date.now() } : s
+          )
+        );
+        onTitleChange?.(id, newTitle.trim());
+      } catch (error) {
+        onError?.(error instanceof Error ? error : new Error("Failed to update session title"));
+      }
+      return;
+    }
     setSessions(
       (prev) => prev.map(
         (s) => s.id === id ? { ...s, title: newTitle.trim(), updatedAt: Date.now() } : s
       )
     );
     onTitleChange?.(id, newTitle.trim());
-  }, [onTitleChange]);
+  }, [onTitleChange, useExternalStorage, onUpdateSessionTitle, onError]);
   const setModel = (0, import_react3.useCallback)((model) => {
     setSelectedModel(model);
     if (currentSessionId) {
@@ -906,6 +1029,7 @@ ${finalContent}`;
     setQuotedText(null);
     setSelectedAction(null);
     const capturedSessionId = sessionId;
+    const isFirstMessage = !sessions.find((s) => s.id === capturedSessionId)?.messages.length;
     setSessions(
       (prev) => prev.map((s) => {
         if (s.id === capturedSessionId) {
@@ -920,6 +1044,19 @@ ${finalContent}`;
         return s;
       })
     );
+    if (isFirstMessage && generateTitleCallback) {
+      Promise.resolve(generateTitleCallback(finalContent)).then((generatedTitle) => {
+        if (generatedTitle && generatedTitle.trim()) {
+          setSessions(
+            (prev) => prev.map(
+              (s) => s.id === capturedSessionId ? { ...s, title: generatedTitle.trim(), updatedAt: Date.now() } : s
+            )
+          );
+          onTitleChange?.(capturedSessionId, generatedTitle.trim());
+        }
+      }).catch(() => {
+      });
+    }
     setIsLoading(true);
     abortControllerRef.current = new AbortController();
     try {
@@ -1080,6 +1217,21 @@ ${contextSummary}` },
           }
         }
       }
+      if (useExternalStorage && onSaveMessages && capturedSessionId) {
+        const updatedSession = sessions.find((s) => s.id === capturedSessionId);
+        const assistantContent = updatedSession?.messages.find(
+          (m) => m.id === assistantMessageId
+        )?.content || "";
+        if (assistantContent) {
+          const messagesToSave = [
+            { role: "USER", message: finalContent },
+            { role: "ASSISTANT", message: assistantContent }
+          ];
+          onSaveMessages(capturedSessionId, messagesToSave).catch((saveError) => {
+            console.error("[useChatUI] Failed to save messages:", saveError);
+          });
+        }
+      }
     } catch (error) {
       if (error instanceof Error && error.name === "AbortError") {
         return;
@@ -1119,7 +1271,11 @@ ${contextSummary}` },
     buildSystemPrompt,
     compressContext,
     onSendMessage,
-    onError
+    onError,
+    generateTitleCallback,
+    onTitleChange,
+    useExternalStorage,
+    onSaveMessages
   ]);
   const saveEdit = (0, import_react3.useCallback)(async (content) => {
     if (!editingMessageId || !currentSession || !currentSessionId) return;
@@ -1372,7 +1528,18 @@ ${currentSession.contextSummary}` },
         content: m.content
       }));
       await infoExtraction.extractInfo(recentMessages);
-    }
+    },
+    // External Storage Loading States
+    /**
+     * @description 세션 목록 로딩 상태
+     * @Todo vibecode - 외부 스토리지 사용 시
+     */
+    isSessionsLoading,
+    /**
+     * @description 단일 세션 로딩 상태
+     * @Todo vibecode - 외부 스토리지 사용 시
+     */
+    isSessionLoading
   };
 };
 
@@ -5184,7 +5351,16 @@ var ChatUI = ({
   onSendMessage,
   onSessionChange,
   onError,
-  onTitleChange
+  onTitleChange,
+  generateTitle: generateTitle2,
+  // External Storage Props
+  useExternalStorage = false,
+  onLoadSessions,
+  onCreateSession,
+  onLoadSession,
+  onDeleteSession,
+  onUpdateSessionTitle,
+  onSaveMessages
 }) => {
   import_react13.default.useEffect(() => {
     injectStyles();
@@ -5202,7 +5378,16 @@ var ChatUI = ({
     onSendMessage,
     onSessionChange,
     onError,
-    onTitleChange
+    onTitleChange,
+    generateTitle: generateTitle2,
+    // External Storage Options
+    useExternalStorage,
+    onLoadSessions,
+    onCreateSession,
+    onLoadSession,
+    onDeleteSession,
+    onUpdateSessionTitle,
+    onSaveMessages
   };
   const {
     sessions,