@flamingo-stack/openframe-frontend-core 0.0.780 → 0.0.782

package/dist/components/chat/chat-context-memory-bar.js

@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from "react";
 import { cn } from "../../utils/cn.js";
 import { Ellipsis01Icon } from "../icons-v2-generated/interface/ellipsis-01-icon.js";
 import { XmarkCircleIcon } from "../icons-v2-generated/signs-and-symbols/xmark-circle-icon.js";
+import { Button } from "../ui/button/index.js";
 import { CONTEXT_ICON_CLASS, CONTEXT_LABEL_CLASS, CONTEXT_ROW_CLASS } from "./context-items-list.js";
 const itemKey = (item) => `${item.type}:${item.id}`;
 function ChatContextMemoryBar({
@@ -55,18 +56,16 @@ function ChatContextMemoryBar({
             " in context"
           ] }),
           /* @__PURE__ */ jsx(
-            "button",
+            Button,
             {
+              variant: "bare",
+              size: "icon-sm",
               type: "button",
               "aria-label": "Show remembered context",
               "aria-expanded": open,
               title: "Show remembered context",
               onClick: () => setOpen((o) => !o),
-              className: cn(
-                "flex size-4 shrink-0 items-center justify-center rounded outline-none transition-colors [&_svg]:size-4",
-                open ? "text-ods-text-primary" : "text-ods-text-secondary hover:text-ods-text-primary",
-                "focus-visible:text-ods-text-primary"
-              ),
+              className: "shrink-0",
               children: /* @__PURE__ */ jsx(Ellipsis01Icon, { size: 16 })
             }
           ),
@@ -83,14 +82,16 @@ function ChatContextMemoryBar({
                   resolveIcon && /* @__PURE__ */ jsx("span", { className: CONTEXT_ICON_CLASS, children: resolveIcon(item) }),
                   /* @__PURE__ */ jsx("span", { className: CONTEXT_LABEL_CLASS, title: item.label, children: item.label }),
                   onRemove && /* @__PURE__ */ jsx(
-                    "button",
+                    Button,
                     {
+                      variant: "bare",
+                      size: "icon-sm",
                       type: "button",
                       onClick: () => onRemove(item),
                       disabled,
                       "aria-label": `Remove ${item.label} from context`,
-                      className: "flex size-4 shrink-0 items-center justify-center text-ods-text-secondary outline-none transition-colors hover:text-ods-text-primary focus-visible:text-ods-text-primary disabled:cursor-not-allowed disabled:opacity-40 md:size-6",
-                      children: /* @__PURE__ */ jsx(XmarkCircleIcon, { className: "size-4 shrink-0 md:size-6" })
+                      className: "shrink-0",
+                      children: /* @__PURE__ */ jsx(XmarkCircleIcon, {})
                     }
                   )
                 ] }, itemKey(item))

