Merge pull request #1829 from arc53/dependabot/npm_and_yarn/frontend/multi-d4a34be08c

build(deps): bump react and @types/react in /frontend
2025-11-30 00:53:14 +00:00 · 2025-06-22 12:07:44 +01:00
parent b404162364 6834961dd1
commit f0908af3c0
14 changed files with 114 additions and 133 deletions
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -11,16 +11,15 @@
        "@reduxjs/toolkit": "^2.8.2",
        "chart.js": "^4.4.4",
        "clsx": "^2.1.1",
+        "copy-to-clipboard": "^3.3.3",
        "i18next": "^24.2.0",
        "i18next-browser-languagedetector": "^8.0.2",
        "mermaid": "^11.6.0",
        "prop-types": "^15.8.1",
-        "react": "^18.2.0",
+        "react": "^19.1.0",
        "react-chartjs-2": "^5.3.0",
-        "react-copy-to-clipboard": "^5.1.0",
-        "react-dom": "^18.3.1",
+        "react-dom": "^19.0.0",
        "react-dropzone": "^14.3.8",
-        "react-helmet": "^6.1.0",
        "react-i18next": "^15.4.0",
        "react-markdown": "^9.0.1",
        "react-redux": "^9.2.0",
@@ -33,9 +32,8 @@
      },
      "devDependencies": {
        "@types/mermaid": "^9.1.0",
-        "@types/react": "^18.0.27",
-        "@types/react-dom": "^18.3.0",
-        "@types/react-helmet": "^6.1.11",
+        "@types/react": "^19.1.8",
+        "@types/react-dom": "^19.0.0",
        "@types/react-syntax-highlighter": "^15.5.13",
        "@typescript-eslint/eslint-plugin": "^5.51.0",
        "@typescript-eslint/parser": "^5.62.0",
@@ -2138,38 +2136,23 @@
      "resolved": "https://registry.npmjs.org/@types/ms/-/ms-0.7.34.tgz",
      "integrity": "sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g=="
    },
-    "node_modules/@types/prop-types": {
-      "version": "15.7.5",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
-      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
-    },
    "node_modules/@types/react": {
-      "version": "18.3.23",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.23.tgz",
-      "integrity": "sha512-/LDXMQh55EzZQ0uVAZmKKhfENivEvWz6E+EYzh+/MCjMhNsotd+ZHhBGIjFDTi6+fz0OhQQQLbTgdQIxxCsC0w==",
+      "version": "19.1.8",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.8.tgz",
+      "integrity": "sha512-AwAfQ2Wa5bCx9WP8nZL2uMZWod7J7/JSplxbTmBQ5ms6QpqNYm672H0Vu9ZVKVngQ+ii4R/byguVEUZQyeg44g==",
      "license": "MIT",
      "dependencies": {
-        "@types/prop-types": "*",
        "csstype": "^3.0.2"
      }
    },
    "node_modules/@types/react-dom": {
-      "version": "18.3.0",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
-      "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
-      "dev": true,
-      "dependencies": {
-        "@types/react": "*"
-      }
-    },
-    "node_modules/@types/react-helmet": {
-      "version": "6.1.11",
-      "resolved": "https://registry.npmjs.org/@types/react-helmet/-/react-helmet-6.1.11.tgz",
-      "integrity": "sha512-0QcdGLddTERotCXo3VFlUSWO3ztraw8nZ6e3zJSgG7apwV5xt+pJUS8ewPBqT4NYB1optGLprNQzFleIY84u/g==",
+      "version": "19.1.6",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.6.tgz",
+      "integrity": "sha512-4hOiT/dwO8Ko0gV1m/TJZYk3y0KBnY9vzDh7W+DH17b2HFSOGgdj33dhihPeuy3l0q23+4e+hoXHV6hCC4dCXw==",
      "dev": true,
      "license": "MIT",
-      "dependencies": {
-        "@types/react": "*"
+      "peerDependencies": {
+        "@types/react": "^19.0.0"
      }
    },
    "node_modules/@types/react-syntax-highlighter": {
@@ -9157,12 +9140,10 @@
      ]
    },
    "node_modules/react": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
-      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
-      "dependencies": {
-        "loose-envify": "^1.1.0"
-      },
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
+      "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
+      "license": "MIT",
      "engines": {
        "node": ">=0.10.0"
      }
