@melony/react 0.1.28 → 0.1.29

package/dist/index.js

@@ -3,24 +3,23 @@ import React11__default, { createContext, useState, useContext, useCallback, use
 import { NuqsAdapter } from 'nuqs/adapters/react';
 import { QueryClient, QueryClientProvider, useQueryClient, useQuery, useMutation } from '@tanstack/react-query';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Button as Button$1 } from '@base-ui/react/button';
-import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
+import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
+import { Button as Button$1 } from '@base-ui/react/button';
+import { cva } from 'class-variance-authority';
 import * as ICONS from '@tabler/icons-react';
-import { IconBrandGoogle, IconFileText, IconFile, IconX, IconPaperclip, IconChevronDown, IconLoader2, IconArrowUp, IconMessage, IconDotsVertical, IconTrash, IconHistory, IconPlus, IconArrowLeft, IconLayoutSidebarLeftExpand, IconLayoutSidebarLeftCollapse, IconLayoutSidebarRightExpand, IconLayoutSidebarRightCollapse, IconUser, IconLogout, IconDeviceDesktop, IconMoon, IconSun, IconCheck, IconSelector, IconChevronUp } from '@tabler/icons-react';
+import { IconUser, IconLogout, IconX, IconBrandGoogle, IconFileText, IconFile, IconPaperclip, IconChevronDown, IconLoader2, IconArrowUp, IconDotsVertical, IconTrash, IconHistory, IconPlus, IconArrowLeft, IconMessage, IconLayoutSidebarLeftExpand, IconLayoutSidebarLeftCollapse, IconLayoutSidebarRightExpand, IconLayoutSidebarRightCollapse, IconDeviceDesktop, IconMoon, IconSun, IconCheck, IconSelector, IconChevronUp } from '@tabler/icons-react';
+import { Menu } from '@base-ui/react/menu';
+import { Separator as Separator$1 } from '@base-ui/react/separator';
 import { generateId } from 'melony/client';
 import { useQueryState, parseAsString } from 'nuqs';
 import { mergeProps } from '@base-ui/react/merge-props';
 import { useRender } from '@base-ui/react/use-render';
-import { Menu } from '@base-ui/react/menu';
-import { Separator as Separator$1 } from '@base-ui/react/separator';
-import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
 import { Input as Input$1 } from '@base-ui/react/input';
 import { Select as Select$1 } from '@base-ui/react/select';
 import { createPortal } from 'react-dom';
 import { useHotkeys } from 'react-hotkeys-hook';
-import { AlertDialog as AlertDialog$1 } from '@base-ui/react/alert-dialog';
 
 // src/providers/melony-provider.tsx
 
@@ -167,9 +166,121 @@ var MelonyProvider = ({
     }
   ) }) });
 };
