zilmate 1.7.8 → 1.8.1

package/.agents/skills/ai-elements/references/suggestion.md

@@ -0,0 +1,124 @@
+# Suggestion
+
+A suggestion component that displays a horizontal row of clickable suggestions for user interaction.
+
+The `Suggestion` component displays a horizontal row of clickable suggestions for user interaction.
+
+See `scripts/suggestion.tsx` for this example.
+
+## Installation
+
+```bash
+npx ai-elements@latest add suggestion
+```
+
+## Usage with AI SDK
+
+Build a simple input with suggestions users can click to send a message to the LLM.
+
+Add the following component to your frontend:
+
+```tsx title="app/page.tsx"
+"use client";
+
+import {
+  PromptInput,
+  type PromptInputMessage,
+  PromptInputTextarea,
+  PromptInputSubmit,
+} from "@/components/ai-elements/prompt-input";
+import { Suggestion, Suggestions } from "@/components/ai-elements/suggestion";
+import { useState } from "react";
+import { useChat } from "@ai-sdk/react";
+
+const suggestions = [
+  "Can you explain how to play tennis?",
+  "What is the weather in Tokyo?",
+  "How do I make a really good fish taco?",
+];
+
+const SuggestionDemo = () => {
+  const [input, setInput] = useState("");
+  const { sendMessage, status } = useChat();
+
+  const handleSubmit = (message: PromptInputMessage) => {
+    if (message.text.trim()) {
+      sendMessage({ text: message.text });
+      setInput("");
+    }
+  };
+
+  const handleSuggestionClick = (suggestion: string) => {
+    sendMessage({ text: suggestion });
+  };
+
+  return (
+    <div className="max-w-4xl mx-auto p-6 relative size-full rounded-lg border h-[600px]">
+      <div className="flex flex-col h-full">
+        <div className="flex flex-col gap-4">
+          <Suggestions>
+            {suggestions.map((suggestion) => (
+              <Suggestion
+                key={suggestion}
+                onClick={handleSuggestionClick}
+                suggestion={suggestion}
+              />
+            ))}
+          </Suggestions>
+          <PromptInput
+            onSubmit={handleSubmit}
+            className="mt-4 w-full max-w-2xl mx-auto relative"
+          >
+            <PromptInputTextarea
+              value={input}
+              placeholder="Say something..."
+              onChange={(e) => setInput(e.currentTarget.value)}
+              className="pr-12"
+            />
+            <PromptInputSubmit
+              status={status === "streaming" ? "streaming" : "ready"}
+              disabled={!input.trim()}
+              className="absolute bottom-1 right-1"
+            />
+          </PromptInput>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SuggestionDemo;
+```
+
+## Features
+
+- Horizontal row of clickable suggestion buttons
+- Customizable styling with variant and size options
+- Flexible layout that wraps suggestions on smaller screens
+- onClick callback that emits the selected suggestion string
+- Support for both individual suggestions and suggestion lists
+- Clean, modern styling with hover effects
+- Responsive design with mobile-friendly touch targets
+- TypeScript support with proper type definitions
+
+## Examples
+
+### Usage with AI Input
+
+See `scripts/suggestion-input.tsx` for this example.
+
+## Props
+
+### `<Suggestions />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.ComponentProps<typeof ScrollArea>` | - | Any other props are spread to the underlying ScrollArea component. |
+
+### `<Suggestion />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `suggestion` | `string` | Required | The suggestion string to display and emit on click. |
+| `onClick` | `(suggestion: string) => void` | - | Callback fired when the suggestion is clicked. |
+| `...props` | `Omit<React.ComponentProps<typeof Button>, ` | - | Any other props are spread to the underlying shadcn/ui Button component. |

package/.agents/skills/ai-elements/references/task.md

