Build/Refactor: lint pre-commit hook and reformat repo to spec (#314)

* build/refactor: move lint/prettier packages to project root, install husky, add pre-commit hook

* refactor: reformat files

* build: put full eslintrc back with all rules

client/src/components/Messages/Content/CodeBlock.jsx

@@ -7,15 +7,9 @@ const CodeBlock = ({ lang, codeChildren }) => {
 
   return (
     <div className="rounded-md bg-black">
-      <CodeBar
-        lang={lang}
-        codeRef={codeRef}
-      />
+      <CodeBar lang={lang} codeRef={codeRef} />
       <div className="overflow-y-auto p-4">
-        <code
-          ref={codeRef}
-          className={`hljs !whitespace-pre language-${lang}`}
-        >
+        <code ref={codeRef} className={`hljs !whitespace-pre language-${lang}`}>
           {codeChildren}
         </code>
       </div>

client/src/components/Messages/Content/Content.jsx

@@ -4,7 +4,7 @@ import rehypeKatex from 'rehype-katex';
 import rehypeHighlight from 'rehype-highlight';
 import remarkMath from 'remark-math';
 import remarkGfm from 'remark-gfm';
-import rehypeRaw from 'rehype-raw'
+import rehypeRaw from 'rehype-raw';
 import CodeBlock from './CodeBlock';
 import { langSubset } from '~/utils/languages.mjs';
 
@@ -19,7 +19,7 @@ const Content = React.memo(({ content }) => {
         subset: langSubset
       }
     ],
-    [rehypeRaw],
+    [rehypeRaw]
   ];
 
   return (
@@ -29,7 +29,7 @@ const Content = React.memo(({ content }) => {
       linkTarget="_new"
       components={{
         code,
-        p,
+        p
         // em,
       }}
     >
@@ -46,17 +46,12 @@ const code = React.memo((props) => {
   if (inline) {
     return <code className={className}>{children}</code>;
   } else {
-    return (
-      <CodeBlock
-        lang={lang || 'text'}
-        codeChildren={children}
-      />
-    );
+    return <CodeBlock lang={lang || 'text'} codeChildren={children} />;
   }
 });
 
 const p = React.memo((props) => {
-  return <p className="whitespace-pre-wrap mb-2">{props?.children}</p>;
+  return <p className="mb-2 whitespace-pre-wrap">{props?.children}</p>;
 });
 
 // const blinker = ({ node }) => {

client/src/components/Messages/Content/SubRow.jsx

@@ -3,7 +3,11 @@ import React from 'react';
 export default function SubRow({ children, classes = '', subclasses = '', onClick }) {
   return (
     <div className={`flex justify-between ${classes}`} onClick={onClick}>
-      <div className={`flex items-center justify-center gap-1 self-center pt-2 text-xs ${subclasses}`}>{children}</div>
+      <div
+        className={`flex items-center justify-center gap-1 self-center pt-2 text-xs ${subclasses}`}
+      >
+        {children}
+      </div>
     </div>
   );
 }

client/src/components/Messages/HoverButtons.jsx

@@ -32,10 +32,14 @@ export default function HoverButtons({
   // for now, once branching is supported, regerate will be enabled
   const regenerateEnabled =
     // !message?.error &&
-    !message?.isCreatedByUser && !message?.searchResult && !isEditting && !isSubmitting && branchingSupported;
+    !message?.isCreatedByUser &&
+    !message?.searchResult &&
+    !isEditting &&
+    !isSubmitting &&
+    branchingSupported;
 
   return (
-    <div className="visible mt-2 flex justify-center gap-3 self-end text-gray-400 md:gap-4 lg:absolute lg:top-0 lg:right-0 lg:mt-0 lg:translate-x-full lg:gap-1 lg:self-center lg:pl-2">
+    <div className="visible mt-2 flex justify-center gap-3 self-end text-gray-400 md:gap-4 lg:absolute lg:right-0 lg:top-0 lg:mt-0 lg:translate-x-full lg:gap-1 lg:self-center lg:pl-2">
       {editEnabled ? (
         <button
           className="hover-button rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible"

client/src/components/Messages/Message.jsx

@@ -41,7 +41,9 @@ export default function Message({
   const { ask, regenerate } = useMessageHandler();
   const { switchToConversation } = store.useConversation();
   const blinker = submitting && isSubmitting;
-  const getConversationQuery = useGetConversationByIdQuery(message.conversationId, { enabled: false });
+  const getConversationQuery = useGetConversationByIdQuery(message.conversationId, {
+    enabled: false
+  });
 
   // debugging
   // useEffect(() => {
@@ -71,9 +73,9 @@ export default function Message({
     }
   };
 
-  const getError = text => {
+  const getError = (text) => {
     const match = text.match(/\{[^{}]*\}/);
-    var json = match ? match[0] : ''
+    var json = match ? match[0] : '';
     if (isJson(json)) {
       json = JSON.parse(json);
       if (json.code === 'invalid_api_key') {
@@ -124,7 +126,7 @@ export default function Message({
     if (!isSubmitting && !message?.isCreatedByUser) regenerate(message);
   };
 
-  const copyToClipboard = setIsCopied => {
+  const copyToClipboard = (setIsCopied) => {
     setIsCopied(true);
     copy(message?.text);
 
@@ -135,17 +137,14 @@ export default function Message({
 
   const clickSearchResult = async () => {
     if (!searchResult) return;
-    getConversationQuery.refetch(message.conversationId).then(response => {
+    getConversationQuery.refetch(message.conversationId).then((response) => {
       switchToConversation(response.data);
     });
   };
 
   return (
     <>
-      <div
-        {...props}
-        onWheel={handleWheel}
-      >
+      <div {...props} onWheel={handleWheel}>
         <div className="relative 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">
           <div className="relative flex h-[30px] w-[30px] flex-col items-end text-right text-xs md:text-sm">
             {typeof icon === 'string' && icon.match(/[^\\x00-\\x7F]+/) ? (
@@ -197,10 +196,7 @@ export default function Message({
                     >
                       Save & Submit
                     </button>
-                    <button
-                      className="btn btn-neutral relative"
-                      onClick={() => enterEdit(true)}
-                    >
+                    <button className="btn btn-neutral relative" onClick={() => enterEdit(true)}>
                       Cancel
                     </button>
                   </div>

client/src/components/Messages/MessageHeader.jsx

@@ -6,7 +6,7 @@ import { Button } from '../ui/Button.tsx';
 
 import store from '~/store';
 
-const clipPromptPrefix = str => {
+const clipPromptPrefix = (str) => {
   if (typeof str !== 'string') {
     return null;
   } else if (str.length > 10) {
@@ -61,7 +61,9 @@ const MessageHeader = ({ isSearchView = false }) => {
         )}
         onClick={() => (endpoint === 'chatGPTBrowser' ? null : setSaveAsDialogShow(true))}
       >
-        <div className="d-block flex w-full items-center justify-center p-3">{getConversationTitle()}</div>
+        <div className="d-block flex w-full items-center justify-center p-3">
+          {getConversationTitle()}
+        </div>
       </div>
 
       <EndpointOptionsDialog

client/src/components/Messages/MultiMessage.jsx

@@ -17,7 +17,7 @@ export default function MultiMessage({
 
   const [siblingIdx, setSiblingIdx] = useRecoilState(store.messagesSiblingIdxFamily(messageId));
 
-  const setSiblingIdxRev = value => {
+  const setSiblingIdxRev = (value) => {
     setSiblingIdx(messagesTree?.length - value - 1);
   };
 
@@ -42,18 +42,18 @@ export default function MultiMessage({
       <>
         {messagesTree
           ? messagesTree.map(message => (
-              <Message
-                key={message.messageId}
-                conversation={conversation}
-                message={message}
-                scrollToBottom={scrollToBottom}
-                currentEditId={currentEditId}
-                setCurrentEditId={null}
-                siblingIdx={1}
-                siblingCount={1}
-                setSiblingIdx={null}
-              />
-            ))
+            <Message
+              key={message.messageId}
+              conversation={conversation}
+              message={message}
+              scrollToBottom={scrollToBottom}
+              currentEditId={currentEditId}
+              setCurrentEditId={null}
+              siblingIdx={1}
+              siblingCount={1}
+              setSiblingIdx={null}
+            />
+          ))
           : null}
       </>
     );

client/src/components/Messages/ScrollToBottom.jsx

@@ -1,11 +1,10 @@
 import React from 'react';
 
-export default function ScrollToBottom({ scrollHandler}) {
-
+export default function ScrollToBottom({ scrollHandler }) {
   return (
     <button
       onClick={scrollHandler}
-      className="absolute right-6 bottom-[124px] z-10 cursor-pointer rounded-full border border-gray-200 bg-gray-50 text-gray-600 dark:border-white/10 dark:bg-white/10 dark:text-gray-200 md:bottom-[120px]"
+      className="absolute bottom-[124px] right-6 z-10 cursor-pointer rounded-full border border-gray-200 bg-gray-50 text-gray-600 dark:border-white/10 dark:bg-white/10 dark:text-gray-200 md:bottom-[120px]"
     >
       <svg
         stroke="currentColor"
@@ -19,12 +18,7 @@ export default function ScrollToBottom({ scrollHandler}) {
         width="1em"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <line
-          x1="12"
-          y1="5"
-          x2="12"
-          y2="19"
-        />
+        <line x1="12" y1="5" x2="12" y2="19" />
         <polyline points="19 12 12 19 5 12" />
       </svg>
     </button>

client/src/components/Messages/SiblingSwitch.jsx

@@ -1,26 +1,58 @@
 import React from 'react';
 
-export default function SiblingSwitch({ 
-    siblingIdx,
-    siblingCount,
-    setSiblingIdx
-}) {
+export default function SiblingSwitch({ siblingIdx, siblingCount, setSiblingIdx }) {
   const previous = () => {
     setSiblingIdx(siblingIdx - 1);
-  }
+  };
 
   const next = () => {
     setSiblingIdx(siblingIdx + 1);
-  }
+  };
   return siblingCount > 1 ? (
     <>
-      <button className="dark:text-white disabled:text-gray-300 dark:disabled:text-gray-400" onClick={previous} disabled={siblingIdx==0}>
-        <svg stroke="currentColor" fill="none" strokeWidth="1.5" viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round" className="h-3 w-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><polyline points="15 18 9 12 15 6"></polyline></svg>
+      <button
+        className="disabled:text-gray-300 dark:text-white dark:disabled:text-gray-400"
+        onClick={previous}
+        disabled={siblingIdx == 0}
+      >
+        <svg
+          stroke="currentColor"
+          fill="none"
+          strokeWidth="1.5"
+          viewBox="0 0 24 24"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="h-3 w-3"
+          height="1em"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <polyline points="15 18 9 12 15 6"></polyline>
+        </svg>
       </button>
-      <span className="flex-grow flex-shrink-0">{siblingIdx + 1}/{siblingCount}</span>
-      <button className="dark:text-white disabled:text-gray-300 dark:disabled:text-gray-400" onClick={next} disabled={siblingIdx==siblingCount-1}>
-        <svg stroke="currentColor" fill="none" strokeWidth="1.5" viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round" className="h-3 w-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><polyline points="9 18 15 12 9 6"></polyline></svg>
+      <span className="flex-shrink-0 flex-grow">
+        {siblingIdx + 1}/{siblingCount}
+      </span>
+      <button
+        className="disabled:text-gray-300 dark:text-white dark:disabled:text-gray-400"
+        onClick={next}
+        disabled={siblingIdx == siblingCount - 1}
+      >
+        <svg
+          stroke="currentColor"
+          fill="none"
+          strokeWidth="1.5"
+          viewBox="0 0 24 24"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="h-3 w-3"
+          height="1em"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <polyline points="9 18 15 12 9 6"></polyline>
+        </svg>
       </button>
-      </>
-  ):null;
+    </>
+  ) : null;
 }

client/src/components/Messages/index.jsx

@@ -76,7 +76,7 @@ export default function Messages({ isSearchView = false }) {
     timeoutId = setTimeout(handleScroll, 100);
   };
 
-  const scrollHandler = e => {
+  const scrollHandler = (e) => {
     e.preventDefault();
     scrollToBottom();
   };
@@ -87,10 +87,7 @@ export default function Messages({ isSearchView = false }) {
       ref={scrollableRef}
       onScroll={debouncedHandleScroll}
     >
-      <div
-        className="dark:gpt-dark-gray mb-32 h-auto md:mb-48"
-        ref={screenshotTargetRef}
-      >
+      <div className="dark:gpt-dark-gray mb-32 h-auto md:mb-48" ref={screenshotTargetRef}>
         <div className="dark:gpt-dark-gray flex h-auto flex-col items-center text-sm">
           <MessageHeader isSearchView={isSearchView} />
           {_messagesTree === null ? (