@agentiffai/design 0.1.6 → 0.1.7

package/dist/copilotkit/index.cjs

@@ -487,25 +487,24 @@ var Avatar = styled4__default.default.img`
   height: 32px;
   border-radius: 50%;
   object-fit: cover;
-  background-color: #e5e7eb;
+  background-color: transparent;
 `;
 var AvatarInitials = styled4__default.default.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__default.default.div`
@@ -847,7 +846,7 @@ var AssistantMessage = ({
     ] });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(MessageContainer, { className, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(AvatarContainer, { children: avatarUrl ? /* @__PURE__ */ jsxRuntime.jsx(Avatar, { src: avatarUrl, alt: "Assistant avatar" }) : /* @__PURE__ */ jsxRuntime.jsx(AvatarInitials, { children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(AvatarContainer, { children: avatarUrl ? /* @__PURE__ */ jsxRuntime.jsx(Avatar, { src: avatarUrl, alt: "Assistant avatar" }) : /* @__PURE__ */ jsxRuntime.jsx(AvatarInitials, { children: /* @__PURE__ */ jsxRuntime.jsx(Avatar, { src: "/assets/avatar-transparent-bg.png", alt: "AI Assistant" }) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(ContentContainer, { children: renderContent() })
   ] });
 };
@@ -1313,7 +1312,8 @@ var InputWrapper = styled4__default.default.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);
   }
 `;
@@ -1567,9 +1567,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
     }
@@ -1979,11 +1977,22 @@ var GlobalSidebarStyles = styled4.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__default.default.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;
@@ -2018,7 +2027,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 } = reactUi.useChatContext();
@@ -2034,16 +2045,26 @@ function CustomCopilotSidebar({
   const CustomButton = (_props) => {
     const { open, setOpen } = reactUi.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
           "svg",
           {
@@ -2053,7 +2074,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__ */ jsxRuntime.jsx("title", { children: "Chat" }),
               /* @__PURE__ */ jsxRuntime.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" })
@@ -2195,8 +2217,8 @@ var InputWrapper2 = styled4__default.default.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) {
@@ -2275,8 +2297,7 @@ var SendButton = styled4__default.default.button`
 	}
 
 	&:focus-visible {
-		outline: 2px solid #2CB0AB;
-		outline-offset: 2px;
+		outline: none;
 	}
 
 	svg {