Merge branch 'feat/beta-offline-notice' into dev/plugin-deploy

web/app/components/base/toast/index.tsx

@@ -59,7 +59,7 @@ const Toast = ({
     }`}
     />
     <div className={`flex ${size === 'md' ? 'gap-1' : 'gap-0.5'}`}>
-      <div className={`flex justify-center items-center ${size === 'md' ? 'p-0.5' : 'p-1'}`}>
+      <div className={`flex justify-center items-start ${size === 'md' ? 'p-0.5' : 'p-1'}`}>
         {type === 'success' && <RiCheckboxCircleFill className={`${size === 'md' ? 'w-5 h-5' : 'w-4 h-4'} text-text-success`} aria-hidden="true" />}
         {type === 'error' && <RiErrorWarningFill className={`${size === 'md' ? 'w-5 h-5' : 'w-4 h-4'} text-text-destructive`} aria-hidden="true" />}
         {type === 'warning' && <RiAlertFill className={`${size === 'md' ? 'w-5 h-5' : 'w-4 h-4'} text-text-warning-secondary`} aria-hidden="true" />}

web/app/components/offline-notice.tsx

@@ -0,0 +1,24 @@
+'use client'
+import { RiCloseLine } from '@remixicon/react'
+import { useBoolean } from 'ahooks'
+import type { PropsWithChildren } from 'react'
+import { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+
+export default function OfflineNotice({ children }: PropsWithChildren) {
+  const { t } = useTranslation()
+  const [showOfflineNotice, { setFalse }] = useBoolean(true)
+
+  useEffect(() => {
+    const timer = setTimeout(setFalse, 60000)
+    return () => clearTimeout(timer)
+  }, [setFalse])
+  return <>
+    {showOfflineNotice && <div className='px-4 py-2 flex items-center justify-start gap-x-2 bg-[#FFFAEB] border-b-[0.5px] border-b-[#FEF0C7]'>
+      <div className='rounded-[12px] flex items-center justify-center px-2 py-0.5 h-[22px] bg-[#f79009] text-white text-[11px] not-italic font-medium leading[18px]'>{t('common.offlineNoticeTitle')}</div>
+      <div className='grow font-medium leading-[18px] text-[12px] not-italic text-[#344054]'>{t('common.offlineNotice')}</div>
+      <RiCloseLine className='size-4 text-[#667085] cursor-pointer' onClick={setFalse} />
+    </div>}
+    {children}
+  </>
+}

web/app/layout.tsx

@@ -7,6 +7,7 @@ import { TanstackQueryIniter } from '@/context/query-client'
 import { ThemeProvider } from 'next-themes'
 import './styles/globals.css'
 import './styles/markdown.scss'
+import OfflineNotice from './components/offline-notice'
 
 export const metadata = {
   title: 'Dify',
@@ -61,7 +62,9 @@ const LocaleLayout = ({
                 disableTransitionOnChange
               >
                 <I18nServer>
-                  {children}
+                  <OfflineNotice>
+                    {children}
+                  </OfflineNotice>
                 </I18nServer>
               </ThemeProvider>
             </TanstackQueryIniter>

web/i18n/en-US/common.ts

@@ -1,4 +1,6 @@
 const translation = {
+  offlineNoticeTitle: 'Important Notice',
+  offlineNotice: 'Dify v1.0.0 is now officially released. Effective March 5, 2025, the current environment will no longer be accessible, and all data will be permanently deleted. Please ensure that you back up any necessary data prior to this date to avoid any loss.',
   api: {
     success: 'Success',
     actionSuccess: 'Action succeeded',

web/i18n/zh-Hans/common.ts

@@ -1,4 +1,6 @@
 const translation = {
+  offlineNoticeTitle: '重要通知',
+  offlineNotice: 'Dify v1.0.0 现已正式发布。自 2025年 3 月 5 日起，当前环境将不可访问，所有数据将被永久删除。请务必在此日期之前备份所有必要数据，以避免任何数据丢失。',
   api: {
     success: '成功',
     actionSuccess: '操作成功',