87 lines
2.9 KiB
TypeScript
87 lines
2.9 KiB
TypeScript
import { Button } from '@janhq/uikit'
|
|
import { useAtom, useAtomValue } from 'jotai'
|
|
|
|
import { ExternalLinkIcon } from 'lucide-react'
|
|
|
|
import { twMerge } from 'tailwind-merge'
|
|
|
|
import DropdownListSidebar from '@/containers/DropdownListSidebar'
|
|
|
|
import { showRightSideBarAtom } from '../Chat/Sidebar'
|
|
|
|
import { serverEnabledAtom } from '@/helpers/atoms/LocalServer.atom'
|
|
|
|
const LocalServerScreen = () => {
|
|
const [serverEnabled, setServerEnabled] = useAtom(serverEnabledAtom)
|
|
const showing = useAtomValue(showRightSideBarAtom)
|
|
|
|
return (
|
|
<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">
|
|
<div className="p-4">
|
|
<h2 className="font-bold">Server Options</h2>
|
|
<p className="mt-2 leading-relaxed">
|
|
Start an OpenAI-compatible local HTTP server.
|
|
</p>
|
|
</div>
|
|
<div className="border-b border-border pb-8">
|
|
<div className="space-y-3 px-4">
|
|
<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>
|
|
</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
|
|
className={twMerge(
|
|
'h-full flex-shrink-0 overflow-x-hidden border-l border-border bg-background transition-all duration-100 dark:bg-background/20',
|
|
showing
|
|
? 'w-80 translate-x-0 opacity-100'
|
|
: 'w-0 translate-x-full opacity-0'
|
|
)}
|
|
>
|
|
<p>
|
|
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque earum
|
|
numquam fugit quia quisquam id quos aspernatur unde voluptatem neque,
|
|
officiis doloribus, laborum totam ad deserunt corporis impedit beatae
|
|
vitae?
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default LocalServerScreen
|