inspect-ai 0.3.103__py3-none-any.whl → 0.3.104__py3-none-any.whl

inspect_ai/_view/www/src/app/routing/{navigationHooks.ts → sampleNavigation.ts}

@@ -3,84 +3,7 @@ import { useNavigate, useParams, useSearchParams } from "react-router-dom";
 import { useFilteredSamples } from "../../state/hooks";
 import { useStore } from "../../state/store";
 import { directoryRelativeUrl } from "../../utils/uri";
-import { logUrl, logUrlRaw, sampleUrl } from "./url";
-
-export const useLogNavigation = () => {
-  const navigate = useNavigate();
-  const { logPath } = useParams<{ logPath: string }>();
-  const logs = useStore((state) => state.logs.logs);
-  const loadedLog = useStore((state) => state.log.loadedLog);
-
-  const selectTab = useCallback(
-    (tabId: string) => {
-      // Only update URL if we have a loaded log
-      if (loadedLog && logPath) {
-        // We already have the logPath from params, just navigate to the tab
-        const url = logUrlRaw(logPath, tabId);
-        navigate(url);
-      } else if (loadedLog) {
-        // Fallback to constructing the path if needed
-        const url = logUrl(loadedLog, logs.log_dir, tabId);
-        navigate(url);
-      }
-    },
-    [loadedLog, logPath, logs.log_dir, navigate],
-  );
-
-  return {
-    selectTab,
-  };
-};
-
-export const useSampleUrl = () => {
-  const { logPath, tabId, sampleTabId } = useParams<{
-    logPath?: string;
-    tabId?: string;
-    sampleTabId?: string;
-  }>();
-
-  const logDirectory = useStore((state) => state.logs.logs.log_dir);
-
-  const selectedLogFile = useStore((state) => state.logs.selectedLogFile);
-
-  // Helper function to resolve the log path for URLs
-  const resolveLogPath = useCallback(() => {
-    // If we have a logPath from URL params, use that
-    if (logPath) {
-      return logPath;
-    }
-
-    if (selectedLogFile) {
-      return directoryRelativeUrl(selectedLogFile, logDirectory);
-    }
-
-    return undefined;
-  }, [logPath, selectedLogFile, logDirectory]);
-
-  // Get a sample URL for a specific sample
-  const getSampleUrl = useCallback(
-    (
-      sampleId: string | number,
-      epoch: number,
-      specificSampleTabId?: string,
-    ) => {
-      const resolvedPath = resolveLogPath();
-      if (resolvedPath) {
-        const currentSampleTabId = specificSampleTabId || sampleTabId;
-        const url = sampleUrl(
-          resolvedPath,
-          sampleId,
-          epoch,
-          currentSampleTabId,
-        );
-        return url;
-      }
-      return undefined;
-    },
-    [resolveLogPath, tabId, sampleTabId],
-  );
-  return getSampleUrl;
-};
+import { logUrlRaw, sampleUrl } from "./url";
 
 /**
  * Hook that provides sample navigation utilities with proper URL handling
@@ -127,6 +50,7 @@ export const useSampleNavigation = () => {
   const setShowingSampleDialog = useStore(
     (state) => state.appActions.setShowingSampleDialog,
   );
+  const showingSampleDialog = useStore((state) => state.app.dialogs.sample);
 
   // Navigate to a specific sample with index
   const showSample = useCallback(
@@ -163,22 +87,51 @@ export const useSampleNavigation = () => {
     ],
   );
 
+  const navigateSampleIndex = useCallback(
+    (index: number) => {
+      if (index > -1 && index < sampleSummaries.length) {
+        if (showingSampleDialog) {
+          const resolvedPath = resolveLogPath();
+          if (resolvedPath) {
+            const summary = sampleSummaries[index];
+            const url = sampleUrl(
+              resolvedPath,
+              summary.id,
+              summary.epoch,
+              sampleTabId,
+            );
+
+            // Navigate to the sample URL
+            navigate(url);
+          }
+        } else {
+          selectSample(index);
+        }
+      }
+    },
+    [
+      selectedSampleIndex,
+      showSample,
+      sampleTabId,
+      sampleSummaries,
+      showingSampleDialog,
+      resolveLogPath,
+      navigate,
+    ],
+  );
+
   // Navigate to the next sample
   const nextSample = useCallback(() => {
     const itemsCount = sampleSummaries.length;
     const next = Math.min(selectedSampleIndex + 1, itemsCount - 1);
-    if (next > -1) {
-      selectSample(next);
-    }
-  }, [selectedSampleIndex, showSample, sampleTabId]);
+    navigateSampleIndex(next);
+  }, [selectedSampleIndex, navigateSampleIndex, sampleSummaries]);
 
   // Navigate to the previous sample
   const previousSample = useCallback(() => {
     const prev = selectedSampleIndex - 1;
-    if (prev > -1) {
-      selectSample(prev);
-    }
-  }, [selectedSampleIndex, showSample, sampleTabId]);
+    navigateSampleIndex(prev);
+  }, [selectedSampleIndex, navigateSampleIndex]);
 
   // Get a sample URL for a specific sample
   const getSampleUrl = useCallback(

inspect_ai/_view/www/src/app/samples/SampleDialog.tsx

@@ -6,9 +6,9 @@ import { ErrorPanel } from "../../components/ErrorPanel";
 import { useLogSelection, usePrevious, useSampleData } from "../../state/hooks";
 import { useStatefulScrollPosition } from "../../state/scrolling";
 import { useStore } from "../../state/store";
-import { useSampleNavigation } from "../routing/navigationHooks";
 import { SampleDisplay } from "./SampleDisplay";
 
+import { useSampleNavigation } from "../routing/sampleNavigation";
 import styles from "./SampleDialog.module.css";
 
 interface SampleDialogProps {

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

@@ -37,7 +37,7 @@ import { formatTime } from "../../utils/format";
 import { estimateSize } from "../../utils/json";
 import { printHeadingHtml, printHtml } from "../../utils/print";
 import { RecordTree } from "../content/RecordTree";
-import { useSampleDetailNavigation } from "../routing/navigationHooks";
+import { useSampleDetailNavigation } from "../routing/sampleNavigation";
 import { sampleUrl } from "../routing/url";
 import { ModelTokenTable } from "../usage/ModelTokenTable";
 import { ChatViewVirtualList } from "./chat/ChatViewVirtualList";

inspect_ai/_view/www/src/app/samples/chat/MessageCitations.module.css

@@ -0,0 +1,16 @@
+.citations {
+  margin-top: 1em;
+  margin-bottom: 1em;
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  column-gap: 0.5em;
+}
+
+a.citationLink {
+  display: block;
+  color: var(--bs-body);
+  text-decoration: none;
+}
+a.citationLink:hover {
+  text-decoration: underline;
+}

inspect_ai/_view/www/src/app/samples/chat/MessageCitations.tsx

@@ -0,0 +1,63 @@
+import clsx from "clsx";
+import { FC, Fragment, PropsWithChildren, ReactElement } from "react";
+import { Citation } from "./types";
+
+import { decodeHtmlEntities } from "../../../utils/html";
+import styles from "./MessageCitations.module.css";
+import { UrlCitation as UrlCitationType } from "../../../@types/log";
+
+export interface MessageCitationsProps {
+  citations: Citation[];
+}
+
+export const MessageCitations: FC<MessageCitationsProps> = ({ citations }) => {
+  if (citations.length === 0) {
+    return undefined;
+  }
+
+  return (
+    <div className={clsx(styles.citations, "text-size-smallest")}>
+      {citations.map((citation, index) => (
+        <Fragment key={index}>
+          <span>{index + 1}</span>
+          <MessageCitation citation={citation} />
+        </Fragment>
+      ))}
+    </div>
+  );
+};
+
+interface MessageCitationProps {
+  citation: Citation;
+}
+
+const MessageCitation: FC<MessageCitationProps> = ({ citation }) => {
+  const innards = decodeHtmlEntities(
+    citation.title ??
+      (typeof citation.cited_text === "string" ? citation.cited_text : ""),
+  );
+  return citation.type === "url" ? (
+    <UrlCitation citation={citation}>{innards}</UrlCitation>
+  ) : (
+    <OtherCitation>{innards}</OtherCitation>
+  );
+};
+
+const UrlCitation: FC<PropsWithChildren<{ citation: UrlCitationType }>> = ({
+  children,
+  citation,
+}): ReactElement => (
+  <a
+    href={citation.url}
+    target="_blank"
+    rel="noopener noreferrer"
+    className={clsx(styles.citationLink)}
+    title={`${citation.cited_text || ""}\n${citation.url}`}
+  >
+    {children}
+  </a>
+);
+
+const OtherCitation: FC<PropsWithChildren> = ({ children }): ReactElement => (
+  <>{children}</>
+);

inspect_ai/_view/www/src/app/samples/chat/MessageContent.module.css

@@ -10,3 +10,9 @@
   background-color: var(--bs-light-bg-subtle);
   border-radius: var(--bs-border-radius);
 }
+
+.data {
+  border: solid var(--bs-light-border-subtle) 1px;
+  padding: 1em;
+  margin-bottom: 0.5em;
+}

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

@@ -3,6 +3,7 @@ import clsx from "clsx";
 import { FC, ReactNode } from "react";
 import {
   ContentAudio,
+  ContentData,
   ContentImage,
   ContentReasoning,
   ContentText,
@@ -13,40 +14,42 @@ import {
 import { ContentTool } from "../../../app/types";
 import ExpandablePanel from "../../../components/ExpandablePanel";
 import { MarkdownDiv } from "../../../components/MarkdownDiv";
+import { ContentDataView } from "./content-data/ContentDataView";
+import { MessageCitations } from "./MessageCitations";
 import styles from "./MessageContent.module.css";
+import { MessagesContext } from "./MessageContents";
 import { ToolOutput } from "./tools/ToolOutput";
+import { Citation } from "./types";
 
-type ContentType =
-  | string
-  | string[]
+type ContentObject =
   | ContentText
   | ContentReasoning
   | ContentImage
   | ContentAudio
   | ContentVideo
-  | ContentTool;
+  | ContentTool
+  | ContentData;
+
+type ContentType = string | string[] | ContentObject;
+
+type Contents = string | string[] | ContentObject[];
 
 interface MessageContentProps {
-  contents:
-    | string
-    | string[]
-    | (
-        | ContentText
-        | ContentReasoning
-        | ContentImage
-        | ContentAudio
-        | ContentVideo
-        | ContentTool
-      )[];
+  contents: Contents;
+  context: MessagesContext;
 }
 
 /**
  * Renders message content based on its type.
  * Supports rendering strings, images, and tools using specific renderers.
  */
