inspect-ai 0.3.69__py3-none-any.whl → 0.3.71__py3-none-any.whl

inspect_ai/_view/www/src/samples/SamplesTools.tsx

@@ -1,3 +1,4 @@
+import { FC } from "react";
 import { Fragment } from "react/jsx-runtime";
 import { ScoreFilter, ScoreLabel } from "../types";
 import { SamplesDescriptor } from "./descriptor/samplesDescriptor";
@@ -20,7 +21,7 @@ interface SampleToolsProps {
   sampleDescriptor: SamplesDescriptor;
 }
 
-export const SampleTools: React.FC<SampleToolsProps> = ({
+export const SampleTools: FC<SampleToolsProps> = ({
   epoch,
   setEpoch,
   epochs,

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

@@ -1,7 +1,6 @@
 import clsx from "clsx";
-import { Fragment } from "react";
+import { FC } from "react";
 import ExpandablePanel from "../../components/ExpandablePanel";
-import { MarkdownDiv } from "../../components/MarkdownDiv";
 import {
   ChatMessageAssistant,
   ChatMessageSystem,
@@ -20,7 +19,7 @@ interface ChatMessageProps {
   toolCallStyle: "compact" | "complete";
 }
 
-export const ChatMessage: React.FC<ChatMessageProps> = ({
+export const ChatMessage: FC<ChatMessageProps> = ({
   id,
   message,
   toolMessages,
@@ -41,28 +40,13 @@ export const ChatMessage: React.FC<ChatMessageProps> = ({
         <i className={iconForMsg(message)} />
         {message.role}
       </div>
-      {message.role === "assistant" && message.reasoning ? (
-        <Fragment key={`${id}-response-label`}>
-          <div className={clsx("text-style-label", "text-style-secondary")}>
-            Reasoning
-          </div>
-          <ExpandablePanel collapse={true}>
-            <MarkdownDiv markdown={message.reasoning} />
-          </ExpandablePanel>
-        </Fragment>
-      ) : undefined}
       <div
         className={clsx(
           styles.messageContents,
           indented ? styles.indented : undefined,
         )}
       >
-        {message.role === "assistant" && message.reasoning ? (
-          <div className={clsx("text-style-label", "text-style-secondary")}>
-            Response
-          </div>
-        ) : undefined}
-        <ExpandablePanel collapse={collapse}>
+        <ExpandablePanel collapse={collapse} lines={30}>
           <MessageContents
             key={`${id}-contents`}
             message={message}

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

@@ -1,3 +1,4 @@
+import { FC } from "react";
 import { NavPills } from "../../components/NavPills.tsx";
 import { Buckets, ContentRenderer } from "../../metadata/types.ts";
 import {
@@ -37,7 +38,7 @@ export const ChatMessageRenderer: ContentRenderer = {
 /**
  * Represents a chat summary component that renders a list of chat messages.
  */
-export const ChatSummary: React.FC<{
+export const ChatSummary: FC<{
   id: string;
   title?: string;
   messages: (

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

@@ -1,6 +1,7 @@
 import clsx from "clsx";
 import { ChatMessage } from "./ChatMessage";
 
+import { FC } from "react";
 import styles from "./ChatMessageRow.module.css";
 import { ResolvedMessage } from "./messages";
 
@@ -15,7 +16,7 @@ interface ChatMessageRowProps {
 /**
  * Renders the ChatMessage component.
  */
-export const ChatMessageRow: React.FC<ChatMessageRowProps> = ({
+export const ChatMessageRow: FC<ChatMessageRowProps> = ({
   parentName,
   number,
   resolvedMessage,

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

@@ -1,4 +1,5 @@
 import clsx from "clsx";
+import { FC } from "react";
 import { Messages } from "../../types/log";
 import { ChatMessageRow } from "./ChatMessageRow";
 import { resolveMessages } from "./messages";
@@ -16,7 +17,7 @@ interface ChatViewProps {
 /**
  * Renders the ChatView component.
  */
-export const ChatView: React.FC<ChatViewProps> = ({
+export const ChatView: FC<ChatViewProps> = ({
   id,
   messages,
   toolCallStyle = "complete",

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,