@flamingo-stack/openframe-frontend-core 0.0.268 → 0.0.269

package/src/components/features/notifications/approval-request-notification-tile.tsx

@@ -5,9 +5,9 @@ import { cn } from '../../../utils/cn'
 import { ApprovalBatchMessage } from '../../chat/approval-batch-message'
 import { ExpandChevron } from '../../chat/expand-chevron'
 import { useCollapsible } from '../../chat/hooks/use-collapsible'
-import type { ApprovalBatchData, ChatApprovalStatus } from '../../chat/types'
+import type { ChatApprovalStatus } from '../../chat/types'
 import { NotificationTile } from './notification-tile'
-import { getApprovalMeta } from './types'
+import { approvalMetaToBatchData, getApprovalMeta, resolutionToStatus } from './types'
 import type { Notification } from './types'
 
 export interface ApprovalRequestNotificationTileProps {
@@ -35,27 +35,14 @@ export function ApprovalRequestNotificationTile({
   // Toggling the command section pins the tile so a live pop-up doesn't
   // auto-dismiss out from under the user mid-read.
   const [pinned, setPinned] = useState(defaultExpanded)
-  const [status, setStatus] = useState<ChatApprovalStatus>('pending')
+  // Optimistic status for this user's own click; backend resolution (below) wins once it arrives.
+  const [localStatus, setLocalStatus] = useState<ChatApprovalStatus | null>(null)
 
   const approval = getApprovalMeta(notification)
+  const resolvedStatus = resolutionToStatus(approval?.resolution)
+  const status: ChatApprovalStatus = resolvedStatus !== 'pending' ? resolvedStatus : (localStatus ?? 'pending')
 
-  const batchData = useMemo<ApprovalBatchData | null>(() => {
-    if (!approval) return null
-    return {
-      approvalRequestId: approval.approvalRequestId,
-      approvalType: approval.approvalType ?? '',
-      toolCalls: approval.toolCalls.map((tc, index) => ({
-        toolExecutionRequestId: tc.toolExecutionRequestId ?? `${approval.approvalRequestId}:${index}`,
-        toolName: tc.toolName,
-        toolTitle: tc.toolTitle ?? undefined,
-        toolExplanation: tc.toolExplanation ?? undefined,
-        toolType: tc.toolType ?? undefined,
-        requiresApproval: tc.requiresApproval ?? true,
-        approvalType: tc.approvalType ?? null,
-        toolCallArguments: tc.toolCallArguments ?? null,
-      })),
-    }
-  }, [approval])
+  const batchData = useMemo(() => (approval ? approvalMetaToBatchData(approval) : null), [approval])
 
   const { innerRef, containerStyle } = useCollapsible({ expanded })
 
@@ -65,14 +52,22 @@ export function ApprovalRequestNotificationTile({
   const toggleLabel = `${expanded ? 'Hide' : 'Show'} ${commandWord}`
 
   const handleApprove = async () => {
-    await onApprove(batchData.approvalRequestId)
-    setStatus('approved')
-    onComplete(notification.id)
+    setLocalStatus('approved')
+    try {
+      await onApprove(batchData.approvalRequestId)
+      onComplete(notification.id)
+    } catch {
+      setLocalStatus(null) // roll back the optimistic flip; the request failed
+    }
   }
   const handleReject = async () => {
-    await onReject(batchData.approvalRequestId)
-    setStatus('rejected')
-    onComplete(notification.id)
+    setLocalStatus('rejected')
+    try {
+      await onReject(batchData.approvalRequestId)
+      onComplete(notification.id)
+    } catch {
+      setLocalStatus(null)
+    }
   }
 
   return (
@@ -106,6 +101,8 @@ export function ApprovalRequestNotificationTile({
           <ApprovalBatchMessage
             data={batchData}
             status={status}
+            resolvedByName={approval.resolvedByName}
+            showExecutionStatus={false}
             onApprove={handleApprove}
             onReject={handleReject}
             maxBodyHeight="50vh"

package/src/components/features/notifications/index.ts

@@ -14,8 +14,10 @@ export { ApprovalRequestNotificationTile } from './approval-request-notification
 export type { ApprovalRequestNotificationTileProps } from './approval-request-notification-tile'
 export {
   ADMIN_APPROVAL_REQUEST_CONTEXT_TYPE,
+  approvalMetaToBatchData,
   getApprovalMeta,
   isApprovalNotification,
+  resolutionToStatus,
 } from './types'
 export type {
   Notification,

package/src/components/features/notifications/types.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react'
+import { APPROVAL_STATUS, type ApprovalBatchData, type ChatApprovalStatus } from '../../chat/types'
 
 export type NotificationVariant = 'default' | 'success' | 'warning' | 'error' | 'info'
 
@@ -52,6 +53,10 @@ export interface ApprovalNotificationMeta {
   dialogId?: string | null
   ticketId?: string | null
   approvalType?: string | null
+  /** Backend `ApprovalResolution`: PENDING | APPROVED | REJECTED | CANCELLED. Null until resolved. */
+  resolution?: string | null
+  /** Display name of the user who resolved the request; null until resolved (or for system actions). */
+  resolvedByName?: string | null
   toolCalls: ApprovalToolCallMeta[]
 }
 
@@ -71,6 +76,40 @@ export function getApprovalMeta(notification: Notification): ApprovalNotificatio
     dialogId: (meta?.dialogId as string | undefined) ?? null,
     ticketId: (meta?.ticketId as string | undefined) ?? null,
     approvalType: (meta?.approvalType as string | undefined) ?? null,
+    resolution: (meta?.resolution as string | undefined) ?? null,
+    resolvedByName: (meta?.resolvedByName as string | undefined) ?? null,
     toolCalls: toolCalls as ApprovalToolCallMeta[],
   }
 }
+
+/** Map the backend `ApprovalResolution` carried on a notification to a tile/batch status. */
+export function resolutionToStatus(resolution: unknown): ChatApprovalStatus {
+  switch (typeof resolution === 'string' ? resolution.toUpperCase() : undefined) {
+    case 'APPROVED':
+      return APPROVAL_STATUS.APPROVED
+    case 'REJECTED':
+      return APPROVAL_STATUS.REJECTED
+    case 'CANCELLED':
+      return APPROVAL_STATUS.CANCELLED
+    default:
+      return APPROVAL_STATUS.PENDING
+  }
+}
+
+/** Build the `ApprovalBatchMessage` data payload from an approval notification's meta. */
+export function approvalMetaToBatchData(approval: ApprovalNotificationMeta): ApprovalBatchData {
+  return {
+    approvalRequestId: approval.approvalRequestId,
+    approvalType: approval.approvalType ?? '',
+    toolCalls: approval.toolCalls.map((tc, index) => ({
+      toolExecutionRequestId: tc.toolExecutionRequestId ?? `${approval.approvalRequestId}:${index}`,
+      toolName: tc.toolName,
+      toolTitle: tc.toolTitle ?? undefined,
+      toolExplanation: tc.toolExplanation ?? undefined,
+      toolType: tc.toolType ?? undefined,
+      requiresApproval: tc.requiresApproval ?? true,
+      approvalType: tc.approvalType ?? null,
+      toolCallArguments: tc.toolCallArguments ?? null,
+    })),
+  }
+}

package/src/components/ui/index.ts

@@ -18,6 +18,7 @@ export * from './input-trigger'
 export * from './interactive-card'
 export * from './label'
 export * from './media-type-selector'
+export * from './no-data'
 export * from './page-loader'
 export * from './progress-bar'
 export * from './radio-group'

package/src/components/ui/no-data/index.ts

@@ -0,0 +1,4 @@
+export * from "./no-data"
+export * from "./no-data-message"
+export * from "./no-data-actions"
+export * from "./no-data-styles"

package/src/components/ui/no-data/no-data-actions.tsx

@@ -0,0 +1,102 @@
+import React from "react"
+
+import { cn } from "../../../utils/cn"
+import {
+  noDataActionInteractiveClasses,
+  noDataActionsVariants,
+  noDataIconClasses,
+  type NoDataActionsVariant,
+} from "./no-data-styles"
+
+interface NoDataActionProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "title"> {
+  /** Leading glyph, sized to 16px (mobile) / 24px (md+). Optional. */
+  icon?: React.ReactNode
+  /** Short label describing the block. */
+  label?: React.ReactNode
+}
+
+/**
+ * A single clickable block: a leading icon with a short label, laid out
+ * icon-beside-label on mobile and icon-above-label on larger screens. Tints on
+ * hover, shows a focus ring for keyboard users, and grays out when disabled.
+ * The outer border, rounded corners and dividers come from the surrounding
+ * group, so on its own it has no frame.
+ */
+const NoDataAction = React.forwardRef<HTMLButtonElement, NoDataActionProps>(
+  function NoDataAction({ icon, label, children, className, disabled, type, ...props }, ref) {
+    return (
+      <button
+        ref={ref}
+        type={type ?? "button"}
+        disabled={disabled}
+        className={cn(
+          "flex flex-1 items-center gap-[var(--spacing-system-s)] p-[var(--spacing-system-m)] text-left text-ods-text-secondary",
+          "md:flex-col md:items-start md:gap-[var(--spacing-system-xs)]",
+          noDataActionInteractiveClasses,
+          className,
+        )}
+        {...props}
+      >
+        {icon && <span className={noDataIconClasses}>{icon}</span>}
+        <span className="min-w-0 flex-1 break-words text-h6 md:w-full md:flex-none">
+          {label ?? children}
+        </span>
+      </button>
+    )
+  },
+)
+
+interface NoDataActionsProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * The blocks to render. Count is dynamic — any number works. When omitted,
+   * `children` are rendered instead.
+   */
+  actions?: NoDataActionProps[]
+  /** Surface treatment of the group panel. */
+  variant?: NoDataActionsVariant
+}
+
+/**
+ * A group of clickable blocks sharing one bordered, card-colored panel. Renders
+ * as a horizontal row with vertical dividers on larger screens and a vertical
+ * stack with horizontal dividers on mobile, switching automatically. Only the
+ * outermost blocks have rounded corners.
+ */
+const NoDataActions = React.forwardRef<HTMLDivElement, NoDataActionsProps>(
+  function NoDataActions({ actions, variant = "outline", className, children, ...props }, ref) {
+    const blocks = actions
+      ? actions.map((action, index) => <NoDataAction key={index} {...action} />)
+      : React.Children.toArray(children)
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          noDataActionsVariants({ variant }),
+          "flex w-full flex-col md:w-auto md:flex-row",
+          className,
+        )}
+        {...props}
+      >
+        {blocks.map((block, index) => (
+          <React.Fragment key={index}>
+            {index > 0 && (
+              <div
+                aria-hidden="true"
+                className="shrink-0 self-stretch border-t border-ods-border md:border-l md:border-t-0"
+              />
+            )}
+            {block}
+          </React.Fragment>
+        ))}
+      </div>
+    )
+  },
+)
+
+export {
+  NoDataAction,
+  NoDataActions,
+  type NoDataActionProps,
+  type NoDataActionsProps,
+}

package/src/components/ui/no-data/no-data-message.tsx

@@ -0,0 +1,43 @@
+import React from "react"
+
+import { cn } from "../../../utils/cn"
+import { noDataIconClasses } from "./no-data-styles"
+
+interface NoDataMessageProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+  /** Leading glyph, sized to 16px (mobile) / 24px (md+). Optional. */
+  icon?: React.ReactNode
+  /** Primary line (body size). */
+  title?: React.ReactNode
+  /** Secondary line (caption size). */
+  description?: React.ReactNode
+}
+
+/**
+ * A transparent, centered stack of an icon, a title and a description, in muted
+ * gray. Any piece is optional, so it also covers "icon + title", "title only",
+ * and similar reduced forms.
+ */
+const NoDataMessage = React.forwardRef<HTMLDivElement, NoDataMessageProps>(
+  function NoDataMessage({ icon, title, description, className, ...props }, ref) {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex flex-col items-center gap-[var(--spacing-system-l)] text-center text-ods-text-secondary",
+          className,
+        )}
+        {...props}
+      >
+        {icon && <span className={noDataIconClasses}>{icon}</span>}
+        {(title || description) && (
+          <div className="flex flex-col">
+            {title && <p className="text-h4 break-words">{title}</p>}
+            {description && <p className="text-h6 break-words">{description}</p>}
+          </div>
+        )}
+      </div>
+    )
+  },
+)
+
+export { NoDataMessage, type NoDataMessageProps }

