create-agents24-app 0.2.26 → 0.2.27

package/dist/scaffold/inherit.css

@@ -0,0 +1,4 @@
+@import "@agents24/chat-react/styles.css";
+@import "tw-animate-css";
+@import "./src/chat.css";
+@source "./src/**/*.{ts,tsx}";

package/dist/scaffold/src/app.tsx

@@ -15,6 +15,7 @@ import {
 } from "@agents24/react"
 import * as React from "react"
 
+import type { Agents24ChatComposerProps } from "./components/chat/chat-composer"
 import { ChatShell } from "./components/chat/chat-shell"
 import { GUEST_CHAT_IDENTITY, type Agents24ChatIdentity } from "./identity"
 
@@ -37,6 +38,7 @@ export type Agents24ChatAppProps = {
 
 export type Agents24ChatScaffoldComponents = {
   Timeline?: React.ComponentType<Agents24ChatTimelineSlotProps>
+  Composer?: React.ComponentType<Agents24ChatComposerProps>
 }
 
 export type ChatHitlResponse = HitlResponse

package/dist/scaffold/src/chat.css

@@ -64,3 +64,27 @@
   display: -webkit-box;
   overflow: hidden;
 }
+
+/* Host theme mode changes no document tokens or appearance. */
+[data-agents24-theme-root][data-agents24-theme="inherit"] {
+  --a24-composer-single-row-radius: var(--radius-xl, var(--radius, .75rem));
+  font-family: inherit;
+}
+[data-agents24-theme-root][data-agents24-theme="inherit"] :focus-visible {
+  outline: 2px solid var(--ring, currentColor) !important;
+  outline-offset: 2px;
+}
+[data-agents24-theme-root][data-agents24-theme="inherit"] .a24-context-status__popover {
+  background: var(--popover, var(--background));
+  color: var(--popover-foreground, var(--foreground));
+}
+
+[data-agents24-theme-root][data-agents24-theme="inherit"] [data-slot="button"] {
+  border-radius: var(--radius);
+}
+[data-agents24-theme-root][data-agents24-theme="inherit"] .a24-context-status__popover {
+  border-color: var(--border);
+}
+[data-agents24-theme-root][data-agents24-theme="inherit"] .a24-context-status__popover > span:not(.a24-context-status__sr-only) {
+  color: var(--muted-foreground);
+}

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

@@ -3,14 +3,10 @@ import * as React from "react"
 import {
   AgentChatContextStatus,
   ChatAttachmentRows,
-  chatComposerAction,
-  createAgentChatComposerFile,
-  revokeAgentChatComposerFiles,
-  useAudioRecorder,
-  useChatComposerFocus,
+  useAgentChatComposer,
   type AgentChatComposerFile,
 } from "@agents24/chat-react/ui"
-import { attachmentFileAccept, inputMimeTypes, validateAgentChatSubmission, type AgentChatInputContract } from "@agents24/chat-react/runtime"
+import { type AgentChatInputContract } from "@agents24/chat-react/runtime"
 import type { ContextWindow } from "@agents24/client/protocol"
 
 import { Button } from "../ui/button"
@@ -23,7 +19,7 @@ import { Textarea } from "../ui/textarea"
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip"
 import { cn } from "../../lib/utils"
 
-type ChatComposerProps = {
+export type Agents24ChatComposerProps = {
   inputContract: AgentChatInputContract
   disabled?: boolean
   contextWindow?: ContextWindow | null
@@ -61,45 +57,14 @@ export function ChatComposer({
   onSubmit,
   restoredDraft,
   utilityRow = "inline",
-}: ChatComposerProps) {
-  const [text, setText] = React.useState("")
-  const [files, setFiles] = React.useState<AgentChatComposerFile[]>([])
-  const [attachmentError, setAttachmentError] = React.useState<string | null>(null)
+}: Agents24ChatComposerProps) {
   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)
-  }, [])
-  const focusComposer = useChatComposerFocus({ textareaRef, disabled: Boolean(disabled), focusKey, restoredDraft,
-    onRestore: (draft) => {
-    draftRevisionRef.current += 1
-    revokeAgentChatComposerFiles(filesRef.current)
-    setText(draft.text)
-    setFiles(draft.files)
-  } })
-  const addRecording = React.useCallback((file: File) => {
-    draftRevisionRef.current += 1
-    setFiles((current) => [...current, createAgentChatComposerFile(file)])
-  }, [])
-  const recorder = useAudioRecorder(addRecording)
+  const composer = useAgentChatComposer({ inputContract, disabled, isRunning, isCancelling,
+    focusKey, restoredDraft, textareaRef, onSubmit: ({ text, files }) => onSubmit(text, files) })
+  const { text, files, setText, validationError, attachmentError, recorder, recordingAllowed,
+    allowAttachments, action, submit } = composer
   const isExpanded = forceExpanded || text.includes("\n") || text.length > 62
