@lobehub/chat 0.84.0-beta.2 → 0.84.0

package/src/features/SideBar/BottomActions.tsx

@@ -1,5 +1,5 @@
 import { ActionIcon, DiscordIcon, Icon } from '@lobehub/ui';
-import { Dropdown, MenuProps, Upload } from 'antd';
+import { Badge, ConfigProvider, Dropdown, MenuProps, Upload } from 'antd';
 import {
   Feather,
   FileClock,
@@ -11,13 +11,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 { 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 +32,91 @@ 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={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 (
     <>
@@ -124,7 +133,17 @@ const BottomActions = memo<BottomActionProps>(({ tab, setTab }) => {
         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/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/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/.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;

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

@@ -1,20 +0,0 @@
-import { useResponsive } from 'antd-style';
-import { memo } from 'react';
-
-import { SessionListContent } from '../../../components/SessionList';
-import Mobile from '../../../components/SessionList/Mobile';
-import Desktop from './Desktop';
-
-const ResponsiveSessionList = memo(() => {
-  const { mobile } = useResponsive();
-
-  const Wrapper = mobile ? Mobile : Desktop;
-
-  return (
-    <Wrapper>
-      <SessionListContent />
-    </Wrapper>
-  );
-});
-
-export default ResponsiveSessionList;

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

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

package/src/app/chat/(desktop)/layout/index.tsx

@@ -1,25 +0,0 @@
-'use client';
-
-import { useResponsive } from 'antd-style';
-import { PropsWithChildren, memo } from 'react';
-
-import { useEffectAfterSessionHydrated } from '@/store/session/hooks';
-
-import MobileLayout from '../../(mobile)/layout';
-import DesktopLayout from './Desktop';
-
-const Chat = memo<PropsWithChildren>(({ children }) => {
-  const { mobile } = useResponsive();
-
-  const RenderLayout = mobile ? MobileLayout : DesktopLayout;
-
-  useEffectAfterSessionHydrated(
-    (store) => {
-      store.setState({ isMobile: mobile });
-    },
-    [mobile],
-  );
-
-  return <RenderLayout>{children}</RenderLayout>;
-});
-export default Chat;

package/src/app/chat/(mobile)/features/Topics.tsx

@@ -1,12 +0,0 @@
-import { memo } from 'react';
-
-import { InspectorContent } from '../../components/Inspector';
-import Mobile from '../../components/Inspector/Mobile';
-
-const Topics = memo(() => (
-  <Mobile>
-    <InspectorContent />
-  </Mobile>
-));
-
-export default Topics;

package/src/app/chat/(mobile)/layout.tsx

@@ -1,15 +0,0 @@
-'use client';
-
-import { PropsWithChildren, memo } from 'react';
-
-import { useEffectAfterSessionHydrated } from '@/store/session';
-
-const ChatMobileLayout = memo<PropsWithChildren>(({ children }) => {
-  useEffectAfterSessionHydrated((store) => {
-    store.setState({ isMobile: true });
-  }, []);
-
-  return children;
-});
-
-export default ChatMobileLayout;