Fix issue #5186: [Bug]: Fix up inline code styles in chat window (#5226)

Co-authored-by: Graham Neubig <neubig@gmail.com>
Co-authored-by: amanape <83104063+amanape@users.noreply.github.com>

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

@@ -70,4 +70,12 @@ describe("ChatMessage", () => {
     );
     expect(screen.getByTestId("custom-component")).toBeInTheDocument();
   });
+
+  it("should apply correct styles to inline code", () => {
+    render(<ChatMessage type="assistant" message="Here is some `inline code` text" />);
+    const codeElement = screen.getByText("inline code");
+
+    expect(codeElement.tagName.toLowerCase()).toBe("code");
+    expect(codeElement.closest("article")).not.toBeNull();
+  });
 });

frontend/src/components/features/markdown/code.tsx

@@ -17,7 +17,20 @@ export function code({
   const match = /language-(\w+)/.exec(className || ""); // get the language
 
   if (!match) {
-    return <code className={className}>{children}</code>;
+    return (
+      <code
+        className={className}
+        style={{
+          backgroundColor: "#2a3038",
+          padding: "0.2em 0.4em",
+          borderRadius: "4px",
+          color: "#e6edf3",
+          border: "1px solid #30363d",
+        }}
+      >
+        {children}
+      </code>
+    );
   }
 
   return (

frontend/src/index.css

@@ -32,8 +32,11 @@ code {
   margin: 0;
   font-size: 85%;
   white-space: break-spaces;
-  background-color: var(--bg-neutral-muted);
-  border-radius: 6px;
+  background-color: #2a3038;
+  border-radius: 4px;
+  color: #e6edf3;
+  border: 1px solid #30363d;
+  letter-spacing: -0.2px;
 }
 
 .markdown-body pre code {

frontend/src/services/actions.ts

@@ -15,7 +15,6 @@ import {
   ObservationMessage,
   StatusMessage,
 } from "#/types/message";
-import EventLogger from "#/utils/event-logger";
 import { handleObservationMessage } from "./observations";
 
 const messageActions = {
@@ -107,6 +106,10 @@ export function handleAssistantMessage(message: Record<string, unknown>) {
   } else if (message.status_update) {
     handleStatusMessage(message as unknown as StatusMessage);
   } else {
-    EventLogger.error(`Unknown message type ${message}`);
+    store.dispatch(
+      addErrorMessage({
+        message: "Unknown message type received",
+      }),
+    );
   }
 }