@yourgpt/copilot-sdk 1.4.34 → 1.4.35

package/dist/ui/index.d.cts

@@ -13,7 +13,7 @@ interface LoaderProps {
     text?: string;
     className?: string;
 }
-declare function Loader({ variant, size, text, className, }: LoaderProps): react_jsx_runtime.JSX.Element;
+declare function Loader({ variant, size, text, className }: LoaderProps): react_jsx_runtime.JSX.Element;
 
 type MarkdownProps = {
     children: string;
@@ -90,16 +90,20 @@ type MessageProps = {
 } & React.HTMLProps<HTMLDivElement>;
 declare const Message: ({ children, className, ...props }: MessageProps) => react_jsx_runtime.JSX.Element;
 type MessageAvatarProps = {
-    src: string;
-    alt: string;
+    /** Image source URL */
+    src?: string;
+    /** Alt text for the image */
+    alt?: string;
     /** Text fallback (e.g. "AI") */
     fallback?: string;
     /** Icon/component fallback (takes precedence over text fallback when src is empty) */
     fallbackIcon?: React.ReactNode;
+    /** Custom avatar component - when provided, replaces the default avatar */
+    children?: React.ReactNode;
     delayMs?: number;
     className?: string;
 };
-declare const MessageAvatar: ({ src, alt, fallback, fallbackIcon, delayMs, className, }: MessageAvatarProps) => react_jsx_runtime.JSX.Element;
+declare const MessageAvatar: ({ src, alt, fallback, fallbackIcon, children, delayMs, className, }: MessageAvatarProps) => react_jsx_runtime.JSX.Element;
 type MessageContentProps = {
     children: React.ReactNode;
     markdown?: boolean;
@@ -1142,11 +1146,15 @@ type ChatProps = {
     userAvatar?: {
         src?: string;
         fallback?: string;
+        /** Custom avatar component - when provided, replaces the default avatar */
+        component?: React__default.ReactNode;
     };
     /** Assistant avatar config */
     assistantAvatar?: {
         src?: string;
         fallback?: string;
+        /** Custom avatar component - when provided, replaces the default avatar */
+        component?: React__default.ReactNode;
     };
     /** Loader variant for typing indicator */
     loaderVariant?: "dots" | "typing" | "wave" | "terminal" | "text-blink" | "text-shimmer" | "loading-dots";
@@ -1359,7 +1367,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, assistantAvatar, loaderVariant, fontSize, maxFileSize, allowedFileTypes, attachmentsEnabled, attachmentsDisabledTooltip, processAttachment: processAttachmentProp, suggestions, onSuggestionClick, welcome, recentThreads, onSelectThread, onDeleteThread, onViewMoreThreads, isProcessing, registeredTools, toolRenderers, onApproveToolExecution, onRejectToolExecution, showFollowUps, followUpClassName, followUpButtonClassName, renderMessage, renderInput, renderHeader, className, classNames, onNewChat, threads, currentThreadId, onSwitchThread, isThreadBusy, }: ChatProps): react_jsx_runtime.JSX.Element;
+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, processAttachment: processAttachmentProp, suggestions, onSuggestionClick, welcome, recentThreads, onSelectThread, onDeleteThread, onViewMoreThreads, isProcessing, registeredTools, toolRenderers, onApproveToolExecution, onRejectToolExecution, showFollowUps, followUpClassName, followUpButtonClassName, renderMessage, renderInput, renderHeader, className, classNames, onNewChat, threads, currentThreadId, onSwitchThread, isThreadBusy, }: ChatProps): react_jsx_runtime.JSX.Element;
 /**
  * Chat component with compound component pattern.
  *

package/dist/ui/index.d.ts

@@ -13,7 +13,7 @@ interface LoaderProps {
     text?: string;
     className?: string;
 }
-declare function Loader({ variant, size, text, className, }: LoaderProps): react_jsx_runtime.JSX.Element;
+declare function Loader({ variant, size, text, className }: LoaderProps): react_jsx_runtime.JSX.Element;
 
 type MarkdownProps = {
     children: string;
@@ -90,16 +90,20 @@ type MessageProps = {
 } & React.HTMLProps<HTMLDivElement>;
 declare const Message: ({ children, className, ...props }: MessageProps) => react_jsx_runtime.JSX.Element;
 type MessageAvatarProps = {
-    src: string;
-    alt: string;
+    /** Image source URL */
+    src?: string;
+    /** Alt text for the image */
+    alt?: string;
     /** Text fallback (e.g. "AI") */
     fallback?: string;
     /** Icon/component fallback (takes precedence over text fallback when src is empty) */
     fallbackIcon?: React.ReactNode;
