@lobehub/chat 0.73.0 → 0.75.0

package/scripts/i18nWorkflow/utils.ts

@@ -0,0 +1,85 @@
+import { consola } from 'consola';
+import { colors } from 'consola/utils';
+import { tocForResources } from 'i18next-resources-for-ts';
+import { readFileSync, writeFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+
+import i18nConfig from '../../.i18nrc';
+import { srcLocalesResources } from './const';
+
+export const readJSON = (filePath: string) => {
+  const data = readFileSync(filePath, 'utf8');
+  return JSON.parse(data);
+};
+
+export const writeJSON = (filePath: string, data: any) => {
+  const jsonStr = JSON.stringify(data, null, 2);
+  writeFileSync(filePath, jsonStr, 'utf8');
+};
+
+export const genResourcesContent = (locales: string[]) => {
+  let index = '';
+  let indexObj = '';
+
+  for (const locale of locales) {
+    index += `import ${locale} from "./${locale}";\n`;
+    indexObj += `   "${locale.replace('_', '-')}": ${locale},\n`;
+  }
+
+  return `${index}
+const resources = {
+${indexObj}} as const;
+export default resources;
+export const defaultResources = ${i18nConfig.entryLocale};
+export type Resources = typeof resources;
+export type DefaultResources = typeof defaultResources;
+export type Namespaces = keyof DefaultResources;
+export type Locales = keyof Resources;
+`;
+};
+
+export const genNamespaceList = (files: string[], locale: string) => {
+  return files.map((file) => ({
+    name: file.replace('.json', ''),
+    path: resolve(i18nConfig.output, locale, file),
+  }));
+};
+
+export const genToc = (files: string[], locale: string) => {
+  const ns = genNamespaceList(files, locale);
+  let toc = tocForResources(ns, srcLocalesResources).replaceAll('\\', '/');
+  if (locale === i18nConfig.entryLocale) {
+    toc = toc.replaceAll('.json', '').replaceAll('../../../locales/zh_CN', '../default');
+  }
+  return toc;
+};
+
+export const diff = (obj1: any, obj2: any, prefix: string = ''): string[] => {
+  let result: string[] = [];
+  for (const key in obj1) {
+    if (!obj2[key]) continue;
+    if (typeof obj1[key] === 'object' && obj1[key] !== null && obj2[key]) {
+      result = result.concat(diff(obj1[key], obj2[key], `${key}.`));
+    } else if (obj1[key] !== obj2[key]) {
+      result.push(`${prefix}${key}`);
+    }
+  }
+  return result;
+};
+
+export const unset = (obj: any, key: string) => {
+  const keys = key.split('.');
+  const lastKey = keys.pop();
+  const lastObj = keys.reduce((obj, key) => (obj[key] = obj[key] || {}), obj);
+  if (lastKey) delete lastObj[lastKey];
+};
+
+export const tagBlue = (text: string) => colors.bgBlueBright(colors.black(` ${text} `));
+export const tagYellow = (text: string) => colors.bgYellowBright(colors.black(` ${text} `));
+export const tagGreen = (text: string) => colors.bgGreenBright(colors.black(` ${text} `));
+export const tagWhite = (text: string) => colors.bgWhiteBright(colors.black(` ${text} `));
+
+export const split = (name: string) => {
+  consola.log('');
+  consola.log(colors.gray(`========================== ${name} ==============================`));
+};

package/src/const/layoutTokens.ts

@@ -5,8 +5,10 @@ export const MOBILE_NABBAR_HEIGHT = 44;
 export const MOBILE_TABBAR_HEIGHT = 48;
 export const CHAT_TEXTAREA_HEIGHT = 200;
 export const CHAT_SIDEBAR_WIDTH = 280;
+export const MARKET_SIDEBAR_WIDTH = 400;
 export const FOLDER_WIDTH = 256;
+export const MAX_WIDTH = 1024;
 export const FORM_STYLE: FormProps = {
   itemMinWidth: 'max(30%,240px)',
-  style: { maxWidth: 1024, width: '100%' },
+  style: { maxWidth: MAX_WIDTH, width: '100%' },
 };

package/src/const/market.ts

@@ -0,0 +1,15 @@
+import { DEFAULT_AGENT_CONFIG } from '@/const/settings';
+import { AgentsMarketItem } from '@/types/market';
+
+import { DEFAULT_AGENT_META } from './meta';
+
+export const DEFAULT_AGENTS_MARKET_ITEM: AgentsMarketItem = {
+  author: '',
+  config: DEFAULT_AGENT_CONFIG,
+  createAt: Date.now().toString(),
+  homepage: '',
+  identifier: '',
+  manifest: '',
+  meta: DEFAULT_AGENT_META,
+  schemaVersion: 1,
+};

package/src/const/url.ts

@@ -1,3 +1,5 @@
+import urlJoin from 'url-join';
+
 import { localeOptions } from '@/locales/options';
 import { Locales } from '@/locales/resources';
 
@@ -11,15 +13,38 @@ export const FEEDBACK = pkg.bugs.url;
 export const DISCORD = 'https://discord.gg/AYFPHvv2jT';
 
 export const PLUGINS_INDEX_URL =
-  process.env.PLUGINS_INDEX_URL ?? 'https://chat-plugins.lobehub.com/index';
+  process.env.PLUGINS_INDEX_URL ?? 'https://chat-plugins.lobehub.com';
+
+export const DEFAULT_LANG = 'en-US';
 
-export const getPluginIndexJSON = (lang: Locales = 'en-US', baseUrl = PLUGINS_INDEX_URL) => {
-  if (lang === 'en-US' || !localeOptions.map((o) => o.value).includes(lang)) return baseUrl;
+export const checkLang = (lang: Locales) => {
+  return lang === DEFAULT_LANG || !localeOptions.map((o) => o.value).includes(lang);
+};
+export const getPluginIndexJSON = (lang: Locales = DEFAULT_LANG, baseUrl = PLUGINS_INDEX_URL) => {
+  if (checkLang(lang)) return baseUrl;
 
-  return `${baseUrl}.${lang}.json`;
+  return urlJoin(baseUrl, `index.${lang}.json`);
 };
 
 export const AGENTS_INDEX_URL = process.env.AGENTS_INDEX_URL ?? 'https://chat-agents.lobehub.com';
 
+export const getAgentIndexJSON = (lang: Locales = DEFAULT_LANG, baseUrl = AGENTS_INDEX_URL) => {
+  if (checkLang(lang)) return baseUrl;
+
+  return urlJoin(baseUrl, `index.${lang}.json`);
+};
+
+export const getAgentJSON = (
+  identifier: string,
+  lang: Locales = DEFAULT_LANG,
+  baseUrl = AGENTS_INDEX_URL,
+) => {
+  if (checkLang(lang)) return urlJoin(baseUrl, `${identifier}.json`);
+
+  return urlJoin(baseUrl, `${identifier}.${lang}.json`);
+};
+
+export const AGENTS_INDEX_GITHUB = 'https://github.com/lobehub/lobe-chat-agents';
+
 export const SESSION_CHAT_URL = (id: string = INBOX_SESSION_ID, mobile?: boolean) =>
   mobile ? `/chat/mobile#session=${id}` : `/chat#session=${id}`;

package/src/features/AgentSetting/AgentConfig/index.tsx

@@ -1,4 +1,4 @@
-import { Form, ItemGroup, SliderWithInput } from '@lobehub/ui';
+import { Form, ItemGroup, SelectWithImg, SliderWithInput } from '@lobehub/ui';
 import { ConfigProvider, Input, Select, Switch } from 'antd';
 import { useTheme, useThemeMode } from 'antd-style';
 import isEqual from 'fast-deep-equal';
@@ -7,7 +7,6 @@ import { BrainCog, LayoutList, MessageSquare, MessagesSquare } from 'lucide-reac
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import SelectWithImg from '@/components/SelectWithImg';
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { LanguageModel } from '@/types/llm';
 import { LobeAgentConfigKeys } from '@/types/session';

package/src/features/AgentSetting/AgentPlugin/MarketSettingModal.tsx

@@ -62,7 +62,7 @@ const MarketSettingModal = memo<MarketSettingModalProps>(({ open, onOpenChange }
                 <Input
                   defaultValue={PLUGINS_INDEX_URL}
                   disabled
-                  placeholder={'https://xxxxx.com/index.json'}
+                  placeholder={'https://xxxxx.com'}
                 />
               </Tooltip>
             </Form.Item>

package/src/features/AgentSetting/store/initialState.ts

@@ -19,7 +19,7 @@ export const initialState: State = {
     avatar: false,
     backgroundColor: false,
     description: false,
-    tag: false,
+    tags: false,
     title: false,
   },
 

package/src/features/MobileTabBar/index.tsx

@@ -1,6 +1,6 @@
 import { Icon, MobileTabBar, type MobileTabBarProps } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { MessageSquare, Sticker } from 'lucide-react';
+import { Bot, MessageSquare } from 'lucide-react';
 import Router from 'next/router';
 import { rgba } from 'polished';
 import { memo, useMemo } from 'react';
@@ -33,7 +33,7 @@ export default memo<{ className?: string }>(({ className }) => {
         title: t('tab.chat'),
       },
       {
-        icon: (active) => <Icon className={active ? styles.active : undefined} icon={Sticker} />,
+        icon: (active) => <Icon className={active ? styles.active : undefined} icon={Bot} />,
         key: 'market',
         onClick: () => {
           Router.push({ hash: '', pathname: `/market` });

package/src/features/SideBar/TopActions.tsx

@@ -1,5 +1,5 @@
 import { ActionIcon } from '@lobehub/ui';
-import { MessageSquare, Sticker } from 'lucide-react';
+import { Bot, MessageSquare } from 'lucide-react';
 import Router from 'next/router';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -32,7 +32,7 @@ const TopActions = memo<TopActionProps>(({ tab, setTab }) => {
       />
       <ActionIcon
         active={tab === 'market'}
-        icon={Sticker}
+        icon={Bot}
         onClick={() => {
           if (Router.asPath.startsWith('/market')) return;
           Router.push('/market');

package/src/locales/default/market.ts

@@ -0,0 +1,12 @@
+export default {
+  addAgent: '添加助手',
+  search: {
+    placeholder: '搜索助手名称介绍或关键词...',
+  },
+  sidebar: {
+    comment: '讨论区',
+    prompt: '提示词',
+    title: '助手详情',
+  },
+  submitAgent: '提交助手',
+};

package/src/locales/resources/en_US.ts

@@ -1,6 +1,7 @@
 import common from '../../../locales/en_US/common.json';
 import empty from '../../../locales/en_US/empty.json';
 import error from '../../../locales/en_US/error.json';
+import market from '../../../locales/en_US/market.json';
 import plugin from '../../../locales/en_US/plugin.json';
 import setting from '../../../locales/en_US/setting.json';
 import welcome from '../../../locales/en_US/welcome.json';
@@ -9,6 +10,7 @@ const resources = {
   common,
   empty,
   error,
+  market,
   plugin,
   setting,
   welcome,

package/src/locales/resources/ru_RU.ts

@@ -1,6 +1,7 @@
 import common from '../../../locales/ru_RU/common.json';
 import empty from '../../../locales/ru_RU/empty.json';
 import error from '../../../locales/ru_RU/error.json';
+import market from '../../../locales/ru_RU/market.json';
 import plugin from '../../../locales/ru_RU/plugin.json';
 import setting from '../../../locales/ru_RU/setting.json';
 import welcome from '../../../locales/ru_RU/welcome.json';
@@ -9,6 +10,7 @@ const resources = {
   common,
   empty,
   error,
+  market,
   plugin,
   setting,
   welcome,

package/src/locales/resources/zh_CN.ts

@@ -1,6 +1,7 @@
 import common from '../default/common';
 import empty from '../default/empty';
 import error from '../default/error';
+import market from '../default/market';
 import plugin from '../default/plugin';
 import setting from '../default/setting';
 import welcome from '../default/welcome';
@@ -9,6 +10,7 @@ const resources = {
   common,
   empty,
   error,
+  market,
   plugin,
   setting,
   welcome,

package/src/pages/chat/features/Conversation/Input/{Action.tsx → ActionBar/ActionLeft.tsx}

@@ -9,7 +9,7 @@ import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/selectors';
 import { LanguageModel } from '@/types/llm';
 
-const InputActions = memo(() => {
+const ActionLeft = memo(() => {
   const { t } = useTranslation('setting');
 
   const [model, temperature, historyCount, unlimited, updateAgentConfig] = useSessionStore((s) => {
@@ -107,4 +107,4 @@ const InputActions = memo(() => {
   );
 });
 
-export default InputActions;
+export default ActionLeft;

package/src/pages/chat/features/Conversation/Input/ActionBar/ActionRight.tsx

@@ -0,0 +1,36 @@
+import { ActionIcon } from '@lobehub/ui';
+import { Popconfirm } from 'antd';
+import { Eraser } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useSessionStore } from '@/store/session';
+
+import SaveTopic from '../Footer/SaveTopic';
+
+const ActionsRight = memo(() => {
+  const { t } = useTranslation('setting');
+  const [clearMessage] = useSessionStore((s) => [s.clearMessage, s.updateAgentConfig]);
+
+  return (
+    <>
+      <SaveTopic />
+      <Popconfirm
+        cancelText={t('cancel', { ns: 'common' })}
+        okButtonProps={{ danger: true }}
+        okText={t('ok', { ns: 'common' })}
+        onConfirm={() => clearMessage()}
+        placement={'topRight'}
+        title={t('confirmClearCurrentMessages', { ns: 'common' })}
+      >
+        <ActionIcon
+          icon={Eraser}
+          placement={'bottom'}
+          title={t('clearCurrentMessages', { ns: 'common' })}
+        />
+      </Popconfirm>
+    </>
+  );
+});
+
+export default ActionsRight;

package/src/pages/chat/features/Conversation/Input/Desktop.tsx

@@ -0,0 +1,40 @@
+import { DraggablePanel } from '@lobehub/ui';
+import { ReactNode, memo } from 'react';
+
+import { CHAT_TEXTAREA_HEIGHT, HEADER_HEIGHT } from '@/const/layoutTokens';
+import { useGlobalStore } from '@/store/global';
+
+interface ChatInputDesktopLayoutProps {
+  children: ReactNode;
+  expand?: boolean;
+}
+
+const ChatInputDesktopLayout = memo<ChatInputDesktopLayoutProps>(({ children, expand }) => {
+  const [inputHeight, updatePreference] = useGlobalStore((s) => [
+    s.preference.inputHeight,
+    s.updatePreference,
+  ]);
+
+  return (
+    <DraggablePanel
+      expandable={false}
+      fullscreen={expand}
+      headerHeight={HEADER_HEIGHT}
+      minHeight={CHAT_TEXTAREA_HEIGHT}
+      onSizeChange={(_, size) => {
+        if (!size) return;
+
+        updatePreference({
+          inputHeight: typeof size.height === 'string' ? Number.parseInt(size.height) : size.height,
+        });
+      }}
+      placement="bottom"
+      size={{ height: inputHeight, width: '100%' }}
+      style={{ zIndex: 10 }}
+    >
+      {children}
+    </DraggablePanel>
+  );
+});
+
+export default ChatInputDesktopLayout;

package/src/pages/chat/features/Conversation/Input/Footer/SaveTopic.tsx

@@ -0,0 +1,27 @@
+import { ActionIcon, Icon, Tooltip } from '@lobehub/ui';
+import { Button } from 'antd';
+import { useResponsive } from 'antd-style';
+import { LucideGalleryVerticalEnd } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useSessionStore } from '@/store/session';
+
+const SaveTopic = memo(() => {
+  const { t } = useTranslation('common');
+  const [hasTopic, saveToTopic] = useSessionStore((s) => [!!s.activeTopicId, s.saveToTopic]);
+  const { mobile } = useResponsive();
+
+  if (hasTopic) return undefined;
+
+  const Render = mobile ? ActionIcon : Button;
+  const icon: any = mobile ? LucideGalleryVerticalEnd : <Icon icon={LucideGalleryVerticalEnd} />;
+
+  return (
+    <Tooltip title={t('topic.saveCurrentMessages')}>
+      <Render icon={icon} onClick={saveToTopic} />
+    </Tooltip>
+  );
+});
+
+export default SaveTopic;

package/src/pages/chat/features/Conversation/Input/Footer/index.tsx

@@ -0,0 +1,35 @@
+import { Icon } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import { ArrowBigUp, CornerDownLeft } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import SaveTopic from './SaveTopic';
+
+const Footer = memo(() => {
+  const theme = useTheme();
+  const { t } = useTranslation('common');
+
+  return (
+    <>
+      <Flexbox
+        gap={4}
+        horizontal
+        style={{ color: theme.colorTextDescription, fontSize: 12, marginRight: 12 }}
+      >
+        <Icon icon={CornerDownLeft} />
+        <span>{t('send')}</span>
+        <span>/</span>
+        <Flexbox horizontal>
+          <Icon icon={ArrowBigUp} />
+          <Icon icon={CornerDownLeft} />
+        </Flexbox>
+        <span>{t('warp')}</span>
+      </Flexbox>
+      <SaveTopic />
+    </>
+  );
+});
+
+export default Footer;

package/src/pages/chat/features/Conversation/Input/Mobile.tsx

@@ -0,0 +1,12 @@
+import { ReactNode, memo } from 'react';
+
+interface ChatInputMobileLayoutProps {
+  children: ReactNode;
+  expand?: boolean;
+}
+
+const ChatInputMobileLayout = memo<ChatInputMobileLayoutProps>(({ children }) => {
+  return <div>{children}</div>;
+});
+
+export default ChatInputMobileLayout;

package/src/pages/chat/features/Conversation/Input/index.tsx

@@ -1,64 +1,46 @@
-import { ChatInputArea, DraggablePanel } from '@lobehub/ui';
+import { ChatInputArea } from '@lobehub/ui';
+import { useResponsive } from 'antd-style';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { CHAT_TEXTAREA_HEIGHT, HEADER_HEIGHT } from '@/const/layoutTokens';
-import { useGlobalStore } from '@/store/global';
+import { CHAT_TEXTAREA_HEIGHT } from '@/const/layoutTokens';
 import { useSessionStore } from '@/store/session';
 
-import InputActions from './Action';
-import ActionsRight from './ActionRight';
+import ActionLeft from './ActionBar/ActionLeft';
+import ActionsRight from './ActionBar/ActionRight';
+import Token from './ActionBar/Token';
+import Desktop from './Desktop';
 import Footer from './Footer';
-import Token from './Token';
+import Mobile from './Mobile';
 
 const ChatInput = () => {
   const { t } = useTranslation('common');
   const [expand, setExpand] = useState<boolean>(false);
   const [message, setMessage] = useState('');
+  const { mobile } = useResponsive();
 
-  const [inputHeight, updatePreference] = useGlobalStore((s) => [
-    s.preference.inputHeight,
-    s.updatePreference,
+  const [isLoading, sendMessage, stopGenerateMessage] = useSessionStore((s) => [
+    !!s.chatLoadingId,
+    s.sendMessage,
+    s.stopGenerateMessage,
   ]);
-  const [isLoading, hasTopic, sendMessage, saveToTopic, stopGenerateMessage] = useSessionStore(
-    (s) => [
-      !!s.chatLoadingId,
-      !!s.activeTopicId,
-      s.sendMessage,
-      s.saveToTopic,
-      s.stopGenerateMessage,
-    ],
-  );
 
-  return (
-    <DraggablePanel
-      expandable={false}
-      fullscreen={expand}
-      headerHeight={HEADER_HEIGHT}
-      minHeight={CHAT_TEXTAREA_HEIGHT}
-      onSizeChange={(_, size) => {
-        if (!size) return;
+  const Render = mobile ? Mobile : Desktop;
 
-        updatePreference({
-          inputHeight: typeof size.height === 'string' ? Number.parseInt(size.height) : size.height,
-        });
-      }}
-      placement="bottom"
-      size={{ height: inputHeight, width: '100%' }}
-      style={{ zIndex: 10 }}
-    >
+  return (
+    <Render expand={expand}>
       <ChatInputArea
         actions={
           <>
-            <InputActions />
+            <ActionLeft />
             <Token input={message} />
           </>
         }
         actionsRight={<ActionsRight />}
         expand={expand}
-        footer={<Footer hasTopic={hasTopic} saveToTopic={saveToTopic} />}
+        footer={<Footer />}
         loading={isLoading}
-        minHeight={CHAT_TEXTAREA_HEIGHT}
+        minHeight={mobile ? 0 : CHAT_TEXTAREA_HEIGHT}
         onExpandChange={setExpand}
         onInputChange={setMessage}
         onSend={sendMessage}
@@ -70,7 +52,7 @@ const ChatInput = () => {
         }}
         value={message}
       />
-    </DraggablePanel>
+    </Render>
   );
 };
 

package/src/pages/chat/features/SessionList/Header/Desktop.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Logo, SearchBar } from '@lobehub/ui';
+import { ActionIcon, Logo } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { MessageSquarePlus } from 'lucide-react';
 import Link from 'next/link';
@@ -8,6 +8,8 @@ import { Flexbox } from 'react-layout-kit';
 
 import { useSessionStore } from '@/store/session';
 
+import SessionSearchBar from '../../SessionSearchBar';
+
 export const useStyles = createStyles(({ css, token }) => ({
   logo: css`
     fill: ${token.colorText};
@@ -21,7 +23,7 @@ export const useStyles = createStyles(({ css, token }) => ({
 const Header = memo(() => {
   const { styles } = useStyles();
   const { t } = useTranslation('common');
-  const [keywords, createSession] = useSessionStore((s) => [s.searchKeywords, s.createSession]);
+  const [createSession] = useSessionStore((s) => [s.createSession]);
 
   return (
     <Flexbox className={styles.top} gap={16} padding={16}>
@@ -31,22 +33,13 @@ const Header = memo(() => {
         </Link>
         <ActionIcon
           icon={MessageSquarePlus}
-          onClick={createSession}
+          onClick={() => createSession()}
           size={{ fontSize: 24 }}
           style={{ flex: 'none' }}
           title={t('newAgent')}
         />
       </Flexbox>
-      <SearchBar
-        allowClear
-        enableShortKey
-        onChange={(e) => useSessionStore.setState({ searchKeywords: e.target.value })}
-        placeholder={t('searchAgentPlaceholder')}
-        shortKey={'k'}
-        spotlight
-        type={'ghost'}
-        value={keywords}
-      />
+      <SessionSearchBar />
     </Flexbox>
   );
 });

package/src/pages/chat/features/SessionList/Header/Mobile.tsx

@@ -26,7 +26,7 @@ const Header = memo(() => {
       left={<AvatarWithUpload size={28} style={{ marginLeft: 8 }} />}
       right={
         <>
-          <ActionIcon icon={MessageSquarePlus} onClick={createSession} />
+          <ActionIcon icon={MessageSquarePlus} onClick={() => createSession()} />
           <ActionIcon
             icon={Settings2}
             onClick={() => {

package/src/pages/chat/features/SessionList/List/AddButton.tsx

@@ -12,7 +12,7 @@ const AddButton = memo<ButtonProps>((props) => {
   const createSession = useSessionStore((s) => s.createSession);
   return (
     <Flexbox style={{ margin: '12px 16px' }}>
-      <Button block icon={<Icon icon={Plus} />} onClick={createSession} {...props}>
+      <Button block icon={<Icon icon={Plus} />} onClick={() => createSession()} {...props}>
         {t('newAgent')}
       </Button>
     </Flexbox>

package/src/pages/chat/features/SessionList/List/Item/index.tsx

@@ -1,7 +1,7 @@
 import { SiOpenai } from '@icons-pack/react-simple-icons';
 import { Avatar, List, Tag } from '@lobehub/ui';
 import { useHover } from 'ahooks';
-import { createStyles } from 'antd-style';
+import { createStyles, useResponsive } from 'antd-style';
 import { memo, useMemo, useRef, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
@@ -34,7 +34,7 @@ const SessionItem = memo<SessionItemProps>(({ id }) => {
   const [open, setOpen] = useState(false);
   const ref = useRef(null);
   const isHovering = useHover(ref);
-
+  const { mobile } = useResponsive();
   const { styles } = useStyles();
   const [defaultModel] = useGlobalStore((s) => [globalSelectors.defaultAgentConfig(s).model]);
 
@@ -98,7 +98,8 @@ const SessionItem = memo<SessionItemProps>(({ id }) => {
   return (
     <Item
       actions={actions}
-      active={active}
+      // needn't active state in mobile
+      active={mobile ? false : active}
       addon={addon}
       avatar={avatarRender}
       className={styles.container}