@copilotkit/react-core 1.57.3 → 1.58.0-canary.thread-id-propagation

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 (292) hide show
  1. package/LICENSE +21 -0
  2. package/dist/{copilotkit-CtXcs1ea.cjs → copilotkit-B4ouY7qC.cjs} +14 -3
  3. package/dist/copilotkit-B4ouY7qC.cjs.map +1 -0
  4. package/dist/copilotkit-BK9CVq9A.d.cts.map +1 -1
  5. package/dist/{copilotkit-CC8DjOiC.mjs → copilotkit-L4mM_JqG.mjs} +14 -3
  6. package/dist/copilotkit-L4mM_JqG.mjs.map +1 -0
  7. package/dist/copilotkit-WlmeVijs.d.mts.map +1 -1
  8. package/dist/index.cjs +3 -77
  9. package/dist/index.cjs.map +1 -1
  10. package/dist/index.d.cts +2 -2
  11. package/dist/index.d.mts +2 -2
  12. package/dist/index.mjs +3 -77
  13. package/dist/index.mjs.map +1 -1
  14. package/dist/index.umd.js +15 -78
  15. package/dist/index.umd.js.map +1 -1
  16. package/dist/v2/headless.cjs +11 -0
  17. package/dist/v2/headless.cjs.map +1 -1
  18. package/dist/v2/headless.d.cts.map +1 -1
  19. package/dist/v2/headless.d.mts.map +1 -1
  20. package/dist/v2/headless.mjs +11 -0
  21. package/dist/v2/headless.mjs.map +1 -1
  22. package/dist/v2/index.cjs +1 -1
  23. package/dist/v2/index.mjs +1 -1
  24. package/dist/v2/index.umd.js +13 -2
  25. package/dist/v2/index.umd.js.map +1 -1
  26. package/package.json +12 -13
  27. package/skills/react-core/SKILL.md +108 -0
  28. package/skills/react-core/references/agent-access.md +288 -0
  29. package/skills/react-core/references/attachments.md +291 -0
  30. package/skills/react-core/references/capabilities.md +138 -0
  31. package/skills/react-core/references/chat-components.md +221 -0
  32. package/skills/react-core/references/client-side-tools.md +358 -0
  33. package/skills/react-core/references/custom-message-renderers.md +226 -0
  34. package/skills/react-core/references/debug-mode.md +153 -0
  35. package/skills/react-core/references/human-in-the-loop.md +312 -0
  36. package/skills/react-core/references/provider-setup.md +326 -0
  37. package/skills/react-core/references/rendering-activity-messages.md +207 -0
  38. package/skills/react-core/references/rendering-tool-calls.md +319 -0
  39. package/skills/react-core/references/suggestions.md +211 -0
  40. package/skills/react-core/references/switching-agents-recipes.md +160 -0
  41. package/skills/react-core/references/switching-agents.md +231 -0
  42. package/skills/react-core/references/threads.md +226 -0
  43. package/.attw.json +0 -3
  44. package/CHANGELOG.md +0 -5043
  45. package/dist/copilotkit-CC8DjOiC.mjs.map +0 -1
  46. package/dist/copilotkit-CtXcs1ea.cjs.map +0 -1
  47. package/scripts/scope-preflight.mjs +0 -100
  48. package/src/components/CopilotListeners.tsx +0 -137
  49. package/src/components/__tests__/CopilotListeners.test.tsx +0 -38
  50. package/src/components/copilot-provider/__tests__/copilot-messages-key.test.tsx +0 -92
  51. package/src/components/copilot-provider/__tests__/copilotkit-error.test.tsx +0 -77
  52. package/src/components/copilot-provider/__tests__/error-visibility-prod.test.tsx +0 -70
  53. package/src/components/copilot-provider/__tests__/v1-explicit-threadid-bridge.test.tsx +0 -107
  54. package/src/components/copilot-provider/copilot-messages.tsx +0 -314
  55. package/src/components/copilot-provider/copilotkit-props.tsx +0 -214
  56. package/src/components/copilot-provider/copilotkit.tsx +0 -853
  57. package/src/components/copilot-provider/index.ts +0 -3
  58. package/src/components/dev-console/console-trigger.tsx +0 -283
  59. package/src/components/dev-console/developer-console-modal.tsx +0 -1016
  60. package/src/components/dev-console/icons.tsx +0 -106
  61. package/src/components/error-boundary/error-boundary.tsx +0 -99
  62. package/src/components/error-boundary/error-utils.tsx +0 -105
  63. package/src/components/index.ts +0 -1
  64. package/src/components/toast/exclamation-mark-icon.tsx +0 -27
  65. package/src/components/toast/toast-provider.tsx +0 -448
  66. package/src/components/usage-banner.tsx +0 -266
  67. package/src/context/__tests__/threads-context.test.tsx +0 -141
  68. package/src/context/coagent-state-renders-context.tsx +0 -89
  69. package/src/context/copilot-context.tsx +0 -365
  70. package/src/context/copilot-messages-context.tsx +0 -35
  71. package/src/context/index.ts +0 -22
  72. package/src/context/threads-context.tsx +0 -69
  73. package/src/hooks/__tests__/use-coagent-config.test.ts +0 -352
  74. package/src/hooks/__tests__/use-coagent-state-render-bridge.helpers.test.ts +0 -107
  75. package/src/hooks/__tests__/use-coagent-state-render.e2e.test.tsx +0 -1209
  76. package/src/hooks/__tests__/use-coagent-state-render.test.tsx +0 -356
  77. package/src/hooks/__tests__/use-copilot-chat-internal-connect.test.tsx +0 -241
  78. package/src/hooks/__tests__/use-frontend-tool-available.test.tsx +0 -72
  79. package/src/hooks/__tests__/use-frontend-tool-remount.e2e.test.tsx +0 -102
  80. package/src/hooks/index.ts +0 -33
  81. package/src/hooks/use-agent-nodename.ts +0 -33
  82. package/src/hooks/use-coagent-state-render-bridge.helpers.ts +0 -345
  83. package/src/hooks/use-coagent-state-render-bridge.tsx +0 -222
  84. package/src/hooks/use-coagent-state-render-registry.ts +0 -230
  85. package/src/hooks/use-coagent-state-render.ts +0 -163
  86. package/src/hooks/use-coagent.ts +0 -377
  87. package/src/hooks/use-configure-chat-suggestions.tsx +0 -96
  88. package/src/hooks/use-copilot-action.ts +0 -245
  89. package/src/hooks/use-copilot-additional-instructions.ts +0 -98
  90. package/src/hooks/use-copilot-authenticated-action.ts +0 -73
  91. package/src/hooks/use-copilot-chat-headless_c.ts +0 -264
  92. package/src/hooks/use-copilot-chat-suggestions.tsx +0 -134
  93. package/src/hooks/use-copilot-chat.ts +0 -132
  94. package/src/hooks/use-copilot-chat_internal.ts +0 -875
  95. package/src/hooks/use-copilot-readable.ts +0 -135
  96. package/src/hooks/use-copilot-runtime-client.ts +0 -178
  97. package/src/hooks/use-default-tool.ts +0 -13
  98. package/src/hooks/use-flat-category-store.ts +0 -109
  99. package/src/hooks/use-frontend-tool.ts +0 -113
  100. package/src/hooks/use-human-in-the-loop.ts +0 -138
  101. package/src/hooks/use-langgraph-interrupt.ts +0 -103
  102. package/src/hooks/use-lazy-tool-renderer.tsx +0 -30
  103. package/src/hooks/use-make-copilot-document-readable.ts +0 -30
  104. package/src/hooks/use-render-tool-call.ts +0 -89
  105. package/src/hooks/use-tree.ts +0 -222
  106. package/src/index.tsx +0 -7
  107. package/src/lib/copilot-task.ts +0 -215
  108. package/src/lib/index.ts +0 -1
  109. package/src/lib/status-checker.ts +0 -67
  110. package/src/setupTests.ts +0 -37
  111. package/src/test-helpers/copilot-context.ts +0 -91
  112. package/src/types/chat-suggestion-configuration.ts +0 -23
  113. package/src/types/coagent-action.ts +0 -35
  114. package/src/types/coagent-state.ts +0 -13
  115. package/src/types/crew.ts +0 -89
  116. package/src/types/document-pointer.ts +0 -7
  117. package/src/types/frontend-action.ts +0 -213
  118. package/src/types/index.ts +0 -17
  119. package/src/types/interrupt-action.ts +0 -58
  120. package/src/types/system-message.ts +0 -4
  121. package/src/utils/dev-console.ts +0 -19
  122. package/src/utils/index.ts +0 -2
  123. package/src/utils/suggestions-constants.ts +0 -8
  124. package/src/utils/utils.test.ts +0 -7
  125. package/src/utils/utils.ts +0 -6
  126. package/src/v2/__tests__/A2UIMessageRenderer.test.tsx +0 -240
  127. package/src/v2/__tests__/globalSetup.ts +0 -14
  128. package/src/v2/__tests__/setup.ts +0 -93
  129. package/src/v2/__tests__/utils/test-helpers.tsx +0 -570
  130. package/src/v2/a2ui/A2UICatalogContext.tsx +0 -79
  131. package/src/v2/a2ui/A2UIMessageRenderer.tsx +0 -294
  132. package/src/v2/a2ui/A2UIToolCallRenderer.tsx +0 -290
  133. package/src/v2/components/CopilotKitInspector.tsx +0 -52
  134. package/src/v2/components/MCPAppsActivityRenderer.tsx +0 -815
  135. package/src/v2/components/OpenGenerativeUIRenderer.tsx +0 -598
  136. package/src/v2/components/WildcardToolCallRender.tsx +0 -86
  137. package/src/v2/components/__tests__/OpenGenerativeUIRenderer.test.tsx +0 -665
  138. package/src/v2/components/chat/CopilotChat.tsx +0 -664
  139. package/src/v2/components/chat/CopilotChatAssistantMessage.tsx +0 -393
  140. package/src/v2/components/chat/CopilotChatAttachmentQueue.tsx +0 -374
  141. package/src/v2/components/chat/CopilotChatAttachmentRenderer.tsx +0 -159
  142. package/src/v2/components/chat/CopilotChatAudioRecorder.tsx +0 -350
  143. package/src/v2/components/chat/CopilotChatInput.tsx +0 -1412
  144. package/src/v2/components/chat/CopilotChatMessageView.tsx +0 -716
  145. package/src/v2/components/chat/CopilotChatReasoningMessage.tsx +0 -265
  146. package/src/v2/components/chat/CopilotChatSuggestionPill.tsx +0 -59
  147. package/src/v2/components/chat/CopilotChatSuggestionView.tsx +0 -134
  148. package/src/v2/components/chat/CopilotChatToggleButton.tsx +0 -171
  149. package/src/v2/components/chat/CopilotChatToolCallsView.tsx +0 -40
  150. package/src/v2/components/chat/CopilotChatUserMessage.tsx +0 -445
  151. package/src/v2/components/chat/CopilotChatView.tsx +0 -890
  152. package/src/v2/components/chat/CopilotModalHeader.tsx +0 -129
  153. package/src/v2/components/chat/CopilotPopup.tsx +0 -81
  154. package/src/v2/components/chat/CopilotPopupView.tsx +0 -317
  155. package/src/v2/components/chat/CopilotSidebar.tsx +0 -80
  156. package/src/v2/components/chat/CopilotSidebarView.tsx +0 -269
  157. package/src/v2/components/chat/Lightbox.tsx +0 -103
  158. package/src/v2/components/chat/__tests__/CopilotChat.absentThreadConnect.test.tsx +0 -66
  159. package/src/v2/components/chat/__tests__/CopilotChat.attachments.test.tsx +0 -168
  160. package/src/v2/components/chat/__tests__/CopilotChat.e2e.test.tsx +0 -1239
  161. package/src/v2/components/chat/__tests__/CopilotChat.onError.test.tsx +0 -73
  162. package/src/v2/components/chat/__tests__/CopilotChat.slots.e2e.test.tsx +0 -432
  163. package/src/v2/components/chat/__tests__/CopilotChat.suggestionsAlways.test.tsx +0 -183
  164. package/src/v2/components/chat/__tests__/CopilotChat.welcomeGate.test.tsx +0 -184
  165. package/src/v2/components/chat/__tests__/CopilotChatActivityRendering.e2e.test.tsx +0 -649
  166. package/src/v2/components/chat/__tests__/CopilotChatAssistantMessage.slots.e2e.test.tsx +0 -624
  167. package/src/v2/components/chat/__tests__/CopilotChatAssistantMessage.test.tsx +0 -702
  168. package/src/v2/components/chat/__tests__/CopilotChatAssistantMessage.thumbs.test.tsx +0 -72
  169. package/src/v2/components/chat/__tests__/CopilotChatCopyButton.clipboard.test.tsx +0 -241
  170. package/src/v2/components/chat/__tests__/CopilotChatCssClasses.test.tsx +0 -107
  171. package/src/v2/components/chat/__tests__/CopilotChatInput.slots.e2e.test.tsx +0 -929
  172. package/src/v2/components/chat/__tests__/CopilotChatInput.test.tsx +0 -1567
  173. package/src/v2/components/chat/__tests__/CopilotChatMessageView.slots.e2e.test.tsx +0 -1004
  174. package/src/v2/components/chat/__tests__/CopilotChatMessageView.test.tsx +0 -279
  175. package/src/v2/components/chat/__tests__/CopilotChatPerf.e2e.test.tsx +0 -336
  176. package/src/v2/components/chat/__tests__/CopilotChatPropsRerender.e2e.test.tsx +0 -249
  177. package/src/v2/components/chat/__tests__/CopilotChatSuggestionView.slots.e2e.test.tsx +0 -530
  178. package/src/v2/components/chat/__tests__/CopilotChatToolRendering.e2e.test.tsx +0 -785
  179. package/src/v2/components/chat/__tests__/CopilotChatToolRerenders.e2e.test.tsx +0 -2416
  180. package/src/v2/components/chat/__tests__/CopilotChatUserMessage.slots.e2e.test.tsx +0 -621
  181. package/src/v2/components/chat/__tests__/CopilotChatView.connectingGate.test.tsx +0 -56
  182. package/src/v2/components/chat/__tests__/CopilotChatView.inputOverlay.test.tsx +0 -264
  183. package/src/v2/components/chat/__tests__/CopilotChatView.onClick.e2e.test.tsx +0 -853
  184. package/src/v2/components/chat/__tests__/CopilotChatView.pinToSend.test.tsx +0 -94
  185. package/src/v2/components/chat/__tests__/CopilotChatView.slots.e2e.test.tsx +0 -1050
  186. package/src/v2/components/chat/__tests__/CopilotModalHeader.slots.e2e.test.tsx +0 -484
  187. package/src/v2/components/chat/__tests__/CopilotPopupView.slots.e2e.test.tsx +0 -612
  188. package/src/v2/components/chat/__tests__/CopilotSidebarView.position.test.tsx +0 -159
  189. package/src/v2/components/chat/__tests__/CopilotSidebarView.slots.e2e.test.tsx +0 -502
  190. package/src/v2/components/chat/__tests__/MCPAppsActivityRenderer.e2e.test.tsx +0 -1068
  191. package/src/v2/components/chat/__tests__/MCPAppsProxy.e2e.test.tsx +0 -589
  192. package/src/v2/components/chat/__tests__/MCPAppsUiMessage.e2e.test.tsx +0 -403
  193. package/src/v2/components/chat/__tests__/copilot-chat-throttle.test.tsx +0 -137
  194. package/src/v2/components/chat/__tests__/normalize-auto-scroll.test.ts +0 -37
  195. package/src/v2/components/chat/__tests__/setup.ts +0 -1
  196. package/src/v2/components/chat/index.ts +0 -90
  197. package/src/v2/components/chat/last-user-message-context.ts +0 -21
  198. package/src/v2/components/chat/normalize-auto-scroll.ts +0 -17
  199. package/src/v2/components/chat/scroll-element-context.ts +0 -13
  200. package/src/v2/components/index.ts +0 -8
  201. package/src/v2/components/intelligence-indicator/IntelligenceIndicator.tsx +0 -286
  202. package/src/v2/components/intelligence-indicator/__tests__/IntelligenceIndicator.e2e.test.tsx +0 -464
  203. package/src/v2/components/intelligence-indicator/index.ts +0 -2
  204. package/src/v2/components/license-warning-banner.tsx +0 -217
  205. package/src/v2/components/ui/button.tsx +0 -124
  206. package/src/v2/components/ui/dropdown-menu.tsx +0 -258
  207. package/src/v2/components/ui/tooltip.tsx +0 -60
  208. package/src/v2/context.ts +0 -62
  209. package/src/v2/headless.ts +0 -64
  210. package/src/v2/hooks/__tests__/standard-schema-types.test.tsx +0 -152
  211. package/src/v2/hooks/__tests__/standard-schema.test.tsx +0 -282
  212. package/src/v2/hooks/__tests__/use-agent-context-timing.e2e.test.tsx +0 -140
  213. package/src/v2/hooks/__tests__/use-agent-context.test.tsx +0 -401
  214. package/src/v2/hooks/__tests__/use-agent-error-state.test.tsx +0 -44
  215. package/src/v2/hooks/__tests__/use-agent-stability.test.tsx +0 -211
  216. package/src/v2/hooks/__tests__/use-agent-throttle.test.tsx +0 -1029
  217. package/src/v2/hooks/__tests__/use-agent.e2e.test.tsx +0 -159
  218. package/src/v2/hooks/__tests__/use-attachments.test.tsx +0 -169
  219. package/src/v2/hooks/__tests__/use-capabilities.test.tsx +0 -76
  220. package/src/v2/hooks/__tests__/use-component.test.tsx +0 -126
  221. package/src/v2/hooks/__tests__/use-configure-suggestions.e2e.test.tsx +0 -696
  222. package/src/v2/hooks/__tests__/use-default-render-tool.test.tsx +0 -153
  223. package/src/v2/hooks/__tests__/use-frontend-tool-available.test.tsx +0 -167
  224. package/src/v2/hooks/__tests__/use-frontend-tool.e2e.test.tsx +0 -2148
  225. package/src/v2/hooks/__tests__/use-human-in-the-loop.e2e.test.tsx +0 -1261
  226. package/src/v2/hooks/__tests__/use-interrupt.test.tsx +0 -397
  227. package/src/v2/hooks/__tests__/use-katex-styles.test.tsx +0 -56
  228. package/src/v2/hooks/__tests__/use-keyboard-height.test.tsx +0 -192
  229. package/src/v2/hooks/__tests__/use-pin-to-send.test.tsx +0 -219
  230. package/src/v2/hooks/__tests__/use-render-custom-messages.test.tsx +0 -55
  231. package/src/v2/hooks/__tests__/use-render-tool.test.tsx +0 -259
  232. package/src/v2/hooks/__tests__/use-suggestions.e2e.test.tsx +0 -524
  233. package/src/v2/hooks/__tests__/use-threads.test.tsx +0 -757
  234. package/src/v2/hooks/__tests__/zod-regression.test.tsx +0 -311
  235. package/src/v2/hooks/index.ts +0 -24
  236. package/src/v2/hooks/use-agent-context.tsx +0 -45
  237. package/src/v2/hooks/use-agent.tsx +0 -227
  238. package/src/v2/hooks/use-attachments.tsx +0 -269
  239. package/src/v2/hooks/use-capabilities.tsx +0 -25
  240. package/src/v2/hooks/use-component.tsx +0 -91
  241. package/src/v2/hooks/use-configure-suggestions.tsx +0 -236
  242. package/src/v2/hooks/use-default-render-tool.tsx +0 -271
  243. package/src/v2/hooks/use-frontend-tool.tsx +0 -46
  244. package/src/v2/hooks/use-human-in-the-loop.tsx +0 -81
  245. package/src/v2/hooks/use-interrupt.tsx +0 -305
  246. package/src/v2/hooks/use-keyboard-height.tsx +0 -67
  247. package/src/v2/hooks/use-pin-to-send.ts +0 -94
  248. package/src/v2/hooks/use-render-activity-message.tsx +0 -72
  249. package/src/v2/hooks/use-render-custom-messages.tsx +0 -93
  250. package/src/v2/hooks/use-render-tool-call.tsx +0 -208
  251. package/src/v2/hooks/use-render-tool.tsx +0 -184
  252. package/src/v2/hooks/use-suggestions.tsx +0 -91
  253. package/src/v2/hooks/use-threads.tsx +0 -325
  254. package/src/v2/hooks/useKatexStyles.ts +0 -27
  255. package/src/v2/index.css +0 -1
  256. package/src/v2/index.ts +0 -27
  257. package/src/v2/lib/__tests__/completePartialMarkdown.test.ts +0 -495
  258. package/src/v2/lib/__tests__/processPartialHtml.test.ts +0 -112
  259. package/src/v2/lib/__tests__/renderSlot.test.tsx +0 -588
  260. package/src/v2/lib/__tests__/slots.test.ts +0 -56
  261. package/src/v2/lib/processPartialHtml.ts +0 -45
  262. package/src/v2/lib/react-core.ts +0 -156
  263. package/src/v2/lib/slots.tsx +0 -184
  264. package/src/v2/lib/transcription-client.ts +0 -184
  265. package/src/v2/lib/utils.ts +0 -8
  266. package/src/v2/providers/CopilotChatConfigurationProvider.tsx +0 -196
  267. package/src/v2/providers/CopilotKitProvider.tsx +0 -800
  268. package/src/v2/providers/SandboxFunctionsContext.ts +0 -10
  269. package/src/v2/providers/__tests__/CopilotChatConfigurationProvider.test.tsx +0 -652
  270. package/src/v2/providers/__tests__/CopilotKitProvider.license.test.tsx +0 -101
  271. package/src/v2/providers/__tests__/CopilotKitProvider.onError.test.tsx +0 -69
  272. package/src/v2/providers/__tests__/CopilotKitProvider.renderCustomMessages.e2e.test.tsx +0 -881
  273. package/src/v2/providers/__tests__/CopilotKitProvider.sandboxFunctions.test.tsx +0 -198
  274. package/src/v2/providers/__tests__/CopilotKitProvider.stability.test.tsx +0 -740
  275. package/src/v2/providers/__tests__/CopilotKitProvider.test.tsx +0 -713
  276. package/src/v2/providers/__tests__/CopilotKitProvider.wildcard.test.tsx +0 -294
  277. package/src/v2/providers/index.ts +0 -21
  278. package/src/v2/styles/globals.css +0 -349
  279. package/src/v2/types/__tests__/defineToolCallRenderer.test.tsx +0 -525
  280. package/src/v2/types/defineToolCallRenderer.ts +0 -68
  281. package/src/v2/types/frontend-tool.ts +0 -8
  282. package/src/v2/types/human-in-the-loop.ts +0 -33
  283. package/src/v2/types/index.ts +0 -8
  284. package/src/v2/types/interrupt.ts +0 -15
  285. package/src/v2/types/react-activity-message-renderer.ts +0 -27
  286. package/src/v2/types/react-custom-message-renderer.ts +0 -17
  287. package/src/v2/types/react-tool-call-renderer.ts +0 -35
  288. package/src/v2/types/sandbox-function.ts +0 -11
  289. package/tsconfig.json +0 -8
  290. package/tsdown.config.ts +0 -193
  291. package/typedoc.json +0 -4
  292. package/vitest.config.mjs +0 -31
