@agentiffai/design 1.4.1 → 1.4.3

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,8 +4,7 @@ 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 reactCore = require('@copilotkit/react-core');
8
- var reactUi = require('@copilotkit/react-ui');
7
+ var v2 = require('@copilotkit/react-core/v2');
9
8
  var textfield = require('@react-aria/textfield');
10
9
 
11
10
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -13,7 +12,12 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
13
12
  var React__default = /*#__PURE__*/_interopDefault(React);
14
13
  var styled9__default = /*#__PURE__*/_interopDefault(styled9);
15
14
 
16
- // src/components/copilotkit/Button/Button.tsx
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
+ });
17
21
 
18
22
  // src/theme/tokens.ts
19
23
  var tokens = {
@@ -1420,6 +1424,22 @@ var AssistantMessageBase = ({
1420
1424
  };
1421
1425
  var AssistantMessage = React.memo(AssistantMessageBase);
1422
1426
  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
+ }
1423
1443
  var REGISTRY_KEY = "__agentiffai_tool_call_registry__";
1424
1444
  var TOOL_CALL_TTL_MS = 5 * 60 * 1e3;
1425
1445
  function getRegistryMap() {
@@ -1694,7 +1714,7 @@ function createAssistantMessageAdapterWithErrorReporting(onReportIssue, Thinking
1694
1714
  isGenerating
1695
1715
  }) => {
1696
1716
  const lastGenerativeUIRef = React.useRef(null);
1697
- const { visibleMessages } = reactCore.useCopilotChat();
1717
+ const visibleMessages = useVisibleMessages();
1698
1718
  const rawContent = Array.isArray(message?.content) ? message.content.join("") : message?.content || "";
1699
1719
  const content = stripToolCallMarkers(rawContent);
1700
1720
  const toolCallNames = React.useMemo(() => {
@@ -2328,6 +2348,24 @@ var UserMessageAdapterBase = ({ message, ImageRenderer }) => {
2328
2348
  };
2329
2349
  var UserMessageAdapter = React.memo(UserMessageAdapterBase);
2330
2350
  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
+ }
2331
2369
  var pulse3 = styled9.keyframes`
2332
2370
  0%, 100% {
2333
2371
  opacity: 1;
@@ -2686,35 +2724,6 @@ var Header = ({
2686
2724
  ] });
2687
2725
  };
2688
2726
  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";
2718
2727
  var WindowContainer = styled9__default.default.div`
2719
2728
  display: flex;
2720
2729
  flex-direction: column;
@@ -2809,64 +2818,197 @@ var Window = ({
2809
2818
  };
2810
2819
  Window.displayName = "Window";
2811
2820
  var GlobalSidebarStyles = styled9.createGlobalStyle`
2812
- /* Override CopilotKit's default positioning - start off-screen */
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 */
2813
2831
  .copilotKitSidebar {
2814
2832
  position: fixed !important;
2815
- right: -100vw !important;
2816
- bottom: 0 !important;
2817
- transition: right 0.3s ease !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;
2818
2841
  }
2819
2842
 
2820
- /* Move sidebar container into view when expanded */
2843
+ /* Keep sidebar container always visible (the window inside will animate) */
2821
2844
  .copilotKitSidebarContentWrapper.sidebarExpanded .copilotKitSidebar {
2822
- right: 0 !important;
2845
+ pointer-events: auto !important;
2823
2846
  }
2824
2847
 
2825
- /* Mobile-first: Full viewport sidebar */
2826
- .copilotKitSidebar .copilotKitWindow {
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 */
2827
2852
  position: fixed !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;
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;
2836
2866
  margin: 0 !important;
2837
- border-radius: 0 !important;
2838
- z-index: 1001 !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
+ }
2839
2880
 
2881
+ /* Hidden by default */
2882
+ .copilotKitSidebarContentWrapper:not(.sidebarExpanded) .copilotKitSidebar [role="dialog"] {
2840
2883
  transform: translateX(100%) !important;
2841
2884
  visibility: hidden !important;
2842
2885
  pointer-events: none !important;
2843
2886
  opacity: 0 !important;
2844
- display: none !important;
2845
-
2846
- transition: transform 0.3s ease, visibility 0.3s ease, opacity 0.3s ease !important;
2847
2887
  }
2848
2888
 
2849
- /* When window has .open class (CopilotKit's native class), show it */
2850
- .copilotKitSidebar .copilotKitWindow.open {
2851
- display: flex !important;
2889
+ /* Visible when expanded */
2890
+ .copilotKitSidebarContentWrapper.sidebarExpanded .copilotKitSidebar [role="dialog"] {
2852
2891
  transform: translateX(0) !important;
2853
2892
  visibility: visible !important;
2854
2893
  pointer-events: auto !important;
2855
2894
  opacity: 1 !important;
2856
2895
  }
2857
2896
 
2858
- /* Desktop: Sidebar panel on the right (640px = CopilotKit's breakpoint) */
2859
- @media (min-width: 640px) {
2860
- .copilotKitSidebar .copilotKitWindow {
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"] {
2861
2900
  inset: auto !important;
2862
- top: 0 !important;
2863
- right: 0 !important;
2864
- bottom: 0 !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;
2865
2907
  left: auto !important;
2866
2908
  width: 28rem !important;
2867
- height: 100vh !important;
2909
+ /* Let top + bottom define height no explicit value needed */
2910
+ height: auto !important;
2868
2911
  max-width: 28rem !important;
2869
- max-height: 100vh !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
+ 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
+ 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
+ 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;
2870
3012
  }
2871
3013
  }
2872
3014
 
@@ -2886,106 +3028,131 @@ var GlobalSidebarStyles = styled9.createGlobalStyle`
2886
3028
  }
2887
3029
  }
2888
3030
 
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;
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
+ }
2896
3040
  }
