@agentiffai/design 1.3.6 → 1.3.8

package/dist/copilotkit/index.cjs

@@ -2,14 +2,15 @@
 
 var button = require('@react-aria/button');
 var react = require('react');
-var styled4 = require('styled-components');
+var styled8 = require('styled-components');
 var jsxRuntime = require('react/jsx-runtime');
+var reactCore = require('@copilotkit/react-core');
 var reactUi = require('@copilotkit/react-ui');
 var textfield = require('@react-aria/textfield');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var styled4__default = /*#__PURE__*/_interopDefault(styled4);
+var styled8__default = /*#__PURE__*/_interopDefault(styled8);
 
 // src/components/copilotkit/Button/Button.tsx
 
@@ -170,7 +171,7 @@ var tokens = {
 
 // src/components/copilotkit/Button/Button.styles.ts
 var variantStyles = {
-  primary: styled4.css`
+  primary: styled8.css`
     background-color: ${tokens.colors.primary};
     color: ${tokens.colors.text.primary};
     border: none;
@@ -190,7 +191,7 @@ var variantStyles = {
       outline-offset: 2px;
     }
   `,
-  secondary: styled4.css`
+  secondary: styled8.css`
     background-color: transparent;
     color: ${tokens.colors.text.primary};
     border: 1px solid ${tokens.colors.border.default};
@@ -209,7 +210,7 @@ var variantStyles = {
       outline-offset: 2px;
     }
   `,
-  icon: styled4.css`
+  icon: styled8.css`
     background-color: transparent;
     color: ${tokens.colors.text.primary};
     border: none;
@@ -232,26 +233,26 @@ var variantStyles = {
   `
 };
 var sizeStyles = {
-  small: styled4.css`
+  small: styled8.css`
     padding: ${tokens.spacing.xs} ${tokens.spacing.sm};
     font-size: ${tokens.typography.fontSize.sm};
     min-width: 60px;
     height: 28px;
   `,
-  medium: styled4.css`
+  medium: styled8.css`
     padding: ${tokens.spacing.sm} ${tokens.spacing.md};
     font-size: ${tokens.typography.fontSize.base};
     min-width: 80px;
     height: 36px;
   `,
-  large: styled4.css`
+  large: styled8.css`
     padding: ${tokens.spacing.md} ${tokens.spacing.lg};
     font-size: ${tokens.typography.fontSize.lg};
     min-width: 100px;
     height: 44px;
   `
 };
-var StyledButton = styled4__default.default.button`
+var StyledButton = styled8__default.default.button`
   /* Base styles */
   display: inline-flex;
   align-items: center;
@@ -272,19 +273,19 @@ var StyledButton = styled4__default.default.button`
   ${({ $size, $variant }) => $variant !== "icon" && sizeStyles[$size]}
 
   /* Icon variant size overrides */
-  ${({ $variant, $size }) => $variant === "icon" && styled4.css`
+  ${({ $variant, $size }) => $variant === "icon" && styled8.css`
       width: ${$size === "small" ? "28px" : $size === "large" ? "44px" : "36px"};
       height: ${$size === "small" ? "28px" : $size === "large" ? "44px" : "36px"};
       border-radius: ${tokens.borderRadius.sm};
     `}
 
   /* Pressed state */
-  ${({ $isPressed }) => $isPressed && styled4.css`
+  ${({ $isPressed }) => $isPressed && styled8.css`
       transform: scale(0.98);
     `}
 
   /* Loading state */
-  ${({ $isLoading }) => $isLoading && styled4.css`
+  ${({ $isLoading }) => $isLoading && styled8.css`
       cursor: wait;
       opacity: 0.7;
     `}
@@ -334,15 +335,15 @@ function Button({
   );
 }
 Button.displayName = "Button";
-var ActionsContainer = styled4__default.default.div`
+var ActionsContainer = styled8__default.default.div`
   display: flex;
   gap: ${tokens.spacing.sm};
   align-items: center;
 
-  ${({ $layout }) => $layout === "horizontal" ? styled4.css`
+  ${({ $layout }) => $layout === "horizontal" ? styled8.css`
           flex-direction: row;
           flex-wrap: wrap;
-        ` : styled4.css`
+        ` : styled8.css`
           flex-direction: column;
           align-items: stretch;
 
@@ -368,7 +369,7 @@ function Actions({ actions, layout = "horizontal", className }) {
   )) });
 }
 Actions.displayName = "Actions";
-var dotPulse = styled4.keyframes`
+var dotPulse = styled8.keyframes`
   0%, 100% {
     opacity: 0.3;
     transform: scale(0.8);
@@ -378,7 +379,7 @@ var dotPulse = styled4.keyframes`
     transform: scale(1);
   }
 `;
-var fadeIn = styled4.keyframes`
+var fadeIn = styled8.keyframes`
   from {
     opacity: 0;
   }
@@ -386,7 +387,7 @@ var fadeIn = styled4.keyframes`
     opacity: 1;
   }
 `;
-var blink = styled4.keyframes`
+var blink = styled8.keyframes`
   0%, 49% {
     opacity: 1;
   }
@@ -394,7 +395,7 @@ var blink = styled4.keyframes`
     opacity: 0;
   }
 `;
-var ResponseContainer = styled4__default.default.div`
+var ResponseContainer = styled8__default.default.div`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
@@ -406,13 +407,13 @@ var ResponseContainer = styled4__default.default.div`
   max-width: fit-content;
   margin: 0 auto;
 `;
-var LoadingDots = styled4__default.default.div`
+var LoadingDots = styled8__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
   padding: 0 ${tokens.spacing.xs};
 `;
-var Dot = styled4__default.default.span`
+var Dot = styled8__default.default.span`
   width: ${tokens.spacing.xs};
   height: ${tokens.spacing.xs};
   border-radius: ${tokens.borderRadius.full};
@@ -420,7 +421,7 @@ var Dot = styled4__default.default.span`
   animation: ${dotPulse} 1.4s ease-in-out infinite;
   animation-delay: ${(props) => props.delay}s;
 `;
-var TypingIndicator = styled4__default.default.div`
+var TypingIndicator = styled8__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -433,14 +434,14 @@ var TypingIndicator = styled4__default.default.div`
     animation: ${dotPulse} 1.4s ease-in-out infinite;
   }
 `;
-var Message = styled4__default.default.span`
+var Message = styled8__default.default.span`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.primary};
   font-weight: ${tokens.typography.fontWeight.regular};
   line-height: ${tokens.typography.lineHeight.normal};
   white-space: nowrap;
 `;
-var StreamingText = styled4__default.default.div`
+var StreamingText = styled8__default.default.div`
   font-size: ${tokens.typography.fontSize.sm};
   line-height: ${tokens.typography.lineHeight.normal};
   color: ${tokens.colors.text.primary};
@@ -491,7 +492,7 @@ var Response = ({
   }
   return null;
 };
