@anker-in/campaign-ui 0.0.33-alpha5 → 0.1.1-0.beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anker-in/campaign-ui",
-  "version": "0.0.33-alpha5",
+  "version": "0.1.10.beta.1",
   "type": "commonjs",
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",
@@ -16,8 +16,10 @@
         "default": "./dist/esm/index.js"
       }
     },
-    "./*": "./*",
-    "./chat.css": "./src/styles/chat.css"
+    "./tailwind.config": "./tailwind.config.ts",
+    "./style.css": "./style.css",
+    "./chat.css": "./src/styles/chat.css",
+    "./*": "./*"
   },
   "description": "",
   "files": [
@@ -25,6 +27,7 @@
     "dist/**",
     "styles/**",
     "*.css",
+    "tailwind.config.ts",
     "README.md",
     "CONTRIBUTING.md"
   ],
@@ -33,23 +36,6 @@
     "**/*.css",
     "**/**/*.css"
   ],
-  "scripts": {
-    "dev": "pnpm run dev:css & pnpm run dev:js:esm & pnpm run dev:js:cjs & pnpm run dev:js:esm:types & pnpm run dev:js:cjs:types",
-    "dev:js:cjs": "node esbuild-cjs.mjs watch=true",
-    "dev:js:cjs:types": "tsc --watch --incremental --outdir dist/cjs",
-    "dev:js:esm": "node esbuild-esm.mjs watch=true",
-    "dev:js:esm:types": "tsc --watch --incremental --outdir dist/esm",
-    "dev:css": "postcss src/styles/global.css -o style.css --watch",
-    "build": "pnpm run build:css & pnpm run build:js:esm & pnpm run build:js:cjs & pnpm run build:js:esm:types & pnpm run build:js:cjs:types",
-    "build:js:cjs": "node esbuild-cjs.mjs",
-    "build:js:cjs:types": "tsc --outdir dist/cjs",
-    "build:js:esm": "node esbuild-esm.mjs",
-    "build:js:esm:types": "tsc --outdir dist/esm",
-    "build:css": "postcss src/styles/chat.css -o style.css",
-    "lint": "eslint \"src/**/*.ts*\"",
-    "test": "eslint \"src/**/*.ts*\"",
-    "clean": "rm -rf .turbo node_modules dist style.css"
-  },
   "keywords": [],
   "author": "",
   "license": "ISC",
@@ -77,6 +63,7 @@
     "@copilotkit/react-ui": "1.1.2",
     "@copilotkit/runtime-client-gql": "1.1.2",
     "@copilotkit/shared": "1.1.2",
+    "@monaco-editor/react": "^4.6.0",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-icons": "^1.3.0",
@@ -87,10 +74,34 @@
     "autoprefixer": "^10.4.19",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "dayjs": "^1.11.7",
+    "gsap": "^3.12.5",
+    "monaco-editor": "^0.52.0",
     "postcss": "^8.4.38",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react-codepen-embed": "^1.1.0",
     "tailwind-merge": "^2.3.0",
-    "tailwindcss": "^3.4.3"
+    "tailwindcss": "^3.4.3",
+    "@anker-in/headless-ui": "1.0.19"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "scripts": {
+    "dev": "pnpm run dev:css & pnpm run dev:js:esm & pnpm run dev:js:cjs & pnpm run dev:js:esm:types & pnpm run dev:js:cjs:types",
+    "dev:js:cjs": "node esbuild-cjs.mjs watch=true",
+    "dev:js:cjs:types": "tsc --watch --incremental --outdir dist/cjs",
+    "dev:js:esm": "node esbuild-esm.mjs watch=true",
+    "dev:js:esm:types": "tsc --watch --incremental --outdir dist/esm",
+    "dev:css": "postcss src/styles/global.css -o style.css --watch",
+    "build": "pnpm run build:css & pnpm run build:js:esm & pnpm run build:js:cjs & pnpm run build:js:esm:types & pnpm run build:js:cjs:types",
+    "build:js:cjs": "node esbuild-cjs.mjs",
+    "build:js:cjs:types": "tsc --outdir dist/cjs",
+    "build:js:esm": "node esbuild-esm.mjs",
+    "build:js:esm:types": "tsc --outdir dist/esm",
+    "build:css": "postcss src/styles/chat.css -o style.css",
+    "lint": "eslint \"src/**/*.ts*\"",
+    "test": "echo run @anker-in/campaign-ui tests",
+    "clean": "rm -rf .turbo node_modules dist style.css"
   }
