@agentiffai/design 1.3.5 → 1.3.6

package/dist/copilotkit/index.cjs

@@ -828,7 +828,7 @@ 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};
+  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};
@@ -881,7 +881,7 @@ var StreamingTextBase = ({
     wasStreamingRef.current = isStreaming;
   }, [content, isStreaming, onStreamComplete]);
   const showCursor = isStreaming && cursor;
-  return /* @__PURE__ */ jsxRuntime.jsxs(Container3, { variant, className, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container3, { $variant: variant, className, children: [
     displayedText,
     showCursor && /* @__PURE__ */ jsxRuntime.jsx(Cursor, {})
   ] });
@@ -1452,7 +1452,6 @@ var ChatInput = ({
       if (inputRef.current) {
         inputRef.current.style.height = "auto";
       }
-      inputRef.current?.focus();
     }
   };
   const handleSuggestionClick = (suggestionText) => {
@@ -1558,7 +1557,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 +1601,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
@@ -1625,6 +1624,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;
 
@@ -2583,6 +2583,104 @@ var GlobalSidebarStyles2 = styled4.createGlobalStyle`
     }
   }
 
+  /* 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: env(safe-area-inset-top, 0px) !important;
+      bottom: calc(52px + env(safe-area-inset-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;
+    }
+  }
+
   /* Hide button when sidebar is open */
   .copilotKitSidebarContentWrapper.sidebarExpanded {
     button[aria-label="Open chat"],