-var dotPulse2 = styled4.keyframes`
+var dotPulse2 = styled8.keyframes`
   0%, 100% {
     opacity: 0.3;
     transform: scale(0.8);
@@ -501,7 +502,7 @@ var dotPulse2 = styled4.keyframes`
     transform: scale(1);
   }
 `;
-var shake = styled4.keyframes`
+var shake = styled8.keyframes`
   0%, 100% {
     transform: translateX(0);
   }
@@ -512,7 +513,7 @@ var shake = styled4.keyframes`
     transform: translateX(5px);
   }
 `;
-var AgentStateContainer = styled4__default.default.div`
+var AgentStateContainer = styled8__default.default.div`
   display: inline-flex;
   flex-direction: column;
   align-items: center;
@@ -526,35 +527,35 @@ var AgentStateContainer = styled4__default.default.div`
   max-width: fit-content;
   margin: 0 auto;
 `;
-var StateContent = styled4__default.default.div`
+var StateContent = styled8__default.default.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
   align-items: center;
   width: 100%;
 `;
-var IdleIndicator = styled4__default.default.div`
+var IdleIndicator = styled8__default.default.div`
   width: ${tokens.spacing.xs};
   height: ${tokens.spacing.xs};
   background-color: ${tokens.colors.status.idle};
   border-radius: ${tokens.borderRadius.full};
   animation: ${dotPulse2} 2s infinite ease-in-out;
 `;
-var ErrorIndicator = styled4__default.default.div`
+var ErrorIndicator = styled8__default.default.div`
   width: ${tokens.spacing.xs};
   height: ${tokens.spacing.xs};
   background-color: ${tokens.colors.error};
   border-radius: ${tokens.borderRadius.full};
   animation: ${shake} 0.5s ease-in-out;
 `;
-var StateLabel = styled4__default.default.span`
+var StateLabel = styled8__default.default.span`
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.regular};
   color: ${tokens.colors.text.primary};
   line-height: ${tokens.typography.lineHeight.normal};
   white-space: nowrap;
 `;
-styled4__default.default.p`
+styled8__default.default.p`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.tertiary};
   line-height: ${tokens.typography.lineHeight.normal};
@@ -562,7 +563,7 @@ styled4__default.default.p`
   text-align: center;
   white-space: nowrap;
 `;
-var ProgressBar = styled4__default.default.div`
+var ProgressBar = styled8__default.default.div`
   width: 100%;
   height: ${tokens.spacing.xs};
   background-color: ${tokens.colors.surface.elevated};
@@ -570,7 +571,7 @@ var ProgressBar = styled4__default.default.div`
   overflow: hidden;
   margin-top: ${tokens.spacing.xs};
 `;
-var ProgressBarFill = styled4__default.default.div`
+var ProgressBarFill = styled8__default.default.div`
   height: 100%;
   width: ${(props) => Math.min(Math.max(props.progress, 0), 100)}%;
   background: linear-gradient(135deg, ${tokens.colors.accent} 0%, ${tokens.colors.primary} 100%);
@@ -599,11 +600,11 @@ var AgentState = ({ state, message, progress, className }) => {
   }
   return null;
 };
-var Container = styled4__default.default.div`
+var Container = styled8__default.default.div`
   margin: ${tokens.spacing.sm} 0;
   padding: 0 ${tokens.spacing.sm};
 `;
-var ToolName = styled4__default.default.div`
+var ToolName = styled8__default.default.div`
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.text.tertiary};
   margin-bottom: ${tokens.spacing.xs};
@@ -653,7 +654,7 @@ var ActionExecutionAdapter = ({ message, inProgress }) => {
   ] });
 };
 ActionExecutionAdapter.displayName = "ActionExecutionAdapter";
-var dotPulse3 = styled4.keyframes`
+var dotPulse3 = styled8.keyframes`
   0%, 100% {
     opacity: 0.3;
     transform: scale(0.8);
@@ -663,7 +664,7 @@ var dotPulse3 = styled4.keyframes`
     transform: scale(1);
   }
 `;
-var pulse = styled4.keyframes`
+var pulse = styled8.keyframes`
   0%, 100% {
     opacity: 0.5;
     transform: scale(1);
@@ -673,7 +674,7 @@ var pulse = styled4.keyframes`
     transform: scale(1.2);
   }
 `;
-var wave = styled4.keyframes`
+var wave = styled8.keyframes`
   0%, 40%, 100% {
     transform: translateY(0);
   }
@@ -710,7 +711,7 @@ var getSizeValue = (size = "md") => {
       };
   }
 };
-var Container2 = styled4__default.default.div`
+var Container2 = styled8__default.default.div`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.md};
@@ -722,7 +723,7 @@ var Container2 = styled4__default.default.div`
   max-width: fit-content;
   margin: 0 auto;
 `;
-var Avatar = styled4__default.default.div`
+var Avatar = styled8__default.default.div`
   width: ${(props) => getSizeValue(props.size).avatar};
   height: ${(props) => getSizeValue(props.size).avatar};
   border-radius: ${tokens.borderRadius.full};
@@ -733,23 +734,23 @@ var Avatar = styled4__default.default.div`
   flex-shrink: 0;
   box-shadow: ${tokens.shadows.glow.primary};
 `;
-var HeadphonesIcon = styled4__default.default.svg`
+var HeadphonesIcon = styled8__default.default.svg`
   width: ${(props) => getSizeValue(props.size).icon};
   height: ${(props) => getSizeValue(props.size).icon};
   color: ${tokens.colors.text.primary};
 `;
-var Content = styled4__default.default.div`
+var Content = styled8__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
 `;
-var LoadingDots2 = styled4__default.default.div`
+var LoadingDots2 = styled8__default.default.div`
   display: flex;
   align-items: center;
   gap: ${(props) => props.variant === "wave" ? "2px" : `${tokens.spacing.xs}`};
   padding: 0 ${tokens.spacing.xs};
 `;
-var Dot2 = styled4__default.default.span`
+var Dot2 = styled8__default.default.span`
   width: ${(props) => getSizeValue(props.size).dotSize};
   height: ${(props) => getSizeValue(props.size).dotSize};
   border-radius: ${tokens.borderRadius.full};
@@ -767,7 +768,7 @@ var Dot2 = styled4__default.default.span`
 }}
     1.4s ease-in-out infinite;
 `;
-var Message2 = styled4__default.default.span`
+var Message2 = styled8__default.default.span`
   font-size: ${(props) => getSizeValue(props.size).fontSize};
   color: ${tokens.colors.text.secondary};
   font-weight: ${tokens.typography.fontWeight.regular};
@@ -827,7 +828,7 @@ function AssistantThinking({
   );
 }
 AssistantThinking.displayName = "AssistantThinking";
-var Container3 = styled4__default.default.div`
+var Container3 = styled8__default.default.div`
   font-family: ${(props) => props.$variant === "code" ? tokens.typography.fontFamily.monospace : tokens.typography.fontFamily.primary};
   white-space: pre-wrap;
   word-break: break-word;
@@ -836,7 +837,7 @@ var Container3 = styled4__default.default.div`
   text-rendering: optimizeSpeed;
   contain: content;
 `;
-var Cursor = styled4__default.default.span`
+var Cursor = styled8__default.default.span`
   display: inline-block;
   width: 2px;
   height: 1em;
@@ -860,17 +861,15 @@ var StreamingTextBase = ({
   content,
   isStreaming = false,
   typingSpeed: _typingSpeed = 50,
-  // Not used - streaming shows chunks as they arrive
+  // Reserved for future use
   cursor = true,
   variant = "default",
   onStreamComplete,
   className
 }) => {
-  const [displayedText, setDisplayedText] = react.useState(content);
   const wasStreamingRef = react.useRef(isStreaming);
   const completionCalledRef = react.useRef(false);
   react.useEffect(() => {
-    setDisplayedText(content);
     if (wasStreamingRef.current && !isStreaming && !completionCalledRef.current) {
       completionCalledRef.current = true;
       onStreamComplete?.();
@@ -879,45 +878,48 @@ var StreamingTextBase = ({
       completionCalledRef.current = false;
     }
     wasStreamingRef.current = isStreaming;
-  }, [content, isStreaming, onStreamComplete]);
+  }, [isStreaming, onStreamComplete]);
   const showCursor = isStreaming && cursor;
   return /* @__PURE__ */ jsxRuntime.jsxs(Container3, { $variant: variant, className, children: [
-    displayedText,
+    content,
     showCursor && /* @__PURE__ */ jsxRuntime.jsx(Cursor, {})
   ] });
 };
 var StreamingText2 = react.memo(StreamingTextBase);
 StreamingText2.displayName = "StreamingText";
