@agentiffai/design 0.1.5 → 0.1.7

package/dist/copilotkit/index.cjs

@@ -464,6 +464,20 @@ var MessageContainer = styled4__default.default.div`
   align-items: flex-start;
   padding: 8px 0;
   max-width: 100%;
+
+  /* Fade in and slide up animation */
+  animation: fadeInSlideUp 0.4s ease-out;
+
+  @keyframes fadeInSlideUp {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
 `;
 var AvatarContainer = styled4__default.default.div`
   flex-shrink: 0;
@@ -473,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, #8B5CF6 0%, #EC4899 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`
@@ -499,11 +512,13 @@ var ContentContainer = styled4__default.default.div`
   min-width: 0;
 `;
 var MessageContent = styled4__default.default.div`
-  background-color: #2c2c2e;
+  background-color: rgba(45, 45, 61, 0.7); /* Semi-transparent dark gray with 70% opacity */
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
   padding: 12px 16px;
-  border-radius: 16px;
+  border-radius: 12px; /* Match design tokens */
   border-top-left-radius: 4px;
-  color: #e5e5e7;
+  color: #FFFFFF; /* White text from design tokens */
   font-size: 14px;
   line-height: 1.5;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -515,8 +530,10 @@ var LoadingDots2 = styled4__default.default.div`
   display: flex;
   gap: 6px;
   padding: 12px 16px;
-  background-color: #2c2c2e;
-  border-radius: 16px;
+  background-color: rgba(45, 45, 61, 0.7); /* Match MessageContent with transparency */
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-radius: 12px; /* Match design tokens */
   border-top-left-radius: 4px;
   width: fit-content;
 `;
@@ -667,20 +684,136 @@ var FileAttachment = ({
     }
   );
 };
+var Container = styled4__default.default.div`
+  font-family: ${(props) => props.variant === "code" ? '"SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace' : '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'};
+  white-space: pre-wrap;
+  word-break: break-word;
+  line-height: 1.5;
+`;
+var Cursor = styled4__default.default.span`
+  display: inline-block;
+  width: 2px;
+  height: 1em;
+  background-color: currentColor;
+  margin-left: 2px;
+  vertical-align: text-bottom;
+  animation: blink 1s infinite;
+
+  @keyframes blink {
+    0%,
+    49% {
+      opacity: 1;
+    }
+    50%,
+    100% {
+      opacity: 0;
+    }
+  }
+`;
+var StreamingText2 = ({
+  content,
+  isStreaming = false,
+  typingSpeed: _typingSpeed = 50,
+  // Not used - streaming shows chunks as they arrive
+  cursor = true,
+  variant = "default",
+  onStreamComplete,
+  className
+}) => {
+  const [displayedText, setDisplayedText] = react.useState("");
+  react.useEffect(() => {
+    if (isStreaming) {
+      setDisplayedText(content);
+      return;
+    }
+    if (!isStreaming && displayedText !== content) {
+      setDisplayedText(content);
+      if (onStreamComplete) {
+        onStreamComplete();
+      }
+    }
+  }, [content, isStreaming, onStreamComplete, displayedText]);
+  const showCursor = isStreaming && cursor;
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container, { variant, className, children: [
+    displayedText,
+    showCursor && /* @__PURE__ */ jsxRuntime.jsx(Cursor, {})
+  ] });
+};
+StreamingText2.displayName = "StreamingText";
 var AttachmentsContainer = styled4__default.default.div`
   display: flex;
   flex-direction: column;
   gap: 8px;
   margin-top: 12px;
 `;
+var ActionButton = styled4__default.default.button`
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #9CA3AF;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.15s ease-in-out;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.2);
+    color: #FFFFFF;
+  }
+
+  &:active {
+    transform: scale(0.98);
+  }
+`;
+var ActionsContainer2 = styled4__default.default.div`
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin-top: 8px;
+`;
+var MessageTime = styled4__default.default.time`
+  font-size: 11px;
+  color: #6B7280;
+  margin-top: 4px;
+  display: block;
+`;
+var StreamingIndicator = styled4__default.default.span`
+  display: inline-block;
+  width: 4px;
+  height: 4px;
+  margin-left: 4px;
+  background-color: #459FB9;
+  border-radius: 50%;
+  animation: pulse 1.5s ease-in-out infinite;
+
+  @keyframes pulse {
+    0%,
+    100% {
+      opacity: 0.3;
+      transform: scale(0.8);
+    }
+    50% {
+      opacity: 1;
+      transform: scale(1.2);
+    }
+  }
+`;
 var AssistantMessage = ({
   content = "",
   avatarUrl,
   avatarInitials: _avatarInitials = "AI",
   isLoading = false,
+  isStreaming = false,
   className,
   attachments = [],
-  enableMarkdown: _enableMarkdown = false
+  enableMarkdown = false,
+  timestamp,
+  actions = []
 }) => {
   const renderContent = () => {
     if (isLoading) {
@@ -691,12 +824,29 @@ var AssistantMessage = ({
       ] });
     }
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      content && /* @__PURE__ */ jsxRuntime.jsx(MessageContent, { children: content }),
-      attachments.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(AttachmentsContainer, { children: attachments.map((attachment, index) => /* @__PURE__ */ jsxRuntime.jsx(FileAttachment, { ...attachment }, `${attachment.title}-${index}`)) })
+      content && /* @__PURE__ */ jsxRuntime.jsxs(MessageContent, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          StreamingText2,
+          {
+            content,
+            isStreaming,
+            typingSpeed: 30,
+            cursor: false,
+            variant: enableMarkdown ? "markdown" : "default"
+          }
+        ),
+        isStreaming && /* @__PURE__ */ jsxRuntime.jsx(StreamingIndicator, {})
+      ] }),
+      attachments.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(AttachmentsContainer, { children: attachments.map((attachment, index) => /* @__PURE__ */ jsxRuntime.jsx(FileAttachment, { ...attachment }, `${attachment.title}-${index}`)) }),
+      timestamp && /* @__PURE__ */ jsxRuntime.jsx(MessageTime, { children: timestamp }),
+      actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(ActionsContainer2, { children: actions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsxs(ActionButton, { onClick: action.onClick, children: [
+        action.icon,
+        action.label
+      ] }, index)) })
     ] });
   };
   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() })
   ] });
 };
@@ -710,11 +860,40 @@ var dotPulse3 = styled4.keyframes`
     transform: scale(1);
   }
 `;
-var Container = styled4__default.default.div`
+var pulse = styled4.keyframes`
+  0%, 100% {
+    opacity: 0.5;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.2);
+  }
+`;
+var wave = styled4.keyframes`
+  0%, 40%, 100% {
+    transform: translateY(0);
+  }
+  20% {
+    transform: translateY(-8px);
+  }
+`;
+var getSizeValue = (size = "md") => {
+  switch (size) {
+    case "sm":
+      return { padding: "8px 12px", avatar: "32px", icon: "16px", fontSize: "12px", dotSize: "4px" };
+    case "lg":
+      return { padding: "16px 20px", avatar: "48px", icon: "24px", fontSize: "16px", dotSize: "8px" };
+    case "md":
+    default:
+      return { padding: "12px 16px", avatar: "40px", icon: "20px", fontSize: "14px", dotSize: "6px" };
+  }
+};
+var Container2 = styled4__default.default.div`
   display: inline-flex;
   align-items: center;
   gap: 12px;
-  padding: 12px 16px;
+  padding: ${(props) => getSizeValue(props.size).padding};
   background-color: #2c2c2e;
   border-radius: 16px;
   box-shadow: none;
@@ -724,19 +903,19 @@ var Container = styled4__default.default.div`
   margin: 0 auto;
 `;
 var Avatar2 = styled4__default.default.div`
