-
-
Notifications
You must be signed in to change notification settings - Fork 3.3k
/
ModelSelection.tsx
71 lines (64 loc) 路 2.27 KB
/
ModelSelection.tsx
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
import { UUID } from "crypto";
import { FieldHeader } from "@/lib/components/ui/FieldHeader/FieldHeader";
import { SingleSelector } from "@/lib/components/ui/SingleSelector/SingleSelector";
import { defineMaxTokens } from "@/lib/helpers/defineMaxTokens";
import { Model } from "@/lib/types/BrainConfig";
import styles from "./ModelSelection.module.scss";
import { useBrainFormState } from "../../hooks/useBrainFormState";
type ModelSelectionProps = {
brainId: UUID;
handleSubmit: (checkDirty: boolean) => Promise<void>;
hasEditRights: boolean;
accessibleModels: string[];
};
export const ModelSelection = (props: ModelSelectionProps): JSX.Element => {
const { model, maxTokens, register, setModel } = useBrainFormState();
const { handleSubmit, hasEditRights, accessibleModels } = props;
const accessibleModelOptions = accessibleModels.map((accessibleModel) => {
return { value: accessibleModel, label: accessibleModel };
});
return (
<div className={styles.model_selection_wrapper}>
<fieldset
{...register("model", {
value: accessibleModelOptions[0].value as Model,
})}
>
<FieldHeader
label="Model"
iconName="robot"
help="Changing the model could make this brain smarter, understanding you better and giving you more helpful answers."
/>
<SingleSelector
options={accessibleModelOptions}
onChange={(option) => {
setModel(option as Model);
void handleSubmit(false);
}}
selectedOption={{ value: model, label: model }}
placeholder="Select a model"
iconName="robot"
/>
</fieldset>
<fieldset>
<FieldHeader
label="Max tokens"
iconName="hashtag"
help="Increasing the number of tokens this brain can use in its replies will give you more detailed answers"
/>
<div className={styles.max_tokens}>
<input
className={styles.slider}
type="range"
min="10"
max={defineMaxTokens(model)}
value={maxTokens || ""}
disabled={!hasEditRights}
{...register("maxTokens")}
/>
<span>{maxTokens}</span>
</div>
</fieldset>
</div>
);
};