@copilotkit/react-ui 1.8.0-next.4 → 1.8.0-next.6

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 (72) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/{chunk-TFIQA2P5.mjs → chunk-6H7IQRIU.mjs} +2 -2
  3. package/dist/{chunk-AIR3MXUU.mjs → chunk-DFHFPZQD.mjs} +8 -8
  4. package/dist/{chunk-CZUP2N4J.mjs → chunk-FFNESJSG.mjs} +2 -2
  5. package/dist/{chunk-QQ4FBIGN.mjs → chunk-GBXUOB6L.mjs} +6 -6
  6. package/dist/chunk-MMVDU6DF.mjs +1 -0
  7. package/dist/{chunk-GIPO7UB2.mjs → chunk-QS7UFQFD.mjs} +4 -4
  8. package/dist/{chunk-H24B7QWO.mjs → chunk-Z6YOBQUJ.mjs} +9 -9
  9. package/dist/components/chat/Chat.mjs +5 -5
  10. package/dist/components/chat/Header.mjs +5 -5
  11. package/dist/components/chat/Modal.mjs +14 -14
  12. package/dist/components/chat/Popup.mjs +15 -15
  13. package/dist/components/chat/Sidebar.mjs +15 -15
  14. package/dist/components/chat/index.mjs +18 -18
  15. package/dist/components/chat/messages/AssistantMessage.mjs +1 -1
  16. package/dist/components/dev-console/console.mjs +3 -3
  17. package/dist/components/dev-console/index.mjs +5 -5
  18. package/dist/components/index.d.ts +0 -3
  19. package/dist/components/index.js +0 -290
  20. package/dist/components/index.js.map +1 -1
  21. package/dist/components/index.mjs +21 -33
  22. package/dist/index.css +19 -1
  23. package/dist/index.css.map +1 -1
  24. package/dist/index.d.ts +0 -3
  25. package/dist/index.js +2 -292
  26. package/dist/index.js.map +1 -1
  27. package/dist/index.mjs +22 -34
  28. package/dist/types/css.js.map +1 -1
  29. package/package.json +4 -4
  30. package/src/components/index.ts +0 -1
  31. package/src/css/colors.css +31 -0
  32. package/src/css/panel.css +1 -1
  33. package/dist/chunk-EJG6RRSX.mjs +0 -138
  34. package/dist/chunk-EJG6RRSX.mjs.map +0 -1
  35. package/dist/chunk-MCO235PS.mjs +0 -164
  36. package/dist/chunk-MCO235PS.mjs.map +0 -1
  37. package/dist/chunk-MWC5OV7Z.mjs +0 -1
  38. package/dist/chunk-N7LTE54T.mjs +0 -1
  39. package/dist/chunk-N7LTE54T.mjs.map +0 -1
  40. package/dist/chunk-UCVCAGU7.mjs +0 -1
  41. package/dist/chunk-UCVCAGU7.mjs.map +0 -1
  42. package/dist/components/crew/DefaultResponseRenderer.d.ts +0 -110
  43. package/dist/components/crew/DefaultResponseRenderer.js +0 -175
  44. package/dist/components/crew/DefaultResponseRenderer.js.map +0 -1
  45. package/dist/components/crew/DefaultResponseRenderer.mjs +0 -10
  46. package/dist/components/crew/DefaultResponseRenderer.mjs.map +0 -1
  47. package/dist/components/crew/DefaultStateRenderer.d.ts +0 -88
  48. package/dist/components/crew/DefaultStateRenderer.js +0 -198
  49. package/dist/components/crew/DefaultStateRenderer.js.map +0 -1
  50. package/dist/components/crew/DefaultStateRenderer.mjs +0 -8
  51. package/dist/components/crew/DefaultStateRenderer.mjs.map +0 -1
  52. package/dist/components/crew/index.d.ts +0 -4
  53. package/dist/components/crew/index.js +0 -335
  54. package/dist/components/crew/index.js.map +0 -1
  55. package/dist/components/crew/index.mjs +0 -16
  56. package/dist/components/crew/index.mjs.map +0 -1
  57. package/dist/components/crew/types.d.ts +0 -340
  58. package/dist/components/crew/types.js +0 -19
  59. package/dist/components/crew/types.js.map +0 -1
  60. package/dist/components/crew/types.mjs +0 -2
  61. package/dist/components/crew/types.mjs.map +0 -1
  62. package/src/components/crew/DefaultResponseRenderer.tsx +0 -298
  63. package/src/components/crew/DefaultStateRenderer.tsx +0 -326
  64. package/src/components/crew/index.ts +0 -3
  65. package/src/components/crew/types.ts +0 -398
  66. /package/dist/{chunk-TFIQA2P5.mjs.map → chunk-6H7IQRIU.mjs.map} +0 -0
  67. /package/dist/{chunk-AIR3MXUU.mjs.map → chunk-DFHFPZQD.mjs.map} +0 -0
  68. /package/dist/{chunk-CZUP2N4J.mjs.map → chunk-FFNESJSG.mjs.map} +0 -0
  69. /package/dist/{chunk-QQ4FBIGN.mjs.map → chunk-GBXUOB6L.mjs.map} +0 -0
  70. /package/dist/{chunk-MWC5OV7Z.mjs.map → chunk-MMVDU6DF.mjs.map} +0 -0
  71. /package/dist/{chunk-GIPO7UB2.mjs.map → chunk-QS7UFQFD.mjs.map} +0 -0
  72. /package/dist/{chunk-H24B7QWO.mjs.map → chunk-Z6YOBQUJ.mjs.map} +0 -0
