zilmate 1.7.8 → 1.8.0

package/.agents/skills/ai-elements/references/code-block.md

@@ -0,0 +1,170 @@
+# Code Block
+
+Provides syntax highlighting, line numbers, and copy to clipboard functionality for code blocks.
+
+The `CodeBlock` component provides syntax highlighting, line numbers, and copy to clipboard functionality for code blocks. It's fully composable, allowing you to customize the header, actions, and content.
+
+See `scripts/code-block.tsx` for this example.
+
+## Installation
+
+```bash
+npx ai-elements@latest add code-block
+```
+
+## Usage
+
+The CodeBlock is fully composable. Here's a basic example:
+
+```tsx
+import {
+  CodeBlock,
+  CodeBlockActions,
+  CodeBlockCopyButton,
+  CodeBlockFilename,
+  CodeBlockHeader,
+  CodeBlockTitle,
+} from "@/components/ai-elements/code-block";
+import { FileIcon } from "lucide-react";
+
+export const Example = () => (
+  <CodeBlock code={code} language="typescript">
+    <CodeBlockHeader>
+      <CodeBlockTitle>
+        <FileIcon size={14} />
+        <CodeBlockFilename>example.ts</CodeBlockFilename>
+      </CodeBlockTitle>
+      <CodeBlockActions>
+        <CodeBlockCopyButton />
+      </CodeBlockActions>
+    </CodeBlockHeader>
+  </CodeBlock>
+);
+```
+
+## Features
+
+- Syntax highlighting with Shiki
+- Line numbers (optional)
+- Copy to clipboard functionality
+- Automatic light/dark theme switching via CSS variables
+- Language selector for multi-language examples
+- Fully composable architecture
+- Accessible design
+
+## Examples
+
+### Dark Mode
+
+To use the `CodeBlock` component in dark mode, wrap it in a `div` with the `dark` class.
+
+See `scripts/code-block-dark.tsx` for this example.
+
+### Language Selector
+
+Add a language selector to switch between different code implementations:
+
+See `scripts/code-block.tsx` for this example.
+
+## Props
+
+### `<CodeBlock />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `code` | `string` | - | The code content to display. |
+| `language` | `BundledLanguage` | - | The programming language for syntax highlighting. |
+| `showLineNumbers` | `boolean` | `false` | Whether to show line numbers. |
+| `children` | `React.ReactNode` | - | Child elements like CodeBlockHeader. |
+| `className` | `string` | - | Additional CSS classes. |
+
+### `<CodeBlockHeader />`
+
+Container for the header row. Uses flexbox with `justify-between`.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `React.ReactNode` | - | Header content (CodeBlockTitle, CodeBlockActions, etc.). |
+| `className` | `string` | - | Additional CSS classes. |
+
+### `<CodeBlockTitle />`
+
+Left-aligned container for icon and filename. Uses flexbox with `gap-2`.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `React.ReactNode` | - | Title content (icon, CodeBlockFilename, etc.). |
+| `className` | `string` | - | Additional CSS classes. |
+
+### `<CodeBlockFilename />`
+
+Displays the filename in monospace font.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `React.ReactNode` | - | The filename to display. |
+| `className` | `string` | - | Additional CSS classes. |
+
+### `<CodeBlockActions />`
+
+Right-aligned container for action buttons. Uses flexbox with `gap-2`.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `React.ReactNode` | - | Action buttons (CodeBlockCopyButton, CodeBlockLanguageSelector, etc.). |
+| `className` | `string` | - | Additional CSS classes. |
+
+### `<CodeBlockCopyButton />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `onCopy` | `() => void` | - | Callback fired after a successful copy. |
+| `onError` | `(error: Error) => void` | - | Callback fired if copying fails. |
+| `timeout` | `number` | `2000` | How long to show the copied state (ms). |
+| `children` | `React.ReactNode` | - | Custom content for the button. Defaults to copy/check icons. |
+| `className` | `string` | - | Additional CSS classes. |
+
+### `<CodeBlockLanguageSelector />`
+
+Wrapper for the language selector. Extends shadcn/ui Select.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `string` | - | The currently selected language. |
+| `onValueChange` | `(value: string) => void` | - | Callback when the language changes. |
+| `children` | `React.ReactNode` | - | Selector components (Trigger, Content, Items). |
+
+### `<CodeBlockLanguageSelectorTrigger />`
+
+Trigger button for the language selector dropdown. Pre-styled for code block header.
+
+### `<CodeBlockLanguageSelectorValue />`
+
+Displays the selected language value.
+
+### `<CodeBlockLanguageSelectorContent />`
+
+Dropdown content container. Defaults to `align="end"`.
+
+### `<CodeBlockLanguageSelectorItem />`
+
+Individual language option in the dropdown.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `string` | - | The language value. |
+| `children` | `React.ReactNode` | - | The display label. |
+
+### `<CodeBlockContainer />`
+
+Low-level container component with performance optimizations (`contentVisibility`). Used internally by CodeBlock.
+
+### `<CodeBlockContent />`
+
+Low-level component that handles syntax highlighting. Used internally by CodeBlock, but can be used directly for custom layouts.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `code` | `string` | - | The code content to display. |
+| `language` | `BundledLanguage` | - | The programming language for syntax highlighting. |
+| `showLineNumbers` | `boolean` | `false` | Whether to show line numbers. |

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

