@anker-in/campaign-ui 0.1.1 → 0.1.2

package/src/components/chat/action.tsx

@@ -15,6 +15,7 @@ export interface ActionProps {
   start?: string
   history: Message[]
   addtocartHandler?: (_args: any) => Promise<any>
+  commonRender?: string | ((_props: any) => React.ReactElement)
   gotocheckoutRender?: string | ((_props: any) => React.ReactElement)
   gotocartRender?: string | ((_props: any) => React.ReactElement)
   addtocartRender?: string | ((_props: any) => React.ReactElement)
@@ -28,6 +29,7 @@ export const CopilotAction = ({
   start,
   history,
   addtocartHandler,
+  commonRender,
   gotocheckoutRender,
   gotocartRender,
   addtocartRender,
@@ -68,6 +70,16 @@ 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: 'go_to_cart',
     description: 'go to cart',

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

@@ -37,6 +37,9 @@ export interface ChatProps {
   /** 跳转 checkout action 卡片，接受参数： {"status":"complete","args":[{"sku":["A3936031"],"handle":"space-a40-a3936031"}],"result":""}
    * 后端接口文档：https://anker-in.feishu.cn/wiki/DOYJwE9oxipWmYk072ncnJNznBb
    */
+  commonRender?: string | ((_props: any) => React.ReactElement)
+  /** 通用 action 的触发事件
+   */
   gotocheckoutRender?: string | ((_props: any) => React.ReactElement)
   /** 打开购物车 action 卡片，接受参数： {"status":"complete","args":[{"sku":["A3936031"],"handle":"space-a40-a3936031"}],"result":""}
    * 后端接口文档：https://anker-in.feishu.cn/wiki/DOYJwE9oxipWmYk072ncnJNznBb
@@ -79,6 +82,7 @@ const Chat = (props: ChatProps) => {
     query = '',
     showResponseButton,
     gotocheckoutRender,
+    commonRender,
     gotocartRender,
     addtocartRender,
     productRender,
@@ -203,6 +207,7 @@ const Chat = (props: ChatProps) => {
             <CopilotAction
               start={start}
               history={history}
+              commonRender={commonRender}
               gotocartRender={gotocartRender}
               gotocheckoutRender={gotocheckoutRender}
               addtocartRender={addtocartRender}

package/CONTRIBUTING.md

@@ -1,175 +0,0 @@
-# Contributing
-
-# 关于
-
-这是一个基于@radix-ui/primitive 二次封装的组件库，目标是通过 css 变量的形式，实现多主题，以达到同时支持多品牌站点开发的能力。
-
-# 代码文件结构
-
-```shell
-apps
-├── playground
-packages
-├── storybook
-│   └── public
-└── ui
-    └── src
-        ├── components
-        ├── helpers
-        ├── icons
-        ├── props
-        ├── stories
-        └── styles
-
-```
-
-| 路径                       | 描述                      |
-| -------------------------- | ------------------------- |
-| apps/playground            | playground,一个nextjs项目 |
-| packages/storybook         | storybook 配置            |
-| packages/ui                | 组件根目录                |
-| packages/ui/src/components | 所有的组件都在这个目录    |
-| packages/ui/src/stories    | 组件对应的storybook 文件  |
-| packages/ui/src/styles     | 样式文件                  |
-
-# 如何运行
-
-本地开发
-
-先clone 代码到本地
-
-```shell
-git clone
-```
-
-安装依赖
-
-```shell
-pnpm install
-```
-
-ui 添加新的依赖
-
-```shell
-pnpm add {packages} --filter @anker-in/headless-ui
-```
-
-进入根目录
-
-````
-
-
-本地启动
-
-```shell
-pnpm run dev
-````
-
-这会运行storybook和playground，可以一边修改组件源码，一边查看效果。
-
-# 如何新增组件
-
-新增组件之前先看下仓库有没有类似的组件已经存在。
-如果不存在，需要新增组件，  
-
-**建议新组件基于 [@radix-ui/primitive](https://www.radix-ui.com/primitives) 或者手动复制[shadcn](https://ui.shadcn.com/) 的组件 进行二次封装。**
-
-组件目录位于`packages/ui/src`。
-
-运行`pnpm run dev` 之后，会运行storybook 和 playground 项目，在storybook 中测试组件的功能，编写文档。
-在playground 中可以添加组件的展示，测试组件在nextjs 项目中的使用。
-
-组件需要覆盖全品牌，如果新增css 变量，需要在`packages/ui/src/styles/global.css` 补充在各个品牌的作用域之下。
-如果某个品牌没有添加，会默认使用root 下的定义作为fallback。
-
-比如新的组件`Card`
-需要新加一个Card 的背景颜色
-
-```css
---card-bg-color: #fefefe;
-```
-
-请在不同的品牌的作用域下添加
-比如
-
-```css
-:root[data-theme='anker'] {
-  --card-bg-color: #fefefe;
-}
-```
-
-原理
-
-<img src="./css-explain.png" width="500" height="500"/>
-
-⚠️注意
-组件编写后请按照checklist 进行检查
-
-## checklist
-
-- [ ] 已经为组件编写了storybook API文档
-- [ ] 组件在storybook accessibility 通过测试
-- [ ] 完成组件的单元测试
-- [ ] 组件在不同品牌下的样式正常显示
-- [ ] 组件在不同设备，分辨率下显示正常
-- [ ] 组件不包含业务代码，包括文案，接口等
-
-# 如何提交代码
-
-git flow 和code review
-
-1. 主分支 (main)：存储正式发布的历史。
-2. 开发分支 (develop)：集成各种功能的分支。
-3. 功能分支 (feature/x)：从develop分支出来，用于新功能的开发。
-4. 修补分支 (hotfix/x)：从main分支出来，用于快速修补生产环境的问题。
-
-# 代码规范
-
-请遵循 eslint 的配置编写代码。
-
-提交代码前运行lint
-
-```shell
-pnpm lint
-```
-
-如果遇到eslint 报错，但是坚持自己的写法的，可以通过注释的方式，阻止eslint 校验, 并且要写明阻止的规则
-比如
-
-```js
-// eslint-disable-next-line no-alert
-alert('Example of disabled line for no-alert')
-```
-
-如果希望修改eslint 规则，修改根目录下的`.eslintrc.json`
-
- ❗ 在ui/目录下的代码导入的时候，要带上.js后缀，比如 import { cn } from '../helpers/index.js' 否则在使用的时候会出现 ERR_UNSUPPORTED_DIR_IMPORT 问题
-
-# Tesing
-
-unit test 使用 [jest](https://jestjs.io/) 和 [@test-library/react](https://testing-library.com/)。
-
-运行单元测试
-
-```shell
-pnpm test
-```
-
-# publish  
-
-先从 master 分支checkout 出新的分支。
-
-在新的分支执行
-
-`pnpm changeset add `
-空格选择要发布的包 @anker-in/headless-ui   
-回车   
-
-会依次出现要增加的语意版本号  
-`{major -> minor -> patch}`   
-这里如果只增加patch 可以一路回车。
-
-然后提交代码，合并到`master`分支。
-
-最后到`coding`网站的持续集成找到项目，手动触发ci/cd。  
-