@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.mjs CHANGED
@@ -8,14 +8,14 @@ import {
8
8
  useLayoutEffect,
9
9
  forwardRef as forwardRef2,
10
10
  useImperativeHandle as useImperativeHandle2,
11
- useCallback as useCallback2,
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, useCallback } from "react";
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 [internalThreadId, setInternalThreadId] = useState(() => {
55
- if (threadId) return threadId;
56
- if (parentConfig?.threadId) return parentConfig.threadId;
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 = useCallback2(
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 = useCallback2(() => {
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 = useCallback2(
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("w-full py-3", isExpanded ? "px-5" : "pr-5")
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 = useCallback2(() => {
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 = useCallback2(() => {
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 = useCallback2((nextLayout) => {
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 = useCallback2(() => {
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(`[data-slash-index="${slashHighlightIndex}"]`);
1040
- if (active && typeof active.scrollIntoView === "function") {
1041
- active.scrollIntoView({ block: "nearest" });
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("flex items-center", isExpanded ? "row-start-2" : "row-start-1", "col-start-1"),
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 = useCallback2(
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
- if (typeof textarea.scrollIntoView === "function") {
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 useState8 } from "react";
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 useCallback4, useEffect as useEffect5, useState as useState4, useSyncExternalStore } from "react";
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 * as WebInspectorModule from "@copilotkitnext/web-inspector";
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
- var WEB_INSPECTOR_TAG2 = WebInspectorModule.WEB_INSPECTOR_TAG;
1410
- var defineWebInspector2 = WebInspectorModule.defineWebInspector;
1411
- var WebInspectorElementClass = WebInspectorModule.WebInspectorElement;
1412
- defineWebInspector2();
1409
+ defineWebInspector();
1413
1410
  var CopilotKitInspectorBase = createComponent({
1414
- tagName: WEB_INSPECTOR_TAG2,
1415
- elementClass: WebInspectorElementClass,
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, resourceId, agents]);
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 = useCallback4(
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 = runId ? agent.messages.filter((msg) => copilotkit.getRunIdForMessage(agentId, threadId, msg.id) === runId).map((msg) => msg.id) : [];
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.max(messagesIdsInRun.indexOf(message.id), 0);
1740
+ const messageIndexInRun = Math.min(messagesIdsInRun.indexOf(message.id), 0);
1775
1741
  const numberOfMessagesInRun = messagesIdsInRun.length;
1776
- const stateSnapshot = runId ? copilotkit.getStateByRun(agentId, threadId, runId) : void 0;
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
- try {
1783
- const Component = renderer.render;
1784
- result = /* @__PURE__ */ jsx10(
1785
- Component,
1786
- {
1787
- message,
1788
- position,
1789
- runId: runId ?? "",
1790
- messageIndex,
1791
- messageIndexInRun,
1792
- numberOfMessagesInRun,
1793
- agentId,
1794
- stateSnapshot
1795
- },
1796
- `${runId ?? "no-run"}-${message.id}-${position}`
1797
- );
1798
- if (result) {
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 useCallback5, useRef as useRef5, useEffect as useEffect7 } from "react";
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 = useCallback5(async (result) => {
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 = useCallback5(async () => {
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 = useCallback5(
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(() => updates ?? ALL_UPDATES, [JSON.stringify(updates)]);
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
- }, [agentId, copilotkit.agents, copilotkit.runtimeConnectionStatus, copilotkit]);
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 useCallback6, useEffect as useEffect10, useMemo as useMemo5, useState as useState6 } from "react";
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 = useCallback6(() => {
2006
+ const reloadSuggestions = useCallback4(() => {
2038
2007
  copilotkit.reloadSuggestions(resolvedAgentId);
2039
2008
  }, [copilotkit, resolvedAgentId]);
2040
- const clearSuggestions = useCallback6(() => {
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 useCallback7, useEffect as useEffect11, useMemo as useMemo6, useRef as useRef6 } from "react";
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 = useCallback7(() => {
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, index) => {
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
- }) }, `${message.id}-${toolCall.id ?? index}-${index}`);
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] = useState8(false);
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 useState9 } from "react";
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: getUserMessageTextContent(message.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
- const textContent = getUserMessageTextContent(message.content);
2610
- if (textContent.trim().length > 0) {
2443
+ if (message.content) {
2611
2444
  try {
2612
- await navigator.clipboard.writeText(textContent);
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
- content,
2683
- contents = [],
2684
- className
2685
- }) => {
2686
- const attachments = getUserMessageBinaryContents(contents);
2687
- const hasText = content.trim().length > 0;
2688
- return /* @__PURE__ */ jsxs6(
2689
- "div",
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] = useState9(false);
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 useState11, useEffect as useEffect14 } from "react";
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 useState10, useEffect as useEffect13 } from "react";
2835
+ import { useState as useState9, useEffect as useEffect12 } from "react";
3061
2836
  function useKeyboardHeight() {
3062
- const [keyboardState, setKeyboardState] = useState10({
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
- useEffect13(() => {
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] = useState11(0);
3125
- const [isResizing, setIsResizing] = useState11(false);
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
- useEffect14(() => {
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] = useState11(false);
3014
+ const [hasMounted, setHasMounted] = useState10(false);
3246
3015
  const { scrollRef, contentRef, scrollToBottom } = useStickToBottom();
3247
- const [showScrollButton, setShowScrollButton] = useState11(false);
3248
- useEffect14(() => {
3016
+ const [showScrollButton, setShowScrollButton] = useState10(false);
3017
+ useEffect13(() => {
3249
3018
  setHasMounted(true);
3250
3019
  }, []);
3251
- useEffect14(() => {
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 useCallback10, useEffect as useEffect15, useRef as useRef8, useState as useState12 } from "react";
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 = threadId ?? existingConfig?.threadId;
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
- const onSubmitInput = useCallback10(
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 = useCallback10(
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 = useCallback10(() => {
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 inputPropsWithThreadState = {
3558
- ...finalProps.inputProps ?? {},
3559
- mode: isSwitchingThread ? "processing" : finalProps.inputProps?.mode
3560
- };
3561
- const finalPropsWithThreadState = {
3562
- ...finalProps,
3563
- isRunning: (finalProps.isRunning ?? false) || isSwitchingThread,
3564
- inputProps: inputPropsWithThreadState,
3565
- // Pass thread switching state to control scroll behavior
3566
- isSwitchingThread,
3567
- "data-thread-switching": isSwitchingThread ? "true" : void 0,
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 useState13 } from "react";
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] = useState13(false);
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 useEffect17, useRef as useRef10, useState as useState15, useCallback as useCallback13 } from "react";
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 useCallback11 } from "react";
3698
- import { X as X3, List, SquarePen } from "lucide-react";
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 = useCallback11(() => {
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 flex-1 justify-start", children: BoundLeftContent }),
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 { randomUUID as randomUUID4 } from "@copilotkitnext/shared";
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, showThreadListButton = false, showNewThreadButton = false, ...props }) {
3491
+ function CopilotSidebarView({ header, width, ...props }) {
4048
3492
  const configuration = useCopilotChatConfiguration();
4049
3493
  const isSidebarOpen = configuration?.isModalOpen ?? false;
4050
- const [isThreadListOpen, setIsThreadListOpen] = useState15(false);
4051
- const sidebarRef = useRef10(null);
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
- useEffect17(() => {
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
- onThreadListClick: handleThreadListToggle,
4100
- showThreadListButton,
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__ */ jsx22(CopilotChatToggleButton_default, {}),
4120
- /* @__PURE__ */ jsxs14(
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
- isThreadListOpen && /* @__PURE__ */ jsx22(
4149
- "div",
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 { useCallback as useCallback14, useEffect as useEffect18, useMemo as useMemo7, useRef as useRef11, useState as useState16 } from "react";
4180
- import { randomUUID as randomUUID5 } from "@copilotkitnext/shared";
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 = useRef11(null);
4208
- const [isRendered, setIsRendered] = useState16(isPopupOpen);
4209
- const [isAnimatingOut, setIsAnimatingOut] = useState16(false);
4210
- const [isThreadListOpen, setIsThreadListOpen] = useState16(false);
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
- useEffect18(() => {
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
- useEffect18(() => {
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
- useEffect18(() => {
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 = useMemo7(() => renderSlot(header, CopilotModalHeader, {
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 = useMemo7(
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__ */ jsx23(
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__ */ jsxs15(
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__ */ jsx23("div", { className: "flex-1 overflow-hidden", "data-popup-chat": true, children: /* @__PURE__ */ jsx23(
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__ */ jsxs15(Fragment9, { children: [
4371
- /* @__PURE__ */ jsx23(CopilotChatToggleButton_default, {}),
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 useMemo8 } from "react";
4379
- import { jsx as jsx24 } from "react/jsx-runtime";
4380
- function CopilotSidebar({ header, defaultOpen, width, showThreadListButton, showNewThreadButton, ...chatProps }) {
4381
- const SidebarViewOverride = useMemo8(() => {
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, showThreadListButton: viewShowThreadList, showNewThreadButton: viewShowNewThread, ...restProps } = viewProps;
4384
- return /* @__PURE__ */ jsx24(
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, showThreadListButton, showNewThreadButton]);
4397
- return /* @__PURE__ */ jsx24(
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 useMemo9 } from "react";
4410
- import { jsx as jsx25 } from "react/jsx-runtime";
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 = useMemo9(() => {
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__ */ jsx25(
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, showThreadListButton, showNewThreadButton]);
4447
- return /* @__PURE__ */ jsx25(
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 useState17 } from "react";
4472
- import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
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] = useState17(false);
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__ */ jsx26("div", { className: "mt-2 pb-2", children: /* @__PURE__ */ jsxs16("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: [
4482
- /* @__PURE__ */ jsxs16(
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__ */ jsxs16("div", { className: "flex items-center gap-2 min-w-0", children: [
4489
- /* @__PURE__ */ jsx26(
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__ */ jsx26(
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__ */ jsx26("span", { className: "inline-block h-2 w-2 rounded-full bg-blue-500" }),
4508
- /* @__PURE__ */ jsx26("span", { className: "truncate text-sm font-medium text-zinc-900 dark:text-zinc-100", children: name })
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__ */ jsx26(
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__ */ jsxs16("div", { className: "mt-3 grid gap-4", children: [
4521
- /* @__PURE__ */ jsxs16("div", { children: [
4522
- /* @__PURE__ */ jsx26("div", { className: "text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Arguments" }),
4523
- /* @__PURE__ */ jsx26("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) })
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__ */ jsxs16("div", { children: [
4526
- /* @__PURE__ */ jsx26("div", { className: "text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Result" }),
4527
- /* @__PURE__ */ jsx26("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) })
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