@flamingo-stack/openframe-frontend-core 0.0.751 → 0.0.753

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

@@ -23,6 +23,7 @@ import { EscalationOfferMessage } from './escalation-offer-message';
 import { remarkCardLinks } from './remark-card-links';
 import { remarkMentionChips } from './remark-mention-chips';
 import { remarkStripCitations } from './remark-strip-citations';
+import { SuggestionsDisplay } from './suggestions-display';
 import { SystemEventMessage } from './system-event-message';
 import { ThinkingDisplay } from './thinking-display';
 import { TicketEscalatedMessage } from './ticket-escalated-message';
@@ -647,6 +648,8 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
                     const run = askRuns.get(index);
                     if (!run) return null;
                     return <AskDisplay key={index} cards={run} onSelect={onAskSelect} />;
+                  } else if (segment.type === 'suggestions') {
+                    return <SuggestionsDisplay key={index} segment={segment} />;
                   } else if (segment.type === 'tool_execution') {
                     return (
                       <ToolExecutionDisplay

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

@@ -27,6 +27,9 @@ export interface ChatPanelHandle {
   /** Close the chat panel. Called by inline cards' nav click handler
    *  ONLY when the resolved navigation is same-tab. */
   closeChat: () => void;
+  /** Send `text` in the panel's open chat (a new chat: the send creates it),
+   *  leaving the composer's draft alone. Used by `suggestions` chips. */
+  sendPrompt?: (text: string) => void;
 }
 
 export const ChatPanelContext = createContext<ChatPanelHandle | null>(null);

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

@@ -59,7 +59,7 @@ import {
 } from '../icons-v2-generated';
 import { Chevron02LeftIcon } from '../icons-v2-generated/arrows/chevron-02-left-icon';
 import { XmarkIcon } from '../icons-v2-generated/signs-and-symbols/xmark-icon';
-import { ActionsMenuDropdown } from '../ui/actions-menu';
+import { ActionsMenuDropdown, type ActionsMenuItem } from '../ui/actions-menu';
 import { Button } from '../ui/button';
 import { Drawer, DrawerContent } from '../ui/drawer';
 import { HoverDropdown, type HoverDropdownItem } from '../ui/hover-dropdown';
@@ -91,6 +91,7 @@ import { useEmptyStateConfig } from './hooks/use-empty-state-config';
 import { fetchSlashCommands, useSlashCommandRegistry, type SlashCommandSummary } from './hooks/use-slash-commands';
 import type { ChatSource, UseSseChatAdapterOptions } from './hooks/use-sse-chat-adapter';
 import { useUnifiedChat, type ChatMode, type UseUnifiedChatModes } from './hooks/use-unified-chat';
+import { awaitsDecision, useWhatToAsk, type WhatToAskContent } from './hooks/use-what-to-ask';
 import { MingoArchiveList } from './mingo-archive-list';
 import { MingoChatHeader } from './mingo-chat-header';
 import { ChatDialogModals } from './mingo-chat-modals';
@@ -102,7 +103,7 @@ import { MingoWelcome, type MingoWelcomeProps } from './mingo-welcome';
 import { NavLinkAnchorViaRuntime } from './nav-link-anchor-via-runtime';
 import { accentFromIdentityIcon, getAgentAccent } from './quick-action-chip';
 import { SourceActionButton } from './source-action-button';
-import { CHAT_APPEARANCE, type ChatAppearance } from './types/chat.types';
+import { AUTHOR_TYPE, CHAT_APPEARANCE, type ChatAppearance } from './types/chat.types';
 import type { ChatInputRef, DialogItem, SlashCommandActionId } from './types/component.types';
 import type { ChatContextItem, ChatContextPickerConfig } from './types/context-item.types';
 import type { MessageSegment, Message } from './types/message.types';
@@ -497,6 +498,24 @@ export interface EmbeddableChatProps {
    * guided tour in a conversation of its own) points it there instead.
    */
   onWhatToAsk?: () => void;
+  /**
+   * v2: the "What to ask?" exchange the list's entry shows (when no
+   * `onWhatToAsk` takes it over): added at the end of the open conversation,
+   * or a new chat opens with it. Local - never sent, never stored. Picking a
+   * chip sends its prompt in that chat, like a quick action.
+   *
+   * A function is called on each click and the exchange appears, whole, once
+   * its promise settles (prompts built from live data, e.g. the workspace's
+   * devices); clicks while one is pending are ignored. It should not reject:
+   * a rejection is logged and shows nothing.
+   */
+  whatToAsk?: WhatToAskContent | (() => Promise<WhatToAskContent>);
+  /**
+   * v2: items in the chat's ⋯ menu after its own, past a separator - actions
+   * that are not about the chat (e.g. the host's onboarding reset). Shown in
+   * every chat that is not archived, a new one included.
+   */
+  chatMenuExtraItems?: ActionsMenuItem[];
 }
 
 // =============================================================================
@@ -1063,6 +1082,8 @@ function EmbeddableChatInner({
   contextMemory,
   aboveComposer,
   onWhatToAsk,
+  whatToAsk: whatToAskContent,
+  chatMenuExtraItems,
   handleRef,
 }: EmbeddableChatProps & { handleRef?: React.Ref<EmbeddableChatHandle> }) {
   // `shell` 'none' / 'inline' means the consumer hosts us inside their own panel
@@ -1625,8 +1646,14 @@ function EmbeddableChatInner({
   // saved scroll position over the freshly-loaded destination page.
   // Source chips already route through `handleNavigationClose`; inline
   // cards now match. New-tab clicks never invoke `closeChat`.
+  // `sendPrompt` goes through a ref: what it sends with is declared further
+  // down (`sendPromptRef.current` is set next to `handleSend`).
+  const sendPromptRef = useRef<(text: string) => void>(() => {});
   const chatPanelHandle = useMemo<ChatPanelHandle>(
-    () => ({ closeChat: handleNavigationClose }),
+    () => ({
+      closeChat: handleNavigationClose,
+      sendPrompt: (text: string) => sendPromptRef.current(text),
+    }),
     [handleNavigationClose],
   );
 
@@ -1711,18 +1738,37 @@ function EmbeddableChatInner({
 
   // Map the host's rows → the lib's Message type. The mapping itself lives in
   // `mapHostMessage`, which is where its pass-through list is pinned by tests.
-  const messages: Message[] = useMemo(() => {
+  const hostMessages: Message[] = useMemo(() => {
     const options = { userName: guideUserName, userAvatar: guideUserAvatar, timestampCache };
     const mapped = rawMessages.map(m => mapHostMessage(m, options));
     pruneTimestampCache(timestampCache, new Set(rawMessages.map(m => m.id)));
     return mapped;
   }, [rawMessages, guideUserName, guideUserAvatar, timestampCache]);
 
+  // "What to ask?" exchanges (`whatToAsk`) are the panel's own, shown in the
+  // thread beside the host's messages; a new chat holding one reads as a
+  // conversation until it is sent or left.
+  const whatToAsk = useWhatToAsk({
+    dialogId: activeDialogId,
+    content: typeof whatToAskContent === 'function' ? undefined : whatToAskContent,
+    user: {
+      name: headerUserName ?? 'You',
+      avatar: identityUser?.avatarUrl?.trim() || userAvatarUrl?.trim() || null,
+      authorType: AUTHOR_TYPE.ADMIN,
+    },
+    assistant: { name: 'Mingo', assistantType: 'mingo' },
+  });
+  const noteWhatToAskSend = whatToAsk.noteSend;
+  const messages = whatToAsk.withExchanges(hostMessages);
+  // A new chat whose only messages are those exchanges: no dialog yet.
+  const isWhatToAskDraft = activeDialogId == null && hostMessages.length === 0 && messages.length > 0;
+
   const handleSend = useCallback(
     (text: string) => {
       // Locked: the disabled editor cannot submit, but a queued Enter or a
       // stale ref call still lands here — refused at the seam, not by luck.
       if (composerLock) return;
+      noteWhatToAskSend();
       // Append chat-attachment markdown lines to the user's bubble.
       let augmentedText = text;
       if (readyAttachments.length > 0) {
@@ -1750,7 +1796,7 @@ function EmbeddableChatInner({
         setContextItems([]);
       }
     },
-    [composerLock, sendMessage, readyAttachments, viewUrlPrefix, clearAttachments, contextItems],
+    [composerLock, noteWhatToAskSend, sendMessage, readyAttachments, viewUrlPrefix, clearAttachments, contextItems],
   );
 
   /**
@@ -2213,7 +2259,14 @@ function EmbeddableChatInner({
       ? freshConversationTitle
       : 'Current Chats';
   const headerBackAriaLabel = hasConversation ? (isViewingArchived ? 'Back to archive' : 'Back') : 'Back to Mingo';
-  const headerOnBack = hasConversation ? handleBack : () => handleActiveModeChange('mingo');
+  const clearWhatToAskDraft = whatToAsk.clearDraft;
+  const headerOnBack = hasConversation
+    ? () => {
+        // Leaving a new chat that only holds "What to ask?" exchanges drops them.
+        if (activeDialogId == null) clearWhatToAskDraft();
+        handleBack();
+      }
+    : () => handleActiveModeChange('mingo');
   const headerOnRestore =
     isViewingArchived && unarchiveDialog && activeDialog ? () => setRestoreTarget(activeDialog) : undefined;
   const headerOnRename =
@@ -2247,8 +2300,75 @@ function EmbeddableChatInner({
   // dedicated reset (not `handleBack`, which would reopen the archive when the
   // open conversation is archived) so it always lands on a fresh chat.
   const handleNewChat = useCallback(() => {
+    clearWhatToAskDraft();
     resetToNewChat();
-  }, [resetToNewChat]);
+  }, [clearWhatToAskDraft, resetToNewChat]);
+
+  // The open chat cannot take a message now: the composer is locked, a turn is
+  // running, or it waits on an approval / escalation nobody has answered.
+  const activeDialogStatus = activeDialog && dialogStatusOf ? dialogStatusOf(activeDialog) : undefined;
+  const isChatBlocked =
+    !!composerLock ||
+    chatLoading ||
+    activeDialogStatus === 'working' ||
+    activeDialogStatus === 'approval' ||
+    (pendingApprovals?.length ?? 0) > 0 ||
+    awaitsDecision(hostMessages);
+
+  // "What to ask Mingo?" with `whatToAsk`: the exchange goes at the end of the
+  // open conversation when it can go on right now. Otherwise (none open, an
+  // archived one, one still loading or blocked as above) a new chat opens with
+  // it: adding prompts under a pending approval or a running turn would mix
+  // two conversations. A new chat with nothing sent yet gets another exchange.
+  const showWhatToAsk = (content: WhatToAskContent) => {
+    if (activeDialogId && hasConversation && !isViewingArchived && !isMessagesLoading && !isChatBlocked) {
+      whatToAsk.ask('current', content);
+      return;
+    }
+    const isUnsentNewChat = activeDialogId == null && hostMessages.length === 0 && !isViewingArchived;
+    if (!isUnsentNewChat) {
+      whatToAsk.clearDraft();
+      resetToNewChat();
+    }
+    setComposeOpen(true);
+    whatToAsk.ask('draft', content);
+  };
+
+  // A "What to ask?" chip: its prompt goes out on its own, like a quick action
+  // (whatever is staged in the composer stays staged), into the chat the chip
+  // sits in - not while that chat is blocked. From a new chat that send
+  // creates the dialog the exchange moves to.
+  useEffect(() => {
+    sendPromptRef.current = text => {
+      if (isChatBlocked) return;
+      noteWhatToAskSend();
+      void sendMessage(text).catch((err: unknown) => {
+        console.error('[EmbeddableChat] sendPrompt failed:', err);
+      });
+    };
+  });
+  // An async `whatToAsk` settles renders later: by then the panel may be in
+  // another state, so it is shown through the latest `showWhatToAsk`.
+  const showWhatToAskRef = useRef(showWhatToAsk);
+  useEffect(() => {
+    showWhatToAskRef.current = showWhatToAsk;
+  });
+  const whatToAskPendingRef = useRef(false);
+  const requestWhatToAsk = () => {
+    if (!whatToAskContent) return;
+    if (typeof whatToAskContent !== 'function') {
+      showWhatToAsk(whatToAskContent);
+      return;
+    }
+    if (whatToAskPendingRef.current) return;
+    whatToAskPendingRef.current = true;
+    whatToAskContent()
+      .then(content => showWhatToAskRef.current(content))
+      .catch((err: unknown) => console.error('[EmbeddableChat] whatToAsk failed:', err))
+      .finally(() => {
+        whatToAskPendingRef.current = false;
+      });
+  };
 
   // "Ask Mingo" from an archived chat: the conversation is read-only (the
   // backend refuses writes), so the question starts a new chat instead. It is
@@ -2410,13 +2530,15 @@ function EmbeddableChatInner({
     dialogs,
     activeDialogId: activeDialogId ?? undefined,
     // Beside a new chat (wide only: narrow, the list is its own screen).
-    draftTitle: wideMingo && !hasConversation && !archiveOpen ? freshConversationTitle : undefined,
+    // A new chat holding only "What to ask?" exchanges is still that new chat.
+    draftTitle:
+      wideMingo && (!hasConversation || isWhatToAskDraft) && !archiveOpen ? freshConversationTitle : undefined,
     onSelectDialog: (id: string) => leaveArchiveThen(() => handleSelectDialog(id))(),
     onNewChat: leaveArchiveThen(handleNewChat),
     onOpenArchive: headerOnOpenArchive && (archiveOpen ? closeArchive : headerOnOpenArchive),
     archiveActive: archiveOpen,
     // The suggestions a new chat opens on, unless the host has a surface of its own.
-    onWhatToAsk: leaveArchiveThen(onWhatToAsk ?? handleNewChat),
+    onWhatToAsk: () => leaveArchiveThen(onWhatToAsk ?? (whatToAskContent ? requestWhatToAsk : handleNewChat))(),
     statusOf: dialogStatusOf,
     onRequestRename: mingoCaps.canRename ? setRenameTarget : undefined,
     onRequestArchive: mingoCaps.canArchive ? setArchiveTarget : undefined,
@@ -2449,6 +2571,7 @@ function EmbeddableChatInner({
           onToggleList={wideMingo ? toggleRailCollapsed : headerShowBack ? headerOnBack : () => setComposeOpen(false)}
           listOpen={splitActive}
           menuItems={headerShowBack && !isViewingArchived ? splitHeaderMenuItems : []}
+          extraMenuItems={isViewingArchived || archiveOpen ? undefined : chatMenuExtraItems}
           onRestore={isViewingArchived ? headerOnRestore : undefined}
           // Only while the list and the chat both fit: narrow, the toggle is
           // already the way back to the list.

package/src/components/chat/hooks/index.ts

@@ -14,6 +14,7 @@ export * from './use-chat-attachment-image-gallery';
 export * from './use-chat-identity';
 export * from './use-chat-card-item';
 export * from './use-close-on-navigation';
+export * from './use-what-to-ask';
 
 // useChat + useSSE — ported from hub `hooks/useChat.ts` + `hooks/useSSE.ts`
 // minus the MockChatService + useChatConfig dependencies (which stay in

package/src/components/chat/hooks/use-what-to-ask.ts

@@ -0,0 +1,203 @@
+'use client';
+
+import { useCallback, useState } from 'react';
+import type { AssistantType, AuthorType } from '../types/chat.types';
+import type { Message, SuggestionGroup } from '../types/message.types';
+
+/**
+ * The "What to ask?" exchange: the question the user is shown asking, and the
+ * assistant's answer, a line of text over grouped prompt chips.
+ */
+export interface WhatToAskContent {
+  /** The user's side, e.g. "What can I ask you?". */
+  question: string;
+  /** The answer's text (markdown), above the chips. */
+  reply: string;
+  groups: SuggestionGroup[];
+  /** A line under the chips, e.g. how picking one works. */
+  note?: string;
+}
+
+/** Who a side of the exchange is shown as. */
+export interface WhatToAskAuthor {
+  name?: string;
+  avatar?: string | null;
+  authorType?: AuthorType;
+  assistantType?: AssistantType;
+}
+
+export interface UseWhatToAskOptions {
+  /** The open conversation; `null` for a new chat that has no dialog yet. */
+  dialogId: string | null | undefined;
+  /** What an exchange shows unless `ask` is handed its own. */
+  content?: WhatToAskContent;
+  user?: WhatToAskAuthor;
+  assistant?: WhatToAskAuthor;
+  /** Where a picked prompt goes (typically: sent). Absent: sent in the surrounding chat panel. */
+  onPick?: (prompt: string) => void;
+}
+
+export interface WhatToAsk {
+  /**
+   * Show the exchange: at the end of the open conversation (`'current'`), or
+   * in the new chat (`'draft'`), which then reads as a conversation until it
+   * is sent or left. `content` overrides the hook's for this exchange (e.g.
+   * prompts built from live data); each exchange keeps what it was shown
+   * with. No-op without either.
+   */
+  ask: (target: 'current' | 'draft', content?: WhatToAskContent) => void;
+  /** The thread with the exchanges of the open conversation (or the new chat) merged in by time. */
+  withExchanges: (messages: Message[]) => Message[];
+  /** Call before sending: a new chat's exchanges then move into the dialog the send creates. */
+  noteSend: () => void;
+  /** Drop the new chat's exchanges (the user started over or left it). */
+  clearDraft: () => void;
+}
+
+/** The key the new chat's exchanges are held under until it has a dialog. */
+const DRAFT_KEY = '';
+
+interface Exchange {
+  id: string;
+  at: number;
+  content: WhatToAskContent;
+}
+
+/**
+ * Local "What to ask?" exchanges, per conversation: never sent, never stored,
+ * gone on reload. Each is a user message and an assistant message carrying a
+ * `suggestions` segment, built at render from the exchange's content. A new chat holds its
+ * own until a send gives it a dialog (they move there) or the user opens
+ * another conversation (they are dropped).
+ */
+export function useWhatToAsk({ dialogId, content, user, assistant, onPick }: UseWhatToAskOptions): WhatToAsk {
+  const [byDialog, setByDialog] = useState<Record<string, Exchange[]>>({});
+  const [draftSent, setDraftSent] = useState(false);
+  const key = dialogId ?? DRAFT_KEY;
+
+  // A new chat that got its dialog: keep its exchanges there if a send made
+  // it, drop them if another conversation was opened instead. Adjusted while
+  // rendering, so the thread never shows a frame without them.
+  const [prevKey, setPrevKey] = useState(key);
+  if (prevKey !== key) {
+    setPrevKey(key);
+    if (prevKey === DRAFT_KEY) {
+      setDraftSent(false);
+      setByDialog(prev => {
+        const { [DRAFT_KEY]: draft, ...rest } = prev;
+        if (!draft) return prev;
+        return draftSent ? { ...rest, [key]: [...(rest[key] ?? []), ...draft] } : rest;
+      });
+    }
+  }
+
+  const ask = useCallback(
+    (target: 'current' | 'draft', override?: WhatToAskContent) => {
+      const shown = override ?? content;
+      if (!shown) return;
+      const into = target === 'current' && dialogId ? dialogId : DRAFT_KEY;
+      const exchange = {
+        id: `what-to-ask-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`,
+        at: Date.now(),
+        content: shown,
+      };
+      setByDialog(prev => ({ ...prev, [into]: [...(prev[into] ?? []), exchange] }));
+    },
+    [content, dialogId],
+  );
+
+  const noteSend = useCallback(() => {
+    if (dialogId == null) setDraftSent(true);
+  }, [dialogId]);
+
+  const clearDraft = useCallback(() => {
+    setDraftSent(false);
+    setByDialog(prev => {
+      if (!prev[DRAFT_KEY]) return prev;
+      const rest = { ...prev };
+      delete rest[DRAFT_KEY];
+      return rest;
+    });
+  }, []);
+
+  const exchanges = byDialog[key] ?? [];
+  const withExchanges = (messages: Message[]): Message[] => {
+    if (exchanges.length === 0) return messages;
+    const local = exchanges.flatMap(exchange => exchangeMessages(exchange, user, assistant, onPick));
+    return mergeByTime(messages, local);
+  };
+
+  return { ask, withExchanges, noteSend, clearDraft };
+}
+
+function exchangeMessages(
+  { id, at, content }: Exchange,
+  user: WhatToAskAuthor | undefined,
+  assistant: WhatToAskAuthor | undefined,
+  onPick: ((prompt: string) => void) | undefined,
+): Message[] {
+  return [
+    {
+      id: `${id}-question`,
+      role: 'user',
+      content: content.question,
+      timestamp: new Date(at),
+      name: user?.name,
+      avatar: user?.avatar,
+      authorType: user?.authorType,
+    },
+    {
+      id: `${id}-answer`,
+      role: 'assistant',
+      content: [
+        { type: 'text', text: content.reply },
+        { type: 'suggestions', groups: content.groups, note: content.note, onPick },
+      ],
+      // A millisecond after the question, so the pair keeps its order.
+      timestamp: new Date(at + 1),
+      name: assistant?.name,
+      avatar: assistant?.avatar,
+      authorType: assistant?.authorType,
+      assistantType: assistant?.assistantType,
+    },
+  ];
+}
+
+/**
+ * Whether the thread waits on the user before it can go on: an approval or an
+ * escalation offer nobody has answered. "What to ask?" opens a new chat then,
+ * rather than adding prompts to a conversation that cannot take them.
+ */
+export function awaitsDecision(messages: readonly Message[]): boolean {
+  return messages.some(
+    message =>
+      Array.isArray(message.content) &&
+      message.content.some(
+        segment =>
+          (segment.type === 'approval_request' ||
+            segment.type === 'approval_batch' ||
+            segment.type === 'escalation_offer') &&
+          (segment.status ?? 'pending') === 'pending',
+      ),
+  );
+}
+
+/**
+ * Places each local message before the first thread message that is later
+ * than it, keeping the thread's own order. A thread message without a time
+ * never moves anything past it.
+ */
+export function mergeByTime(thread: Message[], local: Message[]): Message[] {
+  if (local.length === 0) return thread;
+  const out: Message[] = [];
+  let next = 0;
+  for (const message of thread) {
+    const at = message.timestamp?.getTime();
+    while (next < local.length && at !== undefined && (local[next].timestamp?.getTime() ?? 0) < at) {
+      out.push(local[next]);
+      next += 1;
+    }
+    out.push(message);
+  }
+  return out.concat(local.slice(next));
+}

package/src/components/chat/index.ts

@@ -16,6 +16,7 @@ export * from './context-compaction-display';
 export * from './expand-chevron';
 export * from './thinking-display';
 export * from './ask-display';
+export * from './suggestions-display';
 export * from './error-message-display';
 export * from './chat-container';
 export * from './chat-input';

package/src/components/chat/mingo-chat-header.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Arrow02RightIcon, Ellipsis01Icon, Refresh01LeftIcon, SidebarIcon, XmarkIcon } from '../icons-v2-generated';
-import { ActionsMenuDropdown, type ActionsMenuItem } from '../ui/actions-menu';
+import { ActionsMenuDropdown, type ActionsMenuGroup, type ActionsMenuItem } from '../ui/actions-menu';
 import { SquareAvatar } from '../ui/square-avatar';
 import { ChatHeaderIconButton } from './chat-header-icon-button';
 
@@ -15,8 +15,10 @@ export interface MingoChatHeaderProps {
   onToggleList?: () => void;
   /** The list is on screen beside the chat; drives the toggle's state. */
   listOpen?: boolean;
-  /** The chat's ⋯ menu. Empty or omitted leaves it out. */
+  /** The chat's ⋯ menu. Empty or omitted (with no `extraMenuItems`) leaves it out. */
   menuItems?: ActionsMenuItem[];
+  /** Items under the chat's own, after a separator: actions that are not about this chat. */
+  extraMenuItems?: ActionsMenuItem[];
   /** An archived chat: offers "Unarchive". */
   onRestore?: () => void;
   /** Collapse the chat back to the list alone (the panel's minimum). */
@@ -38,10 +40,15 @@ export function MingoChatHeader({
   onToggleList,
   listOpen = false,
   menuItems = [],
+  extraMenuItems = [],
   onRestore,
   onCollapse,
   onClose,
 }: MingoChatHeaderProps) {
+  const menuGroups: ActionsMenuGroup[] = [
+    ...(menuItems.length > 0 ? [{ items: menuItems, separator: true }] : []),
+    ...(extraMenuItems.length > 0 ? [{ items: extraMenuItems }] : []),
+  ];
   return (
     <div className="flex h-14 w-full shrink-0 overflow-hidden border-b border-ods-border">
       {onToggleList && (
@@ -77,11 +84,11 @@ export function MingoChatHeader({
           <Refresh01LeftIcon size={24} />
         </ChatHeaderIconButton>
       )}
-      {menuItems.length > 0 && (
+      {menuGroups.length > 0 && (
         <ActionsMenuDropdown
           triggerAriaLabel="Chat actions"
           onCloseAutoFocus={e => e.preventDefault()}
-          groups={[{ items: menuItems }]}
+          groups={menuGroups}
           customTrigger={
             <ChatHeaderIconButton aria-label="Chat actions">
               <Ellipsis01Icon size={24} />

package/src/components/chat/suggestions-display.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { useChatPanel } from './chat-panel-context';
+import { QuickActionChipButton } from './quick-action-chip';
+import type { SuggestionsSegment } from './types/message.types';
+
+export interface SuggestionsDisplayProps {
+  segment: SuggestionsSegment;
+}
+
+/**
+ * A `suggestions` segment: each group's caption over a wrapping row of
+ * sentence chips, then the optional note. A chip hands its prompt to the
+ * segment's `onPick`, else sends it in the chat panel it sits in.
+ */
+export function SuggestionsDisplay({ segment }: SuggestionsDisplayProps) {
+  const panel = useChatPanel();
+  const pick = segment.onPick ?? panel?.sendPrompt;
+
+  return (
+    <div className="flex min-w-0 flex-col gap-[var(--spacing-system-sf)]">
+      {segment.groups.map(group => (
+        <div key={group.label} className="flex min-w-0 flex-col gap-[var(--spacing-system-xs)]">
+          <p className="text-ods-text-secondary text-h5">{group.label}</p>
+          <div className="flex min-w-0 flex-wrap gap-[var(--spacing-system-xs)]">
+            {group.prompts.map(prompt => (
+              <QuickActionChipButton
+                key={prompt.label}
+                variant="question"
+                label={prompt.label}
+                icon={prompt.icon}
+                onSelect={pick ? () => pick(prompt.prompt ?? prompt.label) : undefined}
+              />
+            ))}
+          </div>
+        </div>
+      ))}
+      {segment.note && <p className="text-ods-text-secondary text-h6">{segment.note}</p>}
+    </div>
+  );
+}

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

@@ -4,6 +4,7 @@
  */
 
 import type { ChatRef } from '../chat-ref.types';
+import type { QuickActionIconSpec } from '../quick-action-chip';
 import type { AssistantType, AuthorType, ChatApprovalStatus, MessageOwner } from './chat.types';
 
 // ========== Message Type Definitions ==========
@@ -370,6 +371,34 @@ export type ContextCompactionSegment = {
   summary?: string;
 };
 
+/** One prompt a `suggestions` block offers: the chip shows `label`, and
+ *  picking it hands `prompt` (absent: the label) to be sent. `icon` is a
+ *  quick-action icon (a spec or a node). */
+export type SuggestionPrompt = {
+  label: string;
+  prompt?: string;
+  icon?: ReactNode | QuickActionIconSpec;
+};
+
+/** A titled row of prompts in a `suggestions` block (e.g. "Diagnose"). */
+export type SuggestionGroup = {
+  label: string;
+  prompts: SuggestionPrompt[];
+};
+
+/**
+ * Prompts the assistant offers as chips, grouped under captions, with an
+ * optional line under them. Never on the wire: a host builds it locally (the
+ * "What to ask?" answer, see `useWhatToAsk`). Picking a chip calls `onPick`;
+ * without one, inside an `EmbeddableChat` the prompt is sent in its open chat.
+ */
+export type SuggestionsSegment = {
+  type: 'suggestions';
+  groups: SuggestionGroup[];
+  note?: string;
+  onPick?: (prompt: string) => void;
+};
+
 export type MessageSegment =
   | TextSegment
   | ThinkingSegment
@@ -381,7 +410,8 @@ export type MessageSegment =
   | TicketEscalatedSegment
   | TicketEventSegment
   | ErrorSegment
-  | ContextCompactionSegment;
+  | ContextCompactionSegment
+  | SuggestionsSegment;
 
 export type MessageContent = string | MessageSegment[];
 

package/src/components/chat/utils/extract-incomplete-message-state.ts

@@ -134,12 +134,14 @@ export function extractIncompleteMessageState(
       //   outside MESSAGE_START/END — there is no agent turn to continue.
       // - `error` ended the turn; resuming it would re-open a bubble the
       //   backend has already abandoned.
+      // - `suggestions` is built locally by the host and never comes from a turn.
       case 'text':
       case 'thinking':
       case 'ask':
       case 'ticket_escalated':
       case 'ticket_event':
       case 'error':
+      case 'suggestions':
         break;
 
       default: {

package/src/components/chat/utils/message-segment-accumulator.ts

@@ -707,6 +707,10 @@ export class MessageSegmentAccumulator {
             this.completeContextCompaction(segment.summary);
           }
           break;
+        case 'suggestions':
+          // Built locally by the host, never streamed: kept as it is.
+          this.segments.push(segment);
+          break;
       }
     }
     return this.getSegments();