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

package/src/components/chat/action.tsx

@@ -1,29 +1,47 @@
 import React from 'react'
 import { useEffect } from 'react'
 import { useCopilotChat, useCopilotAction, useCopilotReadable } from '@copilotkit/react-core'
-import { useCopilotChatSuggestions } from '@copilotkit/react-ui'
-import { Role, TextMessage } from '@copilotkit/runtime-client-gql'
+import { Role, ActionExecutionMessage, TextMessage } from '@copilotkit/runtime-client-gql'
 
 interface Message {
   content: string
   role: string
+  name?: string
+  scope?: any
+  arguments?: any
 }
 
 export interface ActionProps {
   start?: string
   history: Message[]
-  buynowRender?: string | ((_props: any) => string)
-  signupRender?: string | ((_props: any) => string)
+  addtocartRender?: string | ((_props: any) => React.ReactElement)
+  productRender?: string | ((_props: any) => React.ReactElement)
+  signupRender?: string | ((_props: any) => React.ReactElement)
   children?: React.ReactNode
 }
 
-export const CopilotAction = ({ history, buynowRender, signupRender, children }: ActionProps) => {
+export const CopilotAction = ({
+  start,
+  history,
+  addtocartRender,
+  productRender,
+  signupRender,
+  children,
+}: ActionProps) => {
   const { setMessages } = useCopilotChat()
 
   useEffect(() => {
-    const originhistory = history?.filter(value => value?.content)
+    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)
+          return new ActionExecutionMessage({
+            name: value?.name,
+            arguments: value?.arguments,
+            scope: value?.scope,
+          })
+        }
         return new TextMessage({
           ...value,
           role: value?.role === 'user' ? Role.User : Role.Assistant,
@@ -33,18 +51,21 @@ export const CopilotAction = ({ history, buynowRender, signupRender, children }:
     }
   }, [history])
 
-  useCopilotChatSuggestions(
-    {
-      instructions: 'Suggest the most relevant next actions.',
+  useCopilotAction({
+    name: 'add_cart',
+    description: 'add tocart',
+    parameters: [{ sku: '', handle: '' }] as any,
+    render: addtocartRender || (props => <div>{JSON.stringify(props)}</div>),
+    handler: function () {
+      // console.log('buynow-props', props)
     },
-    []
-  )
+  })
 
   useCopilotAction({
     name: 'buynow',
     description: 'buy now',
     parameters: [{ sku: '', handle: '' }] as any,
-    render: buynowRender || (props => <div>{JSON.stringify(props)}</div>),
+    render: productRender || (props => <div>{JSON.stringify(props)}</div>),
     handler: function () {
       // console.log('buynow-props', props)
     },

package/src/components/chat/button.tsx

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

package/src/components/chat/index.tsx

@@ -1,12 +1,15 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React from 'react'
 import { useCallback, useState, useEffect } from 'react'
 import { CopilotKit } from '@copilotkit/react-core'
 import { CopilotPopup } from '@copilotkit/react-ui'
-
+import DefaultButton from './button.js'
+import Messages from './messages.js'
+import ResponseButton from './response.js'
+import Suggestions from './suggestions.js'
 import { CopilotAction } from './action.js'
 import fetcher from '../../helpers/fetcher.js'
 
-// import '../../styles/chat.css'
-
 export interface ChatProps {
   title: string
   runtimeUrl: string
@@ -14,20 +17,33 @@ export interface ChatProps {
   /** GA 的 client id
    */
   user_id: string
+  /** 是否登陆用户 0 or 1
+   */
+  account?: string
+  /** 用户浏览器语言
+   */
+  locale?: string
   /** ?a=1&b=2
    */
   query?: string
+  /** 'follow' or 'unfollow' | true or false
+   */
+  showResponseButton?: string | boolean
+  /** 加购卡片，接受参数： {"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
    */
-  buynowRender?: string | ((_props: any) => string)
+  productRender?: string | ((_props: any) => React.ReactElement)
   /** 订阅卡片，接受参数：
    * 后端接口文档：https://anker-in.feishu.cn/wiki/DOYJwE9oxipWmYk072ncnJNznBb
    */
-  signupRender?: string | ((_props: any) => string)
+  signupRender?: string | ((_props: any) => React.ReactElement)
   /** CopilotPopup 自定义参数，参考：https://docs.copilotkit.ai/reference/components/CopilotPopup */
   popup?: any
-  /** 文案，{"popupTip": "Hi ! Welcome to soundcore Innovations live chat！"} */
+  /** 文案，{"popupTip": "Hi ! Welcome to soundcore Innovations live chat！", "popupTipTimeout": [3000, 6000]} */
   lang?: any
   /** 参考此文档：https://docs.copilotkit.ai/concepts/customize-look-and-feel */
   style?: any
@@ -41,38 +57,60 @@ const Chat = (props: ChatProps) => {
     popup,
     shopify_domain,
     user_id = '',
+    account = '',
+    locale = '',
     query = '',
-    buynowRender,
+    showResponseButton,
+    addtocartRender,
+    productRender,
     signupRender,
     style,
     className = '',
     lang,
   } = props
+  const [autoTipOpen, autoTipClose] = lang?.popupTipTimeout || [3000, 6000]
 
   const [openTip, setOpenTip] = useState(false)
   const [openPopup, setOpenPopup] = useState(false)
   const [start, setstart] = useState('')
+  const [currentSuggestions, setCurrentSuggestions] = useState([])
   const [history, sethistory] = useState<[{ content: string; role: string }] | []>([])
 
   const getStart = useCallback(async () => {
     const result = await fetcher({
-      url: `${runtimeUrl}/copilotkit/start`,
+      url: `${runtimeUrl}/copilotkit/start${query}`,
       method: 'GET',
-      headers: { user_id: user_id || '', shopify_domain: shopify_domain },
+      headers: { user_id: user_id || '', shopify_domain, account, locale },
     })
 
+    setCurrentSuggestions(result?.suggested_questions?.map((item: string) => ({ message: item, title: item })) || [])
     setstart(result?.opening_statement || '')
     sethistory(result?.history || [])
-  }, [user_id])
+  }, [user_id, shopify_domain, 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 },
+    })
+
+    setCurrentSuggestions(
+      result?.suggested_questions?.data?.map((item: string) => ({ message: item, title: item })) || []
+    )
+  }, [user_id, shopify_domain, account, locale])
 
   const setOpenTipFn = () => {
     if (!openTip) setOpenTip(true)
+    setTimeout(() => {
+      setOpenTip(false)
+    }, autoTipClose)
   }
 
   useEffect(() => {
     const timer = setTimeout(() => {
       setOpenTipFn()
-    }, 3000)
+    }, autoTipOpen)
 
     return () => {
       clearTimeout(timer)
@@ -87,32 +125,39 @@ const Chat = (props: ChatProps) => {
 
   return (
     <div className={className} style={style || {}}>
-      <style>
-        {`
-        .copilotKitMessage.copilotKitAssistantMessage:has(.copilotKitMarkdown:empty) {
-            display: none;
-        }
-      `}
-      </style>
       {user_id && runtimeUrl && (
         <CopilotKit
-          runtimeUrl={`${runtimeUrl}/copilotkit/chat`}
+          runtimeUrl={`${runtimeUrl}/copilotkit/chat${query}`}
           showDevConsole={false}
-          headers={{ user_id: user_id || '', shopify_domain: shopify_domain }}
+          headers={{ user_id: user_id || '', shopify_domain: shopify_domain, account, locale }}
         >
           <CopilotPopup
             {...popup}
+            showResponseButton={showResponseButton !== 'follow'}
             labels={{
               title: title || 'DTC Live Chat',
               initial: start || '',
             }}
-            makeSystemMessage={() => {
-              return start || ''
+            instructions={start || ''}
+            onInProgress={load => {
+              if (openPopup && load) setCurrentSuggestions([])
+              if (openPopup && !load) getSuggestions()
             }}
+            Messages={({ messages, inProgress }) => (
+              <Messages
+                messages={messages}
+                inProgress={inProgress}
+                ResponseButton={showResponseButton === 'follow' ? <ResponseButton /> : undefined}
+              >
+                <Suggestions currentSuggestions={currentSuggestions} />
+              </Messages>
+            )}
             Button={({ open, setOpen }) => {
-              const Button = popup?.Button
-              useEffect(() => setOpenPopup(open), [open])
-
+              const Button = popup?.Button || DefaultButton
+              // eslint-disable-next-line react-hooks/rules-of-hooks
+              useEffect(() => {
+                setOpenPopup(open)
+              }, [open])
               return (
                 <>
                   {lang?.popupTip && openTip && !openPopup && (
@@ -129,53 +174,18 @@ const Chat = (props: ChatProps) => {
                       </button>
                     </div>
                   )}
-                  {Button && <Button open={open} setOpen={setOpen} setOpenTip={setOpenTip} />}
-                  {!Button && (
-                    <button
-                      onClick={() => {
-                        setOpen(true)
-                        setOpenTip(false)
-                      }}
-                      className="copilotKitButton "
-                      aria-label="Open Chat"
-                    >
-                      <div className="copilotKitButtonIcon copilotKitButtonIconOpen">
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          viewBox="0 0 24 24"
-                          fill="currentColor"
-                          width="24"
-                          height="24"
-                        >
-                          <g transform="translate(24, 0) scale(-1, 1)">
-                            <path
-                              fillRule="evenodd"
-                              d="M5.337 21.718a6.707 6.707 0 01-.533-.074.75.75 0 01-.44-1.223 3.73 3.73 0 00.814-1.686c.023-.115-.022-.317-.254-.543C3.274 16.587 2.25 14.41 2.25 12c0-5.03 4.428-9 9.75-9s9.75 3.97 9.75 9c0 5.03-4.428 9-9.75 9-.833 0-1.643-.097-2.417-.279a6.721 6.721 0 01-4.246.997z"
-                              clipRule="evenodd"
-                            ></path>
-                          </g>
-                        </svg>
-                      </div>
-                      <div className="copilotKitButtonIcon copilotKitButtonIconClose">
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          fill="none"
-                          viewBox="0 0 24 24"
-                          strokeWidth="1.5"
-                          stroke="currentColor"
-                          width="24"
-                          height="24"
-                        >
-                          <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path>
-                        </svg>
-                      </div>
-                    </button>
-                  )}
+                  <Button open={open} setOpen={setOpen} setOpenTip={setOpenTip} />
                 </>
               )
             }}
           >
-            <CopilotAction start={start} history={history} buynowRender={buynowRender} signupRender={signupRender} />
+            <CopilotAction
+              start={start}
+              history={history}
+              addtocartRender={addtocartRender}
+              productRender={productRender}
+              signupRender={signupRender}
+            />
           </CopilotPopup>
         </CopilotKit>
       )}

package/src/components/chat/markdown.tsx

@@ -0,0 +1,36 @@
+import { type FC, memo } from 'react'
+import ReactMarkdown, { type Options, type Components } from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import remarkMath from 'remark-math'
+
+const MemoizedReactMarkdown: FC<Options> = memo(
+  ReactMarkdown,
+  (prevProps, nextProps) => prevProps.children === nextProps.children && prevProps.className === nextProps.className
+)
+
+type MarkdownProps = {
+  content: string
+}
+
+export const Markdown = ({ content }: MarkdownProps) => {
+  return (
+    <div className="copilotKitMarkdown">
+      <MemoizedReactMarkdown components={components} remarkPlugins={[remarkGfm, remarkMath]}>
+        {content}
+      </MemoizedReactMarkdown>
+    </div>
+  )
+}
+
+const components: Components = {
+  p({ children }) {
+    return <p>{children}</p>
+  },
+  a({ children, ...props }) {
+    return (
+      <a style={{ color: 'blue', textDecoration: 'underline' }} {...props} target="_blank" rel="noopener noreferrer">
+        {children}
+      </a>
+    )
+  },
+}

package/src/components/chat/messages.tsx

@@ -0,0 +1,167 @@
+import React, { useEffect, useMemo } from 'react'
+import type { MessagesProps } from './props.js'
+import { useChatContext } from '@copilotkit/react-ui'
+import { Markdown } from './markdown.js'
+import { type RenderFunctionStatus, useCopilotContext } from '@copilotkit/react-core'
+import {
+  MessageStatusCode,
+  ActionExecutionMessage,
+  Message,
+  ResultMessage,
+  TextMessage,
+  Role,
+} from '@copilotkit/runtime-client-gql'
+
+const Messages = ({ messages, inProgress, ResponseButton, children }: MessagesProps) => {
+  const { chatComponentsCache } = useCopilotContext()
+
+  const context = useChatContext()
+  const initialMessages = useMemo(() => makeInitialMessages(context.labels.initial), [context.labels.initial])
+  messages = [...initialMessages, ...messages]
+
+  const functionResults: Record<string, string> = {}
+
+  for (let i = 0; i < messages.length; i++) {
+    if (messages[i] instanceof ActionExecutionMessage) {
+      const id = messages[i].id
+      const resultMessage: ResultMessage | undefined = messages.find(
+        message => message instanceof ResultMessage && message.actionExecutionId === id
+      ) as ResultMessage | undefined
+
+      if (resultMessage) {
+        functionResults[id] = ResultMessage.decodeResult(resultMessage.result || '')
+      }
+    }
+  }
+
+  const messagesEndRef = React.useRef<HTMLDivElement>(null)
+
+  const scrollToBottom = () => {
+    if (messagesEndRef.current) {
+      messagesEndRef.current.scrollIntoView({
+        behavior: 'auto',
+      })
+    }
+  }
+
+  useEffect(() => {
+    scrollToBottom()
+  }, [messages])
+
+  return (
+    <div className="copilotKitMessages">
+      {messages.map((message, index) => {
+        const isCurrentMessage = index === messages.length - 1
+
+        if (message instanceof TextMessage && message.role === 'user') {
+          return (
+            <div key={index} className="copilotKitMessage copilotKitUserMessage">
+              {message.content}
+            </div>
+          )
+        } else if (message instanceof TextMessage && message.role == 'assistant') {
+          return (
+            <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
+              {isCurrentMessage && inProgress && !message.content ? (
+                context.icons.spinnerIcon
+              ) : (
+                <Markdown content={message.content} />
+              )}
+            </div>
+          )
+        } else if (message instanceof ActionExecutionMessage) {
+          if (chatComponentsCache.current !== null && chatComponentsCache.current[message.name]) {
+            const render = chatComponentsCache.current[message.name]
+            // render a static string
+            if (typeof render === 'string') {
+              // when render is static, we show it only when in progress
+              if (isCurrentMessage && inProgress) {
+                return (
+                  <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
+                    {context.icons.spinnerIcon} <span className="inProgressLabel">{render}</span>
+                  </div>
+                )
+              }
+              // Done - silent by default to avoid a series of "done" messages
+              else {
+                return null
+              }
+            }
+            // render is a function
+            else {
+              const args = message.arguments
+
+              let status: RenderFunctionStatus = 'inProgress'
+
+              if (functionResults[message.id] !== undefined) {
+                status = 'complete'
+              } else if (message.status.code !== MessageStatusCode.Pending) {
+                status = 'executing'
+              }
+
+              const toRender = render({
+                status: status as any,
+                args,
+                result: functionResults[message.id],
+              })
+
+              // No result and complete: stay silent
+              if (!toRender && status === 'complete') {
+                return null
+              }
+
+              if (typeof toRender === 'string') {
+                return (
+                  <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
+                    {isCurrentMessage && inProgress && context.icons.spinnerIcon} {toRender}
+                  </div>
+                )
+              } else {
+                return (
+                  <div key={index} className="copilotKitCustomAssistantMessage">
+                    {toRender}
+                  </div>
+                )
+              }
+            }
+          }
+          // No render function found- show the default message
+          else if (!inProgress || !isCurrentMessage) {
+            // Done - silent by default to avoid a series of "done" messages
+            return null
+          } else {
+            // In progress
+            return (
+              <div key={index} className={`copilotKitMessage copilotKitAssistantMessage`}>
+                {context.icons.spinnerIcon}
+              </div>
+            )
+          }
+        }
+      })}
+      <div className="responseButtonBox">{ResponseButton}</div>
+      <footer ref={messagesEndRef}>{children}</footer>
+    </div>
+  )
+}
+
+function makeInitialMessages(initial?: string | string[]): Message[] {
+  let initialArray: string[] = []
+  if (initial) {
+    if (Array.isArray(initial)) {
+      initialArray.push(...initial)
+    } else {
+      initialArray.push(initial)
+    }
+  }
+
+  return initialArray.map(
+    message =>
+      new TextMessage({
+        role: Role.Assistant,
+        content: message,
+      })
+  )
+}
+
+export default Messages

package/src/components/chat/props.ts

@@ -0,0 +1,51 @@
+import React from 'react'
+import { Message } from '@copilotkit/runtime-client-gql'
+
+export interface ButtonProps {
+  open: boolean
+  setOpen: (open: boolean) => void
+  setOpenTip: (open: boolean) => void
+}
+
+export interface WindowProps {
+  open: boolean
+  setOpen: (open: boolean) => void
+  clickOutsideToClose: boolean
+  hitEscapeToClose: boolean
+  shortcut: string
+  children?: React.ReactNode
+}
+
+export interface HeaderProps {
+  open: boolean
+  setOpen: (open: boolean) => void
+}
+
+export interface ChatSuggestions {
+  currentSuggestions: SuggestionsProps[]
+}
+
+export interface SuggestionsProps {
+  title: string
+  message: string
+  partial?: boolean
+  className?: string
+}
+
+export interface MessagesProps {
+  messages: Message[]
+  inProgress: boolean
+  ResponseButton?: React.ReactElement
+  children?: React.ReactNode
+}
+
+export interface InputProps {
+  inProgress: boolean
+  onSend: (text: string) => Promise<Message>
+  isVisible?: boolean
+}
+
+export interface ResponseButtonProps {
+  onClick: () => void
+  inProgress: boolean
+}

package/src/components/chat/response.tsx

@@ -0,0 +1,17 @@
+import { useChatContext } from '@copilotkit/react-ui'
+import { useCopilotChat } from '@copilotkit/react-core'
+
+const ResponseButton = () => {
+  const context = useChatContext()
+
+  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>
+  )
+}
+
+export default ResponseButton

package/src/components/chat/suggestions.tsx

@@ -0,0 +1,34 @@
+import { useCopilotChat } from '@copilotkit/react-core'
+import { Role, TextMessage } from '@copilotkit/runtime-client-gql'
+
+import type { SuggestionsProps, ChatSuggestions } from './props.js'
+
+const Suggestions = ({ currentSuggestions }: ChatSuggestions) => {
+  const { appendMessage } = useCopilotChat()
+
+  return (
+    currentSuggestions?.length > 0 && (
+      <div className="suggestions">
+        {currentSuggestions.map(({ title, message, partial, className }: SuggestionsProps, index: number) => (
+          <button
+            key={message + index}
+            disabled={partial}
+            onClick={e => {
+              e.preventDefault()
+              const m = new TextMessage({
+                content: message,
+                role: Role.User,
+              })
+              appendMessage(m)
+            }}
+            className={className || 'suggestion'}
+          >
+            <span>{title}</span>
+          </button>
+        ))}
+      </div>
+    )
+  )
+}
+
+export default Suggestions

package/src/stories/chat.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
-
 import { Chat } from '../components/index.js'
+import '../styles/chat.css'
 
 type Story = StoryObj<typeof meta>
 
@@ -35,8 +35,8 @@ export const Default: Story = {
     title: 'DTC Live Chat',
     runtimeUrl: 'https://beta-dtcapi.anker.com',
     shopify_domain: 'soundcoreusa.myshopify.com',
-    user_id: 'ar_4',
-    query: '',
-    lang: { popupTip: 'Hi ! Welcome to soundcore Innovations live chat！' },
+    user_id: 'arno5',
+    showResponseButton: 'follow',
+    lang: { popupTip: 'Hi ! Welcome to soundcore Innovations live chat！', popupTipTimeout: [3000, 6000] },
   },
 }

package/src/styles/css/messages.css

@@ -71,3 +71,7 @@
   flex-direction: column;
   justify-content: flex-end;
 }
+
+.copilotKitMessage.copilotKitAssistantMessage:has(.copilotKitMarkdown:empty) {
+  display: none;
+}