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

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

@@ -0,0 +1,60 @@
+import { NavPills } from "../../components/NavPills.tsx";
+import { Buckets, ContentRenderer } from "../../metadata/types.ts";
+import {
+  ChatMessageAssistant,
+  ChatMessageSystem,
+  ChatMessageTool,
+  ChatMessageUser,
+} from "../../types/log";
+import { ChatView } from "./ChatView";
+
+/**
+ * Renders chat messages as a ChatView component.
+ */
+export const ChatMessageRenderer: ContentRenderer = {
+  bucket: Buckets.first,
+  canRender: (entry) => {
+    const val = entry.value;
+    return (
+      Array.isArray(val) &&
+      val.length > 0 &&
+      val[0]?.role !== undefined &&
+      val[0]?.content !== undefined
+    );
+  },
+  render: (id, entry) => {
+    return {
+      rendered: (
+        <NavPills>
+          <ChatSummary title="Last Turn" id={id} messages={entry.value} />
+          <ChatView title="All" id={id} messages={entry.value} />
+        </NavPills>
+      ),
+    };
+  },
+};
+
+/**
+ * Represents a chat summary component that renders a list of chat messages.
+ */
+export const ChatSummary: React.FC<{
+  id: string;
+  title?: string;
+  messages: (
+    | ChatMessageAssistant
+    | ChatMessageUser
+    | ChatMessageSystem
+    | ChatMessageTool
+  )[];
+}> = ({ id, messages }) => {
+  // Show the last 'turn'
+  const summaryMessages = [];
+  for (const message of messages.slice().reverse()) {
+    summaryMessages.unshift(message);
+    if (message.role === "user") {
+      break;
+    }
+  }
+
+  return <ChatView id={id} messages={summaryMessages} />;
+};

inspect_ai/_view/www/src/samples/chat/ChatMessageRow.module.css

@@ -0,0 +1,9 @@
+.grid {
+  display: grid;
+  grid-template-columns: max-content auto;
+  column-gap: 0.4em;
+}
+
+.number {
+  margin-top: 0.1em;
+}

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

@@ -0,0 +1,57 @@
+import clsx from "clsx";
+import { ChatMessage } from "./ChatMessage";
+
+import styles from "./ChatMessageRow.module.css";
+import { ResolvedMessage } from "./messages";
+
+interface ChatMessageRowProps {
+  parentName: string;
+  number?: number;
+  resolvedMessage: ResolvedMessage;
+  toolCallStyle: "compact" | "complete";
+  indented?: boolean;
+}
+
+/**
+ * Renders the ChatMessage component.
+ */
+export const ChatMessageRow: React.FC<ChatMessageRowProps> = ({
+  parentName,
+  number,
+  resolvedMessage,
+  toolCallStyle,
+  indented,
+}) => {
+  if (number) {
+    return (
+      <div className={styles.grid}>
+        <div
+          className={clsx(
+            "text-size-smaller",
+            "text-style-secondary",
+            styles.number,
+          )}
+        >
+          {number}
+        </div>
+        <ChatMessage
+          id={`${parentName}-chat-messages`}
+          message={resolvedMessage.message}
+          toolMessages={resolvedMessage.toolMessages}
+          indented={indented}
+          toolCallStyle={toolCallStyle}
+        />
+      </div>
+    );
+  } else {
+    return (
+      <ChatMessage
+        id={`${parentName}-chat-messages`}
+        message={resolvedMessage.message}
+        toolMessages={resolvedMessage.toolMessages}
+        indented={indented}
+        toolCallStyle={toolCallStyle}
+      />
+    );
+  }
+};

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

@@ -0,0 +1,47 @@
+import clsx from "clsx";
+import { Messages } from "../../types/log";
+import { ChatMessageRow } from "./ChatMessageRow";
+import { resolveMessages } from "./messages";
+
+interface ChatViewProps {
+  id?: string;
+  messages: Messages;
+  toolCallStyle?: "compact" | "complete";
+  title?: string;
+  indented?: boolean;
+  numbered?: boolean;
+  className?: string | string[];
+}
+
+/**
+ * Renders the ChatView component.
+ */
+export const ChatView: React.FC<ChatViewProps> = ({
+  id,
+  messages,
+  toolCallStyle = "complete",
+  indented,
+  numbered = true,
+  className,
+}) => {
+  const collapsedMessages = resolveMessages(messages);
+  const result = (
+    <div className={clsx(className)}>
+      {collapsedMessages.map((msg, index) => {
+        const number =
+          collapsedMessages.length > 1 && numbered ? index + 1 : undefined;
+        return (
+          <ChatMessageRow
+            key={`${id}-msg-${index}`}
+            parentName={id || "chat-view"}
+            number={number}
+            resolvedMessage={msg}
+            indented={indented}
+            toolCallStyle={toolCallStyle}
+          />
+        );
+      })}
+    </div>
+  );
+  return result;
+};

