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

build(deps): bump react and @types/react in /frontend

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({

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}
+    </>
+  );
+}

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({

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;

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>>;
 };

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({

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);

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">

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() {

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) => {

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]);

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' },