@ttt-productions/chat-react 0.12.9 → 0.12.11

package/dist/ui/MessageList.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageList.js","sourceRoot":"","sources":["../../src/ui/MessageList.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE7D,MAAM,UAAU,WAAW,CAAC,KA+B3B;IACC,MAAM,EACJ,QAAQ,EACR,aAAa,EACb,OAAO,EACP,eAAe,EACf,QAAQ,EACR,WAAW,EACX,aAAa,EACb,gBAAgB,EAChB,kBAAkB,EAClB,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,UAAU,GAAG,KAAK,EAClB,QAAQ,EACR,aAAa,EACb,WAAW,GACZ,GAAG,KAAK,CAAC;IAEV,MAAM,WAAW,GAAG,eAAe,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;IACrF,MAAM,UAAU,GAAG,UAAU,CAAC,CAAC,CAAC,uCAAuC,CAAC,CAAC,CAAC,UAAU,CAAC;IAErF,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IACrD,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE1D,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACzC,MAAM,mBAAmB,GAAG,KAAK,CAAC,MAAM,CAAgB,IAAI,CAAC,CAAC;IAC9D,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IAErC,6EAA6E;IAC7E,kEAAkE;IAClE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAExD,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC5C,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,EAAE;YAAE,OAAO;QAChB,EAAE,CAAC,SAAS,GAAG,EAAE,CAAC,YAAY,CAAC;QAC/B,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC;QAC7B,cAAc,CAAC,CAAC,CAAC,CAAC;QAClB,gBAAgB,EAAE,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,4DAA4D;IAC5D,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,IAAI,GAAG,SAAS,CAAC,OAAO,CAAC;QAC/B,MAAM,MAAM,GAAG,cAAc,CAAC,OAAO,CAAC;QACtC,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM;YAAE,OAAO;QAC7B,IAAI,OAAO,oBAAoB,KAAK,WAAW;YAAE,OAAO;QAExD,MAAM,EAAE,GAAG,IAAI,oBAAoB,CACjC,CAAC,OAAO,EAAE,EAAE;YACV,MAAM,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;YACrB,IAAI,CAAC,CAAC,EAAE,cAAc;gBAAE,OAAO;YAC/B,IAAI,CAAC,QAAQ,IAAI,eAAe;gBAAE,OAAO;YAEzC,mBAAmB,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC;YAChD,WAAW,EAAE,EAAE,CAAC;QAClB,CAAC,EACD,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE,CACvB,CAAC;QAEF,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QACnB,OAAO,GAAG,EAAE,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;IAC/B,CAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,EAAE,WAAW,CAAC,CAAC,CAAC;IAE7C,kDAAkD;IAClD,KAAK,CAAC,eAAe,CAAC,GAAG,EAAE;QACzB,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,EAAE;YAAE,OAAO;QAEhB,MAAM,KAAK,GAAG,QAAQ,CAAC,MAAM,CAAC;QAC9B,MAAM,IAAI,GAAG,YAAY,CAAC,OAAO,CAAC;QAElC,IAAI,IAAI,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;YAC5B,mEAAmE;YACnE,qBAAqB,CAAC,GAAG,EAAE;gBACzB,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC;gBACpC,EAAE,CAAC,SAAS,GAAG,EAAE,CAAC,YAAY,CAAC;gBAC/B,8CAA8C;gBAC9C,IAAI,MAAM,CAAC,OAAO,KAAK,YAAY,EAAE,CAAC;oBACpC,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,YAAY,EAAE,QAAQ,EAAE,SAA2B,EAAE,CAAC,CAAC;gBAChF,CAAC;YACH,CAAC,CAAC,CAAC;YACH,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC;QAC/B,CAAC;aAAM,IAAI,KAAK,GAAG,IAAI,IAAI,mBAAmB,CAAC,OAAO,IAAI,IAAI,EAAE,CAAC;YAC/D,sDAAsD;YACtD,MAAM,IAAI,GAAG,EAAE,CAAC,YAAY,GAAG,mBAAmB,CAAC,OAAO,CAAC;YAC3D,EAAE,CAAC,SAAS,IAAI,IAAI,CAAC;YACrB,mBAAmB,CAAC,OAAO,GAAG,IAAI,CAAC;QACrC,CAAC;aAAM,IAAI,KAAK,GAAG,IAAI,IAAI,aAAa,CAAC,OAAO,EAAE,CAAC;YACjD,yDAAyD;YACzD,4FAA4F;YAC5F,qBAAqB,CAAC,GAAG,EAAE;gBACzB,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC;gBACpC,EAAE,CAAC,SAAS,GAAG,EAAE,CAAC,YAAY,CAAC;gBAC/B,IAAI,MAAM,CAAC,OAAO,KAAK,YAAY,EAAE,CAAC;oBACpC,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,YAAY,EAAE,QAAQ,EAAE,SAA2B,EAAE,CAAC,CAAC;gBAChF,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;aAAM,IAAI,KAAK,GAAG,IAAI,EAAE,CAAC;YACxB,2EAA2E;YAC3E,4CAA4C;YAC5C,cAAc,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC;QAC5C,CAAC;QAED,YAAY,CAAC,OAAO,GAAG,KAAK,CAAC;IAC/B,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,QAAQ,GAAG,CAAC,CAAgC,EAAE,EAAE;QACpD,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,CAAC,CAAC,aAAa,CAAC;QAClE,MAAM,QAAQ,GAAG,YAAY,GAAG,CAAC,SAAS,GAAG,YAAY,CAAC,GAAG,EAAE,CAAC;QAChE,IAAI,QAAQ,KAAK,aAAa,CAAC,OAAO;YAAE,gBAAgB,EAAE,CAAC,QAAQ,CAAC,CAAC;QACrE,aAAa,CAAC,OAAO,GAAG,QAAQ,CAAC;QACjC,IAAI,QAAQ,IAAI,WAAW,KAAK,CAAC;YAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IACvD,CAAC,CAAC;IAEF,IAAI,OAAO,GAAkB,IAAI,CAAC;IAElC,OAAO,CACL,eAAK,SAAS,EAAE,UAAU,aACxB,eAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,WAAW,sBAAsB,EAAE,QAAQ,EAAE,QAAQ,aACrF,eAAe,IAAI,cAAK,SAAS,EAAC,qCAAqC,8BAAe,EAEvF,cAAK,GAAG,EAAE,cAAc,GAAI,EAE3B,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CACvB,cAAK,SAAS,EAAC,4DAA4D,gCAAsB,CAClG,CAAC,CAAC,CAAC,CACF,cAAK,SAAS,EAAC,eAAe,YAC3B,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE;4BACvB,MAAM,GAAG,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,YAAY,EAAE,CAAC;4BACjD,MAAM,OAAO,GAAG,GAAG,KAAK,OAAO,CAAC;4BAChC,OAAO,GAAG,GAAG,CAAC;4BAEd,MAAM,OAAO,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;4BACxD,wCAAwC;4BACxC,MAAM,YAAY,GAAG,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;4BAElE,MAAM,MAAM,GACV,CAAC,CAAC,IAAI,IAAI,gBAAgB,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;4BAE7E,MAAM,IAAI,GACR,aAAa,EAAE,CAAC,CAAC,CAAC;gCAClB,MAAM,IAAI,CACR,KAAC,kBAAkB,IACjB,CAAC,EAAE,CAAC,EACJ,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,YAAY,EAC5B,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,WAAW,GACxB,CACH,CAAC;4BAEJ,OAAO,CACL,MAAC,KAAK,CAAC,QAAQ,eACZ,OAAO,IAAI,CACV,cAAK,SAAS,EAAC,0BAA0B,YAEvC,cAAK,SAAS,EAAC,qBAAqB,YACjC,IAAI,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,kBAAkB,EAAE,GACvC,GACF,CACP,EACA,IAAI,KATc,CAAC,CAAC,SAAS,CAUf,CAClB,CAAC;wBACJ,CAAC,CAAC,GACE,CACP,IACG,EAEL,CAAC,WAAW,GAAG,CAAC,IAAI,kBAAkB,CAAC,IAAI,CAC1C,KAAC,MAAM,IACL,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,IAAI,gBACG,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,WAAW,iCAAiC,CAAC,CAAC,CAAC,kBAAkB,EAClG,SAAS,EAAC,0EAA0E,EACpF,OAAO,EAAE,GAAG,EAAE;oBACZ,cAAc,EAAE,CAAC;oBACjB,gBAAgB,EAAE,EAAE,CAAC;gBACvB,CAAC,YAEA,WAAW,GAAG,CAAC;oBACd,CAAC,CAAC,GAAG,WAAW,eAAe,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI;oBAC7D,CAAC,CAAC,GAAG,GACA,CACV,IACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport type { ChatMessageV1, ModerationHandlers } from \"@ttt-productions/chat-core\";\nimport { isContinuation } from \"@ttt-productions/chat-core\";\nimport type { MessageRendererRegistry } from \"../types.js\";\nimport { Button } from \"@ttt-productions/ui-core/react\";\nimport { MessageItemDefault } from \"./MessageItemDefault.js\";\n\nexport function MessageList(props: {\n  messages: ChatMessageV1[];\n  currentUserId: string;\n  isAdmin: boolean;\n\n  isFetchingOlder?: boolean;\n  hasOlder?: boolean;\n  onLoadOlder?: () => void;\n\n  renderMessage?: (m: ChatMessageV1) => React.ReactNode;\n  messageRenderers?: MessageRendererRegistry;\n\n  showScrollToBottom?: boolean;\n  onScrollToBottom?: () => void;\n  /** Reports whether the list is scrolled to the bottom so the consumer can advance\n   *  authoritative read state only when the latest message is actually in view (C-B6). */\n  onAtBottomChange?: (atBottom: boolean) => void;\n  /** Class for the scrollable message region. Overrides the default. The default is\n   *  `h-[400px]` (fixed-height card) unless `fillHeight` is set, in which case it is\n   *  `flex-1 min-h-0`. */\n  scrollClassName?: string;\n  /** Fill the parent's height instead of a fixed `h-[400px]`. Makes the list a flex-col\n   *  that flexes to fill its container, so a bounded-height page panel scrolls inside.\n   *  The consuming layout must give MessageList's ancestor a bounded height (ChatShell's\n   *  `fillHeight` wires Card → CardContent → MessageList for this). */\n  fillHeight?: boolean;\n\n  handlers?: ModerationHandlers;\n  onSenderClick?: (senderId: string, displayName: string) => void;\n  /** Retry a failed realtime send by clientMessageId (realtime transport only). */\n  onRetrySend?: (clientMessageId: string) => void;\n}) {\n  const {\n    messages,\n    currentUserId,\n    isAdmin,\n    isFetchingOlder,\n    hasOlder,\n    onLoadOlder,\n    renderMessage,\n    messageRenderers,\n    showScrollToBottom,\n    onScrollToBottom,\n    onAtBottomChange,\n    scrollClassName,\n    fillHeight = false,\n    handlers,\n    onSenderClick,\n    onRetrySend,\n  } = props;\n\n  const scrollClass = scrollClassName ?? (fillHeight ? \"flex-1 min-h-0\" : \"h-[400px]\");\n  const outerClass = fillHeight ? \"relative flex flex-col flex-1 min-h-0\" : \"relative\";\n\n  const scrollRef = React.useRef<HTMLDivElement>(null);\n  const topSentinelRef = React.useRef<HTMLDivElement>(null);\n\n  const isAtBottomRef = React.useRef(true);\n  const prevScrollHeightRef = React.useRef<number | null>(null);\n  const prevCountRef = React.useRef(0);\n\n  // Count of messages that arrived while the user was scrolled up — drives the\n  // \"new messages\" pill. Reset when the user returns to the bottom.\n  const [unseenCount, setUnseenCount] = React.useState(0);\n\n  const scrollToBottom = React.useCallback(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n    el.scrollTop = el.scrollHeight;\n    isAtBottomRef.current = true;\n    setUnseenCount(0);\n    onAtBottomChange?.(true);\n  }, [onAtBottomChange]);\n\n  // IntersectionObserver for infinite scroll (older messages)\n  React.useEffect(() => {\n    const root = scrollRef.current;\n    const target = topSentinelRef.current;\n    if (!root || !target) return;\n    if (typeof IntersectionObserver === \"undefined\") return;\n\n    const io = new IntersectionObserver(\n      (entries) => {\n        const e = entries[0];\n        if (!e?.isIntersecting) return;\n        if (!hasOlder || isFetchingOlder) return;\n\n        prevScrollHeightRef.current = root.scrollHeight;\n        onLoadOlder?.();\n      },\n      { root, threshold: 0 }\n    );\n\n    io.observe(target);\n    return () => io.disconnect();\n  }, [hasOlder, isFetchingOlder, onLoadOlder]);\n\n  // Scroll management — FIXES accordion scroll jump\n  React.useLayoutEffect(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n\n    const count = messages.length;\n    const prev = prevCountRef.current;\n\n    if (prev === 0 && count > 0) {\n      // Initial load — scroll to bottom WITHOUT triggering parent scroll\n      requestAnimationFrame(() => {\n        const savedScrollY = window.scrollY;\n        el.scrollTop = el.scrollHeight;\n        // Restore page scroll if the browser moved it\n        if (window.scrollY !== savedScrollY) {\n          window.scrollTo({ top: savedScrollY, behavior: \"instant\" as ScrollBehavior });\n        }\n      });\n      isAtBottomRef.current = true;\n    } else if (count > prev && prevScrollHeightRef.current != null) {\n      // Older messages prepended — maintain scroll position\n      const diff = el.scrollHeight - prevScrollHeightRef.current;\n      el.scrollTop += diff;\n      prevScrollHeightRef.current = null;\n    } else if (count > prev && isAtBottomRef.current) {\n      // New message at bottom, user is at bottom — scroll down\n      // Use scrollTop assignment, NOT scrollTo with behavior:\"smooth\" (causes parent scroll jump)\n      requestAnimationFrame(() => {\n        const savedScrollY = window.scrollY;\n        el.scrollTop = el.scrollHeight;\n        if (window.scrollY !== savedScrollY) {\n          window.scrollTo({ top: savedScrollY, behavior: \"instant\" as ScrollBehavior });\n        }\n      });\n    } else if (count > prev) {\n      // New message(s) arrived while the user was scrolled up — surface the pill\n      // instead of yanking their scroll position.\n      setUnseenCount((c) => c + (count - prev));\n    }\n\n    prevCountRef.current = count;\n  }, [messages]);\n\n  const onScroll = (e: React.UIEvent<HTMLDivElement>) => {\n    const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;\n    const atBottom = scrollHeight - (scrollTop + clientHeight) < 50;\n    if (atBottom !== isAtBottomRef.current) onAtBottomChange?.(atBottom);\n    isAtBottomRef.current = atBottom;\n    if (atBottom && unseenCount !== 0) setUnseenCount(0);\n  };\n\n  let lastDay: string | null = null;\n\n  return (\n    <div className={outerClass}>\n      <div ref={scrollRef} className={`${scrollClass} overflow-y-auto p-4`} onScroll={onScroll}>\n        {isFetchingOlder && <div className=\"text-center text-xs opacity-70 mb-2\">Loading…</div>}\n\n        <div ref={topSentinelRef} />\n\n        {messages.length === 0 ? (\n          <div className=\"h-full flex items-center justify-center text-sm opacity-70\">No messages yet</div>\n        ) : (\n          <div className=\"flex flex-col\">\n            {messages.map((m, idx) => {\n              const day = new Date(m.createdAt).toDateString();\n              const showDay = day !== lastDay;\n              lastDay = day;\n\n              const prevMsg = idx > 0 ? messages[idx - 1] : undefined;\n              // Date separators always break grouping\n              const continuation = showDay ? false : isContinuation(prevMsg, m);\n\n              const byType =\n                m.type && messageRenderers?.[m.type] ? messageRenderers[m.type]!(m) : null;\n\n              const body =\n                renderMessage?.(m) ??\n                byType ?? (\n                  <MessageItemDefault\n                    m={m}\n                    currentUserId={currentUserId}\n                    isAdmin={isAdmin}\n                    handlers={handlers}\n                    isContinuation={continuation}\n                    onSenderClick={onSenderClick}\n                    onRetrySend={onRetrySend}\n                  />\n                );\n\n              return (\n                <React.Fragment key={m.messageId}>\n                  {showDay && (\n                    <div className=\"my-2 flex justify-center\">\n                      {/* theme-core: components.css */}\n                      <div className=\"chat-date-separator\">\n                        {new Date(m.createdAt).toLocaleDateString()}\n                      </div>\n                    </div>\n                  )}\n                  {body}\n                </React.Fragment>\n              );\n            })}\n          </div>\n        )}\n      </div>\n\n      {(unseenCount > 0 || showScrollToBottom) && (\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"sm\"\n          aria-label={unseenCount > 0 ? `${unseenCount} new messages, scroll to latest` : \"Scroll to latest\"}\n          className=\"absolute bottom-4 left-1/2 -translate-x-1/2 rounded-full shadow-sm gap-1\"\n          onClick={() => {\n            scrollToBottom();\n            onScrollToBottom?.();\n          }}\n        >\n          {unseenCount > 0\n            ? `${unseenCount} new message${unseenCount > 1 ? \"s\" : \"\"} ↓`\n            : \"↓\"}\n        </Button>\n      )}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"MessageList.js","sourceRoot":"","sources":["../../src/ui/MessageList.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE7D,MAAM,UAAU,WAAW,CAAC,KAkC3B;IACC,MAAM,EACJ,QAAQ,EACR,aAAa,EACb,OAAO,EACP,eAAe,EACf,QAAQ,EACR,WAAW,EACX,aAAa,EACb,gBAAgB,EAChB,kBAAkB,EAClB,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,UAAU,GAAG,KAAK,EAClB,QAAQ,EACR,aAAa,EACb,WAAW,EACX,iBAAiB,GAClB,GAAG,KAAK,CAAC;IAEV,MAAM,WAAW,GAAG,eAAe,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;IACrF,MAAM,UAAU,GAAG,UAAU,CAAC,CAAC,CAAC,uCAAuC,CAAC,CAAC,CAAC,UAAU,CAAC;IAErF,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IACrD,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE1D,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACzC,MAAM,mBAAmB,GAAG,KAAK,CAAC,MAAM,CAAgB,IAAI,CAAC,CAAC;IAC9D,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IAErC,6EAA6E;IAC7E,kEAAkE;IAClE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAExD,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC5C,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,EAAE;YAAE,OAAO;QAChB,EAAE,CAAC,SAAS,GAAG,EAAE,CAAC,YAAY,CAAC;QAC/B,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC;QAC7B,cAAc,CAAC,CAAC,CAAC,CAAC;QAClB,gBAAgB,EAAE,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,4DAA4D;IAC5D,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,IAAI,GAAG,SAAS,CAAC,OAAO,CAAC;QAC/B,MAAM,MAAM,GAAG,cAAc,CAAC,OAAO,CAAC;QACtC,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM;YAAE,OAAO;QAC7B,IAAI,OAAO,oBAAoB,KAAK,WAAW;YAAE,OAAO;QAExD,MAAM,EAAE,GAAG,IAAI,oBAAoB,CACjC,CAAC,OAAO,EAAE,EAAE;YACV,MAAM,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;YACrB,IAAI,CAAC,CAAC,EAAE,cAAc;gBAAE,OAAO;YAC/B,IAAI,CAAC,QAAQ,IAAI,eAAe;gBAAE,OAAO;YAEzC,mBAAmB,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC;YAChD,WAAW,EAAE,EAAE,CAAC;QAClB,CAAC,EACD,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE,CACvB,CAAC;QAEF,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QACnB,OAAO,GAAG,EAAE,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;IAC/B,CAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,EAAE,WAAW,CAAC,CAAC,CAAC;IAE7C,kDAAkD;IAClD,KAAK,CAAC,eAAe,CAAC,GAAG,EAAE;QACzB,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,EAAE;YAAE,OAAO;QAEhB,MAAM,KAAK,GAAG,QAAQ,CAAC,MAAM,CAAC;QAC9B,MAAM,IAAI,GAAG,YAAY,CAAC,OAAO,CAAC;QAElC,IAAI,IAAI,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;YAC5B,mEAAmE;YACnE,qBAAqB,CAAC,GAAG,EAAE;gBACzB,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC;gBACpC,EAAE,CAAC,SAAS,GAAG,EAAE,CAAC,YAAY,CAAC;gBAC/B,8CAA8C;gBAC9C,IAAI,MAAM,CAAC,OAAO,KAAK,YAAY,EAAE,CAAC;oBACpC,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,YAAY,EAAE,QAAQ,EAAE,SAA2B,EAAE,CAAC,CAAC;gBAChF,CAAC;YACH,CAAC,CAAC,CAAC;YACH,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC;QAC/B,CAAC;aAAM,IAAI,KAAK,GAAG,IAAI,IAAI,mBAAmB,CAAC,OAAO,IAAI,IAAI,EAAE,CAAC;YAC/D,sDAAsD;YACtD,MAAM,IAAI,GAAG,EAAE,CAAC,YAAY,GAAG,mBAAmB,CAAC,OAAO,CAAC;YAC3D,EAAE,CAAC,SAAS,IAAI,IAAI,CAAC;YACrB,mBAAmB,CAAC,OAAO,GAAG,IAAI,CAAC;QACrC,CAAC;aAAM,IAAI,KAAK,GAAG,IAAI,IAAI,aAAa,CAAC,OAAO,EAAE,CAAC;YACjD,yDAAyD;YACzD,4FAA4F;YAC5F,qBAAqB,CAAC,GAAG,EAAE;gBACzB,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC;gBACpC,EAAE,CAAC,SAAS,GAAG,EAAE,CAAC,YAAY,CAAC;gBAC/B,IAAI,MAAM,CAAC,OAAO,KAAK,YAAY,EAAE,CAAC;oBACpC,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,YAAY,EAAE,QAAQ,EAAE,SAA2B,EAAE,CAAC,CAAC;gBAChF,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;aAAM,IAAI,KAAK,GAAG,IAAI,EAAE,CAAC;YACxB,2EAA2E;YAC3E,4CAA4C;YAC5C,cAAc,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC;QAC5C,CAAC;QAED,YAAY,CAAC,OAAO,GAAG,KAAK,CAAC;IAC/B,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,QAAQ,GAAG,CAAC,CAAgC,EAAE,EAAE;QACpD,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,CAAC,CAAC,aAAa,CAAC;QAClE,MAAM,QAAQ,GAAG,YAAY,GAAG,CAAC,SAAS,GAAG,YAAY,CAAC,GAAG,EAAE,CAAC;QAChE,IAAI,QAAQ,KAAK,aAAa,CAAC,OAAO;YAAE,gBAAgB,EAAE,CAAC,QAAQ,CAAC,CAAC;QACrE,aAAa,CAAC,OAAO,GAAG,QAAQ,CAAC;QACjC,IAAI,QAAQ,IAAI,WAAW,KAAK,CAAC;YAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IACvD,CAAC,CAAC;IAEF,IAAI,OAAO,GAAkB,IAAI,CAAC;IAElC,OAAO,CACL,eAAK,SAAS,EAAE,UAAU,aACxB,eAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,WAAW,sBAAsB,EAAE,QAAQ,EAAE,QAAQ,aACrF,eAAe,IAAI,cAAK,SAAS,EAAC,qCAAqC,8BAAe,EAEvF,cAAK,GAAG,EAAE,cAAc,GAAI,EAE3B,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CACvB,cAAK,SAAS,EAAC,4DAA4D,gCAAsB,CAClG,CAAC,CAAC,CAAC,CACF,cAAK,SAAS,EAAC,eAAe,YAC3B,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE;4BACvB,MAAM,GAAG,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,YAAY,EAAE,CAAC;4BACjD,MAAM,OAAO,GAAG,GAAG,KAAK,OAAO,CAAC;4BAChC,OAAO,GAAG,GAAG,CAAC;4BAEd,MAAM,OAAO,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;4BACxD,wCAAwC;4BACxC,MAAM,YAAY,GAAG,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;4BAElE,MAAM,MAAM,GACV,CAAC,CAAC,IAAI,IAAI,gBAAgB,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;4BAE7E,MAAM,IAAI,GACR,aAAa,EAAE,CAAC,CAAC,CAAC;gCAClB,MAAM,IAAI,CACR,KAAC,kBAAkB,IACjB,CAAC,EAAE,CAAC,EACJ,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,YAAY,EAC5B,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,WAAW,EACxB,iBAAiB,EAAE,iBAAiB,GACpC,CACH,CAAC;4BAEJ,OAAO,CACL,MAAC,KAAK,CAAC,QAAQ,eACZ,OAAO,IAAI,CACV,cAAK,SAAS,EAAC,0BAA0B,YAEvC,cAAK,SAAS,EAAC,qBAAqB,YACjC,IAAI,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,kBAAkB,EAAE,GACvC,GACF,CACP,EACA,IAAI,KATc,CAAC,CAAC,SAAS,CAUf,CAClB,CAAC;wBACJ,CAAC,CAAC,GACE,CACP,IACG,EAEL,CAAC,WAAW,GAAG,CAAC,IAAI,kBAAkB,CAAC,IAAI,CAC1C,KAAC,MAAM,IACL,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,IAAI,gBACG,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,WAAW,iCAAiC,CAAC,CAAC,CAAC,kBAAkB,EAClG,SAAS,EAAC,0EAA0E,EACpF,OAAO,EAAE,GAAG,EAAE;oBACZ,cAAc,EAAE,CAAC;oBACjB,gBAAgB,EAAE,EAAE,CAAC;gBACvB,CAAC,YAEA,WAAW,GAAG,CAAC;oBACd,CAAC,CAAC,GAAG,WAAW,eAAe,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI;oBAC7D,CAAC,CAAC,GAAG,GACA,CACV,IACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport type { ChatMessageV1, ModerationHandlers } from \"@ttt-productions/chat-core\";\nimport { isContinuation } from \"@ttt-productions/chat-core\";\nimport type { MessageRendererRegistry } from \"../types.js\";\nimport { Button } from \"@ttt-productions/ui-core/react\";\nimport { MessageItemDefault } from \"./MessageItemDefault.js\";\n\nexport function MessageList(props: {\n  messages: ChatMessageV1[];\n  currentUserId: string;\n  isAdmin: boolean;\n\n  isFetchingOlder?: boolean;\n  hasOlder?: boolean;\n  onLoadOlder?: () => void;\n\n  renderMessage?: (m: ChatMessageV1) => React.ReactNode;\n  messageRenderers?: MessageRendererRegistry;\n\n  showScrollToBottom?: boolean;\n  onScrollToBottom?: () => void;\n  /** Reports whether the list is scrolled to the bottom so the consumer can advance\n   *  authoritative read state only when the latest message is actually in view (C-B6). */\n  onAtBottomChange?: (atBottom: boolean) => void;\n  /** Class for the scrollable message region. Overrides the default. The default is\n   *  `h-[400px]` (fixed-height card) unless `fillHeight` is set, in which case it is\n   *  `flex-1 min-h-0`. */\n  scrollClassName?: string;\n  /** Fill the parent's height instead of a fixed `h-[400px]`. Makes the list a flex-col\n   *  that flexes to fill its container, so a bounded-height page panel scrolls inside.\n   *  The consuming layout must give MessageList's ancestor a bounded height (ChatShell's\n   *  `fillHeight` wires Card → CardContent → MessageList for this). */\n  fillHeight?: boolean;\n\n  handlers?: ModerationHandlers;\n  onSenderClick?: (senderId: string, displayName: string) => void;\n  /** Retry a failed realtime send by clientMessageId (realtime transport only). */\n  onRetrySend?: (clientMessageId: string) => void;\n  /** Re-open the attachment picker for a terminally-failed attachment. Present only\n   *  when attachment support is configured; forwarded to each MessageItemDefault. */\n  onRetryAttachment?: () => void;\n}) {\n  const {\n    messages,\n    currentUserId,\n    isAdmin,\n    isFetchingOlder,\n    hasOlder,\n    onLoadOlder,\n    renderMessage,\n    messageRenderers,\n    showScrollToBottom,\n    onScrollToBottom,\n    onAtBottomChange,\n    scrollClassName,\n    fillHeight = false,\n    handlers,\n    onSenderClick,\n    onRetrySend,\n    onRetryAttachment,\n  } = props;\n\n  const scrollClass = scrollClassName ?? (fillHeight ? \"flex-1 min-h-0\" : \"h-[400px]\");\n  const outerClass = fillHeight ? \"relative flex flex-col flex-1 min-h-0\" : \"relative\";\n\n  const scrollRef = React.useRef<HTMLDivElement>(null);\n  const topSentinelRef = React.useRef<HTMLDivElement>(null);\n\n  const isAtBottomRef = React.useRef(true);\n  const prevScrollHeightRef = React.useRef<number | null>(null);\n  const prevCountRef = React.useRef(0);\n\n  // Count of messages that arrived while the user was scrolled up — drives the\n  // \"new messages\" pill. Reset when the user returns to the bottom.\n  const [unseenCount, setUnseenCount] = React.useState(0);\n\n  const scrollToBottom = React.useCallback(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n    el.scrollTop = el.scrollHeight;\n    isAtBottomRef.current = true;\n    setUnseenCount(0);\n    onAtBottomChange?.(true);\n  }, [onAtBottomChange]);\n\n  // IntersectionObserver for infinite scroll (older messages)\n  React.useEffect(() => {\n    const root = scrollRef.current;\n    const target = topSentinelRef.current;\n    if (!root || !target) return;\n    if (typeof IntersectionObserver === \"undefined\") return;\n\n    const io = new IntersectionObserver(\n      (entries) => {\n        const e = entries[0];\n        if (!e?.isIntersecting) return;\n        if (!hasOlder || isFetchingOlder) return;\n\n        prevScrollHeightRef.current = root.scrollHeight;\n        onLoadOlder?.();\n      },\n      { root, threshold: 0 }\n    );\n\n    io.observe(target);\n    return () => io.disconnect();\n  }, [hasOlder, isFetchingOlder, onLoadOlder]);\n\n  // Scroll management — FIXES accordion scroll jump\n  React.useLayoutEffect(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n\n    const count = messages.length;\n    const prev = prevCountRef.current;\n\n    if (prev === 0 && count > 0) {\n      // Initial load — scroll to bottom WITHOUT triggering parent scroll\n      requestAnimationFrame(() => {\n        const savedScrollY = window.scrollY;\n        el.scrollTop = el.scrollHeight;\n        // Restore page scroll if the browser moved it\n        if (window.scrollY !== savedScrollY) {\n          window.scrollTo({ top: savedScrollY, behavior: \"instant\" as ScrollBehavior });\n        }\n      });\n      isAtBottomRef.current = true;\n    } else if (count > prev && prevScrollHeightRef.current != null) {\n      // Older messages prepended — maintain scroll position\n      const diff = el.scrollHeight - prevScrollHeightRef.current;\n      el.scrollTop += diff;\n      prevScrollHeightRef.current = null;\n    } else if (count > prev && isAtBottomRef.current) {\n      // New message at bottom, user is at bottom — scroll down\n      // Use scrollTop assignment, NOT scrollTo with behavior:\"smooth\" (causes parent scroll jump)\n      requestAnimationFrame(() => {\n        const savedScrollY = window.scrollY;\n        el.scrollTop = el.scrollHeight;\n        if (window.scrollY !== savedScrollY) {\n          window.scrollTo({ top: savedScrollY, behavior: \"instant\" as ScrollBehavior });\n        }\n      });\n    } else if (count > prev) {\n      // New message(s) arrived while the user was scrolled up — surface the pill\n      // instead of yanking their scroll position.\n      setUnseenCount((c) => c + (count - prev));\n    }\n\n    prevCountRef.current = count;\n  }, [messages]);\n\n  const onScroll = (e: React.UIEvent<HTMLDivElement>) => {\n    const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;\n    const atBottom = scrollHeight - (scrollTop + clientHeight) < 50;\n    if (atBottom !== isAtBottomRef.current) onAtBottomChange?.(atBottom);\n    isAtBottomRef.current = atBottom;\n    if (atBottom && unseenCount !== 0) setUnseenCount(0);\n  };\n\n  let lastDay: string | null = null;\n\n  return (\n    <div className={outerClass}>\n      <div ref={scrollRef} className={`${scrollClass} overflow-y-auto p-4`} onScroll={onScroll}>\n        {isFetchingOlder && <div className=\"text-center text-xs opacity-70 mb-2\">Loading…</div>}\n\n        <div ref={topSentinelRef} />\n\n        {messages.length === 0 ? (\n          <div className=\"h-full flex items-center justify-center text-sm opacity-70\">No messages yet</div>\n        ) : (\n          <div className=\"flex flex-col\">\n            {messages.map((m, idx) => {\n              const day = new Date(m.createdAt).toDateString();\n              const showDay = day !== lastDay;\n              lastDay = day;\n\n              const prevMsg = idx > 0 ? messages[idx - 1] : undefined;\n              // Date separators always break grouping\n              const continuation = showDay ? false : isContinuation(prevMsg, m);\n\n              const byType =\n                m.type && messageRenderers?.[m.type] ? messageRenderers[m.type]!(m) : null;\n\n              const body =\n                renderMessage?.(m) ??\n                byType ?? (\n                  <MessageItemDefault\n                    m={m}\n                    currentUserId={currentUserId}\n                    isAdmin={isAdmin}\n                    handlers={handlers}\n                    isContinuation={continuation}\n                    onSenderClick={onSenderClick}\n                    onRetrySend={onRetrySend}\n                    onRetryAttachment={onRetryAttachment}\n                  />\n                );\n\n              return (\n                <React.Fragment key={m.messageId}>\n                  {showDay && (\n                    <div className=\"my-2 flex justify-center\">\n                      {/* theme-core: components.css */}\n                      <div className=\"chat-date-separator\">\n                        {new Date(m.createdAt).toLocaleDateString()}\n                      </div>\n                    </div>\n                  )}\n                  {body}\n                </React.Fragment>\n              );\n            })}\n          </div>\n        )}\n      </div>\n\n      {(unseenCount > 0 || showScrollToBottom) && (\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"sm\"\n          aria-label={unseenCount > 0 ? `${unseenCount} new messages, scroll to latest` : \"Scroll to latest\"}\n          className=\"absolute bottom-4 left-1/2 -translate-x-1/2 rounded-full shadow-sm gap-1\"\n          onClick={() => {\n            scrollToBottom();\n            onScrollToBottom?.();\n          }}\n        >\n          {unseenCount > 0\n            ? `${unseenCount} new message${unseenCount > 1 ? \"s\" : \"\"} ↓`\n            : \"↓\"}\n        </Button>\n      )}\n    </div>\n  );\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttt-productions/chat-react",
-  "version": "0.12.9",
+  "version": "0.12.11",
   "description": "Chat React UI, hooks, and Firebase-client adapter for TTT Productions apps (realtime newest window + infinite older pagination)",
   "repository": {
     "type": "git",
@@ -61,11 +61,11 @@
   },
   "dependencies": {
     "@ttt-productions/chat-core": "^0.10.2",
-    "@ttt-productions/chat-schemas": "^0.9.2",
+    "@ttt-productions/chat-schemas": "^0.9.3",
     "@ttt-productions/realtime-core": "^0.1.3",
-    "@ttt-productions/media-schemas": "^0.14.2",
-    "@ttt-productions/ui-core": "^0.11.8",
-    "@ttt-productions/file-input": "^0.11.5",
+    "@ttt-productions/media-schemas": "^0.14.3",
+    "@ttt-productions/ui-core": "^0.11.10",
+    "@ttt-productions/file-input": "^0.11.6",
     "@ttt-productions/upload-ui": "^0.7.5",
     "@ttt-productions/media-viewer": "^0.10.5",
     "@ttt-productions/mobile-core": "^0.9.1",

package/src/styles/chat.css

@@ -97,16 +97,55 @@
 }
 
 /* --- Attachment states --- */
