clean up

Signed-off-by: James <[email protected]>
GHenri · Oct 6, 2023 · 9a79c3e · 9a79c3e
1 parent e47d19e
commit 9a79c3e
Show file tree

Hide file tree

Showing 53 changed files with 596 additions and 2,794 deletions.
diff --git a/electron/core/plugins/inference-plugin/module.js b/electron/core/plugins/inference-plugin/module.js
@@ -23,7 +23,7 @@ async function initModel(product) {
     console.error(
       "A subprocess is already running. Attempt to kill then reinit."
     );
-    killSubprocess();
+    dispose();
   }
 
   let binaryFolder = path.join(__dirname, "nitro"); // Current directory by default

diff --git a/electron/package.json b/electron/package.json
@@ -57,7 +57,8 @@
     "pacote": "^17.0.4",
     "react-intersection-observer": "^9.5.2",
     "request": "^2.88.2",
-    "request-progress": "^3.0.0"
+    "request-progress": "^3.0.0",
+    "use-debounce": "^9.0.4"
   },
   "devDependencies": {
     "@electron/notarize": "^2.1.0",

diff --git a/node_modules/.yarn-integrity b/node_modules/.yarn-integrity
diff --git a/web/app/_components/AvailableModelCard/index.tsx b/web/app/_components/AvailableModelCard/index.tsx
@@ -47,7 +47,7 @@ const AvailableModelCard: React.FC<Props> = ({
 
   return (
     <div className="border rounded-lg border-gray-200">
-      <div className="flex justify-between py-4 px-3 gap-[10px]">
+      <div className="flex justify-between py-4 px-3 gap-2.5">
         <DownloadModelContent
           required={required}
           author={product.author}

diff --git a/web/app/_components/ChatBody/renderChatMessage.tsx b/web/app/_components/ChatBody/renderChatMessage.tsx
@@ -11,7 +11,6 @@ export default function renderChatMessage({
   senderName,
   createdAt,
   imageUrls,
-  htmlText,
   text,
 }: ChatMessage): React.ReactNode {
   switch (messageType) {
@@ -45,7 +44,7 @@ export default function renderChatMessage({
           senderName={senderName}
           createdAt={createdAt}
           senderType={messageSenderType}
-          text={htmlText && htmlText.trim().length > 0 ? htmlText : text}
+          text={text}
         />
       );
     default:

diff --git a/web/app/_components/ConversationalCard/index.tsx b/web/app/_components/ConversationalCard/index.tsx
@@ -32,7 +32,7 @@ const ConversationalCard: React.FC<Props> = ({ product }) => {
           {description}
         </span>
       </div>
-      <span className="flex text-xs leading-5 text-gray-500 items-center gap-[2px]">
+      <span className="flex text-xs leading-5 text-gray-500 items-center gap-0.5">
         <Image src={"icons/play.svg"} width={16} height={16} alt="" />
         32.2k runs
       </span>

diff --git a/web/app/_components/DownloadModelContent/index.tsx b/web/app/_components/DownloadModelContent/index.tsx
@@ -18,19 +18,19 @@ const DownloadModelContent: React.FC<Props> = ({
   type,
 }) => {
   return (
-    <div className="w-4/5 flex flex-col gap-[10px]">
+    <div className="w-4/5 flex flex-col gap-2.5">
       <div className="flex items-center gap-1">
         <h2 className="font-medium text-xl leading-[25px] tracking-[-0.4px] text-gray-900">
           {name}
         </h2>
         <DownloadModelTitle title={type} />
-        <div className="py-[2px] px-[10px] bg-purple-100 rounded-md text-center">
+        <div className="py-0.5 px-2.5 bg-purple-100 rounded-md text-center">
           <span className="text-xs leading-[18px] font-semibold text-purple-800">
             {author}
           </span>
         </div>
         {required && (
-          <div className="py-[2px] px-[10px] bg-purple-100 rounded-md text-center">
+          <div className="py-0.5 px-2.5 bg-purple-100 rounded-md text-center">
             <span className="text-xs leading-[18px] text-[#11192899]">
               Required{" "}
             </span>
@@ -44,7 +44,7 @@ const DownloadModelContent: React.FC<Props> = ({
       <div
         className={`${
           isRecommend ? "flex" : "hidden"
-        } w-fit justify-center items-center bg-green-50 rounded-full px-[10px] py-[2px] gap-2`}
+        } w-fit justify-center items-center bg-green-50 rounded-full px-2.5 py-0.5 gap-2`}
       >
         <div className="w-3 h-3 rounded-full bg-green-400"></div>
         <span className="text-green-600 font-medium text-xs leading-18px">

diff --git a/web/app/_components/DownloadModelTitle/index.tsx b/web/app/_components/DownloadModelTitle/index.tsx
@@ -3,7 +3,7 @@ type Props = {
 };
 
 export const DownloadModelTitle: React.FC<Props> = ({ title }) => (
-  <div className="py-[2px] px-[10px] bg-purple-100 rounded-md text-center">
+  <div className="py-0.5 px-2.5 bg-purple-100 rounded-md text-center">
     <span className="text-xs leading-[18px] font-medium text-purple-800">
       {title}
     </span>

diff --git a/web/app/_components/DownloadedModelCard/index.tsx b/web/app/_components/DownloadedModelCard/index.tsx
@@ -16,7 +16,7 @@ const DownloadedModelCard: React.FC<Props> = ({
   onDeleteClick,
 }) => (
   <div className="border rounded-lg border-gray-200">
-    <div className="flex justify-between py-4 px-3 gap-[10px]">
+    <div className="flex justify-between py-4 px-3 gap-2.5">
       <DownloadModelContent
         required={required}
         author={product.author}

diff --git a/web/app/_components/DownloadedModelTable/index.tsx b/web/app/_components/DownloadedModelTable/index.tsx
@@ -1,11 +1,13 @@
-import React, { Fragment } from "react";
+import React from "react";
 import SearchBar from "../SearchBar";
 import ModelTable from "../ModelTable";
 import { useGetDownloadedModels } from "@/_hooks/useGetDownloadedModels";
 
 const DownloadedModelTable: React.FC = () => {
   const { downloadedModels } = useGetDownloadedModels();
 
+  if (!downloadedModels || downloadedModels.length === 0) return null;
+
   return (
     <div className="pl-[63px] pr-[89px]">
       <h3 className="text-xl leading-[25px] mt-[50px]">Downloaded Models</h3>

diff --git a/web/app/_components/ExpandableHeader/index.tsx b/web/app/_components/ExpandableHeader/index.tsx
@@ -8,7 +8,7 @@ type Props = {
 
 const ExpandableHeader: React.FC<Props> = ({ title, expanded, onClick }) => (
   <button onClick={onClick} className="flex items-center justify-between px-2">
-    <h2 className="text-gray-400 font-bold text-[12px] leading-[12px] pl-1">
+    <h2 className="text-gray-400 font-bold text-xs leading-[12px] pl-1">
       {title}
     </h2>
     <div className="mr-2">

diff --git a/web/app/_components/ExploreModelContainer/index.tsx b/web/app/_components/ExploreModelContainer/index.tsx
@@ -1,19 +1,7 @@
 import HeaderTitle from "../HeaderTitle";
 import SearchBar, { SearchType } from "../SearchBar";
-import SimpleCheckbox from "../SimpleCheckbox";
-import SimpleTag, { TagType } from "../SimpleTag";
 import ExploreModelList from "../ExploreModelList";
-
-const tags = [
-  "Roleplay",
-  "Llama",
-  "Story",
-  "Casual",
-  "Professional",
-  "CodeLlama",
-  "Coding",
-];
-const checkboxs = ["GGUF", "TensorRT", "Meow", "JigglyPuff"];
+import ExploreModelFilter from "../ExploreModelFilter";
 
 const ExploreModelContainer: React.FC = () => (
   <div className="flex flex-col flex-1 px-16 pt-14 overflow-hidden">
@@ -23,21 +11,7 @@ const ExploreModelContainer: React.FC = () => (
       placeholder="Owner name like TheBloke, etc.."
     />
     <div className="flex flex-1 gap-x-10 mt-9 overflow-hidden">
-      <div className="w-64">
-        <h2 className="font-semibold text-xs mb-[15px]">Tags</h2>
-        <SearchBar placeholder="Filter by tags" />
-        <div className="flex flex-wrap gap-[9px] mt-[14px]">
-          {tags.map((item) => (
-            <SimpleTag key={item} title={item} type={item as TagType} />
-          ))}
-        </div>
-        <hr className="my-10" />
-        <fieldset>
-          {checkboxs.map((item) => (
-            <SimpleCheckbox key={item} name={item} />
-          ))}
-        </fieldset>
-      </div>
+      <ExploreModelFilter />
       <ExploreModelList />
     </div>
   </div>

diff --git a/web/app/_components/ExploreModelFilter/index.tsx b/web/app/_components/ExploreModelFilter/index.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+import SearchBar from "../SearchBar";
+import SimpleCheckbox from "../SimpleCheckbox";
+import SimpleTag, { TagType } from "../SimpleTag";
+
+const tags = [
+  "Roleplay",
+  "Llama",
+  "Story",
+  "Casual",
+  "Professional",
+  "CodeLlama",
+  "Coding",
+];
+const checkboxs = ["GGUF", "TensorRT", "Meow", "JigglyPuff"];
+
+const ExploreModelFilter: React.FC = () => {
+  const enabled = false;
+  if (!enabled) return null;
+
+  return (
+    <div className="w-64">
+      <h2 className="font-semibold text-xs mb-[15px]">Tags</h2>
+      <SearchBar placeholder="Filter by tags" />
+      <div className="flex flex-wrap gap-[9px] mt-[14px]">
+        {tags.map((item) => (
+          <SimpleTag key={item} title={item} type={item as TagType} />
+        ))}
+      </div>
+      <hr className="my-10" />
+      <fieldset>
+        {checkboxs.map((item) => (
+          <SimpleCheckbox key={item} name={item} />
+        ))}
+      </fieldset>
+    </div>
+  );
+};
+
+export default ExploreModelFilter;
diff --git a/web/app/_components/ExploreModelItem/index.tsx b/web/app/_components/ExploreModelItem/index.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable react/display-name */
+
 "use client";
 
 import ExploreModelItemHeader from "../ExploreModelItemHeader";
@@ -11,9 +13,7 @@ type Props = {
   model: Product;
 };
 
-export type Ref = HTMLDivElement;
-
-const ExploreModelItem = forwardRef<Ref, Props>(({ model }, ref) => {
+const ExploreModelItem = forwardRef<HTMLDivElement, Props>(({ model }, ref) => {
   const [show, setShow] = useState(false);
 
   return (
@@ -33,7 +33,7 @@ const ExploreModelItem = forwardRef<Ref, Props>(({ model }, ref) => {
               <div className="text-sm font-medium text-gray-500">
                 Model Format
               </div>
-              <div className="px-[10px] py-0.5 bg-gray-100 text-xs text-gray-800 w-fit">
+              <div className="px-2.5 py-0.5 bg-gray-100 text-xs text-gray-800 w-fit">
                 GGUF
               </div>
             </div>

diff --git a/web/app/_components/HistoryItem/index.tsx b/web/app/_components/HistoryItem/index.tsx
@@ -66,7 +66,7 @@ const HistoryItem: React.FC<Props> = ({
 
   return (
     <button
-      className={`flex flex-row mx-1 items-center gap-[10px] rounded-lg p-2 ${backgroundColor} hover:bg-hover-light`}
+      className={`flex flex-row mx-1 items-center gap-2.5 rounded-lg p-2 ${backgroundColor} hover:bg-hover-light`}
       onClick={onClick}
     >
       <Image
@@ -79,7 +79,7 @@ const HistoryItem: React.FC<Props> = ({
       <div className="flex flex-col justify-between text-sm leading-[20px] w-full">
         <div className="flex flex-row items-center justify-between">
           <span className="text-gray-900 text-left">{name}</span>
-          <span className="text-[11px] leading-[13px] tracking-[-0.4px] text-gray-400">
+          <span className="text-xs leading-[13px] tracking-[-0.4px] text-gray-400">
             {updatedAt && new Date(updatedAt).toDateString()}
           </span>
         </div>

diff --git a/web/app/_components/JanLogo/index.tsx b/web/app/_components/JanLogo/index.tsx
@@ -7,7 +7,7 @@ const JanLogo: React.FC = () => {
   const setActiveConvoId = useSetAtom(setActiveConvoIdAtom);
   return (
     <button
-      className="p-3 flex gap-[2px] items-center"
+      className="p-3 flex gap-0.5 items-center"
       onClick={() => setActiveConvoId(undefined)}
     >
       <Image src={"icons/app_icon.svg"} width={28} height={28} alt="" />

diff --git a/web/app/_components/ChatContainer/index.tsx → web/app/_components/MainView/index.tsx b/web/app/_components/ChatContainer/index.tsx → web/app/_components/MainView/index.tsx
@@ -12,7 +12,7 @@ import {
 import EmptyChatContainer from "../EmptyChatContainer";
 import MainChat from "../MainChat";
 
-export default function ChatContainer() {
+const MainView: React.FC = () => {
   const viewState = useAtomValue(getMainViewStateAtom);
 
   switch (viewState) {
@@ -30,4 +30,6 @@ export default function ChatContainer() {
     default:
       return <MainChat />;
   }
-}
+};
+
+export default MainView;
diff --git a/web/app/_components/ModelActionButton/index.tsx b/web/app/_components/ModelActionButton/index.tsx
@@ -38,7 +38,7 @@ const ModelActionButton: React.FC<Props> = ({ type, onActionClick }) => {
 
   return (
     <td className="whitespace-nowrap px-6 py-4 text-sm">
-      <PrimaryButton title={styles.title} onClick={onClick} />
+      <PrimaryButton title={styles.title} onClick={onClick} className={styles.backgroundColor} />
     </td>
   );
 };

diff --git a/web/app/_components/ModelActionMenu/index.tsx b/web/app/_components/ModelActionMenu/index.tsx
@@ -6,30 +6,37 @@ type Props = {
   onDeleteClick: () => void;
 };
 
-const ModelActionMenu: React.FC<Props> = ({ onDeleteClick }) => {
-  return (
-    <Menu as="div" className="relative flex-none">
-      <Menu.Button className="block text-gray-500 hover:text-gray-900">
-        <span className="sr-only">Open options</span>
-        <EllipsisVerticalIcon className="h-5 w-5" aria-hidden="true" />
-      </Menu.Button>
-      <Transition
-        as={Fragment}
-        enter="transition ease-out duration-100"
-        enterFrom="transform opacity-0 scale-95"
-        enterTo="transform opacity-100 scale-100"
-        leave="transition ease-in duration-75"
-        leaveFrom="transform opacity-100 scale-100"
-        leaveTo="transform opacity-0 scale-95"
-      >
-        <Menu.Items className="absolute right-0 z-50 mt-2 w-32 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none">
-          <Menu.Item>
-            <button onClick={onDeleteClick}>Delete</button>
-          </Menu.Item>
-        </Menu.Items>
-      </Transition>
-    </Menu>
-  );
-};
+const ModelActionMenu: React.FC<Props> = ({ onDeleteClick }) => (
+  <Menu as="div" className="relative flex-none">
+    <Menu.Button className="block text-gray-500 hover:text-gray-900">
+      <span className="sr-only">Open options</span>
+      <EllipsisVerticalIcon className="h-5 w-5" aria-hidden="true" />
+    </Menu.Button>
+    <Transition
+      as={Fragment}
+      enter="transition ease-out duration-100"
+      enterFrom="transform opacity-0 scale-95"
+      enterTo="transform opacity-100 scale-100"
+      leave="transition ease-in duration-75"
+      leaveFrom="transform opacity-100 scale-100"
+      leaveTo="transform opacity-0 scale-95"
+    >
+      <Menu.Items className="absolute right-0 z-50 mt-2 w-32 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none">
+        <Menu.Item>
+          {({ active }) => (
+            <button
+              className={`${
+                active ? "bg-violet-500 text-white" : "text-gray-900"
+              } group flex w-full items-center rounded-md px-2 py-2 text-sm`}
+              onClick={onDeleteClick}
+            >
+              Delete
+            </button>
+          )}
+        </Menu.Item>
+      </Menu.Items>
+    </Transition>
+  </Menu>
+);
 
 export default ModelActionMenu;
diff --git a/web/app/_components/ModelDownloadingButton/index.tsx b/web/app/_components/ModelDownloadingButton/index.tsx
@@ -11,7 +11,7 @@ const ModelDownloadingButton: React.FC<Props> = ({ total, value }) => {
       <button className="py-2 px-3 flex gap-2 border text-xs leading-[18px] border-gray-200 rounded-lg">
         Downloading...
       </button>
-      <div className="py-[2px] px-[10px] bg-gray-200 rounded">
+      <div className="py-0.5 px-2.5 bg-gray-200 rounded">
         <span className="text-xs font-medium text-gray-800">
           {toGigabytes(value)} / {toGigabytes(total)}
         </span>