@lobehub/chat 1.39.3 → 1.40.0

package/src/app/@modal/chat/(.)settings/modal/layout.tsx

@@ -6,6 +6,7 @@ import dynamic from 'next/dynamic';
 import { PropsWithChildren, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import ModalLayout from '@/app/@modal/_layout/ModalLayout';
 import StoreUpdater from '@/features/AgentSetting/StoreUpdater';
 import { Provider, createStore } from '@/features/AgentSetting/store';
 import { useQuery } from '@/hooks/useQuery';
@@ -35,23 +36,25 @@ const Layout = memo<PropsWithChildren>(({ children }) => {
   ]);
 
   return (
-    <SettingModalLayout
-      activeTitle={t(`agentTab.${tab as ChatSettingsTabs}`)}
-      category={<CategoryContent />}
-      desc={t('header.sessionDesc')}
-      title={t('header.session')}
-    >
-      <Provider createStore={createStore}>
-        <StoreUpdater
-          config={config}
-          id={id}
-          meta={meta}
-          onConfigChange={updateAgentConfig}
-          onMetaChange={updateAgentMeta}
-        />
-        {children}
-      </Provider>
-    </SettingModalLayout>
+    <ModalLayout>
+      <SettingModalLayout
+        activeTitle={t(`agentTab.${tab as ChatSettingsTabs}`)}
+        category={<CategoryContent />}
+        desc={t('header.sessionDesc')}
+        title={t('header.session')}
+      >
+        <Provider createStore={createStore}>
+          <StoreUpdater
+            config={config}
+            id={id}
+            meta={meta}
+            onConfigChange={updateAgentConfig}
+            onMetaChange={updateAgentMeta}
+          />
+          {children}
+        </Provider>
+      </SettingModalLayout>
+    </ModalLayout>
   );
 });
 

package/src/app/@modal/layout.tsx

@@ -1,71 +1,7 @@
-'use client';
+import { FC, PropsWithChildren } from 'react';
 
-import { Modal } from '@lobehub/ui';
-import { useTheme } from 'antd-style';
-import { usePathname, useRouter } from 'next/navigation';
-import { PropsWithChildren, memo, useEffect, useState } from 'react';
+const Layout: FC<PropsWithChildren> = ({ children }) => {
+  return <div style={{ position: 'absolute', zIndex: 0 }}>{children}</div>;
+};
 
-import InterceptingLayout from './features/InterceptingContext';
-
-const InterceptingModal = memo<PropsWithChildren>(({ children }) => {
-  const [open, setOpen] = useState(true);
-  const router = useRouter();
-  const pathname = usePathname();
-  const isDiscover = pathname.startsWith('/discover');
-  const theme = useTheme();
-
-  const inModal =
-    pathname.startsWith('/settings') ||
-    pathname.startsWith('/chat/settings') ||
-    pathname.startsWith('/discover/assistant/') ||
-    pathname.startsWith('/discover/model/') ||
-    pathname.startsWith('/discover/plugin/') ||
-    pathname.startsWith('/discover/provider/');
-
-  useEffect(() => {
-    if (!inModal) {
-      setOpen(false);
-    } else {
-      setOpen(true);
-    }
-  }, [inModal, router]);
-
-  if (!inModal) return null;
-
-  return (
-    <InterceptingLayout>
-      <Modal
-        afterClose={() => {
-          if (inModal) {
-            router.back();
-          } else {
-            router.refresh();
-          }
-        }}
-        enableResponsive={false}
-        footer={null}
-        onCancel={() => {
-          setOpen(false);
-          router.back();
-        }}
-        open={open}
-        styles={{
-          body: {
-            display: 'flex',
-            maxHeight: isDiscover ? '80vh' : undefined,
-            minHeight: 750,
-            overflow: 'hidden',
-            padding: 0,
-          },
-          content: { border: 'none', boxShadow: `0 0 0 1px ${theme.colorBorderSecondary}` },
-        }}
-        title={false}
-        width={isDiscover ? 'min(80vw, 1280px)' : 'min(80vw, 1024px)'}
-      >
-        {children}
-      </Modal>
-    </InterceptingLayout>
-  );
-});
-
-export default InterceptingModal;
+export default Layout;

