Updates
This commit is contained in:
@@ -0,0 +1,81 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
import { ChatCompletionMessageParam } from "openai/resources/index";
|
||||
import React from "react";
|
||||
import Paper from "../Paper";
|
||||
import Stack from "../../layout/Stack";
|
||||
import AIPromptPreview from "./AIPromptPreview";
|
||||
import LoadingOverlay from "../LoadingOverlay";
|
||||
import Textarea from "../../form/Textarea";
|
||||
import AIPromptActionSection from "./AIPromptActionSection";
|
||||
import Card from "../Card";
|
||||
import Row from "../../layout/Row";
|
||||
import Span from "../../layout/Span";
|
||||
import { MessageCircleMore } from "lucide-react";
|
||||
|
||||
type Props = {
|
||||
model?: string;
|
||||
promptFn: (prompt: string) => void;
|
||||
history?: ChatCompletionMessageParam[];
|
||||
loading?: boolean;
|
||||
mdRes?: string;
|
||||
setMdRes: React.Dispatch<React.SetStateAction<string>>;
|
||||
};
|
||||
|
||||
export default function AIPromptBlock({
|
||||
model,
|
||||
promptFn,
|
||||
history = [],
|
||||
loading = false,
|
||||
mdRes = "",
|
||||
setMdRes,
|
||||
}: Props) {
|
||||
const [prompt, setPrompt] = React.useState("");
|
||||
const currentPromptRef = React.useRef("");
|
||||
const promptInputRef = React.useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
return (
|
||||
<Paper className="">
|
||||
<Stack className="w-full">
|
||||
{currentPromptRef.current && (
|
||||
<Row className="w-full justify-end">
|
||||
<Card className="py-1.5 px-2.5 text-xs">
|
||||
<Row>
|
||||
<Span>{currentPromptRef.current}</Span>
|
||||
<MessageCircleMore
|
||||
size={15}
|
||||
opacity={0.5}
|
||||
className="-mt-[1px]"
|
||||
/>
|
||||
</Row>
|
||||
</Card>
|
||||
</Row>
|
||||
)}
|
||||
<AIPromptPreview
|
||||
setStreamRes={setMdRes}
|
||||
streamRes={mdRes}
|
||||
history={history}
|
||||
/>
|
||||
<Stack className="w-full relative">
|
||||
{loading && <LoadingOverlay />}
|
||||
<Textarea
|
||||
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.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>
|
||||
</Stack>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
import React from "react";
|
||||
import { ChatCompletionMessageParam } from "openai/resources/index";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import { Bot, User } 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 MarkdownEditorPreviewComponent from "../../mdx/markdown/MarkdownEditorPreviewComponent";
|
||||
|
||||
type Props = {
|
||||
history: ChatCompletionMessageParam[];
|
||||
};
|
||||
|
||||
export default function AIPromptHistoryModal({ history }: Props) {
|
||||
if (!history[0]) return null;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
target={
|
||||
<Button
|
||||
title="View Chat History"
|
||||
size="smaller"
|
||||
color="gray"
|
||||
variant="outlined"
|
||||
>
|
||||
View History
|
||||
</Button>
|
||||
}
|
||||
className="max-w-[900px] bg-slate-100 dark:bg-white/5 xl:p-10"
|
||||
>
|
||||
<Stack className="gap-10 w-full">
|
||||
<Stack className="gap-1">
|
||||
<H2 className="!text-xl m-0">Chat History</H2>
|
||||
<Span className="text-xs">
|
||||
AI chat history for this session.
|
||||
</Span>
|
||||
</Stack>
|
||||
|
||||
<Divider />
|
||||
|
||||
{history.map((hst, index) => {
|
||||
if (hst.role == "user") {
|
||||
return (
|
||||
<Row
|
||||
key={index}
|
||||
className="w-full items-start justify-end"
|
||||
>
|
||||
<Card
|
||||
className={twMerge(
|
||||
"bg-background-dark text-foreground-dark dark:!bg-background-light dark:text-foreground-light"
|
||||
)}
|
||||
>
|
||||
{hst.content?.toString()}
|
||||
</Card>
|
||||
|
||||
<Border className="w-10 h-10 rounded-full p-2 items-center justify-center">
|
||||
<User />
|
||||
</Border>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Row
|
||||
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">
|
||||
<MarkdownEditorPreviewComponent
|
||||
value={hst.content?.toString() || ""}
|
||||
maxHeight="none"
|
||||
wrapperProps={{
|
||||
className:
|
||||
"border-none p-0 ai-response-content w-full",
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
</Row>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
import Divider from "@/src/components/twui/layout/Divider";
|
||||
import Stack from "@/src/components/twui/layout/Stack";
|
||||
import React from "react";
|
||||
import MarkdownEditorPreviewComponent from "@/src/components/twui/mdx/markdown/MarkdownEditorPreviewComponent";
|
||||
import { ChatCompletionMessageParam } from "openai/resources/index";
|
||||
|
||||
type Props = {
|
||||
streamRes: string;
|
||||
setStreamRes: React.Dispatch<React.SetStateAction<string>>;
|
||||
history: ChatCompletionMessageParam[];
|
||||
};
|
||||
|
||||
export default function AIPromptPreview({
|
||||
setStreamRes,
|
||||
streamRes,
|
||||
history,
|
||||
}: Props) {
|
||||
const responseContentRef = React.useRef<HTMLDivElement>(null);
|
||||
const isContentInterrupted = React.useRef(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (isContentInterrupted.current) return;
|
||||
|
||||
if (responseContentRef.current) {
|
||||
responseContentRef.current.scrollTop =
|
||||
responseContentRef.current.scrollHeight;
|
||||
}
|
||||
}, [streamRes]);
|
||||
|
||||
if (!streamRes?.match(/./)) return null;
|
||||
|
||||
return (
|
||||
<Stack className="w-full">
|
||||
<MarkdownEditorPreviewComponent
|
||||
value={streamRes}
|
||||
maxHeight="40vh"
|
||||
wrapperProps={{
|
||||
className: "border-none p-0 ai-response-content",
|
||||
componentRef: responseContentRef as any,
|
||||
onMouseEnter: () => {
|
||||
isContentInterrupted.current = true;
|
||||
},
|
||||
onMouseLeave: () => {
|
||||
isContentInterrupted.current = false;
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Divider />
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user