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

inspect_ai/_view/www/src/components/NavPills.module.css

@@ -0,0 +1,18 @@
+.visible {
+  display: block;
+}
+
+.hidden {
+  display: none;
+}
+
+.pills {
+  margin-right: 0;
+}
+
+.pill {
+  min-width: 4rem;
+  font-size: var(--inspect-font-size-small);
+  padding: 0.1rem 0.6rem;
+  border-radius: var(--bs-border-radius);
+}

inspect_ai/_view/www/src/components/NavPills.tsx

@@ -0,0 +1,99 @@
+import { clsx } from "clsx";
+import { ReactElement, useState } from "react";
+import styles from "./NavPills.module.css";
+
+interface NavPillChildProps {
+  title: string;
+  [key: string]: any;
+}
+
+interface NavPillsProps {
+  children?: ReactElement<NavPillChildProps>[];
+}
+
+export const NavPills: React.FC<NavPillsProps> = ({ children }) => {
+  if (!children?.length) {
+    return null;
+  }
+
+  const [activeItem, setActiveItem] = useState(children[0].props["title"]);
+
+  // Create Nav Pills for each child
+  const navPills = children.map((nav, idx) => {
+    const title =
+      typeof nav === "object"
+        ? nav["props"]?.title || `Tab ${idx}`
+        : `Tab ${idx}`;
+    return (
+      <NavPill
+        title={title}
+        activeItem={activeItem}
+        setActiveItem={setActiveItem}
+      />
+    );
+  });
+
+  // Wrap each of the children in a 'body' to control its visibility
+  const navBodies = children.map((child) => {
+    return (
+      <div
+        className={
+          child["props"]?.title === activeItem ? styles.visible : styles.hidden
+        }
+      >
+        {child}
+      </div>
+    );
+  });
+
+  return (
+    <div>
+      <ul
+        className={clsx("nav", "nav-pills", styles.pills)}
+        role="tablist"
+        aria-orientation="horizontal"
+      >
+        {navPills}
+      </ul>
+      {navBodies}
+    </div>
+  );
+};
+
+interface NavPillProps {
+  title: string;
+  activeItem: string;
+  setActiveItem: (item: string) => void;
+  children?: React.ReactNode;
+}
+
+const NavPill: React.FC<NavPillProps> = ({
+  title,
+  activeItem,
+  setActiveItem,
+  children,
+}) => {
+  const active = activeItem === title;
+
+  return (
+    <li className={"nav-item"}>
+      <button
+        type="button"
+        role="tab"
+        aria-selected={active}
+        className={clsx(
+          "nav-link",
+          "text-style-label",
+          active ? "active " : "",
+          styles.pill,
+        )}
+        onClick={() => {
+          setActiveItem(title);
+        }}
+      >
+        {title}
+      </button>
+      {children}
+    </li>
+  );
+};

inspect_ai/_view/www/src/components/ProgressBar.module.css

@@ -0,0 +1,37 @@
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 0;
+  overflow-y: visible;
+  overflow-x: visible;
+  z-index: 1001;
+  text-align: center;
+}
+
+.container {
+  width: 100%;
+  height: 2px;
+  background-color: transparent;
+  position: relative;
+  overflow: hidden;
+}
+
+.animate {
+  width: 5%;
+  height: 2px;
+  animation: leftToRight 2s linear infinite;
+  background-color: #3b82f6;
+  position: absolute;
+  left: 0;
+}
+
+@keyframes leftToRight {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(2000%);
+  }
+}

inspect_ai/_view/www/src/components/ProgressBar.tsx

@@ -0,0 +1,22 @@
+import styles from "./ProgressBar.module.css";
+
+interface ProgressBarProps {
+  animating: boolean;
+}
+
+export const ProgressBar: React.FC<ProgressBarProps> = ({ animating }) => {
+  return (
+    <div className={styles.wrapper}>
+      <div
+        className={styles.container}
+        role="progressbar"
+        aria-label="Basic example"
+        aria-valuenow={25}
+        aria-valuemin={0}
+        aria-valuemax={100}
+      >
+        {animating && <div className={styles.animate} />}
+      </div>
+    </div>
+  );
+};

