@lobehub/chat 0.160.4 → 0.160.6

package/src/app/(main)/market/_layout/Desktop/index.tsx

@@ -10,29 +10,33 @@ import Hero from './Hero';
 
 const Layout = ({ children, detail }: LayoutProps) => {
   return (
-    <Flexbox
-      height={'100%'}
-      id={'lobe-market-container'}
-      style={{ position: 'relative' }}
-      width={'100%'}
-    >
-      <Header />
-      <Flexbox height={'100%'} horizontal style={{ position: 'relative' }} width={'100%'}>
-        <Flexbox
-          align={'center'}
-          flex={1}
-          padding={16}
-          style={{ overflowX: 'hidden', overflowY: 'scroll', position: 'relative' }}
-        >
-          <SafeSpacing />
-          <Flexbox gap={16} style={{ maxWidth: MAX_WIDTH, position: 'relative', width: '100%' }}>
-            <Hero />
-            {children}
+    <>
+      <Flexbox
+        height={'100%'}
+        id={'lobe-market-container'}
+        style={{ position: 'relative' }}
+        width={'100%'}
+      >
+        <Header />
+        <Flexbox height={'100%'} horizontal style={{ position: 'relative' }} width={'100%'}>
+          <Flexbox
+            align={'center'}
+            flex={1}
+            padding={16}
+            style={{ overflowX: 'hidden', overflowY: 'scroll', position: 'relative' }}
+          >
+            <SafeSpacing />
+            <Flexbox gap={16} style={{ maxWidth: MAX_WIDTH, position: 'relative', width: '100%' }}>
+              <Hero />
+              {children}
+            </Flexbox>
           </Flexbox>
+          <DetailSidebar>{detail}</DetailSidebar>
         </Flexbox>
-        <DetailSidebar>{detail}</DetailSidebar>
       </Flexbox>
-    </Flexbox>
+      {/* ↓ cloud slot ↓ */}
+      {/* ↑ cloud slot ↑ */}
+    </>
   );
 };
 

package/src/app/(main)/settings/llm/Azure/index.tsx

@@ -95,6 +95,7 @@ const AzureOpenAIProvider = memo(() => {
         placeholder: t('azure.modelListPlaceholder'),
       }}
       provider={providerKey}
+      showBrowserRequest
       title={
         <Flexbox align={'center'} gap={8} horizontal>
           <Azure.Combine size={22} type={'color'}></Azure.Combine>

package/src/app/(main)/settings/llm/OpenAI/index.tsx

@@ -20,7 +20,6 @@ const OpenAIProvider = memo(() => {
         }
       }
       showApiKey={showOpenAIApiKey}
-      showBrowserRequest
       title={<OpenAI.Combine size={24} />}
     />
   );

package/src/app/layout.tsx

@@ -10,6 +10,8 @@ import AuthProvider from '@/layout/AuthProvider';
 import GlobalProvider from '@/layout/GlobalProvider';
 import { isMobileDevice } from '@/utils/responsive';
 