@@ -84,11 +84,8 @@ __export(components_exports, {
84
84
  CopilotDevConsole: () => CopilotDevConsole,
85
85
  CopilotPopup: () => CopilotPopup,
86
86
  CopilotSidebar: () => CopilotSidebar,
87
- DefaultResponseRenderer: () => DefaultResponseRenderer,
88
- DefaultStateRenderer: () => DefaultStateRenderer,
89
87
  Markdown: () => Markdown,
90
88
  UserMessage: () => UserMessage,
91
- createResponseCache: () => createResponseCache,
92
89
  shouldShowDevConsole: () => shouldShowDevConsole,
93
90
  useChatContext: () => useChatContext
94
91
  });
@@ -2756,290 +2753,6 @@ function CopilotSidebar(props) {
2756
2753
  };
2757
2754
  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: `copilotKitSidebarContentWrapper ${expandedClassName}`, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CopilotModal, __spreadProps(__spreadValues(__spreadValues({}, props), { onSetOpen }), { children: props.children })) });
2758
2755
  }
2759
-
2760
- // src/components/crew/DefaultResponseRenderer.tsx
2761
- var import_react16 = require("react");
2762
- var import_jsx_runtime27 = require("react/jsx-runtime");
2763
- var createResponseCache = () => {
2764
- const responseCache = /* @__PURE__ */ new Map();
2765
- return {
2766
- getResponse: (id) => responseCache.get(id),
2767
- setResponse: (id, response) => responseCache.set(id, response)
2768
- };
2769
- };
2770
- var useResponseCache = createResponseCache();
2771
- var DefaultExpandIcon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
2772
- "svg",
2773
- {
2774
- className,
2775
- width: "12",
2776
- height: "12",
2777
- viewBox: "0 0 24 24",
2778
- fill: "none",
2779
- stroke: "currentColor",
2780
- strokeWidth: "2",
2781
- strokeLinecap: "round",
2782
- strokeLinejoin: "round",
2783
- children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("polyline", { points: "6 9 12 15 18 9" })
2784
- }
2785
- );
2786
- var DefaultCollapseIcon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
2787
- "svg",
2788
- {
2789
- className,
2790
- width: "12",
2791
- height: "12",
2792
- viewBox: "0 0 24 24",
2793
- fill: "none",
2794
- stroke: "currentColor",
2795
- strokeWidth: "2",
2796
- strokeLinecap: "round",
2797
- strokeLinejoin: "round",
2798
- children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("polyline", { points: "18 15 12 9 6 15" })
2799
- }
2800
- );
2801
- var DefaultContentRenderer = ({ content, className }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className, children: content });
2802
- var DefaultFeedbackButton = ({ label, onClick, className }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("button", { onClick, className, children: label });
2803
- var DefaultCompletedFeedback = ({ message, className }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: message }) });
2804
- var DefaultResponseRenderer = ({
2805
- response,
2806
- status,
2807
- onRespond,
2808
- icons,
2809
- labels,
2810
- ContentRenderer = DefaultContentRenderer,
2811
- FeedbackButton = DefaultFeedbackButton,
2812
- CompletedFeedback = DefaultCompletedFeedback,
2813
- className = "copilotkit-response",
2814
- contentClassName = "copilotkit-response-content",
2815
- actionsClassName = "copilotkit-response-actions",
2816
- buttonClassName = "copilotkit-response-button",
2817
- completedFeedbackClassName = "copilotkit-response-completed-feedback"
2818
- }) => {
2819
- const [isExpanded, setIsExpanded] = (0, import_react16.useState)(true);
2820
- const defaultLabels = {
2821
- responseLabel: "Response",
2822
- approveLabel: "Approve",
2823
- rejectLabel: "Reject",
2824
- approvedMessage: "Approved",
2825
- rejectedMessage: "Rejected",
2826
- feedbackSubmittedMessage: "Feedback submitted"
2827
- };
2828
- const mergedLabels = __spreadValues(__spreadValues({}, defaultLabels), labels);
2829
- const renderFeedback = () => {
2830
- if (status === "complete") {
2831
- const cachedResponse = useResponseCache.getResponse(response.id);
2832
- return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
2833
- CompletedFeedback,
2834
- {
2835
- message: (cachedResponse == null ? void 0 : cachedResponse.__feedback__) ? cachedResponse.__feedback__ === mergedLabels.approvedMessage ? mergedLabels.approvedMessage : mergedLabels.rejectedMessage : mergedLabels.feedbackSubmittedMessage,
2836
- className: completedFeedbackClassName
2837
- }
2838
- );
2839
- }
2840
- if (status === "inProgress" || status === "executing") {
2841
- return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
2842
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
2843
- FeedbackButton,
2844
- {
2845
- label: mergedLabels.approveLabel,
2846
- onClick: () => {
2847
- setIsExpanded(false);
2848
- onRespond == null ? void 0 : onRespond(mergedLabels.approveLabel);
2849
- useResponseCache.setResponse(response.id, __spreadProps(__spreadValues({}, response), {
2850
- __feedback__: mergedLabels.approvedMessage
2851
- }));
2852
- },
2853
- className: buttonClassName
2854
- }
2855
- ),
2856
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
2857
- FeedbackButton,
2858
- {
2859
- label: mergedLabels.rejectLabel,
2860
- onClick: () => {
2861
- setIsExpanded(false);
2862
- useResponseCache.setResponse(response.id, __spreadProps(__spreadValues({}, response), {
2863
- __feedback__: mergedLabels.rejectedMessage
2864
- }));
2865
- onRespond == null ? void 0 : onRespond(mergedLabels.rejectLabel);
2866
- },
2867
- className: buttonClassName
2868
- }
2869
- )
2870
- ] });
2871
- }
2872
- return null;
2873
- };
2874
- const ExpandIcon = (icons == null ? void 0 : icons.expand) || DefaultExpandIcon;
2875
- const CollapseIcon = (icons == null ? void 0 : icons.collapse) || DefaultCollapseIcon;
2876
- return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className, children: [
2877
- isExpanded && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ContentRenderer, { content: response.content, className: contentClassName }),
2878
- /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: actionsClassName, children: [
2879
- /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "copilotkit-response-label", children: [
2880
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("button", { onClick: () => setIsExpanded(!isExpanded), className: "copilotkit-toggle-button", children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CollapseIcon, { className: "copilotkit-icon" }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ExpandIcon, { className: "copilotkit-icon" }) }),
2881
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: mergedLabels.responseLabel })
2882
- ] }),
2883
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "copilotkit-response-buttons", children: renderFeedback() })
2884
- ] })
2885
- ] });
2886
- };
2887
-
2888
- // src/components/crew/DefaultStateRenderer.tsx
2889
- var import_react17 = require("react");
2890
- var import_jsx_runtime28 = require("react/jsx-runtime");
2891
- var DefaultExpandIcon2 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
2892
- "svg",
2893
- {
2894
- className,
2895
- width: "16",
2896
- height: "16",
2897
- viewBox: "0 0 24 24",
2898
- fill: "none",
2899
- stroke: "currentColor",
2900
- strokeWidth: "2",
2901
- strokeLinecap: "round",
2902
- strokeLinejoin: "round",
2903
- children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("polyline", { points: "6 9 12 15 18 9" })
2904
- }
2905
- );
2906
- var DefaultCollapseIcon2 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
2907
- "svg",
2908
- {
2909
- className,
2910
- width: "16",
2911
- height: "16",
2912
- viewBox: "0 0 24 24",
2913
- fill: "none",
2914
- stroke: "currentColor",
2915
- strokeWidth: "2",
2916
- strokeLinecap: "round",
2917
- strokeLinejoin: "round",
2918
- children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("polyline", { points: "18 15 12 9 6 15" })
2919
- }
2920
- );
2921
- var DefaultLoaderIcon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
2922
- "svg",
2923
- {
2924
- className: `${className} copilotkit-spinner`,
2925
- width: "16",
2926
- height: "16",
2927
- viewBox: "0 0 24 24",
2928
- fill: "none",
2929
- stroke: "currentColor",
2930
- strokeWidth: "2",
2931
- strokeLinecap: "round",
2932
- strokeLinejoin: "round",
2933
- children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
2934
- }
2935
- );
2936
- var formatContent = (result) => {
2937
- if (result === null || result === void 0)
2938
- return "";
2939
- return typeof result === "string" ? result : JSON.stringify(result, null, 2);
2940
- };
2941
- var DefaultSkeletonLoader = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: className || "copilotkit-skeleton", children: [
2942
- /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "copilotkit-skeleton-header", children: [
2943
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "copilotkit-skeleton-title" }),
2944
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "copilotkit-skeleton-subtitle" })
2945
- ] }),
2946
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "copilotkit-skeleton-content" })
2947
- ] });
2948
- var DefaultStateItemRenderer = ({
2949
- item,
2950
- isNewest,
2951
- className
2952
- }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
2953
- "div",
2954
- {
2955
- className: `${className || "copilotkit-state-item"} ${isNewest ? "copilotkit-state-item-newest" : ""}`,
2956
- children: [
2957
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "copilotkit-state-item-header", children: "tool" in item ? item.tool : item.name }),
2958
- "thought" in item && item.thought && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "copilotkit-state-item-thought", children: item.thought }),
2959
- "result" in item && item.result !== void 0 && item.result !== null && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "copilotkit-state-item-result", children: formatContent(item.result) }),
2960
- "description" in item && item.description && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "copilotkit-state-item-description", children: item.description })
2961
- ]
2962
- }
2963
- );
2964
- var DefaultStateRenderer = ({
2965
- state,
2966
- status,
2967
- StateItemRenderer = DefaultStateItemRenderer,
2968
- SkeletonLoader = DefaultSkeletonLoader,
2969
- labels,
2970
- icons,
2971
- className = "copilotkit-state",
2972
- contentClassName = "copilotkit-state-content",
2973
- itemClassName = "copilotkit-state-item",
2974
- maxHeight = "250px",
2975
- defaultCollapsed = true
2976
- }) => {
2977
- const [isCollapsed, setIsCollapsed] = (0, import_react17.useState)(defaultCollapsed);
2978
- const contentRef = (0, import_react17.useRef)(null);
2979
- const prevItemsLengthRef = (0, import_react17.useRef)(0);
2980
- const [newestItemId, setNewestItemId] = (0, import_react17.useState)(null);
2981
- const defaultLabels = {
2982
- inProgressLabel: "Analyzing",
2983
- completeLabel: "Analyzed",
2984
- emptyLabel: "No activity"
2985
- };
2986
- const mergedLabels = __spreadValues(__spreadValues({}, defaultLabels), labels);
2987
- const ExpandIcon = (icons == null ? void 0 : icons.expand) || DefaultExpandIcon2;
2988
- const CollapseIcon = (icons == null ? void 0 : icons.collapse) || DefaultCollapseIcon2;
2989
- const items = (0, import_react17.useMemo)(() => {
2990
- var _a;
2991
- return state ? [...((_a = state.steps) == null ? void 0 : _a.filter((s) => s.tool)) || [], ...state.tasks || []].sort(
2992
- (a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()
2993
- ) : [];
2994
- }, [state]);
2995
- const isThinking = status === "inProgress" && items.length === 0;
2996
- (0, import_react17.useEffect)(() => {
2997
- if (!state)
2998
- return;
2999
- if (items.length > prevItemsLengthRef.current) {
3000
- if (items.length > 0) {
3001
- const newest = items[items.length - 1];
3002
- setNewestItemId(newest.id);
3003
- setTimeout(() => {
3004
- setNewestItemId(null);
3005
- }, 1500);
3006
- }
3007
- if (contentRef.current && !isCollapsed) {
3008
- contentRef.current.scrollTop = contentRef.current.scrollHeight;
3009
- }
3010
- }
3011
- prevItemsLengthRef.current = items.length;
3012
- }, [items, isCollapsed, state]);
3013
- if (!state) {
3014
- return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DefaultLoaderIcon, { className: "copilotkit-loader" }) });
3015
- }
3016
- if (isCollapsed && items.length === 0 && !isThinking)
3017
- return null;
3018
- return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className, children: [
3019
- /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "copilotkit-state-header", onClick: () => setIsCollapsed(!isCollapsed), children: [
3020
- isCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ExpandIcon, { className: "copilotkit-icon" }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CollapseIcon, { className: "copilotkit-icon" }),
3021
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "copilotkit-state-label", children: status === "inProgress" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "copilotkit-state-label-loading", children: mergedLabels.inProgressLabel }) : mergedLabels.completeLabel })
3022
- ] }),
3023
- !isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { ref: contentRef, className: contentClassName, style: { maxHeight }, children: items.length > 0 ? items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
3024
- StateItemRenderer,
3025
- {
3026
- item,
3027
- isNewest: item.id === newestItemId,
3028
- className: itemClassName
3029
- },
3030
- item.id
3031
- )) : isThinking ? (
3032
- // Show skeleton loader while thinking
3033
- /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
3034
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SkeletonLoader, {}),
3035
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SkeletonLoader, {})
3036
- ] })
3037
- ) : (
3038
- // Empty state
3039
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "copilotkit-state-empty", children: mergedLabels.emptyLabel })
3040
- ) })
3041
- ] });
3042
- };
3043
2756
  // Annotate the CommonJS export names for ESM import in node:
3044
2757
  0 && (module.exports = {
3045
2758
  AssistantMessage,
@@ -3047,11 +2760,8 @@ var DefaultStateRenderer = ({
3047
2760
  CopilotDevConsole,
3048
2761
  CopilotPopup,
3049
2762
  CopilotSidebar,
3050
- DefaultResponseRenderer,
3051
- DefaultStateRenderer,
3052
2763
  Markdown,
3053
2764
  UserMessage,
3054
- createResponseCache,
3055
2765
  shouldShowDevConsole,
3056
2766
  useChatContext
3057
2767
  });