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

package/src/components/chat/response.tsx

@@ -0,0 +1,19 @@
+import { useChatContext } from '@copilotkit/react-ui'
+import { useCopilotChat } from '@copilotkit/react-core'
+
+const ResponseButton = () => {
+  const context = useChatContext()
+
+  const { isLoading, reloadMessages, stopGeneration } = useCopilotChat()
+
+  return (
+    !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>
+    )
+  )
+}
+
+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>
 
@@ -20,8 +20,7 @@ const meta: Meta<typeof Chat> = {
   // 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>
     ),
@@ -35,8 +34,8 @@ export const Default: Story = {
     title: 'DTC Live Chat',
     runtimeUrl: 'https://beta-dtcapi.anker.com',
     shopify_domain: 'soundcoreusa.myshopify.com',
-    user_id: 'ar_411',
-    query: '',
-    lang: { popupTip: 'Hi ! Welcome to soundcore Innovations live chat！' },
+    user_id: 'arno6',
+    showResponseButton: 'follow',
+    lang: { popupTip: 'Hi ! Welcome to soundcore Innovations live chat！', popupTipTimeout: [3000, 6000] },
   },
 }

package/src/styles/css/messages.css

@@ -71,3 +71,15 @@
   flex-direction: column;
   justify-content: flex-end;
 }
+
+.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 {

package/src/styles/css/suggestions.css

@@ -2,6 +2,7 @@
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
+  margin-top: 12px;
 }
 
 .copilotKitMessages footer h6 {

package/dist/cjs/components/chat/chatContext.js

@@ -1,2 +0,0 @@
-"use strict";var p=Object.create;var a=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var h=(e,t)=>{for(var o in t)a(e,o,{get:t[o],enumerable:!0})},i=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of d(t))!R.call(e,n)&&n!==o&&a(e,n,{get:()=>t[n],enumerable:!(r=C(t,n))||r.enumerable});return e};var x=(e,t,o)=>(o=e!=null?p(l(e)):{},i(t||!e||!e.__esModule?a(o,"default",{value:e,enumerable:!0}):o,e)),u=e=>i(a({},"__esModule",{value:!0}),e);var I={};h(I,{ChatContext:()=>s,useChatContext:()=>f});module.exports=u(I);var c=x(require("react"));const s=c.default.createContext(void 0);function f(){const e=c.default.useContext(s);if(e===void 0)throw new Error("Context not found. Did you forget to wrap your app in a <ChatContextProvider> component?");return e}
-//# sourceMappingURL=chatContext.js.map

