feat: add text truncation hook and marquee support (#217)

Introduce a hook to detect text truncation for dynamic UI updates
Replace static marquee spans with a reusable marquee component in files and labels
Enable copying of terminal selection on mouse up and touch end

packages/ui/src/components/chat/FileAttachment.tsx

@@ -6,6 +6,7 @@ import { toast } from '@/components/ui';
 import { cn } from '@/lib/utils';
 import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip';
 import { useIsVSCodeRuntime } from '@/hooks/useRuntimeAPIs';
+import { useIsTextTruncated } from '@/hooks/useIsTextTruncated';
 import type { ToolPopupContent } from './message/types';
 
 export const FileAttachmentButton = memo(() => {
@@ -125,6 +126,21 @@ interface FileChipProps {
   onRemove: () => void;
 }
 
+const TruncatedMarquee = memo(({ text, title }: { text: string; title?: string }) => {
+  const labelRef = useRef<HTMLSpanElement>(null);
+  const isTruncated = useIsTextTruncated(labelRef, [text]);
+
+  return (
+    <span
+      ref={labelRef}
+      className={cn('marquee-text', isTruncated && 'marquee-text--active')}
+      title={title ?? text}
+    >
+      {text}
+    </span>
+  );
+});
+
 const FileChip = memo(({ file, onRemove }: FileChipProps) => {
   const getFileIcon = () => {
     if (file.mimeType.startsWith('image/')) {
@@ -169,9 +185,7 @@ const FileChip = memo(({ file, onRemove }: FileChipProps) => {
       </div>
       {getFileIcon()}
       <div className="overflow-hidden max-w-[200px]">
-        <span className="marquee-text" title={file.serverPath || displayName}>
-          {displayName}
-        </span>
+        <TruncatedMarquee text={displayName} title={file.serverPath || displayName} />
       </div>
       <span className="text-muted-foreground flex-shrink-0">
         ({formatFileSize(file.size)})
@@ -292,9 +306,7 @@ export const MessageFilesDisplay = memo(({ files, onShowPopup }: MessageFilesDis
             >
               {getFileIcon(file.mime)}
               <div className="overflow-hidden max-w-[200px]">
-                <span className="marquee-text">
-                  {extractFilename(file.filename)}
-                </span>
+                <TruncatedMarquee text={extractFilename(file.filename)} />
               </div>
             </div>
           ))}

packages/ui/src/components/chat/ModelControls.tsx

@@ -47,6 +47,7 @@ import { useConfigStore } from '@/stores/useConfigStore';
 import { useSessionStore } from '@/stores/useSessionStore';
 import { useUIStore } from '@/stores/useUIStore';
 import { useModelLists } from '@/hooks/useModelLists';
+import { useIsTextTruncated } from '@/hooks/useIsTextTruncated';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type IconComponent = ComponentType<any>;
@@ -1083,6 +1084,10 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
         return getModelDisplayName(currentModel);
     };
 
+    const currentModelDisplayName = getCurrentModelDisplayName();
+    const modelLabelRef = React.useRef<HTMLSpanElement>(null);
+    const isModelLabelTruncated = useIsTextTruncated(modelLabelRef, [currentModelDisplayName, isCompact]);
+
     const getAgentDisplayName = () => {
         if (!uiAgentName) {
             const primaryAgents = agents.filter(agent => isPrimaryMode(agent.mode));
@@ -2122,19 +2127,20 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
                                     ) : (
                                         <RiPencilAiLine className={cn(controlIconSize, 'text-muted-foreground')} />
                                     )}
-                                    <span
-                                        key={`${currentProviderId}-${currentModelId}`}
-                                        className={cn(
-                                            'model-controls__model-label overflow-hidden',
-                                            controlTextSize,
-                                            'font-medium whitespace-nowrap text-foreground min-w-0',
-                                            'max-w-[260px]'
-                                        )}
-                                    >
-                                        <span className="marquee-text">
-                                            {getCurrentModelDisplayName()}
+                                        <span
+                                            ref={modelLabelRef}
+                                            key={`${currentProviderId}-${currentModelId}`}
+                                            className={cn(
+                                                'model-controls__model-label overflow-hidden',
+                                                controlTextSize,
+                                                'font-medium whitespace-nowrap text-foreground min-w-0',
+                                                'max-w-[260px]'
+                                            )}
+                                        >
+                                            <span className={cn('marquee-text', isModelLabelTruncated && 'marquee-text--active')}>
+                                                {currentModelDisplayName}
+                                            </span>
                                         </span>
-                                    </span>
                                 </div>
                             </DropdownMenuTrigger>
                         </TooltipTrigger>
@@ -2246,13 +2252,14 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
                             <RiPencilAiLine className={cn(controlIconSize, 'text-muted-foreground')} />
                         )}
                         <span
+                            ref={modelLabelRef}
                             className={cn(
                                 'model-controls__model-label typography-micro font-medium overflow-hidden min-w-0',
                                 isMobile ? 'max-w-[120px]' : 'max-w-[220px]',
                             )}
                         >
-                            <span className="marquee-text">
-                                {getCurrentModelDisplayName()}
+                            <span className={cn('marquee-text', isModelLabelTruncated && 'marquee-text--active')}>
+                                {currentModelDisplayName}
                             </span>
                         </span>
                     </button>