AiResponse

Use the AiResponse component to animate AI-generated content.

OverviewPropertiesChangelog3.14.0

Changes to AiResponse. The full components changelog also lists package-wide and cross-cutting entries.

3.14.0

Updates

• You can now render the content of a fenced code block as a component with the customCodeBlockRenderers prop. (DI-30803)

How to opt in

customCodeBlockRenderers maps a fence language to the component that renders blocks of that language, which lets a response carry a payload that is displayed as a component instead of as code. Blocks with any other language, and inline code, keep their default rendering.

The renderer receives the code of the block, its language, and isComplete. Content is revealed word by word, so a code block is rendered long before its content is complete. isComplete reports whether the closing fence of the block has arrived, which lets you show a placeholder until then.

import {
  AiResponse,
  type AiResponseCodeBlockProps,
  Skeleton,
} from '`@dynatrace/strato-components/content';`

const Visualization = ({ code, isComplete }: AiResponseCodeBlockProps) => {
  if (!isComplete) {
    return <Skeleton height={300} />;
  }
  return <DonutChart {...JSON.parse(code)} />;
};

const renderers = { 'dt-visualization': Visualization };

const Chat = ({ response }) => (
  <AiResponse customCodeBlockRenderers={renderers}>{response}</AiResponse>
);