@lobehub/chat 0.157.2 → 0.158.1

package/src/server/ld.ts

@@ -0,0 +1,218 @@
+import urlJoin from 'url-join';
+
+import { getServerConfig } from '@/config/server';
+import { EMAIL_BUSINESS, EMAIL_SUPPORT, OFFICIAL_SITE, OFFICIAL_URL, X } from '@/const/url';
+
+import pkg from '../../package.json';
+
+const { SITE_URL = OFFICIAL_URL } = getServerConfig();
+const LAST_MODIFIED = new Date().toISOString();
+export const AUTHOR_LIST = {
+  arvinxx: {
+    avatar: 'https://avatars.githubusercontent.com/u/28616219?v=4',
+    desc: 'Founder, Design Engineer',
+    name: 'Arvin Xu',
+    url: 'https://github.com/arvinxx',
+  },
+  canisminor: {
+    avatar: 'https://avatars.githubusercontent.com/u/17870709?v=4',
+    desc: 'Founder, Design Engineer',
+    name: 'CanisMinor',
+    url: 'https://github.com/arvinxx',
+  },
+  lobehub: {
+    avatar: 'https://avatars.githubusercontent.com/u/131470832?v=4',
+    desc: 'Official Account',
+    name: 'LobeHub',
+    url: 'https://github.com/lobehub',
+  },
+};
+
+class Ld {
+  generate({
+    image = '/og/cover.png',
+    url,
+    title,
+    description,
+    date,
+    webpage = {
+      enable: true,
+    },
+  }: {
+    date?: string;
+    description: string;
+    image?: string;
+    title: string;
+    url: string;
+    webpage?: {
+      enable?: boolean;
+      search?: boolean;
+    };
+  }) {
+    return {
+      '@context': 'https://schema.org',
+      '@graph': [
+        this.genWebSite(),
+        webpage?.enable &&
+          this.genWebPage({
+            ...webpage,
+            date,
+            description,
+            image,
+            title,
+            url,
+          }),
+        image && this.genImageObject({ image, url }),
+        this.genOrganization(),
+      ].filter(Boolean),
+    };
+  }
+
+  genOrganization() {
+    return {
+      '@id': this.getId(SITE_URL, '#organization'),
+      '@type': 'Organization',
+      'alternateName': 'LobeChat',
+      'contactPoint': {
+        '@type': 'ContactPoint',
+        'contactType': 'customer support',
+        'email': EMAIL_SUPPORT,
+      },
+      'description':
+        'We are a group of e/acc design-engineers, hoping to provide modern design components and tools for AIGC, and creating a technology-driven forum, fostering knowledge interaction and the exchange of ideas that may culminate in mutual inspiration and collaborative innovation.',
+      'email': EMAIL_BUSINESS,
+      'founders': [this.getAuthors(['arvinxx']), this.getAuthors(['canisminor'])],
+      'image': urlJoin(OFFICIAL_SITE, '/icon-512x512.png'),
+      'logo': {
+        '@type': 'ImageObject',
+        'height': 512,
+        'url': urlJoin(OFFICIAL_SITE, '/icon-512x512.png'),
+        'width': 512,
+      },
+      'name': 'LobeHub',
+      'sameAs': [
+        X,
+        'https://github.com/lobehub',
+        'https://medium.com/@lobehub',
+        'https://www.youtube.com/@lobehub',
+      ],
+      'url': OFFICIAL_SITE,
+    };
+  }
+
+  getAuthors(ids: string[] = []) {
+    const defaultAuthor = {
+      '@id': this.getId(SITE_URL, '#organization'),
+      '@type': 'Organization',
+    };
+    if (!ids || ids.length === 0) return defaultAuthor;
+    if (ids.length === 1 && ids[0] === 'lobehub') return defaultAuthor;
+    const personId = ids.find((id) => id !== 'lobehub');
+    if (!personId) return defaultAuthor;
+    const person = (AUTHOR_LIST as any)?.[personId];
+    if (!person) return defaultAuthor;
+    return {
+      '@type': 'Person',
+      'name': person.name,
+      'url': person.url,
+    };
+  }
+
+  genWebPage({
+    date,
+    image,
+    search,
+    description,
+    title,
+    url,
+  }: {
+    breadcrumbs?: { title: string; url: string }[];
+    date?: string;
+    description: string;
+    image?: string;
+    search?: boolean;
+    title: string;
+    url: string;
+  }) {
+    const fixedUrl = this.fixUrl(url);
+    const dateCreated = date ? new Date(date).toISOString() : LAST_MODIFIED;
+    const dateModified = date ? new Date(date).toISOString() : LAST_MODIFIED;
+
+    const baseInfo: any = {
+      '@id': fixedUrl,
+      '@type': 'WebPage',
+      'about': {
+        '@id': this.getId(SITE_URL, '#organization'),
+      },
+      'breadcrumbs': {
+        '@id': this.getId(fixedUrl, '#breadcrumb'),
+      },
+      'dateModified': dateModified,
+      'datePublished': dateCreated,
+      'description': description,
+      'image': {
+        '@id': this.getId(fixedUrl, '#primaryimage'),
+      },
+      'inLanguage': 'en-US',
+      'isPartOf': {
+        '@id': this.getId(SITE_URL, '#website'),
+      },
+      'name': this.fixTitle(title),
+      'primaryImageOfPage': {
+        '@id': this.getId(fixedUrl, '#primaryimage'),
+      },
+      'thumbnailUrl': image,
+    };
+
+    if (search)
+      baseInfo.potentialAction = {
+        '@type': 'SearchAction',
+        'query-input': 'required name=search_term_string',
+        'target': `${fixedUrl}?q={search_term_string}`,
+      };
+
+    return baseInfo;
+  }
+
+  genImageObject({ image, url }: { image: string; url: string }) {
+    const fixedUrl = this.fixUrl(url);
+
+    return {
+      '@id': this.getId(fixedUrl, '#primaryimage'),
+      '@type': 'ImageObject',
+      'contentUrl': image,
+      'inLanguage': 'en-US',
+      'url': image,
+    };
+  }
+
+  genWebSite() {
+    const baseInfo: any = {
+      '@id': this.getId(SITE_URL, '#website'),
+      '@type': 'WebSite',
+      'description': pkg.description,
+      'inLanguage': 'en-US',
+      'name': 'LobeChat',
+      'publisher': {
+        '@id': this.getId(SITE_URL, '#organization'),
+      },
+      'url': SITE_URL,
+    };
+
+    return baseInfo;
+  }
+
+  private getId(url: string, id: string) {
+    return [url, id].join('/');
+  }
+
+  private fixTitle(title: string) {
+    return title.includes('LobeChat') ? title : `${title} · LobeChat`;
+  }
+
+  private fixUrl(url: string) {
+    return urlJoin(SITE_URL, url);
+  }
+}
+
+export const ldModule = new Ld();

