@copilotkit/react-core 1.56.4-canary.1777531098 → 1.56.4-canary.1777629975

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.
@@ -16,8 +16,8 @@ import { z } from "zod";
16
16
  import { createComponent } from "@lit-labs/react";
17
17
  import { A2UIProvider, A2UIRenderer, A2UI_SCHEMA_CONTEXT_DESCRIPTION, DEFAULT_SURFACE_ID, buildCatalogContextValue, extractCatalogComponentSchemas, initializeDefaultCatalog, injectStyles, useA2UIActions, useA2UIError, viewerTheme } from "@copilotkit/a2ui-renderer";
18
18
  import { zodToJsonSchema } from "zod-to-json-schema";
19
- import { createPortal, flushSync } from "react-dom";
20
19
  import { useVirtualizer } from "@tanstack/react-virtual";
20
+ import { createPortal, flushSync } from "react-dom";
21
21
  import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
22
22
  import ReactMarkdown from "react-markdown";
23
23
 
@@ -4302,19 +4302,15 @@ function useConfigureSuggestions(config, deps) {
4302
4302
  return consumer;
4303
4303
  }, [normalizedConfig, resolvedConsumerAgentId]);
4304
4304
  const isGlobalConfig = rawConsumerAgentId === void 0 || rawConsumerAgentId === "*";
4305
- const isDynamicConfigType = useMemo(() => !!normalizedConfig && "instructions" in normalizedConfig, [normalizedConfig]);
4306
4305
  const requestReload = useCallback(() => {
4307
4306
  if (!normalizedConfig) return;
4308
4307
  if (isGlobalConfig) {
4309
- const seen = /* @__PURE__ */ new Set();
4310
4308
  const agents = Object.values(copilotkit.agents ?? {});
4311
4309
  for (const entry of agents) {
4312
4310
  const agentId = entry.agentId;
4313
4311
  if (!agentId) continue;
4314
- seen.add(agentId);
4315
4312
  if (!entry.isRunning) copilotkit.reloadSuggestions(agentId);
4316
4313
  }
4317
- if (targetAgentId && !seen.has(targetAgentId)) copilotkit.reloadSuggestions(targetAgentId);
4318
4314
  return;
4319
4315
  }
4320
4316
  if (!targetAgentId) return;
@@ -4359,26 +4355,6 @@ function useConfigureSuggestions(config, deps) {
4359
4355
  requestReload,
4360
4356
  ...extraDeps
4361
4357
  ]);
4362
- useEffect(() => {
4363
- if (!normalizedConfig || !isDynamicConfigType) return;
4364
- if (!targetAgentId) return;
4365
- if (!!copilotkit.getAgent(targetAgentId)) return;
4366
- const subscription = copilotkit.subscribe({ onAgentsChanged: () => {
4367
- if (copilotkit.getAgent(targetAgentId)) {
4368
- requestReload();
4369
- subscription.unsubscribe();
4370
- }
4371
- } });
4372
- return () => {
4373
- subscription.unsubscribe();
4374
- };
4375
- }, [
4376
- copilotkit,
4377
- normalizedConfig,
4378
- isDynamicConfigType,
4379
- targetAgentId,
4380
- requestReload
4381
- ]);
4382
4358
  }
