@anker-in/campaign-ui 0.4.6 → 0.5.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anker-in/campaign-ui",
-  "version": "0.4.6",
+  "version": "0.5.0-beta.01",
   "description": "Campaign UI components and utilities for Anker projects",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",

package/src/components/LiveChatWidget/LiveChatWidget.tsx

@@ -182,7 +182,7 @@ export const LiveChatWidget: React.FC<LiveChatWidgetProps> = ({
     addMessage,
     setMessages,
     clearMessages,
-    handleSSEEvent,
+    startStream,
     saveSession,
     clearSession,
   } = chatState
@@ -743,10 +743,12 @@ export const LiveChatWidget: React.FC<LiveChatWidgetProps> = ({
           },
         }
 
+        // 创建绑定了当前 streamId 的事件处理器，防止并发 stream 污染共享 buffer
+        const streamEventHandler = startStream()
+
         // 发送消息到后端
         await sendMessageStream(requestPayload, event => {
-          // 处理 SSE 事件
-          handleSSEEvent(event)
+          streamEventHandler(event)
 
           // 特殊处理：会话过期（error 事件且 type 为 validation_error）
           if (event.event === 'error' && event.data.type === 'validation_error') {
@@ -838,7 +840,7 @@ export const LiveChatWidget: React.FC<LiveChatWidgetProps> = ({
       setMessages,
       createSession,
       sendMessageStream,
-      handleSSEEvent,
+      startStream,
       saveSession,
       clearSession,
       onMessageSend,

package/src/components/LiveChatWidget/api/chat.ts

@@ -42,9 +42,9 @@ export async function sendMessage(
   request: ChatStreamRequest,
   onEvent: (event: SSEEvent) => void,
   customHeaders?: Record<string, string>,
-  recaptchaConfig?: RecaptchaConfig
+  recaptchaConfig?: RecaptchaConfig,
+  signal?: AbortSignal
 ): Promise<void> {
-  // 使用 fetcher 处理 reCAPTCHA 和自定义 headers
   const response = await fetcher({
     url: `${apiBaseUrl}/api/chat/stream`,
     method: 'POST',
@@ -56,6 +56,7 @@ export async function sendMessage(
     needRecaptcha: recaptchaConfig?.needRecaptcha,
     recaptchaSitekey: recaptchaConfig?.recaptchaSitekey,
     recaptchaAction: recaptchaConfig?.recaptchaAction || 'send_message',
+    signal,
   })
 
   if (!response.ok) {

package/src/components/LiveChatWidget/components/MessageList.tsx

@@ -124,6 +124,8 @@ export const MessageList: React.FC<MessageListProps> = ({
   }, [])
   const [showScrollButton, setShowScrollButton] = useState(false)
 
+  const [showEmpty, setShowEmpty] = useState(false)
+
   // 检查是否接近底部
   const isNearBottom = useCallback(
     (threshold = 100) => {
@@ -187,17 +189,31 @@ export const MessageList: React.FC<MessageListProps> = ({
     return () => clearTimeout(timeoutId)
   }, [messages, autoScroll, listElement])
 
-  // 空状态 + 加载中
+  useEffect(() => {
+    if (!isLoadingHistory && messages.length === 0) {
+      const timer = setTimeout(() => setShowEmpty(true), 150)
+      return () => clearTimeout(timer)
+    } else {
+      setShowEmpty(false)
+    }
+  }, [isLoadingHistory, messages.length])
+
+  if (isLoadingHistory) {
+    return (
+      <div className={`flex flex-1 items-center justify-center overflow-hidden ${className}`}>
+        <LoadingIndicator />
+      </div>
+    )
+  }
+
   if (messages.length === 0) {
-    if (isLoadingHistory) {
-      // 加载中，显示 loading
+    if (!showEmpty) {
       return (
         <div className={`flex flex-1 items-center justify-center overflow-hidden ${className}`}>
           <LoadingIndicator />
         </div>
       )
     }
-    // 空状态
     return (
       <div className={`flex-1 overflow-hidden ${className}`}>{emptyPlaceholder || <DefaultEmptyPlaceholder />}</div>
     )

package/src/components/LiveChatWidget/hooks/useChatAPI.ts

@@ -82,17 +82,16 @@ export function useChatAPI(options: UseChatAPIOptions): UseChatAPIReturn {
    */
   const sendMessageStream = useCallback(
     async (request: ChatStreamRequest, onEvent: (event: SSEEvent) => void) => {
-      // 如果正在发送，先中断之前的请求
       if (abortControllerRef.current) {
         abortControllerRef.current.abort()
       }
 
-      // 创建新的 AbortController
       abortControllerRef.current = new AbortController()
       isSendingRef.current = true
+      const { signal } = abortControllerRef.current
 
       try {
-        await sendMessage(apiBaseUrl, request, onEvent, headers, recaptchaConfig)
+        await sendMessage(apiBaseUrl, request, onEvent, headers, recaptchaConfig, signal)
       } catch (error) {
         // 忽略手动中断的错误
         if (error instanceof Error && error.name === 'AbortError') {

package/src/components/LiveChatWidget/hooks/useChatState.ts

@@ -461,6 +461,12 @@ export interface UseChatStateReturn {
    */
   handleSSEEvent: (event: SSEEvent) => void
 
+  /**
+   * 开始新的 stream 会话，返回绑定了当前 streamId 的事件处理器。
+   * 调用此方法会使之前所有 stream 的事件处理器失效，防止并发 stream 污染共享 buffer。
+   */
+  startStream: () => (event: SSEEvent) => void
+
   /**
    * 保存会话 ID
    */
@@ -560,6 +566,9 @@ export function useChatState(options: UseChatStateOptions = {}): UseChatStateRet
   // 卡片缓存队列，用于存储需要延迟显示的卡片（在文本完成后显示）
   const pendingCardsRef = useRef<MessageContent[]>([])
 
+  // 当前活跃 stream 的唯一 ID，用于丢弃过期 stream 的事件，防止并发 stream 共享 buffer
+  const activeStreamIdRef = useRef<string | null>(null)
+
   /**
    * 打开聊天窗口
    */
@@ -641,21 +650,20 @@ export function useChatState(options: UseChatStateOptions = {}): UseChatStateRet
    * 根据事件类型进行不同的处理
    */
   const handleSSEEvent = useCallback(
-    (event: SSEEvent) => {
+    (event: SSEEvent, streamId?: string) => {
       const { event: eventType, data } = event
 
+      // 并发 stream 防护：除 message_start 外的所有事件必须匹配当前活跃 streamId
+      if (eventType !== 'message_start' && streamId !== activeStreamIdRef.current) {
+        return
+      }
+
       switch (eventType) {
         case 'message_start': {
-          // 开始接收新消息
           setIsStreaming(true)
 
-          // 重置文本消息回调标记
           textMessageCallbackTriggeredRef.current = false
-
-          // 重置文本缓冲区
           textBufferRef.current = ''
-
-          // 重置卡片缓存队列
           pendingCardsRef.current = []
 
           // T039: 保存 sessionId 和 userId（如果后端返回）
@@ -1088,6 +1096,17 @@ export function useChatState(options: UseChatStateOptions = {}): UseChatStateRet
   )
 
 
+  const startStream = useCallback((): ((event: SSEEvent) => void) => {
+    const streamId = `stream-${Date.now()}-${Math.random().toString(36).slice(2)}`
+    activeStreamIdRef.current = streamId
+    textBufferRef.current = ''
+    pendingCardsRef.current = []
+    productMapRef.current.clear()
+    rawProductMapRef.current.clear()
+    currentMessageRef.current = null
+    return (event: SSEEvent) => handleSSEEvent(event, streamId)
+  }, [handleSSEEvent])
+
   return {
     messages,
     isOpen,
@@ -1104,6 +1123,7 @@ export function useChatState(options: UseChatStateOptions = {}): UseChatStateRet
     setMessages,
     clearMessages,
     handleSSEEvent,
+    startStream,
     saveSession,
     clearSession,
   }

package/src/components/LiveChatWidget/utils/fetcher.ts

@@ -60,6 +60,8 @@ export interface FetcherOptions {
   recaptchaSitekey?: string
   recaptchaAction?: string
   recaptchaHeaderKey?: string
+  /** 外部传入的 AbortSignal，用于提前中止请求 */
+  signal?: AbortSignal
 }
 
 /**
@@ -76,8 +78,8 @@ export const fetcher = async ({
   recaptchaSitekey,
   recaptchaAction = '',
   recaptchaHeaderKey = 'X-Recaptcha-Token',
+  signal: externalSignal,
 }: FetcherOptions): Promise<Response> => {
-  // 获取 reCAPTCHA headers（如果需要）
   let recaptchaHeaders: Record<string, string> = {}
   if (needRecaptcha) {
     if (!recaptchaSitekey) {
@@ -87,14 +89,23 @@ export const fetcher = async ({
     }
   }
 
-  // 准备请求体
   const bodyData = body ? JSON.stringify(body) : undefined
 
+  // 合并外部 signal（用于手动中止）和超时 signal
   const controller = new AbortController()
   let timeoutTimer: NodeJS.Timeout | undefined
   if (timeout) {
     timeoutTimer = setTimeout(() => controller.abort(), timeout)
   }
+  // 如果外部 signal 已中止或在请求期间中止，同步到内部 controller
+  const onExternalAbort = () => controller.abort()
+  if (externalSignal) {
+    if (externalSignal.aborted) {
+      controller.abort()
+    } else {
+      externalSignal.addEventListener('abort', onExternalAbort, { once: true })
+    }
+  }
 
   try {
     const response = await fetch(url, {
@@ -119,6 +130,8 @@ export const fetcher = async ({
       clearTimeout(timeoutTimer)
     }
     throw error
+  } finally {
+    externalSignal?.removeEventListener('abort', onExternalAbort)
   }
 }
 

package/src/components/index.ts

@@ -13,6 +13,8 @@ export * from './credits/index.js'
 
 export * from './registration/index.js'
 
+export * from './memberPopup/index.js'
+
 
 
 // LiveChatWidget 导出

package/src/components/memberPopup/MemberPopup.tsx

@@ -0,0 +1,283 @@
+'use client'
+
+import { lazy, Suspense, useState, useCallback } from 'react'
+import { Picture } from '@anker-in/headless-ui'
+import { type HeadlessConfig, useHeadlessContext, classNames as cn } from '@anker-in/lib'
+import {
+  MemberPopupActionType,
+  MemberPopupPanelType,
+  type MemberPopupCopy,
+  type MemberPopupContextValue,
+  type MemberPopupItem,
+} from './type'
+import { MemberPopupProvider } from './context/provider'
+import { useMemberPopupContext } from './context/provider'
+import { ViewStackContext, type ViewPayload } from './context/viewStack'
+import { IconClose, IconArrow, IconCredit, IconBag, IconReferral, IconSwitch, IconSubscription } from './icons'
+import { ROUNDED_BRANDS } from '../../constants'
+
+const EarnCredits = lazy(() => import('./panels/EarnCredits'))
+const ConsumeCredits = lazy(() => import('./panels/ConsumeCredits'))
+const Referral = lazy(() => import('./panels/Referral'))
+const CompleteProfile = lazy(() => import('./panels/EarnCredits/CompleteProfilePanel'))
+const Subscribe = lazy(() => import('./panels/EarnCredits/SubscribePanel'))
+const SubscribeEmail = lazy(() => import('./panels/EarnCredits/SubscribeEmailPanel'))
+const Activate = lazy(() => import('./panels/EarnCredits/ActivatePanel'))
+const RedeemCoupon = lazy(() => import('./panels/ConsumeCredits/RedeemCouponPanel'))
+
+type MemberPopupProps = MemberPopupContextValue & {
+  headlessConfig: HeadlessConfig
+  copy: MemberPopupCopy
+  bottomOffset?: string
+}
+
+export function MemberPopup({ copy, bottomOffset = '24px', ...providerProps }: MemberPopupProps) {
+  return (
+    <MemberPopupProvider {...providerProps} earnCreditsCopy={copy.earnCredits}>
+      <MemberPopupContent copy={copy} bottomOffset={bottomOffset} />
+    </MemberPopupProvider>
+  )
+}
+
+type MemberPopupContentProps = {
+  copy: MemberPopupCopy
+  bottomOffset: string
+}
+
+function MemberPopupContent({ copy, bottomOffset }: MemberPopupContentProps) {
+  const { profile, openSignInPopup, openSignUpPopup } = useMemberPopupContext()
+  const { brand, storeDomain } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
+  const isLogin = !!profile
+  const [isOpen, setIsOpen] = useState(false)
+  const [viewStack, setViewStack] = useState<ViewPayload[]>([])
+  const [isSubscribeSuccess, setIsSubscribeSuccess] = useState(false)
+  const [isActivateSuccess, setIsActivateSuccess] = useState(false)
+  const [isProfileCompleteSuccess, setIsProfileCompleteSuccess] = useState(false)
+
+  const currentView = viewStack[viewStack.length - 1] ?? null
+
+  const pushView = useCallback((view: ViewPayload) => {
+    setViewStack(prev => [...prev, view])
+  }, [])
+
+  const popView = useCallback(() => {
+    setViewStack(prev => prev.slice(0, -1))
+  }, [])
+
+  function handleAction(type: MemberPopupActionType, url?: string) {
+    switch (type) {
+      case MemberPopupActionType.ExternalLink:
+        if (url) window.open(url, '_blank', 'noopener,noreferrer')
+        break
+      case MemberPopupActionType.OpenEarnCredits:
+        pushView({ type: MemberPopupPanelType.EarnCredits })
+        break
+      case MemberPopupActionType.OpenConsumeCredits:
+        pushView({ type: MemberPopupPanelType.ConsumeCredits })
+        break
+      case MemberPopupActionType.OpenReferral:
+        pushView({ type: MemberPopupPanelType.Referral })
+        break
+      case MemberPopupActionType.OpenSubscribe:
+        pushView({ type: MemberPopupPanelType.Subscribe })
+        break
+    }
+  }
+
+  function handleClose() {
+    setIsOpen(false)
+    setViewStack([])
+  }
+
+  return (
+    <ViewStackContext.Provider value={{ pushView, popView }}>
+      {isOpen && (
+        <div
+          className="fixed inset-0 z-[998]"
+          onClick={handleClose}
+        />
+      )}
+      <div className="fixed right-0 z-[999] flex flex-col items-end pr-[16px]" style={{ bottom: bottomOffset }}>
+        {isOpen && (
+          <div
+            className={cn('relative mb-[8px] flex w-[420px] max-w-[calc(100vw-32px)] min-h-[600px] flex-col overflow-hidden bg-white shadow-[0_8px_32px_rgba(0,0,0,0.16)] cmp-md:w-[358px] cmp-sm:w-[258px]', rounded ? 'rounded-[12px]' : 'rounded-none')}
+            onClick={e => e.stopPropagation()}
+          >
+            <div className="absolute right-[-8px] top-[24px] size-0 border-y-8 border-l-8 border-y-transparent border-l-white" />
+            <div className="flex items-center justify-between px-[16px] pb-[8px] pt-[16px]">
+              <button
+                className="flex size-[24px] cursor-pointer items-center justify-center"
+                onClick={popView}
+                aria-label="Back"
+              >
+                <IconSwitch />
+              </button>
+              <button
+                className="flex size-[24px] cursor-pointer items-center justify-center"
+                onClick={handleClose}
+                aria-label="Close"
+              >
+                <IconClose />
+              </button>
+            </div>
+
+            <div
+              className="flex flex-1 flex-col gap-[12px] overflow-y-auto p-[16px]"
+              style={{ maxHeight: 'min(calc(80vh - 118px), 606px)' }}
+            >
+              {currentView === null && (
+                <>
+                  {(copy.title || copy.subtitle) && (
+                    <div className="flex flex-col gap-[4px]">
+                      {copy.title && (
+                        <h2 className="text-[24px] font-[700] leading-[1.2] text-[#080a0f]">{copy.title}</h2>
+                      )}
+                      {copy.subtitle && (
+                        <p className="text-[16px] font-[700] leading-snug text-[#4a4c56]">{copy.subtitle}</p>
+                      )}
+                    </div>
+                  )}
+                  {copy.list.map((item, i) => (
+                    <HomeCard key={i} item={item} onAction={handleAction} rounded={rounded} />
+                  ))}
+                </>
+              )}
+
+              {currentView !== null && (
+                <Suspense
+                  fallback={
+                    <div className="flex items-center justify-center py-[32px]">
+                      <div className="size-[32px] animate-spin rounded-full border-[3px] border-[#080a0f] border-t-transparent" />
+                    </div>
+                  }
+                >
+                  {currentView.type === MemberPopupPanelType.EarnCredits && copy.earnCredits && (
+                    <EarnCredits
+                      copy={copy.earnCredits}
+                      onClose={popView}
+                      isSubscribeSuccess={isSubscribeSuccess}
+                      isActivateSuccess={isActivateSuccess}
+                      isProfileCompleteSuccess={isProfileCompleteSuccess}
+                      onSubscribeSuccess={() => setIsSubscribeSuccess(true)}
+                      onActivateSuccess={() => setIsActivateSuccess(true)}
+                      onProfileCompleteSuccess={() => setIsProfileCompleteSuccess(true)}
+                    />
+                  )}
+                  {currentView.type === MemberPopupPanelType.ConsumeCredits && copy.consumeCredits && (
+                    <ConsumeCredits copy={copy.consumeCredits} onClose={popView} />
+                  )}
+                  {currentView.type === MemberPopupPanelType.Referral && copy.referral && (
+                    <Referral copy={copy.referral} onClose={popView} />
+                  )}
+                  {currentView.type === MemberPopupPanelType.CompleteProfile && copy.earnCredits && (
+                    <CompleteProfile copy={copy.earnCredits.completeProfile} shopifyStoreDomain={storeDomain} onClose={popView} onSuccess={currentView.props?.onSuccess} />
+                  )}
+                  {currentView.type === MemberPopupPanelType.Subscribe && copy.subscribe && (
+                    <Subscribe copy={copy.subscribe} email={profile?.email} onClose={popView} onSuccess={currentView.props?.onSuccess} />
+                  )}
+                  {currentView.type === MemberPopupPanelType.SubscribeEmail && copy.earnCredits && (
+                    <SubscribeEmail copy={copy.earnCredits.subscribe} email={profile?.email} onClose={popView} onSuccess={currentView.props?.onSuccess} />
+                  )}
+                  {currentView.type === MemberPopupPanelType.Activate && copy.earnCredits && (
+                    <Activate copy={copy.earnCredits.authCodeActivate} onClose={popView} onSuccess={currentView.props?.onSuccess} />
+                  )}
+                  {currentView.type === MemberPopupPanelType.RedeemCoupon && currentView.props && copy.consumeCredits && (
+                    <RedeemCoupon
+                      itemTitle={currentView.props.itemTitle}
+                      itemCredits={currentView.props.itemCredits}
+                      itemImage={currentView.props.itemImage}
+                      itemValue={currentView.props.itemValue}
+                      itemOff={currentView.props.itemOff}
+                      redeemId={currentView.props.redeemId}
+                      userId={currentView.props.userId}
+                      alpcConfig={currentView.props.alpcConfig}
+                      copy={copy.consumeCredits.redeemModal}
+                      pointUnit={copy.consumeCredits.pointUnit}
+                      onClose={popView}
+                    />
+                  )}
+                </Suspense>
+              )}
+            </div>
+
+            {copy.footer && !isLogin && (
+              <div className="border-t border-[#dadce0] p-[16px]">
+                <div className="flex items-center justify-between gap-[16px]">
+                  <div className="flex items-center gap-[4px]">
+                    <span className="text-[14px] font-[700] text-[#080a0f]">{copy.footer.loginHint}</span>
+                    <button
+                      className="cursor-pointer text-[14px] font-[700] text-[#080a0f] underline"
+                      onClick={openSignInPopup}
+                    >
+                      {copy.footer.loginLabel}
+                    </button>
+                  </div>
+                  <div className="flex shrink-0 items-center gap-[8px]">
+                    <button
+                      className={cn('cursor-pointer border-[1.6px] border-[#080a0f] px-[20px] pb-[10px] pt-[11px] text-[14px] font-[700] leading-[1.2] text-[#080a0f]', rounded ? 'rounded-[4px]' : 'rounded-none')}
+                      onClick={openSignUpPopup}
+                    >
+                      {copy.footer.joinLabel}
+                    </button>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        <button
+          className="flex cursor-pointer items-center justify-center rounded-full bg-white shadow-lg"
+          onClick={() => setIsOpen(prev => !prev)}
+          aria-label={copy.triggerImg.alt ?? 'Open member popup'}
+        >
+          <Picture source={copy.triggerImg.url} alt={copy.triggerImg.alt ?? ''} className="size-[58px]" />
+        </button>
+      </div>
+    </ViewStackContext.Provider>
+  )
+}
+
+type HomeCardProps = {
+  item: MemberPopupItem
+  onAction: (type: MemberPopupActionType, url?: string) => void
+  rounded: boolean
+}
+
+function HomeCard({ item, onAction, rounded }: HomeCardProps) {
+  const ACTION_ICON: Partial<Record<MemberPopupActionType, typeof IconCredit>> = {
+    [MemberPopupActionType.OpenEarnCredits]: IconCredit,
+    [MemberPopupActionType.OpenConsumeCredits]: IconBag,
+    [MemberPopupActionType.OpenReferral]: IconReferral,
+    [MemberPopupActionType.OpenSubscribe]: IconSubscription,
+  }
+
+  return (
+    <div className={cn('flex flex-col gap-[16px] bg-[#f5f6f7] p-[16px]', rounded ? 'rounded-[8px]' : 'rounded-none')}>
+      <div className="flex flex-col gap-[4px]">
+        <h3 className="text-[20px] font-[700] leading-[1.2] text-[#1e2024]">{item.title}</h3>
+        {item.description && <p className="text-[14px] font-[700] leading-[1.43] text-[#1e2024]">{item.description}</p>}
+      </div>
+
+      <div className="flex flex-col gap-[16px]">
+        {item.links.map((link, i) => {
+          const IconComponent = ACTION_ICON[link.type]
+          return (
+            <div key={i}>
+              {i > 0 && <div className="mb-[16px] h-px bg-[#dadce0]" />}
+              <button
+                className="flex w-full cursor-pointer items-center gap-[12px]"
+                onClick={() => onAction(link.type, link.url)}
+              >
+                {IconComponent && <IconComponent className="size-[24px] shrink-0" />}
+                <span className="flex-1 text-left text-[14px] font-[700] text-[#1e2024]">{link.label}</span>
+                <IconArrow className="size-[16px] shrink-0" />
+              </button>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

package/src/components/memberPopup/context/provider.tsx

@@ -0,0 +1,52 @@
+import { createContext, PropsWithChildren, useContext } from 'react'
+import { HeadlessProvider, type HeadlessConfig } from '@anker-in/lib'
+import { RegistrationProvider } from '../../registration'
+import type { EarnCreditsCopy, MemberPopupContextValue } from '../type'
+
+export const MemberPopupContext = createContext<MemberPopupContextValue>({
+  profile: null,
+  isLoadingProfile: false,
+  creditInfo: undefined,
+  fetchCreditInfo: () => {},
+  openSignUpPopup: () => {},
+  openSignInPopup: () => {},
+  taskIdToTypeMapping: {},
+  alpcConfig: {
+    brand: '',
+    locale: '',
+    appName: '',
+  },
+})
+
+type MemberPopupProviderProps = MemberPopupContextValue & {
+  headlessConfig: HeadlessConfig
+  earnCreditsCopy?: EarnCreditsCopy
+}
+
+export function MemberPopupProvider({
+  children,
+  headlessConfig,
+  earnCreditsCopy,
+  ...contextValue
+}: PropsWithChildren<MemberPopupProviderProps>) {
+  return (
+    <HeadlessProvider headlessConfig={headlessConfig}>
+      <RegistrationProvider
+        email={contextValue.profile?.email}
+        copy={{ authCodeActivate: earnCreditsCopy?.authCodeActivate }}
+      >
+        <MemberPopupContext.Provider value={contextValue}>
+          {children}
+        </MemberPopupContext.Provider>
+      </RegistrationProvider>
+    </HeadlessProvider>
+  )
+}
+
+export function useMemberPopupContext() {
+  const context = useContext(MemberPopupContext)
+  if (!context) {
+    throw new Error('useMemberPopupContext must be used within a MemberPopupProvider')
+  }
+  return context
+}

package/src/components/memberPopup/context/viewStack.tsx

@@ -0,0 +1,23 @@
+'use client'
+
+import { createContext, useContext, ReactNode } from 'react'
+import type { MemberPopupPanelType } from '../type'
+
+export type ViewPayload = {
+  type: MemberPopupPanelType
+  props?: Record<string, any>
+}
+
+type ViewStackContextValue = {
+  pushView: (view: ViewPayload) => void
+  popView: () => void
+}
+
+export const ViewStackContext = createContext<ViewStackContextValue>({
+  pushView: () => {},
+  popView: () => {},
+})
+
+export function useViewStack() {
+  return useContext(ViewStackContext)
+}