@agentiffai/design 1.3.6 → 1.3.7

package/dist/copilotkit/index.js

@@ -1,6 +1,6 @@
 import { useButton } from '@react-aria/button';
-import { memo, useState, useRef, useEffect, useCallback } from 'react';
-import styled4, { css, keyframes, createGlobalStyle } from 'styled-components';
+import { memo, useRef, useEffect, useState, useMemo, useCallback } from 'react';
+import styled8, { css, keyframes, createGlobalStyle } from 'styled-components';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { CopilotSidebar, useChatContext } from '@copilotkit/react-ui';
 import { useTextField } from '@react-aria/textfield';
@@ -245,7 +245,7 @@ var sizeStyles = {
     height: 44px;
   `
 };
-var StyledButton = styled4.button`
+var StyledButton = styled8.button`
   /* Base styles */
   display: inline-flex;
   align-items: center;
@@ -328,7 +328,7 @@ function Button({
   );
 }
 Button.displayName = "Button";
-var ActionsContainer = styled4.div`
+var ActionsContainer = styled8.div`
   display: flex;
   gap: ${tokens.spacing.sm};
   align-items: center;
@@ -388,7 +388,7 @@ var blink = keyframes`
     opacity: 0;
   }
 `;
-var ResponseContainer = styled4.div`
+var ResponseContainer = styled8.div`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
@@ -400,13 +400,13 @@ var ResponseContainer = styled4.div`
   max-width: fit-content;
   margin: 0 auto;
 `;
-var LoadingDots = styled4.div`
+var LoadingDots = styled8.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
   padding: 0 ${tokens.spacing.xs};
 `;
-var Dot = styled4.span`
+var Dot = styled8.span`
   width: ${tokens.spacing.xs};
   height: ${tokens.spacing.xs};
   border-radius: ${tokens.borderRadius.full};
@@ -414,7 +414,7 @@ var Dot = styled4.span`
   animation: ${dotPulse} 1.4s ease-in-out infinite;
   animation-delay: ${(props) => props.delay}s;
 `;
-var TypingIndicator = styled4.div`
+var TypingIndicator = styled8.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -427,14 +427,14 @@ var TypingIndicator = styled4.div`
     animation: ${dotPulse} 1.4s ease-in-out infinite;
   }
 `;
-var Message = styled4.span`
+var Message = styled8.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.div`
+var StreamingText = styled8.div`
   font-size: ${tokens.typography.fontSize.sm};
   line-height: ${tokens.typography.lineHeight.normal};
   color: ${tokens.colors.text.primary};
@@ -506,7 +506,7 @@ var shake = keyframes`
     transform: translateX(5px);
   }
 `;
-var AgentStateContainer = styled4.div`
+var AgentStateContainer = styled8.div`
   display: inline-flex;
   flex-direction: column;
   align-items: center;
@@ -520,35 +520,35 @@ var AgentStateContainer = styled4.div`
   max-width: fit-content;
   margin: 0 auto;
 `;
-var StateContent = styled4.div`
+var StateContent = styled8.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
   align-items: center;
   width: 100%;
 `;
-var IdleIndicator = styled4.div`
+var IdleIndicator = styled8.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.div`
+var ErrorIndicator = styled8.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.span`
+var StateLabel = styled8.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.p`
+styled8.p`
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.tertiary};
   line-height: ${tokens.typography.lineHeight.normal};
@@ -556,7 +556,7 @@ styled4.p`
   text-align: center;
   white-space: nowrap;
 `;
-var ProgressBar = styled4.div`
+var ProgressBar = styled8.div`
   width: 100%;
   height: ${tokens.spacing.xs};
   background-color: ${tokens.colors.surface.elevated};
@@ -564,7 +564,7 @@ var ProgressBar = styled4.div`
   overflow: hidden;
   margin-top: ${tokens.spacing.xs};
 `;
-var ProgressBarFill = styled4.div`
+var ProgressBarFill = styled8.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%);
@@ -593,11 +593,11 @@ var AgentState = ({ state, message, progress, className }) => {
   }
   return null;
 };
-var Container = styled4.div`
+var Container = styled8.div`
   margin: ${tokens.spacing.sm} 0;
   padding: 0 ${tokens.spacing.sm};
 `;
