fix: style

Author: Junyi-99

webapp/_webapp/src/components/message-entry-container/tools/general.tsx

@@ -90,7 +90,7 @@ export const GeneralToolCard = ({ functionName, message, animated, isCollapsed:
     <div className={cn("tool-card noselect compact", { animated: animated })}>
       <div className="flex items-center gap-1 cursor-pointer" onClick={toggleCollapse}>
         <button
-          className="text-gray-400 hover:text-gray-600 transition-colors duration-200 rounded"
+          className="text-gray-400 hover:text-gray-600 transition-colors duration-200 rounded flex"
           aria-label={isCollapsed ? "Expand" : "Collapse"}
         >
           <svg

webapp/_webapp/src/components/message-entry-container/tools/xtramcp/generate-citations.tsx

@@ -2,7 +2,7 @@ import { cn } from "@heroui/react";
 import { LoadingIndicator } from "../../../loading-indicator";
 import MarkdownComponent from "../../../markdown";
 import { useState } from "react";
-import { XtraMcpToolCardProps, parseXtraMcpToolResult, CollapseArrowButton, CollapseWrapper } from "./utils/common";
+import { XtraMcpToolCardProps, parseXtraMcpToolResult, CollapseWrapper } from "./utils/common";
 
 export const GenerateCitationsCard = ({ functionName, message, preparing, animated }: XtraMcpToolCardProps) => {
   const [isMetadataCollapsed, setIsMetadataCollapsed] = useState(false);
@@ -45,10 +45,6 @@ export const GenerateCitationsCard = ({ functionName, message, preparing, animat
           <h3 className="tool-card-title">{functionName}</h3>
           <div className="flex items-center gap-2">
             <span className="text-red-500 text-sm font-medium">Error</span>
-            <CollapseArrowButton
-              isCollapsed={isMetadataCollapsed}
-              ariaLabel={isMetadataCollapsed ? "Expand error" : "Collapse error"}
-            />
           </div>
         </div>
 
@@ -71,22 +67,37 @@ export const GenerateCitationsCard = ({ functionName, message, preparing, animat
         <div className={cn("tool-card noselect narrow", { animated: animated })}>
           {/* Header with arrow button */}
           <div
-            className="flex items-center justify-between cursor-pointer"
+            className="flex items-center cursor-pointer gap-1"
             onClick={() => setIsMetadataCollapsed(!isMetadataCollapsed)}
           >
+            <button
+              className="text-gray-400 hover:text-gray-600 transition-colors duration-200 rounded flex"
+              aria-label={isMetadataCollapsed ? "Expand" : "Collapse"}
+            >
+              <svg
+                className={cn("w-3 h-3 transition-transform duration-200 rotate-[-90deg]", {
+                  "rotate-0": !isMetadataCollapsed,
+                })}
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+              </svg>
+            </button>
             <h3 className="tool-card-title">{functionName}</h3>
-            <CollapseArrowButton
-              isCollapsed={isMetadataCollapsed}
-              ariaLabel={isMetadataCollapsed ? "Expand metadata" : "Collapse metadata"}
-            />
           </div>
 
           {/* Metadata dropdown - INSIDE the tool card */}
           {result.metadata && Object.keys(result.metadata).length > 0 && (
             <CollapseWrapper isCollapsed={isMetadataCollapsed}>
-              <div className="text-xs !text-gray-600 dark:!text-gray-400 mt-2 pt-2 border-t !border-gray-200">
+              <div className="text-xs !text-gray-600 dark:!text-gray-400 mt-2 pt-2 border-t !border-default-200 dark:!border-default-200">
                 {/* Custom metadata rendering */}
-                <div className="mb-2 italic">⚠️ [Experimental Feature] Some BibTeX entries may not be able to be generated.<br />Report if you encounter an unknown issue.</div>
+                <div className="mb-2 italic">
+                  ⚠️ [Experimental Feature] Some BibTeX entries may not be able to be generated.
+                  <br />
+                  Report if you encounter an unknown issue.
+                </div>
                 {result.metadata.total_links !== undefined && (
                   <div>
                     <span className="font-medium">Total Links/IDs/Info:</span> {result.metadata.total_links}

webapp/_webapp/src/index.css

@@ -118,7 +118,7 @@ video, canvas, audio, iframe, embed, object {
 }
 
 .tool-card.narrow {
-  @apply px-2 py-1 my-1 bg-transparent;
+  @apply !px-0 py-1 my-1 bg-transparent;
 }
 
 .tool-card.animated {
@@ -128,7 +128,7 @@ video, canvas, audio, iframe, embed, object {
 }
 
 .tool-card-title {
-  @apply text-xs font-semibold font-sans text-primary-700 tracking-wider noselect;
+  @apply text-[10px] font-semibold font-sans text-primary-700 tracking-wider noselect;
 }
 
 .tool-card-title {
@@ -737,3 +737,7 @@ video, canvas, audio, iframe, embed, object {
 [data-streamdown="mermaid-block"] {
   @apply !border-default-200 dark:!border-default-200;
 }
+
+[data-streamdown="horizontal-rule"] {
+  @apply !border-default-200 dark:!border-default-200;
+}