Chat & AI

Ai Code Block

Compound code surface for tool output and streamed files.

Import

tsx

import { AiCodeBlock } from "@cronus-ui/ui";

bash

npx cronus-ui add ai-code-block

Examples

Tool output

Compound code surface with a copy control. No extra highlighter dependency.

main.ts

export const n = 1

tsx

<AiCodeBlock
  defaultValue="main.ts"
  data={[{ filename: "main.ts", language: "ts", code: "export const n = 1\n" }]}
>
  <AiCodeBlockHeader>
    <span className="font-mono text-xs">main.ts</span>
    <AiCodeBlockCopyButton />
  </AiCodeBlockHeader>
  <AiCodeBlockBody>
    {(item) => (
      <AiCodeBlockItem key={item.filename} value={item.filename}>
        <AiCodeBlockContent language={item.language}>{item.code}</AiCodeBlockContent>
      </AiCodeBlockItem>
    )}
  </AiCodeBlockBody>
</AiCodeBlock>

.cronus

No audit fixture declares this family in .cronus yet.

React onlyParity: Not portedParity scoreboard

API Reference

Generated from the component's exported types.

AiCodeBlockLabels

Prop	Type	Default	Description
`copy`	`string`	—	—
`copied`	`string`	—	—
`selectFile`	`string`	—	—

AiCodeBlockProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`defaultValue`	`string`	—	Uncontrolled initial value.
`value`	`string`	—	Controlled value.
`onValueChange`	`(value: string) => void`	—	Called when the value changes.
`data`*	`AiCodeBlockData[]`	—	—
`labels`	`AiCodeBlockLabels`	—	Override default English strings.
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

AiCodeBlockHeaderProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

AiCodeBlockFilesProps

Extends Omit<HTMLAttributes<HTMLDivElement>, "children">

Prop	Type	Default	Description
`children`*	`AiCodeBlockChildren`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.
`id`	`string`	—	DOM id of the root element.

AiCodeBlockFilenameProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`value`	`string`	—	Controlled value.
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

AiCodeBlockSelectProps

Extends ComponentProps<typeof Select>

Prop	Type	Default	Description
`children`*	`AiCodeBlockChildren`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.
`asChild`	`boolean`	—	Render as the child element via Slot.

AiCodeBlockSelectItemProps

Extends ComponentProps<typeof SelectItem>

Prop	Type	Default	Description
`value`	`string`	—	Controlled value.
`disabled`	`boolean`	—	Disables pointer and keyboard interaction.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

AiCodeBlockCopyButtonProps

Extends ComponentProps<typeof Button>

Prop	Type	Default	Description
`onCopy`	`() => void`	—	—
`onError`	`(error: Error) => void`	—	—
`timeout`	`number`	`2000`	—
`code`	`string`	—	Explicit payload. Defaults to the active file in `AiCodeBlock` data.
`variant`	`string`	—	Visual variant.
`size`	`string`	—	Control size.
`asChild`	`boolean`	—	Render as the child element via Slot.
`disabled`	`boolean`	—	Disables pointer and keyboard interaction.
`type`	`string`	—	Native type of the underlying element.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

AiCodeBlockBodyProps

Extends Omit<HTMLAttributes<HTMLDivElement>, "children">

Prop	Type	Default	Description
`children`*	`AiCodeBlockChildren`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.
`id`	`string`	—	DOM id of the root element.

AiCodeBlockItemProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`value`*	`string`	—	Controlled value.
`lineNumbers`	`boolean`	`false`	—
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

AiCodeBlockContentProps

Extends HTMLAttributes<HTMLPreElement>

Prop	Type	Default	Description
`language`	`BundledLanguage`	—	—
`children`*	`string`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.
`id`	`string`	—	DOM id of the root element.