@agents24/chat-react 0.5.4 → 0.5.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agents24/chat-react",
-  "version": "0.5.4",
+  "version": "0.5.6",
   "description": "Accessible web UI and complete default layout for Agents24 chat applications.",
   "license": "MIT",
   "repository": {
@@ -58,8 +58,9 @@
     "prepack": "pnpm run build && pnpm run check:boundaries"
   },
   "dependencies": {
-    "@agents24/client": "0.2.2",
-    "@agents24/react": "0.2.2",
+    "@untitledui/file-icons": "0.0.9",
+    "@agents24/client": "0.2.4",
+    "@agents24/react": "0.2.4",
     "@fontsource-variable/inter": "^5.3.0",
     "@fontsource-variable/jetbrains-mono": "^5.3.0",
     "@fontsource-variable/merriweather": "^5.3.0",

package/scaffold/src/app.tsx

@@ -30,6 +30,7 @@ export type Agents24ChatAppProps = {
   onModelChange?: (modelId: string) => void
   identity?: Agents24ChatIdentity
   components?: Agents24ChatScaffoldComponents
+  sidebar?: React.ReactNode
 }
 
 export type Agents24ChatScaffoldComponents = {
@@ -58,7 +59,7 @@ function RuntimeChat({
     ),
   })
 
-  return <ChatShell components={components} identity={identity} runtime={runtime} />
+  return <ChatShell components={components} identity={identity} runtime={runtime} sidebar={props.sidebar} />
 }
 
 export function App(props: Agents24ChatAppProps) {

package/scaffold/src/chat.css

@@ -10,12 +10,24 @@
 [data-agents24-theme-root],
 [data-agents24-theme-root] * {
   box-sizing: border-box;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  --tw-inset-ring-shadow: 0 0 #0000 !important;
+  --tw-ring-shadow: 0 0 #0000 !important;
+}
+
+[data-agents24-theme-root] ::-webkit-scrollbar {
+  display: none;
+}
+
+[data-agents24-theme-root] :focus-visible {
+  outline: none !important;
 }
 
 [data-agents24-theme-root] .a24-message-response {
   max-width: 100%;
   min-width: 0;
-  padding-inline: 3px;
+  padding-inline: 6px;
   width: 100%;
 }
 

package/scaffold/src/components/chat/chat-composer.tsx

@@ -1,10 +1,21 @@
-import { ArrowUp, LoaderCircle, Mic, Square, X } from "lucide-react"
+import { ArrowUp, ChevronDown, LoaderCircle, Mic, Square } from "lucide-react"
 import * as React from "react"
-import { AgentChatContextStatus, useAudioRecorder } from "@agents24/chat-react/ui"
+import {
+  AgentChatContextStatus,
+  ChatAttachmentRows,
+  createAgentChatComposerFile,
+  revokeAgentChatComposerFiles,
+  useAudioRecorder,
+  type AgentChatComposerFile,
+} from "@agents24/chat-react/ui"
 import { canonicalInputMimeType, inputMimeTypes, validateAgentChatSubmission, type AgentChatInputContract } from "@agents24/chat-react/runtime"
 import type { ContextWindow } from "@agents24/client/protocol"
 
 import { Button } from "../ui/button"
+import {
+  DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem,
+  DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger,
+} from "../ui/dropdown-menu"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select"
 import { Textarea } from "../ui/textarea"
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip"
@@ -14,14 +25,18 @@ type ChatComposerProps = {
   inputContract: AgentChatInputContract
   disabled?: boolean
   contextWindow?: ContextWindow | null
+  focusKey?: string | null
   forceExpanded?: boolean
   isCancelling?: boolean
   isRunning: boolean
+  agentId: string | null
+  agents: Array<{ id: string; label: string }>
   modelId: string | null
   models: Array<{ id: string; label: string }>
   onModelChange: (modelId: string) => void
+  onAgentChange: (agentId: string) => void
   onStop: () => void
-  onSubmit: (text: string, files: File[]) => Promise<void>
+  onSubmit: (text: string, files: AgentChatComposerFile[]) => Promise<void>
   utilityRow?: "inline" | "below"
 }
 
@@ -29,45 +44,61 @@ export function ChatComposer({
   inputContract,
   disabled,
   contextWindow,
+  focusKey,
   forceExpanded = false,
   isCancelling = false,
   isRunning,
+  agentId,
+  agents,
   modelId,
   models,
   onModelChange,
+  onAgentChange,
   onStop,
   onSubmit,
   utilityRow = "inline",
 }: ChatComposerProps) {
   const [text, setText] = React.useState("")
-  const [files, setFiles] = React.useState<File[]>([])
+  const [files, setFiles] = React.useState<AgentChatComposerFile[]>([])
   const [attachmentError, setAttachmentError] = React.useState<string | null>(null)
   const inputRef = React.useRef<HTMLInputElement>(null)
   const textareaRef = React.useRef<HTMLTextAreaElement>(null)
+  const filesRef = React.useRef<AgentChatComposerFile[]>([])
+  const inFlightFilesRef = React.useRef<AgentChatComposerFile[]>([])
   const submittingRef = React.useRef(false)
   const draftRevisionRef = React.useRef(0)
   const attachmentMimeTypes = inputMimeTypes(inputContract)
   const allowAttachments = attachmentMimeTypes.length > 0
   const recordingAllowed = inputContract.modalities.audio.recording_enabled
+  React.useEffect(() => {
+    filesRef.current = files
+  }, [files])
+  React.useEffect(() => () => {
+    revokeAgentChatComposerFiles(filesRef.current)
+    revokeAgentChatComposerFiles(inFlightFilesRef.current)
+  }, [])
+  React.useEffect(() => {
+    if (disabled || isRunning) return
+    const frame = window.requestAnimationFrame(() => textareaRef.current?.focus({ preventScroll: true }))
+    return () => window.cancelAnimationFrame(frame)
+  }, [disabled, focusKey, isRunning])
   const addRecording = React.useCallback((file: File) => {
     draftRevisionRef.current += 1
-    setFiles((current) => [...current, file])
+    setFiles((current) => [...current, createAgentChatComposerFile(file)])
   }, [])
   const recorder = useAudioRecorder(addRecording)
   const isExpanded = forceExpanded || text.includes("\n") || text.length > 62
   const validationError = validateAgentChatSubmission(
     inputContract,
     text,
-    files.map((file) => ({ data: file, mediaType: file.type })),
+    files.map((file) => ({ data: file.source, mediaType: file.mediaType })),
   )
 
+  const selectedAgent = agents.find((item) => item.id === agentId)
+  const selectedModel = models.find((item) => item.id === modelId)
   const modelSelector = models.length > 0 ? (
     <div className="w-fit max-w-40">
-      <Select
-        disabled={disabled || isRunning}
-        onValueChange={onModelChange}
-        value={modelId || undefined}
-      >
+      <Select disabled={disabled || isRunning} onValueChange={onModelChange} value={modelId || undefined}>
         <SelectTrigger aria-label="Runtime model">
           <SelectValue placeholder="Model" />
         </SelectTrigger>
@@ -77,6 +108,47 @@ export function ChatComposer({
       </Select>
     </div>
   ) : null
+  const runtimeSelector = agents.length > 1 ? (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          className="h-8 max-w-64 gap-1.5 bg-transparent px-2.5 text-xs font-normal hover:bg-muted/40 disabled:opacity-100"
+          disabled={disabled || isRunning}
+          aria-label="Runtime configuration"
+        >
+          <span className="truncate">
+            {[selectedAgent?.label, selectedModel?.label].filter(Boolean).join(" · ") || "Runtime"}
+          </span>
+          <ChevronDown className="size-3.5 text-muted-foreground" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-64 rounded-lg">
+        <DropdownMenuSub>
+            <DropdownMenuSubTrigger className="rounded-lg">
+              <span>Agent</span><span className="ml-auto max-w-32 truncate text-muted-foreground">{selectedAgent?.label}</span>
+            </DropdownMenuSubTrigger>
+            <DropdownMenuSubContent className="w-56 rounded-lg">
+              <DropdownMenuRadioGroup value={agentId || undefined} onValueChange={onAgentChange}>
+                {agents.map((agent) => <DropdownMenuRadioItem className="rounded-lg" key={agent.id} value={agent.id}>{agent.label}</DropdownMenuRadioItem>)}
+              </DropdownMenuRadioGroup>
+            </DropdownMenuSubContent>
+        </DropdownMenuSub>
+        {models.length > 0 ? (
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger className="rounded-lg">
+              <span>Model</span><span className="ml-auto max-w-32 truncate text-muted-foreground">{selectedModel?.label}</span>
+            </DropdownMenuSubTrigger>
+            <DropdownMenuSubContent className="max-h-64 w-56 rounded-lg">
+              <DropdownMenuRadioGroup value={modelId || undefined} onValueChange={onModelChange}>
+                {models.map((model) => <DropdownMenuRadioItem className="rounded-lg" key={model.id} value={model.id}>{model.label}</DropdownMenuRadioItem>)}
+              </DropdownMenuRadioGroup>
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+        ) : null}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  ) : modelSelector
   const hasContextWindow = Number.isFinite(Number(contextWindow?.max_tokens)) && Number(contextWindow?.max_tokens) > 0
   const showUtilityRow = utilityRow === "below"
 
@@ -87,16 +159,23 @@ export function ChatComposer({
     const clearedRevision = draftRevisionRef.current + 1
     draftRevisionRef.current = clearedRevision
     submittingRef.current = true
+    inFlightFilesRef.current = selectedFiles
     setText("")
     setFiles([])
     textareaRef.current?.focus()
     try {
       await onSubmit(value, selectedFiles)
+      revokeAgentChatComposerFiles(selectedFiles)
+      inFlightFilesRef.current = []
     } catch {
       if (draftRevisionRef.current === clearedRevision) {
         draftRevisionRef.current += 1
         setText(value)
         setFiles(selectedFiles)
+        inFlightFilesRef.current = []
+      } else {
+        revokeAgentChatComposerFiles(selectedFiles)
+        inFlightFilesRef.current = []
       }
     } finally {
       submittingRef.current = false
@@ -109,18 +188,19 @@ export function ChatComposer({
       data-agents24-chat-composer=""
     >
       {allowAttachments && files.length > 0 && (
-        <div className="mb-2 flex min-w-0 gap-2 overflow-x-auto">
-          {files.map((file, index) => (
-            <div key={`${file.name}-${index}`} className="flex max-w-48 items-center gap-2 border bg-card px-2 py-1 text-xs">
-              <span className="truncate">{file.name}</span>
-              <Button variant="ghost" size="icon-xs" aria-label={`Remove ${file.name}`} onClick={() => {
-                draftRevisionRef.current += 1
-                setFiles((current) => current.filter((_, itemIndex) => itemIndex !== index))
-              }}>
-                <X />
-              </Button>
-            </div>
-          ))}
+        <div className="mb-2 min-w-0">
+          <ChatAttachmentRows
+            attachments={files}
+            onRemove={(attachment) => {
+              if (!attachment.id) return
+              draftRevisionRef.current += 1
+              setFiles((current) => {
+                const removed = current.find((file) => file.id === attachment.id)
+                if (removed) revokeAgentChatComposerFiles([removed])
+                return current.filter((file) => file.id !== attachment.id)
+              })
+            }}
+          />
         </div>
       )}
       {attachmentError || recorder.error ? <p className="mb-2 text-xs text-destructive" role="alert">{attachmentError || recorder.error}</p> : null}
@@ -145,7 +225,7 @@ export function ChatComposer({
                   attachmentMimeTypes.includes(canonicalInputMimeType(file.type))
                 ))
                 draftRevisionRef.current += 1
-                setFiles((current) => [...current, ...accepted])
+                setFiles((current) => [...current, ...accepted.map(createAgentChatComposerFile)])
                 setAttachmentError(
                   accepted.length === selected.length
                     ? null
@@ -185,7 +265,7 @@ export function ChatComposer({
         />
         <div className="agents24-composer-actions flex items-center gap-1">
           {utilityRow === "inline" ? <AgentChatContextStatus contextWindow={contextWindow} /> : null}
-          {utilityRow === "inline" ? modelSelector : null}
+          {utilityRow === "inline" ? runtimeSelector : null}
           {recordingAllowed ? (
             <Button
               variant={recorder.isRecording ? "default" : "ghost"}
@@ -224,11 +304,11 @@ export function ChatComposer({
       </div>
       {showUtilityRow ? (
         <div
-          aria-hidden={!modelSelector && !hasContextWindow ? "true" : undefined}
+          aria-hidden={!runtimeSelector && !hasContextWindow ? "true" : undefined}
           className="mt-2 flex min-h-8 items-center justify-between gap-2 px-1"
           data-agents24-chat-composer-utility=""
         >
-          <div className="min-w-0">{modelSelector}</div>
+          <div className="min-w-0">{runtimeSelector}</div>
           <AgentChatContextStatus contextWindow={contextWindow} />
         </div>
       ) : null}

package/scaffold/src/components/chat/chat-message.tsx

@@ -1,7 +1,7 @@
 import type { ChatHitlPart, ChatMessage as ChatMessageModel } from "@agents24/react"
 import type { FeedbackReason, HitlResponse } from "@agents24/client"
 import type { AgentChatRuntimeHitlActionState } from "@agents24/chat-react/runtime"
-import { AgentChatDefaultActions, ChatAttachment, ChatAttachments } from "@agents24/chat-react/ui"
+import { AgentChatDefaultActions, ChatAttachmentRows, type ChatAttachmentContentResolver } from "@agents24/chat-react/ui"
 import * as React from "react"
 
 import { MessageParts } from "./message-parts"
@@ -20,6 +20,7 @@ type Props = {
     input: { rating: "like" | "dislike" | null; reason?: FeedbackReason | null; comment?: string | null },
   ) => Promise<void>
   Timeline?: React.ComponentType<Agents24ChatTimelineSlotProps>
+  resolveAttachmentContent?: ChatAttachmentContentResolver
 }
 
 export function ChatMessage({
@@ -30,6 +31,7 @@ export function ChatMessage({
   onHitlAction,
   onRegenerate,
   onSetFeedback,
+  resolveAttachmentContent,
   Timeline,
 }: Props) {
   const isUser = message.role === "user"
@@ -37,14 +39,11 @@ export function ChatMessage({
     <Message align={isUser ? "end" : "start"}>
       <MessageContent>
         {isUser && message.attachments?.length ? (
-          <ChatAttachments className="mb-2 justify-end">
-            {message.attachments.map((attachment, index) => (
-              <ChatAttachment
-                data={attachment}
-                key={String(attachment.id || attachment.url || attachment.filename || index)}
-              />
-            ))}
-          </ChatAttachments>
+          <ChatAttachmentRows
+            attachments={message.attachments}
+            className="mb-2"
+            resolveContent={resolveAttachmentContent}
+          />
         ) : null}
         <Bubble variant={isUser ? "secondary" : "ghost"} align={isUser ? "end" : "start"} className={isUser ? "max-w-[min(75%,42rem)]" : "max-w-full overflow-visible"}>
           <BubbleContent className={isUser ? "px-4 py-2.5" : "w-full overflow-visible"}>

package/scaffold/src/components/chat/chat-shell.tsx

@@ -87,10 +87,12 @@ export function ChatShell({
   components,
   identity,
   runtime,
+  sidebar,
 }: {
   components?: Agents24ChatScaffoldComponents
   identity: Agents24ChatIdentity
   runtime: AgentChatRuntime
+  sidebar?: React.ReactNode
 }) {
   const { controller } = runtime
   const isRunning =
@@ -98,7 +100,7 @@ export function ChatShell({
     || controller.runState === "reconnecting"
     || controller.runState === "paused"
     || controller.runState === "cancelling"
-    || runtime.isSubmitting
+  const isUploading = controller.runState === "uploading" || runtime.isUploading
   const isCancelling = controller.runState === "cancelling"
   const activeTitle = controller.threads.find((thread) => thread.id === controller.activeThreadId)?.title
   const hasBlockingError = Boolean(runtime.fatalError && controller.messages.length === 0)
@@ -111,7 +113,7 @@ export function ChatShell({
       data-agents24-chat-layout=""
     >
       <PersistentSidebarTrigger />
-      <ThreadSidebar
+      {sidebar || <ThreadSidebar
         activeThreadId={controller.activeThreadId}
         hasMore={controller.hasMoreThreads}
         identity={identity}
@@ -122,7 +124,7 @@ export function ChatShell({
         onLoadMore={controller.loadMoreThreads}
         onNew={runtime.newThread}
         onOpen={runtime.openThread}
-      />
+      />}
       <SidebarInset className="h-svh min-h-0 overflow-hidden bg-background">
         <header
           className="flex h-12 shrink-0 items-center gap-2 border-b border-border/30 px-3 sm:px-4"
@@ -149,10 +151,14 @@ export function ChatShell({
               <ChatComposer
                 inputContract={runtime.inputContract || LOADING_INPUT_CONTRACT}
                 contextWindow={runtime.contextWindow}
-                disabled={runtime.isBootstrapping}
+                disabled={runtime.isBootstrapping || runtime.isChangingAgent || isUploading}
+                focusKey={controller.activeThreadId}
                 forceExpanded
                 isCancelling={isCancelling}
                 isRunning={isRunning}
+                agentId={runtime.agentId}
+                agents={runtime.agents}
+                onAgentChange={(agentId) => { void runtime.changeAgent(agentId) }}
                 onStop={() => { void controller.cancelRun().catch(() => undefined) }}
                 modelId={runtime.modelId}
                 models={runtime.models}
@@ -160,10 +166,11 @@ export function ChatShell({
                 onSubmit={(text, files) => runtime.submit({
                   text,
                   files: files.map((file) => ({
-                    data: file,
-                    mediaType: file.type || "application/octet-stream",
-                    name: file.name,
+                    data: file.source,
+                    mediaType: file.mediaType,
+                    name: file.filename,
                   })),
+                  attachments: files,
                 })}
               />
             </div>
@@ -216,6 +223,7 @@ export function ChatShell({
                             onHitlAction={runtime.onHitlAction}
                             onRegenerate={() => controller.regenerate(message)}
                             onSetFeedback={(input) => controller.setFeedback(message, input)}
+                            resolveAttachmentContent={runtime.resolveAttachmentContent}
                             Timeline={components?.Timeline}
                           />
                         </MessageScrollerItem>
@@ -230,9 +238,13 @@ export function ChatShell({
                   <ChatComposer
                     inputContract={runtime.inputContract || LOADING_INPUT_CONTRACT}
                     contextWindow={runtime.contextWindow}
-                    disabled={runtime.isBootstrapping || hasBlockingError}
+                    disabled={runtime.isBootstrapping || runtime.isChangingAgent || hasBlockingError || isUploading}
+                    focusKey={controller.activeThreadId}
                     isCancelling={isCancelling}
                     isRunning={isRunning}
+                    agentId={runtime.agentId}
+                    agents={runtime.agents}
+                    onAgentChange={(agentId) => { void runtime.changeAgent(agentId) }}
                     onStop={() => { void controller.cancelRun().catch(() => undefined) }}
                     modelId={runtime.modelId}
                     models={runtime.models}
@@ -240,10 +252,11 @@ export function ChatShell({
                     onSubmit={(text, files) => runtime.submit({
                       text,
                       files: files.map((file) => ({
-                        data: file,
-                        mediaType: file.type || "application/octet-stream",
-                        name: file.name,
+                        data: file.source,
+                        mediaType: file.mediaType,
+                        name: file.filename,
                       })),
+                      attachments: files,
                     })}
                     utilityRow="below"
                   />

package/scaffold/src/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { Slot } from "radix-ui"
 import { cn } from "../../lib/utils"
 
 const buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-4xl border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "group/button inline-flex shrink-0 items-center justify-center rounded-4xl border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {

package/scaffold/src/components/ui/dropdown-menu.tsx

@@ -246,7 +246,7 @@ function DropdownMenuSubContent({
   return (
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"
-      className={cn("z-50 min-w-36 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-3xl bg-popover p-1.5 text-popover-foreground shadow-lg ring-1 ring-foreground/5 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:ring-foreground/10 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+      className={cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-36 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-3xl bg-popover p-1.5 text-popover-foreground shadow-lg ring-1 ring-foreground/5 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:ring-foreground/10 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
       {...props}
     />
   )

package/scaffold/src/components/ui/sidebar.tsx

@@ -451,7 +451,7 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
 }
 
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-xl px-3 py-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! 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 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
+  "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-xl px-3 py-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! 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 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
   {
     variants: {
       variant: {
@@ -540,7 +540,7 @@ function SidebarMenuAction({
       className={cn(
         "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-xl p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-2 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
         showOnHover &&
-          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0",
+          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0",
         className
       )}
       {...props}
@@ -557,7 +557,7 @@ function SidebarMenuBadge({
       data-slot="sidebar-menu-badge"
       data-sidebar="menu-badge"
       className={cn(
-        "pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-xl px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground",
+        "pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-xl px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
         className
       )}
       {...props}
@@ -641,7 +641,7 @@ function SidebarMenuSubButton({
       data-size={size}
       data-active={isActive}
       className={cn(
-        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-xl px-3 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden 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 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-xl px-3 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden 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 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
         className
       )}
       {...props}