-var ToolName = styled4.div`
+var ToolName = styled8.div`
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.text.tertiary};
   margin-bottom: ${tokens.spacing.xs};
@@ -704,7 +704,7 @@ var getSizeValue = (size = "md") => {
       };
   }
 };
-var Container2 = styled4.div`
+var Container2 = styled8.div`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.md};
@@ -716,7 +716,7 @@ var Container2 = styled4.div`
   max-width: fit-content;
   margin: 0 auto;
 `;
-var Avatar = styled4.div`
+var Avatar = styled8.div`
   width: ${(props) => getSizeValue(props.size).avatar};
   height: ${(props) => getSizeValue(props.size).avatar};
   border-radius: ${tokens.borderRadius.full};
@@ -727,23 +727,23 @@ var Avatar = styled4.div`
   flex-shrink: 0;
   box-shadow: ${tokens.shadows.glow.primary};
 `;
-var HeadphonesIcon = styled4.svg`
+var HeadphonesIcon = styled8.svg`
   width: ${(props) => getSizeValue(props.size).icon};
   height: ${(props) => getSizeValue(props.size).icon};
   color: ${tokens.colors.text.primary};
 `;
-var Content = styled4.div`
+var Content = styled8.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
 `;
-var LoadingDots2 = styled4.div`
+var LoadingDots2 = styled8.div`
   display: flex;
   align-items: center;
   gap: ${(props) => props.variant === "wave" ? "2px" : `${tokens.spacing.xs}`};
   padding: 0 ${tokens.spacing.xs};
 `;
-var Dot2 = styled4.span`
+var Dot2 = styled8.span`
   width: ${(props) => getSizeValue(props.size).dotSize};
   height: ${(props) => getSizeValue(props.size).dotSize};
   border-radius: ${tokens.borderRadius.full};
@@ -761,7 +761,7 @@ var Dot2 = styled4.span`
 }}
     1.4s ease-in-out infinite;
 `;
-var Message2 = styled4.span`
+var Message2 = styled8.span`
   font-size: ${(props) => getSizeValue(props.size).fontSize};
   color: ${tokens.colors.text.secondary};
   font-weight: ${tokens.typography.fontWeight.regular};
@@ -821,7 +821,7 @@ function AssistantThinking({
   );
 }
 AssistantThinking.displayName = "AssistantThinking";
-var Container3 = styled4.div`
+var Container3 = styled8.div`
   font-family: ${(props) => props.$variant === "code" ? tokens.typography.fontFamily.monospace : tokens.typography.fontFamily.primary};
   white-space: pre-wrap;
   word-break: break-word;
@@ -830,7 +830,7 @@ var Container3 = styled4.div`
   text-rendering: optimizeSpeed;
   contain: content;
 `;
-var Cursor = styled4.span`
+var Cursor = styled8.span`
   display: inline-block;
   width: 2px;
   height: 1em;
@@ -854,17 +854,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] = useState(content);
   const wasStreamingRef = useRef(isStreaming);
   const completionCalledRef = useRef(false);
   useEffect(() => {
-    setDisplayedText(content);
     if (wasStreamingRef.current && !isStreaming && !completionCalledRef.current) {
       completionCalledRef.current = true;
       onStreamComplete?.();
@@ -873,45 +871,48 @@ var StreamingTextBase = ({
       completionCalledRef.current = false;
     }
     wasStreamingRef.current = isStreaming;
-  }, [content, isStreaming, onStreamComplete]);
+  }, [isStreaming, onStreamComplete]);
   const showCursor = isStreaming && cursor;
   return /* @__PURE__ */ jsxs(Container3, { $variant: variant, className, children: [
-    displayedText,
+    content,
     showCursor && /* @__PURE__ */ jsx(Cursor, {})
   ] });
 };
 var StreamingText2 = memo(StreamingTextBase);
 StreamingText2.displayName = "StreamingText";
-var MessageContainer = styled4.div`
+var MessageContainer = styled8.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.div`
+var AvatarContainer = styled8.div`
+  display: flex;
+  align-items: center;
+  gap: ${tokens.spacing.xs};
   flex-shrink: 0;
 `;