-var MessageContainer = styled4__default.default.div`
+var MessageContainer = styled8__default.default.div`
   display: flex;
-  gap: ${tokens.spacing.sm};
-  align-items: flex-start;
-  padding: ${tokens.spacing.sm} 0;
+  flex-direction: column;
+  gap: ${tokens.spacing.xs};
+  padding: ${tokens.spacing.xs} 0;
   max-width: 100%;
   /* GPU acceleration hint for smooth rendering during streaming */
   will-change: contents;
   contain: content;
 `;
-var AvatarContainer = styled4__default.default.div`
+var AvatarContainer = styled8__default.default.div`
+  display: flex;
+  align-items: center;
+  gap: ${tokens.spacing.xs};
   flex-shrink: 0;
 `;
-var Avatar2 = styled4__default.default.img`
-  width: ${tokens.spacing.xl};
-  height: ${tokens.spacing.xl};
+var Avatar2 = styled8__default.default.img`
+  width: 20px;
+  height: 20px;
   border-radius: ${tokens.borderRadius.full};
   object-fit: cover;
   background-color: transparent;
 `;
-var AvatarInitials = styled4__default.default.div`
-  width: ${tokens.spacing.xl};
-  height: ${tokens.spacing.xl};
+var AvatarInitials = styled8__default.default.div`
+  width: 20px;
+  height: 20px;
   border-radius: ${tokens.borderRadius.full};
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: ${tokens.colors.secondary};
-  padding: ${tokens.spacing.xs};
+  padding: 2px;
   box-sizing: border-box;
 
   img {
@@ -926,16 +928,20 @@ var AvatarInitials = styled4__default.default.div`
     object-fit: contain;
   }
 `;
-var ContentContainer = styled4__default.default.div`
-  flex: 1;
+var AvatarLabel = styled8__default.default.span`
+  font-size: ${tokens.typography.fontSize.xs};
+  font-weight: ${tokens.typography.fontWeight.medium};
+  color: ${tokens.colors.text.secondary};
+`;
+var ContentContainer = styled8__default.default.div`
+  width: 100%;
   min-width: 0;
 `;
-var MessageContent = styled4__default.default.div`
+var MessageContent = styled8__default.default.div`
   /* Use solid color instead of backdrop-filter for performance during streaming */
   background-color: ${tokens.colors.surface.elevated};
-  padding: ${tokens.spacing.sm} ${tokens.spacing.md};
+  padding: ${tokens.spacing.sm};
   border-radius: ${tokens.borderRadius.lg};
-  border-top-left-radius: ${tokens.borderRadius.sm};
   color: ${tokens.colors.text.primary};
   font-size: ${tokens.typography.fontSize.sm};
   line-height: ${tokens.typography.lineHeight.normal};
@@ -945,17 +951,16 @@ var MessageContent = styled4__default.default.div`
   /* Optimize text rendering */
   text-rendering: optimizeSpeed;
 `;
-var LoadingDots3 = styled4__default.default.div`
+var LoadingDots3 = styled8__default.default.div`
   display: flex;
   gap: ${tokens.spacing.xs};
-  padding: ${tokens.spacing.sm} ${tokens.spacing.md};
+  padding: ${tokens.spacing.sm};
   /* Use solid color instead of backdrop-filter for performance */
   background-color: ${tokens.colors.surface.elevated};
   border-radius: ${tokens.borderRadius.lg};
-  border-top-left-radius: ${tokens.borderRadius.sm};
   width: fit-content;
 `;
-var pulse2 = styled4.keyframes`
+var pulse2 = styled8.keyframes`
   0%, 100% {
     opacity: 0.4;
   }
@@ -963,7 +968,7 @@ var pulse2 = styled4.keyframes`
     opacity: 1;
   }
 `;
-var LoadingDot = styled4__default.default.div`
+var LoadingDot = styled8__default.default.div`
   width: ${tokens.spacing.sm};
   height: ${tokens.spacing.sm};
   border-radius: ${tokens.borderRadius.full};
@@ -972,7 +977,7 @@ var LoadingDot = styled4__default.default.div`
   animation: ${pulse2} 1.4s ease-in-out infinite;
   animation-delay: ${(props) => props.delay}s;
 `;
-var FileAttachmentContainer = styled4__default.default.div`
+var FileAttachmentContainer = styled8__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
@@ -1008,7 +1013,7 @@ var FileAttachmentContainer = styled4__default.default.div`
     }
   `}
 `;
-var FileIconContainer = styled4__default.default.div`
+var FileIconContainer = styled8__default.default.div`
   flex-shrink: 0;
   width: ${tokens.spacing.xl};
   height: ${tokens.spacing.xl};
@@ -1018,14 +1023,14 @@ var FileIconContainer = styled4__default.default.div`
   font-size: ${tokens.typography.fontSize["2xl"]};
   line-height: 1;
 `;
-var FileInfo = styled4__default.default.div`
+var FileInfo = styled8__default.default.div`
   flex: 1;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 2px;
 `;
-var FileTitle = styled4__default.default.div`
+var FileTitle = styled8__default.default.div`
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.medium};
   color: ${tokens.colors.text.primary};
@@ -1035,7 +1040,7 @@ var FileTitle = styled4__default.default.div`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var FileMetadata = styled4__default.default.div`
+var FileMetadata = styled8__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -1045,7 +1050,7 @@ var FileMetadata = styled4__default.default.div`
   line-height: ${tokens.typography.lineHeight.tight};
   overflow: hidden;
 `;
-var FileSubtitle = styled4__default.default.span`
+var FileSubtitle = styled8__default.default.span`
   color: ${tokens.colors.text.tertiary};
   white-space: nowrap;
   overflow: hidden;
@@ -1101,13 +1106,13 @@ var FileAttachment = ({
     }
   );
 };
-var AttachmentsContainer = styled4__default.default.div`
+var AttachmentsContainer = styled8__default.default.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
   margin-top: ${tokens.spacing.sm};
 `;
-var ActionButton = styled4__default.default.button`
+var ActionButton = styled8__default.default.button`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -1131,19 +1136,19 @@ var ActionButton = styled4__default.default.button`
     transform: scale(0.98);
   }
 `;
-var ActionsContainer2 = styled4__default.default.div`
+var ActionsContainer2 = styled8__default.default.div`
   display: flex;
   gap: ${tokens.spacing.xs};
   flex-wrap: wrap;
   margin-top: ${tokens.spacing.sm};
 `;
-var MessageTime = styled4__default.default.time`
+var MessageTime = styled8__default.default.time`
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.text.tertiary};
   margin-top: ${tokens.spacing.xs};
   display: block;
 `;
-var StreamingIndicator = styled4__default.default.span`
+var StreamingIndicator = styled8__default.default.span`
   display: inline-block;
   width: ${tokens.spacing.xs};
   height: ${tokens.spacing.xs};
