feat: chat in explore support agent (#647)

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

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

@@ -1,12 +1,13 @@
 'use client'
-import React, { FC, ReactNode } from 'react'
+import type { FC, ReactNode } from 'react'
+import React from 'react'
 import cn from 'classnames'
 
-export interface IFeaturePanelProps {
+export type IFeaturePanelProps = {
   className?: string
-  headerIcon: ReactNode
+  headerIcon?: ReactNode
   title: ReactNode
-  headerRight: ReactNode
+  headerRight?: ReactNode
   hasHeaderBottomBorder?: boolean
   isFocus?: boolean
   noBodySpacing?: boolean
@@ -26,15 +27,17 @@ const FeaturePanel: FC<IFeaturePanelProps> = ({
   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)',
-      } : {}}
+      style={isFocus
+        ? {
+          boxShadow: '0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06)',
+        }
+        : {}}
     >
       {/* Header */}
       <div className={cn('pb-2 px-3', hasHeaderBottomBorder && 'border-b border-gray-100')}>
         <div className='flex justify-between items-center h-8'>
           <div className='flex items-center space-x-1 shrink-0'>
-            <div className='flex items-center justify-center w-4 h-4'>{headerIcon}</div>
+            {headerIcon && <div className='flex items-center justify-center w-4 h-4'>{headerIcon}</div>}
             <div className='text-sm font-semibold text-gray-800'>{title}</div>
           </div>
           <div>