@@ -9176,28 +9157,16 @@
        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
      }
    },
-    "node_modules/react-copy-to-clipboard": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.1.0.tgz",
-      "integrity": "sha512-k61RsNgAayIJNoy9yDsYzDe/yAZAzEbEgcz3DZMhF686LEyukcE1hzurxe85JandPUG+yTfGVFzuEw3xt8WP/A==",
-      "dependencies": {
-        "copy-to-clipboard": "^3.3.1",
-        "prop-types": "^15.8.1"
-      },
-      "peerDependencies": {
-        "react": "^15.3.0 || 16 || 17 || 18"
-      }
-    },
    "node_modules/react-dom": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
-      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
+      "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
+      "license": "MIT",
      "dependencies": {
-        "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.2"
+        "scheduler": "^0.26.0"
      },
      "peerDependencies": {
-        "react": "^18.3.1"
+        "react": "^19.1.0"
      }
    },
    "node_modules/react-dropzone": {
@@ -9217,27 +9186,6 @@
        "react": ">= 16.8 || 18.0.0"
      }
    },
-    "node_modules/react-fast-compare": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
-      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==",
-      "license": "MIT"
-    },
-    "node_modules/react-helmet": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
-      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
-      "license": "MIT",
-      "dependencies": {
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.7.2",
-        "react-fast-compare": "^3.1.1",
-        "react-side-effect": "^2.1.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.3.0"
-      }
-    },
    "node_modules/react-i18next": {
      "version": "15.4.0",
      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-15.4.0.tgz",
@@ -9367,15 +9315,6 @@
        "react-dom": ">=18"
      }
    },
