@@ -76,8 +76,8 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
76
76
const [ showKeys , setShowKeys ] = useState < boolean > ( false ) ;
77
77
const [ tempSelectedModel , setTempSelectedMode ] = useState < { model : string , endpoint : string } | undefined > ( selectedModel ) ;
78
78
79
- let updateModelStatus = ( model : string , endpoint : string , status : 'ok' | 'error' | 'testing' | 'unknown' ) => {
80
- dispatch ( dfActions . updateModelStatus ( { endpoint, model, status} ) ) ;
79
+ let updateModelStatus = ( model : string , endpoint : string , status : 'ok' | 'error' | 'testing' | 'unknown' , message : string ) => {
80
+ dispatch ( dfActions . updateModelStatus ( { endpoint, model, status, message } ) ) ;
81
81
}
82
82
let getStatus = ( model : string , endpoint : string ) => {
83
83
return testedModels . find ( t => t . model == model && t . endpoint == endpoint ) ?. status || 'unknown' ;
@@ -92,7 +92,7 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
92
92
let modelExists = oaiModels . some ( m => m . endpoint == newEndpoint && m . model == newModel ) ;
93
93
94
94
let testModel = ( endpoint : string , key : string , model : string ) => {
95
- updateModelStatus ( model , endpoint , 'testing' ) ;
95
+ updateModelStatus ( model , endpoint , 'testing' , "" ) ;
96
96
let message = {
97
97
method : 'POST' ,
98
98
headers : { 'Content-Type' : 'application/json' , } ,
@@ -106,9 +106,9 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
106
106
. then ( ( response ) => response . json ( ) )
107
107
. then ( ( data ) => {
108
108
let status = data [ "status" ] || 'error' ;
109
- updateModelStatus ( model , endpoint , status )
109
+ updateModelStatus ( model , endpoint , status , data [ "message" ] || "" ) ;
110
110
} ) . catch ( ( error ) => {
111
- updateModelStatus ( model , endpoint , 'error' )
111
+ updateModelStatus ( model , endpoint , 'error' , error . message )
112
112
} ) ;
113
113
}
114
114
@@ -231,37 +231,45 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
231
231
let status = getStatus ( oaiModel . model , oaiModel . endpoint ) ;
232
232
let statusIcon = status == "unknown" ? < HelpOutlineIcon color = "warning" /> : ( status == 'testing' ? < CircularProgress size = { 24 } /> :
233
233
( status == "ok" ? < CheckCircleOutlineIcon color = "success" /> : < ErrorOutlineIcon color = "error" /> ) )
234
+
235
+ const borderStyle = [ 'error' , 'unknown' ] . includes ( status ) ? '1px dashed lightgray' : undefined ;
236
+ const noBorderStyle = [ 'error' , 'unknown' ] . includes ( status ) ? 'none' : undefined ;
234
237
235
238
return (
239
+ < >
236
240
< TableRow
237
- hover
241
+
238
242
role = "checkbox"
239
243
aria-checked = { isItemSelected }
240
244
selected = { isItemSelected }
241
245
key = { `${ oaiModel . endpoint } -${ oaiModel . model } ` }
242
246
onClick = { ( ) => { setTempSelectedMode ( { model : oaiModel . model , endpoint : oaiModel . endpoint } ) } }
243
247
sx = { { cursor : 'pointer' } }
244
248
>
245
- < TableCell align = "right" >
249
+ < TableCell align = "right" sx = { { borderBottom : noBorderStyle } } >
246
250
< Radio checked = { isItemSelected } name = "radio-buttons" />
247
251
</ TableCell >
248
- < TableCell align = "left" >
252
+ < TableCell align = "left" sx = { { borderBottom : noBorderStyle } } >
249
253
{ oaiModel . endpoint == 'openai' ? 'openai' : 'azure openai' }
250
254
</ TableCell >
251
- < TableCell component = "th" scope = "row" >
255
+ < TableCell component = "th" scope = "row" sx = { { borderBottom : borderStyle } } >
252
256
{ oaiModel . endpoint }
253
257
</ TableCell >
254
- < TableCell align = "left" >
258
+ < TableCell align = "left" sx = { { borderBottom : borderStyle } } >
255
259
{ oaiModel . key != "" ?
256
260
( showKeys ? ( oaiModel . key || < Typography sx = { { color : "lightgray" } } fontSize = 'inherit' > N/A</ Typography > ) : "************" ) :
257
261
< Typography sx = { { color : "lightgray" } } fontSize = 'inherit' > N/A</ Typography >
258
262
}
259
263
</ TableCell >
260
- < TableCell align = "left" > { oaiModel . model } </ TableCell >
261
- < TableCell sx = { { fontWeight : 'bold' } } align = "right" > < IconButton
262
- onClick = { ( ) => { testModel ( oaiModel . endpoint , oaiModel . key , oaiModel . model ) } }
263
- > { statusIcon } </ IconButton > </ TableCell >
264
- < TableCell align = "right" >
264
+ < TableCell align = "left" sx = { { borderBottom : borderStyle } } > { oaiModel . model } </ TableCell >
265
+ < TableCell sx = { { fontWeight : 'bold' , borderBottom : borderStyle } } align = "right" >
266
+ < IconButton
267
+ onClick = { ( ) => { testModel ( oaiModel . endpoint , oaiModel . key , oaiModel . model ) } }
268
+ >
269
+ { statusIcon }
270
+ </ IconButton >
271
+ </ TableCell >
272
+ < TableCell sx = { { borderBottom : borderStyle } } align = "right" >
265
273
< IconButton disabled = { oaiModel . endpoint == "default" }
266
274
onClick = { ( ) => {
267
275
dispatch ( dfActions . removeModel ( { model : oaiModel . model , endpoint : oaiModel . endpoint } ) ) ;
@@ -282,11 +290,30 @@ export const ModelSelectionButton: React.FC<{}> = ({ }) => {
282
290
</ IconButton >
283
291
</ TableCell >
284
292
</ TableRow >
293
+ { [ 'error' , 'unknown' ] . includes ( status ) && (
294
+ < TableRow
295
+ selected = { isItemSelected }
296
+ onClick = { ( ) => { setTempSelectedMode ( { model : oaiModel . model , endpoint : oaiModel . endpoint } ) } }
297
+ sx = { {
298
+ cursor : 'pointer' ,
299
+ '&:hover' : {
300
+ backgroundColor : 'rgba(0, 0, 0, 0.04)' ,
301
+ } ,
302
+ } }
303
+ >
304
+ < TableCell colSpan = { 2 } align = "right" > </ TableCell >
305
+ < TableCell colSpan = { 5 } >
306
+ < Typography variant = "caption" color = "error" >
307
+ { testedModels . find ( m => m . model === oaiModel . model && m . endpoint === oaiModel . endpoint ) ?. message || "Unknown error" }
308
+ </ Typography >
309
+ </ TableCell >
310
+ </ TableRow >
311
+ ) }
312
+ </ >
285
313
)
286
314
} ) }
287
315
{ newModelEntry }
288
316
</ TableBody >
289
- { /* <caption style={{textAlign: 'right', padding: '0 16px'}}><Typography fontSize="small" color="error">{modelExists ? "endpoint and model exists" : ""}</Typography></caption> */ }
290
317
</ Table >
291
318
</ TableContainer >
292
319
0 commit comments