539b467141
* feat: adding create bot functionality Signed-off-by: James <james@jan.ai> * update the temperature progress bar Signed-off-by: James <james@jan.ai> * WIP baselayout * Mapping plugins with available preferences * Added loader component * WIP working another screen * Cleanup types and avoid import one by one * Prepare bottom bar * Add css variables colors to enable user select the accent * Enable change accent color * Seperate css variable * Fix conflict * Add blank state of my model empty * Restyle explore models page * Enable user config left sidebar * Restyle my models page * WIP styling chat page * Restyling chat message * Fix conflict * Adde form preferences setting plugins * Fixed form bot info * Sidebar bot chat * Showing rightbar for both setting when user created bot * Fix style bot info * Using overflow auto intead of scroll * Remove script built UI from root package * Fix missig import * Resolve error linter * fix e2e tests Signed-off-by: James <james@jan.ai> --------- Signed-off-by: James <james@jan.ai> Co-authored-by: James <james@jan.ai>
74 lines
2.2 KiB
TypeScript
74 lines
2.2 KiB
TypeScript
import React, { PropsWithChildren, useEffect } from 'react'
|
|
import { useAtomValue, useSetAtom } from 'jotai'
|
|
import { useTheme } from 'next-themes'
|
|
import { SidebarLeft, SidebarRight } from '@containers/Sidebar'
|
|
import { twMerge } from 'tailwind-merge'
|
|
import { rightSideBarExpandStateAtom } from '@helpers/atoms/SideBarExpand.atom'
|
|
import Topbar from '@containers/Topbar'
|
|
import BottomBar from '@containers/BottomBar'
|
|
import { motion as m } from 'framer-motion'
|
|
import { getMainViewStateAtom } from '@helpers/atoms/MainView.atom'
|
|
import { MainViewState } from '@helpers/atoms/MainView.atom'
|
|
|
|
const BaseLayout = (props: PropsWithChildren) => {
|
|
const { children } = props
|
|
|
|
const isRightSidebarVisible = useAtomValue(rightSideBarExpandStateAtom)
|
|
const viewState = useAtomValue(getMainViewStateAtom)
|
|
|
|
const { theme } = useTheme()
|
|
|
|
// Force set theme native
|
|
useEffect(() => {
|
|
async function setTheme() {
|
|
switch (theme) {
|
|
case 'light':
|
|
return await window?.electronAPI.setNativeThemeLight()
|
|
case 'dark':
|
|
return await window?.electronAPI.setNativeThemeDark()
|
|
default:
|
|
return await window?.electronAPI.setNativeThemeSystem()
|
|
}
|
|
}
|
|
setTheme()
|
|
}, [theme])
|
|
|
|
return (
|
|
<div className="flex h-screen w-screen flex-1 overflow-hidden">
|
|
<SidebarLeft />
|
|
<div
|
|
className={twMerge(
|
|
'border-border bg-background/50 relative top-8 flex h-[calc(100vh-72px)] w-full overflow-hidden rounded-lg border',
|
|
viewState === MainViewState.BotInfo && isRightSidebarVisible
|
|
? 'mr-0'
|
|
: 'mr-4'
|
|
)}
|
|
>
|
|
<div className="w-full">
|
|
<Topbar />
|
|
<m.div
|
|
key={viewState}
|
|
initial={{ opacity: 0, y: -8 }}
|
|
className="h-full"
|
|
animate={{
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: {
|
|
duration: 0.5,
|
|
},
|
|
}}
|
|
>
|
|
{children}
|
|
</m.div>
|
|
<BottomBar />
|
|
</div>
|
|
</div>
|
|
{viewState === MainViewState.BotInfo && isRightSidebarVisible && (
|
|
<SidebarRight />
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default BaseLayout
|