@@ -1207,7 +1212,10 @@ var AssistantMessageBase = ({
     ] });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(MessageContainer, { className, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(AvatarContainer, { children: avatarUrl ? /* @__PURE__ */ jsxRuntime.jsx(Avatar2, { src: avatarUrl, alt: "Assistant avatar" }) : /* @__PURE__ */ jsxRuntime.jsx(AvatarInitials, { children: /* @__PURE__ */ jsxRuntime.jsx(Avatar2, { src: "/assets/avatar-transparent-bg.png", alt: "AI Assistant" }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(AvatarContainer, { children: [
+      avatarUrl ? /* @__PURE__ */ jsxRuntime.jsx(Avatar2, { src: avatarUrl, alt: "Assistant avatar" }) : /* @__PURE__ */ jsxRuntime.jsx(AvatarInitials, { children: /* @__PURE__ */ jsxRuntime.jsx(Avatar2, { src: "/assets/avatar-transparent-bg.png", alt: "AI Assistant" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(AvatarLabel, { children: "Assistant" })
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsx(ContentContainer, { children: renderContent() })
   ] });
 };
@@ -1217,7 +1225,78 @@ var TOOL_CALL_MARKER_REGEX = /<!--TOOL_CALL:([^:]+):(.+?)-->/g;
 function stripToolCallMarkers(content) {
   return content.replace(TOOL_CALL_MARKER_REGEX, "").trim();
 }
-var GenerativeUIContainer = styled4__default.default.div`
+var ERROR_PATTERNS = [
+  /\bfailed\b/i,
+  /\berror\b/i,
+  /\bunable to\b/i,
+  /\bcouldn't\b/i,
+  /\bcan't\b/i,
+  /\bcannot\b/i,
+  /\bsomething went wrong\b/i,
+  /\btry again\b/i,
+  /\bunexpected\b/i,
+  /\btimed out\b/i,
+  /\bconnection\b.*\b(lost|failed|refused)\b/i
+];
+var CORRELATION_ID_PATTERNS = [
+  /reference:\s*([a-f0-9-]+)/i,
+  /correlation[_\s]?id:\s*([a-f0-9-]+)/i,
+  /\[([a-f0-9]{8,})\]/i
+];
+function inferErrorCategory(content) {
+  const lowerContent = content.toLowerCase();
+  if (lowerContent.includes("network") || lowerContent.includes("internet") || lowerContent.includes("connection") || lowerContent.includes("offline") || lowerContent.includes("timed out")) {
+    return "Network";
+  }
+  if (lowerContent.includes("unauthorized") || lowerContent.includes("authentication") || lowerContent.includes("login") || lowerContent.includes("session expired") || lowerContent.includes("credentials")) {
+    return "Auth";
+  }
+  if (lowerContent.includes("oauth") || lowerContent.includes("reconnect") || lowerContent.includes("authorization") || lowerContent.includes("token") && lowerContent.includes("expired")) {
+    return "OAuth";
+  }
+  if (lowerContent.includes("workflow") || lowerContent.includes("execution") || lowerContent.includes("failed to start") || lowerContent.includes("automation")) {
+    return "Workflow";
+  }
+  return "Unknown";
+}
+function extractCorrelationId(content) {
+  for (const pattern of CORRELATION_ID_PATTERNS) {
+    const match = content.match(pattern);
+    if (match?.[1]) {
+      return match[1];
+    }
+  }
+  return void 0;
+}
+function detectErrorInMessage(content) {
+  const hasError = ERROR_PATTERNS.some((pattern) => pattern.test(content));
+  if (!hasError) {
+    return { hasError: false };
+  }
+  return {
+    hasError: true,
+    category: inferErrorCategory(content),
+    correlationId: extractCorrelationId(content),
+    errorMessage: content
+  };
+}
+function buildChatSnippet(messages, errorMessageContent, maxMessages = 5, maxLength = 1500) {
+  const recentMessages = messages.filter((msg) => msg.content && msg.content !== errorMessageContent).slice(-maxMessages);
+  const formattedMessages = recentMessages.map((msg) => {
+    const role = msg.role === "user" ? "User" : "Assistant";
+    const content = msg.content || "";
+    const truncatedContent = content.length > 300 ? content.slice(0, 300) + "..." : content;
+    return `[${role}]: ${truncatedContent}`;
+  });
+  const errorSnippet = errorMessageContent.length > 500 ? errorMessageContent.slice(0, 500) + "..." : errorMessageContent;
+  formattedMessages.push(`[Assistant - Error]: ${errorSnippet}`);
+  let result = formattedMessages.join("\n\n");
+  if (result.length > maxLength) {
+    result = result.slice(0, maxLength) + "\n...[truncated]";
+  }
+  return result;
+}
+var GenerativeUIContainer = styled8__default.default.div`
   margin-top: ${tokens.spacing.sm};
   margin-bottom: ${tokens.spacing.sm};
 `;
@@ -1266,7 +1345,142 @@ var AssistantMessageAdapterBase = ({
 };
 var AssistantMessageAdapter = react.memo(AssistantMessageAdapterBase);
 AssistantMessageAdapter.displayName = "AssistantMessageAdapter";
-var ChatInputContainer = styled4__default.default.div`
+function createAssistantMessageAdapter(ThinkingIndicator, ToolCallsComponent) {
+  const CustomAssistantMessageAdapter = ({
+    message,
+    isLoading,
+    isGenerating,
+    isCurrentMessage
+  }) => {
+    const showThinking = isLoading || isGenerating && !message?.content;
+    const shouldShowToolCalls = isCurrentMessage && ToolCallsComponent;
+    const rawContent = message?.content || "";
+    const content = stripToolCallMarkers(rawContent);
+    let generativeUIOutput = null;
+    const msgWithUI = message;
+    if (msgWithUI && typeof msgWithUI.generativeUI === "function") {
+      try {
+        generativeUIOutput = msgWithUI.generativeUI();
+      } catch (e) {
+        console.warn("[AssistantMessageAdapter] Error rendering generativeUI:", e);
+      }
+    }
+    const attachments = [];
+    if (showThinking) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        ThinkingIndicator ? /* @__PURE__ */ jsxRuntime.jsx(ThinkingIndicator, { isLoading, isGenerating }) : /* @__PURE__ */ jsxRuntime.jsx(AssistantThinking, { message: "Thinking..." }),
+        shouldShowToolCalls && /* @__PURE__ */ jsxRuntime.jsx(ToolCallsComponent, {})
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      shouldShowToolCalls && /* @__PURE__ */ jsxRuntime.jsx(ToolCallsComponent, {}),
+      generativeUIOutput && /* @__PURE__ */ jsxRuntime.jsx(GenerativeUIContainer, { children: generativeUIOutput }),
+      content && /* @__PURE__ */ jsxRuntime.jsx(
+        AssistantMessage,
+        {
+          content,
+          avatarInitials: "AI",
+          isLoading: false,
+          isStreaming: isGenerating,
+          attachments,
+          enableMarkdown: true
+        }
+      )
+    ] });
+  };
+  CustomAssistantMessageAdapter.displayName = "CustomAssistantMessageAdapter";
+  return react.memo(CustomAssistantMessageAdapter);
+}
+function createAssistantMessageAdapterWithErrorReporting(onReportIssue, ThinkingIndicator, ToolCallsComponent) {
+  const ErrorReportingAssistantMessageAdapter = ({
+    message,
+    isLoading,
+    isGenerating,
+    isCurrentMessage
+  }) => {
+    const { visibleMessages } = reactCore.useCopilotChat();
+    const showThinking = isLoading || isGenerating && !message?.content;
+    const shouldShowToolCalls = isCurrentMessage && ToolCallsComponent;
+    const rawContent = message?.content || "";
+    const content = stripToolCallMarkers(rawContent);
+    const errorContext = react.useMemo(() => detectErrorInMessage(content), [content]);
+    const chatSnippet = react.useMemo(() => {
+      if (!errorContext.hasError) return "";
+      return buildChatSnippet(visibleMessages, content);
+    }, [visibleMessages, content, errorContext.hasError]);
+    const actions = react.useMemo(() => {
+      if (!errorContext.hasError || !onReportIssue || isGenerating) {
+        return [];
+      }
+      return [
+        {
+          label: "Report Issue",
+          onClick: () => {
+            onReportIssue({
+              errorCategory: errorContext.category,
+              correlationId: errorContext.correlationId,
+              // Include conversation history leading to the error
+              chatSnippet
+            });
+          },
+          icon: /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              width: "14",
+              height: "14",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+              ]
+            }
+          )
+        }
+      ];
+    }, [errorContext, chatSnippet, isGenerating]);
+    let generativeUIOutput = null;
+    const msgWithUI = message;
+    if (msgWithUI && typeof msgWithUI.generativeUI === "function") {
+      try {
+        generativeUIOutput = msgWithUI.generativeUI();
+      } catch (e) {
+        console.warn("[AssistantMessageAdapter] Error rendering generativeUI:", e);
+      }
+    }
+    const attachments = [];
+    if (showThinking) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        ThinkingIndicator ? /* @__PURE__ */ jsxRuntime.jsx(ThinkingIndicator, { isLoading, isGenerating }) : /* @__PURE__ */ jsxRuntime.jsx(AssistantThinking, { message: "Thinking..." }),
+        shouldShowToolCalls && /* @__PURE__ */ jsxRuntime.jsx(ToolCallsComponent, {})
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      shouldShowToolCalls && /* @__PURE__ */ jsxRuntime.jsx(ToolCallsComponent, {}),
+      generativeUIOutput && /* @__PURE__ */ jsxRuntime.jsx(GenerativeUIContainer, { children: generativeUIOutput }),
+      content && /* @__PURE__ */ jsxRuntime.jsx(
+        AssistantMessage,
+        {
+          content,
+          avatarInitials: "AI",
+          isLoading: false,
+          isStreaming: isGenerating,
+          attachments,
+          enableMarkdown: true,
+          actions
+        }
+      )
+    ] });
+  };
+  ErrorReportingAssistantMessageAdapter.displayName = "ErrorReportingAssistantMessageAdapter";
+  return react.memo(ErrorReportingAssistantMessageAdapter);
+}
+var ChatInputContainer = styled8__default.default.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -1282,7 +1496,7 @@ var ChatInputContainer = styled4__default.default.div`
     padding: ${tokens.spacing.md};
   }
 `;
-var SuggestionsWrapper = styled4__default.default.div`
+var SuggestionsWrapper = styled8__default.default.div`
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -1291,7 +1505,7 @@ var SuggestionsWrapper = styled4__default.default.div`
   width: 100%;
   box-sizing: border-box;
 `;
-var SuggestionButton = styled4__default.default.button`
+var SuggestionButton = styled8__default.default.button`
   padding: ${tokens.spacing.sm} ${tokens.spacing.md};
   font-family: ${tokens.typography.fontFamily.primary};
   font-size: 13px;
@@ -1330,7 +1544,7 @@ var SuggestionButton = styled4__default.default.button`
     opacity: 0.4;
   }
 `;
-var InputWrapper = styled4__default.default.div`
+var InputWrapper = styled8__default.default.div`
   display: flex;
   align-items: flex-end; /* Align button to bottom when textarea expands */
   gap: ${tokens.spacing.sm};
@@ -1348,7 +1562,7 @@ var InputWrapper = styled4__default.default.div`
     background-color: rgba(50, 50, 52, 0.6);
   }
 `;
-var InputField = styled4__default.default.textarea`
+var InputField = styled8__default.default.textarea`
   flex: 1;
   border: none;
   outline: none;
@@ -1373,7 +1587,7 @@ var InputField = styled4__default.default.textarea`
     cursor: not-allowed;
   }
 `;
-var SubmitButton = styled4__default.default.button`
+var SubmitButton = styled8__default.default.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1609,7 +1823,7 @@ var InputAdapter = ({
   );
 };
 InputAdapter.displayName = "InputAdapter";
-var StyledUserMessage = styled4__default.default.button`
+var StyledUserMessage = styled8__default.default.button`
   /* Base styles */
   display: inline-flex;
   align-items: center;
@@ -1679,7 +1893,7 @@ var StyledUserMessage = styled4__default.default.button`
     }
   }
 
