@copilotkit/react-core 1.57.3 → 1.57.4

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.
Files changed (266) hide show
  1. package/LICENSE +21 -0
  2. package/package.json +12 -13
  3. package/skills/react-core/SKILL.md +108 -0
  4. package/skills/react-core/references/agent-access.md +288 -0
  5. package/skills/react-core/references/attachments.md +291 -0
  6. package/skills/react-core/references/capabilities.md +138 -0
  7. package/skills/react-core/references/chat-components.md +221 -0
  8. package/skills/react-core/references/client-side-tools.md +358 -0
  9. package/skills/react-core/references/custom-message-renderers.md +226 -0
  10. package/skills/react-core/references/debug-mode.md +153 -0
  11. package/skills/react-core/references/human-in-the-loop.md +312 -0
  12. package/skills/react-core/references/provider-setup.md +326 -0
  13. package/skills/react-core/references/rendering-activity-messages.md +207 -0
  14. package/skills/react-core/references/rendering-tool-calls.md +319 -0
  15. package/skills/react-core/references/suggestions.md +211 -0
  16. package/skills/react-core/references/switching-agents-recipes.md +160 -0
  17. package/skills/react-core/references/switching-agents.md +231 -0
  18. package/skills/react-core/references/threads.md +226 -0
  19. package/.attw.json +0 -3
  20. package/CHANGELOG.md +0 -5043
  21. package/scripts/scope-preflight.mjs +0 -100
  22. package/src/components/CopilotListeners.tsx +0 -137
  23. package/src/components/__tests__/CopilotListeners.test.tsx +0 -38
  24. package/src/components/copilot-provider/__tests__/copilot-messages-key.test.tsx +0 -92
  25. package/src/components/copilot-provider/__tests__/copilotkit-error.test.tsx +0 -77
  26. package/src/components/copilot-provider/__tests__/error-visibility-prod.test.tsx +0 -70
  27. package/src/components/copilot-provider/__tests__/v1-explicit-threadid-bridge.test.tsx +0 -107
  28. package/src/components/copilot-provider/copilot-messages.tsx +0 -314
  29. package/src/components/copilot-provider/copilotkit-props.tsx +0 -214
  30. package/src/components/copilot-provider/copilotkit.tsx +0 -853
  31. package/src/components/copilot-provider/index.ts +0 -3
  32. package/src/components/dev-console/console-trigger.tsx +0 -283
  33. package/src/components/dev-console/developer-console-modal.tsx +0 -1016
  34. package/src/components/dev-console/icons.tsx +0 -106
  35. package/src/components/error-boundary/error-boundary.tsx +0 -99
  36. package/src/components/error-boundary/error-utils.tsx +0 -105
  37. package/src/components/index.ts +0 -1
  38. package/src/components/toast/exclamation-mark-icon.tsx +0 -27
  39. package/src/components/toast/toast-provider.tsx +0 -448
  40. package/src/components/usage-banner.tsx +0 -266
  41. package/src/context/__tests__/threads-context.test.tsx +0 -141
  42. package/src/context/coagent-state-renders-context.tsx +0 -89
  43. package/src/context/copilot-context.tsx +0 -365
  44. package/src/context/copilot-messages-context.tsx +0 -35
  45. package/src/context/index.ts +0 -22
  46. package/src/context/threads-context.tsx +0 -69
  47. package/src/hooks/__tests__/use-coagent-config.test.ts +0 -352
  48. package/src/hooks/__tests__/use-coagent-state-render-bridge.helpers.test.ts +0 -107
  49. package/src/hooks/__tests__/use-coagent-state-render.e2e.test.tsx +0 -1209
  50. package/src/hooks/__tests__/use-coagent-state-render.test.tsx +0 -356
  51. package/src/hooks/__tests__/use-copilot-chat-internal-connect.test.tsx +0 -241
  52. package/src/hooks/__tests__/use-frontend-tool-available.test.tsx +0 -72
  53. package/src/hooks/__tests__/use-frontend-tool-remount.e2e.test.tsx +0 -102
  54. package/src/hooks/index.ts +0 -33
  55. package/src/hooks/use-agent-nodename.ts +0 -33
  56. package/src/hooks/use-coagent-state-render-bridge.helpers.ts +0 -345
  57. package/src/hooks/use-coagent-state-render-bridge.tsx +0 -222
  58. package/src/hooks/use-coagent-state-render-registry.ts +0 -230
  59. package/src/hooks/use-coagent-state-render.ts +0 -163
  60. package/src/hooks/use-coagent.ts +0 -377
  61. package/src/hooks/use-configure-chat-suggestions.tsx +0 -96
  62. package/src/hooks/use-copilot-action.ts +0 -245
  63. package/src/hooks/use-copilot-additional-instructions.ts +0 -98
  64. package/src/hooks/use-copilot-authenticated-action.ts +0 -73
  65. package/src/hooks/use-copilot-chat-headless_c.ts +0 -264
  66. package/src/hooks/use-copilot-chat-suggestions.tsx +0 -134
  67. package/src/hooks/use-copilot-chat.ts +0 -132
  68. package/src/hooks/use-copilot-chat_internal.ts +0 -875
  69. package/src/hooks/use-copilot-readable.ts +0 -135
  70. package/src/hooks/use-copilot-runtime-client.ts +0 -178
  71. package/src/hooks/use-default-tool.ts +0 -13
  72. package/src/hooks/use-flat-category-store.ts +0 -109
  73. package/src/hooks/use-frontend-tool.ts +0 -113
  74. package/src/hooks/use-human-in-the-loop.ts +0 -138
  75. package/src/hooks/use-langgraph-interrupt.ts +0 -103
  76. package/src/hooks/use-lazy-tool-renderer.tsx +0 -30
  77. package/src/hooks/use-make-copilot-document-readable.ts +0 -30
  78. package/src/hooks/use-render-tool-call.ts +0 -89
  79. package/src/hooks/use-tree.ts +0 -222
  80. package/src/index.tsx +0 -7
  81. package/src/lib/copilot-task.ts +0 -215
  82. package/src/lib/index.ts +0 -1
  83. package/src/lib/status-checker.ts +0 -67
  84. package/src/setupTests.ts +0 -37
  85. package/src/test-helpers/copilot-context.ts +0 -91
  86. package/src/types/chat-suggestion-configuration.ts +0 -23
  87. package/src/types/coagent-action.ts +0 -35
  88. package/src/types/coagent-state.ts +0 -13
  89. package/src/types/crew.ts +0 -89
  90. package/src/types/document-pointer.ts +0 -7
  91. package/src/types/frontend-action.ts +0 -213
  92. package/src/types/index.ts +0 -17
  93. package/src/types/interrupt-action.ts +0 -58
  94. package/src/types/system-message.ts +0 -4
  95. package/src/utils/dev-console.ts +0 -19
  96. package/src/utils/index.ts +0 -2
  97. package/src/utils/suggestions-constants.ts +0 -8
  98. package/src/utils/utils.test.ts +0 -7
  99. package/src/utils/utils.ts +0 -6
  100. package/src/v2/__tests__/A2UIMessageRenderer.test.tsx +0 -240
  101. package/src/v2/__tests__/globalSetup.ts +0 -14
  102. package/src/v2/__tests__/setup.ts +0 -93
  103. package/src/v2/__tests__/utils/test-helpers.tsx +0 -570
  104. package/src/v2/a2ui/A2UICatalogContext.tsx +0 -79
  105. package/src/v2/a2ui/A2UIMessageRenderer.tsx +0 -294
  106. package/src/v2/a2ui/A2UIToolCallRenderer.tsx +0 -290
  107. package/src/v2/components/CopilotKitInspector.tsx +0 -52
  108. package/src/v2/components/MCPAppsActivityRenderer.tsx +0 -815
  109. package/src/v2/components/OpenGenerativeUIRenderer.tsx +0 -598
  110. package/src/v2/components/WildcardToolCallRender.tsx +0 -86
  111. package/src/v2/components/__tests__/OpenGenerativeUIRenderer.test.tsx +0 -665
  112. package/src/v2/components/chat/CopilotChat.tsx +0 -664
  113. package/src/v2/components/chat/CopilotChatAssistantMessage.tsx +0 -393
  114. package/src/v2/components/chat/CopilotChatAttachmentQueue.tsx +0 -374
  115. package/src/v2/components/chat/CopilotChatAttachmentRenderer.tsx +0 -159
  116. package/src/v2/components/chat/CopilotChatAudioRecorder.tsx +0 -350
  117. package/src/v2/components/chat/CopilotChatInput.tsx +0 -1412
  118. package/src/v2/components/chat/CopilotChatMessageView.tsx +0 -716
  119. package/src/v2/components/chat/CopilotChatReasoningMessage.tsx +0 -265
  120. package/src/v2/components/chat/CopilotChatSuggestionPill.tsx +0 -59
  121. package/src/v2/components/chat/CopilotChatSuggestionView.tsx +0 -134
  122. package/src/v2/components/chat/CopilotChatToggleButton.tsx +0 -171
  123. package/src/v2/components/chat/CopilotChatToolCallsView.tsx +0 -40
  124. package/src/v2/components/chat/CopilotChatUserMessage.tsx +0 -445
  125. package/src/v2/components/chat/CopilotChatView.tsx +0 -890
  126. package/src/v2/components/chat/CopilotModalHeader.tsx +0 -129
  127. package/src/v2/components/chat/CopilotPopup.tsx +0 -81
  128. package/src/v2/components/chat/CopilotPopupView.tsx +0 -317
  129. package/src/v2/components/chat/CopilotSidebar.tsx +0 -80
  130. package/src/v2/components/chat/CopilotSidebarView.tsx +0 -269
  131. package/src/v2/components/chat/Lightbox.tsx +0 -103
  132. package/src/v2/components/chat/__tests__/CopilotChat.absentThreadConnect.test.tsx +0 -66
  133. package/src/v2/components/chat/__tests__/CopilotChat.attachments.test.tsx +0 -168
  134. package/src/v2/components/chat/__tests__/CopilotChat.e2e.test.tsx +0 -1239
  135. package/src/v2/components/chat/__tests__/CopilotChat.onError.test.tsx +0 -73
  136. package/src/v2/components/chat/__tests__/CopilotChat.slots.e2e.test.tsx +0 -432
  137. package/src/v2/components/chat/__tests__/CopilotChat.suggestionsAlways.test.tsx +0 -183
  138. package/src/v2/components/chat/__tests__/CopilotChat.welcomeGate.test.tsx +0 -184
  139. package/src/v2/components/chat/__tests__/CopilotChatActivityRendering.e2e.test.tsx +0 -649
  140. package/src/v2/components/chat/__tests__/CopilotChatAssistantMessage.slots.e2e.test.tsx +0 -624
  141. package/src/v2/components/chat/__tests__/CopilotChatAssistantMessage.test.tsx +0 -702
  142. package/src/v2/components/chat/__tests__/CopilotChatAssistantMessage.thumbs.test.tsx +0 -72
  143. package/src/v2/components/chat/__tests__/CopilotChatCopyButton.clipboard.test.tsx +0 -241
  144. package/src/v2/components/chat/__tests__/CopilotChatCssClasses.test.tsx +0 -107
  145. package/src/v2/components/chat/__tests__/CopilotChatInput.slots.e2e.test.tsx +0 -929
  146. package/src/v2/components/chat/__tests__/CopilotChatInput.test.tsx +0 -1567
  147. package/src/v2/components/chat/__tests__/CopilotChatMessageView.slots.e2e.test.tsx +0 -1004
  148. package/src/v2/components/chat/__tests__/CopilotChatMessageView.test.tsx +0 -279
  149. package/src/v2/components/chat/__tests__/CopilotChatPerf.e2e.test.tsx +0 -336
  150. package/src/v2/components/chat/__tests__/CopilotChatPropsRerender.e2e.test.tsx +0 -249
  151. package/src/v2/components/chat/__tests__/CopilotChatSuggestionView.slots.e2e.test.tsx +0 -530
  152. package/src/v2/components/chat/__tests__/CopilotChatToolRendering.e2e.test.tsx +0 -785
  153. package/src/v2/components/chat/__tests__/CopilotChatToolRerenders.e2e.test.tsx +0 -2416
  154. package/src/v2/components/chat/__tests__/CopilotChatUserMessage.slots.e2e.test.tsx +0 -621
  155. package/src/v2/components/chat/__tests__/CopilotChatView.connectingGate.test.tsx +0 -56
  156. package/src/v2/components/chat/__tests__/CopilotChatView.inputOverlay.test.tsx +0 -264
  157. package/src/v2/components/chat/__tests__/CopilotChatView.onClick.e2e.test.tsx +0 -853
  158. package/src/v2/components/chat/__tests__/CopilotChatView.pinToSend.test.tsx +0 -94
  159. package/src/v2/components/chat/__tests__/CopilotChatView.slots.e2e.test.tsx +0 -1050
  160. package/src/v2/components/chat/__tests__/CopilotModalHeader.slots.e2e.test.tsx +0 -484
  161. package/src/v2/components/chat/__tests__/CopilotPopupView.slots.e2e.test.tsx +0 -612
  162. package/src/v2/components/chat/__tests__/CopilotSidebarView.position.test.tsx +0 -159
  163. package/src/v2/components/chat/__tests__/CopilotSidebarView.slots.e2e.test.tsx +0 -502
  164. package/src/v2/components/chat/__tests__/MCPAppsActivityRenderer.e2e.test.tsx +0 -1068
  165. package/src/v2/components/chat/__tests__/MCPAppsProxy.e2e.test.tsx +0 -589
  166. package/src/v2/components/chat/__tests__/MCPAppsUiMessage.e2e.test.tsx +0 -403
  167. package/src/v2/components/chat/__tests__/copilot-chat-throttle.test.tsx +0 -137
  168. package/src/v2/components/chat/__tests__/normalize-auto-scroll.test.ts +0 -37
  169. package/src/v2/components/chat/__tests__/setup.ts +0 -1
  170. package/src/v2/components/chat/index.ts +0 -90
  171. package/src/v2/components/chat/last-user-message-context.ts +0 -21
  172. package/src/v2/components/chat/normalize-auto-scroll.ts +0 -17
  173. package/src/v2/components/chat/scroll-element-context.ts +0 -13
  174. package/src/v2/components/index.ts +0 -8
  175. package/src/v2/components/intelligence-indicator/IntelligenceIndicator.tsx +0 -286
  176. package/src/v2/components/intelligence-indicator/__tests__/IntelligenceIndicator.e2e.test.tsx +0 -464
  177. package/src/v2/components/intelligence-indicator/index.ts +0 -2
  178. package/src/v2/components/license-warning-banner.tsx +0 -217
  179. package/src/v2/components/ui/button.tsx +0 -124
  180. package/src/v2/components/ui/dropdown-menu.tsx +0 -258
  181. package/src/v2/components/ui/tooltip.tsx +0 -60
  182. package/src/v2/context.ts +0 -62
  183. package/src/v2/headless.ts +0 -64
  184. package/src/v2/hooks/__tests__/standard-schema-types.test.tsx +0 -152
  185. package/src/v2/hooks/__tests__/standard-schema.test.tsx +0 -282
  186. package/src/v2/hooks/__tests__/use-agent-context-timing.e2e.test.tsx +0 -140
  187. package/src/v2/hooks/__tests__/use-agent-context.test.tsx +0 -401
  188. package/src/v2/hooks/__tests__/use-agent-error-state.test.tsx +0 -44
  189. package/src/v2/hooks/__tests__/use-agent-stability.test.tsx +0 -211
  190. package/src/v2/hooks/__tests__/use-agent-throttle.test.tsx +0 -1029
  191. package/src/v2/hooks/__tests__/use-agent.e2e.test.tsx +0 -159
  192. package/src/v2/hooks/__tests__/use-attachments.test.tsx +0 -169
  193. package/src/v2/hooks/__tests__/use-capabilities.test.tsx +0 -76
  194. package/src/v2/hooks/__tests__/use-component.test.tsx +0 -126
  195. package/src/v2/hooks/__tests__/use-configure-suggestions.e2e.test.tsx +0 -696
  196. package/src/v2/hooks/__tests__/use-default-render-tool.test.tsx +0 -153
  197. package/src/v2/hooks/__tests__/use-frontend-tool-available.test.tsx +0 -167
  198. package/src/v2/hooks/__tests__/use-frontend-tool.e2e.test.tsx +0 -2148
  199. package/src/v2/hooks/__tests__/use-human-in-the-loop.e2e.test.tsx +0 -1261
  200. package/src/v2/hooks/__tests__/use-interrupt.test.tsx +0 -397
  201. package/src/v2/hooks/__tests__/use-katex-styles.test.tsx +0 -56
  202. package/src/v2/hooks/__tests__/use-keyboard-height.test.tsx +0 -192
  203. package/src/v2/hooks/__tests__/use-pin-to-send.test.tsx +0 -219
  204. package/src/v2/hooks/__tests__/use-render-custom-messages.test.tsx +0 -55
  205. package/src/v2/hooks/__tests__/use-render-tool.test.tsx +0 -259
  206. package/src/v2/hooks/__tests__/use-suggestions.e2e.test.tsx +0 -524
  207. package/src/v2/hooks/__tests__/use-threads.test.tsx +0 -757
  208. package/src/v2/hooks/__tests__/zod-regression.test.tsx +0 -311
  209. package/src/v2/hooks/index.ts +0 -24
  210. package/src/v2/hooks/use-agent-context.tsx +0 -45
  211. package/src/v2/hooks/use-agent.tsx +0 -227
  212. package/src/v2/hooks/use-attachments.tsx +0 -269
  213. package/src/v2/hooks/use-capabilities.tsx +0 -25
  214. package/src/v2/hooks/use-component.tsx +0 -91
  215. package/src/v2/hooks/use-configure-suggestions.tsx +0 -236
  216. package/src/v2/hooks/use-default-render-tool.tsx +0 -271
  217. package/src/v2/hooks/use-frontend-tool.tsx +0 -46
  218. package/src/v2/hooks/use-human-in-the-loop.tsx +0 -81
  219. package/src/v2/hooks/use-interrupt.tsx +0 -305
  220. package/src/v2/hooks/use-keyboard-height.tsx +0 -67
  221. package/src/v2/hooks/use-pin-to-send.ts +0 -94
  222. package/src/v2/hooks/use-render-activity-message.tsx +0 -72
  223. package/src/v2/hooks/use-render-custom-messages.tsx +0 -93
  224. package/src/v2/hooks/use-render-tool-call.tsx +0 -208
  225. package/src/v2/hooks/use-render-tool.tsx +0 -184
  226. package/src/v2/hooks/use-suggestions.tsx +0 -91
  227. package/src/v2/hooks/use-threads.tsx +0 -325
  228. package/src/v2/hooks/useKatexStyles.ts +0 -27
  229. package/src/v2/index.css +0 -1
  230. package/src/v2/index.ts +0 -27
  231. package/src/v2/lib/__tests__/completePartialMarkdown.test.ts +0 -495
  232. package/src/v2/lib/__tests__/processPartialHtml.test.ts +0 -112
  233. package/src/v2/lib/__tests__/renderSlot.test.tsx +0 -588
  234. package/src/v2/lib/__tests__/slots.test.ts +0 -56
  235. package/src/v2/lib/processPartialHtml.ts +0 -45
  236. package/src/v2/lib/react-core.ts +0 -156
  237. package/src/v2/lib/slots.tsx +0 -184
  238. package/src/v2/lib/transcription-client.ts +0 -184
  239. package/src/v2/lib/utils.ts +0 -8
  240. package/src/v2/providers/CopilotChatConfigurationProvider.tsx +0 -196
  241. package/src/v2/providers/CopilotKitProvider.tsx +0 -800
  242. package/src/v2/providers/SandboxFunctionsContext.ts +0 -10
  243. package/src/v2/providers/__tests__/CopilotChatConfigurationProvider.test.tsx +0 -652
  244. package/src/v2/providers/__tests__/CopilotKitProvider.license.test.tsx +0 -101
  245. package/src/v2/providers/__tests__/CopilotKitProvider.onError.test.tsx +0 -69
  246. package/src/v2/providers/__tests__/CopilotKitProvider.renderCustomMessages.e2e.test.tsx +0 -881
  247. package/src/v2/providers/__tests__/CopilotKitProvider.sandboxFunctions.test.tsx +0 -198
  248. package/src/v2/providers/__tests__/CopilotKitProvider.stability.test.tsx +0 -740
  249. package/src/v2/providers/__tests__/CopilotKitProvider.test.tsx +0 -713
  250. package/src/v2/providers/__tests__/CopilotKitProvider.wildcard.test.tsx +0 -294
  251. package/src/v2/providers/index.ts +0 -21
  252. package/src/v2/styles/globals.css +0 -349
  253. package/src/v2/types/__tests__/defineToolCallRenderer.test.tsx +0 -525
  254. package/src/v2/types/defineToolCallRenderer.ts +0 -68
  255. package/src/v2/types/frontend-tool.ts +0 -8
  256. package/src/v2/types/human-in-the-loop.ts +0 -33
  257. package/src/v2/types/index.ts +0 -8
  258. package/src/v2/types/interrupt.ts +0 -15
  259. package/src/v2/types/react-activity-message-renderer.ts +0 -27
  260. package/src/v2/types/react-custom-message-renderer.ts +0 -17
  261. package/src/v2/types/react-tool-call-renderer.ts +0 -35
  262. package/src/v2/types/sandbox-function.ts +0 -11
  263. package/tsconfig.json +0 -8
  264. package/tsdown.config.ts +0 -193
  265. package/typedoc.json +0 -4
  266. package/vitest.config.mjs +0 -31
