@lobehub/chat 0.158.0 → 0.158.2

package/src/app/(main)/(mobile)/me/(home)/page.tsx

@@ -2,11 +2,21 @@ import { redirect } from 'next/navigation';
 import { Center } from 'react-layout-kit';
 
 import BrandWatermark from '@/components/BrandWatermark';
+import { metadataModule } from '@/server/metadata';
+import { translation } from '@/server/translation';
 import { isMobileDevice } from '@/utils/responsive';
 
 import Category from './features/Category';
 import UserBanner from './features/UserBanner';
 
+export const generateMetadata = async () => {
+  const { t } = await translation('common');
+  return metadataModule.generate({
+    title: t('tab.me'),
+    url: '/me',
+  });
+};
+
 const Page = () => {
   const mobile = isMobileDevice();
 

package/src/app/(main)/(mobile)/me/data/page.tsx

@@ -1,9 +1,19 @@
 import { redirect } from 'next/navigation';
 
+import { metadataModule } from '@/server/metadata';
+import { translation } from '@/server/translation';
 import { isMobileDevice } from '@/utils/responsive';
 
 import Category from './features/Category';
 
+export const generateMetadata = async () => {
+  const { t } = await translation('common');
+  return metadataModule.generate({
+    title: t('userPanel.data'),
+    url: '/me/data',
+  });
+};
+
 const Page = () => {
   const mobile = isMobileDevice();
 

package/src/app/(main)/(mobile)/me/profile/page.tsx

@@ -1,9 +1,20 @@
 import { redirect } from 'next/navigation';
 
+import { metadataModule } from '@/server/metadata';
+import { translation } from '@/server/translation';
 import { isMobileDevice } from '@/utils/responsive';
 
 import Category from './features/Category';
 
+export const generateMetadata = async () => {
+  const { t } = await translation('clerk');
+  return metadataModule.generate({
+    description: t('userProfile.navbar.title'),
+    title: t('userProfile.navbar.description'),
+    url: '/me/profile',
+  });
+};
+
 const Page = () => {
   const mobile = isMobileDevice();
 

package/src/app/(main)/(mobile)/me/settings/page.tsx

@@ -1,9 +1,20 @@
 import { redirect } from 'next/navigation';
 
+import { metadataModule } from '@/server/metadata';
+import { translation } from '@/server/translation';
 import { isMobileDevice } from '@/utils/responsive';
 
 import Category from './features/Category';
 
+export const generateMetadata = async () => {
+  const { t } = await translation('setting');
+  return metadataModule.generate({
+    description: t('header.desc'),
+    title: t('header.title'),
+    url: '/me/settings',
+  });
+};
+
 const Page = () => {
   const mobile = isMobileDevice();
 

package/src/app/(main)/chat/(workspace)/features/TelemetryNotification.tsx

@@ -19,7 +19,7 @@ import { preferenceSelectors } from '@/store/user/selectors';
 const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   container: css`
     position: absolute;
-    z-index: 100;
+    z-index: 1100;
     bottom: 16px;
     inset-inline-end: 20px;
 

package/src/app/(main)/chat/(workspace)/page.tsx

@@ -1,13 +1,33 @@
+import StructuredData from '@/components/StructuredData';
+import { ldModule } from '@/server/ld';
+import { metadataModule } from '@/server/metadata';
+import { translation } from '@/server/translation';
 import { isMobileDevice } from '@/utils/responsive';
 
 import PageTitle from '../features/PageTitle';
 import TelemetryNotification from './features/TelemetryNotification';
 
-const Page = () => {
+export const generateMetadata = async () => {
+  const { t } = await translation('metadata');
+  return metadataModule.generate({
+    description: t('chat.description'),
+    title: t('chat.title'),
+    url: '/chat',
+  });
+};
+
+const Page = async () => {
   const mobile = isMobileDevice();
+  const { t } = await translation('metadata');
+  const ld = ldModule.generate({
+    description: t('chat.description'),
+    title: t('chat.title'),
+    url: '/chat',
+  });
 
   return (
     <>
+      <StructuredData ld={ld} />
       <PageTitle />
       <TelemetryNotification mobile={mobile} />
     </>

package/src/app/(main)/market/page.tsx

@@ -1,6 +1,8 @@
 import { Flexbox } from 'react-layout-kit';
 
-import { getCanonicalUrl } from '@/const/url';
+import StructuredData from '@/components/StructuredData';
+import { ldModule } from '@/server/ld';
+import { metadataModule } from '@/server/metadata';
 import { translation } from '@/server/translation';
 import { isMobileDevice } from '@/utils/responsive';
 
@@ -9,18 +11,25 @@ import AgentSearchBar from './features/AgentSearchBar';
 import TagList from './features/TagList';
 
 export const generateMetadata = async () => {
-  const { t } = await translation('common');
-  return {
-    alternates: { canonical: getCanonicalUrl('/market') },
-    title: t('tab.market'),
-  };
+  const { t } = await translation('metadata');
+  return metadataModule.generate({
+    description: t('market.description'),
+    title: t('market.title'),
+    url: '/market',
+  });
 };
 
-const Page = () => {
+const Page = async () => {
   const mobile = isMobileDevice();
-
+  const { t } = await translation('metadata');
+  const ld = ldModule.generate({
+    description: t('market.description'),
+    title: t('market.title'),
+    url: '/market',
+  });
   return (
     <>
+      <StructuredData ld={ld} />
       <AgentSearchBar mobile={mobile} />
       <Flexbox gap={mobile ? 16 : 24}>
         <TagList />

package/src/app/(main)/profile/[[...slugs]]/page.tsx

@@ -1,13 +1,16 @@
+import { metadataModule } from '@/server/metadata';
 import { translation } from '@/server/translation';
 import { isMobileDevice } from '@/utils/responsive';
 
 import Client from './Client';
 
 export const generateMetadata = async () => {
-  const { t } = await translation('common');
-  return {
-    title: t('userButton.profile'),
-  };
+  const { t } = await translation('clerk');
+  return metadataModule.generate({
+    description: t('userProfile.navbar.title'),
+    title: t('userProfile.navbar.description'),
+    url: '/profile',
+  });
 };
 
 const Page = () => {

package/src/app/(main)/settings/about/page.tsx

@@ -1,3 +1,4 @@
+import { metadataModule } from '@/server/metadata';
 import { translation } from '@/server/translation';
 import { isMobileDevice } from '@/utils/responsive';
 
@@ -5,9 +6,11 @@ import Page from './index';
 
 export const generateMetadata = async () => {
   const { t } = await translation('setting');
-  return {
+  return metadataModule.generate({
+    description: t('header.desc'),
     title: t('tab.about'),
-  };
+    url: '/settings/about',
+  });
 };
 
 export default () => {

package/src/app/(main)/settings/agent/page.tsx

@@ -1,10 +1,12 @@
+import { metadataModule } from '@/server/metadata';
 import { translation } from '@/server/translation';
 
 export const generateMetadata = async () => {
   const { t } = await translation('setting');
-  return {
+  return metadataModule.generate({
+    description: t('header.desc'),
     title: t('tab.agent'),
-  };
+    url: '/settings/agent',
+  });
 };
-
 export { default } from './index';

package/src/app/(main)/settings/common/page.tsx

@@ -1,10 +1,12 @@
+import { metadataModule } from '@/server/metadata';
 import { translation } from '@/server/translation';
 
 export const generateMetadata = async () => {
   const { t } = await translation('setting');
-  return {
+  return metadataModule.generate({
+    description: t('header.desc'),
     title: t('tab.common'),
-  };
+    url: '/settings/common',
+  });
 };
-
 export { default } from './index';

package/src/app/(main)/settings/llm/page.tsx

@@ -1,15 +1,18 @@
 import { notFound } from 'next/navigation';
 
 import { serverFeatureFlags } from '@/config/server/featureFlags';
+import { metadataModule } from '@/server/metadata';
 import { translation } from '@/server/translation';
 
 import Page from './index';
 
 export const generateMetadata = async () => {
   const { t } = await translation('setting');
-  return {
+  return metadataModule.generate({
+    description: t('header.desc'),
     title: t('tab.llm'),
-  };
+    url: '/settings/llm',
+  });
 };
 
 export default () => {

package/src/app/(main)/settings/sync/page.tsx

@@ -1,6 +1,7 @@
 import { notFound } from 'next/navigation';
 
 import { serverFeatureFlags } from '@/config/server/featureFlags';
+import { metadataModule } from '@/server/metadata';
 import { translation } from '@/server/translation';
 import { gerServerDeviceInfo, isMobileDevice } from '@/utils/responsive';
 
@@ -8,11 +9,12 @@ import Page from './index';
 
 export const generateMetadata = async () => {
   const { t } = await translation('setting');
-  return {
+  return metadataModule.generate({
+    description: t('header.desc'),
     title: t('tab.sync'),
-  };
+    url: '/settings/sync',
+  });
 };
-
 export default () => {
   const enableWebrtc = serverFeatureFlags().enableWebrtc;
   if (!enableWebrtc) return notFound();

package/src/app/(main)/settings/tts/page.tsx

@@ -1,10 +1,12 @@
+import { metadataModule } from '@/server/metadata';
 import { translation } from '@/server/translation';
 
 export const generateMetadata = async () => {
   const { t } = await translation('setting');
-  return {
+  return metadataModule.generate({
+    description: t('header.desc'),
     title: t('tab.tts'),
-  };
+    url: '/settings/tts',
+  });
 };
-
 export { default } from './index';

package/src/app/(main)/welcome/page.tsx

@@ -1,21 +1,34 @@
-import { Metadata } from 'next';
-
-import { getCanonicalUrl } from '@/const/url';
+import StructuredData from '@/components/StructuredData';
+import { ldModule } from '@/server/ld';
+import { metadataModule } from '@/server/metadata';
+import { translation } from '@/server/translation';
 import { isMobileDevice } from '@/utils/responsive';
 
 import Actions from './features/Actions';
 import Hero from './features/Hero';
 import Logo from './features/Logo';
 
-export const metadata: Metadata = {
-  alternates: { canonical: getCanonicalUrl('/welcome') },
+export const generateMetadata = async () => {
+  const { t } = await translation('metadata');
+  return metadataModule.generate({
+    description: t('welcome.description'),
+    title: t('welcome.title'),
+    url: '/welcome',
+  });
 };
 
-const Page = () => {
+const Page = async () => {
   const mobile = isMobileDevice();
+  const { t } = await translation('metadata');
+  const ld = ldModule.generate({
+    description: t('welcome.description'),
+    title: t('welcome.title'),
+    url: '/welcome',
+  });
 
   return (
     <>
+      <StructuredData ld={ld} />
       <Logo mobile={mobile} />
       <Hero />
       <Actions mobile={mobile} />

package/src/app/layout.tsx

@@ -39,7 +39,7 @@ const RootLayout = async ({ children, modal }: RootLayoutProps) => {
 
 export default RootLayout;
 
-export { default as metadata } from './metadata';
+export { generateMetadata } from './metadata';
 
 export const generateViewport = async (): ResolvingViewport => {
   const isMobile = isMobileDevice();

package/src/app/metadata.ts

@@ -3,11 +3,9 @@ import { Metadata } from 'next';
 import { getClientConfig } from '@/config/client';
 import { getServerConfig } from '@/config/server';
 import { OFFICIAL_URL } from '@/const/url';
-
-import pkg from '../../package.json';
+import { translation } from '@/server/translation';
 
 const title = 'LobeChat';
-const { description, homepage } = pkg;
 
 const { SITE_URL = OFFICIAL_URL } = getServerConfig();
 const { BASE_PATH } = getClientConfig();
@@ -15,55 +13,47 @@ const { BASE_PATH } = getClientConfig();
 // if there is a base path, then we don't need the manifest
 const noManifest = !!BASE_PATH;
 
-const metadata: Metadata = {
-  appleWebApp: {
-    statusBarStyle: 'black-translucent',
-    title,
-  },
-  description,
-  icons: {
-    apple: '/icons/apple-touch-icon.png',
-    icon: '/favicon.ico',
-    shortcut: '/favicon-32x32.ico',
-  },
-  manifest: noManifest ? undefined : '/manifest.json',
-  metadataBase: new URL(SITE_URL),
-  openGraph: {
-    description: description,
-    images: [
-      {
-        alt: title,
-        height: 360,
-        url: 'https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/og-480x270.png',
-        width: 480,
-      },
-      {
-        alt: title,
-        height: 720,
-        url: 'https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/og-960x540.png',
-        width: 960,
-      },
-    ],
-    locale: 'en-US',
-    siteName: title,
-    title: title,
-    type: 'website',
-    url: homepage,
-  },
-
-  title: {
-    default: title,
-    template: '%s · LobeChat',
-  },
-  twitter: {
-    card: 'summary_large_image',
-    description,
-    images: [
-      'https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/og-960x540.png',
-    ],
-    site: '@lobehub',
-    title,
-  },
+export const generateMetadata = async (): Promise<Metadata> => {
+  const { t } = await translation('metadata');
+  return {
+    appleWebApp: {
+      statusBarStyle: 'black-translucent',
+      title,
+    },
+    description: t('chat.description'),
+    icons: {
+      apple: '/icons/apple-touch-icon.png',
+      icon: '/favicon.ico',
+      shortcut: '/favicon-32x32.ico',
+    },
+    manifest: noManifest ? undefined : '/manifest.json',
+    metadataBase: new URL(SITE_URL),
+    openGraph: {
+      description: t('chat.description'),
+      images: [
+        {
+          alt: t('chat.title'),
+          height: 640,
+          url: '/og/cover.png',
+          width: 1200,
+        },
+      ],
+      locale: 'en-US',
+      siteName: title,
+      title: title,
+      type: 'website',
+      url: OFFICIAL_URL,
+    },
+    title: {
+      default: t('chat.title'),
+      template: '%s · LobeChat',
+    },
+    twitter: {
+      card: 'summary_large_image',
+      description: t('chat.description'),
+      images: ['/og/cover.png'],
+      site: '@lobehub',
+      title: t('chat.title'),
+    },
+  };
 };
-
-export default metadata;

package/src/app/page.tsx

@@ -5,6 +5,10 @@ import { getCanonicalUrl } from '@/const/url';
 import Client from './(loading)/Client';
 import Redirect from './(loading)/Redirect';
 
+export const metadata: Metadata = {
+  alternates: { canonical: getCanonicalUrl('/') },
+};
+
 const Page = () => {
   return (
     <>
@@ -17,7 +21,3 @@ const Page = () => {
 Page.displayName = 'Loading';
 
 export default Page;
-
-export const metadata: Metadata = {
-  alternates: { canonical: getCanonicalUrl('/') },
-};

package/src/components/StructuredData/index.tsx

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+
+const StructuredData: FC<{ ld: any }> = ({ ld }) => {
+  return (
+    <script
+      dangerouslySetInnerHTML={{ __html: JSON.stringify(ld) }}
+      id="structured-data"
+      type="application/ld+json"
+    />
+  );
+};
+export default StructuredData;

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

@@ -3,6 +3,7 @@ import { Badge } from 'antd';
 import {
   Book,
   CircleUserRound,
+  Download,
   Feather,
   HardDriveDownload,
   HardDriveUpload,
@@ -22,6 +23,7 @@ import type { MenuProps } from '@/components/Menu';
 import { DISCORD, DOCUMENTS, EMAIL_SUPPORT, GITHUB_ISSUES } from '@/const/url';
 import DataImporter from '@/features/DataImporter';
 import { useOpenSettings } from '@/hooks/useInterceptingRoutes';
+import { usePWAInstall } from '@/hooks/usePWAInstall';
 import { useQueryRoute } from '@/hooks/useQueryRoute';
 import { configService } from '@/services/config';
 import { SettingsTabs } from '@/store/global/initialState';
@@ -54,6 +56,7 @@ const NewVersionBadge = memo(
 
 export const useMenu = () => {
   const router = useQueryRoute();
+  const { canInstall, install } = usePWAInstall();
   const hasNewVersion = useNewVersion();
   const openSettings = useOpenSettings();
   const { t } = useTranslation(['common', 'setting', 'auth']);
@@ -96,6 +99,18 @@ export const useMenu = () => {
     },
   ];
 
+  const pwa: MenuProps['items'] = [
+    {
+      icon: <Icon icon={Download} />,
+      key: 'pwa',
+      label: t('installPWA'),
+      onClick: () => install(),
+    },
+    {
+      type: 'divider',
+    },
+  ];
+
   const data: MenuProps['items'] = [
     {
       icon: <Icon icon={HardDriveUpload} />,
@@ -192,6 +207,7 @@ export const useMenu = () => {
     },
     ...(isLoginWithClerk ? profile : []),
     ...(isLogin ? settings : []),
+    ...(canInstall ? pwa : []),
     ...(isLogin ? data : []),
     ...helps,
   ].filter(Boolean) as MenuProps['items'];

package/src/hooks/usePWAInstall.ts

@@ -0,0 +1,18 @@
+import { pwaInstallHandler } from 'pwa-install-handler';
+import { useEffect, useState } from 'react';
+
+export const usePWAInstall = () => {
+  const [canInstall, setCanInstall] = useState(false);
+
+  useEffect(() => {
+    pwaInstallHandler.addListener(setCanInstall);
+    return () => {
+      pwaInstallHandler.removeListener(setCanInstall);
+    };
+  }, []);
+
+  return {
+    canInstall,
+    install: pwaInstallHandler.install,
+  };
+};

package/src/locales/default/common.ts

@@ -59,6 +59,7 @@ export default {
     },
     title: '导入数据',
   },
+  installPWA: '安装浏览器应用 (PWA)',
   lang: {
     'ar': '阿拉伯语',
     'bg-BG': '保加利亚语',
@@ -138,13 +139,13 @@ export default {
     title: '同步状态',
     unconnected: { tip: '信令服务器连接失败，将无法建立点对点通信频道，请检查网络后重试' },
   },
+
   tab: {
     chat: '会话',
     market: '发现',
     me: '我',
     setting: '设置',
   },
-
   telemetry: {
     allow: '允许',
     deny: '拒绝',

package/src/locales/default/index.ts

@@ -6,6 +6,7 @@ import common from './common';
 import components from './components';
 import error from './error';
 import market from './market';
+import metadata from './metadata';
 import migration from './migration';
 import modelProvider from './modelProvider';
 import plugin from './plugin';
@@ -20,6 +21,7 @@ const resources = {
   components,
   error,
   market,
+  metadata,
   migration,
   modelProvider,
   plugin,

package/src/locales/default/metadata.ts

@@ -0,0 +1,20 @@
+export default {
+  chat: {
+    description: 'LobeChat 带给你最好的 ChatGPT, OLLaMA, Gemini, Claude WebUI 使用体验',
+    title: 'LobeChat：个人 LLM 效能工具，给自己一个更聪明的大脑',
+  },
+  market: {
+    description:
+      '内容创作、文案、问答、图像生成、视频生成、语音生成、智能 Agent、自动化工作流，定制你专属的 AI / GPTs / OLLaMA 智能助手',
+    title: '助手市场',
+  },
+  plugins: {
+    description:
+      '搜素、图表生成、学术、图像生成、视频生成、语音生成、自动化工作流，定制 ChatGPT / OLLaMA 专属的 ToolCall 插件能力',
+    title: '插件市场',
+  },
+  welcome: {
+    description: 'LobeChat 带给你最好的 ChatGPT, OLLaMA, Gemini, Claude WebUI 使用体验',
+    title: '欢迎使用 LobeChat：个人 LLM 效能工具，给自己一个更聪明的大脑',
+  },
+};