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

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

@@ -0,0 +1,145 @@
+import ExpandablePanel from "../../../components/ExpandablePanel";
+import { ContentTool } from "../../../types";
+import {
+  ContentAudio,
+  ContentImage,
+  ContentText,
+  ContentVideo,
+  ToolCallContent,
+} from "../../../types/log";
+import { MessageContent } from "../MessageContent";
+import { ToolInput } from "./ToolInput";
+import { ToolTitle } from "./ToolTitle";
+
+interface ToolCallViewProps {
+  functionCall: string;
+  input?: string;
+  inputType?: string;
+  view?: ToolCallContent;
+  output:
+    | string
+    | number
+    | boolean
+    | ContentText
+    | ContentAudio
+    | ContentImage
+    | ContentVideo
+    | ContentTool
+    | (
+        | ContentText
+        | ContentAudio
+        | ContentImage
+        | ContentVideo
+        | ContentTool
+      )[];
+  mode?: "compact";
+}
+
+/**
+ * Renders the ToolCallView component.
+ */
+export const ToolCallView: React.FC<ToolCallViewProps> = ({
+  functionCall,
+  input,
+  inputType,
+  view,
+  output,
+  mode,
+}) => {
+  // don't collapse if output includes an image
+  function isContentImage(
+    value:
+      | string
+      | number
+      | boolean
+      | ContentText
+      | ContentAudio
+      | ContentImage
+      | ContentVideo
+      | ContentTool,
+  ) {
+    if (value && typeof value === "object") {
+      if (value.type === "image") {
+        return true;
+      } else if (value.type === "tool") {
+        if (
+          Array.isArray(value.content) &&
+          value.content.some(isContentImage)
+        ) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
+  const collapse = Array.isArray(output)
+    ? output.every((item) => !isContentImage(item))
+    : !isContentImage(output);
+
+  return (
+    <div>
+      {mode !== "compact" && (!view || view.title) ? (
+        <ToolTitle title={view?.title || functionCall} />
+      ) : (
+        ""
+      )}
+      <div>
+        <div>
+          <ToolInput type={inputType} contents={input} view={view} />
+          {output ? (
+            <ExpandablePanel collapse={collapse} border={true} lines={15}>
+              <MessageContent contents={normalizeContent(output)} />
+            </ExpandablePanel>
+          ) : (
+            ""
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Renders the ToolCallView component.
+ */
+const normalizeContent = (
+  output:
+    | string
+    | number
+    | boolean
+    | ContentText
+    | ContentImage
+    | ContentAudio
+    | ContentVideo
+    | ContentTool
+    | (
+        | ContentText
+        | ContentImage
+        | ContentAudio
+        | ContentVideo
+        | ContentTool
+      )[],
+): (
+  | ContentText
+  | ContentImage
+  | ContentAudio
+  | ContentVideo
+  | ContentTool
+)[] => {
+  if (Array.isArray(output)) {
+    return output;
+  } else {
+    return [
+      {
+        type: "tool",
+        content: [
+          {
+            type: "text",
+            text: String(output),
+          },
+        ],
+      },
+    ];
+  }
+};

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

@@ -0,0 +1,14 @@
+.outputPre {
+  padding: 0.5em;
+  margin-top: 0.25em;
+  margin-bottom: 1rem;
+}
+
+.outputCode {
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+.bottomMargin {
+  margin-bottom: 1em;
+}

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

@@ -0,0 +1,86 @@
+import clsx from "clsx";
+import murmurhash from "murmurhash";
+import { highlightElement, languages } from "prismjs";
+import { useEffect, useRef } from "react";
+import { MarkdownDiv } from "../../../components/MarkdownDiv";
+import { ToolCallContent } from "../../../types/log";
+import styles from "./ToolInput.module.css";
+
+interface ToolInputProps {
+  type?: string;
+  contents?: string;
+  view?: ToolCallContent;
+}
+
+/**
+ * Renders the ToolInput component.
+ */
+export const ToolInput: React.FC<ToolInputProps> = ({
+  type,
+  contents,
+  view,
+}) => {
+  if (!contents && !view?.content) {
+    return null;
+  }
+
+  if (view) {
+    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);
+              }
+            }
+          }
+        }
+      }
+    }, [contents, view]);
+    return (
+      <MarkdownDiv
+        markdown={view.content}
+        ref={toolViewRef}
+        className={clsx(styles.bottomMargin)}
+      />
+    );
+  } 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 || "");
+
+    return (
+      <pre
+        className={clsx("tool-output", styles.outputPre, styles.bottomMargin)}
+      >
+        <code
+          ref={toolInputRef}
+          key={key}
+          className={clsx("source-code", `language-${type}`, styles.outputCode)}
+        >
+          {contents}
+        </code>
+      </pre>
+    );
+  }
+};

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

