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

package/src/components/chat/action.tsx

@@ -14,17 +14,20 @@ 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,
@@ -32,16 +35,17 @@ export const CopilotAction = ({
   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) {
+          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,
           })
         }
@@ -79,8 +83,8 @@ export const CopilotAction = ({
     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)
+    handler: function (props) {
+      addtocartHandler && addtocartHandler(props)
     },
   })
 
@@ -89,8 +93,16 @@ export const CopilotAction = ({
     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)
+    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)
+      // }
     },
   })
 

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,16 +13,19 @@ 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
@@ -39,21 +42,24 @@ export interface ChatProps {
    * 后端接口文档：https://anker-in.feishu.cn/wiki/DOYJwE9oxipWmYk072ncnJNznBb
    */
   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
-   */
-  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)
+  /** 产品卡片，接受参数： {"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
@@ -65,9 +71,10 @@ const Chat = (props: ChatProps) => {
     title,
     runtimeUrl,
     popup,
-    shopify_domain,
-    user_id = '',
+    shopifyDomain,
+    userId = '',
     account = '',
+    prologue = '',
     locale = '',
     query = '',
     showResponseButton,
@@ -84,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)
@@ -129,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'}
@@ -164,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} />
                 </>
               )
             }}
@@ -199,6 +207,7 @@ const Chat = (props: ChatProps) => {
               addtocartRender={addtocartRender}
               productRender={productRender}
               signupRender={signupRender}
+              productRenderTipMessage={lang?.productRenderTipMessage}
             />
           </CopilotPopup>
         </CopilotKit>

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/stories/chat.stories.tsx

@@ -12,8 +12,8 @@ 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'],
@@ -32,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: 'arno6',
+    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] },
   },