@copilotkit/react-core 1.4.8-no-pino-redact.1 → 1.4.8

package/src/components/error-boundary/error-boundary.tsx

@@ -0,0 +1,42 @@
+import React, { useEffect } from "react";
+import { useErrorToast } from "./error-utils";
+
+interface Props {
+  children: React.ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error?: Error;
+}
+
+export class CopilotErrorBoundary extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error("CopilotKit Error:", error, errorInfo);
+  }
+
+  render() {
+    return <ErrorToast error={this.state.error}>{this.props.children}</ErrorToast>;
+  }
+}
+
+export function ErrorToast({ error, children }: { error?: Error; children: React.ReactNode }) {
+  const addErrorToast = useErrorToast();
+
+  useEffect(() => {
+    if (error) {
+      addErrorToast([error]);
+    }
+  }, [error, addErrorToast]);
+
+  return children;
+}

package/src/components/error-boundary/error-utils.tsx

@@ -0,0 +1,95 @@
+import React, { useCallback, useEffect } from "react";
+import { GraphQLError } from "@copilotkit/runtime-client-gql";
+import { useToast } from "../toast/toast-provider";
+import { ExclamationMarkIcon } from "../toast/exclamation-mark-icon";
+
+export function ErrorToast({ errors }: { errors: (Error | GraphQLError)[] }) {
+  const errorsToRender = errors.map((error, idx) => {
+    const message =
+      "extensions" in error
+        ? (error.extensions?.originalError as undefined | { message?: string })?.message
+        : error.message;
+    const code = "extensions" in error ? (error.extensions?.code as string) : null;
+
+    return (
+      <div
+        key={idx}
+        style={{
+          marginTop: idx === 0 ? 0 : 10,
+          marginBottom: 14,
+        }}
+      >
+        <ExclamationMarkIcon style={{ marginBottom: 4 }} />
+
+        {code && (
+          <div
+            style={{
+              fontWeight: "600",
+              marginBottom: 4,
+            }}
+          >
+            Copilot Cloud Error:{" "}
+            <span style={{ fontFamily: "monospace", fontWeight: "normal" }}>{code}</span>
+          </div>
+        )}
+        <div>{message}</div>
+      </div>
+    );
+  });
+  return (
+    <div
+      style={{
+        fontSize: "13px",
+        maxWidth: "600px",
+      }}
+    >
+      {errorsToRender}
+      <div style={{ fontSize: "11px", opacity: 0.75 }}>
+        NOTE: This error only displays during local development.
+      </div>
+    </div>
+  );
+}
+
+export function useErrorToast() {
+  const { addToast } = useToast();
+
+  return useCallback(
+    (error: (Error | GraphQLError)[]) => {
+      const errorId = error
+        .map((err) => {
+          const message =
+            "extensions" in err
+              ? (err.extensions?.originalError as any)?.message || err.message
+              : err.message;
+          const stack = err.stack || "";
+          return btoa(message + stack).slice(0, 32); // Create hash from message + stack
+        })
+        .join("|");
+
+      addToast({
+        type: "error",
+        id: errorId, // Toast libraries typically dedupe by id
+        message: <ErrorToast errors={error} />,
+      });
+    },
+    [addToast],
+  );
+}
+
+export function useAsyncCallback<T extends (...args: any[]) => Promise<any>>(
+  callback: T,
+  deps: Parameters<typeof useCallback>[1],
+) {
+  const addErrorToast = useErrorToast();
+  return useCallback(async (...args: Parameters<T>) => {
+    try {
+      return await callback(...args);
+    } catch (error) {
+      console.error("Error in async callback:", error);
+      // @ts-ignore
+      addErrorToast([error]);
+      throw error;
+    }
+  }, deps);
+}

package/src/components/toast/toast-provider.tsx

@@ -1,7 +1,7 @@
-import { useCopilotContext } from "../../context";
 import { GraphQLError } from "@copilotkit/runtime-client-gql";
 import React, { createContext, useContext, useState, useCallback } from "react";
-import { ExclamationMarkIcon } from "./exclamation-mark-icon";
+import { ErrorToast } from "../error-boundary/error-utils";
+import { PartialBy } from "@copilotkit/shared";
 
 interface Toast {
   id: string;
@@ -12,7 +12,7 @@ interface Toast {
 
 interface ToastContextValue {
   toasts: Toast[];
-  addToast: (toast: Omit<Toast, "id">) => void;
+  addToast: (toast: PartialBy<Toast, "id">) => void;
   addGraphQLErrorsToast: (errors: GraphQLError[]) => void;
   removeToast: (id: string) => void;
   enabled: boolean;
@@ -36,10 +36,13 @@ export function ToastProvider({
   children: React.ReactNode;
 }) {
   const [toasts, setToasts] = useState<Toast[]>([]);
-  const addToast = useCallback((toast: Omit<Toast, "id">) => {
-    const id = Math.random().toString(36).substring(2, 9);
+  const addToast = useCallback((toast: PartialBy<Toast, "id">) => {
+    const id = toast.id ?? Math.random().toString(36).substring(2, 9);
 
-    setToasts((currentToasts) => [...currentToasts, { ...toast, id }]);
+    setToasts((currentToasts) => {
+      if (currentToasts.find((toast) => toast.id === id)) return currentToasts;
+      return [...currentToasts, { ...toast, id }];
+    });
 
     if (toast.duration) {
       setTimeout(() => {
@@ -54,51 +57,9 @@ export function ToastProvider({
     //   return;
     // }
 
-    const errorsToRender = errors.map((error, idx) => {
-      const message = error.message;
-      const code = error.extensions?.code as string;
-
-      return (
-        <div
-          key={idx}
-          style={{
-            marginTop: idx === 0 ? 0 : 10,
-            marginBottom: 14,
-          }}
-        >
-          <ExclamationMarkIcon style={{ marginBottom: 4 }} />
-
-          {code && (
-            <div
-              style={{
-                fontWeight: "600",
-                marginBottom: 4,
-              }}
-            >
-              Copilot Cloud Error:{" "}
-              <span style={{ fontFamily: "monospace", fontWeight: "normal" }}>{code}</span>
-            </div>
-          )}
-          <div>{message}</div>
-        </div>
-      );
-    });
-
     addToast({
       type: "error",
-      message: (
-        <div
-          style={{
-            fontSize: "13px",
-            maxWidth: "600px",
-          }}
-        >
-          {errorsToRender}
-          <div style={{ fontSize: "11px", opacity: 0.75 }}>
-            NOTE: This is a Copilot Cloud error, and it only displays during local development.
-          </div>
-        </div>
-      ),
+      message: <ErrorToast errors={errors} />,
     });
   }, []);