@copilotkit/react-ui 1.8.6-next.0 → 1.8.7-next.0

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 (149) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/{chunk-Q2YY2NX3.mjs → chunk-24TDU7MY.mjs} +2 -2
  3. package/dist/{chunk-XNQO5AZZ.mjs → chunk-ABHUX6T6.mjs} +2 -2
  4. package/dist/{chunk-QJKMOGWN.mjs → chunk-BDNHZ3GW.mjs} +4 -3
  5. package/dist/chunk-BDNHZ3GW.mjs.map +1 -0
  6. package/dist/{chunk-NMNC4ROZ.mjs → chunk-DSQGQJI4.mjs} +2 -2
  7. package/dist/{chunk-HEIDCT7I.mjs → chunk-HWMFMBJC.mjs} +2 -2
  8. package/dist/chunk-HWMFMBJC.mjs.map +1 -0
  9. package/dist/{chunk-UN2E3HCK.mjs → chunk-IEMQ2SQW.mjs} +6 -4
  10. package/dist/chunk-IEMQ2SQW.mjs.map +1 -0
  11. package/dist/{chunk-ZY25LVYR.mjs → chunk-IJADIQAR.mjs} +20 -2
  12. package/dist/chunk-IJADIQAR.mjs.map +1 -0
  13. package/dist/{chunk-X6EFGEBJ.mjs → chunk-JOL7NS2W.mjs} +2 -2
  14. package/dist/{chunk-PCTCOQK2.mjs → chunk-KENCH7RN.mjs} +2 -2
  15. package/dist/{chunk-ZLRUNNS7.mjs → chunk-O34Z4XM2.mjs} +170 -30
  16. package/dist/chunk-O34Z4XM2.mjs.map +1 -0
  17. package/dist/{chunk-5M7ODWKH.mjs → chunk-OZXUB3V7.mjs} +3 -3
  18. package/dist/chunk-PLHTVHUW.mjs +82 -0
  19. package/dist/chunk-PLHTVHUW.mjs.map +1 -0
  20. package/dist/{chunk-62QMTKMJ.mjs → chunk-POWCBXRY.mjs} +3 -3
  21. package/dist/chunk-PXEVB7IK.mjs +1 -0
  22. package/dist/{chunk-HIORSNVD.mjs → chunk-Q2NFQTCQ.mjs} +2 -2
  23. package/dist/chunk-SLTG4L62.mjs +78 -0
  24. package/dist/chunk-SLTG4L62.mjs.map +1 -0
  25. package/dist/{chunk-SMJ3QQCE.mjs → chunk-T7N77F5Y.mjs} +2 -2
  26. package/dist/{chunk-YOEL33HG.mjs → chunk-UFN2VWSR.mjs} +2 -2
  27. package/dist/{chunk-2OTVZXDX.mjs → chunk-UH2UFL5W.mjs} +3 -3
  28. package/dist/{chunk-D5XIJNXQ.mjs → chunk-VGPQYMKJ.mjs} +8 -8
  29. package/dist/{chunk-WNC6OCIB.mjs → chunk-XFCMZH2H.mjs} +2 -2
  30. package/dist/{chunk-ORSMX3SE.mjs → chunk-XWG3L6QC.mjs} +15 -1
  31. package/dist/{chunk-ORSMX3SE.mjs.map → chunk-XWG3L6QC.mjs.map} +1 -1
  32. package/dist/{chunk-TOQ7P4DO.mjs → chunk-XZNY26GH.mjs} +2 -2
  33. package/dist/{chunk-GOAED4H6.mjs → chunk-Y7UO3RPW.mjs} +10 -10
  34. package/dist/components/chat/Button.js.map +1 -1
  35. package/dist/components/chat/Button.mjs +3 -3
  36. package/dist/components/chat/Chat.d.ts +23 -3
  37. package/dist/components/chat/Chat.js +341 -30
  38. package/dist/components/chat/Chat.js.map +1 -1
  39. package/dist/components/chat/Chat.mjs +16 -14
  40. package/dist/components/chat/ChatContext.d.ts +5 -0
  41. package/dist/components/chat/ChatContext.js +15 -1
  42. package/dist/components/chat/ChatContext.js.map +1 -1
  43. package/dist/components/chat/ChatContext.mjs +2 -2
  44. package/dist/components/chat/CodeBlock.js.map +1 -1
  45. package/dist/components/chat/CodeBlock.mjs +2 -2
  46. package/dist/components/chat/Header.js.map +1 -1
  47. package/dist/components/chat/Header.mjs +5 -5
  48. package/dist/components/chat/Icons.d.ts +2 -1
  49. package/dist/components/chat/Icons.js +17 -2
  50. package/dist/components/chat/Icons.js.map +1 -1
  51. package/dist/components/chat/Icons.mjs +5 -3
  52. package/dist/components/chat/ImageUploadQueue.d.ts +13 -0
  53. package/dist/components/chat/ImageUploadQueue.js +106 -0
  54. package/dist/components/chat/ImageUploadQueue.js.map +1 -0
  55. package/dist/components/chat/ImageUploadQueue.mjs +8 -0
  56. package/dist/components/chat/ImageUploadQueue.mjs.map +1 -0
  57. package/dist/components/chat/Input.d.ts +1 -1
  58. package/dist/components/chat/Input.js +2 -1
  59. package/dist/components/chat/Input.js.map +1 -1
  60. package/dist/components/chat/Input.mjs +3 -3
  61. package/dist/components/chat/Markdown.js.map +1 -1
  62. package/dist/components/chat/Markdown.mjs +3 -3
  63. package/dist/components/chat/Messages.d.ts +1 -1
  64. package/dist/components/chat/Messages.js +18 -0
  65. package/dist/components/chat/Messages.js.map +1 -1
  66. package/dist/components/chat/Messages.mjs +3 -3
  67. package/dist/components/chat/Modal.js +348 -37
  68. package/dist/components/chat/Modal.js.map +1 -1
  69. package/dist/components/chat/Modal.mjs +22 -20
  70. package/dist/components/chat/Popup.js +350 -39
  71. package/dist/components/chat/Popup.js.map +1 -1
  72. package/dist/components/chat/Popup.mjs +23 -21
  73. package/dist/components/chat/Sidebar.js +350 -39
  74. package/dist/components/chat/Sidebar.js.map +1 -1
  75. package/dist/components/chat/Sidebar.mjs +23 -21
  76. package/dist/components/chat/Suggestion.js.map +1 -1
  77. package/dist/components/chat/Suggestion.mjs +2 -2
  78. package/dist/components/chat/Window.js.map +1 -1
  79. package/dist/components/chat/Window.mjs +3 -3
  80. package/dist/components/chat/index.d.ts +1 -0
  81. package/dist/components/chat/index.js +354 -41
  82. package/dist/components/chat/index.js.map +1 -1
  83. package/dist/components/chat/index.mjs +30 -25
  84. package/dist/components/chat/messages/AssistantMessage.js.map +1 -1
  85. package/dist/components/chat/messages/AssistantMessage.mjs +5 -5
  86. package/dist/components/chat/messages/RenderActionExecutionMessage.js.map +1 -1
  87. package/dist/components/chat/messages/RenderActionExecutionMessage.mjs +6 -6
  88. package/dist/components/chat/messages/RenderAgentStateMessage.js.map +1 -1
  89. package/dist/components/chat/messages/RenderAgentStateMessage.mjs +6 -6
  90. package/dist/components/chat/messages/RenderImageMessage.d.ts +7 -0
  91. package/dist/components/chat/messages/RenderImageMessage.js +774 -0
  92. package/dist/components/chat/messages/RenderImageMessage.js.map +1 -0
  93. package/dist/components/chat/messages/RenderImageMessage.mjs +15 -0
  94. package/dist/components/chat/messages/RenderImageMessage.mjs.map +1 -0
  95. package/dist/components/chat/messages/RenderResultMessage.js.map +1 -1
  96. package/dist/components/chat/messages/RenderResultMessage.mjs +6 -6
  97. package/dist/components/chat/messages/RenderTextMessage.js +1 -1
  98. package/dist/components/chat/messages/RenderTextMessage.js.map +1 -1
  99. package/dist/components/chat/messages/RenderTextMessage.mjs +7 -7
  100. package/dist/components/chat/messages/UserMessage.js +1 -1
  101. package/dist/components/chat/messages/UserMessage.js.map +1 -1
  102. package/dist/components/chat/messages/UserMessage.mjs +1 -1
  103. package/dist/components/chat/props.d.ts +3 -0
  104. package/dist/components/chat/props.js.map +1 -1
  105. package/dist/components/dev-console/console.js.map +1 -1
  106. package/dist/components/dev-console/console.mjs +3 -3
  107. package/dist/components/dev-console/index.js.map +1 -1
  108. package/dist/components/dev-console/index.mjs +3 -3
  109. package/dist/components/index.d.ts +1 -0
  110. package/dist/components/index.js +354 -41
  111. package/dist/components/index.js.map +1 -1
  112. package/dist/components/index.mjs +30 -25
  113. package/dist/index.d.ts +1 -0
  114. package/dist/index.js +354 -41
  115. package/dist/index.js.map +1 -1
  116. package/dist/index.mjs +31 -26
  117. package/package.json +4 -4
  118. package/src/components/chat/Chat.tsx +198 -18
  119. package/src/components/chat/ChatContext.tsx +7 -0
  120. package/src/components/chat/Icons.tsx +14 -0
  121. package/src/components/chat/ImageUploadQueue.tsx +77 -0
  122. package/src/components/chat/Input.tsx +8 -1
  123. package/src/components/chat/Messages.tsx +17 -0
  124. package/src/components/chat/index.tsx +1 -0
  125. package/src/components/chat/messages/RenderImageMessage.tsx +64 -0
  126. package/src/components/chat/messages/UserMessage.tsx +5 -1
  127. package/src/components/chat/props.ts +3 -0
  128. package/dist/chunk-HEIDCT7I.mjs.map +0 -1
  129. package/dist/chunk-QJKMOGWN.mjs.map +0 -1
  130. package/dist/chunk-SQMEPWVT.mjs +0 -1
  131. package/dist/chunk-UN2E3HCK.mjs.map +0 -1
  132. package/dist/chunk-ZLRUNNS7.mjs.map +0 -1
  133. package/dist/chunk-ZY25LVYR.mjs.map +0 -1
  134. /package/dist/{chunk-Q2YY2NX3.mjs.map → chunk-24TDU7MY.mjs.map} +0 -0
  135. /package/dist/{chunk-XNQO5AZZ.mjs.map → chunk-ABHUX6T6.mjs.map} +0 -0
  136. /package/dist/{chunk-NMNC4ROZ.mjs.map → chunk-DSQGQJI4.mjs.map} +0 -0
  137. /package/dist/{chunk-X6EFGEBJ.mjs.map → chunk-JOL7NS2W.mjs.map} +0 -0
  138. /package/dist/{chunk-PCTCOQK2.mjs.map → chunk-KENCH7RN.mjs.map} +0 -0
  139. /package/dist/{chunk-5M7ODWKH.mjs.map → chunk-OZXUB3V7.mjs.map} +0 -0
  140. /package/dist/{chunk-62QMTKMJ.mjs.map → chunk-POWCBXRY.mjs.map} +0 -0
  141. /package/dist/{chunk-SQMEPWVT.mjs.map → chunk-PXEVB7IK.mjs.map} +0 -0
  142. /package/dist/{chunk-HIORSNVD.mjs.map → chunk-Q2NFQTCQ.mjs.map} +0 -0
  143. /package/dist/{chunk-SMJ3QQCE.mjs.map → chunk-T7N77F5Y.mjs.map} +0 -0
  144. /package/dist/{chunk-YOEL33HG.mjs.map → chunk-UFN2VWSR.mjs.map} +0 -0
  145. /package/dist/{chunk-2OTVZXDX.mjs.map → chunk-UH2UFL5W.mjs.map} +0 -0
  146. /package/dist/{chunk-D5XIJNXQ.mjs.map → chunk-VGPQYMKJ.mjs.map} +0 -0
  147. /package/dist/{chunk-WNC6OCIB.mjs.map → chunk-XFCMZH2H.mjs.map} +0 -0
  148. /package/dist/{chunk-TOQ7P4DO.mjs.map → chunk-XZNY26GH.mjs.map} +0 -0
  149. /package/dist/{chunk-GOAED4H6.mjs.map → chunk-Y7UO3RPW.mjs.map} +0 -0