-}
+}

package/src/components/chat/action.tsx

@@ -15,10 +15,13 @@ export interface ActionProps {
   start?: string
   history: Message[]
   addtocartHandler?: (_args: any) => Promise<any>
+  commonRender?: string | ((_props: any) => React.ReactElement)
+  pointsExchangeCouponRender?: string | ((_props: any) => React.ReactElement)
   gotocheckoutRender?: string | ((_props: any) => React.ReactElement)
   gotocartRender?: string | ((_props: any) => React.ReactElement)
   addtocartRender?: string | ((_props: any) => React.ReactElement)
   signupRender?: string | ((_props: any) => React.ReactElement)
+  shulexRender?: string | ((_props: any) => React.ReactElement)
   productRender?: string | ((_props: any) => React.ReactElement)
   productRenderTipMessage?: string
   children?: React.ReactNode
@@ -28,11 +31,14 @@ export const CopilotAction = ({
   start,
   history,
   addtocartHandler,
+  commonRender,
+  pointsExchangeCouponRender,
   gotocheckoutRender,
   gotocartRender,
   addtocartRender,
   productRender,
   signupRender,
+  shulexRender,
   children,
 }: ActionProps) => {
   const { setMessages, appendMessage, isLoading } = useCopilotChat()
@@ -68,6 +74,26 @@ export const CopilotAction = ({
     },
   })
 
+  useCopilotAction({
+    name: 'common_action',
+    description: 'common action',
+    parameters: [{ act: '' }] as any,
+    render: commonRender || (props => <div className="hidden">{JSON.stringify(props)}</div>),
+    handler: function () {
+      // console.log('common_action', props)
+    },
+  })
+
+  useCopilotAction({
+    name: 'points_exchange_coupon',
+    description: 'points exchange coupon',
+    parameters: [{ act: '' }] as any,
+    render: pointsExchangeCouponRender || (props => <div className="hidden">{JSON.stringify(props)}</div>),
+    handler: function () {
+      // console.log('points_exchange_coupon', props)
+    },
+  })
+
   useCopilotAction({
     name: 'go_to_cart',
     description: 'go to cart',
@@ -94,7 +120,7 @@ export const CopilotAction = ({
     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)
+      // console.log('show_product_card-props', props)
       // const ishistory = props?.find((item: { ishistory: any }) => item?.ishistory)
       // if (!ishistory) {
       //   const content = new TextMessage({
@@ -120,6 +146,20 @@ export const CopilotAction = ({
     },
   })
 
+  useCopilotAction({
+    name: 'shulex',
+    description: 'shulex',
+    parameters: [
+      {
+        name: 'shulex',
+      },
+    ] as any,
+    render: shulexRender || (props => <div className="hidden">{JSON.stringify(props)}</div>),
+    handler: function () {
+      // console.log('shulex-props', props)
+    },
+  })
+
   useCopilotReadable({
     description: "Today's date",
     value: new Date().toLocaleDateString(),

package/src/components/chat/chatContext.tsx

@@ -0,0 +1,161 @@
+import React from 'react'
+
+/**
+ * Icons for CopilotChat component.
+ */
+export interface CopilotChatIcons {
+  /**
+   * The icon to use for the open chat button.
+   * @default <OpenIcon />
+   */
+  openIcon?: React.ReactNode
+
+  /**
+   * The icon to use for the close chat button.
+   * @default <CloseIcon />
+   */
+  closeIcon?: React.ReactNode
+
+  /**
+   * The icon to use for the close chat button in the header.
+   * @default <HeaderCloseIcon />
+   */
+  headerCloseIcon?: React.ReactNode
+
+  /**
+   * The icon to use for the send button.
+   * @default <SendIcon />
+   */
+  sendIcon?: React.ReactNode
+
+  /**
+   * The icon to use for the activity indicator.
+   * @default <ActivityIcon />
+   */
+  activityIcon?: React.ReactNode
+
+  /**
+   * The icon to use for the spinner.
+   * @default <SpinnerIcon />
+   */
+  spinnerIcon?: React.ReactNode
+
+  /**
+   * The icon to use for the stop button.
+   * @default <StopIcon />
+   */
+  stopIcon?: React.ReactNode
+
+  /**
+   * The icon to use for the regenerate button.
+   * @default <RegenerateIcon />
+   */
+  regenerateIcon?: React.ReactNode
+
+  /**
+   * The icons to use for push to talk.
+   * @default <PushToTalkIcon />
+   */
+
+  pushToTalkIcon?: React.ReactNode
+}
+
+/**
+ * Labels for CopilotChat component.
+ */
+export interface CopilotChatLabels {
+  /**
+   * The initial message(s) to display in the chat window.
+   */
+  initial?: string | string[]
+
+  /**
+   * The title to display in the header.
+   * @default "CopilotKit"
+   */
+  title?: string
+
+  /**
+   * The placeholder to display in the input.
+   * @default "Type a message..."
+   */
+  placeholder?: string
+
+  /**
+   * The message to display when an error occurs.
+   * @default "❌ An error occurred. Please try again."
+   */
+  error?: string
+
+  /**
+   * The label to display on the stop button.
+   * @default "Stop generating"
+   */
+  stopGenerating?: string
+
+  /**
+   * The label to display on the regenerate button.
+   * @default "Regenerate response"
+   */
+  regenerateResponse?: string
+}
+
+interface ChatContext {
+  labels: Required<CopilotChatLabels>
+  icons: Required<CopilotChatIcons>
+  open: boolean
+  setOpen: (_open: boolean) => void
+}
+
+export const ChatContext = React.createContext<ChatContext | undefined>(undefined)
+
+export function useChatContext(): ChatContext {
+  const context = React.useContext(ChatContext)
+  if (context === undefined) {
+    throw new Error('Context not found. Did you forget to wrap your app in a <ChatContextProvider> component?')
+  }
+  return context
+}
+
+export interface ChatContextProps {
+  // temperature?: number;
+  // instructions?: string;
+  // maxFeedback?: number;
+  labels?: CopilotChatLabels
+  icons?: CopilotChatIcons
+  children?: React.ReactNode
+  open: boolean
+  setOpen: (_open: boolean) => void
+}
+
+// export const ChatContextProvider = ({
+//   // temperature,
+//   // instructions,
+//   // maxFeedback,
+//   labels,
+//   icons,
+//   children,
+//   open,
+//   setOpen,
+// }: ChatContextProps) => {
+//   const context = {
+//     labels: {
+//       ...{
+//         initial: "",
+//         title: "CopilotKit",
+//         placeholder: "Type a message...",
+//         error: "❌ An error occurred. Please try again.",
+//         stopGenerating: "Stop generating",
+//         regenerateResponse: "Regenerate response",
+//       },
+//       ...labels,
+//     },
+
+//     icons: {
+//       ...icons,
+//     },
+//     open,
+//     setOpen,
+//   };
+//   return <ChatContext.Provider value={context}>{children}</ChatContext.Provider>;
+// };

package/src/components/chat/index.tsx

@@ -34,6 +34,19 @@ export interface ChatProps {
    * unfollow: ResponseButton 在聊天框底部
    */
   showResponseButton?: string | boolean
+  /** messages 的回调事件
+   * 每次生成/接受新的messages，会将 整个 messages list 传递给外部
+   */
+  messagesCallback?: (_messages: any) => void
+  /** 通用 action 的触发事件
+   */
+  commonRender?: string | ((_props: any) => React.ReactElement)
+  /** shulex的 action 的触发事件
+   */
+  shulexRender?: string | ((_props: any) => React.ReactElement)
+  /** 通用 积分 换 Coupon 的触发事件
+   */
+  pointsExchangeCouponRender?: string | ((_props: any) => React.ReactElement)
   /** 跳转 checkout action 卡片，接受参数： {"status":"complete","args":[{"sku":["A3936031"],"handle":"space-a40-a3936031"}],"result":""}
    * 后端接口文档：https://anker-in.feishu.cn/wiki/DOYJwE9oxipWmYk072ncnJNznBb
    */
@@ -77,12 +90,17 @@ const Chat = (props: ChatProps) => {
     prologue = '',
     locale = '',
     query = '',
+    messagesCallback,
     showResponseButton,
     gotocheckoutRender,
+    commonRender,
+    shulexRender,
+    pointsExchangeCouponRender,
     gotocartRender,
     addtocartRender,
     productRender,
     signupRender,
+    addtocartHandler,
     style,
     className = '',
     lang,
@@ -115,7 +133,7 @@ const Chat = (props: ChatProps) => {
     setCurrentSuggestions(result?.suggested_questions?.map((item: string) => ({ message: item, title: item })) || [])
     setstart(result?.opening_statement || '')
     sethistory(result?.history || [])
-  }, [userId, shopifyDomain, account, locale])
+  }, [userId, shopifyDomain, account, locale, query])
 
   const getSuggestions = useCallback(async () => {
     const result = await fetcher({
@@ -127,7 +145,7 @@ const Chat = (props: ChatProps) => {
     setCurrentSuggestions(
       result?.suggested_questions?.data?.map((item: string) => ({ message: item, title: item })) || []
     )
-  }, [userId, shopifyDomain, account, locale])
+  }, [userId, shopifyDomain, account, locale, query])
 
   const setOpenTipFn = () => {
     if (!openTip) setOpenTip(true)
@@ -166,12 +184,17 @@ const Chat = (props: ChatProps) => {
               <Messages
                 messages={messages}
                 inProgress={inProgress}
-                ResponseButton={showResponseButton === 'follow' ? <ResponseButton /> : undefined}
+                messagesCallback={messagesCallback}
+                ResponseButton={
+                  showResponseButton === 'follow' ? (
+                    <ResponseButton messagesId={messages?.[messages.length - 1]?.id} />
+                  ) : undefined
+                }
               >
                 <Suggestions currentSuggestions={currentSuggestions} />
               </Messages>
             )}
-            Button={({ open, setOpen: setOpenDefault }) => {
+            Button={({ open, setOpen: setOpenDefault }: { open: boolean; setOpen: (open: boolean) => void }) => {
               const Button = popup?.Button || DefaultButton
               // eslint-disable-next-line react-hooks/rules-of-hooks
               useEffect(() => {
@@ -202,11 +225,15 @@ const Chat = (props: ChatProps) => {
             <CopilotAction
               start={start}
               history={history}
+              commonRender={commonRender}
+              shulexRender={shulexRender}
+              pointsExchangeCouponRender={pointsExchangeCouponRender}
               gotocartRender={gotocartRender}
               gotocheckoutRender={gotocheckoutRender}
               addtocartRender={addtocartRender}
-              productRender={productRender}
               signupRender={signupRender}
+              productRender={productRender}
+              addtocartHandler={addtocartHandler}
               productRenderTipMessage={lang?.productRenderTipMessage}
             />
           </CopilotPopup>

package/src/components/chat/messages.tsx

@@ -12,7 +12,7 @@ import {
   Role,
 } from '@copilotkit/runtime-client-gql'
 
-const Messages = ({ messages, inProgress, ResponseButton, children }: MessagesProps) => {
+const Messages = ({ messages, inProgress, ResponseButton, messagesCallback, children }: MessagesProps) => {
   const [isExpanded, setIsExpanded] = useState(true)
 
   const { chatComponentsCache } = useCopilotContext()
@@ -51,6 +51,10 @@ const Messages = ({ messages, inProgress, ResponseButton, children }: MessagesPr
     scrollToBottom()
   }, [messages])
 
+  useEffect(() => {
+    if (messagesCallback) messagesCallback(messages)
+  }, [messages])
+
   useEffect(() => {
     const textarea = document.querySelector('.copilotKitInput textarea') as HTMLTextAreaElement
 
@@ -93,7 +97,7 @@ const Messages = ({ messages, inProgress, ResponseButton, children }: MessagesPr
         if (message instanceof TextMessage && message.role === 'user') {
           return (
             <div key={index} className="copilotKitMessage copilotKitUserMessage">
-              {message.content}
+              <Markdown content={message.content} />
             </div>
           )
         } else if (message instanceof TextMessage && message.role == 'assistant') {
@@ -107,8 +111,11 @@ const Messages = ({ messages, inProgress, ResponseButton, children }: MessagesPr
             </div>
           )
         } else if (message instanceof ActionExecutionMessage) {
-          if (chatComponentsCache.current !== null && chatComponentsCache.current[message.name]) {
-            const render = chatComponentsCache.current[message.name]
+          if (
+            chatComponentsCache.current !== null &&
+            chatComponentsCache.current[message.name as keyof typeof chatComponentsCache.current]
+          ) {
+            const render = chatComponentsCache.current[message.name as keyof typeof chatComponentsCache.current]
             // render a static string
             if (typeof render === 'string') {
               // when render is static, we show it only when in progress
@@ -135,8 +142,7 @@ const Messages = ({ messages, inProgress, ResponseButton, children }: MessagesPr
               } else if (message.status.code !== MessageStatusCode.Pending) {
                 status = 'executing'
               }
-
-              const toRender = render({
+              const toRender = (render as any)({
                 status: status as any,
                 args,
                 result: functionResults[message.id],

package/src/components/chat/props.ts

@@ -36,6 +36,7 @@ export interface MessagesProps {
   inProgress: boolean
   ResponseButton?: React.ReactElement
   children?: React.ReactNode
+  messagesCallback?: (messages: any) => void
 }
 
 export interface InputProps {

package/src/components/chat/response.tsx

@@ -1,14 +1,14 @@
 import { useChatContext } from '@copilotkit/react-ui'
 import { useCopilotChat } from '@copilotkit/react-core'
 
-const ResponseButton = () => {
+const ResponseButton = ({ messagesId }: { messagesId: string }) => {
   const context = useChatContext()
 
   const { isLoading, reloadMessages, stopGeneration } = useCopilotChat()
 
   return (
     !isLoading && (
-      <button onClick={isLoading ? stopGeneration : reloadMessages} className="copilotKitResponseButton">
+      <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/components/chat/utils.ts

@@ -0,0 +1,4 @@
+import { useCopilotChat, useCopilotAction, useCopilotReadable } from '@copilotkit/react-core'
+import { Role, ActionExecutionMessage, TextMessage } from '@copilotkit/runtime-client-gql'
+
+export { useCopilotChat, useCopilotAction, useCopilotReadable, Role, ActionExecutionMessage, TextMessage }

package/src/components/credits/context/const.ts

@@ -0,0 +1,103 @@
+export enum CreditType {
+  All = 0,
+  Earned = 1,
+  Deducted = 2,
+  Expired = 3,
+}
+
+export enum ConsumeType {
+  Coupon = 'coupon',
+  GiftCard = 'giftCard',
+  GoGift = 'goGift',
+  Product = 'product',
+}
+
+export enum AlpcConsumeType {
+  Coupon = 1,
+  Product = 2,
+}
+
+export enum TaskType {
+  Program = 1,
+  Operation = 2,
+  Redeem = 3,
+}
+
+export enum DTC_TASK_TYPE {
+  FirstPurchase = 'firstPurchase',
+  UploadReceipt = 'uploadReceipt',
+  Shopping = 'shopping',
+}
+
+export enum TaskSubType {
+  Activation = 1, // 激活事件
+  UpdateName = 2, // 完善姓名
+  UpdatePhone = 3, // 更新手机号
+  UpdateBirthday = 4, // 更新生日
+  Subscription = 5, // 订阅
+  UpadteAppName = 7, // 完善APP姓名
+  Refund = 3000, // 购物送积分任务退款
+  ProductUnApproved = 5000, // 兑换商品审核不通过
+}
+
+export enum CouponType {
+  FixedMount = 'fixed_amount',
+  Percent = 'percent',
+}
+
+export enum RewardType {
+  Received = 0,
+  Pending = 1,
+  ApproveSuccess = 2,
+  ApproveFail = 3,
+  Unfulfilled = 4,
+  Fulfilled = 5,
+  Failed = 6,
+}
+
+export enum AlpcErrorCode {
+  CodeLpcRedeemFailed = 180001,
+  //user not found
+  CodeLpcUserNotFound = 180002,
+  //credit rule not found
+  CodeLpcCreditRuleNotFound = 180003,
+  //unknown error
+  CodeLpcUnknownError = 180004,
+  // not enough credits
+  CodeLpcNotEnoughCredits = 180005,
+  // user migrate
+  CodeLpcUserMigrate = 180006,
+  // 库存不足
+  CodeLpcRuleInventoryNotEnough = 180007,
+  // 兑换次数限制
+  CodeLpcShopifyCouponRuleRedeemLimit = 180009,
+  // 跨区兑换错误（非欧兑换欧洲的）
+  CodeCrossSiteError = 180011,
+}
+
+export const ALPC_COUNTRY_MAP = new Map<string, string>([
+  ['eu-en', 'eu'],
+  ['eu-de', 'de'],
+])
+
+export enum ApprovalStatus {
+  Pending = 0,
+  Success = 1,
+  Failed = 2,
+  DoubleConfirm = 3,
+}
+
+export const PRICE_SYMBOL = {
+  us: '$',
+  uk: '£',
+  ca: '$',
+  eu: '€',
+  pl: 'zł',
+  fr: '€',
+  de: '€',
+  vn: '₫',
+  cl: '$',
+  sg: '$',
+  ae: 'AED',
+  es: '€',
+}

package/src/components/credits/context/hooks/useActivities.ts

@@ -0,0 +1,70 @@
+import { useCallback, useEffect, useState } from 'react'
+
+import { useAlpcMutation } from './useAlpcFetch.js'
+import type { CreditLogResponse } from '../response.js'
+import { useCreditsContext } from '../provider.js'
+import { useShopifyContext } from '../../../../shopify/context/ShopifyProvider'
+
+function useActivities({ page, pageSize, options = {} }: { page: number; pageSize: number; options?: any }) {
+  const { profile, isLoadingProfile } = useCreditsContext()
+  const { brand } = useShopifyContext()
+  const [activities, setActivities] = useState<CreditLogResponse[]>([])
+  const [total, setTotal] = useState(0)
+
+  const [currentPage, setCurrentPage] = useState(0)
+
+  const { isMutating: isLoading, trigger } = useAlpcMutation<
+    {
+      data: {
+        total: number
+        creditLogs: CreditLogResponse[]
+      }
+    },
+    {
+      page: number
+      page_size: number
+      user_id: string
+    }
+  >({
+    url: `/v1/credit/log`,
+    initData: {
+      brand,
+    },
+  })
+
+  const getActivities = useCallback(async () => {
+    const params = {
+      page: page,
+      page_size: pageSize,
+      user_id: profile?.user_id,
+      ...options,
+    }
+
+    trigger(params, {
+      onSuccess(responseData) {
+        setCurrentPage(page)
+        setTotal(responseData?.data?.total)
+        setActivities(activities.concat(responseData?.data?.creditLogs || []))
+      },
+    })
+  }, [activities, profile, page, pageSize, options, trigger])
+
+  useEffect(() => {
+    if (isLoadingProfile || !profile || isLoading) {
+      return
+    }
+
+    if (page !== currentPage && page) {
+      getActivities()
+    }
+  }, [getActivities, isLoadingProfile, isLoading, profile, page, currentPage])
+
+  return {
+    activities,
+    isLoading,
+    total,
+    canNext: total > activities.length && !isLoading,
+  }
+}
+
+export default useActivities