@agentiffai/design 0.1.9 → 0.1.11

package/dist/copilotkit/index.d.cts

@@ -1,5 +1,6 @@
-export { A as Action, c as ActionVariant, d as Actions, a as ActionsLayout, b as ActionsProps, f as AgentState, e as AgentStateProps, q as AssistantMessage, m as AssistantMessageProps, i as Button, B as ButtonProps, g as ButtonSize, h as ButtonVariant, r as FileAttachment, n as FileAttachmentProps, j as Footer, F as FooterProps, k as Header, H as HeaderProps, l as Input, I as InputProps, M as Message, s as Messages, t as MessagesList, u as MessagesListContainer, v as MessagesListContent, o as MessagesListProps, p as MessagesProps, x as Response, R as ResponseProps, y as StreamErrorMessage, S as StreamErrorMessageProps, E as StreamStatusIndicator, D as StreamStatusIndicatorProps, C as StreamingText, z as StreamingTextProps, J as Suggestions, G as SuggestionsProps, w as UserMessage, U as UserMessageProps, K as Window, W as WindowProps } from '../Window-CF5y1_Og.cjs';
+export { A as Action, c as ActionVariant, d as Actions, a as ActionsLayout, b as ActionsProps, f as AgentState, e as AgentStateProps, q as AssistantMessage, m as AssistantMessageProps, i as Button, B as ButtonProps, g as ButtonSize, h as ButtonVariant, r as FileAttachment, n as FileAttachmentProps, j as Footer, F as FooterProps, k as Header, H as HeaderProps, l as Input, I as InputProps, M as Message, s as Messages, t as MessagesList, u as MessagesListContainer, v as MessagesListContent, o as MessagesListProps, p as MessagesProps, x as Response, R as ResponseProps, y as StreamErrorMessage, S as StreamErrorMessageProps, E as StreamStatusIndicator, D as StreamStatusIndicatorProps, C as StreamingText, z as StreamingTextProps, J as Suggestions, G as SuggestionsProps, w as UserMessage, U as UserMessageProps, K as Window, W as WindowProps } from '../Window-BcTRumpc.cjs';
 import { RenderMessageProps, AssistantMessageProps, InputProps, UserMessageProps } from '@copilotkit/react-ui';
