@copilotkit/react-core 1.57.3 → 1.58.0

package/src/v2/components/OpenGenerativeUIRenderer.tsx

@@ -1,598 +0,0 @@
-"use client";
-
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { z } from "zod";
-import { ToolCallStatus } from "@copilotkit/core";
-import { useSandboxFunctions } from "../providers/SandboxFunctionsContext";
-import {
-  processPartialHtml,
-  extractCompleteStyles,
-} from "../lib/processPartialHtml";
-
-export const OpenGenerativeUIActivityType = "open-generative-ui";
-
-export const OpenGenerativeUIContentSchema = z.object({
-  initialHeight: z.number().optional(),
-  generating: z.boolean().optional(),
-  css: z.string().optional(),
-  cssComplete: z.boolean().optional(),
-  html: z.array(z.string()).optional(),
-  htmlComplete: z.boolean().optional(),
-  jsFunctions: z.string().optional(),
-  jsFunctionsComplete: z.boolean().optional(),
-  jsExpressions: z.array(z.string()).optional(),
-  jsExpressionsComplete: z.boolean().optional(),
-});
-
-export type OpenGenerativeUIContent = z.infer<
-  typeof OpenGenerativeUIContentSchema
->;
-
-/**
- * Schema for the generateSandboxedUi tool call arguments.
- * Used by the frontend tool renderer to display placeholder messages.
- */
-export const GenerateSandboxedUiArgsSchema = z.object({
-  initialHeight: z.number().optional(),
-  placeholderMessages: z.array(z.string()).optional(),
-  css: z.string().optional(),
-  html: z.string().optional(),
-  jsFunctions: z.string().optional(),
-  jsExpressions: z.array(z.string()).optional(),
-});
-
-export type GenerateSandboxedUiArgs = z.infer<
-  typeof GenerateSandboxedUiArgsSchema
->;
-
-interface OpenGenerativeUIActivityRendererProps {
-  activityType: string;
-  content: OpenGenerativeUIContent;
-  message: unknown;
-  agent: unknown;
-}
-
-const THROTTLE_MS = 1000;
-
-/**
- * Returns true when the inner component should re-render immediately
- * (no throttle delay).
- */
-function shouldFlushImmediately(
-  prev: OpenGenerativeUIContent | null,
-  next: OpenGenerativeUIContent,
-): boolean {
-  // CSS finished — switch from placeholder to preview
-  if (next.cssComplete && (!prev || !prev.cssComplete)) return true;
-  // Streaming done
-  if (next.htmlComplete) return true;
-  // Generation finished
-  if (next.generating === false) return true;
-  // jsFunctions appeared
-  if (next.jsFunctions && (!prev || !prev.jsFunctions)) return true;
-  // jsExpressions grew
-  if ((next.jsExpressions?.length ?? 0) > (prev?.jsExpressions?.length ?? 0))
-    return true;
-  // First html chunk arrived (first preview — no delay)
-  if (next.html?.length && (!prev || !prev.html?.length)) return true;
-  return false;
-}
-
-/**
- * Outer wrapper — absorbs every parent re-render but only forwards
- * throttled content snapshots to the memoized inner component.
- */
-export const OpenGenerativeUIActivityRenderer: React.FC<OpenGenerativeUIActivityRendererProps> =
-  function OpenGenerativeUIActivityRenderer({ content }) {
-    const latestContentRef = useRef(content);
-    latestContentRef.current = content;
-
-    const [throttledContent, setThrottledContent] =
-      useState<OpenGenerativeUIContent>(content);
-    const throttledContentRef = useRef(throttledContent);
-    const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-    // Synchronous state adjustment during render (React-approved pattern).
-    // When shouldFlushImmediately is true, update state before commit so the
-    // inner component sees the new content in the same render pass — no extra
-    // async cycle that would break test timing.
-    if (throttledContentRef.current !== content) {
-      if (shouldFlushImmediately(throttledContentRef.current, content)) {
-        if (timerRef.current !== null) {
-          clearTimeout(timerRef.current);
-          timerRef.current = null;
-        }
-        throttledContentRef.current = content;
-        setThrottledContent(content);
-      }
-    }
-
-    const flush = useCallback(() => {
-      timerRef.current = null;
-      const latest = latestContentRef.current;
-      throttledContentRef.current = latest;
-      setThrottledContent(latest);
-    }, []);
-
-    // Schedule throttled updates for non-immediate content changes
-    useEffect(() => {
-      // Already up to date (initial render or synchronous flush above)
-      if (throttledContentRef.current === content) return;
-
-      // Schedule a throttled flush if none pending
-      if (timerRef.current === null) {
-        timerRef.current = setTimeout(flush, THROTTLE_MS);
-      }
-    }, [content, flush]);
-
-    // Cleanup timer on unmount
-    useEffect(() => {
-      return () => {
-        if (timerRef.current !== null) {
-          clearTimeout(timerRef.current);
-        }
-      };
-    }, []);
-
-    return <OpenGenerativeUIActivityRendererInner content={throttledContent} />;
-  };
-
-// ---------------------------------------------------------------------------
-// Inner component — all the expensive work, protected by React.memo
-// ---------------------------------------------------------------------------
-
-interface InnerProps {
-  content: OpenGenerativeUIContent;
-}
-
-function ensureHead(html: string): string {
-  if (/<head[\s>]/i.test(html)) return html;
-  return `<head></head>${html}`;
-}
-
-function injectCssIntoHtml(html: string, css: string): string {
-  const headCloseIdx = html.indexOf("</head>");
-  if (headCloseIdx !== -1) {
-    return (
-      html.slice(0, headCloseIdx) +
-      `<style>${css}</style>` +
-      html.slice(headCloseIdx)
-    );
-  }
-  return `<head><style>${css}</style></head>${html}`;
-}
-
-const OpenGenerativeUIActivityRendererInner = React.memo(
-  function OpenGenerativeUIActivityRendererInner({ content }: InnerProps) {
-    const initialHeight = content.initialHeight ?? 200;
-    const [autoHeight, setAutoHeight] = useState<number | null>(null);
-    const sandboxFunctions = useSandboxFunctions();
-
-    const localApi = useMemo(() => {
-      const api: Record<string, Function> = {};
-      for (const fn of sandboxFunctions) {
-        api[fn.name] = fn.handler;
-      }
-      return api;
-    }, [sandboxFunctions]);
-
-    // Join html chunks only when streaming is complete
-    const fullHtml =
-      content.htmlComplete && content.html?.length
-        ? content.html.join("")
-        : undefined;
-
-    // CSS from the dedicated parameter (available once cssComplete)
-    const css = content.cssComplete ? content.css : undefined;
-
-    // Derived state for preview streaming — gate on cssComplete so we
-    // show the placeholder until styles are ready.
-    const cssReady = !!content.cssComplete;
-    const partialHtml =
-      !content.htmlComplete && content.html?.length
-        ? content.html.join("")
-        : undefined;
-    const previewBody = partialHtml
-      ? processPartialHtml(partialHtml)
-      : undefined;
-    const previewStyles = partialHtml ? extractCompleteStyles(partialHtml) : "";
-    const hasPreview = cssReady && !!previewBody?.trim();
-    const hasVisibleSandbox = !!fullHtml || hasPreview;
-
-    const containerRef = useRef<HTMLDivElement>(null);
-    const sandboxRef = useRef<{
-      run: (code: string | Function) => Promise<unknown>;
-      destroy: () => void;
-      iframe: HTMLIFrameElement;
-    } | null>(null);
-    const previewSandboxRef = useRef<{
-      run: (code: string | Function) => Promise<unknown>;
-      destroy: () => void;
-      iframe: HTMLIFrameElement;
-    } | null>(null);
-    const previewReadyRef = useRef(false);
-    const sandboxReadyRef = useRef(false);
-    const executedIndexRef = useRef(0);
-    const pendingQueueRef = useRef<string[]>([]);
-    const jsFunctionsInjectedRef = useRef(false);
-
-    // Effect 0 — Preview sandbox creation
-    useEffect(() => {
-      const container = containerRef.current;
-      if (!container || fullHtml || !hasPreview || previewSandboxRef.current)
-        return;
-
-      let cancelled = false;
-
-      import("@jetbrains/websandbox")
-        .then((mod: any) => {
-          if (cancelled) return;
-
-          const Websandbox = mod.default?.default ?? mod.default;
-          const sandbox = Websandbox.create(
-            {},
-            {
-              frameContainer: container,
-              frameContent: "<head></head><body></body>",
-              allowAdditionalAttributes: "",
-            },
-          );
-          previewSandboxRef.current = sandbox;
-
-          sandbox.iframe.style.width = "100%";
-          sandbox.iframe.style.height = "100%";
-          sandbox.iframe.style.border = "none";
-          sandbox.iframe.style.backgroundColor = "transparent";
-
-          sandbox.promise.then(() => {
-            if (cancelled) return;
-            previewReadyRef.current = true;
-
-            // Prevent scrollbars inside preview iframe
-            sandbox.run(`
-            var s = document.createElement('style');
-            s.textContent = 'html, body { overflow: hidden !important; }';
-            document.head.appendChild(s);
-          `);
-
-            // Inject CSS from the dedicated parameter + any inline styles from HTML
-            const headParts: string[] = [];
-            if (css) headParts.push(`<style>${css}</style>`);
-            if (previewStyles) headParts.push(previewStyles);
-            if (headParts.length) {
-              sandbox.run(
-                `document.head.innerHTML = ${JSON.stringify(headParts.join(""))}`,
-              );
-            }
-            if (previewBody) {
-              sandbox.run(
-                `document.body.innerHTML = ${JSON.stringify(previewBody)}`,
-              );
-            }
-          });
-        })
-        .catch((err: unknown) => {
-          console.error(
-            "[OpenGenerativeUI] Failed to load sandbox module:",
-            err,
-          );
-        });
-
-      return () => {
-        cancelled = true;
-      };
-    }, [hasPreview, fullHtml]); // eslint-disable-line react-hooks/exhaustive-deps
-
-    // Effect 0b — Preview content updates (body + styles)
-    useEffect(() => {
-      if (!previewSandboxRef.current || !previewReadyRef.current) return;
-      const headParts: string[] = [];
-      if (css) headParts.push(`<style>${css}</style>`);
-      if (previewStyles) headParts.push(previewStyles);
-      if (headParts.length) {
-        previewSandboxRef.current.run(
-          `document.head.innerHTML = ${JSON.stringify(headParts.join(""))}`,
-        );
-      }
-      if (!previewBody) return;
-      previewSandboxRef.current.run(
-        `document.body.innerHTML = ${JSON.stringify(previewBody)}`,
-      );
-    }, [previewBody, previewStyles, css]);
-
-    // Effect 1 — Final sandbox lifecycle (depends on fullHtml)
-    useEffect(() => {
-      const container = containerRef.current;
-      if (!container || !fullHtml) return;
-
-      // Destroy preview sandbox when transitioning to final
-      if (previewSandboxRef.current) {
-        previewSandboxRef.current.destroy();
-        previewSandboxRef.current = null;
-        previewReadyRef.current = false;
-      }
-
-      let cancelled = false;
-
-      // Reset state for new html
-      executedIndexRef.current = 0;
-      jsFunctionsInjectedRef.current = false;
-      sandboxReadyRef.current = false;
-      pendingQueueRef.current = [];
-
-      // Dynamic import to avoid SSR issues (websandbox references `self` at module level)
-      const htmlContent = css ? injectCssIntoHtml(fullHtml, css) : fullHtml;
-      import("@jetbrains/websandbox")
-        .then((mod: any) => {
-          if (cancelled) return;
-
-          // websandbox ships a UMD bundle with its own webpack `default` export.
-          // Consumer bundlers (e.g. Next.js webpack) wrap CJS under another `.default`,
-          // resulting in mod.default.default for the actual Websandbox class.
-          const Websandbox = mod.default?.default ?? mod.default;
-          const sandbox = Websandbox.create(localApi, {
-            frameContainer: container,
-            frameContent: ensureHead(htmlContent),
-            allowAdditionalAttributes: "",
-          });
-          sandboxRef.current = sandbox;
-
-          // Style the iframe to fill container
-          sandbox.iframe.style.width = "100%";
-          sandbox.iframe.style.height = "100%";
-          sandbox.iframe.style.border = "none";
-          sandbox.iframe.style.backgroundColor = "transparent";
-
-          sandbox.promise.then(() => {
-            if (cancelled) return;
-            sandboxReadyRef.current = true;
-
-            // Prevent scrollbars — the container auto-sizes to fit content
-            sandbox.run(`
-            var s = document.createElement('style');
-            s.textContent = 'html, body { overflow: hidden !important; }';
-            document.head.appendChild(s);
-          `);
-
-            // Flush pending queue
-            const queue = pendingQueueRef.current;
-            pendingQueueRef.current = [];
-            for (const code of queue) {
-              sandbox.run(code);
-            }
-          });
-        })
-        .catch((err: unknown) => {
-          console.error(
-            "[OpenGenerativeUI] Failed to load sandbox module:",
-            err,
-          );
-        });
-
-      return () => {
-        cancelled = true;
-        // Destroy preview sandbox if it still exists
-        if (previewSandboxRef.current) {
-          previewSandboxRef.current.destroy();
-          previewSandboxRef.current = null;
-          previewReadyRef.current = false;
-        }
-        if (sandboxRef.current) {
-          sandboxRef.current.destroy();
-          sandboxRef.current = null;
-        }
-        sandboxReadyRef.current = false;
-        setAutoHeight(null);
-      };
-    }, [fullHtml, css, localApi]);
-
-    // Effect 2 — jsFunctions injection (depends on content.jsFunctions)
-    useEffect(() => {
-      if (!content.jsFunctions || jsFunctionsInjectedRef.current) return;
-      jsFunctionsInjectedRef.current = true;
-
-      const sandbox = sandboxRef.current;
-      if (sandboxReadyRef.current && sandbox) {
-        sandbox.run(content.jsFunctions);
-      } else {
-        pendingQueueRef.current.push(content.jsFunctions);
-      }
-    }, [content.jsFunctions]);
-
-    // Effect 3 — jsExpressions execution (depends on content.jsExpressions?.length)
-    useEffect(() => {
-      const expressions = content.jsExpressions;
-      if (!expressions || expressions.length === 0) return;
-
-      const startIndex = executedIndexRef.current;
-      if (startIndex >= expressions.length) return;
-
-      const newExprs = expressions.slice(startIndex);
-      executedIndexRef.current = expressions.length;
-
-      const sandbox = sandboxRef.current;
-      if (sandboxReadyRef.current && sandbox) {
-        (async () => {
-          for (const expr of newExprs) {
-            await sandbox.run(expr);
-          }
-        })();
-      } else {
-        pendingQueueRef.current.push(...newExprs);
-      }
-    }, [content.jsExpressions?.length]);
-
-    // Effect 4 — One-shot height measurement (fires once when generation completes)
-    // Uses body.scrollHeight (not documentElement.scrollHeight) because the latter
-    // is clamped to the iframe viewport and can never shrink below the current size.
-    const generationDone = content.generating === false;
-    useEffect(() => {
-      const sandbox = sandboxRef.current;
-      if (!generationDone || !sandbox) return;
-
-      let handled = false;
-      const onMessage = (e: MessageEvent) => {
-        if (handled) return;
-        if (
-          e.source === sandbox.iframe.contentWindow &&
-          e.data?.type === "__ck_resize"
-        ) {
-          handled = true;
-          setAutoHeight(e.data.height);
-          window.removeEventListener("message", onMessage);
-        }
-      };
-      window.addEventListener("message", onMessage);
-
-      const measureOnce = `
-        (function() {
-          var s = document.createElement('style');
-          s.textContent = 'body { height: auto !important; min-height: 0 !important; }';
-          document.head.appendChild(s);
-          var h = document.body.scrollHeight;
-          var cs = getComputedStyle(document.body);
-          h += parseFloat(cs.marginTop) || 0;
-          h += parseFloat(cs.marginBottom) || 0;
-          s.remove();
-          parent.postMessage({ type: "__ck_resize", height: Math.ceil(h) }, "*");
-        })();
-      `;
-
-      if (sandboxReadyRef.current) {
-        sandbox.run(measureOnce);
-      } else {
-        pendingQueueRef.current.push(measureOnce);
-      }
-
-      return () => {
-        window.removeEventListener("message", onMessage);
-      };
-    }, [generationDone]);
-
-    const height = autoHeight ?? initialHeight;
-
-    const isGenerating = content.generating !== false;
-
-    return (
-      <div
-        ref={containerRef}
-        style={{
-          position: "relative",
-          width: "100%",
-          height: `${height}px`,
-          borderRadius: "8px",
-          backgroundColor: hasVisibleSandbox ? "transparent" : "#f5f5f5",
-          border: hasVisibleSandbox ? "none" : "1px solid #e0e0e0",
-          display: hasVisibleSandbox ? "block" : "flex",
-          alignItems: hasVisibleSandbox ? undefined : "center",
-          justifyContent: hasVisibleSandbox ? undefined : "center",
-          overflow: "hidden",
-        }}
-      >
-        {isGenerating && (
-          <div
-            style={{
-              position: "absolute",
-              inset: 0,
-              zIndex: 10,
-              pointerEvents: "all",
-              backgroundColor: "rgba(255, 255, 255, 0.5)",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-            }}
-          >
-            <svg
-              width="48"
-              height="48"
-              viewBox="0 0 24 24"
-              fill="none"
-              style={{ animation: "ck-spin 1s linear infinite" }}
-            >
-              <circle cx="12" cy="12" r="10" stroke="#e0e0e0" strokeWidth="3" />
-              <path
-                d="M12 2a10 10 0 0 1 10 10"
-                stroke="#999"
-                strokeWidth="3"
-                strokeLinecap="round"
-              />
-            </svg>
-            <style>{`@keyframes ck-spin { to { transform: rotate(360deg) } }`}</style>
-          </div>
-        )}
-      </div>
-    );
-  },
-  (prev, next) => prev.content === next.content,
-);
-
-/**
- * Frontend tool renderer for generateSandboxedUi.
- * Displays placeholder messages while the UI is being generated.
- */
-export const OpenGenerativeUIToolRenderer: React.FC<
-  | {
-      name: string;
-      args: Partial<GenerateSandboxedUiArgs>;
-      status: ToolCallStatus.InProgress;
-      result: undefined;
-    }
-  | {
-      name: string;
-      args: GenerateSandboxedUiArgs;
-      status: ToolCallStatus.Executing;
-      result: undefined;
-    }
-  | {
-      name: string;
-      args: GenerateSandboxedUiArgs;
-      status: ToolCallStatus.Complete;
-      result: string;
-    }
-> = function OpenGenerativeUIToolRenderer(props) {
-  const [visibleMessageIndex, setVisibleMessageIndex] = useState(0);
-  const prevMessageCountRef = useRef(0);
-
-  const messages = props.args.placeholderMessages;
-
-  // Cycle through placeholder messages
-  useEffect(() => {
-    if (!messages || messages.length === 0) return;
-
-    // When a new message streams in, jump to it immediately
-    if (messages.length !== prevMessageCountRef.current) {
-      prevMessageCountRef.current = messages.length;
-      setVisibleMessageIndex(messages.length - 1);
-    }
-
-    // Auto-cycle every 3s while still in progress
-    if (props.status === ToolCallStatus.Complete) return;
-    const timer = setInterval(() => {
-      setVisibleMessageIndex((i) => (i + 1) % messages.length);
-    }, 5000);
-    return () => clearInterval(timer);
-  }, [messages?.length, props.status]);
-
-  // Don't render anything once complete — the activity renderer handles the UI
-  if (props.status === ToolCallStatus.Complete) return null;
-
-  if (!messages || messages.length === 0) return null;
-
-  return (
-    <div
-      style={{
-        padding: "8px 12px",
-        color: "#999",
-        fontSize: "14px",
-      }}
-    >
-      {messages[visibleMessageIndex] ?? messages[0]}
-    </div>
-  );
-};

