@gendive/chatllm 0.8.1 → 0.10.0

package/dist/react/index.js

@@ -568,7 +568,15 @@ var useChatUI = (options) => {
     // 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);
@@ -586,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)(
     () => ({
@@ -609,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 {
@@ -628,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));
@@ -787,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"),
@@ -799,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) {
@@ -818,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) {
@@ -1095,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;
@@ -1136,7 +1273,9 @@ ${contextSummary}` },
     onSendMessage,
     onError,
     generateTitleCallback,
-    onTitleChange
+    onTitleChange,
+    useExternalStorage,
+    onSaveMessages
   ]);
   const saveEdit = (0, import_react3.useCallback)(async (content) => {
     if (!editingMessageId || !currentSession || !currentSessionId) return;
@@ -1389,7 +1528,18 @@ ${currentSession.contextSummary}` },
         content: m.content
       }));
       await infoExtraction.extractInfo(recentMessages);
-    }
+    },
+    // External Storage Loading States
+    /**
+     * @description 세션 목록 로딩 상태
+     * @Todo vibecode - 외부 스토리지 사용 시
+     */
+    isSessionsLoading,
+    /**
+     * @description 단일 세션 로딩 상태
+     * @Todo vibecode - 외부 스토리지 사용 시
+     */
+    isSessionLoading
   };
 };
 
