@lobehub/chat 0.151.9 → 0.151.11

package/src/store/global/action.test.ts

@@ -4,6 +4,7 @@ import { withSWR } from '~test-utils';
 
 import { globalService } from '@/services/global';
 import { useGlobalStore } from '@/store/global/index';
+import { initialState } from '@/store/global/initialState';
 
 vi.mock('zustand/traditional');
 
@@ -141,4 +142,41 @@ describe('createPreferenceSlice', () => {
       expect(useGlobalStore.getState().latestVersion).toBe(latestVersion);
     });
   });
+
+  describe('useInitGlobalPreference', () => {
+    it('should init global preference if there is empty object', async () => {
+      vi.spyOn(
+        useGlobalStore.getState().preferenceStorage,
+        'getFromLocalStorage',
+      ).mockReturnValueOnce({} as any);
+
+      const { result } = renderHook(() => useGlobalStore().useInitGlobalPreference(), {
+        wrapper: withSWR,
+      });
+
+      await waitFor(() => {
+        expect(result.current.data).toEqual({});
+      });
+
+      expect(useGlobalStore.getState().preference).toEqual(initialState.preference);
+    });
+
+    it('should update with data', async () => {
+      const { result } = renderHook(() => useGlobalStore());
+      vi.spyOn(
+        useGlobalStore.getState().preferenceStorage,
+        'getFromLocalStorage',
+      ).mockReturnValueOnce({ inputHeight: 300 } as any);
+
+      const { result: hooks } = renderHook(() => result.current.useInitGlobalPreference(), {
+        wrapper: withSWR,
+      });
+
+      await waitFor(() => {
+        expect(hooks.current.data).toEqual({ inputHeight: 300 });
+      });
+
+      expect(result.current.preference.inputHeight).toEqual(300);
+    });
+  });
 });

package/src/store/global/action.ts

@@ -1,3 +1,4 @@
+import isEqual from 'fast-deep-equal';
 import { produce } from 'immer';
 import { gt } from 'semver';
 import useSWR, { SWRResponse } from 'swr';
@@ -94,9 +95,11 @@ export const globalActionSlice: StateCreator<
       () => get().preferenceStorage.getFromLocalStorage(),
       {
         onSuccess: (preference) => {
-          if (preference) {
-            set({ preference }, false, n('initPreference'));
-          }
+          const nextPreference = merge(get().preference, preference);
+
+          if (isEqual(get().preference, nextPreference)) return;
+
+          set({ preference: nextPreference }, false, n('initPreference'));
         },
       },
     ),

package/src/store/user/slices/preference/action.test.ts

@@ -1,6 +1,8 @@
-import { act, renderHook } from '@testing-library/react';
+import { act, renderHook, waitFor } from '@testing-library/react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { withSWR } from '~test-utils';
 
+import { globalService } from '@/services/global';
 import { useUserStore } from '@/store/user';
 
 import { type Guide } from './initialState';
@@ -38,4 +40,23 @@ describe('createPreferenceSlice', () => {
       expect(result.current.preference.hideSyncAlert).toEqual(true);
     });
   });
+
+  describe('useInitPreference', () => {
+    it('should return false when userId is empty', async () => {
+      const { result } = renderHook(() => useUserStore());
+
+      vi.spyOn(result.current.preferenceStorage, 'getFromLocalStorage').mockResolvedValueOnce(
+        {} as any,
+      );
+
+      const { result: prefernce } = renderHook(() => result.current.useInitPreference(), {
+        wrapper: withSWR,
+      });
+
+      await waitFor(() => {
+        expect(prefernce.current.data).toEqual({});
+        expect(result.current.isPreferenceInit).toBeTruthy();
+      });
+    });
+  });
 });

package/src/store/user/slices/preference/action.ts

