@agentiffai/design 1.4.2 → 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.
- package/dist/{Window-Dm_I5m8i.d.cts → Window-DTASLUB2.d.cts} +20 -2
- package/dist/{Window-Dm_I5m8i.d.ts → Window-DTASLUB2.d.ts} +20 -2
- package/dist/copilotkit/index.cjs +500 -465
- package/dist/copilotkit/index.cjs.map +1 -1
- package/dist/copilotkit/index.d.cts +98 -8
- package/dist/copilotkit/index.d.ts +98 -8
- package/dist/copilotkit/index.js +493 -456
- package/dist/copilotkit/index.js.map +1 -1
- package/dist/index.cjs +11 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +1 -2
- package/dist/index.d.ts +1 -2
- package/dist/index.js +11 -2
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -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
|
|
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
|
-
|
|
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
|
|
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(() => {
|
|
@@ -1706,7 +1726,7 @@ function createAssistantMessageAdapterWithErrorReporting(onReportIssue, Thinking
|
|
|
1706
1726
|
const errorContext = React.useMemo(() => detectErrorInMessage(content), [content]);
|
|
1707
1727
|
const chatSnippet = React.useMemo(() => {
|
|
1708
1728
|
if (!errorContext.hasError) return "";
|
|
1709
|
-
return buildChatSnippet(visibleMessages
|
|
1729
|
+
return buildChatSnippet(visibleMessages, content);
|
|
1710
1730
|
}, [visibleMessages, content, errorContext.hasError]);
|
|
1711
1731
|
const actions = React.useMemo(() => {
|
|
1712
1732
|
if (!errorContext.hasError || !onReportIssue || isGenerating) {
|
|
@@ -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
|
|
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
|
-
|
|
2816
|
-
|
|
2817
|
-
|
|
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
|
-
/*
|
|
2843
|
+
/* Keep sidebar container always visible (the window inside will animate) */
|
|
2821
2844
|
.copilotKitSidebarContentWrapper.sidebarExpanded .copilotKitSidebar {
|
|
2822
|
-
|
|
2845
|
+
pointer-events: auto !important;
|
|
2823
2846
|
}
|
|
2824
2847
|
|
|
2825
|
-
/* Mobile-first:
|
|
2826
|
-
|
|
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
|
-
|
|
2829
|
-
|
|
2830
|
-
|
|
2831
|
-
|
|
2832
|
-
|
|
2833
|
-
|
|
2834
|
-
|
|
2835
|
-
|
|
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:
|
|
2838
|
-
|
|
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
|
-
/*
|
|
2850
|
-
.
|
|
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:
|
|
2860
|
-
.copilotKitSidebar
|
|
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
|
-
|
|
2863
|
-
|
|
2864
|
-
|
|
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
|
|
2909
|
+
/* Let top + bottom define height — no explicit value needed */
|
|
2910
|
+
height: auto !important;
|
|
2868
2911
|
max-width: 28rem !important;
|
|
2869
|
-
max-height:
|
|
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
|
-
/*
|
|
2890
|
-
|
|
2891
|
-
|
|
2892
|
-
|
|
2893
|
-
|
|
2894
|
-
|
|
2895
|
-
|
|
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
|
-
|
|
2899
|
-
|
|
2900
|
-
|
|
2901
|
-
|
|
2902
|
-
}
|
|
3043
|
+
/* Fix messages container background */
|
|
3044
|
+
.copilotKitMessages {
|
|
3045
|
+
background-color: transparent !important;
|
|
3046
|
+
}
|
|
2903
3047
|
|
|
2904
|
-
|
|
2905
|
-
|
|
2906
|
-
|
|
2907
|
-
|
|
2908
|
-
|
|
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
|
-
|
|
2912
|
-
|
|
2913
|
-
|
|
2914
|
-
|
|
2915
|
-
|
|
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:
|
|
2922
|
-
right:
|
|
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:
|
|
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:
|
|
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
|
-
|
|
2934
|
-
|
|
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:
|
|
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:
|
|
3132
|
+
fill: ${tokens.colors.text.primary};
|
|
2949
3133
|
}
|
|
2950
3134
|
`;
|
|
2951
|
-
var
|
|
2952
|
-
children
|
|
2953
|
-
|
|
2954
|
-
|
|
2955
|
-
|
|
2956
|
-
|
|
2957
|
-
|
|
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",
|
|
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 } =
|
|
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-
|
|
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
|
-
|
|
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
|
-
|
|
3219
|
+
v2.CopilotSidebar,
|
|
3022
3220
|
{
|
|
3023
|
-
AssistantMessage:
|
|
3221
|
+
AssistantMessage: AssistantMessageAdapterMemo,
|
|
3024
3222
|
UserMessage: UserMessageAdapter,
|
|
3025
3223
|
Input: InputAdapter,
|
|
3026
|
-
Header:
|
|
3027
|
-
Window:
|
|
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
|
|
3050
|
-
|
|
3051
|
-
|
|
3052
|
-
|
|
3053
|
-
|
|
3054
|
-
|
|
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
|
-
/*
|
|
3059
|
-
|
|
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
|
-
|
|
3063
|
-
|
|
3064
|
-
|
|
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
|
-
/*
|
|
3283
|
+
/* Move sidebar container into view when expanded */
|
|
3073
3284
|
.copilotKitSidebarContentWrapper.sidebarExpanded .copilotKitSidebar {
|
|
3074
|
-
|
|
3285
|
+
right: 0 !important;
|
|
3075
3286
|
}
|
|
3076
3287
|
|
|
3077
|
-
/* Mobile-first:
|
|
3078
|
-
|
|
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
|
-
|
|
3083
|
-
|
|
3084
|
-
|
|
3085
|
-
|
|
3086
|
-
|
|
3087
|
-
|
|
3088
|
-
|
|
3089
|
-
|
|
3090
|
-
|
|
3091
|
-
|
|
3092
|
-
|
|
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
|
-
|
|
3220
|
-
|
|
3221
|
-
|
|
3222
|
-
|
|
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
|
-
|
|
3226
|
-
|
|
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
|
-
|
|
3231
|
-
|
|
3232
|
-
|
|
3233
|
-
|
|
3234
|
-
|
|
3235
|
-
|
|
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
|
-
|
|
3239
|
-
|
|
3240
|
-
|
|
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
|
-
/*
|
|
3261
|
-
|
|
3262
|
-
|
|
3263
|
-
|
|
3264
|
-
|
|
3265
|
-
|
|
3266
|
-
|
|
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
|
-
|
|
3308
|
-
|
|
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
|
-
|
|
3313
|
-
|
|
3314
|
-
|
|
3315
|
-
|
|
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
|
-
|
|
3319
|
-
|
|
3320
|
-
|
|
3321
|
-
|
|
3322
|
-
|
|
3323
|
-
|
|
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:
|
|
3333
|
-
right:
|
|
3384
|
+
bottom: 8px;
|
|
3385
|
+
right: 8px;
|
|
3334
3386
|
width: 36px;
|
|
3335
3387
|
height: 36px;
|
|
3336
|
-
border-radius:
|
|
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:
|
|
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:
|
|
3344
|
-
|
|
3345
|
-
|
|
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
|
|
3399
|
+
&:hover {
|
|
3350
3400
|
transform: scale(1.05);
|
|
3351
|
-
box-shadow:
|
|
3401
|
+
box-shadow: 0 6px 16px rgba(44, 176, 171, 0.5);
|
|
3352
3402
|
}
|
|
3353
3403
|
|
|
3354
|
-
&:active
|
|
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:
|
|
3411
|
+
fill: white;
|
|
3362
3412
|
}
|
|
3363
3413
|
`;
|
|
3364
|
-
var
|
|
3365
|
-
|
|
3366
|
-
|
|
3367
|
-
|
|
3368
|
-
|
|
3369
|
-
|
|
3370
|
-
|
|
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 } =
|
|
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":
|
|
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-
|
|
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
|
-
|
|
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
|
-
|
|
3484
|
+
v2.CopilotSidebar,
|
|
3449
3485
|
{
|
|
3450
|
-
AssistantMessage:
|
|
3486
|
+
AssistantMessage: AssistantMessageAdapter,
|
|
3451
3487
|
UserMessage: UserMessageAdapter,
|
|
3452
3488
|
Input: InputAdapter,
|
|
3453
|
-
Header:
|
|
3454
|
-
Window:
|
|
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
|
|
3463
|
-
hitEscapeToClose
|
|
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 =
|
|
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 =
|
|
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
|