@geomak/ui 6.29.2 → 6.30.0

package/dist/index.d.cts

@@ -1381,6 +1381,8 @@ interface ChatProps {
     disabled?: boolean;
     /** Hide the composer entirely (read-only transcript). */
     hideComposer?: boolean;
+    /** Shows a transcript skeleton (use while loading history, before messages arrive). */
+    loading?: boolean;
     /** Shown when there are no messages. */
     emptyState?: React__default.ReactNode;
     /** Overall height — the message list scrolls within it. Default `480`. */
@@ -1406,7 +1408,7 @@ interface ChatProps {
  *   onSend={(text) => send(text)}
  * />
  */
-declare function Chat({ messages, currentUserId, onSend, typingNames, title, subtitle, avatar, headerActions, placeholder, disabled, hideComposer, emptyState, height, className, style, }: ChatProps): react_jsx_runtime.JSX.Element;
+declare function Chat({ messages, currentUserId, onSend, typingNames, title, subtitle, avatar, headerActions, placeholder, disabled, hideComposer, loading, emptyState, height, className, style, }: ChatProps): react_jsx_runtime.JSX.Element;
 
 type StatisticSize = 'sm' | 'md' | 'lg';
 type DeltaDirection = 'up' | 'down' | 'neutral';

package/dist/index.d.ts

@@ -1381,6 +1381,8 @@ interface ChatProps {
     disabled?: boolean;
     /** Hide the composer entirely (read-only transcript). */
     hideComposer?: boolean;
+    /** Shows a transcript skeleton (use while loading history, before messages arrive). */
+    loading?: boolean;
     /** Shown when there are no messages. */
     emptyState?: React__default.ReactNode;
     /** Overall height — the message list scrolls within it. Default `480`. */
@@ -1406,7 +1408,7 @@ interface ChatProps {
  *   onSend={(text) => send(text)}
  * />
  */
-declare function Chat({ messages, currentUserId, onSend, typingNames, title, subtitle, avatar, headerActions, placeholder, disabled, hideComposer, emptyState, height, className, style, }: ChatProps): react_jsx_runtime.JSX.Element;
+declare function Chat({ messages, currentUserId, onSend, typingNames, title, subtitle, avatar, headerActions, placeholder, disabled, hideComposer, loading, emptyState, height, className, style, }: ChatProps): react_jsx_runtime.JSX.Element;
 
 type StatisticSize = 'sm' | 'md' | 'lg';
 type DeltaDirection = 'up' | 'down' | 'neutral';

package/dist/index.js

@@ -1,7 +1,7 @@
 import { colors_default } from './chunk-I2P4JJDB.js';
 export { colors_default as COLORS, PALETTE as palette, semanticTokens, vars } from './chunk-I2P4JJDB.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React28, { createContext, useState, useEffect, useMemo, useId, useCallback, useRef, useLayoutEffect, useContext, useSyncExternalStore } from 'react';
+import React28, { createContext, useState, useEffect, useMemo, useId, useCallback, useRef, useContext, useSyncExternalStore, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
@@ -2267,6 +2267,19 @@ var ArrowDown = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "
 function TypingDots() {
   return /* @__PURE__ */ jsx("span", { className: "inline-flex items-center gap-1", "aria-hidden": "true", children: [0, 1, 2].map((i) => /* @__PURE__ */ 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__ */ jsx("div", { className: "flex flex-col gap-2", "aria-hidden": "true", children: SKELETON_ROWS.map((r, i) => /* @__PURE__ */ jsxs("div", { className: ["flex items-end gap-2", r.own ? "flex-row-reverse" : ""].filter(Boolean).join(" "), children: [
+    !r.own && /* @__PURE__ */ jsx("span", { className: "h-6 w-6 flex-shrink-0 animate-pulse rounded-full bg-surface" }),
+    /* @__PURE__ */ jsx("span", { className: "h-8 animate-pulse rounded-2xl bg-surface", style: { width: r.w } })
+  ] }, i)) });
+}
 function Chat({
   messages,
   currentUserId,
@@ -2279,6 +2292,7 @@ function Chat({
   placeholder = "Write a message\u2026",
   disabled = false,
   hideComposer = false,
+  loading = false,
   emptyState,
   height = 480,
   className = "",
@@ -2288,7 +2302,6 @@ function Chat({
   const atBottomRef = useRef(true);
   const [showJump, setShowJump] = useState(false);
   const [draft, setDraft] = useState("");
-  const taRef = useRef(null);
   const hasHeader = title != null || subtitle != null || avatar != null || headerActions != null;
   const isTyping = typingNames.length > 0;
   const scrollToBottom = useCallback((smooth = true) => {
@@ -2310,12 +2323,6 @@ function Chat({
   useEffect(() => {
     scrollToBottom(false);
   }, [scrollToBottom]);
-  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;
@@ -2344,7 +2351,7 @@ function Chat({
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "relative flex-1 overflow-hidden", children: [
           /* @__PURE__ */ 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__ */ 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__ */ jsx(ChatSkeleton, {}) : messages.length === 0 && !isTyping ? /* @__PURE__ */ 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];
@@ -2399,15 +2406,14 @@ function Chat({
           /* @__PURE__ */ 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__ */ jsx(