inspect_ai/_view/www/src/components/TabSet.module.css

@@ -0,0 +1,40 @@
+.tabs {
+  align-items: space-between;
+}
+
+.tabContents {
+  flex: 1;
+  overflow-y: hidden;
+}
+
+.tabContents.scrollable {
+  overflow-y: auto;
+}
+
+.tab {
+  color: "var(--bs-body-color)";
+  padding: 0.25rem 0.5rem;
+  border-top-left-radius: var(--bs-border-radius);
+  border-top-right-radius: var(--bs-border-radius);
+  font-weight: 500;
+  margin-top: 2px;
+  margin-bottom: -1px;
+}
+
+.tabItem {
+  align-self: end;
+}
+
+.tabIcon {
+  margin-right: 0.5em;
+}
+
+.tabTools {
+  flex-basis: auto;
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  justify-content: end;
+  flex-wrap: wrap;
+  row-gap: 0.3rem;
+}

inspect_ai/_view/www/src/components/TabSet.tsx

@@ -0,0 +1,200 @@
+import clsx from "clsx";
+import {
+  Fragment,
+  MouseEvent,
+  ReactElement,
+  useCallback,
+  useEffect,
+  useRef,
+} from "react";
+import moduleStyles from "./TabSet.module.css";
+
+interface TabSetProps {
+  id: string;
+  type?: "tabs" | "pills";
+  className?: string | string[];
+  tabPanelsClassName?: string | string[];
+  tabControlsClassName?: string | string;
+  tools?: React.ReactNode;
+  children:
+    | ReactElement<TabPanelProps>
+    | (ReactElement<TabPanelProps> | null | undefined)[];
+}
+
+interface TabPanelProps {
+  id: string;
+  index?: number;
+  selected?: boolean;
+  style?: React.CSSProperties;
+  scrollable?: boolean;
+  scrollRef?: React.RefObject<HTMLDivElement | null>;
+  className?: string | string[];
+  scrollPosition?: number;
+  setScrollPosition?: (position: number) => void;
+  children?: React.ReactNode;
+  title: string;
+  icon?: string;
+  onSelected: (e: MouseEvent<HTMLElement>) => void;
+}
+
+export const TabSet: React.FC<TabSetProps> = ({
+  id,
+  type = "tabs",
+  className,
+  tabPanelsClassName,
+  tabControlsClassName,
+  tools,
+  children,
+}) => {
+  const validTabs: ReactElement<TabPanelProps>[] = Array.isArray(children)
+    ? (children.filter(Boolean) as ReactElement<TabPanelProps>[])
+    : [children];
+
+  if (validTabs.length === 0) return null;
+
+  return (
+    <Fragment>
+      <ul
+        id={id}
+        className={clsx("nav", `nav-${type}`, className, moduleStyles.tabs)}
+        role="tablist"
+        aria-orientation="horizontal"
+      >
+        {validTabs.map((tab, index) => (
+          <Tab
+            key={tab.props.id}
+            index={index}
+            type={type}
+            tab={tab}
+            className={tabControlsClassName}
+          />
+        ))}
+        {tools && <TabTools tools={tools} />}
+      </ul>
+      <TabPanels id={id} tabs={validTabs} className={tabPanelsClassName} />
+    </Fragment>
+  );
+};
+
+// Individual Tab Component
+const Tab: React.FC<{
+  type?: "tabs" | "pills";
+  tab: React.ReactElement<TabPanelProps>;
+  index: number;
+  className?: string | string[];
+}> = ({ type = "tabs", tab, index, className }) => {
+  const tabId = tab.props.id || computeTabId("tabset", index);
+  const tabContentsId = computeTabContentsId(tab.props.id);
+  const isActive = tab.props.selected;
+
+  return (
+    <li role="presentation" className={clsx("nav-item", moduleStyles.tabItem)}>
+      <button
+        id={tabId}
+        className={clsx(
+          "nav-link",
+          className,
+          isActive && "active",
+          type === "pills" ? moduleStyles.pill : moduleStyles.tab,
+          "text-size-small",
+          "text-style-label",
+        )}
+        type="button"
+        role="tab"
+        aria-controls={tabContentsId}
+        aria-selected={isActive}
+        onClick={(e) => tab.props.onSelected(e)}
+      >
+        {tab.props.icon && (
+          <i className={clsx(tab.props.icon, moduleStyles.tabIcon)} />
+        )}
+        {tab.props.title}
+      </button>
+    </li>
+  );
+};
+
+// Tab Panels Container
+const TabPanels: React.FC<{
+  id: string;
+  tabs: React.ReactElement<TabPanelProps>[];
+  className?: string | string[];
+}> = ({ id, tabs, className }) => (
+  <div className={clsx("tab-content", className)} id={`${id}-content`}>
+    {tabs.map((tab, index) => (
+      <TabPanel key={tab.props.id} {...tab.props} index={index} />
+    ))}
+  </div>
+);
+
+// Individual Tab Panel
+export const TabPanel: React.FC<TabPanelProps> = ({
+  id,
+  selected,
+  style,
+  scrollable = true,
+  scrollRef,
+  className,
+  scrollPosition,
+  setScrollPosition,
+  children,
+}) => {
+  const tabContentsId = computeTabContentsId(id);
+  const tabContentsRef = scrollRef || useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!selected || scrollPosition === undefined || !tabContentsRef.current)
+      return;
+
+    const observer = new MutationObserver(() => {
+      if (tabContentsRef.current) {
+        tabContentsRef.current.scrollTop = scrollPosition;
+      }
+      observer.disconnect(); // Stop observing after first content load
+    });
+
+    observer.observe(tabContentsRef.current, {
+      childList: true,
+      subtree: true,
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
+  // Handle scrolling
+  const onScroll = useCallback(
+    (e: React.UIEvent<HTMLDivElement>) => {
+      if (setScrollPosition) {
+        setScrollPosition(e.currentTarget.scrollTop);
+      }
+    },
+    [setScrollPosition],
+  );
+
+  return (
+    <div
+      id={tabContentsId}
+      ref={tabContentsRef}
+      className={clsx(
+        "tab-pane",
+        selected && "show active",
+        className,
+        moduleStyles.tabContents,
+        scrollable && moduleStyles.scrollable,
+      )}
+      style={style}
+      onScroll={onScroll}
+    >
+      {children}
+    </div>
+  );
+};
+
+// Tab Tools Component
+const TabTools: React.FC<{ tools?: React.ReactNode }> = ({ tools }) => (
+  <div className={clsx("tab-tools", moduleStyles.tabTools)}>{tools}</div>
+);
+
+// Utility functions
+const computeTabId = (id: string, index: number) => `${id}-${index}`;
+const computeTabContentsId = (id: string) => `${id}-contents`;

inspect_ai/_view/www/src/components/ToolButton.css

@@ -0,0 +1,3 @@
+.tool-button i {
+  margin-right: 0.5em;
+}

inspect_ai/_view/www/src/components/ToolButton.tsx

@@ -0,0 +1,27 @@
+import React, { ReactNode } from "react";
+import "./ToolButton.css";
+
+interface ToolButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  label: string | ReactNode;
+  classes?: string;
+  icon?: string;
+}
+
+export const ToolButton = React.forwardRef<HTMLButtonElement, ToolButtonProps>(
+  ({ label, classes = "", icon, className, ...rest }, ref) => {
+    // Combine class names, ensuring default classes are applied first
+    const combinedClasses =
+      `btn btn-tools tool-button ${classes} ${className || ""}`.trim();
+
+    return (
+      <button ref={ref} type="button" className={combinedClasses} {...rest}>
+        {icon && <i className={`${icon}`} />}
+        {label}
+      </button>
+    );
+  },
+);
+
+// Add display name for debugging purposes
+ToolButton.displayName = "ToolButton";

inspect_ai/_view/www/src/components/VirtualList.module.css

@@ -0,0 +1,19 @@
+.container {
+  position: relative;
+  width: 100%;
+  min-height: 100%;
+  overflow: visible;
+}
+
+.container.hidden {
+  overflow: hidden;
+}
+
+.content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  overflow: visible;
+}