@agentiffai/design 0.1.6 → 0.1.7

package/dist/copilotkit/index.d.cts

@@ -14,6 +14,14 @@ interface CustomCopilotSidebarProps$1 {
     onSetOpen?: (open: boolean) => void;
     instructions?: string;
     className?: string;
+    /**
+     * When true, disables the chat button and prevents opening the sidebar.
+     */
+    disabled?: boolean;
+    /**
+     * Message to display as tooltip when disabled.
+     */
+    disabledReason?: string;
 }
 /**
  * CustomCopilotSidebar - A CopilotSidebar wrapper using our custom components
@@ -28,7 +36,7 @@ interface CustomCopilotSidebarProps$1 {
  * </CustomCopilotSidebar>
  * ```
  */
-declare function CustomCopilotSidebar$1({ children, defaultOpen, onSetOpen, instructions, className, }: CustomCopilotSidebarProps$1): react_jsx_runtime.JSX.Element;
+declare function CustomCopilotSidebar$1({ children, defaultOpen, onSetOpen, instructions, className, disabled, disabledReason, }: CustomCopilotSidebarProps$1): react_jsx_runtime.JSX.Element;
 declare namespace CustomCopilotSidebar$1 {
     var displayName: string;
 }

package/dist/copilotkit/index.d.ts

@@ -14,6 +14,14 @@ interface CustomCopilotSidebarProps$1 {
     onSetOpen?: (open: boolean) => void;
     instructions?: string;
     className?: string;
+    /**
+     * When true, disables the chat button and prevents opening the sidebar.
+     */
+    disabled?: boolean;
+    /**
+     * Message to display as tooltip when disabled.
+     */
+    disabledReason?: string;
 }
 /**
  * CustomCopilotSidebar - A CopilotSidebar wrapper using our custom components
@@ -28,7 +36,7 @@ interface CustomCopilotSidebarProps$1 {
  * </CustomCopilotSidebar>
  * ```
  */
-declare function CustomCopilotSidebar$1({ children, defaultOpen, onSetOpen, instructions, className, }: CustomCopilotSidebarProps$1): react_jsx_runtime.JSX.Element;
+declare function CustomCopilotSidebar$1({ children, defaultOpen, onSetOpen, instructions, className, disabled, disabledReason, }: CustomCopilotSidebarProps$1): react_jsx_runtime.JSX.Element;
 declare namespace CustomCopilotSidebar$1 {
     var displayName: string;
 }

package/dist/copilotkit/index.js

@@ -481,25 +481,24 @@ var Avatar = styled4.img`
   height: 32px;
   border-radius: 50%;
   object-fit: cover;
-  background-color: #e5e7eb;
+  background-color: transparent;
 `;
 var AvatarInitials = styled4.div`
   width: 32px;
   height: 32px;
   border-radius: 50%;
-  background: linear-gradient(135deg, #2CB0AB 0%, #459FB9 100%);
-  color: white;
+  overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 12px;
-  font-weight: 600;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  background-color: #1e3a5f; /* Dark blue background */
+  padding: 4px; /* Make the avatar image smaller inside the circle */
+  box-sizing: border-box;
 
-  svg {
-    width: 18px;
-    height: 18px;
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
   }
 `;
 var ContentContainer = styled4.div`
@@ -841,7 +840,7 @@ var AssistantMessage = ({
     ] });
   };
   return /* @__PURE__ */ jsxs(MessageContainer, { className, children: [
-    /* @__PURE__ */ jsx(AvatarContainer, { children: avatarUrl ? /* @__PURE__ */ jsx(Avatar, { src: avatarUrl, alt: "Assistant avatar" }) : /* @__PURE__ */ jsx(AvatarInitials, { children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M17 13a4 4 0 0 1 0 8c-2.142 0-4-1.79-4-4h-2a4 4 0 1 1-.535-2h3.07A4 4 0 0 1 17 13M2 12v-2h2V7a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v3h2v2z" }) }) }) }),
+    /* @__PURE__ */ jsx(AvatarContainer, { children: avatarUrl ? /* @__PURE__ */ jsx(Avatar, { src: avatarUrl, alt: "Assistant avatar" }) : /* @__PURE__ */ jsx(AvatarInitials, { children: /* @__PURE__ */ jsx(Avatar, { src: "/assets/avatar-transparent-bg.png", alt: "AI Assistant" }) }) }),
     /* @__PURE__ */ jsx(ContentContainer, { children: renderContent() })
   ] });
 };
@@ -1307,7 +1306,8 @@ var InputWrapper = styled4.div`
   box-sizing: border-box;
 
   &:focus-within {
-    border-color: #2CB0AB; /* Teal brand color */
+    /* Subtle focus indication without bold colored border */
+    border-color: rgba(255, 255, 255, 0.3);
     background-color: rgba(50, 50, 52, 0.6);
   }
 `;
@@ -1561,9 +1561,7 @@ var InputAdapter = ({
       autoFocus: isVisible,
       "aria-label": "Chat message input",
       suggestions: [
-        { text: "Create in-depth analysis" },
-        { text: "Identify actionable tasks" },
-        { text: "Summarize key points" }
+        { text: "Explore workflows" }
       ],
       onSuggestionSelect: handleSuggestionSelect
     }
@@ -1973,11 +1971,22 @@ var GlobalSidebarStyles = createGlobalStyle`
     flex-shrink: 0 !important;
     white-space: nowrap !important;
   }