-var Avatar2 = styled4.img`
-  width: ${tokens.spacing.xl};
-  height: ${tokens.spacing.xl};
+var Avatar2 = styled8.img`
+  width: 20px;
+  height: 20px;
   border-radius: ${tokens.borderRadius.full};
   object-fit: cover;
   background-color: transparent;
 `;
-var AvatarInitials = styled4.div`
-  width: ${tokens.spacing.xl};
-  height: ${tokens.spacing.xl};
+var AvatarInitials = styled8.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 {
@@ -920,16 +921,20 @@ var AvatarInitials = styled4.div`
     object-fit: contain;
   }
 `;
-var ContentContainer = styled4.div`
-  flex: 1;
+var AvatarLabel = styled8.span`
+  font-size: ${tokens.typography.fontSize.xs};
+  font-weight: ${tokens.typography.fontWeight.medium};
+  color: ${tokens.colors.text.secondary};
+`;
+var ContentContainer = styled8.div`
+  width: 100%;
   min-width: 0;
 `;
-var MessageContent = styled4.div`
+var MessageContent = styled8.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};
@@ -939,14 +944,13 @@ var MessageContent = styled4.div`
   /* Optimize text rendering */
   text-rendering: optimizeSpeed;
 `;
-var LoadingDots3 = styled4.div`
+var LoadingDots3 = styled8.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 = keyframes`
@@ -957,7 +961,7 @@ var pulse2 = keyframes`
     opacity: 1;
   }
 `;
-var LoadingDot = styled4.div`
+var LoadingDot = styled8.div`
   width: ${tokens.spacing.sm};
   height: ${tokens.spacing.sm};
   border-radius: ${tokens.borderRadius.full};
@@ -966,7 +970,7 @@ var LoadingDot = styled4.div`
   animation: ${pulse2} 1.4s ease-in-out infinite;
   animation-delay: ${(props) => props.delay}s;
 `;
-var FileAttachmentContainer = styled4.div`
+var FileAttachmentContainer = styled8.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
@@ -1002,7 +1006,7 @@ var FileAttachmentContainer = styled4.div`
     }
   `}
 `;
-var FileIconContainer = styled4.div`
+var FileIconContainer = styled8.div`
   flex-shrink: 0;
   width: ${tokens.spacing.xl};
   height: ${tokens.spacing.xl};
@@ -1012,14 +1016,14 @@ var FileIconContainer = styled4.div`
   font-size: ${tokens.typography.fontSize["2xl"]};
   line-height: 1;
 `;
-var FileInfo = styled4.div`
+var FileInfo = styled8.div`
   flex: 1;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 2px;
 `;
-var FileTitle = styled4.div`
+var FileTitle = styled8.div`
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.medium};
   color: ${tokens.colors.text.primary};
@@ -1029,7 +1033,7 @@ var FileTitle = styled4.div`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var FileMetadata = styled4.div`
+var FileMetadata = styled8.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -1039,7 +1043,7 @@ var FileMetadata = styled4.div`
   line-height: ${tokens.typography.lineHeight.tight};
   overflow: hidden;
 `;
-var FileSubtitle = styled4.span`
+var FileSubtitle = styled8.span`
   color: ${tokens.colors.text.tertiary};
   white-space: nowrap;
   overflow: hidden;
@@ -1095,13 +1099,13 @@ var FileAttachment = ({
     }
   );
 };
-var AttachmentsContainer = styled4.div`
+var AttachmentsContainer = styled8.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
   margin-top: ${tokens.spacing.sm};
 `;
-var ActionButton = styled4.button`
+var ActionButton = styled8.button`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -1125,19 +1129,19 @@ var ActionButton = styled4.button`
     transform: scale(0.98);
   }
 `;
-var ActionsContainer2 = styled4.div`
+var ActionsContainer2 = styled8.div`
   display: flex;
   gap: ${tokens.spacing.xs};
   flex-wrap: wrap;
   margin-top: ${tokens.spacing.sm};
 `;
