fix: render plain string message content without extra quotes in Trace Details (Arize-ai#11294)

Root cause: Arize-ai#10941 fixed the tool-return React error by running all
message content in SpanDetails through formatContentAsString(). That
function was moved from playgroundUtils (where it was only used for
tool content) and was designed to JSON.stringify plain strings. Using
it for every message in the trace UI made system/user/model text show
with extra quotes and escaped newlines.

Fix: return plain string content as-is from formatContentAsString when
it is not double-stringified JSON or a non-string JSON value. Tool
results (objects/arrays) still get pretty-printed via JSON.stringify.
Other call sites (playground, messageSchemas, ChatTemplateMessageCard)
only pass tool content, so behavior there is unchanged.

Author: RogerHYang

app/src/pages/trace/SpanDetails.tsx

@@ -1417,7 +1417,9 @@ function DocumentItem({
 
 function LLMMessage({ message }: { message: AttributeMessage }) {
   const messageContent = message[MessageAttributePostfixes.content];
-  const normalizedContent = formatContentAsString(messageContent);
+  const normalizedContent = formatContentAsString(messageContent, {
+    unquotePlainString: true,
+  });
   // as of multi-modal models, a message can also be a list
   const messagesContents = message[MessageAttributePostfixes.contents];
   const toolCalls = message[MessageAttributePostfixes.tool_calls]
@@ -1756,7 +1758,9 @@ function MessageContentListItem({
 }) {
   const { message_content } = messageContentAttribute;
   const text = message_content?.text;
-  const normalizedText = text ? formatContentAsString(text) : undefined;
+  const normalizedText = text
+    ? formatContentAsString(text, { unquotePlainString: true })
+    : undefined;
   const image = message_content?.image;
   const imageUrl = image?.image?.url;
 

app/src/utils/__tests__/jsonUtils.test.ts

@@ -108,4 +108,11 @@ describe("formatContentAsString", () => {
     const content = `"\\"Hello, world!\\""`;
     expect(formatContentAsString(content)).toBe(`"Hello, world!"`);
   });
+
+  it("should return 'undefined' when content is undefined", () => {
+    expect(formatContentAsString(undefined)).toBe("undefined");
+    expect(formatContentAsString(undefined, { unquotePlainString: true })).toBe(
+      "undefined"
+    );
+  });
 });

app/src/utils/jsonUtils.ts

@@ -104,13 +104,24 @@ export function jsonStringToFlatObject(
 /**
  * Formats content of any type into a string suitable for rendering.
  *
- * Handles double-stringified JSON, pretty-prints objects and arrays,
- * and preserves valid top-level JSON values.
+ * By default returns valid JSON (plain strings are JSON-quoted). Use unquotePlainString for readable display.
+ *
+ * - Strings: Unwraps double-stringified JSON (e.g. "\"{\\"foo\\":1}\"") and pretty-prints;
+ *   otherwise returns plain string JSON-quoted (valid JSON) or unquoted when unquotePlainString is true.
+ * - Objects/arrays: Pretty-printed JSON.
+ * - Primitives (number, boolean, null): String form (e.g. "123", "true", "null").
+ * - undefined: Returns the string "undefined".
  *
  * @param content - the content to format
+ * @param options.unquotePlainString - when true, plain string content is returned as-is (unquoted) for readable display; default false returns valid JSON (quoted)
  * @returns a formatted string representation of the content
  */
-export function formatContentAsString(content?: unknown): string {
+export function formatContentAsString(
+  content?: unknown,
+  options?: { unquotePlainString?: boolean }
+): string {
+  const unquotePlainString = options?.unquotePlainString ?? false;
+
   if (typeof content === "string") {
     const isDoubleStringified =
       content.startsWith('"{') ||
@@ -130,16 +141,19 @@ export function formatContentAsString(content?: unknown): string {
     } catch {
       // If parsing fails, fall through
     }
-    // If the content is a valid non-string top level json value, return it as-is
-    // https://datatracker.ietf.org/doc/html/rfc7159#section-3
-    // 0-9 { [ null false true
-    // a regex that matches possible top level json values, besides strings
-    const nonStringStart = /^\s*[0-9{[]|true|false|null/.test(content);
-    if (nonStringStart) {
+    // Plain text string or unparseable content
+    if (unquotePlainString) {
       return content;
     }
+    return JSON.stringify(content);
   }
 
-  // For any content that doesn't match the json spec for a top level value, stringify it with pretty printing
-  return JSON.stringify(content, null, 2);
+  // Objects, arrays, and primitives: pretty-print as JSON when possible
+  try {
+    const out = JSON.stringify(content, null, 2);
+    if (out !== undefined) return out;
+  } catch {
+    // BigInt and other non-serializable values
+  }
+  return String(content);
 }