render api templates if exitst

This commit is contained in:
2023-10-24 22:39:45 +08:00
parent 2bd36d4b34
commit 83833187f0

View File

@@ -316,63 +316,64 @@ export default function ChatBOX(props: {
API Endpoint API Endpoint
</p> </p>
)} )}
{(chatStore.history.filter((msg) => !msg.example).length == 0 || {templateAPIs.length > 0 &&
!chatStore.apiEndpoint || (chatStore.history.filter((msg) => !msg.example).length == 0 ||
!chatStore.apiKey) && ( !chatStore.apiEndpoint ||
<p className="break-all opacity-80 p-3 rounded bg-white my-3 text-left dark:text-black"> !chatStore.apiKey) && (
<h2> API </h2> <p className="break-all opacity-80 p-3 rounded bg-white my-3 text-left dark:text-black">
<hr className="my-2" /> <h2> API </h2>
<div className="flex flex-wrap"> <hr className="my-2" />
{templateAPIs.map((t, index) => ( <div className="flex flex-wrap">
<div {templateAPIs.map((t, index) => (
className={`cursor-pointer rounded ${ <div
chatStore.apiEndpoint === t.endpoint && className={`cursor-pointer rounded ${
chatStore.apiKey === t.key chatStore.apiEndpoint === t.endpoint &&
? "bg-red-600" chatStore.apiKey === t.key
: "bg-red-400" ? "bg-red-600"
} w-fit p-2 m-1 flex flex-col`} : "bg-red-400"
onClick={() => { } w-fit p-2 m-1 flex flex-col`}
chatStore.apiEndpoint = t.endpoint; onClick={() => {
chatStore.apiKey = t.key; chatStore.apiEndpoint = t.endpoint;
setChatStore({ ...chatStore }); chatStore.apiKey = t.key;
}} setChatStore({ ...chatStore });
> }}
<span className="w-full text-center">{t.name}</span> >
<hr className="mt-2" /> <span className="w-full text-center">{t.name}</span>
<span className="flex justify-between"> <hr className="mt-2" />
<button <span className="flex justify-between">
onClick={() => { <button
const name = prompt("Give **API** template a name"); onClick={() => {
if (!name) { const name = prompt("Give **API** template a name");
return; if (!name) {
} return;
t.name = name; }
setTemplateAPIs(structuredClone(templateAPIs)); t.name = name;
}} setTemplateAPIs(structuredClone(templateAPIs));
> }}
🖋 >
</button> 🖋
<button </button>
onClick={() => { <button
if ( onClick={() => {
!confirm( if (
"Are you sure to delete this **API** template?" !confirm(
) "Are you sure to delete this **API** template?"
) { )
return; ) {
} return;
templateAPIs.splice(index, 1); }
setTemplateAPIs(structuredClone(templateAPIs)); templateAPIs.splice(index, 1);
}} setTemplateAPIs(structuredClone(templateAPIs));
> }}
>
</button>
</span> </button>
</div> </span>
))} </div>
</div> ))}
</p> </div>
)} </p>
)}
{templates.length > 0 && {templates.length > 0 &&
chatStore.history.filter((msg) => !msg.example).length == 0 && ( chatStore.history.filter((msg) => !msg.example).length == 0 && (
<p className="break-all opacity-80 p-3 rounded bg-white my-3 text-left dark:text-black"> <p className="break-all opacity-80 p-3 rounded bg-white my-3 text-left dark:text-black">