-var MessageTime = styled4.time`
+var MessageTime = styled8.time`
   font-size: ${tokens.typography.fontSize.xs};
   color: ${tokens.colors.text.tertiary};
   margin-top: ${tokens.spacing.xs};
   display: block;
 `;
-var StreamingIndicator = styled4.span`
+var StreamingIndicator = styled8.span`
   display: inline-block;
   width: ${tokens.spacing.xs};
   height: ${tokens.spacing.xs};
@@ -1201,7 +1205,10 @@ var AssistantMessageBase = ({
     ] });
   };
   return /* @__PURE__ */ jsxs(MessageContainer, { className, children: [
-    /* @__PURE__ */ jsx(AvatarContainer, { children: avatarUrl ? /* @__PURE__ */ jsx(Avatar2, { src: avatarUrl, alt: "Assistant avatar" }) : /* @__PURE__ */ jsx(AvatarInitials, { children: /* @__PURE__ */ jsx(Avatar2, { src: "/assets/avatar-transparent-bg.png", alt: "AI Assistant" }) }) }),
+    /* @__PURE__ */ jsxs(AvatarContainer, { children: [
+      avatarUrl ? /* @__PURE__ */ jsx(Avatar2, { src: avatarUrl, alt: "Assistant avatar" }) : /* @__PURE__ */ jsx(AvatarInitials, { children: /* @__PURE__ */ jsx(Avatar2, { src: "/assets/avatar-transparent-bg.png", alt: "AI Assistant" }) }),
+      /* @__PURE__ */ jsx(AvatarLabel, { children: "Assistant" })
+    ] }),
     /* @__PURE__ */ jsx(ContentContainer, { children: renderContent() })
   ] });
 };
@@ -1211,7 +1218,7 @@ var TOOL_CALL_MARKER_REGEX = /<!--TOOL_CALL:([^:]+):(.+?)-->/g;
 function stripToolCallMarkers(content) {
   return content.replace(TOOL_CALL_MARKER_REGEX, "").trim();
 }
-var GenerativeUIContainer = styled4.div`
+var GenerativeUIContainer = styled8.div`
   margin-top: ${tokens.spacing.sm};
   margin-bottom: ${tokens.spacing.sm};
 `;
@@ -1260,7 +1267,53 @@ var AssistantMessageAdapterBase = ({
 };
 var AssistantMessageAdapter = memo(AssistantMessageAdapterBase);
 AssistantMessageAdapter.displayName = "AssistantMessageAdapter";
-var ChatInputContainer = styled4.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__ */ jsxs(Fragment, { children: [
+        ThinkingIndicator ? /* @__PURE__ */ jsx(ThinkingIndicator, { isLoading, isGenerating }) : /* @__PURE__ */ jsx(AssistantThinking, { message: "Thinking..." }),
+        shouldShowToolCalls && /* @__PURE__ */ jsx(ToolCallsComponent, {})
+      ] });
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      shouldShowToolCalls && /* @__PURE__ */ jsx(ToolCallsComponent, {}),
+      generativeUIOutput && /* @__PURE__ */ jsx(GenerativeUIContainer, { children: generativeUIOutput }),
+      content && /* @__PURE__ */ jsx(
+        AssistantMessage,
+        {
+          content,
+          avatarInitials: "AI",
+          isLoading: false,
+          isStreaming: isGenerating,
+          attachments,
+          enableMarkdown: true
+        }
+      )
+    ] });
+  };
+  CustomAssistantMessageAdapter.displayName = "CustomAssistantMessageAdapter";
+  return memo(CustomAssistantMessageAdapter);
+}
+var ChatInputContainer = styled8.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -1276,7 +1329,7 @@ var ChatInputContainer = styled4.div`
     padding: ${tokens.spacing.md};
   }
 `;
-var SuggestionsWrapper = styled4.div`
+var SuggestionsWrapper = styled8.div`
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -1285,7 +1338,7 @@ var SuggestionsWrapper = styled4.div`
   width: 100%;
   box-sizing: border-box;
 `;
-var SuggestionButton = styled4.button`
+var SuggestionButton = styled8.button`
   padding: ${tokens.spacing.sm} ${tokens.spacing.md};
   font-family: ${tokens.typography.fontFamily.primary};
   font-size: 13px;