3041
+ }
2897
3042
 
2898
- /* Ensure our custom UserMessage gradient pill shows through */
2899
- button[role="presentation"] {
2900
- all: revert !important;
2901
- display: inline-flex !important;
2902
- }
3043
+ /* Fix messages container background */
3044
+ .copilotKitMessages {
3045
+ background-color: transparent !important;
3046
+ }
2903
3047
 
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
- }
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
+ }
2910
3053
 
2911
- /* Reset header styles */
2912
- [class*="Header-module"],
2913
- [class*="copilotKitHeader"] {
2914
- all: unset !important;
2915
- display: contents !important;
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
+
3074
+ /* Hide scrollbar */
3075
+ scrollbar-width: none !important;
3076
+ -ms-overflow-style: none !important;
3077
+
3078
+ &::-webkit-scrollbar {
3079
+ display: none !important;
2916
3080
  }
2917
3081
  }
3082
+
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
+ }
3088
+
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;
3099
+ }
2918
3100
  `;
2919
3101
  var StyledChatButton = styled9__default.default.button`
2920
3102
  position: fixed;
2921
- bottom: 8px;
2922
- right: 8px;
3103
+ bottom: calc(${tokens.spacing.sm} + var(--safe-area-bottom, 0px));
3104
+ right: calc(${tokens.spacing.sm} + var(--safe-area-right, 0px));
2923
3105
  width: 36px;
2924
3106
  height: 36px;
2925
- border-radius: 18px;
3107
+ border-radius: ${tokens.borderRadius.full};
2926
3108
  border: none;
2927
3109
  background: linear-gradient(135deg, ${tokens.colors.primary} 0%, ${tokens.colors.accent} 100%);
2928
- box-shadow: 0 4px 12px rgba(44, 176, 171, 0.4);
3110
+ box-shadow: ${({ $disabled }) => $disabled ? "none" : tokens.shadows.glow.primary};
2929
3111
  display: flex;
2930
3112
  align-items: center;
2931
3113
  justify-content: center;
2932
- cursor: pointer;
2933
- z-index: 1000;
2934
- transition: all 0.2s ease;
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};
2935
3119
 
