adds linting, fix linter errors, abort automatic scrolling

.eslintrc.js

@@ -0,0 +1,29 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es2021": true,
+        "node": true,
+        "commonjs": true,
+        "es6": true,
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:react-hooks/recommended"
+    ],
+    "overrides": [
+    ],
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+        'react/prop-types': ['off'],
+    }
+}

package.json

@@ -64,6 +64,8 @@
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-jest": "^27.2.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "html-webpack-plugin": "^5.5.0",
     "nodemon": "^2.0.20",
     "path": "^0.12.7",

src/components/Conversations/Conversation.jsx

@@ -19,7 +19,8 @@ export default function Conversation({
   const [titleInput, setTitleInput] = useState(title);
   const inputRef = useRef(null);
   const dispatch = useDispatch();
-  const { trigger, isMutating } = manualSWR(`http://localhost:3050/messages/${id}`, 'get');
+  // const { trigger, isMutating } = manualSWR(`http://localhost:3050/messages/${id}`, 'get');
+  const { trigger } = manualSWR(`http://localhost:3050/messages/${id}`, 'get');
   const rename = manualSWR(`http://localhost:3050/convos/update`, 'post');
 
   const clickHandler = async () => {
@@ -28,18 +29,16 @@ export default function Conversation({
     }
 
     if (bingData) {
-      const { title, conversationSignature, clientId, conversationId, invocationId } =
+      const { conversationSignature, clientId, invocationId } = bingData;
-        bingData;
       dispatch(
         setConversation({
           title,
-          conversationSignature,
-          clientId,
-          conversationId,
-          invocationId,
           error: false,
           conversationId: id,
-          parentMessageId: null
+          parentMessageId: null,
+          conversationSignature,
+          clientId,
+          invocationId
         })
       );
     } else {

src/components/Conversations/DeleteButton.jsx

@@ -8,7 +8,7 @@ import { setMessages } from '~/store/messageSlice';
 
 export default function DeleteButton({ conversationId, renaming, cancelHandler }) {
   const dispatch = useDispatch();
-  const { trigger, isMutating } = manualSWR(
+  const { trigger } = manualSWR(
     'http://localhost:3050/convos/clear',
     'post',
     () => {

src/components/Conversations/index.jsx

@@ -1,25 +1,13 @@
-import React, { useState } from 'react';
+import React from 'react';
 import Conversation from './Conversation';
 
 export default function Conversations({ conversations, conversationId }) {
-  // const currentRef = useRef(null);
-
-  // const scrollToTop = () => {
-  //   currentRef.current?.scrollIntoView({ behavior: 'smooth' });
-  // };
-
-  // // this useEffect triggers the following warning in the Messages component (but not here):
-  // // Warning: Internal React error: Expected static flag was missing.
-  // useEffect(() => {
-  //   scrollToTop();
-  // }, [conversationId]);
 
   return (
     <>
-      {/* <div ref={currentRef} /> */}
       {conversations &&
         conversations.length > 0 &&
-        conversations.map((convo, i) => {
+        conversations.map((convo) => {
           const bingData = convo.conversationSignature
             ? {
                 conversationSignature: convo.conversationSignature,

src/components/main/Message.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import GPTIcon from '../svg/GPTIcon';
 import BingIcon from '../svg/BingIcon';
@@ -11,13 +11,22 @@ export default function Message({
   scrollToBottom
 }) {
   const { isSubmitting } = useSelector((state) => state.submit);
+  const [abortScroll, setAbort] = useState(false);
   const blinker = isSubmitting && last && sender.toLowerCase() !== 'user';
 
   useEffect(() => {
-    if (blinker) {
+    if (blinker && !abortScroll) {
       scrollToBottom();
     }
-  }, [isSubmitting, text, blinker, scrollToBottom]);
+  }, [isSubmitting, text, blinker, scrollToBottom, abortScroll]);
+
+  const handleWheel = () => {
+    if (blinker) {
+      setAbort(true);
+    } else {
+      setAbort(false);
+    }
+  };
 
   const props = {
     className:
@@ -35,20 +44,21 @@ export default function Message({
   if (sender.toLowerCase() !== 'user') {
     icon = (
       <div
-        style={ isGPT ? { backgroundColor: 'rgb(16, 163, 127)' } : {}}
+        style={isGPT ? { backgroundColor: 'rgb(16, 163, 127)' } : {}}
         className="relative flex h-[30px] w-[30px] items-center justify-center rounded-sm p-1 text-white"
       >
-        { sender === 'bingai' ? <BingIcon /> : <GPTIcon />}
+        {sender === 'bingai' ? <BingIcon /> : <GPTIcon />}
       </div>
     );
   }
 
   return (
-    <div {...props}>
+    <div
+      {...props}
+      onWheel={handleWheel}
+    >
       <div className="m-auto flex gap-4 p-4 text-base md:max-w-2xl md:gap-6 md:py-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
-        <strong className="relative flex w-[30px] flex-col items-end">
+        <strong className="relative flex w-[30px] flex-col items-end">{icon}</strong>
-          {icon}
-        </strong>
         <div className="relative flex w-[calc(100%-50px)] flex-col gap-1 whitespace-pre-wrap md:gap-3 lg:w-[calc(100%-115px)]">
           <div className="flex flex-grow flex-col gap-3">
             {error ? (