@gendive/chatllm 0.1.0 → 0.3.0

package/dist/react/index.mjs

@@ -0,0 +1,3768 @@
+// src/react/ChatUI.tsx
+import React8, { useState as useState8 } from "react";
+
+// src/react/hooks/useChatUI.ts
+import { useState, useRef, useCallback, useEffect } from "react";
+
+// src/types.ts
+var DEFAULT_PERSONALIZATION = {
+  responseStyle: {
+    warmth: "medium",
+    enthusiasm: "medium",
+    emojiUsage: "low",
+    formatting: "default",
+    verbosity: "balanced"
+  },
+  userProfile: {},
+  useMemory: true,
+  language: "auto"
+};
+
+// src/react/hooks/useChatUI.ts
+var DEFAULT_STORAGE_KEY = "chatllm_sessions";
+var DEFAULT_COMPRESSION_THRESHOLD = 20;
+var DEFAULT_KEEP_RECENT = 6;
+var generateId = (prefix) => `${prefix}_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
+var generateTitle = (messages) => {
+  const firstUserMessage = messages.find((m) => m.role === "user");
+  if (!firstUserMessage) return "\uC0C8 \uB300\uD654";
+  const content = firstUserMessage.content;
+  return content.length > 30 ? content.substring(0, 30) + "..." : content;
+};
+var useChatUI = (options) => {
+  const {
+    models,
+    actions = [],
+    initialPersonalization,
+    apiKey,
+    apiEndpoint = "/api/chat",
+    initialModel,
+    storageKey = DEFAULT_STORAGE_KEY,
+    contextCompressionThreshold = DEFAULT_COMPRESSION_THRESHOLD,
+    keepRecentMessages = DEFAULT_KEEP_RECENT,
+    onSendMessage,
+    onSessionChange,
+    onError
+  } = options;
+  const [sessions, setSessions] = useState([]);
+  const [currentSessionId, setCurrentSessionId] = useState(null);
+  const [input, setInput] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectedModel, setSelectedModel] = useState(initialModel || models[0]?.id || "");
+  const [sidebarOpen, setSidebarOpen] = useState(true);
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [quotedText, setQuotedText] = useState(null);
+  const [selectedAction, setSelectedAction] = useState(null);
+  const [copiedMessageId, setCopiedMessageId] = useState(null);
+  const [editingMessageId, setEditingMessageId] = useState(null);
+  const [personalization, setPersonalization] = useState({
+    ...DEFAULT_PERSONALIZATION,
+    ...initialPersonalization
+  });
+  const abortControllerRef = useRef(null);
+  const currentSession = sessions.find((s) => s.id === currentSessionId) || null;
+  const messages = currentSession?.messages || [];
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const saved = localStorage.getItem(storageKey);
+    if (saved) {
+      try {
+        const parsed = JSON.parse(saved);
+        setSessions(parsed);
+        if (parsed.length > 0) {
+          setCurrentSessionId(parsed[0].id);
+          setSelectedModel(parsed[0].model);
+        }
+      } catch {
+      }
+    }
+    const savedPersonalization = localStorage.getItem(`${storageKey}_personalization`);
+    if (savedPersonalization) {
+      try {
+        setPersonalization(JSON.parse(savedPersonalization));
+      } catch {
+      }
+    }
+  }, [storageKey]);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (sessions.length > 0) {
+      localStorage.setItem(storageKey, JSON.stringify(sessions));
+    }
+  }, [sessions, storageKey]);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    localStorage.setItem(`${storageKey}_personalization`, JSON.stringify(personalization));
+  }, [personalization, storageKey]);
+  useEffect(() => {
+    onSessionChange?.(currentSession);
+  }, [currentSession, onSessionChange]);
+  const buildSystemPrompt = useCallback(() => {
+    const parts = [];
+    const { userProfile, responseStyle, language } = personalization;
+    if (userProfile.nickname) {
+      parts.push(`\uC0AC\uC6A9\uC790\uC758 \uC774\uB984/\uB2C9\uB124\uC784: ${userProfile.nickname}`);
+    }
+    if (userProfile.occupation) {
+      parts.push(`\uC0AC\uC6A9\uC790\uC758 \uC9C1\uC5C5: ${userProfile.occupation}`);
+    }
+    if (userProfile.additionalInfo) {
+      parts.push(`\uC0AC\uC6A9\uC790 \uCD94\uAC00 \uC815\uBCF4: ${userProfile.additionalInfo}`);
+    }
+    const styleDescriptions = [];
+    if (responseStyle.warmth === "high") styleDescriptions.push("\uB530\uB73B\uD558\uACE0 \uCE5C\uADFC\uD558\uAC8C");
+    else if (responseStyle.warmth === "low") styleDescriptions.push("\uAC04\uACB0\uD558\uACE0 \uC0AC\uBB34\uC801\uC73C\uB85C");
+    if (responseStyle.enthusiasm === "high") styleDescriptions.push("\uC5F4\uC815\uC801\uC774\uACE0 \uC801\uADF9\uC801\uC73C\uB85C");
+    else if (responseStyle.enthusiasm === "low") styleDescriptions.push("\uCC28\uBD84\uD558\uAC8C");
+    if (responseStyle.emojiUsage === "high") styleDescriptions.push("\uC774\uBAA8\uC9C0\uB97C \uC801\uADF9 \uD65C\uC6A9\uD574\uC11C");
+    else if (responseStyle.emojiUsage === "low") styleDescriptions.push("\uC774\uBAA8\uC9C0 \uC0AC\uC6A9\uC744 \uC790\uC81C\uD574\uC11C");
+    if (responseStyle.verbosity === "concise") styleDescriptions.push("\uD575\uC2EC\uB9CC \uAC04\uACB0\uD558\uAC8C");
+    else if (responseStyle.verbosity === "detailed") styleDescriptions.push("\uC0C1\uC138\uD558\uACE0 \uC790\uC138\uD558\uAC8C");
+    if (styleDescriptions.length > 0) {
+      parts.push(`\uC751\uB2F5 \uC2A4\uD0C0\uC77C: ${styleDescriptions.join(", ")} \uC751\uB2F5\uD574\uC8FC\uC138\uC694.`);
+    }
+    if (language !== "auto") {
+      const languageNames = { ko: "\uD55C\uAD6D\uC5B4", en: "\uC601\uC5B4", ja: "\uC77C\uBCF8\uC5B4" };
+      parts.push(`\uC751\uB2F5 \uC5B8\uC5B4: ${languageNames[language] || language}\uB85C \uC751\uB2F5\uD574\uC8FC\uC138\uC694.`);
+    }
+    return parts.length > 0 ? parts.join("\n") : "";
+  }, [personalization]);
+  const compressContext = useCallback(async (messagesToCompress, model) => {
+    const conversationText = messagesToCompress.map((m) => `${m.role === "user" ? "\uC0AC\uC6A9\uC790" : "AI"}: ${m.content}`).join("\n\n");
+    const summaryPrompt = `\uB2E4\uC74C \uB300\uD654 \uB0B4\uC6A9\uC744 \uD575\uC2EC \uC815\uBCF4\uB9CC \uC720\uC9C0\uD558\uBA74\uC11C \uAC04\uACB0\uD558\uAC8C \uC694\uC57D\uD574\uC8FC\uC138\uC694.
+\uC911\uC694\uD55C \uACB0\uC815\uC0AC\uD56D, \uC0AC\uC6A9\uC790 \uC694\uAD6C\uC0AC\uD56D, \uB9E5\uB77D \uC815\uBCF4\uB97C \uBCF4\uC874\uD558\uC138\uC694.
+
+\uB300\uD654:
+${conversationText}
+
+\uC694\uC57D:`;
+    try {
+      const response = await fetch(apiEndpoint, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          messages: [{ role: "user", content: summaryPrompt }],
+          model
+        })
+      });
+      if (!response.ok) return "";
+      const reader = response.body?.getReader();
+      if (!reader) return "";
+      const decoder = new TextDecoder();
+      let buffer = "";
+      let summary = "";
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split("\n");
+        buffer = lines.pop() || "";
+        for (const line of lines) {
+          if (line.startsWith("data: ")) {
+            const data = line.slice(6);
+            if (data === "[DONE]") continue;
+            try {
+              const parsed = JSON.parse(data);
+              if (parsed.content) summary += parsed.content;
+            } catch {
+            }
+          }
+        }
+      }
+      return summary;
+    } catch {
+      return "";
+    }
+  }, [apiEndpoint]);
+  const newSession = useCallback(() => {
+    const now = Date.now();
+    const newSess = {
+      id: generateId("session"),
+      title: "\uC0C8 \uB300\uD654",
+      messages: [],
+      model: selectedModel,
+      createdAt: now,
+      updatedAt: now
+    };
+    setSessions((prev) => [newSess, ...prev]);
+    setCurrentSessionId(newSess.id);
+  }, [selectedModel]);
+  const selectSession = useCallback((id) => {
+    const session = sessions.find((s) => s.id === id);
+    if (session) {
+      setCurrentSessionId(id);
+      setSelectedModel(session.model);
+    }
+  }, [sessions]);
+  const deleteSession = useCallback((id) => {
+    setSessions((prev) => {
+      const filtered = prev.filter((s) => s.id !== id);
+      if (currentSessionId === id) {
+        setCurrentSessionId(filtered.length > 0 ? filtered[0].id : null);
+      }
+      if (filtered.length === 0 && typeof window !== "undefined") {
+        localStorage.removeItem(storageKey);
+      }
+      return filtered;
+    });
+  }, [currentSessionId, storageKey]);
+  const setModel = useCallback((model) => {
+    setSelectedModel(model);
+    if (currentSessionId) {
+      setSessions(
+        (prev) => prev.map((s) => s.id === currentSessionId ? { ...s, model } : s)
+      );
+    }
+  }, [currentSessionId]);
+  const toggleSidebar = useCallback(() => setSidebarOpen((prev) => !prev), []);
+  const openSettings = useCallback(() => setSettingsOpen(true), []);
+  const closeSettings = useCallback(() => setSettingsOpen(false), []);
+  const copyMessage = useCallback((content, id) => {
+    if (typeof navigator !== "undefined") {
+      navigator.clipboard.writeText(content).then(() => {
+        setCopiedMessageId(id);
+        setTimeout(() => setCopiedMessageId(null), 2e3);
+      });
+    }
+  }, []);
+  const startEdit = useCallback((message) => {
+    if (message.role === "user") {
+      setEditingMessageId(message.id);
+    }
+  }, []);
+  const cancelEdit = useCallback(() => {
+    setEditingMessageId(null);
+  }, []);
+  const stopGeneration = useCallback(() => {
+    abortControllerRef.current?.abort();
+  }, []);
+  const updatePersonalization = useCallback((config) => {
+    setPersonalization((prev) => ({ ...prev, ...config }));
+  }, []);
+  const sendMessage = useCallback(async (content) => {
+    const messageContent = content || input;
+    if (!messageContent.trim() || isLoading) return;
+    let sessionId = currentSessionId;
+    if (!sessionId) {
+      const now = Date.now();
+      const newSess = {
+        id: generateId("session"),
+        title: "\uC0C8 \uB300\uD654",
+        messages: [],
+        model: selectedModel,
+        createdAt: now,
+        updatedAt: now
+      };
+      setSessions((prev) => [newSess, ...prev]);
+      sessionId = newSess.id;
+      setCurrentSessionId(sessionId);
+    }
+    let finalContent = messageContent.trim();
+    if (quotedText) {
+      finalContent = `"${quotedText}"
+
+${finalContent}`;
+    }
+    if (selectedAction) {
+      finalContent = `[${selectedAction.label}] ${finalContent}`;
+    }
+    const actionPrompt = selectedAction?.systemPrompt;
+    const userMessage = {
+      id: generateId("msg"),
+      role: "user",
+      content: finalContent,
+      timestamp: Date.now()
+    };
+    const assistantMessageId = generateId("msg");
+    const assistantMessage = {
+      id: assistantMessageId,
+      role: "assistant",
+      content: "",
+      model: selectedModel,
+      timestamp: Date.now()
+    };
+    setInput("");
+    setQuotedText(null);
+    setSelectedAction(null);
+    const capturedSessionId = sessionId;
+    setSessions(
+      (prev) => prev.map((s) => {
+        if (s.id === capturedSessionId) {
+          const newMessages = [...s.messages, userMessage, assistantMessage];
+          return {
+            ...s,
+            messages: newMessages,
+            title: s.messages.length === 0 ? generateTitle([userMessage]) : s.title,
+            updatedAt: Date.now()
+          };
+        }
+        return s;
+      })
+    );
+    setIsLoading(true);
+    abortControllerRef.current = new AbortController();
+    try {
+      const session = sessions.find((s) => s.id === capturedSessionId);
+      const existingMessages = session?.messages || [];
+      let messagesToSend = [...existingMessages, userMessage];
+      let contextSummary = session?.contextSummary;
+      if (messagesToSend.length > contextCompressionThreshold && !contextSummary) {
+        const toCompress = messagesToSend.slice(0, -keepRecentMessages);
+        const summary = await compressContext(toCompress, selectedModel);
+        if (summary) {
+          contextSummary = summary;
+          setSessions(
+            (prev) => prev.map(
+              (s) => s.id === capturedSessionId ? { ...s, contextSummary: summary, summaryAfterIndex: toCompress.length } : s
+            )
+          );
+        }
+      }
+      let chatMessages;
+      if (contextSummary) {
+        const recentMessages = messagesToSend.slice(-keepRecentMessages);
+        chatMessages = [
+          { role: "system", content: `[\uC774\uC804 \uB300\uD654 \uC694\uC57D]
+${contextSummary}` },
+          ...recentMessages.map((m) => ({ role: m.role, content: m.content }))
+        ];
+      } else {
+        chatMessages = messagesToSend.map((m) => ({ role: m.role, content: m.content }));
+      }
+      const baseSystemPrompt = buildSystemPrompt();
+      const combinedSystemPrompt = [baseSystemPrompt, actionPrompt].filter(Boolean).join("\n\n");
+      const messagesForApi = combinedSystemPrompt ? [{ role: "system", content: combinedSystemPrompt }, ...chatMessages] : chatMessages;
+      const modelConfig = models.find((m) => m.id === selectedModel);
+      const provider = modelConfig?.provider || "ollama";
+      let response;
+      if (onSendMessage) {
+        const result = await onSendMessage({
+          messages: messagesForApi,
+          model: selectedModel,
+          provider,
+          apiKey,
+          systemPrompt: combinedSystemPrompt
+        });
+        if (typeof result === "string") {
+          setSessions(
+            (prev) => prev.map((s) => {
+              if (s.id === capturedSessionId) {
+                return {
+                  ...s,
+                  messages: s.messages.map(
+                    (m) => m.id === assistantMessageId ? { ...m, content: result } : m
+                  )
+                };
+              }
+              return s;
+            })
+          );
+          return;
+        }
+        response = new Response(result);
+      } else {
+        response = await fetch(apiEndpoint, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            messages: messagesForApi,
+            model: selectedModel,
+            provider,
+            apiKey: provider === "devdive" ? apiKey : void 0
+          }),
+          signal: abortControllerRef.current.signal
+        });
+      }
+      if (!response.ok) throw new Error("API error");
+      const reader = response.body?.getReader();
+      if (!reader) throw new Error("No reader");
+      const decoder = new TextDecoder();
+      let buffer = "";
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split("\n");
+        buffer = lines.pop() || "";
+        for (const line of lines) {
+          if (line.startsWith("data: ")) {
+            const data = line.slice(6);
+            if (data === "[DONE]") continue;
+            try {
+              const parsed = JSON.parse(data);
+              if (parsed.content) {
+                setSessions(
+                  (prev) => prev.map((s) => {
+                    if (s.id === capturedSessionId) {
+                      return {
+                        ...s,
+                        messages: s.messages.map(
+                          (m) => m.id === assistantMessageId ? { ...m, content: m.content + parsed.content } : m
+                        )
+                      };
+                    }
+                    return s;
+                  })
+                );
+              }
+            } catch {
+            }
+          }
+        }
+      }
+    } catch (error) {
+      if (error instanceof Error && error.name === "AbortError") {
+        return;
+      }
+      const err = error instanceof Error ? error : new Error("Unknown error");
+      onError?.(err);
+      setSessions(
+        (prev) => prev.map((s) => {
+          if (s.id === capturedSessionId) {
+            return {
+              ...s,
+              messages: s.messages.map(
+                (m) => m.id === assistantMessageId ? { ...m, content: "\uC624\uB958\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4. \uB2E4\uC2DC \uC2DC\uB3C4\uD574\uC8FC\uC138\uC694." } : m
+              )
+            };
+          }
+          return s;
+        })
+      );
+    } finally {
+      setIsLoading(false);
+      abortControllerRef.current = null;
+    }
+  }, [
+    input,
+    isLoading,
+    currentSessionId,
+    sessions,
+    selectedModel,
+    quotedText,
+    selectedAction,
+    apiEndpoint,
+    apiKey,
+    models,
+    contextCompressionThreshold,
+    keepRecentMessages,
+    buildSystemPrompt,
+    compressContext,
+    onSendMessage,
+    onError
+  ]);
+  const saveEdit = useCallback(async (content) => {
+    if (!editingMessageId || !currentSession || !currentSessionId) return;
+    const messageIndex = currentSession.messages.findIndex((m) => m.id === editingMessageId);
+    if (messageIndex === -1) return;
+    const capturedSessionId = currentSessionId;
+    setSessions(
+      (prev) => prev.map((s) => {
+        if (s.id === capturedSessionId) {
+          const newMessages = s.messages.slice(0, messageIndex);
+          return { ...s, messages: newMessages, updatedAt: Date.now() };
+        }
+        return s;
+      })
+    );
+    setEditingMessageId(null);
+    await sendMessage(content);
+  }, [editingMessageId, currentSession, currentSessionId, sendMessage]);
+  const regenerate = useCallback(async (messageId) => {
+    if (!currentSession || !currentSessionId || isLoading) return;
+    const assistantIndex = currentSession.messages.findIndex((m) => m.id === messageId);
+    if (assistantIndex === -1) return;
+    const userMessage = currentSession.messages[assistantIndex - 1];
+    if (!userMessage || userMessage.role !== "user") return;
+    const capturedSessionId = currentSessionId;
+    setSessions(
+      (prev) => prev.map((s) => {
+        if (s.id === capturedSessionId) {
+          return {
+            ...s,
+            messages: s.messages.slice(0, assistantIndex),
+            updatedAt: Date.now()
+          };
+        }
+        return s;
+      })
+    );
+    setInput(userMessage.content);
+    await sendMessage(userMessage.content);
+  }, [currentSession, currentSessionId, isLoading, sendMessage]);
+  return {
+    // State
+    sessions,
+    currentSession,
+    currentSessionId,
+    messages,
+    input,
+    isLoading,
+    selectedModel,
+    sidebarOpen,
+    settingsOpen,
+    quotedText,
+    selectedAction,
+    copiedMessageId,
+    editingMessageId,
+    personalization,
+    // Actions
+    setInput,
+    sendMessage,
+    stopGeneration,
+    newSession,
+    selectSession,
+    deleteSession,
+    setModel,
+    toggleSidebar,
+    openSettings,
+    closeSettings,
+    setQuotedText,
+    setSelectedAction,
+    copyMessage,
+    startEdit,
+    cancelEdit,
+    saveEdit,
+    regenerate,
+    updatePersonalization
+  };
+};
+
+// src/react/components/Icon.tsx
+import { jsx } from "react/jsx-runtime";
+var Icon = ({
+  name,
+  size = 20,
+  color,
+  className = "",
+  onClick,
+  "aria-label": ariaLabel
+}) => {
+  const sizeValue = typeof size === "number" ? `${size}px` : size;
+  return /* @__PURE__ */ jsx(
+    "i",
+    {
+      className: `ri-${name} ${className}`,
+      style: {
+        fontSize: sizeValue,
+        color,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        lineHeight: 1
+      },
+      onClick,
+      "aria-label": ariaLabel,
+      role: onClick ? "button" : void 0,
+      tabIndex: onClick ? 0 : void 0
+    }
+  );
+};
+var IconSvg = ({
+  name,
+  size = 20,
+  color = "currentColor",
+  className = "",
+  style,
+  onClick,
+  "aria-label": ariaLabel
+}) => {
+  const sizeValue = typeof size === "number" ? size : parseInt(size, 10) || 20;
+  const icons = {
+    "menu-line": /* @__PURE__ */ jsx("path", { d: "M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z" }),
+    "close-line": /* @__PURE__ */ jsx("path", { d: "M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z" }),
+    "add-line": /* @__PURE__ */ jsx("path", { d: "M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z" }),
+    "chat-1-line": /* @__PURE__ */ jsx("path", { d: "M10 3h4a8 8 0 1 1 0 16v3.5c-5-2-12-5-12-11.5a8 8 0 0 1 8-8zm2 14h2a6 6 0 0 0 0-12h-4a6 6 0 0 0-6 6c0 3.61 2.462 5.966 8 8.48V17z" }),
+    "send-plane-fill": /* @__PURE__ */ jsx("path", { d: "M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z" }),
+    "send-plane-line": /* @__PURE__ */ jsx("path", { d: "M1.923 9.37c-.51-.205-.504-.51.034-.689l19.086-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.475.553-.717.07L12 14 3 10.5l8-4.25-9.077 3.12zM5.5 10.5l5.25 2.75 2.25 5.5 4-14-11.5 5.75z" }),
+    "search-line": /* @__PURE__ */ jsx("path", { d: "M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z" }),
+    "image-line": /* @__PURE__ */ jsx("path", { d: "M4.828 21l-.02.02-.021-.02H2.992A.993.993 0 0 1 2 20.007V3.993A1 1 0 0 1 2.992 3h18.016c.548 0 .992.445.992.993v16.014a1 1 0 0 1-.992.993H4.828zM20 15V5H4v14L14 9l6 6zm0 2.828l-6-6L6.828 19H20v-1.172zM8 11a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" }),
+    "code-s-slash-line": /* @__PURE__ */ jsx("path", { d: "M24 12l-5.657 5.657-1.414-1.414L21.172 12l-4.243-4.243 1.414-1.414L24 12zM2.828 12l4.243 4.243-1.414 1.414L0 12l5.657-5.657L7.07 7.757 2.828 12zm6.96 9H7.66l6.552-18h2.128L9.788 21z" }),
+    "file-text-line": /* @__PURE__ */ jsx("path", { d: "M21 8v12.993A1 1 0 0 1 20.007 22H3.993A.993.993 0 0 1 3 21.008V2.992C3 2.455 3.449 2 4.002 2h10.995L21 8zm-2 1h-5V4H5v16h14V9zM8 7h3v2H8V7zm0 4h8v2H8v-2zm0 4h8v2H8v-2z" }),
+    "delete-bin-line": /* @__PURE__ */ jsx("path", { d: "M17 6h5v2h-2v13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8H2V6h5V3a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v3zm1 2H6v12h12V8zm-9 3h2v6H9v-6zm4 0h2v6h-2v-6zM9 4v2h6V4H9z" }),
+    "edit-line": /* @__PURE__ */ jsx("path", { d: "M6.414 16L16.556 5.858l-1.414-1.414L5 14.586V16h1.414zm.829 2H3v-4.243L14.435 2.322a1 1 0 0 1 1.414 0l2.829 2.829a1 1 0 0 1 0 1.414L7.243 18zM3 20h18v2H3v-2z" }),
+    "check-line": /* @__PURE__ */ jsx("path", { d: "M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z" }),
+    "file-copy-line": /* @__PURE__ */ jsx("path", { d: "M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 20l.003-14c0-.552.45-1 1.007-1H7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z" }),
+    "refresh-line": /* @__PURE__ */ jsx("path", { d: "M5.463 4.433A9.961 9.961 0 0 1 12 2c5.523 0 10 4.477 10 10 0 2.136-.67 4.116-1.81 5.74L17 12h3a8 8 0 0 0-2.46-5.772A7.96 7.96 0 0 0 12 4a7.96 7.96 0 0 0-5.54 2.228l1.414 1.414A5.972 5.972 0 0 1 12 6a5.99 5.99 0 0 1 3.88 1.42l-1.42 1.42A4 4 0 0 0 8.54 12H6V7l.002-.002 1.461 1.435zM18.537 19.567A9.961 9.961 0 0 1 12 22C6.477 22 2 17.523 2 12c0-2.136.67-4.116 1.81-5.74L7 12H4a8 8 0 0 0 2.46 5.772A7.96 7.96 0 0 0 12 20a7.96 7.96 0 0 0 5.54-2.228l-1.414-1.414A5.972 5.972 0 0 1 12 18a5.99 5.99 0 0 1-3.88-1.42l1.42-1.42A4 4 0 0 0 15.46 12H18v5l-.002.002-1.461-1.435z" }),
+    "stop-circle-line": /* @__PURE__ */ jsx("path", { d: "M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM9 9h6v6H9V9z" }),
+    "settings-3-line": /* @__PURE__ */ jsx("path", { d: "M3.34 17a10.018 10.018 0 0 1-.978-2.326 3 3 0 0 0 .002-5.347A9.99 9.99 0 0 1 4.865 4.99a3 3 0 0 0 4.631-2.674 9.99 9.99 0 0 1 5.007.002 3 3 0 0 0 4.632 2.672 10.018 10.018 0 0 1 2.525 4.337 3 3 0 0 0-.002 5.347 9.99 9.99 0 0 1-2.525 4.337 3 3 0 0 0-4.631 2.674 9.99 9.99 0 0 1-5.007-.002 3 3 0 0 0-4.632-2.672A10.018 10.018 0 0 1 3.34 17zm5.66.196a4.993 4.993 0 0 1 2.25 2.77c.499.047 1 .048 1.499.001A4.993 4.993 0 0 1 15 17.197a4.993 4.993 0 0 1 3.525-.565c.29-.408.54-.843.748-1.298A4.993 4.993 0 0 1 18 12c0-1.26.47-2.437 1.273-3.334a8.126 8.126 0 0 0-.75-1.298A4.993 4.993 0 0 1 15 6.804a4.993 4.993 0 0 1-2.25-2.77c-.499-.047-1-.048-1.499-.001A4.993 4.993 0 0 1 9 6.804a4.993 4.993 0 0 1-3.525.565 7.99 7.99 0 0 0-.748 1.298A4.993 4.993 0 0 1 6 12c0 1.26-.47 2.437-1.273 3.334a8.126 8.126 0 0 0 .75 1.298A4.993 4.993 0 0 1 9 17.196zM12 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" }),
+    "loader-4-line": /* @__PURE__ */ jsx("path", { d: "M12 3a9 9 0 0 1 9 9h-2a7 7 0 0 0-7-7V3z" }),
+    "sparkling-line": /* @__PURE__ */ jsx("path", { d: "M14 4.438A2 2 0 0 1 15.438 3l4.62.764a2 2 0 0 1 1.112.529l.152.152a2 2 0 0 1 .529 1.112L22.5 10a2 2 0 0 1-.436 1.559l-.095.11L21 10.5l-3.3-3.3L14 4.438zm-3 1.124l5.5 5.5-9.086 9.086a2 2 0 0 1-2.828 0l-.172-.172a2 2 0 0 1 0-2.828L13.5 8.062 11 5.562zm-8.657 14.95a1 1 0 0 0 1.414 0l9.9-9.9-1.414-1.413-9.9 9.9a1 1 0 0 0 0 1.414z" }),
+    "arrow-down-s-line": /* @__PURE__ */ jsx("path", { d: "M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z" }),
+    "arrow-up-s-line": /* @__PURE__ */ jsx("path", { d: "M12 10.828l-4.95 4.95-1.414-1.414L12 8l6.364 6.364-1.414 1.414z" }),
+    "double-quotes-l": /* @__PURE__ */ jsx("path", { d: "M4.583 17.321C3.553 16.227 3 15 3 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 0 1-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179zm10 0C13.553 16.227 13 15 13 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 0 1-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179z" }),
+    "robot-line": /* @__PURE__ */ jsx("path", { d: "M13 4.055c4.5.497 8 4.312 8 8.945v9H3v-9c0-4.633 3.5-8.448 8-8.945V1h2v3.055zM5 20h14v-7a7 7 0 1 0-14 0v7zm2-7a5 5 0 0 1 10 0v4H7v-4zm2 0v2h2v-2H9zm4 0v2h2v-2h-2z" }),
+    "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" }),
+    "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(
+    "svg",
+    {
+      className,
+      width: sizeValue,
+      height: sizeValue,
+      viewBox: "0 0 24 24",
+      fill: color,
+      onClick,
+      "aria-label": ariaLabel,
+      role: onClick ? "button" : "img",
+      tabIndex: onClick ? 0 : void 0,
+      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" })
+    }
+  );
+};
+
+// src/react/components/ChatSidebar.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var formatDate = (timestamp) => {
+  const date = new Date(timestamp);
+  const now = /* @__PURE__ */ new Date();
+  const diff = now.getTime() - date.getTime();
+  const days = Math.floor(diff / (1e3 * 60 * 60 * 24));
+  if (days === 0) return "\uC624\uB298";
+  if (days === 1) return "\uC5B4\uC81C";
+  if (days < 7) return `${days}\uC77C \uC804`;
+  return date.toLocaleDateString("ko-KR");
+};
+var ChatSidebar = ({
+  sessions,
+  currentSessionId,
+  onSelectSession,
+  onNewSession,
+  onDeleteSession,
+  isOpen,
+  onToggle
+}) => {
+  return /* @__PURE__ */ jsx2(
+    "aside",
+    {
+      className: `chatllm-sidebar ${isOpen ? "chatllm-sidebar--open" : "chatllm-sidebar--closed"}`,
+      style: {
+        width: isOpen ? "288px" : "0",
+        flexShrink: 0,
+        backgroundColor: "var(--chatllm-sidebar-bg, #ffffff)",
+        borderRight: "1px solid var(--chatllm-border, #e5e7eb)",
+        transition: "width 0.3s ease",
+        overflow: "hidden"
+      },
+      children: /* @__PURE__ */ jsxs("div", { style: { width: "288px", height: "100%", display: "flex", flexDirection: "column" }, children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              padding: "16px",
+              borderBottom: "1px solid var(--chatllm-border-light, #f3f4f6)"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginBottom: "16px" }, children: [
+                /* @__PURE__ */ jsx2(
+                  "div",
+                  {
+                    style: {
+                      width: "32px",
+                      height: "32px",
+                      borderRadius: "8px",
+                      background: "linear-gradient(135deg, #3b82f6, #2563eb)",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center"
+                    },
+                    children: /* @__PURE__ */ jsx2(IconSvg, { name: "chat-1-line", size: 20, color: "#ffffff" })
+                  }
+                ),
+                /* @__PURE__ */ jsx2("span", { style: { fontWeight: 600, color: "var(--chatllm-text, #1f2937)" }, children: "ChatLLM" })
+              ] }),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: onNewSession,
+                  style: {
+                    width: "100%",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: "8px",
+                    padding: "10px 16px",
+                    backgroundColor: "var(--chatllm-primary, #3b82f6)",
+                    color: "#ffffff",
+                    border: "none",
+                    borderRadius: "8px",
+                    fontSize: "14px",
+                    fontWeight: 500,
+                    cursor: "pointer",
+                    transition: "background-color 0.2s"
+                  },
+                  onMouseOver: (e) => {
+                    e.currentTarget.style.backgroundColor = "var(--chatllm-primary-hover, #2563eb)";
+                  },
+                  onMouseOut: (e) => {
+                    e.currentTarget.style.backgroundColor = "var(--chatllm-primary, #3b82f6)";
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx2(IconSvg, { name: "add-line", size: 18, color: "#ffffff" }),
+                    "\uC0C8 \uB300\uD654"
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx2("div", { style: { flex: 1, overflow: "auto", padding: "8px" }, children: sessions.length === 0 ? /* @__PURE__ */ jsx2(
+          "div",
+          {
+            style: {
+              padding: "24px 16px",
+              textAlign: "center",
+              color: "var(--chatllm-text-muted, #9ca3af)",
+              fontSize: "14px"
+            },
+            children: "\uB300\uD654 \uAE30\uB85D\uC774 \uC5C6\uC2B5\uB2C8\uB2E4"
+          }
+        ) : sessions.map((session) => /* @__PURE__ */ jsx2(
+          "div",
+          {
+            onClick: () => onSelectSession(session.id),
+            style: {
+              padding: "12px",
+              marginBottom: "4px",
+              borderRadius: "8px",
+              backgroundColor: session.id === currentSessionId ? "var(--chatllm-bg-active, #eff6ff)" : "transparent",
+              cursor: "pointer",
+              transition: "background-color 0.2s"
+            },
+            onMouseOver: (e) => {
+              if (session.id !== currentSessionId) {
+                e.currentTarget.style.backgroundColor = "var(--chatllm-bg-hover, #f9fafb)";
+              }
+            },
+            onMouseOut: (e) => {
+              if (session.id !== currentSessionId) {
+                e.currentTarget.style.backgroundColor = "transparent";
+              }
+            },
+            children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" }, children: [
+              /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ jsx2(
+                  "div",
+                  {
+                    style: {
+                      fontWeight: session.id === currentSessionId ? 500 : 400,
+                      color: "var(--chatllm-text, #1f2937)",
+                      fontSize: "14px",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap"
+                    },
+                    children: session.title
+                  }
+                ),
+                /* @__PURE__ */ jsx2(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "12px",
+                      color: "var(--chatllm-text-muted, #9ca3af)",
+                      marginTop: "4px"
+                    },
+                    children: formatDate(session.updatedAt)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onDeleteSession(session.id);
+                  },
+                  style: {
+                    padding: "4px",
+                    backgroundColor: "transparent",
+                    border: "none",
+                    borderRadius: "4px",
+                    cursor: "pointer",
+                    opacity: 0.5,
+                    transition: "opacity 0.2s"
+                  },
+                  onMouseOver: (e) => {
+                    e.currentTarget.style.opacity = "1";
+                  },
+                  onMouseOut: (e) => {
+                    e.currentTarget.style.opacity = "0.5";
+                  },
+                  children: /* @__PURE__ */ jsx2(IconSvg, { name: "delete-bin-line", size: 16, color: "var(--chatllm-text-muted, #9ca3af)" })
+                }
+              )
+            ] })
+          },
+          session.id
+        )) }),
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            onClick: onToggle,
+            style: {
+              position: "absolute",
+              top: "16px",
+              right: "-40px",
+              width: "32px",
+              height: "32px",
+              backgroundColor: "var(--chatllm-bg, #ffffff)",
+              border: "1px solid var(--chatllm-border, #e5e7eb)",
+              borderRadius: "8px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              cursor: "pointer"
+            },
+            children: /* @__PURE__ */ jsx2(IconSvg, { name: isOpen ? "arrow-left-line" : "menu-line", size: 18 })
+          }
+        )
+      ] })
+    }
+  );
+};
+
+// src/react/components/ChatHeader.tsx
+import { useState as useState2 } from "react";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var ChatHeader = ({
+  title,
+  model,
+  models,
+  onModelChange,
+  onSettingsOpen,
+  onSidebarToggle,
+  sidebarOpen
+}) => {
+  const [modelDropdownOpen, setModelDropdownOpen] = useState2(false);
+  const currentModel = models.find((m) => m.id === model);
+  return /* @__PURE__ */ jsxs2(
+    "header",
+    {
+      className: "chatllm-header",
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: "12px 24px",
+        borderBottom: "1px solid var(--chatllm-border, #e5e7eb)",
+        backgroundColor: "var(--chatllm-bg, #ffffff)"
+      },
+      children: [
+        /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              onClick: onSidebarToggle,
+              style: {
+                width: "36px",
+                height: "36px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                backgroundColor: "transparent",
+                border: "none",
+                borderRadius: "8px",
+                cursor: "pointer",
+                transition: "background-color 0.2s"
+              },
+              onMouseOver: (e) => {
+                e.currentTarget.style.backgroundColor = "var(--chatllm-bg-hover, #f3f4f6)";
+              },
+              onMouseOut: (e) => {
+                e.currentTarget.style.backgroundColor = "transparent";
+              },
+              children: /* @__PURE__ */ jsx3(IconSvg, { name: "menu-line", size: 20, color: "var(--chatllm-text, #1f2937)" })
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            "h1",
+            {
+              style: {
+                fontSize: "16px",
+                fontWeight: 500,
+                color: "var(--chatllm-text, #1f2937)",
+                margin: 0
+              },
+              children: title
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+          /* @__PURE__ */ jsxs2("div", { style: { position: "relative" }, children: [
+            /* @__PURE__ */ jsxs2(
+              "button",
+              {
+                onClick: () => setModelDropdownOpen(!modelDropdownOpen),
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "8px",
+                  padding: "8px 12px",
+                  backgroundColor: "var(--chatllm-bg-secondary, #f9fafb)",
+                  border: "1px solid var(--chatllm-border, #e5e7eb)",
+                  borderRadius: "8px",
+                  cursor: "pointer",
+                  transition: "all 0.2s"
+                },
+                onMouseOver: (e) => {
+                  e.currentTarget.style.borderColor = "var(--chatllm-primary, #3b82f6)";
+                },
+                onMouseOut: (e) => {
+                  e.currentTarget.style.borderColor = "var(--chatllm-border, #e5e7eb)";
+                },
+                children: [
+                  /* @__PURE__ */ jsx3(IconSvg, { name: "robot-line", size: 16, color: "var(--chatllm-primary, #3b82f6)" }),
+                  /* @__PURE__ */ jsx3("span", { style: { fontSize: "14px", fontWeight: 500, color: "var(--chatllm-text, #1f2937)" }, children: currentModel?.name || model }),
+                  /* @__PURE__ */ jsx3(
+                    IconSvg,
+                    {
+                      name: modelDropdownOpen ? "arrow-up-s-line" : "arrow-down-s-line",
+                      size: 16,
+                      color: "var(--chatllm-text-muted, #9ca3af)"
+                    }
+                  )
+                ]
+              }
+            ),
+            modelDropdownOpen && /* @__PURE__ */ jsxs2(Fragment, { children: [
+              /* @__PURE__ */ jsx3(
+                "div",
+                {
+                  style: {
+                    position: "fixed",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    zIndex: 99
+                  },
+                  onClick: () => setModelDropdownOpen(false)
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    top: "100%",
+                    right: 0,
+                    marginTop: "8px",
+                    backgroundColor: "var(--chatllm-bg, #ffffff)",
+                    borderRadius: "12px",
+                    boxShadow: "0 4px 24px rgba(0, 0, 0, 0.12)",
+                    border: "1px solid var(--chatllm-border, #e5e7eb)",
+                    padding: "8px",
+                    minWidth: "220px",
+                    zIndex: 100
+                  },
+                  children: Array.from(new Set(models.map((m) => m.provider))).map((provider) => /* @__PURE__ */ jsxs2("div", { children: [
+                    /* @__PURE__ */ jsx3(
+                      "div",
+                      {
+                        style: {
+                          padding: "8px 12px",
+                          fontSize: "11px",
+                          fontWeight: 600,
+                          color: "var(--chatllm-text-muted, #9ca3af)",
+                          textTransform: "uppercase",
+                          letterSpacing: "0.05em"
+                        },
+                        children: provider
+                      }
+                    ),
+                    models.filter((m) => m.provider === provider).map((m) => /* @__PURE__ */ jsxs2(
+                      "button",
+                      {
+                        onClick: () => {
+                          onModelChange(m.id);
+                          setModelDropdownOpen(false);
+                        },
+                        style: {
+                          width: "100%",
+                          display: "flex",
+                          alignItems: "center",
+                          gap: "10px",
+                          padding: "10px 12px",
+                          backgroundColor: m.id === model ? "var(--chatllm-bg-active, #eff6ff)" : "transparent",
+                          border: "none",
+                          borderRadius: "8px",
+                          cursor: "pointer",
+                          textAlign: "left",
+                          transition: "background-color 0.2s"
+                        },
+                        onMouseOver: (e) => {
+                          if (m.id !== model) {
+                            e.currentTarget.style.backgroundColor = "var(--chatllm-bg-hover, #f9fafb)";
+                          }
+                        },
+                        onMouseOut: (e) => {
+                          if (m.id !== model) {
+                            e.currentTarget.style.backgroundColor = "transparent";
+                          }
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx3(
+                            "div",
+                            {
+                              style: {
+                                width: "28px",
+                                height: "28px",
+                                borderRadius: "6px",
+                                backgroundColor: m.id === model ? "var(--chatllm-primary, #3b82f6)" : "var(--chatllm-bg-secondary, #f3f4f6)",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center"
+                              },
+                              children: /* @__PURE__ */ jsx3(
+                                IconSvg,
+                                {
+                                  name: "robot-line",
+                                  size: 14,
+                                  color: m.id === model ? "#ffffff" : "var(--chatllm-text-muted, #9ca3af)"
+                                }
+                              )
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs2("div", { children: [
+                            /* @__PURE__ */ jsx3(
+                              "div",
+                              {
+                                style: {
+                                  fontSize: "14px",
+                                  fontWeight: m.id === model ? 500 : 400,
+                                  color: "var(--chatllm-text, #1f2937)"
+                                },
+                                children: m.name
+                              }
+                            ),
+                            m.description && /* @__PURE__ */ jsx3("div", { style: { fontSize: "12px", color: "var(--chatllm-text-muted, #9ca3af)" }, children: m.description })
+                          ] }),
+                          m.id === model && /* @__PURE__ */ jsx3(
+                            IconSvg,
+                            {
+                              name: "check-line",
+                              size: 16,
+                              color: "var(--chatllm-primary, #3b82f6)",
+                              className: "ml-auto"
+                            }
+                          )
+                        ]
+                      },
+                      m.id
+                    ))
+                  ] }, provider))
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              onClick: onSettingsOpen,
+              style: {
+                width: "36px",
+                height: "36px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                backgroundColor: "transparent",
+                border: "none",
+                borderRadius: "8px",
+                cursor: "pointer",
+                transition: "background-color 0.2s"
+              },
+              onMouseOver: (e) => {
+                e.currentTarget.style.backgroundColor = "var(--chatllm-bg-hover, #f3f4f6)";
+              },
+              onMouseOut: (e) => {
+                e.currentTarget.style.backgroundColor = "transparent";
+              },
+              children: /* @__PURE__ */ jsx3(IconSvg, { name: "settings-3-line", size: 20, color: "var(--chatllm-text-muted, #6b7280)" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+
+// src/react/components/ChatInput.tsx
+import { useRef as useRef2, useEffect as useEffect2, useState as useState3 } from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var ChatInput = ({
+  value,
+  onChange,
+  onSubmit,
+  onStop,
+  isLoading,
+  placeholder = "\uBA54\uC2DC\uC9C0\uB97C \uC785\uB825\uD558\uC138\uC694...",
+  quotedText,
+  onClearQuote,
+  selectedAction,
+  onClearAction,
+  onActionSelect,
+  actions = []
+}) => {
+  const textareaRef = useRef2(null);
+  const [actionMenuOpen, setActionMenuOpen] = useState3(false);
+  useEffect2(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = "auto";
+      textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, 200)}px`;
+    }
+  }, [value]);
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      onSubmit();
+    }
+  };
+  const handleActionSelect = (action) => {
+    onActionSelect?.(action);
+    setActionMenuOpen(false);
+  };
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: "chatllm-input-container",
+      style: {
+        padding: "16px 24px",
+        borderTop: "1px solid var(--chatllm-border, #e5e7eb)",
+        backgroundColor: "var(--chatllm-bg, #ffffff)"
+      },
+      children: [
+        (quotedText || selectedAction) && /* @__PURE__ */ jsxs3("div", { style: { display: "flex", gap: "8px", marginBottom: "12px", flexWrap: "wrap" }, children: [
+          quotedText && /* @__PURE__ */ jsxs3(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "8px",
+                padding: "8px 12px",
+                backgroundColor: "var(--chatllm-bg-secondary, #f9fafb)",
+                borderRadius: "8px",
+                borderLeft: "3px solid var(--chatllm-primary, #3b82f6)",
+                maxWidth: "100%"
+              },
+              children: [
+                /* @__PURE__ */ jsx4(IconSvg, { name: "double-quotes-l", size: 14, color: "var(--chatllm-primary, #3b82f6)" }),
+                /* @__PURE__ */ jsx4(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "13px",
+                      color: "var(--chatllm-text, #1f2937)",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap",
+                      maxWidth: "300px"
+                    },
+                    children: quotedText
+                  }
+                ),
+                /* @__PURE__ */ jsx4(
+                  "button",
+                  {
+                    onClick: onClearQuote,
+                    style: {
+                      padding: "2px",
+                      backgroundColor: "transparent",
+                      border: "none",
+                      borderRadius: "4px",
+                      cursor: "pointer",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center"
+                    },
+                    children: /* @__PURE__ */ jsx4(IconSvg, { name: "close-line", size: 14, color: "var(--chatllm-text-muted, #9ca3af)" })
+                  }
+                )
+              ]
+            }
+          ),
+          selectedAction && /* @__PURE__ */ jsxs3(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "6px",
+                padding: "6px 12px",
+                backgroundColor: "var(--chatllm-primary-light, #dbeafe)",
+                borderRadius: "16px",
+                fontSize: "13px",
+                fontWeight: 500,
+                color: "var(--chatllm-primary, #3b82f6)"
+              },
+              children: [
+                /* @__PURE__ */ jsx4(IconSvg, { name: "sparkling-line", size: 14, color: "var(--chatllm-primary, #3b82f6)" }),
+                selectedAction.label,
+                /* @__PURE__ */ jsx4(
+                  "button",
+                  {
+                    onClick: onClearAction,
+                    style: {
+                      padding: "2px",
+                      backgroundColor: "transparent",
+                      border: "none",
+                      borderRadius: "4px",
+                      cursor: "pointer",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center"
+                    },
+                    children: /* @__PURE__ */ jsx4(IconSvg, { name: "close-line", size: 14, color: "var(--chatllm-primary, #3b82f6)" })
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "flex-end",
+              gap: "12px",
+              padding: "12px 16px",
+              backgroundColor: "var(--chatllm-input-bg, #f9fafb)",
+              borderRadius: "16px",
+              border: "1px solid var(--chatllm-border, #e5e7eb)",
+              transition: "border-color 0.2s, box-shadow 0.2s"
+            },
+            children: [
+              actions.length > 0 && /* @__PURE__ */ jsxs3("div", { style: { position: "relative" }, children: [
+                /* @__PURE__ */ jsx4(
+                  "button",
+                  {
+                    onClick: () => setActionMenuOpen(!actionMenuOpen),
+                    style: {
+                      width: "36px",
+                      height: "36px",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      backgroundColor: "var(--chatllm-bg, #ffffff)",
+                      border: "1px solid var(--chatllm-border, #e5e7eb)",
+                      borderRadius: "8px",
+                      cursor: "pointer",
+                      transition: "background-color 0.2s"
+                    },
+                    onMouseOver: (e) => {
+                      e.currentTarget.style.backgroundColor = "var(--chatllm-bg-hover, #f3f4f6)";
+                    },
+                    onMouseOut: (e) => {
+                      e.currentTarget.style.backgroundColor = "var(--chatllm-bg, #ffffff)";
+                    },
+                    children: /* @__PURE__ */ jsx4(IconSvg, { name: "add-line", size: 20, color: "var(--chatllm-text, #1f2937)" })
+                  }
+                ),
+                actionMenuOpen && /* @__PURE__ */ jsx4(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      bottom: "100%",
+                      left: 0,
+                      marginBottom: "8px",
+                      backgroundColor: "var(--chatllm-bg, #ffffff)",
+                      borderRadius: "12px",
+                      boxShadow: "0 4px 24px rgba(0, 0, 0, 0.12)",
+                      border: "1px solid var(--chatllm-border, #e5e7eb)",
+                      padding: "8px",
+                      minWidth: "200px",
+                      zIndex: 100
+                    },
+                    children: actions.map((action) => /* @__PURE__ */ jsxs3(
+                      "button",
+                      {
+                        onClick: () => handleActionSelect(action),
+                        style: {
+                          width: "100%",
+                          display: "flex",
+                          alignItems: "center",
+                          gap: "12px",
+                          padding: "10px 12px",
+                          backgroundColor: "transparent",
+                          border: "none",
+                          borderRadius: "8px",
+                          cursor: "pointer",
+                          textAlign: "left",
+                          transition: "background-color 0.2s"
+                        },
+                        onMouseOver: (e) => {
+                          e.currentTarget.style.backgroundColor = "var(--chatllm-bg-hover, #f3f4f6)";
+                        },
+                        onMouseOut: (e) => {
+                          e.currentTarget.style.backgroundColor = "transparent";
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx4(
+                            "div",
+                            {
+                              style: {
+                                width: "32px",
+                                height: "32px",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                backgroundColor: "var(--chatllm-primary-light, #dbeafe)",
+                                borderRadius: "8px"
+                              },
+                              children: /* @__PURE__ */ jsx4(
+                                IconSvg,
+                                {
+                                  name: action.icon === "search" ? "search-line" : action.icon === "image" ? "image-line" : action.icon === "code" ? "code-s-slash-line" : "file-text-line",
+                                  size: 18,
+                                  color: "var(--chatllm-primary, #3b82f6)"
+                                }
+                              )
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs3("div", { children: [
+                            /* @__PURE__ */ jsx4("div", { style: { fontSize: "14px", fontWeight: 500, color: "var(--chatllm-text, #1f2937)" }, children: action.label }),
+                            /* @__PURE__ */ jsx4("div", { style: { fontSize: "12px", color: "var(--chatllm-text-muted, #9ca3af)" }, children: action.description })
+                          ] })
+                        ]
+                      },
+                      action.id
+                    ))
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx4(
+                "textarea",
+                {
+                  ref: textareaRef,
+                  value,
+                  onChange: (e) => onChange(e.target.value),
+                  onKeyDown: handleKeyDown,
+                  placeholder,
+                  rows: 1,
+                  style: {
+                    flex: 1,
+                    minHeight: "24px",
+                    maxHeight: "200px",
+                    padding: "6px 0",
+                    backgroundColor: "transparent",
+                    border: "none",
+                    outline: "none",
+                    fontSize: "15px",
+                    lineHeight: "1.5",
+                    resize: "none",
+                    color: "var(--chatllm-text, #1f2937)"
+                  }
+                }
+              ),
+              isLoading ? /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  onClick: onStop,
+                  style: {
+                    width: "36px",
+                    height: "36px",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    backgroundColor: "var(--chatllm-error, #ef4444)",
+                    border: "none",
+                    borderRadius: "8px",
+                    cursor: "pointer",
+                    transition: "background-color 0.2s"
+                  },
+                  children: /* @__PURE__ */ jsx4(IconSvg, { name: "stop-circle-line", size: 20, color: "#ffffff" })
+                }
+              ) : /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  onClick: onSubmit,
+                  disabled: !value.trim(),
+                  style: {
+                    width: "36px",
+                    height: "36px",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    backgroundColor: value.trim() ? "var(--chatllm-primary, #3b82f6)" : "var(--chatllm-bg-disabled, #e5e7eb)",
+                    border: "none",
+                    borderRadius: "8px",
+                    cursor: value.trim() ? "pointer" : "not-allowed",
+                    transition: "background-color 0.2s"
+                  },
+                  children: /* @__PURE__ */ jsx4(IconSvg, { name: "send-plane-fill", size: 18, color: value.trim() ? "#ffffff" : "#9ca3af" })
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/react/components/MessageList.tsx
+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,
+  isCopied,
+  isEditing,
+  onCopy,
+  onEdit,
+  onRegenerate,
+  onQuote,
+  alternatives,
+  activeAlternativeIndex = 0,
+  onAlternativeChange
+}) => {
+  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;
+  const displayModel = alternatives && alternatives.length > 0 && activeAlternativeIndex > 0 ? alternatives[activeAlternativeIndex - 1]?.model : message.model;
+  const handleMouseUp = () => {
+    if (!onQuote) return;
+    const selection = window.getSelection();
+    const text = selection?.toString().trim();
+    if (text && text.length > 0) {
+    }
+  };
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: `chatllm-message chatllm-message--${message.role}`,
+      style: {
+        display: "flex",
+        gap: "12px",
+        padding: "16px 24px",
+        backgroundColor: isUser ? "transparent" : "var(--chatllm-bg-secondary, #f9fafb)"
+      },
+      onMouseEnter: () => setShowActions(true),
+      onMouseLeave: () => setShowActions(false),
+      onMouseUp: handleMouseUp,
+      children: [
+        /* @__PURE__ */ jsx7(
+          "div",
+          {
+            style: {
+              width: "32px",
+              height: "32px",
+              borderRadius: "8px",
+              backgroundColor: isUser ? "var(--chatllm-user-avatar, #e5e7eb)" : "var(--chatllm-assistant-avatar, #dbeafe)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: 0
+            },
+            children: /* @__PURE__ */ jsx7(
+              IconSvg,
+              {
+                name: isUser ? "user-3-line" : "robot-line",
+                size: 18,
+                color: isUser ? "var(--chatllm-text-muted, #6b7280)" : "var(--chatllm-primary, #3b82f6)"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs6("div", { style: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ jsxs6(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "8px",
+                marginBottom: "8px"
+              },
+              children: [
+                /* @__PURE__ */ jsx7(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "14px",
+                      fontWeight: 500,
+                      color: "var(--chatllm-text, #1f2937)"
+                    },
+                    children: isUser ? "\uB098" : "AI"
+                  }
+                ),
+                displayModel && /* @__PURE__ */ jsx7(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "12px",
+                      padding: "2px 8px",
+                      backgroundColor: "var(--chatllm-bg-tertiary, #f3f4f6)",
+                      borderRadius: "4px",
+                      color: "var(--chatllm-text-muted, #6b7280)"
+                    },
+                    children: displayModel
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs6(
+            "div",
+            {
+              style: {
+                wordBreak: "break-word"
+              },
+              children: [
+                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: {
+                      display: "inline-flex",
+                      gap: "4px"
+                    },
+                    children: [
+                      /* @__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__ */ jsxs6(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "8px",
+                marginTop: "12px",
+                paddingTop: "12px",
+                borderTop: "1px solid var(--chatllm-border-light, #f3f4f6)"
+              },
+              children: [
+                /* @__PURE__ */ jsx7(
+                  "button",
+                  {
+                    onClick: () => onAlternativeChange?.(Math.max(0, activeAlternativeIndex - 1)),
+                    disabled: activeAlternativeIndex === 0,
+                    style: {
+                      ...navButtonStyle,
+                      opacity: activeAlternativeIndex === 0 ? 0.5 : 1,
+                      cursor: activeAlternativeIndex === 0 ? "not-allowed" : "pointer"
+                    },
+                    children: /* @__PURE__ */ jsx7(IconSvg, { name: "arrow-left-line", size: 14 })
+                  }
+                ),
+                /* @__PURE__ */ jsxs6("span", { style: { fontSize: "12px", color: "var(--chatllm-text-muted, #9ca3af)" }, children: [
+                  activeAlternativeIndex + 1,
+                  " / ",
+                  alternatives.length + 1
+                ] }),
+                /* @__PURE__ */ jsx7(
+                  "button",
+                  {
+                    onClick: () => onAlternativeChange?.(Math.min(alternatives.length, activeAlternativeIndex + 1)),
+                    disabled: activeAlternativeIndex === alternatives.length,
+                    style: {
+                      ...navButtonStyle,
+                      opacity: activeAlternativeIndex === alternatives.length ? 0.5 : 1,
+                      cursor: activeAlternativeIndex === alternatives.length ? "not-allowed" : "pointer"
+                    },
+                    children: /* @__PURE__ */ jsx7(IconSvg, { name: "arrow-right-line", size: 14 })
+                  }
+                )
+              ]
+            }
+          ),
+          showActions && !isLoading && /* @__PURE__ */ jsxs6(
+            "div",
+            {
+              style: {
+                display: "flex",
+                gap: "4px",
+                marginTop: "12px"
+              },
+              children: [
+                /* @__PURE__ */ jsx7("button", { onClick: onCopy, style: actionButtonStyle, title: "\uBCF5\uC0AC", children: /* @__PURE__ */ jsx7(
+                  IconSvg,
+                  {
+                    name: isCopied ? "check-line" : "file-copy-line",
+                    size: 16,
+                    color: isCopied ? "var(--chatllm-success, #22c55e)" : "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)" }) })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var dotStyle = {
+  width: "8px",
+  height: "8px",
+  borderRadius: "50%",
+  backgroundColor: "var(--chatllm-primary, #3b82f6)",
+  animation: "chatllm-typing 1.4s infinite ease-in-out both"
+};
+var actionButtonStyle = {
+  padding: "6px",
+  backgroundColor: "transparent",
+  border: "none",
+  borderRadius: "6px",
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  transition: "background-color 0.2s"
+};
+var navButtonStyle = {
+  width: "24px",
+  height: "24px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: "var(--chatllm-bg, #ffffff)",
+  border: "1px solid var(--chatllm-border, #e5e7eb)",
+  borderRadius: "6px"
+};
+
+// src/react/components/MessageList.tsx
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var MessageList = ({
+  messages,
+  isLoading,
+  onCopy,
+  onEdit,
+  onRegenerate,
+  onQuote,
+  copiedId,
+  editingId
+}) => {
+  const messagesEndRef = useRef3(null);
+  const containerRef = useRef3(null);
+  const [selectedText, setSelectedText] = useState6("");
+  const [selectionPosition, setSelectionPosition] = useState6(null);
+  useEffect3(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+  const handleMouseUp = useCallback2(() => {
+    const selection = window.getSelection();
+    const text = selection?.toString().trim();
+    if (text && text.length > 0) {
+      const range = selection?.getRangeAt(0);
+      const rect = range?.getBoundingClientRect();
+      if (rect && containerRef.current) {
+        const containerRect = containerRef.current.getBoundingClientRect();
+        setSelectedText(text);
+        setSelectionPosition({
+          x: rect.left - containerRect.left + rect.width / 2,
+          y: rect.top - containerRect.top - 10
+        });
+      }
+    } else {
+      setTimeout(() => {
+        const currentSelection = window.getSelection()?.toString().trim();
+        if (!currentSelection) {
+          setSelectionPosition(null);
+        }
+      }, 100);
+    }
+  }, []);
+  const handleQuote = () => {
+    if (selectedText && onQuote) {
+      onQuote(selectedText);
+      setSelectionPosition(null);
+      setSelectedText("");
+      window.getSelection()?.removeAllRanges();
+    }
+  };
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      ref: containerRef,
+      className: "chatllm-message-list",
+      style: {
+        flex: 1,
+        overflow: "auto",
+        position: "relative"
+      },
+      onMouseUp: handleMouseUp,
+      children: [
+        messages.map((message, index) => /* @__PURE__ */ jsx8(
+          MessageBubble,
+          {
+            message,
+            isLoading: isLoading && index === messages.length - 1 && message.role === "assistant",
+            isCopied: copiedId === message.id,
+            isEditing: editingId === message.id,
+            onCopy: () => onCopy(message.content, message.id),
+            onEdit: () => onEdit(message),
+            onRegenerate: message.role === "assistant" ? () => onRegenerate(message.id) : void 0,
+            onQuote,
+            alternatives: message.alternatives
+          },
+          message.id
+        )),
+        selectionPosition && /* @__PURE__ */ jsxs7(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: selectionPosition.x,
+              top: selectionPosition.y,
+              transform: "translate(-50%, -100%)",
+              zIndex: 50
+            },
+            children: [
+              /* @__PURE__ */ jsxs7(
+                "button",
+                {
+                  onClick: handleQuote,
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "6px",
+                    padding: "8px 12px",
+                    backgroundColor: "var(--chatllm-text, #1f2937)",
+                    color: "#ffffff",
+                    border: "none",
+                    borderRadius: "8px",
+                    fontSize: "13px",
+                    fontWeight: 500,
+                    cursor: "pointer",
+                    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx8(IconSvg, { name: "double-quotes-l", size: 14, color: "#ffffff" }),
+                    "\uC778\uC6A9\uD558\uAE30"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx8(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    left: "50%",
+                    bottom: "-6px",
+                    transform: "translateX(-50%)",
+                    width: 0,
+                    height: 0,
+                    borderLeft: "6px solid transparent",
+                    borderRight: "6px solid transparent",
+                    borderTop: "6px solid var(--chatllm-text, #1f2937)"
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx8("div", { ref: messagesEndRef })
+      ]
+    }
+  );
+};
+
+// src/react/components/EmptyState.tsx
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var EmptyState = ({
+  greeting,
+  templates = [],
+  onTemplateClick,
+  actions = [],
+  onActionSelect
+}) => {
+  const getActionIcon = (icon) => {
+    const iconMap = {
+      search: "search-line",
+      image: "image-line",
+      code: "code-s-slash-line",
+      document: "file-text-line"
+    };
+    return iconMap[icon] || "sparkling-line";
+  };
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      className: "chatllm-empty-state",
+      style: {
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "48px 24px",
+        textAlign: "center"
+      },
+      children: [
+        /* @__PURE__ */ jsx9(
+          "div",
+          {
+            style: {
+              width: "64px",
+              height: "64px",
+              borderRadius: "16px",
+              background: "linear-gradient(135deg, #3b82f6, #8b5cf6)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              marginBottom: "24px",
+              boxShadow: "0 8px 32px rgba(59, 130, 246, 0.25)"
+            },
+            children: /* @__PURE__ */ jsx9(IconSvg, { name: "sparkling-line", size: 32, color: "#ffffff" })
+          }
+        ),
+        /* @__PURE__ */ jsx9(
+          "h1",
+          {
+            style: {
+              fontSize: "28px",
+              fontWeight: 600,
+              color: "var(--chatllm-text, #1f2937)",
+              marginBottom: "8px"
+            },
+            children: greeting
+          }
+        ),
+        /* @__PURE__ */ jsx9(
+          "p",
+          {
+            style: {
+              fontSize: "16px",
+              color: "var(--chatllm-text-muted, #6b7280)",
+              marginBottom: "32px"
+            },
+            children: "\uBB34\uC5C7\uC744 \uB3C4\uC640\uB4DC\uB9B4\uAE4C\uC694?"
+          }
+        ),
+        actions.length > 0 && /* @__PURE__ */ jsx9(
+          "div",
+          {
+            style: {
+              display: "grid",
+              gridTemplateColumns: "repeat(auto-fit, minmax(140px, 1fr))",
+              gap: "12px",
+              width: "100%",
+              maxWidth: "600px",
+              marginBottom: "32px"
+            },
+            children: actions.map((action) => /* @__PURE__ */ jsxs8(
+              "button",
+              {
+                onClick: () => onActionSelect?.(action),
+                style: {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  gap: "12px",
+                  padding: "20px 16px",
+                  backgroundColor: "var(--chatllm-bg, #ffffff)",
+                  border: "1px solid var(--chatllm-border, #e5e7eb)",
+                  borderRadius: "12px",
+                  cursor: "pointer",
+                  transition: "all 0.2s"
+                },
+                onMouseOver: (e) => {
+                  e.currentTarget.style.borderColor = "var(--chatllm-primary, #3b82f6)";
+                  e.currentTarget.style.boxShadow = "0 4px 12px rgba(59, 130, 246, 0.1)";
+                },
+                onMouseOut: (e) => {
+                  e.currentTarget.style.borderColor = "var(--chatllm-border, #e5e7eb)";
+                  e.currentTarget.style.boxShadow = "none";
+                },
+                children: [
+                  /* @__PURE__ */ jsx9(
+                    "div",
+                    {
+                      style: {
+                        width: "44px",
+                        height: "44px",
+                        borderRadius: "12px",
+                        backgroundColor: "var(--chatllm-primary-light, #dbeafe)",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center"
+                      },
+                      children: /* @__PURE__ */ jsx9(
+                        IconSvg,
+                        {
+                          name: getActionIcon(action.icon),
+                          size: 22,
+                          color: "var(--chatllm-primary, #3b82f6)"
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx9("div", { children: /* @__PURE__ */ jsx9(
+                    "div",
+                    {
+                      style: {
+                        fontSize: "14px",
+                        fontWeight: 500,
+                        color: "var(--chatllm-text, #1f2937)"
+                      },
+                      children: action.label
+                    }
+                  ) })
+                ]
+              },
+              action.id
+            ))
+          }
+        ),
+        templates.length > 0 && /* @__PURE__ */ jsxs8("div", { style: { width: "100%", maxWidth: "600px" }, children: [
+          /* @__PURE__ */ jsx9(
+            "h3",
+            {
+              style: {
+                fontSize: "14px",
+                fontWeight: 500,
+                color: "var(--chatllm-text-muted, #6b7280)",
+                marginBottom: "12px",
+                textAlign: "left"
+              },
+              children: "\uCD94\uCC9C \uD504\uB86C\uD504\uD2B8"
+            }
+          ),
+          /* @__PURE__ */ jsx9(
+            "div",
+            {
+              style: {
+                display: "flex",
+                flexDirection: "column",
+                gap: "8px"
+              },
+              children: templates.map((template) => /* @__PURE__ */ jsxs8(
+                "button",
+                {
+                  onClick: () => onTemplateClick(template),
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "12px",
+                    padding: "14px 16px",
+                    backgroundColor: "var(--chatllm-bg, #ffffff)",
+                    border: "1px solid var(--chatllm-border, #e5e7eb)",
+                    borderRadius: "10px",
+                    cursor: "pointer",
+                    textAlign: "left",
+                    transition: "all 0.2s"
+                  },
+                  onMouseOver: (e) => {
+                    e.currentTarget.style.backgroundColor = "var(--chatllm-bg-hover, #f9fafb)";
+                  },
+                  onMouseOut: (e) => {
+                    e.currentTarget.style.backgroundColor = "var(--chatllm-bg, #ffffff)";
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx9(
+                      "div",
+                      {
+                        style: {
+                          width: "36px",
+                          height: "36px",
+                          borderRadius: "8px",
+                          backgroundColor: "var(--chatllm-bg-secondary, #f3f4f6)",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          flexShrink: 0
+                        },
+                        children: /* @__PURE__ */ jsx9(IconSvg, { name: "file-text-line", size: 18, color: "var(--chatllm-text-muted, #6b7280)" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs8("div", { style: { flex: 1, minWidth: 0 }, children: [
+                      /* @__PURE__ */ jsx9(
+                        "div",
+                        {
+                          style: {
+                            fontSize: "14px",
+                            fontWeight: 500,
+                            color: "var(--chatllm-text, #1f2937)"
+                          },
+                          children: template.title
+                        }
+                      ),
+                      /* @__PURE__ */ jsx9(
+                        "div",
+                        {
+                          style: {
+                            fontSize: "13px",
+                            color: "var(--chatllm-text-muted, #9ca3af)",
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap"
+                          },
+                          children: template.description
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx9(IconSvg, { name: "arrow-right-line", size: 16, color: "var(--chatllm-text-muted, #9ca3af)" })
+                  ]
+                },
+                template.id
+              ))
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+
+// src/react/components/MemoryPanel.tsx
+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",
+  skill: "\uD559\uC2B5\uB41C \uC2A4\uD0AC",
+  fact: "\uC800\uC7A5\uB41C \uC815\uBCF4"
+};
+var categoryColors = {
+  context: "#3b82f6",
+  preference: "#8b5cf6",
+  skill: "#10b981",
+  fact: "#f59e0b"
+};
+var MemoryPanel = ({
+  items,
+  contextSummary,
+  onDelete,
+  onClearAll,
+  isOpen,
+  onToggle
+}) => {
+  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);
+    return date.toLocaleDateString("ko-KR", {
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit"
+    });
+  };
+  if (!isOpen) {
+    return /* @__PURE__ */ jsx10(
+      "button",
+      {
+        onClick: onToggle,
+        style: {
+          position: "fixed",
+          right: "16px",
+          bottom: "100px",
+          width: "48px",
+          height: "48px",
+          borderRadius: "50%",
+          backgroundColor: "var(--chatllm-primary, #3b82f6)",
+          border: "none",
+          boxShadow: "0 4px 12px rgba(59, 130, 246, 0.3)",
+          cursor: "pointer",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          zIndex: 100
+        },
+        children: /* @__PURE__ */ jsx10(IconSvg, { name: "robot-line", size: 24, color: "#ffffff" })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      className: "chatllm-memory-panel",
+      style: {
+        position: "fixed",
+        right: "16px",
+        bottom: "16px",
+        width: "380px",
+        maxHeight: "70vh",
+        backgroundColor: "var(--chatllm-bg, #ffffff)",
+        borderRadius: "16px",
+        boxShadow: "0 8px 32px rgba(0, 0, 0, 0.12)",
+        border: "1px solid var(--chatllm-border, #e5e7eb)",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+        zIndex: 100
+      },
+      children: [
+        /* @__PURE__ */ jsxs9(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              padding: "16px",
+              borderBottom: "1px solid var(--chatllm-border, #e5e7eb)"
+            },
+            children: [
+              /* @__PURE__ */ jsxs9("div", { style: { display: "flex", alignItems: "center", gap: "10px" }, children: [
+                /* @__PURE__ */ jsx10(
+                  "div",
+                  {
+                    style: {
+                      width: "32px",
+                      height: "32px",
+                      borderRadius: "8px",
+                      backgroundColor: "var(--chatllm-primary-light, #dbeafe)",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center"
+                    },
+                    children: /* @__PURE__ */ jsx10(IconSvg, { name: "robot-line", size: 18, color: "var(--chatllm-primary, #3b82f6)" })
+                  }
+                ),
+                /* @__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__ */ jsxs9("div", { style: { display: "flex", gap: "4px" }, children: [
+                onClearAll && items.length > 0 && /* @__PURE__ */ jsx10(
+                  "button",
+                  {
+                    onClick: onClearAll,
+                    style: {
+                      padding: "8px",
+                      backgroundColor: "transparent",
+                      border: "none",
+                      borderRadius: "8px",
+                      cursor: "pointer"
+                    },
+                    title: "\uC804\uCCB4 \uC0AD\uC81C",
+                    children: /* @__PURE__ */ jsx10(IconSvg, { name: "delete-bin-line", size: 18, color: "var(--chatllm-text-muted, #9ca3af)" })
+                  }
+                ),
+                /* @__PURE__ */ jsx10(
+                  "button",
+                  {
+                    onClick: onToggle,
+                    style: {
+                      padding: "8px",
+                      backgroundColor: "transparent",
+                      border: "none",
+                      borderRadius: "8px",
+                      cursor: "pointer"
+                    },
+                    children: /* @__PURE__ */ jsx10(IconSvg, { name: "close-line", size: 18, color: "var(--chatllm-text-muted, #9ca3af)" })
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx10(
+          "div",
+          {
+            style: {
+              display: "flex",
+              gap: "4px",
+              padding: "12px 16px",
+              borderBottom: "1px solid var(--chatllm-border-light, #f3f4f6)",
+              overflowX: "auto"
+            },
+            children: ["all", "context", "preference", "skill", "fact"].map((tab) => /* @__PURE__ */ jsx10(
+              "button",
+              {
+                onClick: () => setActiveTab(tab),
+                style: {
+                  padding: "6px 12px",
+                  fontSize: "13px",
+                  fontWeight: activeTab === tab ? 500 : 400,
+                  backgroundColor: activeTab === tab ? "var(--chatllm-primary-light, #dbeafe)" : "transparent",
+                  color: activeTab === tab ? "var(--chatllm-primary, #3b82f6)" : "var(--chatllm-text-muted, #6b7280)",
+                  border: "none",
+                  borderRadius: "6px",
+                  cursor: "pointer",
+                  whiteSpace: "nowrap"
+                },
+                children: tab === "all" ? "\uC804\uCCB4" : categoryLabels[tab]
+              },
+              tab
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsxs9("div", { style: { flex: 1, overflow: "auto", padding: "12px" }, children: [
+          contextSummary && activeTab === "all" && /* @__PURE__ */ jsxs9(
+            "div",
+            {
+              style: {
+                padding: "12px",
+                marginBottom: "12px",
+                backgroundColor: "var(--chatllm-bg-secondary, #f9fafb)",
+                borderRadius: "10px",
+                borderLeft: "3px solid var(--chatllm-primary, #3b82f6)"
+              },
+              children: [
+                /* @__PURE__ */ jsxs9(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "6px",
+                      marginBottom: "8px"
+                    },
+                    children: [
+                      /* @__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__ */ jsx10(
+                  "p",
+                  {
+                    style: {
+                      fontSize: "13px",
+                      lineHeight: "1.6",
+                      color: "var(--chatllm-text, #374151)",
+                      margin: 0
+                    },
+                    children: contextSummary
+                  }
+                )
+              ]
+            }
+          ),
+          filteredItems.length === 0 ? /* @__PURE__ */ jsxs9(
+            "div",
+            {
+              style: {
+                padding: "32px 16px",
+                textAlign: "center",
+                color: "var(--chatllm-text-muted, #9ca3af)"
+              },
+              children: [
+                /* @__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__ */ jsx10("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: filteredItems.map((item) => /* @__PURE__ */ jsxs9(
+            "div",
+            {
+              style: {
+                padding: "12px",
+                backgroundColor: "var(--chatllm-bg, #ffffff)",
+                border: "1px solid var(--chatllm-border, #e5e7eb)",
+                borderRadius: "10px",
+                cursor: "pointer",
+                transition: "all 0.2s"
+              },
+              onClick: () => setExpandedId(expandedId === item.id ? null : item.id),
+              children: [
+                /* @__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: {
+                            fontSize: "11px",
+                            fontWeight: 500,
+                            padding: "2px 8px",
+                            backgroundColor: `${categoryColors[item.category]}15`,
+                            color: categoryColors[item.category],
+                            borderRadius: "4px"
+                          },
+                          children: categoryLabels[item.category]
+                        }
+                      ),
+                      /* @__PURE__ */ jsx10("span", { style: { fontSize: "11px", color: "var(--chatllm-text-muted, #9ca3af)" }, children: formatDate2(item.timestamp) })
+                    ] }),
+                    /* @__PURE__ */ jsx10(
+                      "div",
+                      {
+                        style: {
+                          fontSize: "13px",
+                          fontWeight: 500,
+                          color: "var(--chatllm-text, #1f2937)"
+                        },
+                        children: item.key
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs9("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+                    onDelete && /* @__PURE__ */ jsx10(
+                      "button",
+                      {
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          onDelete(item.id);
+                        },
+                        style: {
+                          padding: "4px",
+                          backgroundColor: "transparent",
+                          border: "none",
+                          borderRadius: "4px",
+                          cursor: "pointer",
+                          opacity: 0.5
+                        },
+                        children: /* @__PURE__ */ jsx10(IconSvg, { name: "delete-bin-line", size: 14, color: "var(--chatllm-text-muted, #9ca3af)" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx10(
+                      IconSvg,
+                      {
+                        name: expandedId === item.id ? "arrow-up-s-line" : "arrow-down-s-line",
+                        size: 16,
+                        color: "var(--chatllm-text-muted, #9ca3af)"
+                      }
+                    )
+                  ] })
+                ] }),
+                expandedId === item.id && /* @__PURE__ */ jsx10(
+                  "div",
+                  {
+                    style: {
+                      marginTop: "12px",
+                      paddingTop: "12px",
+                      borderTop: "1px solid var(--chatllm-border-light, #f3f4f6)"
+                    },
+                    children: /* @__PURE__ */ jsx10(
+                      "p",
+                      {
+                        style: {
+                          fontSize: "13px",
+                          lineHeight: "1.6",
+                          color: "var(--chatllm-text, #374151)",
+                          margin: 0,
+                          whiteSpace: "pre-wrap"
+                        },
+                        children: item.value
+                      }
+                    )
+                  }
+                )
+              ]
+            },
+            item.id
+          )) })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/react/ChatUI.tsx
+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"
+  },
+  {
+    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,
+  apiEndpoint = "/api/chat",
+  theme,
+  showSidebar = true,
+  showSettings = true,
+  showModelSelector = true,
+  systemPrompt,
+  contextCompressionThreshold = 20,
+  keepRecentMessages = 6,
+  storageKey = "chatllm_sessions",
+  className = "",
+  onSendMessage,
+  onSessionChange,
+  onError
+}) => {
+  React8.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] = 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 handleApiKeyChange = (value) => {
+    setLocalApiKey(value);
+    onApiKeyChange?.(value);
+  };
+  return /* @__PURE__ */ jsx12(
+    "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__ */ jsxs11(
+        "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__ */ jsxs11(
+              "div",
+              {
+                style: {
+                  width: "200px",
+                  backgroundColor: "var(--chatllm-bg-secondary, #f9fafb)",
+                  borderRight: "1px solid var(--chatllm-border, #e5e7eb)",
+                  display: "flex",
+                  flexDirection: "column"
+                },
+                children: [
+                  /* @__PURE__ */ jsx12("div", { style: { padding: "16px", borderBottom: "1px solid var(--chatllm-border, #e5e7eb)" }, children: /* @__PURE__ */ jsx12(
+                    "button",
+                    {
+                      onClick: onClose,
+                      style: {
+                        padding: "8px",
+                        backgroundColor: "transparent",
+                        border: "none",
+                        borderRadius: "8px",
+                        cursor: "pointer",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center"
+                      },
+                      children: /* @__PURE__ */ jsx12(IconSvg, { name: "close-line", size: 20, color: "var(--chatllm-text-muted, #6b7280)" })
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxs11("nav", { style: { flex: 1, padding: "8px" }, children: [
+                    /* @__PURE__ */ jsx12(
+                      TabButton,
+                      {
+                        active: activeTab === "general",
+                        onClick: () => setActiveTab("general"),
+                        icon: "settings-3-line",
+                        label: "\uC77C\uBC18"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx12(
+                      TabButton,
+                      {
+                        active: activeTab === "personalization",
+                        onClick: () => setActiveTab("personalization"),
+                        icon: "user-3-line",
+                        label: "\uAC1C\uC778 \uB9DE\uCDA4 \uC124\uC815"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx12(
+                      TabButton,
+                      {
+                        active: activeTab === "data",
+                        onClick: () => setActiveTab("data"),
+                        icon: "delete-bin-line",
+                        label: "\uB370\uC774\uD130 \uC81C\uC5B4"
+                      }
+                    )
+                  ] })
+                ]
+              }
+            ),
+            /* @__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(
+                  "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__ */ 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(
+                  "button",
+                  {
+                    onClick: () => onPersonalizationChange(DEFAULT_PERSONALIZATION2),
+                    style: buttonSecondaryStyle,
+                    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(
+                      "input",
+                      {
+                        type: "password",
+                        value: localApiKey,
+                        onChange: (e) => handleApiKeyChange(e.target.value),
+                        placeholder: "API \uD0A4\uB97C \uC785\uB825\uD558\uC138\uC694",
+                        style: inputStyle
+                      }
+                    ),
+                    /* @__PURE__ */ jsx12("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(
+                        "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__ */ jsxs11("div", { children: [
+                      /* @__PURE__ */ jsx12("label", { style: labelStyle, children: "\uC9C1\uC5C5" }),
+                      /* @__PURE__ */ jsx12(
+                        "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__ */ jsxs11("div", { children: [
+                      /* @__PURE__ */ jsx12("label", { style: labelStyle, children: "\uCD94\uAC00 \uC815\uBCF4" }),
+                      /* @__PURE__ */ jsx12(
+                        "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__ */ 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(
+                    "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__ */ jsx12(SettingRow, { label: "\uC5F4\uC815\uC801", children: /* @__PURE__ */ jsxs11(
+                    "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__ */ jsx12(SettingRow, { label: "\uC774\uBAA8\uC9C0 \uC0AC\uC6A9", children: /* @__PURE__ */ jsxs11(
+                    "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__ */ jsx12(SettingRow, { label: "\uC751\uB2F5 \uAE38\uC774", children: /* @__PURE__ */ jsxs11(
+                    "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" })
+                      ]
+                    }
+                  ) })
+                ] })
+              ] }),
+              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(
+                  "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__ */ jsx12(
+                      "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__ */ 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(
+                  "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__ */ jsxs11(
+  "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__ */ jsx12(IconSvg, { name: icon, size: 20 }),
+      label
+    ]
+  }
+);
+var SettingRow = ({ label, description, children }) => /* @__PURE__ */ jsxs11(
+  "div",
+  {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      padding: "12px 0",
+      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 })
+      ] }),
+      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"
+};
+export {
+  ChatHeader,
+  ChatInput,
+  ChatSidebar,
+  ChatUI,
+  EmptyState,
+  Icon,
+  IconSvg,
+  LinkChip,
+  MarkdownRenderer,
+  MemoryPanel,
+  MessageBubble,
+  MessageList,
+  SettingsModal,
+  useChatUI
+};
+//# sourceMappingURL=index.mjs.map