Truncate context item descriptions with a middle ellipsis

src/components/chat-item/prompt-input/prompt-input-quick-pick-item.ts

@@ -12,8 +12,24 @@ export interface PromptInputQuickPickItemProps {
 export class PromptInputQuickPickItem {
   render: ExtendedHTMLElement;
   private readonly props: PromptInputQuickPickItemProps;
+  private readonly descriptionText: ExtendedHTMLElement;
+  private readonly description: ExtendedHTMLElement;
+
   constructor (props: PromptInputQuickPickItemProps) {
     this.props = props;
+
+    this.descriptionText = DomBuilder.getInstance().build({
+      type: 'span',
+      classNames: [ 'mynah-chat-command-selector-command-description-text' ],
+      children: [ this.props.quickPickItem.description ?? '' ]
+    });
+    this.description =
+      DomBuilder.getInstance().build({
+        type: 'div',
+        classNames: [ 'mynah-chat-command-selector-command-description' ],
+        children: [ this.descriptionText ]
+      });
+
     this.render = DomBuilder.getInstance().build({
       type: 'div',
       testId: testIds.prompt.quickPickItem,
@@ -49,11 +65,7 @@ export class PromptInputQuickPickItem {
           innerHTML: this.props.quickPickItem.command
         },
         ...(this.props.quickPickItem.description !== undefined
-          ? [ {
-              type: 'div',
-              classNames: [ 'mynah-chat-command-selector-command-description' ],
-              children: [ this.props.quickPickItem.description ]
-            } ]
+          ? [ this.description ]
           : []),
         ...((this.props.quickPickItem.children != null) && this.props.quickPickItem.children.length > 0
           ? [
@@ -68,6 +80,8 @@ export class PromptInputQuickPickItem {
           : [])
       ]
     });
+
+    setTimeout(() => this.updateTruncation(), 5);
   }
 
   public readonly setFocus = (isFocused: boolean): void => {
@@ -82,4 +96,53 @@ export class PromptInputQuickPickItem {
   public readonly getItem = (): QuickActionCommand => {
     return this.props.quickPickItem;
   };
+
+  private readonly updateTruncation = (): void => {
+    if (this.props.quickPickItem.description == null) {
+      return;
+    }
+    const text = this.props.quickPickItem.description;
+
+    // Create a temporary span element to measure the text
+    const measureElement = document.createElement('span');
+    measureElement.style.visibility = 'hidden';
+    measureElement.style.position = 'absolute';
+    measureElement.style.whiteSpace = 'nowrap';
+    document.body.appendChild(measureElement);
+
+    // Measure the full text
+    measureElement.textContent = text;
+    const textWidth = measureElement.offsetWidth;
+
+    // Get the max width from the container
+    const maxWidth = this.description.offsetWidth;
+
+    // If the text fits, update with the original
+    if (textWidth <= maxWidth) {
+      document.body.removeChild(measureElement);
+      this.descriptionText.innerText = text;
+      return;
+    }
+
+    const ellipsis = '...';
+    let left = 0; let right = text.length;
+
+    while (left < right) {
+      const middle = Math.floor((left + right) / 2);
+      const truncated = text.slice(0, middle) + ellipsis + text.slice(-middle);
+      measureElement.textContent = truncated;
+
+      if (measureElement.offsetWidth > maxWidth) {
+        right = middle - 1;
+      } else {
+        left = middle + 1;
+      }
+    }
+
+    // Clean up by removing the temporary measure element
+    document.body.removeChild(measureElement);
+
+    // Update the truncated text
+    this.descriptionText.innerText = text.slice(0, right) + ellipsis + text.slice(-right);
+  };
 }

src/styles/components/chat/_chat-command-selector.scss

@@ -123,8 +123,11 @@
                 grid-row: 2;
                 grid-column: 2;
                 color: var(--mynah-color-text-weak);
+                white-space: nowrap;
+                overflow: hidden;
+                width: 100%;
             }
-
+              
             &:not(:hover):not(.target-command) {
                 > .mynah-chat-command-selector-command-arrow-icon {
                     opacity: 0;