@photon-ai/pho-ui 4.12.0 → 4.13.0

package/dist/chunks/{chat-CU3XVm99.js → chat-Bu8UyIbT.js}

@@ -1,19 +1,20 @@
 "use client";
-import { t as x } from "./cn-ChIgwEl3.js";
-import { n as oe } from "./link-provider-DXzDQ08N.js";
-import { FADE_SWAP as K, PRESS_SCALE_ROW as se, SPRING_PRESS as le, TRAVEL_LINEAR as ce } from "../motion.js";
+import { t as f } from "./cn-ChIgwEl3.js";
+import { n as se } from "./link-provider-DXzDQ08N.js";
+import { FADE_SWAP as K, PRESS_SCALE_ROW as oe, SPRING_PRESS as le, TRAVEL_LINEAR as ce } from "../motion.js";
 import { a as z } from "./button-C9VqBBIr.js";
-import { t as I } from "./createReactComponent-BqCmnqfX.js";
+import { t as M } from "./createReactComponent-BqCmnqfX.js";
 import { t as de } from "./input-fFWvPJOf.js";
 import { n as B } from "./avatar-BkmGDIqf.js";
 import { t as ue } from "./IconSearch-BKAHkLyX.js";
 import { t as C } from "./scroll-area-DSwD9th7.js";
 import { i as pe } from "./status-view-C8tabjDu.js";
-import { t as S } from "./skeleton-DwjSl4vC.js";
-import { createContext as he, useCallback as G, useContext as fe, useEffect as me, useId as xe, useLayoutEffect as ve, useMemo as Q, useRef as k, useState as R } from "react";
+import { t as _ } from "./skeleton-DwjSl4vC.js";
+import { n as he } from "./box-search-C9EVZgcb.js";
+import { createContext as fe, useCallback as G, useContext as me, useEffect as ve, useId as xe, useLayoutEffect as we, useMemo as J, useRef as S, useState as P } from "react";
 import { Fragment as Y, jsx as e, jsxs as y } from "react/jsx-runtime";
