Feat/attachments (#9526)

Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: JzoNg <jzongcode@gmail.com>

web/app/components/app/configuration/base/feature-panel/index.tsx

@@ -2,7 +2,6 @@
 import type { FC, ReactNode } from 'react'
 import React from 'react'
 import cn from '@/utils/classnames'
-import ParamsConfig from '@/app/components/app/configuration/config-voice/param-config'
 
 export type IFeaturePanelProps = {
   className?: string
@@ -10,10 +9,8 @@ export type IFeaturePanelProps = {
   title: ReactNode
   headerRight?: ReactNode
   hasHeaderBottomBorder?: boolean
-  isFocus?: boolean
   noBodySpacing?: boolean
   children?: ReactNode
-  isShowTextToSpeech?: boolean
 }
 
 const FeaturePanel: FC<IFeaturePanelProps> = ({
@@ -22,32 +19,20 @@ const FeaturePanel: FC<IFeaturePanelProps> = ({
   title,
   headerRight,
   hasHeaderBottomBorder,
-  isFocus,
   noBodySpacing,
   children,
-  isShowTextToSpeech,
 }) => {
   return (
-    <div
-      className={cn(className, isFocus && 'border border-[#2D0DEE]', 'rounded-xl bg-gray-50 pt-2 pb-3', noBodySpacing && '!pb-0')}
-      style={isFocus
-        ? {
-          boxShadow: '0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06)',
-        }
-        : {}}
-    >
+    <div className={cn('rounded-xl border-t-[0.5px] border-l-[0.5px] bg-background-section-burn pb-3', noBodySpacing && '!pb-0', className)}>
       {/* Header */}
-      <div className={cn('pb-2 px-3', hasHeaderBottomBorder && 'border-b border-gray-100')}>
+      <div className={cn('px-3 pt-2', hasHeaderBottomBorder && 'border-b border-divider-subtle')}>
         <div className='flex justify-between items-center h-8'>
           <div className='flex items-center space-x-1 shrink-0'>
             {headerIcon && <div className='flex items-center justify-center w-6 h-6'>{headerIcon}</div>}
-            <div className='text-sm font-semibold text-gray-800'>{title}</div>
+            <div className='text-text-secondary system-sm-semibold'>{title}</div>
           </div>
           <div className='flex gap-2 items-center'>
             {headerRight && <div>{headerRight}</div>}
-            {isShowTextToSpeech && <div className='flex items-center'>
-              <ParamsConfig />
-            </div>}
           </div>
         </div>
       </div>