-  const validationError = validateAgentChatSubmission(
-    inputContract,
-    text,
-    files.map((file) => ({ data: file.source || new Uint8Array(), mediaType: file.mediaType })),
-  )
-  const action = chatComposerAction({ hasDraft: Boolean(text.trim() || files.length), isRunning, isCancelling })
 
   const selectedAgent = agents.find((item) => item.id === agentId)
   const selectedModel = models.find((item) => item.id === modelId)
@@ -159,36 +124,6 @@ export function ChatComposer({
   const hasContextWindow = Number.isFinite(Number(contextWindow?.max_tokens)) && Number(contextWindow?.max_tokens) > 0
   const showUtilityRow = utilityRow === "below"
 
-  const submit = async () => {
-    if (disabled || isCancelling || submittingRef.current || validationError) return
-    const value = text
-    const selectedFiles = files
-    const clearedRevision = draftRevisionRef.current + 1
-    draftRevisionRef.current = clearedRevision
-    submittingRef.current = true
-    inFlightFilesRef.current = selectedFiles
-    setText("")
-    setFiles([])
-    focusComposer()
-    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
-    }
-  }
-
   return (
     <div
       className="relative z-10 w-full pb-[max(1rem,env(safe-area-inset-bottom))]"
@@ -198,15 +133,7 @@ export function ChatComposer({
         <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)
-              })
-            }}
+            onRemove={(attachment) => { if (attachment.id) composer.removeFile(attachment.id) }}
           />
         </div>
       )}