@@ -0,0 +1,19 @@
+.toolImage {
+  max-width: 800px;
+  border: solid var(--bs-border-color) 1px;
+}
+
+.output {
+  display: grid;
+}
+
+.textOutput {
+  margin-left: 2px;
+  padding: 0.5em 0.5em 0.5em 0.5em;
+  white-space: pre-wrap;
+  margin-bottom: 0;
+}
+
+.textCode {
+  word-wrap: anywhere;
+}

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

@@ -0,0 +1,53 @@
+import clsx from "clsx";
+import { ContentImage, ContentText } from "../../../types/log";
+import styles from "./ToolOutput.module.css";
+
+interface ToolOutputProps {
+  output: string | number | boolean | (ContentText | ContentImage)[];
+}
+
+/**
+ * Renders the ToolOutput component.
+ */
+export const ToolOutput: React.FC<ToolOutputProps> = ({ output }) => {
+  // If there is no output, don't show the tool
+  if (!output) {
+    return null;
+  }
+
+  // First process an array or object into a string
+  const outputs = [];
+  if (Array.isArray(output)) {
+    output.forEach((out) => {
+      if (out.type === "text") {
+        outputs.push(<ToolTextOutput text={out.text} />);
+      } else {
+        if (out.image.startsWith("data:")) {
+          outputs.push(
+            <img className={clsx(styles.toolImage)} src={out.image} />,
+          );
+        } else {
+          outputs.push(<ToolTextOutput text={String(out.image)} />);
+        }
+      }
+    });
+  } else {
+    outputs.push(<ToolTextOutput text={String(output)} />);
+  }
+  return <div className={clsx(styles.output)}>{outputs}</div>;
+};
+
+interface ToolTextOutputProps {
+  text: string;
+}
+
+/**
+ * Renders the ToolTextOutput component.
+ */
+const ToolTextOutput: React.FC<ToolTextOutputProps> = ({ text }) => {
+  return (
+    <pre className={clsx(styles.textOutput)}>
+      <code className={clsx("sourceCode", styles.textCode)}>{text.trim()}</code>
+    </pre>
+  );
+};

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

@@ -0,0 +1,4 @@
+.image {
+  margin-right: 0.2rem;
+  opacity: 0.4;
+}

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

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

inspect_ai/_view/www/src/samples/chat/tools/tool.ts

@@ -0,0 +1,107 @@
+import "prismjs/components/prism-bash";
+import "prismjs/components/prism-json";
+import "prismjs/components/prism-python";
+
+import { Arguments } from "../../../types/log";
+
+export interface ToolCallResult {
+  functionCall: string;
+  input?: string;
+  inputType?: string;
+}
+
+/**
+ * Resolves the input and metadata for a given tool call.
+ */
+export const resolveToolInput = (
+  fn: string,
+  toolArgs: Arguments,
+): ToolCallResult => {
+  const toolName = fn;
+
+  const [inputKey, inputType] = extractInputMetadata(toolName);
+  if (inputKey) {
+    const { input, args } = extractInput(
+      inputKey,
+      toolArgs as Record<string, unknown>,
+    );
+    const functionCall =
+      args.length > 0 ? `${toolName}(${args.join(",")})` : toolName;
+    return {
+      functionCall,
+      input,
+      inputType,
+    };
+  } else {
+    return {
+      functionCall: toolName,
+    };
+  }
+};
+
+const extractInputMetadata = (
+  toolName: string,
+): [string | undefined, string | undefined] => {
+  if (toolName === "bash") {
+    return ["cmd", "bash"];
+  } else if (toolName === "python") {
+    return ["code", "python"];
+  } else if (toolName === "web_search") {
+    return ["query", "text"];
+  } else {
+    return [undefined, undefined];
+  }
+};
+
+const extractInput = (
+  inputKey: string,
+  args: Record<string, unknown>,
+): { input?: string; args: string[] } => {
+  const formatArg = (key: string, value: unknown) => {
+    const quotedValue = typeof value === "string" ? `"${value}"` : value;
+    return `${key}: ${quotedValue}`;
+  };
+  if (args) {
+    if (Object.keys(args).length === 1) {
+      const inputRaw = args[Object.keys(args)[0]];
+
+      let input;
+      if (Array.isArray(inputRaw) || typeof inputRaw === "object") {
+        input = JSON.stringify(inputRaw, undefined, 2);
+      } else {
+        input = String(inputRaw);
+      }
+
+      return {
+        input: input,
+        args: [],
+      };
+    } else if (args[inputKey]) {
+      const input = args[inputKey];
+      const filteredArgs = Object.keys(args)
+        .filter((key) => {
+          return key !== inputKey;
+        })
+        .map((key) => {
+          return formatArg(key, args[key]);
+        });
+      return {
+        input: String(input),
+        args: filteredArgs,
+      };
+    } else {
+      const formattedArgs = Object.keys(args).map((key) => {
+        return formatArg(key, args[key]);
+      });
+
+      return {
+        input: undefined,
+        args: formattedArgs,
+      };
+    }
+  }
+  return {
+    input: undefined,
+    args: [],
+  };
+};