Skip to content

Commit cda8a7f

Browse files
brendan-kellambrendan-kellam
committed
Add tooltips explaining each search mode
1 parent dd99109 commit cda8a7f

File tree

2 files changed

+99
-27
lines changed

2 files changed

+99
-27
lines changed

‎packages/web/src/app/[domain]/components/homepage/toolbar.tsx‎

Lines changed: 98 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,11 @@
33
import { KeyboardShortcutHint } from "@/app/components/keyboardShortcutHint";
44
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
55
import { Separator } from "@/components/ui/separator";
6+
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
67
import { cn } from "@/lib/utils";
8+
import { TriangleAlert } from "lucide-react";
9+
import Link from "next/link";
10+
import { useState } from "react";
711

812
export type SearchMode = "precise" | "agentic";
913

@@ -20,6 +24,8 @@ export const Toolbar = ({
2024
onSearchModeChange,
2125
children: tools,
2226
}: ToolbarProps) => {
27+
const [focusedSearchMode, setFocusedSearchMode] = useState<SearchMode>(searchMode);
28+
2329
return (
2430
<div className="w-full flex flex-row items-center bg-accent rounded-b-md px-2">
2531
{tools}
@@ -36,33 +42,99 @@ export const Toolbar = ({
3642
{searchMode === "precise" ? "Precise" : "Agentic"}
3743
</SelectValue>
3844
</SelectTrigger>
39-
<SelectContent>
40-
<SelectItem
41-
value="precise"
42-
className={cn(
43-
searchMode !== "precise" && "cursor-pointer",
44-
)}
45-
>
46-
<div className="flex flex-row items-center gap-2">
47-
<span>Precise</span>
48-
<Separator orientation="vertical" className="h-4" />
49-
<KeyboardShortcutHint shortcut="⌘ P" />
50-
</div>
51-
</SelectItem>
52-
<SelectItem
53-
value="agentic"
54-
className={cn(
55-
!isAgenticSearchEnabled && "cursor-not-allowed",
56-
(isAgenticSearchEnabled && searchMode !== "agentic") && "cursor-pointer",
57-
)}
58-
disabled={!isAgenticSearchEnabled}
45+
46+
<SelectContent
47+
className="overflow-visible relative"
48+
>
49+
<Tooltip
50+
delayDuration={100}
51+
open={focusedSearchMode === "precise"}
5952
>
60-
<div className="flex flex-row items-center gap-2">
61-
<span>Agentic</span>
62-
<Separator orientation="vertical" className="h-4" />
63-
<KeyboardShortcutHint shortcut="⌘ I" />
64-
</div>
65-
</SelectItem>
53+
<TooltipTrigger asChild>
54+
<div
55+
onMouseEnter={() => setFocusedSearchMode("precise")}
56+
onFocus={() => setFocusedSearchMode("precise")}
57+
>
58+
<SelectItem
59+
value="precise"
60+
className="cursor-pointer"
61+
>
62+
<div className="flex flex-row items-center gap-2">
63+
<span>Precise</span>
64+
<Separator orientation="vertical" className="h-4" />
65+
<KeyboardShortcutHint shortcut="⌘ P" />
66+
</div>
67+
68+
</SelectItem>
69+
<TooltipContent
70+
side="right"
71+
className="w-64 z-50"
72+
sideOffset={8}
73+
>
74+
<div className="flex flex-col gap-2">
75+
<p className="font-semibold">Precise Search</p>
76+
<Separator orientation="horizontal" className="w-full my-0.5" />
77+
<p>Search for exact matches using regular expressions and filters.</p>
78+
<Link
79+
href="https://docs.sourcebot.dev/docs/features/search/syntax-reference"
80+
className="text-link hover:underline"
81+
>
82+
Docs
83+
</Link>
84+
</div>
85+
</TooltipContent>
86+
</div>
87+
</TooltipTrigger>
88+
</Tooltip>
89+
<Tooltip delayDuration={100} open={focusedSearchMode === "agentic"}>
90+
<TooltipTrigger asChild>
91+
<div
92+
onMouseEnter={() => setFocusedSearchMode("agentic")}
93+
onFocus={() => setFocusedSearchMode("agentic")}
94+
>
95+
<SelectItem
96+
value="agentic"
97+
className={cn({
98+
"cursor-not-allowed": !isAgenticSearchEnabled,
99+
"cursor-pointer": isAgenticSearchEnabled,
100+
})}
101+
disabled={!isAgenticSearchEnabled}
102+
>
103+
104+
<div className="flex flex-row items-center gap-2">
105+
<span>Agentic</span>
106+
<Separator orientation="vertical" className="h-4" />
107+
<KeyboardShortcutHint shortcut="⌘ I" />
108+
</div>
109+
</SelectItem>
110+
</div>
111+
</TooltipTrigger>
112+
<TooltipContent
113+
side="right"
114+
className="w-64 z-50"
115+
sideOffset={8}
116+
>
117+
<div className="flex flex-col gap-2">
118+
<div className="flex flex-row items-center gap-2">
119+
{!isAgenticSearchEnabled && (
120+
<TriangleAlert className="w-4 h-4 text-destructive flex-shrink-0 text-yellow-300" />
121+
)}
122+
<p className="font-semibold">Agentic Search</p>
123+
</div>
124+
{!isAgenticSearchEnabled && (
125+
<p className="text-destructive">Language model not configured.</p>
126+
)}
127+
<Separator orientation="horizontal" className="w-full my-0.5" />
128+
<p>Use natural language to search, summarize and understand your codebase using a reasoning agent.</p>
129+
<Link
130+
href="https://docs.sourcebot.dev/docs/features/search/agentic-search"
131+
className="text-link hover:underline"
132+
>
133+
Docs
134+
</Link>
135+
</div>
136+
</TooltipContent>
137+
</Tooltip>
66138
</SelectContent>
67139
</Select>
68140
</div>

‎packages/web/src/app/globals.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@
111111
--muted-accent: hsl(218, 13%, 29%);
112112
--accent: hsl(217.2 32.6% 17.5%);
113113
--accent-foreground: hsl(210 40% 98%);
114-
--destructive: hsl(0 62.8% 30.6%);
114+
--destructive: hsl(0, 78%, 57%);
115115
--destructive-foreground: hsl(210 40% 98%);
116116
--border: hsl(217.2 32.6% 17.5%);
117117
--input: hsl(217.2 32.6% 17.5%);

0 commit comments

Comments
 (0)