@gendive/chatllm 0.14.0 → 0.15.0

package/dist/react/index.js

@@ -34,10 +34,13 @@ __export(index_exports, {
   ChatInput: () => ChatInput,
   ChatSidebar: () => ChatSidebar,
   ChatUI: () => ChatUI,
+  ContentPartRenderer: () => ContentPartRenderer,
   DeepResearchProgressUI: () => DeepResearchProgressUI,
   EmptyState: () => EmptyState,
+  FileContentCard: () => FileContentCard,
   Icon: () => Icon,
   IconSvg: () => IconSvg,
+  ImageContentCard: () => ImageContentCard,
   LinkChip: () => LinkChip,
   MarkdownRenderer: () => MarkdownRenderer,
   MemoryPanel: () => MemoryPanel,
@@ -46,6 +49,7 @@ __export(index_exports, {
   PollCard: () => PollCard,
   SettingsModal: () => SettingsModal,
   SkillProgressUI: () => SkillProgressUI,
+  convertToolsToSkills: () => convertToolsToSkills,
   createAdvancedResearchSkill: () => createAdvancedResearchSkill,
   createDeepResearchSkill: () => createDeepResearchSkill,
   useChatUI: () => useChatUI,
@@ -55,7 +59,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/react/ChatUI.tsx
-var import_react15 = __toESM(require("react"));
+var import_react16 = __toESM(require("react"));
 
 // src/react/hooks/useChatUI.ts
 var import_react4 = require("react");
@@ -1211,6 +1215,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) => {
@@ -1288,7 +1331,10 @@ var useChatUI = (options) => {
     // Poll options
     enablePoll = true,
     // Skills options
-    skills
+    skills,
+    // Tool options
+    tools,
+    onToolCall
   } = options;
   const enableAutoExtraction = enableAutoExtractionProp ?? !useExternalStorage;
   const [sessions, setSessions] = (0, import_react4.useState)([]);
@@ -1333,6 +1379,11 @@ var useChatUI = (options) => {
     [globalMemoryConfig, storageKey]
   );
   const globalMemory = useGlobalMemoryEnabled ? useGlobalMemory(memoryOptions) : null;
+  const mergedSkills = (0, import_react4.useMemo)(() => {
+    if (!tools || !onToolCall) return skills || {};
+    const toolSkills = convertToolsToSkills(tools, onToolCall);
+    return { ...skills || {}, ...toolSkills };
+  }, [skills, tools, onToolCall]);
   const {
     buildSkillsPrompt,
     handleSkillCall,
@@ -1341,7 +1392,7 @@ var useChatUI = (options) => {
     activeSkillExecution,
     resolvedSkills
   } = useSkills({
-    skills,
+    skills: mergedSkills,
     deepResearch
   });
   const infoExtraction = useInfoExtraction({
@@ -1807,6 +1858,9 @@ ${newConversation}
       return next;
     });
   }, [options.onPersonalizationChange]);
+  const savePersonalization = (0, import_react4.useCallback)(() => {
+    options.onPersonalizationSave?.(personalization);
+  }, [options.onPersonalizationSave, personalization]);
   const toggleDeepResearchMode = (0, import_react4.useCallback)(() => {
     setIsDeepResearchMode((prev) => !prev);
   }, []);
@@ -2178,6 +2232,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;
@@ -2772,6 +2880,7 @@ ${currentSession.contextSummary}` },
     setActiveAlternative,
     getActiveAlternative,
     updatePersonalization,
+    savePersonalization,
     models,
     // Memory
     globalMemory,
@@ -4169,10 +4278,10 @@ var iconButtonStyle = {
 };
 
 // src/react/components/MessageList.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 
 // src/react/components/MessageBubble.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 
 // src/react/components/MarkdownRenderer.tsx
 var import_react9 = __toESM(require("react"));
@@ -4361,6 +4470,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;
@@ -5086,7 +5238,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`;
     });
@@ -6150,8 +6312,358 @@ var SkillProgressUI = ({
   );
 };
 
-// src/react/components/MessageBubble.tsx
+// src/react/components/ImageContentCard.tsx
+var import_react12 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
+var ImageContentCard = ({ part }) => {
+  const [isExpanded, setIsExpanded] = (0, import_react12.useState)(false);
+  const [isLoaded, setIsLoaded] = (0, import_react12.useState)(false);
+  const [hasError, setHasError] = (0, import_react12.useState)(false);
+  if (hasError) {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      "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__ */ (0, import_jsx_runtime10.jsx)(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__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      "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__ */ (0, import_jsx_runtime10.jsx)(
+            "div",
+            {
+              style: {
+                padding: "40px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                backgroundColor: "var(--chatllm-bg-secondary, #f1f5f9)"
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconSvg, { name: "loader-4-line", size: 24, color: "var(--chatllm-text-muted, #94a3b8)" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "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__ */ (0, import_jsx_runtime10.jsx)(
+            "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__ */ (0, import_jsx_runtime10.jsx)(
+      "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__ */ (0, import_jsx_runtime10.jsx)(
+          "img",
+          {
+            src: part.url,
+            alt: part.alt || "",
+            style: {
+              maxWidth: "90vw",
+              maxHeight: "90vh",
+              objectFit: "contain",
+              borderRadius: "4px"
+            }
+          }
+        )
+      }
+    )
+  ] });
+};
+
+// src/react/components/FileContentCard.tsx
+var import_jsx_runtime11 = require("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__ */ (0, import_jsx_runtime11.jsxs)(
+    "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__ */ (0, import_jsx_runtime11.jsx)(
+          "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__ */ (0, import_jsx_runtime11.jsx)(IconSvg, { name: getFileIcon(part.mimeType), size: 18, color: "var(--chatllm-primary, #4A90E2)" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "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__ */ (0, import_jsx_runtime11.jsx)(
+            "div",
+            {
+              style: {
+                fontSize: "11px",
+                color: "var(--chatllm-text-muted, #94a3b8)",
+                marginTop: "2px"
+              },
+              children: [formatFileSize(part.size), part.mimeType].filter(Boolean).join(" \xB7 ")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconSvg, { name: "download-line", size: 16, color: "var(--chatllm-text-muted, #94a3b8)" })
+      ]
+    }
+  );
+};
+
+// src/react/components/ContentPartRenderer.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var ContentPartRenderer = ({
+  parts,
+  onChoiceClick,
+  showThinking,
+  thinkingDefaultOpen
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: parts.map((part, idx) => {
+    switch (part.type) {
+      case "text":
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          MarkdownRenderer,
+          {
+            content: part.content,
+            onChoiceClick,
+            showThinking,
+            thinkingDefaultOpen
+          },
+          idx
+        );
+      case "image":
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ImageContentCard, { part }, idx);
+      case "file":
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FileContentCard, { part }, idx);
+      case "search_result":
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: "6px" }, children: part.results.map((source, si) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          LinkChip,
+          {
+            text: source.title,
+            url: source.url,
+            index: si + 1,
+            showFavicon: true
+          },
+          si
+        )) }, idx);
+      case "tool_loading":
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          "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__ */ (0, import_jsx_runtime12.jsx)(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__ */ (0, import_jsx_runtime12.jsx)(
+            ImageContentCard,
+            {
+              part: { type: "image", url: part.result.content, alt: part.result.metadata?.alt }
+            },
+            idx
+          );
+        }
+        if (part.result.type === "file") {
+          return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            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__ */ (0, import_jsx_runtime12.jsxs)(
+            "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__ */ (0, import_jsx_runtime12.jsx)(IconSvg, { name: "error-warning-line", size: 16, color: "var(--chatllm-error, #ef4444)" }),
+                part.result.content
+              ]
+            },
+            idx
+          );
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          MarkdownRenderer,
+          {
+            content: part.result.content,
+            onChoiceClick,
+            showThinking,
+            thinkingDefaultOpen
+          },
+          idx
+        );
+      case "error":
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          "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__ */ (0, import_jsx_runtime12.jsx)(IconSvg, { name: "error-warning-line", size: 16, color: "var(--chatllm-error, #ef4444)" }),
+              part.message
+            ]
+          },
+          idx
+        );
+      default:
+        return null;
+    }
+  }) });
+};
+
+// src/react/components/MessageBubble.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var MessageBubble = ({
   message,
   isLoading,
