@gendive/chatllm 0.14.0 → 0.15.0

package/dist/react/index.mjs

@@ -1,5 +1,5 @@
 // src/react/ChatUI.tsx
-import React11 from "react";
+import React12 from "react";
 
 // src/react/hooks/useChatUI.ts
 import { useState as useState4, useRef as useRef3, useCallback as useCallback4, useEffect as useEffect2, useMemo as useMemo2 } from "react";
@@ -1155,6 +1155,45 @@ var formatPollResponse = (question, selectedOptions, otherText) => {
   return `${selectedLabels.join(", ")}\uC744(\uB97C) \uC120\uD0DD\uD588\uC2B5\uB2C8\uB2E4. \uC774 \uC120\uD0DD\uC744 \uBC14\uD0D5\uC73C\uB85C \uC9C4\uD589\uD574\uC8FC\uC138\uC694.`;
 };
 
+// src/react/utils/toolAdapter.ts
+var convertToolsToSkills = (tools, onToolCall) => {
+  const skillMap = {};
+  for (const tool of tools) {
+    skillMap[tool.name] = {
+      description: tool.description,
+      trigger: "auto",
+      label: tool.name,
+      parameters: {
+        type: "object",
+        properties: Object.fromEntries(
+          Object.entries(tool.parameters).map(([key, param]) => [
+            key,
+            {
+              type: param.type,
+              description: param.description,
+              enum: param.enum
+            }
+          ])
+        ),
+        required: Object.entries(tool.parameters).filter(([, param]) => param.required).map(([key]) => key)
+      },
+      execute: async (params) => {
+        const result = await onToolCall(tool.name, params);
+        return {
+          content: result.content,
+          metadata: {
+            __toolResult__: true,
+            resultType: result.type,
+            toolName: tool.name,
+            ...result.metadata
+          }
+        };
+      }
+    };
+  }
+  return skillMap;
+};
+
 // src/react/utils/sessionCache.ts
 var buildCacheKey = (storageKey, sessionId) => `${storageKey}_cache_${sessionId}`;
 var writeSessionCache = (storageKey, session) => {
@@ -1232,7 +1271,10 @@ var useChatUI = (options) => {
     // Poll options
     enablePoll = true,
     // Skills options
-    skills
+    skills,
+    // Tool options
+    tools,
+    onToolCall
   } = options;
   const enableAutoExtraction = enableAutoExtractionProp ?? !useExternalStorage;
   const [sessions, setSessions] = useState4([]);
@@ -1277,6 +1319,11 @@ var useChatUI = (options) => {
     [globalMemoryConfig, storageKey]
   );
   const globalMemory = useGlobalMemoryEnabled ? useGlobalMemory(memoryOptions) : null;
+  const mergedSkills = useMemo2(() => {
+    if (!tools || !onToolCall) return skills || {};
+    const toolSkills = convertToolsToSkills(tools, onToolCall);
+    return { ...skills || {}, ...toolSkills };
+  }, [skills, tools, onToolCall]);
   const {
     buildSkillsPrompt,
     handleSkillCall,
@@ -1285,7 +1332,7 @@ var useChatUI = (options) => {
     activeSkillExecution,
     resolvedSkills
   } = useSkills({
-    skills,
+    skills: mergedSkills,
     deepResearch
   });
   const infoExtraction = useInfoExtraction({
@@ -1751,6 +1798,9 @@ ${newConversation}
       return next;
     });
   }, [options.onPersonalizationChange]);
+  const savePersonalization = useCallback4(() => {
+    options.onPersonalizationSave?.(personalization);
+  }, [options.onPersonalizationSave, personalization]);
   const toggleDeepResearchMode = useCallback4(() => {
     setIsDeepResearchMode((prev) => !prev);
   }, []);
@@ -2122,6 +2172,60 @@ ${currentContextSummary}` },
             signal: abortControllerRef.current?.signal
           });
           if (result) {
+            if (result.metadata?.__toolResult__) {
+              const resultType = result.metadata.resultType;
+              const toolName = result.metadata.toolName;
+              const parts = [];
+              if (skillCleanContent.trim()) {
+                parts.push({ type: "text", content: skillCleanContent });
+              }
+              if (resultType === "image") {
+                parts.push({ type: "image", url: result.content, alt: result.metadata?.alt });
+              } else if (resultType === "file") {
+                parts.push({
+                  type: "file",
+                  name: result.metadata?.fileName || "file",
+                  url: result.content,
+                  mimeType: result.metadata?.mimeType
+                });
+              } else if (resultType === "error") {
+                parts.push({ type: "error", message: result.content });
+              } else {
+                parts.push({ type: "text", content: result.content });
+              }
+              setSessions(
+                (prev) => prev.map((s) => {
+                  if (s.id !== capturedSessionId) return s;
+                  return {
+                    ...s,
+                    messages: s.messages.map((m) => {
+                      if (m.id !== assistantMessageId) return m;
+                      return {
+                        ...m,
+                        contentParts: parts,
+                        skillExecution: {
+                          ...m.skillExecution,
+                          status: "done",
+                          result
+                        }
+                      };
+                    })
+                  };
+                })
+              );
+              skipNextSkillParsingRef.current = true;
+              const feedbackPrompt = resultType === "image" ? `\uB3C4\uAD6C "${toolName}": \uC774\uBBF8\uC9C0 \uC0DD\uC131 \uC644\uB8CC. \uC0AC\uC6A9\uC790\uC5D0\uAC8C \uACB0\uACFC\uB97C \uC124\uBA85\uD574\uC8FC\uC138\uC694. skill_use \uD0DC\uADF8\uB294 \uC0AC\uC6A9\uD558\uC9C0 \uB9C8\uC138\uC694.` : `\uB3C4\uAD6C "${toolName}" \uACB0\uACFC:
+
+${result.content}
+
+\uC704 \uACB0\uACFC\uB97C \uBC14\uD0D5\uC73C\uB85C \uB2F5\uBCC0\uD574\uC8FC\uC138\uC694. skill_use \uD0DC\uADF8\uB294 \uC0AC\uC6A9\uD558\uC9C0 \uB9C8\uC138\uC694.`;
+              setTimeout(() => {
+                sendMessage(feedbackPrompt, { hiddenUserMessage: true });
+              }, 100);
+              setIsLoading(false);
+              abortControllerRef.current = null;
+              return;
+            }
             setSessions(
               (prev) => prev.map((s) => {
                 if (s.id !== capturedSessionId) return s;
@@ -2716,6 +2820,7 @@ ${currentSession.contextSummary}` },
     setActiveAlternative,
     getActiveAlternative,
     updatePersonalization,
+    savePersonalization,
     models,
     // Memory
     globalMemory,
@@ -4113,10 +4218,10 @@ var iconButtonStyle = {
 };
 
 // src/react/components/MessageList.tsx
-import { useRef as useRef6, useEffect as useEffect6, useCallback as useCallback7, useState as useState11 } from "react";
+import { useRef as useRef6, useEffect as useEffect6, useCallback as useCallback7, useState as useState12 } from "react";
 
 // src/react/components/MessageBubble.tsx
-import { useState as useState10 } from "react";
+import { useState as useState11 } from "react";
 
 // src/react/components/MarkdownRenderer.tsx
 import React5, { useMemo as useMemo3 } from "react";
@@ -4305,6 +4410,49 @@ var ITALIC_REGEX = /(?<!\*)\*([^*]+)\*(?!\*)/g;
 var HR_REGEX = /^---+$/gm;
 var TABLE_ROW_REGEX = /^\|(.+)\|$/;
 var TABLE_SEPARATOR_REGEX = /^\|[\s\-:|]+\|$/;
