File size: 2,013 Bytes
6e1a53e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
import * as React from "react";
import Link from "next/link";
import { ChatBubbleIcon, ReaderIcon } from "@radix-ui/react-icons";
interface ChatMessage {
role: string;
content: { context: { source: string }[]; answer: string } | string;
}
interface ResponseType {
context: { source: string }[];
answer: string;
}
export function AgentMessage({ message }: { message: ChatMessage }) {
const [parsedSources, setParsedSources] = React.useState<string[]>([]);
const [parsedAnswer, setParsedAnswer] = React.useState("");
const parseResponse = (response: ResponseType | string) => {
const { content } = message;
let sources: string[] = [];
let answer: string = "";
if (typeof response === "object" && content.context && content.answer) {
sources = content.context.map((item) => item.source);
answer = content.answer;
} else if (typeof content === "string") {
const sourcesMatch = content.match(/<sources>(.*?)<\/sources>/s);
if (sourcesMatch && sourcesMatch[1]) {
sources = sourcesMatch[1].trim().split("\n");
}
answer = content.split("</sources>").pop() || "";
}
return { sources, answer };
};
React.useEffect(() => {
const parsedResponse = parseResponse(message);
setParsedSources(parsedResponse.sources);
setParsedAnswer(parsedResponse.answer);
}, [message]);
return (
<div className="space-y-4">
<h3 className="text-xl flex justify-start items-center">
<ReaderIcon />
Sources
</h3>
<ol className="space-y-2">
{parsedSources.map((source, idx) => source && (
<li key={idx} className="text-gray-600 underline underline-offset-2">
<Link href={JSON.parse(source).url}>{JSON.parse(source).url}</Link>
</li>
))}
</ol>
<h3 className="text-xl flex justify-start items-center">
<ChatBubbleIcon />
Answer
</h3>
<p className="text-gray-600">{parsedAnswer}</p>
</div>
);
}
|