@agentiffai/design 1.4.1 → 1.4.3

package/dist/copilotkit/index.js

@@ -1,13 +1,16 @@
 import { useButton } from '@react-aria/button';
-import React, { memo, useRef, useEffect, useMemo, useState, useCallback } from 'react';
+import React, { memo, createContext, useRef, useEffect, useMemo, useState, useContext, useCallback } from 'react';
 import styled9, { css, keyframes, createGlobalStyle } from 'styled-components';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useCopilotChat } from '@copilotkit/react-core';
-import { CopilotSidebar, useChatContext } from '@copilotkit/react-ui';
-export { useChatContext } from '@copilotkit/react-ui';
+import { CopilotSidebar } from '@copilotkit/react-core/v2';
 import { useTextField } from '@react-aria/textfield';
 
-// src/components/copilotkit/Button/Button.tsx
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
 
 // src/theme/tokens.ts
 var tokens = {
@@ -1414,6 +1417,22 @@ var AssistantMessageBase = ({
 };
 var AssistantMessage = memo(AssistantMessageBase);
 AssistantMessage.displayName = "AssistantMessage";
+var _useAgent;
+try {
+  _useAgent = __require("@copilotkit/react-core/v2").useAgent;
+} catch {
+}
+function useVisibleMessages() {
+  if (_useAgent) {
+    try {
+      const { agent } = _useAgent({ agentId: "default" });
+      return agent.messages ?? [];
+    } catch {
+      return [];
+    }
+  }
+  return [];
+}
 var REGISTRY_KEY = "__agentiffai_tool_call_registry__";
 var TOOL_CALL_TTL_MS = 5 * 60 * 1e3;
 function getRegistryMap() {
@@ -1688,7 +1707,7 @@ function createAssistantMessageAdapterWithErrorReporting(onReportIssue, Thinking
     isGenerating
   }) => {
     const lastGenerativeUIRef = useRef(null);
-    const { visibleMessages } = useCopilotChat();
+    const visibleMessages = useVisibleMessages();
     const rawContent = Array.isArray(message?.content) ? message.content.join("") : message?.content || "";
     const content = stripToolCallMarkers(rawContent);
     const toolCallNames = useMemo(() => {
@@ -2322,6 +2341,24 @@ var UserMessageAdapterBase = ({ message, ImageRenderer }) => {
 };
 var UserMessageAdapter = memo(UserMessageAdapterBase);
 UserMessageAdapter.displayName = "UserMessageAdapter";
+var ChatContext = createContext(void 0);
+function useChatContext() {
+  const ctx = useContext(ChatContext);
+  if (ctx) return ctx;
+  try {
+    const v1 = __require("@copilotkit/react-ui");
+    if (v1?.useChatContext) {
+      return v1.useChatContext();
+    }
+  } catch {
+  }
+  return {
+    open: false,
+    setOpen: () => {
+      console.warn("[useChatContext shim] setOpen called but no ChatContext provider found");
+    }
+  };
+}
 var pulse3 = keyframes`
   0%, 100% {
     opacity: 1;
@@ -2680,35 +2717,6 @@ var Header = ({
   ] });
 };
 Header.displayName = "Header";
-var MessagesContainer = styled9.div`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  overflow: hidden;
-  /* Gradient background - brand aligned */
-  background: linear-gradient(
-    to right bottom,
-    ${tokens.colors.background.dark},
-    ${tokens.colors.background.darker},
-    ${tokens.colors.background.darkest}
-  );
-  /* Minimal horizontal padding to maximize message width */
-  padding: ${tokens.spacing.sm} ${tokens.spacing.xs};
-  gap: ${tokens.spacing.sm};
-  box-sizing: border-box;
-
-  /* Ensure proper scrolling behavior for child components */
-  position: relative;
-  min-height: 0;
-`;
-var Messages = ({
-  children,
-  className,
-  ariaLabel = "Messages"
-}) => {
-  return /* @__PURE__ */ jsx(MessagesContainer, { className, role: "region", "aria-label": ariaLabel, children });
-};
-Messages.displayName = "Messages";
 var WindowContainer = styled9.div`
   display: flex;
   flex-direction: column;
@@ -2803,64 +2811,197 @@ var Window = ({
 };
 Window.displayName = "Window";
 var GlobalSidebarStyles = createGlobalStyle`
-  /* Override CopilotKit's default positioning - start off-screen */
+  /* Override CopilotKit's content wrapper to respect safe areas in landscape */
+  @media (orientation: landscape) {
+    .copilotKitSidebarContentWrapper {
+      right: var(--safe-area-right, 0px) !important;
+      left: var(--safe-area-left, 0px) !important;
+    }
+  }
+
+  /* Override CopilotKit's default positioning - keep sidebar container in place */
+  /* z-index must be higher than NavHorizontal (sticky: 1020) for button to show above nav */
   .copilotKitSidebar {
     position: fixed !important;
-    right: -100vw !important;
-    bottom: 0 !important;
-    transition: right 0.3s ease !important;
+    top: calc(var(--safe-area-top, 0px) + 8px) !important;
+    right: calc(var(--safe-area-right, 0px) + 8px) !important;
+    bottom: calc(var(--safe-area-bottom, 0px) + 8px) !important;
+    left: calc(var(--safe-area-left, 0px) + 8px) !important;
+    width: auto !important;
+    height: auto !important;
+    pointer-events: none !important;
+    z-index: ${tokens.zIndex.fixed} !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: Account for status bar safe area (Android notch/status bar) */
+    top: calc(${tokens.spacing.sm} + var(--safe-area-top, 0px)) !important;
+    /* RIGHT: Account for landscape notch on right side */
+    right: calc(${tokens.spacing.sm} + var(--safe-area-right, 0px)) !important;
+    /* BOTTOM: Account for horizontal navbar (52px) + safe area for Android nav buttons */
+    bottom: calc(52px + ${tokens.spacing.sm} + var(--safe-area-bottom, 0px)) !important;
+    /* LEFT: Account for landscape notch on left side */
+    left: calc(${tokens.spacing.sm} + var(--safe-area-left, 0px)) !important;
+    /* Let left + right define width, top + bottom define height — no explicit values needed */
+    width: auto !important;
+    height: auto !important;
+    max-width: none !important;
+    max-height: none !important;
     margin: 0 !important;
-    border-radius: 0 !important;
-    z-index: 1001 !important;
+    border-radius: ${tokens.borderRadius.xl} !important;
+
+    /* Glassmorphism effect */
+    background: ${tokens.colors.surface.glass} !important;
+    box-shadow: ${tokens.shadows.lg} !important;
+    backdrop-filter: blur(11.1px) !important;
+    -webkit-backdrop-filter: blur(11.1px) !important;
+    border: 1px solid ${tokens.colors.surface.glassBorder} !important;
+
+    /* Smooth slide transition */
+    transition: transform 0.3s ease, visibility 0.3s ease, opacity 0.3s ease !important;
+    z-index: ${tokens.zIndex.modal} !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;
-
-    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) */
-  @media (min-width: 640px) {
-    .copilotKitSidebar .copilotKitWindow {
+  /* Desktop: Sidebar panel on the right with glassmorphism (640px = CopilotKit's breakpoint) */
+  @media (min-width: ${tokens.breakpoints.mobile}px) {
+    .copilotKitSidebar [role="dialog"] {
       inset: auto !important;
-      top: 0 !important;
-      right: 0 !important;
-      bottom: 0 !important;
+      /* TOP: Account for status bar safe area */
+      top: calc(${tokens.spacing.sm} + var(--safe-area-top, 0px)) !important;
+      /* RIGHT: Account for landscape notch on right side */
+      right: calc(${tokens.spacing.sm} + var(--safe-area-right, 0px)) !important;
+      /* BOTTOM: Account for horizontal navbar (52px) + safe area */
+      bottom: calc(52px + ${tokens.spacing.sm} + var(--safe-area-bottom, 0px)) !important;
       left: auto !important;
       width: 28rem !important;
-      height: 100vh !important;
+      /* Let top + bottom define height — no explicit value needed */
+      height: auto !important;
       max-width: 28rem !important;
-      max-height: 100vh !important;
+      max-height: none !important;
+    }
+  }
+
+  /* Mobile landscape: sidebar on right side, allow background interaction */
+  @media (orientation: landscape) and (max-height: 500px) {
+    /* Account for vertical nav (60px) in landscape */
+    .copilotKitSidebarContentWrapper {
+      left: 60px !important;
+      width: calc(100% - 60px) !important;
+    }
+
+    /* Sidebar container covers right portion — full height, no gaps */
+    .copilotKitSidebar {
+      top: 0 !important;
+      bottom: 0 !important;
+      right: 0 !important;
+      left: 50vw !important;
+      width: auto !important;
+      height: 100vh !important;
+    }
+
+    /* Offset the expanded sidebar wrapper to leave space for main content */
+    .copilotKitSidebarContentWrapper.sidebarExpanded {
+      margin-right: 30vw !important;
+    }
+
+    .copilotKitSidebar [role="dialog"] {
+      width: min(50vw, 22rem) !important;
+      max-width: min(50vw, 22rem) !important;
+      left: auto !important;
+      /* Flush with right edge — safe area handled via internal padding */
+      right: 0 !important;
+      /* Fill ALL vertical space — overlay the bottom nav for maximum chat area */
+      /* Keep top safe area so dialog doesn't go behind status bar (battery/wifi) */
+      top: var(--safe-area-top, 0px) !important;
+      bottom: 0 !important;
+      /* Let top/bottom define height */
+      height: auto !important;
+      max-height: none !important;
+      margin: 0 !important;
+      /* Only round the left edges since right is flush with viewport */
+      border-radius: 0 !important;
+      border-top-left-radius: ${tokens.borderRadius.xl} !important;
+      border-bottom-left-radius: ${tokens.borderRadius.xl} !important;
+    }
+
+    /* Compact header in landscape - hide title text but keep close button */
+    /* Safe area top padding applied here so content avoids status bar */
+    .copilotKitSidebar [role="dialog"] header,
+    .copilotKitSidebar [role="dialog"] [data-testid="chat-header"],
+    .copilotKitSidebar [role="dialog"] > div:first-child {
+      padding: 0.25rem 0.5rem 0.25rem !important;
+      min-height: auto !important;
+      height: auto !important;
+      padding-right: calc(1.5rem + var(--safe-area-right, 0px)) !important;
+    }
+
+    /* Hide the title text but keep close button visible */
+    .copilotKitSidebar [role="dialog"] header h1,
+    .copilotKitSidebar [role="dialog"] header h2,
+    .copilotKitSidebar [role="dialog"] header span:not(:last-child),
+    .copilotKitSidebar [role="dialog"] > div:first-child > span,
+    .copilotKitSidebar [role="dialog"] > div:first-child > h1,
+    .copilotKitSidebar [role="dialog"] > div:first-child > h2 {
+      display: none !important;
+    }
+
+    /* Reduce vertical padding inside chat — right safe area for notch */
+    .copilotKitMessages {
+      padding: ${tokens.spacing.xs} calc(${tokens.spacing.sm} + var(--safe-area-right, 0px)) ${tokens.spacing.xs} ${tokens.spacing.sm} !important;
+    }
+
+    .copilotKitMessage {
+      padding: ${tokens.spacing.xs} 0 !important;
+      margin: ${tokens.spacing.xs} 0 !important;
+    }
+
+    /* Reduce gap between messages */
+    .copilotKitMessages > div {
+      gap: 0.25rem !important;
+      padding-bottom: 0;
+    }
+
+    /* Compact input area — safe area padding for bottom gesture bar and right notch */
+    .copilotKitInput {
+      padding: ${tokens.spacing.xs} calc(${tokens.spacing.sm} + var(--safe-area-right, 0px)) calc(${tokens.spacing.xs} + var(--safe-area-bottom, 0px)) ${tokens.spacing.sm} !important;
+    }
+
+    /* Compact suggested prompts in landscape */
+    div[role="list"][aria-label*="Suggested"] {
+      margin: 0 !important;
+      padding: 1px !important;
+      min-height: auto !important;
+      max-height: 32px !important;
+    }
+
+    /* Suggestions container — safe area padding for bottom and right */
+    .copilotKitSidebar [role="dialog"] > div:last-child {
+      padding: 1px calc(1px + var(--safe-area-right, 0px)) calc(1px + var(--safe-area-bottom, 0px)) 1px !important;
     }
   }
 
@@ -2880,106 +3021,131 @@ var GlobalSidebarStyles = createGlobalStyle`
     }
   }
 
-  /* Override CopilotKit's default message styles with our custom components */
-  .copilotKitSidebar {
-    /* Reset all default CopilotKit message styling */
-    [class*="copilotKitMessage"],
-    [class*="Message-module"] {
-      all: unset !important;
-      display: contents !important;
+  /* Position chat button with safe area on landscape (right side for Android controls) */
+  @media (orientation: landscape) {
+    .copilotKitSidebarContentWrapper {
+      button[aria-label="Open chat"],
+      button[aria-label="Close chat"] {
+        bottom: calc(var(--safe-area-bottom, 0px) + 8px) !important;
+        right: calc(var(--safe-area-right, 0px) + 8px) !important;
+        z-index: 2000 !important;
+      }
     }
+  }
 
-    /* Ensure our custom UserMessage gradient pill shows through */
-    button[role="presentation"] {
-      all: revert !important;
-      display: inline-flex !important;
-    }
+  /* Fix messages container background */
+  .copilotKitMessages {
+    background-color: transparent !important;
+  }
 
-    /* Reset input styles to allow our custom ChatInput */
-    [class*="Input-module"],
-    [class*="copilotKitInput"] {
-      all: unset !important;
-      display: contents !important;
-    }
+  /* Performance optimization for messages - no animations to reduce jitter during streaming */
+  .copilotKitMessage {
+    /* contain: content isolates layout/paint to this element */
+    contain: content;
+  }
 
-    /* Reset header styles */
-    [class*="Header-module"],
-    [class*="copilotKitHeader"] {
-      all: unset !important;
-      display: contents !important;
+  /* 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: ${tokens.spacing.sm} !important;
+    padding: ${tokens.spacing.xs} 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 = styled9.button`
   position: fixed;
-  bottom: 8px;
-  right: 8px;
+  bottom: calc(${tokens.spacing.sm} + var(--safe-area-bottom, 0px));
+  right: calc(${tokens.spacing.sm} + var(--safe-area-right, 0px));
   width: 36px;
   height: 36px;
-  border-radius: 18px;
+  border-radius: ${tokens.borderRadius.full};
   border: none;
   background: linear-gradient(135deg, ${tokens.colors.primary} 0%, ${tokens.colors.accent} 100%);
-  box-shadow: 0 4px 12px rgba(44, 176, 171, 0.4);
+  box-shadow: ${({ $disabled }) => $disabled ? "none" : tokens.shadows.glow.primary};
   display: flex;
   align-items: center;
   justify-content: center;
-  cursor: pointer;
-  z-index: 1000;
-  transition: all 0.2s ease;
+  cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
+  opacity: ${({ $disabled }) => $disabled ? 0.5 : 1};
+  filter: ${({ $disabled }) => $disabled ? "grayscale(0.6)" : "none"};
+  z-index: ${tokens.zIndex.fixed};
+  transition: all ${tokens.transitions.fast};
 
-  &:hover {
+  &:hover:not([aria-disabled='true']) {
     transform: scale(1.05);
-    box-shadow: 0 6px 16px rgba(44, 176, 171, 0.5);
+    box-shadow: ${tokens.shadows.glow.accent};
   }
 
-  &:active {
+  &:active:not([aria-disabled='true']) {
     transform: scale(0.95);
   }
 
   svg {
     width: 20px;
     height: 20px;
-    fill: white;
+    fill: ${tokens.colors.text.primary};
   }
 `;
-var CustomCopilotSidebar = ({
-  children,
-  instructions = "You are a helpful AI assistant.",
-  labels,
-  icons,
-  defaultOpen = false,
-  clickOutsideToClose = true,
-  hitEscapeToClose = true,
-  shortcut = "/",
-  onSetOpen,
-  className
-}) => {
-  const HeaderAdapter = (_props) => {
+var WindowAdapter = (props) => {
+  return /* @__PURE__ */ jsx(Window, { children: props.children });
+};
+WindowAdapter.displayName = "WindowAdapter";
+function createHeaderAdapter(onSetOpen) {
+  const HeaderAdapterWithClose = (_props) => {
     const { setOpen } = useChatContext();
     const handleClose = () => {
       setOpen(false);
       onSetOpen?.(false);
     };
-    return /* @__PURE__ */ jsx(Header, { title: "AI Assistant", subtitle: "How can I help you today?", onClose: handleClose });
-  };
-  const WindowAdapter2 = (props) => {
-    return /* @__PURE__ */ jsx(Window, { children: props.children });
-  };
-  const MessagesAdapter = (props) => {
-    return /* @__PURE__ */ jsx(Messages, { children: props.messages.map((message, index) => /* @__PURE__ */ jsx(
-      props.RenderMessage,
-      {
-        message,
-        inProgress: props.inProgress,
-        index,
-        isCurrentMessage: index === props.messages.length - 1
-      },
-      message.id || `message-${index}`
-    )) });
+    return /* @__PURE__ */ jsx(Header, { title: "AI Assistant", onClose: handleClose });
   };
+  HeaderAdapterWithClose.displayName = "HeaderAdapterWithClose";
+  return HeaderAdapterWithClose;
+}
+function createButtonAdapter(disabled, disabledReason, onSetOpen) {
   const CustomButton = (_props) => {
     const { open, setOpen } = useChatContext();
     const handleClick = () => {
+      if (disabled) return;
       const newOpenState = !open;
       setOpen(newOpenState);
       onSetOpen?.(newOpenState);
@@ -2988,8 +3154,11 @@ var CustomCopilotSidebar = ({
       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",
+        $disabled: disabled,
         children: /* @__PURE__ */ jsxs(
           "svg",
           {
@@ -2999,7 +3168,7 @@ var CustomCopilotSidebar = ({
             fill: "currentColor",
             xmlns: "http://www.w3.org/2000/svg",
             role: "img",
-            "aria-label": "Chat icon",
+            "aria-hidden": "true",
             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" })
@@ -3009,229 +3178,151 @@ var CustomCopilotSidebar = ({
       }
     );
   };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  CustomButton.displayName = "CustomButton";
+  return CustomButton;
+}
+function CustomCopilotSidebar({
+  children,
+  defaultOpen = false,
+  onSetOpen,
+  instructions,
+  className,
+  disabled = false,
+  disabledReason = "Start a free trial to enable AI chat",
+  onError,
+  renderError,
+  ThinkingIndicator,
+  ToolCallsComponent,
+  onReportIssue
+}) {
+  const HeaderAdapterWithClose = useMemo(() => createHeaderAdapter(onSetOpen), [onSetOpen]);
+  const CustomButton = useMemo(
+    () => createButtonAdapter(disabled, disabledReason, onSetOpen),
+    [disabled, disabledReason, onSetOpen]
+  );
+  const AssistantMessageAdapterMemo = useMemo(
+    () => onReportIssue ? createAssistantMessageAdapterWithErrorReporting(
+      onReportIssue,
+      ThinkingIndicator) : ThinkingIndicator || ToolCallsComponent ? createAssistantMessageAdapter(ThinkingIndicator) : AssistantMessageAdapter,
+    [ThinkingIndicator, ToolCallsComponent, onReportIssue]
+  );
+  return /* @__PURE__ */ jsxs("div", { "data-testid": "copilot-sidebar", children: [
     /* @__PURE__ */ jsx(GlobalSidebarStyles, {}),
     /* @__PURE__ */ jsx(
       CopilotSidebar,
       {
-        AssistantMessage: AssistantMessageAdapter,
+        AssistantMessage: AssistantMessageAdapterMemo,
         UserMessage: UserMessageAdapter,
         Input: InputAdapter,
-        Header: HeaderAdapter,
-        Window: WindowAdapter2,
-        Messages: MessagesAdapter,
+        Header: HeaderAdapterWithClose,
+        Window: WindowAdapter,
         Button: CustomButton,
         instructions,
         labels: {
           title: "AI Assistant",
-          initial: "Hi! How can I help you today?",
-          ...labels
+          initial: "Hi! How can I help you today?"
         },
-        icons,
         defaultOpen,
-        clickOutsideToClose,
-        hitEscapeToClose,
-        shortcut,
+        clickOutsideToClose: true,
+        hitEscapeToClose: true,
         onSetOpen,
+        onError,
+        renderError,
         className,
         children
       }
     )
   ] });
-};
+}
 CustomCopilotSidebar.displayName = "CustomCopilotSidebar";
-var GlobalSidebarStyles2 = createGlobalStyle`
-  /* Override CopilotKit's content wrapper to respect safe areas in landscape */
-  @media (orientation: landscape) {
-    .copilotKitSidebarContentWrapper {
-      right: var(--safe-area-right, 0px) !important;
-      left: var(--safe-area-left, 0px) !important;
-    }
-  }
+var MessagesContainer = styled9.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+  /* Gradient background - brand aligned */
+  background: linear-gradient(
+    to right bottom,
+    ${tokens.colors.background.dark},
+    ${tokens.colors.background.darker},
+    ${tokens.colors.background.darkest}
+  );
+  /* Minimal horizontal padding to maximize message width */
+  padding: ${tokens.spacing.sm} ${tokens.spacing.xs};
+  gap: ${tokens.spacing.sm};
+  box-sizing: border-box;
 
-  /* Override CopilotKit's default positioning - keep sidebar container in place */
-  /* z-index must be higher than NavHorizontal (sticky: 1020) for button to show above nav */
+  /* Ensure proper scrolling behavior for child components */
+  position: relative;
+  min-height: 0;
+`;
+var Messages = ({
+  children,
+  className,
+  ariaLabel = "Messages"
+}) => {
+  return /* @__PURE__ */ jsx(MessagesContainer, { className, role: "region", "aria-label": ariaLabel, children });
+};
+Messages.displayName = "Messages";
+var GlobalSidebarStyles2 = createGlobalStyle`
+  /* Override CopilotKit's default positioning - start off-screen */
   .copilotKitSidebar {
     position: fixed !important;
-    top: calc(var(--safe-area-top, 0px) + 8px) !important;
-    right: calc(var(--safe-area-right, 0px) + 8px) !important;
-    bottom: calc(var(--safe-area-bottom, 0px) + 8px) !important;
-    left: calc(var(--safe-area-left, 0px) + 8px) !important;
-    width: auto !important;
-    height: auto !important;
-    pointer-events: none !important;
-    z-index: ${tokens.zIndex.fixed} !important;
+    right: -100vw !important;
+    bottom: 0 !important;
+    transition: right 0.3s ease !important;
   }
 
-  /* Keep sidebar container always visible (the window inside will animate) */
+  /* Move sidebar container into view when expanded */
   .copilotKitSidebarContentWrapper.sidebarExpanded .copilotKitSidebar {
-    pointer-events: auto !important;
+    right: 0 !important;
   }
 
-  /* Mobile-first: Glassmorphism sidebar with rounded corners */
-  /* Target the actual dialog element that gets rendered */
-  .copilotKitSidebar [role="dialog"] {
-    /* Override CopilotKit defaults for mobile */
+  /* Mobile-first: Full viewport sidebar */
+  .copilotKitSidebar .copilotKitWindow {
     position: fixed !important;
-    /* TOP: Account for status bar safe area (Android notch/status bar) */
-    top: calc(${tokens.spacing.sm} + var(--safe-area-top, 0px)) !important;
-    /* RIGHT: Account for landscape notch on right side */
-    right: calc(${tokens.spacing.sm} + var(--safe-area-right, 0px)) !important;
-    /* BOTTOM: Account for horizontal navbar (52px) + safe area for Android nav buttons */
-    bottom: calc(52px + ${tokens.spacing.sm} + var(--safe-area-bottom, 0px)) !important;
-    /* LEFT: Account for landscape notch on left side */
-    left: calc(${tokens.spacing.sm} + var(--safe-area-left, 0px)) !important;
-    /* Let left + right define width, top + bottom define height — no explicit values needed */
-    width: auto !important;
-    height: auto !important;
-    max-width: none !important;
-    max-height: none !important;
-    margin: 0 !important;
-    border-radius: ${tokens.borderRadius.xl} !important;
-
-    /* Glassmorphism effect */
-    background: ${tokens.colors.surface.glass} !important;
-    box-shadow: ${tokens.shadows.lg} !important;
-    backdrop-filter: blur(11.1px) !important;
-    -webkit-backdrop-filter: blur(11.1px) !important;
-    border: 1px solid ${tokens.colors.surface.glassBorder} !important;
-
-    /* Smooth slide transition */
-    transition: transform 0.3s ease, visibility 0.3s ease, opacity 0.3s ease !important;
-    z-index: ${tokens.zIndex.modal} !important;
-  }
-
-  /* Hidden by default */
-  .copilotKitSidebarContentWrapper:not(.sidebarExpanded) .copilotKitSidebar [role="dialog"] {
-    transform: translateX(100%) !important;
-    visibility: hidden !important;
-    pointer-events: none !important;
-    opacity: 0 !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 with glassmorphism (640px = CopilotKit's breakpoint) */
-  @media (min-width: ${tokens.breakpoints.mobile}px) {
-    .copilotKitSidebar [role="dialog"] {
-      inset: auto !important;
-      /* TOP: Account for status bar safe area */
-      top: calc(${tokens.spacing.sm} + var(--safe-area-top, 0px)) !important;
-      /* RIGHT: Account for landscape notch on right side */
-      right: calc(${tokens.spacing.sm} + var(--safe-area-right, 0px)) !important;
-      /* BOTTOM: Account for horizontal navbar (52px) + safe area */
-      bottom: calc(52px + ${tokens.spacing.sm} + var(--safe-area-bottom, 0px)) !important;
-      left: auto !important;
-      width: 28rem !important;
-      /* Let top + bottom define height — no explicit value needed */
-      height: auto !important;
-      max-width: 28rem !important;
-      max-height: none !important;
-    }
-  }
-
-  /* Mobile landscape: sidebar on right side, allow background interaction */
-  @media (orientation: landscape) and (max-height: 500px) {
-    /* Account for vertical nav (60px) in landscape */
-    .copilotKitSidebarContentWrapper {
-      left: 60px !important;
-      width: calc(100% - 60px) !important;
-    }
-
-    /* Sidebar container covers right portion — full height, no gaps */
-    .copilotKitSidebar {
-      top: 0 !important;
-      bottom: 0 !important;
-      right: 0 !important;
-      left: 50vw !important;
-      width: auto !important;
-      height: 100vh !important;
-    }
-
-    /* Offset the expanded sidebar wrapper to leave space for main content */
-    .copilotKitSidebarContentWrapper.sidebarExpanded {
-      margin-right: 30vw !important;
-    }
-
-    .copilotKitSidebar [role="dialog"] {
-      width: min(50vw, 22rem) !important;
-      max-width: min(50vw, 22rem) !important;
-      left: auto !important;
-      /* Flush with right edge — safe area handled via internal padding */
-      right: 0 !important;
-      /* Fill ALL vertical space — overlay the bottom nav for maximum chat area */
-      /* Keep top safe area so dialog doesn't go behind status bar (battery/wifi) */
-      top: var(--safe-area-top, 0px) !important;
-      bottom: 0 !important;
-      /* Let top/bottom define height */
-      height: auto !important;
-      max-height: none !important;
-      margin: 0 !important;
-      /* Only round the left edges since right is flush with viewport */
-      border-radius: 0 !important;
-      border-top-left-radius: ${tokens.borderRadius.xl} !important;
-      border-bottom-left-radius: ${tokens.borderRadius.xl} !important;
-    }
-
-    /* Compact header in landscape - hide title text but keep close button */
-    /* Safe area top padding applied here so content avoids status bar */
-    .copilotKitSidebar [role="dialog"] header,
-    .copilotKitSidebar [role="dialog"] [data-testid="chat-header"],
-    .copilotKitSidebar [role="dialog"] > div:first-child {
-      padding: 0.25rem 0.5rem 0.25rem !important;
-      min-height: auto !important;
-      height: auto !important;
-      padding-right: calc(1.5rem + var(--safe-area-right, 0px)) !important;
-    }
-
-    /* Hide the title text but keep close button visible */
-    .copilotKitSidebar [role="dialog"] header h1,
-    .copilotKitSidebar [role="dialog"] header h2,
-    .copilotKitSidebar [role="dialog"] header span:not(:last-child),
-    .copilotKitSidebar [role="dialog"] > div:first-child > span,
-    .copilotKitSidebar [role="dialog"] > div:first-child > h1,
-    .copilotKitSidebar [role="dialog"] > div:first-child > h2 {
-      display: none !important;
-    }
-
-    /* Reduce vertical padding inside chat — right safe area for notch */
-    .copilotKitMessages {
-      padding: ${tokens.spacing.xs} calc(${tokens.spacing.sm} + var(--safe-area-right, 0px)) ${tokens.spacing.xs} ${tokens.spacing.sm} !important;
-    }
-
-    .copilotKitMessage {
-      padding: ${tokens.spacing.xs} 0 !important;
-      margin: ${tokens.spacing.xs} 0 !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;
+    margin: 0 !important;
+    border-radius: 0 !important;
+    z-index: 1001 !important;
 
-    /* Reduce gap between messages */
-    .copilotKitMessages > div {
-      gap: 0.25rem !important;
-      padding-bottom: 0;
-    }
+    transform: translateX(100%) !important;
+    visibility: hidden !important;
+    pointer-events: none !important;
+    opacity: 0 !important;
+    display: none !important;
 
-    /* Compact input area — safe area padding for bottom gesture bar and right notch */
-    .copilotKitInput {
-      padding: ${tokens.spacing.xs} calc(${tokens.spacing.sm} + var(--safe-area-right, 0px)) calc(${tokens.spacing.xs} + var(--safe-area-bottom, 0px)) ${tokens.spacing.sm} !important;
-    }
+    transition: transform 0.3s ease, visibility 0.3s ease, opacity 0.3s ease !important;
+  }
 
-    /* Compact suggested prompts in landscape */
-    div[role="list"][aria-label*="Suggested"] {
-      margin: 0 !important;
-      padding: 1px !important;
-      min-height: auto !important;
-      max-height: 32px !important;
-    }
+  /* When window has .open class (CopilotKit's native class), show it */
+  .copilotKitSidebar .copilotKitWindow.open {
+    display: flex !important;
+    transform: translateX(0) !important;
+    visibility: visible !important;
+    pointer-events: auto !important;
+    opacity: 1 !important;
+  }
 
-    /* Suggestions container — safe area padding for bottom and right */
-    .copilotKitSidebar [role="dialog"] > div:last-child {
-      padding: 1px calc(1px + var(--safe-area-right, 0px)) calc(1px + var(--safe-area-bottom, 0px)) 1px !important;
+  /* Desktop: Sidebar panel on the right (640px = CopilotKit's breakpoint) */
+  @media (min-width: 640px) {
+    .copilotKitSidebar .copilotKitWindow {
+      inset: auto !important;
+      top: 0 !important;
+      right: 0 !important;
+      bottom: 0 !important;
+      left: auto !important;
+      width: 28rem !important;
+      height: 100vh !important;
+      max-width: 28rem !important;
+      max-height: 100vh !important;
     }
   }
 
@@ -3251,131 +3342,106 @@ var GlobalSidebarStyles2 = createGlobalStyle`
     }
   }
 
-  /* Position chat button with safe area on landscape (right side for Android controls) */
-  @media (orientation: landscape) {
-    .copilotKitSidebarContentWrapper {
-      button[aria-label="Open chat"],
-      button[aria-label="Close chat"] {
-        bottom: calc(var(--safe-area-bottom, 0px) + 8px) !important;
-        right: calc(var(--safe-area-right, 0px) + 8px) !important;
-        z-index: 2000 !important;
-      }
+  /* Override CopilotKit's default message styles with our custom components */
+  .copilotKitSidebar {
+    /* Reset all default CopilotKit message styling */
+    [class*="copilotKitMessage"],
+    [class*="Message-module"] {
+      all: unset !important;
+      display: contents !important;
     }
-  }
-
-  /* Fix messages container background */
-  .copilotKitMessages {
-    background-color: transparent !important;
-  }
-
-  /* Performance optimization for messages - no animations to reduce jitter during streaming */
-  .copilotKitMessage {
-    /* contain: content isolates layout/paint to this element */
-    contain: content;
-  }
-
-  /* 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: ${tokens.spacing.sm} !important;
-    padding: ${tokens.spacing.xs} 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 our custom UserMessage gradient pill shows through */
+    button[role="presentation"] {
+      all: revert !important;
+      display: inline-flex !important;
     }
-  }
 
-  /* Ensure suggestion buttons don't wrap or shrink */
-  div[role="list"][aria-label*="Suggested"] button {
-    flex-shrink: 0 !important;
-    white-space: nowrap !important;
-  }
+    /* Reset input styles to allow our custom ChatInput */
+    [class*="Input-module"],
+    [class*="copilotKitInput"] {
+      all: unset !important;
+      display: contents !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;
+    /* Reset header styles */
+    [class*="Header-module"],
+    [class*="copilotKitHeader"] {
+      all: unset !important;
+      display: contents !important;
+    }
   }
 `;
 var StyledChatButton2 = styled9.button`
   position: fixed;
-  bottom: calc(${tokens.spacing.sm} + var(--safe-area-bottom, 0px));
-  right: calc(${tokens.spacing.sm} + var(--safe-area-right, 0px));
+  bottom: 8px;
+  right: 8px;
   width: 36px;
   height: 36px;
-  border-radius: ${tokens.borderRadius.full};
+  border-radius: 18px;
   border: none;
   background: linear-gradient(135deg, ${tokens.colors.primary} 0%, ${tokens.colors.accent} 100%);
-  box-shadow: ${({ $disabled }) => $disabled ? "none" : tokens.shadows.glow.primary};
+  box-shadow: 0 4px 12px rgba(44, 176, 171, 0.4);
   display: flex;
   align-items: center;
   justify-content: center;
-  cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
-  opacity: ${({ $disabled }) => $disabled ? 0.5 : 1};
-  filter: ${({ $disabled }) => $disabled ? "grayscale(0.6)" : "none"};
-  z-index: ${tokens.zIndex.fixed};
-  transition: all ${tokens.transitions.fast};
+  cursor: pointer;
+  z-index: 1000;
+  transition: all 0.2s ease;
 
-  &:hover:not([aria-disabled='true']) {
+  &:hover {
     transform: scale(1.05);
-    box-shadow: ${tokens.shadows.glow.accent};
+    box-shadow: 0 6px 16px rgba(44, 176, 171, 0.5);
   }
 
-  &:active:not([aria-disabled='true']) {
+  &:active {
     transform: scale(0.95);
   }
 
   svg {
     width: 20px;
     height: 20px;
-    fill: ${tokens.colors.text.primary};
+    fill: white;
   }
 `;
-var WindowAdapter = (props) => {
-  return /* @__PURE__ */ jsx(Window, { children: props.children });
-};
-WindowAdapter.displayName = "WindowAdapter";
-function createHeaderAdapter(onSetOpen) {
-  const HeaderAdapterWithClose = (_props) => {
+var CustomCopilotSidebar2 = ({
+  children,
+  instructions = "You are a helpful AI assistant.",
+  labels,
+  icons,
+  defaultOpen = false,
+  clickOutsideToClose = true,
+  hitEscapeToClose = true,
+  shortcut = "/",
+  onSetOpen,
+  className
+}) => {
+  const HeaderAdapter = (_props) => {
     const { setOpen } = useChatContext();
     const handleClose = () => {
       setOpen(false);
       onSetOpen?.(false);
     };
-    return /* @__PURE__ */ jsx(Header, { title: "AI Assistant", onClose: handleClose });
+    return /* @__PURE__ */ jsx(Header, { title: "AI Assistant", subtitle: "How can I help you today?", onClose: handleClose });
+  };
+  const WindowAdapter2 = (props) => {
+    return /* @__PURE__ */ jsx(Window, { children: props.children });
+  };
+  const MessagesAdapter = (props) => {
+    return /* @__PURE__ */ jsx(Messages, { children: props.messages.map((message, index) => /* @__PURE__ */ jsx(
+      props.RenderMessage,
+      {
+        message,
+        inProgress: props.inProgress,
+        index,
+        isCurrentMessage: index === props.messages.length - 1
+      },
+      message.id || `message-${index}`
+    )) });
   };
-  HeaderAdapterWithClose.displayName = "HeaderAdapterWithClose";
-  return HeaderAdapterWithClose;
-}
-function createButtonAdapter(disabled, disabledReason, onSetOpen) {
   const CustomButton = (_props) => {
     const { open, setOpen } = useChatContext();
     const handleClick = () => {
-      if (disabled) return;
       const newOpenState = !open;
       setOpen(newOpenState);
       onSetOpen?.(newOpenState);
@@ -3384,11 +3450,8 @@ function createButtonAdapter(disabled, disabledReason, onSetOpen) {
       StyledChatButton2,
       {
         onClick: handleClick,
-        "aria-label": disabled ? disabledReason : open ? "Close chat" : "Open chat",
-        "aria-disabled": disabled,
-        title: disabled ? disabledReason : void 0,
+        "aria-label": open ? "Close chat" : "Open chat",
         type: "button",
-        $disabled: disabled,
         children: /* @__PURE__ */ jsxs(
           "svg",
           {
@@ -3398,7 +3461,7 @@ function createButtonAdapter(disabled, disabledReason, onSetOpen) {
             fill: "currentColor",
             xmlns: "http://www.w3.org/2000/svg",
             role: "img",
-            "aria-hidden": "true",
+            "aria-label": "Chat icon",
             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" })
@@ -3408,62 +3471,36 @@ function createButtonAdapter(disabled, disabledReason, onSetOpen) {
       }
     );
   };
-  CustomButton.displayName = "CustomButton";
-  return CustomButton;
-}
-function CustomCopilotSidebar2({
-  children,
-  defaultOpen = false,
-  onSetOpen,
-  instructions,
-  className,
-  disabled = false,
-  disabledReason = "Start a free trial to enable AI chat",
-  onError,
-  renderError,
-  ThinkingIndicator,
-  ToolCallsComponent,
-  onReportIssue
-}) {
-  const HeaderAdapterWithClose = useMemo(() => createHeaderAdapter(onSetOpen), [onSetOpen]);
-  const CustomButton = useMemo(
-    () => createButtonAdapter(disabled, disabledReason, onSetOpen),
-    [disabled, disabledReason, onSetOpen]
-  );
-  const AssistantMessageAdapterMemo = useMemo(
-    () => onReportIssue ? createAssistantMessageAdapterWithErrorReporting(
-      onReportIssue,
-      ThinkingIndicator) : ThinkingIndicator || ToolCallsComponent ? createAssistantMessageAdapter(ThinkingIndicator) : AssistantMessageAdapter,
-    [ThinkingIndicator, ToolCallsComponent, onReportIssue]
-  );
-  return /* @__PURE__ */ jsxs("div", { "data-testid": "copilot-sidebar", children: [
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(GlobalSidebarStyles2, {}),
     /* @__PURE__ */ jsx(
       CopilotSidebar,
       {
-        AssistantMessage: AssistantMessageAdapterMemo,
+        AssistantMessage: AssistantMessageAdapter,
         UserMessage: UserMessageAdapter,
         Input: InputAdapter,
-        Header: HeaderAdapterWithClose,
-        Window: WindowAdapter,
+        Header: HeaderAdapter,
+        Window: WindowAdapter2,
+        Messages: MessagesAdapter,
         Button: CustomButton,
         instructions,
         labels: {
           title: "AI Assistant",
-          initial: "Hi! How can I help you today?"
+          initial: "Hi! How can I help you today?",
+          ...labels
         },
+        icons,
         defaultOpen,
-        clickOutsideToClose: true,
-        hitEscapeToClose: true,
+        clickOutsideToClose,
+        hitEscapeToClose,
+        shortcut,
         onSetOpen,
-        onError,
-        renderError,
         className,
         children
       }
     )
   ] });
-}
+};
 CustomCopilotSidebar2.displayName = "CustomCopilotSidebar";
 var FooterContainer = styled9.footer`
   display: flex;
@@ -4275,6 +4312,6 @@ function SuggestionChip({ suggestion, onSelect }) {
 }
 Suggestions.displayName = "Suggestions";
 
-export { ActionExecutionAdapter, Actions, AgentState, AssistantMessage, AssistantMessageAdapter, Button, CustomCopilotSidebar2 as CustomCopilotSidebar, FileAttachment, Footer, Header, Input, InputAdapter, CustomCopilotSidebar as IntegratedSidebar, Messages, MessagesList, MessagesListContainer, MessagesListContent, Response, StreamErrorMessage, StreamStatusIndicator, StreamingText2 as StreamingText, Suggestions, UserMessage2 as UserMessage, UserMessageAdapter, Window, clearToolCalls, registerToolCall };
+export { ActionExecutionAdapter, Actions, AgentState, AssistantMessage, AssistantMessageAdapter, Button, CustomCopilotSidebar, FileAttachment, Footer, Header, Input, InputAdapter, CustomCopilotSidebar2 as IntegratedSidebar, Messages, MessagesList, MessagesListContainer, MessagesListContent, Response, StreamErrorMessage, StreamStatusIndicator, StreamingText2 as StreamingText, Suggestions, UserMessage2 as UserMessage, UserMessageAdapter, Window, clearToolCalls, registerToolCall, useChatContext };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map