Merge pull request #115 from lobehub/fix/common-error

Fix/common error

src/app/settings/Settings/touch/ActionList/List/FemaleList.tsx

@@ -1,3 +1,4 @@
+import { Empty } from 'antd';
 import { isEqual } from 'lodash-es';
 import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -16,19 +17,19 @@ interface AreaListProps {
 
 const AreaList = memo((props: AreaListProps) => {
   const { currentTouchArea } = props;
-  const female = useSettingStore(
+  const items = useSettingStore(
     (s) => configSelectors.getTouchActionsByGenderAndArea(s, GenderEnum.FEMALE, currentTouchArea),
     isEqual,
   );
-  const { t } = useTranslation('features');
+  const { t } = useTranslation(['features', 'panel']);
 
   return (
     <>
       <Header
         title={t('agent.female')}
         extra={<AddOrEdit isEdit={false} touchArea={currentTouchArea} gender={GenderEnum.FEMALE} />}
       />
-      {female.map((item, index) => {
+      {items.map((item, index) => {
         return (
           <ListItem
             item={item}
@@ -39,6 +40,12 @@ const AreaList = memo((props: AreaListProps) => {
           />
         );
       })}
+      {items.length === 0 && (
+        <Empty
+          description={t('touch.noTouchActions', { ns: 'panel' })}
+          image={Empty.PRESENTED_IMAGE_SIMPLE}
+        />
+      )}
     </>
   );
 });

src/app/settings/Settings/touch/ActionList/List/MaleList.tsx

@@ -1,3 +1,4 @@
+import { Empty } from 'antd';
 import { isEqual } from 'lodash-es';
 import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -16,19 +17,19 @@ interface AreaListProps {
 
 const AreaList = memo((props: AreaListProps) => {
   const { currentTouchArea } = props;
-  const touchList = useSettingStore(
+  const items = useSettingStore(
     (s) => configSelectors.getTouchActionsByGenderAndArea(s, GenderEnum.MALE, currentTouchArea),
     isEqual,
   );
-  const { t } = useTranslation('features');
+  const { t } = useTranslation(['features', 'panel']);
 
   return (
     <>
       <Header
         title={t('agent.male')}
         extra={<AddOrEdit isEdit={false} touchArea={currentTouchArea} gender={GenderEnum.MALE} />}
       />
-      {touchList.map((item, index) => {
+      {items.map((item, index) => {
         return (
           <ListItem
             item={item}
@@ -39,6 +40,12 @@ const AreaList = memo((props: AreaListProps) => {
           />
         );
       })}
+      {items.length === 0 && (
+        <Empty
+          description={t('touch.noTouchActions', { ns: 'panel' })}
+          image={Empty.PRESENTED_IMAGE_SIMPLE}
+        />
+      )}
     </>
   );
 });

src/app/settings/Settings/touch/ActionList/List/OtherList.tsx

@@ -1,3 +1,4 @@
+import { Empty } from 'antd';
 import { isEqual } from 'lodash-es';
 import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -16,19 +17,19 @@ interface AreaListProps {
 
 const AreaList = memo((props: AreaListProps) => {
   const { currentTouchArea } = props;
-  const touchList = useSettingStore(
+  const items = useSettingStore(
     (s) => configSelectors.getTouchActionsByGenderAndArea(s, GenderEnum.OTHER, currentTouchArea),
     isEqual,
   );
-  const { t } = useTranslation('features');
+  const { t } = useTranslation(['features', 'panel']);
 
   return (
     <>
       <Header
         title={t('agent.other')}
         extra={<AddOrEdit isEdit={false} touchArea={currentTouchArea} gender={GenderEnum.OTHER} />}
       />
-      {touchList.map((item, index) => {
+      {items.map((item, index) => {
         return (
           <ListItem
             item={item}
@@ -39,6 +40,12 @@ const AreaList = memo((props: AreaListProps) => {
           />
         );
       })}
+      {items.length === 0 && (
+        <Empty
+          description={t('touch.noTouchActions', { ns: 'panel' })}
+          image={Empty.PRESENTED_IMAGE_SIMPLE}
+        />
+      )}
     </>
   );
 });

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/Actions/SubmitAgentButton/SubmitAgentModal.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Alert, Icon, Modal, type ModalProps } from '@lobehub/ui';
-import { Button, Divider, Input, Popover, Progress, Space, Typography } from 'antd';
+import { Button, Divider, Input, Popover, Progress, Space, Typography, message } from 'antd';
 import { useTheme } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { kebabCase } from 'lodash-es';
@@ -26,7 +26,7 @@ const SubmitAgentModal = memo<ModalProps>(({ open, onCancel }) => {
     isEqual,
   );
   const meta = currentAgent?.meta;
-  const { t } = useTranslation('features');
+  const { t } = useTranslation(['features', 'error']);
 
   const { uploading, uploadAgentData, percent } = useUploadAgent();
 
@@ -45,6 +45,10 @@ const SubmitAgentModal = memo<ModalProps>(({ open, onCancel }) => {
     }
 
     const { avatarUrl, coverUrl, modelUrl } = await uploadAgentData(agentId, meta);
+    if (!avatarUrl || !coverUrl || !modelUrl) {
+      message.error(t('fileUploadError', { ns: 'error' }));
+      return;
+    }
 
     const body = [
       '### agentId',

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,44 @@
+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"
+      overlayStyle={{ width: 416 }}
+      okText={t('confirm')}
+      okButtonProps={{ loading: loading, danger: true }}
+      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 (