@copilotkit/react-core 0.0.0-feat-dynamic-copilotcloud-qa-20250117190454

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/index.ts

@@ -0,0 +1 @@
+export * from "./copilot-provider";

package/src/components/toast/exclamation-mark-icon.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+export const ExclamationMarkIcon = ({
+  className,
+  style,
+}: {
+  className?: string;
+  style?: React.CSSProperties;
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className={`lucide lucide-circle-alert ${className ? className : ""}`}
+    style={style}
+  >
+    <circle cx="12" cy="12" r="10" />
+    <line x1="12" x2="12" y1="8" y2="12" />
+    <line x1="12" x2="12.01" y1="16" y2="16" />
+  </svg>
+);

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

@@ -0,0 +1,170 @@
+import { GraphQLError } from "@copilotkit/runtime-client-gql";
+import React, { createContext, useContext, useState, useCallback } from "react";
+import { ErrorToast } from "../error-boundary/error-utils";
+import { PartialBy } from "@copilotkit/shared";
+
+interface Toast {
+  id: string;
+  message: string | React.ReactNode;
+  type: "info" | "success" | "warning" | "error";
+  duration?: number;
+}
+
+interface ToastContextValue {
+  toasts: Toast[];
+  addToast: (toast: PartialBy<Toast, "id">) => void;
+  addGraphQLErrorsToast: (errors: GraphQLError[]) => void;
+  removeToast: (id: string) => void;
+  enabled: boolean;
+}
+
+const ToastContext = createContext<ToastContextValue | undefined>(undefined);
+
+export function useToast() {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return context;
+}
+
+export function ToastProvider({
+  enabled,
+  children,
+}: {
+  enabled: boolean;
+  children: React.ReactNode;
+}) {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+  const addToast = useCallback((toast: PartialBy<Toast, "id">) => {
+    const id = toast.id ?? Math.random().toString(36).substring(2, 9);
+
+    setToasts((currentToasts) => {
+      if (currentToasts.find((toast) => toast.id === id)) return currentToasts;
+      return [...currentToasts, { ...toast, id }];
+    });
+
+    if (toast.duration) {
+      setTimeout(() => {
+        removeToast(id);
+      }, toast.duration);
+    }
+  }, []);
+
+  const addGraphQLErrorsToast = useCallback((errors: GraphQLError[]) => {
+    // We do not display these errors unless we are in dev mode.
+    // if (!showDevConsole) {
+    //   return;
+    // }
+
+    addToast({
+      type: "error",
+      message: <ErrorToast errors={errors} />,
+    });
+  }, []);
+
+  const removeToast = useCallback((id: string) => {
+    setToasts((currentToasts) => currentToasts.filter((toast) => toast.id !== id));
+  }, []);
+
+  const value = {
+    toasts,
+    addToast,
+    addGraphQLErrorsToast,
+    removeToast,
+    enabled,
+  };
+
+  return (
+    <ToastContext.Provider value={value}>
+      <div
+        style={{
+          position: "fixed",
+          bottom: "1rem",
+          left: "50%",
+          transform: "translateX(-50%)",
+          zIndex: 50,
+          display: "flex",
+          flexDirection: "column",
+          gap: "0.5rem",
+        }}
+      >
+        {toasts.length > 1 && (
+          <div style={{ textAlign: "right" }}>
+            <button
+              onClick={() => setToasts([])}
+              style={{
+                padding: "4px 8px",
+                fontSize: "12px",
+                cursor: "pointer",
+                background: "white",
+                border: "1px solid rgba(0,0,0,0.2)",
+                borderRadius: "4px",
+              }}
+            >
+              Close All
+            </button>
+          </div>
+        )}
+        {toasts.map((toast) => (
+          <Toast
+            key={toast.id}
+            message={toast.message}
+            type={toast.type}
+            onClose={() => removeToast(toast.id)}
+          />
+        ))}
+      </div>
+      {children}
+    </ToastContext.Provider>
+  );
+}
+
+function Toast({
+  message,
+  type = "info",
+  onClose,
+}: {
+  message: string | React.ReactNode;
+  type: "info" | "success" | "warning" | "error";
+  onClose: () => void;
+}) {
+  const bgColors = {
+    info: "#3b82f6",
+    success: "#22c55e",
+    warning: "#eab308",
+    error: "#ef4444",
+  };
+
+  return (
+    <div
+      style={{
+        backgroundColor: bgColors[type],
+        color: "white",
+        padding: "0.5rem 1.5rem",
+        borderRadius: "0.25rem",
+        boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+        position: "relative",
+        minWidth: "200px",
+      }}
+    >
+      <div>{message}</div>
+      <button
+        onClick={onClose}
+        style={{
+          position: "absolute",
+          top: "0",
+          right: "0",
+          background: "none",
+          border: "none",
+          color: "white",
+          cursor: "pointer",
+          padding: "0.5rem",
+          fontSize: "1rem",
+        }}
+      >
+        ✕
+      </button>
+    </div>
+  );
+}

package/src/context/copilot-context.tsx

@@ -0,0 +1,271 @@
+import { CopilotCloudConfig, FunctionCallHandler } from "@copilotkit/shared";
+import {
+  ActionRenderProps,
+  CatchAllActionRenderProps,
+  FrontendAction,
+} from "../types/frontend-action";
+import React from "react";
+import { TreeNodeId } from "../hooks/use-tree";
+import { DocumentPointer } from "../types";
+import { CopilotChatSuggestionConfiguration } from "../types/chat-suggestion-configuration";
+import { CoAgentStateRender, CoAgentStateRenderProps } from "../types/coagent-action";
+import { CoagentState } from "../types/coagent-state";
+import { CopilotRuntimeClient, ForwardedParametersInput } from "@copilotkit/runtime-client-gql";
+import { Agent } from "@copilotkit/runtime-client-gql";
+
+/**
+ * Interface for the configuration of the Copilot API.
+ */
+export interface CopilotApiConfig {
+  /**
+   * The public API key for Copilot Cloud.
+   */
+  publicApiKey?: string;
+
+  /**
+   * The configuration for Copilot Cloud.
+   */
+  cloud?: CopilotCloudConfig;
+
+  /**
+   * The endpoint for the chat API.
+   */
+  chatApiEndpoint: string;
+
+  /**
+   * The endpoint for the Copilot transcribe audio service.
+   */
+  transcribeAudioUrl?: string;
+
+  /**
+   * The endpoint for the Copilot text to speech service.
+   */
+  textToSpeechUrl?: string;
+
+  /**
+   * additional headers to be sent with the request
+   * @default {}
+   * @example
+   * ```
+   * {
+   *   'Authorization': 'Bearer your_token_here'
+   * }
+   * ```
+   */
+  headers: Record<string, string>;
+
+  /**
+   * Custom properties to be sent with the request
+   * @default {}
+   * @example
+   * ```
+   * {
+   *   'user_id': 'user_id'
+   * }
+   * ```
+   */
+  properties?: Record<string, any>;
+
+  /**
+   * Indicates whether the user agent should send or receive cookies from the other domain
+   * in the case of cross-origin requests.
+   */
+  credentials?: RequestCredentials;
+}
+
+export type InChatRenderFunction = (
+  props: ActionRenderProps<any> | CatchAllActionRenderProps<any>,
+) => string | JSX.Element;
+export type CoagentInChatRenderFunction = (
+  props: CoAgentStateRenderProps<any>,
+) => string | JSX.Element | undefined | null;
+
+export interface ChatComponentsCache {
+  actions: Record<string, InChatRenderFunction | string>;
+  coAgentStateRenders: Record<string, CoagentInChatRenderFunction | string>;
+}
+
+export interface AgentSession {
+  agentName: string;
+  threadId?: string;
+  nodeName?: string;
+}
+
+export interface AuthState {
+  status: "authenticated" | "unauthenticated";
+  authHeaders: Record<string, string>;
+  userId?: string;
+  metadata?: Record<string, any>;
+}
+
+export type ActionName = string;
+
+export interface CopilotContextParams {
+  // function-calling
+  actions: Record<string, FrontendAction<any>>;
+  setAction: (id: string, action: FrontendAction<any>) => void;
+  removeAction: (id: string) => void;
+
+  // coagent actions
+  coAgentStateRenders: Record<string, CoAgentStateRender<any>>;
+  setCoAgentStateRender: (id: string, stateRender: CoAgentStateRender<any>) => void;
+  removeCoAgentStateRender: (id: string) => void;
+
+  chatComponentsCache: React.RefObject<ChatComponentsCache>;
+
+  getFunctionCallHandler: (
+    customEntryPoints?: Record<string, FrontendAction<any>>,
+  ) => FunctionCallHandler;
+
+  // text context
+  addContext: (context: string, parentId?: string, categories?: string[]) => TreeNodeId;
+  removeContext: (id: TreeNodeId) => void;
+  getContextString: (documents: DocumentPointer[], categories: string[]) => string;
+
+  // document context
+  addDocumentContext: (documentPointer: DocumentPointer, categories?: string[]) => TreeNodeId;
+  removeDocumentContext: (documentId: string) => void;
+  getDocumentsContext: (categories: string[]) => DocumentPointer[];
+
+  isLoading: boolean;
+  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
+
+  chatSuggestionConfiguration: { [key: string]: CopilotChatSuggestionConfiguration };
+  addChatSuggestionConfiguration: (
+    id: string,
+    suggestion: CopilotChatSuggestionConfiguration,
+  ) => void;
+  removeChatSuggestionConfiguration: (id: string) => void;
+
+  chatInstructions: string;
+  setChatInstructions: React.Dispatch<React.SetStateAction<string>>;
+
+  // api endpoints
+  copilotApiConfig: CopilotApiConfig;
+
+  showDevConsole: boolean | "auto";
+
+  // agents
+  coagentStates: Record<string, CoagentState>;
+  setCoagentStates: React.Dispatch<React.SetStateAction<Record<string, CoagentState>>>;
+  coagentStatesRef: React.RefObject<Record<string, CoagentState>>;
+  setCoagentStatesWithRef: (
+    value:
+      | Record<string, CoagentState>
+      | ((prev: Record<string, CoagentState>) => Record<string, CoagentState>),
+  ) => void;
+
+  agentSession: AgentSession | null;
+  setAgentSession: React.Dispatch<React.SetStateAction<AgentSession | null>>;
+
+  agentLock: string | null;
+
+  threadId: string | null;
+  setThreadId: React.Dispatch<React.SetStateAction<string | null>>;
+
+  runId: string | null;
+  setRunId: React.Dispatch<React.SetStateAction<string | null>>;
+
+  // The chat abort controller can be used to stop generation globally,
+  // i.e. when using `stop()` from `useChat`
+  chatAbortControllerRef: React.MutableRefObject<AbortController | null>;
+
+  // runtime
+  runtimeClient: CopilotRuntimeClient;
+
+  /**
+   * The forwarded parameters to use for the task.
+   */
+  forwardedParameters?: Pick<ForwardedParametersInput, "temperature">;
+  availableAgents: Agent[];
+
+  /**
+   * The auth states for the CopilotKit.
+   */
+  authStates?: Record<ActionName, AuthState>;
+  setAuthStates?: React.Dispatch<React.SetStateAction<Record<ActionName, AuthState>>>;
+
+  /**
+   * The auth config for the CopilotKit.
+   */
+  authConfig?: {
+    SignInComponent: React.ComponentType<{
+      onSignInComplete: (authState: AuthState) => void;
+    }>;
+  };
+}
+
+const emptyCopilotContext: CopilotContextParams = {
+  actions: {},
+  setAction: () => {},
+  removeAction: () => {},
+
+  coAgentStateRenders: {},
+  setCoAgentStateRender: () => {},
+  removeCoAgentStateRender: () => {},
+
+  chatComponentsCache: { current: { actions: {}, coAgentStateRenders: {} } },
+  getContextString: (documents: DocumentPointer[], categories: string[]) =>
+    returnAndThrowInDebug(""),
+  addContext: () => "",
+  removeContext: () => {},
+
+  getFunctionCallHandler: () => returnAndThrowInDebug(async () => {}),
+
+  isLoading: false,
+  setIsLoading: () => returnAndThrowInDebug(false),
+
+  chatInstructions: "",
+  setChatInstructions: () => returnAndThrowInDebug(""),
+
+  getDocumentsContext: (categories: string[]) => returnAndThrowInDebug([]),
+  addDocumentContext: () => returnAndThrowInDebug(""),
+  removeDocumentContext: () => {},
+  runtimeClient: {} as any,
+
+  copilotApiConfig: new (class implements CopilotApiConfig {
+    get chatApiEndpoint(): string {
+      throw new Error("Remember to wrap your app in a `<CopilotKit> {...} </CopilotKit>` !!!");
+    }
+
+    get headers(): Record<string, string> {
+      return {};
+    }
+    get body(): Record<string, any> {
+      return {};
+    }
+  })(),
+
+  chatSuggestionConfiguration: {},
+  addChatSuggestionConfiguration: () => {},
+  removeChatSuggestionConfiguration: () => {},
+  showDevConsole: "auto",
+  coagentStates: {},
+  setCoagentStates: () => {},
+  coagentStatesRef: { current: {} },
+  setCoagentStatesWithRef: () => {},
+  agentSession: null,
+  setAgentSession: () => {},
+  forwardedParameters: {},
+  agentLock: null,
+  threadId: null,
+  setThreadId: () => {},
+  runId: null,
+  setRunId: () => {},
+  chatAbortControllerRef: { current: null },
+  availableAgents: [],
+};
+
+export const CopilotContext = React.createContext<CopilotContextParams>(emptyCopilotContext);
+
+export function useCopilotContext(): CopilotContextParams {
+  const context = React.useContext(CopilotContext);
+  if (context === emptyCopilotContext) {
+    throw new Error("Remember to wrap your app in a `<CopilotKit> {...} </CopilotKit>` !!!");
+  }
+  return context;
+}
+
+function returnAndThrowInDebug<T>(_value: T): T {
+  throw new Error("Remember to wrap your app in a `<CopilotKit> {...} </CopilotKit>` !!!");
+}

package/src/context/copilot-messages-context.tsx

@@ -0,0 +1,29 @@
+/**
+ * An internal context to separate the messages state (which is constantly changing) from the rest of CopilotKit context
+ */
+
+import { Message } from "@copilotkit/runtime-client-gql";
+import React from "react";
+
+export interface CopilotMessagesContextParams {
+  messages: Message[];
+  setMessages: React.Dispatch<React.SetStateAction<Message[]>>;
+}
+
+const emptyCopilotContext: CopilotMessagesContextParams = {
+  messages: [],
+  setMessages: () => [],
+};
+
+export const CopilotMessagesContext =
+  React.createContext<CopilotMessagesContextParams>(emptyCopilotContext);
+
+export function useCopilotMessagesContext(): CopilotMessagesContextParams {
+  const context = React.useContext(CopilotMessagesContext);
+  if (context === emptyCopilotContext) {
+    throw new Error(
+      "A messages consuming component was not wrapped with `<CopilotMessages> {...} </CopilotMessages>`",
+    );
+  }
+  return context;
+}

package/src/context/index.ts

@@ -0,0 +1,8 @@
+export { CopilotContext, useCopilotContext } from "./copilot-context";
+export { CopilotMessagesContext, useCopilotMessagesContext } from "./copilot-messages-context";
+export type {
+  CopilotContextParams,
+  CoagentInChatRenderFunction,
+  CopilotApiConfig,
+} from "./copilot-context";
+export type { CopilotMessagesContextParams } from "./copilot-messages-context";

package/src/hooks/index.ts

@@ -0,0 +1,12 @@
+export { useCopilotChat } from "./use-copilot-chat";
+export type { UseCopilotChatOptions } from "./use-copilot-chat";
+export type { UseCopilotChatReturn } from "./use-copilot-chat";
+
+export { useCopilotAction } from "./use-copilot-action";
+export { useCoAgentStateRender } from "./use-coagent-state-render";
+export { useMakeCopilotDocumentReadable } from "./use-make-copilot-document-readable";
+export { type UseChatHelpers } from "./use-chat";
+export { useCopilotReadable } from "./use-copilot-readable";
+export { useCoAgent, type HintFunction, runAgent, startAgent, stopAgent } from "./use-coagent";
+export { useCopilotRuntimeClient } from "./use-copilot-runtime-client";
+export { useCopilotAuthenticatedAction } from "./use-copilot-authenticated-action";