UNPKG

@copilotkit/react-core

Version:

<img src="https://github.com/user-attachments/assets/0a6b64d9-e193-4940-a3f6-60334ac34084" alt="banner" style="border-radius: 12px; border: 2px solid #d6d4fa;" />

797 lines (781 loc) • 27.2 kB
import { CopilotErrorBoundary } from "./chunk-N4VN2B5S.mjs"; import { CopilotMessages, MessagesTapProvider } from "./chunk-2MGJO3FY.mjs"; import { ConsoleTrigger } from "./chunk-AALETENN.mjs"; import { use_flat_category_store_default } from "./chunk-5FHSUKQL.mjs"; import { use_tree_default } from "./chunk-RKTVJRK7.mjs"; import { useCopilotRuntimeClient } from "./chunk-Q3MCVRO3.mjs"; import { shouldShowDevConsole } from "./chunk-ICIK2BSB.mjs"; import { ToastProvider } from "./chunk-EFL5OBKN.mjs"; import { UsageBanner, getErrorActions } from "./chunk-6ZLPNY7X.mjs"; import { CopilotContext } from "./chunk-YHT6CWIY.mjs"; import { __async, __objRest, __restKey, __spreadProps, __spreadValues } from "./chunk-SKC7AJIV.mjs"; // src/utils/extract.ts import { actionParametersToJsonSchema as actionParametersToJsonSchema2 } from "@copilotkit/shared"; import { Role, TextMessage, convertGqlOutputToMessages, CopilotRequestType as CopilotRequestType2 } from "@copilotkit/runtime-client-gql"; // src/components/copilot-provider/copilotkit.tsx import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { flushSync } from "react-dom"; import { COPILOT_CLOUD_CHAT_URL, COPILOT_CLOUD_PUBLIC_API_KEY_HEADER, randomUUID, ConfigurationError, MissingPublicApiKeyError } from "@copilotkit/shared"; // src/utils/suggestions.ts import { actionParametersToJsonSchema } from "@copilotkit/shared"; import { CopilotRequestType } from "@copilotkit/runtime-client-gql"; var reloadSuggestions = (context, chatSuggestionConfiguration, setCurrentSuggestions, abortControllerRef) => __async(void 0, null, function* () { const abortController = abortControllerRef.current; if (abortController == null ? void 0 : abortController.signal.aborted) { return; } const setSuggestionsIfNotAborted = (suggestions) => { if (!(abortController == null ? void 0 : abortController.signal.aborted) && abortControllerRef.current === abortController) { setCurrentSuggestions(suggestions); } }; try { const tools = JSON.stringify( Object.values(context.actions).map((action) => ({ name: action.name, description: action.description, jsonSchema: JSON.stringify(actionParametersToJsonSchema(action.parameters)) })) ); const allSuggestions = []; let hasSuccessfulSuggestions = false; let hasErrors = false; let lastError = null; const enabledConfigs = Object.values(chatSuggestionConfiguration).filter( (config) => config.instructions && config.instructions.trim().length > 0 ); if (enabledConfigs.length === 0) { return; } setSuggestionsIfNotAborted([]); for (const config of enabledConfigs) { if (abortController == null ? void 0 : abortController.signal.aborted) { setSuggestionsIfNotAborted([]); return; } try { const result = yield extract({ context, instructions: "Suggest what the user could say next. Provide clear, highly relevant suggestions. Do not literally suggest function calls. ", data: `${config.instructions} Available tools: ${tools} `, requestType: CopilotRequestType.Task, parameters: [ { name: "suggestions", type: "object[]", attributes: [ { name: "title", description: "The title of the suggestion. This is shown as a button and should be short.", type: "string" }, { name: "message", description: "The message to send when the suggestion is clicked. This should be a clear, complete sentence and will be sent as an instruction to the AI.", type: "string" } ] } ], include: { messages: true, readable: true }, abortSignal: abortController == null ? void 0 : abortController.signal, stream: ({ status, args }) => { if (abortController == null ? void 0 : abortController.signal.aborted) { return; } const suggestions = args.suggestions || []; const newSuggestions = []; for (let i = 0; i < suggestions.length; i++) { if (config.maxSuggestions !== void 0 && i >= config.maxSuggestions) { break; } const suggestion = suggestions[i]; if (!suggestion || typeof suggestion !== "object") { continue; } const { title, message } = suggestion; const hasValidTitle = title && typeof title === "string" && title.trim().length > 0; const hasValidMessage = message && typeof message === "string" && message.trim().length > 0; if (!hasValidTitle) { continue; } const partial = i === suggestions.length - 1 && status !== "complete"; newSuggestions.push({ title: title.trim(), message: hasValidMessage ? message.trim() : "", // Use title as fallback partial, className: config.className }); } setSuggestionsIfNotAborted([...allSuggestions, ...newSuggestions]); } }); if ((result == null ? void 0 : result.suggestions) && Array.isArray(result.suggestions)) { const validSuggestions = result.suggestions.filter( (suggestion) => suggestion && typeof suggestion.title === "string" && suggestion.title.trim().length > 0 ).map((suggestion) => ({ title: suggestion.title.trim(), message: suggestion.message && typeof suggestion.message === "string" && suggestion.message.trim() ? suggestion.message.trim() : suggestion.title.trim() })); if (validSuggestions.length > 0) { allSuggestions.push(...validSuggestions); hasSuccessfulSuggestions = true; } } } catch (error) { hasErrors = true; lastError = error instanceof Error ? error : new Error(String(error)); } } if (hasSuccessfulSuggestions && allSuggestions.length > 0) { const uniqueSuggestions = allSuggestions.filter( (suggestion, index, self) => index === self.findIndex((s) => s.message === suggestion.message) ); setSuggestionsIfNotAborted(uniqueSuggestions); } else if (hasErrors) { const errorMessage = lastError ? lastError.message : "Failed to generate suggestions due to API errors"; throw new Error(errorMessage); } } catch (error) { throw error; } }); // src/components/copilot-provider/copilotkit.tsx import { jsx, jsxs } from "react/jsx-runtime"; function CopilotKit(_a) { var _b = _a, { children } = _b, props = __objRest(_b, ["children"]); const enabled = shouldShowDevConsole(props.showDevConsole); const publicApiKey = props.publicApiKey || props.publicLicenseKey; return /* @__PURE__ */ jsx(ToastProvider, { enabled, children: /* @__PURE__ */ jsx(CopilotErrorBoundary, { publicApiKey, showUsageBanner: enabled, children: /* @__PURE__ */ jsx(CopilotKitInternal, __spreadProps(__spreadValues({}, props), { children })) }) }); } function CopilotKitInternal(cpkProps) { const _a = cpkProps, { children } = _a, props = __objRest(_a, ["children"]); validateProps(cpkProps); const publicApiKey = props.publicLicenseKey || props.publicApiKey; const chatApiEndpoint = props.runtimeUrl || COPILOT_CLOUD_CHAT_URL; const [actions, setActions] = useState({}); const [coAgentStateRenders, setCoAgentStateRenders] = useState({}); const chatComponentsCache = useRef({ actions: {}, coAgentStateRenders: {} }); const { addElement, removeElement, printTree, getAllElements } = use_tree_default(); const [isLoading, setIsLoading] = useState(false); const [chatInstructions, setChatInstructions] = useState(""); const [authStates, setAuthStates] = useState({}); const [extensions, setExtensions] = useState({}); const [additionalInstructions, setAdditionalInstructions] = useState([]); const { addElement: addDocument, removeElement: removeDocument, allElements: allDocuments } = use_flat_category_store_default(); const setAction = useCallback((id, action) => { setActions((prevPoints) => { return __spreadProps(__spreadValues({}, prevPoints), { [id]: action }); }); }, []); const removeAction = useCallback((id) => { setActions((prevPoints) => { const newPoints = __spreadValues({}, prevPoints); delete newPoints[id]; return newPoints; }); }, []); const setCoAgentStateRender = useCallback((id, stateRender) => { setCoAgentStateRenders((prevPoints) => { return __spreadProps(__spreadValues({}, prevPoints), { [id]: stateRender }); }); }, []); const removeCoAgentStateRender = useCallback((id) => { setCoAgentStateRenders((prevPoints) => { const newPoints = __spreadValues({}, prevPoints); delete newPoints[id]; return newPoints; }); }, []); const getContextString = useCallback( (documents, categories) => { const documentsString = documents.map((document) => { return `${document.name} (${document.sourceApplication}): ${document.getContents()}`; }).join("\n\n"); const nonDocumentStrings = printTree(categories); return `${documentsString} ${nonDocumentStrings}`; }, [printTree] ); const addContext = useCallback( (context, parentId, categories = defaultCopilotContextCategories) => { return addElement(context, categories, parentId); }, [addElement] ); const removeContext = useCallback( (id) => { removeElement(id); }, [removeElement] ); const getAllContext = useCallback(() => { return getAllElements(); }, [getAllElements]); const getFunctionCallHandler = useCallback( (customEntryPoints) => { return entryPointsToFunctionCallHandler(Object.values(customEntryPoints || actions)); }, [actions] ); const getDocumentsContext = useCallback( (categories) => { return allDocuments(categories); }, [allDocuments] ); const addDocumentContext = useCallback( (documentPointer, categories = defaultCopilotContextCategories) => { return addDocument(documentPointer, categories); }, [addDocument] ); const removeDocumentContext = useCallback( (documentId) => { removeDocument(documentId); }, [removeDocument] ); const copilotApiConfig = useMemo(() => { var _a2, _b; let cloud = void 0; if (publicApiKey) { cloud = { guardrails: { input: { restrictToTopic: { enabled: Boolean(props.guardrails_c), validTopics: ((_a2 = props.guardrails_c) == null ? void 0 : _a2.validTopics) || [], invalidTopics: ((_b = props.guardrails_c) == null ? void 0 : _b.invalidTopics) || [] } } } }; } return __spreadProps(__spreadValues({ publicApiKey }, cloud ? { cloud } : {}), { chatApiEndpoint, headers: props.headers || {}, properties: props.properties || {}, transcribeAudioUrl: props.transcribeAudioUrl, textToSpeechUrl: props.textToSpeechUrl, credentials: props.credentials }); }, [ publicApiKey, props.headers, props.properties, props.transcribeAudioUrl, props.textToSpeechUrl, props.credentials, props.cloudRestrictToTopic, props.guardrails_c ]); const headers = useMemo(() => { const authHeaders = Object.values(authStates || {}).reduce((acc, state) => { if (state.status === "authenticated" && state.authHeaders) { return __spreadValues(__spreadValues({}, acc), Object.entries(state.authHeaders).reduce( (headers2, [key, value]) => __spreadProps(__spreadValues({}, headers2), { [key.startsWith("X-Custom-") ? key : `X-Custom-${key}`]: value }), {} )); } return acc; }, {}); return __spreadValues(__spreadValues(__spreadValues({}, copilotApiConfig.headers || {}), copilotApiConfig.publicApiKey ? { [COPILOT_CLOUD_PUBLIC_API_KEY_HEADER]: copilotApiConfig.publicApiKey } : {}), authHeaders); }, [copilotApiConfig.headers, copilotApiConfig.publicApiKey, authStates]); const [internalErrorHandlers, _setInternalErrorHandler] = useState({}); const setInternalErrorHandler = useCallback((handler) => { _setInternalErrorHandler((prev) => __spreadValues(__spreadValues({}, prev), handler)); }, []); const removeInternalErrorHandler = useCallback((key) => { _setInternalErrorHandler((prev) => { const _a2 = prev, { [key]: _removed } = _a2, rest = __objRest(_a2, [__restKey(key)]); return rest; }); }, []); const onErrorRef = useRef(props.onError); useEffect(() => { onErrorRef.current = props.onError; }, [props.onError]); const internalHandlersRef = useRef({}); useEffect(() => { internalHandlersRef.current = internalErrorHandlers; }, [internalErrorHandlers]); const handleErrors = useCallback( (error) => __async(this, null, function* () { if (copilotApiConfig.publicApiKey && onErrorRef.current) { try { yield onErrorRef.current(error); } catch (e) { console.error("Error in public onError handler:", e); } } const handlers = Object.values(internalHandlersRef.current); yield Promise.all( handlers.map( (h) => Promise.resolve(h(error)).catch( (e) => console.error("Error in internal error handler:", e) ) ) ); }), [copilotApiConfig.publicApiKey] ); const runtimeClient = useCopilotRuntimeClient({ url: copilotApiConfig.chatApiEndpoint, publicApiKey, headers, credentials: copilotApiConfig.credentials, showDevConsole: shouldShowDevConsole(props.showDevConsole), onError: handleErrors }); const [chatSuggestionConfiguration, setChatSuggestionConfiguration] = useState({}); const addChatSuggestionConfiguration = useCallback( (id, suggestion) => { setChatSuggestionConfiguration((prev) => __spreadProps(__spreadValues({}, prev), { [id]: suggestion })); }, [setChatSuggestionConfiguration] ); const removeChatSuggestionConfiguration = useCallback( (id) => { setChatSuggestionConfiguration((prev) => { const _a2 = prev, { [id]: _ } = _a2, rest = __objRest(_a2, [__restKey(id)]); return rest; }); }, [setChatSuggestionConfiguration] ); const [availableAgents, setAvailableAgents] = useState([]); const [coagentStates, setCoagentStates] = useState({}); const coagentStatesRef = useRef({}); const setCoagentStatesWithRef = useCallback( (value) => { const newValue = typeof value === "function" ? value(coagentStatesRef.current) : value; coagentStatesRef.current = newValue; setCoagentStates((prev) => { return newValue; }); }, [] ); const hasLoadedAgents = useRef(false); useEffect(() => { if (hasLoadedAgents.current) return; const fetchData = () => __async(this, null, function* () { var _a2; const result = yield runtimeClient.availableAgents(); if ((_a2 = result.data) == null ? void 0 : _a2.availableAgents) { setAvailableAgents(result.data.availableAgents.agents); } hasLoadedAgents.current = true; }); void fetchData(); }, []); let initialAgentSession = null; if (props.agent) { initialAgentSession = { agentName: props.agent }; } const [agentSession, setAgentSession] = useState(initialAgentSession); useEffect(() => { if (props.agent) { setAgentSession({ agentName: props.agent }); } else { setAgentSession(null); } }, [props.agent]); const [internalThreadId, setInternalThreadId] = useState(props.threadId || randomUUID()); const setThreadId = useCallback( (value) => { if (props.threadId) { throw new Error("Cannot call setThreadId() when threadId is provided via props."); } setInternalThreadId(value); }, [props.threadId] ); useEffect(() => { if (props.threadId !== void 0) { setInternalThreadId(props.threadId); } }, [props.threadId]); const [runId, setRunId] = useState(null); const chatAbortControllerRef = useRef(null); const showDevConsole = shouldShowDevConsole(props.showDevConsole); const [langGraphInterruptAction, _setLangGraphInterruptAction] = useState(null); const setLangGraphInterruptAction = useCallback((action) => { _setLangGraphInterruptAction((prev) => { if (prev == null) return action; if (action == null) return null; let event = prev.event; if (action.event) { event = __spreadValues(__spreadValues({}, prev.event), action.event); } return __spreadProps(__spreadValues(__spreadValues({}, prev), action), { event }); }); }, []); const removeLangGraphInterruptAction = useCallback(() => { setLangGraphInterruptAction(null); }, []); const memoizedChildren = useMemo(() => children, [children]); const [bannerError, setBannerError] = useState(null); const agentLock = useMemo(() => { var _a2; return (_a2 = props.agent) != null ? _a2 : null; }, [props.agent]); const forwardedParameters = useMemo( () => { var _a2; return (_a2 = props.forwardedParameters) != null ? _a2 : {}; }, [props.forwardedParameters] ); const updateExtensions = useCallback( (newExtensions) => { setExtensions((prev) => { const resolved = typeof newExtensions === "function" ? newExtensions(prev) : newExtensions; const isSameLength = Object.keys(resolved).length === Object.keys(prev).length; const isEqual = isSameLength && // @ts-ignore Object.entries(resolved).every(([key, value]) => prev[key] === value); return isEqual ? prev : resolved; }); }, [setExtensions] ); const updateAuthStates = useCallback( (newAuthStates) => { setAuthStates((prev) => { const resolved = typeof newAuthStates === "function" ? newAuthStates(prev) : newAuthStates; const isSameLength = Object.keys(resolved).length === Object.keys(prev).length; const isEqual = isSameLength && // @ts-ignore Object.entries(resolved).every(([key, value]) => prev[key] === value); return isEqual ? prev : resolved; }); }, [setAuthStates] ); return /* @__PURE__ */ jsxs( CopilotContext.Provider, { value: { actions, chatComponentsCache, getFunctionCallHandler, setAction, removeAction, coAgentStateRenders, setCoAgentStateRender, removeCoAgentStateRender, getContextString, addContext, removeContext, getAllContext, getDocumentsContext, addDocumentContext, removeDocumentContext, copilotApiConfig, isLoading, setIsLoading, chatSuggestionConfiguration, addChatSuggestionConfiguration, removeChatSuggestionConfiguration, chatInstructions, setChatInstructions, additionalInstructions, setAdditionalInstructions, showDevConsole, coagentStates, setCoagentStates, coagentStatesRef, setCoagentStatesWithRef, agentSession, setAgentSession, runtimeClient, forwardedParameters, agentLock, threadId: internalThreadId, setThreadId, runId, setRunId, chatAbortControllerRef, availableAgents, authConfig_c: props.authConfig_c, authStates_c: authStates, setAuthStates_c: updateAuthStates, extensions, setExtensions: updateExtensions, langGraphInterruptAction, setLangGraphInterruptAction, removeLangGraphInterruptAction, bannerError, setBannerError, onError: handleErrors, internalErrorHandlers, setInternalErrorHandler, removeInternalErrorHandler }, children: [ /* @__PURE__ */ jsx(MessagesTapProvider, { children: /* @__PURE__ */ jsxs(CopilotMessages, { children: [ memoizedChildren, showDevConsole && /* @__PURE__ */ jsx(ConsoleTrigger, {}) ] }) }), bannerError && showDevConsole && /* @__PURE__ */ jsx( UsageBanner, { severity: bannerError.severity, message: bannerError.message, onClose: () => setBannerError(null), actions: getErrorActions(bannerError) } ) ] } ); } var defaultCopilotContextCategories = ["global"]; function entryPointsToFunctionCallHandler(actions) { return (_0) => __async(this, [_0], function* ({ name, args }) { let actionsByFunctionName = {}; for (let action2 of actions) { actionsByFunctionName[action2.name] = action2; } const action = actionsByFunctionName[name]; let result = void 0; if (action) { yield new Promise((resolve, reject) => { flushSync(() => __async(this, null, function* () { var _a; try { result = yield (_a = action.handler) == null ? void 0 : _a.call(action, args); resolve(); } catch (error) { reject(error); } })); }); yield new Promise((resolve) => setTimeout(resolve, 20)); } return result; }); } function formatFeatureName(featureName) { return featureName.replace(/_c$/, "").split("_").map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" "); } function validateProps(props) { const cloudFeatures = Object.keys(props).filter((key) => key.endsWith("_c")); const hasApiKey = props.publicApiKey || props.publicLicenseKey; if (!props.runtimeUrl && !hasApiKey) { throw new ConfigurationError( "Missing required prop: 'runtimeUrl' or 'publicApiKey' or 'publicLicenseKey'" ); } if (cloudFeatures.length > 0 && !hasApiKey) { throw new MissingPublicApiKeyError( `Missing required prop: 'publicApiKey' or 'publicLicenseKey' to use cloud features: ${cloudFeatures.map(formatFeatureName).join(", ")}` ); } } // src/utils/extract.ts import { convertMessagesToGqlInput, filterAgentStateMessages } from "@copilotkit/runtime-client-gql"; function extract(_0) { return __async(this, arguments, function* ({ context, instructions, parameters, include, data, abortSignal, stream, requestType = CopilotRequestType2.Task, forwardedParameters }) { var _a, _b; const { messages } = context; const action = { name: "extract", description: instructions, parameters, handler: (args) => { } }; const includeReadable = (_a = include == null ? void 0 : include.readable) != null ? _a : false; const includeMessages = (_b = include == null ? void 0 : include.messages) != null ? _b : false; let contextString = ""; if (data) { contextString = (typeof data === "string" ? data : JSON.stringify(data)) + "\n\n"; } if (includeReadable) { contextString += context.getContextString([], defaultCopilotContextCategories); } const systemMessage = new TextMessage({ content: makeSystemMessage(contextString, instructions), role: Role.System }); const instructionsMessage = new TextMessage({ content: makeInstructionsMessage(instructions), role: Role.User }); const response = context.runtimeClient.asStream( context.runtimeClient.generateCopilotResponse({ data: { frontend: { actions: [ { name: action.name, description: action.description || "", jsonSchema: JSON.stringify(actionParametersToJsonSchema2(action.parameters || [])) } ], url: window.location.href }, messages: convertMessagesToGqlInput( includeMessages ? [systemMessage, instructionsMessage, ...filterAgentStateMessages(messages)] : [systemMessage, instructionsMessage] ), metadata: { requestType }, forwardedParameters: __spreadProps(__spreadValues({}, forwardedParameters != null ? forwardedParameters : {}), { toolChoice: "function", toolChoiceFunctionName: action.name }) }, properties: context.copilotApiConfig.properties, signal: abortSignal }) ); const reader = response.getReader(); let isInitial = true; let actionExecutionMessage = void 0; while (true) { const { done, value } = yield reader.read(); if (done) { break; } if (abortSignal == null ? void 0 : abortSignal.aborted) { throw new Error("Aborted"); } actionExecutionMessage = convertGqlOutputToMessages( value.generateCopilotResponse.messages ).find((msg) => msg.isActionExecutionMessage()); if (!actionExecutionMessage) { continue; } stream == null ? void 0 : stream({ status: isInitial ? "initial" : "inProgress", args: actionExecutionMessage.arguments }); isInitial = false; } if (!actionExecutionMessage) { throw new Error("extract() failed: No function call occurred"); } stream == null ? void 0 : stream({ status: "complete", args: actionExecutionMessage.arguments }); return actionExecutionMessage.arguments; }); } function makeInstructionsMessage(instructions) { return ` The user has given you the following task to complete: \`\`\` ${instructions} \`\`\` Any additional messages provided are for providing context only and should not be used to ask questions or engage in conversation. `; } function makeSystemMessage(contextString, instructions) { return ` Please act as an efficient, competent, conscientious, and industrious professional assistant. Help the user achieve their goals, and you do so in a way that is as efficient as possible, without unnecessary fluff, but also without sacrificing professionalism. Always be polite and respectful, and prefer brevity over verbosity. The user has provided you with the following context: \`\`\` ${contextString} \`\`\` They have also provided you with a function called extract you MUST call to initiate actions on their behalf. Please assist them as best you can. This is not a conversation, so please do not ask questions. Just call the function without saying anything else. `; } export { extract, reloadSuggestions, CopilotKit, CopilotKitInternal, defaultCopilotContextCategories }; //# sourceMappingURL=chunk-6WTWBXEJ.mjs.map