@copilotkitnext/react 0.0.19-threads-and-attachements.1 → 0.0.20
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/dist/index.d.mts +19 -196
- package/dist/index.d.ts +19 -196
- package/dist/index.js +220 -868
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +228 -874
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +8 -8
package/dist/index.mjs
CHANGED
|
@@ -8,14 +8,14 @@ import {
|
|
|
8
8
|
useLayoutEffect,
|
|
9
9
|
forwardRef as forwardRef2,
|
|
10
10
|
useImperativeHandle as useImperativeHandle2,
|
|
11
|
-
useCallback
|
|
11
|
+
useCallback,
|
|
12
12
|
useMemo as useMemo2
|
|
13
13
|
} from "react";
|
|
14
14
|
import { twMerge as twMerge3 } from "tailwind-merge";
|
|
15
15
|
import { Plus, Mic, ArrowUp, X, Check, Square } from "lucide-react";
|
|
16
16
|
|
|
17
17
|
// src/providers/CopilotChatConfigurationProvider.tsx
|
|
18
|
-
import { createContext, useContext, useMemo, useState
|
|
18
|
+
import { createContext, useContext, useMemo, useState } from "react";
|
|
19
19
|
import { DEFAULT_AGENT_ID, randomUUID } from "@copilotkitnext/shared";
|
|
20
20
|
import { jsx } from "react/jsx-runtime";
|
|
21
21
|
var CopilotChatDefaultLabels = {
|
|
@@ -51,21 +51,15 @@ var CopilotChatConfigurationProvider = ({ children, labels, agentId, threadId, i
|
|
|
51
51
|
[labels, parentConfig?.labels]
|
|
52
52
|
);
|
|
53
53
|
const resolvedAgentId = agentId ?? parentConfig?.agentId ?? DEFAULT_AGENT_ID;
|
|
54
|
-
const
|
|
55
|
-
if (threadId)
|
|
56
|
-
|
|
54
|
+
const resolvedThreadId = useMemo(() => {
|
|
55
|
+
if (threadId) {
|
|
56
|
+
return threadId;
|
|
57
|
+
}
|
|
58
|
+
if (parentConfig?.threadId) {
|
|
59
|
+
return parentConfig.threadId;
|
|
60
|
+
}
|
|
57
61
|
return randomUUID();
|
|
58
|
-
});
|
|
59
|
-
const resolvedThreadId = threadId ?? internalThreadId;
|
|
60
|
-
const handleSetThreadId = useCallback(
|
|
61
|
-
(newThreadId) => {
|
|
62
|
-
if (threadId === void 0) {
|
|
63
|
-
setInternalThreadId(newThreadId);
|
|
64
|
-
}
|
|
65
|
-
},
|
|
66
|
-
[threadId]
|
|
67
|
-
);
|
|
68
|
-
const resolvedSetThreadId = parentConfig?.setThreadId ?? handleSetThreadId;
|
|
62
|
+
}, [threadId, parentConfig?.threadId]);
|
|
69
63
|
const resolvedDefaultOpen = isModalDefaultOpen ?? parentConfig?.isModalDefaultOpen ?? true;
|
|
70
64
|
const [internalModalOpen, setInternalModalOpen] = useState(
|
|
71
65
|
parentConfig?.isModalOpen ?? resolvedDefaultOpen
|
|
@@ -77,7 +71,6 @@ var CopilotChatConfigurationProvider = ({ children, labels, agentId, threadId, i
|
|
|
77
71
|
labels: mergedLabels,
|
|
78
72
|
agentId: resolvedAgentId,
|
|
79
73
|
threadId: resolvedThreadId,
|
|
80
|
-
setThreadId: resolvedSetThreadId,
|
|
81
74
|
isModalOpen: resolvedIsModalOpen,
|
|
82
75
|
setModalOpen: resolvedSetModalOpen,
|
|
83
76
|
isModalDefaultOpen: resolvedDefaultOpen
|
|
@@ -86,7 +79,6 @@ var CopilotChatConfigurationProvider = ({ children, labels, agentId, threadId, i
|
|
|
86
79
|
mergedLabels,
|
|
87
80
|
resolvedAgentId,
|
|
88
81
|
resolvedThreadId,
|
|
89
|
-
resolvedSetThreadId,
|
|
90
82
|
resolvedIsModalOpen,
|
|
91
83
|
resolvedSetModalOpen,
|
|
92
84
|
resolvedDefaultOpen
|
|
@@ -672,7 +664,7 @@ function CopilotChatInput({
|
|
|
672
664
|
setCommandQuery(null);
|
|
673
665
|
}
|
|
674
666
|
}, [mode]);
|
|
675
|
-
const updateSlashState =
|
|
667
|
+
const updateSlashState = useCallback(
|
|
676
668
|
(value2) => {
|
|
677
669
|
if (commandItems.length === 0) {
|
|
678
670
|
setCommandQuery((prev) => prev === null ? prev : null);
|
|
@@ -699,7 +691,7 @@ function CopilotChatInput({
|
|
|
699
691
|
onChange?.(nextValue);
|
|
700
692
|
updateSlashState(nextValue);
|
|
701
693
|
};
|
|
702
|
-
const clearInputValue =
|
|
694
|
+
const clearInputValue = useCallback(() => {
|
|
703
695
|
if (!isControlled) {
|
|
704
696
|
setInternalValue("");
|
|
705
697
|
}
|
|
@@ -707,7 +699,7 @@ function CopilotChatInput({
|
|
|
707
699
|
onChange("");
|
|
708
700
|
}
|
|
709
701
|
}, [isControlled, onChange]);
|
|
710
|
-
const runCommand =
|
|
702
|
+
const runCommand = useCallback(
|
|
711
703
|
(item) => {
|
|
712
704
|
clearInputValue();
|
|
713
705
|
item.action?.();
|
|
@@ -795,7 +787,10 @@ function CopilotChatInput({
|
|
|
795
787
|
onChange: handleChange,
|
|
796
788
|
onKeyDown: handleKeyDown,
|
|
797
789
|
autoFocus,
|
|
798
|
-
className: twMerge3(
|
|
790
|
+
className: twMerge3(
|
|
791
|
+
"w-full py-3",
|
|
792
|
+
isExpanded ? "px-5" : "pr-5"
|
|
793
|
+
)
|
|
799
794
|
});
|
|
800
795
|
const isProcessing = mode !== "transcribe" && isRunning;
|
|
801
796
|
const canSend = resolvedValue.trim().length > 0 && !!onSubmitMessage;
|
|
@@ -857,7 +852,7 @@ function CopilotChatInput({
|
|
|
857
852
|
inputRef.current.focus();
|
|
858
853
|
}
|
|
859
854
|
};
|
|
860
|
-
const ensureMeasurements =
|
|
855
|
+
const ensureMeasurements = useCallback(() => {
|
|
861
856
|
const textarea = inputRef.current;
|
|
862
857
|
if (!textarea) {
|
|
863
858
|
return;
|
|
@@ -884,7 +879,7 @@ function CopilotChatInput({
|
|
|
884
879
|
textarea.style.height = previousHeight;
|
|
885
880
|
textarea.style.maxHeight = `${maxHeight}px`;
|
|
886
881
|
}, []);
|
|
887
|
-
const adjustTextareaHeight =
|
|
882
|
+
const adjustTextareaHeight = useCallback(() => {
|
|
888
883
|
const textarea = inputRef.current;
|
|
889
884
|
if (!textarea) {
|
|
890
885
|
return 0;
|
|
@@ -905,7 +900,7 @@ function CopilotChatInput({
|
|
|
905
900
|
}
|
|
906
901
|
return scrollHeight;
|
|
907
902
|
}, [ensureMeasurements]);
|
|
908
|
-
const updateLayout =
|
|
903
|
+
const updateLayout = useCallback((nextLayout) => {
|
|
909
904
|
setLayout((prev) => {
|
|
910
905
|
if (prev === nextLayout) {
|
|
911
906
|
return prev;
|
|
@@ -914,7 +909,7 @@ function CopilotChatInput({
|
|
|
914
909
|
return nextLayout;
|
|
915
910
|
});
|
|
916
911
|
}, []);
|
|
917
|
-
const evaluateLayout =
|
|
912
|
+
const evaluateLayout = useCallback(() => {
|
|
918
913
|
if (mode !== "input") {
|
|
919
914
|
updateLayout("compact");
|
|
920
915
|
return;
|
|
@@ -1036,10 +1031,10 @@ function CopilotChatInput({
|
|
|
1036
1031
|
if (!slashMenuVisible || slashHighlightIndex < 0) {
|
|
1037
1032
|
return;
|
|
1038
1033
|
}
|
|
1039
|
-
const active = slashMenuRef.current?.querySelector(
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
}
|
|
1034
|
+
const active = slashMenuRef.current?.querySelector(
|
|
1035
|
+
`[data-slash-index="${slashHighlightIndex}"]`
|
|
1036
|
+
);
|
|
1037
|
+
active?.scrollIntoView({ block: "nearest" });
|
|
1043
1038
|
}, [slashMenuVisible, slashHighlightIndex]);
|
|
1044
1039
|
const slashMenu = slashMenuVisible ? /* @__PURE__ */ jsx6(
|
|
1045
1040
|
"div",
|
|
@@ -1110,7 +1105,11 @@ function CopilotChatInput({
|
|
|
1110
1105
|
"div",
|
|
1111
1106
|
{
|
|
1112
1107
|
ref: addButtonContainerRef,
|
|
1113
|
-
className: twMerge3(
|
|
1108
|
+
className: twMerge3(
|
|
1109
|
+
"flex items-center",
|
|
1110
|
+
isExpanded ? "row-start-2" : "row-start-1",
|
|
1111
|
+
"col-start-1"
|
|
1112
|
+
),
|
|
1114
1113
|
children: BoundAddMenuButton
|
|
1115
1114
|
}
|
|
1116
1115
|
),
|
|
@@ -1238,7 +1237,7 @@ function CopilotChatInput({
|
|
|
1238
1237
|
}
|
|
1239
1238
|
return items;
|
|
1240
1239
|
}, [onAddFile, toolsMenu, labels.chatInputToolbarAddButtonLabel]);
|
|
1241
|
-
const renderMenuItems =
|
|
1240
|
+
const renderMenuItems = useCallback(
|
|
1242
1241
|
(items) => items.map((item, index) => {
|
|
1243
1242
|
if (item === "-") {
|
|
1244
1243
|
return /* @__PURE__ */ jsx6(DropdownMenuSeparator, {}, `separator-${index}`);
|
|
@@ -1287,9 +1286,7 @@ function CopilotChatInput({
|
|
|
1287
1286
|
if (!textarea) return;
|
|
1288
1287
|
const handleFocus = () => {
|
|
1289
1288
|
setTimeout(() => {
|
|
1290
|
-
|
|
1291
|
-
textarea.scrollIntoView({ behavior: "smooth", block: "nearest" });
|
|
1292
|
-
}
|
|
1289
|
+
textarea.scrollIntoView({ behavior: "smooth", block: "nearest" });
|
|
1293
1290
|
}, 300);
|
|
1294
1291
|
};
|
|
1295
1292
|
textarea.addEventListener("focus", handleFocus);
|
|
@@ -1331,7 +1328,7 @@ CopilotChatInput.AddMenuButton.displayName = "CopilotChatInput.AddMenuButton";
|
|
|
1331
1328
|
var CopilotChatInput_default = CopilotChatInput;
|
|
1332
1329
|
|
|
1333
1330
|
// src/components/chat/CopilotChatAssistantMessage.tsx
|
|
1334
|
-
import { useState as
|
|
1331
|
+
import { useState as useState7 } from "react";
|
|
1335
1332
|
import {
|
|
1336
1333
|
Copy,
|
|
1337
1334
|
Check as Check2,
|
|
@@ -1345,7 +1342,7 @@ import "katex/dist/katex.min.css";
|
|
|
1345
1342
|
import { Streamdown } from "streamdown";
|
|
1346
1343
|
|
|
1347
1344
|
// src/hooks/use-render-tool-call.tsx
|
|
1348
|
-
import { useCallback as
|
|
1345
|
+
import { useCallback as useCallback2, useEffect as useEffect5, useState as useState4, useSyncExternalStore } from "react";
|
|
1349
1346
|
import { ToolCallStatus } from "@copilotkitnext/core";
|
|
1350
1347
|
|
|
1351
1348
|
// src/providers/CopilotKitProvider.tsx
|
|
@@ -1356,8 +1353,7 @@ import {
|
|
|
1356
1353
|
useEffect as useEffect4,
|
|
1357
1354
|
useReducer,
|
|
1358
1355
|
useRef as useRef4,
|
|
1359
|
-
useState as useState3
|
|
1360
|
-
useCallback as useCallback3
|
|
1356
|
+
useState as useState3
|
|
1361
1357
|
} from "react";
|
|
1362
1358
|
import { z } from "zod";
|
|
1363
1359
|
|
|
@@ -1404,15 +1400,16 @@ var CopilotKitCoreReact = class extends CopilotKitCore {
|
|
|
1404
1400
|
// src/components/CopilotKitInspector.tsx
|
|
1405
1401
|
import * as React4 from "react";
|
|
1406
1402
|
import { createComponent } from "@lit-labs/react";
|
|
1407
|
-
import
|
|
1403
|
+
import {
|
|
1404
|
+
WEB_INSPECTOR_TAG,
|
|
1405
|
+
WebInspectorElement,
|
|
1406
|
+
defineWebInspector
|
|
1407
|
+
} from "@copilotkitnext/web-inspector";
|
|
1408
1408
|
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
1409
|
-
|
|
1410
|
-
var defineWebInspector2 = WebInspectorModule.defineWebInspector;
|
|
1411
|
-
var WebInspectorElementClass = WebInspectorModule.WebInspectorElement;
|
|
1412
|
-
defineWebInspector2();
|
|
1409
|
+
defineWebInspector();
|
|
1413
1410
|
var CopilotKitInspectorBase = createComponent({
|
|
1414
|
-
tagName:
|
|
1415
|
-
elementClass:
|
|
1411
|
+
tagName: WEB_INSPECTOR_TAG,
|
|
1412
|
+
elementClass: WebInspectorElement,
|
|
1416
1413
|
react: React4
|
|
1417
1414
|
});
|
|
1418
1415
|
var CopilotKitInspector = React4.forwardRef(
|
|
@@ -1438,10 +1435,7 @@ CopilotKitInspector.displayName = "CopilotKitInspector";
|
|
|
1438
1435
|
// src/providers/CopilotKitProvider.tsx
|
|
1439
1436
|
import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
1440
1437
|
var CopilotKitContext = createContext2({
|
|
1441
|
-
copilotkit: null
|
|
1442
|
-
setResourceId: () => {
|
|
1443
|
-
throw new Error("useCopilotKit must be used within CopilotKitProvider");
|
|
1444
|
-
}
|
|
1438
|
+
copilotkit: null
|
|
1445
1439
|
});
|
|
1446
1440
|
function useStableArrayProp(prop, warningMessage, isMeaningfulChange) {
|
|
1447
1441
|
const empty = useMemo3(() => [], []);
|
|
@@ -1459,7 +1453,6 @@ var CopilotKitProvider = ({
|
|
|
1459
1453
|
runtimeUrl,
|
|
1460
1454
|
headers = {},
|
|
1461
1455
|
properties = {},
|
|
1462
|
-
resourceId,
|
|
1463
1456
|
agents__unsafe_dev_only: agents = {},
|
|
1464
1457
|
renderToolCalls,
|
|
1465
1458
|
renderCustomMessages,
|
|
@@ -1567,7 +1560,6 @@ var CopilotKitProvider = ({
|
|
|
1567
1560
|
runtimeUrl,
|
|
1568
1561
|
headers,
|
|
1569
1562
|
properties,
|
|
1570
|
-
resourceId,
|
|
1571
1563
|
agents__unsafe_dev_only: agents,
|
|
1572
1564
|
tools: allTools,
|
|
1573
1565
|
renderToolCalls: allRenderToolCalls,
|
|
@@ -1590,36 +1582,13 @@ var CopilotKitProvider = ({
|
|
|
1590
1582
|
copilotkit.setRuntimeUrl(runtimeUrl);
|
|
1591
1583
|
copilotkit.setHeaders(headers);
|
|
1592
1584
|
copilotkit.setProperties(properties);
|
|
1593
|
-
copilotkit.setResourceId(resourceId);
|
|
1594
1585
|
copilotkit.setAgents__unsafe_dev_only(agents);
|
|
1595
|
-
}, [runtimeUrl, headers, properties,
|
|
1596
|
-
useEffect4(() => {
|
|
1597
|
-
if (typeof window === "undefined") {
|
|
1598
|
-
return;
|
|
1599
|
-
}
|
|
1600
|
-
const isProduction = process.env.NODE_ENV === "production";
|
|
1601
|
-
if (isProduction && !resourceId) {
|
|
1602
|
-
console.error(
|
|
1603
|
-
"CopilotKit Security Warning: No resourceId set in production.\nAll threads will be globally accessible. Set the resourceId prop:\n<CopilotKitProvider resourceId={userId}>\nLearn more: https://docs.copilotkit.ai/security/resource-scoping"
|
|
1604
|
-
);
|
|
1605
|
-
} else if (!isProduction && !resourceId) {
|
|
1606
|
-
console.warn(
|
|
1607
|
-
"CopilotKit: No resourceId set. All threads are globally accessible.\nThis is fine for development, but add resourceId for production:\n<CopilotKitProvider resourceId={userId}>"
|
|
1608
|
-
);
|
|
1609
|
-
}
|
|
1610
|
-
}, [resourceId]);
|
|
1611
|
-
const setResourceId = useCallback3(
|
|
1612
|
-
(newResourceId) => {
|
|
1613
|
-
copilotkit.setResourceId(newResourceId);
|
|
1614
|
-
},
|
|
1615
|
-
[copilotkit]
|
|
1616
|
-
);
|
|
1586
|
+
}, [runtimeUrl, headers, properties, agents]);
|
|
1617
1587
|
return /* @__PURE__ */ jsxs4(
|
|
1618
1588
|
CopilotKitContext.Provider,
|
|
1619
1589
|
{
|
|
1620
1590
|
value: {
|
|
1621
|
-
copilotkit
|
|
1622
|
-
setResourceId
|
|
1591
|
+
copilotkit
|
|
1623
1592
|
},
|
|
1624
1593
|
children: [
|
|
1625
1594
|
children,
|
|
@@ -1638,9 +1607,6 @@ var useCopilotKit = () => {
|
|
|
1638
1607
|
const unsubscribe = context.copilotkit.subscribe({
|
|
1639
1608
|
onRuntimeConnectionStatusChanged: () => {
|
|
1640
1609
|
forceUpdate();
|
|
1641
|
-
},
|
|
1642
|
-
onResourceIdChanged: () => {
|
|
1643
|
-
forceUpdate();
|
|
1644
1610
|
}
|
|
1645
1611
|
});
|
|
1646
1612
|
return () => {
|
|
@@ -1689,7 +1655,7 @@ function useRenderToolCall() {
|
|
|
1689
1655
|
});
|
|
1690
1656
|
return () => unsubscribe();
|
|
1691
1657
|
}, [copilotkit]);
|
|
1692
|
-
const renderToolCall =
|
|
1658
|
+
const renderToolCall = useCallback2(
|
|
1693
1659
|
({
|
|
1694
1660
|
toolCall,
|
|
1695
1661
|
toolMessage
|
|
@@ -1769,38 +1735,33 @@ function useRenderCustomMessages() {
|
|
|
1769
1735
|
if (!agent) {
|
|
1770
1736
|
throw new Error("Agent not found");
|
|
1771
1737
|
}
|
|
1772
|
-
const messagesIdsInRun =
|
|
1738
|
+
const messagesIdsInRun = agent.messages.filter((msg) => copilotkit.getRunIdForMessage(agentId, threadId, msg.id) === runId).map((msg) => msg.id);
|
|
1773
1739
|
const messageIndex = agent.messages.findIndex((msg) => msg.id === message.id) ?? 0;
|
|
1774
|
-
const messageIndexInRun = Math.
|
|
1740
|
+
const messageIndexInRun = Math.min(messagesIdsInRun.indexOf(message.id), 0);
|
|
1775
1741
|
const numberOfMessagesInRun = messagesIdsInRun.length;
|
|
1776
|
-
const stateSnapshot =
|
|
1742
|
+
const stateSnapshot = copilotkit.getStateByRun(agentId, threadId, runId);
|
|
1777
1743
|
let result = null;
|
|
1778
1744
|
for (const renderer of customMessageRenderers) {
|
|
1779
1745
|
if (!renderer.render) {
|
|
1780
1746
|
continue;
|
|
1781
1747
|
}
|
|
1782
|
-
|
|
1783
|
-
|
|
1784
|
-
|
|
1785
|
-
|
|
1786
|
-
|
|
1787
|
-
|
|
1788
|
-
|
|
1789
|
-
|
|
1790
|
-
|
|
1791
|
-
|
|
1792
|
-
|
|
1793
|
-
|
|
1794
|
-
|
|
1795
|
-
|
|
1796
|
-
|
|
1797
|
-
|
|
1798
|
-
|
|
1799
|
-
break;
|
|
1800
|
-
}
|
|
1801
|
-
} catch (error) {
|
|
1802
|
-
console.error("Error rendering custom message:", error);
|
|
1803
|
-
continue;
|
|
1748
|
+
const Component = renderer.render;
|
|
1749
|
+
result = /* @__PURE__ */ jsx10(
|
|
1750
|
+
Component,
|
|
1751
|
+
{
|
|
1752
|
+
message,
|
|
1753
|
+
position,
|
|
1754
|
+
runId,
|
|
1755
|
+
messageIndex,
|
|
1756
|
+
messageIndexInRun,
|
|
1757
|
+
numberOfMessagesInRun,
|
|
1758
|
+
agentId,
|
|
1759
|
+
stateSnapshot
|
|
1760
|
+
},
|
|
1761
|
+
`${runId}-${message.id}-${position}`
|
|
1762
|
+
);
|
|
1763
|
+
if (result) {
|
|
1764
|
+
break;
|
|
1804
1765
|
}
|
|
1805
1766
|
}
|
|
1806
1767
|
return result;
|
|
@@ -1843,7 +1804,7 @@ function useFrontendTool(tool) {
|
|
|
1843
1804
|
}
|
|
1844
1805
|
|
|
1845
1806
|
// src/hooks/use-human-in-the-loop.tsx
|
|
1846
|
-
import { useState as useState5, useCallback as
|
|
1807
|
+
import { useState as useState5, useCallback as useCallback3, useRef as useRef5, useEffect as useEffect7 } from "react";
|
|
1847
1808
|
import React7 from "react";
|
|
1848
1809
|
function useHumanInTheLoop(tool) {
|
|
1849
1810
|
const { copilotkit } = useCopilotKit();
|
|
@@ -1853,20 +1814,20 @@ function useHumanInTheLoop(tool) {
|
|
|
1853
1814
|
const statusRef = useRef5(status);
|
|
1854
1815
|
const resolvePromiseRef = useRef5(null);
|
|
1855
1816
|
statusRef.current = status;
|
|
1856
|
-
const respond =
|
|
1817
|
+
const respond = useCallback3(async (result) => {
|
|
1857
1818
|
if (resolvePromiseRef.current) {
|
|
1858
1819
|
resolvePromiseRef.current(result);
|
|
1859
1820
|
setStatus("complete");
|
|
1860
1821
|
resolvePromiseRef.current = null;
|
|
1861
1822
|
}
|
|
1862
1823
|
}, []);
|
|
1863
|
-
const handler =
|
|
1824
|
+
const handler = useCallback3(async () => {
|
|
1864
1825
|
return new Promise((resolve) => {
|
|
1865
1826
|
setStatus("executing");
|
|
1866
1827
|
resolvePromiseRef.current = resolve;
|
|
1867
1828
|
});
|
|
1868
1829
|
}, []);
|
|
1869
|
-
const RenderComponent =
|
|
1830
|
+
const RenderComponent = useCallback3(
|
|
1870
1831
|
(props) => {
|
|
1871
1832
|
const ToolComponent = tool.render;
|
|
1872
1833
|
const currentStatus = statusRef.current;
|
|
@@ -1929,10 +1890,18 @@ function useAgent({ agentId, updates } = {}) {
|
|
|
1929
1890
|
agentId ??= DEFAULT_AGENT_ID3;
|
|
1930
1891
|
const { copilotkit } = useCopilotKit();
|
|
1931
1892
|
const [, forceUpdate] = useReducer2((x) => x + 1, 0);
|
|
1932
|
-
const updateFlags = useMemo4(
|
|
1893
|
+
const updateFlags = useMemo4(
|
|
1894
|
+
() => updates ?? ALL_UPDATES,
|
|
1895
|
+
[JSON.stringify(updates)]
|
|
1896
|
+
);
|
|
1933
1897
|
const agent = useMemo4(() => {
|
|
1934
1898
|
return copilotkit.getAgent(agentId);
|
|
1935
|
-
}, [
|
|
1899
|
+
}, [
|
|
1900
|
+
agentId,
|
|
1901
|
+
copilotkit.agents,
|
|
1902
|
+
copilotkit.runtimeConnectionStatus,
|
|
1903
|
+
copilotkit
|
|
1904
|
+
]);
|
|
1936
1905
|
useEffect8(() => {
|
|
1937
1906
|
if (!agent) {
|
|
1938
1907
|
return;
|
|
@@ -1985,7 +1954,7 @@ function useAgentContext(context) {
|
|
|
1985
1954
|
}
|
|
1986
1955
|
|
|
1987
1956
|
// src/hooks/use-suggestions.tsx
|
|
1988
|
-
import { useCallback as
|
|
1957
|
+
import { useCallback as useCallback4, useEffect as useEffect10, useMemo as useMemo5, useState as useState6 } from "react";
|
|
1989
1958
|
import { DEFAULT_AGENT_ID as DEFAULT_AGENT_ID4 } from "@copilotkitnext/shared";
|
|
1990
1959
|
function useSuggestions({ agentId } = {}) {
|
|
1991
1960
|
const { copilotkit } = useCopilotKit();
|
|
@@ -2034,10 +2003,10 @@ function useSuggestions({ agentId } = {}) {
|
|
|
2034
2003
|
unsubscribe();
|
|
2035
2004
|
};
|
|
2036
2005
|
}, [copilotkit, resolvedAgentId]);
|
|
2037
|
-
const reloadSuggestions =
|
|
2006
|
+
const reloadSuggestions = useCallback4(() => {
|
|
2038
2007
|
copilotkit.reloadSuggestions(resolvedAgentId);
|
|
2039
2008
|
}, [copilotkit, resolvedAgentId]);
|
|
2040
|
-
const clearSuggestions =
|
|
2009
|
+
const clearSuggestions = useCallback4(() => {
|
|
2041
2010
|
copilotkit.clearSuggestions(resolvedAgentId);
|
|
2042
2011
|
}, [copilotkit, resolvedAgentId]);
|
|
2043
2012
|
return {
|
|
@@ -2049,7 +2018,7 @@ function useSuggestions({ agentId } = {}) {
|
|
|
2049
2018
|
}
|
|
2050
2019
|
|
|
2051
2020
|
// src/hooks/use-configure-suggestions.tsx
|
|
2052
|
-
import { useCallback as
|
|
2021
|
+
import { useCallback as useCallback5, useEffect as useEffect11, useMemo as useMemo6, useRef as useRef6 } from "react";
|
|
2053
2022
|
import { DEFAULT_AGENT_ID as DEFAULT_AGENT_ID5 } from "@copilotkitnext/shared";
|
|
2054
2023
|
var EMPTY_DEPS = [];
|
|
2055
2024
|
function useConfigureSuggestions(config, options) {
|
|
@@ -2106,7 +2075,7 @@ function useConfigureSuggestions(config, options) {
|
|
|
2106
2075
|
return consumer;
|
|
2107
2076
|
}, [normalizedConfig, resolvedConsumerAgentId]);
|
|
2108
2077
|
const isGlobalConfig = rawConsumerAgentId === void 0 || rawConsumerAgentId === "*";
|
|
2109
|
-
const requestReload =
|
|
2078
|
+
const requestReload = useCallback5(() => {
|
|
2110
2079
|
if (!normalizedConfig) {
|
|
2111
2080
|
return;
|
|
2112
2081
|
}
|
|
@@ -2168,135 +2137,6 @@ function normalizeStaticSuggestions(suggestions) {
|
|
|
2168
2137
|
}));
|
|
2169
2138
|
}
|
|
2170
2139
|
|
|
2171
|
-
// src/hooks/use-threads.tsx
|
|
2172
|
-
import { useCallback as useCallback8, useEffect as useEffect12, useState as useState7 } from "react";
|
|
2173
|
-
function useThreads(options = {}) {
|
|
2174
|
-
const { limit = 50, autoFetch = true } = options;
|
|
2175
|
-
const { copilotkit: core } = useCopilotKit();
|
|
2176
|
-
const chatConfig = useCopilotChatConfiguration();
|
|
2177
|
-
const [threads, setThreads] = useState7([]);
|
|
2178
|
-
const [total, setTotal] = useState7(0);
|
|
2179
|
-
const [isLoading, setIsLoading] = useState7(false);
|
|
2180
|
-
const [error, setError] = useState7(null);
|
|
2181
|
-
const fetchThreads = useCallback8(
|
|
2182
|
-
async (offset = 0) => {
|
|
2183
|
-
if (!core) {
|
|
2184
|
-
return;
|
|
2185
|
-
}
|
|
2186
|
-
setIsLoading(true);
|
|
2187
|
-
setError(null);
|
|
2188
|
-
try {
|
|
2189
|
-
const result = await core.listThreads({ limit, offset });
|
|
2190
|
-
setThreads(result.threads);
|
|
2191
|
-
setTotal(result.total);
|
|
2192
|
-
} catch (err) {
|
|
2193
|
-
const error2 = err instanceof Error ? err : new Error("Failed to fetch threads");
|
|
2194
|
-
setError(error2);
|
|
2195
|
-
console.error("Error fetching threads:", error2);
|
|
2196
|
-
} finally {
|
|
2197
|
-
setIsLoading(false);
|
|
2198
|
-
}
|
|
2199
|
-
},
|
|
2200
|
-
[core, limit]
|
|
2201
|
-
);
|
|
2202
|
-
const getThreadMetadata = useCallback8(
|
|
2203
|
-
async (threadId) => {
|
|
2204
|
-
if (!core) {
|
|
2205
|
-
throw new Error("CopilotKit core not initialized");
|
|
2206
|
-
}
|
|
2207
|
-
try {
|
|
2208
|
-
return await core.getThreadMetadata(threadId);
|
|
2209
|
-
} catch (err) {
|
|
2210
|
-
const error2 = err instanceof Error ? err : new Error("Failed to get thread metadata");
|
|
2211
|
-
console.error("Error getting thread metadata:", error2);
|
|
2212
|
-
throw error2;
|
|
2213
|
-
}
|
|
2214
|
-
},
|
|
2215
|
-
[core]
|
|
2216
|
-
);
|
|
2217
|
-
const refresh = useCallback8(() => fetchThreads(0), [fetchThreads]);
|
|
2218
|
-
const addOptimisticThread = useCallback8((threadId) => {
|
|
2219
|
-
const newThread = {
|
|
2220
|
-
threadId,
|
|
2221
|
-
createdAt: Date.now(),
|
|
2222
|
-
lastActivityAt: Date.now(),
|
|
2223
|
-
isRunning: false,
|
|
2224
|
-
messageCount: 0,
|
|
2225
|
-
firstMessage: void 0
|
|
2226
|
-
};
|
|
2227
|
-
setThreads((prev) => [newThread, ...prev]);
|
|
2228
|
-
setTotal((prev) => prev + 1);
|
|
2229
|
-
}, []);
|
|
2230
|
-
const deleteThread = useCallback8(
|
|
2231
|
-
async (threadId) => {
|
|
2232
|
-
if (!core) {
|
|
2233
|
-
throw new Error("CopilotKit core not initialized");
|
|
2234
|
-
}
|
|
2235
|
-
const originalThreads = threads;
|
|
2236
|
-
const originalTotal = total;
|
|
2237
|
-
const threadIndex = threads.findIndex((t) => t.threadId === threadId);
|
|
2238
|
-
const deletedThread = threadIndex >= 0 ? threads[threadIndex] : null;
|
|
2239
|
-
if (threadIndex >= 0) {
|
|
2240
|
-
setThreads((prev) => prev.filter((t) => t.threadId !== threadId));
|
|
2241
|
-
setTotal((prev) => prev - 1);
|
|
2242
|
-
}
|
|
2243
|
-
try {
|
|
2244
|
-
await core.deleteThread(threadId);
|
|
2245
|
-
await fetchThreads();
|
|
2246
|
-
} catch (err) {
|
|
2247
|
-
if (deletedThread && threadIndex >= 0) {
|
|
2248
|
-
setThreads((prev) => {
|
|
2249
|
-
const newThreads = [...prev];
|
|
2250
|
-
newThreads.splice(threadIndex, 0, deletedThread);
|
|
2251
|
-
return newThreads;
|
|
2252
|
-
});
|
|
2253
|
-
setTotal(originalTotal);
|
|
2254
|
-
} else {
|
|
2255
|
-
setThreads(originalThreads);
|
|
2256
|
-
setTotal(originalTotal);
|
|
2257
|
-
}
|
|
2258
|
-
const error2 = err instanceof Error ? err : new Error("Failed to delete thread");
|
|
2259
|
-
console.error("Error deleting thread:", error2);
|
|
2260
|
-
throw error2;
|
|
2261
|
-
}
|
|
2262
|
-
},
|
|
2263
|
-
[core, fetchThreads, threads, total]
|
|
2264
|
-
);
|
|
2265
|
-
useEffect12(() => {
|
|
2266
|
-
if (autoFetch && core) {
|
|
2267
|
-
void fetchThreads();
|
|
2268
|
-
}
|
|
2269
|
-
}, [autoFetch, core, fetchThreads]);
|
|
2270
|
-
return {
|
|
2271
|
-
threads,
|
|
2272
|
-
total,
|
|
2273
|
-
isLoading,
|
|
2274
|
-
error,
|
|
2275
|
-
fetchThreads,
|
|
2276
|
-
getThreadMetadata,
|
|
2277
|
-
refresh,
|
|
2278
|
-
addOptimisticThread,
|
|
2279
|
-
deleteThread,
|
|
2280
|
-
currentThreadId: chatConfig?.threadId
|
|
2281
|
-
};
|
|
2282
|
-
}
|
|
2283
|
-
|
|
2284
|
-
// src/hooks/use-thread-switcher.tsx
|
|
2285
|
-
import { useCallback as useCallback9 } from "react";
|
|
2286
|
-
function useThreadSwitch() {
|
|
2287
|
-
const config = useCopilotChatConfiguration();
|
|
2288
|
-
const switchThread = useCallback9(
|
|
2289
|
-
(threadId) => {
|
|
2290
|
-
config?.setThreadId?.(threadId);
|
|
2291
|
-
},
|
|
2292
|
-
[config]
|
|
2293
|
-
);
|
|
2294
|
-
return {
|
|
2295
|
-
switchThread,
|
|
2296
|
-
currentThreadId: config?.threadId
|
|
2297
|
-
};
|
|
2298
|
-
}
|
|
2299
|
-
|
|
2300
2140
|
// src/components/chat/CopilotChatToolCallsView.tsx
|
|
2301
2141
|
import React8 from "react";
|
|
2302
2142
|
import { Fragment as Fragment2, jsx as jsx11 } from "react/jsx-runtime";
|
|
@@ -2308,14 +2148,14 @@ function CopilotChatToolCallsView({
|
|
|
2308
2148
|
if (!message.toolCalls || message.toolCalls.length === 0) {
|
|
2309
2149
|
return null;
|
|
2310
2150
|
}
|
|
2311
|
-
return /* @__PURE__ */ jsx11(Fragment2, { children: message.toolCalls.map((toolCall
|
|
2151
|
+
return /* @__PURE__ */ jsx11(Fragment2, { children: message.toolCalls.map((toolCall) => {
|
|
2312
2152
|
const toolMessage = messages.find(
|
|
2313
2153
|
(m) => m.role === "tool" && m.toolCallId === toolCall.id
|
|
2314
2154
|
);
|
|
2315
2155
|
return /* @__PURE__ */ jsx11(React8.Fragment, { children: renderToolCall({
|
|
2316
2156
|
toolCall,
|
|
2317
2157
|
toolMessage
|
|
2318
|
-
}) },
|
|
2158
|
+
}) }, toolCall.id);
|
|
2319
2159
|
}) });
|
|
2320
2160
|
}
|
|
2321
2161
|
var CopilotChatToolCallsView_default = CopilotChatToolCallsView;
|
|
@@ -2490,7 +2330,7 @@ function CopilotChatAssistantMessage({
|
|
|
2490
2330
|
CopilotChatAssistantMessage2.CopyButton = ({ className, title, onClick, ...props }) => {
|
|
2491
2331
|
const config = useCopilotChatConfiguration();
|
|
2492
2332
|
const labels = config?.labels ?? CopilotChatDefaultLabels;
|
|
2493
|
-
const [copied, setCopied] =
|
|
2333
|
+
const [copied, setCopied] = useState7(false);
|
|
2494
2334
|
const handleClick = (event) => {
|
|
2495
2335
|
setCopied(true);
|
|
2496
2336
|
setTimeout(() => setCopied(false), 2e3);
|
|
@@ -2568,14 +2408,9 @@ CopilotChatAssistantMessage.RegenerateButton.displayName = "CopilotChatAssistant
|
|
|
2568
2408
|
var CopilotChatAssistantMessage_default = CopilotChatAssistantMessage;
|
|
2569
2409
|
|
|
2570
2410
|
// src/components/chat/CopilotChatUserMessage.tsx
|
|
2571
|
-
import { useState as
|
|
2411
|
+
import { useState as useState8 } from "react";
|
|
2572
2412
|
import { Copy as Copy2, Check as Check3, Edit, ChevronLeft, ChevronRight } from "lucide-react";
|
|
2573
2413
|
import { twMerge as twMerge5 } from "tailwind-merge";
|
|
2574
|
-
import {
|
|
2575
|
-
getUserMessageBinaryContents,
|
|
2576
|
-
getUserMessageTextContent,
|
|
2577
|
-
normalizeUserMessageContents
|
|
2578
|
-
} from "@copilotkitnext/shared";
|
|
2579
2414
|
import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
2580
2415
|
function CopilotChatUserMessage({
|
|
2581
2416
|
message,
|
|
@@ -2597,8 +2432,7 @@ function CopilotChatUserMessage({
|
|
|
2597
2432
|
messageRenderer,
|
|
2598
2433
|
CopilotChatUserMessage.MessageRenderer,
|
|
2599
2434
|
{
|
|
2600
|
-
content:
|
|
2601
|
-
contents: normalizeUserMessageContents(message.content)
|
|
2435
|
+
content: message.content || ""
|
|
2602
2436
|
}
|
|
2603
2437
|
);
|
|
2604
2438
|
const BoundCopyButton = renderSlot(
|
|
@@ -2606,10 +2440,9 @@ function CopilotChatUserMessage({
|
|
|
2606
2440
|
CopilotChatUserMessage.CopyButton,
|
|
2607
2441
|
{
|
|
2608
2442
|
onClick: async () => {
|
|
2609
|
-
|
|
2610
|
-
if (textContent.trim().length > 0) {
|
|
2443
|
+
if (message.content) {
|
|
2611
2444
|
try {
|
|
2612
|
-
await navigator.clipboard.writeText(
|
|
2445
|
+
await navigator.clipboard.writeText(message.content);
|
|
2613
2446
|
} catch (err) {
|
|
2614
2447
|
console.error("Failed to copy message:", err);
|
|
2615
2448
|
}
|
|
@@ -2678,33 +2511,16 @@ function CopilotChatUserMessage({
|
|
|
2678
2511
|
children
|
|
2679
2512
|
}
|
|
2680
2513
|
);
|
|
2681
|
-
CopilotChatUserMessage2.MessageRenderer = ({
|
|
2682
|
-
|
|
2683
|
-
|
|
2684
|
-
|
|
2685
|
-
|
|
2686
|
-
|
|
2687
|
-
|
|
2688
|
-
|
|
2689
|
-
|
|
2690
|
-
|
|
2691
|
-
className: twMerge5(
|
|
2692
|
-
"prose dark:prose-invert bg-muted relative max-w-[80%] rounded-[18px] px-4 py-1.5 data-[multiline]:py-3 inline-block whitespace-pre-wrap",
|
|
2693
|
-
className
|
|
2694
|
-
),
|
|
2695
|
-
children: [
|
|
2696
|
-
hasText && /* @__PURE__ */ jsx13("span", { children: content }),
|
|
2697
|
-
attachments.length > 0 && /* @__PURE__ */ jsx13("div", { className: twMerge5(hasText ? "mt-3 flex flex-col gap-2" : "flex flex-col gap-2"), children: attachments.map((attachment, index) => /* @__PURE__ */ jsx13(
|
|
2698
|
-
AttachmentPreview,
|
|
2699
|
-
{
|
|
2700
|
-
attachment
|
|
2701
|
-
},
|
|
2702
|
-
attachment.id ?? attachment.url ?? attachment.filename ?? index
|
|
2703
|
-
)) })
|
|
2704
|
-
]
|
|
2705
|
-
}
|
|
2706
|
-
);
|
|
2707
|
-
};
|
|
2514
|
+
CopilotChatUserMessage2.MessageRenderer = ({ content, className }) => /* @__PURE__ */ jsx13(
|
|
2515
|
+
"div",
|
|
2516
|
+
{
|
|
2517
|
+
className: twMerge5(
|
|
2518
|
+
"prose dark:prose-invert bg-muted relative max-w-[80%] rounded-[18px] px-4 py-1.5 data-[multiline]:py-3 inline-block whitespace-pre-wrap",
|
|
2519
|
+
className
|
|
2520
|
+
),
|
|
2521
|
+
children: content
|
|
2522
|
+
}
|
|
2523
|
+
);
|
|
2708
2524
|
CopilotChatUserMessage2.Toolbar = ({
|
|
2709
2525
|
className,
|
|
2710
2526
|
...props
|
|
@@ -2737,7 +2553,7 @@ function CopilotChatUserMessage({
|
|
|
2737
2553
|
CopilotChatUserMessage2.CopyButton = ({ className, title, onClick, ...props }) => {
|
|
2738
2554
|
const config = useCopilotChatConfiguration();
|
|
2739
2555
|
const labels = config?.labels ?? CopilotChatDefaultLabels;
|
|
2740
|
-
const [copied, setCopied] =
|
|
2556
|
+
const [copied, setCopied] = useState8(false);
|
|
2741
2557
|
const handleClick = (event) => {
|
|
2742
2558
|
setCopied(true);
|
|
2743
2559
|
setTimeout(() => setCopied(false), 2e3);
|
|
@@ -2821,47 +2637,6 @@ function CopilotChatUserMessage({
|
|
|
2821
2637
|
] });
|
|
2822
2638
|
};
|
|
2823
2639
|
})(CopilotChatUserMessage || (CopilotChatUserMessage = {}));
|
|
2824
|
-
var AttachmentPreview = ({ attachment }) => {
|
|
2825
|
-
const source = resolveAttachmentSource(attachment);
|
|
2826
|
-
const isImage = attachment.mimeType.startsWith("image/");
|
|
2827
|
-
const label = attachment.filename ?? attachment.id ?? attachment.mimeType;
|
|
2828
|
-
if (isImage && source) {
|
|
2829
|
-
return /* @__PURE__ */ jsxs6("figure", { className: "flex flex-col gap-1", children: [
|
|
2830
|
-
/* @__PURE__ */ jsx13(
|
|
2831
|
-
"img",
|
|
2832
|
-
{
|
|
2833
|
-
src: source,
|
|
2834
|
-
alt: label ?? "User provided image",
|
|
2835
|
-
className: "max-h-64 rounded-lg border border-border object-contain"
|
|
2836
|
-
}
|
|
2837
|
-
),
|
|
2838
|
-
/* @__PURE__ */ jsx13("figcaption", { className: "text-xs text-muted-foreground", children: label ?? "Image attachment" })
|
|
2839
|
-
] });
|
|
2840
|
-
}
|
|
2841
|
-
return /* @__PURE__ */ jsxs6("div", { className: "rounded-md border border-dashed border-border bg-muted/70 px-3 py-2 text-xs text-muted-foreground", children: [
|
|
2842
|
-
label ?? "Attachment",
|
|
2843
|
-
/* @__PURE__ */ jsx13("span", { className: "block text-[10px] uppercase tracking-wide text-muted-foreground/70", children: attachment.mimeType }),
|
|
2844
|
-
source && !isImage ? /* @__PURE__ */ jsx13(
|
|
2845
|
-
"a",
|
|
2846
|
-
{
|
|
2847
|
-
href: source,
|
|
2848
|
-
target: "_blank",
|
|
2849
|
-
rel: "noreferrer",
|
|
2850
|
-
className: "mt-1 block text-xs text-primary underline",
|
|
2851
|
-
children: "Open"
|
|
2852
|
-
}
|
|
2853
|
-
) : null
|
|
2854
|
-
] });
|
|
2855
|
-
};
|
|
2856
|
-
function resolveAttachmentSource(attachment) {
|
|
2857
|
-
if (attachment.url) {
|
|
2858
|
-
return attachment.url;
|
|
2859
|
-
}
|
|
2860
|
-
if (attachment.data) {
|
|
2861
|
-
return `data:${attachment.mimeType};base64,${attachment.data}`;
|
|
2862
|
-
}
|
|
2863
|
-
return null;
|
|
2864
|
-
}
|
|
2865
2640
|
CopilotChatUserMessage.Container.displayName = "CopilotChatUserMessage.Container";
|
|
2866
2641
|
CopilotChatUserMessage.MessageRenderer.displayName = "CopilotChatUserMessage.MessageRenderer";
|
|
2867
2642
|
CopilotChatUserMessage.Toolbar.displayName = "CopilotChatUserMessage.Toolbar";
|
|
@@ -3051,21 +2826,21 @@ CopilotChatMessageView.Cursor = function Cursor({ className, ...props }) {
|
|
|
3051
2826
|
var CopilotChatMessageView_default = CopilotChatMessageView;
|
|
3052
2827
|
|
|
3053
2828
|
// src/components/chat/CopilotChatView.tsx
|
|
3054
|
-
import React11, { useRef as useRef7, useState as
|
|
2829
|
+
import React11, { useRef as useRef7, useState as useState10, useEffect as useEffect13 } from "react";
|
|
3055
2830
|
import { twMerge as twMerge7 } from "tailwind-merge";
|
|
3056
2831
|
import { StickToBottom, useStickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
|
|
3057
2832
|
import { ChevronDown } from "lucide-react";
|
|
3058
2833
|
|
|
3059
2834
|
// src/hooks/use-keyboard-height.tsx
|
|
3060
|
-
import { useState as
|
|
2835
|
+
import { useState as useState9, useEffect as useEffect12 } from "react";
|
|
3061
2836
|
function useKeyboardHeight() {
|
|
3062
|
-
const [keyboardState, setKeyboardState] =
|
|
2837
|
+
const [keyboardState, setKeyboardState] = useState9({
|
|
3063
2838
|
isKeyboardOpen: false,
|
|
3064
2839
|
keyboardHeight: 0,
|
|
3065
2840
|
availableHeight: typeof window !== "undefined" ? window.innerHeight : 0,
|
|
3066
2841
|
viewportHeight: typeof window !== "undefined" ? window.innerHeight : 0
|
|
3067
2842
|
});
|
|
3068
|
-
|
|
2843
|
+
useEffect12(() => {
|
|
3069
2844
|
if (typeof window === "undefined") {
|
|
3070
2845
|
return;
|
|
3071
2846
|
}
|
|
@@ -3109,10 +2884,8 @@ function CopilotChatView({
|
|
|
3109
2884
|
suggestionView,
|
|
3110
2885
|
messages = [],
|
|
3111
2886
|
autoScroll = true,
|
|
3112
|
-
scrollBehavior = "auto",
|
|
3113
2887
|
inputProps,
|
|
3114
2888
|
isRunning = false,
|
|
3115
|
-
isSwitchingThread = false,
|
|
3116
2889
|
suggestions,
|
|
3117
2890
|
suggestionLoadingIndexes,
|
|
3118
2891
|
onSelectSuggestion,
|
|
@@ -3121,11 +2894,11 @@ function CopilotChatView({
|
|
|
3121
2894
|
...props
|
|
3122
2895
|
}) {
|
|
3123
2896
|
const inputContainerRef = useRef7(null);
|
|
3124
|
-
const [inputContainerHeight, setInputContainerHeight] =
|
|
3125
|
-
const [isResizing, setIsResizing] =
|
|
2897
|
+
const [inputContainerHeight, setInputContainerHeight] = useState10(0);
|
|
2898
|
+
const [isResizing, setIsResizing] = useState10(false);
|
|
3126
2899
|
const resizeTimeoutRef = useRef7(null);
|
|
3127
2900
|
const { isKeyboardOpen, keyboardHeight, availableHeight } = useKeyboardHeight();
|
|
3128
|
-
|
|
2901
|
+
useEffect13(() => {
|
|
3129
2902
|
const element = inputContainerRef.current;
|
|
3130
2903
|
if (!element) return;
|
|
3131
2904
|
const resizeObserver = new ResizeObserver((entries) => {
|
|
@@ -3174,8 +2947,6 @@ function CopilotChatView({
|
|
|
3174
2947
|
const BoundFeather = renderSlot(feather, CopilotChatView.Feather, {});
|
|
3175
2948
|
const BoundScrollView = renderSlot(scrollView, CopilotChatView.ScrollView, {
|
|
3176
2949
|
autoScroll,
|
|
3177
|
-
scrollBehavior,
|
|
3178
|
-
isSwitchingThread,
|
|
3179
2950
|
scrollToBottomButton,
|
|
3180
2951
|
inputContainerHeight,
|
|
3181
2952
|
isResizing,
|
|
@@ -3234,21 +3005,19 @@ function CopilotChatView({
|
|
|
3234
3005
|
CopilotChatView2.ScrollView = ({
|
|
3235
3006
|
children,
|
|
3236
3007
|
autoScroll = true,
|
|
3237
|
-
scrollBehavior = "auto",
|
|
3238
|
-
isSwitchingThread = false,
|
|
3239
3008
|
scrollToBottomButton,
|
|
3240
3009
|
inputContainerHeight = 0,
|
|
3241
3010
|
isResizing = false,
|
|
3242
3011
|
className,
|
|
3243
3012
|
...props
|
|
3244
3013
|
}) => {
|
|
3245
|
-
const [hasMounted, setHasMounted] =
|
|
3014
|
+
const [hasMounted, setHasMounted] = useState10(false);
|
|
3246
3015
|
const { scrollRef, contentRef, scrollToBottom } = useStickToBottom();
|
|
3247
|
-
const [showScrollButton, setShowScrollButton] =
|
|
3248
|
-
|
|
3016
|
+
const [showScrollButton, setShowScrollButton] = useState10(false);
|
|
3017
|
+
useEffect13(() => {
|
|
3249
3018
|
setHasMounted(true);
|
|
3250
3019
|
}, []);
|
|
3251
|
-
|
|
3020
|
+
useEffect13(() => {
|
|
3252
3021
|
if (autoScroll) return;
|
|
3253
3022
|
const scrollElement = scrollRef.current;
|
|
3254
3023
|
if (!scrollElement) return;
|
|
@@ -3296,14 +3065,12 @@ function CopilotChatView({
|
|
|
3296
3065
|
}
|
|
3297
3066
|
);
|
|
3298
3067
|
}
|
|
3299
|
-
const initial = scrollBehavior === "auto" ? "instant" : scrollBehavior;
|
|
3300
|
-
const resize = scrollBehavior === "instant" ? "instant" : scrollBehavior === "auto" && isSwitchingThread ? "instant" : "smooth";
|
|
3301
3068
|
return /* @__PURE__ */ jsx17(
|
|
3302
3069
|
StickToBottom,
|
|
3303
3070
|
{
|
|
3304
3071
|
className: cn("h-full max-h-full flex flex-col min-h-0 relative", className),
|
|
3305
|
-
resize,
|
|
3306
|
-
initial,
|
|
3072
|
+
resize: "smooth",
|
|
3073
|
+
initial: "smooth",
|
|
3307
3074
|
...props,
|
|
3308
3075
|
children: /* @__PURE__ */ jsx17(
|
|
3309
3076
|
ScrollContent,
|
|
@@ -3382,94 +3149,19 @@ var CopilotChatView_default = CopilotChatView;
|
|
|
3382
3149
|
|
|
3383
3150
|
// src/components/chat/CopilotChat.tsx
|
|
3384
3151
|
import { DEFAULT_AGENT_ID as DEFAULT_AGENT_ID6, randomUUID as randomUUID2 } from "@copilotkitnext/shared";
|
|
3385
|
-
import { useCallback as
|
|
3152
|
+
import { useCallback as useCallback6, useEffect as useEffect14, useMemo as useMemo7 } from "react";
|
|
3386
3153
|
import { merge } from "ts-deepmerge";
|
|
3154
|
+
import { AGUIConnectNotImplementedError } from "@ag-ui/client";
|
|
3387
3155
|
import { jsx as jsx18 } from "react/jsx-runtime";
|
|
3388
3156
|
function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen, ...props }) {
|
|
3389
3157
|
const existingConfig = useCopilotChatConfiguration();
|
|
3390
|
-
const hasOverrideProps = agentId !== void 0 || threadId !== void 0 || labels !== void 0 || isModalDefaultOpen !== void 0;
|
|
3391
|
-
if (!existingConfig || hasOverrideProps) {
|
|
3392
|
-
return /* @__PURE__ */ jsx18(
|
|
3393
|
-
CopilotChatConfigurationProvider,
|
|
3394
|
-
{
|
|
3395
|
-
agentId,
|
|
3396
|
-
threadId,
|
|
3397
|
-
labels,
|
|
3398
|
-
isModalDefaultOpen,
|
|
3399
|
-
children: /* @__PURE__ */ jsx18(CopilotChat, { chatView, ...props })
|
|
3400
|
-
}
|
|
3401
|
-
);
|
|
3402
|
-
}
|
|
3403
3158
|
const resolvedAgentId = agentId ?? existingConfig?.agentId ?? DEFAULT_AGENT_ID6;
|
|
3404
|
-
const resolvedThreadId =
|
|
3159
|
+
const resolvedThreadId = useMemo7(
|
|
3160
|
+
() => threadId ?? existingConfig?.threadId ?? randomUUID2(),
|
|
3161
|
+
[threadId, existingConfig?.threadId]
|
|
3162
|
+
);
|
|
3405
3163
|
const { agent } = useAgent({ agentId: resolvedAgentId });
|
|
3406
3164
|
const { copilotkit } = useCopilotKit();
|
|
3407
|
-
const [isSwitchingThread, setIsSwitchingThread] = useState12(false);
|
|
3408
|
-
const [threadSwitchError, setThreadSwitchError] = useState12(null);
|
|
3409
|
-
const previousThreadIdRef = useRef8(void 0);
|
|
3410
|
-
const abortControllerRef = useRef8(null);
|
|
3411
|
-
useEffect15(() => {
|
|
3412
|
-
if (!agent || !resolvedThreadId) return;
|
|
3413
|
-
if (previousThreadIdRef.current === resolvedThreadId) return;
|
|
3414
|
-
if (abortControllerRef.current) {
|
|
3415
|
-
abortControllerRef.current.abort();
|
|
3416
|
-
}
|
|
3417
|
-
const abortController = new AbortController();
|
|
3418
|
-
abortControllerRef.current = abortController;
|
|
3419
|
-
const switchThread = async () => {
|
|
3420
|
-
setIsSwitchingThread(true);
|
|
3421
|
-
setThreadSwitchError(null);
|
|
3422
|
-
try {
|
|
3423
|
-
if (abortController.signal.aborted) return;
|
|
3424
|
-
if (previousThreadIdRef.current) {
|
|
3425
|
-
try {
|
|
3426
|
-
await copilotkit.disconnectAgent({ agent });
|
|
3427
|
-
} catch (disconnectErr) {
|
|
3428
|
-
console.warn("Error during disconnect, continuing with thread switch:", disconnectErr);
|
|
3429
|
-
}
|
|
3430
|
-
}
|
|
3431
|
-
if (abortController.signal.aborted) {
|
|
3432
|
-
previousThreadIdRef.current = void 0;
|
|
3433
|
-
return;
|
|
3434
|
-
}
|
|
3435
|
-
agent.messages = [];
|
|
3436
|
-
const subscribers = agent.subscribers || [];
|
|
3437
|
-
subscribers.forEach((subscriber) => {
|
|
3438
|
-
if (subscriber.onMessagesChanged) {
|
|
3439
|
-
subscriber.onMessagesChanged({
|
|
3440
|
-
messages: agent.messages,
|
|
3441
|
-
state: agent.state,
|
|
3442
|
-
agent
|
|
3443
|
-
});
|
|
3444
|
-
}
|
|
3445
|
-
});
|
|
3446
|
-
if (abortController.signal.aborted) {
|
|
3447
|
-
previousThreadIdRef.current = void 0;
|
|
3448
|
-
return;
|
|
3449
|
-
}
|
|
3450
|
-
await copilotkit.connectAgent({ agent, threadId: resolvedThreadId });
|
|
3451
|
-
if (!abortController.signal.aborted) {
|
|
3452
|
-
previousThreadIdRef.current = resolvedThreadId;
|
|
3453
|
-
}
|
|
3454
|
-
} catch (err) {
|
|
3455
|
-
if (abortController.signal.aborted) {
|
|
3456
|
-
previousThreadIdRef.current = void 0;
|
|
3457
|
-
return;
|
|
3458
|
-
}
|
|
3459
|
-
const error = err instanceof Error ? err : new Error(String(err));
|
|
3460
|
-
setThreadSwitchError(error);
|
|
3461
|
-
console.error("Failed to switch thread:", error);
|
|
3462
|
-
} finally {
|
|
3463
|
-
if (!abortController.signal.aborted) {
|
|
3464
|
-
setIsSwitchingThread(false);
|
|
3465
|
-
}
|
|
3466
|
-
}
|
|
3467
|
-
};
|
|
3468
|
-
void switchThread();
|
|
3469
|
-
return () => {
|
|
3470
|
-
abortController.abort();
|
|
3471
|
-
};
|
|
3472
|
-
}, [agent, resolvedThreadId, copilotkit]);
|
|
3473
3165
|
const { suggestions: autoSuggestions } = useSuggestions({ agentId: resolvedAgentId });
|
|
3474
3166
|
const {
|
|
3475
3167
|
inputProps: providedInputProps,
|
|
@@ -3477,7 +3169,25 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
|
|
|
3477
3169
|
suggestionView: providedSuggestionView,
|
|
3478
3170
|
...restProps
|
|
3479
3171
|
} = props;
|
|
3480
|
-
|
|
3172
|
+
useEffect14(() => {
|
|
3173
|
+
const connect = async (agent2) => {
|
|
3174
|
+
try {
|
|
3175
|
+
await copilotkit.connectAgent({ agent: agent2 });
|
|
3176
|
+
} catch (error) {
|
|
3177
|
+
if (error instanceof AGUIConnectNotImplementedError) {
|
|
3178
|
+
} else {
|
|
3179
|
+
throw error;
|
|
3180
|
+
}
|
|
3181
|
+
}
|
|
3182
|
+
};
|
|
3183
|
+
if (agent) {
|
|
3184
|
+
agent.threadId = resolvedThreadId;
|
|
3185
|
+
connect(agent);
|
|
3186
|
+
}
|
|
3187
|
+
return () => {
|
|
3188
|
+
};
|
|
3189
|
+
}, [resolvedThreadId, agent, copilotkit, resolvedAgentId]);
|
|
3190
|
+
const onSubmitInput = useCallback6(
|
|
3481
3191
|
async (value) => {
|
|
3482
3192
|
agent?.addMessage({
|
|
3483
3193
|
id: randomUUID2(),
|
|
@@ -3494,7 +3204,7 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
|
|
|
3494
3204
|
},
|
|
3495
3205
|
[agent, copilotkit]
|
|
3496
3206
|
);
|
|
3497
|
-
const handleSelectSuggestion =
|
|
3207
|
+
const handleSelectSuggestion = useCallback6(
|
|
3498
3208
|
async (suggestion) => {
|
|
3499
3209
|
if (!agent) {
|
|
3500
3210
|
return;
|
|
@@ -3512,7 +3222,7 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
|
|
|
3512
3222
|
},
|
|
3513
3223
|
[agent, copilotkit]
|
|
3514
3224
|
);
|
|
3515
|
-
const stopCurrentRun =
|
|
3225
|
+
const stopCurrentRun = useCallback6(() => {
|
|
3516
3226
|
if (!agent) {
|
|
3517
3227
|
return;
|
|
3518
3228
|
}
|
|
@@ -3554,27 +3264,24 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
|
|
|
3554
3264
|
messages: agent?.messages ?? [],
|
|
3555
3265
|
inputProps: finalInputProps
|
|
3556
3266
|
});
|
|
3557
|
-
const
|
|
3558
|
-
|
|
3559
|
-
|
|
3560
|
-
|
|
3561
|
-
|
|
3562
|
-
|
|
3563
|
-
|
|
3564
|
-
|
|
3565
|
-
|
|
3566
|
-
|
|
3567
|
-
|
|
3568
|
-
"data-thread-switch-error": threadSwitchError ? threadSwitchError.message : void 0
|
|
3569
|
-
};
|
|
3570
|
-
return renderSlot(chatView, CopilotChatView, finalPropsWithThreadState);
|
|
3267
|
+
const RenderedChatView = renderSlot(chatView, CopilotChatView, finalProps);
|
|
3268
|
+
return /* @__PURE__ */ jsx18(
|
|
3269
|
+
CopilotChatConfigurationProvider,
|
|
3270
|
+
{
|
|
3271
|
+
agentId: resolvedAgentId,
|
|
3272
|
+
threadId: resolvedThreadId,
|
|
3273
|
+
labels,
|
|
3274
|
+
isModalDefaultOpen,
|
|
3275
|
+
children: RenderedChatView
|
|
3276
|
+
}
|
|
3277
|
+
);
|
|
3571
3278
|
}
|
|
3572
3279
|
((CopilotChat2) => {
|
|
3573
3280
|
CopilotChat2.View = CopilotChatView;
|
|
3574
3281
|
})(CopilotChat || (CopilotChat = {}));
|
|
3575
3282
|
|
|
3576
3283
|
// src/components/chat/CopilotChatToggleButton.tsx
|
|
3577
|
-
import React12, { useState as
|
|
3284
|
+
import React12, { useState as useState11 } from "react";
|
|
3578
3285
|
import { MessageCircle, X as X2 } from "lucide-react";
|
|
3579
3286
|
import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
3580
3287
|
var DefaultOpenIcon = ({
|
|
@@ -3605,7 +3312,7 @@ var CopilotChatToggleButton = React12.forwardRef(function CopilotChatToggleButto
|
|
|
3605
3312
|
const { onClick, type, disabled, ...restProps } = buttonProps;
|
|
3606
3313
|
const configuration = useCopilotChatConfiguration();
|
|
3607
3314
|
const labels = configuration?.labels ?? CopilotChatDefaultLabels;
|
|
3608
|
-
const [fallbackOpen, setFallbackOpen] =
|
|
3315
|
+
const [fallbackOpen, setFallbackOpen] = useState11(false);
|
|
3609
3316
|
const isOpen = configuration?.isModalOpen ?? fallbackOpen;
|
|
3610
3317
|
const setModalOpen = configuration?.setModalOpen ?? setFallbackOpen;
|
|
3611
3318
|
const handleClick = (event) => {
|
|
@@ -3691,21 +3398,16 @@ CopilotChatToggleButton.displayName = "CopilotChatToggleButton";
|
|
|
3691
3398
|
var CopilotChatToggleButton_default = CopilotChatToggleButton;
|
|
3692
3399
|
|
|
3693
3400
|
// src/components/chat/CopilotSidebarView.tsx
|
|
3694
|
-
import { useEffect as
|
|
3401
|
+
import { useEffect as useEffect15, useRef as useRef8, useState as useState12 } from "react";
|
|
3695
3402
|
|
|
3696
3403
|
// src/components/chat/CopilotModalHeader.tsx
|
|
3697
|
-
import { useCallback as
|
|
3698
|
-
import { X as X3
|
|
3404
|
+
import { useCallback as useCallback7 } from "react";
|
|
3405
|
+
import { X as X3 } from "lucide-react";
|
|
3699
3406
|
import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
3700
3407
|
function CopilotModalHeader({
|
|
3701
3408
|
title,
|
|
3702
3409
|
titleContent,
|
|
3703
3410
|
closeButton,
|
|
3704
|
-
leftContent,
|
|
3705
|
-
onThreadListClick,
|
|
3706
|
-
showThreadListButton = false,
|
|
3707
|
-
onNewThreadClick,
|
|
3708
|
-
showNewThreadButton = false,
|
|
3709
3411
|
children,
|
|
3710
3412
|
className,
|
|
3711
3413
|
...rest
|
|
@@ -3713,7 +3415,7 @@ function CopilotModalHeader({
|
|
|
3713
3415
|
const configuration = useCopilotChatConfiguration();
|
|
3714
3416
|
const fallbackTitle = configuration?.labels.modalHeaderTitle ?? CopilotChatDefaultLabels.modalHeaderTitle;
|
|
3715
3417
|
const resolvedTitle = title ?? fallbackTitle;
|
|
3716
|
-
const handleClose =
|
|
3418
|
+
const handleClose = useCallback7(() => {
|
|
3717
3419
|
configuration?.setModalOpen(false);
|
|
3718
3420
|
}, [configuration]);
|
|
3719
3421
|
const BoundTitle = renderSlot(titleContent, CopilotModalHeader.Title, {
|
|
@@ -3722,17 +3424,10 @@ function CopilotModalHeader({
|
|
|
3722
3424
|
const BoundCloseButton = renderSlot(closeButton, CopilotModalHeader.CloseButton, {
|
|
3723
3425
|
onClick: handleClose
|
|
3724
3426
|
});
|
|
3725
|
-
const BoundLeftContent = renderSlot(leftContent, CopilotModalHeader.LeftContent, {
|
|
3726
|
-
onThreadListClick,
|
|
3727
|
-
showThreadListButton,
|
|
3728
|
-
onNewThreadClick,
|
|
3729
|
-
showNewThreadButton
|
|
3730
|
-
});
|
|
3731
3427
|
if (children) {
|
|
3732
3428
|
return children({
|
|
3733
3429
|
titleContent: BoundTitle,
|
|
3734
3430
|
closeButton: BoundCloseButton,
|
|
3735
|
-
leftContent: BoundLeftContent,
|
|
3736
3431
|
title: resolvedTitle,
|
|
3737
3432
|
...rest
|
|
3738
3433
|
});
|
|
@@ -3748,7 +3443,7 @@ function CopilotModalHeader({
|
|
|
3748
3443
|
),
|
|
3749
3444
|
...rest,
|
|
3750
3445
|
children: /* @__PURE__ */ jsxs12("div", { className: "flex w-full items-center gap-2", children: [
|
|
3751
|
-
/* @__PURE__ */ jsx20("div", { className: "flex
|
|
3446
|
+
/* @__PURE__ */ jsx20("div", { className: "flex-1", "aria-hidden": "true" }),
|
|
3752
3447
|
/* @__PURE__ */ jsx20("div", { className: "flex flex-1 justify-center text-center", children: BoundTitle }),
|
|
3753
3448
|
/* @__PURE__ */ jsx20("div", { className: "flex flex-1 justify-end", children: BoundCloseButton })
|
|
3754
3449
|
] })
|
|
@@ -3785,281 +3480,19 @@ CopilotModalHeader.displayName = "CopilotModalHeader";
|
|
|
3785
3480
|
children: /* @__PURE__ */ jsx20(X3, { className: "h-4 w-4", "aria-hidden": "true" })
|
|
3786
3481
|
}
|
|
3787
3482
|
);
|
|
3788
|
-
CopilotModalHeader2.LeftContent = ({
|
|
3789
|
-
onThreadListClick,
|
|
3790
|
-
showThreadListButton,
|
|
3791
|
-
onNewThreadClick,
|
|
3792
|
-
showNewThreadButton,
|
|
3793
|
-
className,
|
|
3794
|
-
children
|
|
3795
|
-
}) => {
|
|
3796
|
-
if (children) {
|
|
3797
|
-
return /* @__PURE__ */ jsx20("div", { className, children });
|
|
3798
|
-
}
|
|
3799
|
-
const hasAnyButton = showNewThreadButton && onNewThreadClick || showThreadListButton && onThreadListClick;
|
|
3800
|
-
if (!hasAnyButton) {
|
|
3801
|
-
return null;
|
|
3802
|
-
}
|
|
3803
|
-
return /* @__PURE__ */ jsxs12("div", { className: cn("flex items-center gap-1", className), children: [
|
|
3804
|
-
showNewThreadButton && onNewThreadClick && /* @__PURE__ */ jsx20(
|
|
3805
|
-
"button",
|
|
3806
|
-
{
|
|
3807
|
-
type: "button",
|
|
3808
|
-
onClick: onNewThreadClick,
|
|
3809
|
-
className: cn(
|
|
3810
|
-
"inline-flex size-8 items-center justify-center rounded-full text-muted-foreground transition cursor-pointer",
|
|
3811
|
-
"hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
|
3812
|
-
),
|
|
3813
|
-
"aria-label": "New thread",
|
|
3814
|
-
title: "New thread",
|
|
3815
|
-
children: /* @__PURE__ */ jsx20(SquarePen, { className: "h-4 w-4", "aria-hidden": "true" })
|
|
3816
|
-
}
|
|
3817
|
-
),
|
|
3818
|
-
showThreadListButton && onThreadListClick && /* @__PURE__ */ jsx20(
|
|
3819
|
-
"button",
|
|
3820
|
-
{
|
|
3821
|
-
type: "button",
|
|
3822
|
-
onClick: onThreadListClick,
|
|
3823
|
-
className: cn(
|
|
3824
|
-
"inline-flex size-8 items-center justify-center rounded-full text-muted-foreground transition cursor-pointer",
|
|
3825
|
-
"hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
|
3826
|
-
),
|
|
3827
|
-
"aria-label": "Show threads",
|
|
3828
|
-
title: "Show threads",
|
|
3829
|
-
children: /* @__PURE__ */ jsx20(List, { className: "h-4 w-4", "aria-hidden": "true" })
|
|
3830
|
-
}
|
|
3831
|
-
)
|
|
3832
|
-
] });
|
|
3833
|
-
};
|
|
3834
3483
|
})(CopilotModalHeader || (CopilotModalHeader = {}));
|
|
3835
3484
|
CopilotModalHeader.Title.displayName = "CopilotModalHeader.Title";
|
|
3836
3485
|
CopilotModalHeader.CloseButton.displayName = "CopilotModalHeader.CloseButton";
|
|
3837
|
-
CopilotModalHeader.LeftContent.displayName = "CopilotModalHeader.LeftContent";
|
|
3838
|
-
|
|
3839
|
-
// src/components/threads/CopilotThreadList.tsx
|
|
3840
|
-
import { useCallback as useCallback12, useEffect as useEffect16, useRef as useRef9, useState as useState14 } from "react";
|
|
3841
|
-
import { MessageSquare, Plus as Plus2, Trash2 } from "lucide-react";
|
|
3842
|
-
import { randomUUID as randomUUID3 } from "@copilotkitnext/shared";
|
|
3843
|
-
import { Fragment as Fragment7, jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
3844
|
-
function CopilotThreadListInner({
|
|
3845
|
-
limit = 50,
|
|
3846
|
-
onThreadSelect,
|
|
3847
|
-
className,
|
|
3848
|
-
threadItem,
|
|
3849
|
-
newThreadButton,
|
|
3850
|
-
container,
|
|
3851
|
-
refreshInterval = 2e3,
|
|
3852
|
-
disableAutoRefresh = false
|
|
3853
|
-
}) {
|
|
3854
|
-
const config = useCopilotChatConfiguration();
|
|
3855
|
-
const { threads, isLoading, error, fetchThreads, addOptimisticThread, refresh, currentThreadId, deleteThread } = useThreads({
|
|
3856
|
-
limit
|
|
3857
|
-
});
|
|
3858
|
-
const attemptedFetchRef = useRef9(/* @__PURE__ */ new Set());
|
|
3859
|
-
const handleNewThread = useCallback12(() => {
|
|
3860
|
-
const newThreadId = randomUUID3();
|
|
3861
|
-
addOptimisticThread(newThreadId);
|
|
3862
|
-
config?.setThreadId?.(newThreadId);
|
|
3863
|
-
onThreadSelect?.(newThreadId);
|
|
3864
|
-
}, [addOptimisticThread, config, onThreadSelect]);
|
|
3865
|
-
const handleThreadSelect = useCallback12(
|
|
3866
|
-
(threadId) => {
|
|
3867
|
-
config?.setThreadId?.(threadId);
|
|
3868
|
-
onThreadSelect?.(threadId);
|
|
3869
|
-
},
|
|
3870
|
-
[config, onThreadSelect]
|
|
3871
|
-
);
|
|
3872
|
-
const handleDeleteThread = useCallback12(
|
|
3873
|
-
async (threadId) => {
|
|
3874
|
-
try {
|
|
3875
|
-
await deleteThread(threadId);
|
|
3876
|
-
if (threadId === (currentThreadId ?? config?.threadId)) {
|
|
3877
|
-
const newThreadId = randomUUID3();
|
|
3878
|
-
addOptimisticThread(newThreadId);
|
|
3879
|
-
config?.setThreadId?.(newThreadId);
|
|
3880
|
-
}
|
|
3881
|
-
} catch (err) {
|
|
3882
|
-
console.error("Failed to delete thread:", err);
|
|
3883
|
-
}
|
|
3884
|
-
},
|
|
3885
|
-
[deleteThread, currentThreadId, config, addOptimisticThread]
|
|
3886
|
-
);
|
|
3887
|
-
useEffect16(() => {
|
|
3888
|
-
const activeId = currentThreadId ?? config?.threadId;
|
|
3889
|
-
if (!activeId) return;
|
|
3890
|
-
const isCurrentThreadInList = threads.some((t) => t.threadId === activeId);
|
|
3891
|
-
if (isCurrentThreadInList) {
|
|
3892
|
-
attemptedFetchRef.current.delete(activeId);
|
|
3893
|
-
return;
|
|
3894
|
-
}
|
|
3895
|
-
if (!isLoading && !attemptedFetchRef.current.has(activeId)) {
|
|
3896
|
-
attemptedFetchRef.current.add(activeId);
|
|
3897
|
-
refresh();
|
|
3898
|
-
}
|
|
3899
|
-
}, [currentThreadId, config?.threadId, threads, refresh, isLoading]);
|
|
3900
|
-
useEffect16(() => {
|
|
3901
|
-
if (disableAutoRefresh) return;
|
|
3902
|
-
const hasRunningThread = threads.some((t) => t.isRunning);
|
|
3903
|
-
const hasUnnamedThread = threads.some((t) => !t.firstMessage);
|
|
3904
|
-
if (!hasRunningThread && !hasUnnamedThread) return;
|
|
3905
|
-
const interval = setInterval(() => {
|
|
3906
|
-
refresh();
|
|
3907
|
-
}, refreshInterval);
|
|
3908
|
-
return () => clearInterval(interval);
|
|
3909
|
-
}, [threads, refresh, refreshInterval, disableAutoRefresh]);
|
|
3910
|
-
const BoundNewThreadButton = renderSlot(newThreadButton, NewThreadButton, {
|
|
3911
|
-
onClick: handleNewThread
|
|
3912
|
-
});
|
|
3913
|
-
const activeThreadId = currentThreadId ?? config?.threadId;
|
|
3914
|
-
const threadItems = threads.map((thread) => {
|
|
3915
|
-
const isActive = thread.threadId === activeThreadId;
|
|
3916
|
-
return renderSlot(threadItem, ThreadListItem, {
|
|
3917
|
-
key: thread.threadId,
|
|
3918
|
-
thread,
|
|
3919
|
-
isActive,
|
|
3920
|
-
onClick: () => handleThreadSelect(thread.threadId),
|
|
3921
|
-
onDelete: () => handleDeleteThread(thread.threadId)
|
|
3922
|
-
});
|
|
3923
|
-
});
|
|
3924
|
-
const content = /* @__PURE__ */ jsxs13(Fragment7, { children: [
|
|
3925
|
-
BoundNewThreadButton,
|
|
3926
|
-
/* @__PURE__ */ jsx21("div", { className: "space-y-1", children: error ? /* @__PURE__ */ jsxs13("div", { className: "copilotkit-thread-list-error mx-4 my-3 rounded-md border border-destructive/30 bg-destructive/5 p-4 text-sm text-destructive", children: [
|
|
3927
|
-
/* @__PURE__ */ jsxs13("p", { className: "mb-3 font-medium", children: [
|
|
3928
|
-
"Failed to load threads: ",
|
|
3929
|
-
error.message
|
|
3930
|
-
] }),
|
|
3931
|
-
/* @__PURE__ */ jsx21(
|
|
3932
|
-
"button",
|
|
3933
|
-
{
|
|
3934
|
-
type: "button",
|
|
3935
|
-
className: "rounded bg-destructive px-3 py-1.5 text-xs font-medium text-destructive-foreground transition hover:bg-destructive/90",
|
|
3936
|
-
onClick: () => fetchThreads(),
|
|
3937
|
-
children: "Retry"
|
|
3938
|
-
}
|
|
3939
|
-
)
|
|
3940
|
-
] }) : isLoading && threads.length === 0 ? /* @__PURE__ */ jsx21("div", { className: "p-4 text-center text-sm text-muted-foreground", children: "Loading threads..." }) : threads.length === 0 ? /* @__PURE__ */ jsx21("div", { className: "p-4 text-center text-sm text-muted-foreground", children: "No threads yet" }) : threadItems })
|
|
3941
|
-
] });
|
|
3942
|
-
return renderSlot(container, Container, {
|
|
3943
|
-
className,
|
|
3944
|
-
children: content
|
|
3945
|
-
});
|
|
3946
|
-
}
|
|
3947
|
-
var Container = ({ className, children, ...props }) => /* @__PURE__ */ jsx21("div", { className: cn("flex flex-col h-full", className), ...props, children });
|
|
3948
|
-
var NewThreadButton = ({ className, ...props }) => /* @__PURE__ */ jsxs13(
|
|
3949
|
-
"button",
|
|
3950
|
-
{
|
|
3951
|
-
className: cn(
|
|
3952
|
-
"w-full flex items-center gap-3 px-4 py-3 text-sm font-medium",
|
|
3953
|
-
"border-b border-border",
|
|
3954
|
-
"hover:bg-accent/50 transition-colors",
|
|
3955
|
-
"text-foreground",
|
|
3956
|
-
className
|
|
3957
|
-
),
|
|
3958
|
-
...props,
|
|
3959
|
-
children: [
|
|
3960
|
-
/* @__PURE__ */ jsx21(Plus2, { className: "w-4 h-4" }),
|
|
3961
|
-
/* @__PURE__ */ jsx21("span", { children: "New Conversation" })
|
|
3962
|
-
]
|
|
3963
|
-
}
|
|
3964
|
-
);
|
|
3965
|
-
var ThreadListItem = ({ thread, isActive, onClick, onDelete }) => {
|
|
3966
|
-
const displayText = thread.firstMessage?.substring(0, 60) || "New conversation";
|
|
3967
|
-
const hasEllipsis = thread.firstMessage && thread.firstMessage.length > 60;
|
|
3968
|
-
const messageCount = thread.messageCount || 0;
|
|
3969
|
-
const [isDeleting, setIsDeleting] = useState14(false);
|
|
3970
|
-
const handleDelete = useCallback12(
|
|
3971
|
-
async (e) => {
|
|
3972
|
-
e.stopPropagation();
|
|
3973
|
-
if (!onDelete) return;
|
|
3974
|
-
setIsDeleting(true);
|
|
3975
|
-
try {
|
|
3976
|
-
await onDelete();
|
|
3977
|
-
} catch (err) {
|
|
3978
|
-
console.error("Delete failed:", err);
|
|
3979
|
-
setIsDeleting(false);
|
|
3980
|
-
}
|
|
3981
|
-
},
|
|
3982
|
-
[onDelete]
|
|
3983
|
-
);
|
|
3984
|
-
return /* @__PURE__ */ jsxs13(
|
|
3985
|
-
"div",
|
|
3986
|
-
{
|
|
3987
|
-
className: cn(
|
|
3988
|
-
"w-full flex items-start gap-3 px-4 py-3 group relative",
|
|
3989
|
-
"hover:bg-accent/50 transition-colors",
|
|
3990
|
-
"border-b border-border",
|
|
3991
|
-
isActive && "bg-accent border-l-2 border-l-primary",
|
|
3992
|
-
isDeleting && "opacity-50 pointer-events-none"
|
|
3993
|
-
),
|
|
3994
|
-
children: [
|
|
3995
|
-
/* @__PURE__ */ jsxs13("button", { onClick, className: "flex items-start gap-3 flex-1 min-w-0 text-left", children: [
|
|
3996
|
-
/* @__PURE__ */ jsx21(MessageSquare, { className: "w-4 h-4 mt-0.5 flex-shrink-0 text-muted-foreground" }),
|
|
3997
|
-
/* @__PURE__ */ jsxs13("div", { className: "flex-1 min-w-0", children: [
|
|
3998
|
-
/* @__PURE__ */ jsxs13("p", { className: "text-sm text-foreground truncate", children: [
|
|
3999
|
-
displayText,
|
|
4000
|
-
hasEllipsis && "..."
|
|
4001
|
-
] }),
|
|
4002
|
-
messageCount > 0 && /* @__PURE__ */ jsxs13("p", { className: "text-xs text-muted-foreground mt-1", children: [
|
|
4003
|
-
messageCount,
|
|
4004
|
-
" messages"
|
|
4005
|
-
] })
|
|
4006
|
-
] })
|
|
4007
|
-
] }),
|
|
4008
|
-
onDelete && /* @__PURE__ */ jsx21(
|
|
4009
|
-
"button",
|
|
4010
|
-
{
|
|
4011
|
-
type: "button",
|
|
4012
|
-
onClick: handleDelete,
|
|
4013
|
-
disabled: isDeleting,
|
|
4014
|
-
className: cn(
|
|
4015
|
-
"p-1.5 rounded transition-all",
|
|
4016
|
-
"text-muted-foreground hover:text-destructive hover:bg-destructive/10",
|
|
4017
|
-
"opacity-0 group-hover:opacity-100",
|
|
4018
|
-
"focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-destructive/20",
|
|
4019
|
-
isDeleting && "animate-pulse"
|
|
4020
|
-
),
|
|
4021
|
-
"aria-label": "Delete thread",
|
|
4022
|
-
title: "Delete thread",
|
|
4023
|
-
children: /* @__PURE__ */ jsx21(Trash2, { className: "w-4 h-4" })
|
|
4024
|
-
}
|
|
4025
|
-
)
|
|
4026
|
-
]
|
|
4027
|
-
}
|
|
4028
|
-
);
|
|
4029
|
-
};
|
|
4030
|
-
function CopilotThreadList(props) {
|
|
4031
|
-
const existingConfig = useCopilotChatConfiguration();
|
|
4032
|
-
if (!existingConfig) {
|
|
4033
|
-
return /* @__PURE__ */ jsx21(CopilotChatConfigurationProvider, { children: /* @__PURE__ */ jsx21(CopilotThreadListInner, { ...props }) });
|
|
4034
|
-
}
|
|
4035
|
-
return /* @__PURE__ */ jsx21(CopilotThreadListInner, { ...props });
|
|
4036
|
-
}
|
|
4037
|
-
CopilotThreadList.displayName = "CopilotThreadList";
|
|
4038
|
-
CopilotThreadList.ThreadItem = ThreadListItem;
|
|
4039
|
-
CopilotThreadList.NewThreadButton = NewThreadButton;
|
|
4040
|
-
CopilotThreadList.Container = Container;
|
|
4041
3486
|
|
|
4042
3487
|
// src/components/chat/CopilotSidebarView.tsx
|
|
4043
|
-
import {
|
|
4044
|
-
import { Fragment as Fragment8, jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
3488
|
+
import { Fragment as Fragment7, jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
4045
3489
|
var DEFAULT_SIDEBAR_WIDTH = 480;
|
|
4046
3490
|
var SIDEBAR_TRANSITION_MS = 260;
|
|
4047
|
-
function CopilotSidebarView({ header, width,
|
|
3491
|
+
function CopilotSidebarView({ header, width, ...props }) {
|
|
4048
3492
|
const configuration = useCopilotChatConfiguration();
|
|
4049
3493
|
const isSidebarOpen = configuration?.isModalOpen ?? false;
|
|
4050
|
-
const
|
|
4051
|
-
const
|
|
4052
|
-
const [sidebarWidth, setSidebarWidth] = useState15(width ?? DEFAULT_SIDEBAR_WIDTH);
|
|
4053
|
-
const handleThreadListToggle = useCallback13(() => {
|
|
4054
|
-
setIsThreadListOpen((prev) => !prev);
|
|
4055
|
-
}, []);
|
|
4056
|
-
const handleThreadSelect = useCallback13(() => {
|
|
4057
|
-
setIsThreadListOpen(false);
|
|
4058
|
-
}, []);
|
|
4059
|
-
const handleNewThread = useCallback13(() => {
|
|
4060
|
-
const newThreadId = randomUUID4();
|
|
4061
|
-
configuration?.setThreadId?.(newThreadId);
|
|
4062
|
-
}, [configuration]);
|
|
3494
|
+
const sidebarRef = useRef8(null);
|
|
3495
|
+
const [sidebarWidth, setSidebarWidth] = useState12(width ?? DEFAULT_SIDEBAR_WIDTH);
|
|
4063
3496
|
const widthToCss = (w) => {
|
|
4064
3497
|
return typeof w === "number" ? `${w}px` : w;
|
|
4065
3498
|
};
|
|
@@ -4069,7 +3502,7 @@ function CopilotSidebarView({ header, width, showThreadListButton = false, showN
|
|
|
4069
3502
|
}
|
|
4070
3503
|
return w;
|
|
4071
3504
|
};
|
|
4072
|
-
|
|
3505
|
+
useEffect15(() => {
|
|
4073
3506
|
if (width !== void 0) {
|
|
4074
3507
|
return;
|
|
4075
3508
|
}
|
|
@@ -4095,14 +3528,9 @@ function CopilotSidebarView({ header, width, showThreadListButton = false, showN
|
|
|
4095
3528
|
window.addEventListener("resize", updateWidth);
|
|
4096
3529
|
return () => window.removeEventListener("resize", updateWidth);
|
|
4097
3530
|
}, [width]);
|
|
4098
|
-
const headerElement = renderSlot(header, CopilotModalHeader, {
|
|
4099
|
-
|
|
4100
|
-
|
|
4101
|
-
onNewThreadClick: handleNewThread,
|
|
4102
|
-
showNewThreadButton
|
|
4103
|
-
});
|
|
4104
|
-
return /* @__PURE__ */ jsxs14(Fragment8, { children: [
|
|
4105
|
-
isSidebarOpen && /* @__PURE__ */ jsx22(
|
|
3531
|
+
const headerElement = renderSlot(header, CopilotModalHeader, {});
|
|
3532
|
+
return /* @__PURE__ */ jsxs13(Fragment7, { children: [
|
|
3533
|
+
isSidebarOpen && /* @__PURE__ */ jsx21(
|
|
4106
3534
|
"style",
|
|
4107
3535
|
{
|
|
4108
3536
|
dangerouslySetInnerHTML: {
|
|
@@ -4116,8 +3544,8 @@ function CopilotSidebarView({ header, width, showThreadListButton = false, showN
|
|
|
4116
3544
|
}
|
|
4117
3545
|
}
|
|
4118
3546
|
),
|
|
4119
|
-
/* @__PURE__ */
|
|
4120
|
-
/* @__PURE__ */
|
|
3547
|
+
/* @__PURE__ */ jsx21(CopilotChatToggleButton_default, {}),
|
|
3548
|
+
/* @__PURE__ */ jsx21(
|
|
4121
3549
|
"aside",
|
|
4122
3550
|
{
|
|
4123
3551
|
ref: sidebarRef,
|
|
@@ -4130,8 +3558,6 @@ function CopilotSidebarView({ header, width, showThreadListButton = false, showN
|
|
|
4130
3558
|
"w-full",
|
|
4131
3559
|
"border-l border-border bg-background text-foreground shadow-xl",
|
|
4132
3560
|
"transition-transform duration-300 ease-out",
|
|
4133
|
-
"overflow-hidden",
|
|
4134
|
-
// Clip the sliding panel
|
|
4135
3561
|
isSidebarOpen ? "translate-x-0" : "translate-x-full pointer-events-none"
|
|
4136
3562
|
),
|
|
4137
3563
|
style: {
|
|
@@ -4144,31 +3570,10 @@ function CopilotSidebarView({ header, width, showThreadListButton = false, showN
|
|
|
4144
3570
|
"aria-hidden": !isSidebarOpen,
|
|
4145
3571
|
"aria-label": "Copilot chat sidebar",
|
|
4146
3572
|
role: "complementary",
|
|
4147
|
-
children: [
|
|
4148
|
-
|
|
4149
|
-
|
|
4150
|
-
|
|
4151
|
-
className: "absolute inset-0 z-50",
|
|
4152
|
-
onClick: handleThreadListToggle,
|
|
4153
|
-
"aria-hidden": "true"
|
|
4154
|
-
}
|
|
4155
|
-
),
|
|
4156
|
-
/* @__PURE__ */ jsx22(
|
|
4157
|
-
"div",
|
|
4158
|
-
{
|
|
4159
|
-
className: cn(
|
|
4160
|
-
"absolute left-0 top-0 h-full w-80 bg-background border-r border-border z-[60]",
|
|
4161
|
-
"transition-transform duration-300 ease-out",
|
|
4162
|
-
isThreadListOpen ? "translate-x-0" : "-translate-x-full"
|
|
4163
|
-
),
|
|
4164
|
-
children: /* @__PURE__ */ jsx22(CopilotThreadList, { onThreadSelect: handleThreadSelect })
|
|
4165
|
-
}
|
|
4166
|
-
),
|
|
4167
|
-
/* @__PURE__ */ jsxs14("div", { className: "flex h-full w-full flex-col overflow-hidden", children: [
|
|
4168
|
-
headerElement,
|
|
4169
|
-
/* @__PURE__ */ jsx22("div", { className: "flex-1 overflow-hidden", "data-sidebar-chat": true, children: /* @__PURE__ */ jsx22(CopilotChatView_default, { ...props }) })
|
|
4170
|
-
] })
|
|
4171
|
-
]
|
|
3573
|
+
children: /* @__PURE__ */ jsxs13("div", { className: "flex h-full w-full flex-col overflow-hidden", children: [
|
|
3574
|
+
headerElement,
|
|
3575
|
+
/* @__PURE__ */ jsx21("div", { className: "flex-1 overflow-hidden", "data-sidebar-chat": true, children: /* @__PURE__ */ jsx21(CopilotChatView_default, { ...props }) })
|
|
3576
|
+
] })
|
|
4172
3577
|
}
|
|
4173
3578
|
)
|
|
4174
3579
|
] });
|
|
@@ -4176,9 +3581,8 @@ function CopilotSidebarView({ header, width, showThreadListButton = false, showN
|
|
|
4176
3581
|
CopilotSidebarView.displayName = "CopilotSidebarView";
|
|
4177
3582
|
|
|
4178
3583
|
// src/components/chat/CopilotPopupView.tsx
|
|
4179
|
-
import {
|
|
4180
|
-
import {
|
|
4181
|
-
import { Fragment as Fragment9, jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
3584
|
+
import { useEffect as useEffect16, useMemo as useMemo8, useRef as useRef9, useState as useState13 } from "react";
|
|
3585
|
+
import { Fragment as Fragment8, jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
4182
3586
|
var DEFAULT_POPUP_WIDTH = 420;
|
|
4183
3587
|
var DEFAULT_POPUP_HEIGHT = 560;
|
|
4184
3588
|
var dimensionToCss = (value, fallback) => {
|
|
@@ -4195,8 +3599,6 @@ function CopilotPopupView({
|
|
|
4195
3599
|
width,
|
|
4196
3600
|
height,
|
|
4197
3601
|
clickOutsideToClose,
|
|
4198
|
-
showThreadListButton = false,
|
|
4199
|
-
showNewThreadButton = false,
|
|
4200
3602
|
className,
|
|
4201
3603
|
...restProps
|
|
4202
3604
|
}) {
|
|
@@ -4204,21 +3606,10 @@ function CopilotPopupView({
|
|
|
4204
3606
|
const isPopupOpen = configuration?.isModalOpen ?? false;
|
|
4205
3607
|
const setModalOpen = configuration?.setModalOpen;
|
|
4206
3608
|
const labels = configuration?.labels ?? CopilotChatDefaultLabels;
|
|
4207
|
-
const containerRef =
|
|
4208
|
-
const [isRendered, setIsRendered] =
|
|
4209
|
-
const [isAnimatingOut, setIsAnimatingOut] =
|
|
4210
|
-
|
|
4211
|
-
const handleThreadListToggle = useCallback14(() => {
|
|
4212
|
-
setIsThreadListOpen((prev) => !prev);
|
|
4213
|
-
}, []);
|
|
4214
|
-
const handleThreadSelect = useCallback14(() => {
|
|
4215
|
-
setIsThreadListOpen(false);
|
|
4216
|
-
}, []);
|
|
4217
|
-
const handleNewThread = useCallback14(() => {
|
|
4218
|
-
const newThreadId = randomUUID5();
|
|
4219
|
-
configuration?.setThreadId?.(newThreadId);
|
|
4220
|
-
}, [configuration]);
|
|
4221
|
-
useEffect18(() => {
|
|
3609
|
+
const containerRef = useRef9(null);
|
|
3610
|
+
const [isRendered, setIsRendered] = useState13(isPopupOpen);
|
|
3611
|
+
const [isAnimatingOut, setIsAnimatingOut] = useState13(false);
|
|
3612
|
+
useEffect16(() => {
|
|
4222
3613
|
if (isPopupOpen) {
|
|
4223
3614
|
setIsRendered(true);
|
|
4224
3615
|
setIsAnimatingOut(false);
|
|
@@ -4234,7 +3625,7 @@ function CopilotPopupView({
|
|
|
4234
3625
|
}, 200);
|
|
4235
3626
|
return () => clearTimeout(timeout);
|
|
4236
3627
|
}, [isPopupOpen, isRendered]);
|
|
4237
|
-
|
|
3628
|
+
useEffect16(() => {
|
|
4238
3629
|
if (!isPopupOpen) {
|
|
4239
3630
|
return;
|
|
4240
3631
|
}
|
|
@@ -4250,7 +3641,7 @@ function CopilotPopupView({
|
|
|
4250
3641
|
window.addEventListener("keydown", handleKeyDown);
|
|
4251
3642
|
return () => window.removeEventListener("keydown", handleKeyDown);
|
|
4252
3643
|
}, [isPopupOpen, setModalOpen]);
|
|
4253
|
-
|
|
3644
|
+
useEffect16(() => {
|
|
4254
3645
|
if (!isPopupOpen) {
|
|
4255
3646
|
return;
|
|
4256
3647
|
}
|
|
@@ -4259,7 +3650,7 @@ function CopilotPopupView({
|
|
|
4259
3650
|
}, 200);
|
|
4260
3651
|
return () => clearTimeout(focusTimer);
|
|
4261
3652
|
}, [isPopupOpen]);
|
|
4262
|
-
|
|
3653
|
+
useEffect16(() => {
|
|
4263
3654
|
if (!isPopupOpen || !clickOutsideToClose) {
|
|
4264
3655
|
return;
|
|
4265
3656
|
}
|
|
@@ -4284,15 +3675,10 @@ function CopilotPopupView({
|
|
|
4284
3675
|
document.addEventListener("pointerdown", handlePointerDown);
|
|
4285
3676
|
return () => document.removeEventListener("pointerdown", handlePointerDown);
|
|
4286
3677
|
}, [isPopupOpen, clickOutsideToClose, setModalOpen]);
|
|
4287
|
-
const headerElement =
|
|
4288
|
-
onThreadListClick: handleThreadListToggle,
|
|
4289
|
-
showThreadListButton,
|
|
4290
|
-
onNewThreadClick: handleNewThread,
|
|
4291
|
-
showNewThreadButton
|
|
4292
|
-
}), [header, handleThreadListToggle, showThreadListButton, handleNewThread, showNewThreadButton]);
|
|
3678
|
+
const headerElement = useMemo8(() => renderSlot(header, CopilotModalHeader, {}), [header]);
|
|
4293
3679
|
const resolvedWidth = dimensionToCss(width, DEFAULT_POPUP_WIDTH);
|
|
4294
3680
|
const resolvedHeight = dimensionToCss(height, DEFAULT_POPUP_HEIGHT);
|
|
4295
|
-
const popupStyle =
|
|
3681
|
+
const popupStyle = useMemo8(
|
|
4296
3682
|
() => ({
|
|
4297
3683
|
"--copilot-popup-width": resolvedWidth,
|
|
4298
3684
|
"--copilot-popup-height": resolvedHeight,
|
|
@@ -4306,14 +3692,14 @@ function CopilotPopupView({
|
|
|
4306
3692
|
[resolvedHeight, resolvedWidth]
|
|
4307
3693
|
);
|
|
4308
3694
|
const popupAnimationClass = isPopupOpen && !isAnimatingOut ? "pointer-events-auto translate-y-0 opacity-100 md:scale-100" : "pointer-events-none translate-y-4 opacity-0 md:translate-y-5 md:scale-[0.95]";
|
|
4309
|
-
const popupContent = isRendered ? /* @__PURE__ */
|
|
3695
|
+
const popupContent = isRendered ? /* @__PURE__ */ jsx22(
|
|
4310
3696
|
"div",
|
|
4311
3697
|
{
|
|
4312
3698
|
className: cn(
|
|
4313
3699
|
"fixed inset-0 z-[1200] flex max-w-full flex-col items-stretch",
|
|
4314
3700
|
"md:inset-auto md:bottom-24 md:right-6 md:items-end md:gap-4"
|
|
4315
3701
|
),
|
|
4316
|
-
children: /* @__PURE__ */
|
|
3702
|
+
children: /* @__PURE__ */ jsxs14(
|
|
4317
3703
|
"div",
|
|
4318
3704
|
{
|
|
4319
3705
|
ref: containerRef,
|
|
@@ -4322,40 +3708,19 @@ function CopilotPopupView({
|
|
|
4322
3708
|
"aria-label": labels.modalHeaderTitle,
|
|
4323
3709
|
"data-copilot-popup": true,
|
|
4324
3710
|
className: cn(
|
|
4325
|
-
"relative flex h-full w-full flex-col bg-background text-foreground",
|
|
3711
|
+
"relative flex h-full w-full flex-col overflow-hidden bg-background text-foreground",
|
|
4326
3712
|
"origin-bottom focus:outline-none transform-gpu transition-transform transition-opacity duration-200 ease-out",
|
|
4327
3713
|
"md:transition-transform md:transition-opacity",
|
|
4328
3714
|
"rounded-none border border-border/0 shadow-none ring-0",
|
|
4329
3715
|
"md:h-[var(--copilot-popup-height)] md:w-[var(--copilot-popup-width)]",
|
|
4330
3716
|
"md:max-h-[var(--copilot-popup-max-height)] md:max-w-[var(--copilot-popup-max-width)]",
|
|
4331
3717
|
"md:origin-bottom-right md:rounded-2xl md:border-border md:shadow-xl md:ring-1 md:ring-border/40",
|
|
4332
|
-
"overflow-hidden",
|
|
4333
|
-
// Clip the sliding panel
|
|
4334
3718
|
popupAnimationClass
|
|
4335
3719
|
),
|
|
4336
3720
|
style: popupStyle,
|
|
4337
3721
|
children: [
|
|
4338
|
-
isThreadListOpen && /* @__PURE__ */ jsx23(
|
|
4339
|
-
"div",
|
|
4340
|
-
{
|
|
4341
|
-
className: "absolute inset-0 z-50",
|
|
4342
|
-
onClick: handleThreadListToggle,
|
|
4343
|
-
"aria-hidden": "true"
|
|
4344
|
-
}
|
|
4345
|
-
),
|
|
4346
|
-
/* @__PURE__ */ jsx23(
|
|
4347
|
-
"div",
|
|
4348
|
-
{
|
|
4349
|
-
className: cn(
|
|
4350
|
-
"absolute left-0 top-0 h-full w-80 bg-background border-r border-border z-[60]",
|
|
4351
|
-
"transition-transform duration-300 ease-out",
|
|
4352
|
-
isThreadListOpen ? "translate-x-0" : "-translate-x-full"
|
|
4353
|
-
),
|
|
4354
|
-
children: /* @__PURE__ */ jsx23(CopilotThreadList, { onThreadSelect: handleThreadSelect })
|
|
4355
|
-
}
|
|
4356
|
-
),
|
|
4357
3722
|
headerElement,
|
|
4358
|
-
/* @__PURE__ */
|
|
3723
|
+
/* @__PURE__ */ jsx22("div", { className: "flex-1 overflow-hidden", "data-popup-chat": true, children: /* @__PURE__ */ jsx22(
|
|
4359
3724
|
CopilotChatView_default,
|
|
4360
3725
|
{
|
|
4361
3726
|
...restProps,
|
|
@@ -4367,34 +3732,32 @@ function CopilotPopupView({
|
|
|
4367
3732
|
)
|
|
4368
3733
|
}
|
|
4369
3734
|
) : null;
|
|
4370
|
-
return /* @__PURE__ */
|
|
4371
|
-
/* @__PURE__ */
|
|
3735
|
+
return /* @__PURE__ */ jsxs14(Fragment8, { children: [
|
|
3736
|
+
/* @__PURE__ */ jsx22(CopilotChatToggleButton_default, {}),
|
|
4372
3737
|
popupContent
|
|
4373
3738
|
] });
|
|
4374
3739
|
}
|
|
4375
3740
|
CopilotPopupView.displayName = "CopilotPopupView";
|
|
4376
3741
|
|
|
4377
3742
|
// src/components/chat/CopilotSidebar.tsx
|
|
4378
|
-
import { useMemo as
|
|
4379
|
-
import { jsx as
|
|
4380
|
-
function CopilotSidebar({ header, defaultOpen, width,
|
|
4381
|
-
const SidebarViewOverride =
|
|
3743
|
+
import { useMemo as useMemo9 } from "react";
|
|
3744
|
+
import { jsx as jsx23 } from "react/jsx-runtime";
|
|
3745
|
+
function CopilotSidebar({ header, defaultOpen, width, ...chatProps }) {
|
|
3746
|
+
const SidebarViewOverride = useMemo9(() => {
|
|
4382
3747
|
const Component = (viewProps) => {
|
|
4383
|
-
const { header: viewHeader, width: viewWidth,
|
|
4384
|
-
return /* @__PURE__ */
|
|
3748
|
+
const { header: viewHeader, width: viewWidth, ...restProps } = viewProps;
|
|
3749
|
+
return /* @__PURE__ */ jsx23(
|
|
4385
3750
|
CopilotSidebarView,
|
|
4386
3751
|
{
|
|
4387
3752
|
...restProps,
|
|
4388
3753
|
header: header ?? viewHeader,
|
|
4389
|
-
width: width ?? viewWidth
|
|
4390
|
-
showThreadListButton: showThreadListButton ?? viewShowThreadList,
|
|
4391
|
-
showNewThreadButton: showNewThreadButton ?? viewShowNewThread
|
|
3754
|
+
width: width ?? viewWidth
|
|
4392
3755
|
}
|
|
4393
3756
|
);
|
|
4394
3757
|
};
|
|
4395
3758
|
return Object.assign(Component, CopilotChatView_default);
|
|
4396
|
-
}, [header, width
|
|
4397
|
-
return /* @__PURE__ */
|
|
3759
|
+
}, [header, width]);
|
|
3760
|
+
return /* @__PURE__ */ jsx23(
|
|
4398
3761
|
CopilotChat,
|
|
4399
3762
|
{
|
|
4400
3763
|
...chatProps,
|
|
@@ -4406,45 +3769,39 @@ function CopilotSidebar({ header, defaultOpen, width, showThreadListButton, show
|
|
|
4406
3769
|
CopilotSidebar.displayName = "CopilotSidebar";
|
|
4407
3770
|
|
|
4408
3771
|
// src/components/chat/CopilotPopup.tsx
|
|
4409
|
-
import { useMemo as
|
|
4410
|
-
import { jsx as
|
|
3772
|
+
import { useMemo as useMemo10 } from "react";
|
|
3773
|
+
import { jsx as jsx24 } from "react/jsx-runtime";
|
|
4411
3774
|
function CopilotPopup({
|
|
4412
3775
|
header,
|
|
4413
3776
|
defaultOpen,
|
|
4414
3777
|
width,
|
|
4415
3778
|
height,
|
|
4416
3779
|
clickOutsideToClose,
|
|
4417
|
-
showThreadListButton,
|
|
4418
|
-
showNewThreadButton,
|
|
4419
3780
|
...chatProps
|
|
4420
3781
|
}) {
|
|
4421
|
-
const PopupViewOverride =
|
|
3782
|
+
const PopupViewOverride = useMemo10(() => {
|
|
4422
3783
|
const Component = (viewProps) => {
|
|
4423
3784
|
const {
|
|
4424
3785
|
header: viewHeader,
|
|
4425
3786
|
width: viewWidth,
|
|
4426
3787
|
height: viewHeight,
|
|
4427
3788
|
clickOutsideToClose: viewClickOutsideToClose,
|
|
4428
|
-
showThreadListButton: viewShowThreadList,
|
|
4429
|
-
showNewThreadButton: viewShowNewThread,
|
|
4430
3789
|
...restProps
|
|
4431
3790
|
} = viewProps;
|
|
4432
|
-
return /* @__PURE__ */
|
|
3791
|
+
return /* @__PURE__ */ jsx24(
|
|
4433
3792
|
CopilotPopupView,
|
|
4434
3793
|
{
|
|
4435
3794
|
...restProps,
|
|
4436
3795
|
header: header ?? viewHeader,
|
|
4437
3796
|
width: width ?? viewWidth,
|
|
4438
3797
|
height: height ?? viewHeight,
|
|
4439
|
-
clickOutsideToClose: clickOutsideToClose ?? viewClickOutsideToClose
|
|
4440
|
-
showThreadListButton: showThreadListButton ?? viewShowThreadList,
|
|
4441
|
-
showNewThreadButton: showNewThreadButton ?? viewShowNewThread
|
|
3798
|
+
clickOutsideToClose: clickOutsideToClose ?? viewClickOutsideToClose
|
|
4442
3799
|
}
|
|
4443
3800
|
);
|
|
4444
3801
|
};
|
|
4445
3802
|
return Object.assign(Component, CopilotChatView_default);
|
|
4446
|
-
}, [clickOutsideToClose, header, height, width
|
|
4447
|
-
return /* @__PURE__ */
|
|
3803
|
+
}, [clickOutsideToClose, header, height, width]);
|
|
3804
|
+
return /* @__PURE__ */ jsx24(
|
|
4448
3805
|
CopilotChat,
|
|
4449
3806
|
{
|
|
4450
3807
|
...chatProps,
|
|
@@ -4468,25 +3825,25 @@ function defineToolCallRenderer(def) {
|
|
|
4468
3825
|
}
|
|
4469
3826
|
|
|
4470
3827
|
// src/components/WildcardToolCallRender.tsx
|
|
4471
|
-
import { useState as
|
|
4472
|
-
import { jsx as
|
|
3828
|
+
import { useState as useState14 } from "react";
|
|
3829
|
+
import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
4473
3830
|
var WildcardToolCallRender = defineToolCallRenderer({
|
|
4474
3831
|
name: "*",
|
|
4475
3832
|
render: ({ args, result, name, status }) => {
|
|
4476
|
-
const [isExpanded, setIsExpanded] =
|
|
3833
|
+
const [isExpanded, setIsExpanded] = useState14(false);
|
|
4477
3834
|
const statusString = String(status);
|
|
4478
3835
|
const isActive = statusString === "inProgress" || statusString === "executing";
|
|
4479
3836
|
const isComplete = statusString === "complete";
|
|
4480
3837
|
const statusStyles = isActive ? "bg-amber-100 text-amber-800 dark:bg-amber-500/15 dark:text-amber-400" : isComplete ? "bg-emerald-100 text-emerald-800 dark:bg-emerald-500/15 dark:text-emerald-400" : "bg-zinc-100 text-zinc-800 dark:bg-zinc-700/40 dark:text-zinc-300";
|
|
4481
|
-
return /* @__PURE__ */
|
|
4482
|
-
/* @__PURE__ */
|
|
3838
|
+
return /* @__PURE__ */ jsx25("div", { className: "mt-2 pb-2", children: /* @__PURE__ */ jsxs15("div", { className: "rounded-xl border border-zinc-200/60 dark:border-zinc-800/60 bg-white/70 dark:bg-zinc-900/50 shadow-sm backdrop-blur p-4", children: [
|
|
3839
|
+
/* @__PURE__ */ jsxs15(
|
|
4483
3840
|
"div",
|
|
4484
3841
|
{
|
|
4485
3842
|
className: "flex items-center justify-between gap-3 cursor-pointer",
|
|
4486
3843
|
onClick: () => setIsExpanded(!isExpanded),
|
|
4487
3844
|
children: [
|
|
4488
|
-
/* @__PURE__ */
|
|
4489
|
-
/* @__PURE__ */
|
|
3845
|
+
/* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2 min-w-0", children: [
|
|
3846
|
+
/* @__PURE__ */ jsx25(
|
|
4490
3847
|
"svg",
|
|
4491
3848
|
{
|
|
4492
3849
|
className: `h-4 w-4 text-zinc-500 dark:text-zinc-400 transition-transform ${isExpanded ? "rotate-90" : ""}`,
|
|
@@ -4494,7 +3851,7 @@ var WildcardToolCallRender = defineToolCallRenderer({
|
|
|
4494
3851
|
viewBox: "0 0 24 24",
|
|
4495
3852
|
strokeWidth: 2,
|
|
4496
3853
|
stroke: "currentColor",
|
|
4497
|
-
children: /* @__PURE__ */
|
|
3854
|
+
children: /* @__PURE__ */ jsx25(
|
|
4498
3855
|
"path",
|
|
4499
3856
|
{
|
|
4500
3857
|
strokeLinecap: "round",
|
|
@@ -4504,10 +3861,10 @@ var WildcardToolCallRender = defineToolCallRenderer({
|
|
|
4504
3861
|
)
|
|
4505
3862
|
}
|
|
4506
3863
|
),
|
|
4507
|
-
/* @__PURE__ */
|
|
4508
|
-
/* @__PURE__ */
|
|
3864
|
+
/* @__PURE__ */ jsx25("span", { className: "inline-block h-2 w-2 rounded-full bg-blue-500" }),
|
|
3865
|
+
/* @__PURE__ */ jsx25("span", { className: "truncate text-sm font-medium text-zinc-900 dark:text-zinc-100", children: name })
|
|
4509
3866
|
] }),
|
|
4510
|
-
/* @__PURE__ */
|
|
3867
|
+
/* @__PURE__ */ jsx25(
|
|
4511
3868
|
"span",
|
|
4512
3869
|
{
|
|
4513
3870
|
className: `inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ${statusStyles}`,
|
|
@@ -4517,14 +3874,14 @@ var WildcardToolCallRender = defineToolCallRenderer({
|
|
|
4517
3874
|
]
|
|
4518
3875
|
}
|
|
4519
3876
|
),
|
|
4520
|
-
isExpanded && /* @__PURE__ */
|
|
4521
|
-
/* @__PURE__ */
|
|
4522
|
-
/* @__PURE__ */
|
|
4523
|
-
/* @__PURE__ */
|
|
3877
|
+
isExpanded && /* @__PURE__ */ jsxs15("div", { className: "mt-3 grid gap-4", children: [
|
|
3878
|
+
/* @__PURE__ */ jsxs15("div", { children: [
|
|
3879
|
+
/* @__PURE__ */ jsx25("div", { className: "text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Arguments" }),
|
|
3880
|
+
/* @__PURE__ */ jsx25("pre", { className: "mt-2 max-h-64 overflow-auto rounded-md bg-zinc-50 dark:bg-zinc-800/60 p-3 text-xs leading-relaxed text-zinc-800 dark:text-zinc-200 whitespace-pre-wrap break-words", children: JSON.stringify(args ?? {}, null, 2) })
|
|
4524
3881
|
] }),
|
|
4525
|
-
result !== void 0 && /* @__PURE__ */
|
|
4526
|
-
/* @__PURE__ */
|
|
4527
|
-
/* @__PURE__ */
|
|
3882
|
+
result !== void 0 && /* @__PURE__ */ jsxs15("div", { children: [
|
|
3883
|
+
/* @__PURE__ */ jsx25("div", { className: "text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Result" }),
|
|
3884
|
+
/* @__PURE__ */ jsx25("pre", { className: "mt-2 max-h-64 overflow-auto rounded-md bg-zinc-50 dark:bg-zinc-800/60 p-3 text-xs leading-relaxed text-zinc-800 dark:text-zinc-200 whitespace-pre-wrap break-words", children: typeof result === "string" ? result : JSON.stringify(result, null, 2) })
|
|
4528
3885
|
] })
|
|
4529
3886
|
] })
|
|
4530
3887
|
] }) });
|
|
@@ -4554,7 +3911,6 @@ export {
|
|
|
4554
3911
|
CopilotPopupView,
|
|
4555
3912
|
CopilotSidebar,
|
|
4556
3913
|
CopilotSidebarView,
|
|
4557
|
-
CopilotThreadList,
|
|
4558
3914
|
WildcardToolCallRender,
|
|
4559
3915
|
defineToolCallRenderer,
|
|
4560
3916
|
useAgent,
|
|
@@ -4566,8 +3922,6 @@ export {
|
|
|
4566
3922
|
useHumanInTheLoop,
|
|
4567
3923
|
useRenderCustomMessages,
|
|
4568
3924
|
useRenderToolCall,
|
|
4569
|
-
useSuggestions
|
|
4570
|
-
useThreadSwitch,
|
|
4571
|
-
useThreads
|
|
3925
|
+
useSuggestions
|
|
4572
3926
|
};
|
|
4573
3927
|
//# sourceMappingURL=index.mjs.map
|