@@ -1,853 +0,0 @@
1
- /**
2
- * @vitest-environment jsdom
3
- */
4
- import React from "react";
5
- import { render, screen, fireEvent } from "@testing-library/react";
6
- import { describe, it, expect, vi } from "vitest";
7
- import { CopilotChatView } from "../CopilotChatView";
8
- import { CopilotChatInput } from "../CopilotChatInput";
9
- import { CopilotChatMessageView } from "../CopilotChatMessageView";
10
- import { CopilotKitProvider } from "../../../providers/CopilotKitProvider";
11
- import { CopilotChatConfigurationProvider } from "../../../providers/CopilotChatConfigurationProvider";
12
-
13
- // Wrapper to provide required context
14
- const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
15
- <CopilotKitProvider>
16
- <CopilotChatConfigurationProvider threadId="test-thread">
17
- <div style={{ height: 400 }}>{children}</div>
18
- </CopilotChatConfigurationProvider>
19
- </CopilotKitProvider>
20
- );
21
-
22
- const createMessages = () => [
23
- { id: "1", role: "user" as const, content: "Hello" },
24
- { id: "2", role: "assistant" as const, content: "Hi there! How can I help?" },
25
- { id: "3", role: "user" as const, content: "Tell me a joke" },
26
- {
27
- id: "4",
28
- role: "assistant" as const,
29
- content: "Why did the chicken cross the road?",
30
- },
31
- ];
32
-
33
- const createSuggestions = () => [
34
- {
35
- title: "Tell me more",
36
- message: "Tell me more about that",
37
- isLoading: false,
38
- },
39
- {
40
- title: "Another topic",
41
- message: "Let's talk about something else",
42
- isLoading: false,
43
- },
44
- ];
45
-
46
- describe("CopilotChatView onClick Handlers - Drill-Down E2E Tests", () => {
47
- // ============================================================================
48
- // LEVEL 1: CopilotChatView Direct Slots
49
- // ============================================================================
50
- describe("Level 1: CopilotChatView Direct Slots", () => {
51
- describe("scrollToBottomButton onClick (nested under scrollView)", () => {
52
- it("should handle onClick on scrollToBottomButton via scrollView props", () => {
53
- const onClick = vi.fn();
54
- const { container } = render(
55
- <TestWrapper>
56
- <CopilotChatView
57
- messages={createMessages()}
58
- scrollView={{ scrollToBottomButton: { onClick } }}
59
- />
60
- </TestWrapper>,
61
- );
62
-
63
- // Find and click the scroll to bottom button (may need scrolling to appear)
64
- const scrollBtn =
65
- container.querySelector('[aria-label*="scroll"]') ||
66
- container.querySelector('button[class*="scroll"]');
67
- if (scrollBtn) {
68
- fireEvent.click(scrollBtn);
69
- expect(onClick).toHaveBeenCalled();
70
- }
71
- });
72
- });
73
-
74
- describe("input onClick", () => {
75
- it("should handle onClick on input via props object", () => {
76
- const onClick = vi.fn();
77
- const { container } = render(
78
- <TestWrapper>
79
- <CopilotChatView
80
- messages={createMessages()}
81
- input={{ onClick, "data-testid": "input-slot" } as any}
82
- />
83
- </TestWrapper>,
84
- );
85
-
86
- const input =
87
- screen.queryByTestId("input-slot") ||
88
- container.querySelector('[data-slot="input"]');
89
- if (input) {
90
- fireEvent.click(input);
91
- expect(onClick).toHaveBeenCalled();
92
- }
93
- });
94
- });
95
-
96
- describe("suggestionView onClick", () => {
97
- it("should handle onSelectSuggestion when suggestion is clicked", () => {
98
- const onSelectSuggestion = vi.fn();
99
- render(
100
- <TestWrapper>
101
- <CopilotChatView
102
- messages={createMessages()}
103
- suggestions={createSuggestions()}
104
- onSelectSuggestion={onSelectSuggestion}
105
- />
106
- </TestWrapper>,
107
- );
108
-
109
- const suggestion = screen.queryByText("Tell me more");
110
- if (suggestion) {
111
- fireEvent.click(suggestion);
112
- expect(onSelectSuggestion).toHaveBeenCalled();
113
- }
114
- });
115
- });
116
- });
117
-
118
- // ============================================================================
119
- // LEVEL 2: CopilotChatInput Drill-Down
120
- // ============================================================================
121
- describe("Level 2: CopilotChatInput Drill-Down", () => {
122
- describe("input -> sendButton onClick", () => {
123
- it("should handle onClick on sendButton via input props drill-down", () => {
124
- const onClick = vi.fn();
125
- const { container } = render(
126
- <TestWrapper>
127
- <CopilotChatView
128
- messages={createMessages()}
129
- input={{
130
- sendButton: { onClick },
131
- }}
132
- />
133
- </TestWrapper>,
134
- );
135
-
136
- // Find send button by aria-label or common patterns
137
- const sendBtn =
138
- container.querySelector('button[aria-label*="Send"]') ||
139
- container.querySelector('button[type="submit"]');
140
- if (sendBtn) {
141
- fireEvent.click(sendBtn);
142
- expect(onClick).toHaveBeenCalled();
143
- }
144
- });
145
- });
146
-
147
- describe("input -> startTranscribeButton onClick", () => {
148
- it("should handle onClick on startTranscribeButton via input props drill-down", () => {
149
- const onClick = vi.fn();
150
- const onStartTranscribe = vi.fn();
151
- const { container } = render(
152
- <TestWrapper>
153
- <CopilotChatView
154
- messages={createMessages()}
155
- onStartTranscribe={onStartTranscribe}
156
- input={{
157
- startTranscribeButton: { onClick },
158
- }}
159
- />
160
- </TestWrapper>,
161
- );
162
-
163
- const transcribeBtn =
164
- container.querySelector('button[aria-label*="transcribe"]') ||
165
- container.querySelector('button[aria-label*="voice"]') ||
166
- container.querySelector('button[aria-label*="microphone"]');
167
- if (transcribeBtn) {
168
- fireEvent.click(transcribeBtn);
169
- expect(onClick).toHaveBeenCalled();
170
- }
171
- });
172
- });
173
-
174
- describe("input -> addMenuButton onClick", () => {
175
- it("should handle onClick on addMenuButton via input props drill-down", () => {
176
- const onClick = vi.fn();
177
- const { container } = render(
178
- <TestWrapper>
179
- <CopilotChatView
180
- messages={createMessages()}
181
- input={{
182
- addMenuButton: { onClick },
183
- }}
184
- />
185
- </TestWrapper>,
186
- );
187
-
188
- const addBtn =
189
- container.querySelector('button[aria-label*="add"]') ||
190
- container.querySelector('button[aria-label*="plus"]') ||
191
- container.querySelector('button[aria-label*="menu"]');
192
- if (addBtn) {
193
- fireEvent.click(addBtn);
194
- expect(onClick).toHaveBeenCalled();
195
- }
196
- });
197
- });
198
-
199
- describe("input -> textArea onFocus/onBlur", () => {
200
- it("should handle onFocus on textArea via input props drill-down", () => {
201
- const onFocus = vi.fn();
202
- const { container } = render(
203
- <TestWrapper>
204
- <CopilotChatView
205
- messages={createMessages()}
206
- input={{
207
- textArea: { onFocus },
208
- }}
209
- />
210
- </TestWrapper>,
211
- );
212
-
213
- const textarea = container.querySelector("textarea");
214
- if (textarea) {
215
- fireEvent.focus(textarea);
216
- expect(onFocus).toHaveBeenCalled();
217
- }
218
- });
219
-
220
- it("should handle onBlur on textArea via input props drill-down", () => {
221
- const onBlur = vi.fn();
222
- const { container } = render(
223
- <TestWrapper>
224
- <CopilotChatView
225
- messages={createMessages()}
226
- input={{
227
- textArea: { onBlur },
228
- }}
229
- />
230
- </TestWrapper>,
231
- );
232
-
233
- const textarea = container.querySelector("textarea");
234
- if (textarea) {
235
- fireEvent.focus(textarea);
236
- fireEvent.blur(textarea);
237
- expect(onBlur).toHaveBeenCalled();
238
- }
239
- });
240
- });
241
- });
242
-
243
- // ============================================================================
244
- // LEVEL 2: CopilotChatMessageView Drill-Down
245
- // ============================================================================
246
- describe("Level 2: CopilotChatMessageView Drill-Down", () => {
247
- describe("messageView -> assistantMessage onClick", () => {
248
- it("should handle onClick on assistantMessage container via messageView drill-down", () => {
249
- const onClick = vi.fn();
250
- const { container } = render(
251
- <TestWrapper>
252
- <CopilotChatView
253
- messages={createMessages()}
254
- messageView={{
255
- assistantMessage: { onClick },
256
- }}
257
- />
258
- </TestWrapper>,
259
- );
260
-
261
- // Find assistant message by data-message-id or content
262
- const assistantMsg =
263
- container.querySelector('[data-message-id="2"]') ||
264
- container.querySelector(".prose");
265
- if (assistantMsg) {
266
- fireEvent.click(assistantMsg);
267
- expect(onClick).toHaveBeenCalled();
268
- }
269
- });
270
- });
271
-
272
- describe("messageView -> userMessage onClick", () => {
273
- it("should handle onClick on userMessage container via messageView drill-down", () => {
274
- const onClick = vi.fn();
275
- const { container } = render(
276
- <TestWrapper>
277
- <CopilotChatView
278
- messages={createMessages()}
279
- messageView={{
280
- userMessage: { onClick },
281
- }}
282
- />
283
- </TestWrapper>,
284
- );
285
-
286
- const userMsg = container.querySelector('[data-message-id="1"]');
287
- if (userMsg) {
288
- fireEvent.click(userMsg);
289
- expect(onClick).toHaveBeenCalled();
290
- }
291
- });
292
- });
293
- });
294
-
295
- // ============================================================================
296
- // LEVEL 3: CopilotChatAssistantMessage Toolbar Drill-Down
297
- // ============================================================================
298
- describe("Level 3: CopilotChatAssistantMessage Toolbar Drill-Down", () => {
299
- describe("messageView -> assistantMessage -> copyButton onClick", () => {
300
- it("should handle onClick on copyButton via deep drill-down", () => {
301
- const onClick = vi.fn();
302
- const { container } = render(
303
- <TestWrapper>
304
- <CopilotChatView
305
- messages={createMessages()}
306
- messageView={{
307
- assistantMessage: {
308
- copyButton: { onClick },
309
- },
310
- }}
311
- />
312
- </TestWrapper>,
313
- );
314
-
315
- // Find copy button in assistant message toolbar (message id "2" is an assistant message)
316
- const assistantMsg = container.querySelector('[data-message-id="2"]');
317
- const copyBtn = assistantMsg?.querySelector(
318
- 'button[aria-label*="Copy"]',
319
- );
320
- if (copyBtn) {
321
- fireEvent.click(copyBtn);
322
- expect(onClick).toHaveBeenCalled();
323
- }
324
- });
325
- });
326
-
327
- describe("messageView -> assistantMessage -> thumbsUpButton onClick", () => {
328
- it("should handle onClick on thumbsUpButton via deep drill-down", () => {
329
- const onClick = vi.fn();
330
- const onThumbsUp = vi.fn();
331
- const { container } = render(
332
- <TestWrapper>
333
- <CopilotChatView
334
- messages={createMessages()}
335
- messageView={{
336
- assistantMessage: {
337
- onThumbsUp,
338
- thumbsUpButton: { onClick },
339
- },
340
- }}
341
- />
342
- </TestWrapper>,
343
- );
344
-
345
- const thumbsUpBtn = container.querySelector(
346
- 'button[aria-label*="Thumbs up"]',
347
- );
348
- if (thumbsUpBtn) {
349
- fireEvent.click(thumbsUpBtn);
350
- expect(onClick).toHaveBeenCalled();
351
- }
352
- });
353
- });
354
-
355
- describe("messageView -> assistantMessage -> thumbsDownButton onClick", () => {
356
- it("should handle onClick on thumbsDownButton via deep drill-down", () => {
357
- const onClick = vi.fn();
358
- const onThumbsDown = vi.fn();
359
- const { container } = render(
360
- <TestWrapper>
361
- <CopilotChatView
362
- messages={createMessages()}
363
- messageView={{
364
- assistantMessage: {
365
- onThumbsDown,
366
- thumbsDownButton: { onClick },
367
- },
368
- }}
369
- />
370
- </TestWrapper>,
371
- );
372
-
373
- const thumbsDownBtn = container.querySelector(
374
- 'button[aria-label*="Thumbs down"]',
375
- );
376
- if (thumbsDownBtn) {
377
- fireEvent.click(thumbsDownBtn);
378
- expect(onClick).toHaveBeenCalled();
379
- }
380
- });
381
- });
382
-
383
- describe("messageView -> assistantMessage -> readAloudButton onClick", () => {
384
- it("should handle onClick on readAloudButton via deep drill-down", () => {
385
- const onClick = vi.fn();
386
- const onReadAloud = vi.fn();
387
- const { container } = render(
388
- <TestWrapper>
389
- <CopilotChatView
390
- messages={createMessages()}
391
- messageView={{
392
- assistantMessage: {
393
- onReadAloud,
394
- readAloudButton: { onClick },
395
- },
396
- }}
397
- />
398
- </TestWrapper>,
399
- );
400
-
401
- const readAloudBtn = container.querySelector(
402
- 'button[aria-label*="Read"]',
403
- );
404
- if (readAloudBtn) {
405
- fireEvent.click(readAloudBtn);
406
- expect(onClick).toHaveBeenCalled();
407
- }
408
- });
409
- });
410
-
411
- describe("messageView -> assistantMessage -> regenerateButton onClick", () => {
412
- it("should handle onClick on regenerateButton via deep drill-down", () => {
413
- const onClick = vi.fn();
414
- const onRegenerate = vi.fn();
415
- const { container } = render(
416
- <TestWrapper>
417
- <CopilotChatView
418
- messages={createMessages()}
419
- messageView={{
420
- assistantMessage: {
421
- onRegenerate,
422
- regenerateButton: { onClick },
423
- },
424
- }}
425
- />
426
- </TestWrapper>,
427
- );
428
-
429
- const regenerateBtn = container.querySelector(
430
- 'button[aria-label*="Regenerate"]',
431
- );
432
- if (regenerateBtn) {
433
- fireEvent.click(regenerateBtn);
434
- expect(onClick).toHaveBeenCalled();
435
- }
436
- });
437
- });
438
-
439
- describe("messageView -> assistantMessage -> toolbar onClick", () => {
440
- it("should handle onClick on entire toolbar via deep drill-down", () => {
441
- const onClick = vi.fn();
442
- const { container } = render(
443
- <TestWrapper>
444
- <CopilotChatView
445
- messages={createMessages()}
446
- messageView={{
447
- assistantMessage: {
448
- toolbar: { onClick },
449
- },
450
- }}
451
- />
452
- </TestWrapper>,
453
- );
454
-
455
- // Find toolbar container (usually contains the buttons)
456
- const toolbars = container.querySelectorAll('[class*="toolbar"]');
457
- const firstToolbar = toolbars[0];
458
- if (firstToolbar) {
459
- fireEvent.click(firstToolbar);
460
- expect(onClick).toHaveBeenCalled();
461
- }
462
- });
463
- });
464
- });
465
-
466
- // ============================================================================
467
- // LEVEL 3: CopilotChatUserMessage Toolbar Drill-Down
468
- // ============================================================================
469
- describe("Level 3: CopilotChatUserMessage Toolbar Drill-Down", () => {
470
- describe("messageView -> userMessage -> copyButton onClick", () => {
471
- it("should handle onClick on copyButton via deep drill-down", () => {
472
- const onClick = vi.fn();
473
- const { container } = render(
474
- <TestWrapper>
475
- <CopilotChatView
476
- messages={createMessages()}
477
- messageView={{
478
- userMessage: {
479
- copyButton: { onClick },
480
- },
481
- }}
482
- />
483
- </TestWrapper>,
484
- );
485
-
486
- // User message copy buttons may be in hover state
487
- // Need to trigger hover first or find them directly
488
- const userMsgContainers = container.querySelectorAll(
489
- '[data-message-id="1"], [data-message-id="3"]',
490
- );
491
- const firstUserMsg = userMsgContainers[0];
492
- if (firstUserMsg) {
493
- // Trigger mouseenter to show toolbar
494
- fireEvent.mouseEnter(firstUserMsg);
495
-
496
- const copyBtn = container.querySelector('button[aria-label*="Copy"]');
497
- if (copyBtn) {
498
- fireEvent.click(copyBtn);
499
- expect(onClick).toHaveBeenCalled();
500
- }
501
- }
502
- });
503
- });
504
-
505
- describe("messageView -> userMessage -> editButton onClick", () => {
506
- it("should handle onClick on editButton via deep drill-down", () => {
507
- const onClick = vi.fn();
508
- const { container } = render(
509
- <TestWrapper>
510
- <CopilotChatView
511
- messages={createMessages()}
512
- messageView={{
513
- userMessage: {
514
- onEditMessage: vi.fn(),
515
- editButton: { onClick },
516
- },
517
- }}
518
- />
519
- </TestWrapper>,
520
- );
521
-
522
- const userMsgContainers = container.querySelectorAll(
523
- '[data-message-id="1"], [data-message-id="3"]',
524
- );
525
- const firstUserMsg = userMsgContainers[0];
526
- if (firstUserMsg) {
527
- fireEvent.mouseEnter(firstUserMsg);
528
-
529
- const editBtn = container.querySelector('button[aria-label*="Edit"]');
530
- if (editBtn) {
531
- fireEvent.click(editBtn);
532
- expect(onClick).toHaveBeenCalled();
533
- }
534
- }
535
- });
536
- });
537
- });
538
-
539
- // ============================================================================
540
- // LEVEL 2: SuggestionView Drill-Down
541
- // ============================================================================
542
- describe("Level 2: SuggestionView Drill-Down", () => {
543
- describe("suggestionView -> container onClick", () => {
544
- it("should handle onClick on suggestion container via drill-down", () => {
545
- const onClick = vi.fn();
546
- const { container } = render(
547
- <TestWrapper>
548
- <CopilotChatView
549
- messages={createMessages()}
550
- suggestions={createSuggestions()}
551
- suggestionView={{
552
- // Note: container has pointer-events-none by default, need to override
553
- container: {
554
- onClick,
555
- className: "pointer-events-auto",
556
- "data-testid": "suggestion-container",
557
- } as any,
558
- }}
559
- />
560
- </TestWrapper>,
561
- );
562
-
563
- // Find suggestion container
564
- const suggestionContainer = container.querySelector(
565
- '[data-testid="suggestion-container"]',
566
- );
567
- if (suggestionContainer) {
568
- fireEvent.click(suggestionContainer);
569
- expect(onClick).toHaveBeenCalled();
570
- }
571
- });
572
- });
573
-
574
- describe("suggestionView -> suggestion onClick", () => {
575
- it("should handle onClick on individual suggestion pills via drill-down", () => {
576
- const onClick = vi.fn();
577
- render(
578
- <TestWrapper>
579
- <CopilotChatView
580
- messages={createMessages()}
581
- suggestions={createSuggestions()}
582
- suggestionView={{
583
- suggestion: { onClick },
584
- }}
585
- />
586
- </TestWrapper>,
587
- );
588
-
589
- const suggestionPill = screen.queryByText("Tell me more");
590
- if (suggestionPill) {
591
- fireEvent.click(suggestionPill);
592
- expect(onClick).toHaveBeenCalled();
593
- }
594
- });
595
- });
596
- });
597
-
598
- // ============================================================================
599
- // FUNCTION RENDER SLOT PATTERN TESTS
600
- // ============================================================================
601
- describe("Function Render Slot Pattern", () => {
602
- describe("input slot with render function", () => {
603
- it("should support passing render function to input slot", () => {
604
- const onSubmitMessage = vi.fn();
605
- const CustomInput = (props: any) => (
606
- <CopilotChatInput
607
- {...props}
608
- onSubmitMessage={onSubmitMessage}
609
- sendButton="custom-send-class"
610
- />
611
- );
612
-
613
- render(
614
- <TestWrapper>
615
- <CopilotChatView
616
- messages={createMessages()}
617
- input={CustomInput as any}
618
- />
619
- </TestWrapper>,
620
- );
621
-
622
- // The custom send class should be applied
623
- const sendBtn = document.querySelector(".custom-send-class");
624
- expect(sendBtn).toBeDefined();
625
- });
626
- });
627
-
628
- describe("messageView slot with render function", () => {
629
- it("should support passing render function to messageView slot", () => {
630
- const CustomMessageView = (props: any) => (
631
- <CopilotChatMessageView {...props} className="custom-message-view" />
632
- );
633
-
634
- render(
635
- <TestWrapper>
636
- <CopilotChatView
637
- messages={createMessages()}
638
- messageView={CustomMessageView as any}
639
- />
640
- </TestWrapper>,
641
- );
642
-
643
- const messageView = document.querySelector(".custom-message-view");
644
- expect(messageView).toBeDefined();
645
- });
646
- });
647
- });
648
-
649
- // ============================================================================
650
- // CALLBACK PROPAGATION TESTS
651
- // ============================================================================
652
- describe("Callback Propagation Through Slot Hierarchy", () => {
653
- describe("onSubmitMessage propagation", () => {
654
- it("should propagate onSubmitMessage through input slot", () => {
655
- const onSubmitMessage = vi.fn();
656
- const { container } = render(
657
- <TestWrapper>
658
- <CopilotChatView
659
- messages={createMessages()}
660
- onSubmitMessage={onSubmitMessage}
661
- />
662
- </TestWrapper>,
663
- );
664
-
665
- const textarea = container.querySelector("textarea");
666
- const form = container.querySelector("form");
667
-
668
- if (textarea && form) {
669
- fireEvent.change(textarea, { target: { value: "Test message" } });
670
- fireEvent.submit(form);
671
- expect(onSubmitMessage).toHaveBeenCalledWith("Test message");
672
- }
673
- });
674
- });
675
-
676
- describe("onStop propagation", () => {
677
- it("should propagate onStop through input slot", () => {
678
- const onStop = vi.fn();
679
- const { container } = render(
680
- <TestWrapper>
681
- <CopilotChatView
682
- messages={createMessages()}
683
- isRunning={true}
684
- onStop={onStop}
685
- />
686
- </TestWrapper>,
687
- );
688
-
689
- // Find stop button (usually appears when isRunning=true)
690
- const stopBtn =
691
- container.querySelector('button[aria-label*="Stop"]') ||
692
- container.querySelector('button[aria-label*="stop"]');
693
- if (stopBtn) {
694
- fireEvent.click(stopBtn);
695
- expect(onStop).toHaveBeenCalled();
696
- }
697
- });
698
- });
699
-
700
- describe("onThumbsUp/onThumbsDown propagation", () => {
701
- it("should propagate onThumbsUp through messageView slot", () => {
702
- const onThumbsUp = vi.fn();
703
- const { container } = render(
704
- <TestWrapper>
705
- <CopilotChatView
706
- messages={createMessages()}
707
- messageView={{
708
- assistantMessage: {
709
- onThumbsUp,
710
- },
711
- }}
712
- />
713
- </TestWrapper>,
714
- );
715
-
716
- const thumbsUpBtn = container.querySelector(
717
- 'button[aria-label*="Thumbs up"]',
718
- );
719
- if (thumbsUpBtn) {
720
- fireEvent.click(thumbsUpBtn);
721
- expect(onThumbsUp).toHaveBeenCalled();
722
- }
723
- });
724
-
725
- it("should propagate onThumbsDown through messageView slot", () => {
726
- const onThumbsDown = vi.fn();
727
- const { container } = render(
728
- <TestWrapper>
729
- <CopilotChatView
730
- messages={createMessages()}
731
- messageView={{
732
- assistantMessage: {
733
- onThumbsDown,
734
- },
735
- }}
736
- />
737
- </TestWrapper>,
738
- );
739
-
740
- const thumbsDownBtn = container.querySelector(
741
- 'button[aria-label*="Thumbs down"]',
742
- );
743
- if (thumbsDownBtn) {
744
- fireEvent.click(thumbsDownBtn);
745
- expect(onThumbsDown).toHaveBeenCalled();
746
- }
747
- });
748
- });
749
-
750
- describe("onEditMessage propagation", () => {
751
- it("should propagate onEditMessage through messageView slot", () => {
752
- const onEditMessage = vi.fn();
753
- const { container } = render(
754
- <TestWrapper>
755
- <CopilotChatView
756
- messages={createMessages()}
757
- messageView={{
758
- userMessage: {
759
- onEditMessage,
760
- },
761
- }}
762
- />
763
- </TestWrapper>,
764
- );
765
-
766
- // Find user message and hover to show toolbar
767
- const userMsgContainers = container.querySelectorAll(
768
- '[data-message-id="1"]',
769
- );
770
- const firstUserMsg = userMsgContainers[0];
771
- if (firstUserMsg) {
772
- fireEvent.mouseEnter(firstUserMsg);
773
-
774
- const editBtn = container.querySelector('button[aria-label*="Edit"]');
775
- if (editBtn) {
776
- fireEvent.click(editBtn);
777
- expect(onEditMessage).toHaveBeenCalled();
778
- }
779
- }
780
- });
781
- });
782
- });
783
-
784
- // ============================================================================
785
- // COMBINED CUSTOMIZATION WITH ONCLICK
786
- // ============================================================================
787
- describe("Combined Customization with onClick", () => {
788
- it("should handle onClick alongside tailwind class customization", () => {
789
- const onClick = vi.fn();
790
- const { container } = render(
791
- <TestWrapper>
792
- <CopilotChatView
793
- messages={createMessages()}
794
- messageView={{
795
- assistantMessage: {
796
- copyButton: {
797
- onClick,
798
- className: "custom-copy-class",
799
- },
800
- },
801
- }}
802
- />
803
- </TestWrapper>,
804
- );
805
-
806
- const copyBtn =
807
- container.querySelector(".custom-copy-class") ||
808
- container.querySelector('button[aria-label*="Copy"]');
809
- if (copyBtn) {
810
- fireEvent.click(copyBtn);
811
- expect(onClick).toHaveBeenCalled();
812
- }
813
- });
814
-
815
- it("should allow custom component with onClick handling", () => {
816
- const customOnClick = vi.fn();
817
- const CustomCopyButton: React.FC<
818
- React.ButtonHTMLAttributes<HTMLButtonElement>
819
- > = ({ onClick, ...props }) => (
820
- <button
821
- {...props}
822
- onClick={(e) => {
823
- customOnClick();
824
- onClick?.(e);
825
- }}
826
- data-testid="custom-copy"
827
- >
828
- Copy
829
- </button>
830
- );
831
-
832
- render(
833
- <TestWrapper>
834
- <CopilotChatView
835
- messages={createMessages()}
836
- messageView={{
837
- assistantMessage: {
838
- copyButton: CustomCopyButton as any,
839
- },
840
- }}
841
- />
842
- </TestWrapper>,
843
- );
844
-
845
- // Multiple assistant messages have custom copy buttons
846
- const customCopyButtons = screen.queryAllByTestId("custom-copy");
847
- if (customCopyButtons.length > 0) {
848
- fireEvent.click(customCopyButtons[0]);
849
- expect(customOnClick).toHaveBeenCalled();
850
- }
851
- });
852
- });
853
- });