💄 style: allow user to add agent without redirection (#1199)

* ✨ feat: allow user to add agent without redirection

* ✅ test: add test in action.ts if isSwitchSession is false

* 🔖 chore: add additional skeleton button for loading

* 🌐 style: add i18n

* 🔖 chore: Refactor agent creation and session handling in Header component

locales/ar/market.json

@@ -1,5 +1,7 @@
 {
   "addAgent": "إضافة وكيل",
+  "addAgentAndConverse": "إضافة وكيل وبدء المحادثة",
+  "addAgentSuccess": "تمت الإضافة بنجاح",
   "guide": {
     "func1": {
       "desc1": "في نافذة الدردشة، انتقل إلى صفحة إعدادات الوكيل التي ترغب في تقديمها من الزاوية اليمنى العلوية.",

locales/de-DE/market.json

@@ -1,5 +1,7 @@
 {
   "addAgent": "Helfer hinzufügen",
+  "addAgentAndConverse": "Assistent hinzufügen und Konversation starten",
+  "addAgentSuccess": "Erfolgreich hinzugefügt",
   "guide": {
     "func1": {
       "desc1": "Gehen Sie im Chatfenster über das Einstellungssymbol oben rechts zur Seite, auf der Sie die Einstellungen für Ihren Helfer einreichen können.",

locales/en-US/market.json

@@ -1,5 +1,7 @@
 {
   "addAgent": "Add Agent",
+  "addAgentAndConverse": "Add Agent and Converse",
+  "addAgentSuccess": "Successfully Added",
   "guide": {
     "func1": {
       "desc1": "Enter the settings page you want to submit to the assistant by clicking on the settings icon in the upper right corner of the chat window.",

locales/es-ES/market.json

@@ -1,5 +1,7 @@
 {
   "addAgent": "Añadir asistente",
+  "addAgentAndConverse": "Agregar agente y conversar",
+  "addAgentSuccess": "Agente agregado con éxito",
   "guide": {
     "func1": {
       "desc1": "En la ventana de chat, accede a la página de configuración del asistente a través del icono de ajustes en la esquina superior derecha.",

locales/fr-FR/market.json

@@ -1,5 +1,7 @@
 {
   "addAgent": "Ajouter un assistant",
+  "addAgentAndConverse": "Ajouter un agent et converser",
+  "addAgentSuccess": "Ajout réussi",
   "guide": {
     "func1": {
       "desc1": "Accédez à la page de configuration de l'assistant que vous souhaitez soumettre en cliquant sur l'icône Paramètres en haut à droite de la fenêtre de conversation.",

locales/it-IT/market.json

@@ -1,5 +1,7 @@
 {
   "addAgent": "Aggiungi assistente",
+  "addAgentAndConverse": "Aggiungi assistente e avvia la conversazione",
+  "addAgentSuccess": "Aggiunta riuscita",
   "guide": {
     "func1": {
       "desc1": "Nella finestra di chat, accedi alle impostazioni nell'angolo in alto a destra per accedere alla pagina di configurazione dell'assistente che desideri inviare;",

locales/ja-JP/market.json

@@ -1,5 +1,7 @@
 {
   "addAgent": "エージェントを追加する",
+  "addAgentAndConverse": "エージェントを追加して会話する",
+  "addAgentSuccess": "追加に成功しました",
   "guide": {
     "func1": {
       "desc1": "セッションウィンドウで右上隅の設定にアクセスして、アシスタントの設定ページに移動します。",

locales/ko-KR/market.json

@@ -1,5 +1,7 @@
 {
   "addAgent": "보조 프로그램 추가",
+  "addAgentAndConverse": "에이전트 추가 및 대화",
+  "addAgentSuccess": "추가 성공",
   "guide": {
     "func1": {
       "desc1": "세션 창에서 오른쪽 상단 설정으로 이동하여 도우미를 제출할 설정 페이지로 이동합니다.",

locales/nl-NL/market.json

@@ -1,5 +1,7 @@
 {
   "addAgent": "Voeg een assistent toe",
+  "addAgentAndConverse": "Voeg een assistent toe en start een gesprek",
+  "addAgentSuccess": "Succesvol toegevoegd",
   "guide": {
     "func1": {
       "desc1": "Ga naar de instellingen in de rechterbovenhoek van het chatvenster om naar de pagina te gaan waar je de assistent kunt toevoegen.",

locales/pl-PL/market.json

@@ -1,5 +1,7 @@
 {
   "addAgent": "Dodaj asystenta",
+  "addAgentAndConverse": "Dodaj asystenta i rozpocznij rozmowę",
+  "addAgentSuccess": "Dodano pomyślnie",
   "guide": {
     "func1": {
       "desc1": "Przejdź do strony ustawień, klikając prawy górny róg okna rozmowy, aby przejść do strony ustawień asystenta, którego chcesz złożyć.",

locales/pt-BR/market.json

@@ -1,5 +1,7 @@
 {
   "addAgent": "Adicionar assistente",
+  "addAgentAndConverse": "Adicionar assistente e conversar",
+  "addAgentSuccess": "Adição bem-sucedida",
   "guide": {
     "func1": {
       "desc1": "Na janela de conversa, acesse a página de configurações que você deseja enviar para o assistente através do ícone no canto superior direito;",

locales/ru-RU/market.json

@@ -1,5 +1,7 @@
 {
   "addAgent": "Добавить агента",
+  "addAgentAndConverse": "Добавить агента и начать разговор",
+  "addAgentSuccess": "Агент успешно добавлен",
   "guide": {
     "func1": {
       "desc1": "Перейдите на страницу настроек, нажав на значок в правом верхнем углу окна сеанса.",

locales/tr-TR/market.json

@@ -1,5 +1,7 @@
 {
   "addAgent": "Asistan Ekle",
+  "addAgentAndConverse": "Asistan Ekle ve Konuşma Başlat",
+  "addAgentSuccess": "Ekleme Başarılı",
   "guide": {
     "func1": {
       "desc1": "Sohbet penceresinin sağ üst köşesindeki ayarlar simgesine tıklayarak asistana göndermek istediğiniz ayarlar sayfasına girin.",

locales/vi-VN/market.json

@@ -1,5 +1,7 @@
 {
   "addAgent": "Thêm trợ lý",
+  "addAgentAndConverse": "Thêm trợ lý và trò chuyện",
+  "addAgentSuccess": "Thêm thành công",
   "guide": {
     "func1": {
       "desc1": "Trong cửa sổ trò chuyện, nhấp vào cài đặt ở góc trên bên phải để vào trang cài đặt trợ lý bạn muốn gửi;",

locales/zh-CN/market.json

@@ -1,5 +1,7 @@
 {
   "addAgent": "添加助手",
+  "addAgentAndConverse": "添加助手并会话",
+  "addAgentSuccess": "添加成功",
   "guide": {
     "func1": {
       "desc1": "在会话窗口中通过右上角设置进入你想提交助手的设置页面;",

locales/zh-TW/market.json

@@ -1,5 +1,7 @@
 {
   "addAgent": "新增助理",
+  "addAgentAndConverse": "新增助理並開始對話",
+  "addAgentSuccess": "新增成功",
   "guide": {
     "func1": {
       "desc1": "在會話視窗中通過右上角設置進入你想提交助手的設置頁面;",

src/app/market/features/AgentDetailContent/AgentInfo/Header.tsx

@@ -1,5 +1,5 @@
 import { Avatar, Tag } from '@lobehub/ui';
-import { Button, Typography } from 'antd';
+import { App, Button, Typography } from 'antd';
 import { startCase } from 'lodash-es';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -20,6 +20,7 @@ const Header = memo(() => {
   const createSession = useSessionStore((s) => s.createSession);
   const switchSideBar = useGlobalStore((s) => s.switchSideBar);
   const agentItem = useMarketStore(agentMarketSelectors.currentAgentItem);
+  const { message } = App.useApp();
 
   const { meta, createAt, author, homepage, config } = agentItem;
   const { avatar, title, description, tags, backgroundColor } = meta;
@@ -58,6 +59,17 @@ const Header = memo(() => {
           switchSideBar(SidebarTabKey.Chat);
         }}
         type={'primary'}
+      >
+        {t('addAgentAndConverse')}
+      </Button>
+      <Button
+        block
+        onClick={() => {
+          if (!agentItem) return;
+
+          createSession({ config, meta }, false);
+          message.success(t('addAgentSuccess'));
+        }}
       >
         {t('addAgent')}
       </Button>

src/app/market/features/AgentDetailContent/AgentInfo/Loading.tsx

@@ -31,6 +31,7 @@ const Loading = memo(() => {
           }}
         />
         <Skeleton.Button active block />
+        <Skeleton.Button active block />
         <Skeleton
           active
           className={styles.loading}

src/locales/default/market.ts

@@ -1,5 +1,7 @@
 export default {
   addAgent: '添加助手',
+  addAgentAndConverse: '添加助手并会话',
+  addAgentSuccess: '添加成功',
   guide: {
     func1: {
       desc1: '在会话窗口中通过右上角设置进入你想提交助手的设置页面;',

src/store/session/slices/session/action.test.ts

@@ -76,6 +76,30 @@ describe('SessionAction', () => {
         SESSION_CHAT_URL(newSessionId, result.current.isMobile),
       );
     });
+
+    it('should create a new session but not switch to it if isSwitchSession is false', async () => {
+      const { result } = renderHook(() => useSessionStore());
+      const newSessionId = 'new-session-id';
+      vi.mocked(sessionService.createNewSession).mockResolvedValue(newSessionId);
+
+      let createdSessionId;
+
+      await act(async () => {
+        createdSessionId = await result.current.createSession(
+          { config: { displayMode: 'docs' } },
+          false,
+        );
+      });
+
+      const call = vi.mocked(sessionService.createNewSession).mock.calls[0];
+      expect(call[0]).toEqual(LobeSessionType.Agent);
+      expect(call[1]).toMatchObject({ config: { displayMode: 'docs' } });
+
+      expect(createdSessionId).toBe(newSessionId);
+      expect(mockRouterPush).not.toHaveBeenCalledWith(
+        SESSION_CHAT_URL(newSessionId, result.current.isMobile),
+      );
+    });
   });
 
   describe('duplicateSession', () => {

src/store/session/slices/session/action.ts

@@ -10,12 +10,7 @@ import { sessionService } from '@/services/session';
 import { useGlobalStore } from '@/store/global';
 import { settingsSelectors } from '@/store/global/selectors';
 import { SessionStore } from '@/store/session';
-import {
-  ChatSessionList,
-  LobeAgentSession,
-  LobeSessionType,
-  LobeSessions,
-} from '@/types/session';
+import { ChatSessionList, LobeAgentSession, LobeSessionType, LobeSessions } from '@/types/session';
 import { merge } from '@/utils/merge';
 import { setNamespace } from '@/utils/storeDebug';
 
@@ -42,7 +37,10 @@ export interface SessionAction {
    * @param agent
    * @returns sessionId
    */
-  createSession: (session?: DeepPartial<LobeAgentSession>) => Promise<string>;
+  createSession: (
+    session?: DeepPartial<LobeAgentSession>,
+    isSwitchSession?: boolean,
+  ) => Promise<string>;
   duplicateSession: (id: string) => Promise<void>;
   /**
    * Pins or unpins a session.
@@ -86,7 +84,7 @@ export const createSessionSlice: StateCreator<
     get().refreshSessions();
   },
 
-  createSession: async (agent) => {
+  createSession: async (agent, isSwitchSession = true) => {
     const { switchSession, refreshSessions } = get();
 
     // 合并 settings 里的 defaultAgent
@@ -100,7 +98,8 @@ export const createSessionSlice: StateCreator<
     const id = await sessionService.createNewSession(LobeSessionType.Agent, newSession);
     await refreshSessions();
 
-    switchSession(id);
+    // 创建后是否跳转到对应会话，默认跳转
+    if (isSwitchSession) switchSession(id);
 
     return id;
   },