@gram-ai/elements 1.16.2 → 1.16.4

package/dist/elements.js

@@ -2,7 +2,7 @@ import { jsx as c, Fragment as rt, jsxs as O } from "react/jsx-runtime";
 import { j as x, s as C, i as xi, a as $s, p as _i, e as wi, f as ki, $ as xs, b as _s, c as ws, d as ks, g as Ss, h as Is, k as Ns, l as Os, m as Cs, n as Ps, o as Es, q as js, r as Ds, t as Us, u as Ts, v as As, w as Rs, x as zs, y as Ls, z as Ms, A as Fs, B as Zs, C as Ws, D as Bs, E as Vs, F as Gs, G as Js, H as Ks, I as Hs, J as qs, K as Xs, L as Ys, M as Qs, N as el, O as tl, P as nl, Q as rl, R as il, S as ol, T as al, U as sl, V as ll, W as cl, X as ul, Y as dl, Z as fl, _ as ml, a0 as gl, a1 as pl, a2 as vl, a3 as hl, a4 as bl, a5 as yl, a6 as $l, a7 as xl, a8 as _l, a9 as wl, aa as kl, ab as Sl, ac as Il, ad as Nl, ae as Ol, af as Cl, ag as Pl, ah as El, ai as jl, aj as Dl, ak as Ul, al as Tl, am as Al, an as Rl, ao as zl, ap as Ll, aq as Ml, ar as Fl, as as Zl, at as Wl, au as Bl, av as Vl, aw as Gl, ax as Jl, ay as Kl, az as Hl, aA as ql, aB as Xl, aC as Yl, aD as Ql, aE as ec, aF as tc, aG as nc, aH as rc, aI as ic, aJ as oc, aK as ac, aL as sc, aM as lc, aN as cc, aO as uc, aP as dc, aQ as Si, aR as fc, aS as Ii, aT as Ni, aU as mc, aV as Oi, aW as Ci, aX as gc, aY as pc, aZ as vc, a_ as hc, a$ as bc, b0 as yc, b1 as $c, b2 as xc, b3 as _c, b4 as wc, b5 as Pi, b6 as Ei, b7 as ji, b8 as Di, b9 as Ui, ba as kc, bb as Sc, bc as Ic, bd as Nc, be as Oc, bf as Cc, bg as Pc, bh as Ec, bi as jc, bj as Dc, bk as Uc, bl as Tc, bm as Ac, bn as kn, bo as Rc, bp as zc, bq as Lc, br as Mc, bs as Sn, bt as It, bu as Fc, bv as In, bw as Zc, bx as Wc, by as Bc, bz as Vc, bA as Gc, bB as Jc, bC as Kc, bD as Hc, bE as qc, bF as Xc, bG as Yc, bH as Qc, bI as eu, bJ as Nn, bK as tu, bL as On, bM as Cn, bN as Nt, bO as nu, bP as ru, bQ as Pn, bR as En, bS as jn, bT as Dn, bU as Un, bV as Tn, bW as iu, bX as ou, bY as au, bZ as An, b_ as su, b$ as Rn, c0 as lu, c1 as zn, c2 as Ln, c3 as cu, c4 as uu, c5 as du, c6 as fu, c7 as Mn, c8 as mu, c9 as gu, ca as pu, cb as Fn, cc as vu, cd as Zn, ce as hu, cf as bu, cg as yu, ch as Wn, ci as $u, cj as xu, ck as _u, cl as wu, cm as ku, cn as Su, co as Iu, cp as Bn, cq as Vn, cr as Gn, cs as Nu, ct as Ou, cu as Cu, cv as Pu, cw as Eu, cx as ju, cy as Du, cz as Jn, cA as Kn, cB as Uu, cC as Hn, cD as Tu, cE as Au, cF as Ru, cG as zu, cH as Lu, cI as Mu, cJ as Fu, cK as qn, cL as Zu, cM as Wu, cN as Bu, cO as Vu, cP as Gu, cQ as Ju, cR as Ku, cS as Hu, cT as Ti, cU as Xn, cV as qu, cW as Xu, cX as Yu, cY as Qu, cZ as ed, c_ as td, c$ as nd, d0 as Ai, d1 as Ri, d2 as rd, d3 as zi, d4 as id, d5 as od, d6 as ad, d7 as sd, d8 as ld, d9 as cd, da as Li, db as Mi, dc as Fi, dd as ud, de as dd, df as fd, dg as md, dh as gd, di as pd, dj as vd, dk as Zi, dl as Wi, dm as Bi, dn as hd, dp as bd, dq as Vi, dr as Gi, ds as Ji, dt as Ki, du as Hi, dv as qi, dw as yd, dx as $d, dy as xd, dz as _d, dA as wd, dB as kd, dC as Sd, dD as Id, dE as Nd, dF as Od, dG as Cd, dH as Pd, dI as Ed, dJ as jd, dK as Dd, dL as Ud, dM as Td, dN as Ad, dO as Rd, dP as zd, dQ as Ld, dR as Md, dS as Fd, dT as Zd, dU as Wd, dV as Bd, dW as Vd, dX as Gd, dY as Jd, dZ as Kd, d_ as Hd, d$ as qd, e0 as Xd, e1 as Yd, e2 as Qd, e3 as ef, e4 as tf, e5 as nf, e6 as rf, e7 as of, e8 as af, e9 as sf, ea as lf, eb as cf, ec as uf, ed as df, ee as ff, ef as mf, eg as gf, eh as pf, ei as vf, ej as hf, ek as bf, el as yf, em as $f, en as xf, eo as _f, ep as wf, eq as kf, er as Sf, es as If, et as Nf, eu as Of, ev as Cf, ew as Pf, ex as Ef, ey as jf, ez as Df, eA as Uf, eB as Tf, eC as Af, eD as Rf, eE as Ur, eF as zf, eG as Xi, eH as Lf, eI as Mf, eJ as Ff, eK as Zf, eL as Wf, eM as Bf, eN as Vf, eO as Gf, eP as Jf, eQ as Kf, eR as Hf, eS as qf, eT as Xf, eU as Yf, eV as Qf, eW as em, eX as tm, eY as nm, eZ as rm, e_ as im, e$ as om, f0 as am, f1 as sm, f2 as lm, f3 as cm, f4 as um, f5 as dm, f6 as fm, f7 as mm, f8 as gm, f9 as pm, fa as vm, fb as hm, fc as bm, fd as ym, fe as $m, ff as xm, fg as _m, fh as wm, fi as km, fj as Sm, fk as Im, fl as Nm, fm as Om, fn as dn, fo as Cm, fp as Pm, fq as Em, fr as jm, fs as Dm, ft as Um, fu as Tm, fv as Am, fw as Rm, fx as zm, fy as Lm, fz as Mm, fA as Fm, fB as Zm, fC as Le, fD as Wm, fE as Bm, fF as Vm, fG as Gm, fH as Jm, fI as Km, fJ as Hm, fK as qm, fL as Xm, fM as Ym, fN as Qm, fO as eg, fP as tg, fQ as ng, fR as rg, fS as ig, fT as og, fU as ag, fV as sg, fW as lg, fX as $t, fY as cg, fZ as ug, f_ as dg, f$ as fg, g0 as mg, g1 as gg, g2 as pg, g3 as vg, g4 as hg, g5 as bg, g6 as yg, g7 as Yi, g8 as Qi, g9 as $g, ga as xg, gb as _g, gc as wg, gd as kg, ge as Sg, gf as Ig, gg as Ng, gh as Og, gi as Cg, gj as eo, gk as Pg, gl as Eg, gm as to, gn as jg } from "./index-CVZt-xeH.js";
 import { getExternalStoreMessages as fn, unstable_createMessageConverter as Dg, useAssistantApi as no, INTERNAL as ro, useRuntimeAdapters as Ug, useExternalStoreRuntime as Tg, unstable_useCloudThreadListAdapter as Ag, unstable_useRemoteThreadListRuntime as Rg, useAssistantState as ne, makeAssistantTool as zg, AssistantRuntimeProvider as Lg, useScrollLock as Mg, MessagePrimitive as Ie, ComposerPrimitive as ue, AttachmentPrimitive as mn, ThreadPrimitive as ve, ErrorPrimitive as Tr, BranchPickerPrimitive as qe, ActionBarPrimitive as nt } from "@assistant-ui/react";
 import * as f from "react";
