@gendive/chatllm 0.2.0 → 0.3.1

package/dist/react/index.mjs

@@ -1,5 +1,5 @@
 // src/react/ChatUI.tsx
-import React6, { useState as useState7 } from "react";
+import React9, { useState as useState9 } from "react";
 
 // src/react/hooks/useChatUI.ts
 import { useState, useRef, useCallback, useEffect } from "react";
@@ -563,6 +563,7 @@ var IconSvg = ({
   size = 20,
   color = "currentColor",
   className = "",
+  style,
   onClick,
   "aria-label": ariaLabel
 }) => {
@@ -594,7 +595,11 @@ var IconSvg = ({
     "user-3-line": /* @__PURE__ */ jsx("path", { d: "M20 22h-2v-2a3 3 0 0 0-3-3H9a3 3 0 0 0-3 3v2H4v-2a5 5 0 0 1 5-5h6a5 5 0 0 1 5 5v2zm-8-9a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8z" }),
     "sun-line": /* @__PURE__ */ jsx("path", { d: "M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z" }),
     "moon-line": /* @__PURE__ */ jsx("path", { d: "M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2h.1A6.979 6.979 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938 7.999 7.999 0 0 0 4 12z" }),
-    "key-line": /* @__PURE__ */ jsx("path", { d: "M12.917 13A6.002 6.002 0 0 1 1 12a6 6 0 0 1 11.917-1H23v6h-2v-4h-2v4h-2v-4h-4.083zM7 10a2 2 0 1 0 0 4 2 2 0 0 0 0-4z" })
+    "key-line": /* @__PURE__ */ jsx("path", { d: "M12.917 13A6.002 6.002 0 0 1 1 12a6 6 0 0 1 11.917-1H23v6h-2v-4h-2v4h-2v-4h-4.083zM7 10a2 2 0 1 0 0 4 2 2 0 0 0 0-4z" }),
+    "links-line": /* @__PURE__ */ jsx("path", { d: "M17.657 14.828l-1.414-1.414L17.657 12A4 4 0 1 0 12 6.343l-1.414 1.414-1.414-1.414 1.414-1.414a6 6 0 0 1 8.485 8.485l-1.414 1.414zm-2.829 2.829l-1.414 1.414a6 6 0 1 1-8.485-8.485l1.414-1.414 1.414 1.414L6.343 12A4 4 0 1 0 12 17.657l1.414-1.414 1.414 1.414zm0-9.9l1.415 1.415-7.071 7.07-1.415-1.414 7.071-7.07z" }),
+    "external-link-line": /* @__PURE__ */ jsx("path", { d: "M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794-1.414-1.414L17.585 5H13V3h8z" }),
+    "arrow-left-line": /* @__PURE__ */ jsx("path", { d: "M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z" }),
+    "arrow-right-line": /* @__PURE__ */ jsx("path", { d: "M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" })
   };
   const iconPath = icons[name];
   return /* @__PURE__ */ jsx(
@@ -609,7 +614,7 @@ var IconSvg = ({
       "aria-label": ariaLabel,
       role: onClick ? "button" : "img",
       tabIndex: onClick ? 0 : void 0,
-      style: { display: "inline-block", verticalAlign: "middle" },
+      style: { display: "inline-block", verticalAlign: "middle", ...style },
       children: iconPath || /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" })
     }
   );
@@ -1408,11 +1413,568 @@ var ChatInput = ({
 };
 
 // src/react/components/MessageList.tsx
-import { useRef as useRef3, useEffect as useEffect3, useCallback as useCallback2, useState as useState5 } from "react";
+import { useRef as useRef3, useEffect as useEffect3, useCallback as useCallback2, useState as useState6 } from "react";
 
 // src/react/components/MessageBubble.tsx
+import { useState as useState5 } from "react";
+
+// src/react/components/MarkdownRenderer.tsx
+import React4, { useMemo } from "react";
+
+// src/react/components/LinkChip.tsx
 import { useState as useState4 } from "react";
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var getDomain = (url) => {
+  try {
+    const urlObj = new URL(url);
+    return urlObj.hostname.replace("www.", "");
+  } catch {
+    return url;
+  }
+};
+var getShortName = (domain) => {
+  const parts = domain.split(".");
+  if (parts.length >= 2) {
+    return parts[parts.length - 2];
+  }
+  return domain;
+};
+var getDomainColor = (domain) => {
+  const lowerDomain = domain.toLowerCase();
+  const colorMap = {
+    "google": "#4285f4",
+    "wikipedia": "#000000",
+    "github": "#24292e",
+    "stackoverflow": "#f48024",
+    "medium": "#00ab6c",
+    "youtube": "#ff0000",
+    "twitter": "#1da1f2",
+    "naver": "#03c75a",
+    "namu": "#00a495",
+    "tistory": "#eb531f",
+    "velog": "#20c997",
+    "brave": "#fb542b",
+    "mk": "#0066cc",
+    "ko": "#3366cc"
+  };
+  for (const [key, color] of Object.entries(colorMap)) {
+    if (lowerDomain.includes(key)) {
+      return color;
+    }
+  }
+  let hash = 0;
+  for (let i = 0; i < domain.length; i++) {
+    hash = domain.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  const hue = hash % 360;
+  return `hsl(${hue}, 60%, 45%)`;
+};
+var LinkChip = ({
+  text,
+  url,
+  showFavicon = true,
+  index,
+  style
+}) => {
+  const [isHovered, setIsHovered] = useState4(false);
+  const domain = getDomain(url);
+  const shortName = getShortName(domain);
+  const domainColor = getDomainColor(domain);
+  const parseText = (t) => {
+    const match = t.match(/^(\d+)\.\s*(.+)$/);
+    if (match) {
+      return { number: match[1], label: match[2] };
+    }
+    return { label: t };
+  };
+  const parsed = parseText(text);
+  const displayNumber = index !== void 0 ? String(index + 1) : parsed.number;
+  const displayLabel = parsed.label;
+  return /* @__PURE__ */ jsxs4(
+    "a",
+    {
+      href: url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "6px",
+        padding: "4px 10px",
+        backgroundColor: isHovered ? "var(--chatllm-chip-bg-hover, #e2e8f0)" : "var(--chatllm-chip-bg, #f1f5f9)",
+        border: "1px solid var(--chatllm-chip-border, #e2e8f0)",
+        borderRadius: "16px",
+        textDecoration: "none",
+        fontSize: "13px",
+        fontWeight: 500,
+        color: "var(--chatllm-chip-text, #475569)",
+        transition: "all 0.15s ease",
+        cursor: "pointer",
+        maxWidth: "180px",
+        ...style
+      },
+      title: `${displayLabel} - ${domain}`,
+      children: [
+        displayNumber && /* @__PURE__ */ jsx5(
+          "span",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: "18px",
+              height: "18px",
+              borderRadius: "50%",
+              backgroundColor: domainColor,
+              color: "#ffffff",
+              fontSize: "11px",
+              fontWeight: 600,
+              flexShrink: 0
+            },
+            children: displayNumber
+          }
+        ),
+        showFavicon && !displayNumber && /* @__PURE__ */ jsx5(
+          "span",
+          {
+            style: {
+              width: "16px",
+              height: "16px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: 0
+            },
+            children: /* @__PURE__ */ jsx5(
+              IconSvg,
+              {
+                name: "links-line",
+                size: 14,
+                color: domainColor
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          "span",
+          {
+            style: {
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap"
+            },
+            children: displayLabel
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          IconSvg,
+          {
+            name: "external-link-line",
+            size: 12,
+            color: "var(--chatllm-text-muted, #94a3b8)",
+            style: {
+              opacity: isHovered ? 1 : 0.6,
+              flexShrink: 0
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/react/components/MarkdownRenderer.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var LINK_REGEX = /\[([^\]]+)\]\(([^)]+)\)/g;
+var SOURCE_LINKS_REGEX = /(\*{0,2}출처:?\*{0,2}\s*)?((?:\[`?[^\]]+`?\]\([^)]+\)\s*)+)/gi;
+var CODE_BLOCK_REGEX = /```(\w*)\n?([\s\S]*?)```/g;
+var INLINE_CODE_REGEX = /`([^`]+)`/g;
+var BOLD_REGEX = /\*\*([^*]+)\*\*/g;
+var ITALIC_REGEX = /(?<!\*)\*([^*]+)\*(?!\*)/g;
+var HR_REGEX = /^---+$/gm;
+var parseSourceLinks = (text) => {
+  const links = [];
+  let match;
+  const linkRegex = /\[`?([^\]`]+)`?\]\(([^)]+)\)/g;
+  while ((match = linkRegex.exec(text)) !== null) {
+    links.push({
+      text: match[1],
+      url: match[2]
+    });
+  }
+  return links;
+};
+var parseInlineElements = (text, key) => {
+  const elements = [];
+  let lastIndex = 0;
+  let currentText = text;
+  currentText = currentText.replace(INLINE_CODE_REGEX, "\xA7CODE\xA7$1\xA7/CODE\xA7");
+  currentText = currentText.replace(BOLD_REGEX, "\xA7BOLD\xA7$1\xA7/BOLD\xA7");
+  currentText = currentText.replace(ITALIC_REGEX, "\xA7ITALIC\xA7$1\xA7/ITALIC\xA7");
+  currentText = currentText.replace(LINK_REGEX, "\xA7LINK\xA7$1\xA7URL\xA7$2\xA7/LINK\xA7");
+  const parts = currentText.split(/(§CODE§.*?§\/CODE§|§BOLD§.*?§\/BOLD§|§ITALIC§.*?§\/ITALIC§|§LINK§.*?§\/LINK§)/);
+  parts.forEach((part, index) => {
+    if (part.startsWith("\xA7CODE\xA7")) {
+      const content = part.replace("\xA7CODE\xA7", "").replace("\xA7/CODE\xA7", "");
+      elements.push(
+        /* @__PURE__ */ jsx6(
+          "code",
+          {
+            style: {
+              backgroundColor: "var(--chatllm-code-bg, #f3f4f6)",
+              padding: "2px 6px",
+              borderRadius: "4px",
+              fontSize: "0.9em",
+              fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+              color: "var(--chatllm-code-text, #e11d48)"
+            },
+            children: content
+          },
+          `${key}-code-${index}`
+        )
+      );
+    } else if (part.startsWith("\xA7BOLD\xA7")) {
+      const content = part.replace("\xA7BOLD\xA7", "").replace("\xA7/BOLD\xA7", "");
+      elements.push(/* @__PURE__ */ jsx6("strong", { children: content }, `${key}-bold-${index}`));
+    } else if (part.startsWith("\xA7ITALIC\xA7")) {
+      const content = part.replace("\xA7ITALIC\xA7", "").replace("\xA7/ITALIC\xA7", "");
+      elements.push(/* @__PURE__ */ jsx6("em", { children: content }, `${key}-italic-${index}`));
+    } else if (part.startsWith("\xA7LINK\xA7")) {
+      const match = part.match(/§LINK§(.+?)§URL§(.+?)§\/LINK§/);
+      if (match) {
+        elements.push(
+          /* @__PURE__ */ jsx6(
+            "a",
+            {
+              href: match[2],
+              target: "_blank",
+              rel: "noopener noreferrer",
+              style: {
+                color: "var(--chatllm-link, #3b82f6)",
+                textDecoration: "none"
+              },
+              children: match[1]
+            },
+            `${key}-link-${index}`
+          )
+        );
+      }
+    } else if (part) {
+      elements.push(part);
+    }
+  });
+  return elements;
+};
+var CodeBlock = ({ language, code }) => {
+  const [copied, setCopied] = React4.useState(false);
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch (e) {
+      console.error("Failed to copy");
+    }
+  };
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      style: {
+        position: "relative",
+        margin: "12px 0",
+        borderRadius: "8px",
+        overflow: "hidden",
+        backgroundColor: "var(--chatllm-code-block-bg, #1f2937)"
+      },
+      children: [
+        /* @__PURE__ */ jsxs5(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              padding: "8px 12px",
+              backgroundColor: "var(--chatllm-code-block-header, #374151)",
+              borderBottom: "1px solid var(--chatllm-code-block-border, #4b5563)"
+            },
+            children: [
+              /* @__PURE__ */ jsx6(
+                "span",
+                {
+                  style: {
+                    fontSize: "12px",
+                    color: "var(--chatllm-code-block-lang, #9ca3af)",
+                    textTransform: "lowercase"
+                  },
+                  children: language || "code"
+                }
+              ),
+              /* @__PURE__ */ jsx6(
+                "button",
+                {
+                  onClick: handleCopy,
+                  style: {
+                    padding: "4px 8px",
+                    fontSize: "12px",
+                    backgroundColor: "transparent",
+                    border: "1px solid var(--chatllm-code-block-border, #4b5563)",
+                    borderRadius: "4px",
+                    color: "var(--chatllm-code-block-text, #e5e7eb)",
+                    cursor: "pointer"
+                  },
+                  children: copied ? "\uBCF5\uC0AC\uB428!" : "\uBCF5\uC0AC"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          "pre",
+          {
+            style: {
+              margin: 0,
+              padding: "16px",
+              overflow: "auto",
+              fontSize: "13px",
+              lineHeight: "1.6",
+              fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+              color: "var(--chatllm-code-block-text, #e5e7eb)"
+            },
+            children: /* @__PURE__ */ jsx6("code", { children: code.trim() })
+          }
+        )
+      ]
+    }
+  );
+};
+var SourceLinksSection = ({ links, label }) => {
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexWrap: "wrap",
+        alignItems: "center",
+        gap: "8px",
+        margin: "12px 0",
+        padding: "12px",
+        backgroundColor: "var(--chatllm-source-bg, #f8fafc)",
+        borderRadius: "8px",
+        border: "1px solid var(--chatllm-border-light, #e2e8f0)"
+      },
+      children: [
+        label && /* @__PURE__ */ jsx6(
+          "span",
+          {
+            style: {
+              fontSize: "13px",
+              fontWeight: 500,
+              color: "var(--chatllm-text-muted, #64748b)",
+              marginRight: "4px"
+            },
+            children: label
+          }
+        ),
+        links.map((link, index) => /* @__PURE__ */ jsx6(LinkChip, { text: link.text, url: link.url }, index))
+      ]
+    }
+  );
+};
+var MarkdownRenderer = ({ content, className }) => {
+  const rendered = useMemo(() => {
+    const elements = [];
+    let processedContent = content;
+    const codeBlocks = [];
+    processedContent = processedContent.replace(CODE_BLOCK_REGEX, (_, lang, code) => {
+      codeBlocks.push({ language: lang || "", code });
+      return `\xA7CODEBLOCK\xA7${codeBlocks.length - 1}\xA7/CODEBLOCK\xA7`;
+    });
+    const sourceSections = [];
+    processedContent = processedContent.replace(SOURCE_LINKS_REGEX, (match, label, linksText) => {
+      const links = parseSourceLinks(linksText);
+      if (links.length > 0) {
+        sourceSections.push({ label: label?.replace(/\*+/g, "").trim() || "\uCD9C\uCC98", links });
+        return `\xA7SOURCES\xA7${sourceSections.length - 1}\xA7/SOURCES\xA7`;
+      }
+      return match;
+    });
+    const lines = processedContent.split("\n");
+    let currentList = null;
+    let blockquoteLines = [];
+    const flushList = () => {
+      if (currentList) {
+        if (currentList.type === "ul") {
+          elements.push(
+            /* @__PURE__ */ jsx6("ul", { style: { margin: "8px 0", paddingLeft: "24px" }, children: currentList.items }, `ul-${elements.length}`)
+          );
+        } else {
+          elements.push(
+            /* @__PURE__ */ jsx6("ol", { style: { margin: "8px 0", paddingLeft: "24px" }, children: currentList.items }, `ol-${elements.length}`)
+          );
+        }
+        currentList = null;
+      }
+    };
+    const flushBlockquote = () => {
+      if (blockquoteLines.length > 0) {
+        elements.push(
+          /* @__PURE__ */ jsx6(
+            "blockquote",
+            {
+              style: {
+                margin: "12px 0",
+                padding: "12px 16px",
+                borderLeft: "4px solid var(--chatllm-primary, #3b82f6)",
+                backgroundColor: "var(--chatllm-bg-secondary, #f9fafb)",
+                borderRadius: "0 8px 8px 0",
+                color: "var(--chatllm-text, #374151)"
+              },
+              children: blockquoteLines.map((line, i) => /* @__PURE__ */ jsxs5(React4.Fragment, { children: [
+                parseInlineElements(line, `bq-line-${i}`),
+                i < blockquoteLines.length - 1 && /* @__PURE__ */ jsx6("br", {})
+              ] }, i))
+            },
+            `bq-${elements.length}`
+          )
+        );
+        blockquoteLines = [];
+      }
+    };
+    lines.forEach((line, lineIndex) => {
+      const codeBlockMatch = line.match(/§CODEBLOCK§(\d+)§\/CODEBLOCK§/);
+      if (codeBlockMatch) {
+        flushList();
+        flushBlockquote();
+        const index = parseInt(codeBlockMatch[1]);
+        elements.push(
+          /* @__PURE__ */ jsx6(CodeBlock, { ...codeBlocks[index] }, `codeblock-${lineIndex}`)
+        );
+        return;
+      }
+      const sourcesMatch = line.match(/§SOURCES§(\d+)§\/SOURCES§/);
+      if (sourcesMatch) {
+        flushList();
+        flushBlockquote();
+        const index = parseInt(sourcesMatch[1]);
+        elements.push(
+          /* @__PURE__ */ jsx6(SourceLinksSection, { ...sourceSections[index] }, `sources-${lineIndex}`)
+        );
+        return;
+      }
+      if (HR_REGEX.test(line)) {
+        flushList();
+        flushBlockquote();
+        elements.push(
+          /* @__PURE__ */ jsx6(
+            "hr",
+            {
+              style: {
+                margin: "16px 0",
+                border: "none",
+                borderTop: "1px solid var(--chatllm-border, #e5e7eb)"
+              }
+            },
+            `hr-${lineIndex}`
+          )
+        );
+        return;
+      }
+      const headingMatch = line.match(/^(#{1,6})\s+(.+)$/);
+      if (headingMatch) {
+        flushList();
+        flushBlockquote();
+        const level = headingMatch[1].length;
+        const text = headingMatch[2];
+        const HeadingTag = `h${level}`;
+        const sizes = {
+          1: "1.5em",
+          2: "1.3em",
+          3: "1.15em",
+          4: "1.05em",
+          5: "1em",
+          6: "0.95em"
+        };
+        elements.push(
+          /* @__PURE__ */ jsx6(
+            HeadingTag,
+            {
+              style: {
+                fontSize: sizes[level],
+                fontWeight: level <= 2 ? 600 : 500,
+                margin: "16px 0 8px",
+                color: "var(--chatllm-text, #1f2937)"
+              },
+              children: parseInlineElements(text, `heading-${lineIndex}`)
+            },
+            `heading-${lineIndex}`
+          )
+        );
+        return;
+      }
+      const blockquoteMatch = line.match(/^>\s*(.*)$/);
+      if (blockquoteMatch) {
+        flushList();
+        blockquoteLines.push(blockquoteMatch[1]);
+        return;
+      } else {
+        flushBlockquote();
+      }
+      const ulMatch = line.match(/^[\-\*]\s+(.+)$/);
+      if (ulMatch) {
+        flushBlockquote();
+        if (!currentList || currentList.type !== "ul") {
+          flushList();
+          currentList = { type: "ul", items: [] };
+        }
+        currentList.items.push(
+          /* @__PURE__ */ jsx6("li", { style: { margin: "4px 0" }, children: parseInlineElements(ulMatch[1], `li-${lineIndex}`) }, `li-${lineIndex}`)
+        );
+        return;
+      }
+      const olMatch = line.match(/^(\d+)\.\s+(.+)$/);
+      if (olMatch) {
+        flushBlockquote();
+        if (!currentList || currentList.type !== "ol") {
+          flushList();
+          currentList = { type: "ol", items: [] };
+        }
+        currentList.items.push(
+          /* @__PURE__ */ jsx6("li", { style: { margin: "4px 0" }, children: parseInlineElements(olMatch[2], `li-${lineIndex}`) }, `li-${lineIndex}`)
+        );
+        return;
+      }
+      flushList();
+      if (!line.trim()) {
+        elements.push(/* @__PURE__ */ jsx6("br", {}, `br-${lineIndex}`));
+        return;
+      }
+      elements.push(
+        /* @__PURE__ */ jsx6("p", { style: { margin: "4px 0" }, children: parseInlineElements(line, `p-${lineIndex}`) }, `p-${lineIndex}`)
+      );
+    });
+    flushList();
+    flushBlockquote();
+    return elements;
+  }, [content]);
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      className: `chatllm-markdown ${className || ""}`,
+      style: {
+        fontSize: "15px",
+        lineHeight: "1.7",
+        color: "var(--chatllm-text, #374151)"
+      },
+      children: rendered
+    }
+  );
+};
+
+// src/react/components/MessageBubble.tsx
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var MessageBubble = ({
   message,
   isLoading,
@@ -1426,7 +1988,7 @@ var MessageBubble = ({
   activeAlternativeIndex = 0,
   onAlternativeChange
 }) => {
-  const [showActions, setShowActions] = useState4(false);
+  const [showActions, setShowActions] = useState5(false);
   const isUser = message.role === "user";
   const isAssistant = message.role === "assistant";
   const displayContent = alternatives && alternatives.length > 0 && activeAlternativeIndex > 0 ? alternatives[activeAlternativeIndex - 1]?.content || message.content : message.content;
@@ -1438,7 +2000,7 @@ var MessageBubble = ({
     if (text && text.length > 0) {
     }
   };
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       className: `chatllm-message chatllm-message--${message.role}`,
@@ -1452,7 +2014,7 @@ var MessageBubble = ({
       onMouseLeave: () => setShowActions(false),
       onMouseUp: handleMouseUp,
       children: [
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx7(
           "div",
           {
             style: {
@@ -1465,7 +2027,7 @@ var MessageBubble = ({
               justifyContent: "center",
               flexShrink: 0
             },
-            children: /* @__PURE__ */ jsx5(
+            children: /* @__PURE__ */ jsx7(
               IconSvg,
               {
                 name: isUser ? "user-3-line" : "robot-line",
@@ -1475,8 +2037,8 @@ var MessageBubble = ({
             )
           }
         ),
-        /* @__PURE__ */ jsxs4("div", { style: { flex: 1, minWidth: 0 }, children: [
-          /* @__PURE__ */ jsxs4(
+        /* @__PURE__ */ jsxs6("div", { style: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ jsxs6(
             "div",
             {
               style: {
@@ -1486,7 +2048,7 @@ var MessageBubble = ({
                 marginBottom: "8px"
               },
               children: [
-                /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx7(
                   "span",
                   {
                     style: {
@@ -1497,7 +2059,7 @@ var MessageBubble = ({
                     children: isUser ? "\uB098" : "AI"
                   }
                 ),
-                displayModel && /* @__PURE__ */ jsx5(
+                displayModel && /* @__PURE__ */ jsx7(
                   "span",
                   {
                     style: {
@@ -1513,19 +2075,32 @@ var MessageBubble = ({
               ]
             }
           ),
-          /* @__PURE__ */ jsxs4(
+          /* @__PURE__ */ jsxs6(
             "div",
             {
               style: {
-                fontSize: "15px",
-                lineHeight: "1.7",
-                color: "var(--chatllm-text, #374151)",
-                whiteSpace: "pre-wrap",
                 wordBreak: "break-word"
               },
               children: [
-                displayContent,
-                isLoading && isAssistant && !displayContent && /* @__PURE__ */ jsxs4(
+                isAssistant ? (
+                  // AI 메시지는 마크다운 렌더링
+                  /* @__PURE__ */ jsx7(MarkdownRenderer, { content: displayContent })
+                ) : (
+                  // 사용자 메시지는 일반 텍스트
+                  /* @__PURE__ */ jsx7(
+                    "div",
+                    {
+                      style: {
+                        fontSize: "15px",
+                        lineHeight: "1.7",
+                        color: "var(--chatllm-text, #374151)",
+                        whiteSpace: "pre-wrap"
+                      },
+                      children: displayContent
+                    }
+                  )
+                ),
+                isLoading && isAssistant && !displayContent && /* @__PURE__ */ jsxs6(
                   "span",
                   {
                     style: {
@@ -1533,16 +2108,16 @@ var MessageBubble = ({
                       gap: "4px"
                     },
                     children: [
-                      /* @__PURE__ */ jsx5("span", { className: "chatllm-typing-dot", style: dotStyle }),
-                      /* @__PURE__ */ jsx5("span", { className: "chatllm-typing-dot", style: { ...dotStyle, animationDelay: "0.2s" } }),
-                      /* @__PURE__ */ jsx5("span", { className: "chatllm-typing-dot", style: { ...dotStyle, animationDelay: "0.4s" } })
+                      /* @__PURE__ */ jsx7("span", { className: "chatllm-typing-dot", style: dotStyle }),
+                      /* @__PURE__ */ jsx7("span", { className: "chatllm-typing-dot", style: { ...dotStyle, animationDelay: "0.2s" } }),
+                      /* @__PURE__ */ jsx7("span", { className: "chatllm-typing-dot", style: { ...dotStyle, animationDelay: "0.4s" } })
                     ]
                   }
                 )
               ]
             }
           ),
-          alternatives && alternatives.length > 0 && /* @__PURE__ */ jsxs4(
+          alternatives && alternatives.length > 0 && /* @__PURE__ */ jsxs6(
             "div",
             {
               style: {
@@ -1554,7 +2129,7 @@ var MessageBubble = ({
                 borderTop: "1px solid var(--chatllm-border-light, #f3f4f6)"
               },
               children: [
-                /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx7(
                   "button",
                   {
                     onClick: () => onAlternativeChange?.(Math.max(0, activeAlternativeIndex - 1)),
@@ -1564,15 +2139,15 @@ var MessageBubble = ({
                       opacity: activeAlternativeIndex === 0 ? 0.5 : 1,
                       cursor: activeAlternativeIndex === 0 ? "not-allowed" : "pointer"
                     },
-                    children: /* @__PURE__ */ jsx5(IconSvg, { name: "arrow-left-line", size: 14 })
+                    children: /* @__PURE__ */ jsx7(IconSvg, { name: "arrow-left-line", size: 14 })
                   }
                 ),
-                /* @__PURE__ */ jsxs4("span", { style: { fontSize: "12px", color: "var(--chatllm-text-muted, #9ca3af)" }, children: [
+                /* @__PURE__ */ jsxs6("span", { style: { fontSize: "12px", color: "var(--chatllm-text-muted, #9ca3af)" }, children: [
                   activeAlternativeIndex + 1,
                   " / ",
                   alternatives.length + 1
                 ] }),
-                /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx7(
                   "button",
                   {
                     onClick: () => onAlternativeChange?.(Math.min(alternatives.length, activeAlternativeIndex + 1)),
@@ -1582,13 +2157,13 @@ var MessageBubble = ({
                       opacity: activeAlternativeIndex === alternatives.length ? 0.5 : 1,
                       cursor: activeAlternativeIndex === alternatives.length ? "not-allowed" : "pointer"
                     },
-                    children: /* @__PURE__ */ jsx5(IconSvg, { name: "arrow-right-line", size: 14 })
+                    children: /* @__PURE__ */ jsx7(IconSvg, { name: "arrow-right-line", size: 14 })
                   }
                 )
               ]
             }
           ),
-          showActions && !isLoading && /* @__PURE__ */ jsxs4(
+          showActions && !isLoading && /* @__PURE__ */ jsxs6(
             "div",
             {
               style: {
@@ -1597,7 +2172,7 @@ var MessageBubble = ({
                 marginTop: "12px"
               },
               children: [
-                /* @__PURE__ */ jsx5("button", { onClick: onCopy, style: actionButtonStyle, title: "\uBCF5\uC0AC", children: /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx7("button", { onClick: onCopy, style: actionButtonStyle, title: "\uBCF5\uC0AC", children: /* @__PURE__ */ jsx7(
                   IconSvg,
                   {
                     name: isCopied ? "check-line" : "file-copy-line",
@@ -1605,8 +2180,8 @@ var MessageBubble = ({
                     color: isCopied ? "var(--chatllm-success, #22c55e)" : "var(--chatllm-text-muted, #9ca3af)"
                   }
                 ) }),
-                isUser && /* @__PURE__ */ jsx5("button", { onClick: onEdit, style: actionButtonStyle, title: "\uC218\uC815", children: /* @__PURE__ */ jsx5(IconSvg, { name: "edit-line", size: 16, color: "var(--chatllm-text-muted, #9ca3af)" }) }),
-                isAssistant && onRegenerate && /* @__PURE__ */ jsx5("button", { onClick: onRegenerate, style: actionButtonStyle, title: "\uB2E4\uC2DC \uC0DD\uC131", children: /* @__PURE__ */ jsx5(IconSvg, { name: "refresh-line", size: 16, color: "var(--chatllm-text-muted, #9ca3af)" }) })
+                isUser && /* @__PURE__ */ jsx7("button", { onClick: onEdit, style: actionButtonStyle, title: "\uC218\uC815", children: /* @__PURE__ */ jsx7(IconSvg, { name: "edit-line", size: 16, color: "var(--chatllm-text-muted, #9ca3af)" }) }),
+                isAssistant && onRegenerate && /* @__PURE__ */ jsx7("button", { onClick: onRegenerate, style: actionButtonStyle, title: "\uB2E4\uC2DC \uC0DD\uC131", children: /* @__PURE__ */ jsx7(IconSvg, { name: "refresh-line", size: 16, color: "var(--chatllm-text-muted, #9ca3af)" }) })
               ]
             }
           )
@@ -1645,7 +2220,7 @@ var navButtonStyle = {
 };
 
 // src/react/components/MessageList.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 var MessageList = ({
   messages,
   isLoading,
@@ -1658,8 +2233,8 @@ var MessageList = ({
 }) => {
   const messagesEndRef = useRef3(null);
   const containerRef = useRef3(null);
-  const [selectedText, setSelectedText] = useState5("");
-  const [selectionPosition, setSelectionPosition] = useState5(null);
+  const [selectedText, setSelectedText] = useState6("");
+  const [selectionPosition, setSelectionPosition] = useState6(null);
   useEffect3(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
@@ -1694,7 +2269,7 @@ var MessageList = ({
       window.getSelection()?.removeAllRanges();
     }
   };
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       ref: containerRef,
@@ -1706,7 +2281,7 @@ var MessageList = ({
       },
       onMouseUp: handleMouseUp,
       children: [
-        messages.map((message, index) => /* @__PURE__ */ jsx6(
+        messages.map((message, index) => /* @__PURE__ */ jsx8(
           MessageBubble,
           {
             message,
@@ -1721,7 +2296,7 @@ var MessageList = ({
           },
           message.id
         )),
-        selectionPosition && /* @__PURE__ */ jsxs5(
+        selectionPosition && /* @__PURE__ */ jsxs7(
           "div",
           {
             style: {
@@ -1732,7 +2307,7 @@ var MessageList = ({
               zIndex: 50
             },
             children: [
-              /* @__PURE__ */ jsxs5(
+              /* @__PURE__ */ jsxs7(
                 "button",
                 {
                   onClick: handleQuote,
@@ -1751,12 +2326,12 @@ var MessageList = ({
                     boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)"
                   },
                   children: [
-                    /* @__PURE__ */ jsx6(IconSvg, { name: "double-quotes-l", size: 14, color: "#ffffff" }),
+                    /* @__PURE__ */ jsx8(IconSvg, { name: "double-quotes-l", size: 14, color: "#ffffff" }),
                     "\uC778\uC6A9\uD558\uAE30"
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsx8(
                 "div",
                 {
                   style: {
@@ -1775,14 +2350,14 @@ var MessageList = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx6("div", { ref: messagesEndRef })
+        /* @__PURE__ */ jsx8("div", { ref: messagesEndRef })
       ]
     }
   );
 };
 
 // src/react/components/EmptyState.tsx
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 var EmptyState = ({
   greeting,
   templates = [],
@@ -1799,7 +2374,7 @@ var EmptyState = ({
     };
     return iconMap[icon] || "sparkling-line";
   };
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
       className: "chatllm-empty-state",
@@ -1813,7 +2388,7 @@ var EmptyState = ({
         textAlign: "center"
       },
       children: [
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx9(
           "div",
           {
             style: {
@@ -1827,10 +2402,10 @@ var EmptyState = ({
               marginBottom: "24px",
               boxShadow: "0 8px 32px rgba(59, 130, 246, 0.25)"
             },
-            children: /* @__PURE__ */ jsx7(IconSvg, { name: "sparkling-line", size: 32, color: "#ffffff" })
+            children: /* @__PURE__ */ jsx9(IconSvg, { name: "sparkling-line", size: 32, color: "#ffffff" })
           }
         ),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx9(
           "h1",
           {
             style: {
@@ -1842,7 +2417,7 @@ var EmptyState = ({
             children: greeting
           }
         ),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx9(
           "p",
           {
             style: {
@@ -1853,7 +2428,7 @@ var EmptyState = ({
             children: "\uBB34\uC5C7\uC744 \uB3C4\uC640\uB4DC\uB9B4\uAE4C\uC694?"
           }
         ),
-        actions.length > 0 && /* @__PURE__ */ jsx7(
+        actions.length > 0 && /* @__PURE__ */ jsx9(
           "div",
           {
             style: {
@@ -1864,7 +2439,7 @@ var EmptyState = ({
               maxWidth: "600px",
               marginBottom: "32px"
             },
-            children: actions.map((action) => /* @__PURE__ */ jsxs6(
+            children: actions.map((action) => /* @__PURE__ */ jsxs8(
               "button",
               {
                 onClick: () => onActionSelect?.(action),
@@ -1889,7 +2464,7 @@ var EmptyState = ({
                   e.currentTarget.style.boxShadow = "none";
                 },
                 children: [
-                  /* @__PURE__ */ jsx7(
+                  /* @__PURE__ */ jsx9(
                     "div",
                     {
                       style: {
@@ -1901,7 +2476,7 @@ var EmptyState = ({
                         alignItems: "center",
                         justifyContent: "center"
                       },
-                      children: /* @__PURE__ */ jsx7(
+                      children: /* @__PURE__ */ jsx9(
                         IconSvg,
                         {
                           name: getActionIcon(action.icon),
@@ -1911,7 +2486,7 @@ var EmptyState = ({
                       )
                     }
                   ),
-                  /* @__PURE__ */ jsx7("div", { children: /* @__PURE__ */ jsx7(
+                  /* @__PURE__ */ jsx9("div", { children: /* @__PURE__ */ jsx9(
                     "div",
                     {
                       style: {
@@ -1928,8 +2503,8 @@ var EmptyState = ({
             ))
           }
         ),
-        templates.length > 0 && /* @__PURE__ */ jsxs6("div", { style: { width: "100%", maxWidth: "600px" }, children: [
-          /* @__PURE__ */ jsx7(
+        templates.length > 0 && /* @__PURE__ */ jsxs8("div", { style: { width: "100%", maxWidth: "600px" }, children: [
+          /* @__PURE__ */ jsx9(
             "h3",
             {
               style: {
@@ -1942,7 +2517,7 @@ var EmptyState = ({
               children: "\uCD94\uCC9C \uD504\uB86C\uD504\uD2B8"
             }
           ),
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx9(
             "div",
             {
               style: {
@@ -1950,7 +2525,7 @@ var EmptyState = ({
                 flexDirection: "column",
                 gap: "8px"
               },
-              children: templates.map((template) => /* @__PURE__ */ jsxs6(
+              children: templates.map((template) => /* @__PURE__ */ jsxs8(
                 "button",
                 {
                   onClick: () => onTemplateClick(template),
@@ -1973,7 +2548,7 @@ var EmptyState = ({
                     e.currentTarget.style.backgroundColor = "var(--chatllm-bg, #ffffff)";
                   },
                   children: [
-                    /* @__PURE__ */ jsx7(
+                    /* @__PURE__ */ jsx9(
                       "div",
                       {
                         style: {
@@ -1986,11 +2561,11 @@ var EmptyState = ({
                           justifyContent: "center",
                           flexShrink: 0
                         },
-                        children: /* @__PURE__ */ jsx7(IconSvg, { name: "file-text-line", size: 18, color: "var(--chatllm-text-muted, #6b7280)" })
+                        children: /* @__PURE__ */ jsx9(IconSvg, { name: "file-text-line", size: 18, color: "var(--chatllm-text-muted, #6b7280)" })
                       }
                     ),
-                    /* @__PURE__ */ jsxs6("div", { style: { flex: 1, minWidth: 0 }, children: [
-                      /* @__PURE__ */ jsx7(
+                    /* @__PURE__ */ jsxs8("div", { style: { flex: 1, minWidth: 0 }, children: [
+                      /* @__PURE__ */ jsx9(
                         "div",
                         {
                           style: {
@@ -2001,7 +2576,7 @@ var EmptyState = ({
                           children: template.title
                         }
                       ),
-                      /* @__PURE__ */ jsx7(
+                      /* @__PURE__ */ jsx9(
                         "div",
                         {
                           style: {
@@ -2015,7 +2590,7 @@ var EmptyState = ({
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ jsx7(IconSvg, { name: "arrow-right-line", size: 16, color: "var(--chatllm-text-muted, #9ca3af)" })
+                    /* @__PURE__ */ jsx9(IconSvg, { name: "arrow-right-line", size: 16, color: "var(--chatllm-text-muted, #9ca3af)" })
                   ]
                 },
                 template.id
@@ -2029,8 +2604,8 @@ var EmptyState = ({
 };
 
 // src/react/components/MemoryPanel.tsx
-import { useState as useState6 } from "react";
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { useState as useState7 } from "react";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var categoryLabels = {
   context: "\uB300\uD654 \uCEE8\uD14D\uC2A4\uD2B8",
   preference: "\uC0AC\uC6A9\uC790 \uC120\uD638",
@@ -2051,8 +2626,8 @@ var MemoryPanel = ({
   isOpen,
   onToggle
 }) => {
-  const [expandedId, setExpandedId] = useState6(null);
-  const [activeTab, setActiveTab] = useState6("all");
+  const [expandedId, setExpandedId] = useState7(null);
+  const [activeTab, setActiveTab] = useState7("all");
   const filteredItems = activeTab === "all" ? items : items.filter((item) => item.category === activeTab);
   const formatDate2 = (timestamp) => {
     const date = new Date(timestamp);
@@ -2064,7 +2639,7 @@ var MemoryPanel = ({
     });
   };
   if (!isOpen) {
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx10(
       "button",
       {
         onClick: onToggle,
@@ -2084,11 +2659,11 @@ var MemoryPanel = ({
           justifyContent: "center",
           zIndex: 100
         },
-        children: /* @__PURE__ */ jsx8(IconSvg, { name: "robot-line", size: 24, color: "#ffffff" })
+        children: /* @__PURE__ */ jsx10(IconSvg, { name: "robot-line", size: 24, color: "#ffffff" })
       }
     );
   }
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       className: "chatllm-memory-panel",
@@ -2108,7 +2683,7 @@ var MemoryPanel = ({
         zIndex: 100
       },
       children: [
-        /* @__PURE__ */ jsxs7(
+        /* @__PURE__ */ jsxs9(
           "div",
           {
             style: {
@@ -2119,8 +2694,8 @@ var MemoryPanel = ({
               borderBottom: "1px solid var(--chatllm-border, #e5e7eb)"
             },
             children: [
-              /* @__PURE__ */ jsxs7("div", { style: { display: "flex", alignItems: "center", gap: "10px" }, children: [
-                /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsxs9("div", { style: { display: "flex", alignItems: "center", gap: "10px" }, children: [
+                /* @__PURE__ */ jsx10(
                   "div",
                   {
                     style: {
@@ -2132,19 +2707,19 @@ var MemoryPanel = ({
                       alignItems: "center",
                       justifyContent: "center"
                     },
-                    children: /* @__PURE__ */ jsx8(IconSvg, { name: "robot-line", size: 18, color: "var(--chatllm-primary, #3b82f6)" })
+                    children: /* @__PURE__ */ jsx10(IconSvg, { name: "robot-line", size: 18, color: "var(--chatllm-primary, #3b82f6)" })
                   }
                 ),
-                /* @__PURE__ */ jsxs7("div", { children: [
-                  /* @__PURE__ */ jsx8("div", { style: { fontSize: "15px", fontWeight: 600, color: "var(--chatllm-text, #1f2937)" }, children: "AI \uBA54\uBAA8\uB9AC" }),
-                  /* @__PURE__ */ jsxs7("div", { style: { fontSize: "12px", color: "var(--chatllm-text-muted, #9ca3af)" }, children: [
+                /* @__PURE__ */ jsxs9("div", { children: [
+                  /* @__PURE__ */ jsx10("div", { style: { fontSize: "15px", fontWeight: 600, color: "var(--chatllm-text, #1f2937)" }, children: "AI \uBA54\uBAA8\uB9AC" }),
+                  /* @__PURE__ */ jsxs9("div", { style: { fontSize: "12px", color: "var(--chatllm-text-muted, #9ca3af)" }, children: [
                     items.length,
                     "\uAC1C \uD56D\uBAA9"
                   ] })
                 ] })
               ] }),
-              /* @__PURE__ */ jsxs7("div", { style: { display: "flex", gap: "4px" }, children: [
-                onClearAll && items.length > 0 && /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsxs9("div", { style: { display: "flex", gap: "4px" }, children: [
+                onClearAll && items.length > 0 && /* @__PURE__ */ jsx10(
                   "button",
                   {
                     onClick: onClearAll,
@@ -2156,10 +2731,10 @@ var MemoryPanel = ({
                       cursor: "pointer"
                     },
                     title: "\uC804\uCCB4 \uC0AD\uC81C",
-                    children: /* @__PURE__ */ jsx8(IconSvg, { name: "delete-bin-line", size: 18, color: "var(--chatllm-text-muted, #9ca3af)" })
+                    children: /* @__PURE__ */ jsx10(IconSvg, { name: "delete-bin-line", size: 18, color: "var(--chatllm-text-muted, #9ca3af)" })
                   }
                 ),
-                /* @__PURE__ */ jsx8(
+                /* @__PURE__ */ jsx10(
                   "button",
                   {
                     onClick: onToggle,
@@ -2170,14 +2745,14 @@ var MemoryPanel = ({
                       borderRadius: "8px",
                       cursor: "pointer"
                     },
-                    children: /* @__PURE__ */ jsx8(IconSvg, { name: "close-line", size: 18, color: "var(--chatllm-text-muted, #9ca3af)" })
+                    children: /* @__PURE__ */ jsx10(IconSvg, { name: "close-line", size: 18, color: "var(--chatllm-text-muted, #9ca3af)" })
                   }
                 )
               ] })
             ]
           }
         ),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx10(
           "div",
           {
             style: {
@@ -2187,7 +2762,7 @@ var MemoryPanel = ({
               borderBottom: "1px solid var(--chatllm-border-light, #f3f4f6)",
               overflowX: "auto"
             },
-            children: ["all", "context", "preference", "skill", "fact"].map((tab) => /* @__PURE__ */ jsx8(
+            children: ["all", "context", "preference", "skill", "fact"].map((tab) => /* @__PURE__ */ jsx10(
               "button",
               {
                 onClick: () => setActiveTab(tab),
@@ -2208,8 +2783,8 @@ var MemoryPanel = ({
             ))
           }
         ),
-        /* @__PURE__ */ jsxs7("div", { style: { flex: 1, overflow: "auto", padding: "12px" }, children: [
-          contextSummary && activeTab === "all" && /* @__PURE__ */ jsxs7(
+        /* @__PURE__ */ jsxs9("div", { style: { flex: 1, overflow: "auto", padding: "12px" }, children: [
+          contextSummary && activeTab === "all" && /* @__PURE__ */ jsxs9(
             "div",
             {
               style: {
@@ -2220,7 +2795,7 @@ var MemoryPanel = ({
                 borderLeft: "3px solid var(--chatllm-primary, #3b82f6)"
               },
               children: [
-                /* @__PURE__ */ jsxs7(
+                /* @__PURE__ */ jsxs9(
                   "div",
                   {
                     style: {
@@ -2230,12 +2805,12 @@ var MemoryPanel = ({
                       marginBottom: "8px"
                     },
                     children: [
-                      /* @__PURE__ */ jsx8(IconSvg, { name: "file-text-line", size: 14, color: "var(--chatllm-primary, #3b82f6)" }),
-                      /* @__PURE__ */ jsx8("span", { style: { fontSize: "12px", fontWeight: 500, color: "var(--chatllm-primary, #3b82f6)" }, children: "\uB300\uD654 \uC694\uC57D" })
+                      /* @__PURE__ */ jsx10(IconSvg, { name: "file-text-line", size: 14, color: "var(--chatllm-primary, #3b82f6)" }),
+                      /* @__PURE__ */ jsx10("span", { style: { fontSize: "12px", fontWeight: 500, color: "var(--chatllm-primary, #3b82f6)" }, children: "\uB300\uD654 \uC694\uC57D" })
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx8(
+                /* @__PURE__ */ jsx10(
                   "p",
                   {
                     style: {
@@ -2250,7 +2825,7 @@ var MemoryPanel = ({
               ]
             }
           ),
-          filteredItems.length === 0 ? /* @__PURE__ */ jsxs7(
+          filteredItems.length === 0 ? /* @__PURE__ */ jsxs9(
             "div",
             {
               style: {
@@ -2259,11 +2834,11 @@ var MemoryPanel = ({
                 color: "var(--chatllm-text-muted, #9ca3af)"
               },
               children: [
-                /* @__PURE__ */ jsx8(IconSvg, { name: "robot-line", size: 32, color: "var(--chatllm-text-muted, #d1d5db)" }),
-                /* @__PURE__ */ jsx8("p", { style: { fontSize: "14px", marginTop: "12px" }, children: "\uC800\uC7A5\uB41C \uBA54\uBAA8\uB9AC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" })
+                /* @__PURE__ */ jsx10(IconSvg, { name: "robot-line", size: 32, color: "var(--chatllm-text-muted, #d1d5db)" }),
+                /* @__PURE__ */ jsx10("p", { style: { fontSize: "14px", marginTop: "12px" }, children: "\uC800\uC7A5\uB41C \uBA54\uBAA8\uB9AC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" })
               ]
             }
-          ) : /* @__PURE__ */ jsx8("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: filteredItems.map((item) => /* @__PURE__ */ jsxs7(
+          ) : /* @__PURE__ */ jsx10("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: filteredItems.map((item) => /* @__PURE__ */ jsxs9(
             "div",
             {
               style: {
@@ -2276,10 +2851,10 @@ var MemoryPanel = ({
               },
               onClick: () => setExpandedId(expandedId === item.id ? null : item.id),
               children: [
-                /* @__PURE__ */ jsxs7("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between" }, children: [
-                  /* @__PURE__ */ jsxs7("div", { style: { flex: 1, minWidth: 0 }, children: [
-                    /* @__PURE__ */ jsxs7("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginBottom: "4px" }, children: [
-                      item.category && /* @__PURE__ */ jsx8(
+                /* @__PURE__ */ jsxs9("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between" }, children: [
+                  /* @__PURE__ */ jsxs9("div", { style: { flex: 1, minWidth: 0 }, children: [
+                    /* @__PURE__ */ jsxs9("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginBottom: "4px" }, children: [
+                      item.category && /* @__PURE__ */ jsx10(
                         "span",
                         {
                           style: {
@@ -2293,9 +2868,9 @@ var MemoryPanel = ({
                           children: categoryLabels[item.category]
                         }
                       ),
-                      /* @__PURE__ */ jsx8("span", { style: { fontSize: "11px", color: "var(--chatllm-text-muted, #9ca3af)" }, children: formatDate2(item.timestamp) })
+                      /* @__PURE__ */ jsx10("span", { style: { fontSize: "11px", color: "var(--chatllm-text-muted, #9ca3af)" }, children: formatDate2(item.timestamp) })
                     ] }),
-                    /* @__PURE__ */ jsx8(
+                    /* @__PURE__ */ jsx10(
                       "div",
                       {
                         style: {
@@ -2307,8 +2882,8 @@ var MemoryPanel = ({
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsxs7("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
-                    onDelete && /* @__PURE__ */ jsx8(
+                  /* @__PURE__ */ jsxs9("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+                    onDelete && /* @__PURE__ */ jsx10(
                       "button",
                       {
                         onClick: (e) => {
@@ -2323,10 +2898,10 @@ var MemoryPanel = ({
                           cursor: "pointer",
                           opacity: 0.5
                         },
-                        children: /* @__PURE__ */ jsx8(IconSvg, { name: "delete-bin-line", size: 14, color: "var(--chatllm-text-muted, #9ca3af)" })
+                        children: /* @__PURE__ */ jsx10(IconSvg, { name: "delete-bin-line", size: 14, color: "var(--chatllm-text-muted, #9ca3af)" })
                       }
                     ),
-                    /* @__PURE__ */ jsx8(
+                    /* @__PURE__ */ jsx10(
                       IconSvg,
                       {
                         name: expandedId === item.id ? "arrow-up-s-line" : "arrow-down-s-line",
@@ -2336,7 +2911,7 @@ var MemoryPanel = ({
                     )
                   ] })
                 ] }),
-                expandedId === item.id && /* @__PURE__ */ jsx8(
+                expandedId === item.id && /* @__PURE__ */ jsx10(
                   "div",
                   {
                     style: {
@@ -2344,7 +2919,7 @@ var MemoryPanel = ({
                       paddingTop: "12px",
                       borderTop: "1px solid var(--chatllm-border-light, #f3f4f6)"
                     },
-                    children: /* @__PURE__ */ jsx8(
+                    children: /* @__PURE__ */ jsx10(
                       "p",
                       {
                         style: {
@@ -2369,8 +2944,439 @@ var MemoryPanel = ({
   );
 };
 
+// src/react/components/SettingsModal.tsx
+import { useState as useState8 } from "react";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+var DEFAULT_PERSONALIZATION2 = {
+  responseStyle: {
+    warmth: "medium",
+    enthusiasm: "medium",
+    emojiUsage: "low",
+    formatting: "default",
+    verbosity: "balanced"
+  },
+  userProfile: {},
+  useMemory: true,
+  language: "auto"
+};
+var SettingsModal = ({
+  isOpen,
+  onClose,
+  personalization,
+  onPersonalizationChange,
+  apiKey = "",
+  onApiKeyChange,
+  onClearAllData,
+  apiKeyLabel = "API Key",
+  apiKeyDescription = "Cloud \uBAA8\uB378 \uC0AC\uC6A9\uC5D0 \uD544\uC694\uD569\uB2C8\uB2E4"
+}) => {
+  const [activeTab, setActiveTab] = useState8("general");
+  const [localApiKey, setLocalApiKey] = useState8(apiKey);
+  if (!isOpen) return null;
+  const updateResponseStyle = (key, value) => {
+    onPersonalizationChange({
+      ...personalization,
+      responseStyle: {
+        ...personalization.responseStyle,
+        [key]: value
+      }
+    });
+  };
+  const updateUserProfile = (key, value) => {
+    onPersonalizationChange({
+      ...personalization,
+      userProfile: {
+        ...personalization.userProfile,
+        [key]: value
+      }
+    });
+  };
+  const handleApiKeyChange = (value) => {
+    setLocalApiKey(value);
+    onApiKeyChange?.(value);
+  };
+  return /* @__PURE__ */ jsx11(
+    "div",
+    {
+      className: "chatllm-settings-overlay",
+      style: {
+        position: "fixed",
+        inset: 0,
+        backgroundColor: "rgba(0, 0, 0, 0.3)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 1e3
+      },
+      onClick: onClose,
+      children: /* @__PURE__ */ jsxs10(
+        "div",
+        {
+          className: "chatllm-settings-modal",
+          style: {
+            backgroundColor: "var(--chatllm-bg, #ffffff)",
+            borderRadius: "16px",
+            width: "100%",
+            maxWidth: "800px",
+            height: "80vh",
+            maxHeight: "600px",
+            margin: "16px",
+            boxShadow: "0 20px 60px rgba(0, 0, 0, 0.15)",
+            display: "flex",
+            overflow: "hidden"
+          },
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsxs10(
+              "div",
+              {
+                style: {
+                  width: "200px",
+                  backgroundColor: "var(--chatllm-bg-secondary, #f9fafb)",
+                  borderRight: "1px solid var(--chatllm-border, #e5e7eb)",
+                  display: "flex",
+                  flexDirection: "column"
+                },
+                children: [
+                  /* @__PURE__ */ jsx11("div", { style: { padding: "16px", borderBottom: "1px solid var(--chatllm-border, #e5e7eb)" }, children: /* @__PURE__ */ jsx11(
+                    "button",
+                    {
+                      onClick: onClose,
+                      style: {
+                        padding: "8px",
+                        backgroundColor: "transparent",
+                        border: "none",
+                        borderRadius: "8px",
+                        cursor: "pointer",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center"
+                      },
+                      children: /* @__PURE__ */ jsx11(IconSvg, { name: "close-line", size: 20, color: "var(--chatllm-text-muted, #6b7280)" })
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxs10("nav", { style: { flex: 1, padding: "8px" }, children: [
+                    /* @__PURE__ */ jsx11(
+                      TabButton,
+                      {
+                        active: activeTab === "general",
+                        onClick: () => setActiveTab("general"),
+                        icon: "settings-3-line",
+                        label: "\uC77C\uBC18"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx11(
+                      TabButton,
+                      {
+                        active: activeTab === "personalization",
+                        onClick: () => setActiveTab("personalization"),
+                        icon: "user-3-line",
+                        label: "\uAC1C\uC778 \uB9DE\uCDA4 \uC124\uC815"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx11(
+                      TabButton,
+                      {
+                        active: activeTab === "data",
+                        onClick: () => setActiveTab("data"),
+                        icon: "delete-bin-line",
+                        label: "\uB370\uC774\uD130 \uC81C\uC5B4"
+                      }
+                    )
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs10("div", { style: { flex: 1, overflow: "auto", padding: "24px" }, children: [
+              activeTab === "general" && /* @__PURE__ */ jsxs10("div", { children: [
+                /* @__PURE__ */ jsx11("h2", { style: { fontSize: "20px", fontWeight: 600, marginBottom: "24px", color: "var(--chatllm-text, #1f2937)" }, children: "\uC77C\uBC18" }),
+                /* @__PURE__ */ jsx11(SettingRow, { label: "\uC5B8\uC5B4", children: /* @__PURE__ */ jsxs10(
+                  "select",
+                  {
+                    value: personalization.language,
+                    onChange: (e) => onPersonalizationChange({ ...personalization, language: e.target.value }),
+                    style: selectStyle,
+                    children: [
+                      /* @__PURE__ */ jsx11("option", { value: "auto", children: "\uC790\uB3D9 \uD0D0\uC9C0" }),
+                      /* @__PURE__ */ jsx11("option", { value: "ko", children: "\uD55C\uAD6D\uC5B4" }),
+                      /* @__PURE__ */ jsx11("option", { value: "en", children: "English" }),
+                      /* @__PURE__ */ jsx11("option", { value: "ja", children: "\u65E5\u672C\u8A9E" })
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ jsx11(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__ */ jsx11(
+                  "button",
+                  {
+                    onClick: () => onPersonalizationChange(DEFAULT_PERSONALIZATION2),
+                    style: buttonSecondaryStyle,
+                    children: "\uCD08\uAE30\uD654"
+                  }
+                ) }),
+                onApiKeyChange && /* @__PURE__ */ jsxs10("div", { style: { marginTop: "32px", paddingTop: "24px", borderTop: "1px solid var(--chatllm-border, #e5e7eb)" }, children: [
+                  /* @__PURE__ */ jsx11("h3", { style: { fontSize: "16px", fontWeight: 500, marginBottom: "16px", color: "var(--chatllm-text, #1f2937)" }, children: "API \uC124\uC815" }),
+                  /* @__PURE__ */ jsxs10("div", { children: [
+                    /* @__PURE__ */ jsx11("label", { style: { display: "block", fontSize: "14px", marginBottom: "8px", color: "var(--chatllm-text, #374151)" }, children: apiKeyLabel }),
+                    /* @__PURE__ */ jsx11(
+                      "input",
+                      {
+                        type: "password",
+                        value: localApiKey,
+                        onChange: (e) => handleApiKeyChange(e.target.value),
+                        placeholder: "API \uD0A4\uB97C \uC785\uB825\uD558\uC138\uC694",
+                        style: inputStyle
+                      }
+                    ),
+                    /* @__PURE__ */ jsx11("p", { style: { fontSize: "12px", color: "var(--chatllm-text-muted, #9ca3af)", marginTop: "4px" }, children: apiKeyDescription })
+                  ] })
+                ] })
+              ] }),
+              activeTab === "personalization" && /* @__PURE__ */ jsxs10("div", { children: [
+                /* @__PURE__ */ jsx11("h2", { style: { fontSize: "20px", fontWeight: 600, marginBottom: "24px", color: "var(--chatllm-text, #1f2937)" }, children: "\uAC1C\uC778 \uB9DE\uCDA4 \uC124\uC815" }),
+                /* @__PURE__ */ jsxs10("section", { style: { marginBottom: "32px" }, children: [
+                  /* @__PURE__ */ jsx11("h3", { style: { fontSize: "14px", fontWeight: 500, color: "var(--chatllm-text-muted, #6b7280)", marginBottom: "16px" }, children: "\uC0AC\uC6A9\uC790 \uD504\uB85C\uD544" }),
+                  /* @__PURE__ */ jsxs10("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
+                    /* @__PURE__ */ jsxs10("div", { children: [
+                      /* @__PURE__ */ jsx11("label", { style: labelStyle, children: "\uB2C9\uB124\uC784" }),
+                      /* @__PURE__ */ jsx11(
+                        "input",
+                        {
+                          type: "text",
+                          value: personalization.userProfile.nickname || "",
+                          onChange: (e) => updateUserProfile("nickname", e.target.value),
+                          placeholder: "\uC5B4\uB5BB\uAC8C \uBD88\uB7EC\uB4DC\uB9B4\uAE4C\uC694?",
+                          style: inputStyle
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs10("div", { children: [
+                      /* @__PURE__ */ jsx11("label", { style: labelStyle, children: "\uC9C1\uC5C5" }),
+                      /* @__PURE__ */ jsx11(
+                        "input",
+                        {
+                          type: "text",
+                          value: personalization.userProfile.occupation || "",
+                          onChange: (e) => updateUserProfile("occupation", e.target.value),
+                          placeholder: "\uC608: \uC18C\uD504\uD2B8\uC6E8\uC5B4 \uAC1C\uBC1C\uC790",
+                          style: inputStyle
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs10("div", { children: [
+                      /* @__PURE__ */ jsx11("label", { style: labelStyle, children: "\uCD94\uAC00 \uC815\uBCF4" }),
+                      /* @__PURE__ */ jsx11(
+                        "textarea",
+                        {
+                          value: personalization.userProfile.additionalInfo || "",
+                          onChange: (e) => updateUserProfile("additionalInfo", e.target.value),
+                          placeholder: "\uAD00\uC2EC\uC0AC, \uC120\uD638 \uC0AC\uD56D \uB4F1",
+                          rows: 3,
+                          style: { ...inputStyle, resize: "none" }
+                        }
+                      )
+                    ] })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs10("section", { children: [
+                  /* @__PURE__ */ jsx11("h3", { style: { fontSize: "14px", fontWeight: 500, color: "var(--chatllm-text-muted, #6b7280)", marginBottom: "16px" }, children: "\uC751\uB2F5 \uC2A4\uD0C0\uC77C" }),
+                  /* @__PURE__ */ jsx11(SettingRow, { label: "\uB530\uB73B\uD568", children: /* @__PURE__ */ jsxs10(
+                    "select",
+                    {
+                      value: personalization.responseStyle.warmth,
+                      onChange: (e) => updateResponseStyle("warmth", e.target.value),
+                      style: selectStyle,
+                      children: [
+                        /* @__PURE__ */ jsx11("option", { value: "high", children: "\uB192\uC74C - \uCE5C\uADFC\uD558\uACE0 \uB530\uB73B\uD558\uAC8C" }),
+                        /* @__PURE__ */ jsx11("option", { value: "medium", children: "\uAE30\uBCF8\uAC12" }),
+                        /* @__PURE__ */ jsx11("option", { value: "low", children: "\uB0AE\uC74C - \uAC04\uACB0\uD558\uACE0 \uC0AC\uBB34\uC801\uC73C\uB85C" })
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx11(SettingRow, { label: "\uC5F4\uC815\uC801", children: /* @__PURE__ */ jsxs10(
+                    "select",
+                    {
+                      value: personalization.responseStyle.enthusiasm,
+                      onChange: (e) => updateResponseStyle("enthusiasm", e.target.value),
+                      style: selectStyle,
+                      children: [
+                        /* @__PURE__ */ jsx11("option", { value: "high", children: "\uB192\uC74C - \uC801\uADF9\uC801\uC774\uACE0 \uD65C\uBC1C\uD558\uAC8C" }),
+                        /* @__PURE__ */ jsx11("option", { value: "medium", children: "\uAE30\uBCF8\uAC12" }),
+                        /* @__PURE__ */ jsx11("option", { value: "low", children: "\uB0AE\uC74C - \uCC28\uBD84\uD558\uACE0 \uC808\uC81C\uC788\uAC8C" })
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx11(SettingRow, { label: "\uC774\uBAA8\uC9C0 \uC0AC\uC6A9", children: /* @__PURE__ */ jsxs10(
+                    "select",
+                    {
+                      value: personalization.responseStyle.emojiUsage,
+                      onChange: (e) => updateResponseStyle("emojiUsage", e.target.value),
+                      style: selectStyle,
+                      children: [
+                        /* @__PURE__ */ jsx11("option", { value: "high", children: "\uB192\uC74C - \uC790\uC8FC \uC0AC\uC6A9" }),
+                        /* @__PURE__ */ jsx11("option", { value: "medium", children: "\uAE30\uBCF8\uAC12" }),
+                        /* @__PURE__ */ jsx11("option", { value: "low", children: "\uB0AE\uC74C - \uAC70\uC758 \uC0AC\uC6A9 \uC548 \uD568" })
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx11(SettingRow, { label: "\uC751\uB2F5 \uAE38\uC774", children: /* @__PURE__ */ jsxs10(
+                    "select",
+                    {
+                      value: personalization.responseStyle.verbosity,
+                      onChange: (e) => updateResponseStyle("verbosity", e.target.value),
+                      style: selectStyle,
+                      children: [
+                        /* @__PURE__ */ jsx11("option", { value: "detailed", children: "\uC0C1\uC138 - \uC790\uC138\uD558\uAC8C \uC124\uBA85" }),
+                        /* @__PURE__ */ jsx11("option", { value: "balanced", children: "\uAE30\uBCF8\uAC12" }),
+                        /* @__PURE__ */ jsx11("option", { value: "concise", children: "\uAC04\uACB0 - \uD575\uC2EC\uB9CC \uC694\uC57D" })
+                      ]
+                    }
+                  ) })
+                ] })
+              ] }),
+              activeTab === "data" && /* @__PURE__ */ jsxs10("div", { children: [
+                /* @__PURE__ */ jsx11("h2", { style: { fontSize: "20px", fontWeight: 600, marginBottom: "24px", color: "var(--chatllm-text, #1f2937)" }, children: "\uB370\uC774\uD130 \uC81C\uC5B4" }),
+                /* @__PURE__ */ jsx11(SettingRow, { label: "\uBA54\uBAA8\uB9AC \uC0AC\uC6A9", description: "\uB300\uD654 \uCEE8\uD14D\uC2A4\uD2B8\uB97C \uAE30\uC5B5\uD569\uB2C8\uB2E4", children: /* @__PURE__ */ jsx11(
+                  "button",
+                  {
+                    onClick: () => onPersonalizationChange({ ...personalization, useMemory: !personalization.useMemory }),
+                    style: {
+                      width: "48px",
+                      height: "28px",
+                      borderRadius: "14px",
+                      backgroundColor: personalization.useMemory ? "var(--chatllm-primary, #3b82f6)" : "var(--chatllm-text-muted, #d1d5db)",
+                      border: "none",
+                      cursor: "pointer",
+                      position: "relative",
+                      transition: "background-color 0.2s"
+                    },
+                    children: /* @__PURE__ */ jsx11(
+                      "div",
+                      {
+                        style: {
+                          width: "22px",
+                          height: "22px",
+                          borderRadius: "50%",
+                          backgroundColor: "#ffffff",
+                          boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
+                          position: "absolute",
+                          top: "3px",
+                          left: personalization.useMemory ? "23px" : "3px",
+                          transition: "left 0.2s"
+                        }
+                      }
+                    )
+                  }
+                ) }),
+                onClearAllData && /* @__PURE__ */ jsx11(SettingRow, { label: "\uB300\uD654 \uAE30\uB85D \uC0AD\uC81C", description: "\uBAA8\uB4E0 \uB300\uD654 \uAE30\uB85D\uC744 \uC0AD\uC81C\uD569\uB2C8\uB2E4", children: /* @__PURE__ */ jsx11(
+                  "button",
+                  {
+                    onClick: () => {
+                      if (window.confirm("\uBAA8\uB4E0 \uB300\uD654 \uAE30\uB85D\uC744 \uC0AD\uC81C\uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C?")) {
+                        onClearAllData();
+                      }
+                    },
+                    style: buttonDangerStyle,
+                    children: "\uC0AD\uC81C"
+                  }
+                ) })
+              ] })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+};
+var TabButton = ({ active, onClick, icon, label }) => /* @__PURE__ */ jsxs10(
+  "button",
+  {
+    onClick,
+    style: {
+      width: "100%",
+      display: "flex",
+      alignItems: "center",
+      gap: "12px",
+      padding: "10px 12px",
+      borderRadius: "10px",
+      border: "none",
+      backgroundColor: active ? "var(--chatllm-bg, #ffffff)" : "transparent",
+      boxShadow: active ? "0 1px 3px rgba(0, 0, 0, 0.08)" : "none",
+      color: active ? "var(--chatllm-primary, #3b82f6)" : "var(--chatllm-text-muted, #6b7280)",
+      fontSize: "14px",
+      cursor: "pointer",
+      textAlign: "left",
+      marginBottom: "4px"
+    },
+    children: [
+      /* @__PURE__ */ jsx11(IconSvg, { name: icon, size: 20 }),
+      label
+    ]
+  }
+);
+var SettingRow = ({ label, description, children }) => /* @__PURE__ */ jsxs10(
+  "div",
+  {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      padding: "12px 0",
+      borderBottom: "1px solid var(--chatllm-border-light, #f3f4f6)"
+    },
+    children: [
+      /* @__PURE__ */ jsxs10("div", { children: [
+        /* @__PURE__ */ jsx11("span", { style: { fontSize: "14px", color: "var(--chatllm-text, #374151)" }, children: label }),
+        description && /* @__PURE__ */ jsx11("p", { style: { fontSize: "12px", color: "var(--chatllm-text-muted, #9ca3af)", marginTop: "2px" }, children: description })
+      ] }),
+      children
+    ]
+  }
+);
+var selectStyle = {
+  padding: "8px 12px",
+  backgroundColor: "var(--chatllm-bg-secondary, #f9fafb)",
+  border: "1px solid var(--chatllm-border, #e5e7eb)",
+  borderRadius: "8px",
+  fontSize: "14px",
+  color: "var(--chatllm-text, #374151)",
+  minWidth: "200px",
+  cursor: "pointer"
+};
+var inputStyle = {
+  width: "100%",
+  padding: "10px 12px",
+  backgroundColor: "var(--chatllm-bg-secondary, #f9fafb)",
+  border: "1px solid var(--chatllm-border, #e5e7eb)",
+  borderRadius: "8px",
+  fontSize: "14px",
+  color: "var(--chatllm-text, #374151)"
+};
+var labelStyle = {
+  display: "block",
+  fontSize: "12px",
+  color: "var(--chatllm-text-muted, #6b7280)",
+  marginBottom: "6px"
+};
+var buttonSecondaryStyle = {
+  padding: "8px 16px",
+  backgroundColor: "var(--chatllm-bg-secondary, #f3f4f6)",
+  border: "none",
+  borderRadius: "8px",
+  fontSize: "14px",
+  color: "var(--chatllm-text, #374151)",
+  cursor: "pointer"
+};
+var buttonDangerStyle = {
+  padding: "8px 16px",
+  backgroundColor: "var(--chatllm-danger-bg, #fef2f2)",
+  border: "none",
+  borderRadius: "8px",
+  fontSize: "14px",
+  color: "var(--chatllm-danger, #dc2626)",
+  cursor: "pointer"
+};
+
 // src/react/ChatUI.tsx
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 var DEFAULT_ACTIONS = [
   {
     id: "webSearch",
@@ -2525,6 +3531,7 @@ var ChatUI = ({
   templates = DEFAULT_TEMPLATES,
   personalization,
   apiKey,
+  onApiKeyChange,
   apiEndpoint = "/api/chat",
   theme,
   showSidebar = true,
@@ -2539,7 +3546,7 @@ var ChatUI = ({
   onSessionChange,
   onError
 }) => {
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     injectStyles();
   }, []);
   const hookOptions = {
@@ -2600,8 +3607,8 @@ var ChatUI = ({
   const handleSubmit = () => {
     sendMessage();
   };
-  const [memoryPanelOpen, setMemoryPanelOpen] = useState7(false);
-  const memoryItems = React6.useMemo(() => {
+  const [memoryPanelOpen, setMemoryPanelOpen] = useState9(false);
+  const memoryItems = React9.useMemo(() => {
     const items = [];
     if (currentSession?.contextSummary) {
       items.push({
@@ -2642,7 +3649,7 @@ var ChatUI = ({
     return items;
   }, [currentSession, currentPersonalization]);
   const themeClass = theme?.mode === "dark" ? "chatllm-dark" : "";
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       className: `chatllm-root ${themeClass} ${className}`,
@@ -2653,7 +3660,7 @@ var ChatUI = ({
         fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
       },
       children: [
-        showSidebar && /* @__PURE__ */ jsx9(
+        showSidebar && /* @__PURE__ */ jsx12(
           ChatSidebar,
           {
             sessions,
@@ -2665,7 +3672,7 @@ var ChatUI = ({
             onToggle: toggleSidebar
           }
         ),
-        /* @__PURE__ */ jsxs8(
+        /* @__PURE__ */ jsxs11(
           "main",
           {
             style: {
@@ -2676,7 +3683,7 @@ var ChatUI = ({
               minWidth: 0
             },
             children: [
-              /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsx12(
                 ChatHeader,
                 {
                   title: currentSession?.title || "\uC0C8 \uB300\uD654",
@@ -2688,7 +3695,7 @@ var ChatUI = ({
                   sidebarOpen
                 }
               ),
-              messages.length === 0 ? /* @__PURE__ */ jsx9(
+              messages.length === 0 ? /* @__PURE__ */ jsx12(
                 EmptyState,
                 {
                   greeting,
@@ -2697,7 +3704,7 @@ var ChatUI = ({
                   actions,
                   onActionSelect: handleActionSelect
                 }
-              ) : /* @__PURE__ */ jsx9(
+              ) : /* @__PURE__ */ jsx12(
                 MessageList,
                 {
                   messages,
@@ -2710,7 +3717,7 @@ var ChatUI = ({
                   editingId: editingMessageId
                 }
               ),
-              /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsx12(
                 ChatInput,
                 {
                   value: input,
@@ -2730,7 +3737,7 @@ var ChatUI = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx12(
           MemoryPanel,
           {
             items: memoryItems,
@@ -2738,6 +3745,22 @@ var ChatUI = ({
             isOpen: memoryPanelOpen,
             onToggle: () => setMemoryPanelOpen(!memoryPanelOpen)
           }
+        ),
+        showSettings && /* @__PURE__ */ jsx12(
+          SettingsModal,
+          {
+            isOpen: settingsOpen,
+            onClose: closeSettings,
+            personalization: currentPersonalization,
+            onPersonalizationChange: updatePersonalization,
+            apiKey,
+            onApiKeyChange,
+            onClearAllData: () => {
+              sessions.forEach((s) => deleteSession(s.id));
+            },
+            apiKeyLabel: "API Key",
+            apiKeyDescription: "Cloud \uBAA8\uB378 \uC0AC\uC6A9\uC5D0 \uD544\uC694\uD569\uB2C8\uB2E4"
+          }
         )
       ]
     }
@@ -2751,9 +3774,12 @@ export {
   EmptyState,
   Icon,
   IconSvg,
+  LinkChip,
+  MarkdownRenderer,
   MemoryPanel,
   MessageBubble,
   MessageList,
+  SettingsModal,
   useChatUI
 };
 //# sourceMappingURL=index.mjs.map