@flamingo-stack/openframe-frontend-core 0.0.777 → 0.0.781

package/dist/components/chat/chat-message-row.js

@@ -2,30 +2,53 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import Image from "../../embed-shims/next-image.js";
+import { cn } from "../../utils/cn.js";
 import { personInitials } from "../../utils/format.js";
-import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { TextLineSkeleton, UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { loadingItemProps, useLoadingScope } from "../ui/loading-scope.js";
 import { useProxiedImageUrl } from "./hooks/use-proxied-image-url.js";
-function ChatMessageRow({ displayName, avatarUrl, timeLabel, body, footer }) {
+const ROW_CLASS = "flex w-full min-w-0 gap-2 md:gap-3";
+const AVATAR_BOX_CLASS = "h-8 w-8 flex-shrink-0 rounded-lg md:h-10 md:w-10";
+const CONTENT_CLASS = "min-w-0 max-w-full flex-1";
+const HEADER_CLASS = "mb-1 flex min-w-0 max-w-full items-center gap-2";
+const NAME_TYPE_CLASS = "font-body text-[14px] font-bold leading-[1.33] tracking-[-0.02em] md:text-[15px]";
+const CHAT_MESSAGE_ROW_BODY_LINES = 2;
+function ChatMessageRow(props) {
+  const loading = useLoadingScope() || !!props.loading;
+  if (loading) return /* @__PURE__ */ jsx(ChatMessageRowLoading, { ...loadingItemProps(props) });
+  return /* @__PURE__ */ jsx(ChatMessageRowLoaded, { ...props });
+}
+function ChatMessageRowLoaded(props) {
+  const { displayName, avatarUrl, timeLabel, body, footer } = props;
   const proxiedAvatar = useProxiedImageUrl(avatarUrl ?? "");
   const resolvedAvatar = proxiedAvatar || avatarUrl || void 0;
   const [failedSrc, setFailedSrc] = useState(null);
   const src = resolvedAvatar && resolvedAvatar !== failedSrc ? resolvedAvatar : void 0;
   const hasBody = typeof body === "string" ? body.trim().length > 0 : body != null && body !== false;
-  return /* @__PURE__ */ jsxs("div", { className: "flex w-full min-w-0 gap-2 md:gap-3", children: [
+  return /* @__PURE__ */ jsxs("div", { className: ROW_CLASS, ...loadingItemProps(props), children: [
     src ? /* @__PURE__ */ jsx(
       Image,
       {
         src,
         alt: displayName,
-        className: "h-8 w-8 flex-shrink-0 rounded-lg object-cover md:h-10 md:w-10",
+        className: cn(AVATAR_BOX_CLASS, "object-cover"),
         width: 40,
         height: 40,
         onError: () => setFailedSrc(resolvedAvatar ?? null)
       }
-    ) : /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg border border-ods-border bg-ods-bg text-ods-text-primary text-h6 md:h-10 md:w-10", children: personInitials(displayName) || "?" }),
-    /* @__PURE__ */ jsxs("div", { className: "min-w-0 max-w-full flex-1", children: [
-      /* @__PURE__ */ jsxs("div", { className: "mb-1 flex min-w-0 max-w-full items-center gap-2", children: [
-        /* @__PURE__ */ jsx("span", { className: "truncate font-body text-[14px] font-bold leading-[1.33] tracking-[-0.02em] text-ods-text-primary md:text-[15px]", children: displayName }),
+    ) : /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          AVATAR_BOX_CLASS,
+          "flex items-center justify-center border border-ods-border bg-ods-bg text-ods-text-primary text-h6"
+        ),
+        children: personInitials(displayName) || "?"
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: CONTENT_CLASS, children: [
+      /* @__PURE__ */ jsxs("div", { className: HEADER_CLASS, children: [
+        /* @__PURE__ */ jsx("span", { className: cn("truncate text-ods-text-primary", NAME_TYPE_CLASS), children: displayName }),
         timeLabel && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 text-ods-text-secondary text-h6", children: timeLabel })
       ] }),
       hasBody && /* @__PURE__ */ jsx("div", { className: "min-w-0 max-w-full whitespace-pre-wrap break-words text-ods-text-primary text-h6", children: body }),
@@ -33,20 +56,18 @@ function ChatMessageRow({ displayName, avatarUrl, timeLabel, body, footer }) {
     ] })
   ] });
 }
-function ChatMessageRowSkeleton() {
-  return /* @__PURE__ */ jsxs("div", { className: "flex w-full min-w-0 gap-2 md:gap-3", children: [
-    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-8 w-8 flex-shrink-0 rounded-lg md:h-10 md:w-10" }),
-    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-[15px] w-24 rounded md:h-[20px] md:w-32" }),
-        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-[12px] w-12 rounded md:h-[16px] md:w-16" })
+function ChatMessageRowLoading(markers) {
+  return /* @__PURE__ */ jsxs("div", { className: ROW_CLASS, ...markers, children: [
+    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: AVATAR_BOX_CLASS }),
+    /* @__PURE__ */ jsxs("div", { className: CONTENT_CLASS, children: [
+      /* @__PURE__ */ jsxs("div", { className: HEADER_CLASS, children: [
+        /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: cn(NAME_TYPE_CLASS, "w-24 md:w-32") }),
+        /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", as: "span", className: "w-12 flex-shrink-0 md:w-16" })
       ] }),
-      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-[14px] w-full rounded md:h-[18px]" }),
-      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mt-1 h-[14px] w-3/4 rounded md:h-[18px]" })
+      /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", lines: CHAT_MESSAGE_ROW_BODY_LINES })
     ] })
   ] });
 }
 export {
-  ChatMessageRow,
-  ChatMessageRowSkeleton
+  ChatMessageRow
 };

package/dist/components/chat/chat-message-skeleton.d.ts

@@ -1,20 +1,35 @@
+import type { ChatAppearance } from './types/chat.types';
 interface ChatMessageSkeletonProps {
     className?: string;
+    /** Whether the row draws its speaker's face, as `ChatMessageEnhanced`'s `showAvatar` (default true). */
     showAvatar?: boolean;
+    /** The user's own turn: the face at the right and the message as the right-side bubble. */
     isUser?: boolean;
-    /** How many body lines to draw under the name row. Default 3 (paragraph-ish
-     *  reply). Pass 1 for surfaces whose real messages are single-line (e.g. the
-     *  short scripted hero-demo turns), so the skeleton isn't ~3x too tall. */
+    /**
+     * Whether the face line carries a name and a time, as the loaded row writes them only for a system line and
+     * another person answering (default false: the user's and the agent's turns show a face only).
+     */
+    showName?: boolean;
+    /**
+     * Whether the message carries its time. The loaded row writes it on the face line beside a name, else as a line
+     * under the message (at the right under the user's own bubble). Default true: a read message has its time.
+     */
+    showTime?: boolean;
+    /** How many lines the message takes. Default 3 (a paragraph); 1 for single-line surfaces. */
     bodyLines?: number;
+    /** The thread's appearance (its row padding); the surrounding chat's when not given. */
+    appearance?: ChatAppearance;
+    /** List markers (`data-loading-item`), set by the list on its rows. */
+    [key: `data-${string}`]: unknown;
 }
 /**
- * One message-row skeleton. Mirrors `ChatMessageEnhanced`'s real layout:
- * full panel width, no card background, and an INLINE avatar in the name row
- * (the 2025 chat pattern — Claude.ai / ChatGPT / Gemini), NOT the legacy
- * `absolute -left-16` hanging avatar. Body lines use percentage widths so they
- * reflow cleanly as the panel resizes.
+ * One message row while it is read: `ChatMessageEnhanced`'s own layout from its own class constants (the row's
+ * padding per appearance, the face line, the segments), the face a 20px round box, and the message as text-h4 lines
+ * (a bubble at the right for the user's own turn, plain text across the width for anyone else).
  */
-export declare function ChatMessageSkeleton({ className, showAvatar, isUser, bodyLines, }: ChatMessageSkeletonProps): import("react").JSX.Element;
+export declare function ChatMessageSkeleton({ className, showAvatar, isUser, showName, showTime, bodyLines, appearance: appearanceProp, ...props }: ChatMessageSkeletonProps): import("react").JSX.Element;
+/** Message rows a thread's skeleton draws: a typical thread, since a thread loads with no page size of its own. */
+export declare const CHAT_MESSAGE_LIST_SKELETON_MESSAGES = 6;
 interface ChatMessageListSkeletonProps {
     /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
     region?: boolean;
@@ -28,9 +43,8 @@ interface ChatMessageListSkeletonProps {
      * side gutters). Same semantics as the real list.
      */
     fullWidth?: boolean;
-    /** Extra classes on the content column (e.g. host-provided padding). The
-     *  host wrapper is expected to own the panel padding; this stays empty by
-     *  default so the skeleton sits flush. */
+    /** The content column's side padding, as `ChatMessageList`'s `contentClassName` (the list's own padding when not
+     *  given). */
     contentClassName?: string;
     /** Body lines per message row (forwarded to `ChatMessageSkeleton`). Default 3;
      *  pass 1 for single-line message surfaces. */
@@ -43,7 +57,14 @@ interface ChatMessageListSkeletonProps {
      * panel is loading" rather than "a short thread pinned to the bottom".
      */
     fill?: boolean;
+    /** The thread's appearance (its rows' padding), as `ChatMessageList`'s; the surrounding chat's when not given. */
+    appearance?: ChatAppearance;
+    /**
+     * The thread holds another person's turns, written with their name and time on the face line (`ChatMessageList`
+     * with `selfAuthorType="admin"`: the technician reads the end user's replies). One row in three is such a turn.
+     */
+    namedOthers?: boolean;
 }
-export declare function ChatMessageListSkeleton({ region, className, messageCount, showAvatars, fullWidth, contentClassName, bodyLines, fill, }: ChatMessageListSkeletonProps): import("react").JSX.Element;
+export declare function ChatMessageListSkeleton({ region, className, messageCount, showAvatars, fullWidth, contentClassName, bodyLines, fill, appearance, namedOthers, }: ChatMessageListSkeletonProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=chat-message-skeleton.d.ts.map

package/dist/components/chat/chat-message-skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chat-message-skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/chat/chat-message-skeleton.tsx"],"names":[],"mappings":"AAMA,UAAU,wBAAwB;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;+EAE2E;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,UAAiB,EACjB,MAAc,EACd,SAAa,GACd,EAAE,wBAAwB,+BAwB1B;AAED,UAAU,4BAA4B;IACpC,mHAAmH;IACnH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;8CAE0C;IAC1C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;mDAC+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,wBAAgB,uBAAuB,CAAC,EACtC,MAAa,EACb,SAAS,EACT,YAAgB,EAChB,WAAkB,EAClB,SAAiB,EACjB,gBAAgB,EAChB,SAAS,EACT,IAAY,GACb,EAAE,4BAA4B,+BAyC9B"}
+{"version":3,"file":"chat-message-skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/chat/chat-message-skeleton.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,UAAU,wBAAwB;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wGAAwG;IACxG,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,2FAA2F;IAC3F,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6FAA6F;IAC7F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wFAAwF;IACxF,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,uEAAuE;IACvE,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAClC;AAKD;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,UAAiB,EACjB,MAAc,EACd,QAAgB,EAChB,QAAe,EACf,SAAa,EACb,UAAU,EAAE,cAAc,EAC1B,GAAG,KAAK,EACT,EAAE,wBAAwB,+BAiC1B;AAED,mHAAmH;AACnH,eAAO,MAAM,mCAAmC,IAAI,CAAC;AAErD,UAAU,4BAA4B;IACpC,mHAAmH;IACnH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;kBACc;IACd,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;mDAC+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,kHAAkH;IAClH,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,uBAAuB,CAAC,EACtC,MAAa,EACb,SAAS,EACT,YAAkD,EAClD,WAAkB,EAClB,SAAiB,EACjB,gBAAgB,EAChB,SAAS,EACT,IAAY,EACZ,UAAU,EACV,WAAmB,GACpB,EAAE,4BAA4B,+BA2C9B"}

package/dist/components/chat/chat-message-skeleton.js

@@ -2,66 +2,93 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 import { LoadingRegion } from "../loading/loading-region.js";
-import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
-const BODY_LINE_WIDTHS = ["w-full", "w-11/12", "w-4/5", "w-5/6"];
-const bodyLineWidth = (index, total) => index === total - 1 ? "w-3/5" : BODY_LINE_WIDTHS[index % BODY_LINE_WIDTHS.length];
+import { TextLineSkeleton } from "../loading/unified-skeleton.js";
+import { LoadingItems, loadingItemProps } from "../ui/loading-scope.js";
+import { SquareAvatar } from "../ui/square-avatar.js";
+import { useChatAppearance } from "./chat-appearance-context.js";
+import {
+  CHAT_MESSAGE_FACE_PX,
+  CHAT_MESSAGE_HEADER_CLASS,
+  CHAT_MESSAGE_LIST_COLUMN_CLASS,
+  CHAT_MESSAGE_LIST_CONTENT_PADDING_CLASS,
+  CHAT_MESSAGE_LIST_SCROLLBAR_CLASS,
+  CHAT_MESSAGE_LIST_SCROLLER_CLASS,
+  CHAT_MESSAGE_ROW_PADDING_CLASS,
+  CHAT_MESSAGE_SEGMENTS_CLASS,
+  CHAT_MESSAGE_STACK_CLASS,
+  CHAT_MESSAGE_TEXT_CLASS,
+  CHAT_MESSAGE_USER_BUBBLE_CLASS,
+  CHAT_MESSAGE_USER_ROW_CLASS
+} from "./chat-message-layout.js";
+const TIME_BAR_CLASS = "w-14 shrink-0";
 function ChatMessageSkeleton({
   className,
   showAvatar = true,
   isUser = false,
-  bodyLines = 3
+  showName = false,
+  showTime = true,
+  bodyLines = 3,
+  appearance: appearanceProp,
+  ...props
 }) {
+  const inherited = useChatAppearance();
+  const appearance = appearanceProp ?? inherited;
   const lines = Math.max(1, bodyLines);
-  return /* @__PURE__ */ jsx("div", { className: cn("relative py-[var(--spacing-system-s)]", className), children: /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-[var(--spacing-system-xxs)]", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--spacing-system-xs)]", children: [
-      showAvatar && !isUser && /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-8 w-8 flex-shrink-0 rounded-full" }),
-      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-5 w-32 rounded" }),
-      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "ml-auto h-4 w-14 rounded" })
+  return /* @__PURE__ */ jsx("div", { className: cn("relative", CHAT_MESSAGE_ROW_PADDING_CLASS[appearance], className), ...loadingItemProps(props), children: /* @__PURE__ */ jsxs("div", { className: CHAT_MESSAGE_STACK_CLASS, children: [
+    (showAvatar || showName) && /* @__PURE__ */ jsxs("div", { className: cn(CHAT_MESSAGE_HEADER_CLASS, isUser && "justify-end"), children: [
+      showAvatar && /* @__PURE__ */ jsx(SquareAvatar, { loading: true, sizePx: CHAT_MESSAGE_FACE_PX, variant: "round" }),
+      showName && /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "w-24" }),
+      showName && showTime && /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: cn("ml-auto", TIME_BAR_CLASS) })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 pt-[var(--spacing-system-xxs)]", children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx(UnifiedSkeleton, { className: cn("h-4 rounded", bodyLineWidth(i, lines)) }, i)) })
+    /* @__PURE__ */ jsx("div", { className: CHAT_MESSAGE_SEGMENTS_CLASS, children: isUser ? /* @__PURE__ */ jsx("div", { className: CHAT_MESSAGE_USER_ROW_CLASS, children: /* @__PURE__ */ jsx("div", { className: cn(CHAT_MESSAGE_USER_BUBBLE_CLASS, "w-1/2"), children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h4", lines }) }) }) : /* @__PURE__ */ jsx("div", { className: CHAT_MESSAGE_TEXT_CLASS, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h4", lines }) }) }),
+    showTime && !showName && /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: cn(TIME_BAR_CLASS, isUser && "justify-self-end") })
   ] }) });
 }
+const CHAT_MESSAGE_LIST_SKELETON_MESSAGES = 6;
 function ChatMessageListSkeleton({
   region = true,
   className,
-  messageCount = 6,
+  messageCount = CHAT_MESSAGE_LIST_SKELETON_MESSAGES,
   showAvatars = true,
   fullWidth = false,
   contentClassName,
   bodyLines,
-  fill = false
+  fill = false,
+  appearance,
+  namedOthers = false
 }) {
-  const messages = Array.from({ length: messageCount }, (_, index) => ({
-    id: index,
-    isUser: index % 3 === 0
-  }));
   return /* @__PURE__ */ jsx(LoadingRegion, { label: "Loading messages", announce: region, className: "relative flex min-h-0 flex-1 flex-col", children: /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(
-        "flex h-full w-full flex-1 flex-col",
-        fill ? "overflow-hidden" : "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-ods-border/30 hover:scrollbar-thumb-ods-text-secondary/30 overflow-y-auto overflow-x-hidden overscroll-contain [scroll-behavior:smooth]",
+        CHAT_MESSAGE_LIST_SCROLLER_CLASS,
+        fill ? "overflow-hidden" : cn(CHAT_MESSAGE_LIST_SCROLLBAR_CLASS, "overscroll-contain"),
         className
       ),
       children: /* @__PURE__ */ jsxs(
         "div",
         {
           className: cn(
-            fullWidth ? "flex w-full min-w-0 flex-col" : "mx-auto flex w-full min-w-0 max-w-ods-content-narrow flex-col",
-            contentClassName
+            CHAT_MESSAGE_LIST_COLUMN_CLASS[fullWidth ? "full" : "narrow"],
+            contentClassName ?? CHAT_MESSAGE_LIST_CONTENT_PADDING_CLASS
           ),
           style: fill ? void 0 : { minHeight: "100%" },
           children: [
             !fill && /* @__PURE__ */ jsx("div", { className: "flex-1" }),
-            messages.map((message) => /* @__PURE__ */ jsx(
-              ChatMessageSkeleton,
-              {
-                showAvatar: showAvatars,
-                isUser: message.isUser,
-                bodyLines
-              },
-              message.id
-            ))
+            /* @__PURE__ */ jsx(LoadingItems, { count: messageCount, children: (index) => {
+              const isUser = index % 3 === 0;
+              return /* @__PURE__ */ jsx(
+                ChatMessageSkeleton,
+                {
+                  showAvatar: showAvatars,
+                  isUser,
+                  showName: namedOthers && index % 3 === 1,
+                  bodyLines: isUser ? bodyLines ?? 1 : bodyLines,
+                  appearance,
+                  "data-loading-item": true
+                }
+              );
+            } })
           ]
         }
       )
@@ -69,6 +96,7 @@ function ChatMessageListSkeleton({
   ) });
 }
 export {
+  CHAT_MESSAGE_LIST_SKELETON_MESSAGES,
   ChatMessageListSkeleton,
   ChatMessageSkeleton
 };

package/dist/components/chat/chat-nav-sidebar.d.ts

@@ -42,13 +42,31 @@ export interface ChatListItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonE
     trailing?: ReactNode;
     /** The chat open on screen. */
     active?: boolean;
+    /** The chat is still being read: the row draws its skeleton (as it does in a loading scope). */
+    loading?: boolean;
+    /** The row's place in its list: picks the loading title bar's width, so a page of loading rows reads like a list. */
+    index?: number;
 }
+/** A loading chat row's title widths, cycled by index: a believable spread, the same on every load. Shared by every
+ *  chat list's loading rows. */
+export declare const SKELETON_TITLE_WIDTHS: string[];
 /**
  * One row of the `ChatNavSidebar` list (Figma `chat-list-item`): a one-line
  * title over a caption, an optional mark before the title and a status glyph
  * at the end. The selected row takes the accent's secondary fill, so a tenant
- * accent recolours it with the rest of the brand.
+ * accent recolours it with the rest of the brand. ONE switch (`useLoadingScope() || loading`): while the chat is read
+ * the SAME row (an inert `div`) draws its title and caption as bars and its trailing glyph as an icon box; the `leading`
+ * mark stays.
  */
 declare const ChatListItem: import("react").ForwardRefExoticComponent<ChatListItemProps & import("react").RefAttributes<HTMLButtonElement>>;
-export { ChatNavSidebar, ChatListItem };
+/**
+ * A chat list's first page while it is read: `count` loading {@link ChatListItem} rows (the list's page size), each a
+ * list item, with the caption and trailing parts the list's loaded rows have.
+ */
+declare function ChatListItemLoadingPage({ count, subtitle, trailing, }: {
+    count: number;
+    subtitle?: boolean;
+    trailing?: boolean;
+}): import("react").JSX.Element;
+export { ChatNavSidebar, ChatListItem, ChatListItemLoadingPage };
 //# sourceMappingURL=chat-nav-sidebar.d.ts.map

package/dist/components/chat/chat-nav-sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chat-nav-sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/chat/chat-nav-sidebar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,oBAAoB,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAInG,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,IAAI,EAAE,SAAS,CAAC;IAChB,qDAAqD;IACrD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,WAAW,CAAC;IACtE,4BAA4B;IAC5B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,qEAAqE;IACrE,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,yDAAyD;IACzD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sFAAsF;IACtF,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,qEAAqE;IACrE,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;qDACiD;IACjD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED;;;;;GAKG;AACH,QAAA,MAAM,cAAc,6GA+CnB,CAAC;AA6BF,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC/F,KAAK,EAAE,SAAS,CAAC;IACjB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,0DAA0D;IAC1D,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;GAKG;AACH,QAAA,MAAM,YAAY,iHA8BjB,CAAC;AAIF,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"chat-nav-sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/chat/chat-nav-sidebar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,oBAAoB,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAOnG,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,IAAI,EAAE,SAAS,CAAC;IAChB,qDAAqD;IACrD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,WAAW,CAAC;IACtE,4BAA4B;IAC5B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,qEAAqE;IACrE,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,yDAAyD;IACzD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sFAAsF;IACtF,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,qEAAqE;IACrE,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;qDACiD;IACjD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED;;;;;GAKG;AACH,QAAA,MAAM,cAAc,6GA+CnB,CAAC;AA2BF,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC/F,KAAK,EAAE,SAAS,CAAC;IACjB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,0DAA0D;IAC1D,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,gGAAgG;IAChG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qHAAqH;IACrH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;gCACgC;AAChC,eAAO,MAAM,qBAAqB,UAAyD,CAAC;AAQ5F;;;;;;;GAOG;AACH,QAAA,MAAM,YAAY,iHA6DjB,CAAC;AAIF;;;GAGG;AACH,iBAAS,uBAAuB,CAAC,EAC/B,KAAK,EACL,QAAgB,EAChB,QAAgB,GACjB,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,+BAeA;AAED,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,uBAAuB,EAAE,CAAC"}

package/dist/components/chat/chat-nav-sidebar.js

@@ -1,7 +1,10 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { cn } from "../../utils/cn.js";
+import { MediaSkeleton, TextLineSkeleton } from "../loading/unified-skeleton.js";
+import { BUTTON_KIND_CLASS, Button } from "../ui/button/index.js";
+import { LoadingItems, loadingItemProps, useLoadingScope } from "../ui/loading-scope.js";
 import { ScrollFadeOverlay, useScrollFade } from "../ui/scroll-fade.js";
 const ChatNavSidebar = forwardRef(
   ({ className, logo, items, sectionLabel, sectionActions, listHeader, children, footer, ...props }, ref) => {
@@ -46,54 +49,83 @@ const ChatNavSidebar = forwardRef(
 ChatNavSidebar.displayName = "ChatNavSidebar";
 function ChatNavSidebarButton({ icon, active, className, children, ...props }) {
   return /* @__PURE__ */ jsxs(
-    "button",
+    Button,
     {
+      variant: "row",
       type: "button",
       "aria-current": active ? "page" : void 0,
-      className: cn(
-        "flex w-full items-center gap-[var(--spacing-system-xs)] rounded-md p-[var(--spacing-system-xs)] text-left text-h4",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus",
-        "[&_svg]:size-6 [&_svg]:shrink-0",
-        active ? "text-ods-accent" : "text-ods-text-primary [&_svg]:text-ods-text-secondary",
-        className
-      ),
+      "data-state": active ? "active" : void 0,
+      className,
       ...props,
       children: [
-        icon,
+        /* @__PURE__ */ jsx("span", { className: cn("flex shrink-0 [&_svg]:size-6", active ? "text-ods-accent" : "text-ods-text-secondary"), children: icon }),
         /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children })
       ]
     }
   );
 }
+const SKELETON_TITLE_WIDTHS = ["w-3/5", "w-4/5", "w-2/5", "w-3/4", "w-1/2", "w-2/3"];
+const TRAILING_CLASS = "flex shrink-0 items-center [&_svg]:size-6";
+const CHAT_LIST_ITEM_CLASS = cn(BUTTON_KIND_CLASS.row, "shrink-0");
 const ChatListItem = forwardRef(
-  ({ className, title, subtitle, leading, trailing, active, ...props }, ref) => /* @__PURE__ */ jsxs(
-    "button",
-    {
-      ref,
-      type: "button",
-      "aria-current": active ? "true" : void 0,
-      className: cn(
-        "flex w-full shrink-0 items-center gap-[var(--spacing-system-xs)] rounded-md p-[var(--spacing-system-xs)] text-left",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-focus",
-        active && "bg-ods-accent-secondary",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [
-          /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-[var(--spacing-system-xxs)]", children: [
-            leading && /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center [&_svg]:size-4", children: leading }),
-            /* @__PURE__ */ jsx("span", { className: cn("min-w-0 flex-1 truncate text-h4", active ? "text-ods-accent" : "text-ods-text-primary"), children: title })
-          ] }),
-          subtitle != null && /* @__PURE__ */ jsx("span", { className: cn("truncate text-h6", active ? "text-ods-text-primary" : "text-ods-text-secondary"), children: subtitle })
+  ({ className, title, subtitle, leading, trailing, active, loading: loadingProp = false, index = 0, ...props }, ref) => {
+    const loading = useLoadingScope() || loadingProp;
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-[var(--spacing-system-xxs)]", children: [
+          leading && /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center [&_svg]:size-4", children: leading }),
+          loading ? /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h4", className: SKELETON_TITLE_WIDTHS[index % SKELETON_TITLE_WIDTHS.length] }) : /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn("min-w-0 flex-1 truncate text-h4", active ? "text-ods-accent" : "text-ods-text-primary"),
+              children: title
+            }
+          )
         ] }),
-        trailing && /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center [&_svg]:size-6", children: trailing })
-      ]
+        subtitle != null && (loading ? /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "w-1/3" }) : /* @__PURE__ */ jsx("span", { className: cn("truncate text-h6", active ? "text-ods-text-primary" : "text-ods-text-secondary"), children: subtitle }))
+      ] }),
+      loading ? trailing != null && // The status glyph's 24px box (`MediaSkeleton.Icon` md), the loaded glyph's size.
+      /* @__PURE__ */ jsx("span", { className: TRAILING_CLASS, children: /* @__PURE__ */ jsx(MediaSkeleton.Icon, { size: "md" }) }) : trailing && /* @__PURE__ */ jsx("span", { className: TRAILING_CLASS, children: trailing })
+    ] });
+    if (loading) {
+      return /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: cn(CHAT_LIST_ITEM_CLASS, className), ...loadingItemProps(props), children: content });
     }