-  width: 40px;
-  height: 40px;
+  width: ${(props) => getSizeValue(props.size).avatar};
+  height: ${(props) => getSizeValue(props.size).avatar};
   border-radius: 50%;
-  background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
+  background: linear-gradient(135deg, #1e5a6b 0%, #2a7a8f 100%); /* Darker teal gradient */
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
+  box-shadow: 0 2px 8px rgba(44, 176, 171, 0.3); /* Teal shadow */
 `;
 var HeadphonesIcon = styled4__default.default.svg`
-  width: 20px;
-  height: 20px;
+  width: ${(props) => getSizeValue(props.size).icon};
+  height: ${(props) => getSizeValue(props.size).icon};
   color: #FFFFFF;
 `;
 var Content = styled4__default.default.div`
@@ -747,18 +926,29 @@ var Content = styled4__default.default.div`
 var LoadingDots3 = styled4__default.default.div`
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: ${(props) => props.variant === "wave" ? "2px" : "4px"};
   padding: 0 4px;
 `;
 var Dot2 = styled4__default.default.span`
-  width: 6px;
-  height: 6px;
+  width: ${(props) => getSizeValue(props.size).dotSize};
+  height: ${(props) => getSizeValue(props.size).dotSize};
   border-radius: 50%;
   background-color: #8e8e93;
-  animation: ${dotPulse3} 1.4s ease-in-out infinite;
+  animation: ${(props) => {
+  switch (props.variant) {
+    case "pulse":
+      return pulse;
+    case "wave":
+      return wave;
+    case "dots":
+    default:
+      return dotPulse3;
+  }
+}}
+    1.4s ease-in-out infinite;
 `;
 var Message2 = styled4__default.default.span`
-  font-size: 14px;
+  font-size: ${(props) => getSizeValue(props.size).fontSize};
   color: #e5e5e7;
   font-weight: 400;
   line-height: 1.5;
@@ -767,26 +957,50 @@ var Message2 = styled4__default.default.span`
 function AssistantThinking({
   message = "Analyzing data, please wait...",
   className,
-  ariaLabel = "Assistant is thinking"
+  ariaLabel = "Assistant is thinking",
+  variant = "dots",
+  size = "md"
 }) {
   const containerRef = react.useRef(null);
+  const renderLoadingIndicator = () => {
+    switch (variant) {
+      case "dots":
+        return /* @__PURE__ */ jsxRuntime.jsxs(LoadingDots3, { "aria-hidden": "true", size, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Dot2, { style: { animationDelay: "0ms" }, size }),
+          /* @__PURE__ */ jsxRuntime.jsx(Dot2, { style: { animationDelay: "150ms" }, size }),
+          /* @__PURE__ */ jsxRuntime.jsx(Dot2, { style: { animationDelay: "300ms" }, size })
+        ] });
+      case "pulse":
+        return /* @__PURE__ */ jsxRuntime.jsx(LoadingDots3, { "aria-hidden": "true", size, variant: "pulse", children: /* @__PURE__ */ jsxRuntime.jsx(Dot2, { style: { animationDelay: "0ms" }, size, variant: "pulse" }) });
+      case "wave":
+        return /* @__PURE__ */ jsxRuntime.jsxs(LoadingDots3, { "aria-hidden": "true", size, variant: "wave", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Dot2, { style: { animationDelay: "0ms" }, size, variant: "wave" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Dot2, { style: { animationDelay: "100ms" }, size, variant: "wave" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Dot2, { style: { animationDelay: "200ms" }, size, variant: "wave" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Dot2, { style: { animationDelay: "300ms" }, size, variant: "wave" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Dot2, { style: { animationDelay: "400ms" }, size, variant: "wave" })
+        ] });
+      case "text":
+        return null;
+      // Just show the message with no indicator
+      default:
+        return null;
+    }
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    Container,
+    Container2,
     {
       ref: containerRef,
       className,
       role: "status",
       "aria-live": "polite",
       "aria-label": ariaLabel,
+      size,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Avatar2, { "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(HeadphonesIcon, { viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", 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(Avatar2, { "aria-hidden": "true", size, children: /* @__PURE__ */ jsxRuntime.jsx(HeadphonesIcon, { viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", 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.jsxs(Content, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(LoadingDots3, { "aria-hidden": "true", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Dot2, { style: { animationDelay: "0ms" } }),
-            /* @__PURE__ */ jsxRuntime.jsx(Dot2, { style: { animationDelay: "150ms" } }),
-            /* @__PURE__ */ jsxRuntime.jsx(Dot2, { style: { animationDelay: "300ms" } })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(Message2, { children: message })
+          renderLoadingIndicator(),
+          /* @__PURE__ */ jsxRuntime.jsx(Message2, { size, children: message })
         ] })
       ]
     }
@@ -806,12 +1020,9 @@ var AssistantMessageAdapter = ({
   // markdownTagRenderers,
   // ImageRenderer,
 }) => {
-  if (isLoading) {
+  if (isLoading || isGenerating && !message?.content) {
     return /* @__PURE__ */ jsxRuntime.jsx(AssistantThinking, { message: "Thinking..." });
   }
-  if (isGenerating && !message?.content) {
-    return /* @__PURE__ */ jsxRuntime.jsx(AssistantThinking, { message: "Generating response..." });
-  }
   const content = message?.content || "";
   const attachments = [];
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -819,7 +1030,8 @@ var AssistantMessageAdapter = ({
     {
       content,
       avatarInitials: "AI",
-      isLoading: isGenerating,
+      isLoading: false,
+      isStreaming: isGenerating,
       attachments,
       enableMarkdown: true
     }
@@ -837,7 +1049,6 @@ var StyledUserMessage = styled4__default.default.button`
   font-size: 14px;
   font-weight: 400;
   line-height: 1.4;
-  color: #ffffff;
   border: none;
   cursor: default;
   user-select: none;
@@ -846,34 +1057,37 @@ var StyledUserMessage = styled4__default.default.button`
   position: relative;
   text-align: left;
 
-  /* Pill shape - fully rounded ends */
-  border-radius: 999px;
-
-  /* Purple to blue gradient (left to right) */
-  background: linear-gradient(90deg, #8B5CF6 0%, #5B8DEF 100%);
+  /* Force override CopilotKit's default user message styles */
+  && {
+    background: #1C3A4E !important; /* Darker brand blue - darker than secondary */
+    color: #FFFFFF !important; /* White text on dark blue background */
+    border-radius: 999px !important; /* Pill shape - fully rounded ends */
+  }
 
-  /* Subtle shadow and glow effect */
+  /* Subtle shadow and glow effect - darker blue */
   box-shadow:
-    0 2px 8px rgba(91, 141, 239, 0.25),
-    0 1px 3px rgba(139, 92, 246, 0.15);
+    0 2px 8px rgba(28, 58, 78, 0.25),
+    0 1px 3px rgba(28, 58, 78, 0.15);
 
   /* Smooth transitions */
   transition: all 0.2s ease-in-out;
 
-  /* Speech bubble tail */
+  /* Speech bubble tail - darker blue to match bubble */
   &::after {
     content: '';
     position: absolute;
-    bottom: -4px;
-    right: -6px;
-    width: 18px;
-    height: 18px;
-    background: #5B8DEF;
+    bottom: -6px;
+    right: 12px;
+    width: 14px;
+    height: 14px;
+    background: #1C3A4E !important; /* Force override - darker blue */
     transform: rotate(45deg);
-    border-radius: 0 0 16px 0;
+    border-radius: 0 0 4px 0;
+    clip-path: polygon(0 0, 100% 100%, 0 100%);
     box-shadow:
-      2px 2px 4px rgba(91, 141, 239, 0.15);
+      2px 2px 4px rgba(28, 58, 78, 0.15);
     transition: all 0.2s ease-in-out;
+    z-index: -1;
   }
 
   /* Hover state - only for button elements */
@@ -881,12 +1095,12 @@ var StyledUserMessage = styled4__default.default.button`
     transform: translateY(-1px);
     cursor: pointer;
     box-shadow:
-      0 4px 12px rgba(91, 141, 239, 0.35),
-      0 2px 6px rgba(139, 92, 246, 0.25);
+      0 4px 12px rgba(28, 58, 78, 0.35),
+      0 2px 6px rgba(28, 58, 78, 0.25);
 
     &::after {
       box-shadow:
-        3px 3px 6px rgba(91, 141, 239, 0.2);
+        3px 3px 6px rgba(28, 58, 78, 0.2);
     }
   }
 
