🐛 fix: 修复订阅下载和删除角色时的体验

src/features/Actions/Agent.tsx

@@ -50,7 +50,6 @@ const ThemeButton = memo(() => {
       overlayInnerStyle={{
         padding: 0,
       }}
-      trigger={['click']}
     >
       <ActionIcon icon={PlusCircle} title={t('agent.create')} />
     </Popover>

src/features/MarketInfo/actions/ChatButton.tsx

@@ -0,0 +1,35 @@
+import { Button } from 'antd';
+import { useRouter } from 'next/navigation';
+import React, { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useGlobalStore } from '@/store/global';
+import { useSessionStore } from '@/store/session';
+import { Agent } from '@/types/agent';
+
+interface ChatButtonProps {
+  agent: Agent;
+}
+
+const ChatButton = memo<ChatButtonProps>(({ agent }) => {
+  const router = useRouter();
+  const { t } = useTranslation('chat');
+  const createSession = useSessionStore((s) => s.createSession);
+
+  const [closePanel] = useGlobalStore((s) => [s.closePanel]);
+  return (
+    <Button
+      key="chat"
+      onClick={() => {
+        createSession(agent);
+        router.push('/chat');
+        closePanel('market');
+      }}
+      type={'primary'}
+    >
+      {t('chat')}
+    </Button>
+  );
+});
+
+export default ChatButton;

src/features/MarketInfo/SubscribeButton.tsx → src/features/MarketInfo/actions/Subscribe.tsx

@@ -1,4 +1,4 @@
-import { Button, Popover, Progress, Space, message } from 'antd';
+import { Button, Popover, Progress, Space } from 'antd';
 import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -11,16 +11,11 @@ interface SubscribeButtonProps {
   agent: Agent;
 }
 
-const SubscribeButton = memo((props: SubscribeButtonProps) => {
-  const [removeLocalAgent, subscribed] = useAgentStore((s) => [
-    s.removeLocalAgent,
-    agentSelectors.subscribed(s),
-  ]);
-
-  const { fetchAgentData, percent, downloading } = useDownloadAgent();
-
+const Subscribe = memo((props: SubscribeButtonProps) => {
   const { agent } = props;
+  const subscribed = useAgentStore((s) => agentSelectors.subscribed(s));
 
+  const { fetchAgentData, percent, downloading } = useDownloadAgent();
   const isSubscribed = subscribed(agent.agentId);
 
   const { t } = useTranslation('common');
@@ -49,20 +44,14 @@ const SubscribeButton = memo((props: SubscribeButtonProps) => {
         key={'subscribe'}
         disabled={downloading}
         onClick={async () => {
-          if (isSubscribed) {
-            removeLocalAgent(agent.agentId).then(() => {
-              message.success(t('actions.unsubscribeSuccess'));
-            });
-          } else {
-            await fetchAgentData(agent);
-          }
+          await fetchAgentData(agent);
         }}
         type={isSubscribed ? 'default' : 'primary'}
       >
-        {isSubscribed ? t('actions.unsubscribe') : t('actions.downloadSubscribe')}
+        {t('actions.downloadSubscribe')}
       </Button>
     </Popover>
   );
 });
 
-export default SubscribeButton;
+export default Subscribe;

src/features/MarketInfo/actions/UnSubscribe.tsx

@@ -0,0 +1,43 @@
+import { Button, Popconfirm, message } from 'antd';
+import React, { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useAgentStore } from '@/store/agent';
+import { useSessionStore } from '@/store/session';
+import { Agent } from '@/types/agent';
+
+interface UnSubscribeButtonProps {
+  agent: Agent;
+}
+
+const UnSubscribe = memo((props: UnSubscribeButtonProps) => {
+  const { agent } = props;
+  const removeLocalAgent = useAgentStore((s) => s.removeLocalAgent);
+  const removeSessionByAgentId = useSessionStore((s) => s.removeSessionByAgentId);
+  const [loading, setLoading] = useState(false);
+
+  const { t } = useTranslation(['common', 'role']);
+
+  return (
+    <Popconfirm
+      cancelText={t('cancel')}
+      description={t('delRoleDesc', { name: agent?.meta.name, ns: 'role' })}
+      key="delete"
+      okText={t('confirm')}
+      okButtonProps={{ loading: loading }}
+      onConfirm={async () => {
+        if (!agent) return;
+        setLoading(true);
+        await removeLocalAgent(agent.agentId);
+        removeSessionByAgentId(agent.agentId);
+        setLoading(false);
+        message.success(t('actions.unsubscribeSuccess'));
+      }}
+      title={t('actions.unsubscribe') + '?'}
+    >
+      <Button>{t('actions.unsubscribe')}</Button>
+    </Popconfirm>
+  );
+});
+
+export default UnSubscribe;

src/features/MarketInfo/index.tsx

@@ -1,19 +1,17 @@
 import { DraggablePanel } from '@lobehub/ui';
-import { Button } from 'antd';
 import { createStyles } from 'antd-style';
-import { useRouter } from 'next/navigation';
 import React, { memo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
 
 import Author from '@/components/Author';
 import AgentCard from '@/components/agent/AgentCard';
 import SystemRole from '@/components/agent/SystemRole';
 import { SIDEBAR_MAX_WIDTH, SIDEBAR_WIDTH } from '@/constants/token';
-import SubscribeButton from '@/features/MarketInfo/SubscribeButton';
 import { agentSelectors, useAgentStore } from '@/store/agent';
-import { useGlobalStore } from '@/store/global';
 import { marketStoreSelectors, useMarketStore } from '@/store/market';
-import { useSessionStore } from '@/store/session';
+
+import ChatButton from './actions/ChatButton';
+import Subscribe from './actions/Subscribe';
+import UnSubscribe from './actions/UnSubscribe';
 
 const useStyles = createStyles(({ css, token }) => ({
   content: css`
@@ -29,8 +27,6 @@ const useStyles = createStyles(({ css, token }) => ({
 
 const Header = () => {
   const { styles } = useStyles();
-  const router = useRouter();
-  const { t } = useTranslation('chat');
   const [tempId, setTempId] = useState<string>('');
   const [showAgentSidebar, activateAgent, deactivateAgent, currentAgentItem] = useMarketStore(
     (s) => [
@@ -40,34 +36,22 @@ const Header = () => {
       marketStoreSelectors.currentAgentItem(s),
     ],
   );
-  const [closePanel] = useGlobalStore((s) => [s.closePanel]);
   const [subscribed] = useAgentStore((s) => [agentSelectors.subscribed(s)]);
 
-  const createSession = useSessionStore((s) => s.createSession);
-
   const actions = [];
   if (currentAgentItem) {
     const isSubscribed = subscribed(currentAgentItem.agentId);
 
     if (isSubscribed) {
       actions.push(
-        <Button
-          key="chat"
-          onClick={() => {
-            createSession(currentAgentItem);
-            router.push('/chat');
-            closePanel('market');
-          }}
-          type={'primary'}
-        >
-          {t('chat')}
-        </Button>,
+        <ChatButton key="chat" agent={currentAgentItem} />,
+        <UnSubscribe key="unsubscribe" agent={currentAgentItem} />,
+      );
+    } else {
+      actions.push(
+        <Subscribe agent={currentAgentItem} key={`${currentAgentItem.agentId}-subscribe`} />,
       );
     }
-
-    actions.push(
-      <SubscribeButton agent={currentAgentItem} key={`${currentAgentItem.agentId}-subscribe`} />,
-    );
   }
 
   return (

src/features/RoleList/List/Item/Actions.tsx

@@ -19,7 +19,10 @@ export default (props: ActionsProps) => {
   const { t } = useTranslation('common');
   const [removeLocalAgent] = useAgentStore((s) => [s.removeLocalAgent]);
   const currentAgent = useAgentStore((s) => s.getAgentById(id));
-  const createSession = useSessionStore((s) => s.createSession);
+  const [createSession, removeSessionByAgentId] = useSessionStore((s) => [
+    s.createSession,
+    s.removeSessionByAgentId,
+  ]);
 
   const items: MenuProps['items'] = [
     {
@@ -43,8 +46,9 @@ export default (props: ActionsProps) => {
         modal.confirm({
           centered: true,
           okButtonProps: { danger: true },
-          onOk: () => {
-            removeLocalAgent(id);
+          async onOk() {
+            await removeLocalAgent(id);
+            removeSessionByAgentId(id);
           },
           okText: t('actions.del'),
           cancelText: t('cancel'),

src/features/SessionList/List/Item/Actions.tsx

@@ -14,7 +14,7 @@ export default (props: ActionsProps) => {
   const { id, setOpen } = props;
   const { modal } = App.useApp();
   const { t } = useTranslation('common');
-  const [removeSession] = useSessionStore((s) => [s.removeSession]);
+  const [removeSessionByAgentId] = useSessionStore((s) => [s.removeSessionByAgentId]);
 
   const items: MenuProps['items'] = [
     {
@@ -27,8 +27,8 @@ export default (props: ActionsProps) => {
         modal.confirm({
           centered: true,
           okButtonProps: { danger: true },
-          onOk: () => {
-            removeSession(id);
+          async onOk() {
+            removeSessionByAgentId(id);
           },
           okText: t('actions.del'),
           cancelText: t('cancel'),

src/store/session/index.ts

@@ -97,7 +97,7 @@ export interface SessionStore {
   /**
    *  移除会话
    */
-  removeSession: (id: string) => void;
+  removeSessionByAgentId: (id: string) => void;
   /**
    * 发送消息
    * @param message 消息内容
@@ -392,7 +392,7 @@ export const createSessionStore: StateCreator<SessionStore, [['zustand/devtools'
 
     fetchAIResponse(contextMessages, assistantId);
   },
-  removeSession: (id) => {
+  removeSessionByAgentId: (id) => {
     const { sessionList, activeId } = get();
 
     const sessions = produce(sessionList, (draft) => {