Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clean up tooltips #3047

Merged
merged 2 commits into from
Nov 5, 2024
Merged

Clean up tooltips #3047

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4bb9c46
clean up tooltips
pablonyx Nov 4, 2024
5fe453e
nit: fix delay duration
pablonyx Nov 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
463 changes: 28 additions & 435 deletions web/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion web/package.json
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading