@agentiffai/design 1.3.4 → 1.3.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -822,7 +822,7 @@ function AssistantThinking({
822
822
  }
823
823
  AssistantThinking.displayName = "AssistantThinking";
824
824
  var Container3 = styled4.div`
825
- font-family: ${(props) => props.variant === "code" ? tokens.typography.fontFamily.monospace : tokens.typography.fontFamily.primary};
825
+ font-family: ${(props) => props.$variant === "code" ? tokens.typography.fontFamily.monospace : tokens.typography.fontFamily.primary};
826
826
  white-space: pre-wrap;
827
827
  word-break: break-word;
828
828
  line-height: ${tokens.typography.lineHeight.normal};
@@ -875,7 +875,7 @@ var StreamingTextBase = ({
875
875
  wasStreamingRef.current = isStreaming;
876
876
  }, [content, isStreaming, onStreamComplete]);
877
877
  const showCursor = isStreaming && cursor;
878
- return /* @__PURE__ */ jsxs(Container3, { variant, className, children: [
878
+ return /* @__PURE__ */ jsxs(Container3, { $variant: variant, className, children: [
879
879
  displayedText,
880
880
  showCursor && /* @__PURE__ */ jsx(Cursor, {})
881
881
  ] });
@@ -1207,6 +1207,10 @@ var AssistantMessageBase = ({
1207
1207
  };
1208
1208
  var AssistantMessage = memo(AssistantMessageBase);
1209
1209
  AssistantMessage.displayName = "AssistantMessage";
1210
+ var TOOL_CALL_MARKER_REGEX = /<!--TOOL_CALL:([^:]+):(.+?)-->/g;
1211
+ function stripToolCallMarkers(content) {
1212
+ return content.replace(TOOL_CALL_MARKER_REGEX, "").trim();
1213
+ }
1210
1214
  var GenerativeUIContainer = styled4.div`
1211
1215
  margin-top: ${tokens.spacing.sm};
1212
1216
  margin-bottom: ${tokens.spacing.sm};
@@ -1227,7 +1231,8 @@ var AssistantMessageAdapterBase = ({
1227
1231
  if (isLoading || isGenerating && !message?.content) {
1228
1232
  return /* @__PURE__ */ jsx(AssistantThinking, { message: "Thinking..." });
1229
1233
  }
1230
- const content = message?.content || "";
1234
+ const rawContent = message?.content || "";
1235
+ const content = stripToolCallMarkers(rawContent);
1231
1236
  let generativeUIOutput = null;
1232
1237
  const msgWithUI = message;
1233
1238
  if (msgWithUI && typeof msgWithUI.generativeUI === "function") {
@@ -1441,7 +1446,6 @@ var ChatInput = ({
1441
1446
  if (inputRef.current) {
1442
1447
  inputRef.current.style.height = "auto";
1443
1448
  }
1444
- inputRef.current?.focus();
1445
1449
  }
1446
1450
  };
1447
1451
  const handleSuggestionClick = (suggestionText) => {
@@ -1547,7 +1551,7 @@ ChatInput.displayName = "ChatInput";
1547
1551
  var InputAdapter = ({
1548
1552
  inProgress,
1549
1553
  onSend,
1550
- isVisible = true
1554
+ isVisible: _isVisible = true
1551
1555
  }) => {
1552
1556
  const [value, setValue] = useState("");
1553
1557
  const [isSubmitting, setIsSubmitting] = useState(false);
@@ -1591,7 +1595,7 @@ var InputAdapter = ({
1591
1595
  onSubmit: handleSubmit,
1592
1596
  placeholder: "Ask, write or search for anything...",
1593
1597
  isDisabled: shouldDisableInput,
1594
- autoFocus: isVisible,
1598
+ autoFocus: false,
1595
1599
  "aria-label": "Chat message input",
1596
1600
  suggestions: [{ text: "Explore workflows" }],
1597
1601
  onSuggestionSelect: handleSuggestionSelect
@@ -1614,6 +1618,7 @@ var StyledUserMessage = styled4.button`
1614
1618
  user-select: none;
1615
1619
  white-space: pre-wrap;
1616
1620
  word-wrap: break-word;
1621
+ word-break: break-word;
1617
1622
  position: relative;
1618
1623
  text-align: left;
1619
1624
 
@@ -2572,6 +2577,104 @@ var GlobalSidebarStyles2 = createGlobalStyle`
2572
2577
  }
2573
2578
  }
2574
2579
 
2580
+ /* Mobile landscape: sidebar on right side, allow background interaction */
2581
+ @media (orientation: landscape) and (max-height: 500px) {
2582
+ /* Account for vertical nav (60px) in landscape */
2583
+ .copilotKitSidebarContentWrapper {
2584
+ left: 60px !important;
2585
+ width: calc(100% - 60px) !important;
2586
+ }
2587
+
2588
+ /* Shrink the sidebar container to only cover the right portion where dialog lives */
2589
+ /* Also stretch to full height (remove default 8px padding) */
2590
+ .copilotKitSidebar {
2591
+ top: 0 !important;
2592
+ bottom: 0 !important;
2593
+ left: 58vw !important;
2594
+ width: min(50vw, 22rem) !important;
2595
+ height: 100vh !important;
2596
+ }
2597
+
2598
+ /* Offset the expanded sidebar wrapper to leave space for main content */
2599
+ .copilotKitSidebarContentWrapper.sidebarExpanded {
2600
+ margin-right: 30vw !important;
2601
+ }
2602
+
2603
+ .copilotKitSidebar [role="dialog"] {
2604
+ width: min(50vw, 20rem) !important;
2605
+ max-width: min(50vw, 20rem) !important;
2606
+ left: auto !important;
2607
+ right: 1.5rem !important;
2608
+ /* Use top/bottom ONLY - let browser calculate height (more reliable than explicit height) */
2609
+ top: env(safe-area-inset-top, 0px) !important;
2610
+ bottom: calc(52px + env(safe-area-inset-bottom, 0px)) !important;
2611
+ /* Remove explicit height - let top/bottom define it */
2612
+ height: auto !important;
2613
+ max-height: none !important;
2614
+ /* Remove margins */
2615
+ margin: 0 !important;
2616
+ border-radius: 0 !important;
2617
+ border-top-left-radius: ${tokens.borderRadius.xl} !important;
2618
+ border-bottom-left-radius: ${tokens.borderRadius.xl} !important;
2619
+ }
2620
+
2621
+ /* Compact header in landscape - hide title text but keep close button */
2622
+ .copilotKitSidebar [role="dialog"] header,
2623
+ .copilotKitSidebar [role="dialog"] [data-testid="chat-header"],
2624
+ .copilotKitSidebar [role="dialog"] > div:first-child {
2625
+ padding: 0.25rem 0.5rem !important;
2626
+ min-height: auto !important;
2627
+ height: 1.5rem;
2628
+ padding-right: 1.5rem !important;
2629
+ }
2630
+
2631
+ /* Hide the title text but keep close button visible */
2632
+ .copilotKitSidebar [role="dialog"] header h1,
2633
+ .copilotKitSidebar [role="dialog"] header h2,
2634
+ .copilotKitSidebar [role="dialog"] header span:not(:last-child),
2635
+ .copilotKitSidebar [role="dialog"] > div:first-child > span,
2636
+ .copilotKitSidebar [role="dialog"] > div:first-child > h1,
2637
+ .copilotKitSidebar [role="dialog"] > div:first-child > h2 {
2638
+ display: none !important;
2639
+ }
2640
+
2641
+ /* Reduce vertical padding inside chat to preserve space in landscape */
2642
+ .copilotKitMessages {
2643
+ padding: ${tokens.spacing.xs} ${tokens.spacing.sm} !important;
2644
+ }
2645
+
2646
+ .copilotKitMessage {
2647
+ padding: ${tokens.spacing.xs} 0 !important;
2648
+ margin: ${tokens.spacing.xs} 0 !important;
2649
+ }
2650
+
2651
+ /* Compact input area in landscape */
2652
+ .copilotKitInput,
2653
+ .copilotKitSidebar [role="dialog"] > div:last-child {
2654
+ padding: ${tokens.spacing.xs} ${tokens.spacing.sm} !important;
2655
+ }
2656
+
2657
+ /* Reduce gap between messages */
2658
+ .copilotKitMessages > div {
2659
+ gap: 0.25rem !important;
2660
+ padding-bottom: 0;
2661
+ margin-bottom: -3rem;
2662
+ }
2663
+
2664
+ /* Compact suggested prompts in landscape */
2665
+ div[role="list"][aria-label*="Suggested"] {
2666
+ margin: 0 !important;
2667
+ padding: 1px !important;
2668
+ min-height: auto !important;
2669
+ max-height: 32px !important;
2670
+ }
2671
+
2672
+ /* Compact parent of suggestions (input area) */
2673
+ .copilotKitSidebar [role="dialog"] > div:last-child {
2674
+ padding: 1px !important;
2675
+ }
2676
+ }
2677
+
2575
2678
  /* Hide button when sidebar is open */
2576
2679
  .copilotKitSidebarContentWrapper.sidebarExpanded {
2577
2680
  button[aria-label="Open chat"],