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>
55 lines
1.2 KiB
TypeScript
55 lines
1.2 KiB
TypeScript
import { rightSideBarExpandStateAtom } from '@helpers/atoms/SideBarExpand.atom'
|
|
import { Variants, motion } from 'framer-motion'
|
|
import { useAtomValue } from 'jotai'
|
|
import { Fragment } from 'react'
|
|
import BotSetting from '../BotSetting'
|
|
import BotInfo from '../BotInfo'
|
|
|
|
const variants: Variants = {
|
|
show: {
|
|
x: 0,
|
|
width: 320,
|
|
opacity: 1,
|
|
transition: { duration: 0.3 },
|
|
},
|
|
hide: {
|
|
x: '100%',
|
|
width: 0,
|
|
opacity: 0,
|
|
transition: { duration: 0.3 },
|
|
},
|
|
}
|
|
|
|
const RightContainer = () => {
|
|
const isVisible = useAtomValue(rightSideBarExpandStateAtom)
|
|
|
|
return (
|
|
<motion.div
|
|
initial={false}
|
|
animate={isVisible ? 'show' : 'hide'}
|
|
variants={variants}
|
|
className="scroll flex w-80 flex-shrink-0 flex-col overflow-y-auto border-l border-gray-200 py-3"
|
|
>
|
|
{isVisible && (
|
|
<Fragment>
|
|
<BotInfo />
|
|
|
|
{/* Divider */}
|
|
<div className="relative">
|
|
<div
|
|
className="absolute inset-0 flex items-center"
|
|
aria-hidden="true"
|
|
>
|
|
<div className="w-full border-t border-gray-300" />
|
|
</div>
|
|
</div>
|
|
|
|
<BotSetting />
|
|
</Fragment>
|
|
)}
|
|
</motion.div>
|
|
)
|
|
}
|
|
|
|
export default RightContainer
|