feat(web app): add "Show more" when answer is "too big"

app/src/css/style.css

@@ -287,6 +287,17 @@ small {
 .bubble-container.leon {
   text-align: left;
 }
+.show-more {
+  margin: 3px;
+  text-decoration: underline;
+}
+.show-more:hover {
+  cursor: pointer;
+  text-decoration: none;
+}
+.show-all {
+  max-height: 100% !important;
+}
 
 .bubble {
   padding: 6px 12px;
@@ -297,6 +308,7 @@ small {
   text-align: left;
   opacity: 0;
   animation: fadeIn 0.2s ease-in forwards;
+  overflow: hidden;
 }
 #feed .me .bubble {
   background-color: #1c75db;

app/src/js/chatbot.js

@@ -1,3 +1,5 @@
+const MAXIMUM_HEIGHT_TO_SHOW_SEE_MORE = 340
+
 export default class Chatbot {
   constructor() {
     this.et = new EventTarget()
@@ -95,6 +97,23 @@ export default class Chatbot {
 
     this.feed.appendChild(container).appendChild(bubble)
 
+    if (container.clientHeight > MAXIMUM_HEIGHT_TO_SHOW_SEE_MORE) {
+      bubble.style.maxHeight = `${MAXIMUM_HEIGHT_TO_SHOW_SEE_MORE}px`
+      const showMore = document.createElement('p')
+      const showMoreText = 'Show more'
+
+      showMore.className = 'show-more'
+      showMore.innerHTML = showMoreText
+
+      container.appendChild(showMore)
+
+      showMore.addEventListener('click', () => {
+        bubble.classList.toggle('show-all')
+        showMore.innerHTML =
+          showMore.innerHTML === showMoreText ? 'Show less' : showMoreText
+      })
+    }
+
     if (save) {
       this.saveBubble(who, string)
     }

app/tsconfig.json

@@ -2,6 +2,7 @@
   "compilerOptions": {
     "useDefineForClassFields": true,
     "skipLibCheck": true,
+    "module": "ESNext",
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,