@flamingo-stack/openframe-frontend-core 0.0.711 → 0.0.713

package/src/components/chat/ask-prompts.tsx

@@ -0,0 +1,226 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { cn } from '../../utils/cn';
+import { AgentMark } from '../agent-mark';
+import { MingoAiButton, openAskAi } from '../navigation/mingo-ai-button';
+import { ScrollShadow } from '../ui/scroll-fade';
+import { QuickActionChipButton, QuickActionChipSkeleton, type QuickActionIconSpec } from './quick-action-chip';
+
+/** One question a page offers: the chip shows `label` as written, the chat is sent `prompt`. */
+export interface AskPrompt {
+  id: string;
+  label: string;
+  /** What is sent to the chat. Absent: the label itself. */
+  prompt?: string;
+  icon?: ReactNode | QuickActionIconSpec;
+}
+
+export interface AskPromptsProps {
+  prompts: readonly AskPrompt[];
+  /**
+   * How many chips the block shows and reserves room for: the same number in
+   * the same slots on every load. Default: the prompts given (while `loading`,
+   * when there are none yet, two).
+   */
+  count?: number;
+  /** The questions are still being read: `count` chip skeletons in the chips' own slots. */
+  loading?: boolean;
+  /** `end`: the rows sit at the far end (a block beside a heading). Default `start`. */
+  align?: 'start' | 'end';
+  /** The chat source the page's chat panel runs on (the `ask-ai:open` filter). */
+  source?: string;
+  /** The assistant's configured name: the launcher before the chips ("Ask Mingo").
+   *  Absent: the launcher's own default name. */
+  label?: string;
+  /** The assistant's configured glyph. Absent: the packaged Mingo mark. */
+  icon?: ReactNode;
+  /** After the chat was asked (analytics). */
+  onAsk?: (prompt: AskPrompt) => void;
+  /** The surface the row sits on, as a CSS colour: what its edge fade dissolves into. Default: the page background. */
+  fadeColor?: string;
+  className?: string;
+}
+
+function AssistantGlyph({ icon, className }: { icon?: ReactNode; className: string }) {
+  return (
+    <span className={cn('inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full', className)}>
+      {icon ?? <AgentMark agent="mingo" className="size-full" />}
+    </span>
+  );
+}
+
+/** How many slots a loading block reserves when its host names no `count`. */
+const DEFAULT_LOADING_SLOTS = 2;
+/** The slots a block shows: the host's `count`; else the prompts it has, or the default while they load. */
+const slotCount = (count: number | undefined, loading: boolean, prompts: readonly AskPrompt[]) =>
+  count ?? (loading ? DEFAULT_LOADING_SLOTS : prompts.length);
+
+/** A skeleton chip's label width (in `ch`), by slot: a believable spread that is the same on every load. */
+const SKELETON_LABEL_CH = [26, 22, 30, 24, 20, 28] as const;
+/** One chip's slot in a stacked block (a card): the chip's own height, so an empty slot holds the same room. */
+const CHIP_SLOT_CLASS = 'flex h-9 min-w-0 max-w-full';
+/**
+ * One chip's slot in `AskPrompts`. In a narrow column the block is ONE row that
+ * scrolls sideways, so a chip keeps its question's width and never shrinks;
+ * from the content `md` step the block stacks and a long question clips.
+ */
+const ROW_CHIP_SLOT_CLASS = 'flex h-9 shrink-0 content-md:min-w-0 content-md:max-w-full content-md:shrink';
+/**
+ * `AskPrompts`' block. Narrow (a phone): the launcher and the chips are one row
+ * that scrolls sideways and fades where it continues (the lib's `ScrollShadow`),
+ * the suggestion-chip row of Material's guidance: one row high whatever the
+ * questions are, and no ragged space beside them. From the content `md` step:
+ * stacked, one chip per row.
+ */
+const ASK_PROMPTS_ROW_CLASS =
+  'flex min-w-0 flex-row items-center gap-2 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden content-md:flex-col content-md:overflow-visible';
+
+/**
+ * The questions themselves, in `count` fixed slots: a sentence-case chip each
+ * (a click opens the chat and sends that question once), a chip skeleton each
+ * while loading, and an empty slot where fewer questions exist than slots.
+ */
+function QuestionChips({
+  prompts,
+  count,
+  loading,
+  source,
+  onAsk,
+  slotClassName,
+}: Pick<AskPromptsProps, 'prompts' | 'loading' | 'source' | 'onAsk'> & { count: number; slotClassName?: string }) {
+  return (
+    <>
+      {Array.from({ length: count }, (_, slot) => {
+        const prompt = loading ? undefined : prompts[slot];
+        return (
+          <span key={prompt?.id ?? `slot-${slot}`} className={slotClassName ?? CHIP_SLOT_CLASS}>
+            {loading ? (
+              <QuickActionChipSkeleton
+                variant="question"
+                labelCh={SKELETON_LABEL_CH[slot % SKELETON_LABEL_CH.length]}
+              />
+            ) : prompt ? (
+              <QuickActionChipButton
+                variant="question"
+                label={prompt.label}
+                icon={prompt.icon}
+                onSelect={() => {
+                  openAskAi(source, { prompt: prompt.prompt ?? prompt.label });
+                  onAsk?.(prompt);
+                }}
+              />
+            ) : null}
+          </span>
+        );
+      })}
+    </>
+  );
+}
+
+/**
+ * A row of questions that open the site chat and ask it: THE assistant
+ * launcher (`MingoAiButton`, its in-page variant: the mark and the name), then
+ * `count` question chips in fixed slots, so the block's height is known before
+ * the questions are: ONE scrolling row on a narrow column, one chip per row
+ * from the content `md` step (a chip is one line: a longer question clips there
+ * and its tooltip shows it whole). A click on a chip opens the
+ * chat and sends that question once (`openAskAi` with a prompt); the launcher
+ * only opens it. While `loading` the slots hold chip skeletons and the launcher
+ * keeps its place. Loaded with no prompt it renders nothing.
+ */
+export function AskPrompts({
+  prompts,
+  count: countProp,
+  loading = false,
+  align = 'start',
+  source,
+  label,
+  icon,
+  onAsk,
+  fadeColor,
+  className,
+}: AskPromptsProps) {
+  const count = slotCount(countProp, loading, prompts);
+  if (!loading && prompts.length === 0) return null;
+  const end = align === 'end';
+  return (
+    <ScrollShadow
+      axis="horizontal"
+      color={fadeColor}
+      className="w-full min-w-0 content-md:w-auto"
+      scrollClassName={cn(ASK_PROMPTS_ROW_CLASS, end ? 'content-md:items-end' : 'content-md:items-start', className)}
+    >
+      <MingoAiButton variant="button" source={source} label={label} icon={icon} className="shrink-0" />
+      <QuestionChips
+        prompts={prompts}
+        count={count}
+        loading={loading}
+        source={source}
+        onAsk={onAsk}
+        slotClassName={cn(ROW_CHIP_SLOT_CLASS, end && 'content-md:justify-end')}
+      />
+    </ScrollShadow>
+  );
+}
+
+export interface AskCardProps extends Omit<AskPromptsProps, 'label' | 'className' | 'align'> {
+  title: string;
+  description?: string;
+  /** The assistant's configured name: the launcher's label. */
+  label: string;
+  /** Show the Cmd+K / Ctrl+K key cap on the launcher (and bind it). Default true: the card's launcher reads like the header's. */
+  shortcutHint?: boolean;
+  className?: string;
+}
+
+/**
+ * The "still deciding?" card beside a list of questions: the assistant's mark,
+ * a title, a line of description, `count` questions (one per row, in fixed
+ * slots, chip skeletons while `loading`) and the chat launcher. The card is the
+ * same height before and after the questions arrive.
+ */
+export function AskCard({
+  title,
+  description,
+  prompts,
+  count: countProp,
+  loading = false,
+  source,
+  label,
+  icon,
+  onAsk,
+  shortcutHint = true,
+  className,
+}: AskCardProps) {
+  const count = slotCount(countProp, loading, prompts);
+  return (
+    <div
+      className={cn(
+        'flex flex-col gap-[var(--spacing-system-m)] rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-l)]',
+        className,
+      )}
+    >
+      <div className="flex items-center gap-3">
+        <AssistantGlyph icon={icon} className="size-8" />
+        <div className="min-w-0">
+          <p className="text-ods-text-primary text-h4">{title}</p>
+          {description && <p className="text-ods-text-secondary text-h6">{description}</p>}
+        </div>
+      </div>
+      {(loading || prompts.length > 0) && (
+        <div className="flex min-w-0 flex-col items-start gap-2">
+          <QuestionChips prompts={prompts} count={count} loading={loading} source={source} onAsk={onAsk} />
+        </div>
+      )}
+      <MingoAiButton
+        variant="button"
+        source={source}
+        label={label}
+        icon={icon}
+        shortcutHint={shortcutHint}
+        className="self-start"
+      />
+    </div>
+  );
+}

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