@@ -6173,8 +6685,8 @@ var MessageBubble = ({
   isLoadingAlternative = false,
   onPollSubmit
 }) => {
-  const [showActions, setShowActions] = (0, import_react12.useState)(false);
-  const [showModelMenu, setShowModelMenu] = (0, import_react12.useState)(false);
+  const [showActions, setShowActions] = (0, import_react13.useState)(false);
+  const [showModelMenu, setShowModelMenu] = (0, import_react13.useState)(false);
   const isUser = message.role === "user";
   const isAssistant = message.role === "assistant";
   const relevantAlternatives = isUser ? alternatives : message.alternatives;
@@ -6192,7 +6704,7 @@ var MessageBubble = ({
     }
   };
   if (isUser) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       "div",
       {
         className: "chatllm-message chatllm-message--user",
@@ -6206,7 +6718,7 @@ var MessageBubble = ({
         onMouseLeave: () => setShowActions(false),
         onMouseUp: handleMouseUp,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "div",
             {
               style: {
@@ -6216,7 +6728,7 @@ var MessageBubble = ({
                 borderRadius: "16px",
                 borderTopRightRadius: "4px"
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 "div",
                 {
                   style: {
@@ -6230,7 +6742,7 @@ var MessageBubble = ({
               )
             }
           ),
-          !isLoading && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+          !isLoading && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
             "div",
             {
               style: {
@@ -6242,7 +6754,7 @@ var MessageBubble = ({
                 transition: "opacity 0.15s ease"
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { onClick: onCopy, style: actionButtonSmallStyle, title: "\uBCF5\uC0AC", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { onClick: onCopy, style: actionButtonSmallStyle, title: "\uBCF5\uC0AC", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   IconSvg,
                   {
                     name: isCopied ? "check-line" : "file-copy-line",
@@ -6250,7 +6762,7 @@ var MessageBubble = ({
                     color: isCopied ? "var(--chatllm-success)" : "var(--chatllm-text-muted)"
                   }
                 ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { onClick: onEdit, style: actionButtonSmallStyle, title: "\uC218\uC815", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconSvg, { name: "edit-line", size: 12, color: "var(--chatllm-text-muted)" }) })
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { onClick: onEdit, style: actionButtonSmallStyle, title: "\uC218\uC815", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(IconSvg, { name: "edit-line", size: 12, color: "var(--chatllm-text-muted)" }) })
               ]
             }
           )
@@ -6258,7 +6770,7 @@ var MessageBubble = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "div",
     {
       className: "chatllm-message chatllm-message--assistant",
@@ -6272,7 +6784,7 @@ var MessageBubble = ({
       onMouseLeave: () => setShowActions(false),
       onMouseUp: handleMouseUp,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
           "div",
           {
             className: "chatllm-sheet",
@@ -6283,7 +6795,7 @@ var MessageBubble = ({
               gap: "12px"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 "div",
                 {
                   style: {
@@ -6296,11 +6808,11 @@ var MessageBubble = ({
                     justifyContent: "center",
                     color: "var(--chatllm-primary)"
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconSvg, { name: "magic-line", size: 20 })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(IconSvg, { name: "magic-line", size: 20 })
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
-                displayModel && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+                displayModel && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   "div",
                   {
                     style: {
@@ -6309,7 +6821,7 @@ var MessageBubble = ({
                       gap: "8px",
                       marginBottom: "8px"
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                       "span",
                       {
                         style: {
@@ -6324,9 +6836,9 @@ var MessageBubble = ({
                     )
                   }
                 ),
-                message.isDeepResearch && message.researchProgress && message.researchProgress.phase !== "done" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DeepResearchProgressUI, { progress: message.researchProgress }),
-                message.skillExecution && message.skillExecution.status !== "done" && (message.skillExecution.progress?.subAgents ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DeepResearchProgressUI, { progress: message.skillExecution.progress }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkillProgressUI, { execution: message.skillExecution })),
-                message.isDeepResearch && displayContent && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                message.isDeepResearch && message.researchProgress && message.researchProgress.phase !== "done" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DeepResearchProgressUI, { progress: message.researchProgress }),
+                message.skillExecution && message.skillExecution.status !== "done" && (message.skillExecution.progress?.subAgents ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DeepResearchProgressUI, { progress: message.skillExecution.progress }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SkillProgressUI, { execution: message.skillExecution })),
+                message.isDeepResearch && displayContent && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                   "div",
                   {
                     className: "chatllm-deep-research__header",
@@ -6339,8 +6851,8 @@ var MessageBubble = ({
                       borderBottom: "1px solid var(--chatllm-border-light)"
                     },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconSvg, { name: "search-eye-line", size: 18, color: "var(--chatllm-primary)" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(IconSvg, { name: "search-eye-line", size: 18, color: "var(--chatllm-primary)" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                         "span",
                         {
                           style: {
@@ -6351,7 +6863,7 @@ var MessageBubble = ({
                           children: "\uC2EC\uCE35\uC5F0\uAD6C"
                         }
                       ),
-                      displaySources && displaySources.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                      displaySources && displaySources.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                         "span",
                         {
                           className: "chatllm-deep-research__source-count",
@@ -6373,14 +6885,14 @@ var MessageBubble = ({
                     ]
                   }
                 ),
-                isLoading && !displayContent && !message.isDeepResearch && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { display: "flex", gap: "4px", alignItems: "center" }, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "chatllm-dot-bounce", style: dotStyle }),
-                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "chatllm-dot-bounce", style: dotStyle }),
-                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "chatllm-dot-bounce", style: dotStyle })
+                isLoading && !displayContent && !message.isDeepResearch && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { display: "flex", gap: "4px", alignItems: "center" }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "chatllm-dot-bounce", style: dotStyle }),
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "chatllm-dot-bounce", style: dotStyle }),
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "chatllm-dot-bounce", style: dotStyle })
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                       "span",
                       {
                         style: {
@@ -6393,16 +6905,24 @@ var MessageBubble = ({
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "chatllm-skeleton-pulse", style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { height: "32px", width: "75%", backgroundColor: "var(--chatllm-bg-tertiary)", borderRadius: "8px" } }),
-                    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { height: "16px", width: "100%", backgroundColor: "var(--chatllm-bg-secondary)", borderRadius: "4px" } }),
-                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { height: "16px", width: "85%", backgroundColor: "var(--chatllm-bg-secondary)", borderRadius: "4px" } }),
-                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { height: "16px", width: "65%", backgroundColor: "var(--chatllm-bg-secondary)", borderRadius: "4px" } })
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "chatllm-skeleton-pulse", style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { height: "32px", width: "75%", backgroundColor: "var(--chatllm-bg-tertiary)", borderRadius: "8px" } }),
+                    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { height: "16px", width: "100%", backgroundColor: "var(--chatllm-bg-secondary)", borderRadius: "4px" } }),
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { height: "16px", width: "85%", backgroundColor: "var(--chatllm-bg-secondary)", borderRadius: "4px" } }),
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { height: "16px", width: "65%", backgroundColor: "var(--chatllm-bg-secondary)", borderRadius: "4px" } })
                     ] })
                   ] })
                 ] }),
-                displayContent && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { wordBreak: "break-word" }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                message.contentParts?.length ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { wordBreak: "break-word" }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  ContentPartRenderer,
+                  {
+                    parts: message.contentParts,
+                    onChoiceClick,
+                    showThinking,
+                    thinkingDefaultOpen
+                  }
+                ) }) : displayContent ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { wordBreak: "break-word" }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   MarkdownRenderer,
                   {
                     content: displayContent,
@@ -6410,8 +6930,8 @@ var MessageBubble = ({
                     showThinking,
                     thinkingDefaultOpen
                   }
-                ) }),
-                message.pollBlock && message.pollBlock.questions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                ) }) : null,
+                message.pollBlock && message.pollBlock.questions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   PollCard,
                   {
                     questions: message.pollBlock.questions,
@@ -6423,7 +6943,7 @@ var MessageBubble = ({
                     }
                   }
                 ),
