fix: chat token spent info style (#1597)

web/app/components/app/chat/answer/index.tsx

@@ -194,7 +194,7 @@ const Answer: FC<IAnswerProps> = ({
             </div>
           )
         }
-        <div className={cn(s.answerWrapWrap, 'chat-answer-container')}>
+        <div className={cn(s.answerWrapWrap, 'chat-answer-container group')}>
           <div className={`${s.answerWrap} ${showEdit ? 'w-full' : ''}`}>
             <div className={`${s.answer} relative text-sm text-gray-900`}>
               <div className={'ml-2 py-3 px-4 bg-gray-100 rounded-tr-2xl rounded-b-2xl'}>
@@ -280,7 +280,7 @@ const Answer: FC<IAnswerProps> = ({
                 {!feedbackDisabled && renderFeedbackRating(feedback?.rating, !isHideFeedbackEdit, displayScene !== 'console')}
               </div>
             </div>
-            {more && <MoreInfo more={more} isQuestion={false} />}
+            {more && <MoreInfo className='hidden group-hover:block' more={more} isQuestion={false} />}
           </div>
         </div>
       </div>

web/app/components/app/chat/more-info/index.tsx

@@ -5,11 +5,15 @@ import { useTranslation } from 'react-i18next'
 import type { MessageMore } from '../type'
 import { formatNumber } from '@/utils/format'
 
-export type IMoreInfoProps = { more: MessageMore; isQuestion: boolean }
+export type IMoreInfoProps = {
+  more: MessageMore
+  isQuestion: boolean
+  className?: string
+}
 
-const MoreInfo: FC<IMoreInfoProps> = ({ more, isQuestion }) => {
+const MoreInfo: FC<IMoreInfoProps> = ({ more, isQuestion, className }) => {
   const { t } = useTranslation()
-  return (<div className={`mt-1 w-full text-xs text-gray-400 !text-right ${isQuestion ? 'mr-2 text-right ' : 'ml-2 text-left float-right'}`}>
+  return (<div className={`mt-1 w-full text-xs text-gray-400 ${isQuestion ? 'mr-2 text-right ' : 'pl-2 text-left float-right'} ${className}`}>
     <span>{`${t('appLog.detail.timeConsuming')} ${more.latency}${t('appLog.detail.second')}`}</span>
     <span>{`${t('appLog.detail.tokenCost')} ${formatNumber(more.tokens)}`}</span>
     <span>· </span>