@@ -1,665 +0,0 @@
1
- import { render, cleanup, act } from "@testing-library/react";
2
- import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
3
- import React from "react";
4
- import { z } from "zod";
5
- import {
6
- OpenGenerativeUIActivityRenderer,
7
- OpenGenerativeUIContent,
8
- } from "../OpenGenerativeUIRenderer";
9
- import { SandboxFunctionsContext } from "../../providers/SandboxFunctionsContext";
10
- import type { SandboxFunction } from "../../types/sandbox-function";
11
-
12
- // Mock @jetbrains/websandbox
13
- const mockRun = vi.fn().mockResolvedValue(undefined);
14
- const mockDestroy = vi.fn();
15
- let mockIframe: HTMLIFrameElement;
16
- let mockPromiseResolve: () => void;
17
- let mockPromise: Promise<unknown>;
18
-
19
- function resetMockPromise() {
20
- mockPromise = new Promise<void>((resolve) => {
21
- mockPromiseResolve = resolve;
22
- });
23
- }
24
-
25
- const mockCreate = vi.fn(() => {
26
- mockIframe = document.createElement("iframe");
27
- return {
28
- iframe: mockIframe,
29
- promise: mockPromise,
30
- run: mockRun,
31
- destroy: mockDestroy,
32
- };
33
- });
34
-
35
- vi.mock("@jetbrains/websandbox", () => ({
36
- default: {
37
- create: (...args: unknown[]) => mockCreate(...args),
38
- },
39
- }));
40
-
41
- /** Flush the dynamic import() microtask so the sandbox gets created */
42
- async function flushImport() {
43
- await act(async () => {
44
- await new Promise((r) => setTimeout(r, 0));
45
- });
46
- }
47
-
48
- function renderRenderer(content: OpenGenerativeUIContent) {
49
- return render(
50
- <OpenGenerativeUIActivityRenderer
51
- activityType="open-generative-ui"
52
- content={content}
53
- message={{}}
54
- agent={{}}
55
- />,
56
- );
57
- }
58
-
59
- describe("OpenGenerativeUIActivityRenderer", () => {
60
- beforeEach(() => {
61
- vi.clearAllMocks();
62
- resetMockPromise();
63
- });
64
-
65
- afterEach(() => {
66
- cleanup();
67
- });
68
-
69
- it("renders placeholder when no html", async () => {
70
- const { container } = renderRenderer({ initialHeight: 300 });
71
- await flushImport();
72
-
73
- const div = container.firstElementChild as HTMLElement;
74
- expect(div.style.height).toBe("300px");
75
- expect(div.querySelector("svg")).not.toBeNull();
76
- expect(mockCreate).not.toHaveBeenCalled();
77
- });
78
-
79
- it("creates sandbox when html is complete", async () => {
80
- const html = "<head></head><body><p>Hello</p></body>";
81
- renderRenderer({ html: [html], htmlComplete: true });
82
- await flushImport();
83
-
84
- expect(mockCreate).toHaveBeenCalledTimes(1);
85
- const [, options] = mockCreate.mock.calls[0];
86
- expect(options.frameContent).toBe(html);
87
- expect(options.frameContainer).toBeInstanceOf(HTMLElement);
88
- });
89
-
90
- it("creates preview sandbox when html is streaming (not complete)", async () => {
91
- renderRenderer({
92
- html: ["<head></head><body>partial"],
93
- htmlComplete: false,
94
- cssComplete: true,
95
- });
96
- await flushImport();
97
-
98
- // Preview sandbox is created with empty body template
99
- expect(mockCreate).toHaveBeenCalledTimes(1);
100
- const [, options] = mockCreate.mock.calls[0];
101
- expect(options.frameContent).toBe("<head></head><body></body>");
102
- });
103
-
104
- it("wraps html missing <head>", async () => {
105
- renderRenderer({
106
- html: ["<body><p>No head</p></body>"],
107
- htmlComplete: true,
108
- });
109
- await flushImport();
110
-
111
- expect(mockCreate).toHaveBeenCalledTimes(1);
112
- const [, options] = mockCreate.mock.calls[0];
113
- expect(options.frameContent).toContain("<head></head>");
114
- });
115
-
116
- it("joins html chunks when complete", async () => {
117
- renderRenderer({
118
- html: ["<head></head>", "<body>", "<p>Hello</p>", "</body>"],
119
- htmlComplete: true,
120
- });
121
- await flushImport();
122
-
123
- expect(mockCreate).toHaveBeenCalledTimes(1);
124
- const [, options] = mockCreate.mock.calls[0];
125
- expect(options.frameContent).toBe("<head></head><body><p>Hello</p></body>");
126
- });
127
-
128
- it("destroys sandbox on unmount", async () => {
129
- const { unmount } = renderRenderer({
130
- html: ["<head></head><body></body>"],
131
- htmlComplete: true,
132
- });
133
- await flushImport();
134
-
135
- expect(mockCreate).toHaveBeenCalledTimes(1);
136
- unmount();
137
- expect(mockDestroy).toHaveBeenCalledTimes(1);
138
- });
139
-
140
- it("injects jsFunctions via run()", async () => {
141
- const jsFunctions = "function greet() { return 'hi'; }";
142
- renderRenderer({
143
- html: ["<head></head><body></body>"],
144
- htmlComplete: true,
145
- jsFunctions,
146
- });
147
- await flushImport();
148
-
149
- // Resolve sandbox promise
150
- await act(async () => {
151
- mockPromiseResolve();
152
- await mockPromise;
153
- });
154
- await flushImport();
155
-
156
- expect(mockRun).toHaveBeenCalledWith(jsFunctions);
157
- });
158
-
159
- it("executes jsExpressions sequentially", async () => {
160
- renderRenderer({
161
- html: ["<head></head><body></body>"],
162
- htmlComplete: true,
163
- jsExpressions: ["expr1()", "expr2()"],
164
- });
165
- await flushImport();
166
-
167
- await act(async () => {
168
- mockPromiseResolve();
169
- await mockPromise;
170
- });
171
- await flushImport();
172
-
173
- expect(mockRun).toHaveBeenCalledWith("expr1()");
174
- expect(mockRun).toHaveBeenCalledWith("expr2()");
175
- });
176
-
177
- it("tracks index — no re-execution on re-render", async () => {
178
- const { rerender } = render(
179
- <OpenGenerativeUIActivityRenderer
180
- activityType="open-generative-ui"
181
- content={{
182
- html: ["<head></head><body></body>"],
183
- htmlComplete: true,
184
- jsExpressions: ["expr1()"],
185
- }}
186
- message={{}}
187
- agent={{}}
188
- />,
189
- );
190
- await flushImport();
191
-
192
- await act(async () => {
193
- mockPromiseResolve();
194
- await mockPromise;
195
- });
196
- await flushImport();
197
-
198
- const callCountAfterFirst = mockRun.mock.calls.filter(
199
- (c: unknown[]) => c[0] === "expr1()",
200
- ).length;
201
- expect(callCountAfterFirst).toBe(1);
202
-
203
- // Re-render with additional expression
204
- rerender(
205
- <OpenGenerativeUIActivityRenderer
206
- activityType="open-generative-ui"
207
- content={{
208
- html: ["<head></head><body></body>"],
209
- htmlComplete: true,
210
- jsExpressions: ["expr1()", "expr2()"],
211
- }}
212
- message={{}}
213
- agent={{}}
214
- />,
215
- );
216
- await flushImport();
217
-
218
- // expr1 should NOT have been called again
219
- const expr1Calls = mockRun.mock.calls.filter(
220
- (c: unknown[]) => c[0] === "expr1()",
221
- ).length;
222
- expect(expr1Calls).toBe(1);
223
-
224
- // expr2 should have been called
225
- const expr2Calls = mockRun.mock.calls.filter(
226
- (c: unknown[]) => c[0] === "expr2()",
227
- ).length;
228
- expect(expr2Calls).toBe(1);
229
- });
230
-
231
- it("queues JS before sandbox ready", async () => {
232
- renderRenderer({
233
- html: ["<head></head><body></body>"],
234
- htmlComplete: true,
235
- jsFunctions: "function foo() {}",
236
- jsExpressions: ["foo()"],
237
- });
238
- await flushImport();
239
-
240
- // Sandbox not ready yet — run should not have been called
241
- expect(mockRun).not.toHaveBeenCalled();
242
-
243
- // Now resolve
244
- await act(async () => {
245
- mockPromiseResolve();
246
- await mockPromise;
247
- });
248
- await flushImport();
249
-
250
- // Both should have been flushed
251
- expect(mockRun).toHaveBeenCalledWith("function foo() {}");
252
- expect(mockRun).toHaveBeenCalledWith("foo()");
253
- });
254
-
255
- it("recreates sandbox when html changes", async () => {
256
- const { rerender } = render(
257
- <OpenGenerativeUIActivityRenderer
258
- activityType="open-generative-ui"
259
- content={{ html: ["<head></head><body>v1</body>"], htmlComplete: true }}
260
- message={{}}
261
- agent={{}}
262
- />,
263
- );
264
- await flushImport();
265
-
266
- expect(mockCreate).toHaveBeenCalledTimes(1);
267
- await act(async () => {
268
- mockPromiseResolve();
269
- await mockPromise;
270
- });
271
-
272
- // Change html — need a new promise for the new sandbox
273
- resetMockPromise();
274
- rerender(
275
- <OpenGenerativeUIActivityRenderer
276
- activityType="open-generative-ui"
277
- content={{ html: ["<head></head><body>v2</body>"], htmlComplete: true }}
278
- message={{}}
279
- agent={{}}
280
- />,
281
- );
282
- await flushImport();
283
-
284
- // Old sandbox destroyed, new one created
285
- expect(mockDestroy).toHaveBeenCalledTimes(1);
286
- expect(mockCreate).toHaveBeenCalledTimes(2);
287
-
288
- const [, options] = mockCreate.mock.calls[1];
289
- expect(options.frameContent).toContain("v2");
290
- });
291
-
292
- describe("sandboxFunctions / localApi", () => {
293
- function renderWithSandboxFunctions(
294
- content: OpenGenerativeUIContent,
295
- sandboxFunctions: SandboxFunction[],
296
- ) {
297
- return render(
298
- <SandboxFunctionsContext.Provider value={sandboxFunctions}>
299
- <OpenGenerativeUIActivityRenderer
300
- activityType="open-generative-ui"
301
- content={content}
302
- message={{}}
303
- agent={{}}
304
- />
305
- </SandboxFunctionsContext.Provider>,
306
- );
307
- }
308
-
309
- it("passes localApi built from sandbox functions to websandbox", async () => {
310
- const handler = vi.fn().mockResolvedValue(42);
311
- const fns: SandboxFunction[] = [
312
- {
313
- name: "addToCart",
314
- description: "Add item to cart",
315
- parameters: z.object({ itemId: z.string() }),
316
- handler,
317
- },
318
- ];
319
-
320
- renderWithSandboxFunctions(
321
- { html: ["<head></head><body>test</body>"], htmlComplete: true },
322
- fns,
323
- );
324
- await flushImport();
325
-
326
- expect(mockCreate).toHaveBeenCalledTimes(1);
327
- const [localApi] = mockCreate.mock.calls[0];
328
- expect(localApi).toHaveProperty("addToCart");
329
- expect(localApi.addToCart).toBe(handler);
330
- });
331
-
332
- it("passes empty localApi when no sandbox functions", async () => {
333
- renderWithSandboxFunctions(
334
- { html: ["<head></head><body>test</body>"], htmlComplete: true },
335
- [],
336
- );
337
- await flushImport();
338
-
339
- expect(mockCreate).toHaveBeenCalledTimes(1);
340
- const [localApi] = mockCreate.mock.calls[0];
341
- expect(Object.keys(localApi)).toHaveLength(0);
342
- });
343
-
344
- it("recreates sandbox when sandbox functions change", async () => {
345
- const handler1 = vi.fn();
346
- const fns1: SandboxFunction[] = [
347
- {
348
- name: "fn1",
349
- description: "first",
350
- parameters: z.object({}),
351
- handler: handler1,
352
- },
353
- ];
354
-
355
- const { rerender } = render(
356
- <SandboxFunctionsContext.Provider value={fns1}>
357
- <OpenGenerativeUIActivityRenderer
358
- activityType="open-generative-ui"
359
- content={{
360
- html: ["<head></head><body>test</body>"],
361
- htmlComplete: true,
362
- }}
363
- message={{}}
364
- agent={{}}
365
- />
366
- </SandboxFunctionsContext.Provider>,
367
- );
368
- await flushImport();
369
-
370
- expect(mockCreate).toHaveBeenCalledTimes(1);
371
- await act(async () => {
372
- mockPromiseResolve();
373
- await mockPromise;
374
- });
375
-
376
- // Change sandbox functions
377
- const handler2 = vi.fn();
378
- const fns2: SandboxFunction[] = [
379
- {
380
- name: "fn2",
381
- description: "second",
382
- parameters: z.object({}),
383
- handler: handler2,
384
- },
385
- ];
386
-
387
- resetMockPromise();
388
- rerender(
389
- <SandboxFunctionsContext.Provider value={fns2}>
390
- <OpenGenerativeUIActivityRenderer
391
- activityType="open-generative-ui"
392
- content={{
393
- html: ["<head></head><body>test</body>"],
394
- htmlComplete: true,
395
- }}
396
- message={{}}
397
- agent={{}}
398
- />
399
- </SandboxFunctionsContext.Provider>,
400
- );
401
- await flushImport();
402
-
403
- // Old sandbox destroyed, new one created with new localApi
404
- expect(mockDestroy).toHaveBeenCalledTimes(1);
405
- expect(mockCreate).toHaveBeenCalledTimes(2);
406
- const [localApi] = mockCreate.mock.calls[1];
407
- expect(localApi).toHaveProperty("fn2");
408
- expect(localApi.fn2).toBe(handler2);
409
- });
410
-
411
- it("includes multiple sandbox functions in localApi", async () => {
412
- const handlerA = vi.fn();
413
- const handlerB = vi.fn();
414
- const fns: SandboxFunction[] = [
415
- {
416
- name: "fnA",
417
- description: "A",
418
- parameters: z.object({}),
419
- handler: handlerA,
420
- },
421
- {
422
- name: "fnB",
423
- description: "B",
424
- parameters: z.object({}),
425
- handler: handlerB,
426
- },
427
- ];
428
-
429
- renderWithSandboxFunctions(
430
- { html: ["<head></head><body>test</body>"], htmlComplete: true },
431
- fns,
432
- );
433
- await flushImport();
434
-
435
- const [localApi] = mockCreate.mock.calls[0];
436
- expect(Object.keys(localApi)).toHaveLength(2);
437
- expect(localApi.fnA).toBe(handlerA);
438
- expect(localApi.fnB).toBe(handlerB);
439
- });
440
- });
441
-
442
- describe("progressive streaming preview", () => {
443
- it("creates preview sandbox when chunks arrive but htmlComplete is false", async () => {
444
- renderRenderer({
445
- html: ["<body><div>Hello</div>"],
446
- htmlComplete: false,
447
- cssComplete: true,
448
- generating: true,
449
- });
450
- await flushImport();
451
-
452
- // Preview sandbox created with empty body template
453
- expect(mockCreate).toHaveBeenCalledTimes(1);
454
- const [localApi, options] = mockCreate.mock.calls[0];
455
- expect(options.frameContent).toBe("<head></head><body></body>");
456
- expect(Object.keys(localApi)).toHaveLength(0);
457
- });
458
-
459
- it("updates preview on re-render with more chunks (after throttle)", async () => {
460
- const { rerender } = render(
461
- <OpenGenerativeUIActivityRenderer
462
- activityType="open-generative-ui"
463
- content={{
464
- html: ["<body><div>Hello</div>"],
465
- htmlComplete: false,
466
- cssComplete: true,
467
- generating: true,
468
- }}
469
- message={{}}
470
- agent={{}}
471
- />,
472
- );
473
- await flushImport();
474
-
475
- // Resolve preview sandbox promise
476
- await act(async () => {
477
- mockPromiseResolve();
478
- await mockPromise;
479
- });
480
- await flushImport();
481
-
482
- // Should have called run with innerHTML update (initial content — immediate flush)
483
- const innerHtmlCalls = mockRun.mock.calls.filter(
484
- (c: unknown[]) =>
485
- typeof c[0] === "string" &&
486
- (c[0] as string).includes("document.body.innerHTML"),
487
- );
488
- expect(innerHtmlCalls.length).toBeGreaterThanOrEqual(1);
489
-
490
- // Re-render with more chunks — throttled by the outer wrapper
491
- mockRun.mockClear();
492
- rerender(
493
- <OpenGenerativeUIActivityRenderer
494
- activityType="open-generative-ui"
495
- content={{
496
- html: ["<body><div>Hello</div>", "<p>World</p>"],
497
- htmlComplete: false,
498
- cssComplete: true,
499
- generating: true,
500
- }}
501
- message={{}}
502
- agent={{}}
503
- />,
504
- );
505
-
506
- // Wait for the 1s throttle window to pass
507
- await act(async () => {
508
- await new Promise((r) => setTimeout(r, 1100));
509
- });
510
- await flushImport();
511
-
512
- // Should have updated innerHTML with new content after throttle
513
- const updateCalls = mockRun.mock.calls.filter(
514
- (c: unknown[]) =>
515
- typeof c[0] === "string" &&
516
- (c[0] as string).includes("document.body.innerHTML"),
517
- );
518
- expect(updateCalls.length).toBeGreaterThanOrEqual(1);
519
- expect(updateCalls[updateCalls.length - 1]![0]).toContain("World");
520
- }, 10000);
521
-
522
- it("destroys preview and creates final sandbox when htmlComplete arrives", async () => {
523
- const { rerender } = render(
524
- <OpenGenerativeUIActivityRenderer
525
- activityType="open-generative-ui"
526
- content={{
527
- html: ["<body><div>Hello</div>"],
528
- htmlComplete: false,
529
- cssComplete: true,
530
- generating: true,
531
- }}
532
- message={{}}
533
- agent={{}}
534
- />,
535
- );
536
- await flushImport();
537
-
538
- expect(mockCreate).toHaveBeenCalledTimes(1);
539
-
540
- // Now complete the HTML
541
- resetMockPromise();
542
- rerender(
543
- <OpenGenerativeUIActivityRenderer
544
- activityType="open-generative-ui"
545
- content={{
546
- html: [
547
- "<head><style>body{margin:0}</style></head><body><div>Hello</div></body>",
548
- ],
549
- htmlComplete: true,
550
- cssComplete: true,
551
- generating: false,
552
- }}
553
- message={{}}
554
- agent={{}}
555
- />,
556
- );
557
- await flushImport();
558
-
559
- // Preview destroyed, final sandbox created
560
- expect(mockDestroy).toHaveBeenCalledTimes(1);
561
- expect(mockCreate).toHaveBeenCalledTimes(2);
562
-
563
- const [, options] = mockCreate.mock.calls[1];
564
- expect(options.frameContent).toContain("<style>");
565
- expect(options.frameContent).toContain("Hello");
566
- });
567
-
568
- it("does not show preview until cssComplete, then starts streaming HTML immediately", async () => {
569
- // Phase 1: HTML chunks arrive but CSS is not yet complete — no preview
570
- const { rerender } = render(
571
- <OpenGenerativeUIActivityRenderer
572
- activityType="open-generative-ui"
573
- content={{
574
- html: ["<body><div>Streaming content</div>"],
575
- htmlComplete: false,
576
- generating: true,
577
- // cssComplete is NOT set — CSS still generating
578
- }}
579
- message={{}}
580
- agent={{}}
581
- />,
582
- );
583
- await flushImport();
584
-
585
- // No sandbox created — placeholder shown while CSS is pending
586
- expect(mockCreate).not.toHaveBeenCalled();
587
-
588
- // Phase 2: CSS completes — preview should appear immediately with the
589
- // HTML chunks that have already accumulated
590
- rerender(
591
- <OpenGenerativeUIActivityRenderer
592
- activityType="open-generative-ui"
593
- content={{
594
- css: "body { margin: 0; color: red; }",
595
- cssComplete: true,
596
- html: ["<body><div>Streaming content</div>"],
597
- htmlComplete: false,
598
- generating: true,
599
- }}
600
- message={{}}
601
- agent={{}}
602
- />,
603
- );
604
- await flushImport();
605
-
606
- // Preview sandbox created now that CSS is complete
607
- expect(mockCreate).toHaveBeenCalledTimes(1);
608
- const [, options] = mockCreate.mock.calls[0];
609
- expect(options.frameContent).toBe("<head></head><body></body>");
610
-
611
- // Resolve sandbox promise so preview content is applied
612
- await act(async () => {
613
- mockPromiseResolve();
614
- await mockPromise;
615
- });
616
- await flushImport();
617
-
618
- // CSS should be injected into <head> as a <style> tag
619
- const headCalls = mockRun.mock.calls.filter(
620
- (c: unknown[]) =>
621
- typeof c[0] === "string" &&
622
- (c[0] as string).includes("document.head.innerHTML"),
623
- );
624
- expect(headCalls.length).toBeGreaterThanOrEqual(1);
625
- expect(headCalls[0][0]).toContain("body { margin: 0; color: red; }");
626
-
627
- // HTML body content should be rendered in the preview
628
- const bodyCalls = mockRun.mock.calls.filter(
629
- (c: unknown[]) =>
630
- typeof c[0] === "string" &&
631
- (c[0] as string).includes("document.body.innerHTML"),
632
- );
633
- expect(bodyCalls.length).toBeGreaterThanOrEqual(1);
634
- expect(bodyCalls[0][0]).toContain("Streaming content");
635
- });
636
-
637
- it("does not create preview when no meaningful body content", async () => {
638
- renderRenderer({
639
- html: ["<head><style>.foo { color: red; }</style></head>"],
640
- htmlComplete: false,
641
- generating: true,
642
- });
643
- await flushImport();
644
-
645
- // No preview — only head content, no body
646
- expect(mockCreate).not.toHaveBeenCalled();
647
- });
648
-
649
- it("skips preview entirely for fast completion", async () => {
650
- renderRenderer({
651
- html: ["<head></head><body><div>Done</div></body>"],
652
- htmlComplete: true,
653
- generating: false,
654
- });
655
- await flushImport();
656
-
657
- // Only final sandbox created, no preview
658
- expect(mockCreate).toHaveBeenCalledTimes(1);
659
- const [, options] = mockCreate.mock.calls[0];
660
- expect(options.frameContent).toContain("Done");
661
- // Final sandbox uses localApi, not empty object
662
- expect(options.frameContent).not.toBe("<head></head><body></body>");
663
- });
664
- });
665
- });