feat: add debug info to typing dots indicator in chat (#1116)

- shows debug info for the current run - updates the displayed icon Signed-off-by: Ryan Hopper-Lowe <[email protected]>
obot-platform · Jan 6, 2025 · 9211c54 · 9211c54
1 parent 432a7bd
commit 9211c54
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 26 deletions.
diff --git a/ui/admin/app/components/chat/Message.tsx b/ui/admin/app/components/chat/Message.tsx
@@ -71,15 +71,6 @@ export const Message = React.memo(({ message }: MessageProps) => {
                     isUser ? "justify-end" : "justify-start"
                 )}
             >
-                {isUser && message.runId && (
-                    <div className="mt-3">
-                        <MessageDebug
-                            variant="secondary"
-                            runId={message.runId}
-                        />
-                    </div>
-                )}
-
                 <div
                     className={cn({
                         "border border-error bg-error-foreground rounded-xl":
@@ -137,10 +128,7 @@ export const Message = React.memo(({ message }: MessageProps) => {
 
                         {message.runId && !isUser && (
                             <div className="self-start">
-                                <MessageDebug
-                                    variant="secondary"
-                                    runId={message.runId}
-                                />
+                                <MessageDebug runId={message.runId} />
                             </div>
                         )}
 

diff --git a/ui/admin/app/components/chat/MessageDebug.tsx b/ui/admin/app/components/chat/MessageDebug.tsx
@@ -1,11 +1,11 @@
-import { CodeIcon, Maximize2Icon, Minimize2Icon } from "lucide-react";
+import { CodeIcon, InfoIcon, Maximize2Icon, Minimize2Icon } from "lucide-react";
 import { useState } from "react";
 
 import { Calls } from "~/lib/model/runs";
 import { RunsService } from "~/lib/service/api/runsService";
 
 import CallFrames from "~/components/chat/CallFrames";
-import { Button, ButtonProps } from "~/components/ui/button";
+import { Button } from "~/components/ui/button";
 import {
     Dialog,
     DialogContent,
@@ -22,10 +22,9 @@ import {
 
 type MessageDebugProps = {
     runId: string;
-    variant?: ButtonProps["variant"];
 };
 
-export function MessageDebug({ runId, variant }: MessageDebugProps) {
+export function MessageDebug({ runId }: MessageDebugProps) {
     const [runDebug, setRunDebug] = useState<Calls>({});
     const [isFullscreen, setIsFullscreen] = useState(false);
 
@@ -36,7 +35,7 @@ export function MessageDebug({ runId, variant }: MessageDebugProps) {
                     <DialogTrigger asChild>
                         <Button
                             size="icon"
-                            variant={variant}
+                            variant="ghost"
                             onClick={() => {
                                 RunsService.getRunDebugById(runId).then(
                                     (runDebug) => {
@@ -45,11 +44,11 @@ export function MessageDebug({ runId, variant }: MessageDebugProps) {
                                 );
                             }}
                         >
-                            <CodeIcon className="w-4 h-4" />
+                            <InfoIcon className="w-4 h-4" />
                         </Button>
                     </DialogTrigger>
                 </TooltipTrigger>
-                <TooltipContent>View Run Info</TooltipContent>
+                <TooltipContent>Debug Information</TooltipContent>
             </Tooltip>
 
             <DialogContent

diff --git a/ui/admin/app/components/chat/MessagePane.tsx b/ui/admin/app/components/chat/MessagePane.tsx
@@ -4,6 +4,7 @@ import { cn } from "~/lib/utils";
 
 import { useChat } from "~/components/chat/ChatContext";
 import { Message } from "~/components/chat/Message";
+import { MessageDebug } from "~/components/chat/MessageDebug";
 import { NoMessages } from "~/components/chat/NoMessages";
 import { ScrollArea } from "~/components/ui/scroll-area";
 import { TypingDots } from "~/components/ui/typing-spinner";
@@ -28,6 +29,8 @@ export function MessagePane({
 
     const isEmpty = messages.length === 0 && !readOnly && mode === "agent";
 
+    const currentRunId = messages.findLast((message) => message.runId)?.runId;
+
     return (
         <div className={cn("flex flex-col h-full", className, classNames.root)}>
             <ScrollArea
@@ -47,11 +50,18 @@ export function MessagePane({
                             <Message key={i} message={message} />
                         ))}
 
-                        <TypingDots
-                            className={cn("p-4", {
-                                invisible: !isRunning,
-                            })}
-                        />
+                        <div
+                            className={cn(
+                                "p-4 flex items-center justify-between gap-4 w-full",
+                                { invisible: !isRunning }
+                            )}
+                        >
+                            <TypingDots />
+
+                            {currentRunId && (
+                                <MessageDebug runId={currentRunId} />
+                            )}
+                        </div>
                     </div>
                 )}
             </ScrollArea>

diff --git a/ui/admin/tsconfig.json b/ui/admin/tsconfig.json
@@ -2,7 +2,7 @@
     "include": ["env.d.ts", "**/*.ts", "**/*.tsx", ".react-router/types/**/*"],
     "compilerOptions": {
         "rootDirs": [".", "./.react-router/types"],
-        "lib": ["DOM", "DOM.Iterable", "ES2022"],
+        "lib": ["DOM", "DOM.Iterable", "ES2023"],
         "types": ["@react-router/node", "vite/client"],
         "isolatedModules": true,
         "esModuleInterop": true,