inspect-ai 0.3.58__py3-none-any.whl → 0.3.60__py3-none-any.whl

inspect_ai/_view/www/src/samples/transcript/ModelEventView.mjs

@@ -6,7 +6,7 @@ import "prismjs/components/prism-bash";
 import "prismjs/components/prism-json";
 
 import { html } from "htm/preact";
-import { useEffect, useRef } from "preact/hooks";
+import { useEffect, useMemo, useRef } from "preact/hooks";
 import { ChatView } from "../../components/ChatView.mjs";
 import { EventPanel } from "./EventPanel.mjs";
 import { EventSection } from "./EventSection.mjs";
@@ -26,11 +26,19 @@ import {
  * @param {Object} props - The properties passed to the component.
  * @param { string  } props.id - The id of this event.
  * @param {import("../../types/log").ModelEvent} props.event - The event object to display.
+ * @param {import("./Types.mjs").TranscriptEventState} props.eventState - The state for this event
+ * @param {(state: import("./Types.mjs").TranscriptEventState) => void} props.setEventState - Update the state for this event
  * @param { Object } props.style - The style of this event.
  * @param {string} props.baseId - The baseId of the event.
  * @returns {import("preact").JSX.Element} The component.
  */
-export const ModelEventView = ({ id, event, style }) => {
+export const ModelEventView = ({
+  id,
+  event,
+  eventState,
+  setEventState,
+  style,
+}) => {
   const totalUsage = event.output.usage?.total_tokens;
   const callTime = event.output.time;
 
@@ -72,7 +80,21 @@ export const ModelEventView = ({ id, event, style }) => {
   }
 
   return html`
-  <${EventPanel} id=${id} title="Model Call: ${event.model} ${subtitle}"  subTitle=${formatDateTime(new Date(event.timestamp))} icon=${ApplicationIcons.model} style=${style}>
+  <${EventPanel} 
+    id=${id} 
+    title="Model Call: ${event.model} ${subtitle}"
+    subTitle=${formatDateTime(new Date(event.timestamp))} 
+    icon=${ApplicationIcons.model} 
+    style=${style}
+    selectedNav=${eventState.selectedNav || ""}
+    onSelectedNav=${(selectedNav) => {
+      setEventState({ ...eventState, selectedNav });
+    }}
+    collapsed=${eventState.collapsed}
+    onCollapsed=${(collapsed) => {
+      setEventState({ ...eventState, collapsed });
+    }}
+  >
   
     <div name="Summary" style=${{ margin: "0.5em 0" }}>
     <${ChatView}
@@ -137,17 +159,15 @@ export const APICodeCell = ({ id, contents }) => {
     return "";
   }
 
-  const sourceCode = JSON.stringify(contents, undefined, 2);
   const codeRef = useRef();
+  const sourceCode = useMemo(() => {
+    return JSON.stringify(contents, undefined, 2);
+  }, [contents]);
 
   useEffect(() => {
     if (codeRef.current) {
       // @ts-ignore
-      codeRef.current.innerHTML = Prism.highlight(
-        sourceCode,
-        Prism.languages.javascript,
-        "javacript",
-      );
+      Prism.highlightElement(codeRef.current);
     }
   }, [codeRef.current, contents]);
 
@@ -163,12 +183,13 @@ export const APICodeCell = ({ id, contents }) => {
       <code 
         id=${id} 
         ref=${codeRef}
-        class="sourceCode-js" 
+        class="language-json" 
         style=${{
       fontSize: FontSize.small,
       whiteSpace: "pre-wrap",
       wordWrap: "anywhere",
     }}>
+        ${sourceCode}
       </code>
       </pre>
   </div>`;

inspect_ai/_view/www/src/samples/transcript/SampleInitEventView.mjs

@@ -15,9 +15,17 @@ import { formatDateTime } from "../../utils/Format.mjs";
  * @param { string  } props.id - The id of this event.
  * @param {import("../../types/log").SampleInitEvent} props.event - The event object to display.
  * @param {Object} props.style - The style for this view
+ * @param {import("./Types.mjs").TranscriptEventState} props.eventState - The state for this event
+ * @param {(state: import("./Types.mjs").TranscriptEventState) => void} props.setEventState - Update the state for this event
  * @returns {import("preact").JSX.Element} The component.
  */
-export const SampleInitEventView = ({ id, event, style }) => {
+export const SampleInitEventView = ({
+  id,
+  event,
+  style,
+  eventState,
+  setEventState,
+}) => {
   /**
    * @type {Record<string, unknown>}
    */
@@ -43,7 +51,21 @@ export const SampleInitEventView = ({ id, event, style }) => {
   }
 
   return html`
-  <${EventPanel} id=${id} style=${style} title="Sample" icon=${ApplicationIcons.sample} subTitle=${formatDateTime(new Date(event.timestamp))}>
+  <${EventPanel} 
+    id=${id} 
+    style=${style} 
+    title="Sample" 
+    icon=${ApplicationIcons.sample} 
+    subTitle=${formatDateTime(new Date(event.timestamp))}
+    selectedNav=${eventState.selectedNav || ""}
+    onSelectedNav=${(selectedNav) => {
+      setEventState({ ...eventState, selectedNav });
+    }}
+    collapsed=${eventState.collapsed}
+    onCollapsed=${(collapsed) => {
+      setEventState({ ...eventState, collapsed });
+    }}
+  >
     <div name="Sample" style=${{ margin: "1em 0em" }}>
       <${ChatView} messages=${stateObj["messages"]}/>
       <div>

inspect_ai/_view/www/src/samples/transcript/SampleLimitEventView.mjs

@@ -10,9 +10,17 @@ import { EventPanel } from "./EventPanel.mjs";
  * @param { string  } props.id - The id of this event.
  * @param { Object } props.style - The style of this event.
  * @param {import("../../types/log").SampleLimitEvent} props.event - The event object to display.
+ * @param {import("./Types.mjs").TranscriptEventState} props.eventState - The state for this event
+ * @param {(state: import("./Types.mjs").TranscriptEventState) => void} props.setEventState - Update the state for this event
  * @returns {import("preact").JSX.Element} The component.
  */
-export const SampleLimitEventView = ({ id, event, style }) => {
+export const SampleLimitEventView = ({
+  id,
+  event,
+  eventState,
+  setEventState,
+  style,
+}) => {
   const resolve_title = (type) => {
     switch (type) {
       case "context":
@@ -47,7 +55,20 @@ export const SampleLimitEventView = ({ id, event, style }) => {
   const icon = resolve_icon(event.type);
 
   return html`
-  <${EventPanel} id=${id} title=${title} icon=${icon} style=${style}>
+  <${EventPanel} 
+    id=${id} 
+    title=${title} 
+    icon=${icon} 
+    style=${style}
+    selectedNav=${eventState.selectedNav || ""}
+    onSelectedNav=${(selectedNav) => {
+      setEventState({ ...eventState, selectedNav });
+    }}
+    collapsed=${eventState.collapsed}
+    onCollapsed=${(collapsed) => {
+      setEventState({ ...eventState, collapsed });
+    }}
+  >
     ${event.message}
   </${EventPanel}>`;
 };

inspect_ai/_view/www/src/samples/transcript/ScoreEventView.mjs

@@ -14,9 +14,17 @@ import { formatDateTime } from "../../utils/Format.mjs";
  * @param { string  } props.id - The id of this event.
  * @param {Object} props.style - The style properties passed to the component.
  * @param {import("../../types/log").ScoreEvent} props.event - The event object to display.
+ * @param {import("./Types.mjs").TranscriptEventState} props.eventState - The state for this event
+ * @param {(state: import("./Types.mjs").TranscriptEventState) => void} props.setEventState - Update the state for this event
  * @returns {import("preact").JSX.Element} The component.
  */
-export const ScoreEventView = ({ id, event, style }) => {
+export const ScoreEventView = ({
+  id,
+  event,
+  eventState,
+  setEventState,
+  style,
+}) => {
   const resolvedTarget = event.target
     ? Array.isArray(event.target)
       ? event.target.join("\n")
@@ -24,7 +32,21 @@ export const ScoreEventView = ({ id, event, style }) => {
     : undefined;
 
   return html`
-  <${EventPanel} id=${id} title="Score" subTitle=${formatDateTime(new Date(event.timestamp))} icon=${ApplicationIcons.scorer} style=${style}>
+  <${EventPanel} 
+    id=${id} 
+    title="Score" 
+    subTitle=${formatDateTime(new Date(event.timestamp))} 
+    icon=${ApplicationIcons.scorer} 
+    style=${style}
+    selectedNav=${eventState.selectedNav || ""}
+    onSelectedNav=${(selectedNav) => {
+      setEventState({ ...eventState, selectedNav });
+    }}
+    collapsed=${eventState.collapsed}
+    onCollapsed=${(collapsed) => {
+      setEventState({ ...eventState, collapsed });
+    }}    
+  >
   
     <div
       name="Explanation"

inspect_ai/_view/www/src/samples/transcript/StepEventView.mjs

@@ -1,7 +1,8 @@
 // @ts-check
 import { html } from "htm/preact";
+import { useCallback, useState } from "preact/hooks";
 import { EventPanel } from "./EventPanel.mjs";
-import { TranscriptComponent } from "./TranscriptView.mjs";
+import { TranscriptVirtualListComponent } from "./TranscriptView.mjs";
 import { formatDateTime } from "../../utils/Format.mjs";
 
 /**
@@ -10,16 +11,34 @@ import { formatDateTime } from "../../utils/Format.mjs";
  * @param {Object} props - The properties passed to the component.
  * @param {Object} props.style - The style properties passed to the component.
  * @param {import("../../types/log").StepEvent} props.event - The event object to display.
+ * @param {import("./Types.mjs").TranscriptEventState} props.eventState - The state for this event
+ * @param {(state: import("./Types.mjs").TranscriptEventState) => void} props.setEventState - Update the state for this event
  * @param {import("./Types.mjs").EventNode[]} props.children - The event notes children of this step
+ * @param {import("htm/preact").MutableRef<HTMLElement>} props.scrollRef - The scrollable parent element
  * @returns {import("preact").JSX.Element} The component that displays event details.
  */
-export const StepEventView = ({ event, children, style }) => {
+export const StepEventView = ({
+  event,
+  eventState,
+  setEventState,
+  children,
+  style,
+  scrollRef,
+}) => {
   const descriptor = stepDescriptor(event);
   const title =
     descriptor.name ||
     `${event.type ? event.type + ": " : "Step: "}${event.name}`;
   const text = summarize(children);
 
+  const [transcriptState, setTranscriptState] = useState({});
+  const onTranscriptState = useCallback(
+    (state) => {
+      setTranscriptState({ ...state });
+    },
+    [transcriptState, setTranscriptState],
+  );
+
   return html`<${EventPanel}
     id=${`step-${event.name}`}
     classes="transcript-step"
@@ -30,10 +49,21 @@ export const StepEventView = ({ event, children, style }) => {
     titleStyle=${{ ...descriptor.titleStyle }}
     collapse=${false}
     text=${text}
+    selectedNav=${eventState.selectedNav || ""}
+    onSelectedNav=${(selectedNav) => {
+      setEventState({ ...eventState, selectedNav });
+    }}
+    collapsed=${eventState.collapsed}
+    onCollapsed=${(collapsed) => {
+      setEventState({ ...eventState, collapsed });
+    }}        
   >
-    <${TranscriptComponent}
+    <${TranscriptVirtualListComponent}
       id=${`step-${event.name}-transcript`}
       eventNodes=${children}
+      scrollRef=${scrollRef}
+      transcriptState=${transcriptState}
+      setTranscriptState=${onTranscriptState}
     />
   </EventPanel>
   `;

inspect_ai/_view/www/src/samples/transcript/SubtaskEventView.mjs

@@ -14,10 +14,19 @@ import { formatDateTime } from "../../utils/Format.mjs";
  * @param { string  } props.id - The id of this event.
  * @param { Object } props.style - The style of this event.
  * @param {import("../../types/log").SubtaskEvent} props.event - The event object to display.
+ * @param {import("./Types.mjs").TranscriptEventState} props.eventState - The state for this event
+ * @param {(state: import("./Types.mjs").TranscriptEventState) => void} props.setEventState - Update the state for this event
  * @param { Object } props.depth - The depth of this event.
  * @returns {import("preact").JSX.Element} The component.
  */
-export const SubtaskEventView = ({ id, event, style, depth }) => {
+export const SubtaskEventView = ({
+  id,
+  event,
+  eventState,
+  setEventState,
+  style,
+  depth,
+}) => {
   // Render Forks specially
 
   const transcript =
@@ -54,7 +63,21 @@ export const SubtaskEventView = ({ id, event, style, depth }) => {
   // Is this a traditional subtask or a fork?
   const type = event.type === "fork" ? "Fork" : "Subtask";
   return html`
-    <${EventPanel} id=${id} title="${type}: ${event.name}" subTitle=${formatDateTime(new Date(event.timestamp))} style=${style} collapse=${false}>
+    <${EventPanel} 
+      id=${id} 
+      title="${type}: ${event.name}" 
+      subTitle=${formatDateTime(new Date(event.timestamp))} 
+      style=${style} 
+      collapse=${false}
+      selectedNav=${eventState.selectedNav || ""}
+      onSelectedNav=${(selectedNav) => {
+        setEventState({ ...eventState, selectedNav });
+      }}
+      collapsed=${eventState.collapsed}
+      onCollapsed=${(collapsed) => {
+        setEventState({ ...eventState, collapsed });
+      }}              
+    >
       ${body}
     </${EventPanel}>`;
 };

inspect_ai/_view/www/src/samples/transcript/ToolEventView.mjs

@@ -13,11 +13,20 @@ import { formatDateTime } from "../../utils/Format.mjs";
  * @param {Object} props - The properties passed to the component.
  * @param { string  } props.id - The id of this event.
  * @param {import("../../types/log").ToolEvent} props.event - The event object to display.
+ * @param {import("./Types.mjs").TranscriptEventState} props.eventState - The state for this event
+ * @param {(state: import("./Types.mjs").TranscriptEventState) => void} props.setEventState - Update the state for this event
  * @param { Object } props.style - The style of this event.
  * @param { number } props.depth - The depth of this event.
  * @returns {import("preact").JSX.Element} The component.
  */
-export const ToolEventView = ({ id, event, style, depth }) => {
+export const ToolEventView = ({
+  id,
+  event,
+  eventState,
+  setEventState,
+  style,
+  depth,
+}) => {
   // Extract tool input
   const { input, functionCall, inputType } = resolveToolInput(
     event.function,
@@ -31,7 +40,21 @@ export const ToolEventView = ({ id, event, style, depth }) => {
 
   const title = `Tool: ${event.view?.title || event.function}`;
   return html`
-  <${EventPanel} id=${id} title="${title}" subTitle=${formatDateTime(new Date(event.timestamp))} icon=${ApplicationIcons.solvers.use_tools} style=${style}>  
+  <${EventPanel} 
+    id=${id} 
+    title="${title}" 
+    subTitle=${formatDateTime(new Date(event.timestamp))} 
+    icon=${ApplicationIcons.solvers.use_tools} 
+    style=${style}
+    selectedNav=${eventState.selectedNav || ""}
+    onSelectedNav=${(selectedNav) => {
+      setEventState({ ...eventState, selectedNav });
+    }}
+    collapsed=${eventState.collapsed}
+    onCollapsed=${(collapsed) => {
+      setEventState({ ...eventState, collapsed });
+    }}              
+  >  
   <div name="Summary" style=${{ margin: "0.5em 0", width: "100%" }}>
     <${ToolCallView}
       functionCall=${functionCall}