@lobehub/chat 0.160.4 → 0.160.6

package/CHANGELOG.md

@@ -2,6 +2,71 @@
 
 # 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>
+
+#### ♻ Code Refactoring
+
+- **misc**: Refactor analytics env.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Refactor analytics env, closes [#2570](https://github.com/lobehub/lobe-chat/issues/2570) ([d809d3f](https://github.com/lobehub/lobe-chat/commit/d809d3f))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.160.4](https://github.com/lobehub/lobe-chat/compare/v0.160.3...v0.160.4)
 
 <sup>Released on **2024-05-20**</sup>

package/docs/self-hosting/environment-variables/analytics.mdx

@@ -1,7 +1,5 @@
 ---
-title: >-
-  Integrating Data Analytics Services in LobeChat: Environment Variables and
-  Configuration
+title: Integrating Analytics in LobeChat
 description: >-
   Learn how to configure environment variables for Vercel Analytics, Google
   Analytics, PostHog Analytics, and Umami Analytics in LobeChat for data
@@ -36,44 +34,30 @@ We have integrated several free/open-source data analytics services in LobeChat
 
 ## Google Analytics
 
-### `ENABLE_GOOGLE_ANALYTICS`
-
-- Type: Optional
-- Description: Used to configure the environment variable for Google Analytics. Set to `1` to enable Google Analytics.
-- Default: `-`
-- Example: `1`
-
 ### `GOOGLE_ANALYTICS_MEASUREMENT_ID`
 
 - Type: Required
-- Description: Google Analytics Measurement ID，you can get it from the Google Analytics dashboard.
+- Description: Google Analytics Measurement ID，you can get it from the Google Analytics dashboard. Add it will auto enable Google Analytics.
 - Default: `-`
 - Example: `G-63LP2TV03T`
 
 ## Posthog Analytics
 
-### `NEXT_PUBLIC_ANALYTICS_POSTHOG`
+### `POSTHOG_KEY`
 
-- Type: Optional
-- Description: Used to enable the environment variable for [PostHog Analytics][posthog-analytics-url]. Set to `1` to enable PostHog Analytics.
-- Default: `-`
-- Example: `1`
-
-### `NEXT_PUBLIC_POSTHOG_KEY`
-
-- Type: Optional
-- Description: Set the PostHog project Key.
+- Type: Required
+- Description: Set the PostHog project Key. Add it will auto enable PostHog Analytics.
 - Default: `-`
 - Example: `phc_xxxxxxxx`
 
-### `NEXT_PUBLIC_POSTHOG_HOST`
+### `POSTHOG_HOST`
 
 - Type: Optional
 - Description: Set the deployment address of the PostHog service, defaulting to the official SAAS address.
 - Default: `https://app.posthog.com`
 - Example: `https://example.com`
 
-### `NEXT_PUBLIC_POSTHOG_DEBUG`
+### `DEBUG_POSTHOG_ANALYTICS`
 
 - Type: Optional
 - Description: Enable the debug mode for PostHog.
@@ -82,26 +66,19 @@ We have integrated several free/open-source data analytics services in LobeChat
 
 ## Umami Analytics
 
-### `NEXT_PUBLIC_ANALYTICS_UMAMI`
+### `UMAMI_WEBSITE_ID`
 
-- Type: Optional
-- Description: Used to enable the environment variable for [Umami Analytics][umami-analytics-url]. Set to `1` to enable Umami Analytics.
+- Type: Required
+- Description: Your Umami Website ID. Add it will auto enable Umami Analytics.
 - Default: `-`
-- Example: `1`
+- Example: `E738D82A-EE9E-4806-A81F-0CA3CAE57F65`
 
-### `NEXT_PUBLIC_UMAMI_SCRIPT_URL`
+### `UMAMI_SCRIPT_URL`
 
 - Type: Optional
 - Description: The URL of the Umami script, defaulting to the script URL provided by Umami Cloud.
 - Default: `https://analytics.umami.is/script.js`
 - Example: `https://umami.your-site.com/script.js`
 
-### `NEXT_PUBLIC_UMAMI_WEBSITE_ID`
-
-- Type: Required
-- Description: Your Umami Website ID.
-- Default: `-`
-- Example: `E738D82A-EE9E-4806-A81F-0CA3CAE57F65`
-
 [posthog-analytics-url]: https://posthog.com
 [umami-analytics-url]: https://umami.is

package/docs/self-hosting/environment-variables/analytics.zh-CN.mdx

@@ -32,44 +32,30 @@ tags:
 
 ## Google Analytics
 
-### `ENABLE_GOOGLE_ANALYTICS`
-
-- 类型：必选
-- 描述：用于配置 Google Analytics 的环境变量，当设为 `1` 时开启 Google Analytics
-- 默认值： `-`
-- 示例：`1`
-
 ### `GOOGLE_ANALYTICS_MEASUREMENT_ID`
 
 - 类型：必选
-- 描述：Google Analytics 的 Measurement ID，如果开启了 Google Analytics，此项必填
+- 描述：Google Analytics 的 Measurement ID，填写此项后将自动开启 Google Analytics
 - 默认值： `-`
 - 示例：`G-63LP2TV03T`
 
 ## Posthog Analytics
 
-### `NEXT_PUBLIC_ANALYTICS_POSTHOG`
-
-- 类型：可选
-- 描述：用于开启 [PostHog Analytics][posthog-analytics-url] 的环境变量，设为 `1` 时开启 PostHog Analytics
-- 默认值： `-`
-- 示例：`1`
+### `POSTHOG_KEY`
 
-### `NEXT_PUBLIC_POSTHOG_KEY`
-
-- 类型：可选
-- 描述：设置 PostHog 项目 Key
+- 类型：必选
+- 描述：设置 PostHog 项目 Key，设置此项后将自动开启 PostHog Analytics
 - 默认值： `-`
 - 示例：`phc_xxxxxxxx`
 
-### `NEXT_PUBLIC_POSTHOG_HOST`
+### `POSTHOG_HOST`
 
 - 类型：可选
-- 描述：设置 PostHog 服务的部署地址，默认为官方的 SAAS 地址
+- 描述：设置 PostHog 服务的部署地址，默认为官方的 SaaS 地址
 - 默认值：`https://app.posthog.com`
 - 示例：`https://example.com`
 
-### `NEXT_PUBLIC_POSTHOG_DEBUG`
+### `POSTHOG_DEBUG`
 
 - 类型：可选
 - 描述：开启 PostHog 的调试模式
@@ -78,26 +64,19 @@ tags:
 
 ## Umami Analytics
 
-### `NEXT_PUBLIC_ANALYTICS_UMAMI`
+### `UMAMI_WEBSITE_ID`
 
-- 类型：可选
-- 描述：用于开启 [Umami Analytics][umami-analytics-url] 的环境变量，设为 `1` 时开启 Umami Analytics
-- 默认值： `-`
-- 示例：`1`
+- 类型：必选
+- 描述：你的 Umami 的 Website ID，填写此项后将自动开启 Umami Analytics
+- 默认值：`-`
+- 示例：`E738D82A-EE9E-4806-A81F-0CA3CAE57F65`
 
-### `NEXT_PUBLIC_UMAMI_SCRIPT_URL`
+### `UMAMI_SCRIPT_URL`
 
 - 类型：可选
 - 描述：Umami 脚本的网址，默认为 Umami Cloud 提供的脚本网址
 - 默认值：`https://analytics.umami.is/script.js`
 - 示例：`https://umami.your-site.com/script.js`
 
-### `NEXT_PUBLIC_UMAMI_WEBSITE_ID`
-
-- 类型：必选
-- 描述：你的 Umami 的 Website ID
-- 默认值：`-`
-- 示例：`E738D82A-EE9E-4806-A81F-0CA3CAE57F65`
-
 [posthog-analytics-url]: https://posthog.com
 [umami-analytics-url]: https://umami.is

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.4",
+  "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",
@@ -96,9 +96,9 @@
     "@icons-pack/react-simple-icons": "^9.5.0",
     "@lobehub/chat-plugin-sdk": "latest",
     "@lobehub/chat-plugins-gateway": "latest",
-    "@lobehub/icons": "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>
   );
 });