@arcadeai/design-system 3.33.2 → 3.34.0

package/dist/components/ui/pages/chat-page.js

@@ -1,238 +1,320 @@
-import { jsxs as a, jsx as e, Fragment as X } from "react/jsx-runtime";
-import { PlusIcon as Y, SquareIcon as Z, ArrowUpIcon as _, Trash2Icon as $, SquarePenIcon as L, ChevronsUpDownIcon as T, SunIcon as ee, MoonIcon as ae, MonitorIcon as re, LogOutIcon as te } from "lucide-react";
-import { Avatar as w, AvatarImage as I, AvatarFallback as M } from "../atoms/avatar.js";
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { PlusIcon as X, SquareIcon as Y, ArrowUpIcon as Z, SquarePenIcon as L, LogOutIcon as ee, ChevronsUpDownIcon as re, Trash2Icon as G } from "lucide-react";
+import { useState as w, useRef as te } from "react";
+import { ArcadeLogo as ne } from "../../../assets/images/arcade-logo.js";
 import { Button as o } from "../atoms/button.js";
-import { ChatContainerRoot as ne, ChatContainerContent as le, ChatContainerScrollAnchor as ie } from "../atoms/chat-container.js";
-import { DropdownMenu as D, DropdownMenuTrigger as P, DropdownMenuContent as j, DropdownMenuRadioGroup as A, DropdownMenuRadioItem as p, DropdownMenuLabel as y, DropdownMenuSeparator as U, DropdownMenuItem as ce } from "../atoms/dropdown-menu.js";
-import { ScrollButton as se } from "../atoms/scroll-button.js";
-import { SidebarTrigger as de, SidebarProvider as oe, Sidebar as me, SidebarHeader as he, SidebarContent as pe, SidebarGroup as ue, SidebarGroupLabel as fe, SidebarGroupContent as ve, SidebarMenu as u, SidebarMenuItem as f, SidebarMenuButton as v, SidebarFooter as Ne, SidebarInset as ge } from "../atoms/sidebar.js";
-import { ChatMessageList as xe } from "../molecules/chat-message-list.js";
-import { PromptInput as be, PromptInputTextarea as Ce, PromptInputActions as Se, PromptInputAction as ze } from "../molecules/prompt-input.js";
-import { SuggestionCard as we } from "../molecules/suggestion-card.js";
-import { ChatTemplate as Ie, ChatTemplateHeader as Me, ChatTemplateHeaderGroup as k, ChatTemplateOverview as ye, ChatTemplateOverviewTitle as Ue, ChatTemplateOverviewSubtitle as ke, ChatTemplateFooter as Te, ChatTemplateSuggestions as De } from "../templates/chat-template.js";
-import { cn as Pe } from "../../../lib/utils.js";
-function je({
-  user: r,
-  theme: c = "system",
-  onThemeChange: l,
-  onSignOut: t
+import { ChatContainerRoot as ae, ChatContainerContent as ie, ChatContainerScrollAnchor as le } from "../atoms/chat-container.js";
+import { DropdownMenuItem as oe, DropdownMenu as ce, DropdownMenuTrigger as se, DropdownMenuContent as de, DropdownMenuRadioGroup as he, DropdownMenuRadioItem as me } from "../atoms/dropdown-menu.js";
+import { Loader as pe } from "../atoms/loader.js";
+import { Popover as B, PopoverTrigger as R, PopoverContent as U } from "../atoms/popover.js";
+import { ScrollButton as ue } from "../atoms/scroll-button.js";
+import { SidebarTrigger as fe, SidebarProvider as ve, Sidebar as ge, SidebarHeader as Ce, SidebarContent as Ne, SidebarGroup as P, SidebarGroupLabel as H, SidebarGroupContent as _, SidebarMenu as xe, SidebarFooter as be, SidebarInset as Se, SidebarMenuItem as Te, SidebarMenuButton as we, SidebarMenuAction as j } from "../atoms/sidebar.js";
+import { Tooltip as C, TooltipTrigger as N, TooltipContent as x } from "../atoms/tooltip.js";
+import { ChatMessageList as ke } from "../molecules/chat-message-list.js";
+import { PromptInput as ye, PromptInputTextarea as ze, PromptInputActions as Ie, PromptInputAction as Oe } from "../molecules/prompt-input.js";
+import { SuggestionCard as De } from "../molecules/suggestion-card.js";
+import { UserNav as Me } from "../molecules/user-nav.js";
+import { ChatTemplate as Pe, ChatTemplateHeader as He, ChatTemplateHeaderGroup as A, ChatTemplateOverview as _e, ChatTemplateOverviewTitle as je, ChatTemplateOverviewSubtitle as Ae, ChatTemplateFooter as Ge, ChatTemplateSuggestions as Be } from "../templates/chat-template.js";
+import { cn as q } from "../../../lib/utils.js";
+function Re() {
+  return /* @__PURE__ */ e(ne, { className: "h-5 w-auto text-foreground" });
+}
+function Ue(t, a) {
+  if (t.onClick)
+    return t.onClick;
+  if (!(t.action && a))
+    return;
+  const n = t.action;
+  return () => a(n);
+}
+function qe({
+  models: t,
+  selectedModelId: a,
+  onModelChange: n
 }) {
-  const m = r?.name?.split(" ").map((s) => s[0]).join("").slice(0, 2).toUpperCase();
-  return l || t ? /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e(f, { children: /* @__PURE__ */ a(D, { children: [
-    /* @__PURE__ */ e(P, { asChild: !0, children: /* @__PURE__ */ a(
-      v,
+  return !t || t.length === 0 ? null : /* @__PURE__ */ r(ce, { children: [
+    /* @__PURE__ */ e(se, { asChild: !0, children: /* @__PURE__ */ r(o, { className: "h-[34px] gap-1 px-2", variant: "outline", children: [
+      t.find((i) => i.id === a)?.name ?? "Select model",
+      /* @__PURE__ */ e(re, { className: "size-3" })
+    ] }) }),
+    /* @__PURE__ */ e(de, { align: "start", className: "min-w-[300px]", children: /* @__PURE__ */ e(
+      he,
       {
-        className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground",
-        size: "lg",
-        children: [
-          /* @__PURE__ */ a(w, { className: "size-8 rounded-lg", children: [
-            r?.avatarUrl && /* @__PURE__ */ e(I, { alt: r.name ?? "User", src: r.avatarUrl }),
-            /* @__PURE__ */ e(M, { className: "rounded-lg", children: m ?? "U" })
-          ] }),
-          /* @__PURE__ */ a("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
-            /* @__PURE__ */ e("span", { className: "truncate font-medium", children: r?.name ?? "User" }),
-            r?.email && /* @__PURE__ */ e("span", { className: "truncate text-muted-foreground text-xs", children: r.email })
-          ] }),
-          /* @__PURE__ */ e(T, { className: "ml-auto size-4" })
-        ]
+        onValueChange: n,
+        value: a,
+        children: t.map((i) => /* @__PURE__ */ e(me, { value: i.id, children: /* @__PURE__ */ r("div", { className: "flex flex-col items-start gap-1", children: [
+          /* @__PURE__ */ e("div", { className: "font-medium", children: i.name }),
+          i.description && /* @__PURE__ */ e("div", { className: "text-muted-foreground text-xs", children: i.description })
+        ] }) }, i.id))
       }
-    ) }),
-    /* @__PURE__ */ a(
-      j,
-      {
-        align: "end",
-        className: "w-56",
-        side: "top",
-        sideOffset: 4,
-        children: [
-          /* @__PURE__ */ e(y, { children: "My Account" }),
-          /* @__PURE__ */ e(U, {}),
-          l && /* @__PURE__ */ a(X, { children: [
-            /* @__PURE__ */ e(y, { className: "font-normal text-muted-foreground text-xs", children: "Theme" }),
-            /* @__PURE__ */ a(
-              A,
-              {
-                onValueChange: (s) => l(s),
-                value: c,
-                children: [
-                  /* @__PURE__ */ a(p, { value: "light", children: [
-                    /* @__PURE__ */ e(ee, { className: "size-4" }),
-                    "Light"
-                  ] }),
-                  /* @__PURE__ */ a(p, { value: "dark", children: [
-                    /* @__PURE__ */ e(ae, { className: "size-4" }),
-                    "Dark"
-                  ] }),
-                  /* @__PURE__ */ a(p, { value: "system", children: [
-                    /* @__PURE__ */ e(re, { className: "size-4" }),
-                    "System"
-                  ] })
-                ]
-              }
-            ),
-            /* @__PURE__ */ e(U, {})
-          ] }),
-          t && /* @__PURE__ */ a(ce, { onClick: t, children: [
-            /* @__PURE__ */ e(te, { className: "size-4" }),
-            "Sign out"
-          ] })
-        ]
-      }
-    )
-  ] }) }) }) : /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e(f, { children: /* @__PURE__ */ a(v, { className: "cursor-default", size: "lg", children: [
-    /* @__PURE__ */ a(w, { className: "size-8 rounded-lg", children: [
-      r?.avatarUrl && /* @__PURE__ */ e(I, { alt: r.name ?? "User", src: r.avatarUrl }),
-      /* @__PURE__ */ e(M, { className: "rounded-lg", children: m ?? "U" })
+    ) })
+  ] });
+}
+function Fe({ onDeleteAll: t }) {
+  const [a, n] = w(!1);
+  return /* @__PURE__ */ r(B, { onOpenChange: n, open: a, children: [
+    /* @__PURE__ */ r(C, { children: [
+      /* @__PURE__ */ e(N, { asChild: !0, children: /* @__PURE__ */ e(R, { asChild: !0, children: /* @__PURE__ */ e(
+        o,
+        {
+          "aria-label": "Delete all chats",
+          className: "size-8 text-muted-foreground",
+          size: "icon",
+          variant: "ghost",
+          children: /* @__PURE__ */ e(G, { className: "size-4" })
+        }
+      ) }) }),
+      /* @__PURE__ */ e(x, { side: "bottom", children: "Delete all chats" })
     ] }),
-    /* @__PURE__ */ a("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
-      /* @__PURE__ */ e("span", { className: "truncate font-medium", children: r?.name ?? "User" }),
-      r?.email && /* @__PURE__ */ e("span", { className: "truncate text-muted-foreground text-xs", children: r.email })
+    /* @__PURE__ */ r(U, { className: "w-auto max-w-64 space-y-3 p-4", side: "bottom", children: [
+      /* @__PURE__ */ e("p", { className: "font-medium text-sm", children: "Delete all chats?" }),
+      /* @__PURE__ */ e("p", { className: "text-muted-foreground text-xs", children: "This action cannot be undone." }),
+      /* @__PURE__ */ r("div", { className: "flex justify-end gap-2", children: [
+        /* @__PURE__ */ e(o, { onClick: () => n(!1), size: "sm", variant: "outline", children: "Cancel" }),
+        /* @__PURE__ */ e(
+          o,
+          {
+            onClick: () => {
+              t(), n(!1);
+            },
+            size: "sm",
+            variant: "destructive",
+            children: "Delete all"
+          }
+        )
+      ] })
     ] })
-  ] }) }) });
+  ] });
 }