+
+/* Pending / URL-settling placeholder. Parchment-safe: a lightly tinted surface
+   with a subtle tokenized border (NOT the old opaque muted slab, which read as a
+   dark rectangle on the parchment chat canvas). It is a small inline status row —
+   deliberately NOT a media-sized box, so it never implies the file is viewable.
+   All colors are theme tokens; a restrained shimmer conveys "in progress". */
 .chat-attachment-pending {
+  position: relative;
+  overflow: hidden;
   display: flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0.5rem 0.75rem;
   border-radius: 0.375rem;
-  background-color: hsl(var(--muted));
+  background-color: hsl(var(--muted) / 0.2);
+  border: 1px solid hsl(var(--border) / 0.6);
+  color: hsl(var(--muted-foreground));
   font-size: 0.75rem;
 }
 
+/* Restrained left-to-right shimmer over the tinted surface. Tokenized, low-opacity,
+   and disabled under prefers-reduced-motion. The spinner remains the primary cue. */
+.chat-attachment-pending::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    hsl(var(--muted-foreground) / 0.06) 50%,
+    transparent 100%
+  );
+  transform: translateX(-100%);
+  animation: chat-attachment-shimmer 1.8s ease-in-out infinite;
+  pointer-events: none;
+}
+
+@keyframes chat-attachment-shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chat-attachment-pending::after {
+    animation: none;
+  }
+}
+
 .chat-attachment-media {
   max-width: 320px;
   border-radius: 0.375rem;
@@ -130,17 +169,42 @@
   opacity: 0.8;
 }
 
+/* Terminal-failure placeholder. A restrained, tokenized surface — a subtle border
+   and faint muted tint, NOT a destructive-red block (the failure is localized to
+   this attachment, so it must not make the whole bubble read as an error). */
 .chat-attachment-rejected {
   display: flex;
-  align-items: center;
-  gap: 0.375rem;
+  align-items: flex-start;
+  gap: 0.5rem;
   padding: 0.5rem 0.75rem;
   border-radius: 0.375rem;
-  background-color: hsl(var(--warning, var(--muted)) / 0.15);
-  color: hsl(var(--warning-foreground, var(--muted-foreground)));
+  background-color: hsl(var(--muted) / 0.35);
+  border: 1px solid hsl(var(--border));
+  color: hsl(var(--muted-foreground));
   font-size: 0.75rem;
 }
 
+.chat-attachment-rejected-icon {
+  margin-top: 0.05rem;
+  color: hsl(var(--muted-foreground));
+}
+
+.chat-attachment-rejected-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.05rem;
+  min-width: 0;
+}
+
+.chat-attachment-rejected-reason {
+  opacity: 0.85;
+}
+
+.chat-attachment-retry {
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
 .chat-attachment-status-label {
   margin-left: auto;
   opacity: 0.7;