78 lines
2.6 KiB
TypeScript
78 lines
2.6 KiB
TypeScript
import type { ChatCompletionMessageParam } from "openai/resources/index";
|
|
import { twMerge } from "tailwind-merge";
|
|
import { Bot, User } from "lucide-react";
|
|
import Stack from "../../layout/Stack";
|
|
import Row from "../../layout/Row";
|
|
import Card from "../Card";
|
|
import Border from "../Border";
|
|
import Img from "../../layout/Img";
|
|
import type { VoiceTranscriptionParams } from "./types";
|
|
import ReactMarkdown from "react-markdown";
|
|
import remarkGfm from "remark-gfm";
|
|
import AIVoiceTranscription from "./AIVoiceTranscription";
|
|
import Span from "../../layout/Span";
|
|
import CopySlug from "../CopySlug";
|
|
import EmptyContent from "../EmptyContent";
|
|
|
|
type Props = VoiceTranscriptionParams & {
|
|
history: ChatCompletionMessageParam;
|
|
user_image_url?: string;
|
|
};
|
|
|
|
export default function AIPromptHistoryAssistantCard({
|
|
history,
|
|
user_image_url,
|
|
cancel_voice_transcription_fn,
|
|
transcribing,
|
|
voice_transcription_fn,
|
|
}: Props) {
|
|
const text_content = history.content?.toString();
|
|
|
|
if (!text_content) {
|
|
return <EmptyContent title="No Text response content" />;
|
|
}
|
|
|
|
return (
|
|
<Row 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>
|
|
|
|
<Stack className="grow items-stretch">
|
|
<Card className="w-full overflow-x-auto xl:p-8">
|
|
<Stack className="twui-llm-chat-block">
|
|
<ReactMarkdown remarkPlugins={[remarkGfm]}>
|
|
{history.content?.toString()}
|
|
</ReactMarkdown>
|
|
</Stack>
|
|
</Card>{" "}
|
|
<Row>
|
|
<AIVoiceTranscription
|
|
transcribing={transcribing}
|
|
voice_transcription_fn={voice_transcription_fn}
|
|
cancel_voice_transcription_fn={
|
|
cancel_voice_transcription_fn
|
|
}
|
|
history={[history]}
|
|
last_response={history.content?.toString()}
|
|
/>
|
|
|
|
<CopySlug
|
|
slugText={text_content}
|
|
justIcon
|
|
iconProps={{ size: 18, opacity: 0.7 }}
|
|
title="Copy Content"
|
|
/>
|
|
</Row>
|
|
</Stack>
|
|
</Row>
|
|
);
|
|
}
|