inspect-ai 0.3.62__py3-none-any.whl → 0.3.63__py3-none-any.whl

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

@@ -0,0 +1,91 @@
+import { ApplicationIcons } from "../../appearance/icons";
+import { ToolEvent } from "../../types/log";
+import { formatDateTime } from "../../utils/format";
+import { resolveToolInput } from "../chat/tools/tool";
+import { ToolCallView } from "../chat/tools/ToolCallView";
+import { ApprovalEventView } from "./ApprovalEventView";
+import { EventPanel } from "./event/EventPanel";
+import { TranscriptView } from "./TranscriptView";
+import { TranscriptEventState } from "./types";
+
+import styles from "./ToolEventView.module.css";
+
+interface ToolEventViewProps {
+  id: string;
+  event: ToolEvent;
+  eventState: TranscriptEventState;
+  setEventState: (state: TranscriptEventState) => void;
+  depth: number;
+  className?: string | string[];
+}
+
+/**
+ * Renders the ToolEventView component.
+ */
+export const ToolEventView: React.FC<ToolEventViewProps> = ({
+  id,
+  event,
+  eventState,
+  setEventState,
+  depth,
+  className,
+}) => {
+  // Extract tool input
+  const { input, functionCall, inputType } = resolveToolInput(
+    event.function,
+    event.arguments,
+  );
+
+  // Find an approval if there is one
+  const approvalEvent = event.events.find((e) => {
+    return e.event === "approval";
+  });
+
+  const title = `Tool: ${event.view?.title || event.function}`;
+  return (
+    <EventPanel
+      id={id}
+      title={title}
+      className={className}
+      subTitle={formatDateTime(new Date(event.timestamp))}
+      icon={ApplicationIcons.solvers.use_tools}
+      selectedNav={eventState.selectedNav || ""}
+      setSelectedNav={(selectedNav) => {
+        setEventState({ ...eventState, selectedNav });
+      }}
+      collapsed={eventState.collapsed}
+      setCollapsed={(collapsed) => {
+        setEventState({ ...eventState, collapsed });
+      }}
+    >
+      <div data-name="Summary" className={styles.summary}>
+        <ToolCallView
+          functionCall={functionCall}
+          input={input}
+          inputType={inputType}
+          output={event.error?.message || event.result}
+          mode="compact"
+          view={event.view ? event.view : undefined}
+        />
+        {approvalEvent ? (
+          <ApprovalEventView
+            event={approvalEvent}
+            className={styles.approval}
+          />
+        ) : (
+          ""
+        )}
+      </div>
+      {event.events.length > 0 ? (
+        <TranscriptView
+          id={`${id}-subtask`}
+          data-name="Transcript"
+          events={event.events}
+          depth={depth + 1}
+        />
+      ) : (
+        ""
+      )}
+    </EventPanel>
+  );
+};

inspect_ai/_view/www/src/samples/transcript/TranscriptView.module.css

@@ -0,0 +1,49 @@
+.darkenedBg {
+  background-color: var(--bs-light-bg-subtle);
+}
+
+.normalBg {
+  background-color: var(--bs-body-bg);
+}
+
+.node.first {
+  padding-top: 0.5em;
+}
+
+.node {
+  padding-top: 0;
+  padding-bottom: 0.5em;
+}
+
+.nodes {
+  width: 100%;
+  margin-top: 1em;
+}
+
+.transcriptComponent {
+  display: grid;
+  margin: 0.5em 0 0 0;
+  width: 100%;
+}
+
+.eventNode {
+  background-color: var(--bs-body-bg);
+  margin-bottom: 1.5em;
+  padding-bottom: 0.5em;
+}
+
+.eventNode.darkenBg {
+  background-color: var(--bs-light-bg-subtle);
+}
+
+.eventNode.lastNode {
+  margin-bottom: 0;
+}
+
+.eventNodeContainer {
+  padding-bottom: 0.5em;
+}
+
+.eventNodeContainer.noBottom {
+  padding-bottom: 0;
+}

inspect_ai/_view/www/src/samples/transcript/TranscriptView.tsx

