From 7e5ca7a445cb82478a60899519d8dc3c1bdea02b Mon Sep 17 00:00:00 2001 From: changbaebang Date: Sat, 19 Sep 2026 18:05:15 +0900 Subject: [PATCH 1/2] fix skill TypeTable generation --- packages/scripts/package.json | 6 +- packages/scripts/src/generate-skills.ts | 78 +-------------- packages/scripts/src/type-table.test.ts | 80 ++++++++++++++++ packages/scripts/src/type-table.ts | 120 ++++++++++++++++++++++++ pnpm-lock.yaml | 3 + 5 files changed, 209 insertions(+), 78 deletions(-) create mode 100644 packages/scripts/src/type-table.test.ts create mode 100644 packages/scripts/src/type-table.ts diff --git a/packages/scripts/package.json b/packages/scripts/package.json index 1f08954b..2bf14afe 100644 --- a/packages/scripts/package.json +++ b/packages/scripts/package.json @@ -4,7 +4,8 @@ "private": true, "type": "module", "scripts": { - "generate-skills": "tsx src/generate-skills.ts" + "generate-skills": "tsx src/generate-skills.ts", + "test": "vitest run" }, "dependencies": { "gray-matter": "^4.0.3" @@ -13,6 +14,7 @@ "@repo/typescript-config": "workspace:*", "@types/node": "^25.3.5", "tsx": "^4.19.0", - "typescript": "5.9.3" + "typescript": "5.9.3", + "vitest": "^4.0.17" } } diff --git a/packages/scripts/src/generate-skills.ts b/packages/scripts/src/generate-skills.ts index 9c41dc38..24b4ba01 100644 --- a/packages/scripts/src/generate-skills.ts +++ b/packages/scripts/src/generate-skills.ts @@ -1,3 +1,4 @@ +import matter from "gray-matter"; // Node.js script - Node.js modules are valid here // oxlint-disable-next-line eslint-plugin-import(no-nodejs-modules) import { existsSync, mkdirSync, rmSync } from "node:fs"; @@ -6,7 +7,7 @@ import { readdir, readFile, writeFile } from "node:fs/promises"; // oxlint-disable-next-line eslint-plugin-import(no-nodejs-modules) import { basename, join } from "node:path"; -import matter from "gray-matter"; +import { replaceTypeTables } from "./type-table.js"; const ROOT_DIR = join(import.meta.dirname, "../../.."); const CONTENT_DIR = join(ROOT_DIR, "apps/docs/content"); @@ -44,81 +45,6 @@ const replaceInstaller = (content: string): string => `\`\`\`bash\nnpx ai-elements@latest add ${component}\n\`\`\`` ); -const PROP_REGEX = /['"]?([^'":\s]+)['"]?\s*:\s*\{([^}]+)\}/g; -const DESC_REGEX = /description:\s*['"]([^'"]+)['"]/; -const TYPE_REGEX = /type:\s*['"]([^'"]+)['"]/; -const DEFAULT_REGEX = /default:\s*['"]([^'"]+)['"]/; -const REQUIRED_REGEX = /required:\s*true/; - -const parseTypeTableProps = ( - typeContent: string -): { - name: string; - type: string; - description: string; - required?: boolean; - default?: string; -}[] => { - const props: { - name: string; - type: string; - description: string; - required?: boolean; - default?: string; - }[] = []; - - const matches = typeContent.matchAll(PROP_REGEX); - - for (const match of matches) { - const [, propName, propBody] = match; - - const descMatch = propBody.match(DESC_REGEX); - const typeMatch = propBody.match(TYPE_REGEX); - const defaultMatch = propBody.match(DEFAULT_REGEX); - const requiredMatch = propBody.match(REQUIRED_REGEX); - - props.push({ - default: defaultMatch?.[1], - description: descMatch?.[1] || "", - name: propName, - required: !!requiredMatch, - type: typeMatch?.[1] || "unknown", - }); - } - - return props; -}; - -const replaceTypeTables = (content: string): string => { - const typeTableRegex = //g; - - return content.replace(typeTableRegex, (_, typeContent) => { - const props = parseTypeTableProps(typeContent); - - if (props.length === 0) { - return ""; - } - - const rows = props.map((prop) => { - const name = `\`${prop.name}\``; - const type = `\`${prop.type}\``; - let defaultVal = "-"; - if (prop.required) { - defaultVal = "Required"; - } else if (prop.default) { - defaultVal = `\`${prop.default}\``; - } - return `| ${name} | ${type} | ${defaultVal} | ${prop.description} |`; - }); - - return [ - "| Prop | Type | Default | Description |", - "|------|------|---------|-------------|", - ...rows, - ].join("\n"); - }); -}; - const removeCallouts = (content: string): string => content.replaceAll(/]*>[\s\S]*?<\/Callout>/g, ""); diff --git a/packages/scripts/src/type-table.test.ts b/packages/scripts/src/type-table.test.ts new file mode 100644 index 00000000..f5c04a9e --- /dev/null +++ b/packages/scripts/src/type-table.test.ts @@ -0,0 +1,80 @@ +import { describe, expect, it } from "vitest"; + +import { parseTypeTableProps, replaceTypeTables } from "./type-table.js"; + +describe("type table prop parsing", () => { + it("preserves quoted unions, indexed access types, and object defaults", () => { + const props = parseTypeTableProps(` + selectionMode: { + description: "Whether one or many choices can be selected.", + type: '"single" | "multiple"', + default: '"single"', + }, + onLoad: { + description: "Called when loading starts.", + type: 'RiveParameters["onLoad"]', + }, + defaultValue: { + description: "The initial draft.", + type: "QuestionValue", + default: '{ selectedValues: [], text: "" }', + }, + `); + + expect(props).toStrictEqual([ + { + default: '"single"', + description: "Whether one or many choices can be selected.", + name: "selectionMode", + type: '"single" | "multiple"', + }, + { + description: "Called when loading starts.", + name: "onLoad", + type: 'RiveParameters["onLoad"]', + }, + { + default: '{ selectedValues: [], text: "" }', + description: "The initial draft.", + name: "defaultValue", + type: "QuestionValue", + }, + ]); + }); + + it("preserves required props and quoted property names", () => { + const props = parseTypeTableProps(` + "...props": { + description: "Props forwarded to the input.", + type: 'Omit, "value">', + required: true, + }, + `); + + expect(props).toStrictEqual([ + { + description: "Props forwarded to the input.", + name: "...props", + required: true, + type: 'Omit, "value">', + }, + ]); + }); +}); + +describe("type table Markdown replacement", () => { + it("escapes union separators in Markdown tables", () => { + const content = ``; + + expect(replaceTypeTables(content)).toContain( + '| `mode` | `"single" \\| "multiple"` | - | Choose one \\| or many. |' + ); + }); +}); diff --git a/packages/scripts/src/type-table.ts b/packages/scripts/src/type-table.ts new file mode 100644 index 00000000..9933579b --- /dev/null +++ b/packages/scripts/src/type-table.ts @@ -0,0 +1,120 @@ +import ts from "typescript"; + +export interface TypeTableProp { + name: string; + type: string; + description: string; + required?: boolean; + default?: string; +} + +const getPropertyName = (name: ts.PropertyName): string | undefined => { + if ( + ts.isIdentifier(name) || + ts.isStringLiteral(name) || + ts.isNumericLiteral(name) + ) { + return name.text; + } + + return undefined; +}; + +const getStringValue = (expression: ts.Expression): string | undefined => { + if ( + ts.isStringLiteral(expression) || + ts.isNoSubstitutionTemplateLiteral(expression) + ) { + return expression.text; + } + + return undefined; +}; + +export const parseTypeTableProps = (typeContent: string): TypeTableProp[] => { + const sourceFile = ts.createSourceFile( + "type-table.ts", + `const typeTable = {${typeContent}};`, + ts.ScriptTarget.Latest, + false, + ts.ScriptKind.TS + ); + const statement = sourceFile.statements.find(ts.isVariableStatement); + const initializer = statement?.declarationList.declarations[0]?.initializer; + + if (!initializer || !ts.isObjectLiteralExpression(initializer)) { + return []; + } + + return initializer.properties.flatMap((property) => { + if ( + !ts.isPropertyAssignment(property) || + !ts.isObjectLiteralExpression(property.initializer) + ) { + return []; + } + + const name = getPropertyName(property.name); + if (!name) { + return []; + } + + const prop: TypeTableProp = { + description: "", + name, + type: "unknown", + }; + + for (const field of property.initializer.properties) { + if (!ts.isPropertyAssignment(field)) { + continue; + } + + const fieldName = getPropertyName(field.name); + if (fieldName === "description") { + prop.description = getStringValue(field.initializer) ?? ""; + } else if (fieldName === "type") { + prop.type = getStringValue(field.initializer) ?? "unknown"; + } else if (fieldName === "default") { + prop.default = getStringValue(field.initializer); + } else if (fieldName === "required") { + prop.required = field.initializer.kind === ts.SyntaxKind.TrueKeyword; + } + } + + return [prop]; + }); +}; + +const escapeTableCell = (value: string): string => + value.replaceAll("|", "\\|").replaceAll(/\r?\n/g, " "); + +export const replaceTypeTables = (content: string): string => { + const typeTableRegex = //g; + + return content.replace(typeTableRegex, (_, typeContent: string) => { + const props = parseTypeTableProps(typeContent); + + if (props.length === 0) { + return ""; + } + + const rows = props.map((prop) => { + const name = `\`${escapeTableCell(prop.name)}\``; + const type = `\`${escapeTableCell(prop.type)}\``; + let defaultValue = "-"; + if (prop.required) { + defaultValue = "Required"; + } else if (prop.default) { + defaultValue = `\`${escapeTableCell(prop.default)}\``; + } + return `| ${name} | ${type} | ${defaultValue} | ${escapeTableCell(prop.description)} |`; + }); + + return [ + "| Prop | Type | Default | Description |", + "|------|------|---------|-------------|", + ...rows, + ].join("\n"); + }); +}; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 72f6300c..8f92f11c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -383,6 +383,9 @@ importers: typescript: specifier: 5.9.3 version: 5.9.3 + vitest: + specifier: ^4.0.17 + version: 4.0.17(@opentelemetry/api@1.9.0)(@types/node@25.3.5)(@vitest/browser-playwright@4.0.17)(@vitest/browser-preview@4.0.17)(happy-dom@20.0.8)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.30.2)(msw@2.12.7(@types/node@25.3.5)(typescript@5.9.3))(tsx@4.21.0)(yaml@2.8.1) packages/shadcn-ui: dependencies: From 719fe9aa12e9d4cde4922fecc104e21e8a273d1f Mon Sep 17 00:00:00 2001 From: changbaebang Date: Sat, 19 Sep 2026 18:05:22 +0900 Subject: [PATCH 2/2] docs regenerate AI Elements skill references --- skills/ai-elements/references/agent.md | 12 +- skills/ai-elements/references/attachments.md | 8 +- skills/ai-elements/references/audio-player.md | 6 +- .../references/chain-of-thought.md | 12 +- skills/ai-elements/references/checkpoint.md | 4 +- skills/ai-elements/references/commit.md | 4 +- skills/ai-elements/references/confirmation.md | 12 +- skills/ai-elements/references/context.md | 2 +- skills/ai-elements/references/conversation.md | 18 +-- .../references/environment-variables.md | 6 +- .../ai-elements/references/inline-citation.md | 22 +-- skills/ai-elements/references/jsx-preview.md | 10 +- skills/ai-elements/references/message.md | 8 +- skills/ai-elements/references/mic-selector.md | 10 +- .../ai-elements/references/model-selector.md | 10 +- skills/ai-elements/references/node.md | 2 +- skills/ai-elements/references/open-in-chat.md | 2 +- skills/ai-elements/references/package-info.md | 2 +- skills/ai-elements/references/panel.md | 2 +- skills/ai-elements/references/persona.md | 14 +- skills/ai-elements/references/plan.md | 6 +- skills/ai-elements/references/prompt-input.md | 14 +- skills/ai-elements/references/question.md | 151 ++++++++++++++++++ skills/ai-elements/references/queue.md | 24 +-- skills/ai-elements/references/reasoning.md | 2 +- skills/ai-elements/references/sandbox.md | 2 +- .../ai-elements/references/schema-display.md | 2 +- skills/ai-elements/references/shimmer.md | 2 +- skills/ai-elements/references/snippet.md | 2 +- skills/ai-elements/references/speech-input.md | 2 +- skills/ai-elements/references/stack-trace.md | 2 +- skills/ai-elements/references/suggestion.md | 2 +- skills/ai-elements/references/task.md | 4 +- skills/ai-elements/references/test-results.md | 6 +- skills/ai-elements/references/tool.md | 14 +- .../ai-elements/references/transcription.md | 4 +- .../ai-elements/references/voice-selector.md | 28 ++-- skills/ai-elements/references/web-preview.md | 4 +- .../ai-elements/scripts/question-freeform.tsx | 46 ++++++ .../scripts/question-multi-select.tsx | 53 ++++++ .../scripts/question-single-select.tsx | 49 ++++++ skills/ai-elements/scripts/question.tsx | 60 +++++++ 42 files changed, 502 insertions(+), 143 deletions(-) create mode 100644 skills/ai-elements/references/question.md create mode 100644 skills/ai-elements/scripts/question-freeform.tsx create mode 100644 skills/ai-elements/scripts/question-multi-select.tsx create mode 100644 skills/ai-elements/scripts/question-single-select.tsx create mode 100644 skills/ai-elements/scripts/question.tsx diff --git a/skills/ai-elements/references/agent.md b/skills/ai-elements/references/agent.md index c2e09f91..b89c0ca4 100644 --- a/skills/ai-elements/references/agent.md +++ b/skills/ai-elements/references/agent.md @@ -89,28 +89,28 @@ export default function Page() { | Prop | Type | Default | Description | |------|------|---------|-------------| -| `...props` | `React.ComponentProps<` | - | Any props are spread to the root div. | +| `...props` | `React.ComponentProps<"div">` | - | Any props are spread to the root div. | ### `` | Prop | Type | Default | Description | |------|------|---------|-------------| | `name` | `string` | Required | The name of the agent. | -| `model` | `string` | - | The model identifier (e.g. | -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the container div. | +| `model` | `string` | - | The model identifier (e.g. "anthropic/claude-sonnet-4-5"). | +| `...props` | `React.ComponentProps<"div">` | - | Any other props are spread to the container div. | ### `` | Prop | Type | Default | Description | |------|------|---------|-------------| -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the container div. | +| `...props` | `React.ComponentProps<"div">` | - | Any other props are spread to the container div. | ### `` | Prop | Type | Default | Description | |------|------|---------|-------------| | `children` | `string` | Required | The instruction text. | -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the container div. | +| `...props` | `React.ComponentProps<"div">` | - | Any other props are spread to the container div. | ### `` @@ -131,4 +131,4 @@ export default function Page() { | Prop | Type | Default | Description | |------|------|---------|-------------| | `schema` | `string` | Required | The output schema as a string (displayed with syntax highlighting). | -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the container div. | +| `...props` | `React.ComponentProps<"div">` | - | Any other props are spread to the container div. | diff --git a/skills/ai-elements/references/attachments.md b/skills/ai-elements/references/attachments.md index 213e248e..d367f371 100644 --- a/skills/ai-elements/references/attachments.md +++ b/skills/ai-elements/references/attachments.md @@ -90,7 +90,7 @@ Container component that sets the layout variant. | Prop | Type | Default | Description | |------|------|---------|-------------| -| `variant` | `unknown` | - | The display layout variant. | +| `variant` | `"grid" \| "inline" \| "list"` | `"grid"` | The display layout variant. | | `...props` | `React.HTMLAttributes` | - | Spread to the underlying div element. | ### `` @@ -99,7 +99,7 @@ Individual attachment item wrapper. | Prop | Type | Default | Description | |------|------|---------|-------------| -| `data` | `unknown` | - | The attachment data (FileUIPart or SourceDocumentUIPart with id). | +| `data` | `(FileUIPart & { id: string }) \| (SourceDocumentUIPart & { id: string })` | - | The attachment data (FileUIPart or SourceDocumentUIPart with id). | | `onRemove` | `() => void` | - | Callback fired when the remove button is clicked. | | `...props` | `React.HTMLAttributes` | - | Spread to the underlying div element. | @@ -127,7 +127,7 @@ Remove button that appears on hover. | Prop | Type | Default | Description | |------|------|---------|-------------| -| `label` | `string` | - | Screen reader label for the button. | +| `label` | `string` | `"Remove"` | Screen reader label for the button. | | `...props` | `React.ComponentProps` | - | Spread to the underlying Button component. | ### `` @@ -154,7 +154,7 @@ Content displayed in the hover card. | Prop | Type | Default | Description | |------|------|---------|-------------| -| `align` | `unknown` | - | Alignment of the hover card content. | +| `align` | `"start" \| "center" \| "end"` | `"start"` | Alignment of the hover card content. | | `...props` | `React.ComponentProps` | - | Spread to the underlying HoverCardContent component. | ### `` diff --git a/skills/ai-elements/references/audio-player.md b/skills/ai-elements/references/audio-player.md index 2bd7b944..df2cc6e6 100644 --- a/skills/ai-elements/references/audio-player.md +++ b/skills/ai-elements/references/audio-player.md @@ -47,7 +47,7 @@ Root MediaController component. Accepts all MediaController props except `audio` | Prop | Type | Default | Description | |------|------|---------|-------------| | `style` | `CSSProperties` | - | Custom CSS properties can be passed to override media-chrome theming variables. | -| `...props` | `Omit, ` | - | Any other props are spread to the MediaController component. | +| `...props` | `Omit, "audio">` | - | Any other props are spread to the MediaController component. | ### `` @@ -56,8 +56,8 @@ The audio element that contains the media source. Accepts either a remote URL or | Prop | Type | Default | Description | |------|------|---------|-------------| | `src` | `string` | - | The URL of the audio file to play (for remote audio). | -| `data` | `SpeechResult[` | - | AI SDK Speech Result audio data with base64 encoding (for AI-generated audio). | -| `...props` | `Omit, "src">` | - | Any other props are spread to the audio element (excluding src when using data). | ### `` diff --git a/skills/ai-elements/references/chain-of-thought.md b/skills/ai-elements/references/chain-of-thought.md index 84378164..b17af903 100644 --- a/skills/ai-elements/references/chain-of-thought.md +++ b/skills/ai-elements/references/chain-of-thought.md @@ -36,13 +36,13 @@ npx ai-elements@latest add chain-of-thought | `open` | `boolean` | - | Controlled open state of the collapsible. | | `defaultOpen` | `boolean` | `false` | Default open state when uncontrolled. | | `onOpenChange` | `(open: boolean) => void` | - | Callback when the open state changes. | -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the root div element. | +| `...props` | `React.ComponentProps<"div">` | - | Any other props are spread to the root div element. | ### `` | Prop | Type | Default | Description | |------|------|---------|-------------| -| `children` | `React.ReactNode` | - | Custom header text. | +| `children` | `React.ReactNode` | `"Chain of Thought"` | Custom header text. | | `...props` | `React.ComponentProps` | - | Any other props are spread to the CollapsibleTrigger component. | ### `` @@ -52,14 +52,14 @@ npx ai-elements@latest add chain-of-thought | `icon` | `LucideIcon` | `DotIcon` | Icon to display for the step. | | `label` | `string` | - | The main text label for the step. | | `description` | `string` | - | Optional description text shown below the label. | -| `status` | `unknown` | - | Visual status of the step. | -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the root div element. | +| `status` | `"complete" \| "active" \| "pending"` | `"complete"` | Visual status of the step. | +| `...props` | `React.ComponentProps<"div">` | - | Any other props are spread to the root div element. | ### `` | Prop | Type | Default | Description | |------|------|---------|-------------| -| `...props` | `React.ComponentProps<` | - | Any props are spread to the container div element. | +| `...props` | `React.ComponentProps<"div">` | - | Any props are spread to the container div element. | ### `` @@ -78,4 +78,4 @@ npx ai-elements@latest add chain-of-thought | Prop | Type | Default | Description | |------|------|---------|-------------| | `caption` | `string` | - | Optional caption text displayed below the image. | -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the container div element. | +| `...props` | `React.ComponentProps<"div">` | - | Any other props are spread to the container div element. | diff --git a/skills/ai-elements/references/checkpoint.md b/skills/ai-elements/references/checkpoint.md index 11c110cc..3bd35700 100644 --- a/skills/ai-elements/references/checkpoint.md +++ b/skills/ai-elements/references/checkpoint.md @@ -178,6 +178,6 @@ const restoreAndBranch = (messageIndex: number) => { |------|------|---------|-------------| | `children` | `React.ReactNode` | - | The text or content to display in the trigger button. | | `tooltip` | `string` | - | Optional tooltip text shown on hover. | -| `variant` | `string` | - | The button variant style. | -| `size` | `string` | - | The button size. | +| `variant` | `string` | `"ghost"` | The button variant style. | +| `size` | `string` | `"sm"` | The button size. | | `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying shadcn/ui Button component. | diff --git a/skills/ai-elements/references/commit.md b/skills/ai-elements/references/commit.md index 08de2c7c..16f5f760 100644 --- a/skills/ai-elements/references/commit.md +++ b/skills/ai-elements/references/commit.md @@ -85,7 +85,7 @@ npx ai-elements@latest add commit | Prop | Type | Default | Description | |------|------|---------|-------------| -| `children` | `React.ReactNode` | - | Custom separator content. | +| `children` | `React.ReactNode` | `"โ€ข"` | Custom separator content. | | `...props` | `React.HTMLAttributes` | - | Spread to the span element. | ### `` @@ -140,7 +140,7 @@ npx ai-elements@latest add commit | Prop | Type | Default | Description | |------|------|---------|-------------| -| `status` | `unknown` | Required | File change status. | +| `status` | `"added" \| "modified" \| "deleted" \| "renamed"` | Required | File change status. | | `children` | `React.ReactNode` | - | Custom status label. | | `...props` | `React.HTMLAttributes` | - | Spread to the span element. | diff --git a/skills/ai-elements/references/confirmation.md b/skills/ai-elements/references/confirmation.md index eb5b4e35..d63bd4ac 100644 --- a/skills/ai-elements/references/confirmation.md +++ b/skills/ai-elements/references/confirmation.md @@ -217,8 +217,8 @@ See `scripts/confirmation-rejected.tsx` for this example. | 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. | +| `approval` | `ToolUIPart["approval"]` | - | The approval object containing the approval ID and status. If not provided or undefined, the component will not render. | +| `state` | `ToolUIPart["state"]` | - | 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` | - | Any other props are spread to the Alert component. | @@ -234,26 +234,26 @@ A styled description element for displaying a title or label within the confirma | Prop | Type | Default | Description | |------|------|---------|-------------| -| `children` | `React.ReactNode` | - | The content to display when approval is requested. Only renders when state is | +| `children` | `React.ReactNode` | - | The content to display when approval is requested. Only renders when state is "approval-requested". | ### `` | 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 | +| `children` | `React.ReactNode` | - | The content to display when approval is accepted. Only renders when approval.approved is true and state is "approval-responded", "output-denied", or "output-available". | ### `` | 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 | +| `children` | `React.ReactNode` | - | The content to display when approval is rejected. Only renders when approval.approved is false and state is "approval-responded", "output-denied", or "output-available". | ### `` | 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 | +| `...props` | `React.ComponentProps<"div">` | - | Any other props are spread to the div element. Only renders when state is "approval-requested". | ### `` diff --git a/skills/ai-elements/references/context.md b/skills/ai-elements/references/context.md index 772bb23d..53bf8beb 100644 --- a/skills/ai-elements/references/context.md +++ b/skills/ai-elements/references/context.md @@ -34,7 +34,7 @@ npx ai-elements@latest add context | `maxTokens` | `number` | - | The total context window size in tokens. | | `usedTokens` | `number` | - | The number of tokens currently used. | | `usage` | `LanguageModelUsage` | - | Detailed token usage breakdown from the AI SDK (input, output, reasoning, cached tokens). | -| `modelId` | `ModelId` | - | Model identifier for cost calculation (e.g., | +| `modelId` | `ModelId` | - | Model identifier for cost calculation (e.g., "openai:gpt-4", "anthropic:claude-3-opus"). | | `...props` | `ComponentProps` | - | Any other props are spread to the HoverCard component. | ### `` diff --git a/skills/ai-elements/references/conversation.md b/skills/ai-elements/references/conversation.md index 4864ac01..22f6cbe0 100644 --- a/skills/ai-elements/references/conversation.md +++ b/skills/ai-elements/references/conversation.md @@ -154,25 +154,25 @@ export async function POST(req: Request) { |------|------|---------|-------------| | `contextRef` | `React.Ref` | - | Optional ref to access the StickToBottom context object. | | `instance` | `StickToBottomInstance` | - | Optional instance for controlling the StickToBottom component. | -| `children` | `((context: StickToBottomContext) => ReactNode) | ReactNode` | - | Render prop or ReactNode for custom rendering with context. | -| `...props` | `Omit, ` | - | Any other props are spread to the root div. | +| `children` | `((context: StickToBottomContext) => ReactNode) \| ReactNode` | - | Render prop or ReactNode for custom rendering with context. | +| `...props` | `Omit, "children">` | - | Any other props are spread to the root div. | ### `` | Prop | Type | Default | Description | |------|------|---------|-------------| -| `children` | `((context: StickToBottomContext) => ReactNode) | ReactNode` | - | Render prop or ReactNode for custom rendering with context. | -| `...props` | `Omit, ` | - | Any other props are spread to the root div. | +| `children` | `((context: StickToBottomContext) => ReactNode) \| ReactNode` | - | Render prop or ReactNode for custom rendering with context. | +| `...props` | `Omit, "children">` | - | Any other props are spread to the root div. | ### `` | Prop | Type | Default | Description | |------|------|---------|-------------| -| `title` | `string` | - | The title text to display. | -| `description` | `string` | - | The description text to display. | +| `title` | `string` | `"No messages yet"` | The title text to display. | +| `description` | `string` | `"Start a conversation to see messages here"` | The description text to display. | | `icon` | `React.ReactNode` | - | Optional icon to display above the text. | | `children` | `React.ReactNode` | - | Optional additional content to render below the text. | -| `...props` | `ComponentProps<` | - | Any other props are spread to the root div. | +| `...props` | `ComponentProps<"div">` | - | Any other props are spread to the root div. | ### `` @@ -199,9 +199,9 @@ import { ConversationDownload } from "@/components/ai-elements/conversation"; | Prop | Type | Default | Description | |------|------|---------|-------------| | `messages` | `UIMessage[]` | Required | Array of messages to include in the download. | -| `filename` | `string` | - | The filename for the downloaded file. | +| `filename` | `string` | `"conversation.md"` | The filename for the downloaded file. | | `formatMessage` | `(message: UIMessage, index: number) => string` | - | Custom function to format each message in the output. | -| `...props` | `Omit, ` | - | Any other props are spread to the underlying shadcn/ui Button component. | +| `...props` | `Omit, 'onClick'>` | - | Any other props are spread to the underlying shadcn/ui Button component. | ### `messagesToMarkdown` diff --git a/skills/ai-elements/references/environment-variables.md b/skills/ai-elements/references/environment-variables.md index bb2e472d..a9210638 100644 --- a/skills/ai-elements/references/environment-variables.md +++ b/skills/ai-elements/references/environment-variables.md @@ -41,7 +41,7 @@ npx ai-elements@latest add environment-variables | Prop | Type | Default | Description | |------|------|---------|-------------| -| `children` | `React.ReactNode` | - | Custom title text. | +| `children` | `React.ReactNode` | `"Environment Variables"` | Custom title text. | | `...props` | `React.HTMLAttributes` | - | Spread to the h3 element. | ### `` @@ -88,7 +88,7 @@ npx ai-elements@latest add environment-variables | Prop | Type | Default | Description | |------|------|---------|-------------| -| `copyFormat` | `unknown` | - | Format to copy. | +| `copyFormat` | `"name" \| "value" \| "export"` | `"value"` | Format 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). | @@ -98,5 +98,5 @@ npx ai-elements@latest add environment-variables | Prop | Type | Default | Description | |------|------|---------|-------------| -| `children` | `React.ReactNode` | - | Custom badge text. | +| `children` | `React.ReactNode` | `"Required"` | Custom badge text. | | `...props` | `React.ComponentProps` | - | Spread to the Badge component. | diff --git a/skills/ai-elements/references/inline-citation.md b/skills/ai-elements/references/inline-citation.md index 42861dc4..09c04cd8 100644 --- a/skills/ai-elements/references/inline-citation.md +++ b/skills/ai-elements/references/inline-citation.md @@ -214,32 +214,32 @@ For now, the recommended approach is to use `experimental_useObject` (as shown i | Prop | Type | Default | Description | |------|------|---------|-------------| -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the root span element. | +| `...props` | `React.ComponentProps<"span">` | - | Any other props are spread to the root span element. | ### `` | Prop | Type | Default | Description | |------|------|---------|-------------| -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the underlying span element. | +| `...props` | `React.ComponentProps<"span">` | - | Any other props are spread to the underlying span element. | ### `` | Prop | Type | Default | Description | |------|------|---------|-------------| -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the HoverCard component. | +| `...props` | `React.ComponentProps<"span">` | - | Any other props are spread to the HoverCard component. | ### `` | Prop | Type | Default | Description | |------|------|---------|-------------| | `sources` | `string[]` | - | Array of source URLs. The length determines the number displayed in the badge. | -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the underlying button element. | +| `...props` | `React.ComponentProps<"button">` | - | Any other props are spread to the underlying button element. | ### `` | Prop | Type | Default | Description | |------|------|---------|-------------| -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the underlying div. | +| `...props` | `React.ComponentProps<"div">` | - | Any other props are spread to the underlying div. | ### `` @@ -251,25 +251,25 @@ For now, the recommended approach is to use `experimental_useObject` (as shown i | Prop | Type | Default | Description | |------|------|---------|-------------| -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the underlying CarouselContent component. | +| `...props` | `React.ComponentProps<"div">` | - | Any other props are spread to the underlying CarouselContent component. | ### `` | Prop | Type | Default | Description | |------|------|---------|-------------| -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the underlying div. | +| `...props` | `React.ComponentProps<"div">` | - | Any other props are spread to the underlying div. | ### `` | Prop | Type | Default | Description | |------|------|---------|-------------| -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the underlying div. | +| `...props` | `React.ComponentProps<"div">` | - | Any other props are spread to the underlying div. | ### `` | Prop | Type | Default | Description | |------|------|---------|-------------| -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the underlying div. Children will override the default index display. | +| `...props` | `React.ComponentProps<"div">` | - | Any other props are spread to the underlying div. Children will override the default index display. | ### `` @@ -290,10 +290,10 @@ For now, the recommended approach is to use `experimental_useObject` (as shown i | `title` | `string` | - | The title of the source. | | `url` | `string` | - | The URL of the source. | | `description` | `string` | - | A brief description of the source. | -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the underlying div. | +| `...props` | `React.ComponentProps<"div">` | - | Any other props are spread to the underlying div. | ### `` | Prop | Type | Default | Description | |------|------|---------|-------------| -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the underlying blockquote element. | +| `...props` | `React.ComponentProps<"blockquote">` | - | Any other props are spread to the underlying blockquote element. | diff --git a/skills/ai-elements/references/jsx-preview.md b/skills/ai-elements/references/jsx-preview.md index ca0eb468..0beb5a64 100644 --- a/skills/ai-elements/references/jsx-preview.md +++ b/skills/ai-elements/references/jsx-preview.md @@ -87,18 +87,18 @@ export const GeneratedUIWithComponents = ({ jsx }: { jsx: string }) => ( | `components` | `Record` | - | Custom components available within the rendered JSX. | | `bindings` | `Record` | - | Variables and functions available within the JSX scope. | | `onError` | `(error: Error) => void` | - | Callback fired when a parsing or rendering error occurs. | -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the underlying div element. | +| `...props` | `React.ComponentProps<'div'>` | - | Any other props are spread to the underlying div element. | ### `` | Prop | Type | Default | Description | |------|------|---------|-------------| -| `renderError` | `JsxParserProps[` | - | Custom error renderer passed to react-jsx-parser. | -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the underlying div element. | +| `renderError` | `JsxParserProps['renderError']` | - | Custom error renderer passed to react-jsx-parser. | +| `...props` | `React.ComponentProps<'div'>` | - | Any other props are spread to the underlying div element. | ### `` | Prop | Type | Default | Description | |------|------|---------|-------------| -| `children` | `ReactNode | ((error: Error) => ReactNode)` | - | Custom error content or render function receiving the error. | -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the underlying div element. | +| `children` | `ReactNode \| ((error: Error) => ReactNode)` | - | Custom error content or render function receiving the error. | +| `...props` | `React.ComponentProps<'div'>` | - | Any other props are spread to the underlying div element. | diff --git a/skills/ai-elements/references/message.md b/skills/ai-elements/references/message.md index bb89ee76..7adeac63 100644 --- a/skills/ai-elements/references/message.md +++ b/skills/ai-elements/references/message.md @@ -151,7 +151,7 @@ export default ActionsDemo; | Prop | Type | Default | Description | |------|------|---------|-------------| -| `from` | `UIMessage[` | - | The role of the message sender ( | +| `from` | `UIMessage["role"]` | - | The role of the message sender ("user", "assistant", or "system"). | | `...props` | `React.HTMLAttributes` | - | Any other props are spread to the root div. | ### `` @@ -168,8 +168,8 @@ export default ActionsDemo; | `parseIncompleteMarkdown` | `boolean` | `true` | Whether to parse and fix incomplete markdown syntax (e.g., unclosed code blocks or lists). | | `className` | `string` | - | CSS class names to apply to the wrapper div element. | | `components` | `object` | - | Custom React components to use for rendering markdown elements (e.g., custom heading, paragraph, code block components). | -| `allowedImagePrefixes` | `string[]` | `[` | Array of allowed URL prefixes for images. Use [ | -| `allowedLinkPrefixes` | `string[]` | `[` | Array of allowed URL prefixes for links. Use [ | +| `allowedImagePrefixes` | `string[]` | `["*"]` | Array of allowed URL prefixes for images. Use ["*"] to allow all images. | +| `allowedLinkPrefixes` | `string[]` | `["*"]` | Array of allowed URL prefixes for links. Use ["*"] to allow all links. | | `defaultOrigin` | `string` | - | Default origin to use for relative URLs in links and images. | | `rehypePlugins` | `array` | `[rehypeKatex]` | Array of rehype plugins to use for processing HTML. Includes KaTeX for math rendering by default. | | `remarkPlugins` | `array` | `[remarkGfm, remarkMath]` | Array of remark plugins to use for processing markdown. Includes GitHub Flavored Markdown and math support by default. | @@ -233,5 +233,5 @@ A container for placing actions and branch selectors below a message. Lays out c | Prop | Type | Default | Description | |------|------|---------|-------------| -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the root div. | +| `...props` | `React.ComponentProps<"div">` | - | Any other props are spread to the root div. | ``` diff --git a/skills/ai-elements/references/mic-selector.md b/skills/ai-elements/references/mic-selector.md index 8f01915e..dc410ec4 100644 --- a/skills/ai-elements/references/mic-selector.md +++ b/skills/ai-elements/references/mic-selector.md @@ -54,7 +54,7 @@ Displays the currently selected microphone name or a placeholder. | Prop | Type | Default | Description | |------|------|---------|-------------| -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the span element. | +| `...props` | `React.ComponentProps<"span">` | - | Any other props are spread to the span element. | ### `` @@ -80,7 +80,7 @@ Wrapper for the list of microphone items. Uses render props pattern to provide a | Prop | Type | Default | Description | |------|------|---------|-------------| | `children` | `(devices: MediaDeviceInfo[]) => ReactNode` | - | Render function that receives the array of available devices. | -| `...props` | `Omit, ` | - | Any other props are spread to the CommandList component. | +| `...props` | `Omit, "children">` | - | Any other props are spread to the CommandList component. | ### `` @@ -88,7 +88,7 @@ Message shown when no microphones match the search. | Prop | Type | Default | Description | |------|------|---------|-------------| -| `children` | `ReactNode` | - | The message to display. | +| `children` | `ReactNode` | `"No microphone found."` | The message to display. | | `...props` | `React.ComponentProps` | - | Any other props are spread to the CommandEmpty component. | ### `` @@ -107,7 +107,7 @@ Displays a formatted microphone label with intelligent device ID parsing. Automa | Prop | Type | Default | Description | |------|------|---------|-------------| | `device` | `MediaDeviceInfo` | - | The MediaDeviceInfo object for the device. | -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the span element. | +| `...props` | `React.ComponentProps<"span">` | - | Any other props are spread to the span element. | ## Hooks @@ -143,7 +143,7 @@ export default function Example() { |------|------|---------|-------------| | `devices` | `MediaDeviceInfo[]` | - | Array of available audio input devices. | | `loading` | `boolean` | - | Whether devices are currently being loaded. | -| `error` | `string | null` | - | Error message if device loading failed. | +| `error` | `string \| null` | - | Error message if device loading failed. | | `hasPermission` | `boolean` | - | Whether microphone permission has been granted. | | `loadDevices` | `() => Promise` | - | Function to request microphone permission and load device names. | diff --git a/skills/ai-elements/references/model-selector.md b/skills/ai-elements/references/model-selector.md index 86b1834f..663b9086 100644 --- a/skills/ai-elements/references/model-selector.md +++ b/skills/ai-elements/references/model-selector.md @@ -41,7 +41,7 @@ npx ai-elements@latest add model-selector | Prop | Type | Default | Description | |------|------|---------|-------------| -| `title` | `ReactNode` | - | Accessible title for the dialog (rendered in sr-only). | +| `title` | `ReactNode` | `"Model Selector"` | Accessible title for the dialog (rendered in sr-only). | | `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying DialogContent component. | ### `` @@ -96,17 +96,17 @@ npx ai-elements@latest add model-selector | Prop | Type | Default | Description | |------|------|---------|-------------| -| `provider` | `string` | Required | The AI provider name. Supports major providers like | -| `...props` | `Omit, "src" \| "alt">` | - | Any other props are spread to the underlying img element (except src and alt which are generated). | ### `` | Prop | Type | Default | Description | |------|------|---------|-------------| -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the underlying div element. | +| `...props` | `React.ComponentProps<"div">` | - | Any other props are spread to the underlying div element. | ### `` | Prop | Type | Default | Description | |------|------|---------|-------------| -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the underlying span element. | +| `...props` | `React.ComponentProps<"span">` | - | Any other props are spread to the underlying span element. | diff --git a/skills/ai-elements/references/node.md b/skills/ai-elements/references/node.md index ff1da06f..7c8752f2 100644 --- a/skills/ai-elements/references/node.md +++ b/skills/ai-elements/references/node.md @@ -29,7 +29,7 @@ npx ai-elements@latest add node | Prop | Type | Default | Description | |------|------|---------|-------------| -| `handles` | `unknown` | - | Configuration for connection handles. Target renders on the left, source on the right. | +| `handles` | `{ target: boolean; source: boolean; }` | - | Configuration for connection handles. Target renders on the left, source on the right. | | `className` | `string` | - | Additional CSS classes to apply to the node. | | `...props` | `ComponentProps` | - | Any other props are spread to the underlying Card component. | diff --git a/skills/ai-elements/references/open-in-chat.md b/skills/ai-elements/references/open-in-chat.md index 29327c44..c8cbd14d 100644 --- a/skills/ai-elements/references/open-in-chat.md +++ b/skills/ai-elements/references/open-in-chat.md @@ -46,7 +46,7 @@ npx ai-elements@latest add open-in-chat | Prop | Type | Default | Description | |------|------|---------|-------------| -| `children` | `React.ReactNode` | - | Custom trigger button. | +| `children` | `React.ReactNode` | `"Open in chat" button with chevron icon` | Custom trigger button. | | `...props` | `React.ComponentProps` | - | Props to spread to the underlying DropdownMenuTrigger component. | ### `` diff --git a/skills/ai-elements/references/package-info.md b/skills/ai-elements/references/package-info.md index 52eb1652..78c8f4b6 100644 --- a/skills/ai-elements/references/package-info.md +++ b/skills/ai-elements/references/package-info.md @@ -38,7 +38,7 @@ npx ai-elements@latest add package-info | `name` | `string` | Required | Package name. | | `currentVersion` | `string` | - | Current installed version. | | `newVersion` | `string` | - | New version being installed. | -| `changeType` | `unknown` | - | Type of version change. | +| `changeType` | `"major" \| "minor" \| "patch" \| "added" \| "removed"` | - | Type of version change. | | `...props` | `React.HTMLAttributes` | - | Spread to the container div. | ### `` diff --git a/skills/ai-elements/references/panel.md b/skills/ai-elements/references/panel.md index bde55281..fcb642bb 100644 --- a/skills/ai-elements/references/panel.md +++ b/skills/ai-elements/references/panel.md @@ -28,6 +28,6 @@ npx ai-elements@latest add panel | Prop | Type | Default | Description | |------|------|---------|-------------| -| `position` | `unknown` | - | Position of the panel on the canvas. | +| `position` | `'top-left' \| 'top-center' \| 'top-right' \| 'bottom-left' \| 'bottom-center' \| 'bottom-right'` | - | Position of the panel on the canvas. | | `className` | `string` | - | Additional CSS classes to apply to the panel. | | `...props` | `ComponentProps` | - | Any other props from @xyflow/react Panel component. | diff --git a/skills/ai-elements/references/persona.md b/skills/ai-elements/references/persona.md index 3ef10dd9..5f4df6cf 100644 --- a/skills/ai-elements/references/persona.md +++ b/skills/ai-elements/references/persona.md @@ -58,15 +58,15 @@ The root component that renders the animated AI visual. | Prop | Type | Default | Description | |------|------|---------|-------------| -| `state` | `unknown` | - | The current state of the AI persona. Controls which animation is displayed. | -| `variant` | `unknown` | - | The visual style variant to display. | +| `state` | `"idle" \| "listening" \| "thinking" \| "speaking" \| "asleep"` | `"idle"` | The current state of the AI persona. Controls which animation is displayed. | +| `variant` | `"obsidian" \| "mana" \| "opal" \| "halo" \| "glint" \| "command"` | `"obsidian"` | The visual style variant to display. | | `className` | `string` | - | Additional CSS classes to apply to the component. | -| `onLoad` | `RiveParameters[` | - | Callback fired when the Rive file starts loading. | -| `onLoadError` | `RiveParameters[` | - | Callback fired if the Rive file fails to load. | +| `onLoad` | `RiveParameters["onLoad"]` | - | Callback fired when the Rive file starts loading. | +| `onLoadError` | `RiveParameters["onLoadError"]` | - | Callback fired if the Rive file fails to load. | | `onReady` | `() => void` | - | Callback fired when the Rive animation is ready to play. | -| `onPause` | `RiveParameters[` | - | Callback fired when the animation is paused. | -| `onPlay` | `RiveParameters[` | - | Callback fired when the animation starts playing. | -| `onStop` | `RiveParameters[` | - | Callback fired when the animation is stopped. | +| `onPause` | `RiveParameters["onPause"]` | - | Callback fired when the animation is paused. | +| `onPlay` | `RiveParameters["onPlay"]` | - | Callback fired when the animation starts playing. | +| `onStop` | `RiveParameters["onStop"]` | - | Callback fired when the animation is stopped. | ## States diff --git a/skills/ai-elements/references/plan.md b/skills/ai-elements/references/plan.md index 58a41a03..149c6275 100644 --- a/skills/ai-elements/references/plan.md +++ b/skills/ai-elements/references/plan.md @@ -45,14 +45,14 @@ npx ai-elements@latest add plan | Prop | Type | Default | Description | |------|------|---------|-------------| | `children` | `string` | - | The title text. Displays with shimmer animation when isStreaming is true. | -| `...props` | `Omit, ` | - | Any other props (except children) are spread to the CardTitle component. | +| `...props` | `Omit, "children">` | - | Any other props (except children) are spread to the CardTitle component. | ### `` | Prop | Type | Default | Description | |------|------|---------|-------------| | `children` | `string` | - | The description text. Displays with shimmer animation when isStreaming is true. | -| `...props` | `Omit, ` | - | Any other props (except children) are spread to the CardDescription component. | +| `...props` | `Omit, "children">` | - | Any other props (except children) are spread to the CardDescription component. | ### `` @@ -70,7 +70,7 @@ npx ai-elements@latest add plan | Prop | Type | Default | Description | |------|------|---------|-------------| -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the div element. | +| `...props` | `React.ComponentProps<"div">` | - | Any other props are spread to the div element. | ### `` diff --git a/skills/ai-elements/references/prompt-input.md b/skills/ai-elements/references/prompt-input.md index 681eeff6..58e9c777 100644 --- a/skills/ai-elements/references/prompt-input.md +++ b/skills/ai-elements/references/prompt-input.md @@ -277,13 +277,13 @@ See `scripts/prompt-input-tooltip.tsx` for this example. | Prop | Type | Default | Description | |------|------|---------|-------------| | `onSubmit` | `(message: PromptInputMessage, event: FormEvent) => void` | - | Handler called when the form is submitted with message text and files. | -| `accept` | `string` | - | File types to accept (e.g., | +| `accept` | `string` | - | File types to accept (e.g., "image/*"). Leave undefined for any. | | `multiple` | `boolean` | - | Whether to allow multiple file selection. | | `globalDrop` | `boolean` | - | When true, accepts file drops anywhere on the document. | | `syncHiddenInput` | `boolean` | - | Render a hidden input with given name for native form posts. | | `maxFiles` | `number` | - | Maximum number of files allowed. | | `maxFileSize` | `number` | - | Maximum file size in bytes. | -| `onError` | `(err: { code: ` | - | Handler for file validation errors. | +| `onError` | `(err: { code: "max_files" \| "max_file_size" \| "accept", message: string }) => void` | - | Handler for file validation errors. | | `...props` | `React.HTMLAttributes` | - | Any other props are spread to the root form element. | ### `` @@ -308,7 +308,7 @@ See `scripts/prompt-input-tooltip.tsx` for this example. | Prop | Type | Default | Description | |------|------|---------|-------------| -| `tooltip` | `string | { content: ReactNode; shortcut?: string; side?: ` | - | Optional tooltip to display on hover. Can be a string or an object with content, shortcut, and side properties. | +| `tooltip` | `string \| { content: ReactNode; shortcut?: string; side?: "top" \| "right" \| "bottom" \| "left" }` | - | Optional tooltip to display on hover. Can be a string or an object with content, shortcut, and side properties. | | `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying shadcn/ui Button component. | #### Tooltip Examples @@ -405,14 +405,14 @@ Attachment components have been moved to a separate module. See the [Attachment] | Prop | Type | Default | Description | |------|------|---------|-------------| -| `label` | `string` | - | Label for the menu item. | +| `label` | `string` | `"Add photos or files"` | Label for the menu item. | | `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying DropdownMenuItem component. | ### `` | Prop | Type | Default | Description | |------|------|---------|-------------| -| `label` | `string` | - | Label for the menu item. | +| `label` | `string` | `"Take screenshot"` | Label for the menu item. | | `...props` | `React.ComponentProps` | - | Any other props are spread to the underlying DropdownMenuItem component. | ### `` @@ -428,7 +428,7 @@ Optional global provider that lifts PromptInput state outside of PromptInput. Wh | Prop | Type | Default | Description | |------|------|---------|-------------| -| `...props` | `Omit, ` | - | Any other props (except align) are spread to the InputGroupAddon component. | +| `...props` | `Omit, "align">` | - | Any other props (except align) are spread to the InputGroupAddon component. | ### `` @@ -448,7 +448,7 @@ Optional global provider that lifts PromptInput state outside of PromptInput. Wh | Prop | Type | Default | Description | |------|------|---------|-------------| -| `align` | `unknown` | - | Alignment of the hover card content. | +| `align` | `"start" \| "center" \| "end"` | `"start"` | Alignment of the hover card content. | | `...props` | `React.ComponentProps` | - | Any other props are spread to the HoverCardContent component. | ### `` diff --git a/skills/ai-elements/references/question.md b/skills/ai-elements/references/question.md new file mode 100644 index 00000000..a47edab1 --- /dev/null +++ b/skills/ai-elements/references/question.md @@ -0,0 +1,151 @@ +# Question + +A composable prompt for collecting choices, freeform text, or both from a user. + +The `Question` component presents a human-in-the-loop question as an immediately actionable form. Use it when an AI workflow pauses for structured input instead of hiding the prompt inside a tool details view. + +See `scripts/question.tsx` for this example. + +## Installation + +```bash +npx ai-elements@latest add question +``` + +## Usage + +```tsx +import { + Question, + QuestionActions, + QuestionDescription, + QuestionInput, + QuestionOption, + QuestionOptions, + QuestionPrompt, + QuestionSubmit, +} from "@/components/ai-elements/question"; + + { + await respondToQuestion({ selectedValues, text }); + }} + selectionMode="multiple" +> + What should the project include? + + Choose any features and add details if needed. + + + Authentication + Database + Payments + + + + Answer + +; +``` + +Render only the parts the question supports. `QuestionSubmit` remains disabled until the user selects an option or enters non-whitespace text. The component trims freeform text before calling `onSubmit`. + +## Examples + +### Single select + +Leave `selectionMode` as `"single"` when the user should choose exactly one option. Options use radio semantics, and selecting a new option replaces the previous selection. + +See `scripts/question-single-select.tsx` for this example. + +### Multi-select + +Set `selectionMode="multiple"` when the user may choose several options. Options use checkbox semantics, and `selectedValues` contains every selected value. + +See `scripts/question-multi-select.tsx` for this example. + +### Freeform + +Render `QuestionInput` without `QuestionOptions` to collect a text-only answer. + +See `scripts/question-freeform.tsx` for this example. + +### Options and freeform + +Render options and an input together when users may choose suggested answers and add context. The response can contain both `selectedValues` and `text`. + +See `scripts/question.tsx` for this example. + +## Controlled state + +Use `value` and `onValueChange` when another part of your application owns the draft response: + +```tsx +const [value, setValue] = useState({ selectedValues: [], text: "" }); + + + {/* question content */} +; +``` + +## Props + +### `` + +| Prop | Type | Default | Description | +|------|------|---------|-------------| +| `value` | `QuestionValue` | - | The controlled question draft. | +| `defaultValue` | `QuestionValue` | `{ selectedValues: [], text: "" }` | The initial question draft when the component is uncontrolled. | +| `selectionMode` | `"single" \| "multiple"` | `"single"` | Whether options behave as a single-choice radio group or multiple-choice checkboxes. | +| `disabled` | `boolean` | `false` | Disables the input, options, and submit action. | +| `onValueChange` | `(value: QuestionValue) => void` | - | Called whenever the draft selection or text changes. | +| `onSubmit` | `(response: QuestionResponse, event: React.FormEvent) => void \| Promise` | - | Called with the selected values, optional trimmed text, and original form event. May return a promise for asynchronous responses. | +| `...props` | `React.ComponentProps<"form">` | - | Any other props are spread to the form element. | + +### `` + +Displays the question text. Props extend `React.HTMLAttributes`. + +### `` + +Displays supporting instructions. Props extend `React.HTMLAttributes`. + +### `` + +Groups `QuestionOption` children and applies radio-group or checkbox-group semantics based on `selectionMode`. Props extend `React.HTMLAttributes`. + +### `` + +| Prop | Type | Default | Description | +|------|------|---------|-------------| +| `value` | `string` | - | The stable value included in selectedValues when the option is selected. | +| `...props` | `React.ComponentProps` | - | Any other props are spread to the shadcn/ui Button. | + +### `` + +A controlled textarea backed by the question draft's `text` value. Props extend `React.ComponentProps`. + +### `` + +A container for the submit action or other controls. Props extend `React.HTMLAttributes`. + +### `` + +Submits the current response and disables itself while the response is empty or the question is disabled. Props extend `React.ComponentProps`. + +## Types + +```ts +interface QuestionValue { + selectedValues: readonly string[]; + text: string; +} + +interface QuestionResponse { + selectedValues: readonly string[]; + text?: string; +} +``` diff --git a/skills/ai-elements/references/queue.md b/skills/ai-elements/references/queue.md index 6d265b4a..4e03608b 100644 --- a/skills/ai-elements/references/queue.md +++ b/skills/ai-elements/references/queue.md @@ -38,7 +38,7 @@ See `scripts/queue-prompt-input.tsx` for this example. | Prop | Type | Default | Description | |------|------|---------|-------------| -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the root div. | +| `...props` | `React.ComponentProps<"div">` | - | Any other props are spread to the root div. | ### `` @@ -51,7 +51,7 @@ See `scripts/queue-prompt-input.tsx` for this example. | Prop | Type | Default | Description | |------|------|---------|-------------| -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the button element. | +| `...props` | `React.ComponentProps<"button">` | - | Any other props are spread to the button element. | ### `` @@ -60,7 +60,7 @@ See `scripts/queue-prompt-input.tsx` for this example. | `label` | `string` | - | The label text to display. | | `count` | `number` | - | The count to display before the label. | | `icon` | `React.ReactNode` | - | An optional icon to display before the count. | -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the span element. | +| `...props` | `React.ComponentProps<"span">` | - | Any other props are spread to the span element. | ### `` @@ -78,58 +78,58 @@ See `scripts/queue-prompt-input.tsx` for this example. | Prop | Type | Default | Description | |------|------|---------|-------------| -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the li element. | +| `...props` | `React.ComponentProps<"li">` | - | Any other props are spread to the li element. | ### `` | Prop | Type | Default | Description | |------|------|---------|-------------| | `completed` | `boolean` | `false` | Whether the item is completed. Affects the indicator styling. | -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the span element. | +| `...props` | `React.ComponentProps<"span">` | - | Any other props are spread to the span element. | ### `` | Prop | Type | Default | Description | |------|------|---------|-------------| | `completed` | `boolean` | `false` | Whether the item is completed. Affects text styling with strikethrough and opacity. | -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the span element. | +| `...props` | `React.ComponentProps<"span">` | - | Any other props are spread to the span element. | ### `` | Prop | Type | Default | Description | |------|------|---------|-------------| | `completed` | `boolean` | `false` | Whether the item is completed. Affects text styling. | -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the div element. | +| `...props` | `React.ComponentProps<"div">` | - | Any other props are spread to the div element. | ### `` | Prop | Type | Default | Description | |------|------|---------|-------------| -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the div element. | +| `...props` | `React.ComponentProps<"div">` | - | Any other props are spread to the div element. | ### `` | Prop | Type | Default | Description | |------|------|---------|-------------| -| `...props` | `Omit, ` | - | Any other props (except variant and size) are spread to the Button component. | +| `...props` | `Omit, "variant" \| "size">` | - | Any other props (except variant and size) are spread to the Button component. | ### `` | Prop | Type | Default | Description | |------|------|---------|-------------| -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the div element. | +| `...props` | `React.ComponentProps<"div">` | - | Any other props are spread to the div element. | ### `` | Prop | Type | Default | Description | |------|------|---------|-------------| -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the img element. | +| `...props` | `React.ComponentProps<"img">` | - | Any other props are spread to the img element. | ### `` | Prop | Type | Default | Description | |------|------|---------|-------------| -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the span element. | +| `...props` | `React.ComponentProps<"span">` | - | Any other props are spread to the span element. | ## Type Exports diff --git a/skills/ai-elements/references/reasoning.md b/skills/ai-elements/references/reasoning.md index 9563bc6a..5328c395 100644 --- a/skills/ai-elements/references/reasoning.md +++ b/skills/ai-elements/references/reasoning.md @@ -235,4 +235,4 @@ Returns: | `isStreaming` | `boolean` | - | Whether reasoning is currently streaming. | | `isOpen` | `boolean` | - | Whether the reasoning panel is open. | | `setIsOpen` | `(open: boolean) => void` | - | Function to set the open state. | -| `duration` | `number | undefined` | - | Duration in seconds (undefined while streaming). | +| `duration` | `number \| undefined` | - | Duration in seconds (undefined while streaming). | diff --git a/skills/ai-elements/references/sandbox.md b/skills/ai-elements/references/sandbox.md index adc7ee1f..cf662b74 100644 --- a/skills/ai-elements/references/sandbox.md +++ b/skills/ai-elements/references/sandbox.md @@ -89,7 +89,7 @@ export const CodeSandbox = ({ toolPart }: CodeSandboxProps) => { | Prop | Type | Default | Description | |------|------|---------|-------------| | `title` | `string` | `undefined` | The title displayed in the header (e.g., filename). | -| `state` | `ToolUIPart[` | Required | The current execution state, used to display the appropriate status badge. | +| `state` | `ToolUIPart["state"]` | Required | The current execution state, used to display the appropriate status badge. | | `className` | `string` | - | Additional CSS classes for the header. | ### `` diff --git a/skills/ai-elements/references/schema-display.md b/skills/ai-elements/references/schema-display.md index 0ed1947f..5ef3348c 100644 --- a/skills/ai-elements/references/schema-display.md +++ b/skills/ai-elements/references/schema-display.md @@ -55,7 +55,7 @@ See `scripts/schema-display-nested.tsx` for this example. | Prop | Type | Default | Description | |------|------|---------|-------------| -| `method` | `unknown` | - | HTTP method. | +| `method` | `"GET" \| "POST" \| "PUT" \| "PATCH" \| "DELETE"` | - | HTTP method. | | `path` | `string` | - | API endpoint path. | | `description` | `string` | - | Endpoint description. | | `parameters` | `SchemaParameter[]` | - | URL/query parameters. | diff --git a/skills/ai-elements/references/shimmer.md b/skills/ai-elements/references/shimmer.md index 3af11dd0..5ec0d4dc 100644 --- a/skills/ai-elements/references/shimmer.md +++ b/skills/ai-elements/references/shimmer.md @@ -42,7 +42,7 @@ See `scripts/shimmer-elements.tsx` for this example. | Prop | Type | Default | Description | |------|------|---------|-------------| | `children` | `string` | - | The text content to apply the shimmer effect to. | -| `as` | `ElementType` | - | The HTML element or React component to render. | +| `as` | `ElementType` | `"p"` | The HTML element or React component to render. | | `className` | `string` | - | Additional CSS classes to apply to the component. | | `duration` | `number` | `2` | The duration of the shimmer animation in seconds. | | `spread` | `number` | `2` | The spread multiplier for the shimmer gradient, multiplied by text length. | diff --git a/skills/ai-elements/references/snippet.md b/skills/ai-elements/references/snippet.md index 9e9cf4c2..9107ec70 100644 --- a/skills/ai-elements/references/snippet.md +++ b/skills/ai-elements/references/snippet.md @@ -51,7 +51,7 @@ See `scripts/snippet-plain.tsx` for this example. | Prop | Type | Default | Description | |------|------|---------|-------------| -| `...props` | `Omit, ` | - | Spread to the InputGroupInput component. Value and readOnly are set automatically. | +| `...props` | `Omit, "readOnly" \| "value">` | - | Spread to the InputGroupInput component. Value and readOnly are set automatically. | ### `` diff --git a/skills/ai-elements/references/speech-input.md b/skills/ai-elements/references/speech-input.md index f80e4536..5bd65cb6 100644 --- a/skills/ai-elements/references/speech-input.md +++ b/skills/ai-elements/references/speech-input.md @@ -35,7 +35,7 @@ The component extends the shadcn/ui Button component, so all Button props are av |------|------|---------|-------------| | `onTranscriptionChange` | `(text: string) => void` | - | Callback fired when final transcription text is available. Only fires for completed phrases, not interim results. | | `onAudioRecorded` | `(audioBlob: Blob) => Promise` | - | Callback for MediaRecorder fallback. Required for Firefox/Safari support. Receives recorded audio blob and should return transcribed text from an external service (e.g., OpenAI Whisper). | -| `lang` | `string` | - | Language for speech recognition. | +| `lang` | `string` | `"en-US"` | Language for speech recognition. | | `...props` | `React.ComponentProps` | - | Any other props are spread to the Button component, including variant, size, disabled, etc. | ## Behavior diff --git a/skills/ai-elements/references/stack-trace.md b/skills/ai-elements/references/stack-trace.md index cff6ff57..cd1130d0 100644 --- a/skills/ai-elements/references/stack-trace.md +++ b/skills/ai-elements/references/stack-trace.md @@ -168,7 +168,7 @@ See `scripts/stack-trace-no-internal.tsx` for this example. | Prop | Type | Default | Description | |------|------|---------|-------------| -| `children` | `React.ReactNode` | - | Custom content. Defaults to the parsed error type (e.g., | +| `children` | `React.ReactNode` | - | Custom content. Defaults to the parsed error type (e.g., "TypeError"). | | `className` | `string` | - | Additional CSS classes. | | `...props` | `React.HTMLAttributes` | - | Any other props are spread to the span element. | diff --git a/skills/ai-elements/references/suggestion.md b/skills/ai-elements/references/suggestion.md index 08cc3ae8..a536c8a1 100644 --- a/skills/ai-elements/references/suggestion.md +++ b/skills/ai-elements/references/suggestion.md @@ -121,4 +121,4 @@ See `scripts/suggestion-input.tsx` for this example. |------|------|---------|-------------| | `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, ` | - | Any other props are spread to the underlying shadcn/ui Button component. | +| `...props` | `Omit, "onClick">` | - | Any other props are spread to the underlying shadcn/ui Button component. | diff --git a/skills/ai-elements/references/task.md b/skills/ai-elements/references/task.md index 70e055e9..dba9e7b8 100644 --- a/skills/ai-elements/references/task.md +++ b/skills/ai-elements/references/task.md @@ -213,10 +213,10 @@ export async function POST(req: Request) { | Prop | Type | Default | Description | |------|------|---------|-------------| -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the underlying div. | +| `...props` | `React.ComponentProps<"div">` | - | Any other props are spread to the underlying div. | ### `` | Prop | Type | Default | Description | |------|------|---------|-------------| -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the underlying div. | +| `...props` | `React.ComponentProps<"div">` | - | Any other props are spread to the underlying div. | diff --git a/skills/ai-elements/references/test-results.md b/skills/ai-elements/references/test-results.md index 74fd4da7..8e59960a 100644 --- a/skills/ai-elements/references/test-results.md +++ b/skills/ai-elements/references/test-results.md @@ -50,7 +50,7 @@ See `scripts/test-results-errors.tsx` for this example. | Prop | Type | Default | Description | |------|------|---------|-------------| -| `summary` | `unknown` | - | Test results summary. | +| `summary` | `{ passed, failed, skipped, total, duration? }` | - | Test results summary. | | `className` | `string` | - | Additional CSS classes. | ### `` @@ -58,7 +58,7 @@ See `scripts/test-results-errors.tsx` for this example. | Prop | Type | Default | Description | |------|------|---------|-------------| | `name` | `string` | - | Suite name. | -| `status` | `unknown` | - | Overall suite status. | +| `status` | `"passed" \| "failed" \| "skipped" \| "running"` | - | Overall suite status. | | `defaultOpen` | `boolean` | - | Initially expanded. | ### `` @@ -66,7 +66,7 @@ See `scripts/test-results-errors.tsx` for this example. | Prop | Type | Default | Description | |------|------|---------|-------------| | `name` | `string` | - | Test name. | -| `status` | `unknown` | - | Test status. | +| `status` | `"passed" \| "failed" \| "skipped" \| "running"` | - | Test status. | | `duration` | `number` | - | Test duration in ms. | ### `` diff --git a/skills/ai-elements/references/tool.md b/skills/ai-elements/references/tool.md index bf44e08f..9cf0a1bd 100644 --- a/skills/ai-elements/references/tool.md +++ b/skills/ai-elements/references/tool.md @@ -224,9 +224,9 @@ See `scripts/tool-output-error.tsx` for this example. | Prop | Type | Default | Description | |------|------|---------|-------------| | `title` | `string` | - | Custom title to display instead of the derived tool name. | -| `type` | `ToolUIPart[` | Required | The type/name of the tool. | -| `state` | `ToolUIPart[` | Required | The current state of the tool (input-streaming, input-available, output-available, or output-error). | -| `toolName` | `string` | - | Required when type is | +| `type` | `ToolUIPart["type"] \| DynamicToolUIPart["type"]` | Required | The type/name of the tool. | +| `state` | `ToolUIPart["state"] \| DynamicToolUIPart["state"]` | Required | The current state of the tool (input-streaming, input-available, output-available, or output-error). | +| `toolName` | `string` | - | Required when type is "dynamic-tool" to specify the tool name. | | `className` | `string` | - | Additional CSS classes to apply to the header. | | `...props` | `React.ComponentProps` | - | Any other props are spread to the CollapsibleTrigger. | @@ -240,16 +240,16 @@ See `scripts/tool-output-error.tsx` for this example. | Prop | Type | Default | Description | |------|------|---------|-------------| -| `input` | `ToolUIPart[` | - | The input parameters passed to the tool, displayed as formatted JSON. | -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the underlying div. | +| `input` | `ToolUIPart["input"]` | - | The input parameters passed to the tool, displayed as formatted JSON. | +| `...props` | `React.ComponentProps<"div">` | - | Any other props are spread to the underlying div. | ### `` | Prop | Type | Default | Description | |------|------|---------|-------------| | `output` | `React.ReactNode` | - | The output/result of the tool execution. | -| `errorText` | `ToolUIPart[` | - | An error message if the tool execution failed. | -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the underlying div. | +| `errorText` | `ToolUIPart["errorText"]` | - | An error message if the tool execution failed. | +| `...props` | `React.ComponentProps<"div">` | - | Any other props are spread to the underlying div. | ## Type Exports diff --git a/skills/ai-elements/references/transcription.md b/skills/ai-elements/references/transcription.md index 7dc7ad5a..0c716a5c 100644 --- a/skills/ai-elements/references/transcription.md +++ b/skills/ai-elements/references/transcription.md @@ -35,7 +35,7 @@ Root component that provides context and manages transcript state. Uses render p | `currentTime` | `number` | `0` | Current playback time in seconds (controlled). | | `onSeek` | `(time: number) => void` | - | Callback fired when a segment is clicked or when currentTime changes. | | `children` | `(segment: TranscriptionSegment, index: number) => ReactNode` | - | Render function that receives each segment and its index. | -| `...props` | `Omit, "children">` | - | Any other props are spread to the root div element. | ### `` @@ -45,7 +45,7 @@ Individual segment button with automatic state styling and click-to-seek functio |------|------|---------|-------------| | `segment` | `TranscriptionSegment` | - | The transcription segment data. | | `index` | `number` | - | The segment index. | -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the button element. | +| `...props` | `React.ComponentProps<"button">` | - | Any other props are spread to the button element. | ## Behavior diff --git a/skills/ai-elements/references/voice-selector.md b/skills/ai-elements/references/voice-selector.md index 0c4299ee..286b45ec 100644 --- a/skills/ai-elements/references/voice-selector.md +++ b/skills/ai-elements/references/voice-selector.md @@ -35,7 +35,7 @@ Root Dialog component that provides context for all child components. Manages bo |------|------|---------|-------------| | `value` | `string` | - | The selected voice ID (controlled). | | `defaultValue` | `string` | - | The default selected voice ID (uncontrolled). | -| `onValueChange` | `(value: string | undefined) => void` | - | Callback fired when the selected voice changes. | +| `onValueChange` | `(value: string \| undefined) => void` | - | Callback fired when the selected voice changes. | | `defaultOpen` | `boolean` | `false` | The default open state (uncontrolled). | | `open` | `boolean` | - | The open state (controlled). | | `onOpenChange` | `(open: boolean) => void` | - | Callback fired when the open state changes. | @@ -57,7 +57,7 @@ Container for the Command component and voice list, rendered inside the dialog. | Prop | Type | Default | Description | |------|------|---------|-------------| -| `title` | `ReactNode` | - | The title for screen readers. Hidden visually but accessible to assistive technologies. | +| `title` | `ReactNode` | `"Voice Selector"` | The title for screen readers. Hidden visually but accessible to assistive technologies. | | `className` | `string` | - | Additional CSS classes to apply to the dialog content. | | `...props` | `React.ComponentProps` | - | Any other props are spread to the DialogContent component. | @@ -130,7 +130,7 @@ Displays the voice name with proper styling. | Prop | Type | Default | Description | |------|------|---------|-------------| | `className` | `string` | - | Additional CSS classes to apply. | -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the span element. | +| `...props` | `React.ComponentProps<"span">` | - | Any other props are spread to the span element. | ### `` @@ -138,10 +138,10 @@ Displays the voice gender metadata with icons from Lucide. Supports multiple gen | Prop | Type | Default | Description | |------|------|---------|-------------| -| `value` | `unknown` | - | The gender value that determines which icon to display. Supported values: | +| `value` | `"male" \| "female" \| "transgender" \| "androgyne" \| "non-binary" \| "intersex"` | - | The gender value that determines which icon to display. Supported values: "male" (Mars), "female" (Venus), "transgender", "androgyne", "non-binary", "intersex". Defaults to a small circle if no value matches. | | `className` | `string` | - | Additional CSS classes to apply. | | `children` | `ReactNode` | - | Override the icon with custom content. | -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the span element. | +| `...props` | `React.ComponentProps<"span">` | - | Any other props are spread to the span element. | ### `` @@ -149,10 +149,10 @@ Displays the voice accent metadata with emoji flags representing different count | Prop | Type | Default | Description | |------|------|---------|-------------| -| `value` | `unknown` | - | The accent value that determines which flag emoji to display. Supports 27 different accents including: | +| `value` | `"american" \| "british" \| "australian" \| "canadian" \| "irish" \| "scottish" \| "indian" \| "south-african" \| "new-zealand" \| "spanish" \| "french" \| "german" \| "italian" \| "portuguese" \| "brazilian" \| "mexican" \| "argentinian" \| "japanese" \| "chinese" \| "korean" \| "russian" \| "arabic" \| "dutch" \| "swedish" \| "norwegian" \| "danish" \| "finnish" \| "polish" \| "turkish" \| "greek" \| string` | - | The accent value that determines which flag emoji to display. Supports 27 different accents including: "american" ๐Ÿ‡บ๐Ÿ‡ธ, "british" ๐Ÿ‡ฌ๐Ÿ‡ง, "australian" ๐Ÿ‡ฆ๐Ÿ‡บ, "canadian" ๐Ÿ‡จ๐Ÿ‡ฆ, "irish" ๐Ÿ‡ฎ๐Ÿ‡ช, "scottish" ๐Ÿด๓ ง๓ ข๓ ณ๓ ฃ๓ ด๓ ฟ, "indian" ๐Ÿ‡ฎ๐Ÿ‡ณ, "south-african" ๐Ÿ‡ฟ๐Ÿ‡ฆ, "new-zealand" ๐Ÿ‡ณ๐Ÿ‡ฟ, "spanish" ๐Ÿ‡ช๐Ÿ‡ธ, "french" ๐Ÿ‡ซ๐Ÿ‡ท, "german" ๐Ÿ‡ฉ๐Ÿ‡ช, "italian" ๐Ÿ‡ฎ๐Ÿ‡น, "portuguese" ๐Ÿ‡ต๐Ÿ‡น, "brazilian" ๐Ÿ‡ง๐Ÿ‡ท, "mexican" ๐Ÿ‡ฒ๐Ÿ‡ฝ, "argentinian" ๐Ÿ‡ฆ๐Ÿ‡ท, "japanese" ๐Ÿ‡ฏ๐Ÿ‡ต, "chinese" ๐Ÿ‡จ๐Ÿ‡ณ, "korean" ๐Ÿ‡ฐ๐Ÿ‡ท, "russian" ๐Ÿ‡ท๐Ÿ‡บ, "arabic" ๐Ÿ‡ธ๐Ÿ‡ฆ, "dutch" ๐Ÿ‡ณ๐Ÿ‡ฑ, "swedish" ๐Ÿ‡ธ๐Ÿ‡ช, "norwegian" ๐Ÿ‡ณ๐Ÿ‡ด, "danish" ๐Ÿ‡ฉ๐Ÿ‡ฐ, "finnish" ๐Ÿ‡ซ๐Ÿ‡ฎ, "polish" ๐Ÿ‡ต๐Ÿ‡ฑ, "turkish" ๐Ÿ‡น๐Ÿ‡ท, "greek" ๐Ÿ‡ฌ๐Ÿ‡ท. Also accepts any custom string value. | | `className` | `string` | - | Additional CSS classes to apply. | | `children` | `ReactNode` | - | Override the flag emoji with custom content. | -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the span element. | +| `...props` | `React.ComponentProps<"span">` | - | Any other props are spread to the span element. | ### `` @@ -161,7 +161,7 @@ Displays the voice age metadata with muted styling and tabular numbers for consi | Prop | Type | Default | Description | |------|------|---------|-------------| | `className` | `string` | - | Additional CSS classes to apply. | -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the span element. | +| `...props` | `React.ComponentProps<"span">` | - | Any other props are spread to the span element. | ### `` @@ -170,7 +170,7 @@ Displays a description for the voice with muted styling. | Prop | Type | Default | Description | |------|------|---------|-------------| | `className` | `string` | - | Additional CSS classes to apply. | -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the span element. | +| `...props` | `React.ComponentProps<"span">` | - | Any other props are spread to the span element. | ### `` @@ -179,7 +179,7 @@ Container for grouping voice attributes (gender, accent, age) together. Use with | Prop | Type | Default | Description | |------|------|---------|-------------| | `className` | `string` | - | Additional CSS classes to apply. | -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the div element. | +| `...props` | `React.ComponentProps<"div">` | - | Any other props are spread to the div element. | ### `` @@ -188,7 +188,7 @@ Displays a bullet separator (โ€ข) between voice attributes. Hidden from screen r | Prop | Type | Default | Description | |------|------|---------|-------------| | `className` | `string` | - | Additional CSS classes to apply. | -| `...props` | `React.ComponentProps<` | - | Any other props are spread to the span element. | +| `...props` | `React.ComponentProps<"span">` | - | Any other props are spread to the span element. | ### `` @@ -208,7 +208,7 @@ A button that allows users to preview/play a voice sample before selecting it. S | `loading` | `boolean` | - | Whether the voice preview is loading. Shows loading spinner and disables the button. | | `onPlay` | `() => void` | - | Callback fired when the preview button is clicked. | | `className` | `string` | - | Additional CSS classes to apply. | -| `...props` | `Omit, "children">` | - | Any other props are spread to the button element. | ## Hooks @@ -235,7 +235,7 @@ export default function CustomVoiceDisplay() { | Prop | Type | Default | Description | |------|------|---------|-------------| -| `value` | `string | undefined` | - | The currently selected voice ID. | -| `setValue` | `(value: string | undefined) => void` | - | Function to update the selected voice ID. | +| `value` | `string \| undefined` | - | The currently selected voice ID. | +| `setValue` | `(value: string \| undefined) => void` | - | Function to update the selected voice ID. | | `open` | `boolean` | - | Whether the dialog is currently open. | | `setOpen` | `(open: boolean) => void` | - | Function to control the dialog open state. | diff --git a/skills/ai-elements/references/web-preview.md b/skills/ai-elements/references/web-preview.md index 685ff249..431395c5 100644 --- a/skills/ai-elements/references/web-preview.md +++ b/skills/ai-elements/references/web-preview.md @@ -162,7 +162,7 @@ export async function POST(req: Request) { | Prop | Type | Default | Description | |------|------|---------|-------------| -| `defaultUrl` | `string` | - | The initial URL to load in the preview. | +| `defaultUrl` | `string` | `""` | The initial URL to load in the preview. | | `onUrlChange` | `(url: string) => void` | - | Callback fired when the URL changes. | | `...props` | `React.HTMLAttributes` | - | Any other props are spread to the root div. | @@ -196,5 +196,5 @@ export async function POST(req: Request) { | Prop | Type | Default | Description | |------|------|---------|-------------| -| `logs` | `Array<{ level: ` | - | Console log entries to display in the console panel. | +| `logs` | `Array<{ level: "log" \| "warn" \| "error"; message: string; timestamp: Date }>` | - | Console log entries to display in the console panel. | | `...props` | `React.HTMLAttributes` | - | Any other props are spread to the root div. | diff --git a/skills/ai-elements/scripts/question-freeform.tsx b/skills/ai-elements/scripts/question-freeform.tsx new file mode 100644 index 00000000..27fb6bb6 --- /dev/null +++ b/skills/ai-elements/scripts/question-freeform.tsx @@ -0,0 +1,46 @@ +"use client"; + +import type { QuestionResponse } from "@/components/ai-elements/question"; + +import { + Question, + QuestionActions, + QuestionDescription, + QuestionInput, + QuestionPrompt, + QuestionSubmit, +} from "@/components/ai-elements/question"; +import { useCallback, useState } from "react"; + +const Example = () => { + const [answer, setAnswer] = useState(); + const handleSubmit = useCallback(({ text }: QuestionResponse) => { + setAnswer(text); + }, []); + + if (answer) { + return ( +
+ Answered: + {answer} +
+ ); + } + + return ( + +
+ What should we name the project? + + Enter a short, memorable name. + +
+ + + Answer + + + ); +}; + +export default Example; diff --git a/skills/ai-elements/scripts/question-multi-select.tsx b/skills/ai-elements/scripts/question-multi-select.tsx new file mode 100644 index 00000000..22b651e6 --- /dev/null +++ b/skills/ai-elements/scripts/question-multi-select.tsx @@ -0,0 +1,53 @@ +"use client"; + +import type { QuestionResponse } from "@/components/ai-elements/question"; + +import { + Question, + QuestionActions, + QuestionDescription, + QuestionOption, + QuestionOptions, + QuestionPrompt, + QuestionSubmit, +} from "@/components/ai-elements/question"; +import { useCallback, useState } from "react"; + +const Example = () => { + const [answer, setAnswer] = useState(); + const handleSubmit = useCallback(({ selectedValues }: QuestionResponse) => { + setAnswer(selectedValues); + }, []); + + if (answer) { + return ( +
+ Selected: + {answer.join(", ")} +
+ ); + } + + return ( + +
+ Which features should we include? + Select all that apply. +
+ + Authentication + Database + Payments + + + Continue + + + ); +}; + +export default Example; diff --git a/skills/ai-elements/scripts/question-single-select.tsx b/skills/ai-elements/scripts/question-single-select.tsx new file mode 100644 index 00000000..62eae0c3 --- /dev/null +++ b/skills/ai-elements/scripts/question-single-select.tsx @@ -0,0 +1,49 @@ +"use client"; + +import type { QuestionResponse } from "@/components/ai-elements/question"; + +import { + Question, + QuestionActions, + QuestionDescription, + QuestionOption, + QuestionOptions, + QuestionPrompt, + QuestionSubmit, +} from "@/components/ai-elements/question"; +import { useCallback, useState } from "react"; + +const Example = () => { + const [answer, setAnswer] = useState(); + const handleSubmit = useCallback(({ selectedValues }: QuestionResponse) => { + setAnswer(selectedValues[0]); + }, []); + + if (answer) { + return ( +
+ Selected: + {answer} +
+ ); + } + + return ( + +
+ Which framework should we use? + Select one option. +
+ + Next.js + Nuxt + SvelteKit + + + Continue + + + ); +}; + +export default Example; diff --git a/skills/ai-elements/scripts/question.tsx b/skills/ai-elements/scripts/question.tsx new file mode 100644 index 00000000..6227b85e --- /dev/null +++ b/skills/ai-elements/scripts/question.tsx @@ -0,0 +1,60 @@ +"use client"; + +import type { QuestionResponse } from "@/components/ai-elements/question"; + +import { + Question, + QuestionActions, + QuestionDescription, + QuestionInput, + QuestionOption, + QuestionOptions, + QuestionPrompt, + QuestionSubmit, +} from "@/components/ai-elements/question"; +import { useState } from "react"; + +const Example = () => { + const [response, setResponse] = useState(); + + if (response) { + const selected = response.selectedValues.join(", "); + const summary = [selected, response.text].filter(Boolean).join(" โ€” "); + + return ( +
+ Answered: + {summary} +
+ ); + } + + return ( + +
+ What should the project include? + + Choose any features and add details if needed. + +
+ + Authentication + Database + Payments + + + + Answer + + + ); +}; + +export default Example;