@lobehub/lobehub 2.0.0-next.4 → 2.0.0-next.41

package/src/app/[variants]/(main)/chat/{(workspace)/@conversation → components/conversation}/features/ChatList/ChatItem/index.tsx

@@ -1,7 +1,7 @@
 import { createStyles } from 'antd-style';
 import React, { memo } from 'react';
 
-import SupervisorThinkingTag from '@/app/[variants]/(main)/chat/(workspace)/@conversation/features/ChatList/ChatItem/OrchestratorThinking';
+import SupervisorThinkingTag from '@/app/[variants]/(main)/chat/components/conversation/features/ChatList/ChatItem/OrchestratorThinking';
 import { ChatItem } from '@/features/Conversation';
 import { useAgentStore } from '@/store/agent';
 import { agentChatConfigSelectors } from '@/store/agent/selectors';

package/src/app/[variants]/(main)/chat/{(workspace)/@conversation → components/conversation}/features/ChatList/Content.tsx

@@ -6,7 +6,7 @@ import { SkeletonList, VirtualizedList } from '@/features/Conversation';
 import WideScreenContainer from '@/features/Conversation/components/WideScreenContainer';
 import { useFetchMessages } from '@/hooks/useFetchMessages';
 import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
+import { displayMessageSelectors } from '@/store/chat/selectors';
 
 import MainChatItem from './ChatItem';
 import Welcome from './WelcomeChatItem';