-  )
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "row",
+        ref,
+        type: "button",
+        "aria-current": active ? "true" : void 0,
+        "data-state": active ? "active" : void 0,
+        className: cn("shrink-0", className),
+        ...props,
+        children: content
+      }
+    );
+  }
 );
 ChatListItem.displayName = "ChatListItem";
+function ChatListItemLoadingPage({
+  count,
+  subtitle = false,
+  trailing = false
+}) {
+  return /* @__PURE__ */ jsx(LoadingItems, { count, children: (index) => /* @__PURE__ */ jsx(
+    ChatListItem,
+    {
+      loading: true,
+      index,
+      title: "",
+      subtitle: subtitle ? "" : void 0,
+      trailing: trailing ? "" : void 0,
+      "data-loading-item": true
+    }
+  ) });
+}
 export {
   ChatListItem,
-  ChatNavSidebar
+  ChatListItemLoadingPage,
+  ChatNavSidebar,
+  SKELETON_TITLE_WIDTHS
 };

package/dist/components/chat/chat-panel-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chat-panel-header.d.ts","sourceRoot":"","sources":["../../../src/components/chat/chat-panel-header.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAiBvC,MAAM,WAAW,oBAAoB;IACnC;uDACmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAC;IACd;8EAC0E;IAC1E,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;mEAG+D;IAC/D,MAAM,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC;IAC7D,6CAA6C;IAC7C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6DAA6D;IAC7D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;2BACuB;IACvB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;iDAC6C;IAC7C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,2EAA2E;IAC3E,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,mEAAmE;IACnE,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;kEAC8D;IAC9D,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,8EAA8E;IAC9E,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;;6EAGyE;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;gDAC4C;IAC5C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;8CAE0C;IAC1C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,yEAAyE;IACzE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;wDACoD;IACpD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAgB,EAChB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,aAAsB,EACtB,cAAsB,EACtB,MAAM,EACN,OAAO,EACP,SAAS,EACT,QAAQ,EACR,SAAS,EACT,SAAS,EACT,UAAU,EACV,aAAa,EACb,OAAe,EACf,cAAc,EACd,YAAoB,EACpB,WAAW,EACX,cAAc,GACf,EAAE,oBAAoB,+BAuHtB"}
+{"version":3,"file":"chat-panel-header.d.ts","sourceRoot":"","sources":["../../../src/components/chat/chat-panel-header.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAiBvC,MAAM,WAAW,oBAAoB;IACnC;uDACmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAC;IACd;8EAC0E;IAC1E,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;mEAG+D;IAC/D,MAAM,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC;IAC7D,6CAA6C;IAC7C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6DAA6D;IAC7D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;2BACuB;IACvB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;iDAC6C;IAC7C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,2EAA2E;IAC3E,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,mEAAmE;IACnE,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;kEAC8D;IAC9D,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,8EAA8E;IAC9E,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;;6EAGyE;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;gDAC4C;IAC5C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;8CAE0C;IAC1C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,yEAAyE;IACzE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;wDACoD;IACpD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAgB,EAChB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,aAAsB,EACtB,cAAsB,EACtB,MAAM,EACN,OAAO,EACP,SAAS,EACT,QAAQ,EACR,SAAS,EACT,SAAS,EACT,UAAU,EACV,aAAa,EACb,OAAe,EACf,cAAc,EACd,YAAoB,EACpB,WAAW,EACX,cAAc,GACf,EAAE,oBAAoB,+BA6HtB"}

package/dist/components/chat/chat-panel-header.js

@@ -10,9 +10,9 @@ import {
 } from "../icons-v2-generated/index.js";
 import { XmarkIcon } from "../icons-v2-generated/signs-and-symbols/xmark-icon.js";
 import { ActionsMenuDropdown } from "../ui/actions-menu.js";
+import { Button } from "../ui/button/index.js";
 import { SquareAvatar } from "../ui/square-avatar.js";
 import { chatDialogMenuItems } from "./chat-dialog-menu-items.js";
-import { ChatHeaderIconButton } from "./chat-header-icon-button.js";
 import { ChatHeaderSearchField } from "./chat-header-search-field.js";
 import { ChatPanelHeaderMobile } from "./chat-panel-header-mobile.js";
 function ChatPanelHeader({
@@ -62,11 +62,11 @@ function ChatPanelHeader({
       "div",
       {
         className: cn(
-          "h-14 w-full flex-shrink-0 overflow-hidden border-b border-ods-border bg-ods-card",
+          "h-14 w-full flex-shrink-0 divide-x divide-ods-border overflow-hidden border-b border-ods-border bg-ods-card",
           compact ? "flex" : "hidden md:flex"
         ),
         children: [
-          showBack && /* @__PURE__ */ jsx(ChatHeaderIconButton, { divider: "right", onClick: onBack, "aria-label": backAriaLabel, children: /* @__PURE__ */ jsx(Chevron02LeftIcon, { size: 24 }) }),
+          showBack && /* @__PURE__ */ jsx(Button, { variant: "cell", className: "w-14", onClick: onBack, "aria-label": backAriaLabel, children: /* @__PURE__ */ jsx(Chevron02LeftIcon, { size: 24 }) }),
           searchInline ? (
             // Search open — the inline field takes over the title area in place
             // (Figma 116:51217); the magnifier toggle below is hidden.
@@ -100,19 +100,29 @@ function ChatPanelHeader({
               )
             ) : null
           ] }),
-          isArchivedView && onRestore && /* @__PURE__ */ jsx(ChatHeaderIconButton, { onClick: onRestore, "aria-label": "Unarchive chat", children: /* @__PURE__ */ jsx(Refresh01LeftIcon, { size: 24 }) }),
+          isArchivedView && onRestore && /* @__PURE__ */ jsx(Button, { variant: "cell", className: "w-14", onClick: onRestore, "aria-label": "Unarchive chat", children: /* @__PURE__ */ jsx(Refresh01LeftIcon, { size: 24 }) }),
           showBack && !isArchivedView && menuItems.length > 0 && /* @__PURE__ */ jsx(
             ActionsMenuDropdown,
             {
               triggerAriaLabel: "Chat actions",
               onCloseAutoFocus: (e) => e.preventDefault(),
               groups: [{ items: menuItems }],
-              customTrigger: /* @__PURE__ */ jsx(ChatHeaderIconButton, { "aria-label": "Chat actions", children: /* @__PURE__ */ jsx(Ellipsis01Icon, { size: 24 }) })
+              customTrigger: /* @__PURE__ */ jsx(Button, { variant: "cell", className: "w-14", "aria-label": "Chat actions", children: /* @__PURE__ */ jsx(Ellipsis01Icon, { size: 24 }) })
             }
           ),
-          !showBack && !searchInline && onToggleSearch && /* @__PURE__ */ jsx(ChatHeaderIconButton, { onClick: onToggleSearch, "aria-label": "Search chats", "aria-pressed": searchActive, children: /* @__PURE__ */ jsx(SearchIcon, { size: 24 }) }),
-          !showBack && onOpenArchive && /* @__PURE__ */ jsx(ChatHeaderIconButton, { onClick: onOpenArchive, "aria-label": "Chat archive", children: /* @__PURE__ */ jsx(ClockHistoryIcon, { size: 24 }) }),
-          onClose && /* @__PURE__ */ jsx(ChatHeaderIconButton, { onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx(XmarkIcon, { size: 24 }) })
+          !showBack && !searchInline && onToggleSearch && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "cell",
+              className: "w-14",
+              onClick: onToggleSearch,
+              "aria-label": "Search chats",
+              "aria-pressed": searchActive,
+              children: /* @__PURE__ */ jsx(SearchIcon, { size: 24 })
+            }
+          ),
+          !showBack && onOpenArchive && /* @__PURE__ */ jsx(Button, { variant: "cell", className: "w-14", onClick: onOpenArchive, "aria-label": "Chat archive", children: /* @__PURE__ */ jsx(ClockHistoryIcon, { size: 24 }) }),
+          onClose && /* @__PURE__ */ jsx(Button, { variant: "cell", className: "w-14", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx(XmarkIcon, { size: 24 }) })
         ]
       }
     )

