@yourgpt/copilot-sdk 2.1.5-alpha.7 → 2.1.6

package/dist/ui/index.d.cts

@@ -1468,6 +1468,8 @@ type ChatProps = {
     onStop?: () => void;
     /** Whether AI is currently generating */
     isLoading?: boolean;
+    /** Current error from the AI (shown as a dismissible banner above the input) */
+    error?: Error | null;
     /**
      * Children for compound component pattern.
      * Use Chat.Home, Chat.Input, Chat.Suggestions as children for custom home screens.
@@ -1922,7 +1924,7 @@ declare function BackButton({ className, children, disabled, "aria-label": ariaL
  */
 type ThreadPickerCompoundProps = Omit<ThreadPickerProps, "value" | "threads" | "onSelect" | "onNewThread" | "onDeleteThread" | "disabled">;
 declare function ThreadPickerCompound(props: ThreadPickerCompoundProps): react_jsx_runtime.JSX.Element | null;
-declare function ChatComponent({ messages, onSendMessage, onStop, isLoading, children, placeholder, welcomeMessage, title, showHeader, header, threadPicker, logo, name, onClose, showPoweredBy, showUserAvatar, userAvatar: userAvatarProp, assistantAvatar: assistantAvatarProp, loaderVariant, fontSize, maxFileSize, allowedFileTypes, attachmentsEnabled, attachmentsDisabledTooltip, upload: uploadProp, processAttachment: deprecatedProcessAttachment, suggestions, onSuggestionClick, welcome, recentThreads, onSelectThread, onDeleteThread, onViewMoreThreads, isProcessing, registeredTools, toolRenderers, mcpToolRenderer, fallbackToolRenderer, onApproveToolExecution, onRejectToolExecution, showFollowUps, followUpClassName, followUpButtonClassName, citations, messageView, renderMessage, wrapMessage, renderInput, renderHeader, groupConsecutiveMessages, className, classNames, onNewChat, threads, currentThreadId, onSwitchThread, isThreadBusy, getBranchInfo, onSwitchBranch, onEditMessage, }: ChatProps): react_jsx_runtime.JSX.Element;
+declare function ChatComponent({ messages, onSendMessage, onStop, isLoading, error, children, placeholder, welcomeMessage, title, showHeader, header, threadPicker, logo, name, onClose, showPoweredBy, showUserAvatar, userAvatar: userAvatarProp, assistantAvatar: assistantAvatarProp, loaderVariant, fontSize, maxFileSize, allowedFileTypes, attachmentsEnabled, attachmentsDisabledTooltip, upload: uploadProp, processAttachment: deprecatedProcessAttachment, suggestions, onSuggestionClick, welcome, recentThreads, onSelectThread, onDeleteThread, onViewMoreThreads, isProcessing, registeredTools, toolRenderers, mcpToolRenderer, fallbackToolRenderer, onApproveToolExecution, onRejectToolExecution, showFollowUps, followUpClassName, followUpButtonClassName, citations, messageView, renderMessage, wrapMessage, renderInput, renderHeader, groupConsecutiveMessages, className, classNames, onNewChat, threads, currentThreadId, onSwitchThread, isThreadBusy, getBranchInfo, onSwitchBranch, onEditMessage, }: ChatProps): react_jsx_runtime.JSX.Element;
 /**
  * Chat component with compound component pattern.
  *

package/dist/ui/index.d.ts

@@ -1468,6 +1468,8 @@ type ChatProps = {
     onStop?: () => void;
     /** Whether AI is currently generating */
     isLoading?: boolean;
+    /** Current error from the AI (shown as a dismissible banner above the input) */
+    error?: Error | null;
     /**
      * Children for compound component pattern.
      * Use Chat.Home, Chat.Input, Chat.Suggestions as children for custom home screens.
@@ -1922,7 +1924,7 @@ declare function BackButton({ className, children, disabled, "aria-label": ariaL
  */
 type ThreadPickerCompoundProps = Omit<ThreadPickerProps, "value" | "threads" | "onSelect" | "onNewThread" | "onDeleteThread" | "disabled">;
 declare function ThreadPickerCompound(props: ThreadPickerCompoundProps): react_jsx_runtime.JSX.Element | null;
-declare function ChatComponent({ messages, onSendMessage, onStop, isLoading, children, placeholder, welcomeMessage, title, showHeader, header, threadPicker, logo, name, onClose, showPoweredBy, showUserAvatar, userAvatar: userAvatarProp, assistantAvatar: assistantAvatarProp, loaderVariant, fontSize, maxFileSize, allowedFileTypes, attachmentsEnabled, attachmentsDisabledTooltip, upload: uploadProp, processAttachment: deprecatedProcessAttachment, suggestions, onSuggestionClick, welcome, recentThreads, onSelectThread, onDeleteThread, onViewMoreThreads, isProcessing, registeredTools, toolRenderers, mcpToolRenderer, fallbackToolRenderer, onApproveToolExecution, onRejectToolExecution, showFollowUps, followUpClassName, followUpButtonClassName, citations, messageView, renderMessage, wrapMessage, renderInput, renderHeader, groupConsecutiveMessages, className, classNames, onNewChat, threads, currentThreadId, onSwitchThread, isThreadBusy, getBranchInfo, onSwitchBranch, onEditMessage, }: ChatProps): react_jsx_runtime.JSX.Element;
+declare function ChatComponent({ messages, onSendMessage, onStop, isLoading, error, children, placeholder, welcomeMessage, title, showHeader, header, threadPicker, logo, name, onClose, showPoweredBy, showUserAvatar, userAvatar: userAvatarProp, assistantAvatar: assistantAvatarProp, loaderVariant, fontSize, maxFileSize, allowedFileTypes, attachmentsEnabled, attachmentsDisabledTooltip, upload: uploadProp, processAttachment: deprecatedProcessAttachment, suggestions, onSuggestionClick, welcome, recentThreads, onSelectThread, onDeleteThread, onViewMoreThreads, isProcessing, registeredTools, toolRenderers, mcpToolRenderer, fallbackToolRenderer, onApproveToolExecution, onRejectToolExecution, showFollowUps, followUpClassName, followUpButtonClassName, citations, messageView, renderMessage, wrapMessage, renderInput, renderHeader, groupConsecutiveMessages, className, classNames, onNewChat, threads, currentThreadId, onSwitchThread, isThreadBusy, getBranchInfo, onSwitchBranch, onEditMessage, }: ChatProps): react_jsx_runtime.JSX.Element;
 /**
  * Chat component with compound component pattern.
  *

package/dist/ui/index.js

@@ -1,8 +1,8 @@
-import { useThreadManager } from '../chunk-YHW6JZEF.js';
+import { useThreadManager } from '../chunk-SMNZHZM7.js';
 import { DEFAULT_MCP_UI_SANDBOX, parseMCPUIMessage } from '../chunk-G4SF2PNQ.js';
 import { cn, Loader, TextShimmerLoader } from '../chunk-TXQ37MAO.js';
 export { Loader, cn } from '../chunk-TXQ37MAO.js';
-import { useCopilot } from '../chunk-UZHGMDOK.js';
+import { useCopilot } from '../chunk-2JNH3T6H.js';
 import { createLocalStorageAdapter, createServerAdapter } from '../chunk-J5D3AZF6.js';
 import '../chunk-EWVQWTNV.js';
 import '../chunk-VNLLW3ZI.js';
@@ -3334,12 +3334,8 @@ function PopoverContent({
     Popover$1.Popup,
     {
       className: cn(
+        "csdk-popover-popup",
         "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
-        "data-[state=open]:animate-in data-[state=closed]:animate-out",
-        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-        "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
-        "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       ),
       children
@@ -3474,24 +3470,25 @@ function ThreadPicker({
     setDisplayedThreads((prev) => prev.filter((t) => t.id !== threadId));
     onDeleteThread?.(threadId);
   };
-  return /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
+  return /* @__PURE__ */ jsx("div", { className: cn("relative w-44", className), children: /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
     /* @__PURE__ */ jsxs(
       PopoverTrigger,
       {
         disabled: disabled || loading,
         className: cn(
-          "flex items-center gap-1 w-full",
-          disabled && "opacity-50 cursor-not-allowed",
-          className,
+          "flex items-center gap-1.5 w-full rounded-md px-1.5 py-0.5",
+          "hover:bg-muted/70 transition-colors duration-150",
+          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          disabled && "opacity-50 cursor-not-allowed pointer-events-none",
           buttonClassName
         ),
         children: [
-          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 text-xs ", children: loading ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Loading..." }) : selectedThread ? /* @__PURE__ */ jsx("span", { className: "truncate font-medium text-muted-foreground hover:text-foreground", children: selectedThread.title || "Untitled conversation" }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: placeholder }) }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 text-xs min-w-0 flex-1", children: loading ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground truncate", children: "Loading..." }) : selectedThread ? /* @__PURE__ */ jsx("span", { className: "truncate font-medium text-muted-foreground", children: selectedThread.title || "Untitled conversation" }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/70 truncate", children: placeholder }) }),
           /* @__PURE__ */ jsx(
             ChevronIcon,
             {
               className: cn(
-                "flex-shrink-0 size-3 text-muted-foreground transition-transform",
+                "flex-shrink-0 size-3 text-muted-foreground/60 transition-transform duration-150",
                 isOpen && "rotate-180"
               )
             }
@@ -3504,7 +3501,7 @@ function ThreadPicker({
       {
         align: "start",
         className: cn(
-          "w-[var(--anchor-width)] min-w-[250px] p-0 max-h-[300px] overflow-auto",
+          "p-0 w-56 max-h-[280px] overflow-auto",
           dropdownClassName
         ),
         children: [
@@ -3576,7 +3573,7 @@ function ThreadPicker({
         ]
       }
     )
-  ] });
+  ] }) });
 }
 function formatDate3(date) {
   const now = /* @__PURE__ */ new Date();
@@ -5876,6 +5873,7 @@ function ChatComponent({
   onSendMessage,
   onStop,
   isLoading = false,
+  error,
   // Compound children
   children,
   // Labels
@@ -5954,6 +5952,15 @@ function ChatComponent({
   const [input, setInput] = useState("");
   const [pendingAttachments, setPendingAttachments] = useState([]);
   const [isDragging, setIsDragging] = useState(false);
+  const [isDismissed, setIsDismissed] = useState(false);
+  const [displayedError, setDisplayedError] = useState(null);
+  React19__default.useEffect(() => {
+    if (error) {
+      setDisplayedError(error);
+      setIsDismissed(false);
+    }
+  }, [error]);
+  const showErrorBanner = !!error && !isDismissed;
   const fileInputRef = useRef(null);
   const fileInputId = useId();
   const isFileTypeAllowed = useCallback(
@@ -6044,7 +6051,7 @@ function ChatComponent({
               (att) => att.id === id ? { ...att, status: "ready", attachment } : att
             )
           );
-        } catch (error) {
+        } catch (error2) {
           setPendingAttachments(
             (prev) => prev.map(
               (att) => att.id === id ? {
@@ -6383,6 +6390,66 @@ function ChatComponent({
               className: classNames.suggestions
             }
           ),
+          displayedError && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "mx-2 mb-1 overflow-hidden transition-all duration-200 ease-in-out",
+                showErrorBanner ? "max-h-20 opacity-100" : "max-h-0 opacity-0 mb-0"
+              ),
+              onTransitionEnd: () => {
+                if (!showErrorBanner) setDisplayedError(null);
+              },
+              children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: [
+                /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    className: "mt-0.5 h-3.5 w-3.5 flex-shrink-0",
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    stroke: "currentColor",
+                    strokeWidth: 2,
+                    children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        d: "M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "flex-1 leading-relaxed", children: displayedError.message }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setIsDismissed(true),
+                    className: "flex-shrink-0 opacity-60 hover:opacity-100",
+                    "aria-label": "Dismiss error",
+                    children: /* @__PURE__ */ jsx(
+                      "svg",
+                      {
+                        className: "h-3 w-3",
+                        fill: "none",
+                        viewBox: "0 0 24 24",
+                        stroke: "currentColor",
+                        strokeWidth: 2,
+                        children: /* @__PURE__ */ jsx(
+                          "path",
+                          {
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round",
+                            d: "M6 18L18 6M6 6l12 12"
+                          }
+                        )
+                      }
+                    )
+                  }
+                )
+              ] })
+            }
+          ),
           renderInput ? renderInput() : /* @__PURE__ */ jsxs("div", { className: cn("p-2 pt-0", classNames.input), children: [
             pendingAttachments.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 p-2 mb-2 bg-muted/30 rounded-lg", children: pendingAttachments.map((att) => /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
               att.attachment.type === "image" ? /* @__PURE__ */ jsx(
@@ -7040,7 +7107,8 @@ function CopilotChatBase(props) {
     registeredTools,
     switchBranch,
     getBranchInfo,
-    editMessage
+    editMessage,
+    error: chatError
   } = useCopilot();
   const toolExecutions = rawToolExecutions.map(
     (exec) => ({
@@ -7232,6 +7300,7 @@ function CopilotChatBase(props) {
       onSendMessage: sendMessage,
       onStop: stop,
       isLoading,
+      error: chatError,
       showPoweredBy: chatProps.showPoweredBy ?? true,
       suggestions,
       isProcessing: isProcessingToolResults,