@agentiffai/design 1.3.5 → 1.3.7

package/dist/copilotkit/index.cjs

@@ -2,14 +2,14 @@
 
 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 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 +170,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 +190,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 +209,7 @@ var variantStyles = {
       outline-offset: 2px;
     }
   `,
-  icon: styled4.css`
+  icon: styled8.css`
     background-color: transparent;
     color: ${tokens.colors.text.primary};
     border: none;
@@ -232,26 +232,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 +272,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 +334,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 +368,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 +378,7 @@ var dotPulse = styled4.keyframes`
     transform: scale(1);
   }
 `;
-var fadeIn = styled4.keyframes`
+var fadeIn = styled8.keyframes`
   from {
     opacity: 0;
   }
@@ -386,7 +386,7 @@ var fadeIn = styled4.keyframes`
     opacity: 1;
   }
 `;
-var blink = styled4.keyframes`
+var blink = styled8.keyframes`
   0%, 49% {
     opacity: 1;
   }
@@ -394,7 +394,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 +406,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 +420,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 +433,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 +491,7 @@ var Response = ({
   }
   return null;
 };
-var dotPulse2 = styled4.keyframes`
+var dotPulse2 = styled8.keyframes`
   0%, 100% {
     opacity: 0.3;
     transform: scale(0.8);
@@ -501,7 +501,7 @@ var dotPulse2 = styled4.keyframes`
     transform: scale(1);
   }
 `;
-var shake = styled4.keyframes`
+var shake = styled8.keyframes`
   0%, 100% {
     transform: translateX(0);
   }
@@ -512,7 +512,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 +526,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 +562,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 +570,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 +599,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 +653,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 +663,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 +673,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 +710,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 +722,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 +733,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 +767,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,8 +827,8 @@ function AssistantThinking({
   );
 }
 AssistantThinking.displayName = "AssistantThinking";
-var Container3 = styled4__default.default.div`
-  font-family: ${(props) => props.variant === "code" ? tokens.typography.fontFamily.monospace : tokens.typography.fontFamily.primary};
+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;
   line-height: ${tokens.typography.lineHeight.normal};
@@ -836,7 +836,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 +860,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 +877,48 @@ var StreamingTextBase = ({
       completionCalledRef.current = false;
     }
     wasStreamingRef.current = isStreaming;
-  }, [content, isStreaming, onStreamComplete]);
+  }, [isStreaming, onStreamComplete]);
   const showCursor = isStreaming && cursor;
