@gendive/chatllm 0.7.0 → 0.8.1

package/dist/react/index.mjs

@@ -1,5 +1,5 @@
 // src/react/ChatUI.tsx
-import React9, { useState as useState11 } from "react";
+import React10, { useState as useState12 } from "react";
 
 // src/react/hooks/useChatUI.ts
 import { useState as useState3, useRef as useRef2, useCallback as useCallback3, useEffect as useEffect2, useMemo } from "react";
@@ -514,6 +514,8 @@ var useChatUI = (options) => {
     onSendMessage,
     onSessionChange,
     onError,
+    onTitleChange,
+    generateTitle: generateTitleCallback,
     // Memory options
     useGlobalMemoryEnabled = true,
     globalMemoryConfig,
@@ -768,6 +770,15 @@ ${newConversation}
       return filtered;
     });
   }, [currentSessionId, storageKey]);
+  const renameSession = useCallback3((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 = useCallback3((model) => {
     setSelectedModel(model);
     if (currentSessionId) {
@@ -847,6 +858,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) {
@@ -861,6 +873,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 {
@@ -1060,7 +1085,9 @@ ${contextSummary}` },
     buildSystemPrompt,
     compressContext,
     onSendMessage,
-    onError
+    onError,
+    generateTitleCallback,
+    onTitleChange
   ]);
   const saveEdit = useCallback3(async (content) => {
     if (!editingMessageId || !currentSession || !currentSessionId) return;
@@ -1286,6 +1313,7 @@ ${currentSession.contextSummary}` },
     newSession,
     selectSession,
     deleteSession,
+    renameSession,
     setModel,
     toggleSidebar,
     openSettings,
@@ -1316,6 +1344,9 @@ ${currentSession.contextSummary}` },
   };
 };
 
+// src/react/components/ChatSidebar.tsx
+import { useState as useState4, useRef as useRef3, useEffect as useEffect3 } from "react";
+
 // src/react/components/Icon.tsx
 import { jsx } from "react/jsx-runtime";
 var Icon = ({
@@ -1426,9 +1457,44 @@ var ChatSidebar = ({
   onSelectSession,
   onNewSession,
   onDeleteSession,
+  onRenameSession,
   isOpen,
   onToggle
 }) => {
+  const [editingId, setEditingId] = useState4(null);
+  const [editingTitle, setEditingTitle] = useState4("");
+  const inputRef = useRef3(null);
+  useEffect3(() => {
+    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__ */ jsx2(
     "aside",
     {
@@ -1538,7 +1604,30 @@ var ChatSidebar = ({
             },
             children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" }, children: [
               /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
-                /* @__PURE__ */ jsx2(
+                editingId === session.id ? /* @__PURE__ */ jsx2(
+                  "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__ */ jsx2(
                   "div",
                   {
                     style: {
@@ -1564,31 +1653,57 @@ var ChatSidebar = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx2(
-                "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__ */ jsx2(IconSvg, { name: "delete-bin-line", size: 16, color: "var(--chatllm-text-muted, #9ca3af)" })
-                }
-              )
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "2px" }, children: [
+                onRenameSession && editingId !== session.id && /* @__PURE__ */ jsx2(
+                  "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__ */ jsx2(IconSvg, { name: "pencil-line", size: 16, color: "var(--chatllm-text-muted, #9ca3af)" })
+                  }
+                ),
+                /* @__PURE__ */ jsx2(
+                  "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__ */ jsx2(IconSvg, { name: "delete-bin-line", size: 16, color: "var(--chatllm-text-muted, #9ca3af)" })
+                  }
+                )
+              ] })
             ] })
           },
           session.id
@@ -1620,7 +1735,7 @@ var ChatSidebar = ({
 };
 
 // src/react/components/ChatHeader.tsx
-import { useState as useState4 } from "react";
+import { useState as useState5 } from "react";
 import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var ChatHeader = ({
   title,
@@ -1633,7 +1748,7 @@ var ChatHeader = ({
   showModelSelector = true,
   showSettings = true
 }) => {
-  const [modelDropdownOpen, setModelDropdownOpen] = useState4(false);
+  const [modelDropdownOpen, setModelDropdownOpen] = useState5(false);
   const currentModel = models.find((m) => m.id === model);
   return /* @__PURE__ */ jsxs2(
     "header",
@@ -1887,7 +2002,7 @@ var ChatHeader = ({
 };
 
 // src/react/components/ChatInput.tsx
-import { useRef as useRef3, useEffect as useEffect3, useState as useState5 } from "react";
+import { useRef as useRef4, useEffect as useEffect4, useState as useState6 } from "react";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var ChatInput = ({
   value,
@@ -1903,9 +2018,9 @@ var ChatInput = ({
   onActionSelect,
   actions = []
 }) => {
-  const textareaRef = useRef3(null);
-  const [actionMenuOpen, setActionMenuOpen] = useState5(false);
-  useEffect3(() => {
+  const textareaRef = useRef4(null);
+  const [actionMenuOpen, setActionMenuOpen] = useState6(false);
+  useEffect4(() => {
     if (textareaRef.current) {
       textareaRef.current.style.height = "auto";
       textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, 200)}px`;
@@ -2203,16 +2318,16 @@ var ChatInput = ({
 };
 
 // src/react/components/MessageList.tsx
-import { useRef as useRef4, useEffect as useEffect4, useCallback as useCallback4, useState as useState8 } from "react";
+import { useRef as useRef5, useEffect as useEffect5, useCallback as useCallback4, useState as useState9 } from "react";
 
 // src/react/components/MessageBubble.tsx
-import { useState as useState7 } from "react";
+import { useState as useState8 } from "react";
 
 // src/react/components/MarkdownRenderer.tsx
-import React4, { useMemo as useMemo2 } from "react";
+import React5, { useMemo as useMemo2 } from "react";
 
 // src/react/components/LinkChip.tsx
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var getDomain = (url) => {
   try {
@@ -2266,7 +2381,7 @@ var LinkChip = ({
   index,
   style
 }) => {
-  const [isHovered, setIsHovered] = useState6(false);
+  const [isHovered, setIsHovered] = useState7(false);
   const domain = getDomain(url);
   const shortName = getShortName(domain);
   const domainColor = getDomainColor(domain);
@@ -2561,7 +2676,7 @@ var MarkdownTable = ({ data }) => {
   );
 };
 var CodeBlock = ({ language, code }) => {
-  const [copied, setCopied] = React4.useState(false);
+  const [copied, setCopied] = React5.useState(false);
   const handleCopy = async () => {
     try {
       await navigator.clipboard.writeText(code);
@@ -2644,9 +2759,9 @@ var CodeBlock = ({ language, code }) => {
   );
 };
 var ImageWithCopyButton = ({ src, alt, imageKey }) => {
-  const [isHovered, setIsHovered] = React4.useState(false);
-  const [copyState, setCopyState] = React4.useState("idle");
-  const imgRef = React4.useRef(null);
+  const [isHovered, setIsHovered] = React5.useState(false);
+  const [copyState, setCopyState] = React5.useState("idle");
+  const imgRef = React5.useRef(null);
   const getImageBlob = async () => {
     const img = imgRef.current;
     if (img && img.complete && img.naturalWidth > 0) {
@@ -2862,7 +2977,7 @@ var ImageWithCopyButton = ({ src, alt, imageKey }) => {
   );
 };
 var ChoiceButtons = ({ choices, title, onChoiceClick }) => {
-  const [hoveredIndex, setHoveredIndex] = React4.useState(null);
+  const [hoveredIndex, setHoveredIndex] = React5.useState(null);
   return /* @__PURE__ */ jsxs5(
     "div",
     {
@@ -3083,7 +3198,7 @@ var MarkdownRenderer = ({ content, className, onChoiceClick }) => {
                 borderRadius: "0 8px 8px 0",
                 color: "var(--chatllm-text, #374151)"
               },
-              children: blockquoteLines.map((line, i) => /* @__PURE__ */ jsxs5(React4.Fragment, { children: [
+              children: blockquoteLines.map((line, i) => /* @__PURE__ */ jsxs5(React5.Fragment, { children: [
                 parseInlineElements(line, `bq-line-${i}`),
                 i < blockquoteLines.length - 1 && /* @__PURE__ */ jsx6("br", {})
               ] }, i))
@@ -3236,9 +3351,16 @@ var MarkdownRenderer = ({ content, className, onChoiceClick }) => {
           return;
         }
       }
-      elements.push(
-        /* @__PURE__ */ jsx6("p", { style: { margin: "4px 0" }, children: parseInlineElements(line, `p-${lineIndex}`) }, `p-${lineIndex}`)
-      );
+      const hasImage = IMAGE_REGEX.test(line);
+      if (hasImage) {
+        elements.push(
+          /* @__PURE__ */ jsx6("div", { style: { margin: "4px 0" }, children: parseInlineElements(line, `p-${lineIndex}`) }, `p-${lineIndex}`)
+        );
+      } else {
+        elements.push(
+          /* @__PURE__ */ jsx6("p", { style: { margin: "4px 0" }, children: parseInlineElements(line, `p-${lineIndex}`) }, `p-${lineIndex}`)
+        );
+      }
     });
     flushList();
     flushBlockquote();
@@ -3278,8 +3400,8 @@ var MessageBubble = ({
   nextAssistantMessage,
   onChoiceClick
 }) => {
-  const [showActions, setShowActions] = useState7(false);
-  const [showModelMenu, setShowModelMenu] = useState7(false);
+  const [showActions, setShowActions] = useState8(false);
+  const [showModelMenu, setShowModelMenu] = useState8(false);
   const isUser = message.role === "user";
   const isAssistant = message.role === "assistant";
   const relevantAlternatives = isUser ? alternatives : message.alternatives;
@@ -3672,11 +3794,11 @@ var MessageList = ({
   editingId,
   onChoiceClick
 }) => {
-  const messagesEndRef = useRef4(null);
-  const containerRef = useRef4(null);
-  const [selectedText, setSelectedText] = useState8("");
-  const [selectionPosition, setSelectionPosition] = useState8(null);
-  useEffect4(() => {
+  const messagesEndRef = useRef5(null);
+  const containerRef = useRef5(null);
+  const [selectedText, setSelectedText] = useState9("");
+  const [selectionPosition, setSelectionPosition] = useState9(null);
+  useEffect5(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
   const handleMouseUp = useCallback4(() => {
@@ -4056,7 +4178,7 @@ var EmptyState = ({
 };
 
 // src/react/components/MemoryPanel.tsx
-import { useState as useState9 } from "react";
+import { useState as useState10 } from "react";
 import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var categoryLabels = {
   context: "\uB300\uD654 \uCEE8\uD14D\uC2A4\uD2B8",
@@ -4078,8 +4200,8 @@ var MemoryPanel = ({
   isOpen,
   onToggle
 }) => {
-  const [expandedId, setExpandedId] = useState9(null);
-  const [activeTab, setActiveTab] = useState9("all");
+  const [expandedId, setExpandedId] = useState10(null);
+  const [activeTab, setActiveTab] = useState10("all");
   const filteredItems = activeTab === "all" ? items : items.filter((item) => item.category === activeTab);
   const formatDate2 = (timestamp) => {
     const date = new Date(timestamp);
@@ -4397,7 +4519,7 @@ var MemoryPanel = ({
 };
 
 // src/react/components/SettingsModal.tsx
-import { useState as useState10 } from "react";
+import { useState as useState11 } from "react";
 import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 var DEFAULT_PERSONALIZATION2 = {
   responseStyle: {
@@ -4422,8 +4544,8 @@ var SettingsModal = ({
   apiKeyLabel = "API Key",
   apiKeyDescription = "Cloud \uBAA8\uB378 \uC0AC\uC6A9\uC5D0 \uD544\uC694\uD569\uB2C8\uB2E4"
 }) => {
-  const [activeTab, setActiveTab] = useState10("general");
-  const [localApiKey, setLocalApiKey] = useState10(apiKey);
+  const [activeTab, setActiveTab] = useState11("general");
+  const [localApiKey, setLocalApiKey] = useState11(apiKey);
   if (!isOpen) return null;
   const updateResponseStyle = (key, value) => {
     onPersonalizationChange({
@@ -5029,9 +5151,11 @@ var ChatUI = ({
   className = "",
   onSendMessage,
   onSessionChange,
-  onError
+  onError,
+  onTitleChange,
+  generateTitle: generateTitle2
 }) => {
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     injectStyles();
   }, []);
   const hookOptions = {
@@ -5046,7 +5170,9 @@ var ChatUI = ({
     keepRecentMessages,
     onSendMessage,
     onSessionChange,
-    onError
+    onError,
+    onTitleChange,
+    generateTitle: generateTitle2
   };
   const {
     sessions,
@@ -5069,6 +5195,7 @@ var ChatUI = ({
     newSession,
     selectSession,
     deleteSession,
+    renameSession,
     setModel,
     toggleSidebar,
     openSettings,
@@ -5099,8 +5226,8 @@ var ChatUI = ({
   const handleChoiceClick = (choice) => {
     setInput(choice.text);
   };
-  const [memoryPanelOpen, setMemoryPanelOpen] = useState11(false);
-  const memoryItems = React9.useMemo(() => {
+  const [memoryPanelOpen, setMemoryPanelOpen] = useState12(false);
+  const memoryItems = React10.useMemo(() => {
     const items = [];
     if (currentSession?.contextSummary) {
       items.push({
@@ -5160,6 +5287,7 @@ var ChatUI = ({
             onSelectSession: selectSession,
             onNewSession: newSession,
             onDeleteSession: deleteSession,
+            onRenameSession: renameSession,
             isOpen: sidebarOpen,
             onToggle: toggleSidebar
           }