2936
- &:hover {
3120
+ &:hover:not([aria-disabled='true']) {
2937
3121
  transform: scale(1.05);
2938
- box-shadow: 0 6px 16px rgba(44, 176, 171, 0.5);
3122
+ box-shadow: ${tokens.shadows.glow.accent};
2939
3123
  }
2940
3124
 
2941
- &:active {
3125
+ &:active:not([aria-disabled='true']) {
2942
3126
  transform: scale(0.95);
2943
3127
  }
2944
3128
 
2945
3129
  svg {
2946
3130
  width: 20px;
2947
3131
  height: 20px;
2948
- fill: white;
3132
+ fill: ${tokens.colors.text.primary};
2949
3133
  }
2950
3134
  `;
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();
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();
2965
3142
  const handleClose = () => {
2966
3143
  setOpen(false);
2967
3144
  onSetOpen?.(false);
2968
3145
  };
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
- )) });
3146
+ return /* @__PURE__ */ jsxRuntime.jsx(Header, { title: "AI Assistant", onClose: handleClose });
2985
3147
  };
3148
+ HeaderAdapterWithClose.displayName = "HeaderAdapterWithClose";
3149
+ return HeaderAdapterWithClose;
3150
+ }
3151
+ function createButtonAdapter(disabled, disabledReason, onSetOpen) {
2986
3152
  const CustomButton = (_props) => {
2987
- const { open, setOpen } = reactUi.useChatContext();
3153
+ const { open, setOpen } = useChatContext();
2988
3154
  const handleClick = () => {
3155
+ if (disabled) return;
2989
3156
  const newOpenState = !open;
2990
3157
  setOpen(newOpenState);
2991
3158
  onSetOpen?.(newOpenState);
@@ -2994,8 +3161,11 @@ var CustomCopilotSidebar = ({
2994
3161
  StyledChatButton,
2995
3162
  {
2996
3163
  onClick: handleClick,
2997
- "aria-label": open ? "Close chat" : "Open chat",
3164
+ "aria-label": disabled ? disabledReason : open ? "Close chat" : "Open chat",
3165
+ "aria-disabled": disabled,
3166
+ title: disabled ? disabledReason : void 0,
2998
3167
  type: "button",
3168
+ $disabled: disabled,
2999
3169
  children: /* @__PURE__ */ jsxRuntime.jsxs(
3000
3170
  "svg",
3001
3171
  {
@@ -3005,7 +3175,7 @@ var CustomCopilotSidebar = ({
3005
3175
  fill: "currentColor",
3006
3176
  xmlns: "http://www.w3.org/2000/svg",
3007
3177
  role: "img",
3008
- "aria-label": "Chat icon",
3178
+ "aria-hidden": "true",
3009
3179
  children: [
3010
3180
  /* @__PURE__ */ jsxRuntime.jsx("title", { children: "Chat" }),
3011
3181
  /* @__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" })
@@ -3015,229 +3185,151 @@ var CustomCopilotSidebar = ({
3015
3185
  }
3016
3186
  );
3017
3187
  };
3018
- return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
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: [
3019
3217
  /* @__PURE__ */ jsxRuntime.jsx(GlobalSidebarStyles, {}),
3020
3218
  /* @__PURE__ */ jsxRuntime.jsx(
3021
- reactUi.CopilotSidebar,
3219
+ v2.CopilotSidebar,
3022
3220
  {
3023
- AssistantMessage: AssistantMessageAdapter,
3221
+ AssistantMessage: AssistantMessageAdapterMemo,
3024
3222
  UserMessage: UserMessageAdapter,
3025
3223
  Input: InputAdapter,
3026
- Header: HeaderAdapter,
3027
- Window: WindowAdapter2,
3028
- Messages: MessagesAdapter,
3224
+ Header: HeaderAdapterWithClose,
3225
+ Window: WindowAdapter,
3029
3226
  Button: CustomButton,
3030
3227
  instructions,
3031
3228
  labels: {
3032
3229
  title: "AI Assistant",
3033
- initial: "Hi! How can I help you today?",
3034
- ...labels
3230
+ initial: "Hi! How can I help you today?"
3035
3231
  },
3036
- icons,
3037
3232
  defaultOpen,
3038
- clickOutsideToClose,
3039
- hitEscapeToClose,
3040
- shortcut,
3233
+ clickOutsideToClose: true,
3234
+ hitEscapeToClose: true,
3041
3235
  onSetOpen,
3236
+ onError,
3237
+ renderError,
3042
3238
  className,
3043
3239
  children
3044
3240
  }
3045
3241
  )
3046
3242
  ] });
3047
- };
3243
+ }
3048
3244
  CustomCopilotSidebar.displayName = "CustomCopilotSidebar";
3049
- var GlobalSidebarStyles2 = styled9.createGlobalStyle`
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
- }
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;
3057
3261
 
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 */
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
+ };
3273
+ Messages.displayName = "Messages";
3274
+ var GlobalSidebarStyles2 = styled9.createGlobalStyle`
3275
+ /* Override CopilotKit's default positioning - start off-screen */
3060
3276
  .copilotKitSidebar {
3061
3277
  position: fixed !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;
3278
+ right: -100vw !important;
3279
+ bottom: 0 !important;
3280
+ transition: right 0.3s ease !important;
3070
3281
  }
3071
3282
 
3072
- /* Keep sidebar container always visible (the window inside will animate) */
3283
+ /* Move sidebar container into view when expanded */
3073
3284
  .copilotKitSidebarContentWrapper.sidebarExpanded .copilotKitSidebar {
3074
- pointer-events: auto !important;
3285
+ right: 0 !important;
3075
3286
  }
3076
3287
 
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 */
3288
+ /* Mobile-first: Full viewport sidebar */
3289
+ .copilotKitSidebar .copilotKitWindow {
3081
3290
  position: fixed !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;
3095
- margin: 0 !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
- }
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;
3299
+ margin: 0 !important;
3300
+ border-radius: 0 !important;
3301
+ z-index: 1001 !important;
3218
3302
 
3219
- /* Reduce gap between messages */
3220
- .copilotKitMessages > div {
3221
- gap: 0.25rem !important;
3222
- padding-bottom: 0;
3223
- }
3303
+ transform: translateX(100%) !important;
3304
+ visibility: hidden !important;
3305
+ pointer-events: none !important;
3306
+ opacity: 0 !important;
3307
+ display: none !important;
3224
3308
 
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
- }
3309
+ transition: transform 0.3s ease, visibility 0.3s ease, opacity 0.3s ease !important;
3310
+ }
3229
3311
 
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
- }
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
+ }
3237
3320
 
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;
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;
3241
3333
  }
3242
3334
  }
3243
3335
 
@@ -3257,131 +3349,106 @@ var GlobalSidebarStyles2 = styled9.createGlobalStyle`
3257
3349
  }
