@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.
- package/dist/{Window-DTASLUB2.d.cts → Window-Dm_I5m8i.d.cts} +2 -20
- package/dist/{Window-DTASLUB2.d.ts → Window-Dm_I5m8i.d.ts} +2 -20
- package/dist/copilotkit/index.cjs +463 -498
- package/dist/copilotkit/index.cjs.map +1 -1
- package/dist/copilotkit/index.d.cts +8 -98
- package/dist/copilotkit/index.d.ts +8 -98
- package/dist/copilotkit/index.js +454 -491
- package/dist/copilotkit/index.js.map +1 -1
- package/dist/index.cjs +2 -11
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +2 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -11
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -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
|
|
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
|
-
|
|
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 =
|
|
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
|
|
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
|
-
|
|
2834
|
-
|
|
2835
|
-
|
|
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
|
-
/*
|
|
2820
|
+
/* Move sidebar container into view when expanded */
|
|
2844
2821
|
.copilotKitSidebarContentWrapper.sidebarExpanded .copilotKitSidebar {
|
|
2845
|
-
|
|
2822
|
+
right: 0 !important;
|
|
2846
2823
|
}
|
|
2847
2824
|
|
|
2848
|
-
/* Mobile-first:
|
|
2849
|
-
|
|
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
|
-
|
|
2854
|
-
|
|
2855
|
-
|
|
2856
|
-
|
|
2857
|
-
|
|
2858
|
-
|
|
2859
|
-
|
|
2860
|
-
|
|
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:
|
|
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
|
-
/*
|
|
2890
|
-
.
|
|
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
|
|
2898
|
-
@media (min-width:
|
|
2899
|
-
.copilotKitSidebar
|
|
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
|
-
|
|
2950
|
-
|
|
2951
|
-
|
|
2952
|
-
|
|
2953
|
-
|
|
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
|
-
/*
|
|
3032
|
-
|
|
3033
|
-
|
|
3034
|
-
|
|
3035
|
-
|
|
3036
|
-
|
|
3037
|
-
|
|
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
|
-
/*
|
|
3075
|
-
|
|
3076
|
-
|
|
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
|
-
|
|
3084
|
-
|
|
3085
|
-
|
|
3086
|
-
|
|
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
|
-
|
|
3090
|
-
|
|
3091
|
-
|
|
3092
|
-
|
|
3093
|
-
|
|
3094
|
-
|
|
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:
|
|
3104
|
-
right:
|
|
2921
|
+
bottom: 8px;
|
|
2922
|
+
right: 8px;
|
|
3105
2923
|
width: 36px;
|
|
3106
2924
|
height: 36px;
|
|
3107
|
-
border-radius:
|
|
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:
|
|
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:
|
|
3115
|
-
|
|
3116
|
-
|
|
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
|
|
2936
|
+
&:hover {
|
|
3121
2937
|
transform: scale(1.05);
|
|
3122
|
-
box-shadow:
|
|
2938
|
+
box-shadow: 0 6px 16px rgba(44, 176, 171, 0.5);
|
|
3123
2939
|
}
|
|
3124
2940
|
|
|
3125
|
-
&:active
|
|
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:
|
|
2948
|
+
fill: white;
|
|
3133
2949
|
}
|
|
3134
2950
|
`;
|
|
3135
|
-
var
|
|
3136
|
-
|
|
3137
|
-
|
|
3138
|
-
|
|
3139
|
-
|
|
3140
|
-
|
|
3141
|
-
|
|
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":
|
|
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-
|
|
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
|
-
|
|
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
|
-
|
|
3021
|
+
reactUi.CopilotSidebar,
|
|
3220
3022
|
{
|
|
3221
|
-
AssistantMessage:
|
|
3023
|
+
AssistantMessage: AssistantMessageAdapter,
|
|
3222
3024
|
UserMessage: UserMessageAdapter,
|
|
3223
3025
|
Input: InputAdapter,
|
|
3224
|
-
Header:
|
|
3225
|
-
Window:
|
|
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
|
|
3234
|
-
hitEscapeToClose
|
|
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
|
-
|
|
3048
|
+
CustomCopilotSidebar.displayName = "CustomCopilotSidebar";
|
|
3274
3049
|
var GlobalSidebarStyles2 = styled9.createGlobalStyle`
|
|
3275
|
-
/* Override CopilotKit's
|
|
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
|
-
|
|
3279
|
-
|
|
3280
|
-
|
|
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
|
-
/*
|
|
3072
|
+
/* Keep sidebar container always visible (the window inside will animate) */
|
|
3284
3073
|
.copilotKitSidebarContentWrapper.sidebarExpanded .copilotKitSidebar {
|
|
3285
|
-
|
|
3074
|
+
pointer-events: auto !important;
|
|
3286
3075
|
}
|
|
3287
3076
|
|
|
3288
|
-
/* Mobile-first:
|
|
3289
|
-
|
|
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
|
-
|
|
3292
|
-
|
|
3293
|
-
|
|
3294
|
-
|
|
3295
|
-
|
|
3296
|
-
|
|
3297
|
-
|
|
3298
|
-
|
|
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:
|
|
3301
|
-
|
|
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
|
-
|
|
3304
|
-
|
|
3305
|
-
|
|
3306
|
-
|
|
3307
|
-
|
|
3219
|
+
/* Reduce gap between messages */
|
|
3220
|
+
.copilotKitMessages > div {
|
|
3221
|
+
gap: 0.25rem !important;
|
|
3222
|
+
padding-bottom: 0;
|
|
3223
|
+
}
|
|
3308
3224
|
|
|
3309
|
-
|
|
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
|
-
|
|
3313
|
-
|
|
3314
|
-
|
|
3315
|
-
|
|
3316
|
-
|
|
3317
|
-
|
|
3318
|
-
|
|
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
|
-
|
|
3322
|
-
|
|
3323
|
-
|
|
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
|
-
/*
|
|
3353
|
-
|
|
3354
|
-
|
|
3355
|
-
|
|
3356
|
-
|
|
3357
|
-
|
|
3358
|
-
|
|
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
|
-
|
|
3362
|
-
|
|
3363
|
-
|
|
3364
|
-
|
|
3365
|
-
}
|
|
3272
|
+
/* Fix messages container background */
|
|
3273
|
+
.copilotKitMessages {
|
|
3274
|
+
background-color: transparent !important;
|
|
3275
|
+
}
|
|
3366
3276
|
|
|
3367
|
-
|
|
3368
|
-
|
|
3369
|
-
|
|
3370
|
-
|
|
3371
|
-
|
|
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
|
-
|
|
3375
|
-
|
|
3376
|
-
|
|
3377
|
-
|
|
3378
|
-
|
|
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:
|
|
3385
|
-
right:
|
|
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:
|
|
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:
|
|
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
|
-
|
|
3397
|
-
|
|
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:
|
|
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:
|
|
3361
|
+
fill: ${tokens.colors.text.primary};
|
|
3412
3362
|
}
|
|
3413
3363
|
`;
|
|
3414
|
-
var
|
|
3415
|
-
children
|
|
3416
|
-
|
|
3417
|
-
|
|
3418
|
-
|
|
3419
|
-
|
|
3420
|
-
|
|
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",
|
|
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-
|
|
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
|
-
|
|
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
|
-
|
|
3448
|
+
reactUi.CopilotSidebar,
|
|
3485
3449
|
{
|
|
3486
|
-
AssistantMessage:
|
|
3450
|
+
AssistantMessage: AssistantMessageAdapterMemo,
|
|
3487
3451
|
UserMessage: UserMessageAdapter,
|
|
3488
3452
|
Input: InputAdapter,
|
|
3489
|
-
Header:
|
|
3490
|
-
Window:
|
|
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 =
|
|
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 =
|
|
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
|