package/src/components/mdx/Image.tsx

@@ -0,0 +1,50 @@
+'use server';
+
+import { Image } from '@lobehub/ui/mdx';
+import Img from 'next/image';
+import { getPlaiceholder } from 'plaiceholder';
+import { FC } from 'react';
+
+const DEFAULT_WIDTH = 800;
+
+const fetchImage = async (url: string) => {
+  const buffer = await fetch(url, { cache: 'force-cache' }).then(async (res) =>
+    Buffer.from(await res.arrayBuffer()),
+  );
+  const {
+    base64,
+    metadata: { height, width },
+  } = await getPlaiceholder(buffer, { format: ['webp'] });
+  return {
+    base64,
+    height: (DEFAULT_WIDTH / width) * height,
+  };
+};
+
+const ImageWrapper: FC<{ alt: string; src: string }> = async ({ alt, src, ...rest }) => {
+  try {
+    const { base64, height } = await fetchImage(src);
+    return (
+      <Image
+        alt={alt}
+        height={height}
+        // @ts-ignore
+        placeholder={
+          <Img
+            alt={alt}
+            height={height}
+            src={base64}
+            style={{ filter: 'blur(24px)', scale: 1.2 }}
+            width={DEFAULT_WIDTH}
+          />
+        }
+        src={src}
+        width={DEFAULT_WIDTH}
+      />
+    );
+  } catch {
+    return <Image alt={alt} src={src} {...rest} />;
+  }
+};
+
+export default ImageWrapper;

package/src/components/mdx/index.tsx

@@ -5,6 +5,7 @@ import { FC } from 'react';
 import remarkGfm from 'remark-gfm';
 
 import CodeBlock from './CodeBlock';