@@ -894,24 +1108,24 @@ var StyledUserMessage = styled4__default.default.button`
   &[role="button"]:active:not(:disabled) {
     transform: translateY(0);
     box-shadow:
-      0 1px 4px rgba(91, 141, 239, 0.2),
-      0 1px 2px rgba(139, 92, 246, 0.1);
+      0 1px 4px rgba(28, 58, 78, 0.2),
+      0 1px 2px rgba(28, 58, 78, 0.1);
 
     &::after {
       box-shadow:
-        1px 1px 2px rgba(91, 141, 239, 0.1);
+        1px 1px 2px rgba(28, 58, 78, 0.1);
     }
   }
 
   ${({ $isPressed }) => $isPressed && styled4.css`
       transform: translateY(0) scale(0.98);
       box-shadow:
-        0 1px 4px rgba(91, 141, 239, 0.2),
-        0 1px 2px rgba(139, 92, 246, 0.1);
+        0 1px 4px rgba(28, 58, 78, 0.2),
+        0 1px 2px rgba(28, 58, 78, 0.1);
 
       &::after {
         box-shadow:
-          1px 1px 2px rgba(91, 141, 239, 0.1);
+          1px 1px 2px rgba(28, 58, 78, 0.1);
       }
     `}
 
@@ -921,12 +1135,12 @@ var StyledUserMessage = styled4__default.default.button`
   }
 
   &:focus-visible {
-    outline: 2px solid #5B8DEF;
+    outline: 2px solid #1C3A4E;
     outline-offset: 3px;
     box-shadow:
-      0 4px 12px rgba(91, 141, 239, 0.35),
-      0 2px 6px rgba(139, 92, 246, 0.25),
-      0 0 0 3px rgba(91, 141, 239, 0.1);
+      0 4px 12px rgba(28, 58, 78, 0.35),
+      0 2px 6px rgba(28, 58, 78, 0.25),
+      0 0 0 3px rgba(28, 58, 78, 0.1);
   }
 
   /* Disabled state */
