@agents24/chat-react 0.4.0 → 0.5.1

package/scaffold/src/components/chat/thread-sidebar.tsx

@@ -0,0 +1,114 @@
+import { getThreadActivity, type StoredChatThread } from "@agents24/react"
+import { LoaderCircle, SquarePen, Trash2 } from "lucide-react"
+import type { Agents24ChatIdentity } from "../../identity"
+import { IdentityControl } from "./identity-control"
+
+import { Button } from "../ui/button"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+  useSidebar,
+} from "../ui/sidebar"
+
+type Props = {
+  activeThreadId: string | null
+  hasMore: boolean
+  isLoading: boolean
+  isLoadingMore: boolean
+  onDelete: (threadId: string) => Promise<void>
+  onLoadMore: () => Promise<void>
+  onNew: () => void
+  onOpen: (threadId: string) => Promise<void>
+  threads: StoredChatThread[]
+  identity: Agents24ChatIdentity
+}
+
+function ThreadStatus({ thread }: { thread: StoredChatThread }) {
+  const activity = getThreadActivity(thread)
+  if (!activity.isSpinning) return null
+  const label = activity.status === "cancelling"
+    ? "Cancelling"
+    : activity.status === "queued"
+      ? "Queued"
+      : "Running"
+  return (
+    <span
+      className="pointer-events-none absolute end-1 top-1/2 hidden size-5 -translate-y-1/2 items-center justify-center text-muted-foreground transition-opacity group-hover/menu-item:opacity-0 md:flex"
+      role="status"
+      aria-label={label}
+      title={label}
+    >
+      <LoaderCircle className="size-3.5 animate-spin" />
+    </span>
+  )
+}
+
+export function ThreadSidebar({ activeThreadId, hasMore, identity, isLoading, isLoadingMore, onDelete, onLoadMore, onNew, onOpen, threads }: Props) {
+  const { setOpenMobile } = useSidebar()
+  return (
+    <Sidebar
+      aria-label="Conversations"
+      collapsible="offcanvas"
+      data-agents24-chat-sidebar=""
+      role="navigation"
+    >
+      <SidebarHeader className="gap-1 p-2">
+        <div className="h-8 shrink-0" aria-hidden="true" />
+        <Button className="w-full justify-start" variant="ghost" onClick={() => { onNew(); setOpenMobile(false) }}><SquarePen /> New chat</Button>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {threads.map((thread) => (
+                <SidebarMenuItem key={thread.id}>
+                  <SidebarMenuButton
+                    className="pr-8 pl-3"
+                    isActive={thread.id === activeThreadId}
+                    title={String(thread.title || "New conversation")}
+                    onClick={() => { void onOpen(thread.id).catch(() => undefined); setOpenMobile(false) }}
+                  >
+                    <span className="min-w-0 truncate">{String(thread.title || "New conversation")}</span>
+                  </SidebarMenuButton>
+                  <ThreadStatus thread={thread} />
+                  <SidebarMenuAction
+                    showOnHover
+                    className="group-focus-within/menu-item:opacity-0 group-hover/menu-item:opacity-100"
+                    aria-label={`Delete ${String(thread.title || "conversation")}`}
+                    onClick={(event) => { event.stopPropagation(); if (window.confirm("Delete this conversation?")) void onDelete(thread.id).catch(() => undefined) }}
+                  >
+                    <Trash2 />
+                  </SidebarMenuAction>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+            {!isLoading && threads.length === 0 && <p className="px-2 py-8 text-center text-xs text-muted-foreground">No conversations</p>}
+            {hasMore && (
+              <Button
+                className="mt-2 w-full"
+                disabled={isLoadingMore}
+                size="sm"
+                variant="ghost"
+                onClick={() => void onLoadMore().catch(() => undefined)}
+              >
+                {isLoadingMore && <LoaderCircle className="animate-spin" />}
+                Load more
+              </Button>
+            )}
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarFooter className="w-full min-w-0 p-2"><IdentityControl identity={identity} /></SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  )
+}

package/scaffold/src/components/chat/timeline-loading.ts

@@ -0,0 +1,17 @@
+import type { AgentChatRunState, ChatMessage } from "@agents24/react"
+
+export function isScaffoldTimelineLoading({
+  activeRunId,
+  message,
+  runState,
+  streamingMessageId,
+}: {
+  activeRunId: string | null
+  message: ChatMessage
+  runState: AgentChatRunState
+  streamingMessageId: string | null
+}): boolean {
+  if (runState !== "streaming" && runState !== "reconnecting") return false
+  return message.id === streamingMessageId
+    || Boolean(message.runId && message.runId === activeRunId)
+}

package/scaffold/src/components/chat/turn-outline.tsx

@@ -0,0 +1,73 @@
+import type { ChatMessage } from "@agents24/react"
+import { useState } from "react"
+
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip"
+import { useMessageScroller, useMessageScrollerVisibility } from "../ui/message-scroller"
+import { cn } from "../../lib/utils"
+
+type Turn = { id: string; label: string; messageIds: string[]; response: string }
+
+function turnsFromMessages(messages: ChatMessage[]): Turn[] {
+  return messages.reduce<Turn[]>((turns, message) => {
+    if (message.role === "user") {
+      turns.push({ id: message.id, label: message.content.trim() || `Turn ${turns.length + 1}`, messageIds: [message.id], response: "" })
+    } else if (turns.length) {
+      const turn = turns[turns.length - 1]
+      turn.messageIds.push(message.id)
+      if (!turn.response) turn.response = message.content.trim()
+    }
+    return turns
+  }, [])
+}
+
+export function TurnOutline({ messages }: { messages: ChatMessage[] }) {
+  const turns = turnsFromMessages(messages)
+  const { scrollToMessage } = useMessageScroller()
+  const { currentAnchorId, visibleMessageIds } = useMessageScrollerVisibility()
+  const visible = new Set(visibleMessageIds)
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
+  const focusIndex = hoveredIndex ?? -1
+  if (turns.length < 2) return null
+
+  return (
+    <nav aria-label="Transcript outline" className="pointer-events-none absolute end-2 top-1/2 z-20 hidden max-h-72 w-14 -translate-y-1/2 md:block xl:end-5">
+      <div className="pointer-events-auto flex flex-col items-end gap-0.5 py-2">
+        {turns.map((turn, index) => {
+          const active = turn.messageIds.some((id) => visible.has(id) || currentAnchorId === id)
+          const distance = focusIndex >= 0 ? Math.abs(index - focusIndex) : Number.POSITIVE_INFINITY
+          const barWidth = focusIndex < 0
+            ? 12
+            : distance === 0 ? 50 : distance === 1 ? 36 : distance === 2 ? 23 : 10
+          const barOpacity = focusIndex < 0
+            ? active ? 1 : 0.4
+            : distance === 0 ? 1 : distance === 1 ? 0.78 : distance === 2 ? 0.58 : 0.36
+          return (
+            <Tooltip key={turn.id}>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  aria-label={`Jump to ${turn.label}`}
+                  className="group relative flex h-2 w-14 items-center justify-end outline-none after:pointer-events-auto after:absolute after:-inset-y-0.5 after:inset-x-0 after:content-['']"
+                  onBlur={() => setHoveredIndex(null)}
+                  onFocus={() => setHoveredIndex(index)}
+                  onMouseEnter={() => setHoveredIndex(index)}
+                  onMouseLeave={() => setHoveredIndex(null)}
+                  onClick={() => scrollToMessage(turn.id, { align: "start", behavior: "smooth" })}
+                >
+                  <span
+                    className={cn("h-0.5 rounded-full bg-muted-foreground/40 transition-[width,background-color,opacity] duration-150 ease-out group-hover:bg-foreground group-focus-visible:bg-foreground", active && "bg-foreground")}
+                    style={{ opacity: barOpacity, width: barWidth }}
+                  />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="left" className="w-64 flex-col items-stretch gap-0 overflow-hidden p-3">
+                <p className="line-clamp-2 max-w-full wrap-break-word text-sm font-medium">{turn.label}</p>
+                {turn.response && <p className="mt-1 line-clamp-2 max-w-full wrap-break-word text-xs opacity-70">{turn.response}</p>}
+              </TooltipContent>
+            </Tooltip>
+          )
+        })}
+      </div>
+    </nav>
+  )
+}

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

@@ -0,0 +1,91 @@
+import * as React from "react"
+
+export type Agents24ChatAppearance = "system" | "light" | "dark"
+export type Agents24ChatTheme = "soft" | "sharp"
+
+export type Agents24ChatAppearanceController = {
+  appearance: Agents24ChatAppearance
+  setAppearance: (appearance: Agents24ChatAppearance) => void
+}
+
+type ThemeContextValue = {
+  appearance: Agents24ChatAppearance
+  portalContainer: HTMLElement | null
+  setAppearance: (appearance: Agents24ChatAppearance) => void
+}
+
+const ThemeContext = React.createContext<ThemeContextValue | null>(null)
+const storageKey = "agents24-chat-appearance"
+
+function storedAppearance(): Agents24ChatAppearance {
+  try {
+    const stored = window.localStorage.getItem(storageKey)
+    return stored === "light" || stored === "dark" || stored === "system" ? stored : "system"
+  } catch {
+    return "system"
+  }
+}
+
+export function ThemeProvider({
+  children,
+  controller,
+  theme = "soft",
+}: {
+  children: React.ReactNode
+  controller?: Agents24ChatAppearanceController
+  theme?: Agents24ChatTheme
+}) {
+  const [internalAppearance, setInternalAppearance] = React.useState<Agents24ChatAppearance>("system")
+  const [resolvedAppearance, setResolvedAppearance] = React.useState<"light" | "dark">("light")
+  const [mounted, setMounted] = React.useState(false)
+  const [portalContainer, setPortalContainer] = React.useState<HTMLDivElement | null>(null)
+  const appearance = controller?.appearance ?? internalAppearance
+
+  React.useEffect(() => {
+    if (!controller) setInternalAppearance(storedAppearance())
+    setMounted(true)
+  }, [controller])
+
+  React.useEffect(() => {
+    if (!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,
+    )
+    apply()
+    media.addEventListener("change", apply)
+    return () => media.removeEventListener("change", apply)
+  }, [appearance, mounted])
+
+  const change = React.useCallback((next: Agents24ChatAppearance) => {
+    if (controller) {
+      controller.setAppearance(next)
+      return
+    }
+    try { window.localStorage.setItem(storageKey, next) } catch { /* storage is optional */ }
+    setInternalAppearance(next)
+  }, [controller])
+
+  return (
+    <ThemeContext.Provider value={{ appearance, portalContainer, setAppearance: change }}>
+      <div
+        ref={setPortalContainer}
+        className={`${resolvedAppearance} size-full`}
+        data-agents24-theme={theme}
+        data-agents24-theme-root=""
+      >
+        {children}
+      </div>
+    </ThemeContext.Provider>
+  )
+}
+
+export function useTheme() {
+  const context = React.useContext(ThemeContext)
+  if (!context) throw new Error("useTheme must be used inside ThemeProvider")
+  return context
+}
+
+export function useThemePortalContainer() {
+  return useTheme().portalContainer
+}

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

@@ -0,0 +1,204 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "../../lib/utils"
+import { Button } from "./button"
+
+const attachmentVariants = cva(
+  "group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-3xl border bg-card text-card-foreground transition-colors focus-within:ring-1 focus-within:ring-ring/30 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 data-[state=idle]:border-dashed",
+  {
+    variants: {
+      size: {
+        default:
+          "gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2",
+        sm: "gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5",
+        xs: "gap-1.5 rounded-2xl text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1",
+      },
+      orientation: {
+        horizontal: "min-w-40 items-center",
+        vertical: "w-24 flex-col has-data-[slot=attachment-content]:w-30",
+      },
+    },
+  }
+)
+
+function Attachment({
+  className,
+  state = "done",
+  size = "default",
+  orientation = "horizontal",
+  ...props
+}: React.ComponentProps<"div"> &
+  VariantProps<typeof attachmentVariants> & {
+    state?: "idle" | "uploading" | "processing" | "error" | "done"
+  }) {
+  return (
+    <div
+      data-slot="attachment"
+      data-state={state}
+      data-size={size}
+      data-orientation={orientation}
+      className={cn(attachmentVariants({ size, orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+const attachmentMediaVariants = cva(
+  "relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-2xl bg-muted text-foreground group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-xl group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive group-data-[orientation=vertical]/attachment:*:data-[slot=spinner]:size-6! [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5",
+  {
+    variants: {
+      variant: {
+        icon: "",
+        image:
+          "opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover",
+      },
+    },
+    defaultVariants: {
+      variant: "icon",
+    },
+  }
+)
+
+function AttachmentMedia({
+  className,
+  variant = "icon",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof attachmentMediaVariants>) {
+  return (
+    <div
+      data-slot="attachment-media"
+      data-variant={variant}
+      className={cn(attachmentMediaVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AttachmentContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="attachment-content"
+      className={cn(
+        "max-w-full min-w-0 flex-1 leading-tight group-data-[orientation=vertical]/attachment:px-1",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AttachmentTitle({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="attachment-title"
+      className={cn(
+        "block max-w-full min-w-0 truncate font-medium group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AttachmentDescription({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="attachment-description"
+      className={cn(
+        "mt-0.5 block min-w-0 truncate text-xs text-muted-foreground group-data-[state=error]/attachment:text-destructive/80",
+        "max-w-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AttachmentActions({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="attachment-actions"
+      className={cn(
+        "relative z-20 flex shrink-0 items-center group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:top-3 group-data-[orientation=vertical]/attachment:right-3 group-data-[orientation=vertical]/attachment:gap-1",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AttachmentAction({
+  className,
+  variant,
+  size = "icon-xs",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  return (
+    <Button
+      data-slot="attachment-action"
+      variant={variant ?? "ghost"}
+      size={size}
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function AttachmentTrigger({
+  className,
+  asChild = false,
+  type,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="attachment-trigger"
+      type={asChild ? undefined : (type ?? "button")}
+      className={cn("absolute inset-0 z-10 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+function AttachmentGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="attachment-group"
+      className={cn(
+        "flex min-w-0 scroll-fade-x snap-x snap-mandatory scroll-px-1 scrollbar-none gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Attachment,
+  AttachmentGroup,
+  AttachmentMedia,
+  AttachmentContent,
+  AttachmentTitle,
+  AttachmentDescription,
+  AttachmentActions,
+  AttachmentAction,
+  AttachmentTrigger,
+}

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

@@ -0,0 +1,125 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "../../lib/utils"
+
+function BubbleGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="bubble-group"
+      className={cn("flex min-w-0 flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+const bubbleVariants = cva(
+  "group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full",
+  {
+    variants: {
+      variant: {
+        default:
+          "*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80",
+        secondary:
+          "*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]",
+        muted:
+          "*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]",
+        tinted:
+          "*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]",
+        outline:
+          "*:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-background [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30",
+        ghost:
+          "border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50",
+        destructive:
+          "*:data-[slot=bubble-content]:bg-destructive/10 *:data-[slot=bubble-content]:text-destructive dark:*:data-[slot=bubble-content]:bg-destructive/20 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Bubble({
+  variant = "default",
+  align = "start",
+  className,
+  ...props
+}: React.ComponentProps<"div"> &
+  VariantProps<typeof bubbleVariants> & {
+    align?: "start" | "end"
+  }) {
+  return (
+    <div
+      data-slot="bubble"
+      data-variant={variant}
+      data-align={align}
+      className={cn(bubbleVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function BubbleContent({
+  asChild = false,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot.Root : "div"
+
+  return (
+    <Comp
+      data-slot="bubble-content"
+      className={cn(
+        "w-fit max-w-full min-w-0 overflow-hidden rounded-3xl border border-transparent px-3.5 py-2.5 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-ring/30",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const bubbleReactionsVariants = cva(
+  "absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-muted px-1.5 py-0.5 text-sm ring-3 ring-card has-[button]:p-0",
+  {
+    variants: {
+      side: {
+        top: "top-0 -translate-y-3/4",
+        bottom: "bottom-0 translate-y-3/4",
+      },
+      align: {
+        start: "left-3",
+        end: "right-3",
+      },
+    },
+    defaultVariants: {
+      side: "bottom",
+      align: "end",
+    },
+  }
+)
+
+function BubbleReactions({
+  side = "bottom",
+  align = "end",
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  align?: "start" | "end"
+  side?: "top" | "bottom"
+}) {
+  return (
+    <div
+      data-slot="bubble-reactions"
+      data-align={align}
+      data-side={side}
+      className={cn(bubbleReactionsVariants({ side, align }), className)}
+      {...props}
+    />
+  )
+}
+
+export { BubbleGroup, Bubble, BubbleContent, BubbleReactions }