+import Image from './Image';
 import Link from './Link';
 
 export const Typography = ({
@@ -31,6 +32,7 @@ export const CustomMDX: FC<MDXRemoteProps & { mobile?: boolean }> = ({ mobile, .
   const list: any = {};
   Object.entries({
     ...mdxComponents,
+    Image: Image,
     a: Link,
     pre: CodeBlock,
     ...rest.components,

package/src/const/url.ts

@@ -73,3 +73,4 @@ export const mailTo = (email: string) => `mailto:${email}`;
 export const AES_GCM_URL = 'https://datatracker.ietf.org/doc/html/draft-ietf-avt-srtp-aes-gcm-01';
 export const BASE_PROVIDER_DOC_URL = 'https://lobehub.com/docs/usage/providers';
 export const SITEMAP_BASE_URL = isDev ? '/sitemap.xml/' : 'sitemap';
+export const CHANGELOG_URL = urlJoin(OFFICIAL_SITE, 'changelog/versions');

package/src/features/ChangelogModal/index.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { useTimeout } from 'ahooks';
+import { useRouter } from 'next/navigation';
+import { memo } from 'react';
+
+import { useGlobalStore } from '@/store/global';
+
+const ChangelogModal = memo<{ currentId?: string }>(({ currentId }) => {
+  const latestChangelogId = useGlobalStore((s) => s.status.latestChangelogId);
+  const router = useRouter();
+
+  useTimeout(() => {
+    if (latestChangelogId !== currentId) {
+      router.push('/changelog/modal');
+    }
+  }, 1000);
+
+  return null;
+});
+
+export default ChangelogModal;

package/src/features/User/UserPanel/useMenu.tsx

@@ -7,6 +7,7 @@ import {
   Cloudy,
   Download,
   Feather,
+  FileClockIcon,
   HardDriveDownload,
   HardDriveUpload,
   LifeBuoy,
@@ -174,15 +175,38 @@ export const useMenu = () => {
         },
       ].filter(Boolean) as ItemType[]);
 
-  const helps: MenuProps['items'] = hideDocs
-    ? []
-    : ([
-        showCloudPromotion && {
-          icon: <Icon icon={Cloudy} />,
-          key: 'cloud',
+  const helps: MenuProps['items'] = [
+    showCloudPromotion && {
+      icon: <Icon icon={Cloudy} />,
+      key: 'cloud',
+      label: (
+        <Link href={`${OFFICIAL_URL}?utm_source=${UTM_SOURCE}`} target={'_blank'}>
+          {t('userPanel.cloud', { name: LOBE_CHAT_CLOUD })}
+        </Link>
+      ),
+    },
+    {
+      icon: <Icon icon={FileClockIcon} />,
+      key: 'changelog',
+      label: <Link href={'/changelog'}>{t('changelog')}</Link>,
+    },
+    {
+      children: [
+        {
+          icon: <Icon icon={Book} />,
+          key: 'docs',
           label: (
-            <Link href={`${OFFICIAL_URL}?utm_source=${UTM_SOURCE}`} target={'_blank'}>
-              {t('userPanel.cloud', { name: LOBE_CHAT_CLOUD })}
+            <Link href={DOCUMENTS_REFER_URL} target={'_blank'}>
+              {t('userPanel.docs')}
+            </Link>
+          ),
+        },
+        {
+          icon: <Icon icon={Feather} />,
+          key: 'feedback',
+          label: (
+            <Link href={GITHUB_ISSUES} target={'_blank'}>
+              {t('userPanel.feedback')}
             </Link>
           ),
         },
@@ -196,56 +220,36 @@ export const useMenu = () => {
           ),
         },
         {
-          children: [
-            {
-              icon: <Icon icon={Book} />,
-              key: 'docs',
-              label: (
-                <Link href={DOCUMENTS_REFER_URL} target={'_blank'}>
-                  {t('userPanel.docs')}
-                </Link>
-              ),
-            },
-            {
-              icon: <Icon icon={Feather} />,
-              key: 'feedback',
-              label: (
-                <Link href={GITHUB_ISSUES} target={'_blank'}>
-                  {t('userPanel.feedback')}
-                </Link>
-              ),
-            },
-            {
-              icon: <Icon icon={Mail} />,
-              key: 'email',
-              label: (
-                <Link href={mailTo(EMAIL_SUPPORT)} target={'_blank'}>
-                  {t('userPanel.email')}
-                </Link>
-              ),
-            },
-          ],
-          icon: <Icon icon={LifeBuoy} />,
-          key: 'help',
-          label: t('userPanel.help'),
-        },
-        {
-          type: 'divider',
+          icon: <Icon icon={Mail} />,
+          key: 'email',
+          label: (
+            <Link href={mailTo(EMAIL_SUPPORT)} target={'_blank'}>
+              {t('userPanel.email')}
+            </Link>
+          ),
         },
-      ].filter(Boolean) as ItemType[]);
+      ],
+      icon: <Icon icon={LifeBuoy} />,
+      key: 'help',
+      label: t('userPanel.help'),
+    },
+    {
+      type: 'divider',
+    },
+  ].filter(Boolean) as ItemType[];
 
   const mainItems = [
     {
       type: 'divider',
     },
-    ...(isLogin ? settings : []),
     ...(isLoginWithClerk ? profile : []),
+    ...(isLogin ? settings : []),
     /* ↓ cloud slot ↓ */
 
     /* ↑ cloud slot ↑ */
     ...(canInstall ? pwa : []),
     ...data,
-    ...helps,
+    ...(!hideDocs ? helps : []),
   ].filter(Boolean) as MenuProps['items'];
 
   const logoutItems: MenuProps['items'] = isLoginWithAuth

package/src/features/User/__tests__/useMenu.test.tsx

@@ -1,13 +1,14 @@
 import { act, renderHook } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 
-import { useUserStore } from '@/store/user';
 import { ServerConfigStoreProvider } from '@/store/serverConfig';
+import { useUserStore } from '@/store/user';
 
 import { useMenu } from '../UserPanel/useMenu';
 
-const wrapper: React.JSXElementConstructor<{ children: React.ReactNode }> = ({ children }) =>
+const wrapper: React.JSXElementConstructor<{ children: React.ReactNode }> = ({ children }) => (
   <ServerConfigStoreProvider>{children}</ServerConfigStoreProvider>
+);
 
 // Mock dependencies
 vi.mock('next/link', () => ({
@@ -81,7 +82,7 @@ describe('useMenu', () => {
       expect(mainItems?.some((item) => item?.key === 'setting')).toBe(true);
       expect(mainItems?.some((item) => item?.key === 'import')).toBe(true);
       expect(mainItems?.some((item) => item?.key === 'export')).toBe(true);
-      expect(mainItems?.some((item) => item?.key === 'discord')).toBe(true);
+      expect(mainItems?.some((item) => item?.key === 'changelog')).toBe(true);
       expect(logoutItems.some((item) => item?.key === 'logout')).toBe(true);
     });
   });
@@ -101,7 +102,7 @@ describe('useMenu', () => {
       expect(mainItems?.some((item) => item?.key === 'setting')).toBe(true);
       expect(mainItems?.some((item) => item?.key === 'import')).toBe(true);
       expect(mainItems?.some((item) => item?.key === 'export')).toBe(true);
-      expect(mainItems?.some((item) => item?.key === 'discord')).toBe(true);
+      expect(mainItems?.some((item) => item?.key === 'changelog')).toBe(true);
       expect(logoutItems.some((item) => item?.key === 'logout')).toBe(true);
     });
   });
@@ -120,7 +121,7 @@ describe('useMenu', () => {
       expect(mainItems?.some((item) => item?.key === 'setting')).toBe(true);
       expect(mainItems?.some((item) => item?.key === 'import')).toBe(true);
       expect(mainItems?.some((item) => item?.key === 'export')).toBe(true);
-      expect(mainItems?.some((item) => item?.key === 'discord')).toBe(true);
+      expect(mainItems?.some((item) => item?.key === 'changelog')).toBe(true);
       expect(logoutItems.some((item) => item?.key === 'logout')).toBe(false);
     });
   });
@@ -139,7 +140,7 @@ describe('useMenu', () => {
       expect(mainItems?.some((item) => item?.key === 'setting')).toBe(false);
       expect(mainItems?.some((item) => item?.key === 'import')).toBe(false);
       expect(mainItems?.some((item) => item?.key === 'export')).toBe(false);
-      expect(mainItems?.some((item) => item?.key === 'discord')).toBe(true);
+      expect(mainItems?.some((item) => item?.key === 'changelog')).toBe(true);
       expect(logoutItems.some((item) => item?.key === 'logout')).toBe(false);
     });
   });

