Skip to content

Commit dea7a8f

Browse files
pablonyxpablonyx
authored
Clean up tooltips (onyx-dot-app#3047)
* clean up tooltips * nit: fix delay duration
1 parent 9032fb4 commit dea7a8f

File tree

19 files changed

+438
-755
lines changed

19 files changed

+438
-755
lines changed

‎web/package-lock.json‎

Lines changed: 28 additions & 435 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
"@radix-ui/react-separator": "^1.1.0",
2323
"@radix-ui/react-slot": "^1.1.0",
2424
"@radix-ui/react-tabs": "^1.1.1",
25-
"@radix-ui/react-tooltip": "^1.0.7",
25+
"@radix-ui/react-tooltip": "^1.1.3",
2626
"@sentry/nextjs": "^8.34.0",
2727
"@stripe/stripe-js": "^4.6.0",
2828
"@types/js-cookie": "^3.0.3",

‎web/src/app/admin/assistants/AssistantEditor.tsx‎

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ import {
3636
TooltipContent,
3737
TooltipProvider,
3838
TooltipTrigger,
39-
} from "@radix-ui/react-tooltip";
39+
} from "@/components/ui/tooltip";
4040
import Link from "next/link";
4141
import { useRouter } from "next/navigation";
4242
import { useEffect, useState } from "react";
@@ -565,15 +565,13 @@ export function AssistantEditor({
565565
align="start"
566566
side="bottom"
567567
/>
568-
<TooltipProvider delayDuration={50}>
568+
<TooltipProvider>
569569
<Tooltip>
570570
<TooltipTrigger>
571571
<FiInfo size={12} />
572572
</TooltipTrigger>
573573
<TooltipContent side="top" align="center">
574-
<p className="bg-background-900 max-w-[200px] mb-1 text-sm rounded-lg p-1.5 text-white">
575-
This icon will visually represent your Assistant
576-
</p>
574+
This icon will visually represent your Assistant
577575
</TooltipContent>
578576
</Tooltip>
579577
</TooltipProvider>
@@ -609,16 +607,14 @@ export function AssistantEditor({
609607
<div className="block font-medium text-base">
610608
Default AI Model{" "}
611609
</div>
612-
<TooltipProvider delayDuration={50}>
610+
<TooltipProvider>
613611
<Tooltip>
614612
<TooltipTrigger>
615613
<FiInfo size={12} />
616614
</TooltipTrigger>
617615
<TooltipContent side="top" align="center">
618-
<p className="bg-background-900 max-w-[200px] mb-1 text-sm rounded-lg p-1.5 text-white">
619-
Select a Large Language Model (Generative AI model) to
620-
power this Assistant
621-
</p>
616+
Select a Large Language Model (Generative AI model) to
617+
power this Assistant
622618
</TooltipContent>
623619
</Tooltip>
624620
</TooltipProvider>
@@ -706,16 +702,14 @@ export function AssistantEditor({
706702
<div className="block font-medium text-base">
707703
Capabilities{" "}
708704
</div>
709-
<TooltipProvider delayDuration={50}>
705+
<TooltipProvider>
710706
<Tooltip>
711707
<TooltipTrigger>
712708
<FiInfo size={12} />
713709
</TooltipTrigger>
714710
<TooltipContent side="top" align="center">
715-
<p className="bg-background-900 max-w-[200px] mb-1 text-sm rounded-lg p-1.5 text-white">
716-
You can give your assistant advanced capabilities like
717-
image generation
718-
</p>
711+
You can give your assistant advanced capabilities like
712+
image generation
719713
</TooltipContent>
720714
</Tooltip>
721715
</TooltipProvider>
@@ -726,7 +720,7 @@ export function AssistantEditor({
726720

727721
<div className="mt-4 flex flex-col gap-y-4 ml-1">
728722
{imageGenerationTool && (
729-
<TooltipProvider delayDuration={50}>
723+
<TooltipProvider>
730724
<Tooltip>
731725
<TooltipTrigger asChild>
732726
<div
@@ -774,7 +768,7 @@ export function AssistantEditor({
774768
)}
775769

776770
{searchTool && (
777-
<TooltipProvider delayDuration={50}>
771+
<TooltipProvider>
778772
<Tooltip>
779773
<TooltipTrigger asChild>
780774
<div

‎web/src/app/admin/connector/[ccPairId]/IndexingAttemptsTable.tsx‎

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,12 @@ import { InfoIcon, SearchIcon } from "@/components/icons/icons";
2323
import Link from "next/link";
2424
import ExceptionTraceModal from "@/components/modals/ExceptionTraceModal";
2525
import { useRouter } from "next/navigation";
26-
import { Tooltip } from "@/components/tooltip/Tooltip";
26+
import {
27+
Tooltip,
28+
TooltipContent,
29+
TooltipProvider,
30+
TooltipTrigger,
31+
} from "@/components/ui/tooltip";
2732
import { FiInfo } from "react-icons/fi";
2833

2934
// This is the number of index attempts to display per page
@@ -237,15 +242,20 @@ export function IndexingAttemptsTable({ ccPair }: { ccPair: CCPairFullInfo }) {
237242
<TableHead>New Doc Cnt</TableHead>
238243
<TableHead>
239244
<div className="w-fit">
240-
<Tooltip
241-
width="max-w-sm"
242-
content="Total number of documents replaced in the index during this indexing attempt"
243-
>
244-
<span className="cursor-help flex items-center">
245-
Total Doc Cnt
246-
<InfoIcon className="ml-1 w-4 h-4" />
247-
</span>
248-
</Tooltip>
245+
<TooltipProvider>
246+
<Tooltip>
247+
<TooltipTrigger asChild>
248+
<span className="cursor-help flex items-center">
249+
Total Doc Cnt
250+
<InfoIcon className="ml-1 w-4 h-4" />
251+
</span>
252+
</TooltipTrigger>
253+
<TooltipContent>
254+
Total number of documents replaced in the index during
255+
this indexing attempt
256+
</TooltipContent>
257+
</Tooltip>
258+
</TooltipProvider>
249259
</div>
250260
</TableHead>
251261
<TableHead>Error Message</TableHead>

‎web/src/app/admin/documents/sets/page.tsx‎

Lines changed: 36 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,12 @@ import Link from "next/link";
3535
import { useRouter } from "next/navigation";
3636
import { TableHeader } from "@/components/ui/table";
3737
import { Badge } from "@/components/ui/badge";
38+
import {
39+
Tooltip,
40+
TooltipContent,
41+
TooltipProvider,
42+
TooltipTrigger,
43+
} from "@/components/ui/tooltip";
3844

3945
const numToDisplay = 50;
4046

@@ -47,8 +53,6 @@ const EditRow = ({
4753
}) => {
4854
const router = useRouter();
4955

50-
const [isSyncingTooltipOpen, setIsSyncingTooltipOpen] = useState(false);
51-
5256
if (!isEditable) {
5357
return (
5458
<div className="text-emphasis font-medium my-auto p-1">
@@ -59,37 +63,36 @@ const EditRow = ({
5963

6064
return (
6165
<div className="relative flex">
62-
{isSyncingTooltipOpen && (
63-
<div className="flex flex-nowrap absolute w-64 top-0 left-0 mt-8 border border-border bg-background px-3 py-2 rounded shadow-lg break-words z-40">
64-
<InfoIcon className="mt-1 flex flex-shrink-0 mr-2" /> Cannot update
65-
while syncing! Wait for the sync to finish, then try again.
66-
</div>
67-
)}
68-
<div
69-
className={`
70-
text-emphasis font-medium my-auto p-1 hover:bg-hover-light flex items-center select-none
71-
${documentSet.is_up_to_date ? "cursor-pointer" : "cursor-default"}
72-
`}
73-
style={{ wordBreak: "normal", overflowWrap: "break-word" }}
74-
onClick={() => {
75-
if (documentSet.is_up_to_date) {
76-
router.push(`/admin/documents/sets/${documentSet.id}`);
77-
}
78-
}}
79-
onMouseEnter={() => {
80-
if (!documentSet.is_up_to_date) {
81-
setIsSyncingTooltipOpen(true);
82-
}
83-
}}
84-
onMouseLeave={() => {
85-
if (!documentSet.is_up_to_date) {
86-
setIsSyncingTooltipOpen(false);
87-
}
88-
}}
89-
>
90-
<FiEdit2 className="mr-2 flex-shrink-0" />
91-
<span className="font-medium">{documentSet.name}</span>
92-
</div>
66+
<TooltipProvider>
67+
<Tooltip>
68+
<TooltipTrigger asChild>
69+
<div
70+
className={`
71+
text-emphasis font-medium my-auto p-1 hover:bg-hover-light flex items-center select-none
72+
${documentSet.is_up_to_date ? "cursor-pointer" : "cursor-default"}
73+
`}
74+
style={{ wordBreak: "normal", overflowWrap: "break-word" }}
75+
onClick={() => {
76+
if (documentSet.is_up_to_date) {
77+
router.push(`/admin/documents/sets/${documentSet.id}`);
78+
}
79+
}}
80+
>
81+
<FiEdit2 className="mr-2 flex-shrink-0" />
82+
<span className="font-medium">{documentSet.name}</span>
83+
</div>
84+
</TooltipTrigger>
85+
{!documentSet.is_up_to_date && (
86+
<TooltipContent maxWidth="max-w-sm">
87+
<div className="flex break-words break-keep whitespace-pre-wrap items-start">
88+
<InfoIcon className="mr-2 mt-0.5" />
89+
Cannot update while syncing! Wait for the sync to finish, then
90+
try again.
91+
</div>
92+
</TooltipContent>
93+
)}
94+
</Tooltip>
95+
</TooltipProvider>
9396
</div>
9497
);
9598
};

‎web/src/app/admin/indexing/status/CCPairIndexingStatusTable.tsx‎

Lines changed: 26 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,12 @@ import {
2727
FiRefreshCw,
2828
FiPauseCircle,
2929
} from "react-icons/fi";
30-
import { Tooltip } from "@/components/tooltip/Tooltip";
30+
import {
31+
Tooltip,
32+
TooltipContent,
33+
TooltipProvider,
34+
TooltipTrigger,
35+
} from "@/components/ui/tooltip";
3136
import { SourceIcon } from "@/components/SourceIcon";
3237
import { getSourceDisplayName } from "@/lib/sources";
3338
import { CustomTooltip } from "@/components/tooltip/CustomTooltip";
@@ -77,21 +82,26 @@ function SummaryRow({
7782

7883
<TableCell>
7984
<div className="text-sm text-gray-500">Active Connectors</div>
80-
<Tooltip
81-
content={`${summary.active} out of ${summary.count} connectors are active`}
82-
>
83-
<div className="flex items-center mt-1">
84-
<div className="w-full bg-gray-200 rounded-full h-2 mr-2">
85-
<div
86-
className="bg-green-500 h-2 rounded-full"
87-
style={{ width: `${activePercentage}%` }}
88-
></div>
89-
</div>
90-
<span className="text-sm font-medium whitespace-nowrap">
91-
{summary.active} ({activePercentage.toFixed(0)}%)
92-
</span>
93-
</div>
94-
</Tooltip>
85+
<TooltipProvider>
86+
<Tooltip>
87+
<TooltipTrigger asChild>
88+
<div className="flex items-center mt-1">
89+
<div className="w-full bg-gray-200 rounded-full h-2 mr-2">
90+
<div
91+
className="bg-green-500 h-2 rounded-full"
92+
style={{ width: `${activePercentage}%` }}
93+
></div>
94+
</div>
95+
<span className="text-sm font-medium whitespace-nowrap">
96+
{summary.active} ({activePercentage.toFixed(0)}%)
97+
</span>
98+
</div>
99+
</TooltipTrigger>
100+
<TooltipContent>
101+
{summary.active} out of {summary.count} connectors are active
102+
</TooltipContent>
103+
</Tooltip>
104+
</TooltipProvider>
95105
</TableCell>
96106

97107
{isPaidEnterpriseFeaturesEnabled && (

‎web/src/app/chat/files/InputBarPreview.tsx‎

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,12 @@ import { FileDescriptor } from "../interfaces";
33

44
import { FiX, FiLoader, FiFileText } from "react-icons/fi";
55
import { InputBarPreviewImage } from "./images/InputBarPreviewImage";
6-
import { Tooltip } from "@/components/tooltip/Tooltip";
6+
import {
7+
Tooltip,
8+
TooltipContent,
9+
TooltipProvider,
10+
TooltipTrigger,
11+
} from "@/components/ui/tooltip";
712

813
function DeleteButton({ onDelete }: { onDelete: () => void }) {
914
return (
@@ -138,14 +143,21 @@ export function InputBarPreview({
138143
</div>
139144
</div>
140145
<div className="ml-2 relative">
141-
<Tooltip content={file.name} side="top" align="start">
142-
<div
143-
ref={fileNameRef}
144-
className={`font-medium text-sm line-clamp-1 break-all ellipses max-w-48`}
145-
>
146-
{file.name}
147-
</div>
148-
</Tooltip>
146+
<TooltipProvider>
147+
<Tooltip>
148+
<TooltipTrigger asChild>
149+
<div
150+
ref={fileNameRef}
151+
className={`font-medium text-sm line-clamp-1 break-all ellipses max-w-48`}
152+
>
153+
{file.name}
154+
</div>
155+
</TooltipTrigger>
156+
<TooltipContent side="top" align="start">
157+
{file.name}
158+
</TooltipContent>
159+
</Tooltip>
160+
</TooltipProvider>
149161
</div>
150162
<button
151163
onClick={onDelete}

0 commit comments

Comments
 (0)