feat: update UI components and styles

- Updated `AnimatedBeam` component:
  - Changed `gradientStartColor` from `#ffaa40` to `#000000` and `gradientStopColor` from `#9c40ff` to `#9c0000`.
  - Improved path calculation logic by ensuring refs are not null and added reverse logic for path calculation.
  - Adjusted dependencies in `useEffect` for better performance.

- Modified `BackgroundBeams` component:
  - Changed width and height classes for animated divs from `w-[50rem]` and `h-[50rem]` to `w-200` and `h-200`, and from `w-[30rem]` and `h-[30rem]` to `w-120` and `h-120`.

- Refactored `BorderBeam` component:
  - Updated mask styles for better clarity and consistency.

- Enhanced `CardSpotlight` component:
  - Added `opacity` and `transitionDuration` props for better control over spotlight effects.
  - Implemented touch event handling for mobile devices.

- Improved `Spotlight` component:
  - Added width and height state management for better responsiveness.
  - Implemented scaling for mouse coordinates based on component dimensions.

- Fixed `TextGenerateEffect` component:
  - Ensured `animate` and `duration` are included in the dependency array of `useEffect`.

- Updated `Field` components:
  - Adjusted class names for better styling consistency and improved accessibility.

- Refined `Kbd` component:
  - Updated class names for tooltip content styling.

- Updated `NavigationMenu`:
  - Moved `navigationMenuTriggerStyle` to a separate file for better organization.

- Refactored `Pagination` component:
  - Updated import paths for button variants.

- Enhanced `SelectTrigger` component:
  - Improved class names for better styling consistency.

- Refactored `Sidebar` components:
  - Moved sidebar context and variants to separate files for better organization and maintainability.

- Added new `badge-variants`, `button-group-variants`, and `button-variants` files for better styling management.

- Created `navigation-menu-variants` and `sidebar-variants` files for improved organization of styles.

- Added `SidebarContext` for better state management in sidebar components.

Author: ssdeanx

package-lock.json

@@ -43,10 +43,10 @@
   },
   "dependencies": {
     "@ai-sdk/google": "^2.0.52",
-    "@ai-sdk/google-vertex": "^4.0.3",
-    "@ai-sdk/openai": "^3.0.2",
-    "@ai-sdk/openai-compatible": "^2.0.2",
-    "@ai-sdk/react": "^3.0.7",
+    "@ai-sdk/google-vertex": "^4.0.6",
+    "@ai-sdk/openai": "^3.0.4",
+    "@ai-sdk/openai-compatible": "^2.0.3",
+    "@ai-sdk/react": "^3.0.11",
     "@dotenvx/dotenvx": "^1.51.4",
     "@e2b/code-interpreter": "^2.3.3",
     "@emotion/react": "^11.14.0",
@@ -104,7 +104,7 @@
     "@vercel/otel": "^2.1.0",
     "@xyflow/react": "^12.10.0",
     "a2a-ai-provider": "^0.4.0-alpha.2",
-    "ai": "^5.0.117",
+    "ai": "^5.0.118",
     "ai-sdk-ollama": "^3.0.1",
     "ai-sdk-provider-claude-code": "^3.1.0",
     "ai-sdk-provider-gemini-cli": "^2.0.1",
@@ -199,8 +199,8 @@
     "@types/react-dom": "^19.2.3",
     "@types/strip-comments": "^2.0.4",
     "@types/unist": "^3.0.3",
-    "@typescript-eslint/eslint-plugin": "^8.51.0",
-    "@typescript-eslint/parser": "^8.51.0",
+    "@typescript-eslint/eslint-plugin": "^8.52.0",
+    "@typescript-eslint/parser": "^8.52.0",
     "@vitest/coverage-v8": "^4.0.16",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
@@ -212,19 +212,21 @@
     "tailwindcss": "^4.1.18",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.51.0",
+    "typescript-eslint": "^8.52.0",
     "typescript-language-server": "^5.1.3",
     "vitest": "^4.0.16"
   },
   "overrides": {
     "jsondiffpatch": "0.7.3",
-    "ai": "^5.0.117",
+    "ai": "^5.0.118",
     "morgan": "^1.10.1",
     "js-yaml": "^4.1.1",
     "multer": "^2.0.2",
     "body-parser": "^2.2.1",
     "jws": "^4.0.1",
     "qs": "^6.14.1",
-    "eslint": "^9.39.2"
+    "eslint": "^9.39.2",
+    "typescript-eslint": "^8.52.0",
+    "@typescript-eslint/parser": "^8.52.0"
   }
