fix: change trigger detail

web/app/components/explore/universal-chat/config-view/detail/index.tsx

@@ -25,9 +25,9 @@ const ConfigViewPanel: FC<Props> = ({
     hideConfig()
   }, configContentRef)
   return (
-    <div ref={configContentRef} className='relative'>
-      <div onClick={toggleShowConfig} className={cn(s.btn, 'flex h-8 w-8 rounded-lg border border-gray-200 bg-white cursor-pointer')}></div>
-      {isShowConfig && (
+    // <div ref={configContentRef} className='relative'>
+    //   <div onClick={toggleShowConfig} className={cn(s.btn, 'flex h-8 w-8 rounded-lg border border-gray-200 bg-white cursor-pointer')}></div>
+    //   {isShowConfig && (
     <div className={cn('absolute top-9 right-0 z-20 p-4 bg-white rounded-2xl shadow-md', s.panelBorder)}>
       <div className='w-[368px]'>
         <Config
@@ -39,9 +39,9 @@ const ConfigViewPanel: FC<Props> = ({
         <div className='mt-3 text-xs leading-[18px] text-500 font-normal'>{t('explore.universalChat.viewConfigDetailTip')}</div>
       </div>
     </div>
-      )}
+  //     )}
 
-    </div>
+  //   </div>
   )
 }
 export default React.memo(ConfigViewPanel)

web/app/components/explore/universal-chat/config-view/summary/index.tsx

@@ -2,12 +2,16 @@
 import type { FC } from 'react'
 import React from 'react'
 import cn from 'classnames'
+import { useBoolean, useClickAway } from 'ahooks'
 import s from './style.module.css'
 import ModelIcon from '@/app/components/app/configuration/config-model/model-icon'
 import { Google, WebReader, Wikipedia } from '@/app/components/base/icons/src/public/plugins'
+import ConfigDetail from '@/app/components/explore/universal-chat/config-view/detail'
+
 export type ISummaryProps = {
   modelId: string
-  pluginIds: string[]
+  plugins: Record<string, boolean>
+  dataSets: any[]
 }
 
 const getColorInfo = (modelId: string) => {
@@ -36,10 +40,19 @@ const getPlugIcon = (pluginId: string) => {
 
 const Summary: FC<ISummaryProps> = ({
   modelId,
-  pluginIds,
+  plugins,
+  dataSets,
 }) => {
+  const pluginIds = Object.keys(plugins).filter(key => plugins[key])
+  const [isShowConfig, { setFalse: hideConfig, toggle: toggleShowConfig }] = useBoolean(false)
+  const configContentRef = React.useRef(null)
+
+  useClickAway(() => {
+    hideConfig()
+  }, configContentRef)
   return (
-    <div className={cn(getColorInfo(modelId), 'flex items-center px-1 h-8 rounded-lg border')}>
+    <div ref={configContentRef} className='relative'>
+      <div onClick={toggleShowConfig} className={cn(getColorInfo(modelId), 'flex items-center px-1 h-8 rounded-lg border cursor-pointer')}>
         <ModelIcon modelId={modelId} className='!w-6 !h-6' />
         <div className='ml-2 text-[13px] font-medium text-gray-900'>{modelId}</div>
         {
@@ -59,6 +72,13 @@ const Summary: FC<ISummaryProps> = ({
           )
         }
       </div>
+      {isShowConfig && (
+        <ConfigDetail
+          modelId={modelId} plugins={plugins} dataSets={dataSets}
+        />
+      )}
+    </div>
+
   )
 }
 export default React.memo(Summary)

web/app/components/explore/universal-chat/index.tsx

@@ -37,7 +37,6 @@ import { userInputsFormToPromptVariables } from '@/utils/model-config'
 import Confirm from '@/app/components/base/confirm'
 import type { DataSet } from '@/models/datasets'
 import ConfigSummary from '@/app/components/explore/universal-chat/config-view/summary'
-import ConfigDetail from '@/app/components/explore/universal-chat/config-view/detail'
 import { fetchDatasets } from '@/service/datasets'
 const APP_ID = 'universal-chat'
 const DEFAULT_MODEL_ID = 'gpt-3.5-turbo' // gpt-4, claude-2
@@ -633,9 +632,13 @@ const Main: FC<IMainProps> = () => {
               <div className='absolute z-10 top-0 left-0 right-0 flex items-center justify-between border-b border-gray-100 mobile:h-12 tablet:h-16 px-8 bg-white'>
                 <div className='text-gray-900'>{conversationName}</div>
                 <div className='flex items-center shrink-0 ml-2 space-x-2'>
-                  <ConfigSummary modelId={modelId} pluginIds={Object.keys(plugins).filter(key => plugins[key])}
+                  <div>
+                    <ConfigSummary
+                      modelId={modelId}
+                      plugins={plugins}
+                      dataSets={dataSets}
                     />
-                  <ConfigDetail modelId={modelId} plugins={plugins} dataSets={dataSets}/>
+                  </div>
                 </div>
               </div>
             )}