fix: change trigger detail

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

@@ -25,23 +25,23 @@ 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 className={cn('absolute top-9 right-0 z-20 p-4 bg-white rounded-2xl shadow-md', s.panelBorder)}>
-          <div className='w-[368px]'>
-            <Config
-              readonly
-              modelId={modelId}
-              plugins={plugins}
-              dataSets={dataSets}
-            />
-            <div className='mt-3 text-xs leading-[18px] text-500 font-normal'>{t('explore.universalChat.viewConfigDetailTip')}</div>
-          </div>
-        </div>
-      )}
-
+    // <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
+          readonly
+          modelId={modelId}
+          plugins={plugins}
+          dataSets={dataSets}
+        />
+        <div className='mt-3 text-xs leading-[18px] text-500 font-normal'>{t('explore.universalChat.viewConfigDetailTip')}</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,29 +40,45 @@ 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')}>
-      <ModelIcon modelId={modelId} className='!w-6 !h-6' />
-      <div className='ml-2 text-[13px] font-medium text-gray-900'>{modelId}</div>
-      {
-        pluginIds.length > 0 && (
-          <div className='ml-1.5 flex items-center'>
-            <div className='mr-1 h-3 w-[1px] bg-[#000] opacity-[0.05]'></div>
-            <div className='flex space-x-1'>
-              {pluginIds.map(pluginId => (
-                <div
-                  key={pluginId}
-                  className={`flex items-center justify-center w-6 h-6 rounded-md ${s.border} bg-white`}
-                >
-                  {getPlugIcon(pluginId)}</div>
-              ))}
+    <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>
+        {
+          pluginIds.length > 0 && (
+            <div className='ml-1.5 flex items-center'>
+              <div className='mr-1 h-3 w-[1px] bg-[#000] opacity-[0.05]'></div>
+              <div className='flex space-x-1'>
+                {pluginIds.map(pluginId => (
+                  <div
+                    key={pluginId}
+                    className={`flex items-center justify-center w-6 h-6 rounded-md ${s.border} bg-white`}
+                  >
+                    {getPlugIcon(pluginId)}</div>
+                ))}
+              </div>
             </div>
-          </div>
-        )
-      }
+          )
+        }
+      </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])}
-                  />
-                  <ConfigDetail modelId={modelId} plugins={plugins} dataSets={dataSets}/>
+                  <div>
+                    <ConfigSummary
+                      modelId={modelId}
+                      plugins={plugins}
+                      dataSets={dataSets}
+                    />
+                  </div>
                 </div>
               </div>
             )}