+var useAuth = () => {
+  const context = useContext(AuthContext);
+  if (context === void 0) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  return context;
+};
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+function Dialog({ ...props }) {
+  return /* @__PURE__ */ jsx(Dialog$1.Root, { "data-slot": "dialog", ...props });
+}
+function DialogTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(Dialog$1.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+function DialogPortal({ ...props }) {
+  return /* @__PURE__ */ jsx(Dialog$1.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Dialog$1.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__ */ jsxs(DialogPortal, { children: [
+    /* @__PURE__ */ jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsx(
+      Dialog$1.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__ */ jsx(
+    Dialog$1.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__ */ 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__ */ jsx(
+    Dialog$1.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn(
+        "text-lg font-semibold leading-none tracking-tight",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Dialog$1.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
 var buttonVariants = 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",
   {
@@ -214,12 +325,287 @@ function Button({
     }
   );
 }
-var useAuth = () => {
-  const context = useContext(AuthContext);
-  if (context === void 0) {
-    throw new Error("useAuth must be used within an AuthProvider");
+function DropdownMenu({ ...props }) {
+  return /* @__PURE__ */ jsx(Menu.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(Menu.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+}
+function DropdownMenuContent({
+  align = "start",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(
+    Menu.Positioner,
+    {
+      className: "isolate z-50 outline-none",
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      children: /* @__PURE__ */ jsx(
+        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__ */ jsx(Menu.Group, { "data-slot": "dropdown-menu-group", ...props });
+}
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    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__ */ jsx(
+    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__ */ jsxs(
+    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__ */ 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__ */ jsx(Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(
+              IconCheck,
+              {}
+            ) })
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Menu.Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: cn("bg-border/50 -mx-1 my-1 h-px", className),
+      ...props
+    }
+  );
+}
+function Separator({
+  className,
+  orientation = "horizontal",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Separator$1,
+    {
+      "data-slot": "separator",
+      orientation,
+      className: cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var AccountButton = ({
+  className,
+  variant = "outline",
+  size
+}) => {
+  const { isLoading, isAuthenticated, user, login, logout } = useAuth();
+  const [open, setOpen] = React11.useState(false);
+  const [accountInfoOpen, setAccountInfoOpen] = React11.useState(false);
+  const [error, setError] = React11.useState(null);
+  const initials = React11.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__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+        /* @__PURE__ */ jsx(
+          DropdownMenuTrigger,
+          {
+            render: (props) => /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant,
+                size: "icon",
+                ...props,
+                className: cn("rounded-full", className),
+                children: user?.picture ? /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: user.picture,
+                    alt: user.displayName || user.name,
+                    className: "size-7 rounded-full object-cover"
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: "flex size-7 items-center justify-center rounded-full bg-muted text-xs font-bold", children: initials || /* @__PURE__ */ jsx(IconUser, { className: "size-4" }) })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-56", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-2", children: [
+            user?.picture ? /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: user.picture,
+                alt: user.displayName || user.name,
+                className: "size-8 rounded-full object-cover"
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: "flex size-8 items-center justify-center rounded-full bg-muted text-xs font-bold", children: initials || /* @__PURE__ */ jsx(IconUser, { className: "size-4" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-0.5 overflow-hidden", children: [
+              /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium", children: user?.displayName || user?.name }),
+              /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-muted-foreground", children: user?.email })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(Separator, { className: "my-1" }),
+          /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => setAccountInfoOpen(true), children: [
+            /* @__PURE__ */ jsx(IconUser, { className: "mr-2 size-4" }),
+            "Account Settings"
+          ] }),
+          /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: logout, className: "text-destructive", children: [
+            /* @__PURE__ */ jsx(IconLogout, { className: "mr-2 size-4" }),
+            "Logout"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Dialog, { open: accountInfoOpen, onOpenChange: setAccountInfoOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-md", children: [
+        /* @__PURE__ */ jsxs(DialogHeader, { children: [
+          /* @__PURE__ */ jsx(DialogTitle, { children: "Account Information" }),
+          /* @__PURE__ */ jsx(DialogDescription, { children: "Your account details and settings." })
+        ] }),
+        /* @__PURE__ */ jsxs(DialogClose, { children: [
+          /* @__PURE__ */ jsx(IconX, { className: "size-4" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 py-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+            user?.picture ? /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: user.picture,
+                alt: user.displayName || user.name,
+                className: "size-16 rounded-full object-cover"
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: "flex size-16 items-center justify-center rounded-full bg-muted text-xl font-bold", children: initials || /* @__PURE__ */ jsx(IconUser, { className: "size-8 text-muted-foreground" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: user?.displayName || user?.name }),
+              /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: user?.email })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(Separator, {}),
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-muted-foreground", children: "User ID" }),
+              /* @__PURE__ */ jsx("p", { className: "font-mono text-xs truncate", children: user?.uid || user?.id })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-muted-foreground", children: "Created At" }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs", children: user?.createdAt || "N/A" })
+            ] })
+          ] })
+        ] })
+      ] }) })
+    ] });
   }
-  return context;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant,
+        size,
+        onClick: () => setOpen(true),
+        className,
+        children: "Sign in"
+      }
+    ),
+    /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-md", children: [
+      /* @__PURE__ */ jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: "Sign in to continue" }),
+        /* @__PURE__ */ jsx(DialogDescription, { children: "Choose your preferred sign-in method to access your account." })
+      ] }),
+      /* @__PURE__ */ jsxs(DialogClose, { children: [
+        /* @__PURE__ */ jsx(IconX, { className: "size-4" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+        error && /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-destructive/10 p-3 text-sm text-destructive", children: error }),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            onClick: handleGoogleSignIn,
+            disabled: isLoading,
+            variant: "outline",
+            className: "w-full",
+            size: "lg",
+            children: [
+              /* @__PURE__ */ jsx(IconBrandGoogle, { className: "mr-2 size-5" }),
+              isLoading ? "Signing in..." : "Continue with Google"
+            ]
+          }
+        )
+      ] })
+    ] }) })
+  ] });
 };
 function WelcomeScreen({
   title = "Welcome to Melony",
@@ -250,13 +636,6 @@ function WelcomeScreen({
   imageAlt = "Product screenshot"
 }) {
   const { login, isLoading } = useAuth();
-  const handleLogin = () => {
-    if (onLoginClick) {
-      onLoginClick();
-    } else {
-      login();
-    }
-  };
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -293,26 +672,7 @@ function WelcomeScreen({
             /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight text-foreground", children: "Get Started" }),
             /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-lg", children: "Sign in to your account to continue" })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-            /* @__PURE__ */ jsxs(
-              Button,
-              {
-                size: "lg",
-                variant: "outline",
-                className: "w-full h-16 text-lg shadow-sm hover:shadow-md transition-all flex items-center justify-center gap-3 border-2 font-medium bg-background text-foreground hover:bg-accent",
-                onClick: handleLogin,
-                disabled: isLoading,
-                children: [
-                  /* @__PURE__ */ jsx(IconBrandGoogle, { className: "size-6" }),
-                  isLoading ? "Signing in..." : "Continue with Google"
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs("div", { className: "relative py-4", children: [
-              /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ jsx("span", { className: "w-full border-t border-border" }) }),
-              /* @__PURE__ */ jsx("div", { className: "relative flex justify-center text-xs uppercase", children: /* @__PURE__ */ jsx("span", { className: "bg-background px-3 text-muted-foreground tracking-widest font-medium", children: "Secure access" }) })
-            ] })
-          ] }),
+          /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsx(AccountButton, {}) }),
           /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground leading-relaxed text-center md:text-left", children: [
             "By continuing, you agree to our ",
             /* @__PURE__ */ jsx("br", { className: "hidden md:block" }),
