fix ui

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

@@ -22,6 +22,7 @@ import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import VoiceInput from '@/app/components/base/voice-input'
 import { Microphone01 } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
 import { Microphone01 as Microphone01Solid } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
+import { XCircle } from '@/app/components/base/icons/src/vender/solid/general'
 
 const stopIcon = (
   <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -570,13 +571,24 @@ const Chat: FC<IChatProps> = ({
               />
               <div className="absolute top-0 right-2 flex items-center h-[48px]">
                 <div className={`${s.count} mr-4 h-5 leading-5 text-sm bg-gray-50 text-gray-500`}>{query.trim().length}</div>
-                <div
-                  className='group flex justify-center items-center w-8 h-8 hover:bg-primary-50 rounded-lg cursor-pointer'
-                  onClick={() => setVoiceInputShow(true)}
-                >
-                  <Microphone01 className='block w-4 h-4 text-gray-500 group-hover:hidden' />
-                  <Microphone01Solid className='hidden w-4 h-4 text-primary-600 group-hover:block' />
-                </div>
+                {
+                  query
+                    ? (
+                      <div className='flex justify-center items-center w-8 h-8 cursor-pointer' onClick={() => setQuery('')}>
+                        <XCircle className='w-4 h-4 text-[#98A2B3]' />
+                      </div>
+                    )
+                    : (
+                      <div
+                        className='group flex justify-center items-center w-8 h-8 hover:bg-primary-50 rounded-lg cursor-pointer'
+                        onClick={() => setVoiceInputShow(true)}
+                      >
+                        <Microphone01 className='block w-4 h-4 text-gray-500 group-hover:hidden' />
+                        <Microphone01Solid className='hidden w-4 h-4 text-primary-600 group-hover:block' />
+                      </div>
+                    )
+                }
+                <div className='mx-2 w-[1px] h-4 bg-black opacity-5' />
                 {isMobile
                   ? sendBtn
                   : (

web/app/components/base/voice-input/index.module.css

 .wrapper {
+  background: linear-gradient(131deg, #2250F2 0%, #0EBCF3 100%);
   box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
 }
 

web/app/components/base/voice-input/index.tsx

@@ -102,48 +102,50 @@ const VoiceInput = ({
   }, [])
 
   return (
-    <div className={cn(s.wrapper, 'flex items-center absolute inset-0 pl-4 pr-2 py-[14px] bg-primary-25 rounded-xl overflow-hidden')}>
-      <canvas id='voice-input-record' className='absolute left-0 bottom-0 w-full h-4' />
-      {
-        startConvert && <Loading02 className='mr-2 w-4 h-4 text-primary-700' />
-      }
-      <div className='grow'>
+    <div className={cn(s.wrapper, 'absolute inset-0 rounded-xl')}>
+      <div className='absolute inset-[1.5px] flex items-center pl-[14.5px] pr-[6.5px] py-[14px] bg-primary-25 rounded-[10.5px] overflow-hidden'>
+        <canvas id='voice-input-record' className='absolute left-0 bottom-0 w-full h-4' />
+        {
+          startConvert && <Loading02 className='mr-2 w-4 h-4 text-primary-700' />
+        }
+        <div className='grow'>
+          {
+            startRecord && (
+              <div className='text-sm text-gray-500'>
+                {t('common.voiceInput.speaking')}
+              </div>
+            )
+          }
+          {
+            startConvert && (
+              <div className={cn(s.convert, 'text-sm')}>
+                {t('common.voiceInput.converting')}
+              </div>
+            )
+          }
+        </div>
         {
           startRecord && (
-            <div className='text-sm text-gray-500'>
-              {t('common.voiceInput.speaking')}
+            <div
+              className='flex justify-center items-center mr-1 w-8 h-8 hover:bg-primary-100 rounded-lg  cursor-pointer'
+              onClick={handleStopRecorder}
+            >
+              <StopCircle className='w-5 h-5 text-primary-600' />
             </div>
           )
         }
         {
           startConvert && (
-            <div className={cn(s.convert, 'text-sm')}>
-              {t('common.voiceInput.converting')}
+            <div
+              className='flex justify-center items-center mr-1 w-8 h-8 hover:bg-primary-100 rounded-lg  cursor-pointer'
+              onClick={onCancel}
+            >
+              <XClose className='w-4 h-4 text-gray-500' />
             </div>
           )
         }
+        <div className='w-[45px] pl-1 text-xs font-medium text-gray-700'>{duration}</div>
       </div>
-      {
-        startRecord && (
-          <div
-            className='flex justify-center items-center mr-1 w-8 h-8 hover:bg-primary-100 rounded-lg  cursor-pointer'
-            onClick={handleStopRecorder}
-          >
-            <StopCircle className='w-5 h-5 text-primary-600' />
-          </div>
-        )
-      }
-      {
-        startConvert && (
-          <div
-            className='flex justify-center items-center mr-1 w-8 h-8 hover:bg-primary-100 rounded-lg  cursor-pointer'
-            onClick={onCancel}
-          >
-            <XClose className='w-4 h-4 text-gray-500' />
-          </div>
-        )
-      }
-      <div className='w-[45px] pl-1 text-xs font-medium text-gray-700'>{duration}</div>
     </div>
   )
 }