@gram-ai/elements 1.25.2 → 1.26.1

package/src/plugins/generative-ui/catalog.ts

@@ -0,0 +1,277 @@
+import { createCatalog } from '@json-render/core'
+import { z } from 'zod'
+
+/**
+ * Generative UI Catalog
+ *
+ * Defines all available components for LLM-generated UI.
+ * Components map to shadcn/ui primitives in the ui/ directory.
+ */
+export const catalog = createCatalog({
+  name: 'generative-ui',
+  components: {
+    // Layout
+    Stack: {
+      props: z.object({
+        direction: z.enum(['horizontal', 'vertical']).optional(),
+        gap: z.enum(['sm', 'md', 'lg']).optional(),
+        align: z.enum(['start', 'center', 'end', 'stretch']).optional(),
+        justify: z
+          .enum(['start', 'center', 'end', 'between', 'around'])
+          .optional(),
+        className: z.string().optional(),
+      }),
+      hasChildren: true,
+      description: 'Flex layout container for arranging child elements',
+    },
+
+    Grid: {
+      props: z.object({
+        columns: z.number().optional(),
+        gap: z.enum(['sm', 'md', 'lg']).optional(),
+        className: z.string().optional(),
+      }),
+      hasChildren: true,
+      description: 'Grid layout for arranging items in columns',
+    },
+
+    Card: {
+      props: z.object({
+        title: z.string().optional(),
+        className: z.string().optional(),
+      }),
+      hasChildren: true,
+      description: 'Container with optional title, border and padding',
+    },
+
+    // Typography
+    Text: {
+      props: z.object({
+        content: z.string(),
+        variant: z.enum(['heading', 'body', 'caption', 'code']).optional(),
+        className: z.string().optional(),
+      }),
+      description: 'Text content with styling variants',
+    },
+
+    // Data Display
+    Metric: {
+      props: z.object({
+        label: z.string(),
+        value: z.union([z.string(), z.number()]),
+        format: z.enum(['number', 'currency', 'percent']).optional(),
+        className: z.string().optional(),
+      }),
+      description:
+        'Display a key metric with label and formatted value (e.g., revenue, users)',
+    },
+
+    Badge: {
+      props: z.object({
+        content: z.string().optional(),
+        variant: z
+          .enum([
+            'default',
+            'secondary',
+            'destructive',
+            'outline',
+            'success',
+            'warning',
+          ])
+          .optional(),
+        className: z.string().optional(),
+      }),
+      hasChildren: true,
+      description: 'Status badge or tag for categorization',
+    },
+
+    Progress: {
+      props: z.object({
+        value: z.number(),
+        max: z.number().optional(),
+        className: z.string().optional(),
+      }),
+      description: 'Progress bar showing completion percentage',
+    },
+
+    Table: {
+      props: z.object({
+        headers: z.array(z.string()).optional(),
+        rows: z.array(z.array(z.union([z.string(), z.number()]))),
+        className: z.string().optional(),
+      }),
+      description: 'Data table with headers and rows',
+    },
+
+    List: {
+      props: z.object({
+        items: z.array(z.string()),
+        ordered: z.boolean().optional(),
+        className: z.string().optional(),
+      }),
+      description: 'Ordered or unordered list of items',
+    },
+
+    // Feedback
+    Alert: {
+      props: z.object({
+        title: z.string(),
+        description: z.string().optional(),
+        variant: z.enum(['default', 'destructive']).optional(),
+      }),
+      description: 'Alert message for important information or errors',
+    },
+
+    // Structure
+    Separator: {
+      props: z.object({
+        orientation: z.enum(['horizontal', 'vertical']).optional(),
+        className: z.string().optional(),
+      }),
+      description: 'Visual divider between content sections',
+    },
+
+    Divider: {
+      props: z.object({
+        orientation: z.enum(['horizontal', 'vertical']).optional(),
+        className: z.string().optional(),
+      }),
+      description:
+        'Visual divider between content sections (alias for Separator)',
+    },
+
+    // Interactive
+    Accordion: {
+      props: z.object({
+        type: z.enum(['single', 'multiple']).optional(),
+      }),
+      hasChildren: true,
+      description: 'Collapsible accordion container',
+    },
+
+    AccordionItem: {
+      props: z.object({
+        value: z.string(),
+        title: z.string(),
+      }),
+      hasChildren: true,
+      description: 'Individual accordion item with trigger and content',
+    },
+
+    Tabs: {
+      props: z.object({
+        defaultValue: z.string().optional(),
+        tabs: z.array(
+          z.object({
+            value: z.string(),
+            label: z.string(),
+          })
+        ),
+      }),
+      hasChildren: true,
+      description: 'Tabbed content container',
+    },
+
+    TabContent: {
+      props: z.object({
+        value: z.string(),
+      }),
+      hasChildren: true,
+      description: 'Content panel for a specific tab',
+    },
+
+    // Actions
+    Button: {
+      props: z.object({
+        label: z.string(),
+        variant: z
+          .enum(['default', 'secondary', 'destructive', 'outline', 'ghost'])
+          .optional(),
+        size: z.enum(['default', 'sm', 'lg', 'icon']).optional(),
+        disabled: z.boolean().optional(),
+        action: z.string().optional(),
+        actionParams: z.record(z.string(), z.unknown()).optional(),
+      }),
+      description:
+        'Clickable button that can trigger actions. Use action/actionParams to call backend functions.',
+    },
+
+    ActionButton: {
+      props: z.object({
+        label: z.string(),
+        action: z.string(),
+        args: z.record(z.string(), z.unknown()).optional(),
+        variant: z
+          .enum(['default', 'secondary', 'destructive', 'outline', 'ghost'])
+          .optional(),
+        size: z.enum(['default', 'sm', 'lg', 'icon']).optional(),
+        className: z.string().optional(),
+      }),
+      description:
+        'Button that triggers a frontend tool call directly without LLM roundtrip',
+    },
+
+    // Form Elements
+    Input: {
+      props: z.object({
+        label: z.string().optional(),
+        placeholder: z.string().optional(),
+        type: z.enum(['text', 'email', 'password', 'number', 'tel']).optional(),
+        valuePath: z.string(),
+      }),
+      description: 'Text input field with optional label',
+    },
+
+    Checkbox: {
+      props: z.object({
+        label: z.string().optional(),
+        valuePath: z.string(),
+        defaultChecked: z.boolean().optional(),
+      }),
+      description: 'Checkbox input with label',
+    },
+
+    Select: {
+      props: z.object({
+        placeholder: z.string().optional(),
+        valuePath: z.string(),
+        options: z.array(
+          z.object({
+            value: z.string(),
+            label: z.string(),
+          })
+        ),
+      }),
+      description: 'Dropdown select input',
+    },
+
+    // Display
+    Avatar: {
+      props: z.object({
+        src: z.string().optional(),
+        alt: z.string().optional(),
+        fallback: z.string(),
+      }),
+      description: 'User avatar with image and fallback initials',
+    },
+
+    Skeleton: {
+      props: z.object({
+        width: z.string().optional(),
+        height: z.string().optional(),
+        className: z.string().optional(),
+      }),
+      description: 'Loading placeholder skeleton',
+    },
+  },
+})
+
+export type CatalogComponentProps = typeof catalog extends {
+  components: infer C
+}
+  ? {
+      [K in keyof C]: C[K] extends { props: infer P }
+        ? z.infer<P extends z.ZodType ? P : never>
+        : never
+    }
+  : never

