integrate Amplitude analytics into the application (#29049)

Co-authored-by: CodingOnStar <hanxujiang@dify.ai>
Co-authored-by: Joel <iamjoel007@gmail.com>

web/app/components/base/amplitude/AmplitudeProvider.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import type { FC } from 'react'
+import React, { useEffect } from 'react'
+import * as amplitude from '@amplitude/analytics-browser'
+import { sessionReplayPlugin } from '@amplitude/plugin-session-replay-browser'
+import { IS_CLOUD_EDITION } from '@/config'
+
+export type IAmplitudeProps = {
+  apiKey?: string
+  sessionReplaySampleRate?: number
+}
+
+const AmplitudeProvider: FC<IAmplitudeProps> = ({
+  apiKey = process.env.NEXT_PUBLIC_AMPLITUDE_API_KEY ?? '',
+  sessionReplaySampleRate = 1,
+}) => {
+  useEffect(() => {
+    // Only enable in Saas edition
+    if (!IS_CLOUD_EDITION)
+      return
+
+    // Initialize Amplitude
+    amplitude.init(apiKey, {
+      defaultTracking: {
+        sessions: true,
+        pageViews: true,
+        formInteractions: true,
+        fileDownloads: true,
+      },
+      // Enable debug logs in development environment
+      logLevel: amplitude.Types.LogLevel.Warn,
+    })
+
+    // Add Session Replay plugin
+    const sessionReplay = sessionReplayPlugin({
+      sampleRate: sessionReplaySampleRate,
+    })
+    amplitude.add(sessionReplay)
+  }, [])
+
+  // This is a client component that renders nothing
+  return null
+}
+
+export default React.memo(AmplitudeProvider)

web/app/components/base/amplitude/index.ts

@@ -0,0 +1,2 @@
+export { default } from './AmplitudeProvider'
+export { resetUser, setUserId, setUserProperties, trackEvent } from './utils'

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

@@ -0,0 +1,37 @@
+import * as amplitude from '@amplitude/analytics-browser'
+
+/**
+ * Track custom event
+ * @param eventName Event name
+ * @param eventProperties Event properties (optional)
+ */
+export const trackEvent = (eventName: string, eventProperties?: Record<string, any>) => {
+  amplitude.track(eventName, eventProperties)
+}
+
+/**
+ * Set user ID
+ * @param userId User ID
+ */
+export const setUserId = (userId: string) => {
+  amplitude.setUserId(userId)
+}
+
+/**
+ * Set user properties
+ * @param properties User properties
+ */
+export const setUserProperties = (properties: Record<string, any>) => {
+  const identifyEvent = new amplitude.Identify()
+  Object.entries(properties).forEach(([key, value]) => {
+    identifyEvent.set(key, value)
+  })
+  amplitude.identify(identifyEvent)
+}
+
+/**
+ * Reset user (e.g., when user logs out)
+ */
+export const resetUser = () => {
+  amplitude.reset()
+}