inspect_ai/_view/www/src/samples/chat/ChatViewVirtualList.module.css

@@ -0,0 +1,4 @@
+.list {
+  width: 100%;
+  margin-top: 1em;
+}

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

@@ -0,0 +1,58 @@
+import { RefObject } from "react";
+import { VirtualList } from "../../components/VirtualList";
+import { Messages } from "../../types/log";
+
+import clsx from "clsx";
+import { ChatMessageRow } from "./ChatMessageRow";
+import styles from "./ChatViewVirtualList.module.css";
+import { ResolvedMessage, resolveMessages } from "./messages";
+
+interface ChatViewVirtualListProps {
+  id?: string;
+  messages: Messages;
+  toolCallStyle: "compact" | "complete";
+  className?: string | string[];
+  indented: boolean;
+  numbered?: boolean;
+  scrollRef?: RefObject<HTMLElement | null>;
+}
+
+/**
+ * Renders the ChatViewVirtualList component.
+ */
+export const ChatViewVirtualList: React.FC<ChatViewVirtualListProps> = ({
+  id,
+  messages,
+  toolCallStyle,
+  className,
+  indented,
+  numbered = true,
+  scrollRef,
+}) => {
+  const collapsedMessages = resolveMessages(messages);
+
+  const renderRow = (item: ResolvedMessage, index: number) => {
+    const number =
+      collapsedMessages.length > 1 && numbered ? index + 1 : undefined;
+    return (
+      <ChatMessageRow
+        parentName={id || "chat-virtual-list"}
+        number={number}
+        resolvedMessage={item}
+        indented={indented}
+        toolCallStyle={toolCallStyle}
+      />
+    );
+  };
+
+  const result = (
+    <VirtualList
+      data={collapsedMessages}
+      renderRow={renderRow}
+      scrollRef={scrollRef}
+      className={clsx(styles.list, className)}
+    />
+  );
+
+  return result;
+};

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

@@ -0,0 +1,4 @@
+.contentImage {
+  max-width: 800px;
+  border: solid var(--bs-border-color) 1px;
+}

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

