components/Message.tsx (53 lines of code) (raw):
import { ChatMessage } from "@/lib/assistant";
import React from "react";
import ReactMarkdown from "react-markdown";
interface MessageProps {
message: ChatMessage;
view: "user" | "agent";
suggestion?: boolean;
}
const Message: React.FC<MessageProps> = ({
message,
view,
suggestion = false,
}) => {
return (
<div className="text-sm">
{(message.role === "user" && view === "user") ||
(message.role === "agent" && view === "agent") ? (
<div className="flex justify-end">
<div>
<div
className={`ml-4 rounded-[16px] rounded-br-[4px] px-4 py-2 md:ml-24 bg-black text-white font-light ${
suggestion
? "bg-zinc-50 text-zinc-900 shadow-lg border border-zinc-100"
: ""
}`}
>
<div>
<div>
<ReactMarkdown>
{message.content[0].text as string}
</ReactMarkdown>
</div>
</div>
</div>
</div>
</div>
) : (
<div className="flex flex-col">
<div className="flex">
<div className="mr-4 rounded-[16px] rounded-bl-[4px] px-4 py-2 md:mr-24 text-zinc-900 bg-[#ECECF1] font-light">
<div>
<ReactMarkdown>
{message.content[0].text as string}
</ReactMarkdown>
</div>
</div>
</div>
</div>
)}
</div>
);
};
export default Message;