-import io, { useRef as he, useCallback as Ot, useState as W, useEffect as Se, useMemo as ye, useSyncExternalStore as qt, useLayoutEffect as Fg, forwardRef as Zg, memo as Yn } from "react";
+import io, { useRef as he, useCallback as Ot, useState as W, useEffect as be, useMemo as $e, useSyncExternalStore as qt, useLayoutEffect as Fg, forwardRef as Zg, memo as Yn } from "react";
 import { c as T, r as Wg, E as Bg, a as Vg, b as k, u as K, C as Gg, d as De, e as Ge, f as oo } from "./index-SAJg5Cz7.js";
 import { LazyMotion as At, domAnimation as ao, AnimatePresence as so, MotionConfig as lo, domMax as co } from "motion/react";
 import * as le from "motion/react-m";
@@ -5617,9 +5617,9 @@ const Xt = (t, r) => !t.parts || t.parts.length === 0 ? [] : t.parts.filter((o)
   })
 }), lh = (t, r, o, i, e) => {
   const n = he(!1), a = no(), s = Ot(() => a.threadListItem.source ? a.threadListItem() : null, [a]), [u, l] = W(!1), d = he(/* @__PURE__ */ new Set()), m = he(() => e);
-  return Se(() => {
+  return be(() => {
     m.current = e;
-  }), Se(() => {
+  }), be(() => {
     if (!r || n.current)
       return;
     const v = async () => {
@@ -5654,7 +5654,7 @@ const Xt = (t, r) => !t.parts || t.parts.length === 0 ? [] : t.parts.filter((o)
     o,
     t,
     s
-  ]), Se(() => t.current.thread.subscribe(async () => {
+  ]), be(() => t.current.thread.subscribe(async () => {
     const { messages: v, isRunning: p } = t.current.thread.getState();
     if (!p)
       for (let h = 0; h < v.length; h++) {
@@ -5675,7 +5675,7 @@ const Xt = (t, r) => !t.parts || t.parts.length === 0 ? [] : t.parts.filter((o)
   const e = Ug(), [n, a] = W({}), s = Object.values(n).some((g) => g?.type === "executing"), u = t.status === "submitted" || t.status === "streaming" || s, l = Zr.useThreadMessages({
     isRunning: u,
     messages: t.messages,
-    metadata: ye(() => ({
+    metadata: $e(() => ({
       toolStatuses: n,
       ...t.error && { error: t.error.message }
     }), [n, t.error])
@@ -5889,18 +5889,18 @@ var vh = ph(), ho = (t, r, o) => {
   if (r.has(t))
     throw TypeError("Cannot add the same private member more than once");
   r instanceof WeakSet ? r.add(t) : r.set(t, o);
-}, we = (t, r, o, i) => (ho(t, r, "write to private field"), r.set(t, o), o);
+}, ke = (t, r, o, i) => (ho(t, r, "write to private field"), r.set(t, o), o);
 function hh(t, r) {
   return r != null ? fh(t, r) : t;
 }
 var Q, xt, _t, Qe, et, tt, Re, gn, pn, bh = class {
   constructor(t = []) {
     se(this, Q, void 0), se(this, xt, "ready"), se(this, _t, void 0), se(this, Qe, /* @__PURE__ */ new Set()), se(this, et, /* @__PURE__ */ new Set()), se(this, tt, /* @__PURE__ */ new Set()), this.pushMessage = (r) => {
-      we(this, Q, D(this, Q).concat(r)), D(this, Re).call(this);
+      ke(this, Q, D(this, Q).concat(r)), D(this, Re).call(this);
     }, this.popMessage = () => {
-      we(this, Q, D(this, Q).slice(0, -1)), D(this, Re).call(this);
+      ke(this, Q, D(this, Q).slice(0, -1)), D(this, Re).call(this);
     }, this.replaceMessage = (r, o) => {
-      we(this, Q, [
+      ke(this, Q, [
         ...D(this, Q).slice(0, r),
         // We deep clone the message here to ensure the new React Compiler (currently in RC) detects deeply nested parts/metadata changes:
         this.snapshot(o),
@@ -5921,25 +5921,25 @@ var Q, xt, _t, Qe, et, tt, Re, gn, pn, bh = class {
       D(this, et).forEach((r) => r());
     }), se(this, pn, () => {
       D(this, tt).forEach((r) => r());
-    }), we(this, Q, t);
+    }), ke(this, Q, t);
   }
   get status() {
     return D(this, xt);
   }
   set status(t) {
-    we(this, xt, t), D(this, gn).call(this);
+    ke(this, xt, t), D(this, gn).call(this);
   }
   get error() {
     return D(this, _t);
   }
   set error(t) {
-    we(this, _t, t), D(this, pn).call(this);
+    ke(this, _t, t), D(this, pn).call(this);
   }
   get messages() {
     return D(this, Q);
   }
   set messages(t) {
-    we(this, Q, [...t]), D(this, Re).call(this);
+    ke(this, Q, [...t]), D(this, Re).call(this);
   }
 };
 Q = /* @__PURE__ */ new WeakMap();
@@ -5954,7 +5954,7 @@ pn = /* @__PURE__ */ new WeakMap();
 var ze, Jr = class extends Pg {
   constructor({ messages: r, ...o }) {
     const i = new bh(r);
-    super({ ...o, state: i }), se(this, ze, void 0), this["~registerMessagesCallback"] = (e, n) => D(this, ze)["~registerMessagesCallback"](e, n), this["~registerStatusCallback"] = (e) => D(this, ze)["~registerStatusCallback"](e), this["~registerErrorCallback"] = (e) => D(this, ze)["~registerErrorCallback"](e), we(this, ze, i);
+    super({ ...o, state: i }), se(this, ze, void 0), this["~registerMessagesCallback"] = (e, n) => D(this, ze)["~registerMessagesCallback"](e, n), this["~registerStatusCallback"] = (e) => D(this, ze)["~registerStatusCallback"](e), this["~registerErrorCallback"] = (e) => D(this, ze)["~registerErrorCallback"](e), ke(this, ze, i);
   }
 };
 ze = /* @__PURE__ */ new WeakMap();
@@ -5990,7 +5990,7 @@ function yh({
     },
     [i]
   );
-  return Se(() => {
+  return be(() => {
     r && i.current.resumeStream();
   }, [r, i]), {
     id: i.current.id,
@@ -6052,9 +6052,9 @@ class vn extends Eg {
 }
 const _h = (t) => {
   const r = he(t);
-  return Se(() => {
+  return be(() => {
     r.current = t;
-  }), ye(() => new Proxy(r.current, {
+  }), $e(() => new Proxy(r.current, {
     get(i, e) {
       const n = r.current[e];
       return typeof n == "function" ? n.bind(r.current) : n;
@@ -6722,10 +6722,10 @@ const Vb = ["top", "right", "bottom", "left"], Ne = Math.min, X = Math.max, Et =
 function bn(t, r, o) {
   return X(t, Ne(r, o));
 }
-function $e(t, r) {
+function xe(t, r) {
   return typeof t == "function" ? t(r) : t;
 }
-function xe(t) {
+function _e(t) {
   return t.split("-")[0];
 }
 function Je(t) {
@@ -6739,7 +6739,7 @@ function or(t) {
 }
 const Kb = /* @__PURE__ */ new Set(["top", "bottom"]);
 function de(t) {
-  return Kb.has(xe(t)) ? "y" : "x";
+  return Kb.has(_e(t)) ? "y" : "x";
 }
 function ar(t) {
   return ir(de(t));
@@ -6772,7 +6772,7 @@ function Qb(t, r, o) {
 }
 function ey(t, r, o, i) {
   const e = Je(t);
-  let n = Qb(xe(t), o === "start", i);
+  let n = Qb(_e(t), o === "start", i);
   return e && (n = n.map((a) => a + "-" + e), r && (n = n.concat(n.map(yn)))), n;
 }
 function jt(t) {
@@ -6818,7 +6818,7 @@ function ti(t, r, o) {
     reference: i,
     floating: e
   } = t;
-  const n = de(r), a = ar(r), s = or(a), u = xe(r), l = n === "y", d = i.x + i.width / 2 - e.width / 2, m = i.y + i.height / 2 - e.height / 2, v = i[s] / 2 - e[s] / 2;
+  const n = de(r), a = ar(r), s = or(a), u = _e(r), l = n === "y", d = i.x + i.width / 2 - e.width / 2, m = i.y + i.height / 2 - e.height / 2, v = i[s] / 2 - e[s] / 2;
   let p;
   switch (u) {
     case "top":
@@ -6938,7 +6938,7 @@ async function it(t, r) {
     elementContext: m = "floating",
     altBoundary: v = !1,
     padding: p = 0
-  } = $e(r, t), h = Io(p), b = s[v ? m === "floating" ? "reference" : "floating" : m], y = Dt(await n.getClippingRect({
+  } = xe(r, t), h = Io(p), b = s[v ? m === "floating" ? "reference" : "floating" : m], y = Dt(await n.getClippingRect({
     element: (o = await (n.isElement == null ? void 0 : n.isElement(b))) == null || o ? b : b.contextElement || await (n.getDocumentElement == null ? void 0 : n.getDocumentElement(s.floating)),
     boundary: l,
     rootBoundary: d,
@@ -6982,7 +6982,7 @@ const ry = (t) => ({
     } = r, {
       element: l,
       padding: d = 0
-    } = $e(t, r) || {};
+    } = xe(t, r) || {};
     if (l == null)
       return {};
     const m = Io(d), v = {
@@ -7025,10 +7025,10 @@ const ry = (t) => ({
         fallbackAxisSideDirection: h = "none",
         flipAlignment: g = !0,
         ...b
-      } = $e(t, r);
+      } = xe(t, r);
       if ((o = n.arrow) != null && o.alignmentOffset)
         return {};
-      const y = xe(e), $ = de(s), _ = xe(s) === s, S = await (u.isRTL == null ? void 0 : u.isRTL(l.floating)), I = v || (_ || !g ? [jt(s)] : qb(s)), P = h !== "none";
+      const y = _e(e), $ = de(s), _ = _e(s) === s, S = await (u.isRTL == null ? void 0 : u.isRTL(l.floating)), I = v || (_ || !g ? [jt(s)] : qb(s)), P = h !== "none";
       !v && P && I.push(...ey(s, g, h, S));
       const N = [s, ...I], j = await it(r, b), R = [];
       let U = ((i = n.flip) == null ? void 0 : i.overflows) || [];
@@ -7107,7 +7107,7 @@ const oy = function(t) {
       } = r, {
         strategy: i = "referenceHidden",
         ...e
-      } = $e(t, r);
+      } = xe(t, r);
       switch (i) {
         case "referenceHidden": {
           const n = await it(r, {
@@ -7144,7 +7144,7 @@ async function ay(t, r) {
     placement: o,
     platform: i,
     elements: e
-  } = t, n = await (i.isRTL == null ? void 0 : i.isRTL(e.floating)), a = xe(o), s = Je(o), u = de(o) === "y", l = No.has(a) ? -1 : 1, d = n && u ? -1 : 1, m = $e(r, t);
+  } = t, n = await (i.isRTL == null ? void 0 : i.isRTL(e.floating)), a = _e(o), s = Je(o), u = de(o) === "y", l = No.has(a) ? -1 : 1, d = n && u ? -1 : 1, m = xe(r, t);
   let {
     mainAxis: v,
     crossAxis: p,
@@ -7213,10 +7213,10 @@ const sy = function(t) {
           }
         },
         ...u
-      } = $e(t, r), l = {
+      } = xe(t, r), l = {
         x: o,
         y: i
-      }, d = await it(r, u), m = de(xe(e)), v = ir(m);
+      }, d = await it(r, u), m = de(_e(e)), v = ir(m);
       let p = l[v], h = l[m];
       if (n) {
         const b = v === "y" ? "top" : "left", y = v === "y" ? "bottom" : "right", $ = p + d[b], _ = p - d[y];
@@ -7258,12 +7258,12 @@ const sy = function(t) {
         offset: s = 0,
         mainAxis: u = !0,
         crossAxis: l = !0
-      } = $e(t, r), d = {
+      } = xe(t, r), d = {
         x: o,
         y: i
       }, m = de(e), v = ir(m);
       let p = d[v], h = d[m];
-      const g = $e(s, r), b = typeof g == "number" ? {
+      const g = xe(s, r), b = typeof g == "number" ? {
         mainAxis: g,
         crossAxis: 0
       } : {
@@ -7277,7 +7277,7 @@ const sy = function(t) {
       }
       if (l) {
         var y, $;
-        const _ = v === "y" ? "width" : "height", S = No.has(xe(e)), I = n.reference[m] - n.floating[_] + (S && ((y = a.offset) == null ? void 0 : y[m]) || 0) + (S ? 0 : b.crossAxis), P = n.reference[m] + n.reference[_] + (S ? 0 : (($ = a.offset) == null ? void 0 : $[m]) || 0) - (S ? b.crossAxis : 0);
+        const _ = v === "y" ? "width" : "height", S = No.has(_e(e)), I = n.reference[m] - n.floating[_] + (S && ((y = a.offset) == null ? void 0 : y[m]) || 0) + (S ? 0 : b.crossAxis), P = n.reference[m] + n.reference[_] + (S ? 0 : (($ = a.offset) == null ? void 0 : $[m]) || 0) - (S ? b.crossAxis : 0);
         h < I ? h = I : h > P && (h = P);
       }
       return {
@@ -7301,7 +7301,7 @@ const sy = function(t) {
         apply: u = () => {
         },
         ...l
-      } = $e(t, r), d = await it(r, l), m = xe(e), v = Je(e), p = de(e) === "y", {
+      } = xe(t, r), d = await it(r, l), m = _e(e), v = Je(e), p = de(e) === "y", {
         width: h,
         height: g
       } = n.floating;
@@ -8260,11 +8260,11 @@ Zt.displayName = u$;
 function d$(t, r) {
   return f.useReducer((o, i) => r[o][i] ?? o, t);
 }
-var _e = (t) => {
+var we = (t) => {
   const { present: r, children: o } = t, i = f$(r), e = typeof o == "function" ? o({ present: i.isPresent }) : f.Children.only(o), n = H(i.ref, m$(e));
   return typeof o == "function" || i.isPresent ? f.cloneElement(e, { ref: n }) : null;
 };
-_e.displayName = "Presence";
+we.displayName = "Presence";
 function f$(t) {
   const [r, o] = f.useState(), i = f.useRef(null), e = f.useRef(t), n = f.useRef("none"), a = t ? "mounted" : "unmounted", [s, u] = d$(a, {
     mounted: {
@@ -8512,13 +8512,13 @@ var pr = "TooltipPortal", [w$, k$] = Bt(pr, {
   forceMount: void 0
 }), ta = (t) => {
   const { __scopeTooltip: r, forceMount: o, children: i, container: e } = t, n = ut(pr, r);
-  return /* @__PURE__ */ c(w$, { scope: r, forceMount: o, children: /* @__PURE__ */ c(_e, { present: o || n.open, children: /* @__PURE__ */ c(Zt, { asChild: !0, container: e, children: i }) }) });
+  return /* @__PURE__ */ c(w$, { scope: r, forceMount: o, children: /* @__PURE__ */ c(we, { present: o || n.open, children: /* @__PURE__ */ c(Zt, { asChild: !0, container: e, children: i }) }) });
 };
 ta.displayName = pr;
 var Be = "TooltipContent", na = f.forwardRef(
   (t, r) => {
     const o = k$(Be, t.__scopeTooltip), { forceMount: i = o.forceMount, side: e = "top", ...n } = t, a = ut(Be, t.__scopeTooltip);
-    return /* @__PURE__ */ c(_e, { present: i || a.open, children: a.disableHoverableContent ? /* @__PURE__ */ c(ra, { side: e, ...n, ref: r }) : /* @__PURE__ */ c(S$, { side: e, ...n, ref: r }) });
+    return /* @__PURE__ */ c(we, { present: i || a.open, children: a.disableHoverableContent ? /* @__PURE__ */ c(ra, { side: e, ...n, ref: r }) : /* @__PURE__ */ c(S$, { side: e, ...n, ref: r }) });
   }
 ), S$ = f.forwardRef((t, r) => {
   const o = ut(Be, t.__scopeTooltip), i = gr(Be, t.__scopeTooltip), e = f.useRef(null), n = H(r, e), [a, s] = f.useState(null), { trigger: u, onClose: l } = o, d = e.current, { onPointerInTransitChange: m } = i, v = f.useCallback(() => {
@@ -8736,13 +8736,13 @@ function br({
       "data-slot": "tooltip-content",
       sideOffset: r,
       className: k(
-        "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+        "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 z-20 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
         t
       ),
       ...i,
       children: [
         o,
-        /* @__PURE__ */ c(M$, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]" })
+        /* @__PURE__ */ c(M$, { className: "bg-foreground fill-foreground z-20 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]" })
       ]
     }
   ) });
@@ -8775,7 +8775,7 @@ const te = Zg(
 );
 te.displayName = "TooltipIconButton";
 function F$(t) {
-  return ye(() => t.reduce((r, o) => (r?.[o.language] && !o.overrideExisting || (r = {
+  return $e(() => t.reduce((r, o) => (r?.[o.language] && !o.overrideExisting || (r = {
     ...r,
     [o.language]: {
       CodeHeader: o.Header ?? (() => null),
@@ -9017,7 +9017,7 @@ const K$ = ({
 }) => {
   const n = ne(({ message: v }) => v).parts.filter((v) => v.type === "tool-call"), a = n.findIndex(
     (v) => v.toolName === t
-  ), s = ye(() => r.type === "complete" ? /* @__PURE__ */ c(st, { className: "size-4 text-emerald-500" }) : r.type === "incomplete" ? /* @__PURE__ */ c(Gg, { className: "size-4 text-rose-500" }) : /* @__PURE__ */ c(er, { className: "text-muted-foreground size-4 animate-spin" }), [r]), u = De(), [l, d] = W(!1), m = (v) => {
+  ), s = $e(() => r.type === "complete" ? /* @__PURE__ */ c(st, { className: "size-4 text-emerald-500" }) : r.type === "incomplete" ? /* @__PURE__ */ c(Gg, { className: "size-4 text-rose-500" }) : /* @__PURE__ */ c(er, { className: "text-muted-foreground size-4 animate-spin" }), [r]), u = De(), [l, d] = W(!1), m = (v) => {
     v.stopPropagation(), d(!l);
   };
   return /* @__PURE__ */ O(
@@ -9212,7 +9212,7 @@ function ca({
   className: o
 }) {
   const [i, e] = W(null);
-  return Se(() => {
+  return be(() => {
     r && Yg(t, {
       lang: r,
       theme: "github-dark-default",
@@ -9314,7 +9314,7 @@ fa.displayName = da;
 var $r = "CollapsibleContent", ma = f.forwardRef(
   (t, r) => {
     const { forceMount: o, ...i } = t, e = yr($r, t.__scopeCollapsible);
-    return /* @__PURE__ */ c(_e, { present: o || e.open, children: ({ present: n }) => /* @__PURE__ */ c(nx, { ...i, ref: r, present: n }) });
+    return /* @__PURE__ */ c(we, { present: o || e.open, children: ({ present: n }) => /* @__PURE__ */ c(nx, { ...i, ref: r, present: n }) });
   }
 );
 ma.displayName = $r;
@@ -9540,15 +9540,15 @@ var rn = "focusScope.autoFocusOnMount", on = "focusScope.autoFocusOnUnmount", ui
       let g = function(_) {
         if (p.paused || !s) return;
         const S = _.target;
-        s.contains(S) ? m.current = S : ke(m.current, { select: !0 });
+        s.contains(S) ? m.current = S : Se(m.current, { select: !0 });
       }, b = function(_) {
         if (p.paused || !s) return;
         const S = _.relatedTarget;
-        S !== null && (s.contains(S) || ke(m.current, { select: !0 }));
+        S !== null && (s.contains(S) || Se(m.current, { select: !0 }));
       }, y = function(_) {
         if (document.activeElement === document.body)
           for (const I of _)
-            I.removedNodes.length > 0 && ke(s);
+            I.removedNodes.length > 0 && Se(s);
       };
       document.addEventListener("focusin", g), document.addEventListener("focusout", b);
       const $ = new MutationObserver(y);
@@ -9562,12 +9562,12 @@ var rn = "focusScope.autoFocusOnMount", on = "focusScope.autoFocusOnUnmount", ui
       const g = document.activeElement;
       if (!s.contains(g)) {
         const y = new CustomEvent(rn, ui);
-        s.addEventListener(rn, l), s.dispatchEvent(y), y.defaultPrevented || (fx(hx(ya(s)), { select: !0 }), document.activeElement === g && ke(s));
+        s.addEventListener(rn, l), s.dispatchEvent(y), y.defaultPrevented || (fx(hx(ya(s)), { select: !0 }), document.activeElement === g && Se(s));
       }
       return () => {
         s.removeEventListener(rn, l), setTimeout(() => {
           const y = new CustomEvent(on, ui);
-          s.addEventListener(on, d), s.dispatchEvent(y), y.defaultPrevented || ke(g ?? document.body, { select: !0 }), s.removeEventListener(on, d), fi.remove(p);
+          s.addEventListener(on, d), s.dispatchEvent(y), y.defaultPrevented || Se(g ?? document.body, { select: !0 }), s.removeEventListener(on, d), fi.remove(p);
         }, 0);
       };
     }
@@ -9578,7 +9578,7 @@ var rn = "focusScope.autoFocusOnMount", on = "focusScope.autoFocusOnUnmount", ui
       const b = g.key === "Tab" && !g.altKey && !g.ctrlKey && !g.metaKey, y = document.activeElement;
       if (b && y) {
         const $ = g.currentTarget, [_, S] = mx($);
-        _ && S ? !g.shiftKey && y === S ? (g.preventDefault(), o && ke(_, { select: !0 })) : g.shiftKey && y === _ && (g.preventDefault(), o && ke(S, { select: !0 })) : y === $ && g.preventDefault();
+        _ && S ? !g.shiftKey && y === S ? (g.preventDefault(), o && Se(_, { select: !0 })) : g.shiftKey && y === _ && (g.preventDefault(), o && Se(S, { select: !0 })) : y === $ && g.preventDefault();
       }
     },
     [o, i, p.paused]
@@ -9589,7 +9589,7 @@ _r.displayName = dx;
 function fx(t, { select: r = !1 } = {}) {
   const o = document.activeElement;
   for (const i of t)
-    if (ke(i, { select: r }), document.activeElement !== o) return;
+    if (Se(i, { select: r }), document.activeElement !== o) return;
 }
 function mx(t) {
   const r = ya(t), o = di(r, t), i = di(r.reverse(), t);
@@ -9621,7 +9621,7 @@ function gx(t, { upTo: r }) {
 function px(t) {
   return t instanceof HTMLInputElement && "select" in t;
 }
-function ke(t, { select: r = !1 } = {}) {
+function Se(t, { select: r = !1 } = {}) {
   if (t && t.focus) {
     const o = document.activeElement;
     t.focus({ preventScroll: !0 }), t !== o && px(t) && r && t.select();
@@ -10235,13 +10235,13 @@ var kr = "DialogPortal", [i_, Ua] = Pa(kr, {
   forceMount: void 0
 }), Ta = (t) => {
   const { __scopeDialog: r, forceMount: o, children: i, container: e } = t, n = oe(kr, r);
-  return /* @__PURE__ */ c(i_, { scope: r, forceMount: o, children: f.Children.map(i, (a) => /* @__PURE__ */ c(_e, { present: o || n.open, children: /* @__PURE__ */ c(Zt, { asChild: !0, container: e, children: a }) })) });
+  return /* @__PURE__ */ c(i_, { scope: r, forceMount: o, children: f.Children.map(i, (a) => /* @__PURE__ */ c(we, { present: o || n.open, children: /* @__PURE__ */ c(Zt, { asChild: !0, container: e, children: a }) })) });
 };
 Ta.displayName = kr;
 var Tt = "DialogOverlay", Aa = f.forwardRef(
   (t, r) => {
     const o = Ua(Tt, t.__scopeDialog), { forceMount: i = o.forceMount, ...e } = t, n = oe(Tt, t.__scopeDialog);
-    return n.modal ? /* @__PURE__ */ c(_e, { present: i || n.open, children: /* @__PURE__ */ c(a_, { ...e, ref: r }) }) : null;
+    return n.modal ? /* @__PURE__ */ c(we, { present: i || n.open, children: /* @__PURE__ */ c(a_, { ...e, ref: r }) }) : null;
   }
 );
 Aa.displayName = Tt;
@@ -10265,7 +10265,7 @@ var o_ = /* @__PURE__ */ rr("DialogOverlay.RemoveScroll"), a_ = f.forwardRef(
 ), je = "DialogContent", Ra = f.forwardRef(
   (t, r) => {
     const o = Ua(je, t.__scopeDialog), { forceMount: i = o.forceMount, ...e } = t, n = oe(je, t.__scopeDialog);
-    return /* @__PURE__ */ c(_e, { present: i || n.open, children: n.modal ? /* @__PURE__ */ c(s_, { ...e, ref: r }) : /* @__PURE__ */ c(l_, { ...e, ref: r }) });
+    return /* @__PURE__ */ c(we, { present: i || n.open, children: n.modal ? /* @__PURE__ */ c(s_, { ...e, ref: r }) : /* @__PURE__ */ c(l_, { ...e, ref: r }) });
   }
 );
 Ra.displayName = je;
@@ -10674,7 +10674,7 @@ function L_({
 }
 const M_ = (t) => {
   const [r, o] = W(void 0);
-  return Se(() => {
+  return be(() => {
     if (!t) {
       o(void 0);
       return;
@@ -10799,7 +10799,7 @@ const M_ = (t) => {
   te,
   {
     tooltip: "Add Attachment",
-    side: "bottom",
+    side: "top",
     variant: "ghost",
     size: "icon",
     align: "start",
@@ -10809,7 +10809,7 @@ const M_ = (t) => {
   }
 ) }), Cr = () => {
   const { config: t } = K(), r = t.theme ?? {};
-  return ye(() => {
+  return $e(() => {
     const { colorScheme: o = "light" } = r;
     return {
       className: o === "dark" || o === "system" && typeof window < "u" && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : void 0
@@ -10880,13 +10880,13 @@ var Pr = "PopoverPortal", [q_, X_] = Qa(Pr, {
   forceMount: void 0
 }), is = (t) => {
   const { __scopePopover: r, forceMount: o, children: i, container: e } = t, n = Ce(Pr, r);
-  return /* @__PURE__ */ c(q_, { scope: r, forceMount: o, children: /* @__PURE__ */ c(_e, { present: o || n.open, children: /* @__PURE__ */ c(Zt, { asChild: !0, container: e, children: i }) }) });
+  return /* @__PURE__ */ c(q_, { scope: r, forceMount: o, children: /* @__PURE__ */ c(we, { present: o || n.open, children: /* @__PURE__ */ c(Zt, { asChild: !0, container: e, children: i }) }) });
 };
 is.displayName = Pr;
 var Ve = "PopoverContent", os = f.forwardRef(
   (t, r) => {
     const o = X_(Ve, t.__scopePopover), { forceMount: i = o.forceMount, ...e } = t, n = Ce(Ve, t.__scopePopover);
-    return /* @__PURE__ */ c(_e, { present: i || n.open, children: n.modal ? /* @__PURE__ */ c(Q_, { ...e, ref: r }) : /* @__PURE__ */ c(ew, { ...e, ref: r }) });
+    return /* @__PURE__ */ c(we, { present: i || n.open, children: n.modal ? /* @__PURE__ */ c(Q_, { ...e, ref: r }) : /* @__PURE__ */ c(ew, { ...e, ref: r }) });
   }
 );
 os.displayName = Ve;
@@ -11048,19 +11048,19 @@ function uw({
       align: r,
       sideOffset: o,
       className: k(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=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 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=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 z-20 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
         t
       ),
       ...i
     }
   ) });
 }
-const be = [0.23, 1, 0.32, 1], dw = ({ children: t }) => {
+const ye = [0.23, 1, 0.32, 1], dw = ({ children: t }) => {
   const r = Ge(), o = ne(({ message: m }) => m).parts, i = o.filter((m) => m.type === "tool-call"), e = i.some(
     (m) => m.status?.type === "running"
-  ), n = ye(() => e ? /* @__PURE__ */ c(er, { className: "text-muted-foreground size-4 animate-spin" }) : /* @__PURE__ */ c(st, { className: "size-4 text-green-500" }), [e]), { config: a } = K(), [s, u] = W(
+  ), n = $e(() => e ? /* @__PURE__ */ c(er, { className: "text-muted-foreground size-4 animate-spin" }) : /* @__PURE__ */ c(st, { className: "size-4 text-green-500" }), [e]), { config: a } = K(), [s, u] = W(
     a.tools?.expandToolGroupsByDefault ?? !1
-  ), l = De(), d = ye(() => {
+  ), l = De(), d = $e(() => {
     const m = o.filter((v) => v.type === "tool-call");
     return m.length === 0 ? "No tools called" : m.length === 1 ? `Calling ${la(m[0].toolName)}...` : e ? `Calling ${m.length} tools...` : `Executed ${m.length} tools`;
   }, [o, e]);
@@ -11115,7 +11115,7 @@ const be = [0.23, 1, 0.32, 1], dw = ({ children: t }) => {
             initial: { height: 0, opacity: 0, y: -10 },
             animate: { height: "auto", opacity: 1, y: 0 },
             exit: { height: 0, opacity: 0, y: -10 },
-            transition: { duration: 0.3, ease: be },
+            transition: { duration: 0.3, ease: ye },
             style: { overflow: "hidden" },
             children: t
           }
@@ -11207,7 +11207,7 @@ const be = [0.23, 1, 0.32, 1], dw = ({ children: t }) => {
                       initial: { opacity: 0, y: 10 },
                       animate: { opacity: 1, y: 0 },
                       exit: { opacity: 0, y: 10 },
-                      transition: { duration: 0.25, ease: be },
+                      transition: { duration: 0.25, ease: ye },
                       className: k(
                         "aui-thread-welcome-message-motion-1 font-semibold",
                         r("text-title")
@@ -11221,7 +11221,7 @@ const be = [0.23, 1, 0.32, 1], dw = ({ children: t }) => {
                       initial: { opacity: 0, y: 10 },
                       animate: { opacity: 1, y: 0 },
                       exit: { opacity: 0, y: 10 },
-                      transition: { duration: 0.25, delay: 0.05, ease: be },
+                      transition: { duration: 0.25, delay: 0.05, ease: ye },
                       className: k(
                         "aui-thread-welcome-message-motion-2 text-muted-foreground/65",
                         r("text-subtitle")
@@ -11258,7 +11258,7 @@ const be = [0.23, 1, 0.32, 1], dw = ({ children: t }) => {
           transition: {
             duration: 0.25,
             delay: 0.03 * a,
-            ease: be
+            ease: ye
           },
           className: k(
             "aui-thread-welcome-suggestion-display",
@@ -11333,12 +11333,14 @@ const be = [0.23, 1, 0.32, 1], dw = ({ children: t }) => {
   );
 }, vw = () => {
   const { model: t, setModel: r } = K(), [o, i] = W(!1), [e, n] = W(!1), a = he(null), s = he(0), u = he(!1);
-  return Se(() => {
+  return be(() => {
     o && !u.current && requestAnimationFrame(() => {
       const d = a.current;
       d && d.scrollHeight > 0 && (d.scrollTop = s.current);
     }), u.current = o;
-  }, [o]), /* @__PURE__ */ c(aa, { children: /* @__PURE__ */ O(vr, { open: e, onOpenChange: n, children: [
+  }, [o]), be(() => {
+    o && n(!1);
+  }, [o]), /* @__PURE__ */ c(aa, { children: /* @__PURE__ */ O(vr, { open: e && !o, onOpenChange: n, children: [
     /* @__PURE__ */ O(lw, { open: o, onOpenChange: i, children: [
       /* @__PURE__ */ c(hr, { asChild: !0, children: /* @__PURE__ */ c(cw, { asChild: !0, children: /* @__PURE__ */ c(
         me,
@@ -11348,7 +11350,6 @@ const be = [0.23, 1, 0.32, 1], dw = ({ children: t }) => {
           "data-state": o ? "open" : "closed",
           className: "aui-composer-model-picker data-[state=open]:bg-muted-foreground/15 dark:border-muted-foreground/15 dark:hover:bg-muted-foreground/30 flex w-fit items-center gap-2 rounded-full px-2.5 py-1 text-xs font-semibold",
           "aria-label": "Model Settings",
-          onPointerUp: (d) => d.stopPropagation(),
           children: /* @__PURE__ */ c(ob, { className: "aui-attachment-add-icon size-5 stroke-[1.5px]" })
         }
       ) }) }),
@@ -11551,17 +11552,17 @@ const be = [0.23, 1, 0.32, 1], dw = ({ children: t }) => {
 }, Sw = {
   layout: {
     duration: 0.25,
-    ease: be
+    ease: ye
   }
 }, Iw = () => {
-  const { config: t } = K(), r = Cr(), o = Ge(), i = De(), [e, n] = W(t.modal?.defaultOpen ?? !1), { expandable: a, isExpanded: s, setIsExpanded: u } = us(), l = t.modal?.title, d = t.modal?.icon, m = t.modal?.position ?? "bottom-right", v = Nw(m), p = ye(
+  const { config: t } = K(), r = Cr(), o = Ge(), i = De(), [e, n] = W(t.modal?.defaultOpen ?? !1), { expandable: a, isExpanded: s, setIsExpanded: u } = us(), l = t.modal?.title, d = t.modal?.icon, m = t.modal?.position ?? "bottom-right", v = Nw(m), p = $e(
     () => t.modal?.dimensions?.default ?? {
       width: "500px",
       height: "600px",
       maxHeight: "95vh"
     },
     [t.modal?.dimensions?.default]
-  ), h = ye(
+  ), h = $e(
     () => t.modal?.dimensions?.expanded ?? {
       width: "70vw",
       height: "90vh"
@@ -11574,7 +11575,7 @@ const be = [0.23, 1, 0.32, 1], dw = ({ children: t }) => {
     "div",
     {
       className: k(
-        "aui-root aui-modal-anchor fixed z-[9999]",
+        "aui-root aui-modal-anchor fixed z-10",
         v,
         r.className,
         o("lg"),
@@ -11611,7 +11612,7 @@ const be = [0.23, 1, 0.32, 1], dw = ({ children: t }) => {
                 transition: {
                   duration: 0.2,
                   delay: 0.1,
-                  ease: be
+                  ease: ye
                 },
                 children: [
                   /* @__PURE__ */ c("div", { className: k("flex min-w-0 items-center"), children: /* @__PURE__ */ O(
@@ -11683,7 +11684,7 @@ const be = [0.23, 1, 0.32, 1], dw = ({ children: t }) => {
                 transition: {
                   duration: 0.2,
                   delay: 0.05,
-                  ease: be
+                  ease: ye
                 },
                 children: /* @__PURE__ */ c(Er, {})
               }
@@ -11710,7 +11711,8 @@ const be = [0.23, 1, 0.32, 1], dw = ({ children: t }) => {
               initial: { opacity: 0, scale: 0.8 },
               animate: { opacity: 1, scale: 1 },
               exit: { opacity: 0, scale: 0.8 },
-              transition: { duration: 0.2, ease: be },
+              transition: { duration: 0.2, ease: ye },
+              className: "flex size-full items-center justify-center",
               children: d ? d("closed") : /* @__PURE__ */ c(Vh, { className: "size-6" })
             }
           )
@@ -11749,7 +11751,7 @@ const Ow = () => {
         width: n ? e?.expanded?.width ?? "800px" : e?.default?.width ?? "400px",
         height: n ? e?.expanded?.height ?? "100%" : e?.default?.height ?? "100vh"
       },
-      transition: { duration: 0.3, ease: be },
+      transition: { duration: 0.3, ease: ye },
       className: k(
         "aui-root aui-sidecar bg-popover text-popover-foreground fixed top-0 right-0 border-l",
         r.className

package/dist/index.d.ts

@@ -3,5 +3,5 @@ export { useElements as useGramElements } from './hooks/useElements';
 export { Chat } from './components/Chat';
 export { defineFrontendTool } from './lib/tools';
 export type { FrontendTool } from './lib/tools';
-export type { ElementsConfig, ComposerConfig, AttachmentsConfig, ModalConfig, SidecarConfig, ToolsConfig, ModelConfig, ThemeConfig, WelcomeConfig, Suggestion, Model, ModalTriggerPosition, ColorScheme, Radius, Density, Variant, Dimensions, Dimension, } from './types';
+export type { ElementsProviderProps, ElementsConfig, ComposerConfig, AttachmentsConfig, ModalConfig, SidecarConfig, ToolsConfig, ModelConfig, ThemeConfig, WelcomeConfig, Suggestion, Model, ModalTriggerPosition, ColorScheme, Radius, Density, Variant, Dimensions, Dimension, ComponentOverrides, } from './types';
 export type { Plugin } from './types/plugins';