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/Endpoints/BingAI/Settings.jsx

@@ -21,33 +21,32 @@ function Settings(props) {
   const debouncedContext = useDebounce(context, 250);
   const updateTokenCountMutation = useUpdateTokenCountMutation();
 
-  useEffect(() => { 
+  useEffect(() => {
     if (!debouncedContext || debouncedContext.trim() === '') {
       setTokenCount(0);
       return;
     }
 
-    const handleTextChange = context => {
-      updateTokenCountMutation.mutate({ text: context }, {
-        onSuccess: data => {
-          setTokenCount(data.count);
+    const handleTextChange = (context) => {
+      updateTokenCountMutation.mutate(
+        { text: context },
+        {
+          onSuccess: (data) => {
+            setTokenCount(data.count);
+          }
         }
-      });
+      );
     };
 
     handleTextChange(debouncedContext);
   }, [debouncedContext]);
 
-
   return (
     <div className="max-h-[350px] overflow-y-auto">
       <div className="grid gap-6 sm:grid-cols-2">
         <div className="col-span-1 flex flex-col items-center justify-start gap-6">
           <div className="grid w-full items-center gap-2">
-            <Label
-              htmlFor="toneStyle-dropdown"
-              className="text-left text-sm font-medium"
-            >
+            <Label htmlFor="toneStyle-dropdown" className="text-left text-sm font-medium">
               Tone Style <small className="opacity-40">(default: fast)</small>
             </Label>
             <SelectDropDown
@@ -65,10 +64,7 @@ function Settings(props) {
             />
           </div>
           <div className="grid w-full items-center gap-2">
-            <Label
-              htmlFor="context"
-              className="text-left text-sm font-medium"
-            >
+            <Label htmlFor="context" className="text-left text-sm font-medium">
               Context <small className="opacity-40">(default: blank)</small>
             </Label>
             <TextareaAutosize
@@ -87,10 +83,7 @@ function Settings(props) {
         </div>
         <div className="col-span-1 flex flex-col items-center justify-start gap-6">
           <div className="grid w-full items-center gap-2">
-            <Label
-              htmlFor="jailbreak"
-              className="text-left text-sm font-medium"
-            >
+            <Label htmlFor="jailbreak" className="text-left text-sm font-medium">
               Enable Sydney <small className="opacity-40">(default: false)</small>
             </Label>
             <div className="flex h-[40px] w-full items-center space-x-3">

client/src/components/Endpoints/EditPresetDialog.jsx

@@ -29,7 +29,7 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
 
   const triggerExamples = () => setShowExamples(prev => !prev);
 
-  const setOption = param => newValue => {
+  const setOption = param => (newValue) => {
     let update = {};
     update[param] = newValue;
     setPreset(prevState =>
@@ -115,7 +115,7 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
       url: '/api/presets',
       data: cleanupPreset({ preset, endpointsConfig }),
       withCredentials: true
-    }).then(res => {
+    }).then((res) => {
       setPresets(res?.data);
     });
   };
@@ -134,10 +134,7 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
   }, [open]);
 
   return (
-    <Dialog
-      open={open}
-      onOpenChange={onOpenChange}
-    >
+    <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogTemplate
         title={`${title || 'Edit Preset'} - ${preset?.title}`}
         className="max-w-full sm:max-w-4xl"
@@ -145,10 +142,7 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
           <div className="flex w-full flex-col items-center gap-2">
             <div className="grid w-full gap-6 sm:grid-cols-2">
               <div className="col-span-1 flex flex-col items-start justify-start gap-2">
-                <Label
-                  htmlFor="chatGptLabel"
-                  className="text-left text-sm font-medium"
-                >
+                <Label htmlFor="chatGptLabel" className="text-left text-sm font-medium">
                   Preset Name
                 </Label>
                 <Input
@@ -163,10 +157,7 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
                 />
               </div>
               <div className="col-span-1 flex flex-col items-start justify-start gap-2">
-                <Label
-                  htmlFor="endpoint"
-                  className="text-left text-sm font-medium"
-                >
+                <Label htmlFor="endpoint" className="text-left text-sm font-medium">
                   Endpoint
                 </Label>
                 <Dropdown
@@ -194,11 +185,9 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
             </div>
             <div className="my-4 w-full border-t border-gray-300 dark:border-gray-500" />
             <div className="w-full p-0">
-              {((preset?.endpoint === 'google' && !showExamples) || preset?.endpoint !== 'google') && (
-                <Settings
-                  preset={_preset}
-                  setOption={setOption}
-                />
+              {((preset?.endpoint === 'google' && !showExamples) ||
+                preset?.endpoint !== 'google') && (
+                <Settings preset={_preset} setOption={setOption} />
               )}
               {preset?.endpoint === 'google' && showExamples && (
                 <Examples
@@ -224,10 +213,7 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
         }
         leftButtons={
           <>
-            <DialogButton
-              onClick={exportPreset}
-              className="dark:hover:gray-400 border-gray-700"
-            >
+            <DialogButton onClick={exportPreset} className="dark:hover:gray-400 border-gray-700">
               Export
             </DialogButton>
           </>

client/src/components/Endpoints/EndpointOptionsDialog.jsx

@@ -22,7 +22,7 @@ const EndpointOptionsDialog = ({ open, onOpenChange, preset: _preset, title }) =
     setEndpointName('PaLM');
   }
 
-  const setOption = param => newValue => {
+  const setOption = param => (newValue) => {
     let update = {};
     update[param] = newValue;
     setPreset(prevState => ({
@@ -49,21 +49,14 @@ const EndpointOptionsDialog = ({ open, onOpenChange, preset: _preset, title }) =
 
   return (
     <>
-      <Dialog
-        open={open}
-        onOpenChange={onOpenChange}
-      >
+      <Dialog open={open} onOpenChange={onOpenChange}>
         <DialogTemplate
           title={`${title || 'View Options'} - ${endpointName}`}
           className="max-w-full sm:max-w-4xl"
           main={
             <div className="flex w-full flex-col items-center gap-2">
               <div className="w-full p-0">
-                <Settings
-                  preset={preset}
-                  readonly={true}
-                  setOption={setOption}
-                />
+                <Settings preset={preset} readonly={true} setOption={setOption} />
               </div>
             </div>
           }
@@ -79,10 +72,7 @@ const EndpointOptionsDialog = ({ open, onOpenChange, preset: _preset, title }) =
           }
           leftButtons={
             <>
-              <DialogButton
-                onClick={exportPreset}
-                className="dark:hover:gray-400 border-gray-700"
-              >
+              <DialogButton onClick={exportPreset} className="dark:hover:gray-400 border-gray-700">
                 Export
               </DialogButton>
             </>

client/src/components/Endpoints/Google/Examples.jsx

@@ -12,10 +12,7 @@ function Examples({ readonly, examples, setExample, addExample, removeExample, e
   return (
     <>
       <div className={`${maxHeight} overflow-y-auto`}>
-        <div
-          id="examples-grid"
-          className="grid gap-6 sm:grid-cols-2"
-        >
+        <div id="examples-grid" className="grid gap-6 sm:grid-cols-2">
           {examples.map((example, idx) => (
             <React.Fragment key={idx}>
               {/* Input */}
@@ -25,10 +22,7 @@ function Examples({ readonly, examples, setExample, addExample, removeExample, e
                 } flex flex-col items-center justify-start gap-6 sm:col-span-1`}
               >
                 <div className="grid w-full items-center gap-2">
-                  <Label
-                    htmlFor={`input-${idx}`}
-                    className="text-left text-sm font-medium"
-                  >
+                  <Label htmlFor={`input-${idx}`} className="text-left text-sm font-medium">
                     Input <small className="opacity-40">(default: blank)</small>
                   </Label>
                   <TextareaAutosize
@@ -52,10 +46,7 @@ function Examples({ readonly, examples, setExample, addExample, removeExample, e
                 } flex flex-col items-center justify-start gap-6 sm:col-span-1`}
               >
                 <div className="grid w-full items-center gap-2">
-                  <Label
-                    htmlFor={`output-${idx}`}
-                    className="text-left text-sm font-medium"
-                  >
+                  <Label htmlFor={`output-${idx}`} className="text-left text-sm font-medium">
                     Output <small className="opacity-40">(default: blank)</small>
                   </Label>
                   <TextareaAutosize

client/src/components/Endpoints/Google/OptionHover.jsx

@@ -5,7 +5,8 @@ const types = {
   temp: 'Higher values = more random, while lower values = more focused and deterministic. We recommend altering this or Top P but not both.',
   topp: 'Top-p changes how the model selects tokens for output. Tokens are selected from most K (see topK parameter) probable to least until the sum of their probabilities equals the top-p value.',
   topk: "Top-k changes how the model selects tokens for output. A top-k of 1 means the selected token is the most probable among all tokens in the model's vocabulary (also called greedy decoding), while a top-k of 3 means that the next token is selected from among the 3 most probable tokens (using temperature).",
-  maxoutputtokens: " 	Maximum number of tokens that can be generated in the response. Specify a lower value for shorter responses and a higher value for longer responses."
+  maxoutputtokens:
+    ' 	Maximum number of tokens that can be generated in the response. Specify a lower value for shorter responses and a higher value for longer responses.'
 };
 
 function OptionHover({ type, side }) {

client/src/components/Endpoints/Google/Settings.jsx

@@ -17,7 +17,18 @@ const optionText =
 import store from '~/store';
 
 function Settings(props) {
-  const { readonly, model, modelLabel, promptPrefix, temperature, topP, topK, maxOutputTokens, setOption, edit = false } = props;
+  const {
+    readonly,
+    model,
+    modelLabel,
+    promptPrefix,
+    temperature,
+    topP,
+    topK,
+    maxOutputTokens,
+    setOption,
+    edit = false
+  } = props;
   const maxHeight = edit ? 'max-h-[233px]' : 'max-h-[350px]';
   const endpointsConfig = useRecoilValue(store.endpointsConfig);
 
@@ -49,10 +60,7 @@ function Settings(props) {
             />
           </div>
           <div className="grid w-full items-center gap-2">
-            <Label
-              htmlFor="modelLabel"
-              className="text-left text-sm font-medium"
-            >
+            <Label htmlFor="modelLabel" className="text-left text-sm font-medium">
               Custom Name <small className="opacity-40">(default: blank)</small>
             </Label>
             <Input
@@ -68,10 +76,7 @@ function Settings(props) {
             />
           </div>
           <div className="grid w-full items-center gap-2">
-            <Label
-              htmlFor="promptPrefix"
-              className="text-left text-sm font-medium"
-            >
+            <Label htmlFor="promptPrefix" className="text-left text-sm font-medium">
               Prompt Prefix <small className="opacity-40">(default: blank)</small>
             </Label>
             <TextareaAutosize
@@ -91,10 +96,7 @@ function Settings(props) {
           <HoverCard openDelay={300}>
             <HoverCardTrigger className="grid w-full items-center gap-2">
               <div className="flex justify-between">
-                <Label
-                  htmlFor="temp-int"
-                  className="text-left text-sm font-medium"
-                >
+                <Label htmlFor="temp-int" className="text-left text-sm font-medium">
                   Temperature <small className="opacity-40">(default: 0.2)</small>
                 </Label>
                 <InputNumber
@@ -126,18 +128,12 @@ function Settings(props) {
                 className="flex h-4 w-full"
               />
             </HoverCardTrigger>
-            <OptionHover
-              type="temp"
-              side="left"
-            />
+            <OptionHover type="temp" side="left" />
           </HoverCard>
           <HoverCard openDelay={300}>
             <HoverCardTrigger className="grid w-full items-center gap-2">
               <div className="flex justify-between">
-                <Label
-                  htmlFor="top-p-int"
-                  className="text-left text-sm font-medium"
-                >
+                <Label htmlFor="top-p-int" className="text-left text-sm font-medium">
                   Top P <small className="opacity-40">(default: 0.95)</small>
                 </Label>
                 <InputNumber
@@ -169,19 +165,13 @@ function Settings(props) {
                 className="flex h-4 w-full"
               />
             </HoverCardTrigger>
-            <OptionHover
-              type="topp"
-              side="left"
-            />
+            <OptionHover type="topp" side="left" />
           </HoverCard>
 
           <HoverCard openDelay={300}>
             <HoverCardTrigger className="grid w-full items-center gap-2">
               <div className="flex justify-between">
-                <Label
-                  htmlFor="top-k-int"
-                  className="text-left text-sm font-medium"
-                >
+                <Label htmlFor="top-k-int" className="text-left text-sm font-medium">
                   Top K <small className="opacity-40">(default: 40)</small>
                 </Label>
                 <InputNumber
@@ -213,19 +203,13 @@ function Settings(props) {
                 className="flex h-4 w-full"
               />
             </HoverCardTrigger>
-            <OptionHover
-              type="topk"
-              side="left"
-            />
+            <OptionHover type="topk" side="left" />
           </HoverCard>
 
           <HoverCard openDelay={300}>
             <HoverCardTrigger className="grid w-full items-center gap-2">
               <div className="flex justify-between">
-                <Label
-                  htmlFor="max-tokens-int"
-                  className="text-left text-sm font-medium"
-                >
+                <Label htmlFor="max-tokens-int" className="text-left text-sm font-medium">
                   Max Output Tokens <small className="opacity-40">(default: 1024)</small>
                 </Label>
                 <InputNumber
@@ -257,10 +241,7 @@ function Settings(props) {
                 className="flex h-4 w-full"
               />
             </HoverCardTrigger>
-            <OptionHover
-              type="maxoutputtokens"
-              side="left"
-            />
+            <OptionHover type="maxoutputtokens" side="left" />
           </HoverCard>
         </div>
       </div>

client/src/components/Endpoints/OpenAI/Settings.jsx

@@ -17,7 +17,17 @@ const optionText =
 import store from '~/store';
 
 function Settings(props) {
-  const { readonly, model, chatGptLabel, promptPrefix, temperature, topP, freqP, presP, setOption } = props;
+  const {
+    readonly,
+    model,
+    chatGptLabel,
+    promptPrefix,
+    temperature,
+    topP,
+    freqP,
+    presP,
+    setOption
+  } = props;
 
   const endpointsConfig = useRecoilValue(store.endpointsConfig);
 
@@ -49,10 +59,7 @@ function Settings(props) {
             />
           </div>
           <div className="grid w-full items-center gap-2">
-            <Label
-              htmlFor="chatGptLabel"
-              className="text-left text-sm font-medium"
-            >
+            <Label htmlFor="chatGptLabel" className="text-left text-sm font-medium">
               Custom Name <small className="opacity-40">(default: blank)</small>
             </Label>
             <Input
@@ -68,10 +75,7 @@ function Settings(props) {
             />
           </div>
           <div className="grid w-full items-center gap-2">
-            <Label
-              htmlFor="promptPrefix"
-              className="text-left text-sm font-medium"
-            >
+            <Label htmlFor="promptPrefix" className="text-left text-sm font-medium">
               Prompt Prefix <small className="opacity-40">(default: blank)</small>
             </Label>
             <TextareaAutosize
@@ -91,10 +95,7 @@ function Settings(props) {
           <HoverCard openDelay={300}>
             <HoverCardTrigger className="grid w-full items-center gap-2">
               <div className="flex justify-between">
-                <Label
-                  htmlFor="temp-int"
-                  className="text-left text-sm font-medium"
-                >
+                <Label htmlFor="temp-int" className="text-left text-sm font-medium">
                   Temperature <small className="opacity-40">(default: 1)</small>
                 </Label>
                 <InputNumber
@@ -126,18 +127,12 @@ function Settings(props) {
                 className="flex h-4 w-full"
               />
             </HoverCardTrigger>
-            <OptionHover
-              type="temp"
-              side="left"
-            />
+            <OptionHover type="temp" side="left" />
           </HoverCard>
           <HoverCard openDelay={300}>
             <HoverCardTrigger className="grid w-full items-center gap-2">
               <div className="flex justify-between">
-                <Label
-                  htmlFor="top-p-int"
-                  className="text-left text-sm font-medium"
-                >
+                <Label htmlFor="top-p-int" className="text-left text-sm font-medium">
                   Top P <small className="opacity-40">(default: 1)</small>
                 </Label>
                 <InputNumber
@@ -169,19 +164,13 @@ function Settings(props) {
                 className="flex h-4 w-full"
               />
             </HoverCardTrigger>
-            <OptionHover
-              type="topp"
-              side="left"
-            />
+            <OptionHover type="topp" side="left" />
           </HoverCard>
 
           <HoverCard openDelay={300}>
             <HoverCardTrigger className="grid w-full items-center gap-2">
               <div className="flex justify-between">
-                <Label
-                  htmlFor="freq-penalty-int"
-                  className="text-left text-sm font-medium"
-                >
+                <Label htmlFor="freq-penalty-int" className="text-left text-sm font-medium">
                   Frequency Penalty <small className="opacity-40">(default: 0)</small>
                 </Label>
                 <InputNumber
@@ -213,19 +202,13 @@ function Settings(props) {
                 className="flex h-4 w-full"
               />
             </HoverCardTrigger>
-            <OptionHover
-              type="freq"
-              side="left"
-            />
+            <OptionHover type="freq" side="left" />
           </HoverCard>
 
           <HoverCard openDelay={300}>
             <HoverCardTrigger className="grid w-full items-center gap-2">
               <div className="flex justify-between">
-                <Label
-                  htmlFor="pres-penalty-int"
-                  className="text-left text-sm font-medium"
-                >
+                <Label htmlFor="pres-penalty-int" className="text-left text-sm font-medium">
                   Presence Penalty <small className="opacity-40">(default: 0)</small>
                 </Label>
                 <InputNumber
@@ -257,10 +240,7 @@ function Settings(props) {
                 className="flex h-4 w-full"
               />
             </HoverCardTrigger>
-            <OptionHover
-              type="pres"
-              side="left"
-            />
+            <OptionHover type="pres" side="left" />
           </HoverCard>
         </div>
       </div>

client/src/components/Endpoints/SaveAsPresetDialog.jsx

@@ -33,18 +33,12 @@ const SaveAsPresetDialog = ({ open, onOpenChange, preset }) => {
   }, [open]);
 
   return (
-    <Dialog
-      open={open}
-      onOpenChange={onOpenChange}
-    >
+    <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogTemplate
         title="Save As Preset"
         main={
           <div className="grid w-full items-center gap-2">
-            <Label
-              htmlFor="chatGptLabel"
-              className="text-left text-sm font-medium"
-            >
+            <Label htmlFor="chatGptLabel" className="text-left text-sm font-medium">
               Preset Name
             </Label>
             <Input