mirror of
https://github.com/stack-auth/stack.git
synced 2026-06-13 21:01:21 +08:00
change ai chat button to always gradient, added experimental banner to ai chat.
This commit is contained in:
Madison
parent
c2eacd9c36
commit
fa0c582e2d
@ -144,162 +144,6 @@ body.home-page.scrolled [data-chat-drawer] {
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gradient-infection {
|
||||
0% {
|
||||
mask:
|
||||
radial-gradient(circle at 20% 80%, transparent 0%, transparent 100%),
|
||||
radial-gradient(circle at 80% 30%, transparent 0%, transparent 100%),
|
||||
radial-gradient(circle at 40% 20%, transparent 0%, transparent 100%);
|
||||
}
|
||||
20% {
|
||||
mask:
|
||||
radial-gradient(circle at 20% 80%, black 0%, black 15%, transparent 25%),
|
||||
radial-gradient(circle at 80% 30%, transparent 0%, transparent 100%),
|
||||
radial-gradient(circle at 40% 20%, transparent 0%, transparent 100%);
|
||||
}
|
||||
40% {
|
||||
mask:
|
||||
radial-gradient(circle at 20% 80%, black 0%, black 25%, transparent 40%),
|
||||
radial-gradient(circle at 80% 30%, black 0%, black 10%, transparent 20%),
|
||||
radial-gradient(circle at 40% 20%, transparent 0%, transparent 100%);
|
||||
}
|
||||
60% {
|
||||
mask:
|
||||
radial-gradient(circle at 20% 80%, black 0%, black 35%, transparent 55%),
|
||||
radial-gradient(circle at 80% 30%, black 0%, black 20%, transparent 35%),
|
||||
radial-gradient(circle at 40% 20%, black 0%, black 8%, transparent 18%);
|
||||
}
|
||||
80% {
|
||||
mask:
|
||||
radial-gradient(circle at 20% 80%, black 0%, black 50%, transparent 70%),
|
||||
radial-gradient(circle at 80% 30%, black 0%, black 35%, transparent 50%),
|
||||
radial-gradient(circle at 40% 20%, black 0%, black 18%, transparent 28%);
|
||||
}
|
||||
100% {
|
||||
mask:
|
||||
radial-gradient(circle at 20% 80%, black 0%, black 70%, transparent 90%),
|
||||
radial-gradient(circle at 80% 30%, black 0%, black 50%, transparent 70%),
|
||||
radial-gradient(circle at 40% 20%, black 0%, black 30%, transparent 45%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gradient-infection-2 {
|
||||
0% {
|
||||
mask:
|
||||
radial-gradient(circle at 70% 20%, transparent 0%, transparent 100%),
|
||||
radial-gradient(circle at 30% 70%, transparent 0%, transparent 100%),
|
||||
radial-gradient(circle at 60% 80%, transparent 0%, transparent 100%);
|
||||
}
|
||||
20% {
|
||||
mask:
|
||||
radial-gradient(circle at 70% 20%, black 0%, black 15%, transparent 25%),
|
||||
radial-gradient(circle at 30% 70%, transparent 0%, transparent 100%),
|
||||
radial-gradient(circle at 60% 80%, transparent 0%, transparent 100%);
|
||||
}
|
||||
40% {
|
||||
mask:
|
||||
radial-gradient(circle at 70% 20%, black 0%, black 25%, transparent 40%),
|
||||
radial-gradient(circle at 30% 70%, black 0%, black 10%, transparent 20%),
|
||||
radial-gradient(circle at 60% 80%, transparent 0%, transparent 100%);
|
||||
}
|
||||
60% {
|
||||
mask:
|
||||
radial-gradient(circle at 70% 20%, black 0%, black 35%, transparent 55%),
|
||||
radial-gradient(circle at 30% 70%, black 0%, black 20%, transparent 35%),
|
||||
radial-gradient(circle at 60% 80%, black 0%, black 8%, transparent 18%);
|
||||
}
|
||||
80% {
|
||||
mask:
|
||||
radial-gradient(circle at 70% 20%, black 0%, black 50%, transparent 70%),
|
||||
radial-gradient(circle at 30% 70%, black 0%, black 35%, transparent 50%),
|
||||
radial-gradient(circle at 60% 80%, black 0%, black 18%, transparent 28%);
|
||||
}
|
||||
100% {
|
||||
mask:
|
||||
radial-gradient(circle at 70% 20%, black 0%, black 70%, transparent 90%),
|
||||
radial-gradient(circle at 30% 70%, black 0%, black 50%, transparent 70%),
|
||||
radial-gradient(circle at 60% 80%, black 0%, black 30%, transparent 45%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gradient-infection-3 {
|
||||
0% {
|
||||
mask:
|
||||
radial-gradient(circle at 50% 10%, transparent 0%, transparent 100%),
|
||||
radial-gradient(circle at 10% 50%, transparent 0%, transparent 100%),
|
||||
radial-gradient(circle at 90% 60%, transparent 0%, transparent 100%);
|
||||
}
|
||||
20% {
|
||||
mask:
|
||||
radial-gradient(circle at 50% 10%, black 0%, black 15%, transparent 25%),
|
||||
radial-gradient(circle at 10% 50%, transparent 0%, transparent 100%),
|
||||
radial-gradient(circle at 90% 60%, transparent 0%, transparent 100%);
|
||||
}
|
||||
40% {
|
||||
mask:
|
||||
radial-gradient(circle at 50% 10%, black 0%, black 25%, transparent 40%),
|
||||
radial-gradient(circle at 10% 50%, black 0%, black 10%, transparent 20%),
|
||||
radial-gradient(circle at 90% 60%, transparent 0%, transparent 100%);
|
||||
}
|
||||
60% {
|
||||
mask:
|
||||
radial-gradient(circle at 50% 10%, black 0%, black 35%, transparent 55%),
|
||||
radial-gradient(circle at 10% 50%, black 0%, black 20%, transparent 35%),
|
||||
radial-gradient(circle at 90% 60%, black 0%, black 8%, transparent 18%);
|
||||
}
|
||||
80% {
|
||||
mask:
|
||||
radial-gradient(circle at 50% 10%, black 0%, black 50%, transparent 70%),
|
||||
radial-gradient(circle at 10% 50%, black 0%, black 35%, transparent 50%),
|
||||
radial-gradient(circle at 90% 60%, black 0%, black 18%, transparent 28%);
|
||||
}
|
||||
100% {
|
||||
mask:
|
||||
radial-gradient(circle at 50% 10%, black 0%, black 70%, transparent 90%),
|
||||
radial-gradient(circle at 10% 50%, black 0%, black 50%, transparent 70%),
|
||||
radial-gradient(circle at 90% 60%, black 0%, black 30%, transparent 45%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gradient-infection-4 {
|
||||
0% {
|
||||
mask:
|
||||
radial-gradient(circle at 80% 70%, transparent 0%, transparent 100%),
|
||||
radial-gradient(circle at 20% 30%, transparent 0%, transparent 100%),
|
||||
radial-gradient(circle at 60% 40%, transparent 0%, transparent 100%);
|
||||
}
|
||||
20% {
|
||||
mask:
|
||||
radial-gradient(circle at 80% 70%, black 0%, black 15%, transparent 25%),
|
||||
radial-gradient(circle at 20% 30%, transparent 0%, transparent 100%),
|
||||
radial-gradient(circle at 60% 40%, transparent 0%, transparent 100%);
|
||||
}
|
||||
40% {
|
||||
mask:
|
||||
radial-gradient(circle at 80% 70%, black 0%, black 25%, transparent 40%),
|
||||
radial-gradient(circle at 20% 30%, black 0%, black 10%, transparent 20%),
|
||||
radial-gradient(circle at 60% 40%, transparent 0%, transparent 100%);
|
||||
}
|
||||
60% {
|
||||
mask:
|
||||
radial-gradient(circle at 80% 70%, black 0%, black 35%, transparent 55%),
|
||||
radial-gradient(circle at 20% 30%, black 0%, black 20%, transparent 35%),
|
||||
radial-gradient(circle at 60% 40%, black 0%, black 8%, transparent 18%);
|
||||
}
|
||||
80% {
|
||||
mask:
|
||||
radial-gradient(circle at 80% 70%, black 0%, black 50%, transparent 70%),
|
||||
radial-gradient(circle at 20% 30%, black 0%, black 35%, transparent 50%),
|
||||
radial-gradient(circle at 60% 40%, black 0%, black 18%, transparent 28%);
|
||||
}
|
||||
100% {
|
||||
mask:
|
||||
radial-gradient(circle at 80% 70%, black 0%, black 70%, transparent 90%),
|
||||
radial-gradient(circle at 20% 30%, black 0%, black 50%, transparent 70%),
|
||||
radial-gradient(circle at 60% 40%, black 0%, black 30%, transparent 45%);
|
||||
}
|
||||
}
|
||||
|
||||
.chat-gradient-active {
|
||||
position: relative;
|
||||
background: hsl(var(--fd-muted)) !important;
|
||||
@ -315,41 +159,12 @@ body.home-page.scrolled [data-chat-drawer] {
|
||||
linear-gradient(-45deg, rgba(236, 72, 153, 0.8), rgba(59, 130, 246, 0.8), rgba(139, 92, 246, 0.8), rgba(6, 182, 212, 0.8)),
|
||||
linear-gradient(90deg, rgba(139, 92, 246, 0.85), rgba(6, 182, 212, 0.85), rgba(236, 72, 153, 0.85));
|
||||
background-size: 400% 400%, 300% 300%, 200% 200%;
|
||||
mask:
|
||||
radial-gradient(circle at 20% 80%, black 0%, black 70%, transparent 90%),
|
||||
radial-gradient(circle at 80% 30%, black 0%, black 50%, transparent 70%),
|
||||
radial-gradient(circle at 40% 20%, black 0%, black 30%, transparent 45%);
|
||||
mask-composite: add;
|
||||
-webkit-mask-composite: source-over;
|
||||
animation:
|
||||
gradient-infection 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards,
|
||||
gradient-shift 8s ease-in-out infinite 0.15s,
|
||||
gradient-noise 12s linear infinite 0.15s;
|
||||
gradient-shift 8s ease-in-out infinite,
|
||||
gradient-noise 12s linear infinite;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* Random animation variations */
|
||||
.chat-gradient-active.variant-2::before {
|
||||
animation:
|
||||
gradient-infection-2 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards,
|
||||
gradient-shift 8s ease-in-out infinite 0.15s,
|
||||
gradient-noise 12s linear infinite 0.15s;
|
||||
}
|
||||
|
||||
.chat-gradient-active.variant-3::before {
|
||||
animation:
|
||||
gradient-infection-3 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards,
|
||||
gradient-shift 8s ease-in-out infinite 0.15s,
|
||||
gradient-noise 12s linear infinite 0.15s;
|
||||
}
|
||||
|
||||
.chat-gradient-active.variant-4::before {
|
||||
animation:
|
||||
gradient-infection-4 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards,
|
||||
gradient-shift 8s ease-in-out infinite 0.15s,
|
||||
gradient-noise 12s linear infinite 0.15s;
|
||||
}
|
||||
|
||||
/* When not active, mask shrinks back */
|
||||
button:not(.chat-gradient-active)::before {
|
||||
mask: radial-gradient(circle at 20% 80%, transparent 0%, transparent 100%);
|
||||
|
||||
@ -336,6 +336,13 @@ export function AIChatDrawer() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Experimental Banner */}
|
||||
<div className="px-3 py-2 bg-yellow-500/5 border-b border-yellow-500/10">
|
||||
<p className="text-xs text-fd-muted-foreground">
|
||||
<span className="text-yellow-600 dark:text-yellow-400 font-medium">Experimental:</span> AI responses may not always be accurate—please verify important details.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Messages */}
|
||||
<div className="flex-1 overflow-y-auto p-3 space-y-3">
|
||||
{messages.length === 0 ? (
|
||||
|
||||
@ -51,29 +51,10 @@ function HomeAIChatToggleButton() {
|
||||
toggleChat: () => {},
|
||||
};
|
||||
|
||||
const [animationVariant, setAnimationVariant] = useState('');
|
||||
|
||||
// Generate random variant when chat is opened
|
||||
const handleToggle = () => {
|
||||
if (!isChatOpen) {
|
||||
// Generate random variant (2-4, keeping 1 as default)
|
||||
const variants = ['variant-2', 'variant-3', 'variant-4'];
|
||||
const randomVariant = variants[Math.floor(Math.random() * variants.length)];
|
||||
setAnimationVariant(randomVariant);
|
||||
} else {
|
||||
setAnimationVariant('');
|
||||
}
|
||||
toggleChat();
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={handleToggle}
|
||||
className={`flex items-center justify-center transition-all duration-500 ease-out w-8 h-8 rounded-lg text-sm font-medium relative overflow-hidden ${
|
||||
isChatOpen
|
||||
? `text-white chat-gradient-active ${animationVariant}`
|
||||
: 'bg-fd-muted text-fd-muted-foreground hover:text-fd-foreground hover:bg-fd-muted/80'
|
||||
}`}
|
||||
onClick={toggleChat}
|
||||
className="flex items-center justify-center transition-all duration-500 ease-out w-8 h-8 rounded-lg text-sm font-medium relative overflow-hidden text-white chat-gradient-active hover:scale-105 hover:brightness-110 hover:shadow-lg"
|
||||
title={isChatOpen ? 'Close AI chat' : 'Open AI chat'}
|
||||
>
|
||||
<Sparkles className="h-4 w-4 relative z-10" />
|
||||
|
||||
@ -74,7 +74,6 @@ function isNavLinkActive(pathname: string, navLink: NavLink): boolean {
|
||||
*/
|
||||
function AIChatToggleButton() {
|
||||
const sidebarContext = useSidebar();
|
||||
const [animationVariant, setAnimationVariant] = useState('');
|
||||
|
||||
// Return null if context is not available
|
||||
if (!sidebarContext) {
|
||||
@ -83,28 +82,13 @@ function AIChatToggleButton() {
|
||||
|
||||
const { isChatOpen, toggleChat } = sidebarContext;
|
||||
|
||||
// Generate random variant when chat is opened
|
||||
const handleToggle = () => {
|
||||
if (!isChatOpen) {
|
||||
// Generate random variant (2-4, keeping 1 as default)
|
||||
const variants = ['variant-2', 'variant-3', 'variant-4'];
|
||||
const randomVariant = variants[Math.floor(Math.random() * variants.length)];
|
||||
setAnimationVariant(randomVariant);
|
||||
} else {
|
||||
setAnimationVariant('');
|
||||
}
|
||||
toggleChat();
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
className={cn(
|
||||
'flex items-center justify-center rounded-md w-8 h-8 text-xs transition-all duration-500 ease-out relative overflow-hidden',
|
||||
isChatOpen
|
||||
? `text-white chat-gradient-active ${animationVariant}`
|
||||
: 'text-fd-muted-foreground hover:text-fd-foreground hover:bg-fd-muted/50'
|
||||
'text-white chat-gradient-active hover:scale-105 hover:brightness-110 hover:shadow-lg'
|
||||
)}
|
||||
onClick={handleToggle}
|
||||
onClick={toggleChat}
|
||||
title="AI Chat"
|
||||
>
|
||||
<Sparkles className="h-4 w-4 relative z-10" />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user