@gendive/chatllm 0.7.0 → 0.8.0

package/dist/react/index.d.mts

@@ -246,6 +246,8 @@ interface ChatUIProps {
     onSessionChange?: (session: ChatSession | null) => void;
     /** 에러 핸들러 */
     onError?: (error: Error) => void;
+    /** @Todo vibecode - 세션 제목 변경 핸들러 */
+    onTitleChange?: (sessionId: string, newTitle: string) => void;
     /** 재압축 임계값 - 새 메시지 수 (기본: 10) */
     recompressionThreshold?: number;
     /** 토큰 한도 (기본: 8000) */
@@ -300,6 +302,8 @@ interface SidebarProps {
     onSelectSession: (id: string) => void;
     onNewSession: () => void;
     onDeleteSession: (id: string) => void;
+    /** @Todo vibecode - 세션 제목 변경 핸들러 */
+    onRenameSession?: (id: string, newTitle: string) => void;
     isOpen: boolean;
     onToggle: () => void;
 }
@@ -404,6 +408,8 @@ interface UseChatUIReturn {
     newSession: () => void;
     selectSession: (id: string) => void;
     deleteSession: (id: string) => void;
+    /** @Todo vibecode - 세션 제목 변경 함수 */
+    renameSession: (id: string, newTitle: string) => void;
     setModel: (model: string) => void;
     toggleSidebar: () => void;
     openSettings: () => void;
@@ -465,6 +471,8 @@ interface UseChatUIOptions {
     onSessionChange?: (session: ChatSession | null) => void;
     /** 에러 핸들러 */
     onError?: (error: Error) => void;
+    /** @Todo vibecode - 세션 제목 변경 핸들러 */
+    onTitleChange?: (sessionId: string, newTitle: string) => void;
     /** 글로벌 메모리 사용 여부 (기본: true) */
     useGlobalMemoryEnabled?: boolean;
     /** 글로벌 메모리 설정 */

package/dist/react/index.d.ts

@@ -246,6 +246,8 @@ interface ChatUIProps {
     onSessionChange?: (session: ChatSession | null) => void;
     /** 에러 핸들러 */
     onError?: (error: Error) => void;
+    /** @Todo vibecode - 세션 제목 변경 핸들러 */
+    onTitleChange?: (sessionId: string, newTitle: string) => void;
     /** 재압축 임계값 - 새 메시지 수 (기본: 10) */
     recompressionThreshold?: number;
     /** 토큰 한도 (기본: 8000) */
@@ -300,6 +302,8 @@ interface SidebarProps {
     onSelectSession: (id: string) => void;
     onNewSession: () => void;
     onDeleteSession: (id: string) => void;
+    /** @Todo vibecode - 세션 제목 변경 핸들러 */
+    onRenameSession?: (id: string, newTitle: string) => void;
     isOpen: boolean;
     onToggle: () => void;
 }
@@ -404,6 +408,8 @@ interface UseChatUIReturn {
     newSession: () => void;
     selectSession: (id: string) => void;
     deleteSession: (id: string) => void;
+    /** @Todo vibecode - 세션 제목 변경 함수 */
+    renameSession: (id: string, newTitle: string) => void;
     setModel: (model: string) => void;
     toggleSidebar: () => void;
     openSettings: () => void;
@@ -465,6 +471,8 @@ interface UseChatUIOptions {
     onSessionChange?: (session: ChatSession | null) => void;
     /** 에러 핸들러 */
     onError?: (error: Error) => void;
+    /** @Todo vibecode - 세션 제목 변경 핸들러 */
+    onTitleChange?: (sessionId: string, newTitle: string) => void;
     /** 글로벌 메모리 사용 여부 (기본: true) */
     useGlobalMemoryEnabled?: boolean;
     /** 글로벌 메모리 설정 */

package/dist/react/index.js

@@ -48,7 +48,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/react/ChatUI.tsx
-var import_react12 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 
 // src/react/hooks/useChatUI.ts
 var import_react3 = require("react");
@@ -563,6 +563,7 @@ var useChatUI = (options) => {
     onSendMessage,
     onSessionChange,
     onError,
+    onTitleChange,
     // Memory options
     useGlobalMemoryEnabled = true,
     globalMemoryConfig,
@@ -817,6 +818,15 @@ ${newConversation}
       return filtered;
     });
   }, [currentSessionId, storageKey]);
+  const renameSession = (0, import_react3.useCallback)((id, newTitle) => {
+    if (!newTitle.trim()) return;
+    setSessions(
+      (prev) => prev.map(
+        (s) => s.id === id ? { ...s, title: newTitle.trim(), updatedAt: Date.now() } : s
+      )
+    );
+    onTitleChange?.(id, newTitle.trim());
+  }, [onTitleChange]);
   const setModel = (0, import_react3.useCallback)((model) => {
     setSelectedModel(model);
     if (currentSessionId) {
@@ -1335,6 +1345,7 @@ ${currentSession.contextSummary}` },
     newSession,
     selectSession,
     deleteSession,
+    renameSession,
     setModel,
     toggleSidebar,
     openSettings,
@@ -1365,6 +1376,9 @@ ${currentSession.contextSummary}` },
   };
 };
 
+// src/react/components/ChatSidebar.tsx
+var import_react4 = require("react");
+
 // src/react/components/Icon.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var Icon = ({
@@ -1475,9 +1489,44 @@ var ChatSidebar = ({
   onSelectSession,
   onNewSession,
   onDeleteSession,
+  onRenameSession,
   isOpen,
   onToggle
 }) => {
+  const [editingId, setEditingId] = (0, import_react4.useState)(null);
+  const [editingTitle, setEditingTitle] = (0, import_react4.useState)("");
+  const inputRef = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => {
+    if (editingId && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [editingId]);
+  const handleStartEdit = (session, e) => {
+    e.stopPropagation();
+    setEditingId(session.id);
+    setEditingTitle(session.title);
+  };
+  const handleSaveEdit = () => {
+    if (editingId && editingTitle.trim() && onRenameSession) {
+      onRenameSession(editingId, editingTitle.trim());
+    }
+    setEditingId(null);
+    setEditingTitle("");
+  };
+  const handleCancelEdit = () => {
+    setEditingId(null);
+    setEditingTitle("");
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleSaveEdit();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      handleCancelEdit();
+    }
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "aside",
     {
@@ -1587,7 +1636,30 @@ var ChatSidebar = ({
             },
             children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" }, children: [
               /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                editingId === session.id ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "input",
+                  {
+                    ref: inputRef,
+                    type: "text",
+                    value: editingTitle,
+                    onChange: (e) => setEditingTitle(e.target.value),
+                    onKeyDown: handleKeyDown,
+                    onBlur: handleSaveEdit,
+                    onClick: (e) => e.stopPropagation(),
+                    "aria-label": "\uC138\uC158 \uC81C\uBAA9 \uD3B8\uC9D1",
+                    style: {
+                      width: "100%",
+                      padding: "4px 8px",
+                      fontSize: "14px",
+                      fontWeight: session.id === currentSessionId ? 500 : 400,
+                      color: "var(--chatllm-text, #1f2937)",
+                      backgroundColor: "var(--chatllm-bg, #ffffff)",
+                      border: "1px solid var(--chatllm-primary, #3b82f6)",
+                      borderRadius: "4px",
+                      outline: "none"
+                    }
+                  }
+                ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                   "div",
                   {
                     style: {
@@ -1613,31 +1685,57 @@ var ChatSidebar = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                "button",
-                {
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    onDeleteSession(session.id);
-                  },
-                  style: {
-                    padding: "4px",
-                    backgroundColor: "transparent",
-                    border: "none",
-                    borderRadius: "4px",
-                    cursor: "pointer",
-                    opacity: 0.5,
-                    transition: "opacity 0.2s"
-                  },
-                  onMouseOver: (e) => {
-                    e.currentTarget.style.opacity = "1";
-                  },
-                  onMouseOut: (e) => {
-                    e.currentTarget.style.opacity = "0.5";
-                  },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IconSvg, { name: "delete-bin-line", size: 16, color: "var(--chatllm-text-muted, #9ca3af)" })
-                }
-              )
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", gap: "2px" }, children: [
+                onRenameSession && editingId !== session.id && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "button",
+                  {
+                    onClick: (e) => handleStartEdit(session, e),
+                    "aria-label": "\uC81C\uBAA9 \uD3B8\uC9D1",
+                    style: {
+                      padding: "4px",
+                      backgroundColor: "transparent",
+                      border: "none",
+                      borderRadius: "4px",
+                      cursor: "pointer",
+                      opacity: 0.5,
+                      transition: "opacity 0.2s"
+                    },
+                    onMouseOver: (e) => {
+                      e.currentTarget.style.opacity = "1";
+                    },
+                    onMouseOut: (e) => {
+                      e.currentTarget.style.opacity = "0.5";
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IconSvg, { name: "pencil-line", size: 16, color: "var(--chatllm-text-muted, #9ca3af)" })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "button",
+                  {
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      onDeleteSession(session.id);
+                    },
+                    "aria-label": "\uC138\uC158 \uC0AD\uC81C",
+                    style: {
+                      padding: "4px",
+                      backgroundColor: "transparent",
+                      border: "none",
+                      borderRadius: "4px",
+                      cursor: "pointer",
+                      opacity: 0.5,
+                      transition: "opacity 0.2s"
+                    },
+                    onMouseOver: (e) => {
+                      e.currentTarget.style.opacity = "1";
+                    },
+                    onMouseOut: (e) => {
+                      e.currentTarget.style.opacity = "0.5";
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IconSvg, { name: "delete-bin-line", size: 16, color: "var(--chatllm-text-muted, #9ca3af)" })
+                  }
+                )
+              ] })
             ] })
           },
           session.id
