@geomak/ui 6.29.2 → 6.30.0

package/dist/index.cjs

@@ -2304,6 +2304,19 @@ var ArrowDown = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 2
 function TypingDots() {
   return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center gap-1", "aria-hidden": "true", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-1.5 w-1.5 animate-bounce rounded-full bg-foreground-muted", style: { animationDelay: `${i * 0.15}s` } }, i)) });
 }
+var SKELETON_ROWS = [
+  { own: false, w: 150 },
+  { own: false, w: 110 },
+  { own: true, w: 180 },
+  { own: false, w: 130 },
+  { own: true, w: 90 }
+];
+function ChatSkeleton() {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", "aria-hidden": "true", children: SKELETON_ROWS.map((r, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ["flex items-end gap-2", r.own ? "flex-row-reverse" : ""].filter(Boolean).join(" "), children: [
+    !r.own && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-6 w-6 flex-shrink-0 animate-pulse rounded-full bg-surface" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-8 animate-pulse rounded-2xl bg-surface", style: { width: r.w } })
+  ] }, i)) });
+}
 function Chat({
   messages,
   currentUserId,
@@ -2316,6 +2329,7 @@ function Chat({
   placeholder = "Write a message\u2026",
   disabled = false,
   hideComposer = false,
+  loading = false,
   emptyState,
   height = 480,
   className = "",
@@ -2325,7 +2339,6 @@ function Chat({
   const atBottomRef = React28.useRef(true);
   const [showJump, setShowJump] = React28.useState(false);
   const [draft, setDraft] = React28.useState("");
-  const taRef = React28.useRef(null);
   const hasHeader = title != null || subtitle != null || avatar != null || headerActions != null;
   const isTyping = typingNames.length > 0;
   const scrollToBottom = React28.useCallback((smooth = true) => {
@@ -2347,12 +2360,6 @@ function Chat({
   React28.useEffect(() => {
     scrollToBottom(false);
   }, [scrollToBottom]);
-  React28.useLayoutEffect(() => {
-    const ta = taRef.current;
-    if (!ta) return;
-    ta.style.height = "auto";
-    ta.style.height = `${Math.min(ta.scrollHeight, 120)}px`;
-  }, [draft]);
   const send = () => {
     const text = draft.trim();
     if (!text || disabled) return;
@@ -2381,7 +2388,7 @@ function Chat({
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1 overflow-hidden", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: listRef, onScroll, className: "flex h-full flex-col gap-1 overflow-y-auto bg-background px-4 py-3", children: [
-            messages.length === 0 && !isTyping ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 items-center justify-center text-center text-sm text-foreground-muted", children: emptyState ?? "No messages yet. Say hello \u{1F44B}" }) : messages.map((m, i) => {
+            loading && messages.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(ChatSkeleton, {}) : messages.length === 0 && !isTyping ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 items-center justify-center text-center text-sm text-foreground-muted", children: emptyState ?? "No messages yet. Say hello \u{1F44B}" }) : messages.map((m, i) => {
               const own = m.authorId === currentUserId;
               const prev = messages[i - 1];
               const next = messages[i + 1];
@@ -2436,15 +2443,14 @@ function Chat({
           /* @__PURE__ */ jsxRuntime.jsx(
             "textarea",
             {
-              ref: taRef,
-              rows: 1,
+              rows: 2,
               value: draft,
               disabled,
               placeholder,
               onChange: (e) => setDraft(e.target.value),
               onKeyDown,
               "aria-label": "Message",
-              className: `${fieldShell({ size: "md", hasError: false, disabled, sized: false })} max-h-[120px] flex-1 resize-none px-3 py-2 leading-snug`
+              className: `${fieldShell({ size: "md", hasError: false, disabled, sized: false })} h-[4.5rem] flex-1 resize-none px-3 py-2 leading-snug`
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(