Markdown render string in info events (UKGovernmentBEIS#458)

Co-authored-by: jjallaire <[email protected]>
VectorInstitute · Sep 19, 2024 · 7a81a80 · 7a81a80
1 parent f70aaf2
commit 7a81a80
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 2 deletions.
diff --git a/src/inspect_ai/_view/www/dist/assets/index.js b/src/inspect_ai/_view/www/dist/assets/index.js
@@ -16327,9 +16327,22 @@ const JSONPanel = ({ data, style }) => {
   </div>`;
 };
 const InfoEventView = ({ id, event, style }) => {
+  const panels = [];
+  if (typeof event.data === "string") {
+    panels.push(
+      m$1`<${MarkdownDiv}
+        markdown=${event.data}
+        style=${{ margin: "0.5em 0" }}
+      />`
+    );
+  } else {
+    panels.push(
+      m$1`<${JSONPanel} data=${event.data} style=${{ margin: "0.5em 0" }} />`
+    );
+  }
   return m$1`
   <${EventPanel} id=${id} title="Info" icon=${ApplicationIcons.info} style=${style}>
-    <${JSONPanel} data=${event.data} style=${{ margin: "0.5em 0" }}/>
+    ${panels}
   </${EventPanel}>`;
 };
 const ScoreEventView = ({ id, event, style }) => {

diff --git a/src/inspect_ai/_view/www/src/samples/transcript/InfoEventView.mjs b/src/inspect_ai/_view/www/src/samples/transcript/InfoEventView.mjs
@@ -3,6 +3,7 @@ import { html } from "htm/preact";
 import { ApplicationIcons } from "../../appearance/Icons.mjs";
 import { EventPanel } from "./EventPanel.mjs";
 import { JSONPanel } from "../../components/JsonPanel.mjs";
+import { MarkdownDiv } from "../../components/MarkdownDiv.mjs";
 
 /**
  * Renders the InfoEventView component.
@@ -14,8 +15,22 @@ import { JSONPanel } from "../../components/JsonPanel.mjs";
  * @returns {import("preact").JSX.Element} The component.
  */
 export const InfoEventView = ({ id, event, style }) => {
+  const panels = [];
+  if (typeof event.data === "string") {
+    panels.push(
+      html`<${MarkdownDiv}
+        markdown=${event.data}
+        style=${{ margin: "0.5em 0" }}
+      />`,
+    );
+  } else {
+    panels.push(
+      html`<${JSONPanel} data=${event.data} style=${{ margin: "0.5em 0" }} />`,
+    );
+  }
+
   return html`
   <${EventPanel} id=${id} title="Info" icon=${ApplicationIcons.info} style=${style}>
-    <${JSONPanel} data=${event.data} style=${{ margin: "0.5em 0" }}/>
+    ${panels}
   </${EventPanel}>`;
 };