@@ -2547,6 +2697,9 @@ var SOURCE_LINKS_REGEX = /(\*{0,2}출처:?\*{0,2}\s*)?((?:(?<!!)\[`?[^\]]+`?\]\(
 var INLINE_CHOICE_PATTERN = /\[(\d+)\]\s*([^\[\n]+?)(?=\s*\[\d+\]|$)/g;
 var INLINE_CHOICE_LINE_PATTERN = /^(.+?)?\s*(\[\d+\][^\[]+(?:\[\d+\][^\[]+)+)$/;
 var CODE_BLOCK_REGEX = /```(\w*)\n?([\s\S]*?)```/g;
+var THINKING_TAG_REGEX = /<thinking>([\s\S]*?)<\/thinking>/gi;
+var THINKING_CODEBLOCK_REGEX = /```thinking\n?([\s\S]*?)```/gi;
+var THINKING_TEXT_REGEX = /^Thinking:\s*\n([\s\S]*?)(?=\n\n|$)/gim;
 var INLINE_CODE_REGEX = /`([^`]+)`/g;
 var BOLD_REGEX = /\*\*([^*]+)\*\*/g;
 var ITALIC_REGEX = /(?<!\*)\*([^*]+)\*(?!\*)/g;
@@ -2724,6 +2877,80 @@ var MarkdownTable = ({ data }) => {
     }
   );
 };
+var ThinkingBlock = ({ content, defaultOpen = false }) => {
+  const [isOpen, setIsOpen] = import_react8.default.useState(defaultOpen);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "details",
+    {
+      open: isOpen,
+      className: "chatllm-thinking",
+      style: {
+        margin: "12px 0",
+        borderRadius: "8px",
+        border: "1px solid var(--chatllm-border, #e5e7eb)",
+        background: "var(--chatllm-bg-secondary, #f9fafb)",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          "summary",
+          {
+            onClick: (e) => {
+              e.preventDefault();
+              setIsOpen(!isOpen);
+            },
+            style: {
+              padding: "10px 14px",
+              cursor: "pointer",
+              fontSize: "13px",
+              color: "var(--chatllm-text-secondary, #6b7280)",
+              userSelect: "none",
+              listStyle: "none",
+              display: "flex",
+              alignItems: "center",
+              gap: "6px"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { fontSize: "14px" }, children: "\u{1F4AD}" }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
+                "Thinking",
+                isOpen ? "" : "..."
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                "span",
+                {
+                  style: {
+                    marginLeft: "auto",
+                    fontSize: "10px",
+                    transition: "transform 0.2s",
+                    transform: isOpen ? "rotate(180deg)" : "rotate(0deg)"
+                  },
+                  children: "\u25BC"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "div",
+          {
+            className: "chatllm-thinking-content",
+            style: {
+              padding: "12px 14px",
+              borderTop: "1px solid var(--chatllm-border, #e5e7eb)",
+              fontSize: "13px",
+              color: "var(--chatllm-text-secondary, #6b7280)",
+              whiteSpace: "pre-wrap",
+              lineHeight: "1.6",
+              background: "var(--chatllm-bg, #ffffff)"
+            },
+            children: content.trim()
+          }
+        )
+      ]
+    }
+  );
+};
 var CodeBlock = ({ language, code }) => {
   const [copied, setCopied] = import_react8.default.useState(false);
   const handleCopy = async () => {
@@ -3148,10 +3375,35 @@ var SourceLinksSection = ({ links, label }) => {
     }
   );
 };
-var MarkdownRenderer = ({ content, className, onChoiceClick }) => {
+var MarkdownRenderer = ({
+  content,
+  className,
+  onChoiceClick,
+  showThinking = true,
+  thinkingDefaultOpen = false
+}) => {
   const rendered = (0, import_react8.useMemo)(() => {
     const elements = [];
     let processedContent = content;
+    const thinkingBlocks = [];
+    if (showThinking) {
+      processedContent = processedContent.replace(THINKING_TAG_REGEX, (_, thinkContent) => {
+        thinkingBlocks.push(thinkContent);
+        return `\xA7THINKING\xA7${thinkingBlocks.length - 1}\xA7/THINKING\xA7`;
+      });
+      processedContent = processedContent.replace(THINKING_CODEBLOCK_REGEX, (_, thinkContent) => {
+        thinkingBlocks.push(thinkContent);
+        return `\xA7THINKING\xA7${thinkingBlocks.length - 1}\xA7/THINKING\xA7`;
+      });
+      processedContent = processedContent.replace(THINKING_TEXT_REGEX, (_, thinkContent) => {
+        thinkingBlocks.push(thinkContent);
+        return `\xA7THINKING\xA7${thinkingBlocks.length - 1}\xA7/THINKING\xA7`;
+      });
+    } else {
+      processedContent = processedContent.replace(THINKING_TAG_REGEX, "");
+      processedContent = processedContent.replace(THINKING_CODEBLOCK_REGEX, "");
+      processedContent = processedContent.replace(THINKING_TEXT_REGEX, "");
+    }
     const codeBlocks = [];
     processedContent = processedContent.replace(CODE_BLOCK_REGEX, (_, lang, code) => {
       codeBlocks.push({ language: lang || "", code });
@@ -3259,6 +3511,23 @@ var MarkdownRenderer = ({ content, className, onChoiceClick }) => {
       }
     };
     lines.forEach((line, lineIndex) => {
+      const thinkingMatch = line.match(/§THINKING§(\d+)§\/THINKING§/);
+      if (thinkingMatch) {
+        flushList();
+        flushBlockquote();
+        const index = parseInt(thinkingMatch[1]);
+        elements.push(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            ThinkingBlock,
+            {
+              content: thinkingBlocks[index],
+              defaultOpen: thinkingDefaultOpen
+            },
+            `thinking-${lineIndex}`
+          )
+        );
+        return;
+      }
       const codeBlockMatch = line.match(/§CODEBLOCK§(\d+)§\/CODEBLOCK§/);
       if (codeBlockMatch) {
         flushList();
@@ -3447,7 +3716,9 @@ var MessageBubble = ({
   activeAlternativeIndex = 0,
   onAlternativeChange,
   nextAssistantMessage,
-  onChoiceClick
+  onChoiceClick,
+  showThinking = true,
+  thinkingDefaultOpen = false
 }) => {
   const [showActions, setShowActions] = (0, import_react9.useState)(false);
   const [showModelMenu, setShowModelMenu] = (0, import_react9.useState)(false);
@@ -3551,7 +3822,15 @@ var MessageBubble = ({
               children: [
                 isAssistant ? (
                   // AI 메시지는 마크다운 렌더링
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MarkdownRenderer, { content: displayContent, onChoiceClick })
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                    MarkdownRenderer,
+                    {
+                      content: displayContent,
+                      onChoiceClick,
+                      showThinking,
+                      thinkingDefaultOpen
+                    }
+                  )
                 ) : (
                   // 사용자 메시지는 일반 텍스트
                   /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -3841,7 +4120,9 @@ var MessageList = ({
   models,
   copiedId,
   editingId,
-  onChoiceClick
+  onChoiceClick,
+  showThinking = true,
+  thinkingDefaultOpen = false
 }) => {
   const messagesEndRef = (0, import_react10.useRef)(null);
   const containerRef = (0, import_react10.useRef)(null);
@@ -3914,7 +4195,9 @@ var MessageList = ({
               onAlternativeChange: message.role === "user" && assistantForAlts && onSetActiveAlternative ? (idx) => onSetActiveAlternative(assistantForAlts.id, idx) : message.role === "assistant" && onSetActiveAlternative ? (idx) => onSetActiveAlternative(message.id, idx) : void 0,
               models,
               alternatives: message.role === "assistant" ? message.alternatives : assistantForAlts?.alternatives,
-              onChoiceClick: message.role === "assistant" ? onChoiceClick : void 0
+              onChoiceClick: message.role === "assistant" ? onChoiceClick : void 0,
+              showThinking,
+              thinkingDefaultOpen
             },
             message.id
           );
@@ -5202,7 +5485,18 @@ var ChatUI = ({
   onSessionChange,
   onError,
   onTitleChange,
-  generateTitle: generateTitle2
+  generateTitle: generateTitle2,
+  // External Storage Props
+  useExternalStorage = false,
+  onLoadSessions,
+  onCreateSession,
+  onLoadSession,
+  onDeleteSession,
+  onUpdateSessionTitle,
+  onSaveMessages,
+  // Thinking Block Props
+  showThinking = true,
+  thinkingDefaultOpen = false
 }) => {
   import_react13.default.useEffect(() => {
     injectStyles();
@@ -5221,7 +5515,15 @@ var ChatUI = ({
     onSessionChange,
     onError,
     onTitleChange,
-    generateTitle: generateTitle2
+    generateTitle: generateTitle2,
+    // External Storage Options
+    useExternalStorage,
+    onLoadSessions,
+    onCreateSession,
+    onLoadSession,
+    onDeleteSession,
+    onUpdateSessionTitle,
+    onSaveMessages
   };
   const {
     sessions,
@@ -5390,7 +5692,9 @@ var ChatUI = ({
                   models: hookModels,
                   copiedId: copiedMessageId,
                   editingId: editingMessageId,
-                  onChoiceClick: handleChoiceClick
+                  onChoiceClick: handleChoiceClick,
+                  showThinking,
+                  thinkingDefaultOpen
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(