chore: update support channels (#27188)

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

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

@@ -10,11 +10,21 @@ const Zendesk = () => {
   const nonce = process.env.NODE_ENV === 'production' ? (headers() as unknown as UnsafeUnwrappedHeaders).get('x-nonce') ?? '' : ''
 
   return (
-    <Script
+    <>
-      nonce={nonce ?? undefined}
+      <Script
-      id="ze-snippet"
+        nonce={nonce ?? undefined}
-      src={`https://static.zdassets.com/ekr/snippet.js?key=${ZENDESK_WIDGET_KEY}`}
+        id="ze-snippet"
-    />
+        src={`https://static.zdassets.com/ekr/snippet.js?key=${ZENDESK_WIDGET_KEY}`}
+      />
+      <Script nonce={nonce ?? undefined} id="ze-init">{`
+        (function () {
+          window.addEventListener('load', function () {
+            if (window.zE)
+              window.zE('messenger', 'hide')
+          })
+        })()
+      `}</Script>
+    </>
   )
 }
 

web/app/components/base/zendesk/utils.ts

@@ -21,3 +21,13 @@ export const setZendeskConversationFields = (fields: ConversationField[], callba
   if (!IS_CE_EDITION && window.zE)
     window.zE('messenger:set', 'conversationFields', fields, callback)
 }
+
+export const setZendeskWidgetVisibility = (visible: boolean) => {
+  if (!IS_CE_EDITION && window.zE)
+    window.zE('messenger', visible ? 'show' : 'hide')
+}
+
+export const toggleZendeskWindow = (open: boolean) => {
+  if (!IS_CE_EDITION && window.zE)
+    window.zE('messenger', open ? 'open' : 'close')
+}

web/app/components/header/account-dropdown/index.tsx

@@ -68,7 +68,7 @@ export default function AppSelector() {
     <div className="">
       <Menu as="div" className="relative inline-block text-left">
         {
-          ({ open }) => (
+          ({ open, close }) => (
             <>
               <MenuButton className={cn('inline-flex items-center rounded-[20px] p-0.5 hover:bg-background-default-dodge', open && 'bg-background-default-dodge')}>
                 <Avatar avatar={userProfile.avatar_url} name={userProfile.name} size={36} />
@@ -142,7 +142,7 @@ export default function AppSelector() {
                           <RiArrowRightUpLine className='size-[14px] shrink-0 text-text-tertiary' />
                         </Link>
                       </MenuItem>
-                      <Support />
+                      <Support closeAccountDropdown={close} />
                       {IS_CLOUD_EDITION && isCurrentWorkspaceOwner && <Compliance />}
                     </div>
                     <div className='p-1'>

web/app/components/header/account-dropdown/support.tsx

@@ -1,23 +1,25 @@
 import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
-import { RiArrowRightSLine, RiArrowRightUpLine, RiDiscordLine, RiFeedbackLine, RiMailSendLine, RiQuestionLine } from '@remixicon/react'
+import { RiArrowRightSLine, RiArrowRightUpLine, RiChatSmile2Line, RiDiscordLine, RiFeedbackLine, RiQuestionLine } from '@remixicon/react'
 import { Fragment } from 'react'
 import Link from 'next/link'
 import { useTranslation } from 'react-i18next'
-import { mailToSupport } from '../utils/util'
 import cn from '@/utils/classnames'
 import { useProviderContext } from '@/context/provider-context'
 import { Plan } from '@/app/components/billing/type'
-import { useAppContext } from '@/context/app-context'
+import { toggleZendeskWindow } from '@/app/components/base/zendesk/utils'
 
-export default function Support() {
+type SupportProps = {
+  closeAccountDropdown: () => void
+}
+
+export default function Support({ closeAccountDropdown }: SupportProps) {
   const itemClassName = `
   flex items-center w-full h-9 pl-3 pr-2 text-text-secondary system-md-regular
   rounded-lg hover:bg-state-base-hover cursor-pointer gap-1
 `
   const { t } = useTranslation()
   const { plan } = useProviderContext()
-  const { userProfile, langGeniusVersionInfo } = useAppContext()
+  const hasDedicatedChannel = plan.type !== Plan.sandbox
-  const canEmailSupport = plan.type === Plan.professional || plan.type === Plan.team || plan.type === Plan.enterprise
 
   return <Menu as="div" className="relative h-full w-full">
     {
@@ -48,17 +50,17 @@ export default function Support() {
               )}
             >
               <div className="px-1 py-1">
-                {canEmailSupport && <MenuItem>
+                {hasDedicatedChannel && <MenuItem>
-                  <a
+                  <button
-                    className={cn(itemClassName, 'group justify-between',
+                    className={cn(itemClassName, 'group justify-between text-left data-[active]:bg-state-base-hover')}
-                      'data-[active]:bg-state-base-hover',
+                    onClick={() => {
-                    )}
+                      toggleZendeskWindow(true)
-                    href={mailToSupport(userProfile.email, plan.type, langGeniusVersionInfo.current_version)}
+                      closeAccountDropdown()
-                    target='_blank' rel='noopener noreferrer'>
+                    }}
-                    <RiMailSendLine className='size-4 shrink-0 text-text-tertiary' />
+                  >
-                    <div className='system-md-regular grow px-1 text-text-secondary'>{t('common.userProfile.emailSupport')}</div>
+                    <RiChatSmile2Line className='size-4 shrink-0 text-text-tertiary' />
-                    <RiArrowRightUpLine className='size-[14px] shrink-0 text-text-tertiary' />
+                    <div className='system-md-regular grow px-1 text-text-secondary'>{t('common.userProfile.contactUs')}</div>
-                  </a>
+                  </button>
                 </MenuItem>}
                 <MenuItem>
                   <Link

web/i18n/de-DE/common.ts

@@ -169,6 +169,7 @@ const translation = {
     compliance: 'Einhaltung',
     support: 'Unterstützung',
     github: 'GitHub',
+    contactUs: 'Kontaktieren Sie uns',
   },
   settings: {
     accountGroup: 'KONTO',

web/i18n/en-US/common.ts

@@ -170,6 +170,7 @@ const translation = {
   },
   userProfile: {
     settings: 'Settings',
+    contactUs: 'Contact Us',
     emailSupport: 'Email Support',
     workspace: 'Workspace',
     createWorkspace: 'Create Workspace',

web/i18n/es-ES/common.ts

@@ -173,6 +173,7 @@ const translation = {
     support: 'Apoyo',
     compliance: 'Cumplimiento',
     github: 'GitHub',
+    contactUs: 'Contáctenos',
   },
   settings: {
     accountGroup: 'CUENTA',

web/i18n/fa-IR/common.ts

@@ -173,6 +173,7 @@ const translation = {
     github: 'گیت‌هاب',
     compliance: 'انطباق',
     support: 'پشتیبانی',
+    contactUs: 'با ما تماس بگیرید',
   },
   settings: {
     accountGroup: 'حساب کاربری',

web/i18n/fr-FR/common.ts

@@ -169,6 +169,7 @@ const translation = {
     support: 'Soutien',
     github: 'GitHub',
     compliance: 'Conformité',
+    contactUs: 'Contactez-nous',
   },
   settings: {
     accountGroup: 'COMPTE',

web/i18n/hi-IN/common.ts

@@ -178,6 +178,7 @@ const translation = {
     compliance: 'अनुपालन',
     github: 'गिटहब',
     support: 'समर्थन',
+    contactUs: 'संपर्क करें',
   },
   settings: {
     accountGroup: 'खाता',

web/i18n/id-ID/common.ts

@@ -172,6 +172,7 @@ const translation = {
     about: 'Tentang',
     workspace: 'Workspace',
     createWorkspace: 'Membuat Ruang Kerja',
+    contactUs: 'Hubungi Kami',
   },
   compliance: {
     soc2Type2: 'Laporan SOC 2 Tipe II',

web/i18n/it-IT/common.ts

@@ -178,6 +178,7 @@ const translation = {
     support: 'Supporto',
     compliance: 'Conformità',
     github: 'GitHub',
+    contactUs: 'Contattaci',
   },
   settings: {
     accountGroup: 'ACCOUNT',

web/i18n/ja-JP/common.ts

@@ -179,6 +179,7 @@ const translation = {
     about: 'Dify について',
     logout: 'ログアウト',
     github: 'GitHub',
+    contactUs: 'お問い合わせ',
   },
   compliance: {
     soc2Type1: 'SOC 2 Type I 報告書',

web/i18n/ko-KR/common.ts

@@ -165,6 +165,7 @@ const translation = {
     github: '깃허브',
     compliance: '컴플라이언스',
     support: '지원',
+    contactUs: '문의하기',
   },
   settings: {
     accountGroup: '계정',

web/i18n/pl-PL/common.ts

@@ -174,6 +174,7 @@ const translation = {
     support: 'Wsparcie',
     github: 'GitHub',
     compliance: 'Zgodność',
+    contactUs: 'Skontaktuj się z nami',
   },
   settings: {
     accountGroup: 'KONTO',

web/i18n/pt-BR/common.ts

@@ -169,6 +169,7 @@ const translation = {
     github: 'GitHub',
     support: 'Suporte',
     compliance: 'Conformidade',
+    contactUs: 'Contate-Nos',
   },
   settings: {
     accountGroup: 'CONTA',

web/i18n/ro-RO/common.ts

@@ -169,6 +169,7 @@ const translation = {
     github: 'GitHub',
     support: 'Suport',
     compliance: 'Conformitate',
+    contactUs: 'Contactați-ne',
   },
   settings: {
     accountGroup: 'CONT',

web/i18n/ru-RU/common.ts

@@ -173,6 +173,7 @@ const translation = {
     github: 'ГитХаб',
     compliance: 'Соблюдение',
     support: 'Поддержка',
+    contactUs: 'Свяжитесь с нами',
   },
   settings: {
     accountGroup: 'АККАУНТ',

web/i18n/sl-SI/common.ts

@@ -173,6 +173,7 @@ const translation = {
     support: 'Podpora',
     github: 'GitHub',
     compliance: 'Skladnost',
+    contactUs: 'Kontaktirajte nas',
   },
   settings: {
     accountGroup: 'SPLOŠNO',

web/i18n/th-TH/common.ts

@@ -168,6 +168,7 @@ const translation = {
     github: 'GitHub',
     compliance: 'การปฏิบัติตามข้อกำหนด',
     support: 'การสนับสนุน',
+    contactUs: 'ติดต่อเรา',
   },
   settings: {
     accountGroup: 'ทั่วไป',

web/i18n/tr-TR/common.ts

@@ -173,6 +173,7 @@ const translation = {
     support: 'Destek',
     compliance: 'Uygunluk',
     github: 'GitHub',
+    contactUs: 'Bize Ulaşın',
   },
   settings: {
     accountGroup: 'HESAP',

web/i18n/uk-UA/common.ts

@@ -169,6 +169,7 @@ const translation = {
     compliance: 'Відповідність',
     support: 'Підтримка',
     github: 'Гітхаб',
+    contactUs: 'Зв’яжіться з нами',
   },
   settings: {
     accountGroup: 'ОБЛІКОВИЙ ЗАПИС',

web/i18n/vi-VN/common.ts

@@ -169,6 +169,7 @@ const translation = {
     compliance: 'Tuân thủ',
     github: 'GitHub',
     support: 'Hỗ trợ',
+    contactUs: 'Liên hệ với chúng tôi',
   },
   settings: {
     accountGroup: 'TÀI KHOẢN',

web/i18n/zh-Hans/common.ts

@@ -182,6 +182,7 @@ const translation = {
     community: '社区',
     about: '关于',
     logout: '登出',
+    contactUs: '联系我们',
   },
   compliance: {
     soc2Type1: 'SOC 2 Type I Report',

web/i18n/zh-Hant/common.ts

@@ -169,6 +169,7 @@ const translation = {
     support: '支持',
     github: 'GitHub',
     compliance: '合規',
+    contactUs: '聯絡我們',
   },
   settings: {
     accountGroup: '賬戶',

web/service/base.ts

@@ -115,10 +115,10 @@ export type IOtherOptions = {
 }
 
 function jumpTo(url: string) {
-  if(!url)
+  if (!url)
     return
   const targetPath = new URL(url, globalThis.location.origin).pathname
-  if(targetPath === globalThis.location.pathname)
+  if (targetPath === globalThis.location.pathname)
     return
   globalThis.location.href = url
 }
@@ -136,7 +136,7 @@ const WBB_APP_LOGIN_PATH = '/webapp-signin'
 function requiredWebSSOLogin(message?: string, code?: number) {
   const params = new URLSearchParams()
   // prevent redirect loop
-  if(globalThis.location.pathname === WBB_APP_LOGIN_PATH)
+  if (globalThis.location.pathname === WBB_APP_LOGIN_PATH)
     return
 
   params.append('redirect_url', encodeURIComponent(`${globalThis.location.pathname}${globalThis.location.search}`))