Skip to content

Commit

Permalink
Clean up tooltips (#3047)
Browse files Browse the repository at this point in the history 
* clean up tooltips

* nit: fix delay duration
  • Loading branch information
@pablonyx
pablonyx authored Nov 5, 2024
1 parent 9032fb4 commit dea7a8f
Show file tree
Hide file tree
Showing 19 changed files with 438 additions and 755 deletions.
463 changes: 28 additions & 435 deletions web/package-lock.json
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion web/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
"@radix-ui/react-separator": "^1.1.0",
"@radix-ui/react-slot": "^1.1.0",
"@radix-ui/react-tabs": "^1.1.1",
"@radix-ui/react-tooltip": "^1.0.7",
"@radix-ui/react-tooltip": "^1.1.3",
"@sentry/nextjs": "^8.34.0",
"@stripe/stripe-js": "^4.6.0",
"@types/js-cookie": "^3.0.3",
Expand Down
28 changes: 11 additions & 17 deletions web/src/app/admin/assistants/AssistantEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ import {
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@radix-ui/react-tooltip";
} from "@/components/ui/tooltip";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
Expand Down Expand Up @@ -565,15 +565,13 @@ export function AssistantEditor({
align="start"
side="bottom"
/>
<TooltipProvider delayDuration={50}>
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<FiInfo size={12} />
</TooltipTrigger>
<TooltipContent side="top" align="center">
<p className="bg-background-900 max-w-[200px] mb-1 text-sm rounded-lg p-1.5 text-white">
This icon will visually represent your Assistant
</p>
This icon will visually represent your Assistant
</TooltipContent>
</Tooltip>
</TooltipProvider>
Expand Down Expand Up @@ -609,16 +607,14 @@ export function AssistantEditor({
<div className="block font-medium text-base">
Default AI Model{" "}
</div>
<TooltipProvider delayDuration={50}>
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<FiInfo size={12} />
</TooltipTrigger>
<TooltipContent side="top" align="center">
<p className="bg-background-900 max-w-[200px] mb-1 text-sm rounded-lg p-1.5 text-white">
Select a Large Language Model (Generative AI model) to
power this Assistant
</p>
Select a Large Language Model (Generative AI model) to
power this Assistant
</TooltipContent>
</Tooltip>
</TooltipProvider>
Expand Down Expand Up @@ -706,16 +702,14 @@ export function AssistantEditor({
<div className="block font-medium text-base">
Capabilities{" "}
</div>
<TooltipProvider delayDuration={50}>
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<FiInfo size={12} />
</TooltipTrigger>
<TooltipContent side="top" align="center">
<p className="bg-background-900 max-w-[200px] mb-1 text-sm rounded-lg p-1.5 text-white">
You can give your assistant advanced capabilities like
image generation
</p>
You can give your assistant advanced capabilities like
image generation
</TooltipContent>
</Tooltip>
</TooltipProvider>
Expand All @@ -726,7 +720,7 @@ export function AssistantEditor({

<div className="mt-4 flex flex-col gap-y-4 ml-1">
{imageGenerationTool && (
<TooltipProvider delayDuration={50}>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<div
Expand Down Expand Up @@ -774,7 +768,7 @@ export function AssistantEditor({
)}

{searchTool && (
<TooltipProvider delayDuration={50}>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<div
Expand Down
30 changes: 20 additions & 10 deletions web/src/app/admin/connector/[ccPairId]/IndexingAttemptsTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,12 @@ import { InfoIcon, SearchIcon } from "@/components/icons/icons";
import Link from "next/link";
import ExceptionTraceModal from "@/components/modals/ExceptionTraceModal";
import { useRouter } from "next/navigation";
import { Tooltip } from "@/components/tooltip/Tooltip";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { FiInfo } from "react-icons/fi";

// This is the number of index attempts to display per page
Expand Down Expand Up @@ -237,15 +242,20 @@ export function IndexingAttemptsTable({ ccPair }: { ccPair: CCPairFullInfo }) {
<TableHead>New Doc Cnt</TableHead>
<TableHead>
<div className="w-fit">
<Tooltip
width="max-w-sm"
content="Total number of documents replaced in the index during this indexing attempt"
>
<span className="cursor-help flex items-center">
Total Doc Cnt
<InfoIcon className="ml-1 w-4 h-4" />
</span>
</Tooltip>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<span className="cursor-help flex items-center">
Total Doc Cnt
<InfoIcon className="ml-1 w-4 h-4" />
</span>
</TooltipTrigger>
<TooltipContent>
Total number of documents replaced in the index during
this indexing attempt
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
</TableHead>
<TableHead>Error Message</TableHead>
Expand Down
69 changes: 36 additions & 33 deletions web/src/app/admin/documents/sets/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,12 @@ import Link from "next/link";
import { useRouter } from "next/navigation";
import { TableHeader } from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";

const numToDisplay = 50;

Expand All @@ -47,8 +53,6 @@ const EditRow = ({
}) => {
const router = useRouter();

const [isSyncingTooltipOpen, setIsSyncingTooltipOpen] = useState(false);

if (!isEditable) {
return (
<div className="text-emphasis font-medium my-auto p-1">
Expand All @@ -59,37 +63,36 @@ const EditRow = ({

return (
<div className="relative flex">
{isSyncingTooltipOpen && (
<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">
<InfoIcon className="mt-1 flex flex-shrink-0 mr-2" /> Cannot update
while syncing! Wait for the sync to finish, then try again.
</div>
)}
<div
className={`
text-emphasis font-medium my-auto p-1 hover:bg-hover-light flex items-center select-none
${documentSet.is_up_to_date ? "cursor-pointer" : "cursor-default"}
`}
style={{ wordBreak: "normal", overflowWrap: "break-word" }}
onClick={() => {
if (documentSet.is_up_to_date) {
router.push(`/admin/documents/sets/${documentSet.id}`);
}
}}
onMouseEnter={() => {
if (!documentSet.is_up_to_date) {
setIsSyncingTooltipOpen(true);
}
}}
onMouseLeave={() => {
if (!documentSet.is_up_to_date) {
setIsSyncingTooltipOpen(false);
}
}}
>
<FiEdit2 className="mr-2 flex-shrink-0" />
<span className="font-medium">{documentSet.name}</span>
</div>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<div
className={`
text-emphasis font-medium my-auto p-1 hover:bg-hover-light flex items-center select-none
${documentSet.is_up_to_date ? "cursor-pointer" : "cursor-default"}
`}
style={{ wordBreak: "normal", overflowWrap: "break-word" }}
onClick={() => {
if (documentSet.is_up_to_date) {
router.push(`/admin/documents/sets/${documentSet.id}`);
}
}}
>
<FiEdit2 className="mr-2 flex-shrink-0" />
<span className="font-medium">{documentSet.name}</span>
</div>
</TooltipTrigger>
{!documentSet.is_up_to_date && (
<TooltipContent maxWidth="max-w-sm">
<div className="flex break-words break-keep whitespace-pre-wrap items-start">
<InfoIcon className="mr-2 mt-0.5" />
Cannot update while syncing! Wait for the sync to finish, then
try again.
</div>
</TooltipContent>
)}
</Tooltip>
</TooltipProvider>
</div>
);
};
Expand Down
42 changes: 26 additions & 16 deletions web/src/app/admin/indexing/status/CCPairIndexingStatusTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,12 @@ import {
FiRefreshCw,
FiPauseCircle,
} from "react-icons/fi";
import { Tooltip } from "@/components/tooltip/Tooltip";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { SourceIcon } from "@/components/SourceIcon";
import { getSourceDisplayName } from "@/lib/sources";
import { CustomTooltip } from "@/components/tooltip/CustomTooltip";
Expand Down Expand Up @@ -77,21 +82,26 @@ function SummaryRow({

<TableCell>
<div className="text-sm text-gray-500">Active Connectors</div>
<Tooltip
content={`${summary.active} out of ${summary.count} connectors are active`}
>
<div className="flex items-center mt-1">
<div className="w-full bg-gray-200 rounded-full h-2 mr-2">
<div
className="bg-green-500 h-2 rounded-full"
style={{ width: `${activePercentage}%` }}
></div>
</div>
<span className="text-sm font-medium whitespace-nowrap">
{summary.active} ({activePercentage.toFixed(0)}%)
</span>
</div>
</Tooltip>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<div className="flex items-center mt-1">
<div className="w-full bg-gray-200 rounded-full h-2 mr-2">
<div
className="bg-green-500 h-2 rounded-full"
style={{ width: `${activePercentage}%` }}
></div>
</div>
<span className="text-sm font-medium whitespace-nowrap">
{summary.active} ({activePercentage.toFixed(0)}%)
</span>
</div>
</TooltipTrigger>
<TooltipContent>
{summary.active} out of {summary.count} connectors are active
</TooltipContent>
</Tooltip>
</TooltipProvider>
</TableCell>

{isPaidEnterpriseFeaturesEnabled && (
Expand Down
30 changes: 21 additions & 9 deletions web/src/app/chat/files/InputBarPreview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,12 @@ import { FileDescriptor } from "../interfaces";

import { FiX, FiLoader, FiFileText } from "react-icons/fi";
import { InputBarPreviewImage } from "./images/InputBarPreviewImage";
import { Tooltip } from "@/components/tooltip/Tooltip";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";

function DeleteButton({ onDelete }: { onDelete: () => void }) {
return (
Expand Down Expand Up @@ -138,14 +143,21 @@ export function InputBarPreview({
</div>
</div>
<div className="ml-2 relative">
<Tooltip content={file.name} side="top" align="start">
<div
ref={fileNameRef}
className={`font-medium text-sm line-clamp-1 break-all ellipses max-w-48`}
>
{file.name}
</div>
</Tooltip>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<div
ref={fileNameRef}
className={`font-medium text-sm line-clamp-1 break-all ellipses max-w-48`}
>
{file.name}
</div>
</TooltipTrigger>
<TooltipContent side="top" align="start">
{file.name}
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<button
onClick={onDelete}
Expand Down
Loading

0 comments on commit dea7a8f

Please sign in to comment.