@clikvn/agent-widget-embedded 0.0.1-dev

package/dist/window.d.ts

@@ -0,0 +1,29 @@
+import { EVENT_TYPE } from './models';
+type VoiceAgentWidget = {
+    apiHost: string;
+    agentId: string;
+    overrideConfig?: {
+        chatId?: string | undefined;
+    } & Record<string, unknown>;
+    theme?: {
+        avatar?: string;
+    } & Record<string, unknown>;
+    listeners?: Record<EVENT_TYPE, (props: any) => void>;
+};
+export declare const initWidget: (props: VoiceAgentWidget & {
+    id?: string;
+}) => void;
+export declare const destroy: () => void;
+type AgentWidget = {
+    initWidget: typeof initWidget;
+    destroy: typeof destroy;
+};
+export declare const parseAgentVoice: () => {
+    initWidget: (props: VoiceAgentWidget & {
+        id?: string;
+    }) => void;
+    destroy: () => void;
+};
+export declare const injectAgentVoiceInWindow: (agent: AgentWidget) => void;
+export {};
+//# sourceMappingURL=window.d.ts.map

package/dist/window.d.ts.map

@@ -0,0 +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"}

package/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "@clikvn/agent-widget-embedded",
+  "description": "This is agent widget",
+  "version": "0.0.1-dev",
+  "author": "Clik JSC",
+  "license": "ISC",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "dev": "rollup --watch --config rollup.config.js",
+    "build": "rollup --config rollup.config.js",
+    "lint": "eslint src",
+    "lint:fix": "eslint --fix src",
+    "prettier": "prettier --write .",
+    "pub": "publish --access public"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@fortawesome/free-brands-svg-icons": "^6.6.0",
+    "@fortawesome/free-regular-svg-icons": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "@radix-ui/react-slot": "^1.1.1",
+    "@tailwindcss/typography": "^0.5.15",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^13.0.0",
+    "@testing-library/user-event": "^13.2.1",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^22.9.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "framer-motion": "^11.18.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-markdown": "^9.0.3",
+    "react-scripts": "5.0.1",
+    "remark-gfm": "^4.0.0",
+    "swr": "^2.3.0",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss": "^3.4.15",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^5.6.3",
+    "usehooks-ts": "^3.1.0",
+    "web-vitals": "^2.1.0"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-typescript": "^12.1.1",
+    "@typescript-eslint/eslint-plugin": "^8.20.0",
+    "@typescript-eslint/parser": "^8.20.0",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-prettier": "^5.2.2",
+    "prettier": "^3.4.2",
+    "rollup": "^4.26.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-replace": "^2.2.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript-paths": "^1.5.0",
+    "rollup-plugin-uglify": "^6.0.4"
+  },
+  "engines": {
+    "node": ">=18.18.0"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,56 @@
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from '@rollup/plugin-typescript';
+import { terser } from 'rollup-plugin-terser';
+import postcss from 'rollup-plugin-postcss';
+import { babel } from '@rollup/plugin-babel';
+import autoprefixer from 'autoprefixer';
+import { typescriptPaths } from 'rollup-plugin-typescript-paths';
+import json from '@rollup/plugin-json';
+import { uglify } from 'rollup-plugin-uglify';
+import replace from 'rollup-plugin-replace';
+import tailwindcss from 'tailwindcss';
+
+const extensions = ['.ts', '.tsx', '.js'];
+
+const indexConfig = {
+  context: 'this',
+  plugins: [
+    resolve({ extensions, browser: true }),
+    commonjs(),
+    uglify(),
+    json(),
+    babel({
+      babelHelpers: 'bundled',
+      exclude: 'node_modules/**',
+      extensions,
+    }),
+    replace({
+      'process.env.NODE_ENV': JSON.stringify('production'),
+    }),
+    postcss({
+      plugins: [autoprefixer(), tailwindcss()],
+      extract: false,
+      modules: false,
+      autoModules: false,
+      minimize: true,
+      inject: false,
+    }),
+    typescript(),
+    typescriptPaths({ preserveExtensions: true }),
+    terser({ output: { comments: false } }),
+  ],
+};
+
+const configs = [
+  {
+    ...indexConfig,
+    input: './src/web.ts',
+    output: {
+      file: 'dist/web.js',
+      format: 'esm',
+    },
+  },
+];
+
+export default configs;

package/src/assets/common.css

@@ -0,0 +1,148 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --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;
+  }
+}
+
+@layer utilities {
+  .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%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  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-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;
+  }
+
+  *[class^='text-'] {
+    color: transparent;
+    @apply rounded-md bg-foreground/20 select-none animate-pulse;
+  }
+
+  .skeleton-bg {
+    @apply bg-foreground/10;
+  }
+
+  .skeleton-div {
+    @apply bg-foreground/20 animate-pulse;
+  }
+}
+
+.ProseMirror {
+  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;
+}