@@ -0,0 +1,449 @@
+import React, { RefObject, useCallback, useState } from "react";
+import { VirtualList } from "../../components/VirtualList";
+import { Events } from "../../types/log";
+import { ApprovalEventView } from "./ApprovalEventView";
+import { ErrorEventView } from "./ErrorEventView";
+import { InfoEventView } from "./InfoEventView";
+import { InputEventView } from "./InputEventView";
+import { LoggerEventView } from "./LoggerEventView";
+import { ModelEventView } from "./ModelEventView";
+import { SampleInitEventView } from "./SampleInitEventView";
+import { SampleLimitEventView } from "./SampleLimitEventView";
+import { ScoreEventView } from "./ScoreEventView";
+import { StateEventView } from "./state/StateEventView";
+import { StepEventView } from "./StepEventView";
+import { SubtaskEventView } from "./SubtaskEventView";
+import { ToolEventView } from "./ToolEventView";
+import { EventNode, EventType, TranscriptEventState } from "./types";
+
+import clsx from "clsx";
+import styles from "./TranscriptView.module.css";
+
+interface TranscriptViewProps {
+  id: string;
+  events: Events;
+  depth: number;
+}
+
+type TranscriptState = Record<string, TranscriptEventState>;
+
+/**
+ * Renders the TranscriptView component.
+ */
+export const TranscriptView: React.FC<TranscriptViewProps> = ({
+  id,
+  events,
+  depth,
+}) => {
+  const [transcriptState, setTranscriptState] = useState<TranscriptState>({});
+  const onTranscriptState = useCallback(
+    (state: TranscriptState) => {
+      setTranscriptState(state);
+    },
+    [setTranscriptState],
+  );
+
+  // Normalize Events themselves
+  const resolvedEvents = fixupEventStream(events);
+  const eventNodes = treeifyEvents(
+    resolvedEvents,
+    depth !== undefined ? depth : 0,
+  );
+  return (
+    <TranscriptComponent
+      id={id}
+      eventNodes={eventNodes}
+      transcriptState={transcriptState}
+      setTranscriptState={onTranscriptState}
+    />
+  );
+};
+
+interface TranscriptVirtualListProps {
+  id: string;
+  events: Events;
+  depth?: number;
+  scrollRef: RefObject<HTMLDivElement | null>;
+}
+
+/**
+ * Renders the Transcript Virtual List.
+ */
+export const TranscriptVirtualList: React.FC<TranscriptVirtualListProps> = (
+  props,
+) => {
+  let { id, scrollRef, events, depth } = props;
+
+  // Normalize Events themselves
+  const resolvedEvents = fixupEventStream(events);
+  const eventNodes = treeifyEvents(resolvedEvents, depth || 0);
+
+  const [transcriptState, setTranscriptState] = useState({});
+  const onTranscriptState = useCallback(
+    (state: TranscriptEventState) => {
+      setTranscriptState(state);
+    },
+    [transcriptState, setTranscriptState],
+  );
+
+  return (
+    <TranscriptVirtualListComponent
+      id={id}
+      eventNodes={eventNodes}
+      scrollRef={scrollRef}
+      transcriptState={transcriptState}
+      setTranscriptState={onTranscriptState}
+    />
+  );
+};
+
+interface TranscriptVirtualListComponentProps {
+  id: string;
+  eventNodes: EventNode[];
+  transcriptState: TranscriptState;
+  setTranscriptState: (state: TranscriptState) => void;
+  scrollRef?: RefObject<HTMLDivElement | null>;
+}
+
+/**
+ * Renders the Transcript component.
+ */
+export const TranscriptVirtualListComponent: React.FC<
+  TranscriptVirtualListComponentProps
+> = ({ id, eventNodes, scrollRef, transcriptState, setTranscriptState }) => {
+  const setEventState = useCallback(
+    (eventId: string, state: TranscriptEventState) => {
+      setTranscriptState({ ...transcriptState, [eventId]: state });
+    },
+    [setTranscriptState],
+  );
+
+  const renderRow = (item: EventNode, index: number) => {
+    const bgClass = item.depth % 2 == 0 ? styles.darkenedBg : styles.normalBg;
+    const paddingClass = index === 0 ? styles.first : undefined;
+
+    const eventId = `${id}-event${index}`;
+
+    return (
+      <div key={eventId} className={clsx(styles.node, paddingClass)}>
+        <RenderedEventNode
+          id={eventId}
+          node={item}
+          className={clsx(bgClass)}
+          scrollRef={scrollRef}
+          eventState={transcriptState[eventId] || {}}
+          setEventState={(state) => setEventState(eventId, state)}
+        />
+      </div>
+    );
+  };
+
+  return (
+    <VirtualList
+      data={eventNodes}
+      tabIndex={0}
+      renderRow={renderRow}
+      scrollRef={scrollRef}
+      className={styles.nodes}
+    />
+  );
+};
+
+interface TranscriptComponentProps {
+  id: string;
+  transcriptState: TranscriptState;
+  setTranscriptState: (state: TranscriptState) => void;
+  eventNodes: EventNode[];
+}
+/**
+ * Renders the Transcript component.
+ */
+export const TranscriptComponent: React.FC<TranscriptComponentProps> = ({
+  id,
+  transcriptState,
+  setTranscriptState,
+  eventNodes,
+}) => {
+  const rows = eventNodes.map((eventNode, index) => {
+    const clz = [styles.eventNode];
+    if (eventNode.depth % 2 == 0) {
+      clz.push(styles.darkenBg);
+    }
+    if (index === eventNodes.length - 1) {
+      clz.push(styles.lastNode);
+    }
+
+    const eventId = `${id}-event${index}`;
+    const setEventState = useCallback(
+      (state: TranscriptEventState) => {
+        setTranscriptState({ ...transcriptState, [eventId]: state });
+      },
+      [setTranscriptState, transcriptState],
+    );
+
+    const row = (
+      <div
+        key={eventId}
+        className={clsx(
+          styles.eventNodeContainer,
+          index === eventNodes.length - 1 ? styles.noBottom : undefined,
+        )}
+      >
+        <RenderedEventNode
+          id={eventId}
+          node={eventNode}
+          className={clsx(clz)}
+          eventState={transcriptState[eventId] || {}}
+          setEventState={setEventState}
+        />
+      </div>
+    );
+    return row;
+  });
+
+  return (
+    <div
+      id={id}
+      className={clsx("text-size-small", styles.transcriptComponent)}
+    >
+      {rows}
+    </div>
+  );
+};
+
+interface RenderedEventNodeProps {
+  id: string;
+  node: EventNode;
+  scrollRef?: RefObject<HTMLDivElement | null>;
+  eventState: TranscriptEventState;
+  setEventState: (state: TranscriptEventState) => void;
+  className?: string | string[];
+}
+/**
+ * Renders the event based on its type.
+ */
+export const RenderedEventNode: React.FC<RenderedEventNodeProps> = ({
+  id,
+  node,
+  scrollRef,
+  eventState,
+  setEventState,
+  className,
+}) => {
+  switch (node.event.event) {
+    case "sample_init":
+      return (
+        <SampleInitEventView
+          id={id}
+          event={node.event}
+          eventState={eventState}
+          setEventState={setEventState}
+          className={className}
+        />
+      );
+
+    case "sample_limit":
+      return (
+        <SampleLimitEventView
+          id={id}
+          event={node.event}
+          eventState={eventState}
+          setEventState={setEventState}
+          className={className}
+        />
+      );
+
+    case "info":
+      return (
+        <InfoEventView
+          id={id}
+          event={node.event}
+          eventState={eventState}
+          setEventState={setEventState}
+          className={className}
+        />
+      );
+
+    case "logger":
+      return <LoggerEventView event={node.event} className={className} />;
+
+    case "model":
+      return (
+        <ModelEventView
+          id={id}
+          event={node.event}
+          eventState={eventState}
+          setEventState={setEventState}
+          className={className}
+        />
+      );
+
+    case "score":
+      return (
+        <ScoreEventView
+          id={id}
+          event={node.event}
+          eventState={eventState}
+          setEventState={setEventState}
+          className={className}
+        />
+      );
+
+    case "state":
+      return (
+        <StateEventView
+          id={id}
+          event={node.event}
+          eventState={eventState}
+          setEventState={setEventState}
+          className={className}
+        />
+      );
+
+    case "step":
+      return (
+        <StepEventView
+          event={node.event}
+          eventState={eventState}
+          setEventState={setEventState}
+          children={node.children}
+          scrollRef={scrollRef}
+          className={className}
+        />
+      );
+
+    case "store":
+      return (
+        <StateEventView
+          id={id}
+          event={node.event}
+          eventState={eventState}
+          setEventState={setEventState}
+          className={className}
+          isStore={true}
+        />
+      );
+
+    case "subtask":
+      return (
+        <SubtaskEventView
+          id={id}
+          event={node.event}
+          eventState={eventState}
+          setEventState={setEventState}
+          className={className}
+          depth={node.depth}
+        />
+      );
+
+    case "tool":
+      return (
+        <ToolEventView
+          id={id}
+          event={node.event}
+          eventState={eventState}
+          setEventState={setEventState}
+          className={className}
+          depth={node.depth}
+        />
+      );
+
+    case "input":
+      return (
+        <InputEventView
+          id={id}
+          event={node.event}
+          eventState={eventState}
+          setEventState={setEventState}
+          className={className}
+        />
+      );
+
+    case "error":
+      return (
+        <ErrorEventView
+          id={id}
+          event={node.event}
+          eventState={eventState}
+          setEventState={setEventState}
+          className={className}
+        />
+      );
+
+    case "approval":
+      return <ApprovalEventView event={node.event} className={className} />;
+
+    default:
+      return null;
+  }
+};
+
+/**
+ * Normalizes event content
+ */
+const fixupEventStream = (events: Events) => {
+  const initEventIndex = events.findIndex((e) => {
+    return e.event === "sample_init";
+  });
+  const initEvent = events[initEventIndex];
+
+  const fixedUp = [...events];
+  if (initEvent) {
+    fixedUp.splice(initEventIndex, 0, {
+      timestamp: initEvent.timestamp,
+      event: "step",
+      action: "begin",
+      type: null,
+      name: "sample_init",
+      pending: false,
+    });
+
+    fixedUp.splice(initEventIndex + 2, 0, {
+      timestamp: initEvent.timestamp,
+      event: "step",
+      action: "end",
+      type: null,
+      name: "sample_init",
+      pending: false,
+    });
+  }
+
+  return fixedUp;
+};
+
+/**
+ * Gathers events into a hierarchy of EventNodes.
+ */
+function treeifyEvents(events: Events, depth: number): EventNode[] {
+  const rootNodes: EventNode[] = [];
+  const stack: EventNode[] = [];
+
+  const pushNode = (event: EventType): EventNode => {
+    const node = new EventNode(event, stack.length + depth);
+    if (stack.length > 0) {
+      const parentNode = stack[stack.length - 1];
+      parentNode.children.push(node);
+    } else {
+      rootNodes.push(node);
+    }
+    return node;
+  };
+
+  events.forEach((event) => {
+    if (event.event === "step" && event.action === "begin") {
+      // Starting a new step
+      const node = pushNode(event);
+      stack.push(node);
+    } else if (event.event === "step" && event.action === "end") {
+      // An ending step
+      if (stack.length > 0) {
+        stack.pop();
+      }
+    } else {
+      // An event
+      pushNode(event);
+    }
+  });
+
+  return rootNodes;
+}