@@ -1324,7 +1377,7 @@ var SuggestionButton = styled4.button`
     opacity: 0.4;
   }
 `;
-var InputWrapper = styled4.div`
+var InputWrapper = styled8.div`
   display: flex;
   align-items: flex-end; /* Align button to bottom when textarea expands */
   gap: ${tokens.spacing.sm};
@@ -1342,7 +1395,7 @@ var InputWrapper = styled4.div`
     background-color: rgba(50, 50, 52, 0.6);
   }
 `;
-var InputField = styled4.textarea`
+var InputField = styled8.textarea`
   flex: 1;
   border: none;
   outline: none;
@@ -1367,7 +1420,7 @@ var InputField = styled4.textarea`
     cursor: not-allowed;
   }
 `;
-var SubmitButton = styled4.button`
+var SubmitButton = styled8.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1603,7 +1656,7 @@ var InputAdapter = ({
   );
 };
 InputAdapter.displayName = "InputAdapter";
-var StyledUserMessage = styled4.button`
+var StyledUserMessage = styled8.button`
   /* Base styles */
   display: inline-flex;
   align-items: center;
@@ -1739,7 +1792,7 @@ function UserMessageBase({
 }
 var UserMessage = memo(UserMessageBase);
 UserMessage.displayName = "UserMessage";
-var UserMessageWrapper = styled4.div`
+var UserMessageWrapper = styled8.div`
   display: flex;
   justify-content: flex-end;
   width: 100%;
@@ -1769,7 +1822,7 @@ var pulse3 = keyframes`
     transform: scale(1.1);
   }
 `;
-var Container4 = styled4.div`
+var Container4 = styled8.div`
   display: inline-flex;
   align-items: center;
   gap: ${(props) => {
@@ -1785,7 +1838,7 @@ var Container4 = styled4.div`
 }};
   font-family: ${tokens.typography.fontFamily.primary};
 `;
-var StatusDot = styled4.div`
+var StatusDot = styled8.div`
   width: ${(props) => {
   if (props.variant === "badge") {
     switch (props.size) {
@@ -1846,7 +1899,7 @@ var StatusDot = styled4.div`
   animation: ${(props) => props.status === "streaming" ? pulse3 : "none"} 2s ease-in-out infinite;
   flex-shrink: 0;
 `;
-var Label = styled4.span`
+var Label = styled8.span`
   font-size: ${(props) => {
   if (props.variant === "badge") {
     switch (props.size) {
@@ -1873,7 +1926,7 @@ var Label = styled4.span`
   color: ${tokens.colors.text.secondary};
   line-height: ${tokens.typography.lineHeight.tight};
 `;
-var BadgeContainer = styled4.div`
+var BadgeContainer = styled8.div`
   display: inline-flex;
   align-items: center;
   gap: ${(props) => {
@@ -1950,7 +2003,7 @@ var StreamStatusIndicator = ({
   return /* @__PURE__ */ jsx(Container4, { size, className, role: "status", "aria-label": getStatusLabel(status), children: content });
 };
 StreamStatusIndicator.displayName = "StreamStatusIndicator";
-var HeaderContainer = styled4.header`
+var HeaderContainer = styled8.header`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1966,14 +2019,14 @@ var HeaderContainer = styled4.header`
     padding: ${tokens.spacing.sm} ${tokens.spacing.md};
   }
 `;
-var HeaderContent = styled4.div`
+var HeaderContent = styled8.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.xs};
   flex: 1;
   min-width: 0;
 `;
-var HeaderTitle = styled4.h1`
+var HeaderTitle = styled8.h1`
   margin: 0;
   font-size: ${tokens.typography.fontSize.base};
   font-weight: ${tokens.typography.fontWeight.semibold};
@@ -1984,7 +2037,7 @@ var HeaderTitle = styled4.h1`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var HeaderSubtitle = styled4.p`
+var HeaderSubtitle = styled8.p`
   margin: 0;
   font-size: ${tokens.typography.fontSize.sm};
   color: ${tokens.colors.text.secondary};
