@clikvn/agent-widget-embedded 0.0.11-dev → 0.0.13-dev

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@clikvn/agent-widget-embedded",
   "description": "This is agent widget",
-  "version": "0.0.11-dev",
+  "version": "0.0.13-dev",
   "author": "Clik JSC",
   "license": "ISC",
   "type": "module",
@@ -13,7 +13,8 @@
     "lint": "eslint src",
     "lint:fix": "eslint --fix src",
     "prettier": "prettier --write .",
-    "pub": "publish --access public"
+    "pub": "publish --access public",
+    "deploy": "yarn build && yarn publish --access public"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.6.0",
@@ -22,29 +23,13 @@
     "@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",
     "device-detector-js": "^3.0.3",
     "framer-motion": "^11.18.0",
-    "publish": "^0.6.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"
   },
@@ -72,6 +57,14 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-typescript": "^12.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",
     "@typescript-eslint/eslint-plugin": "^8.20.0",
     "@typescript-eslint/parser": "^8.20.0",
     "autoprefixer": "^10.4.20",
@@ -79,13 +72,24 @@
     "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-prettier": "^5.2.2",
     "prettier": "^3.4.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-scripts": "5.0.1",
     "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"
+    "rollup-plugin-uglify": "^6.0.4",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss": "^3.4.15",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^5.6.3"
+  },
+  "peerDependencies": {
+    "react": ">=16.0.0",
+    "react-dom": ">=16.0.0"
   },
   "engines": {
     "node": ">=18.18.0"

package/rollup.config.js

@@ -40,6 +40,7 @@ const indexConfig = {
     typescriptPaths({ preserveExtensions: true }),
     terser({ output: { comments: false } }),
   ],
+  external: ['react', 'react-dom'],
 };
 
 const configs = [

package/.eslintrc

@@ -1,34 +0,0 @@
-{
-  "root": true,
-  "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint", "prettier", "react-hooks"],
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:react-hooks/recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:prettier/recommended"
-  ],
-  "ignorePatterns": ["node_modules/*"],
-  "parserOptions": {
-    "project": ["./tsconfig.json"]
-  },
-  "rules": {
-    "@typescript-eslint/no-explicit-any": "warn",
-    "@typescript-eslint/no-unused-vars": ["warn", { "vars": "all" }],
-    "react-hooks/exhaustive-deps": "warn",
-    "no-console": ["warn", { "allow": ["info", "warn", "error"] }],
-    "no-return-await": "off",
-    "@typescript-eslint/return-await": "warn",
-    "@typescript-eslint/no-empty-object-type": "warn",
-    "@next/next/no-img-element": "off",
-    "prettier/prettier": ["warn", {
-      "semi": true,
-      "singleQuote": true,
-      "tabWidth": 2,
-      "trailingComma": "es5",
-      "printWidth": 80,
-      "bracketSpacing": true
-    }]
-  }
-}

package/.prettierrc

@@ -1,8 +0,0 @@
-{
-  "semi": true,
-  "singleQuote": true,
-  "tabWidth": 2,
-  "trailingComma": "es5",
-  "printWidth": 80,
-  "bracketSpacing": true
-}

package/src/assets/common.css

@@ -1,148 +0,0 @@
-@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

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

package/src/commons/constants/index.ts

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

package/src/commons/constants/variables.ts

@@ -1,25 +0,0 @@
-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',
-};
-
-export const LAYOUT_MODE = {
-  GRID: 'grid',
-  SCROLL: 'scroll',
-};

package/src/components/Agent/index.tsx

@@ -1,14 +0,0 @@
-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/AudioPlayer.tsx

@@ -1,44 +0,0 @@
-import React, { useRef, useState } from 'react';
-import { PlayIcon, StopIcon1 } from './Icons';
-
-const AudioPlayer = ({
-  src,
-  autoplay = false,
-}: {
-  src: string;
-  autoplay?: boolean;
-}) => {
-  const audioRef = useRef<any>(null);
-  const [isPlaying, setIsPlaying] = useState(false);
-
-  const handlePlayPause = (e: any) => {
-    e.preventDefault();
-    if (isPlaying) {
-      audioRef.current.pause();
-    } else {
-      audioRef.current.play();
-    }
-  };
-
-  return (
-    <>
-      <button
-        className="rounded-full cursor-pointer h-fit w-[24px]"
-        onClick={handlePlayPause}
-      >
-        {isPlaying ? <StopIcon1 /> : <PlayIcon />}
-      </button>
-      <audio
-        ref={audioRef}
-        className="hidden"
-        src={src}
-        autoPlay={autoplay}
-        onEnded={() => setIsPlaying(false)}
-        onPause={() => setIsPlaying(false)}
-        onPlay={() => setIsPlaying(true)}
-      ></audio>
-    </>
-  );
-};
-
-export default AudioPlayer;

package/src/components/Chat/Chat.tsx

@@ -1,91 +0,0 @@
-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,
-    enableTTS,
-    setEnableTTS,
-    suggestions,
-  } = 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-full 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}
-              enableTTS={enableTTS}
-            />
-          ))}
-
-          {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}
-            setEnableTTS={setEnableTTS}
-            enableTTS={enableTTS}
-            suggestedActions={suggestions}
-          />
-        </form>
-      </div>
-    </>
-  );
-};