package/dist/components/chat/chat-sidebar.d.ts

@@ -1,4 +1,8 @@
 import type { ChatSidebarProps, DialogListItemProps } from './types';
+/**
+ * One dialog row. ONE switch (`useLoadingScope() || loading`): while the dialog is read the SAME row (inert, not
+ * clickable) draws its title and time as bars and its chevron (static) for real.
+ */
 declare const DialogListItem: import("react").ForwardRefExoticComponent<DialogListItemProps & import("react").RefAttributes<HTMLDivElement>>;
 declare const ChatSidebar: import("react").ForwardRefExoticComponent<ChatSidebarProps & import("react").RefAttributes<HTMLDivElement>>;
 export { ChatSidebar, DialogListItem };

package/dist/components/chat/chat-sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chat-sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/chat/chat-sidebar.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAErE,QAAA,MAAM,cAAc,gHAgEnB,CAAC;AAIF,QAAA,MAAM,WAAW,6GAiHhB,CAAC;AAIF,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"chat-sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/chat/chat-sidebar.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,gBAAgB,EAAc,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAKjF;;;GAGG;AACH,QAAA,MAAM,cAAc,gHAyEnB,CAAC;AAgBF,QAAA,MAAM,WAAW,6GAmHhB,CAAC;AAIF,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,CAAC"}