@@ -1,31 +1,33 @@
1
1
  import {
2
2
  CopilotModal
3
- } from "../../chunk-GOAED4H6.mjs";
4
- import "../../chunk-HIORSNVD.mjs";
5
- import "../../chunk-2OTVZXDX.mjs";
3
+ } from "../../chunk-Y7UO3RPW.mjs";
4
+ import "../../chunk-Q2NFQTCQ.mjs";
5
+ import "../../chunk-UH2UFL5W.mjs";
6
6
  import "../../chunk-V7W6IM2V.mjs";
7
- import "../../chunk-D5XIJNXQ.mjs";
7
+ import "../../chunk-VGPQYMKJ.mjs";
8
+ import "../../chunk-Q5V6S67N.mjs";
8
9
  import "../../chunk-6TCUJ3B7.mjs";
9
10
  import "../../chunk-KXE2JCUH.mjs";
10
11
  import "../../chunk-NRA3CFEE.mjs";
11
12
  import "../../chunk-BH6PCAAL.mjs";
12
- import "../../chunk-Q5V6S67N.mjs";
13
- import "../../chunk-YOEL33HG.mjs";
14
- import "../../chunk-ZLRUNNS7.mjs";
15
- import "../../chunk-Q2YY2NX3.mjs";
16
- import "../../chunk-WNC6OCIB.mjs";
17
- import "../../chunk-62QMTKMJ.mjs";
18
- import "../../chunk-HEIDCT7I.mjs";
19
- import "../../chunk-NMNC4ROZ.mjs";
20
- import "../../chunk-5M7ODWKH.mjs";
21
- import "../../chunk-TOQ7P4DO.mjs";
22
- import "../../chunk-QJKMOGWN.mjs";
13
+ import "../../chunk-UFN2VWSR.mjs";
14
+ import "../../chunk-O34Z4XM2.mjs";
15
+ import "../../chunk-DSQGQJI4.mjs";
16
+ import "../../chunk-24TDU7MY.mjs";
17
+ import "../../chunk-SLTG4L62.mjs";
18
+ import "../../chunk-XFCMZH2H.mjs";
19
+ import "../../chunk-POWCBXRY.mjs";
20
+ import "../../chunk-HWMFMBJC.mjs";
21
+ import "../../chunk-OZXUB3V7.mjs";
22
+ import "../../chunk-XZNY26GH.mjs";
23
+ import "../../chunk-PLHTVHUW.mjs";
24
+ import "../../chunk-BDNHZ3GW.mjs";
23
25
  import "../../chunk-YQFVRDNC.mjs";
