@flamingo-stack/openframe-frontend-core 0.0.204 → 0.0.205

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

@@ -62,13 +62,16 @@ const ChatContainer = React.forwardRef<HTMLDivElement, ChatContainerProps>(
 ChatContainer.displayName = "ChatContainer"
 
 const ChatHeader = React.forwardRef<HTMLDivElement, ChatHeaderProps>(
-  ({ className, userName = 'Grace "Fae" Meadows', userTitle = "Your Personal Assistant", userAvatar, userIcon, onSettingsClick, onNewChat, onClose, onBack, showNewChat = false, connectionStatus = 'disconnected', serverUrl = null, headerActions, ticketInfo, ...props }, ref) => {
+  ({ className, userName = 'Grace "Fae" Meadows', userTitle = "Your Personal Assistant", userAvatar, userIcon, onSettingsClick, onNewChat, onClose, onBack, showNewChat = false, connectionStatus = 'disconnected', serverUrl = null, headerActions, ticketInfo, fullWidth = false, ...props }, ref) => {
     const cardClasses = "rounded-md bg-ods-card shadow-[0_18px_48px_rgba(0,0,0,0.45)] border border-ods-border ring-1 ring-black/20"
     return (
       <div
         ref={ref}
         className={cn(
-          "relative mx-auto w-full max-w-ods-content-narrow",
+          // `fullWidth` drops the centered-narrow content column for
+          // chats hosted in side panels where 600px would float in
+          // the middle of a wider container.
+          fullWidth ? "relative w-full" : "relative mx-auto w-full max-w-ods-content-narrow",
           className
         )}
         {...props}
@@ -180,8 +183,29 @@ const ChatContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDi
 )
 ChatContent.displayName = "ChatContent"
 
-const ChatFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, children, ...props }, ref) => {
+/**
+ * `ChatFooter` props.
+ *
+ * Layout API:
+ *   - `fullWidth` (preferred) — drop the inner-wrapper
+ *     `max-w-ods-content-narrow` so the footer fills the parent.
+ *   - `contentClassName` (legacy escape hatch) — explicit class names
+ *     applied to the inner wrapper. Use only when `fullWidth` is too
+ *     coarse (e.g. custom max-w value).
+ */
+export interface ChatFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Same `fullWidth` semantics as `ChatHeaderProps.fullWidth` — drops
+   *  the inner wrapper's `max-w-ods-content-narrow` so the footer
+   *  spans the full parent width. */
+  fullWidth?: boolean
+  /** @deprecated Prefer `fullWidth` for the full-panel-width use case.
+   *  This prop remains supported for callers that need a NON-binary
+   *  override (custom max-w value, custom padding, etc.). */
+  contentClassName?: string
+}
+
+const ChatFooter = React.forwardRef<HTMLDivElement, ChatFooterProps>(
+  ({ className, contentClassName, fullWidth = false, children, ...props }, ref) => {
     return (
       <div
         ref={ref}
@@ -191,7 +215,17 @@ const ChatFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDiv
         )}
         {...props}
       >
-        <div className="mx-auto w-full max-w-ods-content-narrow">
+        <div
+          className={cn(
+            // `fullWidth=true` opts out of the centered-narrow column;
+            // `fullWidth=false` (default) preserves the legacy 600px
+            // max-width. `contentClassName` is appended last so a
+            // legacy caller passing it can still tweak after the
+            // fullWidth decision.
+            fullWidth ? "w-full" : "mx-auto w-full max-w-ods-content-narrow",
+            contentClassName
+          )}
+        >
           {children}
         </div>
       </div>

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

@@ -33,6 +33,7 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
       reserveAvatarOffset: _reserveAvatarOffset,
       disabled = false,
       autoFocus = false,
+      fullWidth = false,
       ...inputProps
     } = rest
 
@@ -291,7 +292,12 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
     return (
       <div
         className={cn(
-          "mx-auto w-full max-w-ods-content-narrow flex-shrink-0",
+          // `fullWidth=true` drops the centered-narrow content column
+          // for chats hosted in side panels; default preserves the
+          // legacy 600px max-width for existing consumers.
+          fullWidth
+            ? "w-full flex-shrink-0"
+            : "mx-auto w-full max-w-ods-content-narrow flex-shrink-0",
           className,
         )}
       >

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

@@ -12,7 +12,7 @@ import { ThinkingDisplay } from "./thinking-display"
 import { SimpleMarkdownRenderer } from "../ui/simple-markdown-renderer"
 import type { ChatRef } from "./chat-ref.types"
 import { remarkCardLinks } from "./remark-card-links"
-import { BlockCard, type BlockCardProps } from "./block-card"
+import { BlockCard, type BlockCardProps } from "./entity-cards/block-card"
 import type { MessageSegment, MessageContent, ChatMessageEnhancedProps } from "./types"
 
 /**
@@ -292,28 +292,38 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
         )}
         {...props}
       >
-        {/* Hanging-avatar layout — Figma spec parks the avatar in the 64px
-            gutter outside the 600px content column. Only rendered for
-            assistant messages; user and system messages have no avatar. */}
-        {showAvatar && !isSystem && !isUser && (
-          <div className="absolute -left-16 top-[var(--spacing-system-s)]">
-            {assistantIcon && !avatar ? (
-              <div className="flex items-center justify-center w-12 h-12 rounded-full bg-ods-accent">
-                {assistantIcon}
-              </div>
-            ) : (
-              <SquareAvatar
-                {...avatarProps}
-                className={cn(avatarProps.className, "w-12 h-12")}
-              />
-            )}
-          </div>
-        )}
-
-        {/* Message Content - full width */}
+        {/* Message Content — full panel width.
+            Avatar is INLINE in the name row below (2025-2026 chat
+            pattern — Claude.ai, ChatGPT, Gemini, Perplexity).
+            Legacy hanging-avatar layout (`absolute -left-16`) wasted
+            64px of gutter and clipped in narrow panels. */}
         <div className="flex flex-col gap-[var(--spacing-system-xxs)] min-w-0">
-          {/* Name and Timestamp Row */}
-          <div className="flex items-center justify-between gap-[var(--spacing-system-xxs)]">
+          {/* Avatar + Name + Timestamp Row.
+              Sizing rationale (per design-token measurements):
+                - Name uses `text-h3` = 14px mobile / 18px desktop.
+                - Avatar uses `SquareAvatar size="sm"` = 32px — the
+                  canonical primitive at the smallest preset, giving a
+                  ~1.78x ratio against the 18px name text (Material
+                  Design 3 + Apple HIG inline-avatar standard).
+                - Gap is `var(--spacing-system-xs)` = 8px, the standard
+                  inline-component separator across this design system.
+              For the `assistantIcon` branch (host supplies a JSX icon
+              like the Mingo logo), the wrapper matches `SquareAvatar
+              size="sm"` (h-8 w-8 = 32px) so BOTH branches present at
+              the same visual weight. Host-supplied icons render
+              inside via `flex items-center justify-center` — they
+              should be sized at ~50-60% of the wrapper (h-4 w-4 =
+              16px works well for a 32px circle). */}
+          <div className="flex items-center gap-[var(--spacing-system-xs)]">
+            {showAvatar && !isSystem && !isUser && (
+              assistantIcon && !avatar ? (
+                <div className="flex items-center justify-center h-8 w-8 rounded-full bg-ods-accent flex-shrink-0">
+                  {assistantIcon}
+                </div>
+              ) : (
+                <SquareAvatar {...avatarProps} />
+              )
+            )}
             <span className={cn(
               "text-h3 !font-mono !font-medium flex-1",
               authorType === 'system' ? "text-ods-open-yellow" :

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

@@ -97,6 +97,7 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
       isTyping = false,
       autoScroll = true,
       showAvatars = true,
+      fullWidth = false,
       contentClassName,
       assistantType,
       assistantIcon,
@@ -180,12 +181,53 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
         const hasNewUser = newSlice.some((m) => m.role === 'user')
         if (hasNewUser) {
           void scrollToBottom({ animation: 'instant', ignoreEscapes: true })
+
+          // Image-attachment growth follow-up: if the new user message
+          // carries inline `<img>` elements (chat-attachment markdown
+          // emits `![alt](/api/storage/view/...)` which the markdown
+          // renderer turns into `<img>` / Next.js `<Image>`), those
+          // images load AFTER the initial paint. Each image-load grows
+          // the bubble height, but `useStickToBottom`'s `resize:
+          // 'smooth'` spring sometimes loses anchor under rapid
+          // resize events from Next.js Image's progressive
+          // dimensioning (observed: scroll lands 50-100px short of
+          // bottom — exactly one image-load short).
+          //
+          // Fix: after the initial scrollToBottom snaps, scan the
+          // content area for `<img>` elements that haven't loaded
+          // yet, and attach one-time `load` handlers that re-trigger
+          // `scrollToBottom`. Idempotent — runs for any image,
+          // affects only the new-user-message diff (effect dep is
+          // `messages`).
+          //
+          // `requestAnimationFrame` so the DOM has the new bubble
+          // before we query. Without rAF the new-message `<img>`s
+          // haven't been committed yet — querySelectorAll returns
+          // an empty set.
+          requestAnimationFrame(() => {
+            const el = contentRef.current
+            if (!el) return
+            const imgs = el.querySelectorAll('img')
+            imgs.forEach((img) => {
+              if (img.complete) return
+              const onLoad = () => {
+                img.removeEventListener('load', onLoad)
+                img.removeEventListener('error', onLoad)
+                // `ignoreEscapes: true` because the user may have
+                // accidentally moved scroll during the image-load
+                // window; we want their fresh send to be visible.
+                void scrollToBottom({ animation: 'instant', ignoreEscapes: true })
+              }
+              img.addEventListener('load', onLoad, { once: true })
+              img.addEventListener('error', onLoad, { once: true })
+            })
+          })
         }
         // Assistant-only new messages → the library's resize-watch
         // already keeps the bottom locked when the user hasn't
         // escaped. No explicit call needed; spring animation runs.
       }
-    }, [autoScroll, messages, dialogId, scrollToBottom])
+    }, [autoScroll, messages, dialogId, scrollToBottom, contentRef])
 
     // ---- Prepend anchoring (load-older) ------------------------------
     // The library doesn't preserve user position when content prepends