package/src/assets/tailwindcss.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/commons/constants/index.ts

@@ -0,0 +1 @@
+export * from './variables';

package/src/commons/constants/variables.ts

@@ -0,0 +1,20 @@
+export const BE_API = '';
+
+export const LANGUAGE_HEADER: { [key: string]: string } = {
+  vi: 'vn',
+  en: 'en',
+  jp: 'jp',
+  kr: 'kr',
+  cn: 'cn',
+  es: 'es',
+  fr: 'fr',
+  de: 'de',
+  ru: 'ru',
+  th: 'th',
+  tw: 'tw',
+  sg: 'sg',
+  my: 'my',
+  kh: 'kh',
+  au: 'au',
+  global: 'global',
+};

package/src/components/Agent/index.tsx

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

package/src/components/Chat/Chat.tsx

@@ -0,0 +1,84 @@
+import { FC, useState } from 'react';
+import { ChatMessageType, IFileUpload } from '../../types/flowise.type';
+import { PreviewMessage, ThinkingMessage } from './Message';
+import { useChat } from '../../hooks/useChat';
+import { useScrollToBottom } from '../../hooks/useScrollToBottom';
+import { MultimodalInput } from './MultimodalInput';
+import { Overview } from './Overview';
+import { useConfiguration } from '../../hooks/useConfiguration';
+
+type PropsType = {
+  id?: string;
+  initialMessages?: ChatMessageType[];
+  agentId?: string;
+};
+
+export const Chat: FC<PropsType> = ({ id, agentId, initialMessages = [] }) => {
+  const {
+    messages = [],
+    setMessages,
+    handleSubmit,
+    input = '',
+    setInput,
+    isLoading,
+    stop,
+    chatId,
+    append,
+    bot,
+  } = useChat({ id, initialMessages, agentId });
+  const { apiHost } = useConfiguration();
+  const [messagesContainerRef, messagesEndRef] =
+    useScrollToBottom<HTMLDivElement>();
+  const [attachments, setAttachments] = useState<Array<IFileUpload>>([]);
+
+  return (
+    <>
+      <div className="flex flex-col min-w-0 h-dvh bg-background">
+        <div
+          ref={messagesContainerRef}
+          className="flex flex-col min-w-0 gap-6 flex-1 overflow-y-scroll pt-4"
+        >
+          {(messages?.length || 0) === 0 && <Overview bot={bot} />}
+
+          {(messages || []).map((message, index) => (
+            <PreviewMessage
+              key={message.id}
+              bot={bot}
+              chatId={id}
+              message={message}
+              isLoading={isLoading && (messages || []).length - 1 === index}
+            />
+          ))}
+
+          {isLoading &&
+            messages.length > 0 &&
+            messages[messages.length - 1].role === 'userMessage' && (
+              <ThinkingMessage bot={bot} />
+            )}
+
+          <div
+            ref={messagesEndRef}
+            className="shrink-0 min-w-[24px] min-h-[24px]"
+          />
+        </div>
+        <form className="flex mx-auto px-4 bg-background pb-4 md:pb-6 gap-2 w-full md:max-w-3xl">
+          <MultimodalInput
+            input={input}
+            setInput={setInput}
+            chatId={chatId}
+            handleSubmit={handleSubmit}
+            isLoading={isLoading}
+            stop={stop}
+            messages={messages}
+            setMessages={setMessages}
+            append={append}
+            attachments={attachments}
+            setAttachments={setAttachments}
+            bot={bot}
+            apiHost={apiHost}
+          />
+        </form>
+      </div>
+    </>
+  );
+};