3258
3350
  }
3259
3351
 
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
- }
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;
3269
3359
  }
3270
- }
3271
-
3272
- /* Fix messages container background */
3273
- .copilotKitMessages {
3274
- background-color: transparent !important;
3275
- }
3276
-
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
- }
3282
-
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
3360
 
3307
- &::-webkit-scrollbar {
3308
- display: none !important;
3361
+ /* Ensure our custom UserMessage gradient pill shows through */
3362
+ button[role="presentation"] {
3363
+ all: revert !important;
3364
+ display: inline-flex !important;
3309
3365
  }
3310
- }
3311
3366
 
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
- }
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
+ }
3317
3373
 
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;
3374
+ /* Reset header styles */
3375
+ [class*="Header-module"],
3376
+ [class*="copilotKitHeader"] {
3377
+ all: unset !important;
3378
+ display: contents !important;
3379
+ }
3328
3380
  }
3329
3381
  `;
3330
3382
  var StyledChatButton2 = styled9__default.default.button`
3331
3383
  position: fixed;
3332
- bottom: calc(${tokens.spacing.sm} + var(--safe-area-bottom, 0px));
3333
- right: calc(${tokens.spacing.sm} + var(--safe-area-right, 0px));
3384
+ bottom: 8px;
3385
+ right: 8px;
3334
3386
  width: 36px;
