Merge pull request #412 from janhq/setup/prettier

misc: setup prettier
janhq · Oct 20, 2023 · 05b40ac · 05b40ac
2 parents c9a6ee6 + fa3db5a
commit 05b40ac
Show file tree

Hide file tree

Showing 158 changed files with 3,046 additions and 2,866 deletions.
diff --git a/web/.prettierignore b/web/.prettierignore
@@ -0,0 +1,5 @@
+.next/
+node_modules/
+dist/
+*.hbs
+*.mdx
diff --git a/web/.prettierrc b/web/.prettierrc
@@ -0,0 +1,8 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "quoteProps": "consistent",
+  "trailingComma": "es5",
+  "endOfLine": "lf",
+  "plugins": ["prettier-plugin-tailwindcss"]
+}
diff --git a/web/app/_components/ActiveModelTable/index.tsx b/web/app/_components/ActiveModelTable/index.tsx
@@ -1,19 +1,19 @@
-import { useAtomValue } from "jotai";
-import React from "react";
-import ModelTable from "../ModelTable";
-import { activeAssistantModelAtom } from "@/_helpers/atoms/Model.atom";
+import { useAtomValue } from 'jotai'
+import React from 'react'
+import ModelTable from '../ModelTable'
+import { activeAssistantModelAtom } from '@/_helpers/atoms/Model.atom'
 
 const ActiveModelTable: React.FC = () => {
-  const activeModel = useAtomValue(activeAssistantModelAtom);
+  const activeModel = useAtomValue(activeAssistantModelAtom)
 
-  if (!activeModel) return null;
+  if (!activeModel) return null
 
   return (
     <div className="pl-[63px] pr-[89px]">
-      <h3 className="text-xl leading-[25px] mb-[13px]">Active Model(s)</h3>
+      <h3 className="mb-[13px] text-xl leading-[25px]">Active Model(s)</h3>
       <ModelTable models={[activeModel]} />
     </div>
-  );
-};
+  )
+}
 
-export default ActiveModelTable;
+export default ActiveModelTable
diff --git a/web/app/_components/AvailableModelCard/index.tsx b/web/app/_components/AvailableModelCard/index.tsx
@@ -1,53 +1,53 @@
-import DownloadModelContent from "../DownloadModelContent";
-import ModelDownloadButton from "../ModelDownloadButton";
-import ModelDownloadingButton from "../ModelDownloadingButton";
-import { useAtomValue } from "jotai";
-import { modelDownloadStateAtom } from "@/_helpers/atoms/DownloadState.atom";
-import { AssistantModel } from "@/_models/AssistantModel";
+import DownloadModelContent from '../DownloadModelContent'
+import ModelDownloadButton from '../ModelDownloadButton'
+import ModelDownloadingButton from '../ModelDownloadingButton'
+import { useAtomValue } from 'jotai'
+import { modelDownloadStateAtom } from '@/_helpers/atoms/DownloadState.atom'
+import { AssistantModel } from '@/_models/AssistantModel'
 
 type Props = {
-  model: AssistantModel;
-  isRecommend: boolean;
-  required?: string;
-  onDownloadClick?: (model: AssistantModel) => void;
-};
+  model: AssistantModel
+  isRecommend: boolean
+  required?: string
+  onDownloadClick?: (model: AssistantModel) => void
+}
 
 const AvailableModelCard: React.FC<Props> = ({
   model,
   isRecommend,
   required,
   onDownloadClick,
 }) => {
-  const downloadState = useAtomValue(modelDownloadStateAtom);
+  const downloadState = useAtomValue(modelDownloadStateAtom)
 
-  let isDownloading = false;
-  let total = 0;
-  let transferred = 0;
+  let isDownloading = false
+  let total = 0
+  let transferred = 0
 
   if (model._id && downloadState[model._id]) {
     isDownloading =
       downloadState[model._id].error == null &&
-      downloadState[model._id].percent < 1;
+      downloadState[model._id].percent < 1
 
     if (isDownloading) {
-      total = downloadState[model._id].size.total;
-      transferred = downloadState[model._id].size.transferred;
+      total = downloadState[model._id].size.total
+      transferred = downloadState[model._id].size.transferred
     }
   }
 
   const downloadButton = isDownloading ? (
-    <div className="w-1/5 flex items-start justify-end">
+    <div className="flex w-1/5 items-start justify-end">
       <ModelDownloadingButton total={total} value={transferred} />
     </div>
   ) : (
-    <div className="w-1/5 flex items-center justify-end">
+    <div className="flex w-1/5 items-center justify-end">
       <ModelDownloadButton callback={() => onDownloadClick?.(model)} />
     </div>
-  );
+  )
 
   return (
-    <div className="border rounded-lg border-gray-200">
-      <div className="flex justify-between py-4 px-3 gap-2.5">
+    <div className="rounded-lg border border-gray-200">
+      <div className="flex justify-between gap-2.5 px-3 py-4">
         <DownloadModelContent
           required={required}
           author={model.author}
@@ -60,7 +60,7 @@ const AvailableModelCard: React.FC<Props> = ({
       </div>
       {/* <ViewModelDetailButton callback={handleViewDetails} /> */}
     </div>
-  );
-};
+  )
+}
 
