1- import { Dropdown , Tip } from '@neo4j-ndl/react' ;
1+ import { Dropdown , Tip , useMediaQuery } from '@neo4j-ndl/react' ;
22import { OptionType , ReusableDropdownProps } from '../types' ;
3- import { memo , useMemo , useReducer } from 'react' ;
3+ import { memo , useMemo } from 'react' ;
44import { capitalize , capitalizeWithUnderscore } from '../utils/Utils' ;
5- // import { LLMDropdownLabel } from '../utils/Constants';
5+ import { prodllms } from '../utils/Constants' ;
6+
67const DropdownComponent : React . FC < ReusableDropdownProps > = ( {
78 options,
89 placeholder,
@@ -13,64 +14,55 @@ const DropdownComponent: React.FC<ReusableDropdownProps> = ({
1314 isDisabled,
1415 value,
1516} ) => {
16- const [ disableTooltip , toggleDisableState ] = useReducer ( ( state ) => ! state , false ) ;
1717 const isProdEnv = process . env . VITE_ENV === 'PROD' ;
18- const supportedModels = process . env . VITE_LLM_MODELS_PROD ;
18+ const isLargeDesktop = useMediaQuery ( `(min-width:1440px )` ) ;
1919 const handleChange = ( selectedOption : OptionType | null | void ) => {
2020 onSelect ( selectedOption ) ;
2121 } ;
2222 const allOptions = useMemo ( ( ) => options , [ options ] ) ;
2323 return (
2424 < >
2525 < div className = { view === 'ContentView' ? 'w-[150px]' : '' } >
26- < Tip allowedPlacements = { [ 'top' ] } isDisabled = { disableTooltip } >
27- < Tip . Trigger >
28- < Dropdown
29- type = 'select'
30- aria-label = 'A selection dropdown'
31- label = 'LLM Models'
32- selectProps = { {
33- onChange : handleChange ,
34- options : allOptions ?. map ( ( option ) => {
35- const label =
36- typeof option === 'string' ? capitalizeWithUnderscore ( option ) : capitalize ( option . label ) ;
37- const value = typeof option === 'string' ? option : option . value ;
38- const isModelSupported = ! isProdEnv || supportedModels ?. includes ( value ) ;
39- return {
40- label,
41- value,
42- isDisabled : ! isModelSupported ,
43- } ;
44- } ) ,
45- placeholder : placeholder || 'Select an option' ,
46- defaultValue : defaultValue
47- ? { label : capitalizeWithUnderscore ( defaultValue ) , value : defaultValue }
48- : undefined ,
49- menuPlacement : 'auto' ,
50- isDisabled : isDisabled ,
51- value : value ,
52- onMenuOpen : ( ) => {
53- toggleDisableState ( ) ;
54- } ,
55- onMenuClose : ( ) => {
56- toggleDisableState ( ) ;
57- } ,
58- } }
59- size = 'medium'
60- fluid
61- />
62- </ Tip . Trigger >
63- < Tip . Content > LLM Model used for Extraction & Chat </ Tip . Content >
64- </ Tip >
26+ < Dropdown
27+ type = 'select'
28+ aria-label = 'A selection dropdown'
29+ label = 'LLM Models'
30+ helpText = { < div className = '!w-max' > LLM Model used for Extraction & Chat </ div > }
31+ selectProps = { {
32+ onChange : handleChange ,
33+ // @ts -ignore
34+ options : allOptions ?. map ( ( option ) => {
35+ const label = typeof option === 'string' ? capitalizeWithUnderscore ( option ) : capitalize ( option . label ) ;
36+ const value = typeof option === 'string' ? option : option . value ;
37+ const isModelSupported = ! isProdEnv || prodllms ?. includes ( value ) ;
38+ return {
39+ label : ! isModelSupported ? (
40+ < Tip allowedPlacements = { isLargeDesktop ? [ 'left' ] : [ 'right' ] } >
41+ < Tip . Trigger >
42+ < span > { label } </ span >
43+ </ Tip . Trigger >
44+ < Tip . Content > Available In Development Version</ Tip . Content >
45+ </ Tip >
46+ ) : (
47+ < span > { label } </ span >
48+ ) ,
49+ value,
50+ isDisabled : ! isModelSupported ,
51+ } ;
52+ } ) ,
53+ placeholder : placeholder || 'Select an option' ,
54+ defaultValue : defaultValue
55+ ? { label : capitalizeWithUnderscore ( defaultValue ) , value : defaultValue }
56+ : undefined ,
57+ menuPlacement : 'auto' ,
58+ isDisabled : isDisabled ,
59+ value : value ,
60+ } }
61+ size = 'medium'
62+ fluid
63+ />
6564 { children }
6665 </ div >
67- { /* {isProdEnv && (<Typography className={'pt-4 absolute top-14 self-start'} variant='body-small'>
68- {LLMDropdownLabel.disabledModels}
69- <a href="https://dev-frontend-dcavk67s4a-uc.a.run.app/" target="_blank" style={{ textDecoration: 'underline' }}>
70- {LLMDropdownLabel.devEnv}
71- </a>
72- {'.'}
73- </Typography>)} */ }
7466 </ >
7567 ) ;
7668} ;
0 commit comments