@flamingo-stack/openframe-frontend-core 0.0.216 → 0.0.217

package/dist/utils/scroll-into-view.d.ts

@@ -1,63 +1,58 @@
 /**
- * `scrollElementIntoView` — canonical "smooth scroll element to top
- * of viewport, account for sticky chrome, optionally adjust for
- * known layout shifts" helper.
+ * `scrollElementIntoView` — canonical "scroll an element to the top of the
+ * viewport, account for sticky chrome, survive layout shifts" helper.
  *
- * Before this util existed, ~3 different call sites in the lib + hub
- * had the same 5-line snippet copy-pasted with subtle differences:
+ * One shared implementation so every caller (the ticket drawer expand, the
+ * hub's `useUnifiedNav` / `use-nav-link` hash scroll, doc-tree, delivery
+ * `?focus=`, sticky-section-nav, …) inherits the SAME cancellation-proof
+ * motion.
  *
- *   - `useUnifiedNav` same-URL re-scroll branch (hub)
- *   - `<HelpCenterCard>` click-to-expand (lib, with cross-row
- *     layout-shift adjustment)
- *   - Future ticket-row / docs anchor scrolls
+ * WHY A SELF-DRIVEN rAF TWEEN INSTEAD OF `window.scrollTo({behavior:'smooth'})`:
+ * the native smooth scroll is CANCELLABLE, and in real pages it gets cancelled
+ * constantly:
  *
- * The canonical pattern is `window.scrollTo({top, behavior:'smooth'})`
- * with a pre-computed pixel target — NOT `element.scrollIntoView()`.
- * Pre-computing the target lets the browser run a clean uninterrupted
- * smooth animation to a fixed pixel value. `scrollIntoView` re-targets
- * continuously as the page layout shifts during the animation, which
- * causes visible jitter when content above the target is also moving
- * (a sibling collapsing, an async image loading, …).
+ *   - Browser SCROLL ANCHORING: when content is inserted/removed above or
+ *     around the target (a collapsible drawer expanding, an async image
+ *     loading, a list re-rendering) the browser issues a synchronous scrollTop
+ *     correction to keep the anchored element stable. Per CSSOM-View "perform a
+ *     scroll" step 1 ("abort any ongoing smooth scroll"), that correction
+ *     ABORTS an in-flight native smooth scroll — so it lands as an instant jump.
+ *     Anchoring is suppressed when the scroll offset is 0, which is exactly why
+ *     a native smooth scroll appears to work the FIRST time (page at top) and
+ *     jumps on every repeat (page already scrolled). This was a multi-day
+ *     "smooth only works once" bug on the /tickets drawer.
+ *   - A second programmatic scroll on the same frame, or a `focus()` without
+ *     `{preventScroll:true}`, cancels it the same way.
  *
- * The `adjustTargetY` callback is the escape hatch for cases where
- * the consumer KNOWS about an upcoming layout shift and can compute
- * the correct FINAL target before the animation starts. Example: in
- * `HelpCenterCard`, clicking row B while row A above is currently
- * expanded — A's drawer collapses simultaneously with B's expansion,
- * shifting B's tile up by A's drawer height. The consumer passes
- * `adjustTargetY: raw => raw - getAboveDrawerHeight()` and the
- * browser smooth-scrolls to the post-collapse position directly.
+ * A tween that re-asserts the position with INSTANT writes every frame is
+ * immune: there is no "ongoing native smooth scroll" for anchoring/focus to
+ * abort, and any correction that lands between our frames is overwritten on the
+ * next frame. We also RECOMPUTE the target each frame, so an element whose
+ * final position is still settling (drawer still expanding, images loading)
+ * is tracked to its resting place instead of animating to a stale pixel.
+ *
+ * Honors `prefers-reduced-motion` (jumps instantly) and cancels on genuine user
+ * scroll intent (wheel / touch) so we never fight the user.
  */
 export interface ScrollElementIntoViewOptions {
-    /** Pixels to subtract from the target element's `top` so it lands
-     *  BELOW sticky chrome. Defaults to 0. Pass `96` (matches
-     *  `scroll-mt-24`) for the standard hub header offset. */
+    /** Pixels to subtract from the target element's `top` so it lands BELOW
+     *  sticky chrome. Defaults to 0. Pass `96` for the standard hub header. */
     headerOffset?: number;
-    /** Scroll animation style. Defaults to `'smooth'`. Use `'instant'`
-     *  for imperative jumps where animation would feel laggy (deep
-     *  link land, programmatic focus moves). */
+    /** `'smooth'` (default) runs the self-driven tween; `'instant'` / `'auto'`
+     *  jump in one synchronous write (deep-link land, programmatic focus moves). */
     behavior?: ScrollBehavior;
-    /** Optional adjustment applied to the computed pixel target. The
-     *  callback receives the "raw" Y (`element.top + scrollY -
-     *  headerOffset`) and returns the FINAL pixel target. Use this
-     *  when the caller knows about a layout shift that will happen
-     *  between the call and the animation completing — the browser's
-     *  smooth-scroll commits to a single pixel value, so providing the
-     *  post-shift target up front lands the element correctly even as
-     *  content above it moves. */
+    /** Optional adjustment applied to the computed pixel target each frame. The
+     *  callback receives the "raw" Y (`element.top + scrollY - headerOffset`) and
+     *  returns the FINAL target. Use when the caller knows about a layout shift
+     *  (e.g. a sibling drawer collapsing) the geometry can't yet reflect. */
     adjustTargetY?: (rawTargetY: number) => number;
+    /** Tween duration in ms (smooth only). Default 320. */
+    durationMs?: number;
 }
 /**
- * Scroll the page so `target` lands at the top of the viewport,
- * accounting for sticky chrome via `headerOffset`. Returns void; the
- * scroll runs async via the browser's smooth-scroll engine.
- *
- * Accepts:
- *   - `HTMLElement` — direct reference (most common from `useRef`).
- *   - `null` / `undefined` — no-op so callers can pass refs without
- *     defensive branching.
- *
- * SSR-safe: short-circuits when `window` is undefined.
+ * Scroll the page so `target` lands at the top of the viewport (below sticky
+ * chrome via `headerOffset`). SSR-safe; `null`/`undefined` target is a no-op so
+ * callers can pass refs without defensive branching.
  */
 export declare function scrollElementIntoView(target: HTMLElement | null | undefined, options?: ScrollElementIntoViewOptions): void;
 //# sourceMappingURL=scroll-into-view.d.ts.map