-export default AvailableModelCard;
+export default AvailableModelCard
diff --git a/web/app/_components/BasicPromptAccessories/index.tsx b/web/app/_components/BasicPromptAccessories/index.tsx
@@ -1,14 +1,14 @@
-"use client";
+'use client'
 
-import { useSetAtom } from "jotai";
-import { InformationCircleIcon } from "@heroicons/react/24/outline";
-import SendButton from "../SendButton";
-import { showingAdvancedPromptAtom } from "@/_helpers/atoms/Modal.atom";
+import { useSetAtom } from 'jotai'
+import { InformationCircleIcon } from '@heroicons/react/24/outline'
+import SendButton from '../SendButton'
+import { showingAdvancedPromptAtom } from '@/_helpers/atoms/Modal.atom'
 
 const BasicPromptAccessories: React.FC = () => {
-  const setShowingAdvancedPrompt = useSetAtom(showingAdvancedPromptAtom);
+  const setShowingAdvancedPrompt = useSetAtom(showingAdvancedPromptAtom)
 
-  const shouldShowAdvancedPrompt = false;
+  const shouldShowAdvancedPrompt = false
 
   return (
     <div className="absolute inset-x-0 bottom-0 flex justify-between py-2 pl-3 pr-2">
@@ -27,7 +27,7 @@ const BasicPromptAccessories: React.FC = () => {
         <SendButton />
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default BasicPromptAccessories;
+export default BasicPromptAccessories
diff --git a/web/app/_components/BasicPromptButton/index.tsx b/web/app/_components/BasicPromptButton/index.tsx
@@ -1,20 +1,20 @@
-import React from "react";
-import { useSetAtom } from "jotai";
-import { ChevronLeftIcon } from "@heroicons/react/24/outline";
-import { showingAdvancedPromptAtom } from "@/_helpers/atoms/Modal.atom";
+import React from 'react'
+import { useSetAtom } from 'jotai'
+import { ChevronLeftIcon } from '@heroicons/react/24/outline'
+import { showingAdvancedPromptAtom } from '@/_helpers/atoms/Modal.atom'
 
 const BasicPromptButton: React.FC = () => {
-  const setShowingAdvancedPrompt = useSetAtom(showingAdvancedPromptAtom);
+  const setShowingAdvancedPrompt = useSetAtom(showingAdvancedPromptAtom)
 
   return (
     <button
       onClick={() => setShowingAdvancedPrompt(false)}
-      className="flex items-center mx-2 mt-3 mb-[10px] flex-none gap-1 text-xs leading-[18px] text-[#6B7280]"
+      className="mx-2 mb-[10px] mt-3 flex flex-none items-center gap-1 text-xs leading-[18px] text-[#6B7280]"
     >
       <ChevronLeftIcon width={20} height={20} />
-      <span className="font-semibold text-gray-500 text-xs">BASIC PROMPT</span>
+      <span className="text-xs font-semibold text-gray-500">BASIC PROMPT</span>
     </button>
-  );
-};
+  )
+}
 
-export default React.memo(BasicPromptButton);
+export default React.memo(BasicPromptButton)
diff --git a/web/app/_components/BasicPromptInput/index.tsx b/web/app/_components/BasicPromptInput/index.tsx
@@ -1,71 +1,71 @@
-"use client";
+'use client'
 
-import { currentPromptAtom } from "@/_helpers/JotaiWrapper";
-import { getActiveConvoIdAtom } from "@/_helpers/atoms/Conversation.atom";
-import { selectedModelAtom } from "@/_helpers/atoms/Model.atom";
-import useCreateConversation from "@/_hooks/useCreateConversation";
-import useInitModel from "@/_hooks/useInitModel";
-import useSendChatMessage from "@/_hooks/useSendChatMessage";
-import { useAtom, useAtomValue } from "jotai";
-import { ChangeEvent, useEffect, useRef } from "react";
+import { currentPromptAtom } from '@/_helpers/JotaiWrapper'
+import { getActiveConvoIdAtom } from '@/_helpers/atoms/Conversation.atom'
+import { selectedModelAtom } from '@/_helpers/atoms/Model.atom'
+import useCreateConversation from '@/_hooks/useCreateConversation'
+import useInitModel from '@/_hooks/useInitModel'
+import useSendChatMessage from '@/_hooks/useSendChatMessage'
+import { useAtom, useAtomValue } from 'jotai'
+import { ChangeEvent, useEffect, useRef } from 'react'
 
 const BasicPromptInput: React.FC = () => {
-  const activeConversationId = useAtomValue(getActiveConvoIdAtom);
-  const selectedModel = useAtomValue(selectedModelAtom);
-  const [currentPrompt, setCurrentPrompt] = useAtom(currentPromptAtom);
-  const { sendChatMessage } = useSendChatMessage();
-  const { requestCreateConvo } = useCreateConversation();
+  const activeConversationId = useAtomValue(getActiveConvoIdAtom)
+  const selectedModel = useAtomValue(selectedModelAtom)
+  const [currentPrompt, setCurrentPrompt] = useAtom(currentPromptAtom)
+  const { sendChatMessage } = useSendChatMessage()
+  const { requestCreateConvo } = useCreateConversation()
 
-  const { initModel } = useInitModel();
+  const { initModel } = useInitModel()
 
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
 
   const handleKeyDown = async (
     event: React.KeyboardEvent<HTMLTextAreaElement>
   ) => {
-    if (event.key === "Enter") {
+    if (event.key === 'Enter') {
       if (!event.shiftKey) {
         if (activeConversationId) {
-          event.preventDefault();
-          sendChatMessage();
+          event.preventDefault()
+          sendChatMessage()
         } else {
           if (!selectedModel) {
-            console.log("No model selected");
-            return;
+            console.log('No model selected')
+            return
           }
 
-          await requestCreateConvo(selectedModel);
-          await initModel(selectedModel);
-          sendChatMessage();
+          await requestCreateConvo(selectedModel)
+          await initModel(selectedModel)
+          sendChatMessage()
         }
       }
     }
-  };
+  }
 
   useEffect(() => {
-    adjustTextareaHeight();
-  }, [currentPrompt]);
+    adjustTextareaHeight()
+  }, [currentPrompt])
 
   const handleMessageChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
