@gendive/chatllm 0.21.5 → 0.21.6

package/dist/react/index.mjs

@@ -2761,6 +2761,11 @@ ${projectMemoryContext}`);
 - \uB370\uC774\uD130 \uBE44\uAD50/\uCD94\uC774 \u2192 html (Chart.js CDN \uC0AC\uC6A9, <artifact> \uD0DC\uADF8)
 - \uC544\uC774\uCF58/\uB85C\uACE0/\uC77C\uB7EC\uC2A4\uD2B8 \u2192 svg
 
+**mermaid \uC8FC\uC758\uC0AC\uD56D:**
+- \uB178\uB4DC \uB77C\uBCA8\uC5D0 \uAD04\uD638 () \uC0AC\uC6A9 \uAE08\uC9C0 \u2192 \uB300\uAD04\uD638 [] \uC0AC\uC6A9: B[\uC0C1\uD0DC \uAD00\uB9AC useState] \u2705 B[\uC0C1\uD0DC \uAD00\uB9AC (useState)] \u274C
+- \uB178\uB4DC \uB77C\uBCA8\uC5D0 \uD2B9\uC218\uBB38\uC790\uAC00 \uC788\uC73C\uBA74 \uD070\uB530\uC634\uD45C\uB85C \uAC10\uC2F8\uAE30: B["API \uD638\uCD9C \u2192 \uC751\uB2F5"]
+- \uC18C\uAD04\uD638 ()\uB294 mermaid \uBB38\uBC95\uC5D0\uC11C \uB465\uADFC \uB178\uB4DC\uB97C \uC758\uBBF8\uD558\uBBC0\uB85C \uB77C\uBCA8 \uD14D\uC2A4\uD2B8\uC5D0 \uC808\uB300 \uD3EC\uD568\uD558\uC9C0 \uB9C8\uC138\uC694
+
 **mermaid \uC608\uC2DC:**
 \`\`\`mermaid
 graph TD
@@ -2785,7 +2790,7 @@ new Chart(document.getElementById('chart'), {
 - html \uC2DC\uAC01\uD654\uB294 \uBC18\uB4DC\uC2DC <artifact language="html"> \uD0DC\uADF8\uB85C \uAC10\uC2F8\uC57C \uD568 (\`\`\`html \uCF54\uB4DC\uBE14\uB85D \uC0AC\uC6A9 \uAE08\uC9C0)
 - \uC0AC\uC6A9\uC790\uAC00 \uC2DC\uAC01\uD654\uB97C \uC694\uCCAD\uD558\uC9C0 \uC54A\uC544\uB3C4 \uC801\uC808\uD558\uBA74 \uC790\uB3D9\uC73C\uB85C \uD3EC\uD568
 - \uC2DC\uAC01\uD654 \uC55E\uB4A4\uC5D0 \uAC04\uACB0\uD55C \uD14D\uC2A4\uD2B8 \uC124\uBA85 \uD3EC\uD568
-- mermaid \uBB38\uBC95 \uC624\uB958 \uC8FC\uC758 (\uD2B9\uD788 \uAD04\uD638, \uB530\uC634\uD45C \uC774\uC2A4\uCF00\uC774\uD504)`);
+- mermaid \uB178\uB4DC \uB77C\uBCA8\uC5D0 \uC18C\uAD04\uD638 () \uC808\uB300 \uC0AC\uC6A9 \uAE08\uC9C0 \u2014 \uD30C\uC2F1 \uC5D0\uB7EC \uC6D0\uC778`);
     if (shouldIncludeSkills) {
       const skillsPrompt = buildSkillsPrompt();
       if (skillsPrompt) {
@@ -3118,18 +3123,29 @@ ${newConversation}
       setIsSessionLoading(true);
       try {
         const sessionDetail = await onLoadSessionRef.current(id);
-        let loadedMessages = sessionDetail.messages.map((m, idx) => ({
-          id: m.id || generateId5("msg"),
-          role: typeof m.role === "string" ? m.role.toLowerCase() : m.role,
-          // API는 message 필드, 내부는 content 필드 사용
-          content: m.content || m.message || "",
-          timestamp: m.created_at ? new Date(m.created_at).getTime() : Date.now() - (sessionDetail.messages.length - idx) * 1e3,
-          model: m.model,
-          alternatives: m.alternatives,
-          sources: m.sources,
-          /** @Todo vibecode - 백엔드에서 전달받은 contentParts 복원 (이미지/파일 등) */
-          ...m.contentParts && { contentParts: m.contentParts }
-        }));
+        let loadedMessages = sessionDetail.messages.map((m, idx) => {
+          const msg = {
+            id: m.id || generateId5("msg"),
+            role: typeof m.role === "string" ? m.role.toLowerCase() : m.role,
+            // API는 message 필드, 내부는 content 필드 사용
+            content: m.content || m.message || "",
+            timestamp: m.created_at ? new Date(m.created_at).getTime() : Date.now() - (sessionDetail.messages.length - idx) * 1e3,
+            model: m.model,
+            alternatives: m.alternatives,
+            sources: m.sources,
+            /** @Todo vibecode - 백엔드에서 전달받은 contentParts 복원 (이미지/파일 등) */
+            ...m.contentParts && { contentParts: m.contentParts }
+          };
+          if (!msg.contentParts && msg.role === "assistant" && hasArtifactTag(msg.content)) {
+            const { artifacts, cleanContent } = parseArtifactsFromContent(msg.content);
+            if (artifacts.length > 0) {
+              const textPart = cleanContent.trim() ? [{ type: "text", content: cleanContent }] : [];
+              msg.content = cleanContent;
+              msg.contentParts = [...textPart, ...artifacts];
+            }
+          }
+          return msg;
+        });
         let resolvedTitle = sessionDetail.title;
         let resolvedSessionContext = sessionDetail.sessionContext;
         if (loadedMessages.length === 0) {
@@ -10203,9 +10219,39 @@ var MermaidArtifact = ({ code }) => {
     }
   );
 };
-var ArtifactActions = ({ code, language }) => {
+var svgToPngBlob = (svgString, scale = 2) => {
+  return new Promise((resolve) => {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(svgString, "image/svg+xml");
+    const svgEl = doc.querySelector("svg");
+    if (!svgEl) return resolve(null);
+    const w = parseInt(svgEl.getAttribute("width") || "800", 10);
+    const h = parseInt(svgEl.getAttribute("height") || "600", 10);
+    const canvas = document.createElement("canvas");
+    canvas.width = w * scale;
+    canvas.height = h * scale;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return resolve(null);
+    ctx.scale(scale, scale);
+    const blob = new Blob([new XMLSerializer().serializeToString(svgEl)], { type: "image/svg+xml;charset=utf-8" });
+    const url = URL.createObjectURL(blob);
+    const img = new Image();
+    img.onload = () => {
+      ctx.drawImage(img, 0, 0, w, h);
+      URL.revokeObjectURL(url);
+      canvas.toBlob((pngBlob) => resolve(pngBlob), "image/png");
+    };
+    img.onerror = () => {
+      URL.revokeObjectURL(url);
+      resolve(null);
+    };
+    img.src = url;
+  });
+};
+var ArtifactActions = ({ code, language, containerRef }) => {
   const [showCode, setShowCode] = useState15(false);
   const [copied, setCopied] = useState15(false);
+  const [saving, setSaving] = useState15(false);
   const handleCopy = async () => {
     try {
       await navigator.clipboard.writeText(code);
@@ -10214,6 +10260,39 @@ var ArtifactActions = ({ code, language }) => {
     } catch {
     }
   };
+  const handleSaveImage = async () => {
+    setSaving(true);
+    try {
+      let blob = null;
+      if (language === "svg" || language === "mermaid") {
+        const svgEl = containerRef?.current?.querySelector("svg");
+        if (svgEl) {
+          blob = await svgToPngBlob(svgEl.outerHTML);
+        }
+      } else if (language === "html") {
+        const htmlBlob = new Blob([code], { type: "text/html;charset=utf-8" });
+        const url = URL.createObjectURL(htmlBlob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = `artifact.html`;
+        a.click();
+        URL.revokeObjectURL(url);
+        setSaving(false);
+        return;
+      }
+      if (blob) {
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = `artifact.png`;
+        a.click();
+        URL.revokeObjectURL(url);
+      }
+    } catch {
+    } finally {
+      setSaving(false);
+    }
+  };
   const langLabel = language === "mermaid" ? "Mermaid" : language === "svg" ? "SVG" : "HTML";
   return /* @__PURE__ */ jsxs13("div", { children: [
     /* @__PURE__ */ jsxs13(
@@ -10279,6 +10358,30 @@ var ArtifactActions = ({ code, language }) => {
                 copied ? "\uBCF5\uC0AC\uB428" : "\uBCF5\uC0AC"
               ]
             }
+          ),
+          /* @__PURE__ */ jsxs13(
+            "button",
+            {
+              onClick: handleSaveImage,
+              disabled: saving,
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "4px",
+                padding: "4px 8px",
+                fontSize: "12px",
+                color: "var(--chatllm-text-muted, #64748b)",
+                backgroundColor: "transparent",
+                border: "none",
+                borderRadius: "4px",
+                cursor: saving ? "wait" : "pointer",
+                opacity: saving ? 0.5 : 1
+              },
+              children: [
+                /* @__PURE__ */ jsx14(IconSvg, { name: "download-line", size: 12, color: "var(--chatllm-text-muted, #64748b)" }),
+                language === "html" ? "HTML \uC800\uC7A5" : "\uC774\uBBF8\uC9C0 \uC800\uC7A5"
+              ]
+            }
           )
         ]
       }
@@ -10313,6 +10416,7 @@ var ArtifactActions = ({ code, language }) => {
   ] });
 };
 var ArtifactCard = ({ part, index = 0 }) => {
+  const contentRef = useRef9(null);
   return /* @__PURE__ */ jsxs13(
     "div",
     {
@@ -10352,12 +10456,12 @@ var ArtifactCard = ({ part, index = 0 }) => {
             ]
           }
         ),
-        /* @__PURE__ */ jsxs13("div", { style: { padding: part.language === "html" ? 0 : "12px" }, children: [
+        /* @__PURE__ */ jsxs13("div", { ref: contentRef, style: { padding: part.language === "html" ? 0 : "12px" }, children: [
           part.language === "html" && /* @__PURE__ */ jsx14(HtmlArtifact, { code: part.code }),
           part.language === "svg" && /* @__PURE__ */ jsx14(SvgArtifact, { code: part.code }),
           part.language === "mermaid" && /* @__PURE__ */ jsx14(MermaidArtifact, { code: part.code })
         ] }),
-        /* @__PURE__ */ jsx14(ArtifactActions, { code: part.code, language: part.language })
+        /* @__PURE__ */ jsx14(ArtifactActions, { code: part.code, language: part.language, containerRef: contentRef })
       ]
     }
   );
@@ -15196,6 +15300,7 @@ var useDragResize = (options) => {
   const dragStartRef = useRef11(null);
   const isDraggingRef = useRef11(false);
   const wasDragRef = useRef11(false);
+  const userDraggedRef = useRef11(false);
   const dragDeltaRef = useRef11({ dx: 0, dy: 0 });
   const fabElRef = useRef11(null);
   const dragCleanupRef = useRef11(null);
@@ -15262,6 +15367,7 @@ var useDragResize = (options) => {
       if (!isDraggingRef.current && distance > DRAG_THRESHOLD) {
         isDraggingRef.current = true;
         wasDragRef.current = true;
+        userDraggedRef.current = true;
         setIsDragging(true);
         fabElRef.current?.classList.add("chatllm-fab-dragging");
       }
@@ -15501,7 +15607,11 @@ var useDragResize = (options) => {
       const newVw = window.innerWidth;
       const newVh = window.innerHeight;
       setViewport({ width: newVw, height: newVh });
-      setFabPos((prev) => clampToViewport(prev.x, prev.y, newVw, newVh));
+      if (!userDraggedRef.current) {
+        setFabPos(getInitialFabPosition(initialPosition));
+      } else {
+        setFabPos((prev) => clampToViewport(prev.x, prev.y, newVw, newVh));
+      }
     };
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
@@ -17101,23 +17211,39 @@ var ChatFloatingWidget = ({
     return [chatTab, ...customTabs];
   }, [tabs]);
   const [unreadBadge, setUnreadBadge] = useState28(0);
-  const seenMessageIdsRef = useRef17(new Set(chatState.messages.map((m) => m.id)));
+  const seenMessageIdsRef = useRef17(/* @__PURE__ */ new Set());
   useEffect19(() => {
-    if (!isOpen) {
+    if (seenMessageIdsRef.current.size === 0 && chatState.messages.length > 0) {
+      for (const m of chatState.messages) {
+        seenMessageIdsRef.current.add(m.id);
+      }
+    }
+  }, [chatState.messages]);
+  useEffect19(() => {
+    if (isOpen) {
+      for (const m of chatState.messages) {
+        seenMessageIdsRef.current.add(m.id);
+      }
+    } else {
       const newAssistant = chatState.messages.filter(
         (m) => m.role === "assistant" && !seenMessageIdsRef.current.has(m.id)
       );
       if (newAssistant.length > 0) {
         setUnreadBadge((prev) => prev + newAssistant.length);
+        for (const m of newAssistant) {
+          seenMessageIdsRef.current.add(m.id);
+        }
       }
     }
-    for (const m of chatState.messages) {
-      seenMessageIdsRef.current.add(m.id);
-    }
   }, [chatState.messages, isOpen]);
   useEffect19(() => {
-    if (isOpen) setUnreadBadge(0);
-  }, [isOpen]);
+    if (isOpen) {
+      setUnreadBadge(0);
+      for (const m of chatState.messages) {
+        seenMessageIdsRef.current.add(m.id);
+      }
+    }
+  }, [isOpen, chatState.messages]);
   const totalBadge = useMemo7(() => {
     return tabs.reduce((sum, t) => sum + (t.badge || 0), 0) + unreadBadge;
   }, [tabs, unreadBadge]);
@@ -17553,6 +17679,57 @@ var useDeepResearch = (options) => {
   };
 };
 
+// src/react/utils/conversationSearchAdapter.ts
+var formatSearchResults = (results) => {
+  if (results.length === 0) {
+    return "\uAD00\uB828 \uB300\uD654\uB97C \uCC3E\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4.";
+  }
+  const formatted = results.map((r, i) => {
+    const header = r.sessionTitle ? `[${r.sessionTitle}]` : "";
+    const time = r.timestamp ? ` (${new Date(r.timestamp).toLocaleDateString("ko-KR")})` : "";
+    return `[${i + 1}] ${header}${time} (${r.role}): ${r.content}`;
+  }).join("\n\n");
+  return `\uAC80\uC0C9 \uACB0\uACFC (${results.length}\uAC74):
+
+${formatted}`;
+};
+var createConversationSearchSkill = (options) => {
+  const { onSearch, label, disabled } = options;
+  return {
+    description: '\uC774\uC804 \uB300\uD654 \uB0B4\uC6A9\uC744 \uAC80\uC0C9\uD569\uB2C8\uB2E4. \uBC18\uB4DC\uC2DC \uD638\uCD9C\uD574\uC57C \uD558\uB294 \uC0C1\uD669: \uC0AC\uC6A9\uC790\uAC00 "\uC804\uC5D0", "\uC9C0\uB09C\uBC88\uC5D0", "\uC608\uC804\uC5D0", "\uC544\uAE4C", "\uC774\uC804\uC5D0", "\uB2E4\uC2DC \uC54C\uB824\uC918", "\uB610", "\uADF8\uB54C" \uB4F1 \uACFC\uAC70 \uB300\uD654\uB97C \uCC38\uC870\uD558\uB294 \uD45C\uD604\uC744 \uC0AC\uC6A9\uD560 \uB54C. \uACFC\uAC70\uC5D0 \uB17C\uC758\uD588\uB358 \uC8FC\uC81C\uB97C \uB2E4\uC2DC \uBB3C\uC5B4\uBCFC \uB54C\uB3C4 \uD638\uCD9C\uD558\uC138\uC694.',
+    trigger: "auto",
+    label: label || "\uB300\uD654 \uAC80\uC0C9",
+    icon: "search-line",
+    disabled,
+    persist: false,
+    parameters: {
+      type: "object",
+      properties: {
+        query: {
+          type: "string",
+          description: "\uAC80\uC0C9 \uD0A4\uC6CC\uB4DC \uB610\uB294 \uBB38\uC7A5 (\uC0AC\uC6A9\uC790 \uC758\uB3C4\uB97C \uBC18\uC601\uD55C \uAC80\uC0C9\uC5B4)"
+        },
+        limit: {
+          type: "number",
+          description: "\uCD5C\uB300 \uACB0\uACFC \uC218 (\uAE30\uBCF8: 5)"
+        }
+      },
+      required: ["query"]
+    },
+    execute: async (params) => {
+      const { query, limit } = params;
+      if (!query) {
+        return { content: "\uAC80\uC0C9\uC5B4\uAC00 \uD544\uC694\uD569\uB2C8\uB2E4." };
+      }
+      const results = await onSearch(query, { limit: limit || 5 });
+      return {
+        content: formatSearchResults(results),
+        metadata: { resultCount: results.length }
+      };
+    }
+  };
+};
+
 // src/react/components/EmptyState.tsx
 import { jsx as jsx31, jsxs as jsxs30 } from "react/jsx-runtime";
 var EmptyState = ({
@@ -18068,6 +18245,7 @@ export {
   convertSkillsToOpenAITools,
   convertToolsToSkills,
   createAdvancedResearchSkill,
+  createConversationSearchSkill,
   createDeepResearchSkill,
   migrateSessionsToProjects,
   useChatUI,