Upgraded NPM packages versions, fixed SVG loadings and removed DaisyUI

src/frontend/package.json

@@ -3,18 +3,18 @@
   "version": "0.1.2",
   "private": true,
   "dependencies": {
-    "@headlessui/react": "^1.7.17",
+    "@headlessui/react": "^2.0.4",
-    "@hookform/resolvers": "^3.3.4",
+    "@hookform/resolvers": "^3.6.0",
-    "@million/lint": "^0.0.73",
+    "@million/lint": "^1.0.0-rc.26",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.0.4",
-    "@radix-ui/react-dialog": "^1.0.4",
+    "@radix-ui/react-dialog": "^1.0.5",
-    "@radix-ui/react-dropdown-menu": "^2.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-form": "^0.0.3",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
-    "@radix-ui/react-menubar": "^1.0.3",
+    "@radix-ui/react-menubar": "^1.0.4",
-    "@radix-ui/react-popover": "^1.0.6",
+    "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-separator": "^1.0.3",
@@ -22,60 +22,60 @@
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toggle": "^1.0.3",
-    "@radix-ui/react-tooltip": "^1.0.6",
+    "@radix-ui/react-tooltip": "^1.0.7",
-    "@tabler/icons-react": "^2.32.0",
+    "@tabler/icons-react": "^3.6.0",
-    "@tailwindcss/forms": "^0.5.6",
+    "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/line-clamp": "^0.4.4",
     "@types/axios": "^0.14.0",
-    "ace-builds": "^1.24.1",
+    "ace-builds": "^1.35.0",
-    "ag-grid-community": "^31.2.1",
+    "ag-grid-community": "^31.3.2",
-    "ag-grid-react": "^31.2.1",
+    "ag-grid-react": "^31.3.2",
     "ansi-to-html": "^0.7.2",
-    "axios": "^1.5.0",
+    "axios": "^1.7.2",
     "base64-js": "^1.5.1",
-    "class-variance-authority": "^0.6.1",
+    "class-variance-authority": "^0.7.0",
-    "clsx": "^1.2.1",
+    "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
-    "dompurify": "^3.0.5",
+    "dompurify": "^3.1.5",
     "dotenv": "^16.4.5",
     "emoji-regex": "^10.3.0",
-    "esbuild": "^0.17.19",
+    "esbuild": "^0.21.5",
     "file-saver": "^2.0.5",
-    "framer-motion": "^11.0.6",
+    "framer-motion": "^11.2.10",
     "lodash": "^4.17.21",
-    "lucide-react": "^0.394.0",
+    "lucide-react": "^0.395.0",
-    "million": "^3.0.6",
+    "million": "^3.1.11",
-    "moment": "^2.29.4",
+    "moment": "^2.30.1",
     "openseadragon": "^4.1.1",
     "p-debounce": "^4.0.0",
-    "playwright": "^1.42.0",
+    "playwright": "^1.44.1",
-    "react": "^18.2.21",
+    "react": "^18.3.1",
-    "react-ace": "^10.1.0",
+    "react-ace": "^11.0.1",
-    "react-cookie": "^4.1.1",
+    "react-cookie": "^7.1.4",
-    "react-dom": "^18.2.21",
+    "react-dom": "^18.3.1",
-    "react-error-boundary": "^4.0.11",
+    "react-error-boundary": "^4.0.13",
-    "react-hook-form": "^7.51.4",
+    "react-hook-form": "^7.52.0",
     "react-hotkeys-hook": "^4.5.0",
-    "react-icons": "^5.0.1",
+    "react-icons": "^5.2.1",
     "react-laag": "^2.0.5",
-    "react-markdown": "^8.0.7",
+    "react-markdown": "^9.0.1",
     "react-pdf": "^9.0.0",
-    "react-router-dom": "^6.15.0",
+    "react-router-dom": "^6.23.1",
     "react-syntax-highlighter": "^15.5.0",
-    "react18-json-view": "^0.2.3",
+    "react18-json-view": "^0.2.8",
-    "reactflow": "^11.9.2",
+    "reactflow": "^11.11.3",
-    "rehype-mathjax": "^4.0.3",
+    "rehype-mathjax": "^6.0.0",
-    "remark-gfm": "^3.0.1",
+    "remark-gfm": "^4.0.0",
-    "remark-math": "^5.1.1",
+    "remark-math": "^6.0.0",
-    "shadcn-ui": "^0.2.3",
+    "shadcn-ui": "^0.8.0",
-    "short-unique-id": "^4.4.4",
+    "short-unique-id": "^5.2.0",
-    "tailwind-merge": "^1.14.0",
+    "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
-    "uuid": "^9.0.0",
+    "uuid": "^10.0.0",
-    "vite-plugin-svgr": "^3.2.0",
+    "vite-plugin-svgr": "^4.2.0",
-    "web-vitals": "^2.1.4",
+    "web-vitals": "^4.1.1",
-    "zod": "^3.23.7",
+    "zod": "^3.23.8",
-    "zustand": "^4.4.7"
+    "zustand": "^4.5.2"
   },
   "scripts": {
     "dev:docker": "vite --host 0.0.0.0",
@@ -105,32 +105,31 @@
   },
   "proxy": "http://127.0.0.1:7860",
   "devDependencies": {
-    "@playwright/test": "^1.44.0",
+    "@playwright/test": "^1.44.1",
-    "@swc/cli": "^0.1.62",
+    "@swc/cli": "^0.3.12",
-    "@swc/core": "^1.3.80",
+    "@swc/core": "^1.6.1",
-    "@tailwindcss/typography": "^0.5.9",
+    "@tailwindcss/typography": "^0.5.13",
-    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/react": "^13.4.0",
+    "@testing-library/react": "^16.0.0",
-    "@testing-library/user-event": "^13.5.0",
+    "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^27.5.2",
+    "@types/jest": "^29.5.12",
-    "@types/lodash": "^4.14.197",
+    "@types/lodash": "^4.17.5",
-    "@types/node": "^16.18.46",
+    "@types/node": "^20.14.2",
-    "@types/react": "^18.2.21",
+    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.2.7",
+    "@types/react-dom": "^18.3.0",
-    "@types/uuid": "^9.0.2",
+    "@types/uuid": "^9.0.8",
-    "@vitejs/plugin-react-swc": "^3.3.2",
+    "@vitejs/plugin-react-swc": "^3.7.0",
-    "autoprefixer": "^10.4.15",
+    "autoprefixer": "^10.4.19",
-    "daisyui": "^4.0.4",
     "eslint": "^9.5.0",
-    "postcss": "^8.4.29",
+    "postcss": "^8.4.38",
     "prettier": "^3.3.2",
-    "prettier-plugin-organize-imports": "^3.2.3",
+    "prettier-plugin-organize-imports": "^3.2.4",
     "prettier-plugin-tailwindcss": "^0.6.4",
     "simple-git-hooks": "^2.11.1",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "^3.4.4",
     "tailwindcss-dotted-background": "^1.1.0",
-    "typescript": "^5.2.2",
+    "typescript": "^5.4.5",
-    "ua-parser-js": "^1.0.37",
+    "ua-parser-js": "^1.0.38",
-    "vite": "^4.5.2"
+    "vite": "^5.3.1"
   }
