@melony/react 0.1.12 → 0.1.15

package/dist/index.cjs

@@ -1,20 +1,23 @@
 'use strict';
 
-var React9 = require('react');
+var React11 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var client = require('melony/client');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
-var jsxRuntime = require('react/jsx-runtime');
-var client = require('@melony/core/client');
-var separator = require('@base-ui/react/separator');
+var button = require('@base-ui/react/button');
+var classVarianceAuthority = require('class-variance-authority');
 var ICONS = require('@tabler/icons-react');
+var menu = require('@base-ui/react/menu');
+var separator = require('@base-ui/react/separator');
+var dialog = require('@base-ui/react/dialog');
 var mergeProps = require('@base-ui/react/merge-props');
 var useRender = require('@base-ui/react/use-render');
-var classVarianceAuthority = require('class-variance-authority');
 var input = require('@base-ui/react/input');
 var select = require('@base-ui/react/select');
-var button = require('@base-ui/react/button');
+var reactDom = require('react-dom');
+var reactHotkeysHook = require('react-hotkeys-hook');
 var alertDialog = require('@base-ui/react/alert-dialog');
-var menu = require('@base-ui/react/menu');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -34,13 +37,12 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React9__namespace = /*#__PURE__*/_interopNamespace(React9);
+var React11__namespace = /*#__PURE__*/_interopNamespace(React11);
 var ICONS__namespace = /*#__PURE__*/_interopNamespace(ICONS);
 
 // src/providers/melony-provider.tsx
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
+
+// src/lib/group-events-to-messages.ts
 function groupEventsToMessages(events) {
   if (events.length === 0) return [];
   const messages = [];
@@ -64,7 +66,7 @@ function groupEventsToMessages(events) {
   }
   return messages;
 }