package/src/plugins/generative-ui/component.tsx

@@ -1,23 +1,109 @@
 'use client'
 
 import { GenerativeUI } from '@/components/ui/generative-ui'
+import { cn } from '@/lib/utils'
 import { SyntaxHighlighterProps } from '@assistant-ui/react-markdown'
-import { FC, useMemo } from 'react'
-import { PluginLoadingState } from '../components/PluginLoadingState'
+import { FC, useEffect, useMemo, useState } from 'react'
+import { MacOSWindowFrame } from '../components/MacOSWindowFrame'
 
 const loadingMessages = [
-  'Preparing your data...',
-  'Building your view...',
-  'Generating results...',
-  'Loading content...',
-  'Fetching information...',
-  'Processing your request...',
-  'Almost ready...',
-  'Setting things up...',
+  // Crafting & Creating
+  'Arranging pixels with care...',
+  'Brewing something beautiful...',
+  'Crafting your masterpiece...',
+  'Painting with data...',
+  'Weaving digital magic...',
+  'Assembling the good stuff...',
+  'Polishing the details...',
+  'Putting the finishing touches...',
+  // Cooking & Food
+  'Simmering the results...',
+  'Letting the data marinate...',
+  'Adding a pinch of style...',
+  'Fresh out of the oven soon...',
+  'Whisking up your view...',
+  // Nature & Growth
+  'Growing your garden of data...',
+  'Watching the seeds sprout...',
+  'Letting things bloom...',
+  'Nature is taking its course...',
+  // Space & Magic
+  'Consulting the stars...',
+  'Channeling cosmic energy...',
+  'Summoning the results...',
+  'Waving the magic wand...',
+  'Sprinkling some stardust...',
+  'Aligning the planets...',
+  // Building & Engineering
+  'Tightening the bolts...',
+  'Connecting the dots...',
+  'Stacking the blocks...',
+  'Laying the foundation...',
+  'Raising the scaffolding...',
+  // Playful & Cute
+  'Herding the pixels...',
+  'Teaching data to dance...',
+  'Convincing bits to cooperate...',
+  'Giving electrons a pep talk...',
+  'Wrangling the numbers...',
+  'Coaxing the results out...',
+  'Almost there, pinky promise...',
+  'Good things take a moment...',
+  'Worth the wait...',
+  'Patience, grasshopper...',
+  'Hold tight...',
+  'Doing the thing...',
+  // Abstract & Poetic
+  'Folding space and time...',
+  'Untangling the threads...',
+  'Finding the signal...',
+  'Distilling the essence...',
+  'Turning chaos into order...',
+  'Making sense of it all...',
+  // Confident & Reassuring
+  'This is going to be good...',
+  "You're gonna love this...",
+  'Something nice is coming...',
+  'Just a heartbeat away...',
 ]
 