@@ -1859,15 +1859,49 @@ function EmbeddableChatInner({
   // Listen for plain "open chat" events (no row context). Fired by the
   // header MingoAiButton. Same strict source filter as `ask-ai:open-with-ref`
   // above: events without a matching source are ignored.
+  // With a `prompt` in the detail (a page's "Ask Mingo" question) the panel
+  // also asks it, once, in Guide mode, in a new conversation. In any other mode
+  // the chat only opens.
+  // A question from the page starts its OWN conversation: it is never appended
+  // to whatever thread was open. An open thread is reset to a new chat first
+  // (`resetToNewChat`: the messages AND the active dialog id; clearing the
+  // messages alone leaves the id set, the draft never comes and the question
+  // would be lost) and the question is sent once that draft is what the panel holds.
+  const pendingAskRef = useRef<string | null>(null);
+  const isDraft = activeDialogId == null && messages.length === 0;
+  const sendAskPrompt = useCallback(
+    (prompt: string) => {
+      if (activeMode !== 'guide') return;
+      if (isDraft) {
+        void sendMessage(prompt).catch((err: unknown) => {
+          console.error('[EmbeddableChat] ask-ai:open prompt failed:', err);
+        });
+        return;
+      }
+      pendingAskRef.current = prompt;
+      resetToNewChat();
+    },
+    [activeMode, isDraft, sendMessage, resetToNewChat],
+  );
+  useEffect(() => {
+    const prompt = pendingAskRef.current;
+    if (!prompt || !isDraft) return;
+    pendingAskRef.current = null;
+    void sendMessage(prompt).catch((err: unknown) => {
+      console.error('[EmbeddableChat] ask-ai:open prompt failed:', err);
+    });
+  }, [isDraft, sendMessage]);
   useEffect(() => {
     const handler = (e: Event) => {
-      const detail = (e as CustomEvent<{ source?: string }>).detail;
+      const detail = (e as CustomEvent<{ source?: string; prompt?: unknown }>).detail;
       if (!detail || detail.source !== source) return;
       setIsOpen(true);
+      const prompt = typeof detail.prompt === 'string' ? detail.prompt.trim() : '';
+      if (prompt) setTimeout(() => sendAskPrompt(prompt), 0);
     };
     window.addEventListener('ask-ai:open', handler);
     return () => window.removeEventListener('ask-ai:open', handler);
-  }, [source, setIsOpen]);
+  }, [source, setIsOpen, sendAskPrompt]);
 
   const hasMessages = messages.length > 0;
   // First dialog page in flight and nothing cached yet — we don't yet know if

