138 lines
4.8 KiB
TypeScript
138 lines
4.8 KiB
TypeScript
'use client';
|
|
|
|
import { Attachment, ToolInvocation } from 'ai';
|
|
import cx from 'classnames';
|
|
import { motion } from 'framer-motion';
|
|
import { Sparkles } from 'lucide-react';
|
|
import { Dispatch, ReactNode, SetStateAction } from 'react';
|
|
|
|
import { UICanvas } from './canvas';
|
|
import { DocumentToolCall, DocumentToolResult } from './document';
|
|
import { Markdown } from './markdown';
|
|
import { PreviewAttachment } from './preview-attachment';
|
|
import { Weather } from './weather';
|
|
|
|
export const Message = ({
|
|
role,
|
|
content,
|
|
toolInvocations,
|
|
attachments,
|
|
canvas,
|
|
setCanvas,
|
|
}: {
|
|
role: string;
|
|
content: string | ReactNode;
|
|
toolInvocations: Array<ToolInvocation> | undefined;
|
|
attachments?: Array<Attachment>;
|
|
canvas: UICanvas;
|
|
setCanvas: Dispatch<SetStateAction<UICanvas>>;
|
|
}) => {
|
|
return (
|
|
<motion.div
|
|
className="w-full mx-auto max-w-3xl px-4 group/message "
|
|
initial={{ y: 5, opacity: 0 }}
|
|
animate={{ y: 0, opacity: 1 }}
|
|
data-role={role}
|
|
>
|
|
<div
|
|
className={cx(
|
|
'flex gap-4 group-data-[role=user]/message:px-5 w-full group-data-[role=user]/message:w-fit group-data-[role=user]/message:ml-auto group-data-[role=user]/message:max-w-2xl group-data-[role=user]/message:py-3.5 rounded-xl',
|
|
{
|
|
'group-data-[role=user]/message:bg-muted': !canvas,
|
|
'group-data-[role=user]/message:bg-zinc-300 dark:group-data-[role=user]/message:bg-zinc-800':
|
|
canvas,
|
|
}
|
|
)}
|
|
>
|
|
{role === 'assistant' && (
|
|
<div className="size-8 flex items-center rounded-full justify-center ring-1 shrink-0 ring-border">
|
|
<Sparkles className="size-4" />
|
|
</div>
|
|
)}
|
|
<div className="flex flex-col gap-2 w-full">
|
|
{content && (
|
|
<div className="flex flex-col gap-4">
|
|
<Markdown>{content as string}</Markdown>
|
|
</div>
|
|
)}
|
|
|
|
{toolInvocations && toolInvocations.length > 0 && (
|
|
<div className="flex flex-col gap-4">
|
|
{toolInvocations.map((toolInvocation) => {
|
|
const { toolName, toolCallId, state, args } = toolInvocation;
|
|
|
|
if (state === 'result') {
|
|
const { result } = toolInvocation;
|
|
|
|
return (
|
|
<div key={toolCallId}>
|
|
{toolName === 'getWeather' ? (
|
|
<Weather weatherAtLocation={result} />
|
|
) : toolName === 'createDocument' ? (
|
|
<DocumentToolResult
|
|
type="create"
|
|
result={result}
|
|
canvas={canvas}
|
|
setCanvas={setCanvas}
|
|
/>
|
|
) : toolName === 'updateDocument' ? (
|
|
<DocumentToolResult
|
|
type="update"
|
|
result={result}
|
|
canvas={canvas}
|
|
setCanvas={setCanvas}
|
|
/>
|
|
) : toolName === 'requestSuggestions' ? (
|
|
<DocumentToolResult
|
|
type="request-suggestions"
|
|
result={result}
|
|
canvas={canvas}
|
|
setCanvas={setCanvas}
|
|
/>
|
|
) : (
|
|
<pre>{JSON.stringify(result, null, 2)}</pre>
|
|
)}
|
|
</div>
|
|
);
|
|
} else {
|
|
return (
|
|
<div
|
|
key={toolCallId}
|
|
className={cx({
|
|
skeleton: ['getWeather'].includes(toolName),
|
|
})}
|
|
>
|
|
{toolName === 'getWeather' ? (
|
|
<Weather />
|
|
) : toolName === 'createDocument' ? (
|
|
<DocumentToolCall type="create" args={args} />
|
|
) : toolName === 'updateDocument' ? (
|
|
<DocumentToolCall type="update" args={args} />
|
|
) : toolName === 'requestSuggestions' ? (
|
|
<DocumentToolCall
|
|
type="request-suggestions"
|
|
args={args}
|
|
/>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
})}
|
|
</div>
|
|
)}
|
|
|
|
{attachments && (
|
|
<div className="flex flex-row gap-2">
|
|
{attachments.map((attachment) => (
|
|
<PreviewAttachment
|
|
key={attachment.url}
|
|
attachment={attachment}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
};
|