inspect-ai 0.3.70__py3-none-any.whl → 0.3.72__py3-none-any.whl

inspect_ai/_view/www/src/samples/chat/ChatViewVirtualList.tsx

@@ -1,12 +1,13 @@
-import { RefObject } from "react";
-import { VirtualList } from "../../components/VirtualList";
+import { FC, RefObject, useState } from "react";
 import { Messages } from "../../types/log";
 
 import clsx from "clsx";
+import { Virtuoso } from "react-virtuoso";
 import { ChatMessageRow } from "./ChatMessageRow";
-import styles from "./ChatViewVirtualList.module.css";
 import { ResolvedMessage, resolveMessages } from "./messages";
 
+import styles from "./ChatViewVirtualList.module.css";
+
 interface ChatViewVirtualListProps {
   id?: string;
   messages: Messages;
@@ -20,7 +21,7 @@ interface ChatViewVirtualListProps {
 /**
  * Renders the ChatViewVirtualList component.
  */
-export const ChatViewVirtualList: React.FC<ChatViewVirtualListProps> = ({
+export const ChatViewVirtualList: FC<ChatViewVirtualListProps> = ({
   id,
   messages,
   toolCallStyle,
@@ -30,6 +31,7 @@ export const ChatViewVirtualList: React.FC<ChatViewVirtualListProps> = ({
   scrollRef,
 }) => {
   const collapsedMessages = resolveMessages(messages);
+  const [followOutput, setFollowOutput] = useState(false);
 
   const renderRow = (item: ResolvedMessage, index: number) => {
     const number =
@@ -46,10 +48,23 @@ export const ChatViewVirtualList: React.FC<ChatViewVirtualListProps> = ({
   };
 
   const result = (
-    <VirtualList
+    <Virtuoso
+      customScrollParent={scrollRef?.current ? scrollRef.current : undefined}
+      style={{ height: "100%", width: "100%" }}
       data={collapsedMessages}
-      renderRow={renderRow}
-      scrollRef={scrollRef}
+      itemContent={(index: number, data: ResolvedMessage) => {
+        return renderRow(data, index);
+      }}
+      increaseViewportBy={{ top: 1000, bottom: 1000 }}
+      overscan={{
+        main: 10,
+        reverse: 10,
+      }}
+      followOutput={followOutput}
+      atBottomStateChange={(atBottom: boolean) => {
+        setFollowOutput(atBottom);
+      }}
+      skipAnimationFrameInResizeObserver={true}
       className={clsx(styles.list, className)}
     />
   );

inspect_ai/_view/www/src/samples/chat/MessageContent.tsx

@@ -1,8 +1,12 @@
+import clsx from "clsx";
+import { FC, Fragment, ReactNode } from "react";
+import ExpandablePanel from "../../components/ExpandablePanel";
 import { MarkdownDiv } from "../../components/MarkdownDiv";
 import { ContentTool } from "../../types";
 import {
   ContentAudio,
   ContentImage,
+  ContentReasoning,
   ContentText,
   ContentVideo,
   Format,
@@ -15,6 +19,7 @@ type ContentType =
   | string
   | string[]
   | ContentText
+  | ContentReasoning
   | ContentImage
   | ContentAudio
   | ContentVideo
@@ -26,6 +31,7 @@ interface MessageContentProps {
     | string[]
     | (
         | ContentText
+        | ContentReasoning
         | ContentImage
         | ContentAudio
         | ContentVideo
@@ -37,7 +43,7 @@ interface MessageContentProps {
  * Renders message content based on its type.
  * Supports rendering strings, images, and tools using specific renderers.
  */
-export const MessageContent: React.FC<MessageContentProps> = ({ contents }) => {
+export const MessageContent: FC<MessageContentProps> = ({ contents }) => {
   if (Array.isArray(contents)) {
     return contents.map((content, index) => {
       if (typeof content === "string") {
@@ -79,11 +85,7 @@ export const MessageContent: React.FC<MessageContentProps> = ({ contents }) => {
 };
 
 interface MessageRenderer {
-  render: (
-    key: string,
-    content: ContentType,
-    isLast: boolean,
-  ) => React.ReactNode;
+  render: (key: string, content: ContentType, isLast: boolean) => ReactNode;
 }
 
 const messageRenderers: Record<string, MessageRenderer> = {
@@ -99,6 +101,33 @@ const messageRenderers: Record<string, MessageRenderer> = {
       );
     },
   },
+  reasoning: {
+    render: (key, content, isLast) => {
+      const r = content as ContentReasoning;
+      return (
+        <Fragment key={key}>
+          <div
+            className={clsx(
+              "text-style-label",
+              "text-style-secondary",
+              isLast ? "no-last-para-padding" : "",
+            )}
+          >
+            Reasoning
+          </div>
+          <ExpandablePanel collapse={true}>
+            <MarkdownDiv
+              markdown={
+                r.redacted
+                  ? "Reasoning encrypted by model provider."
+                  : r.reasoning
+              }
+            />
+          </ExpandablePanel>
+        </Fragment>
+      );
+    },
+  },
   image: {
     render: (key, content) => {
       const c = content as ContentImage;

inspect_ai/_view/www/src/samples/chat/MessageContents.tsx

@@ -8,7 +8,7 @@ import { MessageContent } from "./MessageContent";
 import { resolveToolInput } from "./tools/tool";
 import { ToolCallView } from "./tools/ToolCallView";
 
-import { Fragment } from "react";
+import { FC, Fragment } from "react";
 import { ContentTool } from "../../types";
 import styles from "./MessageContents.module.css";
 
@@ -18,7 +18,7 @@ interface MessageContentsProps {
   toolCallStyle: "compact" | "complete";
 }
 
-export const MessageContents: React.FC<MessageContentsProps> = ({
+export const MessageContents: FC<MessageContentsProps> = ({
   message,
   toolMessages,
   toolCallStyle,

inspect_ai/_view/www/src/samples/chat/messages.ts

@@ -6,6 +6,7 @@ import {
   ChatMessageUser,
   ContentAudio,
   ContentImage,
+  ContentReasoning,
   ContentText,
   ContentVideo,
   Messages,
@@ -54,6 +55,7 @@ export const resolveMessages = (messages: Messages) => {
     | ContentImage
     | ContentAudio
     | ContentVideo
+    | ContentReasoning
   )[] = [];
   for (const systemMessage of systemMessages) {
     const contents = Array.isArray(systemMessage.content)
@@ -99,8 +101,19 @@ export const iconForMsg = (
  * Normalize strings
  */
 const normalizeContent = (
-  content: ContentText | ContentImage | ContentAudio | ContentVideo | string,
-): ContentText | ContentImage | ContentAudio | ContentVideo => {
+  content:
+    | ContentText
+    | ContentImage
+    | ContentAudio
+    | ContentVideo
+    | ContentReasoning
+    | string,
+):
+  | ContentText
+  | ContentImage
+  | ContentAudio
+  | ContentVideo
+  | ContentReasoning => {
   if (typeof content === "string") {
     return {
       type: "text",

inspect_ai/_view/www/src/samples/chat/tools/ToolCallView.tsx

@@ -1,9 +1,10 @@
-import { useMemo } from "react";
+import { FC, useMemo } from "react";
 import ExpandablePanel from "../../../components/ExpandablePanel";
 import { ContentTool } from "../../../types";
 import {
   ContentAudio,
   ContentImage,
+  ContentReasoning,
   ContentText,
   ContentVideo,
   ToolCallContent,
@@ -26,12 +27,14 @@ interface ToolCallViewProps {
     | ContentImage
     | ContentVideo
     | ContentTool
+    | ContentReasoning
     | (
         | ContentText
         | ContentAudio
         | ContentImage
         | ContentVideo
         | ContentTool
+        | ContentReasoning
       )[];
   mode?: "compact";
 }
@@ -39,7 +42,7 @@ interface ToolCallViewProps {
 /**
  * Renders the ToolCallView component.
  */
-export const ToolCallView: React.FC<ToolCallViewProps> = ({
+export const ToolCallView: FC<ToolCallViewProps> = ({
   functionCall,
   input,
   highlightLanguage,
@@ -57,7 +60,8 @@ export const ToolCallView: React.FC<ToolCallViewProps> = ({
       | ContentAudio
       | ContentImage
       | ContentVideo
-      | ContentTool,
+      | ContentTool
+      | ContentReasoning,
   ) {
     if (value && typeof value === "object") {
       if (value.type === "image") {
@@ -79,6 +83,8 @@ export const ToolCallView: React.FC<ToolCallViewProps> = ({
     : !isContentImage(output);
   const normalizedContent = useMemo(() => normalizeContent(output), [output]);
 
+  const contents = mode !== "compact" ? input : input || functionCall;
+
   return (
     <div>
       {mode !== "compact" && (!view || view.title) ? (
@@ -90,7 +96,7 @@ export const ToolCallView: React.FC<ToolCallViewProps> = ({
         <div>
           <ToolInput
             highlightLanguage={highlightLanguage}
-            contents={input}
+            contents={contents}
             toolCallView={view}
           />
           <ExpandablePanel collapse={collapse} border={true} lines={15}>
@@ -115,12 +121,14 @@ const normalizeContent = (
     | ContentAudio
     | ContentVideo
     | ContentTool
+    | ContentReasoning
     | (
         | ContentText
         | ContentImage
         | ContentAudio
         | ContentVideo
         | ContentTool
+        | ContentReasoning
       )[],
 ): (
   | ContentText
@@ -128,6 +136,7 @@ const normalizeContent = (
   | ContentAudio
   | ContentVideo
   | ContentTool
+  | ContentReasoning
 )[] => {
   if (Array.isArray(output)) {
     return output;

inspect_ai/_view/www/src/samples/chat/tools/ToolInput.module.css

@@ -9,6 +9,6 @@
   white-space: pre-wrap;
 }
 
-.bottomMargin {
-  margin-bottom: 1em;
+.bottomPadding {
+  padding-bottom: 1em;
 }

inspect_ai/_view/www/src/samples/chat/tools/ToolInput.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import { highlightElement } from "prismjs";
-import { memo, useEffect, useRef } from "react";
+import { FC, memo, useEffect, useRef } from "react";
 import { MarkdownDiv } from "../../../components/MarkdownDiv";
 
 import styles from "./ToolInput.module.css";
@@ -22,35 +22,34 @@ interface ToolInputProps {
   contents?: string | object;
   toolCallView?: { content: string };
 }
-export const ToolInput: React.FC<ToolInputProps> = memo((props) => {
+export const ToolInput: FC<ToolInputProps> = memo((props) => {
   const { highlightLanguage, contents, toolCallView } = props;
 
   const codeRef = useCodeHighlight(highlightLanguage);
+  const toolViewRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (toolCallView?.content && toolViewRef.current) {
+      requestAnimationFrame(() => {
+        const codeBlocks = toolViewRef.current!.querySelectorAll("pre code");
+        codeBlocks.forEach((block) => {
+          if (block.className.includes("language-")) {
+            block.classList.add("sourceCode");
+            highlightElement(block as HTMLElement);
+          }
+        });
+      });
+    }
+  }, [toolCallView?.content]);
 
   if (!contents && !toolCallView?.content) return null;
 
   if (toolCallView) {
-    const toolViewRef = useRef<HTMLDivElement>(null);
-
-    useEffect(() => {
-      if (toolCallView?.content && toolViewRef.current) {
-        requestAnimationFrame(() => {
-          const codeBlocks = toolViewRef.current!.querySelectorAll("pre code");
-          codeBlocks.forEach((block) => {
-            if (block.className.includes("language-")) {
-              block.classList.add("sourceCode");
-              highlightElement(block as HTMLElement);
-            }
-          });
-        });
-      }
-    }, [toolCallView?.content]);
-
     return (
       <MarkdownDiv
         markdown={toolCallView.content}
         ref={toolViewRef}
-        className={clsx(styles.bottomMargin, "text-size-small")}
+        className={clsx("text-size-small", "tool-output")}
       />
     );
   }

inspect_ai/_view/www/src/samples/chat/tools/ToolOutput.module.css

@@ -8,7 +8,7 @@
 }
 
 .textOutput {
-  margin-left: 2px;
+  padding-left: 2px;
   padding: 0.5em 0.5em 0.5em 0.5em;
   white-space: pre-wrap;
   margin-bottom: 0;

inspect_ai/_view/www/src/samples/chat/tools/ToolOutput.tsx

@@ -1,4 +1,5 @@
 import clsx from "clsx";
+import { FC } from "react";
 import { ContentImage, ContentText } from "../../../types/log";
 import styles from "./ToolOutput.module.css";
 
@@ -9,7 +10,7 @@ interface ToolOutputProps {
 /**
  * Renders the ToolOutput component.
  */
-export const ToolOutput: React.FC<ToolOutputProps> = ({ output }) => {
+export const ToolOutput: FC<ToolOutputProps> = ({ output }) => {
   // If there is no output, don't show the tool
   if (!output) {
     return null;
@@ -51,9 +52,9 @@ interface ToolTextOutputProps {
 /**
  * Renders the ToolTextOutput component.
  */
-const ToolTextOutput: React.FC<ToolTextOutputProps> = ({ text }) => {
+const ToolTextOutput: FC<ToolTextOutputProps> = ({ text }) => {
   return (
-    <pre className={clsx(styles.textOutput)}>
+    <pre className={clsx(styles.textOutput, "tool-output")}>
       <code className={clsx("sourceCode", styles.textCode)}>{text.trim()}</code>
     </pre>
   );

inspect_ai/_view/www/src/samples/chat/tools/ToolTitle.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { Fragment } from "react";
+import { FC, Fragment } from "react";
 import styles from "./ToolTitle.module.css";
 interface ToolTitleProps {
   title: string;
@@ -8,7 +8,7 @@ interface ToolTitleProps {
 /**
  * Renders the ToolCallView component.
  */
-export const ToolTitle: React.FC<ToolTitleProps> = ({ title }) => {
+export const ToolTitle: FC<ToolTitleProps> = ({ title }) => {
   return (
     <Fragment>
       <i className={clsx("bi", "bi-tools", styles.styles)} />

inspect_ai/_view/www/src/samples/error/FlatSampleErrorView.tsx

@@ -1,6 +1,7 @@
 import { ApplicationIcons } from "../../appearance/icons";
 
 import clsx from "clsx";
+import { FC } from "react";
 import styles from "./FlatSampleErrorView.module.css";
 import { errorType } from "./error";
 
@@ -10,9 +11,7 @@ interface FlatSampleErrorViewProps {
 /**
  * Component to display a styled error message.
  */
-export const FlatSampleError: React.FC<FlatSampleErrorViewProps> = ({
-  message,
-}) => {
+export const FlatSampleError: FC<FlatSampleErrorViewProps> = ({ message }) => {
   return (
     <div className={clsx(styles.flatBody)}>
       <i className={clsx(ApplicationIcons.error, styles.iconSmall)} />

inspect_ai/_view/www/src/samples/error/SampleErrorView.tsx

@@ -2,19 +2,20 @@ import { ApplicationIcons } from "../../appearance/icons";
 import { ApplicationStyles } from "../../appearance/styles";
 
 import clsx from "clsx";
+import { CSSProperties, FC } from "react";
 import styles from "./SampleErrorView.module.css";
 import { errorType } from "./error";
 
 interface SampleErrorViewProps {
   message?: string;
   align?: string;
-  style?: React.CSSProperties;
+  style?: CSSProperties;
 }
 
 /**
  * Component to display a styled error message.
  */
-export const SampleErrorView: React.FC<SampleErrorViewProps> = ({
+export const SampleErrorView: FC<SampleErrorViewProps> = ({
   message,
   align,
 }) => {

inspect_ai/_view/www/src/samples/list/SampleFooter.tsx

@@ -3,9 +3,10 @@ interface SampleFooterProps {
 }
 
 import clsx from "clsx";
+import { FC } from "react";
 import styles from "./SampleFooter.module.css";
 
-export const SampleFooter: React.FC<SampleFooterProps> = ({ sampleCount }) => {
+export const SampleFooter: FC<SampleFooterProps> = ({ sampleCount }) => {
   return (
     <div className={clsx("text-size-smaller", styles.footer)}>
       <div>{sampleCount} Samples</div>

inspect_ai/_view/www/src/samples/list/SampleHeader.tsx

@@ -7,9 +7,10 @@ interface SampleHeaderProps {
   gridColumnsTemplate: string;
 }
 import clsx from "clsx";
+import { FC } from "react";
 import styles from "./SampleHeader.module.css";
 
-export const SampleHeader: React.FC<SampleHeaderProps> = ({
+export const SampleHeader: FC<SampleHeaderProps> = ({
   input = true,
   target = true,
   answer = true,

inspect_ai/_view/www/src/samples/list/SampleList.tsx

@@ -1,5 +1,5 @@
-import clsx from "clsx";
 import {
+  FC,
   KeyboardEvent,
   RefObject,
   useCallback,
@@ -8,15 +8,16 @@ import {
   useRef,
   useState,
 } from "react";
+import { Virtuoso, VirtuosoHandle } from "react-virtuoso";
 import { EmptyPanel } from "../../components/EmptyPanel";
 import { MessageBand } from "../../components/MessageBand";
-import { VirtualList, VirtualListRef } from "../../components/VirtualList";
 import { formatNoDecimal } from "../../utils/format";
 import { ListItem } from "../../workspace/tabs/types";
 import { SamplesDescriptor } from "../descriptor/samplesDescriptor";
 import { SampleRow } from "./SampleRow";
 import { SampleSeparator } from "./SampleSeparator";
 
+import clsx from "clsx";
 import { SampleFooter } from "./SampleFooter";
 import { SampleHeader } from "./SampleHeader";
 import styles from "./SampleList.module.css";
@@ -25,7 +26,6 @@ const kSampleHeight = 88;
 const kSeparatorHeight = 24;
 
 interface SampleListProps {
-  listRef: RefObject<VirtualListRef | null>;
   items: ListItem[];
   sampleDescriptor: SamplesDescriptor;
   selectedIndex: number;
@@ -33,11 +33,11 @@ interface SampleListProps {
   prevSample: () => void;
   showSample: (index: number) => void;
   className?: string | string[];
+  listHandle: RefObject<VirtuosoHandle | null>;
 }
 
-export const SampleList: React.FC<SampleListProps> = (props) => {
+export const SampleList: FC<SampleListProps> = (props) => {
   const {
-    listRef,
     items,
     sampleDescriptor,
     selectedIndex,
@@ -45,12 +45,10 @@ export const SampleList: React.FC<SampleListProps> = (props) => {
     prevSample,
     showSample,
     className,
+    listHandle,
   } = props;
 
-  // If there are no samples, just display an empty state
-  if (items.length === 0) {
-    return <EmptyPanel>No Samples</EmptyPanel>;
-  }
+  const [followOutput, setFollowOutput] = useState(false);
 
   const [hidden, setHidden] = useState(false);
   useEffect(() => {
@@ -70,16 +68,45 @@ export const SampleList: React.FC<SampleListProps> = (props) => {
 
   const prevSelectedIndexRef = useRef<number>(null);
   useEffect(() => {
-    const listEl = listRef.current;
+    const listEl = listHandle.current;
     if (listEl) {
-      const actualRowIndex = itemRowMapping[selectedIndex];
-
-      const direction =
-        actualRowIndex > (prevSelectedIndexRef.current || 0) ? "down" : "up";
-      listRef.current?.scrollToIndex(actualRowIndex, direction);
-      prevSelectedIndexRef.current = actualRowIndex;
+      requestAnimationFrame(() => {
+        setTimeout(() => {
+          const actualRowIndex = itemRowMapping[selectedIndex];
+          listEl.scrollToIndex(actualRowIndex);
+          prevSelectedIndexRef.current = actualRowIndex;
+        }, 10);
+      });
     }
-  }, [selectedIndex, listRef, itemRowMapping]);
+  }, [selectedIndex, listHandle, itemRowMapping]);
+
+  const onkeydown = useCallback(
+    (e: KeyboardEvent<HTMLDivElement>) => {
+      switch (e.key) {
+        case "ArrowUp":
+          prevSample();
+          e.preventDefault();
+          e.stopPropagation();
+          break;
+        case "ArrowDown":
+          nextSample();
+          e.preventDefault();
+          e.stopPropagation();
+          break;
+        case "Enter":
+          showSample(selectedIndex);
+          e.preventDefault();
+          e.stopPropagation();
+          break;
+      }
+    },
+    [selectedIndex, nextSample, prevSample, showSample],
+  );
+
+  // If there are no samples, just display an empty state
+  if (items.length === 0) {
+    return <EmptyPanel>No Samples</EmptyPanel>;
+  }
 
   const renderRow = (item: ListItem) => {
     if (item.type === "sample") {
@@ -108,29 +135,6 @@ export const SampleList: React.FC<SampleListProps> = (props) => {
     }
   };
 
-  const onkeydown = useCallback(
-    (e: KeyboardEvent<HTMLDivElement>) => {
-      switch (e.key) {
-        case "ArrowUp":
-          prevSample();
-          e.preventDefault();
-          e.stopPropagation();
-          break;
-        case "ArrowDown":
-          nextSample();
-          e.preventDefault();
-          e.stopPropagation();
-          break;
-        case "Enter":
-          showSample(selectedIndex);
-          e.preventDefault();
-          e.stopPropagation();
-          break;
-      }
-    },
-    [selectedIndex],
-  );
-
   const { input, limit, answer, target } = gridColumns(sampleDescriptor);
 
   const sampleCount = items?.reduce((prev, current) => {
@@ -186,13 +190,21 @@ export const SampleList: React.FC<SampleListProps> = (props) => {
         limit={limit !== "0"}
         gridColumnsTemplate={gridColumnsValue(sampleDescriptor)}
       />
-      <VirtualList
-        ref={listRef}
+      <Virtuoso
+        ref={listHandle}
+        style={{ height: "100%" }}
         data={items}
-        tabIndex={0}
-        renderRow={renderRow}
+        defaultItemHeight={50}
+        itemContent={(_index: number, data: ListItem) => {
+          return renderRow(data);
+        }}
+        followOutput={followOutput}
+        atBottomStateChange={(atBottom: boolean) => {
+          setFollowOutput(atBottom);
+        }}
+        className={clsx(className)}
         onKeyDown={onkeydown}
-        className={clsx(styles.list, className)}
+        skipAnimationFrameInResizeObserver={true}
       />
       <SampleFooter sampleCount={sampleCount} />
     </div>

inspect_ai/_view/www/src/samples/list/SampleRow.tsx

@@ -1,4 +1,5 @@
 import clsx from "clsx";
+import { FC } from "react";
 import { SampleSummary } from "../../api/types";
 import { MarkdownDiv } from "../../components/MarkdownDiv";
 import { arrayToString, inputString } from "../../utils/format";
@@ -17,7 +18,7 @@ interface SampleRowProps {
   showSample: (index: number) => void;
 }
 
-export const SampleRow: React.FC<SampleRowProps> = ({
+export const SampleRow: FC<SampleRowProps> = ({
   id,
   index,
   sample,

inspect_ai/_view/www/src/samples/list/SampleSeparator.tsx

@@ -1,4 +1,5 @@
 import clsx from "clsx";
+import { FC } from "react";
 import styles from "./SampleSeparator.module.css";
 
 interface SampleSeparatorProps {
@@ -7,7 +8,7 @@ interface SampleSeparatorProps {
   height: number;
 }
 
-export const SampleSeparator: React.FC<SampleSeparatorProps> = ({
+export const SampleSeparator: FC<SampleSeparatorProps> = ({
   id,
   title,
   height,