package/src/hooks/useInterceptingRoutes.ts

@@ -1,7 +1,6 @@
-import { useContext, useMemo } from 'react';
+import { useMemo } from 'react';
 import urlJoin from 'url-join';
 
-import { InterceptContext } from '@/app/@modal/features/InterceptingContext';
 import { INBOX_SESSION_ID } from '@/const/session';
 import { useIsMobile } from '@/hooks/useIsMobile';
 import { useQueryRoute } from '@/hooks/useQueryRoute';
@@ -45,7 +44,3 @@ export const useOpenChatSettings = (tab: ChatSettingsTabs = ChatSettingsTabs.Met
     }
   }, [openSettings, mobile, activeId, router, tab]);
 };
-
-export const useInterceptingRoutes = () => {
-  return useContext(InterceptContext);
-};

package/src/hooks/useShare.tsx

@@ -15,6 +15,7 @@ const stringifyHashtags = (hashtags: string[], joinfix: string = ',', prefix?: s
   if (prefix) hashtags = hashtags.map((tag) => prefix + camelCase(tag));
   return hashtags.filter(Boolean).join(joinfix);
 };
+
 export const useShare = ({
   url,
   title,

package/src/locales/default/changelog.ts

@@ -0,0 +1,18 @@
+export default {
+  actions: {
+    followOnX: '在 X 上关注我们',
+    subscribeToUpdates: '订阅更新',
+    versions: '版本详情',
+  },
+  addedWhileAway: '在您离开期间，我们带来了新的特性。',
+  allChangelog: '查看所有更新日志',
+  description: '持续追踪 {{appName}} 的新功能和改进',
+  pagination: {
+    older: '查看历史变更',
+    prev: '上一页',
+  },
+  readDetails: '阅读详情',
+  title: '更新日志',
+  versionDetails: '版本详情',
+  welcomeBack: '欢迎回来!',
+};

package/src/locales/default/common.ts

@@ -220,6 +220,7 @@ export default {
   pinOff: '取消置顶',
   privacy: '隐私政策',
   regenerate: '重新生成',
+  releaseNotes: '版本详情',
   rename: '重命名',
   reset: '重置',
   retry: '重试',

package/src/locales/default/index.ts

@@ -1,4 +1,5 @@
 import auth from './auth';
+import changelog from './changelog';
 import chat from './chat';
 import clerk from './clerk';
 import common from './common';
@@ -23,6 +24,7 @@ import welcome from './welcome';
 
 const resources = {
   auth,
+  changelog,
   chat,
   clerk,
   common,

package/src/locales/default/metadata.ts

@@ -1,4 +1,8 @@
 export default {
+  changelog: {
+    description: '持续追踪 {{appName}} 的新功能和改进',
+    title: '更新日志',
+  },
   chat: {
     description: '{{appName}} 带给你最好的 ChatGPT, Claude , Gemini, OLLaMA WebUI 使用体验',
     title: '{{appName}}：个人 AI 效能工具，给自己一个更聪明的大脑',

package/src/server/metadata.ts

@@ -18,8 +18,10 @@ export class Meta {
     tags,
     alternate,
     locale = DEFAULT_LANG,
+    canonical,
   }: {
     alternate?: boolean;
+    canonical?: string;
     description?: string;
     image?: string;
     locale?: Locales;
@@ -35,9 +37,9 @@ export class Meta {
     const siteTitle = title.includes(BRANDING_NAME) ? title : title + ` · ${BRANDING_NAME}`;
     return {
       alternates: {
-        canonical: getCanonicalUrl(
-          alternate ? qs.stringifyUrl({ query: { hl: locale }, url }) : url,
-        ),
+        canonical:
+          canonical ||
+          getCanonicalUrl(alternate ? qs.stringifyUrl({ query: { hl: locale }, url }) : url),
         languages: alternate ? this.genAlternateLocales(locale, url) : undefined,
       },
       description: formatedDescription,

package/src/server/routers/edge/appStatus.ts

@@ -0,0 +1,3 @@
+import { router } from '@/libs/trpc';
+
+export const appStatusRouter = router({});

package/src/server/routers/edge/index.ts

@@ -3,10 +3,12 @@
  */
 import { publicProcedure, router } from '@/libs/trpc';
 
+import { appStatusRouter } from './appStatus';
 import { configRouter } from './config';
 import { uploadRouter } from './upload';
 
 export const edgeRouter = router({
+  appStatus: appStatusRouter,
   config: configRouter,
   healthcheck: publicProcedure.query(() => "i'm live!"),
   upload: uploadRouter,

package/src/server/routers/lambda/agent.ts

@@ -101,7 +101,7 @@ export const agentRouter = router({
       if (!session) throw new Error('Session not found');
       const sessionId = session.id;
 
-      return await ctx.agentModel.findBySessionId(sessionId);
+      return ctx.agentModel.findBySessionId(sessionId);
     }),
 
   getKnowledgeBasesAndFiles: agentProcedure