@gendive/chatllm 0.21.3 → 0.21.5

package/dist/react/index.mjs

@@ -1,5 +1,5 @@
 // src/react/ChatUI.tsx
-import React16 from "react";
+import React17 from "react";
 
 // src/react/hooks/useChatUI.ts
 import { useState as useState6, useRef as useRef5, useCallback as useCallback6, useEffect as useEffect4, useMemo as useMemo3 } from "react";
@@ -1992,6 +1992,58 @@ var parseChecklistFromContent = (content) => {
   };
 };
 
+// src/react/utils/artifactParser.ts
+var ARTIFACT_LANGUAGE_VALUES = ["html", "svg", "mermaid"];
+var parseArtifactTags = (content) => {
+  const artifactRegex = /<artifact(?:\s+title=["']([^"']*)["'])?(?:\s+language=["']([^"']*)["'])?(?:\s+title=["']([^"']*)["'])?>([\s\S]*?)<\/artifact>/gi;
+  const artifacts = [];
+  let cleanContent = content;
+  let match;
+  while ((match = artifactRegex.exec(content)) !== null) {
+    const title = match[1] || match[3] || void 0;
+    const rawLanguage = (match[2] || "html").toLowerCase();
+    const language = ARTIFACT_LANGUAGE_VALUES.includes(
+      rawLanguage
+    ) ? rawLanguage : "html";
+    const code = match[4].trim();
+    if (code) {
+      artifacts.push({ type: "artifact", title, language, code });
+    }
+    cleanContent = cleanContent.replace(match[0], "");
+  }
+  return { artifacts, cleanContent };
+};
+var parseCodeBlockArtifacts = (content) => {
+  const codeBlockRegex = /```(mermaid|svg)\s*\n([\s\S]*?)```/gi;
+  const artifacts = [];
+  let cleanContent = content;
+  let match;
+  while ((match = codeBlockRegex.exec(content)) !== null) {
+    const rawLanguage = match[1].toLowerCase();
+    const language = ARTIFACT_LANGUAGE_VALUES.includes(
+      rawLanguage
+    ) ? rawLanguage : "html";
+    const code = match[2].trim();
+    if (code) {
+      artifacts.push({ type: "artifact", language, code });
+    }
+    cleanContent = cleanContent.replace(match[0], "");
+  }
+  return { artifacts, cleanContent };
+};
+var parseArtifactsFromContent = (content) => {
+  const tagResult = parseArtifactTags(content);
+  const codeBlockResult = parseCodeBlockArtifacts(tagResult.cleanContent);
+  const allArtifacts = [...tagResult.artifacts, ...codeBlockResult.artifacts];
+  const cleanContent = codeBlockResult.cleanContent.replace(/\n{3,}/g, "\n\n").trim();
+  return { artifacts: allArtifacts, cleanContent };
+};
+var hasArtifactTag = (content) => {
+  if (/<artifact[\s>]/i.test(content) && /<\/artifact>/i.test(content)) return true;
+  if (/```(?:mermaid|svg)\s*\n[\s\S]*?```/i.test(content)) return true;
+  return false;
+};
+
 // src/react/utils/contextRefParser.ts
 var parseContextRefs = (content) => {
   const refRegex = /<ref_context\s+id=["']([^"']+)["']\s*\/>/gi;
@@ -2693,6 +2745,47 @@ ${projectMemoryContext}`);
     const shouldIncludePoll = promptControl.includePoll !== false;
     const shouldIncludeChecklist = promptControl.includeChecklist !== false;
     const shouldIncludeCapabilityGuide = promptControl.includeCapabilityGuide !== false;
+    parts.push(`
+## \uC2DC\uAC01\uD654 \uAE30\uB2A5
+
+\uB370\uC774\uD130, \uD504\uB85C\uC138\uC2A4, \uAD6C\uC870\uB97C \uC124\uBA85\uD560 \uB54C \uC2DC\uAC01\uC801 \uD45C\uD604\uC774 \uB354 \uD6A8\uACFC\uC801\uC774\uBA74 \uC790\uB3D9\uC73C\uB85C \uC2DC\uAC01\uD654\uB97C \uC0DD\uC131\uD558\uC138\uC694.
+**\uC911\uC694: \uC808\uB300 ASCII art\uB098 \uC77C\uBC18 \uD14D\uC2A4\uD2B8 \uB2E4\uC774\uC5B4\uADF8\uB7A8\uC744 \uC0AC\uC6A9\uD558\uC9C0 \uB9C8\uC138\uC694.**
+
+**\uD615\uC2DD:**
+- mermaid, svg \u2192 \uB9C8\uD06C\uB2E4\uC6B4 \uCF54\uB4DC\uBE14\uB85D(\`\`\`mermaid, \`\`\`svg) \uC0AC\uC6A9
+- html (\uCC28\uD2B8/\uC778\uD130\uB799\uD2F0\uBE0C) \u2192 \uBC18\uB4DC\uC2DC <artifact> \uD0DC\uADF8 \uC0AC\uC6A9
+
+**\uC0AC\uC6A9 \uC2DC\uC810 (\uC790\uB3D9 \uD310\uB2E8):**
+- \uD504\uB85C\uC138\uC2A4/\uD750\uB984 \uC124\uBA85 \u2192 mermaid \uD50C\uB85C\uCC28\uD2B8
+- \uC2DC\uC2A4\uD15C \uAD6C\uC870/\uAD00\uACC4 \uC124\uBA85 \u2192 mermaid \uB2E4\uC774\uC5B4\uADF8\uB7A8
+- \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 \uC608\uC2DC:**
+\`\`\`mermaid
+graph TD
+  A[\uC2DC\uC791] --> B{\uC870\uAC74}
+  B -->|Yes| C[\uCC98\uB9AC]
+  B -->|No| D[\uC885\uB8CC]
+\`\`\`
+
+**html \uCC28\uD2B8 \uC608\uC2DC (<artifact> \uD0DC\uADF8 \uD544\uC218):**
+<artifact title="\uB9E4\uCD9C \uBE44\uAD50" language="html">
+<canvas id="chart" width="400" height="200"></canvas>
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<script>
+new Chart(document.getElementById('chart'), {
+  type: 'bar',
+  data: { labels: ['A','B','C'], datasets: [{ label: '\uB9E4\uCD9C', data: [10,20,30] }] }
+});
+</script>
+</artifact>
+
+**\uADDC\uCE59:**
+- 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)`);
     if (shouldIncludeSkills) {
       const skillsPrompt = buildSkillsPrompt();
       if (skillsPrompt) {
@@ -2738,6 +2831,7 @@ ${capabilityFeatures.join("\n\n")}
         const recentCount = msgCount - (session.compressionState.summaryAfterIndex || 0);
         if (recentCount <= 2) return true;
       }
+      if (enableChecklist && !autoExecuteChecklist && session.messages.some((m) => m.checklistBlock)) return true;
       return false;
     })();
     if (enablePoll && shouldIncludePoll) {
@@ -2915,7 +3009,7 @@ AI (\uD655\uC815):
   ref_step\uC740 1\uBD80\uD130 \uC2DC\uC791\uD558\uB294 \uB2E8\uACC4 \uBC88\uD638, ref_image="last"\uB294 \uAC00\uC7A5 \uCD5C\uADFC \uC774\uBBF8\uC9C0
 - \uBAA8\uB4E0 \uC18D\uC131\uC740 \uC120\uD0DD\uC0AC\uD56D\uC774\uBA70, \uD544\uC694\uD55C \uACBD\uC6B0\uC5D0\uB9CC \uC0AC\uC6A9\uD558\uC138\uC694`);
         } else {
-          parts.push(`## \uCCB4\uD06C\uB9AC\uC2A4\uD2B8: \uBCF5\uD569 \uC791\uC5C5 \uC2DC <checklist><step>\uC81C\uBAA9</step></checklist>\uB85C \uCD08\uC548 \uC81C\uC2DC \u2192 \uC720\uC800 \uD655\uC778/\uC218\uC815 \u2192 \uD655\uC815 <checklist> \uB2E4\uC2DC \uCD9C\uB825. \uB2E8\uC21C\uC778\uC0AC\xB7\uB2E8\uC77C\uC0AC\uC2E4\xB7\uB2E8\uC77C\uC791\uC5C5\uC740 \uBC14\uB85C \uB2F5\uBCC0`);
+          parts.push(`## \uCCB4\uD06C\uB9AC\uC2A4\uD2B8: \uBCF5\uD569 \uC791\uC5C5 \uC2DC <checklist><step>\uC81C\uBAA9</step></checklist>\uB85C \uCD08\uC548 \uC81C\uC2DC \u2192 \uC720\uC800 \uD655\uC778/\uC218\uC815 \u2192 \uD655\uC815 <checklist> \uB2E4\uC2DC \uCD9C\uB825. \uB2E8\uC21C\uC778\uC0AC\xB7\uB2E8\uC77C\uC0AC\uC2E4\xB7\uB2E8\uC77C\uC791\uC5C5\uC740 \uBC14\uB85C \uB2F5\uBCC0. **\uD544\uC218: \uC720\uC800\uAC00 \uC2B9\uC778("\uC751", "\uC9C4\uD589\uD574", "\uC88B\uC544" \uB4F1)\uD558\uBA74 \uD14D\uC2A4\uD2B8 \uC124\uBA85 \uC5C6\uC774 \uC989\uC2DC <checklist> \uD0DC\uADF8\uB97C \uB2E4\uC2DC \uCD9C\uB825\uD558\uC138\uC694.**`);
         }
       }
     }
@@ -4515,6 +4609,28 @@ ${stepSummary}
       } else {
         skipNextChecklistParsingRef.current = false;
       }