24
- import "../../chunk-XNQO5AZZ.mjs";
25
- import "../../chunk-PCTCOQK2.mjs";
26
- import "../../chunk-ZY25LVYR.mjs";
27
- import "../../chunk-UN2E3HCK.mjs";
28
- import "../../chunk-ORSMX3SE.mjs";
26
+ import "../../chunk-ABHUX6T6.mjs";
27
+ import "../../chunk-KENCH7RN.mjs";
28
+ import "../../chunk-IJADIQAR.mjs";
29
+ import "../../chunk-IEMQ2SQW.mjs";
30
+ import "../../chunk-XWG3L6QC.mjs";
29
31
  import "../../chunk-54JAUBUJ.mjs";
30
32
  import "../../chunk-JGMFJZMG.mjs";
31
33
  import "../../chunk-S5MBUNGN.mjs";
@@ -300,6 +300,19 @@ var DownloadIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
300
300
  )
301
301
  }
302
302
  );
303
+ var UploadIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
304
+ "svg",
305
+ {
306
+ xmlns: "http://www.w3.org/2000/svg",
307
+ fill: "none",
308
+ viewBox: "0 0 24 24",
309
+ strokeWidth: "1.5",
310
+ stroke: "currentColor",
311
+ width: "24",
312
+ height: "24",
313
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 4.5v15m7.5-7.5h-15" })
314
+ }
315
+ );
303
316
  var CheckIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