@@ -0,0 +1,177 @@
+# Commit
+
+Display commit information with hash, message, author, and file changes.
+
+The `Commit` component displays commit details including hash, message, author, timestamp, and changed files.
+
+See `scripts/commit.tsx` for this example.
+
+## Installation
+
+```bash
+npx ai-elements@latest add commit
+```
+
+## Features
+
+- Commit hash display with copy button
+- Author avatar with initials
+- Relative timestamp formatting
+- Collapsible file changes list
+- Color-coded file status (added/modified/deleted/renamed)
+- Line additions/deletions count
+
+## File Status
+
+| Status     | Label | Color  |
+| ---------- | ----- | ------ |
+| `added`    | A     | Green  |
+| `modified` | M     | Yellow |
+| `deleted`  | D     | Red    |
+| `renamed`  | R     | Blue   |
+
+## Props
+
+### `<Commit />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.ComponentProps<typeof Collapsible>` | - | Spread to the Collapsible component. |
+
+### `<CommitHeader />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.ComponentProps<typeof CollapsibleTrigger>` | - | Spread to the CollapsibleTrigger component. |
+
+### `<CommitAuthor />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Spread to the container div. |
+
+### `<CommitAuthorAvatar />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `initials` | `string` | Required | Author initials to display. |
+| `...props` | `React.ComponentProps<typeof Avatar>` | - | Spread to the Avatar component. |
+
+### `<CommitInfo />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Spread to the container div. |
+
+### `<CommitMessage />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.HTMLAttributes<HTMLSpanElement>` | - | Spread to the span element. |
+
+### `<CommitMetadata />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Spread to the container div. |
+
+### `<CommitHash />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.HTMLAttributes<HTMLSpanElement>` | - | Spread to the span element. |
+
+### `<CommitSeparator />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `React.ReactNode` | - | Custom separator content. |
+| `...props` | `React.HTMLAttributes<HTMLSpanElement>` | - | Spread to the span element. |
+
+### `<CommitTimestamp />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `date` | `Date` | Required | Commit date. |
+| `children` | `React.ReactNode` | - | Custom timestamp content. Defaults to relative time. |
+| `...props` | `React.HTMLAttributes<HTMLTimeElement>` | - | Spread to the time element. |
+
+### `<CommitActions />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Spread to the container div. |
+
+### `<CommitCopyButton />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `hash` | `string` | Required | Commit hash to copy. |
+| `onCopy` | `() => void` | - | Callback after successful copy. |
+| `onError` | `(error: Error) => void` | - | Callback if copying fails. |
+| `timeout` | `number` | `2000` | Duration to show copied state (ms). |
+| `...props` | `React.ComponentProps<typeof Button>` | - | Spread to the Button component. |
+
+### `<CommitContent />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.ComponentProps<typeof CollapsibleContent>` | - | Spread to the CollapsibleContent component. |
+
+### `<CommitFiles />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Spread to the container div. |
+
+### `<CommitFile />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Spread to the row div. |
+
+### `<CommitFileInfo />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Spread to the container div. |
+
+### `<CommitFileStatus />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `status` | `unknown` | Required | File change status. |
+| `children` | `React.ReactNode` | - | Custom status label. |
+| `...props` | `React.HTMLAttributes<HTMLSpanElement>` | - | Spread to the span element. |
+
+### `<CommitFileIcon />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.ComponentProps<typeof FileIcon>` | - | Spread to the FileIcon component. |
+
+### `<CommitFilePath />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.HTMLAttributes<HTMLSpanElement>` | - | Spread to the span element. |
+
+### `<CommitFileChanges />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Spread to the container div. |
+
+### `<CommitFileAdditions />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `count` | `number` | Required | Number of lines added. |
+| `...props` | `React.HTMLAttributes<HTMLSpanElement>` | - | Spread to the span element. |
+
+### `<CommitFileDeletions />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `count` | `number` | Required | Number of lines deleted. |
+| `...props` | `React.HTMLAttributes<HTMLSpanElement>` | - | Spread to the span element. |

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