-function Ae({
-  models: r,
-  selectedModelId: c,
-  onModelChange: l
+function We({
+  title: t,
+  isActive: a,
+  isStreaming: n = !1,
+  onSelect: i,
+  onDelete: h
 }) {
-  return !r || r.length === 0 ? null : /* @__PURE__ */ a(D, { children: [
-    /* @__PURE__ */ e(P, { asChild: !0, children: /* @__PURE__ */ a(o, { className: "h-[34px] gap-1 px-2", variant: "outline", children: [
-      r.find((t) => t.id === c)?.name ?? "Select model",
-      /* @__PURE__ */ e(T, { className: "size-3" })
-    ] }) }),
-    /* @__PURE__ */ e(j, { align: "start", className: "min-w-[300px]", children: /* @__PURE__ */ e(
-      A,
+  const [b, u] = w(!1), [f, m] = w(!1), s = te(null);
+  return /* @__PURE__ */ r(Te, { children: [
+    /* @__PURE__ */ r(C, { onOpenChange: (l) => {
+      if (!l) {
+        u(!1);
+        return;
+      }
+      s.current && s.current.scrollWidth > s.current.offsetWidth && u(!0);
+    }, open: b, children: [
+      /* @__PURE__ */ e(N, { asChild: !0, children: /* @__PURE__ */ e(
+        we,
+        {
+          className: q(
+            "py-2.5 group-hover/menu-item:bg-sidebar-accent group-hover/menu-item:text-sidebar-accent-foreground",
+            (h || n) && "pr-8"
+          ),
+          isActive: a,
+          onClick: i,
+          children: /* @__PURE__ */ e("span", { className: "truncate", ref: s, children: t })
+        }
+      ) }),
+      /* @__PURE__ */ e(x, { side: "right", children: t })
+    ] }),
+    n ? /* @__PURE__ */ e(
+      j,
       {
-        onValueChange: l,
-        value: c,
-        children: r.map((t) => /* @__PURE__ */ e(p, { value: t.id, children: /* @__PURE__ */ a("div", { className: "flex flex-col items-start gap-1", children: [
-          /* @__PURE__ */ e("div", { className: "font-medium", children: t.name }),
-          t.description && /* @__PURE__ */ e("div", { className: "text-muted-foreground text-xs", children: t.description })
-        ] }) }, t.id))
+        "aria-hidden": "true",
+        className: "pointer-events-none",
+        tabIndex: -1,
+        children: /* @__PURE__ */ e(
+          pe,
+          {
+            className: "border-sidebar-foreground/25 border-t-sidebar-foreground",
+            size: "sm",
+            variant: "circular"
+          }
+        )
       }
-    ) })
+    ) : h && /* @__PURE__ */ r(B, { onOpenChange: m, open: f, children: [
+      /* @__PURE__ */ e(R, { asChild: !0, children: /* @__PURE__ */ e(
+        j,
+        {
+          "aria-label": `Delete "${t}"`,
+          className: "hover:bg-secondary hover:text-secondary-foreground",
+          showOnHover: !0,
+          children: /* @__PURE__ */ e(G, { className: "size-3.5" })
+        }
+      ) }),
+      /* @__PURE__ */ r(
+        U,
+        {
+          className: "w-auto max-w-64 space-y-3 p-4",
+          side: "right",
+          children: [
+            /* @__PURE__ */ e("p", { className: "font-medium text-sm", children: "Delete this chat?" }),
+            /* @__PURE__ */ e("p", { className: "text-muted-foreground text-xs", children: "This action cannot be undone." }),
+            /* @__PURE__ */ r("div", { className: "flex justify-end gap-2", children: [
+              /* @__PURE__ */ e(
+                o,
+                {
+                  onClick: () => m(!1),
+                  size: "sm",
+                  variant: "outline",
+                  children: "Cancel"
+                }
+              ),
+              /* @__PURE__ */ e(
+                o,
+                {
+                  onClick: () => {
+                    h(), m(!1);
+                  },
+                  size: "sm",
+                  variant: "destructive",
+                  children: "Delete"
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    ] })
   ] });
 }
-function Xe({
-  user: r,
-  logo: c,
-  suggestedActions: l,
-  onSuggestionAction: t,
-  models: m,
-  selectedModelId: s,
-  onModelChange: H,
-  inputValue: N,
-  onInputChange: G,
-  onSubmit: g,
-  isLoading: i = !1,
-  onStop: B,
-  onNewChat: h,
-  onDeleteAll: x,
-  onSignOut: F,
-  onThemeChange: O,
-  theme: R = "system",
-  chatHistory: q,
-  onSelectChat: V,
-  defaultSidebarOpen: E = !0,
-  showSidebar: b = !0,
-  messages: d,
-  renderMessage: J,
-  loadingIndicator: K,
-  children: C
+function cr({
+  user: t,
+  logo: a,
+  suggestedActions: n,
+  onSuggestionAction: i,
+  models: h,
+  selectedModelId: b,
+  onModelChange: u,
+  inputValue: f,
+  onInputChange: m,
+  inputDisabled: s = !1,
+  onSubmit: S,
+  isLoading: l = !1,
+  onStop: F,
+  onNewChat: v,
+  onDeleteAll: k,
+  onSignOut: y,
+  chatHistoryGroups: W,
+  onSelectChat: z,
+  onDeleteChat: I,
+  defaultSidebarOpen: V = !0,
+  showSidebar: O = !0,
+  messages: p,
+  renderMessage: $,
+  loadingIndicator: E,
+  children: D,
+  scrollKey: J
 }) {
-  const Q = !!C || d !== void 0 && d.length > 0, W = r?.name ?? "there", S = /* @__PURE__ */ a(Ie, { children: [
-    /* @__PURE__ */ a(Me, { children: [
-      /* @__PURE__ */ a(k, { children: [
-        b && /* @__PURE__ */ e(de, {}),
+  const K = !!D || p !== void 0 && p.length > 0, Q = t?.name ?? "there", T = W ?? [], M = /* @__PURE__ */ r(Pe, { children: [
+    /* @__PURE__ */ r(He, { children: [
+      /* @__PURE__ */ r(A, { children: [
+        O && /* @__PURE__ */ r(C, { children: [
+          /* @__PURE__ */ e(N, { asChild: !0, children: /* @__PURE__ */ e(fe, {}) }),
+          /* @__PURE__ */ e(x, { side: "bottom", children: "Toggle sidebar" })
+        ] }),
         /* @__PURE__ */ e(
-          Ae,
+          qe,
           {
-            models: m,
-            onModelChange: H,
-            selectedModelId: s
+            models: h,
+            onModelChange: u,
+            selectedModelId: b
           }
         )
       ] }),
       /* @__PURE__ */ e("div", { className: "flex-1" }),
-      /* @__PURE__ */ e(k, { children: h && /* @__PURE__ */ a(
-        o,
-        {
-          "aria-label": "New chat",
-          className: "h-9 gap-1 px-2",
-          onClick: h,
-          variant: "outline",
-          children: [
-            /* @__PURE__ */ e(Y, { className: "size-4" }),
-            /* @__PURE__ */ e("span", { className: "md:sr-only", children: "New Chat" })
-          ]
-        }
-      ) })
-    ] }),
-    /* @__PURE__ */ a(ne, { className: "relative min-w-0 flex-1 flex-col pt-4", children: [
-      /* @__PURE__ */ a(le, { className: "gap-6 pb-4", children: [
-        C || (d && d.length > 0 ? /* @__PURE__ */ e(
-          xe,
+      /* @__PURE__ */ e(A, { children: v && /* @__PURE__ */ r(C, { children: [
+        /* @__PURE__ */ e(N, { asChild: !0, children: /* @__PURE__ */ r(
+          o,
           {
-            isStreaming: i,
-            loadingIndicator: K,
-            messages: d,
-            renderMessage: J
+            "aria-label": "New chat",
+            className: "h-9 gap-1 px-2 text-foreground",
+            onClick: v,
+            variant: "outline",
+            children: [
+              /* @__PURE__ */ e(X, { className: "size-4" }),
+              /* @__PURE__ */ e("span", { className: "md:sr-only", children: "New Chat" })
+            ]
           }
-        ) : /* @__PURE__ */ a(ye, { children: [
-          /* @__PURE__ */ a(Ue, { children: [
-            "Hi, ",
-            /* @__PURE__ */ e("span", { className: "text-primary/80", children: W })
-          ] }),
-          /* @__PURE__ */ e(ke, { children: "How can I help you today?" })
-        ] })),
-        /* @__PURE__ */ e(ie, {})
-      ] }),
-      /* @__PURE__ */ e("div", { className: "pointer-events-none absolute right-0 bottom-0 left-0 z-10 h-10 bg-gradient-to-t from-10% from-background to-transparent" }),
-      /* @__PURE__ */ e("div", { className: "pointer-events-none absolute right-0 bottom-4 left-0 z-20 flex justify-center px-4", children: /* @__PURE__ */ e("div", { className: "flex w-full max-w-3xl justify-end pr-4", children: /* @__PURE__ */ e(se, { className: "pointer-events-auto shadow-md" }) }) })
+        ) }),
+        /* @__PURE__ */ e(x, { children: "New chat" })
+      ] }) })
     ] }),
-    /* @__PURE__ */ a(Te, { children: [
-      !Q && l && l.length > 0 && /* @__PURE__ */ e(De, { children: l.map((n, z) => /* @__PURE__ */ e(
+    /* @__PURE__ */ r(
+      ae,
+      {
+        className: "relative min-w-0 flex-1 flex-col pt-4",
+        children: [
+          /* @__PURE__ */ r(ie, { className: "gap-6 pb-4", children: [
+            D || (p && p.length > 0 ? /* @__PURE__ */ e(
+              ke,
+              {
+                isStreaming: l,
+                loadingIndicator: E,
+                messages: p,
+                renderMessage: $
+              }
+            ) : /* @__PURE__ */ r(_e, { children: [
+              /* @__PURE__ */ r(je, { children: [
+                "Hi, ",
+                /* @__PURE__ */ e("span", { className: "text-primary/80", children: Q })
+              ] }),
+              /* @__PURE__ */ e(Ae, { children: "How can I help you today?" })
+            ] })),
+            /* @__PURE__ */ e(le, {})
+          ] }),
+          /* @__PURE__ */ e("div", { className: "pointer-events-none absolute right-0 bottom-0 left-0 z-10 h-10 bg-linear-to-t from-10% from-background to-transparent" }),
+          /* @__PURE__ */ e("div", { className: "pointer-events-none absolute right-0 bottom-4 left-0 z-20 flex justify-center px-4", children: /* @__PURE__ */ e("div", { className: "flex w-full max-w-3xl justify-end pr-4", children: /* @__PURE__ */ e(ue, { className: "pointer-events-auto shadow-md" }) }) })
+        ]
+      },
+      J
+    ),
+    /* @__PURE__ */ r(Ge, { children: [
+      !K && n && n.length > 0 && /* @__PURE__ */ e(Be, { children: n.map((c, g) => /* @__PURE__ */ e(
         "div",
         {
-          className: Pe(
+          className: q(
             "col-span-12 sm:col-span-6",
-            z < 3 ? "md:col-span-4" : "md:col-span-6",
-            z > 1 && "hidden sm:block"
+            g < 3 ? "md:col-span-4" : "md:col-span-6",
+            g > 1 && "hidden sm:block"
           ),
           children: /* @__PURE__ */ e(
-            we,
+            De,
             {
-              icon: n.icon,
-              onClick: n.onClick ?? (n.action ? () => t?.(n.action ?? "") : void 0),
-              subtitle: n.subtitle,
-              title: n.title
+              icon: c.icon,
+              onClick: Ue(
+                c,
+                i
+              ),
+              subtitle: c.subtitle,
+              title: c.title
             }
           )
         },
-        n.id
+        c.id
       )) }),
-      /* @__PURE__ */ a(
-        be,
+      /* @__PURE__ */ r(
+        ye,
         {
-          isLoading: i,
-          onSubmit: g,
-          onValueChange: G,
-          value: N,
+          disabled: s,
+          isLoading: l,
+          onSubmit: S,
+          onValueChange: m,
+          value: f,
           children: [
-            /* @__PURE__ */ e(Ce, { placeholder: "Send a message..." }),
-            /* @__PURE__ */ e(Se, { className: "justify-end px-2 pb-2", children: /* @__PURE__ */ e(
-              ze,
+            /* @__PURE__ */ e(ze, { placeholder: "Send a message..." }),
+            /* @__PURE__ */ e(Ie, { className: "justify-end px-2 pb-2", children: /* @__PURE__ */ e(
+              Oe,
               {
-                tooltip: i ? "Stop generating" : "Send message",
+                tooltip: l ? "Stop generating" : "Send message",
                 children: /* @__PURE__ */ e(
                   o,
                   {
-                    "aria-label": i ? "Stop generating" : "Send message",
-                    disabled: !(i || N?.trim()),
-                    onClick: i ? B : g,
+                    "aria-label": l ? "Stop generating" : "Send message",
+                    disabled: s || !(l || f?.trim()),
+                    onClick: l ? F : S,
                     size: "icon",
-                    variant: i ? "destructive" : "default",
-                    children: i ? /* @__PURE__ */ e(Z, { className: "size-4 fill-current" }) : /* @__PURE__ */ e(_, { className: "size-4" })
+                    variant: l ? "destructive" : "default",
+                    children: l ? /* @__PURE__ */ e(Y, { className: "size-4 fill-current" }) : /* @__PURE__ */ e(Z, { className: "size-4" })
                   }
                 )
               }
@@ -242,59 +324,62 @@ function Xe({
       )
     ] })
   ] });
-  return b ? /* @__PURE__ */ a(oe, { defaultOpen: E, children: [
-    /* @__PURE__ */ a(me, { className: "group-data-[side=left]:border-r-0", children: [
-      /* @__PURE__ */ e(he, { children: /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
-        c && /* @__PURE__ */ e("div", { className: "flex items-center gap-2 px-2", children: c }),
-        /* @__PURE__ */ a("div", { className: "flex items-center gap-1", children: [
-          x && /* @__PURE__ */ e(
-            o,
-            {
-              "aria-label": "Delete all chats",
-              className: "size-8",
-              onClick: x,
-              size: "icon",
-              variant: "ghost",
-              children: /* @__PURE__ */ e($, { className: "size-4" })
-            }
-          ),
-          h && /* @__PURE__ */ e(
-            o,
-            {
-              "aria-label": "New chat",
-              className: "size-8",
-              onClick: h,
-              size: "icon",
-              variant: "ghost",
-              children: /* @__PURE__ */ e(L, { className: "size-4" })
-            }
-          )
-        ] })
-      ] }) }),
-      /* @__PURE__ */ e(pe, { children: /* @__PURE__ */ a(ue, { children: [
-        /* @__PURE__ */ e(fe, { children: "History" }),
-        /* @__PURE__ */ e(ve, { children: /* @__PURE__ */ e(u, { children: q?.map((n) => /* @__PURE__ */ e(f, { children: /* @__PURE__ */ e(
-          v,
+  return O ? /* @__PURE__ */ r(ve, { defaultOpen: V, children: [
+    /* @__PURE__ */ r(ge, { className: "[--sidebar-accent-foreground:oklch(0.205_0_0)] [--sidebar-accent:oklch(0.95_0_0)] group-data-[side=left]:border-r-0 dark:[--sidebar-accent-foreground:oklch(0.985_0_0)] dark:[--sidebar-accent:oklch(0.269_0_0)]", children: [
+      /* @__PURE__ */ r(Ce, { className: "gap-6 pb-2", children: [
+        /* @__PURE__ */ r("div", { className: "flex items-center px-2 pt-2", children: [
+          /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: a ?? /* @__PURE__ */ e(Re, {}) }),
+          k && T.length > 0 && /* @__PURE__ */ e("div", { className: "ml-auto", children: /* @__PURE__ */ e(Fe, { onDeleteAll: k }) })
+        ] }),
+        v && /* @__PURE__ */ r(
+          o,
           {
-            isActive: n.isActive,
-            onClick: () => V?.(n.id),
-            children: /* @__PURE__ */ e("span", { children: n.title })
+            className: "w-full gap-2 text-foreground",
+            onClick: v,
+            variant: "outline",
+            children: [
+              /* @__PURE__ */ e(L, { className: "size-4" }),
+              "New Chat"
+            ]
           }
-        ) }, n.id)) }) })
-      ] }) }),
-      /* @__PURE__ */ e(Ne, { children: /* @__PURE__ */ e(
-        je,
+        )
+      ] }),
+      /* @__PURE__ */ r(Ne, { children: [
+        T.length === 0 && /* @__PURE__ */ r(P, { className: "px-2", children: [
+          /* @__PURE__ */ e(H, { children: "History" }),
+          /* @__PURE__ */ e(_, { children: /* @__PURE__ */ e("p", { className: "px-2 py-2 text-muted-foreground text-xs", children: "No chats yet. Start a conversation!" }) })
+        ] }),
+        T.map(({ label: c, items: g }) => /* @__PURE__ */ r(P, { children: [
+          /* @__PURE__ */ e(H, { children: c }),
+          /* @__PURE__ */ e(_, { children: /* @__PURE__ */ e(xe, { children: g.map((d) => /* @__PURE__ */ e(
+            We,
+            {
+              isActive: d.isActive,
+              isStreaming: l && d.isActive,
+              onDelete: I ? () => I(d.id) : void 0,
+              onSelect: z ? () => z(d.id) : void 0,
+              title: d.title
+            },
+            d.id
+          )) }) })
+        ] }, c))
+      ] }),
+      /* @__PURE__ */ e(be, { children: /* @__PURE__ */ e(
+        Me,
         {
-          onSignOut: F,
-          onThemeChange: O,
-          theme: R,
-          user: r
+          avatarUrl: t?.avatarUrl,
+          email: t?.email,
+          name: t?.name,
+          children: y && /* @__PURE__ */ r(oe, { onClick: y, children: [
+            /* @__PURE__ */ e(ee, { className: "size-4" }),
+            "Sign out"
+          ] })
         }
       ) })
     ] }),
-    /* @__PURE__ */ e(ge, { children: S })
-  ] }) : S;
+    /* @__PURE__ */ e(Se, { children: M })
+  ] }) : M;
 }
 export {
-  Xe as ChatPage
+  cr as ChatPage
 };

package/dist/components/ui/templates/chat-template.d.ts

@@ -7,7 +7,7 @@ export type ChatTemplateHeaderGroupProps = React.ComponentProps<"div">;
 export declare function ChatTemplateHeaderGroup({ className, ...props }: ChatTemplateHeaderGroupProps): import("react/jsx-runtime").JSX.Element;
 export type ChatTemplateBodyProps = React.ComponentProps<"div">;
 export declare function ChatTemplateBody({ className, ...props }: ChatTemplateBodyProps): import("react/jsx-runtime").JSX.Element;
-export type ChatTemplateFooterProps = React.ComponentProps<"div">;
+export type ChatTemplateFooterProps = React.ComponentProps<"footer">;
 export declare function ChatTemplateFooter({ className, ...props }: ChatTemplateFooterProps): import("react/jsx-runtime").JSX.Element;
 export type ChatTemplateOverviewProps = React.ComponentProps<"div">;
 export declare function ChatTemplateOverview({ className, ...props }: ChatTemplateOverviewProps): import("react/jsx-runtime").JSX.Element;