@agentiffai/design 1.4.3 → 1.4.4

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.
@@ -4,7 +4,8 @@ var button = require('@react-aria/button');
4
4
  var React = require('react');
5
5
  var styled9 = require('styled-components');
6
6
  var jsxRuntime = require('react/jsx-runtime');
7
- var v2 = require('@copilotkit/react-core/v2');
7
+ var reactCore = require('@copilotkit/react-core');
8
+ var reactUi = require('@copilotkit/react-ui');
8
9
  var textfield = require('@react-aria/textfield');
9
10
 
10
11
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -12,12 +13,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
12
13
  var React__default = /*#__PURE__*/_interopDefault(React);
13
14
  var styled9__default = /*#__PURE__*/_interopDefault(styled9);
14
15
 
15
- var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
16
- get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
17
- }) : x)(function(x) {
18
- if (typeof require !== "undefined") return require.apply(this, arguments);
19
- throw Error('Dynamic require of "' + x + '" is not supported');
20
- });
16
+ // src/components/copilotkit/Button/Button.tsx
21
17
 
22
18
  // src/theme/tokens.ts
23
19
  var tokens = {
@@ -1424,22 +1420,6 @@ var AssistantMessageBase = ({
1424
1420
  };
1425
1421
  var AssistantMessage = React.memo(AssistantMessageBase);
1426
1422
  AssistantMessage.displayName = "AssistantMessage";
1427
- var _useAgent;
1428
- try {
1429
- _useAgent = __require("@copilotkit/react-core/v2").useAgent;
1430
- } catch {
1431
- }
1432
- function useVisibleMessages() {
1433
- if (_useAgent) {
1434
- try {
1435
- const { agent } = _useAgent({ agentId: "default" });
1436
- return agent.messages ?? [];
1437
- } catch {
1438
- return [];
1439
- }
1440
- }
1441
- return [];
1442
- }
1443
1423
  var REGISTRY_KEY = "__agentiffai_tool_call_registry__";
1444
1424
  var TOOL_CALL_TTL_MS = 5 * 60 * 1e3;
1445
1425
  function getRegistryMap() {
@@ -1714,7 +1694,7 @@ function createAssistantMessageAdapterWithErrorReporting(onReportIssue, Thinking
1714
1694
  isGenerating
1715
1695
  }) => {
1716
1696
  const lastGenerativeUIRef = React.useRef(null);
1717
- const visibleMessages = useVisibleMessages();
1697
+ const { visibleMessages } = reactCore.useCopilotChat();
1718
1698
  const rawContent = Array.isArray(message?.content) ? message.content.join("") : message?.content || "";
1719
1699
  const content = stripToolCallMarkers(rawContent);
1720
1700
  const toolCallNames = React.useMemo(() => {
@@ -2348,24 +2328,6 @@ var UserMessageAdapterBase = ({ message, ImageRenderer }) => {
2348
2328
  };
2349
2329
  var UserMessageAdapter = React.memo(UserMessageAdapterBase);
2350
2330
  UserMessageAdapter.displayName = "UserMessageAdapter";
2351
- var ChatContext = React.createContext(void 0);
2352
- function useChatContext() {
2353
- const ctx = React.useContext(ChatContext);
2354
- if (ctx) return ctx;
2355
- try {
2356
- const v1 = __require("@copilotkit/react-ui");
2357
- if (v1?.useChatContext) {
2358
- return v1.useChatContext();
2359
- }
2360
- } catch {
2361
- }
2362
- return {
2363
- open: false,
2364
- setOpen: () => {
2365
- console.warn("[useChatContext shim] setOpen called but no ChatContext provider found");
2366
- }
2367
- };
2368
- }
2369
2331
  var pulse3 = styled9.keyframes`
2370
2332
  0%, 100% {
2371
2333
  opacity: 1;
@@ -2724,6 +2686,35 @@ var Header = ({
2724
2686
  ] });
2725
2687
  };
2726
2688
  Header.displayName = "Header";
2689
+ var MessagesContainer = styled9__default.default.div`
2690
+ display: flex;
2691
+ flex-direction: column;
2692
+ flex: 1;
2693
+ overflow: hidden;
2694
+ /* Gradient background - brand aligned */
2695
+ background: linear-gradient(
2696
+ to right bottom,
2697
+ ${tokens.colors.background.dark},
2698
+ ${tokens.colors.background.darker},
2699
+ ${tokens.colors.background.darkest}
2700
+ );
2701
+ /* Minimal horizontal padding to maximize message width */
2702
+ padding: ${tokens.spacing.sm} ${tokens.spacing.xs};
2703
+ gap: ${tokens.spacing.sm};
2704
+ box-sizing: border-box;
2705
+
2706
+ /* Ensure proper scrolling behavior for child components */
2707
+ position: relative;
2708
+ min-height: 0;
2709
+ `;
2710
+ var Messages = ({
2711
+ children,
2712
+ className,
2713
+ ariaLabel = "Messages"
2714
+ }) => {
2715
+ return /* @__PURE__ */ jsxRuntime.jsx(MessagesContainer, { className, role: "region", "aria-label": ariaLabel, children });
2716
+ };
2717
+ Messages.displayName = "Messages";
2727
2718
  var WindowContainer = styled9__default.default.div`
2728
2719
  display: flex;
2729
2720
  flex-direction: column;
@@ -2818,197 +2809,64 @@ var Window = ({
2818
2809
  };
2819
2810
  Window.displayName = "Window";
2820
2811
  var GlobalSidebarStyles = styled9.createGlobalStyle`
2821
- /* Override CopilotKit's content wrapper to respect safe areas in landscape */
2822
- @media (orientation: landscape) {
2823
- .copilotKitSidebarContentWrapper {
2824
- right: var(--safe-area-right, 0px) !important;
2825
- left: var(--safe-area-left, 0px) !important;
2826
- }
2827
- }
2828
-
2829
- /* Override CopilotKit's default positioning - keep sidebar container in place */
2830
- /* z-index must be higher than NavHorizontal (sticky: 1020) for button to show above nav */
2812
+ /* Override CopilotKit's default positioning - start off-screen */
2831
2813
  .copilotKitSidebar {
2832
2814
  position: fixed !important;
2833
- top: calc(var(--safe-area-top, 0px) + 8px) !important;
2834
- right: calc(var(--safe-area-right, 0px) + 8px) !important;
2835
- bottom: calc(var(--safe-area-bottom, 0px) + 8px) !important;
2836
- left: calc(var(--safe-area-left, 0px) + 8px) !important;
2837
- width: auto !important;
2838
- height: auto !important;
2839
- pointer-events: none !important;
2840
- z-index: ${tokens.zIndex.fixed} !important;
2815
+ right: -100vw !important;
2816
+ bottom: 0 !important;
2817
+ transition: right 0.3s ease !important;
2841
2818
  }
2842
2819
 
2843
- /* Keep sidebar container always visible (the window inside will animate) */
2820
+ /* Move sidebar container into view when expanded */
2844
2821
  .copilotKitSidebarContentWrapper.sidebarExpanded .copilotKitSidebar {
2845
- pointer-events: auto !important;
2822
+ right: 0 !important;
2846
2823
  }
2847
2824
 
2848
- /* Mobile-first: Glassmorphism sidebar with rounded corners */
2849
- /* Target the actual dialog element that gets rendered */
2850
- .copilotKitSidebar [role="dialog"] {
2851
- /* Override CopilotKit defaults for mobile */
2825
+ /* Mobile-first: Full viewport sidebar */
2826
+ .copilotKitSidebar .copilotKitWindow {
2852
2827
  position: fixed !important;
2853
- /* TOP: Account for status bar safe area (Android notch/status bar) */
2854
- top: calc(${tokens.spacing.sm} + var(--safe-area-top, 0px)) !important;
2855
- /* RIGHT: Account for landscape notch on right side */
2856
- right: calc(${tokens.spacing.sm} + var(--safe-area-right, 0px)) !important;
2857
- /* BOTTOM: Account for horizontal navbar (52px) + safe area for Android nav buttons */
2858
- bottom: calc(52px + ${tokens.spacing.sm} + var(--safe-area-bottom, 0px)) !important;
2859
- /* LEFT: Account for landscape notch on left side */
2860
- left: calc(${tokens.spacing.sm} + var(--safe-area-left, 0px)) !important;
2861
- /* Let left + right define width, top + bottom define height — no explicit values needed */
2862
- width: auto !important;
2863
- height: auto !important;
2864
- max-width: none !important;
2865
- max-height: none !important;
2828
+ top: 0 !important;
2829
+ right: 0 !important;
2830
+ bottom: 0 !important;
2831
+ left: auto !important;
2832
+ width: 100vw !important;
2833
+ height: 100vh !important;
2834
+ max-width: 100vw !important;
2835
+ max-height: 100vh !important;
2866
2836
  margin: 0 !important;
2867
- border-radius: ${tokens.borderRadius.xl} !important;
2868
-
2869
- /* Glassmorphism effect */
2870
- background: ${tokens.colors.surface.glass} !important;
2871
- box-shadow: ${tokens.shadows.lg} !important;
2872
- backdrop-filter: blur(11.1px) !important;
2873
- -webkit-backdrop-filter: blur(11.1px) !important;
2874
- border: 1px solid ${tokens.colors.surface.glassBorder} !important;
2875
-
2876
- /* Smooth slide transition */
2877
- transition: transform 0.3s ease, visibility 0.3s ease, opacity 0.3s ease !important;
2878
- z-index: ${tokens.zIndex.modal} !important;
2879
- }
2837
+ border-radius: 0 !important;
2838
+ z-index: 1001 !important;
2880
2839
 
2881
- /* Hidden by default */
2882
- .copilotKitSidebarContentWrapper:not(.sidebarExpanded) .copilotKitSidebar [role="dialog"] {
2883
2840
  transform: translateX(100%) !important;
2884
2841
  visibility: hidden !important;
2885
2842
  pointer-events: none !important;
2886
2843
  opacity: 0 !important;
2844
+ display: none !important;
2845
+
2846
+ transition: transform 0.3s ease, visibility 0.3s ease, opacity 0.3s ease !important;
2887
2847
  }
2888
2848
 
2889
- /* Visible when expanded */
2890
- .copilotKitSidebarContentWrapper.sidebarExpanded .copilotKitSidebar [role="dialog"] {
2849
+ /* When window has .open class (CopilotKit's native class), show it */
2850
+ .copilotKitSidebar .copilotKitWindow.open {
2851
+ display: flex !important;
2891
2852
  transform: translateX(0) !important;
2892
2853
  visibility: visible !important;
2893
2854
  pointer-events: auto !important;
2894
2855
  opacity: 1 !important;
2895
2856
  }
2896
2857
 
2897
- /* Desktop: Sidebar panel on the right with glassmorphism (640px = CopilotKit's breakpoint) */
2898
- @media (min-width: ${tokens.breakpoints.mobile}px) {
2899
- .copilotKitSidebar [role="dialog"] {
2858
+ /* Desktop: Sidebar panel on the right (640px = CopilotKit's breakpoint) */
2859
+ @media (min-width: 640px) {
2860
+ .copilotKitSidebar .copilotKitWindow {
2900
2861
  inset: auto !important;
2901
- /* TOP: Account for status bar safe area */
2902
- top: calc(${tokens.spacing.sm} + var(--safe-area-top, 0px)) !important;
2903
- /* RIGHT: Account for landscape notch on right side */
2904
- right: calc(${tokens.spacing.sm} + var(--safe-area-right, 0px)) !important;
2905
- /* BOTTOM: Account for horizontal navbar (52px) + safe area */
2906
- bottom: calc(52px + ${tokens.spacing.sm} + var(--safe-area-bottom, 0px)) !important;
2907
- left: auto !important;
2908
- width: 28rem !important;
2909
- /* Let top + bottom define height — no explicit value needed */
2910
- height: auto !important;
2911
- max-width: 28rem !important;
2912
- max-height: none !important;
2913
- }
2914
- }
2915
-
2916
- /* Mobile landscape: sidebar on right side, allow background interaction */
2917
- @media (orientation: landscape) and (max-height: 500px) {
2918
- /* Account for vertical nav (60px) in landscape */
2919
- .copilotKitSidebarContentWrapper {
2920
- left: 60px !important;
2921
- width: calc(100% - 60px) !important;
2922
- }
2923
-
2924
- /* Sidebar container covers right portion — full height, no gaps */
2925
- .copilotKitSidebar {
2926
2862
  top: 0 !important;
2927
- bottom: 0 !important;
2928
- right: 0 !important;
2929
- left: 50vw !important;
2930
- width: auto !important;
2931
- height: 100vh !important;
2932
- }
2933
-
2934
- /* Offset the expanded sidebar wrapper to leave space for main content */
2935
- .copilotKitSidebarContentWrapper.sidebarExpanded {
2936
- margin-right: 30vw !important;
2937
- }
2938
-
2939
- .copilotKitSidebar [role="dialog"] {
2940
- width: min(50vw, 22rem) !important;
2941
- max-width: min(50vw, 22rem) !important;
2942
- left: auto !important;
2943
- /* Flush with right edge — safe area handled via internal padding */
2944
2863
  right: 0 !important;
2945
- /* Fill ALL vertical space — overlay the bottom nav for maximum chat area */
2946
- /* Keep top safe area so dialog doesn't go behind status bar (battery/wifi) */
2947
- top: var(--safe-area-top, 0px) !important;
2948
2864
  bottom: 0 !important;
2949
- /* Let top/bottom define height */
2950
- height: auto !important;
2951
- max-height: none !important;
2952
- margin: 0 !important;
2953
- /* Only round the left edges since right is flush with viewport */
2954
- border-radius: 0 !important;
2955
- border-top-left-radius: ${tokens.borderRadius.xl} !important;
2956
- border-bottom-left-radius: ${tokens.borderRadius.xl} !important;
2957
- }
2958
-
2959
- /* Compact header in landscape - hide title text but keep close button */
2960
- /* Safe area top padding applied here so content avoids status bar */
2961
- .copilotKitSidebar [role="dialog"] header,
2962
- .copilotKitSidebar [role="dialog"] [data-testid="chat-header"],
2963
- .copilotKitSidebar [role="dialog"] > div:first-child {
2964
- padding: 0.25rem 0.5rem 0.25rem !important;
2965
- min-height: auto !important;
2966
- height: auto !important;
2967
- padding-right: calc(1.5rem + var(--safe-area-right, 0px)) !important;
2968
- }
2969
-
2970
- /* Hide the title text but keep close button visible */
2971
- .copilotKitSidebar [role="dialog"] header h1,
2972
- .copilotKitSidebar [role="dialog"] header h2,
2973
- .copilotKitSidebar [role="dialog"] header span:not(:last-child),
2974
- .copilotKitSidebar [role="dialog"] > div:first-child > span,
2975
- .copilotKitSidebar [role="dialog"] > div:first-child > h1,
2976
- .copilotKitSidebar [role="dialog"] > div:first-child > h2 {
2977
- display: none !important;
2978
- }
2979
-
2980
- /* Reduce vertical padding inside chat — right safe area for notch */
2981
- .copilotKitMessages {
2982
- padding: ${tokens.spacing.xs} calc(${tokens.spacing.sm} + var(--safe-area-right, 0px)) ${tokens.spacing.xs} ${tokens.spacing.sm} !important;
2983
- }
2984
-
2985
- .copilotKitMessage {
2986
- padding: ${tokens.spacing.xs} 0 !important;
2987
- margin: ${tokens.spacing.xs} 0 !important;
2988
- }
2989
-
2990
- /* Reduce gap between messages */
2991
- .copilotKitMessages > div {
2992
- gap: 0.25rem !important;
2993
- padding-bottom: 0;
2994
- }
2995
-
2996
- /* Compact input area — safe area padding for bottom gesture bar and right notch */
2997
- .copilotKitInput {
2998
- padding: ${tokens.spacing.xs} calc(${tokens.spacing.sm} + var(--safe-area-right, 0px)) calc(${tokens.spacing.xs} + var(--safe-area-bottom, 0px)) ${tokens.spacing.sm} !important;
2999
- }
3000
-
3001
- /* Compact suggested prompts in landscape */
3002
- div[role="list"][aria-label*="Suggested"] {
3003
- margin: 0 !important;
3004
- padding: 1px !important;
3005
- min-height: auto !important;
3006
- max-height: 32px !important;
3007
- }
3008
-
3009
- /* Suggestions container — safe area padding for bottom and right */
3010
- .copilotKitSidebar [role="dialog"] > div:last-child {
3011
- padding: 1px calc(1px + var(--safe-area-right, 0px)) calc(1px + var(--safe-area-bottom, 0px)) 1px !important;
2865
+ left: auto !important;
2866
+ width: 28rem !important;
2867
+ height: 100vh !important;
2868
+ max-width: 28rem !important;
2869
+ max-height: 100vh !important;
3012
2870
  }
3013
2871
  }
3014
2872
 
@@ -3028,131 +2886,106 @@ var GlobalSidebarStyles = styled9.createGlobalStyle`
3028
2886
  }
3029
2887
  }
3030
2888
 
3031
- /* Position chat button with safe area on landscape (right side for Android controls) */
3032
- @media (orientation: landscape) {
3033
- .copilotKitSidebarContentWrapper {
3034
- button[aria-label="Open chat"],
3035
- button[aria-label="Close chat"] {
3036
- bottom: calc(var(--safe-area-bottom, 0px) + 8px) !important;
3037
- right: calc(var(--safe-area-right, 0px) + 8px) !important;
3038
- z-index: 2000 !important;
3039
- }
2889
+ /* Override CopilotKit's default message styles with our custom components */
2890
+ .copilotKitSidebar {
2891
+ /* Reset all default CopilotKit message styling */
2892
+ [class*="copilotKitMessage"],
2893
+ [class*="Message-module"] {
2894
+ all: unset !important;
2895
+ display: contents !important;
3040
2896
  }
3041
- }
3042
-
3043
- /* Fix messages container background */
3044
- .copilotKitMessages {
3045
- background-color: transparent !important;
3046
- }
3047
-
3048
- /* Performance optimization for messages - no animations to reduce jitter during streaming */
3049
- .copilotKitMessage {
3050
- /* contain: content isolates layout/paint to this element */
3051
- contain: content;
3052
- }
3053
-
3054
- /* Override CopilotKit suggestions to be single-row with horizontal scroll */
3055
- div[role="list"][aria-label*="Suggested"] {
3056
- display: flex !important;
3057
- flex-wrap: nowrap !important; /* Force single row */
3058
- gap: ${tokens.spacing.sm} !important;
3059
- padding: ${tokens.spacing.xs} 0 !important;
3060
-
3061
- /* Horizontal scrolling */
3062
- overflow-x: auto !important;
3063
- overflow-y: hidden !important;
3064
-
3065
- /* Smooth scrolling */
3066
- -webkit-overflow-scrolling: touch;
3067
- scroll-behavior: smooth;
3068
-
3069
- /* Fixed height for one suggestion */
3070
- max-height: 40px !important;
3071
- min-height: 40px !important;
3072
- align-items: center !important;
3073
2897
 
3074
- /* Hide scrollbar */
3075
- scrollbar-width: none !important;
3076
- -ms-overflow-style: none !important;
3077
-
3078
- &::-webkit-scrollbar {
3079
- display: none !important;
2898
+ /* Ensure our custom UserMessage gradient pill shows through */
2899
+ button[role="presentation"] {
2900
+ all: revert !important;
2901
+ display: inline-flex !important;
3080
2902
  }
3081
- }
3082
2903
 
3083
- /* Ensure suggestion buttons don't wrap or shrink */
3084
- div[role="list"][aria-label*="Suggested"] button {
3085
- flex-shrink: 0 !important;
3086
- white-space: nowrap !important;
3087
- }
2904
+ /* Reset input styles to allow our custom ChatInput */
2905
+ [class*="Input-module"],
2906
+ [class*="copilotKitInput"] {
2907
+ all: unset !important;
2908
+ display: contents !important;
2909
+ }
3088
2910
 
3089
- /* Remove teal/cyan outline from all inputs */
3090
- .copilotKitSidebar input,
3091
- .copilotKitSidebar input:focus,
3092
- .copilotKitSidebar input:focus-visible,
3093
- .copilotKitSidebar textarea,
3094
- .copilotKitSidebar textarea:focus,
3095
- .copilotKitSidebar textarea:focus-visible {
3096
- outline: none !important;
3097
- outline-color: transparent !important;
3098
- box-shadow: none !important;
2911
+ /* Reset header styles */
2912
+ [class*="Header-module"],
2913
+ [class*="copilotKitHeader"] {
2914
+ all: unset !important;
2915
+ display: contents !important;
2916
+ }
3099
2917
  }
3100
2918
  `;
3101
2919
  var StyledChatButton = styled9__default.default.button`
3102
2920
  position: fixed;
3103
- bottom: calc(${tokens.spacing.sm} + var(--safe-area-bottom, 0px));
3104
- right: calc(${tokens.spacing.sm} + var(--safe-area-right, 0px));
2921
+ bottom: 8px;
2922
+ right: 8px;
3105
2923
  width: 36px;
3106
2924
  height: 36px;
3107
- border-radius: ${tokens.borderRadius.full};
2925
+ border-radius: 18px;
3108
2926
  border: none;
3109
2927
  background: linear-gradient(135deg, ${tokens.colors.primary} 0%, ${tokens.colors.accent} 100%);
3110
- box-shadow: ${({ $disabled }) => $disabled ? "none" : tokens.shadows.glow.primary};
2928
+ box-shadow: 0 4px 12px rgba(44, 176, 171, 0.4);
3111
2929
  display: flex;
3112
2930
  align-items: center;
3113
2931
  justify-content: center;
3114
- cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
3115
- opacity: ${({ $disabled }) => $disabled ? 0.5 : 1};
3116
- filter: ${({ $disabled }) => $disabled ? "grayscale(0.6)" : "none"};
3117
- z-index: ${tokens.zIndex.fixed};
3118
- transition: all ${tokens.transitions.fast};
2932
+ cursor: pointer;
2933
+ z-index: 1000;
2934
+ transition: all 0.2s ease;
3119
2935
 
3120
- &:hover:not([aria-disabled='true']) {
2936
+ &:hover {
3121
2937
  transform: scale(1.05);
3122
- box-shadow: ${tokens.shadows.glow.accent};
2938
+ box-shadow: 0 6px 16px rgba(44, 176, 171, 0.5);
3123
2939
  }
3124
2940
 
3125
- &:active:not([aria-disabled='true']) {
2941
+ &:active {
3126
2942
  transform: scale(0.95);
3127
2943
  }
3128
2944
 
3129
2945
  svg {
3130
2946
  width: 20px;
3131
2947
  height: 20px;
3132
- fill: ${tokens.colors.text.primary};
2948
+ fill: white;
3133
2949
  }
3134
2950
  `;
3135
- var WindowAdapter = (props) => {
3136
- return /* @__PURE__ */ jsxRuntime.jsx(Window, { children: props.children });
3137
- };
3138
- WindowAdapter.displayName = "WindowAdapter";
3139
- function createHeaderAdapter(onSetOpen) {
3140
- const HeaderAdapterWithClose = (_props) => {
3141
- const { setOpen } = useChatContext();
2951
+ var CustomCopilotSidebar = ({
2952
+ children,
2953
+ instructions = "You are a helpful AI assistant.",
2954
+ labels,
2955
+ icons,
2956
+ defaultOpen = false,
2957
+ clickOutsideToClose = true,
2958
+ hitEscapeToClose = true,
2959
+ shortcut = "/",
2960
+ onSetOpen,
2961
+ className
2962
+ }) => {
2963
+ const HeaderAdapter = (_props) => {
2964
+ const { setOpen } = reactUi.useChatContext();
3142
2965
  const handleClose = () => {
3143
2966
  setOpen(false);
3144
2967
  onSetOpen?.(false);
3145
2968
  };
3146
- return /* @__PURE__ */ jsxRuntime.jsx(Header, { title: "AI Assistant", onClose: handleClose });
2969
+ return /* @__PURE__ */ jsxRuntime.jsx(Header, { title: "AI Assistant", subtitle: "How can I help you today?", onClose: handleClose });
2970
+ };
2971
+ const WindowAdapter2 = (props) => {
2972
+ return /* @__PURE__ */ jsxRuntime.jsx(Window, { children: props.children });
2973
+ };
2974
+ const MessagesAdapter = (props) => {
2975
+ return /* @__PURE__ */ jsxRuntime.jsx(Messages, { children: props.messages.map((message, index) => /* @__PURE__ */ jsxRuntime.jsx(
2976
+ props.RenderMessage,
2977
+ {
2978
+ message,
2979
+ inProgress: props.inProgress,
2980
+ index,
2981
+ isCurrentMessage: index === props.messages.length - 1
2982
+ },
2983
+ message.id || `message-${index}`
2984
+ )) });
3147
2985
  };
3148
- HeaderAdapterWithClose.displayName = "HeaderAdapterWithClose";
3149
- return HeaderAdapterWithClose;
3150
- }
3151
- function createButtonAdapter(disabled, disabledReason, onSetOpen) {
3152
2986
  const CustomButton = (_props) => {
3153
- const { open, setOpen } = useChatContext();
2987
+ const { open, setOpen } = reactUi.useChatContext();
3154
2988
  const handleClick = () => {
3155
- if (disabled) return;
3156
2989
  const newOpenState = !open;
3157
2990
  setOpen(newOpenState);
3158
2991
  onSetOpen?.(newOpenState);
@@ -3161,11 +2994,8 @@ function createButtonAdapter(disabled, disabledReason, onSetOpen) {
3161
2994
  StyledChatButton,
3162
2995
  {
3163
2996
  onClick: handleClick,
3164
- "aria-label": disabled ? disabledReason : open ? "Close chat" : "Open chat",
3165
- "aria-disabled": disabled,
3166
- title: disabled ? disabledReason : void 0,
2997
+ "aria-label": open ? "Close chat" : "Open chat",
3167
2998
  type: "button",
3168
- $disabled: disabled,
3169
2999
  children: /* @__PURE__ */ jsxRuntime.jsxs(
3170
3000
  "svg",
3171
3001
  {
@@ -3175,7 +3005,7 @@ function createButtonAdapter(disabled, disabledReason, onSetOpen) {
3175
3005
  fill: "currentColor",
3176
3006
  xmlns: "http://www.w3.org/2000/svg",
3177
3007
  role: "img",
3178
- "aria-hidden": "true",
3008
+ "aria-label": "Chat icon",
3179
3009
  children: [
3180
3010
  /* @__PURE__ */ jsxRuntime.jsx("title", { children: "Chat" }),
3181
3011
  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z" })
@@ -3185,151 +3015,229 @@ function createButtonAdapter(disabled, disabledReason, onSetOpen) {
3185
3015
  }
3186
3016
  );
3187
3017
  };
3188
- CustomButton.displayName = "CustomButton";
3189
- return CustomButton;
3190
- }
3191
- function CustomCopilotSidebar({
3192
- children,
3193
- defaultOpen = false,
3194
- onSetOpen,
3195
- instructions,
3196
- className,
3197
- disabled = false,
3198
- disabledReason = "Start a free trial to enable AI chat",
3199
- onError,
3200
- renderError,
3201
- ThinkingIndicator,
3202
- ToolCallsComponent,
3203
- onReportIssue
3204
- }) {
3205
- const HeaderAdapterWithClose = React.useMemo(() => createHeaderAdapter(onSetOpen), [onSetOpen]);
3206
- const CustomButton = React.useMemo(
3207
- () => createButtonAdapter(disabled, disabledReason, onSetOpen),
3208
- [disabled, disabledReason, onSetOpen]
3209
- );
3210
- const AssistantMessageAdapterMemo = React.useMemo(
3211
- () => onReportIssue ? createAssistantMessageAdapterWithErrorReporting(
3212
- onReportIssue,
3213
- ThinkingIndicator) : ThinkingIndicator || ToolCallsComponent ? createAssistantMessageAdapter(ThinkingIndicator) : AssistantMessageAdapter,
3214
- [ThinkingIndicator, ToolCallsComponent, onReportIssue]
3215
- );
3216
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": "copilot-sidebar", children: [
3018
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
3217
3019
  /* @__PURE__ */ jsxRuntime.jsx(GlobalSidebarStyles, {}),
3218
3020
  /* @__PURE__ */ jsxRuntime.jsx(
3219
- v2.CopilotSidebar,
3021
+ reactUi.CopilotSidebar,
3220
3022
  {
3221
- AssistantMessage: AssistantMessageAdapterMemo,
3023
+ AssistantMessage: AssistantMessageAdapter,
3222
3024
  UserMessage: UserMessageAdapter,
3223
3025
  Input: InputAdapter,
3224
- Header: HeaderAdapterWithClose,
3225
- Window: WindowAdapter,
3026
+ Header: HeaderAdapter,
3027
+ Window: WindowAdapter2,
3028
+ Messages: MessagesAdapter,
3226
3029
  Button: CustomButton,
3227
3030
  instructions,
3228
3031
  labels: {
3229
3032
  title: "AI Assistant",
3230
- initial: "Hi! How can I help you today?"
3033
+ initial: "Hi! How can I help you today?",
3034
+ ...labels
3231
3035
  },
3036
+ icons,
3232
3037
  defaultOpen,
3233
- clickOutsideToClose: true,
3234
- hitEscapeToClose: true,
3038
+ clickOutsideToClose,
3039
+ hitEscapeToClose,
3040
+ shortcut,
3235
3041
  onSetOpen,
3236
- onError,
3237
- renderError,
3238
3042
  className,
3239
3043
  children
3240
3044
  }
3241
3045
  )
3242
3046
  ] });
3243
- }
3244
- CustomCopilotSidebar.displayName = "CustomCopilotSidebar";
3245
- var MessagesContainer = styled9__default.default.div`
3246
- display: flex;
3247
- flex-direction: column;
3248
- flex: 1;
3249
- overflow: hidden;
3250
- /* Gradient background - brand aligned */
3251
- background: linear-gradient(
3252
- to right bottom,
3253
- ${tokens.colors.background.dark},
3254
- ${tokens.colors.background.darker},
3255
- ${tokens.colors.background.darkest}
3256
- );
3257
- /* Minimal horizontal padding to maximize message width */
3258
- padding: ${tokens.spacing.sm} ${tokens.spacing.xs};
3259
- gap: ${tokens.spacing.sm};
3260
- box-sizing: border-box;
3261
-
3262
- /* Ensure proper scrolling behavior for child components */
3263
- position: relative;
3264
- min-height: 0;
3265
- `;
3266
- var Messages = ({
3267
- children,
3268
- className,
3269
- ariaLabel = "Messages"
3270
- }) => {
3271
- return /* @__PURE__ */ jsxRuntime.jsx(MessagesContainer, { className, role: "region", "aria-label": ariaLabel, children });
3272
3047
  };
3273
- Messages.displayName = "Messages";
3048
+ CustomCopilotSidebar.displayName = "CustomCopilotSidebar";
3274
3049
  var GlobalSidebarStyles2 = styled9.createGlobalStyle`
3275
- /* Override CopilotKit's default positioning - start off-screen */
3050
+ /* Override CopilotKit's content wrapper to respect safe areas in landscape */
3051
+ @media (orientation: landscape) {
3052
+ .copilotKitSidebarContentWrapper {
3053
+ right: var(--safe-area-right, 0px) !important;
3054
+ left: var(--safe-area-left, 0px) !important;
3055
+ }
3056
+ }
3057
+
3058
+ /* Override CopilotKit's default positioning - keep sidebar container in place */
3059
+ /* z-index must be higher than NavHorizontal (sticky: 1020) for button to show above nav */
3276
3060
  .copilotKitSidebar {
3277
3061
  position: fixed !important;
3278
- right: -100vw !important;
3279
- bottom: 0 !important;
3280
- transition: right 0.3s ease !important;
3062
+ top: calc(var(--safe-area-top, 0px) + 8px) !important;
3063
+ right: calc(var(--safe-area-right, 0px) + 8px) !important;
3064
+ bottom: calc(var(--safe-area-bottom, 0px) + 8px) !important;
3065
+ left: calc(var(--safe-area-left, 0px) + 8px) !important;
3066
+ width: auto !important;
3067
+ height: auto !important;
3068
+ pointer-events: none !important;
3069
+ z-index: ${tokens.zIndex.fixed} !important;
3281
3070
  }
3282
3071
 
3283
- /* Move sidebar container into view when expanded */
3072
+ /* Keep sidebar container always visible (the window inside will animate) */
3284
3073
  .copilotKitSidebarContentWrapper.sidebarExpanded .copilotKitSidebar {
3285
- right: 0 !important;
3074
+ pointer-events: auto !important;
3286
3075
  }
3287
3076
 
3288
- /* Mobile-first: Full viewport sidebar */
3289
- .copilotKitSidebar .copilotKitWindow {
3077
+ /* Mobile-first: Glassmorphism sidebar with rounded corners */
3078
+ /* Target the actual dialog element that gets rendered */
3079
+ .copilotKitSidebar [role="dialog"] {
3080
+ /* Override CopilotKit defaults for mobile */
3290
3081
  position: fixed !important;
3291
- top: 0 !important;
3292
- right: 0 !important;
3293
- bottom: 0 !important;
3294
- left: auto !important;
3295
- width: 100vw !important;
3296
- height: 100vh !important;
3297
- max-width: 100vw !important;
3298
- max-height: 100vh !important;
3082
+ /* TOP: Account for status bar safe area (Android notch/status bar) */
3083
+ top: calc(${tokens.spacing.sm} + var(--safe-area-top, 0px)) !important;
3084
+ /* RIGHT: Account for landscape notch on right side */
3085
+ right: calc(${tokens.spacing.sm} + var(--safe-area-right, 0px)) !important;
3086
+ /* BOTTOM: Account for horizontal navbar (52px) + safe area for Android nav buttons */
3087
+ bottom: calc(52px + ${tokens.spacing.sm} + var(--safe-area-bottom, 0px)) !important;
3088
+ /* LEFT: Account for landscape notch on left side */
3089
+ left: calc(${tokens.spacing.sm} + var(--safe-area-left, 0px)) !important;
3090
+ /* Let left + right define width, top + bottom define height — no explicit values needed */
3091
+ width: auto !important;
3092
+ height: auto !important;
3093
+ max-width: none !important;
3094
+ max-height: none !important;
3299
3095
  margin: 0 !important;
3300
- border-radius: 0 !important;
3301
- z-index: 1001 !important;
3096
+ border-radius: ${tokens.borderRadius.xl} !important;
3097
+
3098
+ /* Glassmorphism effect */
3099
+ background: ${tokens.colors.surface.glass} !important;
3100
+ box-shadow: ${tokens.shadows.lg} !important;
3101
+ backdrop-filter: blur(11.1px) !important;
3102
+ -webkit-backdrop-filter: blur(11.1px) !important;
3103
+ border: 1px solid ${tokens.colors.surface.glassBorder} !important;
3104
+
3105
+ /* Smooth slide transition */
3106
+ transition: transform 0.3s ease, visibility 0.3s ease, opacity 0.3s ease !important;
3107
+ z-index: ${tokens.zIndex.modal} !important;
3108
+ }
3109
+
3110
+ /* Hidden by default */
3111
+ .copilotKitSidebarContentWrapper:not(.sidebarExpanded) .copilotKitSidebar [role="dialog"] {
3112
+ transform: translateX(100%) !important;
3113
+ visibility: hidden !important;
3114
+ pointer-events: none !important;
3115
+ opacity: 0 !important;
3116
+ }
3117
+
3118
+ /* Visible when expanded */
3119
+ .copilotKitSidebarContentWrapper.sidebarExpanded .copilotKitSidebar [role="dialog"] {
3120
+ transform: translateX(0) !important;
3121
+ visibility: visible !important;
3122
+ pointer-events: auto !important;
3123
+ opacity: 1 !important;
3124
+ }
3125
+
3126
+ /* Desktop: Sidebar panel on the right with glassmorphism (640px = CopilotKit's breakpoint) */
3127
+ @media (min-width: ${tokens.breakpoints.mobile}px) {
3128
+ .copilotKitSidebar [role="dialog"] {
3129
+ inset: auto !important;
3130
+ /* TOP: Account for status bar safe area */
3131
+ top: calc(${tokens.spacing.sm} + var(--safe-area-top, 0px)) !important;
3132
+ /* RIGHT: Account for landscape notch on right side */
3133
+ right: calc(${tokens.spacing.sm} + var(--safe-area-right, 0px)) !important;
3134
+ /* BOTTOM: Account for horizontal navbar (52px) + safe area */
3135
+ bottom: calc(52px + ${tokens.spacing.sm} + var(--safe-area-bottom, 0px)) !important;
3136
+ left: auto !important;
3137
+ width: 28rem !important;
3138
+ /* Let top + bottom define height — no explicit value needed */
3139
+ height: auto !important;
3140
+ max-width: 28rem !important;
3141
+ max-height: none !important;
3142
+ }
3143
+ }
3144
+
3145
+ /* Mobile landscape: sidebar on right side, allow background interaction */
3146
+ @media (orientation: landscape) and (max-height: 500px) {
3147
+ /* Account for vertical nav (60px) in landscape */
3148
+ .copilotKitSidebarContentWrapper {
3149
+ left: 60px !important;
3150
+ width: calc(100% - 60px) !important;
3151
+ }
3152
+
3153
+ /* Sidebar container covers right portion — full height, no gaps */
3154
+ .copilotKitSidebar {
3155
+ top: 0 !important;
3156
+ bottom: 0 !important;
3157
+ right: 0 !important;
3158
+ left: 50vw !important;
3159
+ width: auto !important;
3160
+ height: 100vh !important;
3161
+ }
3162
+
3163
+ /* Offset the expanded sidebar wrapper to leave space for main content */
3164
+ .copilotKitSidebarContentWrapper.sidebarExpanded {
3165
+ margin-right: 30vw !important;
3166
+ }
3167
+
3168
+ .copilotKitSidebar [role="dialog"] {
3169
+ width: min(50vw, 22rem) !important;
3170
+ max-width: min(50vw, 22rem) !important;
3171
+ left: auto !important;
3172
+ /* Flush with right edge — safe area handled via internal padding */
3173
+ right: 0 !important;
3174
+ /* Fill ALL vertical space — overlay the bottom nav for maximum chat area */
3175
+ /* Keep top safe area so dialog doesn't go behind status bar (battery/wifi) */
3176
+ top: var(--safe-area-top, 0px) !important;
3177
+ bottom: 0 !important;
3178
+ /* Let top/bottom define height */
3179
+ height: auto !important;
3180
+ max-height: none !important;
3181
+ margin: 0 !important;
3182
+ /* Only round the left edges since right is flush with viewport */
3183
+ border-radius: 0 !important;
3184
+ border-top-left-radius: ${tokens.borderRadius.xl} !important;
3185
+ border-bottom-left-radius: ${tokens.borderRadius.xl} !important;
3186
+ }
3187
+
3188
+ /* Compact header in landscape - hide title text but keep close button */
3189
+ /* Safe area top padding applied here so content avoids status bar */
3190
+ .copilotKitSidebar [role="dialog"] header,
3191
+ .copilotKitSidebar [role="dialog"] [data-testid="chat-header"],
3192
+ .copilotKitSidebar [role="dialog"] > div:first-child {
3193
+ padding: 0.25rem 0.5rem 0.25rem !important;
3194
+ min-height: auto !important;
3195
+ height: auto !important;
3196
+ padding-right: calc(1.5rem + var(--safe-area-right, 0px)) !important;
3197
+ }
3198
+
3199
+ /* Hide the title text but keep close button visible */
3200
+ .copilotKitSidebar [role="dialog"] header h1,
3201
+ .copilotKitSidebar [role="dialog"] header h2,
3202
+ .copilotKitSidebar [role="dialog"] header span:not(:last-child),
3203
+ .copilotKitSidebar [role="dialog"] > div:first-child > span,
3204
+ .copilotKitSidebar [role="dialog"] > div:first-child > h1,
3205
+ .copilotKitSidebar [role="dialog"] > div:first-child > h2 {
3206
+ display: none !important;
3207
+ }
3208
+
3209
+ /* Reduce vertical padding inside chat — right safe area for notch */
3210
+ .copilotKitMessages {
3211
+ padding: ${tokens.spacing.xs} calc(${tokens.spacing.sm} + var(--safe-area-right, 0px)) ${tokens.spacing.xs} ${tokens.spacing.sm} !important;
3212
+ }
3213
+
3214
+ .copilotKitMessage {
3215
+ padding: ${tokens.spacing.xs} 0 !important;
3216
+ margin: ${tokens.spacing.xs} 0 !important;
3217
+ }
3302
3218
 
3303
- transform: translateX(100%) !important;
3304
- visibility: hidden !important;
3305
- pointer-events: none !important;
3306
- opacity: 0 !important;
3307
- display: none !important;
3219
+ /* Reduce gap between messages */
3220
+ .copilotKitMessages > div {
3221
+ gap: 0.25rem !important;
3222
+ padding-bottom: 0;
3223
+ }
3308
3224
 
3309
- transition: transform 0.3s ease, visibility 0.3s ease, opacity 0.3s ease !important;
3310
- }
3225
+ /* Compact input area safe area padding for bottom gesture bar and right notch */
3226
+ .copilotKitInput {
3227
+ padding: ${tokens.spacing.xs} calc(${tokens.spacing.sm} + var(--safe-area-right, 0px)) calc(${tokens.spacing.xs} + var(--safe-area-bottom, 0px)) ${tokens.spacing.sm} !important;
3228
+ }
3311
3229
 
3312
- /* When window has .open class (CopilotKit's native class), show it */
3313
- .copilotKitSidebar .copilotKitWindow.open {
3314
- display: flex !important;
3315
- transform: translateX(0) !important;
3316
- visibility: visible !important;
3317
- pointer-events: auto !important;
3318
- opacity: 1 !important;
3319
- }
3230
+ /* Compact suggested prompts in landscape */
3231
+ div[role="list"][aria-label*="Suggested"] {
3232
+ margin: 0 !important;
3233
+ padding: 1px !important;
3234
+ min-height: auto !important;
3235
+ max-height: 32px !important;
3236
+ }
3320
3237
 
3321
- /* Desktop: Sidebar panel on the right (640px = CopilotKit's breakpoint) */
3322
- @media (min-width: 640px) {
3323
- .copilotKitSidebar .copilotKitWindow {
3324
- inset: auto !important;
3325
- top: 0 !important;
3326
- right: 0 !important;
3327
- bottom: 0 !important;
3328
- left: auto !important;
3329
- width: 28rem !important;
3330
- height: 100vh !important;
3331
- max-width: 28rem !important;
3332
- max-height: 100vh !important;
3238
+ /* Suggestions container safe area padding for bottom and right */
3239
+ .copilotKitSidebar [role="dialog"] > div:last-child {
3240
+ padding: 1px calc(1px + var(--safe-area-right, 0px)) calc(1px + var(--safe-area-bottom, 0px)) 1px !important;
3333
3241
  }
3334
3242
  }
3335
3243
 
@@ -3349,106 +3257,131 @@ var GlobalSidebarStyles2 = styled9.createGlobalStyle`
3349
3257
  }
3350
3258
  }
3351
3259
 
3352
- /* Override CopilotKit's default message styles with our custom components */
3353
- .copilotKitSidebar {
3354
- /* Reset all default CopilotKit message styling */
3355
- [class*="copilotKitMessage"],
3356
- [class*="Message-module"] {
3357
- all: unset !important;
3358
- display: contents !important;
3260
+ /* Position chat button with safe area on landscape (right side for Android controls) */
3261
+ @media (orientation: landscape) {
3262
+ .copilotKitSidebarContentWrapper {
3263
+ button[aria-label="Open chat"],
3264
+ button[aria-label="Close chat"] {
3265
+ bottom: calc(var(--safe-area-bottom, 0px) + 8px) !important;
3266
+ right: calc(var(--safe-area-right, 0px) + 8px) !important;
3267
+ z-index: 2000 !important;
3268
+ }
3359
3269
  }
3270
+ }
3360
3271
 
3361
- /* Ensure our custom UserMessage gradient pill shows through */
3362
- button[role="presentation"] {
3363
- all: revert !important;
3364
- display: inline-flex !important;
3365
- }
3272
+ /* Fix messages container background */
3273
+ .copilotKitMessages {
3274
+ background-color: transparent !important;
3275
+ }
3366
3276
 
3367
- /* Reset input styles to allow our custom ChatInput */
3368
- [class*="Input-module"],
3369
- [class*="copilotKitInput"] {
3370
- all: unset !important;
3371
- display: contents !important;
3372
- }
3277
+ /* Performance optimization for messages - no animations to reduce jitter during streaming */
3278
+ .copilotKitMessage {
3279
+ /* contain: content isolates layout/paint to this element */
3280
+ contain: content;
3281
+ }
3373
3282
 
3374
- /* Reset header styles */
3375
- [class*="Header-module"],
3376
- [class*="copilotKitHeader"] {
3377
- all: unset !important;
3378
- display: contents !important;
3283
+ /* Override CopilotKit suggestions to be single-row with horizontal scroll */
3284
+ div[role="list"][aria-label*="Suggested"] {
3285
+ display: flex !important;
3286
+ flex-wrap: nowrap !important; /* Force single row */
3287
+ gap: ${tokens.spacing.sm} !important;
3288
+ padding: ${tokens.spacing.xs} 0 !important;
3289
+
3290
+ /* Horizontal scrolling */
3291
+ overflow-x: auto !important;
3292
+ overflow-y: hidden !important;
3293
+
3294
+ /* Smooth scrolling */
3295
+ -webkit-overflow-scrolling: touch;
3296
+ scroll-behavior: smooth;
3297
+
3298
+ /* Fixed height for one suggestion */
3299
+ max-height: 40px !important;
3300
+ min-height: 40px !important;
3301
+ align-items: center !important;
3302
+
3303
+ /* Hide scrollbar */
3304
+ scrollbar-width: none !important;
3305
+ -ms-overflow-style: none !important;
3306
+
3307
+ &::-webkit-scrollbar {
3308
+ display: none !important;
3379
3309
  }
3380
3310
  }
3311
+
3312
+ /* Ensure suggestion buttons don't wrap or shrink */
3313
+ div[role="list"][aria-label*="Suggested"] button {
3314
+ flex-shrink: 0 !important;
3315
+ white-space: nowrap !important;
3316
+ }
3317
+
3318
+ /* Remove teal/cyan outline from all inputs */
3319
+ .copilotKitSidebar input,
3320
+ .copilotKitSidebar input:focus,
3321
+ .copilotKitSidebar input:focus-visible,
3322
+ .copilotKitSidebar textarea,
3323
+ .copilotKitSidebar textarea:focus,
3324
+ .copilotKitSidebar textarea:focus-visible {
3325
+ outline: none !important;
3326
+ outline-color: transparent !important;
3327
+ box-shadow: none !important;
3328
+ }
3381
3329
  `;
3382
3330
  var StyledChatButton2 = styled9__default.default.button`
3383
3331
  position: fixed;
3384
- bottom: 8px;
3385
- right: 8px;
3332
+ bottom: calc(${tokens.spacing.sm} + var(--safe-area-bottom, 0px));
3333
+ right: calc(${tokens.spacing.sm} + var(--safe-area-right, 0px));
3386
3334
  width: 36px;
3387
3335
  height: 36px;
3388
- border-radius: 18px;
3336
+ border-radius: ${tokens.borderRadius.full};
3389
3337
  border: none;
3390
3338
  background: linear-gradient(135deg, ${tokens.colors.primary} 0%, ${tokens.colors.accent} 100%);
3391
- box-shadow: 0 4px 12px rgba(44, 176, 171, 0.4);
3339
+ box-shadow: ${({ $disabled }) => $disabled ? "none" : tokens.shadows.glow.primary};
3392
3340
  display: flex;
3393
3341
  align-items: center;
3394
3342
  justify-content: center;
3395
- cursor: pointer;
3396
- z-index: 1000;
3397
- transition: all 0.2s ease;
3343
+ cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
3344
+ opacity: ${({ $disabled }) => $disabled ? 0.5 : 1};
3345
+ filter: ${({ $disabled }) => $disabled ? "grayscale(0.6)" : "none"};
3346
+ z-index: ${tokens.zIndex.fixed};
3347
+ transition: all ${tokens.transitions.fast};
3398
3348
 
3399
- &:hover {
3349
+ &:hover:not([aria-disabled='true']) {
3400
3350
  transform: scale(1.05);
3401
- box-shadow: 0 6px 16px rgba(44, 176, 171, 0.5);
3351
+ box-shadow: ${tokens.shadows.glow.accent};
3402
3352
  }
3403
3353
 
3404
- &:active {
3354
+ &:active:not([aria-disabled='true']) {
3405
3355
  transform: scale(0.95);
3406
3356
  }
3407
3357
 
3408
3358
  svg {
3409
3359
  width: 20px;
3410
3360
  height: 20px;
3411
- fill: white;
3361
+ fill: ${tokens.colors.text.primary};
3412
3362
  }
3413
3363
  `;
3414
- var CustomCopilotSidebar2 = ({
3415
- children,
3416
- instructions = "You are a helpful AI assistant.",
3417
- labels,
3418
- icons,
3419
- defaultOpen = false,
3420
- clickOutsideToClose = true,
3421
- hitEscapeToClose = true,
3422
- shortcut = "/",
3423
- onSetOpen,
3424
- className
3425
- }) => {
3426
- const HeaderAdapter = (_props) => {
3427
- const { setOpen } = useChatContext();
3364
+ var WindowAdapter = (props) => {
3365
+ return /* @__PURE__ */ jsxRuntime.jsx(Window, { children: props.children });
3366
+ };
3367
+ WindowAdapter.displayName = "WindowAdapter";
3368
+ function createHeaderAdapter(onSetOpen) {
3369
+ const HeaderAdapterWithClose = (_props) => {
3370
+ const { setOpen } = reactUi.useChatContext();
3428
3371
  const handleClose = () => {
3429
3372
  setOpen(false);
3430
3373
  onSetOpen?.(false);
3431
3374
  };
3432
- return /* @__PURE__ */ jsxRuntime.jsx(Header, { title: "AI Assistant", subtitle: "How can I help you today?", onClose: handleClose });
3433
- };
3434
- const WindowAdapter2 = (props) => {
3435
- return /* @__PURE__ */ jsxRuntime.jsx(Window, { children: props.children });
3436
- };
3437
- const MessagesAdapter = (props) => {
3438
- return /* @__PURE__ */ jsxRuntime.jsx(Messages, { children: props.messages.map((message, index) => /* @__PURE__ */ jsxRuntime.jsx(
3439
- props.RenderMessage,
3440
- {
3441
- message,
3442
- inProgress: props.inProgress,
3443
- index,
3444
- isCurrentMessage: index === props.messages.length - 1
3445
- },
3446
- message.id || `message-${index}`
3447
- )) });
3375
+ return /* @__PURE__ */ jsxRuntime.jsx(Header, { title: "AI Assistant", onClose: handleClose });
3448
3376
  };
3377
+ HeaderAdapterWithClose.displayName = "HeaderAdapterWithClose";
3378
+ return HeaderAdapterWithClose;
3379
+ }
3380
+ function createButtonAdapter(disabled, disabledReason, onSetOpen) {
3449
3381
  const CustomButton = (_props) => {
3450
- const { open, setOpen } = useChatContext();
3382
+ const { open, setOpen } = reactUi.useChatContext();
3451
3383
  const handleClick = () => {
3384
+ if (disabled) return;
3452
3385
  const newOpenState = !open;
3453
3386
  setOpen(newOpenState);
3454
3387
  onSetOpen?.(newOpenState);
@@ -3457,8 +3390,11 @@ var CustomCopilotSidebar2 = ({
3457
3390
  StyledChatButton2,
3458
3391
  {
3459
3392
  onClick: handleClick,
3460
- "aria-label": open ? "Close chat" : "Open chat",
3393
+ "aria-label": disabled ? disabledReason : open ? "Close chat" : "Open chat",
3394
+ "aria-disabled": disabled,
3395
+ title: disabled ? disabledReason : void 0,
3461
3396
  type: "button",
3397
+ $disabled: disabled,
3462
3398
  children: /* @__PURE__ */ jsxRuntime.jsxs(
3463
3399
  "svg",
3464
3400
  {
@@ -3468,7 +3404,7 @@ var CustomCopilotSidebar2 = ({
3468
3404
  fill: "currentColor",
3469
3405
  xmlns: "http://www.w3.org/2000/svg",
3470
3406
  role: "img",
3471
- "aria-label": "Chat icon",
3407
+ "aria-hidden": "true",
3472
3408
  children: [
3473
3409
  /* @__PURE__ */ jsxRuntime.jsx("title", { children: "Chat" }),
3474
3410
  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z" })
@@ -3478,36 +3414,62 @@ var CustomCopilotSidebar2 = ({
3478
3414
  }
3479
3415
  );
3480
3416
  };
3481
- return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
3417
+ CustomButton.displayName = "CustomButton";
3418
+ return CustomButton;
3419
+ }
3420
+ function CustomCopilotSidebar2({
3421
+ children,
3422
+ defaultOpen = false,
3423
+ onSetOpen,
3424
+ instructions,
3425
+ className,
3426
+ disabled = false,
3427
+ disabledReason = "Start a free trial to enable AI chat",
3428
+ onError,
3429
+ renderError,
3430
+ ThinkingIndicator,
3431
+ ToolCallsComponent,
3432
+ onReportIssue
3433
+ }) {
3434
+ const HeaderAdapterWithClose = React.useMemo(() => createHeaderAdapter(onSetOpen), [onSetOpen]);
3435
+ const CustomButton = React.useMemo(
3436
+ () => createButtonAdapter(disabled, disabledReason, onSetOpen),
3437
+ [disabled, disabledReason, onSetOpen]
3438
+ );
3439
+ const AssistantMessageAdapterMemo = React.useMemo(
3440
+ () => onReportIssue ? createAssistantMessageAdapterWithErrorReporting(
3441
+ onReportIssue,
3442
+ ThinkingIndicator) : ThinkingIndicator || ToolCallsComponent ? createAssistantMessageAdapter(ThinkingIndicator) : AssistantMessageAdapter,
3443
+ [ThinkingIndicator, ToolCallsComponent, onReportIssue]
3444
+ );
3445
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": "copilot-sidebar", children: [
3482
3446
  /* @__PURE__ */ jsxRuntime.jsx(GlobalSidebarStyles2, {}),
3483
3447
  /* @__PURE__ */ jsxRuntime.jsx(
3484
- v2.CopilotSidebar,
3448
+ reactUi.CopilotSidebar,
3485
3449
  {
3486
- AssistantMessage: AssistantMessageAdapter,
3450
+ AssistantMessage: AssistantMessageAdapterMemo,
3487
3451
  UserMessage: UserMessageAdapter,
3488
3452
  Input: InputAdapter,
3489
- Header: HeaderAdapter,
3490
- Window: WindowAdapter2,
3491
- Messages: MessagesAdapter,
3453
+ Header: HeaderAdapterWithClose,
3454
+ Window: WindowAdapter,
3492
3455
  Button: CustomButton,
3493
3456
  instructions,
3494
3457
  labels: {
3495
3458
  title: "AI Assistant",
3496
- initial: "Hi! How can I help you today?",
3497
- ...labels
3459
+ initial: "Hi! How can I help you today?"
3498
3460
  },
3499
- icons,
3500
3461
  defaultOpen,
3501
- clickOutsideToClose,
3502
- hitEscapeToClose,
3503
- shortcut,
3462
+ clickOutsideToClose: true,
3463
+ hitEscapeToClose: true,
3504
3464
  onSetOpen,
3465
+ onError,
3466
+ renderError,
3505
3467
  className,
3506
3468
  children
3507
3469
  }
3508
3470
  )
3509
3471
  ] });
3510
- };
3472
+ }
3511
3473
  CustomCopilotSidebar2.displayName = "CustomCopilotSidebar";
3512
3474
  var FooterContainer = styled9__default.default.footer`
3513
3475
  display: flex;
@@ -4319,19 +4281,23 @@ function SuggestionChip({ suggestion, onSelect }) {
4319
4281
  }
4320
4282
  Suggestions.displayName = "Suggestions";
4321
4283
 
4284
+ Object.defineProperty(exports, "useChatContext", {
4285
+ enumerable: true,
4286
+ get: function () { return reactUi.useChatContext; }
4287
+ });
4322
4288
  exports.ActionExecutionAdapter = ActionExecutionAdapter;
4323
4289
  exports.Actions = Actions;
4324
4290
  exports.AgentState = AgentState;
4325
4291
  exports.AssistantMessage = AssistantMessage;
4326
4292
  exports.AssistantMessageAdapter = AssistantMessageAdapter;
4327
4293
  exports.Button = Button;
4328
- exports.CustomCopilotSidebar = CustomCopilotSidebar;
4294
+ exports.CustomCopilotSidebar = CustomCopilotSidebar2;
4329
4295
  exports.FileAttachment = FileAttachment;
4330
4296
  exports.Footer = Footer;
4331
4297
  exports.Header = Header;
4332
4298
  exports.Input = Input;
4333
4299
  exports.InputAdapter = InputAdapter;
4334
- exports.IntegratedSidebar = CustomCopilotSidebar2;
4300
+ exports.IntegratedSidebar = CustomCopilotSidebar;
4335
4301
  exports.Messages = Messages;
4336
4302
  exports.MessagesList = MessagesList;
4337
4303
  exports.MessagesListContainer = MessagesListContainer;
@@ -4346,6 +4312,5 @@ exports.UserMessageAdapter = UserMessageAdapter;
4346
4312
  exports.Window = Window;
4347
4313
  exports.clearToolCalls = clearToolCalls;
4348
4314
  exports.registerToolCall = registerToolCall;
4349
- exports.useChatContext = useChatContext;
4350
4315
  //# sourceMappingURL=index.cjs.map
4351
4316
  //# sourceMappingURL=index.cjs.map