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,6 +571,14 @@ 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>
+                {
+                  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)}
@@ -577,6 +586,9 @@ const Chat: FC<IChatProps> = ({
                         <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,7 +102,8 @@ 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')}>
+    <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' />
@@ -145,6 +146,7 @@ const VoiceInput = ({
         }
         <div className='w-[45px] pl-1 text-xs font-medium text-gray-700'>{duration}</div>
       </div>
+    </div>
   )
 }