80 lines
2.3 KiB
TypeScript
80 lines
2.3 KiB
TypeScript
import { ChatStore, TemplateTools } from "./app";
|
|
import { Tr } from "./translate";
|
|
|
|
interface Props {
|
|
templateTools: TemplateTools[];
|
|
setTemplateTools: (tmps: TemplateTools[]) => void;
|
|
chatStore: ChatStore;
|
|
setChatStore: (cs: ChatStore) => void;
|
|
}
|
|
export function ListToolsTempaltes({
|
|
chatStore,
|
|
templateTools,
|
|
setTemplateTools,
|
|
setChatStore,
|
|
}: Props) {
|
|
return (
|
|
<div className="break-all opacity-80 p-3 rounded bg-white my-3 text-left dark:text-black">
|
|
<h2>
|
|
<span>{Tr(`Saved tools templates`)}</span>
|
|
<button
|
|
className="mx-2 underline cursor-pointer"
|
|
onClick={() => {
|
|
chatStore.toolsString = "";
|
|
setChatStore({ ...chatStore });
|
|
}}
|
|
>
|
|
{Tr(`Clear`)}
|
|
</button>
|
|
</h2>
|
|
<hr className="my-2" />
|
|
<div className="flex flex-wrap">
|
|
{templateTools.map((t, index) => (
|
|
<div
|
|
className={`cursor-pointer rounded ${
|
|
chatStore.toolsString === t.toolsString
|
|
? "bg-info"
|
|
: "bg-base-300"
|
|
} w-fit p-2 m-1 flex flex-col`}
|
|
onClick={() => {
|
|
chatStore.toolsString = t.toolsString;
|
|
setChatStore({ ...chatStore });
|
|
}}
|
|
>
|
|
<span className="w-full text-center">{t.name}</span>
|
|
<span className="flex justify-between gap-x-2">
|
|
<button
|
|
class="link"
|
|
onClick={() => {
|
|
const name = prompt(`Give **tools** template a name`);
|
|
if (!name) {
|
|
return;
|
|
}
|
|
t.name = name;
|
|
setTemplateTools(structuredClone(templateTools));
|
|
}}
|
|
>
|
|
Edit
|
|
</button>
|
|
<button
|
|
class="link"
|
|
onClick={() => {
|
|
if (
|
|
!confirm(`Are you sure to delete this **tools** template?`)
|
|
) {
|
|
return;
|
|
}
|
|
templateTools.splice(index, 1);
|
|
setTemplateTools(structuredClone(templateTools));
|
|
}}
|
|
>
|
|
Delete
|
|
</button>
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|