3335
3387
  height: 36px;
3336
- border-radius: ${tokens.borderRadius.full};
3388
+ border-radius: 18px;
3337
3389
  border: none;
3338
3390
  background: linear-gradient(135deg, ${tokens.colors.primary} 0%, ${tokens.colors.accent} 100%);
3339
- box-shadow: ${({ $disabled }) => $disabled ? "none" : tokens.shadows.glow.primary};
3391
+ box-shadow: 0 4px 12px rgba(44, 176, 171, 0.4);
3340
3392
  display: flex;
3341
3393
  align-items: center;
3342
3394
  justify-content: center;
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};
3395
+ cursor: pointer;
3396
+ z-index: 1000;
3397
+ transition: all 0.2s ease;
3348
3398
 
3349
- &:hover:not([aria-disabled='true']) {
3399
+ &:hover {
3350
3400
  transform: scale(1.05);
3351
- box-shadow: ${tokens.shadows.glow.accent};
3401
+ box-shadow: 0 6px 16px rgba(44, 176, 171, 0.5);
3352
3402
  }
3353
3403
 
3354
- &:active:not([aria-disabled='true']) {
3404
+ &:active {
3355
3405
  transform: scale(0.95);
3356
3406
  }
3357
3407
 
3358
3408
  svg {
3359
3409
  width: 20px;
3360
3410
  height: 20px;
3361
- fill: ${tokens.colors.text.primary};
3411
+ fill: white;
3362
3412
  }
3363
3413
  `;
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();
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();
3371
3428
  const handleClose = () => {
3372
3429
  setOpen(false);
3373
3430
  onSetOpen?.(false);
3374
3431
  };
3375
- return /* @__PURE__ */ jsxRuntime.jsx(Header, { title: "AI Assistant", onClose: handleClose });
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
+ )) });
3376
3448
  };
3377
- HeaderAdapterWithClose.displayName = "HeaderAdapterWithClose";
3378
- return HeaderAdapterWithClose;
3379
- }
3380
- function createButtonAdapter(disabled, disabledReason, onSetOpen) {
3381
3449
  const CustomButton = (_props) => {
3382
- const { open, setOpen } = reactUi.useChatContext();
3450
+ const { open, setOpen } = useChatContext();
3383
3451
  const handleClick = () => {
3384
- if (disabled) return;
3385
3452
  const newOpenState = !open;
3386
3453
  setOpen(newOpenState);
3387
3454
  onSetOpen?.(newOpenState);
@@ -3390,11 +3457,8 @@ function createButtonAdapter(disabled, disabledReason, onSetOpen) {
3390
3457
  StyledChatButton2,
3391
3458
  {
3392
3459
  onClick: handleClick,
3393
- "aria-label": disabled ? disabledReason : open ? "Close chat" : "Open chat",
3394
- "aria-disabled": disabled,
3395
- title: disabled ? disabledReason : void 0,
3460
+ "aria-label": open ? "Close chat" : "Open chat",
3396
3461
  type: "button",
3397
- $disabled: disabled,
3398
3462
  children: /* @__PURE__ */ jsxRuntime.jsxs(
3399
3463
  "svg",
3400
3464
  {
@@ -3404,7 +3468,7 @@ function createButtonAdapter(disabled, disabledReason, onSetOpen) {
3404
3468
  fill: "currentColor",
3405
3469
  xmlns: "http://www.w3.org/2000/svg",
3406
3470
  role: "img",
3407
- "aria-hidden": "true",
3471
+ "aria-label": "Chat icon",
3408
3472
  children: [
3409
3473
  /* @__PURE__ */ jsxRuntime.jsx("title", { children: "Chat" }),
3410
3474
  /* @__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" })
@@ -3414,62 +3478,36 @@ function createButtonAdapter(disabled, disabledReason, onSetOpen) {
3414
3478
  }
3415
3479
  );
3416
3480
  };
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: [
3481
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
3446
3482
  /* @__PURE__ */ jsxRuntime.jsx(GlobalSidebarStyles2, {}),
3447
3483
  /* @__PURE__ */ jsxRuntime.jsx(
3448
- reactUi.CopilotSidebar,
3484
+ v2.CopilotSidebar,
3449
3485
  {
3450
- AssistantMessage: AssistantMessageAdapterMemo,
3486
+ AssistantMessage: AssistantMessageAdapter,
3451
3487
  UserMessage: UserMessageAdapter,
3452
3488
  Input: InputAdapter,
3453
- Header: HeaderAdapterWithClose,
3454
- Window: WindowAdapter,
3489
+ Header: HeaderAdapter,
3490
+ Window: WindowAdapter2,
3491
+ Messages: MessagesAdapter,
3455
3492
  Button: CustomButton,
3456
3493
  instructions,
3457
3494
  labels: {
3458
3495
  title: "AI Assistant",
3459
- initial: "Hi! How can I help you today?"
3496
+ initial: "Hi! How can I help you today?",
3497
+ ...labels
3460
3498
  },
3499
+ icons,
3461
3500
  defaultOpen,
3462
- clickOutsideToClose: true,
3463
- hitEscapeToClose: true,
3501
+ clickOutsideToClose,
3502
+ hitEscapeToClose,
3503
+ shortcut,
3464
3504
  onSetOpen,
3465
- onError,
3466
- renderError,
3467
3505
  className,
3468
3506
  children
3469
3507
  }
3470
3508
  )
3471
3509
  ] });
3472
- }
3510
+ };
3473
3511
  CustomCopilotSidebar2.displayName = "CustomCopilotSidebar";
3474
3512
  var FooterContainer = styled9__default.default.footer`
3475
3513
  display: flex;
@@ -4281,23 +4319,19 @@ function SuggestionChip({ suggestion, onSelect }) {
4281
4319
  }
4282
4320
  Suggestions.displayName = "Suggestions";
4283
4321
 
4284
- Object.defineProperty(exports, "useChatContext", {
4285
- enumerable: true,
4286
- get: function () { return reactUi.useChatContext; }
4287
- });
4288
4322
  exports.ActionExecutionAdapter = ActionExecutionAdapter;
4289
4323
  exports.Actions = Actions;
4290
4324
  exports.AgentState = AgentState;
4291
4325
  exports.AssistantMessage = AssistantMessage;
4292
4326
  exports.AssistantMessageAdapter = AssistantMessageAdapter;
4293
4327
  exports.Button = Button;
4294
- exports.CustomCopilotSidebar = CustomCopilotSidebar2;
4328
+ exports.CustomCopilotSidebar = CustomCopilotSidebar;
4295
4329
  exports.FileAttachment = FileAttachment;
4296
4330
  exports.Footer = Footer;
4297
4331
  exports.Header = Header;
4298
4332
  exports.Input = Input;
4299
4333
  exports.InputAdapter = InputAdapter;
4300
- exports.IntegratedSidebar = CustomCopilotSidebar;
4334
+ exports.IntegratedSidebar = CustomCopilotSidebar2;
4301
4335
  exports.Messages = Messages;
4302
4336
  exports.MessagesList = MessagesList;
4303
4337
  exports.MessagesListContainer = MessagesListContainer;
@@ -4312,5 +4346,6 @@ exports.UserMessageAdapter = UserMessageAdapter;
4312
4346
  exports.Window = Window;
4313
4347
  exports.clearToolCalls = clearToolCalls;
4314
4348
  exports.registerToolCall = registerToolCall;
4349
+ exports.useChatContext = useChatContext;
4315
4350
  //# sourceMappingURL=index.cjs.map
4316
4351
  //# sourceMappingURL=index.cjs.map