-var MelonyContext = React9.createContext(
+var MelonyContext = React11.createContext(
   void 0
 );
 var MelonyClientProvider = ({
@@ -72,20 +74,20 @@ var MelonyClientProvider = ({
   client,
   initialEvents
 }) => {
-  const [state, setState] = React9.useState(client.getState());
-  React9.useEffect(() => {
+  const [state, setState] = React11.useState(client.getState());
+  React11.useEffect(() => {
     if (initialEvents && initialEvents.length > 0 && client.getState().events.length === 0) {
       client.reset(initialEvents);
     }
   }, [client, initialEvents]);
-  React9.useEffect(() => {
+  React11.useEffect(() => {
     setState(client.getState());
     const unsubscribe = client.subscribe(setState);
     return () => {
       unsubscribe();
     };
   }, [client]);
-  const sendEvent = React9.useCallback(
+  const sendEvent = React11.useCallback(
     async (event, options) => {
       const generator = client.sendEvent(event, options);
       for await (const _ of generator) {
@@ -93,11 +95,11 @@ var MelonyClientProvider = ({
     },
     [client]
   );
-  const reset = React9.useCallback(
+  const reset = React11.useCallback(
     (events) => client.reset(events),
     [client]
   );
-  const value = React9.useMemo(
+  const value = React11.useMemo(
     () => ({
       ...state,
       messages: groupEventsToMessages(state.events),
@@ -109,16 +111,16 @@ var MelonyClientProvider = ({
   );
   return /* @__PURE__ */ jsxRuntime.jsx(MelonyContext.Provider, { value, children });
 };
-var AuthContext = React9.createContext(
+var AuthContext = React11.createContext(
   void 0
 );
 var AuthProvider = ({
   children,
   service
 }) => {
-  const [user, setUser] = React9.useState(null);
-  const [isLoading, setIsLoading] = React9.useState(true);
-  const fetchMe = React9.useCallback(async () => {
+  const [user, setUser] = React11.useState(null);
+  const [isLoading, setIsLoading] = React11.useState(true);
+  const fetchMe = React11.useCallback(async () => {
     setIsLoading(true);
     try {
       const userData = await service.getMe();
@@ -130,13 +132,13 @@ var AuthProvider = ({
       setIsLoading(false);
     }
   }, [service]);
-  React9.useEffect(() => {
+  React11.useEffect(() => {
     fetchMe();
   }, [fetchMe]);
-  const login = React9.useCallback(() => {
+  const login = React11.useCallback(() => {
     service.login();
   }, [service]);
-  const logout = React9.useCallback(async () => {
+  const logout = React11.useCallback(async () => {
     try {
       await service.logout();
       setUser(null);
@@ -172,7 +174,7 @@ var AuthProvider = ({
   }
   return /* @__PURE__ */ jsxRuntime.jsx(AuthContext.Provider, { value, children });
 };
-var ThreadContext = React9.createContext(
+var ThreadContext = React11.createContext(
   void 0
 );
 var ThreadProvider = ({
@@ -180,17 +182,17 @@ var ThreadProvider = ({
   service,
   initialThreadId: providedInitialThreadId
 }) => {
-  const defaultInitialThreadId = React9.useMemo(() => client.generateId(), []);
+  const defaultInitialThreadId = React11.useMemo(() => client.generateId(), []);
   const initialThreadId = providedInitialThreadId || defaultInitialThreadId;
-  const [threads, setThreads] = React9.useState([]);
-  const [activeThreadId, setActiveThreadId] = React9.useState(
+  const [threads, setThreads] = React11.useState([]);
+  const [activeThreadId, setActiveThreadId] = React11.useState(
     initialThreadId
   );
-  const [isLoading, setIsLoading] = React9.useState(true);
-  const [error, setError] = React9.useState(null);
-  const [threadEvents, setThreadEvents] = React9.useState([]);
-  const [isLoadingEvents, setIsLoadingEvents] = React9.useState(false);
-  const fetchThreads = React9.useCallback(async () => {
+  const [isLoading, setIsLoading] = React11.useState(true);
+  const [error, setError] = React11.useState(null);
+  const [threadEvents, setThreadEvents] = React11.useState([]);
+  const [isLoadingEvents, setIsLoadingEvents] = React11.useState(false);
+  const fetchThreads = React11.useCallback(async () => {
     setIsLoading(true);
     setError(null);
     try {
@@ -204,13 +206,13 @@ var ThreadProvider = ({
       setIsLoading(false);
     }
   }, [service]);
-  React9.useEffect(() => {
+  React11.useEffect(() => {
     fetchThreads();
   }, [fetchThreads]);
-  const selectThread = React9.useCallback((threadId) => {
+  const selectThread = React11.useCallback((threadId) => {
     setActiveThreadId(threadId);
   }, []);
-  const createThread = React9.useCallback(async () => {
+  const createThread = React11.useCallback(async () => {
     const newId = service.createThread ? await service.createThread() : client.generateId();
     const newThread = {
       id: newId,
@@ -220,7 +222,7 @@ var ThreadProvider = ({
     setActiveThreadId(newId);
     return newId;
   }, [service]);
-  const deleteThread = React9.useCallback(
+  const deleteThread = React11.useCallback(
     async (threadId) => {
       try {
         await service.deleteThread(threadId);
@@ -242,10 +244,10 @@ var ThreadProvider = ({
     },
     [service]
   );
-  const refreshThreads = React9.useCallback(async () => {
+  const refreshThreads = React11.useCallback(async () => {
     await fetchThreads();
   }, [fetchThreads]);
-  React9.useEffect(() => {
+  React11.useEffect(() => {
     if (!activeThreadId) {
       setThreadEvents([]);
       setIsLoadingEvents(false);
@@ -275,7 +277,7 @@ var ThreadProvider = ({
       cancelled = true;
     };
   }, [activeThreadId, service]);
-  const value = React9.useMemo(
+  const value = React11.useMemo(
     () => ({
       threads,
       activeThreadId,
@@ -303,14 +305,66 @@ var ThreadProvider = ({
   );
   return /* @__PURE__ */ jsxRuntime.jsx(ThreadContext.Provider, { value, children });
 };
+var ThemeContext = React11.createContext(void 0);
+function ThemeProvider({ children }) {
+  const [theme, setThemeState] = React11.useState("system");
+  const [resolvedTheme, setResolvedTheme] = React11.useState("light");
+  React11.useEffect(() => {
+    if (typeof window !== "undefined") {
+      const stored = localStorage.getItem("theme");
+      if (stored) {
+        setThemeState(stored);
+      }
+    }
+  }, []);
+  React11.useEffect(() => {
+    if (typeof window !== "undefined") {
+      if (theme === "system") {
+        const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+        const updateResolvedTheme = () => {
+          setResolvedTheme(mediaQuery.matches ? "dark" : "light");
+        };
+        updateResolvedTheme();
+        mediaQuery.addEventListener("change", updateResolvedTheme);
+        return () => mediaQuery.removeEventListener("change", updateResolvedTheme);
+      } else {
+        setResolvedTheme(theme);
+      }
+    }
+  }, [theme]);
+  React11.useEffect(() => {
+    if (typeof window !== "undefined") {
+      const root = document.documentElement;
+      if (resolvedTheme === "dark") {
+        root.classList.add("dark");
+      } else {
+        root.classList.remove("dark");
+      }
+    }
+  }, [resolvedTheme]);
+  const setTheme = (newTheme) => {
+    setThemeState(newTheme);
+    if (typeof window !== "undefined") {
+      localStorage.setItem("theme", newTheme);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: { theme, setTheme, resolvedTheme }, children });
+}
+function useTheme() {
+  const context = React11.useContext(ThemeContext);
+  if (context === void 0) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}
 var useMelony = (options) => {
-  const context = React9.useContext(MelonyContext);
+  const context = React11.useContext(MelonyContext);
   if (context === void 0) {
     throw new Error("useMelony must be used within a MelonyClientProvider");
   }
   const { client, reset } = context;
   const { initialEvents } = options || {};
-  React9.useEffect(() => {
+  React11.useEffect(() => {
     if (initialEvents && initialEvents.length > 0 && client.getState().events.length === 0) {
       reset(initialEvents);
     }
@@ -318,19 +372,326 @@ var useMelony = (options) => {
   return context;
 };
 var useAuth = () => {
-  const context = React9.useContext(AuthContext);
+  const context = React11.useContext(AuthContext);
   if (context === void 0) {
     throw new Error("useAuth must be used within an AuthProvider");
   }
   return context;
 };
 var useThreads = () => {
-  const context = React9.useContext(ThreadContext);
+  const context = React11.useContext(ThreadContext);
   if (context === void 0) {
     throw new Error("useThreads must be used within a ThreadProvider");
   }
   return context;
 };
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var buttonVariants = classVarianceAuthority.cva(
+  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-4xl border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline: "border-border bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+        destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
+        xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+        icon: "size-9",
+        "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    button.Button,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+function Textarea({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "textarea",
+    {
+      "data-slot": "textarea",
+      className: cn(
+        "border-input bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 resize-none rounded-xl border px-3 py-3 text-base transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenu({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+}
+function DropdownMenuContent({
+  align = "start",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    menu.Menu.Positioner,
+    {
+      className: "isolate z-50 outline-none",
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        menu.Menu.Popup,
+        {
+          "data-slot": "dropdown-menu-content",
+          className: cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground min-w-48 rounded-2xl p-1 shadow-2xl ring-1 duration-100 z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden", className),
+          ...props
+        }
+      )
+    }
+  ) });
+}
+function DropdownMenuGroup({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Group, { "data-slot": "dropdown-menu-group", ...props });
+}
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    menu.Menu.GroupLabel,
+    {
+      "data-slot": "dropdown-menu-label",
+      "data-inset": inset,
+      className: cn("text-muted-foreground px-3 py-2.5 text-xs data-[inset]:pl-8", className),
+      ...props
+    }
+  );
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    menu.Menu.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-xl px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    menu.Menu.CheckboxItem,
+    {
+      "data-slot": "dropdown-menu-checkbox-item",
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      ),
+      checked,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none",
+            "data-slot": "dropdown-menu-checkbox-item-indicator",
+            children: /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              ICONS.IconCheck,
+              {}
+            ) })
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    menu.Menu.Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: cn("bg-border/50 -mx-1 my-1 h-px", className),
+      ...props
+    }
+  );
+}
+function Composer({
+  value,
+  onChange,
+  onSubmit,
+  placeholder = "Type a message...",
+  isLoading,
+  className,
+  options = [],
+  autoFocus = false,
+  defaultSelectedIds = []
+}) {
+  const [selectedOptions, setSelectedOptions] = React11__namespace.default.useState(
+    () => new Set(defaultSelectedIds)
+  );
+  const toggleOption = (id, groupOptions, type = "multiple") => {
+    const next = new Set(selectedOptions);
+    if (type === "single") {
+      const isAlreadySelected = next.has(id);
+      if (groupOptions) {
+        groupOptions.forEach((o) => next.delete(o.id));
+      }
+      if (!isAlreadySelected) {
+        next.add(id);
+      }
+    } else {
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+    }
+    setSelectedOptions(next);
+  };
+  const handleInternalSubmit = () => {
+    const state = {};
+    options.forEach((group) => {
+      const selectedInGroup = group.options.filter(
+        (o) => selectedOptions.has(o.id)
+      );
+      if (selectedInGroup.length > 0) {
+        if (group.type === "single") {
+          state[group.id] = selectedInGroup[0].value;
+        } else {
+          state[group.id] = selectedInGroup.map((o) => ({
+            id: o.id,
+            value: o.value
+          }));
+        }
+      }
+    });
+    onSubmit(state);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleInternalSubmit();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative flex flex-col w-full", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col w-full border-input border-[1.5px] rounded-3xl bg-background shadow-sm focus-within:border-ring transition-all p-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Textarea,
+      {
+        value,
+        onChange: (e) => onChange(e.target.value),
+        onKeyDown: handleKeyDown,
+        placeholder,
+        className: "min-h-[44px] max-h-[200px] border-none bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 px-3 py-2 text-[15px] resize-none",
+        autoFocus
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center px-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: options.map((group) => {
+        const selectedInGroup = group.options.filter(
+          (o) => selectedOptions.has(o.id)
+        );
+        const label = selectedInGroup.length === 0 ? group.label : selectedInGroup.length === 1 ? selectedInGroup[0].label : `${group.label} (${selectedInGroup.length})`;
+        const isSingle = group.type === "single";
+        return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            DropdownMenuTrigger,
+            {
+              render: /* @__PURE__ */ jsxRuntime.jsxs(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  className: cn(
+                    selectedInGroup.length > 0 ? "text-foreground bg-muted/50" : "text-muted-foreground"
+                  ),
+                  children: [
+                    label,
+                    /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconChevronDown, { className: "h-3 w-3 opacity-50" })
+                  ]
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { align: "start", className: "w-56", children: /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuGroup, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuLabel, { children: group.label }),
+            /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {}),
+            group.options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+              DropdownMenuCheckboxItem,
+              {
+                checked: selectedOptions.has(option.id),
+                onCheckedChange: () => toggleOption(
+                  option.id,
+                  group.options,
+                  isSingle ? "single" : "multiple"
+                ),
+                onSelect: (e) => e.preventDefault(),
+                children: option.label
+              },
+              option.id
+            ))
+          ] }) })
+        ] }, group.id);
+      }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          type: "submit",
+          disabled: !value.trim() && !isLoading || isLoading,
+          size: "icon-lg",
+          onClick: handleInternalSubmit,
+          children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconLoader2, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconArrowUp, { className: "h-5 w-5" })
+        }
+      )
+    ] })
+  ] }) });
+}
 function Card({
   className,
   size = "default",
@@ -399,7 +760,7 @@ var Card2 = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Card,
     {
-      className: cn("w-full max-w-2xl shadow-sm", className),
+      className: cn("min-w-96", className),
       style,
       children: [
         (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "pb-3", children: [
@@ -714,31 +1075,137 @@ var ListItem = ({
     }
   );
 };
-var Image = ({
-  src,
-  alt,
-  size = "sm",
+function Dialog({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Root, { "data-slot": "dialog", ...props });
+}
+function DialogTrigger({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+function DialogPortal({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogOverlay({
   className,
-  style
-}) => {
-  const [hasError, setHasError] = React9.useState(false);
-  const [isLoading, setIsLoading] = React9.useState(true);
-  const sizes = {
-    sm: "h-11 w-11",
-    md: "h-22 w-22",
-    lg: "h-44 w-44"
-  };
-  const handleError = () => {
-    setHasError(true);
-    setIsLoading(false);
-  };
-  const handleLoad = () => {
-    setIsLoading(false);
-  };
-  if (hasError) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    dialog.Dialog.Backdrop,
+    {
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 duration-200 supports-backdrop-filter:backdrop-blur-sm fixed inset-0 isolate z-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      dialog.Dialog.Popup,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 sm:rounded-lg outline-none",
+          className
+        ),
+        ...props
+      }
+    )
+  ] });
+}
+function DialogClose({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    dialog.Dialog.Close,
+    {
+      "data-slot": "dialog-close",
+      className: cn(
+        "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogHeader({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn(
+        "flex flex-col space-y-1.5 text-center sm:text-left",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    dialog.Dialog.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn(
+        "text-lg font-semibold leading-none tracking-tight",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    dialog.Dialog.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+var Image = ({
+  src,
+  alt,
+  size = "sm",
+  className,
+  style
+}) => {
+  const [hasError, setHasError] = React11.useState(false);
+  const [isLoading, setIsLoading] = React11.useState(true);
+  const [open, setOpen] = React11.useState(false);
+  const sizes = {
+    sm: "h-11",
+    md: "h-22",
+    lg: "h-44"
+  };
+  const handleError = () => {
+    setHasError(true);
+    setIsLoading(false);
+  };
+  const handleLoad = () => {
+    setIsLoading(false);
+  };
+  if (hasError) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
         className: cn(
           "flex items-center justify-center rounded-md border bg-muted text-muted-foreground",
           sizes[size] || "h-11 w-11",
@@ -749,22 +1216,67 @@ var Image = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative overflow-hidden rounded-md border", className), style, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Dialog, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DialogTrigger, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn("relative overflow-hidden rounded-md border cursor-pointer", className),
+        style,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src,
+              alt,
+              onError: handleError,
+              onLoad: handleLoad,
+              className: cn(
+                "block h-auto w-full transition-opacity duration-200 hover:opacity-90",
+                isLoading ? "opacity-0" : "opacity-100",
+                sizes[size]
+              )
+            }
+          ),
+          isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-muted animate-pulse" })
+        ]
+      }
+    ) }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      "img",
+      DialogContent,
       {
-        src,
-        alt,
-        onError: handleError,
-        onLoad: handleLoad,
-        className: cn(
-          "block h-auto w-full transition-opacity duration-200",
-          isLoading ? "opacity-0" : "opacity-100",
-          sizes[size]
-        )
+        className: "max-w-[90vw] max-h-[90vh] p-0 bg-transparent border-none shadow-none",
+        onClick: (e) => e.stopPropagation(),
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center justify-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(DialogClose, { className: "absolute -top-10 right-0 text-white hover:text-gray-300 transition-colors z-10 bg-black/50 rounded-full p-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              className: "h-5 w-5",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  d: "M6 18L18 6M6 6l12 12"
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src,
+              alt: alt || "Enlarged image",
+              className: "max-w-full max-h-[90vh] object-contain rounded-lg"
+            }
+          )
+        ] })
       }
-    ),
-    isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-muted animate-pulse" })
+    )
   ] });
 };
 var Icon = ({
@@ -875,7 +1387,7 @@ var Chart = ({
   className,
   style
 }) => {
-  const [tooltip, setTooltip] = React9.useState(null);
+  const [tooltip, setTooltip] = React11.useState(null);
   if (!Array.isArray(data)) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-destructive border border-destructive/20 rounded-md bg-destructive/5", children: "Error: Chart data must be an array" });
   }
@@ -1220,19 +1732,6 @@ var Input2 = ({
     )
   ] });
 };
-function Textarea({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "textarea",
-    {
-      "data-slot": "textarea",
-      className: cn(
-        "border-input bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 resize-none rounded-xl border px-3 py-3 text-base transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      ),
-      ...props
-    }
-  );
-}
 var Textarea2 = ({
   placeholder,
   defaultValue,
@@ -1604,50 +2103,6 @@ var RadioGroup = ({
     )
   ] });
 };
-var buttonVariants = classVarianceAuthority.cva(
-  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-4xl border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/80",
-        outline: "border-border bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
-        ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
-        destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
-        link: "text-primary underline-offset-4 hover:underline"
-      },
-      size: {
-        default: "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
-        xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-        lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
-        icon: "size-9",
-        "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-function Button({
-  className,
-  variant = "default",
-  size = "default",
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    button.Button,
-    {
-      "data-slot": "button",
-      className: cn(buttonVariants({ variant, size, className })),
-      ...props
-    }
-  );
-}
 var Button2 = ({
   label,
   variant = "primary",
@@ -1664,6 +2119,8 @@ var Button2 = ({
     secondary: "secondary",
     danger: "destructive",
     outline: "outline",
+    ghost: "ghost",
+    link: "link",
     success: "default"
     // Success doesn't have a direct shadcn mapping in base variant, default is usually primary
   };
@@ -1686,7 +2143,7 @@ var Button2 = ({
 };
 var Form = ({ children, onSubmitAction, className, style }) => {
   const { sendEvent } = useMelony();
-  const [isSubmitted, setIsSubmitted] = React9.useState(false);
+  const [isSubmitted, setIsSubmitted] = React11.useState(false);
   const handleSubmit = (e) => {
     e.preventDefault();
     if (isSubmitted) return;
@@ -1732,6 +2189,32 @@ var Form = ({ children, onSubmitAction, className, style }) => {
     }
   );
 };
+function StarterPrompts({
+  prompts,
+  onPromptClick
+}) {
+  if (!prompts || prompts.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-4 animate-in fade-in slide-in-from-bottom-4 duration-500 mt-auto max-w-2xl", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-semibold tracking-tight", children: "What can I help with today?" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2 w-full", children: prompts.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      Button2,
+      {
+        label: item.label,
+        variant: "ghost",
+        size: "lg",
+        onClickAction: {
+          type: "text",
+          role: "user",
+          data: { content: item.prompt }
+        },
+        className: "w-full justify-start"
+      },
+      index
+    )) })
+  ] });
+}
 function UIRenderer({ node }) {
   const { type, props, children } = node;
   const typeMap = {
@@ -1770,69 +2253,108 @@ function UIRenderer({ node }) {
   const componentProps = { ...props };
   return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...componentProps, children: renderedChildren });
 }
-function Composer({
-  value,
-  onChange,
-  onSubmit,
-  placeholder = "Type a message...",
-  isLoading,
-  className
-}) {
-  const handleKeyDown = (e) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      onSubmit();
+function MessageContent({ events }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: events.map((event, index) => {
+    if (event.type === "text-delta") {
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { children: event.data?.delta }, index);
     }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative flex flex-col w-full", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col w-full border-input border-[1.5px] rounded-3xl bg-background shadow-sm focus-within:border-ring transition-all p-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Textarea,
-      {
-        value,
-        onChange: (e) => onChange(e.target.value),
-        onKeyDown: handleKeyDown,
-        placeholder,
-        className: "min-h-[44px] max-h-[200px] border-none bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 px-3 py-2 text-[15px] resize-none"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end items-center px-2 pb-0.5", children: /* @__PURE__ */ jsxRuntime.jsx(
-      Button,
-      {
-        type: "submit",
-        disabled: !value.trim() && !isLoading || isLoading,
-        size: "icon",
-        onClick: () => onSubmit(),
-        className: cn(
-          "h-8 w-8 rounded-full transition-all shrink-0",
-          value.trim() ? "bg-foreground text-background hover:bg-foreground/90" : "bg-muted-foreground/20 text-muted-foreground/40"
-        ),
-        children: /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconArrowUp, { className: "h-5 w-5" })
-      }
-    ) })
-  ] }) });
+    if (event.type === "text") {
+      return /* @__PURE__ */ jsxRuntime.jsx("p", { children: event.data?.content || event.data?.text }, index);
+    }
+    if (event.ui) {
+      return /* @__PURE__ */ jsxRuntime.jsx(UIRenderer, { node: event.ui }, index);
+    }
+    return null;
+  }) });
+}
+function MessageBubble({ message }) {
+  const isUser = message.role === "user";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "flex flex-col",
+        isUser ? "items-end" : "items-start"
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "flex flex-col items-start max-w-[85%] rounded-2xl px-4 py-2 space-y-4 whitespace-pre-wrap",
+            isUser ? "bg-primary text-primary-foreground" : "px-0 py-0 text-foreground"
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx(MessageContent, { events: message.content })
+        }
+      )
+    }
+  );
+}
+function LoadingIndicator({ status }) {
+  const [isExpanded, setIsExpanded] = React11.useState(false);
+  const message = status?.message || "Processing...";
+  const details = status?.details;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-muted-foreground group", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconLoader2, { className: "size-3.5 animate-spin" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-pulse", children: message }),
+      details && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => setIsExpanded(!isExpanded),
+          className: "p-0.5 hover:bg-muted rounded-sm transition-colors flex items-center justify-center",
+          title: isExpanded ? "Hide details" : "Show details",
+          children: isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconChevronUp, { className: "size-3.5 opacity-50 group-hover:opacity-100" }) : /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconChevronDown, { className: "size-3.5 opacity-50 group-hover:opacity-100" })
+        }
+      )
+    ] }),
+    isExpanded && details && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] leading-relaxed font-mono bg-muted/30 p-2.5 rounded border border-border/50 max-h-64 overflow-y-auto whitespace-pre-wrap text-muted-foreground shadow-sm", children: details })
+  ] });
+}
+function ErrorDisplay({ error }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-destructive p-2 border border-destructive rounded-md bg-destructive/10", children: error.message });
+}
+function MessageList({ messages, isLoading, error, loadingStatus }) {
+  if (messages.length === 0) {
+    return null;
+  }
+  const isTextStreaming = React11.useMemo(() => {
+    if (messages.length === 0 || !isLoading) return false;
+    const lastMessage = messages[messages.length - 1];
+    return lastMessage.content.some((event) => event.type === "text-delta");
+  }, [messages, isLoading]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+    messages.map((message, index) => /* @__PURE__ */ jsxRuntime.jsx(MessageBubble, { message }, index)),
+    isLoading && !isTextStreaming && /* @__PURE__ */ jsxRuntime.jsx(LoadingIndicator, { status: loadingStatus }),
+    error && /* @__PURE__ */ jsxRuntime.jsx(ErrorDisplay, { error })
+  ] });
 }
 function Thread({
   className,
   placeholder = "Type a message...",
   starterPrompts,
-  onStarterPromptClick
+  onStarterPromptClick,
+  options,
+  autoFocus = false,
+  defaultSelectedIds
 }) {
-  const { messages, isLoading, error, sendEvent } = useMelony();
-  const [input, setInput] = React9.useState("");
-  const messagesEndRef = React9.useRef(null);
-  React9.useEffect(() => {
+  const { messages, isLoading, error, sendEvent, loadingStatus } = useMelony();
+  const [input, setInput] = React11.useState("");
+  const messagesEndRef = React11.useRef(null);
+  React11.useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
-  const handleSubmit = async (e, overrideInput) => {
-    e?.preventDefault();
+  const handleSubmit = async (state, overrideInput) => {
     const text = (overrideInput ?? input).trim();
     if (!text || isLoading) return;
     if (!overrideInput) setInput("");
-    await sendEvent({
-      type: "text",
-      role: "user",
-      data: { content: text }
-    });
+    await sendEvent(
+      {
+        type: "text",
+        role: "user",
+        data: { content: text }
+      },
+      { state }
+    );
   };
   const handleStarterPromptClick = (prompt) => {
     if (onStarterPromptClick) {
@@ -1841,66 +2363,73 @@ function Thread({
       handleSubmit(void 0, prompt);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col h-full bg-background", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto p-4 space-y-6", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-4xl mx-auto w-full", children: [
-        messages.length === 0 && starterPrompts && starterPrompts.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center min-h-[300px] space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center space-y-2", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-semibold tracking-tight", children: "What can I help with today?" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3 w-full max-w-2xl px-4", children: starterPrompts.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
+  const showStarterPrompts = messages.length === 0 && starterPrompts && starterPrompts.length > 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn("relative flex flex-col h-full bg-background", className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto p-4 pb-36", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
             {
-              onClick: () => handleStarterPromptClick(item.prompt),
-              className: "flex items-center gap-3 p-4 rounded-xl border bg-card hover:bg-muted/50 transition-all text-left group",
+              className: cn(
+                "max-w-4xl mx-auto w-full p-4",
+                showStarterPrompts && "min-h-full flex flex-col"
+              ),
               children: [
-                item.icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 rounded-lg bg-muted group-hover:bg-background transition-colors", children: item.icon }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: item.label })
+                showStarterPrompts && /* @__PURE__ */ jsxRuntime.jsx(
+                  StarterPrompts,
+                  {
+                    prompts: starterPrompts,
+                    onPromptClick: handleStarterPromptClick
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  MessageList,
+                  {
+                    messages,
+                    isLoading,
+                    error,
+                    loadingStatus
+                  }
+                )
               ]
-            },
-            i
-          )) })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { ref: messagesEndRef })
         ] }),
-        messages.map((message, i) => /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 p-4 w-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-4xl mx-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+          Composer,
           {
-            className: cn(
-              "flex flex-col",
-              message.role === "user" ? "items-end" : "items-start"
-            ),
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: cn(
-                  "max-w-[85%] rounded-2xl px-4 py-2 space-y-2",
-                  message.role === "user" ? "bg-primary text-primary-foreground" : "px-0 py-0 text-foreground"
-                ),
-                children: message.content.map((event, j) => {
-                  if (event.type === "text-delta")
-                    return /* @__PURE__ */ jsxRuntime.jsx("span", { children: event.data?.delta }, j);
-                  if (event.type === "text")
-                    return /* @__PURE__ */ jsxRuntime.jsx("p", { children: event.data?.content || event.data?.text }, j);
-                  if (event.ui) return /* @__PURE__ */ jsxRuntime.jsx(UIRenderer, { node: event.ui }, j);
-                  return null;
-                })
-              }
-            )
-          },
-          i
-        )),
-        isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground animate-pulse", children: "Thinking..." }),
-        error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-destructive p-2 border border-destructive rounded-md bg-destructive/10", children: error.message })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { ref: messagesEndRef })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 border-t w-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-4xl mx-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
-      Composer,
-      {
-        value: input,
-        onChange: setInput,
-        onSubmit: handleSubmit,
-        placeholder,
-        isLoading
-      }
-    ) }) })
+            value: input,
+            onChange: setInput,
+            onSubmit: handleSubmit,
+            placeholder,
+            isLoading,
+            options,
+            autoFocus,
+            defaultSelectedIds
+          }
+        ) }) })
+      ]
+    }
+  );
+}
+function ChatHeader({
+  title,
+  leftContent,
+  rightContent,
+  className,
+  titleClassName,
+  children
+}) {
+  if (children) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("p-4 border-b border-border h-14 flex items-center shrink-0", className), children });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("p-4 border-b border-border h-14 flex items-center justify-between shrink-0", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: leftContent }),
+    rightContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1 shrink-0 ml-2", children: rightContent })
   ] });
 }
 var ThreadList = ({
@@ -1908,13 +2437,7 @@ var ThreadList = ({
   emptyState,
   onThreadSelect
 }) => {
-  const {
-    threads,
-    activeThreadId,
-    selectThread,
-    createThread,
-    deleteThread
-  } = useThreads();
+  const { threads, activeThreadId, selectThread, createThread, deleteThread } = useThreads();
   const handleThreadClick = (threadId) => {
     if (threadId !== activeThreadId) {
       selectThread(threadId);
@@ -1952,10 +2475,10 @@ var ThreadList = ({
     return d.toLocaleDateString();
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col h-full", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 border-b", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2", children: /* @__PURE__ */ jsxRuntime.jsxs(
       Button,
       {
-        variant: "outline",
+        variant: "ghost",
         size: "sm",
         onClick: handleNewThread,
         className: "w-full justify-start",
@@ -1976,31 +2499,13 @@ var ThreadList = ({
         {
           onClick: () => handleThreadClick(thread.id),
           className: cn(
-            "group relative flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors",
-            isActive ? "bg-primary text-primary-foreground" : "hover:bg-muted"
+            "group relative flex items-center gap-3 px-3 py-1.5 rounded-lg cursor-pointer transition-colors",
+            isActive ? "bg-muted" : "hover:bg-muted"
           ),
           children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "p",
-                {
-                  className: cn(
-                    "text-sm font-medium truncate",
-                    isActive && "text-primary-foreground"
-                  ),
-                  children: thread.title || `Thread ${thread.id.slice(0, 8)}`
-                }
-              ),
-              thread.updatedAt && /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  className: cn(
-                    "text-xs shrink-0",
-                    isActive ? "text-primary-foreground/70" : "text-muted-foreground"
-                  ),
-                  children: formatDate(thread.updatedAt)
-                }
-              )
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm font-medium truncate"), children: thread.title || `Thread ${thread.id.slice(0, 8)}` }),
+              thread.updatedAt && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-xs shrink-0"), children: formatDate(thread.updatedAt) })
             ] }) }),
             /* @__PURE__ */ jsxRuntime.jsx(
               Button,
@@ -2026,10 +2531,13 @@ function ChatPopup({
   title = "Chat",
   placeholder = "Message the AI",
   starterPrompts,
-  defaultOpen = false
+  options,
+  defaultOpen = false,
+  headerProps,
+  defaultSelectedIds
 }) {
-  const [isOpen, setIsOpen] = React9.useState(defaultOpen);
-  const [view, setView] = React9.useState("chat");
+  const [isOpen, setIsOpen] = React11.useState(defaultOpen);
+  const [view, setView] = React11.useState("chat");
   const { createThread } = useThreads();
   const handleNewChat = async () => {
     try {
@@ -2040,10 +2548,12 @@ function ChatPopup({
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed bottom-6 right-6 z-50 flex flex-col items-end gap-4 font-sans", children: [
-    isOpen && /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "py-0 w-[440px] h-[640px] flex flex-col overflow-hidden border bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60 shadow-2xl animate-in fade-in zoom-in-95 duration-200 origin-bottom-right", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "p-4 border-b flex flex-row items-center justify-between space-y-0 h-14 shrink-0", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-          view === "history" && /* @__PURE__ */ jsxRuntime.jsx(
+    isOpen && /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "py-0 w-[440px] h-[640px] gap-0 flex flex-col overflow-hidden border bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60 shadow-2xl animate-in fade-in zoom-in-95 duration-200 origin-bottom-right", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ChatHeader,
+        {
+          title: view === "history" ? "History" : title,
+          leftContent: view === "history" ? /* @__PURE__ */ jsxRuntime.jsx(
             Button,
             {
               variant: "ghost",
@@ -2052,50 +2562,52 @@ function ChatPopup({
               className: "text-muted-foreground hover:text-foreground",
               children: /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconArrowLeft, { className: "size-4" })
             }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-sm font-semibold", children: view === "history" ? "History" : title })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-          view === "chat" && /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
-            {
-              variant: "ghost",
-              size: "icon-xs",
-              onClick: () => setView("history"),
-              className: "text-muted-foreground hover:text-foreground",
-              title: "History",
-              children: /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconHistory, { className: "size-4" })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
-            {
-              variant: "ghost",
-              size: "icon-xs",
-              onClick: handleNewChat,
-              className: "text-muted-foreground hover:text-foreground",
-              title: "New Chat",
-              children: /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconPlus, { className: "size-4" })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
-            {
-              variant: "ghost",
-              size: "icon-xs",
-              onClick: () => setIsOpen(false),
-              className: "text-muted-foreground hover:text-foreground",
-              children: /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconX, { className: "size-4" })
-            }
-          )
-        ] })
-      ] }),
+          ) : void 0,
+          rightContent: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            view === "chat" && /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon-xs",
+                onClick: () => setView("history"),
+                className: "text-muted-foreground hover:text-foreground",
+                title: "History",
+                children: /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconHistory, { className: "size-4" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon-xs",
+                onClick: handleNewChat,
+                className: "text-muted-foreground hover:text-foreground",
+                title: "New Chat",
+                children: /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconPlus, { className: "size-4" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon-xs",
+                onClick: () => setIsOpen(false),
+                className: "text-muted-foreground hover:text-foreground",
+                children: /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconX, { className: "size-4" })
+              }
+            )
+          ] }),
+          ...headerProps
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden", children: view === "chat" ? /* @__PURE__ */ jsxRuntime.jsx(
         Thread,
         {
           placeholder,
           starterPrompts,
-          className: "h-full"
+          options,
+          className: "h-full",
+          defaultSelectedIds
         }
       ) : /* @__PURE__ */ jsxRuntime.jsx(
         ThreadList,
@@ -2123,16 +2635,21 @@ function ChatSidebar({
   title = "Chat",
   placeholder = "Message the AI",
   starterPrompts,
-  className
+  options,
+  className,
+  headerProps,
+  defaultSelectedIds
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col h-full border-r bg-background w-80", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 border-b h-14 flex items-center shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-semibold", children: title }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ChatHeader, { title, ...headerProps }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
       Thread,
       {
         placeholder,
         starterPrompts,
-        className: "h-full"
+        options,
+        className: "h-full",
+        defaultSelectedIds
       }
     ) })
   ] });