4383
4359
  function isDynamicConfig(config) {
4384
4360
  return "instructions" in config;
@@ -5030,101 +5006,20 @@ CopilotChatAssistantMessage.ReadAloudButton.displayName = "CopilotChatAssistantM
5030
5006
  CopilotChatAssistantMessage.RegenerateButton.displayName = "CopilotChatAssistantMessage.RegenerateButton";
5031
5007
  var CopilotChatAssistantMessage_default = CopilotChatAssistantMessage;
5032
5008
 
5033
- //#endregion
5034
- //#region src/v2/components/chat/Lightbox.tsx
5035
- function Lightbox({ onClose, children }) {
5036
- useEffect(() => {
5037
- const handleKey = (e) => {
5038
- if (e.key === "Escape") onClose();
5039
- };
5040
- document.addEventListener("keydown", handleKey);
5041
- return () => document.removeEventListener("keydown", handleKey);
5042
- }, [onClose]);
5043
- if (typeof document === "undefined") return null;
5044
- return createPortal(/* @__PURE__ */ jsxs("div", {
5045
- className: "cpk:fixed cpk:inset-0 cpk:z-[9999] cpk:flex cpk:items-center cpk:justify-center cpk:bg-black/80 cpk:animate-fade-in",
5046
- onClick: onClose,
5047
- children: [/* @__PURE__ */ jsx("button", {
5048
- onClick: onClose,
5049
- className: "cpk:absolute cpk:top-4 cpk:right-4 cpk:text-white cpk:bg-white/10 cpk:hover:bg-white/20 cpk:rounded-full cpk:w-10 cpk:h-10 cpk:flex cpk:items-center cpk:justify-center cpk:cursor-pointer cpk:border-none cpk:z-10",
5050
- "aria-label": "Close preview",
5051
- children: /* @__PURE__ */ jsx(X, { className: "cpk:w-5 cpk:h-5" })
5052
- }), /* @__PURE__ */ jsx("div", {
5053
- onClick: (e) => e.stopPropagation(),
5054
- children
5055
- })]
5056
- }), document.body);
5057
- }
5058
- /**
5059
- * Hook that manages lightbox open/close and uses the View Transition API to
5060
- * morph the thumbnail into fullscreen content.
5061
- *
5062
- * The trick: `view-transition-name` must live on exactly ONE element at a time.
5063
- * - Old state (thumbnail visible): name is on the thumbnail.
5064
- * - New state (lightbox visible): name moves to the lightbox content.
5065
- * `flushSync` ensures React commits the DOM change synchronously inside the
5066
- * `startViewTransition` callback so the API can snapshot old → new correctly.
5067
- */
5068
- function useLightbox() {
5069
- const thumbnailRef = useRef(null);
5070
- const [open, setOpen] = useState(false);
5071
- const vtName = useId();
5072
- return {
5073
- thumbnailRef,
5074
- vtName,
5075
- open,
5076
- openLightbox: useCallback(() => {
5077
- const thumb = thumbnailRef.current;
5078
- const doc = document;
5079
- if (doc.startViewTransition && thumb) {
5080
- thumb.style.viewTransitionName = vtName;
5081
- doc.startViewTransition(() => {
5082
- thumb.style.viewTransitionName = "";
5083
- flushSync(() => setOpen(true));
5084
- });
5085
- } else setOpen(true);
5086
- }, [vtName]),
5087
- closeLightbox: useCallback(() => {
5088
- const thumb = thumbnailRef.current;
5089
- const doc = document;
5090
- if (doc.startViewTransition && thumb) doc.startViewTransition(() => {
5091
- flushSync(() => setOpen(false));
5092
- thumb.style.viewTransitionName = vtName;
5093
- }).finished.then(() => {
5094
- thumb.style.viewTransitionName = "";
5095
- }).catch(() => {
5096
- thumb.style.viewTransitionName = "";
5097
- });
5098
- else setOpen(false);
5099
- }, [vtName])
5100
- };
5101
- }
5102
-
5103
5009
  //#endregion
5104
5010
  //#region src/v2/components/chat/CopilotChatAttachmentRenderer.tsx
5105
5011
  const ImageAttachment = memo(function ImageAttachment({ src, className }) {
5106
5012
  const [error, setError] = useState(false);
5107
- const { thumbnailRef, vtName, open, openLightbox, closeLightbox } = useLightbox();
5108
5013
  if (error) return /* @__PURE__ */ jsx("div", {
5109
5014
  className: cn("cpk:flex cpk:flex-col cpk:items-center cpk:justify-center cpk:rounded-lg cpk:bg-muted cpk:p-4 cpk:text-sm cpk:text-muted-foreground", className),
5110
5015
  children: /* @__PURE__ */ jsx("span", { children: "Failed to load image" })
5111
5016
  });
5112
- return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("img", {
5113
- ref: thumbnailRef,
5017
+ return /* @__PURE__ */ jsx("img", {
5114
5018
  src,
5115
5019
  alt: "Image attachment",
5116
- className: cn("cpk:max-w-[80px] cpk:max-h-[80px] cpk:w-auto cpk:h-auto cpk:rounded-xl cpk:object-cover cpk:cursor-pointer cpk:bg-muted", className),
5117
- onClick: openLightbox,
5020
+ className: cn("cpk:max-w-full cpk:h-auto cpk:rounded-lg", className),
5118
5021
  onError: () => setError(true)
5119
- }), open && /* @__PURE__ */ jsx(Lightbox, {
5120
- onClose: closeLightbox,
5121
- children: /* @__PURE__ */ jsx("img", {
5122
- style: { viewTransitionName: vtName },
5123
- src,
5124
- alt: "Image attachment",
5125
- className: "cpk:max-w-[90vw] cpk:max-h-[90vh] cpk:object-contain cpk:rounded-lg"
5126
- })
5127
- })] });
5022
+ });
5128
5023
  });
