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

package/src/components/chat/action.tsx

@@ -14,31 +14,38 @@ interface Message {
 export interface ActionProps {
   start?: string
   history: Message[]
+  addtocartHandler?: (_args: any) => Promise<any>
+  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)
+  productRender?: string | ((_props: any) => React.ReactElement)
+  productRenderTipMessage?: string
   children?: React.ReactNode
 }
 
 export const CopilotAction = ({
   start,
   history,
+  addtocartHandler,
+  gotocheckoutRender,
+  gotocartRender,
   addtocartRender,
   productRender,
   signupRender,
   children,
 }: ActionProps) => {
-  const { setMessages } = useCopilotChat()
+  const { setMessages, appendMessage, isLoading } = useCopilotChat()
 
   useEffect(() => {
     const originhistory = history?.filter(value => value?.content || value?.arguments)
     if (originhistory?.length > 0) {
       const content = originhistory?.map(value => {
         if (value?.name && value?.arguments) {
-          console.log('value?.name && value?.arguments', value?.name, value?.arguments)
+          const args = value?.arguments?.map((item: any) => (item ? { ...item, ishistory: true } : {}))
           return new ActionExecutionMessage({
             name: value?.name,
-            arguments: value?.arguments,
+            arguments: args,
             scope: value?.scope,
           })
         }
@@ -52,25 +59,53 @@ 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 (props) {
+      addtocartHandler && addtocartHandler(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 (props) {
+      console.log('show_product_card-props', props)
+      // const ishistory = props?.find((item: { ishistory: any }) => item?.ishistory)
+      // if (!ishistory) {
+      //   const content = new TextMessage({
+      //     content: 'show product card',
+      //     role: Role.Assistant,
+      //   })
+      //   appendMessage(content)
+      // }
+    },
+  })
+
   useCopilotAction({
     name: 'signup',
     description: 'signup',
@@ -79,7 +114,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/button.tsx

@@ -2,18 +2,11 @@ import { useChatContext } from '@copilotkit/react-ui'
 
 import type { ButtonProps } from './props.js'
 
-const DefaultButton = ({ setOpen, setOpenTip }: ButtonProps) => {
+const DefaultButton = ({ setOpen }: ButtonProps) => {
   const context = useChatContext()
 
   return (
-    <button
-      onClick={() => {
-        setOpen(true)
-        setOpenTip(false)
-      }}
-      className="copilotKitButton "
-      aria-label="Open Chat"
-    >
+    <button onClick={() => setOpen()} className="copilotKitButton " aria-label="Open Chat">
       <div className="copilotKitButtonIcon copilotKitButtonIconOpen">{context.icons.openIcon}</div>
       <div className="copilotKitButtonIcon copilotKitButtonIconClose">{context.icons.closeIcon}</div>
     </button>

package/src/components/chat/index.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import React from 'react'
+import React, { useMemo } from 'react'
 import { useCallback, useState, useEffect } from 'react'
 import { CopilotKit } from '@copilotkit/react-core'
 import { CopilotPopup } from '@copilotkit/react-ui'
@@ -13,37 +13,53 @@ import fetcher from '../../helpers/fetcher.js'
 export interface ChatProps {
   title: string
   runtimeUrl: string
-  shopify_domain: string
+  shopifyDomain: string
   /** GA 的 client id
    */
-  user_id: string
+  userId: string
   /** 是否登陆用户 0 or 1
    */
   account?: string
   /** 用户浏览器语言
    */
   locale?: string
+  /** 开场白
+   */
+  prologue?: string
   /** ?a=1&b=2
    */
   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
    */
-  addtocartRender?: string | ((_props: any) => React.ReactElement)
-  /** 产品卡片，接受参数： {"status":"complete","args":[{"sku":"A3936031","handle":"space-a40-a3936031"}],"result":""}
+  gotocheckoutRender?: string | ((_props: any) => React.ReactElement)
+  /** 打开购物车 action 卡片，接受参数： {"status":"complete","args":[{"sku":["A3936031"],"handle":"space-a40-a3936031"}],"result":""}
    * 后端接口文档：https://anker-in.feishu.cn/wiki/DOYJwE9oxipWmYk072ncnJNznBb
    */
-  productRender?: string | ((_props: any) => React.ReactElement)
-  /** 订阅卡片，接受参数：
+  gotocartRender?: string | ((_props: any) => React.ReactElement)
+  /** 打开购物车 action 的触发事件
+   */
+  addtocartHandler?: (_args: any) => Promise<any>
+  /** 加购卡片，接受参数： {"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":""}
    * 后端接口文档：https://anker-in.feishu.cn/wiki/DOYJwE9oxipWmYk072ncnJNznBb
    */
   signupRender?: string | ((_props: any) => React.ReactElement)
+  /** 产品卡片，接受参数： {"status":"complete","args":[{"sku":["A3936031"],"handle":"space-a40-a3936031"}],"result":""}
+   * 后端接口文档：https://anker-in.feishu.cn/wiki/DOYJwE9oxipWmYk072ncnJNznBb
+   */
+  productRender?: string | ((_props: any) => React.ReactElement)
   /** CopilotPopup 自定义参数，参考：https://docs.copilotkit.ai/reference/components/CopilotPopup */
   popup?: any
-  /** 文案，{"popupTip": "Hi ! Welcome to soundcore Innovations live chat！", "popupTipTimeout": [3000, 6000]} */
+  /** 文案，{"productRenderTipMessage": "","popupTip": "Hi ! Welcome to soundcore Innovations live chat！", "popupTipTimeout": [3000, 6000]} */
   lang?: any
   /** 参考此文档：https://docs.copilotkit.ai/concepts/customize-look-and-feel */
   style?: any
@@ -55,12 +71,15 @@ const Chat = (props: ChatProps) => {
     title,
     runtimeUrl,
     popup,
-    shopify_domain,
-    user_id = '',
+    shopifyDomain,
+    userId = '',
     account = '',
+    prologue = '',
     locale = '',
     query = '',
     showResponseButton,
+    gotocheckoutRender,
+    gotocartRender,
     addtocartRender,
     productRender,
     signupRender,
@@ -72,33 +91,43 @@ const Chat = (props: ChatProps) => {
 
   const [openTip, setOpenTip] = useState(false)
   const [openPopup, setOpenPopup] = useState(false)
-  const [start, setstart] = useState('')
+  const [start, setstart] = useState(prologue)
   const [currentSuggestions, setCurrentSuggestions] = useState([])
   const [history, sethistory] = useState<[{ content: string; role: string }] | []>([])
 
+  const headers = useMemo(
+    () => ({
+      'x-user-id': userId || '',
+      'x-shopify-domain': shopifyDomain,
+      'x-member-ship': account,
+      'x-user-locale': locale,
+    }),
+    [userId, shopifyDomain, account, locale]
+  )
+
   const getStart = useCallback(async () => {
     const result = await fetcher({
       url: `${runtimeUrl}/copilotkit/start${query}`,
       method: 'GET',
-      headers: { user_id: user_id || '', shopify_domain, account, locale },
+      headers,
     })
 
     setCurrentSuggestions(result?.suggested_questions?.map((item: string) => ({ message: item, title: item })) || [])
     setstart(result?.opening_statement || '')
     sethistory(result?.history || [])
-  }, [user_id, shopify_domain, account, locale])
+  }, [userId, shopifyDomain, account, locale])
 
   const getSuggestions = useCallback(async () => {
     const result = await fetcher({
       url: `${runtimeUrl}/copilotkit/suggested_questions${query}`,
       method: 'GET',
-      headers: { user_id: user_id || '', shopify_domain, account, locale },
+      headers,
     })
 
     setCurrentSuggestions(
       result?.suggested_questions?.data?.map((item: string) => ({ message: item, title: item })) || []
     )
-  }, [user_id, shopify_domain, account, locale])
+  }, [userId, shopifyDomain, account, locale])
 
   const setOpenTipFn = () => {
     if (!openTip) setOpenTip(true)
@@ -117,20 +146,10 @@ const Chat = (props: ChatProps) => {
     }
   }, [])
 
-  useEffect(() => {
-    if (!start) {
-      getStart()
-    }
-  }, [])
-
   return (
     <div className={className} style={style || {}}>
-      {user_id && runtimeUrl && (
-        <CopilotKit
-          runtimeUrl={`${runtimeUrl}/copilotkit/chat${query}`}
-          showDevConsole={false}
-          headers={{ user_id: user_id || '', shopify_domain: shopify_domain, account, locale }}
-        >
+      {userId && runtimeUrl && (
+        <CopilotKit runtimeUrl={`${runtimeUrl}/copilotkit/chat${query}`} showDevConsole={false} headers={headers}>
           <CopilotPopup
             {...popup}
             showResponseButton={showResponseButton !== 'follow'}
@@ -152,29 +171,30 @@ const Chat = (props: ChatProps) => {
                 <Suggestions currentSuggestions={currentSuggestions} />
               </Messages>
             )}
-            Button={({ open, setOpen }) => {
+            Button={({ open, setOpen: setOpenDefault }) => {
               const Button = popup?.Button || DefaultButton
               // eslint-disable-next-line react-hooks/rules-of-hooks
               useEffect(() => {
                 setOpenPopup(open)
               }, [open])
+
+              // eslint-disable-next-line react-hooks/rules-of-hooks
+              const setOpen = useCallback(() => {
+                setOpenDefault(!open)
+                setOpenTip(false)
+                if (!start || !history?.length) getStart()
+              }, [start])
+
               return (
                 <>
                   {lang?.popupTip && openTip && !openPopup && (
                     <div className="copilotKitPopup copilotKitPopupTip">
-                      <button
-                        onClick={() => {
-                          setOpen(true)
-                          setOpenTip(false)
-                        }}
-                        aria-label="Open Chat"
-                        className="copilotKitPopupTipContent"
-                      >
+                      <button onClick={setOpen} aria-label="Open Chat" className="copilotKitPopupTipContent">
                         {lang?.popupTip}
                       </button>
                     </div>
                   )}
-                  <Button open={open} setOpen={setOpen} setOpenTip={setOpenTip} />
+                  <Button open={open} setOpen={setOpen} />
                 </>
               )
             }}
@@ -182,9 +202,12 @@ const Chat = (props: ChatProps) => {
             <CopilotAction
               start={start}
               history={history}
+              gotocartRender={gotocartRender}
+              gotocheckoutRender={gotocheckoutRender}
               addtocartRender={addtocartRender}
               productRender={productRender}
               signupRender={signupRender}
+              productRenderTipMessage={lang?.productRenderTipMessage}
             />
           </CopilotPopup>
         </CopilotKit>

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/props.ts

@@ -3,8 +3,7 @@ import { Message } from '@copilotkit/runtime-client-gql'
 
 export interface ButtonProps {
   open: boolean
-  setOpen: (open: boolean) => void
-  setOpenTip: (open: boolean) => void
+  setOpen: () => void
 }
 
 export interface WindowProps {

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

@@ -12,16 +12,15 @@ const meta: Meta<typeof Chat> = {
   component: Chat,
   args: {
     title: 'DTC Live Chat',
-    runtimeUrl: 'https://beta-dtcapi.anker.com',
-    shopify_domain: 'soundcoreusa.myshopify.com',
+    runtimeUrl: 'https://beta-api-livechat.anker.com',
+    shopifyDomain: 'soundcoreusa.myshopify.com',
   },
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
   // 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>
     ),
@@ -33,9 +32,9 @@ export default meta
 export const Default: Story = {
   args: {
     title: 'DTC Live Chat',
-    runtimeUrl: 'https://beta-dtcapi.anker.com',
-    shopify_domain: 'soundcoreusa.myshopify.com',
-    user_id: 'arno5',
+    runtimeUrl: 'https://beta-api-livechat.anker.com',
+    shopifyDomain: 'soundcoreusa.myshopify.com',
+    userId: 'arno7',
     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 {