@agents24/chat-react 0.5.0 → 0.5.1

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

@@ -0,0 +1,257 @@
+import {
+  agentChatRuntimeErrorMessage,
+  type AgentChatRuntime,
+} from "@agents24/chat-react/runtime"
+import type { Agents24ChatScaffoldComponents } from "../../app"
+import { CircleAlert, LoaderCircle, SquarePen, X } from "lucide-react"
+import * as React from "react"
+import type { Agents24ChatIdentity } from "../../identity"
+
+import { ChatComposer } from "./chat-composer"
+import { ChatMessage } from "./chat-message"
+import { ThemeMenu } from "./theme-menu"
+import { ThreadSidebar } from "./thread-sidebar"
+import { TurnOutline } from "./turn-outline"
+import { isScaffoldTimelineLoading } from "./timeline-loading"
+import { Button } from "../ui/button"
+import {
+  MessageScroller,
+  MessageScrollerButton,
+  MessageScrollerContent,
+  MessageScrollerItem,
+  MessageScrollerProvider,
+  MessageScrollerViewport,
+} from "../ui/message-scroller"
+import { SidebarInset, SidebarProvider, SidebarTrigger, useSidebar } from "../ui/sidebar"
+
+const LOADING_INPUT_CONTRACT = {
+  version: "agents24.runtime-inputs.v2" as const,
+  modalities: {
+    text: { enabled: false, required: false },
+    files: { enabled: false, required: false, allowed_mime_types: [] },
+    images: { enabled: false, required: false, allowed_mime_types: [] },
+    audio: { enabled: false, required: false, allowed_mime_types: [], recording_enabled: false },
+  },
+  limits: { max_attachments_per_turn: 0, max_file_bytes: 0, max_total_bytes: 0 },
+  retention: { mode: "thread_lifetime" as const },
+}
+
+function PersistentSidebarTrigger() {
+  return (
+    <div className="pointer-events-none fixed start-3 top-0 z-[60] flex h-12 items-center">
+      <SidebarTrigger className="pointer-events-auto [&_svg]:size-[18px]" />
+    </div>
+  )
+}
+
+function CollapsedHeaderActions({ onNew }: { onNew: () => void }) {
+  const { isMobile, openMobile, state } = useSidebar()
+  const sidebarVisible = isMobile ? openMobile : state === "expanded"
+  if (sidebarVisible) return null
+  return (
+    <>
+      <div className="h-8 w-17 shrink-0" aria-hidden="true" />
+      <div className="pointer-events-none fixed start-12 top-0 z-[60] flex h-12 items-center">
+        <Button className="pointer-events-auto" variant="ghost" size="icon-sm" aria-label="New chat" onClick={onNew}>
+          <SquarePen />
+        </Button>
+      </div>
+    </>
+  )
+}
+
+function OperationErrorNotice({ runtime }: { runtime: AgentChatRuntime }) {
+  const error = runtime.operationError || runtime.backgroundError
+  if (!error) return null
+  return (
+    <div className="pointer-events-none absolute inset-x-0 top-3 z-40 flex justify-center px-4">
+      <div className="pointer-events-auto flex max-w-lg items-start gap-2 rounded-lg border border-destructive/20 bg-background px-3 py-2 text-sm shadow-md" role="alert">
+        <CircleAlert className="mt-0.5 size-4 shrink-0 text-destructive" />
+        <span className="min-w-0 flex-1 wrap-break-word">
+          {agentChatRuntimeErrorMessage(error) || "The chat could not complete that action."}
+        </span>
+        <Button
+          aria-label="Dismiss error"
+          onClick={runtime.operationError ? runtime.clearOperationError : runtime.controller.clearBackgroundError}
+          size="icon-xs"
+          variant="ghost"
+        >
+          <X />
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export function ChatShell({
+  components,
+  identity,
+  runtime,
+}: {
+  components?: Agents24ChatScaffoldComponents
+  identity: Agents24ChatIdentity
+  runtime: AgentChatRuntime
+}) {
+  const { controller } = runtime
+  const isRunning =
+    controller.runState === "streaming"
+    || controller.runState === "reconnecting"
+    || controller.runState === "paused"
+    || controller.runState === "cancelling"
+    || runtime.isSubmitting
+  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)
+  const isEmptyState = controller.activeThreadId === null && controller.messages.length === 0 && !hasBlockingError
+
+  return (
+    <SidebarProvider
+      className="h-svh min-h-0 overflow-hidden"
+      data-agents24-chat=""
+      data-agents24-chat-layout=""
+    >
+      <PersistentSidebarTrigger />
+      <ThreadSidebar
+        activeThreadId={controller.activeThreadId}
+        hasMore={controller.hasMoreThreads}
+        identity={identity}
+        isLoading={controller.isLoadingThreads}
+        isLoadingMore={controller.isLoadingMoreThreads}
+        threads={controller.threads}
+        onDelete={runtime.deleteThread}
+        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"
+          data-agents24-chat-header=""
+        >
+          <CollapsedHeaderActions onNew={runtime.newThread} />
+          <div className="min-w-0 flex-1">
+            <h1 className="truncate text-sm font-medium">{String(activeTitle || "New chat")}</h1>
+          </div>
+          <ThemeMenu />
+        </header>
+
+        <section
+          aria-label="Conversation"
+          className="relative flex min-h-0 flex-1 flex-col overflow-hidden"
+          data-agents24-chat-transcript=""
+        >
+          <OperationErrorNotice runtime={runtime} />
+          {isEmptyState ? (
+            <div className="absolute inset-0 flex min-h-0 flex-col justify-center pb-20">
+              <div className="mx-auto mb-8 w-full max-w-3xl px-4 text-center sm:px-6">
+                <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">Ready when you are.</h2>
+              </div>
+              <ChatComposer
+                inputContract={runtime.inputContract || LOADING_INPUT_CONTRACT}
+                contextWindow={runtime.contextWindow}
+                disabled={runtime.isBootstrapping}
+                forceExpanded
+                isCancelling={isCancelling}
+                isRunning={isRunning}
+                onStop={() => { void controller.cancelRun().catch(() => undefined) }}
+                modelId={runtime.modelId}
+                models={runtime.models}
+                onModelChange={runtime.changeModel}
+                onSubmit={(text, files) => runtime.submit({
+                  text,
+                  files: files.map((file) => ({
+                    data: file,
+                    mediaType: file.type || "application/octet-stream",
+                    name: file.name,
+                  })),
+                })}
+              />
+            </div>
+          ) : (
+            <>
+              <MessageScrollerProvider
+                autoScroll
+                defaultScrollPosition="last-anchor"
+                scrollPreviousItemPeek={64}
+              >
+                <MessageScroller className="relative min-h-0 flex-1">
+                  <MessageScrollerViewport preserveScrollOnPrepend>
+                    <MessageScrollerContent
+                      className="mx-auto w-full max-w-3xl gap-7 px-4 pt-8 pb-16 sm:px-6 sm:pt-12"
+                    >
+                      {controller.hasOlderTurns && (
+                        <Button className="self-center" variant="ghost" size="sm" disabled={controller.isLoadingOlder} onClick={() => { void controller.loadOlder().catch(() => undefined) }}>
+                          {controller.isLoadingOlder && <LoaderCircle className="animate-spin" />} Load earlier messages
+                        </Button>
+                      )}
+                      {runtime.isBootstrapping && (
+                        <div aria-label="Loading conversation" className="flex flex-1 items-center justify-center py-24 text-muted-foreground" role="status">
+                          <LoaderCircle className="size-4 animate-spin" />
+                        </div>
+                      )}
+                      {hasBlockingError && (
+                        <div className="flex flex-1 flex-col items-center justify-center gap-3 py-24 text-center">
+                          <CircleAlert className="size-5 text-destructive" />
+                          <div><h2 className="font-medium">Couldn’t connect</h2><p className="mt-1 max-w-md text-sm text-muted-foreground">{runtime.errorMessage}</p></div>
+                          <Button variant="outline" onClick={() => void runtime.retryBootstrap()}>Try again</Button>
+                        </div>
+                      )}
+                      {controller.messages.map((message) => (
+                        <MessageScrollerItem
+                          key={message.id}
+                          messageId={message.id}
+                          scrollAnchor={message.role === "user"}
+                          className="overflow-visible [content-visibility:visible]"
+                        >
+                          <ChatMessage
+                            allowFeedback={runtime.allowFeedback}
+                            getHitlActionState={runtime.getHitlActionState}
+                            isLoading={isScaffoldTimelineLoading({
+                              activeRunId: controller.activeRunId,
+                              message,
+                              runState: controller.runState,
+                              streamingMessageId: controller.streamingMessageId,
+                            })}
+                            message={message}
+                            onHitlAction={runtime.onHitlAction}
+                            onRegenerate={() => controller.regenerate(message)}
+                            onSetFeedback={(input) => controller.setFeedback(message, input)}
+                            Timeline={components?.Timeline}
+                          />
+                        </MessageScrollerItem>
+                      ))}
+                    </MessageScrollerContent>
+                  </MessageScrollerViewport>
+                  <TurnOutline messages={controller.messages} />
+                  <MessageScrollerButton />
+                </MessageScroller>
+              </MessageScrollerProvider>
+              <div className="relative z-30 shrink-0 bg-background pt-3">
+                  <ChatComposer
+                    inputContract={runtime.inputContract || LOADING_INPUT_CONTRACT}
+                    contextWindow={runtime.contextWindow}
+                    disabled={runtime.isBootstrapping || hasBlockingError}
+                    isCancelling={isCancelling}
+                    isRunning={isRunning}
+                    onStop={() => { void controller.cancelRun().catch(() => undefined) }}
+                    modelId={runtime.modelId}
+                    models={runtime.models}
+                    onModelChange={runtime.changeModel}
+                    onSubmit={(text, files) => runtime.submit({
+                      text,
+                      files: files.map((file) => ({
+                        data: file,
+                        mediaType: file.type || "application/octet-stream",
+                        name: file.name,
+                      })),
+                    })}
+                    utilityRow="below"
+                  />
+              </div>
+            </>
+          )}
+        </section>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}

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

@@ -0,0 +1,37 @@
+import { ChevronDown, ChevronUp } from "lucide-react"
+import * as React from "react"
+
+import { Button } from "../ui/button"
+
+const collapseThreshold = 360
+export function CollapsibleUserMessage({ content }: { content: string }) {
+  const [expanded, setExpanded] = React.useState(false)
+  const contentId = React.useId()
+  const collapsible = content.length > collapseThreshold
+  const Icon = expanded ? ChevronUp : ChevronDown
+
+  return (
+    <div className="flex min-w-0 flex-col gap-2">
+      <div
+        id={contentId}
+        className={`max-w-none min-w-0 text-[15px] leading-7 whitespace-pre-wrap wrap-break-word ${collapsible && !expanded ? "agents24-user-message-collapsed" : ""}`}
+      >
+        {content}
+      </div>
+      {collapsible && (
+        <Button
+          variant="ghost"
+          size="sm"
+          type="button"
+          aria-controls={contentId}
+          aria-expanded={expanded}
+          className="h-auto w-fit px-0 py-0 text-muted-foreground hover:bg-transparent hover:text-foreground"
+          onClick={() => setExpanded((value) => !value)}
+        >
+          {expanded ? "Show less" : "Show more"}
+          <Icon />
+        </Button>
+      )}
+    </div>
+  )
+}

package/scaffold/src/components/chat/external-link-dialog.tsx

@@ -0,0 +1,48 @@
+import type { LinkSafetyModalProps } from "streamdown"
+import * as React from "react"
+
+import { Button } from "../ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../ui/dialog"
+
+export function ExternalLinkDialog({ isOpen, onClose, onConfirm, url }: LinkSafetyModalProps) {
+  const [copied, setCopied] = React.useState(false)
+
+  React.useEffect(() => {
+    if (!isOpen) setCopied(false)
+  }, [isOpen])
+
+  const copyUrl = async () => {
+    await navigator.clipboard.writeText(url)
+    setCopied(true)
+  }
+
+  const openUrl = () => {
+    onConfirm()
+    onClose()
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => { if (!open) onClose() }}>
+      <DialogContent className="max-h-[calc(100dvh-2rem)] min-w-0 overflow-hidden sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Open external link?</DialogTitle>
+          <DialogDescription>You’re about to visit an external website.</DialogDescription>
+        </DialogHeader>
+        <div className="max-h-32 overflow-auto rounded-md bg-muted p-3 font-mono text-xs wrap-break-word">
+          {url}
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => void copyUrl()}>{copied ? "Copied" : "Copy link"}</Button>
+          <Button onClick={openUrl}>Open link</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/scaffold/src/components/chat/identity-control.tsx

@@ -0,0 +1,69 @@
+import { LogIn, LogOut, UserRound } from "lucide-react"
+
+import type { Agents24ChatIdentity } from "../../identity"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu"
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar"
+
+function identityLabel(identity: Agents24ChatIdentity): string {
+  if (identity.displayName) return identity.displayName
+  if (identity.state === "authenticated") return "Signed in"
+  if (identity.state === "loading") return "Loading identity"
+  if (identity.state === "error") return "Identity unavailable"
+  if (identity.state === "signed_out") return "Sign in"
+  return "Guest"
+}
+
+function IdentityAvatar({ identity }: { identity: Agents24ChatIdentity }) {
+  const label = identityLabel(identity)
+  if (identity.avatarUrl) {
+    return <img alt="" className="size-6 rounded-full object-cover" src={identity.avatarUrl} />
+  }
+  return (
+    <span className="flex size-6 items-center justify-center rounded-full bg-sidebar-accent text-[10px] font-semibold" aria-hidden="true">
+      {identity.displayName ? identity.displayName.slice(0, 1).toUpperCase() : <UserRound className="size-3.5" />}
+    </span>
+  )
+}
+
+export function IdentityControl({ identity }: { identity: Agents24ChatIdentity }) {
+  const label = identityLabel(identity)
+  const canSignOut = identity.state === "authenticated" && Boolean(identity.onSignOut)
+  const canSignIn = (identity.state === "guest" || identity.state === "signed_out" || identity.state === "error") && Boolean(identity.onSignIn)
+  return (
+    <SidebarMenu className="w-full min-w-0">
+      <SidebarMenuItem className="w-full min-w-0">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              aria-label={`Account: ${label}`}
+              className="w-full min-w-0 justify-start"
+            >
+              <IdentityAvatar identity={identity} />
+              <span className="min-w-0 flex-1 overflow-hidden text-start">
+                <span className="block truncate text-sm font-medium">{label}</span>
+                {identity.secondaryText ? <span className="block truncate text-xs text-muted-foreground">{identity.secondaryText}</span> : null}
+              </span>
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" side="top" sideOffset={8}>
+            <DropdownMenuLabel>
+              <span className="block truncate">{label}</span>
+              {identity.secondaryText ? <span className="mt-0.5 block truncate text-xs font-normal text-muted-foreground">{identity.secondaryText}</span> : null}
+            </DropdownMenuLabel>
+            {(canSignIn || canSignOut) ? <DropdownMenuSeparator /> : null}
+            {canSignIn ? <DropdownMenuItem onSelect={() => identity.onSignIn?.()}><LogIn />Sign in</DropdownMenuItem> : null}
+            {canSignOut ? <DropdownMenuItem onSelect={() => identity.onSignOut?.()}><LogOut />Sign out</DropdownMenuItem> : null}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}

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

@@ -0,0 +1,83 @@
+import type { ChatHitlPart, ChatMessage } from "@agents24/react"
+import type { HitlResponse } from "@agents24/client"
+import {
+  AgentChatPart,
+  AgentResponseTimeline,
+} from "@agents24/chat-react/ui"
+import type { AgentChatRuntimeHitlActionState } from "@agents24/chat-react/runtime"
+import * as React from "react"
+import type { LinkSafetyConfig } from "streamdown"
+
+import { CollapsibleUserMessage } from "./collapsible-user-message"
+import { ExternalLinkDialog } from "./external-link-dialog"
+import type { Agents24ChatTimelineSlotProps } from "../../app"
+
+const linkSafety = {
+  enabled: true,
+  renderModal: (props) => <ExternalLinkDialog {...props} />,
+} satisfies LinkSafetyConfig
+
+function ScaffoldTimeline(props: Agents24ChatTimelineSlotProps) {
+  return (
+    <AgentResponseTimeline
+      {...props}
+      responseProps={{
+        className: "text-[15px] leading-7",
+        linkSafety,
+      }}
+    />
+  )
+}
+
+export function MessageParts({
+  message,
+  getHitlActionState,
+  isLoading,
+  onHitlAction,
+  Timeline = ScaffoldTimeline,
+}: {
+  message: ChatMessage
+  getHitlActionState: (part: ChatHitlPart) => AgentChatRuntimeHitlActionState | undefined
+  isLoading: boolean
+  onHitlAction: (part: ChatHitlPart, response: HitlResponse) => Promise<void>
+  Timeline?: React.ComponentType<Agents24ChatTimelineSlotProps>
+}) {
+  if (message.role === "assistant") {
+    return (
+      <Timeline
+        getHitlActionState={getHitlActionState}
+        isLoading={isLoading}
+        message={message}
+        onHitlAction={(part, response) => {
+          void onHitlAction(part, response).catch(() => undefined)
+        }}
+        parts={message.parts}
+      />
+    )
+  }
+
+  const text = message.parts
+    .filter((part) => part.kind === "text")
+    .map((part) => part.kind === "text" ? part.text : "")
+    .join("") || message.content
+  const supportingParts = message.parts.filter((part) => (
+    part.kind !== "text" && part.kind !== "data"
+  ))
+
+  return (
+    <>
+      {supportingParts.map((part) => (
+        <AgentChatPart
+          getHitlActionState={getHitlActionState}
+          key={part.id}
+          message={message}
+          onHitlAction={(hitlPart, response) => {
+            void onHitlAction(hitlPart, response).catch(() => undefined)
+          }}
+          part={part}
+        />
+      ))}
+      {text ? <CollapsibleUserMessage content={text} /> : null}
+    </>
+  )
+}

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

@@ -0,0 +1,79 @@
+import { Laptop, Moon, Sun } from "lucide-react"
+import * as React from "react"
+
+import { useTheme } from "../theme-provider"
+import { Button } from "../ui/button"
+
+const options = [
+  { value: "system" as const, label: "System", icon: Laptop },
+  { value: "light" as const, label: "Light", icon: Sun },
+  { value: "dark" as const, label: "Dark", icon: Moon },
+]
+
+export function ThemeMenu() {
+  const { appearance, setAppearance } = useTheme()
+  const [open, setOpen] = React.useState(false)
+  const rootRef = React.useRef<HTMLDivElement>(null)
+  const firstItemRef = React.useRef<HTMLButtonElement>(null)
+  const menuId = React.useId()
+  const ActiveIcon = options.find((item) => item.value === appearance)?.icon ?? Laptop
+
+  React.useEffect(() => {
+    if (!open) return
+    firstItemRef.current?.focus()
+    const closeOnOutsidePointer = (event: PointerEvent) => {
+      if (!rootRef.current?.contains(event.target as Node)) setOpen(false)
+    }
+    const closeOnEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setOpen(false)
+    }
+    document.addEventListener("pointerdown", closeOnOutsidePointer)
+    document.addEventListener("keydown", closeOnEscape)
+    return () => {
+      document.removeEventListener("pointerdown", closeOnOutsidePointer)
+      document.removeEventListener("keydown", closeOnEscape)
+    }
+  }, [open])
+
+  const label = appearance === "system" ? "System" : appearance === "light" ? "Light" : "Dark"
+  return (
+    <div ref={rootRef} className="relative">
+      <Button
+        aria-controls={menuId}
+        aria-expanded={open}
+        aria-haspopup="menu"
+        aria-label={`Appearance: ${label}`}
+        onClick={() => setOpen((value) => !value)}
+        size="icon-sm"
+        variant="ghost"
+      >
+        <ActiveIcon />
+      </Button>
+      {open ? (
+        <div
+          id={menuId}
+          className="absolute end-0 top-full z-50 mt-1 flex min-w-44 flex-col rounded-xl border bg-popover p-1 text-popover-foreground shadow-md"
+          role="menu"
+        >
+          {options.map(({ value, label: optionLabel, icon: Icon }, index) => (
+            <Button
+              key={value}
+              ref={index === 0 ? firstItemRef : undefined}
+              aria-current={appearance === value ? "true" : undefined}
+              className="w-full justify-start"
+              onClick={() => {
+                setAppearance(value)
+                setOpen(false)
+              }}
+              role="menuitem"
+              size="sm"
+              variant="ghost"
+            >
+              <Icon /> {optionLabel}
+            </Button>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  )
+}