@@ -1994,13 +2047,13 @@ var HeaderSubtitle = styled4.p`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var HeaderActions = styled4.div`
+var HeaderActions = styled8.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
   margin-left: ${tokens.spacing.md};
 `;
-var ActionButton2 = styled4.button`
+var ActionButton2 = styled8.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -2117,7 +2170,7 @@ var Header = ({
   ] });
 };
 Header.displayName = "Header";
-var MessagesContainer = styled4.div`
+var MessagesContainer = styled8.div`
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -2129,18 +2182,14 @@ var MessagesContainer = styled4.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,
@@ -2150,7 +2199,7 @@ var Messages = ({
   return /* @__PURE__ */ jsx(MessagesContainer, { className, role: "region", "aria-label": ariaLabel, children });
 };
 Messages.displayName = "Messages";
-var WindowContainer = styled4.div`
+var WindowContainer = styled8.div`
   display: flex;
   flex-direction: column;
   /* Glassmorphism effect */
@@ -2351,7 +2400,7 @@ var GlobalSidebarStyles = createGlobalStyle`
     }
   }
 `;
-var StyledChatButton = styled4.button`
+var StyledChatButton = styled8.button`
   position: fixed;
   bottom: 8px;
   right: 8px;
@@ -2403,7 +2452,7 @@ var CustomCopilotSidebar = ({
     };
     return /* @__PURE__ */ jsx(Header, { title: "AI Assistant", subtitle: "How can I help you today?", onClose: handleClose });
   };
-  const WindowAdapter = (props) => {
+  const WindowAdapter2 = (props) => {
     return /* @__PURE__ */ jsx(Window, { children: props.children });
   };
   const MessagesAdapter = (props) => {
@@ -2459,7 +2508,7 @@ var CustomCopilotSidebar = ({
         UserMessage: UserMessageAdapter,
         Input: InputAdapter,
         Header: HeaderAdapter,
-        Window: WindowAdapter,
+        Window: WindowAdapter2,
         Messages: MessagesAdapter,
         Button: CustomButton,
         instructions,
@@ -2485,8 +2534,8 @@ var GlobalSidebarStyles2 = 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;
     }
   }
 
@@ -2515,18 +2564,18 @@ var GlobalSidebarStyles2 = 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;
 
@@ -2563,17 +2612,17 @@ var GlobalSidebarStyles2 = 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;
     }
   }
 
@@ -2606,8 +2655,8 @@ var GlobalSidebarStyles2 = 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;
@@ -2761,10 +2810,10 @@ var GlobalSidebarStyles2 = createGlobalStyle`
     box-shadow: none !important;
   }
 `;
-var StyledChatButton2 = styled4.button`
+var StyledChatButton2 = styled8.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};
@@ -2795,17 +2844,11 @@ var StyledChatButton2 = styled4.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__ */ jsx(Window, { children: props.children });
+};
+WindowAdapter.displayName = "WindowAdapter";
+function createHeaderAdapter(onSetOpen) {
   const HeaderAdapterWithClose = (_props) => {
     const { setOpen } = useChatContext();
     const handleClose = () => {
@@ -2814,9 +2857,10 @@ function CustomCopilotSidebar2({
     };
     return /* @__PURE__ */ jsx(Header, { title: "AI Assistant", onClose: handleClose });
   };
-  const WindowAdapterLocal = (props) => {
-    return /* @__PURE__ */ jsx(Window, { children: props.children });
-  };
+  HeaderAdapterWithClose.displayName = "HeaderAdapterWithClose";
+  return HeaderAdapterWithClose;
+}
+function createButtonAdapter(disabled, disabledReason, onSetOpen) {
   const CustomButton = (_props) => {
     const { open, setOpen } = useChatContext();
     const handleClick = () => {
@@ -2853,16 +2897,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 = useMemo(
+    () => createHeaderAdapter(onSetOpen),
+    [onSetOpen]
+  );
+  const CustomButton = useMemo(
+    () => createButtonAdapter(disabled, disabledReason, onSetOpen),
+    [disabled, disabledReason, onSetOpen]
+  );
+  const AssistantMessageAdapterMemo = useMemo(
+    () => ThinkingIndicator || ToolCallsComponent ? createAssistantMessageAdapter(ThinkingIndicator, ToolCallsComponent) : AssistantMessageAdapter,
+    [ThinkingIndicator, ToolCallsComponent]
+  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(GlobalSidebarStyles2, {}),
     /* @__PURE__ */ jsx(
       CopilotSidebar,
       {
-        AssistantMessage: AssistantMessageAdapter,
+        AssistantMessage: AssistantMessageAdapterMemo,
         UserMessage: UserMessageAdapter,
         Input: InputAdapter,
         Header: HeaderAdapterWithClose,
-        Window: WindowAdapterLocal,
+        Window: WindowAdapter,
         Button: CustomButton,
         RenderActionExecutionMessage: ActionExecutionAdapter,
         instructions,
@@ -2883,7 +2955,7 @@ function CustomCopilotSidebar2({
   ] });
 }
 CustomCopilotSidebar2.displayName = "CustomCopilotSidebar";
-var FooterContainer = styled4.footer`
+var FooterContainer = styled8.footer`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2892,7 +2964,7 @@ var FooterContainer = styled4.footer`
   border-top: 1px solid ${tokens.colors.border.default};
   min-height: 44px;
 `;
-var FooterContent = styled4.div`
+var FooterContent = styled8.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -2905,13 +2977,13 @@ var FooterContent = styled4.div`
   font-family: ${tokens.typography.fontFamily.primary};
   line-height: ${tokens.typography.lineHeight.tight};
 `;
-var FooterBranding = styled4.div`
+var FooterBranding = styled8.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
   flex-shrink: 0;
 `;
-var FooterStatus = styled4.div`
+var FooterStatus = styled8.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -2921,7 +2993,7 @@ var FooterStatus = styled4.div`
   font-size: ${tokens.typography.fontSize.xs};
   opacity: 0.8;
 `;
-var FooterLink = styled4.a`
+var FooterLink = styled8.a`
   color: ${tokens.colors.primary};
   text-decoration: none;
   transition: opacity ${tokens.transitions.fast};
@@ -2969,13 +3041,13 @@ var Footer = ({
   ] }) });
 };
 Footer.displayName = "Footer";
-var InputContainer = styled4.div`
+var InputContainer = styled8.div`
 	display: flex;
 	flex-direction: column;
 	width: 100%;
 	position: relative;
 `;
-var InputWrapper2 = styled4.div`
+var InputWrapper2 = styled8.div`
 	display: flex;
 	align-items: flex-end;
 	gap: ${tokens.spacing.sm};
@@ -2995,7 +3067,7 @@ var InputWrapper2 = styled4.div`
 		border-color: ${tokens.colors.border.subtle};
 	}
 `;
-var TextArea = styled4.textarea`
+var TextArea = styled8.textarea`
 	flex: 1;
 	min-height: ${tokens.spacing.lg};
 	max-height: ${(props) => `${(props.$maxRows || 5) * 24}px`};
@@ -3041,7 +3113,7 @@ var TextArea = styled4.textarea`
 		background: ${tokens.colors.scrollbar.thumbHover};
 	}
 `;
-var SendButton = styled4.button`
+var SendButton = styled8.button`
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -3171,7 +3243,7 @@ var Input = ({
     )
   ] }) });
 };
