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

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

@@ -0,0 +1,147 @@
+import { useMemo } from "react";
+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;
+  highlightLanguage?: 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,
+  highlightLanguage,
+  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);
+  const normalizedContent = useMemo(() => normalizeContent(output), [output]);
+
+  return (
+    <div>
+      {mode !== "compact" && (!view || view.title) ? (
+        <ToolTitle title={view?.title || functionCall} />
+      ) : (
+        ""
+      )}
+      <div>
+        <div>
+          <ToolInput
+            highlightLanguage={highlightLanguage}
+            contents={input}
+            toolCallView={view}
+          />
+          <ExpandablePanel collapse={collapse} border={true} lines={15}>
+            <MessageContent contents={normalizedContent} />
+          </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,76 @@
+import clsx from "clsx";
+import { highlightElement } from "prismjs";
+import { memo, useEffect, useRef } from "react";
+import { MarkdownDiv } from "../../../components/MarkdownDiv";
+
+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 {
+  highlightLanguage?: string;
+  contents?: string | object;
+  toolCallView?: { content: string };
+}
+export const ToolInput: React.FC<ToolInputProps> = memo((props) => {
+  const { highlightLanguage, contents, toolCallView } = props;
+
+  const codeRef = useCodeHighlight(highlightLanguage);
+
+  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")}
+      />
+    );
+  }
+
+  const formattedContent =
+    typeof contents === "object" ? JSON.stringify(contents) : contents;
+
+  return (
+    <pre className={clsx("tool-output", styles.outputPre, styles.bottomMargin)}>
+      <code
+        ref={codeRef}
+        className={clsx(
+          "source-code",
+          "sourceCode",
+          `language-${highlightLanguage}`,
+          styles.outputCode,
+        )}
+      >
+        {formattedContent}
+      </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,60 @@
+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, idx) => {
+      const key = `tool-output-${idx}`;
+      if (out.type === "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}
+              key={key}
+            />,
+          );
+        } else {
+          outputs.push(<ToolTextOutput text={String(out.image)} key={key} />);
+        }
+      }
+    });
+  } else {
+    outputs.push(
+      <ToolTextOutput text={String(output)} key={"tool-output-single"} />,
+    );
+  }
+  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,92 @@
+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;
+  highlightLanguage?: string;
+}
+
+/**
+ * Resolves the input and metadata for a given tool call.
+ */
+export const resolveToolInput = (
+  fn: string,
+  toolArgs: Arguments,
+): ToolCallResult => {
+  const toolName = fn;
+
+  const [inputKey, highlightLanguage] = extractInputMetadata(toolName);
+  const { input, args } = extractInput(
+    toolArgs as Record<string, unknown>,
+    inputKey,
+  );
+  const functionCall =
+    args.length > 0 ? `${toolName}(${args.join(", ")})` : toolName;
+  return {
+    functionCall,
+    input,
+    highlightLanguage,
+  };
+};
+
+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 = (
+  args: Record<string, unknown>,
+  inputKey?: string,
+): { input?: string; args: string[] } => {
+  const formatArg = (key: string, value: unknown) => {
+    const quotedValue =
+      typeof value === "string"
+        ? `"${value}"`
+        : typeof value === "object" || Array.isArray(value)
+          ? JSON.stringify(value, undefined, 2)
+          : String(value);
+    return `${key}: ${quotedValue}`;
+  };
+  if (args) {
+    if (inputKey && 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: [],
+  };
+};