100 lines
3.8 KiB
TypeScript
100 lines
3.8 KiB
TypeScript
import React from "react";
|
|
import { ChatCompletionMessageParam } from "openai/resources/index";
|
|
import { twMerge } from "tailwind-merge";
|
|
import { Bot, User } 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 Row from "../../layout/Row";
|
|
import Card from "../Card";
|
|
import Border from "../Border";
|
|
import MarkdownEditorPreviewComponent from "../../mdx/markdown/MarkdownEditorPreviewComponent";
|
|
|
|
type Props = {
|
|
history: ChatCompletionMessageParam[];
|
|
};
|
|
|
|
export default function AIPromptHistoryModal({ history }: Props) {
|
|
if (!history[0]) return null;
|
|
|
|
return (
|
|
<Modal
|
|
target={
|
|
<Button
|
|
title="View Chat History"
|
|
size="smaller"
|
|
color="gray"
|
|
variant="outlined"
|
|
>
|
|
View History
|
|
</Button>
|
|
}
|
|
className="max-w-[900px] bg-slate-100 dark:bg-white/5 xl:p-10"
|
|
>
|
|
<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 (
|
|
<Row
|
|
key={index}
|
|
className="w-full items-start justify-end"
|
|
>
|
|
<Card
|
|
className={twMerge(
|
|
"bg-background-dark text-foreground-dark dark:!bg-background-light dark:text-foreground-light"
|
|
)}
|
|
>
|
|
{hst.content?.toString()}
|
|
</Card>
|
|
|
|
<Border className="w-10 h-10 rounded-full p-2 items-center justify-center">
|
|
<User />
|
|
</Border>
|
|
</Row>
|
|
);
|
|
}
|
|
return (
|
|
<Row
|
|
key={index}
|
|
className="w-full items-start flex-nowrap"
|
|
>
|
|
<Stack>
|
|
<Border
|
|
className={twMerge(
|
|
"w-10 h-10 rounded-full items-center justify-center bg-white p-2",
|
|
"dark:bg-background-dark"
|
|
)}
|
|
>
|
|
<Bot />
|
|
</Border>
|
|
</Stack>
|
|
<Card className="grow overflow-x-auto xl:p-8">
|
|
<MarkdownEditorPreviewComponent
|
|
value={hst.content?.toString() || ""}
|
|
maxHeight="none"
|
|
wrapperProps={{
|
|
className:
|
|
"border-none p-0 ai-response-content w-full",
|
|
}}
|
|
/>
|
|
</Card>
|
|
</Row>
|
|
);
|
|
})}
|
|
</Stack>
|
|
</Modal>
|
|
);
|
|
}
|