@@ -2141,13 +2658,437 @@ function ChatFull({
   title = "Chat",
   placeholder = "Message the AI",
   starterPrompts,
-  className
+  options,
+  className,
+  headerProps,
+  leftSidebar,
+  rightSidebar,
+  leftSidebarClassName,
+  rightSidebarClassName,
+  leftSidebarCollapsible = false,
+  rightSidebarCollapsible = false,
+  defaultLeftSidebarCollapsed = false,
+  defaultRightSidebarCollapsed = false,
+  leftSidebarCollapsed: controlledLeftCollapsed,
+  rightSidebarCollapsed: controlledRightCollapsed,
+  onLeftSidebarCollapseChange,
+  onRightSidebarCollapseChange,
+  autoFocus = false,
+  defaultSelectedIds
 }) {
+  const [internalLeftCollapsed, setInternalLeftCollapsed] = React11.useState(
+    defaultLeftSidebarCollapsed
+  );
+  const [internalRightCollapsed, setInternalRightCollapsed] = React11.useState(
+    defaultRightSidebarCollapsed
+  );
+  const leftCollapsed = controlledLeftCollapsed !== void 0 ? controlledLeftCollapsed : internalLeftCollapsed;
+  const rightCollapsed = controlledRightCollapsed !== void 0 ? controlledRightCollapsed : internalRightCollapsed;
+  const handleLeftToggle = () => {
+    const newCollapsed = !leftCollapsed;
+    if (controlledLeftCollapsed === void 0) {
+      setInternalLeftCollapsed(newCollapsed);
+    }
+    onLeftSidebarCollapseChange?.(newCollapsed);
+  };
+  const handleRightToggle = () => {
+    const newCollapsed = !rightCollapsed;
+    if (controlledRightCollapsed === void 0) {
+      setInternalRightCollapsed(newCollapsed);
+    }
+    onRightSidebarCollapseChange?.(newCollapsed);
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col h-full w-full bg-background", className), children: [
-    title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 border-b h-14 flex items-center shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-semibold", children: title }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(Thread, { placeholder, starterPrompts }) })
+    title && /* @__PURE__ */ jsxRuntime.jsx(ChatHeader, { title, ...headerProps }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-hidden flex relative", children: [
+      leftSidebar && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "flex-shrink-0 border-r border-border bg-background transition-all duration-300 ease-in-out overflow-hidden flex flex-col",
+              leftCollapsed && leftSidebarCollapsible ? "w-0 border-r-0 min-w-0" : "",
+              !leftCollapsed && leftSidebarClassName
+            ),
+            children: !leftCollapsed && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              leftSidebarCollapsible && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end p-2 border-b border-border shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon-sm",
+                  onClick: handleLeftToggle,
+                  "aria-label": "Collapse left sidebar",
+                  className: "h-8 w-8",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconChevronLeft, { className: "h-4 w-4" })
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden min-h-0", children: leftSidebar })
+            ] })
+          }
+        ),
+        leftSidebarCollapsible && leftCollapsed && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 border-r border-border bg-background flex items-center justify-center w-10", children: /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon-sm",
+            onClick: handleLeftToggle,
+            "aria-label": "Expand left sidebar",
+            className: "h-8 w-8",
+            children: /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconChevronRight, { className: "h-4 w-4" })
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+        Thread,
+        {
+          placeholder,
+          starterPrompts,
+          options,
+          autoFocus,
+          defaultSelectedIds
+        }
+      ) }),
+      rightSidebar && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        rightSidebarCollapsible && rightCollapsed && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 border-l border-border bg-background flex items-center justify-center w-10", children: /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon-sm",
+            onClick: handleRightToggle,
+            "aria-label": "Expand right sidebar",
+            className: "h-8 w-8",
+            children: /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconChevronLeft, { className: "h-4 w-4" })
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "flex-shrink-0 border-l border-border bg-background transition-all duration-300 ease-in-out overflow-hidden flex flex-col",
+              rightCollapsed && rightSidebarCollapsible ? "w-0 border-l-0 min-w-0" : "",
+              !rightCollapsed && rightSidebarClassName
+            ),
+            children: !rightCollapsed && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              rightSidebarCollapsible && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-start p-2 border-b border-border shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon-sm",
+                  onClick: handleRightToggle,
+                  "aria-label": "Collapse right sidebar",
+                  className: "h-8 w-8",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconChevronRight, { className: "h-4 w-4" })
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden min-h-0", children: rightSidebar })
+            ] })
+          }
+        )
+      ] })
+    ] })
   ] });
 }