package/src/server/metadata.ts

@@ -0,0 +1,96 @@
+import { Metadata } from 'next';
+
+import { getCanonicalUrl } from '@/const/url';
+import { formatDescLength, formatTitleLength } from '@/utils/genOG';
+
+export class Meta {
+  public generate({
+    description = 'LobeChat offers you the best ChatGPT, OLLaMA, Gemini, Claude WebUI user experience',
+    title,
+    image = '/og/cover.png',
+    url,
+    type = 'website',
+    tags,
+  }: {
+    description?: string;
+    image?: string;
+    tags?: string[];
+    title: string;
+    type?: 'website' | 'article';
+    url: string;
+  }): Metadata {
+    // eslint-disable-next-line no-param-reassign
+    const formatedTitle = formatTitleLength(title, 21);
+    // eslint-disable-next-line no-param-reassign
+    const formatedDescription = formatDescLength(description, tags);
+    const siteTitle = title.includes('LobeChat') ? title : title + ' · LobeChat';
+    return {
+      alternates: { canonical: getCanonicalUrl(url) },
+      description: formatedDescription,
+      openGraph: this.genOpenGraph({
+        description,
+        image,
+        title: siteTitle,
+        type,
+        url,
+      }),
+      other: {
+        robots: 'index,follow',
+      },
+      title: formatedTitle,
+      twitter: this.genTwitter({ description, image, title: siteTitle, url }),
+    };
+  }
+
+  private genTwitter({
+    description,
+    title,
+    image,
+    url,
+  }: {
+    description: string;
+    image: string;
+    title: string;
+    url: string;
+  }) {
+    return {
+      card: 'summary_large_image',
+      description,
+      images: [image],
+      site: '@lobehub',
+      title,
+      url,
+    };
+  }
+
+  private genOpenGraph({
+    description,
+    title,
+    image,
+    url,
+    type = 'website',
+  }: {
+    description: string;
+    image: string;
+    title: string;
+    type?: 'website' | 'article';
+    url: string;
+  }) {
+    return {
+      description,
+      images: [
+        {
+          alt: title,
+          url: image,
+        },
+      ],
+      locale: 'en-US',
+      siteName: 'LobeChat',
+      title,
+      type,
+      url,
+    };
+  }
+}
+
+export const metadataModule = new Meta();