package/dist/cjs/components/chat/chatContext.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/components/chat/chatContext.tsx"],
-  "sourcesContent": ["import React from 'react'\n\n/**\n * Icons for CopilotChat component.\n */\nexport interface CopilotChatIcons {\n  /**\n   * The icon to use for the open chat button.\n   * @default <OpenIcon />\n   */\n  openIcon?: React.ReactNode\n\n  /**\n   * The icon to use for the close chat button.\n   * @default <CloseIcon />\n   */\n  closeIcon?: React.ReactNode\n\n  /**\n   * The icon to use for the close chat button in the header.\n   * @default <HeaderCloseIcon />\n   */\n  headerCloseIcon?: React.ReactNode\n\n  /**\n   * The icon to use for the send button.\n   * @default <SendIcon />\n   */\n  sendIcon?: React.ReactNode\n\n  /**\n   * The icon to use for the activity indicator.\n   * @default <ActivityIcon />\n   */\n  activityIcon?: React.ReactNode\n\n  /**\n   * The icon to use for the spinner.\n   * @default <SpinnerIcon />\n   */\n  spinnerIcon?: React.ReactNode\n\n  /**\n   * The icon to use for the stop button.\n   * @default <StopIcon />\n   */\n  stopIcon?: React.ReactNode\n\n  /**\n   * The icon to use for the regenerate button.\n   * @default <RegenerateIcon />\n   */\n  regenerateIcon?: React.ReactNode\n\n  /**\n   * The icons to use for push to talk.\n   * @default <PushToTalkIcon />\n   */\n\n  pushToTalkIcon?: React.ReactNode\n}\n\n/**\n * Labels for CopilotChat component.\n */\nexport interface CopilotChatLabels {\n  /**\n   * The initial message(s) to display in the chat window.\n   */\n  initial?: string | string[]\n\n  /**\n   * The title to display in the header.\n   * @default \"CopilotKit\"\n   */\n  title?: string\n\n  /**\n   * The placeholder to display in the input.\n   * @default \"Type a message...\"\n   */\n  placeholder?: string\n\n  /**\n   * The message to display when an error occurs.\n   * @default \"\u274C An error occurred. Please try again.\"\n   */\n  error?: string\n\n  /**\n   * The label to display on the stop button.\n   * @default \"Stop generating\"\n   */\n  stopGenerating?: string\n\n  /**\n   * The label to display on the regenerate button.\n   * @default \"Regenerate response\"\n   */\n  regenerateResponse?: string\n}\n\ninterface ChatContext {\n  labels: Required<CopilotChatLabels>\n  icons: Required<CopilotChatIcons>\n  open: boolean\n  setOpen: (_open: boolean) => void\n}\n\nexport const ChatContext = React.createContext<ChatContext | undefined>(undefined)\n\nexport function useChatContext(): ChatContext {\n  const context = React.useContext(ChatContext)\n  if (context === undefined) {\n    throw new Error('Context not found. Did you forget to wrap your app in a <ChatContextProvider> component?')\n  }\n  return context\n}\n\nexport interface ChatContextProps {\n  // temperature?: number;\n  // instructions?: string;\n  // maxFeedback?: number;\n  labels?: CopilotChatLabels\n  icons?: CopilotChatIcons\n  children?: React.ReactNode\n  open: boolean\n  setOpen: (_open: boolean) => void\n}\n\n// export const ChatContextProvider = ({\n//   // temperature,\n//   // instructions,\n//   // maxFeedback,\n//   labels,\n//   icons,\n//   children,\n//   open,\n//   setOpen,\n// }: ChatContextProps) => {\n//   const context = {\n//     labels: {\n//       ...{\n//         initial: \"\",\n//         title: \"CopilotKit\",\n//         placeholder: \"Type a message...\",\n//         error: \"\u274C An error occurred. Please try again.\",\n//         stopGenerating: \"Stop generating\",\n//         regenerateResponse: \"Regenerate response\",\n//       },\n//       ...labels,\n//     },\n\n//     icons: {\n//       ...icons,\n//     },\n//     open,\n//     setOpen,\n//   };\n//   return <ChatContext.Provider value={context}>{children}</ChatContext.Provider>;\n// };\n"],
-  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,iBAAAE,EAAA,mBAAAC,IAAA,eAAAC,EAAAJ,GAAA,IAAAK,EAAkB,oBA6GX,MAAMH,EAAc,EAAAI,QAAM,cAAuC,MAAS,EAE1E,SAASH,GAA8B,CAC5C,MAAMI,EAAU,EAAAD,QAAM,WAAWJ,CAAW,EAC5C,GAAIK,IAAY,OACd,MAAM,IAAI,MAAM,0FAA0F,EAE5G,OAAOA,CACT",
-  "names": ["chatContext_exports", "__export", "ChatContext", "useChatContext", "__toCommonJS", "import_react", "React", "context"]
-}

package/dist/cjs/components/theme.js

@@ -1,2 +0,0 @@
-"use strict";var m=Object.create;var o=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var u=(e,t)=>{for(var r in t)o(e,r,{get:t[r],enumerable:!0})},d=(e,t,r,c)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of h(t))!f.call(e,a)&&a!==r&&o(e,a,{get:()=>t[a],enumerable:!(c=s(t,a))||c.enumerable});return e};var l=(e,t,r)=>(r=e!=null?m(p(e)):{},d(t||!e||!e.__esModule?o(r,"default",{value:e,enumerable:!0}):r,e)),i=e=>d(o({},"__esModule",{value:!0}),e);var T={};u(T,{default:()=>R});module.exports=i(T);var n=require("react/jsx-runtime"),b=l(require("react"));const y=({brand:e,children:t})=>(b.useLayoutEffect(()=>{document.querySelector("html")?.setAttribute("data-brand-theme",e)},[]),(0,n.jsx)(n.Fragment,{children:t}));var R=y;
-//# sourceMappingURL=theme.js.map

