Refactor ListToolsTemplates component to use NavigationMenu for improved navigation; enhance template management with Edit and Delete buttons
This commit is contained in:
ecwu
183
src/listAPIs.tsx
183
src/listAPIs.tsx
@@ -1,14 +1,16 @@
|
|||||||
import { ChatStore, TemplateAPI } from "@/types/chatstore";
|
import { ChatStore, TemplateAPI } from "@/types/chatstore";
|
||||||
import { Tr } from "@/translate";
|
import { Tr } from "@/translate";
|
||||||
|
|
||||||
import { Card, CardHeader, CardTitle, CardFooter } from "@/components/ui/card";
|
|
||||||
import {
|
import {
|
||||||
Carousel,
|
NavigationMenu,
|
||||||
CarouselContent,
|
NavigationMenuContent,
|
||||||
CarouselItem,
|
NavigationMenuIndicator,
|
||||||
CarouselNext,
|
NavigationMenuItem,
|
||||||
CarouselPrevious,
|
NavigationMenuLink,
|
||||||
} from "@/components/ui/carousel";
|
NavigationMenuList,
|
||||||
|
NavigationMenuTrigger,
|
||||||
|
NavigationMenuViewport,
|
||||||
|
} from "@/components/ui/navigation-menu";
|
||||||
import { Button } from "./components/ui/button";
|
import { Button } from "./components/ui/button";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
@@ -31,79 +33,116 @@ export function ListAPIs({
|
|||||||
keyField,
|
keyField,
|
||||||
}: Props) {
|
}: Props) {
|
||||||
return (
|
return (
|
||||||
<div className="p-3 space-y-4">
|
<NavigationMenuItem>
|
||||||
<h2 className="text-2xl font-semibold">
|
<NavigationMenuTrigger>{label}</NavigationMenuTrigger>
|
||||||
{Tr(`Saved ${label} templates`)}
|
<NavigationMenuContent>
|
||||||
</h2>
|
<ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
|
||||||
<Carousel className="w-full">
|
|
||||||
<CarouselContent>
|
|
||||||
{tmps.map((t, index) => (
|
{tmps.map((t, index) => (
|
||||||
<CarouselItem key={index} className="md:basis-1/4 lg:basis-1/6">
|
<li>
|
||||||
<div className="p-1">
|
<NavigationMenuLink asChild>
|
||||||
<Card
|
<a
|
||||||
|
onClick={() => {
|
||||||
|
// @ts-ignore
|
||||||
|
chatStore[apiField] = t.endpoint;
|
||||||
|
// @ts-ignore
|
||||||
|
chatStore[keyField] = t.key;
|
||||||
|
setChatStore({ ...chatStore });
|
||||||
|
}}
|
||||||
className={cn(
|
className={cn(
|
||||||
"cursor-pointer transition-colors",
|
"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
|
||||||
chatStore[apiField as keyof ChatStore] === t.endpoint &&
|
chatStore[apiField as keyof ChatStore] === t.endpoint &&
|
||||||
chatStore[keyField as keyof ChatStore] === t.key
|
chatStore[keyField as keyof ChatStore] === t.key
|
||||||
? "bg-primary/10"
|
? "bg-accent text-accent-foreground"
|
||||||
: ""
|
: ""
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<CardHeader>
|
<div className="text-sm font-medium leading-none">
|
||||||
<CardTitle
|
{t.name}
|
||||||
className="text-center"
|
</div>
|
||||||
onClick={() => {
|
<p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
|
||||||
// @ts-ignore
|
{label === "API" ? t.endpoint : t.key}
|
||||||
chatStore[apiField] = t.endpoint;
|
</p>
|
||||||
// @ts-ignore
|
</a>
|
||||||
chatStore[keyField] = t.key;
|
</NavigationMenuLink>
|
||||||
setChatStore({ ...chatStore });
|
<div className="mt-2 flex justify-between">
|
||||||
}}
|
<Button
|
||||||
>
|
variant="ghost"
|
||||||
{t.name}
|
size="sm"
|
||||||
</CardTitle>
|
onClick={() => {
|
||||||
</CardHeader>
|
const name = prompt(`Give **${label}** template a name`);
|
||||||
<CardFooter className="flex justify-center gap-4">
|
if (!name) return;
|
||||||
<Button
|
t.name = name;
|
||||||
variant="ghost"
|
setTmps(structuredClone(tmps));
|
||||||
size="sm"
|
}}
|
||||||
onClick={() => {
|
>
|
||||||
const name = prompt(
|
Edit
|
||||||
`Give **${label}** template a name`
|
</Button>
|
||||||
);
|
<Button
|
||||||
if (!name) return;
|
variant="ghost"
|
||||||
t.name = name;
|
size="sm"
|
||||||
setTmps(structuredClone(tmps));
|
onClick={() => {
|
||||||
}}
|
if (
|
||||||
>
|
!confirm(
|
||||||
Edit
|
`Are you sure to delete this **${label}** template?`
|
||||||
</Button>
|
)
|
||||||
<Button
|
) {
|
||||||
variant="ghost"
|
return;
|
||||||
size="sm"
|
}
|
||||||
onClick={() => {
|
tmps.splice(index, 1);
|
||||||
if (
|
setTmps(structuredClone(tmps));
|
||||||
!confirm(
|
}}
|
||||||
`Are you sure to delete this **${label}** template?`
|
>
|
||||||
)
|
Delete
|
||||||
) {
|
</Button>
|
||||||
return;
|
|
||||||
}
|
|
||||||
tmps.splice(index, 1);
|
|
||||||
setTmps(structuredClone(tmps));
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Delete
|
|
||||||
</Button>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
</div>
|
</div>
|
||||||
</CarouselItem>
|
</li>
|
||||||
))}
|
))}
|
||||||
</CarouselContent>
|
</ul>
|
||||||
<CarouselPrevious />
|
</NavigationMenuContent>
|
||||||
<CarouselNext />
|
</NavigationMenuItem>
|
||||||
</Carousel>
|
// <div className="p-3 space-y-4">
|
||||||
</div>
|
// <h2 className="text-2xl font-semibold">
|
||||||
|
// {Tr(`Saved ${label} templates`)}
|
||||||
|
// </h2>
|
||||||
|
// <Carousel className="w-full">
|
||||||
|
// <CarouselContent>
|
||||||
|
// {tmps.map((t, index) => (
|
||||||
|
// <CarouselItem key={index} className="md:basis-1/4 lg:basis-1/6">
|
||||||
|
// <div className="p-1">
|
||||||
|
// <Card
|
||||||
|
// className={cn(
|
||||||
|
// "cursor-pointer transition-colors",
|
||||||
|
// chatStore[apiField as keyof ChatStore] === t.endpoint &&
|
||||||
|
// chatStore[keyField as keyof ChatStore] === t.key
|
||||||
|
// ? "bg-primary/10"
|
||||||
|
// : ""
|
||||||
|
// )}
|
||||||
|
// >
|
||||||
|
// <CardHeader>
|
||||||
|
// <CardTitle
|
||||||
|
// className="text-center"
|
||||||
|
// onClick={() => {
|
||||||
|
// // @ts-ignore
|
||||||
|
// chatStore[apiField] = t.endpoint;
|
||||||
|
// // @ts-ignore
|
||||||
|
// chatStore[keyField] = t.key;
|
||||||
|
// setChatStore({ ...chatStore });
|
||||||
|
// }}
|
||||||
|
// >
|
||||||
|
// {t.name}
|
||||||
|
// </CardTitle>
|
||||||
|
// </CardHeader>
|
||||||
|
// <CardFooter className="flex justify-center gap-4">
|
||||||
|
|
||||||
|
// </CardFooter>
|
||||||
|
// </Card>
|
||||||
|
// </div>
|
||||||
|
// </CarouselItem>
|
||||||
|
// ))}
|
||||||
|
// </CarouselContent>
|
||||||
|
// <CarouselPrevious />
|
||||||
|
// <CarouselNext />
|
||||||
|
// </Carousel>
|
||||||
|
// </div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,13 +1,16 @@
|
|||||||
import { ChatStore, TemplateTools } from "@/types/chatstore";
|
import { ChatStore, TemplateTools } from "@/types/chatstore";
|
||||||
import { Tr } from "@/translate";
|
import { Tr } from "@/translate";
|
||||||
import { Card, CardContent } from "@/components/ui/card";
|
|
||||||
import {
|
import {
|
||||||
Carousel,
|
NavigationMenu,
|
||||||
CarouselContent,
|
NavigationMenuContent,
|
||||||
CarouselItem,
|
NavigationMenuIndicator,
|
||||||
CarouselNext,
|
NavigationMenuItem,
|
||||||
CarouselPrevious,
|
NavigationMenuLink,
|
||||||
} from "@/components/ui/carousel";
|
NavigationMenuList,
|
||||||
|
NavigationMenuTrigger,
|
||||||
|
NavigationMenuViewport,
|
||||||
|
} from "@/components/ui/navigation-menu";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
import { Button } from "./components/ui/button";
|
import { Button } from "./components/ui/button";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
@@ -23,8 +26,8 @@ export function ListToolsTempaltes({
|
|||||||
setChatStore,
|
setChatStore,
|
||||||
}: Props) {
|
}: Props) {
|
||||||
return (
|
return (
|
||||||
<div className="p-3">
|
<NavigationMenuItem className="p-3">
|
||||||
<h2 className="text-lg font-semibold mb-4 flex items-center">
|
<NavigationMenuTrigger>
|
||||||
<span>{Tr(`Saved tools templates`)}</span>
|
<span>{Tr(`Saved tools templates`)}</span>
|
||||||
<Button
|
<Button
|
||||||
variant="link"
|
variant="link"
|
||||||
@@ -36,72 +39,67 @@ export function ListToolsTempaltes({
|
|||||||
>
|
>
|
||||||
{Tr(`Clear`)}
|
{Tr(`Clear`)}
|
||||||
</Button>
|
</Button>
|
||||||
</h2>
|
</NavigationMenuTrigger>
|
||||||
<Carousel className="w-full">
|
<NavigationMenuContent>
|
||||||
<CarouselContent>
|
<ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
|
||||||
{templateTools.map((t, index) => (
|
{templateTools.map((t, index) => (
|
||||||
<CarouselItem key={index} className="md:basis-1/2 lg:basis-1/3">
|
<li key={index}>
|
||||||
<div className="p-1">
|
<NavigationMenuLink asChild>
|
||||||
<Card
|
<a
|
||||||
className={`cursor-pointer ${
|
|
||||||
chatStore.toolsString === t.toolsString
|
|
||||||
? "border-primary"
|
|
||||||
: ""
|
|
||||||
}`}
|
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
chatStore.toolsString = t.toolsString;
|
chatStore.toolsString = t.toolsString;
|
||||||
setChatStore({ ...chatStore });
|
setChatStore({ ...chatStore });
|
||||||
}}
|
}}
|
||||||
|
className={cn(
|
||||||
|
"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
|
||||||
|
chatStore.toolsString === t.toolsString
|
||||||
|
? "bg-accent text-accent-foreground"
|
||||||
|
: ""
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
<CardContent className="p-4">
|
<div className="text-sm font-medium leading-none">
|
||||||
<div className="flex flex-col gap-2">
|
{t.name}
|
||||||
<span className="font-medium text-center">{t.name}</span>
|
</div>
|
||||||
<div className="flex justify-between mt-2">
|
<p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
|
||||||
<Button
|
{t.toolsString}
|
||||||
variant="ghost"
|
</p>
|
||||||
size="sm"
|
</a>
|
||||||
className="text-blue-500 hover:text-blue-600"
|
</NavigationMenuLink>
|
||||||
onClick={(e) => {
|
<div className="mt-2 flex justify-between">
|
||||||
e.stopPropagation();
|
<Button
|
||||||
const name = prompt(
|
variant="ghost"
|
||||||
`Give **tools** template a name`
|
size="sm"
|
||||||
);
|
onClick={() => {
|
||||||
if (!name) return;
|
const name = prompt(`Give **tools** template a name`);
|
||||||
t.name = name;
|
if (!name) return;
|
||||||
setTemplateTools(structuredClone(templateTools));
|
t.name = name;
|
||||||
}}
|
setTemplateTools(structuredClone(templateTools));
|
||||||
>
|
}}
|
||||||
Edit
|
>
|
||||||
</Button>
|
Edit
|
||||||
<Button
|
</Button>
|
||||||
variant="ghost"
|
<Button
|
||||||
size="sm"
|
variant="ghost"
|
||||||
className="text-red-500 hover:text-red-600"
|
size="sm"
|
||||||
onClick={(e) => {
|
onClick={() => {
|
||||||
e.stopPropagation();
|
if (
|
||||||
if (
|
!confirm(
|
||||||
!confirm(
|
`Are you sure to delete this **tools** template?`
|
||||||
`Are you sure to delete this **tools** template?`
|
)
|
||||||
)
|
) {
|
||||||
)
|
return;
|
||||||
return;
|
}
|
||||||
templateTools.splice(index, 1);
|
templateTools.splice(index, 1);
|
||||||
setTemplateTools(structuredClone(templateTools));
|
setTemplateTools(structuredClone(templateTools));
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Delete
|
Delete
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
</div>
|
||||||
</CarouselItem>
|
</li>
|
||||||
))}
|
))}
|
||||||
</CarouselContent>
|
</ul>
|
||||||
<CarouselPrevious />
|
</NavigationMenuContent>
|
||||||
<CarouselNext />
|
</NavigationMenuItem>
|
||||||
</Carousel>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -51,13 +51,16 @@ import {
|
|||||||
KeyIcon,
|
KeyIcon,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import { Switch } from "@/components/ui/switch";
|
import { Switch } from "@/components/ui/switch";
|
||||||
import {
|
|
||||||
Accordion,
|
|
||||||
AccordionContent,
|
|
||||||
AccordionItem,
|
|
||||||
AccordionTrigger,
|
|
||||||
} from "@/components/ui/accordion";
|
|
||||||
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
|
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
|
||||||
|
import {
|
||||||
|
NavigationMenu,
|
||||||
|
NavigationMenuContent,
|
||||||
|
NavigationMenuItem,
|
||||||
|
NavigationMenuLink,
|
||||||
|
NavigationMenuList,
|
||||||
|
NavigationMenuTrigger,
|
||||||
|
navigationMenuTriggerStyle,
|
||||||
|
} from "@/components/ui/navigation-menu";
|
||||||
|
|
||||||
export default function ChatBOX(props: {
|
export default function ChatBOX(props: {
|
||||||
db: Promise<IDBPDatabase<ChatStore>>;
|
db: Promise<IDBPDatabase<ChatStore>>;
|
||||||
@@ -453,36 +456,37 @@ export default function ChatBOX(props: {
|
|||||||
const userInputRef = createRef();
|
const userInputRef = createRef();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="grow flex flex-col p-2 w-full">
|
<>
|
||||||
{true && (
|
<div className="flex flex-col w-full">
|
||||||
<Settings
|
{true && (
|
||||||
chatStore={chatStore}
|
<Settings
|
||||||
setChatStore={setChatStore}
|
chatStore={chatStore}
|
||||||
setShow={setShowSettings}
|
setChatStore={setChatStore}
|
||||||
selectedChatStoreIndex={props.selectedChatIndex}
|
setShow={setShowSettings}
|
||||||
templates={templates}
|
selectedChatStoreIndex={props.selectedChatIndex}
|
||||||
setTemplates={setTemplates}
|
templates={templates}
|
||||||
templateAPIs={templateAPIs}
|
setTemplates={setTemplates}
|
||||||
setTemplateAPIs={setTemplateAPIs}
|
templateAPIs={templateAPIs}
|
||||||
templateAPIsWhisper={templateAPIsWhisper}
|
setTemplateAPIs={setTemplateAPIs}
|
||||||
setTemplateAPIsWhisper={setTemplateAPIsWhisper}
|
templateAPIsWhisper={templateAPIsWhisper}
|
||||||
templateAPIsTTS={templateAPIsTTS}
|
setTemplateAPIsWhisper={setTemplateAPIsWhisper}
|
||||||
setTemplateAPIsTTS={setTemplateAPIsTTS}
|
templateAPIsTTS={templateAPIsTTS}
|
||||||
templateAPIsImageGen={templateAPIsImageGen}
|
setTemplateAPIsTTS={setTemplateAPIsTTS}
|
||||||
setTemplateAPIsImageGen={setTemplateAPIsImageGen}
|
templateAPIsImageGen={templateAPIsImageGen}
|
||||||
templateTools={toolsTemplates}
|
setTemplateAPIsImageGen={setTemplateAPIsImageGen}
|
||||||
setTemplateTools={setTemplateTools}
|
templateTools={toolsTemplates}
|
||||||
/>
|
setTemplateTools={setTemplateTools}
|
||||||
)}
|
/>
|
||||||
{showSearch && (
|
)}
|
||||||
<Search
|
{showSearch && (
|
||||||
setSelectedChatIndex={props.setSelectedChatIndex}
|
<Search
|
||||||
db={props.db}
|
setSelectedChatIndex={props.setSelectedChatIndex}
|
||||||
chatStore={chatStore}
|
db={props.db}
|
||||||
setShow={setShowSearch}
|
chatStore={chatStore}
|
||||||
/>
|
setShow={setShowSearch}
|
||||||
)}
|
/>
|
||||||
<ChatMessageList>
|
)}
|
||||||
|
|
||||||
{!chatStore.apiKey && (
|
{!chatStore.apiKey && (
|
||||||
<Alert>
|
<Alert>
|
||||||
<KeyIcon className="h-4 w-4" />
|
<KeyIcon className="h-4 w-4" />
|
||||||
@@ -501,293 +505,288 @@ export default function ChatBOX(props: {
|
|||||||
</AlertDescription>
|
</AlertDescription>
|
||||||
</Alert>
|
</Alert>
|
||||||
)}
|
)}
|
||||||
<Accordion type="single" collapsible className="w-full">
|
<NavigationMenu>
|
||||||
<AccordionItem value="item-1">
|
<NavigationMenuList>
|
||||||
<AccordionTrigger>Saved Presets</AccordionTrigger>
|
{templateAPIs.length > 0 && (
|
||||||
<AccordionContent>
|
<ListAPIs
|
||||||
{templateAPIs.length > 0 && (
|
label="API"
|
||||||
<ListAPIs
|
tmps={templateAPIs}
|
||||||
label="API"
|
setTmps={setTemplateAPIs}
|
||||||
tmps={templateAPIs}
|
chatStore={chatStore}
|
||||||
setTmps={setTemplateAPIs}
|
setChatStore={setChatStore}
|
||||||
chatStore={chatStore}
|
apiField="apiEndpoint"
|
||||||
setChatStore={setChatStore}
|
keyField="apiKey"
|
||||||
apiField="apiEndpoint"
|
/>
|
||||||
keyField="apiKey"
|
)}
|
||||||
/>
|
{templateAPIsWhisper.length > 0 && (
|
||||||
)}
|
<ListAPIs
|
||||||
|
label="Whisper API"
|
||||||
{templateAPIsWhisper.length > 0 && (
|
tmps={templateAPIsWhisper}
|
||||||
<ListAPIs
|
setTmps={setTemplateAPIsWhisper}
|
||||||
label="Whisper API"
|
chatStore={chatStore}
|
||||||
tmps={templateAPIsWhisper}
|
setChatStore={setChatStore}
|
||||||
setTmps={setTemplateAPIsWhisper}
|
apiField="whisper_api"
|
||||||
chatStore={chatStore}
|
keyField="whisper_key"
|
||||||
setChatStore={setChatStore}
|
/>
|
||||||
apiField="whisper_api"
|
)}
|
||||||
keyField="whisper_key"
|
{templateAPIsTTS.length > 0 && (
|
||||||
/>
|
<ListAPIs
|
||||||
)}
|
label="TTS API"
|
||||||
|
tmps={templateAPIsTTS}
|
||||||
{templateAPIsTTS.length > 0 && (
|
setTmps={setTemplateAPIsTTS}
|
||||||
<ListAPIs
|
chatStore={chatStore}
|
||||||
label="TTS API"
|
setChatStore={setChatStore}
|
||||||
tmps={templateAPIsTTS}
|
apiField="tts_api"
|
||||||
setTmps={setTemplateAPIsTTS}
|
keyField="tts_key"
|
||||||
chatStore={chatStore}
|
/>
|
||||||
setChatStore={setChatStore}
|
)}
|
||||||
apiField="tts_api"
|
{templateAPIsImageGen.length > 0 && (
|
||||||
keyField="tts_key"
|
<ListAPIs
|
||||||
/>
|
label="Image Gen API"
|
||||||
)}
|
tmps={templateAPIsImageGen}
|
||||||
|
setTmps={setTemplateAPIsImageGen}
|
||||||
{templateAPIsImageGen.length > 0 && (
|
chatStore={chatStore}
|
||||||
<ListAPIs
|
setChatStore={setChatStore}
|
||||||
label="Image Gen API"
|
apiField="image_gen_api"
|
||||||
tmps={templateAPIsImageGen}
|
keyField="image_gen_key"
|
||||||
setTmps={setTemplateAPIsImageGen}
|
/>
|
||||||
chatStore={chatStore}
|
)}
|
||||||
setChatStore={setChatStore}
|
{toolsTemplates.length > 0 && (
|
||||||
apiField="image_gen_api"
|
<ListToolsTempaltes
|
||||||
keyField="image_gen_key"
|
templateTools={toolsTemplates}
|
||||||
/>
|
setTemplateTools={setTemplateTools}
|
||||||
)}
|
|
||||||
|
|
||||||
{toolsTemplates.length > 0 && (
|
|
||||||
<ListToolsTempaltes
|
|
||||||
templateTools={toolsTemplates}
|
|
||||||
setTemplateTools={setTemplateTools}
|
|
||||||
chatStore={chatStore}
|
|
||||||
setChatStore={setChatStore}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</AccordionContent>
|
|
||||||
</AccordionItem>
|
|
||||||
</Accordion>
|
|
||||||
|
|
||||||
{chatStore.history.filter((msg) => !msg.example).length == 0 && (
|
|
||||||
<div className="bg-base-200 break-all p-3 my-3 text-left">
|
|
||||||
<h2>
|
|
||||||
<span>{Tr("Saved prompt templates")}</span>
|
|
||||||
<Button
|
|
||||||
variant="link"
|
|
||||||
className="mx-2"
|
|
||||||
onClick={() => {
|
|
||||||
chatStore.systemMessageContent = "";
|
|
||||||
chatStore.toolsString = "";
|
|
||||||
chatStore.history = [];
|
|
||||||
setChatStore({ ...chatStore });
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{Tr("Reset Current")}
|
|
||||||
</Button>
|
|
||||||
</h2>
|
|
||||||
<div className="divider"></div>
|
|
||||||
<div className="flex flex-wrap">
|
|
||||||
<Templates
|
|
||||||
templates={templates}
|
|
||||||
setTemplates={setTemplates}
|
|
||||||
chatStore={chatStore}
|
chatStore={chatStore}
|
||||||
setChatStore={setChatStore}
|
setChatStore={setChatStore}
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{chatStore.history.length === 0 && (
|
|
||||||
<p className="break-all opacity-60 p-6 rounded bg-white my-3 text-left dark:text-black">
|
|
||||||
{Tr("No chat history here")}
|
|
||||||
<br />⚙{Tr("Model")}: {chatStore.model}
|
|
||||||
<br />⬆{Tr("Click above to change the settings of this chat")}
|
|
||||||
<br />↖{Tr("Click the conor to create a new chat")}
|
|
||||||
<br />⚠
|
|
||||||
{Tr(
|
|
||||||
"All chat history and settings are stored in the local browser"
|
|
||||||
)}
|
)}
|
||||||
<br />
|
</NavigationMenuList>
|
||||||
</p>
|
</NavigationMenu>
|
||||||
)}
|
</div>
|
||||||
{chatStore.systemMessageContent.trim() && (
|
<div className="grow flex flex-col p-2 w-full">
|
||||||
<div className="chat chat-start">
|
<ChatMessageList>
|
||||||
<div className="chat-header">Prompt</div>
|
{chatStore.history.filter((msg) => !msg.example).length == 0 && (
|
||||||
<div
|
<div className="bg-base-200 break-all p-3 my-3 text-left">
|
||||||
className="chat-bubble chat-bubble-accent cursor-pointer message-content"
|
<h2>
|
||||||
onClick={() => setShowSettings(true)}
|
<span>{Tr("Saved prompt templates")}</span>
|
||||||
>
|
<Button
|
||||||
{chatStore.systemMessageContent}
|
variant="link"
|
||||||
</div>
|
className="mx-2"
|
||||||
</div>
|
onClick={() => {
|
||||||
)}
|
chatStore.systemMessageContent = "";
|
||||||
|
chatStore.toolsString = "";
|
||||||
{chatStore.history.map((_, messageIndex) => (
|
chatStore.history = [];
|
||||||
<Message
|
setChatStore({ ...chatStore });
|
||||||
chatStore={chatStore}
|
}}
|
||||||
setChatStore={setChatStore}
|
>
|
||||||
messageIndex={messageIndex}
|
{Tr("Reset Current")}
|
||||||
/>
|
</Button>
|
||||||
))}
|
</h2>
|
||||||
{showGenerating && (
|
<div className="divider"></div>
|
||||||
<p className="p-2 my-2 animate-pulse message-content">
|
<div className="flex flex-wrap">
|
||||||
{generatingMessage || Tr("Generating...")}
|
<Templates
|
||||||
...
|
templates={templates}
|
||||||
</p>
|
setTemplates={setTemplates}
|
||||||
)}
|
|
||||||
<p className="text-center">
|
|
||||||
{chatStore.history.length > 0 && (
|
|
||||||
<Button
|
|
||||||
variant="secondary"
|
|
||||||
size="sm"
|
|
||||||
className="m-2"
|
|
||||||
disabled={showGenerating}
|
|
||||||
onClick={async () => {
|
|
||||||
const messageIndex = chatStore.history.length - 1;
|
|
||||||
if (chatStore.history[messageIndex].role === "assistant") {
|
|
||||||
chatStore.history[messageIndex].hide = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
setChatStore({ ...chatStore });
|
|
||||||
await complete();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{Tr("Re-Generate")}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
{chatStore.develop_mode && chatStore.history.length > 0 && (
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
disabled={showGenerating}
|
|
||||||
onClick={async () => {
|
|
||||||
await complete();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{Tr("Completion")}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</p>
|
|
||||||
<p className="p-2 my-2 text-center opacity-50 dark:text-white">
|
|
||||||
{chatStore.postBeginIndex !== 0 && (
|
|
||||||
<>
|
|
||||||
<br />
|
|
||||||
{Tr("Info: chat history is too long, forget messages")}:{" "}
|
|
||||||
{chatStore.postBeginIndex}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</p>
|
|
||||||
<VersionHint chatStore={chatStore} />
|
|
||||||
{showRetry && (
|
|
||||||
<p className="text-right p-2 my-2 dark:text-white">
|
|
||||||
<Button
|
|
||||||
variant="destructive"
|
|
||||||
onClick={async () => {
|
|
||||||
setShowRetry(false);
|
|
||||||
await complete();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{Tr("Retry")}
|
|
||||||
</Button>
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
<div ref={messagesEndRef}></div>
|
|
||||||
</ChatMessageList>
|
|
||||||
{images.length > 0 && (
|
|
||||||
<div className="flex flex-wrap">
|
|
||||||
{images.map((image, index) => (
|
|
||||||
<div className="flex flex-col">
|
|
||||||
{image.type === "image_url" && (
|
|
||||||
<img
|
|
||||||
className="rounded m-1 p-1 border-2 border-gray-400 max-h-32 max-w-xs"
|
|
||||||
src={image.image_url?.url}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{generatingMessage && (
|
|
||||||
<div className="flex items-center justify-end gap-2 p-2 m-2 rounded bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
|
||||||
<label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
|
|
||||||
Follow
|
|
||||||
</label>
|
|
||||||
<Switch
|
|
||||||
checked={follow}
|
|
||||||
onCheckedChange={setFollow}
|
|
||||||
aria-label="Toggle auto-scroll"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="sticky top-0 z-10 bg-background">
|
|
||||||
<form className="relative rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring p-1">
|
|
||||||
<ChatInput
|
|
||||||
value={inputMsg}
|
|
||||||
ref={userInputRef}
|
|
||||||
placeholder="Type your message here..."
|
|
||||||
onChange={(event: any) => {
|
|
||||||
setInputMsg(event.target.value);
|
|
||||||
autoHeight(event.target);
|
|
||||||
}}
|
|
||||||
onKeyPress={(event: any) => {
|
|
||||||
if (event.ctrlKey && event.code === "Enter") {
|
|
||||||
send(event.target.value, true);
|
|
||||||
setInputMsg("");
|
|
||||||
event.target.value = "";
|
|
||||||
autoHeight(event.target);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
autoHeight(event.target);
|
|
||||||
setInputMsg(event.target.value);
|
|
||||||
}}
|
|
||||||
className="min-h-12 resize-none rounded-lg bg-background border-0 p-3 shadow-none focus-visible:ring-0"
|
|
||||||
/>
|
|
||||||
<div className="flex items-center p-3 pt-0">
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="icon"
|
|
||||||
onClick={() => setShowAddImage(!showAddImage)}
|
|
||||||
disabled={showGenerating || !chatStore.apiKey}
|
|
||||||
>
|
|
||||||
<ImageIcon className="size-4" />
|
|
||||||
<span className="sr-only">Add Image</span>
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
{chatStore.whisper_api && chatStore.whisper_key && (
|
|
||||||
<>
|
|
||||||
<WhisperButton
|
|
||||||
chatStore={chatStore}
|
chatStore={chatStore}
|
||||||
inputMsg={inputMsg}
|
setChatStore={setChatStore}
|
||||||
setInputMsg={setInputMsg}
|
|
||||||
/>
|
/>
|
||||||
<span className="sr-only">Use Microphone</span>
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{chatStore.history.length === 0 && (
|
||||||
|
<p className="break-all opacity-60 p-6 rounded bg-white my-3 text-left dark:text-black">
|
||||||
|
{Tr("No chat history here")}
|
||||||
|
<br />⚙{Tr("Model")}: {chatStore.model}
|
||||||
|
<br />⬆{Tr("Click above to change the settings of this chat")}
|
||||||
|
<br />↖{Tr("Click the conor to create a new chat")}
|
||||||
|
<br />⚠
|
||||||
|
{Tr(
|
||||||
|
"All chat history and settings are stored in the local browser"
|
||||||
|
)}
|
||||||
|
<br />
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
{chatStore.systemMessageContent.trim() && (
|
||||||
|
<div className="chat chat-start">
|
||||||
|
<div className="chat-header">Prompt</div>
|
||||||
|
<div
|
||||||
|
className="chat-bubble chat-bubble-accent cursor-pointer message-content"
|
||||||
|
onClick={() => setShowSettings(true)}
|
||||||
|
>
|
||||||
|
{chatStore.systemMessageContent}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{chatStore.history.map((_, messageIndex) => (
|
||||||
|
<Message
|
||||||
|
chatStore={chatStore}
|
||||||
|
setChatStore={setChatStore}
|
||||||
|
messageIndex={messageIndex}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
{showGenerating && (
|
||||||
|
<p className="p-2 my-2 animate-pulse message-content">
|
||||||
|
{generatingMessage || Tr("Generating...")}
|
||||||
|
...
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
<p className="text-center">
|
||||||
|
{chatStore.history.length > 0 && (
|
||||||
|
<Button
|
||||||
|
variant="secondary"
|
||||||
|
size="sm"
|
||||||
|
className="m-2"
|
||||||
|
disabled={showGenerating}
|
||||||
|
onClick={async () => {
|
||||||
|
const messageIndex = chatStore.history.length - 1;
|
||||||
|
if (chatStore.history[messageIndex].role === "assistant") {
|
||||||
|
chatStore.history[messageIndex].hide = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
setChatStore({ ...chatStore });
|
||||||
|
await complete();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{Tr("Re-Generate")}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
{chatStore.develop_mode && chatStore.history.length > 0 && (
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
disabled={showGenerating}
|
||||||
|
onClick={async () => {
|
||||||
|
await complete();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{Tr("Completion")}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
<p className="p-2 my-2 text-center opacity-50 dark:text-white">
|
||||||
|
{chatStore.postBeginIndex !== 0 && (
|
||||||
|
<>
|
||||||
|
<br />
|
||||||
|
{Tr("Info: chat history is too long, forget messages")}:{" "}
|
||||||
|
{chatStore.postBeginIndex}
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
</p>
|
||||||
<Button
|
<VersionHint chatStore={chatStore} />
|
||||||
size="sm"
|
{showRetry && (
|
||||||
className="ml-auto gap-1.5"
|
<p className="text-right p-2 my-2 dark:text-white">
|
||||||
disabled={showGenerating}
|
<Button
|
||||||
onClick={() => {
|
variant="destructive"
|
||||||
send(inputMsg, true);
|
onClick={async () => {
|
||||||
userInputRef.current.value = "";
|
setShowRetry(false);
|
||||||
autoHeight(userInputRef.current);
|
await complete();
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Send Message
|
{Tr("Retry")}
|
||||||
<CornerDownLeftIcon className="size-3.5" />
|
</Button>
|
||||||
</Button>
|
</p>
|
||||||
|
)}
|
||||||
|
<div ref={messagesEndRef}></div>
|
||||||
|
</ChatMessageList>
|
||||||
|
{images.length > 0 && (
|
||||||
|
<div className="flex flex-wrap">
|
||||||
|
{images.map((image, index) => (
|
||||||
|
<div className="flex flex-col">
|
||||||
|
{image.type === "image_url" && (
|
||||||
|
<img
|
||||||
|
className="rounded m-1 p-1 border-2 border-gray-400 max-h-32 max-w-xs"
|
||||||
|
src={image.image_url?.url}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
</form>
|
|
||||||
|
|
||||||
{showAddImage && (
|
|
||||||
<AddImage
|
|
||||||
chatStore={chatStore}
|
|
||||||
setChatStore={setChatStore}
|
|
||||||
setShowAddImage={setShowAddImage}
|
|
||||||
images={images}
|
|
||||||
setImages={setImages}
|
|
||||||
/>
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{generatingMessage && (
|
||||||
|
<div className="flex items-center justify-end gap-2 p-2 m-2 rounded bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
||||||
|
<label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
|
||||||
|
Follow
|
||||||
|
</label>
|
||||||
|
<Switch
|
||||||
|
checked={follow}
|
||||||
|
onCheckedChange={setFollow}
|
||||||
|
aria-label="Toggle auto-scroll"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="sticky top-0 z-10 bg-background">
|
||||||
|
<form className="relative rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring p-1">
|
||||||
|
<ChatInput
|
||||||
|
value={inputMsg}
|
||||||
|
ref={userInputRef}
|
||||||
|
placeholder="Type your message here..."
|
||||||
|
onChange={(event: any) => {
|
||||||
|
setInputMsg(event.target.value);
|
||||||
|
autoHeight(event.target);
|
||||||
|
}}
|
||||||
|
onKeyPress={(event: any) => {
|
||||||
|
if (event.ctrlKey && event.code === "Enter") {
|
||||||
|
send(event.target.value, true);
|
||||||
|
setInputMsg("");
|
||||||
|
event.target.value = "";
|
||||||
|
autoHeight(event.target);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
autoHeight(event.target);
|
||||||
|
setInputMsg(event.target.value);
|
||||||
|
}}
|
||||||
|
className="min-h-12 resize-none rounded-lg bg-background border-0 p-3 shadow-none focus-visible:ring-0"
|
||||||
|
/>
|
||||||
|
<div className="flex items-center p-3 pt-0">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
onClick={() => setShowAddImage(!showAddImage)}
|
||||||
|
disabled={showGenerating || !chatStore.apiKey}
|
||||||
|
>
|
||||||
|
<ImageIcon className="size-4" />
|
||||||
|
<span className="sr-only">Add Image</span>
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{chatStore.whisper_api && chatStore.whisper_key && (
|
||||||
|
<>
|
||||||
|
<WhisperButton
|
||||||
|
chatStore={chatStore}
|
||||||
|
inputMsg={inputMsg}
|
||||||
|
setInputMsg={setInputMsg}
|
||||||
|
/>
|
||||||
|
<span className="sr-only">Use Microphone</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
className="ml-auto gap-1.5"
|
||||||
|
disabled={showGenerating}
|
||||||
|
onClick={() => {
|
||||||
|
send(inputMsg, true);
|
||||||
|
userInputRef.current.value = "";
|
||||||
|
autoHeight(userInputRef.current);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Send Message
|
||||||
|
<CornerDownLeftIcon className="size-3.5" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
{showAddImage && (
|
||||||
|
<AddImage
|
||||||
|
chatStore={chatStore}
|
||||||
|
setChatStore={setChatStore}
|
||||||
|
setShowAddImage={setShowAddImage}
|
||||||
|
images={images}
|
||||||
|
setImages={setImages}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user