feat: item operation support ops

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

@@ -3,7 +3,6 @@ import type { FC } from 'react'
 import React from 'react'
 import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
-import { useBoolean, useClickAway } from 'ahooks'
 import s from './style.module.css'
 import Config from '@/app/components/explore/universal-chat/config'
 
@@ -18,16 +17,7 @@ const ConfigViewPanel: FC<Props> = ({
   dataSets,
 }) => {
   const { t } = useTranslation()
-  const [isShowConfig, { setFalse: hideConfig, toggle: toggleShowConfig }] = useBoolean(false)
-  const configContentRef = React.useRef(null)
-
-  useClickAway(() => {
-    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
@@ -39,9 +29,6 @@ const ConfigViewPanel: FC<Props> = ({
         <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/index.tsx

@@ -38,6 +38,8 @@ 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 { fetchDatasets } from '@/service/datasets'
+import ItemOperation from '@/app/components/explore/item-operation'
+
 const APP_ID = 'universal-chat'
 const DEFAULT_MODEL_ID = 'gpt-3.5-turbo' // gpt-4, claude-2
 const DEFAULT_PLUGIN = {
@@ -130,12 +132,14 @@ const Main: FC<IMainProps> = () => {
   }
   const handlePin = async (id: string) => {
     await pinConversation(id)
+    setControlItemOpHide(Date.now())
     notify({ type: 'success', message: t('common.api.success') })
     noticeUpdateList()
   }
 
   const handleUnpin = async (id: string) => {
     await unpinConversation(id)
+    setControlItemOpHide(Date.now())
     notify({ type: 'success', message: t('common.api.success') })
     noticeUpdateList()
   }
@@ -149,6 +153,7 @@ const Main: FC<IMainProps> = () => {
 
   const didDelete = async () => {
     await delConversation(toDeleteConversationId)
+    setControlItemOpHide(Date.now())
     notify({ type: 'success', message: t('common.api.success') })
     hideConfirm()
     if (currConversationId === toDeleteConversationId)
@@ -592,7 +597,8 @@ const Main: FC<IMainProps> = () => {
     setPlugins(DEFAULT_PLUGIN)
     setDateSets([])
   }
-
+  const isCurrConversationPinned = !!pinnedConversationList.find(item => item.id === currConversationId)
+  const [controlItemOpHide, setControlItemOpHide] = useState(0)
   if (appUnavailable)
     return <AppUnavailable isUnknwonReason={isUnknwonReason} />
 
@@ -632,11 +638,19 @@ 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'>
-                  <div>
-                    <ConfigSummary
-                      modelId={modelId}
-                      plugins={plugins}
-                      dataSets={dataSets}
+                  <ConfigSummary
+                    modelId={modelId}
+                    plugins={plugins}
+                    dataSets={dataSets}
+                  />
+                  <div className={cn('flex w-8 h-8 justify-center items-center shrink-0 rounded-lg border border-gray-200')} onClick={e => e.stopPropagation()}>
+                    <ItemOperation
+                      key={controlItemOpHide}
+                      className='!w-8 !h-8'
+                      isPinned={isCurrConversationPinned}
+                      togglePin={() => isCurrConversationPinned ? handleUnpin(currConversationId) : handlePin(currConversationId)}
+                      isShowDelete
+                      onDelete={() => handleDelete(currConversationId)}
                     />
                   </div>
                 </div>