@@ -0,0 +1,157 @@
+import { MarkdownDiv } from "../../components/MarkdownDiv";
+import { ContentTool } from "../../types";
+import {
+  ContentAudio,
+  ContentImage,
+  ContentText,
+  ContentVideo,
+  Format,
+  Format1,
+} from "../../types/log";
+import styles from "./MessageContent.module.css";
+import { ToolOutput } from "./tools/ToolOutput";
+
+type ContentType =
+  | string
+  | string[]
+  | ContentText
+  | ContentImage
+  | ContentAudio
+  | ContentVideo
+  | ContentTool;
+
+interface MessageContentProps {
+  contents:
+    | string
+    | string[]
+    | (
+        | ContentText
+        | ContentImage
+        | ContentAudio
+        | ContentVideo
+        | ContentTool
+      )[];
+}
+
+/**
+ * Renders message content based on its type.
+ * Supports rendering strings, images, and tools using specific renderers.
+ */
+export const MessageContent: React.FC<MessageContentProps> = ({ contents }) => {
+  if (Array.isArray(contents)) {
+    return contents.map((content, index) => {
+      if (typeof content === "string") {
+        return messageRenderers["text"].render(
+          `text-content-${index}`,
+          {
+            type: "text",
+            text: content,
+          },
+          index === contents.length - 1,
+        );
+      } else {
+        if (content) {
+          const renderer = messageRenderers[content.type];
+          if (renderer) {
+            return renderer.render(
+              `text-${content.type}-${index}`,
+              content,
+              index === contents.length - 1,
+            );
+          } else {
+            console.error(`Unknown message content type '${content.type}'`);
+          }
+        }
+      }
+    });
+  } else {
+    // This is a simple string
+    const contentText: ContentText = {
+      type: "text",
+      text: contents,
+    };
+    return messageRenderers["text"].render(
+      "text-message-content",
+      contentText,
+      true,
+    );
+  }
+};
+
+interface MessageRenderer {
+  render: (
+    key: string,
+    content: ContentType,
+    isLast: boolean,
+  ) => React.ReactNode;
+}
+
+const messageRenderers: Record<string, MessageRenderer> = {
+  text: {
+    render: (key, content, isLast) => {
+      const c = content as ContentText;
+      return (
+        <MarkdownDiv
+          key={key}
+          markdown={c.text}
+          className={isLast ? "no-last-para-padding" : ""}
+        />
+      );
+    },
+  },
+  image: {
+    render: (key, content) => {
+      const c = content as ContentImage;
+      if (c.image.startsWith("data:")) {
+        return <img src={c.image} className={styles.contentImage} key={key} />;
+      } else {
+        return <code key={key}>{c.image}</code>;
+      }
+    },
+  },
+  audio: {
+    render: (key, content) => {
+      const c = content as ContentAudio;
+      return (
+        <audio controls key={key}>
+          <source src={c.audio} type={mimeTypeForFormat(c.format)} />
+        </audio>
+      );
+    },
+  },
+  video: {
+    render: (key, content) => {
+      const c = content as ContentVideo;
+      return (
+        <video width="500" height="375" controls key={key}>
+          <source src={c.video} type={mimeTypeForFormat(c.format)} />
+        </video>
+      );
+    },
+  },
+  tool: {
+    render: (key, content) => {
+      const c = content as ContentTool;
+      return <ToolOutput output={c.content} key={key} />;
+    },
+  },
+};
+
+/**
+ * Renders message content based on its type.
+ * Supports rendering strings, images, and tools using specific renderers.
+ */
+const mimeTypeForFormat = (format: Format | Format1): string => {
+  switch (format) {
+    case "mov":
+      return "video/quicktime";
+    case "wav":
+      return "audio/wav";
+    case "mp3":
+      return "audio/mpeg";
+    case "mp4":
+      return "video/mp4";
+    case "mpeg":
+      return "video/mpeg";
+  }
+};

inspect_ai/_view/www/src/samples/chat/MessageContents.module.css

@@ -0,0 +1,3 @@
+.content {
+  margin-bottom: 1em;
+}

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

@@ -0,0 +1,133 @@
+import {
+  ChatMessageAssistant,
+  ChatMessageSystem,
+  ChatMessageTool,
+  ChatMessageUser,
+} from "../../types/log";
+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";
+
+interface MessageContentsProps {
+  message: ChatMessageAssistant | ChatMessageSystem | ChatMessageUser;
+  toolMessages: ChatMessageTool[];
+  toolCallStyle: "compact" | "complete";
+}
+
+export const MessageContents: React.FC<MessageContentsProps> = ({
+  message,
+  toolMessages,
+  toolCallStyle,
+}) => {
+  if (
+    message.role === "assistant" &&
+    message.tool_calls &&
+    message.tool_calls.length
+  ) {
+    // Render the tool calls made by this message
+    const toolCalls = message.tool_calls.map((tool_call, idx) => {
+      // Extract tool input
+      const { input, functionCall, highlightLanguage } = resolveToolInput(
+        tool_call.function,
+        tool_call.arguments,
+      );
+
+      let toolMessage;
+      if (tool_call.id) {
+        toolMessage = toolMessages.find((msg) => {
+          return msg.tool_call_id === tool_call.id;
+        });
+      } else {
+        toolMessage = toolMessages[idx];
+      }
+
+      // Resolve the tool output
+      const resolvedToolOutput = resolveToolMessage(toolMessage);
+      if (toolCallStyle === "compact") {
+        return (
+          <div key={`tool-call-${idx}`}>
+            <code>tool: {functionCall}</code>
+          </div>
+        );
+      } else {
+        return (
+          <ToolCallView
+            key={`tool-call-${idx}`}
+            functionCall={functionCall}
+            input={input}
+            highlightLanguage={highlightLanguage}
+            output={resolvedToolOutput}
+          />
+        );
+      }
+    });
+
+    return (
+      <Fragment>
+        <div className={styles.content}>
+          {message.content ? (
+            <MessageContent contents={message.content} />
+          ) : undefined}
+        </div>
+        {toolCalls}
+      </Fragment>
+    );
+  } else {
+    return <MessageContent contents={message.content} />;
+  }
+};
+
+const resolveToolMessage = (toolMessage?: ChatMessageTool): ContentTool[] => {
+  if (!toolMessage) {
+    return [];
+  }
+
+  const content =
+    toolMessage.error !== null && toolMessage.error
+      ? toolMessage.error.message
+      : toolMessage.content;
+  if (typeof content === "string") {
+    return [
+      {
+        type: "tool",
+        content: [
+          {
+            type: "text",
+            text: content,
+          },
+        ],
+      },
+    ];
+  } else {
+    const result = content
+      .map((con) => {
+        if (typeof con === "string") {
+          return {
+            type: "tool",
+            content: [
+              {
+                type: "text",
+                text: con,
+              },
+            ],
+          } as ContentTool;
+        } else if (con.type === "text") {
+          return {
+            content: [con],
+            type: "tool",
+          } as ContentTool;
+        } else if (con.type === "image") {
+          return {
+            content: [con],
+            type: "tool",
+          } as ContentTool;
+        }
+      })
+      .filter((con) => con !== undefined);
+    return result;
+  }
+};

