inspect-ai 0.3.63__py3-none-any.whl → 0.3.64__py3-none-any.whl

inspect_ai/_view/www/src/metadata/MetaDataGrid.tsx

@@ -26,7 +26,7 @@ export const MetaDataGrid: React.FC<MetadataGridProps> = ({
   const entryEls = entryRecords(entries).map((entry, index) => {
     const id = `${baseId}-value-${index}`;
     return (
-      <Fragment>
+      <Fragment key={`${baseId}-record-${index}`}>
         <div
           style={{
             gridColumn: "1 / -1",

inspect_ai/_view/www/src/metadata/MetaDataView.tsx

@@ -35,7 +35,7 @@ export const MetaDataView: React.FC<MetadataViewProps> = ({
   const entryEls = (coercedEntries || []).map((entry, index) => {
     const id = `${baseId}-value-${index}`;
     return (
-      <tr>
+      <tr key={id}>
         <td
           className={clsx(
             styles.cell,

inspect_ai/_view/www/src/plan/PlanDetailView.tsx

@@ -125,6 +125,7 @@ export const PlanDetailView: React.FC<PlanDetailViewProps> = ({
       const scorerPanels = Object.keys(scorers).map((key) => {
         return (
           <ScorerDetailView
+            key={key}
             name={key}
             scores={scorers[key].scores}
             params={scorers[key].params as Record<string, unknown>}
@@ -159,6 +160,7 @@ export const PlanDetailView: React.FC<PlanDetailViewProps> = ({
     className: cols === 1 ? styles.oneCol : styles.twoCol,
     contents: (
       <MetaDataView
+        key={`plan-md-task`}
         className={"text-size-small"}
         entries={taskInformation}
         tableOptions="sm"
@@ -172,6 +174,7 @@ export const PlanDetailView: React.FC<PlanDetailViewProps> = ({
       className: cols === 1 ? styles.oneCol : styles.twoCol,
       contents: (
         <MetaDataView
+          key={`plan-md-task-args`}
           className={"text-size-small"}
           entries={task_args as Record<string, unknown>}
           tableOptions="sm"
@@ -185,6 +188,7 @@ export const PlanDetailView: React.FC<PlanDetailViewProps> = ({
       className: cols === 1 ? styles.oneCol : styles.twoCol,
       contents: (
         <MetaDataView
+          key={`plan-md-model-args`}
           className={"text-size-small"}
           entries={model_args as Record<string, unknown>}
           tableOptions="sm"
@@ -199,6 +203,7 @@ export const PlanDetailView: React.FC<PlanDetailViewProps> = ({
       className: cols === 1 ? styles.oneCol : styles.twoCol,
       contents: (
         <MetaDataView
+          key={`plan-md-config`}
           className={"text-size-small"}
           entries={config}
           tableOptions="sm"
@@ -217,6 +222,7 @@ export const PlanDetailView: React.FC<PlanDetailViewProps> = ({
       className: cols === 1 ? styles.oneCol : styles.twoCol,
       contents: (
         <MetaDataView
+          key={`plan-md-generate-config`}
           className={"text-size-small"}
           entries={generate_record}
           tableOptions="sm"
@@ -231,6 +237,7 @@ export const PlanDetailView: React.FC<PlanDetailViewProps> = ({
       className: cols === 1 ? styles.oneCol : styles.twoCol,
       contents: (
         <MetaDataView
+          key={`plan-md-metadata`}
           className={"text-size-small"}
           entries={metadata}
           tableOptions="sm"
@@ -249,7 +256,11 @@ export const PlanDetailView: React.FC<PlanDetailViewProps> = ({
       >
         {taskColumns.map((col) => {
           return (
-            <PlanColumn title={col.title} className={col.className}>
+            <PlanColumn
+              title={col.title}
+              className={col.className}
+              key={`plan-col-${col.title}`}
+            >
               {col.contents}
             </PlanColumn>
           );
@@ -259,7 +270,11 @@ export const PlanDetailView: React.FC<PlanDetailViewProps> = ({
       <div className={clsx(styles.row)}>
         {metadataColumns.map((col) => {
           return (
-            <PlanColumn title={col.title} className={col.className}>
+            <PlanColumn
+              title={col.title}
+              className={col.className}
+              key={`plan-col-${col.title}`}
+            >
               {col.contents}
             </PlanColumn>
           );

inspect_ai/_view/www/src/plan/SolverDetailView.tsx

@@ -18,7 +18,7 @@ export const SolversDetailView: React.FC<SolversDetailView> = ({ steps }) => {
 
   const details = steps?.map((step, index) => {
     return (
-      <Fragment>
+      <Fragment key={`solver-step-${index}`}>
         <DetailStep
           name={step.solver}
           className={clsx(styles.items, "text-size-small")}

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

@@ -77,6 +77,7 @@ export const SampleDisplay: React.FC<SampleDisplayProps> = ({
   if (!isVscode()) {
     tools.push(
       <ToolButton
+        key="sample-print-tool"
         label="Print"
         icon={ApplicationIcons.copy}
         onClick={() => {
@@ -101,6 +102,7 @@ export const SampleDisplay: React.FC<SampleDisplayProps> = ({
       >
         {sample.events && sample.events.length > 0 ? (
           <TabPanel
+            key={kSampleTranscriptTabId}
             id={kSampleTranscriptTabId}
             className="sample-tab"
             title="Transcript"
@@ -120,6 +122,7 @@ export const SampleDisplay: React.FC<SampleDisplayProps> = ({
           </TabPanel>
         ) : null}
         <TabPanel
+          key={kSampleMessagesTabId}
           id={kSampleMessagesTabId}
           className={clsx("sample-tab", styles.fullWidth)}
           title="Messages"
@@ -138,6 +141,7 @@ export const SampleDisplay: React.FC<SampleDisplayProps> = ({
         </TabPanel>
         {scorerNames.length === 1 ? (
           <TabPanel
+            key={kSampleScoringTabId}
             id={kSampleScoringTabId}
             className="sample-tab"
             title="Scoring"
@@ -156,6 +160,7 @@ export const SampleDisplay: React.FC<SampleDisplayProps> = ({
               const tabId = `score-${scorer}`;
               return (
                 <TabPanel
+                  key={tabId}
                   id={tabId}
                   className="sample-tab"
                   title={scorer}
@@ -217,11 +222,11 @@ export const SampleDisplay: React.FC<SampleDisplayProps> = ({
   );
 };
 
-const metadataViewsForSample = (_id: string, sample: EvalSample) => {
+const metadataViewsForSample = (id: string, sample: EvalSample) => {
   const sampleMetadatas = [];
   if (sample.model_usage && Object.keys(sample.model_usage).length > 0) {
     sampleMetadatas.push(
-      <Card>
+      <Card key={`sample-usage-${id}`}>
         <CardHeader label="Usage" />
         <CardBody>
           <ModelTokenTable
@@ -235,7 +240,7 @@ const metadataViewsForSample = (_id: string, sample: EvalSample) => {
 
   if (Object.keys(sample?.metadata).length > 0) {
     sampleMetadatas.push(
-      <Card>
+      <Card key={`sample-metadata-${id}`}>
         <CardHeader label="Metadata" />
         <CardBody>
           <MetaDataView
@@ -250,7 +255,7 @@ const metadataViewsForSample = (_id: string, sample: EvalSample) => {
 
   if (Object.keys(sample?.store).length > 0) {
     sampleMetadatas.push(
-      <Card>
+      <Card key={`sample-store-${id}`}>
         <CardHeader label="Store" />
         <CardBody>
           <MetaDataView

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

@@ -143,9 +143,10 @@ export const SampleSummaryView: React.FC<SampleSummaryViewProps> = ({
           .join(" ")}`,
       }}
     >
-      {columns.map((col) => {
+      {columns.map((col, idx) => {
         return (
           <div
+            key={`sample-summ-lbl-${idx}`}
             className={clsx(
               "text-style-label",
               "text-style-secondary",
@@ -157,9 +158,10 @@ export const SampleSummaryView: React.FC<SampleSummaryViewProps> = ({
           </div>
         );
       })}
-      {columns.map((col) => {
+      {columns.map((col, idx) => {
         return (
           <div
+            key={`sample-summ-val-${idx}`}
             className={clsx(
               styles.wrap,
               col.clamp ? "three-line-clamp" : undefined,

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

@@ -1,3 +1,4 @@
+import { Fragment } from "react/jsx-runtime";
 import { ScoreFilter, ScoreLabel } from "../types";
 import { SamplesDescriptor } from "./descriptor/samplesDescriptor";
 import { EpochFilter } from "./sample-tools/EpochFilter";
@@ -32,29 +33,20 @@ export const SampleTools: React.FC<SampleToolsProps> = ({
   scores,
   sampleDescriptor,
 }) => {
-  const tools = [];
-
-  tools.push(
-    <SampleFilter
-      evalDescriptor={sampleDescriptor.evalDescriptor}
-      scoreFilter={scoreFilter}
-      setScoreFilter={setScoreFilter}
-    />,
+  return (
+    <Fragment>
+      <SampleFilter
+        evalDescriptor={sampleDescriptor.evalDescriptor}
+        scoreFilter={scoreFilter}
+        setScoreFilter={setScoreFilter}
+      />
+      {scores.length > 1 ? (
+        <SelectScorer scores={scores} score={score} setScore={setScore} />
+      ) : undefined}
+      {epochs > 1 ? (
+        <EpochFilter epoch={epoch} setEpoch={setEpoch} epochs={epochs} />
+      ) : undefined}
+      <SortFilter sort={sort} setSort={setSort} epochs={epochs} />
+    </Fragment>
   );
-
-  if (scores.length > 1) {
-    tools.push(
-      <SelectScorer scores={scores} score={score} setScore={setScore} />,
-    );
-  }
-
-  if (epochs > 1) {
-    tools.push(
-      <EpochFilter epoch={epoch} setEpoch={setEpoch} epochs={epochs} />,
-    );
-  }
-
-  tools.push(<SortFilter sort={sort} setSort={setSort} epochs={epochs} />);
-
-  return tools;
 };

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

@@ -42,7 +42,7 @@ export const ChatMessage: React.FC<ChatMessageProps> = ({
         {message.role}
       </div>
       {message.role === "assistant" && message.reasoning ? (
-        <Fragment>
+        <Fragment key={`${id}-response-label`}>
           <div className={clsx("text-style-label", "text-style-secondary")}>
             Reasoning
           </div>

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

@@ -32,6 +32,7 @@ export const ChatView: React.FC<ChatViewProps> = ({
           collapsedMessages.length > 1 && numbered ? index + 1 : undefined;
         return (
           <ChatMessageRow
+            key={`${id}-msg-${index}`}
             parentName={id || "chat-view"}
             number={number}
             resolvedMessage={msg}

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

@@ -42,6 +42,7 @@ export const MessageContent: React.FC<MessageContentProps> = ({ contents }) => {
     return contents.map((content, index) => {
       if (typeof content === "string") {
         return messageRenderers["text"].render(
+          `text-content-${index}`,
           {
             type: "text",
             text: content,
@@ -52,7 +53,11 @@ export const MessageContent: React.FC<MessageContentProps> = ({ contents }) => {
         if (content) {
           const renderer = messageRenderers[content.type];
           if (renderer) {
-            return renderer.render(content, index === contents.length - 1);
+            return renderer.render(
+              `text-${content.type}-${index}`,
+              content,
+              index === contents.length - 1,
+            );
           } else {
             console.error(`Unknown message content type '${content.type}'`);
           }
@@ -65,20 +70,29 @@ export const MessageContent: React.FC<MessageContentProps> = ({ contents }) => {
       type: "text",
       text: contents,
     };
-    return messageRenderers["text"].render(contentText, true);
+    return messageRenderers["text"].render(
+      "text-message-content",
+      contentText,
+      true,
+    );
   }
 };
 
 interface MessageRenderer {
-  render: (content: ContentType, isLast: boolean) => React.ReactNode;
+  render: (
+    key: string,
+    content: ContentType,
+    isLast: boolean,
+  ) => React.ReactNode;
 }
 
 const messageRenderers: Record<string, MessageRenderer> = {
   text: {
-    render: (content, isLast) => {
+    render: (key, content, isLast) => {
       const c = content as ContentText;
       return (
         <MarkdownDiv
+          key={key}
           markdown={c.text}
           className={isLast ? "no-last-para-padding" : ""}
         />
@@ -86,39 +100,39 @@ const messageRenderers: Record<string, MessageRenderer> = {
     },
   },
   image: {
-    render: (content) => {
+    render: (key, content) => {
       const c = content as ContentImage;
       if (c.image.startsWith("data:")) {
-        return <img src={c.image} className={styles.contentImage} />;
+        return <img src={c.image} className={styles.contentImage} key={key} />;
       } else {
-        return <code>{c.image}</code>;
+        return <code key={key}>{c.image}</code>;
       }
     },
   },
   audio: {
-    render: (content) => {
+    render: (key, content) => {
       const c = content as ContentAudio;
       return (
-        <audio controls>
+        <audio controls key={key}>
           <source src={c.audio} type={mimeTypeForFormat(c.format)} />
         </audio>
       );
     },
   },
   video: {
-    render: (content) => {
+    render: (key, content) => {
       const c = content as ContentVideo;
       return (
-        <video width="500" height="375" controls>
+        <video width="500" height="375" controls key={key}>
           <source src={c.video} type={mimeTypeForFormat(c.format)} />
         </video>
       );
     },
   },
   tool: {
-    render: (content) => {
+    render: (key, content) => {
       const c = content as ContentTool;
-      return <ToolOutput output={c.content} />;
+      return <ToolOutput output={c.content} key={key} />;
     },
   },
 };

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

@@ -8,6 +8,7 @@ import { MessageContent } from "./MessageContent";
 import { resolveToolInput } from "./tools/tool";
 import { ToolCallView } from "./tools/ToolCallView";
 
+import { Fragment } from "react";
 import { ContentTool } from "../../types";
 import styles from "./MessageContents.module.css";
 
@@ -27,20 +28,10 @@ export const MessageContents: React.FC<MessageContentsProps> = ({
     message.tool_calls &&
     message.tool_calls.length
   ) {
-    const result = [];
-    // If the message contains content, render that.
-    if (message.content) {
-      result.push(
-        <div className={styles.content}>
-          <MessageContent contents={message.content} />
-        </div>,
-      );
-    }
-
     // Render the tool calls made by this message
     const toolCalls = message.tool_calls.map((tool_call, idx) => {
       // Extract tool input
-      const { input, functionCall, inputType } = resolveToolInput(
+      const { input, functionCall, highlightLanguage } = resolveToolInput(
         tool_call.function,
         tool_call.arguments,
       );
@@ -57,23 +48,34 @@ export const MessageContents: React.FC<MessageContentsProps> = ({
       // Resolve the tool output
       const resolvedToolOutput = resolveToolMessage(toolMessage);
       if (toolCallStyle === "compact") {
-        return <code>tool: {functionCall}</code>;
+        return (
+          <div key={`tool-call-${idx}`}>
+            <code>tool: {functionCall}</code>
+          </div>
+        );
       } else {
         return (
           <ToolCallView
+            key={`tool-call-${idx}`}
             functionCall={functionCall}
             input={input}
-            inputType={inputType}
+            highlightLanguage={highlightLanguage}
             output={resolvedToolOutput}
           />
         );
       }
     });
 
-    if (toolCalls) {
-      result.push(...toolCalls);
-    }
-    return result;
+    return (
+      <Fragment>
+        <div className={styles.content}>
+          {message.content ? (
+            <MessageContent contents={message.content} />
+          ) : undefined}
+        </div>
+        {toolCalls}
+      </Fragment>
+    );
   } else {
     return <MessageContent contents={message.content} />;
   }

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

@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import ExpandablePanel from "../../../components/ExpandablePanel";
 import { ContentTool } from "../../../types";
 import {
@@ -14,7 +15,7 @@ import { ToolTitle } from "./ToolTitle";
 interface ToolCallViewProps {
   functionCall: string;
   input?: string;
-  inputType?: string;
+  highlightLanguage?: string;
   view?: ToolCallContent;
   output:
     | string
@@ -41,7 +42,7 @@ interface ToolCallViewProps {
 export const ToolCallView: React.FC<ToolCallViewProps> = ({
   functionCall,
   input,
-  inputType,
+  highlightLanguage,
   view,
   output,
   mode,
@@ -76,6 +77,7 @@ export const ToolCallView: React.FC<ToolCallViewProps> = ({
   const collapse = Array.isArray(output)
     ? output.every((item) => !isContentImage(item))
     : !isContentImage(output);
+  const normalizedContent = useMemo(() => normalizeContent(output), [output]);
 
   return (
     <div>
@@ -86,14 +88,14 @@ export const ToolCallView: React.FC<ToolCallViewProps> = ({
       )}
       <div>
         <div>
-          <ToolInput type={inputType} contents={input} view={view} />
-          {output ? (
-            <ExpandablePanel collapse={collapse} border={true} lines={15}>
-              <MessageContent contents={normalizeContent(output)} />
-            </ExpandablePanel>
-          ) : (
-            ""
-          )}
+          <ToolInput
+            highlightLanguage={highlightLanguage}
+            contents={input}
+            toolCallView={view}
+          />
+          <ExpandablePanel collapse={collapse} border={true} lines={15}>
+            <MessageContent contents={normalizedContent} />
+          </ExpandablePanel>
         </div>
       </div>
     </div>

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

@@ -1,86 +1,76 @@
 import clsx from "clsx";
-import murmurhash from "murmurhash";
-import { highlightElement, languages } from "prismjs";
-import { useEffect, useRef } from "react";
+import { highlightElement } from "prismjs";
+import { memo, useEffect, useRef } from "react";
 import { MarkdownDiv } from "../../../components/MarkdownDiv";
-import { ToolCallContent } from "../../../types/log";
+
 import styles from "./ToolInput.module.css";
 
+export const useCodeHighlight = (language?: string) => {
+  const codeRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    if (codeRef.current && language) {
+      highlightElement(codeRef.current);
+    }
+  }, [language]);
+
+  return codeRef;
+};
+
 interface ToolInputProps {
-  type?: string;
-  contents?: string;
-  view?: ToolCallContent;
+  highlightLanguage?: string;
+  contents?: string | object;
+  toolCallView?: { content: string };
 }
+export const ToolInput: React.FC<ToolInputProps> = memo((props) => {
+  const { highlightLanguage, contents, toolCallView } = props;
 
-/**
- * Renders the ToolInput component.
- */
-export const ToolInput: React.FC<ToolInputProps> = ({
-  type,
-  contents,
-  view,
-}) => {
-  if (!contents && !view?.content) {
-    return null;
-  }
+  const codeRef = useCodeHighlight(highlightLanguage);
 
-  if (view) {
+  if (!contents && !toolCallView?.content) return null;
+
+  if (toolCallView) {
     const toolViewRef = useRef<HTMLDivElement>(null);
+
     useEffect(() => {
-      // Sniff around for code in the view that could be text highlighted
-      if (toolViewRef.current) {
-        for (const child of toolViewRef.current.children) {
-          if (child.tagName === "PRE") {
-            const childChild = child.firstElementChild;
-            if (childChild && childChild.tagName === "CODE") {
-              const hasLanguageClass = Array.from(childChild.classList).some(
-                (className) => className.startsWith("language-"),
-              );
-              if (hasLanguageClass) {
-                child.classList.add("tool-output");
-                highlightElement(childChild as HTMLElement);
-              }
+      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);
             }
-          }
-        }
+          });
+        });
       }
-    }, [contents, view]);
+    }, [toolCallView?.content]);
+
     return (
       <MarkdownDiv
-        markdown={view.content}
+        markdown={toolCallView.content}
         ref={toolViewRef}
-        className={clsx(styles.bottomMargin)}
+        className={clsx(styles.bottomMargin, "text-size-small")}
       />
     );
-  } else {
-    const toolInputRef = useRef(null);
-    useEffect(() => {
-      if (type) {
-        const tokens = languages[type];
-        if (toolInputRef.current && tokens) {
-          highlightElement(toolInputRef.current);
-        }
-      }
-    }, [contents, type, view]);
+  }
 
-    contents =
-      typeof contents === "object" || Array.isArray(contents)
-        ? JSON.stringify(contents)
-        : contents;
-    const key = murmurhash.v3(contents || "");
+  const formattedContent =
+    typeof contents === "object" ? JSON.stringify(contents) : contents;
 
-    return (
-      <pre
-        className={clsx("tool-output", styles.outputPre, styles.bottomMargin)}
+  return (
+    <pre className={clsx("tool-output", styles.outputPre, styles.bottomMargin)}>
+      <code
+        ref={codeRef}
+        className={clsx(
+          "source-code",
+          "sourceCode",
+          `language-${highlightLanguage}`,
+          styles.outputCode,
+        )}
       >
-        <code
-          ref={toolInputRef}
-          key={key}
-          className={clsx("source-code", `language-${type}`, styles.outputCode)}
-        >
-          {contents}
-        </code>
-      </pre>
-    );
-  }
-};
+        {formattedContent}
+      </code>
+    </pre>
+  );
+});

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

@@ -18,21 +18,28 @@ export const ToolOutput: React.FC<ToolOutputProps> = ({ output }) => {
   // First process an array or object into a string
   const outputs = [];
   if (Array.isArray(output)) {
-    output.forEach((out) => {
+    output.forEach((out, idx) => {
+      const key = `tool-output-${idx}`;
       if (out.type === "text") {
-        outputs.push(<ToolTextOutput text={out.text} />);
+        outputs.push(<ToolTextOutput text={out.text} key={key} />);
       } else {
         if (out.image.startsWith("data:")) {
           outputs.push(
-            <img className={clsx(styles.toolImage)} src={out.image} />,
+            <img
+              className={clsx(styles.toolImage)}
+              src={out.image}
+              key={key}
+            />,
           );
         } else {
-          outputs.push(<ToolTextOutput text={String(out.image)} />);
+          outputs.push(<ToolTextOutput text={String(out.image)} key={key} />);
         }
       }
     });
   } else {
-    outputs.push(<ToolTextOutput text={String(output)} />);
+    outputs.push(
+      <ToolTextOutput text={String(output)} key={"tool-output-single"} />,
+    );
   }
   return <div className={clsx(styles.output)}>{outputs}</div>;
 };