Updates

components/elements/ai/AIPromptActionSection.tsx

@@ -6,22 +6,20 @@ import Button from "../../layout/Button";
 import CopySlug from "../CopySlug";
 import AIPromptHistoryModal from "./AIPromptHistoryModal";
 import AIVoiceTranscription from "./AIVoiceTranscription";
+import type { VoiceTranscriptionParams } from "./types";
 
-type Props = {
+type Props = VoiceTranscriptionParams & {
     streamRes: string;
     setStreamRes: Dispatch<SetStateAction<string>>;
     setPrompt: Dispatch<SetStateAction<string>>;
     loading: boolean;
     promptFn: (prompt: string) => void;
-    voice_transcription_fn?: (params: { last_message?: string }) => void;
-    transcribing?: boolean;
     history: ChatCompletionMessageParam[];
     prompt: string;
     currentPromptRef: React.MutableRefObject<string>;
     promptInputRef: React.RefObject<HTMLTextAreaElement>;
     user_image_url?: string;
     last_response?: string;
-    cancel_voice_transcription_fn?: () => void;
 };
 
 export default function AIPromptActionSection({
@@ -77,6 +75,11 @@ export default function AIPromptActionSection({
                 <AIPromptHistoryModal
                     history={history}
                     user_image_url={user_image_url}
+                    transcribing={transcribing}
+                    voice_transcription_fn={voice_transcription_fn}
+                    cancel_voice_transcription_fn={
+                        cancel_voice_transcription_fn
+                    }
                 />
             </Row>
 

components/elements/ai/AIPromptHistoryAssistantCard.tsx

@@ -0,0 +1,77 @@
+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>
+    );
+}

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>

components/elements/ai/AIPromptHistoryUserCard.tsx

@@ -0,0 +1,48 @@
+import type { ChatCompletionMessageParam } from "openai/resources/index";
+import { twMerge } from "tailwind-merge";
+import { 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";
+
+type Props = VoiceTranscriptionParams & {
+    history: ChatCompletionMessageParam;
+    user_image_url?: string;
+};
+
+export default function AIPromptHistoryUserCard({
+    history,
+    user_image_url,
+    ...props
+}: Props) {
+    return (
+        <Row 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">
+                    {history.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>
+    );
+}

components/elements/ai/AIVoiceTranscription.tsx

@@ -1,6 +1,6 @@
 import { Speech, Voicemail, X } from "lucide-react";
 import Button from "../../layout/Button";
-import { ChatCompletionMessageParam } from "openai/resources";
+import type { ChatCompletionMessageParam } from "openai/resources";
 import Row from "../../layout/Row";
 import Loading from "../Loading";
 import Border from "../Border";

components/elements/ai/types.ts

@@ -0,0 +1,5 @@
+export type VoiceTranscriptionParams = {
+    transcribing?: boolean;
+    cancel_voice_transcription_fn?: () => void;
+    voice_transcription_fn?: (params: { last_message?: string }) => void;
+};