From eb89564aac955a8bbb5df0ed19ce347dfac2d039 Mon Sep 17 00:00:00 2001
From: Niels Geens <niels.geens@materialise.be>
Date: Fri, 22 Nov 2024 17:43:23 +0100
Subject: [PATCH] autoscroll wip

---
 web/src/components/App.jsx                    |  6 +-
 web/src/components/Sidebar.jsx                | 10 +++
 web/src/components/editors/BaseEditor.jsx     | 35 ---------
 web/src/components/editors/ContentEditor.jsx  |  2 +
 web/src/components/editors/StandardEditor.jsx | 76 +++++++++++++------
 5 files changed, 67 insertions(+), 62 deletions(-)
 delete mode 100644 web/src/components/editors/BaseEditor.jsx

diff --git a/web/src/components/App.jsx b/web/src/components/App.jsx
index dd35769..b7c9b28 100644
--- a/web/src/components/App.jsx
+++ b/web/src/components/App.jsx
@@ -39,6 +39,7 @@ const App = () => {
   const [activeTab, setActiveTab] = useState(Tabs.CONTEXT);
   const [showDiff, setShowDiff] = useState(false);
   const [showSidebar, setShowSidebar] = useState(false);
+  const [autoScroll, setAutoScroll] = useState(false);
 
   // WebSocket connections
   const wsRoot = `${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}/ws`
@@ -239,7 +240,7 @@ const App = () => {
               originalContent={generatedContext}
               modifiedContent={modifiedContext}
               onChange={handleContextEdit}
-              validationError={null}
+              autoScroll={autoScroll}
             />
           )}
           {activeTab === Tabs.RESPONSE && (
@@ -251,7 +252,6 @@ const App = () => {
                 ...prev,
                 [activeLlm]: value
               }))}
-              validationError={null}
             />
           )}
           {activeTab === Tabs.INPUT && (
@@ -276,6 +276,8 @@ const App = () => {
           activeLlm={activeLlm}
           llmState={llms[activeLlm]}
           showDiff={showDiff}
+          autoScroll={autoScroll}
+          onAutoScrollChange={(enabled) => setAutoScroll(enabled)}
           input={input}
           output={output}
           autoApproverConfig={autoApproverConfig}
diff --git a/web/src/components/Sidebar.jsx b/web/src/components/Sidebar.jsx
index 7112063..34e1de7 100644
--- a/web/src/components/Sidebar.jsx
+++ b/web/src/components/Sidebar.jsx
@@ -11,6 +11,7 @@ export const Sidebar = ({
   activeLlm,
   llmState,
   showDiff,
+  autoScroll,
   input,
   output,
   autoApproverConfig,
@@ -20,6 +21,7 @@ export const Sidebar = ({
   onClearOutput,
   onLlmChange,
   onNextLlm,
+  onAutoScrollChange,
   onAutoApproverConfigChange,
 }) => (
   <aside className={`
@@ -51,6 +53,14 @@ export const Sidebar = ({
         {showDiff ? 'Hide Diff' : 'Show Diff'}
       </Button>
 
+      <div className="flex items-center justify-between">
+        <label>Auto-Scroll</label>
+        <Switch 
+          checked={autoScroll}
+          onCheckedChange={onAutoScrollChange}
+        />
+      </div>
+
       <Button 
         onClick={onApprove}
         disabled={llmState === LlmState.INFERENCE}
diff --git a/web/src/components/editors/BaseEditor.jsx b/web/src/components/editors/BaseEditor.jsx
deleted file mode 100644
index 96cfe02..0000000
--- a/web/src/components/editors/BaseEditor.jsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-import Editor from '@monaco-editor/react';
-import { Card, CardContent } from '@/components/ui/card';
-import { Alert, AlertDescription } from '@/components/ui/alert';
-
-export const BaseEditor = ({
-  content,
-  onChange,
-  readOnly = false,
-  language = 'xml',
-  validationError = null,
-}) => (
-  <Card className="h-full">
-    <CardContent className="p-0 h-full">
-      {validationError && (
-        <Alert variant="destructive" className="m-4">
-          <AlertDescription>{validationError}</AlertDescription>
-        </Alert>
-      )}
-      <Editor
-        height="100%"
-        defaultLanguage={language}
-        value={content}
-        onChange={onChange}
-        options={{
-          minimap: { enabled: false },
-          lineNumbers: 'on',
-          readOnly,
-          fontSize: 14,
-          automaticLayout: true,
-        }}
-      />
-    </CardContent>
-  </Card>
-);
\ No newline at end of file
diff --git a/web/src/components/editors/ContentEditor.jsx b/web/src/components/editors/ContentEditor.jsx
index abbc428..df4a3d2 100644
--- a/web/src/components/editors/ContentEditor.jsx
+++ b/web/src/components/editors/ContentEditor.jsx
@@ -9,6 +9,7 @@ export const ContentEditor = ({
   onChange,
   validationError = null,
   language = 'xml',
+  autoScroll = false,
 }) => {
   if (showDiff) {
     return (
@@ -30,6 +31,7 @@ export const ContentEditor = ({
       onChange={onChange}
       language={language}
       validationError={validationError}
+      autoScroll={autoScroll}
     />
   );
 };
diff --git a/web/src/components/editors/StandardEditor.jsx b/web/src/components/editors/StandardEditor.jsx
index 132059c..1da6407 100644
--- a/web/src/components/editors/StandardEditor.jsx
+++ b/web/src/components/editors/StandardEditor.jsx
@@ -9,28 +9,54 @@ export const StandardEditor = ({
   readOnly = false,
   language = 'xml',
   validationError = null,
-}) => (
-  <Card className="h-[calc(100vh-8rem)]">
-    <CardContent className="p-0 h-full">
-      {validationError && (
-        <Alert variant="destructive" className="m-4">
-          <AlertDescription>{validationError}</AlertDescription>
-        </Alert>
-      )}
-      <Editor
-        height="100%"
-        language={language}
-        value={content}
-        onChange={onChange}
-        options={{
-          minimap: { enabled: false },
-          lineNumbers: 'on',
-          readOnly,
-          fontSize: 14,
-          automaticLayout: true,
-          wordWrap: 'on',
-        }}
-      />
-    </CardContent>
-  </Card>
-);
\ No newline at end of file
+  autoScroll = false,
+}) => {
+  const editorRef = React.useRef(null);
+
+  const scrollToBottom = () => {
+    if (editorRef.current && autoScroll) {
+      const model = editorRef.current.getModel();
+      const lineCount = model.getLineCount();
+      editorRef.current.revealPositionInCenter({
+        lineNumber: lineCount,
+        column: 1
+      });
+    }
+  };
+
+  const handleEditorDidMount = (editor) => {
+    editorRef.current = editor;
+    scrollToBottom();
+  };
+
+  React.useEffect(() => {
+    scrollToBottom();
+  }, [content, autoScroll]);
+
+  return (
+    <Card className="h-[calc(100vh-8rem)]">
+      <CardContent className="p-0 h-full">
+        {validationError && (
+          <Alert variant="destructive" className="m-4">
+            <AlertDescription>{validationError}</AlertDescription>
+          </Alert>
+        )}
+        <Editor
+          height="100%"
+          language={language}
+          value={content}
+          onChange={onChange}
+          onMount={handleEditorDidMount}
+          options={{
+            minimap: { enabled: false },
+            lineNumbers: 'on',
+            readOnly,
+            fontSize: 14,
+            automaticLayout: true,
+            wordWrap: 'on',
+          }}
+        />
+      </CardContent>
+    </Card>
+  );
+};
\ No newline at end of file