-export const MessageContent: FC<MessageContentProps> = ({ contents }) => {
-  if (Array.isArray(contents)) {
-    return contents.map((content, index) => {
+export const MessageContent: FC<MessageContentProps> = ({
+  contents,
+  context,
+}) => {
+  const normalized = normalizeContent(contents);
+  if (Array.isArray(normalized)) {
+    return normalized.map((content, index) => {
       if (typeof content === "string") {
         return messageRenderers["text"].render(
           `text-content-${index}`,
@@ -55,8 +58,10 @@ export const MessageContent: FC<MessageContentProps> = ({ contents }) => {
             text: content,
             refusal: null,
             internal: null,
+            citations: null,
           },
           index === contents.length - 1,
+          context,
         );
       } else {
         if (content) {
@@ -66,6 +71,7 @@ export const MessageContent: FC<MessageContentProps> = ({ contents }) => {
               `text-${content.type}-${index}`,
               content,
               index === contents.length - 1,
+              context,
             );
           } else {
             console.error(`Unknown message content type '${content.type}'`);
@@ -77,32 +83,52 @@ export const MessageContent: FC<MessageContentProps> = ({ contents }) => {
     // This is a simple string
     const contentText: ContentText = {
       type: "text",
-      text: contents,
+      text: normalized,
       refusal: null,
       internal: null,
+      citations: null,
     };
     return messageRenderers["text"].render(
       "text-message-content",
       contentText,
       true,
+      context,
     );
   }
 };
 
 interface MessageRenderer {
-  render: (key: string, content: ContentType, isLast: boolean) => ReactNode;
+  render: (
+    key: string,
+    content: ContentType,
+    isLast: boolean,
+    context: MessagesContext,
+  ) => ReactNode;
 }
 
 const messageRenderers: Record<string, MessageRenderer> = {
   text: {
     render: (key, content, isLast) => {
+      // The context provides a way to share context between different
+      // rendering. In this case, we'll use it to keep track of citations
       const c = content as ContentText;
+      const cites = c.citations ?? [];
+
+      if (!c.text && !cites.length) {
+        return undefined;
+      }
+
       return (
-        <MarkdownDiv
-          key={key}
-          markdown={c.text || ""}
-          className={isLast ? "no-last-para-padding" : ""}
-        />
+        <>
+          <MarkdownDiv
+            key={key}
+            markdown={c.text || ""}
+            className={isLast ? "no-last-para-padding" : ""}
+          />
+          {c.citations ? (
+            <MessageCitations citations={c.citations as Citation[]} />
+          ) : undefined}
+        </>
       );
     },
   },
@@ -172,6 +198,12 @@ const messageRenderers: Record<string, MessageRenderer> = {
       return <ToolOutput output={c.content} key={key} />;
     },
   },
+  data: {
+    render: (key, content) => {
+      const c = content as ContentData;
+      return <ContentDataView id={key} contentData={c} />;
+    },
+  },
 };
 
 /**
@@ -190,5 +222,122 @@ const mimeTypeForFormat = (format: Format1 | Format2): string => {
       return "video/mp4";
     case "mpeg":
       return "video/mpeg";
+    default:
+      return "video/mp4"; // Default to mp4 for unknown formats
+  }
+};
+
+// This collapses sequential runs of text content into a single text content,
+// adding citations as superscript counters at the end of the text for each block
+// containing citations. The citations are then attached to the content where
+// they can be rendered separately (with coordinating numbers).
+const normalizeContent = (contents: Contents): Contents => {
+  // its a string
+  if (typeof contents === "string") {
+    return contents;
+  }
+
+  // its an array of strings
+  if (contents.length > 0 && typeof contents[0] === "string") {
+    return contents;
+  }
+
+  const result: ContentObject[] = [];
+  const collection: ContentText[] = [];
+
+  const collect = () => {
+    if (collection.length > 0) {
+      // Flatten the citations from the collection
+      const filteredCitations = collection.flatMap((c) => c.citations || []);
+      // Render citations as superscript counters
+      let citeCount = 0;
+      const textWithCites = collection
+        .map((c) => {
+          // separate the cites into those with a position and those without
+          // sort by end_index (to allow for numbering to not affect indexes)
+          // Type guard function to check if cited_text is a range
+          const positionalCites = (c.citations ?? [])
+            .filter(isCitationWithRange)
+            .sort((a, b) => b.cited_text[1] - a.cited_text[1]);
+
+          const endCites = c.citations?.filter(
+            (citation) => !isCitationWithRange(citation),
+          );
+
+          // Process cites with positions
+          let textWithCites = c.text;
+          for (let i = 0; i < positionalCites.length; i++) {
+            const end_index = positionalCites[i].cited_text[1];
+
+            textWithCites =
+              textWithCites.slice(0, end_index) +
+              `<sup>${positionalCites.length - i}</sup>` +
+              textWithCites.slice(end_index);
+          }
+          citeCount = citeCount + positionalCites.length;
+
+          // Process cites without positions (they just attach to the end of the content)
+          const citeText = endCites?.map((_citation) => `${++citeCount}`);
+          let inlineCites = "";
+          if (citeText && citeText.length > 0) {
+            inlineCites = `<sup>${citeText.join(",")}</sup>`;
+          }
+          return (textWithCites || "") + inlineCites;
+        })
+        .join("");
+
+      // Flatten the text from the collection into a single text content
+      result.push({
+        type: "text",
+        text: textWithCites,
+        refusal: null,
+        internal: null,
+        citations: filteredCitations,
+      });
+      collection.length = 0;
+    }
+  };
+
+  for (const content of contents) {
+    if (typeof content === "string") {
+      // this shouldn't happen, but if it does
+      // just convert it to a text content
+      result.push({
+        type: "text",
+        text: content,
+        refusal: null,
+        internal: null,
+        citations: null,
+      });
+      continue;
+    }
+
+    if (content.type === "text") {
+      // Collect text until we hit a  non-text content
+      collection.push(content);
+      continue;
+    } else {
+      // collect any text content before this non-text content
+      collect();
+      result.push(content);
+    }
   }
+
+  // collect any remaining text content
+  collect();
+
+  return result;
 };
+
+// This is a helper that makes Omit<> work with a union type by distributing
+// the omit over the union members.
+export type DistributiveOmit<TObj, TKey extends PropertyKey> = TObj extends any
+  ? Omit<TObj, TKey>
+  : never;
+
+/** Type guard that allows narrowing down to Citations whose `cited_text` is a range */
+const isCitationWithRange = (
+  citation: Citation,
+): citation is DistributiveOmit<Citation, "cited_text"> & {
+  cited_text: [number, number];
+} => Array.isArray(citation.cited_text);

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

@@ -12,7 +12,7 @@ import clsx from "clsx";
 import { FC, Fragment } from "react";
 import { ContentTool } from "../../../app/types";
 import styles from "./MessageContents.module.css";
-import { ChatViewToolCallStyle } from "./types";
+import { ChatViewToolCallStyle, Citation } from "./types";
 
 interface MessageContentsProps {
   id: string;
@@ -21,12 +21,24 @@ interface MessageContentsProps {
   toolCallStyle: ChatViewToolCallStyle;
 }
 
+export interface MessagesContext {
+  citations: Citation[];
+}
+
+export const defaultContext = () => {
+  return {
+    citeOffset: 0,
+    citations: [],
+  };
+};
+
 export const MessageContents: FC<MessageContentsProps> = ({
   id,
   message,
   toolMessages,
   toolCallStyle,
 }) => {
+  const context: MessagesContext = defaultContext();
   if (
     message.role === "assistant" &&
     message.tool_calls &&
@@ -79,14 +91,18 @@ export const MessageContents: FC<MessageContentsProps> = ({
       <Fragment>
         {message.content && (
           <div className={styles.content}>
-            <MessageContent contents={message.content} />
+            <MessageContent contents={message.content} context={context} />
           </div>
         )}
         {toolCalls}
       </Fragment>
     );
   } else {
-    return <MessageContent contents={message.content} />;
+    return (
+      <>
+        <MessageContent contents={message.content} context={context} />
+      </>
+    );
   }
 };
 
@@ -109,6 +125,7 @@ const resolveToolMessage = (toolMessage?: ChatMessageTool): ContentTool[] => {
             text: content,
             refusal: null,
             internal: null,
+            citations: null,
           },
         ],
       },
@@ -125,6 +142,7 @@ const resolveToolMessage = (toolMessage?: ChatMessageTool): ContentTool[] => {
                 text: con,
                 refusal: null,
                 internal: null,
+                citations: null,
               },
             ],
           } as ContentTool;

inspect_ai/_view/www/src/app/samples/chat/content-data/ContentDataView.module.css

@@ -0,0 +1,7 @@
+.contentData {
+  border: solid var(--bs-light-border-subtle) 1px;
+  padding: 0.5em;
+  margin-bottom: 0.5em;
+  margin-top: 0.5em;
+  margin-left: 1em;
+}