+    /** Custom avatar component - when provided, replaces the default avatar */
+    children?: React.ReactNode;
     delayMs?: number;
     className?: string;
 };
-declare const MessageAvatar: ({ src, alt, fallback, fallbackIcon, delayMs, className, }: MessageAvatarProps) => react_jsx_runtime.JSX.Element;
+declare const MessageAvatar: ({ src, alt, fallback, fallbackIcon, children, delayMs, className, }: MessageAvatarProps) => react_jsx_runtime.JSX.Element;
 type MessageContentProps = {
     children: React.ReactNode;
     markdown?: boolean;
@@ -1142,11 +1146,15 @@ type ChatProps = {
     userAvatar?: {
         src?: string;
         fallback?: string;
+        /** Custom avatar component - when provided, replaces the default avatar */
+        component?: React__default.ReactNode;
     };
     /** Assistant avatar config */
     assistantAvatar?: {
         src?: string;
         fallback?: string;
+        /** Custom avatar component - when provided, replaces the default avatar */
+        component?: React__default.ReactNode;
     };
     /** Loader variant for typing indicator */
     loaderVariant?: "dots" | "typing" | "wave" | "terminal" | "text-blink" | "text-shimmer" | "loading-dots";
@@ -1359,7 +1367,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, assistantAvatar, loaderVariant, fontSize, maxFileSize, allowedFileTypes, attachmentsEnabled, attachmentsDisabledTooltip, processAttachment: processAttachmentProp, suggestions, onSuggestionClick, welcome, recentThreads, onSelectThread, onDeleteThread, onViewMoreThreads, isProcessing, registeredTools, toolRenderers, onApproveToolExecution, onRejectToolExecution, showFollowUps, followUpClassName, followUpButtonClassName, renderMessage, renderInput, renderHeader, className, classNames, onNewChat, threads, currentThreadId, onSwitchThread, isThreadBusy, }: ChatProps): react_jsx_runtime.JSX.Element;
+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, processAttachment: processAttachmentProp, suggestions, onSuggestionClick, welcome, recentThreads, onSelectThread, onDeleteThread, onViewMoreThreads, isProcessing, registeredTools, toolRenderers, onApproveToolExecution, onRejectToolExecution, showFollowUps, followUpClassName, followUpButtonClassName, renderMessage, renderInput, renderHeader, className, classNames, onNewChat, threads, currentThreadId, onSwitchThread, isThreadBusy, }: ChatProps): react_jsx_runtime.JSX.Element;
 /**
  * Chat component with compound component pattern.
  *

package/dist/ui/index.js

@@ -18,10 +18,7 @@ import { Popover as Popover$1 } from '@base-ui/react/popover';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function DotsLoader({
-  className,
-  size = "md"
-}) {
+function DotsLoader({ className, size = "md" }) {
   const dotSizes = {
     sm: "h-1 w-1",
     md: "h-1.5 w-1.5",
@@ -32,37 +29,21 @@ function DotsLoader({
     md: "h-5",
     lg: "h-6"
   };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "flex items-end space-x-1",
-        containerSizes[size],
-        className
-      ),
-      children: [
-        [...Array(3)].map((_, i) => /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "bg-primary csdk-loader-bounce-dots rounded-full",
-              dotSizes[size]
-            ),
-            style: {
-              animationDelay: `${i * 160}ms`
-            }
-          },
-          i
-        )),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading" })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center translate-y-[-2px] space-x-1", containerSizes[size], className), children: [
+    [...Array(3)].map((_, i) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("bg-primary csdk-loader-bounce-dots rounded-full", dotSizes[size]),
+        style: {
+          animationDelay: `${i * 160}ms`
+        }
+      },
+      i
+    )),
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading" })
+  ] });
 }
-function TypingLoader({
-  className,
-  size = "md"
-}) {
+function TypingLoader({ className, size = "md" }) {
   const dotSizes = {
     sm: "h-1 w-1",
     md: "h-1.5 w-1.5",
@@ -73,37 +54,21 @@ function TypingLoader({
     md: "h-5",
     lg: "h-6"
   };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "flex items-center space-x-1",
-        containerSizes[size],
-        className
-      ),
-      children: [
-        [...Array(3)].map((_, i) => /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "bg-primary csdk-loader-typing rounded-full",
-              dotSizes[size]
-            ),
-            style: {
-              animationDelay: `${i * 250}ms`
-            }
-          },
-          i
-        )),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading" })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center space-x-1", containerSizes[size], className), children: [
+    [...Array(3)].map((_, i) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("bg-primary csdk-loader-typing rounded-full", dotSizes[size]),
+        style: {
+          animationDelay: `${i * 250}ms`
+        }
+      },
+      i
+    )),
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading" })
+  ] });
 }
-function WaveLoader({
-  className,
-  size = "md"
-}) {
+function WaveLoader({ className, size = "md" }) {
   const barWidths = {
     sm: "w-0.5",
     md: "w-0.5",
@@ -119,38 +84,22 @@ function WaveLoader({
     md: ["8px", "12px", "16px", "12px", "8px"],
     lg: ["10px", "15px", "20px", "15px", "10px"]
   };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "flex items-center gap-0.5",
-        containerSizes[size],
-        className
-      ),
-      children: [
-        [...Array(5)].map((_, i) => /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "bg-primary csdk-loader-wave rounded-full",
-              barWidths[size]
-            ),
-            style: {
-              animationDelay: `${i * 100}ms`,
-              height: heights[size][i]
-            }
-          },
-          i
-        )),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading" })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-0.5", containerSizes[size], className), children: [
+    [...Array(5)].map((_, i) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("bg-primary csdk-loader-wave rounded-full", barWidths[size]),
+        style: {
+          animationDelay: `${i * 100}ms`,
+          height: heights[size][i]
+        }
+      },
+      i
+    )),
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading" })
+  ] });
 }
-function TerminalLoader({
-  className,
-  size = "md"
-}) {
+function TerminalLoader({ className, size = "md" }) {
   const cursorSizes = {
     sm: "h-3 w-1.5",
     md: "h-4 w-2",
@@ -166,57 +115,21 @@ function TerminalLoader({
     md: "h-5",
     lg: "h-6"
   };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "flex items-center space-x-1",
-        containerSizes[size],
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx("span", { className: cn("text-primary font-mono", textSizes[size]), children: ">" }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "bg-primary csdk-loader-blink",
-              cursorSizes[size]
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading" })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center space-x-1", containerSizes[size], className), children: [
+    /* @__PURE__ */ jsx("span", { className: cn("text-primary font-mono", textSizes[size]), children: ">" }),
+    /* @__PURE__ */ jsx("div", { className: cn("bg-primary csdk-loader-blink", cursorSizes[size]) }),
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading" })
+  ] });
 }