-}
+}

package.json

@@ -9,7 +9,7 @@ import {
 import { cn } from "@/lib/utils";
 import { BrainIcon, ChevronDownIcon } from "lucide-react";
 import type { ComponentProps, ReactNode } from "react";
-import { createContext, memo, useContext, useEffect, useState } from "react";
+import { createContext, memo, useContext, useEffect, useRef, useState } from "react";
 import { Streamdown } from "streamdown";
 import { Shimmer } from "./shimmer";
 
@@ -69,19 +69,17 @@ export const Reasoning = memo(
     });
 
     const [hasAutoClosed, setHasAutoClosed] = useState(false);
-    const [startTime, setStartTime] = useState<number | null>(null);
+    const startTimeRef = useRef<number | null>(null);
 
     // Track duration when streaming starts and ends
     useEffect(() => {
       if (isStreaming) {
-        if (startTime === null) {
-          setStartTime(Date.now());
-        }
-      } else if (startTime !== null) {
-        setDuration(Math.ceil((Date.now() - startTime) / MS_IN_S));
-        setStartTime(null);
+        startTimeRef.current ??= Date.now();
+      } else if (startTimeRef.current !== null) {
+        setDuration(Math.ceil((Date.now() - startTimeRef.current) / MS_IN_S));
+        startTimeRef.current = null;
       }
-    }, [isStreaming, startTime, setDuration]);
+    }, [isStreaming, setDuration]);
 
     // Auto-open when streaming starts, auto-close when streaming ends (once only)
     useEffect(() => {
@@ -171,7 +169,7 @@ export const ReasoningContent = memo(
     <CollapsibleContent
       className={cn(
         "mt-4 text-sm",
-        "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-muted-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+        "closed:fade-out-0 closed:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-muted-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
         className
       )}
       {...props}

src/components/ai-elements/reasoning.tsx

@@ -27,7 +27,7 @@ export function Avatar({
 }: AvatarProps) {
   const [hasError, setHasError] = React.useState(false)
 
-  const initials = fallback || alt?.split(" ").map((n) => n[0]).join("").slice(0, 2).toUpperCase()
+  const initials = fallback ?? alt?.split(" ").map((n) => n[0]).join("").slice(0, 2).toUpperCase()
 
   return (
     <div
@@ -38,7 +38,7 @@ export function Avatar({
       )}
       {...props}
     >
-      {src && !hasError ? (
+      {(src !== null) && !hasError ? (
         <img
           src={src}
           alt={alt}

ui/avatar.tsx

@@ -0,0 +1,22 @@
+import { cva } from "class-variance-authority"
+
+export const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)

ui/badge-variants.ts

@@ -1,29 +1,9 @@
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import type { VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
-
-const badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-        destructive:
-          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
+import { badgeVariants } from "./badge-variants"
 
 function Badge({
   className,
@@ -43,4 +23,4 @@ function Badge({
   )
 }
 
-export { Badge, badgeVariants }
+export { Badge }

ui/badge.tsx

@@ -13,7 +13,7 @@ function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
     <ol
       data-slot="breadcrumb-list"
       className={cn(
-        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm wrap-break-word sm:gap-2.5",
         className
       )}
       {...props}

ui/breadcrumb.tsx

@@ -0,0 +1,18 @@
+import { cva } from "class-variance-authority"
+
+export const buttonGroupVariants = cva(
+  "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+        vertical:
+          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  }
+)

ui/button-group-variants.ts

@@ -1,25 +1,9 @@
 import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import type { VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
 import { Separator } from "@/ui/separator"
-
-const buttonGroupVariants = cva(
-  "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
-  {
-    variants: {
-      orientation: {
-        horizontal:
-          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
-        vertical:
-          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
-      },
-    },
-    defaultVariants: {
-      orientation: "horizontal",
-    },
-  }
-)
+import { buttonGroupVariants } from "./button-group-variants"
 
 function ButtonGroup({
   className,
@@ -67,7 +51,7 @@ function ButtonGroupSeparator({
       data-slot="button-group-separator"
       orientation={orientation}
       className={cn(
-        "bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto",
+        "bg-input relative m-0! self-stretch data-[orientation=vertical]:h-auto",
         className
       )}
       {...props}
@@ -79,5 +63,4 @@ export {
   ButtonGroup,
   ButtonGroupSeparator,
   ButtonGroupText,
-  buttonGroupVariants,
 }

ui/button-group.tsx

@@ -0,0 +1,33 @@
+import { cva } from "class-variance-authority"
+
+export const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)