@yourgpt/copilot-sdk 1.4.34 → 1.4.36

package/dist/styles.css

@@ -1,66 +1,61 @@
 /* YourGPT Copilot SDK - Base Styles */
-/* Default neutral theme */
-
-:root {
-  --background: hsl(0 0% 100%);
-  --foreground: hsl(240 10% 3.9%);
-
-  --card: hsl(0 0% 100%);
-  --card-foreground: hsl(240 10% 3.9%);
-
-  --popover: hsl(0 0% 100%);
-  --popover-foreground: hsl(240 10% 3.9%);
-
-  --primary: hsl(240 5.9% 10%);
-  --primary-foreground: hsl(0 0% 98%);
-
-  --secondary: hsl(240 4.8% 95.9%);
-  --secondary-foreground: hsl(240 5.9% 10%);
-
-  --muted: hsl(240 4.8% 95.9%);
-  --muted-foreground: hsl(240 3.8% 46.1%);
-
-  --accent: hsl(240 4.8% 95.9%);
-  --accent-foreground: hsl(240 5.9% 10%);
-
-  --destructive: hsl(0 84.2% 60.2%);
-  --destructive-foreground: hsl(0 0% 98%);
-
-  --border: hsl(240 5.9% 90%);
-  --input: hsl(240 5.9% 90%);
-  --ring: hsl(240 5.9% 10%);
-
-  --radius: 0.5rem;
-}
-
-.dark {
-  --background: hsl(240 10% 3.9%);
-  --foreground: hsl(0 0% 98%);
-
-  --card: hsl(240 10% 3.9%);
-  --card-foreground: hsl(0 0% 98%);
-
-  --popover: hsl(240 10% 3.9%);
-  --popover-foreground: hsl(0 0% 98%);
-
-  --primary: hsl(0 0% 98%);
-  --primary-foreground: hsl(240 5.9% 10%);
-
-  --secondary: hsl(240 3.7% 15.9%);
-  --secondary-foreground: hsl(0 0% 98%);
-
-  --muted: hsl(240 3.7% 15.9%);
-  --muted-foreground: hsl(240 5% 64.9%);
-
-  --accent: hsl(240 3.7% 15.9%);
-  --accent-foreground: hsl(0 0% 98%);
-
-  --destructive: hsl(0 62.8% 30.6%);
-  --destructive-foreground: hsl(0 0% 98%);
-
-  --border: hsl(240 3.7% 15.9%);
-  --input: hsl(240 3.7% 15.9%);
-  --ring: hsl(240 4.9% 83.9%);
+/*
+ * IMPORTANT: These are fallback defaults only.
+ * If user has their own shadcn/ui CSS variables defined on :root,
+ * those will be used instead (user styles should be imported AFTER this file
+ * or defined outside @layer to take precedence).
+ *
+ * To ensure your app's variables take precedence:
+ * 1. Import SDK styles first: import "@yourgpt/copilot-sdk/ui/styles.css"
+ * 2. Then import your globals.css with your :root variables
+ */
+
+/* Low-priority layer for SDK defaults - user styles will override */
+@layer csdk-base {
+  :root {
+    --background: hsl(0 0% 100%);
+    --foreground: hsl(240 10% 3.9%);
+    --card: hsl(0 0% 100%);
+    --card-foreground: hsl(240 10% 3.9%);
+    --popover: hsl(0 0% 100%);
+    --popover-foreground: hsl(240 10% 3.9%);
+    --primary: hsl(240 5.9% 10%);
+    --primary-foreground: hsl(0 0% 98%);
+    --secondary: hsl(240 4.8% 95.9%);
+    --secondary-foreground: hsl(240 5.9% 10%);
+    --muted: hsl(240 4.8% 95.9%);
+    --muted-foreground: hsl(240 3.8% 46.1%);
+    --accent: hsl(240 4.8% 95.9%);
+    --accent-foreground: hsl(240 5.9% 10%);
+    --destructive: hsl(0 84.2% 60.2%);
+    --destructive-foreground: hsl(0 0% 98%);
+    --border: hsl(240 5.9% 90%);
+    --input: hsl(240 5.9% 90%);
+    --ring: hsl(240 5.9% 10%);
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: hsl(240 10% 3.9%);
+    --foreground: hsl(0 0% 98%);
+    --card: hsl(240 10% 3.9%);
+    --card-foreground: hsl(0 0% 98%);
+    --popover: hsl(240 10% 3.9%);
+    --popover-foreground: hsl(0 0% 98%);
+    --primary: hsl(0 0% 98%);
+    --primary-foreground: hsl(240 5.9% 10%);
+    --secondary: hsl(240 3.7% 15.9%);
+    --secondary-foreground: hsl(0 0% 98%);
+    --muted: hsl(240 3.7% 15.9%);
+    --muted-foreground: hsl(240 5% 64.9%);
+    --accent: hsl(240 3.7% 15.9%);
+    --accent-foreground: hsl(0 0% 98%);
+    --destructive: hsl(0 62.8% 30.6%);
+    --destructive-foreground: hsl(0 0% 98%);
+    --border: hsl(240 3.7% 15.9%);
+    --input: hsl(240 3.7% 15.9%);
+    --ring: hsl(240 4.9% 83.9%);
+  }
 }
 
 /* Loader Animations */

package/dist/ui/index.cjs

@@ -59,7 +59,7 @@ function DotsLoader({
     "div",
     {
       className: cn(
-        "flex items-end space-x-1",
+        "flex items-center translate-y-[-2px] space-x-1",
         containerSizes[size],
         className
       ),
@@ -199,15 +199,7 @@ function TerminalLoader({
       ),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-primary font-mono", textSizes[size]), children: ">" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: cn(
-              "bg-primary csdk-loader-blink",
-              cursorSizes[size]
-            )
-          }
-        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("bg-primary csdk-loader-blink", cursorSizes[size]) }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading" })
       ]
     }
