From 37935c59ca64a195e19c528bf4475a863680c99b Mon Sep 17 00:00:00 2001
From: Mamadou DICKO <63923024+mamadoudicko@users.noreply.github.com>
Date: Wed, 20 Sep 2023 09:35:09 +0200
Subject: [PATCH] feat: add public brain creation (#1218)
* feat: add brain status input
* feat: update translations
* feat: add confirmation modal for brain status changing to public
---
frontend/lib/api/brain/types.ts | 3 +-
.../AddBrainModal/AddBrainModal.tsx | 297 ++++++++++--------
.../PublicAccessConfirmationModal.tsx | 42 +++
.../AddBrainModal/hooks/useAddBrainModal.ts | 46 ++-
.../lib/components/AddBrainModal/styles.css | 3 +
frontend/lib/components/ui/Modal.tsx | 7 +-
frontend/lib/components/ui/Radio.tsx | 48 +++
frontend/lib/config/defaultBrainConfig.ts | 1 +
frontend/lib/types/brainConfig.ts | 5 +
frontend/package.json | 1 +
frontend/public/locales/en/brain.json | 9 +-
frontend/public/locales/es/brain.json | 9 +-
frontend/public/locales/fr/brain.json | 9 +-
frontend/public/locales/pt-br/brain.json | 9 +-
frontend/public/locales/ru/brain.json | 9 +-
frontend/public/locales/zh-cn/brain.json | 9 +-
frontend/yarn.lock | 110 ++++---
17 files changed, 424 insertions(+), 193 deletions(-)
create mode 100644 frontend/lib/components/AddBrainModal/components/PublicAccessConfirmationModal.tsx
create mode 100644 frontend/lib/components/AddBrainModal/styles.css
create mode 100644 frontend/lib/components/ui/Radio.tsx
diff --git a/frontend/lib/api/brain/types.ts b/frontend/lib/api/brain/types.ts
index 32b846911..ddd8437ba 100644
--- a/frontend/lib/api/brain/types.ts
+++ b/frontend/lib/api/brain/types.ts
@@ -1,4 +1,5 @@
import { BrainRoleType } from "@/lib/components/BrainUsers/types";
+import { BrainStatus } from "@/lib/types/brainConfig";
export type SubscriptionUpdatableProperties = {
role: BrainRoleType | null;
@@ -7,7 +8,7 @@ export type SubscriptionUpdatableProperties = {
export type CreateBrainInput = {
name: string;
description?: string;
- status?: string;
+ status?: BrainStatus;
model?: string;
temperature?: number;
max_tokens?: number;
diff --git a/frontend/lib/components/AddBrainModal/AddBrainModal.tsx b/frontend/lib/components/AddBrainModal/AddBrainModal.tsx
index 6742eb657..2d2c33256 100644
--- a/frontend/lib/components/AddBrainModal/AddBrainModal.tsx
+++ b/frontend/lib/components/AddBrainModal/AddBrainModal.tsx
@@ -1,5 +1,6 @@
+/* eslint-disable max-lines */
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-/* eslint-disable */
+
import { useTranslation } from "react-i18next";
import { MdAdd } from "react-icons/md";
@@ -9,9 +10,11 @@ import Field from "@/lib/components/ui/Field";
import { Modal } from "@/lib/components/ui/Modal";
import { defineMaxTokens } from "@/lib/helpers/defineMaxTokens";
-import { Divider } from "../ui/Divider";
-import { TextArea } from "../ui/TextArea";
+import { PublicAccessConfirmationModal } from "./components/PublicAccessConfirmationModal";
import { useAddBrainModal } from "./hooks/useAddBrainModal";
+import { Divider } from "../ui/Divider";
+import { Radio } from "../ui/Radio";
+import { TextArea } from "../ui/TextArea";
export const AddBrainModal = (): JSX.Element => {
const { t } = useTranslation(["translation", "brain", "config"]);
@@ -20,150 +23,170 @@ export const AddBrainModal = (): JSX.Element => {
isShareModalOpen,
setIsShareModalOpen,
register,
- openAiKey,
temperature,
maxTokens,
model,
isPending,
pickPublicPrompt,
accessibleModels,
+ brainStatusOptions,
+ status,
+ isPublicAccessConfirmationModalOpened,
+ onCancelPublicAccess,
+ onConfirmPublicAccess,
} = useAddBrainModal();
return (
- void 0}
- variant={"tertiary"}
- className="border-0"
- data-testid="add-brain-button"
- >
- {t("newBrain", { ns: "brain" })}
-
}
- >
-
-
+
+
+
+
+ {t("modelLabel", { ns: "config" })}
+
+
+ {accessibleModels.map((availableModel) => (
+
+ {availableModel}
+
+ ))}
+
+
+
+
+
+ {t("temperature", { ns: "config" })}: {temperature}
+
+
+
+
+ {t("maxTokens", { ns: "config" })}: {maxTokens}
+
+
+
+
+
+ {t("setDefaultBrain", { ns: "brain" })}
+
+
+
+
+
+ {t("createButton")}
+
+
+
+
+
+
+
+ {t("confirm_set_brain_status_to_public")}
+
+
+ {t("cancel_set_brain_status_to_public")}
+
+
+
+ );
+};
diff --git a/frontend/lib/components/AddBrainModal/hooks/useAddBrainModal.ts b/frontend/lib/components/AddBrainModal/hooks/useAddBrainModal.ts
index 15a286afc..3c93b757c 100644
--- a/frontend/lib/components/AddBrainModal/hooks/useAddBrainModal.ts
+++ b/frontend/lib/components/AddBrainModal/hooks/useAddBrainModal.ts
@@ -13,6 +13,7 @@ import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainConte
import { defineMaxTokens } from "@/lib/helpers/defineMaxTokens";
import { getAccessibleModels } from "@/lib/helpers/getAccessibleModels";
import { useToast } from "@/lib/hooks";
+import { BrainStatus } from "@/lib/types/brainConfig";
import { useQuery } from "@tanstack/react-query";
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
@@ -24,13 +25,31 @@ export const useAddBrainModal = () => {
const { setAsDefaultBrain } = useBrainApi();
const { createPrompt } = usePromptApi();
const [isShareModalOpen, setIsShareModalOpen] = useState(false);
-
+ const [
+ isPublicAccessConfirmationModalOpened,
+ setIsPublicAccessConfirmationModalOpened,
+ ] = useState(false);
const { getUser } = useUserApi();
+ const brainStatusOptions: {
+ label: string;
+ value: BrainStatus;
+ }[] = [
+ {
+ label: t("private_brain_label", { ns: "brain" }),
+ value: "private",
+ },
+ {
+ label: t("public_brain_label", { ns: "brain" }),
+ value: "public",
+ },
+ ];
+
const { data: userData } = useQuery({
queryKey: [USER_DATA_KEY],
queryFn: getUser,
});
+
const defaultValues = {
...defaultBrainConfig,
name: "",
@@ -50,12 +69,19 @@ export const useAddBrainModal = () => {
const model = watch("model");
const temperature = watch("temperature");
const maxTokens = watch("maxTokens");
+ const status = watch("status");
const accessibleModels = getAccessibleModels({
openAiKey,
userData,
});
+ useEffect(() => {
+ if (status === "public") {
+ setIsPublicAccessConfirmationModalOpened(true);
+ }
+ }, [status]);
+
useEffect(() => {
setValue("maxTokens", Math.min(maxTokens, defineMaxTokens(model)));
}, [maxTokens, model, setValue]);
@@ -95,6 +121,7 @@ export const useAddBrainModal = () => {
openai_api_key: openAiKey,
temperature,
prompt_id,
+ status,
});
if (createdBrainId === undefined) {
@@ -157,17 +184,32 @@ export const useAddBrainModal = () => {
});
};
+ const onConfirmPublicAccess = () => {
+ setIsPublicAccessConfirmationModalOpened(false);
+ };
+
+ const onCancelPublicAccess = () => {
+ setValue("status", "private", {
+ shouldDirty: true,
+ });
+ setIsPublicAccessConfirmationModalOpened(false);
+ };
+
return {
isShareModalOpen,
setIsShareModalOpen,
handleSubmit,
register,
- openAiKey: openAiKey === "" ? undefined : openAiKey,
model,
temperature,
maxTokens,
isPending,
accessibleModels,
pickPublicPrompt,
+ brainStatusOptions,
+ status,
+ isPublicAccessConfirmationModalOpened,
+ onConfirmPublicAccess,
+ onCancelPublicAccess,
};
};
diff --git a/frontend/lib/components/AddBrainModal/styles.css b/frontend/lib/components/AddBrainModal/styles.css
new file mode 100644
index 000000000..386acec86
--- /dev/null
+++ b/frontend/lib/components/AddBrainModal/styles.css
@@ -0,0 +1,3 @@
+.foo {
+ white-space: 'pre-wrap';
+}
\ No newline at end of file
diff --git a/frontend/lib/components/ui/Modal.tsx b/frontend/lib/components/ui/Modal.tsx
index e3db4e5d0..5715528e3 100644
--- a/frontend/lib/components/ui/Modal.tsx
+++ b/frontend/lib/components/ui/Modal.tsx
@@ -11,7 +11,7 @@ type CommonModalProps = {
title?: string;
desc?: string;
children?: ReactNode;
- Trigger: ReactNode;
+ Trigger?: ReactNode;
CloseTrigger?: ReactNode;
isOpen?: undefined;
setOpen?: undefined;
@@ -38,7 +38,9 @@ export const Modal = ({
return (
- {Trigger}
+ {Trigger !== undefined && (
+ {Trigger}
+ )}
{customIsOpen ?? isOpen ? (
@@ -48,7 +50,6 @@ export const Modal = ({
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
- // transition={{ duration: 0.4, ease: "easeInOut" }}
>
,
+ HTMLInputElement
+ > {
+ name: string;
+ items: RadioItem[];
+ label?: string;
+ className?: string;
+}
+
+export const Radio = forwardRef(
+ ({ items, label, className, value, ...props }, ref) => (
+
+ {label !== undefined && (
+
{label}
+ )}
+
+ {items.map((item) => (
+
+
+ {item.label}
+
+
+ ))}
+
+
Public ?Público ?Public ?Público ?Публичный ?公共 吗？