feat: support delete

web/app/components/base/confirm-ui/index.tsx

@@ -24,7 +24,7 @@ const ConfirmUI: FC<IConfirmUIProps> = ({
 }) => {
   const { t } = useTranslation()
   return (
-    <div className="w-[420px] rounded-lg p-7 bg-white">
+    <div className="w-[420px] max-w-full rounded-lg p-7 bg-white">
       <div className='flex items-center'>
         {type === 'info' && (<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M17.3333 21.3333H16V16H14.6667M16 10.6667H16.0133M28 16C28 17.5759 27.6896 19.1363 27.0866 20.5922C26.4835 22.0481 25.5996 23.371 24.4853 24.4853C23.371 25.5996 22.0481 26.4835 20.5922 27.0866C19.1363 27.6896 17.5759 28 16 28C14.4241 28 12.8637 27.6896 11.4078 27.0866C9.95189 26.4835 8.62902 25.5996 7.51472 24.4853C6.40042 23.371 5.5165 22.0481 4.91345 20.5922C4.31039 19.1363 4 17.5759 4 16C4 12.8174 5.26428 9.76516 7.51472 7.51472C9.76516 5.26428 12.8174 4 16 4C19.1826 4 22.2348 5.26428 24.4853 7.51472C26.7357 9.76516 28 12.8174 28 16Z" stroke="#9CA3AF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />

web/app/components/explore/item-operation/index.tsx

@@ -9,7 +9,7 @@ import s from './style.module.css'
 import Popover from '@/app/components/base/popover'
 
 const PinIcon = (
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg className="shrink-0" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M8.00012 9.99967L8.00012 14.6663M5.33346 4.87176V6.29217C5.33346 6.43085 5.33346 6.50019 5.31985 6.56652C5.30777 6.62536 5.2878 6.6823 5.26047 6.73579C5.22966 6.79608 5.18635 6.85023 5.09972 6.95852L4.0532 8.26667C3.60937 8.82145 3.38746 9.09884 3.38721 9.33229C3.38699 9.53532 3.4793 9.72738 3.63797 9.85404C3.82042 9.99967 4.17566 9.99967 4.88612 9.99967H11.1141C11.8246 9.99967 12.1798 9.99967 12.3623 9.85404C12.5209 9.72738 12.6133 9.53532 12.613 9.33229C12.6128 9.09884 12.3909 8.82145 11.947 8.26667L10.9005 6.95852C10.8139 6.85023 10.7706 6.79608 10.7398 6.73579C10.7125 6.6823 10.6925 6.62536 10.6804 6.56652C10.6668 6.50019 10.6668 6.43085 10.6668 6.29217V4.87176C10.6668 4.79501 10.6668 4.75664 10.6711 4.71879C10.675 4.68517 10.6814 4.6519 10.6903 4.61925C10.7003 4.5825 10.7146 4.54687 10.7431 4.47561L11.415 2.79582C11.611 2.30577 11.709 2.06074 11.6682 1.86404C11.6324 1.69203 11.5302 1.54108 11.3838 1.44401C11.2163 1.33301 10.9524 1.33301 10.4246 1.33301H5.57563C5.04782 1.33301 4.78391 1.33301 4.61646 1.44401C4.47003 1.54108 4.36783 1.69203 4.33209 1.86404C4.29122 2.06074 4.38923 2.30577 4.58525 2.79583L5.25717 4.47561C5.28567 4.54687 5.29992 4.5825 5.30995 4.61925C5.31886 4.6519 5.32526 4.68517 5.32912 4.71879C5.33346 4.75664 5.33346 4.79501 5.33346 4.87176Z" stroke="#667085" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
   </svg>
 )
@@ -43,7 +43,7 @@ const ItemOperation: FC<IItemOperationProps> = ({
           </div>
           {isShowDelete && (
             <div className={cn(s.actionItem, s.deleteActionItem, 'hover:bg-gray-50 group')} onClick={onDelete} >
-              <TrashIcon className={'w-4 h-4 stroke-current text-gray-500 stroke-2 group-hover:text-red-500'} />
+              <TrashIcon className={'shrink-0 w-4 h-4 stroke-current text-gray-500 stroke-2 group-hover:text-red-500'} />
               <span className={cn(s.actionName, 'group-hover:text-red-500')}>{t('explore.sidebar.action.delete')}</span>
             </div>
           )}

web/app/components/share/chat/index.tsx

@@ -14,7 +14,7 @@ import { ToastContext } from '@/app/components/base/toast'
 import Sidebar from '@/app/components/share/chat/sidebar'
 import ConfigSence from '@/app/components/share/chat/config-scence'
 import Header from '@/app/components/share/header'
-import { fetchAppInfo, fetchAppParams, fetchChatList, fetchConversations, fetchSuggestedQuestions, pinConversation, sendChatMessage, stopChatMessageResponding, unpinConversation, updateFeedback } from '@/service/share'
+import { delConversation, fetchAppInfo, fetchAppParams, fetchChatList, fetchConversations, fetchSuggestedQuestions, pinConversation, sendChatMessage, stopChatMessageResponding, unpinConversation, updateFeedback } from '@/service/share'
 import type { ConversationItem, SiteInfo } from '@/models/share'
 import type { PromptConfig, SuggestedQuestionsAfterAnswerConfig } from '@/models/debug'
 import type { Feedbacktype, IChatItem } from '@/app/components/app/chat'
@@ -25,6 +25,7 @@ import Loading from '@/app/components/base/loading'
 import { replaceStringWithValues } from '@/app/components/app/configuration/prompt-value-panel'
 import { userInputsFormToPromptVariables } from '@/utils/model-config'
 import type { InstalledApp } from '@/models/explore'
+import Confirm from '@/app/components/base/confirm'
 
 export type IMainProps = {
   isInstalledApp?: boolean
@@ -113,6 +114,20 @@ const Main: FC<IMainProps> = ({
     notify({ type: 'success', message: t('common.api.success') })
     noticeUpdateList()
   }
+  const [isShowConfirm, { setTrue: showConfirm, setFalse: hideConfirm }] = useBoolean(false)
+  const [toDeleteConversationId, setToDeleteConversationId] = useState('')
+  const handleDelete = (id: string) => {
+    setToDeleteConversationId(id)
+    hideSidebar() // mobile
+    showConfirm()
+  }
+
+  const didDelete = async () => {
+    await delConversation(isInstalledApp, installedAppInfo?.id, toDeleteConversationId)
+    notify({ type: 'success', message: t('common.api.success') })
+    hideConfirm()
+    noticeUpdateList()
+  }
 
   const [suggestedQuestionsAfterAnswerConfig, setSuggestedQuestionsAfterAnswerConfig] = useState<SuggestedQuestionsAfterAnswerConfig | null>(null)
 
@@ -495,6 +510,7 @@ const Main: FC<IMainProps> = ({
         onPin={handlePin}
         onUnpin={handleUnpin}
         controlUpdateList={controlUpdateConversationList}
+        onDelete={handleDelete}
       />
     )
   }
@@ -584,6 +600,17 @@ const Main: FC<IMainProps> = ({
                 </div>
               </div>)
           }
+
+          {isShowConfirm && (
+            <Confirm
+              title={t('share.chat.deleteConversation.title')}
+              content={t('share.chat.deleteConversation.content')}
+              isShow={isShowConfirm}
+              onClose={hideConfirm}
+              onConfirm={didDelete}
+              onCancel={hideConfirm}
+            />
+          )}
         </div>
       </div>
     </div>

web/app/components/share/chat/sidebar/index.tsx

@@ -28,6 +28,7 @@ export type ISidebarProps = {
   onPin: (id: string) => void
   onUnpin: (id: string) => void
   controlUpdateList: number
+  onDelete: (id: string) => void
 }
 
 const Sidebar: FC<ISidebarProps> = ({
@@ -46,6 +47,7 @@ const Sidebar: FC<ISidebarProps> = ({
   onPin,
   onUnpin,
   controlUpdateList,
+  onDelete,
 }) => {
   const { t } = useTranslation()
   const [hasPinned, setHasPinned] = useState(false)
@@ -107,6 +109,7 @@ const Sidebar: FC<ISidebarProps> = ({
               isPinned={true}
               onPinChanged={id => onUnpin(id)}
               controlUpdate={controlUpdateList + 1}
+              onDelete={onDelete}
             />
           </div>
         )}
@@ -127,6 +130,7 @@ const Sidebar: FC<ISidebarProps> = ({
             isPinned={false}
             onPinChanged={id => onPin(id)}
             controlUpdate={controlUpdateList + 1}
+            onDelete={onDelete}
           />
         </div>
       </div>

web/app/components/share/chat/sidebar/list/index.tsx

@@ -24,6 +24,7 @@ export type IListProps = {
   isPinned: boolean
   onPinChanged: (id: string) => void
   controlUpdate: number
+  onDelete: (id: string) => void
 }
 
 const List: FC<IListProps> = ({
@@ -38,6 +39,7 @@ const List: FC<IListProps> = ({
   isPinned,
   onPinChanged,
   controlUpdate,
+  onDelete,
 }) => {
   const listRef = useRef<HTMLDivElement>(null)
 
@@ -97,8 +99,8 @@ const List: FC<IListProps> = ({
                   <ItemOperation
                     isPinned={isPinned}
                     togglePin={() => onPinChanged(item.id)}
-                    isShowDelete={false}
-                    onDelete={() => {}}
+                    isShowDelete
+                    onDelete={() => onDelete(item.id)}
                   />
                 </div>
               )

web/i18n/lang/share-app.en.ts

@@ -23,6 +23,10 @@ const translation = {
       'privacy policy',
     privacyPolicyRight:
       ' provided by the app developer.',
+    deleteConversation: {
+      title: 'Delete conversation',
+      content: 'Are you sure you want to delete this conversation?',
+    },
   },
   generation: {
     tabs: {

web/i18n/lang/share-app.zh.ts

@@ -19,6 +19,10 @@ const translation = {
     privacyPolicyLeft: '请阅读由该应用开发者提供的',
     privacyPolicyMiddle: '隐私政策',
     privacyPolicyRight: '。',
+    deleteConversation: {
+      title: '删除对话',
+      content: '您确定要删除此对话吗？',
+    },
   },
   generation: {
     tabs: {

web/service/share.ts

@@ -69,6 +69,10 @@ export const unpinConversation = async (isInstalledApp: boolean, installedAppId
   return getAction('patch', isInstalledApp)(getUrl(`conversations/${id}/unpin`, isInstalledApp, installedAppId))
 }
 
+export const delConversation = async (isInstalledApp: boolean, installedAppId = '', id: string) => {
+  return getAction('del', isInstalledApp)(getUrl(`conversations/${id}`, isInstalledApp, installedAppId))
+}
+
 export const fetchChatList = async (conversationId: string, isInstalledApp: boolean, installedAppId = '') => {
   return getAction('get', isInstalledApp)(getUrl('messages', isInstalledApp, installedAppId), { params: { conversation_id: conversationId, limit: 20, last_id: '' } })
 }