106 lines
3.6 KiB
TypeScript
106 lines
3.6 KiB
TypeScript
import { Send, X } from "lucide-react";
|
|
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;
|
|
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({
|
|
streamRes,
|
|
setStreamRes,
|
|
loading,
|
|
promptFn,
|
|
history,
|
|
prompt,
|
|
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 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
|
|
title="Clear AI Result"
|
|
variant="ghost"
|
|
size="smaller"
|
|
color="gray"
|
|
className="px-0"
|
|
beforeIcon={<X size={20} />}
|
|
onClick={() => {
|
|
setStreamRes("");
|
|
}}
|
|
/>
|
|
<CopySlug
|
|
slugText={streamRes}
|
|
justIcon
|
|
iconProps={{ size: 18 }}
|
|
title="Copy Content"
|
|
/>
|
|
</React.Fragment>
|
|
)}
|
|
|
|
<AIPromptHistoryModal
|
|
history={history}
|
|
user_image_url={user_image_url}
|
|
/>
|
|
</Row>
|
|
|
|
<Row>
|
|
<Button
|
|
title="Send Prompt"
|
|
beforeIcon={<Send size={20} />}
|
|
loading={loading}
|
|
className="p-2"
|
|
onClick={() => {
|
|
currentPromptRef.current = prompt;
|
|
setTimeout(() => {
|
|
setPrompt("");
|
|
if (promptInputRef.current) {
|
|
promptInputRef.current.value = "";
|
|
}
|
|
}, 200);
|
|
promptFn(prompt);
|
|
}}
|
|
loadingProps={{ size: "smaller" }}
|
|
disabled={transcribing}
|
|
/>
|
|
</Row>
|
|
</Row>
|
|
);
|
|
}
|