@@ -988,6 +1202,20 @@ var UserMessageWrapper = styled4__default.default.div`
   justify-content: flex-end;
   width: 100%;
   padding: 8px 0;
+
+  /* Fade in and slide up animation */
+  animation: fadeInSlideUp 0.3s ease-out;
+
+  @keyframes fadeInSlideUp {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
 `;
 var UserMessageAdapter = ({
   message,
@@ -1011,7 +1239,9 @@ var ChatInputContainer = styled4__default.default.div`
   flex-direction: column;
   width: 100%;
   padding: 8px;
-  background: transparent;
+  background-color: rgba(25, 25, 25, 0.6);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
   border-radius: 0;
   box-shadow: none;
   box-sizing: border-box;
@@ -1074,16 +1304,17 @@ var InputWrapper = styled4__default.default.div`
   align-items: center;
   gap: 10px;
   padding: 10px 14px;
-  background-color: #2c2c2e;
-  border: 1px solid #3a3a3c;
+  background-color: rgba(25, 25, 25, 0.4);
+  border: 1px solid rgba(58, 58, 60, 0.3);
   border-radius: 12px;
   transition: all 0.2s ease;
   width: 100%;
   box-sizing: border-box;
 
   &:focus-within {
-    border-color: #5B9FFF;
-    background-color: #323234;
+    /* Subtle focus indication without bold colored border */
+    border-color: rgba(255, 255, 255, 0.3);
+    background-color: rgba(50, 50, 52, 0.6);
   }
 `;
 var InputField = styled4__default.default.input`
@@ -1170,6 +1401,9 @@ var ChatInput = ({
     },
     inputRef
   );
+  const handleDirectChange = (e) => {
+    setValue(e.target.value);
+  };
   const handleKeyDown = (e) => {
     if (e.key === "Enter") {
       e.preventDefault();
@@ -1186,8 +1420,6 @@ var ChatInput = ({
   const handleSuggestionClick = (suggestionText) => {
     if (onSuggestionSelect && !isDisabled && !isReadOnly) {
       onSuggestionSelect(suggestionText);
-      setValue(suggestionText);
-      inputRef.current?.focus();
     }
   };
   const canSubmit = currentValue.trim().length > 0 && !isDisabled && !isReadOnly;
@@ -1210,9 +1442,11 @@ var ChatInput = ({
           type: "text",
           placeholder,
           onKeyDown: handleKeyDown,
+          onChange: handleDirectChange,
           autoFocus,
           disabled: isDisabled,
-          readOnly: isReadOnly
+          readOnly: isReadOnly,
+          value: currentValue
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -1289,11 +1523,39 @@ var InputAdapter = ({
   isVisible = true
 }) => {
   const [value, setValue] = react.useState("");
+  const [isSubmitting, setIsSubmitting] = react.useState(false);
   const handleSubmit = async (message) => {
-    if (!message.trim() || inProgress) return;
-    await onSend(message);
-    setValue("");
+    if (!message.trim()) {
+      console.log("[InputAdapter] handleSubmit: empty message, ignoring");
+      return;
+    }
+    setIsSubmitting(true);
+    try {
+      await onSend(message);
+      setValue("");
+    } catch (error) {
+      console.error("[InputAdapter] Error sending message:", error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  const handleSuggestionSelect = async (suggestion) => {
+    if (!suggestion.trim()) {
+      return;
+    }
+    if (inProgress || isSubmitting) {
+      return;
+    }
+    setIsSubmitting(true);
+    try {
+      await onSend(suggestion);
+    } catch (error) {
+      console.error("[InputAdapter] Error sending suggestion:", error);
+    } finally {
+      setIsSubmitting(false);
+    }
   };
+  const shouldDisableInput = isSubmitting;
   return /* @__PURE__ */ jsxRuntime.jsx(
     ChatInput,
     {
@@ -1301,18 +1563,13 @@ var InputAdapter = ({
       onChange: setValue,
       onSubmit: handleSubmit,
       placeholder: "Ask, write or search for anything...",
-      isDisabled: inProgress,
+      isDisabled: shouldDisableInput,
       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: (suggestion) => {
-        setValue(suggestion);
-        handleSubmit(suggestion);
-      }
+      onSuggestionSelect: handleSuggestionSelect
     }
   );
 };
@@ -1321,14 +1578,16 @@ var HeaderContainer = styled4__default.default.header`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 8px;
-  background-color: #2c2c2e;
-  border-bottom: 1px solid #3a3a3c;
-  min-height: 60px;
+  padding: 6px 8px;
+  background-color: rgba(25, 25, 25, 0.6);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-bottom: 1px solid rgba(58, 58, 60, 0.3);
+  min-height: 44px;
   box-sizing: border-box;
 
   @media (min-width: 640px) {
-    padding: 12px;
+    padding: 8px 12px;
   }
 `;
 var HeaderContent = styled4__default.default.div`
@@ -1367,7 +1626,7 @@ var HeaderActions = styled4__default.default.div`
   gap: ${({ theme }) => theme?.spacing?.xs ?? "4px"};
   margin-left: ${({ theme }) => theme?.spacing?.md ?? "16px"};
 `;
-var ActionButton = styled4__default.default.button`
+var ActionButton2 = styled4__default.default.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1437,7 +1696,7 @@ var Header = ({
       subtitle && /* @__PURE__ */ jsxRuntime.jsx(HeaderSubtitle, { children: subtitle })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(HeaderActions, { children: [
-      onMinimize && /* @__PURE__ */ jsxRuntime.jsx(ActionButton, { ref: minimizeRef, ...minimizeProps, "data-action": "minimize", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      onMinimize && /* @__PURE__ */ jsxRuntime.jsx(ActionButton2, { ref: minimizeRef, ...minimizeProps, "data-action": "minimize", children: /* @__PURE__ */ jsxRuntime.jsxs(
         "svg",
         {
           width: "16",
@@ -1452,7 +1711,7 @@ var Header = ({
           ]
         }
       ) }),
-      onClose && /* @__PURE__ */ jsxRuntime.jsx(ActionButton, { ref: closeRef, ...closeProps, "data-action": "close", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      onClose && /* @__PURE__ */ jsxRuntime.jsx(ActionButton2, { ref: closeRef, ...closeProps, "data-action": "close", children: /* @__PURE__ */ jsxRuntime.jsxs(
         "svg",
         {
           width: "16",
@@ -1472,41 +1731,18 @@ var Header = ({
   ] });
 };
 Header.displayName = "Header";
-var MessagesContainer = styled4__default.default.div`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  overflow: hidden;
-  background-color: #1c1c1e;
-  padding: 8px;
-  gap: 12px;
-  box-sizing: border-box;
-
-  /* Ensure proper scrolling behavior for child components */
-  position: relative;
-  min-height: 0;
-
-  /* Desktop padding */
-  @media (min-width: 640px) {
-    padding: 12px;
-  }
-`;
-var Messages = ({
-  children,
-  className,
-  ariaLabel = "Messages"
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(MessagesContainer, { className, role: "region", "aria-label": ariaLabel, children });
-};
-Messages.displayName = "Messages";
 var WindowContainer = styled4__default.default.div`
   display: flex;
   flex-direction: column;
-  background-color: #1c1c1e;
-  border-radius: 0;
-  box-shadow: none;
+  /* Glassmorphism effect */
+  background: transparent;
+  backdrop-filter: blur(3.8px);
+  -webkit-backdrop-filter: blur(3.8px);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  border-radius: 16px;
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
   overflow: hidden;
-  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
 
   /* Default dimensions */
@@ -1589,67 +1825,84 @@ var Window = ({
 };
 Window.displayName = "Window";
 var GlobalSidebarStyles = styled4.createGlobalStyle`
-  /* Override CopilotKit's default positioning - start off-screen */
+  /* Override CopilotKit's default positioning - keep sidebar container in place */
   .copilotKitSidebar {
     position: fixed !important;
-    right: -100vw !important;
+    top: 0 !important;
+    right: 0 !important;
     bottom: 0 !important;
-    transition: right 0.3s ease !important;
+    left: 0 !important;
+    width: 100vw !important;
+    height: 100vh !important;
+    pointer-events: none !important;
+    z-index: 1001 !important;
   }
 
-  /* Move sidebar container into view when expanded */
+  /* Keep sidebar container always visible (the window inside will animate) */
   .copilotKitSidebarContentWrapper.sidebarExpanded .copilotKitSidebar {
-    right: 0 !important;
+    pointer-events: auto !important;
   }
 
-  /* Mobile-first: Full viewport sidebar */
-  .copilotKitSidebar .copilotKitWindow {
+  /* Mobile-first: Glassmorphism sidebar with rounded corners */
+  /* Target the actual dialog element that gets rendered */
+  .copilotKitSidebar [role="dialog"] {
     /* Override CopilotKit defaults for mobile */
     position: fixed !important;
-    top: 0 !important;
-    right: 0 !important;
-    bottom: 0 !important;
-    left: auto !important;
-    width: 100vw !important;
-    height: 100vh !important;
-    max-width: 100vw !important;
-    max-height: 100vh !important;
+    top: 10px !important;
+    right: 10px !important;
+    /* Reserve space for Android nav buttons - matches NavHorizontal approach */
+    bottom: max(90px, env(safe-area-inset-bottom, 90px)) !important;
+    left: 10px !important;
+    width: calc(100vw - 20px) !important;
+    /* Adjust height to account for bottom safe area */
+    height: calc(100vh - 20px - max(80px, env(safe-area-inset-bottom, 80px))) !important;
+    max-width: calc(100vw - 20px) !important;
+    max-height: calc(100vh - 20px - max(80px, env(safe-area-inset-bottom, 80px))) !important;
     margin: 0 !important;
-    border-radius: 0 !important;
+    border-radius: 16px !important;
     z-index: 1001 !important;
 
-    /* Hidden by default - translateX(100%) moves it off-screen to the right */
+    /* Glassmorphism effect */
+    background: rgba(255, 255, 255, 0.26) !important;
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
+    backdrop-filter: blur(11.1px) !important;
+    -webkit-backdrop-filter: blur(11.1px) !important;
+    border: 1px solid rgba(255, 255, 255, 0.3) !important;
+
+    /* Smooth slide transition */
+    transition: transform 0.3s ease, visibility 0.3s ease, opacity 0.3s ease !important;
+  }
+
+  /* Hidden by default */
+  .copilotKitSidebarContentWrapper:not(.sidebarExpanded) .copilotKitSidebar [role="dialog"] {
     transform: translateX(100%) !important;
     visibility: hidden !important;
     pointer-events: none !important;
     opacity: 0 !important;
-    display: none !important;
-
-    /* Smooth slide transition */
-    transition: transform 0.3s ease, visibility 0.3s ease, opacity 0.3s ease !important;
   }
 
-  /* When window has .open class (CopilotKit's native class), show it */
-  .copilotKitSidebar .copilotKitWindow.open {
-    display: flex !important;
+  /* Visible when expanded */
+  .copilotKitSidebarContentWrapper.sidebarExpanded .copilotKitSidebar [role="dialog"] {
     transform: translateX(0) !important;
     visibility: visible !important;
     pointer-events: auto !important;
     opacity: 1 !important;
   }
 
-  /* Desktop: Sidebar panel on the right (640px = CopilotKit's breakpoint) */
+  /* Desktop: Sidebar panel on the right with glassmorphism (640px = CopilotKit's breakpoint) */
   @media (min-width: 640px) {
-    .copilotKitSidebar .copilotKitWindow {
+    .copilotKitSidebar [role="dialog"] {
       inset: auto !important;
-      top: 0 !important;
-      right: 0 !important;
-      bottom: 0 !important;
+      top: 10px !important;
+      right: 10px !important;
+      /* Reserve space for Android nav buttons on desktop too */
+      bottom: max(90px, env(safe-area-inset-bottom, 90px)) !important;
       left: auto !important;
       width: 28rem !important;
-      height: 100vh !important;
+      /* Adjust height to account for bottom safe area */
+      height: calc(100vh - 20px - max(80px, env(safe-area-inset-bottom, 80px))) !important;
       max-width: 28rem !important;
-      max-height: 100vh !important;
+      max-height: calc(100vh - 20px - max(80px, env(safe-area-inset-bottom, 80px))) !important;
     }
   }
 
@@ -1668,6 +1921,74 @@ var GlobalSidebarStyles = styled4.createGlobalStyle`
       display: flex !important;
     }
   }
+
+  /* Fix messages container background */
+  .copilotKitMessages {
+    background-color: transparent !important;
+  }
+
+  /* Fade-in animation for new messages */
+  @keyframes messagesFadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .copilotKitMessage {
+    animation: messagesFadeIn 0.3s ease-out;
+  }
+
+  /* Override CopilotKit suggestions to be single-row with horizontal scroll */
+  div[role="list"][aria-label*="Suggested"] {
+    display: flex !important;
+    flex-wrap: nowrap !important; /* Force single row */
+    gap: 8px !important;
+    padding: 4px 0 !important;
+
+    /* Horizontal scrolling */
+    overflow-x: auto !important;
+    overflow-y: hidden !important;
+
+    /* Smooth scrolling */
+    -webkit-overflow-scrolling: touch;
+    scroll-behavior: smooth;
+
+    /* Fixed height for one suggestion */
+    max-height: 40px !important;
+    min-height: 40px !important;
+    align-items: center !important;
+
+    /* Hide scrollbar */
+    scrollbar-width: none !important;
+    -ms-overflow-style: none !important;
+
+    &::-webkit-scrollbar {
+      display: none !important;
+    }
+  }
+
+  /* Ensure suggestion buttons don't wrap or shrink */
+  div[role="list"][aria-label*="Suggested"] button {
+    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;
@@ -1677,8 +1998,8 @@ var StyledChatButton = styled4__default.default.button`
   height: 36px;
   border-radius: 18px;
   border: none;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+  background: linear-gradient(135deg, #2CB0AB 0%, #459FB9 100%);
+  box-shadow: 0 4px 12px rgba(44, 176, 171, 0.4);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1688,7 +2009,7 @@ var StyledChatButton = styled4__default.default.button`
 
   &:hover {
     transform: scale(1.05);
-    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.5);
+    box-shadow: 0 6px 16px rgba(44, 176, 171, 0.5);
   }
 
   &:active {
@@ -1706,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();
@@ -1714,36 +2037,34 @@ function CustomCopilotSidebar({
       setOpen(false);
       onSetOpen?.(false);
     };
-    return /* @__PURE__ */ jsxRuntime.jsx(Header, { title: "AI Assistant", subtitle: "How can I help you today?", onClose: handleClose });
+    return /* @__PURE__ */ jsxRuntime.jsx(Header, { title: "AI Assistant", onClose: handleClose });
   };
   const WindowAdapterLocal = (props) => {
     return /* @__PURE__ */ jsxRuntime.jsx(Window, { children: props.children });
   };
-  const MessagesAdapter = (props) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Messages, { children: props.messages.map((message, index) => /* @__PURE__ */ jsxRuntime.jsx(
-      props.RenderMessage,
-      {
-        message,
-        inProgress: props.inProgress,
-        index,
-        isCurrentMessage: index === props.messages.length - 1
-      },
-      message.id || `message-${index}`
-    )) });
-  };
   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",
           {
@@ -1753,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" })
@@ -1773,7 +2095,6 @@ function CustomCopilotSidebar({
         Input: InputAdapter,
         Header: HeaderAdapterWithClose,
         Window: WindowAdapterLocal,
-        Messages: MessagesAdapter,
         Button: CustomButton,
         instructions,
         labels: {
@@ -1888,18 +2209,20 @@ var InputWrapper2 = styled4__default.default.div`
 	align-items: flex-end;
 	gap: 8px;
 	padding: 12px;
-	background-color: #ffffff;
-	border: 1px solid #e5e7eb;
+	background-color: rgba(25, 25, 25, 0.6);
+	backdrop-filter: blur(10px);
+	-webkit-backdrop-filter: blur(10px);
+	border: 1px solid rgba(58, 58, 60, 0.3);
 	border-radius: 12px;
 	transition: all 0.2s ease;
 
 	&:focus-within {
-		border-color: #3b82f6;
-		box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+		/* Subtle focus indication without bold colored border */
+		border-color: rgba(255, 255, 255, 0.3);
 	}
 
 	&:hover:not(:focus-within) {
-		border-color: #d1d5db;
+		border-color: rgba(58, 58, 60, 0.5);
 	}
 `;
 var TextArea = styled4__default.default.textarea`
@@ -1914,12 +2237,12 @@ var TextArea = styled4__default.default.textarea`
 		'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
 	font-size: 14px;
 	line-height: 24px;
-	color: #111827;
+	color: #FFFFFF;
 	background: transparent;
 	overflow-y: auto;
 
 	&::placeholder {
-		color: #9ca3af;
+		color: #8e8e93;
 	}
 
 	&:disabled {
@@ -1958,14 +2281,14 @@ var SendButton = styled4__default.default.button`
 	padding: 0;
 	border: none;
 	border-radius: 8px;
-	background-color: ${(props) => props.disabled ? "#e5e7eb" : "#3b82f6"};
-	color: ${(props) => props.disabled ? "#9ca3af" : "#ffffff"};
+	background-color: ${(props) => props.disabled ? "rgba(229, 231, 235, 0.3)" : "#2CB0AB"};
+	color: ${(props) => props.disabled ? "#6B7280" : "#ffffff"};
 	cursor: ${(props) => props.disabled ? "not-allowed" : "pointer"};
 	transition: all 0.2s ease;
 	flex-shrink: 0;
 
 	&:hover:not(:disabled) {
-		background-color: #2563eb;
+		background-color: #459FB9;
 		transform: translateY(-1px);
 	}
 
@@ -1974,8 +2297,7 @@ var SendButton = styled4__default.default.button`
 	}
 
 	&:focus-visible {
-		outline: 2px solid #3b82f6;
-		outline-offset: 2px;
+		outline: none;
 	}
 
 	svg {
@@ -2079,6 +2401,34 @@ var Input = ({
     )
   ] }) });
 };
+var MessagesContainer = styled4__default.default.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+  /* Gradient background with subtle purple accent */
+  background-image: linear-gradient(to right bottom, #302c4c, #26273d, #1e202d, #191a1e, #171a21, #141a24, #0f1b27, #081b2a, #081b2a, #081b2a);
+  padding: 8px;
+  gap: 12px;
+  box-sizing: border-box;
+
+  /* Ensure proper scrolling behavior for child components */
+  position: relative;
+  min-height: 0;
+
+  /* Desktop padding */
+  @media (min-width: 640px) {
+    padding: 12px;
+  }
+`;
+var Messages = ({
+  children,
+  className,
+  ariaLabel = "Messages"
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(MessagesContainer, { className, role: "region", "aria-label": ariaLabel, children });
+};
+Messages.displayName = "Messages";
 var MessagesListContainer = styled4__default.default.div`
   display: flex;
   flex-direction: column;
@@ -2248,22 +2598,15 @@ var MessageBubble = styled4__default.default.div`
   flex-direction: column;
   max-width: 70%;
   padding: 12px 16px;
-  border-radius: 18px 18px 4px 18px;
+  border-radius: 12px; /* Consistent rounded corners, no tail */
 
-  /* User message colors - distinct from assistant messages */
-  background-color: #007AFF;
-  color: #FFFFFF;
-
-  /* Box shadow for depth */
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  /* User message colors - dark blue from brand */
+  background: #264E68; /* Deep Blue from brand tokens */
+  color: #FFFFFF; /* White text for better contrast on dark background */
 
   /* Smooth transitions */
   transition: all 0.2s ease-in-out;
 
-  &:hover {
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
-  }
-
   /* Username styling */
   strong {
     font-size: 12px;
@@ -2279,40 +2622,127 @@ var MessageContent2 = styled4__default.default.p`
   word-wrap: break-word;
   white-space: pre-wrap;
 `;
-var MessageTime = styled4__default.default.time`
+var MessageTime2 = styled4__default.default.time`
   font-size: 11px;
   opacity: 0.7;
   margin-top: 4px;
   text-align: right;
 `;
+var ActionButton3 = styled4__default.default.button`
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  margin-top: 8px;
+  font-size: 12px;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.7);
+  background: rgba(255, 255, 255, 0.3);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.15s ease-in-out;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.5);
+    border-color: rgba(0, 0, 0, 0.2);
+  }
+
+  &:active {
+    transform: scale(0.98);
+  }
+`;
+var ActionsContainer3 = styled4__default.default.div`
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+`;
+var StreamingIndicator2 = styled4__default.default.span`
+  display: inline-block;
+  width: 4px;
+  height: 4px;
+  margin-left: 4px;
+  background-color: rgba(0, 0, 0, 0.5);
+  border-radius: 50%;
+  animation: pulse 1.5s ease-in-out infinite;
+
+  @keyframes pulse {
+    0%,
+    100% {
+      opacity: 0.3;
+      transform: scale(0.8);
+    }
+    50% {
+      opacity: 1;
+      transform: scale(1.2);
+    }
+  }
+`;
+var Avatar3 = styled4__default.default.img`
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  margin-left: 8px;
+  object-fit: cover;
+  border: 2px solid rgba(216, 180, 254, 0.3);
+`;
 var UserMessage2 = ({
   content,
   timestamp,
   className,
   avatarUrl,
-  username
+  username,
+  isStreaming = false,
+  actions = []
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(StyledUserMessage2, { className, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(MessageBubble, { children: [
       username && /* @__PURE__ */ jsxRuntime.jsx("strong", { children: username }),
-      /* @__PURE__ */ jsxRuntime.jsx(MessageContent2, { children: content }),
-      timestamp && /* @__PURE__ */ jsxRuntime.jsx(MessageTime, { children: timestamp })
+      /* @__PURE__ */ jsxRuntime.jsxs(MessageContent2, { children: [
+        content,
+        isStreaming && /* @__PURE__ */ jsxRuntime.jsx(StreamingIndicator2, {})
+      ] }),
+      timestamp && /* @__PURE__ */ jsxRuntime.jsx(MessageTime2, { children: timestamp }),
+      actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(ActionsContainer3, { children: actions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsxs(ActionButton3, { onClick: action.onClick, children: [
+        action.icon,
+        action.label
+      ] }, index)) })
     ] }),
-    avatarUrl && /* @__PURE__ */ jsxRuntime.jsx(
-      "img",
-      {
-        src: avatarUrl,
-        alt: username || "User",
-        style: { width: "32px", height: "32px", borderRadius: "50%", marginLeft: "8px" }
-      }
-    )
+    avatarUrl && /* @__PURE__ */ jsxRuntime.jsx(Avatar3, { src: avatarUrl, alt: username || "User" })
   ] });
 };
 var SuggestionsContainer = styled4__default.default.div`
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap; /* Single row */
   gap: ${({ theme }) => theme?.spacing?.sm ?? "8px"};
-  padding: ${({ theme }) => theme?.spacing?.md ?? "16px"} 0;
+
+  /* Reduced padding for tighter height */
+  padding: ${({ theme }) => theme?.spacing?.xs ?? "4px"} 0;
+
+  /* Horizontal scrolling */
+  overflow-x: auto;
+  overflow-y: hidden;
+
+  /* Smooth scrolling on mobile */
+  -webkit-overflow-scrolling: touch;
+  scroll-behavior: smooth;
+
+  /* Align items to ensure single-row height */
+  align-items: center;
+
+  /* Constrain to exact height of buttons + minimal padding */
+  /* Button height: ~14px font + 16px padding + 2px border = ~32px */
+  /* Add small padding: 8px total = 40px */
+  max-height: 40px;
+  min-height: 40px;
+
+  /* Hide scrollbar but keep functionality */
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE/Edge */
+
+  &::-webkit-scrollbar {
+    display: none; /* Chrome/Safari/Opera */
+  }
 `;
 var StyledSuggestion = styled4__default.default.button`
   /* Base styles */
@@ -2331,6 +2761,7 @@ var StyledSuggestion = styled4__default.default.button`
   transition: all 0.2s ease-in-out;
   white-space: nowrap;
   user-select: none;
+  flex-shrink: 0; /* Prevent shrinking to maintain size */
 
   /* Hover state */
   &:hover:not(:disabled) {
@@ -2386,6 +2817,324 @@ function SuggestionChip({ suggestion, onSelect }) {
   return /* @__PURE__ */ jsxRuntime.jsx(StyledSuggestion, { ...buttonProps, ref, $isPressed: isPressed, role: "listitem", children: suggestion });
 }
 Suggestions.displayName = "Suggestions";
+var ErrorContainer = styled4__default.default.div`
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: ${(props) => props.variant === "banner" ? "16px" : "12px 16px"};
+  background-color: ${(props) => props.variant === "banner" ? "rgba(239, 68, 68, 0.1)" : "rgba(239, 68, 68, 0.05)"};
+  border: 1px solid rgba(239, 68, 68, 0.3);
+  border-radius: ${(props) => props.variant === "banner" ? "8px" : "12px"};
+  color: #FFFFFF;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  margin: 8px 0;
+  width: ${(props) => props.variant === "banner" ? "100%" : "auto"};
+  max-width: ${(props) => props.variant === "banner" ? "100%" : "600px"};
+`;
+var IconContainer = styled4__default.default.div`
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  color: #EF4444;
+`;
+var ErrorIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    width: "20",
+    height: "20",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" })
+  }
+);
+var Content2 = styled4__default.default.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+var ErrorMessage = styled4__default.default.div`
+  font-size: 14px;
+  line-height: 1.5;
+  color: #FFFFFF;
+`;
+var ErrorDetails = styled4__default.default.div`
+  font-size: 12px;
+  line-height: 1.4;
+  color: #9CA3AF;
+  margin-top: 4px;
+`;
+var Actions2 = styled4__default.default.div`
+  display: flex;
+  gap: 8px;
+  margin-top: 8px;
+`;
+var Button2 = styled4__default.default.button`
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  font-size: 13px;
+  font-weight: 500;
+  color: ${(props) => props.variant === "primary" ? "#FFFFFF" : "#9CA3AF"};
+  background: ${(props) => props.variant === "primary" ? "#EF4444" : "rgba(255, 255, 255, 0.05)"};
+  border: 1px solid
+    ${(props) => props.variant === "primary" ? "#EF4444" : "rgba(255, 255, 255, 0.1)"};
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.15s ease-in-out;
+
+  &:hover {
+    background: ${(props) => props.variant === "primary" ? "#DC2626" : "rgba(255, 255, 255, 0.1)"};
+    border-color: ${(props) => props.variant === "primary" ? "#DC2626" : "rgba(255, 255, 255, 0.2)"};
+  }
+
+  &:active {
+    transform: scale(0.98);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+var CloseButton = styled4__default.default.button`
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  color: #9CA3AF;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: all 0.15s ease-in-out;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #FFFFFF;
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+`;
+var CloseIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "16", height: "16", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) });
+var StreamErrorMessage = ({
+  error,
+  variant = "inline",
+  retryable = false,
+  onRetry,
+  onDismiss,
+  details,
+  className
+}) => {
+  const errorMessage = typeof error === "string" ? error : error.message;
+  return /* @__PURE__ */ jsxRuntime.jsxs(ErrorContainer, { variant, className, role: "alert", "aria-live": "assertive", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(IconContainer, { "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(ErrorIcon, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Content2, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ErrorMessage, { children: errorMessage }),
+      details && /* @__PURE__ */ jsxRuntime.jsx(ErrorDetails, { children: details }),
+      (retryable || onDismiss) && /* @__PURE__ */ jsxRuntime.jsxs(Actions2, { children: [
+        retryable && onRetry && /* @__PURE__ */ jsxRuntime.jsx(Button2, { variant: "primary", onClick: onRetry, children: "Retry" }),
+        onDismiss && /* @__PURE__ */ jsxRuntime.jsx(Button2, { variant: "secondary", onClick: onDismiss, children: "Dismiss" })
+      ] })
+    ] }),
+    onDismiss && /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: onDismiss, "aria-label": "Dismiss error", children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {}) })
+  ] });
+};
+StreamErrorMessage.displayName = "StreamErrorMessage";
+var pulse2 = styled4.keyframes`
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.6;
+    transform: scale(1.1);
+  }
+`;
+var Container3 = styled4__default.default.div`
+  display: inline-flex;
+  align-items: center;
+  gap: ${(props) => {
+  switch (props.size) {
+    case "sm":
+      return "4px";
+    case "lg":
+      return "8px";
+    case "md":
+    default:
+      return "6px";
+  }
+}};
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+`;
+var StatusDot = styled4__default.default.div`
+  width: ${(props) => {
+  if (props.variant === "badge") {
+    switch (props.size) {
+      case "sm":
+        return "6px";
+      case "lg":
+        return "10px";
+      case "md":
+      default:
+        return "8px";
+    }
+  }
+  switch (props.size) {
+    case "sm":
+      return "6px";
+    case "lg":
+      return "12px";
+    case "md":
+    default:
+      return "8px";
+  }
+}};
+  height: ${(props) => {
+  if (props.variant === "badge") {
+    switch (props.size) {
+      case "sm":
+        return "6px";
+      case "lg":
+        return "10px";
+      case "md":
+      default:
+        return "8px";
+    }
+  }
+  switch (props.size) {
+    case "sm":
+      return "6px";
+    case "lg":
+      return "12px";
+    case "md":
+    default:
+      return "8px";
+  }
+}};
+  border-radius: 50%;
+  background-color: ${(props) => {
+  switch (props.status) {
+    case "connected":
+      return "#10B981";
+    // Green
+    case "streaming":
+      return "#3B82F6";
+    // Blue
+    case "disconnected":
+      return "#EF4444";
+    // Red
+    case "reconnecting":
+      return "#F59E0B";
+  }
+}};
+  animation: ${(props) => props.status === "streaming" ? pulse2 : "none"} 2s ease-in-out infinite;
+  flex-shrink: 0;
+`;
+var Label = styled4__default.default.span`
+  font-size: ${(props) => {
+  if (props.variant === "badge") {
+    switch (props.size) {
+      case "sm":
+        return "11px";
+      case "lg":
+        return "15px";
+      case "md":
+      default:
+        return "13px";
+    }
+  }
+  switch (props.size) {
+    case "sm":
+      return "12px";
+    case "lg":
+      return "16px";
+    case "md":
+    default:
+      return "14px";
+  }
+}};
+  font-weight: ${(props) => props.variant === "badge" ? "500" : "400"};
+  color: #9CA3AF;
+  line-height: 1.4;
+`;
+var BadgeContainer = styled4__default.default.div`
+  display: inline-flex;
+  align-items: center;
+  gap: ${(props) => {
+  switch (props.size) {
+    case "sm":
+      return "4px";
+    case "lg":
+      return "8px";
+    case "md":
+    default:
+      return "6px";
+  }
+}};
+  padding: ${(props) => {
+  switch (props.size) {
+    case "sm":
+      return "4px 8px";
+    case "lg":
+      return "8px 16px";
+    case "md":
+    default:
+      return "6px 12px";
+  }
+}};
+  background-color: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: ${(props) => {
+  switch (props.size) {
+    case "sm":
+      return "4px";
+    case "lg":
+      return "8px";
+    case "md":
+    default:
+      return "6px";
+  }
+}};
+`;
+var getStatusLabel = (status) => {
+  switch (status) {
+    case "connected":
+      return "Connected";
+    case "streaming":
+      return "Streaming";
+    case "disconnected":
+      return "Disconnected";
+    case "reconnecting":
+      return "Reconnecting...";
+  }
+};
+var StreamStatusIndicator = ({
+  status,
+  variant = "dot",
+  size = "md",
+  showLabel = false,
+  className
+}) => {
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(StatusDot, { status, size, variant, "aria-hidden": "true" }),
+    showLabel && /* @__PURE__ */ jsxRuntime.jsx(Label, { size, variant, children: getStatusLabel(status) })
+  ] });
+  if (variant === "badge") {
+    return /* @__PURE__ */ jsxRuntime.jsx(BadgeContainer, { size, className, role: "status", "aria-label": getStatusLabel(status), children: content });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Container3, { size, className, role: "status", "aria-label": getStatusLabel(status), children: content });
+};
+StreamStatusIndicator.displayName = "StreamStatusIndicator";
 var GlobalSidebarStyles2 = styled4.createGlobalStyle`
   /* Override CopilotKit's default positioning - start off-screen */
   .copilotKitSidebar {
@@ -2642,6 +3391,9 @@ exports.MessagesList = MessagesList;
 exports.MessagesListContainer = MessagesListContainer;
 exports.MessagesListContent = MessagesListContent;
 exports.Response = Response;
+exports.StreamErrorMessage = StreamErrorMessage;
+exports.StreamStatusIndicator = StreamStatusIndicator;
+exports.StreamingText = StreamingText2;
 exports.Suggestions = Suggestions;
 exports.UserMessage = UserMessage2;
 exports.UserMessageAdapter = UserMessageAdapter;