From 2b8ded46645d7d8570478fbf73c31187b7bee08b Mon Sep 17 00:00:00 2001
From: Viktor Avelino <64113566+viktoravelino@users.noreply.github.com>
Date: Thu, 28 May 2026 11:37:27 -0400
Subject: [PATCH] fix(chat): align message card surfaces (#13354)

* fix(chat): align message card surfaces

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 .../chatComponents/ContentBlockDisplay.tsx    |  8 ++++----
 .../core/codeTabsComponent/index.tsx          |  4 ++--
 .../chat-input/components/file-preview.tsx    |  8 +++++---
 .../components/error-message.tsx              | 20 ++++++++++++-------
 .../chat-view/utils/file-preview-display.tsx  | 14 +++++++------
 .../core/sanitizedMarkdown/index.tsx          |  4 +---
 .../features/outdated-actions.spec.ts         | 10 ++++++++--
 .../features/outdated-message.spec.ts         |  5 ++++-
 src/frontend/tests/utils/select-gpt-model.ts  |  4 +++-
 9 files changed, 48 insertions(+), 29 deletions(-)

diff --git a/src/frontend/src/components/core/chatComponents/ContentBlockDisplay.tsx b/src/frontend/src/components/core/chatComponents/ContentBlockDisplay.tsx
index 78d3fc8b9f..8fac339c1a 100644
--- a/src/frontend/src/components/core/chatComponents/ContentBlockDisplay.tsx
+++ b/src/frontend/src/components/core/chatComponents/ContentBlockDisplay.tsx
@@ -147,15 +147,15 @@ export function ContentBlockDisplay({
                     <AccordionItem
                       key={toolKey}
                       value={toolKey}
-                      className="border border-border rounded-lg overflow-hidden bg-background"
+                      className="overflow-hidden rounded-xl border border-border/70 bg-primary-foreground shadow-sm"
                     >
-                      <AccordionTrigger className="hover:bg-muted hover:no-underline px-3 py-2.5">
+                      <AccordionTrigger className="rounded-lg px-4 py-3 hover:bg-background/30 hover:no-underline">
                         <div className="flex items-center justify-between w-full pr-2">
                           <div className="flex items-center gap-1 text-sm font-normal min-w-0 flex-1 overflow-hidden">
                             <div className="text-muted-foreground whitespace-nowrap flex-shrink-0">
                               {toolLabel}{" "}
                             </div>
-                            <div className="truncate flex-1 muted-foreground bg-muted py-1 px-1.5 rounded-sm text-xs max-w-fit">
+                            <div className="max-w-fit flex-1 truncate rounded-md border border-border/60 bg-transparent px-2 py-1 text-xs muted-foreground">
                               <p className="truncate font-normal font-mono">
                                 {toolTitle}
                               </p>
@@ -169,7 +169,7 @@ export function ContentBlockDisplay({
                         </div>
                       </AccordionTrigger>
                       <AccordionContent className="pt-0">
-                        <div className="text-sm text-muted-foreground px-4 pb-4 max-h-96 overflow-auto">
+                        <div className="max-h-96 overflow-auto px-4 pb-4 text-sm text-muted-foreground">
                           <ContentDisplay
                             playgroundPage={playgroundPage}
                             content={content}
diff --git a/src/frontend/src/components/core/codeTabsComponent/index.tsx b/src/frontend/src/components/core/codeTabsComponent/index.tsx
index 2f0ffb8265..9d02e7683b 100644
--- a/src/frontend/src/components/core/codeTabsComponent/index.tsx
+++ b/src/frontend/src/components/core/codeTabsComponent/index.tsx
@@ -36,7 +36,7 @@ export default function SimplifiedCodeTabComponent({
       className="mt-2 flex w-full flex-col overflow-hidden rounded-md text-left dark"
       data-testid="chat-code-tab"
     >
-      <div className="flex w-full items-center justify-between rounded-t-md border border-b-0 border-border bg-muted px-4 py-2">
+      <div className="flex w-full items-center justify-between rounded-t-md border border-b-0 border-border bg-primary-foreground px-4 py-2">
         <span className="dar text-sm font-semibold text-white">{language}</span>
         <Button
           variant="ghost"
@@ -55,7 +55,7 @@ export default function SimplifiedCodeTabComponent({
       <SyntaxHighlighter
         language={language.toLowerCase()}
         style={tomorrow}
-        className="!mt-0 h-full w-full overflow-auto !rounded-b-md !rounded-t-none border border-border text-left custom-scroll"
+        className="!mt-0 h-full w-full overflow-auto !bg-primary-foreground [&_code]:!bg-primary-foreground !rounded-b-md !rounded-t-none border border-border text-left custom-scroll"
         customStyle={maxHeight ? { maxHeight } : undefined}
       >
         {code}
diff --git a/src/frontend/src/components/core/playgroundComponent/chat-view/chat-input/components/file-preview.tsx b/src/frontend/src/components/core/playgroundComponent/chat-view/chat-input/components/file-preview.tsx
index 9495738cc2..0d6dc9e1b3 100644
--- a/src/frontend/src/components/core/playgroundComponent/chat-view/chat-input/components/file-preview.tsx
+++ b/src/frontend/src/components/core/playgroundComponent/chat-view/chat-input/components/file-preview.tsx
@@ -15,7 +15,7 @@ const FilePreview = ({ file, loading, error, onDelete }: FilePreviewProps) => {
   return (
     <div
       className={cn(
-        "relative flex h-16 w-16 items-center justify-center rounded-md border bg-muted",
+        "relative flex h-16 w-16 items-center justify-center overflow-hidden rounded-xl border border-border/70 bg-primary-foreground shadow-sm",
         error && "border-error",
       )}
     >
@@ -25,10 +25,12 @@ const FilePreview = ({ file, loading, error, onDelete }: FilePreviewProps) => {
         <img
           src={URL.createObjectURL(file)}
           alt={file.name}
-          className="h-full w-full rounded-md object-cover"
+          className="h-full w-full rounded-xl object-cover p-1"
         />
       ) : (
-        <ForwardedIconComponent name="File" className="h-6 w-6" />
+        <div className="p-3">
+          <ForwardedIconComponent name="File" className="h-6 w-6" />
+        </div>
       )}
 
       <button
diff --git a/src/frontend/src/components/core/playgroundComponent/chat-view/chat-messages/components/error-message.tsx b/src/frontend/src/components/core/playgroundComponent/chat-view/chat-messages/components/error-message.tsx
index 32f1749d4c..06fa0e053f 100644
--- a/src/frontend/src/components/core/playgroundComponent/chat-view/chat-messages/components/error-message.tsx
+++ b/src/frontend/src/components/core/playgroundComponent/chat-view/chat-messages/components/error-message.tsx
@@ -7,7 +7,7 @@ import {
   AccordionTrigger,
 } from "@/components/ui/accordion";
 import { TextShimmer } from "@/components/ui/TextShimmer";
-import { ChatMessageType, ContentBlock } from "@/types/chat";
+import type { ChatMessageType, ContentBlock } from "@/types/chat";
 import { cn } from "@/utils/utils";
 import { extractErrorMessage } from "../utils/extract-error-message";
 
@@ -29,7 +29,7 @@ function ErrorLoadingState() {
       key="loading"
       initial={{ opacity: 1 }}
       exit={{ opacity: 0 }}
-      className="flex w-full gap-4 rounded-md p-2"
+      className="flex w-full gap-4 rounded-xl border border-border/70 bg-primary-foreground p-3 shadow-sm"
     >
       <div className="relative hidden h-6 w-6 flex-shrink-0 items-center justify-center overflow-hidden rounded bg-white text-2xl @[45rem]/chat-panel:!flex border-0">
         <div className="flex h-5 w-5 items-center justify-center">
@@ -73,7 +73,7 @@ function ErrorAccordion({
   return (
     <Accordion type="single" collapsible className="w-full p-0">
       <AccordionItem value="error-details" className="border-0">
-        <AccordionTrigger className="hover:no-underline [&>svg]:hidden p-0">
+        <AccordionTrigger className="rounded-lg px-3 py-2.5 hover:bg-destructive/5 hover:no-underline [&>svg]:hidden">
           <div className="flex flex-col gap-2 w-full">
             <div className="flex items-center justify-between gap-2 w-full">
               <div className="flex items-center gap-2">
@@ -93,12 +93,18 @@ function ErrorAccordion({
           </div>
         </AccordionTrigger>
         <AccordionContent className="pt-2">
-          <div>
-            {content.field && <p className="text-xs">Field: {content.field}</p>}
+          <div className="space-y-2 px-3 pb-1">
+            {content.field && (
+              <p className="text-xs text-muted-foreground">
+                Field: {content.field}
+              </p>
+            )}
             {content.component && (
               <p
                 className={cn(
-                  closeChat ? "cursor-pointer underline text-xs" : "text-xs",
+                  closeChat
+                    ? "cursor-pointer text-sm underline underline-offset-2"
+                    : "text-sm",
                 )}
                 onClick={closeChat ? handleComponentClick : undefined}
               >
@@ -134,7 +140,7 @@ export const ErrorView = ({
           {blocks.map((block, blockIndex) => (
             <div
               key={blockIndex}
-              className="w-full rounded-md border border-border pt-[6px] pr-[6px] pb-[6px] pl-[8px] text-sm text-foreground"
+              className="w-full rounded-xl border border-border/70 bg-primary-foreground p-2 text-sm text-foreground shadow-sm ring-1 ring-inset ring-destructive/15"
               data-testid="error-card"
             >
               {block.contents.map((content, contentIndex) => {
diff --git a/src/frontend/src/components/core/playgroundComponent/chat-view/utils/file-preview-display.tsx b/src/frontend/src/components/core/playgroundComponent/chat-view/utils/file-preview-display.tsx
index e03e7538ff..30e2c8d13e 100644
--- a/src/frontend/src/components/core/playgroundComponent/chat-view/utils/file-preview-display.tsx
+++ b/src/frontend/src/components/core/playgroundComponent/chat-view/utils/file-preview-display.tsx
@@ -86,7 +86,7 @@ export default function FilePreviewDisplay({
     return (
       <div
         className={cn(
-          "relative flex h-16 w-16 items-center justify-center rounded-md border bg-muted",
+          "relative flex h-16 w-16 items-center justify-center overflow-hidden rounded-xl border border-border/70 bg-primary-foreground shadow-sm",
           error && "border-error",
           className,
         )}
@@ -97,7 +97,7 @@ export default function FilePreviewDisplay({
           <img
             src={previewUrl}
             alt={fileInfo.name}
-            className="h-full w-full rounded-md object-cover"
+            className="h-full w-full rounded-xl object-cover p-1"
             crossOrigin={file instanceof File ? undefined : "use-credentials"}
             onError={() => {
               setImageError(true);
@@ -105,7 +105,9 @@ export default function FilePreviewDisplay({
             }}
           />
         ) : (
-          <ForwardedIconComponent name="File" className="h-6 w-6" />
+          <div className="p-3">
+            <ForwardedIconComponent name="File" className="h-6 w-6" />
+          </div>
         )}
 
         {showDelete && onDelete && (
@@ -126,7 +128,7 @@ export default function FilePreviewDisplay({
   return (
     <div
       className={cn(
-        "relative flex w-full lg:w-1/2 items-center justify-center rounded-md border bg-muted",
+        "relative flex w-full overflow-hidden lg:w-1/2 items-center justify-center rounded-xl border border-border/70 bg-primary-foreground shadow-sm",
         error && "border-error",
         className,
       )}
@@ -137,7 +139,7 @@ export default function FilePreviewDisplay({
         <img
           src={previewUrl}
           alt={fileInfo.name}
-          className="h-full w-full rounded-md object-cover"
+          className="h-full w-full rounded-xl object-cover p-1"
           crossOrigin={file instanceof File ? undefined : "use-credentials"}
           onError={() => {
             setImageError(true);
@@ -145,7 +147,7 @@ export default function FilePreviewDisplay({
           }}
         />
       ) : (
-        <div className="flex flex-col items-center gap-1">
+        <div className="flex flex-col items-center gap-2 px-4 py-3 text-center">
           <ForwardedIconComponent name="File" className="h-6 w-6" />
           <span className="text-xs text-muted-foreground">
             {formatFileName(fileInfo.name, 10)}
diff --git a/src/frontend/src/components/core/sanitizedMarkdown/index.tsx b/src/frontend/src/components/core/sanitizedMarkdown/index.tsx
index f84857e36b..b70dabc89c 100644
--- a/src/frontend/src/components/core/sanitizedMarkdown/index.tsx
+++ b/src/frontend/src/components/core/sanitizedMarkdown/index.tsx
@@ -1,5 +1,4 @@
 import { useEffect, useMemo, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
 import Markdown from "react-markdown";
 import rehypeMathjax from "rehype-mathjax/browser";
 import rehypeRaw from "rehype-raw";
@@ -27,7 +26,6 @@ export const SanitizedMarkdown = ({
   emptyMessage,
   className,
 }: SanitizedMarkdownProps) => {
-  const { t } = useTranslation();
   const markdownRef = useRef<HTMLDivElement>(null);
   const [showWarning, setShowWarning] = useState(false);
 
@@ -103,7 +101,7 @@ export const SanitizedMarkdown = ({
             },
             table: ({ node, ...props }) => {
               return (
-                <div className="max-w-full overflow-hidden rounded-md border bg-muted">
+                <div className="max-w-full overflow-hidden rounded-xl border border-border/70 bg-primary-foreground shadow-sm">
                   <div className="max-h-[600px] w-full overflow-auto p-4">
                     <table className="!my-0 w-full">{props.children}</table>
                   </div>
diff --git a/src/frontend/tests/extended/features/outdated-actions.spec.ts b/src/frontend/tests/extended/features/outdated-actions.spec.ts
index c3752bdab4..3097ea29fc 100644
--- a/src/frontend/tests/extended/features/outdated-actions.spec.ts
+++ b/src/frontend/tests/extended/features/outdated-actions.spec.ts
@@ -17,7 +17,10 @@ test("user must be able to update outdated components by update all button", asy
   const flowName = `Outdated Test Flow ${Date.now()}-${Math.random()
     .toString(36)
     .slice(2, 8)}`;
-  const jsonContent = JSON.stringify({ ...JSON.parse(rawJson), name: flowName });
+  const jsonContent = JSON.stringify({
+    ...JSON.parse(rawJson),
+    name: flowName,
+  });
 
   // Create the DataTransfer and File
   const dataTransfer = await page.evaluateHandle((data) => {
@@ -105,7 +108,10 @@ test("user must be able to update outdated components by each outdated component
   const flowName = `Outdated Test Flow ${Date.now()}-${Math.random()
     .toString(36)
     .slice(2, 8)}`;
-  const jsonContent = JSON.stringify({ ...JSON.parse(rawJson), name: flowName });
+  const jsonContent = JSON.stringify({
+    ...JSON.parse(rawJson),
+    name: flowName,
+  });
 
   // Create the DataTransfer and File
   const dataTransfer = await page.evaluateHandle((data) => {
diff --git a/src/frontend/tests/extended/features/outdated-message.spec.ts b/src/frontend/tests/extended/features/outdated-message.spec.ts
index ecc61be869..2eccca4ee3 100644
--- a/src/frontend/tests/extended/features/outdated-message.spec.ts
+++ b/src/frontend/tests/extended/features/outdated-message.spec.ts
@@ -13,7 +13,10 @@ test("user must be able outdated message on error", async ({ page }) => {
   // "Basic Prompting" card or stale "Memory Chatbot" entries from sibling tests.
   const rawJson = readFileSync("tests/assets/outdated_flow.json", "utf-8");
   const flowName = `Outdated Test Flow ${Date.now()}`;
-  const jsonContent = JSON.stringify({ ...JSON.parse(rawJson), name: flowName });
+  const jsonContent = JSON.stringify({
+    ...JSON.parse(rawJson),
+    name: flowName,
+  });
 
   // Create the DataTransfer and File
   const dataTransfer = await page.evaluateHandle((data) => {
diff --git a/src/frontend/tests/utils/select-gpt-model.ts b/src/frontend/tests/utils/select-gpt-model.ts
index 0d81e27ec9..d4e324ae0c 100644
--- a/src/frontend/tests/utils/select-gpt-model.ts
+++ b/src/frontend/tests/utils/select-gpt-model.ts
@@ -44,7 +44,9 @@ const enablePreferredOpenAiModel = async (page: Page) => {
   await page.getByTestId("provider-item-OpenAI").click();
   await page.waitForTimeout(500);
 
-  const apiKeyInput = page.getByTestId("provider-variable-input-OPENAI_API_KEY");
+  const apiKeyInput = page.getByTestId(
+    "provider-variable-input-OPENAI_API_KEY",
+  );
   const checkExistingKey = await page.getByTestId("input-end-icon").count();
   if (checkExistingKey === 0 && (await apiKeyInput.count()) > 0) {
     await apiKeyInput.fill(process.env.OPENAI_API_KEY!);