@agents24/chat-react 0.5.0 → 0.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agents24/chat-react",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "Accessible web UI and complete default layout for Agents24 chat applications.",
   "license": "MIT",
   "repository": {
@@ -24,16 +24,23 @@
       "import": "./dist/ui/index.js",
       "require": "./dist/ui/index.cjs"
     },
-    "./templates": {
-      "types": "./dist/templates/index.d.ts",
-      "import": "./dist/templates/index.js",
-      "require": "./dist/templates/index.cjs"
+    "./runtime": {
+      "types": "./dist/runtime/index.d.ts",
+      "import": "./dist/runtime/index.js",
+      "require": "./dist/runtime/index.cjs"
     },
+    "./scaffold": {
+      "types": "./dist/scaffold/index.d.ts",
+      "import": "./dist/scaffold/index.js",
+      "require": "./dist/scaffold/index.cjs"
+    },
+    "./scaffold/styles.css": "./scaffold/styles.css",
     "./styles.css": "./dist/styles.css",
     "./compatibility.json": "./compatibility.json"
   },
   "files": [
     "dist",
+    "scaffold",
     "compatibility.json",
     "README.md",
     "LICENSE"
@@ -45,21 +52,28 @@
   "scripts": {
     "sync:contract": "node scripts/sync-contract.mjs",
     "check:contract": "node scripts/sync-contract.mjs --check",
-    "build": "pnpm run sync:contract && tsup && tsc -p tsconfig.build.json",
+    "build": "pnpm run sync:contract && tsup && tsc -p tsconfig.build.json && tsc -p tsconfig.scaffold-build.json",
     "test": "tsx --test tests/*.test.ts",
     "check:boundaries": "node tests/check-boundaries.mjs",
     "prepack": "pnpm run build && pnpm run check:boundaries"
   },
   "dependencies": {
-    "@agents24/client": "0.2.0",
-    "@agents24/react": "0.2.0",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@shadcn/react": "0.1.0",
+    "@agents24/client": "0.2.1",
+    "@agents24/react": "0.2.1",
+    "@fontsource-variable/inter": "^5.3.0",
+    "@fontsource-variable/jetbrains-mono": "^5.3.0",
+    "@fontsource-variable/merriweather": "^5.3.0",
+    "@radix-ui/react-slot": "1.2.4",
+    "@shadcn/react": "^0.2.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "0.542.0",
-    "streamdown": "^1.5.1",
-    "tailwind-merge": "^3.6.0"
+    "radix-ui": "1.4.3",
+    "streamdown": "^2.5.0",
+    "tailwind-merge": "^3.6.0",
+    "tailwindcss": "^4.1.16",
+    "thinking-orbs": "0.2.0",
+    "tw-animate-css": "^1.4.0"
   },
   "peerDependencies": {
     "react": ">=19.0.0 <20.0.0",
@@ -69,6 +83,7 @@
     "@types/react": "^19.2.3",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
+    "shadcn": "4.13.1",
     "tsup": "^8.5.1",
     "tsx": "^4.20.6",
     "typescript": "^5.9.3"

package/scaffold/components.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "radix-luma",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "stone",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
+}

package/scaffold/manifest.json

@@ -0,0 +1,28 @@
+{
+  "schema_version": "agents24.chat-scaffold.v1",
+  "name": "agents24-agent-chat",
+  "default_preset": "b2D1FHzlY",
+  "hosted_themes": {
+    "soft": "b2D1FHzlY",
+    "sharp": "b4XdOjWBjV"
+  },
+  "description": "Canonical Shadcn source for Agents24 hosted and generated chat applications.",
+  "dependencies": {
+    "@fontsource-variable/inter": "^5.3.0",
+    "@fontsource-variable/jetbrains-mono": "^5.3.0",
+    "@fontsource-variable/merriweather": "^5.3.0",
+    "@shadcn/react": "^0.2.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "0.542.0",
+    "radix-ui": "1.4.3",
+    "streamdown": "^2.5.0",
+    "tailwind-merge": "^3.6.0",
+    "tw-animate-css": "^1.4.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.16",
+    "shadcn": "4.13.1",
+    "tailwindcss": "^4.1.16"
+  }
+}

package/scaffold/src/app.tsx

@@ -0,0 +1,71 @@
+import type { AgentClient, HitlResponse } from "@agents24/client"
+import {
+  type AgentChatActiveThreadChangeHandler,
+  type AgentChatMcpAuthorizationCompletion,
+  type AgentChatRuntimeAgent,
+  useAgentChatRuntime,
+} from "@agents24/chat-react/runtime"
+import type { HitlActionState } from "@agents24/chat-react/ui"
+import {
+  Agents24Provider,
+  type ChatHitlPart,
+  type ChatMessage,
+  type ChatPart,
+} from "@agents24/react"
+import * as React from "react"
+
+import { ChatShell } from "./components/chat/chat-shell"
+import { GUEST_CHAT_IDENTITY, type Agents24ChatIdentity } from "./identity"
+
+const createBrowserAbortController = () => new AbortController()
+
+export type Agents24ChatAppProps = {
+  activeThreadId?: string | null
+  agent?: AgentChatRuntimeAgent
+  client: AgentClient
+  completeMcpAuthorization?: AgentChatMcpAuthorizationCompletion
+  mcpRedirectUri?: string
+  modelId?: string | null
+  onActiveThreadIdChange?: AgentChatActiveThreadChangeHandler
+  onModelChange?: (modelId: string) => void
+  identity?: Agents24ChatIdentity
+  components?: Agents24ChatScaffoldComponents
+}
+
+export type Agents24ChatScaffoldComponents = {
+  Timeline?: React.ComponentType<Agents24ChatTimelineSlotProps>
+}
+
+export type ChatHitlResponse = HitlResponse
+
+export type Agents24ChatTimelineSlotProps = {
+  message: ChatMessage
+  parts: readonly ChatPart[]
+  isLoading: boolean
+  getHitlActionState: (part: ChatHitlPart) => HitlActionState | undefined
+  onHitlAction: (part: ChatHitlPart, response: ChatHitlResponse) => void
+}
+
+function RuntimeChat({
+  components,
+  identity = GUEST_CHAT_IDENTITY,
+  ...props
+}: Agents24ChatAppProps) {
+  const runtime = useAgentChatRuntime({
+    ...props,
+    mcpRedirectUri: props.mcpRedirectUri || (
+      typeof window === "undefined" ? undefined : window.location.href
+    ),
+  })
+
+  return <ChatShell components={components} identity={identity} runtime={runtime} />
+}
+
+export function App(props: Agents24ChatAppProps) {
+  const identity = props.identity || GUEST_CHAT_IDENTITY
+  return (
+    <Agents24Provider client={props.client} createAbortController={createBrowserAbortController}>
+      <RuntimeChat key={identity.state} {...props} />
+    </Agents24Provider>
+  )
+}

package/scaffold/src/chat.css

@@ -0,0 +1,54 @@
+[data-agents24-theme-root] {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-sans);
+  height: 100%;
+  overflow: hidden;
+  width: 100%;
+}
+
+[data-agents24-theme-root],
+[data-agents24-theme-root] * {
+  box-sizing: border-box;
+}
+
+[data-agents24-theme-root] .a24-message-response {
+  max-width: 100%;
+  min-width: 0;
+  padding-inline: 3px;
+  width: 100%;
+}
+
+[data-agents24-theme-root] .a24-message-response > :first-child { margin-top: 0; }
+[data-agents24-theme-root] .a24-message-response > :last-child { margin-bottom: 0; }
+[data-agents24-theme-root] .a24-message-response :is(pre, table) {
+  max-width: 100%;
+  overflow-x: auto;
+}
+[data-agents24-theme-root] .a24-message-response :is(p, li, blockquote, code) {
+  overflow-wrap: anywhere;
+}
+/* CSP-safe structural layout. Presets may change tokens, not these relationships. */
+.agents24-composer-grid {
+  grid-template-areas: "attach textarea submit";
+  grid-template-columns: auto minmax(0, 1fr) auto;
+}
+
+.agents24-composer-grid[data-expanded] {
+  grid-template-areas: "textarea textarea textarea" "attach spacer submit";
+}
+
+[data-agents24-theme-root] .agents24-composer-grid:not([data-expanded]) {
+  border-radius: var(--a24-composer-single-row-radius);
+}
+
+.agents24-composer-attach { grid-area: attach; }
+.agents24-composer-textarea { grid-area: textarea; }
+.agents24-composer-actions { grid-area: submit; }
+
+.agents24-user-message-collapsed {
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  display: -webkit-box;
+  overflow: hidden;
+}

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

