@b3-crow/ui-kit 0.0.34-pr30.4 → 0.0.35-pr30.5
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/components/cards/TipCard.d.ts +5 -0
- package/dist/components/cards/TipCard.d.ts.map +1 -0
- package/dist/components/{dashboard → cards}/TipCard.js +0 -7
- package/dist/components/cards/TipCard.js.map +1 -0
- package/dist/components/chat/MessageBubble.d.ts +13 -0
- package/dist/components/chat/MessageBubble.d.ts.map +1 -0
- package/dist/components/chat/MessageBubble.js +19 -0
- package/dist/components/chat/MessageBubble.js.map +1 -0
- package/dist/components/dashboard/ChatHistorySection.d.ts.map +1 -1
- package/dist/components/dashboard/ChatHistorySection.js +31 -29
- package/dist/components/dashboard/ChatHistorySection.js.map +1 -1
- package/dist/components/dashboard/CollapseToggleButton.d.ts +7 -0
- package/dist/components/dashboard/CollapseToggleButton.d.ts.map +1 -0
- package/dist/components/dashboard/CollapseToggleButton.js +7 -0
- package/dist/components/dashboard/CollapseToggleButton.js.map +1 -0
- package/dist/components/dashboard/DashboardBackground.d.ts.map +1 -1
- package/dist/components/dashboard/DashboardBackground.js +13 -9
- package/dist/components/dashboard/DashboardBackground.js.map +1 -1
- package/dist/components/dashboard/Header.d.ts.map +1 -1
- package/dist/components/dashboard/Header.js +62 -58
- package/dist/components/dashboard/Header.js.map +1 -1
- package/dist/components/dashboard/MetricsCard.d.ts.map +1 -1
- package/dist/components/dashboard/MetricsCard.js +12 -26
- package/dist/components/dashboard/MetricsCard.js.map +1 -1
- package/dist/components/dashboard/MobileSidebar.d.ts.map +1 -1
- package/dist/components/dashboard/MobileSidebar.js +8 -20
- package/dist/components/dashboard/MobileSidebar.js.map +1 -1
- package/dist/components/dashboard/NavMenu.d.ts +3 -1
- package/dist/components/dashboard/NavMenu.d.ts.map +1 -1
- package/dist/components/dashboard/NavMenu.js +44 -42
- package/dist/components/dashboard/NavMenu.js.map +1 -1
- package/dist/components/dashboard/NavTooltip.d.ts +10 -0
- package/dist/components/dashboard/NavTooltip.d.ts.map +1 -0
- package/dist/components/dashboard/NavTooltip.js +36 -0
- package/dist/components/dashboard/NavTooltip.js.map +1 -0
- package/dist/components/dashboard/PatternCard.d.ts +1 -1
- package/dist/components/dashboard/PatternCard.d.ts.map +1 -1
- package/dist/components/dashboard/PatternCard.js +22 -13
- package/dist/components/dashboard/PatternCard.js.map +1 -1
- package/dist/components/dashboard/SettingsDropup.d.ts +2 -1
- package/dist/components/dashboard/SettingsDropup.d.ts.map +1 -1
- package/dist/components/dashboard/SettingsDropup.js +9 -13
- package/dist/components/dashboard/SettingsDropup.js.map +1 -1
- package/dist/components/dashboard/SettingsModal.js +3 -3
- package/dist/components/dashboard/SettingsModal.js.map +1 -1
- package/dist/components/dashboard/SidePanel.d.ts.map +1 -1
- package/dist/components/dashboard/SidePanel.js +1 -1
- package/dist/components/dashboard/SidePanel.js.map +1 -1
- package/dist/components/dashboard/Sidebar.d.ts +1 -1
- package/dist/components/dashboard/Sidebar.d.ts.map +1 -1
- package/dist/components/dashboard/Sidebar.js +7 -20
- package/dist/components/dashboard/Sidebar.js.map +1 -1
- package/dist/components/dashboard/SidebarLogo.d.ts +3 -1
- package/dist/components/dashboard/SidebarLogo.d.ts.map +1 -1
- package/dist/components/dashboard/SidebarLogo.js +6 -2
- package/dist/components/dashboard/SidebarLogo.js.map +1 -1
- package/dist/components/dashboard/constants/accessibility.d.ts +24 -0
- package/dist/components/dashboard/constants/accessibility.d.ts.map +1 -0
- package/dist/components/dashboard/constants/accessibility.js +26 -0
- package/dist/components/dashboard/constants/accessibility.js.map +1 -0
- package/dist/components/dashboard/constants/animations.d.ts +73 -0
- package/dist/components/dashboard/constants/animations.d.ts.map +1 -0
- package/dist/components/dashboard/constants/animations.js +48 -0
- package/dist/components/dashboard/constants/animations.js.map +1 -0
- package/dist/components/dashboard/constants/colors.d.ts +55 -0
- package/dist/components/dashboard/constants/colors.d.ts.map +1 -0
- package/dist/components/dashboard/constants/colors.js +55 -0
- package/dist/components/dashboard/constants/colors.js.map +1 -0
- package/dist/components/dashboard/constants/gradients.d.ts +29 -0
- package/dist/components/dashboard/constants/gradients.d.ts.map +1 -0
- package/dist/components/dashboard/constants/gradients.js +29 -0
- package/dist/components/dashboard/constants/gradients.js.map +1 -0
- package/dist/components/dashboard/constants/icons.d.ts +4 -0
- package/dist/components/dashboard/constants/icons.d.ts.map +1 -0
- package/dist/components/dashboard/constants/icons.js +23 -0
- package/dist/components/dashboard/constants/icons.js.map +1 -0
- package/dist/components/dashboard/constants/navigation.d.ts +3 -0
- package/dist/components/dashboard/constants/navigation.d.ts.map +1 -0
- package/dist/components/dashboard/constants/navigation.js +35 -0
- package/dist/components/dashboard/constants/navigation.js.map +1 -0
- package/dist/components/dashboard/constants/sizing.d.ts +61 -0
- package/dist/components/dashboard/constants/sizing.d.ts.map +1 -0
- package/dist/components/dashboard/constants/sizing.js +49 -0
- package/dist/components/dashboard/constants/sizing.js.map +1 -0
- package/dist/components/dashboard/constants/styles.d.ts +44 -0
- package/dist/components/dashboard/constants/styles.d.ts.map +1 -0
- package/dist/components/dashboard/constants/styles.js +44 -0
- package/dist/components/dashboard/constants/styles.js.map +1 -0
- package/dist/components/dashboard/constants.d.ts +10 -6
- package/dist/components/dashboard/constants.d.ts.map +1 -1
- package/dist/components/dashboard/constants.js +8 -7
- package/dist/components/dashboard/constants.js.map +1 -1
- package/dist/components/dashboard/index.d.ts +23 -13
- package/dist/components/dashboard/index.d.ts.map +1 -1
- package/dist/components/dashboard/index.js +23 -13
- package/dist/components/dashboard/index.js.map +1 -1
- package/dist/components/dashboard/types.d.ts +2 -23
- package/dist/components/dashboard/types.d.ts.map +1 -1
- package/dist/components/dashboard/utils/accessibilityUtils.d.ts +9 -0
- package/dist/components/dashboard/utils/accessibilityUtils.d.ts.map +1 -0
- package/dist/components/dashboard/utils/accessibilityUtils.js +56 -0
- package/dist/components/dashboard/utils/accessibilityUtils.js.map +1 -0
- package/dist/components/dashboard/utils/pathUtils.d.ts +4 -0
- package/dist/components/dashboard/utils/pathUtils.d.ts.map +1 -0
- package/dist/components/dashboard/utils/pathUtils.js +16 -0
- package/dist/components/dashboard/utils/pathUtils.js.map +1 -0
- package/dist/components/display/IconBadge.d.ts +12 -0
- package/dist/components/display/IconBadge.d.ts.map +1 -0
- package/dist/components/display/IconBadge.js +26 -0
- package/dist/components/display/IconBadge.js.map +1 -0
- package/dist/components/display/SourceIcon.d.ts +7 -0
- package/dist/components/display/SourceIcon.d.ts.map +1 -0
- package/dist/components/display/SourceIcon.js +23 -0
- package/dist/components/display/SourceIcon.js.map +1 -0
- package/dist/components/display/StatusBadge.d.ts +14 -0
- package/dist/components/display/StatusBadge.d.ts.map +1 -0
- package/dist/components/{dashboard → display}/StatusBadge.js +0 -12
- package/dist/components/display/StatusBadge.js.map +1 -0
- package/dist/components/display/StatusIndicator.d.ts +7 -0
- package/dist/components/display/StatusIndicator.d.ts.map +1 -0
- package/dist/components/{dashboard → display}/StatusIndicator.js +0 -9
- package/dist/components/display/StatusIndicator.js.map +1 -0
- package/dist/components/display/Tag.d.ts +7 -0
- package/dist/components/display/Tag.d.ts.map +1 -0
- package/dist/components/display/Tag.js +12 -0
- package/dist/components/display/Tag.js.map +1 -0
- package/dist/components/feedback/GeneratingState.d.ts +12 -0
- package/dist/components/feedback/GeneratingState.d.ts.map +1 -0
- package/dist/components/feedback/GeneratingState.js +19 -0
- package/dist/components/feedback/GeneratingState.js.map +1 -0
- package/dist/components/index.d.ts +16 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +16 -0
- package/dist/components/index.js.map +1 -1
- package/dist/components/inputs/FilterDropdown.d.ts.map +1 -0
- package/dist/components/{dashboard → inputs}/FilterDropdown.js +14 -16
- package/dist/components/inputs/FilterDropdown.js.map +1 -0
- package/dist/components/inputs/SearchInput.d.ts +14 -0
- package/dist/components/inputs/SearchInput.d.ts.map +1 -0
- package/dist/components/{dashboard → inputs}/SearchInput.js +11 -25
- package/dist/components/inputs/SearchInput.js.map +1 -0
- package/dist/components/inputs/SuggestionChip.d.ts +10 -0
- package/dist/components/inputs/SuggestionChip.d.ts.map +1 -0
- package/dist/components/inputs/SuggestionChip.js +12 -0
- package/dist/components/inputs/SuggestionChip.js.map +1 -0
- package/dist/components/inputs/ToggleSwitch.d.ts +8 -0
- package/dist/components/inputs/ToggleSwitch.d.ts.map +1 -0
- package/dist/components/inputs/ToggleSwitch.js +29 -0
- package/dist/components/inputs/ToggleSwitch.js.map +1 -0
- package/dist/components/layout/GlassPanel.d.ts +4 -0
- package/dist/components/layout/GlassPanel.d.ts.map +1 -0
- package/dist/components/layout/GlassPanel.js +11 -0
- package/dist/components/layout/GlassPanel.js.map +1 -0
- package/dist/components/layout/ListItem.d.ts +10 -0
- package/dist/components/layout/ListItem.d.ts.map +1 -0
- package/dist/components/layout/ListItem.js +14 -0
- package/dist/components/layout/ListItem.js.map +1 -0
- package/dist/components/layout/SectionHeader.d.ts.map +1 -0
- package/dist/components/{dashboard → layout}/SectionHeader.js +12 -9
- package/dist/components/layout/SectionHeader.js.map +1 -0
- package/dist/components/providers/LenisProvider.d.ts +22 -0
- package/dist/components/providers/LenisProvider.d.ts.map +1 -0
- package/dist/components/providers/LenisProvider.js +45 -0
- package/dist/components/providers/LenisProvider.js.map +1 -0
- package/dist/styles.css +1 -1
- package/package.json +4 -2
- package/dist/components/dashboard/FilterDropdown.d.ts.map +0 -1
- package/dist/components/dashboard/FilterDropdown.js.map +0 -1
- package/dist/components/dashboard/GlassPanel.d.ts +0 -13
- package/dist/components/dashboard/GlassPanel.d.ts.map +0 -1
- package/dist/components/dashboard/GlassPanel.js +0 -20
- package/dist/components/dashboard/GlassPanel.js.map +0 -1
- package/dist/components/dashboard/IconBadge.d.ts +0 -22
- package/dist/components/dashboard/IconBadge.d.ts.map +0 -1
- package/dist/components/dashboard/IconBadge.js +0 -44
- package/dist/components/dashboard/IconBadge.js.map +0 -1
- package/dist/components/dashboard/ListItem.d.ts +0 -22
- package/dist/components/dashboard/ListItem.d.ts.map +0 -1
- package/dist/components/dashboard/ListItem.js +0 -25
- package/dist/components/dashboard/ListItem.js.map +0 -1
- package/dist/components/dashboard/SearchInput.d.ts +0 -30
- package/dist/components/dashboard/SearchInput.d.ts.map +0 -1
- package/dist/components/dashboard/SearchInput.js.map +0 -1
- package/dist/components/dashboard/SectionHeader.d.ts.map +0 -1
- package/dist/components/dashboard/SectionHeader.js.map +0 -1
- package/dist/components/dashboard/SourceIcon.d.ts +0 -15
- package/dist/components/dashboard/SourceIcon.d.ts.map +0 -1
- package/dist/components/dashboard/SourceIcon.js +0 -28
- package/dist/components/dashboard/SourceIcon.js.map +0 -1
- package/dist/components/dashboard/StatusBadge.d.ts +0 -26
- package/dist/components/dashboard/StatusBadge.d.ts.map +0 -1
- package/dist/components/dashboard/StatusBadge.js.map +0 -1
- package/dist/components/dashboard/StatusIndicator.d.ts +0 -16
- package/dist/components/dashboard/StatusIndicator.d.ts.map +0 -1
- package/dist/components/dashboard/StatusIndicator.js.map +0 -1
- package/dist/components/dashboard/Tag.d.ts +0 -16
- package/dist/components/dashboard/Tag.d.ts.map +0 -1
- package/dist/components/dashboard/Tag.js +0 -18
- package/dist/components/dashboard/Tag.js.map +0 -1
- package/dist/components/dashboard/TipCard.d.ts +0 -12
- package/dist/components/dashboard/TipCard.d.ts.map +0 -1
- package/dist/components/dashboard/TipCard.js.map +0 -1
- package/dist/components/dashboard/ToggleSwitch.d.ts +0 -17
- package/dist/components/dashboard/ToggleSwitch.d.ts.map +0 -1
- package/dist/components/dashboard/ToggleSwitch.js +0 -27
- package/dist/components/dashboard/ToggleSwitch.js.map +0 -1
- /package/dist/components/{dashboard → inputs}/FilterDropdown.d.ts +0 -0
- /package/dist/components/{dashboard → layout}/SectionHeader.d.ts +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TipCard.d.ts","sourceRoot":"","sources":["../../../src/components/cards/TipCard.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,EAAE,YAAY,2CAajD"}
|
|
@@ -1,13 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { Lightbulb } from 'lucide-react';
|
|
4
|
-
/**
|
|
5
|
-
* A tip card component for displaying helpful information or tips
|
|
6
|
-
* Features a lightbulb icon and glass-morphism styling
|
|
7
|
-
* @param {TipCardProps} props - Component props
|
|
8
|
-
* @param {React.ReactNode} props.children - Tip text content
|
|
9
|
-
* @returns {JSX.Element} The tip card component
|
|
10
|
-
*/
|
|
11
4
|
export function TipCard({ children }) {
|
|
12
5
|
return (_jsxs("div", { className: "inline-flex items-start gap-3 px-4 py-3 rounded-xl", style: {
|
|
13
6
|
background: 'rgba(255, 255, 255, 0.02)',
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TipCard.js","sourceRoot":"","sources":["../../../src/components/cards/TipCard.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMzC,MAAM,UAAU,OAAO,CAAC,EAAE,QAAQ,EAAgB;IAChD,OAAO,CACL,eACE,SAAS,EAAC,oDAAoD,EAC9D,KAAK,EAAE;YACL,UAAU,EAAE,2BAA2B;YACvC,MAAM,EAAE,qCAAqC;SAC9C,aAED,KAAC,SAAS,IAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAC,oCAAoC,GAAG,EACtE,YAAG,SAAS,EAAC,uCAAuC,YAAE,QAAQ,GAAK,IAC/D,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export interface MessageBubbleProps {
|
|
2
|
+
content: string;
|
|
3
|
+
role: 'user' | 'assistant';
|
|
4
|
+
isCopied?: boolean;
|
|
5
|
+
onCopy?: (content: string) => void;
|
|
6
|
+
headerComponent?: React.ReactNode;
|
|
7
|
+
avatarSrc?: string;
|
|
8
|
+
avatarAlt?: string;
|
|
9
|
+
assistantLabel?: string;
|
|
10
|
+
className?: string;
|
|
11
|
+
}
|
|
12
|
+
export declare function MessageBubble({ content, role, isCopied, onCopy, headerComponent, avatarSrc, avatarAlt, assistantLabel, className, }: MessageBubbleProps): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
//# sourceMappingURL=MessageBubble.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MessageBubble.d.ts","sourceRoot":"","sources":["../../../src/components/chat/MessageBubble.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,GAAG,WAAW,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA4DD,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,IAAI,EACJ,QAAgB,EAChB,MAAM,EACN,eAAe,EACf,SAAS,EACT,SAAS,EACT,cAAc,EACd,SAAS,GACV,EAAE,kBAAkB,2CAgCpB"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { Check, Copy } from 'lucide-react';
|
|
4
|
+
import Image from 'next/image';
|
|
5
|
+
function CopyButton({ isCopied, onClick, }) {
|
|
6
|
+
return (_jsx("button", { type: "button", onClick: onClick, className: "absolute -bottom-3 right-2 opacity-0 group-hover:opacity-100 transition-opacity p-1.5 rounded-lg hover:bg-black/70 border border-white/10", style: { background: 'rgba(0, 0, 0, 0.5)' }, "aria-label": "Copy message", children: isCopied ? (_jsx(Check, { size: 12, className: "text-green-400" })) : (_jsx(Copy, { size: 12, className: "text-gray-400" })) }));
|
|
7
|
+
}
|
|
8
|
+
function AssistantHeader({ avatarSrc, avatarAlt, label, }) {
|
|
9
|
+
return (_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [avatarSrc && (_jsx("div", { className: "w-6 h-6 rounded-full flex items-center justify-center ring-1 ring-purple-500/30", style: { background: 'rgba(0, 0, 0, 0.6)' }, children: _jsx(Image, { src: avatarSrc, alt: avatarAlt || 'Assistant', width: 16, height: 16, className: "rounded-full" }) })), label && (_jsx("span", { className: "text-[11px] font-semibold text-purple-400 uppercase tracking-wider", children: label }))] }));
|
|
10
|
+
}
|
|
11
|
+
export function MessageBubble({ content, role, isCopied = false, onCopy, headerComponent, avatarSrc, avatarAlt, assistantLabel, className, }) {
|
|
12
|
+
const isUserMessage = role === 'user';
|
|
13
|
+
const bubbleStyles = isUserMessage
|
|
14
|
+
? 'bg-gradient-to-br from-purple-600/30 to-purple-800/30 border border-purple-500/20'
|
|
15
|
+
: 'bg-white/[0.05] border border-white/10';
|
|
16
|
+
return (_jsx("div", { className: `flex ${isUserMessage ? 'justify-end' : 'justify-start'} animate-fadeIn ${className || ''}`, children: _jsxs("div", { className: `group relative max-w-[85%] rounded-2xl px-4 py-3 ${bubbleStyles}`, children: [!isUserMessage &&
|
|
17
|
+
(headerComponent || (_jsx(AssistantHeader, { avatarSrc: avatarSrc, avatarAlt: avatarAlt, label: assistantLabel }))), _jsx("p", { className: "text-[14px] text-gray-200 leading-[1.8] whitespace-pre-wrap", children: content }), onCopy && (_jsx(CopyButton, { isCopied: isCopied, onClick: () => onCopy(content) }))] }) }));
|
|
18
|
+
}
|
|
19
|
+
//# sourceMappingURL=MessageBubble.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MessageBubble.js","sourceRoot":"","sources":["../../../src/components/chat/MessageBubble.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,MAAM,YAAY,CAAC;AAc/B,SAAS,UAAU,CAAC,EAClB,QAAQ,EACR,OAAO,GAIR;IACC,OAAO,CACL,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,2IAA2I,EACrJ,KAAK,EAAE,EAAE,UAAU,EAAE,oBAAoB,EAAE,gBAChC,cAAc,YAExB,QAAQ,CAAC,CAAC,CAAC,CACV,KAAC,KAAK,IAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAC,gBAAgB,GAAG,CAC/C,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAC,eAAe,GAAG,CAC7C,GACM,CACV,CAAC;AACJ,CAAC;AAED,SAAS,eAAe,CAAC,EACvB,SAAS,EACT,SAAS,EACT,KAAK,GAKN;IACC,OAAO,CACL,eAAK,SAAS,EAAC,8BAA8B,aAC1C,SAAS,IAAI,CACZ,cACE,SAAS,EAAC,iFAAiF,EAC3F,KAAK,EAAE,EAAE,UAAU,EAAE,oBAAoB,EAAE,YAE3C,KAAC,KAAK,IACJ,GAAG,EAAE,SAAS,EACd,GAAG,EAAE,SAAS,IAAI,WAAW,EAC7B,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,SAAS,EAAC,cAAc,GACxB,GACE,CACP,EACA,KAAK,IAAI,CACR,eAAM,SAAS,EAAC,oEAAoE,YACjF,KAAK,GACD,CACR,IACG,CACP,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,EAC5B,OAAO,EACP,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,MAAM,EACN,eAAe,EACf,SAAS,EACT,SAAS,EACT,cAAc,EACd,SAAS,GACU;IACnB,MAAM,aAAa,GAAG,IAAI,KAAK,MAAM,CAAC;IACtC,MAAM,YAAY,GAAG,aAAa;QAChC,CAAC,CAAC,mFAAmF;QACrF,CAAC,CAAC,wCAAwC,CAAC;IAE7C,OAAO,CACL,cACE,SAAS,EAAE,QAAQ,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,eAAe,mBAAmB,SAAS,IAAI,EAAE,EAAE,YAEtG,eACE,SAAS,EAAE,oDAAoD,YAAY,EAAE,aAE5E,CAAC,aAAa;oBACb,CAAC,eAAe,IAAI,CAClB,KAAC,eAAe,IACd,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,cAAc,GACrB,CACH,CAAC,EAEJ,YAAG,SAAS,EAAC,6DAA6D,YACvE,OAAO,GACN,EAEH,MAAM,IAAI,CACT,KAAC,UAAU,IAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,GAAI,CACnE,IACG,GACF,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatHistorySection.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/ChatHistorySection.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAKxE,YAAY,EAAE,eAAe,EAAE,uBAAuB,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"ChatHistorySection.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/ChatHistorySection.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAKxE,YAAY,EAAE,eAAe,EAAE,uBAAuB,EAAE,CAAC;AAsCzD,wBAAgB,kBAAkB,CAAC,EACjC,KAAU,EACV,YAAY,EACZ,UAAiB,EACjB,SAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,QAAQ,EACR,QAAQ,EACR,KAAsB,EACtB,YAAoD,GACrD,EAAE,uBAAuB,2CAkNzB"}
|
|
@@ -3,29 +3,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import { ChevronDown, MoreHorizontal, Pencil, Trash2 } from 'lucide-react';
|
|
4
4
|
import { useEffect, useRef, useState } from 'react';
|
|
5
5
|
import { cn } from '../../lib/utils';
|
|
6
|
-
|
|
6
|
+
const useNewItemAnimation = (items) => {
|
|
7
7
|
const [newItemId, setNewItemId] = useState(null);
|
|
8
8
|
const [canAnimate, setCanAnimate] = useState(false);
|
|
9
|
-
const [openMenuId, setOpenMenuId] = useState(null);
|
|
10
|
-
const [editingId, setEditingId] = useState(null);
|
|
11
|
-
const [editValue, setEditValue] = useState('');
|
|
12
|
-
const menuRef = useRef(null);
|
|
13
|
-
const inputRef = useRef(null);
|
|
14
9
|
const seenItemsRef = useRef(new Set());
|
|
15
10
|
useEffect(() => {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
}
|
|
19
|
-
const timer = setTimeout(() => {
|
|
20
|
-
setCanAnimate(true);
|
|
21
|
-
}, 600);
|
|
11
|
+
items.forEach(item => seenItemsRef.current.add(item.id));
|
|
12
|
+
const timer = setTimeout(() => setCanAnimate(true), 600);
|
|
22
13
|
return () => clearTimeout(timer);
|
|
23
14
|
}, []);
|
|
24
15
|
useEffect(() => {
|
|
25
16
|
if (!canAnimate) {
|
|
26
|
-
|
|
27
|
-
seenItemsRef.current.add(item.id);
|
|
28
|
-
}
|
|
17
|
+
items.forEach(item => seenItemsRef.current.add(item.id));
|
|
29
18
|
return;
|
|
30
19
|
}
|
|
31
20
|
const seenItems = seenItemsRef.current;
|
|
@@ -39,10 +28,17 @@ export function ChatHistorySection({ items = [], activeItemId, isExpanded = true
|
|
|
39
28
|
clearTimeout(resetTimer);
|
|
40
29
|
};
|
|
41
30
|
}
|
|
42
|
-
|
|
43
|
-
seenItems.add(item.id);
|
|
44
|
-
}
|
|
31
|
+
items.forEach(item => seenItems.add(item.id));
|
|
45
32
|
}, [items, canAnimate]);
|
|
33
|
+
return newItemId;
|
|
34
|
+
};
|
|
35
|
+
export function ChatHistorySection({ items = [], activeItemId, isExpanded = true, isVisible = true, onItemClick, onToggleExpanded, onRename, onDelete, title = 'Chat History', emptyMessage = 'No chats yet. Start a conversation!', }) {
|
|
36
|
+
const newItemId = useNewItemAnimation(items);
|
|
37
|
+
const [openMenuId, setOpenMenuId] = useState(null);
|
|
38
|
+
const [editingId, setEditingId] = useState(null);
|
|
39
|
+
const [editValue, setEditValue] = useState('');
|
|
40
|
+
const menuRef = useRef(null);
|
|
41
|
+
const inputRef = useRef(null);
|
|
46
42
|
useEffect(() => {
|
|
47
43
|
if (!openMenuId)
|
|
48
44
|
return;
|
|
@@ -60,23 +56,27 @@ export function ChatHistorySection({ items = [], activeItemId, isExpanded = true
|
|
|
60
56
|
inputRef.current.select();
|
|
61
57
|
}
|
|
62
58
|
}, [editingId]);
|
|
59
|
+
const closeMenu = () => setOpenMenuId(null);
|
|
60
|
+
const toggleMenu = (itemId) => {
|
|
61
|
+
setOpenMenuId(openMenuId === itemId ? null : itemId);
|
|
62
|
+
};
|
|
63
63
|
const handleMenuClick = (e, itemId) => {
|
|
64
64
|
e.stopPropagation();
|
|
65
|
-
|
|
65
|
+
toggleMenu(itemId);
|
|
66
66
|
};
|
|
67
67
|
const handleMenuKeyDown = (e, itemId) => {
|
|
68
68
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
69
69
|
e.preventDefault();
|
|
70
70
|
e.stopPropagation();
|
|
71
|
-
|
|
71
|
+
toggleMenu(itemId);
|
|
72
72
|
}
|
|
73
73
|
};
|
|
74
|
-
const
|
|
74
|
+
const startRename = (item) => {
|
|
75
75
|
setEditingId(item.id);
|
|
76
76
|
setEditValue(item.title);
|
|
77
|
-
|
|
77
|
+
closeMenu();
|
|
78
78
|
};
|
|
79
|
-
const
|
|
79
|
+
const submitRename = () => {
|
|
80
80
|
if (editingId && editValue.trim()) {
|
|
81
81
|
onRename?.(editingId, editValue.trim());
|
|
82
82
|
}
|
|
@@ -85,18 +85,20 @@ export function ChatHistorySection({ items = [], activeItemId, isExpanded = true
|
|
|
85
85
|
};
|
|
86
86
|
const handleRenameKeyDown = (e) => {
|
|
87
87
|
if (e.key === 'Enter') {
|
|
88
|
-
|
|
88
|
+
submitRename();
|
|
89
89
|
}
|
|
90
90
|
else if (e.key === 'Escape') {
|
|
91
91
|
setEditingId(null);
|
|
92
92
|
setEditValue('');
|
|
93
93
|
}
|
|
94
94
|
};
|
|
95
|
-
const
|
|
96
|
-
|
|
95
|
+
const deleteItem = (id) => {
|
|
96
|
+
closeMenu();
|
|
97
97
|
onDelete?.(id);
|
|
98
98
|
};
|
|
99
|
-
return (_jsxs("div", { className: cn('px-4 mt-4 transition-all duration-300 ease-in-out overflow-hidden', isVisible
|
|
99
|
+
return (_jsxs("div", { className: cn('px-4 mt-4 transition-all duration-300 ease-in-out overflow-hidden', isVisible
|
|
100
|
+
? 'opacity-100 animate-fadeInDown max-h-[500px]'
|
|
101
|
+
: 'opacity-0 max-h-0 pointer-events-none'), children: [_jsxs("button", { type: "button", onClick: onToggleExpanded, className: "flex items-center justify-between w-full group", "aria-label": `${title} section`, "aria-expanded": isExpanded, children: [_jsx("span", { className: "text-[13px] font-normal text-gray-400 leading-[21px]", children: title }), _jsx(ChevronDown, { size: 16, className: cn('text-gray-600 transition-transform duration-200', !isExpanded && '-rotate-90') })] }), _jsx("div", { className: "overflow-hidden transition-all duration-300 ease-in-out", style: {
|
|
100
102
|
maxHeight: isExpanded
|
|
101
103
|
? `${Math.max(items.length * 42 + 16, 60)}px`
|
|
102
104
|
: '0px',
|
|
@@ -106,14 +108,14 @@ export function ChatHistorySection({ items = [], activeItemId, isExpanded = true
|
|
|
106
108
|
const isNew = item.id === newItemId;
|
|
107
109
|
const isEditing = editingId === item.id;
|
|
108
110
|
const isMenuOpen = openMenuId === item.id;
|
|
109
|
-
return (_jsxs("div", { className: "relative", ref: isMenuOpen ? menuRef : undefined, children: [_jsxs("div", { role: "button", tabIndex: isEditing ? -1 : 0, onClick: () => !isEditing && onItemClick?.(item.id), onKeyDown:
|
|
111
|
+
return (_jsxs("div", { className: "relative", ref: isMenuOpen ? menuRef : undefined, children: [_jsxs("div", { role: "button", tabIndex: isEditing ? -1 : 0, onClick: () => !isEditing && onItemClick?.(item.id), onKeyDown: e => {
|
|
110
112
|
if (!isEditing && (e.key === 'Enter' || e.key === ' ')) {
|
|
111
113
|
e.preventDefault();
|
|
112
114
|
onItemClick?.(item.id);
|
|
113
115
|
}
|
|
114
116
|
}, className: cn('group relative flex items-center justify-between w-full rounded-lg transition-all duration-200', 'h-[37px] hover:bg-white/5 cursor-pointer', isActive &&
|
|
115
117
|
'bg-white/[0.08] shadow-[inset_0px_1px_0px_1px_rgba(255,255,255,0.05)] outline outline-1 outline-white/[0.05] -outline-offset-1', isNew &&
|
|
116
|
-
'animate-[chatHistorySlideIn_0.3s_ease-out_forwards]'), children: [isEditing ? (_jsx("input", { ref: inputRef, type: "text", value: editValue, onChange: e => setEditValue(e.target.value), onBlur:
|
|
118
|
+
'animate-[chatHistorySlideIn_0.3s_ease-out_forwards]'), children: [isEditing ? (_jsx("input", { ref: inputRef, type: "text", value: editValue, onChange: e => setEditValue(e.target.value), onBlur: submitRename, onKeyDown: handleRenameKeyDown, className: "text-[13px] font-bold bg-transparent border-none outline-none pl-3 pr-8 w-full text-gray-200 leading-[21px]", onClick: e => e.stopPropagation() })) : (_jsx("span", { className: "text-[13px] font-bold truncate pl-3 pr-8 text-left text-gray-200 leading-[21px] max-w-[198px]", children: item.title })), isActive && !isEditing && (_jsx("button", { type: "button", className: "absolute right-2 flex items-center justify-center w-[19px] h-[19px] cursor-pointer hover:bg-white/10 rounded", onClick: e => handleMenuClick(e, item.id), onKeyDown: e => handleMenuKeyDown(e, item.id), "aria-label": "Chat options", "aria-haspopup": "menu", "aria-expanded": isMenuOpen, children: _jsx(MoreHorizontal, { size: 14, className: "text-white" }) }))] }), isMenuOpen && (_jsxs("div", { role: "menu", className: "absolute right-0 top-full mt-1 z-50 min-w-[140px] rounded-lg overflow-hidden bg-[rgba(30,30,30,0.95)] border border-white/10 shadow-[0_4px_12px_rgba(0,0,0,0.5)]", children: [_jsxs("button", { type: "button", role: "menuitem", onClick: () => startRename(item), className: "flex items-center gap-2 w-full px-3 py-2 text-left hover:bg-white/10 transition-colors", children: [_jsx(Pencil, { size: 14, className: "text-gray-400" }), _jsx("span", { className: "text-[13px] text-gray-200", children: "Rename" })] }), _jsxs("button", { type: "button", role: "menuitem", onClick: () => deleteItem(item.id), className: "flex items-center gap-2 w-full px-3 py-2 text-left hover:bg-red-500/20 transition-colors", children: [_jsx(Trash2, { size: 14, className: "text-red-400" }), _jsx("span", { className: "text-[13px] text-red-400", children: "Delete" })] })] }))] }, item.id));
|
|
117
119
|
})) }) })] }));
|
|
118
120
|
}
|
|
119
121
|
//# sourceMappingURL=ChatHistorySection.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatHistorySection.js","sourceRoot":"","sources":["../../../src/components/dashboard/ChatHistorySection.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAC3E,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAIrC,MAAM,
|
|
1
|
+
{"version":3,"file":"ChatHistorySection.js","sourceRoot":"","sources":["../../../src/components/dashboard/ChatHistorySection.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
interface CollapseToggleButtonProps {
|
|
2
|
+
isCollapsed: boolean;
|
|
3
|
+
onToggle: () => void;
|
|
4
|
+
}
|
|
5
|
+
export declare function CollapseToggleButton({ isCollapsed, onToggle }: CollapseToggleButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export {};
|
|
7
|
+
//# sourceMappingURL=CollapseToggleButton.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CollapseToggleButton.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/CollapseToggleButton.tsx"],"names":[],"mappings":"AAMA,UAAU,yBAAyB;IACjC,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,oBAAoB,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAE,yBAAyB,2CAgBxF"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { PanelLeftClose, PanelLeftOpen } from 'lucide-react';
|
|
4
|
+
export function CollapseToggleButton({ isCollapsed, onToggle }) {
|
|
5
|
+
return (_jsx("button", { type: "button", onClick: onToggle, "aria-label": isCollapsed ? 'Expand sidebar' : 'Collapse sidebar', "aria-expanded": !isCollapsed, className: "w-6 h-6 flex items-center justify-center rounded-md border border-white/[0.08] transition-all duration-200", children: isCollapsed ? (_jsx(PanelLeftOpen, { size: 16, className: "text-gray-400", strokeWidth: 2 })) : (_jsx(PanelLeftClose, { size: 16, className: "text-gray-400", strokeWidth: 2 })) }));
|
|
6
|
+
}
|
|
7
|
+
//# sourceMappingURL=CollapseToggleButton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CollapseToggleButton.js","sourceRoot":"","sources":["../../../src/components/dashboard/CollapseToggleButton.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAS7D,MAAM,UAAU,oBAAoB,CAAC,EAAE,WAAW,EAAE,QAAQ,EAA6B;IACvF,OAAO,CACL,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,QAAQ,gBACL,WAAW,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,kBAAkB,mBAChD,CAAC,WAAW,EAC3B,SAAS,EAAC,4GAA4G,YAErH,WAAW,CAAC,CAAC,CAAC,CACb,KAAC,aAAa,IAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAC,eAAe,EAAC,WAAW,EAAE,CAAC,GAAI,CACtE,CAAC,CAAC,CAAC,CACF,KAAC,cAAc,IAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAC,eAAe,EAAC,WAAW,EAAE,CAAC,GAAI,CACvE,GACM,CACV,CAAC;AACJ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DashboardBackground.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/DashboardBackground.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"DashboardBackground.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/DashboardBackground.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAExD,YAAY,EAAE,wBAAwB,EAAE,CAAC;AAwDzC,wBAAgB,mBAAmB,CAAC,EAClC,OAAmB,EACnB,eAAe,EACf,YAAkB,GACnB,EAAE,wBAAwB,2CAW1B"}
|
|
@@ -1,16 +1,20 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
|
|
3
|
+
const gradientStyles = {
|
|
4
|
+
primary: 'radial-gradient(ellipse 80% 70% at 85% 50%, rgba(30, 16, 53, 0.8) 0%, rgba(10, 5, 21, 0.4) 50%, transparent 100%)',
|
|
5
|
+
vignette: (sidebarWidth) => `radial-gradient(ellipse 55% 90% at calc(50% + calc(${sidebarWidth}px / 2)) 50%, rgba(3, 0, 5, 0) 0%, rgba(3, 0, 5, 0.50) 100%)`,
|
|
6
|
+
purpleGlow: (sidebarWidth) => `radial-gradient(ellipse 60% 50% at calc(50% + calc(${sidebarWidth}px / 2)) 100%, rgba(133, 78, 210, 0.5) 0%, rgba(133, 78, 210, 0.3) 25%, rgba(133, 78, 210, 0.1) 50%, transparent 70%)`,
|
|
7
|
+
};
|
|
8
|
+
function MinimalBackground() {
|
|
9
|
+
return (_jsx("div", { className: "fixed inset-0 pointer-events-none z-0", children: _jsx("div", { className: "absolute inset-0 bg-[#030005]" }) }));
|
|
10
|
+
}
|
|
11
|
+
function DefaultBackground({ noiseTextureSrc, sidebarWidth, }) {
|
|
12
|
+
return (_jsxs("div", { className: "fixed inset-0 pointer-events-none z-0 overflow-hidden", style: { '--sidebar-width': `${sidebarWidth}px` }, children: [_jsx("div", { className: "absolute inset-0 bg-[#030005]" }), _jsx("div", { className: "absolute top-0 bottom-0 left-0 right-0 opacity-50", style: { background: gradientStyles.primary } }), noiseTextureSrc && (_jsx("img", { src: noiseTextureSrc, alt: "", role: "presentation", className: "absolute inset-0 w-full h-full opacity-[0.07] mix-blend-overlay object-cover" })), _jsx("div", { className: "absolute inset-0 opacity-40", style: { background: gradientStyles.vignette(sidebarWidth) } }), _jsx("div", { className: "absolute inset-x-0 bottom-0 h-[800px] pointer-events-none", style: { background: gradientStyles.purpleGlow(sidebarWidth) } })] }));
|
|
13
|
+
}
|
|
4
14
|
export function DashboardBackground({ variant = 'default', noiseTextureSrc, sidebarWidth = 280, }) {
|
|
5
15
|
if (variant === 'minimal') {
|
|
6
|
-
return
|
|
16
|
+
return _jsx(MinimalBackground, {});
|
|
7
17
|
}
|
|
8
|
-
return (
|
|
9
|
-
background: `radial-gradient(ellipse 80% 70% at 85% 50%, rgba(30, 16, 53, 0.8) 0%, rgba(10, 5, 21, 0.4) 50%, transparent 100%)`,
|
|
10
|
-
} }), noiseTextureSrc && (_jsx("img", { src: noiseTextureSrc, alt: "", role: "presentation", className: "absolute inset-0 w-full h-full opacity-[0.07] mix-blend-overlay object-cover" })), _jsx("div", { className: cn('absolute inset-0', 'opacity-40'), style: {
|
|
11
|
-
background: `radial-gradient(ellipse 55% 90% at calc(50% + calc(var(--sidebar-width) / 2)) 50%, rgba(3, 0, 5, 0) 0%, rgba(3, 0, 5, 0.50) 100%)`,
|
|
12
|
-
} }), _jsx("div", { className: "absolute inset-x-0 bottom-0 h-[800px] pointer-events-none", style: {
|
|
13
|
-
background: `radial-gradient(ellipse 60% 50% at calc(50% + calc(var(--sidebar-width) / 2)) 100%, rgba(133, 78, 210, 0.5) 0%, rgba(133, 78, 210, 0.3) 25%, rgba(133, 78, 210, 0.1) 50%, transparent 70%)`,
|
|
14
|
-
} })] }));
|
|
18
|
+
return (_jsx(DefaultBackground, { noiseTextureSrc: noiseTextureSrc, sidebarWidth: sidebarWidth }));
|
|
15
19
|
}
|
|
16
20
|
//# sourceMappingURL=DashboardBackground.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DashboardBackground.js","sourceRoot":"","sources":["../../../src/components/dashboard/DashboardBackground.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;
|
|
1
|
+
{"version":3,"file":"DashboardBackground.js","sourceRoot":"","sources":["../../../src/components/dashboard/DashboardBackground.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAMb,MAAM,cAAc,GAAG;IACrB,OAAO,EACL,mHAAmH;IACrH,QAAQ,EAAE,CAAC,YAAoB,EAAE,EAAE,CACjC,sDAAsD,YAAY,8DAA8D;IAClI,UAAU,EAAE,CAAC,YAAoB,EAAE,EAAE,CACnC,sDAAsD,YAAY,uHAAuH;CAC5L,CAAC;AAEF,SAAS,iBAAiB;IACxB,OAAO,CACL,cAAK,SAAS,EAAC,uCAAuC,YACpD,cAAK,SAAS,EAAC,+BAA+B,GAAG,GAC7C,CACP,CAAC;AACJ,CAAC;AAED,SAAS,iBAAiB,CAAC,EACzB,eAAe,EACf,YAAY,GAIb;IACC,OAAO,CACL,eACE,SAAS,EAAC,uDAAuD,EACjE,KAAK,EAAE,EAAE,iBAAiB,EAAE,GAAG,YAAY,IAAI,EAAyB,aAExE,cAAK,SAAS,EAAC,+BAA+B,GAAG,EACjD,cACE,SAAS,EAAC,mDAAmD,EAC7D,KAAK,EAAE,EAAE,UAAU,EAAE,cAAc,CAAC,OAAO,EAAE,GAC7C,EACD,eAAe,IAAI,CAClB,cACE,GAAG,EAAE,eAAe,EACpB,GAAG,EAAC,EAAE,EACN,IAAI,EAAC,cAAc,EACnB,SAAS,EAAC,8EAA8E,GACxF,CACH,EACD,cACE,SAAS,EAAC,6BAA6B,EACvC,KAAK,EAAE,EAAE,UAAU,EAAE,cAAc,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE,GAC5D,EACF,cACE,SAAS,EAAC,2DAA2D,EACrE,KAAK,EAAE,EAAE,UAAU,EAAE,cAAc,CAAC,UAAU,CAAC,YAAY,CAAC,EAAE,GAC9D,IACE,CACP,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,EAClC,OAAO,GAAG,SAAS,EACnB,eAAe,EACf,YAAY,GAAG,GAAG,GACO;IACzB,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QAC1B,OAAO,KAAC,iBAAiB,KAAG,CAAC;IAC/B,CAAC;IAED,OAAO,CACL,KAAC,iBAAiB,IAChB,eAAe,EAAE,eAAe,EAChC,YAAY,EAAE,YAAY,GAC1B,CACH,CAAC;AACJ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/Header.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAK5D,YAAY,EAAE,eAAe,EAAE,WAAW,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/Header.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAK5D,YAAY,EAAE,eAAe,EAAE,WAAW,EAAE,CAAC;AA8G7C,wBAAgB,MAAM,CAAC,EACrB,OAA6B,EAC7B,SAAyB,EACzB,iBAAiB,EACjB,gBAA0C,EAC1C,YAAmB,EACnB,gBAAuB,EACvB,mBAAmB,EACnB,aAAa,EACb,OAAe,EACf,WAAW,EACX,OAAO,GACR,EAAE,WAAW,2CAoEb"}
|
|
@@ -3,11 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import { Bell, Calendar, Check, ChevronDown, Menu } from 'lucide-react';
|
|
4
4
|
import React, { useEffect, useRef, useState } from 'react';
|
|
5
5
|
import { cn } from '../../lib/utils';
|
|
6
|
-
const DropdownOption = React.forwardRef(({ option, isSelected, isFocused, handleSelect, index
|
|
7
|
-
return (_jsxs("button", { ref: ref, type: "button", role: "option", id: `option-${index}`, "aria-selected": isSelected, onClick: () => handleSelect(option), className: cn('w-full px-3 py-2.5 flex items-center justify-between rounded-lg transition-all', isSelected && 'bg-violet-500/15', isFocused && !isSelected && 'bg-white/[0.04]', !isSelected && !isFocused && 'hover:bg-white/[0.04]'), children: [_jsx("span", { className: cn('text-[13px]', isSelected
|
|
8
|
-
? 'text-violet-200 font-medium'
|
|
9
|
-
: 'text-gray-300 font-normal'), children: option.label }), isSelected && (_jsx(Check, { size: 14, className: "text-violet-400", strokeWidth: 2.5 }))] }));
|
|
10
|
-
});
|
|
6
|
+
const DropdownOption = React.forwardRef(({ option, isSelected, isFocused, handleSelect, index }, ref) => (_jsxs("button", { ref: ref, type: "button", role: "option", id: `option-${index}`, "aria-selected": isSelected, onClick: () => handleSelect(option), className: cn('w-full px-3 py-2.5 flex items-center justify-between rounded-lg transition-all', isSelected && 'bg-violet-500/15', isFocused && !isSelected && 'bg-white/[0.04]', !isSelected && !isFocused && 'hover:bg-white/[0.04]'), children: [_jsx("span", { className: cn('text-[13px]', isSelected ? 'text-violet-200 font-medium' : 'text-gray-300 font-normal'), children: option.label }), isSelected && (_jsx(Check, { size: 14, className: "text-violet-400", strokeWidth: 2.5 }))] })));
|
|
11
7
|
DropdownOption.displayName = 'DropdownOption';
|
|
12
8
|
const defaultDateRangeOptions = [
|
|
13
9
|
{ label: 'Today', value: 'today' },
|
|
@@ -19,24 +15,29 @@ const defaultDateRangeOptions = [
|
|
|
19
15
|
{ label: 'Last month', value: 'last_month' },
|
|
20
16
|
{ label: 'This quarter', value: 'this_quarter' },
|
|
21
17
|
];
|
|
22
|
-
|
|
23
|
-
const [isOpen, setIsOpen] = useState(false);
|
|
24
|
-
const [selectedRange, setSelectedRange] = useState(dateRange);
|
|
25
|
-
const dropdownRef = useRef(null);
|
|
26
|
-
useEffect(() => {
|
|
27
|
-
// eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect
|
|
28
|
-
setSelectedRange(dateRange);
|
|
29
|
-
}, [dateRange]);
|
|
18
|
+
const useClickOutsideDropdown = (dropdownRef, isOpen, onClose) => {
|
|
30
19
|
useEffect(() => {
|
|
20
|
+
if (!isOpen)
|
|
21
|
+
return;
|
|
31
22
|
const handleClickOutside = (event) => {
|
|
32
23
|
if (dropdownRef.current &&
|
|
33
24
|
!dropdownRef.current.contains(event.target)) {
|
|
34
|
-
|
|
25
|
+
onClose();
|
|
35
26
|
}
|
|
36
27
|
};
|
|
37
28
|
document.addEventListener('mousedown', handleClickOutside);
|
|
38
29
|
return () => document.removeEventListener('mousedown', handleClickOutside);
|
|
39
|
-
}, []);
|
|
30
|
+
}, [isOpen, onClose, dropdownRef]);
|
|
31
|
+
};
|
|
32
|
+
export function Header({ orgName = 'Global Retail Ops', dateRange = 'Last 7 days', onDateRangeChange, dateRangeOptions = defaultDateRangeOptions, userInitials = 'SJ', showNotification = true, onNotificationClick, onAvatarClick, minimal = false, onMenuClick, logoSrc, }) {
|
|
33
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
34
|
+
const [selectedRange, setSelectedRange] = useState(dateRange);
|
|
35
|
+
const dropdownRef = useRef(null);
|
|
36
|
+
// eslint-disable-next-line react-hooks/set-state-in-effect, react-hooks-extra/no-direct-set-state-in-use-effect
|
|
37
|
+
useEffect(() => {
|
|
38
|
+
setSelectedRange(dateRange);
|
|
39
|
+
}, [dateRange]);
|
|
40
|
+
useClickOutsideDropdown(dropdownRef, isOpen, () => setIsOpen(false));
|
|
40
41
|
const handleSelect = (option) => {
|
|
41
42
|
setSelectedRange(option.label);
|
|
42
43
|
setIsOpen(false);
|
|
@@ -47,6 +48,51 @@ export function Header({ orgName = 'Global Retail Ops', dateRange = 'Last 7 days
|
|
|
47
48
|
function LeftSection({ orgName, selectedRange, isOpen, setIsOpen, dropdownRef, dateRangeOptions, handleSelect, }) {
|
|
48
49
|
return (_jsxs("div", { className: "hidden md:flex items-center gap-3 sm:gap-6 min-w-0", children: [_jsx("span", { className: "text-sm font-medium text-white tracking-wide hidden sm:block truncate max-w-[140px] lg:max-w-none", children: orgName }), _jsx("div", { className: "hidden sm:block w-px h-4 bg-white/10" }), _jsx(DatePickerDropdown, { selectedRange: selectedRange, isOpen: isOpen, setIsOpen: setIsOpen, dropdownRef: dropdownRef, dateRangeOptions: dateRangeOptions, handleSelect: handleSelect })] }));
|
|
49
50
|
}
|
|
51
|
+
const handleDropdownKeyDown = (e, isOpen, focusedIndex, dateRangeOptions, setIsOpen, setFocusedIndex, handleSelect) => {
|
|
52
|
+
if (!isOpen) {
|
|
53
|
+
if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
|
|
54
|
+
e.preventDefault();
|
|
55
|
+
setIsOpen(true);
|
|
56
|
+
setFocusedIndex(0);
|
|
57
|
+
}
|
|
58
|
+
return;
|
|
59
|
+
}
|
|
60
|
+
switch (e.key) {
|
|
61
|
+
case 'Escape':
|
|
62
|
+
e.preventDefault();
|
|
63
|
+
setIsOpen(false);
|
|
64
|
+
setFocusedIndex(-1);
|
|
65
|
+
break;
|
|
66
|
+
case 'ArrowDown':
|
|
67
|
+
e.preventDefault();
|
|
68
|
+
setFocusedIndex(focusedIndex < dateRangeOptions.length - 1 ? focusedIndex + 1 : 0);
|
|
69
|
+
break;
|
|
70
|
+
case 'ArrowUp':
|
|
71
|
+
e.preventDefault();
|
|
72
|
+
setFocusedIndex(focusedIndex > 0 ? focusedIndex - 1 : dateRangeOptions.length - 1);
|
|
73
|
+
break;
|
|
74
|
+
case 'Home':
|
|
75
|
+
e.preventDefault();
|
|
76
|
+
setFocusedIndex(0);
|
|
77
|
+
break;
|
|
78
|
+
case 'End':
|
|
79
|
+
e.preventDefault();
|
|
80
|
+
setFocusedIndex(dateRangeOptions.length - 1);
|
|
81
|
+
break;
|
|
82
|
+
case 'Enter':
|
|
83
|
+
case ' ':
|
|
84
|
+
e.preventDefault();
|
|
85
|
+
if (focusedIndex >= 0 && focusedIndex < dateRangeOptions.length) {
|
|
86
|
+
handleSelect(dateRangeOptions[focusedIndex]);
|
|
87
|
+
setFocusedIndex(-1);
|
|
88
|
+
}
|
|
89
|
+
break;
|
|
90
|
+
case 'Tab':
|
|
91
|
+
setIsOpen(false);
|
|
92
|
+
setFocusedIndex(-1);
|
|
93
|
+
break;
|
|
94
|
+
}
|
|
95
|
+
};
|
|
50
96
|
function DatePickerDropdown({ selectedRange, isOpen, setIsOpen, dropdownRef, dateRangeOptions, handleSelect, }) {
|
|
51
97
|
const [focusedIndex, setFocusedIndex] = useState(-1);
|
|
52
98
|
const optionRefs = useRef([]);
|
|
@@ -56,49 +102,7 @@ function DatePickerDropdown({ selectedRange, isOpen, setIsOpen, dropdownRef, dat
|
|
|
56
102
|
}
|
|
57
103
|
}, [focusedIndex]);
|
|
58
104
|
const handleKeyDown = (e) => {
|
|
59
|
-
|
|
60
|
-
if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
|
|
61
|
-
e.preventDefault();
|
|
62
|
-
setIsOpen(true);
|
|
63
|
-
setFocusedIndex(0);
|
|
64
|
-
}
|
|
65
|
-
return;
|
|
66
|
-
}
|
|
67
|
-
switch (e.key) {
|
|
68
|
-
case 'Escape':
|
|
69
|
-
e.preventDefault();
|
|
70
|
-
setIsOpen(false);
|
|
71
|
-
setFocusedIndex(-1);
|
|
72
|
-
break;
|
|
73
|
-
case 'ArrowDown':
|
|
74
|
-
e.preventDefault();
|
|
75
|
-
setFocusedIndex(prev => prev < dateRangeOptions.length - 1 ? prev + 1 : 0);
|
|
76
|
-
break;
|
|
77
|
-
case 'ArrowUp':
|
|
78
|
-
e.preventDefault();
|
|
79
|
-
setFocusedIndex(prev => prev > 0 ? prev - 1 : dateRangeOptions.length - 1);
|
|
80
|
-
break;
|
|
81
|
-
case 'Home':
|
|
82
|
-
e.preventDefault();
|
|
83
|
-
setFocusedIndex(0);
|
|
84
|
-
break;
|
|
85
|
-
case 'End':
|
|
86
|
-
e.preventDefault();
|
|
87
|
-
setFocusedIndex(dateRangeOptions.length - 1);
|
|
88
|
-
break;
|
|
89
|
-
case 'Enter':
|
|
90
|
-
case ' ':
|
|
91
|
-
e.preventDefault();
|
|
92
|
-
if (focusedIndex >= 0 && focusedIndex < dateRangeOptions.length) {
|
|
93
|
-
handleSelect(dateRangeOptions[focusedIndex]);
|
|
94
|
-
setFocusedIndex(-1);
|
|
95
|
-
}
|
|
96
|
-
break;
|
|
97
|
-
case 'Tab':
|
|
98
|
-
setIsOpen(false);
|
|
99
|
-
setFocusedIndex(-1);
|
|
100
|
-
break;
|
|
101
|
-
}
|
|
105
|
+
handleDropdownKeyDown(e, isOpen, focusedIndex, dateRangeOptions, setIsOpen, setFocusedIndex, handleSelect);
|
|
102
106
|
};
|
|
103
107
|
return (_jsxs("div", { ref: dropdownRef, className: "relative", children: [_jsxs("button", { type: "button", onClick: () => setIsOpen(!isOpen), onKeyDown: handleKeyDown, "aria-label": "Select date range", "aria-expanded": isOpen, "aria-haspopup": "listbox", className: cn('h-[30px] px-3 flex items-center gap-2 rounded-full transition-all', isOpen
|
|
104
108
|
? 'bg-violet-500/15 outline outline-1 outline-violet-500/40 -outline-offset-1'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../src/components/dashboard/Header.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACxE,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../src/components/dashboard/Header.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MetricsCard.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/MetricsCard.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"MetricsCard.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/MetricsCard.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC;IACzD,SAAS,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC9B,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;CACzC;AAmCD,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,MAAM,EACN,UAAU,EACV,SAA8B,EAC9B,UAAqB,GACtB,EAAE,gBAAgB,2CA4BlB"}
|
|
@@ -1,33 +1,13 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
violet: {
|
|
7
|
-
bg: '#8B5CF6',
|
|
8
|
-
shadow: '0px 0px 8px rgba(124, 58, 237, 0.50)',
|
|
9
|
-
},
|
|
10
|
-
rose: {
|
|
11
|
-
bg: '#F43F5E',
|
|
12
|
-
shadow: '0px 0px 8px rgba(244, 63, 94, 0.50)',
|
|
13
|
-
},
|
|
14
|
-
gray: {
|
|
15
|
-
bg: '#6B7280',
|
|
16
|
-
shadow: 'none',
|
|
17
|
-
},
|
|
18
|
-
};
|
|
3
|
+
import { StatusBadge } from '../display/StatusBadge';
|
|
4
|
+
import { GlassPanel } from '../layout/GlassPanel';
|
|
5
|
+
import { CHART_COLORS } from './constants/gradients';
|
|
19
6
|
const DEFAULT_CHART_DATA = [25, 50, 35, 70, 100];
|
|
20
|
-
export function MetricsCard({ title, value, change, changeType, chartData = DEFAULT_CHART_DATA, chartColor = 'violet', }) {
|
|
21
|
-
// Safeguard for empty chartData
|
|
22
|
-
const safeChartData = chartData.length > 0 ? chartData : DEFAULT_CHART_DATA;
|
|
23
|
-
const maxValue = Math.max(...safeChartData);
|
|
24
|
-
const barColor = chartColors[chartColor];
|
|
25
|
-
return (_jsx(GlassPanel, { variant: "light", className: "relative overflow-hidden", children: _jsxs("div", { className: "p-4 sm:p-5 min-h-[100px] sm:min-h-[109px] flex flex-col", children: [_jsxs("div", { className: "flex items-start justify-between gap-2 mb-auto", children: [_jsx("span", { className: "text-[10px] sm:text-xs font-semibold uppercase tracking-wider text-gray-400", children: title }), _jsx(StatusBadge, { variant: changeType, children: change })] }), _jsxs("div", { className: "flex items-end justify-between mt-4", children: [_jsx("span", { className: "text-xl sm:text-2xl font-bold text-white", children: value }), _jsx(MiniChart, { chartData: safeChartData, maxValue: maxValue, barColor: barColor })] })] }) }));
|
|
26
|
-
}
|
|
27
7
|
function MiniChart({ chartData, maxValue, barColor }) {
|
|
28
|
-
return (_jsx("div", { className: "flex items-end gap-[2px]", children: chartData.map((
|
|
8
|
+
return (_jsx("div", { className: "flex items-end gap-[2px]", children: chartData.map((value, index) => {
|
|
29
9
|
const isLast = index === chartData.length - 1;
|
|
30
|
-
const height = Math.max((
|
|
10
|
+
const height = Math.max((value / maxValue) * 20, 3);
|
|
31
11
|
return (_jsx("div", { style: {
|
|
32
12
|
width: '12px',
|
|
33
13
|
height: `${height}px`,
|
|
@@ -35,7 +15,13 @@ function MiniChart({ chartData, maxValue, barColor }) {
|
|
|
35
15
|
background: isLast ? barColor.bg : '#374151',
|
|
36
16
|
boxShadow: isLast ? barColor.shadow : 'none',
|
|
37
17
|
opacity: isLast ? 1 : 0.5,
|
|
38
|
-
} }, `bar-${index}-${
|
|
18
|
+
} }, `bar-${index}-${value}`));
|
|
39
19
|
}) }));
|
|
40
20
|
}
|
|
21
|
+
export function MetricsCard({ title, value, change, changeType, chartData = DEFAULT_CHART_DATA, chartColor = 'violet', }) {
|
|
22
|
+
const safeChartData = chartData.length > 0 ? chartData : DEFAULT_CHART_DATA;
|
|
23
|
+
const maxValue = Math.max(...safeChartData);
|
|
24
|
+
const barColor = CHART_COLORS[chartColor];
|
|
25
|
+
return (_jsx(GlassPanel, { variant: "light", className: "relative overflow-hidden", children: _jsxs("div", { className: "p-4 sm:p-5 min-h-[100px] sm:min-h-[109px] flex flex-col", children: [_jsxs("div", { className: "flex items-start justify-between gap-2 mb-auto", children: [_jsx("span", { className: "text-[10px] sm:text-xs font-semibold uppercase tracking-wider text-gray-400", children: title }), _jsx(StatusBadge, { variant: changeType, children: change })] }), _jsxs("div", { className: "flex items-end justify-between mt-4", children: [_jsx("span", { className: "text-xl sm:text-2xl font-bold text-white", children: value }), _jsx(MiniChart, { chartData: safeChartData, maxValue: maxValue, barColor: barColor })] })] }) }));
|
|
26
|
+
}
|
|
41
27
|
//# sourceMappingURL=MetricsCard.js.map
|