Updates

components/elements/ai/AIPromptHistoryModal.tsx

@@ -1,21 +1,16 @@
 import type { ChatCompletionMessageParam } from "openai/resources/index";
-import { twMerge } from "tailwind-merge";
-import { Bot, History, User } from "lucide-react";
+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 Row from "../../layout/Row";
-import Card from "../Card";
-import Border from "../Border";
+import type { VoiceTranscriptionParams } from "./types";
+import AIPromptHistoryUserCard from "./AIPromptHistoryUserCard";
+import AIPromptHistoryAssistantCard from "./AIPromptHistoryAssistantCard";
 
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
-import Img from "../../layout/Img";
-
-type Props = {
+type Props = VoiceTranscriptionParams & {
     history: ChatCompletionMessageParam[];
     user_image_url?: string;
 };
@@ -23,6 +18,7 @@ type Props = {
 export default function AIPromptHistoryModal({
     history,
     user_image_url,
+    ...props
 }: Props) {
     if (!history[0]) return null;
 
@@ -54,60 +50,22 @@ export default function AIPromptHistoryModal({
                 {history.map((hst, index) => {
                     if (hst.role == "user") {
                         return (
-                            <Row
+                            <AIPromptHistoryUserCard
+                                history={hst}
+                                {...props}
                                 key={index}
-                                className="w-full items-start justify-end flex-nowrap"
-                            >
-                                <Card
-                                    className={twMerge(
-                                        "bg-background-dark text-foreground-dark dark:!bg-background-light dark:text-foreground-light",
-                                        "twui-llm-user-prompt-history-block",
-                                    )}
-                                >
-                                    <Stack className="twui-llm-chat-block">
-                                        {hst.content?.toString()}
-                                    </Stack>
-                                </Card>
-
-                                {user_image_url ? (
-                                    <Img
-                                        alt="Prompting user"
-                                        size={30}
-                                        circle
-                                        src={user_image_url}
-                                    />
-                                ) : (
-                                    <Border className="w-10 h-10 rounded-full p-2 items-center justify-center">
-                                        <User />
-                                    </Border>
-                                )}
-                            </Row>
+                                user_image_url={user_image_url}
+                            />
                         );
                     }
 
                     return (
-                        <Row
+                        <AIPromptHistoryAssistantCard
+                            history={hst}
+                            {...props}
                             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">
-                                <Stack className="twui-llm-chat-block">
-                                    <ReactMarkdown remarkPlugins={[remarkGfm]}>
-                                        {hst.content?.toString()}
-                                    </ReactMarkdown>
-                                </Stack>
-                            </Card>
-                        </Row>
+                            user_image_url={user_image_url}
+                        />
                     );
                 })}
             </Stack>