@anker-in/campaign-ui 0.0.33-alpha3 → 0.0.33-alpha4

package/src/components/chat/action.tsx

@@ -14,6 +14,8 @@ interface Message {
 export interface ActionProps {
   start?: string
   history: Message[]
+  gotocheckoutRender?: string | ((_props: any) => React.ReactElement)
+  gotocartRender?: string | ((_props: any) => React.ReactElement)
   addtocartRender?: string | ((_props: any) => React.ReactElement)
   productRender?: string | ((_props: any) => React.ReactElement)
   signupRender?: string | ((_props: any) => React.ReactElement)
@@ -23,6 +25,8 @@ export interface ActionProps {
 export const CopilotAction = ({
   start,
   history,
+  gotocheckoutRender,
+  gotocartRender,
   addtocartRender,
   productRender,
   signupRender,
@@ -35,7 +39,6 @@ export const CopilotAction = ({
     if (originhistory?.length > 0) {
       const content = originhistory?.map(value => {
         if (value?.name && value?.arguments) {
-          console.log('value?.name && value?.arguments', value?.name, value?.arguments)
           return new ActionExecutionMessage({
             name: value?.name,
             arguments: value?.arguments,
@@ -52,20 +55,40 @@ export const CopilotAction = ({
   }, [history])
 
   useCopilotAction({
-    name: 'add_cart',
-    description: 'add tocart',
+    name: 'go_to_checkout',
+    description: 'go to cart',
     parameters: [{ sku: '', handle: '' }] as any,
-    render: addtocartRender || (props => <div>{JSON.stringify(props)}</div>),
+    render: gotocheckoutRender || (props => <div className="hidden">{JSON.stringify(props)}</div>),
     handler: function () {
       // console.log('buynow-props', props)
     },
   })
 
   useCopilotAction({
-    name: 'buynow',
-    description: 'buy now',
+    name: 'go_to_cart',
+    description: 'go to cart',
     parameters: [{ sku: '', handle: '' }] as any,
-    render: productRender || (props => <div>{JSON.stringify(props)}</div>),
+    render: gotocartRender || (props => <div className="hidden">{JSON.stringify(props)}</div>),
+    handler: function () {
+      // console.log('buynow-props', props)
+    },
+  })
+
+  useCopilotAction({
+    name: 'add_to_cart',
+    description: 'add to cart',
+    parameters: [{ sku: '', handle: '' }] as any,
+    render: addtocartRender || (props => <div className="hidden">{JSON.stringify(props)}</div>),
+    handler: function () {
+      // console.log('buynow-props', props)
+    },
+  })
+
+  useCopilotAction({
+    name: 'show_product_card',
+    description: 'product card',
+    parameters: [{ sku: '', handle: '' }] as any,
+    render: productRender || (props => <div className="hidden">{JSON.stringify(props)}</div>),
     handler: function () {
       // console.log('buynow-props', props)
     },
@@ -79,7 +102,7 @@ export const CopilotAction = ({
         name: 'signup',
       },
     ] as any,
-    render: signupRender || (props => <div>{JSON.stringify(props)}</div>),
+    render: signupRender || (props => <div className="hidden">{JSON.stringify(props)}</div>),
     handler: function () {
       // console.log('signup-props', props)
     },

package/src/components/chat/index.tsx

@@ -27,17 +27,27 @@ export interface ChatProps {
    */
   query?: string
   /** 'follow' or 'unfollow' | true or false
+   * follow: ResponseButton 会跟随在 messages 的后边
+   * unfollow: ResponseButton 在聊天框底部
    */
   showResponseButton?: string | boolean
-  /** 加购卡片，接受参数： {"status":"complete","args":[{"sku":"A3936031","handle":"space-a40-a3936031"}],"result":""}
+  /** 跳转 checkout action 卡片，接受参数： {"status":"complete","args":[{"sku":["A3936031"],"handle":"space-a40-a3936031"}],"result":""}
+   * 后端接口文档：https://anker-in.feishu.cn/wiki/DOYJwE9oxipWmYk072ncnJNznBb
+   */
+  gotocheckoutRender?: string | ((_props: any) => React.ReactElement)
+  /** 打开购物车 action 卡片，接受参数： {"status":"complete","args":[{"sku":["A3936031"],"handle":"space-a40-a3936031"}],"result":""}
+   * 后端接口文档：https://anker-in.feishu.cn/wiki/DOYJwE9oxipWmYk072ncnJNznBb
+   */
+  gotocartRender?: string | ((_props: any) => React.ReactElement)
+  /** 加购卡片，接受参数： {"status":"complete","args":[{"sku":["A3936031"],"handle":"space-a40-a3936031"}],"result":""}
    * 后端接口文档：https://anker-in.feishu.cn/wiki/DOYJwE9oxipWmYk072ncnJNznBb
    */
   addtocartRender?: string | ((_props: any) => React.ReactElement)
-  /** 产品卡片，接受参数： {"status":"complete","args":[{"sku":"A3936031","handle":"space-a40-a3936031"}],"result":""}
+  /** 产品卡片，接受参数： {"status":"complete","args":[{"sku":["A3936031"],"handle":"space-a40-a3936031"}],"result":""}
    * 后端接口文档：https://anker-in.feishu.cn/wiki/DOYJwE9oxipWmYk072ncnJNznBb
    */
   productRender?: string | ((_props: any) => React.ReactElement)
-  /** 订阅卡片，接受参数：
+  /** 订阅卡片，接受参数： {"status":"complete","args":[{"sku":["A3936031"],"handle":"space-a40-a3936031"}],"result":""}
    * 后端接口文档：https://anker-in.feishu.cn/wiki/DOYJwE9oxipWmYk072ncnJNznBb
    */
   signupRender?: string | ((_props: any) => React.ReactElement)
@@ -61,6 +71,8 @@ const Chat = (props: ChatProps) => {
     locale = '',
     query = '',
     showResponseButton,
+    gotocheckoutRender,
+    gotocartRender,
     addtocartRender,
     productRender,
     signupRender,
@@ -182,6 +194,8 @@ const Chat = (props: ChatProps) => {
             <CopilotAction
               start={start}
               history={history}
+              gotocartRender={gotocartRender}
+              gotocheckoutRender={gotocheckoutRender}
               addtocartRender={addtocartRender}
               productRender={productRender}
               signupRender={signupRender}

package/src/components/chat/messages.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import type { MessagesProps } from './props.js'
 import { useChatContext } from '@copilotkit/react-ui'
 import { Markdown } from './markdown.js'
@@ -13,6 +13,8 @@ import {
 } from '@copilotkit/runtime-client-gql'
 
 const Messages = ({ messages, inProgress, ResponseButton, children }: MessagesProps) => {
+  const [isExpanded, setIsExpanded] = useState(true)
+
   const { chatComponentsCache } = useCopilotContext()
 
   const context = useChatContext()
@@ -35,6 +37,7 @@ const Messages = ({ messages, inProgress, ResponseButton, children }: MessagesPr
   }
 
   const messagesEndRef = React.useRef<HTMLDivElement>(null)
+  const messagesEndChildRef = React.useRef<HTMLDivElement>(null)
 
   const scrollToBottom = () => {
     if (messagesEndRef.current) {
@@ -48,6 +51,40 @@ const Messages = ({ messages, inProgress, ResponseButton, children }: MessagesPr
     scrollToBottom()
   }, [messages])
 
+  useEffect(() => {
+    const textarea = document.querySelector('.copilotKitInput textarea') as HTMLTextAreaElement
+
+    textarea &&
+      textarea.addEventListener('click', function () {
+        if (textarea.value && document.activeElement === textarea) {
+          setIsExpanded(false)
+        } else {
+          setIsExpanded(true)
+          scrollToBottom()
+        }
+      })
+    textarea &&
+      textarea.addEventListener('input', function () {
+        if (textarea.value && document.activeElement === textarea) {
+          setIsExpanded(false)
+        } else {
+          setIsExpanded(true)
+          scrollToBottom()
+        }
+      })
+  }, [])
+
+  useEffect(() => {
+    const content = messagesEndChildRef.current
+    if (isExpanded && content) {
+      content.style.maxHeight = '500px'
+      content.style.overflow = 'visible'
+    } else if (!isExpanded && content) {
+      content.style.maxHeight = '0'
+      content.style.overflow = 'hidden'
+    }
+  }, [isExpanded])
+
   return (
     <div className="copilotKitMessages">
       {messages.map((message, index) => {
@@ -140,7 +177,11 @@ const Messages = ({ messages, inProgress, ResponseButton, children }: MessagesPr
         }
       })}
       <div className="responseButtonBox">{ResponseButton}</div>
-      <footer ref={messagesEndRef}>{children}</footer>
+      <footer ref={messagesEndRef}>
+        <div className="copilotKitMessagesFooter" ref={messagesEndChildRef}>
+          {children}
+        </div>
+      </footer>
     </div>
   )
 }

package/src/components/chat/response.tsx

@@ -7,10 +7,12 @@ const ResponseButton = () => {
   const { isLoading, reloadMessages, stopGeneration } = useCopilotChat()
 
   return (
-    <button onClick={isLoading ? stopGeneration : reloadMessages} className="copilotKitResponseButton">
-      {isLoading ? context.labels.stopGenerating : context.labels.regenerateResponse}
-      <span>{isLoading ? context.icons.stopIcon : context.icons.regenerateIcon}</span>
-    </button>
+    !isLoading && (
+      <button onClick={isLoading ? stopGeneration : reloadMessages} className="copilotKitResponseButton">
+        {isLoading ? context.labels.stopGenerating : context.labels.regenerateResponse}
+        <span>{isLoading ? context.icons.stopIcon : context.icons.regenerateIcon}</span>
+      </button>
+    )
   )
 }
 

package/src/stories/chat.stories.tsx

@@ -20,8 +20,7 @@ const meta: Meta<typeof Chat> = {
   // More on argTypes: https://storybook.js.org/docs/api/argtypes
   decorators: [
     Story => (
-      <div style={{ marginTop: '40em' }}>
-        {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
+      <div style={{ height: '700px' }}>
         <Story />
       </div>
     ),
@@ -35,7 +34,7 @@ export const Default: Story = {
     title: 'DTC Live Chat',
     runtimeUrl: 'https://beta-dtcapi.anker.com',
     shopify_domain: 'soundcoreusa.myshopify.com',
-    user_id: 'arno5',
+    user_id: 'arno6',
     showResponseButton: 'follow',
     lang: { popupTip: 'Hi ! Welcome to soundcore Innovations live chat！', popupTipTimeout: [3000, 6000] },
   },

package/src/styles/css/messages.css

@@ -75,3 +75,11 @@
 .copilotKitMessage.copilotKitAssistantMessage:has(.copilotKitMarkdown:empty) {
   display: none;
 }
+
+.copilotKitMessagesFooter {
+  transition: all 300ms ease-out;
+}
+
+.copilotKitCustomAssistantMessage .hidden {
+  display: none !important;
+}

package/src/styles/css/response.css

@@ -14,7 +14,6 @@
   text-decoration: none;
   text-transform: none;
   white-space: nowrap;
-  margin-top: 15px;
 }
 
 .copilotKitResponseButton:hover {