@@ -0,0 +1,222 @@
+# Task
+
+A collapsible task list component for displaying AI workflow progress, with status indicators and optional descriptions.
+
+The `Task` component provides a structured way to display task lists or workflow progress with collapsible details, status indicators, and progress tracking. It consists of a main `Task` container with `TaskTrigger` for the clickable header and `TaskContent` for the collapsible content area.
+
+See `scripts/task.tsx` for this example.
+
+## Installation
+
+```bash
+npx ai-elements@latest add task
+```
+
+## Usage with AI SDK
+
+Build a mock async programming agent using [`experimental_generateObject`](/docs/reference/ai-sdk-ui/use-object).
+
+Add the following component to your frontend:
+
+```tsx title="app/page.tsx"
+"use client";
+
+import { experimental_useObject as useObject } from "@ai-sdk/react";
+import {
+  Task,
+  TaskItem,
+  TaskItemFile,
+  TaskTrigger,
+  TaskContent,
+} from "@/components/ai-elements/task";
+import { Button } from "@/components/ui/button";
+import { tasksSchema } from "@/app/api/task/route";
+import {
+  SiReact,
+  SiTypescript,
+  SiJavascript,
+  SiCss,
+  SiHtml5,
+  SiJson,
+  SiMarkdown,
+} from "@icons-pack/react-simple-icons";
+
+const iconMap = {
+  react: { component: SiReact, color: "#149ECA" },
+  typescript: { component: SiTypescript, color: "#3178C6" },
+  javascript: { component: SiJavascript, color: "#F7DF1E" },
+  css: { component: SiCss, color: "#1572B6" },
+  html: { component: SiHtml5, color: "#E34F26" },
+  json: { component: SiJson, color: "#000000" },
+  markdown: { component: SiMarkdown, color: "#000000" },
+};
+
+const TaskDemo = () => {
+  const { object, submit, isLoading } = useObject({
+    api: "/api/agent",
+    schema: tasksSchema,
+  });
+
+  const handleSubmit = (taskType: string) => {
+    submit({ prompt: taskType });
+  };
+
+  const renderTaskItem = (item: any, index: number) => {
+    if (item?.type === "file" && item.file) {
+      const iconInfo = iconMap[item.file.icon as keyof typeof iconMap];
+      if (iconInfo) {
+        const IconComponent = iconInfo.component;
+        return (
+          <span className="inline-flex items-center gap-1" key={index}>
+            {item.text}
+            <TaskItemFile>
+              <IconComponent
+                color={item.file.color || iconInfo.color}
+                className="size-4"
+              />
+              <span>{item.file.name}</span>
+            </TaskItemFile>
+          </span>
+        );
+      }
+    }
+    return item?.text || "";
+  };
+
+  return (
+    <div className="max-w-4xl mx-auto p-6 relative size-full rounded-lg border h-[600px]">
+      <div className="flex flex-col h-full">
+        <div className="flex gap-2 mb-6 flex-wrap">
+          <Button
+            onClick={() => handleSubmit("React component development")}
+            disabled={isLoading}
+            variant="outline"
+          >
+            React Development
+          </Button>
+        </div>
+
+        <div className="flex-1 overflow-auto space-y-4">
+          {isLoading && !object && (
+            <div className="text-muted-foreground">Generating tasks...</div>
+          )}
+
+          {object?.tasks?.map((task: any, taskIndex: number) => (
+            <Task key={taskIndex} defaultOpen={taskIndex === 0}>
+              <TaskTrigger title={task.title || "Loading..."} />
+              <TaskContent>
+                {task.items?.map((item: any, itemIndex: number) => (
+                  <TaskItem key={itemIndex}>
+                    {renderTaskItem(item, itemIndex)}
+                  </TaskItem>
+                ))}
+              </TaskContent>
+            </Task>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TaskDemo;
+```
+
+Add the following route to your backend:
+
+```ts title="app/api/agent.ts"
+import { streamObject } from "ai";
+import { z } from "zod";
+
+export const taskItemSchema = z.object({
+  type: z.enum(["text", "file"]),
+  text: z.string(),
+  file: z
+    .object({
+      name: z.string(),
+      icon: z.string(),
+      color: z.string().optional(),
+    })
+    .optional(),
+});
+
+export const taskSchema = z.object({
+  title: z.string(),
+  items: z.array(taskItemSchema),
+  status: z.enum(["pending", "in_progress", "completed"]),
+});
+
+export const tasksSchema = z.object({
+  tasks: z.array(taskSchema),
+});
+
+// Allow streaming responses up to 30 seconds
+export const maxDuration = 30;
+
+export async function POST(req: Request) {
+  const { prompt } = await req.json();
+
+  const result = streamObject({
+    model: "openai/gpt-4o",
+    schema: tasksSchema,
+    prompt: `You are an AI assistant that generates realistic development task workflows. Generate a set of tasks that would occur during ${prompt}.
+
+    Each task should have:
+    - A descriptive title
+    - Multiple task items showing the progression
+    - Some items should be plain text, others should reference files
+    - Use realistic file names and appropriate file types
+    - Status should progress from pending to in_progress to completed
+
+    For file items, use these icon types: 'react', 'typescript', 'javascript', 'css', 'html', 'json', 'markdown'
+
+    Generate 3-4 tasks total, with 4-6 items each.`,
+  });
+
+  return result.toTextStreamResponse();
+}
+```
+
+## Features
+
+- Visual icons for pending, in-progress, completed, and error states
+- Expandable content for task descriptions and additional information
+- Built-in progress counter showing completed vs total tasks
+- Optional progressive reveal of tasks with customizable timing
+- Support for custom content within task items
+- Full type safety with proper TypeScript definitions
+- Keyboard navigation and screen reader support
+
+## Props
+
+### `<Task />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `defaultOpen` | `boolean` | `true` | Whether the task is open by default. |
+| `...props` | `React.ComponentProps<typeof Collapsible>` | - | Any other props are spread to the root Collapsible component. |
+
+### `<TaskTrigger />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `title` | `string` | Required | The title of the task that will be displayed in the trigger. |
+| `...props` | `React.ComponentProps<typeof CollapsibleTrigger>` | - | Any other props are spread to the CollapsibleTrigger component. |
+
+### `<TaskContent />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.ComponentProps<typeof CollapsibleContent>` | - | Any other props are spread to the CollapsibleContent component. |
+
+### `<TaskItem />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.ComponentProps<` | - | Any other props are spread to the underlying div. |
+
+### `<TaskItemFile />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.ComponentProps<` | - | Any other props are spread to the underlying div. |