-var MessagesListContainer = styled4.div`
+var MessagesListContainer = styled8.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -3211,7 +3283,7 @@ var MessagesListContainer = styled4.div`
   /* Ensure proper rendering on mobile */
   -webkit-overflow-scrolling: touch;
 `;
-var MessagesListContent = styled4.div`
+var MessagesListContent = styled8.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
@@ -3327,19 +3399,19 @@ var MessagesList = ({
     }
   );
 };
-var StyledUserMessage2 = styled4.div`
+var StyledUserMessage2 = styled8.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.div`
+var MessageBubble = styled8.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 */
@@ -3362,7 +3434,7 @@ var MessageBubble = styled4.div`
     opacity: 0.9;
   }
 `;
-var MessageContent2 = styled4.p`
+var MessageContent2 = styled8.p`
   margin: 0;
   font-size: ${tokens.typography.fontSize.sm};
   line-height: ${tokens.typography.lineHeight.normal};
@@ -3371,13 +3443,13 @@ var MessageContent2 = styled4.p`
   word-break: break-word;
   white-space: pre-wrap;
 `;
-var MessageTime2 = styled4.time`
+var MessageTime2 = styled8.time`
   font-size: ${tokens.typography.fontSize.xs};
   opacity: 0.7;
   margin-top: ${tokens.spacing.xs};
   text-align: right;
 `;
-var ActionButton3 = styled4.button`
+var ActionButton3 = styled8.button`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -3401,12 +3473,12 @@ var ActionButton3 = styled4.button`
     transform: scale(0.98);
   }
 `;
-var ActionsContainer3 = styled4.div`
+var ActionsContainer3 = styled8.div`
   display: flex;
   gap: ${tokens.spacing.xs};
   flex-wrap: wrap;
 `;
