update tranaparent baclground

janhq · Van-QA · May 29, 2024 · May 6, 2024 · May 7, 2024 · May 8, 2024
commit cf89c39de2225a9e2a6668bb3ac36618bd4f5bd9
diff --git a/electron/managers/mainWindowConfig.ts b/electron/managers/mainWindowConfig.ts
@@ -5,5 5,7 @@ export const mainWindowConfig: Electron.BrowserWindowConstructorOptions = {
  minWidth: DEFAULT_MIN_WIDTH,
  show: true,
  titleBarStyle: 'hiddenInset',
- vibrancy: 'sidebar',
  transparent: true,
  vibrancy: 'fullscreen-ui',
  visualEffectState: 'active',
 }
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
@@ -13,7 13,7 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: PropsWithChildren) {
  return (
  <html lang="en" suppressHydrationWarning>
- <body className="h-screen bg-[hsla(var(--app-bg))] font-sans text-sm antialiased">
  <body className="h-screen font-sans text-sm antialiased">
  <div className="dragable-bar" />
  {children}
  </body>

diff --git a/web/containers/CenterPanelContainer/index.tsx b/web/containers/CenterPanelContainer/index.tsx
@@ -0,0 1,11 @@
 import { PropsWithChildren } from 'react'
 
 const CenterPanelContainer = ({ children }: PropsWithChildren) => {
  return (
  <div className="h-full w-full bg-[hsla(var(--center-panel-bg))]">
  {children}
  </div>
  )
 }
 
 export default CenterPanelContainer
diff --git a/web/containers/Layout/BottomPanel/SystemMonitor/index.tsx b/web/containers/Layout/BottomPanel/SystemMonitor/index.tsx
@@ -77,11 77,11 @@ const SystemMonitor = () => {
  <div
  ref={setElementExpand}
  className={twMerge(
- 'fixed bottom-9 left-12 z-50 flex w-[calc(100%-48px)] flex-shrink-0 flex-col border-t border-[hsla(var(--bottom-panel-border))] bg-[hsla(var(--app-bg))]',
  'fixed bottom-9 left-[49px] z-50 flex w-[calc(100%-48px-10px)] flex-shrink-0 flex-col rounded-b-lg border-t border-[hsla(var(--app-border))]  bg-[hsla(var(--app-bg))]',
  showFullScreen && 'h-[calc(100%-63px)]'
  )}
  >
- <div className="flex h-8 flex-shrink-0 items-center justify-between border-b border-[hsla(var(--bottom-panel-border))] px-4">
  <div className="flex h-8 flex-shrink-0 items-center justify-between border-b border-[hsla(var(--app-border))] px-4">
  <h6 className="font-medium text-[hsla(var(--text-primary))]">
  Running Models
  </h6>
@@ -113,15 113,15 @@ const SystemMonitor = () => {
  <div className="flex h-full gap-4">
  <TableActiveModel />
 
- <div className="w-1/2 border-l border-[hsla(var(--bottom-panel-border))] p-4">
- <div className="mb-4 border-b border-[hsla(var(--bottom-panel-border))] pb-4">
  <div className="w-1/2 border-l border-[hsla(var(--app-border))] p-4">
  <div className="mb-4 border-b border-[hsla(var(--app-border))] pb-4">
  <h6 className="font-bold">CPU</h6>
  <div className="flex items-center gap-x-4">
  <Progress value={cpuUsage} className="w-full" size="small" />
  <span className="flex-shrink-0 ">{cpuUsage}%</span>
  </div>
  </div>
- <div className="mb-4 border-b border-[hsla(var(--bottom-panel-border))] pb-4">
  <div className="mb-4 border-b border-[hsla(var(--app-border))] pb-4">
  <div className="flex items-center justify-between gap-2">
  <h6 className="font-bold">Memory</h6>
  <span className="text-sm ">
@@ -140,7 140,7 @@ const SystemMonitor = () => {
  </div>
 
  {gpus.length > 0 && (
- <div className="mb-4 border-b border-[hsla(var(--bottom-panel-border))] pb-4 last:border-none">
  <div className="mb-4 border-b border-[hsla(var(--app-border))] pb-4 last:border-none">
  {gpus.map((gpu, index) => (
  <div key={index} className="mt-4 flex flex-col gap-x-2">
  <div className="flex w-full items-start justify-between">

diff --git a/web/containers/Layout/BottomPanel/index.tsx b/web/containers/Layout/BottomPanel/index.tsx
@@ -14,7 14,7 @@ const BottomPanel = () => {
  const progress = useAtomValue(appDownloadProgressAtom)
 
  return (
- <div className="fixed bottom-0 left-0 z-50 flex h-9 w-full items-center justify-between border-t border-[hsla(var(--bottom-panel-border))] bg-[hsla(var(--bottom-panel-bg))] px-3 text-xs">
  <div className="fixed bottom-0 left-12 z-50 flex h-9 w-[calc(100%-48px)] items-center justify-between border-t border-[hsla(var(--bottom-panel-border))] bg-[hsla(var(--bottom-panel-bg))] px-3 text-xs">
  <div className="flex flex-shrink-0 items-center gap-x-2">
  <div className="flex items-center space-x-2">
  {progress && progress > 0 ? (

diff --git a/web/containers/Layout/RibbonPanel/index.tsx b/web/containers/Layout/RibbonPanel/index.tsx
@@ -52,7 52,7 @@ export default function RibbonPanel() {
  ]
 
  return (
- <div className="flex w-12 flex-shrink-0 flex-col items-center border-r border-[hsla(var(--ribbon-panel-border))] bg-[hsla(var(--ribbon-panel-bg))] py-2">
  <div className="relative flex h-[calc(100% 36px)] w-12 flex-shrink-0 flex-col items-center border-r border-[hsla(var(--ribbon-panel-border))] bg-[hsla(var(--ribbon-panel-bg))] py-2">
  {RibbonNavMenus.filter((menu) => !!menu).map((menu, i) => {
  const isActive = mainViewState === menu.state
  return (

diff --git a/web/containers/Layout/TopPanel/index.tsx b/web/containers/Layout/TopPanel/index.tsx
@@ -47,7 47,7 @@ const TopPanel = () => {
  return (
  <div
  className={twMerge(
- 'fixed z-50 flex h-9 w-full items-center border-y border-[hsla(var(--top-panel-border))] bg-[hsla(var(--top-panel-bg))] px-4 backdrop-blur-md',
  'fixed z-50 flex h-9 w-full items-center border-y border-[hsla(var(--top-panel-border))] bg-[hsla(var(--top-panel-bg))] px-4 backdrop-blur-lg',
  isMac && 'border-t-0 pl-20'
  )}
  >

diff --git a/web/containers/Layout/index.tsx b/web/containers/Layout/index.tsx
@@ -52,14 52,14 @@ const BaseLayout = () => {
  return (
  <Fragment>
  <TopPanel />
- <div className="relative top-9 flex h-[calc(100vh-(36px 36px))] w-screen overflow-hidden">
  <div className="relative top-9 flex h-[calc(100vh-(36px 36px))] w-screen">
  <RibbonPanel />
- <div className="relative flex w-full bg-[hsla(var(--app-bg))]">
  <div className="relative flex w-full bg-[hsla(var(--app-bg-transparent))] pr-2">
  <div className="w-full">
  <m.div
  key={mainViewState}
  initial={{ opacity: 0, y: -8 }}
- className="h-full"
  className="h-full overflow-hidden rounded-lg border border-[hsla(var(--app-border))] shadow"
  animate={{
  opacity: 1,
  y: 0,

diff --git a/web/containers/ModelDropdown/index.tsx b/web/containers/ModelDropdown/index.tsx
@@ -231,7 231,7 @@ const ModelDropdown = ({ chatInputMode, strictedThread = true }: Props) => {
  className={twMerge(
  'w=80 absolute right-0 z-20 mt-2 max-h-80 w-full overflow-hidden rounded-lg border border-[hsla(var(--app-border))] bg-[hsla(var(--app-bg))] shadow-sm',
  open ? 'flex' : 'hidden',
- chatInputMode && 'bottom-8 left-0 w-80'
  chatInputMode && 'bottom-8 left-0 w-72'
  )}
  ref={setDropdownOptions}
  >

diff --git a/web/screens/Hub/index.tsx b/web/screens/Hub/index.tsx
@@ -7,6 7,7 @@ import { ScrollArea, Button, Select } from '@janhq/joi'
 import { useAtomValue, useSetAtom } from 'jotai'
 import { UploadIcon } from 'lucide-react'
 
 import CenterPanelContainer from '@/containers/CenterPanelContainer'
 import ModelSearch from '@/containers/ModelSearch'
 
 import { setImportModelStageAtom } from '@/hooks/useImportModel'
@@ -66,42 67,44 @@ const HubScreen = () => {
  }, [])
 
  return (
- <ScrollArea data-testid="hub-container-test-id" className="h-full w-full">
- <div className="relative h-40 p-4 sm:h-auto">
- <Image
- src="./images/hub-banner.png"
- alt="Hub Banner"
- width={800}
- height={800}
- className="h-full w-full rounded-lg object-cover"
- />
- <div className="absolute left-1/2 top-1/2 mx-auto w-4/5 -translate-x-1/2 -translate-y-1/2 sm:w-1/2">
- <div className="flex flex-col items-center justify-between gap-2 sm:flex-row">
- <div className="w-full">
- <ModelSearch onSearchLocal={onSearchUpdate} />
- </div>
- <div className="flex-shrink-0">
- <Button onClick={onImportModelClick}>
- <UploadIcon size={16} className="mr-2" />
- <span>Import Model</span>
- </Button>
  <CenterPanelContainer>
  <ScrollArea data-testid="hub-container-test-id" className="h-full w-full">
  <div className="relative h-40 p-4 sm:h-auto">
  <Image
  src="./images/hub-banner.png"
  alt="Hub Banner"
  width={800}
  height={800}
  className="h-full w-full rounded-lg object-cover"
  />
  <div className="absolute left-1/2 top-1/2 mx-auto w-4/5 -translate-x-1/2 -translate-y-1/2 sm:w-1/2">
  <div className="flex flex-col items-center justify-between gap-2 sm:flex-row">
  <div className="w-full">
  <ModelSearch onSearchLocal={onSearchUpdate} />
  </div>
  <div className="flex-shrink-0">
  <Button onClick={onImportModelClick}>
  <UploadIcon size={16} className="mr-2" />
  <span>Import Model</span>
  </Button>
  </div>
  </div>
  </div>
  </div>
- </div>
- <div className="p-4 py-0 sm:px-16">
- <div className="mb-4 flex w-full justify-end">
- <Select
- value={sortSelected}
- onValueChange={(value) => {
- setSortSelected(value)
- }}
- options={sortMenus}
- />
  <div className="p-4 py-0 sm:px-16">
  <div className="mb-4 flex w-full justify-end">
  <Select
  value={sortSelected}
  onValueChange={(value) => {
  setSortSelected(value)
  }}
  options={sortMenus}
  />
  </div>
  <ModelList models={filteredModels} />
  </div>
- <ModelList models={filteredModels} />
- </div>
- </ScrollArea>
  </ScrollArea>
  </CenterPanelContainer>
  )
 }
 

diff --git a/web/screens/LocalServer/LocalServerCenterPanel/index.tsx b/web/screens/LocalServer/LocalServerCenterPanel/index.tsx
@@ -5,6 5,7 @@ import { CodeIcon, Paintbrush } from 'lucide-react'
 
 import { InfoIcon } from 'lucide-react'
 
 import CenterPanelContainer from '@/containers/CenterPanelContainer'
 import ServerLogs from '@/containers/ServerLogs'
 
 import { useLogs } from '@/hooks/useLogs'
@@ -24,57 25,59 @@ const LocalServerCenterPanel = () => {
  }, [firstTimeVisitAPIServer])
 
  return (
- <div className="flex h-full w-full flex-col overflow-hidden bg-[hsla(var(--app-bg))]">
- <div className="sticky top-0 flex items-center justify-between border-b border-[hsla(var(--app-border))] px-4 py-2">
- <h2 className="font-bold">Server Logs</h2>
- <div className="space-x-2">
- <Button
- theme="ghost"
- variant="outline"
- onClick={() => openServerLog()}
- >
- <CodeIcon size={16} className="mr-2" />
- Open Logs
- </Button>
- <Button
- theme="ghost"
- variant="outline"
- onClick={() => clearServerLog()}
- >
- <Paintbrush size={16} className="mr-2" />
- Clear
- </Button>
  <CenterPanelContainer>
  <div className="flex h-full w-full flex-col overflow-hidden bg-[hsla(var(--app-bg))]">
  <div className="sticky top-0 flex items-center justify-between border-b border-[hsla(var(--app-border))] px-4 py-2">
  <h2 className="font-bold">Server Logs</h2>
  <div className="space-x-2">
  <Button
  theme="ghost"
  variant="outline"
  onClick={() => openServerLog()}
  >
  <CodeIcon size={16} className="mr-2" />
  Open Logs
  </Button>
  <Button
  theme="ghost"
  variant="outline"
  onClick={() => clearServerLog()}
  >
  <Paintbrush size={16} className="mr-2" />
  Clear
  </Button>
  </div>
  </div>
- </div>
- {firstTimeVisitAPIServer ? (
- <div className="flex h-full items-center justify-center">
- <div className="w-[335px] rounded-lg border border-[hsla(var(--app-border))] p-6">
- <div className="item-start flex gap-x-4">
- <InfoIcon className="flex-shrink-0 text-[hsla(var(--info-bg))]" />
- <div>
- <h6 className="font-medium">
- Once you start the server, you cannot chat with your
- assistant.
- </h6>
- <Button
- className="mt-4"
- onClick={() => {
- localStorage.setItem(FIRST_TIME_VISIT_API_SERVER, 'false')
- setFirstTimeVisitAPIServer(false)
- }}
- >
- Got it
- </Button>
   {firstTimeVisitAPIServer ? (
   <div className="flex h-full items-center justify-center">
   <div className="w-[335px] rounded-lg border border-[hsla(var(--app-border))] p-6">
   <div className="item-start flex gap-x-4">
   <InfoIcon className="flex-shrink-0 text-[hsla(var(--info-bg))]" />
   <div>
   <h6 className="font-medium">
   Once you start the server, you cannot chat with your
   assistant.
  </h6>
   <Button
   className="mt-4"
   onClick={() => {
   localStorage.setItem(FIRST_TIME_VISIT_API_SERVER, 'false')
   setFirstTimeVisitAPIServer(false)
  }}
  >
   Got it
  </Button>
  </div>
  </div>
  </div>
  </div>
- </div>
- ) : (
- <ScrollArea className="h-full w-full">
- <ServerLogs />
- </ScrollArea>
- )}
- </div>
  ) : (
   <ScrollArea className="h-full w-full">
   <ServerLogs />
  </ScrollArea>
  )}
  </div>
  </CenterPanelContainer>
  )
 }
 

diff --git a/web/screens/Settings/MyModels/index.tsx b/web/screens/Settings/MyModels/index.tsx
@@ -11,6 11,7 @@ import { UploadCloudIcon, UploadIcon } from 'lucide-react'
 
 import { twMerge } from 'tailwind-merge'
 
 import CenterPanelContainer from '@/containers/CenterPanelContainer'
 import ModelSearch from '@/containers/ModelSearch'
 
 import SetupRemoteModel from '@/containers/SetupRemoteModel'
@@ -59,7 60,7 @@ const MyModels = () => {
  })
 
  return (
- <div {...getRootProps()} className="w-full">
  <div {...getRootProps()} className="h-full w-full">
  <ScrollArea className="h-full w-full">
  {isDragActive && (
  <div className="absolute z-50 mx-auto h-full w-full bg-[hsla(var(--app-bg))]/50 p-8 backdrop-blur-lg">

diff --git a/web/screens/Settings/index.tsx b/web/screens/Settings/index.tsx
@@ -2,6 2,8 @@ import { useEffect } from 'react'
 
 import { useSetAtom } from 'jotai'
 
 import CenterPanelContainer from '@/containers/CenterPanelContainer'
 
 import SettingDetail from '@/screens/Settings/SettingDetail'
 import SettingLeftPanel from '@/screens/Settings/SettingLeftPanel'
 
@@ -35,7 37,9 @@ const SettingsScreen = () => {
  className="flex h-full bg-[hsla(var(--app-bg))]"
  >
  <SettingLeftPanel />
- <SettingDetail />
  <CenterPanelContainer>
  <SettingDetail />
  </CenterPanelContainer>
  </div>
  )
 }