React technology stack, I want to add a click on the right side of the input box to lift the entire input box and play the voice input animation, and also realize the voice-to-text input function. Similar to the voice input animation of the chatgpt app, how should it be done? I have speech to text api.
`<div className=”absolute bottom-2 right-2 flex items-center h-8″>
<code> <div className={`${s.count} mr-4 h-5 leading-5 text-sm bg-gray-50 text-gray-500`}>{query.trim().length}</div>
<Tooltip
selector='send-tip'
htmlContent={
<div>
<div>{t('common.operation.send')} Enter</div>
<div>{t('common.operation.lineBreak')} Shift Enter</div>
</div>
}
>
<div className={`${s.sendBtn} w-8 h-8 cursor-pointer rounded-md`} onClick={handleSend}></div>
</Tooltip>
</div>`
</code>
<code> <div className={`${s.count} mr-4 h-5 leading-5 text-sm bg-gray-50 text-gray-500`}>{query.trim().length}</div>
<Tooltip
selector='send-tip'
htmlContent={
<div>
<div>{t('common.operation.send')} Enter</div>
<div>{t('common.operation.lineBreak')} Shift Enter</div>
</div>
}
>
<div className={`${s.sendBtn} w-8 h-8 cursor-pointer rounded-md`} onClick={handleSend}></div>
</Tooltip>
</div>`
</code>
<div className={`${s.count} mr-4 h-5 leading-5 text-sm bg-gray-50 text-gray-500`}>{query.trim().length}</div>
<Tooltip
selector='send-tip'
htmlContent={
<div>
<div>{t('common.operation.send')} Enter</div>
<div>{t('common.operation.lineBreak')} Shift Enter</div>
</div>
}
>
<div className={`${s.sendBtn} w-8 h-8 cursor-pointer rounded-md`} onClick={handleSend}></div>
</Tooltip>
</div>`
New contributor
Fatin is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.