5129
5024
  const AudioAttachment = memo(function AudioAttachment({ src, filename, className }) {
5130
5025
  return /* @__PURE__ */ jsxs("div", {
@@ -5249,15 +5144,15 @@ function CopilotChatUserMessage({ message, onEditMessage, branchIndex, numberOfB
5249
5144
  "data-message-id": message.id,
5250
5145
  ...props,
5251
5146
  children: [
5147
+ BoundMessageRenderer,
5252
5148
  mediaParts.length > 0 && /* @__PURE__ */ jsx("div", {
5253
- className: "cpk:flex cpk:flex-row cpk:flex-wrap cpk:justify-end cpk:gap-2 cpk:mb-2",
5149
+ className: "cpk:flex cpk:flex-col cpk:items-end cpk:gap-2 cpk:mt-2",
5254
5150
  children: mediaParts.map((part, index) => /* @__PURE__ */ jsx(CopilotChatAttachmentRenderer, {
5255
5151
  type: part.type,
5256
5152
  source: part.source,
5257
5153
  filename: getFilename(part)
5258
5154
  }, index))
5259
5155
  }),
5260
- BoundMessageRenderer,
5261
5156
  BoundToolbar
5262
5157
  ]
5263
5158
  });
@@ -5961,6 +5856,73 @@ function AttachmentPreview({ attachment }) {
5961
5856
  case "document": return /* @__PURE__ */ jsx(DocumentPreview, { attachment });
5962
5857
  }
5963
5858
  }
5859
+ function Lightbox({ onClose, children }) {
5860
+ useEffect(() => {
5861
+ const handleKey = (e) => {
5862
+ if (e.key === "Escape") onClose();
5863
+ };
5864
+ document.addEventListener("keydown", handleKey);
5865
+ return () => document.removeEventListener("keydown", handleKey);
5866
+ }, [onClose]);
5867
+ if (typeof document === "undefined") return null;
5868
+ return createPortal(/* @__PURE__ */ jsxs("div", {
5869
+ className: "cpk:fixed cpk:inset-0 cpk:z-[9999] cpk:flex cpk:items-center cpk:justify-center cpk:bg-black/80 cpk:animate-fade-in",
5870
+ onClick: onClose,
5871
+ children: [/* @__PURE__ */ jsx("button", {
5872
+ onClick: onClose,
5873
+ className: "cpk:absolute cpk:top-4 cpk:right-4 cpk:text-white cpk:bg-white/10 cpk:hover:bg-white/20 cpk:rounded-full cpk:w-10 cpk:h-10 cpk:flex cpk:items-center cpk:justify-center cpk:cursor-pointer cpk:border-none cpk:z-10",
5874
+ "aria-label": "Close preview",
5875
+ children: /* @__PURE__ */ jsx(X, { className: "cpk:w-5 cpk:h-5" })
5876
+ }), /* @__PURE__ */ jsx("div", {
5877
+ onClick: (e) => e.stopPropagation(),
5878
+ children
5879
+ })]
5880
+ }), document.body);
5881
+ }
5882
+ /**
5883
+ * Hook that manages lightbox open/close and uses the View Transition API to
5884
+ * morph the thumbnail into fullscreen content.
5885
+ *
5886
+ * The trick: `view-transition-name` must live on exactly ONE element at a time.
5887
+ * - Old state (thumbnail visible): name is on the thumbnail.
5888
+ * - New state (lightbox visible): name moves to the lightbox content.
5889
+ * `flushSync` ensures React commits the DOM change synchronously inside the
5890
+ * `startViewTransition` callback so the API can snapshot old → new correctly.
5891
+ */
5892
+ function useLightbox() {
5893
+ const thumbnailRef = useRef(null);
5894
+ const [open, setOpen] = useState(false);
5895
+ const vtName = useId();
5896
+ return {
5897
+ thumbnailRef,
5898
+ vtName,
5899
+ open,
5900
+ openLightbox: useCallback(() => {
5901
+ const thumb = thumbnailRef.current;
5902
+ const doc = document;
5903
+ if (doc.startViewTransition && thumb) {
5904
+ thumb.style.viewTransitionName = vtName;
5905
+ doc.startViewTransition(() => {
5906
+ thumb.style.viewTransitionName = "";
5907
+ flushSync(() => setOpen(true));
5908
+ });
5909
+ } else setOpen(true);
5910
+ }, []),
5911
+ closeLightbox: useCallback(() => {
5912
+ const thumb = thumbnailRef.current;
5913
+ const doc = document;
5914
+ if (doc.startViewTransition && thumb) doc.startViewTransition(() => {
5915
+ flushSync(() => setOpen(false));
5916
+ thumb.style.viewTransitionName = vtName;
5917
+ }).finished.then(() => {
5918
+ thumb.style.viewTransitionName = "";
5919
+ }).catch(() => {
5920
+ thumb.style.viewTransitionName = "";
5921
+ });
5922
+ else setOpen(false);
5923
+ }, [])
5924
+ };
5925
+ }
5964
5926
  function ImagePreview({ attachment }) {
5965
5927
  const src = getSourceUrl(attachment.source);
5966
5928
  const { thumbnailRef, vtName, open, openLightbox, closeLightbox } = useLightbox();
@@ -6300,17 +6262,14 @@ function DropOverlay() {
6300
6262
  });
6301
6263
  }
6302
6264
  function CopilotChatView({ messageView, input, scrollView, suggestionView, welcomeScreen, messages = [], autoScroll = true, isRunning = false, suggestions, suggestionLoadingIndexes, onSelectSuggestion, onSubmitMessage, onStop, inputMode, inputValue, onInputChange, onStartTranscribe, onCancelTranscribe, onFinishTranscribe, onFinishTranscribeWithAudio, attachments, onRemoveAttachment, onAddFile, dragOver, onDragOver, onDragLeave, onDrop, isConnecting = false, hasExplicitThreadId = false, disclaimer, children, className, ...props }) {
6303
- const [inputContainerEl, setInputContainerEl] = useState(null);
6265
+ const inputContainerRef = useRef(null);
6304
6266
  const [inputContainerHeight, setInputContainerHeight] = useState(0);
6305
6267
  const [isResizing, setIsResizing] = useState(false);
6306
6268
  const resizeTimeoutRef = useRef(null);
6307
6269
  const { isKeyboardOpen, keyboardHeight, availableHeight } = useKeyboardHeight();
6308
6270
  useEffect(() => {
6309
- const element = inputContainerEl;
6310
- if (!element) {
6311
- setInputContainerHeight(0);
6312
- return;
6313
- }
6271
+ const element = inputContainerRef.current;
6272
+ if (!element) return;
6314
6273
  const resizeObserver = new ResizeObserver((entries) => {
6315
6274
  for (const entry of entries) {
6316
6275
  const newHeight = entry.contentRect.height;
@@ -6333,7 +6292,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
6333
6292
  resizeObserver.disconnect();
6334
6293
  if (resizeTimeoutRef.current) clearTimeout(resizeTimeoutRef.current);
6335
6294
  };
6336
- }, [inputContainerEl]);
6295
+ }, []);
6337
6296
  const BoundMessageView = renderSlot(messageView, CopilotChatMessageView, {
6338
6297
  messages,
6339
6298
  isRunning
@@ -6444,7 +6403,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
6444
6403
  dragOver && /* @__PURE__ */ jsx(DropOverlay, {}),
6445
6404
  BoundScrollView,
6446
6405
  /* @__PURE__ */ jsxs("div", {
6447
- ref: setInputContainerEl,
6406
+ ref: inputContainerRef,
6448
6407
  "data-testid": "copilot-input-overlay",
6449
6408
  className: "cpk:absolute cpk:bottom-0 cpk:left-0 cpk:right-0 cpk:z-20 cpk:pointer-events-none",
6450
6409
  children: [attachments && attachments.length > 0 && /* @__PURE__ */ jsx("div", {
@@ -9794,4 +9753,4 @@ function validateProps(props) {
9794
9753
 
9795
9754
  //#endregion
9796
9755
  export { CopilotKitProvider as $, CopilotChatSuggestionView as A, useConfigureSuggestions as B, CopilotChatToggleButton as C, CopilotChatView_default as D, CopilotChat as E, CopilotChatAssistantMessage_default as F, useRenderTool as G, useCapabilities as H, CopilotChatToolCallsView as I, useRenderActivityMessage as J, useComponent as K, useAttachments as L, CopilotChatReasoningMessage_default as M, CopilotChatUserMessage_default as N, CopilotChatAttachmentQueue as O, CopilotChatAttachmentRenderer as P, useRenderToolCall as Q, useThreads$1 as R, CopilotModalHeader as S, DefaultOpenIcon as T, useHumanInTheLoop as U, useSuggestions as V, useDefaultRenderTool as W, UseAgentUpdate as X, useRenderCustomMessages as Y, useAgent as Z, WildcardToolCallRender as _, ThreadsProvider as a, SandboxFunctionsContext as at, CopilotPopupView as b, CoAgentStateRendersProvider as c, MCPAppsActivityRenderer as ct, shouldShowDevConsole as d, CopilotChatInput_default as dt, useCopilotKit as et, useToast as f, AudioRecorderError as ft, useCopilotContext as g, CopilotContext as h, useCopilotChatConfiguration as ht, ThreadsContext as i, createA2UIMessageRenderer as it, CopilotChatSuggestionPill as j, CopilotChatMessageView as k, useCoAgentStateRenders as l, MCPAppsActivityType as lt, useCopilotMessagesContext as m, CopilotChatConfigurationProvider as mt, defaultCopilotContextCategories as n, useAgentContext as nt, useThreads as o, useSandboxFunctions as ot, CopilotMessagesContext as p, CopilotChatAudioRecorder as pt, useFrontendTool as q, CoAgentStateRenderBridge as r, defineToolCallRenderer as rt, CoAgentStateRendersContext as s, MCPAppsActivityContentSchema as st, CopilotKit as t, CopilotKitCoreReact as tt, useAsyncCallback as u, CopilotKitInspector as ut, CopilotPopup as v, DefaultCloseIcon as w, CopilotSidebarView as x, CopilotSidebar as y, useInterrupt as z };
9797
- //# sourceMappingURL=copilotkit-OmIUrWym.mjs.map
9756
+ //# sourceMappingURL=copilotkit-Bd0m5HFp.mjs.map