@copilotkit/react-ui 1.10.0-next.9 → 1.10.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 (60) hide show
  1. package/CHANGELOG.md +118 -0
  2. package/dist/{chunk-U5ATIGWH.mjs → chunk-BJHJBS5M.mjs} +45 -5
  3. package/dist/chunk-BJHJBS5M.mjs.map +1 -0
  4. package/dist/{chunk-TW4LLLTE.mjs → chunk-GBP47ONN.mjs} +2 -2
  5. package/dist/{chunk-2KG77MAY.mjs → chunk-GJ4SX4JE.mjs} +38 -29
  6. package/dist/chunk-GJ4SX4JE.mjs.map +1 -0
  7. package/dist/{chunk-6C3YVF5W.mjs → chunk-J5ZZR6YB.mjs} +2 -2
  8. package/dist/chunk-MIVUCSGO.mjs +126 -0
  9. package/dist/chunk-MIVUCSGO.mjs.map +1 -0
  10. package/dist/{chunk-JHUTTP5C.mjs → chunk-T5QU6KSB.mjs} +5 -1
  11. package/dist/chunk-T5QU6KSB.mjs.map +1 -0
  12. package/dist/{chunk-7K2X77PW.mjs → chunk-Y44VLEUH.mjs} +8 -8
  13. package/dist/components/chat/Chat.d.ts +21 -2
  14. package/dist/components/chat/Chat.js +1022 -856
  15. package/dist/components/chat/Chat.js.map +1 -1
  16. package/dist/components/chat/Chat.mjs +7 -6
  17. package/dist/components/chat/Messages.d.ts +1 -1
  18. package/dist/components/chat/Messages.js +984 -23
  19. package/dist/components/chat/Messages.js.map +1 -1
  20. package/dist/components/chat/Messages.mjs +9 -1
  21. package/dist/components/chat/Modal.js +1030 -864
  22. package/dist/components/chat/Modal.js.map +1 -1
  23. package/dist/components/chat/Modal.mjs +8 -7
  24. package/dist/components/chat/Popup.js +1032 -866
  25. package/dist/components/chat/Popup.js.map +1 -1
  26. package/dist/components/chat/Popup.mjs +9 -8
  27. package/dist/components/chat/Sidebar.js +1032 -866
  28. package/dist/components/chat/Sidebar.js.map +1 -1
  29. package/dist/components/chat/Sidebar.mjs +9 -8
  30. package/dist/components/chat/index.js +1034 -868
  31. package/dist/components/chat/index.js.map +1 -1
  32. package/dist/components/chat/index.mjs +16 -15
  33. package/dist/components/chat/messages/LegacyRenderMessage.d.ts +28 -0
  34. package/dist/components/chat/messages/LegacyRenderMessage.js +980 -0
  35. package/dist/components/chat/messages/LegacyRenderMessage.js.map +1 -0
  36. package/dist/components/chat/messages/LegacyRenderMessage.mjs +17 -0
  37. package/dist/components/chat/messages/LegacyRenderMessage.mjs.map +1 -0
  38. package/dist/components/chat/messages/RenderMessage.js +4 -0
  39. package/dist/components/chat/messages/RenderMessage.js.map +1 -1
  40. package/dist/components/chat/messages/RenderMessage.mjs +1 -1
  41. package/dist/components/chat/props.d.ts +49 -0
  42. package/dist/components/chat/props.js.map +1 -1
  43. package/dist/components/index.js +1034 -868
  44. package/dist/components/index.js.map +1 -1
  45. package/dist/components/index.mjs +16 -15
  46. package/dist/index.js +1034 -868
  47. package/dist/index.js.map +1 -1
  48. package/dist/index.mjs +16 -15
  49. package/package.json +4 -4
  50. package/src/components/chat/Chat.tsx +50 -14
  51. package/src/components/chat/Messages.tsx +56 -3
  52. package/src/components/chat/messages/LegacyRenderMessage.tsx +143 -0
  53. package/src/components/chat/messages/RenderMessage.tsx +3 -0
  54. package/src/components/chat/props.ts +57 -0
  55. package/dist/chunk-2KG77MAY.mjs.map +0 -1
  56. package/dist/chunk-JHUTTP5C.mjs.map +0 -1
  57. package/dist/chunk-U5ATIGWH.mjs.map +0 -1
  58. /package/dist/{chunk-TW4LLLTE.mjs.map → chunk-GBP47ONN.mjs.map} +0 -0
  59. /package/dist/{chunk-6C3YVF5W.mjs.map → chunk-J5ZZR6YB.mjs.map} +0 -0
  60. /package/dist/{chunk-7K2X77PW.mjs.map → chunk-Y44VLEUH.mjs.map} +0 -0
