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

package/dist/components/chat/mingo-chat-history.js

@@ -4,13 +4,22 @@ import { useState, useMemo, useRef, useEffect } from "react";
 import { cn } from "../../utils/cn.js";
 import { Ellipsis01Icon, SearchXmarkIcon } from "../icons-v2-generated/index.js";
 import { LoadingRegion } from "../loading/loading-region.js";
-import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { TextLineSkeleton } from "../loading/unified-skeleton.js";
 import { ActionsMenuDropdown } from "../ui/actions-menu.js";
 import { Button } from "../ui/button/index.js";
+import { LoadingItems, loadingItemProps, useLoadingScope } from "../ui/loading-scope.js";
 import { ScrollFadeOverlay, useScrollFade } from "../ui/scroll-fade.js";
 import { SquareAvatar } from "../ui/square-avatar.js";
 import { chatDialogMenuItems } from "./chat-dialog-menu-items.js";
 import { ChatListEmptyState } from "./chat-list-empty-state.js";
+import { SKELETON_TITLE_WIDTHS } from "./chat-nav-sidebar.js";
+const CHAT_HISTORY_PAGE_SIZE = 20;
+const HISTORY_GROUP_CLASS = "flex flex-col gap-[var(--spacing-system-xxs)]";
+const HISTORY_GROUP_LABEL_CLASS = "text-ods-text-secondary text-h5";
+const HISTORY_GROUP_BOX_CLASS = "overflow-hidden rounded-md border border-ods-border";
+const HISTORY_ROW_CLASS = "flex h-12 items-center border-b border-ods-border last:border-b-0";
+const HISTORY_ROW_CONTENT_CLASS = "p-[var(--spacing-system-s)]";
+const HISTORY_SKELETON_GROUPS = 2;
 function dialogTime(d) {
   if (!d.timestamp) return null;
   const t = typeof d.timestamp === "string" ? Date.parse(d.timestamp) : d.timestamp.getTime();
@@ -37,53 +46,66 @@ function groupDialogs(dialogs) {
 }
 function MingoChatHistoryRow({
   dialog,
-  isActive,
+  isActive = false,
+  loading: loadingProp = false,
+  skeletonIndex = 0,
   onSelect,
   onRequestCopyLink,
   onRequestRename,
   onRequestCompact,
-  onRequestArchive
+  onRequestArchive,
+  ...props
 }) {
-  const title = dialog.title || "Untitled Chat";
-  const unread = dialog.unreadMessagesCount ?? 0;
-  const hasMenu = !!onRequestRename || !!onRequestArchive || !!onRequestCopyLink || !!onRequestCompact;
-  const owner = dialog.owner;
-  const hasAvatar = !!(owner?.name || owner?.avatarUrl);
+  const loading = useLoadingScope() || loadingProp || !dialog;
+  const title = dialog?.title || "Untitled Chat";
+  const unread = dialog?.unreadMessagesCount ?? 0;
+  const hasMenu = !loading && (!!onRequestRename || !!onRequestArchive || !!onRequestCopyLink || !!onRequestCompact);
+  const owner = dialog?.owner;
+  const hasAvatar = !loading && !!(owner?.name || owner?.avatarUrl);
   const [menuOpen, setMenuOpen] = useState(false);
-  const menuItems = chatDialogMenuItems({
+  const menuItems = dialog ? chatDialogMenuItems({
     onCopyLink: onRequestCopyLink && (() => onRequestCopyLink(dialog)),
     onRename: onRequestRename && (() => onRequestRename(dialog)),
     onCompact: onRequestCompact && (() => onRequestCompact(dialog)),
     onArchive: onRequestArchive && (() => onRequestArchive(dialog))
-  });
+  }) : [];
+  const select = () => dialog && onSelect?.(dialog.id);
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ...loadingItemProps(props),
+      "aria-hidden": loading || void 0,
       className: cn(
-        "group/row relative flex h-12 items-center border-b border-ods-border transition-colors last:border-b-0",
+        HISTORY_ROW_CLASS,
+        "group/row relative transition-colors",
         // Active (selected) dialog — Figma 259:91610: an accent-secondary
         // fill, a 4px accent bar down the leading edge, and accent-colored
         // title text. Inactive rows keep the dark surface with a hover tint.
-        isActive ? "bg-ods-accent-secondary" : "bg-ods-bg hover:bg-ods-bg-hover"
+        isActive ? "bg-ods-accent-secondary" : cn("bg-ods-bg", !loading && "hover:bg-ods-bg-hover")
       ),
       children: [
         isActive ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "pointer-events-none absolute inset-y-0 left-0 w-1 bg-ods-accent" }) : null,
         /* @__PURE__ */ jsxs(
           "div",
           {
-            role: "button",
-            tabIndex: 0,
-            onClick: () => onSelect?.(dialog.id),
-            onKeyDown: (e) => {
+            role: loading ? void 0 : "button",
+            tabIndex: loading ? void 0 : 0,
+            onClick: loading ? void 0 : select,
+            onKeyDown: loading ? void 0 : (e) => {
               if (e.key === "Enter" || e.key === " ") {
                 e.preventDefault();
-                onSelect?.(dialog.id);
+                select();
               }
             },
-            className: "flex min-w-0 flex-1 cursor-pointer items-center gap-[var(--spacing-system-xsf)] p-[var(--spacing-system-s)] focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-accent",
+            className: cn(
+              HISTORY_ROW_CONTENT_CLASS,
+              "flex min-w-0 flex-1 items-center gap-[var(--spacing-system-xsf)]",
+              !loading && "cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-accent"
+            ),
             children: [
-              unread > 0 ? /* @__PURE__ */ jsx("span", { className: "flex h-8 min-w-8 shrink-0 items-center justify-center rounded-md bg-ods-accent px-[var(--spacing-system-xsf)] text-ods-text-on-accent text-h5", children: unread > 99 ? "99+" : unread }) : null,
-              /* @__PURE__ */ jsx(
+              loading ? /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h4", className: SKELETON_TITLE_WIDTHS[skeletonIndex % SKELETON_TITLE_WIDTHS.length] }) : null,
+              !loading && unread > 0 ? /* @__PURE__ */ jsx("span", { className: "flex h-8 min-w-8 shrink-0 items-center justify-center rounded-md bg-ods-accent px-[var(--spacing-system-xsf)] text-ods-text-on-accent text-h5", children: unread > 99 ? "99+" : unread }) : null,
+              loading ? null : /* @__PURE__ */ jsx(
                 "span",
                 {
                   className: cn("min-w-0 flex-1 truncate text-h4", isActive ? "text-ods-accent" : "text-ods-text-primary"),
@@ -144,7 +166,7 @@ function MingoChatHistoryRow({
               /* @__PURE__ */ jsx(
                 "span",
                 {
-                  onClick: () => onSelect?.(dialog.id),
+                  onClick: select,
                   title: owner?.name || void 0,
                   className: cn(
                     "absolute inset-0 flex cursor-pointer items-center justify-center transition-opacity",
@@ -170,31 +192,21 @@ function MingoChatHistoryRow({
     }
   );
 }
-function MingoChatHistorySkeleton({
-  region = true,
-  className
-}) {
-  const groups = [
-    ["w-3/5", "w-4/5", "w-2/5", "w-3/4"],
-    ["w-1/2", "w-2/3"]
-  ];
+function MingoChatHistorySkeleton({ rows, className }) {
+  const perGroup = Math.ceil(rows / HISTORY_SKELETON_GROUPS);
+  const groups = Array.from(
+    { length: HISTORY_SKELETON_GROUPS },
+    (_, group) => Math.max(0, Math.min(perGroup, rows - group * perGroup))
+  ).filter((count) => count > 0);
   return /* @__PURE__ */ jsx(
     LoadingRegion,
     {
       label: "Loading conversations",
-      announce: region,
       className: cn("flex min-h-0 flex-1 flex-col gap-[var(--spacing-system-m)] overflow-hidden", className),
-      children: groups.map((widths, g) => /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-col gap-[var(--spacing-system-xxs)]", children: [
-        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-16 rounded" }),
-        /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-md border border-ods-border", children: widths.map((w, i) => /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "flex h-12 items-center border-b border-ods-border bg-ods-bg px-[var(--spacing-system-s)] last:border-b-0",
-            children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: cn("h-4 rounded", w) })
-          },
-          i
-        )) })
-      ] }, g))
+      children: groups.map((count, group) => /* @__PURE__ */ jsxs("div", { className: cn(HISTORY_GROUP_CLASS, "shrink-0"), children: [
+        /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h5", className: "w-16" }),
+        /* @__PURE__ */ jsx("div", { className: HISTORY_GROUP_BOX_CLASS, children: /* @__PURE__ */ jsx(LoadingItems, { count, children: (i) => /* @__PURE__ */ jsx(MingoChatHistoryRow, { loading: true, "data-loading-item": true, skeletonIndex: group * perGroup + i }) }) })
+      ] }, group))
     }
   );
 }
@@ -210,8 +222,11 @@ function MingoChatHistory({
   hasMore = false,
   isLoadingMore = false,
   onLoadMore,
+  loading = false,
+  pageSize = CHAT_HISTORY_PAGE_SIZE,
   className
 }) {
+  const isLoading = useLoadingScope() || loading;
   const groups = useMemo(() => groupDialogs(dialogs), [dialogs]);
   const noSearchResults = groups.length === 0 && !!searchQuery?.trim();
   const { scrollRef, fadeTop, fadeBottom, update: updateFade } = useScrollFade();
@@ -238,6 +253,7 @@ function MingoChatHistory({
     io.observe(sentinel);
     return () => io.disconnect();
   }, [hasMore, isLoadingMore, dialogCount, scrollRef]);
+  if (isLoading) return /* @__PURE__ */ jsx(MingoChatHistorySkeleton, { rows: pageSize, className });
   return /* @__PURE__ */ jsx("div", { className: cn("relative flex min-h-0 flex-1 flex-col gap-[var(--spacing-system-m)]", className), children: /* @__PURE__ */ jsxs("div", { className: "relative flex min-h-0 flex-1 flex-col", children: [
     /* @__PURE__ */ jsxs(
       "div",
@@ -257,11 +273,12 @@ function MingoChatHistory({
                 description: "Try a different search term"
               }
             )
-          ) : groups.map((group) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--spacing-system-xxs)]", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-ods-text-secondary text-h5", children: group.label }),
-            /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-md border border-ods-border", children: group.items.map((dialog) => /* @__PURE__ */ jsx(
+          ) : groups.map((group) => /* @__PURE__ */ jsxs("div", { className: HISTORY_GROUP_CLASS, children: [
+            /* @__PURE__ */ jsx("p", { className: HISTORY_GROUP_LABEL_CLASS, children: group.label }),
+            /* @__PURE__ */ jsx("div", { className: HISTORY_GROUP_BOX_CLASS, children: group.items.map((dialog) => /* @__PURE__ */ jsx(
               MingoChatHistoryRow,
               {
+                "data-loading-item": true,
                 dialog,
                 isActive: dialog.id === activeDialogId,
                 onSelect: onSelectDialog,
@@ -282,6 +299,6 @@ function MingoChatHistory({
   ] }) });
 }
 export {
-  MingoChatHistory,
-  MingoChatHistorySkeleton
+  CHAT_HISTORY_PAGE_SIZE,
+  MingoChatHistory
 };

package/dist/components/chat/mingo-chat-modals.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mingo-chat-modals.d.ts","sourceRoot":"","sources":["../../../src/components/chat/mingo-chat-modals.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAc1D,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,OAAO,CAAC;IAChB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,4DAA4D;IAC5D,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAED,oDAAoD;AACpD,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,WAAgB,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,oBAAoB,+BA+ClG;AAMD,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,mEAAmE;IACnE,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,kEAAkE;AAClE,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,qBAAqB,+BAiBrF;AAMD,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,yDAAyD;IACzD,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED;6DAC6D;AAC7D,wBAAgB,kBAAkB,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,uBAAuB,+BAiBzF;AAMD,MAAM,WAAW,qBAAqB;IACpC,+CAA+C;IAC/C,YAAY,EAAE,UAAU,GAAG,IAAI,CAAC;IAChC,eAAe,EAAE,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC;IACrD,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,gDAAgD;IAChD,aAAa,EAAE,UAAU,GAAG,IAAI,CAAC;IACjC,gBAAgB,EAAE,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC;IACtD,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,0DAA0D;IAC1D,aAAa,EAAE,UAAU,GAAG,IAAI,CAAC;IACjC,gBAAgB,EAAE,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC;IACtD,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,YAAY,EACZ,eAAe,EACf,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,gBAAgB,EAChB,aAAa,EACb,gBAAgB,EAChB,gBAAgB,GACjB,EAAE,qBAAqB,+BAqBvB"}
+{"version":3,"file":"mingo-chat-modals.d.ts","sourceRoot":"","sources":["../../../src/components/chat/mingo-chat-modals.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAS1D,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,OAAO,CAAC;IAChB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,4DAA4D;IAC5D,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAED,oDAAoD;AACpD,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,WAAgB,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,oBAAoB,+BA+ClG;AAMD,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,mEAAmE;IACnE,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,kEAAkE;AAClE,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,qBAAqB,+BAiBrF;AAMD,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,yDAAyD;IACzD,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED;6DAC6D;AAC7D,wBAAgB,kBAAkB,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,uBAAuB,+BAiBzF;AAMD,MAAM,WAAW,qBAAqB;IACpC,+CAA+C;IAC/C,YAAY,EAAE,UAAU,GAAG,IAAI,CAAC;IAChC,eAAe,EAAE,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC;IACrD,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,gDAAgD;IAChD,aAAa,EAAE,UAAU,GAAG,IAAI,CAAC;IACjC,gBAAgB,EAAE,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC;IACtD,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,0DAA0D;IAC1D,aAAa,EAAE,UAAU,GAAG,IAAI,CAAC;IACjC,gBAAgB,EAAE,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC;IACtD,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,YAAY,EACZ,eAAe,EACf,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,gBAAgB,EAChB,aAAa,EACb,gBAAgB,EAChB,gBAAgB,GACjB,EAAE,qBAAqB,+BAqBvB"}

package/dist/components/chat/mingo-chat-modals.js

@@ -1,12 +1,10 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { cn } from "../../utils/cn.js";
+import { Button } from "../ui/button/index.js";
+import { Label } from "../ui/label.js";
 import { ModalV2, ModalV2Header, ModalV2Title, ModalV2Footer } from "../ui/modal-v2.js";
-const footerBtn = "flex-1 min-w-0 rounded-md px-[var(--spacing-system-m)] py-[var(--spacing-system-sf)] text-h3 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent disabled:opacity-50 disabled:cursor-not-allowed";
-const cancelBtn = cn(footerBtn, "border border-ods-border bg-transparent text-ods-text-primary hover:bg-ods-bg-hover");
-const saveBtn = cn(footerBtn, "bg-ods-accent text-ods-text-on-accent hover:bg-ods-accent-hover");
-const dangerBtn = cn(footerBtn, "bg-ods-error text-ods-text-on-accent hover:opacity-90");
+const footerBtn = "min-w-0 flex-1";
 function RenameChatModal({ isOpen, initialName = "", onClose, onSave }) {
   const [name, setName] = useState(initialName);
   const [seededWith, setSeededWith] = useState({ isOpen, initialName });
@@ -21,7 +19,7 @@ function RenameChatModal({ isOpen, initialName = "", onClose, onSave }) {
   return /* @__PURE__ */ jsxs(ModalV2, { isOpen, onClose, className: "md:max-w-[600px]", children: [
     /* @__PURE__ */ jsx(ModalV2Header, { children: /* @__PURE__ */ jsx(ModalV2Title, { children: "Rename Chat" }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-[var(--spacing-system-xxs)]", children: [
-      /* @__PURE__ */ jsx("label", { htmlFor: "rename-chat-input", className: "text-ods-text-primary text-h4", children: "Chat Name" }),
+      /* @__PURE__ */ jsx(Label, { htmlFor: "rename-chat-input", variant: "large", children: "Chat Name" }),
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -37,8 +35,8 @@ function RenameChatModal({ isOpen, initialName = "", onClose, onSave }) {
       )
     ] }),
     /* @__PURE__ */ jsxs(ModalV2Footer, { children: [
-      /* @__PURE__ */ jsx("button", { type: "button", onClick: onClose, className: cancelBtn, children: "Cancel" }),
-      /* @__PURE__ */ jsx("button", { type: "button", onClick: save, disabled: !canSave, className: saveBtn, children: "Save" })
+      /* @__PURE__ */ jsx(Button, { variant: "outline", type: "button", onClick: onClose, className: footerBtn, children: "Cancel" }),
+      /* @__PURE__ */ jsx(Button, { variant: "accent", type: "button", onClick: save, disabled: !canSave, className: footerBtn, children: "Save" })
     ] })
   ] });
 }
@@ -47,8 +45,8 @@ function ArchiveChatModal({ isOpen, onClose, onConfirm }) {
     /* @__PURE__ */ jsx(ModalV2Header, { children: /* @__PURE__ */ jsx(ModalV2Title, { children: "Archive Chat" }) }),
     /* @__PURE__ */ jsx("p", { className: "w-full text-ods-text-primary text-h4", children: "This chat will be hidden from your current chats." }),
     /* @__PURE__ */ jsxs(ModalV2Footer, { children: [
-      /* @__PURE__ */ jsx("button", { type: "button", onClick: onClose, className: cancelBtn, children: "Cancel" }),
-      /* @__PURE__ */ jsx("button", { type: "button", onClick: onConfirm, className: dangerBtn, children: "Archive Chat" })
+      /* @__PURE__ */ jsx(Button, { variant: "outline", type: "button", onClick: onClose, className: footerBtn, children: "Cancel" }),
+      /* @__PURE__ */ jsx(Button, { variant: "destructive", type: "button", onClick: onConfirm, className: footerBtn, children: "Archive Chat" })
     ] })
   ] });
 }
@@ -57,8 +55,8 @@ function UnarchiveChatModal({ isOpen, onClose, onConfirm }) {
     /* @__PURE__ */ jsx(ModalV2Header, { children: /* @__PURE__ */ jsx(ModalV2Title, { children: "Unarchive Chat" }) }),
     /* @__PURE__ */ jsx("p", { className: "w-full text-ods-text-primary text-h4", children: "This chat will be moved back to your current chats." }),
     /* @__PURE__ */ jsxs(ModalV2Footer, { children: [
-      /* @__PURE__ */ jsx("button", { type: "button", onClick: onClose, className: cancelBtn, children: "Cancel" }),
-      /* @__PURE__ */ jsx("button", { type: "button", onClick: onConfirm, className: saveBtn, children: "Unarchive Chat" })
+      /* @__PURE__ */ jsx(Button, { variant: "outline", type: "button", onClick: onClose, className: footerBtn, children: "Cancel" }),
+      /* @__PURE__ */ jsx(Button, { variant: "accent", type: "button", onClick: onConfirm, className: footerBtn, children: "Unarchive Chat" })
     ] })
   ] });
 }

package/dist/components/chat/mingo-chat-rail.d.ts

@@ -36,8 +36,10 @@ export interface MingoChatRailProps {
     hasMore?: boolean;
     isLoadingMore?: boolean;
     onLoadMore?: () => void;
-    /** The first page is still loading. */
+    /** The first page is still loading: the list draws one page of loading rows. */
     isLoadingHistory?: boolean;
+    /** The host's page size: how many rows the loading state draws. Default `CHAT_HISTORY_PAGE_SIZE`. */
+    pageSize?: number;
     /** The list failed to load with nothing cached. */
     loadError?: boolean;
     onRetry?: () => void;
@@ -52,5 +54,5 @@ export interface MingoChatRailProps {
  * status at the end. Row actions (rename, archive, ...) sit behind a ⋯ that
  * replaces the status on hover.
  */
-export declare function MingoChatRail({ dialogs, activeDialogId, onSelectDialog, draftTitle, onNewChat, onOpenArchive, archiveActive, onWhatToAsk, statusOf, onRequestRename, onRequestArchive, onRequestCopyLink, onRequestCompact, scope, onScopeChange, searchQuery, onSearchChange, hasMore, isLoadingMore, onLoadMore, isLoadingHistory, loadError, onRetry, onExpand, className, }: MingoChatRailProps): import("react").JSX.Element;
+export declare function MingoChatRail({ dialogs, activeDialogId, onSelectDialog, draftTitle, onNewChat, onOpenArchive, archiveActive, onWhatToAsk, statusOf, onRequestRename, onRequestArchive, onRequestCopyLink, onRequestCompact, scope, onScopeChange, searchQuery, onSearchChange, hasMore, isLoadingMore, onLoadMore, isLoadingHistory, pageSize, loadError, onRetry, onExpand, className, }: MingoChatRailProps): import("react").JSX.Element;
 //# sourceMappingURL=mingo-chat-rail.d.ts.map

package/dist/components/chat/mingo-chat-rail.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mingo-chat-rail.d.ts","sourceRoot":"","sources":["../../../src/components/chat/mingo-chat-rail.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE1D;;;;;GAKG;AACH,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;AAElE,MAAM,WAAW,kBAAkB;IACjC,qCAAqC;IACrC,OAAO,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC;0EACsE;IACtE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,wEAAwE;IACxE,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oEAAoE;IACpE,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,iBAAiB,GAAG,SAAS,CAAC;IACjE,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAC/C,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAChD,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACjD,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAChD,gFAAgF;IAChF,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACnD,8EAA8E;IAC9E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,uCAAuC;IACvC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,mDAAmD;IACnD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAYD;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,cAAc,EACd,cAAc,EACd,UAAU,EACV,SAAS,EACT,aAAa,EACb,aAAqB,EACrB,WAAW,EACX,QAAQ,EACR,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAChB,KAAK,EACL,aAAa,EACb,WAAW,EACX,cAAc,EACd,OAAe,EACf,aAAqB,EACrB,UAAU,EACV,gBAAwB,EACxB,SAAiB,EACjB,OAAO,EACP,QAAQ,EACR,SAAS,GACV,EAAE,kBAAkB,+BA2LpB"}
+{"version":3,"file":"mingo-chat-rail.d.ts","sourceRoot":"","sources":["../../../src/components/chat/mingo-chat-rail.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE1D;;;;;GAKG;AACH,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;AAElE,MAAM,WAAW,kBAAkB;IACjC,qCAAqC;IACrC,OAAO,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC;0EACsE;IACtE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,wEAAwE;IACxE,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oEAAoE;IACpE,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,iBAAiB,GAAG,SAAS,CAAC;IACjE,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAC/C,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAChD,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACjD,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAChD,gFAAgF;IAChF,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACnD,8EAA8E;IAC9E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,gFAAgF;IAChF,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,qGAAqG;IACrG,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mDAAmD;IACnD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAYD;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,cAAc,EACd,cAAc,EACd,UAAU,EACV,SAAS,EACT,aAAa,EACb,aAAqB,EACrB,WAAW,EACX,QAAQ,EACR,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAChB,KAAK,EACL,aAAa,EACb,WAAW,EACX,cAAc,EACd,OAAe,EACf,aAAqB,EACrB,UAAU,EACV,gBAAwB,EACxB,QAAiC,EACjC,SAAiB,EACjB,OAAO,EACP,QAAQ,EACR,SAAS,GACV,EAAE,kBAAkB,+BA4LpB"}

package/dist/components/chat/mingo-chat-rail.js

@@ -19,13 +19,14 @@ import {
   UserIcon,
   UsersIcon
 } from "../icons-v2-generated/index.js";
-import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
 import { ActionsMenuDropdown } from "../ui/actions-menu.js";
 import { Button } from "../ui/button/index.js";
+import { loadingItemProps, useLoadingScope } from "../ui/loading-scope.js";
 import { chatDialogMenuItems } from "./chat-dialog-menu-items.js";
 import { ChatHeaderSearchField } from "./chat-header-search-field.js";
 import { ChatListEmptyState } from "./chat-list-empty-state.js";
-import { ChatListItem, ChatNavSidebar } from "./chat-nav-sidebar.js";
+import { ChatListItem, ChatListItemLoadingPage, ChatNavSidebar } from "./chat-nav-sidebar.js";
+import { CHAT_HISTORY_PAGE_SIZE } from "./mingo-chat-history.js";
 const STATUS_GLYPHS = {
   working: { icon: /* @__PURE__ */ jsx(DotsLoaderIcon, { className: "text-ods-text-secondary" }), label: "Mingo is working" },
   unread: { icon: /* @__PURE__ */ jsx(MessageIndicatorIcon, { className: "text-ods-accent" }), label: "New reply" },
@@ -56,11 +57,13 @@ function MingoChatRail({
   isLoadingMore = false,
   onLoadMore,
   isLoadingHistory = false,
+  pageSize = CHAT_HISTORY_PAGE_SIZE,
   loadError = false,
   onRetry,
   onExpand,
   className
 }) {
+  const loading = useLoadingScope() || isLoadingHistory;
   const [searchOpen, setSearchOpen] = useState(!!searchQuery?.trim());
   const hasSearch = !!searchQuery?.trim();
   const items = [];
@@ -136,8 +139,8 @@ function MingoChatRail({
       ] }),
       onRetry && /* @__PURE__ */ jsx(Button, { variant: "outline", size: "small", leftIcon: /* @__PURE__ */ jsx(Refresh01RightIcon, {}), onClick: onRetry, children: "Try again" })
     ] });
-  } else if (isLoadingHistory) {
-    list = Array.from({ length: 6 }, (_, i) => /* @__PURE__ */ jsx(UnifiedSkeleton, { "aria-hidden": true, className: "h-10 shrink-0 rounded-md" }, i));
+  } else if (loading) {
+    list = /* @__PURE__ */ jsx(ChatListItemLoadingPage, { count: pageSize });
   } else if (dialogs.length === 0 && !draftTitle) {
     list = hasSearch ? /* @__PURE__ */ jsx("p", { className: "px-[var(--spacing-system-xs)] py-[var(--spacing-system-s)] text-ods-text-secondary text-h6", children: "No chats found" }) : /* @__PURE__ */ jsx(
       ChatListEmptyState,
@@ -153,6 +156,7 @@ function MingoChatRail({
       dialogs.map((dialog) => /* @__PURE__ */ jsx(
         MingoChatRailRow,
         {
+          "data-loading-item": true,
           dialog,
           active: dialog.id === activeDialogId,
           status: statusFor(dialog, statusOf),
@@ -222,12 +226,12 @@ function MingoChatRail({
     }
   );
 }
-function MingoChatRailRow({ dialog, active, status, onSelect, menuItems }) {
+function MingoChatRailRow({ dialog, active, status, onSelect, menuItems, ...props }) {
   const [menuOpen, setMenuOpen] = useState(false);
   const hasMenu = menuItems.length > 0;
   const glyph = status ? STATUS_GLYPHS[status] : void 0;
   const title = dialog.title || "Untitled Chat";
-  return /* @__PURE__ */ jsxs("div", { className: "group/row relative shrink-0", children: [
+  return /* @__PURE__ */ jsxs("div", { ...loadingItemProps(props), className: "group/row relative shrink-0", children: [
     /* @__PURE__ */ jsx(
       ChatListItem,
       {

package/dist/components/chat/mingo-history-rail.d.ts

@@ -38,9 +38,12 @@ export interface MingoHistoryRailProps {
     isLoadingMore?: boolean;
     /** Fetch the next page. */
     onLoadMore?: () => void;
-    /** True while the FIRST page of dialogs is still loading. Renders a skeleton
-     *  so the rail doesn't flash the empty state before the list arrives. */
+    /** True while the FIRST page of dialogs is still loading. The list draws its
+     *  own loading state so the rail doesn't flash the empty state before the list arrives. */
     isLoadingHistory?: boolean;
+    /** The host's page size: how many rows the list's loading state draws. Default
+     *  `CHAT_HISTORY_PAGE_SIZE`. */
+    pageSize?: number;
     /** The dialog-list load FAILED with nothing cached — renders an error + retry
      *  block instead of the empty state. */
     loadError?: boolean;
@@ -61,5 +64,5 @@ export interface MingoHistoryRailProps {
  * empty state; loading / error states mirror the stacked empty state so the
  * two layouts stay consistent.
  */
-export declare function MingoHistoryRail({ dialogs, activeDialogId, onSelectDialog, onNewChat, onRequestRename, onRequestArchive, onRequestCopyLink, onRequestCompact, scope, onScopeChange, searchQuery, hasMore, isLoadingMore, onLoadMore, isLoadingHistory, loadError, onRetry, className, }: MingoHistoryRailProps): import("react").JSX.Element;
+export declare function MingoHistoryRail({ dialogs, activeDialogId, onSelectDialog, onNewChat, onRequestRename, onRequestArchive, onRequestCopyLink, onRequestCompact, scope, onScopeChange, searchQuery, hasMore, isLoadingMore, onLoadMore, isLoadingHistory, pageSize, loadError, onRetry, className, }: MingoHistoryRailProps): import("react").JSX.Element;
 //# sourceMappingURL=mingo-history-rail.d.ts.map

package/dist/components/chat/mingo-history-rail.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mingo-history-rail.d.ts","sourceRoot":"","sources":["../../../src/components/chat/mingo-history-rail.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAM1D;4CAC4C;AAC5C,MAAM,MAAM,iBAAiB,GAAG,IAAI,GAAG,KAAK,CAAC;AAE7C,MAAM,WAAW,qBAAqB;IACpC,wEAAwE;IACxE,OAAO,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACnC,8CAA8C;IAC9C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qBAAqB;IACrB,cAAc,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC;;+DAE2D;IAC3D,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,6DAA6D;IAC7D,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAC/C,+DAA+D;IAC/D,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAChD,0EAA0E;IAC1E,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACjD,iFAAiF;IACjF,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAChD;;;sCAGkC;IAClC,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,mDAAmD;IACnD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACnD;;4BAEwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uDAAuD;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2CAA2C;IAC3C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,2BAA2B;IAC3B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB;6EACyE;IACzE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;4CACwC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,cAAc,EACd,cAAc,EACd,SAAS,EACT,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAChB,KAAK,EACL,aAAa,EACb,WAAW,EACX,OAAe,EACf,aAAqB,EACrB,UAAU,EACV,gBAAwB,EACxB,SAAiB,EACjB,OAAO,EACP,SAAS,GACV,EAAE,qBAAqB,+BAuFvB"}
+{"version":3,"file":"mingo-history-rail.d.ts","sourceRoot":"","sources":["../../../src/components/chat/mingo-history-rail.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAM1D;4CAC4C;AAC5C,MAAM,MAAM,iBAAiB,GAAG,IAAI,GAAG,KAAK,CAAC;AAE7C,MAAM,WAAW,qBAAqB;IACpC,wEAAwE;IACxE,OAAO,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACnC,8CAA8C;IAC9C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qBAAqB;IACrB,cAAc,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC;;+DAE2D;IAC3D,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,6DAA6D;IAC7D,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAC/C,+DAA+D;IAC/D,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAChD,0EAA0E;IAC1E,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACjD,iFAAiF;IACjF,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAChD;;;sCAGkC;IAClC,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,mDAAmD;IACnD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACnD;;4BAEwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uDAAuD;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2CAA2C;IAC3C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,2BAA2B;IAC3B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB;+FAC2F;IAC3F,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;oCACgC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;4CACwC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,cAAc,EACd,cAAc,EACd,SAAS,EACT,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAChB,KAAK,EACL,aAAa,EACb,WAAW,EACX,OAAe,EACf,aAAqB,EACrB,UAAU,EACV,gBAAwB,EACxB,QAAQ,EACR,SAAiB,EACjB,OAAO,EACP,SAAS,GACV,EAAE,qBAAqB,+BAwFvB"}

package/dist/components/chat/mingo-history-rail.js

@@ -5,9 +5,10 @@ import { AlertCircleIcon, Refresh01RightIcon } from "../icons-v2-generated/index
 import { ChatsIcon } from "../icons-v2-generated/communication/chats-icon.js";
 import { PlusCircleIcon } from "../icons-v2-generated/signs-and-symbols/plus-circle-icon.js";
 import { Button } from "../ui/button/index.js";
+import { useLoadingScope } from "../ui/loading-scope.js";
 import { TabSelector } from "../ui/tab-selector.js";
 import { ChatListEmptyState } from "./chat-list-empty-state.js";
-import { MingoChatHistory, MingoChatHistorySkeleton } from "./mingo-chat-history.js";
+import { MingoChatHistory } from "./mingo-chat-history.js";
 function MingoHistoryRail({
   dialogs,
   activeDialogId,
@@ -24,10 +25,12 @@ function MingoHistoryRail({
   isLoadingMore = false,
   onLoadMore,
   isLoadingHistory = false,
+  pageSize,
   loadError = false,
   onRetry,
   className
 }) {
+  const loading = useLoadingScope() || isLoadingHistory;
   const hasSearch = !!searchQuery?.trim();
   const hasList = dialogs.length > 0 || hasSearch;
   return /* @__PURE__ */ jsxs(
@@ -68,9 +71,11 @@ function MingoHistoryRail({
             /* @__PURE__ */ jsx("p", { className: "text-ods-text-secondary text-h6", children: "Something went wrong reaching the server. Try again." })
           ] }),
           onRetry && /* @__PURE__ */ jsx(Button, { variant: "outline", size: "small", leftIcon: /* @__PURE__ */ jsx(Refresh01RightIcon, {}), onClick: onRetry, children: "Try again" })
-        ] }) : isLoadingHistory ? /* @__PURE__ */ jsx(MingoChatHistorySkeleton, {}) : hasList ? /* @__PURE__ */ jsx(
+        ] }) : loading || hasList ? /* @__PURE__ */ jsx(
           MingoChatHistory,
           {
+            loading,
+            pageSize,
             dialogs,
             activeDialogId,
             onSelectDialog,

package/dist/components/chat/mingo-info-card.d.ts

@@ -64,6 +64,11 @@ export interface MingoInfoCardProps {
      * affordances. The "⋯" button keeps its own independent click target.
      */
     onClick?: () => void;
+    /**
+     * Draws the card's loading form (its `MingoInfoCardSkeleton`): a card whose record is still being read. Inside a
+     * loading scope the card draws it too.
+     */
+    loading?: boolean;
     /** Appended to the root element. */
     className?: string;
 }
@@ -75,11 +80,5 @@ export interface MingoInfoCardAnchorProps {
     rel?: string;
     onClick?: (e: MouseEvent<HTMLAnchorElement>) => void;
 }
-/** Loading placeholder matching `MingoInfoCard` geometry (40px media box,
- *  title + description lines, trailing pill slot). Span-only for the same
- *  inside-`<p>` validity reason as the card itself. */
-export declare function MingoInfoCardSkeleton({ className }: {
-    className?: string;
-}): import("react").JSX.Element;
-export declare function MingoInfoCard({ title, description, imageSrc, imageAlt, icon, status, menuGroups, menuAriaLabel, anchorProps, onClick, className, }: MingoInfoCardProps): import("react").JSX.Element;
+export declare function MingoInfoCard({ title, description, imageSrc, imageAlt, icon, status, menuGroups, menuAriaLabel, anchorProps, onClick, loading: loadingProp, className, }: MingoInfoCardProps): import("react").JSX.Element;
 //# sourceMappingURL=mingo-info-card.d.ts.map

package/dist/components/chat/mingo-info-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mingo-info-card.d.ts","sourceRoot":"","sources":["../../../src/components/chat/mingo-info-card.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAiB,KAAK,UAAU,EAAE,KAAK,SAAS,EAAc,MAAM,OAAO,CAAC;AAOnF,OAAO,EAAuB,KAAK,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAChF,OAAO,EAAe,KAAK,QAAQ,EAAE,MAAM,WAAW,CAAC;AAMvD;;;;;GAKG;AACH,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,SAAS,CAAC;IAChB,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAID,wBAAgB,2BAA2B,CAAC,EAC1C,MAAM,EACN,QAAQ,GACT,EAAE;IACD,MAAM,EAAE,mBAAmB,CAAC;IAC5B,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAEA;AAMD,6EAA6E;AAC7E,MAAM,WAAW,mBAAmB;IAClC,gFAAgF;IAChF,KAAK,EAAE,SAAS,CAAC;IACjB,2EAA2E;IAC3E,OAAO,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAC;CAC/B;AAED,MAAM,WAAW,kBAAkB;IACjC,kFAAkF;IAClF,KAAK,EAAE,SAAS,CAAC;IACjB,mFAAmF;IACnF,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,yDAAyD;IACzD,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B;;;OAGG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC7C,oEAAoE;IACpE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;OAIG;IACH,WAAW,CAAC,EAAE,wBAAwB,CAAC;IACvC;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;8EAC8E;AAC9E,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACtD;AAkDD;;uDAEuD;AACvD,wBAAgB,qBAAqB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAgB1E;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,UAAU,EACV,aAA8B,EAC9B,WAAW,EACX,OAAO,EACP,SAAS,GACV,EAAE,kBAAkB,+BA6EpB"}
+{"version":3,"file":"mingo-info-card.d.ts","sourceRoot":"","sources":["../../../src/components/chat/mingo-info-card.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAiB,KAAK,UAAU,EAAE,KAAK,SAAS,EAAc,MAAM,OAAO,CAAC;AAOnF,OAAO,EAAuB,KAAK,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGhF,OAAO,EAAe,KAAK,QAAQ,EAAE,MAAM,WAAW,CAAC;AAMvD;;;;;GAKG;AACH,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,SAAS,CAAC;IAChB,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAID,wBAAgB,2BAA2B,CAAC,EAC1C,MAAM,EACN,QAAQ,GACT,EAAE;IACD,MAAM,EAAE,mBAAmB,CAAC;IAC5B,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAEA;AAKD,6EAA6E;AAC7E,MAAM,WAAW,mBAAmB;IAClC,gFAAgF;IAChF,KAAK,EAAE,SAAS,CAAC;IACjB,2EAA2E;IAC3E,OAAO,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAC;CAC/B;AAED,MAAM,WAAW,kBAAkB;IACjC,kFAAkF;IAClF,KAAK,EAAE,SAAS,CAAC;IACjB,mFAAmF;IACnF,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,yDAAyD;IACzD,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B;;;OAGG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC7C,oEAAoE;IACpE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;OAIG;IACH,WAAW,CAAC,EAAE,wBAAwB,CAAC;IACvC;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;8EAC8E;AAC9E,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACtD;AAuED,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,UAAU,EACV,aAA8B,EAC9B,WAAW,EACX,OAAO,EACP,OAAO,EAAE,WAAmB,EAC5B,SAAS,GACV,EAAE,kBAAkB,+BA8EpB"}

package/dist/components/chat/mingo-info-card.js

@@ -8,6 +8,8 @@ import { personInitials } from "../../utils/format.js";
 import { Ellipsis01Icon } from "../icons-v2-generated/index.js";
 import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
 import { ActionsMenuDropdown } from "../ui/actions-menu.js";
+import { Button } from "../ui/button/index.js";
+import { useLoadingScope } from "../ui/loading-scope.js";
 import { tagVariants } from "../ui/tag.js";
 const MingoInfoCardActionContext = createContext(null);
 function MingoInfoCardActionProvider({
@@ -16,7 +18,7 @@ function MingoInfoCardActionProvider({
 }) {
   return /* @__PURE__ */ jsx(MingoInfoCardActionContext.Provider, { value: action, children });
 }
-const TRAILING_BUTTON_CLASS = "flex w-[56px] shrink-0 items-center justify-center self-stretch text-ods-text-secondary transition-colors hover:bg-ods-bg-hover hover:text-ods-text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-accent active:bg-ods-bg-active active:text-ods-text-primary md:w-[68px]";
+const TRAILING_CELL_LAYOUT = "w-[56px] self-stretch md:w-[68px]";
 function CardMedia({ imageSrc, imageAlt, icon }) {
   if (imageSrc) {
     return /* @__PURE__ */ jsxs("span", { className: "relative block size-10 shrink-0", children: [
@@ -73,10 +75,13 @@ function MingoInfoCard({
   menuAriaLabel = "More actions",
   anchorProps,
   onClick,
+  loading: loadingProp = false,
   className
 }) {
+  const loading = useLoadingScope() || loadingProp;
   const hasMedia = !!imageSrc || !!icon;
   const action = useContext(MingoInfoCardActionContext);
+  if (loading) return /* @__PURE__ */ jsx(MingoInfoCardSkeleton, { className });
   const hasMenu = !action && !!menuGroups && menuGroups.length > 0;
   const isAnchor = !!anchorProps;
   const isInteractive = isAnchor || !!onClick;
@@ -94,34 +99,35 @@ function MingoInfoCard({
   ] });
   const contentClass = cn(
     "flex min-w-0 flex-1 items-center gap-[var(--spacing-system-s)] overflow-hidden p-[var(--spacing-system-s)] text-left",
-    (hasMenu || action) && "border-r border-ods-border",
     isInteractive && "cursor-pointer transition-colors hover:bg-ods-bg-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-accent active:bg-ods-bg-active"
   );
   return /* @__PURE__ */ jsxs(
     "span",
     {
       className: cn(
-        "flex w-full items-center overflow-hidden rounded-md border border-ods-border bg-ods-card",
+        "flex w-full items-center divide-x divide-ods-border overflow-hidden rounded-md border border-ods-border bg-ods-card",
         className
       ),
       children: [
-        isAnchor ? /* @__PURE__ */ jsx(Link, { ...anchorProps, className: cn(contentClass, "no-underline"), children: content }) : onClick ? /* @__PURE__ */ jsx("button", { type: "button", onClick, className: contentClass, children: content }) : /* @__PURE__ */ jsx("span", { className: contentClass, children: content }),
-        action && /* @__PURE__ */ jsx("button", { type: "button", "aria-label": action.label, onClick: action.onClick, className: TRAILING_BUTTON_CLASS, children: action.icon }),
+        isAnchor ? /* @__PURE__ */ jsx(Link, { ...anchorProps, className: cn(contentClass, "no-underline"), children: content }) : onClick ? /* @__PURE__ */ jsx(Button, { variant: "row", type: "button", onClick, className: "min-w-0 flex-1 self-stretch", children: content }) : /* @__PURE__ */ jsx("span", { className: contentClass, children: content }),
+        action && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "cell",
+            type: "button",
+            "aria-label": action.label,
+            onClick: action.onClick,
+            className: TRAILING_CELL_LAYOUT,
+            children: action.icon
+          }
+        ),
         hasMenu && /* @__PURE__ */ jsx(
           ActionsMenuDropdown,
           {
             groups: menuGroups,
             triggerAriaLabel: menuAriaLabel,
             onCloseAutoFocus: (e) => e.preventDefault(),
-            customTrigger: /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                "aria-label": menuAriaLabel,
-                className: TRAILING_BUTTON_CLASS,
-                children: /* @__PURE__ */ jsx(Ellipsis01Icon, { size: 24 })
-              }
-            )
+            customTrigger: /* @__PURE__ */ jsx(Button, { variant: "cell", type: "button", "aria-label": menuAriaLabel, className: TRAILING_CELL_LAYOUT, children: /* @__PURE__ */ jsx(Ellipsis01Icon, { size: 24 }) })
           }
         )
       ]
@@ -130,6 +136,5 @@ function MingoInfoCard({
 }
 export {
   MingoInfoCard,
-  MingoInfoCardActionProvider,
-  MingoInfoCardSkeleton
+  MingoInfoCardActionProvider
 };

package/dist/components/chat/mingo-onboarding-card.d.ts

@@ -26,6 +26,11 @@ export interface MingoOnboardingCardProps {
      *  the card renders as a `<button>` with hover/focus affordances.
      *  Ignored when `actions` is non-empty. */
     onClick?: () => void;
+    /** The commands are still loading: the card draws its loading form (its known actions real and inert). Inside a
+     *  `LoadingScope` it does so whatever this says. */
+    loading?: boolean;
+    /** The card's place in its list: picks the loading state's bar widths, so a list of loading cards is irregular. */
+    skeletonIndex?: number;
     /** Optional className appended to the root element. */
     className?: string;
 }
@@ -46,5 +51,7 @@ export interface MingoOnboardingCardProps {
  * description (Recent / Search / Find pattern from the legacy chip-grid)
  * so each row can expose multiple affordances without leaving the card.
  */
-export declare function MingoOnboardingCard({ icon, title, slashCommand, description, actions, onClick, className, }: MingoOnboardingCardProps): import("react").JSX.Element;
+export declare function MingoOnboardingCard({ icon, title, slashCommand, description, actions, onClick, loading: loadingProp, skeletonIndex, className, ...props }: MingoOnboardingCardProps): import("react").JSX.Element;
+/** Slash-command cards the loading state draws: a typical list, since the commands list has no page size of its own. */
+export declare const MINGO_ONBOARDING_SKELETON_ROWS: number;
 //# sourceMappingURL=mingo-onboarding-card.d.ts.map

package/dist/components/chat/mingo-onboarding-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mingo-onboarding-card.d.ts","sourceRoot":"","sources":["../../../src/components/chat/mingo-onboarding-card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAInD,MAAM,WAAW,yBAAyB;IACxC,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,sEAAsE;IACtE,KAAK,EAAE,SAAS,CAAC;IACjB;kEAC8D;IAC9D,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACzD;AAED,MAAM,WAAW,wBAAwB;IACvC,gEAAgE;IAChE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,sEAAsE;IACtE,KAAK,EAAE,SAAS,CAAC;IACjB,qFAAqF;IACrF,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,yDAAyD;IACzD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;uCAGmC;IACnC,OAAO,CAAC,EAAE,aAAa,CAAC,yBAAyB,CAAC,CAAC;IACnD;;+CAE2C;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,KAAK,EACL,YAAY,EACZ,WAAW,EACX,OAAO,EACP,OAAO,EACP,SAAS,GACV,EAAE,wBAAwB,+BAyD1B"}
+{"version":3,"file":"mingo-onboarding-card.d.ts","sourceRoot":"","sources":["../../../src/components/chat/mingo-onboarding-card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOnD,MAAM,WAAW,yBAAyB;IACxC,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,sEAAsE;IACtE,KAAK,EAAE,SAAS,CAAC;IACjB;kEAC8D;IAC9D,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACzD;AAED,MAAM,WAAW,wBAAwB;IACvC,gEAAgE;IAChE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,sEAAsE;IACtE,KAAK,EAAE,SAAS,CAAC;IACjB,qFAAqF;IACrF,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,yDAAyD;IACzD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;uCAGmC;IACnC,OAAO,CAAC,EAAE,aAAa,CAAC,yBAAyB,CAAC,CAAC;IACnD;;+CAE2C;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;wDACoD;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mHAAmH;IACnH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA2BD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,KAAK,EACL,YAAY,EACZ,WAAW,EACX,OAAO,EACP,OAAO,EACP,OAAO,EAAE,WAAmB,EAC5B,aAAiB,EACjB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,wBAAwB,+BAmG1B;AAED,wHAAwH;AACxH,eAAO,MAAM,8BAA8B,QAAsB,CAAC"}