@copilotkit/react-core 1.56.4-canary.1777529757 → 1.56.4-canary.1777538870

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
 
@@ -5006,101 +5006,20 @@ CopilotChatAssistantMessage.ReadAloudButton.displayName = "CopilotChatAssistantM
5006
5006
  CopilotChatAssistantMessage.RegenerateButton.displayName = "CopilotChatAssistantMessage.RegenerateButton";
5007
5007
  var CopilotChatAssistantMessage_default = CopilotChatAssistantMessage;
5008
5008
 
5009
- //#endregion
5010
- //#region src/v2/components/chat/Lightbox.tsx
5011
- function Lightbox({ onClose, children }) {
5012
- useEffect(() => {
5013
- const handleKey = (e) => {
5014
- if (e.key === "Escape") onClose();
5015
- };
5016
- document.addEventListener("keydown", handleKey);
5017
- return () => document.removeEventListener("keydown", handleKey);
5018
- }, [onClose]);
5019
- if (typeof document === "undefined") return null;
5020
- return createPortal(/* @__PURE__ */ jsxs("div", {
5021
- 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",
5022
- onClick: onClose,
5023
- children: [/* @__PURE__ */ jsx("button", {
5024
- onClick: onClose,
5025
- 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",
5026
- "aria-label": "Close preview",
5027
- children: /* @__PURE__ */ jsx(X, { className: "cpk:w-5 cpk:h-5" })
5028
- }), /* @__PURE__ */ jsx("div", {
5029
- onClick: (e) => e.stopPropagation(),
5030
- children
5031
- })]
5032
- }), document.body);
5033
- }
5034
- /**
5035
- * Hook that manages lightbox open/close and uses the View Transition API to
5036
- * morph the thumbnail into fullscreen content.
5037
- *
5038
- * The trick: `view-transition-name` must live on exactly ONE element at a time.
5039
- * - Old state (thumbnail visible): name is on the thumbnail.
5040
- * - New state (lightbox visible): name moves to the lightbox content.
5041
- * `flushSync` ensures React commits the DOM change synchronously inside the
5042
- * `startViewTransition` callback so the API can snapshot old → new correctly.
5043
- */
5044
- function useLightbox() {
5045
- const thumbnailRef = useRef(null);
5046
- const [open, setOpen] = useState(false);
5047
- const vtName = useId();
5048
- return {
5049
- thumbnailRef,
5050
- vtName,
5051
- open,
5052
- openLightbox: useCallback(() => {
5053
- const thumb = thumbnailRef.current;
5054
- const doc = document;
5055
- if (doc.startViewTransition && thumb) {
5056
- thumb.style.viewTransitionName = vtName;
5057
- doc.startViewTransition(() => {
5058
- thumb.style.viewTransitionName = "";
5059
- flushSync(() => setOpen(true));
5060
- });
5061
- } else setOpen(true);
5062
- }, [vtName]),
5063
- closeLightbox: useCallback(() => {
5064
- const thumb = thumbnailRef.current;
5065
- const doc = document;
5066
- if (doc.startViewTransition && thumb) doc.startViewTransition(() => {
5067
- flushSync(() => setOpen(false));
5068
- thumb.style.viewTransitionName = vtName;
5069
- }).finished.then(() => {
5070
- thumb.style.viewTransitionName = "";
5071
- }).catch(() => {
5072
- thumb.style.viewTransitionName = "";
5073
- });
5074
- else setOpen(false);
5075
- }, [vtName])
5076
- };
5077
- }
5078
-
5079
5009
  //#endregion
5080
5010
  //#region src/v2/components/chat/CopilotChatAttachmentRenderer.tsx
5081
5011
  const ImageAttachment = memo(function ImageAttachment({ src, className }) {
5082
5012
  const [error, setError] = useState(false);
5083
- const { thumbnailRef, vtName, open, openLightbox, closeLightbox } = useLightbox();
5084
5013
  if (error) return /* @__PURE__ */ jsx("div", {
5085
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),
5086
5015
  children: /* @__PURE__ */ jsx("span", { children: "Failed to load image" })
5087
5016
  });
5088
- return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("img", {
5089
- ref: thumbnailRef,
5017
+ return /* @__PURE__ */ jsx("img", {
5090
5018
  src,
5091
5019
  alt: "Image attachment",
5092
- 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),
5093
- onClick: openLightbox,
5020
+ className: cn("cpk:max-w-full cpk:h-auto cpk:rounded-lg", className),
5094
5021
  onError: () => setError(true)
5095
- }), open && /* @__PURE__ */ jsx(Lightbox, {
5096
- onClose: closeLightbox,
5097
- children: /* @__PURE__ */ jsx("img", {
5098
- style: { viewTransitionName: vtName },
5099
- src,
5100
- alt: "Image attachment",
5101
- className: "cpk:max-w-[90vw] cpk:max-h-[90vh] cpk:object-contain cpk:rounded-lg"
5102
- })
5103
- })] });
5022
+ });
5104
5023
  });
