@gendive/chatllm 0.10.4 → 0.11.0

package/dist/react/index.js

@@ -1642,16 +1642,6 @@ var IconSvg = ({
 
 // src/react/components/ChatSidebar.tsx
 var import_jsx_runtime2 = require("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,
@@ -1699,238 +1689,335 @@ var ChatSidebar = ({
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "aside",
     {
-      className: `chatllm-sidebar ${isOpen ? "chatllm-sidebar--open" : "chatllm-sidebar--closed"}`,
+      className: "chatllm-sidebar chatllm-sidebar-transition",
       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"
+        backgroundColor: "var(--chatllm-sidebar-bg)",
+        borderRight: isOpen ? "1px solid var(--chatllm-border)" : "none",
+        overflow: "hidden",
+        display: "flex",
+        flexDirection: "column",
+        zIndex: 20
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { width: "288px", height: "100%", display: "flex", flexDirection: "column" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-          "div",
-          {
-            style: {
-              padding: "16px",
-              borderBottom: "1px solid var(--chatllm-border-light, #f3f4f6)"
-            },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginBottom: "16px" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                  "div",
-                  {
-                    style: {
-                      width: "32px",
-                      height: "32px",
-                      borderRadius: "8px",
-                      background: "linear-gradient(135deg, #3b82f6, #2563eb)",
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center"
-                    },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IconSvg, { name: "chat-1-line", size: 20, color: "#ffffff" })
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontWeight: 600, color: "var(--chatllm-text, #1f2937)" }, children: "ChatDive" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsx)(IconSvg, { name: "add-line", size: 18, color: "#ffffff" }),
-                    "\uC0C8 \uB300\uD654"
-                  ]
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { flex: 1, overflow: "auto", padding: "8px" }, children: sessions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          "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__ */ (0, import_jsx_runtime2.jsx)(
-          "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)";
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "div",
+        {
+          style: {
+            width: "288px",
+            height: "100%",
+            display: "flex",
+            flexDirection: "column",
+            padding: "24px"
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  marginBottom: "40px"
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "10px" }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "div",
+                      {
+                        style: {
+                          width: "28px",
+                          height: "28px",
+                          borderRadius: "6px",
+                          backgroundColor: "var(--chatllm-primary)",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          boxShadow: "0 1px 2px rgba(0,0,0,0.05)"
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IconSvg, { name: "chat-1-line", size: 16, color: "#ffffff" })
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "span",
+                      {
+                        style: {
+                          fontSize: "14px",
+                          fontWeight: 700,
+                          textTransform: "uppercase",
+                          letterSpacing: "-0.01em",
+                          color: "var(--chatllm-text)"
+                        },
+                        children: "Intelligence"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "button",
+                    {
+                      onClick: onToggle,
+                      "aria-label": "\uC0AC\uC774\uB4DC\uBC14 \uD1A0\uAE00",
+                      style: {
+                        padding: "6px",
+                        backgroundColor: "transparent",
+                        border: "none",
+                        borderRadius: "8px",
+                        cursor: "pointer",
+                        color: "var(--chatllm-text-muted)",
+                        transition: "background-color 0.2s"
+                      },
+                      onMouseOver: (e) => {
+                        e.currentTarget.style.backgroundColor = "var(--chatllm-bg-tertiary)";
+                      },
+                      onMouseOut: (e) => {
+                        e.currentTarget.style.backgroundColor = "transparent";
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IconSvg, { name: "menu-line", size: 20 })
+                    }
+                  )
+                ]
               }
-            },
-            onMouseOut: (e) => {
-              if (session.id !== currentSessionId) {
-                e.currentTarget.style.backgroundColor = "transparent";
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+              "button",
+              {
+                onClick: onNewSession,
+                className: "chatllm-btn-primary",
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: "12px",
+                  padding: "12px 16px",
+                  marginBottom: "32px",
+                  borderRadius: "12px",
+                  fontSize: "14px",
+                  fontWeight: 600,
+                  cursor: "pointer"
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IconSvg, { name: "add-line", size: 20, color: "#ffffff" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "New conversation" })
+                ]
               }
-            },
-            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
-                editingId === session.id ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                  "input",
-                  {
-                    ref: inputRef,
-                    type: "text",
-                    value: editingTitle,
-                    onChange: (e) => setEditingTitle(e.target.value),
-                    onKeyDown: handleKeyDown,
-                    onBlur: handleSaveEdit,
-                    onClick: (e) => e.stopPropagation(),
-                    "aria-label": "\uC138\uC158 \uC81C\uBAA9 \uD3B8\uC9D1",
-                    style: {
-                      width: "100%",
-                      padding: "4px 8px",
-                      fontSize: "14px",
-                      fontWeight: session.id === currentSessionId ? 500 : 400,
-                      color: "var(--chatllm-text, #1f2937)",
-                      backgroundColor: "var(--chatllm-bg, #ffffff)",
-                      border: "1px solid var(--chatllm-primary, #3b82f6)",
-                      borderRadius: "4px",
-                      outline: "none"
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "div",
+              {
+                className: "chatllm-scrollbar",
+                style: {
+                  flex: 1,
+                  overflow: "auto",
+                  display: "flex",
+                  flexDirection: "column"
+                },
+                children: sessions.length === 0 ? (
+                  /* Empty State */
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                    "div",
+                    {
+                      style: {
+                        flex: 1,
+                        display: "flex",
+                        flexDirection: "column",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        textAlign: "center",
+                        padding: "16px"
+                      },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          "div",
+                          {
+                            style: {
+                              width: "64px",
+                              height: "64px",
+                              borderRadius: "50%",
+                              backgroundColor: "var(--chatllm-bg-tertiary)",
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              marginBottom: "16px",
+                              color: "var(--chatllm-text-muted)"
+                            },
+                            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IconSvg, { name: "history-line", size: 32 })
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          "p",
+                          {
+                            style: {
+                              fontSize: "14px",
+                              fontWeight: 600,
+                              color: "var(--chatllm-text-secondary)",
+                              marginBottom: "4px"
+                            },
+                            children: "No history yet"
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          "p",
+                          {
+                            style: {
+                              fontSize: "12px",
+                              color: "var(--chatllm-text-muted)"
+                            },
+                            children: "Your recent conversations will appear here."
+                          }
+                        )
+                      ]
                     }
-                  }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                  "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__ */ (0, import_jsx_runtime2.jsx)(
-                  "div",
-                  {
-                    style: {
-                      fontSize: "12px",
-                      color: "var(--chatllm-text-muted, #9ca3af)",
-                      marginTop: "4px"
-                    },
-                    children: formatDate(session.updatedAt)
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", gap: "2px" }, children: [
-                onRenameSession && editingId !== session.id && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                  "button",
-                  {
-                    onClick: (e) => handleStartEdit(session, e),
-                    "aria-label": "\uC81C\uBAA9 \uD3B8\uC9D1",
-                    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__ */ (0, import_jsx_runtime2.jsx)(IconSvg, { name: "pencil-line", size: 16, color: "var(--chatllm-text-muted, #9ca3af)" })
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                  "button",
-                  {
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      onDeleteSession(session.id);
-                    },
-                    "aria-label": "\uC138\uC158 \uC0AD\uC81C",
-                    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__ */ (0, import_jsx_runtime2.jsx)(IconSvg, { name: "delete-bin-line", size: 16, color: "var(--chatllm-text-muted, #9ca3af)" })
-                  }
-                )
-              ] })
-            ] })
-          },
-          session.id
-        )) }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          "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__ */ (0, import_jsx_runtime2.jsx)(IconSvg, { name: isOpen ? "arrow-left-line" : "menu-line", size: 18 })
-          }
-        )
-      ] })
+                  )
+                ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "div",
+                    {
+                      style: {
+                        fontSize: "11px",
+                        fontWeight: 700,
+                        color: "var(--chatllm-text-muted)",
+                        textTransform: "uppercase",
+                        letterSpacing: "0.1em",
+                        marginBottom: "12px",
+                        padding: "0 8px"
+                      },
+                      children: "Recent activity"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: sessions.map((session) => {
+                    const isSelected = session.id === currentSessionId;
+                    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                      "div",
+                      {
+                        onClick: () => onSelectSession(session.id),
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          gap: "12px",
+                          padding: "10px 12px",
+                          borderRadius: "8px",
+                          backgroundColor: isSelected ? "var(--chatllm-bg-active)" : "transparent",
+                          border: isSelected ? "1px solid var(--chatllm-border-light)" : "1px solid transparent",
+                          cursor: "pointer",
+                          transition: "all 0.2s"
+                        },
+                        onMouseOver: (e) => {
+                          if (!isSelected) {
+                            e.currentTarget.style.backgroundColor = "var(--chatllm-bg-hover)";
+                          }
+                        },
+                        onMouseOut: (e) => {
+                          if (!isSelected) {
+                            e.currentTarget.style.backgroundColor = "transparent";
+                          }
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                            IconSvg,
+                            {
+                              name: "chat-1-line",
+                              size: 18,
+                              color: "var(--chatllm-text-muted)"
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { flex: 1, minWidth: 0 }, children: editingId === session.id ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                            "input",
+                            {
+                              ref: inputRef,
+                              type: "text",
+                              value: editingTitle,
+                              onChange: (e) => setEditingTitle(e.target.value),
+                              onKeyDown: handleKeyDown,
+                              onBlur: handleSaveEdit,
+                              onClick: (e) => e.stopPropagation(),
+                              "aria-label": "\uC138\uC158 \uC81C\uBAA9 \uD3B8\uC9D1",
+                              style: {
+                                width: "100%",
+                                padding: "2px 6px",
+                                fontSize: "14px",
+                                fontWeight: 500,
+                                color: "var(--chatllm-text)",
+                                backgroundColor: "var(--chatllm-content-bg)",
+                                border: "1px solid var(--chatllm-primary)",
+                                borderRadius: "4px",
+                                outline: "none"
+                              }
+                            }
+                          ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                            "p",
+                            {
+                              style: {
+                                fontSize: "14px",
+                                fontWeight: 500,
+                                color: isSelected ? "var(--chatllm-text)" : "var(--chatllm-text-secondary)",
+                                overflow: "hidden",
+                                textOverflow: "ellipsis",
+                                whiteSpace: "nowrap",
+                                margin: 0
+                              },
+                              children: session.title
+                            }
+                          ) }),
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                            "div",
+                            {
+                              style: {
+                                display: "flex",
+                                gap: "2px",
+                                opacity: isSelected ? 1 : 0,
+                                transition: "opacity 0.2s"
+                              },
+                              className: "session-actions",
+                              children: [
+                                onRenameSession && editingId !== session.id && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                  "button",
+                                  {
+                                    onClick: (e) => handleStartEdit(session, e),
+                                    "aria-label": "\uC81C\uBAA9 \uD3B8\uC9D1",
+                                    style: {
+                                      padding: "4px",
+                                      backgroundColor: "transparent",
+                                      border: "none",
+                                      borderRadius: "4px",
+                                      cursor: "pointer",
+                                      color: "var(--chatllm-text-muted)"
+                                    },
+                                    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IconSvg, { name: "pencil-line", size: 14 })
+                                  }
+                                ),
+                                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                  "button",
+                                  {
+                                    onClick: (e) => {
+                                      e.stopPropagation();
+                                      onDeleteSession(session.id);
+                                    },
+                                    "aria-label": "\uC138\uC158 \uC0AD\uC81C",
+                                    style: {
+                                      padding: "4px",
+                                      backgroundColor: "transparent",
+                                      border: "none",
+                                      borderRadius: "4px",
+                                      cursor: "pointer",
+                                      color: "var(--chatllm-text-muted)"
+                                    },
+                                    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IconSvg, { name: "delete-bin-line", size: 14 })
+                                  }
+                                )
+                              ]
+                            }
+                          )
+                        ]
+                      },
+                      session.id
+                    );
+                  }) })
+                ] })
+              }
+            )
+          ]
+        }
+      )
     }
   );
 };