-}
+}

src/frontend/prettier.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  plugins: ["prettier-plugin-tailwindcss"],
-};

src/frontend/prettier.config.mjs

@@ -0,0 +1,5 @@
+const config = {
+  plugins: [import("prettier-plugin-tailwindcss")],
+};
+
+export default config;

src/frontend/src/modals/newFlowModal/components/undrawCards/index.tsx

@@ -1,19 +1,11 @@
-import { useLocation, useNavigate } from "react-router-dom";
 /// <reference types="vite-plugin-svgr/client" />
-//@ts-ignore
+import { useLocation, useNavigate } from "react-router-dom";
-import { ReactComponent as TransferFiles } from "../../../../assets/undraw_transfer_files_re_a2a9.svg";
+import TransferFiles from "../../../../assets/undraw_transfer_files_re_a2a9.svg?react";
-//@ts-ignore
+import APIRequest from "../../../../assets/undraw_real_time_analytics_re_yliv.svg?react";
-//@ts-ignore
+import PromptChaining from "../../../../assets/undraw_cloud_docs_re_xjht.svg?react";
-//@ts-ignore
+import ChatBot from "../../../../assets/undraw_chat_bot_re_e2gj.svg?react";
-import { ReactComponent as APIRequest } from "../../../../assets/undraw_real_time_analytics_re_yliv.svg";
+import BlogPost from "../../../../assets/undraw_blog_post_re_fy5x.svg?react";
-//@ts-ignore
+import BasicPrompt from "../../../../assets/undraw_short_bio_re_fmx0.svg?react";
-import { ReactComponent as PromptChaining } from "../../../../assets/undraw_cloud_docs_re_xjht.svg";
-//@ts-ignore
-import { ReactComponent as ChatBot } from "../../../../assets/undraw_chat_bot_re_e2gj.svg";
-//@ts-ignore
-import { ReactComponent as BlogPost } from "../../../../assets/undraw_blog_post_re_fy5x.svg";
-//@ts-ignore
-import { ReactComponent as BasicPrompt } from "../../../../assets/undraw_short_bio_re_fmx0.svg";
 
 import {
   Card,
@@ -43,8 +35,8 @@ export default function UndrawCardComponent({
             style={{
               width: "65%",
               height: "65%",
-              preserveAspectRatio: "xMidYMid meet",
             }}
+            preserveAspectRatio="xMidYMid meet"
           />
         );
       case "Basic Prompting (Hello, World)":
@@ -53,8 +45,8 @@ export default function UndrawCardComponent({
             style={{
               width: "65%",
               height: "65%",
-              preserveAspectRatio: "xMidYMid meet",
             }}
+            preserveAspectRatio="xMidYMid meet"
           />
         );
       case "Memory Chatbot":
@@ -63,8 +55,8 @@ export default function UndrawCardComponent({
             style={{
               width: "70%",
               height: "70%",
-              preserveAspectRatio: "xMidYMid meet",
             }}
+            preserveAspectRatio="xMidYMid meet"
           />
         );
       case "API requests":
@@ -73,8 +65,8 @@ export default function UndrawCardComponent({
             style={{
               width: "70%",
               height: "70%",
-              preserveAspectRatio: "xMidYMid meet",
             }}
+            preserveAspectRatio="xMidYMid meet"
           />
         );
       case "Document QA":
@@ -83,8 +75,8 @@ export default function UndrawCardComponent({
             style={{
               width: "80%",
               height: "80%",
-              preserveAspectRatio: "xMidYMid meet",
             }}
+            preserveAspectRatio="xMidYMid meet"
           />
         );
       case "Vector Store RAG":
@@ -93,8 +85,8 @@ export default function UndrawCardComponent({
             style={{
               width: "80%",
               height: "80%",
-              preserveAspectRatio: "xMidYMid meet",
             }}
+            preserveAspectRatio="xMidYMid meet"
           />
         );
       default:
@@ -103,8 +95,8 @@ export default function UndrawCardComponent({
             style={{
               width: "80%",
               height: "80%",
-              preserveAspectRatio: "xMidYMid meet",
             }}
+            preserveAspectRatio="xMidYMid meet"
           />
         );
     }

src/frontend/src/types/components/index.ts

@@ -250,11 +250,6 @@ export type ProgressBarType = {
   max?: number;
 };
 
-export type RadialProgressType = {
-  value?: number;
-  color?: string;
-};
-
 export type AccordionComponentType = {
   children?: ReactElement;
   open?: string[];
@@ -511,7 +506,7 @@ export type ChatInputType = {
   isDragging: boolean;
   files: FilePreviewType[];
   setFiles: (
-    files: FilePreviewType[] | ((prev: FilePreviewType[]) => FilePreviewType[])
+    files: FilePreviewType[] | ((prev: FilePreviewType[]) => FilePreviewType[]),
   ) => void;
   chatValue: string;
   inputRef: {
@@ -614,7 +609,7 @@ export type chatMessagePropsType = {
   updateChat: (
     chat: ChatMessageType,
     message: string,
-    stream_url?: string
+    stream_url?: string,
   ) => void;
 };
 
@@ -706,12 +701,12 @@ export type codeTabsPropsType = {
       value: string,
       node: NodeType,
       template: InputFieldType,
-      tweak: tweakType
+      tweak: tweakType,
     ) => string;
     buildTweakObject?: (
       tw: string,
       changes: string | string[] | boolean | number | Object[] | Object,
-      template: InputFieldType
+      template: InputFieldType,
     ) => Promise<string | void>;
   };
   activeTweaks?: boolean;

src/frontend/tailwind.config.mjs

@@ -1,5 +1,9 @@
 /** @type {import('tailwindcss').Config} */
-const { fontFamily } = require("tailwindcss/defaultTheme");
+import { fontFamily } from "tailwindcss/defaultTheme";
+import tailwindcssForms from "@tailwindcss/forms";
+import tailwindcssAnimate from "tailwindcss-animate";
+import tailwindcssTypography from "@tailwindcss/typography";
+import tailwindcssDottedBackground from "tailwindcss-dotted-background";
 
 import plugin from "tailwindcss/plugin";
 
@@ -155,8 +159,8 @@ module.exports = {
   },
 
   plugins: [
-    require("tailwindcss-animate"),
+    tailwindcssAnimate,
-    require("@tailwindcss/forms")({
+    tailwindcssForms({
       strategy: "class", // only generate classes
     }),
     plugin(function ({ addUtilities }) {
@@ -245,8 +249,7 @@ module.exports = {
         },
       });
     }),
-    require("@tailwindcss/typography"),
+    tailwindcssTypography,
-    require("daisyui"),
+    tailwindcssDottedBackground,
-    require("tailwindcss-dotted-background"),
   ],
 };

src/frontend/vite.config.mts

@@ -7,7 +7,7 @@ const apiRoutes = ["^/api/v1/", "/health"];
 const target = process.env.VITE_PROXY_TARGET || "http://127.0.0.1:7860";
 
 // Use environment variable to determine the UI server port
-const port = process.env.VITE_PORT || 3000;
+const port = Number(process.env.VITE_PORT) || 3000;
 
 const proxyTargets = apiRoutes.reduce((proxyObj, route) => {
   proxyObj[route] = {
@@ -18,17 +18,15 @@ const proxyTargets = apiRoutes.reduce((proxyObj, route) => {
   };
   return proxyObj;
 }, {});
-export default defineConfig(() => {
+export default defineConfig({
-  return {
+  build: {
-    build: {
+    outDir: "build",
-      outDir: "build",
+  },
+  plugins: [react(), svgr()],
+  server: {
+    port: port,
+    proxy: {
+      ...proxyTargets,
     },
-    plugins: [react(), svgr()],
+  },
-    server: {
-      port: port,
-      proxy: {
-        ...proxyTargets,
-      },
-    },
-  };
 });