-    "node_modules/react-side-effect": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
-      "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": "^16.3.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
    "node_modules/react-syntax-highlighter": {
      "version": "15.6.1",
      "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.6.1.tgz",
@@ -9854,12 +9793,10 @@
      "license": "MIT"
    },
    "node_modules/scheduler": {
-      "version": "0.23.2",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
-      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
-      "dependencies": {
-        "loose-envify": "^1.1.0"
-      }
+      "version": "0.26.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
+      "integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==",
+      "license": "MIT"
    },
    "node_modules/semver": {
      "version": "6.3.1",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -22,16 +22,15 @@
    "@reduxjs/toolkit": "^2.8.2",
    "chart.js": "^4.4.4",
    "clsx": "^2.1.1",
+    "copy-to-clipboard": "^3.3.3",
    "i18next": "^24.2.0",
    "i18next-browser-languagedetector": "^8.0.2",
    "mermaid": "^11.6.0",
    "prop-types": "^15.8.1",
-    "react": "^18.2.0",
+    "react": "^19.1.0",
    "react-chartjs-2": "^5.3.0",
-    "react-copy-to-clipboard": "^5.1.0",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.0.0",
    "react-dropzone": "^14.3.8",
-    "react-helmet": "^6.1.0",
    "react-i18next": "^15.4.0",
    "react-markdown": "^9.0.1",
    "react-redux": "^9.2.0",
@@ -44,9 +43,8 @@
  },
  "devDependencies": {
    "@types/mermaid": "^9.1.0",
-    "@types/react": "^18.0.27",
-    "@types/react-dom": "^18.3.0",
-    "@types/react-helmet": "^6.1.11",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.0.0",
    "@types/react-syntax-highlighter": "^15.5.13",
    "@typescript-eslint/eslint-plugin": "^5.51.0",
    "@typescript-eslint/parser": "^5.62.0",
--- a/frontend/src/components/ContextMenu.tsx
+++ b/frontend/src/components/ContextMenu.tsx
@@ -14,10 +14,10 @@ interface ContextMenuProps {
  isOpen: boolean;
  setIsOpen: (isOpen: boolean) => void;
  options: MenuOption[];
-  anchorRef: React.RefObject<HTMLElement>;
-  className?: string;
-  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+  anchorRef: React.RefObject<HTMLDivElement | null>;
+  position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
  offset?: { x: number; y: number };
+  className?: string;
 }

 export default function ContextMenu({
--- a/frontend/src/components/DocumentHead.tsx
+++ b/frontend/src/components/DocumentHead.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+
+interface DocumentHeadProps {
+  title?: string;
+  description?: string;
+  keywords?: string;
+  ogTitle?: string;
+  ogDescription?: string;
+  ogImage?: string;
+  twitterCard?: string;
+  twitterTitle?: string;
+  twitterDescription?: string;
+  children?: React.ReactNode;
+}
+
+export function DocumentHead({
+  title,
+  description,
+  keywords,
+  ogTitle,
+  ogDescription,
+  ogImage,
+  twitterCard,
+  twitterTitle,
+  twitterDescription,
+  children,
+}: DocumentHeadProps) {
+  return (
+    <>
+      {title && <title>{title}</title>}
+      {description && <meta name="description" content={description} />}
+      {keywords && <meta name="keywords" content={keywords} />}
+
+      {/* Open Graph */}
+      {ogTitle && <meta property="og:title" content={ogTitle} />}
+      {ogDescription && (
+        <meta property="og:description" content={ogDescription} />
+      )}
+      {ogImage && <meta property="og:image" content={ogImage} />}
+
+      {/* Twitter */}
+      {twitterCard && <meta name="twitter:card" content={twitterCard} />}
+      {twitterTitle && <meta name="twitter:title" content={twitterTitle} />}
+      {twitterDescription && (
+        <meta name="twitter:description" content={twitterDescription} />
+      )}
+
+      {/* Additional elements */}
+      {children}
+    </>
+  );
+}
--- a/frontend/src/components/DropdownMenu.tsx
+++ b/frontend/src/components/DropdownMenu.tsx
@@ -7,12 +7,12 @@ type DropdownMenuProps = {
  onSelect: (value: string) => void;
  defaultValue?: string;
  icon?: string;
-  isOpen?: boolean;
-  onOpenChange?: (isOpen: boolean) => void;
-  anchorRef?: React.RefObject<HTMLElement>;
-  className?: string;
-  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  anchorRef: React.RefObject<HTMLElement | null>;
+  position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
  offset?: { x: number; y: number };
+  className?: string;
 };

 export default function DropdownMenu({
--- a/frontend/src/components/MultiSelectPopup.tsx
+++ b/frontend/src/components/MultiSelectPopup.tsx
@@ -17,7 +17,7 @@ export type OptionType = {
 type MultiSelectPopupProps = {
  isOpen: boolean;
  onClose: () => void;
-  anchorRef: React.RefObject<HTMLElement>;
+  anchorRef: React.RefObject<HTMLElement | null>;
  options: OptionType[];
  selectedIds: Set<string | number>;
  onSelectionChange: (newSelectedIds: Set<string | number>) => void;
--- a/frontend/src/components/SourcesPopup.tsx
+++ b/frontend/src/components/SourcesPopup.tsx
@@ -16,7 +16,7 @@ import { ActiveState } from '../models/misc';
 type SourcesPopupProps = {
  isOpen: boolean;
  onClose: () => void;
-  anchorRef: React.RefObject<HTMLButtonElement>;
+  anchorRef: React.RefObject<HTMLButtonElement | null>;
  handlePostDocumentSelect: (doc: Doc | null) => void;
  setUploadModalState: React.Dispatch<React.SetStateAction<ActiveState>>;
 };
--- a/frontend/src/components/ToolsPopup.tsx
+++ b/frontend/src/components/ToolsPopup.tsx
@@ -14,7 +14,7 @@ import { useDarkTheme } from '../hooks';
 interface ToolsPopupProps {
  isOpen: boolean;
  onClose: () => void;
-  anchorRef: React.RefObject<HTMLButtonElement>;
+  anchorRef: React.RefObject<HTMLButtonElement | null>;
 }

 export default function ToolsPopup({
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -96,7 +96,7 @@ const ConversationBubble = forwardRef<
  const [isDislikeClicked, setIsDislikeClicked] = useState(false);
  const [activeTooltip, setActiveTooltip] = useState<number | null>(null);
  const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(false);
-  const editableQueryRef = useRef<HTMLDivElement | null>(null);
+  const editableQueryRef = useRef<HTMLDivElement>(null);
  const [isQuestionCollapsed, setIsQuestionCollapsed] = useState(true);

  useOutsideAlerter(editableQueryRef, () => setIsEditClicked(false), [], true);
--- a/frontend/src/conversation/SharedConversation.tsx
+++ b/frontend/src/conversation/SharedConversation.tsx
@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react';
-import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate, useParams } from 'react-router-dom';
@@ -24,6 +23,7 @@ import {
  updateQuery,
 } from './sharedConversationSlice';
 import { selectCompletedAttachments } from '../upload/uploadSlice';
+import { DocumentHead } from '../components/DocumentHead';

 export const SharedConversation = () => {
  const navigate = useNavigate();
@@ -129,21 +129,15 @@ export const SharedConversation = () => {

  return (
    <>
-      <Helmet>
-        <title>{`DocsGPT | ${title}`}</title>
-        <meta name="description" content="Shared conversations with DocsGPT" />
-        <meta property="og:title" content={title} />
-        <meta
-          property="og:description"
-          content="Shared conversations with DocsGPT"
-        />
-        <meta name="twitter:card" content="summary_large_image" />
-        <meta name="twitter:title" content={title} />
-        <meta
-          name="twitter:description"
-          content="Shared conversations with DocsGPT"
-        />
-      </Helmet>
+      <DocumentHead
+        title={`DocsGPT | ${title}`}
+        description="Shared conversations with DocsGPT"
+        ogTitle={title}
+        ogDescription="Shared conversations with DocsGPT"
+        twitterCard="summary_large_image"
+        twitterTitle={title}
+        twitterDescription="Shared conversations with DocsGPT"
+      />
      <div className="flex h-full flex-col items-center justify-between gap-2 overflow-y-hidden dark:bg-raisin-black">
        <div className="w-full max-w-[1200px] border-b p-2 dark:border-b-silver md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12">
          <h1 className="font-semi-bold text-4xl text-chinese-black dark:text-chinese-silver">
--- a/frontend/src/hooks/index.ts
+++ b/frontend/src/hooks/index.ts
@@ -1,7 +1,7 @@
 import { useEffect, RefObject, useState } from 'react';

 export function useOutsideAlerter<T extends HTMLElement>(
-  ref: RefObject<T>,
+  ref: RefObject<T | null>,
  handler: () => void,
  additionalDeps: unknown[],
  handleEscapeKey?: boolean,
@@ -30,7 +30,7 @@ export function useOutsideAlerter<T extends HTMLElement>(
        document.removeEventListener('keydown', handleEscape);
      }
    };
-  }, [ref, ...additionalDeps]);
+  }, [ref, handler, handleEscapeKey, ...additionalDeps]);
 }

 export function useMediaQuery() {
--- a/frontend/src/settings/Documents.tsx
+++ b/frontend/src/settings/Documents.tsx
@@ -68,9 +68,9 @@ export default function Documents({
  const [totalPages, setTotalPages] = useState<number>(1);

  const [activeMenuId, setActiveMenuId] = useState<string | null>(null);
-  const menuRefs = useRef<{ [key: string]: React.RefObject<HTMLDivElement> }>(
-    {},
-  );
+  const menuRefs = useRef<{
+    [key: string]: React.RefObject<HTMLDivElement | null>;
+  }>({});

  // Create or get a ref for each document wrapper div (not the td)
  const getMenuRef = (docId: string) => {
--- a/frontend/src/settings/Tools.tsx
+++ b/frontend/src/settings/Tools.tsx
@@ -35,7 +35,7 @@ export default function Tools() {
  const [loading, setLoading] = React.useState(false);
  const [activeMenuId, setActiveMenuId] = React.useState<string | null>(null);
  const menuRefs = React.useRef<{
-    [key: string]: React.RefObject<HTMLDivElement>;
+    [key: string]: React.RefObject<HTMLDivElement | null>;
  }>({});
  const [deleteModalState, setDeleteModalState] =
    React.useState<ActiveState>('INACTIVE');
@@ -46,7 +46,7 @@ export default function Tools() {
  React.useEffect(() => {
    userTools.forEach((tool) => {
      if (!menuRefs.current[tool.id]) {
-        menuRefs.current[tool.id] = React.createRef();
+        menuRefs.current[tool.id] = React.createRef<HTMLDivElement>();
      }
    });
  }, [userTools]);
--- a/frontend/src/upload/Upload.tsx
+++ b/frontend/src/upload/Upload.tsx
@@ -194,7 +194,7 @@ function Upload({
  }>();

  const { t } = useTranslation();
-  const setTimeoutRef = useRef<number | null>();
+  const setTimeoutRef = useRef<number | null>(null);

  const urlOptions: { label: string; value: IngestorType }[] = [
    { label: 'Crawler', value: 'crawler' },