Refactor Jan into an Electron app

.gitignore

@@ -4,3 +4,9 @@
 # Jan inference
 models/**
 error.log
+app/electron/core/*/node_modules
+app/electron/core/*/dist
+app/electron/core/*/package-lock.json
+*.tgz
+app/yarn.lock
+app/dist

app/README.md

@@ -0,0 +1,96 @@
+# App
+
+Jan Desktop is an Electron application designed to allow users to interact with the Language Model (LLM) through chat or create art using Stable Diffusion.
+
+## Features
+
+- Chat with the Language Model: Engage in interactive conversations with the Language Model. Ask questions, seek information, or simply have a chat.
+
+- Generate Art with Stable Diffusion: Utilize the power of Stable Diffusion to generate unique and captivating pieces of art. Experiment with various parameters to achieve desired results.
+
+## Installation and Usage
+
+### Pre-requisites
+- node >= 20.0.0
+- yarn >= 1.22.0
+
+### Use as complete suite (in progress)
+
+### For interactive development
+
+Note: This instruction is tested on MacOS only.
+
+1. **Clone the Repository:**
+
+   ```
+   git clone https://github.com/janhq/jan
+   git checkout feature/hackathon-refactor-jan-into-electron-app
+   cd jan/app
+   ```
+
+2. **Install dependencies:**
+
+   ```
+   yarn install
+   ```
+
+3. **Download Model and copy to userdata directory** (this is a hacky step, will be remove in future versions)
+
+   ```
+   # Determining the path to save model with /Users/<username>/Library/Application Support/jan-web/
+   mkdir /Users/<username>/Library/Application Support/jan-web
+
+   # Now download the model to correct location by running command
+   wget -O /Users/<username>/Library/Application Support/jan-web/llama-2-7b-chat.gguf.q4_0.bin https://huggingface.co/TheBloke/Llama-2-7b-Chat-GGUF/resolve/main/llama-2-7b-chat.Q4_0.gguf
+   ```
+
+4. **Run development and Using Jan Desktop**
+
+   ```
+   yarn electron:start
+   ```
+   This will start the development server and open the desktop app.
+   In this step, there are a few notification about installing base plugin, just click `OK` and `Next` to continue.
+   ![](./images/jan-desktop-dev-instruction-1.png)
+   ![](./images/jan-desktop-dev-instruction-2.png)
+   ![](./images/jan-desktop-dev-instruction-3.png)
+
+   After that, you can use Jan Desktop as normal.
+   ![](./images/jan-desktop-dev-instruction-4.png)
+   ![](./images/jan-desktop-dev-instruction-5.png)
+   ![](./images/jan-desktop-dev-instruction-6.png)
+
+### For production build
+
+   ```bash
+   # Do step 1 and 2 in previous section
+   git clone https://github.com/janhq/jan
+   git checkout feature/hackathon-refactor-jan-into-electron-app
+   cd jan/app
+   yarn install
+
+   # Build the app
+   yarn electron:build:all
+   ```
+
+   This will build the app MacOS m1/m2 for production (with code signing already done) and put the result in `dist` folder.
+
+## Configuration
+
+TO DO
+
+## Dependencies
+
+TO DO
+
+## Contributing
+
+Contributions are welcome! If you find a bug or have suggestions for improvements, feel free to open an issue or submit a pull request on the [GitHub repository](https://github.com/janhq/jan).
+
+## License
+
+This project is licensed under the Fair-code License - see the [License](https://faircode.io/#licenses) for more details.
+
+---
+
+Feel free to reach out [Discord](https://jan.ai/discord) if you have any questions or need further assistance. Happy coding with Jan Web and exploring the capabilities of the Language Model and Stable Diffusion! 🚀🎨🤖

web-client/app/_components/AdvancedPromptGenerationParams/index.tsx → app/app/_components/AdvancedPromptGenerationParams/index.tsx

@@ -6,7 +6,7 @@ const AdvancedPromptGenerationParams = () => {
   return (
     <>
       <TogglableHeader
-        icon={"/icons/unicorn_layers-alt.svg"}
+        icon={"icons/unicorn_layers-alt.svg"}
         title={"Generation Parameters"}
         expand={expand}
         onTitleClick={() => setExpand(!expand)}

web-client/app/_components/AdvancedPromptImageUpload/index.tsx → app/app/_components/AdvancedPromptImageUpload/index.tsx

@@ -15,7 +15,7 @@ const AdvancedPromptImageUpload: React.FC<Props> = ({ register }) => {
   return (
     <>
       <TogglableHeader
-        icon={"/icons/ic_image.svg"}
+        icon={"icons/ic_image.svg"}
         title={"Image"}
         expand={expand}
         onTitleClick={() => setExpand(!expand)}

web-client/app/_components/AdvancedPromptResolution/index.tsx → app/app/_components/AdvancedPromptResolution/index.tsx

@@ -10,7 +10,7 @@ const AdvancedPromptResolution = () => {
   return (
     <>
       <TogglableHeader
-        icon={"/icons/unicorn_layers-alt.svg"}
+        icon={"icons/unicorn_layers-alt.svg"}
         title={"Resolution"}
         expand={expand}
         onTitleClick={() => setExpand(!expand)}

web-client/app/_components/AdvancedPromptText/index.tsx → app/app/_components/AdvancedPromptText/index.tsx

@@ -13,7 +13,7 @@ const AdvancedPromptText: React.FC<Props> = ({ register }) => {
   return (
     <>
       <TogglableHeader
-        icon={"/icons/messicon.svg"}
+        icon={"icons/messicon.svg"}
         title={"Prompt"}
         expand={expand}
         onTitleClick={() => setExpand(!expand)}

web-client/app/_components/AiSearch/index.tsx → app/app/_components/AiSearch/index.tsx

@@ -4,7 +4,7 @@ const Search: React.FC = () => {
   return (
     <div className="flex bg-gray-200 w-[343px] h-[36px] items-center px-2 gap-[6px] rounded-md">
       <Image
-        src={"/icons/magnifyingglass.svg"}
+        src={"icons/magnifyingglass.svg"}
         width={15.63}
         height={15.78}
         alt=""

web-client/app/_components/BasicPromptAccessories/index.tsx → app/app/_components/BasicPromptAccessories/index.tsx

@@ -13,8 +13,8 @@ const BasicPromptAccessories: React.FC = () => {
   const setShowingAdvancedPrompt = useSetAtom(showingAdvancedPromptAtom);
   const currentConversation = useAtomValue(currentConversationAtom);
 
-  const shouldShowAdvancedPrompt =
-    currentConversation?.product.type === ProductType.ControlNet;
+  const shouldShowAdvancedPrompt = false;
+  // currentConversation?.product.type === ProductType.ControlNet;
 
   return (
     <div

web-client/app/_components/ChatBody/index.tsx → app/app/_components/ChatBody/index.tsx

@@ -4,11 +4,16 @@ import React, { useCallback, useRef, useState } from "react";
 import ChatItem from "../ChatItem";
 import { ChatMessage } from "@/_models/ChatMessage";
 import useChatMessages from "@/_hooks/useChatMessages";
-import { currentChatMessagesAtom } from "@/_helpers/JotaiWrapper";
+import {
+  currentChatMessagesAtom,
+  showingTyping,
+} from "@/_helpers/JotaiWrapper";
 import { useAtomValue } from "jotai";
+import LoadingIndicator from "../LoadingIndicator";
 
 const ChatBody: React.FC = () => {
   const messages = useAtomValue(currentChatMessagesAtom);
+  const isTyping = useAtomValue(showingTyping);
   const [offset, setOffset] = useState(0);
   const { loading, hasMore } = useChatMessages(offset);
   const intersectObs = useRef<any>(null);
@@ -32,13 +37,19 @@ const ChatBody: React.FC = () => {
 
   const content = messages.map((message, index) => {
     if (messages.length === index + 1) {
+      // @ts-ignore
       return <ChatItem ref={lastPostRef} message={message} key={message.id} />;
     }
     return <ChatItem message={message} key={message.id} />;
   });
 
   return (
     <div className="flex flex-col-reverse flex-1 py-4 overflow-y-auto scroll">
+      {isTyping && (
+        <div className="ml-4 mb-2" key="indicator">
+          <LoadingIndicator />
+        </div>
+      )}
       {content}
     </div>
   );

web-client/app/_components/ChatContainer/index.tsx → app/app/_components/ChatContainer/index.tsx

@@ -8,23 +8,25 @@ import {
   showingProductDetailAtom,
 } from "@/_helpers/JotaiWrapper";
 import { ReactNode } from "react";
+import ModelManagement from "../ModelManagement";
 
 type Props = {
   children: ReactNode;
 };
 
 export default function ChatContainer({ children }: Props) {
   const activeConvoId = useAtomValue(getActiveConvoIdAtom);
-  const showingProductDetail = useAtomValue(showingProductDetailAtom);
+  // const showingProductDetail = useAtomValue(showingProductDetailAtom);
 
   if (!activeConvoId) {
-    return <ProductOverview />;
+    // return <ProductOverview />;
+    return <ModelManagement />;
   }
 
   return (
     <div className="flex flex-1 overflow-hidden">
       {children}
-      {showingProductDetail ? <ModelDetailSideBar /> : null}
+      {/* {showingProductDetail ? <ModelDetailSideBar /> : null} */}
     </div>
   );
 }

web-client/app/_components/ChatItem/index.tsx → app/app/_components/ChatItem/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/display-name */
 import React, { forwardRef } from "react";
 import renderChatMessage from "../ChatBody/renderChatMessage";
 import { ChatMessage } from "@/_models/ChatMessage";

web-client/app/_components/CompactHistoryList/index.tsx → app/app/_components/CompactHistoryList/index.tsx

@@ -7,11 +7,11 @@ const CompactHistoryList: React.FC = () => {
 
   return (
     <div className="flex flex-col flex-1 gap-1 mt-3">
-      {conversations.map(({ id, product }) => (
+      {conversations.map(({ id, image }) => (
         <CompactHistoryItem
           key={id}
-          conversationId={id}
-          imageUrl={product.avatarUrl ?? ""}
+          conversationId={id ?? ""}
+          imageUrl={image ?? ""}
         />
       ))}
     </div>

web-client/app/_components/CompactLogo/index.tsx → app/app/_components/CompactLogo/index.tsx

@@ -8,7 +8,7 @@ const CompactLogo: React.FC = () => {
 
   return (
     <button onClick={() => setActiveConvoId(undefined)}>
-      <JanImage imageUrl="/icons/app_icon.svg" width={28} height={28} />
+      <JanImage imageUrl="icons/app_icon.svg" width={28} height={28} />
     </button>
   );
 };

app/app/_components/ConfirmDeleteModelModal/index.tsx

@@ -0,0 +1,89 @@
+import React, { Fragment } from "react";
+import { Dialog, Transition } from "@headlessui/react";
+import { QuestionMarkCircleIcon } from "@heroicons/react/24/outline";
+import { showConfirmDeleteModalAtom } from "@/_helpers/JotaiWrapper";
+import { useAtom } from "jotai";
+import useSignOut from "@/_hooks/useSignOut";
+
+const ConfirmDeleteModelModal: React.FC = () => {
+  const [show, setShow] = useAtom(showConfirmDeleteModalAtom);
+  const { signOut } = useSignOut();
+
+  const onLogOutClick = () => {
+    signOut().then(() => setShow(false));
+  };
+
+  return (
+    <Transition.Root show={show} as={Fragment}>
+      <Dialog as="div" className="relative z-10" onClose={setShow}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
+                <div className="sm:flex sm:items-start">
+                  <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                    <QuestionMarkCircleIcon
+                      className="h-6 w-6 text-green-600"
+                      aria-hidden="true"
+                    />
+                  </div>
+                  <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
+                    <Dialog.Title
+                      as="h3"
+                      className="text-base font-semibold leading-6 text-gray-900"
+                    >
+                      Log out
+                    </Dialog.Title>
+                    <div className="mt-2">
+                      <p className="text-sm text-gray-500">
+                        Are you sure you want to delete this model?
+                      </p>
+                    </div>
+                  </div>
+                </div>
+                <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
+                  <button
+                    type="button"
+                    className="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-3 sm:w-auto"
+                    onClick={onLogOutClick}
+                  >
+                    Log out
+                  </button>
+                  <button
+                    type="button"
+                    className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
+                    onClick={() => setShow(false)}
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
+
+export default React.memo(ConfirmDeleteModelModal);

web-client/app/_components/ConversationalCard/index.tsx → app/app/_components/ConversationalCard/index.tsx

@@ -15,7 +15,7 @@ const ConversationalCard: React.FC<Props> = ({ product }) => {
   return (
     <button
       onClick={() =>
-        requestCreateConvo(product)
+        requestCreateConvo(1)
       }
       className="flex flex-col justify-between flex-shrink-0 gap-3 bg-white p-4 w-52 rounded-lg text-left dark:bg-gray-700 hover:opacity-20"
     >
@@ -35,7 +35,7 @@ const ConversationalCard: React.FC<Props> = ({ product }) => {
         </span>
       </div>
       <span className="flex text-xs leading-5 text-gray-500 items-center gap-[2px]">
-        <Image src={"/icons/play.svg"} width={16} height={16} alt="" />
+        <Image src={"icons/play.svg"} width={16} height={16} alt="" />
         32.2k runs
       </span>
     </button>

web-client/app/_components/DiscordContainer/index.tsx → app/app/_components/DiscordContainer/index.tsx

@@ -4,25 +4,12 @@ import Image from "next/image";
 
 const DiscordContainer = () => (
   <div className="border-t border-gray-200 p-3 gap-3 flex items-center justify-between">
-    <Link
-      className="flex gap-2 items-center rounded-lg text-gray-900 text-xs leading-[18px]"
-      href="/download"
-      target="_blank_"
-    >
-      <Image
-        src={"/icons/ico_mobile-android.svg"}
-        width={16}
-        height={16}
-        alt=""
-      />
-      Get the app
-    </Link>
     <Link
       className="flex items-center rounded-lg text-purple-700 text-xs leading-[18px] font-semibold gap-2"
       href={process.env.NEXT_PUBLIC_DISCORD_INVITATION_URL ?? "#"}
       target="_blank_"
     >
-      <Image src={"/icons/ico_Discord.svg"} width={20} height={20} alt="" />
+      <Image src={"icons/ico_Discord.svg"} width={20} height={20} alt="" />
       Discord
     </Link>
   </div>