refactor: Remove deprecated react api usage

frontend/components/knowledge-dropdown.tsx

@@ -244,13 +244,14 @@ export function KnowledgeDropdown() {
           } = {};
 
           const availableTypes = cloudConnectorTypes.filter(
-            (type) => connectorsResult.connectors[type],
+            (type) => connectorsResult.connectors?.[type],
           );
 
           for (const type of availableTypes) {
             connectorInfo[type] = {
-              name: connectorsResult.connectors[type].name,
-              available: connectorsResult.connectors[type].available,
+              name: connectorsResult.connectors?.[type]?.name ?? type,
+              available:
+                connectorsResult.connectors?.[type]?.available ?? false,
               connected: false,
               hasToken: false,
             };

frontend/components/ui/accordion.tsx

@@ -8,51 +8,58 @@ import { cn } from "@/lib/utils";
 
 const Accordion = AccordionPrimitive.Root;
 
-const AccordionItem = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item
-    ref={ref}
-    className={cn("border rounded-none", className)}
-    {...props}
-  />
-));
-AccordionItem.displayName = "AccordionItem";
-
-const AccordionTrigger = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
-    <AccordionPrimitive.Trigger
+function AccordionItem({
+  className,
+  ref,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
       ref={ref}
-      className={cn(
-        "flex flex-1 items-center p-4 py-2.5 gap-2 font-medium !text-mmd text-muted-foreground transition-all [&[data-state=open]>svg]:rotate-90",
-        className,
-      )}
+      className={cn("border rounded-none", className)}
       {...props}
-    >
-      <ChevronRight className="h-3.5 w-3.5 shrink-0 transition-transform duration-200" />
-      {children}
-    </AccordionPrimitive.Trigger>
-  </AccordionPrimitive.Header>
-));
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+    />
+  );
+}
 
-const AccordionContent = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Content
-    ref={ref}
-    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
-    {...props}
-  >
-    <div className={cn("p-4 pt-2", className)}>{children}</div>
-  </AccordionPrimitive.Content>
-));
+function AccordionTrigger({
+  className,
+  children,
+  ref,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        ref={ref}
+        className={cn(
+          "flex flex-1 items-center p-4 py-2.5 gap-2 font-medium !text-mmd text-muted-foreground transition-all [&[data-state=open]>svg]:rotate-90",
+          className,
+        )}
+        {...props}
+      >
+        <ChevronRight className="h-3.5 w-3.5 shrink-0 transition-transform duration-200" />
+        {children}
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
 
-AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+function AccordionContent({
+  className,
+  children,
+  ref,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      ref={ref}
+      className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+      {...props}
+    >
+      <div className={cn("p-4 pt-2", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  );
+}
 
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

frontend/components/ui/avatar.tsx

@@ -5,46 +5,52 @@ import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
-const Avatar = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
-      className,
-    )}
-    {...props}
-  />
-));
-Avatar.displayName = AvatarPrimitive.Root.displayName;
+function Avatar({
+  className,
+  ref,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      ref={ref}
+      className={cn(
+        "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
 
-const AvatarImage = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Image>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Image
-    ref={ref}
-    className={cn("aspect-square h-full w-full", className)}
-    {...props}
-  />
-));
-AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+function AvatarImage({
+  className,
+  ref,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      ref={ref}
+      className={cn("aspect-square h-full w-full", className)}
+      {...props}
+    />
+  );
+}
 
-const AvatarFallback = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Fallback>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Fallback
-    ref={ref}
-    className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-muted",
-      className,
-    )}
-    {...props}
-  />
-));
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+function AvatarFallback({
+  className,
+  ref,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      ref={ref}
+      className={cn(
+        "flex h-full w-full items-center justify-center rounded-full bg-muted",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
 
 export { Avatar, AvatarFallback, AvatarImage };

frontend/components/ui/banner.tsx

@@ -6,7 +6,7 @@ import {
   createContext,
   type HTMLAttributes,
   type MouseEventHandler,
-  useContext,
+  use,
 } from "react";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
@@ -111,7 +111,7 @@ const _BannerClose = ({
   className,
   ...props
 }: BannerCloseProps) => {
-  const { setShow } = useContext(BannerContext);
+  const { setShow } = use(BannerContext);
 
   const handleClick: MouseEventHandler<HTMLButtonElement> = (e) => {
     setShow(false);

frontend/components/ui/button.tsx

@@ -59,55 +59,49 @@ export interface ButtonProps
   ignoreTitleCase?: boolean;
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
-      className,
-      variant,
-      size,
-      loading,
-      disabled,
-      asChild = false,
-      children,
-      ignoreTitleCase = false,
-      ...props
-    },
-    ref,
-  ) => {
-    const Comp = asChild ? Slot : "button";
-    let newChildren = children;
-    if (typeof children === "string") {
-      newChildren = ignoreTitleCase ? children : toTitleCase(children);
-    }
-    const shouldScale = props["aria-haspopup"] !== "dialog";
+function Button({
+  className,
+  variant,
+  size,
+  loading,
+  disabled,
+  asChild = false,
+  children,
+  ignoreTitleCase = false,
+  ref,
+  ...props
+}: ButtonProps & React.RefAttributes<HTMLButtonElement>) {
+  const Comp = asChild ? Slot : "button";
+  let newChildren = children;
+  if (typeof children === "string") {
+    newChildren = ignoreTitleCase ? children : toTitleCase(children);
+  }
+  const shouldScale = props["aria-haspopup"] !== "dialog";
 
-    return (
-      <Comp
-        className={cn(
-          buttonVariants({ variant, size, className }),
-          shouldScale && "active:scale-[0.97]",
-        )}
-        disabled={loading || disabled}
-        ref={ref}
-        {...props}
-      >
-        {loading ? (
-          <span className="relative flex items-center justify-center">
-            <span className="invisible flex items-center justify-center gap-2">
-              {newChildren}
-            </span>
-            <span className="absolute inset-0 flex items-center justify-center">
-              <div className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
-            </span>
+  return (
+    <Comp
+      className={cn(
+        buttonVariants({ variant, size, className }),
+        shouldScale && "active:scale-[0.97]",
+      )}
+      disabled={loading || disabled}
+      ref={ref}
+      {...props}
+    >
+      {loading ? (
+        <span className="relative flex items-center justify-center">
+          <span className="invisible flex items-center justify-center gap-2">
+            {newChildren}
           </span>
-        ) : (
-          newChildren
-        )}
-      </Comp>
-    );
-  },
-);
-
-Button.displayName = "Button";
+          <span className="absolute inset-0 flex items-center justify-center">
+            <div className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
+          </span>
+        </span>
+      ) : (
+        newChildren
+      )}
+    </Comp>
+  );
+}
 
 export { Button, buttonVariants };