@@ -675,175 +1035,58 @@ var useThreads = () => {
     throw new Error("useThreads must be used within a ThreadProvider");
   }
   return context;
-};
-function Textarea({ className, ...props }) {
-  return /* @__PURE__ */ 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 badgeVariants = cva(
-  "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden group/badge",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-        secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
-        destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
-        outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground bg-input/30",
-        ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
-        link: "text-primary underline-offset-4 hover:underline"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-function Badge({
-  className,
-  variant = "default",
-  render,
-  ...props
-}) {
-  return useRender({
-    defaultTagName: "span",
-    props: mergeProps(
-      {
-        className: cn(badgeVariants({ className, variant }))
-      },
-      props
-    ),
-    render,
-    state: {
-      slot: "badge",
-      variant
-    }
-  });
-}
-function DropdownMenu({ ...props }) {
-  return /* @__PURE__ */ jsx(Menu.Root, { "data-slot": "dropdown-menu", ...props });
-}
-function DropdownMenuTrigger({ ...props }) {
-  return /* @__PURE__ */ jsx(Menu.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
-}
-function DropdownMenuContent({
-  align = "start",
-  alignOffset = 0,
-  side = "bottom",
-  sideOffset = 4,
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(
-    Menu.Positioner,
-    {
-      className: "isolate z-50 outline-none",
-      align,
-      alignOffset,
-      side,
-      sideOffset,
-      children: /* @__PURE__ */ jsx(
-        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__ */ jsx(Menu.Group, { "data-slot": "dropdown-menu-group", ...props });
-}
-function DropdownMenuLabel({
-  className,
-  inset,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    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
-}) {
+};
+function Textarea({ className, ...props }) {
   return /* @__PURE__ */ jsx(
-    Menu.Item,
+    "textarea",
     {
-      "data-slot": "dropdown-menu-item",
-      "data-inset": inset,
-      "data-variant": variant,
+      "data-slot": "textarea",
       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",
+        "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 DropdownMenuCheckboxItem({
-  className,
-  children,
-  checked,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(
-    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__ */ 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__ */ jsx(Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(
-              IconCheck,
-              {}
-            ) })
-          }
-        ),
-        children
-      ]
+var badgeVariants = cva(
+  "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden group/badge",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
+        outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground bg-input/30",
+        ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
     }
-  );
-}
-function DropdownMenuSeparator({
+  }
+);
+function Badge({
   className,
+  variant = "default",
+  render,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(
-    Menu.Separator,
-    {
-      "data-slot": "dropdown-menu-separator",
-      className: cn("bg-border/50 -mx-1 my-1 h-px", className),
-      ...props
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps(
+      {
+        className: cn(badgeVariants({ className, variant }))
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant
     }
-  );
+  });
 }
 function Composer({
   value,
@@ -1088,11 +1331,12 @@ function Composer({
             /* @__PURE__ */ jsx(
               DropdownMenuTrigger,
               {
-                render: /* @__PURE__ */ jsxs(
+                render: (props) => /* @__PURE__ */ jsxs(
                   Button,
                   {
                     variant: "ghost",
                     size: "sm",
+                    ...props,
                     className: cn(
                       "gap-2",
                       selectedInGroup.length > 0 ? "text-foreground bg-muted/50" : "text-muted-foreground"
@@ -1131,7 +1375,7 @@ function Composer({
         Button,
         {
           type: "submit",
-          disabled: !value.trim() && attachedFiles.length === 0 && !isLoading || isLoading,
+          disabled: !value.trim() && attachedFiles.length === 0 && selectedOptions.size === 0 && !isLoading || isLoading,
           size: "icon-lg",
           onClick: () => handleInternalSubmit().catch(console.error),
           children: isLoading ? /* @__PURE__ */ jsx(IconLoader2, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ jsx(IconArrowUp, { className: "h-5 w-5" })
@@ -1405,24 +1649,6 @@ var Spacer = ({
     }
   );
 };
-function Separator({
-  className,
-  orientation = "horizontal",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Separator$1,
-    {
-      "data-slot": "separator",
-      orientation,
-      className: cn(
-        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch",
-        className
-      ),
-      ...props
-    }
-  );
-}
 var Divider = ({
   orientation = "horizontal",
   className,
@@ -1466,7 +1692,7 @@ var ListItem = ({
   const paddingClasses = {
     xs: "px-1.5 py-1",
     sm: "px-2 py-1.5",
-    md: "px-3 py-2",
+    md: "px-3 py-1.5",
     lg: "px-4 py-3",
     xl: "px-6 py-4"
   };
@@ -1502,7 +1728,7 @@ var ListItem = ({
     {
       onClick: isInteractive ? handleClick : void 0,
       className: cn(
-        "flex rounded-md transition-colors",
+        "flex rounded-md transition-colors text-sm",
         orientation === "horizontal" ? "flex-row" : "flex-col",
         gapClasses[gap] || "gap-3",
         alignClasses[resolvedAlign],
@@ -1519,111 +1745,6 @@ var ListItem = ({
     }
   );
 };
-function Dialog({ ...props }) {
-  return /* @__PURE__ */ jsx(Dialog$1.Root, { "data-slot": "dialog", ...props });
-}
-function DialogTrigger({ ...props }) {
-  return /* @__PURE__ */ jsx(Dialog$1.Trigger, { "data-slot": "dialog-trigger", ...props });
-}
-function DialogPortal({ ...props }) {
-  return /* @__PURE__ */ jsx(Dialog$1.Portal, { "data-slot": "dialog-portal", ...props });
-}
-function DialogOverlay({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Dialog$1.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__ */ jsxs(DialogPortal, { children: [
-    /* @__PURE__ */ jsx(DialogOverlay, {}),
-    /* @__PURE__ */ jsx(
-      Dialog$1.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__ */ jsx(
-    Dialog$1.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__ */ 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__ */ jsx(
-    Dialog$1.Title,
-    {
-      "data-slot": "dialog-title",
-      className: cn(
-        "text-lg font-semibold leading-none tracking-tight",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function DialogDescription({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Dialog$1.Description,
-    {
-      "data-slot": "dialog-description",
-      className: cn("text-sm text-muted-foreground", className),
-      ...props
-    }
-  );
-}
 var Image = ({
   src,
   alt,
@@ -2649,7 +2770,16 @@ function UIRenderer({ node }) {
   return /* @__PURE__ */ jsx(Component, { ...componentProps, children: renderedChildren });
 }
 function MessageContent({ events }) {
+  const latestSlotIndexes = /* @__PURE__ */ new Map();
+  events.forEach((event, index) => {
+    if (event.slot) {
+      latestSlotIndexes.set(event.slot, index);
+    }
+  });
   return /* @__PURE__ */ jsx(Fragment, { children: events.map((event, index) => {
+    if (event.slot && latestSlotIndexes.get(event.slot) !== index) {
+      return null;
+    }
     if (event.type === "text-delta") {
       return /* @__PURE__ */ jsx("span", { children: event.data?.delta }, index);
     }
@@ -2762,7 +2892,8 @@ function Thread({
   const handleSubmit = async (state, overrideInput) => {
     const text = (overrideInput ?? input).trim();
     const hasFiles = state?.files && Array.isArray(state.files) && state.files.length > 0;
-    if (!text && !hasFiles || isLoading) return;
+    const hasOptions = state && Object.keys(state).filter((k) => k !== "threadId").length > 0;
+    if (!text && !hasFiles && !hasOptions || isLoading) return;
     if (!overrideInput) setInput("");
     await sendEvent(
       {
@@ -2770,7 +2901,12 @@ function Thread({
         role: "user",
         data: { content: text || "" }
       },
-      { state: { ...state, threadId: activeThreadId ?? void 0 } }
+      {
+        state: {
+          ...state,
+          threadId: activeThreadId ?? void 0
+        }
+      }
     );
   };
   const handleStarterPromptClick = (prompt) => {
@@ -2866,11 +3002,39 @@ function ChatHeader({
     }
   );
 }
-var ThreadList = ({
+var Dropdown = ({
   className,
-  emptyState,
-  onThreadSelect
+  trigger,
+  triggerClassName,
+  items
 }) => {
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(
+      DropdownMenuTrigger,
+      {
+        className: triggerClassName,
+        render: (props) => /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon-xs",
+            ...props,
+            onClick: (e) => {
+              e.stopPropagation();
+              props.onClick?.(e);
+            },
+            children: trigger || /* @__PURE__ */ jsx(IconDotsVertical, { className: "size-3.5" })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", className: cn("w-32", className), children: items.map((item) => /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: item.onClick, children: [
+      item.icon,
+      /* @__PURE__ */ jsx("span", { children: item.label })
+    ] }, item.label)) })
+  ] });
+};
+var ThreadList = ({ className }) => {
   const { threads, activeThreadId, selectThread, deleteThread, isLoading } = useThreads();
   const sortedThreads = React11.useMemo(() => {
     return [...threads].sort((a, b) => {
@@ -2879,73 +3043,44 @@ var ThreadList = ({
       return dateB - dateA;
     });
   }, [threads]);
-  const handleThreadClick = (threadId) => {
-    if (threadId !== activeThreadId) {
-      selectThread(threadId);
-    }
-    onThreadSelect?.(threadId);
-  };
   const handleDelete = async (threadId) => {
-    try {
-      await deleteThread(threadId);
-    } catch (error) {
-      console.error("Failed to delete thread:", error);
-    }
-  };
-  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col h-full", className), children: /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", children: isLoading && threads.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsx(IconLoader2, { className: "size-5 animate-spin text-muted-foreground" }) }) : threads.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-muted-foreground", children: emptyState || /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsx(IconMessage, { className: "size-8 mx-auto opacity-50" }),
-    /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No threads yet" })
-  ] }) }) : /* @__PURE__ */ jsx("div", { className: "p-2 space-y-1", children: sortedThreads.map((thread) => {
-    const isActive = thread.id === activeThreadId;
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        onClick: () => handleThreadClick(thread.id),
-        className: cn(
-          "group relative flex items-center gap-3 px-3 py-1.5 rounded-lg cursor-pointer transition-colors",
-          isActive ? "bg-muted text-foreground" : "hover:bg-muted/50 text-muted-foreground hover:text-foreground"
-        ),
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate", children: thread.title || `Thread ${thread.id.slice(0, 8)}` }) }),
-          /* @__PURE__ */ jsx("div", { className: "shrink-0 flex items-center opacity-0 group-hover:opacity-100 transition-opacity", children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-            /* @__PURE__ */ jsx(
-              DropdownMenuTrigger,
-              {
-                render: (props) => /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    variant: "ghost",
-                    size: "icon-xs",
-                    ...props,
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      props.onClick?.(e);
-                    },
-                    children: /* @__PURE__ */ jsx(IconDotsVertical, { className: "size-3.5" })
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", className: "w-32", children: /* @__PURE__ */ jsxs(
-              DropdownMenuItem,
-              {
-                variant: "destructive",
-                onClick: (e) => {
-                  e.stopPropagation();
-                  handleDelete(thread.id);
-                },
-                children: [
-                  /* @__PURE__ */ jsx(IconTrash, { className: "size-4 mr-2" }),
-                  /* @__PURE__ */ jsx("span", { children: "Delete" })
-                ]
-              }
-            ) })
-          ] }) })
+    try {
+      await deleteThread(threadId);
+    } catch (error) {
+      console.error("Failed to delete thread:", error);
+    }
+  };
+  return /* @__PURE__ */ jsx(List, { className, children: sortedThreads.map((thread) => {
+    const isActive = thread.id === activeThreadId;
+    return /* @__PURE__ */ jsxs(
+      ListItem,
+      {
+        onClickAction: {
+          type: "client:navigate",
+          data: {
+            url: `?threadId=${thread.id}`
+          }
+        },
+        className: isActive ? "bg-muted text-foreground group" : "hover:bg-muted/50 text-muted-foreground hover:text-foreground group",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate", children: thread.title || `Thread ${thread.id.slice(0, 8)}` }) }),
+          /* @__PURE__ */ jsx("div", { className: "shrink-0 flex items-center opacity-0 group-hover:opacity-100 transition-opacity", children: /* @__PURE__ */ jsx(
+            Dropdown,
+            {
+              items: [
+                {
+                  label: "Delete",
+                  icon: /* @__PURE__ */ jsx(IconTrash, { className: "size-4" }),
+                  onClick: () => handleDelete(thread.id)
+                }
+              ]
+            }
+          ) })
         ]
       },
       thread.id
     );
-  }) }) }) });
+  }) });
 };
 function PopupChat({
   title = "Chat",
@@ -3032,7 +3167,6 @@ function PopupChat({
       ) : /* @__PURE__ */ jsx(
         ThreadList,
         {
-          onThreadSelect: () => setView("chat"),
           className: "h-full"
         }
       ) })
@@ -3335,8 +3469,7 @@ var ThreadPopover = ({
   buttonClassName,
   buttonVariant = "ghost",
   buttonSize = "icon",
-  emptyState,
-  onThreadSelect
+  emptyState
 }) => {
   const [isOpen, setIsOpen] = React11.useState(false);
   useHotkeys(
@@ -3352,10 +3485,6 @@ var ThreadPopover = ({
       // Don't trigger in contenteditable elements
     }
   );
-  const handleThreadSelect = (threadId) => {
-    setIsOpen(false);
-    onThreadSelect?.(threadId);
-  };
   return /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
       Button,
@@ -3373,14 +3502,7 @@ var ThreadPopover = ({
         side: "bottom",
         align: "start",
         sideOffset: 8,
-        children: /* @__PURE__ */ jsx("div", { className: "flex flex-col h-[400px]", children: /* @__PURE__ */ jsx(
-          ThreadList,
-          {
-            emptyState,
-            onThreadSelect: handleThreadSelect,
-            className: "h-full"
-          }
-        ) })
+        children: /* @__PURE__ */ jsx("div", { className: "flex flex-col h-[400px]", children: /* @__PURE__ */ jsx(ThreadList, { emptyState, className: "h-full" }) })
       }
     )
   ] });
@@ -3434,231 +3556,6 @@ var CreateThreadButton = ({
     }
   );
 };
-function AlertDialog({ ...props }) {
-  return /* @__PURE__ */ jsx(AlertDialog$1.Root, { "data-slot": "alert-dialog", ...props });
-}
-function AlertDialogPortal({ ...props }) {
-  return /* @__PURE__ */ jsx(AlertDialog$1.Portal, { "data-slot": "alert-dialog-portal", ...props });
-}
-function AlertDialogOverlay({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    AlertDialog$1.Backdrop,
-    {
-      "data-slot": "alert-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-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function AlertDialogContent({
-  className,
-  size = "default",
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
-    /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
-    /* @__PURE__ */ jsx(
-      AlertDialog$1.Popup,
-      {
-        "data-slot": "alert-dialog-content",
-        "data-size": size,
-        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 bg-background ring-foreground/5 gap-6 rounded-4xl p-6 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-md group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none",
-          className
-        ),
-        ...props
-      }
-    )
-  ] });
-}
-function AlertDialogHeader({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "alert-dialog-header",
-      className: cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className),
-      ...props
-    }
-  );
-}
-function AlertDialogTitle({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    AlertDialog$1.Title,
-    {
-      "data-slot": "alert-dialog-title",
-      className: cn("text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className),
-      ...props
-    }
-  );
-}
-function AlertDialogDescription({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    AlertDialog$1.Description,
-    {
-      "data-slot": "alert-dialog-description",
-      className: cn("text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3", className),
-      ...props
-    }
-  );
-}
-var AccountDialog = ({
-  className,
-  variant = "outline",
-  size
-}) => {
-  const { isLoading, isAuthenticated, user, login, logout } = useAuth();
-  const [open, setOpen] = React11.useState(false);
-  const [accountInfoOpen, setAccountInfoOpen] = React11.useState(false);
-  const [error, setError] = React11.useState(null);
-  const initials = React11.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__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-        /* @__PURE__ */ jsx(
-          DropdownMenuTrigger,
-          {
-            render: (props) => /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant,
-                size: "icon",
-                ...props,
-                className: cn("rounded-full", className),
-                children: user?.picture ? /* @__PURE__ */ jsx(
-                  "img",
-                  {
-                    src: user.picture,
-                    alt: user.displayName || user.name,
-                    className: "size-7 rounded-full object-cover"
-                  }
-                ) : /* @__PURE__ */ jsx("div", { className: "flex size-7 items-center justify-center rounded-full bg-muted text-xs font-bold", children: initials || /* @__PURE__ */ jsx(IconUser, { className: "size-4" }) })
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-56", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-2", children: [
-            user?.picture ? /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: user.picture,
-                alt: user.displayName || user.name,
-                className: "size-8 rounded-full object-cover"
-              }
-            ) : /* @__PURE__ */ jsx("div", { className: "flex size-8 items-center justify-center rounded-full bg-muted text-xs font-bold", children: initials || /* @__PURE__ */ jsx(IconUser, { className: "size-4" }) }),
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-0.5 overflow-hidden", children: [
-              /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium", children: user?.displayName || user?.name }),
-              /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-muted-foreground", children: user?.email })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx(Separator, { className: "my-1" }),
-          /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => setAccountInfoOpen(true), children: [
-            /* @__PURE__ */ jsx(IconUser, { className: "mr-2 size-4" }),
-            "Account Settings"
-          ] }),
-          /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: logout, className: "text-destructive", children: [
-            /* @__PURE__ */ jsx(IconLogout, { className: "mr-2 size-4" }),
-            "Logout"
-          ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx(Dialog, { open: accountInfoOpen, onOpenChange: setAccountInfoOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-md", children: [
-        /* @__PURE__ */ jsxs(DialogHeader, { children: [
-          /* @__PURE__ */ jsx(DialogTitle, { children: "Account Information" }),
-          /* @__PURE__ */ jsx(DialogDescription, { children: "Your account details and settings." })
-        ] }),
-        /* @__PURE__ */ jsxs(DialogClose, { children: [
-          /* @__PURE__ */ jsx(IconX, { className: "size-4" }),
-          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 py-4", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
-            user?.picture ? /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: user.picture,
-                alt: user.displayName || user.name,
-                className: "size-16 rounded-full object-cover"
-              }
-            ) : /* @__PURE__ */ jsx("div", { className: "flex size-16 items-center justify-center rounded-full bg-muted text-xl font-bold", children: initials || /* @__PURE__ */ jsx(IconUser, { className: "size-8 text-muted-foreground" }) }),
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-              /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: user?.displayName || user?.name }),
-              /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: user?.email })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx(Separator, {}),
-          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-            /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-muted-foreground", children: "User ID" }),
-              /* @__PURE__ */ jsx("p", { className: "font-mono text-xs truncate", children: user?.uid || user?.id })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-muted-foreground", children: "Created At" }),
-              /* @__PURE__ */ jsx("p", { className: "text-xs", children: user?.createdAt || "N/A" })
-            ] })
-          ] })
-        ] })
-      ] }) })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant,
-        size,
-        onClick: () => setOpen(true),
-        className,
-        children: "Sign in"
-      }
-    ),
-    /* @__PURE__ */ jsx(AlertDialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(AlertDialogContent, { className: "sm:max-w-md", children: [
-      /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
-        /* @__PURE__ */ jsx(AlertDialogTitle, { children: "Sign in to continue" }),
-        /* @__PURE__ */ jsx(AlertDialogDescription, { children: "Choose your preferred sign-in method to access your account." })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 py-4", children: [
-        error && /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-destructive/10 p-3 text-sm text-destructive", children: error }),
-        /* @__PURE__ */ jsxs(
-          Button,
-          {
-            onClick: handleGoogleSignIn,
-            disabled: isLoading,
-            variant: "outline",
-            className: "w-full",
-            size: "lg",
-            children: [
-              /* @__PURE__ */ jsx(IconBrandGoogle, { className: "mr-2 size-5" }),
-              isLoading ? "Signing in..." : "Continue with Google"
-            ]
-          }
-        )
-      ] })
-    ] }) })
-  ] });
-};
 function ThemeToggle() {
   const { theme, setTheme, resolvedTheme } = useTheme();
   const cycleTheme = () => {
@@ -3694,7 +3591,53 @@ function ThemeToggle() {
     }
   );
 }