-                !isLoading && !displayContent && !message.pollBlock && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                !isLoading && !displayContent && !message.pollBlock && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   "div",
                   {
                     style: {
@@ -6436,7 +6956,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__ */ (0, import_jsx_runtime10.jsxs)(
+                displaySources && displaySources.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                   "div",
                   {
                     style: {
@@ -6448,7 +6968,7 @@ var MessageBubble = ({
                       borderTop: "1px solid var(--chatllm-border-light)"
                     },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                         "span",
                         {
                           style: {
@@ -6460,7 +6980,7 @@ var MessageBubble = ({
                           children: "\uCD9C\uCC98:"
                         }
                       ),
-                      displaySources.map((source, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                      displaySources.map((source, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                         LinkChip,
                         {
                           text: source.title,
@@ -6473,7 +6993,7 @@ var MessageBubble = ({
                     ]
                   }
                 ),
-                relevantAlternatives && relevantAlternatives.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                relevantAlternatives && relevantAlternatives.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                   "div",
                   {
                     style: {
@@ -6487,8 +7007,8 @@ var MessageBubble = ({
                       fontSize: "12px"
                     },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { color: "var(--chatllm-text-muted)", marginRight: "4px" }, children: displayModel || "\uBAA8\uB378" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { color: "var(--chatllm-text-muted)", marginRight: "4px" }, children: displayModel || "\uBAA8\uB378" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                         "button",
                         {
                           onClick: () => onAlternativeChange?.(Math.max(0, relevantActiveIndex - 1)),
@@ -6498,15 +7018,15 @@ var MessageBubble = ({
                             opacity: relevantActiveIndex === 0 ? 0.5 : 1,
                             cursor: relevantActiveIndex === 0 ? "not-allowed" : "pointer"
                           },
-                          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconSvg, { name: "arrow-left-line", size: 12 })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(IconSvg, { name: "arrow-left-line", size: 12 })
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { style: { color: "var(--chatllm-text-secondary)" }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { style: { color: "var(--chatllm-text-secondary)" }, children: [
                         relevantActiveIndex + 1,
                         " / ",
                         relevantAlternatives.length + 1
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                         "button",
                         {
                           onClick: () => onAlternativeChange?.(Math.min(relevantAlternatives.length, relevantActiveIndex + 1)),
@@ -6516,13 +7036,13 @@ var MessageBubble = ({
                             opacity: relevantActiveIndex === relevantAlternatives.length ? 0.5 : 1,
                             cursor: relevantActiveIndex === relevantAlternatives.length ? "not-allowed" : "pointer"
                           },
-                          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconSvg, { name: "arrow-right-line", size: 12 })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(IconSvg, { name: "arrow-right-line", size: 12 })
                         }
                       )
                     ]
                   }
                 ),
-                isLoadingAlternative && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                isLoadingAlternative && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                   "div",
                   {
                     style: {
@@ -6537,12 +7057,12 @@ var MessageBubble = ({
                       color: "var(--chatllm-primary, #2563eb)"
                     },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { display: "flex", gap: "4px", alignItems: "center" }, children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "chatllm-dot-bounce", style: dotStyle }),
-                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "chatllm-dot-bounce", style: dotStyle }),
-                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "chatllm-dot-bounce", style: dotStyle })
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { display: "flex", gap: "4px", alignItems: "center" }, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "chatllm-dot-bounce", style: dotStyle }),
+                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "chatllm-dot-bounce", style: dotStyle }),
+                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "chatllm-dot-bounce", style: dotStyle })
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { fontWeight: 500 }, children: "\uB2E4\uB978 \uBAA8\uB378 \uC751\uB2F5 \uC0DD\uC131 \uC911..." })
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { fontWeight: 500 }, children: "\uB2E4\uB978 \uBAA8\uB378 \uC751\uB2F5 \uC0DD\uC131 \uC911..." })
                     ]
                   }
                 )
@@ -6550,7 +7070,7 @@ var MessageBubble = ({
             ]
           }
         ),