+var PopoverContext = React11__namespace.createContext(
+  void 0
+);
+function usePopoverContext() {
+  const context = React11__namespace.useContext(PopoverContext);
+  if (!context) {
+    throw new Error("Popover components must be used within a Popover");
+  }
+  return context;
+}
+function Popover({
+  children,
+  defaultOpen = false,
+  open: controlledOpen,
+  onOpenChange
+}) {
+  const [internalOpen, setInternalOpen] = React11__namespace.useState(defaultOpen);
+  const triggerRef = React11__namespace.useRef(null);
+  const open = controlledOpen ?? internalOpen;
+  const setOpen = React11__namespace.useCallback(
+    (newOpen) => {
+      if (controlledOpen === void 0) {
+        setInternalOpen(newOpen);
+      }
+      onOpenChange?.(newOpen);
+    },
+    [controlledOpen, onOpenChange]
+  );
+  const value = React11__namespace.useMemo(
+    () => ({
+      open,
+      setOpen,
+      triggerRef
+    }),
+    [open, setOpen]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(PopoverContext.Provider, { value, children });
+}
+var PopoverTrigger = React11__namespace.forwardRef(
+  ({ asChild, className, children, ...props }, ref) => {
+    const { setOpen, triggerRef } = usePopoverContext();
+    const handleClick = (e) => {
+      setOpen(true);
+      props.onClick?.(e);
+    };
+    if (asChild && React11__namespace.isValidElement(children)) {
+      return React11__namespace.cloneElement(children, {
+        ref: (node) => {
+          triggerRef.current = node;
+          if (typeof children.ref === "function") {
+            children.ref(node);
+          } else if (children.ref) {
+            children.ref.current = node;
+          }
+        },
+        onClick: handleClick
+      });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref: (node) => {
+          triggerRef.current = node;
+          if (typeof ref === "function") {
+            ref(node);
+          } else if (ref) {
+            ref.current = node;
+          }
+        },
+        className,
+        onClick: handleClick,
+        ...props,
+        children
+      }
+    );
+  }
+);
+PopoverTrigger.displayName = "PopoverTrigger";
+var PopoverContent = React11__namespace.forwardRef(
+  ({
+    className,
+    side = "bottom",
+    align = "start",
+    sideOffset = 4,
+    alignOffset = 0,
+    children,
+    ...props
+  }, ref) => {
+    const { open, setOpen, triggerRef } = usePopoverContext();
+    const [position, setPosition] = React11__namespace.useState({ top: 0, left: 0 });
+    const contentRef = React11__namespace.useRef(null);
+    React11__namespace.useEffect(() => {
+      if (!open || !triggerRef.current) return;
+      const updatePosition = () => {
+        if (!triggerRef.current || !contentRef.current) return;
+        const triggerRect = triggerRef.current.getBoundingClientRect();
+        const contentRect = contentRef.current.getBoundingClientRect();
+        const scrollX = window.scrollX;
+        const scrollY = window.scrollY;
+        let top = 0;
+        let left = 0;
+        switch (side) {
+          case "bottom":
+            top = triggerRect.bottom + sideOffset + scrollY;
+            break;
+          case "top":
+            top = triggerRect.top - contentRect.height - sideOffset + scrollY;
+            break;
+          case "right":
+            top = triggerRect.top + scrollY;
+            left = triggerRect.right + sideOffset + scrollX;
+            break;
+          case "left":
+            top = triggerRect.top + scrollY;
+            left = triggerRect.left - contentRect.width - sideOffset + scrollX;
+            break;
+        }
+        switch (align) {
+          case "start":
+            if (side === "top" || side === "bottom") {
+              left = triggerRect.left + scrollX + alignOffset;
+            } else {
+              top += alignOffset;
+            }
+            break;
+          case "center":
+            if (side === "top" || side === "bottom") {
+              left = triggerRect.left + triggerRect.width / 2 - contentRect.width / 2 + scrollX + alignOffset;
+            } else {
+              top += triggerRect.height / 2 - contentRect.height / 2 + alignOffset;
+            }
+            break;
+          case "end":
+            if (side === "top" || side === "bottom") {
+              left = triggerRect.left + triggerRect.width - contentRect.width + scrollX + alignOffset;
+            } else {
+              top += triggerRect.height - contentRect.height + alignOffset;
+            }
+            break;
+        }
+        setPosition({ top, left });
+      };
+      requestAnimationFrame(() => {
+        updatePosition();
+      });
+      window.addEventListener("resize", updatePosition);
+      window.addEventListener("scroll", updatePosition, true);
+      return () => {
+        window.removeEventListener("resize", updatePosition);
+        window.removeEventListener("scroll", updatePosition, true);
+      };
+    }, [open, side, align, sideOffset, alignOffset, triggerRef]);
+    React11__namespace.useEffect(() => {
+      if (!open) return;
+      const handleClickOutside = (event) => {
+        if (contentRef.current && !contentRef.current.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) {
+          setOpen(false);
+        }
+      };
+      const handleEscape = (event) => {
+        if (event.key === "Escape") {
+          setOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("keydown", handleEscape);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+        document.removeEventListener("keydown", handleEscape);
+      };
+    }, [open, setOpen, triggerRef]);
+    if (!open) return null;
+    const content = /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: (node) => {
+          contentRef.current = node;
+          if (typeof ref === "function") {
+            ref(node);
+          } else if (ref) {
+            ref.current = node;
+          }
+        },
+        className: cn(
+          "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/5 rounded-2xl shadow-2xl ring-1 z-50 min-w-48 max-h-96 overflow-hidden",
+          className
+        ),
+        style: {
+          position: "absolute",
+          top: `${position.top}px`,
+          left: `${position.left}px`
+        },
+        ...props,
+        children
+      }
+    );
+    return reactDom.createPortal(content, document.body);
+  }
+);
+PopoverContent.displayName = "PopoverContent";
+var ThreadPopover = ({
+  className,
+  buttonClassName,
+  buttonVariant = "ghost",
+  buttonSize = "icon",
+  emptyState,
+  onThreadSelect
+}) => {
+  const [isOpen, setIsOpen] = React11__namespace.useState(false);
+  reactHotkeysHook.useHotkeys(
+    "h",
+    (e) => {
+      e.preventDefault();
+      setIsOpen((prev) => !prev);
+    },
+    {
+      enableOnFormTags: false,
+      // Don't trigger when typing in form inputs
+      enableOnContentEditable: false
+      // Don't trigger in contenteditable elements
+    }
+  );
+  const handleThreadSelect = (threadId) => {
+    setIsOpen(false);
+    onThreadSelect?.(threadId);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        variant: buttonVariant,
+        size: buttonSize,
+        className: cn(buttonClassName),
+        children: /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconHistory, { className: "size-4" })
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      PopoverContent,
+      {
+        className: cn("w-80 p-0", className),
+        side: "bottom",
+        align: "start",
+        sideOffset: 8,
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col h-[400px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+          ThreadList,
+          {
+            emptyState,
+            onThreadSelect: handleThreadSelect,
+            className: "h-full"
+          }
+        ) })
+      }
+    )
+  ] });
+};
+var CreateThreadButton = ({
+  className,
+  variant = "ghost",
+  size = "icon",
+  children,
+  onThreadCreated
+}) => {
+  const { createThread } = useThreads();
+  const [isCreating, setIsCreating] = React11__namespace.useState(false);
+  const handleCreateThread = async () => {
+    if (isCreating) return;
+    try {
+      setIsCreating(true);
+      const threadId = await createThread();
+      onThreadCreated?.(threadId);
+    } catch (error) {
+      console.error("Failed to create thread:", error);
+    } finally {
+      setIsCreating(false);
+    }
+  };
+  reactHotkeysHook.useHotkeys(
+    "n",
+    (e) => {
+      e.preventDefault();
+      handleCreateThread();
+    },
+    {
+      enableOnFormTags: false,
+      // Don't trigger when typing in form inputs
+      enableOnContentEditable: false
+      // Don't trigger in contenteditable elements
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Button,
+    {
+      variant,
+      size,
+      onClick: handleCreateThread,
+      disabled: isCreating,
+      className: cn(className),
+      children: /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconPlus, { className: "size-4" })
+    }
+  );
+};
 function AlertDialog({ ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialog.Root, { "data-slot": "alert-dialog", ...props });
 }
