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

inspect_ai/_view/www/src/samples/transcript/event/EventPanel.tsx

@@ -0,0 +1,190 @@
+import clsx from "clsx";
+import { ReactNode } from "react";
+import { ApplicationIcons } from "../../../appearance/icons";
+import { EventNavs } from "./EventNavs";
+
+import React from "react";
+import styles from "./EventPanel.module.css";
+
+interface EventPanelProps {
+  id: string;
+  className?: string | string[];
+  title?: string;
+  subTitle?: string;
+  text?: string;
+  icon?: string;
+  collapse?: boolean;
+  collapsed?: boolean;
+  setCollapsed: (collapse: boolean) => void;
+  selectedNav: string;
+  setSelectedNav: (nav: string) => void;
+  children?: ReactNode | ReactNode[];
+}
+
+interface ChildProps {
+  "data-name"?: string;
+}
+
+/**
+ * Renders the StateEventView component.
+ */
+export const EventPanel: React.FC<EventPanelProps> = ({
+  id,
+  className,
+  title,
+  subTitle,
+  text,
+  icon,
+  collapse,
+  collapsed,
+  setCollapsed,
+  children,
+  setSelectedNav,
+  selectedNav,
+}) => {
+  const hasCollapse = collapse !== undefined;
+  const isCollapsed = collapsed === undefined ? collapse : collapsed;
+
+  const pillId = (index: number) => {
+    return `${id}-nav-pill-${index}`;
+  };
+
+  const filteredArrChildren = (
+    Array.isArray(children) ? children : [children]
+  ).filter((child) => !!child);
+  const defaultPillId = pillId(0);
+
+  const gridColumns = [];
+  if (hasCollapse) {
+    gridColumns.push("minmax(0, max-content)");
+  }
+  if (icon) {
+    gridColumns.push("max-content");
+  }
+  gridColumns.push("minmax(0, max-content)");
+  if (subTitle) {
+    gridColumns.push("minmax(0, max-content)");
+  }
+  gridColumns.push("auto");
+  gridColumns.push("minmax(0, max-content)");
+  gridColumns.push("minmax(0, max-content)");
+
+  const titleEl =
+    title || icon || filteredArrChildren.length > 1 ? (
+      <div
+        title={subTitle}
+        className={clsx("text-size-small")}
+        style={{
+          display: "grid",
+          gridTemplateColumns: gridColumns.join(" "),
+          columnGap: "0.3em",
+          cursor: hasCollapse ? "pointer" : undefined,
+        }}
+      >
+        {hasCollapse ? (
+          <i
+            onClick={() => {
+              setCollapsed(!isCollapsed);
+            }}
+            className={
+              isCollapsed
+                ? ApplicationIcons.chevron.right
+                : ApplicationIcons.chevron.down
+            }
+          />
+        ) : (
+          ""
+        )}
+        {icon ? (
+          <i
+            className={clsx(
+              icon || ApplicationIcons.metadata,
+              "text-style-secondary",
+            )}
+            onClick={() => {
+              setCollapsed(!isCollapsed);
+            }}
+          />
+        ) : (
+          ""
+        )}
+        <div
+          className={clsx("text-style-secondary", "text-style-label")}
+          onClick={() => {
+            setCollapsed(!isCollapsed);
+          }}
+        >
+          {title}
+        </div>
+        <div
+          onClick={() => {
+            setCollapsed(!isCollapsed);
+          }}
+        ></div>
+        <div
+          className={clsx("text-style-secondary", styles.label)}
+          onClick={() => {
+            setCollapsed(!isCollapsed);
+          }}
+        >
+          {collapsed ? text : ""}
+        </div>
+        <div className={styles.navs}>
+          {(!hasCollapse || !isCollapsed) &&
+          filteredArrChildren &&
+          filteredArrChildren.length > 1 ? (
+            <EventNavs
+              navs={filteredArrChildren.map((child, index) => {
+                const defaultTitle = `Tab ${index}`;
+                const title =
+                  child && React.isValidElement<ChildProps>(child)
+                    ? (child.props as ChildProps)["data-name"] || defaultTitle
+                    : defaultTitle;
+                return {
+                  id: `eventpanel-${id}-${index}`,
+                  title: title,
+                  target: pillId(index),
+                };
+              })}
+              selectedNav={selectedNav || defaultPillId}
+              setSelectedNav={setSelectedNav}
+            />
+          ) : (
+            ""
+          )}
+        </div>
+      </div>
+    ) : (
+      ""
+    );
+
+  const card = (
+    <div id={id} className={clsx(className, styles.card)}>
+      {titleEl}
+      <div
+        className={clsx(
+          "tab-content",
+          styles.cardContent,
+          hasCollapse && isCollapsed ? styles.hidden : undefined,
+        )}
+      >
+        {filteredArrChildren?.map((child, index) => {
+          const id = pillId(index);
+          const isSelected = selectedNav
+            ? id === selectedNav
+            : id === defaultPillId;
+
+          return (
+            <div
+              id={id}
+              className={clsx("tab-pane", "show", isSelected ? "active" : "")}
+            >
+              {child}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+  return card;
+};

inspect_ai/_view/www/src/samples/transcript/event/EventRow.module.css

@@ -0,0 +1,13 @@
+.title {
+  margin-left: 0.5em;
+  display: grid;
+  grid-template-columns: max-content max-content minmax(0, 1fr);
+  column-gap: 0.5em;
+}
+
+.contents {
+  padding: 0.4em;
+  margin-bottom: 0;
+  border: solid 1px var(--bs-light-border-subtle);
+  border-radius: var(--bs-border-radius);
+}

inspect_ai/_view/www/src/samples/transcript/event/EventRow.tsx

@@ -0,0 +1,32 @@
+import clsx from "clsx";
+import { ApplicationIcons } from "../../../appearance/icons";
+import styles from "./EventRow.module.css";
+
+interface EventRowProps {
+  title: string;
+  icon: string;
+  className?: string | string[];
+  children?: React.ReactNode | React.ReactNode[];
+}
+/**
+ * Renders the EventRow component.
+ */
+export const EventRow: React.FC<EventRowProps> = ({
+  title,
+  icon,
+  className,
+  children,
+}) => {
+  const contentEl = title ? (
+    <div className={clsx("text-size-small", styles.title, className)}>
+      <i className={icon || ApplicationIcons.metadata} />
+      <div className={clsx("text-style-label")}>{title}</div>
+      <div>{children}</div>
+    </div>
+  ) : (
+    ""
+  );
+
+  const card = <div className={clsx("card", styles.contents)}>{contentEl}</div>;
+  return card;
+};

inspect_ai/_view/www/src/samples/transcript/event/EventSection.module.css

@@ -0,0 +1,8 @@
+.container {
+  margin: 1em 0 0 0;
+}
+
+.title {
+  font-weight: 600;
+  padding-bottom: 0.3em;
+}

inspect_ai/_view/www/src/samples/transcript/event/EventSection.tsx

@@ -0,0 +1,29 @@
+import clsx from "clsx";
+import { ReactNode } from "react";
+import styles from "./EventSection.module.css";
+
+interface EventSectionProps {
+  title: string;
+  children: ReactNode;
+  className?: string | string[];
+}
+
+/**
+ * Renders the Event Section component.
+ */
+export const EventSection: React.FC<EventSectionProps> = ({
+  title,
+  children,
+  className,
+}) => {
+  return (
+    <div className={clsx(styles.container, className)}>
+      <div
+        className={clsx("text-size-small", "text-style-label", styles.title)}
+      >
+        {title}
+      </div>
+      {children}
+    </div>
+  );
+};

inspect_ai/_view/www/src/samples/transcript/state/StateDiffView.tsx

@@ -0,0 +1,67 @@
+import clsx from "clsx";
+import { diff } from "jsondiffpatch";
+import { format } from "jsondiffpatch/formatters/html";
+
+interface StateDiffViewProps {
+  before: Object;
+  after: Object;
+  className?: string | string[];
+}
+
+/**
+ * Renders a view displaying a list of state changes.
+ */
+export const StateDiffView: React.FC<StateDiffViewProps> = ({
+  before,
+  after,
+  className,
+}) => {
+  // Diff the objects and render the diff
+  const state_diff = diff(sanitizeKeys(before), sanitizeKeys(after));
+
+  const html_result = format(state_diff) || "Unable to render differences";
+  return (
+    <div
+      dangerouslySetInnerHTML={{ __html: unescapeNewlines(html_result) }}
+      className={clsx(className)}
+    ></div>
+  );
+};
+
+function unescapeNewlines<T>(obj: T): T {
+  if (typeof obj === "string") {
+    return obj.replace(/\\n/g, "\n") as T;
+  }
+
+  if (obj === null || typeof obj !== "object") {
+    return obj;
+  }
+
+  if (Array.isArray(obj)) {
+    return obj.map((item) => unescapeNewlines(item)) as T;
+  }
+
+  return Object.fromEntries(
+    Object.entries(obj as Record<string, unknown>).map(([key, value]) => [
+      key,
+      unescapeNewlines(value),
+    ]),
+  ) as T;
+}
+
+function sanitizeKeys<T>(obj: T): T {
+  if (typeof obj !== "object" || obj === null) {
+    return obj;
+  }
+
+  if (Array.isArray(obj)) {
+    return obj.map((item) => sanitizeKeys(item)) as T;
+  }
+
+  return Object.fromEntries(
+    Object.entries(obj as Record<string, unknown>).map(([key, value]) => [
+      key.replace(/</g, "&lt;").replace(/>/g, "&gt;"),
+      sanitizeKeys(value),
+    ]),
+  ) as T;
+}

inspect_ai/_view/www/src/samples/transcript/state/StateEventRenderers.tsx

@@ -0,0 +1,274 @@
+import clsx from "clsx";
+import { Fragment, ReactNode } from "react";
+import {
+  HumanBaselineView,
+  SessionLog,
+} from "../../../components/HumanBaselineView";
+import { JsonChange, Messages } from "../../../types/log";
+import { ChatView } from "../../chat/ChatView";
+
+import styles from "./StateEventRenders.module.css";
+
+interface Signature {
+  remove: string[];
+  replace: string[];
+  add: string[];
+}
+
+interface ChangeType {
+  type: string;
+  signature: Signature;
+  render: (changes: JsonChange[], state: Record<string, unknown>) => ReactNode;
+}
+
+const system_msg_added_sig: ChangeType = {
+  type: "system_message",
+  signature: {
+    remove: ["/messages/0/source"],
+    replace: ["/messages/0/role", "/messages/0/content"],
+    add: ["/messages/1"],
+  },
+  render: (_changes, resolvedState) => {
+    const messages = resolvedState["messages"] as Array<unknown>;
+    const message = messages[0];
+    return (
+      <ChatView
+        id="system_msg_event_preview"
+        messages={[message] as Messages}
+      />
+    );
+  },
+};
+
+const kToolPattern = "/tools/(\\d+)";
+
+const use_tools: ChangeType = {
+  type: "use_tools",
+  signature: {
+    add: ["/tools/0"],
+    replace: ["/tool_choice"],
+    remove: [],
+  },
+  render: (changes, resolvedState) => {
+    return renderTools(changes, resolvedState);
+  },
+};
+
+const add_tools: ChangeType = {
+  type: "add_tools",
+  signature: {
+    add: [kToolPattern],
+    replace: [],
+    remove: [],
+  },
+  render: (changes, resolvedState) => {
+    return renderTools(changes, resolvedState);
+  },
+};
+
+const humanAgentKey = (key: string) => {
+  return `HumanAgentState:${key}`;
+};
+const human_baseline_session: ChangeType = {
+  type: "human_baseline_session",
+  signature: {
+    add: ["HumanAgentState:logs"],
+    replace: [],
+    remove: [],
+  },
+  render: (_changes, state: Record<string, unknown>) => {
+    // Read the session values
+    const started = state[humanAgentKey("started_running")] as number;
+    const runtime = state[humanAgentKey("accumulated_time")] as number;
+    const answer = state[humanAgentKey("answer")] as string;
+    const completed = !!answer;
+    const running = state[humanAgentKey("running_state")] as boolean;
+    const rawSessions = state[humanAgentKey("logs")] as Record<string, unknown>;
+
+    // Tweak the date value
+    const startedDate = started ? new Date(started * 1000) : undefined;
+
+    // Convert raw sessions into session logs
+    const sessions: Record<string, SessionLog> = {};
+    if (rawSessions) {
+      for (const key of Object.keys(rawSessions)) {
+        const value = rawSessions[key] as string;
+        // this pulls the key apart into
+        // <user>_<timestamp>.<type>
+        const match = key.match(/(.*)_(\d+_\d+)\.(.*)/);
+        if (match) {
+          const user = match[1];
+          const timestamp = match[2];
+          const type = match[3];
+          sessions[timestamp] = sessions[timestamp] || {};
+          switch (type) {
+            case "input":
+              (sessions[timestamp] as SessionLog).input = value;
+              break;
+            case "output":
+              (sessions[timestamp] as SessionLog).output = value;
+              break;
+            case "timing":
+              (sessions[timestamp] as SessionLog).timing = value;
+              break;
+            case "name":
+              (sessions[timestamp] as SessionLog).name = value;
+              break;
+          }
+
+          (sessions[timestamp] as SessionLog).user = user;
+        }
+      }
+    }
+
+    return (
+      <HumanBaselineView
+        started={startedDate}
+        running={running}
+        completed={completed}
+        answer={answer}
+        runtime={runtime}
+        sessionLogs={Object.values(sessions)}
+      />
+    );
+  },
+};
+
+const renderTools = (
+  changes: JsonChange[],
+  resolvedState: Record<string, unknown>,
+) => {
+  // Find which tools were added in this change
+  const toolIndexes: string[] = [];
+  for (const change of changes) {
+    const match = change.path.match(kToolPattern);
+    if (match) {
+      toolIndexes.push(match[1]);
+    }
+  }
+
+  const toolName = (toolChoice: unknown): string => {
+    if (
+      typeof toolChoice === "object" &&
+      toolChoice &&
+      !Array.isArray(toolChoice)
+    ) {
+      return (toolChoice as Record<string, string>)["name"];
+    } else {
+      return String(toolChoice);
+    }
+  };
+
+  const toolsInfo: Record<string, ReactNode> = {};
+
+  // Show tool choice if it was changed
+  const hasToolChoice = changes.find((change) => {
+    return change.path.startsWith("/tool_choice");
+  });
+  if (resolvedState.tool_choice && hasToolChoice) {
+    toolsInfo["Tool Choice"] = toolName(resolvedState.tool_choice);
+  }
+
+  // Show either all tools or just the specific tools
+  const tools = resolvedState.tools as [];
+  if (tools.length > 0) {
+    if (toolIndexes.length === 0) {
+      toolsInfo["Tools"] = (
+        <Tools toolDefinitions={resolvedState.tools as ToolDefinition[]} />
+      );
+    } else {
+      const filtered = tools.filter((_, index) => {
+        return toolIndexes.includes(index.toString());
+      });
+      toolsInfo["Tools"] = <Tools toolDefinitions={filtered} />;
+    }
+  }
+
+  return (
+    <div className={clsx(styles.tools)}>
+      {Object.keys(toolsInfo).map((key) => {
+        return (
+          <Fragment>
+            <div
+              className={clsx(
+                "text-size-smaller",
+                "text-style-label",
+                "text-style-secondary",
+              )}
+            >
+              {key}
+            </div>
+            <div className={clsx("text-size-base")}>{toolsInfo[key]}</div>
+          </Fragment>
+        );
+      })}
+    </div>
+  );
+};
+
+export const RenderableChangeTypes: ChangeType[] = [
+  system_msg_added_sig,
+  use_tools,
+  add_tools,
+];
+
+export const StoreSpecificRenderableTypes: ChangeType[] = [
+  human_baseline_session,
+];
+
+interface ToolParameters {
+  type: string;
+  properties: {
+    code: ToolProperty;
+  };
+  required: string[];
+}
+
+interface ToolProperty {
+  type: string;
+  description: string;
+}
+
+interface ToolDefinition {
+  name: string;
+  description: string;
+  parameters?: ToolParameters;
+}
+
+interface ToolsProps {
+  toolDefinitions: ToolDefinition[];
+}
+/**
+ * Renders a list of tool components based on the provided tool definitions.
+ */
+export const Tools: React.FC<ToolsProps> = ({ toolDefinitions }) => {
+  return toolDefinitions.map((toolDefinition) => {
+    const toolName = toolDefinition.name;
+    const toolArgs = toolDefinition.parameters?.properties
+      ? Object.keys(toolDefinition.parameters.properties)
+      : [];
+    return <Tool toolName={toolName} toolArgs={toolArgs} />;
+  });
+};
+
+interface ToolProps {
+  toolName: string;
+  toolArgs?: string[];
+  toolDesc?: string;
+}
+/**
+ * Renders a single tool component.
+ */
+export const Tool: React.FC<ToolProps> = ({ toolName, toolArgs }) => {
+  const functionCall =
+    toolArgs && toolArgs.length > 0
+      ? `${toolName}(${toolArgs.join(", ")})`
+      : toolName;
+  return (
+    <div>
+      <code className={clsx("text-size-small", styles.tool)}>
+        {functionCall}
+      </code>
+    </div>
+  );
+};

inspect_ai/_view/www/src/samples/transcript/state/StateEventRenders.module.css

@@ -0,0 +1,10 @@
+.tools {
+  display: grid;
+  grid-template-columns: max-content max-content;
+  column-gap: 1rem;
+  margin: 0;
+}
+
+.tool {
+  padding: 0;
+}

inspect_ai/_view/www/src/samples/transcript/state/StateEventView.module.css

@@ -0,0 +1,9 @@
+.diff {
+  margin: 1em 0em;
+  width: 100%;
+}
+
+.summary {
+  margin: 1em 0em;
+  width: 100%;
+}