@copilotkit/react-ui 1.51.3-next.5 → 1.51.3-next.7
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.
- package/CHANGELOG.md +17 -0
- package/dist/{chunk-O4PPO3K3.mjs → chunk-7CMZ7YPQ.mjs} +2 -2
- package/dist/{chunk-PKSW6ZMQ.mjs → chunk-F2CDEOFX.mjs} +2 -2
- package/dist/{chunk-XOBQLKUU.mjs → chunk-JZ3RFQQ6.mjs} +13 -3
- package/dist/chunk-JZ3RFQQ6.mjs.map +1 -0
- package/dist/{chunk-XEZ5ODJS.mjs → chunk-LBR23XXF.mjs} +2 -2
- package/dist/{chunk-SLM2AOHF.mjs → chunk-LYYDXL2G.mjs} +9 -5
- package/dist/chunk-LYYDXL2G.mjs.map +1 -0
- package/dist/{chunk-HKZL4P3F.mjs → chunk-OHGUQZJT.mjs} +4 -4
- package/dist/{chunk-YQOESY4Y.mjs → chunk-PD36EMOZ.mjs} +4 -4
- package/dist/{chunk-4S4ZEKE6.mjs → chunk-RKQM2AE5.mjs} +2 -2
- package/dist/{chunk-UH5GQ7QF.mjs → chunk-WNX755OE.mjs} +2 -2
- package/dist/components/chat/Chat.js +74 -60
- package/dist/components/chat/Chat.js.map +1 -1
- package/dist/components/chat/Chat.mjs +6 -6
- package/dist/components/chat/Markdown.d.ts +2 -4
- package/dist/components/chat/Markdown.js +12 -2
- package/dist/components/chat/Markdown.js.map +1 -1
- package/dist/components/chat/Markdown.mjs +1 -1
- package/dist/components/chat/Messages.js +34 -20
- package/dist/components/chat/Messages.js.map +1 -1
- package/dist/components/chat/Messages.mjs +5 -5
- package/dist/components/chat/Modal.js +81 -67
- package/dist/components/chat/Modal.js.map +1 -1
- package/dist/components/chat/Modal.mjs +7 -7
- package/dist/components/chat/Popup.js +81 -67
- package/dist/components/chat/Popup.js.map +1 -1
- package/dist/components/chat/Popup.mjs +8 -8
- package/dist/components/chat/Sidebar.js +83 -69
- package/dist/components/chat/Sidebar.js.map +1 -1
- package/dist/components/chat/Sidebar.mjs +8 -8
- package/dist/components/chat/index.d.ts +1 -1
- package/dist/components/chat/index.js +83 -69
- package/dist/components/chat/index.js.map +1 -1
- package/dist/components/chat/index.mjs +9 -9
- package/dist/components/chat/messages/AssistantMessage.js +21 -7
- package/dist/components/chat/messages/AssistantMessage.js.map +1 -1
- package/dist/components/chat/messages/AssistantMessage.mjs +2 -2
- package/dist/components/chat/messages/ErrorMessage.js +14 -4
- package/dist/components/chat/messages/ErrorMessage.js.map +1 -1
- package/dist/components/chat/messages/ErrorMessage.mjs +1 -1
- package/dist/components/chat/messages/LegacyRenderMessage.js +23 -9
- package/dist/components/chat/messages/LegacyRenderMessage.js.map +1 -1
- package/dist/components/chat/messages/LegacyRenderMessage.mjs +4 -4
- package/dist/components/chat/messages/RenderMessage.js +23 -9
- package/dist/components/chat/messages/RenderMessage.js.map +1 -1
- package/dist/components/chat/messages/RenderMessage.mjs +3 -3
- package/dist/components/index.d.ts +1 -1
- package/dist/components/index.js +83 -69
- package/dist/components/index.js.map +1 -1
- package/dist/components/index.mjs +9 -9
- package/dist/index.d.ts +1 -1
- package/dist/index.js +83 -69
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +9 -9
- package/package.json +8 -5
- package/src/components/chat/Markdown.tsx +17 -8
- package/src/components/chat/messages/AssistantMessage.tsx +6 -2
- package/dist/chunk-SLM2AOHF.mjs.map +0 -1
- package/dist/chunk-XOBQLKUU.mjs.map +0 -1
- /package/dist/{chunk-O4PPO3K3.mjs.map → chunk-7CMZ7YPQ.mjs.map} +0 -0
- /package/dist/{chunk-PKSW6ZMQ.mjs.map → chunk-F2CDEOFX.mjs.map} +0 -0
- /package/dist/{chunk-XEZ5ODJS.mjs.map → chunk-LBR23XXF.mjs.map} +0 -0
- /package/dist/{chunk-HKZL4P3F.mjs.map → chunk-OHGUQZJT.mjs.map} +0 -0
- /package/dist/{chunk-YQOESY4Y.mjs.map → chunk-PD36EMOZ.mjs.map} +0 -0
- /package/dist/{chunk-4S4ZEKE6.mjs.map → chunk-RKQM2AE5.mjs.map} +0 -0
- /package/dist/{chunk-UH5GQ7QF.mjs.map → chunk-WNX755OE.mjs.map} +0 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
CopilotModal
|
|
3
|
-
} from "../../chunk-
|
|
3
|
+
} from "../../chunk-OHGUQZJT.mjs";
|
|
4
4
|
import "../../chunk-C3GSYRC3.mjs";
|
|
5
5
|
import "../../chunk-GDSZGYCE.mjs";
|
|
6
6
|
import "../../chunk-V7W6IM2V.mjs";
|
|
@@ -11,20 +11,20 @@ import "../../chunk-KXE2JCUH.mjs";
|
|
|
11
11
|
import "../../chunk-NRA3CFEE.mjs";
|
|
12
12
|
import "../../chunk-BH6PCAAL.mjs";
|
|
13
13
|
import "../../chunk-UFN2VWSR.mjs";
|
|
14
|
-
import "../../chunk-
|
|
14
|
+
import "../../chunk-PD36EMOZ.mjs";
|
|
15
15
|
import "../../chunk-VHKHX7GV.mjs";
|
|
16
16
|
import "../../chunk-6TWQUA2Q.mjs";
|
|
17
17
|
import "../../chunk-PLHTVHUW.mjs";
|
|
18
18
|
import "../../chunk-3W6J75HS.mjs";
|
|
19
19
|
import "../../chunk-ELGRNEAO.mjs";
|
|
20
20
|
import "../../chunk-QIOJXTIQ.mjs";
|
|
21
|
-
import "../../chunk-
|
|
22
|
-
import "../../chunk-
|
|
23
|
-
import "../../chunk-
|
|
24
|
-
import "../../chunk-
|
|
21
|
+
import "../../chunk-WNX755OE.mjs";
|
|
22
|
+
import "../../chunk-F2CDEOFX.mjs";
|
|
23
|
+
import "../../chunk-LBR23XXF.mjs";
|
|
24
|
+
import "../../chunk-LYYDXL2G.mjs";
|
|
25
25
|
import "../../chunk-DBKRAOH7.mjs";
|
|
26
26
|
import "../../chunk-RYUCX3ZK.mjs";
|
|
27
|
-
import "../../chunk-
|
|
27
|
+
import "../../chunk-JZ3RFQQ6.mjs";
|
|
28
28
|
import "../../chunk-IK2BPURM.mjs";
|
|
29
29
|
import "../../chunk-IEMQ2SQW.mjs";
|
|
30
30
|
import "../../chunk-XWG3L6QC.mjs";
|
|
@@ -84,7 +84,7 @@ __export(Popup_exports, {
|
|
|
84
84
|
module.exports = __toCommonJS(Popup_exports);
|
|
85
85
|
|
|
86
86
|
// src/components/chat/Modal.tsx
|
|
87
|
-
var
|
|
87
|
+
var import_react16 = __toESM(require("react"));
|
|
88
88
|
|
|
89
89
|
// src/components/chat/ChatContext.tsx
|
|
90
90
|
var import_react = __toESM(require("react"));
|
|
@@ -1025,7 +1025,7 @@ var Header = ({}) => {
|
|
|
1025
1025
|
};
|
|
1026
1026
|
|
|
1027
1027
|
// src/components/chat/Messages.tsx
|
|
1028
|
-
var
|
|
1028
|
+
var import_react10 = require("react");
|
|
1029
1029
|
var import_react_core5 = require("@copilotkit/react-core");
|
|
1030
1030
|
|
|
1031
1031
|
// src/components/chat/messages/UserMessage.tsx
|
|
@@ -1057,7 +1057,8 @@ var UserMessage = (props) => {
|
|
|
1057
1057
|
};
|
|
1058
1058
|
|
|
1059
1059
|
// src/components/chat/Markdown.tsx
|
|
1060
|
-
var
|
|
1060
|
+
var import_react7 = require("react");
|
|
1061
|
+
var import_react_markdown = __toESM(require("react-markdown"));
|
|
1061
1062
|
|
|
1062
1063
|
// src/components/chat/CodeBlock.tsx
|
|
1063
1064
|
var import_react6 = require("react");
|
|
@@ -1469,6 +1470,9 @@ var highlightStyle = {
|
|
|
1469
1470
|
};
|
|
1470
1471
|
|
|
1471
1472
|
// src/components/chat/Markdown.tsx
|
|
1473
|
+
var import_remark_gfm = __toESM(require("remark-gfm"));
|
|
1474
|
+
var import_remark_math = __toESM(require("remark-math"));
|
|
1475
|
+
var import_rehype_raw = __toESM(require("rehype-raw"));
|
|
1472
1476
|
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
1473
1477
|
var defaultComponents = {
|
|
1474
1478
|
a(_a) {
|
|
@@ -1562,21 +1566,27 @@ var defaultComponents = {
|
|
|
1562
1566
|
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
|
|
1563
1567
|
}
|
|
1564
1568
|
};
|
|
1569
|
+
var MemoizedReactMarkdown = (0, import_react7.memo)(
|
|
1570
|
+
import_react_markdown.default,
|
|
1571
|
+
(prevProps, nextProps) => prevProps.children === nextProps.children && prevProps.components === nextProps.components
|
|
1572
|
+
);
|
|
1565
1573
|
var Markdown = ({ content, components }) => {
|
|
1566
1574
|
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "copilotKitMarkdown", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1567
|
-
|
|
1575
|
+
MemoizedReactMarkdown,
|
|
1568
1576
|
{
|
|
1569
1577
|
components: __spreadValues(__spreadValues({}, defaultComponents), components),
|
|
1578
|
+
remarkPlugins: [import_remark_gfm.default, [import_remark_math.default, { singleDollarTextMath: false }]],
|
|
1579
|
+
rehypePlugins: [import_rehype_raw.default],
|
|
1570
1580
|
children: content
|
|
1571
1581
|
}
|
|
1572
1582
|
) });
|
|
1573
1583
|
};
|
|
1574
1584
|
|
|
1575
1585
|
// src/components/chat/messages/AssistantMessage.tsx
|
|
1576
|
-
var
|
|
1586
|
+
var import_react8 = require("react");
|
|
1577
1587
|
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
1578
1588
|
var AssistantMessage = (props) => {
|
|
1579
|
-
var _a;
|
|
1589
|
+
var _a, _b, _c;
|
|
1580
1590
|
const { icons, labels } = useChatContext();
|
|
1581
1591
|
const {
|
|
1582
1592
|
message,
|
|
@@ -1589,7 +1599,7 @@ var AssistantMessage = (props) => {
|
|
|
1589
1599
|
feedback,
|
|
1590
1600
|
markdownTagRenderers
|
|
1591
1601
|
} = props;
|
|
1592
|
-
const [copied, setCopied] = (0,
|
|
1602
|
+
const [copied, setCopied] = (0, import_react8.useState)(false);
|
|
1593
1603
|
const handleCopy = () => {
|
|
1594
1604
|
const content2 = (message == null ? void 0 : message.content) || "";
|
|
1595
1605
|
if (content2 && onCopy) {
|
|
@@ -1619,8 +1629,12 @@ var AssistantMessage = (props) => {
|
|
|
1619
1629
|
};
|
|
1620
1630
|
const LoadingIcon = () => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: icons.activityIcon });
|
|
1621
1631
|
const content = (message == null ? void 0 : message.content) || "";
|
|
1622
|
-
const subComponent = (_a = message == null ? void 0 : message.generativeUI) == null ? void 0 : _a.call(message);
|
|
1632
|
+
const subComponent = (_b = (_a = message == null ? void 0 : message.generativeUI) == null ? void 0 : _a.call(message)) != null ? _b : props.subComponent;
|
|
1633
|
+
const subComponentPosition = (_c = message == null ? void 0 : message.generativeUIPosition) != null ? _c : "after";
|
|
1634
|
+
const renderBefore = subComponent && subComponentPosition === "before";
|
|
1635
|
+
const renderAfter = subComponent && subComponentPosition !== "before";
|
|
1623
1636
|
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
|
|
1637
|
+
renderBefore ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { marginBottom: "0.5rem" }, children: subComponent }) : null,
|
|
1624
1638
|
content && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "copilotKitMessage copilotKitAssistantMessage", children: [
|
|
1625
1639
|
content && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Markdown, { content, components: markdownTagRenderers }),
|
|
1626
1640
|
content && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
@@ -1672,16 +1686,16 @@ var AssistantMessage = (props) => {
|
|
|
1672
1686
|
}
|
|
1673
1687
|
)
|
|
1674
1688
|
] }),
|
|
1675
|
-
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { marginBottom: "0.5rem" }, children: subComponent }),
|
|
1689
|
+
renderAfter ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { marginBottom: "0.5rem" }, children: subComponent }) : null,
|
|
1676
1690
|
isLoading && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(LoadingIcon, {})
|
|
1677
1691
|
] });
|
|
1678
1692
|
};
|
|
1679
1693
|
|
|
1680
1694
|
// src/components/chat/messages/ImageRenderer.tsx
|
|
1681
|
-
var
|
|
1695
|
+
var import_react9 = require("react");
|
|
1682
1696
|
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
1683
1697
|
var ImageRenderer = ({ image, content, className = "" }) => {
|
|
1684
|
-
const [imageError, setImageError] = (0,
|
|
1698
|
+
const [imageError, setImageError] = (0, import_react9.useState)(false);
|
|
1685
1699
|
const imageSrc = `data:image/${image.format};base64,${image.bytes}`;
|
|
1686
1700
|
const altText = content || "User uploaded image";
|
|
1687
1701
|
const handleImageError = () => {
|
|
@@ -1924,18 +1938,18 @@ var Messages = ({
|
|
|
1924
1938
|
var _a;
|
|
1925
1939
|
const { labels, icons } = useChatContext();
|
|
1926
1940
|
const { messages: visibleMessages, interrupt } = (0, import_react_core5.useCopilotChatInternal)();
|
|
1927
|
-
const initialMessages = (0,
|
|
1941
|
+
const initialMessages = (0, import_react10.useMemo)(() => makeInitialMessages(labels.initial), [labels.initial]);
|
|
1928
1942
|
const messages = [...initialMessages, ...visibleMessages];
|
|
1929
1943
|
const { messagesContainerRef, messagesEndRef } = useScrollToBottom(messages);
|
|
1930
1944
|
const hasLegacyProps = !!(RenderTextMessage || RenderActionExecutionMessage || RenderAgentStateMessage || RenderResultMessage || RenderImageMessage);
|
|
1931
|
-
(0,
|
|
1945
|
+
(0, import_react10.useEffect)(() => {
|
|
1932
1946
|
if (hasLegacyProps) {
|
|
1933
1947
|
console.warn(
|
|
1934
1948
|
"[CopilotKit] Legacy message render props (RenderTextMessage, RenderActionExecutionMessage, etc.) are deprecated. Please use the unified 'RenderMessage' prop instead. See migration guide: https://docs.copilotkit.ai/migration/render-message"
|
|
1935
1949
|
);
|
|
1936
1950
|
}
|
|
1937
1951
|
}, [hasLegacyProps]);
|
|
1938
|
-
const legacyProps = (0,
|
|
1952
|
+
const legacyProps = (0, import_react10.useMemo)(
|
|
1939
1953
|
() => ({
|
|
1940
1954
|
RenderTextMessage,
|
|
1941
1955
|
RenderActionExecutionMessage,
|
|
@@ -2006,10 +2020,10 @@ function makeInitialMessages(initial) {
|
|
|
2006
2020
|
];
|
|
2007
2021
|
}
|
|
2008
2022
|
function useScrollToBottom(messages) {
|
|
2009
|
-
const messagesEndRef = (0,
|
|
2010
|
-
const messagesContainerRef = (0,
|
|
2011
|
-
const isProgrammaticScrollRef = (0,
|
|
2012
|
-
const isUserScrollUpRef = (0,
|
|
2023
|
+
const messagesEndRef = (0, import_react10.useRef)(null);
|
|
2024
|
+
const messagesContainerRef = (0, import_react10.useRef)(null);
|
|
2025
|
+
const isProgrammaticScrollRef = (0, import_react10.useRef)(false);
|
|
2026
|
+
const isUserScrollUpRef = (0, import_react10.useRef)(false);
|
|
2013
2027
|
const scrollToBottom = () => {
|
|
2014
2028
|
if (messagesContainerRef.current && messagesEndRef.current) {
|
|
2015
2029
|
isProgrammaticScrollRef.current = true;
|
|
@@ -2026,7 +2040,7 @@ function useScrollToBottom(messages) {
|
|
|
2026
2040
|
isUserScrollUpRef.current = scrollTop + clientHeight < scrollHeight;
|
|
2027
2041
|
}
|
|
2028
2042
|
};
|
|
2029
|
-
(0,
|
|
2043
|
+
(0, import_react10.useEffect)(() => {
|
|
2030
2044
|
const container = messagesContainerRef.current;
|
|
2031
2045
|
if (container) {
|
|
2032
2046
|
container.addEventListener("scroll", handleScroll);
|
|
@@ -2037,7 +2051,7 @@ function useScrollToBottom(messages) {
|
|
|
2037
2051
|
}
|
|
2038
2052
|
};
|
|
2039
2053
|
}, []);
|
|
2040
|
-
(0,
|
|
2054
|
+
(0, import_react10.useEffect)(() => {
|
|
2041
2055
|
const container = messagesContainerRef.current;
|
|
2042
2056
|
if (!container) {
|
|
2043
2057
|
return;
|
|
@@ -2056,7 +2070,7 @@ function useScrollToBottom(messages) {
|
|
|
2056
2070
|
mutationObserver.disconnect();
|
|
2057
2071
|
};
|
|
2058
2072
|
}, []);
|
|
2059
|
-
(0,
|
|
2073
|
+
(0, import_react10.useEffect)(() => {
|
|
2060
2074
|
isUserScrollUpRef.current = false;
|
|
2061
2075
|
scrollToBottom();
|
|
2062
2076
|
}, [messages.filter((m) => m.role === "user").length]);
|
|
@@ -2064,12 +2078,12 @@ function useScrollToBottom(messages) {
|
|
|
2064
2078
|
}
|
|
2065
2079
|
|
|
2066
2080
|
// src/components/chat/Input.tsx
|
|
2067
|
-
var
|
|
2081
|
+
var import_react14 = require("react");
|
|
2068
2082
|
|
|
2069
2083
|
// src/components/chat/Textarea.tsx
|
|
2070
|
-
var
|
|
2084
|
+
var import_react11 = require("react");
|
|
2071
2085
|
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
2072
|
-
var AutoResizingTextarea = (0,
|
|
2086
|
+
var AutoResizingTextarea = (0, import_react11.forwardRef)(
|
|
2073
2087
|
({
|
|
2074
2088
|
maxRows = 1,
|
|
2075
2089
|
placeholder,
|
|
@@ -2080,10 +2094,10 @@ var AutoResizingTextarea = (0, import_react10.forwardRef)(
|
|
|
2080
2094
|
onCompositionEnd,
|
|
2081
2095
|
autoFocus
|
|
2082
2096
|
}, ref) => {
|
|
2083
|
-
const internalTextareaRef = (0,
|
|
2084
|
-
const [maxHeight, setMaxHeight] = (0,
|
|
2085
|
-
(0,
|
|
2086
|
-
(0,
|
|
2097
|
+
const internalTextareaRef = (0, import_react11.useRef)(null);
|
|
2098
|
+
const [maxHeight, setMaxHeight] = (0, import_react11.useState)(0);
|
|
2099
|
+
(0, import_react11.useImperativeHandle)(ref, () => internalTextareaRef.current);
|
|
2100
|
+
(0, import_react11.useEffect)(() => {
|
|
2087
2101
|
const calculateMaxHeight = () => {
|
|
2088
2102
|
const textarea = internalTextareaRef.current;
|
|
2089
2103
|
if (textarea) {
|
|
@@ -2097,7 +2111,7 @@ var AutoResizingTextarea = (0, import_react10.forwardRef)(
|
|
|
2097
2111
|
};
|
|
2098
2112
|
calculateMaxHeight();
|
|
2099
2113
|
}, [maxRows]);
|
|
2100
|
-
(0,
|
|
2114
|
+
(0, import_react11.useEffect)(() => {
|
|
2101
2115
|
const textarea = internalTextareaRef.current;
|
|
2102
2116
|
if (textarea) {
|
|
2103
2117
|
textarea.style.height = "auto";
|
|
@@ -2129,7 +2143,7 @@ var Textarea_default = AutoResizingTextarea;
|
|
|
2129
2143
|
// src/hooks/use-push-to-talk.tsx
|
|
2130
2144
|
var import_react_core6 = require("@copilotkit/react-core");
|
|
2131
2145
|
var import_runtime_client_gql2 = require("@copilotkit/runtime-client-gql");
|
|
2132
|
-
var
|
|
2146
|
+
var import_react12 = require("react");
|
|
2133
2147
|
var startRecording = (mediaStreamRef, mediaRecorderRef, audioContextRef, recordedChunks, onStop) => __async(void 0, null, function* () {
|
|
2134
2148
|
if (!mediaStreamRef.current || !audioContextRef.current) {
|
|
2135
2149
|
mediaStreamRef.current = yield navigator.mediaDevices.getUserMedia({ audio: true });
|
|
@@ -2178,16 +2192,16 @@ var usePushToTalk = ({
|
|
|
2178
2192
|
sendFunction,
|
|
2179
2193
|
inProgress
|
|
2180
2194
|
}) => {
|
|
2181
|
-
const [pushToTalkState, setPushToTalkState] = (0,
|
|
2182
|
-
const mediaStreamRef = (0,
|
|
2183
|
-
const audioContextRef = (0,
|
|
2184
|
-
const mediaRecorderRef = (0,
|
|
2185
|
-
const recordedChunks = (0,
|
|
2195
|
+
const [pushToTalkState, setPushToTalkState] = (0, import_react12.useState)("idle");
|
|
2196
|
+
const mediaStreamRef = (0, import_react12.useRef)(null);
|
|
2197
|
+
const audioContextRef = (0, import_react12.useRef)(null);
|
|
2198
|
+
const mediaRecorderRef = (0, import_react12.useRef)(null);
|
|
2199
|
+
const recordedChunks = (0, import_react12.useRef)([]);
|
|
2186
2200
|
const generalContext = (0, import_react_core6.useCopilotContext)();
|
|
2187
2201
|
const messagesContext = (0, import_react_core6.useCopilotMessagesContext)();
|
|
2188
2202
|
const context = __spreadValues(__spreadValues({}, generalContext), messagesContext);
|
|
2189
|
-
const [startReadingFromMessageId, setStartReadingFromMessageId] = (0,
|
|
2190
|
-
(0,
|
|
2203
|
+
const [startReadingFromMessageId, setStartReadingFromMessageId] = (0, import_react12.useState)(null);
|
|
2204
|
+
(0, import_react12.useEffect)(() => {
|
|
2191
2205
|
if (pushToTalkState === "recording") {
|
|
2192
2206
|
startRecording(
|
|
2193
2207
|
mediaStreamRef,
|
|
@@ -2215,7 +2229,7 @@ var usePushToTalk = ({
|
|
|
2215
2229
|
stopRecording(mediaRecorderRef);
|
|
2216
2230
|
};
|
|
2217
2231
|
}, [pushToTalkState]);
|
|
2218
|
-
(0,
|
|
2232
|
+
(0, import_react12.useEffect)(() => {
|
|
2219
2233
|
if (inProgress === false && startReadingFromMessageId) {
|
|
2220
2234
|
const lastMessageIndex = context.messages.findIndex(
|
|
2221
2235
|
(message) => message.id === startReadingFromMessageId
|
|
@@ -2234,7 +2248,7 @@ var usePushToTalk = ({
|
|
|
2234
2248
|
var import_react_core7 = require("@copilotkit/react-core");
|
|
2235
2249
|
|
|
2236
2250
|
// src/components/chat/PoweredByTag.tsx
|
|
2237
|
-
var
|
|
2251
|
+
var import_react13 = require("react");
|
|
2238
2252
|
|
|
2239
2253
|
// src/hooks/use-dark-mode.ts
|
|
2240
2254
|
var useDarkMode = () => {
|
|
@@ -2246,9 +2260,9 @@ var useDarkMode = () => {
|
|
|
2246
2260
|
// src/components/chat/PoweredByTag.tsx
|
|
2247
2261
|
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
2248
2262
|
function PoweredByTag({ showPoweredBy = true }) {
|
|
2249
|
-
const [mounted, setMounted] = (0,
|
|
2263
|
+
const [mounted, setMounted] = (0, import_react13.useState)(false);
|
|
2250
2264
|
const isDark = useDarkMode();
|
|
2251
|
-
(0,
|
|
2265
|
+
(0, import_react13.useEffect)(() => {
|
|
2252
2266
|
setMounted(true);
|
|
2253
2267
|
}, []);
|
|
2254
2268
|
if (!showPoweredBy) {
|
|
@@ -2282,8 +2296,8 @@ var Input = ({
|
|
|
2282
2296
|
const copilotContext = (0, import_react_core7.useCopilotContext)();
|
|
2283
2297
|
const showPoweredBy = !((_a = copilotContext.copilotApiConfig) == null ? void 0 : _a.publicApiKey);
|
|
2284
2298
|
const pushToTalkConfigured = copilotContext.copilotApiConfig.textToSpeechUrl !== void 0 && copilotContext.copilotApiConfig.transcribeAudioUrl !== void 0;
|
|
2285
|
-
const textareaRef = (0,
|
|
2286
|
-
const [isComposing, setIsComposing] = (0,
|
|
2299
|
+
const textareaRef = (0, import_react14.useRef)(null);
|
|
2300
|
+
const [isComposing, setIsComposing] = (0, import_react14.useState)(false);
|
|
2287
2301
|
const handleDivClick = (event) => {
|
|
2288
2302
|
var _a2;
|
|
2289
2303
|
const target = event.target;
|
|
@@ -2293,7 +2307,7 @@ var Input = ({
|
|
|
2293
2307
|
return;
|
|
2294
2308
|
(_a2 = textareaRef.current) == null ? void 0 : _a2.focus();
|
|
2295
2309
|
};
|
|
2296
|
-
const [text, setText] = (0,
|
|
2310
|
+
const [text, setText] = (0, import_react14.useState)("");
|
|
2297
2311
|
const send = () => {
|
|
2298
2312
|
var _a2;
|
|
2299
2313
|
if (inProgress)
|
|
@@ -2307,17 +2321,17 @@ var Input = ({
|
|
|
2307
2321
|
inProgress
|
|
2308
2322
|
});
|
|
2309
2323
|
const isInProgress = inProgress || pushToTalkState === "transcribing";
|
|
2310
|
-
const { buttonIcon, buttonAlt } = (0,
|
|
2324
|
+
const { buttonIcon, buttonAlt } = (0, import_react14.useMemo)(() => {
|
|
2311
2325
|
if (!chatReady)
|
|
2312
2326
|
return { buttonIcon: context.icons.spinnerIcon, buttonAlt: "Loading" };
|
|
2313
2327
|
return isInProgress && !hideStopButton && chatReady ? { buttonIcon: context.icons.stopIcon, buttonAlt: "Stop" } : { buttonIcon: context.icons.sendIcon, buttonAlt: "Send" };
|
|
2314
2328
|
}, [isInProgress, chatReady, hideStopButton, context.icons.stopIcon, context.icons.sendIcon]);
|
|
2315
2329
|
const showPushToTalk = pushToTalkConfigured && (pushToTalkState === "idle" || pushToTalkState === "recording") && !inProgress;
|
|
2316
2330
|
const { interrupt } = (0, import_react_core7.useCopilotChatInternal)();
|
|
2317
|
-
const canSend = (0,
|
|
2331
|
+
const canSend = (0, import_react14.useMemo)(() => {
|
|
2318
2332
|
return !isInProgress && text.trim().length > 0 && pushToTalkState === "idle" && !interrupt;
|
|
2319
2333
|
}, [interrupt, isInProgress, text, pushToTalkState]);
|
|
2320
|
-
const canStop = (0,
|
|
2334
|
+
const canStop = (0, import_react14.useMemo)(() => {
|
|
2321
2335
|
return isInProgress && !hideStopButton;
|
|
2322
2336
|
}, [isInProgress, hideStopButton]);
|
|
2323
2337
|
const sendDisabled = !canSend && !canStop;
|
|
@@ -2374,7 +2388,7 @@ var Input = ({
|
|
|
2374
2388
|
};
|
|
2375
2389
|
|
|
2376
2390
|
// src/components/chat/Chat.tsx
|
|
2377
|
-
var
|
|
2391
|
+
var import_react15 = __toESM(require("react"));
|
|
2378
2392
|
var import_react_core9 = require("@copilotkit/react-core");
|
|
2379
2393
|
var import_shared3 = require("@copilotkit/shared");
|
|
2380
2394
|
|
|
@@ -2551,13 +2565,13 @@ function CopilotChat({
|
|
|
2551
2565
|
removeInternalErrorHandler
|
|
2552
2566
|
} = (0, import_react_core9.useCopilotContext)();
|
|
2553
2567
|
const { publicApiKey, chatApiEndpoint } = copilotApiConfig;
|
|
2554
|
-
const [selectedImages, setSelectedImages] = (0,
|
|
2555
|
-
const [chatError, setChatError] = (0,
|
|
2556
|
-
const [messageFeedback, setMessageFeedback] = (0,
|
|
2568
|
+
const [selectedImages, setSelectedImages] = (0, import_react15.useState)([]);
|
|
2569
|
+
const [chatError, setChatError] = (0, import_react15.useState)(null);
|
|
2570
|
+
const [messageFeedback, setMessageFeedback] = (0, import_react15.useState)(
|
|
2557
2571
|
{}
|
|
2558
2572
|
);
|
|
2559
|
-
const fileInputRef = (0,
|
|
2560
|
-
const triggerObservabilityHook = (0,
|
|
2573
|
+
const fileInputRef = (0, import_react15.useRef)(null);
|
|
2574
|
+
const triggerObservabilityHook = (0, import_react15.useCallback)(
|
|
2561
2575
|
(hookName, ...args) => {
|
|
2562
2576
|
if (publicApiKey && (observabilityHooks == null ? void 0 : observabilityHooks[hookName])) {
|
|
2563
2577
|
observabilityHooks[hookName](...args);
|
|
@@ -2576,7 +2590,7 @@ function CopilotChat({
|
|
|
2576
2590
|
},
|
|
2577
2591
|
[publicApiKey, observabilityHooks, setBannerError]
|
|
2578
2592
|
);
|
|
2579
|
-
const triggerChatError = (0,
|
|
2593
|
+
const triggerChatError = (0, import_react15.useCallback)(
|
|
2580
2594
|
(error, operation, originalError) => {
|
|
2581
2595
|
const errorMessage = (error == null ? void 0 : error.message) || (error == null ? void 0 : error.toString()) || "An error occurred";
|
|
2582
2596
|
setChatError({
|
|
@@ -2622,7 +2636,7 @@ function CopilotChat({
|
|
|
2622
2636
|
},
|
|
2623
2637
|
[publicApiKey, chatApiEndpoint, observabilityHooks, setBannerError]
|
|
2624
2638
|
);
|
|
2625
|
-
(0,
|
|
2639
|
+
(0, import_react15.useEffect)(() => {
|
|
2626
2640
|
const id = "chat-component";
|
|
2627
2641
|
setInternalErrorHandler({
|
|
2628
2642
|
[id]: (error) => {
|
|
@@ -2635,7 +2649,7 @@ function CopilotChat({
|
|
|
2635
2649
|
removeInternalErrorHandler == null ? void 0 : removeInternalErrorHandler(id);
|
|
2636
2650
|
};
|
|
2637
2651
|
}, [triggerChatError, setInternalErrorHandler, removeInternalErrorHandler]);
|
|
2638
|
-
(0,
|
|
2652
|
+
(0, import_react15.useEffect)(() => {
|
|
2639
2653
|
if (!imageUploadsEnabled)
|
|
2640
2654
|
return;
|
|
2641
2655
|
const handlePaste = (e) => __async(this, null, function* () {
|
|
@@ -2681,7 +2695,7 @@ function CopilotChat({
|
|
|
2681
2695
|
document.addEventListener("paste", handlePaste);
|
|
2682
2696
|
return () => document.removeEventListener("paste", handlePaste);
|
|
2683
2697
|
}, [imageUploadsEnabled, triggerChatError]);
|
|
2684
|
-
(0,
|
|
2698
|
+
(0, import_react15.useEffect)(() => {
|
|
2685
2699
|
if (!(additionalInstructions == null ? void 0 : additionalInstructions.length)) {
|
|
2686
2700
|
setChatInstructions(instructions || "");
|
|
2687
2701
|
return;
|
|
@@ -2709,8 +2723,8 @@ function CopilotChat({
|
|
|
2709
2723
|
onStopGeneration,
|
|
2710
2724
|
onReloadMessages
|
|
2711
2725
|
});
|
|
2712
|
-
const prevIsLoading = (0,
|
|
2713
|
-
(0,
|
|
2726
|
+
const prevIsLoading = (0, import_react15.useRef)(isLoading);
|
|
2727
|
+
(0, import_react15.useEffect)(() => {
|
|
2714
2728
|
if (prevIsLoading.current !== isLoading) {
|
|
2715
2729
|
if (isLoading) {
|
|
2716
2730
|
triggerObservabilityHook("onChatStarted");
|
|
@@ -2733,7 +2747,7 @@ function CopilotChat({
|
|
|
2733
2747
|
role: "user"
|
|
2734
2748
|
});
|
|
2735
2749
|
};
|
|
2736
|
-
const chatContext =
|
|
2750
|
+
const chatContext = import_react15.default.useContext(ChatContext);
|
|
2737
2751
|
const isVisible = chatContext ? chatContext.open : true;
|
|
2738
2752
|
const handleRegenerate = (messageId) => {
|
|
2739
2753
|
if (onRegenerate) {
|
|
@@ -2877,7 +2891,7 @@ function WrappedCopilotChat({
|
|
|
2877
2891
|
labels,
|
|
2878
2892
|
className
|
|
2879
2893
|
}) {
|
|
2880
|
-
const chatContext =
|
|
2894
|
+
const chatContext = import_react15.default.useContext(ChatContext);
|
|
2881
2895
|
if (!chatContext) {
|
|
2882
2896
|
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChatContextProvider, { icons, labels, open: true, setOpen: () => {
|
|
2883
2897
|
}, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: `copilotKitChat ${className != null ? className : ""}`, children }) });
|
|
@@ -2915,7 +2929,7 @@ var CopilotModalInner = (_a) => {
|
|
|
2915
2929
|
]);
|
|
2916
2930
|
const { copilotApiConfig, setBannerError } = (0, import_react_core10.useCopilotContext)();
|
|
2917
2931
|
const { publicApiKey } = copilotApiConfig;
|
|
2918
|
-
const triggerObservabilityHook = (0,
|
|
2932
|
+
const triggerObservabilityHook = (0, import_react16.useCallback)(
|
|
2919
2933
|
(hookName, ...args) => {
|
|
2920
2934
|
if (publicApiKey && (observabilityHooks == null ? void 0 : observabilityHooks[hookName])) {
|
|
2921
2935
|
observabilityHooks[hookName](...args);
|
|
@@ -2935,8 +2949,8 @@ var CopilotModalInner = (_a) => {
|
|
|
2935
2949
|
[publicApiKey, observabilityHooks, setBannerError]
|
|
2936
2950
|
);
|
|
2937
2951
|
const { open } = useChatContext();
|
|
2938
|
-
const prevOpen = (0,
|
|
2939
|
-
(0,
|
|
2952
|
+
const prevOpen = (0, import_react16.useRef)(open);
|
|
2953
|
+
(0, import_react16.useEffect)(() => {
|
|
2940
2954
|
if (prevOpen.current !== open) {
|
|
2941
2955
|
onSetOpen == null ? void 0 : onSetOpen(open);
|
|
2942
2956
|
if (open) {
|
|
@@ -2947,8 +2961,8 @@ var CopilotModalInner = (_a) => {
|
|
|
2947
2961
|
prevOpen.current = open;
|
|
2948
2962
|
}
|
|
2949
2963
|
}, [open, onSetOpen, triggerObservabilityHook]);
|
|
2950
|
-
const memoizedHeader = (0,
|
|
2951
|
-
const memoizedChildren = (0,
|
|
2964
|
+
const memoizedHeader = (0, import_react16.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Header2, {}), [Header2]);
|
|
2965
|
+
const memoizedChildren = (0, import_react16.useMemo)(() => children, [children]);
|
|
2952
2966
|
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
|
|
2953
2967
|
memoizedChildren,
|
|
2954
2968
|
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className, children: [
|
|
@@ -3028,7 +3042,7 @@ var CopilotModal = (_a) => {
|
|
|
3028
3042
|
"children",
|
|
3029
3043
|
"observabilityHooks"
|
|
3030
3044
|
]);
|
|
3031
|
-
const [openState, setOpenState] =
|
|
3045
|
+
const [openState, setOpenState] = import_react16.default.useState(defaultOpen);
|
|
3032
3046
|
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ChatContextProvider, { icons, labels, open: openState, setOpen: setOpenState, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
3033
3047
|
CopilotModalInner,
|
|
3034
3048
|
__spreadProps(__spreadValues({
|