package/dist/utils/scroll-into-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-into-view.d.ts","sourceRoot":"","sources":["../../src/utils/scroll-into-view.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,MAAM,WAAW,4BAA4B;IAC3C;;8DAE0D;IAC1D,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;gDAE4C;IAC5C,QAAQ,CAAC,EAAE,cAAc,CAAA;IACzB;;;;;;;kCAO8B;IAC9B,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAA;CAC/C;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,EACtC,OAAO,GAAE,4BAAiC,GACzC,IAAI,CAON"}
+{"version":3,"file":"scroll-into-view.d.ts","sourceRoot":"","sources":["../../src/utils/scroll-into-view.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAEH,MAAM,WAAW,4BAA4B;IAC3C;+EAC2E;IAC3E,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;oFACgF;IAChF,QAAQ,CAAC,EAAE,cAAc,CAAA;IACzB;;;6EAGyE;IACzE,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAA;IAC9C,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAqBD;;;;GAIG;AACH,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,EACtC,OAAO,GAAE,4BAAiC,GACzC,IAAI,CAmEN"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.216",
+  "version": "0.0.217",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/chat/chat-attachment-bar.tsx

@@ -1,4 +1,5 @@
 'use client'
+// compact-size support added for the ticket-drawer reply composer.
 
 /**
  * Chat-attachment UI primitives.
@@ -32,8 +33,14 @@ import { useEffect, useRef, useState } from 'react'
 import { PlusIcon } from '../icons-v2-generated/signs-and-symbols/plus-icon'
 import { XmarkIcon } from '../icons-v2-generated/signs-and-symbols/xmark-icon'
 import { Button } from '../ui/button'
+import { cn } from '../../utils/cn'
 import { ANTHROPIC_SUPPORTED_IMAGE_MIME } from './utils/chat-attachment-markdown'
 
+/** Chip strip / chip density. `compact` shrinks the thumbnail, padding, text
+ *  and max-width for narrow surfaces (e.g. the ticket-drawer reply composer);
+ *  `default` is the global Ask-AI chat sizing. */
+export type ChatAttachmentSize = 'default' | 'compact'
+
 // ===========================================================================
 // CONSTANTS & TYPES — inlined from hub `lib/config/chat-attachment-config.ts`
 // ===========================================================================
@@ -88,6 +95,9 @@ export interface ChatAttachmentAddButtonProps {
   onAddFiles: (files: FileList | File[]) => void
   /** External disable (e.g. while chat is streaming). */
   disabled?: boolean
+  /** Density. `compact` renders a smaller 24×24 button for narrow surfaces
+   *  (ticket-drawer composer); `default` is the 28×28 global-chat button. */
+  size?: ChatAttachmentSize
 }
 
 /**
@@ -111,11 +121,16 @@ export function ChatAttachmentAddButton({
   attachmentsCount,
   onAddFiles,
   disabled = false,
+  size = 'default',
 }: ChatAttachmentAddButtonProps) {
   const fileInputRef = useRef<HTMLInputElement | null>(null)
+  const compact = size === 'compact'
+  // Keep the placeholder footprint in lockstep with the real button size so
+  // there's zero layout shift when `attachmentsEnabled` resolves.
+  const boxClass = compact ? 'h-6 w-6' : 'h-7 w-7'
 
   if (!attachmentsEnabled) {
-    return <span aria-hidden="true" className="inline-block h-7 w-7 shrink-0" />
+    return <span aria-hidden="true" className={cn('inline-block shrink-0', boxClass)} />
   }
 
   const slotsAvailable = Math.max(
@@ -159,8 +174,8 @@ export function ChatAttachmentAddButton({
             ? 'Add attachments'
             : `Limit reached (${CHAT_ATTACHMENT_CONCURRENT_UPLOADS_PER_USER})`
         }
-        leftIcon={<PlusIcon className="h-4 w-4" />}
-        className="!h-7 !w-7 !p-0 shrink-0 text-ods-text-muted hover:text-ods-text-primary"
+        leftIcon={<PlusIcon className={compact ? 'h-3.5 w-3.5' : 'h-4 w-4'} />}
+        className={cn('!p-0 shrink-0 text-ods-text-muted hover:text-ods-text-primary', compact ? '!h-6 !w-6' : '!h-7 !w-7')}
       />
     </>
   )
@@ -175,6 +190,10 @@ export interface ChatAttachmentChipStripProps {
   onRemove: (id: string) => void
   /** External disable (e.g. while chat is streaming). */
   disabled?: boolean
+  /** Density. `compact` (smaller thumbnail/padding/text, narrower chips) suits
+   *  narrow surfaces like the ticket-drawer reply composer; `default` is the
+   *  global Ask-AI chat sizing. */
+  size?: ChatAttachmentSize
 }
 
 /**
@@ -186,17 +205,20 @@ export function ChatAttachmentChipStrip({
   attachments,
   onRemove,
   disabled = false,
+  size = 'default',
 }: ChatAttachmentChipStripProps) {
   if (attachments.length === 0) return null
+  const compact = size === 'compact'
   return (
-    <div className="flex-shrink-0 px-5 pb-2">
-      <div className="flex items-center gap-2 flex-wrap">
+    <div className={cn('flex-shrink-0', compact ? 'px-3 pb-1.5' : 'px-5 pb-2')}>
+      <div className={cn('flex items-center flex-wrap', compact ? 'gap-1.5' : 'gap-2')}>
         {attachments.map((att) => (
           <AttachmentChip
             key={att.id}
             attachment={att}
             onRemove={() => onRemove(att.id)}
             disabled={disabled}
+            size={size}
           />
         ))}
       </div>
@@ -212,11 +234,13 @@ interface AttachmentChipProps {
   attachment: StagedAttachment
   onRemove: () => void
   disabled: boolean
+  size?: ChatAttachmentSize
 }
 
-function AttachmentChip({ attachment, onRemove, disabled }: AttachmentChipProps) {
+function AttachmentChip({ attachment, onRemove, disabled, size = 'default' }: AttachmentChipProps) {
   const { file, status, progress, errorMessage } = attachment
   const isImage = (ANTHROPIC_SUPPORTED_IMAGE_MIME as readonly string[]).includes(file.type)
+  const compact = size === 'compact'
 
   // Inline thumbnail for images during STAGING (pre-upload-complete).
   // Local `URL.createObjectURL` blob — the user sees their image
@@ -225,19 +249,27 @@ function AttachmentChip({ attachment, onRemove, disabled }: AttachmentChipProps)
 
   return (
     <div
-      className="flex items-center gap-2 rounded-md border border-ods-border bg-ods-card px-2 py-1.5 max-w-[240px]"
+      className={cn(
+        'flex items-center rounded-md border border-ods-border bg-ods-card',
+        compact ? 'gap-1.5 px-1.5 py-1 max-w-[180px]' : 'gap-2 px-2 py-1.5 max-w-[240px]',
+      )}
       role="group"
       aria-label={`Attachment ${file.name}`}
     >
       {/* Thumbnail OR file-type initials */}