package/dist/cjs/components/theme.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/theme.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport type { Brand } from '../helpers/constants.js'\n\ninterface ThemeProps {\n  brand: Brand\n  children: React.ReactNode\n}\n/**\n *\n * @param param\n * @returns\n */\nconst Theme = ({ brand, children }: ThemeProps) => {\n  React.useLayoutEffect(() => {\n    document.querySelector('html')?.setAttribute('data-brand-theme', brand)\n  }, [])\n  return <>{children}</>\n}\n\nexport default Theme\n"],
-  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAgBS,IAAAI,EAAA,6BAhBTC,EAAuB,oBAYvB,MAAMC,EAAQ,CAAC,CAAE,MAAAC,EAAO,SAAAC,CAAS,KAC/BH,EAAM,gBAAgB,IAAM,CAC1B,SAAS,cAAc,MAAM,GAAG,aAAa,mBAAoBE,CAAK,CACxE,EAAG,CAAC,CAAC,KACE,mBAAG,SAAAC,EAAS,GAGrB,IAAON,EAAQI",
-  "names": ["theme_exports", "__export", "theme_default", "__toCommonJS", "import_jsx_runtime", "React", "Theme", "brand", "children"]
-}

package/dist/esm/components/chat/chatContext.js

@@ -1,2 +0,0 @@
-import t from"react";const o=t.createContext(void 0);function a(){const e=t.useContext(o);if(e===void 0)throw new Error("Context not found. Did you forget to wrap your app in a <ChatContextProvider> component?");return e}export{o as ChatContext,a as useChatContext};
-//# sourceMappingURL=chatContext.js.map