5105
5024
  const AudioAttachment = memo(function AudioAttachment({ src, filename, className }) {
5106
5025
  return /* @__PURE__ */ jsxs("div", {
@@ -5225,15 +5144,15 @@ function CopilotChatUserMessage({ message, onEditMessage, branchIndex, numberOfB
5225
5144
  "data-message-id": message.id,
5226
5145
  ...props,
5227
5146
  children: [
5147
+ BoundMessageRenderer,
5228
5148
  mediaParts.length > 0 && /* @__PURE__ */ jsx("div", {
5229
- 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",
5230
5150
  children: mediaParts.map((part, index) => /* @__PURE__ */ jsx(CopilotChatAttachmentRenderer, {
5231
5151
  type: part.type,
5232
5152
  source: part.source,
5233
5153
  filename: getFilename(part)
5234
5154
  }, index))
5235
5155
  }),
5236
- BoundMessageRenderer,
5237
5156
  BoundToolbar
5238
5157
  ]
5239
5158
  });
@@ -5937,6 +5856,73 @@ function AttachmentPreview({ attachment }) {
5937
5856
  case "document": return /* @__PURE__ */ jsx(DocumentPreview, { attachment });
5938
5857
  }
5939
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
+ }
5940
5926
  function ImagePreview({ attachment }) {
5941
5927
  const src = getSourceUrl(attachment.source);
5942
5928
  const { thumbnailRef, vtName, open, openLightbox, closeLightbox } = useLightbox();
@@ -6276,17 +6262,14 @@ function DropOverlay() {
6276
6262
  });
6277
6263
  }
6278
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 }) {
6279
- const [inputContainerEl, setInputContainerEl] = useState(null);
6265
+ const inputContainerRef = useRef(null);
6280
6266
  const [inputContainerHeight, setInputContainerHeight] = useState(0);
6281
6267
  const [isResizing, setIsResizing] = useState(false);
6282
6268
  const resizeTimeoutRef = useRef(null);
6283
6269
  const { isKeyboardOpen, keyboardHeight, availableHeight } = useKeyboardHeight();
6284
6270
  useEffect(() => {
6285
- const element = inputContainerEl;
6286
- if (!element) {
6287
- setInputContainerHeight(0);
6288
- return;
6289
- }
6271
+ const element = inputContainerRef.current;
6272
+ if (!element) return;
6290
6273
  const resizeObserver = new ResizeObserver((entries) => {
6291
6274
  for (const entry of entries) {
6292
6275
  const newHeight = entry.contentRect.height;
@@ -6309,7 +6292,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
6309
6292
  resizeObserver.disconnect();
6310
6293
  if (resizeTimeoutRef.current) clearTimeout(resizeTimeoutRef.current);
6311
6294
  };
6312
- }, [inputContainerEl]);
6295
+ }, []);
6313
6296
  const BoundMessageView = renderSlot(messageView, CopilotChatMessageView, {
6314
6297
  messages,
6315
6298
  isRunning
@@ -6332,7 +6315,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
6332
6315
  bottomAnchored: true,
6333
6316
  ...disclaimer !== void 0 ? { disclaimer } : {}
6334
6317
  });
6335
- const hasSuggestions = !isConnecting && Array.isArray(suggestions) && suggestions.length > 0;
6318
+ const hasSuggestions = !isConnecting && !isRunning && Array.isArray(suggestions) && suggestions.length > 0;
6336
6319
  const BoundSuggestionView = hasSuggestions ? renderSlot(suggestionView, CopilotChatSuggestionView, {
6337
6320
  suggestions,
6338
6321
  loadingIndexes: suggestionLoadingIndexes,
@@ -6420,7 +6403,7 @@ function CopilotChatView({ messageView, input, scrollView, suggestionView, welco
6420
6403
  dragOver && /* @__PURE__ */ jsx(DropOverlay, {}),
6421
6404
  BoundScrollView,
6422
6405
  /* @__PURE__ */ jsxs("div", {
6423
- ref: setInputContainerEl,
6406
+ ref: inputContainerRef,
6424
6407
  "data-testid": "copilot-input-overlay",
6425
6408
  className: "cpk:absolute cpk:bottom-0 cpk:left-0 cpk:right-0 cpk:z-20 cpk:pointer-events-none",
6426
6409
  children: [attachments && attachments.length > 0 && /* @__PURE__ */ jsx("div", {
@@ -9770,4 +9753,4 @@ function validateProps(props) {
9770
9753
 
9771
9754
  //#endregion
9772
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 };
9773
- //# sourceMappingURL=copilotkit-DAatqMh2.mjs.map
9756
+ //# sourceMappingURL=copilotkit-Bd0m5HFp.mjs.map