package/src/components/ui/no-data/no-data-styles.ts

@@ -0,0 +1,36 @@
+// Shared style atoms for the NoData (empty-state) family. Mirrors the approach
+// used by `button-styles.ts`: a single source of truth for the icon scale, the
+// block-group surface and the interactive/disabled treatment, expressed as
+// reusable class atoms so new looks can be added without touching the markup.
+
+import { cva, type VariantProps } from "class-variance-authority"
+
+// Leading-icon glyph scale: 16px on mobile, 24px on md+. Color is intentionally
+// omitted so the glyph inherits the current text color (and dims with it when
+// the block is disabled).
+export const noDataIconClasses =
+  "inline-flex shrink-0 items-center justify-center [&_svg]:h-4 [&_svg]:w-4 md:[&_svg]:h-6 md:[&_svg]:w-6"
+
+// Surface for the action-block group container: a card-colored panel with a
+// border and rounded corners. `overflow-hidden` keeps only the outer blocks
+// round — inner blocks stay square.
+export const noDataActionsVariants = cva("overflow-hidden rounded-md", {
+  variants: {
+    variant: {
+      outline: "bg-ods-card border border-ods-border",
+    },
+  },
+  defaultVariants: { variant: "outline" },
+})
+
+export type NoDataActionsVariant = NonNullable<
+  VariantProps<typeof noDataActionsVariants>["variant"]
+>
+
+// Interactive treatment for a clickable block: hover/active surface tints, a
+// keyboard focus ring, and a disabled state that grays the text and stops
+// pointer interaction — matching the disabled outline button.
+export const noDataActionInteractiveClasses =
+  "cursor-pointer transition-colors hover:bg-ods-bg-hover active:bg-ods-bg-active " +
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus focus-visible:ring-inset " +
+  "disabled:cursor-default disabled:pointer-events-none disabled:text-ods-text-disabled"