+import * as React from 'react';
 import React__default, { ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import '@react-aria/button';
@@ -25,19 +26,7 @@ import 'styled-components/dist/types';
  */
 declare const ActionExecutionAdapter: React__default.FC<RenderMessageProps>;
 
-/**
- * Adapter component that bridges custom AssistantMessage with CopilotKit's expected interface
- *
- * This adapter:
- * 1. Converts CopilotKit's AssistantMessageProps to our custom component props
- * 2. Handles loading states by showing AssistantThinking component
- * 3. Extracts message content and renders with our styled component
- */
-
-/**
- * Adapter that converts CopilotKit's AssistantMessageProps to our custom component
- */
-declare const AssistantMessageAdapter: React__default.FC<AssistantMessageProps>;
+declare const AssistantMessageAdapter: React.NamedExoticComponent<AssistantMessageProps>;
 
 /**
  * Adapter component that bridges custom Input with CopilotKit's expected interface
@@ -53,19 +42,7 @@ declare const AssistantMessageAdapter: React__default.FC<AssistantMessageProps>;
  */
 declare const InputAdapter: React__default.FC<InputProps>;
 
-/**
- * Adapter component that bridges custom UserMessage with CopilotKit's expected interface
- *
- * This adapter:
- * 1. Converts CopilotKit's UserMessageProps to our custom component props
- * 2. Extracts message content from CopilotKit's message object
- * 3. Handles image messages appropriately
- */
-
-/**
- * Adapter that converts CopilotKit's UserMessageProps to our custom component
- */
-declare const UserMessageAdapter: React__default.FC<UserMessageProps>;
+declare const UserMessageAdapter: React.NamedExoticComponent<UserMessageProps>;
 
 /**
  * Complete CopilotSidebar Integration Example

package/dist/copilotkit/index.d.ts

@@ -1,5 +1,6 @@
-export { A as Action, c as ActionVariant, d as Actions, a as ActionsLayout, b as ActionsProps, f as AgentState, e as AgentStateProps, q as AssistantMessage, m as AssistantMessageProps, i as Button, B as ButtonProps, g as ButtonSize, h as ButtonVariant, r as FileAttachment, n as FileAttachmentProps, j as Footer, F as FooterProps, k as Header, H as HeaderProps, l as Input, I as InputProps, M as Message, s as Messages, t as MessagesList, u as MessagesListContainer, v as MessagesListContent, o as MessagesListProps, p as MessagesProps, x as Response, R as ResponseProps, y as StreamErrorMessage, S as StreamErrorMessageProps, E as StreamStatusIndicator, D as StreamStatusIndicatorProps, C as StreamingText, z as StreamingTextProps, J as Suggestions, G as SuggestionsProps, w as UserMessage, U as UserMessageProps, K as Window, W as WindowProps } from '../Window-CF5y1_Og.js';
+export { A as Action, c as ActionVariant, d as Actions, a as ActionsLayout, b as ActionsProps, f as AgentState, e as AgentStateProps, q as AssistantMessage, m as AssistantMessageProps, i as Button, B as ButtonProps, g as ButtonSize, h as ButtonVariant, r as FileAttachment, n as FileAttachmentProps, j as Footer, F as FooterProps, k as Header, H as HeaderProps, l as Input, I as InputProps, M as Message, s as Messages, t as MessagesList, u as MessagesListContainer, v as MessagesListContent, o as MessagesListProps, p as MessagesProps, x as Response, R as ResponseProps, y as StreamErrorMessage, S as StreamErrorMessageProps, E as StreamStatusIndicator, D as StreamStatusIndicatorProps, C as StreamingText, z as StreamingTextProps, J as Suggestions, G as SuggestionsProps, w as UserMessage, U as UserMessageProps, K as Window, W as WindowProps } from '../Window-BcTRumpc.js';
 import { RenderMessageProps, AssistantMessageProps, InputProps, UserMessageProps } from '@copilotkit/react-ui';
+import * as React from 'react';
 import React__default, { ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import '@react-aria/button';
@@ -25,19 +26,7 @@ import 'styled-components/dist/types';
  */
 declare const ActionExecutionAdapter: React__default.FC<RenderMessageProps>;
 
-/**
- * Adapter component that bridges custom AssistantMessage with CopilotKit's expected interface
- *
- * This adapter:
- * 1. Converts CopilotKit's AssistantMessageProps to our custom component props
- * 2. Handles loading states by showing AssistantThinking component
- * 3. Extracts message content and renders with our styled component
- */
-
-/**
- * Adapter that converts CopilotKit's AssistantMessageProps to our custom component
- */
-declare const AssistantMessageAdapter: React__default.FC<AssistantMessageProps>;
+declare const AssistantMessageAdapter: React.NamedExoticComponent<AssistantMessageProps>;
 
 /**
  * Adapter component that bridges custom Input with CopilotKit's expected interface
@@ -53,19 +42,7 @@ declare const AssistantMessageAdapter: React__default.FC<AssistantMessageProps>;
  */
 declare const InputAdapter: React__default.FC<InputProps>;
 
-/**
- * Adapter component that bridges custom UserMessage with CopilotKit's expected interface
- *
- * This adapter:
- * 1. Converts CopilotKit's UserMessageProps to our custom component props
- * 2. Extracts message content from CopilotKit's message object
- * 3. Handles image messages appropriately
- */
-
-/**
- * Adapter that converts CopilotKit's UserMessageProps to our custom component
- */
-declare const UserMessageAdapter: React__default.FC<UserMessageProps>;
+declare const UserMessageAdapter: React.NamedExoticComponent<UserMessageProps>;
 
 /**
  * Complete CopilotSidebar Integration Example

package/dist/copilotkit/index.js

@@ -1,7 +1,7 @@
 import { useButton } from '@react-aria/button';
-import { useRef, useState, useEffect } from 'react';
+import { memo, useState, useRef, useEffect } from 'react';
 import styled4, { css, keyframes, createGlobalStyle } from 'styled-components';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useTextField } from '@react-aria/textfield';
 import { CopilotSidebar, useChatContext } from '@copilotkit/react-ui';
 
@@ -836,7 +836,7 @@ var Cursor = styled4.span`
     }
   }
 `;
-var StreamingText2 = ({
+var StreamingTextBase = ({
   content,
   isStreaming = false,
   typingSpeed: _typingSpeed = 50,
@@ -846,25 +846,27 @@ var StreamingText2 = ({
   onStreamComplete,
   className
 }) => {
-  const [displayedText, setDisplayedText] = useState("");
+  const [displayedText, setDisplayedText] = useState(content);
+  const wasStreamingRef = useRef(isStreaming);
+  const completionCalledRef = useRef(false);
   useEffect(() => {
-    if (isStreaming) {
-      setDisplayedText(content);
-      return;
+    setDisplayedText(content);
+    if (wasStreamingRef.current && !isStreaming && !completionCalledRef.current) {
+      completionCalledRef.current = true;
+      onStreamComplete?.();
     }
-    if (!isStreaming && displayedText !== content) {
-      setDisplayedText(content);
-      if (onStreamComplete) {
-        onStreamComplete();
-      }
+    if (isStreaming) {
+      completionCalledRef.current = false;
     }
-  }, [content, isStreaming, onStreamComplete, displayedText]);
+    wasStreamingRef.current = isStreaming;
+  }, [content, isStreaming, onStreamComplete]);
   const showCursor = isStreaming && cursor;
   return /* @__PURE__ */ jsxs(Container3, { variant, className, children: [
     displayedText,
     showCursor && /* @__PURE__ */ jsx(Cursor, {})
   ] });
 };