inspect_ai/_view/www/src/samples/chat/messages.ts

@@ -0,0 +1,112 @@
+import { ApplicationIcons } from "../../appearance/icons";
+import {
+  ChatMessageAssistant,
+  ChatMessageSystem,
+  ChatMessageTool,
+  ChatMessageUser,
+  ContentAudio,
+  ContentImage,
+  ContentText,
+  ContentVideo,
+  Messages,
+} from "../../types/log";
+
+export interface ResolvedMessage {
+  message: ChatMessageAssistant | ChatMessageSystem | ChatMessageUser;
+  toolMessages: ChatMessageTool[];
+}
+
+export const resolveMessages = (messages: Messages) => {
+  // Filter tool messages into a sidelist that the chat stream
+  // can use to lookup the tool responses
+
+  const resolvedMessages: ResolvedMessage[] = [];
+  for (const message of messages) {
+    if (message.role === "tool") {
+      // Add this tool message onto the previous message
+      if (resolvedMessages.length > 0) {
+        const msg = resolvedMessages[resolvedMessages.length - 1];
+
+        msg.toolMessages = msg.toolMessages || [];
+        msg.toolMessages.push(message);
+      }
+    } else {
+      resolvedMessages.push({ message, toolMessages: [] });
+    }
+  }
+
+  // Capture system messages (there could be multiple)
+  const systemMessages: ChatMessageSystem[] = [];
+  const collapsedMessages = resolvedMessages
+    .map((resolved) => {
+      if (resolved.message.role === "system") {
+        systemMessages.push(resolved.message);
+      }
+      return resolved;
+    })
+    .filter((resolved) => {
+      return resolved.message.role !== "system";
+    });
+
+  // Collapse system messages
+  const systemContent: (
+    | ContentText
+    | ContentImage
+    | ContentAudio
+    | ContentVideo
+  )[] = [];
+  for (const systemMessage of systemMessages) {
+    const contents = Array.isArray(systemMessage.content)
+      ? systemMessage.content
+      : [systemMessage.content];
+    systemContent.push(...contents.map(normalizeContent));
+  }
+
+  const systemMessage: ChatMessageSystem = {
+    role: "system",
+    content: systemContent,
+    source: "input",
+  };
+
+  // Converge them
+  if (systemMessage && systemMessage.content.length > 0) {
+    collapsedMessages.unshift({ message: systemMessage, toolMessages: [] });
+  }
+  return collapsedMessages;
+};
+
+export const iconForMsg = (
+  msg:
+    | ChatMessageAssistant
+    | ChatMessageSystem
+    | ChatMessageUser
+    | ChatMessageTool,
+) => {
+  if (msg.role === "user") {
+    return ApplicationIcons.role.user;
+  } else if (msg.role === "system") {
+    return ApplicationIcons.role.system;
+  } else if (msg.role === "tool") {
+    return ApplicationIcons.role.tool;
+  } else if (msg.role === "assistant") {
+    return ApplicationIcons.role.assistant;
+  } else {
+    return ApplicationIcons.role.unknown;
+  }
+};
+
+/**
+ * Normalize strings
+ */
+const normalizeContent = (
+  content: ContentText | ContentImage | ContentAudio | ContentVideo | string,
+): ContentText | ContentImage | ContentAudio | ContentVideo => {
+  if (typeof content === "string") {
+    return {
+      type: "text",
+      text: content,
+    };
+  } else {
+    return content;
+  }
+};