@agents24/chat-react 0.5.6 → 0.5.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agents24/chat-react",
-  "version": "0.5.6",
+  "version": "0.5.7",
   "description": "Accessible web UI and complete default layout for Agents24 chat applications.",
   "license": "MIT",
   "repository": {

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

@@ -1,7 +1,7 @@
 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, ChatAttachmentRows, type ChatAttachmentContentResolver } from "@agents24/chat-react/ui"
+import { AgentChatDefaultActions, AgentChatUserMessageActionRow, ChatAttachmentRows, type ChatAttachmentContentResolver } from "@agents24/chat-react/ui"
 import * as React from "react"
 
 import { MessageParts } from "./message-parts"
@@ -37,7 +37,7 @@ export function ChatMessage({
   const isUser = message.role === "user"
   return (
     <Message align={isUser ? "end" : "start"}>
-      <MessageContent>
+      <MessageContent className={isUser ? "gap-0" : undefined}>
         {isUser && message.attachments?.length ? (
           <ChatAttachmentRows
             attachments={message.attachments}
@@ -56,6 +56,16 @@ export function ChatMessage({
             />
           </BubbleContent>
         </Bubble>
+        {isUser && (
+          <AgentChatUserMessageActionRow>
+            <AgentChatDefaultActions
+              handlers={{
+                onCopy: (content) => { void navigator.clipboard.writeText(content).catch(() => undefined) },
+              }}
+              message={message}
+            />
+          </AgentChatUserMessageActionRow>
+        )}
         {!isUser && message.isFinal !== false && (
           <MessageFooter className="gap-1 opacity-70 transition-opacity group-hover/message:opacity-100">
             <AgentChatDefaultActions

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

@@ -105,6 +105,22 @@ export function ChatShell({
   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
+  const composerOverlayRef = React.useRef<HTMLDivElement>(null)
+  const [composerOverlayHeight, setComposerOverlayHeight] = React.useState(192)
+
+  React.useEffect(() => {
+    const overlay = composerOverlayRef.current
+    if (!overlay || isEmptyState) return
+
+    const updateHeight = () => {
+      setComposerOverlayHeight(Math.ceil(overlay.getBoundingClientRect().height))
+    }
+
+    updateHeight()
+    const resizeObserver = new ResizeObserver(updateHeight)
+    resizeObserver.observe(overlay)
+    return () => resizeObserver.disconnect()
+  }, [isEmptyState])
 
   return (
     <SidebarProvider
@@ -127,7 +143,7 @@ export function ChatShell({
       />}
       <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"
+          className="flex h-12 shrink-0 items-center gap-2 border-b border-border/50 px-3 sm:px-4"
           data-agents24-chat-header=""
         >
           <CollapsedHeaderActions onNew={runtime.newThread} />
@@ -184,7 +200,8 @@ export function ChatShell({
                 <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"
+                      className="mx-auto w-full max-w-3xl gap-3 px-4 pt-8 pb-0 sm:px-6 sm:pt-12"
+                      style={{ paddingBottom: composerOverlayHeight + 72 }}
                     >
                       {controller.hasOlderTurns && (
                         <Button className="self-center" variant="ghost" size="sm" disabled={controller.isLoadingOlder} onClick={() => { void controller.loadOlder().catch(() => undefined) }}>
@@ -231,36 +248,47 @@ export function ChatShell({
                     </MessageScrollerContent>
                   </MessageScrollerViewport>
                   <TurnOutline messages={controller.messages} />
-                  <MessageScrollerButton />
                 </MessageScroller>
+
+                <div
+                  ref={composerOverlayRef}
+                  className="pointer-events-none absolute inset-x-0 bottom-0 z-30 overflow-visible pt-10"
+                  style={{
+                    background: "linear-gradient(to bottom, transparent 0%, color-mix(in oklch, var(--background) 85%, transparent) 45%, var(--background) 65%, var(--background) 100%)",
+                  }}
+                >
+                  <div className="pointer-events-auto absolute inset-x-0 top-0 flex -translate-y-full justify-center pb-3">
+                    <MessageScrollerButton className="!relative !inset-auto !translate-x-0 rtl:!translate-x-0" />
+                  </div>
+                  <div className="pointer-events-auto">
+                    <ChatComposer
+                      inputContract={runtime.inputContract || LOADING_INPUT_CONTRACT}
+                      contextWindow={runtime.contextWindow}
+                      disabled={runtime.isBootstrapping || runtime.isChangingAgent || hasBlockingError || isUploading}
+                      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}
+                      onModelChange={runtime.changeModel}
+                      onSubmit={(text, files) => runtime.submit({
+                        text,
+                        files: files.map((file) => ({
+                          data: file.source,
+                          mediaType: file.mediaType,
+                          name: file.filename,
+                        })),
+                        attachments: files,
+                      })}
+                      utilityRow="below"
+                    />
+                  </div>
+                </div>
               </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 || runtime.isChangingAgent || hasBlockingError || isUploading}
-                    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}
-                    onModelChange={runtime.changeModel}
-                    onSubmit={(text, files) => runtime.submit({
-                      text,
-                      files: files.map((file) => ({
-                        data: file.source,
-                        mediaType: file.mediaType,
-                        name: file.filename,
-                      })),
-                      attachments: files,
-                    })}
-                    utilityRow="below"
-                  />
-              </div>
             </>
           )}
         </section>

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

@@ -1,73 +1,31 @@
+import { LatestThreadScroller, type LatestThreadScrollerOutlineItem } from "@agents24/chat-react"
 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) => {
+function turnsFromMessages(messages: ChatMessage[]): LatestThreadScrollerOutlineItem[] {
+  return messages.reduce<LatestThreadScrollerOutlineItem[]>((turns, message) => {
     if (message.role === "user") {
-      turns.push({ id: message.id, label: message.content.trim() || `Turn ${turns.length + 1}`, messageIds: [message.id], response: "" })
+      turns.push({
+        id: message.id,
+        label: message.content.trim() || `Turn ${turns.length + 1}`,
+        messageIds: [message.id],
+        responsePreview: "",
+      })
     } else if (turns.length) {
       const turn = turns[turns.length - 1]
-      turn.messageIds.push(message.id)
-      if (!turn.response) turn.response = message.content.trim()
+      turn.messageIds?.push(message.id)
+      if (!turn.responsePreview) turn.responsePreview = 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>
+    <LatestThreadScroller.Outline
+      items={turnsFromMessages(messages)}
+      minSideGutterForRail={0}
+      side="left"
+      verticalOffset="3.5rem"
+    />
   )
 }

package/scaffold/src/components/ui/message-scroller.tsx

@@ -55,7 +55,7 @@ function MessageScrollerContent({
   return (
     <MessageScrollerPrimitive.Content
       data-slot="message-scroller-content"
-      className={cn("flex h-max min-h-full flex-col gap-8", className)}
+      className={cn("flex h-max min-h-full flex-col gap-3", className)}
       {...props}
     />
   )

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

@@ -74,7 +74,7 @@ function MessageFooter({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="message-footer"
       className={cn(
-        "flex max-w-full min-w-0 items-center px-3.5 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end",
+        "flex max-w-full min-w-0 items-center pl-3.5 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end",
         className
       )}
       {...props}

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

@@ -215,7 +215,7 @@ function Sidebar({
           // Adjust the padding for floating and inset variants.
           variant === "floating" || variant === "inset"
             ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
-            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+            : "border-border/50 group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
           className
         )}
         {...props}