-import { AnimatePresence as be, motion as M, useReducedMotion as Z } from "motion/react";
-var we = [
+import { AnimatePresence as ge, motion as I, useReducedMotion as Z } from "motion/react";
+var be = [
   ["path", {
     d: "M5 12l14 0",
     key: "svg-0"
@@ -26,7 +27,7 @@ var we = [
     d: "M5 12l6 -6",
     key: "svg-2"
   }]
-], ge = I("outline", "arrow-left", "ArrowLeft", we), ye = [
+], ye = M("outline", "arrow-left", "ArrowLeft", be), Ne = [
   ["path", {
     d: "M12 5l0 14",
     key: "svg-0"
@@ -39,13 +40,13 @@ var we = [
     d: "M6 11l6 -6",
     key: "svg-2"
   }]
-], Ne = I("outline", "arrow-up", "ArrowUp", ye), Ce = [["path", {
+], Ce = M("outline", "arrow-up", "ArrowUp", Ne), Se = [["path", {
   d: "M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0",
   key: "svg-0"
 }], ["path", {
   d: "M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2",
   key: "svg-1"
-}]], ke = I("outline", "user", "User", Ce), Se = [
+}]], _e = M("outline", "user", "User", Se), ke = [
   ["path", {
     d: "M5 7a4 4 0 1 0 8 0a4 4 0 1 0 -8 0",
     key: "svg-0"
@@ -62,23 +63,23 @@ var we = [
     d: "M21 21v-2a4 4 0 0 0 -3 -3.85",
     key: "svg-3"
   }]
-], _e = I("outline", "users", "Users", Se), Pe = "rounded-base border border-pho-secondary bg-pho-primary", Re = 672, Ae = 24, Ee = 8, ee = "min-h-[61px]", Me = 273, _ = 256, O = 320, Ie = 16;
-function q(t, r) {
-  const a = Math.max(_, t);
-  return r <= 0 ? Number.isFinite(a) ? a : _ : Math.min(a, Math.max(_, r - O));
+], Re = M("outline", "users", "Users", ke), Pe = "rounded-base border border-pho-secondary bg-pho-primary", Ae = 672, Ee = 24, Ie = 8, ee = "min-h-[61px]", Me = 273, k = 256, O = 320, Le = 16;
+function Q(t, r) {
+  const a = Math.max(k, t);
+  return r <= 0 ? Number.isFinite(a) ? a : k : Math.min(a, Math.max(k, r - O));
 }
-var te = he(null);
+var te = fe(null);
 function A(t) {
-  const r = fe(te);
+  const r = me(te);
   if (r == null) throw new Error(`Chat.${t} must be used inside Chat.Root`);
   return r;
 }
-var D = typeof window > "u" ? me : ve;
+var D = typeof window > "u" ? ve : we;
 function T(t) {
   return t === "thread" ? 1 : -1;
 }
-function Le(t, r) {
-  return t === "compact" || t === "auto" && r > 0 && r < Re;
+function Te(t, r) {
+  return t === "compact" || t === "auto" && r > 0 && r < Ae;
 }
 function E(t, r) {
   return r ? {
@@ -88,7 +89,7 @@ function E(t, r) {
     transition: { duration: 0 }
   } : {
     initial: {
-      x: t * Ae,
+      x: t * Ee,
       opacity: 0,
       filter: "blur(1px)"
     },
@@ -98,7 +99,7 @@ function E(t, r) {
       filter: "blur(0px)"
     },
     exit: {
-      x: -t * Ee,
+      x: -t * Ie,
       opacity: 0,
       filter: "blur(1px)"
     },
@@ -109,84 +110,84 @@ function E(t, r) {
     }
   };
 }
-function Te(t) {
+function Oe(t) {
   return {
     enter: (r) => E(r, t).initial,
     rest: (r) => E(r, t).animate,
     leave: (r) => E(r, t).exit
   };
 }
-function re({ as: t, show: r, swapped: a, direction: l, reduceMotion: o, children: c, ...s }) {
-  const u = E(l, o), f = {
-    custom: l,
-    variants: Te(o),
+function re({ as: t, show: r, swapped: a, direction: o, reduceMotion: s, children: c, ...l }) {
+  const u = E(o, s), m = {
+    custom: o,
+    variants: Oe(s),
     initial: "enter",
     animate: "rest",
     exit: "leave",
     transition: u.transition
   };
-  return /* @__PURE__ */ e(be, {
+  return /* @__PURE__ */ e(ge, {
     initial: !a && r ? !1 : void 0,
     mode: "popLayout",
-    custom: l,
-    children: r ? t === "aside" ? /* @__PURE__ */ e(M.aside, {
-      ...s,
-      ...f,
+    custom: o,
+    children: r ? t === "aside" ? /* @__PURE__ */ e(I.aside, {
+      ...l,
+      ...m,
       children: c
-    }, "list") : /* @__PURE__ */ e(M.section, {
-      ...s,
-      ...f,
+    }, "list") : /* @__PURE__ */ e(I.section, {
+      ...l,
+      ...m,
       children: c
     }, "thread") : null
   });
 }
-function Oe({ layout: t = "default", pane: r, defaultPane: a = "list", onPaneChange: l, className: o, style: c, ref: s, ...u }) {
-  const [f, m] = R(a), [g, w] = R(Me), [i, n] = R(0), p = k(null), v = r !== void 0, h = v ? r : f, [b, d] = R(() => T(h)), [W, ae] = R(!1), H = k(h);
-  let P = b, L = W;
-  H.current !== h && (P = T(h), L = !0, H.current = h, P !== b && d(P), W || ae(!0));
-  const V = G((N) => {
-    d(T(N)), v || m(N), l?.(N);
-  }, [v, l]), X = G((N) => {
-    w(q(N, p.current?.clientWidth ?? 0));
-  }, []), U = Le(t, i);
+function ze({ layout: t = "default", pane: r, defaultPane: a = "list", onPaneChange: o, className: s, style: c, ref: l, ...u }) {
+  const [m, v] = P(a), [b, g] = P(Me), [i, n] = P(0), p = S(null), x = r !== void 0, h = x ? r : m, [w, d] = P(() => T(h)), [W, ae] = P(!1), H = S(h);
+  let R = w, L = W;
+  H.current !== h && (R = T(h), L = !0, H.current = h, R !== w && d(R), W || ae(!0));
+  const U = G((N) => {
+    d(T(N)), x || v(N), o?.(N);
+  }, [x, o]), V = G((N) => {
+    g(Q(N, p.current?.clientWidth ?? 0));
+  }, []), X = Te(t, i);
   D(() => {
     const N = p.current;
     if (!N || typeof ResizeObserver > "u") return;
-    const $ = () => {
+    const F = () => {
       const j = N.clientWidth;
-      n(j), w((ie) => q(ie, j));
+      n(j), g((ie) => Q(ie, j));
     };
-    $();
-    const F = new ResizeObserver($);
-    return F.observe(N), () => F.disconnect();
+    F();
+    const $ = new ResizeObserver(F);
+    return $.observe(N), () => $.disconnect();
   }, []);
-  const ne = Q(() => ({
+  const ne = J(() => ({
     layout: t,
     pane: h,
-    setPane: V,
-    direction: P,
-    swap: U,
+    setPane: U,
+    direction: R,
+    swap: X,
     swapped: L,
-    listWidth: g,
+    listWidth: b,
     frameWidth: i,
-    resizeList: X,
+    resizeList: V,
     rootRef: p
   }), [
     t,
     h,
-    V,
-    P,
     U,
+    R,
+    X,
     L,
-    g,
+    b,
     i,
-    X
+    V
   ]);
   return /* @__PURE__ */ e(te.Provider, {
     value: ne,
     children: /* @__PURE__ */ e("div", {
       ref: (N) => {
-        p.current = N, typeof s == "function" ? s(N) : s && (s.current = N);
+        p.current = N, typeof l == "function" ? l(N) : l && (l.current = N);
       },
       "data-chat": "",
       "data-basic-page-card": "",
@@ -194,27 +195,27 @@ function Oe({ layout: t = "default", pane: r, defaultPane: a = "list", onPaneCha
       "data-pane": h,
       style: {
         ...c,
-        "--chat-list-width": `${g}px`
+        "--chat-list-width": `${b}px`
       },
-      className: x(Pe, "@container relative flex min-h-0 min-w-0 overflow-hidden", o),
+      className: f(Pe, "@container relative flex min-h-0 min-w-0 overflow-hidden", s),
       ...u
     })
   });
 }
-function ze({ className: t, children: r, id: a, ...l }) {
-  const { layout: o, pane: c, direction: s, swap: u, swapped: f } = A("List"), m = Z(), g = xe(), w = a ?? g, i = x("border-pho-secondary bg-pho-page relative z-10 flex min-h-0 shrink-0 flex-col", o === "default" && "min-w-64 w-[var(--chat-list-width)] border-r", o === "compact" && "w-full", o === "auto" && x("w-full @2xl:min-w-64 @2xl:w-[var(--chat-list-width)] @2xl:border-r", !u && c === "thread" && "@max-2xl:hidden"), t), n = /* @__PURE__ */ y(Y, { children: [r, o !== "compact" && /* @__PURE__ */ e(De, { controlsId: w })] }), p = {
-    id: w,
+function De({ className: t, children: r, id: a, ...o }) {
+  const { layout: s, pane: c, direction: l, swap: u, swapped: m } = A("List"), v = Z(), b = xe(), g = a ?? b, i = f("border-pho-secondary bg-pho-page relative z-10 flex min-h-0 shrink-0 flex-col", s === "default" && "min-w-64 w-[var(--chat-list-width)] border-r", s === "compact" && "w-full", s === "auto" && f("w-full @2xl:min-w-64 @2xl:w-[var(--chat-list-width)] @2xl:border-r", !u && c === "thread" && "@max-2xl:hidden"), t), n = /* @__PURE__ */ y(Y, { children: [r, s !== "compact" && /* @__PURE__ */ e(We, { controlsId: g })] }), p = {
+    id: g,
     "aria-label": "Conversations",
     "data-chat-list": "",
     className: i,
-    ...l
+    ...o
   };
   return u ? /* @__PURE__ */ e(re, {
     as: "aside",
     show: c === "list",
-    swapped: f,
-    direction: s,
-    reduceMotion: m,
+    swapped: m,
+    direction: l,
+    reduceMotion: v,
     ...p,
     children: n
   }) : /* @__PURE__ */ e("aside", {
@@ -222,71 +223,72 @@ function ze({ className: t, children: r, id: a, ...l }) {
     children: n
   });
 }
-function De({ controlsId: t }) {
-  const { layout: r, listWidth: a, frameWidth: l, resizeList: o, rootRef: c } = A("Splitter"), s = k(null), u = (i) => {
-    i.button === 0 && (i.currentTarget.setPointerCapture?.(i.pointerId), s.current = {
+function We({ controlsId: t }) {
+  const { layout: r, listWidth: a, frameWidth: o, resizeList: s, rootRef: c } = A("Splitter"), l = S(null), u = (i) => {
+    i.button === 0 && (i.currentTarget.setPointerCapture?.(i.pointerId), l.current = {
       x: i.clientX,
       width: a
     });
-  }, f = (i) => {
-    const n = s.current;
+  }, m = (i) => {
+    const n = l.current;
     if (n == null) return;
-    const p = c.current, v = p != null && getComputedStyle(p).direction === "rtl", h = (i.clientX - n.x) * (v ? -1 : 1);
-    o(n.width + h);
-  }, m = () => {
-    s.current = null;
-  }, g = (i) => {
-    const n = c.current, p = n != null && getComputedStyle(n).direction === "rtl", v = p ? "ArrowRight" : "ArrowLeft", h = p ? "ArrowLeft" : "ArrowRight", b = i.shiftKey ? 32 : Ie;
-    if (i.key === v)
-      i.preventDefault(), o(a - b);
+    const p = c.current, x = p != null && getComputedStyle(p).direction === "rtl", h = (i.clientX - n.x) * (x ? -1 : 1);
+    s(n.width + h);
+  }, v = () => {
+    l.current = null;
+  }, b = (i) => {
+    const n = c.current, p = n != null && getComputedStyle(n).direction === "rtl", x = p ? "ArrowRight" : "ArrowLeft", h = p ? "ArrowLeft" : "ArrowRight", w = i.shiftKey ? 32 : Le;
+    if (i.key === x)
+      i.preventDefault(), s(a - w);
     else if (i.key === h)
-      i.preventDefault(), o(a + b);
+      i.preventDefault(), s(a + w);
     else if (i.key === "Home")
-      i.preventDefault(), o(_);
+      i.preventDefault(), s(k);
     else if (i.key === "End") {
       i.preventDefault();
       const d = n?.clientWidth ?? 0;
-      d > 0 && o(d - O);
+      d > 0 && s(d - O);
     }
-  }, w = l > 0 ? Math.max(_, l - O) : a;
+  }, g = o > 0 ? Math.max(k, o - O) : a;
   return /* @__PURE__ */ e("div", {
     role: "separator",
     "aria-orientation": "vertical",
     "aria-label": "Resize conversation list",
     "aria-controls": t,
     "aria-valuenow": a,
-    "aria-valuemin": _,
-    "aria-valuemax": w,
+    "aria-valuemin": k,
+    "aria-valuemax": g,
     "aria-valuetext": `${a} pixels`,
     tabIndex: 0,
     "data-chat-splitter": "",
     onPointerDown: u,
-    onPointerMove: f,
-    onPointerUp: m,
-    onPointerCancel: m,
-    onKeyDown: g,
-    className: x("absolute inset-y-0 -right-3 z-10 w-6 cursor-col-resize touch-none select-none", "outline-pho-brand focus-visible:outline-2 focus-visible:-outline-offset-2", "after:absolute after:inset-y-0 after:left-1/2 after:w-px after:-translate-x-1/2 after:bg-transparent", "[@media(hover:hover)]:hover:after:bg-pho-brand focus-visible:after:bg-pho-brand", r === "auto" && "@max-2xl:hidden")
+    onPointerMove: m,
+    onPointerUp: v,
+    onPointerCancel: v,
+    onKeyDown: b,
+    className: f("absolute inset-y-0 -right-3 z-10 w-6 cursor-col-resize touch-none select-none", "outline-pho-brand focus-visible:outline-2 focus-visible:-outline-offset-2", "after:absolute after:inset-y-0 after:left-1/2 after:w-px after:-translate-x-1/2 after:bg-transparent", "[@media(hover:hover)]:hover:after:bg-pho-brand focus-visible:after:bg-pho-brand", r === "auto" && "@max-2xl:hidden")
   });
 }
-function We({ className: t, placeholder: r = "Search", ...a }) {
+function He({ className: t, wrapperClassName: r, placeholder: a = "Search", ...o }) {
   return /* @__PURE__ */ e("div", {
     "data-chat-search": "",
-    className: x("p-3", ee, t),
+    className: f("p-3", ee, t),
     children: /* @__PURE__ */ e(de, {
       size: "sm",
       icon: ue,
-      placeholder: r,
+      placeholder: a,
       "aria-label": "Search conversations",
       autoComplete: "off",
       spellCheck: !1,
-      ...a
+      wrapperClassName: f(he, "[&:focus-within>svg]:text-pho-primary [&>svg]:transition-colors [&>svg]:duration-100", r),
+      ...o
     })
   });
 }
-function He({ className: t, children: r, ...a }) {
+function Ue({ className: t, children: r, ...a }) {
   return /* @__PURE__ */ e("div", {
     "data-chat-conversations": "",
-    className: x("flex min-h-0 flex-1 flex-col", t),
+    className: f("flex min-h-0 flex-1 flex-col", t),
     ...a,
     children: /* @__PURE__ */ y(C.Root, {
       className: "min-h-0 flex-1",
@@ -301,24 +303,24 @@ function He({ className: t, children: r, ...a }) {
 function Ve({ className: t, ...r }) {
   return /* @__PURE__ */ e("ul", {
     "data-chat-conversation-list": "",
-    className: x("m-0 flex list-none flex-col gap-0.5 *:m-0", t),
+    className: f("m-0 flex list-none flex-col gap-0.5 *:m-0", t),
     ...r
   });
 }
-var Xe = "outline-pho-brand rounded-base flex w-full cursor-pointer items-center gap-3 px-2 py-2.5 text-left transition-colors focus-visible:outline-2 focus-visible:-outline-offset-1", Ue = "bg-pho-primary text-pho-primary ring-pho-secondary ring-1 ring-inset *:data-icon:text-pho-primary", $e = "hover:bg-pho-ghost-hover", J = {
+var Xe = "outline-pho-brand rounded-base flex w-full cursor-pointer items-center gap-3 px-2 py-2.5 text-left transition-colors focus-visible:outline-2 focus-visible:-outline-offset-1", Fe = "bg-pho-primary text-pho-primary ring-pho-secondary ring-1 ring-inset *:data-icon:text-pho-primary", $e = "hover:bg-pho-ghost-hover", q = {
   initial: !1,
-  whileTap: { scale: se },
+  whileTap: { scale: oe },
   transition: le
 };
-function Fe({ title: t, time: r, preview: a, avatar: l, group: o, active: c, className: s, href: u, onClick: f, ...m }) {
-  const { layout: g, setPane: w } = A("Conversation"), i = oe(), n = Q(() => M.create(i), [i]), p = x(Xe, c ? Ue : $e, s), v = () => {
-    g !== "default" && w("thread");
-  }, h = /* @__PURE__ */ y(Y, { children: [l ?? /* @__PURE__ */ e(B.Root, {
+function je({ title: t, time: r, preview: a, avatar: o, group: s, active: c, className: l, href: u, onClick: m, ...v }) {
+  const { layout: b, setPane: g } = A("Conversation"), i = se(), n = J(() => I.create(i), [i]), p = f(Xe, c ? Fe : $e, l), x = () => {
+    b !== "default" && g("thread");
+  }, h = /* @__PURE__ */ y(Y, { children: [o ?? /* @__PURE__ */ e(B.Root, {
     size: "sm",
-    children: /* @__PURE__ */ e(B.Fallback, { children: o ? /* @__PURE__ */ e(_e, {
+    children: /* @__PURE__ */ e(B.Fallback, { children: s ? /* @__PURE__ */ e(Re, {
       className: "size-4",
       "aria-hidden": !0
-    }) : /* @__PURE__ */ e(ke, {
+    }) : /* @__PURE__ */ e(_e, {
       className: "size-4",
       "aria-hidden": !0
     }) })
@@ -341,68 +343,68 @@ function Fe({ title: t, time: r, preview: a, avatar: l, group: o, active: c, cla
   return u !== void 0 ? /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(n, {
     href: u,
     "aria-current": c ? "page" : void 0,
-    ...m,
-    onClick: (b) => {
-      f?.(b), b.defaultPrevented || v();
+    ...v,
+    onClick: (w) => {
+      m?.(w), w.defaultPrevented || x();
     },
     className: p,
-    ...J,
+    ...q,
     children: h
-  }) }) : /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(M.button, {
+  }) }) : /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(I.button, {
     type: "button",
     "aria-current": c ? "true" : void 0,
-    ...m,
-    onClick: (b) => {
-      f?.(b), b.defaultPrevented || v();
+    ...v,
+    onClick: (w) => {
+      m?.(w), w.defaultPrevented || x();
     },
     className: p,
-    ...J,
+    ...q,
     children: h
   }) });
 }
-function je({ className: t, children: r, ...a }) {
-  const { layout: l, pane: o, direction: c, swap: s, swapped: u } = A("Thread"), f = Z(), m = x("bg-pho-primary flex min-h-0 flex-1 flex-col", l === "default" && "min-w-80", l === "compact" && "min-w-0", l === "auto" && "min-w-0 @2xl:min-w-80", !s && l === "auto" && o === "list" && "@max-2xl:hidden", t);
-  return s ? /* @__PURE__ */ e(re, {
+function Ke({ className: t, children: r, ...a }) {
+  const { layout: o, pane: s, direction: c, swap: l, swapped: u } = A("Thread"), m = Z(), v = f("bg-pho-primary flex min-h-0 flex-1 flex-col", o === "default" && "min-w-80", o === "compact" && "min-w-0", o === "auto" && "min-w-0 @2xl:min-w-80", !l && o === "auto" && s === "list" && "@max-2xl:hidden", t);
+  return l ? /* @__PURE__ */ e(re, {
     as: "section",
-    show: o === "thread",
+    show: s === "thread",
     swapped: u,
     direction: c,
-    reduceMotion: f,
+    reduceMotion: m,
     "aria-label": "Conversation",
     "data-chat-thread": "",
-    className: m,
+    className: v,
     ...a,
     children: r
   }) : /* @__PURE__ */ e("section", {
     "aria-label": "Conversation",
     "data-chat-thread": "",
-    className: m,
+    className: v,
     ...a,
     children: r
   });
 }
-function Ke({ avatar: t, actions: r, backLabel: a = "Back to conversations", className: l, children: o, ...c }) {
-  const { layout: s, setPane: u } = A("Header");
+function Be({ avatar: t, actions: r, backLabel: a = "Back to conversations", className: o, children: s, ...c }) {
+  const { layout: l, setPane: u } = A("Header");
   return /* @__PURE__ */ y("header", {
     "data-chat-header": "",
-    className: x("flex shrink-0 items-center gap-3 px-4 py-1.5", ee, l),
+    className: f("flex shrink-0 items-center gap-3 px-4 py-1.5", ee, o),
     ...c,
     children: [
-      s !== "default" && /* @__PURE__ */ e(z, {
+      l !== "default" && /* @__PURE__ */ e(z, {
         variant: "ghost",
         size: "sm",
         shape: "circle",
         svgOnly: !0,
         "aria-label": a,
         "data-chat-back": "",
-        className: x("-ml-1 shrink-0", s === "auto" && "@2xl:hidden"),
+        className: f("-ml-1 shrink-0", l === "auto" && "@2xl:hidden"),
         onClick: () => u("list"),
-        children: /* @__PURE__ */ e(ge, {})
+        children: /* @__PURE__ */ e(ye, {})
       }),
       t,
       /* @__PURE__ */ e("div", {
         className: "flex min-w-0 flex-1 flex-col",
-        children: o
+        children: s
       }),
       r != null && /* @__PURE__ */ e("div", {
         className: "flex shrink-0 items-center gap-1",
@@ -411,60 +413,60 @@ function Ke({ avatar: t, actions: r, backLabel: a = "Back to conversations", cla
     ]
   });
 }
-function Be({ className: t, children: r, ...a }) {
+function Ge({ className: t, children: r, ...a }) {
   return /* @__PURE__ */ e("h2", {
     "data-chat-title": "",
-    className: x("text-pho-primary m-0 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5 overflow-visible text-base font-medium", t),
+    className: f("text-pho-primary m-0 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5 overflow-visible text-base font-medium", t),
     ...a,
     children: r
   });
 }
-function Ge({ className: t, ...r }) {
+function Qe({ className: t, ...r }) {
   return /* @__PURE__ */ e("p", {
     "data-chat-description": "",
-    className: x("text-pho-description m-0 min-w-0 truncate text-xs", t),
+    className: f("text-pho-description m-0 min-w-0 truncate text-xs", t),
     ...r
   });
 }
 var qe = 40;
-function Je({ hasEarlier: t = !1, loadingEarlier: r = !1, onLoadEarlier: a, earlierLabel: l = "Load earlier messages", className: o, children: c, ...s }) {
-  const u = k(null), f = k(null), m = k(!0), g = k(null);
+function Je({ hasEarlier: t = !1, loadingEarlier: r = !1, onLoadEarlier: a, earlierLabel: o = "Load earlier messages", className: s, children: c, ...l }) {
+  const u = S(null), m = S(null), v = S(!0), b = S(null);
   D(() => {
-    const n = u.current, p = f.current;
+    const n = u.current, p = m.current;
     if (!n || !p) return;
-    const v = () => {
-      const b = g.current;
-      if (b) {
-        g.current = null, n.scrollTop = n.scrollHeight - b.height + b.top;
+    const x = () => {
+      const w = b.current;
+      if (w) {
+        b.current = null, n.scrollTop = n.scrollHeight - w.height + w.top;
         return;
       }
-      m.current && (n.scrollTop = n.scrollHeight);
+      v.current && (n.scrollTop = n.scrollHeight);
     };
-    if (v(), typeof ResizeObserver > "u") return;
-    const h = new ResizeObserver(v);
+    if (x(), typeof ResizeObserver > "u") return;
+    const h = new ResizeObserver(x);
     return h.observe(p), h.observe(n), () => h.disconnect();
   }, []);
-  const w = () => {
+  const g = () => {
     const n = u.current;
-    n && (m.current = n.scrollHeight - n.scrollTop - n.clientHeight < qe);
+    n && (v.current = n.scrollHeight - n.scrollTop - n.clientHeight < qe);
   }, i = () => {
     const n = u.current;
-    n && (g.current = {
+    n && (b.current = {
       height: n.scrollHeight,
       top: n.scrollTop
-    }), m.current = !1, a?.();
+    }), v.current = !1, a?.();
   };
   return /* @__PURE__ */ e("div", {
     "data-chat-messages": "",
-    className: x("flex min-h-0 flex-1 flex-col [--pho-bubble-backdrop:var(--background-color-pho-primary)]", o),
-    ...s,
+    className: f("flex min-h-0 flex-1 flex-col [--pho-bubble-backdrop:var(--background-color-pho-primary)]", s),
+    ...l,
     children: /* @__PURE__ */ y(C.Root, {
       className: "min-h-0 flex-1",
       children: [/* @__PURE__ */ e(C.Viewport, {
         ref: u,
-        onScroll: w,
+        onScroll: g,
         children: /* @__PURE__ */ y(C.Content, {
-          ref: f,
+          ref: m,
           style: { minWidth: 0 },
           className: "flex min-h-full flex-col gap-1 p-4",
           children: [t && /* @__PURE__ */ e("div", {
@@ -474,7 +476,7 @@ function Je({ hasEarlier: t = !1, loadingEarlier: r = !1, onLoadEarlier: a, earl
               size: "sm",
               loading: r,
               onClick: i,
-              children: l
+              children: o
             })
           }), c]
         })
@@ -482,53 +484,53 @@ function Je({ hasEarlier: t = !1, loadingEarlier: r = !1, onLoadEarlier: a, earl
     })
   });
 }
-function Qe({ className: t, children: r, ...a }) {
+function Ye({ className: t, children: r, ...a }) {
   return /* @__PURE__ */ e("div", {
     "data-chat-divider": "",
-    className: x("text-pho-description py-1 text-center text-xs", t),
+    className: f("text-pho-description py-1 text-center text-xs", t),
     ...a,
     children: r
   });
 }
-function Ye({ className: t, ...r }) {
+function Ze({ className: t, ...r }) {
   return /* @__PURE__ */ e("footer", {
     "data-chat-footer": "",
-    className: x("shrink-0 px-4 py-3", t),
+    className: f("shrink-0 px-4 py-3", t),
     ...r
   });
 }
-var Ze = 200;
-function et({ value: t, onValueChange: r, onSend: a, placeholder: l = "Message", sending: o = !1, disabled: c = !1, canSend: s, prefix: u, meta: f, sendLabel: m = "Send", children: g, textareaRef: w, className: i, ...n }) {
-  const p = k(null), v = !o && !c && (s ?? t.trim().length > 0);
+var et = 200;
+function tt({ value: t, onValueChange: r, onSend: a, placeholder: o = "Message", sending: s = !1, disabled: c = !1, canSend: l, prefix: u, meta: m, sendLabel: v = "Send", children: b, textareaRef: g, className: i, ...n }) {
+  const p = S(null), x = !s && !c && (l ?? t.trim().length > 0);
   D(() => {
     const d = p.current;
-    d && (d.style.height = "0px", d.style.height = `${Math.min(d.scrollHeight, Ze)}px`);
+    d && (d.style.height = "0px", d.style.height = `${Math.min(d.scrollHeight, et)}px`);
   }, [t]);
   const h = (d) => {
-    d.preventDefault(), v && a();
-  }, b = (d) => {
-    d.key === "Enter" && !d.shiftKey && !d.nativeEvent.isComposing && (d.preventDefault(), v && a());
+    d.preventDefault(), x && a();
+  }, w = (d) => {
+    d.key === "Enter" && !d.shiftKey && !d.nativeEvent.isComposing && (d.preventDefault(), x && a());
   };
   return /* @__PURE__ */ y("form", {
     "aria-label": "Message composer",
     "data-chat-composer": "",
     onSubmit: h,
-    className: x("rounded-base bg-pho-primary ring-pho-primary focus-within:ring-pho-brand ring-1 transition-shadow duration-100 ease-linear ring-inset focus-within:ring-2", c && "opacity-50", i),
+    className: f("rounded-base bg-pho-primary ring-pho-primary focus-within:ring-pho-brand ring-1 transition-shadow duration-100 ease-linear ring-inset focus-within:ring-2", c && "opacity-50", i),
     ...n,
     children: [
-      g,
+      b,
       /* @__PURE__ */ e("textarea", {
         ref: (d) => {
-          p.current = d, typeof w == "function" ? w(d) : w && (w.current = d);
+          p.current = d, typeof g == "function" ? g(d) : g && (g.current = d);
         },
         value: t,
         onChange: (d) => r(d.target.value),
-        onKeyDown: b,
+        onKeyDown: w,
         rows: 1,
-        placeholder: l,
+        placeholder: o,
         "aria-label": "Message",
         disabled: c,
-        readOnly: o,
+        readOnly: s,
         className: "text-pho-primary placeholder:text-pho-placeholder m-0 block w-full resize-none bg-transparent px-4 pt-3 pb-1 text-base outline-none disabled:cursor-not-allowed"
       }),
       /* @__PURE__ */ y("div", {
@@ -537,83 +539,83 @@ function et({ value: t, onValueChange: r, onSend: a, placeholder: l = "Message",
           u,
           /* @__PURE__ */ e("p", {
             className: "text-pho-description m-0 min-w-0 flex-1 truncate text-xs",
-            children: f
+            children: m
           }),
           /* @__PURE__ */ e(z, {
             type: "submit",
             size: "sm",
             shape: "circle",
             svgOnly: !0,
-            "aria-label": m,
-            disabled: !v,
-            loading: o,
-            children: /* @__PURE__ */ e(Ne, {})
+            "aria-label": v,
+            disabled: !x,
+            loading: s,
+            children: /* @__PURE__ */ e(Ce, {})
           })
         ]
       })
     ]
   });
 }
-function tt({ className: t, size: r = "sm", ...a }) {
+function rt({ className: t, size: r = "sm", ...a }) {
   return /* @__PURE__ */ e("div", {
     "data-chat-empty": "",
-    className: x("flex flex-1 flex-col items-center justify-center px-6 py-8", t),
+    className: f("flex flex-1 flex-col items-center justify-center px-6 py-8", t),
     children: /* @__PURE__ */ e(pe, {
       size: r,
       ...a
     })
   });
 }
-function rt({ rows: t = 5 }) {
+function at({ rows: t = 5 }) {
   return /* @__PURE__ */ e("div", {
     "aria-hidden": !0,
     "data-chat-conversations-loading": "",
     className: "flex flex-col gap-0.5",
     children: Array.from({ length: t }, (r, a) => /* @__PURE__ */ y("div", {
       className: "flex items-center gap-3 px-2 py-2.5",
-      children: [/* @__PURE__ */ e(S, { className: "size-8 shrink-0 rounded-full" }), /* @__PURE__ */ y("div", {
+      children: [/* @__PURE__ */ e(_, { className: "size-8 shrink-0 rounded-full" }), /* @__PURE__ */ y("div", {
         className: "min-w-0 flex-1",
         children: [/* @__PURE__ */ y("div", {
           className: "flex items-center justify-between gap-2",
-          children: [/* @__PURE__ */ e(S, { className: "h-3.5 w-32" }), /* @__PURE__ */ e(S, { className: "h-2.5 w-8" })]
-        }), /* @__PURE__ */ e(S, { className: "mt-2 h-2.5 w-44" })]
+          children: [/* @__PURE__ */ e(_, { className: "h-3.5 w-32" }), /* @__PURE__ */ e(_, { className: "h-2.5 w-8" })]
+        }), /* @__PURE__ */ e(_, { className: "mt-2 h-2.5 w-44" })]
       })]
     }, a))
   });
 }
-function at() {
+function nt() {
   return /* @__PURE__ */ y("div", {
     "aria-hidden": !0,
     "data-chat-messages-loading": "",
     className: "flex flex-col gap-3",
     children: [
-      /* @__PURE__ */ e(S, { className: "rounded-base h-10 w-1/2 self-start" }),
-      /* @__PURE__ */ e(S, { className: "rounded-base h-10 w-2/5 self-end" }),
-      /* @__PURE__ */ e(S, { className: "rounded-base h-16 w-3/5 self-start" })
+      /* @__PURE__ */ e(_, { className: "rounded-base h-10 w-1/2 self-start" }),
+      /* @__PURE__ */ e(_, { className: "rounded-base h-10 w-2/5 self-end" }),
+      /* @__PURE__ */ e(_, { className: "rounded-base h-16 w-3/5 self-start" })
     ]
   });
 }
-var wt = {
-  Root: Oe,
-  List: ze,
-  Search: We,
-  Conversations: He,
+var yt = {
+  Root: ze,
+  List: De,
+  Search: He,
+  Conversations: Ue,
   ConversationList: Ve,
-  Conversation: Fe,
-  Thread: je,
-  Header: Ke,
-  Title: Be,
-  Description: Ge,
+  Conversation: je,
+  Thread: Ke,
+  Header: Be,
+  Title: Ge,
+  Description: Qe,
   Messages: Je,
-  Divider: Qe,
-  Footer: Ye,
-  Composer: et,
-  Empty: tt,
-  ConversationsLoading: rt,
-  MessagesLoading: at
+  Divider: Ye,
+  Footer: Ze,
+  Composer: tt,
+  Empty: rt,
+  ConversationsLoading: at,
+  MessagesLoading: nt
 };
 export {
-  wt as t
+  yt as t
 };
 
-//# sourceMappingURL=chat-CU3XVm99.js.map
+//# sourceMappingURL=chat-Bu8UyIbT.js.map