Merge branch 'main' into main

app/components/ConversationFrontend.tsx

@@ -1,4 +1,4 @@
-import React, { ForwardedRef, useEffect, useRef } from 'react';
+import React, { ForwardedRef, useState, useEffect, useRef } from 'react';
 
 type Message = {
   role: string
@@ -7,6 +7,7 @@ type Message = {
 
 interface ConversationProps {
   messages: Message[];
+  onStopClick: () => void;
   onResendClick: () => void;
   onEditClick: () => void;
   onCopyClick: () => void;
@@ -14,13 +15,45 @@ interface ConversationProps {
 }
 
 const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>(
-  ({ messages, onResendClick, onEditClick, onCopyClick, isClicked }, ref: ForwardedRef<HTMLDivElement>) => {
-
-    const messagesEndRef = useRef<HTMLDivElement | null>(null)
+  ({ messages, onStopClick, onResendClick, onEditClick, onCopyClick, isClicked }, ref: ForwardedRef<HTMLDivElement>) => {
+    const [isScrolling, setIsScrolling] = useState(true);
+    const messagesEndRef = useRef<HTMLDivElement | null>(null);
 
     useEffect(() => {
-      messagesEndRef.current?.scrollIntoView()
-    }, [messages])
+      const observer = new IntersectionObserver(
+        (entries) => {
+          if (entries[0].isIntersecting) {
+            console.log('End of messages reached');
+            setIsScrolling(true);
+          } else {
+            console.log('End of messages not reached');
+            setIsScrolling(false);
+          }
+        },
+        {
+          root: document.querySelector('.output'),
+          threshold: 1.0, // Ensure the whole element is visible
+        }
+      );
+      
+      const endOfMessages = messagesEndRef.current;
+      if (endOfMessages) {
+        observer.observe(endOfMessages);
+      }
+
+      return () => {
+        if (endOfMessages) {
+          observer.unobserve(endOfMessages);
+        }
+      };
+    }, [messages]);
+
+    // Scroll to bottom when new messages arrive
+    useEffect(() => {
+      if (isScrolling) {
+        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+      }
+    }, [messages, isScrolling]);
 
     return (
       <div className="output" ref={ref}>
@@ -40,22 +73,37 @@ const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>
           })}
 
           <div className="button-container">
-            <button type="button" onClick={onResendClick}>
-              <img src="/img/resend.svg" alt="resend" />
-            </button>
-            <button type="button" onClick={onEditClick}>
-              <img src="/img/edit.svg" alt="edit" />
-            </button>
-            <button type="button" onClick={onCopyClick}>
-              <img src="/img/copy.svg" alt="copy" />
-            </button>
-            <p id="copiedText" style={{ opacity: isClicked ? "1" : "0", transition: "all 0.3s ease-in-out" }}>Copied!</p>
+            <div className="tooltip">
+              <button type="button" onClick={onStopClick}>
+                <img src="/img/resend.svg" alt="stop" />
+              </button>
+              <span className="tooltiptext">Stop</span>
+            </div>
+            <div className="tooltip">
+              <button type="button" onClick={onResendClick}>
+                <img src="/img/resend.svg" alt="resend" />
+              </button>
+              <span className="tooltiptext">Resend</span>
+            </div>
+            <div className="tooltip">
+              <button type="button" onClick={onEditClick}>
+                <img src="/img/edit.svg" alt="edit" />
+              </button>
+              <span className="tooltiptext">Edit</span>
+            </div>
+            <div className="tooltip">
+              <button type="button" onClick={onCopyClick}>
+                <img src="/img/copy.svg" alt="copy" />
+              </button>
+              <span className="tooltiptext">{isClicked?"Copied!": "Copy" }</span>
+            </div>
           </div>
-          <div ref={messagesEndRef} />
+          <div className={"endOfMessages"} ref={messagesEndRef} style={{height:"10px"}}/>
         </div>
+        <button id="scrollToBottom" disabled={isScrolling?true:false} style={{visibility: isScrolling?"hidden":"visible"}} onClick={()=> setIsScrolling(true)}>Down</button>
       </div>
     );
-  }
+  } 
 );
 
 export default ConversationFrontend;

app/components/Login.tsx

@@ -50,25 +50,11 @@ const Login: React.FC = () => {
 
   // Function to handle login
   const handleLogin = async () => {
-    const savedAccountEmail = localStorage.getItem('accountEmail');
-    const savedAccountPassword = localStorage.getItem('accountPassword');
-    const savedAccountName = localStorage.getItem('accountName');
-
-    // Check if savedAccountName or savedAccountEmail is not null before passing to checkCredentials
-    var accountIdentifier = savedAccountName || savedAccountEmail;
-    if (!accountIdentifier) {
-      accountIdentifier = accountName
-    }
-
-    if (accountIdentifier && password) {
-      const success = await checkCredentials(accountIdentifier, password);
+    if (accountName && password) {
+      const success = await checkCredentials(accountName, password);
       if (success) {
         setIsLoggedIn(true); // Successful login
         setShowLoginPopup(false); // Close the login popup
-        // Save credentials to localStorage (optional in case of changes)
-        localStorage.setItem('accountName', savedAccountName || accountName);
-        localStorage.setItem('accountEmail', savedAccountEmail || email);
-        localStorage.setItem('accountPassword', savedAccountPassword || password);
       } else {
         alert('Incorrect credentials');
       }

app/components/settings/PrivacySettings.tsx

@@ -37,11 +37,8 @@ const PrivacySettings: React.FC<PrivacySettingsProps> = ({ selectedOption, handl
           >
             None{openSourceMode ? ' (FOSS)' : ''}
           </div>
-        </div>        
+        </div>
         <br />
-        <p>
-          After changing the preferred settings, please reload the website so it can update itself properly.
-        </p>
       </div>
     </>
   );