Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improvement ux for local api server

Browse Source
This commit is contained in:
Faisal Amir 2024-01-22 18:49:44 +07:00
parent aeab22f5ab
commit 69ff85f66a
4 changed files with 160 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/containers/DropdownListSidebar/index.tsx
View File

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

15
web/containers/Layout/TopBar/index.tsx
View File

@ -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(
'unset-drag cursor-pointer',
mainViewState !== MainViewState.Thread && 'invisible'
)}
className={twMerge('unset-drag cursor-pointer')}
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'
)}
>

45
web/screens/LocalServer/index.tsx
View File

@ -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
secure inter-website communication, regulating data
sharing to bolster overall security.
access on this server from external domains. Enable
for secure inter-website communication, regulating
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
activities. Enable to capture thorough records, aiding in
troubleshooting and monitoring server performance
effectively.
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>
@ -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
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

8
web/screens/Settings/Models/Row.tsx
View File

@ -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)
}}