+
+  /* Remove teal/cyan outline from all inputs */
+  .copilotKitSidebar input,
+  .copilotKitSidebar input:focus,
+  .copilotKitSidebar input:focus-visible,
+  .copilotKitSidebar textarea,
+  .copilotKitSidebar textarea:focus,
+  .copilotKitSidebar textarea:focus-visible {
+    outline: none !important;
+    outline-color: transparent !important;
+    box-shadow: none !important;
+  }
 `;
 var StyledChatButton = styled4.button`
   position: fixed;
-  /* Position above the bottom nav bar - matches NavHorizontal safe area */
-  bottom: max(88px, calc(env(safe-area-inset-bottom, 80px) + 8px));
+  bottom: 8px;
   right: 8px;
   width: 36px;
   height: 36px;
@@ -2012,7 +2021,9 @@ function CustomCopilotSidebar({
   defaultOpen = false,
   onSetOpen,
   instructions,
-  className
+  className,
+  disabled = false,
+  disabledReason = "Start a free trial to enable AI chat"
 }) {
   const HeaderAdapterWithClose = (_props) => {
     const { setOpen } = useChatContext();
@@ -2028,16 +2039,26 @@ function CustomCopilotSidebar({
   const CustomButton = (_props) => {
     const { open, setOpen } = useChatContext();
     const handleClick = () => {
+      if (disabled) return;
       const newOpenState = !open;
       setOpen(newOpenState);
       onSetOpen?.(newOpenState);
     };
+    const disabledStyles = disabled ? {
+      background: "rgba(100, 100, 100, 0.5)",
+      boxShadow: "none",
+      cursor: "not-allowed",
+      opacity: 0.6
+    } : {};
     return /* @__PURE__ */ jsx(
       StyledChatButton,
       {
         onClick: handleClick,
-        "aria-label": open ? "Close chat" : "Open chat",
+        "aria-label": disabled ? disabledReason : open ? "Close chat" : "Open chat",
+        "aria-disabled": disabled,
+        title: disabled ? disabledReason : void 0,
         type: "button",
+        style: disabledStyles,
         children: /* @__PURE__ */ jsxs(
           "svg",
           {
@@ -2047,7 +2068,8 @@ function CustomCopilotSidebar({
             fill: "currentColor",
             xmlns: "http://www.w3.org/2000/svg",
             role: "img",
-            "aria-label": "Chat icon",
+            "aria-hidden": "true",
+            style: disabled ? { fill: "rgba(255, 255, 255, 0.5)" } : void 0,
             children: [
               /* @__PURE__ */ jsx("title", { children: "Chat" }),
               /* @__PURE__ */ jsx("path", { d: "M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z" })
@@ -2189,8 +2211,8 @@ var InputWrapper2 = styled4.div`
 	transition: all 0.2s ease;
 
 	&:focus-within {
-		border-color: #2CB0AB;
-		box-shadow: 0 0 0 3px rgba(44, 176, 171, 0.1);
+		/* Subtle focus indication without bold colored border */
+		border-color: rgba(255, 255, 255, 0.3);
 	}
 
 	&:hover:not(:focus-within) {
@@ -2269,8 +2291,7 @@ var SendButton = styled4.button`
 	}
 
 	&:focus-visible {
-		outline: 2px solid #2CB0AB;
-		outline-offset: 2px;
+		outline: none;
 	}
 
 	svg {