@@ -225,11 +152,9 @@ export function ChatComposer({
               className="sr-only"
               type="file"
               multiple
-              accept={attachmentFileAccept(attachmentMimeTypes)}
+              accept={composer.fileAccept}
               onChange={(event) => {
-                const selected = Array.from(event.target.files ?? [])
-                setFiles((current) => [...current, ...selected.map(createAgentChatComposerFile)])
-                setAttachmentError(null)
+                composer.addFiles(Array.from(event.target.files ?? []))
                 event.currentTarget.value = ""
               }}
             />
@@ -251,16 +176,8 @@ export function ChatComposer({
             "agents24-composer-textarea max-h-56 min-h-9 field-sizing-content resize-none overflow-y-auto border-0 bg-transparent px-2 shadow-none focus-visible:ring-0 dark:bg-transparent",
             isExpanded ? "py-2" : "h-9 py-2",
           )}
-          onChange={(event) => {
-            draftRevisionRef.current += 1
-            setText(event.target.value)
-          }}
-          onKeyDown={(event) => {
-            if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
-              event.preventDefault()
-              void submit()
-            }
-          }}
+          onChange={(event) => setText(event.target.value)}
+          onKeyDown={composer.onKeyDown}
         />
         <div className="agents24-composer-actions flex items-center gap-1">
           {utilityRow === "inline" ? <AgentChatContextStatus contextWindow={contextWindow} /> : null}
@@ -291,7 +208,7 @@ export function ChatComposer({
                 <TooltipContent>{validationError}</TooltipContent>
               </Tooltip>
             ) : (
-              <Button size="icon" aria-label={isRunning ? "Queue message" : "Send message"} disabled={disabled} onClick={() => void submit()}><ArrowUp /></Button>
+              <Button size="icon" aria-label={isRunning ? "Queue message" : "Send message"} disabled={disabled || !composer.canSubmit} onClick={() => void submit()}><ArrowUp /></Button>
             )}
         </div>
       </div>

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

@@ -92,6 +92,7 @@ export function ChatShell({
   runtime: AgentChatRuntime
   sidebar?: React.ReactNode
 }) {
+  const Composer = components?.Composer || ChatComposer
   const { controller } = runtime
   const isUploading = controller.runState === "uploading"
   const isRunning =
@@ -243,7 +244,7 @@ export function ChatShell({
                       canSteer={controller.runState === "streaming"}
                       onSteer={controller.steerPendingMessage} onRemove={controller.removePendingMessage}
                       onEdit={retractForEdit} onResume={controller.resumeQueue} />
-                    <ChatComposer
+                    <Composer
                       restoredDraft={restoredDraft}
                       inputContract={runtime.inputContract || LOADING_INPUT_CONTRACT}
                       contextWindow={runtime.contextWindow}

package/dist/scaffold/src/components/chat/theme-menu.tsx

@@ -11,7 +11,7 @@ const options = [
 ]
 
 export function ThemeMenu() {
-  const { appearance, setAppearance } = useTheme()
+  const { appearance, setAppearance, inherited } = useTheme()
   const [open, setOpen] = React.useState(false)
   const rootRef = React.useRef<HTMLDivElement>(null)
   const firstItemRef = React.useRef<HTMLButtonElement>(null)
@@ -35,6 +35,8 @@ export function ThemeMenu() {
     }
   }, [open])
 
+  if (inherited) return null
+
   const label = appearance === "system" ? "System" : appearance === "light" ? "Light" : "Dark"
   return (
     <div ref={rootRef} className="relative">

package/dist/scaffold/src/components/theme-provider.tsx

@@ -1,7 +1,7 @@
 import * as React from "react"
 
 export type Agents24ChatAppearance = "system" | "light" | "dark"
-export type Agents24ChatTheme = "soft" | "sharp"
+export type Agents24ChatTheme = "soft" | "sharp" | "inherit"
 
 export type Agents24ChatAppearanceController = {
   appearance: Agents24ChatAppearance
@@ -10,6 +10,7 @@ export type Agents24ChatAppearanceController = {
 
 type ThemeContextValue = {
   appearance: Agents24ChatAppearance
+  inherited: boolean
   portalContainer: HTMLElement | null
   setAppearance: (appearance: Agents24ChatAppearance) => void
 }
@@ -42,12 +43,12 @@ export function ThemeProvider({
   const appearance = controller?.appearance ?? internalAppearance
 
   React.useEffect(() => {
-    if (!controller) setInternalAppearance(storedAppearance())
+    if (theme !== "inherit" && !controller) setInternalAppearance(storedAppearance())
     setMounted(true)
-  }, [controller])
+  }, [controller, theme])
 
   React.useEffect(() => {
-    if (!mounted || typeof window === "undefined" || typeof window.matchMedia !== "function") return
+    if (theme === "inherit" || !mounted || typeof window === "undefined" || typeof window.matchMedia !== "function") return
     const media = window.matchMedia("(prefers-color-scheme: dark)")
     const apply = () => setResolvedAppearance(
       appearance === "system" ? media.matches ? "dark" : "light" : appearance,
@@ -55,22 +56,23 @@ export function ThemeProvider({
     apply()
     media.addEventListener("change", apply)
     return () => media.removeEventListener("change", apply)
-  }, [appearance, mounted])
+  }, [appearance, mounted, theme])
 
   const change = React.useCallback((next: Agents24ChatAppearance) => {
+    if (theme === "inherit") return
     if (controller) {
       controller.setAppearance(next)
       return
     }
     try { window.localStorage.setItem(storageKey, next) } catch { /* storage is optional */ }
     setInternalAppearance(next)
-  }, [controller])
+  }, [controller, theme])
 
   return (
-    <ThemeContext.Provider value={{ appearance, portalContainer, setAppearance: change }}>
+    <ThemeContext.Provider value={{ appearance, inherited: theme === "inherit", portalContainer, setAppearance: change }}>
       <div
         ref={setPortalContainer}
-        className={`${resolvedAppearance} size-full`}
+        className={theme === "inherit" ? "size-full" : `${resolvedAppearance} size-full`}
         data-agents24-theme={theme}
         data-agents24-theme-root=""
       >

package/dist/scaffold/src/index.css

@@ -54,7 +54,7 @@
   --font-mono: var(--a24-font-mono);
 }
 
-[data-agents24-theme-root] {
+[data-agents24-theme-root]:not([data-agents24-theme="inherit"]) {
   color-scheme: light;
   --a24-font-heading: 'Inter Variable', sans-serif;
   --a24-font-sans: 'Inter Variable', sans-serif;
@@ -100,7 +100,7 @@
   --chart-5: oklch(0.432 0.095 166.913);
 }
 
-[data-agents24-theme-root].dark {
+[data-agents24-theme-root]:not([data-agents24-theme="inherit"]).dark {
   color-scheme: dark;
   --background: oklch(0.147 0.004 49.25);
   --foreground: oklch(0.985 0.001 106.423);
@@ -135,7 +135,7 @@
   --chart-5: oklch(0.432 0.095 166.913);
 }
 
-[data-agents24-theme-root][data-agents24-theme="sharp"] {
+[data-agents24-theme-root]:not([data-agents24-theme="inherit"])[data-agents24-theme="sharp"] {
   --a24-composer-single-row-radius: 0;
   --a24-font-heading: 'Merriweather Variable', serif;
   --a24-font-sans: 'JetBrains Mono Variable', monospace;
@@ -174,7 +174,7 @@
   --chart-5: oklch(0.45 0.085 224.283);
 }
 
-[data-agents24-theme-root][data-agents24-theme="sharp"].dark {
+[data-agents24-theme-root]:not([data-agents24-theme="inherit"])[data-agents24-theme="sharp"].dark {
   --background: oklch(0.141 0.005 285.823);
   --foreground: oklch(0.985 0 0);
   --card: oklch(0.21 0.006 285.885);
@@ -209,13 +209,13 @@
 }
 
 @layer base {
-  [data-agents24-theme-root], [data-agents24-theme-root] * {
+  [data-agents24-theme-root]:not([data-agents24-theme="inherit"]), [data-agents24-theme-root]:not([data-agents24-theme="inherit"]) * {
     @apply border-border outline-ring/50;
     box-sizing: border-box;
   }
-  [data-agents24-theme-root] {
+  [data-agents24-theme-root]:not([data-agents24-theme="inherit"]) {
     @apply size-full overflow-hidden bg-background font-sans text-foreground antialiased;
   }
-  [data-agents24-theme-root] button,
-  [data-agents24-theme-root] textarea { font: inherit; }
+  [data-agents24-theme-root]:not([data-agents24-theme="inherit"]) button,
+  [data-agents24-theme-root]:not([data-agents24-theme="inherit"]) textarea { font: inherit; }
 }

package/dist/scaffold/src/index.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 
 import { App, type Agents24ChatAppProps } from "./app"
@@ -37,3 +39,6 @@ export type {
   Agents24ChatTimelineSlotProps,
 } from "./app"
 export { TooltipProvider as Agents24ChatTooltipProvider }
+
+export { ChatComposer as Agents24ChatComposer } from "./components/chat/chat-composer"
+export type { Agents24ChatComposerProps } from "./components/chat/chat-composer"

package/dist/scaffold-manifest.json

@@ -20,9 +20,10 @@
     "tailwindcss": "^4.1.16"
   },
   "source": "packages/agents24-chat-react/scaffold",
-  "sha256": "29777d11a1fbf6d033080468041b2368cab1572f30c46e246e65725e3b32bcad",
+  "sha256": "ff79a5c99abb98c547132058504c6404d1cf9513f63ad98aaf1dfafc2dad4688",
   "files": [
     "components.json",
+    "inherit.css",
     "manifest.json",
     "src/app.tsx",
     "src/chat.css",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-agents24-app",
-  "version": "0.2.26",
+  "version": "0.2.27",
   "description": "Create a production-ready Agents24 React application.",
   "license": "MIT",
   "repository": {

package/versions.json

@@ -2,7 +2,7 @@
   "agents24": {
     "@agents24/client": "^0.2.14",
     "@agents24/react": "^0.2.18",
-    "@agents24/chat-react": "^0.5.29",
+    "@agents24/chat-react": "^0.5.30",
     "@agents24/node": "^0.5.19"
   },
   "runtime": {