@@ -0,0 +1,237 @@
+import { ArrowUp, 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select"
+import { Textarea } from "../ui/textarea"
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip"
+import { cn } from "../../lib/utils"
+
+type ChatComposerProps = {
+  inputContract: AgentChatInputContract
+  disabled?: boolean
+  contextWindow?: ContextWindow | null
+  forceExpanded?: boolean
+  isCancelling?: boolean
+  isRunning: boolean
+  modelId: string | null
+  models: Array<{ id: string; label: string }>
+  onModelChange: (modelId: string) => void
+  onStop: () => void
+  onSubmit: (text: string, files: File[]) => Promise<void>
+  utilityRow?: "inline" | "below"
+}
+
+export function ChatComposer({
+  inputContract,
+  disabled,
+  contextWindow,
+  forceExpanded = false,
+  isCancelling = false,
+  isRunning,
+  modelId,
+  models,
+  onModelChange,
+  onStop,
+  onSubmit,
+  utilityRow = "inline",
+}: ChatComposerProps) {
+  const [text, setText] = React.useState("")
+  const [files, setFiles] = React.useState<File[]>([])
+  const [attachmentError, setAttachmentError] = React.useState<string | null>(null)
+  const inputRef = React.useRef<HTMLInputElement>(null)
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null)
+  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
+  const addRecording = React.useCallback((file: File) => {
+    draftRevisionRef.current += 1
+    setFiles((current) => [...current, 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 })),
+  )
+
+  const modelSelector = models.length > 0 ? (
+    <div className="w-fit max-w-40">
+      <Select
+        disabled={disabled || isRunning}
+        onValueChange={onModelChange}
+        value={modelId || undefined}
+      >
+        <SelectTrigger aria-label="Runtime model">
+          <SelectValue placeholder="Model" />
+        </SelectTrigger>
+        <SelectContent align="start">
+          {models.map((model) => <SelectItem key={model.id} value={model.id}>{model.label}</SelectItem>)}
+        </SelectContent>
+      </Select>
+    </div>
+  ) : null
+  const hasContextWindow = Number.isFinite(Number(contextWindow?.max_tokens)) && Number(contextWindow?.max_tokens) > 0
+  const showUtilityRow = utilityRow === "below"
+
+  const submit = async () => {
+    if (disabled || isRunning || submittingRef.current || validationError) return
+    const value = text
+    const selectedFiles = files
+    const clearedRevision = draftRevisionRef.current + 1
+    draftRevisionRef.current = clearedRevision
+    submittingRef.current = true
+    setText("")
+    setFiles([])
+    textareaRef.current?.focus()
+    try {
+      await onSubmit(value, selectedFiles)
+    } catch {
+      if (draftRevisionRef.current === clearedRevision) {
+        draftRevisionRef.current += 1
+        setText(value)
+        setFiles(selectedFiles)
+      }
+    } finally {
+      submittingRef.current = false
+    }
+  }
+
+  return (
+    <div
+      className="mx-auto w-full max-w-3xl px-4 pb-[max(1rem,env(safe-area-inset-bottom))] sm:px-6"
+      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>
+      )}
+      {attachmentError || recorder.error ? <p className="mb-2 text-xs text-destructive" role="alert">{attachmentError || recorder.error}</p> : null}
+      <div
+        data-expanded={isExpanded || undefined}
+        className={cn(
+          "agents24-composer-grid grid min-w-0 items-center gap-2 rounded-xl border bg-background shadow-sm",
+          isExpanded ? "p-2" : "p-1.5",
+        )}
+      >
+        {allowAttachments ? (
+          <>
+            <input
+              ref={inputRef}
+              className="sr-only"
+              type="file"
+              multiple
+              accept={attachmentMimeTypes.join(",")}
+              onChange={(event) => {
+                const selected = Array.from(event.target.files ?? [])
+                const accepted = selected.filter((file) => (
+                  attachmentMimeTypes.includes(canonicalInputMimeType(file.type))
+                ))
+                draftRevisionRef.current += 1
+                setFiles((current) => [...current, ...accepted])
+                setAttachmentError(
+                  accepted.length === selected.length
+                    ? null
+                    : "One or more selected file types are not supported by this Agent.",
+                )
+                event.currentTarget.value = ""
+              }}
+            />
+            <div className="agents24-composer-attach flex min-w-0 items-center">
+              <Button className="bg-muted/50 text-muted-foreground hover:bg-muted hover:text-foreground" variant="ghost" size="icon" aria-label="Attach files" disabled={disabled || isRunning} onClick={() => inputRef.current?.click()}>
+                <span aria-hidden>+</span>
+              </Button>
+            </div>
+          </>
+        ) : <span aria-hidden="true" className="agents24-composer-attach" />}
+        <Textarea
+          ref={textareaRef}
+          value={text}
+          rows={1}
+          placeholder="Message the agent"
+          aria-label="Message"
+          disabled={disabled}
+          className={cn(
+            "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()
+            }
+          }}
+        />
+        <div className="agents24-composer-actions flex items-center gap-1">
+          {utilityRow === "inline" ? <AgentChatContextStatus contextWindow={contextWindow} /> : null}
+          {utilityRow === "inline" ? modelSelector : null}
+          {recordingAllowed ? (
+            <Button
+              variant={recorder.isRecording ? "default" : "ghost"}
+              size="icon"
+              aria-label={recorder.isRecording ? "Stop recording" : "Record audio"}
+              disabled={disabled || isRunning}
+              onClick={() => { if (recorder.isRecording) recorder.stop(); else void recorder.start() }}
+            >
+              {recorder.isRecording ? <Square className="fill-current" /> : <Mic />}
+            </Button>
+          ) : null}
+          {isRunning ? (
+            <Button
+              size="icon"
+              aria-label={isCancelling ? "Cancelling response" : "Stop response"}
+              disabled={disabled || isCancelling}
+              onClick={onStop}
+            >
+              {isCancelling
+                ? <LoaderCircle className="animate-spin" />
+                : <Square className="fill-current" />}
+            </Button>
+          ) : (
+            validationError ? (
+              <Tooltip tabIndex={0}>
+                <TooltipTrigger asChild>
+                  <Button size="icon" aria-label="Send message" disabled onClick={() => void submit()}><ArrowUp /></Button>
+                </TooltipTrigger>
+                <TooltipContent>{validationError}</TooltipContent>
+              </Tooltip>
+            ) : (
+              <Button size="icon" aria-label="Send message" disabled={disabled} onClick={() => void submit()}><ArrowUp /></Button>
+            )
+          )}
+        </div>
+      </div>
+      {showUtilityRow ? (
+        <div
+          aria-hidden={!modelSelector && !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>
+          <AgentChatContextStatus contextWindow={contextWindow} />
+        </div>
+      ) : null}
+    </div>
+  )
+}

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

