1
+ import { useState , useEffect } from "react" ;
2
+ import System from "@/models/system" ;
3
+
1
4
export default function AnthropicAiOptions ( { settings } ) {
5
+ const [ inputValue , setInputValue ] = useState ( settings ?. AnthropicApiKey ) ;
6
+ const [ anthropicApiKey , setAnthropicApiKey ] = useState (
7
+ settings ?. AnthropicApiKey
8
+ ) ;
9
+
2
10
return (
3
11
< div className = "w-full flex flex-col" >
4
12
< div className = "w-full flex items-center gap-[36px] mt-1.5" >
@@ -15,45 +23,117 @@ export default function AnthropicAiOptions({ settings }) {
15
23
required = { true }
16
24
autoComplete = "off"
17
25
spellCheck = { false }
26
+ onChange = { ( e ) => setInputValue ( e . target . value ) }
27
+ onBlur = { ( ) => setAnthropicApiKey ( inputValue ) }
18
28
/>
19
29
</ div >
20
30
21
31
{ ! settings ?. credentialsOnly && (
22
- < div className = "flex flex-col w-60" >
23
- < label className = "text-white text-sm font-semibold block mb-3" >
24
- Chat Model Selection
25
- </ label >
26
- < select
27
- name = "AnthropicModelPref"
28
- defaultValue = { settings ?. AnthropicModelPref || "claude-2" }
29
- required = { true }
30
- className = "border-none bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
31
- >
32
- { [
33
- "claude-instant-1.2" ,
34
- "claude-2.0" ,
35
- "claude-2.1" ,
36
- "claude-3-haiku-20240307" ,
37
- "claude-3-sonnet-20240229" ,
38
- "claude-3-opus-latest" ,
39
- "claude-3-5-haiku-latest" ,
40
- "claude-3-5-haiku-20241022" ,
41
- "claude-3-5-sonnet-latest" ,
42
- "claude-3-5-sonnet-20241022" ,
43
- "claude-3-5-sonnet-20240620" ,
44
- "claude-3-7-sonnet-20250219" ,
45
- "claude-3-7-sonnet-latest" ,
46
- ] . map ( ( model ) => {
47
- return (
48
- < option key = { model } value = { model } >
49
- { model }
50
- </ option >
51
- ) ;
52
- } ) }
53
- </ select >
54
- </ div >
32
+ < AnthropicModelSelection
33
+ apiKey = { anthropicApiKey }
34
+ settings = { settings }
35
+ />
55
36
) }
56
37
</ div >
57
38
</ div >
58
39
) ;
59
40
}
41
+
42
+ const DEFAULT_MODELS = [
43
+ {
44
+ id : "claude-3-7-sonnet-20250219" ,
45
+ name : "Claude 3.7 Sonnet" ,
46
+ } ,
47
+ {
48
+ id : "claude-3-5-sonnet-20241022" ,
49
+ name : "Claude 3.5 Sonnet (New)" ,
50
+ } ,
51
+ {
52
+ id : "claude-3-5-haiku-20241022" ,
53
+ name : "Claude 3.5 Haiku" ,
54
+ } ,
55
+ {
56
+ id : "claude-3-5-sonnet-20240620" ,
57
+ name : "Claude 3.5 Sonnet (Old)" ,
58
+ } ,
59
+ {
60
+ id : "claude-3-haiku-20240307" ,
61
+ name : "Claude 3 Haiku" ,
62
+ } ,
63
+ {
64
+ id : "claude-3-opus-20240229" ,
65
+ name : "Claude 3 Opus" ,
66
+ } ,
67
+ {
68
+ id : "claude-3-sonnet-20240229" ,
69
+ name : "Claude 3 Sonnet" ,
70
+ } ,
71
+ {
72
+ id : "claude-2.1" ,
73
+ name : "Claude 2.1" ,
74
+ } ,
75
+ {
76
+ id : "claude-2.0" ,
77
+ name : "Claude 2.0" ,
78
+ } ,
79
+ ] ;
80
+
81
+ function AnthropicModelSelection ( { apiKey, settings } ) {
82
+ const [ models , setModels ] = useState ( DEFAULT_MODELS ) ;
83
+ const [ loading , setLoading ] = useState ( true ) ;
84
+
85
+ useEffect ( ( ) => {
86
+ async function findCustomModels ( ) {
87
+ setLoading ( true ) ;
88
+ const { models } = await System . customModels (
89
+ "anthropic" ,
90
+ typeof apiKey === "boolean" ? null : apiKey
91
+ ) ;
92
+ if ( models . length > 0 ) setModels ( models ) ;
93
+ setLoading ( false ) ;
94
+ }
95
+ findCustomModels ( ) ;
96
+ } , [ apiKey ] ) ;
97
+
98
+ if ( loading ) {
99
+ return (
100
+ < div className = "flex flex-col w-60" >
101
+ < label className = "text-white text-sm font-semibold block mb-3" >
102
+ Chat Model Selection
103
+ </ label >
104
+ < select
105
+ name = "AnthropicModelPref"
106
+ disabled = { true }
107
+ className = "border-none bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
108
+ >
109
+ < option disabled = { true } selected = { true } >
110
+ -- loading available models --
111
+ </ option >
112
+ </ select >
113
+ </ div >
114
+ ) ;
115
+ }
116
+
117
+ return (
118
+ < div className = "flex flex-col w-60" >
119
+ < label className = "text-white text-sm font-semibold block mb-3" >
120
+ Chat Model Selection
121
+ </ label >
122
+ < select
123
+ name = "AnthropicModelPref"
124
+ required = { true }
125
+ className = "border-none bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
126
+ >
127
+ { models . map ( ( model ) => (
128
+ < option
129
+ key = { model . id }
130
+ value = { model . id }
131
+ selected = { settings ?. AnthropicModelPref === model . id }
132
+ >
133
+ { model . name }
134
+ </ option >
135
+ ) ) }
136
+ </ select >
137
+ </ div >
138
+ ) ;
139
+ }
0 commit comments