feat: improvement ux for local api server

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 && (

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,13 +81,11 @@ const TopBar = () => {
         </div>
       ) : (
         <div className="relative w-full">
+          {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(
+                  className={twMerge('unset-drag cursor-pointer')}
-                  'unset-drag cursor-pointer',
-                  mainViewState !== MainViewState.Thread && 'invisible'
-                )}
                   onClick={() => setShowLeftSideBar((show) => !show)}
                 >
                   <PanelRightCloseIcon
@@ -103,9 +104,13 @@ const TopBar = () => {
                 </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'
             )}
           >

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,7 +137,13 @@ const LocalServerScreen = () => {
           </div>
         </div>
 
+        <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}
@@ -159,6 +167,7 @@ const LocalServerScreen = () => {
                     disabled={serverEnabled}
                   />
                 </div>
+              </div>
               <div>
                 <label
                   id="cors"
@@ -176,9 +185,9 @@ const LocalServerScreen = () => {
                       <TooltipContent side="top" className="max-w-[240px]">
                         <span>
                           CORS (Cross-Origin Resource Sharing) manages resource
-                      access on this server from external domains. Enable for
+                          access on this server from external domains. Enable
-                      secure inter-website communication, regulating data
+                          for secure inter-website communication, regulating
-                      sharing to bolster overall security.
+                          data sharing to bolster overall security.
                         </span>
                         <TooltipArrow />
                       </TooltipContent>
@@ -210,10 +219,10 @@ const LocalServerScreen = () => {
                     <TooltipPortal>
                       <TooltipContent side="top" className="max-w-[240px]">
                         <span>
-                      Verbose Server Logs provide extensive details about server
+                          Verbose Server Logs provide extensive details about
-                      activities. Enable to capture thorough records, aiding in
+                          server activities. Enable to capture thorough records,
-                      troubleshooting and monitoring server performance
+                          aiding in troubleshooting and monitoring server
-                      effectively.
+                          performance effectively.
                         </span>
                         <TooltipArrow />
                       </TooltipContent>
@@ -230,10 +239,22 @@ const LocalServerScreen = () => {
                 </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
+                    Once you start the server, you cannot chat with your
-                    running.
+                    assistant.
                   </h6>
                   <Button
                     className="mt-4"
@@ -298,7 +319,7 @@ const LocalServerScreen = () => {
         ) : (
           <Logs />
         )}
-      </div>
+      </ScrollToBottom>
 
       {/* Right bar */}
       <div

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 () => {
+                  if (serverEnabled) {
                     await stopModel()
                     deleteModel(props.data)
+                  }
                 }, 500)
                 setMore(false)
               }}