| return ( | return ( | ||||
| <img | <img | ||||
| alt='model-icon' | alt='model-icon' | ||||
| src={`${provider.icon_small[language]}?_token=${localStorage.getItem('console_token')}`} | |||||
| src={`${provider.icon_small[language] || provider.icon_small.en_US}?_token=${localStorage.getItem('console_token')}`} | |||||
| className={`w-4 h-4 ${className}`} | className={`w-4 h-4 ${className}`} | ||||
| /> | /> | ||||
| ) | ) |
| <Tooltip popupContent={ | <Tooltip popupContent={ | ||||
| // w-[100px] caused problem | // w-[100px] caused problem | ||||
| <div className=''> | <div className=''> | ||||
| {tooltip[language]} | |||||
| {tooltip[language] || tooltip.en_US} | |||||
| </div> | </div> | ||||
| } > | } > | ||||
| <HelpCircle className='w-3 h-3 text-gray-500' /> | <HelpCircle className='w-3 h-3 text-gray-500' /> | ||||
| return ( | return ( | ||||
| <div key={variable} className='py-3'> | <div key={variable} className='py-3'> | ||||
| <div className='py-2 text-sm text-gray-900'> | <div className='py-2 text-sm text-gray-900'> | ||||
| {label[language]} | |||||
| {label[language] || label.en_US} | |||||
| { | { | ||||
| required && ( | required && ( | ||||
| <span className='ml-1 text-red-500'>*</span> | <span className='ml-1 text-red-500'>*</span> | ||||
| value={(isShowDefaultValue && ((value[variable] as string) === '' || value[variable] === undefined || value[variable] === null)) ? formSchema.default : value[variable]} | value={(isShowDefaultValue && ((value[variable] as string) === '' || value[variable] === undefined || value[variable] === null)) ? formSchema.default : value[variable]} | ||||
| onChange={val => handleFormChange(variable, val)} | onChange={val => handleFormChange(variable, val)} | ||||
| validated={validatedSuccess} | validated={validatedSuccess} | ||||
| placeholder={placeholder?.[language]} | |||||
| placeholder={placeholder?.[language] || placeholder?.en_US} | |||||
| disabled={disabed} | disabled={disabed} | ||||
| type={formSchema.type === FormTypeEnum.textNumber ? 'number' : 'text'} | type={formSchema.type === FormTypeEnum.textNumber ? 'number' : 'text'} | ||||
| {...(formSchema.type === FormTypeEnum.textNumber ? { min: (formSchema as CredentialFormSchemaNumberInput).min, max: (formSchema as CredentialFormSchemaNumberInput).max } : {})} | {...(formSchema.type === FormTypeEnum.textNumber ? { min: (formSchema as CredentialFormSchemaNumberInput).min, max: (formSchema as CredentialFormSchemaNumberInput).max } : {})} | ||||
| return ( | return ( | ||||
| <div key={variable} className='py-3'> | <div key={variable} className='py-3'> | ||||
| <div className='py-2 text-sm text-gray-900'> | <div className='py-2 text-sm text-gray-900'> | ||||
| {label[language]} | |||||
| {label[language] || label.en_US} | |||||
| { | { | ||||
| required && ( | required && ( | ||||
| <span className='ml-1 text-red-500'>*</span> | <span className='ml-1 text-red-500'>*</span> | ||||
| return ( | return ( | ||||
| <div key={variable} className='py-3'> | <div key={variable} className='py-3'> | ||||
| <div className='py-2 text-sm text-gray-900'> | <div className='py-2 text-sm text-gray-900'> | ||||
| {label[language]} | |||||
| {label[language] || label.en_US} | |||||
| { | { | ||||
| required && ( | required && ( | ||||
| <div key={variable} className='py-3'> | <div key={variable} className='py-3'> | ||||
| <div className='flex items-center justify-between py-2 text-sm text-gray-900'> | <div className='flex items-center justify-between py-2 text-sm text-gray-900'> | ||||
| <div className='flex items-center space-x-2'> | <div className='flex items-center space-x-2'> | ||||
| <span>{label[language]}</span> | |||||
| <span>{label[language] || label.en_US}</span> | |||||
| {tooltipContent} | {tooltipContent} | ||||
| </div> | </div> | ||||
| <Radio.Group | <Radio.Group |
| (provider.help && (provider.help.title || provider.help.url)) | (provider.help && (provider.help.title || provider.help.url)) | ||||
| ? ( | ? ( | ||||
| <a | <a | ||||
| href={provider.help?.url[language]} | |||||
| href={provider.help?.url[language] || provider.help?.url.en_US} | |||||
| target='_blank' rel='noopener noreferrer' | target='_blank' rel='noopener noreferrer' | ||||
| className='inline-flex items-center text-xs text-primary-600' | className='inline-flex items-center text-xs text-primary-600' | ||||
| onClick={e => !provider.help.url && e.preventDefault()} | onClick={e => !provider.help.url && e.preventDefault()} | ||||
| > | > | ||||
| {provider.help.title?.[language] || provider.help.url[language]} | |||||
| {provider.help.title?.[language] || provider.help.url[language] || provider.help.title?.en_US || provider.help.url.en_US} | |||||
| <LinkExternal02 className='ml-1 w-3 h-3' /> | <LinkExternal02 className='ml-1 w-3 h-3' /> | ||||
| </a> | </a> | ||||
| ) | ) |
| if (!modelItem) | if (!modelItem) | ||||
| return null | return null | ||||
| return ( | return ( | ||||
| <div | <div | ||||
| className={` | className={` | ||||
| > | > | ||||
| <div | <div | ||||
| className='mr-1 truncate' | className='mr-1 truncate' | ||||
| title={modelItem.label[language]} | |||||
| title={modelItem.label[language] || modelItem.label.en_US} | |||||
| > | > | ||||
| {modelItem.label[language]} | |||||
| {modelItem.label[language] || modelItem.label.en_US} | |||||
| </div> | </div> | ||||
| { | { | ||||
| showModelType && modelItem.model_type && ( | showModelType && modelItem.model_type && ( |
| <div className='shrink-0 flex items-center w-[200px]'> | <div className='shrink-0 flex items-center w-[200px]'> | ||||
| <div | <div | ||||
| className='mr-0.5 text-[13px] font-medium text-gray-700 truncate' | className='mr-0.5 text-[13px] font-medium text-gray-700 truncate' | ||||
| title={parameterRule.label[language]} | |||||
| title={parameterRule.label[language] || parameterRule.label.en_US} | |||||
| > | > | ||||
| {parameterRule.label[language]} | |||||
| {parameterRule.label[language] || parameterRule.label.en_US} | |||||
| </div> | </div> | ||||
| { | { | ||||
| parameterRule.help && ( | parameterRule.help && ( | ||||
| <Tooltip | <Tooltip | ||||
| selector={`model-parameter-rule-${parameterRule.name}`} | selector={`model-parameter-rule-${parameterRule.name}`} | ||||
| htmlContent={( | htmlContent={( | ||||
| <div className='w-[200px] whitespace-pre-wrap'>{parameterRule.help[language]}</div> | |||||
| <div className='w-[200px] whitespace-pre-wrap'>{parameterRule.help[language] || parameterRule.help.en_US}</div> | |||||
| )} | )} | ||||
| > | > | ||||
| <HelpCircle className='mr-1.5 w-3.5 h-3.5 text-gray-400' /> | <HelpCircle className='mr-1.5 w-3.5 h-3.5 text-gray-400' /> |
| return ( | return ( | ||||
| <div className='mb-1'> | <div className='mb-1'> | ||||
| <div className='flex items-center px-3 h-[22px] text-xs font-medium text-gray-500'> | <div className='flex items-center px-3 h-[22px] text-xs font-medium text-gray-500'> | ||||
| {model.label[language]} | |||||
| {model.label[language] || model.label.en_US} | |||||
| </div> | </div> | ||||
| { | { | ||||
| model.models.map(modelItem => ( | model.models.map(modelItem => ( |
| const language = useLanguage() | const language = useLanguage() | ||||
| const [searchText, setSearchText] = useState('') | const [searchText, setSearchText] = useState('') | ||||
| const filteredModelList = modelList.filter(model => model.models.filter(modelItem => modelItem.label[language].includes(searchText)).length) | |||||
| const filteredModelList = modelList.filter( | |||||
| model => model.models.filter( | |||||
| (modelItem) => { | |||||
| if (modelItem.label[language] !== undefined) | |||||
| return modelItem.label[language].includes(searchText) | |||||
| let found = false | |||||
| Object.keys(modelItem.label).forEach((key) => { | |||||
| if (modelItem.label[key].includes(searchText)) | |||||
| found = true | |||||
| }) | |||||
| return found | |||||
| }, | |||||
| ).length, | |||||
| ) | |||||
| return ( | return ( | ||||
| <div className='w-[320px] max-h-[480px] rounded-lg border-[0.5px] border-gray-200 bg-white shadow-lg overflow-y-auto'> | <div className='w-[320px] max-h-[480px] rounded-lg border-[0.5px] border-gray-200 bg-white shadow-lg overflow-y-auto'> |
| </div> | </div> | ||||
| { | { | ||||
| provider.description && ( | provider.description && ( | ||||
| <div className='mt-1 leading-4 text-xs text-black/[48]'>{provider.description[language]}</div> | |||||
| <div className='mt-1 leading-4 text-xs text-black/[48]'>{provider.description[language] || provider.description.en_US}</div> | |||||
| ) | ) | ||||
| } | } | ||||
| </div> | </div> |
| return ( | return ( | ||||
| <img | <img | ||||
| alt='provider-icon' | alt='provider-icon' | ||||
| src={`${provider.icon_large[language]}?_token=${localStorage.getItem('console_token')}`} | |||||
| src={`${provider.icon_large[language] || provider.icon_large.en_US}?_token=${localStorage.getItem('console_token')}`} | |||||
| className={`w-auto h-6 ${className}`} | className={`w-auto h-6 ${className}`} | ||||
| /> | /> | ||||
| ) | ) |