77 lines
2.2 KiB
TypeScript
77 lines
2.2 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { Attachment, ToolInvocation } from "ai";
|
||
|
|
import { motion } from "framer-motion";
|
||
|
|
import { ReactNode } from "react";
|
||
|
|
|
||
|
|
import { BotIcon, UserIcon } from "./icons";
|
||
|
|
import { Markdown } from "./markdown";
|
||
|
|
import { PreviewAttachment } from "./preview-attachment";
|
||
|
|
import { Weather } from "./weather";
|
||
|
|
|
||
|
|
export const Message = ({
|
||
|
|
role,
|
||
|
|
content,
|
||
|
|
toolInvocations,
|
||
|
|
attachments,
|
||
|
|
}: {
|
||
|
|
role: string;
|
||
|
|
content: string | ReactNode;
|
||
|
|
toolInvocations: Array<ToolInvocation> | undefined;
|
||
|
|
attachments?: Array<Attachment>;
|
||
|
|
}) => {
|
||
|
|
return (
|
||
|
|
<motion.div
|
||
|
|
className={`flex flex-row gap-4 px-4 w-full md:w-[500px] md:px-0 first-of-type:pt-20`}
|
||
|
|
initial={{ y: 5, opacity: 0 }}
|
||
|
|
animate={{ y: 0, opacity: 1 }}
|
||
|
|
>
|
||
|
|
<div className="size-[24px] flex flex-col justify-center items-center shrink-0 text-zinc-400">
|
||
|
|
{role === "assistant" ? <BotIcon /> : <UserIcon />}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex flex-col gap-2 w-full">
|
||
|
|
{content && (
|
||
|
|
<div className="text-zinc-800 dark:text-zinc-300 flex flex-col gap-4">
|
||
|
|
<Markdown>{content as string}</Markdown>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{toolInvocations && (
|
||
|
|
<div className="flex flex-col gap-4">
|
||
|
|
{toolInvocations.map((toolInvocation) => {
|
||
|
|
const { toolName, toolCallId, state } = toolInvocation;
|
||
|
|
|
||
|
|
if (state === "result") {
|
||
|
|
const { result } = toolInvocation;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div key={toolCallId}>
|
||
|
|
{toolName === "getWeather" ? (
|
||
|
|
<Weather weatherAtLocation={result} />
|
||
|
|
) : null}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
} else {
|
||
|
|
return (
|
||
|
|
<div key={toolCallId} className="skeleton">
|
||
|
|
{toolName === "getWeather" ? <Weather /> : null}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{attachments && (
|
||
|
|
<div className="flex flex-row gap-2">
|
||
|
|
{attachments.map((attachment) => (
|
||
|
|
<PreviewAttachment key={attachment.url} attachment={attachment} />
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
);
|
||
|
|
};
|