74 lines
2.4 KiB
TypeScript
74 lines
2.4 KiB
TypeScript
import type { ChatCompletionMessageParam } from "openai/resources/index";
|
|
import React from "react";
|
|
import Stack from "../../layout/Stack";
|
|
import LoadingOverlay from "../LoadingOverlay";
|
|
import Textarea from "../../form/Textarea";
|
|
import AIPromptActionSection from "./AIPromptActionSection";
|
|
|
|
type Props = {
|
|
model?: string;
|
|
promptFn: (prompt: string) => void;
|
|
history?: ChatCompletionMessageParam[];
|
|
loading?: boolean;
|
|
mdRes?: string;
|
|
setMdRes: React.Dispatch<React.SetStateAction<string>>;
|
|
placeholder?: string;
|
|
};
|
|
|
|
export default function AIPromptBlockInputSection({
|
|
model,
|
|
promptFn,
|
|
history = [],
|
|
loading = false,
|
|
mdRes = "",
|
|
setMdRes,
|
|
placeholder,
|
|
}: Props) {
|
|
const [prompt, setPrompt] = React.useState("");
|
|
const currentPromptRef = React.useRef("");
|
|
const promptInputRef = React.useRef<HTMLTextAreaElement>(null);
|
|
|
|
return (
|
|
<Stack className="w-full relative">
|
|
{loading && <LoadingOverlay />}
|
|
<Textarea
|
|
placeholder={
|
|
placeholder || (model ? `Prompt ${model}` : "Prompt AI")
|
|
}
|
|
wrapperProps={{ className: "outline-none" }}
|
|
wrapperWrapperProps={{ className: "w-full" }}
|
|
value={prompt}
|
|
onChange={(e) => {
|
|
setPrompt(e.target.value);
|
|
}}
|
|
onKeyDown={(e) => {
|
|
if (e.key == "Enter" && !e.ctrlKey && !e.shiftKey) {
|
|
e.preventDefault();
|
|
currentPromptRef.current = prompt;
|
|
setTimeout(() => {
|
|
setPrompt("");
|
|
if (promptInputRef.current) {
|
|
promptInputRef.current.value = "";
|
|
}
|
|
}, 200);
|
|
promptFn(prompt);
|
|
}
|
|
}}
|
|
componentRef={promptInputRef}
|
|
// autoFocus
|
|
/>
|
|
<AIPromptActionSection
|
|
loading={loading}
|
|
promptFn={promptFn}
|
|
setStreamRes={setMdRes}
|
|
streamRes={mdRes}
|
|
history={history}
|
|
prompt={prompt}
|
|
setPrompt={setPrompt}
|
|
currentPromptRef={currentPromptRef}
|
|
promptInputRef={promptInputRef as any}
|
|
/>
|
|
</Stack>
|
|
);
|
|
}
|