304
317
  "svg",
305
318
  {
@@ -365,7 +378,8 @@ var ChatContextProvider = ({
365
378
  pushToTalkIcon: MicrophoneIcon,
366
379
  copyIcon: CopyIcon,
367
380
  thumbsUpIcon: ThumbsUpIcon,
368
- thumbsDownIcon: ThumbsDownIcon
381
+ thumbsDownIcon: ThumbsDownIcon,
382
+ uploadIcon: UploadIcon
369
383
  }), icons),
370
384
  [icons]
371
385
  );
@@ -1070,6 +1084,7 @@ var Messages = ({
1070
1084
  RenderActionExecutionMessage: RenderActionExecutionMessage2,
1071
1085
  RenderAgentStateMessage: RenderAgentStateMessage2,
1072
1086
  RenderResultMessage: RenderResultMessage2,
1087
+ RenderImageMessage: RenderImageMessage2,
1073
1088
  AssistantMessage: AssistantMessage2,
1074
1089
  UserMessage: UserMessage2,
1075
1090
  onRegenerate,
@@ -1158,6 +1173,23 @@ var Messages = ({
1158
1173
  },
1159
1174
  index
1160
1175
  );
1176
+ } else if (message.isImageMessage && message.isImageMessage()) {
1177
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
1178
+ RenderImageMessage2,
1179
+ {
1180
+ message,
1181
+ inProgress,
1182
+ index,
1183
+ isCurrentMessage,
1184
+ AssistantMessage: AssistantMessage2,
1185
+ UserMessage: UserMessage2,
1186
+ onRegenerate,
1187
+ onCopy,
1188
+ onThumbsUp,
1189
+ onThumbsDown
1190
+ },
1191
+ index
1192
+ );
1161
1193
  }
1162
1194
  }),
1163
1195
  interrupt
@@ -1400,7 +1432,7 @@ var usePushToTalk = ({
1400
1432
  // src/components/chat/Input.tsx
1401
1433
  var import_react_core6 = require("@copilotkit/react-core");
1402
1434
  var import_jsx_runtime12 = require("react/jsx-runtime");
1403
- var Input = ({ inProgress, onSend, isVisible = false, onStop }) => {
1435
+ var Input = ({ inProgress, onSend, isVisible = false, onStop, onUpload }) => {
1404
1436
  const context = useChatContext();
1405
1437
  const copilotContext = (0, import_react_core6.useCopilotContext)();
1406
1438
  const pushToTalkConfigured = copilotContext.copilotApiConfig.textToSpeechUrl !== void 0 && copilotContext.copilotApiConfig.transcribeAudioUrl !== void 0;
@@ -1464,6 +1496,7 @@ var Input = ({ inProgress, onSend, isVisible = false, onStop }) => {
1464
1496
  }
1465
1497
  ),
1466
1498
  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "copilotKitInputControls", children: [
1499
+ onUpload && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { onClick: onUpload, className: "copilotKitInputControlButton", children: context.icons.uploadIcon }),
1467
1500
  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { flexGrow: 1 } }),
1468
1501
  showPushToTalk && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
1469
1502
  "button",
@@ -1491,7 +1524,7 @@ var Input = ({ inProgress, onSend, isVisible = false, onStop }) => {
1491
1524
  // src/components/chat/messages/UserMessage.tsx
1492
1525
  var import_jsx_runtime13 = require("react/jsx-runtime");
1493
1526
  var UserMessage = (props) => {
1494
- return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "copilotKitMessage copilotKitUserMessage", children: props.message });
1527
+ return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "copilotKitMessage copilotKitUserMessage", children: props.subComponent || props.message });
1495
1528
  };
1496
1529
 
1497
1530
  // src/components/chat/Markdown.tsx
@@ -2345,13 +2378,77 @@ function RenderAgentStateMessage(_a) {
2345
2378
  }
2346
2379
  }
2347
2380
 
