75 lines
2.4 KiB
TypeScript
75 lines
2.4 KiB
TypeScript
import type { ChatCompletionMessageParam } from "openai/resources/index";
|
|
import { History } from "lucide-react";
|
|
import Modal from "../Modal";
|
|
import Button from "../../layout/Button";
|
|
import Stack from "../../layout/Stack";
|
|
import H2 from "../../layout/H2";
|
|
import Span from "../../layout/Span";
|
|
import Divider from "../../layout/Divider";
|
|
import type { VoiceTranscriptionParams } from "./types";
|
|
import AIPromptHistoryUserCard from "./AIPromptHistoryUserCard";
|
|
import AIPromptHistoryAssistantCard from "./AIPromptHistoryAssistantCard";
|
|
|
|
type Props = VoiceTranscriptionParams & {
|
|
history: ChatCompletionMessageParam[];
|
|
user_image_url?: string;
|
|
};
|
|
|
|
export default function AIPromptHistoryModal({
|
|
history,
|
|
user_image_url,
|
|
...props
|
|
}: Props) {
|
|
if (!history[0]) return null;
|
|
|
|
return (
|
|
<Modal
|
|
target={
|
|
<Button
|
|
title="View Chat History"
|
|
size="smaller"
|
|
color="gray"
|
|
variant="ghost"
|
|
className="p-1!"
|
|
>
|
|
<History size={20} opacity={0.7} />
|
|
</Button>
|
|
}
|
|
className="max-w-[900px] bg-slate-100 dark:bg-white/5 xl:p-8"
|
|
>
|
|
<Stack className="gap-10 w-full">
|
|
<Stack className="gap-1">
|
|
<H2 className="!text-xl m-0">Chat History</H2>
|
|
<Span className="text-xs">
|
|
AI chat history for this session.
|
|
</Span>
|
|
</Stack>
|
|
|
|
<Divider />
|
|
|
|
{history.map((hst, index) => {
|
|
if (hst.role == "user") {
|
|
return (
|
|
<AIPromptHistoryUserCard
|
|
history={hst}
|
|
{...props}
|
|
key={index}
|
|
user_image_url={user_image_url}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<AIPromptHistoryAssistantCard
|
|
history={hst}
|
|
{...props}
|
|
key={index}
|
|
user_image_url={user_image_url}
|
|
/>
|
|
);
|
|
})}
|
|
</Stack>
|
|
</Modal>
|
|
);
|
|
}
|