package/dist/components/chat/chat-context-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chat-context-picker.d.ts","sourceRoot":"","sources":["../../../src/components/chat/chat-context-picker.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAgBvC,OAAO,KAAK,EAAyB,eAAe,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAElH,8DAA8D;AAC9D,eAAO,MAAM,8BAA8B,KAAK,CAAC;AAcjD,MAAM,WAAW,yBAAyB;IACxC,oDAAoD;IACpD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,kDAAkD;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;+EAC2E;IAC3E,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,IAAY,EACZ,QAAgB,EAChB,QAAQ,GACT,EAAE,yBAAyB,+BAwB3B;AAMD,MAAM,WAAW,sBAAsB;IACrC,8CAA8C;IAC9C,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,uBAAuB,CAAC;IAChC,iEAAiE;IACjE,aAAa,EAAE,eAAe,EAAE,CAAC;IACjC,8CAA8C;IAC9C,YAAY,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IAC9C,2DAA2D;IAC3D,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,MAAM,EACN,aAAa,EACb,YAAY,EACZ,OAAO,EACP,YAAY,EACZ,SAAS,GACV,EAAE,sBAAsB,sCAoQxB;AAMD,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IAC3C,+DAA+D;IAC/D,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,SAAS,CAAC;IACnD;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,SAAS,CAAC;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,QAAQ,EACR,WAAW,EACX,UAAU,EACV,QAAgB,EAChB,SAAS,GACV,EAAE,yBAAyB,sCA6C3B"}
+{"version":3,"file":"chat-context-picker.d.ts","sourceRoot":"","sources":["../../../src/components/chat/chat-context-picker.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAkBvC,OAAO,KAAK,EAAyB,eAAe,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAElH,8DAA8D;AAC9D,eAAO,MAAM,8BAA8B,KAAK,CAAC;AAcjD,MAAM,WAAW,yBAAyB;IACxC,oDAAoD;IACpD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,kDAAkD;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;+EAC2E;IAC3E,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,IAAY,EACZ,QAAgB,EAChB,QAAQ,GACT,EAAE,yBAAyB,+BAuB3B;AAMD,MAAM,WAAW,sBAAsB;IACrC,8CAA8C;IAC9C,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,uBAAuB,CAAC;IAChC,iEAAiE;IACjE,aAAa,EAAE,eAAe,EAAE,CAAC;IACjC,8CAA8C;IAC9C,YAAY,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IAC9C,2DAA2D;IAC3D,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,MAAM,EACN,aAAa,EACb,YAAY,EACZ,OAAO,EACP,YAAY,EACZ,SAAS,GACV,EAAE,sBAAsB,sCA6QxB;AAMD,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IAC3C,+DAA+D;IAC/D,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,SAAS,CAAC;IACnD;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,SAAS,CAAC;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,QAAQ,EACR,WAAW,EACX,UAAU,EACV,QAAgB,EAChB,SAAS,GACV,EAAE,yBAAyB,sCA8C3B"}

package/dist/components/chat/chat-context-picker.js

@@ -1,7 +1,7 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { QueryErrorResetBoundary } from "@tanstack/react-query";
-import { Fragment as Fragment2, Suspense, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment2, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { cn } from "../../utils/cn.js";
 import { Chevron02LeftIcon } from "../icons-v2-generated/arrows/chevron-02-left-icon.js";
 import { PackagePlusIcon } from "../icons-v2-generated/coding/package-plus-icon.js";
@@ -9,16 +9,18 @@ import { SearchIcon } from "../icons-v2-generated/interface/search-icon.js";
 import { Upload02Icon } from "../icons-v2-generated/interface/upload-02-icon.js";
 import { PlusIcon } from "../icons-v2-generated/signs-and-symbols/plus-icon.js";
 import { XmarkCircleIcon } from "../icons-v2-generated/signs-and-symbols/xmark-circle-icon.js";
-import { LoadingRegion } from "../loading/loading-region.js";
+import { LoadingSuspense } from "../loading/loading-fallback.js";
+import { Button } from "../ui/button/index.js";
+import { LOADING_NOOP } from "../ui/loading-scope.js";
 import {
-  CONTEXT_BACK_CLASS,
+  CONTEXT_BACK_BAR_CLASS,
   CONTEXT_STATE_CLASS,
   ContextErrorBoundary,
-  ContextItemsSkeleton,
+  ContextItemsList,
   ContextMenuRow
 } from "./context-items-list.js";
 const CHAT_CONTEXT_ITEMS_DEFAULT_MAX = 10;
-const ITEMS_SKELETON_ROWS = 10;
+const NO_SELECTED_KEYS = /* @__PURE__ */ new Set();
 const SEARCH_DEBOUNCE_MS = 300;
 const itemKey = (item) => `${item.type}:${item.id}`;
 function ChatComposerPlusMenu({
@@ -32,8 +34,11 @@ function ChatComposerPlusMenu({
     // aligning the popover to the `+` rather than the input row.
     /* @__PURE__ */ jsxs("span", { className: "relative inline-flex", children: [
       /* @__PURE__ */ jsx(
-        "button",
+        Button,
         {
+          variant: "bare",
+          "data-tone": "accent",
+          size: "icon-sm",
           type: "button",
           "data-context-trigger": "",
           disabled,
@@ -41,12 +46,8 @@ function ChatComposerPlusMenu({
           "aria-expanded": open,
           title: "Add context",
           onClick: onToggle,
-          className: cn(
-            "flex h-6 w-6 shrink-0 items-center justify-center rounded outline-none transition-colors",
-            open ? "text-ods-accent" : "text-ods-text-secondary hover:text-ods-text-primary active:text-ods-accent",
-            "focus-visible:text-ods-text-primary disabled:cursor-not-allowed disabled:opacity-40"
-          ),
-          children: /* @__PURE__ */ jsx(PlusIcon, { className: "h-6 w-6" })
+          className: "shrink-0",
+          children: /* @__PURE__ */ jsx(PlusIcon, {})
         }
       ),
       dropdown
@@ -170,7 +171,7 @@ function ChatContextPicker({
       },
       children: view === "root" ? (
         /* Level 0 — Upload File / Assign Item (Figma 31:28312). */
-        /* @__PURE__ */ jsxs("div", { role: "menu", "aria-label": "Add context", children: [
+        /* @__PURE__ */ jsxs("div", { role: "menu", "aria-label": "Add context", className: "divide-y divide-ods-border", children: [
           config.onUploadFile && /* @__PURE__ */ jsx(
             ContextMenuRow,
             {
@@ -184,28 +185,20 @@ function ChatContextPicker({
       ) : view === "types" ? (
         /* Level 1 — Back + entity-type list (Figma 31:28708). Back stays pinned;
            the type list scrolls if it can't fit the capped popover height. */
-        /* @__PURE__ */ jsxs("div", { role: "menu", "aria-label": "Context types", className: "flex flex-col", children: [
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              onClick: () => setView("root"),
-              className: cn(CONTEXT_BACK_CLASS, "sticky top-0 z-10"),
-              children: [
-                /* @__PURE__ */ jsx(Chevron02LeftIcon, { size: 24, className: "shrink-0" }),
-                /* @__PURE__ */ jsx("span", { className: "truncate", children: "Back" })
-              ]
-            }
-          ),
+        /* @__PURE__ */ jsxs("div", { role: "menu", "aria-label": "Context types", className: "flex flex-col divide-y divide-ods-border", children: [
+          /* @__PURE__ */ jsx("div", { className: CONTEXT_BACK_BAR_CLASS, children: /* @__PURE__ */ jsxs(Button, { variant: "row", type: "button", onClick: () => setView("root"), children: [
+            /* @__PURE__ */ jsx(Chevron02LeftIcon, { size: 24 }),
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: "Back" })
+          ] }) }),
           visibleTypes.length === 0 ? /* @__PURE__ */ jsx("div", { className: CONTEXT_STATE_CLASS, children: "No matching types" }) : visibleTypes.map((type) => /* @__PURE__ */ jsx(ContextMenuRow, { icon: type.icon, label: type.label, onClick: () => openType(type) }, type.type))
         ] })
       ) : activeType ? (
         /* Level 2 — Back + search + HOST-rendered items (Figma 31:29102). */
         /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs("button", { type: "button", onClick: backToTypes, className: cn(CONTEXT_BACK_CLASS, "sticky top-0 z-10"), children: [
-            /* @__PURE__ */ jsx(Chevron02LeftIcon, { size: 24, className: "shrink-0" }),
+          /* @__PURE__ */ jsx("div", { className: cn(CONTEXT_BACK_BAR_CLASS, "border-b border-ods-border"), children: /* @__PURE__ */ jsxs(Button, { variant: "row", type: "button", onClick: backToTypes, children: [
+            /* @__PURE__ */ jsx(Chevron02LeftIcon, { size: 24 }),
             /* @__PURE__ */ jsx("span", { className: "truncate", children: "Back" })
-          ] }),
+          ] }) }),
           /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2 border-b border-ods-border bg-ods-card p-3", children: [
             /* @__PURE__ */ jsx(SearchIcon, { className: "size-4 shrink-0 text-ods-text-secondary md:size-6" }),
             /* @__PURE__ */ jsx(
@@ -226,22 +219,35 @@ function ChatContextPicker({
               fallback: (retry) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 bg-ods-bg px-4 py-3 text-ods-attention-red-error text-h4", children: [
                 /* @__PURE__ */ jsx("span", { children: "Failed to load" }),
                 /* @__PURE__ */ jsx(
-                  "button",
+                  Button,
                   {
+                    variant: "link",
+                    size: "compact",
+                    noPaddingX: true,
                     type: "button",
+                    "data-tone": "neutral",
                     onClick: () => {
                       reset();
                       retry();
                     },
-                    className: "shrink-0 underline outline-none hover:text-ods-text-primary focus-visible:text-ods-text-primary",
+                    className: "shrink-0",
                     children: "Retry"
                   }
                 )
               ] }),
               children: /* @__PURE__ */ jsx(
-                Suspense,
+                LoadingSuspense,
                 {
-                  fallback: /* @__PURE__ */ jsx(LoadingRegion, { label: "Loading items", className: "max-h-[340px] overflow-hidden", children: /* @__PURE__ */ jsx(ContextItemsSkeleton, { count: ITEMS_SKELETON_ROWS }) }),
+                  label: "Loading items",
+                  fallback: /* @__PURE__ */ jsx(
+                    ContextItemsList,
+                    {
+                      items: [],
+                      selectedKeys: NO_SELECTED_KEYS,
+                      onToggle: LOADING_NOOP,
+                      atLimit: false
+                    }
+                  ),
                   children: config.renderItems({
                     type: activeType.type,
                     query: debouncedQuery,
@@ -290,13 +296,14 @@ function ChatContextChipStrip({
               }
             ),
             onRemove && /* @__PURE__ */ jsx(
-              "button",
+              Button,
               {
+                variant: "bare",
+                size: "icon-inline",
                 type: "button",
                 onClick: () => onRemove(item),
                 disabled,
                 "aria-label": `Remove ${item.label}`,
-                className: "flex size-4 shrink-0 items-center justify-center text-ods-text-secondary outline-none transition-colors hover:text-ods-text-primary focus-visible:text-ods-text-primary disabled:cursor-not-allowed disabled:opacity-40 [&_svg]:size-4",
                 children: /* @__PURE__ */ jsx(XmarkCircleIcon, { size: 16 })
               }
             )

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

@@ -1 +1 @@
-{"version":3,"file":"chat-input.d.ts","sourceRoot":"","sources":["../../../src/components/chat/chat-input.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAoC,MAAM,SAAS,CAAC;AA0I9F,QAAA,MAAM,SAAS,yGAmmBb,CAAC;AAIH,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"chat-input.d.ts","sourceRoot":"","sources":["../../../src/components/chat/chat-input.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAoC,MAAM,SAAS,CAAC;AA0I9F,QAAA,MAAM,SAAS,yGA4lBb,CAAC;AAIH,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/chat/chat-input.js

@@ -13,6 +13,7 @@ import { renderToStaticMarkup } from "react-dom/server";
 import { cn } from "../../utils/cn.js";
 import { Send01Icon, StopCircleIcon } from "../icons-v2-generated/index.js";
 import { AvatarStack } from "../ui/avatar-stack.js";
+import { Button } from "../ui/button/index.js";
 import { Tag } from "../ui/tag.js";
 import { ChatTypingIndicator } from "./chat-typing-indicator.js";
 import { SlashCommandSuggestions } from "./slash-command-suggestions.js";
@@ -576,24 +577,16 @@ const ChatInput = forwardRef((allProps, ref) => {
                 )
               ] }),
               /* @__PURE__ */ jsx(
-                "button",
+                Button,
                 {
+                  variant: "bare",
+                  size: "icon-sm",
                   type: "button",
                   "aria-label": isStopMode ? "Stop generation" : "Send message",
+                  "data-state": focused && !isStopMode ? "active" : void 0,
                   onClick: isStopMode ? handleStop : handleSubmit,
                   disabled: isStopMode ? isStopping : sendDisabled,
-                  className: cn(
-                    "flex h-6 shrink-0 items-center text-ods-text-secondary transition-colors duration-200",
-                    // Focus accent applies to the SEND icon only. Stop stays neutral
-                    // regardless of where focus sits — otherwise it reads yellow after
-                    // an Enter-send (editor keeps focus) but gray after an approve
-                    // click (focus moved to the card button).
-                    focused && !isStopMode && "text-ods-accent",
-                    "[&_svg]:size-4 md:[&_svg]:size-6",
-                    "cursor-pointer hover:text-ods-text-primary",
-                    "focus-visible:text-ods-accent focus-visible:outline-none",
-                    "disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:text-ods-text-secondary"
-                  ),
+                  className: "shrink-0",
                   children: isStopMode ? /* @__PURE__ */ jsx(StopCircleIcon, { size: 20 }) : /* @__PURE__ */ jsx(Send01Icon, { size: 20 })
                 }
               )

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

@@ -1 +1 @@
-{"version":3,"file":"chat-message-enhanced.d.ts","sourceRoot":"","sources":["../../../src/components/chat/chat-message-enhanced.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuE,MAAM,OAAO,CAAC;AA6B5F,OAAO,KAAK,EAA8C,wBAAwB,EAAE,MAAM,SAAS,CAAC;AA0tBpG,QAAA,MAAM,2BAA2B,4FAmC/B,CAAC;AAIH,OAAO,EAAE,2BAA2B,IAAI,mBAAmB,EAAE,CAAC"}
+{"version":3,"file":"chat-message-enhanced.d.ts","sourceRoot":"","sources":["../../../src/components/chat/chat-message-enhanced.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuE,MAAM,OAAO,CAAC;AAuC5F,OAAO,KAAK,EAA8C,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAytBpG,QAAA,MAAM,2BAA2B,4FAmC/B,CAAC;AAIH,OAAO,EAAE,2BAA2B,IAAI,mBAAmB,EAAE,CAAC"}

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

@@ -14,6 +14,16 @@ import { ApprovalRequestMessage } from "./approval-request-message.js";
 import { AskDisplay } from "./ask-display.js";
 import { ChatAppearanceContext, useChatAppearance } from "./chat-appearance-context.js";
 import { ChatContextChipStrip } from "./chat-context-picker.js";
+import {
+  CHAT_MESSAGE_FACE_PX,
+  CHAT_MESSAGE_HEADER_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";
 import { ContextCompactionDisplay } from "./context-compaction-display.js";
 import { BlockCard } from "./entity-cards/block-card.js";
 import { ErrorMessageDisplay } from "./error-message-display.js";
@@ -285,12 +295,20 @@ const ChatMessageEnhanced = forwardRef(
         fallback: displayName,
         variant: "round",
         size: "xs",
-        sizePx: 20,
+        sizePx: CHAT_MESSAGE_FACE_PX,
         initialsClassName: "text-[9px] text-ods-text-secondary"
       }
     ) });
     if (isV2 && isSystem && name) {
-      return /* @__PURE__ */ jsx("div", { ref, className: cn("relative py-[calc(var(--spacing-system-m)/2)]", className), ...props, children: /* @__PURE__ */ jsx(ChatAppearanceContext.Provider, { value: appearance, children: /* @__PURE__ */ jsx(SystemEventMessage, { text: name, timestamp }) }) });
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          className: cn("relative", CHAT_MESSAGE_ROW_PADDING_CLASS[CHAT_APPEARANCE.V2], className),
+          ...props,
+          children: /* @__PURE__ */ jsx(ChatAppearanceContext.Provider, { value: appearance, children: /* @__PURE__ */ jsx(SystemEventMessage, { text: name, timestamp }) })
+        }
+      );
     }
     return /* @__PURE__ */ jsx(ChatAppearanceContext.Provider, { value: appearance, children: /* @__PURE__ */ jsx(
       "div",
@@ -298,32 +316,27 @@ const ChatMessageEnhanced = forwardRef(
         ref,
         className: cn(
           "relative",
-          // v2 spaces messages 16px apart (spacing-system-m), split across the
-          // two neighbours' padding so blocks outside a row keep the rhythm.
-          isV2 ? "py-[calc(var(--spacing-system-m)/2)]" : "py-[var(--spacing-system-s)]",
+          CHAT_MESSAGE_ROW_PADDING_CLASS[isV2 ? CHAT_APPEARANCE.V2 : CHAT_APPEARANCE.CLASSIC],
           className
         ),
         ...props,
-        children: /* @__PURE__ */ jsxs("div", { className: "grid min-w-0 grid-cols-1 gap-[var(--spacing-system-xxs)]", children: [
-          (face || showName || showSelfName) && /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-[var(--spacing-system-xs)]", isUser && "justify-end"), children: [
+        children: /* @__PURE__ */ jsxs("div", { className: CHAT_MESSAGE_STACK_CLASS, children: [
+          (face || showName || showSelfName) && /* @__PURE__ */ jsxs("div", { className: cn(CHAT_MESSAGE_HEADER_CLASS, isUser && "justify-end"), children: [
             showSelfName && nameLabel,
             face,
             showName && nameLabel,
             showName && timestamp && /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0 whitespace-nowrap text-ods-text-secondary text-h6", children: formatMessageTimestamp(timestamp) })
           ] }),
-          (!isSystem || segments.length > 0) && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-2", children: segments.map((segment, index) => {
+          (!isSystem || segments.length > 0) && /* @__PURE__ */ jsx("div", { className: CHAT_MESSAGE_SEGMENTS_CLASS, children: segments.map((segment, index) => {
             const segmentIsStreaming = index === segments.length - 1 && !!isTyping;
             if (segment.type === "text") {
               if (isUser) {
-                return /* @__PURE__ */ jsx("div", { className: "flex min-w-0 justify-end", children: /* @__PURE__ */ jsx("div", { className: "min-w-0 max-w-[85%] break-words rounded-xl bg-ods-bg-active px-[var(--spacing-system-sf)] py-[var(--spacing-system-xsf)] text-ods-text-primary text-h4", children: renderSegmentBody(index, segment.text, segmentIsStreaming) }) }, index);
+                return /* @__PURE__ */ jsx("div", { className: CHAT_MESSAGE_USER_ROW_CLASS, children: /* @__PURE__ */ jsx("div", { className: CHAT_MESSAGE_USER_BUBBLE_CLASS, children: renderSegmentBody(index, segment.text, segmentIsStreaming) }) }, index);
               }
               return /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: cn(
-                    "w-full min-w-0 break-words text-h4",
-                    isError ? "text-ods-error" : "text-ods-text-primary"
-                  ),
+                  className: cn(CHAT_MESSAGE_TEXT_CLASS, isError ? "text-ods-error" : "text-ods-text-primary"),
                   children: renderSegmentBody(index, segment.text, segmentIsStreaming)
                 },
                 index

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

@@ -0,0 +1,35 @@
+/**
+ * A message row's layout, read by the row and by its skeleton (`ChatMessageSkeleton`), so the two are one box.
+ * The row's vertical rhythm per appearance: v2 spaces messages 16px apart (spacing-system-m), split across the two
+ * neighbours' padding so blocks outside a row keep the rhythm.
+ */
+export declare const CHAT_MESSAGE_ROW_PADDING_CLASS: {
+    readonly classic: "py-[var(--spacing-system-s)]";
+    readonly v2: "py-[calc(var(--spacing-system-m)/2)]";
+};
+/** The row's single column: the face line, then the segments. */
+export declare const CHAT_MESSAGE_STACK_CLASS = "grid min-w-0 grid-cols-1 gap-[var(--spacing-system-xxs)]";
+/** The face line above a message (the face, the name and time where they are written). */
+export declare const CHAT_MESSAGE_HEADER_CLASS = "flex items-center gap-[var(--spacing-system-xs)]";
+/** The segments of a message. */
+export declare const CHAT_MESSAGE_SEGMENTS_CLASS = "grid grid-cols-1 gap-2";
+/** The row holding the user's own bubble, at the right. */
+export declare const CHAT_MESSAGE_USER_ROW_CLASS = "flex min-w-0 justify-end";
+/** What the user said: a bubble on the right. */
+export declare const CHAT_MESSAGE_USER_BUBBLE_CLASS = "min-w-0 max-w-[85%] break-words rounded-xl bg-ods-bg-active px-[var(--spacing-system-sf)] py-[var(--spacing-system-xsf)] text-ods-text-primary text-h4";
+/** What anyone else says: plain text across the thread's width. */
+export declare const CHAT_MESSAGE_TEXT_CLASS = "w-full min-w-0 break-words text-h4";
+/** The speaker's face, in px (a round picture, an agent's mark). */
+export declare const CHAT_MESSAGE_FACE_PX = 20;
+/** The thread's scroller, read by `ChatMessageList` and by its skeleton. */
+export declare const CHAT_MESSAGE_LIST_SCROLLER_CLASS = "flex h-full w-full flex-1 flex-col overflow-y-auto overflow-x-hidden";
+/** The thread's thin scrollbar. */
+export declare const CHAT_MESSAGE_LIST_SCROLLBAR_CLASS = "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-ods-border/30 hover:scrollbar-thumb-ods-text-secondary/30";
+/** The thread's column: the panel's full width (`full`) or the centred narrow column (`narrow`). */
+export declare const CHAT_MESSAGE_LIST_COLUMN_CLASS: {
+    readonly full: "flex w-full min-w-0 flex-col pb-[var(--spacing-system-xs)]";
+    readonly narrow: "mx-auto flex w-full min-w-0 max-w-ods-content-narrow flex-col pb-[var(--spacing-system-xs)]";
+};
+/** The column's side padding when the host gives none. */
+export declare const CHAT_MESSAGE_LIST_CONTENT_PADDING_CLASS = "px-[var(--spacing-system-m)]";
+//# sourceMappingURL=chat-message-layout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chat-message-layout.d.ts","sourceRoot":"","sources":["../../../src/components/chat/chat-message-layout.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,eAAO,MAAM,8BAA8B;;;CAGjC,CAAC;AACX,iEAAiE;AACjE,eAAO,MAAM,wBAAwB,6DAA6D,CAAC;AACnG,0FAA0F;AAC1F,eAAO,MAAM,yBAAyB,qDAAqD,CAAC;AAC5F,iCAAiC;AACjC,eAAO,MAAM,2BAA2B,2BAA2B,CAAC;AACpE,2DAA2D;AAC3D,eAAO,MAAM,2BAA2B,6BAA6B,CAAC;AACtE,iDAAiD;AACjD,eAAO,MAAM,8BAA8B,2JAC+G,CAAC;AAC3J,mEAAmE;AACnE,eAAO,MAAM,uBAAuB,uCAAuC,CAAC;AAC5E,oEAAoE;AACpE,eAAO,MAAM,oBAAoB,KAAK,CAAC;AAEvC,4EAA4E;AAC5E,eAAO,MAAM,gCAAgC,yEAAyE,CAAC;AACvH,mCAAmC;AACnC,eAAO,MAAM,iCAAiC,yHAC0E,CAAC;AACzH,oGAAoG;AACpG,eAAO,MAAM,8BAA8B;;;CAGjC,CAAC;AACX,0DAA0D;AAC1D,eAAO,MAAM,uCAAuC,iCAAiC,CAAC"}

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

@@ -0,0 +1,34 @@
+"use client";
+import { CHAT_APPEARANCE } from "./types/chat.types.js";
+const CHAT_MESSAGE_ROW_PADDING_CLASS = {
+  [CHAT_APPEARANCE.CLASSIC]: "py-[var(--spacing-system-s)]",
+  [CHAT_APPEARANCE.V2]: "py-[calc(var(--spacing-system-m)/2)]"
+};
+const CHAT_MESSAGE_STACK_CLASS = "grid min-w-0 grid-cols-1 gap-[var(--spacing-system-xxs)]";
+const CHAT_MESSAGE_HEADER_CLASS = "flex items-center gap-[var(--spacing-system-xs)]";
+const CHAT_MESSAGE_SEGMENTS_CLASS = "grid grid-cols-1 gap-2";
+const CHAT_MESSAGE_USER_ROW_CLASS = "flex min-w-0 justify-end";
+const CHAT_MESSAGE_USER_BUBBLE_CLASS = "min-w-0 max-w-[85%] break-words rounded-xl bg-ods-bg-active px-[var(--spacing-system-sf)] py-[var(--spacing-system-xsf)] text-ods-text-primary text-h4";
+const CHAT_MESSAGE_TEXT_CLASS = "w-full min-w-0 break-words text-h4";
+const CHAT_MESSAGE_FACE_PX = 20;
+const CHAT_MESSAGE_LIST_SCROLLER_CLASS = "flex h-full w-full flex-1 flex-col overflow-y-auto overflow-x-hidden";
+const CHAT_MESSAGE_LIST_SCROLLBAR_CLASS = "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-ods-border/30 hover:scrollbar-thumb-ods-text-secondary/30";
+const CHAT_MESSAGE_LIST_COLUMN_CLASS = {
+  full: "flex w-full min-w-0 flex-col pb-[var(--spacing-system-xs)]",
+  narrow: "mx-auto flex w-full min-w-0 max-w-ods-content-narrow flex-col pb-[var(--spacing-system-xs)]"
+};
+const CHAT_MESSAGE_LIST_CONTENT_PADDING_CLASS = "px-[var(--spacing-system-m)]";
+export {
+  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
+};

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

@@ -1 +1 @@
-{"version":3,"file":"chat-message-list.d.ts","sourceRoot":"","sources":["../../../src/components/chat/chat-message-list.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAyGpD,QAAA,MAAM,eAAe,iHAwhCpB,CAAC;AAIF,OAAO,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"chat-message-list.d.ts","sourceRoot":"","sources":["../../../src/components/chat/chat-message-list.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAyGpD,QAAA,MAAM,eAAe,iHA+hCpB,CAAC;AAIF,OAAO,EAAE,eAAe,EAAE,CAAC"}

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

@@ -13,10 +13,18 @@ import {
 import { useStickToBottom } from "use-stick-to-bottom";
 import { cn } from "../../utils/cn.js";
 import { DotsLoaderIcon, Arrow02DownIcon } from "../icons-v2-generated/index.js";
+import { Button } from "../ui/button/index.js";
+import { useLoadingScope } from "../ui/loading-scope.js";
 import { OverlayOpenRegistryProvider } from "../ui/overlay-open-registry.js";
 import { ChatAppearanceContext } from "./chat-appearance-context.js";
 import { ChatMessageEnhanced } from "./chat-message-enhanced.js";
-import { ChatMessageListSkeleton } from "./chat-message-skeleton.js";
+import {
+  CHAT_MESSAGE_LIST_COLUMN_CLASS,
+  CHAT_MESSAGE_LIST_CONTENT_PADDING_CLASS,
+  CHAT_MESSAGE_LIST_SCROLLBAR_CLASS,
+  CHAT_MESSAGE_LIST_SCROLLER_CLASS
+} from "./chat-message-layout.js";
+import { CHAT_MESSAGE_LIST_SKELETON_MESSAGES, ChatMessageListSkeleton } from "./chat-message-skeleton.js";
 import { CyclingPhrase } from "./cycling-phrase.js";
 import { CHAT_APPEARANCE } from "./types/chat.types.js";
 import { SCROLL_ANCHOR } from "./types/message.types.js";
@@ -51,7 +59,9 @@ const ChatMessageList = forwardRef(
     className,
     messages,
     dialogId,
-    isLoading = false,
+    isLoading: isLoadingProp = false,
+    pageSize = CHAT_MESSAGE_LIST_SKELETON_MESSAGES,
+    fill = false,
     isTyping = false,
     typingMessage,
     autoScroll = true,
@@ -79,6 +89,7 @@ const ChatMessageList = forwardRef(
     NavLinkAnchor,
     ...props
   }, ref) => {
+    const isLoading = useLoadingScope() || isLoadingProp;
     const { scrollRef, contentRef, scrollToBottom, stopScroll, isAtBottom } = useStickToBottom({
       resize: "smooth",
       initial: false
@@ -405,7 +416,10 @@ const ChatMessageList = forwardRef(
           showAvatars,
           fullWidth,
           contentClassName,
-          messageCount: 6
+          fill,
+          messageCount: pageSize,
+          appearance,
+          namedOthers: selfAuthorType === "admin"
         }
       );
     }
@@ -421,7 +435,7 @@ const ChatMessageList = forwardRef(
           {
             ref: setScrollRef,
             className: cn(
-              "flex h-full w-full flex-1 flex-col overflow-y-auto overflow-x-hidden",
+              CHAT_MESSAGE_LIST_SCROLLER_CLASS,
               // `overscroll-contain` (default ON, opt-out via `overscrollContain={false}`):
               // reaching the top/bottom of the thread must NOT chain the wheel/
               // touch scroll to the page behind the chat — e.g. the company-hub
@@ -431,7 +445,7 @@ const ChatMessageList = forwardRef(
               // the surrounding page keeps scrolling normally when the pointer is
               // over the (non-interactive) thread.
               overscrollContain && "overscroll-contain",
-              "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-ods-border/30 hover:scrollbar-thumb-ods-text-secondary/30",
+              CHAT_MESSAGE_LIST_SCROLLBAR_CLASS,
               className
             ),
             ...props,
@@ -443,8 +457,8 @@ const ChatMessageList = forwardRef(
                   // `fullWidth=true` drops the centered-narrow column for
                   // side-panel hosts (e.g. multi-platform-hub Mingo). Same
                   // semantics as ChatHeader / ChatInput / ChatFooter.
-                  fullWidth ? "flex w-full min-w-0 flex-col pb-[var(--spacing-system-xs)]" : "mx-auto flex w-full min-w-0 max-w-ods-content-narrow flex-col pb-[var(--spacing-system-xs)]",
-                  contentClassName ?? "px-[var(--spacing-system-m)]"
+                  CHAT_MESSAGE_LIST_COLUMN_CLASS[fullWidth ? "full" : "narrow"],
+                  contentClassName ?? CHAT_MESSAGE_LIST_CONTENT_PADDING_CLASS
                 ),
                 style: { minHeight: "100%" },
                 children: [
@@ -479,12 +493,13 @@ const ChatMessageList = forwardRef(
                         renderEntityCard,
                         refs: message.refs,
                         onAskSelect: index > lastUserMessageIndex ? onAskSelect : void 0,
-                        NavLinkAnchor
+                        NavLinkAnchor,
+                        "data-loading-item": ownedContent ? void 0 : ""
                       },
                       message.id
                     );
                     if (!ownedContent) return row;
-                    return /* @__PURE__ */ jsxs("div", { className: "grid w-full min-w-0 grid-cols-1", children: [
+                    return /* @__PURE__ */ jsxs("div", { className: "grid w-full min-w-0 grid-cols-1", "data-loading-item": true, children: [
                       row,
                       ownedContent
                     ] }, message.id);
@@ -495,20 +510,17 @@ const ChatMessageList = forwardRef(
           }
         ),
         autoScroll && !atBottom && messages.length > 0 && /* @__PURE__ */ jsx(
-          "button",
+          Button,
           {
+            variant: "outline",
+            size: "icon-sm",
             type: "button",
             onClick: () => {
               followBottomRef.current = true;
               void scrollToBottom({ animation: "smooth" });
             },
             "aria-label": "Scroll to latest message",
-            className: cn(
-              "absolute bottom-[var(--spacing-system-s)] left-1/2 z-10 -translate-x-1/2",
-              "flex size-9 items-center justify-center rounded-full",
-              "border border-ods-border bg-ods-card text-ods-text-primary shadow-lg",
-              "transition-colors hover:bg-ods-bg-hover"
-            ),
+            className: "absolute bottom-[var(--spacing-system-s)] left-1/2 z-10 -translate-x-1/2",
             children: /* @__PURE__ */ jsx(Arrow02DownIcon, { size: 16 })
           }
         )

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

@@ -33,13 +33,14 @@ export interface ChatMessageRowProps {
     body: string | ReactNode;
     /** Per-surface slot under the body: Slack reply badge / ticket attachments. */
     footer?: ReactNode;
+    /**
+     * The row while it is read (also inside a loading scope): the same boxes, the avatar a skeleton box, the name and
+     * time bars at their real line heights, the body a typical run of lines. Pass empty data props
+     * (`displayName=""`, `body=""`).
+     */
+    loading?: boolean;
+    /** List markers (`data-loading-item`), set by the list on its rows; forwarded in both forms. */
+    [key: `data-${string}`]: unknown;
 }
-export declare function ChatMessageRow({ displayName, avatarUrl, timeLabel, body, footer }: ChatMessageRowProps): import("react").JSX.Element;
-/**
- * Skeleton with 1:1 structural parity to `<ChatMessageRow>` — SAME wrapper
- * (`flex gap-2 md:gap-3`), SAME avatar box (`w-8 h-8 md:w-10 md:h-10
- * rounded-lg`), SAME header `mb-1`, and bar heights matching the real
- * name/time/body line-heights so the loading→loaded swap does not reflow.
- */
-export declare function ChatMessageRowSkeleton(): import("react").JSX.Element;
+export declare function ChatMessageRow(props: ChatMessageRowProps): import("react").JSX.Element;
 //# sourceMappingURL=chat-message-row.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"chat-message-row.d.ts","sourceRoot":"","sources":["../../../src/components/chat/chat-message-row.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMjD,MAAM,WAAW,mBAAmB;IAClC,qCAAqC;IACrC,WAAW,EAAE,MAAM,CAAC;IACpB;iEAC6D;IAC7D,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B;;2EAEuE;IACvE,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B;;qEAEiE;IACjE,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,+EAA+E;IAC/E,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,mBAAmB,+BAqDtG;AAED;;;;;GAKG;AACH,wBAAgB,sBAAsB,gCAgBrC"}
+{"version":3,"file":"chat-message-row.d.ts","sourceRoot":"","sources":["../../../src/components/chat/chat-message-row.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAwBjD,MAAM,WAAW,mBAAmB;IAClC,qCAAqC;IACrC,WAAW,EAAE,MAAM,CAAC;IACpB;iEAC6D;IAC7D,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B;;2EAEuE;IACvE,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B;;qEAEiE;IACjE,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,+EAA+E;IAC/E,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gGAAgG;IAChG,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAClC;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,+BAIxD"}