From 9b1ba7683ee8d12033170649a6fccca59f13b48c Mon Sep 17 00:00:00 2001
From: Chapman Pendery <cpendery@vt.edu>
Date: Fri, 6 Oct 2023 23:27:04 -0700
Subject: [PATCH] fix: massive descriptions breaking usability, truncate after
 reasonable length

Signed-off-by: Chapman Pendery <cpendery@vt.edu>
---
 src/ui/suggestions.tsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/ui/suggestions.tsx b/src/ui/suggestions.tsx
index cad8155..90df6ff 100644
--- a/src/ui/suggestions.tsx
+++ b/src/ui/suggestions.tsx
@@ -1,25 +1,41 @@
 import React, { useState, useCallback, useEffect } from "react";
 import { Text, useInput, Box, measureElement, DOMElement } from "ink";
+import wrapAnsi from "wrap-ansi";
 import { Suggestion } from "../runtime/model.js";
 
 const MaxSuggestions = 5;
 const SuggestionWidth = 40;
 const DescriptionWidth = 30;
+const DescriptionMaxHeight = 6;
 const BorderWidth = 2;
 const ActiveSuggestionBackgroundColor = "#7D56F4";
 
 function Description({ description }: { description: string }) {
+  wrapAnsi(description, DescriptionWidth, { hard: true });
   if (description.length !== 0) {
     return (
       <Box flexDirection="column">
         <Box borderStyle="single" width={DescriptionWidth}>
-          <Text>{description}</Text>
+          <Text>{truncateDescription(description, DescriptionMaxHeight)}</Text>
         </Box>
       </Box>
     );
   }
 }
 
+function truncateDescription(description: string, maxHeight: number) {
+  const wrappedText = wrapAnsi(description, DescriptionWidth - BorderWidth, {
+    trim: false,
+    hard: true,
+  });
+  const lines = wrappedText.split("\n");
+  const truncatedLines = lines.slice(0, maxHeight);
+  if (lines.length > maxHeight) {
+    truncatedLines[maxHeight - 1] = [...truncatedLines[maxHeight - 1]].slice(0, -1).join("") + "…";
+  }
+  return truncatedLines.join("\n");
+}
+
 function SuggestionList({ suggestions, activeSuggestionIdx }: { suggestions: Suggestion[]; activeSuggestionIdx: number }) {
   return (
     <Box flexDirection="column">