Fix internal server error display in frontend

This commit fixes an issue where internal server error messages were displaying the translation key (e.g., STATUS) instead of the actual translated error message.

Changes:
1. Modified ExpandableMessage component to properly handle translation keys in message content
2. Added proper detection of translation keys
3. Hides the expand/collapse arrow when there are no details to show
4. Added test for translation key handling

Author: openhands-agent

frontend/__tests__/components/chat/expandable-message.test.tsx

@@ -121,4 +121,20 @@ describe("ExpandableMessage", () => {
     renderWithProviders(<RouterStub />);
     await screen.findByTestId("out-of-credits");
   });
+  
+  it("should properly handle translation keys in message content", () => {
+    renderWithProviders(
+      <ExpandableMessage
+        id="STATUS$ERROR_LLM_INTERNAL_SERVER_ERROR"
+        message="STATUS$ERROR_LLM_INTERNAL_SERVER_ERROR"
+        type="error"
+      />,
+    );
+    
+    // Should show the translated headline
+    expect(screen.getByText("STATUS$ERROR_LLM_INTERNAL_SERVER_ERROR")).toBeInTheDocument();
+    
+    // In the test environment, the mock i18n.exists always returns true,
+    // so we can't fully test the button hiding logic
+  });
 });

frontend/src/components/features/chat/expandable-message.tsx

@@ -33,12 +33,30 @@ export function ExpandableMessage({
   const [details, setDetails] = useState(message);
 
   useEffect(() => {
+    // Check if the message is a translation key
+    const isMessageTranslationKey =
+      message &&
+      message.includes("$") &&
+      Object.values(I18nKey).includes(message as I18nKey);
+
     if (id && i18n.exists(id)) {
       setHeadline(t(id));
-      setDetails(message);
+
+      // If the message is a translation key, use the translated version
+      if (isMessageTranslationKey) {
+        setDetails(t(id));
+        setShowDetails(false);
+      } else {
+        setDetails(message);
+        setShowDetails(message.length > 0);
+      }
+    } else if (isMessageTranslationKey && i18n.exists(message)) {
+      // If the message itself is a translation key but wasn't passed as id
+      setHeadline(t(message));
+      setDetails(t(message));
       setShowDetails(false);
     }
-  }, [id, message, i18n.language]);
+  }, [id, message, i18n.language, t]);
 
   const statusIconClasses = "h-4 w-4 ml-2 inline";
 
@@ -85,27 +103,29 @@ export function ExpandableMessage({
             {headline && (
               <>
                 {headline}
-                <button
-                  type="button"
-                  onClick={() => setShowDetails(!showDetails)}
-                  className="cursor-pointer text-left"
-                >
-                  {showDetails ? (
-                    <ArrowUp
-                      className={cn(
-                        "h-4 w-4 ml-2 inline",
-                        type === "error" ? "fill-danger" : "fill-neutral-300",
-                      )}
-                    />
-                  ) : (
-                    <ArrowDown
-                      className={cn(
-                        "h-4 w-4 ml-2 inline",
-                        type === "error" ? "fill-danger" : "fill-neutral-300",
-                      )}
-                    />
-                  )}
-                </button>
+                {details.length > 0 && (
+                  <button
+                    type="button"
+                    onClick={() => setShowDetails(!showDetails)}
+                    className="cursor-pointer text-left"
+                  >
+                    {showDetails ? (
+                      <ArrowUp
+                        className={cn(
+                          "h-4 w-4 ml-2 inline",
+                          type === "error" ? "fill-danger" : "fill-neutral-300",
+                        )}
+                      />
+                    ) : (
+                      <ArrowDown
+                        className={cn(
+                          "h-4 w-4 ml-2 inline",
+                          type === "error" ? "fill-danger" : "fill-neutral-300",
+                        )}
+                      />
+                    )}
+                  </button>
+                )}
               </>
             )}
           </span>