@agents24/chat-react 0.5.15 → 0.5.17

package/dist/ui/tool-sessions.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { ChatModelTurnPart, ChatNodeActivityPart, ChatPart, ChatToolChild, ChatToolPart } from "../types";
+import type { ChatComputerResourceTarget, ChatModelTurnPart, ChatNodeActivityPart, ChatPart, ChatToolChild, ChatToolPart } from "../types";
 export type AgentChatToolViewMode = "closed" | "expanded";
 export type AgentChatToolTimelineSegment = {
     kind: "part";
@@ -20,10 +20,13 @@ export type AgentChatToolSlotContext = {
     isActive: boolean;
     label: string;
     part: ChatToolPart;
+    resourceTargets: readonly ChatComputerResourceTarget[];
+    openResource: (target: ChatComputerResourceTarget) => void;
 };
 export type AgentChatToolSlots = {
     onExpandedChange?: (open: boolean, part?: ChatToolPart) => void;
     onToolSelect?: (part: ChatToolPart) => void;
+    onResourceAction?: (target: ChatComputerResourceTarget, part: ChatToolPart) => void;
     renderChildTool?: (child: ChatToolChild, part: ChatToolPart) => React.ReactNode;
     renderToolAccessory?: (context: AgentChatToolSlotContext) => React.ReactNode;
     renderToolDetails?: (part: ChatToolPart) => React.ReactNode;

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@agents24/chat-react",
-  "version": "0.5.15",
+  "version": "0.5.17",
   "description": "Accessible web UI and complete default layout for Agents24 chat applications.",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/daniel5426/talmudpedia.git",
+    "url": "git+https://github.com/agents24/talmudpedia.git",
     "directory": "packages/agents24-chat-react"
   },
   "private": false,
@@ -59,8 +59,8 @@
   },
   "dependencies": {
     "@untitledui/file-icons": "0.0.9",
-    "@agents24/client": "0.2.6",
-    "@agents24/react": "0.2.6",
+    "@agents24/client": "0.2.8",
+    "@agents24/react": "0.2.8",
     "@fontsource-variable/inter": "^5.3.0",
     "@fontsource-variable/jetbrains-mono": "^5.3.0",
     "@fontsource-variable/merriweather": "^5.3.0",

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

@@ -3,9 +3,11 @@ import * as React from "react"
 import {
   AgentChatContextStatus,
   ChatAttachmentRows,
+  chatComposerAction,
   createAgentChatComposerFile,
   revokeAgentChatComposerFiles,
   useAudioRecorder,
+  useChatComposerFocus,
   type AgentChatComposerFile,
 } from "@agents24/chat-react/ui"
 import { canonicalInputMimeType, inputMimeTypes, validateAgentChatSubmission, type AgentChatInputContract } from "@agents24/chat-react/runtime"
@@ -37,6 +39,7 @@ type ChatComposerProps = {
   onAgentChange: (agentId: string) => void
   onStop: () => void
   onSubmit: (text: string, files: AgentChatComposerFile[]) => Promise<void>
+  restoredDraft?: { revision: number; text: string; files: AgentChatComposerFile[] } | null
   utilityRow?: "inline" | "below"
 }
 
@@ -56,6 +59,7 @@ export function ChatComposer({
   onAgentChange,
   onStop,
   onSubmit,
+  restoredDraft,
   utilityRow = "inline",
 }: ChatComposerProps) {
   const [text, setText] = React.useState("")
@@ -77,11 +81,13 @@ export function ChatComposer({
     revokeAgentChatComposerFiles(filesRef.current)
     revokeAgentChatComposerFiles(inFlightFilesRef.current)
   }, [])
-  React.useEffect(() => {
-    if (disabled || isRunning) return
-    const frame = window.requestAnimationFrame(() => textareaRef.current?.focus({ preventScroll: true }))
-    return () => window.cancelAnimationFrame(frame)
-  }, [disabled, focusKey, isRunning])
+  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)])
@@ -91,8 +97,9 @@ export function ChatComposer({
   const validationError = validateAgentChatSubmission(
     inputContract,
     text,
-    files.map((file) => ({ data: file.source, mediaType: file.mediaType })),
+    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)
@@ -153,7 +160,7 @@ export function ChatComposer({
   const showUtilityRow = utilityRow === "below"
 
   const submit = async () => {
-    if (disabled || isRunning || submittingRef.current || validationError) return
+    if (disabled || submittingRef.current || validationError) return
     const value = text
     const selectedFiles = files
     const clearedRevision = draftRevisionRef.current + 1
@@ -162,7 +169,7 @@ export function ChatComposer({
     inFlightFilesRef.current = selectedFiles
     setText("")
     setFiles([])
-    textareaRef.current?.focus()
+    focusComposer()
     try {
       await onSubmit(value, selectedFiles)
       revokeAgentChatComposerFiles(selectedFiles)
@@ -184,7 +191,7 @@ export function ChatComposer({
 
   return (
     <div
-      className="mx-auto w-full max-w-3xl px-4 pb-[max(1rem,env(safe-area-inset-bottom))] sm:px-6"
+      className="relative z-10 w-full pb-[max(1rem,env(safe-area-inset-bottom))]"
       data-agents24-chat-composer=""
     >
       {allowAttachments && files.length > 0 && (
@@ -235,7 +242,7 @@ export function ChatComposer({
               }}
             />
             <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()}>
+              <Button className="bg-muted/50 text-muted-foreground hover:bg-muted hover:text-foreground" variant="ghost" size="icon" aria-label="Attach files" disabled={disabled} onClick={() => inputRef.current?.click()}>
                 <span aria-hidden>+</span>
               </Button>
             </div>
@@ -277,31 +284,23 @@ export function ChatComposer({
               {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" />}
+          {action === "stop" ? (
+            <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 ? (
+          ) : validationError ? (
               <Tooltip>
                 <TooltipTrigger asChild>
                   <span tabIndex={0} aria-label={validationError}>
-                    <Button size="icon" aria-label="Send message" disabled onClick={() => void submit()}><ArrowUp /></Button>
+                    <Button size="icon" aria-label={isRunning ? "Queue message" : "Send message"} disabled onClick={() => void submit()}><ArrowUp /></Button>
                   </span>
                 </TooltipTrigger>
                 <TooltipContent>{validationError}</TooltipContent>
               </Tooltip>
             ) : (
-              <Button size="icon" aria-label="Send message" disabled={disabled} onClick={() => void submit()}><ArrowUp /></Button>
-            )
-          )}
+              <Button size="icon" aria-label={isRunning ? "Queue message" : "Send message"} disabled={disabled} onClick={() => void submit()}><ArrowUp /></Button>
+            )}
         </div>
       </div>
       {showUtilityRow ? (

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, AgentChatUserMessageActionRow, ChatAttachmentRows, type ChatAttachmentContentResolver } from "@agents24/chat-react/ui"
+import { AgentChatDefaultActions, AgentChatUserMessageActionRow, ChatAttachmentRows, useCompletionActionEntrance, type ChatAttachmentContentResolver } from "@agents24/chat-react/ui"
 import * as React from "react"
 
 import { MessageParts } from "./message-parts"
@@ -10,6 +10,7 @@ import { Message, MessageContent, MessageFooter } from "../ui/message"
 import type { Agents24ChatTimelineSlotProps } from "../../app"
 
 type Props = {
+  animateCompletion: boolean
   message: ChatMessageModel
   getHitlActionState: (part: ChatHitlPart) => AgentChatRuntimeHitlActionState | undefined
   isLoading: boolean
@@ -24,6 +25,7 @@ type Props = {
 }
 
 export function ChatMessage({
+  animateCompletion,
   allowFeedback,
   getHitlActionState,
   isLoading,
@@ -35,6 +37,8 @@ export function ChatMessage({
   Timeline,
 }: Props) {
   const isUser = message.role === "user"
+  const showCompletionActions = !isUser && message.isFinal !== false && !isLoading
+  const animateCompletionActions = useCompletionActionEntrance(showCompletionActions, message.runId, animateCompletion)
   return (
     <Message align={isUser ? "end" : "start"}>
       <MessageContent className={isUser ? "gap-0" : undefined}>
@@ -66,9 +70,10 @@ export function ChatMessage({
             />
           </AgentChatUserMessageActionRow>
         )}
-        {!isUser && message.isFinal !== false && (
+        {showCompletionActions && (
           <MessageFooter className="gap-1 opacity-70 transition-opacity group-hover/message:opacity-100">
             <AgentChatDefaultActions
+              animateCompletion={animateCompletionActions}
               handlers={{
                 feedback: message.feedback,
                 onCopy: (content) => { void navigator.clipboard.writeText(content).catch(() => undefined) },

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

@@ -3,6 +3,8 @@ import {
   type AgentChatRuntime,
 } from "@agents24/chat-react/runtime"
 import type { Agents24ChatScaffoldComponents } from "../../app"
+import type { ThreadMessage } from "@agents24/client"
+import { AgentChatQueue, queuedMessageComposerFiles, useLiveCompletionRuns, type AgentChatComposerFile } from "@agents24/chat-react/ui"
 import { CircleAlert, LoaderCircle, SquarePen, X } from "lucide-react"
 import * as React from "react"
 import type { Agents24ChatIdentity } from "../../identity"
@@ -15,13 +17,9 @@ 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"
+  LatestThreadScroller,
+  latestThreadAnchorId,
+} from "@agents24/chat-react"
 import { SidebarInset, SidebarProvider, SidebarTrigger, useSidebar } from "../ui/sidebar"
 
 const LOADING_INPUT_CONTRACT = {
@@ -95,20 +93,30 @@ export function ChatShell({
   sidebar?: React.ReactNode
 }) {
   const { controller } = runtime
+  const isUploading = controller.runState === "uploading"
   const isRunning =
     controller.runState === "streaming"
     || controller.runState === "reconnecting"
     || controller.runState === "paused"
     || controller.runState === "cancelling"
-  const isUploading = controller.runState === "uploading" || runtime.isUploading
   const isCancelling = controller.runState === "cancelling"
+  const wasLiveRun = useLiveCompletionRuns(controller.activeRunId, isRunning)
   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 latestAnchorId = latestThreadAnchorId(controller.messages)
   const composerOverlayRef = React.useRef<HTMLDivElement>(null)
   const [composerOverlayHeight, setComposerOverlayHeight] = React.useState(192)
+  const [restoredDraft, setRestoredDraft] = React.useState<{ revision: number; text: string; files: AgentChatComposerFile[] } | null>(null)
+  const draftRevisionRef = React.useRef(0)
+  const retractForEdit = React.useCallback(async (message: ThreadMessage) => {
+    const draft = await controller.retractPendingMessage(message)
+    setRestoredDraft({ revision: ++draftRevisionRef.current, text: draft.text,
+      files: queuedMessageComposerFiles(draft),
+    })
+  }, [controller])
 
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     const overlay = composerOverlayRef.current
     if (!overlay || isEmptyState) return
 
@@ -159,47 +167,11 @@ export function ChatShell({
           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 || runtime.isChangingAgent || isUploading}
-                focusKey={controller.activeThreadId}
-                forceExpanded
-                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,
-                })}
-              />
-            </div>
-          ) : (
-            <>
-              <MessageScrollerProvider
-                autoScroll
-                defaultScrollPosition="last-anchor"
-                scrollPreviousItemPeek={64}
-              >
-                <MessageScroller className="relative min-h-0 flex-1">
-                  <MessageScrollerViewport preserveScrollOnPrepend>
-                    <MessageScrollerContent
+          <LatestThreadScroller.Provider autoScroll defaultScrollPosition="last-anchor" scrollPreviousItemPeek={64}>
+            {!isEmptyState && (
+                <LatestThreadScroller.Root className="relative min-h-0 flex-1">
+                  <LatestThreadScroller.Viewport preserveScrollOnPrepend>
+                    <LatestThreadScroller.Content
                       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 }}
                     >
@@ -221,13 +193,14 @@ export function ChatShell({
                         </div>
                       )}
                       {controller.messages.map((message) => (
-                        <MessageScrollerItem
+                        <LatestThreadScroller.Item
                           key={message.id}
                           messageId={message.id}
-                          scrollAnchor={message.role === "user"}
+                          scrollAnchor={isRunning && message.id === latestAnchorId}
                           className="overflow-visible [content-visibility:visible]"
                         >
                           <ChatMessage
+                            animateCompletion={wasLiveRun(message.runId)}
                             allowFeedback={runtime.allowFeedback}
                             getHitlActionState={runtime.getHitlActionState}
                             isLoading={isScaffoldTimelineLoading({
@@ -243,29 +216,40 @@ export function ChatShell({
                             resolveAttachmentContent={runtime.resolveAttachmentContent}
                             Timeline={components?.Timeline}
                           />
-                        </MessageScrollerItem>
+                        </LatestThreadScroller.Item>
                       ))}
-                    </MessageScrollerContent>
-                  </MessageScrollerViewport>
+                    </LatestThreadScroller.Content>
+                  </LatestThreadScroller.Viewport>
                   <TurnOutline messages={controller.messages} />
-                </MessageScroller>
+                </LatestThreadScroller.Root>
+            )}
 
                 <div
                   ref={composerOverlayRef}
-                  className="pointer-events-none absolute inset-x-0 bottom-0 z-30 overflow-visible pt-10"
-                  style={{
+                  className={isEmptyState
+                    ? "pointer-events-none absolute inset-0 z-30 flex flex-col justify-center overflow-visible pb-20"
+                    : "pointer-events-none absolute inset-x-0 bottom-0 z-30 overflow-visible pt-10"}
+                  style={isEmptyState ? undefined : {
                     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">
+                  {isEmptyState ? <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> : <div className="pointer-events-auto absolute inset-x-0 top-0 flex -translate-y-full justify-center pb-3">
+                    <LatestThreadScroller.Button className="!relative !inset-auto !translate-x-0 rtl:!translate-x-0" />
+                  </div>}
+                  <div className="pointer-events-auto mx-auto w-full max-w-3xl px-4 sm:px-6">
+                    <AgentChatQueue pending={controller.pendingMessages} queue={controller.messageQueue}
+                      canSteer={controller.runState === "streaming"}
+                      onSteer={controller.steerPendingMessage} onRemove={controller.removePendingMessage}
+                      onEdit={retractForEdit} onResume={controller.resumeQueue} />
                     <ChatComposer
+                      restoredDraft={restoredDraft}
                       inputContract={runtime.inputContract || LOADING_INPUT_CONTRACT}
                       contextWindow={runtime.contextWindow}
-                      disabled={runtime.isBootstrapping || runtime.isChangingAgent || hasBlockingError || isUploading}
+                      disabled={runtime.isBootstrapping || runtime.isChangingAgent || isUploading || hasBlockingError}
                       focusKey={controller.activeThreadId}
+                      forceExpanded={isEmptyState}
                       isCancelling={isCancelling}
                       isRunning={isRunning}
                       agentId={runtime.agentId}
@@ -277,20 +261,19 @@ export function ChatShell({
                       onModelChange={runtime.changeModel}
                       onSubmit={(text, files) => runtime.submit({
                         text,
-                        files: files.map((file) => ({
-                          data: file.source,
+                        files: files.filter((file) => file.source).map((file) => ({
+                          data: file.source!,
                           mediaType: file.mediaType,
                           name: file.filename,
                         })),
+                        attachmentIds: files.flatMap((file) => file.persistedAttachmentId ? [file.persistedAttachmentId] : []),
                         attachments: files,
                       })}
-                      utilityRow="below"
+                      utilityRow={isEmptyState ? "inline" : "below"}
                     />
                   </div>
                 </div>
-              </MessageScrollerProvider>
-            </>
-          )}
+          </LatestThreadScroller.Provider>
         </section>
       </SidebarInset>
     </SidebarProvider>

package/dist/scaffold/components/ui/message-scroller.d.ts

@@ -1,10 +0,0 @@
-import * as React from "react";
-import { MessageScroller as MessageScrollerPrimitive, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from "@shadcn/react/message-scroller";
-import { Button } from "./button";
-declare function MessageScrollerProvider(props: React.ComponentProps<typeof MessageScrollerPrimitive.Provider>): import("react/jsx-runtime").JSX.Element;
-declare function MessageScroller({ className, ...props }: React.ComponentProps<typeof MessageScrollerPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
-declare function MessageScrollerViewport({ className, ...props }: React.ComponentProps<typeof MessageScrollerPrimitive.Viewport>): import("react/jsx-runtime").JSX.Element;
-declare function MessageScrollerContent({ className, ...props }: React.ComponentProps<typeof MessageScrollerPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
-declare function MessageScrollerItem({ className, scrollAnchor, ...props }: React.ComponentProps<typeof MessageScrollerPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
-declare function MessageScrollerButton({ direction, className, children, render, variant, size, ...props }: React.ComponentProps<typeof MessageScrollerPrimitive.Button> & Pick<React.ComponentProps<typeof Button>, "variant" | "size">): import("react/jsx-runtime").JSX.Element;
-export { MessageScrollerProvider, MessageScroller, MessageScrollerViewport, MessageScrollerContent, MessageScrollerItem, MessageScrollerButton, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility, };

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

@@ -1,129 +0,0 @@
-import * as React from "react"
-import {
-  MessageScroller as MessageScrollerPrimitive,
-  useMessageScroller,
-  useMessageScrollerScrollable,
-  useMessageScrollerVisibility,
-} from "@shadcn/react/message-scroller"
-
-import { cn } from "../../lib/utils"
-import { Button } from "./button"
-import { ArrowDownIcon } from "lucide-react"
-
-function MessageScrollerProvider(
-  props: React.ComponentProps<typeof MessageScrollerPrimitive.Provider>
-) {
-  return <MessageScrollerPrimitive.Provider {...props} />
-}
-
-function MessageScroller({
-  className,
-  ...props
-}: React.ComponentProps<typeof MessageScrollerPrimitive.Root>) {
-  return (
-    <MessageScrollerPrimitive.Root
-      data-slot="message-scroller"
-      className={cn(
-        "group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function MessageScrollerViewport({
-  className,
-  ...props
-}: React.ComponentProps<typeof MessageScrollerPrimitive.Viewport>) {
-  return (
-    <MessageScrollerPrimitive.Viewport
-      data-slot="message-scroller-viewport"
-      className={cn(
-        "size-full min-h-0 min-w-0 scroll-fade-b overflow-y-auto overscroll-contain contain-content [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function MessageScrollerContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof MessageScrollerPrimitive.Content>) {
-  return (
-    <MessageScrollerPrimitive.Content
-      data-slot="message-scroller-content"
-      className={cn("flex h-max min-h-full flex-col gap-3", className)}
-      {...props}
-    />
-  )
-}
-
-function MessageScrollerItem({
-  className,
-  scrollAnchor = false,
-  ...props
-}: React.ComponentProps<typeof MessageScrollerPrimitive.Item>) {
-  return (
-    <MessageScrollerPrimitive.Item
-      data-slot="message-scroller-item"
-      scrollAnchor={scrollAnchor}
-      className={cn(
-        "min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function MessageScrollerButton({
-  direction = "end",
-  className,
-  children,
-  render,
-  variant = "secondary",
-  size = "icon-sm",
-  ...props
-}: React.ComponentProps<typeof MessageScrollerPrimitive.Button> &
-  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
-  return (
-    <MessageScrollerPrimitive.Button
-      data-slot="message-scroller-button"
-      data-direction={direction}
-      data-variant={variant}
-      data-size={size}
-      direction={direction}
-      className={cn(
-        "absolute inset-s-1/2 -translate-x-1/2 border-border bg-background text-foreground transition-[translate,scale,opacity] duration-200 hover:bg-muted hover:text-foreground data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full rtl:translate-x-1/2 data-[direction=start]:[&_svg]:rotate-180",
-        className
-      )}
-      render={render ?? <Button variant={variant} size={size} />}
-      {...props}
-    >
-      {children ?? (
-        <>
-          <ArrowDownIcon
-          />
-          <span className="sr-only">
-            {direction === "end" ? "Scroll to end" : "Scroll to start"}
-          </span>
-        </>
-      )}
-    </MessageScrollerPrimitive.Button>
-  )
-}
-
-export {
-  MessageScrollerProvider,
-  MessageScroller,
-  MessageScrollerViewport,
-  MessageScrollerContent,
-  MessageScrollerItem,
-  MessageScrollerButton,
-  useMessageScroller,
-  useMessageScrollerScrollable,
-  useMessageScrollerVisibility,
-}