@@ -2230,100 +3171,111 @@ function AlertDialogDescription({
     }
   );
 }
-function DropdownMenu({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Root, { "data-slot": "dropdown-menu", ...props });
-}
-function DropdownMenuTrigger({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
-}
-function DropdownMenuContent({
-  align = "start",
-  alignOffset = 0,
-  side = "bottom",
-  sideOffset = 4,
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    menu.Menu.Positioner,
-    {
-      className: "isolate z-50 outline-none",
-      align,
-      alignOffset,
-      side,
-      sideOffset,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        menu.Menu.Popup,
-        {
-          "data-slot": "dropdown-menu-content",
-          className: cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground min-w-48 rounded-2xl p-1 shadow-2xl ring-1 duration-100 z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden", className),
-          ...props
-        }
-      )
-    }
-  ) });
-}
-function DropdownMenuItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    menu.Menu.Item,
-    {
-      "data-slot": "dropdown-menu-item",
-      "data-inset": inset,
-      "data-variant": variant,
-      className: cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-xl px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
-      ),
-      ...props
-    }
-  );
-}
 var AccountDialog = ({
   className,
-  variant,
+  variant = "outline",
   size
 }) => {
-  const { isLoading, isAuthenticated, login, logout } = useAuth();
-  const [open, setOpen] = React9__namespace.useState(false);
-  const [error, setError] = React9__namespace.useState(null);
+  const { isLoading, isAuthenticated, user, login, logout } = useAuth();
+  const [open, setOpen] = React11__namespace.useState(false);
+  const [accountInfoOpen, setAccountInfoOpen] = React11__namespace.useState(false);
+  const [error, setError] = React11__namespace.useState(null);
+  const initials = React11__namespace.useMemo(() => {
+    const name = user?.displayName || user?.name;
+    if (!name) return "";
+    return name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
+  }, [user?.displayName, user?.name]);
   const handleGoogleSignIn = async () => {
     login();
   };
   if (isAuthenticated) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        DropdownMenuTrigger,
-        {
-          render: (props) => /* @__PURE__ */ jsxRuntime.jsxs(
-            Button,
-            {
-              variant,
-              size,
-              ...props,
-              className,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconUser, { className: "mr-2 size-4" }),
-                "Account"
-              ]
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuContent, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuItem, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconUser, { className: "mr-2 size-4" }),
-          "Account"
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DropdownMenuTrigger,
+          {
+            render: (props) => /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                variant,
+                size: "icon",
+                ...props,
+                className: cn("rounded-full", className),
+                children: user?.picture ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    src: user.picture,
+                    alt: user.displayName || user.name,
+                    className: "size-7 rounded-full object-cover"
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-7 items-center justify-center rounded-full bg-muted text-xs font-bold", children: initials || /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconUser, { className: "size-4" }) })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuContent, { align: "end", className: "w-56", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 p-2", children: [
+            user?.picture ? /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: user.picture,
+                alt: user.displayName || user.name,
+                className: "size-8 rounded-full object-cover"
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-8 items-center justify-center rounded-full bg-muted text-xs font-bold", children: initials || /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconUser, { className: "size-4" }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-0.5 overflow-hidden", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-sm font-medium", children: user?.displayName || user?.name }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-xs text-muted-foreground", children: user?.email })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "my-1" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuItem, { onClick: () => setAccountInfoOpen(true), children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconUser, { className: "mr-2 size-4" }),
+            "Account Settings"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuItem, { onClick: logout, className: "text-destructive", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconLogout, { className: "mr-2 size-4" }),
+            "Logout"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: accountInfoOpen, onOpenChange: setAccountInfoOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "sm:max-w-md", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Account Information" }),
+          /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { children: "Your account details and settings." })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuItem, { onClick: logout, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconLogout, { className: "mr-2 size-4" }),
-          "Logout"
+        /* @__PURE__ */ jsxRuntime.jsxs(DialogClose, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconX, { className: "size-4" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 py-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+            user?.picture ? /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: user.picture,
+                alt: user.displayName || user.name,
+                className: "size-16 rounded-full object-cover"
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-16 items-center justify-center rounded-full bg-muted text-xl font-bold", children: initials || /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconUser, { className: "size-8 text-muted-foreground" }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold", children: user?.displayName || user?.name }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: user?.email })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-muted-foreground", children: "User ID" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-mono text-xs truncate", children: user?.uid || user?.id })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-muted-foreground", children: "Created At" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs", children: user?.createdAt || "N/A" })
+            ] })
+          ] })
         ] })