package/src/components/ui/no-data/no-data.tsx

@@ -0,0 +1,84 @@
+import React from "react"
+
+import { cn } from "../../../utils/cn"
+import { Button, type ButtonProps } from "../button"
+import { NoDataMessage } from "./no-data-message"
+import { NoDataActions, type NoDataActionProps } from "./no-data-actions"
+
+interface NoDataProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+  // --- Message ---
+  /** Leading glyph, sized to 16px (mobile) / 24px (md+). */
+  icon?: React.ReactNode
+  /** Primary line. */
+  title?: React.ReactNode
+  /** Secondary line. */
+  description?: React.ReactNode
+
+  // --- Clickable blocks ---
+  /** Clickable blocks. Dynamic count. Hidden when empty/omitted. */
+  actions?: NoDataActionProps[]
+
+  // --- Footer button ---
+  /** Footer button label. When set (and `button` is not), renders the button. */
+  buttonLabel?: React.ReactNode
+  /** Leading icon for the footer button. */
+  buttonIcon?: React.ReactNode
+  /** Click handler for the footer button. */
+  onButtonClick?: ButtonProps["onClick"]
+  /** Extra props forwarded to the footer button (variant, href, loading, …). */
+  buttonProps?: Partial<ButtonProps>
+  /** Fully custom footer node; overrides the `buttonLabel`/`buttonIcon` path. */
+  button?: React.ReactNode
+}
+
+/**
+ * A centered empty-state panel: a muted icon/title/description message, an
+ * optional group of clickable blocks, and an optional footer button, stacked
+ * vertically with breakpoint-aware spacing. Each region renders only when its
+ * inputs are present, so the same component covers a bare message, a message
+ * with a button, the full layout, and everything in between.
+ */
+const NoData = React.forwardRef<HTMLDivElement, NoDataProps>(function NoData(
+  {
+    icon,
+    title,
+    description,
+    actions,
+    buttonLabel,
+    buttonIcon,
+    onButtonClick,
+    buttonProps,
+    button,
+    className,
+    ...props
+  },
+  ref,
+) {
+  const hasMessage = !!(icon || title || description)
+  const hasActions = !!actions?.length
+
+  const footerButton =
+    button ??
+    (buttonLabel != null ? (
+      <Button variant="outline" leftIcon={buttonIcon} onClick={onButtonClick} {...buttonProps}>
+        {buttonLabel}
+      </Button>
+    ) : null)
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "flex w-full flex-col items-center justify-center gap-[var(--spacing-system-l)] p-[var(--spacing-system-l)]",
+        className,
+      )}
+      {...props}
+    >
+      {hasMessage && <NoDataMessage icon={icon} title={title} description={description} />}
+      {hasActions && <NoDataActions actions={actions} />}
+      {footerButton}
+    </div>
+  )
+})
+
+export { NoData, type NoDataProps }