@@ -2211,7 +2298,7 @@ var ChatInput = ({
   onSubmit,
   onStop,
   isLoading,
-  placeholder = "\uBA54\uC2DC\uC9C0\uB97C \uC785\uB825\uD558\uC138\uC694...",
+  placeholder = "Message or ask a question...",
   quotedText,
   onClearQuote,
   selectedAction,
@@ -2237,217 +2324,122 @@ var ChatInput = ({
     onActionSelect?.(action);
     setActionMenuOpen(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-    "div",
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "footer",
     {
-      className: "chatllm-input-container",
+      className: "chatllm-input-footer",
       style: {
-        padding: "16px 24px",
-        borderTop: "1px solid var(--chatllm-border, #e5e7eb)",
-        backgroundColor: "var(--chatllm-bg, #ffffff)"
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        right: 0,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        paddingBottom: "40px",
+        paddingTop: "64px",
+        background: "linear-gradient(to top, var(--chatllm-bg) 60%, transparent)",
+        pointerEvents: "none"
       },
-      children: [
-        (quotedText || selectedAction) && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", gap: "8px", marginBottom: "12px", flexWrap: "wrap" }, children: [
-          quotedText && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-            "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__ */ (0, import_jsx_runtime4.jsx)(IconSvg, { name: "double-quotes-l", size: 14, color: "var(--chatllm-primary, #3b82f6)" }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                  "span",
-                  {
-                    style: {
-                      fontSize: "13px",
-                      color: "var(--chatllm-text, #1f2937)",
-                      overflow: "hidden",
-                      textOverflow: "ellipsis",
-                      whiteSpace: "nowrap",
-                      maxWidth: "300px"
-                    },
-                    children: quotedText
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                  "button",
-                  {
-                    onClick: onClearQuote,
-                    style: {
-                      padding: "2px",
-                      backgroundColor: "transparent",
-                      border: "none",
-                      borderRadius: "4px",
-                      cursor: "pointer",
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center"
-                    },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconSvg, { name: "close-line", size: 14, color: "var(--chatllm-text-muted, #9ca3af)" })
-                  }
-                )
-              ]
-            }
-          ),
-          selectedAction && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-            "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__ */ (0, import_jsx_runtime4.jsx)(IconSvg, { name: "sparkling-line", size: 14, color: "var(--chatllm-primary, #3b82f6)" }),
-                selectedAction.label,
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                  "button",
-                  {
-                    onClick: onClearAction,
-                    style: {
-                      padding: "2px",
-                      backgroundColor: "transparent",
-                      border: "none",
-                      borderRadius: "4px",
-                      cursor: "pointer",
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center"
-                    },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconSvg, { name: "close-line", size: 14, color: "var(--chatllm-primary, #3b82f6)" })
-                  }
-                )
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-          "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__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { position: "relative" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                  "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__ */ (0, import_jsx_runtime4.jsx)(IconSvg, { name: "add-line", size: 20, color: "var(--chatllm-text, #1f2937)" })
-                  }
-                ),
-                actionMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                  "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__ */ (0, import_jsx_runtime4.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        "div",
+        {
+          style: {
+            width: "100%",
+            maxWidth: "820px",
+            padding: "0 24px",
+            pointerEvents: "auto"
+          },
+          children: [
+            (quotedText || selectedAction) && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", gap: "8px", marginBottom: "12px", flexWrap: "wrap" }, children: [
+              quotedText && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "8px",
+                    padding: "8px 12px",
+                    backgroundColor: "var(--chatllm-content-bg)",
+                    borderRadius: "12px",
+                    border: "1px solid var(--chatllm-border)",
+                    maxWidth: "100%"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconSvg, { name: "double-quotes-l", size: 14, color: "var(--chatllm-primary)" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      "span",
+                      {
+                        style: {
+                          fontSize: "13px",
+                          color: "var(--chatllm-text)",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap",
+                          maxWidth: "300px"
+                        },
+                        children: quotedText
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                       "button",
                       {
-                        onClick: () => handleActionSelect(action),
+                        onClick: onClearQuote,
                         style: {
-                          width: "100%",
+                          padding: "2px",
+                          backgroundColor: "transparent",
+                          border: "none",
+                          borderRadius: "4px",
+                          cursor: "pointer",
                           display: "flex",
                           alignItems: "center",
-                          gap: "12px",
-                          padding: "10px 12px",
+                          justifyContent: "center"
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconSvg, { name: "close-line", size: 14, color: "var(--chatllm-text-muted)" })
+                      }
+                    )
+                  ]
+                }
+              ),
+              selectedAction && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "6px",
+                    padding: "8px 14px",
+                    backgroundColor: "var(--chatllm-primary-light)",
+                    borderRadius: "9999px",
+                    fontSize: "13px",
+                    fontWeight: 500,
+                    color: "var(--chatllm-primary)"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconSvg, { name: "sparkling-line", size: 14, color: "var(--chatllm-primary)" }),
+                    selectedAction.label,
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      "button",
+                      {
+                        onClick: onClearAction,
+                        style: {
+                          padding: "2px",
                           backgroundColor: "transparent",
                           border: "none",
-                          borderRadius: "8px",
+                          borderRadius: "4px",
                           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";
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center"
                         },
-                        children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                            "div",
-                            {
-                              style: {
-                                width: "32px",
-                                height: "32px",
-                                display: "flex",
-                                alignItems: "center",
-                                justifyContent: "center",
-                                backgroundColor: "var(--chatllm-primary-light, #dbeafe)",
-                                borderRadius: "8px"
-                              },
-                              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                                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__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: "14px", fontWeight: 500, color: "var(--chatllm-text, #1f2937)" }, children: action.label }),
-                            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: "12px", color: "var(--chatllm-text-muted, #9ca3af)" }, children: action.description })
-                          ] })
-                        ]
-                      },
-                      action.id
-                    ))
-                  }
-                )
-              ] }),
+                        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconSvg, { name: "close-line", size: 14, color: "var(--chatllm-primary)" })
+                      }
+                    )
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "chatllm-input-container", children: [
               /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "textarea",
                 {
@@ -2458,65 +2450,221 @@ var ChatInput = ({
                   placeholder,
                   rows: 1,
                   style: {
-                    flex: 1,
-                    minHeight: "24px",
+                    width: "100%",
+                    minHeight: "60px",
                     maxHeight: "200px",
-                    padding: "6px 0",
+                    padding: "24px 32px 8px 32px",
                     backgroundColor: "transparent",
                     border: "none",
                     outline: "none",
-                    fontSize: "15px",
+                    fontSize: "16px",
                     lineHeight: "1.5",
                     resize: "none",
-                    color: "var(--chatllm-text, #1f2937)"
+                    color: "var(--chatllm-text)"
                   }
                 }
               ),
-              isLoading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                "button",
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                "div",
                 {
-                  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"
+                    justifyContent: "space-between",
+                    padding: "0 24px 20px 24px"
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconSvg, { name: "stop-circle-line", size: 20, color: "#ffffff" })
-                }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                "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__ */ (0, import_jsx_runtime4.jsx)(IconSvg, { name: "send-plane-fill", size: 18, color: value.trim() ? "#ffffff" : "#9ca3af" })
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+                      actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { position: "relative" }, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                          "button",
+                          {
+                            onClick: () => setActionMenuOpen(!actionMenuOpen),
+                            style: iconButtonStyle,
+                            title: "\uAE30\uB2A5 \uCD94\uAC00",
+                            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconSvg, { name: "add-line", size: 22, color: "var(--chatllm-text-muted)" })
+                          }
+                        ),
+                        actionMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                          "div",
+                          {
+                            style: {
+                              position: "absolute",
+                              bottom: "100%",
+                              left: 0,
+                              marginBottom: "8px",
+                              backgroundColor: "var(--chatllm-content-bg)",
+                              borderRadius: "16px",
+                              boxShadow: "var(--chatllm-shadow-sheet)",
+                              border: "1px solid var(--chatllm-border)",
+                              padding: "8px",
+                              minWidth: "220px",
+                              zIndex: 100
+                            },
+                            children: actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                              "button",
+                              {
+                                onClick: () => handleActionSelect(action),
+                                style: {
+                                  width: "100%",
+                                  display: "flex",
+                                  alignItems: "center",
+                                  gap: "12px",
+                                  padding: "12px",
+                                  backgroundColor: "transparent",
+                                  border: "none",
+                                  borderRadius: "12px",
+                                  cursor: "pointer",
+                                  textAlign: "left",
+                                  transition: "background-color 0.2s"
+                                },
+                                onMouseOver: (e) => {
+                                  e.currentTarget.style.backgroundColor = "var(--chatllm-bg-hover)";
+                                },
+                                onMouseOut: (e) => {
+                                  e.currentTarget.style.backgroundColor = "transparent";
+                                },
+                                children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                                    "div",
+                                    {
+                                      style: {
+                                        width: "36px",
+                                        height: "36px",
+                                        display: "flex",
+                                        alignItems: "center",
+                                        justifyContent: "center",
+                                        backgroundColor: "var(--chatllm-primary-light)",
+                                        borderRadius: "10px"
+                                      },
+                                      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                                        IconSvg,
+                                        {
+                                          name: action.icon === "search" ? "search-line" : action.icon === "image" ? "image-line" : action.icon === "code" ? "code-s-slash-line" : "file-text-line",
+                                          size: 20,
+                                          color: "var(--chatllm-primary)"
+                                        }
+                                      )
+                                    }
+                                  ),
+                                  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: "14px", fontWeight: 600, color: "var(--chatllm-text)" }, children: action.label }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: "12px", color: "var(--chatllm-text-muted)" }, children: action.description })
+                                  ] })
+                                ]
+                              },
+                              action.id
+                            ))
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { style: iconButtonStyle, title: "\uD30C\uC77C \uCCA8\uBD80", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconSvg, { name: "attachment-line", size: 22, color: "var(--chatllm-text-muted)" }) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { width: "1px", height: "20px", backgroundColor: "var(--chatllm-border-light)", margin: "0 4px" } }),
+                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { style: iconButtonStyle, title: "AI \uAE30\uB2A5", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconSvg, { name: "magic-line", size: 22, color: "var(--chatllm-text-muted)" }) })
+                    ] }),
+                    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                      "button",
+                      {
+                        onClick: onStop,
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          height: "48px",
+                          padding: "0 32px",
+                          backgroundColor: "var(--chatllm-bg-tertiary)",
+                          border: "1px solid var(--chatllm-border)",
+                          borderRadius: "12px",
+                          cursor: "pointer",
+                          transition: "all 0.2s",
+                          gap: "8px"
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                            "span",
+                            {
+                              style: {
+                                fontSize: "14px",
+                                fontWeight: 700,
+                                color: "var(--chatllm-text-secondary)",
+                                textTransform: "uppercase",
+                                letterSpacing: "0.02em"
+                              },
+                              children: "Stop"
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconSvg, { name: "stop-circle-line", size: 18, color: "var(--chatllm-text-secondary)" })
+                        ]
+                      }
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                      "button",
+                      {
+                        onClick: onSubmit,
+                        disabled: !value.trim(),
+                        className: "chatllm-btn-primary",
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          height: "48px",
+                          padding: "0 32px",
+                          borderRadius: "12px",
+                          cursor: value.trim() ? "pointer" : "not-allowed",
+                          opacity: value.trim() ? 1 : 0.5,
+                          gap: "8px"
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                            "span",
+                            {
+                              style: {
+                                fontSize: "14px",
+                                fontWeight: 700,
+                                letterSpacing: "0.02em"
+                              },
+                              children: "Send message"
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconSvg, { name: "arrow-up-s-line", size: 20, color: "#ffffff" })
+                        ]
+                      }
+                    )
+                  ]
                 }
               )
