@gram-ai/elements 1.20.0 → 1.20.1

package/dist/elements.js

@@ -46385,32 +46385,33 @@ const rY = ({ children: e }) => {
   ),
   " ",
   "before deploying to production."
-] }), km = () => {
-  const e = Im(), t = xr(), { config: n } = Pt(), i = n.components ?? {}, r = n.api && "UNSAFE_apiKey" in n.api;
+] }), km = ({ className: e }) => {
+  const t = Im(), n = xr(), { config: i } = Pt(), r = i.components ?? {}, o = i.api && "UNSAFE_apiKey" in i.api;
   return /* @__PURE__ */ g(rp, { features: XP, children: /* @__PURE__ */ g(vb, { reducedMotion: "user", children: /* @__PURE__ */ g(
     x0,
     {
       className: Z(
         "aui-root aui-thread-root bg-background @container flex h-full flex-col",
-        e.className
+        t.className,
+        e
       ),
       children: /* @__PURE__ */ J(
         I0,
         {
           className: Z(
             "aui-thread-viewport relative mx-auto flex w-full flex-1 flex-col overflow-x-auto overflow-y-scroll pb-0!",
-            t("p-lg")
+            n("p-lg")
           ),
           children: [
-            /* @__PURE__ */ g(Fo, { empty: !0, children: i.ThreadWelcome ? /* @__PURE__ */ g(i.ThreadWelcome, {}) : /* @__PURE__ */ g(aY, {}) }),
-            r && /* @__PURE__ */ g(iY, {}),
+            /* @__PURE__ */ g(Fo, { empty: !0, children: r.ThreadWelcome ? /* @__PURE__ */ g(r.ThreadWelcome, {}) : /* @__PURE__ */ g(aY, {}) }),
+            o && /* @__PURE__ */ g(iY, {}),
             /* @__PURE__ */ g(
               eF,
               {
                 components: {
-                  UserMessage: i.UserMessage ?? mY,
-                  EditComposer: i.EditComposer ?? vY,
-                  AssistantMessage: i.AssistantMessage ?? pY
+                  UserMessage: r.UserMessage ?? mY,
+                  EditComposer: r.EditComposer ?? vY,
+                  AssistantMessage: r.AssistantMessage ?? pY
                 }
               }
             ),
@@ -46807,14 +46808,15 @@ function yY({ className: e, ...t }) {
     }
   );
 }
-const VP = () => {
-  const e = xr();
+const VP = ({ className: e }) => {
+  const t = xr();
   return /* @__PURE__ */ J(
     P0,
     {
       className: Z(
-        "aui-root aui-thread-list-root flex flex-col items-stretch",
-        e("gap-sm")
+        "aui-root aui-thread-list-root bg-background flex flex-col items-stretch",
+        t("gap-sm"),
+        e
       ),
       children: [
         /* @__PURE__ */ g(
@@ -46822,8 +46824,8 @@ const VP = () => {
           {
             className: Z(
               "aui-thread-list-new-section border-b pb-2",
-              e("py-sm"),
-              e("px-sm")
+              t("py-sm"),
+              t("px-sm")
             ),
             children: /* @__PURE__ */ g(bY, {})
           }
@@ -46833,8 +46835,8 @@ const VP = () => {
           {
             className: Z(
               "aui-thread-list-items-section flex flex-col gap-1",
-              e("py-xs"),
-              e("px-sm")
+              t("py-xs"),
+              t("px-sm")
             ),
             children: /* @__PURE__ */ g(_Y, {})
           }
@@ -46904,49 +46906,50 @@ const VP = () => {
     duration: 0.25,
     ease: mr
   }
-}, kY = () => {
-  const { config: e } = Pt(), t = Im(), n = ji(), i = xr(), [r, o] = we(e.modal?.defaultOpen ?? !1), { expandable: a, isExpanded: s, setIsExpanded: u } = HP(), l = e.modal?.title, c = e.modal?.icon, d = e.history?.enabled && e.history?.showThreadList !== !1, f = e.modal?.position ?? "bottom-right", p = EY(f), m = xe(
-    () => e.modal?.dimensions?.default ?? {
+}, kY = ({ className: e }) => {
+  const { config: t } = Pt(), n = Im(), i = ji(), r = xr(), [o, a] = we(t.modal?.defaultOpen ?? !1), { expandable: s, isExpanded: u, setIsExpanded: l } = HP(), c = t.modal?.title, d = t.modal?.icon, f = t.history?.enabled && t.history?.showThreadList !== !1, p = t.modal?.position ?? "bottom-right", m = EY(p), h = xe(
+    () => t.modal?.dimensions?.default ?? {
       width: "500px",
       height: "600px",
       maxHeight: "95vh"
     },
-    [e.modal?.dimensions?.default]
-  ), h = xe(
-    () => e.modal?.dimensions?.expanded ?? {
+    [t.modal?.dimensions?.default]
+  ), y = xe(
+    () => t.modal?.dimensions?.expanded ?? {
       width: "70vw",
       height: "90vh"
     },
-    [e.modal?.dimensions?.expanded]
-  ), v = ee(({ thread: $ }) => $).messages.some(
-    ($) => $.status?.type === "running"
-  ), w = s ? h.width : m.width, x = s ? h.height : m.height, b = m.maxHeight;
+    [t.modal?.dimensions?.expanded]
+  ), w = ee(({ thread: k }) => k).messages.some(
+    (k) => k.status?.type === "running"
+  ), x = u ? y.width : h.width, b = u ? y.height : h.height, $ = h.maxHeight;
   return /* @__PURE__ */ g(rp, { features: yb, children: /* @__PURE__ */ g(vb, { reducedMotion: "user", transition: IY, children: /* @__PURE__ */ g(
     "div",
     {
       className: Z(
         "aui-root aui-modal-anchor fixed z-10",
-        p,
-        t.className,
-        n("lg"),
-        r && "shadow-xl"
+        m,
+        n.className,
+        i("lg"),
+        o && "shadow-xl",
+        e
       ),
-      children: /* @__PURE__ */ g(QP, { mode: "wait", children: r ? /* @__PURE__ */ J(
+      children: /* @__PURE__ */ g(QP, { mode: "wait", children: o ? /* @__PURE__ */ J(
         Hn.div,
         {
           layout: !0,
           layoutId: "chat-container",
           className: Z(
             "aui-modal-content bg-popover text-popover-foreground flex flex-col overflow-hidden border [&>.aui-thread-root]:bg-inherit",
-            n("lg")
+            i("lg")
           ),
           initial: !1,
           style: {
-            originX: f.includes("left") ? 0 : 1,
-            originY: f.includes("top") ? 0 : 1,
-            width: w,
-            height: x,
-            maxHeight: b
+            originX: p.includes("left") ? 0 : 1,
+            originY: p.includes("top") ? 0 : 1,
+            width: x,
+            height: b,
+            maxHeight: $
           },
           children: [
             /* @__PURE__ */ J(
@@ -46954,8 +46957,8 @@ const VP = () => {
               {
                 className: Z(
                   "aui-modal-header flex shrink-0 items-center justify-between border-b",
-                  i("h-header"),
-                  i("px-lg")
+                  r("h-header"),
+                  r("px-lg")
                 ),
                 initial: { opacity: 0 },
                 animate: { opacity: 1 },
@@ -46970,11 +46973,11 @@ const VP = () => {
                     {
                       className: Z(
                         "text-md flex items-center gap-2 truncate font-medium",
-                        v && "shimmer"
+                        w && "shimmer"
                       ),
                       children: [
-                        /* @__PURE__ */ g("span", { className: "truncate", children: l }),
-                        v && /* @__PURE__ */ g(
+                        /* @__PURE__ */ g("span", { className: "truncate", children: c }),
+                        w && /* @__PURE__ */ g(
                           sl,
                           {
                             className: "text-muted-foreground size-4.5 animate-spin",
@@ -46985,17 +46988,17 @@ const VP = () => {
                     }
                   ) }),
                   /* @__PURE__ */ J("div", { className: "flex flex-row items-center justify-end gap-1", children: [
-                    a ? /* @__PURE__ */ g(
+                    s ? /* @__PURE__ */ g(
                       "button",
                       {
                         type: "button",
-                        onClick: () => u(($) => !$),
+                        onClick: () => l((k) => !k),
                         className: Z(
                           "text-muted-foreground hover:text-foreground hover:bg-accent flex h-8 cursor-pointer items-center rounded-md px-2 text-xs transition-colors"
                         ),
-                        "aria-pressed": s,
-                        "aria-label": s ? "Collapse assistant" : "Expand assistant",
-                        children: s ? /* @__PURE__ */ g(
+                        "aria-pressed": u,
+                        "aria-label": u ? "Collapse assistant" : "Expand assistant",
+                        children: u ? /* @__PURE__ */ g(
                           RF,
                           {
                             strokeWidth: 2,
@@ -47014,10 +47017,10 @@ const VP = () => {
                       "button",
                       {
                         onClick: () => {
-                          o(!1), u(!1);
+                          a(!1), l(!1);
                         },
                         className: "text-muted-foreground hover:text-foreground hover:bg-accent -mr-1 flex size-8 cursor-pointer items-center justify-center rounded-md transition-colors",
-                        "aria-label": `Close ${l}`,
+                        "aria-label": `Close ${c}`,
                         children: /* @__PURE__ */ g(za, { className: "size-4.5" })
                       }
                     )
@@ -47037,7 +47040,7 @@ const VP = () => {
                   ease: mr
                 },
                 children: [
-                  d && /* @__PURE__ */ g("div", { className: "aui-modal-thread-list w-56 shrink-0 overflow-y-auto border-r", children: /* @__PURE__ */ g(VP, {}) }),
+                  f && /* @__PURE__ */ g("div", { className: "aui-modal-thread-list w-56 shrink-0 overflow-y-auto border-r", children: /* @__PURE__ */ g(VP, {}) }),
                   /* @__PURE__ */ g("div", { className: "aui-modal-thread w-full flex-1 overflow-hidden", children: /* @__PURE__ */ g(km, {}) })
                 ]
               }
@@ -47050,13 +47053,13 @@ const VP = () => {
         {
           layout: !0,
           layoutId: "chat-container",
-          onClick: () => o(!0),
+          onClick: () => a(!0),
           className: Z(
             "aui-modal-button bg-primary text-primary-foreground flex size-12 cursor-pointer items-center justify-center border shadow-lg transition-shadow hover:shadow-xl",
-            n("full")
+            i("full")
           ),
           initial: !1,
-          "aria-label": `Open ${l}`,
+          "aria-label": `Open ${c}`,
           style: { originX: 1, originY: 1 },
           children: /* @__PURE__ */ g(
             Hn.div,
@@ -47066,7 +47069,7 @@ const VP = () => {
               exit: { opacity: 0, scale: 0.8 },
               transition: { duration: 0.2, ease: mr },
               className: "flex size-full items-center justify-center",
-              children: c ? c("closed") : /* @__PURE__ */ g(PF, { className: "size-6" })
+              children: d ? d("closed") : /* @__PURE__ */ g(PF, { className: "size-6" })
             }
           )
         },
@@ -47089,25 +47092,26 @@ function EY(e) {
       GP(e);
   }
 }
-const TY = () => {
-  const { config: e } = Pt(), t = Im(), n = e.sidecar ?? {}, { title: i, dimensions: r } = n, { isExpanded: o, setIsExpanded: a } = HP(), u = ee(({ thread: c }) => c).messages.some(
-    (c) => c.status?.type === "running"
-  ), l = e.history?.enabled && e.history?.showThreadList !== !1;
+const TY = ({ className: e }) => {
+  const { config: t } = Pt(), n = Im(), i = t.sidecar ?? {}, { title: r, dimensions: o } = i, { isExpanded: a, setIsExpanded: s } = HP(), l = ee(({ thread: d }) => d).messages.some(
+    (d) => d.status?.type === "running"
+  ), c = t.history?.enabled && t.history?.showThreadList !== !1;
   return /* @__PURE__ */ g(rp, { features: yb, children: /* @__PURE__ */ J(
     Hn.div,
     {
       initial: {
-        width: r?.default?.width ?? "400px",
-        height: r?.default?.height ?? "100vh"
+        width: o?.default?.width ?? "400px",
+        height: o?.default?.height ?? "100vh"
       },
       animate: {
-        width: o ? r?.expanded?.width ?? "800px" : r?.default?.width ?? "400px",
-        height: o ? r?.expanded?.height ?? "100%" : r?.default?.height ?? "100vh"
+        width: a ? o?.expanded?.width ?? "800px" : o?.default?.width ?? "400px",
+        height: a ? o?.expanded?.height ?? "100%" : o?.default?.height ?? "100vh"
       },
       transition: { duration: 0.3, ease: mr },
       className: Z(
         "aui-root aui-sidecar bg-popover text-popover-foreground fixed top-0 right-0 border-l",
-        t.className
+        n.className,
+        e
       ),
       children: [
         /* @__PURE__ */ J("div", { className: "aui-sidecar-header flex h-14 items-center justify-between border-b px-4", children: [
@@ -47116,11 +47120,11 @@ const TY = () => {
             {
               className: Z(
                 "text-md flex items-center gap-2 font-medium",
-                u && "shimmer"
+                l && "shimmer"
               ),
               children: [
-                i,
-                u && /* @__PURE__ */ g(
+                r,
+                l && /* @__PURE__ */ g(
                   sl,
                   {
                     className: "text-muted-foreground size-4.5 animate-spin",
@@ -47133,31 +47137,31 @@ const TY = () => {
           /* @__PURE__ */ g("div", { className: "aui-sidecar-header-actions flex items-center gap-1", children: /* @__PURE__ */ g(
             on,
             {
-              tooltip: o ? "Collapse" : "Pop out",
+              tooltip: a ? "Collapse" : "Pop out",
               variant: "ghost",
               className: "aui-sidecar-popout size-8",
-              onClick: () => a((c) => !c),
-              children: o ? /* @__PURE__ */ g(MF, { className: "size-4.5" }) : /* @__PURE__ */ g(DF, { className: "size-4.5" })
+              onClick: () => s((d) => !d),
+              children: a ? /* @__PURE__ */ g(MF, { className: "size-4.5" }) : /* @__PURE__ */ g(DF, { className: "size-4.5" })
             }
           ) })
         ] }),
         /* @__PURE__ */ J("div", { className: "aui-sidecar-body flex h-[calc(100%-3.5rem)] overflow-hidden", children: [
-          l && /* @__PURE__ */ g("div", { className: "aui-sidecar-thread-list w-56 shrink-0 overflow-y-auto border-r", children: /* @__PURE__ */ g(VP, {}) }),
+          c && /* @__PURE__ */ g("div", { className: "aui-sidecar-thread-list w-56 shrink-0 overflow-y-auto border-r", children: /* @__PURE__ */ g(VP, {}) }),
           /* @__PURE__ */ g("div", { className: "aui-sidecar-content flex-1 overflow-hidden", children: /* @__PURE__ */ g(km, {}) })
         ] })
       ]
     }
   ) });
-}, XY = () => {
-  const { config: e } = Pt();
-  switch (e.variant) {
+}, XY = ({ className: e }) => {
+  const { config: t } = Pt();
+  switch (t.variant) {
     case "standalone":
-      return /* @__PURE__ */ g(km, {});
+      return /* @__PURE__ */ g(km, { className: e });
     case "sidecar":
-      return /* @__PURE__ */ g(TY, {});
+      return /* @__PURE__ */ g(TY, { className: e });
     // If no variant is provided then fallback to the modal
     default:
-      return /* @__PURE__ */ g(kY, {});
+      return /* @__PURE__ */ g(kY, { className: e });
   }
 };
 export {