-      <div className="relative h-8 w-8 shrink-0 overflow-hidden rounded bg-ods-bg">
+      <div
+        className={cn(
+          'relative shrink-0 overflow-hidden rounded bg-ods-bg',
+          compact ? 'h-6 w-6' : 'h-8 w-8',
+        )}
+      >
         {isImage && blobUrl ? (
           // eslint-disable-next-line @next/next/no-img-element -- blob: URLs
           //  cannot go through next/image; this is a transient pre-upload
           //  preview, NOT the chat-history render path.
           <img src={blobUrl} alt={file.name} className="h-full w-full object-cover" />
         ) : (
-          <div className="flex h-full w-full items-center justify-center text-[10px] font-mono uppercase text-ods-text-muted">
+          <div className={cn('flex h-full w-full items-center justify-center font-mono uppercase text-ods-text-muted', compact ? 'text-[9px]' : 'text-[10px]')}>
             {extLabel(file.name)}
           </div>
         )}
@@ -254,19 +286,23 @@ function AttachmentChip({ attachment, onRemove, disabled }: AttachmentChipProps)
 
       {/* Filename + status */}
       <div className="min-w-0 flex-1">
-        <div className="truncate text-xs text-ods-text-primary" title={file.name}>
+        <div className={cn('truncate text-ods-text-primary', compact ? 'text-[11px] leading-tight' : 'text-xs')} title={file.name}>
           {file.name}
         </div>
