@copilotkit/react-core 1.51.5-next.0 → 1.51.5-next.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.attw.json +3 -0
- package/CHANGELOG.md +10 -0
- package/dist/index.cjs +4010 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +1327 -0
- package/dist/index.d.cts.map +1 -0
- package/dist/index.d.mts +1327 -0
- package/dist/index.d.mts.map +1 -0
- package/dist/index.mjs +3944 -148
- package/dist/index.mjs.map +1 -1
- package/dist/index.umd.js +4075 -39
- package/dist/index.umd.js.map +1 -1
- package/dist/v2/index.cjs +17 -0
- package/dist/v2/index.css +2 -3
- package/dist/v2/index.css.map +1 -1
- package/dist/v2/index.d.cts +2 -0
- package/dist/v2/index.d.mts +2 -0
- package/dist/v2/index.mjs +4 -5
- package/dist/v2/index.umd.js +24 -2
- package/package.json +21 -21
- package/src/components/copilot-provider/__tests__/copilotkit-error.test.tsx +3 -3
- package/src/hooks/__tests__/use-coagent-config.test.ts +23 -22
- package/src/hooks/__tests__/use-coagent-state-render.e2e.test.tsx +33 -35
- package/src/hooks/__tests__/use-coagent-state-render.test.tsx +19 -18
- package/src/hooks/__tests__/use-frontend-tool-available.test.tsx +72 -0
- package/src/hooks/__tests__/use-frontend-tool-remount.e2e.test.tsx +9 -7
- package/src/hooks/use-copilot-chat.ts +1 -1
- package/src/hooks/use-frontend-tool.ts +2 -1
- package/src/lib/copilot-task.ts +1 -1
- package/src/setupTests.ts +17 -16
- package/tsconfig.json +1 -1
- package/tsdown.config.ts +94 -0
- package/vitest.config.mjs +30 -0
- package/dist/chunk-2IDV5OHF.mjs +0 -11
- package/dist/chunk-2IDV5OHF.mjs.map +0 -1
- package/dist/chunk-2JZZD4RP.mjs +0 -628
- package/dist/chunk-2JZZD4RP.mjs.map +0 -1
- package/dist/chunk-2RSAYTXH.mjs +0 -137
- package/dist/chunk-2RSAYTXH.mjs.map +0 -1
- package/dist/chunk-36KQV2NA.mjs +0 -1
- package/dist/chunk-36KQV2NA.mjs.map +0 -1
- package/dist/chunk-3LZZ4RVM.mjs +0 -37
- package/dist/chunk-3LZZ4RVM.mjs.map +0 -1
- package/dist/chunk-4ZQYMC5F.mjs +0 -36
- package/dist/chunk-4ZQYMC5F.mjs.map +0 -1
- package/dist/chunk-6AWG5FWL.mjs +0 -102
- package/dist/chunk-6AWG5FWL.mjs.map +0 -1
- package/dist/chunk-6YOKPWQ7.mjs +0 -1
- package/dist/chunk-6YOKPWQ7.mjs.map +0 -1
- package/dist/chunk-7GIBHX6X.mjs +0 -195
- package/dist/chunk-7GIBHX6X.mjs.map +0 -1
- package/dist/chunk-7PJKPWMD.mjs +0 -112
- package/dist/chunk-7PJKPWMD.mjs.map +0 -1
- package/dist/chunk-7U3DNFBF.mjs +0 -20
- package/dist/chunk-7U3DNFBF.mjs.map +0 -1
- package/dist/chunk-A6NKSGH3.mjs +0 -1
- package/dist/chunk-A6NKSGH3.mjs.map +0 -1
- package/dist/chunk-AAGMWZCN.mjs +0 -439
- package/dist/chunk-AAGMWZCN.mjs.map +0 -1
- package/dist/chunk-C7HSVDHD.mjs +0 -116
- package/dist/chunk-C7HSVDHD.mjs.map +0 -1
- package/dist/chunk-CYDWEPFL.mjs +0 -1
- package/dist/chunk-CYDWEPFL.mjs.map +0 -1
- package/dist/chunk-CZT7JUIM.mjs +0 -153
- package/dist/chunk-CZT7JUIM.mjs.map +0 -1
- package/dist/chunk-DAQORGBP.mjs +0 -125
- package/dist/chunk-DAQORGBP.mjs.map +0 -1
- package/dist/chunk-DMLQZG75.mjs +0 -25
- package/dist/chunk-DMLQZG75.mjs.map +0 -1
- package/dist/chunk-FD6FGKYY.mjs +0 -1
- package/dist/chunk-FD6FGKYY.mjs.map +0 -1
- package/dist/chunk-G7SUZGGB.mjs +0 -126
- package/dist/chunk-G7SUZGGB.mjs.map +0 -1
- package/dist/chunk-GY3FQICF.mjs +0 -23
- package/dist/chunk-GY3FQICF.mjs.map +0 -1
- package/dist/chunk-I76HKHPJ.mjs +0 -32
- package/dist/chunk-I76HKHPJ.mjs.map +0 -1
- package/dist/chunk-ICIK2BSB.mjs +0 -17
- package/dist/chunk-ICIK2BSB.mjs.map +0 -1
- package/dist/chunk-IGYMBU43.mjs +0 -43
- package/dist/chunk-IGYMBU43.mjs.map +0 -1
- package/dist/chunk-IHMMKEFG.mjs +0 -64
- package/dist/chunk-IHMMKEFG.mjs.map +0 -1
- package/dist/chunk-JD7BAH7U.mjs +0 -1
- package/dist/chunk-JD7BAH7U.mjs.map +0 -1
- package/dist/chunk-K5OXUXCG.mjs +0 -76
- package/dist/chunk-K5OXUXCG.mjs.map +0 -1
- package/dist/chunk-L7GPCF2V.mjs +0 -229
- package/dist/chunk-L7GPCF2V.mjs.map +0 -1
- package/dist/chunk-LNGBARXE.mjs +0 -86
- package/dist/chunk-LNGBARXE.mjs.map +0 -1
- package/dist/chunk-LUGEI4YQ.mjs +0 -1
- package/dist/chunk-LUGEI4YQ.mjs.map +0 -1
- package/dist/chunk-MBJ7OLYI.mjs +0 -58
- package/dist/chunk-MBJ7OLYI.mjs.map +0 -1
- package/dist/chunk-NB2FKV2V.mjs +0 -1
- package/dist/chunk-NB2FKV2V.mjs.map +0 -1
- package/dist/chunk-NINJMAND.mjs +0 -86
- package/dist/chunk-NINJMAND.mjs.map +0 -1
- package/dist/chunk-O7ARI5CV.mjs +0 -31
- package/dist/chunk-O7ARI5CV.mjs.map +0 -1
- package/dist/chunk-P6ZPE4XJ.mjs +0 -86
- package/dist/chunk-P6ZPE4XJ.mjs.map +0 -1
- package/dist/chunk-QXZTCGF4.mjs +0 -163
- package/dist/chunk-QXZTCGF4.mjs.map +0 -1
- package/dist/chunk-R7BV32X4.mjs +0 -146
- package/dist/chunk-R7BV32X4.mjs.map +0 -1
- package/dist/chunk-S65UEHGI.mjs +0 -95
- package/dist/chunk-S65UEHGI.mjs.map +0 -1
- package/dist/chunk-SBRCWA4S.mjs +0 -913
- package/dist/chunk-SBRCWA4S.mjs.map +0 -1
- package/dist/chunk-SFOKX4MH.mjs +0 -195
- package/dist/chunk-SFOKX4MH.mjs.map +0 -1
- package/dist/chunk-SK2XMJUD.mjs +0 -42
- package/dist/chunk-SK2XMJUD.mjs.map +0 -1
- package/dist/chunk-SKC7AJIV.mjs +0 -61
- package/dist/chunk-SKC7AJIV.mjs.map +0 -1
- package/dist/chunk-SPCZTZCY.mjs +0 -1
- package/dist/chunk-SPCZTZCY.mjs.map +0 -1
- package/dist/chunk-SYGQHN3H.mjs +0 -27
- package/dist/chunk-SYGQHN3H.mjs.map +0 -1
- package/dist/chunk-TFZXOEY4.mjs +0 -61
- package/dist/chunk-TFZXOEY4.mjs.map +0 -1
- package/dist/chunk-TPN7WC53.mjs +0 -33
- package/dist/chunk-TPN7WC53.mjs.map +0 -1
- package/dist/chunk-UA23VX5J.mjs +0 -65
- package/dist/chunk-UA23VX5J.mjs.map +0 -1
- package/dist/chunk-V42VL2JR.mjs +0 -136
- package/dist/chunk-V42VL2JR.mjs.map +0 -1
- package/dist/chunk-VZ4NSOFQ.mjs +0 -80
- package/dist/chunk-VZ4NSOFQ.mjs.map +0 -1
- package/dist/chunk-WRALJIW5.mjs +0 -79
- package/dist/chunk-WRALJIW5.mjs.map +0 -1
- package/dist/chunk-WV2EA7SX.mjs +0 -65
- package/dist/chunk-WV2EA7SX.mjs.map +0 -1
- package/dist/chunk-Z6JV2LRY.mjs +0 -37
- package/dist/chunk-Z6JV2LRY.mjs.map +0 -1
- package/dist/chunk-ZP2IMXFY.mjs +0 -316
- package/dist/chunk-ZP2IMXFY.mjs.map +0 -1
- package/dist/chunk-ZVF5Q6IH.mjs +0 -29
- package/dist/chunk-ZVF5Q6IH.mjs.map +0 -1
- package/dist/components/CopilotListeners.d.ts +0 -3
- package/dist/components/CopilotListeners.js +0 -110
- package/dist/components/CopilotListeners.js.map +0 -1
- package/dist/components/CopilotListeners.mjs +0 -9
- package/dist/components/CopilotListeners.mjs.map +0 -1
- package/dist/components/copilot-provider/copilot-messages.d.ts +0 -24
- package/dist/components/copilot-provider/copilot-messages.js +0 -366
- package/dist/components/copilot-provider/copilot-messages.js.map +0 -1
- package/dist/components/copilot-provider/copilot-messages.mjs +0 -16
- package/dist/components/copilot-provider/copilot-messages.mjs.map +0 -1
- package/dist/components/copilot-provider/copilotkit-props.d.ts +0 -180
- package/dist/components/copilot-provider/copilotkit-props.js +0 -19
- package/dist/components/copilot-provider/copilotkit-props.js.map +0 -1
- package/dist/components/copilot-provider/copilotkit-props.mjs +0 -1
- package/dist/components/copilot-provider/copilotkit-props.mjs.map +0 -1
- package/dist/components/copilot-provider/copilotkit.d.ts +0 -19
- package/dist/components/copilot-provider/copilotkit.js +0 -2348
- package/dist/components/copilot-provider/copilotkit.js.map +0 -1
- package/dist/components/copilot-provider/copilotkit.mjs +0 -33
- package/dist/components/copilot-provider/copilotkit.mjs.map +0 -1
- package/dist/components/copilot-provider/index.d.ts +0 -14
- package/dist/components/copilot-provider/index.js +0 -2348
- package/dist/components/copilot-provider/index.js.map +0 -1
- package/dist/components/copilot-provider/index.mjs +0 -32
- package/dist/components/copilot-provider/index.mjs.map +0 -1
- package/dist/components/dev-console/console-trigger.d.ts +0 -8
- package/dist/components/dev-console/console-trigger.js +0 -1387
- package/dist/components/dev-console/console-trigger.js.map +0 -1
- package/dist/components/dev-console/console-trigger.mjs +0 -249
- package/dist/components/dev-console/console-trigger.mjs.map +0 -1
- package/dist/components/dev-console/developer-console-modal.d.ts +0 -10
- package/dist/components/dev-console/developer-console-modal.js +0 -1156
- package/dist/components/dev-console/developer-console-modal.js.map +0 -1
- package/dist/components/dev-console/developer-console-modal.mjs +0 -12
- package/dist/components/dev-console/developer-console-modal.mjs.map +0 -1
- package/dist/components/dev-console/icons.d.ts +0 -9
- package/dist/components/dev-console/icons.js +0 -140
- package/dist/components/dev-console/icons.js.map +0 -1
- package/dist/components/dev-console/icons.mjs +0 -16
- package/dist/components/dev-console/icons.mjs.map +0 -1
- package/dist/components/error-boundary/error-boundary.d.ts +0 -31
- package/dist/components/error-boundary/error-boundary.js +0 -507
- package/dist/components/error-boundary/error-boundary.js.map +0 -1
- package/dist/components/error-boundary/error-boundary.mjs +0 -15
- package/dist/components/error-boundary/error-boundary.mjs.map +0 -1
- package/dist/components/error-boundary/error-utils.d.ts +0 -11
- package/dist/components/error-boundary/error-utils.js +0 -190
- package/dist/components/error-boundary/error-utils.js.map +0 -1
- package/dist/components/error-boundary/error-utils.mjs +0 -14
- package/dist/components/error-boundary/error-utils.mjs.map +0 -1
- package/dist/components/index.d.ts +0 -14
- package/dist/components/index.js +0 -2348
- package/dist/components/index.js.map +0 -1
- package/dist/components/index.mjs +0 -33
- package/dist/components/index.mjs.map +0 -1
- package/dist/components/toast/exclamation-mark-icon.d.ts +0 -9
- package/dist/components/toast/exclamation-mark-icon.js +0 -55
- package/dist/components/toast/exclamation-mark-icon.js.map +0 -1
- package/dist/components/toast/exclamation-mark-icon.mjs +0 -8
- package/dist/components/toast/exclamation-mark-icon.mjs.map +0 -1
- package/dist/components/toast/toast-provider.d.ts +0 -27
- package/dist/components/toast/toast-provider.js +0 -353
- package/dist/components/toast/toast-provider.js.map +0 -1
- package/dist/components/toast/toast-provider.mjs +0 -10
- package/dist/components/toast/toast-provider.mjs.map +0 -1
- package/dist/components/usage-banner.d.ts +0 -29
- package/dist/components/usage-banner.js +0 -251
- package/dist/components/usage-banner.js.map +0 -1
- package/dist/components/usage-banner.mjs +0 -12
- package/dist/components/usage-banner.mjs.map +0 -1
- package/dist/context/coagent-state-renders-context.d.ts +0 -25
- package/dist/context/coagent-state-renders-context.js +0 -96
- package/dist/context/coagent-state-renders-context.js.map +0 -1
- package/dist/context/coagent-state-renders-context.mjs +0 -12
- package/dist/context/coagent-state-renders-context.mjs.map +0 -1
- package/dist/context/copilot-context.d.ts +0 -10
- package/dist/context/copilot-context.js +0 -167
- package/dist/context/copilot-context.js.map +0 -1
- package/dist/context/copilot-context.mjs +0 -10
- package/dist/context/copilot-context.mjs.map +0 -1
- package/dist/context/copilot-messages-context.d.ts +0 -18
- package/dist/context/copilot-messages-context.js +0 -60
- package/dist/context/copilot-messages-context.js.map +0 -1
- package/dist/context/copilot-messages-context.mjs +0 -10
- package/dist/context/copilot-messages-context.mjs.map +0 -1
- package/dist/context/index.d.ts +0 -15
- package/dist/context/index.js +0 -301
- package/dist/context/index.js.map +0 -1
- package/dist/context/index.mjs +0 -33
- package/dist/context/index.mjs.map +0 -1
- package/dist/context/threads-context.d.ts +0 -16
- package/dist/context/threads-context.js +0 -64
- package/dist/context/threads-context.js.map +0 -1
- package/dist/context/threads-context.mjs +0 -12
- package/dist/context/threads-context.mjs.map +0 -1
- package/dist/copilot-context-ec77e921.d.ts +0 -209
- package/dist/hooks/index.d.ts +0 -33
- package/dist/hooks/index.js +0 -2190
- package/dist/hooks/index.js.map +0 -1
- package/dist/hooks/index.mjs +0 -93
- package/dist/hooks/index.mjs.map +0 -1
- package/dist/hooks/use-agent-nodename.d.ts +0 -3
- package/dist/hooks/use-agent-nodename.js +0 -56
- package/dist/hooks/use-agent-nodename.js.map +0 -1
- package/dist/hooks/use-agent-nodename.mjs +0 -8
- package/dist/hooks/use-agent-nodename.mjs.map +0 -1
- package/dist/hooks/use-coagent-state-render-bridge.d.ts +0 -100
- package/dist/hooks/use-coagent-state-render-bridge.helpers.d.ts +0 -92
- package/dist/hooks/use-coagent-state-render-bridge.helpers.js +0 -237
- package/dist/hooks/use-coagent-state-render-bridge.helpers.js.map +0 -1
- package/dist/hooks/use-coagent-state-render-bridge.helpers.mjs +0 -24
- package/dist/hooks/use-coagent-state-render-bridge.helpers.mjs.map +0 -1
- package/dist/hooks/use-coagent-state-render-bridge.js +0 -498
- package/dist/hooks/use-coagent-state-render-bridge.js.map +0 -1
- package/dist/hooks/use-coagent-state-render-bridge.mjs +0 -17
- package/dist/hooks/use-coagent-state-render-bridge.mjs.map +0 -1
- package/dist/hooks/use-coagent-state-render-registry.d.ts +0 -25
- package/dist/hooks/use-coagent-state-render-registry.js +0 -369
- package/dist/hooks/use-coagent-state-render-registry.js.map +0 -1
- package/dist/hooks/use-coagent-state-render-registry.mjs +0 -9
- package/dist/hooks/use-coagent-state-render-registry.mjs.map +0 -1
- package/dist/hooks/use-coagent-state-render.d.ts +0 -55
- package/dist/hooks/use-coagent-state-render.js +0 -268
- package/dist/hooks/use-coagent-state-render.js.map +0 -1
- package/dist/hooks/use-coagent-state-render.mjs +0 -11
- package/dist/hooks/use-coagent-state-render.mjs.map +0 -1
- package/dist/hooks/use-coagent.d.ts +0 -192
- package/dist/hooks/use-coagent.js +0 -235
- package/dist/hooks/use-coagent.js.map +0 -1
- package/dist/hooks/use-coagent.mjs +0 -9
- package/dist/hooks/use-coagent.mjs.map +0 -1
- package/dist/hooks/use-configure-chat-suggestions.d.ts +0 -36
- package/dist/hooks/use-configure-chat-suggestions.js +0 -79
- package/dist/hooks/use-configure-chat-suggestions.js.map +0 -1
- package/dist/hooks/use-configure-chat-suggestions.mjs +0 -47
- package/dist/hooks/use-configure-chat-suggestions.mjs.map +0 -1
- package/dist/hooks/use-copilot-action.d.ts +0 -103
- package/dist/hooks/use-copilot-action.js +0 -302
- package/dist/hooks/use-copilot-action.js.map +0 -1
- package/dist/hooks/use-copilot-action.mjs +0 -11
- package/dist/hooks/use-copilot-action.mjs.map +0 -1
- package/dist/hooks/use-copilot-additional-instructions.d.ts +0 -26
- package/dist/hooks/use-copilot-additional-instructions.js +0 -196
- package/dist/hooks/use-copilot-additional-instructions.js.map +0 -1
- package/dist/hooks/use-copilot-additional-instructions.mjs +0 -9
- package/dist/hooks/use-copilot-additional-instructions.mjs.map +0 -1
- package/dist/hooks/use-copilot-authenticated-action.d.ts +0 -18
- package/dist/hooks/use-copilot-authenticated-action.js +0 -477
- package/dist/hooks/use-copilot-authenticated-action.js.map +0 -1
- package/dist/hooks/use-copilot-authenticated-action.mjs +0 -13
- package/dist/hooks/use-copilot-authenticated-action.mjs.map +0 -1
- package/dist/hooks/use-copilot-chat-headless_c.d.ts +0 -25
- package/dist/hooks/use-copilot-chat-headless_c.js +0 -1410
- package/dist/hooks/use-copilot-chat-headless_c.js.map +0 -1
- package/dist/hooks/use-copilot-chat-headless_c.mjs +0 -26
- package/dist/hooks/use-copilot-chat-headless_c.mjs.map +0 -1
- package/dist/hooks/use-copilot-chat-suggestions.d.ts +0 -35
- package/dist/hooks/use-copilot-chat-suggestions.js +0 -60
- package/dist/hooks/use-copilot-chat-suggestions.js.map +0 -1
- package/dist/hooks/use-copilot-chat-suggestions.mjs +0 -8
- package/dist/hooks/use-copilot-chat-suggestions.mjs.map +0 -1
- package/dist/hooks/use-copilot-chat.d.ts +0 -92
- package/dist/hooks/use-copilot-chat.js +0 -1344
- package/dist/hooks/use-copilot-chat.js.map +0 -1
- package/dist/hooks/use-copilot-chat.mjs +0 -23
- package/dist/hooks/use-copilot-chat.mjs.map +0 -1
- package/dist/hooks/use-copilot-chat_internal.d.ts +0 -244
- package/dist/hooks/use-copilot-chat_internal.js +0 -1342
- package/dist/hooks/use-copilot-chat_internal.js.map +0 -1
- package/dist/hooks/use-copilot-chat_internal.mjs +0 -24
- package/dist/hooks/use-copilot-chat_internal.mjs.map +0 -1
- package/dist/hooks/use-copilot-readable.d.ts +0 -37
- package/dist/hooks/use-copilot-readable.js +0 -61
- package/dist/hooks/use-copilot-readable.js.map +0 -1
- package/dist/hooks/use-copilot-readable.mjs +0 -8
- package/dist/hooks/use-copilot-readable.mjs.map +0 -1
- package/dist/hooks/use-copilot-runtime-client.d.ts +0 -10
- package/dist/hooks/use-copilot-runtime-client.js +0 -206
- package/dist/hooks/use-copilot-runtime-client.js.map +0 -1
- package/dist/hooks/use-copilot-runtime-client.mjs +0 -9
- package/dist/hooks/use-copilot-runtime-client.mjs.map +0 -1
- package/dist/hooks/use-default-tool.d.ts +0 -8
- package/dist/hooks/use-default-tool.js +0 -312
- package/dist/hooks/use-default-tool.js.map +0 -1
- package/dist/hooks/use-default-tool.mjs +0 -12
- package/dist/hooks/use-default-tool.mjs.map +0 -1
- package/dist/hooks/use-flat-category-store.d.ts +0 -9
- package/dist/hooks/use-flat-category-store.js +0 -96
- package/dist/hooks/use-flat-category-store.js.map +0 -1
- package/dist/hooks/use-flat-category-store.mjs +0 -8
- package/dist/hooks/use-flat-category-store.mjs.map +0 -1
- package/dist/hooks/use-frontend-tool.d.ts +0 -11
- package/dist/hooks/use-frontend-tool.js +0 -107
- package/dist/hooks/use-frontend-tool.js.map +0 -1
- package/dist/hooks/use-frontend-tool.mjs +0 -8
- package/dist/hooks/use-frontend-tool.mjs.map +0 -1
- package/dist/hooks/use-human-in-the-loop.d.ts +0 -13
- package/dist/hooks/use-human-in-the-loop.js +0 -122
- package/dist/hooks/use-human-in-the-loop.js.map +0 -1
- package/dist/hooks/use-human-in-the-loop.mjs +0 -8
- package/dist/hooks/use-human-in-the-loop.mjs.map +0 -1
- package/dist/hooks/use-langgraph-interrupt-render.d.ts +0 -6
- package/dist/hooks/use-langgraph-interrupt-render.js +0 -335
- package/dist/hooks/use-langgraph-interrupt-render.js.map +0 -1
- package/dist/hooks/use-langgraph-interrupt-render.mjs +0 -14
- package/dist/hooks/use-langgraph-interrupt-render.mjs.map +0 -1
- package/dist/hooks/use-langgraph-interrupt.d.ts +0 -14
- package/dist/hooks/use-langgraph-interrupt.js +0 -216
- package/dist/hooks/use-langgraph-interrupt.js.map +0 -1
- package/dist/hooks/use-langgraph-interrupt.mjs +0 -10
- package/dist/hooks/use-langgraph-interrupt.mjs.map +0 -1
- package/dist/hooks/use-lazy-tool-renderer.d.ts +0 -6
- package/dist/hooks/use-lazy-tool-renderer.js +0 -53
- package/dist/hooks/use-lazy-tool-renderer.js.map +0 -1
- package/dist/hooks/use-lazy-tool-renderer.mjs +0 -8
- package/dist/hooks/use-lazy-tool-renderer.mjs.map +0 -1
- package/dist/hooks/use-make-copilot-document-readable.d.ts +0 -12
- package/dist/hooks/use-make-copilot-document-readable.js +0 -182
- package/dist/hooks/use-make-copilot-document-readable.js.map +0 -1
- package/dist/hooks/use-make-copilot-document-readable.mjs +0 -9
- package/dist/hooks/use-make-copilot-document-readable.mjs.map +0 -1
- package/dist/hooks/use-render-tool-call.d.ts +0 -12
- package/dist/hooks/use-render-tool-call.js +0 -94
- package/dist/hooks/use-render-tool-call.js.map +0 -1
- package/dist/hooks/use-render-tool-call.mjs +0 -8
- package/dist/hooks/use-render-tool-call.mjs.map +0 -1
- package/dist/hooks/use-tree.d.ts +0 -19
- package/dist/hooks/use-tree.js +0 -178
- package/dist/hooks/use-tree.js.map +0 -1
- package/dist/hooks/use-tree.mjs +0 -8
- package/dist/hooks/use-tree.mjs.map +0 -1
- package/dist/index.d.ts +0 -43
- package/dist/index.js +0 -4064
- package/dist/index.js.map +0 -1
- package/dist/lib/copilot-task.d.ts +0 -97
- package/dist/lib/copilot-task.js +0 -201
- package/dist/lib/copilot-task.js.map +0 -1
- package/dist/lib/copilot-task.mjs +0 -33
- package/dist/lib/copilot-task.mjs.map +0 -1
- package/dist/lib/index.d.ts +0 -11
- package/dist/lib/index.js +0 -203
- package/dist/lib/index.js.map +0 -1
- package/dist/lib/index.mjs +0 -34
- package/dist/lib/index.mjs.map +0 -1
- package/dist/lib/status-checker.d.ts +0 -17
- package/dist/lib/status-checker.js +0 -102
- package/dist/lib/status-checker.js.map +0 -1
- package/dist/lib/status-checker.mjs +0 -8
- package/dist/lib/status-checker.mjs.map +0 -1
- package/dist/setupTests.d.ts +0 -2
- package/dist/setupTests.js +0 -31
- package/dist/setupTests.js.map +0 -1
- package/dist/setupTests.mjs +0 -29
- package/dist/setupTests.mjs.map +0 -1
- package/dist/test-helpers/copilot-context.d.ts +0 -14
- package/dist/test-helpers/copilot-context.js +0 -128
- package/dist/test-helpers/copilot-context.js.map +0 -1
- package/dist/test-helpers/copilot-context.mjs +0 -74
- package/dist/test-helpers/copilot-context.mjs.map +0 -1
- package/dist/types/chat-suggestion-configuration.d.ts +0 -22
- package/dist/types/chat-suggestion-configuration.js +0 -19
- package/dist/types/chat-suggestion-configuration.js.map +0 -1
- package/dist/types/chat-suggestion-configuration.mjs +0 -1
- package/dist/types/chat-suggestion-configuration.mjs.map +0 -1
- package/dist/types/coagent-action.d.ts +0 -29
- package/dist/types/coagent-action.js +0 -19
- package/dist/types/coagent-action.js.map +0 -1
- package/dist/types/coagent-action.mjs +0 -1
- package/dist/types/coagent-action.mjs.map +0 -1
- package/dist/types/coagent-state.d.ts +0 -15
- package/dist/types/coagent-state.js +0 -19
- package/dist/types/coagent-state.js.map +0 -1
- package/dist/types/coagent-state.mjs +0 -1
- package/dist/types/coagent-state.mjs.map +0 -1
- package/dist/types/crew.d.ts +0 -79
- package/dist/types/crew.js +0 -19
- package/dist/types/crew.js.map +0 -1
- package/dist/types/crew.mjs +0 -2
- package/dist/types/crew.mjs.map +0 -1
- package/dist/types/document-pointer.d.ts +0 -9
- package/dist/types/document-pointer.js +0 -19
- package/dist/types/document-pointer.js.map +0 -1
- package/dist/types/document-pointer.mjs +0 -1
- package/dist/types/document-pointer.mjs.map +0 -1
- package/dist/types/frontend-action.d.ts +0 -127
- package/dist/types/frontend-action.js +0 -55
- package/dist/types/frontend-action.js.map +0 -1
- package/dist/types/frontend-action.mjs +0 -8
- package/dist/types/frontend-action.mjs.map +0 -1
- package/dist/types/index.d.ts +0 -12
- package/dist/types/index.js +0 -19
- package/dist/types/index.js.map +0 -1
- package/dist/types/index.mjs +0 -4
- package/dist/types/index.mjs.map +0 -1
- package/dist/types/interrupt-action.d.ts +0 -10
- package/dist/types/interrupt-action.js +0 -19
- package/dist/types/interrupt-action.js.map +0 -1
- package/dist/types/interrupt-action.mjs +0 -2
- package/dist/types/interrupt-action.mjs.map +0 -1
- package/dist/types/system-message.d.ts +0 -3
- package/dist/types/system-message.js +0 -19
- package/dist/types/system-message.js.map +0 -1
- package/dist/types/system-message.mjs +0 -1
- package/dist/types/system-message.mjs.map +0 -1
- package/dist/utils/dev-console.d.ts +0 -3
- package/dist/utils/dev-console.js +0 -41
- package/dist/utils/dev-console.js.map +0 -1
- package/dist/utils/dev-console.mjs +0 -8
- package/dist/utils/dev-console.mjs.map +0 -1
- package/dist/utils/index.d.ts +0 -2
- package/dist/utils/index.js +0 -52
- package/dist/utils/index.js.map +0 -1
- package/dist/utils/index.mjs +0 -13
- package/dist/utils/index.mjs.map +0 -1
- package/dist/utils/suggestions-constants.d.ts +0 -9
- package/dist/utils/suggestions-constants.js +0 -35
- package/dist/utils/suggestions-constants.js.map +0 -1
- package/dist/utils/suggestions-constants.mjs +0 -8
- package/dist/utils/suggestions-constants.mjs.map +0 -1
- package/dist/utils/utils.d.ts +0 -2
- package/dist/utils/utils.js +0 -19
- package/dist/utils/utils.js.map +0 -1
- package/dist/utils/utils.mjs +0 -1
- package/dist/utils/utils.mjs.map +0 -1
- package/dist/v2/index.d.ts +0 -2
- package/dist/v2/index.js +0 -27
- package/dist/v2/index.js.map +0 -1
- package/dist/v2/index.mjs.map +0 -1
- package/dist/v2/index.umd.js.map +0 -1
- package/jest.config.js +0 -26
- package/rollup.config.mjs +0 -92
- package/src/__mocks__/analytics-node.js +0 -9
- package/tsup.config.ts +0 -16
package/dist/index.mjs
CHANGED
|
@@ -1,151 +1,3947 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
|
|
3
|
-
import "
|
|
4
|
-
import "
|
|
5
|
-
import "
|
|
6
|
-
import {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
import "
|
|
10
|
-
import "
|
|
11
|
-
import "
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
import {
|
|
82
|
-
useLangGraphInterruptRender
|
|
83
|
-
} from "./chunk-V42VL2JR.mjs";
|
|
84
|
-
import "./chunk-6AWG5FWL.mjs";
|
|
85
|
-
import "./chunk-O7ARI5CV.mjs";
|
|
86
|
-
import "./chunk-I76HKHPJ.mjs";
|
|
87
|
-
import "./chunk-G7SUZGGB.mjs";
|
|
88
|
-
import "./chunk-QXZTCGF4.mjs";
|
|
89
|
-
import "./chunk-7GIBHX6X.mjs";
|
|
90
|
-
import {
|
|
91
|
-
useCoAgentStateRender
|
|
92
|
-
} from "./chunk-S65UEHGI.mjs";
|
|
93
|
-
import "./chunk-NB2FKV2V.mjs";
|
|
94
|
-
import {
|
|
95
|
-
CoAgentStateRendersContext,
|
|
96
|
-
CoAgentStateRendersProvider,
|
|
97
|
-
useCoAgentStateRenders
|
|
98
|
-
} from "./chunk-IHMMKEFG.mjs";
|
|
99
|
-
import {
|
|
100
|
-
CopilotContext,
|
|
101
|
-
useCopilotContext
|
|
102
|
-
} from "./chunk-C7HSVDHD.mjs";
|
|
103
|
-
import {
|
|
104
|
-
CopilotMessagesContext,
|
|
105
|
-
useCopilotMessagesContext
|
|
106
|
-
} from "./chunk-DMLQZG75.mjs";
|
|
107
|
-
import {
|
|
108
|
-
ThreadsContext,
|
|
109
|
-
ThreadsProvider,
|
|
110
|
-
useThreads
|
|
111
|
-
} from "./chunk-SK2XMJUD.mjs";
|
|
112
|
-
import "./chunk-WRALJIW5.mjs";
|
|
113
|
-
import "./chunk-ZP2IMXFY.mjs";
|
|
114
|
-
import "./chunk-SKC7AJIV.mjs";
|
|
115
|
-
export {
|
|
116
|
-
CoAgentStateRendersContext,
|
|
117
|
-
CoAgentStateRendersProvider,
|
|
118
|
-
CopilotContext,
|
|
119
|
-
CopilotKit,
|
|
120
|
-
CopilotMessagesContext,
|
|
121
|
-
CopilotTask,
|
|
122
|
-
SUGGESTION_RETRY_CONFIG,
|
|
123
|
-
ThreadsContext,
|
|
124
|
-
ThreadsProvider,
|
|
125
|
-
defaultCopilotContextCategories,
|
|
126
|
-
shouldShowDevConsole,
|
|
127
|
-
useCoAgent,
|
|
128
|
-
useCoAgentStateRender,
|
|
129
|
-
useCoAgentStateRenders,
|
|
130
|
-
useCopilotAction,
|
|
131
|
-
useCopilotAdditionalInstructions,
|
|
132
|
-
useCopilotAuthenticatedAction_c,
|
|
133
|
-
useCopilotChat,
|
|
134
|
-
useCopilotChatHeadless_c,
|
|
135
|
-
useCopilotChatInternal,
|
|
136
|
-
useCopilotChatSuggestions,
|
|
137
|
-
useCopilotContext,
|
|
138
|
-
useCopilotMessagesContext,
|
|
139
|
-
useCopilotReadable,
|
|
140
|
-
useCopilotRuntimeClient,
|
|
141
|
-
useDefaultTool,
|
|
142
|
-
useFrontendTool,
|
|
143
|
-
useHumanInTheLoop,
|
|
144
|
-
useLangGraphInterrupt,
|
|
145
|
-
useLangGraphInterruptRender,
|
|
146
|
-
useLazyToolRenderer,
|
|
147
|
-
useMakeCopilotDocumentReadable,
|
|
148
|
-
useRenderToolCall,
|
|
149
|
-
useThreads
|
|
2
|
+
|
|
3
|
+
import React, { Fragment, createContext, createElement, useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState } from "react";
|
|
4
|
+
import { CopilotChatConfigurationProvider, CopilotKitProvider, defineToolCallRenderer, useAgent, useConfigureSuggestions, useCopilotChatConfiguration, useCopilotKit, useFrontendTool as useFrontendTool$1, useHumanInTheLoop as useHumanInTheLoop$1, useRenderCustomMessages, useRenderToolCall as useRenderToolCall$1, useSuggestions } from "@copilotkitnext/react";
|
|
5
|
+
import { COPILOT_CLOUD_API_URL, COPILOT_CLOUD_CHAT_URL, COPILOT_CLOUD_PUBLIC_API_KEY_HEADER, ConfigurationError, CopilotKitAgentDiscoveryError, CopilotKitApiDiscoveryError, CopilotKitError, CopilotKitErrorCode, CopilotKitLowLevelError, CopilotKitRemoteEndpointDiscoveryError, ErrorVisibility, MissingPublicApiKeyError, Severity, actionParametersToJsonSchema, dataToUUID, getZodParameters, parseJson, randomId, randomUUID, styledConsole } from "@copilotkit/shared";
|
|
6
|
+
import { flushSync } from "react-dom";
|
|
7
|
+
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
8
|
+
import ReactMarkdown from "react-markdown";
|
|
9
|
+
import { ActionInputAvailability, CopilotRequestType, CopilotRuntimeClient, Message as Message$1, MetaEventName, Role, TextMessage, convertGqlOutputToMessages, convertMessagesToGqlInput, filterAgentStateMessages, gqlToAGUI } from "@copilotkit/runtime-client-gql";
|
|
10
|
+
import { AGUIConnectNotImplementedError } from "@ag-ui/client";
|
|
11
|
+
import { ToolCallStatus } from "@copilotkitnext/core";
|
|
12
|
+
|
|
13
|
+
//#region src/context/copilot-context.tsx
|
|
14
|
+
const emptyCopilotContext$1 = {
|
|
15
|
+
actions: {},
|
|
16
|
+
setAction: () => {},
|
|
17
|
+
removeAction: () => {},
|
|
18
|
+
setRegisteredActions: () => "",
|
|
19
|
+
removeRegisteredAction: () => {},
|
|
20
|
+
chatComponentsCache: { current: {
|
|
21
|
+
actions: {},
|
|
22
|
+
coAgentStateRenders: {}
|
|
23
|
+
} },
|
|
24
|
+
getContextString: (documents, categories) => returnAndThrowInDebug(""),
|
|
25
|
+
addContext: () => "",
|
|
26
|
+
removeContext: () => {},
|
|
27
|
+
getAllContext: () => [],
|
|
28
|
+
getFunctionCallHandler: () => returnAndThrowInDebug(async () => {}),
|
|
29
|
+
isLoading: false,
|
|
30
|
+
setIsLoading: () => returnAndThrowInDebug(false),
|
|
31
|
+
chatInstructions: "",
|
|
32
|
+
setChatInstructions: () => returnAndThrowInDebug(""),
|
|
33
|
+
additionalInstructions: [],
|
|
34
|
+
setAdditionalInstructions: () => returnAndThrowInDebug([]),
|
|
35
|
+
getDocumentsContext: (categories) => returnAndThrowInDebug([]),
|
|
36
|
+
addDocumentContext: () => returnAndThrowInDebug(""),
|
|
37
|
+
removeDocumentContext: () => {},
|
|
38
|
+
copilotApiConfig: new class {
|
|
39
|
+
get chatApiEndpoint() {
|
|
40
|
+
throw new Error("Remember to wrap your app in a `<CopilotKit> {...} </CopilotKit>` !!!");
|
|
41
|
+
}
|
|
42
|
+
get headers() {
|
|
43
|
+
return {};
|
|
44
|
+
}
|
|
45
|
+
get body() {
|
|
46
|
+
return {};
|
|
47
|
+
}
|
|
48
|
+
}(),
|
|
49
|
+
chatSuggestionConfiguration: {},
|
|
50
|
+
addChatSuggestionConfiguration: () => {},
|
|
51
|
+
removeChatSuggestionConfiguration: () => {},
|
|
52
|
+
showDevConsole: false,
|
|
53
|
+
coagentStates: {},
|
|
54
|
+
setCoagentStates: () => {},
|
|
55
|
+
coagentStatesRef: { current: {} },
|
|
56
|
+
setCoagentStatesWithRef: () => {},
|
|
57
|
+
agentSession: null,
|
|
58
|
+
setAgentSession: () => {},
|
|
59
|
+
forwardedParameters: {},
|
|
60
|
+
agentLock: null,
|
|
61
|
+
threadId: "",
|
|
62
|
+
setThreadId: () => {},
|
|
63
|
+
runId: null,
|
|
64
|
+
setRunId: () => {},
|
|
65
|
+
chatAbortControllerRef: { current: null },
|
|
66
|
+
availableAgents: [],
|
|
67
|
+
extensions: {},
|
|
68
|
+
setExtensions: () => {},
|
|
69
|
+
interruptActions: {},
|
|
70
|
+
setInterruptAction: () => {},
|
|
71
|
+
removeInterruptAction: () => {},
|
|
72
|
+
interruptEventQueue: {},
|
|
73
|
+
addInterruptEvent: () => {},
|
|
74
|
+
resolveInterruptEvent: () => {},
|
|
75
|
+
onError: () => {},
|
|
76
|
+
bannerError: null,
|
|
77
|
+
setBannerError: () => {},
|
|
78
|
+
internalErrorHandlers: {},
|
|
79
|
+
setInternalErrorHandler: () => {},
|
|
80
|
+
removeInternalErrorHandler: () => {}
|
|
150
81
|
};
|
|
82
|
+
const CopilotContext = React.createContext(emptyCopilotContext$1);
|
|
83
|
+
function useCopilotContext() {
|
|
84
|
+
const context = React.useContext(CopilotContext);
|
|
85
|
+
if (context === emptyCopilotContext$1) throw new Error("Remember to wrap your app in a `<CopilotKit> {...} </CopilotKit>` !!!");
|
|
86
|
+
return context;
|
|
87
|
+
}
|
|
88
|
+
function returnAndThrowInDebug(_value) {
|
|
89
|
+
throw new Error("Remember to wrap your app in a `<CopilotKit> {...} </CopilotKit>` !!!");
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
//#endregion
|
|
93
|
+
//#region src/hooks/use-tree.ts
|
|
94
|
+
const removeNode = (nodes, id) => {
|
|
95
|
+
return nodes.reduce((result, node) => {
|
|
96
|
+
if (node.id !== id) {
|
|
97
|
+
const newNode = {
|
|
98
|
+
...node,
|
|
99
|
+
children: removeNode(node.children, id)
|
|
100
|
+
};
|
|
101
|
+
result.push(newNode);
|
|
102
|
+
}
|
|
103
|
+
return result;
|
|
104
|
+
}, []);
|
|
105
|
+
};
|
|
106
|
+
const addNode = (nodes, newNode, parentId) => {
|
|
107
|
+
if (!parentId) return [...nodes, newNode];
|
|
108
|
+
return nodes.map((node) => {
|
|
109
|
+
if (node.id === parentId) return {
|
|
110
|
+
...node,
|
|
111
|
+
children: [...node.children, newNode]
|
|
112
|
+
};
|
|
113
|
+
else if (node.children.length) return {
|
|
114
|
+
...node,
|
|
115
|
+
children: addNode(node.children, newNode, parentId)
|
|
116
|
+
};
|
|
117
|
+
return node;
|
|
118
|
+
});
|
|
119
|
+
};
|
|
120
|
+
const treeIndentationRepresentation = (index, indentLevel) => {
|
|
121
|
+
if (indentLevel === 0) return (index + 1).toString();
|
|
122
|
+
else if (indentLevel === 1) return String.fromCharCode(65 + index);
|
|
123
|
+
else if (indentLevel === 2) return String.fromCharCode(97 + index);
|
|
124
|
+
else return "-";
|
|
125
|
+
};
|
|
126
|
+
const printNode = (node, prefix = "", indentLevel = 0) => {
|
|
127
|
+
const indent = " ".repeat(3).repeat(indentLevel);
|
|
128
|
+
const prefixPlusIndentLength = prefix.length + indent.length;
|
|
129
|
+
const subsequentLinesPrefix = " ".repeat(prefixPlusIndentLength);
|
|
130
|
+
const valueLines = node.value.split("\n");
|
|
131
|
+
const outputFirstLine = `${indent}${prefix}${valueLines[0]}`;
|
|
132
|
+
const outputSubsequentLines = valueLines.slice(1).map((line) => `${subsequentLinesPrefix}${line}`).join("\n");
|
|
133
|
+
let output = `${outputFirstLine}\n`;
|
|
134
|
+
if (outputSubsequentLines) output += `${outputSubsequentLines}\n`;
|
|
135
|
+
const childPrePrefix = " ".repeat(prefix.length);
|
|
136
|
+
node.children.forEach((child, index) => output += printNode(child, `${childPrePrefix}${treeIndentationRepresentation(index, indentLevel + 1)}. `, indentLevel + 1));
|
|
137
|
+
return output;
|
|
138
|
+
};
|
|
139
|
+
function treeReducer(state, action) {
|
|
140
|
+
switch (action.type) {
|
|
141
|
+
case "ADD_NODE": {
|
|
142
|
+
const { value, parentId, id: newNodeId } = action;
|
|
143
|
+
const newNode = {
|
|
144
|
+
id: newNodeId,
|
|
145
|
+
value,
|
|
146
|
+
children: [],
|
|
147
|
+
categories: new Set(action.categories)
|
|
148
|
+
};
|
|
149
|
+
try {
|
|
150
|
+
return addNode(state, newNode, parentId);
|
|
151
|
+
} catch (error) {
|
|
152
|
+
console.error(`Error while adding node with id ${newNodeId}: ${error}`);
|
|
153
|
+
return state;
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
case "REMOVE_NODE": return removeNode(state, action.id);
|
|
157
|
+
default: return state;
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
const useTree = () => {
|
|
161
|
+
const [tree, dispatch] = useReducer(treeReducer, []);
|
|
162
|
+
const addElement = useCallback((value, categories, parentId) => {
|
|
163
|
+
const newNodeId = randomId();
|
|
164
|
+
dispatch({
|
|
165
|
+
type: "ADD_NODE",
|
|
166
|
+
value,
|
|
167
|
+
parentId,
|
|
168
|
+
id: newNodeId,
|
|
169
|
+
categories
|
|
170
|
+
});
|
|
171
|
+
return newNodeId;
|
|
172
|
+
}, []);
|
|
173
|
+
const removeElement = useCallback((id) => {
|
|
174
|
+
dispatch({
|
|
175
|
+
type: "REMOVE_NODE",
|
|
176
|
+
id
|
|
177
|
+
});
|
|
178
|
+
}, []);
|
|
179
|
+
const getAllElements = useCallback(() => {
|
|
180
|
+
return tree;
|
|
181
|
+
}, [tree]);
|
|
182
|
+
return {
|
|
183
|
+
tree,
|
|
184
|
+
addElement,
|
|
185
|
+
printTree: useCallback((categories) => {
|
|
186
|
+
const categoriesSet = new Set(categories);
|
|
187
|
+
let output = "";
|
|
188
|
+
tree.forEach((node, index) => {
|
|
189
|
+
if (!setsHaveIntersection$1(categoriesSet, node.categories)) return;
|
|
190
|
+
if (index !== 0) output += "\n";
|
|
191
|
+
output += printNode(node, `${treeIndentationRepresentation(index, 0)}. `);
|
|
192
|
+
});
|
|
193
|
+
return output;
|
|
194
|
+
}, [tree]),
|
|
195
|
+
removeElement,
|
|
196
|
+
getAllElements
|
|
197
|
+
};
|
|
198
|
+
};
|
|
199
|
+
function setsHaveIntersection$1(setA, setB) {
|
|
200
|
+
const [smallerSet, largerSet] = setA.size <= setB.size ? [setA, setB] : [setB, setA];
|
|
201
|
+
for (let item of smallerSet) if (largerSet.has(item)) return true;
|
|
202
|
+
return false;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
//#endregion
|
|
206
|
+
//#region src/hooks/use-flat-category-store.ts
|
|
207
|
+
const useFlatCategoryStore = () => {
|
|
208
|
+
const [elements, dispatch] = useReducer(flatCategoryStoreReducer, /* @__PURE__ */ new Map());
|
|
209
|
+
return {
|
|
210
|
+
addElement: useCallback((value, categories) => {
|
|
211
|
+
const newId = randomId();
|
|
212
|
+
dispatch({
|
|
213
|
+
type: "ADD_ELEMENT",
|
|
214
|
+
value,
|
|
215
|
+
id: newId,
|
|
216
|
+
categories
|
|
217
|
+
});
|
|
218
|
+
return newId;
|
|
219
|
+
}, []),
|
|
220
|
+
removeElement: useCallback((id) => {
|
|
221
|
+
dispatch({
|
|
222
|
+
type: "REMOVE_ELEMENT",
|
|
223
|
+
id
|
|
224
|
+
});
|
|
225
|
+
}, []),
|
|
226
|
+
allElements: useCallback((categories) => {
|
|
227
|
+
const categoriesSet = new Set(categories);
|
|
228
|
+
const result = [];
|
|
229
|
+
elements.forEach((element) => {
|
|
230
|
+
if (setsHaveIntersection(categoriesSet, element.categories)) result.push(element.value);
|
|
231
|
+
});
|
|
232
|
+
return result;
|
|
233
|
+
}, [elements])
|
|
234
|
+
};
|
|
235
|
+
};
|
|
236
|
+
function flatCategoryStoreReducer(state, action) {
|
|
237
|
+
switch (action.type) {
|
|
238
|
+
case "ADD_ELEMENT": {
|
|
239
|
+
const { value, id, categories } = action;
|
|
240
|
+
const newElement = {
|
|
241
|
+
id,
|
|
242
|
+
value,
|
|
243
|
+
categories: new Set(categories)
|
|
244
|
+
};
|
|
245
|
+
const newState = new Map(state);
|
|
246
|
+
newState.set(id, newElement);
|
|
247
|
+
return newState;
|
|
248
|
+
}
|
|
249
|
+
case "REMOVE_ELEMENT": {
|
|
250
|
+
const newState = new Map(state);
|
|
251
|
+
newState.delete(action.id);
|
|
252
|
+
return newState;
|
|
253
|
+
}
|
|
254
|
+
default: return state;
|
|
255
|
+
}
|
|
256
|
+
}
|
|
257
|
+
function setsHaveIntersection(setA, setB) {
|
|
258
|
+
const [smallerSet, largerSet] = setA.size <= setB.size ? [setA, setB] : [setB, setA];
|
|
259
|
+
for (let item of smallerSet) if (largerSet.has(item)) return true;
|
|
260
|
+
return false;
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
//#endregion
|
|
264
|
+
//#region src/context/copilot-messages-context.tsx
|
|
265
|
+
const emptyCopilotContext = {
|
|
266
|
+
messages: [],
|
|
267
|
+
setMessages: () => [],
|
|
268
|
+
suggestions: [],
|
|
269
|
+
setSuggestions: () => []
|
|
270
|
+
};
|
|
271
|
+
const CopilotMessagesContext = React.createContext(emptyCopilotContext);
|
|
272
|
+
function useCopilotMessagesContext() {
|
|
273
|
+
const context = React.useContext(CopilotMessagesContext);
|
|
274
|
+
if (context === emptyCopilotContext) throw new Error("A messages consuming component was not wrapped with `<CopilotMessages> {...} </CopilotMessages>`");
|
|
275
|
+
return context;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
//#endregion
|
|
279
|
+
//#region src/components/toast/toast-provider.tsx
|
|
280
|
+
const ToastContext = createContext(void 0);
|
|
281
|
+
function getErrorSeverity(error) {
|
|
282
|
+
if (error.severity) switch (error.severity) {
|
|
283
|
+
case Severity.CRITICAL: return "critical";
|
|
284
|
+
case Severity.WARNING: return "warning";
|
|
285
|
+
case Severity.INFO: return "info";
|
|
286
|
+
default: return "info";
|
|
287
|
+
}
|
|
288
|
+
const message = error.message.toLowerCase();
|
|
289
|
+
if (message.includes("api key") || message.includes("401") || message.includes("unauthorized") || message.includes("authentication") || message.includes("incorrect api key")) return "critical";
|
|
290
|
+
return "info";
|
|
291
|
+
}
|
|
292
|
+
function getErrorColors(severity) {
|
|
293
|
+
switch (severity) {
|
|
294
|
+
case "critical": return {
|
|
295
|
+
background: "#fee2e2",
|
|
296
|
+
border: "#dc2626",
|
|
297
|
+
text: "#7f1d1d",
|
|
298
|
+
icon: "#dc2626"
|
|
299
|
+
};
|
|
300
|
+
case "warning": return {
|
|
301
|
+
background: "#fef3c7",
|
|
302
|
+
border: "#d97706",
|
|
303
|
+
text: "#78350f",
|
|
304
|
+
icon: "#d97706"
|
|
305
|
+
};
|
|
306
|
+
case "info": return {
|
|
307
|
+
background: "#dbeafe",
|
|
308
|
+
border: "#2563eb",
|
|
309
|
+
text: "#1e3a8a",
|
|
310
|
+
icon: "#2563eb"
|
|
311
|
+
};
|
|
312
|
+
}
|
|
313
|
+
}
|
|
314
|
+
function useToast() {
|
|
315
|
+
const context = useContext(ToastContext);
|
|
316
|
+
if (!context) throw new Error("useToast must be used within a ToastProvider");
|
|
317
|
+
return context;
|
|
318
|
+
}
|
|
319
|
+
function ToastProvider({ enabled, children }) {
|
|
320
|
+
const [toasts, setToasts] = useState([]);
|
|
321
|
+
const [bannerError, setBannerErrorState] = useState(null);
|
|
322
|
+
const removeToast = useCallback((id) => {
|
|
323
|
+
setToasts((prev) => prev.filter((toast) => toast.id !== id));
|
|
324
|
+
}, []);
|
|
325
|
+
const addToast = useCallback((toast) => {
|
|
326
|
+
if (!enabled) return;
|
|
327
|
+
const id = toast.id ?? Math.random().toString(36).substring(2, 9);
|
|
328
|
+
setToasts((currentToasts) => {
|
|
329
|
+
if (currentToasts.find((toast) => toast.id === id)) return currentToasts;
|
|
330
|
+
return [...currentToasts, {
|
|
331
|
+
...toast,
|
|
332
|
+
id
|
|
333
|
+
}];
|
|
334
|
+
});
|
|
335
|
+
if (toast.duration) setTimeout(() => {
|
|
336
|
+
removeToast(id);
|
|
337
|
+
}, toast.duration);
|
|
338
|
+
}, [enabled, removeToast]);
|
|
339
|
+
const setBannerError = useCallback((error) => {
|
|
340
|
+
if (!enabled && error !== null) return;
|
|
341
|
+
setBannerErrorState(error);
|
|
342
|
+
}, [enabled]);
|
|
343
|
+
const value = {
|
|
344
|
+
toasts,
|
|
345
|
+
addToast,
|
|
346
|
+
addGraphQLErrorsToast: useCallback((errors) => {
|
|
347
|
+
console.warn("addGraphQLErrorsToast is deprecated. All errors now show as banners.");
|
|
348
|
+
}, []),
|
|
349
|
+
removeToast,
|
|
350
|
+
enabled,
|
|
351
|
+
bannerError,
|
|
352
|
+
setBannerError
|
|
353
|
+
};
|
|
354
|
+
return /* @__PURE__ */ jsxs(ToastContext.Provider, {
|
|
355
|
+
value,
|
|
356
|
+
children: [bannerError && (() => {
|
|
357
|
+
const colors = getErrorColors(getErrorSeverity(bannerError));
|
|
358
|
+
return /* @__PURE__ */ jsx("div", {
|
|
359
|
+
style: {
|
|
360
|
+
position: "fixed",
|
|
361
|
+
bottom: "20px",
|
|
362
|
+
left: "50%",
|
|
363
|
+
transform: "translateX(-50%)",
|
|
364
|
+
zIndex: 9999,
|
|
365
|
+
backgroundColor: colors.background,
|
|
366
|
+
border: `1px solid ${colors.border}`,
|
|
367
|
+
borderLeft: `4px solid ${colors.border}`,
|
|
368
|
+
borderRadius: "8px",
|
|
369
|
+
padding: "12px 16px",
|
|
370
|
+
fontSize: "13px",
|
|
371
|
+
boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
|
|
372
|
+
backdropFilter: "blur(8px)",
|
|
373
|
+
maxWidth: "min(90vw, 700px)",
|
|
374
|
+
width: "100%",
|
|
375
|
+
boxSizing: "border-box",
|
|
376
|
+
overflow: "hidden"
|
|
377
|
+
},
|
|
378
|
+
children: /* @__PURE__ */ jsxs("div", {
|
|
379
|
+
style: {
|
|
380
|
+
display: "flex",
|
|
381
|
+
justifyContent: "space-between",
|
|
382
|
+
alignItems: "center",
|
|
383
|
+
gap: "10px"
|
|
384
|
+
},
|
|
385
|
+
children: [/* @__PURE__ */ jsxs("div", {
|
|
386
|
+
style: {
|
|
387
|
+
display: "flex",
|
|
388
|
+
alignItems: "center",
|
|
389
|
+
gap: "8px",
|
|
390
|
+
flex: 1,
|
|
391
|
+
minWidth: 0
|
|
392
|
+
},
|
|
393
|
+
children: [/* @__PURE__ */ jsx("div", { style: {
|
|
394
|
+
width: "12px",
|
|
395
|
+
height: "12px",
|
|
396
|
+
borderRadius: "50%",
|
|
397
|
+
backgroundColor: colors.border,
|
|
398
|
+
flexShrink: 0
|
|
399
|
+
} }), /* @__PURE__ */ jsxs("div", {
|
|
400
|
+
style: {
|
|
401
|
+
display: "flex",
|
|
402
|
+
alignItems: "center",
|
|
403
|
+
gap: "10px",
|
|
404
|
+
flex: 1,
|
|
405
|
+
minWidth: 0
|
|
406
|
+
},
|
|
407
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
408
|
+
style: {
|
|
409
|
+
color: colors.text,
|
|
410
|
+
lineHeight: "1.4",
|
|
411
|
+
fontWeight: "400",
|
|
412
|
+
fontSize: "13px",
|
|
413
|
+
flex: 1,
|
|
414
|
+
wordBreak: "break-all",
|
|
415
|
+
overflowWrap: "break-word",
|
|
416
|
+
maxWidth: "550px",
|
|
417
|
+
overflow: "hidden",
|
|
418
|
+
display: "-webkit-box",
|
|
419
|
+
WebkitLineClamp: 10,
|
|
420
|
+
WebkitBoxOrient: "vertical"
|
|
421
|
+
},
|
|
422
|
+
children: (() => {
|
|
423
|
+
let message = bannerError.message;
|
|
424
|
+
const jsonMatch = message.match(/'message':\s*'([^']+)'/);
|
|
425
|
+
if (jsonMatch) return jsonMatch[1];
|
|
426
|
+
message = message.split(" - ")[0];
|
|
427
|
+
message = message.split(": Error code")[0];
|
|
428
|
+
message = message.replace(/:\s*\d{3}$/, "");
|
|
429
|
+
message = message.replace(/See more:.*$/g, "");
|
|
430
|
+
message = message.trim();
|
|
431
|
+
return message || "Configuration error occurred.";
|
|
432
|
+
})()
|
|
433
|
+
}), (() => {
|
|
434
|
+
const message = bannerError.message;
|
|
435
|
+
const markdownLinkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
|
|
436
|
+
const plainUrlRegex = /(https?:\/\/[^\s)]+)/g;
|
|
437
|
+
let url = null;
|
|
438
|
+
let buttonText = "See More";
|
|
439
|
+
const markdownMatch = markdownLinkRegex.exec(message);
|
|
440
|
+
if (markdownMatch) {
|
|
441
|
+
url = markdownMatch[2];
|
|
442
|
+
buttonText = "See More";
|
|
443
|
+
} else {
|
|
444
|
+
const urlMatch = plainUrlRegex.exec(message);
|
|
445
|
+
if (urlMatch) {
|
|
446
|
+
url = urlMatch[0].replace(/[.,;:'"]*$/, "");
|
|
447
|
+
buttonText = "See More";
|
|
448
|
+
}
|
|
449
|
+
}
|
|
450
|
+
if (!url) return null;
|
|
451
|
+
return /* @__PURE__ */ jsx("button", {
|
|
452
|
+
onClick: () => window.open(url, "_blank", "noopener,noreferrer"),
|
|
453
|
+
style: {
|
|
454
|
+
background: colors.border,
|
|
455
|
+
color: "white",
|
|
456
|
+
border: "none",
|
|
457
|
+
borderRadius: "5px",
|
|
458
|
+
padding: "4px 10px",
|
|
459
|
+
fontSize: "11px",
|
|
460
|
+
fontWeight: "500",
|
|
461
|
+
cursor: "pointer",
|
|
462
|
+
transition: "all 0.2s ease",
|
|
463
|
+
flexShrink: 0
|
|
464
|
+
},
|
|
465
|
+
onMouseEnter: (e) => {
|
|
466
|
+
e.currentTarget.style.opacity = "0.9";
|
|
467
|
+
e.currentTarget.style.transform = "translateY(-1px)";
|
|
468
|
+
},
|
|
469
|
+
onMouseLeave: (e) => {
|
|
470
|
+
e.currentTarget.style.opacity = "1";
|
|
471
|
+
e.currentTarget.style.transform = "translateY(0)";
|
|
472
|
+
},
|
|
473
|
+
children: buttonText
|
|
474
|
+
});
|
|
475
|
+
})()]
|
|
476
|
+
})]
|
|
477
|
+
}), /* @__PURE__ */ jsx("button", {
|
|
478
|
+
onClick: () => setBannerError(null),
|
|
479
|
+
style: {
|
|
480
|
+
background: "transparent",
|
|
481
|
+
border: "none",
|
|
482
|
+
color: colors.text,
|
|
483
|
+
cursor: "pointer",
|
|
484
|
+
padding: "2px",
|
|
485
|
+
borderRadius: "3px",
|
|
486
|
+
fontSize: "14px",
|
|
487
|
+
lineHeight: "1",
|
|
488
|
+
opacity: .6,
|
|
489
|
+
transition: "all 0.2s ease",
|
|
490
|
+
flexShrink: 0
|
|
491
|
+
},
|
|
492
|
+
title: "Dismiss",
|
|
493
|
+
onMouseEnter: (e) => {
|
|
494
|
+
e.currentTarget.style.opacity = "1";
|
|
495
|
+
e.currentTarget.style.background = "rgba(0, 0, 0, 0.05)";
|
|
496
|
+
},
|
|
497
|
+
onMouseLeave: (e) => {
|
|
498
|
+
e.currentTarget.style.opacity = "0.6";
|
|
499
|
+
e.currentTarget.style.background = "transparent";
|
|
500
|
+
},
|
|
501
|
+
children: "×"
|
|
502
|
+
})]
|
|
503
|
+
})
|
|
504
|
+
});
|
|
505
|
+
})(), children]
|
|
506
|
+
});
|
|
507
|
+
}
|
|
508
|
+
|
|
509
|
+
//#endregion
|
|
510
|
+
//#region src/utils/dev-console.ts
|
|
511
|
+
function isLocalhost() {
|
|
512
|
+
if (typeof window === "undefined") return false;
|
|
513
|
+
return window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1" || window.location.hostname === "0.0.0.0";
|
|
514
|
+
}
|
|
515
|
+
function shouldShowDevConsole(showDevConsole) {
|
|
516
|
+
if (showDevConsole !== void 0) return showDevConsole;
|
|
517
|
+
return isLocalhost();
|
|
518
|
+
}
|
|
519
|
+
|
|
520
|
+
//#endregion
|
|
521
|
+
//#region src/components/copilot-provider/copilot-messages.tsx
|
|
522
|
+
/**
|
|
523
|
+
* An internal context to separate the messages state (which is constantly changing) from the rest of CopilotKit context
|
|
524
|
+
*/
|
|
525
|
+
const MessagesTapContext = createContext(null);
|
|
526
|
+
function useMessagesTap() {
|
|
527
|
+
const tap = useContext(MessagesTapContext);
|
|
528
|
+
if (!tap) throw new Error("useMessagesTap must be used inside <MessagesTapProvider>");
|
|
529
|
+
return tap;
|
|
530
|
+
}
|
|
531
|
+
function MessagesTapProvider({ children }) {
|
|
532
|
+
const messagesRef = useRef([]);
|
|
533
|
+
const tapRef = useRef({
|
|
534
|
+
getMessagesFromTap: () => messagesRef.current,
|
|
535
|
+
updateTapMessages: (messages) => {
|
|
536
|
+
messagesRef.current = messages;
|
|
537
|
+
}
|
|
538
|
+
});
|
|
539
|
+
return /* @__PURE__ */ jsx(MessagesTapContext.Provider, {
|
|
540
|
+
value: tapRef.current,
|
|
541
|
+
children
|
|
542
|
+
});
|
|
543
|
+
}
|
|
544
|
+
/**
|
|
545
|
+
* CopilotKit messages context.
|
|
546
|
+
*/
|
|
547
|
+
function CopilotMessages({ children }) {
|
|
548
|
+
const [messages, setMessages] = useState([]);
|
|
549
|
+
useRef(void 0);
|
|
550
|
+
useRef(void 0);
|
|
551
|
+
useRef(void 0);
|
|
552
|
+
const { updateTapMessages } = useMessagesTap();
|
|
553
|
+
const { threadId, agentSession, showDevConsole, onError, copilotApiConfig } = useCopilotContext();
|
|
554
|
+
const { setBannerError } = useToast();
|
|
555
|
+
const traceUIError = useCallback(async (error, originalError) => {
|
|
556
|
+
if (!onError || !copilotApiConfig.publicApiKey) return;
|
|
557
|
+
try {
|
|
558
|
+
await onError({
|
|
559
|
+
type: "error",
|
|
560
|
+
timestamp: Date.now(),
|
|
561
|
+
context: {
|
|
562
|
+
source: "ui",
|
|
563
|
+
request: {
|
|
564
|
+
operation: "loadAgentState",
|
|
565
|
+
url: copilotApiConfig.chatApiEndpoint,
|
|
566
|
+
startTime: Date.now()
|
|
567
|
+
},
|
|
568
|
+
technical: {
|
|
569
|
+
environment: "browser",
|
|
570
|
+
userAgent: typeof navigator !== "undefined" ? navigator.userAgent : void 0,
|
|
571
|
+
stackTrace: originalError instanceof Error ? originalError.stack : void 0
|
|
572
|
+
}
|
|
573
|
+
},
|
|
574
|
+
error
|
|
575
|
+
});
|
|
576
|
+
} catch (traceError) {
|
|
577
|
+
console.error("Error in CopilotMessages onError handler:", traceError);
|
|
578
|
+
}
|
|
579
|
+
}, [
|
|
580
|
+
onError,
|
|
581
|
+
copilotApiConfig.publicApiKey,
|
|
582
|
+
copilotApiConfig.chatApiEndpoint
|
|
583
|
+
]);
|
|
584
|
+
const createStructuredError = (gqlError) => {
|
|
585
|
+
const extensions = gqlError.extensions;
|
|
586
|
+
const originalError = extensions?.originalError;
|
|
587
|
+
if (originalError?.stack) {
|
|
588
|
+
if (originalError.stack.includes("CopilotApiDiscoveryError")) return new CopilotKitApiDiscoveryError({ message: originalError.message });
|
|
589
|
+
if (originalError.stack.includes("CopilotKitRemoteEndpointDiscoveryError")) return new CopilotKitRemoteEndpointDiscoveryError({ message: originalError.message });
|
|
590
|
+
if (originalError.stack.includes("CopilotKitAgentDiscoveryError")) return new CopilotKitAgentDiscoveryError({
|
|
591
|
+
agentName: "",
|
|
592
|
+
availableAgents: []
|
|
593
|
+
});
|
|
594
|
+
}
|
|
595
|
+
const message = originalError?.message || gqlError.message;
|
|
596
|
+
const code = extensions?.code;
|
|
597
|
+
if (code) return new CopilotKitError({
|
|
598
|
+
message,
|
|
599
|
+
code
|
|
600
|
+
});
|
|
601
|
+
return null;
|
|
602
|
+
};
|
|
603
|
+
useCallback((error) => {
|
|
604
|
+
if (error.graphQLErrors?.length) {
|
|
605
|
+
const graphQLErrors = error.graphQLErrors;
|
|
606
|
+
const routeError = (gqlError) => {
|
|
607
|
+
const visibility = gqlError.extensions?.visibility;
|
|
608
|
+
if (!shouldShowDevConsole(showDevConsole)) {
|
|
609
|
+
console.error("CopilotKit Error (hidden in production):", gqlError.message);
|
|
610
|
+
return;
|
|
611
|
+
}
|
|
612
|
+
if (visibility === ErrorVisibility.SILENT) {
|
|
613
|
+
console.error("CopilotKit Silent Error:", gqlError.message);
|
|
614
|
+
return;
|
|
615
|
+
}
|
|
616
|
+
const ckError = createStructuredError(gqlError);
|
|
617
|
+
if (ckError) {
|
|
618
|
+
setBannerError(ckError);
|
|
619
|
+
traceUIError(ckError, gqlError);
|
|
620
|
+
} else {
|
|
621
|
+
const fallbackError = new CopilotKitError({
|
|
622
|
+
message: gqlError.message,
|
|
623
|
+
code: CopilotKitErrorCode.UNKNOWN
|
|
624
|
+
});
|
|
625
|
+
setBannerError(fallbackError);
|
|
626
|
+
traceUIError(fallbackError, gqlError);
|
|
627
|
+
}
|
|
628
|
+
};
|
|
629
|
+
graphQLErrors.forEach(routeError);
|
|
630
|
+
} else if (!shouldShowDevConsole(showDevConsole)) console.error("CopilotKit Error (hidden in production):", error);
|
|
631
|
+
else {
|
|
632
|
+
const fallbackError = new CopilotKitError({
|
|
633
|
+
message: error?.message || String(error),
|
|
634
|
+
code: CopilotKitErrorCode.UNKNOWN
|
|
635
|
+
});
|
|
636
|
+
setBannerError(fallbackError);
|
|
637
|
+
traceUIError(fallbackError, error);
|
|
638
|
+
}
|
|
639
|
+
}, [
|
|
640
|
+
setBannerError,
|
|
641
|
+
showDevConsole,
|
|
642
|
+
traceUIError
|
|
643
|
+
]);
|
|
644
|
+
useEffect(() => {
|
|
645
|
+
updateTapMessages(messages);
|
|
646
|
+
}, [messages, updateTapMessages]);
|
|
647
|
+
const memoizedChildren = useMemo(() => children, [children]);
|
|
648
|
+
const [suggestions, setSuggestions] = useState([]);
|
|
649
|
+
return /* @__PURE__ */ jsx(CopilotMessagesContext.Provider, {
|
|
650
|
+
value: {
|
|
651
|
+
messages,
|
|
652
|
+
setMessages,
|
|
653
|
+
suggestions,
|
|
654
|
+
setSuggestions
|
|
655
|
+
},
|
|
656
|
+
children: memoizedChildren
|
|
657
|
+
});
|
|
658
|
+
}
|
|
659
|
+
|
|
660
|
+
//#endregion
|
|
661
|
+
//#region src/components/usage-banner.tsx
|
|
662
|
+
function UsageBanner({ severity = Severity.CRITICAL, message = "", onClose, actions }) {
|
|
663
|
+
if (!message || !severity) return null;
|
|
664
|
+
const theme = {
|
|
665
|
+
[Severity.INFO]: {
|
|
666
|
+
bg: "#f8fafc",
|
|
667
|
+
border: "#e2e8f0",
|
|
668
|
+
text: "#475569",
|
|
669
|
+
accent: "#3b82f6"
|
|
670
|
+
},
|
|
671
|
+
[Severity.WARNING]: {
|
|
672
|
+
bg: "#fffbeb",
|
|
673
|
+
border: "#fbbf24",
|
|
674
|
+
text: "#92400e",
|
|
675
|
+
accent: "#f59e0b"
|
|
676
|
+
},
|
|
677
|
+
[Severity.CRITICAL]: {
|
|
678
|
+
bg: "#fef2f2",
|
|
679
|
+
border: "#fecaca",
|
|
680
|
+
text: "#dc2626",
|
|
681
|
+
accent: "#ef4444"
|
|
682
|
+
}
|
|
683
|
+
}[severity];
|
|
684
|
+
return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("style", { children: `
|
|
685
|
+
@keyframes slideUp {
|
|
686
|
+
from { opacity: 0; transform: translateX(-50%) translateY(8px); }
|
|
687
|
+
to { opacity: 1; transform: translateX(-50%) translateY(0); }
|
|
688
|
+
}
|
|
689
|
+
|
|
690
|
+
.usage-banner {
|
|
691
|
+
position: fixed;
|
|
692
|
+
bottom: 24px;
|
|
693
|
+
left: 50%;
|
|
694
|
+
transform: translateX(-50%);
|
|
695
|
+
width: min(600px, calc(100vw - 32px));
|
|
696
|
+
z-index: 10000;
|
|
697
|
+
animation: slideUp 0.2s cubic-bezier(0.16, 1, 0.3, 1);
|
|
698
|
+
}
|
|
699
|
+
|
|
700
|
+
.banner-content {
|
|
701
|
+
background: linear-gradient(135deg, ${theme.bg} 0%, ${theme.bg}f5 100%);
|
|
702
|
+
border: 1px solid ${theme.border};
|
|
703
|
+
border-radius: 12px;
|
|
704
|
+
padding: 18px 20px;
|
|
705
|
+
box-shadow:
|
|
706
|
+
0 4px 24px rgba(0, 0, 0, 0.08),
|
|
707
|
+
0 2px 8px rgba(0, 0, 0, 0.04),
|
|
708
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.7);
|
|
709
|
+
display: flex;
|
|
710
|
+
align-items: center;
|
|
711
|
+
gap: 16px;
|
|
712
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
|
713
|
+
backdrop-filter: blur(12px);
|
|
714
|
+
position: relative;
|
|
715
|
+
overflow: hidden;
|
|
716
|
+
}
|
|
717
|
+
|
|
718
|
+
.banner-content::before {
|
|
719
|
+
content: '';
|
|
720
|
+
position: absolute;
|
|
721
|
+
top: 0;
|
|
722
|
+
left: 0;
|
|
723
|
+
right: 0;
|
|
724
|
+
height: 1px;
|
|
725
|
+
background: linear-gradient(90deg, transparent, ${theme.accent}40, transparent);
|
|
726
|
+
}
|
|
727
|
+
|
|
728
|
+
.banner-message {
|
|
729
|
+
color: ${theme.text};
|
|
730
|
+
font-size: 14px;
|
|
731
|
+
line-height: 1.5;
|
|
732
|
+
font-weight: 500;
|
|
733
|
+
flex: 1;
|
|
734
|
+
letter-spacing: -0.01em;
|
|
735
|
+
}
|
|
736
|
+
|
|
737
|
+
.close-btn {
|
|
738
|
+
background: rgba(0, 0, 0, 0.05);
|
|
739
|
+
border: none;
|
|
740
|
+
color: ${theme.text};
|
|
741
|
+
cursor: pointer;
|
|
742
|
+
padding: 0;
|
|
743
|
+
border-radius: 6px;
|
|
744
|
+
opacity: 0.6;
|
|
745
|
+
transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
|
|
746
|
+
font-size: 14px;
|
|
747
|
+
line-height: 1;
|
|
748
|
+
flex-shrink: 0;
|
|
749
|
+
width: 24px;
|
|
750
|
+
height: 24px;
|
|
751
|
+
display: flex;
|
|
752
|
+
align-items: center;
|
|
753
|
+
justify-content: center;
|
|
754
|
+
}
|
|
755
|
+
|
|
756
|
+
.close-btn:hover {
|
|
757
|
+
opacity: 1;
|
|
758
|
+
background: rgba(0, 0, 0, 0.08);
|
|
759
|
+
transform: scale(1.05);
|
|
760
|
+
}
|
|
761
|
+
|
|
762
|
+
.btn-primary {
|
|
763
|
+
background: linear-gradient(135deg, ${theme.accent} 0%, ${theme.accent}e6 100%);
|
|
764
|
+
color: white;
|
|
765
|
+
border: none;
|
|
766
|
+
border-radius: 8px;
|
|
767
|
+
padding: 10px 18px;
|
|
768
|
+
font-size: 13px;
|
|
769
|
+
font-weight: 600;
|
|
770
|
+
cursor: pointer;
|
|
771
|
+
transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
|
|
772
|
+
font-family: inherit;
|
|
773
|
+
flex-shrink: 0;
|
|
774
|
+
box-shadow:
|
|
775
|
+
0 2px 8px ${theme.accent}30,
|
|
776
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
|
777
|
+
letter-spacing: -0.01em;
|
|
778
|
+
}
|
|
779
|
+
|
|
780
|
+
.btn-primary:hover {
|
|
781
|
+
transform: translateY(-1px) scale(1.02);
|
|
782
|
+
box-shadow:
|
|
783
|
+
0 4px 12px ${theme.accent}40,
|
|
784
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.25);
|
|
785
|
+
}
|
|
786
|
+
|
|
787
|
+
.btn-primary:active {
|
|
788
|
+
transform: translateY(0) scale(0.98);
|
|
789
|
+
transition: all 0.08s cubic-bezier(0.16, 1, 0.3, 1);
|
|
790
|
+
}
|
|
791
|
+
|
|
792
|
+
@media (max-width: 640px) {
|
|
793
|
+
.usage-banner {
|
|
794
|
+
width: calc(100vw - 24px);
|
|
795
|
+
}
|
|
796
|
+
|
|
797
|
+
.banner-content {
|
|
798
|
+
padding: 16px;
|
|
799
|
+
gap: 12px;
|
|
800
|
+
}
|
|
801
|
+
|
|
802
|
+
.banner-message {
|
|
803
|
+
font-size: 13px;
|
|
804
|
+
line-height: 1.45;
|
|
805
|
+
}
|
|
806
|
+
|
|
807
|
+
.btn-primary {
|
|
808
|
+
padding: 8px 14px;
|
|
809
|
+
font-size: 12px;
|
|
810
|
+
}
|
|
811
|
+
|
|
812
|
+
.close-btn {
|
|
813
|
+
width: 22px;
|
|
814
|
+
height: 22px;
|
|
815
|
+
font-size: 12px;
|
|
816
|
+
}
|
|
817
|
+
}
|
|
818
|
+
` }), /* @__PURE__ */ jsx("div", {
|
|
819
|
+
className: "usage-banner",
|
|
820
|
+
children: /* @__PURE__ */ jsxs("div", {
|
|
821
|
+
className: "banner-content",
|
|
822
|
+
children: [
|
|
823
|
+
/* @__PURE__ */ jsx("div", {
|
|
824
|
+
className: "banner-message",
|
|
825
|
+
children: message
|
|
826
|
+
}),
|
|
827
|
+
actions?.primary && /* @__PURE__ */ jsx("button", {
|
|
828
|
+
className: "btn-primary",
|
|
829
|
+
onClick: actions.primary.onClick,
|
|
830
|
+
children: actions.primary.label
|
|
831
|
+
}),
|
|
832
|
+
onClose && /* @__PURE__ */ jsx("button", {
|
|
833
|
+
className: "close-btn",
|
|
834
|
+
onClick: onClose,
|
|
835
|
+
title: "Close",
|
|
836
|
+
children: "×"
|
|
837
|
+
})
|
|
838
|
+
]
|
|
839
|
+
})
|
|
840
|
+
})] });
|
|
841
|
+
}
|
|
842
|
+
const getErrorActions = (error) => {
|
|
843
|
+
switch (error.code) {
|
|
844
|
+
case CopilotKitErrorCode.MISSING_PUBLIC_API_KEY_ERROR: return { primary: {
|
|
845
|
+
label: "Show me how",
|
|
846
|
+
onClick: () => window.open("https://docs.copilotkit.ai/premium#how-do-i-get-access-to-premium-features", "_blank", "noopener,noreferrer")
|
|
847
|
+
} };
|
|
848
|
+
case CopilotKitErrorCode.UPGRADE_REQUIRED_ERROR: return { primary: {
|
|
849
|
+
label: "Upgrade",
|
|
850
|
+
onClick: () => window.open("https://cloud.copilotkit.ai", "_blank", "noopener,noreferrer")
|
|
851
|
+
} };
|
|
852
|
+
default: return;
|
|
853
|
+
}
|
|
854
|
+
};
|
|
855
|
+
|
|
856
|
+
//#endregion
|
|
857
|
+
//#region src/utils/suggestions-constants.ts
|
|
858
|
+
/**
|
|
859
|
+
* Constants for suggestions retry logic
|
|
860
|
+
*/
|
|
861
|
+
const SUGGESTION_RETRY_CONFIG = {
|
|
862
|
+
MAX_RETRIES: 3,
|
|
863
|
+
COOLDOWN_MS: 5e3
|
|
864
|
+
};
|
|
865
|
+
|
|
866
|
+
//#endregion
|
|
867
|
+
//#region src/lib/status-checker.ts
|
|
868
|
+
const STATUS_CHECK_INTERVAL = 1e3 * 60 * 5;
|
|
869
|
+
var StatusChecker = class {
|
|
870
|
+
constructor() {
|
|
871
|
+
this.activeKey = null;
|
|
872
|
+
this.intervalId = null;
|
|
873
|
+
this.instanceCount = 0;
|
|
874
|
+
this.lastResponse = null;
|
|
875
|
+
}
|
|
876
|
+
async start(publicApiKey, onUpdate) {
|
|
877
|
+
this.instanceCount++;
|
|
878
|
+
if (this.activeKey === publicApiKey) return;
|
|
879
|
+
if (this.intervalId) clearInterval(this.intervalId);
|
|
880
|
+
const checkStatus = async () => {
|
|
881
|
+
try {
|
|
882
|
+
const response = await fetch(`${COPILOT_CLOUD_API_URL}/ciu`, {
|
|
883
|
+
method: "GET",
|
|
884
|
+
headers: { [COPILOT_CLOUD_PUBLIC_API_KEY_HEADER]: publicApiKey }
|
|
885
|
+
}).then((response) => response.json());
|
|
886
|
+
this.lastResponse = response;
|
|
887
|
+
onUpdate?.(response);
|
|
888
|
+
return response;
|
|
889
|
+
} catch (error) {
|
|
890
|
+
return null;
|
|
891
|
+
}
|
|
892
|
+
};
|
|
893
|
+
const initialResponse = await checkStatus();
|
|
894
|
+
this.intervalId = setInterval(checkStatus, STATUS_CHECK_INTERVAL);
|
|
895
|
+
this.activeKey = publicApiKey;
|
|
896
|
+
return initialResponse;
|
|
897
|
+
}
|
|
898
|
+
getLastResponse() {
|
|
899
|
+
return this.lastResponse;
|
|
900
|
+
}
|
|
901
|
+
stop() {
|
|
902
|
+
this.instanceCount--;
|
|
903
|
+
if (this.instanceCount === 0) {
|
|
904
|
+
if (this.intervalId) {
|
|
905
|
+
clearInterval(this.intervalId);
|
|
906
|
+
this.intervalId = null;
|
|
907
|
+
this.activeKey = null;
|
|
908
|
+
this.lastResponse = null;
|
|
909
|
+
}
|
|
910
|
+
}
|
|
911
|
+
}
|
|
912
|
+
};
|
|
913
|
+
|
|
914
|
+
//#endregion
|
|
915
|
+
//#region src/components/toast/exclamation-mark-icon.tsx
|
|
916
|
+
const ExclamationMarkIcon = ({ className, style }) => /* @__PURE__ */ jsxs("svg", {
|
|
917
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
918
|
+
width: "24",
|
|
919
|
+
height: "24",
|
|
920
|
+
viewBox: "0 0 24 24",
|
|
921
|
+
fill: "none",
|
|
922
|
+
stroke: "currentColor",
|
|
923
|
+
strokeWidth: "2",
|
|
924
|
+
strokeLinecap: "round",
|
|
925
|
+
strokeLinejoin: "round",
|
|
926
|
+
className: `lucide lucide-circle-alert ${className ? className : ""}`,
|
|
927
|
+
style,
|
|
928
|
+
children: [
|
|
929
|
+
/* @__PURE__ */ jsx("circle", {
|
|
930
|
+
cx: "12",
|
|
931
|
+
cy: "12",
|
|
932
|
+
r: "10"
|
|
933
|
+
}),
|
|
934
|
+
/* @__PURE__ */ jsx("line", {
|
|
935
|
+
x1: "12",
|
|
936
|
+
x2: "12",
|
|
937
|
+
y1: "8",
|
|
938
|
+
y2: "12"
|
|
939
|
+
}),
|
|
940
|
+
/* @__PURE__ */ jsx("line", {
|
|
941
|
+
x1: "12",
|
|
942
|
+
x2: "12.01",
|
|
943
|
+
y1: "16",
|
|
944
|
+
y2: "16"
|
|
945
|
+
})
|
|
946
|
+
]
|
|
947
|
+
});
|
|
948
|
+
|
|
949
|
+
//#endregion
|
|
950
|
+
//#region src/components/error-boundary/error-utils.tsx
|
|
951
|
+
function ErrorToast({ errors }) {
|
|
952
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
953
|
+
style: {
|
|
954
|
+
fontSize: "13px",
|
|
955
|
+
maxWidth: "600px"
|
|
956
|
+
},
|
|
957
|
+
children: [errors.map((error, idx) => {
|
|
958
|
+
const message = ("extensions" in error ? error.extensions?.originalError : {})?.message ?? error.message;
|
|
959
|
+
const code = "extensions" in error ? error.extensions?.code : null;
|
|
960
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
961
|
+
style: {
|
|
962
|
+
marginTop: idx === 0 ? 0 : 10,
|
|
963
|
+
marginBottom: 14
|
|
964
|
+
},
|
|
965
|
+
children: [
|
|
966
|
+
/* @__PURE__ */ jsx(ExclamationMarkIcon, { style: { marginBottom: 4 } }),
|
|
967
|
+
code && /* @__PURE__ */ jsxs("div", {
|
|
968
|
+
style: {
|
|
969
|
+
fontWeight: "600",
|
|
970
|
+
marginBottom: 4
|
|
971
|
+
},
|
|
972
|
+
children: [
|
|
973
|
+
"Copilot Runtime Error:",
|
|
974
|
+
" ",
|
|
975
|
+
/* @__PURE__ */ jsx("span", {
|
|
976
|
+
style: {
|
|
977
|
+
fontFamily: "monospace",
|
|
978
|
+
fontWeight: "normal"
|
|
979
|
+
},
|
|
980
|
+
children: code
|
|
981
|
+
})
|
|
982
|
+
]
|
|
983
|
+
}),
|
|
984
|
+
/* @__PURE__ */ jsx(ReactMarkdown, { children: message })
|
|
985
|
+
]
|
|
986
|
+
}, idx);
|
|
987
|
+
}), /* @__PURE__ */ jsx("div", {
|
|
988
|
+
style: {
|
|
989
|
+
fontSize: "11px",
|
|
990
|
+
opacity: .75
|
|
991
|
+
},
|
|
992
|
+
children: "NOTE: This error only displays during local development."
|
|
993
|
+
})]
|
|
994
|
+
});
|
|
995
|
+
}
|
|
996
|
+
function useErrorToast() {
|
|
997
|
+
const { addToast } = useToast();
|
|
998
|
+
return useCallback((errors) => {
|
|
999
|
+
addToast({
|
|
1000
|
+
type: "error",
|
|
1001
|
+
id: errors.map((err) => {
|
|
1002
|
+
const message = "extensions" in err ? (err.extensions?.originalError)?.message || err.message : err.message;
|
|
1003
|
+
const stack = err.stack || "";
|
|
1004
|
+
return btoa(message + stack).slice(0, 32);
|
|
1005
|
+
}).join("|"),
|
|
1006
|
+
message: /* @__PURE__ */ jsx(ErrorToast, { errors })
|
|
1007
|
+
});
|
|
1008
|
+
}, [addToast]);
|
|
1009
|
+
}
|
|
1010
|
+
function useAsyncCallback(callback, deps) {
|
|
1011
|
+
const addErrorToast = useErrorToast();
|
|
1012
|
+
return useCallback(async (...args) => {
|
|
1013
|
+
try {
|
|
1014
|
+
return await callback(...args);
|
|
1015
|
+
} catch (error) {
|
|
1016
|
+
console.error("Error in async callback:", error);
|
|
1017
|
+
addErrorToast([error]);
|
|
1018
|
+
throw error;
|
|
1019
|
+
}
|
|
1020
|
+
}, deps);
|
|
1021
|
+
}
|
|
1022
|
+
|
|
1023
|
+
//#endregion
|
|
1024
|
+
//#region src/components/error-boundary/error-boundary.tsx
|
|
1025
|
+
const statusChecker = new StatusChecker();
|
|
1026
|
+
var CopilotErrorBoundary = class extends React.Component {
|
|
1027
|
+
constructor(props) {
|
|
1028
|
+
super(props);
|
|
1029
|
+
this.state = { hasError: false };
|
|
1030
|
+
}
|
|
1031
|
+
static getDerivedStateFromError(error) {
|
|
1032
|
+
return {
|
|
1033
|
+
hasError: true,
|
|
1034
|
+
error
|
|
1035
|
+
};
|
|
1036
|
+
}
|
|
1037
|
+
componentDidMount() {
|
|
1038
|
+
if (this.props.publicApiKey) statusChecker.start(this.props.publicApiKey, (newStatus) => {
|
|
1039
|
+
this.setState((prevState) => {
|
|
1040
|
+
if (newStatus?.severity !== prevState.status?.severity) return { status: newStatus ?? void 0 };
|
|
1041
|
+
return null;
|
|
1042
|
+
});
|
|
1043
|
+
});
|
|
1044
|
+
}
|
|
1045
|
+
componentWillUnmount() {
|
|
1046
|
+
statusChecker.stop();
|
|
1047
|
+
}
|
|
1048
|
+
componentDidCatch(error, errorInfo) {
|
|
1049
|
+
console.error("CopilotKit Error:", error, errorInfo);
|
|
1050
|
+
}
|
|
1051
|
+
render() {
|
|
1052
|
+
if (this.state.hasError) {
|
|
1053
|
+
if (this.state.error instanceof CopilotKitError) return /* @__PURE__ */ jsxs(Fragment$1, { children: [this.props.children, this.props.showUsageBanner && /* @__PURE__ */ jsx(UsageBanner, {
|
|
1054
|
+
severity: this.state.status?.severity ?? this.state.error.severity,
|
|
1055
|
+
message: this.state.status?.message ?? this.state.error.message,
|
|
1056
|
+
actions: getErrorActions(this.state.error)
|
|
1057
|
+
})] });
|
|
1058
|
+
throw this.state.error;
|
|
1059
|
+
}
|
|
1060
|
+
return this.props.children;
|
|
1061
|
+
}
|
|
1062
|
+
};
|
|
1063
|
+
|
|
1064
|
+
//#endregion
|
|
1065
|
+
//#region src/context/coagent-state-renders-context.tsx
|
|
1066
|
+
const CoAgentStateRendersContext = createContext(void 0);
|
|
1067
|
+
function CoAgentStateRendersProvider({ children }) {
|
|
1068
|
+
const [coAgentStateRenders, setCoAgentStateRenders] = useState({});
|
|
1069
|
+
const setCoAgentStateRender = useCallback((id, stateRender) => {
|
|
1070
|
+
setCoAgentStateRenders((prevPoints) => ({
|
|
1071
|
+
...prevPoints,
|
|
1072
|
+
[id]: stateRender
|
|
1073
|
+
}));
|
|
1074
|
+
}, []);
|
|
1075
|
+
const removeCoAgentStateRender = useCallback((id) => {
|
|
1076
|
+
setCoAgentStateRenders((prevPoints) => {
|
|
1077
|
+
const newPoints = { ...prevPoints };
|
|
1078
|
+
delete newPoints[id];
|
|
1079
|
+
return newPoints;
|
|
1080
|
+
});
|
|
1081
|
+
}, []);
|
|
1082
|
+
const claimsRef = useRef({});
|
|
1083
|
+
return /* @__PURE__ */ jsx(CoAgentStateRendersContext.Provider, {
|
|
1084
|
+
value: {
|
|
1085
|
+
coAgentStateRenders,
|
|
1086
|
+
setCoAgentStateRender,
|
|
1087
|
+
removeCoAgentStateRender,
|
|
1088
|
+
claimsRef
|
|
1089
|
+
},
|
|
1090
|
+
children
|
|
1091
|
+
});
|
|
1092
|
+
}
|
|
1093
|
+
function useCoAgentStateRenders() {
|
|
1094
|
+
const context = useContext(CoAgentStateRendersContext);
|
|
1095
|
+
if (!context) throw new Error("useCoAgentStateRenders must be used within CoAgentStateRendersProvider");
|
|
1096
|
+
return context;
|
|
1097
|
+
}
|
|
1098
|
+
|
|
1099
|
+
//#endregion
|
|
1100
|
+
//#region src/context/threads-context.tsx
|
|
1101
|
+
const ThreadsContext = createContext(void 0);
|
|
1102
|
+
function ThreadsProvider({ children, threadId: explicitThreadId }) {
|
|
1103
|
+
const [internalThreadId, setThreadId] = useState(() => randomUUID());
|
|
1104
|
+
const threadId = explicitThreadId ?? internalThreadId;
|
|
1105
|
+
return /* @__PURE__ */ jsx(ThreadsContext.Provider, {
|
|
1106
|
+
value: {
|
|
1107
|
+
threadId,
|
|
1108
|
+
setThreadId
|
|
1109
|
+
},
|
|
1110
|
+
children
|
|
1111
|
+
});
|
|
1112
|
+
}
|
|
1113
|
+
function useThreads() {
|
|
1114
|
+
const context = useContext(ThreadsContext);
|
|
1115
|
+
if (!context) throw new Error("useThreads must be used within ThreadsProvider");
|
|
1116
|
+
return context;
|
|
1117
|
+
}
|
|
1118
|
+
|
|
1119
|
+
//#endregion
|
|
1120
|
+
//#region src/hooks/use-coagent-state-render-bridge.helpers.ts
|
|
1121
|
+
let RenderStatus = /* @__PURE__ */ function(RenderStatus) {
|
|
1122
|
+
RenderStatus["InProgress"] = "inProgress";
|
|
1123
|
+
RenderStatus["Complete"] = "complete";
|
|
1124
|
+
return RenderStatus;
|
|
1125
|
+
}({});
|
|
1126
|
+
let ClaimAction = /* @__PURE__ */ function(ClaimAction) {
|
|
1127
|
+
ClaimAction["Create"] = "create";
|
|
1128
|
+
ClaimAction["Override"] = "override";
|
|
1129
|
+
ClaimAction["Existing"] = "existing";
|
|
1130
|
+
ClaimAction["Block"] = "block";
|
|
1131
|
+
return ClaimAction;
|
|
1132
|
+
}({});
|
|
1133
|
+
function getStateWithoutConstantKeys(state) {
|
|
1134
|
+
if (!state) return {};
|
|
1135
|
+
const { messages, tools, copilotkit, ...stateWithoutConstantKeys } = state;
|
|
1136
|
+
return stateWithoutConstantKeys;
|
|
1137
|
+
}
|
|
1138
|
+
function areStatesEquals(a, b) {
|
|
1139
|
+
if (a && !b || !a && b) return false;
|
|
1140
|
+
const { messages, tools, copilotkit, ...aWithoutConstantKeys } = a;
|
|
1141
|
+
const { messages: bMessages, tools: bTools, copilotkit: bCopilotkit, ...bWithoutConstantKeys } = b;
|
|
1142
|
+
return JSON.stringify(aWithoutConstantKeys) === JSON.stringify(bWithoutConstantKeys);
|
|
1143
|
+
}
|
|
1144
|
+
function isPlaceholderMessageId(messageId) {
|
|
1145
|
+
return !!messageId && messageId.startsWith("coagent-state-render-");
|
|
1146
|
+
}
|
|
1147
|
+
function isPlaceholderMessageName(messageName) {
|
|
1148
|
+
return messageName === "coagent-state-render";
|
|
1149
|
+
}
|
|
1150
|
+
function readCachedMessageEntry(entry) {
|
|
1151
|
+
if (!entry || typeof entry !== "object") return {
|
|
1152
|
+
snapshot: entry,
|
|
1153
|
+
runId: void 0
|
|
1154
|
+
};
|
|
1155
|
+
return {
|
|
1156
|
+
snapshot: "snapshot" in entry ? entry.snapshot : entry,
|
|
1157
|
+
runId: "runId" in entry ? entry.runId : void 0
|
|
1158
|
+
};
|
|
1159
|
+
}
|
|
1160
|
+
function getEffectiveRunId({ existingClaimRunId, cachedMessageRunId, runId }) {
|
|
1161
|
+
return existingClaimRunId || cachedMessageRunId || runId || "pending";
|
|
1162
|
+
}
|
|
1163
|
+
/**
|
|
1164
|
+
* Resolve whether a message can claim a render slot.
|
|
1165
|
+
* This is a pure decision function; the caller applies claim mutations.
|
|
1166
|
+
*/
|
|
1167
|
+
function resolveClaim({ claims, context, stateSnapshot }) {
|
|
1168
|
+
const { messageId, stateRenderId, runId, messageIndex } = context;
|
|
1169
|
+
const existing = claims[messageId];
|
|
1170
|
+
if (existing) {
|
|
1171
|
+
const canRender = existing.stateRenderId === stateRenderId;
|
|
1172
|
+
const shouldUpdateRunId = canRender && runId && (!existing.runId || existing.runId === "pending");
|
|
1173
|
+
return {
|
|
1174
|
+
canRender,
|
|
1175
|
+
action: canRender ? ClaimAction.Existing : ClaimAction.Block,
|
|
1176
|
+
updateRunId: shouldUpdateRunId ? runId : void 0
|
|
1177
|
+
};
|
|
1178
|
+
}
|
|
1179
|
+
const normalizedRunId = runId ?? "pending";
|
|
1180
|
+
const renderClaimedByOtherMessageEntry = Object.entries(claims).find(([, claim]) => claim.stateRenderId === stateRenderId && (claim.runId ?? "pending") === normalizedRunId && dataToUUID(getStateWithoutConstantKeys(claim.stateSnapshot)) === dataToUUID(getStateWithoutConstantKeys(stateSnapshot)));
|
|
1181
|
+
const renderClaimedByOtherMessage = renderClaimedByOtherMessageEntry?.[1];
|
|
1182
|
+
const claimedMessageId = renderClaimedByOtherMessageEntry?.[0];
|
|
1183
|
+
if (renderClaimedByOtherMessage) {
|
|
1184
|
+
if (messageIndex !== void 0 && renderClaimedByOtherMessage.messageIndex !== void 0 && messageIndex > renderClaimedByOtherMessage.messageIndex) return {
|
|
1185
|
+
canRender: true,
|
|
1186
|
+
action: ClaimAction.Override,
|
|
1187
|
+
nextClaim: {
|
|
1188
|
+
stateRenderId,
|
|
1189
|
+
runId,
|
|
1190
|
+
messageIndex
|
|
1191
|
+
},
|
|
1192
|
+
lockOthers: runId === renderClaimedByOtherMessage.runId || isPlaceholderMessageId(claimedMessageId)
|
|
1193
|
+
};
|
|
1194
|
+
if (runId && renderClaimedByOtherMessage.runId && runId !== renderClaimedByOtherMessage.runId) return {
|
|
1195
|
+
canRender: true,
|
|
1196
|
+
action: ClaimAction.Override,
|
|
1197
|
+
nextClaim: {
|
|
1198
|
+
stateRenderId,
|
|
1199
|
+
runId,
|
|
1200
|
+
messageIndex
|
|
1201
|
+
},
|
|
1202
|
+
lockOthers: isPlaceholderMessageId(claimedMessageId)
|
|
1203
|
+
};
|
|
1204
|
+
if (isPlaceholderMessageId(claimedMessageId)) return {
|
|
1205
|
+
canRender: true,
|
|
1206
|
+
action: ClaimAction.Override,
|
|
1207
|
+
nextClaim: {
|
|
1208
|
+
stateRenderId,
|
|
1209
|
+
runId,
|
|
1210
|
+
messageIndex
|
|
1211
|
+
},
|
|
1212
|
+
lockOthers: true
|
|
1213
|
+
};
|
|
1214
|
+
if (stateSnapshot && renderClaimedByOtherMessage.stateSnapshot && !areStatesEquals(renderClaimedByOtherMessage.stateSnapshot, stateSnapshot)) return {
|
|
1215
|
+
canRender: true,
|
|
1216
|
+
action: ClaimAction.Override,
|
|
1217
|
+
nextClaim: {
|
|
1218
|
+
stateRenderId,
|
|
1219
|
+
runId
|
|
1220
|
+
}
|
|
1221
|
+
};
|
|
1222
|
+
return {
|
|
1223
|
+
canRender: false,
|
|
1224
|
+
action: ClaimAction.Block
|
|
1225
|
+
};
|
|
1226
|
+
}
|
|
1227
|
+
if (!runId) return {
|
|
1228
|
+
canRender: false,
|
|
1229
|
+
action: ClaimAction.Block
|
|
1230
|
+
};
|
|
1231
|
+
return {
|
|
1232
|
+
canRender: true,
|
|
1233
|
+
action: ClaimAction.Create,
|
|
1234
|
+
nextClaim: {
|
|
1235
|
+
stateRenderId,
|
|
1236
|
+
runId,
|
|
1237
|
+
messageIndex
|
|
1238
|
+
}
|
|
1239
|
+
};
|
|
1240
|
+
}
|
|
1241
|
+
/**
|
|
1242
|
+
* Select the best snapshot to render for this message.
|
|
1243
|
+
* Priority order is:
|
|
1244
|
+
* 1) explicit message snapshot
|
|
1245
|
+
* 2) live agent state (latest assistant only)
|
|
1246
|
+
* 3) cached snapshot for message
|
|
1247
|
+
* 4) cached snapshot for stateRenderId+runId
|
|
1248
|
+
* 5) last cached snapshot for stateRenderId
|
|
1249
|
+
*/
|
|
1250
|
+
function selectSnapshot({ messageId, messageName, allowLiveState, skipLatestCache, stateRenderId, effectiveRunId, stateSnapshotProp, agentState, agentMessages, existingClaim, caches }) {
|
|
1251
|
+
const lastAssistantId = agentMessages ? [...agentMessages].reverse().find((msg) => msg.role === "assistant")?.id : void 0;
|
|
1252
|
+
const latestSnapshot = stateRenderId !== void 0 ? caches.byStateRenderAndRun[`${stateRenderId}::latest`] : void 0;
|
|
1253
|
+
const messageIndex = agentMessages ? agentMessages.findIndex((msg) => msg.id === messageId) : -1;
|
|
1254
|
+
const messageRole = messageIndex >= 0 && agentMessages ? agentMessages[messageIndex]?.role : void 0;
|
|
1255
|
+
let previousUserMessageId;
|
|
1256
|
+
if (messageIndex > 0 && agentMessages) {
|
|
1257
|
+
for (let i = messageIndex - 1; i >= 0; i -= 1) if (agentMessages[i]?.role === "user") {
|
|
1258
|
+
previousUserMessageId = agentMessages[i]?.id;
|
|
1259
|
+
break;
|
|
1260
|
+
}
|
|
1261
|
+
}
|
|
1262
|
+
const liveStateIsStale = stateSnapshotProp === void 0 && latestSnapshot !== void 0 && agentState !== void 0 && areStatesEquals(latestSnapshot, agentState);
|
|
1263
|
+
const shouldUseLiveState = (Boolean(allowLiveState) || !lastAssistantId || messageId === lastAssistantId) && !liveStateIsStale;
|
|
1264
|
+
const snapshot = stateSnapshotProp ? parseJson(stateSnapshotProp, stateSnapshotProp) : shouldUseLiveState ? agentState : void 0;
|
|
1265
|
+
const hasSnapshotKeys = !!(snapshot && Object.keys(snapshot).length > 0);
|
|
1266
|
+
const allowEmptySnapshot = snapshot !== void 0 && !hasSnapshotKeys && (stateSnapshotProp !== void 0 || shouldUseLiveState);
|
|
1267
|
+
const messageCacheEntry = caches.byMessageId[messageId];
|
|
1268
|
+
const cachedMessageSnapshot = readCachedMessageEntry(messageCacheEntry).snapshot;
|
|
1269
|
+
const cacheKey = stateRenderId !== void 0 ? `${stateRenderId}::${effectiveRunId}` : void 0;
|
|
1270
|
+
let cachedSnapshot = cachedMessageSnapshot ?? caches.byMessageId[messageId];
|
|
1271
|
+
if (cachedSnapshot === void 0 && cacheKey && caches.byStateRenderAndRun[cacheKey] !== void 0) cachedSnapshot = caches.byStateRenderAndRun[cacheKey];
|
|
1272
|
+
if (cachedSnapshot === void 0 && stateRenderId && previousUserMessageId && caches.byStateRenderAndRun[`${stateRenderId}::pending:${previousUserMessageId}`] !== void 0) cachedSnapshot = caches.byStateRenderAndRun[`${stateRenderId}::pending:${previousUserMessageId}`];
|
|
1273
|
+
if (cachedSnapshot === void 0 && !skipLatestCache && stateRenderId && messageRole !== "assistant" && (stateSnapshotProp !== void 0 || agentState && Object.keys(agentState).length > 0)) cachedSnapshot = caches.byStateRenderAndRun[`${stateRenderId}::latest`];
|
|
1274
|
+
const snapshotForClaim = existingClaim?.locked ? existingClaim.stateSnapshot ?? cachedSnapshot : hasSnapshotKeys ? snapshot : existingClaim?.stateSnapshot ?? cachedSnapshot;
|
|
1275
|
+
return {
|
|
1276
|
+
snapshot,
|
|
1277
|
+
hasSnapshotKeys,
|
|
1278
|
+
cachedSnapshot,
|
|
1279
|
+
allowEmptySnapshot,
|
|
1280
|
+
snapshotForClaim
|
|
1281
|
+
};
|
|
1282
|
+
}
|
|
1283
|
+
|
|
1284
|
+
//#endregion
|
|
1285
|
+
//#region src/hooks/use-coagent-state-render-registry.ts
|
|
1286
|
+
const LAST_SNAPSHOTS_BY_RENDER_AND_RUN = "__lastSnapshotsByStateRenderIdAndRun";
|
|
1287
|
+
const LAST_SNAPSHOTS_BY_MESSAGE = "__lastSnapshotsByMessageId";
|
|
1288
|
+
function getClaimsStore(claimsRef) {
|
|
1289
|
+
return claimsRef.current;
|
|
1290
|
+
}
|
|
1291
|
+
function getSnapshotCaches(claimsRef) {
|
|
1292
|
+
const store = getClaimsStore(claimsRef);
|
|
1293
|
+
return {
|
|
1294
|
+
byStateRenderAndRun: store[LAST_SNAPSHOTS_BY_RENDER_AND_RUN] ?? {},
|
|
1295
|
+
byMessageId: store[LAST_SNAPSHOTS_BY_MESSAGE] ?? {}
|
|
1296
|
+
};
|
|
1297
|
+
}
|
|
1298
|
+
function useStateRenderRegistry({ agentId, stateRenderId, message, messageIndex, stateSnapshot, agentState, agentMessages, claimsRef }) {
|
|
1299
|
+
const store = getClaimsStore(claimsRef);
|
|
1300
|
+
const runId = message.runId;
|
|
1301
|
+
const cachedMessageEntry = store[LAST_SNAPSHOTS_BY_MESSAGE]?.[message.id];
|
|
1302
|
+
const { runId: cachedMessageRunId } = readCachedMessageEntry(cachedMessageEntry);
|
|
1303
|
+
const existingClaimRunId = claimsRef.current[message.id]?.runId;
|
|
1304
|
+
const effectiveRunId = getEffectiveRunId({
|
|
1305
|
+
existingClaimRunId,
|
|
1306
|
+
cachedMessageRunId,
|
|
1307
|
+
runId
|
|
1308
|
+
});
|
|
1309
|
+
useEffect(() => {
|
|
1310
|
+
return () => {
|
|
1311
|
+
const existingClaim = claimsRef.current[message.id];
|
|
1312
|
+
if (existingClaim?.stateSnapshot && Object.keys(existingClaim.stateSnapshot).length > 0) {
|
|
1313
|
+
const snapshotCache = { ...store[LAST_SNAPSHOTS_BY_RENDER_AND_RUN] ?? {} };
|
|
1314
|
+
const cacheKey = `${existingClaim.stateRenderId}::${existingClaim.runId ?? "pending"}`;
|
|
1315
|
+
snapshotCache[cacheKey] = existingClaim.stateSnapshot;
|
|
1316
|
+
snapshotCache[`${existingClaim.stateRenderId}::latest`] = existingClaim.stateSnapshot;
|
|
1317
|
+
store[LAST_SNAPSHOTS_BY_RENDER_AND_RUN] = snapshotCache;
|
|
1318
|
+
const messageCache = { ...store[LAST_SNAPSHOTS_BY_MESSAGE] ?? {} };
|
|
1319
|
+
messageCache[message.id] = {
|
|
1320
|
+
snapshot: existingClaim.stateSnapshot,
|
|
1321
|
+
runId: existingClaim.runId ?? effectiveRunId
|
|
1322
|
+
};
|
|
1323
|
+
store[LAST_SNAPSHOTS_BY_MESSAGE] = messageCache;
|
|
1324
|
+
}
|
|
1325
|
+
delete claimsRef.current[message.id];
|
|
1326
|
+
};
|
|
1327
|
+
}, [
|
|
1328
|
+
claimsRef,
|
|
1329
|
+
effectiveRunId,
|
|
1330
|
+
message.id
|
|
1331
|
+
]);
|
|
1332
|
+
if (!stateRenderId) return { canRender: false };
|
|
1333
|
+
const caches = getSnapshotCaches(claimsRef);
|
|
1334
|
+
const existingClaim = claimsRef.current[message.id];
|
|
1335
|
+
const { snapshot, hasSnapshotKeys, allowEmptySnapshot, snapshotForClaim } = selectSnapshot({
|
|
1336
|
+
messageId: message.id,
|
|
1337
|
+
messageName: message.name,
|
|
1338
|
+
allowLiveState: isPlaceholderMessageName(message.name) || isPlaceholderMessageId(message.id),
|
|
1339
|
+
skipLatestCache: isPlaceholderMessageName(message.name) || isPlaceholderMessageId(message.id),
|
|
1340
|
+
stateRenderId,
|
|
1341
|
+
effectiveRunId,
|
|
1342
|
+
stateSnapshotProp: stateSnapshot,
|
|
1343
|
+
agentState,
|
|
1344
|
+
agentMessages,
|
|
1345
|
+
existingClaim,
|
|
1346
|
+
caches
|
|
1347
|
+
});
|
|
1348
|
+
const resolution = resolveClaim({
|
|
1349
|
+
claims: claimsRef.current,
|
|
1350
|
+
context: {
|
|
1351
|
+
agentId,
|
|
1352
|
+
messageId: message.id,
|
|
1353
|
+
stateRenderId,
|
|
1354
|
+
runId: effectiveRunId,
|
|
1355
|
+
messageIndex
|
|
1356
|
+
},
|
|
1357
|
+
stateSnapshot: snapshotForClaim
|
|
1358
|
+
});
|
|
1359
|
+
if (resolution.action === ClaimAction.Block) return { canRender: false };
|
|
1360
|
+
if (resolution.updateRunId && claimsRef.current[message.id]) claimsRef.current[message.id].runId = resolution.updateRunId;
|
|
1361
|
+
if (resolution.nextClaim) claimsRef.current[message.id] = resolution.nextClaim;
|
|
1362
|
+
if (resolution.lockOthers) Object.entries(claimsRef.current).forEach(([id, claim]) => {
|
|
1363
|
+
if (id !== message.id && claim.stateRenderId === stateRenderId) claim.locked = true;
|
|
1364
|
+
});
|
|
1365
|
+
if (existingClaim && !existingClaim.locked && agentMessages?.length) {
|
|
1366
|
+
const indexInAgentMessages = agentMessages.findIndex((msg) => msg.id === message.id);
|
|
1367
|
+
if (indexInAgentMessages >= 0 && indexInAgentMessages < agentMessages.length - 1) existingClaim.locked = true;
|
|
1368
|
+
}
|
|
1369
|
+
const existingSnapshot = claimsRef.current[message.id].stateSnapshot;
|
|
1370
|
+
const snapshotChanged = stateSnapshot && existingSnapshot !== void 0 && !areStatesEquals(existingSnapshot, snapshot);
|
|
1371
|
+
if (snapshot && (stateSnapshot || hasSnapshotKeys || allowEmptySnapshot) && (!claimsRef.current[message.id].locked || snapshotChanged)) {
|
|
1372
|
+
if (!claimsRef.current[message.id].locked || snapshotChanged) {
|
|
1373
|
+
claimsRef.current[message.id].stateSnapshot = snapshot;
|
|
1374
|
+
const snapshotCache = { ...store[LAST_SNAPSHOTS_BY_RENDER_AND_RUN] ?? {} };
|
|
1375
|
+
const cacheKey = `${stateRenderId}::${effectiveRunId}`;
|
|
1376
|
+
snapshotCache[cacheKey] = snapshot;
|
|
1377
|
+
snapshotCache[`${stateRenderId}::latest`] = snapshot;
|
|
1378
|
+
store[LAST_SNAPSHOTS_BY_RENDER_AND_RUN] = snapshotCache;
|
|
1379
|
+
const messageCache = { ...store[LAST_SNAPSHOTS_BY_MESSAGE] ?? {} };
|
|
1380
|
+
messageCache[message.id] = {
|
|
1381
|
+
snapshot,
|
|
1382
|
+
runId: effectiveRunId
|
|
1383
|
+
};
|
|
1384
|
+
store[LAST_SNAPSHOTS_BY_MESSAGE] = messageCache;
|
|
1385
|
+
if (stateSnapshot) claimsRef.current[message.id].locked = true;
|
|
1386
|
+
}
|
|
1387
|
+
} else if (snapshotForClaim) {
|
|
1388
|
+
if (!claimsRef.current[message.id].stateSnapshot) {
|
|
1389
|
+
claimsRef.current[message.id].stateSnapshot = snapshotForClaim;
|
|
1390
|
+
const snapshotCache = { ...store[LAST_SNAPSHOTS_BY_RENDER_AND_RUN] ?? {} };
|
|
1391
|
+
const cacheKey = `${stateRenderId}::${effectiveRunId}`;
|
|
1392
|
+
snapshotCache[cacheKey] = snapshotForClaim;
|
|
1393
|
+
snapshotCache[`${stateRenderId}::latest`] = snapshotForClaim;
|
|
1394
|
+
store[LAST_SNAPSHOTS_BY_RENDER_AND_RUN] = snapshotCache;
|
|
1395
|
+
const messageCache = { ...store[LAST_SNAPSHOTS_BY_MESSAGE] ?? {} };
|
|
1396
|
+
messageCache[message.id] = {
|
|
1397
|
+
snapshot: snapshotForClaim,
|
|
1398
|
+
runId: effectiveRunId
|
|
1399
|
+
};
|
|
1400
|
+
store[LAST_SNAPSHOTS_BY_MESSAGE] = messageCache;
|
|
1401
|
+
}
|
|
1402
|
+
}
|
|
1403
|
+
return { canRender: true };
|
|
1404
|
+
}
|
|
1405
|
+
|
|
1406
|
+
//#endregion
|
|
1407
|
+
//#region src/hooks/use-coagent-state-render-bridge.tsx
|
|
1408
|
+
function useCoagentStateRenderBridge(agentId, props) {
|
|
1409
|
+
const { stateSnapshot, message } = props;
|
|
1410
|
+
const { coAgentStateRenders, claimsRef } = useCoAgentStateRenders();
|
|
1411
|
+
const { agent } = useAgent({ agentId });
|
|
1412
|
+
const [nodeName, setNodeName] = useState(void 0);
|
|
1413
|
+
const [, forceUpdate] = useState(0);
|
|
1414
|
+
useEffect(() => {
|
|
1415
|
+
if (!agent) return;
|
|
1416
|
+
const { unsubscribe } = agent.subscribe({
|
|
1417
|
+
onStateChanged: () => {
|
|
1418
|
+
forceUpdate((value) => value + 1);
|
|
1419
|
+
},
|
|
1420
|
+
onStepStartedEvent: ({ event }) => {
|
|
1421
|
+
if (event.stepName !== nodeName) setNodeName(event.stepName);
|
|
1422
|
+
},
|
|
1423
|
+
onStepFinishedEvent: ({ event }) => {
|
|
1424
|
+
if (event.stepName === nodeName) setNodeName(void 0);
|
|
1425
|
+
}
|
|
1426
|
+
});
|
|
1427
|
+
return () => {
|
|
1428
|
+
unsubscribe();
|
|
1429
|
+
};
|
|
1430
|
+
}, [agentId, nodeName]);
|
|
1431
|
+
const getStateRender = useCallback((messageId) => {
|
|
1432
|
+
return Object.entries(coAgentStateRenders).find(([stateRenderId, stateRender]) => {
|
|
1433
|
+
if (claimsRef.current[messageId]) return stateRenderId === claimsRef.current[messageId].stateRenderId;
|
|
1434
|
+
const matchingAgentName = stateRender.name === agentId;
|
|
1435
|
+
const matchesNodeContext = stateRender.nodeName ? stateRender.nodeName === nodeName : true;
|
|
1436
|
+
return matchingAgentName && matchesNodeContext;
|
|
1437
|
+
});
|
|
1438
|
+
}, [
|
|
1439
|
+
coAgentStateRenders,
|
|
1440
|
+
nodeName,
|
|
1441
|
+
agentId
|
|
1442
|
+
]);
|
|
1443
|
+
const stateRenderEntry = useMemo(() => getStateRender(message.id), [getStateRender, message.id]);
|
|
1444
|
+
const stateRenderId = stateRenderEntry?.[0];
|
|
1445
|
+
const stateRender = stateRenderEntry?.[1];
|
|
1446
|
+
const { canRender } = useStateRenderRegistry({
|
|
1447
|
+
agentId,
|
|
1448
|
+
stateRenderId,
|
|
1449
|
+
message: {
|
|
1450
|
+
...message,
|
|
1451
|
+
runId: props.runId ?? message.runId
|
|
1452
|
+
},
|
|
1453
|
+
messageIndex: props.messageIndex,
|
|
1454
|
+
stateSnapshot,
|
|
1455
|
+
agentState: agent?.state,
|
|
1456
|
+
agentMessages: agent?.messages,
|
|
1457
|
+
claimsRef
|
|
1458
|
+
});
|
|
1459
|
+
return useMemo(() => {
|
|
1460
|
+
if (!stateRender || !stateRenderId) return null;
|
|
1461
|
+
if (!canRender) return null;
|
|
1462
|
+
if (stateRender.handler) stateRender.handler({
|
|
1463
|
+
state: stateSnapshot ? parseJson(stateSnapshot, stateSnapshot) : agent?.state ?? {},
|
|
1464
|
+
nodeName: nodeName ?? ""
|
|
1465
|
+
});
|
|
1466
|
+
if (stateRender.render) {
|
|
1467
|
+
const status = agent?.isRunning ? RenderStatus.InProgress : RenderStatus.Complete;
|
|
1468
|
+
if (typeof stateRender.render === "string") return stateRender.render;
|
|
1469
|
+
return stateRender.render({
|
|
1470
|
+
status,
|
|
1471
|
+
state: claimsRef.current[message.id].stateSnapshot ?? {},
|
|
1472
|
+
nodeName: nodeName ?? ""
|
|
1473
|
+
});
|
|
1474
|
+
}
|
|
1475
|
+
}, [
|
|
1476
|
+
stateRender,
|
|
1477
|
+
stateRenderId,
|
|
1478
|
+
agent?.state,
|
|
1479
|
+
agent?.isRunning,
|
|
1480
|
+
nodeName,
|
|
1481
|
+
message.id,
|
|
1482
|
+
stateSnapshot,
|
|
1483
|
+
canRender
|
|
1484
|
+
]);
|
|
1485
|
+
}
|
|
1486
|
+
function CoAgentStateRenderBridge(props) {
|
|
1487
|
+
return useCoagentStateRenderBridge(props.agentId, props);
|
|
1488
|
+
}
|
|
1489
|
+
|
|
1490
|
+
//#endregion
|
|
1491
|
+
//#region src/components/CopilotListeners.tsx
|
|
1492
|
+
const usePredictStateSubscription = (agent) => {
|
|
1493
|
+
const predictStateToolsRef = useRef([]);
|
|
1494
|
+
const getSubscriber = useCallback((agent) => ({
|
|
1495
|
+
onCustomEvent: ({ event }) => {
|
|
1496
|
+
if (event.name === "PredictState") predictStateToolsRef.current = event.value;
|
|
1497
|
+
},
|
|
1498
|
+
onToolCallArgsEvent: ({ partialToolCallArgs, toolCallName }) => {
|
|
1499
|
+
predictStateToolsRef.current.forEach((t) => {
|
|
1500
|
+
if (t?.tool !== toolCallName) return;
|
|
1501
|
+
const emittedState = typeof partialToolCallArgs === "string" ? parseJson(partialToolCallArgs, partialToolCallArgs) : partialToolCallArgs;
|
|
1502
|
+
agent.setState({ [t.state_key]: emittedState[t.state_key] });
|
|
1503
|
+
});
|
|
1504
|
+
}
|
|
1505
|
+
}), []);
|
|
1506
|
+
useEffect(() => {
|
|
1507
|
+
if (!agent) return;
|
|
1508
|
+
const subscriber = getSubscriber(agent);
|
|
1509
|
+
const { unsubscribe } = agent.subscribe(subscriber);
|
|
1510
|
+
return () => {
|
|
1511
|
+
unsubscribe();
|
|
1512
|
+
};
|
|
1513
|
+
}, [agent, getSubscriber]);
|
|
1514
|
+
};
|
|
1515
|
+
function CopilotListeners() {
|
|
1516
|
+
const { copilotkit } = useCopilotKit();
|
|
1517
|
+
const resolvedAgentId = useCopilotChatConfiguration()?.agentId;
|
|
1518
|
+
const { setBannerError } = useToast();
|
|
1519
|
+
const { agent } = useAgent({ agentId: resolvedAgentId });
|
|
1520
|
+
usePredictStateSubscription(agent);
|
|
1521
|
+
useEffect(() => {
|
|
1522
|
+
const subscription = copilotkit.subscribe({ onError: ({ error }) => {
|
|
1523
|
+
setBannerError(new CopilotKitLowLevelError({
|
|
1524
|
+
error,
|
|
1525
|
+
message: error.message,
|
|
1526
|
+
url: typeof window !== "undefined" ? window.location.href : ""
|
|
1527
|
+
}));
|
|
1528
|
+
} });
|
|
1529
|
+
return () => {
|
|
1530
|
+
subscription.unsubscribe();
|
|
1531
|
+
};
|
|
1532
|
+
}, [copilotkit?.subscribe]);
|
|
1533
|
+
return null;
|
|
1534
|
+
}
|
|
1535
|
+
|
|
1536
|
+
//#endregion
|
|
1537
|
+
//#region src/components/copilot-provider/copilotkit.tsx
|
|
1538
|
+
/**
|
|
1539
|
+
* This component will typically wrap your entire application (or a sub-tree of your application where you want to have a copilot). It provides the copilot context to all other components and hooks.
|
|
1540
|
+
*
|
|
1541
|
+
* ## Example
|
|
1542
|
+
*
|
|
1543
|
+
* You can find more information about self-hosting CopilotKit [here](/guides/self-hosting).
|
|
1544
|
+
*
|
|
1545
|
+
* ```tsx
|
|
1546
|
+
* import { CopilotKit } from "@copilotkit/react-core";
|
|
1547
|
+
*
|
|
1548
|
+
* <CopilotKit runtimeUrl="<your-runtime-url>">
|
|
1549
|
+
* // ... your app ...
|
|
1550
|
+
* </CopilotKit>
|
|
1551
|
+
* ```
|
|
1552
|
+
*/
|
|
1553
|
+
function CopilotKit({ children, ...props }) {
|
|
1554
|
+
const enabled = shouldShowDevConsole(props.showDevConsole);
|
|
1555
|
+
const showInspector = shouldShowDevConsole(props.enableInspector);
|
|
1556
|
+
const publicApiKey = props.publicApiKey || props.publicLicenseKey;
|
|
1557
|
+
const renderArr = useMemo(() => [{ render: CoAgentStateRenderBridge }], []);
|
|
1558
|
+
return /* @__PURE__ */ jsx(ToastProvider, {
|
|
1559
|
+
enabled,
|
|
1560
|
+
children: /* @__PURE__ */ jsx(CopilotErrorBoundary, {
|
|
1561
|
+
publicApiKey,
|
|
1562
|
+
showUsageBanner: enabled,
|
|
1563
|
+
children: /* @__PURE__ */ jsx(ThreadsProvider, {
|
|
1564
|
+
threadId: props.threadId,
|
|
1565
|
+
children: /* @__PURE__ */ jsx(CopilotKitProvider, {
|
|
1566
|
+
...props,
|
|
1567
|
+
showDevConsole: showInspector,
|
|
1568
|
+
renderCustomMessages: renderArr,
|
|
1569
|
+
useSingleEndpoint: true,
|
|
1570
|
+
children: /* @__PURE__ */ jsx(CopilotKitInternal, {
|
|
1571
|
+
...props,
|
|
1572
|
+
children
|
|
1573
|
+
})
|
|
1574
|
+
})
|
|
1575
|
+
})
|
|
1576
|
+
})
|
|
1577
|
+
});
|
|
1578
|
+
}
|
|
1579
|
+
/**
|
|
1580
|
+
* Bridge component that subscribes to v2.x copilotkit core error events
|
|
1581
|
+
* and forwards them to v1.x error handling system.
|
|
1582
|
+
* This ensures only ONE subscription exists regardless of how many times
|
|
1583
|
+
* Chat components are rendered.
|
|
1584
|
+
*/
|
|
1585
|
+
function CopilotKitErrorBridge() {
|
|
1586
|
+
const { copilotkit } = useCopilotKit();
|
|
1587
|
+
const { onError, copilotApiConfig } = useCopilotContext();
|
|
1588
|
+
useEffect(() => {
|
|
1589
|
+
if (!copilotkit) return;
|
|
1590
|
+
const subscription = copilotkit.subscribe({ onError: async (event) => {
|
|
1591
|
+
const errorEvent = {
|
|
1592
|
+
type: "error",
|
|
1593
|
+
timestamp: Date.now(),
|
|
1594
|
+
context: {
|
|
1595
|
+
source: "agent",
|
|
1596
|
+
request: {
|
|
1597
|
+
operation: event.code || "unknown",
|
|
1598
|
+
url: copilotApiConfig?.chatApiEndpoint,
|
|
1599
|
+
startTime: Date.now()
|
|
1600
|
+
},
|
|
1601
|
+
technical: {
|
|
1602
|
+
environment: "browser",
|
|
1603
|
+
userAgent: typeof navigator !== "undefined" ? navigator.userAgent : void 0,
|
|
1604
|
+
stackTrace: event.error.stack
|
|
1605
|
+
},
|
|
1606
|
+
...event.context
|
|
1607
|
+
},
|
|
1608
|
+
error: event.error
|
|
1609
|
+
};
|
|
1610
|
+
try {
|
|
1611
|
+
await onError(errorEvent);
|
|
1612
|
+
} catch (handlerError) {
|
|
1613
|
+
console.error("Error in onError handler:", handlerError);
|
|
1614
|
+
}
|
|
1615
|
+
} });
|
|
1616
|
+
return () => {
|
|
1617
|
+
subscription.unsubscribe();
|
|
1618
|
+
};
|
|
1619
|
+
}, [
|
|
1620
|
+
copilotkit,
|
|
1621
|
+
onError,
|
|
1622
|
+
copilotApiConfig
|
|
1623
|
+
]);
|
|
1624
|
+
return null;
|
|
1625
|
+
}
|
|
1626
|
+
function CopilotKitInternal(cpkProps) {
|
|
1627
|
+
const { children, ...props } = cpkProps;
|
|
1628
|
+
/**
|
|
1629
|
+
* This will throw an error if the props are invalid.
|
|
1630
|
+
*/
|
|
1631
|
+
validateProps(cpkProps);
|
|
1632
|
+
const publicApiKey = props.publicLicenseKey || props.publicApiKey;
|
|
1633
|
+
const chatApiEndpoint = props.runtimeUrl || COPILOT_CLOUD_CHAT_URL;
|
|
1634
|
+
const [actions, setActions] = useState({});
|
|
1635
|
+
const [registeredActionConfigs, setRegisteredActionConfigs] = useState(/* @__PURE__ */ new Map());
|
|
1636
|
+
const chatComponentsCache = useRef({
|
|
1637
|
+
actions: {},
|
|
1638
|
+
coAgentStateRenders: {}
|
|
1639
|
+
});
|
|
1640
|
+
const { addElement, removeElement, printTree, getAllElements } = useTree();
|
|
1641
|
+
const [isLoading, setIsLoading] = useState(false);
|
|
1642
|
+
const [chatInstructions, setChatInstructions] = useState("");
|
|
1643
|
+
const [authStates, setAuthStates] = useState({});
|
|
1644
|
+
const [extensions, setExtensions] = useState({});
|
|
1645
|
+
const [additionalInstructions, setAdditionalInstructions] = useState([]);
|
|
1646
|
+
const { addElement: addDocument, removeElement: removeDocument, allElements: allDocuments } = useFlatCategoryStore();
|
|
1647
|
+
const setAction = useCallback((id, action) => {
|
|
1648
|
+
setActions((prevPoints) => {
|
|
1649
|
+
return {
|
|
1650
|
+
...prevPoints,
|
|
1651
|
+
[id]: action
|
|
1652
|
+
};
|
|
1653
|
+
});
|
|
1654
|
+
}, []);
|
|
1655
|
+
const removeAction = useCallback((id) => {
|
|
1656
|
+
setActions((prevPoints) => {
|
|
1657
|
+
const newPoints = { ...prevPoints };
|
|
1658
|
+
delete newPoints[id];
|
|
1659
|
+
return newPoints;
|
|
1660
|
+
});
|
|
1661
|
+
}, []);
|
|
1662
|
+
const getContextString = useCallback((documents, categories) => {
|
|
1663
|
+
return `${documents.map((document) => {
|
|
1664
|
+
return `${document.name} (${document.sourceApplication}):\n${document.getContents()}`;
|
|
1665
|
+
}).join("\n\n")}\n\n${printTree(categories)}`;
|
|
1666
|
+
}, [printTree]);
|
|
1667
|
+
const addContext = useCallback((context, parentId, categories = defaultCopilotContextCategories) => {
|
|
1668
|
+
return addElement(context, categories, parentId);
|
|
1669
|
+
}, [addElement]);
|
|
1670
|
+
const removeContext = useCallback((id) => {
|
|
1671
|
+
removeElement(id);
|
|
1672
|
+
}, [removeElement]);
|
|
1673
|
+
const getAllContext = useCallback(() => {
|
|
1674
|
+
return getAllElements();
|
|
1675
|
+
}, [getAllElements]);
|
|
1676
|
+
const getFunctionCallHandler = useCallback((customEntryPoints) => {
|
|
1677
|
+
return entryPointsToFunctionCallHandler(Object.values(customEntryPoints || actions));
|
|
1678
|
+
}, [actions]);
|
|
1679
|
+
const getDocumentsContext = useCallback((categories) => {
|
|
1680
|
+
return allDocuments(categories);
|
|
1681
|
+
}, [allDocuments]);
|
|
1682
|
+
const addDocumentContext = useCallback((documentPointer, categories = defaultCopilotContextCategories) => {
|
|
1683
|
+
return addDocument(documentPointer, categories);
|
|
1684
|
+
}, [addDocument]);
|
|
1685
|
+
const removeDocumentContext = useCallback((documentId) => {
|
|
1686
|
+
removeDocument(documentId);
|
|
1687
|
+
}, [removeDocument]);
|
|
1688
|
+
const copilotApiConfig = useMemo(() => {
|
|
1689
|
+
let cloud = void 0;
|
|
1690
|
+
if (publicApiKey) cloud = { guardrails: { input: { restrictToTopic: {
|
|
1691
|
+
enabled: Boolean(props.guardrails_c),
|
|
1692
|
+
validTopics: props.guardrails_c?.validTopics || [],
|
|
1693
|
+
invalidTopics: props.guardrails_c?.invalidTopics || []
|
|
1694
|
+
} } } };
|
|
1695
|
+
return {
|
|
1696
|
+
publicApiKey,
|
|
1697
|
+
...cloud ? { cloud } : {},
|
|
1698
|
+
chatApiEndpoint,
|
|
1699
|
+
headers: props.headers || {},
|
|
1700
|
+
properties: props.properties || {},
|
|
1701
|
+
transcribeAudioUrl: props.transcribeAudioUrl,
|
|
1702
|
+
textToSpeechUrl: props.textToSpeechUrl,
|
|
1703
|
+
credentials: props.credentials
|
|
1704
|
+
};
|
|
1705
|
+
}, [
|
|
1706
|
+
publicApiKey,
|
|
1707
|
+
props.headers,
|
|
1708
|
+
props.properties,
|
|
1709
|
+
props.transcribeAudioUrl,
|
|
1710
|
+
props.textToSpeechUrl,
|
|
1711
|
+
props.credentials,
|
|
1712
|
+
props.cloudRestrictToTopic,
|
|
1713
|
+
props.guardrails_c
|
|
1714
|
+
]);
|
|
1715
|
+
useMemo(() => {
|
|
1716
|
+
const authHeaders = Object.values(authStates || {}).reduce((acc, state) => {
|
|
1717
|
+
if (state.status === "authenticated" && state.authHeaders) return {
|
|
1718
|
+
...acc,
|
|
1719
|
+
...Object.entries(state.authHeaders).reduce((headers, [key, value]) => ({
|
|
1720
|
+
...headers,
|
|
1721
|
+
[key.startsWith("X-Custom-") ? key : `X-Custom-${key}`]: value
|
|
1722
|
+
}), {})
|
|
1723
|
+
};
|
|
1724
|
+
return acc;
|
|
1725
|
+
}, {});
|
|
1726
|
+
return {
|
|
1727
|
+
...copilotApiConfig.headers || {},
|
|
1728
|
+
...copilotApiConfig.publicApiKey ? { [COPILOT_CLOUD_PUBLIC_API_KEY_HEADER]: copilotApiConfig.publicApiKey } : {},
|
|
1729
|
+
...authHeaders
|
|
1730
|
+
};
|
|
1731
|
+
}, [
|
|
1732
|
+
copilotApiConfig.headers,
|
|
1733
|
+
copilotApiConfig.publicApiKey,
|
|
1734
|
+
authStates
|
|
1735
|
+
]);
|
|
1736
|
+
const [internalErrorHandlers, _setInternalErrorHandler] = useState({});
|
|
1737
|
+
const setInternalErrorHandler = useCallback((handler) => {
|
|
1738
|
+
_setInternalErrorHandler((prev) => ({
|
|
1739
|
+
...prev,
|
|
1740
|
+
...handler
|
|
1741
|
+
}));
|
|
1742
|
+
}, []);
|
|
1743
|
+
const removeInternalErrorHandler = useCallback((key) => {
|
|
1744
|
+
_setInternalErrorHandler((prev) => {
|
|
1745
|
+
const { [key]: _removed, ...rest } = prev;
|
|
1746
|
+
return rest;
|
|
1747
|
+
});
|
|
1748
|
+
}, []);
|
|
1749
|
+
const onErrorRef = useRef(props.onError);
|
|
1750
|
+
useEffect(() => {
|
|
1751
|
+
onErrorRef.current = props.onError;
|
|
1752
|
+
}, [props.onError]);
|
|
1753
|
+
const internalHandlersRef = useRef({});
|
|
1754
|
+
useEffect(() => {
|
|
1755
|
+
internalHandlersRef.current = internalErrorHandlers;
|
|
1756
|
+
}, [internalErrorHandlers]);
|
|
1757
|
+
const handleErrors = useCallback(async (error) => {
|
|
1758
|
+
if (copilotApiConfig.publicApiKey && onErrorRef.current) try {
|
|
1759
|
+
await onErrorRef.current(error);
|
|
1760
|
+
} catch (e) {
|
|
1761
|
+
console.error("Error in public onError handler:", e);
|
|
1762
|
+
}
|
|
1763
|
+
const handlers = Object.values(internalHandlersRef.current);
|
|
1764
|
+
await Promise.all(handlers.map((h) => Promise.resolve(h(error)).catch((e) => console.error("Error in internal error handler:", e))));
|
|
1765
|
+
}, [copilotApiConfig.publicApiKey]);
|
|
1766
|
+
const [chatSuggestionConfiguration, setChatSuggestionConfiguration] = useState({});
|
|
1767
|
+
const addChatSuggestionConfiguration = useCallback((id, suggestion) => {
|
|
1768
|
+
setChatSuggestionConfiguration((prev) => ({
|
|
1769
|
+
...prev,
|
|
1770
|
+
[id]: suggestion
|
|
1771
|
+
}));
|
|
1772
|
+
}, [setChatSuggestionConfiguration]);
|
|
1773
|
+
const removeChatSuggestionConfiguration = useCallback((id) => {
|
|
1774
|
+
setChatSuggestionConfiguration((prev) => {
|
|
1775
|
+
const { [id]: _, ...rest } = prev;
|
|
1776
|
+
return rest;
|
|
1777
|
+
});
|
|
1778
|
+
}, [setChatSuggestionConfiguration]);
|
|
1779
|
+
const [availableAgents, setAvailableAgents] = useState([]);
|
|
1780
|
+
const [coagentStates, setCoagentStates] = useState({});
|
|
1781
|
+
const coagentStatesRef = useRef({});
|
|
1782
|
+
const setCoagentStatesWithRef = useCallback((value) => {
|
|
1783
|
+
const newValue = typeof value === "function" ? value(coagentStatesRef.current) : value;
|
|
1784
|
+
coagentStatesRef.current = newValue;
|
|
1785
|
+
setCoagentStates((prev) => {
|
|
1786
|
+
return newValue;
|
|
1787
|
+
});
|
|
1788
|
+
}, []);
|
|
1789
|
+
let initialAgentSession = null;
|
|
1790
|
+
if (props.agent) initialAgentSession = { agentName: props.agent };
|
|
1791
|
+
const [agentSession, setAgentSession] = useState(initialAgentSession);
|
|
1792
|
+
useEffect(() => {
|
|
1793
|
+
if (props.agent) setAgentSession({ agentName: props.agent });
|
|
1794
|
+
else setAgentSession(null);
|
|
1795
|
+
}, [props.agent]);
|
|
1796
|
+
const { threadId, setThreadId: setInternalThreadId } = useThreads();
|
|
1797
|
+
const setThreadId = useCallback((value) => {
|
|
1798
|
+
if (props.threadId) throw new Error("Cannot call setThreadId() when threadId is provided via props.");
|
|
1799
|
+
setInternalThreadId(value);
|
|
1800
|
+
}, [props.threadId]);
|
|
1801
|
+
const [runId, setRunId] = useState(null);
|
|
1802
|
+
const chatAbortControllerRef = useRef(null);
|
|
1803
|
+
const showDevConsole = shouldShowDevConsole(props.showDevConsole);
|
|
1804
|
+
const [interruptActions, _setInterruptActions] = useState({});
|
|
1805
|
+
const setInterruptAction = useCallback((action) => {
|
|
1806
|
+
_setInterruptActions((prev) => {
|
|
1807
|
+
if (action == null || !action.id) return prev;
|
|
1808
|
+
return {
|
|
1809
|
+
...prev,
|
|
1810
|
+
[action.id]: {
|
|
1811
|
+
...prev[action.id] ?? {},
|
|
1812
|
+
...action
|
|
1813
|
+
}
|
|
1814
|
+
};
|
|
1815
|
+
});
|
|
1816
|
+
}, []);
|
|
1817
|
+
const removeInterruptAction = useCallback((actionId) => {
|
|
1818
|
+
_setInterruptActions((prev) => {
|
|
1819
|
+
const { [actionId]: _, ...rest } = prev;
|
|
1820
|
+
return rest;
|
|
1821
|
+
});
|
|
1822
|
+
}, []);
|
|
1823
|
+
const [interruptEventQueue, setInterruptEventQueue] = useState({});
|
|
1824
|
+
const addInterruptEvent = useCallback((queuedEvent) => {
|
|
1825
|
+
setInterruptEventQueue((prev) => {
|
|
1826
|
+
const threadQueue = prev[queuedEvent.threadId] || [];
|
|
1827
|
+
return {
|
|
1828
|
+
...prev,
|
|
1829
|
+
[queuedEvent.threadId]: [...threadQueue, queuedEvent]
|
|
1830
|
+
};
|
|
1831
|
+
});
|
|
1832
|
+
}, []);
|
|
1833
|
+
const resolveInterruptEvent = useCallback((threadId, eventId, response) => {
|
|
1834
|
+
setInterruptEventQueue((prev) => {
|
|
1835
|
+
const threadQueue = prev[threadId] || [];
|
|
1836
|
+
return {
|
|
1837
|
+
...prev,
|
|
1838
|
+
[threadId]: threadQueue.map((queuedEvent) => queuedEvent.eventId === eventId ? {
|
|
1839
|
+
...queuedEvent,
|
|
1840
|
+
event: {
|
|
1841
|
+
...queuedEvent.event,
|
|
1842
|
+
response
|
|
1843
|
+
}
|
|
1844
|
+
} : queuedEvent)
|
|
1845
|
+
};
|
|
1846
|
+
});
|
|
1847
|
+
}, []);
|
|
1848
|
+
const memoizedChildren = useMemo(() => children, [children]);
|
|
1849
|
+
const [bannerError, setBannerError] = useState(null);
|
|
1850
|
+
const agentLock = useMemo(() => props.agent ?? null, [props.agent]);
|
|
1851
|
+
const forwardedParameters = useMemo(() => props.forwardedParameters ?? {}, [props.forwardedParameters]);
|
|
1852
|
+
const updateExtensions = useCallback((newExtensions) => {
|
|
1853
|
+
setExtensions((prev) => {
|
|
1854
|
+
const resolved = typeof newExtensions === "function" ? newExtensions(prev) : newExtensions;
|
|
1855
|
+
return Object.keys(resolved).length === Object.keys(prev).length && Object.entries(resolved).every(([key, value]) => prev[key] === value) ? prev : resolved;
|
|
1856
|
+
});
|
|
1857
|
+
}, [setExtensions]);
|
|
1858
|
+
const updateAuthStates = useCallback((newAuthStates) => {
|
|
1859
|
+
setAuthStates((prev) => {
|
|
1860
|
+
const resolved = typeof newAuthStates === "function" ? newAuthStates(prev) : newAuthStates;
|
|
1861
|
+
return Object.keys(resolved).length === Object.keys(prev).length && Object.entries(resolved).every(([key, value]) => prev[key] === value) ? prev : resolved;
|
|
1862
|
+
});
|
|
1863
|
+
}, [setAuthStates]);
|
|
1864
|
+
const handleSetRegisteredActions = useCallback((actionConfig) => {
|
|
1865
|
+
const key = actionConfig.action.name || randomUUID();
|
|
1866
|
+
setRegisteredActionConfigs((prev) => {
|
|
1867
|
+
const newMap = new Map(prev);
|
|
1868
|
+
newMap.set(key, actionConfig);
|
|
1869
|
+
return newMap;
|
|
1870
|
+
});
|
|
1871
|
+
return key;
|
|
1872
|
+
}, []);
|
|
1873
|
+
const handleRemoveRegisteredAction = useCallback((actionKey) => {
|
|
1874
|
+
setRegisteredActionConfigs((prev) => {
|
|
1875
|
+
const newMap = new Map(prev);
|
|
1876
|
+
newMap.delete(actionKey);
|
|
1877
|
+
return newMap;
|
|
1878
|
+
});
|
|
1879
|
+
}, []);
|
|
1880
|
+
const RegisteredActionsRenderer = useMemo(() => {
|
|
1881
|
+
return () => /* @__PURE__ */ jsx(Fragment$1, { children: Array.from(registeredActionConfigs.entries()).map(([key, config]) => {
|
|
1882
|
+
const Component = config.component;
|
|
1883
|
+
return /* @__PURE__ */ jsx(Component, { action: config.action }, key);
|
|
1884
|
+
}) });
|
|
1885
|
+
}, [registeredActionConfigs]);
|
|
1886
|
+
return /* @__PURE__ */ jsx(CopilotChatConfigurationProvider, {
|
|
1887
|
+
agentId: props.agent ?? "default",
|
|
1888
|
+
threadId,
|
|
1889
|
+
children: /* @__PURE__ */ jsxs(CopilotContext.Provider, {
|
|
1890
|
+
value: {
|
|
1891
|
+
actions,
|
|
1892
|
+
chatComponentsCache,
|
|
1893
|
+
getFunctionCallHandler,
|
|
1894
|
+
setAction,
|
|
1895
|
+
removeAction,
|
|
1896
|
+
setRegisteredActions: handleSetRegisteredActions,
|
|
1897
|
+
removeRegisteredAction: handleRemoveRegisteredAction,
|
|
1898
|
+
getContextString,
|
|
1899
|
+
addContext,
|
|
1900
|
+
removeContext,
|
|
1901
|
+
getAllContext,
|
|
1902
|
+
getDocumentsContext,
|
|
1903
|
+
addDocumentContext,
|
|
1904
|
+
removeDocumentContext,
|
|
1905
|
+
copilotApiConfig,
|
|
1906
|
+
isLoading,
|
|
1907
|
+
setIsLoading,
|
|
1908
|
+
chatSuggestionConfiguration,
|
|
1909
|
+
addChatSuggestionConfiguration,
|
|
1910
|
+
removeChatSuggestionConfiguration,
|
|
1911
|
+
chatInstructions,
|
|
1912
|
+
setChatInstructions,
|
|
1913
|
+
additionalInstructions,
|
|
1914
|
+
setAdditionalInstructions,
|
|
1915
|
+
showDevConsole,
|
|
1916
|
+
coagentStates,
|
|
1917
|
+
setCoagentStates,
|
|
1918
|
+
coagentStatesRef,
|
|
1919
|
+
setCoagentStatesWithRef,
|
|
1920
|
+
agentSession,
|
|
1921
|
+
setAgentSession,
|
|
1922
|
+
forwardedParameters,
|
|
1923
|
+
agentLock,
|
|
1924
|
+
threadId,
|
|
1925
|
+
setThreadId,
|
|
1926
|
+
runId,
|
|
1927
|
+
setRunId,
|
|
1928
|
+
chatAbortControllerRef,
|
|
1929
|
+
availableAgents,
|
|
1930
|
+
authConfig_c: props.authConfig_c,
|
|
1931
|
+
authStates_c: authStates,
|
|
1932
|
+
setAuthStates_c: updateAuthStates,
|
|
1933
|
+
extensions,
|
|
1934
|
+
setExtensions: updateExtensions,
|
|
1935
|
+
interruptActions,
|
|
1936
|
+
setInterruptAction,
|
|
1937
|
+
removeInterruptAction,
|
|
1938
|
+
interruptEventQueue,
|
|
1939
|
+
addInterruptEvent,
|
|
1940
|
+
resolveInterruptEvent,
|
|
1941
|
+
bannerError,
|
|
1942
|
+
setBannerError,
|
|
1943
|
+
onError: handleErrors,
|
|
1944
|
+
internalErrorHandlers,
|
|
1945
|
+
setInternalErrorHandler,
|
|
1946
|
+
removeInternalErrorHandler
|
|
1947
|
+
},
|
|
1948
|
+
children: [
|
|
1949
|
+
/* @__PURE__ */ jsx(CopilotListeners, {}),
|
|
1950
|
+
/* @__PURE__ */ jsx(CopilotKitErrorBridge, {}),
|
|
1951
|
+
/* @__PURE__ */ jsxs(CoAgentStateRendersProvider, { children: [/* @__PURE__ */ jsx(MessagesTapProvider, { children: /* @__PURE__ */ jsxs(CopilotMessages, { children: [memoizedChildren, /* @__PURE__ */ jsx(RegisteredActionsRenderer, {})] }) }), bannerError && showDevConsole && /* @__PURE__ */ jsx(UsageBanner, {
|
|
1952
|
+
severity: bannerError.severity,
|
|
1953
|
+
message: bannerError.message,
|
|
1954
|
+
onClose: () => setBannerError(null),
|
|
1955
|
+
actions: getErrorActions(bannerError)
|
|
1956
|
+
})] })
|
|
1957
|
+
]
|
|
1958
|
+
})
|
|
1959
|
+
});
|
|
1960
|
+
}
|
|
1961
|
+
const defaultCopilotContextCategories = ["global"];
|
|
1962
|
+
function entryPointsToFunctionCallHandler(actions) {
|
|
1963
|
+
return async ({ name, args }) => {
|
|
1964
|
+
let actionsByFunctionName = {};
|
|
1965
|
+
for (let action of actions) actionsByFunctionName[action.name] = action;
|
|
1966
|
+
const action = actionsByFunctionName[name];
|
|
1967
|
+
let result = void 0;
|
|
1968
|
+
if (action) {
|
|
1969
|
+
await new Promise((resolve, reject) => {
|
|
1970
|
+
flushSync(async () => {
|
|
1971
|
+
try {
|
|
1972
|
+
result = await action.handler?.(args);
|
|
1973
|
+
resolve();
|
|
1974
|
+
} catch (error) {
|
|
1975
|
+
reject(error);
|
|
1976
|
+
}
|
|
1977
|
+
});
|
|
1978
|
+
});
|
|
1979
|
+
await new Promise((resolve) => setTimeout(resolve, 20));
|
|
1980
|
+
}
|
|
1981
|
+
return result;
|
|
1982
|
+
};
|
|
1983
|
+
}
|
|
1984
|
+
function formatFeatureName(featureName) {
|
|
1985
|
+
return featureName.replace(/_c$/, "").split("_").map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
|
|
1986
|
+
}
|
|
1987
|
+
function validateProps(props) {
|
|
1988
|
+
const cloudFeatures = Object.keys(props).filter((key) => key.endsWith("_c"));
|
|
1989
|
+
const hasApiKey = props.publicApiKey || props.publicLicenseKey;
|
|
1990
|
+
if (!props.runtimeUrl && !hasApiKey) throw new ConfigurationError("Missing required prop: 'runtimeUrl' or 'publicApiKey' or 'publicLicenseKey'");
|
|
1991
|
+
if (cloudFeatures.length > 0 && !hasApiKey) throw new MissingPublicApiKeyError(`Missing required prop: 'publicApiKey' or 'publicLicenseKey' to use cloud features: ${cloudFeatures.map(formatFeatureName).join(", ")}`);
|
|
1992
|
+
}
|
|
1993
|
+
|
|
1994
|
+
//#endregion
|
|
1995
|
+
//#region src/hooks/use-agent-nodename.ts
|
|
1996
|
+
function useAgentNodeName(agentName) {
|
|
1997
|
+
const { agent } = useAgent({ agentId: agentName });
|
|
1998
|
+
const nodeNameRef = useRef("start");
|
|
1999
|
+
useEffect(() => {
|
|
2000
|
+
if (!agent) return;
|
|
2001
|
+
const subscription = agent.subscribe({
|
|
2002
|
+
onStepStartedEvent: ({ event }) => {
|
|
2003
|
+
nodeNameRef.current = event.stepName;
|
|
2004
|
+
},
|
|
2005
|
+
onRunStartedEvent: () => {
|
|
2006
|
+
nodeNameRef.current = "start";
|
|
2007
|
+
},
|
|
2008
|
+
onRunFinishedEvent: () => {
|
|
2009
|
+
nodeNameRef.current = "end";
|
|
2010
|
+
}
|
|
2011
|
+
});
|
|
2012
|
+
return () => {
|
|
2013
|
+
subscription.unsubscribe();
|
|
2014
|
+
};
|
|
2015
|
+
}, [agent]);
|
|
2016
|
+
return nodeNameRef.current;
|
|
2017
|
+
}
|
|
2018
|
+
|
|
2019
|
+
//#endregion
|
|
2020
|
+
//#region src/hooks/use-langgraph-interrupt-render.ts
|
|
2021
|
+
const InterruptRenderer = ({ event, result, render, resolve }) => {
|
|
2022
|
+
return render({
|
|
2023
|
+
event,
|
|
2024
|
+
result,
|
|
2025
|
+
resolve
|
|
2026
|
+
});
|
|
2027
|
+
};
|
|
2028
|
+
function useLangGraphInterruptRender(agent) {
|
|
2029
|
+
const { interruptActions, agentSession, threadId, interruptEventQueue, addInterruptEvent, resolveInterruptEvent } = useCopilotContext();
|
|
2030
|
+
const nodeName = useAgentNodeName(useCopilotChatConfiguration()?.agentId ?? "default");
|
|
2031
|
+
useEffect(() => {
|
|
2032
|
+
if (!agent) return;
|
|
2033
|
+
let localInterrupt = null;
|
|
2034
|
+
const { unsubscribe } = agent.subscribe({
|
|
2035
|
+
onCustomEvent: ({ event }) => {
|
|
2036
|
+
if (event.name === "on_interrupt") {
|
|
2037
|
+
const eventData = {
|
|
2038
|
+
name: MetaEventName.LangGraphInterruptEvent,
|
|
2039
|
+
type: event.type,
|
|
2040
|
+
value: parseJson(event.value, event.value)
|
|
2041
|
+
};
|
|
2042
|
+
localInterrupt = {
|
|
2043
|
+
eventId: dataToUUID(eventData, "interruptEvents"),
|
|
2044
|
+
threadId,
|
|
2045
|
+
event: eventData
|
|
2046
|
+
};
|
|
2047
|
+
}
|
|
2048
|
+
},
|
|
2049
|
+
onRunStartedEvent: () => {
|
|
2050
|
+
localInterrupt = null;
|
|
2051
|
+
},
|
|
2052
|
+
onRunFinalized: () => {
|
|
2053
|
+
if (localInterrupt) {
|
|
2054
|
+
addInterruptEvent(localInterrupt);
|
|
2055
|
+
localInterrupt = null;
|
|
2056
|
+
}
|
|
2057
|
+
}
|
|
2058
|
+
});
|
|
2059
|
+
return () => {
|
|
2060
|
+
unsubscribe();
|
|
2061
|
+
};
|
|
2062
|
+
}, [agent, threadId]);
|
|
2063
|
+
const handleResolve = useCallback((eventId, response) => {
|
|
2064
|
+
agent?.runAgent({ forwardedProps: { command: { resume: response } } });
|
|
2065
|
+
resolveInterruptEvent(threadId, eventId, response ?? "");
|
|
2066
|
+
}, [agent, threadId]);
|
|
2067
|
+
return useMemo(() => {
|
|
2068
|
+
const currentQueuedEvent = (interruptEventQueue[threadId] || []).find((qe) => !qe.event.response);
|
|
2069
|
+
if (!currentQueuedEvent || !agentSession) return null;
|
|
2070
|
+
const matchingAction = Object.values(interruptActions).find((action) => {
|
|
2071
|
+
if (!action.enabled) return true;
|
|
2072
|
+
return action.enabled({
|
|
2073
|
+
eventValue: currentQueuedEvent.event.value,
|
|
2074
|
+
agentMetadata: {
|
|
2075
|
+
...agentSession,
|
|
2076
|
+
nodeName
|
|
2077
|
+
}
|
|
2078
|
+
});
|
|
2079
|
+
});
|
|
2080
|
+
if (!matchingAction) return null;
|
|
2081
|
+
const { render, handler } = matchingAction;
|
|
2082
|
+
const resolveInterrupt = (response) => {
|
|
2083
|
+
handleResolve(currentQueuedEvent.eventId, response);
|
|
2084
|
+
};
|
|
2085
|
+
let result = null;
|
|
2086
|
+
if (handler) result = handler({
|
|
2087
|
+
event: currentQueuedEvent.event,
|
|
2088
|
+
resolve: resolveInterrupt
|
|
2089
|
+
});
|
|
2090
|
+
if (!render) return null;
|
|
2091
|
+
return React.createElement(InterruptRenderer, {
|
|
2092
|
+
event: currentQueuedEvent.event,
|
|
2093
|
+
result,
|
|
2094
|
+
render,
|
|
2095
|
+
resolve: resolveInterrupt
|
|
2096
|
+
});
|
|
2097
|
+
}, [
|
|
2098
|
+
interruptActions,
|
|
2099
|
+
interruptEventQueue,
|
|
2100
|
+
threadId,
|
|
2101
|
+
agentSession,
|
|
2102
|
+
handleResolve
|
|
2103
|
+
]);
|
|
2104
|
+
}
|
|
2105
|
+
|
|
2106
|
+
//#endregion
|
|
2107
|
+
//#region src/hooks/use-lazy-tool-renderer.tsx
|
|
2108
|
+
function useLazyToolRenderer() {
|
|
2109
|
+
const renderToolCall = useRenderToolCall$1();
|
|
2110
|
+
return useCallback((message, messages) => {
|
|
2111
|
+
if (!message?.toolCalls?.length) return null;
|
|
2112
|
+
const toolCall = message.toolCalls[0];
|
|
2113
|
+
if (!toolCall) return null;
|
|
2114
|
+
const toolMessage = messages?.find((m) => m.role === "tool" && m.toolCallId === toolCall.id);
|
|
2115
|
+
return () => renderToolCall({
|
|
2116
|
+
toolCall,
|
|
2117
|
+
toolMessage
|
|
2118
|
+
});
|
|
2119
|
+
}, [renderToolCall]);
|
|
2120
|
+
}
|
|
2121
|
+
|
|
2122
|
+
//#endregion
|
|
2123
|
+
//#region src/hooks/use-copilot-chat_internal.ts
|
|
2124
|
+
function useCopilotChatInternal({ suggestions, onInProgress, onSubmitMessage, onStopGeneration, onReloadMessages } = {}) {
|
|
2125
|
+
const { copilotkit } = useCopilotKit();
|
|
2126
|
+
const { threadId, agentSession } = useCopilotContext();
|
|
2127
|
+
const existingConfig = useCopilotChatConfiguration();
|
|
2128
|
+
const [agentAvailable, setAgentAvailable] = useState(false);
|
|
2129
|
+
const resolvedAgentId = existingConfig?.agentId ?? "default";
|
|
2130
|
+
const { agent } = useAgent({ agentId: resolvedAgentId });
|
|
2131
|
+
useEffect(() => {
|
|
2132
|
+
const connect = async (agent) => {
|
|
2133
|
+
setAgentAvailable(false);
|
|
2134
|
+
try {
|
|
2135
|
+
await copilotkit.connectAgent({ agent });
|
|
2136
|
+
setAgentAvailable(true);
|
|
2137
|
+
} catch (error) {
|
|
2138
|
+
if (error instanceof AGUIConnectNotImplementedError) {} else console.error("CopilotChat: connectAgent failed", error);
|
|
2139
|
+
}
|
|
2140
|
+
};
|
|
2141
|
+
if (agent && existingConfig?.threadId && agent.threadId !== existingConfig.threadId) {
|
|
2142
|
+
agent.threadId = existingConfig.threadId;
|
|
2143
|
+
connect(agent);
|
|
2144
|
+
}
|
|
2145
|
+
return () => {};
|
|
2146
|
+
}, [
|
|
2147
|
+
existingConfig?.threadId,
|
|
2148
|
+
agent,
|
|
2149
|
+
copilotkit,
|
|
2150
|
+
resolvedAgentId
|
|
2151
|
+
]);
|
|
2152
|
+
useEffect(() => {
|
|
2153
|
+
onInProgress?.(Boolean(agent?.isRunning));
|
|
2154
|
+
}, [agent?.isRunning, onInProgress]);
|
|
2155
|
+
const interrupt = useLangGraphInterruptRender(agent);
|
|
2156
|
+
const reset = () => {
|
|
2157
|
+
agent?.setMessages([]);
|
|
2158
|
+
agent?.setState(null);
|
|
2159
|
+
};
|
|
2160
|
+
const latestDelete = useUpdatedRef(useCallback((messageId) => {
|
|
2161
|
+
const filteredMessages = (agent?.messages ?? []).filter((message) => message.id !== messageId);
|
|
2162
|
+
agent?.setMessages(filteredMessages);
|
|
2163
|
+
}, [agent?.setMessages, agent?.messages]));
|
|
2164
|
+
const latestDeleteFunc = useCallback((messageId) => {
|
|
2165
|
+
return latestDelete.current(messageId);
|
|
2166
|
+
}, [latestDelete]);
|
|
2167
|
+
const currentSuggestions = useSuggestions({ agentId: resolvedAgentId });
|
|
2168
|
+
const reload = useAsyncCallback(async (reloadMessageId) => {
|
|
2169
|
+
if (!agent) return;
|
|
2170
|
+
const messages = agent?.messages ?? [];
|
|
2171
|
+
if (agent.isRunning || messages.length === 0) return;
|
|
2172
|
+
const reloadMessageIndex = messages.findIndex((msg) => msg.id === reloadMessageId);
|
|
2173
|
+
if (reloadMessageIndex === -1) {
|
|
2174
|
+
console.warn(`Message with id ${reloadMessageId} not found`);
|
|
2175
|
+
return;
|
|
2176
|
+
}
|
|
2177
|
+
const reloadMessageRole = messages[reloadMessageIndex].role;
|
|
2178
|
+
if (reloadMessageRole !== "assistant") {
|
|
2179
|
+
console.warn(`Regenerate cannot be performed on ${reloadMessageRole} role`);
|
|
2180
|
+
return;
|
|
2181
|
+
}
|
|
2182
|
+
let historyCutoff = [messages[0]];
|
|
2183
|
+
if (messages.length > 2 && reloadMessageIndex !== 0) {
|
|
2184
|
+
const lastUserMessageBeforeRegenerate = messages.slice(0, reloadMessageIndex).reverse().find((msg) => msg.role === "user");
|
|
2185
|
+
if (!lastUserMessageBeforeRegenerate) historyCutoff = [messages[0]];
|
|
2186
|
+
else {
|
|
2187
|
+
const indexOfLastUserMessageBeforeRegenerate = messages.findIndex((msg) => msg.id === lastUserMessageBeforeRegenerate.id);
|
|
2188
|
+
historyCutoff = messages.slice(0, indexOfLastUserMessageBeforeRegenerate + 1);
|
|
2189
|
+
}
|
|
2190
|
+
} else if (messages.length > 2 && reloadMessageIndex === 0) historyCutoff = [messages[0], messages[1]];
|
|
2191
|
+
agent?.setMessages(historyCutoff);
|
|
2192
|
+
if (agent) try {
|
|
2193
|
+
await copilotkit.runAgent({ agent });
|
|
2194
|
+
} catch (error) {
|
|
2195
|
+
console.error("CopilotChat: runAgent failed during reload", error);
|
|
2196
|
+
}
|
|
2197
|
+
}, [
|
|
2198
|
+
agent?.messages.length,
|
|
2199
|
+
agent?.isRunning,
|
|
2200
|
+
agent?.setMessages,
|
|
2201
|
+
copilotkit?.runAgent
|
|
2202
|
+
]);
|
|
2203
|
+
const latestSendMessageFunc = useAsyncCallback(async (message, options) => {
|
|
2204
|
+
if (!agent) return;
|
|
2205
|
+
const followUp = options?.followUp ?? true;
|
|
2206
|
+
if (options?.clearSuggestions) copilotkit.clearSuggestions(resolvedAgentId);
|
|
2207
|
+
if (onSubmitMessage) {
|
|
2208
|
+
const content = typeof message.content === "string" ? message.content : message.content && "text" in message.content ? message.content.text : message.content && "filename" in message.content ? message.content.filename : "";
|
|
2209
|
+
try {
|
|
2210
|
+
await onSubmitMessage(content);
|
|
2211
|
+
} catch (error) {
|
|
2212
|
+
console.error("Error in onSubmitMessage:", error);
|
|
2213
|
+
}
|
|
2214
|
+
}
|
|
2215
|
+
agent?.addMessage(message);
|
|
2216
|
+
if (followUp) try {
|
|
2217
|
+
await copilotkit.runAgent({ agent });
|
|
2218
|
+
} catch (error) {
|
|
2219
|
+
console.error("CopilotChat: runAgent failed", error);
|
|
2220
|
+
}
|
|
2221
|
+
}, [
|
|
2222
|
+
agent,
|
|
2223
|
+
copilotkit,
|
|
2224
|
+
resolvedAgentId,
|
|
2225
|
+
onSubmitMessage
|
|
2226
|
+
]);
|
|
2227
|
+
const latestAppendFunc = useAsyncCallback(async (message, options) => {
|
|
2228
|
+
return latestSendMessageFunc(gqlToAGUI([message])[0], options);
|
|
2229
|
+
}, [latestSendMessageFunc]);
|
|
2230
|
+
const latestSetMessagesFunc = useCallback((messages) => {
|
|
2231
|
+
if (messages.every((message) => message instanceof Message$1)) return agent?.setMessages?.(gqlToAGUI(messages));
|
|
2232
|
+
return agent?.setMessages?.(messages);
|
|
2233
|
+
}, [agent?.setMessages, agent]);
|
|
2234
|
+
const latestReload = useUpdatedRef(reload);
|
|
2235
|
+
const latestReloadFunc = useAsyncCallback(async (messageId) => {
|
|
2236
|
+
onReloadMessages?.({
|
|
2237
|
+
messageId,
|
|
2238
|
+
currentAgentName: agent?.agentId,
|
|
2239
|
+
messages: agent?.messages ?? []
|
|
2240
|
+
});
|
|
2241
|
+
return await latestReload.current(messageId);
|
|
2242
|
+
}, [
|
|
2243
|
+
latestReload,
|
|
2244
|
+
agent,
|
|
2245
|
+
onReloadMessages
|
|
2246
|
+
]);
|
|
2247
|
+
const latestStopFunc = useCallback(() => {
|
|
2248
|
+
onStopGeneration?.({
|
|
2249
|
+
currentAgentName: agent?.agentId,
|
|
2250
|
+
messages: agent?.messages ?? []
|
|
2251
|
+
});
|
|
2252
|
+
return agent?.abortRun?.();
|
|
2253
|
+
}, [onStopGeneration, agent]);
|
|
2254
|
+
const latestReset = useUpdatedRef(reset);
|
|
2255
|
+
const latestResetFunc = useCallback(() => {
|
|
2256
|
+
return latestReset.current();
|
|
2257
|
+
}, [latestReset]);
|
|
2258
|
+
const lazyToolRendered = useLazyToolRenderer();
|
|
2259
|
+
const renderCustomMessage = useRenderCustomMessages();
|
|
2260
|
+
const legacyCustomMessageRenderer = useLegacyCoagentRenderer({
|
|
2261
|
+
copilotkit,
|
|
2262
|
+
agent,
|
|
2263
|
+
agentId: resolvedAgentId,
|
|
2264
|
+
threadId: existingConfig?.threadId ?? threadId
|
|
2265
|
+
});
|
|
2266
|
+
const allMessages = agent?.messages ?? [];
|
|
2267
|
+
const resolvedMessages = useMemo(() => {
|
|
2268
|
+
let processedMessages = allMessages.map((message) => {
|
|
2269
|
+
if (message.role !== "assistant") return message;
|
|
2270
|
+
const lazyRendered = lazyToolRendered(message, allMessages);
|
|
2271
|
+
if (lazyRendered) {
|
|
2272
|
+
const renderedGenUi = lazyRendered();
|
|
2273
|
+
if (renderedGenUi) return {
|
|
2274
|
+
...message,
|
|
2275
|
+
generativeUI: () => renderedGenUi
|
|
2276
|
+
};
|
|
2277
|
+
}
|
|
2278
|
+
const bridgeRenderer = legacyCustomMessageRenderer || renderCustomMessage ? () => {
|
|
2279
|
+
if (legacyCustomMessageRenderer) return legacyCustomMessageRenderer({
|
|
2280
|
+
message,
|
|
2281
|
+
position: "before"
|
|
2282
|
+
});
|
|
2283
|
+
try {
|
|
2284
|
+
return renderCustomMessage?.({
|
|
2285
|
+
message,
|
|
2286
|
+
position: "before"
|
|
2287
|
+
}) ?? null;
|
|
2288
|
+
} catch (error) {
|
|
2289
|
+
console.warn("[CopilotKit] renderCustomMessages failed, falling back to legacy renderer", error);
|
|
2290
|
+
return null;
|
|
2291
|
+
}
|
|
2292
|
+
} : null;
|
|
2293
|
+
if (bridgeRenderer) return {
|
|
2294
|
+
...message,
|
|
2295
|
+
generativeUI: bridgeRenderer,
|
|
2296
|
+
generativeUIPosition: "before"
|
|
2297
|
+
};
|
|
2298
|
+
return message;
|
|
2299
|
+
});
|
|
2300
|
+
const hasAssistantMessages = processedMessages.some((msg) => msg.role === "assistant");
|
|
2301
|
+
const canUseCustomRenderer = Boolean(renderCustomMessage && copilotkit?.getAgent?.(resolvedAgentId));
|
|
2302
|
+
const placeholderRenderer = legacyCustomMessageRenderer ? legacyCustomMessageRenderer : canUseCustomRenderer ? renderCustomMessage : null;
|
|
2303
|
+
const shouldRenderPlaceholder = Boolean(agent?.isRunning) || Boolean(agent?.state && Object.keys(agent.state).length);
|
|
2304
|
+
const effectiveThreadId = threadId ?? agent?.threadId ?? "default";
|
|
2305
|
+
let latestUserIndex = -1;
|
|
2306
|
+
for (let i = processedMessages.length - 1; i >= 0; i -= 1) if (processedMessages[i].role === "user") {
|
|
2307
|
+
latestUserIndex = i;
|
|
2308
|
+
break;
|
|
2309
|
+
}
|
|
2310
|
+
const latestUserMessageId = latestUserIndex >= 0 ? processedMessages[latestUserIndex].id : void 0;
|
|
2311
|
+
const currentRunId = latestUserMessageId ? copilotkit.getRunIdForMessage(resolvedAgentId, effectiveThreadId, latestUserMessageId) || `pending:${latestUserMessageId}` : void 0;
|
|
2312
|
+
const hasAssistantForCurrentRun = latestUserIndex >= 0 ? processedMessages.slice(latestUserIndex + 1).some((msg) => msg.role === "assistant") : hasAssistantMessages;
|
|
2313
|
+
if (placeholderRenderer && shouldRenderPlaceholder && !hasAssistantForCurrentRun) {
|
|
2314
|
+
const placeholderMessage = {
|
|
2315
|
+
id: currentRunId ? `coagent-state-render-${resolvedAgentId}-${currentRunId}` : `coagent-state-render-${resolvedAgentId}`,
|
|
2316
|
+
role: "assistant",
|
|
2317
|
+
content: "",
|
|
2318
|
+
name: "coagent-state-render",
|
|
2319
|
+
runId: currentRunId
|
|
2320
|
+
};
|
|
2321
|
+
processedMessages = [...processedMessages, {
|
|
2322
|
+
...placeholderMessage,
|
|
2323
|
+
generativeUIPosition: "before",
|
|
2324
|
+
generativeUI: () => placeholderRenderer({
|
|
2325
|
+
message: placeholderMessage,
|
|
2326
|
+
position: "before"
|
|
2327
|
+
})
|
|
2328
|
+
}];
|
|
2329
|
+
}
|
|
2330
|
+
return processedMessages;
|
|
2331
|
+
}, [
|
|
2332
|
+
agent?.messages,
|
|
2333
|
+
lazyToolRendered,
|
|
2334
|
+
allMessages,
|
|
2335
|
+
renderCustomMessage,
|
|
2336
|
+
legacyCustomMessageRenderer,
|
|
2337
|
+
resolvedAgentId,
|
|
2338
|
+
copilotkit,
|
|
2339
|
+
agent?.isRunning,
|
|
2340
|
+
agent?.state
|
|
2341
|
+
]);
|
|
2342
|
+
const renderedSuggestions = useMemo(() => {
|
|
2343
|
+
if (Array.isArray(suggestions)) return {
|
|
2344
|
+
suggestions: suggestions.map((s) => ({
|
|
2345
|
+
...s,
|
|
2346
|
+
isLoading: false
|
|
2347
|
+
})),
|
|
2348
|
+
isLoading: false
|
|
2349
|
+
};
|
|
2350
|
+
return currentSuggestions;
|
|
2351
|
+
}, [suggestions, currentSuggestions]);
|
|
2352
|
+
return {
|
|
2353
|
+
messages: resolvedMessages,
|
|
2354
|
+
sendMessage: latestSendMessageFunc,
|
|
2355
|
+
appendMessage: latestAppendFunc,
|
|
2356
|
+
setMessages: latestSetMessagesFunc,
|
|
2357
|
+
reloadMessages: latestReloadFunc,
|
|
2358
|
+
stopGeneration: latestStopFunc,
|
|
2359
|
+
reset: latestResetFunc,
|
|
2360
|
+
deleteMessage: latestDeleteFunc,
|
|
2361
|
+
isAvailable: agentAvailable,
|
|
2362
|
+
isLoading: Boolean(agent?.isRunning),
|
|
2363
|
+
suggestions: renderedSuggestions.suggestions,
|
|
2364
|
+
setSuggestions: (suggestions) => copilotkit.addSuggestionsConfig({ suggestions }),
|
|
2365
|
+
generateSuggestions: async () => copilotkit.reloadSuggestions(resolvedAgentId),
|
|
2366
|
+
resetSuggestions: () => copilotkit.clearSuggestions(resolvedAgentId),
|
|
2367
|
+
isLoadingSuggestions: renderedSuggestions.isLoading,
|
|
2368
|
+
interrupt,
|
|
2369
|
+
agent,
|
|
2370
|
+
threadId
|
|
2371
|
+
};
|
|
2372
|
+
}
|
|
2373
|
+
function useUpdatedRef(value) {
|
|
2374
|
+
const ref = useRef(value);
|
|
2375
|
+
useEffect(() => {
|
|
2376
|
+
ref.current = value;
|
|
2377
|
+
}, [value]);
|
|
2378
|
+
return ref;
|
|
2379
|
+
}
|
|
2380
|
+
function useLegacyCoagentRenderer({ copilotkit, agent, agentId, threadId }) {
|
|
2381
|
+
return useMemo(() => {
|
|
2382
|
+
if (!copilotkit || !agent) return null;
|
|
2383
|
+
return ({ message, position }) => {
|
|
2384
|
+
const effectiveThreadId = threadId ?? agent.threadId ?? "default";
|
|
2385
|
+
const providedRunId = message.runId;
|
|
2386
|
+
return createElement(CoAgentStateRenderBridge, {
|
|
2387
|
+
message,
|
|
2388
|
+
position,
|
|
2389
|
+
runId: (providedRunId ? providedRunId : copilotkit.getRunIdForMessage(agentId, effectiveThreadId, message.id)) || `pending:${message.id}`,
|
|
2390
|
+
messageIndex: Math.max(agent.messages.findIndex((msg) => msg.id === message.id), 0),
|
|
2391
|
+
messageIndexInRun: 0,
|
|
2392
|
+
numberOfMessagesInRun: 1,
|
|
2393
|
+
agentId,
|
|
2394
|
+
stateSnapshot: message.state
|
|
2395
|
+
});
|
|
2396
|
+
};
|
|
2397
|
+
}, [
|
|
2398
|
+
agent,
|
|
2399
|
+
agentId,
|
|
2400
|
+
copilotkit,
|
|
2401
|
+
threadId
|
|
2402
|
+
]);
|
|
2403
|
+
}
|
|
2404
|
+
|
|
2405
|
+
//#endregion
|
|
2406
|
+
//#region src/hooks/use-copilot-chat.ts
|
|
2407
|
+
/**
|
|
2408
|
+
* `useCopilotChat` is a lightweight React hook for headless chat interactions.
|
|
2409
|
+
* Perfect for controlling the prebuilt chat components programmatically.
|
|
2410
|
+
*
|
|
2411
|
+
* **Open Source Friendly** - Works without requiring a free public license key.
|
|
2412
|
+
*
|
|
2413
|
+
* <Callout title="Looking for fully headless UI?">
|
|
2414
|
+
* Get started with [useCopilotChatHeadless_c](https://docs.copilotkit.ai/reference/v1/hooks/useCopilotChatHeadless_c).
|
|
2415
|
+
* </Callout>
|
|
2416
|
+
*
|
|
2417
|
+
* ## Use Cases
|
|
2418
|
+
*
|
|
2419
|
+
* - **Programmatic Messaging**: Send messages without displaying chat UI
|
|
2420
|
+
* - **Programmatic control**: Control prebuilt component programmatically
|
|
2421
|
+
* - **Background Operations**: Trigger AI interactions in the background
|
|
2422
|
+
* - **Fire-and-Forget**: Send messages without needing to read responses
|
|
2423
|
+
*
|
|
2424
|
+
* ## Usage
|
|
2425
|
+
*
|
|
2426
|
+
* ```tsx
|
|
2427
|
+
* import { TextMessage, MessageRole } from "@copilotkit/runtime-client-gql";
|
|
2428
|
+
*
|
|
2429
|
+
* const { appendMessage } = useCopilotChat();
|
|
2430
|
+
*
|
|
2431
|
+
* // Example usage without naming conflicts
|
|
2432
|
+
* const handleSendMessage = async (content: string) => {
|
|
2433
|
+
* await appendMessage(
|
|
2434
|
+
* new TextMessage({
|
|
2435
|
+
* role: MessageRole.User,
|
|
2436
|
+
* content,
|
|
2437
|
+
* })
|
|
2438
|
+
* );
|
|
2439
|
+
* };
|
|
2440
|
+
* ```
|
|
2441
|
+
*
|
|
2442
|
+
* ## Return Values
|
|
2443
|
+
* The following properties are returned from the hook:
|
|
2444
|
+
*
|
|
2445
|
+
* <PropertyReference name="visibleMessages" type="DeprecatedGqlMessage[]" deprecated>
|
|
2446
|
+
* Array of messages in old non-AG-UI format, use for compatibility only
|
|
2447
|
+
* </PropertyReference>
|
|
2448
|
+
*
|
|
2449
|
+
* <PropertyReference name="appendMessage" type="(message: DeprecatedGqlMessage, options?) => Promise<void>" deprecated>
|
|
2450
|
+
* Append message using old format, use `sendMessage` instead
|
|
2451
|
+
* </PropertyReference>
|
|
2452
|
+
*
|
|
2453
|
+
* <PropertyReference name="reloadMessages" type="(messageId: string) => Promise<void>">
|
|
2454
|
+
* Regenerate the response for a specific message by ID
|
|
2455
|
+
* </PropertyReference>
|
|
2456
|
+
*
|
|
2457
|
+
* <PropertyReference name="stopGeneration" type="() => void">
|
|
2458
|
+
* Stop the current message generation process
|
|
2459
|
+
* </PropertyReference>
|
|
2460
|
+
*
|
|
2461
|
+
* <PropertyReference name="reset" type="() => void">
|
|
2462
|
+
* Clear all messages and reset chat state completely
|
|
2463
|
+
* </PropertyReference>
|
|
2464
|
+
*
|
|
2465
|
+
* <PropertyReference name="isLoading" type="boolean">
|
|
2466
|
+
* Whether the chat is currently generating a response
|
|
2467
|
+
* </PropertyReference>
|
|
2468
|
+
*
|
|
2469
|
+
* <PropertyReference name="runChatCompletion" type="() => Promise<Message[]>">
|
|
2470
|
+
* Manually trigger chat completion for advanced usage
|
|
2471
|
+
* </PropertyReference>
|
|
2472
|
+
*
|
|
2473
|
+
* <PropertyReference name="mcpServers" type="MCPServerConfig[]">
|
|
2474
|
+
* Array of Model Context Protocol server configurations
|
|
2475
|
+
* </PropertyReference>
|
|
2476
|
+
*
|
|
2477
|
+
* <PropertyReference name="setMcpServers" type="(servers: MCPServerConfig[]) => void">
|
|
2478
|
+
* Update MCP server configurations for enhanced context
|
|
2479
|
+
* </PropertyReference>
|
|
2480
|
+
*/
|
|
2481
|
+
/**
|
|
2482
|
+
* A lightweight React hook for headless chat interactions.
|
|
2483
|
+
* Perfect for programmatic messaging, background operations, and custom UI implementations.
|
|
2484
|
+
*
|
|
2485
|
+
* **Open Source Friendly** - Works without requiring a `publicApiKey`.
|
|
2486
|
+
*/
|
|
2487
|
+
function useCopilotChat(options = {}) {
|
|
2488
|
+
const { visibleMessages, appendMessage, reloadMessages, stopGeneration, reset, isLoading, isAvailable, runChatCompletion, mcpServers, setMcpServers } = useCopilotChatInternal(options);
|
|
2489
|
+
return {
|
|
2490
|
+
visibleMessages,
|
|
2491
|
+
appendMessage,
|
|
2492
|
+
reloadMessages,
|
|
2493
|
+
stopGeneration,
|
|
2494
|
+
reset,
|
|
2495
|
+
isLoading,
|
|
2496
|
+
isAvailable,
|
|
2497
|
+
runChatCompletion,
|
|
2498
|
+
mcpServers,
|
|
2499
|
+
setMcpServers
|
|
2500
|
+
};
|
|
2501
|
+
}
|
|
2502
|
+
|
|
2503
|
+
//#endregion
|
|
2504
|
+
//#region src/hooks/use-copilot-chat-headless_c.ts
|
|
2505
|
+
/**
|
|
2506
|
+
* `useCopilotChatHeadless_c` is for building fully custom UI (headless UI) implementations.
|
|
2507
|
+
*
|
|
2508
|
+
* <Callout title="This is a premium-only feature">
|
|
2509
|
+
* Sign up for free on [Copilot Cloud](https://cloud.copilotkit.ai) to get your public license key or read more about <a href="/premium/overview">premium features</a>.
|
|
2510
|
+
*
|
|
2511
|
+
* Usage is generous, **free** to get started, and works with **either self-hosted or Copilot Cloud** environments.
|
|
2512
|
+
* </Callout>
|
|
2513
|
+
*
|
|
2514
|
+
* ## Key Features
|
|
2515
|
+
*
|
|
2516
|
+
* - **Fully headless**: Build your own fully custom UI's for your agentic applications.
|
|
2517
|
+
* - **Advanced Suggestions**: Direct access to suggestions array with full control
|
|
2518
|
+
* - **Interrupt Handling**: Support for advanced interrupt functionality
|
|
2519
|
+
* - **MCP Server Support**: Model Context Protocol server configurations
|
|
2520
|
+
* - **Chat Controls**: Complete set of chat management functions
|
|
2521
|
+
* - **Loading States**: Comprehensive loading state management
|
|
2522
|
+
*
|
|
2523
|
+
*
|
|
2524
|
+
* ## Usage
|
|
2525
|
+
*
|
|
2526
|
+
* ### Basic Setup
|
|
2527
|
+
*
|
|
2528
|
+
* ```tsx
|
|
2529
|
+
* import { CopilotKit } from "@copilotkit/react-core";
|
|
2530
|
+
* import { useCopilotChatHeadless_c } from "@copilotkit/react-core";
|
|
2531
|
+
*
|
|
2532
|
+
* export function App() {
|
|
2533
|
+
* return (
|
|
2534
|
+
* <CopilotKit publicApiKey="your-free-public-license-key">
|
|
2535
|
+
* <YourComponent />
|
|
2536
|
+
* </CopilotKit>
|
|
2537
|
+
* );
|
|
2538
|
+
* }
|
|
2539
|
+
*
|
|
2540
|
+
* export function YourComponent() {
|
|
2541
|
+
* const { messages, sendMessage, isLoading } = useCopilotChatHeadless_c();
|
|
2542
|
+
*
|
|
2543
|
+
* const handleSendMessage = async () => {
|
|
2544
|
+
* await sendMessage({
|
|
2545
|
+
* id: "123",
|
|
2546
|
+
* role: "user",
|
|
2547
|
+
* content: "Hello World",
|
|
2548
|
+
* });
|
|
2549
|
+
* };
|
|
2550
|
+
*
|
|
2551
|
+
* return (
|
|
2552
|
+
* <div>
|
|
2553
|
+
* {messages.map(msg => <div key={msg.id}>{msg.content}</div>)}
|
|
2554
|
+
* <button onClick={handleSendMessage} disabled={isLoading}>
|
|
2555
|
+
* Send Message
|
|
2556
|
+
* </button>
|
|
2557
|
+
* </div>
|
|
2558
|
+
* );
|
|
2559
|
+
* }
|
|
2560
|
+
* ```
|
|
2561
|
+
*
|
|
2562
|
+
* ### Working with Suggestions
|
|
2563
|
+
*
|
|
2564
|
+
* ```tsx
|
|
2565
|
+
* import { useCopilotChatHeadless_c, useCopilotChatSuggestions } from "@copilotkit/react-core";
|
|
2566
|
+
*
|
|
2567
|
+
* export function SuggestionExample() {
|
|
2568
|
+
* const {
|
|
2569
|
+
* suggestions,
|
|
2570
|
+
* setSuggestions,
|
|
2571
|
+
* generateSuggestions,
|
|
2572
|
+
* isLoadingSuggestions
|
|
2573
|
+
* } = useCopilotChatHeadless_c();
|
|
2574
|
+
*
|
|
2575
|
+
* // Configure AI suggestion generation
|
|
2576
|
+
* useCopilotChatSuggestions({
|
|
2577
|
+
* instructions: "Suggest helpful actions based on the current context",
|
|
2578
|
+
* maxSuggestions: 3
|
|
2579
|
+
* });
|
|
2580
|
+
*
|
|
2581
|
+
* return (
|
|
2582
|
+
* <div>
|
|
2583
|
+
* {suggestions.map(suggestion => (
|
|
2584
|
+
* <button key={suggestion.title}>{suggestion.title}</button>
|
|
2585
|
+
* ))}
|
|
2586
|
+
* <button onClick={generateSuggestions} disabled={isLoadingSuggestions}>
|
|
2587
|
+
* Generate Suggestions
|
|
2588
|
+
* </button>
|
|
2589
|
+
* </div>
|
|
2590
|
+
* );
|
|
2591
|
+
* }
|
|
2592
|
+
* ```
|
|
2593
|
+
*
|
|
2594
|
+
* ## Return Values
|
|
2595
|
+
* The following properties are returned from the hook:
|
|
2596
|
+
*
|
|
2597
|
+
* <PropertyReference name="messages" type="Message[]">
|
|
2598
|
+
* The messages currently in the chat in AG-UI format
|
|
2599
|
+
* </PropertyReference>
|
|
2600
|
+
*
|
|
2601
|
+
* <PropertyReference name="sendMessage" type="(message: Message, options?) => Promise<void>">
|
|
2602
|
+
* Send a new message to the chat and trigger AI response
|
|
2603
|
+
* </PropertyReference>
|
|
2604
|
+
*
|
|
2605
|
+
* <PropertyReference name="setMessages" type="(messages: Message[] | DeprecatedGqlMessage[]) => void">
|
|
2606
|
+
* Replace all messages in the chat with new array
|
|
2607
|
+
* </PropertyReference>
|
|
2608
|
+
*
|
|
2609
|
+
* <PropertyReference name="deleteMessage" type="(messageId: string) => void">
|
|
2610
|
+
* Remove a specific message by ID from the chat
|
|
2611
|
+
* </PropertyReference>
|
|
2612
|
+
*
|
|
2613
|
+
* <PropertyReference name="reloadMessages" type="(messageId: string) => Promise<void>">
|
|
2614
|
+
* Regenerate the response for a specific message by ID
|
|
2615
|
+
* </PropertyReference>
|
|
2616
|
+
*
|
|
2617
|
+
* <PropertyReference name="stopGeneration" type="() => void">
|
|
2618
|
+
* Stop the current message generation process
|
|
2619
|
+
* </PropertyReference>
|
|
2620
|
+
*
|
|
2621
|
+
* <PropertyReference name="reset" type="() => void">
|
|
2622
|
+
* Clear all messages and reset chat state completely
|
|
2623
|
+
* </PropertyReference>
|
|
2624
|
+
*
|
|
2625
|
+
* <PropertyReference name="isLoading" type="boolean">
|
|
2626
|
+
* Whether the chat is currently generating a response
|
|
2627
|
+
* </PropertyReference>
|
|
2628
|
+
*
|
|
2629
|
+
* <PropertyReference name="runChatCompletion" type="() => Promise<Message[]>">
|
|
2630
|
+
* Manually trigger chat completion for advanced usage
|
|
2631
|
+
* </PropertyReference>
|
|
2632
|
+
*
|
|
2633
|
+
* <PropertyReference name="mcpServers" type="MCPServerConfig[]">
|
|
2634
|
+
* Array of Model Context Protocol server configurations
|
|
2635
|
+
* </PropertyReference>
|
|
2636
|
+
*
|
|
2637
|
+
* <PropertyReference name="setMcpServers" type="(servers: MCPServerConfig[]) => void">
|
|
2638
|
+
* Update MCP server configurations for enhanced context
|
|
2639
|
+
* </PropertyReference>
|
|
2640
|
+
*
|
|
2641
|
+
* <PropertyReference name="suggestions" type="SuggestionItem[]">
|
|
2642
|
+
* Current suggestions array for reading or manual control
|
|
2643
|
+
* </PropertyReference>
|
|
2644
|
+
*
|
|
2645
|
+
* <PropertyReference name="setSuggestions" type="(suggestions: SuggestionItem[]) => void">
|
|
2646
|
+
* Manually set suggestions for custom workflows
|
|
2647
|
+
* </PropertyReference>
|
|
2648
|
+
*
|
|
2649
|
+
* <PropertyReference name="generateSuggestions" type="() => Promise<void>">
|
|
2650
|
+
* Trigger AI-powered suggestion generation using configured settings
|
|
2651
|
+
* </PropertyReference>
|
|
2652
|
+
*
|
|
2653
|
+
* <PropertyReference name="resetSuggestions" type="() => void">
|
|
2654
|
+
* Clear all current suggestions and reset generation state
|
|
2655
|
+
* </PropertyReference>
|
|
2656
|
+
*
|
|
2657
|
+
* <PropertyReference name="isLoadingSuggestions" type="boolean">
|
|
2658
|
+
* Whether suggestions are currently being generated
|
|
2659
|
+
* </PropertyReference>
|
|
2660
|
+
*
|
|
2661
|
+
* <PropertyReference name="interrupt" type="string | React.ReactElement | null">
|
|
2662
|
+
* Interrupt content for human-in-the-loop workflows
|
|
2663
|
+
* </PropertyReference>
|
|
2664
|
+
*/
|
|
2665
|
+
const createNonFunctionalReturn = () => ({
|
|
2666
|
+
visibleMessages: [],
|
|
2667
|
+
messages: [],
|
|
2668
|
+
sendMessage: async () => {},
|
|
2669
|
+
appendMessage: async () => {},
|
|
2670
|
+
setMessages: () => {},
|
|
2671
|
+
deleteMessage: () => {},
|
|
2672
|
+
reloadMessages: async () => {},
|
|
2673
|
+
stopGeneration: () => {},
|
|
2674
|
+
reset: () => {},
|
|
2675
|
+
isLoading: false,
|
|
2676
|
+
isAvailable: false,
|
|
2677
|
+
runChatCompletion: async () => [],
|
|
2678
|
+
mcpServers: [],
|
|
2679
|
+
setMcpServers: () => {},
|
|
2680
|
+
suggestions: [],
|
|
2681
|
+
setSuggestions: () => {},
|
|
2682
|
+
generateSuggestions: async () => {},
|
|
2683
|
+
resetSuggestions: () => {},
|
|
2684
|
+
isLoadingSuggestions: false,
|
|
2685
|
+
interrupt: null
|
|
2686
|
+
});
|
|
2687
|
+
/**
|
|
2688
|
+
* Enterprise React hook that provides complete chat functionality for fully custom UI implementations.
|
|
2689
|
+
* Includes all advanced features like direct message access, suggestions array, interrupt handling, and MCP support.
|
|
2690
|
+
*
|
|
2691
|
+
* **Requires a publicApiKey** - Sign up for free at https://cloud.copilotkit.ai/
|
|
2692
|
+
*
|
|
2693
|
+
* @param options - Configuration options for the chat
|
|
2694
|
+
* @returns Complete chat interface with all enterprise features
|
|
2695
|
+
*
|
|
2696
|
+
* @example
|
|
2697
|
+
* ```tsx
|
|
2698
|
+
* const { messages, sendMessage, suggestions, interrupt } = useCopilotChatHeadless_c();
|
|
2699
|
+
* ```
|
|
2700
|
+
*/
|
|
2701
|
+
function useCopilotChatHeadless_c(options = {}) {
|
|
2702
|
+
const { copilotApiConfig, setBannerError } = useCopilotContext();
|
|
2703
|
+
const hasPublicApiKey = Boolean(copilotApiConfig.publicApiKey);
|
|
2704
|
+
const internalResult = useCopilotChatInternal(options);
|
|
2705
|
+
useEffect(() => {
|
|
2706
|
+
if (!hasPublicApiKey) {
|
|
2707
|
+
setBannerError(new CopilotKitError({
|
|
2708
|
+
message: "You're using useCopilotChatHeadless_c, a premium-only feature, which offers extensive headless chat capabilities. To continue, you'll need to provide a free public license key.",
|
|
2709
|
+
code: CopilotKitErrorCode.MISSING_PUBLIC_API_KEY_ERROR,
|
|
2710
|
+
severity: Severity.WARNING,
|
|
2711
|
+
visibility: ErrorVisibility.BANNER
|
|
2712
|
+
}));
|
|
2713
|
+
styledConsole.logCopilotKitPlatformMessage();
|
|
2714
|
+
} else setBannerError(null);
|
|
2715
|
+
}, [hasPublicApiKey]);
|
|
2716
|
+
if (hasPublicApiKey) return internalResult;
|
|
2717
|
+
return createNonFunctionalReturn();
|
|
2718
|
+
}
|
|
2719
|
+
|
|
2720
|
+
//#endregion
|
|
2721
|
+
//#region src/hooks/use-frontend-tool.ts
|
|
2722
|
+
function useFrontendTool(tool, dependencies) {
|
|
2723
|
+
const { name, description, parameters, render, followUp, available } = tool;
|
|
2724
|
+
const zodParameters = getZodParameters(parameters);
|
|
2725
|
+
const renderRef = useRef(render);
|
|
2726
|
+
useEffect(() => {
|
|
2727
|
+
renderRef.current = render;
|
|
2728
|
+
}, [render, ...dependencies ?? []]);
|
|
2729
|
+
const normalizedRender = useMemo(() => {
|
|
2730
|
+
if (typeof render === "undefined") return;
|
|
2731
|
+
return ((args) => {
|
|
2732
|
+
const currentRender = renderRef.current;
|
|
2733
|
+
if (typeof currentRender === "undefined") return null;
|
|
2734
|
+
if (typeof currentRender === "string") return React.createElement(React.Fragment, null, currentRender);
|
|
2735
|
+
const rendered = currentRender({
|
|
2736
|
+
...args,
|
|
2737
|
+
result: typeof args.result === "string" ? parseJson(args.result, args.result) : args.result
|
|
2738
|
+
});
|
|
2739
|
+
if (typeof rendered === "string") return React.createElement(React.Fragment, null, rendered);
|
|
2740
|
+
return rendered ?? null;
|
|
2741
|
+
});
|
|
2742
|
+
}, []);
|
|
2743
|
+
const handlerRef = useRef(tool.handler);
|
|
2744
|
+
useEffect(() => {
|
|
2745
|
+
handlerRef.current = tool.handler;
|
|
2746
|
+
}, [tool.handler, ...dependencies ?? []]);
|
|
2747
|
+
useFrontendTool$1({
|
|
2748
|
+
name,
|
|
2749
|
+
description,
|
|
2750
|
+
parameters: zodParameters,
|
|
2751
|
+
handler: tool.handler ? (args) => handlerRef.current?.(args) : void 0,
|
|
2752
|
+
followUp,
|
|
2753
|
+
render: normalizedRender,
|
|
2754
|
+
available: available === void 0 ? void 0 : available !== "disabled"
|
|
2755
|
+
});
|
|
2756
|
+
}
|
|
2757
|
+
|
|
2758
|
+
//#endregion
|
|
2759
|
+
//#region src/hooks/use-render-tool-call.ts
|
|
2760
|
+
function useRenderToolCall(tool, dependencies) {
|
|
2761
|
+
const { copilotkit } = useCopilotKit();
|
|
2762
|
+
const hasAddedRef = useRef(false);
|
|
2763
|
+
useEffect(() => {
|
|
2764
|
+
const { name, parameters, render } = tool;
|
|
2765
|
+
const zodParameters = getZodParameters(parameters);
|
|
2766
|
+
const renderToolCall = name === "*" ? defineToolCallRenderer({
|
|
2767
|
+
name: "*",
|
|
2768
|
+
render: ((args) => {
|
|
2769
|
+
return render({
|
|
2770
|
+
...args,
|
|
2771
|
+
result: args.result ? parseJson(args.result, args.result) : args.result
|
|
2772
|
+
});
|
|
2773
|
+
})
|
|
2774
|
+
}) : defineToolCallRenderer({
|
|
2775
|
+
name,
|
|
2776
|
+
args: zodParameters,
|
|
2777
|
+
render: ((args) => {
|
|
2778
|
+
return render({
|
|
2779
|
+
...args,
|
|
2780
|
+
result: args.result ? parseJson(args.result, args.result) : args.result
|
|
2781
|
+
});
|
|
2782
|
+
})
|
|
2783
|
+
});
|
|
2784
|
+
const existingIndex = copilotkit.renderToolCalls.findIndex((r) => r.name === name);
|
|
2785
|
+
if (existingIndex !== -1) copilotkit.renderToolCalls.splice(existingIndex, 1);
|
|
2786
|
+
copilotkit.renderToolCalls.push(renderToolCall);
|
|
2787
|
+
hasAddedRef.current = true;
|
|
2788
|
+
return () => {
|
|
2789
|
+
if (hasAddedRef.current) {
|
|
2790
|
+
const index = copilotkit.renderToolCalls.findIndex((r) => r.name === name);
|
|
2791
|
+
if (index !== -1) copilotkit.renderToolCalls.splice(index, 1);
|
|
2792
|
+
hasAddedRef.current = false;
|
|
2793
|
+
}
|
|
2794
|
+
};
|
|
2795
|
+
}, [tool, ...dependencies ?? []]);
|
|
2796
|
+
}
|
|
2797
|
+
|
|
2798
|
+
//#endregion
|
|
2799
|
+
//#region src/hooks/use-human-in-the-loop.ts
|
|
2800
|
+
function useHumanInTheLoop(tool, dependencies) {
|
|
2801
|
+
const { render, ...toolRest } = tool;
|
|
2802
|
+
const { name, description, parameters, followUp } = toolRest;
|
|
2803
|
+
const zodParameters = getZodParameters(parameters);
|
|
2804
|
+
const renderRef = useRef(null);
|
|
2805
|
+
useEffect(() => {
|
|
2806
|
+
renderRef.current = (args) => {
|
|
2807
|
+
if (typeof render === "string") return React.createElement(React.Fragment, null, render);
|
|
2808
|
+
if (!render) return null;
|
|
2809
|
+
const rendered = render((() => {
|
|
2810
|
+
const mappedArgs = args.args;
|
|
2811
|
+
switch (args.status) {
|
|
2812
|
+
case ToolCallStatus.InProgress: return {
|
|
2813
|
+
args: mappedArgs,
|
|
2814
|
+
respond: args.respond,
|
|
2815
|
+
status: args.status,
|
|
2816
|
+
handler: void 0
|
|
2817
|
+
};
|
|
2818
|
+
case ToolCallStatus.Executing: return {
|
|
2819
|
+
args: mappedArgs,
|
|
2820
|
+
respond: args.respond,
|
|
2821
|
+
status: args.status,
|
|
2822
|
+
handler: () => {}
|
|
2823
|
+
};
|
|
2824
|
+
case ToolCallStatus.Complete: return {
|
|
2825
|
+
args: mappedArgs,
|
|
2826
|
+
respond: args.respond,
|
|
2827
|
+
status: args.status,
|
|
2828
|
+
result: args.result ? parseJson(args.result, args.result) : args.result,
|
|
2829
|
+
handler: void 0
|
|
2830
|
+
};
|
|
2831
|
+
default: throw new CopilotKitError({
|
|
2832
|
+
code: CopilotKitErrorCode.UNKNOWN,
|
|
2833
|
+
message: `Invalid tool call status: ${args.status}`
|
|
2834
|
+
});
|
|
2835
|
+
}
|
|
2836
|
+
})());
|
|
2837
|
+
if (typeof rendered === "string") return React.createElement(React.Fragment, null, rendered);
|
|
2838
|
+
return rendered ?? null;
|
|
2839
|
+
};
|
|
2840
|
+
}, [render, ...dependencies ?? []]);
|
|
2841
|
+
useHumanInTheLoop$1({
|
|
2842
|
+
name,
|
|
2843
|
+
description,
|
|
2844
|
+
followUp,
|
|
2845
|
+
parameters: zodParameters,
|
|
2846
|
+
render: ((args) => renderRef.current?.(args) ?? null)
|
|
2847
|
+
});
|
|
2848
|
+
}
|
|
2849
|
+
|
|
2850
|
+
//#endregion
|
|
2851
|
+
//#region src/hooks/use-copilot-action.ts
|
|
2852
|
+
/**
|
|
2853
|
+
* Example usage of useCopilotAction with complex parameters:
|
|
2854
|
+
*
|
|
2855
|
+
* @example
|
|
2856
|
+
* useCopilotAction({
|
|
2857
|
+
* name: "myAction",
|
|
2858
|
+
* parameters: [
|
|
2859
|
+
* { name: "arg1", type: "string", enum: ["option1", "option2", "option3"], required: false },
|
|
2860
|
+
* { name: "arg2", type: "number" },
|
|
2861
|
+
* {
|
|
2862
|
+
* name: "arg3",
|
|
2863
|
+
* type: "object",
|
|
2864
|
+
* attributes: [
|
|
2865
|
+
* { name: "nestedArg1", type: "boolean" },
|
|
2866
|
+
* { name: "xyz", required: false },
|
|
2867
|
+
* ],
|
|
2868
|
+
* },
|
|
2869
|
+
* { name: "arg4", type: "number[]" },
|
|
2870
|
+
* ],
|
|
2871
|
+
* handler: ({ arg1, arg2, arg3, arg4 }) => {
|
|
2872
|
+
* const x = arg3.nestedArg1;
|
|
2873
|
+
* const z = arg3.xyz;
|
|
2874
|
+
* console.log(arg1, arg2, arg3);
|
|
2875
|
+
* },
|
|
2876
|
+
* });
|
|
2877
|
+
*
|
|
2878
|
+
* @example
|
|
2879
|
+
* // Simple action without parameters
|
|
2880
|
+
* useCopilotAction({
|
|
2881
|
+
* name: "myAction",
|
|
2882
|
+
* handler: () => {
|
|
2883
|
+
* console.log("No parameters provided.");
|
|
2884
|
+
* },
|
|
2885
|
+
* });
|
|
2886
|
+
*
|
|
2887
|
+
* @example
|
|
2888
|
+
* // Interactive action with UI rendering and response handling
|
|
2889
|
+
* useCopilotAction({
|
|
2890
|
+
* name: "handleMeeting",
|
|
2891
|
+
* description: "Handle a meeting by booking or canceling",
|
|
2892
|
+
* parameters: [
|
|
2893
|
+
* {
|
|
2894
|
+
* name: "meeting",
|
|
2895
|
+
* type: "string",
|
|
2896
|
+
* description: "The meeting to handle",
|
|
2897
|
+
* required: true,
|
|
2898
|
+
* },
|
|
2899
|
+
* {
|
|
2900
|
+
* name: "date",
|
|
2901
|
+
* type: "string",
|
|
2902
|
+
* description: "The date of the meeting",
|
|
2903
|
+
* required: true,
|
|
2904
|
+
* },
|
|
2905
|
+
* {
|
|
2906
|
+
* name: "title",
|
|
2907
|
+
* type: "string",
|
|
2908
|
+
* description: "The title of the meeting",
|
|
2909
|
+
* required: true,
|
|
2910
|
+
* },
|
|
2911
|
+
* ],
|
|
2912
|
+
* renderAndWaitForResponse: ({ args, respond, status }) => {
|
|
2913
|
+
* const { meeting, date, title } = args;
|
|
2914
|
+
* return (
|
|
2915
|
+
* <MeetingConfirmationDialog
|
|
2916
|
+
* meeting={meeting}
|
|
2917
|
+
* date={date}
|
|
2918
|
+
* title={title}
|
|
2919
|
+
* onConfirm={() => respond('meeting confirmed')}
|
|
2920
|
+
* onCancel={() => respond('meeting canceled')}
|
|
2921
|
+
* />
|
|
2922
|
+
* );
|
|
2923
|
+
* },
|
|
2924
|
+
* });
|
|
2925
|
+
*
|
|
2926
|
+
* @example
|
|
2927
|
+
* // Catch all action allows you to render actions that are not defined in the frontend
|
|
2928
|
+
* useCopilotAction({
|
|
2929
|
+
* name: "*",
|
|
2930
|
+
* render: ({ name, args, status, result, handler, respond }) => {
|
|
2931
|
+
* return <div>Rendering action: {name}</div>;
|
|
2932
|
+
* },
|
|
2933
|
+
* });
|
|
2934
|
+
*/
|
|
2935
|
+
/**
|
|
2936
|
+
* <img src="https://cdn.copilotkit.ai/docs/copilotkit/images/use-copilot-action/useCopilotAction.gif" width="500" />
|
|
2937
|
+
* `useCopilotAction` is a React hook that you can use in your application to provide
|
|
2938
|
+
* custom actions that can be called by the AI. Essentially, it allows the Copilot to
|
|
2939
|
+
* execute these actions contextually during a chat, based on the user's interactions
|
|
2940
|
+
* and needs.
|
|
2941
|
+
*
|
|
2942
|
+
* Here's how it works:
|
|
2943
|
+
*
|
|
2944
|
+
* Use `useCopilotAction` to set up actions that the Copilot can call. To provide
|
|
2945
|
+
* more context to the Copilot, you can provide it with a `description` (for example to explain
|
|
2946
|
+
* what the action does, under which conditions it can be called, etc.).
|
|
2947
|
+
*
|
|
2948
|
+
* Then you define the parameters of the action, which can be simple, e.g. primitives like strings or numbers,
|
|
2949
|
+
* or complex, e.g. objects or arrays.
|
|
2950
|
+
*
|
|
2951
|
+
* Finally, you provide a `handler` function that receives the parameters and returns a result.
|
|
2952
|
+
* CopilotKit takes care of automatically inferring the parameter types, so you get type safety
|
|
2953
|
+
* and autocompletion for free.
|
|
2954
|
+
*
|
|
2955
|
+
* To render a custom UI for the action, you can provide a `render()` function. This function
|
|
2956
|
+
* lets you render a custom component or return a string to display.
|
|
2957
|
+
*
|
|
2958
|
+
* ## Usage
|
|
2959
|
+
*
|
|
2960
|
+
* ### Simple Usage
|
|
2961
|
+
*
|
|
2962
|
+
* ```tsx
|
|
2963
|
+
* useCopilotAction({
|
|
2964
|
+
* name: "sayHello",
|
|
2965
|
+
* description: "Say hello to someone.",
|
|
2966
|
+
* parameters: [
|
|
2967
|
+
* {
|
|
2968
|
+
* name: "name",
|
|
2969
|
+
* type: "string",
|
|
2970
|
+
* description: "name of the person to say greet",
|
|
2971
|
+
* },
|
|
2972
|
+
* ],
|
|
2973
|
+
* handler: async ({ name }) => {
|
|
2974
|
+
* alert(`Hello, ${name}!`);
|
|
2975
|
+
* },
|
|
2976
|
+
* });
|
|
2977
|
+
* ```
|
|
2978
|
+
*
|
|
2979
|
+
* ## Generative UI
|
|
2980
|
+
*
|
|
2981
|
+
* This hooks enables you to dynamically generate UI elements and render them in the copilot chat. For more information, check out the [Generative UI](/guides/generative-ui) page.
|
|
2982
|
+
*/
|
|
2983
|
+
function getActionConfig(action) {
|
|
2984
|
+
if (action.name === "*") return {
|
|
2985
|
+
type: "render",
|
|
2986
|
+
action
|
|
2987
|
+
};
|
|
2988
|
+
if ("renderAndWaitForResponse" in action || "renderAndWait" in action) {
|
|
2989
|
+
let render = action.render;
|
|
2990
|
+
if (!render && "renderAndWaitForResponse" in action) render = action.renderAndWaitForResponse;
|
|
2991
|
+
if (!render && "renderAndWait" in action) render = action.renderAndWait;
|
|
2992
|
+
return {
|
|
2993
|
+
type: "hitl",
|
|
2994
|
+
action: {
|
|
2995
|
+
...action,
|
|
2996
|
+
render
|
|
2997
|
+
}
|
|
2998
|
+
};
|
|
2999
|
+
}
|
|
3000
|
+
if ("available" in action) {
|
|
3001
|
+
if (action.available === "enabled" || action.available === "remote") return {
|
|
3002
|
+
type: "frontend",
|
|
3003
|
+
action
|
|
3004
|
+
};
|
|
3005
|
+
if (action.available === "frontend" || action.available === "disabled") return {
|
|
3006
|
+
type: "render",
|
|
3007
|
+
action
|
|
3008
|
+
};
|
|
3009
|
+
}
|
|
3010
|
+
if ("handler" in action) return {
|
|
3011
|
+
type: "frontend",
|
|
3012
|
+
action
|
|
3013
|
+
};
|
|
3014
|
+
throw new Error("Invalid action configuration");
|
|
3015
|
+
}
|
|
3016
|
+
/**
|
|
3017
|
+
* useCopilotAction is a legacy hook maintained for backwards compatibility.
|
|
3018
|
+
*
|
|
3019
|
+
* To avoid violating React's Rules of Hooks (which prohibit conditional hook calls),
|
|
3020
|
+
* we use a registration pattern:
|
|
3021
|
+
* 1. This hook registers the action configuration with the CopilotContext
|
|
3022
|
+
* 2. A renderer component in CopilotKit actually renders the appropriate hook wrapper
|
|
3023
|
+
* 3. React properly manages hook state since components are rendered, not conditionally called
|
|
3024
|
+
*
|
|
3025
|
+
* This allows action types to change between renders without corrupting React's hook state.
|
|
3026
|
+
*/
|
|
3027
|
+
function useCopilotAction(action, dependencies) {
|
|
3028
|
+
const [initialActionConfig] = useState(getActionConfig(action));
|
|
3029
|
+
const currentActionConfig = getActionConfig(action);
|
|
3030
|
+
/**
|
|
3031
|
+
* Calling hooks conditionally violates React's Rules of Hooks. This rule exists because
|
|
3032
|
+
* React maintains the call stack for hooks like useEffect or useState, and conditionally
|
|
3033
|
+
* calling a hook would result in inconsistent call stacks between renders.
|
|
3034
|
+
*
|
|
3035
|
+
* Unfortunately, useCopilotAction _has_ to conditionally call a hook based on the
|
|
3036
|
+
* supplied parameters. In order to avoid breaking React's call stack tracking, while
|
|
3037
|
+
* breaking the Rule of Hooks, we use a ref to store the initial action configuration
|
|
3038
|
+
* and throw an error if the _configuration_ changes such that we would call a different hook.
|
|
3039
|
+
*/
|
|
3040
|
+
if (initialActionConfig.type !== currentActionConfig.type) throw new Error("Action configuration changed between renders");
|
|
3041
|
+
switch (currentActionConfig.type) {
|
|
3042
|
+
case "render": return useRenderToolCall(currentActionConfig.action, dependencies);
|
|
3043
|
+
case "hitl": return useHumanInTheLoop(currentActionConfig.action, dependencies);
|
|
3044
|
+
case "frontend": return useFrontendTool(currentActionConfig.action, dependencies);
|
|
3045
|
+
default: throw new Error("Invalid action configuration");
|
|
3046
|
+
}
|
|
3047
|
+
}
|
|
3048
|
+
|
|
3049
|
+
//#endregion
|
|
3050
|
+
//#region src/hooks/use-coagent-state-render.ts
|
|
3051
|
+
/**
|
|
3052
|
+
* The useCoAgentStateRender hook allows you to render UI or text based components on a Agentic Copilot's state in the chat.
|
|
3053
|
+
* This is particularly useful for showing intermediate state or progress during Agentic Copilot operations.
|
|
3054
|
+
*
|
|
3055
|
+
* ## Usage
|
|
3056
|
+
*
|
|
3057
|
+
* ### Simple Usage
|
|
3058
|
+
*
|
|
3059
|
+
* ```tsx
|
|
3060
|
+
* import { useCoAgentStateRender } from "@copilotkit/react-core";
|
|
3061
|
+
*
|
|
3062
|
+
* type YourAgentState = {
|
|
3063
|
+
* agent_state_property: string;
|
|
3064
|
+
* }
|
|
3065
|
+
*
|
|
3066
|
+
* useCoAgentStateRender<YourAgentState>({
|
|
3067
|
+
* name: "basic_agent",
|
|
3068
|
+
* nodeName: "optionally_specify_a_specific_node",
|
|
3069
|
+
* render: ({ status, state, nodeName }) => {
|
|
3070
|
+
* return (
|
|
3071
|
+
* <YourComponent
|
|
3072
|
+
* agentStateProperty={state.agent_state_property}
|
|
3073
|
+
* status={status}
|
|
3074
|
+
* nodeName={nodeName}
|
|
3075
|
+
* />
|
|
3076
|
+
* );
|
|
3077
|
+
* },
|
|
3078
|
+
* });
|
|
3079
|
+
* ```
|
|
3080
|
+
*
|
|
3081
|
+
* This allows for you to render UI components or text based on what is happening within the agent.
|
|
3082
|
+
*
|
|
3083
|
+
* ### Example
|
|
3084
|
+
* A great example of this is in our Perplexity Clone where we render the progress of an agent's internet search as it is happening.
|
|
3085
|
+
* You can play around with it below or learn how to build it with its [demo](/coagents/videos/perplexity-clone).
|
|
3086
|
+
*
|
|
3087
|
+
* <Callout type="info">
|
|
3088
|
+
* This example is hosted on Vercel and may take a few seconds to load.
|
|
3089
|
+
* </Callout>
|
|
3090
|
+
*
|
|
3091
|
+
* <iframe src="https://examples-coagents-ai-researcher-ui.vercel.app/" className="w-full rounded-lg border h-[700px] my-4" />
|
|
3092
|
+
*/
|
|
3093
|
+
/**
|
|
3094
|
+
* This hook is used to render agent state with custom UI components or text. This is particularly
|
|
3095
|
+
* useful for showing intermediate state or progress during Agentic Copilot operations.
|
|
3096
|
+
* To get started using rendering intermediate state through this hook, checkout the documentation.
|
|
3097
|
+
*
|
|
3098
|
+
* https://docs.copilotkit.ai/coagents/shared-state/predictive-state-updates
|
|
3099
|
+
*/
|
|
3100
|
+
function useCoAgentStateRender(action, dependencies) {
|
|
3101
|
+
const { chatComponentsCache, availableAgents } = useContext(CopilotContext);
|
|
3102
|
+
const { setCoAgentStateRender, removeCoAgentStateRender, coAgentStateRenders } = useCoAgentStateRenders();
|
|
3103
|
+
const idRef = useRef(randomId());
|
|
3104
|
+
const { setBannerError, addToast } = useToast();
|
|
3105
|
+
useEffect(() => {
|
|
3106
|
+
if (availableAgents?.length && !availableAgents.some((a) => a.name === action.name)) {
|
|
3107
|
+
`${action.name}`;
|
|
3108
|
+
setBannerError(new CopilotKitAgentDiscoveryError({
|
|
3109
|
+
agentName: action.name,
|
|
3110
|
+
availableAgents: availableAgents.map((a) => ({
|
|
3111
|
+
name: a.name,
|
|
3112
|
+
id: a.id
|
|
3113
|
+
}))
|
|
3114
|
+
}));
|
|
3115
|
+
}
|
|
3116
|
+
}, [availableAgents]);
|
|
3117
|
+
const key = `${action.name}-${action.nodeName || "global"}`;
|
|
3118
|
+
if (dependencies === void 0) {
|
|
3119
|
+
if (coAgentStateRenders[idRef.current]) {
|
|
3120
|
+
coAgentStateRenders[idRef.current].handler = action.handler;
|
|
3121
|
+
if (typeof action.render === "function") {
|
|
3122
|
+
if (chatComponentsCache.current !== null) chatComponentsCache.current.coAgentStateRenders[key] = action.render;
|
|
3123
|
+
}
|
|
3124
|
+
}
|
|
3125
|
+
}
|
|
3126
|
+
useEffect(() => {
|
|
3127
|
+
const currentId = idRef.current;
|
|
3128
|
+
if (Object.entries(coAgentStateRenders).some(([id, otherAction]) => {
|
|
3129
|
+
if (id === currentId) return false;
|
|
3130
|
+
if (otherAction.name !== action.name) return false;
|
|
3131
|
+
const hasNodeName = !!action.nodeName;
|
|
3132
|
+
const hasOtherNodeName = !!otherAction.nodeName;
|
|
3133
|
+
if (!hasNodeName && !hasOtherNodeName) return true;
|
|
3134
|
+
if (hasNodeName !== hasOtherNodeName) return false;
|
|
3135
|
+
return action.nodeName === otherAction.nodeName;
|
|
3136
|
+
})) addToast({
|
|
3137
|
+
type: "warning",
|
|
3138
|
+
message: action.nodeName ? `Found multiple state renders for agent ${action.name} and node ${action.nodeName}. State renders might get overridden` : `Found multiple state renders for agent ${action.name}. State renders might get overridden`,
|
|
3139
|
+
id: `dup-action-${action.name}`
|
|
3140
|
+
});
|
|
3141
|
+
}, [coAgentStateRenders]);
|
|
3142
|
+
useEffect(() => {
|
|
3143
|
+
setCoAgentStateRender(idRef.current, action);
|
|
3144
|
+
if (chatComponentsCache.current !== null && action.render !== void 0) chatComponentsCache.current.coAgentStateRenders[key] = action.render;
|
|
3145
|
+
return () => {
|
|
3146
|
+
removeCoAgentStateRender(idRef.current);
|
|
3147
|
+
};
|
|
3148
|
+
}, [
|
|
3149
|
+
setCoAgentStateRender,
|
|
3150
|
+
removeCoAgentStateRender,
|
|
3151
|
+
action.name,
|
|
3152
|
+
typeof action.render === "string" ? action.render : void 0,
|
|
3153
|
+
...dependencies || []
|
|
3154
|
+
]);
|
|
3155
|
+
}
|
|
3156
|
+
|
|
3157
|
+
//#endregion
|
|
3158
|
+
//#region src/hooks/use-make-copilot-document-readable.ts
|
|
3159
|
+
/**
|
|
3160
|
+
* Makes a document readable by Copilot.
|
|
3161
|
+
* @param document The document to make readable.
|
|
3162
|
+
* @param categories The categories to associate with the document.
|
|
3163
|
+
* @param dependencies The dependencies to use for the effect.
|
|
3164
|
+
* @returns The id of the document.
|
|
3165
|
+
*/
|
|
3166
|
+
function useMakeCopilotDocumentReadable(document, categories, dependencies = []) {
|
|
3167
|
+
const { addDocumentContext, removeDocumentContext } = useCopilotContext();
|
|
3168
|
+
const idRef = useRef(void 0);
|
|
3169
|
+
useEffect(() => {
|
|
3170
|
+
const id = addDocumentContext(document, categories);
|
|
3171
|
+
idRef.current = id;
|
|
3172
|
+
return () => {
|
|
3173
|
+
removeDocumentContext(id);
|
|
3174
|
+
};
|
|
3175
|
+
}, [
|
|
3176
|
+
addDocumentContext,
|
|
3177
|
+
removeDocumentContext,
|
|
3178
|
+
...dependencies
|
|
3179
|
+
]);
|
|
3180
|
+
return idRef.current;
|
|
3181
|
+
}
|
|
3182
|
+
|
|
3183
|
+
//#endregion
|
|
3184
|
+
//#region src/hooks/use-copilot-readable.ts
|
|
3185
|
+
/**
|
|
3186
|
+
* `useCopilotReadable` is a React hook that provides app-state and other information
|
|
3187
|
+
* to the Copilot. Optionally, the hook can also handle hierarchical state within your
|
|
3188
|
+
* application, passing these parent-child relationships to the Copilot.
|
|
3189
|
+
*
|
|
3190
|
+
* ## Usage
|
|
3191
|
+
*
|
|
3192
|
+
* ### Simple Usage
|
|
3193
|
+
*
|
|
3194
|
+
* In its most basic usage, useCopilotReadable accepts a single string argument
|
|
3195
|
+
* representing any piece of app state, making it available for the Copilot to use
|
|
3196
|
+
* as context when responding to user input.
|
|
3197
|
+
*
|
|
3198
|
+
* ```tsx
|
|
3199
|
+
* import { useCopilotReadable } from "@copilotkit/react-core";
|
|
3200
|
+
*
|
|
3201
|
+
* export function MyComponent() {
|
|
3202
|
+
* const [employees, setEmployees] = useState([]);
|
|
3203
|
+
*
|
|
3204
|
+
* useCopilotReadable({
|
|
3205
|
+
* description: "The list of employees",
|
|
3206
|
+
* value: employees,
|
|
3207
|
+
* });
|
|
3208
|
+
* }
|
|
3209
|
+
* ```
|
|
3210
|
+
*
|
|
3211
|
+
* ### Nested Components
|
|
3212
|
+
*
|
|
3213
|
+
* Optionally, you can maintain the hierarchical structure of information by passing
|
|
3214
|
+
* `parentId`. This allows you to use `useCopilotReadable` in nested components:
|
|
3215
|
+
*
|
|
3216
|
+
* ```tsx /employeeContextId/1 {17,23}
|
|
3217
|
+
* import { useCopilotReadable } from "@copilotkit/react-core";
|
|
3218
|
+
*
|
|
3219
|
+
* function Employee(props: EmployeeProps) {
|
|
3220
|
+
* const { employeeName, workProfile, metadata } = props;
|
|
3221
|
+
*
|
|
3222
|
+
* // propagate any information to copilot
|
|
3223
|
+
* const employeeContextId = useCopilotReadable({
|
|
3224
|
+
* description: "Employee name",
|
|
3225
|
+
* value: employeeName
|
|
3226
|
+
* });
|
|
3227
|
+
*
|
|
3228
|
+
* // Pass a parentID to maintain a hierarchical structure.
|
|
3229
|
+
* // Especially useful with child React components, list elements, etc.
|
|
3230
|
+
* useCopilotReadable({
|
|
3231
|
+
* description: "Work profile",
|
|
3232
|
+
* value: workProfile.description(),
|
|
3233
|
+
* parentId: employeeContextId
|
|
3234
|
+
* });
|
|
3235
|
+
*
|
|
3236
|
+
* useCopilotReadable({
|
|
3237
|
+
* description: "Employee metadata",
|
|
3238
|
+
* value: metadata.description(),
|
|
3239
|
+
* parentId: employeeContextId
|
|
3240
|
+
* });
|
|
3241
|
+
*
|
|
3242
|
+
* return (
|
|
3243
|
+
* // Render as usual...
|
|
3244
|
+
* );
|
|
3245
|
+
* }
|
|
3246
|
+
* ```
|
|
3247
|
+
*/
|
|
3248
|
+
/**
|
|
3249
|
+
* Adds the given information to the Copilot context to make it readable by Copilot.
|
|
3250
|
+
*/
|
|
3251
|
+
function useCopilotReadable({ description, value, convert, available }, dependencies) {
|
|
3252
|
+
const { copilotkit } = useCopilotKit();
|
|
3253
|
+
const ctxIdRef = useRef(void 0);
|
|
3254
|
+
useEffect(() => {
|
|
3255
|
+
if (!copilotkit) return;
|
|
3256
|
+
const found = Object.entries(copilotkit.context).find(([id, ctxItem]) => {
|
|
3257
|
+
return JSON.stringify({
|
|
3258
|
+
description,
|
|
3259
|
+
value
|
|
3260
|
+
}) == JSON.stringify(ctxItem);
|
|
3261
|
+
});
|
|
3262
|
+
if (found) {
|
|
3263
|
+
ctxIdRef.current = found[0];
|
|
3264
|
+
if (available === "disabled") copilotkit.removeContext(ctxIdRef.current);
|
|
3265
|
+
return;
|
|
3266
|
+
}
|
|
3267
|
+
if (!found && available === "disabled") return;
|
|
3268
|
+
ctxIdRef.current = copilotkit.addContext({
|
|
3269
|
+
description,
|
|
3270
|
+
value: (convert ?? JSON.stringify)(value)
|
|
3271
|
+
});
|
|
3272
|
+
return () => {
|
|
3273
|
+
if (!ctxIdRef.current) return;
|
|
3274
|
+
copilotkit.removeContext(ctxIdRef.current);
|
|
3275
|
+
};
|
|
3276
|
+
}, [
|
|
3277
|
+
description,
|
|
3278
|
+
value,
|
|
3279
|
+
convert
|
|
3280
|
+
]);
|
|
3281
|
+
return ctxIdRef.current;
|
|
3282
|
+
}
|
|
3283
|
+
|
|
3284
|
+
//#endregion
|
|
3285
|
+
//#region src/hooks/use-coagent.ts
|
|
3286
|
+
/**
|
|
3287
|
+
* <Callout type="info">
|
|
3288
|
+
* Usage of this hook assumes some additional setup in your application, for more information
|
|
3289
|
+
* on that see the CoAgents <span className="text-blue-500">[getting started guide](/coagents/quickstart/langgraph)</span>.
|
|
3290
|
+
* </Callout>
|
|
3291
|
+
* <Frame className="my-12">
|
|
3292
|
+
* <img
|
|
3293
|
+
* src="https://cdn.copilotkit.ai/docs/copilotkit/images/coagents/SharedStateCoAgents.gif"
|
|
3294
|
+
* alt="CoAgents demonstration"
|
|
3295
|
+
* className="w-auto"
|
|
3296
|
+
* />
|
|
3297
|
+
* </Frame>
|
|
3298
|
+
*
|
|
3299
|
+
* This hook is used to integrate an agent into your application. With its use, you can
|
|
3300
|
+
* render and update the state of an agent, allowing for a dynamic and interactive experience.
|
|
3301
|
+
* We call these shared state experiences agentic copilots, or CoAgents for short.
|
|
3302
|
+
*
|
|
3303
|
+
* ## Usage
|
|
3304
|
+
*
|
|
3305
|
+
* ### Simple Usage
|
|
3306
|
+
*
|
|
3307
|
+
* ```tsx
|
|
3308
|
+
* import { useCoAgent } from "@copilotkit/react-core";
|
|
3309
|
+
*
|
|
3310
|
+
* type AgentState = {
|
|
3311
|
+
* count: number;
|
|
3312
|
+
* }
|
|
3313
|
+
*
|
|
3314
|
+
* const agent = useCoAgent<AgentState>({
|
|
3315
|
+
* name: "my-agent",
|
|
3316
|
+
* initialState: {
|
|
3317
|
+
* count: 0,
|
|
3318
|
+
* },
|
|
3319
|
+
* });
|
|
3320
|
+
*
|
|
3321
|
+
* ```
|
|
3322
|
+
*
|
|
3323
|
+
* `useCoAgent` returns an object with the following properties:
|
|
3324
|
+
*
|
|
3325
|
+
* ```tsx
|
|
3326
|
+
* const {
|
|
3327
|
+
* name, // The name of the agent currently being used.
|
|
3328
|
+
* nodeName, // The name of the current LangGraph node.
|
|
3329
|
+
* state, // The current state of the agent.
|
|
3330
|
+
* setState, // A function to update the state of the agent.
|
|
3331
|
+
* running, // A boolean indicating if the agent is currently running.
|
|
3332
|
+
* start, // A function to start the agent.
|
|
3333
|
+
* stop, // A function to stop the agent.
|
|
3334
|
+
* run, // A function to re-run the agent. Takes a HintFunction to inform the agent why it is being re-run.
|
|
3335
|
+
* } = agent;
|
|
3336
|
+
* ```
|
|
3337
|
+
*
|
|
3338
|
+
* Finally we can leverage these properties to create reactive experiences with the agent!
|
|
3339
|
+
*
|
|
3340
|
+
* ```tsx
|
|
3341
|
+
* const { state, setState } = useCoAgent<AgentState>({
|
|
3342
|
+
* name: "my-agent",
|
|
3343
|
+
* initialState: {
|
|
3344
|
+
* count: 0,
|
|
3345
|
+
* },
|
|
3346
|
+
* });
|
|
3347
|
+
*
|
|
3348
|
+
* return (
|
|
3349
|
+
* <div>
|
|
3350
|
+
* <p>Count: {state.count}</p>
|
|
3351
|
+
* <button onClick={() => setState({ count: state.count + 1 })}>Increment</button>
|
|
3352
|
+
* </div>
|
|
3353
|
+
* );
|
|
3354
|
+
* ```
|
|
3355
|
+
*
|
|
3356
|
+
* This reactivity is bidirectional, meaning that changes to the state from the agent will be reflected in the UI and vice versa.
|
|
3357
|
+
*
|
|
3358
|
+
* ## Parameters
|
|
3359
|
+
* <PropertyReference name="options" type="UseCoagentOptions<T>" required>
|
|
3360
|
+
* The options to use when creating the coagent.
|
|
3361
|
+
* <PropertyReference name="name" type="string" required>
|
|
3362
|
+
* The name of the agent to use.
|
|
3363
|
+
* </PropertyReference>
|
|
3364
|
+
* <PropertyReference name="initialState" type="T | any">
|
|
3365
|
+
* The initial state of the agent.
|
|
3366
|
+
* </PropertyReference>
|
|
3367
|
+
* <PropertyReference name="state" type="T | any">
|
|
3368
|
+
* State to manage externally if you are using this hook with external state management.
|
|
3369
|
+
* </PropertyReference>
|
|
3370
|
+
* <PropertyReference name="setState" type="(newState: T | ((prevState: T | undefined) => T)) => void">
|
|
3371
|
+
* A function to update the state of the agent if you are using this hook with external state management.
|
|
3372
|
+
* </PropertyReference>
|
|
3373
|
+
* </PropertyReference>
|
|
3374
|
+
*/
|
|
3375
|
+
/**
|
|
3376
|
+
* This hook is used to integrate an agent into your application. With its use, you can
|
|
3377
|
+
* render and update the state of the agent, allowing for a dynamic and interactive experience.
|
|
3378
|
+
* We call these shared state experiences "agentic copilots". To get started using agentic copilots, which
|
|
3379
|
+
* we refer to as CoAgents, checkout the documentation at https://docs.copilotkit.ai/coagents/quickstart/langgraph.
|
|
3380
|
+
*/
|
|
3381
|
+
function useCoAgent(options) {
|
|
3382
|
+
const { agent } = useAgent({ agentId: options.name });
|
|
3383
|
+
const { copilotkit } = useCopilotKit();
|
|
3384
|
+
const nodeName = useAgentNodeName(options.name);
|
|
3385
|
+
const handleStateUpdate = useCallback((newState) => {
|
|
3386
|
+
if (!agent) return;
|
|
3387
|
+
if (typeof newState === "function") {
|
|
3388
|
+
const updater = newState;
|
|
3389
|
+
agent.setState(updater(agent.state));
|
|
3390
|
+
} else agent.setState({
|
|
3391
|
+
...agent.state,
|
|
3392
|
+
...newState
|
|
3393
|
+
});
|
|
3394
|
+
}, [agent?.state, agent?.setState]);
|
|
3395
|
+
useEffect(() => {
|
|
3396
|
+
if (!options.config && !options.configurable) return;
|
|
3397
|
+
let config = options.config ?? {};
|
|
3398
|
+
if (options.configurable) config = {
|
|
3399
|
+
...config,
|
|
3400
|
+
configurable: {
|
|
3401
|
+
...options.configurable,
|
|
3402
|
+
...config.configurable
|
|
3403
|
+
}
|
|
3404
|
+
};
|
|
3405
|
+
copilotkit.setProperties(config);
|
|
3406
|
+
}, [options.config, options.configurable]);
|
|
3407
|
+
useEffect(() => {
|
|
3408
|
+
if (agent?.state && isExternalStateManagement(options) && JSON.stringify(options.state) !== JSON.stringify(agent.state)) handleStateUpdate(options.state);
|
|
3409
|
+
}, [
|
|
3410
|
+
agent,
|
|
3411
|
+
useMemo(() => isExternalStateManagement(options) ? JSON.stringify(options.state) : void 0, [isExternalStateManagement(options) ? JSON.stringify(options.state) : void 0]),
|
|
3412
|
+
handleStateUpdate
|
|
3413
|
+
]);
|
|
3414
|
+
const hasStateValues = useCallback((value) => {
|
|
3415
|
+
return Boolean(value && Object.keys(value).length);
|
|
3416
|
+
}, []);
|
|
3417
|
+
const initialStateRef = useRef(isExternalStateManagement(options) ? options.state : "initialState" in options ? options.initialState : void 0);
|
|
3418
|
+
useEffect(() => {
|
|
3419
|
+
if (isExternalStateManagement(options)) initialStateRef.current = options.state;
|
|
3420
|
+
else if ("initialState" in options) initialStateRef.current = options.initialState;
|
|
3421
|
+
}, [isExternalStateManagement(options) ? JSON.stringify(options.state) : "initialState" in options ? JSON.stringify(options.initialState) : void 0]);
|
|
3422
|
+
useEffect(() => {
|
|
3423
|
+
if (!agent) return;
|
|
3424
|
+
const subscription = agent.subscribe({
|
|
3425
|
+
onStateChanged: (args) => {
|
|
3426
|
+
if (isExternalStateManagement(options)) options.setState(args.state);
|
|
3427
|
+
},
|
|
3428
|
+
onRunInitialized: (args) => {
|
|
3429
|
+
if (hasStateValues(args.state)) {
|
|
3430
|
+
handleStateUpdate(args.state);
|
|
3431
|
+
return;
|
|
3432
|
+
}
|
|
3433
|
+
if (hasStateValues(agent.state)) return;
|
|
3434
|
+
if (initialStateRef.current !== void 0) handleStateUpdate(initialStateRef.current);
|
|
3435
|
+
}
|
|
3436
|
+
});
|
|
3437
|
+
return () => {
|
|
3438
|
+
subscription.unsubscribe();
|
|
3439
|
+
};
|
|
3440
|
+
}, [
|
|
3441
|
+
agent,
|
|
3442
|
+
handleStateUpdate,
|
|
3443
|
+
hasStateValues
|
|
3444
|
+
]);
|
|
3445
|
+
return useMemo(() => {
|
|
3446
|
+
if (!agent) {
|
|
3447
|
+
const noop = () => {};
|
|
3448
|
+
const noopAsync = async () => {};
|
|
3449
|
+
const initialState = ("state" in options && options.state) ?? ("initialState" in options && options.initialState) ?? {};
|
|
3450
|
+
return {
|
|
3451
|
+
name: options.name,
|
|
3452
|
+
nodeName,
|
|
3453
|
+
threadId: void 0,
|
|
3454
|
+
running: false,
|
|
3455
|
+
state: initialState,
|
|
3456
|
+
setState: noop,
|
|
3457
|
+
start: noop,
|
|
3458
|
+
stop: noop,
|
|
3459
|
+
run: noopAsync
|
|
3460
|
+
};
|
|
3461
|
+
}
|
|
3462
|
+
return {
|
|
3463
|
+
name: agent?.agentId ?? options.name,
|
|
3464
|
+
nodeName,
|
|
3465
|
+
threadId: agent.threadId,
|
|
3466
|
+
running: agent.isRunning,
|
|
3467
|
+
state: agent.state,
|
|
3468
|
+
setState: handleStateUpdate,
|
|
3469
|
+
start: agent.runAgent,
|
|
3470
|
+
stop: agent.abortRun,
|
|
3471
|
+
run: agent.runAgent
|
|
3472
|
+
};
|
|
3473
|
+
}, [
|
|
3474
|
+
agent?.state,
|
|
3475
|
+
agent?.runAgent,
|
|
3476
|
+
agent?.abortRun,
|
|
3477
|
+
agent?.runAgent,
|
|
3478
|
+
agent?.threadId,
|
|
3479
|
+
agent?.isRunning,
|
|
3480
|
+
agent?.agentId,
|
|
3481
|
+
handleStateUpdate,
|
|
3482
|
+
options.name
|
|
3483
|
+
]);
|
|
3484
|
+
}
|
|
3485
|
+
const isExternalStateManagement = (options) => {
|
|
3486
|
+
return "state" in options && "setState" in options;
|
|
3487
|
+
};
|
|
3488
|
+
|
|
3489
|
+
//#endregion
|
|
3490
|
+
//#region src/hooks/use-copilot-runtime-client.ts
|
|
3491
|
+
const useCopilotRuntimeClient = (options) => {
|
|
3492
|
+
const { setBannerError } = useToast();
|
|
3493
|
+
const { showDevConsole, onError, ...runtimeOptions } = options;
|
|
3494
|
+
const lastStructuredErrorRef = useRef(null);
|
|
3495
|
+
const traceUIError = async (error, originalError) => {
|
|
3496
|
+
try {
|
|
3497
|
+
await onError({
|
|
3498
|
+
type: "error",
|
|
3499
|
+
timestamp: Date.now(),
|
|
3500
|
+
context: {
|
|
3501
|
+
source: "ui",
|
|
3502
|
+
request: {
|
|
3503
|
+
operation: "runtimeClient",
|
|
3504
|
+
url: runtimeOptions.url,
|
|
3505
|
+
startTime: Date.now()
|
|
3506
|
+
},
|
|
3507
|
+
technical: {
|
|
3508
|
+
environment: "browser",
|
|
3509
|
+
userAgent: typeof navigator !== "undefined" ? navigator.userAgent : void 0,
|
|
3510
|
+
stackTrace: originalError instanceof Error ? originalError.stack : void 0
|
|
3511
|
+
}
|
|
3512
|
+
},
|
|
3513
|
+
error
|
|
3514
|
+
});
|
|
3515
|
+
} catch (error) {
|
|
3516
|
+
console.error("Error in onError handler:", error);
|
|
3517
|
+
}
|
|
3518
|
+
};
|
|
3519
|
+
return useMemo(() => {
|
|
3520
|
+
return new CopilotRuntimeClient({
|
|
3521
|
+
...runtimeOptions,
|
|
3522
|
+
handleGQLErrors: (error) => {
|
|
3523
|
+
if (error.graphQLErrors?.length) {
|
|
3524
|
+
const graphQLErrors = error.graphQLErrors;
|
|
3525
|
+
const routeError = (gqlError) => {
|
|
3526
|
+
if (gqlError.extensions?.visibility === ErrorVisibility.SILENT) {
|
|
3527
|
+
console.error("CopilotKit Silent Error:", gqlError.message);
|
|
3528
|
+
return;
|
|
3529
|
+
}
|
|
3530
|
+
const now = Date.now();
|
|
3531
|
+
const errorMessage = gqlError.message;
|
|
3532
|
+
if (lastStructuredErrorRef.current && lastStructuredErrorRef.current.message === errorMessage && now - lastStructuredErrorRef.current.timestamp < 150) return;
|
|
3533
|
+
lastStructuredErrorRef.current = {
|
|
3534
|
+
message: errorMessage,
|
|
3535
|
+
timestamp: now
|
|
3536
|
+
};
|
|
3537
|
+
const ckError = createStructuredError(gqlError);
|
|
3538
|
+
if (ckError) {
|
|
3539
|
+
setBannerError(ckError);
|
|
3540
|
+
traceUIError(ckError, gqlError);
|
|
3541
|
+
} else {
|
|
3542
|
+
const fallbackError = new CopilotKitError({
|
|
3543
|
+
message: gqlError.message,
|
|
3544
|
+
code: CopilotKitErrorCode.UNKNOWN
|
|
3545
|
+
});
|
|
3546
|
+
setBannerError(fallbackError);
|
|
3547
|
+
traceUIError(fallbackError, gqlError);
|
|
3548
|
+
}
|
|
3549
|
+
};
|
|
3550
|
+
graphQLErrors.forEach(routeError);
|
|
3551
|
+
} else {
|
|
3552
|
+
const fallbackError = new CopilotKitError({
|
|
3553
|
+
message: error?.message || String(error),
|
|
3554
|
+
code: CopilotKitErrorCode.UNKNOWN
|
|
3555
|
+
});
|
|
3556
|
+
setBannerError(fallbackError);
|
|
3557
|
+
traceUIError(fallbackError, error);
|
|
3558
|
+
}
|
|
3559
|
+
},
|
|
3560
|
+
handleGQLWarning: (message) => {
|
|
3561
|
+
console.warn(message);
|
|
3562
|
+
setBannerError(new CopilotKitError({
|
|
3563
|
+
message,
|
|
3564
|
+
code: CopilotKitErrorCode.UNKNOWN
|
|
3565
|
+
}));
|
|
3566
|
+
}
|
|
3567
|
+
});
|
|
3568
|
+
}, [
|
|
3569
|
+
runtimeOptions,
|
|
3570
|
+
setBannerError,
|
|
3571
|
+
onError
|
|
3572
|
+
]);
|
|
3573
|
+
};
|
|
3574
|
+
function createStructuredError(gqlError) {
|
|
3575
|
+
const extensions = gqlError.extensions;
|
|
3576
|
+
const originalError = extensions?.originalError;
|
|
3577
|
+
const message = originalError?.message || gqlError.message;
|
|
3578
|
+
const code = extensions?.code;
|
|
3579
|
+
if (code) return new CopilotKitError({
|
|
3580
|
+
message,
|
|
3581
|
+
code
|
|
3582
|
+
});
|
|
3583
|
+
if (originalError?.stack?.includes("CopilotApiDiscoveryError")) return new CopilotKitApiDiscoveryError({ message });
|
|
3584
|
+
if (originalError?.stack?.includes("CopilotKitRemoteEndpointDiscoveryError")) return new CopilotKitRemoteEndpointDiscoveryError({ message });
|
|
3585
|
+
if (originalError?.stack?.includes("CopilotKitAgentDiscoveryError")) return new CopilotKitAgentDiscoveryError({
|
|
3586
|
+
agentName: "",
|
|
3587
|
+
availableAgents: []
|
|
3588
|
+
});
|
|
3589
|
+
return null;
|
|
3590
|
+
}
|
|
3591
|
+
|
|
3592
|
+
//#endregion
|
|
3593
|
+
//#region src/hooks/use-copilot-authenticated-action.ts
|
|
3594
|
+
/**
|
|
3595
|
+
* Hook to create an authenticated action that requires user sign-in before execution.
|
|
3596
|
+
*
|
|
3597
|
+
* @remarks
|
|
3598
|
+
* This feature is only available when using CopilotKit's hosted cloud service.
|
|
3599
|
+
* To use this feature, sign up at https://cloud.copilotkit.ai to get your publicApiKey.
|
|
3600
|
+
*
|
|
3601
|
+
* @param action - The frontend action to be wrapped with authentication
|
|
3602
|
+
* @param dependencies - Optional array of dependencies that will trigger recreation of the action when changed
|
|
3603
|
+
*/
|
|
3604
|
+
function useCopilotAuthenticatedAction_c(action, dependencies) {
|
|
3605
|
+
const { authConfig_c, authStates_c, setAuthStates_c } = useCopilotContext();
|
|
3606
|
+
const pendingActionRef = useRef(null);
|
|
3607
|
+
const executeAction = useCallback((props) => {
|
|
3608
|
+
if (typeof action.render === "function") return action.render(props);
|
|
3609
|
+
return action.render || React.createElement(Fragment);
|
|
3610
|
+
}, [action]);
|
|
3611
|
+
const wrappedRender = useCallback((props) => {
|
|
3612
|
+
if (!Object.values(authStates_c || {}).some((state) => state.status === "authenticated")) {
|
|
3613
|
+
pendingActionRef.current = props;
|
|
3614
|
+
return authConfig_c?.SignInComponent ? React.createElement(authConfig_c.SignInComponent, { onSignInComplete: (authState) => {
|
|
3615
|
+
setAuthStates_c?.((prev) => ({
|
|
3616
|
+
...prev,
|
|
3617
|
+
[action.name]: authState
|
|
3618
|
+
}));
|
|
3619
|
+
if (pendingActionRef.current) {
|
|
3620
|
+
executeAction(pendingActionRef.current);
|
|
3621
|
+
pendingActionRef.current = null;
|
|
3622
|
+
}
|
|
3623
|
+
} }) : React.createElement(Fragment);
|
|
3624
|
+
}
|
|
3625
|
+
return executeAction(props);
|
|
3626
|
+
}, [
|
|
3627
|
+
action,
|
|
3628
|
+
authStates_c,
|
|
3629
|
+
setAuthStates_c
|
|
3630
|
+
]);
|
|
3631
|
+
useCopilotAction({
|
|
3632
|
+
...action,
|
|
3633
|
+
render: wrappedRender
|
|
3634
|
+
}, dependencies);
|
|
3635
|
+
}
|
|
3636
|
+
|
|
3637
|
+
//#endregion
|
|
3638
|
+
//#region src/hooks/use-langgraph-interrupt.ts
|
|
3639
|
+
function useLangGraphInterrupt(action, dependencies) {
|
|
3640
|
+
const { setInterruptAction, removeInterruptAction, interruptActions, threadId } = useContext(CopilotContext);
|
|
3641
|
+
const { addToast } = useToast();
|
|
3642
|
+
const actionId = dataToUUID(action, "lgAction");
|
|
3643
|
+
useEffect(() => {
|
|
3644
|
+
if (!action) return;
|
|
3645
|
+
setInterruptAction({
|
|
3646
|
+
...action,
|
|
3647
|
+
id: actionId
|
|
3648
|
+
});
|
|
3649
|
+
return () => {
|
|
3650
|
+
removeInterruptAction(actionId);
|
|
3651
|
+
};
|
|
3652
|
+
}, [
|
|
3653
|
+
setInterruptAction,
|
|
3654
|
+
removeInterruptAction,
|
|
3655
|
+
threadId,
|
|
3656
|
+
actionId,
|
|
3657
|
+
...dependencies || []
|
|
3658
|
+
]);
|
|
3659
|
+
}
|
|
3660
|
+
|
|
3661
|
+
//#endregion
|
|
3662
|
+
//#region src/hooks/use-copilot-additional-instructions.ts
|
|
3663
|
+
/**
|
|
3664
|
+
* `useCopilotAdditionalInstructions` is a React hook that provides additional instructions
|
|
3665
|
+
* to the Copilot.
|
|
3666
|
+
*
|
|
3667
|
+
* ## Usage
|
|
3668
|
+
*
|
|
3669
|
+
* ### Simple Usage
|
|
3670
|
+
*
|
|
3671
|
+
* In its most basic usage, useCopilotAdditionalInstructions accepts a single string argument
|
|
3672
|
+
* representing the instructions to be added to the Copilot.
|
|
3673
|
+
*
|
|
3674
|
+
* ```tsx
|
|
3675
|
+
* import { useCopilotAdditionalInstructions } from "@copilotkit/react-core";
|
|
3676
|
+
*
|
|
3677
|
+
* export function MyComponent() {
|
|
3678
|
+
* useCopilotAdditionalInstructions({
|
|
3679
|
+
* instructions: "Do not answer questions about the weather.",
|
|
3680
|
+
* });
|
|
3681
|
+
* }
|
|
3682
|
+
* ```
|
|
3683
|
+
*
|
|
3684
|
+
* ### Conditional Usage
|
|
3685
|
+
*
|
|
3686
|
+
* You can also conditionally add instructions based on the state of your app.
|
|
3687
|
+
*
|
|
3688
|
+
* ```tsx
|
|
3689
|
+
* import { useCopilotAdditionalInstructions } from "@copilotkit/react-core";
|
|
3690
|
+
*
|
|
3691
|
+
* export function MyComponent() {
|
|
3692
|
+
* const [showInstructions, setShowInstructions] = useState(false);
|
|
3693
|
+
*
|
|
3694
|
+
* useCopilotAdditionalInstructions({
|
|
3695
|
+
* available: showInstructions ? "enabled" : "disabled",
|
|
3696
|
+
* instructions: "Do not answer questions about the weather.",
|
|
3697
|
+
* });
|
|
3698
|
+
* }
|
|
3699
|
+
* ```
|
|
3700
|
+
*/
|
|
3701
|
+
/**
|
|
3702
|
+
* Adds the given instructions to the Copilot context.
|
|
3703
|
+
*/
|
|
3704
|
+
function useCopilotAdditionalInstructions({ instructions, available = "enabled" }, dependencies) {
|
|
3705
|
+
const { setAdditionalInstructions } = useCopilotContext();
|
|
3706
|
+
useEffect(() => {
|
|
3707
|
+
if (available === "disabled") return;
|
|
3708
|
+
setAdditionalInstructions((prevInstructions) => [...prevInstructions || [], instructions]);
|
|
3709
|
+
return () => {
|
|
3710
|
+
setAdditionalInstructions((prevInstructions) => prevInstructions?.filter((instruction) => instruction !== instructions) || []);
|
|
3711
|
+
};
|
|
3712
|
+
}, [
|
|
3713
|
+
available,
|
|
3714
|
+
instructions,
|
|
3715
|
+
setAdditionalInstructions,
|
|
3716
|
+
...dependencies || []
|
|
3717
|
+
]);
|
|
3718
|
+
}
|
|
3719
|
+
|
|
3720
|
+
//#endregion
|
|
3721
|
+
//#region src/hooks/use-default-tool.ts
|
|
3722
|
+
function useDefaultTool(tool, dependencies) {
|
|
3723
|
+
useCopilotAction({
|
|
3724
|
+
...tool,
|
|
3725
|
+
name: "*"
|
|
3726
|
+
}, dependencies);
|
|
3727
|
+
}
|
|
3728
|
+
|
|
3729
|
+
//#endregion
|
|
3730
|
+
//#region src/hooks/use-copilot-chat-suggestions.tsx
|
|
3731
|
+
/**
|
|
3732
|
+
* <Callout type="warning">
|
|
3733
|
+
* useCopilotChatSuggestions is experimental. The interface is not final and
|
|
3734
|
+
* can change without notice.
|
|
3735
|
+
* </Callout>
|
|
3736
|
+
*
|
|
3737
|
+
* `useCopilotReadable` is a React hook that provides app-state and other information
|
|
3738
|
+
* to the Copilot. Optionally, the hook can also handle hierarchical state within your
|
|
3739
|
+
* application, passing these parent-child relationships to the Copilot.
|
|
3740
|
+
*
|
|
3741
|
+
* <br/>
|
|
3742
|
+
* <img src="https://cdn.copilotkit.ai/docs/copilotkit/images/use-copilot-chat-suggestions/use-copilot-chat-suggestions.gif" width="500" />
|
|
3743
|
+
*
|
|
3744
|
+
* ## Usage
|
|
3745
|
+
*
|
|
3746
|
+
* ### Install Dependencies
|
|
3747
|
+
*
|
|
3748
|
+
* This component is part of the [@copilotkit/react-ui](https://npmjs.com/package/@copilotkit/react-ui) package.
|
|
3749
|
+
*
|
|
3750
|
+
* ```shell npm2yarn \"@copilotkit/react-ui"\
|
|
3751
|
+
* npm install @copilotkit/react-core @copilotkit/react-ui
|
|
3752
|
+
* ```
|
|
3753
|
+
*
|
|
3754
|
+
* ### Simple Usage
|
|
3755
|
+
*
|
|
3756
|
+
* ```tsx
|
|
3757
|
+
* import { useCopilotChatSuggestions } from "@copilotkit/react-ui";
|
|
3758
|
+
*
|
|
3759
|
+
* export function MyComponent() {
|
|
3760
|
+
* const [employees, setEmployees] = useState([]);
|
|
3761
|
+
*
|
|
3762
|
+
* useCopilotChatSuggestions({
|
|
3763
|
+
* instructions: `The following employees are on duty: ${JSON.stringify(employees)}`,
|
|
3764
|
+
* });
|
|
3765
|
+
* }
|
|
3766
|
+
* ```
|
|
3767
|
+
*
|
|
3768
|
+
* ### Dependency Management
|
|
3769
|
+
*
|
|
3770
|
+
* ```tsx
|
|
3771
|
+
* import { useCopilotChatSuggestions } from "@copilotkit/react-ui";
|
|
3772
|
+
*
|
|
3773
|
+
* export function MyComponent() {
|
|
3774
|
+
* useCopilotChatSuggestions(
|
|
3775
|
+
* {
|
|
3776
|
+
* instructions: "Suggest the most relevant next actions.",
|
|
3777
|
+
* },
|
|
3778
|
+
* [appState],
|
|
3779
|
+
* );
|
|
3780
|
+
* }
|
|
3781
|
+
* ```
|
|
3782
|
+
*
|
|
3783
|
+
* In the example above, the suggestions are generated based on the given instructions.
|
|
3784
|
+
* The hook monitors `appState`, and updates suggestions accordingly whenever it changes.
|
|
3785
|
+
*
|
|
3786
|
+
* ### Behavior and Lifecycle
|
|
3787
|
+
*
|
|
3788
|
+
* The hook registers the configuration with the chat context upon component mount and
|
|
3789
|
+
* removes it on unmount, ensuring a clean and efficient lifecycle management.
|
|
3790
|
+
*/
|
|
3791
|
+
function useCopilotChatSuggestions(config, dependencies = []) {
|
|
3792
|
+
const resolvedAgentId = useCopilotChatConfiguration()?.agentId ?? "default";
|
|
3793
|
+
const available = (config.available === "enabled" ? "always" : config.available) ?? "before-first-message";
|
|
3794
|
+
useConfigureSuggestions({
|
|
3795
|
+
...config,
|
|
3796
|
+
available,
|
|
3797
|
+
consumerAgentId: resolvedAgentId
|
|
3798
|
+
}, dependencies);
|
|
3799
|
+
}
|
|
3800
|
+
|
|
3801
|
+
//#endregion
|
|
3802
|
+
//#region src/types/frontend-action.ts
|
|
3803
|
+
function processActionsForRuntimeRequest(actions) {
|
|
3804
|
+
return actions.filter((action) => action.available !== ActionInputAvailability.Disabled && action.disabled !== true && action.name !== "*" && action.available != "frontend" && !action.pairedAction).map((action) => {
|
|
3805
|
+
let available = ActionInputAvailability.Enabled;
|
|
3806
|
+
if (action.disabled) available = ActionInputAvailability.Disabled;
|
|
3807
|
+
else if (action.available === "disabled") available = ActionInputAvailability.Disabled;
|
|
3808
|
+
else if (action.available === "remote") available = ActionInputAvailability.Remote;
|
|
3809
|
+
return {
|
|
3810
|
+
name: action.name,
|
|
3811
|
+
description: action.description || "",
|
|
3812
|
+
jsonSchema: JSON.stringify(actionParametersToJsonSchema(action.parameters || [])),
|
|
3813
|
+
available
|
|
3814
|
+
};
|
|
3815
|
+
});
|
|
3816
|
+
}
|
|
3817
|
+
|
|
3818
|
+
//#endregion
|
|
3819
|
+
//#region src/lib/copilot-task.ts
|
|
3820
|
+
/**
|
|
3821
|
+
* This class is used to execute one-off tasks, for example on button press. It can use the context available via [useCopilotReadable](/reference/v1/hooks/useCopilotReadable) and the actions provided by [useCopilotAction](/reference/v1/hooks/useCopilotAction), or you can provide your own context and actions.
|
|
3822
|
+
*
|
|
3823
|
+
* ## Example
|
|
3824
|
+
* In the simplest case, use CopilotTask in the context of your app by giving it instructions on what to do.
|
|
3825
|
+
*
|
|
3826
|
+
* ```tsx
|
|
3827
|
+
* import { CopilotTask, useCopilotContext } from "@copilotkit/react-core";
|
|
3828
|
+
*
|
|
3829
|
+
* export function MyComponent() {
|
|
3830
|
+
* const context = useCopilotContext();
|
|
3831
|
+
*
|
|
3832
|
+
* const task = new CopilotTask({
|
|
3833
|
+
* instructions: "Set a random message",
|
|
3834
|
+
* actions: [
|
|
3835
|
+
* {
|
|
3836
|
+
* name: "setMessage",
|
|
3837
|
+
* description: "Set the message.",
|
|
3838
|
+
* argumentAnnotations: [
|
|
3839
|
+
* {
|
|
3840
|
+
* name: "message",
|
|
3841
|
+
* type: "string",
|
|
3842
|
+
* description:
|
|
3843
|
+
* "A message to display.",
|
|
3844
|
+
* required: true,
|
|
3845
|
+
* },
|
|
3846
|
+
* ],
|
|
3847
|
+
* }
|
|
3848
|
+
* ]
|
|
3849
|
+
* });
|
|
3850
|
+
*
|
|
3851
|
+
* const executeTask = async () => {
|
|
3852
|
+
* await task.run(context, action);
|
|
3853
|
+
* }
|
|
3854
|
+
*
|
|
3855
|
+
* return (
|
|
3856
|
+
* <>
|
|
3857
|
+
* <button onClick={executeTask}>
|
|
3858
|
+
* Execute task
|
|
3859
|
+
* </button>
|
|
3860
|
+
* </>
|
|
3861
|
+
* )
|
|
3862
|
+
* }
|
|
3863
|
+
* ```
|
|
3864
|
+
*
|
|
3865
|
+
* Have a look at the [Presentation Example App](https://github.com/CopilotKit/CopilotKit/blob/main/src/v1.x/examples/next-openai/src/app/presentation/page.tsx) for a more complete example.
|
|
3866
|
+
*/
|
|
3867
|
+
var CopilotTask = class {
|
|
3868
|
+
constructor(config) {
|
|
3869
|
+
this.instructions = config.instructions;
|
|
3870
|
+
this.actions = config.actions || [];
|
|
3871
|
+
this.includeCopilotReadable = config.includeCopilotReadable !== false;
|
|
3872
|
+
this.includeCopilotActions = config.includeCopilotActions !== false;
|
|
3873
|
+
this.forwardedParameters = config.forwardedParameters;
|
|
3874
|
+
}
|
|
3875
|
+
/**
|
|
3876
|
+
* Run the task.
|
|
3877
|
+
* @param context The CopilotContext to use for the task. Use `useCopilotContext` to obtain the current context.
|
|
3878
|
+
* @param data The data to use for the task.
|
|
3879
|
+
*/
|
|
3880
|
+
async run(context, data) {
|
|
3881
|
+
const actions = this.includeCopilotActions ? Object.assign({}, context.actions) : {};
|
|
3882
|
+
for (const fn of this.actions) actions[fn.name] = fn;
|
|
3883
|
+
let contextString = "";
|
|
3884
|
+
if (data) contextString = (typeof data === "string" ? data : JSON.stringify(data)) + "\n\n";
|
|
3885
|
+
if (this.includeCopilotReadable) contextString += context.getContextString([], defaultCopilotContextCategories);
|
|
3886
|
+
const messages = [new TextMessage({
|
|
3887
|
+
content: taskSystemMessage(contextString, this.instructions),
|
|
3888
|
+
role: Role.System
|
|
3889
|
+
})];
|
|
3890
|
+
const response = await new CopilotRuntimeClient({
|
|
3891
|
+
url: context.copilotApiConfig.chatApiEndpoint,
|
|
3892
|
+
publicApiKey: context.copilotApiConfig.publicApiKey,
|
|
3893
|
+
headers: context.copilotApiConfig.headers,
|
|
3894
|
+
credentials: context.copilotApiConfig.credentials
|
|
3895
|
+
}).generateCopilotResponse({
|
|
3896
|
+
data: {
|
|
3897
|
+
frontend: {
|
|
3898
|
+
actions: processActionsForRuntimeRequest(Object.values(actions)),
|
|
3899
|
+
url: window.location.href
|
|
3900
|
+
},
|
|
3901
|
+
messages: convertMessagesToGqlInput(filterAgentStateMessages(messages)),
|
|
3902
|
+
metadata: { requestType: CopilotRequestType.Task },
|
|
3903
|
+
forwardedParameters: {
|
|
3904
|
+
toolChoice: "required",
|
|
3905
|
+
...this.forwardedParameters ?? {}
|
|
3906
|
+
}
|
|
3907
|
+
},
|
|
3908
|
+
properties: context.copilotApiConfig.properties
|
|
3909
|
+
}).toPromise();
|
|
3910
|
+
const functionCallHandler = context.getFunctionCallHandler(actions);
|
|
3911
|
+
const functionCalls = convertGqlOutputToMessages(response.data?.generateCopilotResponse?.messages || []).filter((m) => m.isActionExecutionMessage());
|
|
3912
|
+
for (const functionCall of functionCalls) await functionCallHandler({
|
|
3913
|
+
messages,
|
|
3914
|
+
name: functionCall.name,
|
|
3915
|
+
args: functionCall.arguments
|
|
3916
|
+
});
|
|
3917
|
+
}
|
|
3918
|
+
};
|
|
3919
|
+
function taskSystemMessage(contextString, instructions) {
|
|
3920
|
+
return `
|
|
3921
|
+
Please act as an efficient, competent, conscientious, and industrious professional assistant.
|
|
3922
|
+
|
|
3923
|
+
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.
|
|
3924
|
+
Always be polite and respectful, and prefer brevity over verbosity.
|
|
3925
|
+
|
|
3926
|
+
The user has provided you with the following context:
|
|
3927
|
+
\`\`\`
|
|
3928
|
+
${contextString}
|
|
3929
|
+
\`\`\`
|
|
3930
|
+
|
|
3931
|
+
They have also provided you with functions you can call to initiate actions on their behalf.
|
|
3932
|
+
|
|
3933
|
+
Please assist them as best you can.
|
|
3934
|
+
|
|
3935
|
+
This is not a conversation, so please do not ask questions. Just call a function without saying anything else.
|
|
3936
|
+
|
|
3937
|
+
The user has given you the following task to complete:
|
|
3938
|
+
|
|
3939
|
+
\`\`\`
|
|
3940
|
+
${instructions}
|
|
3941
|
+
\`\`\`
|
|
3942
|
+
`;
|
|
3943
|
+
}
|
|
3944
|
+
|
|
3945
|
+
//#endregion
|
|
3946
|
+
export { CoAgentStateRendersContext, CoAgentStateRendersProvider, CopilotContext, CopilotKit, CopilotMessagesContext, CopilotTask, SUGGESTION_RETRY_CONFIG, ThreadsContext, ThreadsProvider, defaultCopilotContextCategories, shouldShowDevConsole, useCoAgent, useCoAgentStateRender, useCoAgentStateRenders, useCopilotAction, useCopilotAdditionalInstructions, useCopilotAuthenticatedAction_c, useCopilotChat, useCopilotChatHeadless_c, useCopilotChatInternal, useCopilotChatSuggestions, useCopilotContext, useCopilotMessagesContext, useCopilotReadable, useCopilotRuntimeClient, useDefaultTool, useFrontendTool, useHumanInTheLoop, useLangGraphInterrupt, useLangGraphInterruptRender, useLazyToolRenderer, useMakeCopilotDocumentReadable, useRenderToolCall, useThreads };
|
|
151
3947
|
//# sourceMappingURL=index.mjs.map
|