+var CreateThreadNavItem = ({
+  className
+}) => {
+  const { createThread } = useThreads();
+  const [isCreating, setIsCreating] = React11.useState(false);
+  const handleCreateThread = async () => {
+    if (isCreating) return;
+    try {
+      setIsCreating(true);
+      const threadId = await createThread();
+    } catch (error) {
+      console.error("Failed to create thread:", error);
+    } finally {
+      setIsCreating(false);
+    }
+  };
+  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__ */ jsxs(
+    ListItem,
+    {
+      onClickAction: {
+        type: "client:navigate",
+        data: {
+          url: `?threadId=${generateId()}`
+        }
+      },
+      className: cn(className),
+      children: [
+        /* @__PURE__ */ jsx(IconPlus, { className: "size-4" }),
+        "New chat"
+      ]
+    }
+  );
+};
 
-export { AccountDialog, AuthContext, AuthProvider, Badge2 as Badge, Box, Button2 as Button, Card2 as Card, Chart, ChatHeader, Checkbox, Col, Composer, CreateThreadButton, Divider, Form, FullChat, Heading, Image, Input2 as Input, Label2 as Label, List, ListItem, MelonyContext, MelonyProvider, PopupChat, RadioGroup, Row, Select2 as Select, Sidebar, SidebarContext, SidebarProvider, SidebarToggle, Spacer, Text, Textarea2 as Textarea, ThemeProvider, ThemeToggle, Thread, ThreadContext, ThreadList, ThreadPopover, ThreadProvider, UIRenderer, WelcomeScreen, groupEventsToMessages, useAuth, useMelony, useScreenSize, useSidebar, useTheme, useThreads };
+export { AccountButton, AuthContext, AuthProvider, Badge2 as Badge, Box, Button2 as Button, Card2 as Card, Chart, ChatHeader, Checkbox, Col, Composer, CreateThreadButton, CreateThreadNavItem, Divider, Dropdown, Form, FullChat, Heading, Image, Input2 as Input, Label2 as Label, List, ListItem, MelonyContext, MelonyProvider, PopupChat, RadioGroup, Row, Select2 as Select, Sidebar, SidebarContext, SidebarProvider, SidebarToggle, Spacer, Text, Textarea2 as Textarea, ThemeProvider, ThemeToggle, Thread, ThreadContext, ThreadList, ThreadPopover, ThreadProvider, UIRenderer, WelcomeScreen, groupEventsToMessages, useAuth, useMelony, useScreenSize, useSidebar, useTheme, useThreads };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map