Updates

components/elements/ai/AIPromptActionSection.tsx

@@ -1,10 +1,11 @@
 import { Send, X } from "lucide-react";
-import React, { Dispatch, SetStateAction } from "react";
-import { ChatCompletionMessageParam } from "openai/resources/index";
+import React, { type Dispatch, type SetStateAction } from "react";
+import type { ChatCompletionMessageParam } from "openai/resources/index";
 import Row from "../../layout/Row";
 import Button from "../../layout/Button";
 import CopySlug from "../CopySlug";
 import AIPromptHistoryModal from "./AIPromptHistoryModal";
+import AIVoiceTranscription from "./AIVoiceTranscription";
 
 type Props = {
     streamRes: string;
@@ -12,10 +13,15 @@ type Props = {
     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({
@@ -28,10 +34,24 @@ export default function AIPromptActionSection({
     setPrompt,
     currentPromptRef,
     promptInputRef,
+    user_image_url,
+    transcribing,
+    voice_transcription_fn,
+    last_response,
+    cancel_voice_transcription_fn,
 }: Props) {
     return (
         <Row className="w-full justify-between">
-            <Row className="gap-4">
+            <Row className="gap-4 px-2">
+                <AIVoiceTranscription
+                    transcribing={transcribing}
+                    voice_transcription_fn={voice_transcription_fn}
+                    cancel_voice_transcription_fn={
+                        cancel_voice_transcription_fn
+                    }
+                    history={history}
+                    last_response={last_response}
+                />
                 {streamRes.match(/./) && (
                     <React.Fragment>
                         <Button
@@ -53,10 +73,13 @@ export default function AIPromptActionSection({
                         />
                     </React.Fragment>
                 )}
+
+                <AIPromptHistoryModal
+                    history={history}
+                    user_image_url={user_image_url}
+                />
             </Row>
-            <Row>
-                <AIPromptHistoryModal history={history} />
-            </Row>
+
             <Row>
                 <Button
                     title="Send Prompt"
@@ -74,6 +97,7 @@ export default function AIPromptActionSection({
                         promptFn(prompt);
                     }}
                     loadingProps={{ size: "smaller" }}
+                    disabled={transcribing}
                 />
             </Row>
         </Row>