Skip to content

Commit 91d852a

Browse files
samejrsamejr
committed
Keep the askAI button visible when collapsed
1 parent 9ff48b4 commit 91d852a

File tree

4 files changed

+75
-63
lines changed

4 files changed

+75
-63
lines changed

‎apps/webapp/app/components/AskAI.tsx‎

Lines changed: 49 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -47,36 +47,31 @@ export function AskAI({ isCollapsed = false }: { isCollapsed?: boolean }) {
4747
}
4848

4949
return (
50-
<div
51-
className={cn(
52-
"transition-opacity duration-200",
53-
isCollapsed ? "pointer-events-none opacity-0" : "opacity-100"
54-
)}
50+
<ClientOnly
51+
fallback={
52+
<Button
53+
variant="small-menu-item"
54+
data-action="ask-ai"
55+
hideShortcutKey
56+
data-modal-override-open-class-ask-ai="true"
57+
disabled
58+
className={isCollapsed ? "w-full justify-center" : ""}
59+
>
60+
<AISparkleIcon className="size-5" />
61+
</Button>
62+
}
5563
>
56-
<ClientOnly
57-
fallback={
58-
<Button
59-
variant="small-menu-item"
60-
data-action="ask-ai"
61-
hideShortcutKey
62-
data-modal-override-open-class-ask-ai="true"
63-
disabled
64-
>
65-
<AISparkleIcon className="size-5" />
66-
</Button>
67-
}
68-
>
69-
{() => <AskAIProvider websiteId={websiteId} />}
70-
</ClientOnly>
71-
</div>
64+
{() => <AskAIProvider websiteId={websiteId} isCollapsed={isCollapsed} />}
65+
</ClientOnly>
7266
);
7367
}
7468

7569
type AskAIProviderProps = {
7670
websiteId: string;
71+
isCollapsed?: boolean;
7772
};
7873