-      ] })
+      ] }) })
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -2365,23 +3317,65 @@ var AccountDialog = ({
     ] }) })
   ] });
 };
+function ThemeToggle() {
+  const { theme, setTheme, resolvedTheme } = useTheme();
+  const cycleTheme = () => {
+    if (theme === "light") {
+      setTheme("dark");
+    } else if (theme === "dark") {
+      setTheme("system");
+    } else {
+      setTheme("light");
+    }
+  };
+  const getIcon = () => {
+    if (theme === "system") {
+      return /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconDeviceDesktop, { className: "h-4 w-4" });
+    }
+    return resolvedTheme === "dark" ? /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconMoon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(ICONS.IconSun, { className: "h-4 w-4" });
+  };
+  const getLabel = () => {
+    if (theme === "system") {
+      return "System";
+    }
+    return resolvedTheme === "dark" ? "Dark" : "Light";
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Button,
+    {
+      variant: "ghost",
+      size: "icon",
+      onClick: cycleTheme,
+      "aria-label": `Toggle theme (current: ${getLabel()})`,
+      title: `Current: ${getLabel()}. Click to cycle: Light \u2192 Dark \u2192 System`,
+      children: getIcon()
+    }
+  );
+}
 
 exports.AccountDialog = AccountDialog;
 exports.AuthContext = AuthContext;
 exports.AuthProvider = AuthProvider;
 exports.ChatFull = ChatFull;
+exports.ChatHeader = ChatHeader;
 exports.ChatPopup = ChatPopup;
 exports.ChatSidebar = ChatSidebar;
 exports.Composer = Composer;
+exports.CreateThreadButton = CreateThreadButton;
 exports.MelonyClientProvider = MelonyClientProvider;
 exports.MelonyContext = MelonyContext;
+exports.ThemeProvider = ThemeProvider;
+exports.ThemeToggle = ThemeToggle;
 exports.Thread = Thread;
 exports.ThreadContext = ThreadContext;
 exports.ThreadList = ThreadList;
+exports.ThreadPopover = ThreadPopover;
 exports.ThreadProvider = ThreadProvider;
 exports.UIRenderer = UIRenderer;
+exports.groupEventsToMessages = groupEventsToMessages;
 exports.useAuth = useAuth;
 exports.useMelony = useMelony;
+exports.useTheme = useTheme;
 exports.useThreads = useThreads;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map