2381
+ // src/components/chat/messages/RenderImageMessage.tsx
2382
+ var import_jsx_runtime21 = require("react/jsx-runtime");
2383
+ function RenderImageMessage(_a) {
2384
+ var _b = _a, {
2385
+ UserMessage: UserMessage2 = UserMessage,
2386
+ AssistantMessage: AssistantMessage2 = AssistantMessage
2387
+ } = _b, props = __objRest(_b, [
2388
+ "UserMessage",
2389
+ "AssistantMessage"
2390
+ ]);
2391
+ const {
2392
+ message,
2393
+ inProgress,
2394
+ index,
2395
+ isCurrentMessage,
2396
+ onRegenerate,
2397
+ onCopy,
2398
+ onThumbsUp,
2399
+ onThumbsDown
2400
+ } = props;
2401
+ if (message.isImageMessage()) {
2402
+ const imageData = `data:${message.format};base64,${message.bytes}`;
2403
+ const imageComponent = /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "copilotKitImage", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
2404
+ "img",
2405
+ {
2406
+ src: imageData,
2407
+ alt: "User uploaded image",
2408
+ style: { maxWidth: "100%", maxHeight: "300px", borderRadius: "8px" }
2409
+ }
2410
+ ) });
2411
+ if (message.role === "user") {
2412
+ return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
2413
+ UserMessage2,
2414
+ {
2415
+ "data-message-role": "user",
2416
+ message: "",
2417
+ rawData: message,
2418
+ subComponent: imageComponent
2419
+ },
2420
+ index
2421
+ );
2422
+ } else if (message.role === "assistant") {
2423
+ return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
2424
+ AssistantMessage2,
2425
+ {
2426
+ "data-message-role": "assistant",
2427
+ message: "",
2428
+ rawData: message,
2429
+ subComponent: imageComponent,
2430
+ isLoading: inProgress && isCurrentMessage && !message.bytes,
2431
+ isGenerating: inProgress && isCurrentMessage && !!message.bytes,
2432
+ isCurrentMessage,
2433
+ onRegenerate: () => onRegenerate == null ? void 0 : onRegenerate(message.id),
2434
+ onCopy,
2435
+ onThumbsUp,
2436
+ onThumbsDown
2437
+ },
2438
+ index
2439
+ );
2440
+ }
2441
+ }
2442
+ return null;
2443
+ }
2444
+
2348
2445
  // src/components/chat/Suggestion.tsx
2349
2446
  var import_react_core9 = require("@copilotkit/react-core");
2350
2447
  var import_shared2 = require("@copilotkit/shared");
2351
2448
  var import_runtime_client_gql3 = require("@copilotkit/runtime-client-gql");
2352
- var import_jsx_runtime21 = require("react/jsx-runtime");
2449
+ var import_jsx_runtime22 = require("react/jsx-runtime");
2353
2450
  function Suggestion({ title, message, onClick, partial, className }) {
2354
- return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
2451
+ return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
2355
2452
  "button",
2356
2453
  {
2357
2454
  disabled: partial,
@@ -2361,7 +2458,7 @@ function Suggestion({ title, message, onClick, partial, className }) {
2361
2458
  },
2362
2459
  className: className || (partial ? "suggestion loading" : "suggestion"),
2363
2460
  "data-test-id": "suggestion",
2364
- children: partial ? SmallSpinnerIcon : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: title })
2461
+ children: partial ? SmallSpinnerIcon : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: title })
2365
2462
  }
2366
2463
  );
2367
2464
  }
@@ -2441,7 +2538,87 @@ var import_react_core10 = require("@copilotkit/react-core");
2441
2538
  var import_runtime_client_gql4 = require("@copilotkit/runtime-client-gql");
2442
2539
  var import_shared3 = require("@copilotkit/shared");
2443
2540
  var import_react_core11 = require("@copilotkit/react-core");