-            ]
-          }
-        )
-      ]
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "p",
+              {
+                style: {
+                  fontSize: "10px",
+                  textAlign: "center",
+                  marginTop: "16px",
+                  color: "var(--chatllm-text-muted)",
+                  fontWeight: 700,
+                  textTransform: "uppercase",
+                  letterSpacing: "0.15em"
+                },
+                children: "AI Professional Assistant \u2022 Secured by Canvas"
+              }
+            )
+          ]
+        }
+      )
     }
   );
 };
+var iconButtonStyle = {
+  padding: "10px",
+  backgroundColor: "transparent",
+  border: "none",
+  borderRadius: "12px",
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  transition: "background-color 0.2s, color 0.2s"
+};
 
 // src/react/components/MessageList.tsx
 var import_react10 = require("react");
@@ -3742,356 +3890,395 @@ var MessageBubble = ({
     if (text && text.length > 0) {
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  if (isUser) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "div",
+      {
+        className: "chatllm-message chatllm-message--user",
+        style: {
+          display: "flex",
+          justifyContent: "flex-end",
+          padding: "16px 24px"
+        },
+        onMouseEnter: () => setShowActions(true),
+        onMouseLeave: () => setShowActions(false),
+        onMouseUp: handleMouseUp,
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          "div",
+          {
+            style: {
+              maxWidth: "80%",
+              backgroundColor: "var(--chatllm-user-bubble)",
+              padding: "16px 24px",
+              borderRadius: "16px",
+              borderTopRightRadius: "4px"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                "div",
+                {
+                  style: {
+                    fontSize: "15px",
+                    lineHeight: "1.6",
+                    color: "var(--chatllm-text)",
+                    whiteSpace: "pre-wrap"
+                  },
+                  children: displayContent
+                }
+              ),
+              showActions && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    gap: "4px",
+                    marginTop: "12px",
+                    justifyContent: "flex-end"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { onClick: onCopy, style: actionButtonStyle, title: "\uBCF5\uC0AC", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                      IconSvg,
+                      {
+                        name: isCopied ? "check-line" : "file-copy-line",
+                        size: 14,
+                        color: isCopied ? "var(--chatllm-success)" : "var(--chatllm-text-muted)"
+                      }
+                    ) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { onClick: onEdit, style: actionButtonStyle, title: "\uC218\uC815", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IconSvg, { name: "edit-line", size: 14, color: "var(--chatllm-text-muted)" }) }),
+                    onAskOtherModel && otherModels.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { position: "relative" }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                        "button",
+                        {
+                          onClick: () => setShowModelMenu(!showModelMenu),
+                          style: actionButtonStyle,
+                          title: "\uB2E4\uB978 \uBAA8\uB378\uC5D0\uAC8C \uC9C8\uBB38",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IconSvg, { name: "robot-line", size: 14, color: "var(--chatllm-text-muted)" })
+                        }
+                      ),
+                      showModelMenu && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                        ModelMenu,
+                        {
+                          models: otherModels,
+                          onSelect: (modelId) => {
+                            onAskOtherModel(modelId);
+                            setShowModelMenu(false);
+                          },
+                          onClose: () => setShowModelMenu(false)
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              ),
+              relevantAlternatives && relevantAlternatives.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "8px",
+                    marginTop: "12px",
+                    justifyContent: "flex-end"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                      "button",
+                      {
+                        onClick: () => onAlternativeChange?.(Math.max(0, relevantActiveIndex - 1)),
+                        disabled: relevantActiveIndex === 0,
+                        style: {
+                          ...navButtonStyle,
+                          opacity: relevantActiveIndex === 0 ? 0.5 : 1,
+                          cursor: relevantActiveIndex === 0 ? "not-allowed" : "pointer"
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IconSvg, { name: "arrow-left-line", size: 12 })
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { style: { fontSize: "11px", color: "var(--chatllm-text-muted)" }, children: [
+                      relevantActiveIndex + 1,
+                      " / ",
+                      relevantAlternatives.length + 1
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                      "button",
+                      {
+                        onClick: () => onAlternativeChange?.(Math.min(relevantAlternatives.length, relevantActiveIndex + 1)),
+                        disabled: relevantActiveIndex === relevantAlternatives.length,
+                        style: {
+                          ...navButtonStyle,
+                          opacity: relevantActiveIndex === relevantAlternatives.length ? 0.5 : 1,
+                          cursor: relevantActiveIndex === relevantAlternatives.length ? "not-allowed" : "pointer"
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IconSvg, { name: "arrow-right-line", size: 12 })
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
-      className: `chatllm-message chatllm-message--${message.role}`,
+      className: "chatllm-message chatllm-message--assistant",
       style: {
         display: "flex",
-        gap: "12px",
-        padding: "16px 24px",
-        backgroundColor: isUser ? "transparent" : "var(--chatllm-bg-secondary, #f9fafb)"
+        justifyContent: "flex-start",
+        padding: "16px 24px"
       },
       onMouseEnter: () => setShowActions(true),
       onMouseLeave: () => setShowActions(false),
       onMouseUp: handleMouseUp,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          "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__ */ (0, import_jsx_runtime7.jsx)(
-              IconSvg,
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        "div",
+        {
+          className: "chatllm-sheet",
+          style: {
+            width: "100%",
+            padding: "32px",
+            display: "flex",
+            gap: "24px"
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "div",
               {
-                name: isUser ? "user-3-line" : "robot-line",
-                size: 18,
-                color: isUser ? "var(--chatllm-text-muted, #6b7280)" : "var(--chatllm-primary, #3b82f6)"
+                style: {
+                  width: "40px",
+                  height: "40px",
+                  borderRadius: "12px",
+                  backgroundColor: "var(--chatllm-primary-light)",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  color: "var(--chatllm-primary)"
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IconSvg, { name: "magic-line", size: 24 })
               }
-            )
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-            "div",
-            {
-              style: {
-                display: "flex",
-                alignItems: "center",
-                gap: "8px",
-                marginBottom: "8px"
-              },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                  "span",
-                  {
-                    style: {
-                      fontSize: "14px",
-                      fontWeight: 500,
-                      color: "var(--chatllm-text, #1f2937)"
-                    },
-                    children: isUser ? "\uB098" : "AI"
-                  }
-                ),
-                displayModel && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                  "span",
-                  {
-                    style: {
-                      fontSize: "12px",
-                      padding: "2px 8px",
-                      backgroundColor: "var(--chatllm-bg-tertiary, #f3f4f6)",
-                      borderRadius: "4px",
-                      color: "var(--chatllm-text-muted, #6b7280)"
-                    },
-                    children: displayModel
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-            "div",
-            {
-              style: {
-                wordBreak: "break-word"
-              },
-              children: [
-                isAssistant ? (
-                  // AI 메시지는 마크다운 렌더링
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                    MarkdownRenderer,
-                    {
-                      content: displayContent,
-                      onChoiceClick,
-                      showThinking,
-                      thinkingDefaultOpen
-                    }
-                  )
-                ) : (
-                  // 사용자 메시지는 일반 텍스트
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                    "div",
-                    {
-                      style: {
-                        fontSize: "15px",
-                        lineHeight: "1.7",
-                        color: "var(--chatllm-text, #374151)",
-                        whiteSpace: "pre-wrap"
-                      },
-                      children: displayContent
-                    }
-                  )
-                ),
-                isLoading && isAssistant && !displayContent && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-                  "span",
-                  {
-                    style: {
-                      display: "inline-flex",
-                      gap: "4px"
-                    },
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "chatllm-typing-dot", style: dotStyle }),
-                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "chatllm-typing-dot", style: { ...dotStyle, animationDelay: "0.2s" } }),
-                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "chatllm-typing-dot", style: { ...dotStyle, animationDelay: "0.4s" } })
-                    ]
-                  }
-                )
-              ]
-            }
-          ),
-          displaySources && displaySources.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-            "div",
-            {
-              style: {
-                display: "flex",
-                flexWrap: "wrap",
-                gap: "8px",
-                marginTop: "12px",
-                paddingTop: "12px",
-                borderTop: "1px solid var(--chatllm-border-light, #f3f4f6)"
-              },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                  "span",
-                  {
-                    style: {
-                      fontSize: "12px",
-                      fontWeight: 500,
-                      color: "var(--chatllm-text-muted, #9ca3af)",
-                      marginRight: "4px"
-                    },
-                    children: "\uCD9C\uCC98:"
-                  }
-                ),
-                displaySources.map((source, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                  LinkChip,
-                  {
-                    text: source.title,
-                    url: source.url,
-                    index: index + 1,
-                    showFavicon: true
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+              displayModel && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "8px",
+                    marginBottom: "16px"
                   },
-                  source.id
-                ))
-              ]
-            }
-          ),
-          isUser && relevantAlternatives && relevantAlternatives.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-            "div",
-            {
-              style: {
-                display: "flex",
-                alignItems: "center",
-                gap: "8px",
-                marginTop: "12px",
-                paddingTop: "12px",
-                borderTop: "1px solid var(--chatllm-border-light, #f3f4f6)"
-              },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                  "button",
-                  {
-                    onClick: () => onAlternativeChange?.(Math.max(0, relevantActiveIndex - 1)),
-                    disabled: relevantActiveIndex === 0,
-                    style: {
-                      ...navButtonStyle,
-                      opacity: relevantActiveIndex === 0 ? 0.5 : 1,
-                      cursor: relevantActiveIndex === 0 ? "not-allowed" : "pointer"
-                    },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IconSvg, { name: "arrow-left-line", size: 14 })
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { style: { fontSize: "12px", color: "var(--chatllm-text-muted, #9ca3af)" }, children: [
-                  relevantActiveIndex + 1,
-                  " / ",
-                  relevantAlternatives.length + 1
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                  "button",
-                  {
-                    onClick: () => onAlternativeChange?.(Math.min(relevantAlternatives.length, relevantActiveIndex + 1)),
-                    disabled: relevantActiveIndex === relevantAlternatives.length,
-                    style: {
-                      ...navButtonStyle,
-                      opacity: relevantActiveIndex === relevantAlternatives.length ? 0.5 : 1,
-                      cursor: relevantActiveIndex === relevantAlternatives.length ? "not-allowed" : "pointer"
-                    },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IconSvg, { name: "arrow-right-line", size: 14 })
-                  }
-                )
-              ]
-            }
-          ),
-          showActions && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-            "div",
-            {
-              style: {
-                display: "flex",
-                gap: "4px",
-                marginTop: "12px"
-              },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { onClick: onCopy, style: actionButtonStyle, title: "\uBCF5\uC0AC", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                  IconSvg,
-                  {
-                    name: isCopied ? "check-line" : "file-copy-line",
-                    size: 16,
-                    color: isCopied ? "var(--chatllm-success, #22c55e)" : "var(--chatllm-text-muted, #9ca3af)"
-                  }
-                ) }),
-                isUser && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { onClick: onEdit, style: actionButtonStyle, title: "\uC218\uC815", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IconSvg, { name: "edit-line", size: 16, color: "var(--chatllm-text-muted, #9ca3af)" }) }),
-                isAssistant && onRegenerate && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { onClick: onRegenerate, style: actionButtonStyle, title: "\uB2E4\uC2DC \uC0DD\uC131", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IconSvg, { name: "refresh-line", size: 16, color: "var(--chatllm-text-muted, #9ca3af)" }) }),
-                isUser && onAskOtherModel && otherModels.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { position: "relative" }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-                    "button",
-                    {
-                      onClick: () => setShowModelMenu(!showModelMenu),
-                      style: actionButtonStyle,
-                      title: "\uB2E4\uB978 \uBAA8\uB378\uC5D0\uAC8C \uC9C8\uBB38",
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IconSvg, { name: "robot-line", size: 16, color: "var(--chatllm-text-muted, #9ca3af)" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                          IconSvg,
-                          {
-                            name: "arrow-down-s-line",
-                            size: 12,
-                            color: "var(--chatllm-text-muted, #9ca3af)",
-                            style: { marginLeft: "2px" }
-                          }
-                        )
-                      ]
-                    }
-                  ),
-                  showModelMenu && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-                    "div",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                    "span",
                     {
                       style: {
-                        position: "absolute",
-                        bottom: "100%",
-                        left: 0,
-                        marginBottom: "4px",
-                        backgroundColor: "var(--chatllm-bg, #ffffff)",
-                        border: "1px solid var(--chatllm-border, #e5e7eb)",
-                        borderRadius: "8px",
-                        boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
-                        minWidth: "160px",
-                        zIndex: 100,
-                        overflow: "hidden"
-                      },
-                      onMouseLeave: () => setShowModelMenu(false),
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                          "div",
-                          {
-                            style: {
-                              padding: "8px 12px",
-                              fontSize: "11px",
-                              fontWeight: 600,
-                              color: "var(--chatllm-text-muted, #9ca3af)",
-                              textTransform: "uppercase",
-                              borderBottom: "1px solid var(--chatllm-border-light, #f3f4f6)"
-                            },
-                            children: "\uB2E4\uB978 \uBAA8\uB378\uC5D0\uAC8C \uC9C8\uBB38"
-                          }
-                        ),
-                        otherModels.map((model) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-                          "button",
-                          {
-                            onClick: () => {
-                              onAskOtherModel(model.id);
-                              setShowModelMenu(false);
-                            },
-                            style: {
-                              width: "100%",
-                              padding: "10px 12px",
-                              display: "flex",
-                              alignItems: "center",
-                              gap: "8px",
-                              backgroundColor: "transparent",
-                              border: "none",
-                              cursor: "pointer",
-                              fontSize: "13px",
-                              color: "var(--chatllm-text, #1f2937)",
-                              textAlign: "left"
-                            },
-                            onMouseEnter: (e) => {
-                              e.currentTarget.style.backgroundColor = "var(--chatllm-bg-hover, #f3f4f6)";
-                            },
-                            onMouseLeave: (e) => {
-                              e.currentTarget.style.backgroundColor = "transparent";
-                            },
-                            children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IconSvg, { name: "robot-line", size: 14, color: "var(--chatllm-primary, #3b82f6)" }),
-                              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { flex: 1 }, children: model.name }),
-                              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                                "span",
-                                {
-                                  style: {
-                                    fontSize: "10px",
-                                    padding: "2px 6px",
-                                    backgroundColor: "var(--chatllm-bg-tertiary, #f3f4f6)",
-                                    borderRadius: "4px",
-                                    color: "var(--chatllm-text-muted, #9ca3af)"
-                                  },
-                                  children: model.provider
-                                }
-                              )
-                            ]
-                          },
-                          model.id
-                        ))
-                      ]
+                        fontSize: "12px",
+                        fontWeight: 600,
+                        color: "var(--chatllm-text-muted)",
+                        textTransform: "uppercase",
+                        letterSpacing: "0.02em"
+                      },
+                      children: displayModel
+                    }
+                  )
+                }
+              ),
+              isLoading && !displayContent && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", gap: "4px", alignItems: "center" }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "chatllm-dot-bounce", style: dotStyle }),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "chatllm-dot-bounce", style: dotStyle }),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "chatllm-dot-bounce", style: dotStyle })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                    "span",
+                    {
+                      style: {
+                        fontSize: "14px",
+                        fontWeight: 600,
+                        fontStyle: "italic",
+                        color: "var(--chatllm-text-muted)"
+                      },
+                      children: "Thinking..."
                     }
                   )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "chatllm-skeleton-pulse", style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { height: "32px", width: "75%", backgroundColor: "var(--chatllm-bg-tertiary)", borderRadius: "8px" } }),
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { height: "16px", width: "100%", backgroundColor: "var(--chatllm-bg-secondary)", borderRadius: "4px" } }),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { height: "16px", width: "85%", backgroundColor: "var(--chatllm-bg-secondary)", borderRadius: "4px" } }),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { height: "16px", width: "65%", backgroundColor: "var(--chatllm-bg-secondary)", borderRadius: "4px" } })
+                  ] })
                 ] })