-        <div className="text-[10px] text-ods-text-muted">
-          {status === 'sniffing' && 'Checking…'}
-          {status === 'uploading' && `${progress}% · ${formatFileSize(file.size)}`}
-          {status === 'ready' && formatFileSize(file.size)}
-          {status === 'error' && (
-            <span className="text-ods-attention-red-error" title={errorMessage}>
-              {errorMessage ?? 'Upload failed'}
-            </span>
-          )}
-        </div>
+        {/* Compact mode hides the size/status sub-line for ready files to keep the
+            chip to a single line; uploading/error states still surface. */}
+        {(!compact || status !== 'ready') && (
+          <div className={cn('text-ods-text-muted', compact ? 'text-[9px] leading-tight' : 'text-[10px]')}>
+            {status === 'sniffing' && 'Checking…'}
+            {status === 'uploading' && `${progress}% · ${formatFileSize(file.size)}`}
+            {status === 'ready' && formatFileSize(file.size)}
+            {status === 'error' && (
+              <span className="text-ods-attention-red-error" title={errorMessage}>
+                {errorMessage ?? 'Upload failed'}
+              </span>
+            )}
+          </div>
+        )}
       </div>
 
       {/* Remove button — UI-Kit Button with `transparent` + `small`. */}
@@ -277,8 +313,8 @@ function AttachmentChip({ attachment, onRemove, disabled }: AttachmentChipProps)
         onClick={onRemove}
         disabled={disabled}
         aria-label={`Remove ${file.name}`}