@@ -605,7 +597,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
       ),
@@ -683,7 +675,7 @@ var AvatarImage = React18__namespace.forwardRef(({ className, ...props }, ref) =
   AvatarPrimitive__namespace.Image,
   {
     ref,
-    className: cn("aspect-square h-full w-full", className),
+    className: cn("aspect-square h-full w-full object-cover", className),
     ...props
   }
 ));
@@ -703,12 +695,16 @@ AvatarFallback.displayName = AvatarPrimitive__namespace.Fallback.displayName;
 var Message = ({ children, className, ...props }) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: cn("csdk-avatar flex shrink-0 size-7", className), children });
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: cn("csdk-avatar size-7 shrink-0", className), children: [
     /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src, alt }),
     /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { delayMs, children: fallbackIcon || fallback })
@@ -3505,9 +3501,10 @@ function DefaultMessage({
           showUserAvatar && /* @__PURE__ */ jsxRuntime.jsx(
             MessageAvatar,
             {
-              src: userAvatar.src || "",
+              src: userAvatar.src,
               alt: "User",
-              fallback: userAvatar.fallback
+              fallback: userAvatar.fallback,
+              children: userAvatar.component
             }
           )
         ]
@@ -3544,11 +3541,12 @@ function DefaultMessage({
     /* @__PURE__ */ jsxRuntime.jsx(
       MessageAvatar,
       {
-        src: assistantAvatar.src || "",
+        src: assistantAvatar.src,
         alt: "Assistant",
         fallback: assistantAvatar.fallback,
-        fallbackIcon: !assistantAvatar.src && !assistantAvatar.fallback ? /* @__PURE__ */ jsxRuntime.jsx(copilot_sdk_logo_default, { className: "size-5" }) : void 0,
-        className: "bg-muted"
+        fallbackIcon: !assistantAvatar.src && !assistantAvatar.fallback && !assistantAvatar.component ? /* @__PURE__ */ jsxRuntime.jsx(copilot_sdk_logo_default, { className: "size-5" }) : void 0,
+        className: "bg-muted",
+        children: assistantAvatar.component
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 max-w-[80%] w-fit", children: [
@@ -3614,7 +3612,9 @@ function DefaultMessage({
                 toolCallId: exec.id,
                 toolName: exec.name
               };
-              const output = toolDef.render(renderProps);
+              const output = toolDef.render(
+                renderProps
+              );
               return /* @__PURE__ */ jsxRuntime.jsx(React18__namespace.Fragment, { children: output }, exec.id);
             }
             return null;
@@ -3650,7 +3650,9 @@ function DefaultMessage({
                 toolName: tool.name,
                 approval: approvalCallbacks
               };
-              const output = toolDef.render(renderProps);
+              const output = toolDef.render(
+                renderProps
+              );
               return /* @__PURE__ */ jsxRuntime.jsx(React18__namespace.Fragment, { children: output }, tool.id);
             }
             return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3664,7 +3666,11 @@ function DefaultMessage({
                   void 0,
                   permissionLevel
                 ),
-                onReject: (permissionLevel) => onRejectToolExecution?.(tool.id, void 0, permissionLevel)
+                onReject: (permissionLevel) => onRejectToolExecution?.(
+                  tool.id,
+                  void 0,
+                  permissionLevel
+                )
               },
               tool.id
             );
@@ -4346,8 +4352,8 @@ function ChatComponent({
   // Appearance
   showPoweredBy = true,
   showUserAvatar = false,
-  userAvatar = { fallback: "U" },
-  assistantAvatar = { fallback: "AI" },
+  userAvatar: userAvatarProp,
+  assistantAvatar: assistantAvatarProp,
   loaderVariant = "typing",
   fontSize = "sm",
   // Attachments
@@ -4389,6 +4395,8 @@ function ChatComponent({
   onSwitchThread,
   isThreadBusy
 }) {
+  const userAvatar = { fallback: "U", ...userAvatarProp };
+  const assistantAvatar = { fallback: "AI", ...assistantAvatarProp };
   const [input, setInput] = React18.useState("");
   const [pendingAttachments, setPendingAttachments] = React18.useState([]);
   const [isDragging, setIsDragging] = React18.useState(false);