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
|
import styled from "styled-components";
import { LLM } from "../../../schema/LLM";
import {
Label,
Select,
Input,
defaultBorderRadius,
lightGray,
vscForeground,
} from ".";
import { useState } from "react";
import { useFormContext } from "react-hook-form";
import { getFontSize } from "../util";
const Div = styled.div<{ dashed: boolean }>`
border: 1px ${(props) => (props.dashed ? "dashed" : "solid")} ${lightGray};
border-radius: ${defaultBorderRadius};
padding: 8px;
margin-bottom: 16px;
`;
type ModelOption = "api_key" | "model" | "context_length";
const DefaultModelOptions: {
[key: string]: { [key in ModelOption]?: string };
} = {
default: {
api_key: "",
model: "codellama",
},
};
function ModelSettings(props: { llm: any | undefined; role: string }) {
const [modelOptions, setModelOptions] = useState<{
[key in ModelOption]?: string;
}>(DefaultModelOptions[props.llm?.class_name || "default"]);
const { register, setValue, getValues } = useFormContext();
return (
<Div dashed={typeof props.llm === undefined}>
{props.llm ? (
<>
<b>{props.role}</b>: <b> {props.llm?.class_name || "gpt-4"}</b>
<form>
{typeof modelOptions.api_key !== undefined && (
<>
<Label fontSize={getFontSize()}>API Key</Label>
<Input
type="text"
defaultValue={props.llm.api_key}
placeholder="API Key"
{...register(`models.${props.role}.api_key`)}
/>
</>
)}
{modelOptions.model && (
<>
<Label fontSize={getFontSize()}>Model</Label>
<Input
type="text"
defaultValue={props.llm.model}
placeholder="Model"
{...register(`models.${props.role}.model`)}
/>
</>
)}
</form>
</>
) : (
<div>
<b>Add Model</b>
<div className="my-4">
<Select
defaultValue=""
onChange={(e) => {
if (e.target.value) {
e.target.value = "";
}
}}
>
<option disabled value="">
Select Model Type
</option>
<option value="newModel1">New Model 1</option>
<option value="newModel2">New Model 2</option>
<option value="newModel3">New Model 3</option>
</Select>
</div>
</div>
)}
</Div>
);
}
export default ModelSettings;
|