@@ -0,0 +1,262 @@
+# Confirmation
+
+An alert-based component for managing tool execution approval workflows with request, accept, and reject states.
+
+The `Confirmation` component provides a flexible system for displaying tool approval requests and their outcomes. Perfect for showing users when AI tools require approval before execution, and displaying the approval status afterward.
+
+See `scripts/confirmation.tsx` for this example.
+
+## Installation
+
+```bash
+npx ai-elements@latest add confirmation
+```
+
+## Usage with AI SDK
+
+Build a chat UI with tool approval workflow where dangerous tools require user confirmation before execution.
+
+Add the following component to your frontend:
+
+```tsx title="app/page.tsx"
+"use client";
+
+import { useChat } from "@ai-sdk/react";
+import { DefaultChatTransport, type ToolUIPart } from "ai";
+import { useState } from "react";
+import { CheckIcon, XIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Confirmation,
+  ConfirmationTitle,
+  ConfirmationRequest,
+  ConfirmationAccepted,
+  ConfirmationRejected,
+  ConfirmationActions,
+  ConfirmationAction,
+} from "@/components/ai-elements/confirmation";
+import { MessageResponse } from "@/components/ai-elements/message";
+
+type DeleteFileInput = {
+  filePath: string;
+  confirm: boolean;
+};
+
+type DeleteFileToolUIPart = ToolUIPart<{
+  delete_file: {
+    input: DeleteFileInput;
+    output: { success: boolean; message: string };
+  };
+}>;
+
+const Example = () => {
+  const { messages, sendMessage, status, addToolApprovalResponse } = useChat({
+    transport: new DefaultChatTransport({
+      api: "/api/chat",
+    }),
+  });
+
+  const handleDeleteFile = () => {
+    sendMessage({ text: "Delete the file at /tmp/example.txt" });
+  };
+
+  const latestMessage = messages[messages.length - 1];
+  const deleteTool = latestMessage?.parts?.find(
+    (part) => part.type === "tool-delete_file"
+  ) as DeleteFileToolUIPart | undefined;
+
+  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 space-y-4">
+        <Button onClick={handleDeleteFile} disabled={status !== "ready"}>
+          Delete Example File
+        </Button>
+
+        {deleteTool?.approval && (
+          <Confirmation approval={deleteTool.approval} state={deleteTool.state}>
+            <ConfirmationRequest>
+              This tool wants to delete:{" "}
+              <code>{deleteTool.input?.filePath}</code>
+              <br />
+              Do you approve this action?
+            </ConfirmationRequest>
+            <ConfirmationAccepted>
+              <CheckIcon className="size-4" />
+              <span>You approved this tool execution</span>
+            </ConfirmationAccepted>
+            <ConfirmationRejected>
+              <XIcon className="size-4" />
+              <span>You rejected this tool execution</span>
+            </ConfirmationRejected>
+            <ConfirmationActions>
+              <ConfirmationAction
+                variant="outline"
+                onClick={() =>
+                  addToolApprovalResponse({
+                    id: deleteTool.approval!.id,
+                    approved: false,
+                  })
+                }
+              >
+                Reject
+              </ConfirmationAction>
+              <ConfirmationAction
+                variant="default"
+                onClick={() =>
+                  addToolApprovalResponse({
+                    id: deleteTool.approval!.id,
+                    approved: true,
+                  })
+                }
+              >
+                Approve
+              </ConfirmationAction>
+            </ConfirmationActions>
+          </Confirmation>
+        )}
+
+        {deleteTool?.output && (
+          <MessageResponse>
+            {deleteTool.output.success
+              ? deleteTool.output.message
+              : `Error: ${deleteTool.output.message}`}
+          </MessageResponse>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Example;
+```
+
+Add the following route to your backend:
+
+```ts title="app/api/chat/route.tsx"
+import { streamText, UIMessage, convertToModelMessages } from "ai";
+import { z } from "zod";
+
+// Allow streaming responses up to 30 seconds
+export const maxDuration = 30;
+
+export async function POST(req: Request) {
+  const { messages }: { messages: UIMessage[] } = await req.json();
+
+  const result = streamText({
+    model: "openai/gpt-4o",
+    messages: await convertToModelMessages(messages),
+    tools: {
+      delete_file: {
+        description: "Delete a file from the file system",
+        parameters: z.object({
+          filePath: z.string().describe("The path to the file to delete"),
+          confirm: z
+            .boolean()
+            .default(false)
+            .describe("Confirmation that the user wants to delete the file"),
+        }),
+        requireApproval: true, // Enable approval workflow
+        execute: async ({ filePath, confirm }) => {
+          if (!confirm) {
+            return {
+              success: false,
+              message: "Deletion not confirmed",
+            };
+          }
+
+          // Simulate file deletion
+          await new Promise((resolve) => setTimeout(resolve, 500));
+
+          return {
+            success: true,
+            message: `Successfully deleted ${filePath}`,
+          };
+        },
+      },
+    },
+  });
+
+  return result.toUIMessageStreamResponse();
+}
+```
+
+## Features
+
+- Context-based state management for approval workflow
+- Conditional rendering based on approval state
+- Support for approval-requested, approval-responded, output-denied, and output-available states
+- Built on shadcn/ui Alert and Button components
+- TypeScript support with comprehensive type definitions
+- Customizable styling with Tailwind CSS
+- Keyboard navigation and accessibility support
+- Theme-aware with automatic dark mode support
+
+## Examples
+
+### Approval Request State
+
+Shows the approval request with action buttons when state is `approval-requested`.
+
+See `scripts/confirmation-request.tsx` for this example.
+
+### Approved State
+
+Shows the accepted status when user approves and state is `approval-responded` or `output-available`.
+
+See `scripts/confirmation-accepted.tsx` for this example.
+
+### Rejected State
+
+Shows the rejected status when user rejects and state is `output-denied`.
+
+See `scripts/confirmation-rejected.tsx` for this example.
+
+## Props
+
+### `<Confirmation />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `approval` | `ToolUIPart[` | - | The approval object containing the approval ID and status. If not provided or undefined, the component will not render. |
+| `state` | `ToolUIPart[` | - | The current state of the tool (input-streaming, input-available, approval-requested, approval-responded, output-denied, or output-available). Will not render for input-streaming or input-available states. |
+| `className` | `string` | - | Additional CSS classes to apply to the Alert component. |
+| `...props` | `React.ComponentProps<typeof Alert>` | - | Any other props are spread to the Alert component. |
+
+### `<ConfirmationTitle />`
+
+A styled description element for displaying a title or label within the confirmation alert.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.ComponentProps<typeof AlertDescription>` | - | Any other props are spread to the underlying AlertDescription component. |
+
+### `<ConfirmationRequest />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `React.ReactNode` | - | The content to display when approval is requested. Only renders when state is  |
+
+### `<ConfirmationAccepted />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `React.ReactNode` | - | The content to display when approval is accepted. Only renders when approval.approved is true and state is  |
+
+### `<ConfirmationRejected />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `React.ReactNode` | - | The content to display when approval is rejected. Only renders when approval.approved is false and state is  |
+
+### `<ConfirmationActions />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | - | Additional CSS classes to apply to the actions container. |
+| `...props` | `React.ComponentProps<` | - | Any other props are spread to the div element. Only renders when state is  |
+
+### `<ConfirmationAction />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.ComponentProps<typeof Button>` | - | Any other props are spread to the Button component. Styled with h-8 px-3 text-sm classes by default. |

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

@@ -0,0 +1,34 @@
+# Connection
+
+A custom connection line component for React Flow-based canvases with animated bezier curve styling.
+
+The `Connection` component provides a styled connection line for React Flow canvases. It renders an animated bezier curve with a circle indicator at the target end, using consistent theming through CSS variables.
+
+
+
+## Installation
+
+```bash
+npx ai-elements@latest add connection
+```
+
+## Features
+
+- Smooth bezier curve animation for connection lines
+- Visual indicator circle at the target position
+- Theme-aware styling using CSS variables
+- Cubic bezier curve calculation for natural flow
+- Lightweight implementation with minimal props
+- Full TypeScript support with React Flow types
+- Compatible with React Flow's connection system
+
+## Props
+
+### `<Connection />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `fromX` | `number` | - | The x-coordinate of the connection start point. |
+| `fromY` | `number` | - | The y-coordinate of the connection start point. |
+| `toX` | `number` | - | The x-coordinate of the connection end point. |
+| `toY` | `number` | - | The y-coordinate of the connection end point. |