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

inspect_ai/_view/www/src/components/ChatView.mjs

@@ -7,6 +7,54 @@ import { MessageContent } from "./MessageContent.mjs";
 import { ExpandablePanel } from "./ExpandablePanel.mjs";
 import { FontSize, TextStyle } from "../appearance/Fonts.mjs";
 import { resolveToolInput, ToolCallView } from "./Tools.mjs";
+import { VirtualList } from "./VirtualList.mjs";
+
+/**
+ * Renders the ChatViewVirtualList component.
+ *
+ * @param {Object} props - The properties passed to the component.
+ * @param {string} props.id - The ID for the chat view.
+ * @param {import("../types/log").Messages} props.messages - The array of chat messages.
+ * @param {"compact" | "complete"} [props.toolCallStyle] - Whether to show tool calls
+ * @param {Object} [props.style] - Inline styles for the chat view.
+ * @param {boolean} props.indented - Whether the chatview has indented messages
+ * @param {boolean} [props.numbered] - Whether the chatview is numbered
+ * @param {import("htm/preact").MutableRef<HTMLElement>} props.scrollRef - The scrollable parent element
+ * @returns {import("preact").JSX.Element} The component.
+ */
+export const ChatViewVirtualList = ({
+  id,
+  messages,
+  toolCallStyle,
+  style,
+  indented,
+  numbered = true,
+  scrollRef,
+}) => {
+  const collapsedMessages = resolveMessages(messages);
+
+  const renderRow = (item, index) => {
+    const number =
+      collapsedMessages.length > 1 && numbered ? index + 1 : undefined;
+    return html`<${ChatMessageRow}
+      id=${id}
+      number=${number}
+      resolvedMessage=${item}
+      indented=${indented}
+      toolCallStyle=${toolCallStyle}
+    />`;
+  };
+
+  const result = html`<${VirtualList}
+    data=${collapsedMessages}
+    tabIndex="0"
+    renderRow=${renderRow}
+    scrollRef=${scrollRef}
+    style=${{ width: "100%", marginTop: "1em", ...style }}
+  />`;
+
+  return result;
+};
 
 /**
  * Renders the ChatView component.
@@ -28,6 +76,90 @@ export const ChatView = ({
   indented,
   numbered = true,
 }) => {
+  const collapsedMessages = resolveMessages(messages);
+  const result = html` <div style=${style}>
+    ${collapsedMessages.map((msg, index) => {
+      const number =
+        collapsedMessages.length > 1 && numbered ? index + 1 : undefined;
+      return html`<${ChatMessageRow}
+        id=${id}
+        number=${number}
+        resolvedMessage=${msg}
+        indented=${indented}
+        toolCallStyle=${toolCallStyle}
+      />`;
+    })}
+  </div>`;
+  return result;
+};
+
+/**
+ * Renders the ChatMessage component.
+ *
+ * @param {Object} props - The properties passed to the component.
+ * @param {string} props.id - The ID for the chat view.
+ * @param {number} [props.number] - The message number
+ * @param {ResolvedMessage} props.resolvedMessage - The array of chat messages.
+ * @param {"compact" | "complete"} [props.toolCallStyle] - Whether to show tool calls
+ * @param {boolean} props.indented - Whether the chatview has indented messages
+ * @returns {import("preact").JSX.Element} The component.
+ */
+export const ChatMessageRow = ({
+  id,
+  number,
+  resolvedMessage,
+  toolCallStyle,
+  indented,
+}) => {
+  if (number) {
+    return html` <div
+      style=${{
+        display: "grid",
+        gridTemplateColumns: "max-content auto",
+        columnGap: "0.4em",
+      }}
+    >
+      <div
+        style=${{
+          fontSize: FontSize.smaller,
+          ...TextStyle.secondary,
+          marginTop: "0.1em",
+        }}
+      >
+        ${number}
+      </div>
+      <${ChatMessage}
+        id=${`${id}-chat-messages`}
+        message=${resolvedMessage.message}
+        toolMessages=${resolvedMessage.toolMessages}
+        indented=${indented}
+        toolCallStyle=${toolCallStyle}
+      />
+    </div>`;
+  } else {
+    return html`<${ChatMessage}
+      id=${`${id}-chat-messages`}
+      message=${resolvedMessage.message}
+      toolMessages=${resolvedMessage.toolMessages}
+      indented=${indented}
+      toolCallStyle=${toolCallStyle}
+    />`;
+  }
+};
+
+/**
+ * @typedef {Object} ResolvedMessage
+ * @property {import("../types/log").ChatMessageAssistant | import("../types/log").ChatMessageSystem | import("../types/log").ChatMessageUser} message - The main chat message.
+ * @property {import("../types/log").ChatMessageTool[]} [toolMessages] - Optional array of tool-related messages.
+ */
+
+/**
+ * Renders the ChatView component.
+ *
+ * @param {import("../types/log").Messages} messages - The array of chat messages.
+ * @returns {ResolvedMessage[]} The component.
+ */
+export const resolveMessages = (messages) => {
   // Filter tool messages into a sidelist that the chat stream
   // can use to lookup the tool responses
 
@@ -88,49 +220,7 @@ export const ChatView = ({
   if (systemMessage && systemMessage.content.length > 0) {
     collapsedMessages.unshift({ message: systemMessage });
   }
-
-  const result = html`
-    <div style=${style}>
-      ${collapsedMessages.map((msg, index) => {
-        if (collapsedMessages.length > 1 && numbered) {
-          return html` <div
-            style=${{
-              display: "grid",
-              gridTemplateColumns: "max-content auto",
-              columnGap: "0.4em",
-            }}
-          >
-            <div
-              style=${{
-                fontSize: FontSize.smaller,
-                ...TextStyle.secondary,
-                marginTop: "0.1em",
-              }}
-            >
-              ${index + 1}
-            </div>
-            <${ChatMessage}
-              id=${`${id}-chat-messages`}
-              message=${msg.message}
-              toolMessages=${msg.toolMessages}
-              indented=${indented}
-              toolCallStyle=${toolCallStyle}
-            />
-          </div>`;
-        } else {
-          return html` <${ChatMessage}
-            id=${`${id}-chat-messages`}
-            message=${msg.message}
-            toolMessages=${msg.toolMessages}
-            indented=${indented}
-            toolCallStyle=${toolCallStyle}
-          />`;
-        }
-      })}
-    </div>
-  `;
-
-  return result;
+  return collapsedMessages;
 };
 
 /**

inspect_ai/_view/www/src/components/DownloadButton.mjs

@@ -1,5 +1,5 @@
 import { html } from "htm/preact";
-import api from "../api/index.mjs";
+import api from "../api/index";
 import { FontSize } from "../appearance/Fonts.mjs";
 
 export const DownloadButton = ({ label, fileName, fileContents }) => {

inspect_ai/_view/www/src/components/ExpandablePanel.mjs

@@ -70,10 +70,6 @@ export const ExpandablePanel = ({
     contentsStyle.border = "solid var(--bs-light-border-subtle) 1px";
   }
 
-  if (!showToggle) {
-    contentsStyle.marginBottom = "1em";
-  }
-
   return html`<div
       class="expandable-panel"
       ref=${contentsRef}

inspect_ai/_view/www/src/components/LargeModal.mjs

@@ -5,25 +5,24 @@ import { FontSize } from "../appearance/Fonts.mjs";
 import { ProgressBar } from "./ProgressBar.mjs";
 import { MessageBand } from "./MessageBand.mjs";
 
-export const LargeModal = (props) => {
-  const {
-    id,
-    title,
-    detail,
-    detailTools,
-    footer,
-    onkeyup,
-    visible,
-    onHide,
-    showProgress,
-    children,
-    initialScrollPositionRef,
-    setInitialScrollPosition,
-    warning,
-    warningHidden,
-    setWarningHidden,
-  } = props;
-
+export const LargeModal = ({
+  id,
+  title,
+  detail,
+  detailTools,
+  footer,
+  onkeyup,
+  visible,
+  onHide,
+  showProgress,
+  children,
+  initialScrollPositionRef,
+  setInitialScrollPosition,
+  warning,
+  warningHidden,
+  setWarningHidden,
+  scrollRef,
+}) => {
   // The footer
   const modalFooter = footer
     ? html`<div class="modal-footer">${footer}</div>`
@@ -31,7 +30,7 @@ export const LargeModal = (props) => {
 
   // Support restoring the scroll position
   // but only do this for the first time that the children are set
-  const scrollRef = useRef(/** @type {HTMLElement|null} */ (null));
+  scrollRef = scrollRef || useRef(/** @type {HTMLElement|null} */ (null));
   useEffect(() => {
     if (scrollRef.current) {
       setTimeout(() => {

inspect_ai/_view/www/src/components/TabSet.mjs

@@ -38,13 +38,15 @@ export const TabPanel = ({
   selected,
   style,
   scrollable,
+  scrollRef,
   classes,
   scrollPosition,
   setScrollPosition,
   children,
 }) => {
   const tabContentsId = computeTabContentsId(id, index);
-  const tabContentsRef = useRef(/** @type {HTMLElement|null} */ (null));
+  const tabContentsRef =
+    scrollRef || useRef(/** @type {HTMLElement|null} */ (null));
   useEffect(() => {
     setTimeout(() => {
       if (

inspect_ai/_view/www/src/components/VirtualList.mjs

@@ -1,98 +1,280 @@
-// preact-virtual-list.mjs
-
-import { html, Component } from "htm/preact";
-import { createRef } from "preact";
+import { html } from "htm/preact";
+import { useRef, useState, useEffect, useMemo } from "preact/hooks";
+import { forwardRef, useImperativeHandle } from "preact/compat";
 import { throttle } from "../utils/sync.mjs";
 
-const STYLE_INNER =
-  "position:relative; overflow:hidden; width:100%; min-height:100%;";
-const STYLE_CONTENT =
-  "position:absolute; top:0; left:0; height:100%; width:100%; overflow:visible;";
+/**
+ * A virtualized list component that efficiently renders large lists by only
+ * rendering the items that are currently visible in the viewport.
+ * Supports dynamic row heights that are measured after rendering.
+ *
+ * @template T
+ * @param {Object} props - The component props
+ * @param {T[]} props.data - Array of items to be rendered in the list
+ * @param {(item: T, index: number) => preact.VNode} props.renderRow - Function to render each row
+ * @param {number} [props.overscanCount=15] - Number of extra rows to render above and below the visible area
+ * @param {number} [props.estimatedRowHeight=50] - Estimated height of each row before measurement
+ * @param {boolean} [props.sync=false] - If true, forces a re-render on scroll
+ * @param {import("preact").RefObject<HTMLElement>} [props.scrollRef] - Optional ref for the scroll container
+ * @param {import("preact").Ref<{ scrollToIndex: (index: number) => void }>} ref - Ref object exposing the list's methods
+ * @returns {preact.VNode} The virtualized list component
+ */
+export const VirtualList = forwardRef(
+  (
+    /** @type {props} */ {
+      data,
+      renderRow,
+      overscanCount = 15,
+      estimatedRowHeight = 50,
+      sync = false,
+      scrollRef,
+      ...props
+    },
+    ref,
+  ) => {
+    const [height, setHeight] = useState(0);
+    const [offset, setOffset] = useState(0);
+
+    const [listMetrics, setListMetrics] = useState({
+      rowHeights: new Map(),
+      totalHeight: data.length * estimatedRowHeight,
+    });
+
+    const baseRef = useRef(null);
+    const containerRef = useRef(null);
+    const rowRefs = useRef(new Map());
+
+    // Function to get row height (measured or estimated)
+    const getRowHeight = (index) => {
+      return listMetrics.rowHeights.get(index) || estimatedRowHeight;
+    };
+
+    // Calculate row positions based on current heights
+    const rowPositions = useMemo(() => {
+      let currentPosition = 0;
+      const positions = new Map();
+
+      for (let i = 0; i < data.length; i++) {
+        positions.set(i, currentPosition);
+        currentPosition += getRowHeight(i);
+      }
+
+      return positions;
+    }, [listMetrics.rowHeights, data.length]);
+
+    // Expose scrollToIndex method via ref
+    useImperativeHandle(
+      ref,
+      () => ({
+        focus: () => {
+          baseRef.current;
+        },
+        scrollToIndex: (index, direction) => {
+          const scrollElement = scrollRef?.current || baseRef.current;
+          if (!scrollElement || index < 0 || index >= data.length) return;
 
-export class VirtualList extends Component {
-  /** @type {HTMLElement} */ base;
+          const currentScrollTop = scrollElement.scrollTop;
+          const viewportHeight = scrollElement.offsetHeight;
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      height: 0,
-      offset: 0,
+          // Get position and height of target row
+          const rowTop = rowPositions.get(index) || 0;
+          const rowHeight = getRowHeight(index);
+          const rowBottom = rowTop + rowHeight;
+
+          // If this is already visible, don't scroll
+          const isVisible =
+            rowTop >= currentScrollTop &&
+            rowBottom <= currentScrollTop + viewportHeight;
+          if (isVisible) {
+            return;
+          }
+
+          // Calculate new scroll position based on direction
+          let newScrollTop;
+          if (direction === "up") {
+            // Align top of element with top of viewport
+            newScrollTop = rowTop;
+          } else {
+            // Align bottom of element with bottom of viewport
+            newScrollTop = rowBottom - viewportHeight;
+          }
+
+          // Clamp scroll position to valid range
+          newScrollTop = Math.max(
+            0,
+            Math.min(newScrollTop, listMetrics.totalHeight - viewportHeight),
+          );
+          scrollElement.scrollTop = newScrollTop;
+        },
+      }),
+      [rowPositions, data.length],
+    );
+
+    // Measure rendered rows and update heights if needed
+    const measureRows = () => {
+      // Keep track of updated heights
+      let updates = [];
+
+      rowRefs.current.forEach((element, index) => {
+        if (element) {
+          const measuredHeight = element.offsetHeight;
+          // If the measured height is different, schedule an update
+          if (
+            measuredHeight &&
+            measuredHeight !== listMetrics.rowHeights.get(index)
+          ) {
+            updates.push([index, measuredHeight]);
+          }
+        }
+      });
+
+      // If no rows changed, do nothing
+      if (updates.length === 0) return;
+
+      // Create a new Map of rowHeights so we don't mutate state directly
+      const newHeights = new Map(listMetrics.rowHeights);
+      updates.forEach(([index, height]) => {
+        newHeights.set(index, height);
+      });
+
+      // Recompute total height only once
+      let newTotalHeight = 0;
+      for (let i = 0; i < data.length; i++) {
+        newTotalHeight += newHeights.get(i) || estimatedRowHeight;
+      }
+
+      // Now update our single state object in one go:
+      setListMetrics({
+        rowHeights: newHeights,
+        totalHeight: newTotalHeight,
+      });
     };
-    this.resize = () => {
-      if (this.state.height !== this.base.offsetHeight) {
-        this.setState({ height: this.base.offsetHeight });
+
+    // Handle container resize
+    const resize = () => {
+      const scrollElement = scrollRef?.current || baseRef.current;
+      if (scrollElement && height !== scrollElement.offsetHeight) {
+        setHeight(scrollElement.offsetHeight);
       }
     };
-    this.handleScroll = throttle(() => {
-      if (this.base) {
-        this.setState({ offset: this.base.scrollTop });
+
+    // Handle scroll with throttling
+    const handleScroll = throttle(() => {
+      const scrollElement = scrollRef?.current || baseRef.current;
+      if (scrollElement) {
+        setOffset(scrollElement.scrollTop);
       }
-      if (this.props.sync) {
-        this.forceUpdate();
+      if (sync) {
+        setOffset((prev) => prev);
       }
     }, 100);
-    this.containerRef = createRef();
-  }
-
-  componentDidUpdate() {
-    this.resize();
-  }
-
-  componentDidMount() {
-    this.resize();
-    window.addEventListener("resize", this.resize);
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener("resize", this.resize);
-  }
-
-  render(
-    { data, rowMap, renderRow, overscanCount = 10, ...props },
-    { offset = 0, height = 0 },
-  ) {
-    // Compute the start and ending rows
-    const firstVisibleIdx = rowMap.findIndex((row) => {
-      return row.start + row.height >= offset;
-    });
-    const firstIndex = firstVisibleIdx > -1 ? firstVisibleIdx : 0;
 
-    const lastVisibleIdx = rowMap.findIndex((row) => {
-      return row.start + row.height >= offset + height;
+    // Setup scroll and resize listeners
+    useEffect(() => {
+      resize();
+      const scrollElement = scrollRef?.current || baseRef.current;
+
+      if (scrollElement) {
+        scrollElement.addEventListener("scroll", handleScroll);
+        window.addEventListener("resize", resize);
+
+        return () => {
+          scrollElement.removeEventListener("scroll", handleScroll);
+          window.removeEventListener("resize", resize);
+        };
+      }
+    }, [scrollRef?.current]);
+
+    // Measure rows after render
+    useEffect(() => {
+      measureRows();
     });
-    const lastIndex = lastVisibleIdx > -1 ? lastVisibleIdx : rowMap.length - 1;
-
-    // Compute the total height
-    const lastRow = rowMap[rowMap.length - 1];
-    const totalHeight = lastRow ? lastRow.start + lastRow.height : 0;
-
-    // Compute the visible rows (including overscan)
-    let visibleRowCount = lastIndex - firstIndex;
-    if (overscanCount) {
-      visibleRowCount += overscanCount;
-    }
-
-    // Account for overscan
-    const start = firstVisibleIdx;
-    const end = Math.min(data.length, start + visibleRowCount);
-
-    const selection = data.slice(start, end);
-
-    // const firstRow
-    const top = firstVisibleIdx !== -1 ? rowMap[firstVisibleIdx].start : 0;
-    const rows = html`<div onscroll=${this.handleScroll} ...${props}>
-      <div style=${`${STYLE_INNER} height:${totalHeight}px;`}>
-        <div style=${`${STYLE_CONTENT} top:${top}px;`} ref=${this.containerRef}>
-          ${selection.map((item, index) => {
-            const component = renderRow(item, start + index);
-
-            return html` <div key=${`list-item-${start + index}`}>
-              ${component}
-            </div>`;
-          })}
+
+    const findRowAtOffset = (targetOffset) => {
+      if (targetOffset <= 0) return 0;
+      if (targetOffset >= listMetrics.totalHeight) return data.length - 1;
+
+      let low = 0;
+      let high = data.length - 1;
+      let lastValid = 0;
+
+      while (low <= high) {
+        const mid = Math.floor((low + high) / 2);
+        const rowStart = rowPositions.get(mid) || 0;
+
+        if (rowStart <= targetOffset) {
+          lastValid = mid;
+          low = mid + 1;
+        } else {
+          high = mid - 1;
+        }
+      }
+      return lastValid;
+    };
+
+    const firstVisibleIdx = findRowAtOffset(offset);
+    const lastVisibleIdx = findRowAtOffset(offset + height);
+
+    // Calculate range of rows to render including overscan
+    const start = Math.max(0, firstVisibleIdx - overscanCount);
+    const end = Math.min(data.length, lastVisibleIdx + overscanCount);
+
+    // Memoize the rendered rows to prevent unnecessary re-renders
+    const renderedRows = useMemo(() => {
+      const selection = data.slice(start, end);
+      return selection.map((item, index) => {
+        const actualIndex = start + index;
+        return html`
+          <div
+            key=${`list-item-${actualIndex}`}
+            ref=${(el) => {
+              if (el) {
+                rowRefs.current.set(actualIndex, el);
+              } else {
+                rowRefs.current.delete(actualIndex);
+              }
+            }}
+          >
+            ${renderRow(item, actualIndex)}
+          </div>
+        `;
+      });
+    }, [data, start, end, renderRow]);
+
+    const style_inner = {
+      position: "relative",
+      overflow: scrollRef?.current ? "visible" : "hidden",
+      width: "100%",
+      minHeight: "100%",
+    };
+
+    const style_content = {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      height: "100%",
+      width: "100%",
+      overflow: "visible",
+    };
+
+    const top = rowPositions.get(start) || 0;
+
+    // Only attach onscroll to baseRef if no scrollRef is provided
+    const scrollProps = scrollRef ? {} : { onscroll: handleScroll };
+
+    return html`
+      <div ref=${baseRef} ...${props} ...${scrollProps}>
+        <div
+          style=${{ ...style_inner, height: `${listMetrics.totalHeight}px` }}
+        >
+          <div
+            style=${{ ...style_content, top: `${top}px` }}
+            ref=${containerRef}
+          >
+            ${renderedRows}
+          </div>
         </div>
       </div>
-    </div>`;
-    return rows;
-  }
-}
+    `;
+  },
+);