package/src/components/chat/entity-cards/case-study-card.tsx

@@ -1,9 +1,14 @@
 'use client';
 
 /**
- * CaseStudyCard (pure presentation). Four densities — `default` (vertical
+ * CaseStudyCard (pure presentation). Five densities — `default` (vertical
  * detail), `sm` (compact horizontal for chat-inline), `portrait` (rails and
- * strips) and `menu` (the site menu's card, hover-plays the highlight cut).
+ * strips), `menu` (the site menu's card, hover-plays the highlight cut) and
+ * `result` (a customer result: who, the headline metric large, the story's
+ * title and a link to read it; no cover).
+ *
+ * Only `result` shows a metric (the story's FIRST one). Every other density is
+ * the story's regular card and never changes its box for one.
  *
  * The card writes NO click logic — callers wrap with their own anchor
  * and pass the resolved detail URL via `href`.
@@ -16,7 +21,7 @@
 import { useState } from 'react';
 import Image from '../../../embed-shims/next-image';
 import Link from '../../../embed-shims/next-link';
-import type { CaseStudyCardData } from '../../../types/case-study';
+import type { CaseStudyCardData, CaseStudyMetric } from '../../../types/case-study';
 import { cn } from '../../../utils/cn';
 import { sortBitesByFeaturedAtDesc } from '../../features/video-bites-shared';
 import { CardHoverPlay } from '../../features/video-center-badge';
@@ -55,7 +60,10 @@ export interface CaseStudyCardProps {
   placeholderUrl?: string | null;
   /** `menu` is the site menu's card: the story's video plays muted on hover or
    *  focus (the video bites' hover grammar), then who it is about and who tells it. */