inspect_ai/_view/www/src/samples/transcript/event/EventNav.module.css

@@ -0,0 +1,5 @@
+.tab {
+  min-width: 4rem;
+  padding: 0.1rem 0.6rem;
+  border-radius: var(--bs-border-radius);
+}

inspect_ai/_view/www/src/samples/transcript/event/EventNav.tsx

@@ -0,0 +1,43 @@
+import clsx from "clsx";
+
+import styles from "./EventNav.module.css";
+
+interface EventNavProps {
+  target: string;
+  title: string;
+  selectedNav: string;
+  setSelectedNav: (nav: string) => void;
+}
+/**
+ * Component to render a single navigation item.
+ */
+export const EventNav: React.FC<EventNavProps> = ({
+  target,
+  title,
+  selectedNav,
+  setSelectedNav,
+}) => {
+  const active = target === selectedNav;
+  return (
+    <li className="nav-item">
+      <button
+        type="button"
+        role="tab"
+        aria-controls={target}
+        aria-selected={active}
+        className={clsx(
+          "nav-link",
+          active ? "active " : "",
+          "text-style-label",
+          "text-size-small",
+          styles.tab,
+        )}
+        onClick={() => {
+          setSelectedNav(target);
+        }}
+      >
+        {title}
+      </button>
+    </li>
+  );
+};

