@clikvn/agent-widget-embedded 0.0.1 → 0.0.2-dev

package/dist/window.d.ts

@@ -4,6 +4,7 @@ type VoiceAgentWidget = {
     agentId: string;
     overrideConfig?: {
         chatId?: string | undefined;
+        overrideConfig?: Record<string, any>;
     } & Record<string, unknown>;
     theme?: {
         avatar?: string;

package/dist/window.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"window.d.ts","sourceRoot":"","sources":["../src/window.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAItC,KAAK,gBAAgB,GAAG;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE;QACf,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;KAC7B,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC5B,KAAK,CAAC,EAAE;QACN,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC,UAAU,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC,CAAC;CACtD,CAAC;AACF,eAAO,MAAM,UAAU,UAAW,gBAAgB,GAAG;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,SAYnE,CAAC;AAEF,eAAO,MAAM,OAAO,YAEnB,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,OAAO,UAAU,CAAC;IAC9B,OAAO,EAAE,OAAO,OAAO,CAAC;CACzB,CAAC;AAQF,eAAO,MAAM,eAAe;wBA7BM,gBAAgB,GAAG;QAAE,EAAE,CAAC,EAAE,MAAM,CAAA;KAAE;;CAgClE,CAAC;AAEH,eAAO,MAAM,wBAAwB,UAAW,WAAW,SAG1D,CAAC"}
+{"version":3,"file":"window.d.ts","sourceRoot":"","sources":["../src/window.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAItC,KAAK,gBAAgB,GAAG;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE;QACf,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;QAC5B,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;KACtC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC5B,KAAK,CAAC,EAAE;QACN,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC,UAAU,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC,CAAC;CACtD,CAAC;AACF,eAAO,MAAM,UAAU,UAAW,gBAAgB,GAAG;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,SAYnE,CAAC;AAEF,eAAO,MAAM,OAAO,YAEnB,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,OAAO,UAAU,CAAC;IAC9B,OAAO,EAAE,OAAO,OAAO,CAAC;CACzB,CAAC;AAQF,eAAO,MAAM,eAAe;wBA7BM,gBAAgB,GAAG;QAAE,EAAE,CAAC,EAAE,MAAM,CAAA;KAAE;;CAgClE,CAAC;AAEH,eAAO,MAAM,wBAAwB,UAAW,WAAW,SAG1D,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@clikvn/agent-widget-embedded",
   "description": "This is agent widget",
-  "version": "0.0.1",
+  "version": "0.0.2-dev",
   "author": "Clik JSC",
   "license": "ISC",
   "type": "module",

package/src/assets/common.css

@@ -3,146 +3,146 @@
 @tailwind utilities;
 
 :root {
-    --foreground-rgb: 0, 0, 0;
-    --background-start-rgb: 214, 219, 220;
-    --background-end-rgb: 255, 255, 255;
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
 }
 
 @media (prefers-color-scheme: dark) {
-    :root {
-        --foreground-rgb: 255, 255, 255;
-        --background-start-rgb: 0, 0, 0;
-        --background-end-rgb: 0, 0, 0;
-    }
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
 }
 
 @layer utilities {
-    .text-balance {
-        text-wrap: balance;
-    }
+  .text-balance {
+    text-wrap: balance;
+  }
 }
 
 @layer base {
-    :root {
-        --background: 0 0% 100%;
-        --foreground: 240 10% 3.9%;
-        --card: 0 0% 100%;
-        --card-foreground: 240 10% 3.9%;
-        --popover: 0 0% 100%;
-        --popover-foreground: 240 10% 3.9%;
-        --primary: 217 100% 45%;
-        --primary-foreground: 0 0% 98%;
-        --secondary: 213 100% 96%;
-        --secondary-foreground: 240 5.9% 10%;
-        --muted: 240 4.8% 95.9%;
-        --muted-foreground: 240 3.8% 46.1%;
-        --accent: 240 4.8% 95.9%;
-        --accent-foreground: 240 5.9% 10%;
-        --destructive: 0 84.2% 60.2%;
-        --destructive-foreground: 0 0% 98%;
-        --border: 214 32% 91%;
-        --input: 240 5.9% 90%;
-        --ring: 240 10% 3.9%;
-        --chart-1: 12 76% 61%;
-        --chart-2: 173 58% 39%;
-        --chart-3: 197 37% 24%;
-        --chart-4: 43 74% 66%;
-        --chart-5: 27 87% 67%;
-        --radius: 0.5rem;
-        --sidebar-background: 0 0% 98%;
-        --sidebar-foreground: 240 10% 3.9%;
-        --sidebar-primary: 240 5.9% 10%;
-        --sidebar-primary-foreground: 0 0% 98%;
-        --sidebar-accent: 240 5.9% 94%;
-        --sidebar-accent-foreground: 240 5.9% 10%;
-        --sidebar-border: 220 13% 91%;
-        --sidebar-ring: 217.2 91.2% 59.8%;
-    }
-    .dark {
-        --background: 240 10% 3.9%;
-        --foreground: 0 0% 98%;
-        --card: 240 10% 3.9%;
-        --card-foreground: 0 0% 98%;
-        --popover: 240 10% 3.9%;
-        --popover-foreground: 0 0% 98%;
-        --primary: 208.69 100% 24.18%;
-        --primary-foreground: 207 100% 96%;
-        --secondary: 240 3.7% 15.9%;
-        --secondary-foreground: 0 0% 98%;
-        --muted: 240 3.7% 15.9%;
-        --muted-foreground: 240 5% 64.9%;
-        --accent: 240 3.7% 15.9%;
-        --accent-foreground: 0 0% 98%;
-        --destructive: 0 62.8% 30.6%;
-        --destructive-foreground: 0 0% 98%;
-        --border: 240 3.7% 15.9%;
-        --input: 240 3.7% 15.9%;
-        --ring: 240 4.9% 83.9%;
-        --chart-1: 220 70% 50%;
-        --chart-2: 160 60% 45%;
-        --chart-3: 30 80% 55%;
-        --chart-4: 280 65% 60%;
-        --chart-5: 340 75% 55%;
-        --sidebar-background: 240 5.9% 10%;
-        --sidebar-foreground: 240 4.8% 95.9%;
-        --sidebar-primary: 224.3 76.3% 48%;
-        --sidebar-primary-foreground: 0 0% 100%;
-        --sidebar-accent: 240 3.7% 15.9%;
-        --sidebar-accent-foreground: 240 4.8% 95.9%;
-        --sidebar-border: 240 3.7% 15.9%;
-        --sidebar-ring: 217.2 91.2% 59.8%;
-    }
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 217 100% 45%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 213 100% 96%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 214 32% 91%;
+    --input: 240 5.9% 90%;
+    --ring: 240 10% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 10% 3.9%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 5.9% 94%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 208.69 100% 24.18%;
+    --primary-foreground: 207 100% 96%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
 }
 
 @layer base {
-    * {
-        @apply border-border;
-    }
+  * {
+    @apply border-border;
+  }
 
-    body {
-        @apply bg-background text-foreground;
-    }
+  body {
+    @apply bg-background text-foreground;
+  }
 
-    @font-face {
-        /*font-family: "geist";*/
-        font-family: 'Be Vietnam Pro', sans-serif;
-        font-style: normal;
-        font-weight: 100 900;
-        /*src: url(/fonts/geist.woff2) format("woff2");*/
-    }
+  @font-face {
+    /*font-family: "geist";*/
+    font-family: 'Be Vietnam Pro', sans-serif;
+    font-style: normal;
+    font-weight: 100 900;
+    /*src: url(/fonts/geist.woff2) format("woff2");*/
+  }
 
-    @font-face {
-        /*font-family: "geist-mono";*/
-        font-family: 'Be Vietnam Pro', sans-serif;
-        font-style: normal;
-        font-weight: 100 900;
-        /*src: url(/fonts/geist-mono.woff2) format("woff2");*/
-    }
+  @font-face {
+    /*font-family: "geist-mono";*/
+    font-family: 'Be Vietnam Pro', sans-serif;
+    font-style: normal;
+    font-weight: 100 900;
+    /*src: url(/fonts/geist-mono.woff2) format("woff2");*/
+  }
 }
 
 .skeleton {
-    * {
-        pointer-events: none !important;
-    }
+  * {
+    pointer-events: none !important;
+  }
 
-    *[class^="text-"] {
-        color: transparent;
-        @apply rounded-md bg-foreground/20 select-none animate-pulse;
-    }
+  *[class^='text-'] {
+    color: transparent;
+    @apply rounded-md bg-foreground/20 select-none animate-pulse;
+  }
 
-    .skeleton-bg {
-        @apply bg-foreground/10;
-    }
+  .skeleton-bg {
+    @apply bg-foreground/10;
+  }
 
-    .skeleton-div {
-        @apply bg-foreground/20 animate-pulse;
-    }
+  .skeleton-div {
+    @apply bg-foreground/20 animate-pulse;
+  }
 }
 
 .ProseMirror {
-    outline: none;
+  outline: none;
 }
 
 .suggestion-highlight {
-    @apply bg-blue-200 hover:bg-blue-300 dark:hover:bg-blue-400/50 dark:text-blue-50 dark:bg-blue-500/40;
+  @apply bg-blue-200 hover:bg-blue-300 dark:hover:bg-blue-400/50 dark:text-blue-50 dark:bg-blue-500/40;
 }

package/src/commons/constants/variables.ts

@@ -1,6 +1,6 @@
 export const BE_API = '';
 
-export const LANGUAGE_HEADER: {[key: string]: string} = {
+export const LANGUAGE_HEADER: { [key: string]: string } = {
   vi: 'vn',
   en: 'en',
   jp: 'jp',

package/src/components/Agent/index.tsx

@@ -1,12 +1,14 @@
+import { useChatData } from '../../hooks/useChatData';
 import { useConfiguration } from '../../hooks/useConfiguration';
 import { Chat } from '../Chat/Chat';
-import { useChatData } from '../../hooks/useChatData';
 
 const Agent = () => {
   const { agentId } = useConfiguration();
-  const { chatId } = useChatData();
+  const { chatId, initialMessages } = useChatData();
 
-  return <Chat agentId={agentId} id={chatId} />;
+  return (
+    <Chat agentId={agentId} id={chatId} initialMessages={initialMessages} />
+  );
 };
 
 export default Agent;

package/src/components/Chat/Markdown.tsx

@@ -164,7 +164,7 @@ const NonMemoizedMarkdown: FC<{
   const { children: content, usedTools } = props;
   const components: Partial<Components> = useMemo(() => {
     return {
-      code: ({ node, inline, className, children, ...rest } : any) => {
+      code: ({ node, inline, className, children, ...rest }: any) => {
         const match = /language-(\w+)/.exec(className || '');
         return !inline && match ? (
           <pre

package/src/features/AgentWidget/index.tsx

@@ -11,6 +11,7 @@ export type AgentWidgetType = {
   agentId: string;
   overrideConfig?: {
     chatId?: string | undefined;
+    overrideConfig?: Record<string, unknown>;
   } & Record<string, unknown>;
   theme?: {
     avatar?: string;
@@ -34,7 +35,6 @@ const AgentWidget: FC<AgentWidgetType> = (props: AgentWidgetType) => {
         <ChatDataProvider
           data={{
             chatId: props.overrideConfig?.chatId,
-            theme: props.theme,
           }}
         >
           <Agent />

package/src/hooks/useChat.ts

@@ -36,7 +36,7 @@ type ReturnType = {
 
 export const useChat = (props: PropsType): ReturnType => {
   const { id, initialMessages, initialInput, agentId } = props;
-  const { apiHost } = useConfiguration();
+  const { apiHost, overrideConfig } = useConfiguration();
 
   const idKey = id ?? generateUUID();
   const chatIdRef = useRef<string>(idKey);
@@ -162,6 +162,7 @@ export const useChat = (props: PropsType): ReturnType => {
       chatId: chatIdRef.current,
       question: message.content,
       chatflowId: bot?.id,
+      overrideConfig: overrideConfig?.overrideConfig,
     });
     setInput('');
   };
@@ -204,6 +205,7 @@ export const useChat = (props: PropsType): ReturnType => {
         question: input,
         uploads: files || [],
         chatflowId: bot?.id,
+        overrideConfig: overrideConfig?.overrideConfig,
       });
       setInput('');
     },

package/src/hooks/useChatData.tsx

@@ -1,13 +1,14 @@
 import React, { createContext, useEffect, useState } from 'react';
 import { EVENT_TYPE } from '../models';
+import { getChatMessage } from '../services/chat.service';
+import { ChatMessageType } from '../types/flowise.type';
 import { generateUUID } from '../utils/commonUtils';
+import { useConfiguration } from './useConfiguration';
 
 type ChatData = {
   chatId?: string | undefined;
-  theme?: {
-    avatar?: string;
-  } & Record<string, unknown>;
   listeners?: Record<EVENT_TYPE, (props: any) => void>;
+  initialMessages?: ChatMessageType[];
 };
 
 const ChatDataContext = createContext<ChatData | undefined>(undefined);
@@ -20,13 +21,34 @@ export const ChatDataProvider = ({
   data: ChatData;
 }) => {
   const [chatData, setChatData] = useState<ChatData>({
-    chatId: generateUUID(),
+    chatId: data.chatId || generateUUID(),
   });
 
+  const { apiHost } = useConfiguration();
+
+  const fetchHistory = async () => {
+    if (!chatData?.chatId) {
+      return;
+    }
+
+    const initialMessages = await getChatMessage({
+      chatId: chatData.chatId!,
+      apiHost,
+    });
+    setChatData({
+      ...chatData,
+      initialMessages,
+    });
+  };
+
   useEffect(() => {
-    setChatData(data);
+    setChatData({ ...data, chatId: chatData.chatId });
   }, [data]);
 
+  useEffect(() => {
+    fetchHistory();
+  }, [chatData?.chatId]);
+
   return (
     <ChatDataContext.Provider value={chatData}>
       {children}

package/src/hooks/useConfiguration.tsx

@@ -6,6 +6,7 @@ type ConfigurationData = {
   agentId: string;
   overrideConfig?: {
     chatId?: string | undefined;
+    overrideConfig?: Record<string, any>;
   } & Record<string, unknown>;
   theme?: {
     avatar?: string;

package/src/register.tsx

@@ -8,6 +8,7 @@ type AgentType = {
   agentId: string;
   overrideConfig?: {
     chatId?: string | undefined;
+    overrideConfig?: Record<string, unknown>;
   } & Record<string, unknown>;
   theme?: {
     avatar?: string;
@@ -20,6 +21,7 @@ export class AgentWidgetComponent extends HTMLElement {
   agentId?: string;
   overrideConfig?: {
     chatId?: string | undefined;
+    overrideConfig?: Record<string, unknown>;
   } & Record<string, unknown>;
   theme?: {
     avatar?: string;

package/src/services/chat.service.ts

@@ -139,7 +139,7 @@ export const createAttachments = async ({
 export const getById = async ({
   accessToken,
   id,
-  apiHost
+  apiHost,
 }: {
   accessToken?: string;
   id: string;

package/src/window.ts

@@ -9,6 +9,7 @@ type VoiceAgentWidget = {
   agentId: string;
   overrideConfig?: {
     chatId?: string | undefined;
+    overrideConfig?: Record<string, any>;
   } & Record<string, unknown>;
   theme?: {
     avatar?: string;

package/tailwind.config.cjs

@@ -99,11 +99,11 @@ module.exports = {
         input: 'hsl(var(--input))',
         ring: 'hsl(var(--ring))',
         chart: {
-          '1': 'hsl(var(--chart-1))',
-          '2': 'hsl(var(--chart-2))',
-          '3': 'hsl(var(--chart-3))',
-          '4': 'hsl(var(--chart-4))',
-          '5': 'hsl(var(--chart-5))',
+          1: 'hsl(var(--chart-1))',
+          2: 'hsl(var(--chart-2))',
+          3: 'hsl(var(--chart-3))',
+          4: 'hsl(var(--chart-4))',
+          5: 'hsl(var(--chart-5))',
         },
         sidebar: {
           DEFAULT: 'hsl(var(--sidebar-background))',