File size: 5,421 Bytes
f8b5d42 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 | import React, { useState } from "react";
import { X } from "@phosphor-icons/react";
import {
BooleanInput,
ChatModeSelection,
NumberInput,
PermittedDomains,
WorkspaceSelection,
enforceSubmissionSchema,
} from "../../NewEmbedModal";
import Embed from "@/models/embed";
import showToast from "@/utils/toast";
export default function EditEmbedModal({ embed, closeModal }) {
const [error, setError] = useState(null);
const handleUpdate = async (e) => {
setError(null);
e.preventDefault();
const form = new FormData(e.target);
const data = enforceSubmissionSchema(form);
const { success, error } = await Embed.updateEmbed(embed.id, data);
if (success) {
showToast("Embed updated successfully.", "success", { clear: true });
setTimeout(() => {
window.location.reload();
}, 800);
}
setError(error);
};
return (
<div className="fixed inset-0 z-50 overflow-auto bg-black bg-opacity-50 flex items-center justify-center">
<div className="relative w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border">
<div className="relative p-6 border-b rounded-t border-theme-modal-border">
<div className="w-full flex gap-x-2 items-center">
<h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
Update embed #{embed.id}
</h3>
</div>
<button
onClick={closeModal}
type="button"
className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
>
<X size={24} weight="bold" className="text-white" />
</button>
</div>
<div className="px-7 py-6">
<form onSubmit={handleUpdate}>
<div className="space-y-6 max-h-[60vh] overflow-y-auto pr-2">
<WorkspaceSelection defaultValue={embed.workspace.id} />
<ChatModeSelection defaultValue={embed.chat_mode} />
<PermittedDomains
defaultValue={
embed.allowlist_domains
? JSON.parse(embed.allowlist_domains)
: []
}
/>
<NumberInput
name="max_chats_per_day"
title="Max chats per day"
hint="Limit the amount of chats this embedded chat can process in a 24 hour period. Zero is unlimited."
defaultValue={embed.max_chats_per_day}
/>
<NumberInput
name="max_chats_per_session"
title="Max chats per session"
hint="Limit the amount of chats a session user can send with this embed in a 24 hour period. Zero is unlimited."
defaultValue={embed.max_chats_per_session}
/>
<NumberInput
name="message_limit"
title="Message History Limit"
hint="The number of previous messages to include in the chat context. Default is 20."
defaultValue={embed.message_limit}
/>
<BooleanInput
name="allow_model_override"
title="Enable dynamic model use"
hint="Allow setting of the preferred LLM model to override the workspace default."
defaultValue={embed.allow_model_override}
/>
<BooleanInput
name="allow_temperature_override"
title="Enable dynamic LLM temperature"
hint="Allow setting of the LLM temperature to override the workspace default."
defaultValue={embed.allow_temperature_override}
/>
<BooleanInput
name="allow_prompt_override"
title="Enable Prompt Override"
hint="Allow setting of the system prompt to override the workspace default."
defaultValue={embed.allow_prompt_override}
/>
{error && <p className="text-red-400 text-sm">Error: {error}</p>}
<p className="text-white text-opacity-60 text-xs md:text-sm">
After creating an embed you will be provided a link that you can
publish on your website with a simple
<code className="border-none bg-theme-settings-input-bg text-white mx-1 px-1 rounded-sm">
<script>
</code>{" "}
tag.
</p>
</div>
<div className="flex justify-between items-center mt-6 pt-6 border-t border-theme-modal-border">
<button
onClick={closeModal}
type="button"
className="transition-all duration-300 text-white hover:bg-zinc-700 px-4 py-2 rounded-lg text-sm"
>
Cancel
</button>
<button
type="submit"
className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
>
Update embed
</button>
</div>
</form>
</div>
</div>
</div>
);
}
|