package/.agents/skills/ai-elements/references/terminal.md

@@ -0,0 +1,103 @@
+# Terminal
+
+Display streaming console output with full ANSI color support.
+
+The `Terminal` component displays console output with ANSI color support, streaming indicators, and auto-scroll functionality.
+
+See `scripts/terminal.tsx` for this example.
+
+## Installation
+
+```bash
+npx ai-elements@latest add terminal
+```
+
+## Features
+
+- Full ANSI color support (256 colors, bold, italic, underline)
+- Streaming mode with cursor animation
+- Auto-scroll to latest output
+- Copy output to clipboard
+- Clear button support
+- Dark terminal theme
+
+## ANSI Support
+
+The Terminal uses `ansi-to-react` to parse ANSI escape codes:
+
+```bash
+\x1b[32m✓\x1b[0m Success    # Green checkmark
+\x1b[31m✗\x1b[0m Error      # Red X
+\x1b[33mwarn\x1b[0m Warning   # Yellow text
+\x1b[1mBold\x1b[0m           # Bold text
+```
+
+## Examples
+
+### Basic Usage
+
+See `scripts/terminal-basic.tsx` for this example.
+
+### Streaming Mode
+
+See `scripts/terminal-streaming.tsx` for this example.
+
+### With Clear Button
+
+See `scripts/terminal-clear.tsx` for this example.
+
+## Props
+
+### `<Terminal />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `output` | `string` | - | Terminal output text (supports ANSI codes). |
+| `isStreaming` | `boolean` | `false` | Show streaming indicator. |
+| `autoScroll` | `boolean` | `true` | Auto-scroll to bottom on new output. |
+| `onClear` | `() => void` | - | Callback to clear output (enables clear button). |
+| `className` | `string` | - | Additional CSS classes. |
+
+### `<TerminalCopyButton />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `onCopy` | `() => void` | - | Callback after successful copy. |
+| `onError` | `(error: Error) => void` | - | Callback if copying fails. |
+| `timeout` | `number` | `2000` | Duration to show copied state (ms). |
+
+### `<TerminalHeader />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Any other props are spread to the div element. |
+
+### `<TerminalTitle />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Any other props are spread to the div element. |
+
+### `<TerminalStatus />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Any other props are spread to the div element. |
+
+### `<TerminalActions />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Any other props are spread to the div element. |
+
+### `<TerminalClearButton />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.ComponentProps<typeof Button>` | - | Any other props are spread to the Button component. |
+
+### `<TerminalContent />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Any other props are spread to the div element. |