+const inVercel = process.env.VERCEL === '1';
+
 type RootLayoutProps = {
   children: ReactNode;
   modal: ReactNode;
@@ -31,7 +33,7 @@ const RootLayout = async ({ children, modal }: RootLayoutProps) => {
           </AuthProvider>
         </GlobalProvider>
         <Analytics />
-        <SpeedInsights />
+        {inVercel && <SpeedInsights />}
       </body>
     </html>
   );

package/src/app/trpc/edge/[trpc]/route.ts

@@ -18,7 +18,7 @@ const handler = (req: NextRequest) =>
 
     onError: ({ error, path }) => {
       pino.info(`Error in tRPC handler (edge) on path: ${path}`);
-      pino.error(error);
+      console.error(error);
     },
 
     req,

package/src/components/Analytics/Clarity.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import Script from 'next/script';
+import { memo } from 'react';
+
+interface ClarityProps {
+  projectId?: string;
+}
+
+const Clarity = memo<ClarityProps>(
+  ({ projectId }) =>
+    projectId && (
+      <Script
+        dangerouslySetInnerHTML={{
+          __html: `
+              (function(c,l,a,r,i,t,y){
+                  c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+                  t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+                  y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+              })(window, document, "clarity", "script", "${projectId}");
+            `,
+        }}
+        id="clarity-script"
+      />
+    ),
+);
+
+export default Clarity;

package/src/components/Analytics/Google.tsx

@@ -1,14 +1,7 @@
 import { GoogleAnalytics as GA } from '@next/third-parties/google';
 
-import { getServerConfig } from '@/config/server';
+import { analyticsEnv } from '@/config/analytics';
 
-const { GOOGLE_ANALYTICS_MEASUREMENT_ID, ENABLE_GOOGLE_ANALYTICS } = getServerConfig();
-
-if (ENABLE_GOOGLE_ANALYTICS && !GOOGLE_ANALYTICS_MEASUREMENT_ID)
-  throw new Error(
-    'You have enable the google analytics but not provided the google analytics id. Please provide the google analytics id in your env',
-  );
-
-const GoogleAnalytics = () => <GA gaId={GOOGLE_ANALYTICS_MEASUREMENT_ID!} />;
+const GoogleAnalytics = () => <GA gaId={analyticsEnv.GOOGLE_ANALYTICS_MEASUREMENT_ID!} />;
 
 export default GoogleAnalytics;

package/src/components/Analytics/Plausible.tsx

@@ -3,19 +3,14 @@
 import Script from 'next/script';
 import { memo } from 'react';
 
-import { getClientConfig } from '@/config/client';
+interface PlausibleAnalyticsProps {
+  domain?: string;
+  scriptBaseUrl: string;
+}
 
-const { PLAUSIBLE_DOMAIN, PLAUSIBLE_SCRIPT_BASE_URL } = getClientConfig();
-
-const PlausibleAnalytics = memo(
-  () =>
-    PLAUSIBLE_DOMAIN && (
-      <Script
-        data-domain={PLAUSIBLE_DOMAIN}
-        defer
-        src={`${PLAUSIBLE_SCRIPT_BASE_URL}/js/script.js`}
-      />
-    ),
+const PlausibleAnalytics = memo<PlausibleAnalyticsProps>(
+  ({ domain, scriptBaseUrl }) =>
+    domain && <Script data-domain={domain} defer src={`${scriptBaseUrl}/js/script.js`} />,
 );
 
 export default PlausibleAnalytics;

package/src/components/Analytics/Posthog.tsx

@@ -1,20 +1,19 @@
 'use client';
 
 import posthog from 'posthog-js';
-import { FC, memo, useEffect } from 'react';
+import { memo, useEffect } from 'react';
 
-import { getClientConfig } from '@/config/client';
+interface PostHogProps {
+  debug: boolean;
+  host: string;
+  token?: string;
+}
 
-const { POSTHOG_HOST, POSTHOG_KEY, POSTHOG_DEBUG } = getClientConfig();
-
-const PostHog: FC = memo(() => {
+const PostHog = memo<PostHogProps>(({ token, host, debug }) => {
   useEffect(() => {
-    if (!POSTHOG_KEY) return;
+    if (!token) return;
 
-    posthog.init(POSTHOG_KEY, {
-      api_host: POSTHOG_HOST ?? 'https://app.posthog.com',
-      debug: POSTHOG_DEBUG,
-    });
+    posthog.init(token, { api_host: host, debug });
   }, []);
 
   return null;

package/src/components/Analytics/Umami.tsx

@@ -3,13 +3,14 @@
 import Script from 'next/script';
 import { memo } from 'react';
 
-import { getClientConfig } from '@/config/client';
+interface UmamiAnalyticsProps {
+  scriptUrl: string;
+  websiteId?: string;
+}
 
-const { UMAMI_SCRIPT_URL, UMAMI_WEBSITE_ID } = getClientConfig();
-
-const UmamiAnalytics = memo(
-  () =>
-    UMAMI_WEBSITE_ID && <Script data-website-id={UMAMI_WEBSITE_ID} defer src={UMAMI_SCRIPT_URL} />,
+const UmamiAnalytics = memo<UmamiAnalyticsProps>(
+  ({ scriptUrl, websiteId }) =>
+    websiteId && <Script data-website-id={websiteId} defer src={scriptUrl} />,
 );
 
 export default UmamiAnalytics;

package/src/components/Analytics/Vercel.tsx

@@ -1,10 +1,8 @@
 import { Analytics } from '@vercel/analytics/react';
 import { memo } from 'react';
 
-import { getServerConfig } from '@/config/server';
+import { analyticsEnv } from '@/config/analytics';
 
-const { VERCEL_DEBUG } = getServerConfig();
-
-const VercelAnalytics = memo(() => <Analytics debug={VERCEL_DEBUG} />);
+const VercelAnalytics = memo(() => <Analytics debug={analyticsEnv.DEBUG_VERCEL_ANALYTICS} />);
 
 export default VercelAnalytics;

package/src/components/Analytics/index.tsx

@@ -1,27 +1,42 @@
 import dynamic from 'next/dynamic';
 
-import { getClientConfig } from '@/config/client';
-import { getServerConfig } from '@/config/server';
+import { analyticsEnv } from '@/config/analytics';
 
 import Google from './Google';
 import Vercel from './Vercel';
 
-const Plausible = dynamic(() => import('./Plausible'), { ssr: false });
-const Posthog = dynamic(() => import('./Posthog'), { ssr: false });
-const Umami = dynamic(() => import('./Umami'), { ssr: false });
-
-const { ANALYTICS_POSTHOG, ANALYTICS_PLAUSIBLE, ANALYTICS_UMAMI } = getClientConfig();
-
-const { ENABLE_VERCEL_ANALYTICS, ENABLE_GOOGLE_ANALYTICS } = getServerConfig();
+const Plausible = dynamic(() => import('./Plausible'));
+const Posthog = dynamic(() => import('./Posthog'));
+const Umami = dynamic(() => import('./Umami'));
+const Clarity = dynamic(() => import('./Clarity'));
 
 const Analytics = () => {
   return (
     <>
-      {ENABLE_VERCEL_ANALYTICS && <Vercel />}
-      {ENABLE_GOOGLE_ANALYTICS && <Google />}
-      {ANALYTICS_PLAUSIBLE && <Plausible />}
-      {ANALYTICS_POSTHOG && <Posthog />}
-      {ANALYTICS_UMAMI && <Umami />}
+      {analyticsEnv.ENABLE_VERCEL_ANALYTICS && <Vercel />}
+      {analyticsEnv.ENABLE_GOOGLE_ANALYTICS && <Google />}
+      {analyticsEnv.ENABLED_PLAUSIBLE_ANALYTICS && (
+        <Plausible
+          domain={analyticsEnv.PLAUSIBLE_DOMAIN}
+          scriptBaseUrl={analyticsEnv.PLAUSIBLE_SCRIPT_BASE_URL}
+        />
+      )}
+      {analyticsEnv.ENABLED_POSTHOG_ANALYTICS && (
+        <Posthog
+          debug={analyticsEnv.DEBUG_POSTHOG_ANALYTICS}
+          host={analyticsEnv.POSTHOG_HOST!}
+          token={analyticsEnv.POSTHOG_KEY}
+        />
+      )}
+      {analyticsEnv.ENABLED_UMAMI_ANALYTICS && (
+        <Umami
+          scriptUrl={analyticsEnv.UMAMI_SCRIPT_URL}
+          websiteId={analyticsEnv.UMAMI_WEBSITE_ID}
+        />
+      )}
+      {analyticsEnv.ENABLED_CLARITY_ANALYTICS && (
+        <Clarity projectId={analyticsEnv.CLARITY_PROJECT_ID} />
+      )}
     </>
   );
 };

package/src/components/FetchErrorNotification/Description.tsx

@@ -0,0 +1,48 @@
+import { Icon } from '@lobehub/ui';
+import { Skeleton } from 'antd';
+import { css, cx } from 'antd-style';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import dynamic from 'next/dynamic';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+const container = css`
+  pre.shiki {
+    padding: 8px !important;
+  }
+`;
+
+const Highlighter = dynamic(() => import('@lobehub/ui/es/Highlighter'), {
+  loading: () => <Skeleton avatar={false} title={false} />,
+  ssr: false,
+});
+
+const Description = memo<{ message: string; status: number }>(({ message, status }) => {
+  const { t } = useTranslation('error');
+  const [show, setShow] = useState(false);
+  return (
+    <Flexbox gap={8}>
+      {t(`response.${status}` as any)}
+      <Flexbox
+        gap={4}
+        horizontal
+        onClick={() => {
+          setShow(!show);
+        }}
+        style={{ cursor: 'pointer', fontSize: 12 }}
+      >
+        {t('fetchErrorDetail')} <Icon icon={show ? ChevronUp : ChevronDown} />
+      </Flexbox>
+      <Highlighter
+        className={cx(container)}
+        language={'text'}
+        style={{ display: show ? undefined : 'none', maxHeight: 80 }}
+      >
+        {message}
+      </Highlighter>
+    </Flexbox>
+  );
+});
+
+export default Description;

package/src/components/FetchErrorNotification/index.tsx

@@ -0,0 +1,15 @@
+import { t } from 'i18next';
+
+import { notification } from '@/components/AntdStaticMethods';
+
+import Description from './Description';
+
+export const fetchErrorNotification = {
+  error: ({ status, errorMessage }: { errorMessage: string; status: number }) => {
+    notification.error({
+      description: <Description message={errorMessage} status={status} />,
+      message: t('fetchError', { ns: 'error' }),
+      type: 'error',
+    });
+  },
+};

package/src/components/ModelProviderIcon/index.tsx

@@ -16,6 +16,7 @@ import {
   ZeroOne,
   Zhipu,
 } from '@lobehub/icons';
+import { Logo } from '@lobehub/ui';
 import { memo } from 'react';
 import { Center } from 'react-layout-kit';
 
@@ -27,6 +28,10 @@ interface ModelProviderIconProps {
 
 const ModelProviderIcon = memo<ModelProviderIconProps>(({ provider }) => {
   switch (provider) {
+    case 'lobehub': {
+      return <Logo size={20} />;
+    }
+
     case ModelProvider.ZhiPu: {
       return <Zhipu size={20} />;
     }
@@ -38,7 +43,7 @@ const ModelProviderIcon = memo<ModelProviderIconProps>(({ provider }) => {
     case ModelProvider.DeepSeek: {
       return <DeepSeek size={20} />;
     }
-    
+
     case ModelProvider.Google: {
       return (
         <Center height={20} width={20}>

package/src/components/Notification/index.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import { ActionIcon } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { XIcon } from 'lucide-react';
+import { rgba } from 'polished';
+import { memo } from 'react';
+import { Flexbox, FlexboxProps } from 'react-layout-kit';
+
+const useStyles = createStyles(({ css, token, isDarkMode }) => ({
+  cancelIcon: css`
+    position: absolute;
+    z-index: 100;
+    top: 8px;
+    right: 8px;
+  `,
+  container: css`
+    position: absolute;
+    z-index: 1100;
+    bottom: 16px;
+    inset-inline-end: 20px;
+
+    overflow: hidden;
+
+    background: ${token.colorBgContainer};
+    border: 1px solid ${token.colorSplit};
+    border-radius: 8px;
+    box-shadow: ${token.boxShadowSecondary};
+  `,
+  mobileContainer: css`
+    bottom: 8px;
+    inset-inline-start: 8px;
+  `,
+  wrapper: css`
+    background: linear-gradient(
+        180deg,
+        ${rgba(token.colorBgContainer, 0)},
+        ${token.colorBgContainer} ${isDarkMode ? '80' : '140'}px
+      ),
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cg fill='${token.colorFillTertiary}' %3E %3Cpolygon fill-rule='evenodd' points='8 4 12 6 8 8 6 12 4 8 0 6 4 4 6 0 8 4'/%3E%3C/g%3E%3C/svg%3E");
+  `,
+}));
+
+interface NotificationProps extends FlexboxProps {
+  height?: number | string;
+  mobile?: boolean;
+  onCancel?: (show?: boolean) => void;
+  show: boolean;
+  showCloseIcon?: boolean;
+  width?: number | string;
+  wrapper?: FlexboxProps;
+}
+
+const Notification = memo<NotificationProps>(
+  ({
+    mobile,
+    children,
+    show,
+    onCancel,
+    showCloseIcon = true,
+    width = 422,
+    height = 'auto',
+    wrapper = {},
+    className,
+    ...rest
+  }) => {
+    const { styles, cx } = useStyles();
+    const { className: wrapperClassName, ...restWrapper } = wrapper;
+    return (
+      show && (
+        <Flexbox
+          className={cx(styles.container, mobile && styles.mobileContainer, className)}
+          height={height}
+          width={mobile ? 'calc(100% - 16px)' : width}
+          {...rest}
+        >
+          {showCloseIcon && (
+            <ActionIcon className={styles.cancelIcon} icon={XIcon} onClick={() => onCancel?.()} />
+          )}
+          <Flexbox
+            className={cx(styles.wrapper, wrapperClassName)}
+            gap={16}
+            horizontal
+            padding={'20px 20px 16px'}
+            {...restWrapper}
+          >
+            {children}
+          </Flexbox>
+        </Flexbox>
+      )
+    );
+  },
+);
+
+export default Notification;

package/src/config/__tests__/analytics.test.ts

@@ -0,0 +1,70 @@
+// @vitest-environment node
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { analyticsEnv, getAnalyticsConfig } from '../analytics';
+
+beforeEach(() => {
+  // 在每个测试用例之前,清除所有的 console.warn mock
+  console.warn = vi.fn();
+});
+
+afterEach(() => {
+  // 在每个测试用例之后,恢复所有的环境变量
+  vi.resetModules();
+});
+
+describe('getAnalyticsConfig', () => {
+  it('should return the correct analytics config', () => {
+    // 设置环境变量
+    process.env.PLAUSIBLE_DOMAIN = 'example.com';
+    process.env.POSTHOG_KEY = 'posthog_key';
+    process.env.UMAMI_WEBSITE_ID = 'umami_id';
+    process.env.CLARITY_PROJECT_ID = 'clarity_id';
+    process.env.ENABLE_VERCEL_ANALYTICS = '1';
+    process.env.GOOGLE_ANALYTICS_MEASUREMENT_ID = 'ga_id';
+
+    const config = getAnalyticsConfig();
+
+    expect(config).toEqual({
+      ENABLED_PLAUSIBLE_ANALYTICS: true,
+      PLAUSIBLE_DOMAIN: 'example.com',
+      PLAUSIBLE_SCRIPT_BASE_URL: 'https://plausible.io',
+      ENABLED_POSTHOG_ANALYTICS: true,
+      POSTHOG_KEY: 'posthog_key',
+      POSTHOG_HOST: 'https://app.posthog.com',
+      DEBUG_POSTHOG_ANALYTICS: false,
+      ENABLED_UMAMI_ANALYTICS: true,
+      UMAMI_SCRIPT_URL: 'https://analytics.umami.is/script.js',
+      UMAMI_WEBSITE_ID: 'umami_id',
+      ENABLED_CLARITY_ANALYTICS: true,
+      CLARITY_PROJECT_ID: 'clarity_id',
+      ENABLE_VERCEL_ANALYTICS: true,
+      DEBUG_VERCEL_ANALYTICS: false,
+      ENABLE_GOOGLE_ANALYTICS: true,
+      GOOGLE_ANALYTICS_MEASUREMENT_ID: 'ga_id',
+    });
+  });
+
+  it('should use deprecated env vars and log warnings', () => {
+    process.env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN = 'deprecated.com';
+    process.env.NEXT_PUBLIC_POSTHOG_KEY = 'deprecated_key';
+    process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID = 'deprecated_id';
+
+    const config = getAnalyticsConfig();
+
+    expect(config.ENABLED_PLAUSIBLE_ANALYTICS).toBeTruthy();
+    expect(config.ENABLED_POSTHOG_ANALYTICS).toBeTruthy();
+    expect(config.ENABLED_UMAMI_ANALYTICS).toBeTruthy();
+
+    expect(console.warn).toHaveBeenCalledTimes(3);
+    expect(console.warn).toHaveBeenCalledWith(
+      'NEXT_PUBLIC_PLAUSIBLE_DOMAIN is deprecated. Please use PLAUSIBLE_DOMAIN instead. We will remove it in LobeChat 1.0',
+    );
+    expect(console.warn).toHaveBeenCalledWith(
+      'NEXT_PUBLIC_POSTHOG_KEY is deprecated. Please use POSTHOG_KEY instead. We will remove it in LobeChat 1.0',
+    );
+    expect(console.warn).toHaveBeenCalledWith(
+      'NEXT_PUBLIC_UMAMI_WEBSITE_ID is deprecated. Please use UMAMI_WEBSITE_ID instead. We will remove it in LobeChat 1.0',
+    );
+  });
+});

package/src/config/__tests__/client.test.ts

@@ -18,9 +18,6 @@ describe('getClientConfig', () => {
     process.env.NEXT_PUBLIC_I18N_DEBUG_SERVER = '1';
 
     const config = getClientConfig();
-    expect(config.ANALYTICS_PLAUSIBLE).toBe(true);
-    expect(config.ANALYTICS_POSTHOG).toBe(true);
-    expect(config.POSTHOG_DEBUG).toBe(true);
     expect(config.I18N_DEBUG).toBe(true);
     expect(config.I18N_DEBUG_BROWSER).toBe(true);
     expect(config.I18N_DEBUG_SERVER).toBe(true);
@@ -36,9 +33,6 @@ describe('getClientConfig', () => {
 
     const config = getClientConfig();
 
-    expect(config.ANALYTICS_PLAUSIBLE).toBe(false);
-    expect(config.ANALYTICS_POSTHOG).toBe(false);
-    expect(config.POSTHOG_DEBUG).toBe(false);
     expect(config.I18N_DEBUG).toBe(false);
     expect(config.I18N_DEBUG_BROWSER).toBe(false);
     expect(config.I18N_DEBUG_SERVER).toBe(false);