From cf83292c26c3a9283741a1ca75f15a0ca697c094 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Sat, 13 Jan 2024 22:49:08 +0700
Subject: [PATCH] disabled thread menu on ribbon when local server running

---
 web/containers/Layout/Ribbon/index.tsx  | 27 +++++++++--
 web/helpers/atoms/LocalServer.atom.ts   |  3 ++
 web/screens/LocalServer/index.tsx       | 60 ++++++++++++++++++++++---
 web/screens/Settings/Advanced/index.tsx | 10 +++--
 4 files changed, 87 insertions(+), 13 deletions(-)
 create mode 100644 web/helpers/atoms/LocalServer.atom.ts

diff --git a/web/containers/Layout/Ribbon/index.tsx b/web/containers/Layout/Ribbon/index.tsx
index 6118a69f1..6c63ade33 100644
--- a/web/containers/Layout/Ribbon/index.tsx
+++ b/web/containers/Layout/Ribbon/index.tsx
@@ -6,6 +6,7 @@ import {
 } from '@janhq/uikit'
 import { motion as m } from 'framer-motion'
 
+import { useAtom } from 'jotai'
 import {
   MessageCircleIcon,
   SettingsIcon,
@@ -22,11 +23,15 @@ import { MainViewState } from '@/constants/screens'
 
 import { useMainViewState } from '@/hooks/useMainViewState'
 
+import { serverEnabledAtom } from '@/helpers/atoms/LocalServer.atom'
+
 export default function RibbonNav() {
   const { mainViewState, setMainViewState } = useMainViewState()
+  const [serverEnabled] = useAtom(serverEnabledAtom)
 
   const onMenuClick = (state: MainViewState) => {
     if (mainViewState === state) return
+    if (serverEnabled && state === MainViewState.Thread) return
     setMainViewState(state)
   }
 
@@ -119,10 +124,24 @@ export default function RibbonNav() {
                           />
                         )}
                       </TooltipTrigger>
-                      <TooltipContent side="right" sideOffset={10}>
-                        <span>{primary.name}</span>
-                        <TooltipArrow />
-                      </TooltipContent>
+                      {serverEnabled &&
+                      primary.state === MainViewState.Thread ? (
+                        <TooltipContent
+                          side="right"
+                          sideOffset={10}
+                          className="max-w-[180px]"
+                        >
+                          <span>
+                            Threads are disabled while the server is running
+                          </span>
+                          <TooltipArrow />
+                        </TooltipContent>
+                      ) : (
+                        <TooltipContent side="right" sideOffset={10}>
+                          <span>{primary.name}</span>
+                          <TooltipArrow />
+                        </TooltipContent>
+                      )}
                     </Tooltip>
                   </div>
                 )
diff --git a/web/helpers/atoms/LocalServer.atom.ts b/web/helpers/atoms/LocalServer.atom.ts
new file mode 100644
index 000000000..077da3ed8
--- /dev/null
+++ b/web/helpers/atoms/LocalServer.atom.ts
@@ -0,0 +1,3 @@
+import { atom } from 'jotai'
+
+export const serverEnabledAtom = atom<boolean>(false)
diff --git a/web/screens/LocalServer/index.tsx b/web/screens/LocalServer/index.tsx
index 7a3ca5ea6..7720812ed 100644
--- a/web/screens/LocalServer/index.tsx
+++ b/web/screens/LocalServer/index.tsx
@@ -1,10 +1,60 @@
+import { Button } from '@janhq/uikit'
+import { useAtom } from 'jotai'
+
+import { ExternalLinkIcon } from 'lucide-react'
+
+import { serverEnabledAtom } from '@/helpers/atoms/LocalServer.atom'
+
 const LocalServerScreen = () => {
+  const [serverEnabled, setServerEnabled] = useAtom(serverEnabledAtom)
+
   return (
-    <p>
-      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum labore,
-      neque, voluptatum necessitatibus est commodi perferendis, quo ea alias
-      rerum facilis! Optio commodi quae vero eius sint iusto illum est?
-    </p>
+    <div className="flex h-full w-full">
+      {/* Left SideBar */}
+      <div className="flex h-full w-60 flex-shrink-0 flex-col overflow-y-auto border-r border-border p-4">
+        <h2 className="font-bold">Server Options</h2>
+        <p className="mt-2 leading-relaxed">
+          Start an OpenAI-compatible local HTTP server.
+        </p>
+
+        <div className="mt-4 space-y-3">
+          <Button
+            block
+            themes={serverEnabled ? 'danger' : 'success'}
+            onClick={() => {
+              if (serverEnabled) {
+                window.core?.api?.stopServer()
+                setServerEnabled(false)
+              } else {
+                window.core?.api?.startServer()
+                setServerEnabled(true)
+              }
+            }}
+          >
+            {serverEnabled ? 'Stop' : 'Start'} Server
+          </Button>
+          <Button block themes="secondaryBlue" asChild>
+            <a href="https://jan.ai/api-reference/" target="_blank">
+              API Reference <ExternalLinkIcon size={20} className="ml-2" />
+            </a>
+          </Button>
+        </div>
+      </div>
+
+      {/* Middle Bar */}
+      <div className="relative flex h-full w-full flex-col overflow-auto bg-background p-4">
+        <div className="flex h-full w-full flex-col justify-between">
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius iusto
+            aspernatur blanditiis, culpa harum ex hic atque quae tempora eaque
+            obcaecati voluptas nulla error repellat aliquam minima laborum
+            corporis fuga.
+          </p>
+        </div>
+      </div>
+
+      {/* Right bar */}
+    </div>
   )
 }
 
diff --git a/web/screens/Settings/Advanced/index.tsx b/web/screens/Settings/Advanced/index.tsx
index 03b840f0b..da5455b92 100644
--- a/web/screens/Settings/Advanced/index.tsx
+++ b/web/screens/Settings/Advanced/index.tsx
@@ -6,16 +6,18 @@ import { useContext, useEffect, useState } from 'react'
 import { fs } from '@janhq/core'
 import { Switch, Button } from '@janhq/uikit'
 
-import { atom, useAtom } from 'jotai'
+import { useAtom } from 'jotai'
 
 import ShortcutModal from '@/containers/ShortcutModal'
 import { toaster } from '@/containers/Toast'
 
+import { toaster } from '@/containers/Toast'
+
 import { FeatureToggleContext } from '@/context/FeatureToggle'
 
 import { useSettings } from '@/hooks/useSettings'
 
-const serverEnabledAtom = atom<boolean>(false)
+import { serverEnabledAtom } from '@/helpers/atoms/LocalServer.atom'
 
 const Advanced = () => {
   const { experimentalFeatureEnabed, setExperimentalFeatureEnabled } =
@@ -96,7 +98,7 @@ const Advanced = () => {
         />
       </div>
       {/* Server */}
-      <div className="flex w-full items-start justify-between border-b border-border py-4 first:pt-0 last:border-none">
+      {/* <div className="flex w-full items-start justify-between border-b border-border py-4 first:pt-0 last:border-none">
         <div className="w-4/5 flex-shrink-0 space-y-1.5">
           <div className="flex gap-x-2">
             <h6 className="text-sm font-semibold capitalize">
@@ -118,7 +120,7 @@ const Advanced = () => {
             setServerEnabled(e)
           }}
         />
-      </div>
+      </div> */}
       {window.electronAPI && (
         <div className="flex w-full items-start justify-between border-b border-border py-4 first:pt-0 last:border-none">
           <div className="w-4/5 flex-shrink-0 space-y-1.5">