2444
- var import_jsx_runtime22 = require("react/jsx-runtime");
2541
+
2542
+ // src/components/chat/ImageUploadQueue.tsx
2543
+ var import_jsx_runtime23 = require("react/jsx-runtime");
2544
+ var ImageUploadQueue = ({
2545
+ images,
2546
+ onRemoveImage,
2547
+ className = ""
2548
+ }) => {
2549
+ if (images.length === 0)
2550
+ return null;
2551
+ return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2552
+ "div",
2553
+ {
2554
+ className: `copilotKitImageUploadQueue ${className}`,
2555
+ style: {
2556
+ display: "flex",
2557
+ flexWrap: "wrap",
2558
+ gap: "8px",
2559
+ margin: "8px",
2560
+ padding: "8px"
2561
+ },
2562
+ children: images.map((image, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
2563
+ "div",
2564
+ {
2565
+ className: "copilotKitImageUploadQueueItem",
2566
+ style: {
2567
+ position: "relative",
2568
+ display: "inline-block",
2569
+ width: "60px",
2570
+ height: "60px",
2571
+ borderRadius: "4px",
2572
+ overflow: "hidden"
2573
+ },
2574
+ children: [
2575
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2576
+ "img",
2577
+ {
2578
+ src: `data:${image.contentType};base64,${image.bytes}`,
2579
+ alt: `Selected image ${index + 1}`,
2580
+ style: {
2581
+ width: "100%",
2582
+ height: "100%",
2583
+ objectFit: "cover"
2584
+ }
2585
+ }
2586
+ ),
2587
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2588
+ "button",
2589
+ {
2590
+ onClick: () => onRemoveImage(index),
2591
+ className: "copilotKitImageUploadQueueRemoveButton",
2592
+ style: {
2593
+ position: "absolute",
2594
+ top: "2px",
2595
+ right: "2px",
2596
+ background: "rgba(0,0,0,0.6)",
2597
+ color: "white",
2598
+ border: "none",
2599
+ borderRadius: "50%",
2600
+ width: "18px",
2601
+ height: "18px",
2602
+ display: "flex",
2603
+ alignItems: "center",
2604
+ justifyContent: "center",
2605
+ cursor: "pointer",
2606
+ fontSize: "10px",
2607
+ padding: 0
2608
+ },
2609
+ children: "\u2715"
2610
+ }
2611
+ )
2612
+ ]
2613
+ },
2614
+ index
2615
+ ))
2616
+ }
2617
+ );
2618
+ };
2619
+
2620
+ // src/components/chat/Chat.tsx
2621
+ var import_jsx_runtime24 = require("react/jsx-runtime");
2445
2622
  function CopilotChat({
2446
2623
  instructions,
2447
2624
  onSubmitMessage,
@@ -2458,14 +2635,64 @@ function CopilotChat({
2458
2635
  RenderActionExecutionMessage: RenderActionExecutionMessage2 = RenderActionExecutionMessage,
2459
2636
  RenderAgentStateMessage: RenderAgentStateMessage2 = RenderAgentStateMessage,
2460
2637
  RenderResultMessage: RenderResultMessage2 = RenderResultMessage,
2638
+ RenderImageMessage: RenderImageMessage2 = RenderImageMessage,
2461
2639
  Input: Input2 = Input,
2462
2640
  className,
2463
2641
  icons,
2464
2642
  labels,
2465
2643
  AssistantMessage: AssistantMessage2 = AssistantMessage,
2466
- UserMessage: UserMessage2 = UserMessage
2644
+ UserMessage: UserMessage2 = UserMessage,
2645
+ imageUploadsEnabled,
2646
+ inputFileAccept = "image/*"
2467
2647
  }) {
2468
2648
  const { additionalInstructions, setChatInstructions } = (0, import_react_core10.useCopilotContext)();
2649
+ const [selectedImages, setSelectedImages] = (0, import_react13.useState)([]);
2650
+ const fileInputRef = (0, import_react13.useRef)(null);
2651
+ (0, import_react13.useEffect)(() => {
2652
+ if (!imageUploadsEnabled)
2653
+ return;
2654
+ const handlePaste = (e) => __async(this, null, function* () {
2655
+ var _a, _b;
2656
+ const target = e.target;
2657
+ if (!((_a = target.parentElement) == null ? void 0 : _a.classList.contains("copilotKitInput")))
2658
+ return;
2659
+ const items = Array.from(((_b = e.clipboardData) == null ? void 0 : _b.items) || []);
2660
+ const imageItems = items.filter((item) => item.type.startsWith("image/"));
2661
+ if (imageItems.length === 0)
2662
+ return;
2663
+ e.preventDefault();
2664
+ const imagePromises = imageItems.map((item) => {
2665
+ const file = item.getAsFile();
2666
+ if (!file)
2667
+ return Promise.resolve(null);
2668
+ return new Promise((resolve, reject) => {
2669
+ const reader = new FileReader();
2670
+ reader.onload = (e2) => {
2671
+ var _a2, _b2;
2672
+ const base64String = (_b2 = (_a2 = e2.target) == null ? void 0 : _a2.result) == null ? void 0 : _b2.split(",")[1];
2673
+ if (base64String) {
2674
+ resolve({
2675
+ contentType: file.type,
2676
+ bytes: base64String
2677
+ });
2678
+ } else {
2679
+ resolve(null);
2680
+ }
2681
+ };
2682
+ reader.onerror = reject;
2683
+ reader.readAsDataURL(file);
2684
+ });
2685
+ });
2686
+ try {
2687
+ const loadedImages = (yield Promise.all(imagePromises)).filter((img) => img !== null);
2688
+ setSelectedImages((prev) => [...prev, ...loadedImages]);
2689
+ } catch (error) {
2690
+ console.error("Error processing pasted images:", error);
2691
+ }
2692
+ });
2693
+ document.addEventListener("paste", handlePaste);
2694
+ return () => document.removeEventListener("paste", handlePaste);
2695
+ }, [imageUploadsEnabled]);
2469
2696
  (0, import_react13.useEffect)(() => {
2470
2697
  if (!(additionalInstructions == null ? void 0 : additionalInstructions.length)) {
2471
2698
  setChatInstructions(instructions || "");
@@ -2493,6 +2720,14 @@ function CopilotChat({
2493
2720
  onStopGeneration,
2494
2721
  onReloadMessages
2495
2722
  );
2723
+ const handleSendMessage = (text) => {
2724
+ const images = selectedImages;
2725
+ setSelectedImages([]);
2726
+ if (fileInputRef.current) {
2727
+ fileInputRef.current.value = "";
2728
+ }
2729
+ return sendMessage(text, images);
2730
+ };
2496
2731
  const chatContext = import_react13.default.useContext(ChatContext);
2497
2732
  const isVisible = chatContext ? chatContext.open : true;
2498
2733
  const handleRegenerate = (messageId) => {
@@ -2506,8 +2741,42 @@ function CopilotChat({
2506
2741
  onCopy(message);
2507
2742
  }
2508
2743
  };
2509
- return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(WrappedCopilotChat, { icons, labels, className, children: [
2510
- /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
2744
+ const handleImageUpload = (event) => __async(this, null, function* () {
2745
+ if (!event.target.files || event.target.files.length === 0) {
2746
+ return;
2747
+ }
2748
+ const files = Array.from(event.target.files).filter((file) => file.type.startsWith("image/"));
2749
+ if (files.length === 0)
2750
+ return;
2751
+ const fileReadPromises = files.map((file) => {
2752
+ return new Promise((resolve, reject) => {
2753
+ const reader = new FileReader();
2754
+ reader.onload = (e) => {
2755
+ var _a, _b;
2756
+ const base64String = ((_b = (_a = e.target) == null ? void 0 : _a.result) == null ? void 0 : _b.split(",")[1]) || "";
2757
+ if (base64String) {
2758
+ resolve({
2759
+ contentType: file.type,
2760
+ bytes: base64String
2761
+ });
2762
+ }
2763
+ };
2764
+ reader.onerror = reject;
2765
+ reader.readAsDataURL(file);
2766
+ });
2767
+ });
2768
+ try {
2769
+ const loadedImages = yield Promise.all(fileReadPromises);
2770
+ setSelectedImages((prev) => [...prev, ...loadedImages]);
2771
+ } catch (error) {
2772
+ console.error("Error reading files:", error);
2773
+ }
2774
+ });
2775
+ const removeSelectedImage = (index) => {
2776
+ setSelectedImages((prev) => prev.filter((_, i) => i !== index));
2777
+ };
2778
+ return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(WrappedCopilotChat, { icons, labels, className, children: [
2779
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
2511
2780
  Messages2,
2512
2781
  {
2513
2782
  AssistantMessage: AssistantMessage2,
@@ -2516,32 +2785,51 @@ function CopilotChat({
2516
2785
  RenderActionExecutionMessage: RenderActionExecutionMessage2,
2517
2786
  RenderAgentStateMessage: RenderAgentStateMessage2,
2518
2787
  RenderResultMessage: RenderResultMessage2,
2788
+ RenderImageMessage: RenderImageMessage2,
2519
2789
  messages: visibleMessages,
2520
2790
  inProgress: isLoading,
2521
2791
  onRegenerate: handleRegenerate,
2522
2792
  onCopy: handleCopy,
2523
2793
  onThumbsUp,
2524
2794
  onThumbsDown,
2525
- children: currentSuggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "suggestions", children: currentSuggestions.map((suggestion, index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
2795
+ children: currentSuggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "suggestions", children: currentSuggestions.map((suggestion, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
2526
2796
  Suggestion,
2527
2797
  {
2528
2798
  title: suggestion.title,
2529
2799
  message: suggestion.message,
2530
2800
  partial: suggestion.partial,
2531
2801
  className: suggestion.className,
2532
- onClick: (message) => sendMessage(message)
2802
+ onClick: (message) => handleSendMessage(message)
2533
2803
  },
2534
2804
  index
2535
2805
  )) })
2536
2806
  }
2537
2807
  ),
2538
- /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
2808
+ imageUploadsEnabled && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
2809
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ImageUploadQueue, { images: selectedImages, onRemoveImage: removeSelectedImage }),
2810
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
2811
+ "input",
2812
+ {
2813
+ type: "file",
2814
+ multiple: true,
2815
+ ref: fileInputRef,
2816
+ onChange: handleImageUpload,
2817
+ accept: inputFileAccept,
2818
+ style: { display: "none" }
2819
+ }
2820
+ )
2821
+ ] }),
2822
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
2539
2823
  Input2,
2540
2824
  {
2541
2825
  inProgress: isLoading,
2542
- onSend: sendMessage,
2826
+ onSend: handleSendMessage,
2543
2827
  isVisible,
2544
- onStop: stopGeneration
2828
+ onStop: stopGeneration,
2829
+ onUpload: imageUploadsEnabled ? () => {
2830
+ var _a;
2831
+ return (_a = fileInputRef.current) == null ? void 0 : _a.click();
2832
+ } : void 0
2545
2833
  }
2546
2834
  )
2547
2835
  ] });
@@ -2554,10 +2842,10 @@ function WrappedCopilotChat({
2554
2842
  }) {
2555
2843
  const chatContext = import_react13.default.useContext(ChatContext);
2556
2844
  if (!chatContext) {
2557
- return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChatContextProvider, { icons, labels, open: true, setOpen: () => {
2558
- }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: `copilotKitChat ${className}`, children }) });
2845
+ return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChatContextProvider, { icons, labels, open: true, setOpen: () => {
2846
+ }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: `copilotKitChat ${className}`, children }) });
2559
2847
  }
2560
- return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, { children });
2848
+ return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, { children });
2561
2849
  }