-  return /* @__PURE__ */ jsxRuntime.jsxs(Container3, { variant, className, children: [
-    displayedText,
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container3, { $variant: variant, className, children: [
+    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 +927,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 +950,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 +967,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 +976,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 +1012,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 +1022,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 +1039,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 +1049,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 +1105,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 +1135,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 +1211,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 +1224,7 @@ 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 GenerativeUIContainer = styled8__default.default.div`
   margin-top: ${tokens.spacing.sm};
   margin-bottom: ${tokens.spacing.sm};
 `;
@@ -1266,7 +1273,53 @@ 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);
+}
+var ChatInputContainer = styled8__default.default.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -1282,7 +1335,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 +1344,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 +1383,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 +1401,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 +1426,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;
@@ -1452,7 +1505,6 @@ var ChatInput = ({
       if (inputRef.current) {
         inputRef.current.style.height = "auto";
       }
-      inputRef.current?.focus();
     }
   };
   const handleSuggestionClick = (suggestionText) => {
@@ -1558,7 +1610,7 @@ ChatInput.displayName = "ChatInput";
 var InputAdapter = ({
   inProgress,
   onSend,
-  isVisible = true
+  isVisible: _isVisible = true
 }) => {
   const [value, setValue] = react.useState("");
   const [isSubmitting, setIsSubmitting] = react.useState(false);
@@ -1602,7 +1654,7 @@ var InputAdapter = ({
       onSubmit: handleSubmit,
       placeholder: "Ask, write or search for anything...",
       isDisabled: shouldDisableInput,
-      autoFocus: isVisible,
+      autoFocus: false,
       "aria-label": "Chat message input",
       suggestions: [{ text: "Explore workflows" }],
       onSuggestionSelect: handleSuggestionSelect
@@ -1610,7 +1662,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;
@@ -1625,6 +1677,7 @@ var StyledUserMessage = styled4__default.default.button`
   user-select: none;
   white-space: pre-wrap;
   word-wrap: break-word;
+  word-break: break-word;
   position: relative;
   text-align: left;
 
@@ -1679,7 +1732,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 +1798,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 +1818,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 +1828,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 +1844,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 +1905,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 +1932,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 +2009,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 +2025,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 +2043,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 +2053,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 +2176,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 +2188,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 +2205,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 +2224,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 +2236,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 +2255,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 +2298,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 +2406,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 +2458,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 +2514,7 @@ var CustomCopilotSidebar = ({
         UserMessage: UserMessageAdapter,
         Input: InputAdapter,
         Header: HeaderAdapter,
-        Window: WindowAdapter,
+        Window: WindowAdapter2,
         Messages: MessagesAdapter,
         Button: CustomButton,
         instructions,
@@ -2487,12 +2536,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 +2570,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 +2618,115 @@ 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;
+    }
+  }
+
+  /* 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;
+    }
+
+    /* Shrink the sidebar container to only cover the right portion where dialog lives */
+    /* Also stretch to full height (remove default 8px padding) */
+    .copilotKitSidebar {
+      top: 0 !important;
+      bottom: 0 !important;
+      left: 58vw !important;
+      width: min(50vw, 22rem) !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, 20rem) !important;
+      max-width: min(50vw, 20rem) !important;
+      left: auto !important;
+      right: 1.5rem !important;
+      /* Use top/bottom ONLY - let browser calculate height (more reliable than explicit height) */
+      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;
+      /* Remove margins */
+      margin: 0 !important;
+      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 */
+    .copilotKitSidebar [role="dialog"] header,
+    .copilotKitSidebar [role="dialog"] [data-testid="chat-header"],
+    .copilotKitSidebar [role="dialog"] > div:first-child {
+      padding: 0.25rem 0.5rem !important;
+      min-height: auto !important;
+      height: 1.5rem;
+      padding-right: 1.5rem !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 to preserve space in landscape */
+    .copilotKitMessages {
+      padding: ${tokens.spacing.xs} ${tokens.spacing.sm} !important;
+    }
+
+    .copilotKitMessage {
+      padding: ${tokens.spacing.xs} 0 !important;
+      margin: ${tokens.spacing.xs} 0 !important;
+    }
+
+    /* Compact input area in landscape */
+    .copilotKitInput,
+    .copilotKitSidebar [role="dialog"] > div:last-child {
+      padding: ${tokens.spacing.xs} ${tokens.spacing.sm} !important;
+    }
+
+    /* Reduce gap between messages */
+    .copilotKitMessages > div {
+      gap: 0.25rem !important;
+      padding-bottom: 0;
+      margin-bottom: -3rem;
+    }
+
+    /* 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;
+    }
+
+    /* Compact parent of suggestions (input area) */
+    .copilotKitSidebar [role="dialog"] > div:last-child {
+      padding: 1px !important;
     }
   }
 
@@ -2669,10 +2816,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};
@@ -2703,17 +2850,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 = () => {
@@ -2722,9 +2863,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 = () => {
@@ -2761,16 +2903,44 @@ 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
+}) {
+  const HeaderAdapterWithClose = react.useMemo(
+    () => createHeaderAdapter(onSetOpen),
+    [onSetOpen]
+  );
+  const CustomButton = react.useMemo(
+    () => createButtonAdapter(disabled, disabledReason, onSetOpen),
+    [disabled, disabledReason, onSetOpen]
+  );
+  const AssistantMessageAdapterMemo = react.useMemo(
+    () => ThinkingIndicator || ToolCallsComponent ? createAssistantMessageAdapter(ThinkingIndicator, ToolCallsComponent) : AssistantMessageAdapter,
+    [ThinkingIndicator, ToolCallsComponent]
+  );
   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,
@@ -2791,7 +2961,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;
@@ -2800,7 +2970,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;
@@ -2813,13 +2983,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};
@@ -2829,7 +2999,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};
@@ -2877,13 +3047,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};
@@ -2903,7 +3073,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`};
@@ -2949,7 +3119,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;
@@ -3079,7 +3249,7 @@ var Input = ({
     )
   ] }) });
 };
-var MessagesListContainer = styled4__default.default.div`
+var MessagesListContainer = styled8__default.default.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -3119,7 +3289,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};
@@ -3235,19 +3405,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 */
@@ -3270,7 +3440,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};
@@ -3279,13 +3449,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};
@@ -3309,12 +3479,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};
@@ -3335,7 +3505,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};
@@ -3368,7 +3538,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};
@@ -3382,7 +3552,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;
@@ -3399,29 +3569,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};
@@ -3450,7 +3620,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;
@@ -3509,7 +3679,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};
@@ -3542,7 +3712,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;
@@ -3575,7 +3745,7 @@ var StyledSuggestion = styled4__default.default.button`
     box-shadow: none;
   }
 
-  ${({ $isPressed }) => $isPressed && styled4.css`
+  ${({ $isPressed }) => $isPressed && styled8.css`
       transform: scale(0.98);
     `}