Make truncated text easier to see in tooltip

Author: zeroliu

src/components/chat-components/ContextBadges.tsx

@@ -3,6 +3,7 @@ import { ExternalLink, FileText, Folder, Hash, X } from "lucide-react";
 import { TFile } from "obsidian";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { TruncatedText } from "@/components/TruncatedText";
 
 interface BaseContextBadgeProps {
   onRemove?: () => void;
@@ -26,13 +27,17 @@ interface ContextFolderBadgeProps extends BaseContextBadgeProps {
 }
 
 export function ContextNoteBadge({ note, isActive = false, onRemove }: ContextNoteBadgeProps) {
+  const tooltipContent = <div className="tw-text-left">{note.path}</div>;
+
   return (
     <Badge
       className={`tw-items-center tw-py-0 tw-pl-2 tw-text-xs ${onRemove ? "tw-pr-0.5" : "tw-pr-2"}`}
     >
       <div className="tw-flex tw-items-center tw-gap-1">
         <FileText className="tw-size-3" />
-        <span className="tw-max-w-40 tw-truncate">{note.basename}</span>
+        <TruncatedText className="tw-max-w-40" tooltipContent={tooltipContent}>
+          {note.basename}
+        </TruncatedText>
         {isActive && <span className="tw-text-xs tw-text-faint">Current</span>}
         {note.extension === "pdf" && <span className="tw-text-xs tw-text-faint">pdf</span>}
       </div>
@@ -68,7 +73,9 @@ export function ContextUrlBadge({ url, onRemove }: ContextUrlBadgeProps) {
     >
       <div className="tw-flex tw-items-center tw-gap-1">
         <ExternalLink className="tw-size-3" />
-        <span className="tw-max-w-40 tw-truncate">{getDomain(url)}</span>
+        <TruncatedText className="tw-max-w-40" tooltipContent={url}>
+          {getDomain(url)}
+        </TruncatedText>
       </div>
       {onRemove && (
         <Button
@@ -95,7 +102,9 @@ export function ContextTagBadge({ tag, onRemove }: ContextTagBadgeProps) {
     >
       <div className="tw-flex tw-items-center tw-gap-1">
         <Hash className="tw-size-3" />
-        <span className="tw-max-w-40 tw-truncate">{displayTag}</span>
+        <TruncatedText className="tw-max-w-40" tooltipContent={tag}>
+          {displayTag}
+        </TruncatedText>
       </div>
       {onRemove && (
         <Button
@@ -119,7 +128,9 @@ export function ContextFolderBadge({ folder, onRemove }: ContextFolderBadgeProps
     >
       <div className="tw-flex tw-items-center tw-gap-1">
         <Folder className="tw-size-3" />
-        <span className="tw-max-w-40 tw-truncate">{folder}</span>
+        <TruncatedText className="tw-max-w-40" tooltipContent={folder}>
+          {folder}
+        </TruncatedText>
       </div>
       {onRemove && (
         <Button

src/components/chat-components/pills/FolderPillNode.tsx

@@ -69,9 +69,19 @@ export class FolderPillNode extends BasePillNode {
    * Override to display folder name wrapped in curly braces
    */
   decorate(): JSX.Element {
+    const tooltipContent = <div className="tw-text-left">{this.getFolderPath()}</div>;
+
     return (
-      <Badge variant="secondary" className="tw-inline-flex tw-items-center tw-gap-1 tw-text-xs">
-        <TruncatedPillText content={this.getFolderPath()} openBracket="{" closeBracket="}" />
+      <Badge
+        variant="secondary"
+        className="tw-mx-0.5 tw-inline-flex tw-items-center tw-gap-1 tw-px-2 tw-py-0 tw-align-middle tw-text-xs"
+      >
+        <TruncatedPillText
+          content={this.getFolderPath()}
+          openBracket="{"
+          closeBracket="}"
+          tooltipContent={tooltipContent}
+        />
       </Badge>
     );
   }

src/components/chat-components/pills/NotePillNode.tsx

@@ -144,13 +144,20 @@ function NotePillComponent({ node }: NotePillComponentProps): JSX.Element {
   const isActive = node.getActive();
   const isPdf = notePath.toLowerCase().endsWith(".pdf");
 
+  const tooltipContent = <div className="tw-text-left">{notePath}</div>;
+
   return (
     <Badge
       variant="secondary"
-      className={cn("tw-mx-0.5 tw-items-center tw-px-2 tw-py-0 tw-text-xs")}
+      className={cn("tw-mx-0.5 tw-items-center tw-px-2 tw-py-0 tw-align-middle tw-text-xs")}
     >
       <div className="tw-flex tw-items-center tw-gap-1">
-        <TruncatedPillText content={noteTitle} openBracket="[[" closeBracket="]]" />
+        <TruncatedPillText
+          content={noteTitle}
+          openBracket="[["
+          closeBracket="]]"
+          tooltipContent={tooltipContent}
+        />
         {isActive && <span className="tw-text-xs tw-text-faint">Current</span>}
         {isPdf && <span className="tw-text-xs tw-text-faint">pdf</span>}
       </div>

src/components/chat-components/pills/TagPillNode.tsx

@@ -1,5 +1,8 @@
+import React from "react";
 import { $getRoot, DOMConversionMap, DOMConversionOutput, LexicalNode, NodeKey } from "lexical";
+import { Badge } from "@/components/ui/badge";
 import { BasePillNode, SerializedBasePillNode } from "./BasePillNode";
+import { TruncatedPillText } from "./TruncatedPillText";
 
 export interface SerializedTagPillNode extends SerializedBasePillNode {
   type: "tag-pill";
@@ -59,6 +62,20 @@ export class TagPillNode extends BasePillNode {
   getTagName(): string {
     return this.getValue();
   }
+
+  /**
+   * Override to display tag name with truncation and tooltip support
+   */
+  decorate(): JSX.Element {
+    return (
+      <Badge
+        variant="secondary"
+        className="tw-mx-0.5 tw-inline-flex tw-items-center tw-gap-1 tw-px-2 tw-py-0 tw-align-middle tw-text-xs"
+      >
+        <TruncatedPillText content={this.getValue()} openBracket="" closeBracket="" />
+      </Badge>
+    );
+  }
 }
 
 function convertTagPillElement(domNode: HTMLElement): DOMConversionOutput | null {

src/components/chat-components/pills/TruncatedPillText.tsx

@@ -1,17 +1,20 @@
-import React from "react";
+import React, { useRef, useState } from "react";
 import { cn } from "@/lib/utils";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
 interface TruncatedPillTextProps {
   content: string;
   openBracket: string;
   closeBracket: string;
   className?: string;
   maxWidth?: string;
+  tooltipContent?: React.ReactNode;
 }
 
 /**
  * Component that truncates text content in the middle while preserving opening and closing brackets.
  * Shows ellipsis in the middle when content is too long, ensuring brackets are always visible.
+ * Displays a tooltip with full content when text is truncated.
  *
  * @example
  * // Short text: [[Note Name]]
@@ -23,12 +26,35 @@ export function TruncatedPillText({
   closeBracket,
   className,
   maxWidth = "tw-max-w-40",
+  tooltipContent,
 }: TruncatedPillTextProps): JSX.Element {
+  const textRef = useRef<HTMLSpanElement | null>(null);
+  const [open, setOpen] = useState<boolean>(false);
+
+  const onOpenChange = (isOpen: boolean): void => {
+    // Only show tooltip if the text is actually truncated
+    const isTruncated = textRef.current
+      ? textRef.current.offsetWidth < textRef.current.scrollWidth
+      : false;
+    setOpen(isOpen && isTruncated);
+  };
+
   return (
-    <span className={cn("tw-inline-flex tw-items-center", maxWidth, className)}>
-      <span className="tw-shrink-0">{openBracket}</span>
-      <span className="tw-min-w-0 tw-truncate">{content}</span>
-      <span className="tw-shrink-0">{closeBracket}</span>
-    </span>
+    <TooltipProvider delayDuration={300}>
+      <Tooltip open={open} onOpenChange={onOpenChange}>
+        <TooltipTrigger asChild>
+          <span className={cn("tw-inline-flex tw-items-center", maxWidth, className)}>
+            <span className="tw-shrink-0">{openBracket}</span>
+            <span ref={textRef} className="tw-min-w-0 tw-truncate">
+              {content}
+            </span>
+            <span className="tw-shrink-0">{closeBracket}</span>
+          </span>
+        </TooltipTrigger>
+        <TooltipContent className="tw-max-w-64 tw-text-wrap tw-break-words">
+          {tooltipContent || `${openBracket}${content}${closeBracket}`}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
   );
 }