@@ -1669,7 +1767,7 @@ var ChatSidebar = ({
 };
 
 // src/react/components/ChatHeader.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var ChatHeader = ({
   title,
@@ -1682,7 +1780,7 @@ var ChatHeader = ({
   showModelSelector = true,
   showSettings = true
 }) => {
-  const [modelDropdownOpen, setModelDropdownOpen] = (0, import_react4.useState)(false);
+  const [modelDropdownOpen, setModelDropdownOpen] = (0, import_react5.useState)(false);
   const currentModel = models.find((m) => m.id === model);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "header",
@@ -1936,7 +2034,7 @@ var ChatHeader = ({
 };
 
 // src/react/components/ChatInput.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var ChatInput = ({
   value,
@@ -1952,9 +2050,9 @@ var ChatInput = ({
   onActionSelect,
   actions = []
 }) => {
-  const textareaRef = (0, import_react5.useRef)(null);
-  const [actionMenuOpen, setActionMenuOpen] = (0, import_react5.useState)(false);
-  (0, import_react5.useEffect)(() => {
+  const textareaRef = (0, import_react6.useRef)(null);
+  const [actionMenuOpen, setActionMenuOpen] = (0, import_react6.useState)(false);
+  (0, import_react6.useEffect)(() => {
     if (textareaRef.current) {
       textareaRef.current.style.height = "auto";
       textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, 200)}px`;
@@ -2252,16 +2350,16 @@ var ChatInput = ({
 };
 
 // src/react/components/MessageList.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/react/components/MessageBubble.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/react/components/MarkdownRenderer.tsx
-var import_react7 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 
 // src/react/components/LinkChip.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var getDomain = (url) => {
   try {
@@ -2315,7 +2413,7 @@ var LinkChip = ({
   index,
   style
 }) => {
-  const [isHovered, setIsHovered] = (0, import_react6.useState)(false);
+  const [isHovered, setIsHovered] = (0, import_react7.useState)(false);
   const domain = getDomain(url);
   const shortName = getShortName(domain);
   const domainColor = getDomainColor(domain);
@@ -2610,7 +2708,7 @@ var MarkdownTable = ({ data }) => {
   );
 };
 var CodeBlock = ({ language, code }) => {
-  const [copied, setCopied] = import_react7.default.useState(false);
+  const [copied, setCopied] = import_react8.default.useState(false);
   const handleCopy = async () => {
     try {
       await navigator.clipboard.writeText(code);
@@ -2693,9 +2791,9 @@ var CodeBlock = ({ language, code }) => {
   );
 };
 var ImageWithCopyButton = ({ src, alt, imageKey }) => {
-  const [isHovered, setIsHovered] = import_react7.default.useState(false);
-  const [copyState, setCopyState] = import_react7.default.useState("idle");
-  const imgRef = import_react7.default.useRef(null);
+  const [isHovered, setIsHovered] = import_react8.default.useState(false);
+  const [copyState, setCopyState] = import_react8.default.useState("idle");
+  const imgRef = import_react8.default.useRef(null);
   const getImageBlob = async () => {
     const img = imgRef.current;
     if (img && img.complete && img.naturalWidth > 0) {
@@ -2911,7 +3009,7 @@ var ImageWithCopyButton = ({ src, alt, imageKey }) => {
   );
 };
 var ChoiceButtons = ({ choices, title, onChoiceClick }) => {
-  const [hoveredIndex, setHoveredIndex] = import_react7.default.useState(null);
+  const [hoveredIndex, setHoveredIndex] = import_react8.default.useState(null);
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
@@ -3034,7 +3132,7 @@ var SourceLinksSection = ({ links, label }) => {
   );
 };
 var MarkdownRenderer = ({ content, className, onChoiceClick }) => {
-  const rendered = (0, import_react7.useMemo)(() => {
+  const rendered = (0, import_react8.useMemo)(() => {
     const elements = [];
     let processedContent = content;
     const codeBlocks = [];
@@ -3132,7 +3230,7 @@ var MarkdownRenderer = ({ content, className, onChoiceClick }) => {
                 borderRadius: "0 8px 8px 0",
                 color: "var(--chatllm-text, #374151)"
               },
-              children: blockquoteLines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react7.default.Fragment, { children: [
+              children: blockquoteLines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react8.default.Fragment, { children: [
                 parseInlineElements(line, `bq-line-${i}`),
                 i < blockquoteLines.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("br", {})
               ] }, i))
@@ -3285,9 +3383,16 @@ var MarkdownRenderer = ({ content, className, onChoiceClick }) => {
           return;
         }
       }
-      elements.push(
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { style: { margin: "4px 0" }, children: parseInlineElements(line, `p-${lineIndex}`) }, `p-${lineIndex}`)
-      );
+      const hasImage = IMAGE_REGEX.test(line);
+      if (hasImage) {
+        elements.push(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { margin: "4px 0" }, children: parseInlineElements(line, `p-${lineIndex}`) }, `p-${lineIndex}`)
+        );
+      } else {
+        elements.push(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { style: { margin: "4px 0" }, children: parseInlineElements(line, `p-${lineIndex}`) }, `p-${lineIndex}`)
+        );
+      }
     });
     flushList();
     flushBlockquote();
@@ -3327,8 +3432,8 @@ var MessageBubble = ({
   nextAssistantMessage,
   onChoiceClick
 }) => {
-  const [showActions, setShowActions] = (0, import_react8.useState)(false);
-  const [showModelMenu, setShowModelMenu] = (0, import_react8.useState)(false);
+  const [showActions, setShowActions] = (0, import_react9.useState)(false);
+  const [showModelMenu, setShowModelMenu] = (0, import_react9.useState)(false);
   const isUser = message.role === "user";
   const isAssistant = message.role === "assistant";
   const relevantAlternatives = isUser ? alternatives : message.alternatives;
@@ -3721,14 +3826,14 @@ var MessageList = ({
   editingId,
   onChoiceClick
 }) => {
-  const messagesEndRef = (0, import_react9.useRef)(null);
-  const containerRef = (0, import_react9.useRef)(null);
-  const [selectedText, setSelectedText] = (0, import_react9.useState)("");
-  const [selectionPosition, setSelectionPosition] = (0, import_react9.useState)(null);
-  (0, import_react9.useEffect)(() => {
+  const messagesEndRef = (0, import_react10.useRef)(null);
+  const containerRef = (0, import_react10.useRef)(null);
+  const [selectedText, setSelectedText] = (0, import_react10.useState)("");
+  const [selectionPosition, setSelectionPosition] = (0, import_react10.useState)(null);
+  (0, import_react10.useEffect)(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
-  const handleMouseUp = (0, import_react9.useCallback)(() => {
+  const handleMouseUp = (0, import_react10.useCallback)(() => {
     const selection = window.getSelection();
     const text = selection?.toString().trim();
     if (text && text.length > 0) {
@@ -4105,7 +4210,7 @@ var EmptyState = ({
 };
 
 // src/react/components/MemoryPanel.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var categoryLabels = {
   context: "\uB300\uD654 \uCEE8\uD14D\uC2A4\uD2B8",
@@ -4127,8 +4232,8 @@ var MemoryPanel = ({
   isOpen,
   onToggle
 }) => {
-  const [expandedId, setExpandedId] = (0, import_react10.useState)(null);
-  const [activeTab, setActiveTab] = (0, import_react10.useState)("all");
+  const [expandedId, setExpandedId] = (0, import_react11.useState)(null);
+  const [activeTab, setActiveTab] = (0, import_react11.useState)("all");
   const filteredItems = activeTab === "all" ? items : items.filter((item) => item.category === activeTab);
   const formatDate2 = (timestamp) => {
     const date = new Date(timestamp);
@@ -4446,7 +4551,7 @@ var MemoryPanel = ({
 };
 
 // src/react/components/SettingsModal.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var DEFAULT_PERSONALIZATION2 = {
   responseStyle: {
@@ -4471,8 +4576,8 @@ var SettingsModal = ({
   apiKeyLabel = "API Key",
   apiKeyDescription = "Cloud \uBAA8\uB378 \uC0AC\uC6A9\uC5D0 \uD544\uC694\uD569\uB2C8\uB2E4"
 }) => {
-  const [activeTab, setActiveTab] = (0, import_react11.useState)("general");
-  const [localApiKey, setLocalApiKey] = (0, import_react11.useState)(apiKey);
+  const [activeTab, setActiveTab] = (0, import_react12.useState)("general");
+  const [localApiKey, setLocalApiKey] = (0, import_react12.useState)(apiKey);
   if (!isOpen) return null;
   const updateResponseStyle = (key, value) => {
     onPersonalizationChange({
@@ -5078,9 +5183,10 @@ var ChatUI = ({
   className = "",
   onSendMessage,
   onSessionChange,
-  onError
+  onError,
+  onTitleChange
 }) => {
-  import_react12.default.useEffect(() => {
+  import_react13.default.useEffect(() => {
     injectStyles();
   }, []);
   const hookOptions = {
@@ -5095,7 +5201,8 @@ var ChatUI = ({
     keepRecentMessages,
     onSendMessage,
     onSessionChange,
-    onError
+    onError,
+    onTitleChange
   };
   const {
     sessions,
@@ -5118,6 +5225,7 @@ var ChatUI = ({
     newSession,
     selectSession,
     deleteSession,
+    renameSession,
     setModel,
     toggleSidebar,
     openSettings,
@@ -5148,8 +5256,8 @@ var ChatUI = ({
   const handleChoiceClick = (choice) => {
     setInput(choice.text);
   };
-  const [memoryPanelOpen, setMemoryPanelOpen] = (0, import_react12.useState)(false);
-  const memoryItems = import_react12.default.useMemo(() => {
+  const [memoryPanelOpen, setMemoryPanelOpen] = (0, import_react13.useState)(false);
+  const memoryItems = import_react13.default.useMemo(() => {
     const items = [];
     if (currentSession?.contextSummary) {
       items.push({
@@ -5209,6 +5317,7 @@ var ChatUI = ({
             onSelectSession: selectSession,
             onNewSession: newSession,
             onDeleteSession: deleteSession,
+            onRenameSession: renameSession,
             isOpen: sidebarOpen,
             onToggle: toggleSidebar
           }