security: Update nanoid to 3.3.8 (#896)

* Update nanoid to 3.3.8

* Update nanoid to 3.3.8

* Fix assistants_web build

* Resolve frontend build errors

src/interfaces/assistants_web/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

src/interfaces/assistants_web/package.json

@@ -52,6 +52,7 @@
     "lodash": "^4.17.21",
     "match-sorter": "^6.3.1",
     "mdast-util-to-string": "^4.0.0",
+    "nanoid": "^3.3.8",
     "next": "^14.2.12",
     "next-client-cookies": "^1.1.1",
     "next-runtime-env": "^3.2.2",

src/interfaces/assistants_web/src/components/Conversation/ConversationPanel.tsx

@@ -141,7 +141,7 @@ export const ConversationPanel: React.FC<Props> = () => {
               /> */}
             </div>
             <Transition
-              show={!disabledAssistantKnowledge.includes(agentId) ?? false}
+              show={!disabledAssistantKnowledge.includes(agentId)}
               enter="duration-300 ease-in-out transition-all"
               enterFrom="opacity-0 scale-90"
               enterTo="opacity-100 scale-100"

src/interfaces/assistants_web/src/components/Markdown/tags/Anchor.tsx

@@ -1,15 +1,12 @@
 'use client';
 
-import type { Component, ExtraProps } from 'hast-util-to-jsx-runtime/lib/components';
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef, FC } from 'react';
+import { ExtraProps } from 'react-markdown';
 
 import { Icon } from '@/components/UI';
 import { useOutputFiles } from '@/stores';
 
-export const Anchor: Component<ComponentPropsWithoutRef<'a'> & ExtraProps> = ({
-  children,
-  node,
-}) => {
+export const Anchor: FC<ComponentPropsWithoutRef<'a'> & ExtraProps> = ({ children, node }) => {
   const { outputFiles } = useOutputFiles();
   const nodeHref = node?.properties.href;
 

src/interfaces/assistants_web/src/components/Markdown/tags/Iframe.tsx

@@ -1,11 +1,7 @@
 'use client';
 
 import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react';
-import type { Component } from 'hast-util-to-jsx-runtime/lib/components';
-import { Fragment, useEffect } from 'react';
-import { useRef } from 'react';
-import { useState } from 'react';
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef, FC, Fragment, useEffect, useRef, useState } from 'react';
 
 import { CodeSnippet, Text } from '@/components/UI';
 import { cleanupCodeBlock, cn } from '@/utils';
@@ -19,9 +15,7 @@ const MIN_HEIGHT = 600;
  * When the iframe is loaded, the `data-src` attribute is replaced with the actual source URL.
  * The height of the iframe is adjusted to fit the content.
  */
-export const Iframe: Component<ComponentPropsWithoutRef<'iframe'> & { 'data-src': string }> = (
-  props
-) => {
+export const Iframe: FC<ComponentPropsWithoutRef<'iframe'> & { 'data-src': string }> = (props) => {
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const [code, setCode] = useState('');
   const [codePreview, setCodePreview] = useState('');

src/interfaces/assistants_web/src/components/Markdown/tags/P.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import type { Component, ExtraProps } from 'hast-util-to-jsx-runtime/lib/components';
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef, FC } from 'react';
+import { ExtraProps } from 'react-markdown';
 
-export const P: Component<ComponentPropsWithoutRef<'p'> & ExtraProps> = ({ children }) => {
+export const P: FC<ComponentPropsWithoutRef<'p'> & ExtraProps> = ({ children }) => {
   return <p dir="auto">{children}</p>;
 };

src/interfaces/assistants_web/src/components/Markdown/tags/Pre.tsx

@@ -1,11 +1,11 @@
 'use client';
 
-import type { Component, ExtraProps } from 'hast-util-to-jsx-runtime/lib/components';
-import { ComponentPropsWithoutRef, useRef, useState } from 'react';
+import { ComponentPropsWithoutRef, FC, useRef, useState } from 'react';
+import { ExtraProps } from 'react-markdown';
 
 import { Button, Icon, Text } from '@/components/UI';
 
-export const Pre: Component<ComponentPropsWithoutRef<'pre'> & ExtraProps> = ({ children }) => {
+export const Pre: FC<ComponentPropsWithoutRef<'pre'> & ExtraProps> = ({ children }) => {
   const [copied, setCopied] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
 

src/interfaces/assistants_web/src/components/Markdown/tags/References.tsx

@@ -1,14 +1,14 @@
 'use client';
 
-import type { Component, ExtraProps } from 'hast-util-to-jsx-runtime/lib/components';
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef, FC } from 'react';
+import { ExtraProps } from 'react-markdown';
 
 import { Text } from '@/components/UI';
 
 // Since we're inserting a Text component
 // And that we're not specifyng the "as" prop
 // And that the default of Text is "p" styling
 // We get the props of p
-export const References: Component<ComponentPropsWithoutRef<'p'> & ExtraProps> = ({ children }) => {
+export const References: FC<ComponentPropsWithoutRef<'p'> & ExtraProps> = ({ children }) => {
   return <Text>From {children}</Text>;
 };

src/interfaces/assistants_web/src/components/MessageRow/DataTable.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import type { Component, ExtraProps } from 'hast-util-to-jsx-runtime/lib/components';
-import { ComponentPropsWithoutRef, useCallback } from 'react';
+import { ComponentPropsWithoutRef, FC, useCallback } from 'react';
+import { ExtraProps } from 'react-markdown';
 
 import { StructuredTable } from '@/components/Markdown/directives/table-tools';
 import { Icon, Text } from '@/components/UI';
@@ -26,7 +26,7 @@ type ElementProps = {
  * How to test: Every Markdown table gets converted to a DataTable. In the chat app, try the following query:
  * "Create a table with 2 columns: (1) Cuisine; (2) One popular dish from that cuisine"
  */
-export const DataTable: Component<ComponentPropsWithoutRef<'table'> & ExtraProps> = ({
+export const DataTable: FC<ComponentPropsWithoutRef<'table'> & ExtraProps> = ({
   children,
   node,
 }) => {

src/interfaces/assistants_web/src/context/ModalContext.tsx

@@ -6,7 +6,7 @@ import { Modal } from '@/components/UI';
 
 interface OpenParams {
   title?: string;
-  content?: React.ReactNode | React.FC;
+  content?: React.ReactNode;
   dialogPaddingClassName?: string;
 }
 
@@ -18,7 +18,7 @@ interface Context {
   title?: string;
   open: OpenFunction;
   close: CloseFunction;
-  content: React.ReactNode | React.FC;
+  content: React.ReactNode;
   dialogPaddingClassName?: string;
 }
 
@@ -28,7 +28,7 @@ interface Context {
 const useModal = (): Context => {
   const [isOpen, setIsOpen] = useState(false);
   const [title, setTitle] = useState<string | undefined>(undefined);
-  const [content, setContent] = useState<React.ReactNode | React.FC>(undefined);
+  const [content, setContent] = useState<React.ReactNode>(undefined);
   const [dialogPaddingClassName, setDialogPaddingClassName] = useState<string | undefined>(
     undefined
   );

src/interfaces/coral_web/package.json

@@ -47,6 +47,7 @@
     "lodash": "^4.17.21",
     "match-sorter": "^6.3.1",
     "mdast-util-to-string": "^4.0.0",
+    "nanoid": "^3.3.8",
     "next": "^14.2.12",
     "next-client-cookies": "^1.1.1",
     "next-runtime-env": "^3.2.2",