-function getRandomLoadingMessage() {
-  return loadingMessages[Math.floor(Math.random() * loadingMessages.length)]
+function getRandomStartIndex() {
+  return Math.floor(Math.random() * loadingMessages.length)
+}
+
+const CyclingLoadingMessage: FC = () => {
+  const [index, setIndex] = useState(getRandomStartIndex)
+  const [isVisible, setIsVisible] = useState(true)
+
+  useEffect(() => {
+    let timeoutId: ReturnType<typeof setTimeout> | undefined
+    const interval = setInterval(() => {
+      // Fade out
+      setIsVisible(false)
+
+      // After fade out, change message and fade in
+      timeoutId = setTimeout(() => {
+        setIndex((prev) => (prev + 1) % loadingMessages.length)
+        setIsVisible(true)
+      }, 200)
+    }, 2000)
+
+    return () => {
+      clearInterval(interval)
+      if (timeoutId) clearTimeout(timeoutId)
+    }
+  }, [])
+
+  return (
+    <span
+      className={cn(
+        'shimmer text-muted-foreground text-sm transition-opacity duration-200',
+        isVisible ? 'opacity-100' : 'opacity-0'
+      )}
+    >
+      {loadingMessages[index]}
+    </span>
+  )
 }
 
 export const GenerativeUIRenderer: FC<SyntaxHighlighterProps> = ({ code }) => {
@@ -39,18 +125,23 @@ export const GenerativeUIRenderer: FC<SyntaxHighlighterProps> = ({ code }) => {
     }
   }, [code])
 
-  // Memoize the loading message so it doesn't change on every render
-  const loadingMessage = useMemo(() => getRandomLoadingMessage(), [])
-
-  // Show loading shimmer while JSON is incomplete/streaming
+  // Show loading state while JSON is incomplete/streaming
   if (!content) {
-    return <PluginLoadingState text={loadingMessage} />
+    return (
+      <MacOSWindowFrame>
+        <div className="bg-background flex min-h-[400px] items-center justify-center">
+          <CyclingLoadingMessage />
+        </div>
+      </MacOSWindowFrame>
+    )
   }
 
-  // Render without outer border - the Card component inside provides the border
+  // Render with macOS-style window frame
   return (
-    <div className="overflow-hidden after:hidden">
-      <GenerativeUI content={content} />
-    </div>
+    <MacOSWindowFrame>
+      <div className="p-4">
+        <GenerativeUI content={content} />
+      </div>
+    </MacOSWindowFrame>
   )
 }