-        leftIcon={<XmarkIcon className="h-3.5 w-3.5" />}
-        className="!h-5 !w-5 !p-0 shrink-0 text-ods-text-muted hover:text-ods-text-primary"
+        leftIcon={<XmarkIcon className={compact ? 'h-3 w-3' : 'h-3.5 w-3.5'} />}
+        className={cn('!p-0 shrink-0 text-ods-text-muted hover:text-ods-text-primary', compact ? '!h-4 !w-4' : '!h-5 !w-5')}
       />
     </div>
   )

package/src/components/chat/chat-input.tsx

@@ -34,6 +34,11 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
       disabled = false,
       autoFocus = false,
       fullWidth = false,
+      // Composer extension — pulled out so it never falls through to the
+      // underlying <textarea> as an unknown DOM attribute. `allowEmptySend`
+      // lets surfaces that attach files (e.g. the ticket reply composer) send
+      // with empty text once an attachment is ready.
+      allowEmptySend = false,
       ...inputProps
     } = rest
 
@@ -47,7 +52,17 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
       if (disabled) return
       const el = textareaRef.current
       if (!el || el.disabled) return
-      el.focus()
+      // ALWAYS `preventScroll`. Focusing a chat composer must never yank the
+      // viewport: in the global Ask-AI chat the input is a sticky, always-
+      // visible composer (preventScroll is a no-op there), and in the ticket
+      // reply composer the input sits BELOW a tall fixed-height feed — a
+      // scroll-on-focus there fights the card's smooth scroll-to-top when the
+      // drawer opens. This bit a specific flow: deep-link a ticket → close →
+      // reopen, then the post-state-transition refocus effect below fired a
+      // bare `focus()` AFTER the card's `window.scrollTo({behavior:'smooth'})`,
+      // scrolling the textarea into view and cancelling the smooth animation.
+      // `preventScroll` on every focus path removes the whole class of bug.
+      el.focus({ preventScroll: true })
     }, [disabled])
 
     useEffect(() => {
@@ -63,6 +78,34 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
     const valueRef = useRef(value)
     valueRef.current = value
 
+    // Shared send path for the Send button, Enter key, and imperative submit().
+    // Replaces the old eager `setValue('')`: the draft clears ONLY when the send
+    // is not rejected (`onSend` returns / resolves !== false), so a failed ticket
+    // reply keeps the user's text. `allowEmptySend` lets attachment surfaces send
+    // with empty text. Memoized on its gate inputs ONLY (not `value`) so it stays
+    // stable across keystrokes — the imperative handle below depends on it without
+    // rebuilding per keystroke (preserves the `valueRef` optimization above).
+    const fire = useCallback(
+      (message: string) => {
+        const can = (message.length > 0 || allowEmptySend) && !sending && !disabled
+        if (!can || !onSend) return
+        const result = onSend(message)
+        const done = () => {
+          setValue('')
+          shouldRefocusRef.current = true
+          focusTextarea()
+        }
+        if (result instanceof Promise) {
+          void result.then((ok) => {
+            if (ok !== false) done()
+          })
+        } else if (result !== false) {
+          done()
+        }
+      },
+      [allowEmptySend, sending, disabled, onSend, focusTextarea],
+    )
+
     // Expose the `ChatInputRef` shape so parents can imperatively pre-fill
     // the input (used by the empty-state quick-action chips that translate
     // to `/<id> ` slash invocations) and focus the textarea programmatically.
@@ -86,7 +129,7 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
           requestAnimationFrame(() => {
             const el = textareaRef.current
             if (!el || disabled || el.disabled) return
-            el.focus()
+            el.focus({ preventScroll: true })
             el.setSelectionRange(next.length, next.length)
           })
         },
@@ -100,41 +143,34 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
           requestAnimationFrame(() => {
             const el = textareaRef.current
             if (!el) return
-            el.focus()
+            el.focus({ preventScroll: true })
             el.setSelectionRange(clamped, clamped)
           })
         },
         submit: (next: string) => {
-          // Mirror the user-typed Send-button path: skip when sending or
-          // disabled, fire onSend with the trimmed value, clear local state.
-          // The caller is responsible for any pre-fill UX (none here — this
-          // is the one-click "Recent" path).
-          if (sending || disabled || !onSend) return
-          const trimmed = next.trim()
-          if (!trimmed) return
-          onSend(trimmed)
-          setValue('')
-          shouldRefocusRef.current = true
-          focusTextarea()
+          // Mirror the user-typed Send-button path via the shared `fire` helper
+          // (success-gated clear). Reads `next` (its argument), NOT the textarea
+          // `value` — the "Recent" quick-action injects a `/cmd` string while
+          // `value` is empty, so reading `value` here would submit nothing.
+          fire(next.trim())
         },
         getValue: () => valueRef.current,
       }),