package/.agents/skills/ai-elements/references/test-results.md

@@ -0,0 +1,157 @@
+# Test Results
+
+Display test suite results with pass/fail/skip status and error details.
+
+The `TestResults` component displays test suite results including summary statistics, progress, individual tests, and error details.
+
+See `scripts/test-results.tsx` for this example.
+
+## Installation
+
+```bash
+npx ai-elements@latest add test-results
+```
+
+## Features
+
+- Summary statistics (passed/failed/skipped)
+- Progress bar visualization
+- Collapsible test suites
+- Individual test status and duration
+- Error messages with stack traces
+- Color-coded status indicators
+
+## Status Colors
+
+| Status    | Color           | Use Case         |
+| --------- | --------------- | ---------------- |
+| `passed`  | Green           | Test succeeded   |
+| `failed`  | Red             | Test failed      |
+| `skipped` | Yellow          | Test skipped     |
+| `running` | Blue (animated) | Test in progress |
+
+## Examples
+
+### Basic Usage
+
+See `scripts/test-results-basic.tsx` for this example.
+
+### With Test Suites
+
+See `scripts/test-results-suites.tsx` for this example.
+
+### With Error Details
+
+See `scripts/test-results-errors.tsx` for this example.
+
+## Props
+
+### `<TestResults />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `summary` | `unknown` | - | Test results summary. |
+| `className` | `string` | - | Additional CSS classes. |
+
+### `<TestSuite />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `name` | `string` | - | Suite name. |
+| `status` | `unknown` | - | Overall suite status. |
+| `defaultOpen` | `boolean` | - | Initially expanded. |
+
+### `<Test />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `name` | `string` | - | Test name. |
+| `status` | `unknown` | - | Test status. |
+| `duration` | `number` | - | Test duration in ms. |
+
+### `<TestResultsHeader />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Any other props are spread to the div element. |
+
+### `<TestResultsSummary />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Any other props are spread to the div element. |
+
+### `<TestResultsDuration />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.HTMLAttributes<HTMLSpanElement>` | - | Any other props are spread to the span element. |
+
+### `<TestResultsProgress />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Any other props are spread to the div element. |
+
+### `<TestResultsContent />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Any other props are spread to the div element. |
+
+### `<TestSuiteName />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.ComponentProps<typeof CollapsibleTrigger>` | - | Any other props are spread to the CollapsibleTrigger component. |
+
+### `<TestSuiteStats />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `passed` | `number` | `0` | Number of passed tests. |
+| `failed` | `number` | `0` | Number of failed tests. |
+| `skipped` | `number` | `0` | Number of skipped tests. |
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Any other props are spread to the div element. |
+
+### `<TestSuiteContent />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.ComponentProps<typeof CollapsibleContent>` | - | Any other props are spread to the CollapsibleContent component. |
+
+### `<TestStatus />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.HTMLAttributes<HTMLSpanElement>` | - | Any other props are spread to the span element. |
+
+### `<TestName />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.HTMLAttributes<HTMLSpanElement>` | - | Any other props are spread to the span element. |
+
+### `<TestDuration />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.HTMLAttributes<HTMLSpanElement>` | - | Any other props are spread to the span element. |
+
+### `<TestError />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Any other props are spread to the div element. |
+
+### `<TestErrorMessage />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.HTMLAttributes<HTMLParagraphElement>` | - | Any other props are spread to the p element. |
+
+### `<TestErrorStack />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.HTMLAttributes<HTMLPreElement>` | - | Any other props are spread to the pre element. |