From 69ff85f66aaee0a7b3a2a82a9a2e0d4d0ce3f607 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Mon, 22 Jan 2024 18:49:44 +0700
Subject: [PATCH] feat: improvement ux for local api server

---
 web/containers/DropdownListSidebar/index.tsx |   6 +-
 web/containers/Layout/TopBar/index.tsx       |  53 ++---
 web/screens/LocalServer/index.tsx            | 213 ++++++++++---------
 web/screens/Settings/Models/Row.tsx          |  12 +-
 4 files changed, 160 insertions(+), 124 deletions(-)

diff --git a/web/containers/DropdownListSidebar/index.tsx b/web/containers/DropdownListSidebar/index.tsx
index a85986adf..fdc39063a 100644
--- a/web/containers/DropdownListSidebar/index.tsx
+++ b/web/containers/DropdownListSidebar/index.tsx
@@ -162,7 +162,11 @@ export default function DropdownListSidebar() {
           stateModel.loading && 'pointer-events-none bg-blue-200 text-blue-600'
         )}
       >
-        <Select value={selectedModel?.id} onValueChange={onValueSelected}>
+        <Select
+          value={selectedModel?.id}
+          onValueChange={onValueSelected}
+          disabled={serverEnabled}
+        >
           <SelectTrigger className="relative w-full">
             <SelectValue placeholder="Choose model to start">
               {stateModel.loading && (
diff --git a/web/containers/Layout/TopBar/index.tsx b/web/containers/Layout/TopBar/index.tsx
index ae3706f07..ac05e4e1a 100644
--- a/web/containers/Layout/TopBar/index.tsx
+++ b/web/containers/Layout/TopBar/index.tsx
@@ -49,6 +49,9 @@ const TopBar = () => {
       case MainViewState.Thread:
         return activeThread ? activeThread?.title : 'New Thread'
 
+      case MainViewState.LocalServer:
+        return 'Local API Server'
+
       default:
         return MainViewState[viewStateName]?.replace(/([A-Z])/g, ' $1').trim()
     }
@@ -78,34 +81,36 @@ const TopBar = () => {
         </div>
       ) : (
         <div className="relative w-full">
-          <div className="absolute left-16 h-full w-60 border-r border-border">
-            <div className="flex h-full w-full items-center justify-between">
-              <div
-                className={twMerge(
-                  'unset-drag cursor-pointer',
-                  mainViewState !== MainViewState.Thread && 'invisible'
-                )}
-                onClick={() => setShowLeftSideBar((show) => !show)}
-              >
-                <PanelRightCloseIcon
-                  size={20}
-                  className={twMerge(
-                    'ml-4 text-muted-foreground',
-                    showLeftSideBar && 'rotate-180'
-                  )}
-                />
-              </div>
-              <div
-                className="unset-drag cursor-pointer pr-4"
-                onClick={onCreateConversationClick}
-              >
-                <PenSquareIcon size={20} className="text-muted-foreground" />
+          {mainViewState == MainViewState.Thread && (
+            <div className="absolute left-16 h-full w-60 border-r border-border">
+              <div className="flex h-full w-full items-center justify-between">
+                <div
+                  className={twMerge('unset-drag cursor-pointer')}
+                  onClick={() => setShowLeftSideBar((show) => !show)}
+                >
+                  <PanelRightCloseIcon
+                    size={20}
+                    className={twMerge(
+                      'ml-4 text-muted-foreground',
+                      showLeftSideBar && 'rotate-180'
+                    )}
+                  />
+                </div>
+                <div
+                  className="unset-drag cursor-pointer pr-4"
+                  onClick={onCreateConversationClick}
+                >
+                  <PenSquareIcon size={20} className="text-muted-foreground" />
+                </div>
               </div>
             </div>
-          </div>
+          )}
           <div
             className={twMerge(
-              'absolute left-80 right-10 h-full',
+              'absolute right-10 h-full',
+              mainViewState == MainViewState.Thread
+                ? 'left-80'
+                : 'left-16 pl-6',
               showing && 'right-80'
             )}
           >
diff --git a/web/screens/LocalServer/index.tsx b/web/screens/LocalServer/index.tsx
index 6f6261f78..83b5989af 100644
--- a/web/screens/LocalServer/index.tsx
+++ b/web/screens/LocalServer/index.tsx
@@ -2,6 +2,8 @@
 
 import React, { useEffect, useState } from 'react'
 
+import ScrollToBottom from 'react-scroll-to-bottom'
+
 import {
   Button,
   Switch,
@@ -99,7 +101,7 @@ const LocalServerScreen = () => {
           <div className="space-y-3 px-4">
             <Button
               block
-              themes={serverEnabled ? 'danger' : 'success'}
+              themes={serverEnabled ? 'danger' : 'primary'}
               disabled={stateModel.loading}
               onClick={() => {
                 if (serverEnabled) {
@@ -135,105 +137,124 @@ const LocalServerScreen = () => {
           </div>
         </div>
 
-        <div className="space-y-4 p-4">
-          <div className="flex w-full flex-shrink-0 items-center gap-x-2">
-            <Select
-              value={host}
-              onValueChange={(e) => setHost(e)}
-              disabled={serverEnabled}
-            >
-              <SelectTrigger className="w-full">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="127.0.0.1">127.0.0.1</SelectItem>
-                <SelectItem value="0.0.0.0">0.0.0.0</SelectItem>
-              </SelectContent>
-            </Select>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div className="space-y-4 p-4">
+              <div>
+                <p className="mb-2 block text-sm font-semibold text-zinc-500 dark:text-gray-300">
+                  Server Options
+                </p>
+                <div className="flex w-full flex-shrink-0 items-center gap-x-2">
+                  <Select
+                    value={host}
+                    onValueChange={(e) => setHost(e)}
+                    disabled={serverEnabled}
+                  >
+                    <SelectTrigger className="w-full">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="127.0.0.1">127.0.0.1</SelectItem>
+                      <SelectItem value="0.0.0.0">0.0.0.0</SelectItem>
+                    </SelectContent>
+                  </Select>
 
-            <Input
-              className="w-[60px] flex-shrink-0"
-              value={port}
-              onChange={(e) => setPort(e.target.value)}
-              maxLength={4}
-              disabled={serverEnabled}
-            />
-          </div>
-          <div>
-            <label
-              id="cors"
-              className="mb-2 inline-flex items-start gap-x-2 font-bold text-zinc-500 dark:text-gray-300"
-            >
-              Cross-Origin-Resource-Sharing (CORS)
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <InfoIcon
-                    size={16}
-                    className="mt-0.5 flex-shrink-0 dark:text-gray-500"
+                  <Input
+                    className="w-[60px] flex-shrink-0"
+                    value={port}
+                    onChange={(e) => setPort(e.target.value)}
+                    maxLength={4}
+                    disabled={serverEnabled}
                   />
-                </TooltipTrigger>
-                <TooltipPortal>
-                  <TooltipContent side="top" className="max-w-[240px]">
-                    <span>
-                      CORS (Cross-Origin Resource Sharing) manages resource
-                      access on this server from external domains. Enable for
-                      secure inter-website communication, regulating data
-                      sharing to bolster overall security.
-                    </span>
-                    <TooltipArrow />
-                  </TooltipContent>
-                </TooltipPortal>
-              </Tooltip>
-            </label>
-            <div className="flex items-center justify-between">
-              <Switch
-                checked={isCorsEnabled}
-                onCheckedChange={(e) => setIsCorsEnabled(e)}
-                name="cors"
-                disabled={serverEnabled}
-              />
-            </div>
-          </div>
-          <div>
-            <label
-              id="verbose"
-              className="mb-2 inline-flex items-start gap-x-2 font-bold text-zinc-500 dark:text-gray-300"
-            >
-              Verbose Server Logs
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <InfoIcon
-                    size={16}
-                    className="mt-0.5 flex-shrink-0 dark:text-gray-500"
+                </div>
+              </div>
+              <div>
+                <label
+                  id="cors"
+                  className="mb-2 inline-flex items-start gap-x-2 font-bold text-zinc-500 dark:text-gray-300"
+                >
+                  Cross-Origin-Resource-Sharing (CORS)
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <InfoIcon
+                        size={16}
+                        className="mt-0.5 flex-shrink-0 dark:text-gray-500"
+                      />
+                    </TooltipTrigger>
+                    <TooltipPortal>
+                      <TooltipContent side="top" className="max-w-[240px]">
+                        <span>
+                          CORS (Cross-Origin Resource Sharing) manages resource
+                          access on this server from external domains. Enable
+                          for secure inter-website communication, regulating
+                          data sharing to bolster overall security.
+                        </span>
+                        <TooltipArrow />
+                      </TooltipContent>
+                    </TooltipPortal>
+                  </Tooltip>
+                </label>
+                <div className="flex items-center justify-between">
+                  <Switch
+                    checked={isCorsEnabled}
+                    onCheckedChange={(e) => setIsCorsEnabled(e)}
+                    name="cors"
+                    disabled={serverEnabled}
                   />
-                </TooltipTrigger>
-                <TooltipPortal>
-                  <TooltipContent side="top" className="max-w-[240px]">
-                    <span>
-                      Verbose Server Logs provide extensive details about server
-                      activities. Enable to capture thorough records, aiding in
-                      troubleshooting and monitoring server performance
-                      effectively.
-                    </span>
-                    <TooltipArrow />
-                  </TooltipContent>
-                </TooltipPortal>
-              </Tooltip>
-            </label>
-            <div className="flex items-center justify-between">
-              <Switch
-                checked={isVerboseEnabled}
-                onCheckedChange={(e) => setIsVerboseEnabled(e)}
-                name="verbose"
-                disabled={serverEnabled}
-              />
+                </div>
+              </div>
+              <div>
+                <label
+                  id="verbose"
+                  className="mb-2 inline-flex items-start gap-x-2 font-bold text-zinc-500 dark:text-gray-300"
+                >
+                  Verbose Server Logs
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <InfoIcon
+                        size={16}
+                        className="mt-0.5 flex-shrink-0 dark:text-gray-500"
+                      />
+                    </TooltipTrigger>
+                    <TooltipPortal>
+                      <TooltipContent side="top" className="max-w-[240px]">
+                        <span>
+                          Verbose Server Logs provide extensive details about
+                          server activities. Enable to capture thorough records,
+                          aiding in troubleshooting and monitoring server
+                          performance effectively.
+                        </span>
+                        <TooltipArrow />
+                      </TooltipContent>
+                    </TooltipPortal>
+                  </Tooltip>
+                </label>
+                <div className="flex items-center justify-between">
+                  <Switch
+                    checked={isVerboseEnabled}
+                    onCheckedChange={(e) => setIsVerboseEnabled(e)}
+                    name="verbose"
+                    disabled={serverEnabled}
+                  />
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
+          </TooltipTrigger>
+          <TooltipPortal>
+            {serverEnabled && (
+              <TooltipContent side="bottom" className="max-w-[200px]">
+                <span>
+                  Settings cannot be modified while the server is running
+                </span>
+                <TooltipArrow />
+              </TooltipContent>
+            )}
+          </TooltipPortal>
+        </Tooltip>
       </div>
 
       {/* Middle Bar */}
-      <div className="relative flex h-full w-full flex-col overflow-auto bg-background">
+      <ScrollToBottom className="relative flex h-full w-full flex-col overflow-auto bg-background">
         <div className="sticky top-0 flex  items-center justify-between bg-zinc-100 px-4 py-2 dark:bg-secondary/30">
           <h2 className="font-bold">Server Logs</h2>
           <div className="space-x-2">
@@ -279,8 +300,8 @@ const LocalServerScreen = () => {
 
                 <div>
                   <h6 className="font-medium text-black">
-                    You cannot chat with your assistant while the server is
-                    running.
+                    Once you start the server, you cannot chat with your
+                    assistant.
                   </h6>
                   <Button
                     className="mt-4"
@@ -298,7 +319,7 @@ const LocalServerScreen = () => {
         ) : (
           <Logs />
         )}
-      </div>
+      </ScrollToBottom>
 
       {/* Right bar */}
       <div
diff --git a/web/screens/Settings/Models/Row.tsx b/web/screens/Settings/Models/Row.tsx
index 6c044c30d..d32f0fe63 100644
--- a/web/screens/Settings/Models/Row.tsx
+++ b/web/screens/Settings/Models/Row.tsx
@@ -175,11 +175,17 @@ export default function RowModel(props: RowModelProps) {
             </Tooltip>
 
             <div
-              className="flex cursor-pointer items-center space-x-2 px-4 py-2 hover:bg-secondary"
+              className={twMerge(
+                'flex cursor-pointer items-center space-x-2 px-4 py-2 hover:bg-secondary',
+                serverEnabled &&
+                  'pointer-events-none cursor-not-allowed opacity-40'
+              )}
               onClick={() => {
                 setTimeout(async () => {
-                  await stopModel()
-                  deleteModel(props.data)
+                  if (serverEnabled) {
+                    await stopModel()
+                    deleteModel(props.data)
+                  }
                 }, 500)
                 setMore(false)
               }}