+var StreamingText2 = memo(StreamingTextBase);
 StreamingText2.displayName = "StreamingText";
 var MessageContainer = styled4.div`
   display: flex;
@@ -1152,7 +1154,7 @@ var StreamingIndicator = styled4.span`
     }
   }
 `;
-var AssistantMessage = ({
+var AssistantMessageBase = ({
   content = "",
   avatarUrl,
   avatarInitials: _avatarInitials = "AI",
@@ -1199,7 +1201,9 @@ var AssistantMessage = ({
     /* @__PURE__ */ jsx(ContentContainer, { children: renderContent() })
   ] });
 };
-var AssistantMessageAdapter = ({
+var AssistantMessage = memo(AssistantMessageBase);
+AssistantMessage.displayName = "AssistantMessage";
+var AssistantMessageAdapterBase = ({
   message,
   isLoading,
   isGenerating
@@ -1229,6 +1233,7 @@ var AssistantMessageAdapter = ({
     }
   );
 };
+var AssistantMessageAdapter = memo(AssistantMessageAdapterBase);
 AssistantMessageAdapter.displayName = "AssistantMessageAdapter";
 var ChatInputContainer = styled4.div`
   display: flex;
@@ -1668,7 +1673,7 @@ var StyledUserMessage = styled4.button`
     }
   }
 `;