@@ -432,7 +474,12 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
           <div
             ref={setContentRef}
             className={cn(
-              "mx-auto flex w-full max-w-ods-content-narrow flex-col pb-[var(--spacing-system-xs)] min-w-0",
+              // `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 flex-col pb-[var(--spacing-system-xs)] min-w-0"
+                : "mx-auto flex w-full max-w-ods-content-narrow flex-col pb-[var(--spacing-system-xs)] min-w-0",
               contentClassName ?? "px-[var(--spacing-system-m)]",
             )}
             style={{ minHeight: '100%' }}
@@ -478,7 +525,9 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
         {showStreamingLoader && (
           <div
             className={cn(
-              "mx-auto w-full max-w-ods-content-narrow flex items-center gap-[var(--spacing-system-xxs)] py-[var(--spacing-system-xs)]",
+              fullWidth
+                ? "w-full flex items-center gap-[var(--spacing-system-xxs)] py-[var(--spacing-system-xs)]"
+                : "mx-auto w-full max-w-ods-content-narrow flex items-center gap-[var(--spacing-system-xxs)] py-[var(--spacing-system-xs)]",
               contentClassName ?? "px-[var(--spacing-system-m)]",
             )}
             style={{ color: 'var(--color-text-muted)' }}
@@ -499,7 +548,7 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
         {pendingApprovals && pendingApprovals.length > 0 && (
           <div className={cn(
             "border-t border-ods-border bg-ods-bg/95 backdrop-blur-sm",
-            "mx-auto w-full max-w-ods-content-narrow",
+            fullWidth ? "w-full" : "mx-auto w-full max-w-ods-content-narrow",
             contentClassName ?? "px-[var(--spacing-system-m)]",
           )}>
             <ChatMessageEnhanced

package/src/components/chat/chat-panel-context.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+/**
+ * Chat-panel-local context.
+ *
+ * The chat shell (EmbeddableChat) provides a small set of panel-level
+ * affordances that descendants — including inline cards rendered via
+ * the dispatcher — may want to consume WITHOUT prop drilling:
+ *
+ *   - `closeChat()` — close the chat panel. Inline cards trigger this
+ *     ONLY when their navigation is same-tab (so new-tab clicks leave
+ *     the chat open while the new tab loads).
+ *
+ * Why context vs prop drilling: the card dispatch has 7+ wrappers
+ * (BlogCard, ProgramCard, DataRoomDocCard, …). Threading `onClose`
+ * through every wrapper signature would touch every card type for one
+ * UX behavior — not worth the churn. Context is opt-in at the
+ * provider level and zero-cost when not consumed.
+ *
+ * Defaults to `null` when no provider is mounted (e.g. tests, or a
+ * card rendered outside the panel) — consumers MUST handle `null`.
+ */
+
+import { createContext, useContext } from 'react'
+
+export interface ChatPanelHandle {
+  /** Close the chat panel. Called by inline cards' nav click handler
+   *  ONLY when the resolved navigation is same-tab. */
+  closeChat: () => void
+}
+
+export const ChatPanelContext = createContext<ChatPanelHandle | null>(null)
+
+/** Optional consumer — returns `null` when no provider mounted. */
+export function useChatPanel(): ChatPanelHandle | null {
+  return useContext(ChatPanelContext)
+}

package/src/components/chat/chat-ticket-list.tsx

@@ -2,7 +2,7 @@
 
 import * as React from 'react'
 import { cn } from '../../utils/cn'
-import { ChatTicketItem, type ChatTicketItemData } from './chat-ticket-item'
+import { ChatTicketItem, type ChatTicketItemData } from './entity-cards/chat-ticket-item'
 
 export interface ChatTicketListProps extends React.HTMLAttributes<HTMLDivElement> {
   tickets: ChatTicketItemData[]