@arcadeai/design-system 3.35.2 → 3.36.2

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

@@ -1,385 +0,0 @@
-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 { Button as o } from "../atoms/button.js";
-import { ChatContainerRoot as ne, ChatContainerContent as ae, ChatContainerScrollAnchor as ie } from "../atoms/chat-container.js";
-import { DropdownMenuItem as le, DropdownMenu as oe, DropdownMenuTrigger as ce, DropdownMenuContent as se, DropdownMenuRadioGroup as de, DropdownMenuRadioItem as he } from "../atoms/dropdown-menu.js";
-import { ArcadeLogo as me } from "../atoms/icons/arcade-logo.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(me, { 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
-}) {
-  return !t || t.length === 0 ? null : /* @__PURE__ */ r(oe, { children: [
-    /* @__PURE__ */ e(ce, { 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(se, { align: "start", className: "min-w-[300px]", children: /* @__PURE__ */ e(
-      de,
-      {
-        onValueChange: n,
-        value: a,
-        children: t.map((i) => /* @__PURE__ */ e(he, { 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))
-      }
-    ) })
-  ] });
-}
-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__ */ 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 We({
-  title: t,
-  isActive: a,
-  isStreaming: n = !1,
-  onSelect: i,
-  onDelete: h
-}) {
-  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,
-      {
-        "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 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 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(
-          qe,
-          {
-            models: h,
-            onModelChange: u,
-            selectedModelId: b
-          }
-        )
-      ] }),
-      /* @__PURE__ */ e("div", { className: "flex-1" }),
-      /* @__PURE__ */ e(A, { children: v && /* @__PURE__ */ r(C, { children: [
-        /* @__PURE__ */ e(N, { asChild: !0, children: /* @__PURE__ */ r(
-          o,
-          {
-            "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__ */ e(x, { children: "New chat" })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ r(
-      ne,
-      {
-        className: "relative min-w-0 flex-1 flex-col pt-4",
-        children: [
-          /* @__PURE__ */ r(ae, { 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(ie, {})
-          ] }),
-          /* @__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: q(
-            "col-span-12 sm:col-span-6",
-            g < 3 ? "md:col-span-4" : "md:col-span-6",
-            g > 1 && "hidden sm:block"
-          ),
-          children: /* @__PURE__ */ e(
-            De,
-            {
-              icon: c.icon,
-              onClick: Ue(
-                c,
-                i
-              ),
-              subtitle: c.subtitle,
-              title: c.title
-            }
-          )
-        },
-        c.id
-      )) }),
-      /* @__PURE__ */ r(
-        ye,
-        {
-          disabled: s,
-          isLoading: l,
-          onSubmit: S,
-          onValueChange: m,
-          value: f,
-          children: [
-            /* @__PURE__ */ e(ze, { placeholder: "Send a message..." }),
-            /* @__PURE__ */ e(Ie, { className: "justify-end px-2 pb-2", children: /* @__PURE__ */ e(
-              Oe,
-              {
-                tooltip: l ? "Stop generating" : "Send message",
-                children: /* @__PURE__ */ e(
-                  o,
-                  {
-                    "aria-label": l ? "Stop generating" : "Send message",
-                    disabled: s || !(l || f?.trim()),
-                    onClick: l ? F : S,
-                    size: "icon",
-                    variant: l ? "destructive" : "default",
-                    children: l ? /* @__PURE__ */ e(Y, { className: "size-4 fill-current" }) : /* @__PURE__ */ e(Z, { className: "size-4" })
-                  }
-                )
-              }
-            ) })
-          ]
-        }
-      )
-    ] })
-  ] });
-  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,
-          {
-            className: "w-full gap-2 text-foreground",
-            onClick: v,
-            variant: "outline",
-            children: [
-              /* @__PURE__ */ e(L, { className: "size-4" }),
-              "New Chat"
-            ]
-          }
-        )
-      ] }),
-      /* @__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,
-        {
-          avatarUrl: t?.avatarUrl,
-          email: t?.email,
-          name: t?.name,
-          children: y && /* @__PURE__ */ r(le, { onClick: y, children: [
-            /* @__PURE__ */ e(ee, { className: "size-4" }),
-            "Sign out"
-          ] })
-        }
-      ) })
-    ] }),
-    /* @__PURE__ */ e(Se, { children: M })
-  ] }) : M;
-}
-export {
-  cr as ChatPage
-};