| | |
| | | }, [features, isChatMode, showFileUpload]) |
| | | |
| | | return ( |
| | | <div className='m-1 mt-0 -translate-y-2 rounded-b-[10px] border-b border-l border-r border-components-panel-border-subtle bg-util-colors-indigo-indigo-50 px-2.5 py-2 pt-4'> |
| | | <div className='-translate-y-2 m-1 mt-0 px-2.5 py-2 pt-4 bg-util-colors-indigo-indigo-50 rounded-b-[10px] border-l border-b border-r border-components-panel-border-subtle'> |
| | | {noFeatureEnabled && ( |
| | | <div className='flex cursor-pointer items-end gap-1' onClick={() => onFeatureBarClick?.(true)}> |
| | | <RiApps2AddLine className='h-3.5 w-3.5 text-text-accent' /> |
| | | <div className='body-xs-medium text-text-accent'>{t('appDebug.feature.bar.empty')}</div> |
| | | <RiArrowRightLine className='h-3.5 w-3.5 text-text-accent' /> |
| | | <div className='flex items-end gap-1 cursor-pointer' onClick={() => onFeatureBarClick?.(true)}> |
| | | <RiApps2AddLine className='w-3.5 h-3.5 text-text-accent' /> |
| | | <div className='text-text-accent body-xs-medium'>{t('appDebug.feature.bar.empty')}</div> |
| | | <RiArrowRightLine className='w-3.5 h-3.5 text-text-accent' /> |
| | | </div> |
| | | )} |
| | | {!noFeatureEnabled && ( |
| | | <div className='flex items-center gap-2'> |
| | | <div className='flex shrink-0 items-center gap-0.5'> |
| | | <div className='shrink-0 flex items-center gap-0.5'> |
| | | {!!features.moreLikeThis?.enabled && ( |
| | | <Tooltip |
| | | popupContent={t('appDebug.feature.moreLikeThis.title')} |
| | | > |
| | | <div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-light-blue-light-500 p-1 shadow-xs'> |
| | | <RiSparklingFill className='h-3.5 w-3.5 text-text-primary-on-surface' /> |
| | | <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-blue-light-blue-light-500'> |
| | | <RiSparklingFill className='w-3.5 h-3.5 text-text-primary-on-surface' /> |
| | | </div> |
| | | </Tooltip> |
| | | )} |
| | |
| | | <Tooltip |
| | | popupContent={t('appDebug.feature.conversationOpener.title')} |
| | | > |
| | | <div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-light-blue-light-500 p-1 shadow-xs'> |
| | | <LoveMessage className='h-3.5 w-3.5 text-text-primary-on-surface' /> |
| | | <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-blue-light-blue-light-500'> |
| | | <LoveMessage className='w-3.5 h-3.5 text-text-primary-on-surface' /> |
| | | </div> |
| | | </Tooltip> |
| | | )} |
| | |
| | | <Tooltip |
| | | popupContent={t('appDebug.feature.moderation.title')} |
| | | > |
| | | <div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-text-success p-1 shadow-xs'> |
| | | <ContentModeration className='h-3.5 w-3.5 text-text-primary-on-surface' /> |
| | | <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-text-success'> |
| | | <ContentModeration className='w-3.5 h-3.5 text-text-primary-on-surface' /> |
| | | </div> |
| | | </Tooltip> |
| | | )} |
| | |
| | | <Tooltip |
| | | popupContent={t('appDebug.feature.speechToText.title')} |
| | | > |
| | | <div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-violet-violet-600 p-1 shadow-xs'> |
| | | <Microphone01 className='h-3.5 w-3.5 text-text-primary-on-surface' /> |
| | | <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-violet-violet-600'> |
| | | <Microphone01 className='w-3.5 h-3.5 text-text-primary-on-surface' /> |
| | | </div> |
| | | </Tooltip> |
| | | )} |
| | |
| | | <Tooltip |
| | | popupContent={t('appDebug.feature.textToSpeech.title')} |
| | | > |
| | | <div className={cn('shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-violet-violet-600 p-1 shadow-xs', !disabled && 'cursor-pointer')}> |
| | | <TextToAudio className='h-3.5 w-3.5 text-text-primary-on-surface' /> |
| | | <div className={cn('shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-violet-violet-600', !disabled && 'cursor-pointer')}> |
| | | <TextToAudio className='w-3.5 h-3.5 text-text-primary-on-surface' /> |
| | | </div> |
| | | </Tooltip> |
| | | </VoiceSettings> |
| | |
| | | <Tooltip |
| | | popupContent={t('appDebug.feature.fileUpload.title')} |
| | | > |
| | | <div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-blue-600 p-1 shadow-xs'> |
| | | <FolderUpload className='h-3.5 w-3.5 text-text-primary-on-surface' /> |
| | | <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-blue-blue-600'> |
| | | <FolderUpload className='w-3.5 h-3.5 text-text-primary-on-surface' /> |
| | | </div> |
| | | </Tooltip> |
| | | )} |
| | |
| | | <Tooltip |
| | | popupContent={t('appDebug.feature.suggestedQuestionsAfterAnswer.title')} |
| | | > |
| | | <div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-light-blue-light-500 p-1 shadow-xs'> |
| | | <VirtualAssistant className='h-3.5 w-3.5 text-text-primary-on-surface' /> |
| | | <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-blue-light-blue-light-500'> |
| | | <VirtualAssistant className='w-3.5 h-3.5 text-text-primary-on-surface' /> |
| | | </div> |
| | | </Tooltip> |
| | | )} |
| | |
| | | <Tooltip |
| | | popupContent={t('appDebug.feature.citation.title')} |
| | | > |
| | | <div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-warning-warning-500 p-1 shadow-xs'> |
| | | <Citations className='h-4 w-4 text-text-primary-on-surface' /> |
| | | <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-warning-warning-500'> |
| | | <Citations className='w-4 h-4 text-text-primary-on-surface' /> |
| | | </div> |
| | | </Tooltip> |
| | | )} |
| | |
| | | <Tooltip |
| | | popupContent={t('appDebug.feature.annotation.title')} |
| | | > |
| | | <div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-indigo-indigo-600 p-1 shadow-xs'> |
| | | <MessageFast className='h-3.5 w-3.5 text-text-primary-on-surface' /> |
| | | <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-indigo-indigo-600'> |
| | | <MessageFast className='w-3.5 h-3.5 text-text-primary-on-surface' /> |
| | | </div> |
| | | </Tooltip> |
| | | )} |
| | | </div> |
| | | <div className='body-xs-regular grow text-text-tertiary'>{t('appDebug.feature.bar.enableText')}</div> |
| | | <div className='grow text-text-tertiary body-xs-regular'>{t('appDebug.feature.bar.enableText')}</div> |
| | | <Button className='shrink-0' variant='ghost-accent' size='small' onClick={() => onFeatureBarClick?.(true)}> |
| | | <div className='mx-1'>{t('appDebug.feature.bar.manage')}</div> |
| | | <RiArrowRightLine className='h-3.5 w-3.5 text-text-accent' /> |
| | | <RiArrowRightLine className='w-3.5 h-3.5 text-text-accent' /> |
| | | </Button> |
| | | </div> |
| | | )} |