dify

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

@@ -0,0 +1,31 @@
+import { memo } from 'react'
+import { headers } from 'next/headers'
+import Script from 'next/script'
+import { IS_CE_EDITION, ZENDESK_WIDGET_KEY } from '@/config'
+
+const Zendesk = async () => {
+  if (IS_CE_EDITION || !ZENDESK_WIDGET_KEY)
+    return null
+
+  const nonce = process.env.NODE_ENV === 'production' ? (await headers()).get('x-nonce') ?? '' : ''
+
+  return (
+    <>
+      <Script
+        nonce={nonce ?? undefined}
+        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>
+    </>
+  )
+}
+
+export default memo(Zendesk)

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

@@ -0,0 +1,33 @@
+import { IS_CE_EDITION } from '@/config'
+
+export type ConversationField = {
+  id: string,
+  value: any,
+}
+
+declare global {
+  // eslint-disable-next-line ts/consistent-type-definitions
+  interface Window {
+    zE?: (
+      command: string,
+      value: string,
+      payload?: ConversationField[] | string | string[] | (() => any),
+      callback?: () => any,
+    ) => void;
+  }
+}
+
+export const setZendeskConversationFields = (fields: ConversationField[], callback?: () => any) => {
+  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')
+}