ai: Refac B/F. #3

components/assistant-ui/markdown-text.tsx

@@ -15,7 +15,7 @@ import {
 } from "@assistant-ui/react-markdown";
 import remarkGfm from "remark-gfm";
 import rehypeRaw from "rehype-raw";
-import { type FC, memo, useState } from "react";
+import { type FC, memo, useState, useCallback } from "react";
 import { CheckIcon, CopyIcon } from "lucide-react";
 
 import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
@@ -23,11 +23,14 @@ import { cn } from "@/lib/utils";
 
 import { SyntaxHighlighter } from "./syntax-highlighter";
 
+const REMARK_PLUGINS = [remarkGfm];
+const REHYPE_PLUGINS = [rehypeRaw];
+
 const MarkdownTextImpl = () => {
   return (
     <MarkdownTextPrimitive
-      remarkPlugins={[remarkGfm]}
-      rehypePlugins={[rehypeRaw]}
+      remarkPlugins={REMARK_PLUGINS}
+      rehypePlugins={REHYPE_PLUGINS}
       className="aui-md"
       components={defaultComponents}
     />
@@ -36,12 +39,13 @@ const MarkdownTextImpl = () => {
 
 export const MarkdownText = memo(MarkdownTextImpl);
 
-const CodeHeader: FC<CodeHeaderProps> = memo(({ language, code }) => {
+const CodeHeaderImpl: FC<CodeHeaderProps> = ({ language, code }) => {
   const { isCopied, copyToClipboard } = useCopyToClipboard();
-  const onCopy = () => {
+  
+  const onCopy = useCallback(() => {
     if (!code || isCopied) return;
     copyToClipboard(code);
-  };
+  }, [code, isCopied, copyToClipboard]);
 
   return (
     <div className="aui-code-header-root mt-4 flex items-center justify-between gap-4 rounded-t-lg bg-muted-foreground/15 px-4 py-2 text-sm font-semibold text-foreground dark:bg-muted-foreground/20">
@@ -54,8 +58,9 @@ const CodeHeader: FC<CodeHeaderProps> = memo(({ language, code }) => {
       </TooltipIconButton>
     </div>
   );
-});
+};
 
+const CodeHeader = memo(CodeHeaderImpl);
 CodeHeader.displayName = "CodeHeader";
 
 const useCopyToClipboard = ({
@@ -65,14 +70,14 @@ const useCopyToClipboard = ({
 } = {}) => {
   const [isCopied, setIsCopied] = useState<boolean>(false);
 
-  const copyToClipboard = (value: string) => {
+  const copyToClipboard = useCallback((value: string) => {
     if (!value) return;
 
     navigator.clipboard.writeText(value).then(() => {
       setIsCopied(true);
       setTimeout(() => setIsCopied(false), copiedDuration);
     });
-  };
+  }, [copiedDuration]);
 
   return { isCopied, copyToClipboard };
 };
@@ -94,171 +99,227 @@ const filterTableContent = (children: React.ReactNode): React.ReactNode => {
   return children;
 };
 
-const defaultComponents = memoizeMarkdownComponents({
-  SyntaxHighlighter: MemoizedSyntaxHighlighter,
-  
-  h1: ({ className, ...props }) => (
-    <h1
-      className={cn(
-        "aui-md-h1 mb-8 scroll-m-20 text-4xl font-extrabold tracking-tight last:mb-0",
-        className,
-      )}
-      {...props}
-    />
-  ),
-  h2: ({ className, ...props }) => (
-    <h2
-      className={cn(
-        "aui-md-h2 mt-8 mb-4 scroll-m-20 text-3xl font-semibold tracking-tight first:mt-0 last:mb-0",
-        className,
-      )}
-      {...props}
-    />
-  ),
-  h3: ({ className, ...props }) => (
-    <h3
-      className={cn(
-        "aui-md-h3 mt-6 mb-4 scroll-m-20 text-2xl font-semibold tracking-tight first:mt-0 last:mb-0",
-        className,
-      )}
-      {...props}
-    />
-  ),
-  h4: ({ className, ...props }) => (
-    <h4
-      className={cn(
-        "aui-md-h4 mt-6 mb-4 scroll-m-20 text-xl font-semibold tracking-tight first:mt-0 last:mb-0",
-        className,
-      )}
-      {...props}
-    />
-  ),
-  h5: ({ className, ...props }) => (
-    <h5
-      className={cn(
-        "aui-md-h5 my-4 text-lg font-semibold first:mt-0 last:mb-0",
-        className,
-      )}
-      {...props}
-    />
-  ),
-  h6: ({ className, ...props }) => (
-    <h6
-      className={cn(
-        "aui-md-h6 my-4 font-semibold first:mt-0 last:mb-0",
-        className,
-      )}
-      {...props}
-    />
-  ),
-  p: ({ className, ...props }) => (
-    <p
-      className={cn(
-        "aui-md-p mt-5 mb-5 leading-7 first:mt-0 last:mb-0",
-        className,
-      )}
-      {...props}
-    />
-  ),
-  a: ({ className, ...props }) => (
-    <a
-      className={cn(
-        "aui-md-a font-medium text-primary underline underline-offset-4",
-        className,
-      )}
-      {...props}
-    />
-  ),
-  blockquote: ({ className, ...props }) => (
-    <blockquote
-      className={cn("aui-md-blockquote border-l-2 pl-6 italic", className)}
-      {...props}
-    />
-  ),
-  ul: ({ className, ...props }) => (
-    <ul
-      className={cn("aui-md-ul my-5 ml-6 list-disc [&>li]:mt-2", className)}
-      {...props}
-    />
-  ),
-  ol: ({ className, ...props }) => (
-    <ol
-      className={cn("aui-md-ol my-5 ml-6 list-decimal [&>li]:mt-2", className)}
-      {...props}
-    />
-  ),
-  hr: ({ className, ...props }) => (
-    <hr className={cn("aui-md-hr my-5 border-b", className)} {...props} />
-  ),
-  table: ({ className, ...props }) => (
-    <TableWrapper>
-      <table
-        className={cn(
-          "aui-md-table w-full min-w-full border-separate border-spacing-0",
-          className,
-        )}
-        {...props}
-      />
-    </TableWrapper>
-  ),
-  th: ({ className, children, ...props }) => (
-    <th
-      className={cn(
-        "aui-md-th bg-muted px-4 py-2 text-left font-bold whitespace-nowrap first:rounded-tl-lg last:rounded-tr-lg [&[align=center]]:text-center [&[align=right]]:text-right",
-        className,
-      )}
-      {...props}
-    >
-      {filterTableContent(children)}
-    </th>
-  ),
-  td: ({ className, children, ...props }) => (
-    <td
-      className={cn(
-        "aui-md-td border-b border-l px-4 py-2 text-left last:border-r [&[align=center]]:text-center [&[align=right]]:text-right",
-        className,
-      )}
-      {...props}
-    >
-      {filterTableContent(children)}
-    </td>
-  ),
-  tr: ({ className, ...props }) => (
-    <tr
+const H1 = memo(({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
+  <h1
+    className={cn(
+      "aui-md-h1 mb-8 scroll-m-20 text-4xl font-extrabold tracking-tight last:mb-0",
+      className,
+    )}
+    {...props}
+  />
+));
+H1.displayName = "H1";
+
+const H2 = memo(({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
+  <h2
+    className={cn(
+      "aui-md-h2 mt-8 mb-4 scroll-m-20 text-3xl font-semibold tracking-tight first:mt-0 last:mb-0",
+      className,
+    )}
+    {...props}
+  />
+));
+H2.displayName = "H2";
+
+const H3 = memo(({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
+  <h3
+    className={cn(
+      "aui-md-h3 mt-6 mb-4 scroll-m-20 text-2xl font-semibold tracking-tight first:mt-0 last:mb-0",
+      className,
+    )}
+    {...props}
+  />
+));
+H3.displayName = "H3";
+
+const H4 = memo(({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
+  <h4
+    className={cn(
+      "aui-md-h4 mt-6 mb-4 scroll-m-20 text-xl font-semibold tracking-tight first:mt-0 last:mb-0",
+      className,
+    )}
+    {...props}
+  />
+));
+H4.displayName = "H4";
+
+const H5 = memo(({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
+  <h5
+    className={cn(
+      "aui-md-h5 my-4 text-lg font-semibold first:mt-0 last:mb-0",
+      className,
+    )}
+    {...props}
+  />
+));
+H5.displayName = "H5";
+
+const H6 = memo(({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
+  <h6
+    className={cn(
+      "aui-md-h6 my-4 font-semibold first:mt-0 last:mb-0",
+      className,
+    )}
+    {...props}
+  />
+));
+H6.displayName = "H6";
+
+const P = memo(({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => (
+  <p
+    className={cn(
+      "aui-md-p mt-5 mb-5 leading-7 first:mt-0 last:mb-0",
+      className,
+    )}
+    {...props}
+  />
+));
+P.displayName = "P";
+
+const A = memo(({ className, ...props }: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
+  <a
+    className={cn(
+      "aui-md-a font-medium text-primary underline underline-offset-4",
+      className,
+    )}
+    {...props}
+  />
+));
+A.displayName = "A";
+
+const Blockquote = memo(({ className, ...props }: React.BlockquoteHTMLAttributes<HTMLQuoteElement>) => (
+  <blockquote
+    className={cn("aui-md-blockquote border-l-2 pl-6 italic", className)}
+    {...props}
+  />
+));
+Blockquote.displayName = "Blockquote";
+
+const Ul = memo(({ className, ...props }: React.HTMLAttributes<HTMLUListElement>) => (
+  <ul
+    className={cn("aui-md-ul my-5 ml-6 list-disc [&>li]:mt-2", className)}
+    {...props}
+  />
+));
+Ul.displayName = "Ul";
+
+const Ol = memo(({ className, ...props }: React.OlHTMLAttributes<HTMLOListElement>) => (
+  <ol
+    className={cn("aui-md-ol my-5 ml-6 list-decimal [&>li]:mt-2", className)}
+    {...props}
+  />
+));
+Ol.displayName = "Ol";
+
+const Hr = memo(({ className, ...props }: React.HTMLAttributes<HTMLHRElement>) => (
+  <hr className={cn("aui-md-hr my-5 border-b", className)} {...props} />
+));
+Hr.displayName = "Hr";
+
+const Table = memo(({ className, ...props }: React.TableHTMLAttributes<HTMLTableElement>) => (
+  <TableWrapper>
+    <table
       className={cn(
-        "aui-md-tr m-0 border-b p-0 first:border-t [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg",
+        "aui-md-table w-full min-w-full border-separate border-spacing-0",
         className,
       )}
       {...props}
     />
-  ),
-  sup: ({ className, ...props }) => (
-    <sup
-      className={cn("aui-md-sup [&>a]:text-xs [&>a]:no-underline", className)}
-      {...props}
-    />
-  ),
-  pre: ({ className, ...props }) => (
-    <pre
+  </TableWrapper>
+));
+Table.displayName = "Table";
+
+const Th = memo(({ className, children, ...props }: React.ThHTMLAttributes<HTMLTableCellElement>) => (
+  <th
+    className={cn(
+      "aui-md-th bg-muted px-4 py-2 text-left font-bold whitespace-nowrap first:rounded-tl-lg last:rounded-tr-lg [&[align=center]]:text-center [&[align=right]]:text-right",
+      className,
+    )}
+    {...props}
+  >
+    {filterTableContent(children)}
+  </th>
+));
+Th.displayName = "Th";
+
+const Td = memo(({ className, children, ...props }: React.TdHTMLAttributes<HTMLTableCellElement>) => (
+  <td
+    className={cn(
+      "aui-md-td border-b border-l px-4 py-2 text-left last:border-r [&[align=center]]:text-center [&[align=right]]:text-right",
+      className,
+    )}
+    {...props}
+  >
+    {filterTableContent(children)}
+  </td>
+));
+Td.displayName = "Td";
+
+const Tr = memo(({ className, ...props }: React.HTMLAttributes<HTMLTableRowElement>) => (
+  <tr
+    className={cn(
+      "aui-md-tr m-0 border-b p-0 first:border-t [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg",
+      className,
+    )}
+    {...props}
+  />
+));
+Tr.displayName = "Tr";
+
+const Sup = memo(({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
+  <sup
+    className={cn("aui-md-sup [&>a]:text-xs [&>a]:no-underline", className)}
+    {...props}
+  />
+));
+Sup.displayName = "Sup";
+
+const Pre = memo(({ className, ...props }: React.HTMLAttributes<HTMLPreElement>) => (
+  <pre
+    className={cn(
+      "aui-md-pre overflow-x-auto !rounded-t-none rounded-b-lg bg-black p-4 text-white",
+      className,
+    )}
+    {...props}
+  />
+));
+Pre.displayName = "Pre";
+
+const Code = memo(function Code({ className, ...props }: React.HTMLAttributes<HTMLElement>) {
+  const isCodeBlock = useIsMarkdownCodeBlock();
+  return (
+    <code
       className={cn(
-        "aui-md-pre overflow-x-auto !rounded-t-none rounded-b-lg bg-black p-4 text-white",
+        !isCodeBlock &&
+          "aui-md-inline-code rounded border bg-muted font-semibold px-1.5 py-0.5",
         className,
       )}
       {...props}
     />
-  ),
-  code: memo(function Code({ className, ...props }) {
-    const isCodeBlock = useIsMarkdownCodeBlock();
-    return (
-      <code
-        className={cn(
-          !isCodeBlock &&
-            "aui-md-inline-code rounded border bg-muted font-semibold px-1.5 py-0.5",
-          className,
-        )}
-        {...props}
-      />
-    );
-  }),
+  );
+});
+Code.displayName = "Code";
+
+const defaultComponents = memoizeMarkdownComponents({
+  SyntaxHighlighter: MemoizedSyntaxHighlighter,
+  h1: H1,
+  h2: H2,
+  h3: H3,
+  h4: H4,
+  h5: H5,
+  h6: H6,
+  p: P,
+  a: A,
+  blockquote: Blockquote,
+  ul: Ul,
+  ol: Ol,
+  hr: Hr,
+  table: Table,
+  th: Th,
+  td: Td,
+  tr: Tr,
+  sup: Sup,
+  pre: Pre,
+  code: Code,
   CodeHeader,
 });

components/ui/sidebar.tsx

@@ -1,3 +1,8 @@
+//
+// SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
+// SPDX-License-Identifier: MIT
+//
+
 "use client";
 
 import * as React from "react";
@@ -53,7 +58,7 @@ function useSidebar() {
   return context;
 }
 
-function SidebarProvider({
+const SidebarProvider = React.memo(function SidebarProvider({
   defaultOpen = true,
   open: openProp,
   onOpenChange: setOpenProp,
@@ -68,11 +73,10 @@ function SidebarProvider({
 }) {
   const isMobile = useIsMobile();
   const [openMobile, setOpenMobile] = React.useState(false);
-
-  // This is the internal state of the sidebar.
-  // We use openProp and setOpenProp for control from outside the component.
   const [_open, _setOpen] = React.useState(defaultOpen);
+  
   const open = openProp ?? _open;
+  
   const setOpen = React.useCallback(
     (value: boolean | ((value: boolean) => boolean)) => {
       const openState = typeof value === "function" ? value(open) : value;
@@ -82,18 +86,15 @@ function SidebarProvider({
         _setOpen(openState);
       }
 
-      // This sets the cookie to keep the sidebar state.
       document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
     },
     [setOpenProp, open],
   );
 
-  // Helper to toggle the sidebar.
   const toggleSidebar = React.useCallback(() => {
     return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
-  }, [isMobile, setOpen, setOpenMobile]);
+  }, [isMobile, setOpen]);
 
-  // Adds a keyboard shortcut to toggle the sidebar.
   React.useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if (
@@ -109,8 +110,6 @@ function SidebarProvider({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [toggleSidebar]);
 
-  // We add a state so that we can do data-state="expanded" or "collapsed".
-  // This makes it easier to style the sidebar with Tailwind classes.
   const state = open ? "expanded" : "collapsed";
 
   const contextValue = React.useMemo<SidebarContextProps>(
@@ -123,7 +122,17 @@ function SidebarProvider({
       setOpenMobile,
       toggleSidebar,
     }),
-    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
+    [state, open, setOpen, isMobile, openMobile, toggleSidebar],
+  );
+
+  const inlineStyle = React.useMemo(
+    () =>
+      ({
+        "--sidebar-width": SIDEBAR_WIDTH,
+        "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+        ...style,
+      } as React.CSSProperties),
+    [style],
   );
 
   return (
@@ -131,13 +140,7 @@ function SidebarProvider({
       <TooltipProvider delayDuration={0}>
         <div
           data-slot="sidebar-wrapper"
-          style={
-            {
-              "--sidebar-width": SIDEBAR_WIDTH,
-              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
-              ...style,
-            } as React.CSSProperties
-          }
+          style={inlineStyle}
           className={cn(
             "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
             className,
@@ -149,9 +152,9 @@ function SidebarProvider({
       </TooltipProvider>
     </SidebarContext.Provider>
   );
-}
+});
 
-function Sidebar({
+const Sidebar = React.memo(function Sidebar({
   side = "left",
   variant = "sidebar",
   collapsible = "offcanvas",
@@ -165,6 +168,14 @@ function Sidebar({
 }) {
   const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
 
+  const sheetStyle = React.useMemo(
+    () =>
+      ({
+        "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+      } as React.CSSProperties),
+    [],
+  );
+
   if (collapsible === "none") {
     return (
       <div
@@ -188,11 +199,7 @@ function Sidebar({
           data-slot="sidebar"
           data-mobile="true"
           className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
-          style={
-            {
-              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
-            } as React.CSSProperties
-          }
+          style={sheetStyle}
           side={side}
         >
           <SheetHeader className="sr-only">
@@ -214,7 +221,6 @@ function Sidebar({
       data-side={side}
       data-slot="sidebar"
     >
-      {/* This is what handles the sidebar gap on desktop */}
       <div
         data-slot="sidebar-gap"
         className={cn(
@@ -233,7 +239,6 @@ function Sidebar({
           side === "left"
             ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
             : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
-          // Adjust the padding for floating and inset variants.
           variant === "floating" || variant === "inset"
             ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
             : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
@@ -251,15 +256,23 @@ function Sidebar({
       </div>
     </div>
   );
-}
+});
 
-function SidebarTrigger({
+const SidebarTrigger = React.memo(function SidebarTrigger({
   className,
   onClick,
   ...props
 }: React.ComponentProps<typeof Button>) {
   const { toggleSidebar } = useSidebar();
 
+  const handleClick = React.useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      onClick?.(event);
+      toggleSidebar();
+    },
+    [onClick, toggleSidebar],
+  );
+
   return (
     <Button
       data-sidebar="trigger"
@@ -267,19 +280,19 @@ function SidebarTrigger({
       variant="ghost"
       size="icon"
       className={cn("size-7", className)}
-      onClick={(event) => {
-        onClick?.(event);
-        toggleSidebar();
-      }}
+      onClick={handleClick}
       {...props}
     >
       <PanelLeftIcon />
       <span className="sr-only">Toggle Sidebar</span>
     </Button>
   );
-}
+});
 
-function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+const SidebarRail = React.memo(function SidebarRail({
+  className,
+  ...props
+}: React.ComponentProps<"button">) {
   const { toggleSidebar } = useSidebar();
 
   return (
@@ -302,9 +315,12 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
       {...props}
     />
   );
-}
+});
 
-function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+const SidebarInset = React.memo(function SidebarInset({
+  className,
+  ...props
+}: React.ComponentProps<"main">) {
   return (
     <main
       data-slot="sidebar-inset"
@@ -316,9 +332,9 @@ function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
       {...props}
     />
   );
-}
+});
 
-function SidebarInput({
+const SidebarInput = React.memo(function SidebarInput({
   className,
   ...props
 }: React.ComponentProps<typeof Input>) {
@@ -330,9 +346,12 @@ function SidebarInput({
       {...props}
     />
   );
-}
+});
 
-function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+const SidebarHeader = React.memo(function SidebarHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="sidebar-header"
@@ -341,9 +360,12 @@ function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
       {...props}
     />
   );
-}
+});
 
-function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+const SidebarFooter = React.memo(function SidebarFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="sidebar-footer"
@@ -352,9 +374,9 @@ function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
       {...props}
     />
   );
-}
+});
 
-function SidebarSeparator({
+const SidebarSeparator = React.memo(function SidebarSeparator({
   className,
   ...props
 }: React.ComponentProps<typeof Separator>) {
@@ -366,9 +388,12 @@ function SidebarSeparator({
       {...props}
     />
   );
-}
+});
 
-function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+const SidebarContent = React.memo(function SidebarContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="sidebar-content"
@@ -380,9 +405,12 @@ function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
       {...props}
     />
   );
-}
+});
 
-function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+const SidebarGroup = React.memo(function SidebarGroup({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="sidebar-group"
@@ -391,9 +419,9 @@ function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
       {...props}
     />
   );
-}
+});
 
-function SidebarGroupLabel({
+const SidebarGroupLabel = React.memo(function SidebarGroupLabel({
   className,
   asChild = false,
   ...props
@@ -412,9 +440,9 @@ function SidebarGroupLabel({
       {...props}
     />
   );
-}
+});
 
-function SidebarGroupAction({
+const SidebarGroupAction = React.memo(function SidebarGroupAction({
   className,
   asChild = false,
   ...props
@@ -427,7 +455,6 @@ function SidebarGroupAction({
       data-sidebar="group-action"
       className={cn(
         "absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        // Increases the hit area of the button on mobile.
         "after:absolute after:-inset-2 md:after:hidden",
         "group-data-[collapsible=icon]:hidden",
         className,
@@ -435,9 +462,9 @@ function SidebarGroupAction({
       {...props}
     />
   );
-}
+});
 
-function SidebarGroupContent({
+const SidebarGroupContent = React.memo(function SidebarGroupContent({
   className,
   ...props
 }: React.ComponentProps<"div">) {
@@ -449,9 +476,12 @@ function SidebarGroupContent({
       {...props}
     />
   );
-}
+});
 
-function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+const SidebarMenu = React.memo(function SidebarMenu({
+  className,
+  ...props
+}: React.ComponentProps<"ul">) {
   return (
     <ul
       data-slot="sidebar-menu"
@@ -460,9 +490,12 @@ function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
       {...props}
     />
   );
-}
+});
 
-function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+const SidebarMenuItem = React.memo(function SidebarMenuItem({
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
   return (
     <li
       data-slot="sidebar-menu-item"
@@ -471,7 +504,7 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
       {...props}
     />
   );
-}
+});
 
 const sidebarMenuButtonVariants = cva(
   "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
@@ -495,7 +528,7 @@ const sidebarMenuButtonVariants = cva(
   },
 );
 
-function SidebarMenuButton({
+const SidebarMenuButton = React.memo(function SidebarMenuButton({
   asChild = false,
   isActive = false,
   variant = "default",
@@ -526,11 +559,7 @@ function SidebarMenuButton({
     return button;
   }
 
-  if (typeof tooltip === "string") {
-    tooltip = {
-      children: tooltip,
-    };
-  }
+  const tooltipProps = typeof tooltip === "string" ? { children: tooltip } : tooltip;
 
   return (
     <Tooltip>
@@ -539,13 +568,13 @@ function SidebarMenuButton({
         side="right"
         align="center"
         hidden={state !== "collapsed" || isMobile}
-        {...tooltip}
+        {...tooltipProps}
       />
     </Tooltip>
   );
-}
+});
 
-function SidebarMenuAction({
+const SidebarMenuAction = React.memo(function SidebarMenuAction({
   className,
   asChild = false,
   showOnHover = false,
@@ -562,7 +591,6 @@ function SidebarMenuAction({
       data-sidebar="menu-action"
       className={cn(
         "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform peer-hover/menu-button:text-sidebar-accent-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        // Increases the hit area of the button on mobile.
         "after:absolute after:-inset-2 md:after:hidden",
         "peer-data-[size=sm]/menu-button:top-1",
         "peer-data-[size=default]/menu-button:top-1.5",
@@ -575,9 +603,9 @@ function SidebarMenuAction({
       {...props}
     />
   );
-}
+});
 
-function SidebarMenuBadge({
+const SidebarMenuBadge = React.memo(function SidebarMenuBadge({
   className,
   ...props
 }: React.ComponentProps<"div">) {
@@ -597,20 +625,27 @@ function SidebarMenuBadge({
       {...props}
     />
   );
-}
+});
 
-function SidebarMenuSkeleton({
+const SidebarMenuSkeleton = React.memo(function SidebarMenuSkeleton({
   className,
   showIcon = false,
   ...props
 }: React.ComponentProps<"div"> & {
   showIcon?: boolean;
 }) {
-  // Random width between 50 to 90%.
   const width = React.useMemo(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   }, []);
 
+  const skeletonStyle = React.useMemo(
+    () =>
+      ({
+        "--skeleton-width": width,
+      } as React.CSSProperties),
+    [width],
+  );
+
   return (
     <div
       data-slot="sidebar-menu-skeleton"
@@ -627,17 +662,16 @@ function SidebarMenuSkeleton({
       <Skeleton
         className="h-4 max-w-(--skeleton-width) flex-1"
         data-sidebar="menu-skeleton-text"
-        style={
-          {
-            "--skeleton-width": width,
-          } as React.CSSProperties
-        }
+        style={skeletonStyle}
       />
     </div>
   );
-}
+});
 
-function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+const SidebarMenuSub = React.memo(function SidebarMenuSub({
+  className,
+  ...props
+}: React.ComponentProps<"ul">) {
   return (
     <ul
       data-slot="sidebar-menu-sub"
@@ -650,9 +684,9 @@ function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
       {...props}
     />
   );
-}
+});
 
-function SidebarMenuSubItem({
+const SidebarMenuSubItem = React.memo(function SidebarMenuSubItem({
   className,
   ...props
 }: React.ComponentProps<"li">) {
@@ -664,9 +698,9 @@ function SidebarMenuSubItem({
       {...props}
     />
   );
-}
+});
 
-function SidebarMenuSubButton({
+const SidebarMenuSubButton = React.memo(function SidebarMenuSubButton({
   asChild = false,
   size = "md",
   isActive = false,
@@ -696,7 +730,7 @@ function SidebarMenuSubButton({
       {...props}
     />
   );
-}
+});
 
 export {
   Sidebar,

config.ts

@@ -7,7 +7,7 @@ export default {
   api: {
     baseUrl: process.env.OPENAI_API_BASE_URL,  // /v1
     key: process.env.OPENAI_API_KEY,
-    model: "openai/gpt-5-chat-latest",
+    model: "limited/gpt-5-chat-latest",
     maxRetries: 5,
     timeout: 20000  // 20 seconds
   }