From 818bfde6bedd31a22f122815e8d11dcd53cba688 Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Wed, 15 Jan 2025 23:28:00 +0000
Subject: [PATCH] refactor: simplify metadata display using ExpandableMessage

- Remove separate MetadataSection component
- Update ExpandableMessage to handle metadata display
- Clean up ChatMessage component
- Improve metadata styling with border and spacing
---
 .../components/features/chat/chat-message.tsx |  4 --
 .../features/chat/expandable-message.tsx      | 40 +++++++++++++------
 .../src/components/features/chat/messages.tsx |  2 +-
 .../features/chat/metadata-section.tsx        | 29 --------------
 4 files changed, 28 insertions(+), 47 deletions(-)
 delete mode 100644 frontend/src/components/features/chat/metadata-section.tsx

diff --git a/frontend/src/components/features/chat/chat-message.tsx b/frontend/src/components/features/chat/chat-message.tsx
index d9912132dd2ec..c3be33e76b33b 100644
--- a/frontend/src/components/features/chat/chat-message.tsx
+++ b/frontend/src/components/features/chat/chat-message.tsx
@@ -6,18 +6,15 @@ import { cn } from "#/utils/utils";
 import { ul, ol } from "../markdown/list";
 import { CopyToClipboardButton } from "#/components/shared/buttons/copy-to-clipboard-button";
 import { anchor } from "../markdown/anchor";
-import { MetadataSection } from "./metadata-section";
 
 interface ChatMessageProps {
   type: "user" | "assistant";
   message: string;
-  metadata?: Record<string, unknown>;
 }
 
 export function ChatMessage({
   type,
   message,
-  metadata,
   children,
 }: React.PropsWithChildren<ChatMessageProps>) {
   const [isHovering, setIsHovering] = React.useState(false);
@@ -72,7 +69,6 @@ export function ChatMessage({
       >
         {message}
       </Markdown>
-      {metadata && <MetadataSection metadata={metadata} />}
       {children}
     </article>
   );
diff --git a/frontend/src/components/features/chat/expandable-message.tsx b/frontend/src/components/features/chat/expandable-message.tsx
index f04c9c428354c..d5102538872b3 100644
--- a/frontend/src/components/features/chat/expandable-message.tsx
+++ b/frontend/src/components/features/chat/expandable-message.tsx
@@ -15,6 +15,7 @@ interface ExpandableMessageProps {
   message: string;
   type: string;
   success?: boolean;
+  metadata?: Record<string, unknown>;
 }
 
 export function ExpandableMessage({
@@ -22,6 +23,7 @@ export function ExpandableMessage({
   message,
   type,
   success,
+  metadata,
 }: ExpandableMessageProps) {
   const { t, i18n } = useTranslation();
   const [showDetails, setShowDetails] = useState(true);
@@ -46,7 +48,7 @@ export function ExpandableMessage({
       )}
     >
       <div className="text-sm w-full">
-        {headline && (
+        {(headline || metadata) && (
           <div className="flex flex-row justify-between items-center w-full">
             <span
               className={cn(
@@ -54,7 +56,7 @@ export function ExpandableMessage({
                 type === "error" ? "text-danger" : "text-neutral-300",
               )}
             >
-              {headline}
+              {headline || "Command Metadata"}
               <button
                 type="button"
                 onClick={() => setShowDetails(!showDetails)}
@@ -95,17 +97,29 @@ export function ExpandableMessage({
           </div>
         )}
         {showDetails && (
-          <Markdown
-            className="text-sm overflow-auto"
-            components={{
-              code,
-              ul,
-              ol,
-            }}
-            remarkPlugins={[remarkGfm]}
-          >
-            {details}
-          </Markdown>
+          <>
+            <Markdown
+              className="text-sm overflow-auto"
+              components={{
+                code,
+                ul,
+                ol,
+              }}
+              remarkPlugins={[remarkGfm]}
+            >
+              {details}
+            </Markdown>
+            {metadata && (
+              <div className="mt-4 text-sm text-neutral-300 border-t border-neutral-700 pt-4">
+                {Object.entries(metadata).map(([key, value]) => (
+                  <div key={key} className="flex gap-2">
+                    <strong className="text-neutral-400">{key}:</strong>
+                    <span>{String(value)}</span>
+                  </div>
+                ))}
+              </div>
+            )}
+          </>
         )}
       </div>
     </div>
diff --git a/frontend/src/components/features/chat/messages.tsx b/frontend/src/components/features/chat/messages.tsx
index 4ae3b70f1e50f..bf89c9a668129 100644
--- a/frontend/src/components/features/chat/messages.tsx
+++ b/frontend/src/components/features/chat/messages.tsx
@@ -21,6 +21,7 @@ export const Messages: React.FC<MessagesProps> = React.memo(
             id={message.translationID}
             message={message.content}
             success={message.success}
+            metadata={message.metadata}
           />
         );
       }
@@ -30,7 +31,6 @@ export const Messages: React.FC<MessagesProps> = React.memo(
           key={index}
           type={message.sender}
           message={message.content}
-          metadata={message.metadata}
         >
           {message.imageUrls && message.imageUrls.length > 0 && (
             <ImageCarousel size="small" images={message.imageUrls} />
diff --git a/frontend/src/components/features/chat/metadata-section.tsx b/frontend/src/components/features/chat/metadata-section.tsx
deleted file mode 100644
index 0572108a6946b..0000000000000
--- a/frontend/src/components/features/chat/metadata-section.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from "react";
-import { cn } from "#/utils/utils";
-
-interface MetadataSectionProps {
-  metadata: Record<string, unknown>;
-}
-
-export function MetadataSection({ metadata }: MetadataSectionProps) {
-  const [isExpanded, setIsExpanded] = React.useState(false);
-
-  return (
-    <div className="mt-2">
-      <button
-        type="button"
-        className="text-neutral-300 hover:text-neutral-100 text-sm"
-        onClick={() => setIsExpanded(!isExpanded)}
-      >
-        {isExpanded ? "▼" : "▶"} Show/Hide Metadata
-      </button>
-      <div className={cn("mt-2", !isExpanded && "hidden")}>
-        {Object.entries(metadata).map(([key, value]) => (
-          <div key={key} className="text-sm text-neutral-300">
-            <strong>{key}:</strong> {String(value)}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}