feat: improvement ux for local api server
This commit is contained in:
Faisal Amir
parent
aeab22f5ab
commit
69ff85f66a
@ -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 && (
|
||||
|
||||
@ -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'
|
||||
)}
|
||||
>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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)
|
||||
}}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user