@@ -16,10 +16,12 @@ interface ListProps {
 }
 
 const Content = memo<ListProps>(({ mobile }) => {
-  const [isCurrentChatLoaded] = useChatStore((s) => [chatSelectors.isCurrentChatLoaded(s)]);
+  const [isCurrentChatLoaded] = useChatStore((s) => [
+    displayMessageSelectors.isCurrentDisplayChatLoaded(s),
+  ]);
 
   useFetchMessages();
-  const data = useChatStore(chatSelectors.mainDisplayChatIDs);
+  const data = useChatStore(displayMessageSelectors.mainDisplayChatIDs);
 
   const itemContent = useCallback(
     (index: number, id: string) => <MainChatItem id={id} index={index} />,

package/src/app/[variants]/(main)/chat/{(workspace)/@conversation → components/conversation}/features/ChatList/WelcomeChatItem/AgentWelcome/OpeningQuestions.tsx

@@ -40,7 +40,7 @@ interface OpeningQuestionsProps {
 
 const OpeningQuestions = memo<OpeningQuestionsProps>(({ mobile, questions }) => {
   const { t } = useTranslation('welcome');
-  const [updateInputMessage] = useChatStore((s) => [s.updateInputMessage]);
+  const [updateMessageInput] = useChatStore((s) => [s.updateMessageInput]);
 
   const { styles } = useStyles();
   const { send: sendMessage } = useSend();
@@ -56,7 +56,7 @@ const OpeningQuestions = memo<OpeningQuestionsProps>(({ mobile, questions }) =>
               clickable
               key={question}
               onClick={() => {
-                updateInputMessage(question);
+                updateMessageInput(question);
                 sendMessage({ isWelcomeQuestion: true });
               }}
               paddingBlock={8}

package/src/app/[variants]/(main)/chat/{(workspace)/@conversation → components/conversation}/features/ChatList/WelcomeChatItem/GroupWelcome/GroupUsageSuggest.tsx

@@ -77,7 +77,7 @@ const getFallbackActivities = (t: any) => {
 const GroupUsageSuggest = memo<{ mobile?: boolean }>(({ mobile }) => {
   const { t } = useTranslation('welcome');
   const { styles } = useStyles();
-  const { updateInputMessage, send } = useSendGroupMessage();
+  const { updateMessageInput, send } = useSendGroupMessage();
   const templateMatch = useTemplateMatching();
 
   const itemsPerPage = mobile ? 2 : 4;
@@ -139,7 +139,7 @@ const GroupUsageSuggest = memo<{ mobile?: boolean }>(({ mobile }) => {
               horizontal
               key={activityKey}
               onClick={() => {
-                updateInputMessage(prompt);
+                updateMessageInput(prompt);
                 send();
               }}
               variant={'outlined'}

package/src/app/[variants]/(main)/chat/{layout.ts → layout.tsx}

@@ -1,5 +1,4 @@
 import ServerLayout from '@/components/server/ServerLayout';
-
 import Desktop from './_layout/Desktop';
 import Mobile from './_layout/Mobile';
 import { LayoutProps } from './_layout/type';

package/src/app/[variants]/(main)/chat/page.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+import { BrandTextLoading } from '@/components/Loading';
+
+const ChatRouter = dynamic(() => import('./ChatRouter'), {
+  loading: BrandTextLoading,
+  ssr: false,
+});
+
+export default ChatRouter;

package/src/app/[variants]/(main)/chat/{@session → session}/features/SessionListContent/List/Item/Actions.tsx

@@ -1,3 +1,5 @@
+import { isDesktop } from '@lobechat/const';
+import { SessionDefaultGroup } from '@lobechat/types';
 import { ActionIcon, Dropdown, Icon } from '@lobehub/ui';
 import { App } from 'antd';
 import { createStyles } from 'antd-style';
@@ -6,7 +8,6 @@ import isEqual from 'fast-deep-equal';
 import {
   Check,
   ExternalLink,
-  HardDriveDownload,
   ListTree,
   LucideCopy,
   LucidePlus,
@@ -18,14 +19,11 @@ import {
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { isDesktop, isServerMode } from '@/const/version';
-import { configService } from '@/services/config';
-import { useGlobalStore } from '@/store/global';
 import { useChatGroupStore } from '@/store/chatGroup';
+import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 import { sessionHelpers } from '@/store/session/helpers';
 import { sessionGroupSelectors, sessionSelectors } from '@/store/session/selectors';
-import { SessionDefaultGroup } from '@/types/session';
 
 const useStyles = createStyles(({ css }) => ({
   modalRoot: css`
@@ -148,29 +146,6 @@ const Actions = memo<ActionProps>(({ group, id, openCreateGroupModal, parentType
           {
             type: 'divider',
           },
-          isServerMode
-            ? undefined
-            : {
-                children: [
-                  {
-                    key: 'agent',
-                    label: t('exportType.agent', { ns: 'common' }),
-                    onClick: () => {
-                      configService.exportSingleAgent(id);
-                    },
-                  },
-                  {
-                    key: 'agentWithMessage',
-                    label: t('exportType.agentWithMessage', { ns: 'common' }),
-                    onClick: () => {
-                      configService.exportSingleSession(id);
-                    },
-                  },
-                ],
-                icon: <Icon icon={HardDriveDownload} />,
-                key: 'export',
-                label: t('export', { ns: 'common' }),
-              },
           {
             danger: true,
             icon: <Icon icon={Trash} />,

package/src/app/[variants]/(main)/chat/{@session → session}/features/SessionListContent/List/Item/index.tsx

@@ -4,11 +4,10 @@ import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
 import { DEFAULT_AVATAR } from '@/const/meta';
+import { INBOX_SESSION_ID } from '@/const/session';
 import { isDesktop } from '@/const/version';
-import { useAgentStore } from '@/store/agent';
-import { agentSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
+import { messageStateSelectors } from '@/store/chat/selectors';
 import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 import { sessionHelpers } from '@/store/session/helpers';
@@ -28,12 +27,13 @@ interface SessionItemProps {
 const SessionItem = memo<SessionItemProps>(({ id }) => {
   const [open, setOpen] = useState(false);
   const [createGroupModalOpen, setCreateGroupModalOpen] = useState(false);
-  const [defaultModel] = useAgentStore((s) => [agentSelectors.inboxAgentModel(s)]);
 
   const openSessionInNewWindow = useGlobalStore((s) => s.openSessionInNewWindow);
 
   const [active] = useSessionStore((s) => [s.activeId === id]);
-  const [loading] = useChatStore((s) => [chatSelectors.isAIGenerating(s) && id === s.activeId]);
+  const [loading] = useChatStore((s) => [
+    messageStateSelectors.isAIGenerating(s) && id === s.activeId,
+  ]);
 
   const [pin, title, avatar, avatarBackground, updateAt, members, model, group, sessionType] =
     useSessionStore((s) => {
@@ -53,7 +53,8 @@ const SessionItem = memo<SessionItemProps>(({ id }) => {
       ];
     });
 
-  const showModel = sessionType === 'agent' && model && model !== defaultModel;
+  // Only hide the model tag for the inbox session itself (随便聊聊)
+  const showModel = sessionType === 'agent' && model && id !== INBOX_SESSION_ID;
 
   const handleDoubleClick = () => {
     if (isDesktop) {

package/src/app/[variants]/(main)/chat/settings/features/HeaderContent.tsx

@@ -1,69 +1,9 @@
-import { ActionIcon, Button, Dropdown, type MenuProps } from '@lobehub/ui';
-import { HardDriveDownload } from 'lucide-react';
-import { memo, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { HEADER_ICON_SIZE } from '@/const/layoutTokens';
-import { isServerMode } from '@/const/version';
-import { configService } from '@/services/config';
-import { useServerConfigStore } from '@/store/serverConfig';
-import { useSessionStore } from '@/store/session';
+import { memo } from 'react';
 
 import SubmitAgentButton from './SubmitAgentButton';
 
 export const HeaderContent = memo<{ mobile?: boolean; modal?: boolean }>(({ modal }) => {
-  const { t } = useTranslation('setting');
-  const id = useSessionStore((s) => s.activeId);
-
-  const mobile = useServerConfigStore((s) => s.isMobile);
-
-  const items = useMemo<MenuProps['items']>(
-    () =>
-      isServerMode
-        ? []
-        : [
-            {
-              key: 'agent',
-              label: <div>{t('exportType.agent', { ns: 'common' })}</div>,
-              onClick: () => {
-                if (!id) return;
-
-                configService.exportSingleAgent(id);
-              },
-            },
-            {
-              key: 'agentWithMessage',
-              label: <div>{t('exportType.agentWithMessage', { ns: 'common' })}</div>,
-              onClick: () => {
-                if (!id) return;
-
-                configService.exportSingleSession(id);
-              },
-            },
-          ],
-    [],
-  );
-
-  return (
-    <>
-      <SubmitAgentButton modal={modal} />
-      {!isServerMode && (
-        <Dropdown arrow={false} menu={{ items }} trigger={['click']}>
-          {modal ? (
-            <Button block icon={HardDriveDownload} variant={'filled'}>
-              {t('export', { ns: 'common' })}
-            </Button>
-          ) : (
-            <ActionIcon
-              icon={HardDriveDownload}
-              size={HEADER_ICON_SIZE(mobile)}
-              title={t('export', { ns: 'common' })}
-            />
-          )}
-        </Dropdown>
-      )}
-    </>
-  );
+  return <SubmitAgentButton modal={modal} />;
 });
 
 export default HeaderContent;

package/src/app/[variants]/(main)/discover/(list)/features/Pagination.tsx

@@ -52,6 +52,7 @@ const Pagination = memo<PaginationProps>(({ tab, currentPage, total, pageSize })
     <Page
       className={styles.page}
       current={page ? Number(page) : currentPage}
+      data-testid="pagination"
       onChange={handlePageChange}
       pageSize={pageSize}
       showSizeChanger={false}

package/src/app/[variants]/(main)/discover/(list)/features/SortButton/index.tsx

@@ -174,7 +174,7 @@ const SortButton = memo(() => {
       }}
       trigger={['click', 'hover']}
     >
-      <Button icon={<Icon icon={ArrowDownWideNarrow} />} type={'text'}>
+      <Button data-testid="sort-dropdown" icon={<Icon icon={ArrowDownWideNarrow} />} type={'text'}>
         {activeItem.label}
         <Icon icon={ChevronDown} />
       </Button>

package/src/app/[variants]/(main)/discover/(list)/mcp/features/List/Item.tsx

@@ -82,6 +82,7 @@ const McpItem = memo<DiscoverMcpItem>(
     return (
       <Block
         clickable
+        data-testid="mcp-item"
         height={'100%'}
         onClick={() => {
           navigate(link);

package/src/app/[variants]/(main)/discover/(list)/model/features/List/Item.tsx

@@ -61,6 +61,7 @@ const ModelItem = memo<DiscoverModelItem>(
     return (
       <Block
         clickable
+        data-testid="model-item"
         height={'100%'}
         onClick={() => {
           navigate(link);

package/src/app/[variants]/(main)/discover/(list)/provider/features/List/Item.tsx

@@ -54,6 +54,7 @@ const ProviderItem = memo<DiscoverProviderItem>(
     return (
       <Block
         clickable
+        data-testid="provider-item"
         height={'100%'}
         onClick={() => {
           navigate(link);

package/src/app/[variants]/(main)/discover/components/CategoryMenu.tsx

@@ -31,7 +31,15 @@ const useStyles = createStyles(({ css, prefixCls }) => {
 const CategoryMenu = memo<MenuProps>(({ style, ...rest }) => {
   const { styles } = useStyles();
 
-  return <Menu className={styles.menu} mode="inline" style={style} {...rest} />;
+  return (
+    <Menu
+      className={styles.menu}
+      data-testid="category-menu"
+      mode="inline"
+      style={style}
+      {...rest}
+    />
+  );
 });
 
 export default CategoryMenu;

package/src/app/[variants]/(main)/image/@topic/features/Topics/TopicList.tsx

@@ -34,6 +34,7 @@ const TopicsList = memo(() => {
     <Flexbox
       align="center"
       gap={12}
+      padding={12}
       ref={ref}
       style={{
         maxHeight: '100%',

package/src/app/[variants]/(main)/image/features/PromptInput/index.tsx

@@ -73,7 +73,7 @@ const PromptInput = ({ showTitle = false }: PromptInputProps) => {
   };
 
   const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
+    if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {
       e.preventDefault();
       if (!isCreating && value.trim()) {
         handleGenerate();

package/src/app/[variants]/(main)/image/page.tsx

@@ -2,7 +2,6 @@ import { Suspense } from 'react';
 
 import StructuredData from '@/components/StructuredData';
 import { BRANDING_NAME } from '@/const/branding';
-import InitClientDB from '@/features/InitClientDB';
 import { ldModule } from '@/server/ld';
 import { metadataModule } from '@/server/metadata';
 import { translation } from '@/server/translation';
@@ -34,7 +33,6 @@ const AiImage = async (props: DynamicLayoutProps) => {
   return (
     <>
       <StructuredData ld={ld} />
-      <InitClientDB bottom={100} />
       <Suspense fallback={<SkeletonList />}>
         <ImageWorkspace />
       </Suspense>

package/src/app/[variants]/(main)/labs/components/LabCard.tsx

@@ -6,6 +6,8 @@ import Image from 'next/image';
 import { PropsWithChildren, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import { SkeletonSwitch } from '@/components/Skeleton';
+
 interface LabCardProps {
   checked: boolean;
   cover?: string;
@@ -71,18 +73,18 @@ const LabCard = memo<PropsWithChildren<LabCardProps>>(
         <div className={styles.card}>
           <div className={styles.row}>
             <div className={styles.thumb}>
-              {cover && <Image alt={title} fill src={cover} style={{ objectFit: 'cover' }} />}
+              {cover && (
+                <Image alt={title} fill src={cover} style={{ objectFit: 'cover' }} unoptimized />
+              )}
             </div>
             <Flexbox gap={6}>
               <div className={styles.title}>{title}</div>
               <div className={styles.desc}>{desc}</div>
               {meta ? <div className={styles.meta}>{meta}</div> : null}
             </Flexbox>
-            {!loading && (
-              <Flexbox align={'flex-end'} height={'100%'} justify={'center'} paddingInline={8}>
-                <Switch checked={checked} onChange={onChange} />
-              </Flexbox>
-            )}
+            <Flexbox align={'flex-end'} height={'100%'} justify={'center'} paddingInline={8}>
+              {loading ? <SkeletonSwitch /> : <Switch checked={checked} onChange={onChange} />}
+            </Flexbox>
           </div>
         </div>
       </div>

package/src/app/[variants]/(main)/labs/page.tsx

@@ -1,11 +1,11 @@
 'use client';
 
-import { memo, useCallback } from 'react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { useUserStore } from '@/store/user';
-import { preferenceSelectors } from '@/store/user/selectors';
+import { labPreferSelectors, preferenceSelectors } from '@/store/user/selectors';
 
 import Hero from './components/Hero';
 import LabCard from './components/LabCard';
@@ -15,7 +15,6 @@ interface LabItem {
   cover?: string;
   desc: string;
   key: string;
-  onChange: (checked: boolean) => void;
   title: string;
 }
 
@@ -24,32 +23,22 @@ const LabsPage = memo(() => {
 
   const [
     isPreferenceInit,
-    inputMarkdownRender,
+    enableInputMarkdown,
     // enableGroupChat,
-    updatePreference,
+    updateLab,
   ] = useUserStore((s) => [
     preferenceSelectors.isPreferenceInit(s),
-    preferenceSelectors.inputMarkdownRender(s),
-    // preferenceSelectors.enableGroupChat(s),
-    s.updatePreference,
+    labPreferSelectors.enableInputMarkdown(s),
+    // labPreferSelectors.enableGroupChat(s),
+    s.updateLab,
   ]);
 
-  const onToggleMarkdown = useCallback(
-    (checked: boolean) => updatePreference({ disableInputMarkdownRender: !checked }),
-    [updatePreference],
-  );
-  // const onToggleGroupChat = useCallback(
-  //   (checked: boolean) => updatePreference({ enableGroupChat: checked }),
-  //   [updatePreference],
-  // );
-
   const labItems: LabItem[] = [
     {
-      checked: inputMarkdownRender,
+      checked: enableInputMarkdown,
       cover: 'https://github.com/user-attachments/assets/0527a966-3d95-46b4-b880-c0f3fca18f02',
       desc: t('features.inputMarkdown.desc'),
-      key: 'inputMarkdown',
-      onChange: onToggleMarkdown,
+      key: 'enableInputMarkdown',
       title: t('features.inputMarkdown.title'),
     },
     // {
@@ -57,7 +46,6 @@ const LabsPage = memo(() => {
     //   cover: 'https://github.com/user-attachments/assets/72894d24-a96a-4d7c-a823-ff9e6a1a8b6d',
     //   desc: t('features.groupChat.desc'),
     //   key: 'groupChat',
-    //   onChange: onToggleGroupChat,
     //   title: t('features.groupChat.title'),
     // },
   ];
@@ -73,7 +61,7 @@ const LabsPage = memo(() => {
           desc={item.desc}
           key={item.key}
           loading={!isPreferenceInit}
-          onChange={item.onChange}
+          onChange={(checked: boolean) => updateLab({ [item.key]: checked })}
           title={item.title}
         />
       ))}

package/src/app/[variants]/(main)/profile/_layout/Desktop/index.tsx

@@ -5,7 +5,6 @@ import { memo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import InitClientDB from '@/features/InitClientDB';
 import Footer from '@/features/Setting/Footer';
 import SettingContainer from '@/features/Setting/SettingContainer';
 import { useActiveProfileKey } from '@/hooks/useActiveTabKey';
@@ -21,30 +20,30 @@ const Layout = memo<LayoutProps>(({ children, category }) => {
   const activeKey = useActiveProfileKey();
 
   return (
-    <>
-      <Flexbox
-        height={'100%'}
-        horizontal={md}
-        ref={ref}
-        style={{ position: 'relative' }}
-        width={'100%'}
+    <Flexbox
+      height={'100%'}
+      horizontal={md}
+      ref={ref}
+      style={{ position: 'relative' }}
+      width={'100%'}
+    >
+      {md ? (
+        <SideBar>{category}</SideBar>
+      ) : (
+        <Header getContainer={() => ref.current} title={<>{t(`tab.${activeKey}`)}</>}>
+          {category}
+        </Header>
+      )}
+      <SettingContainer
+        addonAfter={<Footer />}
+        style={{
+          paddingBlock: 24,
+          paddingInline: 32,
+        }}
       >
-        {md ? (
-          <SideBar>{category}</SideBar>
-        ) : (
-          <Header getContainer={() => ref.current} title={<>{t(`tab.${activeKey}`)}</>}>
-            {category}
-          </Header>
-        )}
-        <SettingContainer
-          addonAfter={<Footer />}
-          style={{
-            paddingBlock: 24,
-            paddingInline: 32,
-          }}>{children}</SettingContainer>
-      </Flexbox>
-      <InitClientDB />
-    </>
+        {children}
+      </SettingContainer>
+    </Flexbox>
   );
 });
 

package/src/app/[variants]/(main)/profile/_layout/Mobile/index.tsx

@@ -1,5 +1,4 @@
 import MobileContentLayout from '@/components/server/MobileNavLayout';
-import InitClientDB from '@/features/InitClientDB';
 import Footer from '@/features/Setting/Footer';
 
 import { LayoutProps } from '../type';
@@ -7,14 +6,11 @@ import Header from './Header';
 
 const Layout = ({ children }: LayoutProps) => {
   return (
-    <>
-      <MobileContentLayout header={<Header />}>
-        {children}
-        <div style={{ flex: 1 }} />
-        <Footer />
-      </MobileContentLayout>
-      <InitClientDB />
-    </>
+    <MobileContentLayout header={<Header />}>
+      {children}
+      <div style={{ flex: 1 }} />
+      <Footer />
+    </MobileContentLayout>
   );
 };
 

package/src/app/[variants]/(main)/profile/hooks/useCategory.tsx

@@ -1,5 +1,5 @@
 import { Icon } from '@lobehub/ui';
-import { ChartColumnBigIcon, KeyIcon, ShieldCheck, UserCircle } from 'lucide-react';
+import { BadgeCentIcon, ChartColumnBigIcon, KeyIcon, ShieldCheck, UserCircle } from 'lucide-react';
 import Link from 'next/link';
 import { useTranslation } from 'react-i18next';
 
@@ -54,6 +54,15 @@ export const useCategory = () => {
         </Link>
       ),
     },
+    {
+      icon: <Icon icon={BadgeCentIcon} />,
+      key: ProfileTabs.Usage,
+      label: (
+        <Link href={'/profile/usage'} onClick={(e) => e.preventDefault()}>
+          {t('tab.usage')}
+        </Link>
+      ),
+    },
   ].filter(Boolean) as MenuProps['items'];
 
   return cateItems;