-              ]
-            }
-          )
-        ] })
-      ]
+              ] }),
+              displayContent && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { wordBreak: "break-word" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                MarkdownRenderer,
+                {
+                  content: displayContent,
+                  onChoiceClick,
+                  showThinking,
+                  thinkingDefaultOpen
+                }
+              ) }),
+              displaySources && displaySources.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    flexWrap: "wrap",
+                    gap: "8px",
+                    marginTop: "16px",
+                    paddingTop: "16px",
+                    borderTop: "1px solid var(--chatllm-border-light)"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                      "span",
+                      {
+                        style: {
+                          fontSize: "12px",
+                          fontWeight: 500,
+                          color: "var(--chatllm-text-muted)",
+                          marginRight: "4px"
+                        },
+                        children: "\uCD9C\uCC98:"
+                      }
+                    ),
+                    displaySources.map((source, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                      LinkChip,
+                      {
+                        text: source.title,
+                        url: source.url,
+                        index: index + 1,
+                        showFavicon: true
+                      },
+                      source.id
+                    ))
+                  ]
+                }
+              ),
+              showActions && !isLoading && displayContent && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    gap: "4px",
+                    marginTop: "16px"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { onClick: onCopy, style: actionButtonStyle, title: "\uBCF5\uC0AC", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                      IconSvg,
+                      {
+                        name: isCopied ? "check-line" : "file-copy-line",
+                        size: 16,
+                        color: isCopied ? "var(--chatllm-success)" : "var(--chatllm-text-muted)"
+                      }
+                    ) }),
+                    onRegenerate && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { onClick: onRegenerate, style: actionButtonStyle, title: "\uB2E4\uC2DC \uC0DD\uC131", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IconSvg, { name: "refresh-line", size: 16, color: "var(--chatllm-text-muted)" }) })
+                  ]
+                }
+              )
+            ] })
+          ]
+        }
+      )
     }
   );
 };