package/dist/esm/components/chat/chatContext.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/components/chat/chatContext.tsx"],
-  "sourcesContent": ["import React from 'react'\n\n/**\n * Icons for CopilotChat component.\n */\nexport interface CopilotChatIcons {\n  /**\n   * The icon to use for the open chat button.\n   * @default <OpenIcon />\n   */\n  openIcon?: React.ReactNode\n\n  /**\n   * The icon to use for the close chat button.\n   * @default <CloseIcon />\n   */\n  closeIcon?: React.ReactNode\n\n  /**\n   * The icon to use for the close chat button in the header.\n   * @default <HeaderCloseIcon />\n   */\n  headerCloseIcon?: React.ReactNode\n\n  /**\n   * The icon to use for the send button.\n   * @default <SendIcon />\n   */\n  sendIcon?: React.ReactNode\n\n  /**\n   * The icon to use for the activity indicator.\n   * @default <ActivityIcon />\n   */\n  activityIcon?: React.ReactNode\n\n  /**\n   * The icon to use for the spinner.\n   * @default <SpinnerIcon />\n   */\n  spinnerIcon?: React.ReactNode\n\n  /**\n   * The icon to use for the stop button.\n   * @default <StopIcon />\n   */\n  stopIcon?: React.ReactNode\n\n  /**\n   * The icon to use for the regenerate button.\n   * @default <RegenerateIcon />\n   */\n  regenerateIcon?: React.ReactNode\n\n  /**\n   * The icons to use for push to talk.\n   * @default <PushToTalkIcon />\n   */\n\n  pushToTalkIcon?: React.ReactNode\n}\n\n/**\n * Labels for CopilotChat component.\n */\nexport interface CopilotChatLabels {\n  /**\n   * The initial message(s) to display in the chat window.\n   */\n  initial?: string | string[]\n\n  /**\n   * The title to display in the header.\n   * @default \"CopilotKit\"\n   */\n  title?: string\n\n  /**\n   * The placeholder to display in the input.\n   * @default \"Type a message...\"\n   */\n  placeholder?: string\n\n  /**\n   * The message to display when an error occurs.\n   * @default \"\u274C An error occurred. Please try again.\"\n   */\n  error?: string\n\n  /**\n   * The label to display on the stop button.\n   * @default \"Stop generating\"\n   */\n  stopGenerating?: string\n\n  /**\n   * The label to display on the regenerate button.\n   * @default \"Regenerate response\"\n   */\n  regenerateResponse?: string\n}\n\ninterface ChatContext {\n  labels: Required<CopilotChatLabels>\n  icons: Required<CopilotChatIcons>\n  open: boolean\n  setOpen: (_open: boolean) => void\n}\n\nexport const ChatContext = React.createContext<ChatContext | undefined>(undefined)\n\nexport function useChatContext(): ChatContext {\n  const context = React.useContext(ChatContext)\n  if (context === undefined) {\n    throw new Error('Context not found. Did you forget to wrap your app in a <ChatContextProvider> component?')\n  }\n  return context\n}\n\nexport interface ChatContextProps {\n  // temperature?: number;\n  // instructions?: string;\n  // maxFeedback?: number;\n  labels?: CopilotChatLabels\n  icons?: CopilotChatIcons\n  children?: React.ReactNode\n  open: boolean\n  setOpen: (_open: boolean) => void\n}\n\n// export const ChatContextProvider = ({\n//   // temperature,\n//   // instructions,\n//   // maxFeedback,\n//   labels,\n//   icons,\n//   children,\n//   open,\n//   setOpen,\n// }: ChatContextProps) => {\n//   const context = {\n//     labels: {\n//       ...{\n//         initial: \"\",\n//         title: \"CopilotKit\",\n//         placeholder: \"Type a message...\",\n//         error: \"\u274C An error occurred. Please try again.\",\n//         stopGenerating: \"Stop generating\",\n//         regenerateResponse: \"Regenerate response\",\n//       },\n//       ...labels,\n//     },\n\n//     icons: {\n//       ...icons,\n//     },\n//     open,\n//     setOpen,\n//   };\n//   return <ChatContext.Provider value={context}>{children}</ChatContext.Provider>;\n// };\n"],
-  "mappings": "AAAA,OAAOA,MAAW,QA6GX,MAAMC,EAAcD,EAAM,cAAuC,MAAS,EAE1E,SAASE,GAA8B,CAC5C,MAAMC,EAAUH,EAAM,WAAWC,CAAW,EAC5C,GAAIE,IAAY,OACd,MAAM,IAAI,MAAM,0FAA0F,EAE5G,OAAOA,CACT",
-  "names": ["React", "ChatContext", "useChatContext", "context"]
-}

package/dist/esm/components/theme.js

@@ -1,2 +0,0 @@
-import{Fragment as o,jsx as n}from"react/jsx-runtime";import*as r from"react";const a=({brand:e,children:t})=>(r.useLayoutEffect(()=>{document.querySelector("html")?.setAttribute("data-brand-theme",e)},[]),n(o,{children:t}));var c=a;export{c as default};
-//# sourceMappingURL=theme.js.map

package/dist/esm/components/theme.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/theme.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport type { Brand } from '../helpers/constants.js'\n\ninterface ThemeProps {\n  brand: Brand\n  children: React.ReactNode\n}\n/**\n *\n * @param param\n * @returns\n */\nconst Theme = ({ brand, children }: ThemeProps) => {\n  React.useLayoutEffect(() => {\n    document.querySelector('html')?.setAttribute('data-brand-theme', brand)\n  }, [])\n  return <>{children}</>\n}\n\nexport default Theme\n"],
-  "mappings": "AAgBS,mBAAAA,EAAA,OAAAC,MAAA,oBAhBT,UAAYC,MAAW,QAYvB,MAAMC,EAAQ,CAAC,CAAE,MAAAC,EAAO,SAAAC,CAAS,KAC/BH,EAAM,gBAAgB,IAAM,CAC1B,SAAS,cAAc,MAAM,GAAG,aAAa,mBAAoBE,CAAK,CACxE,EAAG,CAAC,CAAC,EACEH,EAAAD,EAAA,CAAG,SAAAK,EAAS,GAGrB,IAAOC,EAAQH",
-  "names": ["Fragment", "jsx", "React", "Theme", "brand", "children", "theme_default"]
-}

package/src/components/chat/chatContext.tsx

@@ -1,161 +0,0 @@
-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>;
-// };