79-
function AskAIProvider({ websiteId }: AskAIProviderProps) {
74+
function AskAIProvider({ websiteId, isCollapsed = false }: AskAIProviderProps) {
8075
const [isOpen, setIsOpen] = useState(false);
8176
const [initialQuery, setInitialQuery] = useState<string | undefined>();
8277
const [searchParams, setSearchParams] = useSearchParams();
@@ -120,28 +115,38 @@ function AskAIProvider({ websiteId }: AskAIProviderProps) {
120115
}}
121116
botProtectionMechanism="hcaptcha"
122117
>
123-
<TooltipProvider disableHoverableContent>
124-
<Tooltip>
125-
<TooltipTrigger asChild>
126-
<div className="inline-flex">
127-
<Button
128-
variant="small-menu-item"
129-
data-action="ask-ai"
130-
shortcut={{ modifiers: ["mod"], key: "/", enabledOnInputElements: true }}
131-
hideShortcutKey
132-
data-modal-override-open-class-ask-ai="true"
133-
onClick={() => openAskAI()}
134-
>
135-
<AISparkleIcon className="size-5" />
136-
</Button>
137-
</div>
138-
</TooltipTrigger>
139-
<TooltipContent side="top" className="flex items-center gap-1 py-1.5 pl-2.5 pr-2 text-xs">
140-
Ask AI
141-
<ShortcutKey shortcut={{ modifiers: ["mod"], key: "/" }} variant="medium/bright" />
142-
</TooltipContent>
143-
</Tooltip>
144-
</TooltipProvider>
118+
<motion.div layout="position" transition={{ duration: 0.2, ease: "easeInOut" }}>
119+
<TooltipProvider disableHoverableContent>
120+
<Tooltip>
121+
<TooltipTrigger asChild>
122+
<div className={isCollapsed ? "w-full" : "inline-flex"}>
123+
<Button
124+
variant="small-menu-item"
125+
data-action="ask-ai"
126+
shortcut={{ modifiers: ["mod"], key: "/", enabledOnInputElements: true }}
127+
hideShortcutKey
128+
data-modal-override-open-class-ask-ai="true"
129+
onClick={() => openAskAI()}
130+
className={isCollapsed ? "w-full justify-center" : ""}
131+
>
132+
<AISparkleIcon className="size-5" />
133+
</Button>
134+
</div>
135+
</TooltipTrigger>
136+
<TooltipContent
137+
side={isCollapsed ? "right" : "top"}
138+
sideOffset={isCollapsed ? 8 : 4}
139+
className="flex items-center gap-1 py-1.5 pl-2.5 pr-2 text-xs"
140+
>
141+
Ask AI
142+
<span className="flex items-center">
143+
<ShortcutKey shortcut={{ modifiers: ["mod"] }} variant="medium/bright" />
144+
<ShortcutKey shortcut={{ key: "/" }} variant="medium/bright" />
145+
</span>
146+
</TooltipContent>
147+
</Tooltip>
148+
</TooltipProvider>
149+
</motion.div>
145150
<AskAIDialog
146151
initialQuery={initialQuery}
147152
isOpen={isOpen}

‎apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
import { cn } from "~/utils/cn";
1212
import { DiscordIcon, SlackIcon } from "@trigger.dev/companyicons";
1313
import { Fragment, useState } from "react";
14+
import { motion } from "framer-motion";
1415
import { useCurrentPlan } from "~/routes/_app.orgs.$organizationSlug/route";
1516
import { useShortcutKeys } from "~/hooks/useShortcutKeys";
1617
import { Feedback } from "../Feedback";
@@ -48,7 +49,8 @@ export function HelpAndFeedback({
4849
});
4950

5051
return (
51-
<Popover open={isHelpMenuOpen} onOpenChange={setHelpMenuOpen}>
52+
<motion.div layout="position" transition={{ duration: 0.2, ease: "easeInOut" }}>
53+
<Popover open={isHelpMenuOpen} onOpenChange={setHelpMenuOpen}>
5254
<SimpleTooltip
5355
button={
5456
<PopoverTrigger
@@ -58,7 +60,7 @@ export function HelpAndFeedback({
5860
)}
5961
>
6062
<span className="flex items-center gap-1.5 overflow-hidden">
61-
<QuestionMarkCircleIcon className="size-5 shrink-0 text-success" />
63+
<QuestionMarkCircleIcon className="size-5 min-w-5 shrink-0 text-success" />
6264
<span
6365
className={cn(
6466
"overflow-hidden whitespace-nowrap text-2sm text-text-bright transition-all duration-150",
@@ -74,14 +76,14 @@ export function HelpAndFeedback({
7476
isCollapsed ? "hidden" : ""
7577
)}
7678
shortcut={{ key: "h" }}
77-
variant="small"
79+
variant="medium/bright"
7880
/>
7981
</PopoverTrigger>
8082
}
8183
content={
8284
<span className="flex items-center gap-1">
8385
Help & Feedback
84-
<ShortcutKey shortcut={{ key: "h" }} variant="small" />
86+
<ShortcutKey shortcut={{ key: "h" }} variant="medium/bright" />
8587
</span>
8688
}
8789
side="right"
@@ -242,6 +244,7 @@ export function HelpAndFeedback({
242244
</div>
243245
</Fragment>
244246
</PopoverContent>
245-
</Popover>
247+
</Popover>
248+
</motion.div>
246249
);
247250
}

‎apps/webapp/app/components/navigation/SideMenu.tsx‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import {
2323
UsersIcon
2424
} from "@heroicons/react/20/solid";
2525
import { Link, useNavigation } from "@remix-run/react";
26-
import { motion } from "framer-motion";
26+
import { LayoutGroup, motion } from "framer-motion";
2727
import { useEffect, useRef, useState, type ReactNode } from "react";
2828
import simplur from "simplur";
2929
import { ConcurrencyIcon } from "~/assets/icons/ConcurrencyIcon";
@@ -412,10 +412,12 @@ export function SideMenu({
412412
</div>
413413
<div>
414414
<IncidentStatusPanel isCollapsed={isCollapsed} />
415-
<div className={cn("flex flex-col gap-1 border-t border-grid-bright p-1", isCollapsed && "items-center")}>
416-
<div className="flex w-full items-center justify-between">
417-
<HelpAndAI isCollapsed={isCollapsed} />
418-
</div>
415+
<motion.div
416+
layout
417+
transition={{ duration: 0.2, ease: "easeInOut" }}
418+
className={cn("flex flex-col gap-1 border-t border-grid-bright p-1", isCollapsed && "items-center")}
419+
>
420+
<HelpAndAI isCollapsed={isCollapsed} />
419421
{isFreeUser && (
420422
<CollapsibleHeight isCollapsed={isCollapsed}>
421423
<FreePlanUsage
@@ -424,7 +426,7 @@ export function SideMenu({
424426
/>
425427
</CollapsibleHeight>
426428
)}
427-
</div>
429+
</motion.div>
428430
</div>
429431
</div>
430432
);
@@ -771,11 +773,13 @@ function CollapsibleHeight({
771773

772774
function HelpAndAI({ isCollapsed }: { isCollapsed: boolean }) {
773775
return (
774-
<>
775-
<ShortcutsAutoOpen />
776-
<HelpAndFeedback isCollapsed={isCollapsed} />
777-
<AskAI isCollapsed={isCollapsed} />
778-
</>
776+
<LayoutGroup>
777+
<div className={cn("flex w-full", isCollapsed ? "flex-col-reverse gap-1" : "items-center justify-between")}>
778+
<ShortcutsAutoOpen />
779+
<HelpAndFeedback isCollapsed={isCollapsed} />
780+
<AskAI isCollapsed={isCollapsed} />
781+
</div>
782+
</LayoutGroup>
779783
);
780784
}
781785

@@ -894,8 +898,8 @@ function CollapseToggle({
894898
<TooltipContent side="right" className="flex items-center gap-2 text-xs">
895899
{isCollapsed ? "Expand" : "Collapse"}
896900
<span className="flex items-center">
897-
<ShortcutKey shortcut={{ modifiers: ["mod"] }} variant="small" />
898-
<ShortcutKey shortcut={{ key: "b" }} variant="small" />
901+
<ShortcutKey shortcut={{ modifiers: ["mod"] }} variant="medium/bright" />
902+
<ShortcutKey shortcut={{ key: "b" }} variant="medium/bright" />
899903
</span>
900904
</TooltipContent>
901905
</Tooltip>

‎apps/webapp/app/components/navigation/SideMenuSection.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export function SideMenuSection({
5555
</motion.div>
5656
{/* Divider - absolutely positioned, visible when sidebar is collapsed */}
5757
<motion.div
58-
className="absolute left-2 right-2 top-1 h-px bg-grid-bright"
58+
className="absolute left-2 right-2 top-1 h-px bg-charcoal-600"
5959
initial={false}
6060
animate={{
6161
opacity: isSideMenuCollapsed ? 1 : 0,

0 commit comments

Comments
 (0)