-      // `valueRef` and `shouldRefocusRef` are stable refs. `sending` /
-      // `disabled` / `onSend` change session-rarely; including them here
-      // is correct for closure freshness and rebuilds < 5 times per chat
-      // session — an order of magnitude fewer than per-keystroke.
-      [focusTextarea, sending, disabled, onSend],
+      // `valueRef` and `shouldRefocusRef` are stable refs. `disabled` (read by
+      // `setValue`'s rAF guard) and `focusTextarea` change session-rarely; `fire`
+      // is memoized on its gate inputs (`sending`/`onSend`/`allowEmptySend` all
+      // live inside it), so the handle rebuilds only when those change — still
+      // far fewer than per-keystroke.
+      [focusTextarea, disabled, fire],
     )
 
+    // The Enter key calls handleSubmit directly (bypassing the Send button's
+    // per-render `sendDisabled`), so it must read a fresh gate — `fire` is
+    // memoized on every gate input, so depending on `fire` + `value` is both
+    // fresh and exhaustive-deps-clean.
     const handleSubmit = useCallback(() => {
-      const message = value.trim()
-      if (message && !sending && !disabled && onSend) {
-        onSend(message)
-        setValue('')
-        shouldRefocusRef.current = true
-        focusTextarea()
-      }
-    }, [value, sending, disabled, onSend, focusTextarea])
+      fire(value.trim())
+    }, [fire, value])
 
     // Slash-command autocomplete state. Detection runs in render so the
     // keyboard handler can branch on it without re-parsing.
@@ -194,7 +230,7 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
         requestAnimationFrame(() => {
           const el = textareaRef.current
           if (!el || el.disabled) return
-          el.focus()
+          el.focus({ preventScroll: true })
           el.setSelectionRange(next.length, next.length)
         })
       },
@@ -287,7 +323,10 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
     }, [onStop, isStopping])
 
     const isStopMode = sending && !!onStop
