Fix issue All-Hands-AI#5186: [Bug]: Fix up inline code styles in chat…

… window (All-Hands-AI#5226) Co-authored-by: Graham Neubig <[email protected]> Co-authored-by: amanape <[email protected]>
JonathanCai · Dec 9, 2024 · 99fa6c6 · 99fa6c6
1 parent 3946f81
commit 99fa6c6
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 5 deletions.
diff --git a/frontend/__tests__/components/chat-message.test.tsx b/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();
+  });
 });
diff --git a/frontend/src/components/features/markdown/code.tsx b/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 (

diff --git a/frontend/src/index.css b/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 {

diff --git a/frontend/src/services/actions.ts b/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",
+      }),
+    );
   }
 }