package/src/stories/EmptyState.stories.tsx

@@ -0,0 +1,207 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { Database, FileText, Inbox, Plus, Search, Settings, Sparkles, Upload, Zap } from 'lucide-react';
+import React from 'react';
+import { Button } from '../components/ui/button';
+import { NoData, NoDataAction, NoDataActions, NoDataMessage } from '../components/ui/no-data';
+
+const meta = {
+  title: 'UI/EmptyState',
+  component: NoData,
+  argTypes: {
+    icon: { control: false },
+    actions: { control: false },
+    button: { control: false },
+    buttonIcon: { control: false },
+    onButtonClick: { control: false },
+    buttonProps: { control: false },
+    title: { control: 'text' },
+    description: { control: 'text' },
+    buttonLabel: { control: 'text' },
+  },
+} satisfies Meta<typeof NoData>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const noop = () => {};
+
+const defaultActions = [
+  { icon: <Zap />, label: 'Feature Description', onClick: noop },
+  { icon: <Sparkles />, label: 'Feature Description', onClick: noop },
+  { icon: <Database />, label: 'Feature Description', onClick: noop },
+];
+
+// === Full composition ===
+
+export const Default: Story = {
+  args: {
+    icon: <Inbox />,
+    title: 'No data available',
+    description: 'Start by adding an item',
+    actions: defaultActions,
+    buttonLabel: 'Ask Mingo about Item',
+    buttonIcon: <Sparkles />,
+    onButtonClick: noop,
+  },
+};
+
+// === Reduced message ===
+
+export const MessageTitleOnly: Story = {
+  args: {
+    icon: <Search />,
+    title: 'No results found',
+  },
+};
+
+// === Without one region ===
+
+export const WithoutActions: Story = {
+  args: {
+    icon: <Inbox />,
+    title: 'No data available',
+    description: 'Start by adding an item',
+    buttonLabel: 'Add item',
+    buttonIcon: <Plus />,
+    onButtonClick: noop,
+  },
+};
+
+export const WithoutButton: Story = {
+  args: {
+    icon: <Inbox />,
+    title: 'No data available',
+    description: 'Start by adding an item',
+    actions: defaultActions,
+  },
+};
+
+// === Dynamic block count ===
+
+export const TwoActions: Story = {
+  args: {
+    icon: <Database />,
+    title: 'No data available',
+    description: 'Start by adding an item',
+    actions: [
+      { icon: <Zap />, label: 'Feature Description', onClick: noop },
+      { icon: <Sparkles />, label: 'Feature Description', onClick: noop },
+    ],
+    buttonLabel: 'Ask Mingo about Item',
+    buttonIcon: <Sparkles />,
+    onButtonClick: noop,
+  },
+};
+
+export const FourActions: Story = {
+  args: {
+    icon: <Database />,
+    title: 'No data available',
+    description: 'Start by adding an item',
+    actions: [
+      { icon: <Zap />, label: 'Real-time sync', onClick: noop },
+      { icon: <Sparkles />, label: 'Smart suggestions', onClick: noop },
+      { icon: <Database />, label: 'Unlimited storage', onClick: noop },
+      { icon: <FileText />, label: 'Export anywhere', onClick: noop },
+    ],
+    buttonLabel: 'Ask Mingo about Item',
+    buttonIcon: <Sparkles />,
+    onButtonClick: noop,
+  },
+};
+
+// === Disabled blocks ===
+
+export const DisabledActions: Story = {
+  args: {
+    icon: <Inbox />,
+    title: 'No data available',
+    description: 'Some actions are unavailable',
+    actions: [
+      { icon: <Zap />, label: 'Available', onClick: noop },
+      { icon: <Sparkles />, label: 'Disabled', onClick: noop, disabled: true },
+      { icon: <Database />, label: 'Disabled', onClick: noop, disabled: true },
+    ],
+    buttonLabel: 'Ask Mingo about Item',
+    buttonIcon: <Sparkles />,
+    onButtonClick: noop,
+  },
+};
+
+// === Footer button variations ===
+
+export const ButtonAsLink: Story = {
+  args: {
+    icon: <Upload />,
+    title: 'No data available',
+    description: 'Import your first dataset',
+    buttonLabel: 'View docs',
+    buttonIcon: <FileText />,
+    buttonProps: { href: '/docs' },
+  },
+};
+
+export const CustomButton: Story = {
+  args: {
+    icon: <Settings />,
+    title: 'No data available',
+    description: 'Configure a source to get started',
+    // `button` is the escape hatch — pass any node.
+    button: (
+      <div className="flex gap-2">
+        <Button variant="outline" leftIcon={<Plus />}>Connect source</Button>
+        <Button variant="transparent" leftIcon={<FileText />}>View docs</Button>
+      </div>
+    ),
+  },
+};
+
+// === Standalone parts ===
+
+export const StandaloneActions: Story = {
+  args: { title: '' },
+  render: () => (
+    <NoDataActions>
+      <NoDataAction icon={<Zap />} label="Clickable block" onClick={noop} />
+      <NoDataAction icon={<Sparkles />} label="Clickable block" onClick={noop} />
+      <NoDataAction icon={<Database />} label="Disabled block" onClick={noop} disabled />
+    </NoDataActions>
+  ),
+};
+
+export const StandaloneMessage: Story = {
+  args: { title: '' },
+  render: () => (
+    <NoDataMessage
+      icon={<Search />}
+      title="No results found"
+      description="Try adjusting your filters"
+    />
+  ),
+};
+
+// === Showcase ===
+
+export const Showcase: Story = {
+  args: { title: '' },
+  render: () => (
+    <div className="flex flex-col items-stretch gap-12">
+      <NoData
+        icon={<Inbox />}
+        title="No data available"
+        description="Start by adding an item"
+        actions={defaultActions}
+        buttonLabel="Ask Mingo about Item"
+        buttonIcon={<Sparkles />}
+        onButtonClick={noop}
+      />
+      <NoData icon={<Search />} title="No results found" description="Try a different search" />
+      <NoData
+        icon={<Database />}
+        title="No data available"
+        description="Start by adding an item"
+        actions={defaultActions}
+      />
+    </div>
+  ),
+};