@@ -0,0 +1,76 @@
+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 * as React from "react"
+
+import { MessageParts } from "./message-parts"
+import { Bubble, BubbleContent } from "../ui/bubble"
+import { Message, MessageContent, MessageFooter } from "../ui/message"
+import type { Agents24ChatTimelineSlotProps } from "../../app"
+
+type Props = {
+  message: ChatMessageModel
+  getHitlActionState: (part: ChatHitlPart) => AgentChatRuntimeHitlActionState | undefined
+  isLoading: boolean
+  onHitlAction: (part: ChatHitlPart, response: HitlResponse) => Promise<void>
+  onRegenerate: () => Promise<void>
+  allowFeedback: boolean
+  onSetFeedback: (
+    input: { rating: "like" | "dislike" | null; reason?: FeedbackReason | null; comment?: string | null },
+  ) => Promise<void>
+  Timeline?: React.ComponentType<Agents24ChatTimelineSlotProps>
+}
+
+export function ChatMessage({
+  allowFeedback,
+  getHitlActionState,
+  isLoading,
+  message,
+  onHitlAction,
+  onRegenerate,
+  onSetFeedback,
+  Timeline,
+}: Props) {
+  const isUser = message.role === "user"
+  return (
+    <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>
+        ) : 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"}>
+            <MessageParts
+              getHitlActionState={getHitlActionState}
+              isLoading={isLoading}
+              message={message}
+              onHitlAction={onHitlAction}
+              Timeline={Timeline}
+            />
+          </BubbleContent>
+        </Bubble>
+        {!isUser && message.isFinal !== false && (
+          <MessageFooter className="gap-1 opacity-70 transition-opacity group-hover/message:opacity-100">
+            <AgentChatDefaultActions
+              handlers={{
+                feedback: message.feedback,
+                onCopy: (content) => { void navigator.clipboard.writeText(content).catch(() => undefined) },
+                onRetry: () => onRegenerate(),
+                onSetFeedback: allowFeedback ? (_message, input) => onSetFeedback(input) : undefined,
+              }}
+              message={message}
+            />
+          </MessageFooter>
+        )}
+      </MessageContent>
+    </Message>
+  )
+}