+var ModelMenu = ({ models, onSelect, onClose }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  "div",
+  {
+    style: {
+      position: "absolute",
+      bottom: "100%",
+      right: 0,
+      marginBottom: "4px",
+      backgroundColor: "var(--chatllm-content-bg)",
+      border: "1px solid var(--chatllm-border)",
+      borderRadius: "12px",
+      boxShadow: "var(--chatllm-shadow-sheet)",
+      minWidth: "180px",
+      zIndex: 100,
+      overflow: "hidden"
+    },
+    onMouseLeave: onClose,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "div",
+        {
+          style: {
+            padding: "10px 14px",
+            fontSize: "11px",
+            fontWeight: 700,
+            color: "var(--chatllm-text-muted)",
+            textTransform: "uppercase",
+            letterSpacing: "0.05em",
+            borderBottom: "1px solid var(--chatllm-border-light)"
+          },
+          children: "\uB2E4\uB978 \uBAA8\uB378\uC5D0\uAC8C \uC9C8\uBB38"
+        }
+      ),
+      models.map((model) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        "button",
+        {
+          onClick: () => onSelect(model.id),
+          style: {
+            width: "100%",
+            padding: "12px 14px",
+            display: "flex",
+            alignItems: "center",
+            gap: "10px",
+            backgroundColor: "transparent",
+            border: "none",
+            cursor: "pointer",
+            fontSize: "13px",
+            color: "var(--chatllm-text)",
+            textAlign: "left",
+            transition: "background-color 0.15s"
+          },
+          onMouseEnter: (e) => {
+            e.currentTarget.style.backgroundColor = "var(--chatllm-bg-hover)";
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.backgroundColor = "transparent";
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IconSvg, { name: "robot-line", size: 16, color: "var(--chatllm-primary)" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { flex: 1, fontWeight: 500 }, children: model.name }),
+            model.provider && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "span",
+              {
+                style: {
+                  fontSize: "10px",
+                  padding: "2px 8px",
+                  backgroundColor: "var(--chatllm-bg-tertiary)",
+                  borderRadius: "4px",
+                  color: "var(--chatllm-text-muted)"
+                },
+                children: model.provider
+              }
+            )
+          ]
+        },
+        model.id
+      ))
+    ]
+  }
+);
 var dotStyle = {
   width: "8px",
   height: "8px",
   borderRadius: "50%",
-  backgroundColor: "var(--chatllm-primary, #3b82f6)",
-  animation: "chatllm-typing 1.4s infinite ease-in-out both"
+  backgroundColor: "var(--chatllm-primary)"
 };
 var actionButtonStyle = {
-  padding: "6px",
+  padding: "8px",
   backgroundColor: "transparent",
   border: "none",
-  borderRadius: "6px",
+  borderRadius: "8px",
   cursor: "pointer",
   display: "flex",
   alignItems: "center",
@@ -4104,8 +4291,8 @@ var navButtonStyle = {
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  backgroundColor: "var(--chatllm-bg, #ffffff)",
-  border: "1px solid var(--chatllm-border, #e5e7eb)",
+  backgroundColor: "var(--chatllm-content-bg)",
+  border: "1px solid var(--chatllm-border)",
   borderRadius: "6px"
 };
 
@@ -4170,7 +4357,7 @@ var MessageList = ({
     "div",
     {
       ref: containerRef,
-      className: "chatllm-message-list",
+      className: "chatllm-message-list chatllm-scrollbar",
       style: {
         flex: 1,
         overflow: "auto",
@@ -4178,34 +4365,49 @@ var MessageList = ({
       },
       onMouseUp: handleMouseUp,
       children: [
-        messages.map((message, index) => {
-          const nextAssistant = message.role === "user" && index + 1 < messages.length ? messages[index + 1] : null;
-          const assistantForAlts = nextAssistant?.role === "assistant" ? nextAssistant : null;
-          const activeAltIndex = assistantForAlts ? activeAlternatives[assistantForAlts.id] ?? 0 : 0;
-          return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-            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,
-              nextAssistantMessage: assistantForAlts,
-              activeAlternativeIndex: message.role === "user" ? activeAltIndex : activeAlternatives[message.id] ?? 0,
-              onAskOtherModel: message.role === "user" && assistantForAlts && onAskOtherModel ? (targetModel) => onAskOtherModel(message.id, assistantForAlts.id, targetModel) : void 0,
-              onAlternativeChange: message.role === "user" && assistantForAlts && onSetActiveAlternative ? (idx) => onSetActiveAlternative(assistantForAlts.id, idx) : message.role === "assistant" && onSetActiveAlternative ? (idx) => onSetActiveAlternative(message.id, idx) : void 0,
-              models,
-              alternatives: message.role === "assistant" ? message.alternatives : assistantForAlts?.alternatives,
-              onChoiceClick: message.role === "assistant" ? onChoiceClick : void 0,
-              showThinking,
-              thinkingDefaultOpen
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          "div",
+          {
+            style: {
+              maxWidth: "860px",
+              margin: "0 auto",
+              paddingTop: "32px",
+              paddingBottom: "240px"
+              // Space for floating input
             },
-            message.id
-          );
-        }),
+            children: [
+              messages.map((message, index) => {
+                const nextAssistant = message.role === "user" && index + 1 < messages.length ? messages[index + 1] : null;
+                const assistantForAlts = nextAssistant?.role === "assistant" ? nextAssistant : null;
+                const activeAltIndex = assistantForAlts ? activeAlternatives[assistantForAlts.id] ?? 0 : 0;
+                return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  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,
+                    nextAssistantMessage: assistantForAlts,
+                    activeAlternativeIndex: message.role === "user" ? activeAltIndex : activeAlternatives[message.id] ?? 0,
+                    onAskOtherModel: message.role === "user" && assistantForAlts && onAskOtherModel ? (targetModel) => onAskOtherModel(message.id, assistantForAlts.id, targetModel) : void 0,
+                    onAlternativeChange: message.role === "user" && assistantForAlts && onSetActiveAlternative ? (idx) => onSetActiveAlternative(assistantForAlts.id, idx) : message.role === "assistant" && onSetActiveAlternative ? (idx) => onSetActiveAlternative(message.id, idx) : void 0,
+                    models,
+                    alternatives: message.role === "assistant" ? message.alternatives : assistantForAlts?.alternatives,
+                    onChoiceClick: message.role === "assistant" ? onChoiceClick : void 0,
+                    showThinking,
+                    thinkingDefaultOpen
+                  },
+                  message.id
+                );
+              }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: messagesEndRef })
+            ]
+          }
+        ),
         selectionPosition && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           "div",
           {
@@ -4259,8 +4461,7 @@ var MessageList = ({
               )
             ]
           }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: messagesEndRef })
