| | |
| | | import { memo } from 'react' |
| | | import { useTranslation } from 'react-i18next' |
| | | import type { OnSend } from '../types' |
| | | import { Star04 } from '@/app/components/base/icons/src/vender/solid/shapes' |
| | | import Button from '@/app/components/base/button' |
| | | import Divider from '@/app/components/base/divider' |
| | | import cn from '@/utils/classnames' |
| | | |
| | | type TryToAskProps = { |
| | | suggestedQuestions: string[] |
| | | onSend: OnSend |
| | | isMobile?: boolean |
| | | } |
| | | const TryToAsk: FC<TryToAskProps> = ({ |
| | | suggestedQuestions, |
| | | onSend, |
| | | isMobile, |
| | | }) => { |
| | | const { t } = useTranslation() |
| | | |
| | | return ( |
| | | <div className='mb-2 py-2'> |
| | | <div className={cn('mb-2.5 flex items-center justify-between gap-2', isMobile && 'justify-end')}> |
| | | <Divider bgStyle='gradient' className='h-px grow rotate-180' /> |
| | | <div className='system-xs-medium-uppercase shrink-0 text-text-tertiary'>{t('appDebug.feature.suggestedQuestionsAfterAnswer.tryToAsk')}</div> |
| | | {!isMobile && <Divider bgStyle='gradient' className='h-px grow' />} |
| | | <div> |
| | | <div className='flex items-center mb-2.5 py-2'> |
| | | <div |
| | | className='grow h-[1px]' |
| | | style={{ |
| | | background: 'linear-gradient(270deg, #F3F4F6 0%, rgba(243, 244, 246, 0) 100%)', |
| | | }} |
| | | /> |
| | | <div className='shrink-0 flex items-center px-3 text-gray-500'> |
| | | <Star04 className='mr-1 w-2.5 h-2.5' /> |
| | | <span className='text-xs text-gray-500 font-medium'>{t('appDebug.feature.suggestedQuestionsAfterAnswer.tryToAsk')}</span> |
| | | </div> |
| | | <div |
| | | className='grow h-[1px]' |
| | | style={{ |
| | | background: 'linear-gradient(270deg, rgba(243, 244, 246, 0) 0%, #F3F4F6 100%)', |
| | | }} |
| | | /> |
| | | </div> |
| | | <div className={cn('flex flex-wrap justify-center', isMobile && 'justify-end')}> |
| | | <div className='flex flex-wrap justify-center'> |
| | | { |
| | | suggestedQuestions.map((suggestQuestion, index) => ( |
| | | <Button |
| | | size='small' |
| | | key={index} |
| | | variant='secondary-accent' |
| | | className='mb-1 mr-1 last:mr-0' |
| | | className='mb-2 mr-2 last:mr-0' |
| | | onClick={() => onSend(suggestQuestion)} |
| | | > |
| | | {suggestQuestion} |