-    setCurrentPrompt(event.target.value);
-  };
+    setCurrentPrompt(event.target.value)
+  }
 
   // Auto adjust textarea height based on content
-  const MAX_ROWS = 30;
+  const MAX_ROWS = 30
 
   const adjustTextareaHeight = () => {
     if (textareaRef.current) {
-      textareaRef.current.style.height = "auto"; // 1 row
-      const scrollHeight = textareaRef.current.scrollHeight;
+      textareaRef.current.style.height = 'auto' // 1 row
+      const scrollHeight = textareaRef.current.scrollHeight
       const maxScrollHeight =
         parseInt(window.getComputedStyle(textareaRef.current).lineHeight, 10) *
-        MAX_ROWS;
+        MAX_ROWS
       textareaRef.current.style.height = `${Math.min(
         scrollHeight,
         maxScrollHeight
-      )}px`;
+      )}px`
     }
-  };
+  }
 
   return (
     <div className="overflow-hidden rounded-lg shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-indigo-600">
@@ -79,7 +79,7 @@ const BasicPromptInput: React.FC = () => {
         className="block w-full resize-none border-0 bg-transparent py-1.5 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
         placeholder="Message ..."
         rows={1}
-        style={{ overflow: "auto" }}
+        style={{ overflow: 'auto' }}
       />
       {/* Spacer element to match the height of the toolbar */}
       <div className="py-2" aria-hidden="true">
@@ -89,7 +89,7 @@ const BasicPromptInput: React.FC = () => {
         </div>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default BasicPromptInput;
+export default BasicPromptInput