@assistant-ui/react-devtools 0.1.1

package/src/styles/DevToolsModal.styles.ts

@@ -0,0 +1,137 @@
+import type { CSSProperties } from "react";
+
+export interface DevToolsModalStyles {
+  floatingContainer: CSSProperties;
+  floatingButton: CSSProperties;
+  floatingButtonHover: CSSProperties;
+  backdrop: CSSProperties;
+  modal: CSSProperties;
+  dismissButton: CSSProperties;
+  dismissButtonHover: CSSProperties;
+  modalContent: CSSProperties;
+}
+
+const COLORS = {
+  light: {
+    primary: "#2563EB",
+    background: "#f8fafc",
+    surface: "#ffffff",
+    text: "#111827",
+    textLight: "#6b7280",
+    border: "rgba(148, 163, 184, 0.35)",
+    shadow: "rgba(37, 99, 235, 0.35)",
+    buttonText: "#f9fafb",
+    hoverBg: "rgba(148, 163, 184, 0.18)",
+  },
+  dark: {
+    primary: "#111827",
+    background: "#09090b",
+    surface: "#09090b",
+    text: "#e5e7eb",
+    textLight: "#9ca3af",
+    border: "rgba(63, 63, 70, 0.6)",
+    shadow: "rgba(0, 0, 0, 0.55)",
+    buttonText: "#e5e7eb",
+    hoverBg: "rgba(148, 163, 184, 0.12)",
+  },
+} as const;
+
+export const getStyles = (darkMode: boolean): DevToolsModalStyles => {
+  const theme = darkMode ? COLORS.dark : COLORS.light;
+
+  return {
+    floatingContainer: {
+      position: "fixed",
+      bottom: "24px",
+      right: "24px",
+      zIndex: 2147483647,
+    },
+    floatingButton: {
+      width: "42px",
+      height: "42px",
+      borderRadius: "9999px",
+      border: "none",
+      background: theme.primary,
+      color: theme.buttonText,
+      cursor: "pointer",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      boxShadow: darkMode
+        ? `0 10px 40px ${COLORS.dark.shadow}`
+        : `0 10px 40px ${COLORS.light.shadow}`,
+      transition: "transform 0.2s ease, box-shadow 0.2s ease",
+    },
+    floatingButtonHover: {
+      transform: "translateY(-2px)",
+      boxShadow: darkMode
+        ? "0 16px 50px rgba(17, 24, 39, 0.55)"
+        : "0 16px 50px rgba(37, 99, 235, 0.45)",
+    },
+    backdrop: {
+      position: "fixed",
+      inset: 0,
+      background: "rgba(15, 23, 42, 0.45)",
+      backdropFilter: "blur(6px)",
+      animation: "fadeIn 0.12s ease",
+      zIndex: 2147483646,
+    },
+    modal: {
+      position: "fixed",
+      top: "50%",
+      left: "50%",
+      transform: "translate(-50%, -50%)",
+      width: "min(960px, 90vw)",
+      height: "min(720px, 85vh)",
+      background: theme.background,
+      borderRadius: "16px",
+      border: `1px solid ${theme.border}`,
+      boxShadow: darkMode
+        ? "0 32px 120px rgba(0, 0, 0, 0.55)"
+        : "0 32px 120px rgba(15, 23, 42, 0.35)",
+      display: "flex",
+      flexDirection: "column",
+      overflow: "hidden",
+      animation: "slideIn 0.16s ease",
+      zIndex: 2147483647,
+    },
+    dismissButton: {
+      alignSelf: "flex-end",
+      margin: "10px 12px 0 0",
+      background: "transparent",
+      border: "none",
+      color: theme.textLight,
+      cursor: "pointer",
+      padding: "6px",
+      borderRadius: "6px",
+      transition: "background 0.2s ease, color 0.2s ease",
+    },
+    dismissButtonHover: {
+      background: theme.hoverBg,
+      color: theme.text,
+    },
+    modalContent: {
+      flex: 1,
+      overflow: "hidden",
+      position: "relative",
+      background: theme.background,
+    },
+  };
+};
+
+export const ANIMATION_STYLES = `
+  @keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+  @keyframes slideIn {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;

package/src/types.ts

@@ -0,0 +1,13 @@
+import type { NormalizedTool } from "./utils/toolNormalization";
+
+// Core types for DevTools UI
+export type TabType = "state" | "events" | "context";
+export type ViewMode = "raw" | "preview";
+
+// Types used by serialization utility
+export interface SerializedModelContext {
+  system?: string;
+  tools?: NormalizedTool[];
+  callSettings?: Record<string, unknown>;
+  config?: Record<string, unknown>;
+}

package/src/utils/serialization.ts

@@ -0,0 +1,97 @@
+import { ModelContext } from "@assistant-ui/react";
+import type { SerializedModelContext } from "../types";
+import { normalizeToolList } from "./toolNormalization";
+
+export const sanitizeForMessage = (
+  value: unknown,
+  seen = new WeakSet<object>(),
+): unknown => {
+  // Early return for primitives
+  if (value === null || value === undefined) return value;
+  if (
+    typeof value === "string" ||
+    typeof value === "number" ||
+    typeof value === "boolean"
+  ) {
+    return value;
+  }
+  if (typeof value === "function") {
+    return "[Function]";
+  }
+  if (value instanceof Date) {
+    return value.toISOString();
+  }
+  if (value instanceof Map) {
+    const result: Record<string, unknown> = {};
+    for (const [key, entry] of value.entries()) {
+      result[String(key)] = sanitizeForMessage(entry, seen);
+    }
+    return result;
+  }
+  if (value instanceof Set) {
+    return Array.from(value).map((entry) => sanitizeForMessage(entry, seen));
+  }
+  if (Array.isArray(value)) {
+    if (seen.has(value as unknown as object)) return "[Circular]";
+    seen.add(value as unknown as object);
+    return value
+      .map((entry) => sanitizeForMessage(entry, seen))
+      .filter((item) => item !== undefined);
+  }
+  if (typeof value === "object") {
+    if (seen.has(value as object)) return "[Circular]";
+    seen.add(value as object);
+    const result: Record<string, unknown> = {};
+    for (const [key, entry] of Object.entries(
+      value as Record<string, unknown>,
+    )) {
+      result[key] = sanitizeForMessage(entry, seen);
+    }
+    return result;
+  }
+  return value;
+};
+
+export const serializeModelContext = (
+  context: ModelContext | undefined,
+): SerializedModelContext | undefined => {
+  if (!context || typeof context !== "object") {
+    return undefined;
+  }
+
+  const modelContext = context as Record<string, unknown>;
+  const result: SerializedModelContext = {};
+
+  const systemValue = modelContext["system"];
+  if (typeof systemValue === "string" && systemValue.length > 0) {
+    result.system = systemValue;
+  }
+
+  const tools = normalizeToolList(modelContext["tools"]);
+  if (tools.length > 0) {
+    result.tools = tools.map((tool) => ({
+      ...tool,
+      parameters: sanitizeForMessage(tool.parameters),
+    }));
+  }
+
+  if (modelContext["callSettings"] !== undefined) {
+    const callSettings = sanitizeForMessage(modelContext["callSettings"]);
+    if (
+      callSettings &&
+      typeof callSettings === "object" &&
+      !Array.isArray(callSettings)
+    ) {
+      result.callSettings = callSettings as Record<string, unknown>;
+    }
+  }
+
+  if (modelContext["config"] !== undefined) {
+    const config = sanitizeForMessage(modelContext["config"]);
+    if (config && typeof config === "object" && !Array.isArray(config)) {
+      result.config = config as Record<string, unknown>;
+    }
+  }
+
+  return Object.keys(result).length > 0 ? result : undefined;
+};

package/src/utils/toolNormalization.ts

@@ -0,0 +1,83 @@
+import { z } from "zod";
+
+export type NormalizedTool = {
+  name: string;
+  type?: string;
+  description?: string;
+  disabled?: boolean;
+  parameters?: unknown;
+};
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  value !== null && typeof value === "object";
+
+const toJsonSchema = (value: unknown): unknown => {
+  if (value instanceof z.ZodType) {
+    try {
+      return z.toJSONSchema(value);
+    } catch {
+      return value;
+    }
+  }
+
+  return value;
+};
+
+const mapToNormalizedTool = (
+  name: string,
+  raw: Record<string, unknown>,
+): NormalizedTool => {
+  const tool: NormalizedTool = { name };
+
+  if (typeof raw["type"] === "string") {
+    tool.type = raw["type"] as string;
+  }
+
+  if (typeof raw["description"] === "string") {
+    tool.description = raw["description"] as string;
+  }
+
+  if (typeof raw["disabled"] === "boolean") {
+    tool.disabled = raw["disabled"] as boolean;
+  }
+
+  if (Object.prototype.hasOwnProperty.call(raw, "parameters")) {
+    tool.parameters = toJsonSchema(raw["parameters"]);
+  }
+
+  return tool;
+};
+
+export const normalizeToolList = (value: unknown): NormalizedTool[] => {
+  if (!value || typeof value !== "object") {
+    return [];
+  }
+
+  if (Array.isArray(value)) {
+    const tools: NormalizedTool[] = [];
+
+    for (const entry of value) {
+      if (!isRecord(entry) || typeof entry["name"] !== "string") continue;
+      tools.push(mapToNormalizedTool(entry["name"] as string, entry));
+    }
+
+    return tools;
+  }
+
+  if (isRecord(value)) {
+    const tools: NormalizedTool[] = [];
+
+    for (const [name, entry] of Object.entries(value)) {
+      if (!isRecord(entry)) {
+        tools.push({ name });
+        continue;
+      }
+
+      tools.push(mapToNormalizedTool(name, entry));
+    }
+
+    return tools;
+  }
+
+  return [];
+};