@agents24/chat-react 0.5.4 → 0.5.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agents24/chat-react",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "description": "Accessible web UI and complete default layout for Agents24 chat applications.",
   "license": "MIT",
   "repository": {
@@ -58,8 +58,8 @@
     "prepack": "pnpm run build && pnpm run check:boundaries"
   },
   "dependencies": {
-    "@agents24/client": "0.2.2",
-    "@agents24/react": "0.2.2",
+    "@agents24/client": "0.2.3",
+    "@agents24/react": "0.2.3",
     "@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,14 @@
-import { ArrowUp, LoaderCircle, Mic, Square, X } from "lucide-react"
+import { ArrowUp, ChevronDown, LoaderCircle, Mic, Square, X } from "lucide-react"
 import * as React from "react"
 import { AgentChatContextStatus, useAudioRecorder } 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,12 +18,16 @@ 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>
   utilityRow?: "inline" | "below"
@@ -29,12 +37,16 @@ export function ChatComposer({
   inputContract,
   disabled,
   contextWindow,
+  focusKey,
   forceExpanded = false,
   isCancelling = false,
   isRunning,
+  agentId,
+  agents,
   modelId,
   models,
   onModelChange,
+  onAgentChange,
   onStop,
   onSubmit,
   utilityRow = "inline",
@@ -49,6 +61,11 @@ export function ChatComposer({
   const attachmentMimeTypes = inputMimeTypes(inputContract)
   const allowAttachments = attachmentMimeTypes.length > 0
   const recordingAllowed = inputContract.modalities.audio.recording_enabled
+  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])
@@ -61,13 +78,11 @@ export function ChatComposer({
     files.map((file) => ({ data: file, mediaType: file.type })),
   )
 
+  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 +92,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"
 
@@ -185,7 +241,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 +280,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-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 =
@@ -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}
+                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}
@@ -230,9 +236,13 @@ export function ChatShell({
                   <ChatComposer
                     inputContract={runtime.inputContract || LOADING_INPUT_CONTRACT}
                     contextWindow={runtime.contextWindow}
-                    disabled={runtime.isBootstrapping || hasBlockingError}
+                    disabled={runtime.isBootstrapping || runtime.isChangingAgent || hasBlockingError}
+                    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}

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}