-    const sendDisabled = sending || disabled || !value.trim()
+    // Send gate: `allowEmptySend` lets empty text send (attachments-only).
+    // Default (false) collapses to the original `!value.trim()` gate.
+    const hasContent = value.trim().length > 0 || allowEmptySend
+    const sendDisabled = sending || disabled || !hasContent
 
     return (
       <div

package/src/components/chat/chat-message-row.tsx

@@ -0,0 +1,124 @@
+'use client'
+
+/**
+ * `<ChatMessageRow>` — THE single source of truth for a Slack-channel-style
+ * message row. Rendered by BOTH:
+ *   - the OpenMSP Slack-community feed (hub `components/slack/chat-interface.tsx`)
+ *   - the customer ticket conversation feed (lib `ticket-detail-drawer.tsx`)
+ *
+ * Both surfaces render THIS component, so they are pixel-identical by
+ * construction — avatar size, font sizes, weights, spacing, and line-heights
+ * can never drift apart. The markup is the verbatim Slack `MessageItem` layout
+ * (avatar `w-8 h-8 md:w-10 md:h-10 rounded-lg object-cover` + bold name +
+ * relative time + `whitespace-pre-wrap` body). Colors are ODS theme tokens
+ * ONLY (`text-ods-text-primary` / `text-ods-text-secondary`). The `text-[Npx]`
+ * / `font-body` / `leading-*` utilities are FONT/SIZE, not color — they are
+ * required to match the Slack typography exactly.
+ *
+ * `footer` is the only per-surface variation slot: the Slack feed passes its
+ * "N replies" badge; the ticket feed passes `<TicketAttachmentsList>`.
+ */
+
+import Image from '../../embed-shims/next-image'
+import { getFirstLastInitials } from '../../utils/format'
+import { useProxiedImageUrl } from './hooks/use-proxied-image-url'
+import type { ReactNode } from 'react'
+
+export interface ChatMessageRowProps {
+  /** Display name (bold, top-left). */
+  displayName: string
+  /** Avatar image URL. Proxied via `useProxiedImageUrl`; falls back to
+   *  initials in a same-sized `rounded-lg` box when absent. */
+  avatarUrl?: string | null
+  /** Pre-formatted relative-time label (e.g. "2h ago"). Caller formats it —
+   *  Slack passes its server `displayTime`, tickets pass
+   *  `formatRelativeTime(createdAt)`. Empty/undefined hides the time. */
+  timeLabel?: string | null
+  /** Message body. Empty + no footer renders nothing under the header. */
+  body: string
+  /** Per-surface slot under the body: Slack reply badge / ticket attachments. */
+  footer?: ReactNode
+}
+
+export function ChatMessageRow({
+  displayName,
+  avatarUrl,
+  timeLabel,
+  body,
+  footer,
+}: ChatMessageRowProps) {
+  const proxiedAvatar = useProxiedImageUrl(avatarUrl ?? '')
+  const src = proxiedAvatar || avatarUrl || undefined
+  const hasBody = body.trim().length > 0
+
+  return (
+    <div className="flex gap-2 md:gap-3 w-full min-w-0">
+      {/* Avatar — verbatim Slack sizing: 32px → 40px, rounded-lg, object-cover.
+          Initials fallback uses the SAME box so layout is identical with or
+          without an image. */}
+      {src ? (
+        <Image
+          src={src}
+          alt={displayName}
+          className="w-8 h-8 md:w-10 md:h-10 rounded-lg object-cover flex-shrink-0"
+          width={40}
+          height={40}
+        />
+      ) : (
+        <div className="w-8 h-8 md:w-10 md:h-10 rounded-lg flex-shrink-0 flex items-center justify-center bg-ods-bg border border-ods-border text-[12px] font-medium text-ods-text-primary font-body">
+          {getFirstLastInitials(displayName) || '?'}
+        </div>
+      )}
+
+      {/* Message content */}
+      <div className="flex-1 min-w-0 max-w-full">
+        {/* Header — name + relative time. Verbatim Slack typography. */}
+        <div className="flex items-center gap-2 max-w-full mb-1 min-w-0">
+          <span className="text-[14px] md:text-[15px] font-bold leading-[1.33] text-ods-text-primary font-body tracking-[-0.02em] truncate">
+            {displayName}
+          </span>
+          {timeLabel && (
+            <span className="text-[11px] md:text-[12px] font-medium leading-[1.43] text-ods-text-secondary font-body flex-shrink-0">
+              {timeLabel}
+            </span>
+          )}
+        </div>
+
+        {/* Body — verbatim Slack: 12/14px, pre-wrap, break-words. */}
+        {hasBody && (
+          <div className="text-[12px] md:text-[14px] font-medium leading-[1.43] text-ods-text-primary font-body whitespace-pre-wrap break-words min-w-0 max-w-full">
+            {body}
+          </div>
+        )}
+
+        {footer}
+      </div>
+    </div>
+  )
+}
+
+/**
+ * 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 function ChatMessageRowSkeleton() {
+  // Bars use `bg-ods-border` (NOT `bg-ods-skeleton` — that token resolves to
+  // transparent in this build, leaving the box visually empty).
+  return (
+    <div className="flex gap-2 md:gap-3 w-full min-w-0">
+      <div className="w-8 h-8 md:w-10 md:h-10 rounded-lg flex-shrink-0 bg-ods-border animate-pulse" />
+      <div className="flex-1 min-w-0">
+        {/* Header row — name + time bars, same mb-1 + gap-2 as the real header. */}
+        <div className="flex items-center gap-2 mb-1">
+          <div className="h-[15px] md:h-[20px] w-24 md:w-32 bg-ods-border rounded animate-pulse" />
+          <div className="h-[12px] md:h-[16px] w-12 md:w-16 bg-ods-border rounded animate-pulse" />
+        </div>
+        {/* Two body lines — match the 12/14px body line-height. */}
+        <div className="h-[14px] md:h-[18px] w-full bg-ods-border rounded animate-pulse" />
+        <div className="h-[14px] md:h-[18px] w-3/4 bg-ods-border rounded animate-pulse mt-1" />
+      </div>
+    </div>
+  )
+}