package/src/server/translation.ts

@@ -16,5 +16,15 @@ export const translation = async (ns: NS) => {
   const file = readFileSync(filepath, 'utf8');
   const i18ns = JSON.parse(file);
 
-  return { t: (key: string) => get(i18ns, key) };
+  return {
+    t: (key: string, options: { [key: string]: string } = {}) => {
+      let content = get(i18ns, key);
+      if (options) {
+        Object.entries(options).forEach(([key, value]) => {
+          content = content.replace(`{{${key}}}`, value);
+        });
+      }
+      return content;
+    },
+  };
 };

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

@@ -1,6 +1,6 @@
 import { t } from 'i18next';
 
-import { enableAuth } from '@/const/auth';
+import { enableAuth, enableClerk } from '@/const/auth';
 import { UserStore } from '@/store/user';
 import { LobeUser } from '@/types/user';
 
@@ -43,4 +43,5 @@ const isLogin = (s: UserStore) => {
 export const authSelectors = {
   isLogin,
   isLoginWithAuth: (s: UserStore) => s.isSignedIn,
+  isLoginWithClerk: (s: UserStore) => s.isSignedIn && enableClerk,
 };

package/src/utils/genOG.ts

@@ -0,0 +1,20 @@
+export const formatTitleLength = (title: string, addOnLength: number = 0) => {
+  if (title.length > 60 - addOnLength) {
+    return title.slice(0, 57 - addOnLength) + '...';
+  } else {
+    return title;
+  }
+};
+
+export const formatDescLength = (desc: string, tags?: string[]): any => {
+  if (!desc) return;
+  if (desc.length > 160) {
+    return desc.slice(0, 157) + '...';
+  } else {
+    if (!tags) return desc;
+    const tagStr: string = tags ? tags.join(', ') : '';
+    const tagLength = 160 - desc.length - 3;
+    const newDesc = desc + tagStr.slice(0, tagLength) + (tagStr.length > tagLength ? '...' : '');
+    return newDesc.length <= 157 ? newDesc : newDesc + '...';
+  }
+};

package/src/app/(auth)/login/[[...login]]/PageTitle.tsx

@@ -1,13 +0,0 @@
-'use client';
-
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import PageTitle from '@/components/PageTitle';
-
-const Title = memo(() => {
-  const { t } = useTranslation('auth');
-
-  return <PageTitle title={t('login')} />;
-});
-export default Title;

package/src/app/(auth)/profile/[[...slugs]]/PageTitle.tsx

@@ -1,13 +0,0 @@
-'use client';
-
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import PageTitle from '@/components/PageTitle';
-
-const Title = memo(() => {
-  const { t } = useTranslation('auth');
-
-  return <PageTitle title={t('signup')} />;
-});
-export default Title;

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

@@ -1,14 +0,0 @@
-import { UserProfile } from '@clerk/nextjs';
-
-import PageTitle from './PageTitle';
-
-const Page = () => {
-  return (
-    <>
-      <PageTitle />
-      <UserProfile />
-    </>
-  );
-};
-
-export default Page;

package/src/app/(auth)/signup/[[...signup]]/PageTitle.tsx

@@ -1,13 +0,0 @@
-'use client';
-
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import PageTitle from '@/components/PageTitle';
-
-const Title = memo(() => {
-  const { t } = useTranslation('auth');
-
-  return <PageTitle title={t('signup')} />;
-});
-export default Title;

package/src/app/(main)/(mobile)/me/features/Cate.tsx

@@ -1,33 +0,0 @@
-'use client';
-
-import { useRouter } from 'next/navigation';
-import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-import urlJoin from 'url-join';
-
-import { useCategory } from '@/app/(main)/settings/hooks/useCategory';
-import Cell from '@/components/Cell';
-import Divider from '@/components/Cell/Divider';
-
-const SettingCate = memo(() => {
-  const settingItems = useCategory({ mobile: true });
-  const router = useRouter();
-
-  return (
-    <Flexbox width={'100%'}>
-      {settingItems?.map(({ key, icon, label, type }: any, index) => {
-        if (type === 'divider') return <Divider key={index} />;
-        return (
-          <Cell
-            icon={icon}
-            key={key}
-            label={label}
-            onClick={() => router.push(urlJoin('/settings', key))}
-          />
-        );
-      })}
-    </Flexbox>
-  );
-});
-
-export default SettingCate;

package/src/app/(main)/(mobile)/me/features/ExtraCate.tsx

@@ -1,24 +0,0 @@
-'use client';
-
-import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import Cell from '@/components/Cell';
-import Divider from '@/components/Cell/Divider';
-
-import { useExtraCate } from './useExtraCate';
-
-const ExtraCate = memo(() => {
-  const mainItems = useExtraCate();
-
-  return (
-    <Flexbox width={'100%'}>
-      {mainItems?.map(({ key, icon, label, type, onClick }: any, index) => {
-        if (type === 'divider') return <Divider key={index} />;
-        return <Cell icon={icon} key={key} label={label} onClick={onClick} />;
-      })}
-    </Flexbox>
-  );
-});
-
-export default ExtraCate;

package/src/app/(main)/(mobile)/me/features/useExtraCate.tsx

@@ -1,62 +0,0 @@
-import { DiscordIcon, Icon } from '@lobehub/ui';
-import { Book, Feather, HardDriveDownload, HardDriveUpload } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-
-import { type MenuProps } from '@/components/Menu';
-import { DISCORD, DOCUMENTS, FEEDBACK } from '@/const/url';
-import DataImporter from '@/features/DataImporter';
-import { configService } from '@/services/config';
-
-export const useExtraCate = () => {
-  const { t } = useTranslation(['common', 'setting']);
-
-  const iconSize = { fontSize: 20 };
-
-  const exports: MenuProps['items'] = [
-    {
-      icon: <Icon icon={HardDriveUpload} size={iconSize} />,
-      key: 'import',
-      label: <DataImporter>{t('import')}</DataImporter>,
-    },
-    {
-      icon: <Icon icon={HardDriveDownload} size={iconSize} />,
-      key: 'export',
-      label: t('export'),
-      onClick: configService.exportAll,
-    },
-    {
-      type: 'divider',
-    },
-  ];
-
-  const helps: MenuProps['items'] = [
-    {
-      icon: <Icon icon={Book} size={iconSize} />,
-      key: 'docs',
-      label: t('document'),
-      onClick: () => window.open(DOCUMENTS, '__blank'),
-    },
-    {
-      icon: <Icon icon={Feather} size={iconSize} />,
-      key: 'feedback',
-      label: t('feedback'),
-      onClick: () => window.open(FEEDBACK, '__blank'),
-    },
-    {
-      icon: <Icon icon={DiscordIcon} size={iconSize} />,
-      key: 'discord',
-      label: 'Discord',
-      onClick: () => window.open(DISCORD, '__blank'),
-    },
-  ];
-
-  const mainItems = [
-    {
-      type: 'divider',
-    },
-    ...exports,
-    ...helps,
-  ].filter(Boolean) as MenuProps['items'];
-
-  return mainItems;
-};

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

@@ -1,32 +0,0 @@
-import { redirect } from 'next/navigation';
-import { Center } from 'react-layout-kit';
-
-import BrandWatermark from '@/components/BrandWatermark';
-import Divider from '@/components/Cell/Divider';
-import DataStatistics from '@/features/User/DataStatistics';
-import UserInfo from '@/features/User/UserInfo';
-import { isMobileDevice } from '@/utils/responsive';
-
-import Cate from './features/Cate';
-import ExtraCate from './features/ExtraCate';
-
-const Page = () => {
-  const mobile = isMobileDevice();
-
-  if (!mobile) return redirect('/chat');
-
-  return (
-    <>
-      <UserInfo />
-      <DataStatistics paddingInline={12} style={{ paddingBottom: 6 }} />
-      <Divider />
-      <Cate />
-      <ExtraCate />
-      <Center padding={16}>
-        <BrandWatermark />
-      </Center>
-    </>
-  );
-};
-
-export default Page;