✨ feat: Quality-of-Life Chat/Edit-Message Enhancements (#5194)

* fix: rendering error for mermaid flowchart syntax

* feat: add submit button ref and enable submit on Ctrl+Enter in EditMessage component

* feat: add save button and keyboard shortcuts for saving and canceling in EditMessage component

* feat: collapse chat on max height

* refactor: implement scrollable detection for textarea on key down events and initial render

* feat: add regenerate button for error handling in HoverButtons, closes #3658

* feat: add functionality to edit latest user message with the up arrow key when the input is empty

client/src/utils/artifacts.ts

@@ -131,7 +131,7 @@ const standardDependencies = {
 
 const mermaidDependencies = Object.assign(
   {
-    mermaid: '^11.0.2',
+    mermaid: '^11.4.1',
     'react-zoom-pan-pinch': '^3.6.1',
   },
   standardDependencies,

client/src/utils/mermaid.ts

@@ -50,7 +50,6 @@ const MermaidDiagram: React.FC<MermaidDiagramProps> = ({ content }) => {
         diagramPadding: 8,
         htmlLabels: true,
         useMaxWidth: true,
-        defaultRenderer: "dagre-d3",
         padding: 15,
         wrappingWidth: 200,
       },

client/src/utils/textarea.ts

@@ -73,3 +73,15 @@ export function removeCharIfLast(textarea: HTMLTextAreaElement, charToRemove: st
 
   textarea.focus();
 }
+
+/**
+ * Check if the textarea is scrollable.
+ * @param element
+ * @returns
+ */
+export const checkIfScrollable = (element: HTMLTextAreaElement | null) => {
+  if (!element) {
+    return false;
+  }
+  return element.scrollHeight > element.clientHeight;
+};