-  ${({ $isPressed }) => $isPressed && styled4.css`
+  ${({ $isPressed }) => $isPressed && styled8.css`
       transform: translateY(0) scale(0.98);
       box-shadow: ${tokens.shadows.sm};
 
@@ -1745,7 +1959,7 @@ function UserMessageBase({
 }
 var UserMessage = react.memo(UserMessageBase);
 UserMessage.displayName = "UserMessage";
-var UserMessageWrapper = styled4__default.default.div`
+var UserMessageWrapper = styled8__default.default.div`
   display: flex;
   justify-content: flex-end;
   width: 100%;
@@ -1765,7 +1979,7 @@ var UserMessageAdapterBase = ({
 };
 var UserMessageAdapter = react.memo(UserMessageAdapterBase);
 UserMessageAdapter.displayName = "UserMessageAdapter";
-var pulse3 = styled4.keyframes`
+var pulse3 = styled8.keyframes`
   0%, 100% {
     opacity: 1;
     transform: scale(1);
@@ -1775,7 +1989,7 @@ var pulse3 = styled4.keyframes`
     transform: scale(1.1);
   }
 `;
-var Container4 = styled4__default.default.div`
+var Container4 = styled8__default.default.div`
   display: inline-flex;
   align-items: center;
   gap: ${(props) => {
@@ -1791,7 +2005,7 @@ var Container4 = styled4__default.default.div`
 }};
   font-family: ${tokens.typography.fontFamily.primary};
 `;
-var StatusDot = styled4__default.default.div`
+var StatusDot = styled8__default.default.div`
   width: ${(props) => {
   if (props.variant === "badge") {
     switch (props.size) {
@@ -1852,7 +2066,7 @@ var StatusDot = styled4__default.default.div`
   animation: ${(props) => props.status === "streaming" ? pulse3 : "none"} 2s ease-in-out infinite;
   flex-shrink: 0;
 `;
-var Label = styled4__default.default.span`
+var Label = styled8__default.default.span`
   font-size: ${(props) => {
   if (props.variant === "badge") {
     switch (props.size) {
@@ -1879,7 +2093,7 @@ var Label = styled4__default.default.span`
   color: ${tokens.colors.text.secondary};
   line-height: ${tokens.typography.lineHeight.tight};
 `;
-var BadgeContainer = styled4__default.default.div`
+var BadgeContainer = styled8__default.default.div`
   display: inline-flex;
   align-items: center;
   gap: ${(props) => {
@@ -1956,7 +2170,7 @@ var StreamStatusIndicator = ({
   return /* @__PURE__ */ jsxRuntime.jsx(Container4, { size, className, role: "status", "aria-label": getStatusLabel(status), children: content });
 };
 StreamStatusIndicator.displayName = "StreamStatusIndicator";
-var HeaderContainer = styled4__default.default.header`
+var HeaderContainer = styled8__default.default.header`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1972,14 +2186,14 @@ var HeaderContainer = styled4__default.default.header`
     padding: ${tokens.spacing.sm} ${tokens.spacing.md};
   }
 `;
-var HeaderContent = styled4__default.default.div`
+var HeaderContent = styled8__default.default.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.xs};
   flex: 1;
   min-width: 0;
 `;
-var HeaderTitle = styled4__default.default.h1`
+var HeaderTitle = styled8__default.default.h1`
   margin: 0;
   font-size: ${tokens.typography.fontSize.base};
   font-weight: ${tokens.typography.fontWeight.semibold};
@@ -1990,7 +2204,7 @@ var HeaderTitle = styled4__default.default.h1`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var HeaderSubtitle = styled4__default.default.p`
+var HeaderSubtitle = styled8__default.default.p`
   margin: 0;
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.secondary};
@@ -2000,13 +2214,13 @@ var HeaderSubtitle = styled4__default.default.p`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var HeaderActions = styled4__default.default.div`
+var HeaderActions = styled8__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
   margin-left: ${tokens.spacing.md};
 `;
-var ActionButton2 = styled4__default.default.button`
+var ActionButton2 = styled8__default.default.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -2123,7 +2337,7 @@ var Header = ({
   ] });
 };
 Header.displayName = "Header";
-var MessagesContainer = styled4__default.default.div`
+var MessagesContainer = styled8__default.default.div`
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -2135,18 +2349,14 @@ var MessagesContainer = styled4__default.default.div`
     ${tokens.colors.background.darker},
     ${tokens.colors.background.darkest}
   );
-  padding: ${tokens.spacing.sm};
-  gap: ${tokens.spacing.md};
+  /* 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;
-
-  /* Desktop padding */
-  @media (min-width: ${tokens.breakpoints.mobile}px) {
-    padding: ${tokens.spacing.md};
-  }
 `;
 var Messages = ({
   children,
@@ -2156,7 +2366,7 @@ var Messages = ({
   return /* @__PURE__ */ jsxRuntime.jsx(MessagesContainer, { className, role: "region", "aria-label": ariaLabel, children });
 };
 Messages.displayName = "Messages";
-var WindowContainer = styled4__default.default.div`
+var WindowContainer = styled8__default.default.div`
   display: flex;
   flex-direction: column;
   /* Glassmorphism effect */
@@ -2175,7 +2385,7 @@ var WindowContainer = styled4__default.default.div`
   height: ${({ $height }) => $height};
 
   /* Fullscreen state */
-  ${({ $isFullscreen }) => $isFullscreen && styled4.css`
+  ${({ $isFullscreen }) => $isFullscreen && styled8.css`
       width: 100vw;
       height: 100vh;
       border-radius: 0;
@@ -2187,7 +2397,7 @@ var WindowContainer = styled4__default.default.div`
     `}
 
   /* Minimized state */
-  ${({ $isMinimized }) => $isMinimized && styled4.css`
+  ${({ $isMinimized }) => $isMinimized && styled8.css`
       height: 60px;
       width: 300px;
       box-shadow: ${tokens.shadows.sm};
@@ -2206,7 +2416,7 @@ var WindowContainer = styled4__default.default.div`
 
   /* Responsive behavior for smaller screens */
   @media (max-width: ${tokens.breakpoints.tablet}px) {
-    ${({ $isFullscreen, $isMinimized }) => !$isFullscreen && !$isMinimized && styled4.css`
+    ${({ $isFullscreen, $isMinimized }) => !$isFullscreen && !$isMinimized && styled8.css`
         width: 100vw;
         height: 100vh;
         border-radius: 0;
@@ -2249,7 +2459,7 @@ var Window = ({
   );
 };
 Window.displayName = "Window";
-var GlobalSidebarStyles = styled4.createGlobalStyle`
+var GlobalSidebarStyles = styled8.createGlobalStyle`
   /* Override CopilotKit's default positioning - start off-screen */
   .copilotKitSidebar {
     position: fixed !important;
@@ -2357,7 +2567,7 @@ var GlobalSidebarStyles = styled4.createGlobalStyle`
     }
   }
 `;
-var StyledChatButton = styled4__default.default.button`
+var StyledChatButton = styled8__default.default.button`
   position: fixed;
   bottom: 8px;
   right: 8px;
@@ -2409,7 +2619,7 @@ var CustomCopilotSidebar = ({
     };
     return /* @__PURE__ */ jsxRuntime.jsx(Header, { title: "AI Assistant", subtitle: "How can I help you today?", onClose: handleClose });
   };
-  const WindowAdapter = (props) => {
+  const WindowAdapter2 = (props) => {
     return /* @__PURE__ */ jsxRuntime.jsx(Window, { children: props.children });
   };
   const MessagesAdapter = (props) => {
@@ -2465,7 +2675,7 @@ var CustomCopilotSidebar = ({
         UserMessage: UserMessageAdapter,
         Input: InputAdapter,
         Header: HeaderAdapter,
-        Window: WindowAdapter,
+        Window: WindowAdapter2,
         Messages: MessagesAdapter,
         Button: CustomButton,
         instructions,
@@ -2487,12 +2697,12 @@ var CustomCopilotSidebar = ({
   ] });
 };
 CustomCopilotSidebar.displayName = "CustomCopilotSidebar";
-var GlobalSidebarStyles2 = styled4.createGlobalStyle`
+var GlobalSidebarStyles2 = styled8.createGlobalStyle`
   /* Override CopilotKit's content wrapper to respect safe areas in landscape */
   @media (orientation: landscape) {
     .copilotKitSidebarContentWrapper {
-      right: env(safe-area-inset-right, 0px) !important;
-      left: env(safe-area-inset-left, 0px) !important;
+      right: var(--safe-area-right, 0px) !important;
+      left: var(--safe-area-left, 0px) !important;
     }
   }
 
@@ -2521,18 +2731,18 @@ var GlobalSidebarStyles2 = styled4.createGlobalStyle`
     /* Override CopilotKit defaults for mobile */
     position: fixed !important;
     /* TOP: Account for status bar safe area (Android notch/status bar) */
-    top: calc(${tokens.spacing.sm} + env(safe-area-inset-top, 0px)) !important;
+    top: calc(${tokens.spacing.sm} + var(--safe-area-top, 0px)) !important;
     /* RIGHT: Account for landscape notch on right side */
-    right: calc(${tokens.spacing.sm} + env(safe-area-inset-right, 0px)) !important;
+    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} + env(safe-area-inset-bottom, 0px)) !important;
+    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} + env(safe-area-inset-left, 0px)) !important;
-    width: calc(100vw - ${tokens.spacing.lg} - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) !important;
+    left: calc(${tokens.spacing.sm} + var(--safe-area-left, 0px)) !important;
+    width: calc(100vw - ${tokens.spacing.lg} - var(--safe-area-left, 0px) - var(--safe-area-right, 0px)) !important;
     /* Adjust height to account for top, bottom safe areas, and navbar */
-    height: calc(100vh - ${tokens.spacing.lg} - env(safe-area-inset-top, 0px) - 52px - env(safe-area-inset-bottom, 0px)) !important;
-    max-width: calc(100vw - ${tokens.spacing.lg} - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) !important;
-    max-height: calc(100vh - ${tokens.spacing.lg} - env(safe-area-inset-top, 0px) - 52px - env(safe-area-inset-bottom, 0px)) !important;
+    height: calc(100vh - ${tokens.spacing.lg} - var(--safe-area-top, 0px) - 52px - var(--safe-area-bottom, 0px)) !important;
+    max-width: calc(100vw - ${tokens.spacing.lg} - var(--safe-area-left, 0px) - var(--safe-area-right, 0px)) !important;
+    max-height: calc(100vh - ${tokens.spacing.lg} - var(--safe-area-top, 0px) - 52px - var(--safe-area-bottom, 0px)) !important;
     margin: 0 !important;
     border-radius: ${tokens.borderRadius.xl} !important;
 
@@ -2569,17 +2779,17 @@ var GlobalSidebarStyles2 = styled4.createGlobalStyle`
     .copilotKitSidebar [role="dialog"] {
       inset: auto !important;
       /* TOP: Account for status bar safe area */
-      top: calc(${tokens.spacing.sm} + env(safe-area-inset-top, 0px)) !important;
+      top: calc(${tokens.spacing.sm} + var(--safe-area-top, 0px)) !important;
       /* RIGHT: Account for landscape notch on right side */
-      right: calc(${tokens.spacing.sm} + env(safe-area-inset-right, 0px)) !important;
+      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} + env(safe-area-inset-bottom, 0px)) !important;
+      bottom: calc(52px + ${tokens.spacing.sm} + var(--safe-area-bottom, 0px)) !important;
       left: auto !important;
       width: 28rem !important;
       /* Adjust height to account for top, bottom safe areas, and navbar */
-      height: calc(100vh - ${tokens.spacing.lg} - env(safe-area-inset-top, 0px) - 52px - env(safe-area-inset-bottom, 0px)) !important;
+      height: calc(100vh - ${tokens.spacing.lg} - var(--safe-area-top, 0px) - 52px - var(--safe-area-bottom, 0px)) !important;
       max-width: 28rem !important;
-      max-height: calc(100vh - ${tokens.spacing.lg} - env(safe-area-inset-top, 0px) - 52px - env(safe-area-inset-bottom, 0px)) !important;
+      max-height: calc(100vh - ${tokens.spacing.lg} - var(--safe-area-top, 0px) - 52px - var(--safe-area-bottom, 0px)) !important;
     }
   }
 
@@ -2612,8 +2822,8 @@ var GlobalSidebarStyles2 = styled4.createGlobalStyle`
       left: auto !important;
       right: 1.5rem !important;
       /* Use top/bottom ONLY - let browser calculate height (more reliable than explicit height) */
-      top: env(safe-area-inset-top, 0px) !important;
-      bottom: calc(52px + env(safe-area-inset-bottom, 0px)) !important;
+      top: var(--safe-area-top, 0px) !important;
+      bottom: calc(52px + var(--safe-area-bottom, 0px)) !important;
       /* Remove explicit height - let top/bottom define it */
       height: auto !important;
       max-height: none !important;
@@ -2767,10 +2977,10 @@ var GlobalSidebarStyles2 = styled4.createGlobalStyle`
     box-shadow: none !important;
   }
 `;
-var StyledChatButton2 = styled4__default.default.button`
+var StyledChatButton2 = styled8__default.default.button`
   position: fixed;
-  bottom: calc(${tokens.spacing.sm} + env(safe-area-inset-bottom, 0px));
-  right: calc(${tokens.spacing.sm} + env(safe-area-inset-right, 0px));
+  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: ${tokens.borderRadius.full};
@@ -2801,17 +3011,11 @@ var StyledChatButton2 = styled4__default.default.button`
     fill: ${tokens.colors.text.primary};
   }
 `;
-function CustomCopilotSidebar2({
-  children,
-  defaultOpen = false,
-  onSetOpen,
-  instructions,
-  className,
-  disabled = false,
-  disabledReason = "Start a free trial to enable AI chat",
-  onError,
-  renderError
-}) {
+var WindowAdapter = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Window, { children: props.children });
+};
+WindowAdapter.displayName = "WindowAdapter";
+function createHeaderAdapter(onSetOpen) {
   const HeaderAdapterWithClose = (_props) => {
     const { setOpen } = reactUi.useChatContext();
     const handleClose = () => {
@@ -2820,9 +3024,10 @@ function CustomCopilotSidebar2({
     };
     return /* @__PURE__ */ jsxRuntime.jsx(Header, { title: "AI Assistant", onClose: handleClose });
   };
-  const WindowAdapterLocal = (props) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Window, { children: props.children });
-  };
+  HeaderAdapterWithClose.displayName = "HeaderAdapterWithClose";
+  return HeaderAdapterWithClose;
+}
+function createButtonAdapter(disabled, disabledReason, onSetOpen) {
   const CustomButton = (_props) => {
     const { open, setOpen } = reactUi.useChatContext();
     const handleClick = () => {
@@ -2859,16 +3064,45 @@ function CustomCopilotSidebar2({
       }
     );
   };
+  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 = react.useMemo(
+    () => createHeaderAdapter(onSetOpen),
+    [onSetOpen]
+  );
+  const CustomButton = react.useMemo(
+    () => createButtonAdapter(disabled, disabledReason, onSetOpen),
+    [disabled, disabledReason, onSetOpen]
+  );
+  const AssistantMessageAdapterMemo = react.useMemo(
+    () => onReportIssue ? createAssistantMessageAdapterWithErrorReporting(onReportIssue, ThinkingIndicator, ToolCallsComponent) : ThinkingIndicator || ToolCallsComponent ? createAssistantMessageAdapter(ThinkingIndicator, ToolCallsComponent) : AssistantMessageAdapter,
+    [ThinkingIndicator, ToolCallsComponent, onReportIssue]
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(GlobalSidebarStyles2, {}),
     /* @__PURE__ */ jsxRuntime.jsx(
       reactUi.CopilotSidebar,
       {
-        AssistantMessage: AssistantMessageAdapter,
+        AssistantMessage: AssistantMessageAdapterMemo,
         UserMessage: UserMessageAdapter,
         Input: InputAdapter,
         Header: HeaderAdapterWithClose,
-        Window: WindowAdapterLocal,
+        Window: WindowAdapter,
         Button: CustomButton,
         RenderActionExecutionMessage: ActionExecutionAdapter,
         instructions,
@@ -2889,7 +3123,7 @@ function CustomCopilotSidebar2({
   ] });
 }
 CustomCopilotSidebar2.displayName = "CustomCopilotSidebar";
-var FooterContainer = styled4__default.default.footer`
+var FooterContainer = styled8__default.default.footer`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2898,7 +3132,7 @@ var FooterContainer = styled4__default.default.footer`
   border-top: 1px solid ${tokens.colors.border.default};
   min-height: 44px;
 `;
-var FooterContent = styled4__default.default.div`
+var FooterContent = styled8__default.default.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -2911,13 +3145,13 @@ var FooterContent = styled4__default.default.div`
   font-family: ${tokens.typography.fontFamily.primary};
   line-height: ${tokens.typography.lineHeight.tight};
 `;
-var FooterBranding = styled4__default.default.div`
+var FooterBranding = styled8__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
   flex-shrink: 0;
 `;
-var FooterStatus = styled4__default.default.div`
+var FooterStatus = styled8__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -2927,7 +3161,7 @@ var FooterStatus = styled4__default.default.div`
   font-size: ${tokens.typography.fontSize.xs};
   opacity: 0.8;
 `;
-var FooterLink = styled4__default.default.a`
+var FooterLink = styled8__default.default.a`
   color: ${tokens.colors.primary};
   text-decoration: none;
   transition: opacity ${tokens.transitions.fast};
@@ -2975,13 +3209,13 @@ var Footer = ({
   ] }) });
 };
 Footer.displayName = "Footer";
-var InputContainer = styled4__default.default.div`
+var InputContainer = styled8__default.default.div`
 	display: flex;
 	flex-direction: column;
 	width: 100%;
 	position: relative;
 `;
-var InputWrapper2 = styled4__default.default.div`
+var InputWrapper2 = styled8__default.default.div`
 	display: flex;
 	align-items: flex-end;
 	gap: ${tokens.spacing.sm};
@@ -3001,7 +3235,7 @@ var InputWrapper2 = styled4__default.default.div`
 		border-color: ${tokens.colors.border.subtle};
 	}
 `;
-var TextArea = styled4__default.default.textarea`
+var TextArea = styled8__default.default.textarea`
 	flex: 1;
 	min-height: ${tokens.spacing.lg};
 	max-height: ${(props) => `${(props.$maxRows || 5) * 24}px`};
@@ -3047,7 +3281,7 @@ var TextArea = styled4__default.default.textarea`
 		background: ${tokens.colors.scrollbar.thumbHover};
 	}
 `;
-var SendButton = styled4__default.default.button`
+var SendButton = styled8__default.default.button`
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -3177,7 +3411,7 @@ var Input = ({
     )
   ] }) });
 };
-var MessagesListContainer = styled4__default.default.div`
+var MessagesListContainer = styled8__default.default.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -3217,7 +3451,7 @@ var MessagesListContainer = styled4__default.default.div`
   /* Ensure proper rendering on mobile */
   -webkit-overflow-scrolling: touch;
 `;
-var MessagesListContent = styled4__default.default.div`
+var MessagesListContent = styled8__default.default.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
@@ -3333,19 +3567,19 @@ var MessagesList = ({
     }
   );
 };
-var StyledUserMessage2 = styled4__default.default.div`
+var StyledUserMessage2 = styled8__default.default.div`
   display: flex;
   justify-content: flex-end;
   align-items: flex-start;
-  margin: ${tokens.spacing.sm} 0;
-  padding: 0 ${tokens.spacing.md};
+  margin: ${tokens.spacing.xs} 0;
+  padding: 0;
   width: 100%;
 `;
-var MessageBubble = styled4__default.default.div`
+var MessageBubble = styled8__default.default.div`
   display: flex;
   flex-direction: column;
-  max-width: 70%;
-  padding: ${tokens.spacing.sm} ${tokens.spacing.md};
+  max-width: 85%;
+  padding: ${tokens.spacing.sm};
   border-radius: ${tokens.borderRadius.lg};
 
   /* User message colors - dark blue from brand */
@@ -3368,7 +3602,7 @@ var MessageBubble = styled4__default.default.div`
     opacity: 0.9;
   }
 `;
-var MessageContent2 = styled4__default.default.p`
+var MessageContent2 = styled8__default.default.p`
   margin: 0;
   font-size: ${tokens.typography.fontSize.sm};
   line-height: ${tokens.typography.lineHeight.normal};
@@ -3377,13 +3611,13 @@ var MessageContent2 = styled4__default.default.p`
   word-break: break-word;
   white-space: pre-wrap;
 `;
-var MessageTime2 = styled4__default.default.time`
+var MessageTime2 = styled8__default.default.time`
   font-size: ${tokens.typography.fontSize.xs};
   opacity: 0.7;
   margin-top: ${tokens.spacing.xs};
   text-align: right;
 `;
-var ActionButton3 = styled4__default.default.button`
+var ActionButton3 = styled8__default.default.button`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -3407,12 +3641,12 @@ var ActionButton3 = styled4__default.default.button`
     transform: scale(0.98);
   }
 `;
-var ActionsContainer3 = styled4__default.default.div`
+var ActionsContainer3 = styled8__default.default.div`
   display: flex;
   gap: ${tokens.spacing.xs};
   flex-wrap: wrap;
 `;
-var StreamingIndicator2 = styled4__default.default.span`
+var StreamingIndicator2 = styled8__default.default.span`
   display: inline-block;
   width: ${tokens.spacing.xs};
   height: ${tokens.spacing.xs};
@@ -3433,7 +3667,7 @@ var StreamingIndicator2 = styled4__default.default.span`
     }
   }
 `;
-var Avatar3 = styled4__default.default.img`
+var Avatar3 = styled8__default.default.img`
   width: ${tokens.spacing.xl};
   height: ${tokens.spacing.xl};
   border-radius: ${tokens.borderRadius.full};
@@ -3466,7 +3700,7 @@ var UserMessage2 = ({
     avatarUrl && /* @__PURE__ */ jsxRuntime.jsx(Avatar3, { src: avatarUrl, alt: username || "User" })
   ] });
 };
-var ErrorContainer = styled4__default.default.div`
+var ErrorContainer = styled8__default.default.div`
   display: flex;
   align-items: flex-start;
   gap: ${tokens.spacing.sm};
@@ -3480,7 +3714,7 @@ var ErrorContainer = styled4__default.default.div`
   width: ${(props) => props.variant === "banner" ? "100%" : "auto"};
   max-width: ${(props) => props.variant === "banner" ? "100%" : "600px"};
 `;
-var IconContainer = styled4__default.default.div`
+var IconContainer = styled8__default.default.div`
   flex-shrink: 0;
   width: 20px;
   height: 20px;
@@ -3497,29 +3731,29 @@ var ErrorIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
     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`
+var Content2 = styled8__default.default.div`
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
 `;
-var ErrorMessage = styled4__default.default.div`
+var ErrorMessage = styled8__default.default.div`
   font-size: ${tokens.typography.fontSize.sm};
   line-height: ${tokens.typography.lineHeight.normal};
   color: ${tokens.colors.text.primary};
 `;
-var ErrorDetails = styled4__default.default.div`
+var ErrorDetails = styled8__default.default.div`
   font-size: ${tokens.typography.fontSize.xs};
   line-height: 1.4;
   color: ${tokens.colors.text.secondary};
   margin-top: ${tokens.spacing.xs};
 `;
-var Actions2 = styled4__default.default.div`
+var Actions2 = styled8__default.default.div`
   display: flex;
   gap: ${tokens.spacing.sm};
   margin-top: ${tokens.spacing.sm};
 `;
-var Button2 = styled4__default.default.button`
+var Button2 = styled8__default.default.button`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -3548,7 +3782,7 @@ var Button2 = styled4__default.default.button`
     cursor: not-allowed;
   }
 `;
-var CloseButton = styled4__default.default.button`
+var CloseButton = styled8__default.default.button`
   flex-shrink: 0;
   width: 24px;
   height: 24px;
@@ -3607,7 +3841,7 @@ var StreamErrorMessage = ({
   ] });
 };
 StreamErrorMessage.displayName = "StreamErrorMessage";
-var SuggestionsContainer = styled4__default.default.div`
+var SuggestionsContainer = styled8__default.default.div`
   display: flex;
   flex-wrap: nowrap; /* Single row */
   gap: ${tokens.spacing.sm};
@@ -3640,7 +3874,7 @@ var SuggestionsContainer = styled4__default.default.div`
     display: none; /* Chrome/Safari/Opera */
   }
 `;
-var StyledSuggestion = styled4__default.default.button`
+var StyledSuggestion = styled8__default.default.button`
   /* Base styles */
   display: inline-flex;
   align-items: center;
@@ -3673,7 +3907,7 @@ var StyledSuggestion = styled4__default.default.button`
     box-shadow: none;
   }
 
-  ${({ $isPressed }) => $isPressed && styled4.css`
+  ${({ $isPressed }) => $isPressed && styled8.css`
       transform: scale(0.98);
     `}