@@ -41,9 +41,7 @@ export const createPreferenceSlice: StateCreator<
       () => get().preferenceStorage.getFromLocalStorage(),
       {
         onSuccess: (preference) => {
-          if (preference) {
-            set({ preference }, false, n('initPreference'));
-          }
+          set({ isPreferenceInit: true, preference }, false, n('initPreference'));
         },
       },
     ),

package/src/store/user/slices/preference/initialState.ts

@@ -16,6 +16,7 @@ export interface UserPreference {
 }
 
 export interface UserPreferenceState {
+  isPreferenceInit: boolean;
   /**
    * the user preference, which only store in local storage
    */
@@ -24,6 +25,7 @@ export interface UserPreferenceState {
 }
 
 export const initialPreferenceState: UserPreferenceState = {
+  isPreferenceInit: false,
   preference: {
     guide: {},
     telemetry: null,

package/src/store/user/slices/preference/selectors.ts

@@ -5,9 +5,11 @@ const useCmdEnterToSend = (s: UserStore): boolean => s.preference.useCmdEnterToS
 const userAllowTrace = (s: UserStore) => s.preference.telemetry;
 
 const hideSyncAlert = (s: UserStore) => s.preference.hideSyncAlert;
+const isPreferenceInit = (s: UserStore) => s.isPreferenceInit;
 
 export const preferenceSelectors = {
   hideSyncAlert,
+  isPreferenceInit,
   useCmdEnterToSend,
   userAllowTrace,
 };

package/src/store/user/slices/settings/actions/llm.test.ts

@@ -2,17 +2,11 @@ import { act, renderHook } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 
 import { userService } from '@/services/user';
-import { UserStore, useUserStore } from '@/store/user';
-import { UserSettingsState, initialSettingsState } from '@/store/user/slices/settings/initialState';
-import {
-  modelConfigSelectors,
-  modelProviderSelectors,
-  settingsSelectors,
-} from '@/store/user/slices/settings/selectors';
+import { useUserStore } from '@/store/user';
 import { GeneralModelProviderConfig } from '@/types/settings';
-import { merge } from '@/utils/merge';
 
-import { CustomModelCardDispatch, customModelCardsReducer } from '../reducers/customModelCard';
+import { CustomModelCardDispatch } from '../reducers/customModelCard';
+import { modelProviderSelectors, settingsSelectors } from '../selectors';
 
 // Mock userService
 vi.mock('@/services/user', () => ({

package/src/store/user/slices/settings/selectors/settings.ts

@@ -1,6 +1,6 @@
 import { DEFAULT_LANG } from '@/const/locale';
 import { DEFAULT_AGENT_META } from '@/const/meta';
-import { DEFAULT_AGENT, DEFAULT_TTS_CONFIG } from '@/const/settings';
+import { DEFAULT_AGENT, DEFAULT_AGENT_CONFIG, DEFAULT_TTS_CONFIG } from '@/const/settings';
 import { Locales } from '@/locales/resources';
 import { GeneralModelProviderConfig, GlobalLLMProviderKey, GlobalSettings } from '@/types/settings';
 import { isOnServerSide } from '@/utils/env';
@@ -21,6 +21,7 @@ const password = (s: UserStore) => currentSettings(s).password;
 const currentTTS = (s: UserStore) => merge(DEFAULT_TTS_CONFIG, currentSettings(s).tts);
 
 const defaultAgent = (s: UserStore) => merge(DEFAULT_AGENT, currentSettings(s).defaultAgent);
+const defaultAgentConfig = (s: UserStore) => merge(DEFAULT_AGENT_CONFIG, defaultAgent(s).config);
 
 const defaultAgentMeta = (s: UserStore) => merge(DEFAULT_AGENT_META, defaultAgent(s).meta);
 
@@ -53,6 +54,7 @@ export const settingsSelectors = {
   currentTTS,
   dalleConfig,
   defaultAgent,
+  defaultAgentConfig,
   defaultAgentMeta,
   exportSettings,
   isDalleAutoGenerating,

package/src/app/(main)/welcome/(desktop)/features/Footer.tsx

@@ -1,45 +0,0 @@
-'use client';
-
-import { ActionIcon, DiscordIcon } from '@lobehub/ui';
-import { useTheme } from 'antd-style';
-import { Book, Github } from 'lucide-react';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import { DISCORD, DOCUMENTS, GITHUB } from '@/const/url';
-
-const Footer = memo(() => {
-  const theme = useTheme();
-  const { t } = useTranslation('common');
-
-  return (
-    <Flexbox align={'center'} horizontal justify={'space-between'} style={{ padding: 16 }}>
-      <span style={{ color: theme.colorTextDescription }}>
-        © 2023 - {new Date().getFullYear()} LobeHub, LLC
-      </span>
-      <Flexbox horizontal>
-        <ActionIcon
-          icon={DiscordIcon}
-          onClick={() => window.open(DISCORD, '__blank')}
-          size={'site'}
-          title={'Discord'}
-        />
-        <ActionIcon
-          icon={Book}
-          onClick={() => window.open(DOCUMENTS, '__blank')}
-          size={'site'}
-          title={t('document')}
-        />
-        <ActionIcon
-          icon={Github}
-          onClick={() => window.open(GITHUB, '__blank')}
-          size={'site'}
-          title={'GitHub'}
-        />
-      </Flexbox>
-    </Flexbox>
-  );
-});
-
-export default Footer;

package/src/app/(main)/welcome/(desktop)/features/Showcase.tsx

@@ -1,23 +0,0 @@
-'use client';
-
-import { GridShowcase } from '@lobehub/ui';
-import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import Banner from '@/app/(main)/welcome/features/Banner';
-
-const Showcase = memo(() => (
-  <Flexbox
-    flex={1}
-    justify={'center'}
-    style={{ height: '100%', position: 'relative', width: '100%' }}
-  >
-    <GridShowcase>
-      <Banner />
-    </GridShowcase>
-    {/*TODO：暂时隐藏，待模板完成后再补回*/}
-    {/*<AgentTemplate width={width} />*/}
-  </Flexbox>
-));
-
-export default Showcase;

package/src/app/(main)/welcome/(desktop)/index.tsx

@@ -1,17 +0,0 @@
-'use client';
-
-import { memo } from 'react';
-
-import ClientResponsiveContent from '@/components/client/ClientResponsiveContent';
-
-import Footer from './features/Footer';
-import Showcase from './features/Showcase';
-
-const Desktop = memo(() => (
-  <>
-    <Showcase />
-    <Footer />
-  </>
-));
-
-export default ClientResponsiveContent({ Desktop, Mobile: () => import('../(mobile)') });

package/src/app/(main)/welcome/(mobile)/index.tsx

@@ -1,16 +0,0 @@
-import { memo } from 'react';
-import { Center, Flexbox } from 'react-layout-kit';
-
-import Banner from '../features/Banner';
-
-const Showcase = memo(() => (
-  <Flexbox align={'center'} justify={'center'} style={{ height: 'calc(100% - 44px)' }}>
-    <Center gap={16}>
-      <Banner mobile />
-    </Center>
-    {/*TODO：暂时隐藏，待模板完成后再补回*/}
-    {/*<AgentTemplate width={width} />*/}
-  </Flexbox>
-));
-
-export default Showcase;

package/src/app/(main)/welcome/features/Banner/AgentCard.tsx

@@ -1,71 +0,0 @@
-import { Avatar, Spotlight } from '@lobehub/ui';
-import { Typography } from 'antd';
-import { createStyles } from 'antd-style';
-import { rgba } from 'polished';
-import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import { LobeAgentSession } from '@/types/session';
-
-const { Paragraph, Title } = Typography;
-
-const useStyles = createStyles(({ css, token, cx, stylish }) => ({
-  container: cx(
-    stylish.blur,
-    css`
-      cursor: pointer;
-
-      position: relative;
-
-      overflow: hidden;
-      flex: 1;
-
-      padding: 16px;
-
-      background-color: ${rgba(token.colorBgContainer, 0.5)};
-      border: 1px solid ${rgba(token.colorText, 0.2)};
-      border-radius: ${token.borderRadiusLG}px;
-
-      transition: all 400ms ${token.motionEaseOut};
-
-      &:hover {
-        background-color: ${rgba(token.colorBgElevated, 0.2)};
-        border-color: ${token.colorText};
-        box-shadow: 0 0 0 1px ${token.colorText};
-      }
-
-      ,
-      &:active {
-        scale: 0.98;
-      }
-    `,
-  ),
-  desc: css`
-    margin: 0 !important;
-  `,
-  title: css`
-    margin: 0 !important;
-  `,
-}));
-
-export interface AgentCardProps {
-  meta: LobeAgentSession['meta'];
-}
-
-const AgentCard = memo<AgentCardProps>(({ meta }) => {
-  const { styles } = useStyles();
-  return (
-    <Flexbox className={styles.container} gap={8}>
-      <Spotlight size={200} />
-      <Avatar avatar={meta.avatar} background={meta.backgroundColor} />
-      <Title className={styles.title} ellipsis level={5}>
-        {meta.title}
-      </Title>
-      <Paragraph className={styles.desc} ellipsis={{ rows: 2 }} type="secondary">
-        {meta.description}
-      </Paragraph>
-    </Flexbox>
-  );
-});
-
-export default AgentCard;

package/src/app/(main)/welcome/features/Banner/AgentTemplate.tsx

@@ -1,43 +0,0 @@
-import { useResponsive } from 'antd-style';
-import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import AgentCard, { type AgentCardProps } from './AgentCard';
-import { useStyles } from './style';
-
-const items: AgentCardProps['meta'][] = [
-  {
-    avatar: '😀',
-    description: 'dddddd',
-    title: 'Title',
-  },
-  {
-    avatar: '😀',
-    description: 'dddddd',
-    title: 'Title',
-  },
-  {
-    avatar: '😀',
-    description: 'dddddd',
-    title: 'Title',
-  },
-];
-
-const AgentTemplate = memo<{ width: number }>(({ width }) => {
-  const { styles } = useStyles();
-  const { mobile } = useResponsive();
-  return (
-    <Flexbox
-      className={styles.templateContainer}
-      gap={16}
-      horizontal={!mobile}
-      style={{ marginTop: -width / 20 }}
-    >
-      {items.map((meta, index) => (
-        <AgentCard key={index} meta={meta} />
-      ))}
-    </Flexbox>
-  );
-});
-
-export default AgentTemplate;

package/src/app/(main)/welcome/features/Banner/Hero.tsx

@@ -1,50 +0,0 @@
-import dynamic from 'next/dynamic';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import { genSize, useStyles } from './style';
-
-const LogoThree = dynamic(() => import('@lobehub/ui/es/LogoThree'));
-const LogoSpline = dynamic(() => import('@lobehub/ui/es/LogoThree/LogoSpline'));
-
-const Hero = memo<{ mobile?: boolean; width: number }>(({ width, mobile }) => {
-  const size: any = {
-    base: genSize(width / 3.5, 240),
-    desc: genSize(width / 50, 14),
-    logo: genSize(width / 2.5, 180),
-    title: genSize(width / 20, 32),
-  };
-
-  size.marginTop = mobile ? -size.logo / 9 : -size.logo / 3;
-  size.marginBottom = mobile ? -size.logo / 9 : -size.logo / 4;
-
-  const { styles } = useStyles(size.base);
-
-  const { t } = useTranslation('welcome');
-
-  return (
-    <>
-      <Flexbox
-        style={{
-          height: size.logo,
-          marginBottom: size.marginBottom,
-          marginTop: size.marginTop,
-          position: 'relative',
-        }}
-      >
-        {mobile ? <LogoThree size={size.logo} /> : <LogoSpline height={'100%'} width={'100%'} />}
-      </Flexbox>
-      <div className={styles.title} style={{ fontSize: size.title }}>
-        <strong style={mobile ? { fontSize: '1.2em' } : {}}>LobeChat</strong>
-        {mobile ? <br /> : ' '}
-        {t('slogan.title')}
-      </div>
-      <div className={styles.desc} style={{ fontSize: size.desc }}>
-        {t('slogan.desc1')}
-      </div>
-    </>
-  );
-});
-
-export default Hero;

package/src/app/(main)/welcome/features/Banner/index.tsx

@@ -1,56 +0,0 @@
-'use client';
-
-import { Icon } from '@lobehub/ui';
-import { Button } from 'antd';
-import { SendHorizonal } from 'lucide-react';
-import Link from 'next/link';
-import { useRouter } from 'next/navigation';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import { useGlobalStore } from '@/store/global';
-
-import Hero from './Hero';
-import { useStyles } from './style';
-
-const Banner = memo<{ mobile?: boolean }>(({ mobile }) => {
-  const { t } = useTranslation('welcome');
-  const router = useRouter();
-  const { styles } = useStyles();
-  const [switchBackToChat, isMobile] = useGlobalStore((s) => [s.switchBackToChat, s.isMobile]);
-
-  return (
-    <>
-      <div className={styles.container}>
-        <Hero mobile={mobile} width={mobile ? 640 : 1024} />
-      </div>
-      <Flexbox
-        className={styles.buttonGroup}
-        gap={16}
-        horizontal={!mobile}
-        justify={'center'}
-        width={'100%'}
-      >
-        <Link href={'/market'}>
-          <Button block={mobile} size={'large'} type={'default'}>
-            {t('button.market')}
-          </Button>
-        </Link>
-        <Button
-          block={mobile}
-          onClick={() => (isMobile ? router.push('/chat') : switchBackToChat())}
-          size={'large'}
-          type={'primary'}
-        >
-          <Flexbox align={'center'} gap={4} horizontal justify={'center'}>
-            {t('button.start')}
-            <Icon icon={SendHorizonal} />
-          </Flexbox>
-        </Button>
-      </Flexbox>
-    </>
-  );
-});
-
-export default Banner;

package/src/app/(main)/welcome/features/Banner/style.ts

@@ -1,71 +0,0 @@
-import { createStyles } from 'antd-style';
-import { rgba } from 'polished';
-
-export const useStyles = createStyles(({ css, token, stylish, cx, prefixCls }) => {
-  return {
-    buttonGroup: css`
-      .${prefixCls}-upload {
-        width: 100% !important;
-      }
-    `,
-    container: css`
-      z-index: 10;
-
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-
-      width: 100%;
-      margin-bottom: 24px;
-    `,
-    desc: css`
-      font-weight: 400;
-      color: ${rgba(token.colorText, 0.8)};
-      text-align: center;
-    `,
-    layout: css`
-      background: ${token.colorBgContainer};
-    `,
-    logo: css`
-      position: absolute;
-      top: 16px;
-      left: 16px;
-      fill: ${token.colorText};
-    `,
-    note: css`
-      z-index: 10;
-      margin-top: 16px;
-      color: ${token.colorTextDescription};
-    `,
-    skip: css`
-      color: ${token.colorTextDescription};
-    `,
-    templateContainer: css`
-      flex-wrap: wrap;
-      width: 100%;
-      padding: 16px;
-    `,
-    title: css`
-      margin-bottom: 0.25em;
-      font-weight: 800;
-      line-height: 1.4;
-      text-align: center;
-    `,
-    view: cx(
-      stylish.noScrollbar,
-      css`
-        position: relative;
-
-        overflow: hidden auto;
-
-        max-width: 1024px;
-        height: 100%;
-        padding: 32px 16px;
-      `,
-    ),
-  };
-});
-
-export const genSize = (size: number, minSize: number) => {
-  return size < minSize ? minSize : size;
-};