-        !isLoading && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        !isLoading && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
           "div",
           {
             style: {
@@ -6563,7 +7083,7 @@ var MessageBubble = ({
               transition: "opacity 0.15s ease"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { onClick: onCopy, style: actionButtonSmallStyle, title: "\uBCF5\uC0AC", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { onClick: onCopy, style: actionButtonSmallStyle, title: "\uBCF5\uC0AC", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 IconSvg,
                 {
                   name: isCopied ? "check-line" : "file-copy-line",
@@ -6571,18 +7091,18 @@ var MessageBubble = ({
                   color: isCopied ? "var(--chatllm-success)" : "var(--chatllm-text-muted)"
                 }
               ) }),
-              onRegenerate && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { onClick: onRegenerate, style: actionButtonSmallStyle, title: "\uB2E4\uC2DC \uC0DD\uC131", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconSvg, { name: "refresh-line", size: 12, color: "var(--chatllm-text-muted)" }) }),
-              onAskOtherModel && otherModels.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { position: "relative" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              onRegenerate && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { onClick: onRegenerate, style: actionButtonSmallStyle, title: "\uB2E4\uC2DC \uC0DD\uC131", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(IconSvg, { name: "refresh-line", size: 12, color: "var(--chatllm-text-muted)" }) }),
+              onAskOtherModel && otherModels.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { position: "relative" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   "button",
                   {
                     onClick: () => setShowModelMenu(!showModelMenu),
                     style: actionButtonSmallStyle,
                     title: "\uB2E4\uB978 \uBAA8\uB378\uC5D0\uAC8C \uC9C8\uBB38",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconSvg, { name: "robot-line", size: 12, color: "var(--chatllm-text-muted)" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(IconSvg, { name: "robot-line", size: 12, color: "var(--chatllm-text-muted)" })
                   }
                 ),
-                showModelMenu && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                showModelMenu && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   ModelMenu,
                   {
                     models: otherModels,
@@ -6601,7 +7121,7 @@ var MessageBubble = ({
     }
   );
 };
-var ModelMenu = ({ models, onSelect, onClose }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+var ModelMenu = ({ models, onSelect, onClose }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
   "div",
   {
     style: {
@@ -6619,7 +7139,7 @@ var ModelMenu = ({ models, onSelect, onClose }) => /* @__PURE__ */ (0, import_js
     },
     onMouseLeave: onClose,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         "div",
         {
           style: {
@@ -6634,7 +7154,7 @@ var ModelMenu = ({ models, onSelect, onClose }) => /* @__PURE__ */ (0, import_js
           children: "\uB2E4\uB978 \uBAA8\uB378\uC5D0\uAC8C \uC9C8\uBB38"
         }
       ),
-      models.map((model) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      models.map((model) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
         "button",
         {
           onClick: () => onSelect(model.id),
@@ -6659,9 +7179,9 @@ var ModelMenu = ({ models, onSelect, onClose }) => /* @__PURE__ */ (0, import_js
             e.currentTarget.style.backgroundColor = "transparent";
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconSvg, { name: "robot-line", size: 16, color: "var(--chatllm-primary)" }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { flex: 1, fontWeight: 500 }, children: model.name }),
-            model.provider && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(IconSvg, { name: "robot-line", size: 16, color: "var(--chatllm-primary)" }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { flex: 1, fontWeight: 500 }, children: model.name }),
+            model.provider && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               "span",
               {
                 style: {
@@ -6710,7 +7230,7 @@ var navButtonStyle = {
 };
 
 // src/react/components/MessageList.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var MessageList = ({
   messages,
   isLoading,
@@ -6730,14 +7250,14 @@ var MessageList = ({
   loadingAlternativeFor,
   onPollSubmit
 }) => {
-  const messagesEndRef = (0, import_react13.useRef)(null);
-  const containerRef = (0, import_react13.useRef)(null);
-  const [selectedText, setSelectedText] = (0, import_react13.useState)("");
-  const [selectionPosition, setSelectionPosition] = (0, import_react13.useState)(null);
-  (0, import_react13.useEffect)(() => {
+  const messagesEndRef = (0, import_react14.useRef)(null);
+  const containerRef = (0, import_react14.useRef)(null);
+  const [selectedText, setSelectedText] = (0, import_react14.useState)("");
+  const [selectionPosition, setSelectionPosition] = (0, import_react14.useState)(null);
+  (0, import_react14.useEffect)(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
-  const handleMouseUp = (0, import_react13.useCallback)(() => {
+  const handleMouseUp = (0, import_react14.useCallback)(() => {
     const selection = window.getSelection();
     const text = selection?.toString().trim();
     if (text && text.length > 0) {
@@ -6769,7 +7289,7 @@ var MessageList = ({
       window.getSelection()?.removeAllRanges();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "div",
     {
       ref: containerRef,
@@ -6781,7 +7301,7 @@ var MessageList = ({
       },
       onMouseUp: handleMouseUp,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
           "div",
           {
             style: {
@@ -6796,7 +7316,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__ */ (0, import_jsx_runtime11.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                   MessageBubble,
                   {
                     message,
@@ -6827,11 +7347,11 @@ var MessageList = ({
                   message.id
                 );
               }),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ref: messagesEndRef })
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref: messagesEndRef })
             ]
           }
         ),
-        selectionPosition && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        selectionPosition && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
           "div",
           {
             style: {
@@ -6843,7 +7363,7 @@ var MessageList = ({
               pointerEvents: "auto"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
                 "button",
                 {
                   onClick: handleQuote,
@@ -6863,12 +7383,12 @@ var MessageList = ({
                     whiteSpace: "nowrap"
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconSvg, { name: "double-quotes-l", size: 16, color: "#ffffff" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(IconSvg, { name: "double-quotes-l", size: 16, color: "#ffffff" }),
                     "\uC778\uC6A9\uD558\uAE30"
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                 "div",
                 {
                   style: {
@@ -6893,7 +7413,7 @@ var MessageList = ({
 };
 
 // src/react/components/EmptyState.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var EmptyState = ({
   greeting,
   templates = [],
@@ -6911,7 +7431,7 @@ var EmptyState = ({
     return iconMap[icon] || "sparkling-line";
   };
   const hasContent = actions.length > 0 || templates.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "div",
     {
       className: "chatllm-empty-state",
@@ -6926,7 +7446,7 @@ var EmptyState = ({
         textAlign: "center"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "div",
           {
             className: "chatllm-sheet",
@@ -6940,10 +7460,10 @@ var EmptyState = ({
               marginBottom: "32px",
               color: "var(--chatllm-primary)"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(IconSvg, { name: "chat-1-line", size: 40 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconSvg, { name: "chat-1-line", size: 40 })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "h1",
           {
             style: {
@@ -6956,7 +7476,7 @@ var EmptyState = ({
             children: "How can I help you today?"
           }
         ),
-        (actions.length > 0 || templates.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        (actions.length > 0 || templates.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
           "div",
           {
             style: {
@@ -6968,7 +7488,7 @@ var EmptyState = ({
               marginBottom: "48px"
             },
             children: [
-              actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+              actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
                 "button",
                 {
                   onClick: () => onActionSelect?.(action),
@@ -6982,7 +7502,7 @@ var EmptyState = ({
                     fontWeight: 500
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                       IconSvg,
                       {
                         name: getActionIcon(action.icon),
@@ -6995,7 +7515,7 @@ var EmptyState = ({
                 },
                 action.id
               )),
-              templates.slice(0, 4).map((template) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+              templates.slice(0, 4).map((template) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
                 "button",
                 {
                   onClick: () => onTemplateClick(template),
@@ -7009,7 +7529,7 @@ var EmptyState = ({
                     fontWeight: 500
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                       IconSvg,
                       {
                         name: "sparkling-line",
@@ -7031,8 +7551,8 @@ var EmptyState = ({
 };
 
 // src/react/components/SettingsModal.tsx
-var import_react14 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_react15 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var DEFAULT_PERSONALIZATION2 = {
   responseStyle: {
     warmth: "medium",
@@ -7058,10 +7578,11 @@ var SettingsModal = ({
   memoryItems = [],
   contextSummary,
   onDeleteMemory,
-  onClearMemory
+  onClearMemory,
+  onSave
 }) => {
-  const [activeTab, setActiveTab] = (0, import_react14.useState)("general");
-  const [localApiKey, setLocalApiKey] = (0, import_react14.useState)(apiKey);
+  const [activeTab, setActiveTab] = (0, import_react15.useState)("general");
+  const [localApiKey, setLocalApiKey] = (0, import_react15.useState)(apiKey);
   if (!isOpen) return null;
   const updateResponseStyle = (key, value) => {
     onPersonalizationChange({
@@ -7085,7 +7606,7 @@ var SettingsModal = ({
     setLocalApiKey(value);
     onApiKeyChange?.(value);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "div",
     {
       className: "chatllm-settings-overlay",
@@ -7099,7 +7620,7 @@ var SettingsModal = ({
         zIndex: 1e3
       },
       onClick: onClose,
-      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
         "div",
         {
           className: "chatllm-settings-modal",
@@ -7117,7 +7638,7 @@ var SettingsModal = ({
           },
           onClick: (e) => e.stopPropagation(),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
               "div",
               {
                 style: {
@@ -7128,7 +7649,7 @@ var SettingsModal = ({
                   flexDirection: "column"
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { padding: "16px", borderBottom: "1px solid var(--chatllm-border, #e5e7eb)" }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { padding: "16px", borderBottom: "1px solid var(--chatllm-border, #e5e7eb)" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                     "button",
                     {
                       onClick: onClose,
@@ -7142,11 +7663,11 @@ var SettingsModal = ({
                         alignItems: "center",
                         justifyContent: "center"
                       },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(IconSvg, { name: "close-line", size: 20, color: "var(--chatllm-text-muted, #6b7280)" })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconSvg, { name: "close-line", size: 20, color: "var(--chatllm-text-muted, #6b7280)" })
                     }
                   ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("nav", { style: { flex: 1, padding: "8px" }, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("nav", { style: { flex: 1, padding: "8px" }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                       TabButton,
                       {
                         active: activeTab === "general",
@@ -7155,7 +7676,7 @@ var SettingsModal = ({
                         label: "\uC77C\uBC18"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                       TabButton,
                       {
                         active: activeTab === "personalization",
@@ -7164,7 +7685,7 @@ var SettingsModal = ({
                         label: "\uAC1C\uC778 \uB9DE\uCDA4 \uC124\uC815"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                       TabButton,
                       {
                         active: activeTab === "memory",
@@ -7173,7 +7694,7 @@ var SettingsModal = ({
                         label: "AI \uBA54\uBAA8\uB9AC"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                       TabButton,
                       {
                         active: activeTab === "data",
@@ -7186,24 +7707,24 @@ var SettingsModal = ({
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { flex: 1, overflow: "auto", padding: "24px" }, children: [
-              activeTab === "general" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h2", { style: { fontSize: "20px", fontWeight: 600, marginBottom: "24px", color: "var(--chatllm-text, #1f2937)" }, children: "\uC77C\uBC18" }),
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SettingRow, { label: "\uC5B8\uC5B4", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { flex: 1, overflow: "auto", padding: "24px" }, children: [
+              activeTab === "general" && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h2", { style: { fontSize: "20px", fontWeight: 600, marginBottom: "24px", color: "var(--chatllm-text, #1f2937)" }, children: "\uC77C\uBC18" }),
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SettingRow, { label: "\uC5B8\uC5B4", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
                   "select",
                   {
                     value: personalization.language,
                     onChange: (e) => onPersonalizationChange({ ...personalization, language: e.target.value }),
                     style: selectStyle,
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "auto", children: "\uC790\uB3D9 \uD0D0\uC9C0" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "ko", children: "\uD55C\uAD6D\uC5B4" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "en", children: "English" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "ja", children: "\u65E5\u672C\u8A9E" })
+                      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: "auto", children: "\uC790\uB3D9 \uD0D0\uC9C0" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: "ko", children: "\uD55C\uAD6D\uC5B4" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: "en", children: "English" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: "ja", children: "\u65E5\u672C\u8A9E" })
                     ]
                   }
                 ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(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__ */ (0, import_jsx_runtime13.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(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__ */ (0, import_jsx_runtime16.jsx)(
                   "button",
                   {
                     onClick: () => onPersonalizationChange(DEFAULT_PERSONALIZATION2),
@@ -7211,11 +7732,11 @@ var SettingsModal = ({
                     children: "\uCD08\uAE30\uD654"
                   }
                 ) }),
-                onApiKeyChange && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { marginTop: "32px", paddingTop: "24px", borderTop: "1px solid var(--chatllm-border, #e5e7eb)" }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h3", { style: { fontSize: "16px", fontWeight: 500, marginBottom: "16px", color: "var(--chatllm-text, #1f2937)" }, children: "API \uC124\uC815" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { style: { display: "block", fontSize: "14px", marginBottom: "8px", color: "var(--chatllm-text, #374151)" }, children: apiKeyLabel }),
-                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                onApiKeyChange && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { marginTop: "32px", paddingTop: "24px", borderTop: "1px solid var(--chatllm-border, #e5e7eb)" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { style: { fontSize: "16px", fontWeight: 500, marginBottom: "16px", color: "var(--chatllm-text, #1f2937)" }, children: "API \uC124\uC815" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { style: { display: "block", fontSize: "14px", marginBottom: "8px", color: "var(--chatllm-text, #374151)" }, children: apiKeyLabel }),
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                       "input",
                       {
                         type: "password",
@@ -7225,18 +7746,18 @@ var SettingsModal = ({
                         style: inputStyle
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { style: { fontSize: "12px", color: "var(--chatllm-text-muted, #9ca3af)", marginTop: "4px" }, children: apiKeyDescription })
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { style: { fontSize: "12px", color: "var(--chatllm-text-muted, #9ca3af)", marginTop: "4px" }, children: apiKeyDescription })
                   ] })
                 ] })
               ] }),
-              activeTab === "personalization" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h2", { style: { fontSize: "20px", fontWeight: 600, marginBottom: "24px", color: "var(--chatllm-text, #1f2937)" }, children: "\uAC1C\uC778 \uB9DE\uCDA4 \uC124\uC815" }),
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("section", { style: { marginBottom: "32px" }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h3", { style: { fontSize: "14px", fontWeight: 500, color: "var(--chatllm-text-muted, #6b7280)", marginBottom: "16px" }, children: "\uC0AC\uC6A9\uC790 \uD504\uB85C\uD544" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { style: labelStyle, children: "\uB2C9\uB124\uC784" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              activeTab === "personalization" && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h2", { style: { fontSize: "20px", fontWeight: 600, marginBottom: "24px", color: "var(--chatllm-text, #1f2937)" }, children: "\uAC1C\uC778 \uB9DE\uCDA4 \uC124\uC815" }),
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("section", { style: { marginBottom: "32px" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { style: { fontSize: "14px", fontWeight: 500, color: "var(--chatllm-text-muted, #6b7280)", marginBottom: "16px" }, children: "\uC0AC\uC6A9\uC790 \uD504\uB85C\uD544" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { style: labelStyle, children: "\uB2C9\uB124\uC784" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                         "input",
                         {
                           type: "text",
@@ -7247,9 +7768,9 @@ var SettingsModal = ({
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { style: labelStyle, children: "\uC9C1\uC5C5" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { style: labelStyle, children: "\uC9C1\uC5C5" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                         "input",
                         {
                           type: "text",
@@ -7260,9 +7781,9 @@ var SettingsModal = ({
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { style: labelStyle, children: "\uCD94\uAC00 \uC815\uBCF4" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { style: labelStyle, children: "\uCD94\uAC00 \uC815\uBCF4" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                         "textarea",
                         {
                           value: personalization.userProfile.additionalInfo || "",
@@ -7275,63 +7796,83 @@ var SettingsModal = ({
                     ] })
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("section", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h3", { style: { fontSize: "14px", fontWeight: 500, color: "var(--chatllm-text-muted, #6b7280)", marginBottom: "16px" }, children: "\uC751\uB2F5 \uC2A4\uD0C0\uC77C" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SettingRow, { label: "\uB530\uB73B\uD568", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("section", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { style: { fontSize: "14px", fontWeight: 500, color: "var(--chatllm-text-muted, #6b7280)", marginBottom: "16px" }, children: "\uC751\uB2F5 \uC2A4\uD0C0\uC77C" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SettingRow, { label: "\uB530\uB73B\uD568", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
                     "select",
                     {
                       value: personalization.responseStyle.warmth,
                       onChange: (e) => updateResponseStyle("warmth", e.target.value),
                       style: selectStyle,
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "high", children: "\uB192\uC74C - \uCE5C\uADFC\uD558\uACE0 \uB530\uB73B\uD558\uAC8C" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "medium", children: "\uAE30\uBCF8\uAC12" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "low", children: "\uB0AE\uC74C - \uAC04\uACB0\uD558\uACE0 \uC0AC\uBB34\uC801\uC73C\uB85C" })
+                        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: "high", children: "\uB192\uC74C - \uCE5C\uADFC\uD558\uACE0 \uB530\uB73B\uD558\uAC8C" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: "medium", children: "\uAE30\uBCF8\uAC12" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: "low", children: "\uB0AE\uC74C - \uAC04\uACB0\uD558\uACE0 \uC0AC\uBB34\uC801\uC73C\uB85C" })
                       ]
                     }
                   ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SettingRow, { label: "\uC5F4\uC815\uC801", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SettingRow, { label: "\uC5F4\uC815\uC801", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
                     "select",
                     {
                       value: personalization.responseStyle.enthusiasm,
                       onChange: (e) => updateResponseStyle("enthusiasm", e.target.value),
                       style: selectStyle,
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "high", children: "\uB192\uC74C - \uC801\uADF9\uC801\uC774\uACE0 \uD65C\uBC1C\uD558\uAC8C" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "medium", children: "\uAE30\uBCF8\uAC12" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "low", children: "\uB0AE\uC74C - \uCC28\uBD84\uD558\uACE0 \uC808\uC81C\uC788\uAC8C" })
+                        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: "high", children: "\uB192\uC74C - \uC801\uADF9\uC801\uC774\uACE0 \uD65C\uBC1C\uD558\uAC8C" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: "medium", children: "\uAE30\uBCF8\uAC12" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: "low", children: "\uB0AE\uC74C - \uCC28\uBD84\uD558\uACE0 \uC808\uC81C\uC788\uAC8C" })
                       ]
                     }
                   ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SettingRow, { label: "\uC774\uBAA8\uC9C0 \uC0AC\uC6A9", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SettingRow, { label: "\uC774\uBAA8\uC9C0 \uC0AC\uC6A9", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
                     "select",
                     {
                       value: personalization.responseStyle.emojiUsage,
                       onChange: (e) => updateResponseStyle("emojiUsage", e.target.value),
                       style: selectStyle,
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "high", children: "\uB192\uC74C - \uC790\uC8FC \uC0AC\uC6A9" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "medium", children: "\uAE30\uBCF8\uAC12" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "low", children: "\uB0AE\uC74C - \uAC70\uC758 \uC0AC\uC6A9 \uC548 \uD568" })
+                        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: "high", children: "\uB192\uC74C - \uC790\uC8FC \uC0AC\uC6A9" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: "medium", children: "\uAE30\uBCF8\uAC12" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: "low", children: "\uB0AE\uC74C - \uAC70\uC758 \uC0AC\uC6A9 \uC548 \uD568" })
                       ]
                     }
                   ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SettingRow, { label: "\uC751\uB2F5 \uAE38\uC774", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SettingRow, { label: "\uC751\uB2F5 \uAE38\uC774", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
                     "select",
                     {
                       value: personalization.responseStyle.verbosity,
                       onChange: (e) => updateResponseStyle("verbosity", e.target.value),
                       style: selectStyle,
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "detailed", children: "\uC0C1\uC138 - \uC790\uC138\uD558\uAC8C \uC124\uBA85" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "balanced", children: "\uAE30\uBCF8\uAC12" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "concise", children: "\uAC04\uACB0 - \uD575\uC2EC\uB9CC \uC694\uC57D" })
+                        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: "detailed", children: "\uC0C1\uC138 - \uC790\uC138\uD558\uAC8C \uC124\uBA85" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: "balanced", children: "\uAE30\uBCF8\uAC12" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: "concise", children: "\uAC04\uACB0 - \uD575\uC2EC\uB9CC \uC694\uC57D" })
                       ]
                     }
                   ) })
-                ] })
+                ] }),
+                onSave && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { marginTop: "24px", display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                  "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__ */ (0, import_jsx_runtime13.jsx)(
+              activeTab === "memory" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                 MemoryTabContent,
                 {
                   items: memoryItems,
@@ -7340,9 +7881,9 @@ var SettingsModal = ({
                   onClearAll: onClearMemory
                 }
               ),
-              activeTab === "data" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h2", { style: { fontSize: "20px", fontWeight: 600, marginBottom: "24px", color: "var(--chatllm-text, #1f2937)" }, children: "\uB370\uC774\uD130 \uC81C\uC5B4" }),
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SettingRow, { label: "\uBA54\uBAA8\uB9AC \uC0AC\uC6A9", description: "\uB300\uD654 \uCEE8\uD14D\uC2A4\uD2B8\uB97C \uAE30\uC5B5\uD569\uB2C8\uB2E4", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              activeTab === "data" && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h2", { style: { fontSize: "20px", fontWeight: 600, marginBottom: "24px", color: "var(--chatllm-text, #1f2937)" }, children: "\uB370\uC774\uD130 \uC81C\uC5B4" }),
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SettingRow, { label: "\uBA54\uBAA8\uB9AC \uC0AC\uC6A9", description: "\uB300\uD654 \uCEE8\uD14D\uC2A4\uD2B8\uB97C \uAE30\uC5B5\uD569\uB2C8\uB2E4", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                   "button",
                   {
                     onClick: () => onPersonalizationChange({ ...personalization, useMemory: !personalization.useMemory }),
@@ -7356,7 +7897,7 @@ var SettingsModal = ({
                       position: "relative",
                       transition: "background-color 0.2s"
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                       "div",
                       {
                         style: {
@@ -7374,7 +7915,7 @@ var SettingsModal = ({
                     )
                   }
                 ) }),
-                onClearAllData && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SettingRow, { label: "\uB300\uD654 \uAE30\uB85D \uC0AD\uC81C", description: "\uBAA8\uB4E0 \uB300\uD654 \uAE30\uB85D\uC744 \uC0AD\uC81C\uD569\uB2C8\uB2E4", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                onClearAllData && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SettingRow, { label: "\uB300\uD654 \uAE30\uB85D \uC0AD\uC81C", description: "\uBAA8\uB4E0 \uB300\uD654 \uAE30\uB85D\uC744 \uC0AD\uC81C\uD569\uB2C8\uB2E4", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                   "button",
                   {
                     onClick: () => {
@@ -7394,7 +7935,7 @@ var SettingsModal = ({
     }
   );
 };
-var TabButton = ({ active, onClick, icon, label }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+var TabButton = ({ active, onClick, icon, label }) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
   "button",
   {
     onClick,
@@ -7415,12 +7956,12 @@ var TabButton = ({ active, onClick, icon, label }) => /* @__PURE__ */ (0, import
       marginBottom: "4px"
     },
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(IconSvg, { name: icon, size: 20 }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconSvg, { name: icon, size: 20 }),
       label
     ]
   }
 );
-var SettingRow = ({ label, description, children }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+var SettingRow = ({ label, description, children }) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
   "div",
   {
     style: {
@@ -7431,9 +7972,9 @@ var SettingRow = ({ label, description, children }) => /* @__PURE__ */ (0, impor
       borderBottom: "1px solid var(--chatllm-border-light, #f3f4f6)"
     },
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { fontSize: "14px", color: "var(--chatllm-text, #374151)" }, children: label }),
-        description && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { style: { fontSize: "12px", color: "var(--chatllm-text-muted, #9ca3af)", marginTop: "2px" }, children: description })
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: { fontSize: "14px", color: "var(--chatllm-text, #374151)" }, children: label }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { style: { fontSize: "12px", color: "var(--chatllm-text-muted, #9ca3af)", marginTop: "2px" }, children: description })
       ] }),
       children
     ]
@@ -7493,8 +8034,8 @@ var memoryCategoryColors = {
   preference: "#8b5cf6"
 };
 var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll }) => {
-  const [activeFilter, setActiveFilter] = (0, import_react14.useState)("all");
-  const [expandedId, setExpandedId] = (0, import_react14.useState)(null);
+  const [activeFilter, setActiveFilter] = (0, import_react15.useState)("all");
+  const [expandedId, setExpandedId] = (0, import_react15.useState)(null);
   const filteredItems = activeFilter === "all" ? items : items.filter((item) => item.category === activeFilter);
   const formatDate = (timestamp) => {
     const date = new Date(timestamp);
@@ -7505,15 +8046,15 @@ var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll }) => {
       minute: "2-digit"
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "24px" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h2", { style: { fontSize: "20px", fontWeight: 600, color: "var(--chatllm-text, #1f2937)", margin: 0 }, children: "AI \uBA54\uBAA8\uB9AC" }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { style: { fontSize: "13px", color: "var(--chatllm-text-muted, #9ca3af)" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "24px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h2", { style: { fontSize: "20px", fontWeight: 600, color: "var(--chatllm-text, #1f2937)", margin: 0 }, children: "AI \uBA54\uBAA8\uB9AC" }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { style: { fontSize: "13px", color: "var(--chatllm-text-muted, #9ca3af)" }, children: [
         items.length,
         "\uAC1C \uD56D\uBAA9"
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { display: "flex", gap: "6px", marginBottom: "20px", flexWrap: "wrap" }, children: ["all", "fact", "skill", "preference"].map((tab) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { display: "flex", gap: "6px", marginBottom: "20px", flexWrap: "wrap" }, children: ["all", "fact", "skill", "preference"].map((tab) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "button",
       {
         onClick: () => setActiveFilter(tab),
@@ -7531,7 +8072,7 @@ var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll }) => {
       },
       tab
     )) }),
-    contextSummary && activeFilter === "all" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    contextSummary && activeFilter === "all" && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
       "div",
       {
         style: {
@@ -7542,19 +8083,19 @@ var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll }) => {
           borderLeft: "3px solid var(--chatllm-primary, #3b82f6)"
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "6px", marginBottom: "8px" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(IconSvg, { name: "file-text-line", size: 14, color: "var(--chatllm-primary, #3b82f6)" }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { fontSize: "12px", fontWeight: 500, color: "var(--chatllm-primary, #3b82f6)" }, children: "\uB300\uD654 \uC694\uC57D" })
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "6px", marginBottom: "8px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconSvg, { name: "file-text-line", size: 14, color: "var(--chatllm-primary, #3b82f6)" }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: { fontSize: "12px", fontWeight: 500, color: "var(--chatllm-primary, #3b82f6)" }, children: "\uB300\uD654 \uC694\uC57D" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { style: { fontSize: "13px", lineHeight: "1.6", color: "var(--chatllm-text, #374151)", margin: 0 }, children: contextSummary })
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { style: { fontSize: "13px", lineHeight: "1.6", color: "var(--chatllm-text, #374151)", margin: 0 }, children: contextSummary })
         ]
       }
     ),
-    filteredItems.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { padding: "40px 16px", textAlign: "center" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(IconSvg, { name: "robot-line", size: 40, color: "var(--chatllm-text-muted, #d1d5db)" }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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__ */ (0, import_jsx_runtime13.jsx)("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__ */ (0, import_jsx_runtime13.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: filteredItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    filteredItems.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { padding: "40px 16px", textAlign: "center" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconSvg, { name: "robot-line", size: 40, color: "var(--chatllm-text-muted, #d1d5db)" }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("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__ */ (0, import_jsx_runtime16.jsx)("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__ */ (0, import_jsx_runtime16.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: filteredItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
       "div",
       {
         style: {
@@ -7567,10 +8108,10 @@ var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll }) => {
         },
         onClick: () => setExpandedId(expandedId === item.id ? null : item.id),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginBottom: "4px" }, children: [
-                item.category && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginBottom: "4px" }, children: [
+                item.category && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                   "span",
                   {
                     style: {
@@ -7584,12 +8125,12 @@ var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll }) => {
                     children: memoryCategoryLabels[item.category]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { fontSize: "11px", color: "var(--chatllm-text-muted, #9ca3af)" }, children: formatDate(item.timestamp) })
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: { fontSize: "11px", color: "var(--chatllm-text-muted, #9ca3af)" }, children: formatDate(item.timestamp) })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { fontSize: "13px", fontWeight: 500, color: "var(--chatllm-text, #1f2937)" }, children: item.key })
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { fontSize: "13px", fontWeight: 500, color: "var(--chatllm-text, #1f2937)" }, children: item.key })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
-              onDelete && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+              onDelete && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                 "button",
                 {
                   onClick: (e) => {
@@ -7605,10 +8146,10 @@ var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll }) => {
                     opacity: 0.5
                   },
                   "aria-label": "\uBA54\uBAA8\uB9AC \uC0AD\uC81C",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(IconSvg, { name: "delete-bin-line", size: 14, color: "var(--chatllm-text-muted, #9ca3af)" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconSvg, { name: "delete-bin-line", size: 14, color: "var(--chatllm-text-muted, #9ca3af)" })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                 IconSvg,
                 {
                   name: expandedId === item.id ? "arrow-up-s-line" : "arrow-down-s-line",
@@ -7618,7 +8159,7 @@ var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll }) => {
               )
             ] })
           ] }),
-          expandedId === item.id && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          expandedId === item.id && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "div",
             {
               style: {
@@ -7626,7 +8167,7 @@ var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll }) => {
                 paddingTop: "12px",
                 borderTop: "1px solid var(--chatllm-border-light, #f3f4f6)"
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                 "p",
                 {
                   style: {
@@ -7645,7 +8186,7 @@ var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll }) => {
       },
       item.id
     )) }),
-    onClearAll && items.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { marginTop: "24px", paddingTop: "16px", borderTop: "1px solid var(--chatllm-border, #e5e7eb)" }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    onClearAll && items.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { marginTop: "24px", paddingTop: "16px", borderTop: "1px solid var(--chatllm-border, #e5e7eb)" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "button",
       {
         onClick: () => {
@@ -7661,7 +8202,7 @@ var MemoryTabContent = ({ items, contextSummary, onDelete, onClearAll }) => {
 };
 
 // src/react/ChatUI.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var DEFAULT_ACTIONS = [];
 var DEFAULT_TEMPLATES = [];
 var DEFAULT_MODELS = [
@@ -7944,6 +8485,7 @@ var ChatUIView = ({
     activeAlternatives,
     loadingAlternativeFor,
     updatePersonalization,
+    savePersonalization,
     models: hookModels,
     isDeepResearchMode,
     toggleDeepResearchMode,
@@ -7967,7 +8509,7 @@ var ChatUIView = ({
   const handleChoiceClick = (choice) => {
     setInput(choice.text);
   };
-  const memoryItems = import_react15.default.useMemo(() => {
+  const memoryItems = import_react16.default.useMemo(() => {
     if (!globalMemory?.state.entries) return [];
     const items = [];
     for (const [key, entry] of globalMemory.state.entries) {
@@ -7982,7 +8524,7 @@ var ChatUIView = ({
     return items;
   }, [globalMemory?.state.entries]);
   const themeClass = theme?.mode === "dark" ? "chatllm-dark" : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     "div",
     {
       className: `chatllm-root ${themeClass} ${className}`,
@@ -7995,7 +8537,7 @@ var ChatUIView = ({
         position: "relative"
       },
       children: [
-        showSidebar && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        showSidebar && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           ChatSidebar,
           {
             sessions,
@@ -8010,7 +8552,7 @@ var ChatUIView = ({
             theme: theme?.mode
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
           "main",
           {
             style: {
@@ -8022,7 +8564,7 @@ var ChatUIView = ({
               minWidth: 0
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                 ChatHeader,
                 {
                   title: currentSession?.title || "\uC0C8 \uB300\uD654",
@@ -8036,7 +8578,7 @@ var ChatUIView = ({
                   showSettings
                 }
               ),
-              messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                 EmptyState,
                 {
                   greeting,
@@ -8045,7 +8587,7 @@ var ChatUIView = ({
                   actions,
                   onActionSelect: handleActionSelect
                 }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              ) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                 MessageList,
                 {
                   messages,
@@ -8067,7 +8609,7 @@ var ChatUIView = ({
                   onPollSubmit: handlePollSubmit
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                 ChatInput,
                 {
                   value: input,
@@ -8093,7 +8635,7 @@ var ChatUIView = ({
             ]
           }
         ),
-        showSettings && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        showSettings && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           SettingsModal,
           {
             isOpen: settingsOpen,
@@ -8110,7 +8652,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
           }
         )
       ]
@@ -8123,6 +8666,7 @@ var ChatUIWithHook = ({
   templates = DEFAULT_TEMPLATES,
   personalization,
   onPersonalizationChange,
+  onPersonalizationSave,
   apiKey,
   onApiKeyChange,
   apiEndpoint = "/api/chat",
@@ -8152,13 +8696,16 @@ var ChatUIWithHook = ({
   showThinking = true,
   thinkingDefaultOpen = false,
   deepResearch,
-  skills
+  skills,
+  tools,
+  onToolCall
 }) => {
   const hookOptions = {
     models,
     actions,
     initialPersonalization: personalization,
     onPersonalizationChange,
+    onPersonalizationSave,
     initialSessionId,
     apiKey,
     apiEndpoint,
@@ -8179,10 +8726,12 @@ var ChatUIWithHook = ({
     onUpdateSessionTitle,
     onSaveMessages,
     deepResearch,
-    skills
+    skills,
+    tools,
+    onToolCall
   };
   const state = useChatUI(hookOptions);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     ChatUIView,
     {
       state,
@@ -8222,7 +8771,7 @@ var ChatUI = (props) => {
       onApiKeyChange,
       deepResearch
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       ChatUIView,
       {
         state: props.chatState,
@@ -8243,11 +8792,11 @@ var ChatUI = (props) => {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ChatUIWithHook, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ChatUIWithHook, { ...props });
 };
 
 // src/react/hooks/useDeepResearch.ts
-var import_react16 = require("react");
+var import_react17 = require("react");
 var REPORT_GENERATION_PROMPT2 = `\uB2F9\uC2E0\uC740 \uB9AC\uC11C\uCE58 \uBCF4\uACE0\uC11C \uC791\uC131 \uC804\uBB38\uAC00\uC785\uB2C8\uB2E4.
 
 <collected_sources>
@@ -8298,10 +8847,10 @@ var QUERY_ANALYSIS_PROMPT2 = `\uC0AC\uC6A9\uC790 \uC9C8\uBB38\uC744 \uBD84\uC11D
 - JSON \uC678 \uB2E4\uB978 \uD14D\uC2A4\uD2B8 \uCD9C\uB825 \uAE08\uC9C0`;
 var useDeepResearch = (options) => {
   const { onWebSearch, onExtractContent, apiEndpoint, apiKey, model, provider } = options;
-  const [isResearching, setIsResearching] = (0, import_react16.useState)(false);
-  const [progress, setProgress] = (0, import_react16.useState)(null);
-  const abortControllerRef = (0, import_react16.useRef)(null);
-  const callLLM2 = (0, import_react16.useCallback)(
+  const [isResearching, setIsResearching] = (0, import_react17.useState)(false);
+  const [progress, setProgress] = (0, import_react17.useState)(null);
+  const abortControllerRef = (0, import_react17.useRef)(null);
+  const callLLM2 = (0, import_react17.useCallback)(
     async (prompt, stream = false) => {
       const response = await fetch(apiEndpoint, {
         method: "POST",
@@ -8328,7 +8877,7 @@ var useDeepResearch = (options) => {
     },
     [apiEndpoint, apiKey, model, provider]
   );
-  const analyzeQuery2 = (0, import_react16.useCallback)(
+  const analyzeQuery2 = (0, import_react17.useCallback)(
     async (query) => {
       const prompt = QUERY_ANALYSIS_PROMPT2.replace("{question}", query);
       const response = await callLLM2(prompt);
@@ -8347,7 +8896,7 @@ var useDeepResearch = (options) => {
     },
     [callLLM2]
   );
-  const runSubAgent2 = (0, import_react16.useCallback)(
+  const runSubAgent2 = (0, import_react17.useCallback)(
     async (topic, queries, agentId, updateProgress) => {
       updateProgress({ status: "searching", searchCount: 0, resultsCount: 0 });
       const allResults = [];
@@ -8386,7 +8935,7 @@ var useDeepResearch = (options) => {
     },
     [onWebSearch, onExtractContent]
   );
-  const generateReport2 = (0, import_react16.useCallback)(
+  const generateReport2 = (0, import_react17.useCallback)(
     async (query, results, onStreamContent) => {
       const allSources = [];
       const sourcesForPrompt = [];
@@ -8444,7 +8993,7 @@ var useDeepResearch = (options) => {
     },
     [callLLM2]
   );
-  const runDeepResearch = (0, import_react16.useCallback)(
+  const runDeepResearch = (0, import_react17.useCallback)(
     async (query, onStreamContent) => {
       abortControllerRef.current = new AbortController();
       setIsResearching(true);
@@ -8547,7 +9096,7 @@ var useDeepResearch = (options) => {
     },
     [analyzeQuery2, runSubAgent2, generateReport2]
   );
-  const stopResearch = (0, import_react16.useCallback)(() => {
+  const stopResearch = (0, import_react17.useCallback)(() => {
     abortControllerRef.current?.abort();
     setIsResearching(false);
     setProgress(null);
@@ -8561,8 +9110,8 @@ var useDeepResearch = (options) => {
 };
 
 // src/react/components/MemoryPanel.tsx
-var import_react17 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_react18 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var categoryLabels = {
   fact: "\uC0AC\uC6A9\uC790 \uC815\uBCF4",
   skill: "\uC804\uBB38 \uBD84\uC57C/\uAE30\uC220",
@@ -8581,8 +9130,8 @@ var MemoryPanel = ({
   isOpen,
   onToggle
 }) => {
-  const [expandedId, setExpandedId] = (0, import_react17.useState)(null);
-  const [activeTab, setActiveTab] = (0, import_react17.useState)("all");
+  const [expandedId, setExpandedId] = (0, import_react18.useState)(null);
+  const [activeTab, setActiveTab] = (0, import_react18.useState)("all");
   const filteredItems = activeTab === "all" ? items : items.filter((item) => item.category === activeTab);
   const formatDate = (timestamp) => {
     const date = new Date(timestamp);
@@ -8594,7 +9143,7 @@ var MemoryPanel = ({
     });
   };
   if (!isOpen) {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "button",
       {
         onClick: onToggle,
@@ -8614,11 +9163,11 @@ var MemoryPanel = ({
           justifyContent: "center",
           zIndex: 100
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconSvg, { name: "robot-line", size: 24, color: "#ffffff" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IconSvg, { name: "robot-line", size: 24, color: "#ffffff" })
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "div",
     {
       className: "chatllm-memory-panel",
@@ -8638,7 +9187,7 @@ var MemoryPanel = ({
         zIndex: 100
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
           "div",
           {
             style: {
@@ -8649,8 +9198,8 @@ var MemoryPanel = ({
               borderBottom: "1px solid var(--chatllm-border, #e5e7eb)"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "10px" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "10px" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                   "div",
                   {
                     style: {
@@ -8662,19 +9211,19 @@ var MemoryPanel = ({
                       alignItems: "center",
                       justifyContent: "center"
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconSvg, { name: "robot-line", size: 18, color: "var(--chatllm-primary, #3b82f6)" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IconSvg, { name: "robot-line", size: 18, color: "var(--chatllm-primary, #3b82f6)" })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { fontSize: "15px", fontWeight: 600, color: "var(--chatllm-text, #1f2937)" }, children: "AI \uBA54\uBAA8\uB9AC" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { fontSize: "12px", color: "var(--chatllm-text-muted, #9ca3af)" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { fontSize: "15px", fontWeight: 600, color: "var(--chatllm-text, #1f2937)" }, children: "AI \uBA54\uBAA8\uB9AC" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { fontSize: "12px", color: "var(--chatllm-text-muted, #9ca3af)" }, children: [
                     items.length,
                     "\uAC1C \uD56D\uBAA9"
                   ] })
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { display: "flex", gap: "4px" }, children: [
-                onClearAll && items.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", gap: "4px" }, children: [
+                onClearAll && items.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                   "button",
                   {
                     onClick: onClearAll,
@@ -8686,10 +9235,10 @@ var MemoryPanel = ({
                       cursor: "pointer"
                     },
                     title: "\uC804\uCCB4 \uC0AD\uC81C",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconSvg, { name: "delete-bin-line", size: 18, color: "var(--chatllm-text-muted, #9ca3af)" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IconSvg, { name: "delete-bin-line", size: 18, color: "var(--chatllm-text-muted, #9ca3af)" })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                   "button",
                   {
                     onClick: onToggle,
@@ -8700,14 +9249,14 @@ var MemoryPanel = ({
                       borderRadius: "8px",
                       cursor: "pointer"
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconSvg, { name: "close-line", size: 18, color: "var(--chatllm-text-muted, #9ca3af)" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IconSvg, { name: "close-line", size: 18, color: "var(--chatllm-text-muted, #9ca3af)" })
                   }
                 )
               ] })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "div",
           {
             style: {
@@ -8717,7 +9266,7 @@ var MemoryPanel = ({
               borderBottom: "1px solid var(--chatllm-border-light, #f3f4f6)",
               overflowX: "auto"
             },
-            children: ["all", "fact", "skill", "preference"].map((tab) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            children: ["all", "fact", "skill", "preference"].map((tab) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
               "button",
               {
                 onClick: () => setActiveTab(tab),
@@ -8738,8 +9287,8 @@ var MemoryPanel = ({
             ))
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { flex: 1, overflow: "auto", padding: "12px" }, children: [
-          contextSummary && activeTab === "all" && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { flex: 1, overflow: "auto", padding: "12px" }, children: [
+          contextSummary && activeTab === "all" && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
             "div",
             {
               style: {
@@ -8750,7 +9299,7 @@ var MemoryPanel = ({
                 borderLeft: "3px solid var(--chatllm-primary, #3b82f6)"
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
                   "div",
                   {
                     style: {
@@ -8760,12 +9309,12 @@ var MemoryPanel = ({
                       marginBottom: "8px"
                     },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconSvg, { name: "file-text-line", size: 14, color: "var(--chatllm-primary, #3b82f6)" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { style: { fontSize: "12px", fontWeight: 500, color: "var(--chatllm-primary, #3b82f6)" }, children: "\uB300\uD654 \uC694\uC57D" })
+                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IconSvg, { name: "file-text-line", size: 14, color: "var(--chatllm-primary, #3b82f6)" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { style: { fontSize: "12px", fontWeight: 500, color: "var(--chatllm-primary, #3b82f6)" }, children: "\uB300\uD654 \uC694\uC57D" })
                     ]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                   "p",
                   {
                     style: {
@@ -8780,7 +9329,7 @@ var MemoryPanel = ({
               ]
             }
           ),
-          filteredItems.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          filteredItems.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
             "div",
             {
               style: {
@@ -8789,11 +9338,11 @@ var MemoryPanel = ({
                 color: "var(--chatllm-text-muted, #9ca3af)"
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconSvg, { name: "robot-line", size: 32, color: "var(--chatllm-text-muted, #d1d5db)" }),
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { style: { fontSize: "14px", marginTop: "12px" }, children: "\uC800\uC7A5\uB41C \uBA54\uBAA8\uB9AC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" })
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IconSvg, { name: "robot-line", size: 32, color: "var(--chatllm-text-muted, #d1d5db)" }),
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { style: { fontSize: "14px", marginTop: "12px" }, children: "\uC800\uC7A5\uB41C \uBA54\uBAA8\uB9AC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" })
               ]
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: filteredItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: filteredItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
             "div",
             {
               style: {
@@ -8806,10 +9355,10 @@ var MemoryPanel = ({
               },
               onClick: () => setExpandedId(expandedId === item.id ? null : item.id),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between" }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginBottom: "4px" }, children: [
-                      item.category && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginBottom: "4px" }, children: [
+                      item.category && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                         "span",
                         {
                           style: {
@@ -8823,9 +9372,9 @@ var MemoryPanel = ({
                           children: categoryLabels[item.category]
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { style: { fontSize: "11px", color: "var(--chatllm-text-muted, #9ca3af)" }, children: formatDate(item.timestamp) })
+                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { style: { fontSize: "11px", color: "var(--chatllm-text-muted, #9ca3af)" }, children: formatDate(item.timestamp) })
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                       "div",
                       {
                         style: {
@@ -8837,8 +9386,8 @@ var MemoryPanel = ({
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
-                    onDelete && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+                    onDelete && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                       "button",
                       {
                         onClick: (e) => {
@@ -8853,10 +9402,10 @@ var MemoryPanel = ({
                           cursor: "pointer",
                           opacity: 0.5
                         },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconSvg, { name: "delete-bin-line", size: 14, color: "var(--chatllm-text-muted, #9ca3af)" })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IconSvg, { name: "delete-bin-line", size: 14, color: "var(--chatllm-text-muted, #9ca3af)" })
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                       IconSvg,
                       {
                         name: expandedId === item.id ? "arrow-up-s-line" : "arrow-down-s-line",
@@ -8866,7 +9415,7 @@ var MemoryPanel = ({
                     )
                   ] })
                 ] }),
-                expandedId === item.id && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                expandedId === item.id && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                   "div",
                   {
                     style: {
@@ -8874,7 +9423,7 @@ var MemoryPanel = ({
                       paddingTop: "12px",
                       borderTop: "1px solid var(--chatllm-border-light, #f3f4f6)"
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                       "p",
                       {
                         style: {
@@ -8904,10 +9453,13 @@ var MemoryPanel = ({
   ChatInput,
   ChatSidebar,
   ChatUI,
+  ContentPartRenderer,
   DeepResearchProgressUI,
   EmptyState,
+  FileContentCard,
   Icon,
   IconSvg,
+  ImageContentCard,
   LinkChip,
   MarkdownRenderer,
   MemoryPanel,
@@ -8916,6 +9468,7 @@ var MemoryPanel = ({
   PollCard,
   SettingsModal,
   SkillProgressUI,
+  convertToolsToSkills,
   createAdvancedResearchSkill,
   createDeepResearchSkill,
   useChatUI,