[OPIK-1986] Fix prettify function to work correctly with the demo projects (#2762)

* [OPIK-1986] fix prettify func to work with demo project

* [OPIK-1986] demo project prettifier

---------

Co-authored-by: Yaroslav Boiko <yaroslavboiko@ip-192-168-1-15.ec2.internal>

Author: awkoy

apps/opik-frontend/src/lib/traces.test.ts

@@ -185,4 +185,89 @@ describe("prettifyMessage", () => {
       prettified: true,
     });
   });
+
+  it("handles Demo project blocks structure with text content", () => {
+    const message = {
+      role: "assistant",
+      blocks: [
+        {
+          block_type: "text",
+          text: "Opik is a tool that has been specifically designed to support high volumes of traces, making it suitable for monitoring production applications, particularly LLM applications.",
+        },
+      ],
+    };
+    const result = prettifyMessage(message, { type: "output" });
+    expect(result).toEqual({
+      message:
+        "Opik is a tool that has been specifically designed to support high volumes of traces, making it suitable for monitoring production applications, particularly LLM applications.",
+      prettified: true,
+    });
+  });
+
+  it("handles Demo project blocks structure with multiple text blocks", () => {
+    const message = {
+      role: "assistant",
+      blocks: [
+        {
+          block_type: "text",
+          text: "First paragraph content.",
+        },
+        {
+          block_type: "text",
+          text: "Second paragraph content.",
+        },
+      ],
+    };
+    const result = prettifyMessage(message, { type: "output" });
+    expect(result).toEqual({
+      message: "First paragraph content.\n\nSecond paragraph content.",
+      prettified: true,
+    });
+  });
+
+  it("handles Demo project blocks structure with mixed block types, extracting only text blocks", () => {
+    const message = {
+      role: "assistant",
+      blocks: [
+        {
+          block_type: "image",
+          url: "https://example.com/image.jpg",
+        },
+        {
+          block_type: "text",
+          text: "This is the text content.",
+        },
+        {
+          block_type: "code",
+          language: "python",
+          code: "print('hello')",
+        },
+      ],
+    };
+    const result = prettifyMessage(message, { type: "output" });
+    expect(result).toEqual({
+      message: "This is the text content.",
+      prettified: true,
+    });
+  });
+
+  it("handles Demo project nested blocks structure under output property", () => {
+    const message = {
+      output: {
+        role: "assistant",
+        blocks: [
+          {
+            block_type: "text",
+            text: "Opik's morning routine before diving into LLM evaluations involves logging, viewing, and evaluating LLM traces using the Opik platform and LLM as a Judge evaluators. This allows for the identification and fixing of issues in the LLM application.",
+          },
+        ],
+      },
+    };
+    const result = prettifyMessage(message, { type: "output" });
+    expect(result).toEqual({
+      message:
+        "Opik's morning routine before diving into LLM evaluations involves logging, viewing, and evaluating LLM traces using the Opik platform and LLM as a Judge evaluators. This allows for the identification and fixing of issues in the LLM application.",
+      prettified: true,
+    });
+  });
 });

apps/opik-frontend/src/lib/traces.ts

@@ -318,6 +318,53 @@ const prettifyLangChainLogic = (
   }
 };
 
+/**
+ * Prettifies Demo project's blocks-based message format.
+ *
+ * Handles two formats:
+ * - Direct: { blocks: [{ block_type: "text", text: "..." }] }
+ * - Nested: { output: { blocks: [{ block_type: "text", text: "..." }] } }
+ */
+const prettifyDemoProjectLogic = (
+  message: object | string | undefined,
+  config: PrettifyMessageConfig,
+): string | undefined => {
+  const extractTextFromBlocks = (blocks: unknown[]): string | undefined => {
+    const textBlocks = blocks.filter(
+      (block): block is { block_type: string; text: string } =>
+        isObject(block) &&
+        "block_type" in block &&
+        block.block_type === "text" &&
+        "text" in block &&
+        isString(block.text) &&
+        block.text.trim() !== "",
+    );
+
+    return textBlocks.length > 0
+      ? textBlocks.map((block) => block.text).join("\n\n")
+      : undefined;
+  };
+
+  // Handle direct blocks structure: { blocks: [...] }
+  if (isObject(message) && "blocks" in message && isArray(message.blocks)) {
+    return extractTextFromBlocks(message.blocks);
+  }
+
+  // Handle nested blocks structure: { output: { blocks: [...] } }
+  if (
+    config.type === "output" &&
+    isObject(message) &&
+    "output" in message &&
+    isObject(message.output) &&
+    "blocks" in message.output &&
+    isArray(message.output.blocks)
+  ) {
+    return extractTextFromBlocks(message.output.blocks);
+  }
+
+  return undefined;
+};
+
 const prettifyGenericLogic = (
   message: object | string | undefined,
   config: PrettifyMessageConfig,
@@ -394,6 +441,10 @@ export const prettifyMessage = (
       processedMessage = prettifyLangChainLogic(message, config);
     }
 
+    if (!isString(processedMessage)) {
+      processedMessage = prettifyDemoProjectLogic(message, config);
+    }
+
     if (!isString(processedMessage)) {
       processedMessage = prettifyGenericLogic(message, config);
     }