424b00338e
* Make thread screen as default screen * Blank state when user have not any model * Cleanup topbar thread screen * Improve style right panel * Add instructions right panel * Styling thread list history * Resolve conflict * Default title new thread * Fix trigger panel sidebar * Make default right panel false when no activethread * Fix CI test * chore: assistant instruction with system prompt * Fix title and blank state explore the hub * Claenup style thread screen and add buble message for assitant * Remove unused import * Styling more menus on thread list and right panel, and make max height textarea 400 pixel * Finished revamp ui thread * Finished system monitor UI * Style box running models * Make animate right panel more smooth * Add status arround textarea for starting model info * Temporary disable hide left panel * chore: system resource monitoring update * copy nits * chore: typo * Reverse icon chevron accordion * Move my models into setting page --------- Co-authored-by: Louis <louis@jan.ai> Co-authored-by: 0xSage <n@pragmatic.vc>
91 lines
3.1 KiB
TypeScript
91 lines
3.1 KiB
TypeScript
import { useAtomValue, useSetAtom } from 'jotai'
|
|
import { PanelLeftIcon, PenSquareIcon, PanelRightIcon } from 'lucide-react'
|
|
|
|
import CommandListDownloadedModel from '@/containers/Layout/TopBar/CommandListDownloadedModel'
|
|
import CommandSearch from '@/containers/Layout/TopBar/CommandSearch'
|
|
|
|
import { MainViewState } from '@/constants/screens'
|
|
|
|
import { useCreateNewThread } from '@/hooks/useCreateNewThread'
|
|
import useGetAssistants from '@/hooks/useGetAssistants'
|
|
import { useMainViewState } from '@/hooks/useMainViewState'
|
|
|
|
import { showRightSideBarAtom } from '@/screens/Chat/Sidebar'
|
|
|
|
import { activeThreadAtom } from '@/helpers/atoms/Conversation.atom'
|
|
|
|
const TopBar = () => {
|
|
const activeThread = useAtomValue(activeThreadAtom)
|
|
const { mainViewState } = useMainViewState()
|
|
const { requestCreateNewThread } = useCreateNewThread()
|
|
const { assistants } = useGetAssistants()
|
|
const setShowRightSideBar = useSetAtom(showRightSideBarAtom)
|
|
|
|
const titleScreen = (viewStateName: MainViewState) => {
|
|
switch (viewStateName) {
|
|
case MainViewState.Thread:
|
|
return activeThread ? activeThread?.title : 'New Thread'
|
|
|
|
default:
|
|
return MainViewState[viewStateName]?.replace(/([A-Z])/g, ' $1').trim()
|
|
}
|
|
}
|
|
|
|
const onCreateConversationClick = async () => {
|
|
if (assistants.length === 0) {
|
|
alert('No assistant available')
|
|
return
|
|
}
|
|
requestCreateNewThread(assistants[0])
|
|
}
|
|
|
|
return (
|
|
<div className="fixed left-0 top-0 z-50 flex h-12 w-full border-b border-border bg-background/80 backdrop-blur-md">
|
|
{mainViewState === MainViewState.Thread && (
|
|
<div className="absolute left-16 h-full w-60 border-r border-border" />
|
|
)}
|
|
<div className="relative left-16 flex w-[calc(100%-64px)] items-center justify-between space-x-4 pl-6 pr-2">
|
|
{mainViewState === MainViewState.Thread ? (
|
|
<div className="unset-drag flex space-x-8">
|
|
<div className="flex w-52 justify-between">
|
|
<div className="cursor-pointer">
|
|
<PanelLeftIcon
|
|
size={20}
|
|
className="invisible text-muted-foreground"
|
|
/>
|
|
</div>
|
|
<div
|
|
className="cursor-pointer pr-2"
|
|
onClick={onCreateConversationClick}
|
|
>
|
|
<PenSquareIcon size={20} className="text-muted-foreground" />
|
|
</div>
|
|
</div>
|
|
<span className="text-sm font-bold">
|
|
{titleScreen(mainViewState)}
|
|
</span>
|
|
{activeThread && (
|
|
<div
|
|
className="unset-drag absolute right-4 cursor-pointer"
|
|
onClick={() => setShowRightSideBar((show) => !show)}
|
|
>
|
|
<PanelRightIcon size={20} className="text-muted-foreground" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div>
|
|
<span className="text-sm font-bold">
|
|
{titleScreen(mainViewState)}
|
|
</span>
|
|
</div>
|
|
)}
|
|
<CommandSearch />
|
|
<CommandListDownloadedModel />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default TopBar
|