inspect-ai 0.3.81__py3-none-any.whl → 0.3.82__py3-none-any.whl

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

@@ -2,17 +2,19 @@ import clsx from "clsx";
 import {
   CSSProperties,
   FC,
+  memo,
   ReactNode,
   useCallback,
-  useEffect,
   useRef,
   useState,
 } from "react";
 import { ApplicationIcons } from "../appearance/icons";
+import { useCollapsedState } from "../state/hooks";
 import { useResizeObserver } from "../utils/dom";
 import "./ExpandablePanel.css";
 
 interface ExpandablePanelProps {
+  id: string;
   collapse: boolean;
   border?: boolean;
   lines?: number;
@@ -20,72 +22,64 @@ interface ExpandablePanelProps {
   className?: string | string[];
 }
 
-export const ExpandablePanel: FC<ExpandablePanelProps> = ({
-  collapse,
-  border,
-  lines = 15,
-  children,
-  className,
-}) => {
-  const [isCollapsed, setIsCollapsed] = useState(collapse);
-  const [showToggle, setShowToggle] = useState(false);
-  const lineHeightRef = useRef<number>(0);
+export const ExpandablePanel: FC<ExpandablePanelProps> = memo(
+  ({ id, collapse, border, lines = 15, children, className }) => {
+    const [collapsed, setCollapsed] = useCollapsedState(id, collapse);
 
-  useEffect(() => {
-    setIsCollapsed(collapse);
-  }, [collapse]);
+    const [showToggle, setShowToggle] = useState(false);
+    const lineHeightRef = useRef<number>(0);
 
-  const checkOverflow = useCallback(
-    (entry: ResizeObserverEntry) => {
-      const element = entry.target as HTMLDivElement;
+    const checkOverflow = useCallback(
+      (entry: ResizeObserverEntry) => {
+        const element = entry.target as HTMLDivElement;
 
-      // Calculate line height if we haven't yet
-      if (!lineHeightRef.current) {
-        const computedStyle = window.getComputedStyle(element);
-        lineHeightRef.current = parseInt(computedStyle.lineHeight) || 16; // fallback to 16px if can't get line height
-      }
+        // Calculate line height if we haven't yet
+        if (!lineHeightRef.current) {
+          const computedStyle = window.getComputedStyle(element);
+          lineHeightRef.current = parseInt(computedStyle.lineHeight) || 16; // fallback to 16px if can't get line height
+        }
 
-      const maxCollapsedHeight = lines * lineHeightRef.current;
-      const contentHeight = element.scrollHeight;
+        const maxCollapsedHeight = lines * lineHeightRef.current;
+        const contentHeight = element.scrollHeight;
 
-      setShowToggle(contentHeight > maxCollapsedHeight);
-    },
-    [lines],
-  );
+        setShowToggle(contentHeight > maxCollapsedHeight);
+      },
+      [lines],
+    );
+    const contentRef = useResizeObserver(checkOverflow);
 
-  const contentRef = useResizeObserver(checkOverflow);
+    const baseStyles = {
+      overflow: "hidden",
+      ...(collapsed && {
+        maxHeight: `${lines}em`,
+      }),
+    };
 
-  const baseStyles = {
-    overflow: "hidden",
-    ...(isCollapsed && {
-      maxHeight: `${lines}em`,
-    }),
-  };
+    return (
+      <div className={clsx(className)}>
+        <div
+          style={baseStyles}
+          ref={contentRef}
+          className={clsx(
+            "expandable-panel",
+            collapsed ? "expandable-collapsed" : undefined,
+            border ? "expandable-bordered" : undefined,
+          )}
+        >
+          {children}
+        </div>
 
-  return (
-    <div className={clsx(className)}>
-      <div
-        style={baseStyles}
-        ref={contentRef}
-        className={clsx(
-          "expandable-panel",
-          isCollapsed ? "expandable-collapsed" : undefined,
-          border ? "expandable-bordered" : undefined,
+        {showToggle && (
+          <MoreToggle
+            collapsed={collapsed}
+            setCollapsed={setCollapsed}
+            border={!border}
+          />
         )}
-      >
-        {children}
       </div>
-
-      {showToggle && (
-        <MoreToggle
-          collapsed={isCollapsed}
-          setCollapsed={setIsCollapsed}
-          border={!border}
-        />
-      )}
-    </div>
-  );
-};
+    );
+  },
+);
 
 interface MoreToggleProps {
   collapsed: boolean;
@@ -105,13 +99,14 @@ const MoreToggle: FC<MoreToggleProps> = ({
     ? ApplicationIcons["expand-down"]
     : ApplicationIcons.collapse.up;
 
+  const handleClick = useCallback(() => {
+    setCollapsed(!collapsed);
+  }, [setCollapsed, collapsed]);
+
   return (
     <div className={`more-toggle ${border ? "bordered" : ""}`} style={style}>
       <div className="more-toggle-container">
-        <button
-          className="btn more-toggle-button"
-          onClick={() => setCollapsed(!collapsed)}
-        >
+        <button className="btn more-toggle-button" onClick={handleClick}>
           <i className={icon} />
           {text}
         </button>

inspect_ai/_view/www/src/components/FindBand.tsx

@@ -1,13 +1,13 @@
 import { FC, KeyboardEvent, useCallback, useEffect, useRef } from "react";
 import { ApplicationIcons } from "../appearance/icons";
+import { useStore } from "../state/store";
 import "./FindBand.css";
 
-interface FindBandProps {
-  hideBand: () => void;
-}
+interface FindBandProps {}
 
-export const FindBand: FC<FindBandProps> = ({ hideBand }) => {
+export const FindBand: FC<FindBandProps> = () => {
   const searchBoxRef = useRef<HTMLInputElement>(null);
+  const storeHideFind = useStore((state) => state.appActions.hideFind);
 
   useEffect(() => {
     setTimeout(() => {
@@ -84,14 +84,22 @@ export const FindBand: FC<FindBandProps> = ({ hideBand }) => {
   const handleKeyDown = useCallback(
     (e: KeyboardEvent<HTMLInputElement>) => {
       if (e.key === "Escape") {
-        hideBand();
+        storeHideFind();
       } else if (e.key === "Enter") {
         handleSearch(false);
       }
     },
-    [hideBand, handleSearch],
+    [storeHideFind, handleSearch],
   );
 
+  const showSearch = useCallback(() => {
+    handleSearch(true);
+  }, [handleSearch]);
+
+  const hideSearch = useCallback(() => {
+    handleSearch(false);
+  }, [handleSearch]);
+
   return (
     <div className="findBand">
       <input
@@ -105,7 +113,7 @@ export const FindBand: FC<FindBandProps> = ({ hideBand }) => {
         type="button"
         title="Previous match"
         className="btn next"
-        onClick={() => handleSearch(true)}
+        onClick={showSearch}
       >
         <i className={ApplicationIcons.arrows.up} />
       </button>
@@ -113,7 +121,7 @@ export const FindBand: FC<FindBandProps> = ({ hideBand }) => {
         type="button"
         title="Next match"
         className="btn prev"
-        onClick={() => handleSearch(false)}
+        onClick={hideSearch}
       >
         <i className={ApplicationIcons.arrows.down} />
       </button>
@@ -121,7 +129,7 @@ export const FindBand: FC<FindBandProps> = ({ hideBand }) => {
         type="button"
         title="Close"
         className="btn close"
-        onClick={hideBand}
+        onClick={storeHideFind}
       >
         <i className={ApplicationIcons.close} />
       </button>

inspect_ai/_view/www/src/components/HumanBaselineView.tsx

@@ -133,7 +133,7 @@ export const HumanBaselineView: FC<HumanBaselineViewProps> = ({
           />
         </div>
         <div className={"asciinema-body"}>
-          <LightboxCarousel slides={player_fns} />
+          <LightboxCarousel id="ascii-cinema" slides={player_fns} />
         </div>
       </div>
     </div>

inspect_ai/_view/www/src/components/JsonPanel.tsx

@@ -1,20 +1,18 @@
 import clsx from "clsx";
-import { highlightElement } from "prismjs";
-import React, { useEffect, useMemo, useRef } from "react";
+import { CSSProperties, FC, useMemo } from "react";
+import { usePrismHighlight } from "../state/hooks";
 import "./JsonPanel.css";
 
-const kPrismRenderMaxSize = 250000;
-
 interface JSONPanelProps {
   id?: string;
   data?: unknown;
   json?: string;
   simple?: boolean;
-  style?: React.CSSProperties;
+  style?: CSSProperties;
   className?: string | string[];
 }
 
-export const JSONPanel: React.FC<JSONPanelProps> = ({
+export const JSONPanel: FC<JSONPanelProps> = ({
   id,
   json,
   data,
@@ -22,30 +20,22 @@ export const JSONPanel: React.FC<JSONPanelProps> = ({
   style,
   className,
 }) => {
-  const codeRef = useRef<HTMLElement>(null);
   const sourceCode = useMemo(() => {
     return json || JSON.stringify(resolveBase64(data), undefined, 2);
   }, [json, data]);
-
-  useEffect(() => {
-    if (sourceCode.length < kPrismRenderMaxSize && codeRef.current) {
-      highlightElement(codeRef.current);
-    }
-  }, [sourceCode]);
+  const prismParentRef = usePrismHighlight(sourceCode);
 
   return (
-    <pre
-      className={clsx("json-panel", simple ? "simple" : "", className)}
-      style={style}
-    >
-      <code
-        id={id}
-        ref={codeRef}
-        className={clsx("source-code", "language-javascript")}
+    <div ref={prismParentRef}>
+      <pre
+        className={clsx("json-panel", simple ? "simple" : "", className)}
+        style={style}
       >
-        {sourceCode}
-      </code>
-    </pre>
+        <code id={id} className={clsx("source-code", "language-javascript")}>
+          {sourceCode}
+        </code>
+      </pre>
+    </div>
   );
 };
 

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

@@ -1,15 +1,7 @@
 import clsx from "clsx";
 import { ProgressBar } from "./ProgressBar";
 
-import {
-  FC,
-  ReactNode,
-  RefObject,
-  UIEvent,
-  useCallback,
-  useEffect,
-  useRef,
-} from "react";
+import { FC, ReactNode, RefObject, useRef } from "react";
 import styles from "./LargeModal.module.css";
 
 export interface ModalTool {
@@ -35,8 +27,6 @@ interface LargeModalProps {
   onkeyup: (e: any) => void;
   onHide: () => void;
   scrollRef: RefObject<HTMLDivElement | null>;
-  initialScrollPositionRef: RefObject<number>;
-  setInitialScrollPosition: (position: number) => void;
   children: ReactNode;
 }
 
@@ -51,8 +41,6 @@ export const LargeModal: FC<LargeModalProps> = ({
   visible,
   onHide,
   showProgress,
-  initialScrollPositionRef,
-  setInitialScrollPosition,
   scrollRef,
 }) => {
   // The footer
@@ -67,27 +55,6 @@ export const LargeModal: FC<LargeModalProps> = ({
   const modalRef = useRef(null);
   scrollRef = scrollRef || modalRef;
 
-  useEffect(() => {
-    if (scrollRef.current) {
-      setTimeout(() => {
-        if (
-          scrollRef.current &&
-          initialScrollPositionRef.current &&
-          scrollRef.current.scrollTop !== initialScrollPositionRef?.current
-        ) {
-          scrollRef.current.scrollTop = initialScrollPositionRef.current;
-        }
-      }, 0);
-    }
-  }, []);
-
-  const onScroll = useCallback(
-    (e: UIEvent<HTMLDivElement>) => {
-      setInitialScrollPosition(e.currentTarget.scrollTop);
-    },
-    [setInitialScrollPosition],
-  );
-
   return (
     <div
       id={id}
@@ -149,7 +116,7 @@ export const LargeModal: FC<LargeModalProps> = ({
             </button>
           </div>
           <ProgressBar animating={showProgress} />
-          <div className={"modal-body"} ref={scrollRef} onScroll={onScroll}>
+          <div className={"modal-body"} ref={scrollRef}>
             {children}
           </div>
           {modalFooter}

inspect_ai/_view/www/src/components/LightboxCarousel.tsx

@@ -1,6 +1,7 @@
 import clsx from "clsx";
-import { FC, ReactNode, useCallback, useEffect, useState } from "react";
+import { FC, MouseEvent, ReactNode, useCallback, useEffect } from "react";
 import { ApplicationIcons } from "../appearance/icons";
+import { useProperty } from "../state/hooks";
 import styles from "./LightboxCarousel.module.css";
 
 interface Slide {
@@ -9,16 +10,25 @@ interface Slide {
 }
 
 interface LightboxCarouselProps {
+  id: string;
   slides: Slide[];
 }
 
 /**
  * LightboxCarousel component provides a carousel with lightbox functionality.
  */
-export const LightboxCarousel: FC<LightboxCarouselProps> = ({ slides }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [showOverlay, setShowOverlay] = useState(false);
-  const [currentIndex, setCurrentIndex] = useState(0);
+export const LightboxCarousel: FC<LightboxCarouselProps> = ({ id, slides }) => {
+  const [isOpen, setIsOpen] = useProperty(id, "isOpen", {
+    defaultValue: false,
+  });
+
+  const [currentIndex, setCurrentIndex] = useProperty(id, "currentIndex", {
+    defaultValue: 0,
+  });
+
+  const [showOverlay, setShowOverlay] = useProperty(id, "showOverlay", {
+    defaultValue: false,
+  });
 
   const openLightbox = useCallback(
     (index: number) => {
@@ -28,7 +38,7 @@ export const LightboxCarousel: FC<LightboxCarouselProps> = ({ slides }) => {
       // Slight delay before setting isOpen so the fade-in starts from opacity: 0
       setTimeout(() => setIsOpen(true), 10);
     },
-    [setCurrentIndex, setShowOverlay],
+    [setIsOpen],
   );
 
   const closeLightbox = useCallback(() => {
@@ -46,13 +56,11 @@ export const LightboxCarousel: FC<LightboxCarouselProps> = ({ slides }) => {
   }, [isOpen, showOverlay, setShowOverlay]);
 
   const showNext = useCallback(() => {
-    setCurrentIndex((prev) => {
-      return (prev + 1) % slides.length;
-    });
+    setCurrentIndex(currentIndex + 1);
   }, [slides, setCurrentIndex]);
 
   const showPrev = useCallback(() => {
-    setCurrentIndex((prev) => (prev - 1 + slides.length) % slides.length);
+    setCurrentIndex((currentIndex - 1 + slides.length) % slides.length);
   }, [slides, setCurrentIndex]);
 
   // Keyboard Navigation
@@ -73,6 +81,13 @@ export const LightboxCarousel: FC<LightboxCarouselProps> = ({ slides }) => {
     return () => window.removeEventListener("keyup", handleKeyUp);
   }, [isOpen, showNext, showPrev]);
 
+  const handleThumbClick = useCallback(
+    (e: MouseEvent<HTMLDivElement>) => {
+      const index = Number((e.currentTarget as HTMLDivElement).dataset.index);
+      openLightbox(index);
+    },
+    [openLightbox],
+  );
   return (
     <div className={clsx("lightbox-carousel-container")}>
       <div className={clsx(styles.carouselThumbs)}>
@@ -80,8 +95,9 @@ export const LightboxCarousel: FC<LightboxCarouselProps> = ({ slides }) => {
           return (
             <div
               key={index}
+              data-index={index}
               className={clsx(styles.carouselThumb)}
-              onClick={() => openLightbox(index)}
+              onClick={handleThumbClick}
             >
               <div>{slide.label}</div>
               <div>

inspect_ai/_view/www/src/components/LiveVirtualList.module.css

@@ -0,0 +1,11 @@
+.progressContainer {
+  width: 100%;
+  display: flex;
+  align-content: flex-start;
+  justify-content: flex-start;
+  margin-left: 2.5em;
+}
+
+.progressText {
+  margin-left: 0.4em;
+}

inspect_ai/_view/www/src/components/LiveVirtualList.tsx

@@ -0,0 +1,177 @@
+import clsx from "clsx";
+import {
+  ReactNode,
+  RefObject,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { Virtuoso, VirtuosoHandle } from "react-virtuoso";
+import { usePrevious, useProperty } from "../state/hooks";
+import { useRafThrottle, useVirtuosoState } from "../state/scrolling";
+import { PulsingDots } from "./PulsingDots";
+
+import styles from "./LiveVirtualList.module.css";
+
+interface LiveVirtualListProps<T> {
+  id: string;
+  className?: string | string[];
+
+  // The scroll ref to use for the virtual list
+  scrollRef?: RefObject<HTMLDivElement | null>;
+
+  // The data and rendering function for the data
+  data: T[];
+  renderRow: (index: number, item: T) => ReactNode;
+
+  // Whether the virtual list is live (controls its follow
+  // behavior)
+  live?: boolean;
+
+  // The progress message to show (if any)
+  // no message show if progress isn't provided
+  showProgress?: boolean;
+}
+
+/**
+ * Renders the Transcript component.
+ */
+export const LiveVirtualList = <T,>({
+  id,
+  className,
+  data,
+  renderRow,
+  scrollRef,
+  live,
+  showProgress,
+}: LiveVirtualListProps<T>) => {
+  // The list handle and list state management
+  const listHandle = useRef<VirtuosoHandle>(null);
+  const { getRestoreState, isScrolling } = useVirtuosoState(
+    listHandle,
+    `live-virtual-list-${id}`,
+  );
+
+  // Track whether we're following output
+  const [followOutput, setFollowOutput] = useProperty<boolean | null>(
+    id,
+    "follow",
+    {
+      defaultValue: null,
+    },
+  );
+  const isAutoScrollingRef = useRef(false);
+
+  // Only we first load set the defaul value for following
+  // based upon whether or not the transcript is 'live'
+  useEffect(() => {
+    if (followOutput === null) {
+      setFollowOutput(!!live);
+    }
+  }, []);
+
+  // Track whether we were previously running so we can
+  // decide whether to pop up to the top
+  const prevLive = usePrevious(live);
+  useEffect(() => {
+    // When we finish running, if we are following output
+    // then scroll up to the top
+    if (!live && prevLive && followOutput && scrollRef?.current) {
+      setFollowOutput(false);
+      setTimeout(() => {
+        if (scrollRef.current) {
+          scrollRef.current.scrollTo({ top: 0, behavior: "instant" });
+        }
+      }, 100);
+    }
+  }, [live, followOutput]);
+
+  const handleScroll = useRafThrottle(() => {
+    // Skip processing if auto-scrolling is in progress
+    if (isAutoScrollingRef.current) return;
+
+    // If we're not running, don't mess with auto scrolling
+    if (!live) return;
+
+    // Make the bottom start following
+    if (scrollRef?.current && listHandle.current) {
+      const parent = scrollRef.current;
+      const isAtBottom =
+        parent.scrollHeight - parent.scrollTop <= parent.clientHeight + 30;
+
+      if (isAtBottom && !followOutput) {
+        setFollowOutput(true);
+      } else if (!isAtBottom && followOutput) {
+        setFollowOutput(false);
+      }
+    }
+  }, [setFollowOutput, followOutput, live]);
+
+  const heightChanged = useCallback(
+    (height: number) => {
+      requestAnimationFrame(() => {
+        if (followOutput && live && scrollRef?.current) {
+          isAutoScrollingRef.current = true;
+          listHandle.current?.scrollTo({ top: height });
+          requestAnimationFrame(() => {
+            isAutoScrollingRef.current = false;
+          });
+        }
+      });
+    },
+    [scrollRef, followOutput, live],
+  );
+
+  useEffect(() => {
+    // Force a re-render after initial mount
+    // This is here only because in VScode, for some reason,
+    // when this transcript is restored, the height isn't computed
+    // properly on the first render. This basically gives it a second
+    // change to compute the height and lay itself out.
+    const timer = setTimeout(() => {
+      forceUpdate();
+    }, 0);
+    return () => clearTimeout(timer);
+  }, []);
+
+  const [, forceRender] = useState({});
+  const forceUpdate = useCallback(() => forceRender({}), []);
+
+  const Footer = () => {
+    return showProgress ? (
+      <div className={clsx(styles.progressContainer)}>
+        <PulsingDots subtle={false} size="medium" />
+      </div>
+    ) : undefined;
+  };
+
+  useEffect(() => {
+    // Listen to scroll events
+    const parent = scrollRef?.current;
+    if (parent) {
+      parent.addEventListener("scroll", handleScroll);
+      return () => parent.removeEventListener("scroll", handleScroll);
+    }
+  }, [scrollRef, handleScroll]);
+
+  return (
+    <Virtuoso
+      ref={listHandle}
+      customScrollParent={scrollRef?.current ? scrollRef.current : undefined}
+      style={{ height: "100%", width: "100%" }}
+      data={data}
+      defaultItemHeight={250}
+      itemContent={renderRow}
+      increaseViewportBy={{ top: 1000, bottom: 1000 }}
+      overscan={{ main: 2, reverse: 2 }}
+      className={clsx("transcript", className)}
+      isScrolling={isScrolling}
+      restoreStateFrom={getRestoreState()}
+      totalListHeightChanged={heightChanged}
+      components={{
+        Footer,
+      }}
+    />
+  );
+};

inspect_ai/_view/www/src/components/MarkdownDiv.tsx

@@ -1,15 +1,15 @@
 import clsx from "clsx";
 import markdownit from "markdown-it";
-import React from "react";
+import { CSSProperties, forwardRef } from "react";
 import "./MarkdownDiv.css";
 
 interface MarkdownDivProps {
   markdown: string;
-  style?: React.CSSProperties;
+  style?: CSSProperties;
   className?: string | string[];
 }
 
-export const MarkdownDiv = React.forwardRef<HTMLDivElement, MarkdownDivProps>(
+export const MarkdownDiv = forwardRef<HTMLDivElement, MarkdownDivProps>(
   ({ markdown, style, className }, ref) => {
     // Escape all tags
     const escaped = markdown ? escape(markdown) : "";