-function UserMessage({
+function UserMessageBase({
   children,
   className,
   isPressed = false,
@@ -1699,6 +1704,7 @@ function UserMessage({
     }
   );
 }
+var UserMessage = memo(UserMessageBase);
 UserMessage.displayName = "UserMessage";
 var UserMessageWrapper = styled4.div`
   display: flex;
@@ -1720,7 +1726,7 @@ var UserMessageWrapper = styled4.div`
     }
   }
 `;
-var UserMessageAdapter = ({
+var UserMessageAdapterBase = ({
   message,
   ImageRenderer
 }) => {
@@ -1730,6 +1736,7 @@ var UserMessageAdapter = ({
   const content = message?.content || "";
   return /* @__PURE__ */ jsx(UserMessageWrapper, { children: /* @__PURE__ */ jsx(UserMessage, { children: content }) });
 };
+var UserMessageAdapter = memo(UserMessageAdapterBase);
 UserMessageAdapter.displayName = "UserMessageAdapter";
 var pulse2 = keyframes`
   0%, 100% {
@@ -2454,16 +2461,24 @@ var CustomCopilotSidebar = ({
 };
 CustomCopilotSidebar.displayName = "CustomCopilotSidebar";
 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;
+    }
+  }
+
   /* Override CopilotKit's default positioning - keep sidebar container in place */
   /* z-index must be higher than NavHorizontal (sticky: 1020) for button to show above nav */
   .copilotKitSidebar {
     position: fixed !important;
-    top: 0 !important;
-    right: 0 !important;
-    bottom: 0 !important;
-    left: 0 !important;
-    width: 100vw !important;
-    height: 100vh !important;
+    top: calc(var(--safe-area-top, 0px) + 8px) !important;
+    right: calc(var(--safe-area-right, 0px) + 8px) !important;
+    bottom: calc(var(--safe-area-bottom, 0px) + 8px) !important;
+    left: calc(var(--safe-area-left, 0px) + 8px) !important;
+    width: auto !important;
+    height: auto !important;
     pointer-events: none !important;
     z-index: ${tokens.zIndex.fixed} !important;
   }
@@ -2478,16 +2493,19 @@ var GlobalSidebarStyles2 = createGlobalStyle`
   .copilotKitSidebar [role="dialog"] {
     /* Override CopilotKit defaults for mobile */
     position: fixed !important;
-    top: ${tokens.spacing.sm} !important;
-    right: ${tokens.spacing.sm} !important;
-    /* Reserve space for Android nav buttons - matches NavHorizontal approach */
-    bottom: max(90px, env(safe-area-inset-bottom, 90px)) !important;
-    left: ${tokens.spacing.sm} !important;
-    width: calc(100vw - ${tokens.spacing.lg}) !important;
-    /* Adjust height to account for bottom safe area */
-    height: calc(100vh - ${tokens.spacing.lg} - max(80px, env(safe-area-inset-bottom, 80px))) !important;
-    max-width: calc(100vw - ${tokens.spacing.lg}) !important;
-    max-height: calc(100vh - ${tokens.spacing.lg} - max(80px, env(safe-area-inset-bottom, 80px))) !important;
+    /* TOP: Account for status bar safe area (Android notch/status bar) */
+    top: calc(${tokens.spacing.sm} + env(safe-area-inset-top, 0px)) !important;
+    /* RIGHT: Account for landscape notch on right side */
+    right: calc(${tokens.spacing.sm} + env(safe-area-inset-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;
+    /* 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;
+    /* 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;
     margin: 0 !important;
     border-radius: ${tokens.borderRadius.xl} !important;
 
@@ -2523,16 +2541,18 @@ var GlobalSidebarStyles2 = createGlobalStyle`
   @media (min-width: ${tokens.breakpoints.mobile}px) {
     .copilotKitSidebar [role="dialog"] {
       inset: auto !important;
-      top: ${tokens.spacing.sm} !important;
-      right: ${tokens.spacing.sm} !important;
-      /* Reserve space for Android nav buttons on desktop too */
-      bottom: max(90px, env(safe-area-inset-bottom, 90px)) !important;
+      /* TOP: Account for status bar safe area */
+      top: calc(${tokens.spacing.sm} + env(safe-area-inset-top, 0px)) !important;
+      /* RIGHT: Account for landscape notch on right side */
+      right: calc(${tokens.spacing.sm} + env(safe-area-inset-right, 0px)) !important;
+      /* BOTTOM: Account for horizontal navbar (52px) + safe area */
+      bottom: calc(52px + ${tokens.spacing.sm} + env(safe-area-inset-bottom, 0px)) !important;
       left: auto !important;
       width: 28rem !important;
-      /* Adjust height to account for bottom safe area */
-      height: calc(100vh - ${tokens.spacing.lg} - max(80px, env(safe-area-inset-bottom, 80px))) !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: 28rem !important;
-      max-height: calc(100vh - ${tokens.spacing.lg} - max(80px, env(safe-area-inset-bottom, 80px))) !important;
+      max-height: calc(100vh - ${tokens.spacing.lg} - env(safe-area-inset-top, 0px) - 52px - env(safe-area-inset-bottom, 0px)) !important;
     }
   }
 
@@ -2552,6 +2572,18 @@ var GlobalSidebarStyles2 = createGlobalStyle`
     }
   }
 
+  /* Position chat button with safe area on landscape (right side for Android controls) */
+  @media (orientation: landscape) {
+    .copilotKitSidebarContentWrapper {
+      button[aria-label="Open chat"],
+      button[aria-label="Close chat"] {
+        bottom: calc(var(--safe-area-bottom, 0px) + 8px) !important;
+        right: calc(var(--safe-area-right, 0px) + 8px) !important;
+        z-index: 2000 !important;
+      }
+    }
+  }
+
   /* Fix messages container background */
   .copilotKitMessages {
     background-color: transparent !important;
@@ -2622,8 +2654,8 @@ var GlobalSidebarStyles2 = createGlobalStyle`
 `;
 var StyledChatButton2 = styled4.button`
   position: fixed;
-  bottom: ${tokens.spacing.sm};
-  right: ${tokens.spacing.sm};
+  bottom: calc(${tokens.spacing.sm} + env(safe-area-inset-bottom, 0px));
+  right: calc(${tokens.spacing.sm} + env(safe-area-inset-right, 0px));
   width: 36px;
   height: 36px;
   border-radius: ${tokens.borderRadius.full};