82 lines
2.7 KiB
TypeScript
82 lines
2.7 KiB
TypeScript
import { Send, X } from "lucide-react";
|
|
import React, { Dispatch, SetStateAction } from "react";
|
|
import { ChatCompletionMessageParam } from "openai/resources/index";
|
|
import Row from "../../layout/Row";
|
|
import Button from "../../layout/Button";
|
|
import CopySlug from "../CopySlug";
|
|
import AIPromptHistoryModal from "./AIPromptHistoryModal";
|
|
|
|
type Props = {
|
|
streamRes: string;
|
|
setStreamRes: Dispatch<SetStateAction<string>>;
|
|
setPrompt: Dispatch<SetStateAction<string>>;
|
|
loading: boolean;
|
|
promptFn: (prompt: string) => void;
|
|
history: ChatCompletionMessageParam[];
|
|
prompt: string;
|
|
currentPromptRef: React.MutableRefObject<string>;
|
|
promptInputRef: React.RefObject<HTMLTextAreaElement>;
|
|
};
|
|
|
|
export default function AIPromptActionSection({
|
|
streamRes,
|
|
setStreamRes,
|
|
loading,
|
|
promptFn,
|
|
history,
|
|
prompt,
|
|
setPrompt,
|
|
currentPromptRef,
|
|
promptInputRef,
|
|
}: Props) {
|
|
return (
|
|
<Row className="w-full justify-between">
|
|
<Row className="gap-4">
|
|
{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>
|
|
)}
|
|
</Row>
|
|
<Row>
|
|
<AIPromptHistoryModal history={history} />
|
|
</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" }}
|
|
/>
|
|
</Row>
|
|
</Row>
|
|
);
|
|
}
|