@lobehub/chat 0.84.0-beta.2 → 0.85.0

package/src/features/SideBar/BottomActions.tsx

@@ -1,6 +1,7 @@
 import { ActionIcon, DiscordIcon, Icon } from '@lobehub/ui';
-import { Dropdown, MenuProps, Upload } from 'antd';
+import { Badge, ConfigProvider, Dropdown, MenuProps, Upload } from 'antd';
 import {
+  Book,
   Feather,
   FileClock,
   Github,
@@ -11,13 +12,14 @@ import {
   Settings2,
 } from 'lucide-react';
 import { useRouter } from 'next/navigation';
-import { memo, useMemo } from 'react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 
-import { ABOUT, CHANGELOG, DISCORD, FEEDBACK, GITHUB } from '@/const/url';
+import { ABOUT, CHANGELOG, DISCORD, FEEDBACK, GITHUB, WIKI } from '@/const/url';
 import { useExportConfig } from '@/hooks/useExportConfig';
 import { useImportConfig } from '@/hooks/useImportConfig';
-import { GlobalStore } from '@/store/global';
+import { GlobalStore, useGlobalStore } from '@/store/global';
 import { SidebarTabKey } from '@/store/global/initialState';
 
 export interface BottomActionProps {
@@ -31,83 +33,97 @@ const BottomActions = memo<BottomActionProps>(({ tab, setTab }) => {
   const { exportSessions, exportSettings, exportAll, exportAgents } = useExportConfig();
   const { importConfig } = useImportConfig();
 
-  const items: MenuProps['items'] = useMemo(
-    () => [
-      {
-        icon: <Icon icon={HardDriveUpload} />,
-        key: 'import',
-        label: (
-          <Upload maxCount={1} onChange={importConfig} showUploadList={false}>
-            {t('import')}
-          </Upload>
-        ),
-      },
-      {
-        children: [
-          {
-            key: 'allAgent',
-            label: <div>{t('exportType.allAgent')}</div>,
-            onClick: exportAgents,
-          },
-          {
-            key: 'allAgentWithMessage',
-            label: <div>{t('exportType.allAgentWithMessage')}</div>,
-            onClick: exportSessions,
-          },
-          {
-            key: 'globalSetting',
-            label: <div>{t('exportType.globalSetting')}</div>,
-            onClick: exportSettings,
-          },
-          {
-            type: 'divider',
-          },
-          {
-            key: 'all',
-            label: <div>{t('exportType.all')}</div>,
-            onClick: exportAll,
-          },
-        ],
-        icon: <Icon icon={HardDriveDownload} />,
-        key: 'export',
-        label: t('export'),
-      },
-      {
-        type: 'divider',
-      },
-      {
-        icon: <Icon icon={Feather} />,
-        key: 'feedback',
-        label: t('feedback'),
-        onClick: () => window.open(FEEDBACK, '__blank'),
-      },
-      {
-        icon: <Icon icon={FileClock} />,
-        key: 'changelog',
-        label: t('changelog'),
-        onClick: () => window.open(CHANGELOG, '__blank'),
-      },
-      {
-        icon: <Icon icon={Heart} />,
-        key: 'about',
-        label: t('about'),
-        onClick: () => window.open(ABOUT, '__blank'),
-      },
-      {
-        type: 'divider',
-      },
-      {
-        icon: <Icon icon={Settings} />,
-        key: 'setting',
-        label: t('setting'),
-        onClick: () => {
-          setTab(SidebarTabKey.Setting);
-          router.push('/settings');
+  const [hasNewVersion, useCheckLatestVersion] = useGlobalStore((s) => [
+    s.hasNewVersion,
+    s.useCheckLatestVersion,
+  ]);
+
+  useCheckLatestVersion();
+
+  const items: MenuProps['items'] = [
+    {
+      icon: <Icon icon={HardDriveUpload} />,
+      key: 'import',
+      label: (
+        <Upload maxCount={1} onChange={importConfig} showUploadList={false}>
+          {t('import')}
+        </Upload>
+      ),
+    },
+    {
+      children: [
+        {
+          key: 'allAgent',
+          label: <div>{t('exportType.allAgent')}</div>,
+          onClick: exportAgents,
+        },
+        {
+          key: 'allAgentWithMessage',
+          label: <div>{t('exportType.allAgentWithMessage')}</div>,
+          onClick: exportSessions,
+        },
+        {
+          key: 'globalSetting',
+          label: <div>{t('exportType.globalSetting')}</div>,
+          onClick: exportSettings,
         },
+        {
+          type: 'divider',
+        },
+        {
+          key: 'all',
+          label: <div>{t('exportType.all')}</div>,
+          onClick: exportAll,
+        },
+      ],
+      icon: <Icon icon={HardDriveDownload} />,
+      key: 'export',
+      label: t('export'),
+    },
+    {
+      type: 'divider',
+    },
+    {
+      icon: <Icon icon={Feather} />,
+      key: 'feedback',
+      label: t('feedback'),
+      onClick: () => window.open(FEEDBACK, '__blank'),
+    },
+    {
+      icon: <Icon icon={FileClock} />,
+      key: 'changelog',
+      label: t('changelog'),
+      onClick: () => window.open(CHANGELOG, '__blank'),
+    },
+    {
+      icon: <Icon icon={Book} />,
+      key: 'wiki',
+      label: 'WIKI',
+      onClick: () => window.open(WIKI, '__blank'),
+    },
+    {
+      icon: <Icon icon={Heart} />,
+      key: 'about',
+      label: t('about'),
+      onClick: () => window.open(ABOUT, '__blank'),
+    },
+    {
+      type: 'divider',
+    },
+    {
+      icon: <Icon icon={Settings} />,
+      key: 'setting',
+      label: (
+        <Flexbox align={'center'} distribution={'space-between'} gap={8} horizontal>
+          {t('setting')} {hasNewVersion && <Badge count={t('upgradeVersion.hasNew')} />}
+        </Flexbox>
+      ),
+      onClick: () => {
+        setTab(SidebarTabKey.Setting);
+        router.push('/settings/common');
       },
-    ],
-    [],
-  );
+    },
+  ];
 
   return (
     <>
@@ -121,10 +137,20 @@ const BottomActions = memo<BottomActionProps>(({ tab, setTab }) => {
         icon={Github}
         onClick={() => window.open(GITHUB, '__blank')}
         placement={'right'}
-        title={'Github'}
+        title={'GitHub'}
       />
       <Dropdown arrow={false} menu={{ items }} trigger={['click']}>
-        <ActionIcon active={tab === SidebarTabKey.Setting} icon={Settings2} />
+        {hasNewVersion ? (
+          <Flexbox>
+            <ConfigProvider theme={{ components: { Badge: { dotSize: 8 } } }}>
+              <Badge dot offset={[-4, 4]}>
+                <ActionIcon active={tab === SidebarTabKey.Setting} icon={Settings2} />
+              </Badge>
+            </ConfigProvider>
+          </Flexbox>
+        ) : (
+          <ActionIcon active={tab === SidebarTabKey.Setting} icon={Settings2} />
+        )}
       </Dropdown>
     </>
   );

package/src/layout/{AppLayout.tsx → AppLayout.desktop.tsx}

@@ -5,7 +5,7 @@ import { Flexbox } from 'react-layout-kit';
 import SideBar from '@/features/SideBar';
 import { useIsPWA } from '@/hooks/useIsPWA';
 
-const AppLayout = memo<PropsWithChildren>(({ children }) => {
+const AppLayoutDesktop = memo<PropsWithChildren>(({ children }) => {
   const isPWA = useIsPWA();
   const theme = useTheme();
   return (
@@ -20,4 +20,4 @@ const AppLayout = memo<PropsWithChildren>(({ children }) => {
   );
 });
 
-export default AppLayout;
+export default AppLayoutDesktop;

package/src/layout/{AppMobileLayout.tsx → AppLayout.mobile.tsx}

@@ -43,7 +43,7 @@ interface AppMobileLayoutProps extends PropsWithChildren {
   title?: MobileNavBarTitleProps;
 }
 
-const AppMobileLayout = memo<AppMobileLayoutProps>(
+const AppLayoutMobile = memo<AppMobileLayoutProps>(
   ({ children, showTabBar, navBar, style, className }) => {
     const { styles, cx } = useStyles();
 
@@ -67,4 +67,4 @@ const AppMobileLayout = memo<AppMobileLayoutProps>(
   },
 );
 
-export default AppMobileLayout;
+export default AppLayoutMobile;

package/src/layout/GlobalLayout/AppTheme.tsx

@@ -20,9 +20,9 @@ export interface AppThemeProps {
 
 const AppTheme = memo<AppThemeProps>(
   ({ children, defaultAppearance, defaultPrimaryColor, defaultNeutralColor }) => {
-    // console.log('server:appearance', defaultAppearance);
-    // console.log('server:primaryColor', defaultPrimaryColor);
-    // console.log('server:neutralColor', defaultNeutralColor);
+    // console.debug('server:appearance', defaultAppearance);
+    // console.debug('server:primaryColor', defaultPrimaryColor);
+    // console.debug('server:neutralColor', defaultNeutralColor);
     const themeMode = useGlobalStore((s) => s.settings.themeMode);
 
     const [primaryColor, neutralColor] = useGlobalStore((s) => [

package/src/layout/GlobalLayout/Locale.tsx

@@ -20,9 +20,9 @@ const InnerLocale = memo<LocaleLayoutProps>(({ children, lang }) => {
   } else {
     // if on browser side, init i18n instance only once
     if (!i18n.instance.isInitialized)
-      // console.log('locale', lang);
+      // console.debug('locale', lang);
       i18n.init().then(() => {
-        // console.log('inited.');
+        // console.debug('inited.');
       });
   }
 

package/src/layout/GlobalLayout/StoreHydration.tsx

@@ -1,9 +1,14 @@
+import { useResponsive } from 'antd-style';
 import { useRouter } from 'next/navigation';
 import { memo, useEffect } from 'react';
 
 import { useGlobalStore } from '@/store/global';
 import { usePluginStore } from '@/store/plugin';
-import { useOnFinishHydrationSession, useSessionStore } from '@/store/session';
+import {
+  useEffectAfterSessionHydrated,
+  useOnFinishHydrationSession,
+  useSessionStore,
+} from '@/store/session';
 
 const StoreHydration = memo(() => {
   const router = useRouter();
@@ -22,6 +27,15 @@ const StoreHydration = memo(() => {
     store.setState({ router });
   });
 
+  const { mobile } = useResponsive();
+
+  useEffectAfterSessionHydrated(
+    (store) => {
+      store.setState({ isMobile: mobile });
+    },
+    [mobile],
+  );
+
   return null;
 });
 

package/src/layout/ResponsiveLayout.client.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { PropsWithChildren, ReactNode } from 'react';
+
+import { useIsMobile } from '@/hooks/useIsMobile';
+
+interface ServerResponsiveLayoutProps {
+  Desktop: (props: PropsWithChildren) => ReactNode;
+  Mobile: (props: PropsWithChildren) => ReactNode;
+  children?: ReactNode;
+}
+const ResponsiveLayout = ({ children, Desktop, Mobile }: ServerResponsiveLayoutProps) => {
+  const mobile = useIsMobile();
+
+  return mobile ? <Mobile>{children}</Mobile> : <Desktop>{children}</Desktop>;
+};
+
+export default ResponsiveLayout;

package/src/{components/ResponsiveLayout.tsx → layout/ResponsiveLayout.server.tsx}

@@ -1,13 +1,14 @@
 import { PropsWithChildren, ReactNode } from 'react';
 
+import { isMobileDevice } from '@/utils/responsive';
+
 interface ServerResponsiveLayoutProps {
   Desktop: (props: PropsWithChildren) => ReactNode;
   Mobile: (props: PropsWithChildren) => ReactNode;
   children?: ReactNode;
-  isMobile: () => boolean;
 }
-const ResponsiveLayout = ({ children, Desktop, Mobile, isMobile }: ServerResponsiveLayoutProps) => {
-  const mobile = isMobile();
+const ResponsiveLayout = ({ children, Desktop, Mobile }: ServerResponsiveLayoutProps) => {
+  const mobile = isMobileDevice();
 
   return mobile ? <Mobile>{children}</Mobile> : <Desktop>{children}</Desktop>;
 };

package/src/locales/default/common.ts

@@ -96,5 +96,10 @@ export default {
   },
   updateAgent: '更新助理信息',
   updatePrompt: '更新提示词',
+  upgradeVersion: {
+    action: '立即升级',
+    hasNew: '有可用更新',
+    newVersion: '有新版本可用：{{version}}',
+  },
   warp: '换行',
 };

package/src/locales/options.ts

@@ -1,4 +1,3 @@
-
 import type { Locales } from '@/types/locale';
 
 type LocaleOptions = {
@@ -19,6 +18,14 @@ export const localeOptions: LocaleOptions = [
     label: 'English',
     value: 'en-US',
   },
+  {
+    label: '日本語',
+    value: 'ja-JP',
+  },
+  {
+    label: '한국어',
+    value: 'ko-KR',
+  },
   {
     label: 'Russian',
     value: 'ru-RU',

package/src/locales/resources/index.ts

@@ -1,10 +1,14 @@
 import en_US from './en_US';
+import ja_JP from './ja_JP';
+import ko_KR from './ko_KR';
 import ru_RU from './ru_RU';
 import zh_CN from './zh_CN';
 import zh_TW from './zh_TW';
 
 const resources = {
   'en-US': en_US,
+  'ja-JP': ja_JP,
+  'ko-KR': ko_KR,
   'ru-RU': ru_RU,
   'zh-CN': zh_CN,
   'zh-TW': zh_TW,

package/src/locales/resources/ja_JP.ts

@@ -0,0 +1,19 @@
+import common from '../../../locales/ja_JP/common.json';
+import empty from '../../../locales/ja_JP/empty.json';
+import error from '../../../locales/ja_JP/error.json';
+import market from '../../../locales/ja_JP/market.json';
+import plugin from '../../../locales/ja_JP/plugin.json';
+import setting from '../../../locales/ja_JP/setting.json';
+import welcome from '../../../locales/ja_JP/welcome.json';
+
+const resources = {
+  common,
+  empty,
+  error,
+  market,
+  plugin,
+  setting,
+  welcome,
+} as const;
+
+export default resources;

package/src/locales/resources/ko_KR.ts

@@ -0,0 +1,19 @@
+import common from '../../../locales/ko_KR/common.json';
+import empty from '../../../locales/ko_KR/empty.json';
+import error from '../../../locales/ko_KR/error.json';
+import market from '../../../locales/ko_KR/market.json';
+import plugin from '../../../locales/ko_KR/plugin.json';
+import setting from '../../../locales/ko_KR/setting.json';
+import welcome from '../../../locales/ko_KR/welcome.json';
+
+const resources = {
+  common,
+  empty,
+  error,
+  market,
+  plugin,
+  setting,
+  welcome,
+} as const;
+
+export default resources;

package/src/services/latestVersion.ts

@@ -1 +1,11 @@
-fetch('https://registry.npmmirror.com/@lobehub/chat');
+const VERSION_URL = 'https://registry.npmmirror.com/@lobehub/chat';
+
+/**
+ * get latest version from npm
+ */
+export const featLatestVersion = async (): Promise<string> => {
+  const res = await fetch(VERSION_URL);
+  const data = await res.json();
+
+  return data['dist-tags']?.latest;
+};

package/src/store/global/initialState.ts

@@ -18,7 +18,18 @@ export interface Guide {
   topic?: boolean;
 }
 
+export interface GlobalPreference {
+  guide?: Guide;
+  inputHeight: number;
+  mobileShowTopic?: boolean;
+  sessionsWidth: number;
+  showChatSideBar?: boolean;
+  showSessionPanel?: boolean;
+}
+
 export interface GlobalState {
+  hasNewVersion?: boolean;
+  latestVersion?: string;
   /**
    *  用户偏好的 UI 状态
    *  @localStorage
@@ -33,15 +44,6 @@ export interface GlobalState {
   sidebarKey: SidebarTabKey;
 }
 
-export interface GlobalPreference {
-  guide?: Guide;
-  inputHeight: number;
-  mobileShowTopic?: boolean;
-  sessionsWidth: number;
-  showChatSideBar?: boolean;
-  showSessionPanel?: boolean;
-}
-
 export const initialState: GlobalState = {
   preference: {
     guide: {},

package/src/store/global/slices/common.ts

@@ -1,6 +1,10 @@
 import { produce } from 'immer';
+import { gt } from 'semver';
+import useSWR, { SWRResponse } from 'swr';
 import type { StateCreator } from 'zustand/vanilla';
 
+import { CURRENT_VERSION } from '@/const/version';
+import { featLatestVersion } from '@/services/latestVersion';
 import { merge } from '@/utils/merge';
 import { setNamespace } from '@/utils/storeDebug';
 
@@ -22,6 +26,7 @@ export interface CommonAction {
   toggleMobileTopic: (visible?: boolean) => void;
   updateGuideState: (guide: Partial<Guide>) => void;
   updatePreference: (preference: Partial<GlobalPreference>, action?: string) => void;
+  useCheckLatestVersion: () => SWRResponse<string>;
 }
 
 export const createCommonSlice: StateCreator<
@@ -59,4 +64,11 @@ export const createCommonSlice: StateCreator<
       action,
     );
   },
+  useCheckLatestVersion: () =>
+    useSWR('checkLatestVersion', featLatestVersion, {
+      onSuccess: (data: string) => {
+        if (gt(data, CURRENT_VERSION))
+          set({ hasNewVersion: true, latestVersion: data }, false, t('checkLatestVersion'));
+      },
+    }),
 });

package/src/store/session/slices/session/initialState.ts

@@ -33,7 +33,7 @@ export const initLobeSession: LobeAgentSession = {
 
 export const initInbox = merge({}, initLobeSession, {
   config: {
-    systemRole: '你是一名 AI 助理',
+    systemRole: '',
   } as LobeAgentConfig,
   id: 'inbox',
   meta: {
@@ -42,7 +42,7 @@ export const initInbox = merge({}, initLobeSession, {
 } as Partial<LobeAgentSession>);
 
 export const initialSessionState: SessionState = {
-  activeId: undefined,
+  activeId: 'inbox',
   inbox: initInbox,
   isMobile: false,
   searchKeywords: '',

package/src/utils/VersionController.ts

@@ -56,7 +56,7 @@ export class VersionController<T> {
       nextData = migration.migrate(nextData);
 
       nextData.version += 1;
-      console.log('迁移器：', migration, '数据：', nextData, '迁移后版本:', nextData.version);
+      console.debug('迁移器：', migration, '数据：', nextData, '迁移后版本:', nextData.version);
     }
 
     return nextData;

package/src/utils/responsive.ts

@@ -12,7 +12,7 @@ export const isMobileDevice = () => {
   const { get } = headers();
   const ua = get('user-agent');
 
-  // console.log(ua);
+  // console.debug(ua);
   const device = new UAParser(ua || '').getDevice();
 
   return device.type === 'mobile';

package/.dockerignore

@@ -1,10 +0,0 @@
-Dockerfile
-.dockerignore
-node_modules
-npm-debug.log
-.next
-.git
-scripts
-docs
-.github
-*.md

package/Dockerfile

@@ -1,47 +0,0 @@
-FROM node:20-slim AS base
-ENV PNPM_HOME="/pnpm"
-ENV PATH="$PNPM_HOME:$PATH"
-RUN corepack enable
-
-## Install dependencies only when needed
-FROM base AS builder
-WORKDIR /app
-
-COPY package.json ./
-
-RUN pnpm i -g bun
-# If you want to build docker in China
-#RUN npm config set registry https://registry.npmmirror.com/
-RUN bun i
-
-COPY . .
-RUN pnpm run build:docker # run build standalone for docker version
-
-## Production image, copy all the files and run next
-FROM base AS runner
-WORKDIR /app
-
-ENV NODE_ENV production
-
-RUN addgroup --system --gid 1001 nodejs
-RUN adduser --system --uid 1001 nextjs
-
-COPY --from=builder /app/public ./public
-
-# Set the correct permission for prerender cache
-RUN mkdir .next
-RUN chown nextjs:nodejs .next
-
-# Automatically leverage output traces to reduce image size
-# https://nextjs.org/docs/advanced-features/output-file-tracing
-COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
-COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
-
-USER nextjs
-
-EXPOSE 3000
-
-# set hostname to localhost
-ENV HOSTNAME "0.0.0.0"
-
-CMD ["node", "server.js"]

package/src/app/chat/(desktop)/features/ChatHeader/index.tsx

@@ -1,14 +0,0 @@
-import { useResponsive } from 'antd-style';
-import { memo } from 'react';
-
-import Mobile from '../../../components/ChatHeader/Mobile';
-import Desktop from './Desktop';
-
-const Header = memo(() => {
-  const { mobile } = useResponsive();
-  const Render = mobile ? Mobile : Desktop;
-
-  return <Render />;
-});
-
-export default Header;

package/src/app/chat/(desktop)/features/ChatInput/index.tsx

@@ -1,22 +0,0 @@
-import { useResponsive } from 'antd-style';
-import { memo, useState } from 'react';
-
-import { ChatInputContent } from '../../../components/ChatInput';
-import Mobile from '../../../components/ChatInput/Mobile';
-import Desktop from './Desktop';
-
-const ChatInput = () => {
-  const [expand, setExpand] = useState<boolean>(false);
-
-  const { mobile } = useResponsive();
-
-  const Render = mobile ? Mobile : Desktop;
-
-  return (
-    <Render expand={expand}>
-      <ChatInputContent expand={expand} onExpandChange={setExpand} />
-    </Render>
-  );
-};
-
-export default memo(ChatInput);

package/src/app/chat/(desktop)/features/SessionHeader/index.tsx

@@ -1,14 +0,0 @@
-import { useResponsive } from 'antd-style';
-import { memo } from 'react';
-
-import Mobile from '../../../(mobile)/features/SessionHeader';
-import Desktop from './Desktop';
-
-const Header = memo(() => {
-  const { mobile } = useResponsive();
-  const Render = mobile ? Mobile : Desktop;
-
-  return <Render />;
-});
-
-export default Header;