@flamingo-stack/openframe-frontend-core 0.0.732 → 0.0.734

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

@@ -481,6 +481,22 @@ export interface EmbeddableChatProps {
     items: ChatContextItem[];
     onRemove?: (item: ChatContextItem) => void;
   };
+  /**
+   * Host content pinned between the thread and the composer: the thread
+   * scrolls above it, the composer stays below, and it keeps its place while
+   * the thread grows (e.g. a guided tour the host attaches to one
+   * conversation, deciding by `mingoState.activeDialogId`). Rendered wherever
+   * the composer is - a conversation or the new-chat surface - and never on
+   * the chat list. Sized by its content: a tall block is the host's to cap or
+   * scroll. `null`/unset leaves the layout as it was.
+   */
+  aboveComposer?: React.ReactNode;
+  /**
+   * v2: what the list's "What to ask Mingo?" opens. Default: a new chat, the
+   * same as "Start New Chat"; a host with its own suggestions surface (a
+   * guided tour in a conversation of its own) points it there instead.
+   */
+  onWhatToAsk?: () => void;
 }
 
 // =============================================================================
@@ -1045,6 +1061,8 @@ function EmbeddableChatInner({
   guidePendingPrompt,
   onGuidePromptConsumed,
   contextMemory,
+  aboveComposer,
+  onWhatToAsk,
   handleRef,
 }: EmbeddableChatProps & { handleRef?: React.Ref<EmbeddableChatHandle> }) {
   // `shell` 'none' / 'inline' means the consumer hosts us inside their own panel
@@ -2397,8 +2415,8 @@ function EmbeddableChatInner({
     onNewChat: leaveArchiveThen(handleNewChat),
     onOpenArchive: headerOnOpenArchive && (archiveOpen ? closeArchive : headerOnOpenArchive),
     archiveActive: archiveOpen,
-    // The suggestions a new chat opens on.
-    onWhatToAsk: leaveArchiveThen(handleNewChat),
+    // The suggestions a new chat opens on, unless the host has a surface of its own.
+    onWhatToAsk: leaveArchiveThen(onWhatToAsk ?? handleNewChat),
     statusOf: dialogStatusOf,
     onRequestRename: mingoCaps.canRename ? setRenameTarget : undefined,
     onRequestArchive: mingoCaps.canArchive ? setArchiveTarget : undefined,
@@ -2987,6 +3005,15 @@ function EmbeddableChatInner({
                           </div>
                         </div>
 
+                        {/* Host block pinned above the composer (`aboveComposer`):
+                            the thread's own bottom padding separates them, the
+                            composer's horizontal inset is repeated so the two line up. */}
+                        {aboveComposer != null && aboveComposer !== false && (
+                          <div className="shrink-0 px-[var(--spacing-system-m)] pb-[var(--spacing-system-m)]">
+                            {aboveComposer}
+                          </div>
+                        )}
+
                         <ChatAttachmentChipStrip
                           attachments={stagedAttachments}
                           onRemove={removeAttachment}

package/src/components/chat/utils/icon-library.tsx

@@ -90,6 +90,13 @@ export const ICON_ALIASES: Readonly<Record<string, IconRef>> = {
   video: { set: 'VideoRecorderIcon' },
   headphones: { set: 'HeadphoneIcon' },
 
+  // The two LLM brands offered by `ICON_OPTIONS`. Their brand-colored glyphs
+  // are the only picker entries that hardcode a fill (#000 / #D97757), so they
+  // ignored the chip accent and sat black and orange in a cyan grid; the grey
+  // variants fill with `currentColor` like every other brand logo here.
+  'openai-logo': { set: 'OpenaiLogoGreyIcon' },
+  'anthropic-logo': { set: 'AnthropicLogoGreyIcon' },
+
   // Figma-canonical aliases (node 7363:205938) — kept for Storybook
   // fixtures and any older feed entries still using the long names.
   'clickup-logo': CLICKUP_GREY,

package/src/components/layout/page-heading.tsx

@@ -154,7 +154,15 @@ const SECTION_HEADING_LAYOUT = {
 } as const;
 
 export interface SectionHeadingProps {
-  /** The small label above the heading (Azeret Mono, uppercase, accent colour). */
+  /**
+   * The small label above the heading (Azeret Mono, uppercase, accent colour).
+   * On a page heading (`level="page"`) it is part of the `<h1>`: a hero's
+   * eyebrow names what the page is about ("Endpoint management software") above
+   * its positioning line, so the page's heading, and its accessible name, say
+   * both. The element takes no box of its own, so the eyebrow and the title keep
+   * their two places in the stack. On a section heading it stays a label beside
+   * the `<h2>`, whose accessible name is its title alone.
+   */
   eyebrow?: ReactNode;
   /** The heading text; a node when part of it is highlighted. Every sentence mark in it is drawn in the accent colour. */
   title: ReactNode;
@@ -204,14 +212,36 @@ export function SectionHeading({
   const accentClassName = headingAccentClass(platform, tone);
   const layout = SECTION_HEADING_LAYOUT[level];
   const Tag = presentational ? 'div' : level === 'page' ? 'h1' : 'h2';
+  const eyebrowNode = eyebrow ? <span className={`text-h5 ${accentClassName}`}>{eyebrow}</span> : null;
+  const headingText = (
+    <>
+      {accentSentenceMarks(title, platform, tone)}
+      {punctuation ? <span className={accentClassName}>{punctuation}</span> : null}
+    </>
+  );
   const stack = (
     <div className={layout.stack}>
-      {eyebrow ? <span className={`text-h5 ${accentClassName}`}>{eyebrow}</span> : null}
-      <Tag className={layout.heading} data-section-heading>
-        {accentSentenceMarks(title, platform, tone)}
-        {punctuation ? <span className={accentClassName}>{punctuation}</span> : null}
-      </Tag>
-      {intro ? <div className={layout.intro}>{intro}</div> : null}
+      {eyebrowNode && level === 'page' ? (
+        // `contents`: the element names the heading and draws no box, so the stack lays its two children out as before.
+        <Tag className="contents">
+          {eyebrowNode}
+          <span className={`block ${layout.heading}`} data-section-heading>
+            {headingText}
+          </span>
+        </Tag>
+      ) : (
+        <>
+          {eyebrowNode}
+          <Tag className={layout.heading} data-section-heading>
+            {headingText}
+          </Tag>
+        </>
+      )}
+      {intro ? (
+        <div className={layout.intro} data-section-intro>
+          {intro}
+        </div>
+      ) : null}
     </div>
   );
   if (!action) return className ? <div className={className}>{stack}</div> : stack;

package/src/components/ui/searchable-select.tsx

@@ -1,20 +1,28 @@
 'use client';
 
 import * as PopoverPrimitive from '@radix-ui/react-popover';
-import { type ReactNode, useMemo, useState } from 'react';
+import { type ReactNode, useId, useMemo, useState } from 'react';
 import { useKeyboardCollisionPadding } from '../../hooks/ui/use-keyboard-collision-padding';
 import { cn } from '../../utils/cn';
 import { CheckIcon, SearchIcon } from '../icons-v2-generated';
 import { Chevron02DownIcon } from '../icons-v2-generated/arrows/chevron-02-down-icon';
+import { FieldWrapper } from './field-wrapper';
 import { Input } from './input';
 
 export interface SearchableSelectOption {
   value: string;
   label: string;
-  /** Optional leading visual for the option row (avatar, icon, badge). */
+  /** Optional leading visual for the option row (avatar, icon, badge). The
+   *  default trigger leads with the selected option's icon too. */
   icon?: ReactNode;
+  /** Extra terms the search matches besides `label` — e.g. the stored key of a
+   *  glyph (`chart-pie`) whose label reads "Pie chart". */
+  keywords?: string[];
 }
 
+/** How the dropdown lays its options out — see `SearchableSelectProps.layout`. */
+export type SearchableSelectLayout = 'list' | 'grid';
+
 export interface SearchableSelectProps {
   options: SearchableSelectOption[];
   /** Currently selected option value; null/undefined when nothing is selected. */
@@ -34,7 +42,27 @@ export interface SearchableSelectProps {
    * is rendered.
    */
   trigger?: ReactNode;
-  /** Custom option-row renderer; default is icon + label + selected check. */
+  /** `id` of the default trigger button, which `label` names through `htmlFor`; generated when omitted. */
+  id?: string;
+  /**
+   * Label above the default trigger — the same `FieldWrapper` treatment
+   * `SelectTrigger` gives its `label`, so a searchable field lines up with the
+   * plain selects beside it. A custom `trigger` owns its own label.
+   */
+  label?: string;
+  /** Label scale forwarded to FieldWrapper ('large' = text-h4 for designs with body-scale field titles). */
+  labelVariant?: 'default' | 'large';
+  /** Validation message under the default trigger; also paints its border red. */
+  error?: string;
+  /**
+   * `'list'` (default) stacks full-width rows. `'grid'` tiles the options —
+   * icon above a centered caption, `minmax(7rem, 1fr)` columns — the
+   * icon-picker pattern. The grid fills the popover, so size it through
+   * `contentClassName` (360px fits three tiles).
+   */
+  layout?: SearchableSelectLayout;
+  /** Custom option-row renderer; default is icon + label + selected check
+   *  (icon above the caption in the grid layout). */
   renderOption?: (option: SearchableSelectOption, isSelected: boolean) => ReactNode;
   align?: 'start' | 'center' | 'end';
   /** Classes for the default trigger button. */
@@ -50,22 +78,37 @@ export interface SearchableSelectProps {
  * custom `trigger` for icon-button use cases; the default trigger looks and
  * behaves like `SelectTrigger`.
  */
-export function SearchableSelect({
-  options,
-  value = null,
-  onValueChange,
-  placeholder = 'Select...',
-  searchPlaceholder = 'Search...',
-  emptyText = 'No results found',
-  loadingText = 'Loading…',
-  isLoading = false,
-  disabled = false,
-  trigger,
-  renderOption,
-  align = 'start',
-  className,
-  contentClassName,
-}: SearchableSelectProps) {
+export function SearchableSelect(allProps: SearchableSelectProps) {
+  const {
+    options,
+    value = null,
+    onValueChange,
+    placeholder = 'Select...',
+    searchPlaceholder = 'Search...',
+    emptyText = 'No results found',
+    loadingText = 'Loading…',
+    isLoading = false,
+    disabled = false,
+    trigger,
+    id,
+    label,
+    labelVariant,
+    error,
+    layout = 'list',
+    renderOption,
+    align = 'start',
+    className,
+    contentClassName,
+  } = allProps;
+  // Wired for a message even while `error` is undefined — see `FieldWrapper.errorSlot`.
+  const errorSlot = 'error' in allProps;
+  const isInvalid = !!error;
+  const isGrid = layout === 'grid';
+  // The label names the trigger through `htmlFor`: clicking it focuses the
+  // button and assistive tech reads the field by it. A caller's `id` wins.
+  const generatedId = useId();
+  const triggerId = id ?? generatedId;
+
   const [isOpen, setIsOpen] = useState(false);
   const [search, setSearch] = useState('');
   const keyboardPadding = useKeyboardCollisionPadding();
@@ -79,7 +122,9 @@ export function SearchableSelect({
   const filtered = useMemo(() => {
     const q = search.trim().toLowerCase();
     if (!q) return options;
-    return options.filter(o => o.label.toLowerCase().includes(q));
+    return options.filter(
+      o => o.label.toLowerCase().includes(q) || (o.keywords ?? []).some(k => k.toLowerCase().includes(q)),
+    );
   }, [options, search]);
 
   const selectedOption = useMemo(
@@ -94,8 +139,10 @@ export function SearchableSelect({
 
   const defaultTrigger = (
     <button
+      id={triggerId}
       type="button"
       disabled={disabled}
+      data-invalid={isInvalid || undefined}
       className={cn(
         // Mirrors SelectTrigger so the closed state is indistinguishable from
         // the regular Select.
@@ -103,22 +150,45 @@ export function SearchableSelect({
         'border-ods-border bg-ods-card text-h4',
         selectedOption ? 'text-ods-text-primary' : 'text-ods-text-secondary',
         'enabled:hover:border-ods-border-hover enabled:hover:bg-ods-bg-hover enabled:active:border-ods-border-active enabled:active:bg-ods-bg-active',
-        'data-[state=open]:border-ods-accent data-[state=open]:hover:border-ods-accent',
+        !isInvalid && 'data-[state=open]:border-ods-accent data-[state=open]:hover:border-ods-accent',
         'group cursor-pointer transition-colors duration-200 disabled:!cursor-not-allowed disabled:bg-ods-bg',
+        isInvalid &&
+          'border-ods-error enabled:hover:border-ods-error enabled:active:border-ods-error data-[state=open]:border-ods-error',
         className,
       )}
     >
-      <span className="line-clamp-1">{selectedOption ? selectedOption.label : placeholder}</span>
+      <span className="flex min-w-0 flex-1 items-center gap-2">
+        {selectedOption?.icon}
+        <span className="truncate">{selectedOption ? selectedOption.label : placeholder}</span>
+      </span>
       <Chevron02DownIcon
-        className="shrink-0 text-ods-text-secondary transition-all duration-200 group-data-[state=open]:rotate-180 group-data-[state=open]:text-ods-accent"
+        className={cn(
+          'shrink-0 text-ods-text-secondary transition-all duration-200 group-data-[state=open]:rotate-180',
+          isInvalid ? 'text-ods-error' : 'group-data-[state=open]:text-ods-accent',
+        )}
         size={24}
       />
     </button>
   );
 
+  const triggerElement = <PopoverPrimitive.Trigger asChild>{trigger ?? defaultTrigger}</PopoverPrimitive.Trigger>;
+
+  // A `role="listbox"` child that is a status line, not an option: in the grid
+  // it has to span the row or it would sit in one tile-sized cell.
+  const statusClass = cn(
+    'px-[var(--spacing-system-sf)] py-[var(--spacing-system-s)] text-ods-text-secondary text-h5',
+    isGrid && 'col-span-full',
+  );
+
   return (
     <PopoverPrimitive.Root open={isOpen} onOpenChange={disabled ? undefined : setIsOpen} modal={false}>
-      <PopoverPrimitive.Trigger asChild>{trigger ?? defaultTrigger}</PopoverPrimitive.Trigger>
+      {!trigger && (label !== undefined || errorSlot) ? (
+        <FieldWrapper label={label} htmlFor={triggerId} labelVariant={labelVariant} error={error} errorSlot={errorSlot}>
+          {triggerElement}
+        </FieldWrapper>
+      ) : (
+        triggerElement
+      )}
       <PopoverPrimitive.Portal>
         <PopoverPrimitive.Content
           align={align}
@@ -147,15 +217,22 @@ export function SearchableSelect({
               className="rounded-none border-0"
             />
           </div>
-          <div className="max-h-80 min-h-0 overflow-y-auto py-[var(--spacing-system-xs)]" role="listbox">
+          <div
+            className={cn(
+              'max-h-80 min-h-0 overflow-y-auto',
+              // Tiles grow from 7rem: the popover's own border and a classic
+              // always-on scrollbar both eat into the track, so 7.5rem (the
+              // Figma cell) dropped a 360px popover to two columns. The column
+              // count follows the popover width. Each tile draws its own
+              // bottom/right rule, so the grid needs no gap.
+              isGrid ? 'grid grid-cols-[repeat(auto-fill,minmax(7rem,1fr))]' : 'py-[var(--spacing-system-xs)]',
+            )}
+            role="listbox"
+          >
             {isLoading ? (
-              <div className="px-[var(--spacing-system-sf)] py-[var(--spacing-system-s)] text-ods-text-secondary text-h5">
-                {loadingText}
-              </div>
+              <div className={statusClass}>{loadingText}</div>
             ) : filtered.length === 0 ? (
-              <div className="px-[var(--spacing-system-sf)] py-[var(--spacing-system-s)] text-ods-text-secondary text-h5">
-                {emptyText}
-              </div>
+              <div className={statusClass}>{emptyText}</div>
             ) : (
               filtered.map(opt => {
                 const isSelected = value === opt.value;
@@ -167,13 +244,28 @@ export function SearchableSelect({
                     aria-selected={isSelected}
                     onClick={() => handleSelect(opt.value)}
                     className={cn(
-                      'flex w-full items-center gap-[var(--spacing-system-xs)] px-[var(--spacing-system-sf)] py-[var(--spacing-system-xs)] text-left',
                       'transition-colors hover:bg-ods-bg-hover',
+                      isGrid
+                        ? 'flex min-w-0 flex-col items-center justify-center gap-[var(--spacing-system-xxs)] border-b border-r border-ods-border p-[var(--spacing-system-xs)]'
+                        : 'flex w-full items-center gap-[var(--spacing-system-xs)] px-[var(--spacing-system-sf)] py-[var(--spacing-system-xs)] text-left',
                       isSelected && 'bg-ods-bg-hover',
                     )}
                   >
                     {renderOption ? (
                       renderOption(opt, isSelected)
+                    ) : isGrid ? (
+                      <>
+                        {opt.icon}
+                        <span
+                          className={cn(
+                            'w-full truncate text-center text-h6',
+                            isSelected ? 'text-ods-text-primary' : 'text-ods-text-secondary',
+                          )}
+                          title={opt.label}
+                        >
+                          {opt.label}
+                        </span>
+                      </>
                     ) : (
                       <>
                         {opt.icon}