Refactor ChatInterface and MetadataSection components for improved layout and functionality

- Adjusted default chat height in ChatInterface from 512px to 400px for better UI consistency.
- Enhanced MetadataSection to include expandable functionality, allowing users to toggle visibility of metadata details.
- Updated Row component to set defaultExpanded prop for MetadataSection, ensuring sections are expanded by default.

Author: Dylan Huang

vite-app/src/components/ChatInterface.tsx

@@ -8,7 +8,7 @@ interface ChatInterfaceProps {
 
 export const ChatInterface = ({ messages }: ChatInterfaceProps) => {
   const [chatWidth, setChatWidth] = useState(600); // Default width in pixels
-  const [chatHeight, setChatHeight] = useState(512); // Default height in pixels (32rem = 512px)
+  const [chatHeight, setChatHeight] = useState(400); // Default height in pixels
   const [isResizingWidth, setIsResizingWidth] = useState(false);
   const [isResizingHeight, setIsResizingHeight] = useState(false);
   const [initialWidth, setInitialWidth] = useState(0);

vite-app/src/components/MetadataSection.tsx

@@ -1,20 +1,48 @@
+import { useState } from "react";
+
 export const MetadataSection = ({
   title,
   data,
+  defaultExpanded = false,
 }: {
   title: string;
   data: any;
+  defaultExpanded?: boolean;
 }) => {
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+
   if (!data || Object.keys(data).length === 0) return null;
 
   return (
     <div className="mb-2">
-      <h4 className="font-semibold text-xs text-gray-700 mb-1">{title}</h4>
-      <div className="border border-gray-200 p-2 text-xs bg-white">
-        <pre className="whitespace-pre-wrap overflow-x-auto">
-          {JSON.stringify(data, null, 1)}
-        </pre>
+      <div
+        className="flex items-center justify-between cursor-pointer hover:bg-gray-50 p-1 rounded"
+        onClick={() => setIsExpanded(!isExpanded)}
+      >
+        <h4 className="font-semibold text-xs text-gray-700">{title}</h4>
+        <svg
+          className={`h-3 w-3 text-gray-500 transition-transform duration-200 ${
+            isExpanded ? "rotate-180" : ""
+          }`}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M19 9l-7 7-7-7"
+          />
+        </svg>
       </div>
+      {isExpanded && (
+        <div className="border border-gray-200 p-2 text-xs bg-white mt-1">
+          <pre className="whitespace-pre-wrap overflow-x-auto">
+            {JSON.stringify(data, null, 1)}
+          </pre>
+        </div>
+      )}
     </div>
   );
 };

vite-app/src/components/Row.tsx

@@ -115,12 +115,14 @@ export const Row = observer(
                     <MetadataSection
                       title="Eval Metadata"
                       data={row.eval_metadata}
+                      defaultExpanded={true}
                     />
 
                     {/* Evaluation Result */}
                     <MetadataSection
                       title="Evaluation Result"
                       data={row.evaluation_result}
+                      defaultExpanded={true}
                     />
 
                     {/* Ground Truth */}