package/src/v2/components/WildcardToolCallRender.tsx

@@ -1,86 +0,0 @@
-import { defineToolCallRenderer } from "../types/defineToolCallRenderer";
-import { useState } from "react";
-
-export const WildcardToolCallRender = defineToolCallRenderer({
-  name: "*",
-  render: ({ args, result, name, status }) => {
-    const [isExpanded, setIsExpanded] = useState(false);
-
-    const statusString = String(status) as
-      | "inProgress"
-      | "executing"
-      | "complete";
-    const isActive =
-      statusString === "inProgress" || statusString === "executing";
-    const isComplete = statusString === "complete";
-    const statusStyles = isActive
-      ? "cpk:bg-amber-100 cpk:text-amber-800 cpk:dark:bg-amber-500/15 cpk:dark:text-amber-400"
-      : isComplete
-        ? "cpk:bg-emerald-100 cpk:text-emerald-800 cpk:dark:bg-emerald-500/15 cpk:dark:text-emerald-400"
-        : "cpk:bg-zinc-100 cpk:text-zinc-800 cpk:dark:bg-zinc-700/40 cpk:dark:text-zinc-300";
-
-    return (
-      <div className="cpk:mt-2 cpk:pb-2">
-        <div className="cpk:rounded-xl cpk:border cpk:border-zinc-200/60 cpk:dark:border-zinc-800/60 cpk:bg-white/70 cpk:dark:bg-zinc-900/50 cpk:shadow-sm cpk:backdrop-blur cpk:p-4">
-          <div
-            className="cpk:flex cpk:items-center cpk:justify-between cpk:gap-3 cpk:cursor-pointer"
-            onClick={() => setIsExpanded(!isExpanded)}
-          >
-            <div className="cpk:flex cpk:items-center cpk:gap-2 cpk:min-w-0">
-              <svg
-                className={`cpk:h-4 cpk:w-4 cpk:text-zinc-500 cpk:dark:text-zinc-400 cpk:transition-transform ${
-                  isExpanded ? "cpk:rotate-90" : ""
-                }`}
-                fill="none"
-                viewBox="0 0 24 24"
-                strokeWidth={2}
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  d="M8.25 4.5l7.5 7.5-7.5 7.5"
-                />
-              </svg>
-              <span className="cpk:inline-block cpk:h-2 cpk:w-2 cpk:rounded-full cpk:bg-blue-500" />
-              <span className="cpk:truncate cpk:text-sm cpk:font-medium cpk:text-zinc-900 cpk:dark:text-zinc-100">
-                {name}
-              </span>
-            </div>
-            <span
-              className={`cpk:inline-flex cpk:items-center cpk:rounded-full cpk:px-2 cpk:py-1 cpk:text-xs cpk:font-medium ${statusStyles}`}
-            >
-              {String(status)}
-            </span>
-          </div>
-
-          {isExpanded && (
-            <div className="cpk:mt-3 cpk:grid cpk:gap-4">
-              <div>
-                <div className="cpk:text-xs cpk:uppercase cpk:tracking-wide cpk:text-zinc-500 cpk:dark:text-zinc-400">
-                  Arguments
-                </div>
-                <pre className="cpk:mt-2 cpk:max-h-64 cpk:overflow-auto cpk:rounded-md cpk:bg-zinc-50 cpk:dark:bg-zinc-800/60 cpk:p-3 cpk:text-xs cpk:leading-relaxed cpk:text-zinc-800 cpk:dark:text-zinc-200 cpk:whitespace-pre-wrap cpk:break-words">
-                  {JSON.stringify(args ?? {}, null, 2)}
-                </pre>
-              </div>
-
-              {result !== undefined && (
-                <div>
-                  <div className="cpk:text-xs cpk:uppercase cpk:tracking-wide cpk:text-zinc-500 cpk:dark:text-zinc-400">
-                    Result
-                  </div>
-                  <pre className="cpk:mt-2 cpk:max-h-64 cpk:overflow-auto cpk:rounded-md cpk:bg-zinc-50 cpk:dark:bg-zinc-800/60 cpk:p-3 cpk:text-xs cpk:leading-relaxed cpk:text-zinc-800 cpk:dark:text-zinc-200 cpk:whitespace-pre-wrap cpk:break-words">
-                    {typeof result === "string"
-                      ? result
-                      : JSON.stringify(result, null, 2)}
-                  </pre>
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-    );
-  },
-});