@@ -0,0 +1,980 @@
1
+ "use strict";
2
+ var __create = Object.create;
3
+ var __defProp = Object.defineProperty;
4
+ var __defProps = Object.defineProperties;
5
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
7
+ var __getOwnPropNames = Object.getOwnPropertyNames;
8
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
9
+ var __getProtoOf = Object.getPrototypeOf;
10
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
11
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
12
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
13
+ var __spreadValues = (a, b) => {
14
+ for (var prop in b || (b = {}))
15
+ if (__hasOwnProp.call(b, prop))
16
+ __defNormalProp(a, prop, b[prop]);
17
+ if (__getOwnPropSymbols)
18
+ for (var prop of __getOwnPropSymbols(b)) {
19
+ if (__propIsEnum.call(b, prop))
20
+ __defNormalProp(a, prop, b[prop]);
21
+ }
22
+ return a;
23
+ };
24
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
25
+ var __objRest = (source, exclude) => {
26
+ var target = {};
27
+ for (var prop in source)
28
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
29
+ target[prop] = source[prop];
30
+ if (source != null && __getOwnPropSymbols)
31
+ for (var prop of __getOwnPropSymbols(source)) {
32
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
33
+ target[prop] = source[prop];
34
+ }
35
+ return target;
36
+ };
37
+ var __export = (target, all) => {
38
+ for (var name in all)
39
+ __defProp(target, name, { get: all[name], enumerable: true });
40
+ };
41
+ var __copyProps = (to, from, except, desc) => {
42
+ if (from && typeof from === "object" || typeof from === "function") {
43
+ for (let key of __getOwnPropNames(from))
44
+ if (!__hasOwnProp.call(to, key) && key !== except)
45
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
46
+ }
47
+ return to;
48
+ };
49
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
50
+ // If the importer is in node compatibility mode or this is not an ESM
51
+ // file that has been converted to a CommonJS file using a Babel-
52
+ // compatible transform (i.e. "__esModule" has not been set), then set
53
+ // "default" to the CommonJS "module.exports" for node compatibility.
54
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
55
+ mod
56
+ ));
57
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
58
+
59
+ // src/components/chat/messages/LegacyRenderMessage.tsx
60
+ var LegacyRenderMessage_exports = {};
61
+ __export(LegacyRenderMessage_exports, {
62
+ LegacyRenderMessage: () => LegacyRenderMessage
63
+ });
64
+ module.exports = __toCommonJS(LegacyRenderMessage_exports);
65
+
66
+ // src/components/chat/messages/UserMessage.tsx
67
+ var import_jsx_runtime = require("react/jsx-runtime");
68
+ var UserMessage = (props) => {
69
+ const { message, ImageRenderer: ImageRenderer2 } = props;
70
+ const isImageMessage = message && "image" in message && message.image;
71
+ if (isImageMessage) {
72
+ const imageMessage = message;
73
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "copilotKitMessage copilotKitUserMessage", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ImageRenderer2, { image: imageMessage.image, content: imageMessage.content }) });
74
+ }
75
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "copilotKitMessage copilotKitUserMessage", children: message == null ? void 0 : message.content });
76
+ };
77
+
78
+ // src/components/chat/ChatContext.tsx
79
+ var import_react = __toESM(require("react"));
80
+
81
+ // src/components/chat/Icons.tsx
82
+ var import_jsx_runtime2 = require("react/jsx-runtime");
83
+ var CopyIcon = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
84
+ "svg",
85
+ {
86
+ xmlns: "http://www.w3.org/2000/svg",
87
+ fill: "none",
88
+ viewBox: "0 0 24 24",
89
+ strokeWidth: "2",
90
+ stroke: "currentColor",
91
+ width: "16",
92
+ height: "16",
93
+ style: { minWidth: "16px", minHeight: "16px" },
94
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
95
+ "path",
96
+ {
97
+ strokeLinecap: "round",
98
+ strokeLinejoin: "round",
99
+ d: "M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75"
100
+ }
101
+ )
102
+ }
103
+ );
104
+ var DownloadIcon = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
105
+ "svg",
106
+ {
107
+ xmlns: "http://www.w3.org/2000/svg",
108
+ fill: "none",
109
+ viewBox: "0 0 24 24",
110
+ strokeWidth: "2",
111
+ stroke: "currentColor",
112
+ width: "16",
113
+ height: "16",
114
+ style: { minWidth: "16px", minHeight: "16px" },
115
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
116
+ "path",
117
+ {
118
+ strokeLinecap: "round",
119
+ strokeLinejoin: "round",
120
+ d: "M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"
121
+ }
122
+ )
123
+ }
124
+ );
125
+ var CheckIcon = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
126
+ "svg",
127
+ {
128
+ xmlns: "http://www.w3.org/2000/svg",
129
+ fill: "none",
130
+ viewBox: "0 0 24 24",
131
+ strokeWidth: "2",
132
+ stroke: "currentColor",
133
+ width: "16",
134
+ height: "16",
135
+ style: { minWidth: "16px", minHeight: "16px" },
136
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4.5 12.75l6 6 9-13.5" })
137
+ }
138
+ );
139
+
140
+ // src/components/chat/ChatContext.tsx
141
+ var import_jsx_runtime3 = require("react/jsx-runtime");
142
+ var ChatContext = import_react.default.createContext(void 0);
143
+ function useChatContext() {
144
+ const context = import_react.default.useContext(ChatContext);
145
+ if (context === void 0) {
146
+ throw new Error(
147
+ "Context not found. Did you forget to wrap your app in a <ChatContextProvider> component?"
148
+ );
149
+ }
150
+ return context;
151
+ }
152
+
153
+ // src/components/chat/Markdown.tsx
154
+ var import_react3 = require("react");
155
+ var import_react_markdown = __toESM(require("react-markdown"));
156
+
157
+ // src/components/chat/CodeBlock.tsx
158
+ var import_react2 = require("react");
159
+ var import_react_syntax_highlighter = require("react-syntax-highlighter");
160
+
161
+ // src/hooks/use-copy-to-clipboard.tsx
162
+ var React2 = __toESM(require("react"));
163
+ function useCopyToClipboard({ timeout = 2e3 }) {
164
+ const [isCopied, setIsCopied] = React2.useState(false);
165
+ const copyToClipboard = (value) => {
166
+ var _a;
167
+ if (typeof window === "undefined" || !((_a = navigator.clipboard) == null ? void 0 : _a.writeText)) {
168
+ return;
169
+ }
170
+ if (!value) {
171
+ return;
172
+ }
173
+ navigator.clipboard.writeText(value).then(() => {
174
+ setIsCopied(true);
175
+ setTimeout(() => {
176
+ setIsCopied(false);
177
+ }, timeout);
178
+ });
179
+ };
180
+ return { isCopied, copyToClipboard };
181
+ }
182
+
183
+ // src/components/chat/CodeBlock.tsx
184
+ var import_jsx_runtime4 = require("react/jsx-runtime");
185
+ var programmingLanguages = {
186
+ javascript: ".js",
187
+ python: ".py",
188
+ java: ".java",
189
+ c: ".c",
190
+ cpp: ".cpp",
191
+ "c++": ".cpp",
192
+ "c#": ".cs",
193
+ ruby: ".rb",
194
+ php: ".php",
195
+ swift: ".swift",
196
+ "objective-c": ".m",
197
+ kotlin: ".kt",
198
+ typescript: ".ts",
199
+ go: ".go",
200
+ perl: ".pl",
201
+ rust: ".rs",
202
+ scala: ".scala",
203
+ haskell: ".hs",
204
+ lua: ".lua",
205
+ shell: ".sh",
206
+ sql: ".sql",
207
+ html: ".html",
208
+ css: ".css"
209
+ // add more file extensions here, make sure the key is same as language prop in CodeBlock.tsx component
210
+ };
211
+ var generateRandomString = (length, lowercase = false) => {
212
+ const chars = "ABCDEFGHJKLMNPQRSTUVWXY3456789";
213
+ let result = "";
214
+ for (let i = 0; i < length; i++) {
215
+ result += chars.charAt(Math.floor(Math.random() * chars.length));
216
+ }
217
+ return lowercase ? result.toLowerCase() : result;
218
+ };
219
+ var CodeBlock = (0, import_react2.memo)(({ language, value }) => {
220
+ const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2e3 });
221
+ const downloadAsFile = () => {
222
+ if (typeof window === "undefined") {
223
+ return;
224
+ }
225
+ const fileExtension = programmingLanguages[language] || ".file";
226
+ const suggestedFileName = `file-${generateRandomString(3, true)}${fileExtension}`;
227
+ const fileName = window.prompt("Enter file name", suggestedFileName);
228
+ if (!fileName) {
229
+ return;
230
+ }
231
+ const blob = new Blob([value], { type: "text/plain" });
232
+ const url = URL.createObjectURL(blob);
233
+ const link = document.createElement("a");
234
+ link.download = fileName;
235
+ link.href = url;
236
+ link.style.display = "none";
237
+ document.body.appendChild(link);
238
+ link.click();
239
+ document.body.removeChild(link);
240
+ URL.revokeObjectURL(url);
241
+ };
242
+ const onCopy = () => {
243
+ if (isCopied)
244
+ return;
245
+ copyToClipboard(value);
246
+ };
247
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "copilotKitCodeBlock", children: [
248
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "copilotKitCodeBlockToolbar", children: [
249
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "copilotKitCodeBlockToolbarLanguage", children: language }),
250
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "copilotKitCodeBlockToolbarButtons", children: [
251
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "copilotKitCodeBlockToolbarButton", onClick: downloadAsFile, children: DownloadIcon }),
252
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "copilotKitCodeBlockToolbarButton", onClick: onCopy, children: isCopied ? CheckIcon : CopyIcon })
253
+ ] })
254
+ ] }),
255
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
256
+ import_react_syntax_highlighter.Prism,
257
+ {
258
+ language,
259
+ style: highlightStyle,
260
+ PreTag: "div",
261
+ customStyle: {
262
+ margin: 0,
263
+ borderBottomLeftRadius: "0.375rem",
264
+ borderBottomRightRadius: "0.375rem"
265
+ },
266
+ children: value
267
+ }
268
+ )
269
+ ] });
270
+ });
271
+ CodeBlock.displayName = "CodeBlock";
272
+ var highlightStyle = {
273
+ 'pre[class*="language-"]': {
274
+ color: "#d4d4d4",
275
+ fontSize: "13px",
276
+ textShadow: "none",
277
+ fontFamily: 'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace',
278
+ direction: "ltr",
279
+ textAlign: "left",
280
+ whiteSpace: "pre",
281
+ wordSpacing: "normal",
282
+ wordBreak: "normal",
283
+ lineHeight: "1.5",
284
+ MozTabSize: "4",
285
+ OTabSize: "4",
286
+ tabSize: "4",
287
+ WebkitHyphens: "none",
288
+ MozHyphens: "none",
289
+ msHyphens: "none",
290
+ hyphens: "none",
291
+ padding: "1em",
292
+ margin: ".5em 0",
293
+ overflow: "auto",
294
+ background: "#1e1e1e"
295
+ },
296
+ 'code[class*="language-"]': {
297
+ color: "#d4d4d4",
298
+ fontSize: "13px",
299
+ textShadow: "none",
300
+ fontFamily: 'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace',
301
+ direction: "ltr",
302
+ textAlign: "left",
303
+ whiteSpace: "pre",
304
+ wordSpacing: "normal",
305
+ wordBreak: "normal",
306
+ lineHeight: "1.5",
307
+ MozTabSize: "4",
308
+ OTabSize: "4",
309
+ tabSize: "4",
310
+ WebkitHyphens: "none",
311
+ MozHyphens: "none",
312
+ msHyphens: "none",
313
+ hyphens: "none"
314
+ },
315
+ 'pre[class*="language-"]::selection': {
316
+ textShadow: "none",
317
+ background: "#264F78"
318
+ },
319
+ 'code[class*="language-"]::selection': {
320
+ textShadow: "none",
321
+ background: "#264F78"
322
+ },
323
+ 'pre[class*="language-"] *::selection': {
324
+ textShadow: "none",
325
+ background: "#264F78"
326
+ },
327
+ 'code[class*="language-"] *::selection': {
328
+ textShadow: "none",
329
+ background: "#264F78"
330
+ },
331
+ ':not(pre) > code[class*="language-"]': {
332
+ padding: ".1em .3em",
333
+ borderRadius: ".3em",
334
+ color: "#db4c69",
335
+ background: "#1e1e1e"
336
+ },
337
+ ".namespace": {
338
+ Opacity: ".7"
339
+ },
340
+ "doctype.doctype-tag": {
341
+ color: "#569CD6"
342
+ },
343
+ "doctype.name": {
344
+ color: "#9cdcfe"
345
+ },
346
+ comment: {
347
+ color: "#6a9955"
348
+ },
349
+ prolog: {
350
+ color: "#6a9955"
351
+ },
352
+ punctuation: {
353
+ color: "#d4d4d4"
354
+ },
355
+ ".language-html .language-css .token.punctuation": {
356
+ color: "#d4d4d4"
357
+ },
358
+ ".language-html .language-javascript .token.punctuation": {
359
+ color: "#d4d4d4"
360
+ },
361
+ property: {
362
+ color: "#9cdcfe"
363
+ },
364
+ tag: {
365
+ color: "#569cd6"
366
+ },
367
+ boolean: {
368
+ color: "#569cd6"
369
+ },
370
+ number: {
371
+ color: "#b5cea8"
372
+ },
373
+ constant: {
374
+ color: "#9cdcfe"
375
+ },
376
+ symbol: {
377
+ color: "#b5cea8"
378
+ },
379
+ inserted: {
380
+ color: "#b5cea8"
381
+ },
382
+ unit: {
383
+ color: "#b5cea8"
384
+ },
385
+ selector: {
386
+ color: "#d7ba7d"
387
+ },
388
+ "attr-name": {
389
+ color: "#9cdcfe"
390
+ },
391
+ string: {
392
+ color: "#ce9178"
393
+ },
394
+ char: {
395
+ color: "#ce9178"
396
+ },
397
+ builtin: {
398
+ color: "#ce9178"
399
+ },
400
+ deleted: {
401
+ color: "#ce9178"
402
+ },
403
+ ".language-css .token.string.url": {
404
+ textDecoration: "underline"
405
+ },
406
+ operator: {
407
+ color: "#d4d4d4"
408
+ },
409
+ entity: {
410
+ color: "#569cd6"
411
+ },
412
+ "operator.arrow": {
413
+ color: "#569CD6"
414
+ },
415
+ atrule: {
416
+ color: "#ce9178"
417
+ },
418
+ "atrule.rule": {
419
+ color: "#c586c0"
420
+ },
421
+ "atrule.url": {
422
+ color: "#9cdcfe"
423
+ },
424
+ "atrule.url.function": {
425
+ color: "#dcdcaa"
426
+ },
427
+ "atrule.url.punctuation": {
428
+ color: "#d4d4d4"
429
+ },
430
+ keyword: {
431
+ color: "#569CD6"
432
+ },
433
+ "keyword.module": {
434
+ color: "#c586c0"
435
+ },
436
+ "keyword.control-flow": {
437
+ color: "#c586c0"
438
+ },
439
+ function: {
440
+ color: "#dcdcaa"
441
+ },
442
+ "function.maybe-class-name": {
443
+ color: "#dcdcaa"
444
+ },
445
+ regex: {
446
+ color: "#d16969"
447
+ },
448
+ important: {
449
+ color: "#569cd6"
450
+ },
451
+ italic: {
452
+ fontStyle: "italic"
453
+ },
454
+ "class-name": {
455
+ color: "#4ec9b0"
456
+ },
457
+ "maybe-class-name": {
458
+ color: "#4ec9b0"
459
+ },
460
+ console: {
461
+ color: "#9cdcfe"
462
+ },
463
+ parameter: {
464
+ color: "#9cdcfe"
465
+ },
466
+ interpolation: {
467
+ color: "#9cdcfe"
468
+ },
469
+ "punctuation.interpolation-punctuation": {
470
+ color: "#569cd6"
471
+ },
472
+ variable: {
473
+ color: "#9cdcfe"
474
+ },
475
+ "imports.maybe-class-name": {
476
+ color: "#9cdcfe"
477
+ },
478
+ "exports.maybe-class-name": {
479
+ color: "#9cdcfe"
480
+ },
481
+ escape: {
482
+ color: "#d7ba7d"
483
+ },
484
+ "tag.punctuation": {
485
+ color: "#808080"
486
+ },
487
+ cdata: {
488
+ color: "#808080"
489
+ },
490
+ "attr-value": {
491
+ color: "#ce9178"
492
+ },
493
+ "attr-value.punctuation": {
494
+ color: "#ce9178"
495
+ },
496
+ "attr-value.punctuation.attr-equals": {
497
+ color: "#d4d4d4"
498
+ },
499
+ namespace: {
500
+ color: "#4ec9b0"
501
+ },
502
+ 'pre[class*="language-javascript"]': {
503
+ color: "#9cdcfe"
504
+ },
505
+ 'code[class*="language-javascript"]': {
506
+ color: "#9cdcfe"
507
+ },
508
+ 'pre[class*="language-jsx"]': {
509
+ color: "#9cdcfe"
510
+ },
511
+ 'code[class*="language-jsx"]': {
512
+ color: "#9cdcfe"
513
+ },
514
+ 'pre[class*="language-typescript"]': {
515
+ color: "#9cdcfe"
516
+ },
517
+ 'code[class*="language-typescript"]': {
518
+ color: "#9cdcfe"
519
+ },
520
+ 'pre[class*="language-tsx"]': {
521
+ color: "#9cdcfe"
522
+ },
523
+ 'code[class*="language-tsx"]': {
524
+ color: "#9cdcfe"
525
+ },
526
+ 'pre[class*="language-css"]': {
527
+ color: "#ce9178"
528
+ },
529
+ 'code[class*="language-css"]': {
530
+ color: "#ce9178"
531
+ },
532
+ 'pre[class*="language-html"]': {
533
+ color: "#d4d4d4"
534
+ },
535
+ 'code[class*="language-html"]': {
536
+ color: "#d4d4d4"
537
+ },
538
+ ".language-regex .token.anchor": {
539
+ color: "#dcdcaa"
540
+ },
541
+ ".language-html .token.punctuation": {
542
+ color: "#808080"
543
+ },
544
+ 'pre[class*="language-"] > code[class*="language-"]': {
545
+ position: "relative",
546
+ zIndex: "1"
547
+ },
548
+ ".line-highlight.line-highlight": {
549
+ background: "#f7ebc6",
550
+ boxShadow: "inset 5px 0 0 #f7d87c",
551
+ zIndex: "0"
552
+ }
553
+ };
554
+
555
+ // src/components/chat/Markdown.tsx
556
+ var import_remark_gfm = __toESM(require("remark-gfm"));
557
+ var import_remark_math = __toESM(require("remark-math"));
558
+ var import_rehype_raw = __toESM(require("rehype-raw"));
559
+ var import_jsx_runtime5 = require("react/jsx-runtime");
560
+ var defaultComponents = {
561
+ a(_a) {
562
+ var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
563
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("a", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { target: "_blank", rel: "noopener noreferrer", children }));
564
+ },
565
+ // @ts-expect-error -- inline
566
+ code(_c) {
567
+ var _d = _c, { children, className, inline } = _d, props = __objRest(_d, ["children", "className", "inline"]);
568
+ if (Array.isArray(children) && children.length) {
569
+ if (children[0] == "\u258D") {
570
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
571
+ "span",
572
+ {
573
+ style: {
574
+ animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
575
+ marginTop: "0.25rem"
576
+ },
577
+ children: "\u258D"
578
+ }
579
+ );
580
+ }
581
+ children[0] = (children == null ? void 0 : children[0]).replace("`\u258D`", "\u258D");
582
+ }
583
+ const match = /language-(\w+)/.exec(className || "");
584
+ const hasLanguage = match && match[1];
585
+ const content = String(children);
586
+ const hasNewlines = content.includes("\n");
587
+ const isInline = !hasLanguage && !hasNewlines;
588
+ if (isInline) {
589
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
590
+ "code",
591
+ __spreadProps(__spreadValues({
592
+ className: `copilotKitMarkdownElement copilotKitInlineCode ${className || ""}`
593
+ }, props), {
594
+ children
595
+ })
596
+ );
597
+ }
598
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
599
+ CodeBlock,
600
+ __spreadValues({
601
+ language: match && match[1] || "",
602
+ value: String(children).replace(/\n$/, "")
603
+ }, props),
604
+ Math.random()
605
+ );
606
+ },
607
+ h1: (_e) => {
608
+ var _f = _e, { children } = _f, props = __objRest(_f, ["children"]);
609
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h1", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
610
+ },
611
+ h2: (_g) => {
612
+ var _h = _g, { children } = _h, props = __objRest(_h, ["children"]);
613
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h2", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
614
+ },
615
+ h3: (_i) => {
616
+ var _j = _i, { children } = _j, props = __objRest(_j, ["children"]);
617
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
618
+ },
619
+ h4: (_k) => {
620
+ var _l = _k, { children } = _l, props = __objRest(_l, ["children"]);
621
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h4", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
622
+ },
623
+ h5: (_m) => {
624
+ var _n = _m, { children } = _n, props = __objRest(_n, ["children"]);
625
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h5", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
626
+ },
627
+ h6: (_o) => {
628
+ var _p = _o, { children } = _p, props = __objRest(_p, ["children"]);
629
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h6", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
630
+ },
631
+ p: (_q) => {
632
+ var _r = _q, { children } = _r, props = __objRest(_r, ["children"]);
633
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
634
+ },
635
+ pre: (_s) => {
636
+ var _t = _s, { children } = _t, props = __objRest(_t, ["children"]);
637
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("pre", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
638
+ },
639
+ blockquote: (_u) => {
640
+ var _v = _u, { children } = _v, props = __objRest(_v, ["children"]);
641
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("blockquote", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
642
+ },
643
+ ul: (_w) => {
644
+ var _x = _w, { children } = _x, props = __objRest(_x, ["children"]);
645
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
646
+ },
647
+ li: (_y) => {
648
+ var _z = _y, { children } = _z, props = __objRest(_z, ["children"]);
649
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
650
+ }
651
+ };
652
+ var MemoizedReactMarkdown = (0, import_react3.memo)(
653
+ import_react_markdown.default,
654
+ (prevProps, nextProps) => prevProps.children === nextProps.children && prevProps.components === nextProps.components
655
+ );
656
+ var Markdown = ({ content, components }) => {
657
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "copilotKitMarkdown", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
658
+ MemoizedReactMarkdown,
659
+ {
660
+ components: __spreadValues(__spreadValues({}, defaultComponents), components),
661
+ remarkPlugins: [import_remark_gfm.default, import_remark_math.default],
662
+ rehypePlugins: [import_rehype_raw.default],
663
+ children: content
664
+ }
665
+ ) });
666
+ };
667
+
668
+ // src/components/chat/messages/AssistantMessage.tsx
669
+ var import_react4 = require("react");
670
+ var import_jsx_runtime6 = require("react/jsx-runtime");
671
+ var AssistantMessage = (props) => {
672
+ var _a;
673
+ const { icons, labels } = useChatContext();
674
+ const {
675
+ message,
676
+ isLoading,
677
+ onRegenerate,
678
+ onCopy,
679
+ onThumbsUp,
680
+ onThumbsDown,
681
+ isCurrentMessage,
682
+ markdownTagRenderers
683
+ } = props;
684
+ const [copied, setCopied] = (0, import_react4.useState)(false);
685
+ const handleCopy = () => {
686
+ const content2 = (message == null ? void 0 : message.content) || "";
687
+ if (content2 && onCopy) {
688
+ navigator.clipboard.writeText(content2);
689
+ setCopied(true);
690
+ onCopy(content2);
691
+ setTimeout(() => setCopied(false), 2e3);
692
+ } else if (content2) {
693
+ navigator.clipboard.writeText(content2);
694
+ setCopied(true);
695
+ setTimeout(() => setCopied(false), 2e3);
696
+ }
697
+ };
698
+ const handleRegenerate = () => {
699
+ if (onRegenerate)
700
+ onRegenerate();
701
+ };
702
+ const handleThumbsUp = () => {
703
+ if (onThumbsUp && message)
704
+ onThumbsUp(message);
705
+ };
706
+ const handleThumbsDown = () => {
707
+ if (onThumbsDown && message)
708
+ onThumbsDown(message);
709
+ };
710
+ const LoadingIcon = () => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: icons.activityIcon });
711
+ const content = (message == null ? void 0 : message.content) || "";
712
+ const subComponent = (_a = message == null ? void 0 : message.generativeUI) == null ? void 0 : _a.call(message);
713
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
714
+ content && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "copilotKitMessage copilotKitAssistantMessage", children: [
715
+ content && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Markdown, { content, components: markdownTagRenderers }),
716
+ content && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
717
+ "div",
718
+ {
719
+ className: `copilotKitMessageControls ${isCurrentMessage ? "currentMessage" : ""}`,
720
+ children: [
721
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
722
+ "button",
723
+ {
724
+ className: "copilotKitMessageControlButton",
725
+ onClick: handleRegenerate,
726
+ "aria-label": labels.regenerateResponse,
727
+ title: labels.regenerateResponse,
728
+ children: icons.regenerateIcon
729
+ }
730
+ ),
731
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
732
+ "button",
733
+ {
734
+ className: "copilotKitMessageControlButton",
735
+ onClick: handleCopy,
736
+ "aria-label": labels.copyToClipboard,
737
+ title: labels.copyToClipboard,
738
+ children: copied ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { fontSize: "10px", fontWeight: "bold" }, children: "\u2713" }) : icons.copyIcon
739
+ }
740
+ ),
741
+ onThumbsUp && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
742
+ "button",
743
+ {
744
+ className: "copilotKitMessageControlButton",
745
+ onClick: handleThumbsUp,
746
+ "aria-label": labels.thumbsUp,
747
+ title: labels.thumbsUp,
748
+ children: icons.thumbsUpIcon
749
+ }
750
+ ),
751
+ onThumbsDown && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
752
+ "button",
753
+ {
754
+ className: "copilotKitMessageControlButton",
755
+ onClick: handleThumbsDown,
756
+ "aria-label": labels.thumbsDown,
757
+ title: labels.thumbsDown,
758
+ children: icons.thumbsDownIcon
759
+ }
760
+ )
761
+ ]
762
+ }
763
+ )
764
+ ] }),
765
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { marginBottom: "0.5rem" }, children: subComponent }),
766
+ isLoading && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LoadingIcon, {})
767
+ ] });
768
+ };
769
+
770
+ // src/components/chat/messages/ImageRenderer.tsx
771
+ var import_react5 = require("react");
772
+ var import_jsx_runtime7 = require("react/jsx-runtime");
773
+ var ImageRenderer = ({ image, content, className = "" }) => {
774
+ const [imageError, setImageError] = (0, import_react5.useState)(false);
775
+ const imageSrc = `data:image/${image.format};base64,${image.bytes}`;
776
+ const altText = content || "User uploaded image";
777
+ const handleImageError = () => {
778
+ setImageError(true);
779
+ };
780
+ if (imageError) {
781
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `copilotKitImageRendering copilotKitImageRenderingError ${className}`, children: [
782
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "copilotKitImageRenderingErrorMessage", children: "Failed to load image" }),
783
+ content && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "copilotKitImageRenderingContent", children: content })
784
+ ] });
785
+ }
786
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `copilotKitImageRendering ${className}`, children: [
787
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
788
+ "img",
789
+ {
790
+ src: imageSrc,
791
+ alt: altText,
792
+ className: "copilotKitImageRenderingImage",
793
+ onError: handleImageError
794
+ }
795
+ ),
796
+ content && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "copilotKitImageRenderingContent", children: content })
797
+ ] });
798
+ };
799
+
800
+ // src/components/chat/messages/RenderMessage.tsx
801
+ var import_jsx_runtime8 = require("react/jsx-runtime");
802
+ function RenderMessage(_a) {
803
+ var _b = _a, {
804
+ UserMessage: UserMessage2 = UserMessage,
805
+ AssistantMessage: AssistantMessage2 = AssistantMessage,
806
+ ImageRenderer: ImageRenderer2 = ImageRenderer
807
+ } = _b, props = __objRest(_b, [
808
+ "UserMessage",
809
+ "AssistantMessage",
810
+ "ImageRenderer"
811
+ ]);
812
+ var _a2;
813
+ const {
814
+ message,
815
+ inProgress,
816
+ index,
817
+ isCurrentMessage,
818
+ onRegenerate,
819
+ onCopy,
820
+ onThumbsUp,
821
+ onThumbsDown,
822
+ markdownTagRenderers
823
+ } = props;
824
+ switch (message.role) {
825
+ case "user":
826
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
827
+ UserMessage2,
828
+ {
829
+ rawData: message,
830
+ "data-message-role": "user",
831
+ message,
832
+ ImageRenderer: ImageRenderer2
833
+ },
834
+ index
835
+ );
836
+ case "assistant":
837
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
838
+ AssistantMessage2,
839
+ {
840
+ "data-message-role": "assistant",
841
+ subComponent: (_a2 = message.generativeUI) == null ? void 0 : _a2.call(message),
842
+ rawData: message,
843
+ message,
844
+ isLoading: inProgress && isCurrentMessage && !message.content,
845
+ isGenerating: inProgress && isCurrentMessage && !!message.content,
846
+ isCurrentMessage,
847
+ onRegenerate: () => onRegenerate == null ? void 0 : onRegenerate(message.id),
848
+ onCopy,
849
+ onThumbsUp,
850
+ onThumbsDown,
851
+ markdownTagRenderers,
852
+ ImageRenderer: ImageRenderer2
853
+ },
854
+ index
855
+ );
856
+ }
857
+ }
858
+
859
+ // src/components/chat/messages/LegacyRenderMessage.tsx
860
+ var import_runtime_client_gql = require("@copilotkit/runtime-client-gql");
861
+ var import_jsx_runtime9 = require("react/jsx-runtime");
862
+ var LegacyRenderMessage = ({
863
+ message,
864
+ inProgress,
865
+ index,
866
+ isCurrentMessage,
867
+ actionResult,
868
+ AssistantMessage: AssistantMessage2,
869
+ UserMessage: UserMessage2,
870
+ ImageRenderer: ImageRenderer2,
871
+ onRegenerate,
872
+ onCopy,
873
+ onThumbsUp,
874
+ onThumbsDown,
875
+ markdownTagRenderers,
876
+ legacyProps
877
+ }) => {
878
+ var _a;
879
+ const {
880
+ RenderTextMessage,
881
+ RenderActionExecutionMessage,
882
+ RenderAgentStateMessage,
883
+ RenderResultMessage,
884
+ RenderImageMessage
885
+ } = legacyProps;
886
+ const deprecatedMessage = (_a = (0, import_runtime_client_gql.aguiToGQL)(message)[0]) != null ? _a : void 0;
887
+ if (deprecatedMessage.isTextMessage() && RenderTextMessage) {
888
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
889
+ RenderTextMessage,
890
+ {
891
+ message,
892
+ inProgress,
893
+ index,
894
+ isCurrentMessage,
895
+ AssistantMessage: AssistantMessage2,
896
+ UserMessage: UserMessage2,
897
+ onRegenerate,
898
+ onCopy,
899
+ onThumbsUp,
900
+ onThumbsDown,
901
+ markdownTagRenderers
902
+ }
903
+ );
904
+ }
905
+ if (deprecatedMessage.isActionExecutionMessage() && RenderActionExecutionMessage) {
906
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
907
+ RenderActionExecutionMessage,
908
+ {
909
+ message,
910
+ inProgress,
911
+ index,
912
+ isCurrentMessage,
913
+ actionResult,
914
+ AssistantMessage: AssistantMessage2,
915
+ UserMessage: UserMessage2
916
+ }
917
+ );
918
+ }
919
+ if (deprecatedMessage.isAgentStateMessage() && RenderAgentStateMessage) {
920
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
921
+ RenderAgentStateMessage,
922
+ {
923
+ message,
924
+ inProgress,
925
+ index,
926
+ isCurrentMessage,
927
+ AssistantMessage: AssistantMessage2,
928
+ UserMessage: UserMessage2
929
+ }
930
+ );
931
+ }
932
+ if (deprecatedMessage.isResultMessage() && RenderResultMessage) {
933
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
934
+ RenderResultMessage,
935
+ {
936
+ message,
937
+ inProgress,
938
+ index,
939
+ isCurrentMessage,
940
+ AssistantMessage: AssistantMessage2,
941
+ UserMessage: UserMessage2
942
+ }
943
+ );
944
+ }
945
+ if (deprecatedMessage.isImageMessage() && RenderImageMessage) {
946
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
947
+ RenderImageMessage,
948
+ {
949
+ message,
950
+ inProgress,
951
+ index,
952
+ isCurrentMessage,
953
+ AssistantMessage: AssistantMessage2,
954
+ UserMessage: UserMessage2
955
+ }
956
+ );
957
+ }
958
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
959
+ RenderMessage,
960
+ {
961
+ message,
962
+ inProgress,
963
+ index,
964
+ isCurrentMessage,
965
+ AssistantMessage: AssistantMessage2,
966
+ UserMessage: UserMessage2,
967
+ ImageRenderer: ImageRenderer2,
968
+ onRegenerate,
969
+ onCopy,
970
+ onThumbsUp,
971
+ onThumbsDown,
972
+ markdownTagRenderers
973
+ }
974
+ );
975
+ };
976
+ // Annotate the CommonJS export names for ESM import in node:
977
+ 0 && (module.exports = {
978
+ LegacyRenderMessage
979
+ });
980
+ //# sourceMappingURL=LegacyRenderMessage.js.map