-  size?: 'default' | 'sm' | 'portrait' | 'menu';
+  size?: 'default' | 'sm' | 'portrait' | 'menu' | 'result';
+  /** `result`: the colour of the metric and the read link, as a text class
+   *  (a page that shows another product's brand). Default: the theme accent. */
+  accentClassName?: string;
   /** `menu`: mount the hover player (the host passes whether its panel is open,
    *  so a closed menu holds no player). Omitted: the card's own viewport gate. */
   mediaMounted?: boolean;
@@ -66,9 +74,88 @@ export interface CaseStudyCardProps {
   className?: string;
 }
 
+/** The `result` card's boxes: the card and its skeleton share them, so they are one height. */
+const CASE_STUDY_RESULT_STACK = 'flex h-full flex-col gap-5 p-6';
+const CASE_STUDY_RESULT_METRIC_BOX = 'flex h-[112px] shrink-0 flex-col justify-start gap-1 overflow-hidden';
+const CASE_STUDY_RESULT_FOOTER_BOX =
+  'mt-auto flex h-[60px] shrink-0 items-center justify-between gap-3 border-t border-ods-border pt-4';
+
+/** The metric a card shows: the story's first one, when it has both halves. */
+function headlineMetric(study: CaseStudyCardData): CaseStudyMetric | null {
+  const metric = study.metrics?.[0];
+  return metric?.value && metric.label ? metric : null;
+}
+
+/** Who tells the story: the portrait with the MSP's mark on it, the name and MSP, the job title. A fixed 60px zone. */
+function CaseStudyPersonRow({ study }: { study: CaseStudyCardData }) {
+  return (
+    <div className="flex h-[60px] shrink-0 items-center">
+      <div className="flex w-full min-w-0 items-center gap-3">
+        <div className="relative h-12 w-12 shrink-0">
+          {study.user?.avatar_url ? (
+            <Image
+              src={study.user.avatar_url}
+              alt={study.user?.full_name || 'User'}
+              className="h-12 w-12 rounded-full border border-ods-border bg-ods-bg object-cover"
+              width={48}
+              height={48}
+              unoptimized
+            />
+          ) : (
+            <div className="flex h-12 w-12 items-center justify-center rounded-full border border-ods-border bg-ods-bg">
+              <span className="text-ods-text-secondary text-h4">
+                {(study.user?.full_name || 'A').charAt(0).toUpperCase()}
+              </span>
+            </div>
+          )}
+          {study.msp?.icon_url && (
+            <div className="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center overflow-hidden rounded-full bg-ods-text-primary ring-1 ring-ods-bg">
+              <Image
+                src={study.msp.icon_url}
+                alt={study.msp.name || 'MSP'}
+                className="h-full w-full object-cover"
+                width={24}
+                height={24}
+                unoptimized
+              />
+            </div>
+          )}
+        </div>
+        <div className="min-w-0 flex-1">
+          <p className="truncate text-ods-text-primary text-h6">
+            {study.user?.full_name || 'Anonymous'}
+            {study.msp?.name && <span className="text-ods-text-secondary"> • {study.msp.name}</span>}
+          </p>
+          <p className="truncate text-ods-text-secondary text-h6">{study.user?.job_title || ' '}</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 /** `portrait` shares the default skeleton shape — the portrait anatomy uses the
  *  same zone boxes (media aspect → 72px title → 60px person footer). */
-export function CaseStudyCardSkeleton({ size = 'default' }: { size?: 'default' | 'sm' | 'portrait' }) {
+export function CaseStudyCardSkeleton({ size = 'default' }: { size?: 'default' | 'sm' | 'portrait' | 'result' }) {
+  if (size === 'result') {
+    return (
+      <div className={cn(CONTENT_CARD_SKELETON_FRAME_CLASS, CASE_STUDY_RESULT_STACK, 'animate-pulse')}>
+        <div className="flex h-[60px] shrink-0 items-center gap-3">
+          <div className="h-12 w-12 rounded-full bg-ods-border" />
+          <div className="flex-1 space-y-2">
+            <div className="h-4 w-2/3 rounded bg-ods-border" />
+            <div className="h-3 w-1/2 rounded bg-ods-border" />
+          </div>
+        </div>
+        <div className={CASE_STUDY_RESULT_METRIC_BOX} data-testid="case-study-result-skeleton-metric">
+          <div className="h-10 w-1/3 rounded bg-ods-border" />
+          <div className="h-4 w-3/4 rounded bg-ods-border" />
+        </div>
+        <div className={CASE_STUDY_RESULT_FOOTER_BOX}>
+          <div className="h-4 w-2/3 rounded bg-ods-border" />
+        </div>
+      </div>
+    );
+  }
   if (size === 'sm') {
     return (
       <span className={COMPACT_CARD_SKELETON_OUTER}>
@@ -131,6 +218,7 @@ export function CaseStudyCard({
   placeholderUrl: placeholderUrlProp,
   size = 'default',
   showTypeBadge = true,
+  accentClassName = 'text-ods-accent',
   mediaMounted,
   onNavigate,
   className,
@@ -259,6 +347,34 @@ export function CaseStudyCard({
     );
   }
 
+  if (size === 'result') {
+    // A customer result: the person, the headline metric large, then the story's
+    // title and the way in. A story with no metric has no result to show.
+    const metric = headlineMetric(study);
+    if (!metric) return null;
+    return (
+      <Link
+        href={href}
+        target={target}
+        rel={rel}
+        className={cn('block h-full', className)}
+        aria-label={`Read ${study.title}`}
+      >
+        <Card className={cn(CONTENT_CARD_FRAME_CLASS, CASE_STUDY_RESULT_STACK)}>
+          <CaseStudyPersonRow study={study} />
+          <div className={CASE_STUDY_RESULT_METRIC_BOX} data-testid="case-study-metric">
+            <span className={cn('truncate text-h1', accentClassName)}>{metric.value}</span>
+            <span className="line-clamp-2 text-ods-text-secondary text-h4">{metric.label}</span>
+          </div>
+          <div className={CASE_STUDY_RESULT_FOOTER_BOX}>
+            <span className="line-clamp-2 min-w-0 text-ods-text-secondary text-h6">{study.title}</span>
+            <span className={cn('shrink-0 text-h6', accentClassName)}>Read</span>
+          </div>
+        </Card>
+      </Link>
+    );
+  }
+
   if (size === 'portrait') {
     // Rail/strip density — shared <EntityPortraitCard> shell.
     return (
@@ -309,47 +425,7 @@ export function CaseStudyCard({
           <p className="line-clamp-3 break-words text-ods-text-primary text-h4">{study.title}</p>
         </div>
 
-        <div className="flex h-[60px] shrink-0 items-center">
-          <div className="flex w-full min-w-0 items-center gap-3">
-            <div className="relative h-12 w-12 shrink-0">
-              {study.user?.avatar_url ? (
-                <Image
-                  src={study.user.avatar_url}
-                  alt={study.user?.full_name || 'User'}
-                  className="h-12 w-12 rounded-full border border-ods-border bg-ods-bg object-cover"
-                  width={48}
-                  height={48}
-                  unoptimized
-                />
-              ) : (
-                <div className="flex h-12 w-12 items-center justify-center rounded-full border border-ods-border bg-ods-bg">
-                  <span className="text-ods-text-secondary text-h4">
-                    {(study.user?.full_name || 'A').charAt(0).toUpperCase()}
-                  </span>
-                </div>
-              )}
-              {study.msp?.icon_url && (
-                <div className="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center overflow-hidden rounded-full bg-ods-text-primary ring-1 ring-ods-bg">
-                  <Image
-                    src={study.msp.icon_url}
-                    alt={study.msp.name || 'MSP'}
-                    className="h-full w-full object-cover"
-                    width={24}
-                    height={24}
-                    unoptimized
-                  />
-                </div>
-              )}
-            </div>
-            <div className="min-w-0 flex-1">
-              <p className="truncate text-ods-text-primary text-h6">
-                {study.user?.full_name || 'Anonymous'}
-                {study.msp?.name && <span className="text-ods-text-secondary"> • {study.msp.name}</span>}
-              </p>
-              <p className="truncate text-ods-text-secondary text-h6">{study.user?.job_title || ' '}</p>
-            </div>
-          </div>
-        </div>
+        <CaseStudyPersonRow study={study} />
       </Card>
     </a>
   );

package/src/components/chat/index.ts

@@ -23,6 +23,7 @@ export * from './chat-message-row';
 export * from './chat-message-skeleton';
 
 export * from './quick-action-chip';
+export * from './ask-prompts';
 export * from './quick-action-marquee';
 export * from './quick-action-wall';
 export * from './chat-ticket-list';

package/src/components/chat/quick-action-chip.tsx

@@ -156,8 +156,10 @@ export interface QuickActionChipButtonProps {
   /** {@link QuickActionChipLozenge} at the label's leading edge (e.g. an
    *  IT/SEC classification affix). `true` renders the `theme`'s lozenge. */
   lozenge?: QuickActionChipLozenge | boolean;
-  /** `'primary'` = accent (yellow) chip, `'outline'` = bordered chip (default). */
-  variant?: 'primary' | 'outline';
+  /** `'primary'` = accent (yellow) chip, `'outline'` = bordered chip (default),
+   *  `'question'` = a bordered chip whose label is a SENTENCE in the case it was
+   *  written in (a question to ask the assistant), not an uppercase task label. */
+  variant?: 'primary' | 'outline' | 'question';
   /** Active single-select state (Figma "Feature Item" active): renders the
    *  Tag's `selected` variant (pink border + pink-secondary fill), overriding
    *  `variant`. Used by chip groups acting as tabs (OpenFrame categories). */
@@ -194,6 +196,8 @@ export interface QuickActionChipSkeletonProps {
   lozenge?: boolean;
   /** Chip scale — MUST match the loaded chips' `size` or the swap jumps. */
   size?: 'default' | 'large';
+  /** `'question'`: the placeholder of a `variant="question"` chip (its height and padding). */
+  variant?: 'outline' | 'question';
   className?: string;
 }
 
@@ -217,14 +221,18 @@ export function QuickActionChipSkeleton({
   icon = true,
   lozenge = false,
   size = 'default',
+  variant = 'outline',
   className,
 }: QuickActionChipSkeletonProps) {
+  const question = variant === 'question';
   return (
     <Tag
       variant="outline"
-      size={size}
-      className={className}
-      icon={icon ? <ChipSkelBar className={size === 'large' ? 'block size-5' : 'block size-4'} /> : undefined}
+      size={question ? 'sentence' : size}
+      className={cn(question && 'max-w-full', className)}
+      icon={
+        icon && !question ? <ChipSkelBar className={size === 'large' ? 'block size-5' : 'block size-4'} /> : undefined
+      }
       label={
         <>
           {lozenge && <ChipSkelBar className="mr-2 inline-block h-[16px] w-[26px] translate-y-[2px]" />}
@@ -268,9 +276,17 @@ export function QuickActionChipButton({
   const resolvedLozenge = lozenge === true ? theme?.lozenge : lozenge === false ? undefined : lozenge;
   const resolvedIcon = renderQuickActionIcon(themedIcon);
   const resolvedLabel = composeChipLabel(label, resolvedLozenge);
-  const tagVariant = selected ? (selectedAccent === 'cyan' ? 'selectedCyan' : 'selected') : variant;
+  const question = variant === 'question';
+  const tagVariant = selected
+    ? selectedAccent === 'cyan'
+      ? 'selectedCyan'
+      : 'selected'
+    : question
+      ? 'outline'
+      : variant;
+  const tagSize = question ? 'sentence' : size;
   if (!interactive) {
-    return <Tag variant={tagVariant} size={size} icon={resolvedIcon} label={resolvedLabel} className={className} />;
+    return <Tag variant={tagVariant} size={tagSize} icon={resolvedIcon} label={resolvedLabel} className={className} />;
   }
   return (
     <button
@@ -282,11 +298,19 @@ export function QuickActionChipButton({
       onBlur={onHoverEnd}
       aria-pressed={selected || undefined}
       className={cn(
-        'shrink-0 rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent',
+        'rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent',
+        // A question may be longer than a narrow column: it shrinks and clips there, read from its start.
+        question ? 'min-w-0 max-w-full text-left' : 'shrink-0',
         className,
       )}
     >
-      <Tag variant={tagVariant} size={size} icon={resolvedIcon} label={resolvedLabel} />
+      <Tag
+        variant={tagVariant}
+        size={tagSize}
+        icon={resolvedIcon}
+        label={resolvedLabel}
+        className={question ? 'max-w-full' : undefined}
+      />
     </button>
   );
 }