package/src/plugins/generative-ui/index.ts

@@ -7,147 +7,26 @@ import { GenerativeUIRenderer } from './component'
  */
 export const generativeUI: Plugin = {
   language: 'ui',
-  prompt: `WHEN TO USE UI VISUALIZATION:
-Proactively render tool results and structured data as visual UI components whenever it would improve comprehension. Use the 'ui' code block format for:
-- Tool results that return structured data (lists, objects, metrics)
-- Data that benefits from visual hierarchy (dashboards, summaries)
-- Information with multiple related fields (user profiles, order details)
-- Anything with numbers, statuses, or progress that can be visualized
-- Results that would otherwise be displayed as raw JSON or verbose text
-
-Do NOT use UI for: simple text responses, single values, error messages, or when the user explicitly asks for raw data.
-
-To render UI, output a json-render specification in a code block with the language identifier 'ui'.
-
-CRITICAL JSON REQUIREMENTS:
-- The code block MUST contain ONLY valid, parseable JSON
-- NO comments (no // or /* */ anywhere)
-- NO trailing commas
-- Use double quotes for all strings and keys
-- The JSON must start with { and end with }
-
-AVAILABLE COMPONENTS:
-
-Card - Container with optional title
-  props: { title?: string }
-  children: any components
-
-Grid - Multi-column layout
-  props: { columns?: number } (default: 2)
-  children: any components
-
-Stack - Vertical or horizontal flex layout
-  props: { direction?: "vertical" | "horizontal" } (default: "vertical")
-  children: any components
-
-Metric - Displays a label and formatted value
-  props: { label: string, value: number, format?: "currency" | "percent" | "number" }
-
-Table - Data table
-  props: { headers: string[], rows: any[][] }
-
-Text - Text with variants
-  props: { content: string, variant?: "heading" | "body" | "caption" | "code" }
-
-Badge - Status badge
-  props: { content: string, variant?: "default" | "success" | "warning" | "error" }
-
-Progress - Progress bar
-  props: { value: number, max?: number, label?: string }
-
-List - Bullet or numbered list
-  props: { items: string[], ordered?: boolean }
-
-Divider - Horizontal line separator
-
-ActionButton - Interactive button that triggers a tool call
-  props: {
-    label: string,           // Button text
-    action: string,          // Tool name to invoke when clicked
-    args?: object,           // Arguments to pass to the tool
-    variant?: "default" | "secondary" | "outline" | "destructive"
-  }
-  NOTE: Only use ActionButton with tools you know are available
-
-STRUCTURE:
-Every UI spec is a tree with:
-- "type": component name (required)
-- "props": component properties (optional)
-- "children": array of child components (optional)
-
-EXAMPLE - DASHBOARD:
-{
-  "type": "Card",
-  "props": { "title": "Sales Overview" },
-  "children": [
-    {
-      "type": "Grid",
-      "props": { "columns": 3 },
-      "children": [
-        { "type": "Metric", "props": { "label": "Revenue", "value": 125000, "format": "currency" } },
-        { "type": "Metric", "props": { "label": "Growth", "value": 0.15, "format": "percent" } },
-        { "type": "Metric", "props": { "label": "Orders", "value": 1420, "format": "number" } }
-      ]
-    },
-    { "type": "Divider" },
-    { "type": "Progress", "props": { "label": "Q1 Target", "value": 75, "max": 100 } }
-  ]
-}
-
-EXAMPLE - TABLE:
-{
-  "type": "Card",
-  "props": { "title": "Users" },
-  "children": [
-    {
-      "type": "Table",
-      "props": {
-        "headers": ["Name", "Email", "Status"],
-        "rows": [
-          ["Alice", "alice@example.com", "Active"],
-          ["Bob", "bob@example.com", "Pending"]
-        ]
-      }
-    }
-  ]
-}
-
-EXAMPLE - WITH ACTIONS:
-{
-  "type": "Card",
-  "props": { "title": "Pending Request #123" },
-  "children": [
-    { "type": "Text", "props": { "variant": "body" }, "children": [{ "type": "Text", "props": {}, "children": [] }] },
-    {
-      "type": "Stack",
-      "props": { "direction": "horizontal" },
-      "children": [
-        { "type": "ActionButton", "props": { "label": "Approve", "action": "approve_request", "args": { "id": 123 } } },
-        { "type": "ActionButton", "props": { "label": "Reject", "action": "reject_request", "args": { "id": 123 }, "variant": "destructive" } }
-      ]
-    }
-  ]
-}
-
-STYLE GUIDELINES:
-- Prefer spacious, breathable layouts with adequate visual hierarchy
-- Use Grid with 2-3 columns max for metrics; avoid cramming too many items
-- Group related content in Cards with clear titles
-- Use Dividers to separate logical sections
-- Balance information density: show what matters, hide the noise
-- For dashboards, lead with the most important metrics at the top
-
-CONTENT GUIDELINES:
-- Outside the code block, provide context and insights about the data
-- Do not describe technical implementation details
-- Focus on what the data means, not how it's displayed
-
-ACTION RESULT HANDLING:
-When you receive a message starting with "[Action completed]" or "[Action failed]", the user clicked an action button and the tool has already been executed. Provide a brief, friendly acknowledgment of what happened. Keep your response concise - one sentence is usually enough. Do not re-execute the action or ask if they want to do something they just did.
-
-Examples:
-- "[Action completed] approve_request: Request #123 approved" → "Done! Request #123 has been approved."
-- "[Action failed] delete_task: Permission denied" → "I couldn't delete that task - looks like you don't have permission."`,
+  prompt: `Render structured data as visual UI using \`\`\`ui code blocks with valid JSON.
+
+Components:
+- Card{title?} - container with border
+- Grid{columns?} - multi-column layout
+- Stack{direction?} - vertical/horizontal flex
+- Metric{label,value,format?} - formatted number display (currency/percent/number)
+- Table{headers[],rows[][]} - data table
+- Text{content,variant?} - heading/body/caption/code
+- Badge{content,variant?} - default/success/warning/error
+- Progress{value,max?,label?} - progress bar
+- List{items[],ordered?} - bullet/numbered list
+- Divider - horizontal separator
+- ActionButton{label,action,args?} - triggers tool call
+
+Format: {"type":"Name","props":{...},"children":[...]}
+
+Example: {"type":"Card","props":{"title":"Stats"},"children":[{"type":"Metric","props":{"label":"Revenue","value":50000,"format":"currency"}}]}
+
+Use for dashboards, tables, metrics from tool results. Skip for simple text or errors.`,
   Component: GenerativeUIRenderer,
   Header: undefined,
 }