+var convertNonStandardTable = (codeContent) => {
+  const lines = codeContent.trim().split("\n");
+  const nonEmptyLines = lines.filter((l) => l.trim());
+  if (nonEmptyLines.length < 2) return null;
+  const isSeparatorLine = (line) => /^[-=\s\t|:]+$/.test(line.trim()) && /[-=]{2,}/.test(line);
+  if (nonEmptyLines[0].includes("	")) {
+    const dataLines2 = nonEmptyLines.filter((l) => !isSeparatorLine(l));
+    if (dataLines2.length < 2) return null;
+    if (!dataLines2.every((l) => l.includes("	"))) return null;
+    const colCount2 = dataLines2[0].split("	").length;
+    if (colCount2 < 2) return null;
+    const result2 = [];
+    const headerCells = dataLines2[0].split("	").map((c) => c.trim());
+    result2.push("| " + headerCells.join(" | ") + " |");
+    result2.push("| " + Array(colCount2).fill("---").join(" | ") + " |");
+    for (let i = 1; i < dataLines2.length; i++) {
+      const cells = dataLines2[i].split("	").map((c) => c.trim());
+      while (cells.length < colCount2) cells.push("");
+      result2.push("| " + cells.join(" | ") + " |");
+    }
+    return result2.join("\n");
+  }
+  const dataLines = nonEmptyLines.filter((l) => !isSeparatorLine(l));
+  if (dataLines.length < 2) return null;
+  const spaceParsed = dataLines.map(
+    (l) => l.split(/\s{2,}/).map((c) => c.trim()).filter(Boolean)
+  );
+  const colCount = spaceParsed[0].length;
+  if (colCount < 3) return null;
+  const consistent = spaceParsed.every(
+    (cols) => cols.length >= colCount - 1 && cols.length <= colCount + 1
+  );
+  if (!consistent) return null;
+  const result = [];
+  result.push("| " + spaceParsed[0].join(" | ") + " |");
+  result.push("| " + Array(colCount).fill("---").join(" | ") + " |");
+  for (let i = 1; i < spaceParsed.length; i++) {
+    const cells = [...spaceParsed[i]];
+    while (cells.length < colCount) cells.push("");
+    result.push("| " + cells.join(" | ") + " |");
+  }
+  return result.join("\n");
+};
 var parseSourceLinks = (text) => {
   const links = [];
   let match;
@@ -5030,7 +5178,17 @@ var MarkdownRenderer = ({
     processedContent = processedContent.replace(UNCLOSED_POLL_TAG_REGEX, "");
     processedContent = processedContent.replace(UNCLOSED_SKILL_TAG_REGEX, "");
     const codeBlocks = [];
-    processedContent = processedContent.replace(CODE_BLOCK_REGEX, (_, lang, code) => {
+    processedContent = processedContent.replace(CODE_BLOCK_REGEX, (match, lang, code) => {
+      if (lang === "markdown" || lang === "md") {
+        const trimmedCode = code.trim();
+        if (TABLE_ROW_REGEX.test(trimmedCode.split("\n")[0])) {
+          return "\n" + trimmedCode + "\n";
+        }
+        const converted = convertNonStandardTable(trimmedCode);
+        if (converted) {
+          return "\n" + converted + "\n";
+        }
+      }
       codeBlocks.push({ language: lang || "", code });
       return `\xA7CODEBLOCK\xA7${codeBlocks.length - 1}\xA7/CODEBLOCK\xA7`;
     });
@@ -6094,8 +6252,358 @@ var SkillProgressUI = ({
   );
 };
 
+// src/react/components/ImageContentCard.tsx
+import { useState as useState10 } from "react";
+import { Fragment as Fragment5, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+var ImageContentCard = ({ part }) => {
+  const [isExpanded, setIsExpanded] = useState10(false);
+  const [isLoaded, setIsLoaded] = useState10(false);
+  const [hasError, setHasError] = useState10(false);
+  if (hasError) {
+    return /* @__PURE__ */ jsxs9(
+      "div",
+      {
+        style: {
+          padding: "16px",
+          backgroundColor: "var(--chatllm-bg-secondary, #f9fafb)",
+          borderRadius: "8px",
+          border: "1px solid var(--chatllm-border, #e5e7eb)",
+          color: "var(--chatllm-text-muted, #64748b)",
+          fontSize: "13px",
+          display: "flex",
+          alignItems: "center",
+          gap: "8px"
+        },
+        children: [
+          /* @__PURE__ */ jsx10(IconSvg, { name: "error-warning-line", size: 16, color: "var(--chatllm-error, #ef4444)" }),
+          "\uC774\uBBF8\uC9C0\uB97C \uBD88\uB7EC\uC62C \uC218 \uC5C6\uC2B5\uB2C8\uB2E4"
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs9(Fragment5, { children: [
+    /* @__PURE__ */ jsxs9(
+      "div",
+      {
+        style: {
+          position: "relative",
+          borderRadius: "8px",
+          overflow: "hidden",
+          border: "1px solid var(--chatllm-border, #e5e7eb)",
+          cursor: "pointer",
+          maxWidth: part.width ? `${Math.min(part.width, 480)}px` : "480px"
+        },
+        onClick: () => setIsExpanded(true),
+        children: [
+          !isLoaded && /* @__PURE__ */ jsx10(
+            "div",
+            {
+              style: {
+                padding: "40px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                backgroundColor: "var(--chatllm-bg-secondary, #f1f5f9)"
+              },
+              children: /* @__PURE__ */ jsx10(IconSvg, { name: "loader-4-line", size: 24, color: "var(--chatllm-text-muted, #94a3b8)" })
+            }
+          ),
+          /* @__PURE__ */ jsx10(
+            "img",
+            {
+              src: part.url,
+              alt: part.alt || "",
+              onLoad: () => setIsLoaded(true),
+              onError: () => setHasError(true),
+              style: {
+                display: isLoaded ? "block" : "none",
+                width: "100%",
+                height: "auto",
+                maxHeight: "400px",
+                objectFit: "contain"
+              }
+            }
+          ),
+          part.alt && isLoaded && /* @__PURE__ */ jsx10(
+            "div",
+            {
+              style: {
+                padding: "6px 10px",
+                fontSize: "12px",
+                color: "var(--chatllm-text-muted, #64748b)",
+                backgroundColor: "var(--chatllm-bg-secondary, #f9fafb)",
+                borderTop: "1px solid var(--chatllm-border, #e5e7eb)"
+              },
+              children: part.alt
+            }
+          )
+        ]
+      }
+    ),
+    isExpanded && /* @__PURE__ */ jsx10(
+      "div",
+      {
+        onClick: () => setIsExpanded(false),
+        style: {
+          position: "fixed",
+          inset: 0,
+          backgroundColor: "rgba(0, 0, 0, 0.8)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          zIndex: 9999,
+          cursor: "zoom-out"
+        },
+        children: /* @__PURE__ */ jsx10(
+          "img",
+          {
+            src: part.url,
+            alt: part.alt || "",
+            style: {
+              maxWidth: "90vw",
+              maxHeight: "90vh",
+              objectFit: "contain",
+              borderRadius: "4px"
+            }
+          }
+        )
+      }
+    )
+  ] });
+};
+
+// src/react/components/FileContentCard.tsx
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+var formatFileSize = (bytes) => {
+  if (!bytes) return "";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+};
+var getFileIcon = (mimeType) => {
+  if (!mimeType) return "file-text-line";
+  if (mimeType.startsWith("image/")) return "image-line";
+  if (mimeType.startsWith("video/")) return "video-line";
+  if (mimeType.startsWith("audio/")) return "mic-line";
+  if (mimeType.includes("pdf")) return "file-text-line";
+  if (mimeType.includes("zip") || mimeType.includes("compressed")) return "folder-line";
+  return "file-text-line";
+};
+var FileContentCard = ({ part }) => {
+  return /* @__PURE__ */ jsxs10(
+    "a",
+    {
+      href: part.url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      download: part.name,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "12px",
+        padding: "12px 16px",
+        backgroundColor: "var(--chatllm-bg-secondary, #f9fafb)",
+        borderRadius: "8px",
+        border: "1px solid var(--chatllm-border, #e5e7eb)",
+        textDecoration: "none",
+        color: "inherit",
+        transition: "background-color 0.15s ease",
+        maxWidth: "320px"
+      },
+      children: [
+        /* @__PURE__ */ jsx11(
+          "div",
+          {
+            style: {
+              width: "36px",
+              height: "36px",
+              borderRadius: "8px",
+              backgroundColor: "var(--chatllm-primary-light, rgba(74, 144, 226, 0.1))",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: 0
+            },
+            children: /* @__PURE__ */ jsx11(IconSvg, { name: getFileIcon(part.mimeType), size: 18, color: "var(--chatllm-primary, #4A90E2)" })
+          }
+        ),
+        /* @__PURE__ */ jsxs10("div", { style: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx11(
+            "div",
+            {
+              style: {
+                fontSize: "13px",
+                fontWeight: 500,
+                color: "var(--chatllm-text, #1e293b)",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              },
+              children: part.name
+            }
+          ),
+          (part.size || part.mimeType) && /* @__PURE__ */ jsx11(
+            "div",
+            {
+              style: {
+                fontSize: "11px",
+                color: "var(--chatllm-text-muted, #94a3b8)",
+                marginTop: "2px"
+              },
+              children: [formatFileSize(part.size), part.mimeType].filter(Boolean).join(" \xB7 ")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx11(IconSvg, { name: "download-line", size: 16, color: "var(--chatllm-text-muted, #94a3b8)" })
+      ]
+    }
+  );
+};
+
+// src/react/components/ContentPartRenderer.tsx
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+var ContentPartRenderer = ({
+  parts,
+  onChoiceClick,
+  showThinking,
+  thinkingDefaultOpen
+}) => {
+  return /* @__PURE__ */ jsx12("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: parts.map((part, idx) => {
+    switch (part.type) {
+      case "text":
+        return /* @__PURE__ */ jsx12(
+          MarkdownRenderer,
+          {
+            content: part.content,
+            onChoiceClick,
+            showThinking,
+            thinkingDefaultOpen
+          },
+          idx
+        );
+      case "image":
+        return /* @__PURE__ */ jsx12(ImageContentCard, { part }, idx);
+      case "file":
+        return /* @__PURE__ */ jsx12(FileContentCard, { part }, idx);
+      case "search_result":
+        return /* @__PURE__ */ jsx12("div", { style: { display: "flex", flexWrap: "wrap", gap: "6px" }, children: part.results.map((source, si) => /* @__PURE__ */ jsx12(
+          LinkChip,
+          {
+            text: source.title,
+            url: source.url,
+            index: si + 1,
+            showFavicon: true
+          },
+          si
+        )) }, idx);
+      case "tool_loading":
+        return /* @__PURE__ */ jsxs11(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "8px",
+              padding: "8px 12px",
+              backgroundColor: "var(--chatllm-bg-secondary, #f9fafb)",
+              borderRadius: "8px",
+              fontSize: "13px",
+              color: "var(--chatllm-text-muted, #64748b)"
+            },
+            children: [
+              /* @__PURE__ */ jsx12(IconSvg, { name: "loader-4-line", size: 16, color: "var(--chatllm-primary, #4A90E2)" }),
+              part.label || `${part.toolName} \uC2E4\uD589 \uC911...`
+            ]
+          },
+          idx
+        );
+      case "tool_result":
+        if (part.result.type === "image") {
+          return /* @__PURE__ */ jsx12(
+            ImageContentCard,
+            {
+              part: { type: "image", url: part.result.content, alt: part.result.metadata?.alt }
+            },
+            idx
+          );
+        }
+        if (part.result.type === "file") {
+          return /* @__PURE__ */ jsx12(
+            FileContentCard,
+            {
+              part: {
+                type: "file",
+                name: part.result.metadata?.fileName || "file",
+                url: part.result.content,
+                mimeType: part.result.metadata?.mimeType
+              }
+            },
+            idx
+          );
+        }
+        if (part.result.type === "error") {
+          return /* @__PURE__ */ jsxs11(
+            "div",
+            {
+              style: {
+                padding: "10px 14px",
+                backgroundColor: "var(--chatllm-error-bg, #fef2f2)",
+                borderRadius: "8px",
+                border: "1px solid var(--chatllm-error-border, #fecaca)",
+                fontSize: "13px",
+                color: "var(--chatllm-error, #ef4444)",
+                display: "flex",
+                alignItems: "center",
+                gap: "8px"
+              },
+              children: [
+                /* @__PURE__ */ jsx12(IconSvg, { name: "error-warning-line", size: 16, color: "var(--chatllm-error, #ef4444)" }),
+                part.result.content
+              ]
+            },
+            idx
+          );
+        }
+        return /* @__PURE__ */ jsx12(
+          MarkdownRenderer,
+          {
+            content: part.result.content,
+            onChoiceClick,
+            showThinking,
+            thinkingDefaultOpen
+          },
+          idx
+        );
+      case "error":
+        return /* @__PURE__ */ jsxs11(
+          "div",
+          {
+            style: {
+              padding: "10px 14px",
+              backgroundColor: "var(--chatllm-error-bg, #fef2f2)",
+              borderRadius: "8px",
+              border: "1px solid var(--chatllm-error-border, #fecaca)",
+              fontSize: "13px",
+              color: "var(--chatllm-error, #ef4444)",
+              display: "flex",
+              alignItems: "center",
+              gap: "8px"
+            },
+            children: [
+              /* @__PURE__ */ jsx12(IconSvg, { name: "error-warning-line", size: 16, color: "var(--chatllm-error, #ef4444)" }),
+              part.message
+            ]
+          },
+          idx
+        );
+      default:
+        return null;
+    }
+  }) });
+};
+
 // src/react/components/MessageBubble.tsx
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 var MessageBubble = ({
   message,
   isLoading,
@@ -6117,8 +6625,8 @@ var MessageBubble = ({
   isLoadingAlternative = false,
   onPollSubmit
 }) => {
-  const [showActions, setShowActions] = useState10(false);
-  const [showModelMenu, setShowModelMenu] = useState10(false);
+  const [showActions, setShowActions] = useState11(false);
+  const [showModelMenu, setShowModelMenu] = useState11(false);
   const isUser = message.role === "user";
   const isAssistant = message.role === "assistant";
   const relevantAlternatives = isUser ? alternatives : message.alternatives;
@@ -6136,7 +6644,7 @@ var MessageBubble = ({
     }
   };
   if (isUser) {
-    return /* @__PURE__ */ jsxs9(
+    return /* @__PURE__ */ jsxs12(
       "div",
       {
         className: "chatllm-message chatllm-message--user",
@@ -6150,7 +6658,7 @@ var MessageBubble = ({
         onMouseLeave: () => setShowActions(false),
         onMouseUp: handleMouseUp,
         children: [
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx13(
             "div",
             {
               style: {
@@ -6160,7 +6668,7 @@ var MessageBubble = ({
                 borderRadius: "16px",
                 borderTopRightRadius: "4px"
               },
-              children: /* @__PURE__ */ jsx10(
+              children: /* @__PURE__ */ jsx13(
                 "div",
                 {
                   style: {
@@ -6174,7 +6682,7 @@ var MessageBubble = ({
               )
             }
           ),
-          !isLoading && /* @__PURE__ */ jsxs9(
+          !isLoading && /* @__PURE__ */ jsxs12(
             "div",
             {
               style: {
@@ -6186,7 +6694,7 @@ var MessageBubble = ({
                 transition: "opacity 0.15s ease"
               },
               children: [
-                /* @__PURE__ */ jsx10("button", { onClick: onCopy, style: actionButtonSmallStyle, title: "\uBCF5\uC0AC", children: /* @__PURE__ */ jsx10(
+                /* @__PURE__ */ jsx13("button", { onClick: onCopy, style: actionButtonSmallStyle, title: "\uBCF5\uC0AC", children: /* @__PURE__ */ jsx13(
                   IconSvg,
                   {
                     name: isCopied ? "check-line" : "file-copy-line",
@@ -6194,7 +6702,7 @@ var MessageBubble = ({
                     color: isCopied ? "var(--chatllm-success)" : "var(--chatllm-text-muted)"
                   }
                 ) }),
-                /* @__PURE__ */ jsx10("button", { onClick: onEdit, style: actionButtonSmallStyle, title: "\uC218\uC815", children: /* @__PURE__ */ jsx10(IconSvg, { name: "edit-line", size: 12, color: "var(--chatllm-text-muted)" }) })
+                /* @__PURE__ */ jsx13("button", { onClick: onEdit, style: actionButtonSmallStyle, title: "\uC218\uC815", children: /* @__PURE__ */ jsx13(IconSvg, { name: "edit-line", size: 12, color: "var(--chatllm-text-muted)" }) })
               ]
             }
           )
@@ -6202,7 +6710,7 @@ var MessageBubble = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
       className: "chatllm-message chatllm-message--assistant",
@@ -6216,7 +6724,7 @@ var MessageBubble = ({
       onMouseLeave: () => setShowActions(false),
       onMouseUp: handleMouseUp,
       children: [
-        /* @__PURE__ */ jsxs9(
+        /* @__PURE__ */ jsxs12(
           "div",
           {
             className: "chatllm-sheet",
@@ -6227,7 +6735,7 @@ var MessageBubble = ({
               gap: "12px"
             },
             children: [
-              /* @__PURE__ */ jsx10("div", { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx10(
+              /* @__PURE__ */ jsx13("div", { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx13(
                 "div",
                 {
                   style: {
@@ -6240,11 +6748,11 @@ var MessageBubble = ({
                     justifyContent: "center",
                     color: "var(--chatllm-primary)"
                   },
-                  children: /* @__PURE__ */ jsx10(IconSvg, { name: "magic-line", size: 20 })
+                  children: /* @__PURE__ */ jsx13(IconSvg, { name: "magic-line", size: 20 })
                 }
               ) }),
-              /* @__PURE__ */ jsxs9("div", { style: { flex: 1, minWidth: 0 }, children: [
-                displayModel && /* @__PURE__ */ jsx10(
+              /* @__PURE__ */ jsxs12("div", { style: { flex: 1, minWidth: 0 }, children: [
+                displayModel && /* @__PURE__ */ jsx13(
                   "div",
                   {
                     style: {
@@ -6253,7 +6761,7 @@ var MessageBubble = ({
                       gap: "8px",
                       marginBottom: "8px"
                     },
-                    children: /* @__PURE__ */ jsx10(
+                    children: /* @__PURE__ */ jsx13(
                       "span",
                       {
                         style: {
@@ -6268,9 +6776,9 @@ var MessageBubble = ({
                     )
                   }
                 ),
-                message.isDeepResearch && message.researchProgress && message.researchProgress.phase !== "done" && /* @__PURE__ */ jsx10(DeepResearchProgressUI, { progress: message.researchProgress }),
-                message.skillExecution && message.skillExecution.status !== "done" && (message.skillExecution.progress?.subAgents ? /* @__PURE__ */ jsx10(DeepResearchProgressUI, { progress: message.skillExecution.progress }) : /* @__PURE__ */ jsx10(SkillProgressUI, { execution: message.skillExecution })),
-                message.isDeepResearch && displayContent && /* @__PURE__ */ jsxs9(
+                message.isDeepResearch && message.researchProgress && message.researchProgress.phase !== "done" && /* @__PURE__ */ jsx13(DeepResearchProgressUI, { progress: message.researchProgress }),
+                message.skillExecution && message.skillExecution.status !== "done" && (message.skillExecution.progress?.subAgents ? /* @__PURE__ */ jsx13(DeepResearchProgressUI, { progress: message.skillExecution.progress }) : /* @__PURE__ */ jsx13(SkillProgressUI, { execution: message.skillExecution })),
+                message.isDeepResearch && displayContent && /* @__PURE__ */ jsxs12(
                   "div",
                   {
                     className: "chatllm-deep-research__header",
@@ -6283,8 +6791,8 @@ var MessageBubble = ({
                       borderBottom: "1px solid var(--chatllm-border-light)"
                     },
                     children: [
-                      /* @__PURE__ */ jsx10(IconSvg, { name: "search-eye-line", size: 18, color: "var(--chatllm-primary)" }),
-                      /* @__PURE__ */ jsx10(
+                      /* @__PURE__ */ jsx13(IconSvg, { name: "search-eye-line", size: 18, color: "var(--chatllm-primary)" }),
+                      /* @__PURE__ */ jsx13(
                         "span",
                         {
                           style: {
@@ -6295,7 +6803,7 @@ var MessageBubble = ({
                           children: "\uC2EC\uCE35\uC5F0\uAD6C"
                         }
                       ),
-                      displaySources && displaySources.length > 0 && /* @__PURE__ */ jsxs9(
+                      displaySources && displaySources.length > 0 && /* @__PURE__ */ jsxs12(
                         "span",
                         {
                           className: "chatllm-deep-research__source-count",
@@ -6317,14 +6825,14 @@ var MessageBubble = ({
                     ]
                   }
                 ),
-                isLoading && !displayContent && !message.isDeepResearch && /* @__PURE__ */ jsxs9("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
-                  /* @__PURE__ */ jsxs9("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [
-                    /* @__PURE__ */ jsxs9("div", { style: { display: "flex", gap: "4px", alignItems: "center" }, children: [
-                      /* @__PURE__ */ jsx10("span", { className: "chatllm-dot-bounce", style: dotStyle }),
-                      /* @__PURE__ */ jsx10("span", { className: "chatllm-dot-bounce", style: dotStyle }),
-                      /* @__PURE__ */ jsx10("span", { className: "chatllm-dot-bounce", style: dotStyle })
+                isLoading && !displayContent && !message.isDeepResearch && /* @__PURE__ */ jsxs12("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+                  /* @__PURE__ */ jsxs12("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [
+                    /* @__PURE__ */ jsxs12("div", { style: { display: "flex", gap: "4px", alignItems: "center" }, children: [
+                      /* @__PURE__ */ jsx13("span", { className: "chatllm-dot-bounce", style: dotStyle }),
+                      /* @__PURE__ */ jsx13("span", { className: "chatllm-dot-bounce", style: dotStyle }),
+                      /* @__PURE__ */ jsx13("span", { className: "chatllm-dot-bounce", style: dotStyle })
                     ] }),
-                    /* @__PURE__ */ jsx10(
+                    /* @__PURE__ */ jsx13(
                       "span",
                       {
                         style: {
@@ -6337,16 +6845,24 @@ var MessageBubble = ({
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsxs9("div", { className: "chatllm-skeleton-pulse", style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
-                    /* @__PURE__ */ jsx10("div", { style: { height: "32px", width: "75%", backgroundColor: "var(--chatllm-bg-tertiary)", borderRadius: "8px" } }),
-                    /* @__PURE__ */ jsxs9("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
-                      /* @__PURE__ */ jsx10("div", { style: { height: "16px", width: "100%", backgroundColor: "var(--chatllm-bg-secondary)", borderRadius: "4px" } }),
-                      /* @__PURE__ */ jsx10("div", { style: { height: "16px", width: "85%", backgroundColor: "var(--chatllm-bg-secondary)", borderRadius: "4px" } }),
-                      /* @__PURE__ */ jsx10("div", { style: { height: "16px", width: "65%", backgroundColor: "var(--chatllm-bg-secondary)", borderRadius: "4px" } })
+                  /* @__PURE__ */ jsxs12("div", { className: "chatllm-skeleton-pulse", style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
+                    /* @__PURE__ */ jsx13("div", { style: { height: "32px", width: "75%", backgroundColor: "var(--chatllm-bg-tertiary)", borderRadius: "8px" } }),
+                    /* @__PURE__ */ jsxs12("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
+                      /* @__PURE__ */ jsx13("div", { style: { height: "16px", width: "100%", backgroundColor: "var(--chatllm-bg-secondary)", borderRadius: "4px" } }),
+                      /* @__PURE__ */ jsx13("div", { style: { height: "16px", width: "85%", backgroundColor: "var(--chatllm-bg-secondary)", borderRadius: "4px" } }),
+                      /* @__PURE__ */ jsx13("div", { style: { height: "16px", width: "65%", backgroundColor: "var(--chatllm-bg-secondary)", borderRadius: "4px" } })
                     ] })
                   ] })
                 ] }),
-                displayContent && /* @__PURE__ */ jsx10("div", { style: { wordBreak: "break-word" }, children: /* @__PURE__ */ jsx10(
+                message.contentParts?.length ? /* @__PURE__ */ jsx13("div", { style: { wordBreak: "break-word" }, children: /* @__PURE__ */ jsx13(
+                  ContentPartRenderer,
+                  {
+                    parts: message.contentParts,
+                    onChoiceClick,
+                    showThinking,
+                    thinkingDefaultOpen
+                  }
+                ) }) : displayContent ? /* @__PURE__ */ jsx13("div", { style: { wordBreak: "break-word" }, children: /* @__PURE__ */ jsx13(
                   MarkdownRenderer,
                   {
                     content: displayContent,
@@ -6354,8 +6870,8 @@ var MessageBubble = ({
                     showThinking,
                     thinkingDefaultOpen
                   }
-                ) }),
-                message.pollBlock && message.pollBlock.questions.length > 0 && /* @__PURE__ */ jsx10(
+                ) }) : null,
+                message.pollBlock && message.pollBlock.questions.length > 0 && /* @__PURE__ */ jsx13(
                   PollCard,
                   {
                     questions: message.pollBlock.questions,
@@ -6367,7 +6883,7 @@ var MessageBubble = ({
                     }
                   }
                 ),
-                !isLoading && !displayContent && !message.pollBlock && /* @__PURE__ */ jsx10(
+                !isLoading && !displayContent && !message.pollBlock && /* @__PURE__ */ jsx13(
                   "div",
                   {
                     style: {
@@ -6380,7 +6896,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__ */ jsxs9(
+                displaySources && displaySources.length > 0 && /* @__PURE__ */ jsxs12(
                   "div",
                   {
                     style: {
@@ -6392,7 +6908,7 @@ var MessageBubble = ({
                       borderTop: "1px solid var(--chatllm-border-light)"
                     },
                     children: [
-                      /* @__PURE__ */ jsx10(
+                      /* @__PURE__ */ jsx13(
                         "span",
                         {
                           style: {
@@ -6404,7 +6920,7 @@ var MessageBubble = ({
                           children: "\uCD9C\uCC98:"
                         }
                       ),
-                      displaySources.map((source, index) => /* @__PURE__ */ jsx10(
+                      displaySources.map((source, index) => /* @__PURE__ */ jsx13(
                         LinkChip,
                         {
                           text: source.title,
@@ -6417,7 +6933,7 @@ var MessageBubble = ({
                     ]
                   }
                 ),
-                relevantAlternatives && relevantAlternatives.length > 0 && /* @__PURE__ */ jsxs9(
+                relevantAlternatives && relevantAlternatives.length > 0 && /* @__PURE__ */ jsxs12(
                   "div",
                   {
                     style: {
@@ -6431,8 +6947,8 @@ var MessageBubble = ({
                       fontSize: "12px"
                     },
                     children: [
-                      /* @__PURE__ */ jsx10("span", { style: { color: "var(--chatllm-text-muted)", marginRight: "4px" }, children: displayModel || "\uBAA8\uB378" }),
-                      /* @__PURE__ */ jsx10(
+                      /* @__PURE__ */ jsx13("span", { style: { color: "var(--chatllm-text-muted)", marginRight: "4px" }, children: displayModel || "\uBAA8\uB378" }),
+                      /* @__PURE__ */ jsx13(
                         "button",
                         {
                           onClick: () => onAlternativeChange?.(Math.max(0, relevantActiveIndex - 1)),
@@ -6442,15 +6958,15 @@ var MessageBubble = ({
                             opacity: relevantActiveIndex === 0 ? 0.5 : 1,
                             cursor: relevantActiveIndex === 0 ? "not-allowed" : "pointer"
                           },
-                          children: /* @__PURE__ */ jsx10(IconSvg, { name: "arrow-left-line", size: 12 })
+                          children: /* @__PURE__ */ jsx13(IconSvg, { name: "arrow-left-line", size: 12 })
                         }
                       ),
-                      /* @__PURE__ */ jsxs9("span", { style: { color: "var(--chatllm-text-secondary)" }, children: [
+                      /* @__PURE__ */ jsxs12("span", { style: { color: "var(--chatllm-text-secondary)" }, children: [
                         relevantActiveIndex + 1,
                         " / ",
                         relevantAlternatives.length + 1
                       ] }),
-                      /* @__PURE__ */ jsx10(
+                      /* @__PURE__ */ jsx13(
                         "button",
                         {
                           onClick: () => onAlternativeChange?.(Math.min(relevantAlternatives.length, relevantActiveIndex + 1)),
@@ -6460,13 +6976,13 @@ var MessageBubble = ({
                             opacity: relevantActiveIndex === relevantAlternatives.length ? 0.5 : 1,
                             cursor: relevantActiveIndex === relevantAlternatives.length ? "not-allowed" : "pointer"
                           },
-                          children: /* @__PURE__ */ jsx10(IconSvg, { name: "arrow-right-line", size: 12 })
+                          children: /* @__PURE__ */ jsx13(IconSvg, { name: "arrow-right-line", size: 12 })
                         }
                       )
                     ]
                   }
                 ),
-                isLoadingAlternative && /* @__PURE__ */ jsxs9(
+                isLoadingAlternative && /* @__PURE__ */ jsxs12(
                   "div",
                   {
                     style: {
@@ -6481,12 +6997,12 @@ var MessageBubble = ({
                       color: "var(--chatllm-primary, #2563eb)"
                     },
                     children: [
-                      /* @__PURE__ */ jsxs9("div", { style: { display: "flex", gap: "4px", alignItems: "center" }, children: [
-                        /* @__PURE__ */ jsx10("span", { className: "chatllm-dot-bounce", style: dotStyle }),
-                        /* @__PURE__ */ jsx10("span", { className: "chatllm-dot-bounce", style: dotStyle }),
-                        /* @__PURE__ */ jsx10("span", { className: "chatllm-dot-bounce", style: dotStyle })
+                      /* @__PURE__ */ jsxs12("div", { style: { display: "flex", gap: "4px", alignItems: "center" }, children: [
+                        /* @__PURE__ */ jsx13("span", { className: "chatllm-dot-bounce", style: dotStyle }),
+                        /* @__PURE__ */ jsx13("span", { className: "chatllm-dot-bounce", style: dotStyle }),
+                        /* @__PURE__ */ jsx13("span", { className: "chatllm-dot-bounce", style: dotStyle })
                       ] }),
-                      /* @__PURE__ */ jsx10("span", { style: { fontWeight: 500 }, children: "\uB2E4\uB978 \uBAA8\uB378 \uC751\uB2F5 \uC0DD\uC131 \uC911..." })
+                      /* @__PURE__ */ jsx13("span", { style: { fontWeight: 500 }, children: "\uB2E4\uB978 \uBAA8\uB378 \uC751\uB2F5 \uC0DD\uC131 \uC911..." })
                     ]
                   }
                 )
@@ -6494,7 +7010,7 @@ var MessageBubble = ({
             ]
           }
         ),
-        !isLoading && /* @__PURE__ */ jsxs9(
+        !isLoading && /* @__PURE__ */ jsxs12(
           "div",
           {
             style: {
@@ -6507,7 +7023,7 @@ var MessageBubble = ({
               transition: "opacity 0.15s ease"
             },
             children: [
-              /* @__PURE__ */ jsx10("button", { onClick: onCopy, style: actionButtonSmallStyle, title: "\uBCF5\uC0AC", children: /* @__PURE__ */ jsx10(
+              /* @__PURE__ */ jsx13("button", { onClick: onCopy, style: actionButtonSmallStyle, title: "\uBCF5\uC0AC", children: /* @__PURE__ */ jsx13(
                 IconSvg,
                 {
                   name: isCopied ? "check-line" : "file-copy-line",
@@ -6515,18 +7031,18 @@ var MessageBubble = ({
                   color: isCopied ? "var(--chatllm-success)" : "var(--chatllm-text-muted)"
                 }
               ) }),
-              onRegenerate && /* @__PURE__ */ jsx10("button", { onClick: onRegenerate, style: actionButtonSmallStyle, title: "\uB2E4\uC2DC \uC0DD\uC131", children: /* @__PURE__ */ jsx10(IconSvg, { name: "refresh-line", size: 12, color: "var(--chatllm-text-muted)" }) }),
-              onAskOtherModel && otherModels.length > 0 && /* @__PURE__ */ jsxs9("div", { style: { position: "relative" }, children: [
-                /* @__PURE__ */ jsx10(
+              onRegenerate && /* @__PURE__ */ jsx13("button", { onClick: onRegenerate, style: actionButtonSmallStyle, title: "\uB2E4\uC2DC \uC0DD\uC131", children: /* @__PURE__ */ jsx13(IconSvg, { name: "refresh-line", size: 12, color: "var(--chatllm-text-muted)" }) }),
+              onAskOtherModel && otherModels.length > 0 && /* @__PURE__ */ jsxs12("div", { style: { position: "relative" }, children: [
+                /* @__PURE__ */ jsx13(
                   "button",
                   {
                     onClick: () => setShowModelMenu(!showModelMenu),
                     style: actionButtonSmallStyle,
                     title: "\uB2E4\uB978 \uBAA8\uB378\uC5D0\uAC8C \uC9C8\uBB38",
-                    children: /* @__PURE__ */ jsx10(IconSvg, { name: "robot-line", size: 12, color: "var(--chatllm-text-muted)" })
+                    children: /* @__PURE__ */ jsx13(IconSvg, { name: "robot-line", size: 12, color: "var(--chatllm-text-muted)" })
                   }
                 ),
-                showModelMenu && /* @__PURE__ */ jsx10(
+                showModelMenu && /* @__PURE__ */ jsx13(
                   ModelMenu,
                   {
                     models: otherModels,
@@ -6545,7 +7061,7 @@ var MessageBubble = ({
     }
   );
 };
-var ModelMenu = ({ models, onSelect, onClose }) => /* @__PURE__ */ jsxs9(
+var ModelMenu = ({ models, onSelect, onClose }) => /* @__PURE__ */ jsxs12(
   "div",
   {
     style: {
@@ -6563,7 +7079,7 @@ var ModelMenu = ({ models, onSelect, onClose }) => /* @__PURE__ */ jsxs9(
     },
     onMouseLeave: onClose,
     children: [
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx13(
         "div",
         {
           style: {
@@ -6578,7 +7094,7 @@ var ModelMenu = ({ models, onSelect, onClose }) => /* @__PURE__ */ jsxs9(
           children: "\uB2E4\uB978 \uBAA8\uB378\uC5D0\uAC8C \uC9C8\uBB38"
         }
       ),
-      models.map((model) => /* @__PURE__ */ jsxs9(
+      models.map((model) => /* @__PURE__ */ jsxs12(
         "button",
         {
           onClick: () => onSelect(model.id),
@@ -6603,9 +7119,9 @@ var ModelMenu = ({ models, onSelect, onClose }) => /* @__PURE__ */ jsxs9(
             e.currentTarget.style.backgroundColor = "transparent";
           },
           children: [
-            /* @__PURE__ */ jsx10(IconSvg, { name: "robot-line", size: 16, color: "var(--chatllm-primary)" }),
-            /* @__PURE__ */ jsx10("span", { style: { flex: 1, fontWeight: 500 }, children: model.name }),
-            model.provider && /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx13(IconSvg, { name: "robot-line", size: 16, color: "var(--chatllm-primary)" }),
+            /* @__PURE__ */ jsx13("span", { style: { flex: 1, fontWeight: 500 }, children: model.name }),
+            model.provider && /* @__PURE__ */ jsx13(
               "span",
               {
                 style: {
@@ -6654,7 +7170,7 @@ var navButtonStyle = {
 };
 
 // src/react/components/MessageList.tsx
-import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 var MessageList = ({
   messages,
   isLoading,
@@ -6676,8 +7192,8 @@ var MessageList = ({
 }) => {
   const messagesEndRef = useRef6(null);
   const containerRef = useRef6(null);
-  const [selectedText, setSelectedText] = useState11("");
-  const [selectionPosition, setSelectionPosition] = useState11(null);
+  const [selectedText, setSelectedText] = useState12("");
+  const [selectionPosition, setSelectionPosition] = useState12(null);
   useEffect6(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
@@ -6713,7 +7229,7 @@ var MessageList = ({
       window.getSelection()?.removeAllRanges();
     }
   };
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs13(
     "div",
     {
       ref: containerRef,
@@ -6725,7 +7241,7 @@ var MessageList = ({
       },
       onMouseUp: handleMouseUp,
       children: [
-        /* @__PURE__ */ jsxs10(
+        /* @__PURE__ */ jsxs13(
           "div",
           {
             style: {
@@ -6740,7 +7256,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;
-                return /* @__PURE__ */ jsx11(
+                return /* @__PURE__ */ jsx14(
                   MessageBubble,
                   {
                     message,
@@ -6771,11 +7287,11 @@ var MessageList = ({
                   message.id
                 );
               }),
-              /* @__PURE__ */ jsx11("div", { ref: messagesEndRef })
+              /* @__PURE__ */ jsx14("div", { ref: messagesEndRef })
             ]
           }
         ),
-        selectionPosition && /* @__PURE__ */ jsxs10(
+        selectionPosition && /* @__PURE__ */ jsxs13(
           "div",
           {
             style: {
@@ -6787,7 +7303,7 @@ var MessageList = ({
               pointerEvents: "auto"
             },
             children: [
-              /* @__PURE__ */ jsxs10(
+              /* @__PURE__ */ jsxs13(
                 "button",
                 {
                   onClick: handleQuote,
@@ -6807,12 +7323,12 @@ var MessageList = ({
                     whiteSpace: "nowrap"
                   },
                   children: [
-                    /* @__PURE__ */ jsx11(IconSvg, { name: "double-quotes-l", size: 16, color: "#ffffff" }),
+                    /* @__PURE__ */ jsx14(IconSvg, { name: "double-quotes-l", size: 16, color: "#ffffff" }),
                     "\uC778\uC6A9\uD558\uAE30"
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx11(
+              /* @__PURE__ */ jsx14(
                 "div",
                 {
                   style: {
@@ -6837,7 +7353,7 @@ var MessageList = ({
 };
 
 // src/react/components/EmptyState.tsx
-import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 var EmptyState = ({
   greeting,
   templates = [],
@@ -6855,7 +7371,7 @@ var EmptyState = ({
     return iconMap[icon] || "sparkling-line";
   };
   const hasContent = actions.length > 0 || templates.length > 0;
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs14(
     "div",
     {
       className: "chatllm-empty-state",
@@ -6870,7 +7386,7 @@ var EmptyState = ({
         textAlign: "center"
       },
       children: [
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx15(
           "div",
           {
             className: "chatllm-sheet",
@@ -6884,10 +7400,10 @@ var EmptyState = ({
               marginBottom: "32px",
               color: "var(--chatllm-primary)"
             },
-            children: /* @__PURE__ */ jsx12(IconSvg, { name: "chat-1-line", size: 40 })
+            children: /* @__PURE__ */ jsx15(IconSvg, { name: "chat-1-line", size: 40 })
           }
         ),
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx15(
           "h1",
           {
             style: {
@@ -6900,7 +7416,7 @@ var EmptyState = ({
             children: "How can I help you today?"
           }
         ),
-        (actions.length > 0 || templates.length > 0) && /* @__PURE__ */ jsxs11(
+        (actions.length > 0 || templates.length > 0) && /* @__PURE__ */ jsxs14(
           "div",
           {
             style: {
@@ -6912,7 +7428,7 @@ var EmptyState = ({
               marginBottom: "48px"
             },
             children: [
-              actions.map((action) => /* @__PURE__ */ jsxs11(
+              actions.map((action) => /* @__PURE__ */ jsxs14(
                 "button",
                 {
                   onClick: () => onActionSelect?.(action),
@@ -6926,7 +7442,7 @@ var EmptyState = ({
                     fontWeight: 500
                   },
                   children: [
-                    /* @__PURE__ */ jsx12(
+                    /* @__PURE__ */ jsx15(
                       IconSvg,
                       {
                         name: getActionIcon(action.icon),
@@ -6939,7 +7455,7 @@ var EmptyState = ({
                 },
                 action.id
               )),
-              templates.slice(0, 4).map((template) => /* @__PURE__ */ jsxs11(
+              templates.slice(0, 4).map((template) => /* @__PURE__ */ jsxs14(
                 "button",
                 {
                   onClick: () => onTemplateClick(template),
@@ -6953,7 +7469,7 @@ var EmptyState = ({
                     fontWeight: 500
                   },
                   children: [
-                    /* @__PURE__ */ jsx12(
+                    /* @__PURE__ */ jsx15(
                       IconSvg,
                       {
                         name: "sparkling-line",
@@ -6975,8 +7491,8 @@ var EmptyState = ({
 };
 
 // src/react/components/SettingsModal.tsx
-import { useState as useState12 } from "react";
-import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+import { useState as useState13 } from "react";
+import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
 var DEFAULT_PERSONALIZATION2 = {
   responseStyle: {
     warmth: "medium",
@@ -7002,10 +7518,11 @@ var SettingsModal = ({
   memoryItems = [],
   contextSummary,
   onDeleteMemory,
-  onClearMemory
+  onClearMemory,
+  onSave
 }) => {
-  const [activeTab, setActiveTab] = useState12("general");
-  const [localApiKey, setLocalApiKey] = useState12(apiKey);
+  const [activeTab, setActiveTab] = useState13("general");
+  const [localApiKey, setLocalApiKey] = useState13(apiKey);
   if (!isOpen) return null;
   const updateResponseStyle = (key, value) => {
     onPersonalizationChange({
@@ -7029,7 +7546,7 @@ var SettingsModal = ({
     setLocalApiKey(value);
     onApiKeyChange?.(value);
   };
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx16(
     "div",
     {
       className: "chatllm-settings-overlay",
@@ -7043,7 +7560,7 @@ var SettingsModal = ({
         zIndex: 1e3
       },
       onClick: onClose,
-      children: /* @__PURE__ */ jsxs12(
+      children: /* @__PURE__ */ jsxs15(
         "div",
         {
           className: "chatllm-settings-modal",
@@ -7061,7 +7578,7 @@ var SettingsModal = ({
           },
           onClick: (e) => e.stopPropagation(),
           children: [
-            /* @__PURE__ */ jsxs12(
+            /* @__PURE__ */ jsxs15(
               "div",
               {
                 style: {
@@ -7072,7 +7589,7 @@ var SettingsModal = ({
                   flexDirection: "column"
                 },
                 children: [
-                  /* @__PURE__ */ jsx13("div", { style: { padding: "16px", borderBottom: "1px solid var(--chatllm-border, #e5e7eb)" }, children: /* @__PURE__ */ jsx13(
+                  /* @__PURE__ */ jsx16("div", { style: { padding: "16px", borderBottom: "1px solid var(--chatllm-border, #e5e7eb)" }, children: /* @__PURE__ */ jsx16(
                     "button",
                     {
                       onClick: onClose,
@@ -7086,11 +7603,11 @@ var SettingsModal = ({
                         alignItems: "center",
                         justifyContent: "center"
                       },
-                      children: /* @__PURE__ */ jsx13(IconSvg, { name: "close-line", size: 20, color: "var(--chatllm-text-muted, #6b7280)" })
+                      children: /* @__PURE__ */ jsx16(IconSvg, { name: "close-line", size: 20, color: "var(--chatllm-text-muted, #6b7280)" })
                     }
                   ) }),
-                  /* @__PURE__ */ jsxs12("nav", { style: { flex: 1, padding: "8px" }, children: [
-                    /* @__PURE__ */ jsx13(
+                  /* @__PURE__ */ jsxs15("nav", { style: { flex: 1, padding: "8px" }, children: [
+                    /* @__PURE__ */ jsx16(
                       TabButton,
                       {
                         active: activeTab === "general",
@@ -7099,7 +7616,7 @@ var SettingsModal = ({
                         label: "\uC77C\uBC18"
                       }
                     ),
-                    /* @__PURE__ */ jsx13(
+                    /* @__PURE__ */ jsx16(
                       TabButton,
                       {
                         active: activeTab === "personalization",
@@ -7108,7 +7625,7 @@ var SettingsModal = ({
                         label: "\uAC1C\uC778 \uB9DE\uCDA4 \uC124\uC815"
                       }
                     ),
-                    /* @__PURE__ */ jsx13(
+                    /* @__PURE__ */ jsx16(
                       TabButton,
                       {
                         active: activeTab === "memory",
@@ -7117,7 +7634,7 @@ var SettingsModal = ({
                         label: "AI \uBA54\uBAA8\uB9AC"
                       }
                     ),
-                    /* @__PURE__ */ jsx13(
+                    /* @__PURE__ */ jsx16(
                       TabButton,
                       {
                         active: activeTab === "data",
@@ -7130,24 +7647,24 @@ var SettingsModal = ({
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs12("div", { style: { flex: 1, overflow: "auto", padding: "24px" }, children: [
-              activeTab === "general" && /* @__PURE__ */ jsxs12("div", { children: [
-                /* @__PURE__ */ jsx13("h2", { style: { fontSize: "20px", fontWeight: 600, marginBottom: "24px", color: "var(--chatllm-text, #1f2937)" }, children: "\uC77C\uBC18" }),
-                /* @__PURE__ */ jsx13(SettingRow, { label: "\uC5B8\uC5B4", children: /* @__PURE__ */ jsxs12(
+            /* @__PURE__ */ jsxs15("div", { style: { flex: 1, overflow: "auto", padding: "24px" }, children: [
+              activeTab === "general" && /* @__PURE__ */ jsxs15("div", { children: [
+                /* @__PURE__ */ jsx16("h2", { style: { fontSize: "20px", fontWeight: 600, marginBottom: "24px", color: "var(--chatllm-text, #1f2937)" }, children: "\uC77C\uBC18" }),
+                /* @__PURE__ */ jsx16(SettingRow, { label: "\uC5B8\uC5B4", children: /* @__PURE__ */ jsxs15(
                   "select",
                   {
                     value: personalization.language,
                     onChange: (e) => onPersonalizationChange({ ...personalization, language: e.target.value }),
                     style: selectStyle,
                     children: [
-                      /* @__PURE__ */ jsx13("option", { value: "auto", children: "\uC790\uB3D9 \uD0D0\uC9C0" }),
-                      /* @__PURE__ */ jsx13("option", { value: "ko", children: "\uD55C\uAD6D\uC5B4" }),
-                      /* @__PURE__ */ jsx13("option", { value: "en", children: "English" }),
-                      /* @__PURE__ */ jsx13("option", { value: "ja", children: "\u65E5\u672C\u8A9E" })
+                      /* @__PURE__ */ jsx16("option", { value: "auto", children: "\uC790\uB3D9 \uD0D0\uC9C0" }),
+                      /* @__PURE__ */ jsx16("option", { value: "ko", children: "\uD55C\uAD6D\uC5B4" }),
+                      /* @__PURE__ */ jsx16("option", { value: "en", children: "English" }),
+                      /* @__PURE__ */ jsx16("option", { value: "ja", children: "\u65E5\u672C\u8A9E" })
                     ]
                   }
                 ) }),
-                /* @__PURE__ */ jsx13(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__ */ jsx13(
+                /* @__PURE__ */ jsx16(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__ */ jsx16(
                   "button",
                   {
                     onClick: () => onPersonalizationChange(DEFAULT_PERSONALIZATION2),
@@ -7155,11 +7672,11 @@ var SettingsModal = ({
                     children: "\uCD08\uAE30\uD654"
                   }
                 ) }),
-                onApiKeyChange && /* @__PURE__ */ jsxs12("div", { style: { marginTop: "32px", paddingTop: "24px", borderTop: "1px solid var(--chatllm-border, #e5e7eb)" }, children: [
-                  /* @__PURE__ */ jsx13("h3", { style: { fontSize: "16px", fontWeight: 500, marginBottom: "16px", color: "var(--chatllm-text, #1f2937)" }, children: "API \uC124\uC815" }),
-                  /* @__PURE__ */ jsxs12("div", { children: [
-                    /* @__PURE__ */ jsx13("label", { style: { display: "block", fontSize: "14px", marginBottom: "8px", color: "var(--chatllm-text, #374151)" }, children: apiKeyLabel }),
-                    /* @__PURE__ */ jsx13(
+                onApiKeyChange && /* @__PURE__ */ jsxs15("div", { style: { marginTop: "32px", paddingTop: "24px", borderTop: "1px solid var(--chatllm-border, #e5e7eb)" }, children: [
+                  /* @__PURE__ */ jsx16("h3", { style: { fontSize: "16px", fontWeight: 500, marginBottom: "16px", color: "var(--chatllm-text, #1f2937)" }, children: "API \uC124\uC815" }),
+                  /* @__PURE__ */ jsxs15("div", { children: [
+                    /* @__PURE__ */ jsx16("label", { style: { display: "block", fontSize: "14px", marginBottom: "8px", color: "var(--chatllm-text, #374151)" }, children: apiKeyLabel }),
+                    /* @__PURE__ */ jsx16(
                       "input",
                       {
                         type: "password",
@@ -7169,18 +7686,18 @@ var SettingsModal = ({
                         style: inputStyle
                       }
                     ),
-                    /* @__PURE__ */ jsx13("p", { style: { fontSize: "12px", color: "var(--chatllm-text-muted, #9ca3af)", marginTop: "4px" }, children: apiKeyDescription })
+                    /* @__PURE__ */ jsx16("p", { style: { fontSize: "12px", color: "var(--chatllm-text-muted, #9ca3af)", marginTop: "4px" }, children: apiKeyDescription })
                   ] })
                 ] })
               ] }),
-              activeTab === "personalization" && /* @__PURE__ */ jsxs12("div", { children: [
-                /* @__PURE__ */ jsx13("h2", { style: { fontSize: "20px", fontWeight: 600, marginBottom: "24px", color: "var(--chatllm-text, #1f2937)" }, children: "\uAC1C\uC778 \uB9DE\uCDA4 \uC124\uC815" }),
-                /* @__PURE__ */ jsxs12("section", { style: { marginBottom: "32px" }, children: [
-                  /* @__PURE__ */ jsx13("h3", { style: { fontSize: "14px", fontWeight: 500, color: "var(--chatllm-text-muted, #6b7280)", marginBottom: "16px" }, children: "\uC0AC\uC6A9\uC790 \uD504\uB85C\uD544" }),
-                  /* @__PURE__ */ jsxs12("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
-                    /* @__PURE__ */ jsxs12("div", { children: [
-                      /* @__PURE__ */ jsx13("label", { style: labelStyle, children: "\uB2C9\uB124\uC784" }),
-                      /* @__PURE__ */ jsx13(
+              activeTab === "personalization" && /* @__PURE__ */ jsxs15("div", { children: [
+                /* @__PURE__ */ jsx16("h2", { style: { fontSize: "20px", fontWeight: 600, marginBottom: "24px", color: "var(--chatllm-text, #1f2937)" }, children: "\uAC1C\uC778 \uB9DE\uCDA4 \uC124\uC815" }),
+                /* @__PURE__ */ jsxs15("section", { style: { marginBottom: "32px" }, children: [
+                  /* @__PURE__ */ jsx16("h3", { style: { fontSize: "14px", fontWeight: 500, color: "var(--chatllm-text-muted, #6b7280)", marginBottom: "16px" }, children: "\uC0AC\uC6A9\uC790 \uD504\uB85C\uD544" }),
+                  /* @__PURE__ */ jsxs15("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
+                    /* @__PURE__ */ jsxs15("div", { children: [
+                      /* @__PURE__ */ jsx16("label", { style: labelStyle, children: "\uB2C9\uB124\uC784" }),
+                      /* @__PURE__ */ jsx16(
                         "input",
                         {
                           type: "text",
@@ -7191,9 +7708,9 @@ var SettingsModal = ({
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ jsxs12("div", { children: [
-                      /* @__PURE__ */ jsx13("label", { style: labelStyle, children: "\uC9C1\uC5C5" }),
-                      /* @__PURE__ */ jsx13(
+                    /* @__PURE__ */ jsxs15("div", { children: [
+                      /* @__PURE__ */ jsx16("label", { style: labelStyle, children: "\uC9C1\uC5C5" }),
+                      /* @__PURE__ */ jsx16(
                         "input",
                         {
                           type: "text",
@@ -7204,9 +7721,9 @@ var SettingsModal = ({
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ jsxs12("div", { children: [
-                      /* @__PURE__ */ jsx13("label", { style: labelStyle, children: "\uCD94\uAC00 \uC815\uBCF4" }),
-                      /* @__PURE__ */ jsx13(
+                    /* @__PURE__ */ jsxs15("div", { children: [
+                      /* @__PURE__ */ jsx16("label", { style: labelStyle, children: "\uCD94\uAC00 \uC815\uBCF4" }),
+                      /* @__PURE__ */ jsx16(
                         "textarea",
                         {
                           value: personalization.userProfile.additionalInfo || "",
@@ -7219,63 +7736,83 @@ var SettingsModal = ({
                     ] })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs12("section", { children: [
-                  /* @__PURE__ */ jsx13("h3", { style: { fontSize: "14px", fontWeight: 500, color: "var(--chatllm-text-muted, #6b7280)", marginBottom: "16px" }, children: "\uC751\uB2F5 \uC2A4\uD0C0\uC77C" }),
-                  /* @__PURE__ */ jsx13(SettingRow, { label: "\uB530\uB73B\uD568", children: /* @__PURE__ */ jsxs12(
+                /* @__PURE__ */ jsxs15("section", { children: [
+                  /* @__PURE__ */ jsx16("h3", { style: { fontSize: "14px", fontWeight: 500, color: "var(--chatllm-text-muted, #6b7280)", marginBottom: "16px" }, children: "\uC751\uB2F5 \uC2A4\uD0C0\uC77C" }),
+                  /* @__PURE__ */ jsx16(SettingRow, { label: "\uB530\uB73B\uD568", children: /* @__PURE__ */ jsxs15(
                     "select",
                     {
                       value: personalization.responseStyle.warmth,
                       onChange: (e) => updateResponseStyle("warmth", e.target.value),
                       style: selectStyle,
                       children: [
-                        /* @__PURE__ */ jsx13("option", { value: "high", children: "\uB192\uC74C - \uCE5C\uADFC\uD558\uACE0 \uB530\uB73B\uD558\uAC8C" }),
-                        /* @__PURE__ */ jsx13("option", { value: "medium", children: "\uAE30\uBCF8\uAC12" }),
-                        /* @__PURE__ */ jsx13("option", { value: "low", children: "\uB0AE\uC74C - \uAC04\uACB0\uD558\uACE0 \uC0AC\uBB34\uC801\uC73C\uB85C" })
+                        /* @__PURE__ */ jsx16("option", { value: "high", children: "\uB192\uC74C - \uCE5C\uADFC\uD558\uACE0 \uB530\uB73B\uD558\uAC8C" }),
+                        /* @__PURE__ */ jsx16("option", { value: "medium", children: "\uAE30\uBCF8\uAC12" }),
+                        /* @__PURE__ */ jsx16("option", { value: "low", children: "\uB0AE\uC74C - \uAC04\uACB0\uD558\uACE0 \uC0AC\uBB34\uC801\uC73C\uB85C" })
                       ]
                     }
                   ) }),
-                  /* @__PURE__ */ jsx13(SettingRow, { label: "\uC5F4\uC815\uC801", children: /* @__PURE__ */ jsxs12(
+                  /* @__PURE__ */ jsx16(SettingRow, { label: "\uC5F4\uC815\uC801", children: /* @__PURE__ */ jsxs15(
                     "select",
                     {
                       value: personalization.responseStyle.enthusiasm,
                       onChange: (e) => updateResponseStyle("enthusiasm", e.target.value),
                       style: selectStyle,
                       children: [
-                        /* @__PURE__ */ jsx13("option", { value: "high", children: "\uB192\uC74C - \uC801\uADF9\uC801\uC774\uACE0 \uD65C\uBC1C\uD558\uAC8C" }),
-                        /* @__PURE__ */ jsx13("option", { value: "medium", children: "\uAE30\uBCF8\uAC12" }),
-                        /* @__PURE__ */ jsx13("option", { value: "low", children: "\uB0AE\uC74C - \uCC28\uBD84\uD558\uACE0 \uC808\uC81C\uC788\uAC8C" })
+                        /* @__PURE__ */ jsx16("option", { value: "high", children: "\uB192\uC74C - \uC801\uADF9\uC801\uC774\uACE0 \uD65C\uBC1C\uD558\uAC8C" }),
+                        /* @__PURE__ */ jsx16("option", { value: "medium", children: "\uAE30\uBCF8\uAC12" }),
+                        /* @__PURE__ */ jsx16("option", { value: "low", children: "\uB0AE\uC74C - \uCC28\uBD84\uD558\uACE0 \uC808\uC81C\uC788\uAC8C" })
                       ]
                     }
                   ) }),
-                  /* @__PURE__ */ jsx13(SettingRow, { label: "\uC774\uBAA8\uC9C0 \uC0AC\uC6A9", children: /* @__PURE__ */ jsxs12(
+                  /* @__PURE__ */ jsx16(SettingRow, { label: "\uC774\uBAA8\uC9C0 \uC0AC\uC6A9", children: /* @__PURE__ */ jsxs15(
                     "select",
                     {
                       value: personalization.responseStyle.emojiUsage,
                       onChange: (e) => updateResponseStyle("emojiUsage", e.target.value),
                       style: selectStyle,
                       children: [
-                        /* @__PURE__ */ jsx13("option", { value: "high", children: "\uB192\uC74C - \uC790\uC8FC \uC0AC\uC6A9" }),
-                        /* @__PURE__ */ jsx13("option", { value: "medium", children: "\uAE30\uBCF8\uAC12" }),
-                        /* @__PURE__ */ jsx13("option", { value: "low", children: "\uB0AE\uC74C - \uAC70\uC758 \uC0AC\uC6A9 \uC548 \uD568" })
+                        /* @__PURE__ */ jsx16("option", { value: "high", children: "\uB192\uC74C - \uC790\uC8FC \uC0AC\uC6A9" }),
+                        /* @__PURE__ */ jsx16("option", { value: "medium", children: "\uAE30\uBCF8\uAC12" }),
+                        /* @__PURE__ */ jsx16("option", { value: "low", children: "\uB0AE\uC74C - \uAC70\uC758 \uC0AC\uC6A9 \uC548 \uD568" })
                       ]
                     }
                   ) }),
-                  /* @__PURE__ */ jsx13(SettingRow, { label: "\uC751\uB2F5 \uAE38\uC774", children: /* @__PURE__ */ jsxs12(
+                  /* @__PURE__ */ jsx16(SettingRow, { label: "\uC751\uB2F5 \uAE38\uC774", children: /* @__PURE__ */ jsxs15(
                     "select",
                     {
                       value: personalization.responseStyle.verbosity,
                       onChange: (e) => updateResponseStyle("verbosity", e.target.value),
                       style: selectStyle,
                       children: [
-                        /* @__PURE__ */ jsx13("option", { value: "detailed", children: "\uC0C1\uC138 - \uC790\uC138\uD558\uAC8C \uC124\uBA85" }),
-                        /* @__PURE__ */ jsx13("option", { value: "balanced", children: "\uAE30\uBCF8\uAC12" }),
-                        /* @__PURE__ */ jsx13("option", { value: "concise", children: "\uAC04\uACB0 - \uD575\uC2EC\uB9CC \uC694\uC57D" })
+                        /* @__PURE__ */ jsx16("option", { value: "detailed", children: "\uC0C1\uC138 - \uC790\uC138\uD558\uAC8C \uC124\uBA85" }),
+                        /* @__PURE__ */ jsx16("option", { value: "balanced", children: "\uAE30\uBCF8\uAC12" }),
+                        /* @__PURE__ */ jsx16("option", { value: "concise", children: "\uAC04\uACB0 - \uD575\uC2EC\uB9CC \uC694\uC57D" })
                       ]
                     }
                   ) })
-                ] })
+                ] }),
+                onSave && /* @__PURE__ */ jsx16("div", { style: { marginTop: "24px", display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx16(
+                  "button",
+                  {
+                    onClick: onSave,
+                    style: {
+                      padding: "10px 24px",
+                      backgroundColor: "var(--chatllm-primary, #4A90E2)",
+                      color: "#fff",
+                      border: "none",
+                      borderRadius: "8px",
+                      fontSize: "14px",
+                      fontWeight: 600,
+                      cursor: "pointer",
+                      transition: "opacity 0.15s ease"
+                    },
+                    onMouseEnter: (e) => e.currentTarget.style.opacity = "0.85",
+                    onMouseLeave: (e) => e.currentTarget.style.opacity = "1",
+                    children: "\uC800\uC7A5"
+                  }
+                ) })
               ] }),
-              activeTab === "memory" && /* @__PURE__ */ jsx13(
+              activeTab === "memory" && /* @__PURE__ */ jsx16(
                 MemoryTabContent,
                 {
                   items: memoryItems,
@@ -7284,9 +7821,9 @@ var SettingsModal = ({
                   onClearAll: onClearMemory
                 }
               ),
-              activeTab === "data" && /* @__PURE__ */ jsxs12("div", { children: [
-                /* @__PURE__ */ jsx13("h2", { style: { fontSize: "20px", fontWeight: 600, marginBottom: "24px", color: "var(--chatllm-text, #1f2937)" }, children: "\uB370\uC774\uD130 \uC81C\uC5B4" }),
-                /* @__PURE__ */ jsx13(SettingRow, { label: "\uBA54\uBAA8\uB9AC \uC0AC\uC6A9", description: "\uB300\uD654 \uCEE8\uD14D\uC2A4\uD2B8\uB97C \uAE30\uC5B5\uD569\uB2C8\uB2E4", children: /* @__PURE__ */ jsx13(
+              activeTab === "data" && /* @__PURE__ */ jsxs15("div", { children: [
+                /* @__PURE__ */ jsx16("h2", { style: { fontSize: "20px", fontWeight: 600, marginBottom: "24px", color: "var(--chatllm-text, #1f2937)" }, children: "\uB370\uC774\uD130 \uC81C\uC5B4" }),
+                /* @__PURE__ */ jsx16(SettingRow, { label: "\uBA54\uBAA8\uB9AC \uC0AC\uC6A9", description: "\uB300\uD654 \uCEE8\uD14D\uC2A4\uD2B8\uB97C \uAE30\uC5B5\uD569\uB2C8\uB2E4", children: /* @__PURE__ */ jsx16(
                   "button",
                   {
                     onClick: () => onPersonalizationChange({ ...personalization, useMemory: !personalization.useMemory }),
@@ -7300,7 +7837,7 @@ var SettingsModal = ({
                       position: "relative",
                       transition: "background-color 0.2s"
                     },
-                    children: /* @__PURE__ */ jsx13(
+                    children: /* @__PURE__ */ jsx16(
                       "div",
                       {
                         style: {
@@ -7318,7 +7855,7 @@ var SettingsModal = ({
                     )
                   }
                 ) }),
-                onClearAllData && /* @__PURE__ */ jsx13(SettingRow, { label: "\uB300\uD654 \uAE30\uB85D \uC0AD\uC81C", description: "\uBAA8\uB4E0 \uB300\uD654 \uAE30\uB85D\uC744 \uC0AD\uC81C\uD569\uB2C8\uB2E4", children: /* @__PURE__ */ jsx13(
+                onClearAllData && /* @__PURE__ */ jsx16(SettingRow, { label: "\uB300\uD654 \uAE30\uB85D \uC0AD\uC81C", description: "\uBAA8\uB4E0 \uB300\uD654 \uAE30\uB85D\uC744 \uC0AD\uC81C\uD569\uB2C8\uB2E4", children: /* @__PURE__ */ jsx16(
                   "button",
                   {
                     onClick: () => {
@@ -7338,7 +7875,7 @@ var SettingsModal = ({
     }
   );
 };
-var TabButton = ({ active, onClick, icon, label }) => /* @__PURE__ */ jsxs12(
+var TabButton = ({ active, onClick, icon, label }) => /* @__PURE__ */ jsxs15(
   "button",
   {
     onClick,
@@ -7359,12 +7896,12 @@ var TabButton = ({ active, onClick, icon, label }) => /* @__PURE__ */ jsxs12(
       marginBottom: "4px"
     },
     children: [
-      /* @__PURE__ */ jsx13(IconSvg, { name: icon, size: 20 }),
+      /* @__PURE__ */ jsx16(IconSvg, { name: icon, size: 20 }),
       label
     ]
   }
 );
-var SettingRow = ({ label, description, children }) => /* @__PURE__ */ jsxs12(
+var SettingRow = ({ label, description, children }) => /* @__PURE__ */ jsxs15(
   "div",
   {
     style: {
@@ -7375,9 +7912,9 @@ var SettingRow = ({ label, description, children }) => /* @__PURE__ */ jsxs12(
       borderBottom: "1px solid var(--chatllm-border-light, #f3f4f6)"
     },
     children: [
-      /* @__PURE__ */ jsxs12("div", { children: [
-        /* @__PURE__ */ jsx13("span", { style: { fontSize: "14px", color: "var(--chatllm-text, #374151)" }, children: label }),
-        description && /* @__PURE__ */ jsx13("p", { style: { fontSize: "12px", color: "var(--chatllm-text-muted, #9ca3af)", marginTop: "2px" }, children: description })
+      /* @__PURE__ */ jsxs15("div", { children: [
+        /* @__PURE__ */ jsx16("span", { style: { fontSize: "14px", color: "var(--chatllm-text, #374151)" }, children: label }),
+        description && /* @__PURE__ */ jsx16("p", { style: { fontSize: "12px", color: "var(--chatllm-text-muted, #9ca3af)", marginTop: "2px" }, children: description })
       ] }),
       children
     ]
@@ -7437,8 +7974,8 @@ var memoryCategoryColors = {
   preference: "#8b5cf6"
 };
 var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll }) => {
-  const [activeFilter, setActiveFilter] = useState12("all");
-  const [expandedId, setExpandedId] = useState12(null);
+  const [activeFilter, setActiveFilter] = useState13("all");
+  const [expandedId, setExpandedId] = useState13(null);
   const filteredItems = activeFilter === "all" ? items : items.filter((item) => item.category === activeFilter);
   const formatDate = (timestamp) => {
     const date = new Date(timestamp);
@@ -7449,15 +7986,15 @@ var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll }) => {
       minute: "2-digit"
     });
   };
-  return /* @__PURE__ */ jsxs12("div", { children: [
-    /* @__PURE__ */ jsxs12("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "24px" }, children: [
-      /* @__PURE__ */ jsx13("h2", { style: { fontSize: "20px", fontWeight: 600, color: "var(--chatllm-text, #1f2937)", margin: 0 }, children: "AI \uBA54\uBAA8\uB9AC" }),
-      /* @__PURE__ */ jsxs12("span", { style: { fontSize: "13px", color: "var(--chatllm-text-muted, #9ca3af)" }, children: [
+  return /* @__PURE__ */ jsxs15("div", { children: [
+    /* @__PURE__ */ jsxs15("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "24px" }, children: [
+      /* @__PURE__ */ jsx16("h2", { style: { fontSize: "20px", fontWeight: 600, color: "var(--chatllm-text, #1f2937)", margin: 0 }, children: "AI \uBA54\uBAA8\uB9AC" }),
+      /* @__PURE__ */ jsxs15("span", { style: { fontSize: "13px", color: "var(--chatllm-text-muted, #9ca3af)" }, children: [
         items.length,
         "\uAC1C \uD56D\uBAA9"
       ] })
     ] }),
-    /* @__PURE__ */ jsx13("div", { style: { display: "flex", gap: "6px", marginBottom: "20px", flexWrap: "wrap" }, children: ["all", "fact", "skill", "preference"].map((tab) => /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx16("div", { style: { display: "flex", gap: "6px", marginBottom: "20px", flexWrap: "wrap" }, children: ["all", "fact", "skill", "preference"].map((tab) => /* @__PURE__ */ jsx16(
       "button",
       {
         onClick: () => setActiveFilter(tab),
@@ -7475,7 +8012,7 @@ var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll }) => {
       },
       tab
     )) }),
-    contextSummary && activeFilter === "all" && /* @__PURE__ */ jsxs12(
+    contextSummary && activeFilter === "all" && /* @__PURE__ */ jsxs15(
       "div",
       {
         style: {
@@ -7486,19 +8023,19 @@ var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll }) => {
           borderLeft: "3px solid var(--chatllm-primary, #3b82f6)"
         },
         children: [
-          /* @__PURE__ */ jsxs12("div", { style: { display: "flex", alignItems: "center", gap: "6px", marginBottom: "8px" }, children: [
-            /* @__PURE__ */ jsx13(IconSvg, { name: "file-text-line", size: 14, color: "var(--chatllm-primary, #3b82f6)" }),
-            /* @__PURE__ */ jsx13("span", { style: { fontSize: "12px", fontWeight: 500, color: "var(--chatllm-primary, #3b82f6)" }, children: "\uB300\uD654 \uC694\uC57D" })
+          /* @__PURE__ */ jsxs15("div", { style: { display: "flex", alignItems: "center", gap: "6px", marginBottom: "8px" }, children: [
+            /* @__PURE__ */ jsx16(IconSvg, { name: "file-text-line", size: 14, color: "var(--chatllm-primary, #3b82f6)" }),
+            /* @__PURE__ */ jsx16("span", { style: { fontSize: "12px", fontWeight: 500, color: "var(--chatllm-primary, #3b82f6)" }, children: "\uB300\uD654 \uC694\uC57D" })
           ] }),
-          /* @__PURE__ */ jsx13("p", { style: { fontSize: "13px", lineHeight: "1.6", color: "var(--chatllm-text, #374151)", margin: 0 }, children: contextSummary })
+          /* @__PURE__ */ jsx16("p", { style: { fontSize: "13px", lineHeight: "1.6", color: "var(--chatllm-text, #374151)", margin: 0 }, children: contextSummary })
         ]
       }
     ),
-    filteredItems.length === 0 ? /* @__PURE__ */ jsxs12("div", { style: { padding: "40px 16px", textAlign: "center" }, children: [
-      /* @__PURE__ */ jsx13(IconSvg, { name: "robot-line", size: 40, color: "var(--chatllm-text-muted, #d1d5db)" }),
-      /* @__PURE__ */ jsx13("p", { style: { fontSize: "14px", color: "var(--chatllm-text-muted, #9ca3af)", marginTop: "12px" }, children: "\uC800\uC7A5\uB41C \uBA54\uBAA8\uB9AC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" }),
-      /* @__PURE__ */ jsx13("p", { style: { fontSize: "12px", color: "var(--chatllm-text-muted, #d1d5db)", marginTop: "4px" }, children: "\uB300\uD654\uAC00 \uC9C4\uD589\uB418\uBA74 AI\uAC00 \uC790\uB3D9\uC73C\uB85C \uC815\uBCF4\uB97C \uD559\uC2B5\uD569\uB2C8\uB2E4" })
-    ] }) : /* @__PURE__ */ jsx13("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: filteredItems.map((item) => /* @__PURE__ */ jsxs12(
+    filteredItems.length === 0 ? /* @__PURE__ */ jsxs15("div", { style: { padding: "40px 16px", textAlign: "center" }, children: [
+      /* @__PURE__ */ jsx16(IconSvg, { name: "robot-line", size: 40, color: "var(--chatllm-text-muted, #d1d5db)" }),
+      /* @__PURE__ */ jsx16("p", { style: { fontSize: "14px", color: "var(--chatllm-text-muted, #9ca3af)", marginTop: "12px" }, children: "\uC800\uC7A5\uB41C \uBA54\uBAA8\uB9AC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" }),
+      /* @__PURE__ */ jsx16("p", { style: { fontSize: "12px", color: "var(--chatllm-text-muted, #d1d5db)", marginTop: "4px" }, children: "\uB300\uD654\uAC00 \uC9C4\uD589\uB418\uBA74 AI\uAC00 \uC790\uB3D9\uC73C\uB85C \uC815\uBCF4\uB97C \uD559\uC2B5\uD569\uB2C8\uB2E4" })
+    ] }) : /* @__PURE__ */ jsx16("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: filteredItems.map((item) => /* @__PURE__ */ jsxs15(
       "div",
       {
         style: {
@@ -7511,10 +8048,10 @@ var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll }) => {
         },
         onClick: () => setExpandedId(expandedId === item.id ? null : item.id),
         children: [
-          /* @__PURE__ */ jsxs12("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between" }, children: [
-            /* @__PURE__ */ jsxs12("div", { style: { flex: 1, minWidth: 0 }, children: [
-              /* @__PURE__ */ jsxs12("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginBottom: "4px" }, children: [
-                item.category && /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsxs15("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between" }, children: [
+            /* @__PURE__ */ jsxs15("div", { style: { flex: 1, minWidth: 0 }, children: [
+              /* @__PURE__ */ jsxs15("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginBottom: "4px" }, children: [
+                item.category && /* @__PURE__ */ jsx16(
                   "span",
                   {
                     style: {
@@ -7528,12 +8065,12 @@ var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll }) => {
                     children: memoryCategoryLabels[item.category]
                   }
                 ),
-                /* @__PURE__ */ jsx13("span", { style: { fontSize: "11px", color: "var(--chatllm-text-muted, #9ca3af)" }, children: formatDate(item.timestamp) })
+                /* @__PURE__ */ jsx16("span", { style: { fontSize: "11px", color: "var(--chatllm-text-muted, #9ca3af)" }, children: formatDate(item.timestamp) })
               ] }),
-              /* @__PURE__ */ jsx13("div", { style: { fontSize: "13px", fontWeight: 500, color: "var(--chatllm-text, #1f2937)" }, children: item.key })
+              /* @__PURE__ */ jsx16("div", { style: { fontSize: "13px", fontWeight: 500, color: "var(--chatllm-text, #1f2937)" }, children: item.key })
             ] }),
-            /* @__PURE__ */ jsxs12("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
-              onDelete && /* @__PURE__ */ jsx13(
+            /* @__PURE__ */ jsxs15("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+              onDelete && /* @__PURE__ */ jsx16(
                 "button",
                 {
                   onClick: (e) => {
@@ -7549,10 +8086,10 @@ var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll }) => {
                     opacity: 0.5
                   },
                   "aria-label": "\uBA54\uBAA8\uB9AC \uC0AD\uC81C",
-                  children: /* @__PURE__ */ jsx13(IconSvg, { name: "delete-bin-line", size: 14, color: "var(--chatllm-text-muted, #9ca3af)" })
+                  children: /* @__PURE__ */ jsx16(IconSvg, { name: "delete-bin-line", size: 14, color: "var(--chatllm-text-muted, #9ca3af)" })
                 }
               ),
-              /* @__PURE__ */ jsx13(
+              /* @__PURE__ */ jsx16(
                 IconSvg,
                 {
                   name: expandedId === item.id ? "arrow-up-s-line" : "arrow-down-s-line",
@@ -7562,7 +8099,7 @@ var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll }) => {
               )
             ] })
           ] }),
-          expandedId === item.id && /* @__PURE__ */ jsx13(
+          expandedId === item.id && /* @__PURE__ */ jsx16(
             "div",
             {
               style: {
@@ -7570,7 +8107,7 @@ var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll }) => {
                 paddingTop: "12px",
                 borderTop: "1px solid var(--chatllm-border-light, #f3f4f6)"
               },
-              children: /* @__PURE__ */ jsx13(
+              children: /* @__PURE__ */ jsx16(
                 "p",
                 {
                   style: {
@@ -7589,7 +8126,7 @@ var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll }) => {
       },
       item.id
     )) }),
-    onClearAll && items.length > 0 && /* @__PURE__ */ jsx13("div", { style: { marginTop: "24px", paddingTop: "16px", borderTop: "1px solid var(--chatllm-border, #e5e7eb)" }, children: /* @__PURE__ */ jsx13(
+    onClearAll && items.length > 0 && /* @__PURE__ */ jsx16("div", { style: { marginTop: "24px", paddingTop: "16px", borderTop: "1px solid var(--chatllm-border, #e5e7eb)" }, children: /* @__PURE__ */ jsx16(
       "button",
       {
         onClick: () => {
@@ -7605,7 +8142,7 @@ var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll }) => {
 };
 
 // src/react/ChatUI.tsx
-import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
 var DEFAULT_ACTIONS = [];
 var DEFAULT_TEMPLATES = [];
 var DEFAULT_MODELS = [
@@ -7888,6 +8425,7 @@ var ChatUIView = ({
     activeAlternatives,
     loadingAlternativeFor,
     updatePersonalization,
+    savePersonalization,
     models: hookModels,
     isDeepResearchMode,
     toggleDeepResearchMode,
@@ -7911,7 +8449,7 @@ var ChatUIView = ({
   const handleChoiceClick = (choice) => {
     setInput(choice.text);
   };
-  const memoryItems = React11.useMemo(() => {
+  const memoryItems = React12.useMemo(() => {
     if (!globalMemory?.state.entries) return [];
     const items = [];
     for (const [key, entry] of globalMemory.state.entries) {
@@ -7926,7 +8464,7 @@ var ChatUIView = ({
     return items;
   }, [globalMemory?.state.entries]);
   const themeClass = theme?.mode === "dark" ? "chatllm-dark" : "";
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
       className: `chatllm-root ${themeClass} ${className}`,
@@ -7939,7 +8477,7 @@ var ChatUIView = ({
         position: "relative"
       },
       children: [
-        showSidebar && /* @__PURE__ */ jsx14(
+        showSidebar && /* @__PURE__ */ jsx17(
           ChatSidebar,
           {
             sessions,
@@ -7954,7 +8492,7 @@ var ChatUIView = ({
             theme: theme?.mode
           }
         ),
-        /* @__PURE__ */ jsxs13(
+        /* @__PURE__ */ jsxs16(
           "main",
           {
             style: {
@@ -7966,7 +8504,7 @@ var ChatUIView = ({
               minWidth: 0
             },
             children: [
-              /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsx17(
                 ChatHeader,
                 {
                   title: currentSession?.title || "\uC0C8 \uB300\uD654",
@@ -7980,7 +8518,7 @@ var ChatUIView = ({
                   showSettings
                 }
               ),
-              messages.length === 0 ? /* @__PURE__ */ jsx14(
+              messages.length === 0 ? /* @__PURE__ */ jsx17(
                 EmptyState,
                 {
                   greeting,
@@ -7989,7 +8527,7 @@ var ChatUIView = ({
                   actions,
                   onActionSelect: handleActionSelect
                 }
-              ) : /* @__PURE__ */ jsx14(
+              ) : /* @__PURE__ */ jsx17(
                 MessageList,
                 {
                   messages,
@@ -8011,7 +8549,7 @@ var ChatUIView = ({
                   onPollSubmit: handlePollSubmit
                 }
               ),
-              /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsx17(
                 ChatInput,
                 {
                   value: input,
@@ -8037,7 +8575,7 @@ var ChatUIView = ({
             ]
           }
         ),
-        showSettings && /* @__PURE__ */ jsx14(
+        showSettings && /* @__PURE__ */ jsx17(
           SettingsModal,
           {
             isOpen: settingsOpen,
@@ -8054,7 +8592,8 @@ var ChatUIView = ({
             memoryItems,
             contextSummary: compressionState?.contextSummary,
             onDeleteMemory: globalMemory ? (key) => globalMemory.remove(key) : void 0,
-            onClearMemory: globalMemory ? () => globalMemory.clear() : void 0
+            onClearMemory: globalMemory ? () => globalMemory.clear() : void 0,
+            onSave: savePersonalization
           }
         )
       ]
@@ -8067,6 +8606,7 @@ var ChatUIWithHook = ({
   templates = DEFAULT_TEMPLATES,
   personalization,
   onPersonalizationChange,
+  onPersonalizationSave,
   apiKey,
   onApiKeyChange,
   apiEndpoint = "/api/chat",
@@ -8096,13 +8636,16 @@ var ChatUIWithHook = ({
   showThinking = true,
   thinkingDefaultOpen = false,
   deepResearch,
-  skills
+  skills,
+  tools,
+  onToolCall
 }) => {
   const hookOptions = {
     models,
     actions,
     initialPersonalization: personalization,
     onPersonalizationChange,
+    onPersonalizationSave,
     initialSessionId,
     apiKey,
     apiEndpoint,
@@ -8123,10 +8666,12 @@ var ChatUIWithHook = ({
     onUpdateSessionTitle,
     onSaveMessages,
     deepResearch,
-    skills
+    skills,
+    tools,
+    onToolCall
   };
   const state = useChatUI(hookOptions);
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx17(
     ChatUIView,
     {
       state,
@@ -8166,7 +8711,7 @@ var ChatUI = (props) => {
       onApiKeyChange,
       deepResearch
     } = props;
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx17(
       ChatUIView,
       {
         state: props.chatState,
@@ -8187,11 +8732,11 @@ var ChatUI = (props) => {
       }
     );
   }
-  return /* @__PURE__ */ jsx14(ChatUIWithHook, { ...props });
+  return /* @__PURE__ */ jsx17(ChatUIWithHook, { ...props });
 };
 
 // src/react/hooks/useDeepResearch.ts
-import { useState as useState13, useCallback as useCallback8, useRef as useRef7 } from "react";
+import { useState as useState14, useCallback as useCallback8, useRef as useRef7 } 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>
@@ -8242,8 +8787,8 @@ 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] = useState13(false);
-  const [progress, setProgress] = useState13(null);
+  const [isResearching, setIsResearching] = useState14(false);
+  const [progress, setProgress] = useState14(null);
   const abortControllerRef = useRef7(null);
   const callLLM2 = useCallback8(
     async (prompt, stream = false) => {
@@ -8505,8 +9050,8 @@ var useDeepResearch = (options) => {
 };
 
 // src/react/components/MemoryPanel.tsx
-import { useState as useState14 } from "react";
-import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+import { useState as useState15 } from "react";
+import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
 var categoryLabels = {
   fact: "\uC0AC\uC6A9\uC790 \uC815\uBCF4",
   skill: "\uC804\uBB38 \uBD84\uC57C/\uAE30\uC220",
@@ -8525,8 +9070,8 @@ var MemoryPanel = ({
   isOpen,
   onToggle
 }) => {
-  const [expandedId, setExpandedId] = useState14(null);
-  const [activeTab, setActiveTab] = useState14("all");
+  const [expandedId, setExpandedId] = useState15(null);
+  const [activeTab, setActiveTab] = useState15("all");
   const filteredItems = activeTab === "all" ? items : items.filter((item) => item.category === activeTab);
   const formatDate = (timestamp) => {
     const date = new Date(timestamp);
@@ -8538,7 +9083,7 @@ var MemoryPanel = ({
     });
   };
   if (!isOpen) {
-    return /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsx18(
       "button",
       {
         onClick: onToggle,
@@ -8558,11 +9103,11 @@ var MemoryPanel = ({
           justifyContent: "center",
           zIndex: 100
         },
-        children: /* @__PURE__ */ jsx15(IconSvg, { name: "robot-line", size: 24, color: "#ffffff" })
+        children: /* @__PURE__ */ jsx18(IconSvg, { name: "robot-line", size: 24, color: "#ffffff" })
       }
     );
   }
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs17(
     "div",
     {
       className: "chatllm-memory-panel",
@@ -8582,7 +9127,7 @@ var MemoryPanel = ({
         zIndex: 100
       },
       children: [
-        /* @__PURE__ */ jsxs14(
+        /* @__PURE__ */ jsxs17(
           "div",
           {
             style: {
@@ -8593,8 +9138,8 @@ var MemoryPanel = ({
               borderBottom: "1px solid var(--chatllm-border, #e5e7eb)"
             },
             children: [
-              /* @__PURE__ */ jsxs14("div", { style: { display: "flex", alignItems: "center", gap: "10px" }, children: [
-                /* @__PURE__ */ jsx15(
+              /* @__PURE__ */ jsxs17("div", { style: { display: "flex", alignItems: "center", gap: "10px" }, children: [
+                /* @__PURE__ */ jsx18(
                   "div",
                   {
                     style: {
@@ -8606,19 +9151,19 @@ var MemoryPanel = ({
                       alignItems: "center",
                       justifyContent: "center"
                     },
-                    children: /* @__PURE__ */ jsx15(IconSvg, { name: "robot-line", size: 18, color: "var(--chatllm-primary, #3b82f6)" })
+                    children: /* @__PURE__ */ jsx18(IconSvg, { name: "robot-line", size: 18, color: "var(--chatllm-primary, #3b82f6)" })
                   }
                 ),
-                /* @__PURE__ */ jsxs14("div", { children: [
-                  /* @__PURE__ */ jsx15("div", { style: { fontSize: "15px", fontWeight: 600, color: "var(--chatllm-text, #1f2937)" }, children: "AI \uBA54\uBAA8\uB9AC" }),
-                  /* @__PURE__ */ jsxs14("div", { style: { fontSize: "12px", color: "var(--chatllm-text-muted, #9ca3af)" }, children: [
+                /* @__PURE__ */ jsxs17("div", { children: [
+                  /* @__PURE__ */ jsx18("div", { style: { fontSize: "15px", fontWeight: 600, color: "var(--chatllm-text, #1f2937)" }, children: "AI \uBA54\uBAA8\uB9AC" }),
+                  /* @__PURE__ */ jsxs17("div", { style: { fontSize: "12px", color: "var(--chatllm-text-muted, #9ca3af)" }, children: [
                     items.length,
                     "\uAC1C \uD56D\uBAA9"
                   ] })
                 ] })
               ] }),
-              /* @__PURE__ */ jsxs14("div", { style: { display: "flex", gap: "4px" }, children: [
-                onClearAll && items.length > 0 && /* @__PURE__ */ jsx15(
+              /* @__PURE__ */ jsxs17("div", { style: { display: "flex", gap: "4px" }, children: [
+                onClearAll && items.length > 0 && /* @__PURE__ */ jsx18(
                   "button",
                   {
                     onClick: onClearAll,
@@ -8630,10 +9175,10 @@ var MemoryPanel = ({
                       cursor: "pointer"
                     },
                     title: "\uC804\uCCB4 \uC0AD\uC81C",
-                    children: /* @__PURE__ */ jsx15(IconSvg, { name: "delete-bin-line", size: 18, color: "var(--chatllm-text-muted, #9ca3af)" })
+                    children: /* @__PURE__ */ jsx18(IconSvg, { name: "delete-bin-line", size: 18, color: "var(--chatllm-text-muted, #9ca3af)" })
                   }
                 ),
-                /* @__PURE__ */ jsx15(
+                /* @__PURE__ */ jsx18(
                   "button",
                   {
                     onClick: onToggle,
@@ -8644,14 +9189,14 @@ var MemoryPanel = ({
                       borderRadius: "8px",
                       cursor: "pointer"
                     },
-                    children: /* @__PURE__ */ jsx15(IconSvg, { name: "close-line", size: 18, color: "var(--chatllm-text-muted, #9ca3af)" })
+                    children: /* @__PURE__ */ jsx18(IconSvg, { name: "close-line", size: 18, color: "var(--chatllm-text-muted, #9ca3af)" })
                   }
                 )
               ] })
             ]
           }
         ),
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx18(
           "div",
           {
             style: {
@@ -8661,7 +9206,7 @@ var MemoryPanel = ({
               borderBottom: "1px solid var(--chatllm-border-light, #f3f4f6)",
               overflowX: "auto"
             },
-            children: ["all", "fact", "skill", "preference"].map((tab) => /* @__PURE__ */ jsx15(
+            children: ["all", "fact", "skill", "preference"].map((tab) => /* @__PURE__ */ jsx18(
               "button",
               {
                 onClick: () => setActiveTab(tab),
@@ -8682,8 +9227,8 @@ var MemoryPanel = ({
             ))
           }
         ),
-        /* @__PURE__ */ jsxs14("div", { style: { flex: 1, overflow: "auto", padding: "12px" }, children: [
-          contextSummary && activeTab === "all" && /* @__PURE__ */ jsxs14(
+        /* @__PURE__ */ jsxs17("div", { style: { flex: 1, overflow: "auto", padding: "12px" }, children: [
+          contextSummary && activeTab === "all" && /* @__PURE__ */ jsxs17(
             "div",
             {
               style: {
@@ -8694,7 +9239,7 @@ var MemoryPanel = ({
                 borderLeft: "3px solid var(--chatllm-primary, #3b82f6)"
               },
               children: [
-                /* @__PURE__ */ jsxs14(
+                /* @__PURE__ */ jsxs17(
                   "div",
                   {
                     style: {
@@ -8704,12 +9249,12 @@ var MemoryPanel = ({
                       marginBottom: "8px"
                     },
                     children: [
-                      /* @__PURE__ */ jsx15(IconSvg, { name: "file-text-line", size: 14, color: "var(--chatllm-primary, #3b82f6)" }),
-                      /* @__PURE__ */ jsx15("span", { style: { fontSize: "12px", fontWeight: 500, color: "var(--chatllm-primary, #3b82f6)" }, children: "\uB300\uD654 \uC694\uC57D" })
+                      /* @__PURE__ */ jsx18(IconSvg, { name: "file-text-line", size: 14, color: "var(--chatllm-primary, #3b82f6)" }),
+                      /* @__PURE__ */ jsx18("span", { style: { fontSize: "12px", fontWeight: 500, color: "var(--chatllm-primary, #3b82f6)" }, children: "\uB300\uD654 \uC694\uC57D" })
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx15(
+                /* @__PURE__ */ jsx18(
                   "p",
                   {
                     style: {
@@ -8724,7 +9269,7 @@ var MemoryPanel = ({
               ]
             }
           ),
-          filteredItems.length === 0 ? /* @__PURE__ */ jsxs14(
+          filteredItems.length === 0 ? /* @__PURE__ */ jsxs17(
             "div",
             {
               style: {
@@ -8733,11 +9278,11 @@ var MemoryPanel = ({
                 color: "var(--chatllm-text-muted, #9ca3af)"
               },
               children: [
-                /* @__PURE__ */ jsx15(IconSvg, { name: "robot-line", size: 32, color: "var(--chatllm-text-muted, #d1d5db)" }),
-                /* @__PURE__ */ jsx15("p", { style: { fontSize: "14px", marginTop: "12px" }, children: "\uC800\uC7A5\uB41C \uBA54\uBAA8\uB9AC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" })
+                /* @__PURE__ */ jsx18(IconSvg, { name: "robot-line", size: 32, color: "var(--chatllm-text-muted, #d1d5db)" }),
+                /* @__PURE__ */ jsx18("p", { style: { fontSize: "14px", marginTop: "12px" }, children: "\uC800\uC7A5\uB41C \uBA54\uBAA8\uB9AC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" })
               ]
             }
-          ) : /* @__PURE__ */ jsx15("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: filteredItems.map((item) => /* @__PURE__ */ jsxs14(
+          ) : /* @__PURE__ */ jsx18("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: filteredItems.map((item) => /* @__PURE__ */ jsxs17(
             "div",
             {
               style: {
@@ -8750,10 +9295,10 @@ var MemoryPanel = ({
               },
               onClick: () => setExpandedId(expandedId === item.id ? null : item.id),
               children: [
-                /* @__PURE__ */ jsxs14("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between" }, children: [
-                  /* @__PURE__ */ jsxs14("div", { style: { flex: 1, minWidth: 0 }, children: [
-                    /* @__PURE__ */ jsxs14("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginBottom: "4px" }, children: [
-                      item.category && /* @__PURE__ */ jsx15(
+                /* @__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(
                         "span",
                         {
                           style: {
@@ -8767,9 +9312,9 @@ var MemoryPanel = ({
                           children: categoryLabels[item.category]
                         }
                       ),
-                      /* @__PURE__ */ jsx15("span", { style: { fontSize: "11px", color: "var(--chatllm-text-muted, #9ca3af)" }, children: formatDate(item.timestamp) })
+                      /* @__PURE__ */ jsx18("span", { style: { fontSize: "11px", color: "var(--chatllm-text-muted, #9ca3af)" }, children: formatDate(item.timestamp) })
                     ] }),
-                    /* @__PURE__ */ jsx15(
+                    /* @__PURE__ */ jsx18(
                       "div",
                       {
                         style: {
@@ -8781,8 +9326,8 @@ var MemoryPanel = ({
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsxs14("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
-                    onDelete && /* @__PURE__ */ jsx15(
+                  /* @__PURE__ */ jsxs17("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+                    onDelete && /* @__PURE__ */ jsx18(
                       "button",
                       {
                         onClick: (e) => {
@@ -8797,10 +9342,10 @@ var MemoryPanel = ({
                           cursor: "pointer",
                           opacity: 0.5
                         },
-                        children: /* @__PURE__ */ jsx15(IconSvg, { name: "delete-bin-line", size: 14, color: "var(--chatllm-text-muted, #9ca3af)" })
+                        children: /* @__PURE__ */ jsx18(IconSvg, { name: "delete-bin-line", size: 14, color: "var(--chatllm-text-muted, #9ca3af)" })
                       }
                     ),
-                    /* @__PURE__ */ jsx15(
+                    /* @__PURE__ */ jsx18(
                       IconSvg,
                       {
                         name: expandedId === item.id ? "arrow-up-s-line" : "arrow-down-s-line",
@@ -8810,7 +9355,7 @@ var MemoryPanel = ({
                     )
                   ] })
                 ] }),
-                expandedId === item.id && /* @__PURE__ */ jsx15(
+                expandedId === item.id && /* @__PURE__ */ jsx18(
                   "div",
                   {
                     style: {
@@ -8818,7 +9363,7 @@ var MemoryPanel = ({
                       paddingTop: "12px",
                       borderTop: "1px solid var(--chatllm-border-light, #f3f4f6)"
                     },
-                    children: /* @__PURE__ */ jsx15(
+                    children: /* @__PURE__ */ jsx18(
                       "p",
                       {
                         style: {
@@ -8847,10 +9392,13 @@ export {
   ChatInput,
   ChatSidebar,
   ChatUI,
+  ContentPartRenderer,
   DeepResearchProgressUI,
   EmptyState,
+  FileContentCard,
   Icon,
   IconSvg,
+  ImageContentCard,
   LinkChip,
   MarkdownRenderer,
   MemoryPanel,
@@ -8859,6 +9407,7 @@ export {
   PollCard,
   SettingsModal,
   SkillProgressUI,
+  convertToolsToSkills,
   createAdvancedResearchSkill,
   createDeepResearchSkill,
   useChatUI,