+      if (hasArtifactTag(accumulatedContent)) {
+        setSessions(
+          (prev) => prev.map((s) => {
+            if (s.id !== capturedSessionId) return s;
+            return {
+              ...s,
+              messages: s.messages.map((m) => {
+                if (m.id !== assistantMessageId) return m;
+                const { artifacts, cleanContent } = parseArtifactsFromContent(m.content);
+                if (artifacts.length === 0) return m;
+                const existingParts = m.contentParts || [];
+                const textPart = cleanContent.trim() ? [{ type: "text", content: cleanContent }] : [];
+                return {
+                  ...m,
+                  content: cleanContent,
+                  contentParts: [...textPart, ...existingParts.filter((p) => p.type !== "text" && p.type !== "artifact"), ...artifacts]
+                };
+              })
+            };
+          })
+        );
+      }
       setSessions(
         (prev) => prev.map((s) => {
           if (s.id !== capturedSessionId) return s;
@@ -5800,6 +5916,7 @@ var UNCLOSED_THINKING_TAG_REGEX = /<thinking>(?![\s\S]*?<\/thinking>)/gi;
 var UNCLOSED_POLL_TAG_REGEX = /<poll[^>]*>(?![\s\S]*?<\/poll>)[\s\S]*$/gi;
 var UNCLOSED_SKILL_TAG_REGEX = /<skill_use[^>]*>(?![\s\S]*?<\/skill_use>)[\s\S]*$/gi;
 var UNCLOSED_CHECKLIST_TAG_REGEX = /<checklist>(?![\s\S]*?<\/checklist>)[\s\S]*$/gi;
+var UNCLOSED_ARTIFACT_TAG_REGEX = /<artifact[^>]*>(?![\s\S]*?<\/artifact>)[\s\S]*$/gi;
 var INLINE_CODE_REGEX = /`([^`]+)`/g;
 var BOLD_REGEX = /\*\*([^*]+)\*\*/g;
 var ITALIC_REGEX = /(?<!\*)\*([^*]+)\*(?!\*)/g;
@@ -6712,6 +6829,9 @@ var MarkdownRenderer = ({
     processedContent = processedContent.replace(/<checklist>[\s\S]*?<\/checklist>/gi, "");
     processedContent = processedContent.replace(UNCLOSED_CHECKLIST_TAG_REGEX, "");
     UNCLOSED_CHECKLIST_TAG_REGEX.lastIndex = 0;
+    processedContent = processedContent.replace(/<artifact[^>]*>[\s\S]*?<\/artifact>/gi, "");
+    processedContent = processedContent.replace(UNCLOSED_ARTIFACT_TAG_REGEX, "");
+    UNCLOSED_ARTIFACT_TAG_REGEX.lastIndex = 0;
     const codeBlocks = [];
     processedContent = processedContent.replace(CODE_BLOCK_REGEX, (match, lang, code) => {
       if (lang === "markdown" || lang === "md") {
@@ -8714,10 +8834,10 @@ var iconButtonStyle = {
 };
 
 // src/react/components/MessageList.tsx
-import React13, { useRef as useRef9, useEffect as useEffect9, useCallback as useCallback9, useState as useState17 } from "react";
+import React14, { useRef as useRef10, useEffect as useEffect10, useCallback as useCallback10, useState as useState18 } from "react";
 
 // src/react/components/MessageBubble.tsx
-import { useState as useState16 } from "react";
+import { useState as useState17 } from "react";
 
 // src/react/components/DeepResearchProgressUI.tsx
 import React7 from "react";
@@ -9927,8 +10047,324 @@ var ToolStatusCard = ({
   ] });
 };
 
-// src/react/components/ContentPartRenderer.tsx
+// src/react/components/ArtifactCard.tsx
+import { useRef as useRef9, useEffect as useEffect9, useState as useState15, useCallback as useCallback8 } from "react";
 import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+var getThemeStyles = () => {
+  const root = document.documentElement;
+  const style = getComputedStyle(root);
+  const vars = [
+    "--chatllm-primary",
+    "--chatllm-text",
+    "--chatllm-text-muted",
+    "--chatllm-bg",
+    "--chatllm-bg-secondary",
+    "--chatllm-border"
+  ];
+  const cssVars = vars.map((v) => {
+    const val = style.getPropertyValue(v).trim();
+    return val ? `${v}: ${val};` : "";
+  }).filter(Boolean).join("\n    ");
+  return `
+  <style>
+    :root { ${cssVars} }
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      color: var(--chatllm-text, #1e293b);
+      background: transparent;
+      overflow: hidden;
+    }
+  </style>`;
+};
+var getAutoResizeScript = (id) => `
+<script>
+  const ro = new ResizeObserver(() => {
+    const h = document.documentElement.scrollHeight;
+    window.parent.postMessage({ type: 'artifact-resize', id: '${id}', height: h }, '*');
+  });
+  ro.observe(document.body);
+  window.addEventListener('load', () => {
+    window.parent.postMessage({ type: 'artifact-resize', id: '${id}', height: document.documentElement.scrollHeight }, '*');
+  });
+</script>`;
+var HtmlArtifact = ({ code }) => {
+  const iframeRef = useRef9(null);
+  const [height, setHeight] = useState15(200);
+  const artifactId = useRef9(`artifact-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`);
+  useEffect9(() => {
+    const id = artifactId.current;
+    const handleMessage = (e) => {
+      if (e.data?.type === "artifact-resize" && e.data.id === id && typeof e.data.height === "number") {
+        setHeight(Math.min(e.data.height + 2, 600));
+      }
+    };
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, []);
+  const srcdoc = `<!DOCTYPE html><html><head><meta charset="utf-8">${getThemeStyles()}</head><body>${code}${getAutoResizeScript(artifactId.current)}</body></html>`;
+  return /* @__PURE__ */ jsx14(
+    "iframe",
+    {
+      ref: iframeRef,
+      sandbox: "allow-scripts",
+      srcDoc: srcdoc,
+      title: "artifact",
+      style: {
+        width: "100%",
+        height: `${height}px`,
+        border: "none",
+        display: "block",
+        transition: "height 0.3s ease"
+      }
+    }
+  );
+};
+var sanitizeSvg = (svg) => {
+  return svg.replace(/<script[\s\S]*?<\/script>/gi, "").replace(/<script[^>]*\/>/gi, "").replace(/\bon\w+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]*)/gi, "").replace(/href\s*=\s*(?:"javascript:[^"]*"|'javascript:[^']*')/gi, "");
+};
+var SvgArtifact = ({ code }) => {
+  return /* @__PURE__ */ jsx14(
+    "div",
+    {
+      dangerouslySetInnerHTML: { __html: sanitizeSvg(code) },
+      style: {
+        width: "100%",
+        display: "flex",
+        justifyContent: "center",
+        overflow: "hidden"
+      }
+    }
+  );
+};
+var MermaidArtifact = ({ code }) => {
+  const containerRef = useRef9(null);
+  const [svgHtml, setSvgHtml] = useState15(null);
+  const [error, setError] = useState15(null);
+  const renderMermaid = useCallback8(async () => {
+    try {
+      let mermaid;
+      try {
+        mermaid = (await Function('return import("mermaid")')()).default;
+      } catch {
+        mermaid = (await Function('return import("https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs")')()).default;
+      }
+      mermaid.initialize({ startOnLoad: false, theme: "neutral" });
+      const id = `mermaid-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
+      const { svg } = await mermaid.render(id, code.trim());
+      setSvgHtml(svg);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Mermaid \uB80C\uB354\uB9C1 \uC2E4\uD328");
+    }
+  }, [code]);
+  useEffect9(() => {
+    renderMermaid();
+  }, [renderMermaid]);
+  if (error) {
+    return /* @__PURE__ */ jsx14(
+      "div",
+      {
+        style: {
+          padding: "12px",
+          fontSize: "13px",
+          color: "var(--chatllm-error, #ef4444)",
+          backgroundColor: "var(--chatllm-error-bg, #fef2f2)",
+          borderRadius: "6px"
+        },
+        children: error
+      }
+    );
+  }
+  if (!svgHtml) {
+    return /* @__PURE__ */ jsx14(
+      "div",
+      {
+        style: {
+          padding: "24px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: /* @__PURE__ */ jsx14(IconSvg, { name: "loader-4-line", size: 20, color: "var(--chatllm-text-muted, #94a3b8)" })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx14(
+    "div",
+    {
+      ref: containerRef,
+      dangerouslySetInnerHTML: { __html: svgHtml },
+      style: {
+        width: "100%",
+        display: "flex",
+        justifyContent: "center",
+        overflow: "auto"
+      }
+    }
+  );
+};
+var ArtifactActions = ({ code, language }) => {
+  const [showCode, setShowCode] = useState15(false);
+  const [copied, setCopied] = useState15(false);
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch {
+    }
+  };
+  const langLabel = language === "mermaid" ? "Mermaid" : language === "svg" ? "SVG" : "HTML";
+  return /* @__PURE__ */ jsxs13("div", { children: [
+    /* @__PURE__ */ jsxs13(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "4px",
+          padding: "6px 12px",
+          borderTop: "1px solid var(--chatllm-border, #e5e7eb)",
+          backgroundColor: "var(--chatllm-bg-secondary, #f9fafb)"
+        },
+        children: [
+          /* @__PURE__ */ jsxs13(
+            "button",
+            {
+              onClick: () => setShowCode(!showCode),
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "4px",
+                padding: "4px 8px",
+                fontSize: "12px",
+                color: "var(--chatllm-text-muted, #64748b)",
+                backgroundColor: showCode ? "var(--chatllm-bg-tertiary, #ededed)" : "transparent",
+                border: "none",
+                borderRadius: "4px",
+                cursor: "pointer"
+              },
+              children: [
+                /* @__PURE__ */ jsx14(IconSvg, { name: "code-s-slash-line", size: 12, color: "var(--chatllm-text-muted, #64748b)" }),
+                langLabel,
+                " \uCF54\uB4DC"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs13(
+            "button",
+            {
+              onClick: handleCopy,
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "4px",
+                padding: "4px 8px",
+                fontSize: "12px",
+                color: copied ? "var(--chatllm-success, #22c55e)" : "var(--chatllm-text-muted, #64748b)",
+                backgroundColor: "transparent",
+                border: "none",
+                borderRadius: "4px",
+                cursor: "pointer"
+              },
+              children: [
+                /* @__PURE__ */ jsx14(
+                  IconSvg,
+                  {
+                    name: copied ? "check-line" : "file-copy-line",
+                    size: 12,
+                    color: copied ? "var(--chatllm-success, #22c55e)" : "var(--chatllm-text-muted, #64748b)"
+                  }
+                ),
+                copied ? "\uBCF5\uC0AC\uB428" : "\uBCF5\uC0AC"
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    showCode && /* @__PURE__ */ jsx14(
+      "div",
+      {
+        style: {
+          maxHeight: "300px",
+          overflow: "auto",
+          borderTop: "1px solid var(--chatllm-border, #e5e7eb)"
+        },
+        children: /* @__PURE__ */ jsx14(
+          "pre",
+          {
+            style: {
+              margin: 0,
+              padding: "12px",
+              fontSize: "12px",
+              lineHeight: 1.5,
+              fontFamily: "'Fira Code', 'Consolas', monospace",
+              color: "var(--chatllm-text, #1e293b)",
+              backgroundColor: "var(--chatllm-bg-secondary, #f9fafb)",
+              whiteSpace: "pre-wrap",
+              wordBreak: "break-all"
+            },
+            children: code
+          }
+        )
+      }
+    )
+  ] });
+};
+var ArtifactCard = ({ part, index = 0 }) => {
+  return /* @__PURE__ */ jsxs13(
+    "div",
+    {
+      className: "chatllm-artifact-card",
+      style: {
+        borderRadius: "8px",
+        border: "1px solid var(--chatllm-border, #e5e7eb)",
+        overflow: "hidden",
+        backgroundColor: "var(--chatllm-bg, #ffffff)",
+        animationDelay: `${index * 300}ms`
+      },
+      children: [
+        part.title && /* @__PURE__ */ jsxs13(
+          "div",
+          {
+            style: {
+              padding: "8px 12px",
+              fontSize: "13px",
+              fontWeight: 600,
+              color: "var(--chatllm-text, #1e293b)",
+              backgroundColor: "var(--chatllm-bg-secondary, #f9fafb)",
+              borderBottom: "1px solid var(--chatllm-border, #e5e7eb)",
+              display: "flex",
+              alignItems: "center",
+              gap: "6px"
+            },
+            children: [
+              /* @__PURE__ */ jsx14(
+                IconSvg,
+                {
+                  name: "code-s-slash-line",
+                  size: 14,
+                  color: "var(--chatllm-text-muted, #64748b)"
+                }
+              ),
+              part.title
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs13("div", { 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 })
+      ]
+    }
+  );
+};
+
+// src/react/components/ContentPartRenderer.tsx
+import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 var ContentPartRenderer = ({
   parts,
   onChoiceClick,
@@ -9943,10 +10379,11 @@ var ContentPartRenderer = ({
       collectedSources.push(...part.results);
     }
   }
-  return /* @__PURE__ */ jsx14("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: parts.map((part, idx) => {
+  let artifactIndex = 0;
+  return /* @__PURE__ */ jsx15("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: parts.map((part, idx) => {
     switch (part.type) {
       case "text":
-        return /* @__PURE__ */ jsx14(
+        return /* @__PURE__ */ jsx15(
           MarkdownRenderer,
           {
             content: part.content,
@@ -9958,11 +10395,11 @@ var ContentPartRenderer = ({
           idx
         );
       case "image":
-        return /* @__PURE__ */ jsx14(ImageContentCard, { part }, idx);
+        return /* @__PURE__ */ jsx15(ImageContentCard, { part }, idx);
       case "file":
-        return /* @__PURE__ */ jsx14(FileContentCard, { part }, idx);
+        return /* @__PURE__ */ jsx15(FileContentCard, { part }, idx);
       case "search_result":
-        return /* @__PURE__ */ jsx14("div", { style: { display: "flex", flexWrap: "wrap", gap: "6px" }, children: part.results.map((source, si) => /* @__PURE__ */ jsx14(
+        return /* @__PURE__ */ jsx15("div", { style: { display: "flex", flexWrap: "wrap", gap: "6px" }, children: part.results.map((source, si) => /* @__PURE__ */ jsx15(
           LinkChip,
           {
             text: source.title,
@@ -9973,7 +10410,7 @@ var ContentPartRenderer = ({
           si
         )) }, idx);
       case "tool_loading":
-        return /* @__PURE__ */ jsx14(
+        return /* @__PURE__ */ jsx15(
           ToolStatusCard,
           {
             toolName: part.toolName,
@@ -9985,8 +10422,8 @@ var ContentPartRenderer = ({
       case "tool_result": {
         const { result } = part;
         const effectiveType = result.type !== "text" ? result.type : result.metadata?.type || result.metadata?.resultType || result.type;
-        return /* @__PURE__ */ jsxs13("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: [
-          /* @__PURE__ */ jsx14(
+        return /* @__PURE__ */ jsxs14("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: [
+          /* @__PURE__ */ jsx15(
             ToolStatusCard,
             {
               toolName: part.toolName,
@@ -9997,13 +10434,13 @@ var ContentPartRenderer = ({
               errorMessage: effectiveType === "error" ? result.content : void 0
             }
           ),
-          effectiveType === "image" && /* @__PURE__ */ jsx14(
+          effectiveType === "image" && /* @__PURE__ */ jsx15(
             ImageContentCard,
             {
               part: { type: "image", url: result.content, alt: result.metadata?.alt }
             }
           ),
-          effectiveType === "file" && /* @__PURE__ */ jsx14(
+          effectiveType === "file" && /* @__PURE__ */ jsx15(
             FileContentCard,
             {
               part: {
@@ -10016,8 +10453,10 @@ var ContentPartRenderer = ({
           )
         ] }, idx);
       }
+      case "artifact":
+        return /* @__PURE__ */ jsx15(ArtifactCard, { part, index: artifactIndex++ }, idx);
       case "error":
-        return /* @__PURE__ */ jsxs13(
+        return /* @__PURE__ */ jsxs14(
           "div",
           {
             style: {
@@ -10032,7 +10471,7 @@ var ContentPartRenderer = ({
               gap: "8px"
             },
             children: [
-              /* @__PURE__ */ jsx14(IconSvg, { name: "error-warning-line", size: 16, color: "var(--chatllm-error, #ef4444)" }),
+              /* @__PURE__ */ jsx15(IconSvg, { name: "error-warning-line", size: 16, color: "var(--chatllm-error, #ef4444)" }),
               part.message
             ]
           },
@@ -10045,8 +10484,8 @@ var ContentPartRenderer = ({
 };
 
 // src/react/components/ChecklistCard.tsx
-import { useState as useState15, useMemo as useMemo5 } from "react";
-import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+import { useState as useState16, useMemo as useMemo5 } from "react";
+import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
 var ChecklistCard = ({
   items,
   completed,
@@ -10055,7 +10494,7 @@ var ChecklistCard = ({
   onSkipStep,
   onStart
 }) => {
-  const [expandedItems, setExpandedItems] = useState15(/* @__PURE__ */ new Set());
+  const [expandedItems, setExpandedItems] = useState16(/* @__PURE__ */ new Set());
   const { doneCount, isRunning, hasError, isWaiting } = useMemo5(() => {
     const done = items.filter((it) => it.status === "done").length;
     const running = items.some((it) => it.status === "in_progress");
@@ -10078,7 +10517,7 @@ var ChecklistCard = ({
   const renderStatusIcon = (item) => {
     switch (item.status) {
       case "done":
-        return /* @__PURE__ */ jsx15(
+        return /* @__PURE__ */ jsx16(
           "div",
           {
             style: {
@@ -10091,11 +10530,11 @@ var ChecklistCard = ({
               justifyContent: "center",
               flexShrink: 0
             },
-            children: /* @__PURE__ */ jsx15(IconSvg, { name: "check-line", size: 13, color: "#fff" })
+            children: /* @__PURE__ */ jsx16(IconSvg, { name: "check-line", size: 13, color: "#fff" })
           }
         );
       case "in_progress":
-        return /* @__PURE__ */ jsx15(
+        return /* @__PURE__ */ jsx16(
           "div",
           {
             style: {
@@ -10109,11 +10548,11 @@ var ChecklistCard = ({
               flexShrink: 0,
               animation: "chatllm-checklist-pulse 1.5s ease-in-out infinite"
             },
-            children: /* @__PURE__ */ jsx15("div", { style: { width: "6px", height: "6px", borderRadius: "50%", backgroundColor: "#fff" } })
+            children: /* @__PURE__ */ jsx16("div", { style: { width: "6px", height: "6px", borderRadius: "50%", backgroundColor: "#fff" } })
           }
         );
       case "error":
-        return /* @__PURE__ */ jsx15(
+        return /* @__PURE__ */ jsx16(
           "div",
           {
             style: {
@@ -10126,11 +10565,11 @@ var ChecklistCard = ({
               justifyContent: "center",
               flexShrink: 0
             },
-            children: /* @__PURE__ */ jsx15(IconSvg, { name: "close-line", size: 13, color: "#fff" })
+            children: /* @__PURE__ */ jsx16(IconSvg, { name: "close-line", size: 13, color: "#fff" })
           }
         );
       default:
-        return /* @__PURE__ */ jsx15(
+        return /* @__PURE__ */ jsx16(
           "div",
           {
             style: {
@@ -10148,7 +10587,7 @@ var ChecklistCard = ({
   const headerText = completed ? "\uBAA8\uB4E0 \uB2E8\uACC4 \uC644\uB8CC" : hasError ? "\uC791\uC5C5 \uC911\uB2E8\uB428" : isRunning ? `\uC791\uC5C5 \uC9C4\uD589 \uC911 \xB7 ${doneCount}/${items.length}` : `\uB300\uAE30 \uC911 \xB7 ${doneCount}/${items.length}`;
   const headerColor = completed ? "var(--chatllm-success, #22c55e)" : hasError ? "var(--chatllm-error, #ef4444)" : "var(--chatllm-primary, #3584FA)";
   const progressBarColor = completed ? "var(--chatllm-success, #22c55e)" : "var(--chatllm-primary, #3584FA)";
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     "div",
     {
       style: {
@@ -10159,9 +10598,9 @@ var ChecklistCard = ({
         marginTop: "8px"
       },
       children: [
-        /* @__PURE__ */ jsxs14("div", { style: { padding: "14px 16px 10px" }, children: [
-          /* @__PURE__ */ jsxs14("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginBottom: "8px" }, children: [
-            /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsxs15("div", { style: { padding: "14px 16px 10px" }, children: [
+          /* @__PURE__ */ jsxs15("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginBottom: "8px" }, children: [
+            /* @__PURE__ */ jsx16(
               IconSvg,
               {
                 name: completed ? "checkbox-circle-line" : "list-check",
@@ -10169,9 +10608,9 @@ var ChecklistCard = ({
                 color: headerColor
               }
             ),
-            /* @__PURE__ */ jsx15("span", { style: { fontSize: "13px", fontWeight: 600, color: headerColor }, children: headerText })
+            /* @__PURE__ */ jsx16("span", { style: { fontSize: "13px", fontWeight: 600, color: headerColor }, children: headerText })
           ] }),
-          /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx16(
             "div",
             {
               style: {
@@ -10180,7 +10619,7 @@ var ChecklistCard = ({
                 borderRadius: "2px",
                 overflow: "hidden"
               },
-              children: /* @__PURE__ */ jsx15(
+              children: /* @__PURE__ */ jsx16(
                 "div",
                 {
                   style: {
@@ -10195,12 +10634,12 @@ var ChecklistCard = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx15("div", { children: items.map((item, idx) => {
+        /* @__PURE__ */ jsx16("div", { children: items.map((item, idx) => {
           const isExpanded = expandedItems.has(item.id);
           const canExpand = item.status === "done" && item.result && item.result !== "(\uAC74\uB108\uB700)";
           const isStopped = !isRunning && !completed;
-          return /* @__PURE__ */ jsxs14("div", { children: [
-            /* @__PURE__ */ jsxs14(
+          return /* @__PURE__ */ jsxs15("div", { children: [
+            /* @__PURE__ */ jsxs15(
               "div",
               {
                 onClick: () => canExpand && toggleExpanded(item.id),
@@ -10217,7 +10656,7 @@ var ChecklistCard = ({
                 },
                 children: [
                   renderStatusIcon(item),
-                  /* @__PURE__ */ jsxs14(
+                  /* @__PURE__ */ jsxs15(
                     "span",
                     {
                       style: {
@@ -10233,7 +10672,7 @@ var ChecklistCard = ({
                       ]
                     }
                   ),
-                  item.status === "error" && onRetryStep && /* @__PURE__ */ jsx15(
+                  item.status === "error" && onRetryStep && /* @__PURE__ */ jsx16(
                     "button",
                     {
                       onClick: (e) => {
@@ -10253,7 +10692,7 @@ var ChecklistCard = ({
                       children: "\uC7AC\uC2DC\uB3C4"
                     }
                   ),
-                  item.status === "pending" && isStopped && hasError && onSkipStep && /* @__PURE__ */ jsx15(
+                  item.status === "pending" && isStopped && hasError && onSkipStep && /* @__PURE__ */ jsx16(
                     "button",
                     {
                       onClick: (e) => {
@@ -10273,7 +10712,7 @@ var ChecklistCard = ({
                       children: "\uAC74\uB108\uB6F0\uAE30"
                     }
                   ),
-                  canExpand && /* @__PURE__ */ jsx15(
+                  canExpand && /* @__PURE__ */ jsx16(
                     IconSvg,
                     {
                       name: isExpanded ? "arrow-up-s-line" : "arrow-down-s-line",
@@ -10281,11 +10720,11 @@ var ChecklistCard = ({
                       color: "var(--chatllm-text-muted, #94a3b8)"
                     }
                   ),
-                  item.result === "(\uAC74\uB108\uB700)" && /* @__PURE__ */ jsx15("span", { style: { fontSize: "11px", color: "var(--chatllm-text-muted, #94a3b8)" }, children: "\uAC74\uB108\uB700" })
+                  item.result === "(\uAC74\uB108\uB700)" && /* @__PURE__ */ jsx16("span", { style: { fontSize: "11px", color: "var(--chatllm-text-muted, #94a3b8)" }, children: "\uAC74\uB108\uB700" })
                 ]
               }
             ),
-            canExpand && isExpanded && /* @__PURE__ */ jsxs14(
+            canExpand && isExpanded && /* @__PURE__ */ jsxs15(
               "div",
               {
                 className: "chatllm-scrollbar",
@@ -10301,7 +10740,7 @@ var ChecklistCard = ({
                   color: "var(--chatllm-text-secondary, #475569)"
                 },
                 children: [
-                  item.imageUrl && /* @__PURE__ */ jsx15(
+                  item.imageUrl && /* @__PURE__ */ jsx16(
                     "img",
                     {
                       src: item.imageUrl,
@@ -10313,13 +10752,13 @@ var ChecklistCard = ({
                       }
                     }
                   ),
-                  item.result && /* @__PURE__ */ jsx15(MarkdownRenderer, { content: item.result })
+                  item.result && /* @__PURE__ */ jsx16(MarkdownRenderer, { content: item.result })
                 ]
               }
             )
           ] }, item.id);
         }) }),
-        /* @__PURE__ */ jsxs14(
+        /* @__PURE__ */ jsxs15(
           "div",
           {
             style: {
@@ -10330,13 +10769,13 @@ var ChecklistCard = ({
               borderTop: "1px solid var(--chatllm-border, #e5e7eb)"
             },
             children: [
-              /* @__PURE__ */ jsxs14("span", { style: { fontSize: "12px", color: "var(--chatllm-text-muted, #94a3b8)" }, children: [
+              /* @__PURE__ */ jsxs15("span", { style: { fontSize: "12px", color: "var(--chatllm-text-muted, #94a3b8)" }, children: [
                 doneCount,
                 "/",
                 items.length,
                 " \uC644\uB8CC"
               ] }),
-              isWaiting && !completed && onStart && /* @__PURE__ */ jsx15(
+              isWaiting && !completed && onStart && /* @__PURE__ */ jsx16(
                 "button",
                 {
                   onClick: onStart,
@@ -10354,7 +10793,7 @@ var ChecklistCard = ({
                   children: "\uC2E4\uD589"
                 }
               ),
-              isRunning && onAbort && /* @__PURE__ */ jsx15(
+              isRunning && onAbort && /* @__PURE__ */ jsx16(
                 "button",
                 {
                   onClick: onAbort,
@@ -10393,7 +10832,7 @@ var ChecklistMiniIndicator = ({
   const statusText = completed ? "\uBAA8\uB4E0 \uB2E8\uACC4 \uC644\uB8CC" : hasError ? "\uC791\uC5C5 \uC911\uB2E8\uB428" : isRunning ? `\uC791\uC5C5 \uC9C4\uD589 \uC911 \xB7 ${doneCount}/${items.length}` : `\uB300\uAE30 \uC911 \xB7 ${items.length}\uB2E8\uACC4`;
   const statusColor = completed ? "var(--chatllm-success, #22c55e)" : hasError ? "var(--chatllm-error, #ef4444)" : "var(--chatllm-primary, #3584FA)";
   const barColor = completed ? "var(--chatllm-success, #22c55e)" : "var(--chatllm-primary, #3584FA)";
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     "div",
     {
       style: {
@@ -10404,13 +10843,13 @@ var ChecklistMiniIndicator = ({
         } : {}
       },
       children: [
-        isWaiting && onStart && /* @__PURE__ */ jsx15("style", { children: `
+        isWaiting && onStart && /* @__PURE__ */ jsx16("style", { children: `
           @keyframes chatllm-checklist-pending-pulse {
             0%, 100% { box-shadow: 0 0 0 0 rgba(53, 132, 250, 0.15); }
             50% { box-shadow: 0 0 0 4px rgba(53, 132, 250, 0.15); }
           }
         ` }),
-        /* @__PURE__ */ jsxs14(
+        /* @__PURE__ */ jsxs15(
           "div",
           {
             onClick: isWaiting ? void 0 : onClick,
@@ -10426,7 +10865,7 @@ var ChecklistMiniIndicator = ({
               transition: "border-color 0.15s ease, background-color 0.15s ease"
             },
             children: [
-              /* @__PURE__ */ jsx15(
+              /* @__PURE__ */ jsx16(
                 IconSvg,
                 {
                   name: completed ? "checkbox-circle-line" : "list-check",
@@ -10434,7 +10873,7 @@ var ChecklistMiniIndicator = ({
                   color: statusColor
                 }
               ),
-              /* @__PURE__ */ jsx15(
+              /* @__PURE__ */ jsx16(
                 "span",
                 {
                   style: {
@@ -10446,7 +10885,7 @@ var ChecklistMiniIndicator = ({
                   children: statusText
                 }
               ),
-              !isWaiting && /* @__PURE__ */ jsx15(
+              !isWaiting && /* @__PURE__ */ jsx16(
                 "div",
                 {
                   style: {
@@ -10457,7 +10896,7 @@ var ChecklistMiniIndicator = ({
                     overflow: "hidden",
                     minWidth: "60px"
                   },
-                  children: /* @__PURE__ */ jsx15(
+                  children: /* @__PURE__ */ jsx16(
                     "div",
                     {
                       style: {
@@ -10471,8 +10910,8 @@ var ChecklistMiniIndicator = ({
                   )
                 }
               ),
-              isWaiting && onStart && /* @__PURE__ */ jsxs14("div", { style: { display: "flex", gap: "6px", marginLeft: "auto" }, children: [
-                /* @__PURE__ */ jsx15(
+              isWaiting && onStart && /* @__PURE__ */ jsxs15("div", { style: { display: "flex", gap: "6px", marginLeft: "auto" }, children: [
+                /* @__PURE__ */ jsx16(
                   "span",
                   {
                     style: {
@@ -10484,7 +10923,7 @@ var ChecklistMiniIndicator = ({
                     children: "\uC218\uC815\uD558\uB824\uBA74 \uBA54\uC2DC\uC9C0\uB97C \uBCF4\uB0B4\uC138\uC694"
                   }
                 ),
-                /* @__PURE__ */ jsx15(
+                /* @__PURE__ */ jsx16(
                   "button",
                   {
                     onClick: (e) => {
@@ -10507,7 +10946,7 @@ var ChecklistMiniIndicator = ({
                   }
                 )
               ] }),
-              !isWaiting && onClick && /* @__PURE__ */ jsx15(
+              !isWaiting && onClick && /* @__PURE__ */ jsx16(
                 IconSvg,
                 {
                   name: "arrow-right-line",
@@ -10524,7 +10963,7 @@ var ChecklistMiniIndicator = ({
 };
 
 // src/react/components/MessageBubble.tsx
-import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
 var MessageBubble = ({
   message,
   isLoading,
@@ -10553,9 +10992,9 @@ var MessageBubble = ({
   onToggleChecklistPanel,
   onChecklistStart
 }) => {
-  const [showActions, setShowActions] = useState16(false);
-  const [showModelMenu, setShowModelMenu] = useState16(false);
-  const [stepExpanded, setStepExpanded] = useState16(false);
+  const [showActions, setShowActions] = useState17(false);
+  const [showModelMenu, setShowModelMenu] = useState17(false);
+  const [stepExpanded, setStepExpanded] = useState17(false);
   const isUser = message.role === "user";
   const isAssistant = message.role === "assistant";
   const relevantAlternatives = isUser ? alternatives : message.alternatives;
@@ -10567,14 +11006,14 @@ var MessageBubble = ({
   const displaySources = isAssistant && relevantAlternatives && relevantAlternatives.length > 0 && relevantActiveIndex > 0 ? relevantAlternatives[relevantActiveIndex - 1]?.sources : message.sources;
   if (isAssistant && message.checklistStepInfo) {
     const { step, total, title } = message.checklistStepInfo;
-    return /* @__PURE__ */ jsxs15(
+    return /* @__PURE__ */ jsxs16(
       "div",
       {
         style: {
           padding: "2px 24px"
         },
         children: [
-          /* @__PURE__ */ jsxs15(
+          /* @__PURE__ */ jsxs16(
             "div",
             {
               onClick: () => setStepExpanded(!stepExpanded),
@@ -10591,7 +11030,7 @@ var MessageBubble = ({
                 marginLeft: "44px"
               },
               children: [
-                /* @__PURE__ */ jsx16(
+                /* @__PURE__ */ jsx17(
                   IconSvg,
                   {
                     name: "checkbox-circle-line",
@@ -10599,7 +11038,7 @@ var MessageBubble = ({
                     color: "var(--chatllm-success, #22c55e)"
                   }
                 ),
-                /* @__PURE__ */ jsxs15("span", { style: {
+                /* @__PURE__ */ jsxs16("span", { style: {
                   flex: 1,
                   fontSize: "13px",
                   color: "var(--chatllm-text-secondary, #475569)"
@@ -10610,7 +11049,7 @@ var MessageBubble = ({
                   "\uB2E8\uACC4: ",
                   title
                 ] }),
-                /* @__PURE__ */ jsx16(
+                /* @__PURE__ */ jsx17(
                   IconSvg,
                   {
                     name: stepExpanded ? "arrow-up-s-line" : "arrow-down-s-line",
@@ -10621,7 +11060,7 @@ var MessageBubble = ({
               ]
             }
           ),
-          stepExpanded && /* @__PURE__ */ jsx16(
+          stepExpanded && /* @__PURE__ */ jsx17(
             "div",
             {
               className: "chatllm-sheet",
@@ -10631,7 +11070,7 @@ var MessageBubble = ({
                 marginLeft: "44px",
                 maxWidth: "calc(100% - 44px)"
               },
-              children: /* @__PURE__ */ jsx16("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsx16(MarkdownRenderer, { content: displayContent }) })
+              children: /* @__PURE__ */ jsx17("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsx17(MarkdownRenderer, { content: displayContent }) })
             }
           )
         ]
@@ -10639,7 +11078,7 @@ var MessageBubble = ({
     );
   }
   if (isUser) {
-    return /* @__PURE__ */ jsxs15(
+    return /* @__PURE__ */ jsxs16(
       "div",
       {
         className: "chatllm-message chatllm-message--user",
@@ -10652,7 +11091,7 @@ var MessageBubble = ({
         onMouseEnter: () => setShowActions(true),
         onMouseLeave: () => setShowActions(false),
         children: [
-          /* @__PURE__ */ jsx16(
+          /* @__PURE__ */ jsx17(
             "div",
             {
               style: {
@@ -10662,9 +11101,9 @@ var MessageBubble = ({
                 borderRadius: "16px",
                 borderTopRightRadius: "4px"
               },
-              children: message.contentParts?.length ? /* @__PURE__ */ jsx16("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: message.contentParts.map((part, idx) => {
+              children: message.contentParts?.length ? /* @__PURE__ */ jsx17("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: message.contentParts.map((part, idx) => {
                 if (part.type === "text") {
-                  return /* @__PURE__ */ jsx16(
+                  return /* @__PURE__ */ jsx17(
                     "div",
                     {
                       style: {
@@ -10679,7 +11118,7 @@ var MessageBubble = ({
                   );
                 }
                 if (part.type === "image") {
-                  return /* @__PURE__ */ jsx16(
+                  return /* @__PURE__ */ jsx17(
                     "img",
                     {
                       src: part.url,
@@ -10695,7 +11134,7 @@ var MessageBubble = ({
                   );
                 }
                 if (part.type === "file") {
-                  return /* @__PURE__ */ jsxs15(
+                  return /* @__PURE__ */ jsxs16(
                     "div",
                     {
                       style: {
@@ -10709,15 +11148,15 @@ var MessageBubble = ({
                         color: "var(--chatllm-text)"
                       },
                       children: [
-                        /* @__PURE__ */ jsx16(IconSvg, { name: "file-text-line", size: 16, color: "var(--chatllm-text-muted)" }),
-                        /* @__PURE__ */ jsx16("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: part.name })
+                        /* @__PURE__ */ jsx17(IconSvg, { name: "file-text-line", size: 16, color: "var(--chatllm-text-muted)" }),
+                        /* @__PURE__ */ jsx17("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: part.name })
                       ]
                     },
                     idx
                   );
                 }
                 return null;
-              }) }) : /* @__PURE__ */ jsx16(
+              }) }) : /* @__PURE__ */ jsx17(
                 "div",
                 {
                   style: {
@@ -10731,7 +11170,7 @@ var MessageBubble = ({
               )
             }
           ),
-          !isLoading && /* @__PURE__ */ jsxs15(
+          !isLoading && /* @__PURE__ */ jsxs16(
             "div",
             {
               style: {
@@ -10743,7 +11182,7 @@ var MessageBubble = ({
                 transition: "opacity 0.15s ease"
               },
               children: [
-                /* @__PURE__ */ jsx16("button", { onClick: onCopy, style: actionButtonSmallStyle, title: "\uBCF5\uC0AC", children: /* @__PURE__ */ jsx16(
+                /* @__PURE__ */ jsx17("button", { onClick: onCopy, style: actionButtonSmallStyle, title: "\uBCF5\uC0AC", children: /* @__PURE__ */ jsx17(
                   IconSvg,
                   {
                     name: isCopied ? "check-line" : "file-copy-line",
@@ -10751,7 +11190,7 @@ var MessageBubble = ({
                     color: isCopied ? "var(--chatllm-success)" : "var(--chatllm-text-muted)"
                   }
                 ) }),
-                /* @__PURE__ */ jsx16("button", { onClick: onEdit, style: actionButtonSmallStyle, title: "\uC218\uC815", children: /* @__PURE__ */ jsx16(IconSvg, { name: "edit-line", size: 12, color: "var(--chatllm-text-muted)" }) })
+                /* @__PURE__ */ jsx17("button", { onClick: onEdit, style: actionButtonSmallStyle, title: "\uC218\uC815", children: /* @__PURE__ */ jsx17(IconSvg, { name: "edit-line", size: 12, color: "var(--chatllm-text-muted)" }) })
               ]
             }
           )
@@ -10759,7 +11198,7 @@ var MessageBubble = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
       className: "chatllm-message chatllm-message--assistant",
@@ -10772,7 +11211,7 @@ var MessageBubble = ({
       onMouseEnter: () => setShowActions(true),
       onMouseLeave: () => setShowActions(false),
       children: [
-        /* @__PURE__ */ jsxs15(
+        /* @__PURE__ */ jsxs16(
           "div",
           {
             className: "chatllm-sheet",
@@ -10783,7 +11222,7 @@ var MessageBubble = ({
               gap: "12px"
             },
             children: [
-              /* @__PURE__ */ jsx16("div", { style: { flexShrink: 0 }, children: assistantIcon || /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsx17("div", { style: { flexShrink: 0 }, children: assistantIcon || /* @__PURE__ */ jsx17(
                 "div",
                 {
                   style: {
@@ -10796,11 +11235,11 @@ var MessageBubble = ({
                     justifyContent: "center",
                     color: "var(--chatllm-primary)"
                   },
-                  children: /* @__PURE__ */ jsx16(IconSvg, { name: "magic-line", size: 20 })
+                  children: /* @__PURE__ */ jsx17(IconSvg, { name: "magic-line", size: 20 })
                 }
               ) }),
-              /* @__PURE__ */ jsxs15("div", { style: { flex: 1, minWidth: 0 }, children: [
-                displayModel && /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsxs16("div", { style: { flex: 1, minWidth: 0 }, children: [
+                displayModel && /* @__PURE__ */ jsx17(
                   "div",
                   {
                     style: {
@@ -10809,7 +11248,7 @@ var MessageBubble = ({
                       gap: "8px",
                       marginBottom: "8px"
                     },
-                    children: /* @__PURE__ */ jsx16(
+                    children: /* @__PURE__ */ jsx17(
                       "span",
                       {
                         style: {
@@ -10824,9 +11263,9 @@ var MessageBubble = ({
                     )
                   }
                 ),
-                message.isDeepResearch && message.researchProgress && message.researchProgress.phase !== "done" && /* @__PURE__ */ jsx16(DeepResearchProgressUI, { progress: message.researchProgress }),
-                message.skillExecution && message.skillExecution.status !== "done" && (message.skillExecution.progress?.subAgents ? /* @__PURE__ */ jsx16(DeepResearchProgressUI, { progress: message.skillExecution.progress }) : /* @__PURE__ */ jsx16(SkillProgressUI, { execution: message.skillExecution })),
-                message.isDeepResearch && displayContent && /* @__PURE__ */ jsxs15(
+                message.isDeepResearch && message.researchProgress && message.researchProgress.phase !== "done" && /* @__PURE__ */ jsx17(DeepResearchProgressUI, { progress: message.researchProgress }),
+                message.skillExecution && message.skillExecution.status !== "done" && (message.skillExecution.progress?.subAgents ? /* @__PURE__ */ jsx17(DeepResearchProgressUI, { progress: message.skillExecution.progress }) : /* @__PURE__ */ jsx17(SkillProgressUI, { execution: message.skillExecution })),
+                message.isDeepResearch && displayContent && /* @__PURE__ */ jsxs16(
                   "div",
                   {
                     className: "chatllm-deep-research__header",
@@ -10839,8 +11278,8 @@ var MessageBubble = ({
                       borderBottom: "1px solid var(--chatllm-border-light)"
                     },
                     children: [
-                      /* @__PURE__ */ jsx16(IconSvg, { name: "search-eye-line", size: 18, color: "var(--chatllm-primary)" }),
-                      /* @__PURE__ */ jsx16(
+                      /* @__PURE__ */ jsx17(IconSvg, { name: "search-eye-line", size: 18, color: "var(--chatllm-primary)" }),
+                      /* @__PURE__ */ jsx17(
                         "span",
                         {
                           style: {
@@ -10851,7 +11290,7 @@ var MessageBubble = ({
                           children: "\uC2EC\uCE35\uC5F0\uAD6C"
                         }
                       ),
-                      displaySources && displaySources.length > 0 && /* @__PURE__ */ jsxs15(
+                      displaySources && displaySources.length > 0 && /* @__PURE__ */ jsxs16(
                         "span",
                         {
                           className: "chatllm-deep-research__source-count",
@@ -10873,7 +11312,7 @@ var MessageBubble = ({
                     ]
                   }
                 ),
-                !!message.contentParts?.length && /* @__PURE__ */ jsx16("div", { style: { wordBreak: "break-word" }, children: /* @__PURE__ */ jsx16(
+                !!message.contentParts?.length && /* @__PURE__ */ jsx17("div", { style: { wordBreak: "break-word" }, children: /* @__PURE__ */ jsx17(
                   ContentPartRenderer,
                   {
                     parts: message.contentParts,
@@ -10884,13 +11323,13 @@ var MessageBubble = ({
                 ) }),
                 isLoading && !displayContent && !message.isDeepResearch && (message.contentParts?.length ? (
                   /* contentParts 있을 때: 간소화된 AI 응답 대기 표시 */
-                  /* @__PURE__ */ jsxs15("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginTop: "4px" }, children: [
-                    /* @__PURE__ */ jsxs15("div", { style: { display: "flex", gap: "4px", alignItems: "center" }, children: [
-                      /* @__PURE__ */ jsx16("span", { className: "chatllm-dot-bounce", style: dotStyle }),
-                      /* @__PURE__ */ jsx16("span", { className: "chatllm-dot-bounce", style: dotStyle }),
-                      /* @__PURE__ */ jsx16("span", { className: "chatllm-dot-bounce", style: dotStyle })
+                  /* @__PURE__ */ jsxs16("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginTop: "4px" }, children: [
+                    /* @__PURE__ */ jsxs16("div", { style: { display: "flex", gap: "4px", alignItems: "center" }, children: [
+                      /* @__PURE__ */ jsx17("span", { className: "chatllm-dot-bounce", style: dotStyle }),
+                      /* @__PURE__ */ jsx17("span", { className: "chatllm-dot-bounce", style: dotStyle }),
+                      /* @__PURE__ */ jsx17("span", { className: "chatllm-dot-bounce", style: dotStyle })
                     ] }),
-                    /* @__PURE__ */ jsx16(
+                    /* @__PURE__ */ jsx17(
                       "span",
                       {
                         style: {
@@ -10905,14 +11344,14 @@ var MessageBubble = ({
                   ] })
                 ) : (
                   /* contentParts 없을 때: 풀 스켈레톤 */
-                  /* @__PURE__ */ jsxs15("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
-                    /* @__PURE__ */ jsxs15("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [
-                      /* @__PURE__ */ jsxs15("div", { style: { display: "flex", gap: "4px", alignItems: "center" }, children: [
-                        /* @__PURE__ */ jsx16("span", { className: "chatllm-dot-bounce", style: dotStyle }),
-                        /* @__PURE__ */ jsx16("span", { className: "chatllm-dot-bounce", style: dotStyle }),
-                        /* @__PURE__ */ jsx16("span", { className: "chatllm-dot-bounce", style: dotStyle })
+                  /* @__PURE__ */ jsxs16("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+                    /* @__PURE__ */ jsxs16("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [
+                      /* @__PURE__ */ jsxs16("div", { style: { display: "flex", gap: "4px", alignItems: "center" }, children: [
+                        /* @__PURE__ */ jsx17("span", { className: "chatllm-dot-bounce", style: dotStyle }),
+                        /* @__PURE__ */ jsx17("span", { className: "chatllm-dot-bounce", style: dotStyle }),
+                        /* @__PURE__ */ jsx17("span", { className: "chatllm-dot-bounce", style: dotStyle })
                       ] }),
-                      /* @__PURE__ */ jsx16(
+                      /* @__PURE__ */ jsx17(
                         "span",
                         {
                           style: {
@@ -10925,17 +11364,17 @@ var MessageBubble = ({
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ jsxs15("div", { className: "chatllm-skeleton-pulse", style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
-                      /* @__PURE__ */ jsx16("div", { style: { height: "32px", width: "75%", backgroundColor: "var(--chatllm-bg-tertiary)", borderRadius: "8px" } }),
-                      /* @__PURE__ */ jsxs15("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
-                        /* @__PURE__ */ jsx16("div", { style: { height: "16px", width: "100%", backgroundColor: "var(--chatllm-bg-secondary)", borderRadius: "4px" } }),
-                        /* @__PURE__ */ jsx16("div", { style: { height: "16px", width: "85%", backgroundColor: "var(--chatllm-bg-secondary)", borderRadius: "4px" } }),
-                        /* @__PURE__ */ jsx16("div", { style: { height: "16px", width: "65%", backgroundColor: "var(--chatllm-bg-secondary)", borderRadius: "4px" } })
+                    /* @__PURE__ */ jsxs16("div", { className: "chatllm-skeleton-pulse", style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
+                      /* @__PURE__ */ jsx17("div", { style: { height: "32px", width: "75%", backgroundColor: "var(--chatllm-bg-tertiary)", borderRadius: "8px" } }),
+                      /* @__PURE__ */ jsxs16("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
+                        /* @__PURE__ */ jsx17("div", { style: { height: "16px", width: "100%", backgroundColor: "var(--chatllm-bg-secondary)", borderRadius: "4px" } }),
+                        /* @__PURE__ */ jsx17("div", { style: { height: "16px", width: "85%", backgroundColor: "var(--chatllm-bg-secondary)", borderRadius: "4px" } }),
+                        /* @__PURE__ */ jsx17("div", { style: { height: "16px", width: "65%", backgroundColor: "var(--chatllm-bg-secondary)", borderRadius: "4px" } })
                       ] })
                     ] })
                   ] })
                 )),
-                displayContent ? /* @__PURE__ */ jsx16("div", { style: { wordBreak: "break-word" }, children: /* @__PURE__ */ jsx16(
+                displayContent ? /* @__PURE__ */ jsx17("div", { className: isLoading ? "chatllm-streaming-content" : "", style: { wordBreak: "break-word" }, children: /* @__PURE__ */ jsx17(
                   MarkdownRenderer,
                   {
                     content: displayContent,
@@ -10944,7 +11383,30 @@ var MessageBubble = ({
                     thinkingDefaultOpen
                   }
                 ) }) : null,
-                message.pollBlock && message.pollBlock.questions.length > 0 && /* @__PURE__ */ jsx16(
+                isLoading && message.content && /<artifact[^>]*>(?![\s\S]*?<\/artifact>)/i.test(message.content) && /* @__PURE__ */ jsxs16(
+                  "div",
+                  {
+                    className: "chatllm-artifact-loading",
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "10px",
+                      padding: "14px 16px",
+                      marginTop: "8px",
+                      borderRadius: "8px",
+                      border: "1px solid var(--chatllm-border, #e5e7eb)",
+                      backgroundColor: "var(--chatllm-bg-secondary, #f9fafb)"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx17(IconSvg, { name: "loader-4-line", size: 18, color: "var(--chatllm-primary, #6366f1)" }),
+                      /* @__PURE__ */ jsx17("span", { style: {
+                        fontSize: "13px",
+                        color: "var(--chatllm-text-muted, #64748b)"
+                      }, children: "\uC2DC\uAC01\uD654 \uC0DD\uC131 \uC911..." })
+                    ]
+                  }
+                ),
+                message.pollBlock && message.pollBlock.questions.length > 0 && /* @__PURE__ */ jsx17(
                   PollCard,
                   {
                     questions: message.pollBlock.questions,
@@ -10956,7 +11418,7 @@ var MessageBubble = ({
                     }
                   }
                 ),
-                message.checklistBlock && message.checklistBlock.items.length > 0 && /* @__PURE__ */ jsx16(
+                message.checklistBlock && message.checklistBlock.items.length > 0 && /* @__PURE__ */ jsx17(
                   ChecklistMiniIndicator,
                   {
                     items: message.checklistBlock.items,
@@ -10965,7 +11427,7 @@ var MessageBubble = ({
                     onStart: onChecklistStart
                   }
                 ),
-                !isLoading && !displayContent && !message.pollBlock && !message.checklistBlock && !message.contentParts?.length && /* @__PURE__ */ jsx16(
+                !isLoading && !displayContent && !message.pollBlock && !message.checklistBlock && !message.contentParts?.length && /* @__PURE__ */ jsx17(
                   "div",
                   {
                     style: {
@@ -10978,7 +11440,7 @@ var MessageBubble = ({
                     children: "\uC751\uB2F5\uC744 \uC0DD\uC131\uD558\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4. \uB2E4\uC2DC \uC2DC\uB3C4\uD574 \uC8FC\uC138\uC694."
                   }
                 ),
-                displaySources && displaySources.length > 0 && /* @__PURE__ */ jsxs15(
+                displaySources && displaySources.length > 0 && /* @__PURE__ */ jsxs16(
                   "div",
                   {
                     style: {
@@ -10990,7 +11452,7 @@ var MessageBubble = ({
                       borderTop: "1px solid var(--chatllm-border-light)"
                     },
                     children: [
-                      /* @__PURE__ */ jsx16(
+                      /* @__PURE__ */ jsx17(
                         "span",
                         {
                           style: {
@@ -11002,7 +11464,7 @@ var MessageBubble = ({
                           children: "\uCD9C\uCC98:"
                         }
                       ),
-                      displaySources.map((source, index) => /* @__PURE__ */ jsx16(
+                      displaySources.map((source, index) => /* @__PURE__ */ jsx17(
                         LinkChip,
                         {
                           text: source.title,
@@ -11015,7 +11477,7 @@ var MessageBubble = ({
                     ]
                   }
                 ),
-                relevantAlternatives && relevantAlternatives.length > 0 && /* @__PURE__ */ jsxs15(
+                relevantAlternatives && relevantAlternatives.length > 0 && /* @__PURE__ */ jsxs16(
                   "div",
                   {
                     style: {
@@ -11029,8 +11491,8 @@ var MessageBubble = ({
                       fontSize: "12px"
                     },
                     children: [
-                      /* @__PURE__ */ jsx16("span", { style: { color: "var(--chatllm-text-muted)", marginRight: "4px" }, children: displayModel || "\uBAA8\uB378" }),
-                      /* @__PURE__ */ jsx16(
+                      /* @__PURE__ */ jsx17("span", { style: { color: "var(--chatllm-text-muted)", marginRight: "4px" }, children: displayModel || "\uBAA8\uB378" }),
+                      /* @__PURE__ */ jsx17(
                         "button",
                         {
                           onClick: () => onAlternativeChange?.(Math.max(0, relevantActiveIndex - 1)),
@@ -11040,15 +11502,15 @@ var MessageBubble = ({
                             opacity: relevantActiveIndex === 0 ? 0.5 : 1,
                             cursor: relevantActiveIndex === 0 ? "not-allowed" : "pointer"
                           },
-                          children: /* @__PURE__ */ jsx16(IconSvg, { name: "arrow-left-line", size: 12 })
+                          children: /* @__PURE__ */ jsx17(IconSvg, { name: "arrow-left-line", size: 12 })
                         }
                       ),
-                      /* @__PURE__ */ jsxs15("span", { style: { color: "var(--chatllm-text-secondary)" }, children: [
+                      /* @__PURE__ */ jsxs16("span", { style: { color: "var(--chatllm-text-secondary)" }, children: [
                         relevantActiveIndex + 1,
                         " / ",
                         relevantAlternatives.length + 1
                       ] }),
-                      /* @__PURE__ */ jsx16(
+                      /* @__PURE__ */ jsx17(
                         "button",
                         {
                           onClick: () => onAlternativeChange?.(Math.min(relevantAlternatives.length, relevantActiveIndex + 1)),
@@ -11058,13 +11520,13 @@ var MessageBubble = ({
                             opacity: relevantActiveIndex === relevantAlternatives.length ? 0.5 : 1,
                             cursor: relevantActiveIndex === relevantAlternatives.length ? "not-allowed" : "pointer"
                           },
-                          children: /* @__PURE__ */ jsx16(IconSvg, { name: "arrow-right-line", size: 12 })
+                          children: /* @__PURE__ */ jsx17(IconSvg, { name: "arrow-right-line", size: 12 })
                         }
                       )
                     ]
                   }
                 ),
-                isLoadingAlternative && /* @__PURE__ */ jsxs15(
+                isLoadingAlternative && /* @__PURE__ */ jsxs16(
                   "div",
                   {
                     style: {
@@ -11079,12 +11541,12 @@ var MessageBubble = ({
                       color: "var(--chatllm-primary, #3584FA)"
                     },
                     children: [
-                      /* @__PURE__ */ jsxs15("div", { style: { display: "flex", gap: "4px", alignItems: "center" }, children: [
-                        /* @__PURE__ */ jsx16("span", { className: "chatllm-dot-bounce", style: dotStyle }),
-                        /* @__PURE__ */ jsx16("span", { className: "chatllm-dot-bounce", style: dotStyle }),
-                        /* @__PURE__ */ jsx16("span", { className: "chatllm-dot-bounce", style: dotStyle })
+                      /* @__PURE__ */ jsxs16("div", { style: { display: "flex", gap: "4px", alignItems: "center" }, children: [
+                        /* @__PURE__ */ jsx17("span", { className: "chatllm-dot-bounce", style: dotStyle }),
+                        /* @__PURE__ */ jsx17("span", { className: "chatllm-dot-bounce", style: dotStyle }),
+                        /* @__PURE__ */ jsx17("span", { className: "chatllm-dot-bounce", style: dotStyle })
                       ] }),
-                      /* @__PURE__ */ jsx16("span", { style: { fontWeight: 500 }, children: "\uB2E4\uB978 \uBAA8\uB378 \uC751\uB2F5 \uC0DD\uC131 \uC911..." })
+                      /* @__PURE__ */ jsx17("span", { style: { fontWeight: 500 }, children: "\uB2E4\uB978 \uBAA8\uB378 \uC751\uB2F5 \uC0DD\uC131 \uC911..." })
                     ]
                   }
                 )
@@ -11092,7 +11554,7 @@ var MessageBubble = ({
             ]
           }
         ),
-        !isLoading && /* @__PURE__ */ jsxs15(
+        !isLoading && /* @__PURE__ */ jsxs16(
           "div",
           {
             style: {
@@ -11105,7 +11567,7 @@ var MessageBubble = ({
               transition: "opacity 0.15s ease"
             },
             children: [
-              /* @__PURE__ */ jsx16("button", { onClick: onCopy, style: actionButtonSmallStyle, title: "\uBCF5\uC0AC", children: /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsx17("button", { onClick: onCopy, style: actionButtonSmallStyle, title: "\uBCF5\uC0AC", children: /* @__PURE__ */ jsx17(
                 IconSvg,
                 {
                   name: isCopied ? "check-line" : "file-copy-line",
@@ -11113,19 +11575,19 @@ var MessageBubble = ({
                   color: isCopied ? "var(--chatllm-success)" : "var(--chatllm-text-muted)"
                 }
               ) }),
-              onExport && /* @__PURE__ */ jsx16("button", { onClick: () => onExport("markdown"), style: actionButtonSmallStyle, title: "MD \uB2E4\uC6B4\uB85C\uB4DC", children: /* @__PURE__ */ jsx16(IconSvg, { name: "download-line", size: 12, color: "var(--chatllm-text-muted)" }) }),
-              onRegenerate && /* @__PURE__ */ jsx16("button", { onClick: onRegenerate, style: actionButtonSmallStyle, title: "\uB2E4\uC2DC \uC0DD\uC131", children: /* @__PURE__ */ jsx16(IconSvg, { name: "refresh-line", size: 12, color: "var(--chatllm-text-muted)" }) }),
-              onAskOtherModel && otherModels.length > 0 && /* @__PURE__ */ jsxs15("div", { style: { position: "relative" }, children: [
-                /* @__PURE__ */ jsx16(
+              onExport && /* @__PURE__ */ jsx17("button", { onClick: () => onExport("markdown"), style: actionButtonSmallStyle, title: "MD \uB2E4\uC6B4\uB85C\uB4DC", children: /* @__PURE__ */ jsx17(IconSvg, { name: "download-line", size: 12, color: "var(--chatllm-text-muted)" }) }),
+              onRegenerate && /* @__PURE__ */ jsx17("button", { onClick: onRegenerate, style: actionButtonSmallStyle, title: "\uB2E4\uC2DC \uC0DD\uC131", children: /* @__PURE__ */ jsx17(IconSvg, { name: "refresh-line", size: 12, color: "var(--chatllm-text-muted)" }) }),
+              onAskOtherModel && otherModels.length > 0 && /* @__PURE__ */ jsxs16("div", { style: { position: "relative" }, children: [
+                /* @__PURE__ */ jsx17(
                   "button",
                   {
                     onClick: () => setShowModelMenu(!showModelMenu),
                     style: actionButtonSmallStyle,
                     title: "\uB2E4\uB978 \uBAA8\uB378\uC5D0\uAC8C \uC9C8\uBB38",
-                    children: /* @__PURE__ */ jsx16(IconSvg, { name: "robot-line", size: 12, color: "var(--chatllm-text-muted)" })
+                    children: /* @__PURE__ */ jsx17(IconSvg, { name: "robot-line", size: 12, color: "var(--chatllm-text-muted)" })
                   }
                 ),
-                showModelMenu && /* @__PURE__ */ jsx16(
+                showModelMenu && /* @__PURE__ */ jsx17(
                   ModelMenu,
                   {
                     models: otherModels,
@@ -11144,7 +11606,7 @@ var MessageBubble = ({
     }
   );
 };
-var ModelMenu = ({ models, onSelect, onClose }) => /* @__PURE__ */ jsxs15(
+var ModelMenu = ({ models, onSelect, onClose }) => /* @__PURE__ */ jsxs16(
   "div",
   {
     style: {
@@ -11162,7 +11624,7 @@ var ModelMenu = ({ models, onSelect, onClose }) => /* @__PURE__ */ jsxs15(
     },
     onMouseLeave: onClose,
     children: [
-      /* @__PURE__ */ jsx16(
+      /* @__PURE__ */ jsx17(
         "div",
         {
           style: {
@@ -11177,7 +11639,7 @@ var ModelMenu = ({ models, onSelect, onClose }) => /* @__PURE__ */ jsxs15(
           children: "\uB2E4\uB978 \uBAA8\uB378\uC5D0\uAC8C \uC9C8\uBB38"
         }
       ),
-      models.map((model) => /* @__PURE__ */ jsxs15(
+      models.map((model) => /* @__PURE__ */ jsxs16(
         "button",
         {
           onClick: () => onSelect(model.id),
@@ -11202,9 +11664,9 @@ var ModelMenu = ({ models, onSelect, onClose }) => /* @__PURE__ */ jsxs15(
             e.currentTarget.style.backgroundColor = "transparent";
           },
           children: [
-            /* @__PURE__ */ jsx16(IconSvg, { name: "robot-line", size: 16, color: "var(--chatllm-primary)" }),
-            /* @__PURE__ */ jsx16("span", { style: { flex: 1, fontWeight: 500 }, children: model.name }),
-            model.provider && /* @__PURE__ */ jsx16(
+            /* @__PURE__ */ jsx17(IconSvg, { name: "robot-line", size: 16, color: "var(--chatllm-primary)" }),
+            /* @__PURE__ */ jsx17("span", { style: { flex: 1, fontWeight: 500 }, children: model.name }),
+            model.provider && /* @__PURE__ */ jsx17(
               "span",
               {
                 style: {
@@ -11253,7 +11715,7 @@ var navButtonStyle = {
 };
 
 // src/react/components/MessageList.tsx
-import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
 var MessageList = ({
   messages,
   isLoading,
@@ -11283,14 +11745,14 @@ var MessageList = ({
   onExport,
   onToggleChecklistPanel
 }) => {
-  const messagesEndRef = useRef9(null);
-  const containerRef = useRef9(null);
-  const [selectedText, setSelectedText] = useState17("");
-  const [selectionPosition, setSelectionPosition] = useState17(null);
-  const [showScrollButton, setShowScrollButton] = useState17(false);
-  const userScrollLockRef = useRef9(false);
+  const messagesEndRef = useRef10(null);
+  const containerRef = useRef10(null);
+  const [selectedText, setSelectedText] = useState18("");
+  const [selectionPosition, setSelectionPosition] = useState18(null);
+  const [showScrollButton, setShowScrollButton] = useState18(false);
+  const userScrollLockRef = useRef10(false);
   const SCROLL_THRESHOLD = 100;
-  useEffect9(() => {
+  useEffect10(() => {
     const container = containerRef.current;
     if (!container) return;
     const handleWheel = (e) => {
@@ -11327,7 +11789,7 @@ var MessageList = ({
       container.removeEventListener("touchmove", handleTouchMove);
     };
   }, []);
-  const handleScroll = useCallback9(() => {
+  const handleScroll = useCallback10(() => {
     if (!containerRef.current) return;
     const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
     const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
@@ -11336,14 +11798,14 @@ var MessageList = ({
       setShowScrollButton(false);
     }
   }, []);
-  useEffect9(() => {
+  useEffect10(() => {
     if (userScrollLockRef.current) return;
     containerRef.current?.scrollTo({
       top: containerRef.current.scrollHeight,
       behavior: "smooth"
     });
   }, [messages]);
-  const scrollToBottom = useCallback9(() => {
+  const scrollToBottom = useCallback10(() => {
     userScrollLockRef.current = false;
     setShowScrollButton(false);
     containerRef.current?.scrollTo({
@@ -11351,7 +11813,7 @@ var MessageList = ({
       behavior: "smooth"
     });
   }, []);
-  const handleMouseUp = useCallback9(() => {
+  const handleMouseUp = useCallback10(() => {
     const selection = typeof window !== "undefined" ? window.getSelection() : null;
     const text = selection?.toString().trim();
     if (text && text.length > 0) {
@@ -11385,7 +11847,7 @@ var MessageList = ({
       }
     }
   };
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17(
     "div",
     {
       ref: containerRef,
@@ -11400,7 +11862,7 @@ var MessageList = ({
       onScroll: handleScroll,
       onMouseUp: handleMouseUp,
       children: [
-        /* @__PURE__ */ jsxs16(
+        /* @__PURE__ */ jsxs17(
           "div",
           {
             style: {
@@ -11415,7 +11877,7 @@ var MessageList = ({
                 const nextAssistant = message.role === "user" && index + 1 < messages.length ? messages[index + 1] : null;
                 const assistantForAlts = nextAssistant?.role === "assistant" ? nextAssistant : null;
                 const activeAltIndex = assistantForAlts ? activeAlternatives[assistantForAlts.id] ?? 0 : 0;
-                const bubbleElement = /* @__PURE__ */ jsx17(
+                const bubbleElement = /* @__PURE__ */ jsx18(
                   MessageBubble,
                   {
                     message,
@@ -11452,13 +11914,13 @@ var MessageList = ({
                   },
                   message.id
                 );
-                return renderMessage ? /* @__PURE__ */ jsx17(React13.Fragment, { children: renderMessage(message, bubbleElement) }, message.id) : bubbleElement;
+                return renderMessage ? /* @__PURE__ */ jsx18(React14.Fragment, { children: renderMessage(message, bubbleElement) }, message.id) : bubbleElement;
               }),
-              /* @__PURE__ */ jsx17("div", { ref: messagesEndRef })
+              /* @__PURE__ */ jsx18("div", { ref: messagesEndRef })
             ]
           }
         ),
-        showScrollButton && /* @__PURE__ */ jsx17(
+        showScrollButton && /* @__PURE__ */ jsx18(
           "button",
           {
             onClick: scrollToBottom,
@@ -11481,10 +11943,10 @@ var MessageList = ({
               zIndex: 10,
               transition: "opacity 0.2s"
             },
-            children: /* @__PURE__ */ jsx17(IconSvg, { name: "arrow-down-s-line", size: 24, color: "var(--chatllm-text-secondary)" })
+            children: /* @__PURE__ */ jsx18(IconSvg, { name: "arrow-down-s-line", size: 24, color: "var(--chatllm-text-secondary)" })
           }
         ),
-        selectionPosition && /* @__PURE__ */ jsxs16(
+        selectionPosition && /* @__PURE__ */ jsxs17(
           "div",
           {
             style: {
@@ -11496,7 +11958,7 @@ var MessageList = ({
               pointerEvents: "auto"
             },
             children: [
-              /* @__PURE__ */ jsxs16(
+              /* @__PURE__ */ jsxs17(
                 "button",
                 {
                   onClick: handleQuote,
@@ -11516,12 +11978,12 @@ var MessageList = ({
                     whiteSpace: "nowrap"
                   },
                   children: [
-                    /* @__PURE__ */ jsx17(IconSvg, { name: "double-quotes-l", size: 16, color: "#ffffff" }),
+                    /* @__PURE__ */ jsx18(IconSvg, { name: "double-quotes-l", size: 16, color: "#ffffff" }),
                     "\uC778\uC6A9\uD558\uAE30"
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx17(
+              /* @__PURE__ */ jsx18(
                 "div",
                 {
                   style: {
@@ -11546,8 +12008,8 @@ var MessageList = ({
 };
 
 // src/react/components/SettingsModal.tsx
-import { useState as useState18, useEffect as useEffect10 } from "react";
-import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
+import { useState as useState19, useEffect as useEffect11 } from "react";
+import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
 var DEFAULT_IMPORT_MEMORY_PROMPT = `Export all of my stored memories and any context you've learned about me from past conversations. Preserve my words verbatim where possible, especially for instructions and preferences.
 
 ## Categories (output in this order):
@@ -11611,9 +12073,9 @@ var SettingsModal = ({
   onImportMemory,
   importMemoryPrompt
 }) => {
-  const [activeTab, setActiveTab] = useState18("general");
-  const [localApiKey, setLocalApiKey] = useState18(apiKey);
-  useEffect10(() => {
+  const [activeTab, setActiveTab] = useState19("general");
+  const [localApiKey, setLocalApiKey] = useState19(apiKey);
+  useEffect11(() => {
     setLocalApiKey(apiKey);
   }, [apiKey]);
   if (!isOpen) return null;
@@ -11639,7 +12101,7 @@ var SettingsModal = ({
     setLocalApiKey(value);
     onApiKeyChange?.(value);
   };
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     "div",
     {
       className: "chatllm-settings-overlay",
@@ -11653,7 +12115,7 @@ var SettingsModal = ({
         zIndex: 1e3
       },
       onClick: onClose,
-      children: /* @__PURE__ */ jsxs17(
+      children: /* @__PURE__ */ jsxs18(
         "div",
         {
           className: "chatllm-settings-modal",
@@ -11671,7 +12133,7 @@ var SettingsModal = ({
           },
           onClick: (e) => e.stopPropagation(),
           children: [
-            /* @__PURE__ */ jsxs17(
+            /* @__PURE__ */ jsxs18(
               "div",
               {
                 style: {
@@ -11682,7 +12144,7 @@ var SettingsModal = ({
                   flexDirection: "column"
                 },
                 children: [
-                  /* @__PURE__ */ jsx18("div", { style: { padding: "16px", borderBottom: "1px solid var(--chatllm-border, #e5e7eb)" }, children: /* @__PURE__ */ jsx18(
+                  /* @__PURE__ */ jsx19("div", { style: { padding: "16px", borderBottom: "1px solid var(--chatllm-border, #e5e7eb)" }, children: /* @__PURE__ */ jsx19(
                     "button",
                     {
                       onClick: onClose,
@@ -11696,11 +12158,11 @@ var SettingsModal = ({
                         alignItems: "center",
                         justifyContent: "center"
                       },
-                      children: /* @__PURE__ */ jsx18(IconSvg, { name: "close-line", size: 20, color: "var(--chatllm-text-muted, #6b7280)" })
+                      children: /* @__PURE__ */ jsx19(IconSvg, { name: "close-line", size: 20, color: "var(--chatllm-text-muted, #6b7280)" })
                     }
                   ) }),
-                  /* @__PURE__ */ jsxs17("nav", { style: { flex: 1, padding: "8px" }, children: [
-                    /* @__PURE__ */ jsx18(
+                  /* @__PURE__ */ jsxs18("nav", { style: { flex: 1, padding: "8px" }, children: [
+                    /* @__PURE__ */ jsx19(
                       TabButton,
                       {
                         active: activeTab === "general",
@@ -11709,7 +12171,7 @@ var SettingsModal = ({
                         label: "\uC77C\uBC18"
                       }
                     ),
-                    /* @__PURE__ */ jsx18(
+                    /* @__PURE__ */ jsx19(
                       TabButton,
                       {
                         active: activeTab === "personalization",
@@ -11718,7 +12180,7 @@ var SettingsModal = ({
                         label: "\uAC1C\uC778 \uB9DE\uCDA4 \uC124\uC815"
                       }
                     ),
-                    showMemoryTab && /* @__PURE__ */ jsx18(
+                    showMemoryTab && /* @__PURE__ */ jsx19(
                       TabButton,
                       {
                         active: activeTab === "memory",
@@ -11727,7 +12189,7 @@ var SettingsModal = ({
                         label: "AI \uBA54\uBAA8\uB9AC"
                       }
                     ),
-                    showMemoryTab && enableProjects && /* @__PURE__ */ jsx18(
+                    showMemoryTab && enableProjects && /* @__PURE__ */ jsx19(
                       TabButton,
                       {
                         active: activeTab === "project-memory",
@@ -11736,7 +12198,7 @@ var SettingsModal = ({
                         label: "\uD504\uB85C\uC81D\uD2B8 \uBA54\uBAA8\uB9AC"
                       }
                     ),
-                    /* @__PURE__ */ jsx18(
+                    /* @__PURE__ */ jsx19(
                       TabButton,
                       {
                         active: activeTab === "data",
@@ -11749,24 +12211,24 @@ var SettingsModal = ({
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs17("div", { style: { flex: 1, overflow: "auto", padding: "24px" }, children: [
-              activeTab === "general" && /* @__PURE__ */ jsxs17("div", { children: [
-                /* @__PURE__ */ jsx18("h2", { style: { fontSize: "20px", fontWeight: 600, marginBottom: "24px", color: "var(--chatllm-text, #1f2937)" }, children: "\uC77C\uBC18" }),
-                /* @__PURE__ */ jsx18(SettingRow, { label: "\uC5B8\uC5B4", children: /* @__PURE__ */ jsxs17(
+            /* @__PURE__ */ jsxs18("div", { style: { flex: 1, overflow: "auto", padding: "24px" }, children: [
+              activeTab === "general" && /* @__PURE__ */ jsxs18("div", { children: [
+                /* @__PURE__ */ jsx19("h2", { style: { fontSize: "20px", fontWeight: 600, marginBottom: "24px", color: "var(--chatllm-text, #1f2937)" }, children: "\uC77C\uBC18" }),
+                /* @__PURE__ */ jsx19(SettingRow, { label: "\uC5B8\uC5B4", children: /* @__PURE__ */ jsxs18(
                   "select",
                   {
                     value: personalization.language,
                     onChange: (e) => onPersonalizationChange({ ...personalization, language: e.target.value }),
                     style: selectStyle,
                     children: [
-                      /* @__PURE__ */ jsx18("option", { value: "auto", children: "\uC790\uB3D9 \uD0D0\uC9C0" }),
-                      /* @__PURE__ */ jsx18("option", { value: "ko", children: "\uD55C\uAD6D\uC5B4" }),
-                      /* @__PURE__ */ jsx18("option", { value: "en", children: "English" }),
-                      /* @__PURE__ */ jsx18("option", { value: "ja", children: "\u65E5\u672C\u8A9E" })
+                      /* @__PURE__ */ jsx19("option", { value: "auto", children: "\uC790\uB3D9 \uD0D0\uC9C0" }),
+                      /* @__PURE__ */ jsx19("option", { value: "ko", children: "\uD55C\uAD6D\uC5B4" }),
+                      /* @__PURE__ */ jsx19("option", { value: "en", children: "English" }),
+                      /* @__PURE__ */ jsx19("option", { value: "ja", children: "\u65E5\u672C\u8A9E" })
                     ]
                   }
                 ) }),
-                /* @__PURE__ */ jsx18(SettingRow, { label: "\uAE30\uBCF8\uAC12\uC73C\uB85C \uCD08\uAE30\uD654", description: "\uBAA8\uB4E0 \uC124\uC815\uC744 \uCD08\uAE30 \uC0C1\uD0DC\uB85C \uB418\uB3CC\uB9BD\uB2C8\uB2E4", children: /* @__PURE__ */ jsx18(
+                /* @__PURE__ */ jsx19(SettingRow, { label: "\uAE30\uBCF8\uAC12\uC73C\uB85C \uCD08\uAE30\uD654", description: "\uBAA8\uB4E0 \uC124\uC815\uC744 \uCD08\uAE30 \uC0C1\uD0DC\uB85C \uB418\uB3CC\uB9BD\uB2C8\uB2E4", children: /* @__PURE__ */ jsx19(
                   "button",
                   {
                     onClick: () => onPersonalizationChange(DEFAULT_PERSONALIZATION2),
@@ -11774,11 +12236,11 @@ var SettingsModal = ({
                     children: "\uCD08\uAE30\uD654"
                   }
                 ) }),
-                onApiKeyChange && /* @__PURE__ */ jsxs17("div", { style: { marginTop: "32px", paddingTop: "24px", borderTop: "1px solid var(--chatllm-border, #e5e7eb)" }, children: [
-                  /* @__PURE__ */ jsx18("h3", { style: { fontSize: "16px", fontWeight: 500, marginBottom: "16px", color: "var(--chatllm-text, #1f2937)" }, children: "API \uC124\uC815" }),
-                  /* @__PURE__ */ jsxs17("div", { children: [
-                    /* @__PURE__ */ jsx18("label", { style: { display: "block", fontSize: "14px", marginBottom: "8px", color: "var(--chatllm-text, #374151)" }, children: apiKeyLabel }),
-                    /* @__PURE__ */ jsx18(
+                onApiKeyChange && /* @__PURE__ */ jsxs18("div", { style: { marginTop: "32px", paddingTop: "24px", borderTop: "1px solid var(--chatllm-border, #e5e7eb)" }, children: [
+                  /* @__PURE__ */ jsx19("h3", { style: { fontSize: "16px", fontWeight: 500, marginBottom: "16px", color: "var(--chatllm-text, #1f2937)" }, children: "API \uC124\uC815" }),
+                  /* @__PURE__ */ jsxs18("div", { children: [
+                    /* @__PURE__ */ jsx19("label", { style: { display: "block", fontSize: "14px", marginBottom: "8px", color: "var(--chatllm-text, #374151)" }, children: apiKeyLabel }),
+                    /* @__PURE__ */ jsx19(
                       "input",
                       {
                         type: "password",
@@ -11788,18 +12250,18 @@ var SettingsModal = ({
                         style: inputStyle
                       }
                     ),
-                    /* @__PURE__ */ jsx18("p", { style: { fontSize: "12px", color: "var(--chatllm-text-muted, #9ca3af)", marginTop: "4px" }, children: apiKeyDescription })
+                    /* @__PURE__ */ jsx19("p", { style: { fontSize: "12px", color: "var(--chatllm-text-muted, #9ca3af)", marginTop: "4px" }, children: apiKeyDescription })
                   ] })
                 ] })
               ] }),
-              activeTab === "personalization" && /* @__PURE__ */ jsxs17("div", { children: [
-                /* @__PURE__ */ jsx18("h2", { style: { fontSize: "20px", fontWeight: 600, marginBottom: "24px", color: "var(--chatllm-text, #1f2937)" }, children: "\uAC1C\uC778 \uB9DE\uCDA4 \uC124\uC815" }),
-                /* @__PURE__ */ jsxs17("section", { style: { marginBottom: "32px" }, children: [
-                  /* @__PURE__ */ jsx18("h3", { style: { fontSize: "14px", fontWeight: 500, color: "var(--chatllm-text-muted, #6b7280)", marginBottom: "16px" }, children: "\uC0AC\uC6A9\uC790 \uD504\uB85C\uD544" }),
-                  /* @__PURE__ */ jsxs17("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
-                    /* @__PURE__ */ jsxs17("div", { children: [
-                      /* @__PURE__ */ jsx18("label", { style: labelStyle, children: "\uB2C9\uB124\uC784" }),
-                      /* @__PURE__ */ jsx18(
+              activeTab === "personalization" && /* @__PURE__ */ jsxs18("div", { children: [
+                /* @__PURE__ */ jsx19("h2", { style: { fontSize: "20px", fontWeight: 600, marginBottom: "24px", color: "var(--chatllm-text, #1f2937)" }, children: "\uAC1C\uC778 \uB9DE\uCDA4 \uC124\uC815" }),
+                /* @__PURE__ */ jsxs18("section", { style: { marginBottom: "32px" }, children: [
+                  /* @__PURE__ */ jsx19("h3", { style: { fontSize: "14px", fontWeight: 500, color: "var(--chatllm-text-muted, #6b7280)", marginBottom: "16px" }, children: "\uC0AC\uC6A9\uC790 \uD504\uB85C\uD544" }),
+                  /* @__PURE__ */ jsxs18("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
+                    /* @__PURE__ */ jsxs18("div", { children: [
+                      /* @__PURE__ */ jsx19("label", { style: labelStyle, children: "\uB2C9\uB124\uC784" }),
+                      /* @__PURE__ */ jsx19(
                         "input",
                         {
                           type: "text",
@@ -11810,9 +12272,9 @@ var SettingsModal = ({
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ jsxs17("div", { children: [
-                      /* @__PURE__ */ jsx18("label", { style: labelStyle, children: "\uC9C1\uC5C5" }),
-                      /* @__PURE__ */ jsx18(
+                    /* @__PURE__ */ jsxs18("div", { children: [
+                      /* @__PURE__ */ jsx19("label", { style: labelStyle, children: "\uC9C1\uC5C5" }),
+                      /* @__PURE__ */ jsx19(
                         "input",
                         {
                           type: "text",
@@ -11823,9 +12285,9 @@ var SettingsModal = ({
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ jsxs17("div", { children: [
-                      /* @__PURE__ */ jsx18("label", { style: labelStyle, children: "\uCD94\uAC00 \uC815\uBCF4" }),
-                      /* @__PURE__ */ jsx18(
+                    /* @__PURE__ */ jsxs18("div", { children: [
+                      /* @__PURE__ */ jsx19("label", { style: labelStyle, children: "\uCD94\uAC00 \uC815\uBCF4" }),
+                      /* @__PURE__ */ jsx19(
                         "textarea",
                         {
                           value: personalization.userProfile.additionalInfo || "",
@@ -11838,62 +12300,62 @@ var SettingsModal = ({
                     ] })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs17("section", { children: [
-                  /* @__PURE__ */ jsx18("h3", { style: { fontSize: "14px", fontWeight: 500, color: "var(--chatllm-text-muted, #6b7280)", marginBottom: "16px" }, children: "\uC751\uB2F5 \uC2A4\uD0C0\uC77C" }),
-                  /* @__PURE__ */ jsx18(SettingRow, { label: "\uB530\uB73B\uD568", children: /* @__PURE__ */ jsxs17(
+                /* @__PURE__ */ jsxs18("section", { children: [
+                  /* @__PURE__ */ jsx19("h3", { style: { fontSize: "14px", fontWeight: 500, color: "var(--chatllm-text-muted, #6b7280)", marginBottom: "16px" }, children: "\uC751\uB2F5 \uC2A4\uD0C0\uC77C" }),
+                  /* @__PURE__ */ jsx19(SettingRow, { label: "\uB530\uB73B\uD568", children: /* @__PURE__ */ jsxs18(
                     "select",
                     {
                       value: personalization.responseStyle.warmth,
                       onChange: (e) => updateResponseStyle("warmth", e.target.value),
                       style: selectStyle,
                       children: [
-                        /* @__PURE__ */ jsx18("option", { value: "high", children: "\uB192\uC74C - \uCE5C\uADFC\uD558\uACE0 \uB530\uB73B\uD558\uAC8C" }),
-                        /* @__PURE__ */ jsx18("option", { value: "medium", children: "\uAE30\uBCF8\uAC12" }),
-                        /* @__PURE__ */ jsx18("option", { value: "low", children: "\uB0AE\uC74C - \uAC04\uACB0\uD558\uACE0 \uC0AC\uBB34\uC801\uC73C\uB85C" })
+                        /* @__PURE__ */ jsx19("option", { value: "high", children: "\uB192\uC74C - \uCE5C\uADFC\uD558\uACE0 \uB530\uB73B\uD558\uAC8C" }),
+                        /* @__PURE__ */ jsx19("option", { value: "medium", children: "\uAE30\uBCF8\uAC12" }),
+                        /* @__PURE__ */ jsx19("option", { value: "low", children: "\uB0AE\uC74C - \uAC04\uACB0\uD558\uACE0 \uC0AC\uBB34\uC801\uC73C\uB85C" })
                       ]
                     }
                   ) }),
-                  /* @__PURE__ */ jsx18(SettingRow, { label: "\uC5F4\uC815\uC801", children: /* @__PURE__ */ jsxs17(
+                  /* @__PURE__ */ jsx19(SettingRow, { label: "\uC5F4\uC815\uC801", children: /* @__PURE__ */ jsxs18(
                     "select",
                     {
                       value: personalization.responseStyle.enthusiasm,
                       onChange: (e) => updateResponseStyle("enthusiasm", e.target.value),
                       style: selectStyle,
                       children: [
-                        /* @__PURE__ */ jsx18("option", { value: "high", children: "\uB192\uC74C - \uC801\uADF9\uC801\uC774\uACE0 \uD65C\uBC1C\uD558\uAC8C" }),
-                        /* @__PURE__ */ jsx18("option", { value: "medium", children: "\uAE30\uBCF8\uAC12" }),
-                        /* @__PURE__ */ jsx18("option", { value: "low", children: "\uB0AE\uC74C - \uCC28\uBD84\uD558\uACE0 \uC808\uC81C\uC788\uAC8C" })
+                        /* @__PURE__ */ jsx19("option", { value: "high", children: "\uB192\uC74C - \uC801\uADF9\uC801\uC774\uACE0 \uD65C\uBC1C\uD558\uAC8C" }),
+                        /* @__PURE__ */ jsx19("option", { value: "medium", children: "\uAE30\uBCF8\uAC12" }),
+                        /* @__PURE__ */ jsx19("option", { value: "low", children: "\uB0AE\uC74C - \uCC28\uBD84\uD558\uACE0 \uC808\uC81C\uC788\uAC8C" })
                       ]
                     }
                   ) }),
-                  /* @__PURE__ */ jsx18(SettingRow, { label: "\uC774\uBAA8\uC9C0 \uC0AC\uC6A9", children: /* @__PURE__ */ jsxs17(
+                  /* @__PURE__ */ jsx19(SettingRow, { label: "\uC774\uBAA8\uC9C0 \uC0AC\uC6A9", children: /* @__PURE__ */ jsxs18(
                     "select",
                     {
                       value: personalization.responseStyle.emojiUsage,
                       onChange: (e) => updateResponseStyle("emojiUsage", e.target.value),
                       style: selectStyle,
                       children: [
-                        /* @__PURE__ */ jsx18("option", { value: "high", children: "\uB192\uC74C - \uC790\uC8FC \uC0AC\uC6A9" }),
-                        /* @__PURE__ */ jsx18("option", { value: "medium", children: "\uAE30\uBCF8\uAC12" }),
-                        /* @__PURE__ */ jsx18("option", { value: "low", children: "\uB0AE\uC74C - \uAC70\uC758 \uC0AC\uC6A9 \uC548 \uD568" })
+                        /* @__PURE__ */ jsx19("option", { value: "high", children: "\uB192\uC74C - \uC790\uC8FC \uC0AC\uC6A9" }),
+                        /* @__PURE__ */ jsx19("option", { value: "medium", children: "\uAE30\uBCF8\uAC12" }),
+                        /* @__PURE__ */ jsx19("option", { value: "low", children: "\uB0AE\uC74C - \uAC70\uC758 \uC0AC\uC6A9 \uC548 \uD568" })
                       ]
                     }
                   ) }),
-                  /* @__PURE__ */ jsx18(SettingRow, { label: "\uC751\uB2F5 \uAE38\uC774", children: /* @__PURE__ */ jsxs17(
+                  /* @__PURE__ */ jsx19(SettingRow, { label: "\uC751\uB2F5 \uAE38\uC774", children: /* @__PURE__ */ jsxs18(
                     "select",
                     {
                       value: personalization.responseStyle.verbosity,
                       onChange: (e) => updateResponseStyle("verbosity", e.target.value),
                       style: selectStyle,
                       children: [
-                        /* @__PURE__ */ jsx18("option", { value: "detailed", children: "\uC0C1\uC138 - \uC790\uC138\uD558\uAC8C \uC124\uBA85" }),
-                        /* @__PURE__ */ jsx18("option", { value: "balanced", children: "\uAE30\uBCF8\uAC12" }),
-                        /* @__PURE__ */ jsx18("option", { value: "concise", children: "\uAC04\uACB0 - \uD575\uC2EC\uB9CC \uC694\uC57D" })
+                        /* @__PURE__ */ jsx19("option", { value: "detailed", children: "\uC0C1\uC138 - \uC790\uC138\uD558\uAC8C \uC124\uBA85" }),
+                        /* @__PURE__ */ jsx19("option", { value: "balanced", children: "\uAE30\uBCF8\uAC12" }),
+                        /* @__PURE__ */ jsx19("option", { value: "concise", children: "\uAC04\uACB0 - \uD575\uC2EC\uB9CC \uC694\uC57D" })
                       ]
                     }
                   ) })
                 ] }),
-                onSave && /* @__PURE__ */ jsx18("div", { style: { marginTop: "24px", display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx18(
+                onSave && /* @__PURE__ */ jsx19("div", { style: { marginTop: "24px", display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx19(
                   "button",
                   {
                     onClick: onSave,
@@ -11914,7 +12376,7 @@ var SettingsModal = ({
                   }
                 ) })
               ] }),
-              activeTab === "memory" && showMemoryTab && /* @__PURE__ */ jsx18(
+              activeTab === "memory" && showMemoryTab && /* @__PURE__ */ jsx19(
                 MemoryTabContent,
                 {
                   items: memoryItems,
@@ -11925,7 +12387,7 @@ var SettingsModal = ({
                   importMemoryPrompt
                 }
               ),
-              activeTab === "project-memory" && showMemoryTab && enableProjects && /* @__PURE__ */ jsx18(
+              activeTab === "project-memory" && showMemoryTab && enableProjects && /* @__PURE__ */ jsx19(
                 MemoryTabContent,
                 {
                   items: projectMemoryItems,
@@ -11936,9 +12398,9 @@ var SettingsModal = ({
                   emptyDescription: "\uB300\uD654\uAC00 \uC9C4\uD589\uB418\uBA74 AI\uAC00 \uD504\uB85C\uC81D\uD2B8 \uB9E5\uB77D\uC744 \uC790\uB3D9\uC73C\uB85C \uD559\uC2B5\uD569\uB2C8\uB2E4"
                 }
               ),
-              activeTab === "data" && /* @__PURE__ */ jsxs17("div", { children: [
-                /* @__PURE__ */ jsx18("h2", { style: { fontSize: "20px", fontWeight: 600, marginBottom: "24px", color: "var(--chatllm-text, #1f2937)" }, children: "\uB370\uC774\uD130 \uC81C\uC5B4" }),
-                /* @__PURE__ */ jsx18(SettingRow, { label: "\uBA54\uBAA8\uB9AC \uC0AC\uC6A9", description: "\uB300\uD654 \uCEE8\uD14D\uC2A4\uD2B8\uB97C \uAE30\uC5B5\uD569\uB2C8\uB2E4", children: /* @__PURE__ */ jsx18(
+              activeTab === "data" && /* @__PURE__ */ jsxs18("div", { children: [
+                /* @__PURE__ */ jsx19("h2", { style: { fontSize: "20px", fontWeight: 600, marginBottom: "24px", color: "var(--chatllm-text, #1f2937)" }, children: "\uB370\uC774\uD130 \uC81C\uC5B4" }),
+                /* @__PURE__ */ jsx19(SettingRow, { label: "\uBA54\uBAA8\uB9AC \uC0AC\uC6A9", description: "\uB300\uD654 \uCEE8\uD14D\uC2A4\uD2B8\uB97C \uAE30\uC5B5\uD569\uB2C8\uB2E4", children: /* @__PURE__ */ jsx19(
                   "button",
                   {
                     onClick: () => onPersonalizationChange({ ...personalization, useMemory: !personalization.useMemory }),
@@ -11952,7 +12414,7 @@ var SettingsModal = ({
                       position: "relative",
                       transition: "background-color 0.2s"
                     },
-                    children: /* @__PURE__ */ jsx18(
+                    children: /* @__PURE__ */ jsx19(
                       "div",
                       {
                         style: {
@@ -11970,7 +12432,7 @@ var SettingsModal = ({
                     )
                   }
                 ) }),
-                onClearAllData && /* @__PURE__ */ jsx18(SettingRow, { label: "\uB300\uD654 \uAE30\uB85D \uC0AD\uC81C", description: "\uBAA8\uB4E0 \uB300\uD654 \uAE30\uB85D\uC744 \uC0AD\uC81C\uD569\uB2C8\uB2E4", children: /* @__PURE__ */ jsx18(
+                onClearAllData && /* @__PURE__ */ jsx19(SettingRow, { label: "\uB300\uD654 \uAE30\uB85D \uC0AD\uC81C", description: "\uBAA8\uB4E0 \uB300\uD654 \uAE30\uB85D\uC744 \uC0AD\uC81C\uD569\uB2C8\uB2E4", children: /* @__PURE__ */ jsx19(
                   "button",
                   {
                     onClick: () => {
@@ -11990,7 +12452,7 @@ var SettingsModal = ({
     }
   );
 };
-var TabButton = ({ active, onClick, icon, label }) => /* @__PURE__ */ jsxs17(
+var TabButton = ({ active, onClick, icon, label }) => /* @__PURE__ */ jsxs18(
   "button",
   {
     onClick,
@@ -12011,12 +12473,12 @@ var TabButton = ({ active, onClick, icon, label }) => /* @__PURE__ */ jsxs17(
       marginBottom: "4px"
     },
     children: [
-      /* @__PURE__ */ jsx18(IconSvg, { name: icon, size: 20 }),
+      /* @__PURE__ */ jsx19(IconSvg, { name: icon, size: 20 }),
       label
     ]
   }
 );
-var SettingRow = ({ label, description, children }) => /* @__PURE__ */ jsxs17(
+var SettingRow = ({ label, description, children }) => /* @__PURE__ */ jsxs18(
   "div",
   {
     style: {
@@ -12027,9 +12489,9 @@ var SettingRow = ({ label, description, children }) => /* @__PURE__ */ jsxs17(
       borderBottom: "1px solid var(--chatllm-border-light, #f3f4f6)"
     },
     children: [
-      /* @__PURE__ */ jsxs17("div", { children: [
-        /* @__PURE__ */ jsx18("span", { style: { fontSize: "14px", color: "var(--chatllm-text, #374151)" }, children: label }),
-        description && /* @__PURE__ */ jsx18("p", { style: { fontSize: "12px", color: "var(--chatllm-text-muted, #9ca3af)", marginTop: "2px" }, children: description })
+      /* @__PURE__ */ jsxs18("div", { children: [
+        /* @__PURE__ */ jsx19("span", { style: { fontSize: "14px", color: "var(--chatllm-text, #374151)" }, children: label }),
+        description && /* @__PURE__ */ jsx19("p", { style: { fontSize: "12px", color: "var(--chatllm-text-muted, #9ca3af)", marginTop: "2px" }, children: description })
       ] }),
       children
     ]
@@ -12089,11 +12551,11 @@ var memoryCategoryColors = {
   preference: "#8b5cf6"
 };
 var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll, title = "AI \uBA54\uBAA8\uB9AC", emptyMessage = "\uC800\uC7A5\uB41C \uBA54\uBAA8\uB9AC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4", emptyDescription = "\uB300\uD654\uAC00 \uC9C4\uD589\uB418\uBA74 AI\uAC00 \uC790\uB3D9\uC73C\uB85C \uC815\uBCF4\uB97C \uD559\uC2B5\uD569\uB2C8\uB2E4", onImportMemory, importMemoryPrompt }) => {
-  const [activeFilter, setActiveFilter] = useState18("all");
-  const [expandedId, setExpandedId] = useState18(null);
-  const [importModalOpen, setImportModalOpen] = useState18(false);
-  const [importText, setImportText] = useState18("");
-  const [promptCopied, setPromptCopied] = useState18(false);
+  const [activeFilter, setActiveFilter] = useState19("all");
+  const [expandedId, setExpandedId] = useState19(null);
+  const [importModalOpen, setImportModalOpen] = useState19(false);
+  const [importText, setImportText] = useState19("");
+  const [promptCopied, setPromptCopied] = useState19(false);
   const filteredItems = activeFilter === "all" ? items : items.filter((item) => item.category === activeFilter);
   const formatDate = (timestamp) => {
     const date = new Date(timestamp);
@@ -12104,11 +12566,11 @@ var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll, title = "
       minute: "2-digit"
     });
   };
-  return /* @__PURE__ */ jsxs17("div", { children: [
-    /* @__PURE__ */ jsxs17("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "24px" }, children: [
-      /* @__PURE__ */ jsx18("h2", { style: { fontSize: "20px", fontWeight: 600, color: "var(--chatllm-text, #1f2937)", margin: 0 }, children: title }),
-      /* @__PURE__ */ jsxs17("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [
-        onImportMemory && /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18("div", { children: [
+    /* @__PURE__ */ jsxs18("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "24px" }, children: [
+      /* @__PURE__ */ jsx19("h2", { style: { fontSize: "20px", fontWeight: 600, color: "var(--chatllm-text, #1f2937)", margin: 0 }, children: title }),
+      /* @__PURE__ */ jsxs18("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [
+        onImportMemory && /* @__PURE__ */ jsxs18(
           "button",
           {
             onClick: () => setImportModalOpen(true),
@@ -12129,18 +12591,18 @@ var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll, title = "
             onMouseEnter: (e) => e.currentTarget.style.opacity = "0.85",
             onMouseLeave: (e) => e.currentTarget.style.opacity = "1",
             children: [
-              /* @__PURE__ */ jsx18(IconSvg, { name: "download-line", size: 14, color: "var(--chatllm-primary, #3584FA)" }),
+              /* @__PURE__ */ jsx19(IconSvg, { name: "download-line", size: 14, color: "var(--chatllm-primary, #3584FA)" }),
               "\uAC00\uC838\uC624\uAE30"
             ]
           }
         ),
-        /* @__PURE__ */ jsxs17("span", { style: { fontSize: "13px", color: "var(--chatllm-text-muted, #9ca3af)" }, children: [
+        /* @__PURE__ */ jsxs18("span", { style: { fontSize: "13px", color: "var(--chatllm-text-muted, #9ca3af)" }, children: [
           items.length,
           "\uAC1C \uD56D\uBAA9"
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx18("div", { style: { display: "flex", gap: "6px", marginBottom: "20px", flexWrap: "wrap" }, children: ["all", "fact", "skill", "preference"].map((tab) => /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx19("div", { style: { display: "flex", gap: "6px", marginBottom: "20px", flexWrap: "wrap" }, children: ["all", "fact", "skill", "preference"].map((tab) => /* @__PURE__ */ jsx19(
       "button",
       {
         onClick: () => setActiveFilter(tab),
@@ -12158,7 +12620,7 @@ var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll, title = "
       },
       tab
     )) }),
-    contextSummary && activeFilter === "all" && /* @__PURE__ */ jsxs17(
+    contextSummary && activeFilter === "all" && /* @__PURE__ */ jsxs18(
       "div",
       {
         style: {
@@ -12169,19 +12631,19 @@ var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll, title = "
           borderLeft: "3px solid var(--chatllm-primary, #3584FA)"
         },
         children: [
-          /* @__PURE__ */ jsxs17("div", { style: { display: "flex", alignItems: "center", gap: "6px", marginBottom: "8px" }, children: [
-            /* @__PURE__ */ jsx18(IconSvg, { name: "file-text-line", size: 14, color: "var(--chatllm-primary, #3584FA)" }),
-            /* @__PURE__ */ jsx18("span", { style: { fontSize: "12px", fontWeight: 500, color: "var(--chatllm-primary, #3584FA)" }, children: "\uB300\uD654 \uC694\uC57D" })
+          /* @__PURE__ */ jsxs18("div", { style: { display: "flex", alignItems: "center", gap: "6px", marginBottom: "8px" }, children: [
+            /* @__PURE__ */ jsx19(IconSvg, { name: "file-text-line", size: 14, color: "var(--chatllm-primary, #3584FA)" }),
+            /* @__PURE__ */ jsx19("span", { style: { fontSize: "12px", fontWeight: 500, color: "var(--chatllm-primary, #3584FA)" }, children: "\uB300\uD654 \uC694\uC57D" })
           ] }),
-          /* @__PURE__ */ jsx18("p", { style: { fontSize: "13px", lineHeight: "1.6", color: "var(--chatllm-text, #374151)", margin: 0 }, children: contextSummary })
+          /* @__PURE__ */ jsx19("p", { style: { fontSize: "13px", lineHeight: "1.6", color: "var(--chatllm-text, #374151)", margin: 0 }, children: contextSummary })
         ]
       }
     ),
-    filteredItems.length === 0 ? /* @__PURE__ */ jsxs17("div", { style: { padding: "40px 16px", textAlign: "center" }, children: [
-      /* @__PURE__ */ jsx18(IconSvg, { name: "robot-line", size: 40, color: "var(--chatllm-text-muted, #d1d5db)" }),
-      /* @__PURE__ */ jsx18("p", { style: { fontSize: "14px", color: "var(--chatllm-text-muted, #9ca3af)", marginTop: "12px" }, children: emptyMessage }),
-      /* @__PURE__ */ jsx18("p", { style: { fontSize: "12px", color: "var(--chatllm-text-muted, #d1d5db)", marginTop: "4px" }, children: emptyDescription })
-    ] }) : /* @__PURE__ */ jsx18("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: filteredItems.map((item) => /* @__PURE__ */ jsxs17(
+    filteredItems.length === 0 ? /* @__PURE__ */ jsxs18("div", { style: { padding: "40px 16px", textAlign: "center" }, children: [
+      /* @__PURE__ */ jsx19(IconSvg, { name: "robot-line", size: 40, color: "var(--chatllm-text-muted, #d1d5db)" }),
+      /* @__PURE__ */ jsx19("p", { style: { fontSize: "14px", color: "var(--chatllm-text-muted, #9ca3af)", marginTop: "12px" }, children: emptyMessage }),
+      /* @__PURE__ */ jsx19("p", { style: { fontSize: "12px", color: "var(--chatllm-text-muted, #d1d5db)", marginTop: "4px" }, children: emptyDescription })
+    ] }) : /* @__PURE__ */ jsx19("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: filteredItems.map((item) => /* @__PURE__ */ jsxs18(
       "div",
       {
         style: {
@@ -12194,10 +12656,10 @@ var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll, title = "
         },
         onClick: () => setExpandedId(expandedId === item.id ? null : item.id),
         children: [
-          /* @__PURE__ */ jsxs17("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between" }, children: [
-            /* @__PURE__ */ jsxs17("div", { style: { flex: 1, minWidth: 0 }, children: [
-              /* @__PURE__ */ jsxs17("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginBottom: "4px" }, children: [
-                item.category && /* @__PURE__ */ jsx18(
+          /* @__PURE__ */ jsxs18("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between" }, children: [
+            /* @__PURE__ */ jsxs18("div", { style: { flex: 1, minWidth: 0 }, children: [
+              /* @__PURE__ */ jsxs18("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginBottom: "4px" }, children: [
+                item.category && /* @__PURE__ */ jsx19(
                   "span",
                   {
                     style: {
@@ -12211,12 +12673,12 @@ var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll, title = "
                     children: memoryCategoryLabels[item.category]
                   }
                 ),
-                /* @__PURE__ */ jsx18("span", { style: { fontSize: "11px", color: "var(--chatllm-text-muted, #9ca3af)" }, children: formatDate(item.timestamp) })
+                /* @__PURE__ */ jsx19("span", { style: { fontSize: "11px", color: "var(--chatllm-text-muted, #9ca3af)" }, children: formatDate(item.timestamp) })
               ] }),
-              /* @__PURE__ */ jsx18("div", { style: { fontSize: "13px", fontWeight: 500, color: "var(--chatllm-text, #1f2937)" }, children: item.key })
+              /* @__PURE__ */ jsx19("div", { style: { fontSize: "13px", fontWeight: 500, color: "var(--chatllm-text, #1f2937)" }, children: item.key })
             ] }),
-            /* @__PURE__ */ jsxs17("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
-              onDelete && /* @__PURE__ */ jsx18(
+            /* @__PURE__ */ jsxs18("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+              onDelete && /* @__PURE__ */ jsx19(
                 "button",
                 {
                   onClick: (e) => {
@@ -12232,10 +12694,10 @@ var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll, title = "
                     opacity: 0.5
                   },
                   "aria-label": "\uBA54\uBAA8\uB9AC \uC0AD\uC81C",
-                  children: /* @__PURE__ */ jsx18(IconSvg, { name: "delete-bin-line", size: 14, color: "var(--chatllm-text-muted, #9ca3af)" })
+                  children: /* @__PURE__ */ jsx19(IconSvg, { name: "delete-bin-line", size: 14, color: "var(--chatllm-text-muted, #9ca3af)" })
                 }
               ),
-              /* @__PURE__ */ jsx18(
+              /* @__PURE__ */ jsx19(
                 IconSvg,
                 {
                   name: expandedId === item.id ? "arrow-up-s-line" : "arrow-down-s-line",
@@ -12245,7 +12707,7 @@ var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll, title = "
               )
             ] })
           ] }),
-          expandedId === item.id && /* @__PURE__ */ jsx18(
+          expandedId === item.id && /* @__PURE__ */ jsx19(
             "div",
             {
               style: {
@@ -12253,7 +12715,7 @@ var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll, title = "
                 paddingTop: "12px",
                 borderTop: "1px solid var(--chatllm-border-light, #f3f4f6)"
               },
-              children: /* @__PURE__ */ jsx18(
+              children: /* @__PURE__ */ jsx19(
                 "p",
                 {
                   style: {
@@ -12272,7 +12734,7 @@ var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll, title = "
       },
       item.id
     )) }),
-    onClearAll && items.length > 0 && /* @__PURE__ */ jsx18("div", { style: { marginTop: "24px", paddingTop: "16px", borderTop: "1px solid var(--chatllm-border, #e5e7eb)" }, children: /* @__PURE__ */ jsx18(
+    onClearAll && items.length > 0 && /* @__PURE__ */ jsx19("div", { style: { marginTop: "24px", paddingTop: "16px", borderTop: "1px solid var(--chatllm-border, #e5e7eb)" }, children: /* @__PURE__ */ jsx19(
       "button",
       {
         onClick: () => {
@@ -12284,7 +12746,7 @@ var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll, title = "
         children: "\uC804\uCCB4 \uBA54\uBAA8\uB9AC \uC0AD\uC81C"
       }
     ) }),
-    importModalOpen && onImportMemory && /* @__PURE__ */ jsx18(
+    importModalOpen && onImportMemory && /* @__PURE__ */ jsx19(
       "div",
       {
         style: {
@@ -12300,7 +12762,7 @@ var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll, title = "
           zIndex: 1100
         },
         onClick: () => setImportModalOpen(false),
-        children: /* @__PURE__ */ jsxs17(
+        children: /* @__PURE__ */ jsxs18(
           "div",
           {
             style: {
@@ -12313,7 +12775,7 @@ var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll, title = "
             },
             onClick: (e) => e.stopPropagation(),
             children: [
-              /* @__PURE__ */ jsxs17(
+              /* @__PURE__ */ jsxs18(
                 "div",
                 {
                   style: {
@@ -12323,8 +12785,8 @@ var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll, title = "
                     padding: "20px 24px 16px"
                   },
                   children: [
-                    /* @__PURE__ */ jsx18("h3", { style: { fontSize: "18px", fontWeight: 700, color: "var(--chatllm-text, #ffffff)", margin: 0 }, children: "Claude\uB85C \uBA54\uBAA8\uB9AC \uAC00\uC838\uC624\uAE30" }),
-                    /* @__PURE__ */ jsx18(
+                    /* @__PURE__ */ jsx19("h3", { style: { fontSize: "18px", fontWeight: 700, color: "var(--chatllm-text, #ffffff)", margin: 0 }, children: "Claude\uB85C \uBA54\uBAA8\uB9AC \uAC00\uC838\uC624\uAE30" }),
+                    /* @__PURE__ */ jsx19(
                       "button",
                       {
                         onClick: () => {
@@ -12339,16 +12801,16 @@ var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll, title = "
                           borderRadius: "6px",
                           cursor: "pointer"
                         },
-                        children: /* @__PURE__ */ jsx18(IconSvg, { name: "close-line", size: 20, color: "var(--chatllm-text-muted, #9ca3af)" })
+                        children: /* @__PURE__ */ jsx19(IconSvg, { name: "close-line", size: 20, color: "var(--chatllm-text-muted, #9ca3af)" })
                       }
                     )
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs17("div", { style: { padding: "0 24px 24px" }, children: [
-                /* @__PURE__ */ jsxs17("div", { style: { marginBottom: "24px" }, children: [
-                  /* @__PURE__ */ jsxs17("div", { style: { display: "flex", alignItems: "center", gap: "10px", marginBottom: "12px" }, children: [
-                    /* @__PURE__ */ jsx18(
+              /* @__PURE__ */ jsxs18("div", { style: { padding: "0 24px 24px" }, children: [
+                /* @__PURE__ */ jsxs18("div", { style: { marginBottom: "24px" }, children: [
+                  /* @__PURE__ */ jsxs18("div", { style: { display: "flex", alignItems: "center", gap: "10px", marginBottom: "12px" }, children: [
+                    /* @__PURE__ */ jsx19(
                       "div",
                       {
                         style: {
@@ -12367,9 +12829,9 @@ var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll, title = "
                         children: "1"
                       }
                     ),
-                    /* @__PURE__ */ jsx18("span", { style: { fontSize: "14px", fontWeight: 500, color: "var(--chatllm-text, #ffffff)" }, children: "\uB2E4\uB978 AI \uC81C\uACF5\uC5C5\uCCB4\uC758 \uCC44\uD305\uC5D0 \uC774 \uD504\uB86C\uD504\uD2B8\uB97C \uBCF5\uC0AC\uD558\uC138\uC694" })
+                    /* @__PURE__ */ jsx19("span", { style: { fontSize: "14px", fontWeight: 500, color: "var(--chatllm-text, #ffffff)" }, children: "\uB2E4\uB978 AI \uC81C\uACF5\uC5C5\uCCB4\uC758 \uCC44\uD305\uC5D0 \uC774 \uD504\uB86C\uD504\uD2B8\uB97C \uBCF5\uC0AC\uD558\uC138\uC694" })
                   ] }),
-                  /* @__PURE__ */ jsxs17(
+                  /* @__PURE__ */ jsxs18(
                     "div",
                     {
                       style: {
@@ -12382,7 +12844,7 @@ var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll, title = "
                         overflow: "auto"
                       },
                       children: [
-                        /* @__PURE__ */ jsx18(
+                        /* @__PURE__ */ jsx19(
                           "p",
                           {
                             style: {
@@ -12395,7 +12857,7 @@ var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll, title = "
                             children: importMemoryPrompt || DEFAULT_IMPORT_MEMORY_PROMPT
                           }
                         ),
-                        /* @__PURE__ */ jsxs17(
+                        /* @__PURE__ */ jsxs18(
                           "button",
                           {
                             onClick: () => {
@@ -12420,7 +12882,7 @@ var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll, title = "
                               color: "var(--chatllm-text, #ffffff)"
                             },
                             children: [
-                              /* @__PURE__ */ jsx18(IconSvg, { name: promptCopied ? "check-line" : "file-copy-line", size: 14, color: "var(--chatllm-text, #ffffff)" }),
+                              /* @__PURE__ */ jsx19(IconSvg, { name: promptCopied ? "check-line" : "file-copy-line", size: 14, color: "var(--chatllm-text, #ffffff)" }),
                               promptCopied ? "\uBCF5\uC0AC\uB428" : "\uBCF5\uC0AC"
                             ]
                           }
@@ -12429,9 +12891,9 @@ var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll, title = "
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs17("div", { children: [
-                  /* @__PURE__ */ jsxs17("div", { style: { display: "flex", alignItems: "center", gap: "10px", marginBottom: "12px" }, children: [
-                    /* @__PURE__ */ jsx18(
+                /* @__PURE__ */ jsxs18("div", { children: [
+                  /* @__PURE__ */ jsxs18("div", { style: { display: "flex", alignItems: "center", gap: "10px", marginBottom: "12px" }, children: [
+                    /* @__PURE__ */ jsx19(
                       "div",
                       {
                         style: {
@@ -12450,9 +12912,9 @@ var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll, title = "
                         children: "2"
                       }
                     ),
-                    /* @__PURE__ */ jsx18("span", { style: { fontSize: "14px", fontWeight: 500, color: "var(--chatllm-text, #ffffff)" }, children: "\uC544\uB798\uC5D0 \uACB0\uACFC\uB97C \uBD99\uC5EC\uB123\uC5B4 Claude\uC758 \uBA54\uBAA8\uB9AC\uC5D0 \uCD94\uAC00\uD558\uC138\uC694" })
+                    /* @__PURE__ */ jsx19("span", { style: { fontSize: "14px", fontWeight: 500, color: "var(--chatllm-text, #ffffff)" }, children: "\uC544\uB798\uC5D0 \uACB0\uACFC\uB97C \uBD99\uC5EC\uB123\uC5B4 Claude\uC758 \uBA54\uBAA8\uB9AC\uC5D0 \uCD94\uAC00\uD558\uC138\uC694" })
                   ] }),
-                  /* @__PURE__ */ jsx18(
+                  /* @__PURE__ */ jsx19(
                     "textarea",
                     {
                       value: importText,
@@ -12479,7 +12941,7 @@ var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll, title = "
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ jsxs17(
+              /* @__PURE__ */ jsxs18(
                 "div",
                 {
                   style: {
@@ -12489,7 +12951,7 @@ var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll, title = "
                     padding: "0 24px 20px"
                   },
                   children: [
-                    /* @__PURE__ */ jsx18(
+                    /* @__PURE__ */ jsx19(
                       "button",
                       {
                         onClick: () => {
@@ -12510,7 +12972,7 @@ var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll, title = "
                         children: "\uCDE8\uC18C"
                       }
                     ),
-                    /* @__PURE__ */ jsx18(
+                    /* @__PURE__ */ jsx19(
                       "button",
                       {
                         onClick: () => {
@@ -12550,8 +13012,8 @@ var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll, title = "
 };
 
 // src/react/components/ProjectSettingsModal.tsx
-import { useState as useState19, useEffect as useEffect11 } from "react";
-import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
+import { useState as useState20, useEffect as useEffect12 } from "react";
+import { jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
 var COLOR_PRESETS = [
   "#3584FA",
   "#7c3aed",
@@ -12571,12 +13033,12 @@ var ProjectSettingsModal = ({
   onDeleteFile,
   onDeleteProject
 }) => {
-  const [activeTab, setActiveTab] = useState19("general");
-  const [title, setTitle] = useState19("");
-  const [description, setDescription] = useState19("");
-  const [instructions, setInstructions] = useState19("");
-  const [color, setColor] = useState19("#3584FA");
-  useEffect11(() => {
+  const [activeTab, setActiveTab] = useState20("general");
+  const [title, setTitle] = useState20("");
+  const [description, setDescription] = useState20("");
+  const [instructions, setInstructions] = useState20("");
+  const [color, setColor] = useState20("#3584FA");
+  useEffect12(() => {
     if (project) {
       setTitle(project.title);
       setDescription(project.description || "");
@@ -12632,7 +13094,7 @@ var ProjectSettingsModal = ({
     cursor: "pointer",
     fontFamily: "inherit"
   });
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     "div",
     {
       style: {
@@ -12647,7 +13109,7 @@ var ProjectSettingsModal = ({
       onClick: (e) => {
         if (e.target === e.currentTarget) onClose();
       },
-      children: /* @__PURE__ */ jsxs18(
+      children: /* @__PURE__ */ jsxs19(
         "div",
         {
           style: {
@@ -12661,7 +13123,7 @@ var ProjectSettingsModal = ({
             overflow: "hidden"
           },
           children: [
-            /* @__PURE__ */ jsxs18(
+            /* @__PURE__ */ jsxs19(
               "div",
               {
                 style: {
@@ -12671,8 +13133,8 @@ var ProjectSettingsModal = ({
                   padding: "20px 24px 0"
                 },
                 children: [
-                  /* @__PURE__ */ jsx19("h2", { style: { fontSize: "16px", fontWeight: 600, margin: 0, color: "var(--chatllm-text, #1a1a1a)" }, children: "\uD504\uB85C\uC81D\uD2B8 \uC124\uC815" }),
-                  /* @__PURE__ */ jsx19(
+                  /* @__PURE__ */ jsx20("h2", { style: { fontSize: "16px", fontWeight: 600, margin: 0, color: "var(--chatllm-text, #1a1a1a)" }, children: "\uD504\uB85C\uC81D\uD2B8 \uC124\uC815" }),
+                  /* @__PURE__ */ jsx20(
                     "button",
                     {
                       onClick: onClose,
@@ -12685,13 +13147,13 @@ var ProjectSettingsModal = ({
                         alignItems: "center"
                       },
                       "aria-label": "\uB2EB\uAE30",
-                      children: /* @__PURE__ */ jsx19(IconSvg, { name: "close-line", size: 20, color: "var(--chatllm-text-muted, #999)" })
+                      children: /* @__PURE__ */ jsx20(IconSvg, { name: "close-line", size: 20, color: "var(--chatllm-text-muted, #999)" })
                     }
                   )
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs18(
+            /* @__PURE__ */ jsxs19(
               "div",
               {
                 style: {
@@ -12701,9 +13163,9 @@ var ProjectSettingsModal = ({
                   borderBottom: "1px solid var(--chatllm-border, #e0e0e0)"
                 },
                 children: [
-                  /* @__PURE__ */ jsx19("button", { onClick: () => setActiveTab("general"), style: tabStyle("general"), children: "\uC77C\uBC18" }),
-                  /* @__PURE__ */ jsx19("button", { onClick: () => setActiveTab("instructions"), style: tabStyle("instructions"), children: "\uC9C0\uCE68" }),
-                  /* @__PURE__ */ jsxs18("button", { onClick: () => setActiveTab("files"), style: tabStyle("files"), children: [
+                  /* @__PURE__ */ jsx20("button", { onClick: () => setActiveTab("general"), style: tabStyle("general"), children: "\uC77C\uBC18" }),
+                  /* @__PURE__ */ jsx20("button", { onClick: () => setActiveTab("instructions"), style: tabStyle("instructions"), children: "\uC9C0\uCE68" }),
+                  /* @__PURE__ */ jsxs19("button", { onClick: () => setActiveTab("files"), style: tabStyle("files"), children: [
                     "\uD30C\uC77C (",
                     project.files.length,
                     ")"
@@ -12711,11 +13173,11 @@ var ProjectSettingsModal = ({
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs18("div", { style: { padding: "24px", overflowY: "auto", flex: 1 }, children: [
-              activeTab === "general" && /* @__PURE__ */ jsxs18("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
-                /* @__PURE__ */ jsxs18("div", { children: [
-                  /* @__PURE__ */ jsx19("label", { style: { display: "block", fontSize: "13px", fontWeight: 500, marginBottom: "6px", color: "var(--chatllm-text, #1a1a1a)" }, children: "\uD504\uB85C\uC81D\uD2B8 \uC774\uB984" }),
-                  /* @__PURE__ */ jsx19(
+            /* @__PURE__ */ jsxs19("div", { style: { padding: "24px", overflowY: "auto", flex: 1 }, children: [
+              activeTab === "general" && /* @__PURE__ */ jsxs19("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+                /* @__PURE__ */ jsxs19("div", { children: [
+                  /* @__PURE__ */ jsx20("label", { style: { display: "block", fontSize: "13px", fontWeight: 500, marginBottom: "6px", color: "var(--chatllm-text, #1a1a1a)" }, children: "\uD504\uB85C\uC81D\uD2B8 \uC774\uB984" }),
+                  /* @__PURE__ */ jsx20(
                     "input",
                     {
                       type: "text",
@@ -12737,9 +13199,9 @@ var ProjectSettingsModal = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs18("div", { children: [
-                  /* @__PURE__ */ jsx19("label", { style: { display: "block", fontSize: "13px", fontWeight: 500, marginBottom: "6px", color: "var(--chatllm-text, #1a1a1a)" }, children: "\uC124\uBA85" }),
-                  /* @__PURE__ */ jsx19(
+                /* @__PURE__ */ jsxs19("div", { children: [
+                  /* @__PURE__ */ jsx20("label", { style: { display: "block", fontSize: "13px", fontWeight: 500, marginBottom: "6px", color: "var(--chatllm-text, #1a1a1a)" }, children: "\uC124\uBA85" }),
+                  /* @__PURE__ */ jsx20(
                     "textarea",
                     {
                       value: description,
@@ -12760,9 +13222,9 @@ var ProjectSettingsModal = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs18("div", { children: [
-                  /* @__PURE__ */ jsx19("label", { style: { display: "block", fontSize: "13px", fontWeight: 500, marginBottom: "6px", color: "var(--chatllm-text, #1a1a1a)" }, children: "\uC0C9\uC0C1" }),
-                  /* @__PURE__ */ jsx19("div", { style: { display: "flex", gap: "8px", flexWrap: "wrap" }, children: COLOR_PRESETS.map((c) => /* @__PURE__ */ jsx19(
+                /* @__PURE__ */ jsxs19("div", { children: [
+                  /* @__PURE__ */ jsx20("label", { style: { display: "block", fontSize: "13px", fontWeight: 500, marginBottom: "6px", color: "var(--chatllm-text, #1a1a1a)" }, children: "\uC0C9\uC0C1" }),
+                  /* @__PURE__ */ jsx20("div", { style: { display: "flex", gap: "8px", flexWrap: "wrap" }, children: COLOR_PRESETS.map((c) => /* @__PURE__ */ jsx20(
                     "button",
                     {
                       onClick: () => setColor(c),
@@ -12780,8 +13242,8 @@ var ProjectSettingsModal = ({
                     c
                   )) })
                 ] }),
-                /* @__PURE__ */ jsxs18("div", { style: { display: "flex", gap: "8px", justifyContent: "flex-end", marginTop: "8px" }, children: [
-                  !isDefaultProject && onDeleteProject && /* @__PURE__ */ jsx19(
+                /* @__PURE__ */ jsxs19("div", { style: { display: "flex", gap: "8px", justifyContent: "flex-end", marginTop: "8px" }, children: [
+                  !isDefaultProject && onDeleteProject && /* @__PURE__ */ jsx20(
                     "button",
                     {
                       onClick: () => {
@@ -12804,7 +13266,7 @@ var ProjectSettingsModal = ({
                       children: "\uD504\uB85C\uC81D\uD2B8 \uC0AD\uC81C"
                     }
                   ),
-                  /* @__PURE__ */ jsx19(
+                  /* @__PURE__ */ jsx20(
                     "button",
                     {
                       onClick: handleSaveGeneral,
@@ -12824,9 +13286,9 @@ var ProjectSettingsModal = ({
                   )
                 ] })
               ] }),
-              activeTab === "instructions" && /* @__PURE__ */ jsxs18("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
-                /* @__PURE__ */ jsx19("p", { style: { fontSize: "13px", color: "var(--chatllm-text-muted, #999)", margin: 0 }, children: "\uC774 \uD504\uB85C\uC81D\uD2B8\uC758 \uBAA8\uB4E0 \uB300\uD654\uC5D0\uC11C AI\uAC00 \uB530\uB77C\uC57C \uD560 \uC9C0\uCE68\uC744 \uC785\uB825\uD558\uC138\uC694." }),
-                /* @__PURE__ */ jsx19(
+              activeTab === "instructions" && /* @__PURE__ */ jsxs19("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
+                /* @__PURE__ */ jsx20("p", { style: { fontSize: "13px", color: "var(--chatllm-text-muted, #999)", margin: 0 }, children: "\uC774 \uD504\uB85C\uC81D\uD2B8\uC758 \uBAA8\uB4E0 \uB300\uD654\uC5D0\uC11C AI\uAC00 \uB530\uB77C\uC57C \uD560 \uC9C0\uCE68\uC744 \uC785\uB825\uD558\uC138\uC694." }),
+                /* @__PURE__ */ jsx20(
                   "textarea",
                   {
                     value: instructions,
@@ -12847,7 +13309,7 @@ var ProjectSettingsModal = ({
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx19("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx19(
+                /* @__PURE__ */ jsx20("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx20(
                   "button",
                   {
                     onClick: handleSaveInstructions,
@@ -12866,10 +13328,10 @@ var ProjectSettingsModal = ({
                   }
                 ) })
               ] }),
-              activeTab === "files" && /* @__PURE__ */ jsxs18("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
-                /* @__PURE__ */ jsxs18("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
-                  /* @__PURE__ */ jsx19("p", { style: { fontSize: "13px", color: "var(--chatllm-text-muted, #999)", margin: 0 }, children: "\uD504\uB85C\uC81D\uD2B8 \uCEE8\uD14D\uC2A4\uD2B8\uB85C \uC0AC\uC6A9\uD560 \uD30C\uC77C\uC744 \uAD00\uB9AC\uD569\uB2C8\uB2E4." }),
-                  /* @__PURE__ */ jsxs18(
+              activeTab === "files" && /* @__PURE__ */ jsxs19("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
+                /* @__PURE__ */ jsxs19("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+                  /* @__PURE__ */ jsx20("p", { style: { fontSize: "13px", color: "var(--chatllm-text-muted, #999)", margin: 0 }, children: "\uD504\uB85C\uC81D\uD2B8 \uCEE8\uD14D\uC2A4\uD2B8\uB85C \uC0AC\uC6A9\uD560 \uD30C\uC77C\uC744 \uAD00\uB9AC\uD569\uB2C8\uB2E4." }),
+                  /* @__PURE__ */ jsxs19(
                     "button",
                     {
                       onClick: handleFileUpload,
@@ -12887,13 +13349,13 @@ var ProjectSettingsModal = ({
                         color: "var(--chatllm-text, #1a1a1a)"
                       },
                       children: [
-                        /* @__PURE__ */ jsx19(IconSvg, { name: "upload-line", size: 14 }),
+                        /* @__PURE__ */ jsx20(IconSvg, { name: "upload-line", size: 14 }),
                         "\uC5C5\uB85C\uB4DC"
                       ]
                     }
                   )
                 ] }),
-                project.files.length === 0 ? /* @__PURE__ */ jsx19(
+                project.files.length === 0 ? /* @__PURE__ */ jsx20(
                   "div",
                   {
                     style: {
@@ -12906,7 +13368,7 @@ var ProjectSettingsModal = ({
                     },
                     children: "\uC544\uC9C1 \uD30C\uC77C\uC774 \uC5C6\uC2B5\uB2C8\uB2E4"
                   }
-                ) : /* @__PURE__ */ jsx19("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: project.files.map((file) => /* @__PURE__ */ jsxs18(
+                ) : /* @__PURE__ */ jsx20("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: project.files.map((file) => /* @__PURE__ */ jsxs19(
                   "div",
                   {
                     style: {
@@ -12918,10 +13380,10 @@ var ProjectSettingsModal = ({
                       borderRadius: "6px"
                     },
                     children: [
-                      /* @__PURE__ */ jsxs18("div", { style: { display: "flex", alignItems: "center", gap: "10px", overflow: "hidden" }, children: [
-                        /* @__PURE__ */ jsx19(IconSvg, { name: getFileIcon2(file.type), size: 18, color: "var(--chatllm-text-muted, #999)" }),
-                        /* @__PURE__ */ jsxs18("div", { style: { overflow: "hidden" }, children: [
-                          /* @__PURE__ */ jsx19(
+                      /* @__PURE__ */ jsxs19("div", { style: { display: "flex", alignItems: "center", gap: "10px", overflow: "hidden" }, children: [
+                        /* @__PURE__ */ jsx20(IconSvg, { name: getFileIcon2(file.type), size: 18, color: "var(--chatllm-text-muted, #999)" }),
+                        /* @__PURE__ */ jsxs19("div", { style: { overflow: "hidden" }, children: [
+                          /* @__PURE__ */ jsx20(
                             "div",
                             {
                               style: {
@@ -12935,13 +13397,13 @@ var ProjectSettingsModal = ({
                               children: file.name
                             }
                           ),
-                          /* @__PURE__ */ jsxs18("div", { style: { fontSize: "11px", color: "var(--chatllm-text-muted, #999)" }, children: [
+                          /* @__PURE__ */ jsxs19("div", { style: { fontSize: "11px", color: "var(--chatllm-text-muted, #999)" }, children: [
                             file.type,
                             formatSize(file.size) ? ` \xB7 ${formatSize(file.size)}` : ""
                           ] })
                         ] })
                       ] }),
-                      /* @__PURE__ */ jsx19(
+                      /* @__PURE__ */ jsx20(
                         "button",
                         {
                           onClick: () => onDeleteFile(project.id, file.id),
@@ -12962,7 +13424,7 @@ var ProjectSettingsModal = ({
                             e.currentTarget.style.opacity = "0.5";
                           },
                           "aria-label": `${file.name} \uC0AD\uC81C`,
-                          children: /* @__PURE__ */ jsx19(IconSvg, { name: "delete-bin-line", size: 16, color: "#dc2626" })
+                          children: /* @__PURE__ */ jsx20(IconSvg, { name: "delete-bin-line", size: 16, color: "#dc2626" })
                         }
                       )
                     ]
@@ -12979,14 +13441,14 @@ var ProjectSettingsModal = ({
 };
 
 // src/react/components/DisclaimerModal.tsx
-import { jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
 var highlightStyle = {
   color: "var(--chatllm-text, #1e293b)",
   fontWeight: 600
 };
 var DisclaimerModal = ({ isOpen, onClose }) => {
   if (!isOpen) return null;
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "div",
     {
       className: "chatllm-disclaimer-overlay",
@@ -13000,7 +13462,7 @@ var DisclaimerModal = ({ isOpen, onClose }) => {
         zIndex: 1e3
       },
       onClick: onClose,
-      children: /* @__PURE__ */ jsxs19(
+      children: /* @__PURE__ */ jsxs20(
         "div",
         {
           className: "chatllm-disclaimer-modal",
@@ -13018,7 +13480,7 @@ var DisclaimerModal = ({ isOpen, onClose }) => {
           },
           onClick: (e) => e.stopPropagation(),
           children: [
-            /* @__PURE__ */ jsxs19(
+            /* @__PURE__ */ jsxs20(
               "div",
               {
                 style: {
@@ -13029,9 +13491,9 @@ var DisclaimerModal = ({ isOpen, onClose }) => {
                   borderBottom: "1px solid var(--chatllm-border, #e5e7eb)"
                 },
                 children: [
-                  /* @__PURE__ */ jsxs19("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-                    /* @__PURE__ */ jsx20(IconSvg, { name: "error-warning-line", size: 20, color: "var(--chatllm-primary, #3584FA)" }),
-                    /* @__PURE__ */ jsx20(
+                  /* @__PURE__ */ jsxs20("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                    /* @__PURE__ */ jsx21(IconSvg, { name: "error-warning-line", size: 20, color: "var(--chatllm-primary, #3584FA)" }),
+                    /* @__PURE__ */ jsx21(
                       "h2",
                       {
                         style: {
@@ -13044,7 +13506,7 @@ var DisclaimerModal = ({ isOpen, onClose }) => {
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsx20(
+                  /* @__PURE__ */ jsx21(
                     "button",
                     {
                       onClick: onClose,
@@ -13059,13 +13521,13 @@ var DisclaimerModal = ({ isOpen, onClose }) => {
                         alignItems: "center",
                         justifyContent: "center"
                       },
-                      children: /* @__PURE__ */ jsx20(IconSvg, { name: "close-line", size: 20, color: "var(--chatllm-text-muted, #64748b)" })
+                      children: /* @__PURE__ */ jsx21(IconSvg, { name: "close-line", size: 20, color: "var(--chatllm-text-muted, #64748b)" })
                     }
                   )
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs19(
+            /* @__PURE__ */ jsxs20(
               "div",
               {
                 className: "chatllm-scrollbar",
@@ -13077,12 +13539,12 @@ var DisclaimerModal = ({ isOpen, onClose }) => {
                   color: "var(--chatllm-text-secondary, #475569)"
                 },
                 children: [
-                  /* @__PURE__ */ jsxs19("p", { style: { margin: "0 0 16px" }, children: [
+                  /* @__PURE__ */ jsxs20("p", { style: { margin: "0 0 16px" }, children: [
                     "\uC800\uB294 \uC5EC\uB7EC\uBD84\uC758 \uC9C8\uBB38\uC5D0 ",
-                    /* @__PURE__ */ jsx20("span", { style: highlightStyle, children: "\uCD5C\uC120\uC758 \uB2F5\uBCC0\uC744 \uB4DC\uB9AC\uAE30 \uC704\uD574 \uD56D\uC0C1 \uB178\uB825" }),
+                    /* @__PURE__ */ jsx21("span", { style: highlightStyle, children: "\uCD5C\uC120\uC758 \uB2F5\uBCC0\uC744 \uB4DC\uB9AC\uAE30 \uC704\uD574 \uD56D\uC0C1 \uB178\uB825" }),
                     "\uD558\uACE0 \uC788\uC5B4\uC694. \uD558\uC9C0\uB9CC \uC194\uC9C1\uD558\uAC8C \uB9D0\uC500\uB4DC\uB9AC\uBA74, \uC800\uB3C4 \uB54C\uB54C\uB85C \uC2E4\uC218\uB97C \uD558\uAC70\uB098 \uC815\uD655\uD558\uC9C0 \uC54A\uC740 \uB2F5\uBCC0\uC744 \uB4DC\uB9B4 \uC218 \uC788\uC2B5\uB2C8\uB2E4."
                   ] }),
-                  /* @__PURE__ */ jsxs19(
+                  /* @__PURE__ */ jsxs20(
                     "div",
                     {
                       style: {
@@ -13095,33 +13557,33 @@ var DisclaimerModal = ({ isOpen, onClose }) => {
                         lineHeight: 1.7
                       },
                       children: [
-                        /* @__PURE__ */ jsx20("p", { style: { margin: "0 0 8px", fontWeight: 600, color: "var(--chatllm-text, #1e293b)" }, children: "\uC81C\uAC00 \uC774\uB7F0 \uC2E4\uC218\uB97C \uD560 \uC218 \uC788\uC5B4\uC694" }),
-                        /* @__PURE__ */ jsxs19("ul", { style: { margin: 0, paddingLeft: "18px", display: "flex", flexDirection: "column", gap: "4px" }, children: [
-                          /* @__PURE__ */ jsx20("li", { children: "\uCD5C\uC2E0 \uC815\uBCF4\uB97C \uBC18\uC601\uD558\uC9C0 \uBABB\uD55C \uB2F5\uBCC0\uC744 \uB4DC\uB9AC\uB294 \uACBD\uC6B0" }),
-                          /* @__PURE__ */ jsx20("li", { children: "\uADF8\uB7F4\uB4EF\uD558\uAC8C \uB4E4\uB9AC\uC9C0\uB9CC \uC2E4\uC81C\uB85C\uB294 \uC815\uD655\uD558\uC9C0 \uC54A\uC740 \uB0B4\uC6A9" }),
-                          /* @__PURE__ */ jsx20("li", { children: "\uC2E4\uC81C\uB85C \uC874\uC7AC\uD558\uC9C0 \uC54A\uB294 \uCD9C\uCC98\uB098 \uC778\uC6A9\uC744 \uB9CC\uB4E4\uC5B4\uB0B4\uB294 \uACBD\uC6B0" })
+                        /* @__PURE__ */ jsx21("p", { style: { margin: "0 0 8px", fontWeight: 600, color: "var(--chatllm-text, #1e293b)" }, children: "\uC81C\uAC00 \uC774\uB7F0 \uC2E4\uC218\uB97C \uD560 \uC218 \uC788\uC5B4\uC694" }),
+                        /* @__PURE__ */ jsxs20("ul", { style: { margin: 0, paddingLeft: "18px", display: "flex", flexDirection: "column", gap: "4px" }, children: [
+                          /* @__PURE__ */ jsx21("li", { children: "\uCD5C\uC2E0 \uC815\uBCF4\uB97C \uBC18\uC601\uD558\uC9C0 \uBABB\uD55C \uB2F5\uBCC0\uC744 \uB4DC\uB9AC\uB294 \uACBD\uC6B0" }),
+                          /* @__PURE__ */ jsx21("li", { children: "\uADF8\uB7F4\uB4EF\uD558\uAC8C \uB4E4\uB9AC\uC9C0\uB9CC \uC2E4\uC81C\uB85C\uB294 \uC815\uD655\uD558\uC9C0 \uC54A\uC740 \uB0B4\uC6A9" }),
+                          /* @__PURE__ */ jsx21("li", { children: "\uC2E4\uC81C\uB85C \uC874\uC7AC\uD558\uC9C0 \uC54A\uB294 \uCD9C\uCC98\uB098 \uC778\uC6A9\uC744 \uB9CC\uB4E4\uC5B4\uB0B4\uB294 \uACBD\uC6B0" })
                         ] })
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsxs19("p", { style: { margin: "0 0 16px" }, children: [
+                  /* @__PURE__ */ jsxs20("p", { style: { margin: "0 0 16px" }, children: [
                     "\uC774\uB7F0 \uD604\uC0C1\uC744 ",
-                    /* @__PURE__ */ jsx20("span", { style: highlightStyle, children: "'\uD658\uAC01(Hallucination)'" }),
+                    /* @__PURE__ */ jsx21("span", { style: highlightStyle, children: "'\uD658\uAC01(Hallucination)'" }),
                     "\uC774\uB77C\uACE0 \uBD80\uB974\uB294\uB370\uC694, \uC544\uC9C1\uC740 \uC800\uC640 \uAC19\uC740 AI\uAC00 \uAC00\uC9C4 \uADFC\uBCF8\uC801\uC778 \uD55C\uACC4\uC608\uC694. \uC81C \uB2F5\uBCC0\uC774 \uC544\uBB34\uB9AC \uC790\uC5F0\uC2A4\uB7EC\uC6CC \uBCF4\uC5EC\uB3C4, ",
-                    /* @__PURE__ */ jsx20("span", { style: highlightStyle, children: "\uD55C \uBC88 \uB354 \uD655\uC778" }),
+                    /* @__PURE__ */ jsx21("span", { style: highlightStyle, children: "\uD55C \uBC88 \uB354 \uD655\uC778" }),
                     "\uD574 \uC8FC\uC2DC\uBA74 \uAC10\uC0AC\uD558\uACA0\uC2B5\uB2C8\uB2E4."
                   ] }),
-                  /* @__PURE__ */ jsxs19("p", { style: { margin: "0 0 16px" }, children: [
-                    /* @__PURE__ */ jsx20("span", { style: highlightStyle, children: "\uC81C \uB2F5\uBCC0\uC740 \uCC38\uACE0 \uC790\uB8CC" }),
+                  /* @__PURE__ */ jsxs20("p", { style: { margin: "0 0 16px" }, children: [
+                    /* @__PURE__ */ jsx21("span", { style: highlightStyle, children: "\uC81C \uB2F5\uBCC0\uC740 \uCC38\uACE0 \uC790\uB8CC" }),
                     "\uB85C \uD65C\uC6A9\uD574 \uC8FC\uC2DC\uACE0, \uC911\uC694\uD55C \uD310\uB2E8\uC744 \uB0B4\uB9AC\uC2E4 \uB54C\uB294 \uAF2D \uCD94\uAC00\uB85C \uD655\uC778\uD574 \uC8FC\uC138\uC694. \uC800\uB3C4 \uB354 \uC815\uD655\uD55C \uB2F5\uBCC0\uC744 \uB4DC\uB9AC\uAE30 \uC704\uD574 \uACC4\uC18D \uBC1C\uC804\uD558\uACE0 \uC788\uC2B5\uB2C8\uB2E4."
                   ] }),
-                  /* @__PURE__ */ jsxs19("p", { style: { margin: "0 0 16px" }, children: [
+                  /* @__PURE__ */ jsxs20("p", { style: { margin: "0 0 16px" }, children: [
                     "\uC81C\uAC00 \uC6F9 \uAC80\uC0C9 \uACB0\uACFC\uB97C \uC54C\uB824\uB4DC\uB9B4 \uB54C\uB3C4,",
                     " ",
-                    /* @__PURE__ */ jsx20("span", { style: highlightStyle, children: "\uC6D0\uBCF8 \uCD9C\uCC98\uB97C \uC9C1\uC811 \uD655\uC778" }),
+                    /* @__PURE__ */ jsx21("span", { style: highlightStyle, children: "\uC6D0\uBCF8 \uCD9C\uCC98\uB97C \uC9C1\uC811 \uD655\uC778" }),
                     "\uD574 \uBCF4\uC2DC\uB294 \uAC78 \uCD94\uCC9C\uB4DC\uB824\uC694. \uC694\uC57D \uACFC\uC815\uC5D0\uC11C \uB193\uCE60 \uC218 \uC788\uB294 \uC911\uC694\uD55C \uB9E5\uB77D\uC774 \uC6D0\uBCF8\uC5D0 \uB2F4\uACA8 \uC788\uC744 \uC218 \uC788\uAC70\uB4E0\uC694."
                   ] }),
-                  /* @__PURE__ */ jsx20(
+                  /* @__PURE__ */ jsx21(
                     "div",
                     {
                       style: {
@@ -13132,10 +13594,10 @@ var DisclaimerModal = ({ isOpen, onClose }) => {
                         lineHeight: 1.7,
                         textAlign: "center"
                       },
-                      children: /* @__PURE__ */ jsxs19("p", { style: { margin: 0 }, children: [
+                      children: /* @__PURE__ */ jsxs20("p", { style: { margin: 0 }, children: [
                         "\uC800\uC5D0 \uB300\uD55C \uC758\uACAC\uC774\uB098 \uAC1C\uC120 \uC81C\uC548\uC774 \uC788\uC73C\uC2DC\uB2E4\uBA74",
                         " ",
-                        /* @__PURE__ */ jsx20(
+                        /* @__PURE__ */ jsx21(
                           "a",
                           {
                             href: "mailto:info@gendive.ai",
@@ -13148,7 +13610,7 @@ var DisclaimerModal = ({ isOpen, onClose }) => {
                           }
                         ),
                         "\uB85C \uC54C\uB824\uC8FC\uC138\uC694.",
-                        /* @__PURE__ */ jsx20("br", {}),
+                        /* @__PURE__ */ jsx21("br", {}),
                         "\uC5EC\uB7EC\uBD84\uC758 \uD53C\uB4DC\uBC31 \uD558\uB098\uD558\uB098\uAC00 \uC81C\uAC00 \uC131\uC7A5\uD558\uB294 \uB370 \uD070 \uD798\uC774 \uB429\uB2C8\uB2E4."
                       ] })
                     }
@@ -13164,7 +13626,7 @@ var DisclaimerModal = ({ isOpen, onClose }) => {
 };
 
 // src/react/components/ChecklistPanel.tsx
-import { Fragment as Fragment8, jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
 var ChecklistPanel = ({
   message,
   isOpen,
@@ -13178,8 +13640,8 @@ var ChecklistPanel = ({
 }) => {
   const block = message?.checklistBlock;
   if (isMobileOverlay) {
-    return /* @__PURE__ */ jsxs20(Fragment8, { children: [
-      /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsxs21(Fragment8, { children: [
+      /* @__PURE__ */ jsx22(
         "div",
         {
           onClick: onClose,
@@ -13194,7 +13656,7 @@ var ChecklistPanel = ({
           }
         }
       ),
-      /* @__PURE__ */ jsx21(
+      /* @__PURE__ */ jsx22(
         "aside",
         {
           style: {
@@ -13217,7 +13679,7 @@ var ChecklistPanel = ({
       )
     ] });
   }
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     "aside",
     {
       style: {
@@ -13235,8 +13697,8 @@ var ChecklistPanel = ({
     }
   );
   function renderPanelContent() {
-    return /* @__PURE__ */ jsxs20(Fragment8, { children: [
-      /* @__PURE__ */ jsxs20(
+    return /* @__PURE__ */ jsxs21(Fragment8, { children: [
+      /* @__PURE__ */ jsxs21(
         "div",
         {
           style: {
@@ -13248,9 +13710,9 @@ var ChecklistPanel = ({
             flexShrink: 0
           },
           children: [
-            /* @__PURE__ */ jsxs20("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-              /* @__PURE__ */ jsx21(IconSvg, { name: "list-check", size: 18, color: "var(--chatllm-primary, #3584FA)" }),
-              /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsxs21("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+              /* @__PURE__ */ jsx22(IconSvg, { name: "list-check", size: 18, color: "var(--chatllm-primary, #3584FA)" }),
+              /* @__PURE__ */ jsx22(
                 "span",
                 {
                   style: {
@@ -13262,7 +13724,7 @@ var ChecklistPanel = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsx22(
               "button",
               {
                 onClick: onClose,
@@ -13280,13 +13742,13 @@ var ChecklistPanel = ({
                   color: "var(--chatllm-text-muted, #94a3b8)",
                   transition: "background-color 0.15s ease"
                 },
-                children: /* @__PURE__ */ jsx21(IconSvg, { name: "close-line", size: 18, color: "currentColor" })
+                children: /* @__PURE__ */ jsx22(IconSvg, { name: "close-line", size: 18, color: "currentColor" })
               }
             )
           ]
         }
       ),
-      /* @__PURE__ */ jsx21(
+      /* @__PURE__ */ jsx22(
         "div",
         {
           className: "chatllm-scrollbar",
@@ -13295,7 +13757,7 @@ var ChecklistPanel = ({
             overflowY: "auto",
             padding: "16px"
           },
-          children: block && block.items.length > 0 ? /* @__PURE__ */ jsx21(
+          children: block && block.items.length > 0 ? /* @__PURE__ */ jsx22(
             ChecklistCard,
             {
               items: block.items,
@@ -13306,7 +13768,7 @@ var ChecklistPanel = ({
               onSkipStep: onSkip,
               onStart
             }
-          ) : /* @__PURE__ */ jsx21(
+          ) : /* @__PURE__ */ jsx22(
             "div",
             {
               style: {
@@ -13383,6 +13845,57 @@ var injectBaseStyles = () => {
       to { opacity: 1; }
     }
 
+    @keyframes chatllm-stream-fadein {
+      from { opacity: 0; transform: translateY(4px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+
+    .chatllm-message--assistant .chatllm-sheet {
+      animation: chatllm-stream-fadein 0.3s ease-out;
+    }
+
+    /* \uC2A4\uD2B8\uB9AC\uBC0D \uD14D\uC2A4\uD2B8 \uBD80\uB4DC\uB7EC\uC6B4 \uB192\uC774 \uC804\uD658 */
+    .chatllm-message--assistant .chatllm-sheet > div {
+      transition: height 0.15s ease-out;
+    }
+
+    /* \uC2A4\uD2B8\uB9AC\uBC0D \uC911 \uB9C8\uC9C0\uB9C9 \uB2E8\uC5B4 \uD398\uC774\uB4DC\uC778 \uD6A8\uACFC */
+    @keyframes chatllm-word-fadein {
+      from { opacity: 0.3; }
+      to { opacity: 1; }
+    }
+
+    .chatllm-streaming-content p:last-child,
+    .chatllm-streaming-content li:last-child,
+    .chatllm-streaming-content h1:last-child,
+    .chatllm-streaming-content h2:last-child,
+    .chatllm-streaming-content h3:last-child {
+      animation: chatllm-word-fadein 0.2s ease-out;
+    }
+
+    @keyframes chatllm-artifact-enter {
+      from {
+        opacity: 0;
+        transform: translateY(12px) scale(0.97);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+      }
+    }
+
+    .chatllm-artifact-card {
+      animation: chatllm-artifact-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
+    }
+
+    /** @Todo vibecode - artifact \uC0DD\uC131 \uC911 \uB85C\uB529 \uC778\uB514\uCF00\uC774\uD130 \uC2A4\uD540 + \uD398\uC774\uB4DC\uC778 */
+    .chatllm-artifact-loading {
+      animation: chatllm-stream-fadein 0.3s ease both;
+    }
+    .chatllm-artifact-loading svg {
+      animation: chatllm-spin 1s linear infinite;
+    }
+
     .chatllm-root {
       --chatllm-primary: #3584FA;
       --chatllm-primary-hover: #2D70D5;
@@ -13884,7 +14397,7 @@ var injectFloatingStyles = () => {
 };
 
 // src/react/ChatUI.tsx
-import { Fragment as Fragment9, jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
 var DEFAULT_ACTIONS = [];
 var DEFAULT_TEMPLATES = [];
 var DEFAULT_MODELS = [
@@ -13990,28 +14503,28 @@ var ChatUIView = ({
     handleChecklistSkip,
     activeChecklistMessage
   } = state;
-  const [disclaimerOpen, setDisclaimerOpen] = React16.useState(false);
-  const [isMobile, setIsMobile] = React16.useState(false);
-  React16.useEffect(() => {
+  const [disclaimerOpen, setDisclaimerOpen] = React17.useState(false);
+  const [isMobile, setIsMobile] = React17.useState(false);
+  React17.useEffect(() => {
     if (typeof window === "undefined") return;
     const check = () => setIsMobile(window.innerWidth < 768);
     check();
     window.addEventListener("resize", check);
     return () => window.removeEventListener("resize", check);
   }, []);
-  const [checklistPanelDismissed, setChecklistPanelDismissed] = React16.useState(false);
+  const [checklistPanelDismissed, setChecklistPanelDismissed] = React17.useState(false);
   const isChecklistPanelOpen = !!activeChecklistMessage && !checklistPanelDismissed;
-  const prevChecklistIdRef = React16.useRef(void 0);
-  React16.useEffect(() => {
+  const prevChecklistIdRef = React17.useRef(void 0);
+  React17.useEffect(() => {
     const currentId = activeChecklistMessage?.checklistBlock?.id;
     if (currentId && currentId !== prevChecklistIdRef.current && !activeChecklistMessage?.checklistBlock?.completed) {
       setChecklistPanelDismissed(false);
     }
     prevChecklistIdRef.current = currentId;
   }, [activeChecklistMessage?.checklistBlock?.id, activeChecklistMessage?.checklistBlock?.completed]);
-  const [welcomeExiting, setWelcomeExiting] = React16.useState(false);
-  const prevMessageCountRef = React16.useRef(messages.length);
-  React16.useEffect(() => {
+  const [welcomeExiting, setWelcomeExiting] = React17.useState(false);
+  const prevMessageCountRef = React17.useRef(messages.length);
+  React17.useEffect(() => {
     let timer;
     if (prevMessageCountRef.current === 0 && messages.length > 0) {
       setWelcomeExiting(true);
@@ -14035,7 +14548,7 @@ var ChatUIView = ({
   const handleChoiceClick = (choice) => {
     setInput(choice.text);
   };
-  const memoryItems = React16.useMemo(() => {
+  const memoryItems = React17.useMemo(() => {
     if (!globalMemory?.state.entries) return [];
     const items = [];
     for (const [key, entry] of globalMemory.state.entries) {
@@ -14049,7 +14562,7 @@ var ChatUIView = ({
     }
     return items;
   }, [globalMemory?.state.entries]);
-  const projectMemoryItems = React16.useMemo(() => {
+  const projectMemoryItems = React17.useMemo(() => {
     if (!projectMemory?.state.entries) return [];
     const items = [];
     for (const [key, entry] of projectMemory.state.entries) {
@@ -14064,7 +14577,7 @@ var ChatUIView = ({
     return items;
   }, [projectMemory?.state.entries]);
   const themeClass = theme?.mode === "dark" ? "chatllm-dark" : "";
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     "div",
     {
       className: `chatllm-root ${themeClass} ${className}`,
@@ -14077,7 +14590,7 @@ var ChatUIView = ({
         position: "relative"
       },
       children: [
-        showSidebar && /* @__PURE__ */ jsx22(
+        showSidebar && /* @__PURE__ */ jsx23(
           ChatSidebar,
           {
             sessions,
@@ -14109,7 +14622,7 @@ var ChatUIView = ({
             isLoading: isSessionsLoading
           }
         ),
-        /* @__PURE__ */ jsxs21(
+        /* @__PURE__ */ jsxs22(
           "main",
           {
             style: {
@@ -14121,7 +14634,7 @@ var ChatUIView = ({
               minWidth: 0
             },
             children: [
-              /* @__PURE__ */ jsx22(
+              /* @__PURE__ */ jsx23(
                 ChatHeader,
                 {
                   title: currentSession?.title || "\uC0C8 \uB300\uD654",
@@ -14136,7 +14649,7 @@ var ChatUIView = ({
                   renderHeaderExtra
                 }
               ),
-              (messages.length === 0 || welcomeExiting) && /* @__PURE__ */ jsxs21(
+              (messages.length === 0 || welcomeExiting) && /* @__PURE__ */ jsxs22(
                 "div",
                 {
                   style: {
@@ -14151,7 +14664,7 @@ var ChatUIView = ({
                     pointerEvents: welcomeExiting ? "none" : "auto"
                   },
                   children: [
-                    /* @__PURE__ */ jsx22(
+                    /* @__PURE__ */ jsx23(
                       "h1",
                       {
                         style: {
@@ -14165,7 +14678,7 @@ var ChatUIView = ({
                         children: greeting ? `${greeting} \u273A` : "\u273A \uBB34\uC5C7\uC744 \uC0DD\uAC01\uD574 \uBCFC\uAE4C\uC694?"
                       }
                     ),
-                    /* @__PURE__ */ jsx22("div", { style: { width: "100%", maxWidth: "680px" }, children: /* @__PURE__ */ jsx22(
+                    /* @__PURE__ */ jsx23("div", { style: { width: "100%", maxWidth: "680px" }, children: /* @__PURE__ */ jsx23(
                       ChatInput,
                       {
                         value: input,
@@ -14193,7 +14706,7 @@ var ChatUIView = ({
                         inline: true
                       }
                     ) }),
-                    suggestedPrompts && suggestedPrompts.length > 0 && /* @__PURE__ */ jsx22(
+                    suggestedPrompts && suggestedPrompts.length > 0 && /* @__PURE__ */ jsx23(
                       "div",
                       {
                         style: {
@@ -14203,7 +14716,7 @@ var ChatUIView = ({
                           justifyContent: "center",
                           maxWidth: "680px"
                         },
-                        children: suggestedPrompts.map((sp) => /* @__PURE__ */ jsxs21(
+                        children: suggestedPrompts.map((sp) => /* @__PURE__ */ jsxs22(
                           "button",
                           {
                             onClick: () => setInput(sp.prompt),
@@ -14222,7 +14735,7 @@ var ChatUIView = ({
                               transition: "all 0.2s"
                             },
                             children: [
-                              sp.icon && /* @__PURE__ */ jsx22(IconSvg, { name: sp.icon, size: 16, color: "var(--chatllm-text-muted)" }),
+                              sp.icon && /* @__PURE__ */ jsx23(IconSvg, { name: sp.icon, size: 16, color: "var(--chatllm-text-muted)" }),
                               sp.label
                             ]
                           },
@@ -14233,8 +14746,8 @@ var ChatUIView = ({
                   ]
                 }
               ),
-              messages.length > 0 && /* @__PURE__ */ jsxs21(Fragment9, { children: [
-                /* @__PURE__ */ jsx22(
+              messages.length > 0 && /* @__PURE__ */ jsxs22(Fragment9, { children: [
+                /* @__PURE__ */ jsx23(
                   MessageList,
                   {
                     messages,
@@ -14264,7 +14777,7 @@ var ChatUIView = ({
                     onToggleChecklistPanel: () => setChecklistPanelDismissed(false)
                   }
                 ),
-                /* @__PURE__ */ jsx22(
+                /* @__PURE__ */ jsx23(
                   ChatInput,
                   {
                     value: input,
@@ -14295,7 +14808,7 @@ var ChatUIView = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx23(
           ChecklistPanel,
           {
             message: activeChecklistMessage,
@@ -14308,7 +14821,7 @@ var ChatUIView = ({
             isMobileOverlay: isMobile
           }
         ),
-        showSettings && /* @__PURE__ */ jsx22(
+        showSettings && /* @__PURE__ */ jsx23(
           SettingsModal,
           {
             isOpen: settingsOpen,
@@ -14337,7 +14850,7 @@ var ChatUIView = ({
             importMemoryPrompt
           }
         ),
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx23(
           ProjectSettingsModal,
           {
             isOpen: projectSettingsOpen,
@@ -14349,7 +14862,7 @@ var ChatUIView = ({
             onDeleteProject: deleteProject
           }
         ),
-        /* @__PURE__ */ jsx22(DisclaimerModal, { isOpen: disclaimerOpen, onClose: () => setDisclaimerOpen(false) })
+        /* @__PURE__ */ jsx23(DisclaimerModal, { isOpen: disclaimerOpen, onClose: () => setDisclaimerOpen(false) })
       ]
     }
   );
@@ -14474,7 +14987,7 @@ var ChatUIWithHook = ({
     onUploadImage
   };
   const state = useChatUI(hookOptions);
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     ChatUIView,
     {
       state,
@@ -14531,7 +15044,7 @@ var ChatUI = (props) => {
       onImportMemory,
       importMemoryPrompt
     } = props;
-    return /* @__PURE__ */ jsx22(
+    return /* @__PURE__ */ jsx23(
       ChatUIView,
       {
         state: props.chatState,
@@ -14561,17 +15074,17 @@ var ChatUI = (props) => {
       }
     );
   }
-  return /* @__PURE__ */ jsx22(ChatUIWithHook, { ...props });
+  return /* @__PURE__ */ jsx23(ChatUIWithHook, { ...props });
 };
 
 // src/react/ChatFloatingWidget.tsx
-import { useState as useState27, useRef as useRef16, useEffect as useEffect18, useMemo as useMemo7, useCallback as useCallback14 } from "react";
+import { useState as useState28, useRef as useRef17, useEffect as useEffect19, useMemo as useMemo7, useCallback as useCallback15 } from "react";
 
 // src/react/hooks/useFloatingWidget.ts
-import { useState as useState21, useCallback as useCallback11, useEffect as useEffect13, useRef as useRef11 } from "react";
+import { useState as useState22, useCallback as useCallback12, useEffect as useEffect14, useRef as useRef12 } from "react";
 
 // src/react/hooks/useDragResize.ts
-import { useState as useState20, useRef as useRef10, useCallback as useCallback10, useEffect as useEffect12, useMemo as useMemo6 } from "react";
+import { useState as useState21, useRef as useRef11, useCallback as useCallback11, useEffect as useEffect13, useMemo as useMemo6 } from "react";
 var DRAG_THRESHOLD = 5;
 var FAB_SIZE = 56;
 var EDGE_MARGIN = 24;
@@ -14639,8 +15152,8 @@ var useDragResize = (options) => {
     maxWidth = DEFAULT_MAX_WIDTH,
     minHeight = DEFAULT_MIN_HEIGHT
   } = options;
-  const [isMobile, setIsMobile] = useState20(false);
-  useEffect12(() => {
+  const [isMobile, setIsMobile] = useState21(false);
+  useEffect13(() => {
     if (typeof window === "undefined") return;
     const mql = window.matchMedia("(max-width: 767px)");
     setIsMobile(mql.matches);
@@ -14655,19 +15168,19 @@ var useDragResize = (options) => {
     panelWidth: initialWidth,
     panelHeight: initialHeight
   });
-  const [fabPos, setFabPos] = useState20({ x: persisted.fabX, y: persisted.fabY });
-  const [panelSize, setPanelSize] = useState20({ width: persisted.panelWidth, height: persisted.panelHeight });
-  const [isDragging, setIsDragging] = useState20(false);
-  const [isResizing, setIsResizing] = useState20(false);
-  const [isDizzy, setIsDizzy] = useState20(false);
-  const [viewport, setViewport] = useState20(() => ({
+  const [fabPos, setFabPos] = useState21({ x: persisted.fabX, y: persisted.fabY });
+  const [panelSize, setPanelSize] = useState21({ width: persisted.panelWidth, height: persisted.panelHeight });
+  const [isDragging, setIsDragging] = useState21(false);
+  const [isResizing, setIsResizing] = useState21(false);
+  const [isDizzy, setIsDizzy] = useState21(false);
+  const [viewport, setViewport] = useState21(() => ({
     width: typeof window !== "undefined" ? window.innerWidth : 1024,
     height: typeof window !== "undefined" ? window.innerHeight : 768
   }));
   const vw = viewport.width;
   const vh = viewport.height;
-  const initializedRef = useRef10(false);
-  useEffect12(() => {
+  const initializedRef = useRef11(false);
+  useEffect13(() => {
     if (initializedRef.current || typeof window === "undefined") return;
     initializedRef.current = true;
     const correctFab = getInitialFabPosition(initialPosition);
@@ -14680,39 +15193,39 @@ var useDragResize = (options) => {
     setFabPos({ x: loaded.fabX, y: loaded.fabY });
     setPanelSize({ width: loaded.panelWidth, height: loaded.panelHeight });
   }, [initialPosition, storageKey, initialWidth, initialHeight]);
-  const dragStartRef = useRef10(null);
-  const isDraggingRef = useRef10(false);
-  const wasDragRef = useRef10(false);
-  const dragDeltaRef = useRef10({ dx: 0, dy: 0 });
-  const fabElRef = useRef10(null);
-  const dragCleanupRef = useRef10(null);
-  const snapTimerRef = useRef10(null);
-  const prevDragRef = useRef10(null);
-  const shakeScoreRef = useRef10(0);
-  const prevVelocityRef = useRef10(null);
-  const isDizzyRef = useRef10(false);
-  const dizzyTimerRef = useRef10(null);
-  const lastVelocityRef = useRef10({ vx: 0, vy: 0, speed: 0 });
-  const dragRafRef = useRef10(null);
-  const animCleanupRef = useRef10(null);
-  const snapEnabledRef = useRef10(snapEnabled);
-  const storageKeyRef = useRef10(storageKey);
-  const panelSizeRef = useRef10(panelSize);
-  const fabPosRef = useRef10(fabPos);
-  useEffect12(() => {
+  const dragStartRef = useRef11(null);
+  const isDraggingRef = useRef11(false);
+  const wasDragRef = useRef11(false);
+  const dragDeltaRef = useRef11({ dx: 0, dy: 0 });
+  const fabElRef = useRef11(null);
+  const dragCleanupRef = useRef11(null);
+  const snapTimerRef = useRef11(null);
+  const prevDragRef = useRef11(null);
+  const shakeScoreRef = useRef11(0);
+  const prevVelocityRef = useRef11(null);
+  const isDizzyRef = useRef11(false);
+  const dizzyTimerRef = useRef11(null);
+  const lastVelocityRef = useRef11({ vx: 0, vy: 0, speed: 0 });
+  const dragRafRef = useRef11(null);
+  const animCleanupRef = useRef11(null);
+  const snapEnabledRef = useRef11(snapEnabled);
+  const storageKeyRef = useRef11(storageKey);
+  const panelSizeRef = useRef11(panelSize);
+  const fabPosRef = useRef11(fabPos);
+  useEffect13(() => {
     snapEnabledRef.current = snapEnabled;
   }, [snapEnabled]);
-  useEffect12(() => {
+  useEffect13(() => {
     storageKeyRef.current = storageKey;
   }, [storageKey]);
-  useEffect12(() => {
+  useEffect13(() => {
     panelSizeRef.current = panelSize;
   }, [panelSize]);
-  useEffect12(() => {
+  useEffect13(() => {
     fabPosRef.current = fabPos;
   }, [fabPos]);
-  const resizeStartRef = useRef10(null);
-  useEffect12(() => {
+  const resizeStartRef = useRef11(null);
+  useEffect13(() => {
     return () => {
       dragCleanupRef.current?.();
       if (snapTimerRef.current) clearTimeout(snapTimerRef.current);
@@ -14720,7 +15233,7 @@ var useDragResize = (options) => {
       if (dragRafRef.current) cancelAnimationFrame(dragRafRef.current);
     };
   }, []);
-  const handleFabPointerDown = useCallback10((e) => {
+  const handleFabPointerDown = useCallback11((e) => {
     if (disabled || isMobile) return;
     dragCleanupRef.current?.();
     const el = e.currentTarget;
@@ -14933,7 +15446,7 @@ var useDragResize = (options) => {
       borderRadius: "var(--floating-panel-radius, 16px)"
     };
   }, [isMobile, disabled, fabPos.x, fabPos.y, panelSize.width, panelSize.height, vw, vh, panelDirection, minHeight]);
-  const handleResizePointerDown = useCallback10((edge, e) => {
+  const handleResizePointerDown = useCallback11((edge, e) => {
     if (disabled || isMobile) return;
     e.preventDefault();
     e.stopPropagation();
@@ -14949,7 +15462,7 @@ var useDragResize = (options) => {
     };
     setIsResizing(true);
   }, [disabled, isMobile]);
-  const handleResizePointerMove = useCallback10((e) => {
+  const handleResizePointerMove = useCallback11((e) => {
     if (!resizeStartRef.current) return;
     const { startX, startY, width, height, edge, fabY } = resizeStartRef.current;
     const dx = e.clientX - startX;
@@ -14973,7 +15486,7 @@ var useDragResize = (options) => {
     newHeight = Math.max(minHeight, Math.min(maxH, newHeight));
     setPanelSize({ width: newWidth, height: newHeight });
   }, [minWidth, maxWidth, minHeight]);
-  const handleResizePointerUp = useCallback10((e) => {
+  const handleResizePointerUp = useCallback11((e) => {
     if (!resizeStartRef.current) return;
     e.currentTarget.releasePointerCapture(e.pointerId);
     resizeStartRef.current = null;
@@ -14982,7 +15495,7 @@ var useDragResize = (options) => {
     const fp = fabPosRef.current;
     persistState(storageKeyRef.current, { fabX: fp.x, fabY: fp.y, panelWidth: ps.width, panelHeight: ps.height });
   }, []);
-  useEffect12(() => {
+  useEffect13(() => {
     if (typeof window === "undefined") return;
     const handleResize = () => {
       const newVw = window.innerWidth;
@@ -15040,9 +15553,9 @@ var useFloatingWidget = (options) => {
     maxWidth,
     minHeight
   } = options || {};
-  const [isOpen, setIsOpen] = useState21(defaultOpen);
-  const [activeTab, setActiveTab] = useState21(defaultTab);
-  const panelRef = useRef11(null);
+  const [isOpen, setIsOpen] = useState22(defaultOpen);
+  const [activeTab, setActiveTab] = useState22(defaultTab);
+  const panelRef = useRef12(null);
   const dragResize = useDragResize({
     initialPosition: position,
     initialWidth: width,
@@ -15054,27 +15567,27 @@ var useFloatingWidget = (options) => {
     maxWidth,
     minHeight
   });
-  const onOpenRef = useRef11(onOpen);
-  const onCloseRef = useRef11(onClose);
-  const onTabChangeRef = useRef11(onTabChange);
-  useEffect13(() => {
+  const onOpenRef = useRef12(onOpen);
+  const onCloseRef = useRef12(onClose);
+  const onTabChangeRef = useRef12(onTabChange);
+  useEffect14(() => {
     onOpenRef.current = onOpen;
   }, [onOpen]);
-  useEffect13(() => {
+  useEffect14(() => {
     onCloseRef.current = onClose;
   }, [onClose]);
-  useEffect13(() => {
+  useEffect14(() => {
     onTabChangeRef.current = onTabChange;
   }, [onTabChange]);
-  const open = useCallback11(() => {
+  const open = useCallback12(() => {
     setIsOpen(true);
     onOpenRef.current?.();
   }, []);
-  const close = useCallback11(() => {
+  const close = useCallback12(() => {
     setIsOpen(false);
     onCloseRef.current?.();
   }, []);
-  const toggle = useCallback11(() => {
+  const toggle = useCallback12(() => {
     setIsOpen((prev) => {
       const next = !prev;
       if (next) onOpenRef.current?.();
@@ -15082,15 +15595,15 @@ var useFloatingWidget = (options) => {
       return next;
     });
   }, []);
-  const setTab = useCallback11((tabKey) => {
+  const setTab = useCallback12((tabKey) => {
     setActiveTab(tabKey);
     onTabChangeRef.current?.(tabKey);
   }, []);
-  const handleFabInteraction = useCallback11(() => {
+  const handleFabInteraction = useCallback12(() => {
     if (dragResize.isDragging) return;
     toggle();
   }, [dragResize.isDragging, toggle]);
-  useEffect13(() => {
+  useEffect14(() => {
     if (!isOpen) return;
     const handleKeyDown = (e) => {
       if (e.key === "Escape") {
@@ -15100,7 +15613,7 @@ var useFloatingWidget = (options) => {
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [isOpen, close]);
-  useEffect13(() => {
+  useEffect14(() => {
     if (!isOpen) return;
     const handleClickOutside = (e) => {
       if (dragResize.isDragging || dragResize.isResizing) return;
@@ -15116,11 +15629,11 @@ var useFloatingWidget = (options) => {
 };
 
 // src/react/components/floating/FloatingFab.tsx
-import { useRef as useRef13, useState as useState23, useEffect as useEffect15 } from "react";
+import { useRef as useRef14, useState as useState24, useEffect as useEffect16 } from "react";
 
 // src/react/components/floating/DevDiveCharacter.tsx
-import { useState as useState22, useEffect as useEffect14, useRef as useRef12, useCallback as useCallback12 } from "react";
-import { Fragment as Fragment10, jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
+import { useState as useState23, useEffect as useEffect15, useRef as useRef13, useCallback as useCallback13 } from "react";
+import { Fragment as Fragment10, jsx as jsx24, jsxs as jsxs23 } from "react/jsx-runtime";
 var THEMES = {
   dark: { body: "#2ecc71", stroke: "#27ae60", highlight: "#3ddc84", face: "#1a1a2e", eyeLight: "#fff" },
   light: { body: "#1a1a2e", stroke: "#12122a", highlight: "#2a2a3e", face: "#2ecc71", eyeLight: "#fff" }
@@ -15140,32 +15653,32 @@ var DevDiveFabCharacter = ({
   isComplete = false
 }) => {
   const c = THEMES[theme];
-  const [eyeOffset, setEyeOffset] = useState22({ x: 0, y: 0 });
-  const [isBlinking, setIsBlinking] = useState22(false);
-  const [isHappy, setIsHappy] = useState22(false);
-  const [isPressed, setIsPressed] = useState22(false);
-  const [mouthOpen, setMouthOpen] = useState22(false);
-  const [isSleepy, setIsSleepy] = useState22(false);
-  const [isSurprised, setIsSurprised] = useState22(false);
-  const [isWinking, setIsWinking] = useState22(false);
-  const [isCatMouth, setIsCatMouth] = useState22(false);
-  const [isEntering, setIsEntering] = useState22(true);
-  const svgRef = useRef12(null);
-  const cleanupRef = useRef12(null);
-  const lastActivityRef = useRef12(Date.now());
-  const isSleepyRef = useRef12(false);
-  const markActivity = useCallback12(() => {
+  const [eyeOffset, setEyeOffset] = useState23({ x: 0, y: 0 });
+  const [isBlinking, setIsBlinking] = useState23(false);
+  const [isHappy, setIsHappy] = useState23(false);
+  const [isPressed, setIsPressed] = useState23(false);
+  const [mouthOpen, setMouthOpen] = useState23(false);
+  const [isSleepy, setIsSleepy] = useState23(false);
+  const [isSurprised, setIsSurprised] = useState23(false);
+  const [isWinking, setIsWinking] = useState23(false);
+  const [isCatMouth, setIsCatMouth] = useState23(false);
+  const [isEntering, setIsEntering] = useState23(true);
+  const svgRef = useRef13(null);
+  const cleanupRef = useRef13(null);
+  const lastActivityRef = useRef13(Date.now());
+  const isSleepyRef = useRef13(false);
+  const markActivity = useCallback13(() => {
     lastActivityRef.current = Date.now();
     if (isSleepyRef.current) {
       isSleepyRef.current = false;
       setIsSleepy(false);
     }
   }, []);
-  useEffect14(() => {
+  useEffect15(() => {
     const t = setTimeout(() => setIsEntering(false), 600);
     return () => clearTimeout(t);
   }, []);
-  useEffect14(() => {
+  useEffect15(() => {
     let timer;
     let blinkTimer;
     const scheduleBlink = () => {
@@ -15181,7 +15694,7 @@ var DevDiveFabCharacter = ({
       clearTimeout(blinkTimer);
     };
   }, []);
-  useEffect14(() => {
+  useEffect15(() => {
     if (!isTalking) {
       setMouthOpen(false);
       return;
@@ -15194,7 +15707,7 @@ var DevDiveFabCharacter = ({
     toggle();
     return () => clearTimeout(timer);
   }, [isTalking]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (typeof window === "undefined") return;
     let rafId = 0;
     const onMouseMove = (e) => {
@@ -15218,7 +15731,7 @@ var DevDiveFabCharacter = ({
       cancelAnimationFrame(rafId);
     };
   }, []);
-  useEffect14(() => {
+  useEffect15(() => {
     let upTimer;
     let surpriseTimer;
     const rafId = requestAnimationFrame(() => {
@@ -15261,10 +15774,10 @@ var DevDiveFabCharacter = ({
       cleanupRef.current?.();
     };
   }, [markActivity]);
-  useEffect14(() => {
+  useEffect15(() => {
     markActivity();
   }, [isOpen, isTalking, markActivity]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (isOpen || isTalking || isDizzy) return;
     const check = setInterval(() => {
       if (Date.now() - lastActivityRef.current > IDLE_TIMEOUT_MS && !isSleepyRef.current) {
@@ -15274,8 +15787,8 @@ var DevDiveFabCharacter = ({
     }, 5e3);
     return () => clearInterval(check);
   }, [isOpen, isTalking, isDizzy]);
-  const prevCompleteRef = useRef12(false);
-  useEffect14(() => {
+  const prevCompleteRef = useRef13(false);
+  useEffect15(() => {
     const wasComplete = prevCompleteRef.current;
     prevCompleteRef.current = isComplete;
     if (wasComplete || !isComplete) return;
@@ -15283,7 +15796,7 @@ var DevDiveFabCharacter = ({
     const t = setTimeout(() => setIsWinking(false), WINK_DURATION_MS);
     return () => clearTimeout(t);
   }, [isComplete]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (isOpen || isTalking || isDizzy || isError || isSleepy) {
       setIsCatMouth(false);
       return;
@@ -15308,62 +15821,62 @@ var DevDiveFabCharacter = ({
       clearTimeout(hideT);
     };
   }, [isOpen, isTalking, isDizzy, isError, isSleepy]);
-  const renderNormalEyes = (r) => /* @__PURE__ */ jsxs22(Fragment10, { children: [
-    /* @__PURE__ */ jsx23("circle", { cx: "87", cy: "106", r, fill: c.face, style: { transition: "fill 0.4s ease" } }),
-    /* @__PURE__ */ jsx23("circle", { cx: "133", cy: "106", r, fill: c.face, style: { transition: "fill 0.4s ease" } }),
-    /* @__PURE__ */ jsx23("circle", { cx: "90", cy: "102", r: "2.5", fill: c.eyeLight, opacity: "0.9" }),
-    /* @__PURE__ */ jsx23("circle", { cx: "136", cy: "102", r: "2.5", fill: c.eyeLight, opacity: "0.9" })
+  const renderNormalEyes = (r) => /* @__PURE__ */ jsxs23(Fragment10, { children: [
+    /* @__PURE__ */ jsx24("circle", { cx: "87", cy: "106", r, fill: c.face, style: { transition: "fill 0.4s ease" } }),
+    /* @__PURE__ */ jsx24("circle", { cx: "133", cy: "106", r, fill: c.face, style: { transition: "fill 0.4s ease" } }),
+    /* @__PURE__ */ jsx24("circle", { cx: "90", cy: "102", r: "2.5", fill: c.eyeLight, opacity: "0.9" }),
+    /* @__PURE__ */ jsx24("circle", { cx: "136", cy: "102", r: "2.5", fill: c.eyeLight, opacity: "0.9" })
   ] });
   const renderEyes = () => {
-    if (isDizzy) return /* @__PURE__ */ jsxs22(Fragment10, { children: [
-      /* @__PURE__ */ jsxs22("g", { children: [
-        /* @__PURE__ */ jsx23("line", { x1: "81", y1: "100", x2: "93", y2: "112", stroke: c.face, strokeWidth: "3", strokeLinecap: "round" }),
-        /* @__PURE__ */ jsx23("line", { x1: "93", y1: "100", x2: "81", y2: "112", stroke: c.face, strokeWidth: "3", strokeLinecap: "round" })
+    if (isDizzy) return /* @__PURE__ */ jsxs23(Fragment10, { children: [
+      /* @__PURE__ */ jsxs23("g", { children: [
+        /* @__PURE__ */ jsx24("line", { x1: "81", y1: "100", x2: "93", y2: "112", stroke: c.face, strokeWidth: "3", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx24("line", { x1: "93", y1: "100", x2: "81", y2: "112", stroke: c.face, strokeWidth: "3", strokeLinecap: "round" })
       ] }),
-      /* @__PURE__ */ jsxs22("g", { children: [
-        /* @__PURE__ */ jsx23("line", { x1: "127", y1: "100", x2: "139", y2: "112", stroke: c.face, strokeWidth: "3", strokeLinecap: "round" }),
-        /* @__PURE__ */ jsx23("line", { x1: "139", y1: "100", x2: "127", y2: "112", stroke: c.face, strokeWidth: "3", strokeLinecap: "round" })
+      /* @__PURE__ */ jsxs23("g", { children: [
+        /* @__PURE__ */ jsx24("line", { x1: "127", y1: "100", x2: "139", y2: "112", stroke: c.face, strokeWidth: "3", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx24("line", { x1: "139", y1: "100", x2: "127", y2: "112", stroke: c.face, strokeWidth: "3", strokeLinecap: "round" })
       ] })
     ] });
-    if (isSleepy) return /* @__PURE__ */ jsxs22(Fragment10, { children: [
-      /* @__PURE__ */ jsx23("path", { d: "M80 108 Q87 102 94 108", fill: "none", stroke: c.face, strokeWidth: "3.5", strokeLinecap: "round" }),
-      /* @__PURE__ */ jsx23("path", { d: "M126 108 Q133 102 140 108", fill: "none", stroke: c.face, strokeWidth: "3.5", strokeLinecap: "round" })
+    if (isSleepy) return /* @__PURE__ */ jsxs23(Fragment10, { children: [
+      /* @__PURE__ */ jsx24("path", { d: "M80 108 Q87 102 94 108", fill: "none", stroke: c.face, strokeWidth: "3.5", strokeLinecap: "round" }),
+      /* @__PURE__ */ jsx24("path", { d: "M126 108 Q133 102 140 108", fill: "none", stroke: c.face, strokeWidth: "3.5", strokeLinecap: "round" })
     ] });
-    if (isSurprised) return /* @__PURE__ */ jsxs22(Fragment10, { children: [
-      /* @__PURE__ */ jsx23("circle", { cx: "87", cy: "106", r: "12", fill: c.face }),
-      /* @__PURE__ */ jsx23("circle", { cx: "133", cy: "106", r: "12", fill: c.face }),
-      /* @__PURE__ */ jsx23("circle", { cx: "91", cy: "100", r: "3.5", fill: c.eyeLight }),
-      /* @__PURE__ */ jsx23("circle", { cx: "137", cy: "100", r: "3.5", fill: c.eyeLight })
+    if (isSurprised) return /* @__PURE__ */ jsxs23(Fragment10, { children: [
+      /* @__PURE__ */ jsx24("circle", { cx: "87", cy: "106", r: "12", fill: c.face }),
+      /* @__PURE__ */ jsx24("circle", { cx: "133", cy: "106", r: "12", fill: c.face }),
+      /* @__PURE__ */ jsx24("circle", { cx: "91", cy: "100", r: "3.5", fill: c.eyeLight }),
+      /* @__PURE__ */ jsx24("circle", { cx: "137", cy: "100", r: "3.5", fill: c.eyeLight })
     ] });
-    if (isWinking) return /* @__PURE__ */ jsxs22(Fragment10, { children: [
-      /* @__PURE__ */ jsx23("circle", { cx: "87", cy: "106", r: "8", fill: c.face }),
-      /* @__PURE__ */ jsx23("circle", { cx: "90", cy: "102", r: "2.5", fill: c.eyeLight, opacity: "0.9" }),
-      /* @__PURE__ */ jsx23("line", { x1: "126", y1: "108", x2: "140", y2: "108", stroke: c.face, strokeWidth: "3.5", strokeLinecap: "round" })
+    if (isWinking) return /* @__PURE__ */ jsxs23(Fragment10, { children: [
+      /* @__PURE__ */ jsx24("circle", { cx: "87", cy: "106", r: "8", fill: c.face }),
+      /* @__PURE__ */ jsx24("circle", { cx: "90", cy: "102", r: "2.5", fill: c.eyeLight, opacity: "0.9" }),
+      /* @__PURE__ */ jsx24("line", { x1: "126", y1: "108", x2: "140", y2: "108", stroke: c.face, strokeWidth: "3.5", strokeLinecap: "round" })
     ] });
-    if (isError) return /* @__PURE__ */ jsxs22(Fragment10, { children: [
+    if (isError) return /* @__PURE__ */ jsxs23(Fragment10, { children: [
       renderNormalEyes(8),
-      /* @__PURE__ */ jsx23("line", { x1: "79", y1: "90", x2: "95", y2: "95", stroke: c.face, strokeWidth: "2.5", strokeLinecap: "round" }),
-      /* @__PURE__ */ jsx23("line", { x1: "141", y1: "90", x2: "125", y2: "95", stroke: c.face, strokeWidth: "2.5", strokeLinecap: "round" })
+      /* @__PURE__ */ jsx24("line", { x1: "79", y1: "90", x2: "95", y2: "95", stroke: c.face, strokeWidth: "2.5", strokeLinecap: "round" }),
+      /* @__PURE__ */ jsx24("line", { x1: "141", y1: "90", x2: "125", y2: "95", stroke: c.face, strokeWidth: "2.5", strokeLinecap: "round" })
     ] });
-    if (isBlinking) return /* @__PURE__ */ jsxs22(Fragment10, { children: [
-      /* @__PURE__ */ jsx23("line", { x1: "80", y1: "108", x2: "94", y2: "108", stroke: c.face, strokeWidth: "3.5", strokeLinecap: "round" }),
-      /* @__PURE__ */ jsx23("line", { x1: "126", y1: "108", x2: "140", y2: "108", stroke: c.face, strokeWidth: "3.5", strokeLinecap: "round" })
+    if (isBlinking) return /* @__PURE__ */ jsxs23(Fragment10, { children: [
+      /* @__PURE__ */ jsx24("line", { x1: "80", y1: "108", x2: "94", y2: "108", stroke: c.face, strokeWidth: "3.5", strokeLinecap: "round" }),
+      /* @__PURE__ */ jsx24("line", { x1: "126", y1: "108", x2: "140", y2: "108", stroke: c.face, strokeWidth: "3.5", strokeLinecap: "round" })
     ] });
     return renderNormalEyes(isHappy ? 10 : 8);
   };
   const renderMouth = () => {
-    if (isDizzy) return /* @__PURE__ */ jsx23("path", { d: "M98 130 Q102 125 106 130 Q110 135 114 130 Q118 125 122 130", fill: "none", stroke: c.face, strokeWidth: "3", strokeLinecap: "round" });
-    if (isSurprised) return /* @__PURE__ */ jsx23("circle", { cx: "110", cy: "133", r: "7", fill: c.face });
-    if (isSleepy) return /* @__PURE__ */ jsx23("ellipse", { cx: "110", cy: "131", rx: "4", ry: "3", fill: c.face });
-    if (isError) return /* @__PURE__ */ jsx23("path", { d: "M103 130 Q110 135 117 130", fill: "none", stroke: c.face, strokeWidth: "2.5", strokeLinecap: "round" });
-    if (mouthOpen) return /* @__PURE__ */ jsx23("ellipse", { cx: "110", cy: "131", rx: "6", ry: "5", fill: c.face });
-    if (isCatMouth) return /* @__PURE__ */ jsx23("path", { d: "M100 130 Q105 137 110 128 Q115 137 120 130", fill: "none", stroke: c.face, strokeWidth: "3", strokeLinecap: "round" });
-    if (isPressed) return /* @__PURE__ */ jsx23("ellipse", { cx: "110", cy: "132", rx: "6", ry: "6", fill: c.face, style: { transition: "fill 0.4s ease" } });
-    if (isHappy) return /* @__PURE__ */ jsx23("path", { d: "M101 128 Q110 138 119 128", fill: "none", stroke: c.face, strokeWidth: "4", strokeLinecap: "round", style: { transition: "stroke 0.4s ease" } });
-    return /* @__PURE__ */ jsx23("path", { d: "M103 128 Q110 134 117 128", fill: "none", stroke: c.face, strokeWidth: "3.5", strokeLinecap: "round", style: { transition: "stroke 0.4s ease" } });
+    if (isDizzy) return /* @__PURE__ */ jsx24("path", { d: "M98 130 Q102 125 106 130 Q110 135 114 130 Q118 125 122 130", fill: "none", stroke: c.face, strokeWidth: "3", strokeLinecap: "round" });
+    if (isSurprised) return /* @__PURE__ */ jsx24("circle", { cx: "110", cy: "133", r: "7", fill: c.face });
+    if (isSleepy) return /* @__PURE__ */ jsx24("ellipse", { cx: "110", cy: "131", rx: "4", ry: "3", fill: c.face });
+    if (isError) return /* @__PURE__ */ jsx24("path", { d: "M103 130 Q110 135 117 130", fill: "none", stroke: c.face, strokeWidth: "2.5", strokeLinecap: "round" });
+    if (mouthOpen) return /* @__PURE__ */ jsx24("ellipse", { cx: "110", cy: "131", rx: "6", ry: "5", fill: c.face });
+    if (isCatMouth) return /* @__PURE__ */ jsx24("path", { d: "M100 130 Q105 137 110 128 Q115 137 120 130", fill: "none", stroke: c.face, strokeWidth: "3", strokeLinecap: "round" });
+    if (isPressed) return /* @__PURE__ */ jsx24("ellipse", { cx: "110", cy: "132", rx: "6", ry: "6", fill: c.face, style: { transition: "fill 0.4s ease" } });
+    if (isHappy) return /* @__PURE__ */ jsx24("path", { d: "M101 128 Q110 138 119 128", fill: "none", stroke: c.face, strokeWidth: "4", strokeLinecap: "round", style: { transition: "stroke 0.4s ease" } });
+    return /* @__PURE__ */ jsx24("path", { d: "M103 128 Q110 134 117 128", fill: "none", stroke: c.face, strokeWidth: "3.5", strokeLinecap: "round", style: { transition: "stroke 0.4s ease" } });
   };
   const shouldFloat = !isEntering && !isOpen && !isSurprised && !isDizzy;
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     "svg",
     {
       ref: svgRef,
@@ -15373,7 +15886,7 @@ var DevDiveFabCharacter = ({
       className: `${isEntering ? "chatllm-character-entrance" : ""} ${shouldFloat ? "chatllm-character-float" : ""}`,
       style: { overflow: "visible", pointerEvents: "none" },
       children: [
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx24(
           "path",
           {
             d: BODY_PATH,
@@ -15385,21 +15898,21 @@ var DevDiveFabCharacter = ({
         ),
         isOpen && isHappy ? (
           /* @Todo vibecode - 열림+호버 시에만 X 표시 (평소엔 얼굴 유지) */
-          /* @__PURE__ */ jsxs22("g", { style: { transition: "transform 0.3s ease", transform: "rotate(90deg)", transformOrigin: "110px 115px" }, children: [
-            /* @__PURE__ */ jsx23("line", { x1: "95", y1: "100", x2: "125", y2: "130", stroke: c.face, strokeWidth: "5", strokeLinecap: "round" }),
-            /* @__PURE__ */ jsx23("line", { x1: "125", y1: "100", x2: "95", y2: "130", stroke: c.face, strokeWidth: "5", strokeLinecap: "round" })
+          /* @__PURE__ */ jsxs23("g", { style: { transition: "transform 0.3s ease", transform: "rotate(90deg)", transformOrigin: "110px 115px" }, children: [
+            /* @__PURE__ */ jsx24("line", { x1: "95", y1: "100", x2: "125", y2: "130", stroke: c.face, strokeWidth: "5", strokeLinecap: "round" }),
+            /* @__PURE__ */ jsx24("line", { x1: "125", y1: "100", x2: "95", y2: "130", stroke: c.face, strokeWidth: "5", strokeLinecap: "round" })
           ] })
         ) : (
           /* 눈 + 입 — 마우스 추적 (isDizzy/isSleepy 시 추적 비활성) */
-          /* @__PURE__ */ jsxs22("g", { transform: isDizzy || isSleepy ? "" : `translate(${eyeOffset.x}, ${eyeOffset.y})`, children: [
+          /* @__PURE__ */ jsxs23("g", { transform: isDizzy || isSleepy ? "" : `translate(${eyeOffset.x}, ${eyeOffset.y})`, children: [
             renderEyes(),
             renderMouth(),
-            isSleepy && /* @__PURE__ */ jsxs22("g", { children: [
-              /* @__PURE__ */ jsx23("text", { x: "152", y: "88", fontSize: "14", fill: c.face, opacity: "0.7", className: "chatllm-zzz chatllm-zzz-1", fontFamily: "sans-serif", fontWeight: "bold", children: "z" }),
-              /* @__PURE__ */ jsx23("text", { x: "160", y: "76", fontSize: "11", fill: c.face, opacity: "0.5", className: "chatllm-zzz chatllm-zzz-2", fontFamily: "sans-serif", fontWeight: "bold", children: "z" }),
-              /* @__PURE__ */ jsx23("text", { x: "166", y: "66", fontSize: "9", fill: c.face, opacity: "0.3", className: "chatllm-zzz chatllm-zzz-3", fontFamily: "sans-serif", fontWeight: "bold", children: "z" })
+            isSleepy && /* @__PURE__ */ jsxs23("g", { children: [
+              /* @__PURE__ */ jsx24("text", { x: "152", y: "88", fontSize: "14", fill: c.face, opacity: "0.7", className: "chatllm-zzz chatllm-zzz-1", fontFamily: "sans-serif", fontWeight: "bold", children: "z" }),
+              /* @__PURE__ */ jsx24("text", { x: "160", y: "76", fontSize: "11", fill: c.face, opacity: "0.5", className: "chatllm-zzz chatllm-zzz-2", fontFamily: "sans-serif", fontWeight: "bold", children: "z" }),
+              /* @__PURE__ */ jsx24("text", { x: "166", y: "66", fontSize: "9", fill: c.face, opacity: "0.3", className: "chatllm-zzz chatllm-zzz-3", fontFamily: "sans-serif", fontWeight: "bold", children: "z" })
             ] }),
-            isError && /* @__PURE__ */ jsx23(
+            isError && /* @__PURE__ */ jsx24(
               "path",
               {
                 d: "M158 80 Q161 88 158 94 Q155 88 158 80Z",
@@ -15415,7 +15928,7 @@ var DevDiveFabCharacter = ({
 };
 var DevDiveAvatar = ({ size = 32, theme = "light" }) => {
   const c = THEMES[theme];
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     "svg",
     {
       width: size,
@@ -15423,7 +15936,7 @@ var DevDiveAvatar = ({ size = 32, theme = "light" }) => {
       viewBox: "30 45 160 140",
       style: { display: "block" },
       children: [
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx24(
           "path",
           {
             d: BODY_PATH,
@@ -15432,7 +15945,7 @@ var DevDiveAvatar = ({ size = 32, theme = "light" }) => {
             strokeWidth: "5"
           }
         ),
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx24(
           "path",
           {
             d: "M170 72 C176 86, 178 102, 175 120",
@@ -15442,18 +15955,18 @@ var DevDiveAvatar = ({ size = 32, theme = "light" }) => {
             strokeLinecap: "round"
           }
         ),
-        /* @__PURE__ */ jsx23("circle", { cx: "87", cy: "106", r: "7.5", fill: c.face }),
-        /* @__PURE__ */ jsx23("circle", { cx: "133", cy: "106", r: "7.5", fill: c.face }),
-        /* @__PURE__ */ jsx23("circle", { cx: "90", cy: "102", r: "2", fill: c.eyeLight, opacity: "0.85" }),
-        /* @__PURE__ */ jsx23("circle", { cx: "136", cy: "102", r: "2", fill: c.eyeLight, opacity: "0.85" }),
-        /* @__PURE__ */ jsx23("path", { d: "M104 127 Q110 132 116 127", fill: "none", stroke: c.face, strokeWidth: "3", strokeLinecap: "round" })
+        /* @__PURE__ */ jsx24("circle", { cx: "87", cy: "106", r: "7.5", fill: c.face }),
+        /* @__PURE__ */ jsx24("circle", { cx: "133", cy: "106", r: "7.5", fill: c.face }),
+        /* @__PURE__ */ jsx24("circle", { cx: "90", cy: "102", r: "2", fill: c.eyeLight, opacity: "0.85" }),
+        /* @__PURE__ */ jsx24("circle", { cx: "136", cy: "102", r: "2", fill: c.eyeLight, opacity: "0.85" }),
+        /* @__PURE__ */ jsx24("path", { d: "M104 127 Q110 132 116 127", fill: "none", stroke: c.face, strokeWidth: "3", strokeLinecap: "round" })
       ]
     }
   );
 };
 
 // src/react/components/floating/FloatingFab.tsx
-import { jsx as jsx24, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs24 } from "react/jsx-runtime";
 var FloatingFab = ({
   onClick,
   isOpen,
@@ -15475,12 +15988,12 @@ var FloatingFab = ({
 }) => {
   const isRight = position.includes("right");
   const isBottom = position.includes("bottom");
-  const fabRef = useRef13(null);
+  const fabRef = useRef14(null);
   const isCharacterMode = !icon;
-  const [bubbleOnRight, setBubbleOnRight] = useState23(!isRight);
+  const [bubbleOnRight, setBubbleOnRight] = useState24(!isRight);
   const posLeft = positionStyle?.left;
   const posTop = positionStyle?.top;
-  useEffect15(() => {
+  useEffect16(() => {
     if (!fabRef.current || typeof window === "undefined") {
       setBubbleOnRight(!isRight);
       return;
@@ -15488,14 +16001,14 @@ var FloatingFab = ({
     const rect = fabRef.current.getBoundingClientRect();
     setBubbleOnRight(rect.left + rect.width / 2 < window.innerWidth / 2);
   }, [isRight, posLeft, posTop]);
-  const [bubbleText, setBubbleText] = useState23(null);
-  const [bubbleExiting, setBubbleExiting] = useState23(false);
-  const bubbleTextRef = useRef13(bubbleText);
+  const [bubbleText, setBubbleText] = useState24(null);
+  const [bubbleExiting, setBubbleExiting] = useState24(false);
+  const bubbleTextRef = useRef14(bubbleText);
   bubbleTextRef.current = bubbleText;
-  const [displayText, setDisplayText] = useState23(null);
-  const [isTyping, setIsTyping] = useState23(false);
-  const typingTimerRef = useRef13(null);
-  useEffect15(() => {
+  const [displayText, setDisplayText] = useState24(null);
+  const [isTyping, setIsTyping] = useState24(false);
+  const typingTimerRef = useRef14(null);
+  useEffect16(() => {
     if (notification) {
       setBubbleText(notification);
       setBubbleExiting(false);
@@ -15531,9 +16044,9 @@ var FloatingFab = ({
     }, 300);
     return () => clearTimeout(timer);
   }, [notification]);
-  const notifContentRef = useRef13(null);
-  const [needsMarquee, setNeedsMarquee] = useState23(false);
-  useEffect15(() => {
+  const notifContentRef = useRef14(null);
+  const [needsMarquee, setNeedsMarquee] = useState24(false);
+  useEffect16(() => {
     if (isTyping || !notification) {
       setNeedsMarquee(false);
       return;
@@ -15555,7 +16068,7 @@ var FloatingFab = ({
     ...isBottom ? { bottom: 28 } : { top: 28 },
     ...isRight ? { right: 28 } : { left: 28 }
   };
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     "button",
     {
       ref: fabRef,
@@ -15590,7 +16103,7 @@ var FloatingFab = ({
         ...fabStyle
       },
       children: [
-        /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx25(
           "span",
           {
             style: {
@@ -15604,10 +16117,10 @@ var FloatingFab = ({
               transition: "transform 0.3s ease",
               transform: !isCharacterMode && isOpen ? "rotate(90deg)" : "rotate(0deg)"
             },
-            children: isCharacterMode ? /* @__PURE__ */ jsx24(DevDiveFabCharacter, { theme: theme?.mode === "dark" ? "dark" : "light", isTalking, isOpen, isDizzy, isError, isComplete }) : isOpen ? /* @__PURE__ */ jsx24(IconSvg, { name: "close-line", size: 24, color: "#fff" }) : icon || /* @__PURE__ */ jsx24(IconSvg, { name: "chat-1-line", size: 24, color: "#fff" })
+            children: isCharacterMode ? /* @__PURE__ */ jsx25(DevDiveFabCharacter, { theme: theme?.mode === "dark" ? "dark" : "light", isTalking, isOpen, isDizzy, isError, isComplete }) : isOpen ? /* @__PURE__ */ jsx25(IconSvg, { name: "close-line", size: 24, color: "#fff" }) : icon || /* @__PURE__ */ jsx25(IconSvg, { name: "chat-1-line", size: 24, color: "#fff" })
           }
         ),
-        !!badge && badge > 0 && !isOpen && /* @__PURE__ */ jsx24(
+        !!badge && badge > 0 && !isOpen && /* @__PURE__ */ jsx25(
           "span",
           {
             style: {
@@ -15631,7 +16144,7 @@ var FloatingFab = ({
             children: badge > 99 ? "99+" : badge
           }
         ),
-        bubbleText && /* @__PURE__ */ jsx24(
+        bubbleText && /* @__PURE__ */ jsx25(
           "div",
           {
             className: [
@@ -15649,19 +16162,19 @@ var FloatingFab = ({
               opacity: !isOpen && !isDragging && !bubbleExiting ? 1 : 0,
               transition: "opacity 0.2s ease"
             },
-            children: /* @__PURE__ */ jsx24(
+            children: /* @__PURE__ */ jsx25(
               "div",
               {
                 ref: notifContentRef,
                 className: `chatllm-fab-notification__content${needsMarquee ? " chatllm-fab-notification__content--scrolling" : ""}`,
-                children: /* @__PURE__ */ jsxs23(
+                children: /* @__PURE__ */ jsxs24(
                   "div",
                   {
                     className: "chatllm-fab-notification__track",
                     style: needsMarquee ? { animationDuration: `${Math.max(6, bubbleText.length * 0.3)}s` } : void 0,
                     children: [
-                      /* @__PURE__ */ jsx24("span", { children: displayText ?? bubbleText }),
-                      needsMarquee && /* @__PURE__ */ jsx24("span", { "aria-hidden": "true", children: bubbleText })
+                      /* @__PURE__ */ jsx25("span", { children: displayText ?? bubbleText }),
+                      needsMarquee && /* @__PURE__ */ jsx25("span", { "aria-hidden": "true", children: bubbleText })
                     ]
                   }
                 )
@@ -15675,8 +16188,8 @@ var FloatingFab = ({
 };
 
 // src/react/components/floating/FloatingPanel.tsx
-import { useState as useState24, useEffect as useEffect16, useRef as useRef14 } from "react";
-import { jsxs as jsxs24 } from "react/jsx-runtime";
+import { useState as useState25, useEffect as useEffect17, useRef as useRef15 } from "react";
+import { jsxs as jsxs25 } from "react/jsx-runtime";
 var FloatingPanel = ({
   isOpen,
   width,
@@ -15693,8 +16206,8 @@ var FloatingPanel = ({
 }) => {
   const isRight = position.includes("right");
   const themeClass = theme?.mode === "dark" ? "chatllm-dark" : "";
-  const [isMobile, setIsMobile] = useState24(false);
-  useEffect16(() => {
+  const [isMobile, setIsMobile] = useState25(false);
+  useEffect17(() => {
     if (typeof window === "undefined") return;
     const mql = window.matchMedia("(max-width: 767px)");
     setIsMobile(mql.matches);
@@ -15702,10 +16215,10 @@ var FloatingPanel = ({
     mql.addEventListener("change", handler);
     return () => mql.removeEventListener("change", handler);
   }, []);
-  const [shouldRender, setShouldRender] = useState24(isOpen);
-  const [isVisible, setIsVisible] = useState24(isOpen);
-  const rafRef = useRef14(0);
-  useEffect16(() => {
+  const [shouldRender, setShouldRender] = useState25(isOpen);
+  const [isVisible, setIsVisible] = useState25(isOpen);
+  const rafRef = useRef15(0);
+  useEffect17(() => {
     if (isOpen) {
       setShouldRender(true);
       rafRef.current = requestAnimationFrame(() => {
@@ -15720,7 +16233,7 @@ var FloatingPanel = ({
     }
     return () => cancelAnimationFrame(rafRef.current);
   }, [isOpen]);
-  useEffect16(() => {
+  useEffect17(() => {
     if (!isOpen || !isMobile) return;
     const prev = document.body.style.overflow;
     document.body.style.overflow = "hidden";
@@ -15745,7 +16258,7 @@ var FloatingPanel = ({
   };
   const computedPosition = isMobile ? mobilePosition : positionStyle || defaultDesktopPosition;
   const transition = "opacity 0.25s ease, transform 0.25s ease";
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(
     "div",
     {
       ref: panelRef,
@@ -15775,14 +16288,14 @@ var FloatingPanel = ({
 };
 
 // src/react/components/floating/FloatingTabBar.tsx
-import { jsx as jsx25, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs26 } from "react/jsx-runtime";
 var FloatingTabBar = ({
   tabs,
   activeTab,
   onTabChange
 }) => {
   if (tabs.length <= 1) return null;
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
       role: "tablist",
@@ -15795,7 +16308,7 @@ var FloatingTabBar = ({
       },
       children: tabs.map((tab) => {
         const isActive = tab.key === activeTab;
-        return /* @__PURE__ */ jsxs25(
+        return /* @__PURE__ */ jsxs26(
           "button",
           {
             onClick: () => onTabChange(tab.key),
@@ -15820,7 +16333,7 @@ var FloatingTabBar = ({
               transition: "color 0.15s ease"
             },
             children: [
-              tab.icon && /* @__PURE__ */ jsxs25(
+              tab.icon && /* @__PURE__ */ jsxs26(
                 "span",
                 {
                   style: {
@@ -15830,7 +16343,7 @@ var FloatingTabBar = ({
                   },
                   children: [
                     tab.icon,
-                    !!tab.badge && tab.badge > 0 && /* @__PURE__ */ jsx25(
+                    !!tab.badge && tab.badge > 0 && /* @__PURE__ */ jsx26(
                       "span",
                       {
                         style: {
@@ -15856,8 +16369,8 @@ var FloatingTabBar = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx25("span", { children: tab.label }),
-              isActive && /* @__PURE__ */ jsx25(
+              /* @__PURE__ */ jsx26("span", { children: tab.label }),
+              isActive && /* @__PURE__ */ jsx26(
                 "span",
                 {
                   style: {
@@ -15881,11 +16394,11 @@ var FloatingTabBar = ({
 };
 
 // src/react/components/floating/CompactChatView.tsx
-import { useState as useState26, useCallback as useCallback13 } from "react";
+import { useState as useState27, useCallback as useCallback14 } from "react";
 
 // src/react/components/floating/CompactSessionMenu.tsx
-import { useState as useState25, useRef as useRef15, useEffect as useEffect17 } from "react";
-import { jsx as jsx26, jsxs as jsxs26 } from "react/jsx-runtime";
+import { useState as useState26, useRef as useRef16, useEffect as useEffect18 } from "react";
+import { jsx as jsx27, jsxs as jsxs27 } from "react/jsx-runtime";
 var CompactSessionMenu = ({
   sessions,
   currentSessionId,
@@ -15896,13 +16409,13 @@ var CompactSessionMenu = ({
   onClose,
   isLoading = false
 }) => {
-  const menuRef = useRef15(null);
-  const inputRef = useRef15(null);
-  const onCloseRef = useRef15(onClose);
+  const menuRef = useRef16(null);
+  const inputRef = useRef16(null);
+  const onCloseRef = useRef16(onClose);
   onCloseRef.current = onClose;
-  const [editingId, setEditingId] = useState25(null);
-  const [editingTitle, setEditingTitle] = useState25("");
-  useEffect17(() => {
+  const [editingId, setEditingId] = useState26(null);
+  const [editingTitle, setEditingTitle] = useState26("");
+  useEffect18(() => {
     const handleMouseDown = (e) => {
       if (menuRef.current && !menuRef.current.contains(e.target)) {
         onCloseRef.current();
@@ -15911,7 +16424,7 @@ var CompactSessionMenu = ({
     document.addEventListener("mousedown", handleMouseDown);
     return () => document.removeEventListener("mousedown", handleMouseDown);
   }, []);
-  useEffect17(() => {
+  useEffect18(() => {
     if (editingId && inputRef.current) {
       inputRef.current.focus();
       inputRef.current.select();
@@ -15945,7 +16458,7 @@ var CompactSessionMenu = ({
   const handleNew = () => {
     onNew();
   };
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs27(
     "div",
     {
       ref: menuRef,
@@ -15963,7 +16476,7 @@ var CompactSessionMenu = ({
         flexDirection: "column"
       },
       children: [
-        /* @__PURE__ */ jsxs26(
+        /* @__PURE__ */ jsxs27(
           "button",
           {
             onClick: handleNew,
@@ -15983,12 +16496,12 @@ var CompactSessionMenu = ({
               flexShrink: 0
             },
             children: [
-              /* @__PURE__ */ jsx26(IconSvg, { name: "add-line", size: 16, color: "var(--chatllm-primary, #3584FA)" }),
+              /* @__PURE__ */ jsx27(IconSvg, { name: "add-line", size: 16, color: "var(--chatllm-primary, #3584FA)" }),
               "\uC0C8 \uB300\uD654"
             ]
           }
         ),
-        /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx27(
           "div",
           {
             className: "chatllm-scrollbar",
@@ -15999,7 +16512,7 @@ var CompactSessionMenu = ({
             },
             children: isLoading ? (
               /** @Todo vibecode - 로딩 스켈레톤 (2개) */
-              /* @__PURE__ */ jsx26("div", { style: { padding: "8px" }, children: [1, 2].map((i) => /* @__PURE__ */ jsx26(
+              /* @__PURE__ */ jsx27("div", { style: { padding: "8px" }, children: [1, 2].map((i) => /* @__PURE__ */ jsx27(
                 "div",
                 {
                   className: "chatllm-skeleton-pulse",
@@ -16015,7 +16528,7 @@ var CompactSessionMenu = ({
               )) })
             ) : sessions.length === 0 ? (
               /** @Todo vibecode - 빈 상태 */
-              /* @__PURE__ */ jsx26(
+              /* @__PURE__ */ jsx27(
                 "div",
                 {
                   style: {
@@ -16027,9 +16540,9 @@ var CompactSessionMenu = ({
                   children: "\uB300\uD654 \uB0B4\uC5ED\uC774 \uC5C6\uC2B5\uB2C8\uB2E4"
                 }
               )
-            ) : /* @__PURE__ */ jsx26("div", { style: { padding: "4px" }, children: sessions.map((session) => {
+            ) : /* @__PURE__ */ jsx27("div", { style: { padding: "4px" }, children: sessions.map((session) => {
               const isSelected = session.id === currentSessionId;
-              return /* @__PURE__ */ jsxs26(
+              return /* @__PURE__ */ jsxs27(
                 "div",
                 {
                   onClick: () => handleSelect(session.id),
@@ -16054,7 +16567,7 @@ var CompactSessionMenu = ({
                     }
                   },
                   children: [
-                    /* @__PURE__ */ jsx26(
+                    /* @__PURE__ */ jsx27(
                       IconSvg,
                       {
                         name: "chat-1-line",
@@ -16062,7 +16575,7 @@ var CompactSessionMenu = ({
                         color: "var(--chatllm-text-muted, #94a3b8)"
                       }
                     ),
-                    /* @__PURE__ */ jsx26("div", { style: { flex: 1, minWidth: 0 }, children: editingId === session.id ? /* @__PURE__ */ jsx26(
+                    /* @__PURE__ */ jsx27("div", { style: { flex: 1, minWidth: 0 }, children: editingId === session.id ? /* @__PURE__ */ jsx27(
                       "input",
                       {
                         ref: inputRef,
@@ -16086,7 +16599,7 @@ var CompactSessionMenu = ({
                           fontFamily: "inherit"
                         }
                       }
-                    ) : /* @__PURE__ */ jsx26(
+                    ) : /* @__PURE__ */ jsx27(
                       "p",
                       {
                         style: {
@@ -16098,10 +16611,10 @@ var CompactSessionMenu = ({
                           whiteSpace: "nowrap",
                           margin: 0
                         },
-                        children: /* @__PURE__ */ jsx26(MarkdownRenderer, { content: session.title, inline: true })
+                        children: /* @__PURE__ */ jsx27(MarkdownRenderer, { content: session.title, inline: true })
                       }
                     ) }),
-                    isSelected && editingId !== session.id && /* @__PURE__ */ jsxs26(
+                    isSelected && editingId !== session.id && /* @__PURE__ */ jsxs27(
                       "div",
                       {
                         style: {
@@ -16110,7 +16623,7 @@ var CompactSessionMenu = ({
                           flexShrink: 0
                         },
                         children: [
-                          onRename && /* @__PURE__ */ jsx26(
+                          onRename && /* @__PURE__ */ jsx27(
                             "button",
                             {
                               onClick: (e) => handleStartEdit(session, e),
@@ -16125,10 +16638,10 @@ var CompactSessionMenu = ({
                                 display: "flex",
                                 alignItems: "center"
                               },
-                              children: /* @__PURE__ */ jsx26(IconSvg, { name: "pencil-line", size: 12 })
+                              children: /* @__PURE__ */ jsx27(IconSvg, { name: "pencil-line", size: 12 })
                             }
                           ),
-                          /* @__PURE__ */ jsx26(
+                          /* @__PURE__ */ jsx27(
                             "button",
                             {
                               onClick: (e) => {
@@ -16146,7 +16659,7 @@ var CompactSessionMenu = ({
                                 display: "flex",
                                 alignItems: "center"
                               },
-                              children: /* @__PURE__ */ jsx26(IconSvg, { name: "delete-bin-line", size: 12 })
+                              children: /* @__PURE__ */ jsx27(IconSvg, { name: "delete-bin-line", size: 12 })
                             }
                           )
                         ]
@@ -16165,7 +16678,7 @@ var CompactSessionMenu = ({
 };
 
 // src/react/components/floating/CompactChatView.tsx
-import { jsx as jsx27, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs28 } from "react/jsx-runtime";
 var CompactChatView = ({
   chatState,
   actions = [],
@@ -16226,20 +16739,20 @@ var CompactChatView = ({
   const handleChoiceClick = (choice) => {
     setInput(choice.text);
   };
-  const [showSessionMenu, setShowSessionMenu] = useState26(false);
-  const handleSessionSelect = useCallback13((id) => {
+  const [showSessionMenu, setShowSessionMenu] = useState27(false);
+  const handleSessionSelect = useCallback14((id) => {
     selectSession(id);
     setShowSessionMenu(false);
   }, [selectSession]);
-  const handleNewSession = useCallback13(() => {
+  const handleNewSession = useCallback14(() => {
     newSession();
     setShowSessionMenu(false);
   }, [newSession]);
-  const handleCloseMenu = useCallback13(() => {
+  const handleCloseMenu = useCallback14(() => {
     setShowSessionMenu(false);
   }, []);
   const greeting = personalization?.userProfile?.nickname ? `${personalization.userProfile.nickname}\uB2D8, \uBB34\uC5C7\uC774\uB4E0 \uBB3C\uC5B4\uBCF4\uC138\uC694` : "\uBB34\uC5C7\uC774\uB4E0 \uBB3C\uC5B4\uBCF4\uC138\uC694";
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs28(
     "div",
     {
       style: {
@@ -16250,7 +16763,7 @@ var CompactChatView = ({
         overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ jsxs27(
+        /* @__PURE__ */ jsxs28(
           "div",
           {
             style: {
@@ -16265,7 +16778,7 @@ var CompactChatView = ({
               height: 44
             },
             children: [
-              /* @__PURE__ */ jsxs27(
+              /* @__PURE__ */ jsxs28(
                 "button",
                 {
                   onClick: () => setShowSessionMenu((prev) => !prev),
@@ -16282,7 +16795,7 @@ var CompactChatView = ({
                     fontFamily: "inherit"
                   },
                   children: [
-                    /* @__PURE__ */ jsx27(
+                    /* @__PURE__ */ jsx28(
                       "span",
                       {
                         style: {
@@ -16293,10 +16806,10 @@ var CompactChatView = ({
                           textOverflow: "ellipsis",
                           whiteSpace: "nowrap"
                         },
-                        children: /* @__PURE__ */ jsx27(MarkdownRenderer, { content: currentSession?.title || "AI \uCC44\uD305", inline: true })
+                        children: /* @__PURE__ */ jsx28(MarkdownRenderer, { content: currentSession?.title || "AI \uCC44\uD305", inline: true })
                       }
                     ),
-                    /* @__PURE__ */ jsx27(
+                    /* @__PURE__ */ jsx28(
                       IconSvg,
                       {
                         name: "arrow-down-s-line",
@@ -16308,7 +16821,7 @@ var CompactChatView = ({
                 }
               ),
               renderHeaderExtra?.(),
-              fullScreenPath && /* @__PURE__ */ jsxs27(
+              fullScreenPath && /* @__PURE__ */ jsxs28(
                 "a",
                 {
                   href: fullScreenPath,
@@ -16323,12 +16836,12 @@ var CompactChatView = ({
                     marginLeft: 8
                   },
                   children: [
-                    /* @__PURE__ */ jsx27(IconSvg, { name: "arrow-right-line", size: 14, color: "var(--chatllm-text-muted, #94a3b8)" }),
+                    /* @__PURE__ */ jsx28(IconSvg, { name: "arrow-right-line", size: 14, color: "var(--chatllm-text-muted, #94a3b8)" }),
                     "\uC804\uCCB4 \uD654\uBA74"
                   ]
                 }
               ),
-              showSessionMenu && /* @__PURE__ */ jsx27(
+              showSessionMenu && /* @__PURE__ */ jsx28(
                 CompactSessionMenu,
                 {
                   sessions,
@@ -16344,7 +16857,7 @@ var CompactChatView = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx27("div", { style: { flex: 1, minHeight: 0, display: "flex", flexDirection: "column", overflow: "hidden" }, children: messages.length === 0 ? /* @__PURE__ */ jsxs27(
+        /* @__PURE__ */ jsx28("div", { style: { flex: 1, minHeight: 0, display: "flex", flexDirection: "column", overflow: "hidden" }, children: messages.length === 0 ? /* @__PURE__ */ jsxs28(
           "div",
           {
             style: {
@@ -16357,7 +16870,7 @@ var CompactChatView = ({
               gap: "12px"
             },
             children: [
-              /* @__PURE__ */ jsx27(
+              /* @__PURE__ */ jsx28(
                 "p",
                 {
                   style: {
@@ -16370,7 +16883,7 @@ var CompactChatView = ({
                   children: greeting
                 }
               ),
-              suggestedPrompts && suggestedPrompts.length > 0 && /* @__PURE__ */ jsx27(
+              suggestedPrompts && suggestedPrompts.length > 0 && /* @__PURE__ */ jsx28(
                 "div",
                 {
                   style: {
@@ -16380,7 +16893,7 @@ var CompactChatView = ({
                     justifyContent: "center",
                     maxWidth: "100%"
                   },
-                  children: suggestedPrompts.slice(0, 4).map((sp) => /* @__PURE__ */ jsxs27(
+                  children: suggestedPrompts.slice(0, 4).map((sp) => /* @__PURE__ */ jsxs28(
                     "button",
                     {
                       onClick: () => setInput(sp.prompt),
@@ -16400,7 +16913,7 @@ var CompactChatView = ({
                         whiteSpace: "nowrap"
                       },
                       children: [
-                        sp.icon && /* @__PURE__ */ jsx27(IconSvg, { name: sp.icon, size: 14, color: "var(--chatllm-text-muted)" }),
+                        sp.icon && /* @__PURE__ */ jsx28(IconSvg, { name: sp.icon, size: 14, color: "var(--chatllm-text-muted)" }),
                         sp.label
                       ]
                     },
@@ -16410,7 +16923,7 @@ var CompactChatView = ({
               )
             ]
           }
-        ) : /* @__PURE__ */ jsx27(
+        ) : /* @__PURE__ */ jsx28(
           MessageList,
           {
             messages,
@@ -16435,11 +16948,11 @@ var CompactChatView = ({
             onChecklistSkip: handleChecklistSkip,
             activeSkillExecution,
             compact: true,
-            assistantIcon: /* @__PURE__ */ jsx27(DevDiveAvatar, { size: 32 }),
+            assistantIcon: /* @__PURE__ */ jsx28(DevDiveAvatar, { size: 32 }),
             renderMessage
           }
         ) }),
-        /* @__PURE__ */ jsx27("div", { style: { flex: "none", padding: "0 8px 8px 8px" }, children: /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx28("div", { style: { flex: "none", padding: "0 8px 8px 8px" }, children: /* @__PURE__ */ jsx28(
           ChatInput,
           {
             value: input,
@@ -16472,7 +16985,7 @@ var CompactChatView = ({
 };
 
 // src/react/components/floating/ResizeHandles.tsx
-import { Fragment as Fragment11, jsx as jsx28 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx29 } from "react/jsx-runtime";
 var HANDLES = [
   { edge: "top", className: "chatllm-resize-handle chatllm-resize-handle--top" },
   { edge: "left", className: "chatllm-resize-handle chatllm-resize-handle--left" },
@@ -16485,7 +16998,7 @@ var ResizeHandles = ({
   onPointerMove,
   onPointerUp
 }) => {
-  return /* @__PURE__ */ jsx28(Fragment11, { children: HANDLES.map(({ edge, className }) => /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(Fragment11, { children: HANDLES.map(({ edge, className }) => /* @__PURE__ */ jsx29(
     "div",
     {
       className,
@@ -16498,7 +17011,7 @@ var ResizeHandles = ({
 };
 
 // src/react/ChatFloatingWidget.tsx
-import { jsx as jsx29, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs29 } from "react/jsx-runtime";
 injectBaseStyles();
 injectFloatingStyles();
 var ChatFloatingWidget = ({
@@ -16559,7 +17072,7 @@ var ChatFloatingWidget = ({
     if (!notification) return null;
     return typeof notification === "string" ? { text: notification } : notification;
   }, [notification]);
-  const handleFabClick = useCallback14(() => {
+  const handleFabClick = useCallback15(() => {
     if (notifObj?.onClick) {
       notifObj.onClick();
       if (!isOpen) handleFabInteraction();
@@ -16577,7 +17090,7 @@ var ChatFloatingWidget = ({
     const chatTab = {
       key: "chat",
       label: "\uCC44\uD305",
-      icon: /* @__PURE__ */ jsx29(IconSvg, { name: "chat-1-line", size: 16 })
+      icon: /* @__PURE__ */ jsx30(IconSvg, { name: "chat-1-line", size: 16 })
     };
     const customTabs = tabs.map((t) => ({
       key: t.key,
@@ -16587,9 +17100,9 @@ var ChatFloatingWidget = ({
     }));
     return [chatTab, ...customTabs];
   }, [tabs]);
-  const [unreadBadge, setUnreadBadge] = useState27(0);
-  const seenMessageIdsRef = useRef16(new Set(chatState.messages.map((m) => m.id)));
-  useEffect18(() => {
+  const [unreadBadge, setUnreadBadge] = useState28(0);
+  const seenMessageIdsRef = useRef17(new Set(chatState.messages.map((m) => m.id)));
+  useEffect19(() => {
     if (!isOpen) {
       const newAssistant = chatState.messages.filter(
         (m) => m.role === "assistant" && !seenMessageIdsRef.current.has(m.id)
@@ -16602,16 +17115,16 @@ var ChatFloatingWidget = ({
       seenMessageIdsRef.current.add(m.id);
     }
   }, [chatState.messages, isOpen]);
-  useEffect18(() => {
+  useEffect19(() => {
     if (isOpen) setUnreadBadge(0);
   }, [isOpen]);
   const totalBadge = useMemo7(() => {
     return tabs.reduce((sum, t) => sum + (t.badge || 0), 0) + unreadBadge;
   }, [tabs, unreadBadge]);
   const isTalking = useMemo7(() => !!notification || chatState.isLoading, [notification, chatState.isLoading]);
-  const prevLoadingRef = useRef16(chatState.isLoading);
-  const [isComplete, setIsComplete] = useState27(false);
-  useEffect18(() => {
+  const prevLoadingRef = useRef17(chatState.isLoading);
+  const [isComplete, setIsComplete] = useState28(false);
+  useEffect19(() => {
     const wasLoading = prevLoadingRef.current;
     prevLoadingRef.current = chatState.isLoading;
     if (!wasLoading || chatState.isLoading || chatState.messages.length === 0) return;
@@ -16619,8 +17132,8 @@ var ChatFloatingWidget = ({
     const t = setTimeout(() => setIsComplete(false), 100);
     return () => clearTimeout(t);
   }, [chatState.isLoading, chatState.messages.length]);
-  return /* @__PURE__ */ jsxs28("div", { className: `chatllm-floating-widget ${className}`, children: [
-    /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsxs29("div", { className: `chatllm-floating-widget ${className}`, children: [
+    /* @__PURE__ */ jsx30(
       FloatingFab,
       {
         onClick: handleFabClick,
@@ -16641,7 +17154,7 @@ var ChatFloatingWidget = ({
         isComplete
       }
     ),
-    /* @__PURE__ */ jsxs28(
+    /* @__PURE__ */ jsxs29(
       FloatingPanel,
       {
         isOpen,
@@ -16653,7 +17166,7 @@ var ChatFloatingWidget = ({
         panelRef,
         positionStyle: dragResize.panelPositionStyle,
         isResizing: dragResize.isResizing,
-        resizeHandles: !dragResize.isMobile && !disableDragResize ? /* @__PURE__ */ jsx29(
+        resizeHandles: !dragResize.isMobile && !disableDragResize ? /* @__PURE__ */ jsx30(
           ResizeHandles,
           {
             onPointerDown: dragResize.resizeHandlers.onPointerDown,
@@ -16662,7 +17175,7 @@ var ChatFloatingWidget = ({
           }
         ) : null,
         children: [
-          /* @__PURE__ */ jsx29(
+          /* @__PURE__ */ jsx30(
             FloatingTabBar,
             {
               tabs: allTabs,
@@ -16670,8 +17183,8 @@ var ChatFloatingWidget = ({
               onTabChange: setTab
             }
           ),
-          /* @__PURE__ */ jsxs28("div", { style: { flex: 1, position: "relative", overflow: "hidden", minHeight: 0 }, children: [
-            /* @__PURE__ */ jsx29(
+          /* @__PURE__ */ jsxs29("div", { style: { flex: 1, position: "relative", overflow: "hidden", minHeight: 0 }, children: [
+            /* @__PURE__ */ jsx30(
               "div",
               {
                 style: {
@@ -16685,7 +17198,7 @@ var ChatFloatingWidget = ({
                   bottom: 0,
                   overflow: "hidden"
                 },
-                children: /* @__PURE__ */ jsx29(
+                children: /* @__PURE__ */ jsx30(
                   CompactChatView,
                   {
                     chatState,
@@ -16701,7 +17214,7 @@ var ChatFloatingWidget = ({
                 )
               }
             ),
-            tabs.map((tab) => /* @__PURE__ */ jsx29(
+            tabs.map((tab) => /* @__PURE__ */ jsx30(
               "div",
               {
                 style: {
@@ -16727,7 +17240,7 @@ var ChatFloatingWidget = ({
 };
 
 // src/react/hooks/useDeepResearch.ts
-import { useState as useState28, useCallback as useCallback15, useRef as useRef17 } from "react";
+import { useState as useState29, useCallback as useCallback16, useRef as useRef18 } from "react";
 var REPORT_GENERATION_PROMPT2 = `\uB2F9\uC2E0\uC740 \uB9AC\uC11C\uCE58 \uBCF4\uACE0\uC11C \uC791\uC131 \uC804\uBB38\uAC00\uC785\uB2C8\uB2E4.
 
 <collected_sources>
@@ -16778,10 +17291,10 @@ var QUERY_ANALYSIS_PROMPT2 = `\uC0AC\uC6A9\uC790 \uC9C8\uBB38\uC744 \uBD84\uC11D
 - JSON \uC678 \uB2E4\uB978 \uD14D\uC2A4\uD2B8 \uCD9C\uB825 \uAE08\uC9C0`;
 var useDeepResearch = (options) => {
   const { onWebSearch, onExtractContent, apiEndpoint, apiKey, model, provider } = options;
-  const [isResearching, setIsResearching] = useState28(false);
-  const [progress, setProgress] = useState28(null);
-  const abortControllerRef = useRef17(null);
-  const callLLM2 = useCallback15(
+  const [isResearching, setIsResearching] = useState29(false);
+  const [progress, setProgress] = useState29(null);
+  const abortControllerRef = useRef18(null);
+  const callLLM2 = useCallback16(
     async (prompt, stream = false) => {
       const response = await fetch(apiEndpoint, {
         method: "POST",
@@ -16808,7 +17321,7 @@ var useDeepResearch = (options) => {
     },
     [apiEndpoint, apiKey, model, provider]
   );
-  const analyzeQuery2 = useCallback15(
+  const analyzeQuery2 = useCallback16(
     async (query) => {
       const prompt = QUERY_ANALYSIS_PROMPT2.replace("{question}", query);
       const response = await callLLM2(prompt);
@@ -16827,7 +17340,7 @@ var useDeepResearch = (options) => {
     },
     [callLLM2]
   );
-  const runSubAgent2 = useCallback15(
+  const runSubAgent2 = useCallback16(
     async (topic, queries, agentId, updateProgress) => {
       updateProgress({ status: "searching", searchCount: 0, resultsCount: 0 });
       const allResults = [];
@@ -16866,7 +17379,7 @@ var useDeepResearch = (options) => {
     },
     [onWebSearch, onExtractContent]
   );
-  const generateReport2 = useCallback15(
+  const generateReport2 = useCallback16(
     async (query, results, onStreamContent) => {
       const allSources = [];
       const sourcesForPrompt = [];
@@ -16924,7 +17437,7 @@ var useDeepResearch = (options) => {
     },
     [callLLM2]
   );
-  const runDeepResearch = useCallback15(
+  const runDeepResearch = useCallback16(
     async (query, onStreamContent) => {
       abortControllerRef.current = new AbortController();
       setIsResearching(true);
@@ -17027,7 +17540,7 @@ var useDeepResearch = (options) => {
     },
     [analyzeQuery2, runSubAgent2, generateReport2]
   );
-  const stopResearch = useCallback15(() => {
+  const stopResearch = useCallback16(() => {
     abortControllerRef.current?.abort();
     setIsResearching(false);
     setProgress(null);
@@ -17041,7 +17554,7 @@ var useDeepResearch = (options) => {
 };
 
 // src/react/components/EmptyState.tsx
-import { jsx as jsx30, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs30 } from "react/jsx-runtime";
 var EmptyState = ({
   greeting,
   templates = [],
@@ -17059,7 +17572,7 @@ var EmptyState = ({
     return iconMap[icon] || "sparkling-line";
   };
   const hasContent = actions.length > 0 || templates.length > 0;
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs30(
     "div",
     {
       className: "chatllm-empty-state",
@@ -17074,7 +17587,7 @@ var EmptyState = ({
         textAlign: "center"
       },
       children: [
-        /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsx31(
           "div",
           {
             className: "chatllm-sheet",
@@ -17088,10 +17601,10 @@ var EmptyState = ({
               marginBottom: "32px",
               color: "var(--chatllm-primary)"
             },
-            children: /* @__PURE__ */ jsx30(IconSvg, { name: "chat-1-line", size: 40 })
+            children: /* @__PURE__ */ jsx31(IconSvg, { name: "chat-1-line", size: 40 })
           }
         ),
-        /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsx31(
           "h1",
           {
             style: {
@@ -17104,7 +17617,7 @@ var EmptyState = ({
             children: "How can I help you today?"
           }
         ),
-        (actions.length > 0 || templates.length > 0) && /* @__PURE__ */ jsxs29(
+        (actions.length > 0 || templates.length > 0) && /* @__PURE__ */ jsxs30(
           "div",
           {
             style: {
@@ -17116,7 +17629,7 @@ var EmptyState = ({
               marginBottom: "48px"
             },
             children: [
-              actions.map((action) => /* @__PURE__ */ jsxs29(
+              actions.map((action) => /* @__PURE__ */ jsxs30(
                 "button",
                 {
                   onClick: () => onActionSelect?.(action),
@@ -17130,7 +17643,7 @@ var EmptyState = ({
                     fontWeight: 500
                   },
                   children: [
-                    /* @__PURE__ */ jsx30(
+                    /* @__PURE__ */ jsx31(
                       IconSvg,
                       {
                         name: getActionIcon(action.icon),
@@ -17143,7 +17656,7 @@ var EmptyState = ({
                 },
                 action.id
               )),
-              templates.slice(0, 4).map((template) => /* @__PURE__ */ jsxs29(
+              templates.slice(0, 4).map((template) => /* @__PURE__ */ jsxs30(
                 "button",
                 {
                   onClick: () => onTemplateClick(template),
@@ -17157,7 +17670,7 @@ var EmptyState = ({
                     fontWeight: 500
                   },
                   children: [
-                    /* @__PURE__ */ jsx30(
+                    /* @__PURE__ */ jsx31(
                       IconSvg,
                       {
                         name: "sparkling-line",
@@ -17179,8 +17692,8 @@ var EmptyState = ({
 };
 
 // src/react/components/MemoryPanel.tsx
-import { useState as useState29 } from "react";
-import { jsx as jsx31, jsxs as jsxs30 } from "react/jsx-runtime";
+import { useState as useState30 } from "react";
+import { jsx as jsx32, jsxs as jsxs31 } from "react/jsx-runtime";
 var categoryLabels = {
   fact: "\uC0AC\uC6A9\uC790 \uC815\uBCF4",
   skill: "\uC804\uBB38 \uBD84\uC57C/\uAE30\uC220",
@@ -17199,8 +17712,8 @@ var MemoryPanel = ({
   isOpen,
   onToggle
 }) => {
-  const [expandedId, setExpandedId] = useState29(null);
-  const [activeTab, setActiveTab] = useState29("all");
+  const [expandedId, setExpandedId] = useState30(null);
+  const [activeTab, setActiveTab] = useState30("all");
   const filteredItems = activeTab === "all" ? items : items.filter((item) => item.category === activeTab);
   const formatDate = (timestamp) => {
     const date = new Date(timestamp);
@@ -17212,7 +17725,7 @@ var MemoryPanel = ({
     });
   };
   if (!isOpen) {
-    return /* @__PURE__ */ jsx31(
+    return /* @__PURE__ */ jsx32(
       "button",
       {
         onClick: onToggle,
@@ -17232,11 +17745,11 @@ var MemoryPanel = ({
           justifyContent: "center",
           zIndex: 100
         },
-        children: /* @__PURE__ */ jsx31(IconSvg, { name: "robot-line", size: 24, color: "#ffffff" })
+        children: /* @__PURE__ */ jsx32(IconSvg, { name: "robot-line", size: 24, color: "#ffffff" })
       }
     );
   }
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs31(
     "div",
     {
       className: "chatllm-memory-panel",
@@ -17256,7 +17769,7 @@ var MemoryPanel = ({
         zIndex: 100
       },
       children: [
-        /* @__PURE__ */ jsxs30(
+        /* @__PURE__ */ jsxs31(
           "div",
           {
             style: {
@@ -17267,8 +17780,8 @@ var MemoryPanel = ({
               borderBottom: "1px solid var(--chatllm-border, #e5e7eb)"
             },
             children: [
-              /* @__PURE__ */ jsxs30("div", { style: { display: "flex", alignItems: "center", gap: "10px" }, children: [
-                /* @__PURE__ */ jsx31(
+              /* @__PURE__ */ jsxs31("div", { style: { display: "flex", alignItems: "center", gap: "10px" }, children: [
+                /* @__PURE__ */ jsx32(
                   "div",
                   {
                     style: {
@@ -17280,19 +17793,19 @@ var MemoryPanel = ({
                       alignItems: "center",
                       justifyContent: "center"
                     },
-                    children: /* @__PURE__ */ jsx31(IconSvg, { name: "robot-line", size: 18, color: "var(--chatllm-primary, #3584FA)" })
+                    children: /* @__PURE__ */ jsx32(IconSvg, { name: "robot-line", size: 18, color: "var(--chatllm-primary, #3584FA)" })
                   }
                 ),
-                /* @__PURE__ */ jsxs30("div", { children: [
-                  /* @__PURE__ */ jsx31("div", { style: { fontSize: "15px", fontWeight: 600, color: "var(--chatllm-text, #1f2937)" }, children: "AI \uBA54\uBAA8\uB9AC" }),
-                  /* @__PURE__ */ jsxs30("div", { style: { fontSize: "12px", color: "var(--chatllm-text-muted, #9ca3af)" }, children: [
+                /* @__PURE__ */ jsxs31("div", { children: [
+                  /* @__PURE__ */ jsx32("div", { style: { fontSize: "15px", fontWeight: 600, color: "var(--chatllm-text, #1f2937)" }, children: "AI \uBA54\uBAA8\uB9AC" }),
+                  /* @__PURE__ */ jsxs31("div", { style: { fontSize: "12px", color: "var(--chatllm-text-muted, #9ca3af)" }, children: [
                     items.length,
                     "\uAC1C \uD56D\uBAA9"
                   ] })
                 ] })
               ] }),
-              /* @__PURE__ */ jsxs30("div", { style: { display: "flex", gap: "4px" }, children: [
-                onClearAll && items.length > 0 && /* @__PURE__ */ jsx31(
+              /* @__PURE__ */ jsxs31("div", { style: { display: "flex", gap: "4px" }, children: [
+                onClearAll && items.length > 0 && /* @__PURE__ */ jsx32(
                   "button",
                   {
                     onClick: onClearAll,
@@ -17304,10 +17817,10 @@ var MemoryPanel = ({
                       cursor: "pointer"
                     },
                     title: "\uC804\uCCB4 \uC0AD\uC81C",
-                    children: /* @__PURE__ */ jsx31(IconSvg, { name: "delete-bin-line", size: 18, color: "var(--chatllm-text-muted, #9ca3af)" })
+                    children: /* @__PURE__ */ jsx32(IconSvg, { name: "delete-bin-line", size: 18, color: "var(--chatllm-text-muted, #9ca3af)" })
                   }
                 ),
-                /* @__PURE__ */ jsx31(
+                /* @__PURE__ */ jsx32(
                   "button",
                   {
                     onClick: onToggle,
@@ -17318,14 +17831,14 @@ var MemoryPanel = ({
                       borderRadius: "8px",
                       cursor: "pointer"
                     },
-                    children: /* @__PURE__ */ jsx31(IconSvg, { name: "close-line", size: 18, color: "var(--chatllm-text-muted, #9ca3af)" })
+                    children: /* @__PURE__ */ jsx32(IconSvg, { name: "close-line", size: 18, color: "var(--chatllm-text-muted, #9ca3af)" })
                   }
                 )
               ] })
             ]
           }
         ),
-        /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx32(
           "div",
           {
             style: {
@@ -17335,7 +17848,7 @@ var MemoryPanel = ({
               borderBottom: "1px solid var(--chatllm-border-light, #f3f4f6)",
               overflowX: "auto"
             },
-            children: ["all", "fact", "skill", "preference"].map((tab) => /* @__PURE__ */ jsx31(
+            children: ["all", "fact", "skill", "preference"].map((tab) => /* @__PURE__ */ jsx32(
               "button",
               {
                 onClick: () => setActiveTab(tab),
@@ -17356,8 +17869,8 @@ var MemoryPanel = ({
             ))
           }
         ),
-        /* @__PURE__ */ jsxs30("div", { style: { flex: 1, overflow: "auto", padding: "12px" }, children: [
-          contextSummary && activeTab === "all" && /* @__PURE__ */ jsxs30(
+        /* @__PURE__ */ jsxs31("div", { style: { flex: 1, overflow: "auto", padding: "12px" }, children: [
+          contextSummary && activeTab === "all" && /* @__PURE__ */ jsxs31(
             "div",
             {
               style: {
@@ -17368,7 +17881,7 @@ var MemoryPanel = ({
                 borderLeft: "3px solid var(--chatllm-primary, #3584FA)"
               },
               children: [
-                /* @__PURE__ */ jsxs30(
+                /* @__PURE__ */ jsxs31(
                   "div",
                   {
                     style: {
@@ -17378,12 +17891,12 @@ var MemoryPanel = ({
                       marginBottom: "8px"
                     },
                     children: [
-                      /* @__PURE__ */ jsx31(IconSvg, { name: "file-text-line", size: 14, color: "var(--chatllm-primary, #3584FA)" }),
-                      /* @__PURE__ */ jsx31("span", { style: { fontSize: "12px", fontWeight: 500, color: "var(--chatllm-primary, #3584FA)" }, children: "\uB300\uD654 \uC694\uC57D" })
+                      /* @__PURE__ */ jsx32(IconSvg, { name: "file-text-line", size: 14, color: "var(--chatllm-primary, #3584FA)" }),
+                      /* @__PURE__ */ jsx32("span", { style: { fontSize: "12px", fontWeight: 500, color: "var(--chatllm-primary, #3584FA)" }, children: "\uB300\uD654 \uC694\uC57D" })
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx31(
+                /* @__PURE__ */ jsx32(
                   "p",
                   {
                     style: {
@@ -17398,7 +17911,7 @@ var MemoryPanel = ({
               ]
             }
           ),
-          filteredItems.length === 0 ? /* @__PURE__ */ jsxs30(
+          filteredItems.length === 0 ? /* @__PURE__ */ jsxs31(
             "div",
             {
               style: {
@@ -17407,11 +17920,11 @@ var MemoryPanel = ({
                 color: "var(--chatllm-text-muted, #9ca3af)"
               },
               children: [
-                /* @__PURE__ */ jsx31(IconSvg, { name: "robot-line", size: 32, color: "var(--chatllm-text-muted, #d1d5db)" }),
-                /* @__PURE__ */ jsx31("p", { style: { fontSize: "14px", marginTop: "12px" }, children: "\uC800\uC7A5\uB41C \uBA54\uBAA8\uB9AC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" })
+                /* @__PURE__ */ jsx32(IconSvg, { name: "robot-line", size: 32, color: "var(--chatllm-text-muted, #d1d5db)" }),
+                /* @__PURE__ */ jsx32("p", { style: { fontSize: "14px", marginTop: "12px" }, children: "\uC800\uC7A5\uB41C \uBA54\uBAA8\uB9AC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" })
               ]
             }
-          ) : /* @__PURE__ */ jsx31("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: filteredItems.map((item) => /* @__PURE__ */ jsxs30(
+          ) : /* @__PURE__ */ jsx32("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: filteredItems.map((item) => /* @__PURE__ */ jsxs31(
             "div",
             {
               style: {
@@ -17424,10 +17937,10 @@ var MemoryPanel = ({
               },
               onClick: () => setExpandedId(expandedId === item.id ? null : item.id),
               children: [
-                /* @__PURE__ */ jsxs30("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between" }, children: [
-                  /* @__PURE__ */ jsxs30("div", { style: { flex: 1, minWidth: 0 }, children: [
-                    /* @__PURE__ */ jsxs30("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginBottom: "4px" }, children: [
-                      item.category && /* @__PURE__ */ jsx31(
+                /* @__PURE__ */ jsxs31("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between" }, children: [
+                  /* @__PURE__ */ jsxs31("div", { style: { flex: 1, minWidth: 0 }, children: [
+                    /* @__PURE__ */ jsxs31("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginBottom: "4px" }, children: [
+                      item.category && /* @__PURE__ */ jsx32(
                         "span",
                         {
                           style: {
@@ -17441,9 +17954,9 @@ var MemoryPanel = ({
                           children: categoryLabels[item.category]
                         }
                       ),
-                      /* @__PURE__ */ jsx31("span", { style: { fontSize: "11px", color: "var(--chatllm-text-muted, #9ca3af)" }, children: formatDate(item.timestamp) })
+                      /* @__PURE__ */ jsx32("span", { style: { fontSize: "11px", color: "var(--chatllm-text-muted, #9ca3af)" }, children: formatDate(item.timestamp) })
                     ] }),
-                    /* @__PURE__ */ jsx31(
+                    /* @__PURE__ */ jsx32(
                       "div",
                       {
                         style: {
@@ -17455,8 +17968,8 @@ var MemoryPanel = ({
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsxs30("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
-                    onDelete && /* @__PURE__ */ jsx31(
+                  /* @__PURE__ */ jsxs31("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+                    onDelete && /* @__PURE__ */ jsx32(
                       "button",
                       {
                         onClick: (e) => {
@@ -17471,10 +17984,10 @@ var MemoryPanel = ({
                           cursor: "pointer",
                           opacity: 0.5
                         },
-                        children: /* @__PURE__ */ jsx31(IconSvg, { name: "delete-bin-line", size: 14, color: "var(--chatllm-text-muted, #9ca3af)" })
+                        children: /* @__PURE__ */ jsx32(IconSvg, { name: "delete-bin-line", size: 14, color: "var(--chatllm-text-muted, #9ca3af)" })
                       }
                     ),
-                    /* @__PURE__ */ jsx31(
+                    /* @__PURE__ */ jsx32(
                       IconSvg,
                       {
                         name: expandedId === item.id ? "arrow-up-s-line" : "arrow-down-s-line",
@@ -17484,7 +17997,7 @@ var MemoryPanel = ({
                     )
                   ] })
                 ] }),
-                expandedId === item.id && /* @__PURE__ */ jsx31(
+                expandedId === item.id && /* @__PURE__ */ jsx32(
                   "div",
                   {
                     style: {
@@ -17492,7 +18005,7 @@ var MemoryPanel = ({
                       paddingTop: "12px",
                       borderTop: "1px solid var(--chatllm-border-light, #f3f4f6)"
                     },
-                    children: /* @__PURE__ */ jsx31(
+                    children: /* @__PURE__ */ jsx32(
                       "p",
                       {
                         style: {
@@ -17517,6 +18030,7 @@ var MemoryPanel = ({
   );
 };
 export {
+  ArtifactCard,
   ChatFloatingWidget,
   ChatHeader,
   ChatInput,