@lobehub/chat 0.160.5 → 0.160.6

package/CHANGELOG.md

@@ -2,6 +2,46 @@
 
 # Changelog
 
+### [Version 0.160.6](https://github.com/lobehub/lobe-chat/compare/v0.160.5...v0.160.6)
+
+<sup>Released on **2024-05-21**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Refactor a Notification component, refactor code, refactor message action, refactor the type, refactor user preference.
+
+#### 💄 Styles
+
+- **misc**: Add ENABLED_OPENAI env, add fetch error notification, improve openai fetch client switch, improve redirect when login.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Refactor a Notification component ([28db3d5](https://github.com/lobehub/lobe-chat/commit/28db3d5))
+- **misc**: Refactor code, closes [#2584](https://github.com/lobehub/lobe-chat/issues/2584) ([086244c](https://github.com/lobehub/lobe-chat/commit/086244c))
+- **misc**: Refactor message action ([224bd67](https://github.com/lobehub/lobe-chat/commit/224bd67))
+- **misc**: Refactor the type ([ddf1abf](https://github.com/lobehub/lobe-chat/commit/ddf1abf))
+- **misc**: Refactor user preference ([1823b0d](https://github.com/lobehub/lobe-chat/commit/1823b0d))
+
+#### Styles
+
+- **misc**: Add ENABLED_OPENAI env ([35f6230](https://github.com/lobehub/lobe-chat/commit/35f6230))
+- **misc**: Add fetch error notification ([0186b4b](https://github.com/lobehub/lobe-chat/commit/0186b4b))
+- **misc**: Improve openai fetch client switch ([3cad470](https://github.com/lobehub/lobe-chat/commit/3cad470))
+- **misc**: Improve redirect when login ([cb26655](https://github.com/lobehub/lobe-chat/commit/cb26655))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.160.5](https://github.com/lobehub/lobe-chat/compare/v0.160.4...v0.160.5)
 
 <sup>Released on **2024-05-20**</sup>

package/locales/ar/error.json

@@ -12,6 +12,8 @@
     "retry": "إعادة التحميل",
     "title": "واجهت الصفحة مشكلة ما.."
   },
+  "fetchError": "فشل الطلب",
+  "fetchErrorDetail": "تفاصيل الخطأ",
   "notFound": {
     "backHome": "العودة إلى الصفحة الرئيسية",
     "desc": "لم نتمكن من العثور على الصفحة التي تبحث عنها، يرجى التحقق مما إذا كان الرابط صحيحًا",

package/locales/bg-BG/error.json

@@ -12,6 +12,8 @@
     "retry": "Опитай отново",
     "title": "Страницата се е сблъскала с проблем.."
   },
+  "fetchError": "Грешка при извличане",
+  "fetchErrorDetail": "Подробности за грешката",
   "notFound": {
     "backHome": "Върни се в началото",
     "desc": "Не можем да намерим страницата, която търсите. Моля, проверете дали връзката е правилна.",

package/locales/de-DE/error.json

@@ -12,6 +12,8 @@
     "retry": "Erneut laden",
     "title": "Ein Problem ist aufgetreten auf der Seite.."
   },
+  "fetchError": "Anforderung fehlgeschlagen",
+  "fetchErrorDetail": "Fehlerdetails",
   "notFound": {
     "backHome": "Zurück zur Startseite",
     "desc": "Die von Ihnen gesuchte Seite konnte nicht gefunden werden. Bitte überprüfen Sie, ob der Link korrekt ist.",

package/locales/en-US/error.json

@@ -12,6 +12,8 @@
     "retry": "Reload",
     "title": "Oops, something went wrong.."
   },
+  "fetchError": "Request Failed",
+  "fetchErrorDetail": "Error Details",
   "notFound": {
     "backHome": "Back to Home",
     "desc": "We couldn't find the page you're looking for, please check if the link is correct",

package/locales/es-ES/error.json

@@ -12,6 +12,8 @@
     "retry": "Reintentar",
     "title": "Se ha producido un problema en la página.."
   },
+  "fetchError": "Error en la solicitud",
+  "fetchErrorDetail": "Detalles del error",
   "notFound": {
     "backHome": "Volver a la página de inicio",
     "desc": "No podemos encontrar la página que estás buscando, por favor verifica si el enlace es correcto",

package/locales/fr-FR/error.json

@@ -12,6 +12,8 @@
     "retry": "Recharger",
     "title": "Un problème est survenu sur la page.."
   },
+  "fetchError": "Échec de la requête",
+  "fetchErrorDetail": "Détails de l'erreur",
   "notFound": {
     "backHome": "Retour à la page d'accueil",
     "desc": "La page que vous recherchez est introuvable. Veuillez vérifier si le lien est correct.",

package/locales/it-IT/error.json

@@ -12,6 +12,8 @@
     "retry": "Ricarica",
     "title": "La pagina ha riscontrato un problema.."
   },
+  "fetchError": "Errore di richiesta",
+  "fetchErrorDetail": "Dettagli dell'errore",
   "notFound": {
     "backHome": "Torna alla homepage",
     "desc": "Non riusciamo a trovare la pagina che stai cercando, controlla che il link sia corretto",

package/locales/ja-JP/error.json

@@ -12,6 +12,8 @@
     "retry": "再読み込み",
     "title": "ページに問題が発生しました.."
   },
+  "fetchError": "リクエストが失敗しました",
+  "fetchErrorDetail": "エラーの詳細",
   "notFound": {
     "backHome": "ホームに戻る",
     "desc": "お探しのページが見つかりません。リンクが正しいかどうかをご確認ください",

package/locales/ko-KR/error.json

@@ -12,6 +12,8 @@
     "retry": "다시 시도",
     "title": "페이지에서 문제가 발생했습니다."
   },
+  "fetchError": "요청 실패",
+  "fetchErrorDetail": "오류 상세",
   "notFound": {
     "backHome": "홈페이지로 돌아가기",
     "desc": "찾고 있는 페이지를 찾을 수 없습니다. 링크가 올바른지 확인해주세요.",

package/locales/nl-NL/error.json

@@ -12,6 +12,8 @@
     "retry": "Opnieuw proberen",
     "title": "Er is een probleem opgetreden op de pagina.."
   },
+  "fetchError": "Verzoek mislukt",
+  "fetchErrorDetail": "Foutdetails",
   "notFound": {
     "backHome": "Terug naar startpagina",
     "desc": "We kunnen de pagina die je zoekt niet vinden, controleer of de link juist is",

package/locales/pl-PL/error.json

@@ -12,6 +12,8 @@
     "retry": "Ponów próbę",
     "title": "Napotkano problem na stronie.."
   },
+  "fetchError": "Błąd żądania",
+  "fetchErrorDetail": "Szczegóły błędu",
   "notFound": {
     "backHome": "Powrót do strony głównej",
     "desc": "Nie możemy odnaleźć strony, której szukasz. Sprawdź, czy link jest poprawny.",

package/locales/pt-BR/error.json

@@ -12,6 +12,8 @@
     "retry": "Tentar novamente",
     "title": "Ocorreu um problema na página.."
   },
+  "fetchError": "Falha na solicitação",
+  "fetchErrorDetail": "Detalhes do erro",
   "notFound": {
     "backHome": "Voltar para a página inicial",
     "desc": "Não conseguimos encontrar a página que você está procurando, por favor, verifique se o link está correto",

package/locales/ru-RU/error.json

@@ -12,6 +12,8 @@
     "retry": "Повторить попытку",
     "title": "Произошла проблема на странице.."
   },
+  "fetchError": "Ошибка запроса",
+  "fetchErrorDetail": "Подробности ошибки",
   "notFound": {
     "backHome": "Вернуться на главную",
     "desc": "Мы не можем найти страницу, которую вы ищете. Пожалуйста, проверьте правильность ссылки",

package/locales/tr-TR/error.json

@@ -12,6 +12,8 @@
     "retry": "Yeniden Yükle",
     "title": "Sayfa bir sorunla karşılaştı.."
   },
+  "fetchError": "İstek başarısız oldu",
+  "fetchErrorDetail": "Hata detayı",
   "notFound": {
     "backHome": "Ana Sayfaya Dön",
     "desc": "Aradığınız sayfayı bulamadık, lütfen bağlantının doğru olduğundan emin olun",

package/locales/vi-VN/error.json

@@ -12,6 +12,8 @@
     "retry": "Thử lại",
     "title": "Trang gặp một chút vấn đề.."
   },
+  "fetchError": "Yêu cầu thất bại",
+  "fetchErrorDetail": "Chi tiết lỗi",
   "notFound": {
     "backHome": "Quay về Trang chủ",
     "desc": "Chúng tôi không thể tìm thấy trang bạn đang tìm, vui lòng kiểm tra xem liên kết có đúng không",

package/locales/zh-CN/error.json

@@ -12,6 +12,8 @@
     "retry": "重新加载",
     "title": "页面遇到一点问题.."
   },
+  "fetchError": "请求失败",
+  "fetchErrorDetail": "错误详情",
   "notFound": {
     "backHome": "返回首页",
     "desc": "我们找不到你正在寻找的页面，请检查链接是否正确",

package/locales/zh-TW/error.json

@@ -12,6 +12,8 @@
     "retry": "重新加載",
     "title": "頁面遇到一點問題.."
   },
+  "fetchError": "請求失敗",
+  "fetchErrorDetail": "錯誤詳情",
   "notFound": {
     "backHome": "返回首頁",
     "desc": "我們找不到您正在尋找的頁面，請檢查連結是否正確",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.160.5",
+  "version": "0.160.6",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",
@@ -98,7 +98,7 @@
     "@lobehub/chat-plugins-gateway": "latest",
     "@lobehub/icons": "^1.21.0",
     "@lobehub/tts": "latest",
-    "@lobehub/ui": "^1.138.24",
+    "@lobehub/ui": "^1.138.26",
     "@microsoft/fetch-event-source": "^2.0.1",
     "@next/third-parties": "^14.2.3",
     "@sentry/nextjs": "^7.114.0",

package/src/app/(loading)/Redirect.tsx

@@ -5,6 +5,8 @@ import { memo, useEffect } from 'react';
 
 import { messageService } from '@/services/message';
 import { sessionService } from '@/services/session';
+import { useUserStore } from '@/store/user';
+import { authSelectors } from '@/store/user/selectors';
 
 const checkHasConversation = async () => {
   const hasMessages = await messageService.hasMessages();
@@ -14,8 +16,14 @@ const checkHasConversation = async () => {
 
 const Redirect = memo(() => {
   const router = useRouter();
+  const isLogin = useUserStore(authSelectors.isLogin);
 
   useEffect(() => {
+    if (!isLogin) {
+      router.replace('/welcome');
+      return;
+    }
+
     checkHasConversation().then((hasData) => {
       if (hasData) {
         router.replace('/chat');

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

@@ -5,58 +5,29 @@ import { Button } from 'antd';
 import { createStyles } from 'antd-style';
 import { LucideArrowUpRightFromSquare, TelescopeIcon } from 'lucide-react';
 import Link from 'next/link';
-import { rgba } from 'polished';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import Notification from '@/components/Notification';
 import { PRIVACY_URL } from '@/const/url';
 import { useServerConfigStore } from '@/store/serverConfig';
 import { serverConfigSelectors } from '@/store/serverConfig/selectors';
 import { useUserStore } from '@/store/user';
 import { preferenceSelectors } from '@/store/user/selectors';
 
-const useStyles = createStyles(({ css, token, isDarkMode }) => ({
-  container: css`
-    position: absolute;
-    z-index: 1100;
-    bottom: 16px;
-    inset-inline-end: 20px;
-
-    overflow: hidden;
-
-    width: 422px;
-
-    background: ${token.colorBgContainer};
-    border: 1px solid ${token.colorSplit};
-    border-radius: 8px;
-    box-shadow: ${token.boxShadowSecondary};
-  `,
+const useStyles = createStyles(({ css, token }) => ({
   desc: css`
     color: ${token.colorTextSecondary};
   `,
-  mobileContainer: css`
-    bottom: 8px;
-    inset-inline-start: 8px;
-    width: calc(100% - 16px);
-  `,
   title: css`
     font-size: 18px;
     font-weight: bold;
   `,
-  wrapper: css`
-    padding: 20px 20px 16px;
-    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");
-  `,
 }));
 
 const TelemetryNotification = memo<{ mobile?: boolean }>(({ mobile }) => {
-  const { styles, theme, cx } = useStyles();
+  const { styles, theme } = useStyles();
 
   const { t } = useTranslation('common');
   const shouldCheck = useServerConfigStore(serverConfigSelectors.enabledTelemetryChat);
@@ -75,51 +46,47 @@ const TelemetryNotification = memo<{ mobile?: boolean }>(({ mobile }) => {
   };
 
   return (
-    showModal && (
-      <Flexbox className={cx(styles.container, mobile && styles.mobileContainer)}>
-        <Flexbox className={styles.wrapper} gap={16} horizontal>
-          <Flexbox>
-            <Avatar
-              avatar={<TelescopeIcon />}
-              background={theme.geekblue1}
-              style={{ color: theme.geekblue7 }}
-            ></Avatar>
-          </Flexbox>
-          <Flexbox gap={16}>
-            <Flexbox gap={12}>
-              <Flexbox className={styles.title}>{t('telemetry.title')}</Flexbox>
-              <div className={styles.desc}>
-                {t('telemetry.desc')}
-                <span>
-                  <Link href={PRIVACY_URL} target={'_blank'}>
-                    {t('telemetry.learnMore')}
-                    <Icon icon={LucideArrowUpRightFromSquare} style={{ marginInlineStart: 4 }} />
-                  </Link>
-                </span>
-              </div>
-            </Flexbox>
-            <Flexbox gap={8} horizontal>
-              <Button
-                onClick={() => {
-                  updateTelemetry(true);
-                }}
-                type={'primary'}
-              >
-                {t('telemetry.allow')}
-              </Button>
-              <Button
-                onClick={() => {
-                  updateTelemetry(false);
-                }}
-                type={'text'}
-              >
-                {t('telemetry.deny')}
-              </Button>
-            </Flexbox>
-          </Flexbox>
+    <Notification mobile={mobile} show={showModal} showCloseIcon={false}>
+      <Flexbox>
+        <Avatar
+          avatar={<TelescopeIcon />}
+          background={theme.geekblue1}
+          style={{ color: theme.geekblue7 }}
+        ></Avatar>
+      </Flexbox>
+      <Flexbox gap={16}>
+        <Flexbox gap={12}>
+          <Flexbox className={styles.title}>{t('telemetry.title')}</Flexbox>
+          <div className={styles.desc}>
+            {t('telemetry.desc')}
+            <span>
+              <Link href={PRIVACY_URL} target={'_blank'}>
+                {t('telemetry.learnMore')}
+                <Icon icon={LucideArrowUpRightFromSquare} style={{ marginInlineStart: 4 }} />
+              </Link>
+            </span>
+          </div>
+        </Flexbox>
+        <Flexbox gap={8} horizontal>
+          <Button
+            onClick={() => {
+              updateTelemetry(true);
+            }}
+            type={'primary'}
+          >
+            {t('telemetry.allow')}
+          </Button>
+          <Button
+            onClick={() => {
+              updateTelemetry(false);
+            }}
+            type={'text'}
+          >
+            {t('telemetry.deny')}
+          </Button>
         </Flexbox>
       </Flexbox>
-    )
+    </Notification>
   );
 });
 

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/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/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}>