Skip to content

Commit

Permalink
feat: api definition in brain creation modal (#1613)
Browse files Browse the repository at this point in the history 
# Description

QuivrHQ/quivr#1569

## Checklist before requesting a review

Please delete options that are not relevant.

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented hard-to-understand areas
- [ ] I have ideally added tests that prove my fix is effective or that
my feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged

## Screenshots (if appropriate):

---------

Co-authored-by: mamadoudicko <mamadoudicko100@gmail.com>
  • Loading branch information
@coolCatalyst @mamadoudicko
coolCatalyst and mamadoudicko committed Nov 14, 2023
1 parent 90e4b80 commit 27f0845
Show file tree
Hide file tree
Showing 31 changed files with 709 additions and 465 deletions.
3 changes: 2 additions & 1 deletion frontend/lib/api/brain/types.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { BrainRoleType } from "@/lib/components/BrainUsers/types";
import { BrainStatus } from "@/lib/types/brainConfig";
import { BrainStatus, BrainType } from "@/lib/types/brainConfig";

export type SubscriptionUpdatableProperties = {
role: BrainRoleType | null;
Expand All @@ -14,6 +14,7 @@ export type CreateBrainInput = {
max_tokens?: number;
openai_api_key?: string;
prompt_id?: string | null;
brain_type?: BrainType;
};

export type UpdateBrainInput = Partial<CreateBrainInput>;
195 changes: 10 additions & 185 deletions frontend/lib/components/AddBrainModal/AddBrainModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,9 @@
/* eslint-disable max-lines */
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
import { FormProvider, useForm } from "react-hook-form";

import { useTranslation } from "react-i18next";
import { MdAdd } from "react-icons/md";
import { defaultBrainConfig } from "@/lib/config/defaultBrainConfig";
import { BrainConfig } from "@/lib/types/brainConfig";

import { PublicPrompts } from "@/app/brains-management/[brainId]/components/BrainManagementTabs/components/SettingsTab/components/PublicPrompts";
import Button from "@/lib/components/ui/Button";
import Field from "@/lib/components/ui/Field";
import { Modal } from "@/lib/components/ui/Modal";
import { defineMaxTokens } from "@/lib/helpers/defineMaxTokens";
import { cn } from "@/lib/utils";

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";
import { AddBrainConfig } from "./components/AddBrainConfig/AddBrainConfig";

type AddBrainModalProps = {
triggerClassName?: string;
Expand All @@ -24,176 +12,13 @@ type AddBrainModalProps = {
export const AddBrainModal = ({
triggerClassName,
}: AddBrainModalProps): JSX.Element => {
const { t } = useTranslation(["translation", "brain", "config"]);
const {
handleSubmit,
isShareModalOpen,
setIsShareModalOpen,
register,
temperature,
maxTokens,
model,
isPending,
pickPublicPrompt,
accessibleModels,
brainStatusOptions,
status,
isPublicAccessConfirmationModalOpened,
onCancelPublicAccess,
onConfirmPublicAccess,
} = useAddBrainModal();
const methods = useForm<BrainConfig>({
defaultValues: defaultBrainConfig,
});

return (
<>
<Modal
Trigger={
<Button
onClick={() => void 0}
variant={"tertiary"}
className={cn("border-0", triggerClassName)}
data-testid="add-brain-button"
>
{t("newBrain", { ns: "brain" })}
<MdAdd className="text-xl" />
</Button>
}
title={t("newBrainTitle", { ns: "brain" })}
desc={t("newBrainSubtitle", { ns: "brain" })}
isOpen={isShareModalOpen}
setOpen={setIsShareModalOpen}
CloseTrigger={<div />}
>
<form
onSubmit={(e) => {
e.preventDefault();
void handleSubmit();
}}
className="my-10 flex flex-col items-center gap-2"
>
<Field
label={t("brainName", { ns: "brain" })}
autoFocus
placeholder={t("brainNamePlaceholder", { ns: "brain" })}
autoComplete="off"
className="flex-1"
required
data-testid="brain-name"
{...register("name")}
/>

<TextArea
label={t("brainDescription", { ns: "brain" })}
placeholder={t("brainDescriptionPlaceholder", { ns: "brain" })}
autoComplete="off"
className="flex-1 m-3"
{...register("description")}
/>
<fieldset className="w-full flex flex-col">
<Radio
items={brainStatusOptions}
label={t("brain_status_label", { ns: "brain" })}
value={status}
className="flex-1 justify-between w-[50%]"
{...register("status")}
/>
</fieldset>
<Field
label={t("openAiKeyLabel", { ns: "config" })}
placeholder={t("openAiKeyPlaceholder", { ns: "config" })}
autoComplete="off"
className="flex-1"
{...register("openAiKey")}
/>

<fieldset className="w-full flex flex-col">
<label className="flex-1 text-sm" htmlFor="model">
{t("modelLabel", { ns: "config" })}
</label>
<select
id="model"
{...register("model")}
className="px-5 py-2 dark:bg-gray-700 bg-gray-200 rounded-md"
>
{accessibleModels.map((availableModel) => (
<option value={availableModel} key={availableModel}>
{availableModel}
</option>
))}
</select>
</fieldset>

<fieldset className="w-full flex mt-4">
<label className="flex-1" htmlFor="temp">
{t("temperature", { ns: "config" })}: {temperature}
</label>
<input
id="temp"
type="range"
min="0"
max="1"
step="0.01"
value={temperature}
{...register("temperature")}
/>
</fieldset>
<fieldset className="w-full flex mt-4">
<label className="flex-1" htmlFor="tokens">
{t("maxTokens", { ns: "config" })}: {maxTokens}
</label>
<input
type="range"
min="10"
max={defineMaxTokens(model)}
value={maxTokens}
{...register("maxTokens")}
/>
</fieldset>
<Divider text={t("customPromptSection", { ns: "config" })} />
<PublicPrompts onSelect={pickPublicPrompt} />
<Field
label={t("promptName", { ns: "config" })}
placeholder={t("promptNamePlaceholder", { ns: "config" })}
autoComplete="off"
className="flex-1"
{...register("prompt.title")}
/>
<TextArea
label={t("promptContent", { ns: "config" })}
placeholder={t("promptContentPlaceholder", { ns: "config" })}
autoComplete="off"
className="flex-1"
{...register("prompt.content")}
/>
<div className="flex flex-row justify-start w-full mt-4">
<label className="flex items-center">
<span className="mr-2 text-gray-700">
{t("setDefaultBrain", { ns: "brain" })}
</span>
<input
type="checkbox"
{...register("setDefault")}
className="form-checkbox h-5 w-5 text-indigo-600 rounded focus:ring-2 focus:ring-indigo-400"
/>
</label>
</div>

<Button
isLoading={isPending}
className="mt-12 self-end"
type="submit"
data-testid="create-brain-submit-button"
>
{t("createButton")}
<MdAdd className="text-xl" />
</Button>
</form>
</Modal>
<PublicAccessConfirmationModal
opened={isPublicAccessConfirmationModalOpened}
onClose={onCancelPublicAccess}
onCancel={onCancelPublicAccess}
onConfirm={onConfirmPublicAccess}
/>
</>
<FormProvider {...methods}>
<AddBrainConfig triggerClassName={triggerClassName} />
</FormProvider>
);
};
Loading

0 comments on commit 27f0845

Please sign in to comment.