feat: support assistant frontend (#2139)

Co-authored-by: StyleZhang <jasonapring2015@outlook.com>

web/app/components/base/tab-slider/index.tsx

@@ -1,15 +1,20 @@
 import type { FC } from 'react'
+import cn from 'classnames'
 
 type Option = {
   value: string
   text: string
 }
 type TabSliderProps = {
+  className?: string
+  itemWidth?: number
   value: string
   onChange: (v: string) => void
   options: Option[]
 }
 const TabSlider: FC<TabSliderProps> = ({
+  className,
+  itemWidth = 118,
   value,
   onChange,
   options,
@@ -18,17 +23,20 @@ const TabSlider: FC<TabSliderProps> = ({
   const current = options[currentIndex]
 
   return (
-    <div className='relative flex p-0.5 rounded-lg bg-gray-200'>
+    <div className={cn(className, 'relative flex p-0.5 rounded-lg bg-gray-200')}>
       {
         options.map((option, index) => (
           <div
             key={option.value}
             className={`
-              flex justify-center items-center w-[118px] h-7 text-[13px] 
+              flex justify-center items-center h-7 text-[13px] 
               font-semibold text-gray-600 rounded-[7px] cursor-pointer
               hover:bg-gray-50
               ${index !== options.length - 1 && 'mr-[1px]'}
             `}
+            style={{
+              width: itemWidth,
+            }}
             onClick={() => onChange(option.value)}
           >
             {option.text}
@@ -39,10 +47,13 @@ const TabSlider: FC<TabSliderProps> = ({
         current && (
           <div
             className={`
-              absolute flex justify-center items-center w-[118px] h-7 bg-white text-[13px] font-semibold text-primary-600 
+              absolute flex justify-center items-center h-7 bg-white text-[13px] font-semibold text-primary-600 
               border-[0.5px] border-gray-200 rounded-[7px] shadow-xs transition-transform
             `}
-            style={{ transform: `translateX(${currentIndex * 118 + 1}px)` }}
+            style={{
+              width: itemWidth,
+              transform: `translateX(${currentIndex * itemWidth + 1}px)`,
+            }}
           >
             {current.text}
           </div>