-function TextBlinkLoader({
-  text = "Thinking",
-  className,
-  size = "md"
-}) {
+function TextBlinkLoader({ text = "Thinking", className, size = "md" }) {
   const textSizes = {
     sm: "text-xs",
     md: "text-sm",
     lg: "text-base"
   };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "csdk-loader-text-blink font-medium",
-        textSizes[size],
-        className
-      ),
-      children: text
-    }
-  );
+  return /* @__PURE__ */ jsx("div", { className: cn("csdk-loader-text-blink font-medium", textSizes[size], className), children: text });
 }
-function TextShimmerLoader({
-  text = "Thinking",
-  className,
-  size = "md"
-}) {
+function TextShimmerLoader({ text = "Thinking", className, size = "md" }) {
   const textSizes = {
     sm: "text-xs",
     md: "text-sm",
@@ -236,11 +149,7 @@ function TextShimmerLoader({
     }
   );
 }
-function TextDotsLoader({
-  className,
-  text = "Thinking",
-  size = "md"
-}) {
+function TextDotsLoader({ className, text = "Thinking", size = "md" }) {
   const textSizes = {
     sm: "text-xs",
     md: "text-sm",
@@ -249,39 +158,13 @@ function TextDotsLoader({
   return /* @__PURE__ */ jsxs("div", { className: cn("inline-flex items-center", className), children: [
     /* @__PURE__ */ jsx("span", { className: cn("text-primary font-medium", textSizes[size]), children: text }),
     /* @__PURE__ */ jsxs("span", { className: "inline-flex", children: [
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: "text-primary csdk-loader-loading-dots",
-          style: { animationDelay: "0.2s" },
-          children: "."
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: "text-primary csdk-loader-loading-dots",
-          style: { animationDelay: "0.4s" },
-          children: "."
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: "text-primary csdk-loader-loading-dots",
-          style: { animationDelay: "0.6s" },
-          children: "."
-        }
-      )
+      /* @__PURE__ */ jsx("span", { className: "text-primary csdk-loader-loading-dots", style: { animationDelay: "0.2s" }, children: "." }),
+      /* @__PURE__ */ jsx("span", { className: "text-primary csdk-loader-loading-dots", style: { animationDelay: "0.4s" }, children: "." }),
+      /* @__PURE__ */ jsx("span", { className: "text-primary csdk-loader-loading-dots", style: { animationDelay: "0.6s" }, children: "." })
     ] })
   ] });
 }
-function Loader({
-  variant = "typing",
-  size = "md",
-  text,
-  className
-}) {
+function Loader({ variant = "typing", size = "md", text, className }) {
   switch (variant) {
     case "dots":
       return /* @__PURE__ */ jsx(DotsLoader, { size, className });
@@ -582,7 +465,7 @@ function ScrollButton({
       variant,
       size,
       className: cn(
-        "h-10 w-10 rounded-full transition-all duration-150 ease-out shadow-md",
+        "h-10 w-10 rounded-full transition-all duration-150 ease-out shadow-md bg-background",
         !isAtBottom ? "translate-y-0 scale-100 opacity-100" : "pointer-events-none translate-y-4 scale-95 opacity-0",
         className
       ),
@@ -660,7 +543,7 @@ var AvatarImage = React18.forwardRef(({ className, ...props }, ref) => /* @__PUR
   AvatarPrimitive.Image,
   {
     ref,
-    className: cn("aspect-square h-full w-full", className),
+    className: cn("aspect-square h-full w-full object-cover", className),
     ...props
   }
 ));
@@ -680,12 +563,16 @@ AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 var Message = ({ children, className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("csdk-message flex gap-3", className), ...props, children });
 var MessageAvatar = ({
   src,
-  alt,
+  alt = "Avatar",
   fallback,
   fallbackIcon,
+  children,
   delayMs,
   className
 }) => {
+  if (children) {
+    return /* @__PURE__ */ jsx("span", { className: cn("csdk-avatar flex shrink-0 size-7", className), children });
+  }
   return /* @__PURE__ */ jsxs(Avatar, { className: cn("csdk-avatar size-7 shrink-0", className), children: [
     /* @__PURE__ */ jsx(AvatarImage, { src, alt }),
     /* @__PURE__ */ jsx(AvatarFallback, { delayMs, children: fallbackIcon || fallback })
@@ -3482,9 +3369,10 @@ function DefaultMessage({
           showUserAvatar && /* @__PURE__ */ jsx(
             MessageAvatar,
             {
-              src: userAvatar.src || "",
+              src: userAvatar.src,
               alt: "User",
-              fallback: userAvatar.fallback
+              fallback: userAvatar.fallback,
+              children: userAvatar.component
             }
           )
         ]
@@ -3521,11 +3409,12 @@ function DefaultMessage({
     /* @__PURE__ */ jsx(
       MessageAvatar,
       {
-        src: assistantAvatar.src || "",
+        src: assistantAvatar.src,
         alt: "Assistant",
         fallback: assistantAvatar.fallback,
-        fallbackIcon: !assistantAvatar.src && !assistantAvatar.fallback ? /* @__PURE__ */ jsx(copilot_sdk_logo_default, { className: "size-5" }) : void 0,
-        className: "bg-muted"
+        fallbackIcon: !assistantAvatar.src && !assistantAvatar.fallback && !assistantAvatar.component ? /* @__PURE__ */ jsx(copilot_sdk_logo_default, { className: "size-5" }) : void 0,
+        className: "bg-muted",
+        children: assistantAvatar.component
       }
     ),
     /* @__PURE__ */ jsxs("div", { className: "min-w-0 max-w-[80%] w-fit", children: [
@@ -4323,8 +4212,8 @@ function ChatComponent({
   // Appearance
   showPoweredBy = true,
   showUserAvatar = false,
-  userAvatar = { fallback: "U" },
-  assistantAvatar = { fallback: "AI" },
+  userAvatar: userAvatarProp,
+  assistantAvatar: assistantAvatarProp,
   loaderVariant = "typing",
   fontSize = "sm",
   // Attachments
@@ -4366,6 +4255,8 @@ function ChatComponent({
   onSwitchThread,
   isThreadBusy
 }) {
+  const userAvatar = { fallback: "U", ...userAvatarProp };
+  const assistantAvatar = { fallback: "AI", ...assistantAvatarProp };
   const [input, setInput] = useState("");
   const [pendingAttachments, setPendingAttachments] = useState([]);
   const [isDragging, setIsDragging] = useState(false);