package/src/components/chat/index.ts

@@ -12,6 +12,7 @@ export * from './chat-input'
 export * from './slash-command-suggestions'
 export * from './chat-message-enhanced'
 export * from './chat-message-list'
+export * from './chat-message-row'
 
 export * from './chat-quick-action'
 export * from './chat-ticket-list'

package/src/components/chat/types/component.types.ts

@@ -284,7 +284,10 @@ export interface SlashCommandsProp {
 }
 
 export interface ChatInputProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onSubmit'> {
-  onSend?: (message: string) => void
+  /** Source-compatible widening: returning `false` (or a Promise resolving to
+   *  `false`) tells the input to KEEP the draft (e.g. a failed send). `void` /
+   *  `true` clears as before — preserves every existing caller's behavior. */
+  onSend?: (message: string) => void | boolean | Promise<boolean>
   onStop?: () => void | Promise<void>
   sending?: boolean
   awaitingResponse?: boolean
@@ -306,6 +309,10 @@ export interface ChatInputProps extends Omit<TextareaHTMLAttributes<HTMLTextArea
    *  primitives (no raw HTML elements) and ODS tokens for theming.
    *  Backward compat: omit to disable autocomplete entirely. */
   slashCommands?: SlashCommandsProp
+  /** When true, send is allowed with EMPTY text (e.g. an attachments-only
+   *  reply); `onSend('')` fires. Default false → today's text-required gate.
+   *  Used by the ticket reply composer so a file-only reply can send. */
+  allowEmptySend?: boolean
 }
 
 export interface ChatInputRef {