+        )
       ]
     }
   );
@@ -4295,219 +4496,110 @@ var EmptyState = ({
         alignItems: "center",
         justifyContent: "center",
         padding: "48px 24px",
+        paddingBottom: "200px",
+        // Space for floating input
         textAlign: "center"
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "div",
           {
+            className: "chatllm-sheet",
             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)"
+              marginBottom: "32px",
+              color: "var(--chatllm-primary)"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(IconSvg, { name: "sparkling-line", size: 32, color: "#ffffff" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(IconSvg, { name: "chat-1-line", size: 40 })
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "h1",
           {
             style: {
-              fontSize: "28px",
-              fontWeight: 600,
-              color: "var(--chatllm-text, #1f2937)",
-              marginBottom: "8px"
-            },
-            children: greeting
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          "p",
-          {
-            style: {
-              fontSize: "16px",
-              color: "var(--chatllm-text-muted, #6b7280)",
-              marginBottom: "32px"
+              fontSize: "30px",
+              fontWeight: 700,
+              color: "var(--chatllm-text)",
+              marginBottom: "40px",
+              lineHeight: 1.3
             },
-            children: "\uBB34\uC5C7\uC744 \uB3C4\uC640\uB4DC\uB9B4\uAE4C\uC694?"
+            children: "How can I help you today?"
           }
         ),
-        actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        (actions.length > 0 || templates.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
           "div",
           {
             style: {
-              display: "grid",
-              gridTemplateColumns: "repeat(auto-fit, minmax(140px, 1fr))",
+              display: "flex",
+              flexWrap: "wrap",
+              justifyContent: "center",
               gap: "12px",
-              width: "100%",
-              maxWidth: "600px",
-              marginBottom: "32px"
+              maxWidth: "800px",
+              marginBottom: "48px"
             },
-            children: actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-              "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: [
+              actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                "button",
+                {
+                  onClick: () => onActionSelect?.(action),
+                  className: "chatllm-btn-secondary",
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "8px",
+                    padding: "12px 20px",
+                    fontSize: "14px",
+                    fontWeight: 500
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      IconSvg,
+                      {
+                        name: getActionIcon(action.icon),
+                        size: 18,
+                        color: "var(--chatllm-primary)"
+                      }
+                    ),
+                    action.label
+                  ]
                 },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                    "div",
-                    {
-                      style: {
-                        width: "44px",
-                        height: "44px",
-                        borderRadius: "12px",
-                        backgroundColor: "var(--chatllm-primary-light, #dbeafe)",
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center"
-                      },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                        IconSvg,
-                        {
-                          name: getActionIcon(action.icon),
-                          size: 22,
-                          color: "var(--chatllm-primary, #3b82f6)"
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                    "div",
-                    {
-                      style: {
-                        fontSize: "14px",
-                        fontWeight: 500,
-                        color: "var(--chatllm-text, #1f2937)"
-                      },
-                      children: action.label
-                    }
-                  ) })
-                ]
-              },
-              action.id
-            ))
-          }
-        ),
-        templates.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { width: "100%", maxWidth: "600px" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-            "h3",
-            {
-              style: {
-                fontSize: "14px",
-                fontWeight: 500,
-                color: "var(--chatllm-text-muted, #6b7280)",
-                marginBottom: "12px",
-                textAlign: "left"
-              },
-              children: "\uCD94\uCC9C \uD504\uB86C\uD504\uD2B8"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-            "div",
-            {
-              style: {
-                display: "flex",
-                flexDirection: "column",
-                gap: "8px"
-              },
-              children: templates.map((template) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                action.id
+              )),
+              templates.slice(0, 4).map((template) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                 "button",
                 {
                   onClick: () => onTemplateClick(template),
+                  className: "chatllm-btn-secondary",
                   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)";
+                    gap: "8px",
+                    padding: "12px 20px",
+                    fontSize: "14px",
+                    fontWeight: 500
                   },
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                      "div",
+                      IconSvg,
                       {
-                        style: {
-                          width: "36px",
-                          height: "36px",
-                          borderRadius: "8px",
-                          backgroundColor: "var(--chatllm-bg-secondary, #f3f4f6)",
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "center",
-                          flexShrink: 0
-                        },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(IconSvg, { name: "file-text-line", size: 18, color: "var(--chatllm-text-muted, #6b7280)" })
+                        name: "sparkling-line",
+                        size: 18,
+                        color: "var(--chatllm-primary)"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                        "div",
-                        {
-                          style: {
-                            fontSize: "14px",
-                            fontWeight: 500,
-                            color: "var(--chatllm-text, #1f2937)"
-                          },
-                          children: template.title
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                        "div",
-                        {
-                          style: {
-                            fontSize: "13px",
-                            color: "var(--chatllm-text-muted, #9ca3af)",
-                            overflow: "hidden",
-                            textOverflow: "ellipsis",
-                            whiteSpace: "nowrap"
-                          },
-                          children: template.description
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(IconSvg, { name: "arrow-right-line", size: 16, color: "var(--chatllm-text-muted, #9ca3af)" })
+                    template.title
                   ]
                 },
                 template.id
               ))
-            }
-          )
-        ] })
+            ]
+          }
+        )
       ]
     }
   );
