@gendive/chatllm 0.3.0 → 0.3.1

package/dist/react/index.mjs

@@ -1,5 +1,5 @@
 // src/react/ChatUI.tsx
-import React8, { useState as useState8 } from "react";
+import React9, { useState as useState9 } from "react";
 
 // src/react/hooks/useChatUI.ts
 import { useState, useRef, useCallback, useEffect } from "react";
@@ -2944,433 +2944,58 @@ var MemoryPanel = ({
   );
 };
 
-// src/react/ChatUI.tsx
+// src/react/components/SettingsModal.tsx
+import { useState as useState8 } from "react";
 import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
-var DEFAULT_ACTIONS = [
-  {
-    id: "webSearch",
-    label: "\uC6F9 \uAC80\uC0C9",
-    icon: "search",
-    description: "\uC6F9\uC5D0\uC11C \uC815\uBCF4\uB97C \uAC80\uC0C9\uD569\uB2C8\uB2E4",
-    systemPrompt: "\uC6F9 \uAC80\uC0C9 \uACB0\uACFC\uB97C \uAE30\uBC18\uC73C\uB85C \uB2F5\uBCC0\uD574\uC8FC\uC138\uC694."
-  },
-  {
-    id: "imageGen",
-    label: "\uC774\uBBF8\uC9C0 \uC0DD\uC131",
-    icon: "image",
-    description: "\uD504\uB86C\uD504\uD2B8\uB85C \uC774\uBBF8\uC9C0\uB97C \uC0DD\uC131\uD569\uB2C8\uB2E4",
-    systemPrompt: "\uC774\uBBF8\uC9C0 \uC0DD\uC131 \uC694\uCCAD\uC785\uB2C8\uB2E4."
-  },
-  {
-    id: "codeAnalysis",
-    label: "\uCF54\uB4DC \uBD84\uC11D",
-    icon: "code",
-    description: "\uCF54\uB4DC\uB97C \uBD84\uC11D\uD558\uACE0 \uC124\uBA85\uD569\uB2C8\uB2E4",
-    systemPrompt: "\uCF54\uB4DC\uB97C \uBD84\uC11D\uD558\uACE0 \uC790\uC138\uD788 \uC124\uBA85\uD574\uC8FC\uC138\uC694."
-  },
-  {
-    id: "summarize",
-    label: "\uC694\uC57D",
-    icon: "document",
-    description: "\uAE34 \uD14D\uC2A4\uD2B8\uB97C \uC694\uC57D\uD569\uB2C8\uB2E4",
-    systemPrompt: "\uB2E4\uC74C \uB0B4\uC6A9\uC744 \uD575\uC2EC\uB9CC \uAC04\uACB0\uD558\uAC8C \uC694\uC57D\uD574\uC8FC\uC138\uC694."
-  }
-];
-var DEFAULT_TEMPLATES = [
-  {
-    id: "1",
-    title: "AI \uAE30\uBC18 \uAE00\uC4F0\uAE30",
-    description: "\uBE14\uB85C\uADF8, \uC774\uBA54\uC77C, \uBCF4\uACE0\uC11C \uC791\uC131 \uB3C4\uC6C0",
-    prompt: "\uB2E4\uC74C \uC8FC\uC81C\uC5D0 \uB300\uD574 \uBE14\uB85C\uADF8 \uAE00\uC744 \uC791\uC131\uD574\uC8FC\uC138\uC694: ",
-    category: "\uAE00\uC4F0\uAE30"
-  },
-  {
-    id: "2",
-    title: "\uCF54\uB4DC \uB9AC\uBDF0",
-    description: "\uCF54\uB4DC \uBD84\uC11D \uBC0F \uAC1C\uC120\uC810 \uC81C\uC548",
-    prompt: "\uB2E4\uC74C \uCF54\uB4DC\uB97C \uB9AC\uBDF0\uD558\uACE0 \uAC1C\uC120\uC810\uC744 \uC81C\uC548\uD574\uC8FC\uC138\uC694: ",
-    category: "\uAC1C\uBC1C"
-  },
-  {
-    id: "3",
-    title: "\uBC88\uC5ED \uB3C4\uC6B0\uBBF8",
-    description: "\uC790\uC5F0\uC2A4\uB7EC\uC6B4 \uBC88\uC5ED \uBC0F \uAD50\uC815",
-    prompt: "\uB2E4\uC74C \uD14D\uC2A4\uD2B8\uB97C \uC790\uC5F0\uC2A4\uB7FD\uAC8C \uBC88\uC5ED\uD574\uC8FC\uC138\uC694: ",
-    category: "\uBC88\uC5ED"
+var DEFAULT_PERSONALIZATION2 = {
+  responseStyle: {
+    warmth: "medium",
+    enthusiasm: "medium",
+    emojiUsage: "low",
+    formatting: "default",
+    verbosity: "balanced"
   },
-  {
-    id: "4",
-    title: "\uC694\uC57D \uC815\uB9AC",
-    description: "\uAE34 \uBB38\uC11C\uB97C \uD575\uC2EC\uB9CC \uC694\uC57D",
-    prompt: "\uB2E4\uC74C \uB0B4\uC6A9\uC744 \uD575\uC2EC\uB9CC \uC694\uC57D\uD574\uC8FC\uC138\uC694: ",
-    category: "\uC815\uB9AC"
-  }
-];
-var injectStyles = () => {
-  if (typeof document === "undefined") return;
-  const styleId = "chatllm-styles";
-  if (document.getElementById(styleId)) return;
-  const style = document.createElement("style");
-  style.id = styleId;
-  style.textContent = `
-    @keyframes chatllm-typing {
-      0%, 80%, 100% {
-        transform: scale(0);
-        opacity: 0.5;
-      }
-      40% {
-        transform: scale(1);
-        opacity: 1;
-      }
-    }
-
-    .chatllm-root {
-      --chatllm-primary: #3b82f6;
-      --chatllm-primary-hover: #2563eb;
-      --chatllm-primary-light: #dbeafe;
-      --chatllm-bg: #ffffff;
-      --chatllm-bg-secondary: #f9fafb;
-      --chatllm-bg-tertiary: #f3f4f6;
-      --chatllm-bg-hover: #f3f4f6;
-      --chatllm-bg-active: #eff6ff;
-      --chatllm-bg-disabled: #e5e7eb;
-      --chatllm-sidebar-bg: #ffffff;
-      --chatllm-input-bg: #f9fafb;
-      --chatllm-text: #1f2937;
-      --chatllm-text-muted: #6b7280;
-      --chatllm-border: #e5e7eb;
-      --chatllm-border-light: #f3f4f6;
-      --chatllm-error: #ef4444;
-      --chatllm-success: #22c55e;
-      --chatllm-user-avatar: #e5e7eb;
-      --chatllm-assistant-avatar: #dbeafe;
-    }
-
-    .chatllm-root.chatllm-dark {
-      --chatllm-primary: #60a5fa;
-      --chatllm-primary-hover: #3b82f6;
-      --chatllm-primary-light: #1e3a5f;
-      --chatllm-bg: #111827;
-      --chatllm-bg-secondary: #1f2937;
-      --chatllm-bg-tertiary: #374151;
-      --chatllm-bg-hover: #374151;
-      --chatllm-bg-active: #1e3a5f;
-      --chatllm-bg-disabled: #374151;
-      --chatllm-sidebar-bg: #111827;
-      --chatllm-input-bg: #1f2937;
-      --chatllm-text: #f9fafb;
-      --chatllm-text-muted: #9ca3af;
-      --chatllm-border: #374151;
-      --chatllm-border-light: #1f2937;
-      --chatllm-user-avatar: #374151;
-      --chatllm-assistant-avatar: #1e3a5f;
-    }
-
-    .chatllm-root * {
-      box-sizing: border-box;
-    }
-
-    .chatllm-root textarea::placeholder {
-      color: var(--chatllm-text-muted);
-    }
-
-    .chatllm-root button:focus-visible {
-      outline: 2px solid var(--chatllm-primary);
-      outline-offset: 2px;
-    }
-
-    .chatllm-message-list::-webkit-scrollbar {
-      width: 6px;
-    }
-
-    .chatllm-message-list::-webkit-scrollbar-track {
-      background: transparent;
-    }
-
-    .chatllm-message-list::-webkit-scrollbar-thumb {
-      background-color: var(--chatllm-border);
-      border-radius: 3px;
-    }
-  `;
-  document.head.appendChild(style);
+  userProfile: {},
+  useMemory: true,
+  language: "auto"
 };
-var ChatUI = ({
-  models,
-  actions = DEFAULT_ACTIONS,
-  templates = DEFAULT_TEMPLATES,
+var SettingsModal = ({
+  isOpen,
+  onClose,
   personalization,
-  apiKey,
-  apiEndpoint = "/api/chat",
-  theme,
-  showSidebar = true,
-  showSettings = true,
-  showModelSelector = true,
-  systemPrompt,
-  contextCompressionThreshold = 20,
-  keepRecentMessages = 6,
-  storageKey = "chatllm_sessions",
-  className = "",
-  onSendMessage,
-  onSessionChange,
-  onError
+  onPersonalizationChange,
+  apiKey = "",
+  onApiKeyChange,
+  onClearAllData,
+  apiKeyLabel = "API Key",
+  apiKeyDescription = "Cloud \uBAA8\uB378 \uC0AC\uC6A9\uC5D0 \uD544\uC694\uD569\uB2C8\uB2E4"
 }) => {
-  React8.useEffect(() => {
-    injectStyles();
-  }, []);
-  const hookOptions = {
-    models,
-    actions,
-    initialPersonalization: personalization,
-    apiKey,
-    apiEndpoint,
-    initialModel: models[0]?.id,
-    storageKey,
-    contextCompressionThreshold,
-    keepRecentMessages,
-    onSendMessage,
-    onSessionChange,
-    onError
+  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 {
-    sessions,
-    currentSession,
-    currentSessionId,
-    messages,
-    input,
-    isLoading,
-    selectedModel,
-    sidebarOpen,
-    settingsOpen,
-    quotedText,
-    selectedAction,
-    copiedMessageId,
-    editingMessageId,
-    personalization: currentPersonalization,
-    setInput,
-    sendMessage,
-    stopGeneration,
-    newSession,
-    selectSession,
-    deleteSession,
-    setModel,
-    toggleSidebar,
-    openSettings,
-    closeSettings,
-    setQuotedText,
-    setSelectedAction,
-    copyMessage,
-    startEdit,
-    cancelEdit,
-    saveEdit,
-    regenerate,
-    updatePersonalization
-  } = useChatUI(hookOptions);
-  const greeting = currentPersonalization.userProfile.nickname ? `\uC548\uB155\uD558\uC138\uC694, ${currentPersonalization.userProfile.nickname}\uB2D8` : "\uC548\uB155\uD558\uC138\uC694";
-  const handleTemplateClick = (template) => {
-    setInput(template.prompt);
-  };
-  const handleActionSelect = (action) => {
-    setSelectedAction(action);
-  };
-  const handleSubmit = () => {
-    sendMessage();
-  };
-  const [memoryPanelOpen, setMemoryPanelOpen] = useState8(false);
-  const memoryItems = React8.useMemo(() => {
-    const items = [];
-    if (currentSession?.contextSummary) {
-      items.push({
-        id: "context_summary",
-        key: "\uB300\uD654 \uCEE8\uD14D\uC2A4\uD2B8 \uC694\uC57D",
-        value: currentSession.contextSummary,
-        category: "context",
-        timestamp: currentSession.updatedAt
-      });
-    }
-    if (currentPersonalization.userProfile.nickname) {
-      items.push({
-        id: "pref_nickname",
-        key: "\uC0AC\uC6A9\uC790 \uB2C9\uB124\uC784",
-        value: currentPersonalization.userProfile.nickname,
-        category: "preference",
-        timestamp: Date.now()
-      });
-    }
-    if (currentPersonalization.userProfile.occupation) {
-      items.push({
-        id: "pref_occupation",
-        key: "\uC9C1\uC5C5/\uC5ED\uD560",
-        value: currentPersonalization.userProfile.occupation,
-        category: "preference",
-        timestamp: Date.now()
-      });
-    }
-    if (currentPersonalization.userProfile.additionalInfo) {
-      items.push({
-        id: "pref_info",
-        key: "\uCD94\uAC00 \uC815\uBCF4",
-        value: currentPersonalization.userProfile.additionalInfo,
-        category: "preference",
-        timestamp: Date.now()
-      });
-    }
-    return items;
-  }, [currentSession, currentPersonalization]);
-  const themeClass = theme?.mode === "dark" ? "chatllm-dark" : "";
-  return /* @__PURE__ */ jsxs10(
-    "div",
-    {
-      className: `chatllm-root ${themeClass} ${className}`,
-      style: {
-        display: "flex",
-        height: "100%",
-        backgroundColor: "var(--chatllm-bg-secondary)",
-        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
-      },
-      children: [
-        showSidebar && /* @__PURE__ */ jsx11(
-          ChatSidebar,
-          {
-            sessions,
-            currentSessionId,
-            onSelectSession: selectSession,
-            onNewSession: newSession,
-            onDeleteSession: deleteSession,
-            isOpen: sidebarOpen,
-            onToggle: toggleSidebar
-          }
-        ),
-        /* @__PURE__ */ jsxs10(
-          "main",
-          {
-            style: {
-              flex: 1,
-              display: "flex",
-              flexDirection: "column",
-              backgroundColor: "var(--chatllm-bg)",
-              minWidth: 0
-            },
-            children: [
-              /* @__PURE__ */ jsx11(
-                ChatHeader,
-                {
-                  title: currentSession?.title || "\uC0C8 \uB300\uD654",
-                  model: selectedModel,
-                  models,
-                  onModelChange: setModel,
-                  onSettingsOpen: openSettings,
-                  onSidebarToggle: toggleSidebar,
-                  sidebarOpen
-                }
-              ),
-              messages.length === 0 ? /* @__PURE__ */ jsx11(
-                EmptyState,
-                {
-                  greeting,
-                  templates,
-                  onTemplateClick: handleTemplateClick,
-                  actions,
-                  onActionSelect: handleActionSelect
-                }
-              ) : /* @__PURE__ */ jsx11(
-                MessageList,
-                {
-                  messages,
-                  isLoading,
-                  onCopy: copyMessage,
-                  onEdit: startEdit,
-                  onRegenerate: regenerate,
-                  onQuote: setQuotedText,
-                  copiedId: copiedMessageId,
-                  editingId: editingMessageId
-                }
-              ),
-              /* @__PURE__ */ jsx11(
-                ChatInput,
-                {
-                  value: input,
-                  onChange: setInput,
-                  onSubmit: handleSubmit,
-                  onStop: stopGeneration,
-                  isLoading,
-                  placeholder: "\uBA54\uC2DC\uC9C0\uB97C \uC785\uB825\uD558\uC138\uC694...",
-                  quotedText,
-                  onClearQuote: () => setQuotedText(null),
-                  selectedAction,
-                  onClearAction: () => setSelectedAction(null),
-                  onActionSelect: setSelectedAction,
-                  actions
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx11(
-          MemoryPanel,
-          {
-            items: memoryItems,
-            contextSummary: currentSession?.contextSummary,
-            isOpen: memoryPanelOpen,
-            onToggle: () => setMemoryPanelOpen(!memoryPanelOpen)
-          }
-        )
-      ]
-    }
-  );
-};
-
-// src/react/components/SettingsModal.tsx
-import { useState as useState9 } from "react";
-import { jsx as jsx12, jsxs as jsxs11 } 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] = useState9("general");
-  const [localApiKey, setLocalApiKey] = useState9(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 updateUserProfile = (key, value) => {
+    onPersonalizationChange({
+      ...personalization,
+      userProfile: {
+        ...personalization.userProfile,
+        [key]: value
+      }
+    });
   };
   const handleApiKeyChange = (value) => {
     setLocalApiKey(value);
     onApiKeyChange?.(value);
   };
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx11(
     "div",
     {
       className: "chatllm-settings-overlay",
@@ -3384,7 +3009,7 @@ var SettingsModal = ({
         zIndex: 1e3
       },
       onClick: onClose,
-      children: /* @__PURE__ */ jsxs11(
+      children: /* @__PURE__ */ jsxs10(
         "div",
         {
           className: "chatllm-settings-modal",
@@ -3402,7 +3027,7 @@ var SettingsModal = ({
           },
           onClick: (e) => e.stopPropagation(),
           children: [
-            /* @__PURE__ */ jsxs11(
+            /* @__PURE__ */ jsxs10(
               "div",
               {
                 style: {
@@ -3413,7 +3038,7 @@ var SettingsModal = ({
                   flexDirection: "column"
                 },
                 children: [
-                  /* @__PURE__ */ jsx12("div", { style: { padding: "16px", borderBottom: "1px solid var(--chatllm-border, #e5e7eb)" }, children: /* @__PURE__ */ jsx12(
+                  /* @__PURE__ */ jsx11("div", { style: { padding: "16px", borderBottom: "1px solid var(--chatllm-border, #e5e7eb)" }, children: /* @__PURE__ */ jsx11(
                     "button",
                     {
                       onClick: onClose,
@@ -3427,11 +3052,11 @@ var SettingsModal = ({
                         alignItems: "center",
                         justifyContent: "center"
                       },
-                      children: /* @__PURE__ */ jsx12(IconSvg, { name: "close-line", size: 20, color: "var(--chatllm-text-muted, #6b7280)" })
+                      children: /* @__PURE__ */ jsx11(IconSvg, { name: "close-line", size: 20, color: "var(--chatllm-text-muted, #6b7280)" })
                     }
                   ) }),
-                  /* @__PURE__ */ jsxs11("nav", { style: { flex: 1, padding: "8px" }, children: [
-                    /* @__PURE__ */ jsx12(
+                  /* @__PURE__ */ jsxs10("nav", { style: { flex: 1, padding: "8px" }, children: [
+                    /* @__PURE__ */ jsx11(
                       TabButton,
                       {
                         active: activeTab === "general",
@@ -3440,7 +3065,7 @@ var SettingsModal = ({
                         label: "\uC77C\uBC18"
                       }
                     ),
-                    /* @__PURE__ */ jsx12(
+                    /* @__PURE__ */ jsx11(
                       TabButton,
                       {
                         active: activeTab === "personalization",
@@ -3449,7 +3074,7 @@ var SettingsModal = ({
                         label: "\uAC1C\uC778 \uB9DE\uCDA4 \uC124\uC815"
                       }
                     ),
-                    /* @__PURE__ */ jsx12(
+                    /* @__PURE__ */ jsx11(
                       TabButton,
                       {
                         active: activeTab === "data",
@@ -3462,24 +3087,24 @@ var SettingsModal = ({
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs11("div", { style: { flex: 1, overflow: "auto", padding: "24px" }, children: [
-              activeTab === "general" && /* @__PURE__ */ jsxs11("div", { children: [
-                /* @__PURE__ */ jsx12("h2", { style: { fontSize: "20px", fontWeight: 600, marginBottom: "24px", color: "var(--chatllm-text, #1f2937)" }, children: "\uC77C\uBC18" }),
-                /* @__PURE__ */ jsx12(SettingRow, { label: "\uC5B8\uC5B4", children: /* @__PURE__ */ jsxs11(
+            /* @__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__ */ jsx12("option", { value: "auto", children: "\uC790\uB3D9 \uD0D0\uC9C0" }),
-                      /* @__PURE__ */ jsx12("option", { value: "ko", children: "\uD55C\uAD6D\uC5B4" }),
-                      /* @__PURE__ */ jsx12("option", { value: "en", children: "English" }),
-                      /* @__PURE__ */ jsx12("option", { value: "ja", children: "\u65E5\u672C\u8A9E" })
+                      /* @__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__ */ jsx12(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__ */ jsx12(
+                /* @__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),
@@ -3487,11 +3112,11 @@ var SettingsModal = ({
                     children: "\uCD08\uAE30\uD654"
                   }
                 ) }),
-                onApiKeyChange && /* @__PURE__ */ jsxs11("div", { style: { marginTop: "32px", paddingTop: "24px", borderTop: "1px solid var(--chatllm-border, #e5e7eb)" }, children: [
-                  /* @__PURE__ */ jsx12("h3", { style: { fontSize: "16px", fontWeight: 500, marginBottom: "16px", color: "var(--chatllm-text, #1f2937)" }, children: "API \uC124\uC815" }),
-                  /* @__PURE__ */ jsxs11("div", { children: [
-                    /* @__PURE__ */ jsx12("label", { style: { display: "block", fontSize: "14px", marginBottom: "8px", color: "var(--chatllm-text, #374151)" }, children: apiKeyLabel }),
-                    /* @__PURE__ */ jsx12(
+                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",
@@ -3501,18 +3126,18 @@ var SettingsModal = ({
                         style: inputStyle
                       }
                     ),
-                    /* @__PURE__ */ jsx12("p", { style: { fontSize: "12px", color: "var(--chatllm-text-muted, #9ca3af)", marginTop: "4px" }, children: apiKeyDescription })
+                    /* @__PURE__ */ jsx11("p", { style: { fontSize: "12px", color: "var(--chatllm-text-muted, #9ca3af)", marginTop: "4px" }, children: apiKeyDescription })
                   ] })
                 ] })
               ] }),
-              activeTab === "personalization" && /* @__PURE__ */ jsxs11("div", { children: [
-                /* @__PURE__ */ jsx12("h2", { style: { fontSize: "20px", fontWeight: 600, marginBottom: "24px", color: "var(--chatllm-text, #1f2937)" }, children: "\uAC1C\uC778 \uB9DE\uCDA4 \uC124\uC815" }),
-                /* @__PURE__ */ jsxs11("section", { style: { marginBottom: "32px" }, children: [
-                  /* @__PURE__ */ jsx12("h3", { style: { fontSize: "14px", fontWeight: 500, color: "var(--chatllm-text-muted, #6b7280)", marginBottom: "16px" }, children: "\uC0AC\uC6A9\uC790 \uD504\uB85C\uD544" }),
-                  /* @__PURE__ */ jsxs11("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
-                    /* @__PURE__ */ jsxs11("div", { children: [
-                      /* @__PURE__ */ jsx12("label", { style: labelStyle, children: "\uB2C9\uB124\uC784" }),
-                      /* @__PURE__ */ jsx12(
+              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",
@@ -3523,9 +3148,9 @@ var SettingsModal = ({
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ jsxs11("div", { children: [
-                      /* @__PURE__ */ jsx12("label", { style: labelStyle, children: "\uC9C1\uC5C5" }),
-                      /* @__PURE__ */ jsx12(
+                    /* @__PURE__ */ jsxs10("div", { children: [
+                      /* @__PURE__ */ jsx11("label", { style: labelStyle, children: "\uC9C1\uC5C5" }),
+                      /* @__PURE__ */ jsx11(
                         "input",
                         {
                           type: "text",
@@ -3536,9 +3161,9 @@ var SettingsModal = ({
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ jsxs11("div", { children: [
-                      /* @__PURE__ */ jsx12("label", { style: labelStyle, children: "\uCD94\uAC00 \uC815\uBCF4" }),
-                      /* @__PURE__ */ jsx12(
+                    /* @__PURE__ */ jsxs10("div", { children: [
+                      /* @__PURE__ */ jsx11("label", { style: labelStyle, children: "\uCD94\uAC00 \uC815\uBCF4" }),
+                      /* @__PURE__ */ jsx11(
                         "textarea",
                         {
                           value: personalization.userProfile.additionalInfo || "",
@@ -3551,65 +3176,65 @@ var SettingsModal = ({
                     ] })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs11("section", { children: [
-                  /* @__PURE__ */ jsx12("h3", { style: { fontSize: "14px", fontWeight: 500, color: "var(--chatllm-text-muted, #6b7280)", marginBottom: "16px" }, children: "\uC751\uB2F5 \uC2A4\uD0C0\uC77C" }),
-                  /* @__PURE__ */ jsx12(SettingRow, { label: "\uB530\uB73B\uD568", children: /* @__PURE__ */ jsxs11(
+                /* @__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__ */ jsx12("option", { value: "high", children: "\uB192\uC74C - \uCE5C\uADFC\uD558\uACE0 \uB530\uB73B\uD558\uAC8C" }),
-                        /* @__PURE__ */ jsx12("option", { value: "medium", children: "\uAE30\uBCF8\uAC12" }),
-                        /* @__PURE__ */ jsx12("option", { value: "low", children: "\uB0AE\uC74C - \uAC04\uACB0\uD558\uACE0 \uC0AC\uBB34\uC801\uC73C\uB85C" })
+                        /* @__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__ */ jsx12(SettingRow, { label: "\uC5F4\uC815\uC801", children: /* @__PURE__ */ jsxs11(
+                  /* @__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__ */ jsx12("option", { value: "high", children: "\uB192\uC74C - \uC801\uADF9\uC801\uC774\uACE0 \uD65C\uBC1C\uD558\uAC8C" }),
-                        /* @__PURE__ */ jsx12("option", { value: "medium", children: "\uAE30\uBCF8\uAC12" }),
-                        /* @__PURE__ */ jsx12("option", { value: "low", children: "\uB0AE\uC74C - \uCC28\uBD84\uD558\uACE0 \uC808\uC81C\uC788\uAC8C" })
+                        /* @__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__ */ jsx12(SettingRow, { label: "\uC774\uBAA8\uC9C0 \uC0AC\uC6A9", children: /* @__PURE__ */ jsxs11(
+                  /* @__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__ */ jsx12("option", { value: "high", children: "\uB192\uC74C - \uC790\uC8FC \uC0AC\uC6A9" }),
-                        /* @__PURE__ */ jsx12("option", { value: "medium", children: "\uAE30\uBCF8\uAC12" }),
-                        /* @__PURE__ */ jsx12("option", { value: "low", children: "\uB0AE\uC74C - \uAC70\uC758 \uC0AC\uC6A9 \uC548 \uD568" })
+                        /* @__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__ */ jsx12(SettingRow, { label: "\uC751\uB2F5 \uAE38\uC774", children: /* @__PURE__ */ jsxs11(
+                  /* @__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__ */ jsx12("option", { value: "detailed", children: "\uC0C1\uC138 - \uC790\uC138\uD558\uAC8C \uC124\uBA85" }),
-                        /* @__PURE__ */ jsx12("option", { value: "balanced", children: "\uAE30\uBCF8\uAC12" }),
-                        /* @__PURE__ */ jsx12("option", { value: "concise", children: "\uAC04\uACB0 - \uD575\uC2EC\uB9CC \uC694\uC57D" })
+                        /* @__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__ */ jsxs11("div", { children: [
-                /* @__PURE__ */ jsx12("h2", { style: { fontSize: "20px", fontWeight: 600, marginBottom: "24px", color: "var(--chatllm-text, #1f2937)" }, children: "\uB370\uC774\uD130 \uC81C\uC5B4" }),
-                /* @__PURE__ */ jsx12(SettingRow, { label: "\uBA54\uBAA8\uB9AC \uC0AC\uC6A9", description: "\uB300\uD654 \uCEE8\uD14D\uC2A4\uD2B8\uB97C \uAE30\uC5B5\uD569\uB2C8\uB2E4", children: /* @__PURE__ */ jsx12(
+              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 }),
@@ -3623,7 +3248,7 @@ var SettingsModal = ({
                       position: "relative",
                       transition: "background-color 0.2s"
                     },
-                    children: /* @__PURE__ */ jsx12(
+                    children: /* @__PURE__ */ jsx11(
                       "div",
                       {
                         style: {
@@ -3641,7 +3266,7 @@ var SettingsModal = ({
                     )
                   }
                 ) }),
-                onClearAllData && /* @__PURE__ */ jsx12(SettingRow, { label: "\uB300\uD654 \uAE30\uB85D \uC0AD\uC81C", description: "\uBAA8\uB4E0 \uB300\uD654 \uAE30\uB85D\uC744 \uC0AD\uC81C\uD569\uB2C8\uB2E4", children: /* @__PURE__ */ jsx12(
+                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: () => {
@@ -3661,7 +3286,7 @@ var SettingsModal = ({
     }
   );
 };
-var TabButton = ({ active, onClick, icon, label }) => /* @__PURE__ */ jsxs11(
+var TabButton = ({ active, onClick, icon, label }) => /* @__PURE__ */ jsxs10(
   "button",
   {
     onClick,
@@ -3682,12 +3307,12 @@ var TabButton = ({ active, onClick, icon, label }) => /* @__PURE__ */ jsxs11(
       marginBottom: "4px"
     },
     children: [
-      /* @__PURE__ */ jsx12(IconSvg, { name: icon, size: 20 }),
+      /* @__PURE__ */ jsx11(IconSvg, { name: icon, size: 20 }),
       label
     ]
   }
 );
-var SettingRow = ({ label, description, children }) => /* @__PURE__ */ jsxs11(
+var SettingRow = ({ label, description, children }) => /* @__PURE__ */ jsxs10(
   "div",
   {
     style: {
@@ -3698,9 +3323,9 @@ var SettingRow = ({ label, description, children }) => /* @__PURE__ */ jsxs11(
       borderBottom: "1px solid var(--chatllm-border-light, #f3f4f6)"
     },
     children: [
-      /* @__PURE__ */ jsxs11("div", { children: [
-        /* @__PURE__ */ jsx12("span", { style: { fontSize: "14px", color: "var(--chatllm-text, #374151)" }, children: label }),
-        description && /* @__PURE__ */ jsx12("p", { style: { fontSize: "12px", color: "var(--chatllm-text-muted, #9ca3af)", marginTop: "2px" }, children: description })
+      /* @__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
     ]
@@ -3749,6 +3374,398 @@ var buttonDangerStyle = {
   color: "var(--chatllm-danger, #dc2626)",
   cursor: "pointer"
 };
+
+// src/react/ChatUI.tsx
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+var DEFAULT_ACTIONS = [
+  {
+    id: "webSearch",
+    label: "\uC6F9 \uAC80\uC0C9",
+    icon: "search",
+    description: "\uC6F9\uC5D0\uC11C \uC815\uBCF4\uB97C \uAC80\uC0C9\uD569\uB2C8\uB2E4",
+    systemPrompt: "\uC6F9 \uAC80\uC0C9 \uACB0\uACFC\uB97C \uAE30\uBC18\uC73C\uB85C \uB2F5\uBCC0\uD574\uC8FC\uC138\uC694."
+  },
+  {
+    id: "imageGen",
+    label: "\uC774\uBBF8\uC9C0 \uC0DD\uC131",
+    icon: "image",
+    description: "\uD504\uB86C\uD504\uD2B8\uB85C \uC774\uBBF8\uC9C0\uB97C \uC0DD\uC131\uD569\uB2C8\uB2E4",
+    systemPrompt: "\uC774\uBBF8\uC9C0 \uC0DD\uC131 \uC694\uCCAD\uC785\uB2C8\uB2E4."
+  },
+  {
+    id: "codeAnalysis",
+    label: "\uCF54\uB4DC \uBD84\uC11D",
+    icon: "code",
+    description: "\uCF54\uB4DC\uB97C \uBD84\uC11D\uD558\uACE0 \uC124\uBA85\uD569\uB2C8\uB2E4",
+    systemPrompt: "\uCF54\uB4DC\uB97C \uBD84\uC11D\uD558\uACE0 \uC790\uC138\uD788 \uC124\uBA85\uD574\uC8FC\uC138\uC694."
+  },
+  {
+    id: "summarize",
+    label: "\uC694\uC57D",
+    icon: "document",
+    description: "\uAE34 \uD14D\uC2A4\uD2B8\uB97C \uC694\uC57D\uD569\uB2C8\uB2E4",
+    systemPrompt: "\uB2E4\uC74C \uB0B4\uC6A9\uC744 \uD575\uC2EC\uB9CC \uAC04\uACB0\uD558\uAC8C \uC694\uC57D\uD574\uC8FC\uC138\uC694."
+  }
+];
+var DEFAULT_TEMPLATES = [
+  {
+    id: "1",
+    title: "AI \uAE30\uBC18 \uAE00\uC4F0\uAE30",
+    description: "\uBE14\uB85C\uADF8, \uC774\uBA54\uC77C, \uBCF4\uACE0\uC11C \uC791\uC131 \uB3C4\uC6C0",
+    prompt: "\uB2E4\uC74C \uC8FC\uC81C\uC5D0 \uB300\uD574 \uBE14\uB85C\uADF8 \uAE00\uC744 \uC791\uC131\uD574\uC8FC\uC138\uC694: ",
+    category: "\uAE00\uC4F0\uAE30"
+  },
+  {
+    id: "2",
+    title: "\uCF54\uB4DC \uB9AC\uBDF0",
+    description: "\uCF54\uB4DC \uBD84\uC11D \uBC0F \uAC1C\uC120\uC810 \uC81C\uC548",
+    prompt: "\uB2E4\uC74C \uCF54\uB4DC\uB97C \uB9AC\uBDF0\uD558\uACE0 \uAC1C\uC120\uC810\uC744 \uC81C\uC548\uD574\uC8FC\uC138\uC694: ",
+    category: "\uAC1C\uBC1C"
+  },
+  {
+    id: "3",
+    title: "\uBC88\uC5ED \uB3C4\uC6B0\uBBF8",
+    description: "\uC790\uC5F0\uC2A4\uB7EC\uC6B4 \uBC88\uC5ED \uBC0F \uAD50\uC815",
+    prompt: "\uB2E4\uC74C \uD14D\uC2A4\uD2B8\uB97C \uC790\uC5F0\uC2A4\uB7FD\uAC8C \uBC88\uC5ED\uD574\uC8FC\uC138\uC694: ",
+    category: "\uBC88\uC5ED"
+  },
+  {
+    id: "4",
+    title: "\uC694\uC57D \uC815\uB9AC",
+    description: "\uAE34 \uBB38\uC11C\uB97C \uD575\uC2EC\uB9CC \uC694\uC57D",
+    prompt: "\uB2E4\uC74C \uB0B4\uC6A9\uC744 \uD575\uC2EC\uB9CC \uC694\uC57D\uD574\uC8FC\uC138\uC694: ",
+    category: "\uC815\uB9AC"
+  }
+];
+var injectStyles = () => {
+  if (typeof document === "undefined") return;
+  const styleId = "chatllm-styles";
+  if (document.getElementById(styleId)) return;
+  const style = document.createElement("style");
+  style.id = styleId;
+  style.textContent = `
+    @keyframes chatllm-typing {
+      0%, 80%, 100% {
+        transform: scale(0);
+        opacity: 0.5;
+      }
+      40% {
+        transform: scale(1);
+        opacity: 1;
+      }
+    }
+
+    .chatllm-root {
+      --chatllm-primary: #3b82f6;
+      --chatllm-primary-hover: #2563eb;
+      --chatllm-primary-light: #dbeafe;
+      --chatllm-bg: #ffffff;
+      --chatllm-bg-secondary: #f9fafb;
+      --chatllm-bg-tertiary: #f3f4f6;
+      --chatllm-bg-hover: #f3f4f6;
+      --chatllm-bg-active: #eff6ff;
+      --chatllm-bg-disabled: #e5e7eb;
+      --chatllm-sidebar-bg: #ffffff;
+      --chatllm-input-bg: #f9fafb;
+      --chatllm-text: #1f2937;
+      --chatllm-text-muted: #6b7280;
+      --chatllm-border: #e5e7eb;
+      --chatllm-border-light: #f3f4f6;
+      --chatllm-error: #ef4444;
+      --chatllm-success: #22c55e;
+      --chatllm-user-avatar: #e5e7eb;
+      --chatllm-assistant-avatar: #dbeafe;
+    }
+
+    .chatllm-root.chatllm-dark {
+      --chatllm-primary: #60a5fa;
+      --chatllm-primary-hover: #3b82f6;
+      --chatllm-primary-light: #1e3a5f;
+      --chatllm-bg: #111827;
+      --chatllm-bg-secondary: #1f2937;
+      --chatllm-bg-tertiary: #374151;
+      --chatllm-bg-hover: #374151;
+      --chatllm-bg-active: #1e3a5f;
+      --chatllm-bg-disabled: #374151;
+      --chatllm-sidebar-bg: #111827;
+      --chatllm-input-bg: #1f2937;
+      --chatllm-text: #f9fafb;
+      --chatllm-text-muted: #9ca3af;
+      --chatllm-border: #374151;
+      --chatllm-border-light: #1f2937;
+      --chatllm-user-avatar: #374151;
+      --chatllm-assistant-avatar: #1e3a5f;
+    }
+
+    .chatllm-root * {
+      box-sizing: border-box;
+    }
+
+    .chatllm-root textarea::placeholder {
+      color: var(--chatllm-text-muted);
+    }
+
+    .chatllm-root button:focus-visible {
+      outline: 2px solid var(--chatllm-primary);
+      outline-offset: 2px;
+    }
+
+    .chatllm-message-list::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    .chatllm-message-list::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    .chatllm-message-list::-webkit-scrollbar-thumb {
+      background-color: var(--chatllm-border);
+      border-radius: 3px;
+    }
+  `;
+  document.head.appendChild(style);
+};
+var ChatUI = ({
+  models,
+  actions = DEFAULT_ACTIONS,
+  templates = DEFAULT_TEMPLATES,
+  personalization,
+  apiKey,
+  onApiKeyChange,
+  apiEndpoint = "/api/chat",
+  theme,
+  showSidebar = true,
+  showSettings = true,
+  showModelSelector = true,
+  systemPrompt,
+  contextCompressionThreshold = 20,
+  keepRecentMessages = 6,
+  storageKey = "chatllm_sessions",
+  className = "",
+  onSendMessage,
+  onSessionChange,
+  onError
+}) => {
+  React9.useEffect(() => {
+    injectStyles();
+  }, []);
+  const hookOptions = {
+    models,
+    actions,
+    initialPersonalization: personalization,
+    apiKey,
+    apiEndpoint,
+    initialModel: models[0]?.id,
+    storageKey,
+    contextCompressionThreshold,
+    keepRecentMessages,
+    onSendMessage,
+    onSessionChange,
+    onError
+  };
+  const {
+    sessions,
+    currentSession,
+    currentSessionId,
+    messages,
+    input,
+    isLoading,
+    selectedModel,
+    sidebarOpen,
+    settingsOpen,
+    quotedText,
+    selectedAction,
+    copiedMessageId,
+    editingMessageId,
+    personalization: currentPersonalization,
+    setInput,
+    sendMessage,
+    stopGeneration,
+    newSession,
+    selectSession,
+    deleteSession,
+    setModel,
+    toggleSidebar,
+    openSettings,
+    closeSettings,
+    setQuotedText,
+    setSelectedAction,
+    copyMessage,
+    startEdit,
+    cancelEdit,
+    saveEdit,
+    regenerate,
+    updatePersonalization
+  } = useChatUI(hookOptions);
+  const greeting = currentPersonalization.userProfile.nickname ? `\uC548\uB155\uD558\uC138\uC694, ${currentPersonalization.userProfile.nickname}\uB2D8` : "\uC548\uB155\uD558\uC138\uC694";
+  const handleTemplateClick = (template) => {
+    setInput(template.prompt);
+  };
+  const handleActionSelect = (action) => {
+    setSelectedAction(action);
+  };
+  const handleSubmit = () => {
+    sendMessage();
+  };
+  const [memoryPanelOpen, setMemoryPanelOpen] = useState9(false);
+  const memoryItems = React9.useMemo(() => {
+    const items = [];
+    if (currentSession?.contextSummary) {
+      items.push({
+        id: "context_summary",
+        key: "\uB300\uD654 \uCEE8\uD14D\uC2A4\uD2B8 \uC694\uC57D",
+        value: currentSession.contextSummary,
+        category: "context",
+        timestamp: currentSession.updatedAt
+      });
+    }
+    if (currentPersonalization.userProfile.nickname) {
+      items.push({
+        id: "pref_nickname",
+        key: "\uC0AC\uC6A9\uC790 \uB2C9\uB124\uC784",
+        value: currentPersonalization.userProfile.nickname,
+        category: "preference",
+        timestamp: Date.now()
+      });
+    }
+    if (currentPersonalization.userProfile.occupation) {
+      items.push({
+        id: "pref_occupation",
+        key: "\uC9C1\uC5C5/\uC5ED\uD560",
+        value: currentPersonalization.userProfile.occupation,
+        category: "preference",
+        timestamp: Date.now()
+      });
+    }
+    if (currentPersonalization.userProfile.additionalInfo) {
+      items.push({
+        id: "pref_info",
+        key: "\uCD94\uAC00 \uC815\uBCF4",
+        value: currentPersonalization.userProfile.additionalInfo,
+        category: "preference",
+        timestamp: Date.now()
+      });
+    }
+    return items;
+  }, [currentSession, currentPersonalization]);
+  const themeClass = theme?.mode === "dark" ? "chatllm-dark" : "";
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      className: `chatllm-root ${themeClass} ${className}`,
+      style: {
+        display: "flex",
+        height: "100%",
+        backgroundColor: "var(--chatllm-bg-secondary)",
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
+      },
+      children: [
+        showSidebar && /* @__PURE__ */ jsx12(
+          ChatSidebar,
+          {
+            sessions,
+            currentSessionId,
+            onSelectSession: selectSession,
+            onNewSession: newSession,
+            onDeleteSession: deleteSession,
+            isOpen: sidebarOpen,
+            onToggle: toggleSidebar
+          }
+        ),
+        /* @__PURE__ */ jsxs11(
+          "main",
+          {
+            style: {
+              flex: 1,
+              display: "flex",
+              flexDirection: "column",
+              backgroundColor: "var(--chatllm-bg)",
+              minWidth: 0
+            },
+            children: [
+              /* @__PURE__ */ jsx12(
+                ChatHeader,
+                {
+                  title: currentSession?.title || "\uC0C8 \uB300\uD654",
+                  model: selectedModel,
+                  models,
+                  onModelChange: setModel,
+                  onSettingsOpen: openSettings,
+                  onSidebarToggle: toggleSidebar,
+                  sidebarOpen
+                }
+              ),
+              messages.length === 0 ? /* @__PURE__ */ jsx12(
+                EmptyState,
+                {
+                  greeting,
+                  templates,
+                  onTemplateClick: handleTemplateClick,
+                  actions,
+                  onActionSelect: handleActionSelect
+                }
+              ) : /* @__PURE__ */ jsx12(
+                MessageList,
+                {
+                  messages,
+                  isLoading,
+                  onCopy: copyMessage,
+                  onEdit: startEdit,
+                  onRegenerate: regenerate,
+                  onQuote: setQuotedText,
+                  copiedId: copiedMessageId,
+                  editingId: editingMessageId
+                }
+              ),
+              /* @__PURE__ */ jsx12(
+                ChatInput,
+                {
+                  value: input,
+                  onChange: setInput,
+                  onSubmit: handleSubmit,
+                  onStop: stopGeneration,
+                  isLoading,
+                  placeholder: "\uBA54\uC2DC\uC9C0\uB97C \uC785\uB825\uD558\uC138\uC694...",
+                  quotedText,
+                  onClearQuote: () => setQuotedText(null),
+                  selectedAction,
+                  onClearAction: () => setSelectedAction(null),
+                  onActionSelect: setSelectedAction,
+                  actions
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx12(
+          MemoryPanel,
+          {
+            items: memoryItems,
+            contextSummary: currentSession?.contextSummary,
+            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"
+          }
+        )
+      ]
+    }
+  );
+};
 export {
   ChatHeader,
   ChatInput,