package/src/plugins/generative-ui/ui/accordion-wrapper.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import * as React from 'react'
+import {
+  Accordion as AccordionPrimitive,
+  AccordionItem as AccordionItemPrimitive,
+  AccordionTrigger,
+  AccordionContent,
+} from './accordion'
+
+export interface AccordionWrapperProps {
+  type?: 'single' | 'multiple'
+  children?: React.ReactNode
+}
+
+/**
+ * Accordion wrapper that adapts the compound Accordion to the catalog's props-based API.
+ */
+export function AccordionWrapper({
+  type = 'single',
+  children,
+}: AccordionWrapperProps) {
+  // Type assertion needed because Radix types are complex
+  const AccordionRoot = AccordionPrimitive as React.FC<{
+    type: 'single' | 'multiple'
+    collapsible?: boolean
+    children?: React.ReactNode
+  }>
+
+  return (
+    <AccordionRoot type={type} collapsible={type === 'single'}>
+      {children}
+    </AccordionRoot>
+  )
+}
+
+export interface AccordionItemWrapperProps {
+  value: string
+  title: string
+  children?: React.ReactNode
+}
+
+/**
+ * AccordionItem wrapper that takes title as a prop and renders trigger + content.
+ */
+export function AccordionItemWrapper({
+  value,
+  title,
+  children,
+}: AccordionItemWrapperProps) {
+  return (
+    <AccordionItemPrimitive value={value}>
+      <AccordionTrigger>{title}</AccordionTrigger>
+      <AccordionContent>{children}</AccordionContent>
+    </AccordionItemPrimitive>
+  )
+}