@@ -4539,7 +4631,7 @@ var MemoryPanel = ({
   const [expandedId, setExpandedId] = (0, import_react11.useState)(null);
   const [activeTab, setActiveTab] = (0, import_react11.useState)("all");
   const filteredItems = activeTab === "all" ? items : items.filter((item) => item.category === activeTab);
-  const formatDate2 = (timestamp) => {
+  const formatDate = (timestamp) => {
     const date = new Date(timestamp);
     return date.toLocaleDateString("ko-KR", {
       month: "short",
@@ -4778,7 +4870,7 @@ var MemoryPanel = ({
                           children: categoryLabels[item.category]
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { fontSize: "11px", color: "var(--chatllm-text-muted, #9ca3af)" }, children: formatDate2(item.timestamp) })
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { fontSize: "11px", color: "var(--chatllm-text-muted, #9ca3af)" }, children: formatDate(item.timestamp) })
                     ] }),
                     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                       "div",
@@ -5354,6 +5446,8 @@ var injectStyles = () => {
   const style = document.createElement("style");
   style.id = styleId;
   style.textContent = `
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
     @keyframes chatllm-typing {
       0%, 80%, 100% {
         transform: scale(0);
@@ -5365,46 +5459,67 @@ var injectStyles = () => {
       }
     }
 
+    @keyframes chatllm-bounce {
+      0%, 100% { transform: translateY(0); }
+      50% { transform: translateY(-4px); }
+    }
+
+    @keyframes chatllm-pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.5; }
+    }
+
     .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-primary: #4A90E2;
+      --chatllm-primary-hover: #357ABD;
+      --chatllm-primary-light: rgba(74, 144, 226, 0.1);
+      --chatllm-bg: #F5F5F5;
+      --chatllm-bg-secondary: #F5F5F5;
+      --chatllm-bg-tertiary: #EDEDED;
+      --chatllm-bg-hover: rgba(255, 255, 255, 0.4);
+      --chatllm-bg-active: rgba(255, 255, 255, 0.6);
+      --chatllm-bg-disabled: #E5E7EB;
+      --chatllm-sidebar-bg: #F5F5F5;
+      --chatllm-content-bg: #FFFFFF;
+      --chatllm-input-bg: #FFFFFF;
+      --chatllm-user-bubble: #EDEDED;
+      --chatllm-text: #1e293b;
+      --chatllm-text-secondary: #475569;
+      --chatllm-text-muted: #94a3b8;
+      --chatllm-border: #e2e8f0;
+      --chatllm-border-light: rgba(226, 232, 240, 0.5);
       --chatllm-error: #ef4444;
       --chatllm-success: #22c55e;
-      --chatllm-user-avatar: #e5e7eb;
-      --chatllm-assistant-avatar: #dbeafe;
+      --chatllm-radius: 1rem;
+      --chatllm-radius-lg: 1.5rem;
+      --chatllm-shadow-sheet: 0 4px 20px -2px rgba(0, 0, 0, 0.05), 0 2px 6px -2px rgba(0, 0, 0, 0.03);
+      --chatllm-shadow-input: 0 10px 40px -10px rgba(0, 0, 0, 0.1);
     }
 
     .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-primary-light: rgba(96, 165, 250, 0.15);
+      --chatllm-bg: #0f172a;
+      --chatllm-bg-secondary: #1e293b;
+      --chatllm-bg-tertiary: #334155;
+      --chatllm-bg-hover: rgba(51, 65, 85, 0.5);
+      --chatllm-bg-active: rgba(51, 65, 85, 0.8);
+      --chatllm-sidebar-bg: #0f172a;
+      --chatllm-content-bg: #1e293b;
+      --chatllm-input-bg: #1e293b;
+      --chatllm-user-bubble: #334155;
+      --chatllm-text: #f1f5f9;
+      --chatllm-text-secondary: #cbd5e1;
+      --chatllm-text-muted: #64748b;
+      --chatllm-border: #334155;
+      --chatllm-border-light: rgba(51, 65, 85, 0.5);
+    }
+
+    .chatllm-root {
+      font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
     }
 
     .chatllm-root * {
@@ -5420,17 +5535,57 @@ var injectStyles = () => {
       outline-offset: 2px;
     }
 
-    .chatllm-message-list::-webkit-scrollbar {
-      width: 6px;
+    .chatllm-scrollbar::-webkit-scrollbar {
+      width: 5px;
     }
 
-    .chatllm-message-list::-webkit-scrollbar-track {
+    .chatllm-scrollbar::-webkit-scrollbar-track {
       background: transparent;
     }
 
-    .chatllm-message-list::-webkit-scrollbar-thumb {
-      background-color: var(--chatllm-border);
-      border-radius: 3px;
+    .chatllm-scrollbar::-webkit-scrollbar-thumb {
+      background: #E0E0E0;
+      border-radius: 10px;
+    }
+
+    .chatllm-sheet {
+      background: var(--chatllm-content-bg);
+      border-radius: var(--chatllm-radius-lg);
+      box-shadow: var(--chatllm-shadow-sheet);
+      border: 1px solid var(--chatllm-border);
+    }
+
+    .chatllm-input-container {
+      background: var(--chatllm-input-bg);
+      border-radius: var(--chatllm-radius-lg);
+      box-shadow: var(--chatllm-shadow-input);
+      border: 1px solid var(--chatllm-border);
+      transition: all 0.3s ease;
+    }
+
+    .chatllm-input-container:focus-within {
+      border-color: rgba(74, 144, 226, 0.3);
+      box-shadow: var(--chatllm-shadow-input), 0 0 0 4px rgba(74, 144, 226, 0.05);
+    }
+
+    .chatllm-dot-bounce {
+      animation: chatllm-bounce 0.6s infinite ease-in-out;
+    }
+
+    .chatllm-dot-bounce:nth-child(2) {
+      animation-delay: 0.1s;
+    }
+
+    .chatllm-dot-bounce:nth-child(3) {
+      animation-delay: 0.2s;
+    }
+
+    .chatllm-skeleton-pulse {
+      animation: chatllm-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    }
+
+    .chatllm-sidebar-transition {
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     }
 
     .chatllm-table {
@@ -5441,22 +5596,22 @@ var injectStyles = () => {
 
     .chatllm-table th,
     .chatllm-table td {
-      border: 1px solid var(--chatllm-border, #e5e7eb);
+      border: 1px solid var(--chatllm-border);
       padding: 10px 12px;
     }
 
     .chatllm-table th {
-      background-color: var(--chatllm-bg-secondary, #f9fafb);
+      background-color: var(--chatllm-bg-tertiary);
       font-weight: 600;
     }
 
     .chatllm-table tr:hover {
-      background-color: var(--chatllm-bg-hover, #f3f4f6);
+      background-color: var(--chatllm-bg-hover);
     }
 
     .chatllm-image {
       max-width: 100%;
-      border-radius: 8px;
+      border-radius: var(--chatllm-radius);
       margin: 8px 0;
       display: block;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
@@ -5465,6 +5620,39 @@ var injectStyles = () => {
     .chatllm-image:hover {
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     }
+
+    .chatllm-btn-primary {
+      background: var(--chatllm-primary);
+      color: white;
+      border: none;
+      border-radius: var(--chatllm-radius);
+      font-weight: 600;
+      transition: all 0.2s ease;
+      box-shadow: 0 2px 8px rgba(74, 144, 226, 0.25);
+    }
+
+    .chatllm-btn-primary:hover {
+      background: var(--chatllm-primary-hover);
+    }
+
+    .chatllm-btn-primary:active {
+      transform: scale(0.98);
+    }
+
+    .chatllm-btn-secondary {
+      background: var(--chatllm-content-bg);
+      color: var(--chatllm-text-secondary);
+      border: 1px solid var(--chatllm-border);
+      border-radius: 9999px;
+      font-weight: 500;
+      transition: all 0.2s ease;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    }
+
+    .chatllm-btn-secondary:hover {
+      background: var(--chatllm-bg-hover);
+      border-color: rgba(74, 144, 226, 0.3);
+    }
   `;
   document.head.appendChild(style);
 };
@@ -5630,8 +5818,10 @@ var ChatUI = ({
       style: {
         display: "flex",
         height: "100%",
-        backgroundColor: "var(--chatllm-bg-secondary)",
-        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
+        width: "100%",
+        backgroundColor: "var(--chatllm-bg)",
+        overflow: "hidden",
+        position: "relative"
       },
       children: [
         showSidebar && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
@@ -5654,7 +5844,8 @@ var ChatUI = ({
               flex: 1,
               display: "flex",
               flexDirection: "column",
-              backgroundColor: "var(--chatllm-bg)",
+              position: "relative",
+              overflow: "hidden",
               minWidth: 0
             },
             children: [