inspect_ai/_view/www/src/samples/transcript/event/EventNavs.module.css

@@ -0,0 +1,3 @@
+.navs {
+  margin-right: 0;
+}

inspect_ai/_view/www/src/samples/transcript/event/EventNavs.tsx

@@ -0,0 +1,38 @@
+import clsx from "clsx";
+import { EventNav } from "./EventNav";
+
+import styles from "./EventNavs.module.css";
+
+interface EventNavsProps {
+  navs: Array<{ id: string; title: string; target: string }>;
+  selectedNav: string;
+  setSelectedNav: (target: string) => void;
+}
+
+/**
+ * Component to render navigation items.
+ */
+export const EventNavs: React.FC<EventNavsProps> = ({
+  navs,
+  selectedNav,
+  setSelectedNav,
+}) => {
+  return (
+    <ul
+      className={clsx("nav", "nav-pills", styles.navs)}
+      role="tablist"
+      aria-orientation="horizontal"
+    >
+      {navs.map((nav) => {
+        return (
+          <EventNav
+            target={nav.target}
+            title={nav.title}
+            selectedNav={selectedNav}
+            setSelectedNav={setSelectedNav}
+          />
+        );
+      })}
+    </ul>
+  );
+};

inspect_ai/_view/www/src/samples/transcript/event/EventPanel.module.css

@@ -0,0 +1,25 @@
+.label {
+  margin-right: 0.2em;
+  justify-self: end;
+}
+
+.navs {
+  justify-self: end;
+  display: flex;
+  flex-direction: columns;
+}
+
+.card {
+  padding: 0.625rem;
+  border: solid 1px var(--bs-light-border-subtle);
+  border-radius: var(--bs-border-radius);
+}
+
+.cardContent {
+  padding: 0;
+  display: inherit;
+}
+
+.cardContent.hidden {
+  display: none;
+}