-var StreamingIndicator2 = styled4.span`
+var StreamingIndicator2 = styled8.span`
   display: inline-block;
   width: ${tokens.spacing.xs};
   height: ${tokens.spacing.xs};
@@ -3427,7 +3499,7 @@ var StreamingIndicator2 = styled4.span`
     }
   }
 `;
-var Avatar3 = styled4.img`
+var Avatar3 = styled8.img`
   width: ${tokens.spacing.xl};
   height: ${tokens.spacing.xl};
   border-radius: ${tokens.borderRadius.full};
@@ -3460,7 +3532,7 @@ var UserMessage2 = ({
     avatarUrl && /* @__PURE__ */ jsx(Avatar3, { src: avatarUrl, alt: username || "User" })
   ] });
 };
-var ErrorContainer = styled4.div`
+var ErrorContainer = styled8.div`
   display: flex;
   align-items: flex-start;
   gap: ${tokens.spacing.sm};
@@ -3474,7 +3546,7 @@ var ErrorContainer = styled4.div`
   width: ${(props) => props.variant === "banner" ? "100%" : "auto"};
   max-width: ${(props) => props.variant === "banner" ? "100%" : "600px"};
 `;
-var IconContainer = styled4.div`
+var IconContainer = styled8.div`
   flex-shrink: 0;
   width: 20px;
   height: 20px;
@@ -3491,29 +3563,29 @@ var ErrorIcon = () => /* @__PURE__ */ jsx(
     children: /* @__PURE__ */ 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.div`
+var Content2 = styled8.div`
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
 `;
-var ErrorMessage = styled4.div`
+var ErrorMessage = styled8.div`
   font-size: ${tokens.typography.fontSize.sm};
   line-height: ${tokens.typography.lineHeight.normal};
   color: ${tokens.colors.text.primary};
 `;
-var ErrorDetails = styled4.div`
+var ErrorDetails = styled8.div`
   font-size: ${tokens.typography.fontSize.xs};
   line-height: 1.4;
   color: ${tokens.colors.text.secondary};
   margin-top: ${tokens.spacing.xs};
 `;
-var Actions2 = styled4.div`
+var Actions2 = styled8.div`
   display: flex;
   gap: ${tokens.spacing.sm};
   margin-top: ${tokens.spacing.sm};
 `;
-var Button2 = styled4.button`
+var Button2 = styled8.button`
   display: inline-flex;
   align-items: center;
   gap: ${tokens.spacing.xs};
@@ -3542,7 +3614,7 @@ var Button2 = styled4.button`
     cursor: not-allowed;
   }
 `;
-var CloseButton = styled4.button`
+var CloseButton = styled8.button`
   flex-shrink: 0;
   width: 24px;
   height: 24px;
@@ -3601,7 +3673,7 @@ var StreamErrorMessage = ({
   ] });
 };
 StreamErrorMessage.displayName = "StreamErrorMessage";
-var SuggestionsContainer = styled4.div`
+var SuggestionsContainer = styled8.div`
   display: flex;
   flex-wrap: nowrap; /* Single row */
   gap: ${tokens.spacing.sm};
@@ -3634,7 +3706,7 @@ var SuggestionsContainer = styled4.div`
     display: none; /* Chrome/Safari/Opera */
   }
 `;
-var StyledSuggestion = styled4.button`
+var StyledSuggestion = styled8.button`
   /* Base styles */
   display: inline-flex;
   align-items: center;