@anker-in/campaign-ui 0.3.4 → 0.3.5

package/src/components/LiveChatWidget/LiveChatWidget.tsx

@@ -183,6 +183,9 @@ export const LiveChatWidget: React.FC<LiveChatWidgetProps> = ({
     clearSession,
   } = chatState
 
+  // 初始化加载状态（用户未配置欢迎语时，显示 loading 直到接口返回）
+  const [isInitializing, setIsInitializing] = React.useState(false)
+
   // API 调用
   const { sendMessageStream, createSession } = useChatAPI({
     apiBaseUrl,
@@ -371,6 +374,11 @@ export const LiveChatWidget: React.FC<LiveChatWidgetProps> = ({
   const handleCreateNewSession = useCallback(async () => {
     if (!userId) return
 
+    // 如果用户没有配置欢迎语，显示 loading 状态
+    if (!welcomeMessage) {
+      setIsInitializing(true)
+    }
+
     try {
       const response = await createSession({
         user_id: userId,
@@ -450,6 +458,9 @@ export const LiveChatWidget: React.FC<LiveChatWidgetProps> = ({
         ],
         timestamp: Date.now(),
       })
+    } finally {
+      // 接口返回后关闭 loading 状态
+      setIsInitializing(false)
     }
   }, [
     userId,
@@ -470,6 +481,11 @@ export const LiveChatWidget: React.FC<LiveChatWidgetProps> = ({
    */
   const handleResumeSession = useCallback(
     async (existingSessionId: string) => {
+      // 如果用户没有配置欢迎语，显示 loading 状态
+      if (!welcomeMessage) {
+        setIsInitializing(true)
+      }
+
       try {
         const response = await createSession({
           user_id: userId,
@@ -590,6 +606,9 @@ export const LiveChatWidget: React.FC<LiveChatWidgetProps> = ({
           clearSession()
           handleCreateNewSession()
         }
+      } finally {
+        // 接口返回后关闭 loading 状态
+        setIsInitializing(false)
       }
     },
     [
@@ -873,6 +892,7 @@ export const LiveChatWidget: React.FC<LiveChatWidgetProps> = ({
               title={title}
               logoUrl={logoUrl}
               isSending={isStreaming}
+              isLoadingHistory={isInitializing}
               rendererRegistry={rendererRegistry}
               inputPlaceholder=""
               onAddToCart={onAddToCart}

package/src/components/LiveChatWidget/components/MessageContent/PromotionList.tsx

@@ -103,7 +103,7 @@ export const PromotionList: React.FC<PromotionListProps> = ({ data, isUser = fal
   return (
     <div className="space-y-3">
       {results.map(promotion => {
-        const bannerUrl = promotion.banner_url ||promotion?.metadata?.banner_url
+        const bannerUrl = promotion.banner_url || promotion?.metadata?.banner_url
 
         // 没有图片则不展示
         if (!bannerUrl) {

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

@@ -117,33 +117,37 @@ export const MessageList: React.FC<MessageListProps> = ({
   className = '',
   onAddToCart,
 }) => {
-  const listRef = useRef<HTMLDivElement>(null)
+  // 使用 callback ref + state 确保 DOM 挂载后触发重新渲染
+  const [listElement, setListElement] = useState<HTMLDivElement | null>(null)
+  const listRef = useCallback((node: HTMLDivElement | null) => {
+    setListElement(node)
+  }, [])
   const [showScrollButton, setShowScrollButton] = useState(false)
 
   // 检查是否接近底部
-  const isNearBottom = useCallback((threshold = 100) => {
-    const container = listRef.current
-    if (!container) return true
-
-    const { scrollTop, scrollHeight, clientHeight } = container
-    return scrollHeight - scrollTop - clientHeight < threshold
-  }, [])
+  const isNearBottom = useCallback(
+    (threshold = 100) => {
+      if (!listElement) return true
+
+      const { scrollTop, scrollHeight, clientHeight } = listElement
+      return scrollHeight - scrollTop - clientHeight < threshold
+    },
+    [listElement]
+  )
 
   // 平滑滚动到底部
   const scrollToBottom = useCallback(() => {
-    const container = listRef.current
-    if (!container) return
+    if (!listElement) return
 
-    container.scrollTo({
-      top: container.scrollHeight,
+    listElement.scrollTo({
+      top: listElement.scrollHeight,
       behavior: 'smooth',
     })
-  }, [])
+  }, [listElement])
 
   // 监听滚动事件，控制按钮显示
   useEffect(() => {
-    const container = listRef.current
-    if (!container) return
+    if (!listElement) return
 
     const handleScroll = () => {
       setShowScrollButton(!isNearBottom())
@@ -152,9 +156,9 @@ export const MessageList: React.FC<MessageListProps> = ({
     // 初始检查
     handleScroll()
 
-    container.addEventListener('scroll', handleScroll, { passive: true })
-    return () => container.removeEventListener('scroll', handleScroll)
-  }, [isNearBottom])
+    listElement.addEventListener('scroll', handleScroll, { passive: true })
+    return () => listElement.removeEventListener('scroll', handleScroll)
+  }, [listElement, isNearBottom])
 
   // 当消息列表变化时，重新检查按钮状态（但不在自动滚动时）
   useEffect(() => {
@@ -169,22 +173,31 @@ export const MessageList: React.FC<MessageListProps> = ({
 
   // 监听消息列表变化，自动滚动
   useEffect(() => {
-    if (!autoScroll || !listRef.current) return
+    if (!autoScroll || !listElement) return
 
     // 延迟滚动以确保 DOM 已更新
     const timeoutId = setTimeout(() => {
-      if (listRef.current) {
-        listRef.current.scrollTop = listRef.current.scrollHeight
+      if (listElement) {
+        listElement.scrollTop = listElement.scrollHeight
         // 自动滚动到底部后，隐藏按钮
         setShowScrollButton(false)
       }
     }, 100)
 
     return () => clearTimeout(timeoutId)
-  }, [messages, autoScroll])
-
-  // 空状态
-  if (messages.length === 0 && !isLoadingHistory) {
+  }, [messages, autoScroll, listElement])
+
+  // 空状态 + 加载中
+  if (messages.length === 0) {
+    if (isLoadingHistory) {
+      // 加载中，显示 loading
+      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>
     )
@@ -199,9 +212,6 @@ export const MessageList: React.FC<MessageListProps> = ({
           ${className}
         `}
       >
-        {/* 加载历史消息指示器 */}
-        {isLoadingHistory && <LoadingIndicator />}
-
         {/* 消息列表 */}
         <div className="flex flex-col gap-1">
           {messages.map(message => (
@@ -223,22 +233,7 @@ export const MessageList: React.FC<MessageListProps> = ({
       {/* 回到底部按钮 */}
       <button
         onClick={scrollToBottom}
-        className={`flex -translate-x-1/2 items-center justify-center ${showScrollButton ? '' : 'pointer-events-none'}`}
-        style={{
-          position: 'absolute',
-          bottom: '24px',
-          left: '50%',
-          zIndex: 10,
-          width: '40px',
-          height: '40px',
-          borderRadius: '50%',
-          backgroundColor: 'rgba(255, 255, 255, 0.95)',
-          boxShadow: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
-          transition: 'all 300ms ease-in-out',
-          opacity: showScrollButton ? 1 : 0,
-          cursor: 'pointer',
-          border: 'none',
-        }}
+        className={`livechat-scroll-to-bottom ${showScrollButton ? 'visible' : 'hidden'}`}
         aria-label="Scroll to bottom"
         aria-hidden={!showScrollButton}
       >

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

@@ -357,8 +357,9 @@ export interface UseChatStateOptions {
 
   /**
    * AI 回复促销卡片时触发
+   * @param promotions 促销活动数组数据
    */
-  onPromotionList?: () => void
+  onPromotionList?: (promotions: any[]) => void
 
   /**
    * 商品添加到购物车回调
@@ -852,8 +853,8 @@ export function useChatState(options: UseChatStateOptions = {}): UseChatStateRet
             // ========== 6. 促销活动列表 (Promotion List) ==========
             // 后端格式: {type: "promotion_list", data: {found, count, total, results: [...]}}
             else if (contentType === 'promotion_list' && contentData.found !== undefined) {
-              // 触发促销卡片回调
-              onPromotionList?.()
+              // 触发促销卡片回调，传递促销活动数组
+              onPromotionList?.(contentData.results || [])
 
               messageContent = {
                 type: 'promotion_list',

package/src/components/LiveChatWidget/types.ts

@@ -923,8 +923,9 @@ export interface LiveChatWidgetProps {
 
   /**
    * AI 回复促销卡片时触发
+   * @param promotions 促销活动数组数据
    */
-  onPromotionList?: () => void
+  onPromotionList?: (promotions: PromotionItem[]) => void
 
   /**
    * 商品操作回调

package/src/components/credits/creditsBanner/index.tsx

@@ -80,25 +80,25 @@ export function CreditsBanner({ copy, id }: { copy: CreditsBannerCopy; id?: stri
           ></div>
         )}
 
-        <Container className="l:h-auto !absolute inset-0 mx-auto grid h-full" asChild>
+        <Container className="l-tablet:h-auto !absolute inset-0 mx-auto grid h-full" asChild>
           <div className="grid grid-cols-12">
-            <div className="l:col-span-12 l:justify-start l:truncate l:pt-[32px] col-span-5 flex h-full flex-col justify-center text-[#1F2021]">
+            <div className="l-tablet:col-span-12 l-tablet:justify-start l-tablet:truncate l-tablet:pt-[32px] col-span-5 flex h-full flex-col justify-center text-[#1F2021]">
               <Heading
                 as="h1"
-                className="text-[48px] font-bold xl-xxl:text-[40px] l:text-[32px]"
+                className="text-[48px] font-bold xl-xxl:text-[40px] l-tablet:text-[32px]"
                 html={isLogin ? copy.login.title?.replace('$name', displayName || '') : copy.unLogin.title}
               ></Heading>
 
               <Text
                 size="3"
-                className="l:mt-[4px] l-xxl:text-[14px] mt-[16px]"
+                className="l-tablet:mt-[4px] l-xxl:text-[14px] mt-[16px]"
                 html={isLogin ? copy.login.description : copy.unLogin.description}
               ></Text>
 
               {!isLogin && (
                 <div
                   className={classNames(
-                    'mt-[32px] grid w-fit grid-flow-col gap-[12px] l:mt-[24px]',
+                    'mt-[32px] grid w-fit grid-flow-col gap-[12px] l-tablet:mt-[24px]',
                     isLogin && 'hidden'
                   )}
                 >

package/src/stories/LiveChatWidget.stories.tsx

@@ -147,7 +147,7 @@ type Story = StoryObj<typeof LiveChatWidget>
 export const Default: Story = {
   args: {
     // 基础配置
-    loginUserId: 'test_test',
+    loginUserId: 'test_test1',
     apiBaseUrl: 'http://172.16.38.183:3003',
     site: 'beta.eufy.com',
     channelCode: 'dtc',
@@ -159,14 +159,7 @@ export const Default: Story = {
     position: { bottom: '24px', right: '30px' },
 
     // 欢迎消息
-    welcomeMessage: `Welcome to eufy AI Assistant!
-
-I can help you with:
-- Product recommendations
-- Order tracking
-- FAQs and support
-
-How can I assist you today?`,
+    welcomeMessage: '',
 
     // 快捷回复
     quickReplies: [
@@ -179,9 +172,11 @@ How can I assist you today?`,
     // 法规协议弹窗
     complianceConfig: {
       title: "Hi! I'm your eufy AI assistant.",
-      content: "AI-generated responses can be inaccurate. Please verify important info. Do not input sensitive personal data.",
-      checkboxText: 'By starting to use "Live Chat", you agree to Anker\'s <a href="https://www.anker.com/pages/privacy-policy" target="_blank" rel="noopener noreferrer" style="text-decoration: underline;">LIVE CHAT PRIVACY NOTICE</a>.',
-      agreeButtonText: "Agree"
+      content:
+        'AI-generated responses can be inaccurate. Please verify important info. Do not input sensitive personal data.',
+      checkboxText:
+        'By starting to use "Live Chat", you agree to Anker\'s <a href="https://www.anker.com/pages/privacy-policy" target="_blank" rel="noopener noreferrer" style="text-decoration: underline;">LIVE CHAT PRIVACY NOTICE</a>.',
+      agreeButtonText: 'Agree',
     },
 
     // reCAPTCHA 配置（取消注释以启用）

package/src/styles/livechat.css

@@ -144,6 +144,35 @@
   background: var(--livechat-text-secondary);
 }
 
+/* 回到底部按钮样式 */
+.livechat-scroll-to-bottom {
+  position: absolute;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.95);
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  transition: opacity 300ms ease-in-out;
+  cursor: pointer;
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.livechat-scroll-to-bottom.hidden {
+  opacity: 0 !important;
+  pointer-events: none;
+}
+
+.livechat-scroll-to-bottom.visible {
+  opacity: 1 !important;
+}
+
 /* 思考状态动画 */
 .livechat-thinking-dots {
   display: inline-flex;