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

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 default 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,31 +1,46 @@
 import clsx from "clsx";
+import "katex/dist/katex.min.css";
 import markdownit from "markdown-it";
-import React from "react";
+import markdownitKatex from "markdown-it-katex";
+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) => {
+    // Protect backslashes in LaTeX expressions
+    const protectedContent = protectBackslashesInLatex(markdown);
+
     // Escape all tags
-    const escaped = markdown ? escape(markdown) : "";
+    const escaped = escapeHtmlCharacters(protectedContent);
 
     // Pre-render any text that isn't handled by markdown
     const preRendered = preRenderText(escaped);
 
     const protectedText = protectMarkdown(preRendered);
 
-    let renderedHtml = protectedText;
+    // Restore backslashes for LaTeX processing
+    const preparedForMarkdown = restoreBackslashesForLatex(protectedText);
+
+    let renderedHtml = preparedForMarkdown;
     try {
       const md = markdownit({
         breaks: true,
         html: true,
       });
-      renderedHtml = md.render(protectedText);
+
+      // Add KaTeX support
+      md.use(markdownitKatex, {
+        throwOnError: false,
+        errorColor: "#cc0000",
+      });
+
+      renderedHtml = md.render(preparedForMarkdown);
     } catch (ex) {
       console.log("Unable to markdown render content");
       console.error(ex);
@@ -53,7 +68,95 @@ export const MarkdownDiv = React.forwardRef<HTMLDivElement, MarkdownDivProps>(
 const kLetterListPattern = /^([a-zA-Z][).]\s.*?)$/gm;
 const kCommonmarkReferenceLinkPattern = /\[([^\]]*)\]: (?!http)(.*)/g;
 
+const protectBackslashesInLatex = (content: string): string => {
+  if (!content) return content;
+
+  try {
+    // Match inline math: $...$
+    const inlineRegex = /\$(.*?)\$/g;
+
+    // Match block math: $$...$$
+    const blockRegex = /\$\$([\s\S]*?)\$\$/g;
+
+    // Replace backslashes in LaTeX blocks with a placeholder
+    let result = content.replace(inlineRegex, (_match, latex) => {
+      const protectedTex = latex.replace(/\\/g, "___LATEX_BACKSLASH___");
+      return `$${protectedTex}$`;
+    });
+
+    result = result.replace(blockRegex, (_match, latex) => {
+      const protectedTex = latex.replace(/\\/g, "___LATEX_BACKSLASH___");
+      return `$$${protectedTex}$$`;
+    });
+
+    return result;
+  } catch (error) {
+    console.error("Error protecting LaTeX backslashes:", error);
+    return content;
+  }
+};
+
+const restoreBackslashesForLatex = (content: string): string => {
+  if (!content) return content;
+
+  try {
+    // First restore backslashes
+    let result = content.replace(/___LATEX_BACKSLASH___/g, "\\");
+
+    // Then fix dots notation for better KaTeX compatibility
+    // This replaces \dots with \ldots which has better support
+    result = fixDotsNotation(result);
+
+    return result;
+  } catch (error) {
+    console.error("Error restoring LaTeX backslashes:", error);
+    return content; // Return input content if something goes wrong
+  }
+};
+
+// Fixes dots notation in LaTeX by replacing \dots with \ldots for better compatibility
+const fixDotsNotation = (content: string): string => {
+  if (!content) return content;
+
+  try {
+    // Handle both inline and block math
+    // First, fix inline math expressions ($...$)
+    let result = content.replace(/(\$[^$]*?)\\dots([^$]*?\$)/g, "$1\\ldots$2");
+
+    // Then, fix block math expressions ($...$)
+    result = result.replace(/(\$\$[^$]*?)\\dots([^$]*?\$\$)/g, "$1\\ldots$2");
+
+    return result;
+  } catch (error) {
+    console.error("Error fixing dots notation:", error);
+    return content;
+  }
+};
+
+const escapeHtmlCharacters = (content: string): string => {
+  if (!content) return content;
+
+  return content.replace(/[<>&'"]/g, (c: string): string => {
+    switch (c) {
+      case "<":
+        return "&lt;";
+      case ">":
+        return "&gt;";
+      case "&":
+        return "&amp;";
+      case "'":
+        return "&apos;";
+      case '"':
+        return "&quot;";
+      default:
+        throw new Error("Matched a value that isn't replaceable");
+    }
+  });
+};
+
 const preRenderText = (txt: string): string => {
+  if (!txt) return txt;
+
   // eslint-disable-next-line no-misleading-character-class
   txt = txt.replace(/^[\u200B\u200C\u200D\u200E\u200F\uFEFF]/, "");
 
@@ -66,6 +169,8 @@ const preRenderText = (txt: string): string => {
 };
 
 const protectMarkdown = (txt: string): string => {
+  if (!txt) return txt;
+
   // Special handling for commonmark like reference links which might
   // look like:
   // [alias]: http://www.google.com
@@ -74,36 +179,21 @@ const protectMarkdown = (txt: string): string => {
   // Also fools this
   return txt.replaceAll(
     kCommonmarkReferenceLinkPattern,
-    "(open:767A125E)$1(close:767A125E) $2 ",
+    "(open:767A125E)$1(close:767A125E) $2 ",
   );
 };
 
 const unprotectMarkdown = (txt: string): string => {
+  if (!txt) return txt;
+
   txt = txt.replaceAll("(open:767A125E)", "[");
   txt = txt.replaceAll("(close:767A125E)", "]");
   return txt;
 };
 
-const escape = (content: string): string => {
-  return content.replace(/[<>&'"]/g, (c: string): string => {
-    switch (c) {
-      case "<":
-        return "&lt;";
-      case ">":
-        return "&gt;";
-      case "&":
-        return "&amp;";
-      case "'":
-        return "&apos;";
-      case '"':
-        return "&quot;";
-      default:
-        throw new Error("Matched a value that isn't replaceable");
-    }
-  });
-};
-
 function unescapeCodeHtmlEntities(str: string): string {
+  if (!str) return str;
+
   const htmlEntities: Record<string, string> = {
     "&lt;": "<",
     "&gt;": ">",

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

@@ -1,24 +1,31 @@
 import { clsx } from "clsx";
 
-import { FC } from "react";
+import { FC, useCallback } from "react";
 import { ApplicationIcons } from "../appearance/icons";
+import { useMessageVisibility } from "../state/hooks";
 import "./MessageBand.css";
 
 interface MessageBandProps {
+  id: string;
   message: string;
-  hidden: boolean;
-  setHidden: (hidden: boolean) => void;
+  scope?: "sample" | "eval";
   type: "info" | "warning" | "error";
 }
 
 export const MessageBand: FC<MessageBandProps> = ({
+  id,
   message,
-  hidden,
-  setHidden,
   type,
+  scope = "eval",
 }) => {
   const className: string[] = [type];
-  if (hidden) {
+
+  const [visible, setVisible] = useMessageVisibility(id, scope);
+  const handleClick = useCallback(() => {
+    setVisible(false);
+  }, [setVisible]);
+
+  if (!visible) {
     className.push("hidden");
   }
 
@@ -29,9 +36,7 @@ export const MessageBand: FC<MessageBandProps> = ({
       <button
         className={clsx("btn", "message-band-btn", type)}
         title="Close"
-        onClick={() => {
-          setHidden(true);
-        }}
+        onClick={handleClick}
       >
         <i className={ApplicationIcons.close}></i>
       </button>

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

@@ -0,0 +1,38 @@
+.modal {
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
+  flex: 1 1 auto;
+  justify-content: center;
+  max-width: 90vw;
+  margin-top: 3rem;
+  border-radius: var(--bs-border-radius);
+  position: relative;
+  z-index: 1050;
+}
+
+.header {
+  height: 2em;
+}
+
+.modalTitle {
+  font-weight: 600;
+}
+
+.btnClose {
+  height: 0.8em;
+  width: 0.8em;
+}
+
+/* Backdrop styling for the glass effect */
+.backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--inspect-glass-color);
+  opacity: var(--inspect-glass-opacity);
+
+  z-index: 1040;
+}

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

@@ -0,0 +1,77 @@
+import clsx from "clsx";
+import { FC, ReactNode } from "react";
+import styles from "./Modal.module.css";
+
+interface ModalProps {
+  id: string;
+  showing: boolean;
+  setShowing: (showing: boolean) => void;
+  title?: string;
+  children: ReactNode;
+  className?: string | string[];
+}
+
+export const Modal: FC<ModalProps> = ({
+  id,
+  title,
+  showing,
+  setShowing,
+  children,
+  className,
+}) => {
+  return (
+    <>
+      {showing && (
+        <div className={styles.backdrop} onClick={() => setShowing(false)} />
+      )}
+      <div
+        id={id}
+        className={clsx("modal", "fade", showing ? "show" : "", className)}
+        tabIndex={-1}
+        style={{ display: showing ? "block" : "none" }}
+      >
+        <div className={clsx("modal-dialog", styles.modal)}>
+          <div className="modal-content">
+            <div className={clsx("modal-header", styles.header)}>
+              <div
+                className={clsx(
+                  "modal-title",
+                  "text-size-base",
+                  styles.modalTitle,
+                )}
+              >
+                {title}
+              </div>
+              <button
+                type="button"
+                className={clsx(
+                  "btn-close",
+                  "text-size-smaller",
+                  styles.btnClose,
+                )}
+                data-bs-dismiss="modal"
+                aria-label="Close"
+                onClick={() => {
+                  setShowing(!showing);
+                }}
+              ></button>
+            </div>
+            <div className="modal-body">{children}</div>
+            <div className="modal-footer">
+              <button
+                type="button"
+                className="btn btn-secondary"
+                data-bs-dismiss="modal"
+                onClick={() => {
+                  setShowing(!showing);
+                }}
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};

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

@@ -1,14 +1,14 @@
 import { Popover } from "bootstrap";
-import React, { useEffect, useRef } from "react";
+import { FC, ReactNode, useEffect, useRef } from "react";
 import "./MorePopover.css";
 
 interface MorePopoverProps {
   title: string;
   customClass?: string;
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
-export const MorePopover: React.FC<MorePopoverProps> = ({
+export const MorePopover: FC<MorePopoverProps> = ({
   title,
   customClass,
   children,

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

@@ -1,5 +1,6 @@
 import { clsx } from "clsx";
-import { FC, ReactElement, ReactNode, useState } from "react";
+import { FC, MouseEvent, ReactElement, ReactNode, useCallback } from "react";
+import { useProperty } from "../state/hooks";
 import styles from "./NavPills.module.css";
 
 interface NavPillChildProps {
@@ -8,13 +9,16 @@ interface NavPillChildProps {
 }
 
 interface NavPillsProps {
+  id: string;
   children?: ReactElement<NavPillChildProps>[];
 }
 
-export const NavPills: FC<NavPillsProps> = ({ children }) => {
-  const [activeItem, setActiveItem] = useState(
-    children ? children[0].props["title"] : null,
-  );
+export const NavPills: FC<NavPillsProps> = ({ id, children }) => {
+  const defaultNav = children ? children[0].props["title"] : "";
+  const [activeItem, setActiveItem] = useProperty(id, "active", {
+    defaultValue: defaultNav,
+  });
+
   if (!activeItem || !children) {
     return undefined;
   }
@@ -77,6 +81,15 @@ const NavPill: FC<NavPillProps> = ({
   children,
 }) => {
   const active = activeItem === title;
+  const handleClick = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      const target = (e.currentTarget as HTMLButtonElement).dataset.target;
+      if (target) {
+        setActiveItem(target);
+      }
+    },
+    [setActiveItem],
+  );
 
   return (
     <li className={"nav-item"}>
@@ -90,9 +103,8 @@ const NavPill: FC<NavPillProps> = ({
           active ? "active " : "",
           styles.pill,
         )}
-        onClick={() => {
-          setActiveItem(title);
-        }}
+        data-target={title}
+        onClick={handleClick}
       >
         {title}
       </button>

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

@@ -0,0 +1,12 @@
+.panel {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.container {
+  margin-top: 3em;
+  display: grid;
+  grid-template-columns: max-content max-content;
+  column-gap: 0.3em;
+}

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

@@ -0,0 +1,20 @@
+import clsx from "clsx";
+import { FC } from "react";
+
+import { ApplicationIcons } from "../appearance/icons";
+import styles from "./NoContentsPanel.module.css";
+
+interface NoContentsPanelProps {
+  text: string;
+}
+
+export const NoContentsPanel: FC<NoContentsPanelProps> = ({ text }) => {
+  return (
+    <div className={clsx(styles.panel)}>
+      <div className={clsx(styles.container, "text-size-smaller")}>
+        <i className={ApplicationIcons.noSamples} />
+        <div>{text}</div>
+      </div>
+    </div>
+  );
+};

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

@@ -6,25 +6,26 @@
   height: 0;
   overflow-y: visible;
   overflow-x: visible;
-  z-index: 1001;
   text-align: center;
 }
 
 .container {
   width: 100%;
-  height: 2px;
+  height: 1px;
   background-color: transparent;
-  position: relative;
+  position: sticky;
   overflow: hidden;
+  z-index: 1200;
 }
 
 .animate {
   width: 5%;
-  height: 2px;
+  height: 1px;
   animation: leftToRight 2s linear infinite;
   background-color: #3b82f6;
   position: absolute;
   left: 0;
+  top: 0;
 }
 
 @keyframes leftToRight {

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

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import { FC } from "react";
 import styles from "./ProgressBar.module.css";
 
@@ -7,9 +8,9 @@ interface ProgressBarProps {
 
 export const ProgressBar: FC<ProgressBarProps> = ({ animating }) => {
   return (
-    <div className={styles.wrapper}>
+    <div className={clsx(styles.wrapper)}>
       <div
-        className={styles.container}
+        className={clsx(styles.container)}
         role="progressbar"
         aria-label="Basic example"
         aria-valuenow={25}