@gendive/chatllm 0.12.2 → 0.13.0

package/dist/react/index.d.mts

@@ -462,6 +462,8 @@ interface ChatUIProps {
     theme?: ThemeConfig;
     /** 사이드바 표시 여부 */
     showSidebar?: boolean;
+    /** @Todo vibecode - 사이드바 너비 (기본: 288px) */
+    sidebarWidth?: number | string;
     /** 설정 버튼 표시 여부 */
     showSettings?: boolean;
     /** 모델 선택기 표시 여부 */
@@ -554,7 +556,7 @@ interface ChatUIProps {
      * @Todo vibecode - 메시지 전송 완료 후 호출
      */
     onSaveMessages?: (sessionId: string, messages: {
-        role: 'USER' | 'ASSISTANT';
+        role: 'user' | 'assistant';
         message: string;
     }[]) => Promise<void>;
     /**
@@ -624,6 +626,10 @@ interface SidebarProps {
     onRenameSession?: (id: string, newTitle: string) => void;
     isOpen: boolean;
     onToggle: () => void;
+    /** @Todo vibecode - 사이드바 너비 (기본: 288px) */
+    width?: number | string;
+    /** @Todo vibecode - 테마 모드 (chatllm-root 밖에서 사용 시 CSS 변수 직접 적용) */
+    theme?: ThemeMode;
 }
 interface MessageListProps {
     messages: ChatMessage[];
@@ -977,7 +983,7 @@ interface UseChatUIOptions {
      * @Todo vibecode - 메시지 전송 완료 후 호출
      */
     onSaveMessages?: (sessionId: string, messages: {
-        role: 'USER' | 'ASSISTANT';
+        role: 'user' | 'assistant';
         message: string;
     }[]) => Promise<void>;
     /**

package/dist/react/index.d.ts

@@ -462,6 +462,8 @@ interface ChatUIProps {
     theme?: ThemeConfig;
     /** 사이드바 표시 여부 */
     showSidebar?: boolean;
+    /** @Todo vibecode - 사이드바 너비 (기본: 288px) */
+    sidebarWidth?: number | string;
     /** 설정 버튼 표시 여부 */
     showSettings?: boolean;
     /** 모델 선택기 표시 여부 */
@@ -554,7 +556,7 @@ interface ChatUIProps {
      * @Todo vibecode - 메시지 전송 완료 후 호출
      */
     onSaveMessages?: (sessionId: string, messages: {
-        role: 'USER' | 'ASSISTANT';
+        role: 'user' | 'assistant';
         message: string;
     }[]) => Promise<void>;
     /**
@@ -624,6 +626,10 @@ interface SidebarProps {
     onRenameSession?: (id: string, newTitle: string) => void;
     isOpen: boolean;
     onToggle: () => void;
+    /** @Todo vibecode - 사이드바 너비 (기본: 288px) */
+    width?: number | string;
+    /** @Todo vibecode - 테마 모드 (chatllm-root 밖에서 사용 시 CSS 변수 직접 적용) */
+    theme?: ThemeMode;
 }
 interface MessageListProps {
     messages: ChatMessage[];
@@ -977,7 +983,7 @@ interface UseChatUIOptions {
      * @Todo vibecode - 메시지 전송 완료 후 호출
      */
     onSaveMessages?: (sessionId: string, messages: {
-        role: 'USER' | 'ASSISTANT';
+        role: 'user' | 'assistant';
         message: string;
     }[]) => Promise<void>;
     /**

package/dist/react/index.js

@@ -1273,7 +1273,7 @@ var useChatUI = (options) => {
     // Memory options
     useGlobalMemoryEnabled = true,
     globalMemoryConfig,
-    enableAutoExtraction = true,
+    enableAutoExtraction: enableAutoExtractionProp,
     // External storage options
     useExternalStorage = false,
     onLoadSessions,
@@ -1289,6 +1289,7 @@ var useChatUI = (options) => {
     // Skills options
     skills
   } = options;
+  const enableAutoExtraction = enableAutoExtractionProp ?? !useExternalStorage;
   const [sessions, setSessions] = (0, import_react4.useState)([]);
   const [currentSessionId, setCurrentSessionId] = (0, import_react4.useState)(null);
   const [input, setInput] = (0, import_react4.useState)("");
@@ -1806,18 +1807,40 @@ ${newConversation}
     if (!messageContent.trim() || isLoading) return;
     let sessionId = currentSessionId;
     if (!sessionId) {
-      const now = Date.now();
-      const newSess = {
-        id: generateId2("session"),
-        title: "\uC0C8 \uB300\uD654",
-        messages: [],
-        model: selectedModel,
-        createdAt: now,
-        updatedAt: now
-      };
-      setSessions((prev) => [newSess, ...prev]);
-      sessionId = newSess.id;
-      setCurrentSessionId(sessionId);
+      if (useExternalStorage && onCreateSession) {
+        try {
+          const created = await onCreateSession();
+          const now = Date.now();
+          const newSess = {
+            id: created.id,
+            title: created.title,
+            messages: [],
+            model: selectedModel,
+            createdAt: now,
+            updatedAt: now
+          };
+          setSessions((prev) => [newSess, ...prev]);
+          sessionId = newSess.id;
+          setCurrentSessionId(sessionId);
+        } catch (error) {
+          onError?.(error instanceof Error ? error : new Error("Failed to create session"));
+          setIsLoading(false);
+          return;
+        }
+      } else {
+        const now = Date.now();
+        const newSess = {
+          id: generateId2("session"),
+          title: "\uC0C8 \uB300\uD654",
+          messages: [],
+          model: selectedModel,
+          createdAt: now,
+          updatedAt: now
+        };
+        setSessions((prev) => [newSess, ...prev]);
+        sessionId = newSess.id;
+        setCurrentSessionId(sessionId);
+      }
     }
     let finalContent = messageContent.trim();
     if (quotedText) {
@@ -2213,8 +2236,8 @@ ${result.content}
         const assistantContentForSave = accumulatedContent;
         if (assistantContentForSave && onSaveMessages) {
           const messagesToSave = [
-            { role: "USER", message: finalContent },
-            { role: "ASSISTANT", message: assistantContentForSave }
+            { role: "user", message: finalContent },
+            { role: "assistant", message: assistantContentForSave }
           ];
           onSaveMessages(capturedSessionId, messagesToSave).catch((saveError) => {
             console.error("[useChatUI] Failed to save messages:", saveError);
@@ -2917,8 +2940,11 @@ var ChatSidebar = ({
   onDeleteSession,
   onRenameSession,
   isOpen,
-  onToggle
+  onToggle,
+  width: widthProp,
+  theme
 }) => {
+  const sidebarWidth = typeof widthProp === "number" ? `${widthProp}px` : widthProp || "288px";
   const [editingId, setEditingId] = (0, import_react5.useState)(null);
   const [editingTitle, setEditingTitle] = (0, import_react5.useState)("");
   const inputRef = (0, import_react5.useRef)(null);
@@ -2953,12 +2979,13 @@ var ChatSidebar = ({
       handleCancelEdit();
     }
   };
+  const themeClass = theme === "dark" ? "chatllm-dark" : "";
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "aside",
     {
-      className: "chatllm-sidebar chatllm-sidebar-transition",
+      className: `chatllm-sidebar chatllm-sidebar-transition ${theme ? `chatllm-root ${themeClass}` : ""}`,
       style: {
-        width: isOpen ? "288px" : "0",
+        width: isOpen ? sidebarWidth : "0",
         flexShrink: 0,
         backgroundColor: "var(--chatllm-sidebar-bg)",
         borderRight: isOpen ? "1px solid var(--chatllm-border)" : "none",
@@ -2971,7 +2998,7 @@ var ChatSidebar = ({
         "div",
         {
           style: {
-            width: "288px",
+            width: sidebarWidth,
             height: "100%",
             display: "flex",
             flexDirection: "column",
@@ -6161,7 +6188,7 @@ var MessageBubble = ({
           display: "flex",
           flexDirection: "column",
           alignItems: "flex-end",
-          padding: "8px 24px"
+          padding: "4px 24px"
         },
         onMouseEnter: () => setShowActions(true),
         onMouseLeave: () => setShowActions(false),
@@ -6227,7 +6254,7 @@ var MessageBubble = ({
         display: "flex",
         flexDirection: "column",
         alignItems: "flex-start",
-        padding: "8px 24px"
+        padding: "4px 24px"
       },
       onMouseEnter: () => setShowActions(true),
       onMouseLeave: () => setShowActions(false),
@@ -6239,25 +6266,25 @@ var MessageBubble = ({
             className: "chatllm-sheet",
             style: {
               width: "100%",
-              padding: "24px",
+              padding: "16px",
               display: "flex",
-              gap: "16px"
+              gap: "12px"
             },
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 "div",
                 {
                   style: {
-                    width: "40px",
-                    height: "40px",
-                    borderRadius: "12px",
+                    width: "32px",
+                    height: "32px",
+                    borderRadius: "10px",
                     backgroundColor: "var(--chatllm-primary-light)",
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "center",
                     color: "var(--chatllm-primary)"
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconSvg, { name: "magic-line", size: 24 })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconSvg, { name: "magic-line", size: 20 })
                 }
               ) }),
               /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
@@ -6268,7 +6295,7 @@ var MessageBubble = ({
                       display: "flex",
                       alignItems: "center",
                       gap: "8px",
-                      marginBottom: "16px"
+                      marginBottom: "8px"
                     },
                     children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                       "span",
@@ -6518,7 +6545,7 @@ var MessageBubble = ({
               display: "flex",
               gap: "2px",
               marginTop: "4px",
-              marginLeft: "56px",
+              marginLeft: "44px",
               height: "24px",
               opacity: showActions ? 1 : 0,
               transition: "opacity 0.15s ease"
@@ -7862,6 +7889,7 @@ var ChatUI = ({
   apiEndpoint = "/api/chat",
   theme,
   showSidebar = true,
+  sidebarWidth,
   showSettings = true,
   showModelSelector = true,
   systemPrompt,
@@ -8022,7 +8050,9 @@ var ChatUI = ({
             onDeleteSession: deleteSession,
             onRenameSession: renameSession,
             isOpen: sidebarOpen,
-            onToggle: toggleSidebar
+            onToggle: toggleSidebar,
+            width: sidebarWidth,
+            theme: theme?.mode
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(