Template
46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
'use client';
|
|
|
|
import { getToolName } from 'ai';
|
|
import {
|
|
Tool,
|
|
ToolContent,
|
|
ToolHeader,
|
|
ToolInput,
|
|
ToolOutput,
|
|
} from '@/components/ai-elements/tool';
|
|
import { Loader } from '@/components/ai-elements/loader';
|
|
import { toolComponents } from './registry';
|
|
import type { ToolComponentProps } from './types';
|
|
|
|
export function ToolPartRenderer({ part }: Pick<ToolComponentProps, 'part'>) {
|
|
const toolName = getToolName(part);
|
|
const CustomRenderer = toolComponents[toolName];
|
|
|
|
if (CustomRenderer) {
|
|
return <CustomRenderer part={part} toolName={toolName} />;
|
|
}
|
|
|
|
if (part.state === 'input-streaming' && !part.input) {
|
|
return (
|
|
<div className="mb-4 flex items-center gap-2 text-muted-foreground text-sm">
|
|
<Loader size={14} />
|
|
<span>Running {toolName}...</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Tool>
|
|
<ToolHeader
|
|
title={toolName}
|
|
type={part.type === 'dynamic-tool' ? `tool-${toolName}` : part.type}
|
|
state={part.state}
|
|
/>
|
|
<ToolContent>
|
|
{part.input != null && <ToolInput input={part.input} />}
|
|
<ToolOutput output={part.output} errorText={part.errorText} />
|
|
</ToolContent>
|
|
</Tool>
|
|
);
|
|
}
|