implemetned hasText state with update handler to check if editor has content more robustly

Author: GauravVBhambhani

Diff for: gui/src/components/mainInput/InputToolbar.tsx

@@ -225,15 +225,15 @@ function InputToolbar(props: InputToolbarProps) {
             }}
             disabled={isEnterDisabled}
           >
-            <div data-tooltip-id="submit-tooltip">
+            <span data-tooltip-id="submit-tooltip">
               <PaperAirplaneIcon
                 className={`h-4 w-4 ${
                   props.hasText 
                   ? "text-[var(--vscode-editorForeground)]" 
                   : "text-[var(--vscode-descriptionForeground)]"
                 } transition duration-150 ease-in-out`}
               />
-            </div>
+            </span>
             <ToolTip id="submit-tooltip" place="top-middle">
               Send (Enter)
             </ToolTip>

Diff for: gui/src/components/mainInput/TipTapEditor.tsx

@@ -551,6 +551,21 @@ function TipTapEditor(props: TipTapEditorProps) {
     editable: !isStreaming || props.isMainInput,
   });
 
+  const [hasText, setHasText] = useState(false);
+  useEffect(() => {
+    if (!editor) return;
+    // Check if the editor has text
+    const updateEditorHandler = () => {
+      const text = editor.getText().trim();
+      setHasText(text.length > 0);
+    };
+    editor.on("update", updateEditorHandler);
+    updateEditorHandler();
+    return () => {
+      editor.off("update", updateEditorHandler);
+    };
+  }, [editor]);
+
   const [shouldHideToolbar, setShouldHideToolbar] = useState(false);
   const debouncedShouldHideToolbar = debounce((value) => {
     setShouldHideToolbar(value);
@@ -1015,7 +1030,7 @@ function TipTapEditor(props: TipTapEditorProps) {
             });
           }}
           disabled={isStreaming}
-          hasText={editor ? editor.getText().trim().length > 0 : false}
+          hasText={hasText}
         />
       </div>