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

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

@@ -0,0 +1,199 @@
+import clsx from "clsx";
+import { ProgressBar } from "./ProgressBar";
+
+import { ReactNode, UIEvent, useCallback, useEffect, useRef } from "react";
+import styles from "./LargeModal.module.css";
+
+export interface ModalTool {
+  label: string;
+  icon: string;
+  onClick: () => void;
+  enabled: boolean;
+}
+
+export interface ModalTools {
+  left: ModalTool[];
+  right: ModalTool[];
+}
+
+interface LargeModalProps {
+  id?: string;
+  title?: string;
+  detail: string;
+  detailTools?: ModalTools;
+  showProgress: boolean;
+  footer?: React.ReactNode;
+  visible: boolean;
+  onkeyup: (e: any) => void;
+  onHide: () => void;
+  scrollRef: React.RefObject<HTMLDivElement | null>;
+  initialScrollPositionRef: React.RefObject<number>;
+  setInitialScrollPosition: (position: number) => void;
+  children: ReactNode;
+}
+
+export const LargeModal: React.FC<LargeModalProps> = ({
+  id,
+  title,
+  detail,
+  detailTools,
+  children,
+  footer,
+  onkeyup,
+  visible,
+  onHide,
+  showProgress,
+  initialScrollPositionRef,
+  setInitialScrollPosition,
+  scrollRef,
+}) => {
+  // The footer
+  const modalFooter = footer ? (
+    <div className={"modal-footer"}>{footer}</div>
+  ) : (
+    ""
+  );
+
+  // Support restoring the scroll position
+  // but only do this for the first time that the children are set
+  scrollRef = scrollRef || useRef(null);
+  useEffect(() => {
+    if (scrollRef.current) {
+      setTimeout(() => {
+        if (
+          scrollRef.current &&
+          initialScrollPositionRef.current &&
+          scrollRef.current.scrollTop !== initialScrollPositionRef?.current
+        ) {
+          scrollRef.current.scrollTop = initialScrollPositionRef.current;
+        }
+      }, 0);
+    }
+  }, []);
+
+  const onScroll = useCallback(
+    (e: UIEvent<HTMLDivElement>) => {
+      setInitialScrollPosition(e.currentTarget.scrollTop);
+    },
+    [setInitialScrollPosition],
+  );
+
+  // Capture header elements
+  const headerEls = [];
+  // The title
+  headerEls.push(
+    <div className={clsx("modal-title", "text-size-smaller", styles.title)}>
+      {title || ""}
+    </div>,
+  );
+
+  // A centered text element with tools to the left and right
+  if (detail) {
+    headerEls.push(
+      <div className={styles.detail}>
+        {detailTools?.left
+          ? detailTools.left.map((tool) => {
+              return <TitleTool {...tool} />;
+            })
+          : ""}
+        <div className={clsx("text-size-smaller", styles.detailText)}>
+          <div>{detail}</div>
+        </div>
+
+        {detailTools?.right
+          ? detailTools.right.map((tool) => {
+              return <TitleTool {...tool} />;
+            })
+          : ""}
+      </div>,
+    );
+  }
+
+  // The close 'x'
+  headerEls.push(
+    <button
+      type="button"
+      className={clsx(
+        "btn",
+        "btn-close-large-dialog",
+        "text-size-larger",
+        styles.close,
+      )}
+      onClick={onHide}
+      aria-label="Close"
+    >
+      <HtmlEntity html={"&times;"} />
+    </button>,
+  );
+
+  return (
+    <div
+      id={id}
+      className={clsx(
+        "modal",
+        styles.modal,
+        !visible ? styles.hidden : undefined,
+      )}
+      role="dialog"
+      onKeyUp={onkeyup}
+      tabIndex={visible ? 0 : undefined}
+    >
+      <div
+        className={clsx(
+          "modal-dialog",
+          "modal-dialog-scrollable",
+          styles.modalBody,
+        )}
+        role="document"
+      >
+        <div className={clsx("modal-content", styles.content)}>
+          <div className={clsx("modal-header", styles.header)}>{headerEls}</div>
+          <ProgressBar animating={showProgress} />
+          <div className={"modal-body"} ref={scrollRef} onScroll={onScroll}>
+            {children}
+          </div>
+          {modalFooter}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+interface HtmlEntityProps {
+  html: string;
+}
+
+const HtmlEntity: React.FC<HtmlEntityProps> = ({ html }) => (
+  <span dangerouslySetInnerHTML={{ __html: html }} />
+);
+
+interface TitleToolProps {
+  label: string;
+  icon: string;
+  enabled: boolean;
+  onClick: () => void;
+}
+
+const TitleTool: React.FC<TitleToolProps> = ({
+  label,
+  icon,
+  enabled,
+  onClick,
+}) => {
+  return (
+    <button
+      type="button"
+      className={clsx(
+        "btn",
+        "btn-outline",
+        "text-size-small",
+        styles.titleTool,
+      )}
+      aria-label={label}
+      onClick={onClick}
+      disabled={!enabled}
+    >
+      <i className={icon} />
+    </button>
+  );
+};

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

@@ -0,0 +1,95 @@
+.carousel-thumbs {
+  display: grid;
+  grid-template-columns: auto auto auto auto;
+}
+
+.carousel-thumb {
+  background: black;
+  color: white;
+  padding: 4em 0;
+  border: 0;
+  margin: 5px;
+  cursor: pointer;
+  text-align: center;
+}
+
+.carousel-play-icon {
+  font-size: 4em;
+}
+
+.lightbox-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9998;
+}
+
+.lightbox-content.open,
+.lightbox-overlay.open {
+  opacity: 1;
+  visibility: visible;
+}
+
+.lightbox-content.closed,
+.lightbox-overlay.closed {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.lightbox-button-close-wrapper {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+
+.lightbox-button-close {
+  border: none;
+  background: none;
+  color: #fff;
+  font-size: 3em;
+  font-weight: 500;
+  cursor: pointer;
+  padding-left: 1em;
+  padding-bottom: 1em;
+  z-index: 10000;
+}
+
+.lightbox-preview-button {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  color: #fff;
+  border: none;
+  padding: 0.5em;
+  font-size: 3em;
+  cursor: pointer;
+  z-index: 9999;
+}
+
+.lightbox-preview-button.next {
+  left: 10px;
+}
+
+.lightbox-preview-button.prev {
+  right: 10px;
+}
+
+.lightbox-content {
+  max-width: 90%;
+  max-height: 90%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  transition:
+    opacity 0.3s ease,
+    visibility 0.3s ease;
+  z-index: 9999;
+}

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

@@ -0,0 +1,132 @@
+import clsx from "clsx";
+import { useCallback, useEffect, useState } from "react";
+import { ApplicationIcons } from "../appearance/icons";
+import "./LightboxCarousel.css";
+
+interface Slide {
+  label: string;
+  render: () => React.ReactNode;
+}
+
+interface LightboxCarouselProps {
+  slides: Slide[];
+}
+
+/**
+ * LightboxCarousel component provides a carousel with lightbox functionality.
+ */
+export const LightboxCarousel: React.FC<LightboxCarouselProps> = ({
+  slides,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [showOverlay, setShowOverlay] = useState(false);
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const openLightbox = (index: number) => {
+    setCurrentIndex(index);
+    setShowOverlay(true);
+
+    // Slight delay before setting isOpen so the fade-in starts from opacity: 0
+    setTimeout(() => setIsOpen(true), 10);
+  };
+
+  const closeLightbox = () => {
+    setIsOpen(false);
+  };
+
+  // Remove the overlay from the DOM after fade-out completes
+  useEffect(() => {
+    if (!isOpen && showOverlay) {
+      const timer = setTimeout(() => {
+        setShowOverlay(false);
+      }, 300); // match your transition duration
+      return () => clearTimeout(timer);
+    }
+  }, [isOpen, showOverlay]);
+
+  const showNext = useCallback(() => {
+    setCurrentIndex((prev) => {
+      return (prev + 1) % slides.length;
+    });
+  }, [slides]);
+
+  const showPrev = useCallback(() => {
+    setCurrentIndex((prev) => (prev - 1 + slides.length) % slides.length);
+  }, [slides]);
+
+  // Keyboard Navigation
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyUp = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        closeLightbox();
+      } else if (e.key === "ArrowRight") {
+        showNext();
+      } else if (e.key === "ArrowLeft") {
+        showPrev();
+      }
+      e.preventDefault();
+      e.stopPropagation();
+    };
+    window.addEventListener("keyup", handleKeyUp, true);
+    return () => window.removeEventListener("keyup", handleKeyUp);
+  }, [isOpen, showNext, showPrev]);
+
+  return (
+    <div className="lightbox-carousel-container">
+      <div className="carousel-thumbs">
+        {slides.map((slide, index) => {
+          return (
+            <div
+              key={index}
+              className="carousel-thumb"
+              onClick={() => openLightbox(index)}
+            >
+              <div>{slide.label}</div>
+              <div>
+                <i
+                  className={clsx(ApplicationIcons.play, "carousel-play-icon")}
+                />
+              </div>
+            </div>
+          );
+        })}
+      </div>
+      {showOverlay && (
+        <div className={clsx("lightbox-overlay", isOpen ? "open" : "closed")}>
+          <div className={"lightbox-button-close-wrapper"}>
+            <button className={"lightbox-button-close"} onClick={closeLightbox}>
+              <i className={ApplicationIcons.close}></i>
+            </button>
+          </div>
+          {slides.length > 1 ? (
+            <button
+              className={"lightbox-preview-button prev"}
+              onClick={showPrev}
+            >
+              <i className={ApplicationIcons.previous}></i>
+            </button>
+          ) : (
+            ""
+          )}
+          {slides.length > 1 ? (
+            <button
+              className={"lightbox-preview-button next"}
+              onClick={showNext}
+            >
+              <i className={ApplicationIcons.next} />
+            </button>
+          ) : (
+            ""
+          )}
+          <div
+            key={`carousel-slide-${currentIndex}`}
+            className={clsx("lightbox-content", isOpen ? "open" : "closed")}
+          >
+            {slides[currentIndex].render()}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,3 @@
+.markdown-ordered-list-item {
+  margin-bottom: 0.2em;
+}

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

@@ -0,0 +1,133 @@
+import clsx from "clsx";
+import markdownit from "markdown-it";
+import React from "react";
+import "./MarkdownDiv.css";
+
+interface MarkdownDivProps {
+  markdown: string;
+  style?: React.CSSProperties;
+  className?: string | string[];
+}
+
+export const MarkdownDiv = React.forwardRef<HTMLDivElement, MarkdownDivProps>(
+  ({ markdown, style, className }, ref) => {
+    // Escape all tags
+    const escaped = markdown ? escape(markdown) : "";
+
+    // Pre-render any text that isn't handled by markdown
+    const preRendered = preRenderText(escaped);
+
+    const protectedText = protectMarkdown(preRendered);
+
+    let renderedHtml = protectedText;
+    try {
+      const md = markdownit({
+        breaks: true,
+        html: true,
+      });
+      renderedHtml = md.render(protectedText);
+    } catch (ex) {
+      console.log("Unable to markdown render content");
+      console.error(ex);
+    }
+
+    const unescaped = unprotectMarkdown(renderedHtml);
+
+    // For `code` tags, reverse the escaping if we can
+    const withCode = unescapeCodeHtmlEntities(unescaped);
+
+    // Return the rendered markdown
+    const markup = { __html: withCode };
+
+    return (
+      <div
+        ref={ref}
+        dangerouslySetInnerHTML={markup}
+        style={style}
+        className={clsx(className, "markdown-content")}
+      />
+    );
+  },
+);
+
+const kLetterListPattern = /^([a-zA-Z][).]\s.*?)$/gm;
+const kCommonmarkReferenceLinkPattern = /\[([^\]]*)\]: (?!http)(.*)/g;
+
+const preRenderText = (txt: string): string => {
+  // eslint-disable-next-line no-misleading-character-class
+  txt = txt.replace(/^[\u200B\u200C\u200D\u200E\u200F\uFEFF]/, "");
+
+  // Special handling for ordered lists that look like
+  // multiple choice (e.g. a), b), c), d) etc..)
+  return txt.replaceAll(
+    kLetterListPattern,
+    "<p class='markdown-ordered-list-item'>$1</p>",
+  );
+};
+
+const protectMarkdown = (txt: string): string => {
+  // Special handling for commonmark like reference links which might
+  // look like:
+  // [alias]: http://www.google.com
+  // but text like:
+  // [expert]: answer
+  // Also fools this
+  return txt.replaceAll(
+    kCommonmarkReferenceLinkPattern,
+    "(open:767A125E)$1(close:767A125E) $2 ",
+  );
+};
+
+const unprotectMarkdown = (txt: string): string => {
+  txt = txt.replaceAll("(open:767A125E)", "[");
+  txt = txt.replaceAll("(close:767A125E)", "]");
+  return txt;
+};
+
+const escape = (content: string): string => {
+  return content.replace(/[<>&'"]/g, (c: string): string => {
+    switch (c) {
+      case "<":
+        return "&lt;";
+      case ">":
+        return "&gt;";
+      case "&":
+        return "&amp;";
+      case "'":
+        return "&apos;";
+      case '"':
+        return "&quot;";
+      default:
+        throw new Error("Matched a value that isn't replaceable");
+    }
+  });
+};
+
+function unescapeCodeHtmlEntities(str: string): string {
+  const htmlEntities: Record<string, string> = {
+    "&lt;": "<",
+    "&gt;": ">",
+    "&amp;": "&",
+    "&#x5C;": "\\",
+    "&quot;": '"',
+  };
+
+  return str.replace(
+    /(<code[^>]*>)([\s\S]*?)(<\/code>)/gi,
+    (
+      _match: string,
+      starttag: string,
+      content: string,
+      endtag: string,
+    ): string => {
+      return (
+        starttag +
+        content.replace(
+          /&(?:amp|lt|gt|quot|#39|#x2F|#x5C|#96);/g,
+          (entity: string): string => htmlEntities[entity] || entity,
+        ) +
+        endtag
+      );
+    },
+  );
+}

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

@@ -0,0 +1,43 @@
+.message-band {
+  grid-template-columns: max-content auto max-content;
+  align-items: center;
+  column-gap: 0.5em;
+  font-size: var(--inspect-font-size-small);
+  border-bottom: solid 1px var(--bs-light-border-subtle);
+  padding: 0.3em 1em;
+  display: grid;
+}
+
+.message-band.hidden {
+  display: none;
+}
+
+.message-band.info {
+  background-color: var(--bs-light);
+}
+
+.message-band.warning {
+  background-color: var(--bs-warning-bg-subtle);
+  color: var(--bs-warning-text-emphasis);
+}
+
+.message-band.error {
+  background-color: var(--bs-error-bg-subtle);
+  color: var(--bs-error-text-emphasis);
+}
+
+.message-band-btn {
+  font-size: var(--inspect-font-size-title-secondary);
+  margin: 0;
+  padding: 0;
+  height: var(--inspect-font-size-title-secondary);
+  line-height: var(--inspect-font-size-title-secondary);
+}
+
+.message-band-btn.error {
+  color: var(--bs-error-text-emphasis);
+}
+
+.message-band-btn.warning {
+  color: var(--bs-warning-text-emphasis);
+}

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

@@ -0,0 +1,39 @@
+import { clsx } from "clsx";
+
+import { ApplicationIcons } from "../appearance/icons";
+import "./MessageBand.css";
+
+interface MessageBandProps {
+  message: string;
+  hidden: boolean;
+  setHidden: (hidden: boolean) => void;
+  type: "info" | "warning" | "error";
+}
+
+export const MessageBand: React.FC<MessageBandProps> = ({
+  message,
+  hidden,
+  setHidden,
+  type,
+}) => {
+  const className: string[] = [type];
+  if (hidden) {
+    className.push("hidden");
+  }
+
+  return (
+    <div className={clsx("message-band", className)}>
+      <i className={ApplicationIcons.logging[type]} />
+      {message}
+      <button
+        className={clsx("btn", "message-band-btn", type)}
+        title="Close"
+        onClick={() => {
+          setHidden(true);
+        }}
+      >
+        <i className={ApplicationIcons.close}></i>
+      </button>
+    </div>
+  );
+};

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

@@ -0,0 +1,67 @@
+import { Popover } from "bootstrap";
+import React, { useEffect, useRef } from "react";
+import "./MorePopover.css";
+
+interface MorePopoverProps {
+  title: string;
+  customClass?: string;
+  children: React.ReactNode;
+}
+
+export const MorePopover: React.FC<MorePopoverProps> = ({
+  title,
+  customClass,
+  children,
+}) => {
+  const popoverRef = useRef<HTMLAnchorElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!popoverRef.current || !contentRef.current) return;
+
+    const contentEl = contentRef.current;
+    const popOverContent = document.createElement("div");
+
+    // Clone children into popover content
+    Array.from(contentEl.childNodes).forEach((child) =>
+      popOverContent.appendChild(child.cloneNode(true)),
+    );
+
+    // Initialize Bootstrap popover
+    new Popover(popoverRef.current, {
+      content: popOverContent,
+      title,
+      html: true,
+      customClass,
+      trigger: "focus",
+    });
+
+    // Cleanup on unmount
+    return () => {
+      if (popoverRef.current) {
+        const popoverInstance = Popover.getInstance(popoverRef.current);
+        if (popoverInstance) {
+          popoverInstance.dispose();
+        }
+      }
+    };
+  }, [title, customClass]);
+
+  return (
+    <>
+      <a
+        ref={popoverRef}
+        tabIndex={0}
+        className="more-popover-button btn"
+        role="button"
+        data-bs-toggle="popover"
+        data-bs-trigger="focus"
+      >
+        <i className="more-icon" />
+      </a>
+      <div ref={contentRef} className="more-popover-content">
+        {children}
+      </div>
+    </>
+  );
+};