2562
2850
  var SUGGESTIONS_DEBOUNCE_TIMEOUT = 1e3;
2563
2851
  var useCopilotChatLogic = (makeSystemMessage, onInProgress, onSubmitMessage, onStopGeneration, onReloadMessages) => {
@@ -2611,22 +2899,45 @@ var useCopilotChatLogic = (makeSystemMessage, onInProgress, onSubmitMessage, onS
2611
2899
  // global context
2612
2900
  visibleMessages.length == 0
2613
2901
  ]);
2614
- const sendMessage = (messageContent) => __async(void 0, null, function* () {
2902
+ const sendMessage = (messageContent, imagesToUse) => __async(void 0, null, function* () {
2903
+ const images = imagesToUse || [];
2615
2904
  abortSuggestions();
2616
2905
  setCurrentSuggestions([]);
2617
- const message = new import_runtime_client_gql4.TextMessage({
2618
- content: messageContent,
2619
- role: import_runtime_client_gql4.Role.User
2620
- });
2621
- if (onSubmitMessage) {
2622
- try {
2623
- yield onSubmitMessage(messageContent);
2624
- } catch (error) {
2625
- console.error("Error in onSubmitMessage:", error);
2906
+ let firstMessage = null;
2907
+ if (messageContent.trim().length > 0) {
2908
+ const textMessage = new import_runtime_client_gql4.TextMessage({
2909
+ content: messageContent,
2910
+ role: import_runtime_client_gql4.Role.User
2911
+ });
2912
+ if (onSubmitMessage) {
2913
+ try {
2914
+ yield onSubmitMessage(messageContent);
2915
+ } catch (error) {
2916
+ console.error("Error in onSubmitMessage:", error);
2917
+ }
2918
+ }
2919
+ yield appendMessage(textMessage, { followUp: images.length === 0 });
2920
+ if (!firstMessage) {
2921
+ firstMessage = textMessage;
2922
+ }
2923
+ }
2924
+ if (images.length > 0) {
2925
+ for (let i = 0; i < images.length; i++) {
2926
+ const imageMessage = new import_runtime_client_gql4.ImageMessage({
2927
+ format: images[i].contentType.replace("image/", ""),
2928
+ bytes: images[i].bytes,
2929
+ role: import_runtime_client_gql4.Role.User
2930
+ });
2931
+ yield appendMessage(imageMessage, { followUp: i === images.length - 1 });
2932
+ if (!firstMessage) {
2933
+ firstMessage = imageMessage;
2934
+ }
2626
2935
  }
2627
2936
  }
2628
- appendMessage(message);
2629
- return message;
2937
+ if (!firstMessage) {
2938
+ return new import_runtime_client_gql4.TextMessage({ content: "", role: import_runtime_client_gql4.Role.User });
2939
+ }
2940
+ return firstMessage;
2630
2941
  });
2631
2942
  const messages = visibleMessages;
2632
2943
  const { setMessages } = messagesContext;
@@ -2719,7 +3030,7 @@ var useCopilotChatLogic = (makeSystemMessage, onInProgress, onSubmitMessage, onS
2719
3030
  };
2720
3031
 
2721
3032
  // src/components/chat/Modal.tsx
2722
- var import_jsx_runtime23 = require("react/jsx-runtime");
3033
+ var import_jsx_runtime25 = require("react/jsx-runtime");
2723
3034
  var CopilotModal = ({
2724
3035
  instructions,
2725
3036
  defaultOpen = false,
@@ -2753,19 +3064,19 @@ var CopilotModal = ({
2753
3064
  onSetOpen == null ? void 0 : onSetOpen(open);
2754
3065
  setOpenState(open);
2755
3066
  };
2756
- return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(ChatContextProvider, { icons, labels, open: openState, setOpen, children: [
3067
+ return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(ChatContextProvider, { icons, labels, open: openState, setOpen, children: [
2757
3068
  children,
2758
- /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className, children: [
2759
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button2, {}),
2760
- /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
3069
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className, children: [
3070
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Button2, {}),
3071
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
2761
3072
  Window2,
2762
3073
  {
2763
3074
  clickOutsideToClose,
2764
3075
  shortcut,
2765
3076
  hitEscapeToClose,
2766
3077
  children: [
2767
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Header2, {}),
2768
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
3078
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Header2, {}),
3079
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
2769
3080
  CopilotChat,
2770
3081
  {
2771
3082
  instructions,
@@ -2792,12 +3103,12 @@ var CopilotModal = ({
2792
3103
  };
2793
3104
 
2794
3105
  // src/components/chat/Popup.tsx
2795
- var import_jsx_runtime24 = require("react/jsx-runtime");
3106
+ var import_jsx_runtime26 = require("react/jsx-runtime");
2796
3107
  function CopilotPopup(props) {
2797
3108
  props = __spreadProps(__spreadValues({}, props), {
2798
3109
  className: props.className ? props.className + " copilotKitPopup" : "copilotKitPopup"
2799
3110
  });
2800
- return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CopilotModal, __spreadProps(__spreadValues({}, props), { children: props.children }));
3111
+ return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CopilotModal, __spreadProps(__spreadValues({}, props), { children: props.children }));
2801
3112
  }
2802
3113
  // Annotate the CommonJS export names for ESM import in node:
2803
3114
  0 && (module.exports = {