@sero-ai/ui 0.1.0 → 0.2.1

package/src/components/ai-elements/queue.tsx

@@ -154,7 +154,7 @@ export const QueueItemImage = ({
 }: QueueItemImageProps) => (
   <img
     alt=""
-    className={cn("h-8 w-8 rounded border object-cover", className)}
+    className={cn("size-8 rounded border object-cover", className)}
     height={32}
     width={32}
     {...props}

package/src/components/ai-elements/reasoning.tsx

@@ -18,7 +18,7 @@ import {
   createContext,
   memo,
   useCallback,
-  useContext,
+  use,
   useEffect,
   useMemo,
   useRef,
@@ -38,7 +38,7 @@ interface ReasoningContextValue {
 const ReasoningContext = createContext<ReasoningContextValue | null>(null);
 
 export const useReasoning = () => {
-  const context = useContext(ReasoningContext);
+  const context = use(ReasoningContext);
   if (!context) {
     throw new Error("Reasoning components must be used within Reasoning");
   }
@@ -157,7 +157,7 @@ export type ReasoningTriggerProps = ComponentProps<
 
 const defaultGetThinkingMessage = (isStreaming: boolean, duration?: number) => {
   if (isStreaming || duration === 0) {
-    return <Shimmer duration={1}>Thinking...</Shimmer>;
+    return <Shimmer duration={1}>Thinking…</Shimmer>;
   }
   if (duration === undefined) {
     return <p>Thought for a few seconds</p>;

package/src/components/ai-elements/schema-display.tsx

@@ -10,7 +10,7 @@ import {
 } from "../ui/collapsible";
 import { cn } from "../../lib/utils";
 import { ChevronRightIcon } from "lucide-react";
-import { createContext, useContext, useMemo } from "react";
+import { createContext, use, useMemo } from "react";
 
 type HttpMethod = "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
 
@@ -144,7 +144,7 @@ export const SchemaDisplayMethod = ({
   children,
   ...props
 }: SchemaDisplayMethodProps) => {
-  const { method } = useContext(SchemaDisplayContext);
+  const { method } = use(SchemaDisplayContext);
 
   return (
     <Badge
@@ -164,7 +164,7 @@ export const SchemaDisplayPath = ({
   children,
   ...props
 }: SchemaDisplayPathProps) => {
-  const { path } = useContext(SchemaDisplayContext);
+  const { path } = use(SchemaDisplayContext);
 
   // Highlight path parameters
   const highlightedPath = path.replaceAll(
@@ -191,7 +191,7 @@ export const SchemaDisplayDescription = ({
   children,
   ...props
 }: SchemaDisplayDescriptionProps) => {
-  const { description } = useContext(SchemaDisplayContext);
+  const { description } = use(SchemaDisplayContext);
 
   return (
     <p
@@ -225,7 +225,7 @@ export const SchemaDisplayParameters = ({
   children,
   ...props
 }: SchemaDisplayParametersProps) => {
-  const { parameters } = useContext(SchemaDisplayContext);
+  const { parameters } = use(SchemaDisplayContext);
 
   return (
     <Collapsible className={cn(className)} defaultOpen {...props}>
@@ -293,7 +293,7 @@ export const SchemaDisplayRequest = ({
   children,
   ...props
 }: SchemaDisplayRequestProps) => {
-  const { requestBody } = useContext(SchemaDisplayContext);
+  const { requestBody } = use(SchemaDisplayContext);
 
   return (
     <Collapsible className={cn(className)} defaultOpen {...props}>
@@ -320,7 +320,7 @@ export const SchemaDisplayResponse = ({
   children,
   ...props
 }: SchemaDisplayResponseProps) => {
-  const { responseBody } = useContext(SchemaDisplayContext);
+  const { responseBody } = use(SchemaDisplayContext);
 
   return (
     <Collapsible className={cn(className)} defaultOpen {...props}>

package/src/components/ai-elements/snippet.tsx

@@ -14,7 +14,7 @@ import { CheckIcon, CopyIcon } from "lucide-react";
 import {
   createContext,
   useCallback,
-  useContext,
+  use,
   useEffect,
   useRef,
   useState,
@@ -66,7 +66,7 @@ export type SnippetInputProps = Omit<
 >;
 
 export const SnippetInput = ({ className, ...props }: SnippetInputProps) => {
-  const { code } = useContext(SnippetContext);
+  const { code } = use(SnippetContext);
 
   return (
     <InputGroupInput
@@ -94,7 +94,7 @@ export const SnippetCopyButton = ({
 }: SnippetCopyButtonProps) => {
   const [isCopied, setIsCopied] = useState(false);
   const timeoutRef = useRef<number>(0);
-  const { code } = useContext(SnippetContext);
+  const { code } = use(SnippetContext);
 
   const copyToClipboard = useCallback(async () => {
     if (typeof window === "undefined" || !navigator?.clipboard?.writeText) {

package/src/components/ai-elements/sources.tsx

@@ -36,7 +36,7 @@ export const SourcesTrigger = ({
     {children ?? (
       <>
         <p className="font-medium">Used {count} sources</p>
-        <ChevronDownIcon className="h-4 w-4" />
+        <ChevronDownIcon className="size-4" />
       </>
     )}
   </CollapsibleTrigger>
@@ -70,7 +70,7 @@ export const Source = ({ href, title, children, ...props }: SourceProps) => (
   >
     {children ?? (
       <>
-        <BookIcon className="h-4 w-4" />
+        <BookIcon className="size-4" />
         <span className="block font-medium">{title}</span>
       </>
     )}

package/src/components/ai-elements/terminal.tsx

@@ -9,7 +9,7 @@ import { CheckIcon, CopyIcon, TerminalIcon, Trash2Icon } from "lucide-react";
 import {
   createContext,
   useCallback,
-  useContext,
+  use,
   useEffect,
   useMemo,
   useRef,
@@ -122,7 +122,7 @@ export const TerminalStatus = ({
   children,
   ...props
 }: TerminalStatusProps) => {
-  const { isStreaming } = useContext(TerminalContext);
+  const { isStreaming } = use(TerminalContext);
 
   if (!isStreaming) {
     return null;
@@ -166,7 +166,7 @@ export const TerminalCopyButton = ({
 }: TerminalCopyButtonProps) => {
   const [isCopied, setIsCopied] = useState(false);
   const timeoutRef = useRef<number>(0);
-  const { output } = useContext(TerminalContext);
+  const { output } = use(TerminalContext);
 
   const copyToClipboard = useCallback(async () => {
     if (typeof window === "undefined" || !navigator?.clipboard?.writeText) {
@@ -216,7 +216,7 @@ export const TerminalClearButton = ({
   className,
   ...props
 }: TerminalClearButtonProps) => {
-  const { onClear } = useContext(TerminalContext);
+  const { onClear } = use(TerminalContext);
 
   if (!onClear) {
     return null;
@@ -245,7 +245,7 @@ export const TerminalContent = ({
   children,
   ...props
 }: TerminalContentProps) => {
-  const { output, isStreaming, autoScroll } = useContext(TerminalContext);
+  const { output, isStreaming, autoScroll } = use(TerminalContext);
   const containerRef = useRef<HTMLDivElement>(null);
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: output triggers auto-scroll when new content arrives

package/src/components/ai-elements/test-results.tsx

@@ -16,7 +16,7 @@ import {
   CircleIcon,
   XCircleIcon,
 } from "lucide-react";
-import { createContext, useContext, useMemo } from "react";
+import { createContext, use, useMemo } from "react";
 
 type TestStatus = "passed" | "failed" | "skipped" | "running";
 
@@ -96,7 +96,7 @@ export const TestResultsSummary = ({
   children,
   ...props
 }: TestResultsSummaryProps) => {
-  const { summary } = useContext(TestResultsContext);
+  const { summary } = use(TestResultsContext);
 
   if (!summary) {
     return null;
@@ -144,7 +144,7 @@ export const TestResultsDuration = ({
   children,
   ...props
 }: TestResultsDurationProps) => {
-  const { summary } = useContext(TestResultsContext);
+  const { summary } = use(TestResultsContext);
 
   if (!summary?.duration) {
     return null;
@@ -164,7 +164,7 @@ export const TestResultsProgress = ({
   children,
   ...props
 }: TestResultsProgressProps) => {
-  const { summary } = useContext(TestResultsContext);
+  const { summary } = use(TestResultsContext);
 
   if (!summary) {
     return null;
@@ -251,7 +251,7 @@ export const TestSuiteName = ({
   children,
   ...props
 }: TestSuiteNameProps) => {
-  const { name, status } = useContext(TestSuiteContext);
+  const { name, status } = use(TestSuiteContext);
 
   return (
     <CollapsibleTrigger
@@ -395,7 +395,7 @@ export const TestStatus = ({
   children,
   ...props
 }: TestStatusProps) => {
-  const { status } = useContext(TestContext);
+  const { status } = use(TestContext);
 
   return (
     <span
@@ -410,7 +410,7 @@ export const TestStatus = ({
 export type TestNameProps = HTMLAttributes<HTMLSpanElement>;
 
 export const TestName = ({ className, children, ...props }: TestNameProps) => {
-  const { name } = useContext(TestContext);
+  const { name } = use(TestContext);
 
   return (
     <span className={cn("flex-1", className)} {...props}>
@@ -426,7 +426,7 @@ export const TestDuration = ({
   children,
   ...props
 }: TestDurationProps) => {
-  const { duration } = useContext(TestContext);
+  const { duration } = use(TestContext);
 
   if (duration === undefined) {
     return null;

package/src/components/ai-elements/transcription.tsx

@@ -5,7 +5,7 @@ import type { ComponentProps, ReactNode } from "react";
 
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import { cn } from "../../lib/utils";
-import { createContext, useCallback, useContext, useMemo } from "react";
+import { createContext, useCallback, use, useMemo } from "react";
 
 type TranscriptionSegment = TranscriptionResult["segments"][number];
 
@@ -21,7 +21,7 @@ const TranscriptionContext = createContext<TranscriptionContextValue | null>(
 );
 
 const useTranscription = () => {
-  const context = useContext(TranscriptionContext);
+  const context = use(TranscriptionContext);
   if (!context) {
     throw new Error(
       "Transcription components must be used within Transcription"

package/src/components/ai-elements/voice-selector-accent.tsx

@@ -0,0 +1,50 @@
+import type { ComponentProps } from 'react';
+import { Languages } from 'lucide-react';
+import { cn } from '../../lib/utils';
+
+export type VoiceSelectorAccentValue =
+  | 'american'
+  | 'british'
+  | 'australian'
+  | 'canadian'
+  | 'irish'
+  | 'scottish'
+  | 'indian'
+  | 'south-african'
+  | 'new-zealand'
+  | 'spanish'
+  | 'french'
+  | 'german'
+  | 'italian'
+  | 'portuguese'
+  | 'brazilian'
+  | 'mexican'
+  | 'argentinian'
+  | 'japanese'
+  | 'chinese'
+  | 'korean'
+  | 'russian'
+  | 'arabic'
+  | 'dutch'
+  | 'swedish'
+  | 'norwegian'
+  | 'danish'
+  | 'finnish'
+  | 'polish'
+  | 'turkish'
+  | 'greek'
+  | string;
+
+export type VoiceSelectorAccentProps = ComponentProps<'span'> & {
+  value?: VoiceSelectorAccentValue;
+};
+
+export const VoiceSelectorAccent = ({
+  className,
+  children,
+  ...props
+}: VoiceSelectorAccentProps) => (
+  <span className={cn('text-muted-foreground text-xs', className)} {...props}>
+    {children ?? <Languages className="size-4" />}
+  </span>
+);

package/src/components/ai-elements/voice-selector.tsx

@@ -3,6 +3,10 @@
 import type { ComponentProps, ReactNode } from "react";
 
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import {
+  VoiceSelectorAccent,
+  type VoiceSelectorAccentProps,
+} from "./voice-selector-accent";
 import { Button } from "../ui/button";
 import {
   Command,
@@ -34,7 +38,7 @@ import {
   VenusAndMarsIcon,
   VenusIcon,
 } from "lucide-react";
-import { createContext, useCallback, useContext, useMemo } from "react";
+import { createContext, useCallback, use, useMemo } from "react";
 
 interface VoiceSelectorContextValue {
   value: string | undefined;
@@ -48,7 +52,7 @@ const VoiceSelectorContext = createContext<VoiceSelectorContextValue | null>(
 );
 
 export const useVoiceSelector = () => {
-  const context = useContext(VoiceSelectorContext);
+  const context = use(VoiceSelectorContext);
   if (!context) {
     throw new Error(
       "VoiceSelector components must be used within VoiceSelector"
@@ -238,181 +242,8 @@ export const VoiceSelectorGender = ({
   );
 };
 
-export type VoiceSelectorAccentProps = ComponentProps<"span"> & {
-  value?:
-    | "american"
-    | "british"
-    | "australian"
-    | "canadian"
-    | "irish"
-    | "scottish"
-    | "indian"
-    | "south-african"
-    | "new-zealand"
-    | "spanish"
-    | "french"
-    | "german"
-    | "italian"
-    | "portuguese"
-    | "brazilian"
-    | "mexican"
-    | "argentinian"
-    | "japanese"
-    | "chinese"
-    | "korean"
-    | "russian"
-    | "arabic"
-    | "dutch"
-    | "swedish"
-    | "norwegian"
-    | "danish"
-    | "finnish"
-    | "polish"
-    | "turkish"
-    | "greek"
-    | string;
-};
-
-export const VoiceSelectorAccent = ({
-  className,
-  value,
-  children,
-  ...props
-}: VoiceSelectorAccentProps) => {
-  let emoji: string | null = null;
-
-  switch (value) {
-    case "american": {
-      emoji = "🇺🇸";
-      break;
-    }
-    case "british": {
-      emoji = "🇬🇧";
-      break;
-    }
-    case "australian": {
-      emoji = "🇦🇺";
-      break;
-    }
-    case "canadian": {
-      emoji = "🇨🇦";
-      break;
-    }
-    case "irish": {
-      emoji = "🇮🇪";
-      break;
-    }
-    case "scottish": {
-      emoji = "🏴󠁧󠁢󠁳󠁣󠁴󠁿";
-      break;
-    }
-    case "indian": {
-      emoji = "🇮🇳";
-      break;
-    }
-    case "south-african": {
-      emoji = "🇿🇦";
-      break;
-    }
-    case "new-zealand": {
-      emoji = "🇳🇿";
-      break;
-    }
-    case "spanish": {
-      emoji = "🇪🇸";
-      break;
-    }
-    case "french": {
-      emoji = "🇫🇷";
-      break;
-    }
-    case "german": {
-      emoji = "🇩🇪";
-      break;
-    }
-    case "italian": {
-      emoji = "🇮🇹";
-      break;
-    }
-    case "portuguese": {
-      emoji = "🇵🇹";
-      break;
-    }
-    case "brazilian": {
-      emoji = "🇧🇷";
-      break;
-    }
-    case "mexican": {
-      emoji = "🇲🇽";
-      break;
-    }
-    case "argentinian": {
-      emoji = "🇦🇷";
-      break;
-    }
-    case "japanese": {
-      emoji = "🇯🇵";
-      break;
-    }
-    case "chinese": {
-      emoji = "🇨🇳";
-      break;
-    }
-    case "korean": {
-      emoji = "🇰🇷";
-      break;
-    }
-    case "russian": {
-      emoji = "🇷🇺";
-      break;
-    }
-    case "arabic": {
-      emoji = "🇸🇦";
-      break;
-    }
-    case "dutch": {
-      emoji = "🇳🇱";
-      break;
-    }
-    case "swedish": {
-      emoji = "🇸🇪";
-      break;
-    }
-    case "norwegian": {
-      emoji = "🇳🇴";
-      break;
-    }
-    case "danish": {
-      emoji = "🇩🇰";
-      break;
-    }
-    case "finnish": {
-      emoji = "🇫🇮";
-      break;
-    }
-    case "polish": {
-      emoji = "🇵🇱";
-      break;
-    }
-    case "turkish": {
-      emoji = "🇹🇷";
-      break;
-    }
-    case "greek": {
-      emoji = "🇬🇷";
-      break;
-    }
-    default: {
-      emoji = null;
-    }
-  }
-
-  return (
-    <span className={cn("text-muted-foreground text-xs", className)} {...props}>
-      {children ?? emoji}
-    </span>
-  );
-};
+export { VoiceSelectorAccent };
+export type { VoiceSelectorAccentProps };
 
 export type VoiceSelectorAgeProps = ComponentProps<"span">;
 

package/src/components/ai-elements/web-preview.tsx

@@ -20,7 +20,7 @@ import { ChevronDownIcon } from "lucide-react";
 import {
   createContext,
   useCallback,
-  useContext,
+  use,
   useMemo,
   useState,
 } from "react";
@@ -35,7 +35,7 @@ export interface WebPreviewContextValue {
 const WebPreviewContext = createContext<WebPreviewContextValue | null>(null);
 
 const useWebPreview = () => {
-  const context = useContext(WebPreviewContext);
+  const context = use(WebPreviewContext);
   if (!context) {
     throw new Error("WebPreview components must be used within a WebPreview");
   }
@@ -120,7 +120,7 @@ export const WebPreviewNavigationButton = ({
     <Tooltip>
       <TooltipTrigger asChild>
         <Button
-          className="h-8 w-8 p-0 hover:text-foreground"
+          className="size-8 p-0 hover:text-foreground"
           disabled={disabled}
           onClick={onClick}
           size="sm"
@@ -199,7 +199,6 @@ export const WebPreviewBody = ({
     <div className="flex-1">
       <iframe
         className={cn("size-full", className)}
-        // oxlint-disable-next-line eslint-plugin-react(iframe-missing-sandbox)
         sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-presentation"
         src={(src ?? url) || undefined}
         title="Preview"
@@ -241,7 +240,7 @@ export const WebPreviewConsole = ({
           Console
           <ChevronDownIcon
             className={cn(
-              "h-4 w-4 transition-transform duration-200",
+              "size-4 transition-transform duration-200",
               consoleOpen && "rotate-180"
             )}
           />
@@ -265,7 +264,7 @@ export const WebPreviewConsole = ({
                   log.level === "warn" && "text-yellow-600",
                   log.level === "log" && "text-foreground"
                 )}
-                key={`${log.timestamp.getTime()}-${index}`}
+                key={`${log.timestamp.getTime()}-${log.level}-${log.message}`}
               >
                 <span className="text-muted-foreground">
                   {log.timestamp.toLocaleTimeString()}