@flamingo-stack/openframe-frontend-core 0.0.289 → 0.0.290-snapshot.20260618201839

package/src/components/chat/entity-cards/dispatch.tsx

@@ -74,6 +74,7 @@ import { MingoIcon } from '../../icons'
 import { EyeIcon } from '../../icons-v2-generated/interface/eye-icon'
 import { ArrowRightUpIcon } from '../../icons-v2-generated/arrows/arrow-right-up-icon'
 import { TagIcon } from '../../icons-v2-generated/shopping/tag-icon'
+import { QuestionCircleIcon } from '../../icons-v2-generated/signs-and-symbols/question-circle-icon'
 import { SlackLogoGreyIcon } from '../../icons-v2-generated/brand-logos/slack-logo-grey-icon'
 import { FileContentIcon } from '../../icons-v2-generated/documents/file-content-icon'
 import { ChartBar01VerIcon } from '../../icons-v2-generated/charts/chart-bar-01-ver-icon'
@@ -354,6 +355,39 @@ function HubspotTicketChatCard({
   )
 }
 
+/** FAQ Q&A — title=question, body=answer preview, optional section pill.
+ *  No-fetch card: every field the renderer needs already lives on the
+ *  ChatRef (hub's `FAQ_MAPPER.toRetrievedDoc` populates `title` /
+ *  `preview` / `url` / `targetPlatform`, and the section name is threaded
+ *  through `metadata.section` for the badge). The card itself stays pure
+ *  presentation — same shape as `SlackChatCard` / `HubspotTicketChatCard`. */
+function FaqChatCard({
+  chatRef,
+  isNewTab,
+  discuss,
+}: {
+  chatRef: ChatRef
+  isNewTab: boolean
+  discuss?: CardDiscussAction
+}) {
+  const section =
+    typeof chatRef.metadata?.section === 'string'
+      ? (chatRef.metadata.section as string).trim()
+      : undefined
+  const statusLabel = section && section.length > 0 ? section : 'FAQ'
+  return (
+    <MingoInfoCard
+      title={chatRef.title}
+      description={chatRef.preview ?? undefined}
+      icon={<QuestionCircleIcon size={24} />}
+      status={{ label: statusLabel, variant: 'grey' }}
+      anchorProps={buildAnchorProps(chatRef.url, isNewTab)}
+      menuGroups={cardMenuGroups(chatRef.url, discuss)}
+      menuAriaLabel="FAQ actions"
+    />
+  )
+}
+
 function SlackChatCard({
   chatRef,
   isNewTab,
@@ -1121,6 +1155,14 @@ const CHAT_CARD_REGISTRY: Record<string, ChatCardRegistryEntry> = {
           discuss={opts.discuss} />
     ),
   },
+  faq: {
+    mode: 'no-fetch',
+    label: 'FAQ',
+    bareInline: true,
+    render: (chatRef, opts) => (
+      <FaqChatCard chatRef={chatRef} isNewTab={opts.isNewTab} discuss={opts.discuss} />
+    ),
+  },
   hubspot_ticket: {
     mode: 'no-fetch',
     label: 'HubSpot ticket',

package/src/components/features/.paths-display.md

@@ -44,7 +44,7 @@ import { PathsDisplay, getOpenFramePaths } from '@flamingo/ui-kit/components/fea
 | `title` | `string` | — | Optional heading above the list |
 | `description` | `string` | — | Optional subtext below the title |
 | `showCopyButtons` | `boolean` | `true` | Toggle copy button visibility |
-| `copyIconSize` | `string` | `'w-5 h-5'` | Tailwind size classes for the copy icon |
+| `copyIconSize` | `string` | `'w-6 h-6'` | Tailwind size classes for the copy icon |
 | `className` | `string` | — | Additional CSS classes for the container |
 
 > **Note:** The component renders `null` when `paths` is empty or undefined. Copy buttons only render when both `showCopyButtons` is `true` **and** `onCopyPath` is provided.

package/src/components/features/command-box.tsx

@@ -98,7 +98,7 @@ export function CommandBox({
           {title}
         </div>
       )}
-      <div className="bg-ods-card border border-ods-border rounded-[6px] p-4">
+      <div className="bg-ods-bg border border-ods-border rounded-[6px] p-4">
         <div
           className={cn(
             'text-ods-text-primary font-mono text-[14px] md:text-[16px] leading-relaxed break-all',

package/src/components/features/paths-display.tsx

@@ -1,8 +1,7 @@
 'use client'
 
 import React from 'react'
-import { Copy } from 'lucide-react'
-import { Button } from '../ui/button'
+import { Copy02Icon } from '../icons-v2-generated/documents/copy-02-icon'
 import { cn } from '../../utils/cn'
 
 export interface PathsDisplayProps {
@@ -37,7 +36,7 @@ export interface PathsDisplayProps {
   showCopyButtons?: boolean
 
   /**
-   * Size of the copy icon (default: 'w-5 h-5')
+   * Size of the copy icon (default: 'w-6 h-6')
    */
   copyIconSize?: string
 }
@@ -78,7 +77,7 @@ export function PathsDisplay({
   description,
   className,
   showCopyButtons = true,
-  copyIconSize = 'w-5 h-5'
+  copyIconSize = 'w-6 h-6'
 }: PathsDisplayProps) {
   if (!paths || paths.length === 0) {
     return null
@@ -87,12 +86,12 @@ export function PathsDisplay({
   return (
     <div className={cn('flex flex-col gap-3', className)}>
       {title && (
-        <div className="text-ods-text-primary text-[16px] md:text-[18px]">
+        <div className="text-h4 text-ods-text-primary">
           {title}
         </div>
       )}
       {description && (
-        <div className="text-ods-text-secondary text-[14px] md:text-[16px]">
+        <div className="text-h6 text-ods-text-secondary">
           {description}
         </div>
       )}
@@ -100,20 +99,20 @@ export function PathsDisplay({
         {paths.map((path) => (
           <div
             key={path}
-            className="flex items-center justify-between p-4 border-b border-ods-border last:border-b-0"
+            className="flex items-center gap-4 p-4 border-b border-ods-border last:border-b-0"
           >
-            <span className="text-ods-text-primary font-medium text-[14px] md:text-[16px] font-mono break-all">
+            <span className="flex-1 min-w-0 text-h4 text-ods-text-primary truncate">
               {path}
             </span>
             {showCopyButtons && onCopyPath && (
-              <Button
-                variant="transparent"
-                size="small-legacy"
+              <button
+                type="button"
                 onClick={() => onCopyPath(path)}
-                className="ml-4 shrink-0"
+                aria-label={`Copy ${path}`}
+                className="shrink-0 rounded-md text-ods-text-secondary transition-colors hover:text-ods-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus"
               >
-                <Copy className={copyIconSize} />
-              </Button>
+                <Copy02Icon className={copyIconSize} />
+              </button>
             )}
           </div>
         ))}