Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: wrong direction icon collapse right panel (#2967)

Browse Source 
* fix: wrong direction icon collapse right panel

* fix: add back social icon

* fix: modal troubleshoot

* fix: shadow transparent theme

* fix: enable nitro_tensorrt_llm

* fix: disabled model dropdown when local server running
This commit is contained in:
Faisal Amir 2024-05-30 18:14:16 +07:00 committed by GitHub
parent bd5a0ea8ab
commit 93ce01051c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
14 changed files with 83 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
electron/utils/setup.ts
View File

@ -2,7 +2,7 @@ import { app } from 'electron'
import Store from 'electron-store'
const DEFAULT_WIDTH = 1000
const DEFAULT_HEIGHT = 700
const DEFAULT_HEIGHT = 800
const storage = new Store()

1
joi/src/core/Modal/styles.scss
View File

@ -16,6 +16,7 @@ fieldset,
overflow: hidden;
background-color: hsla(var(--modal-bg));
border-radius: 8px;
font-size: 14px;
position: fixed;
z-index: 300;
top: 50%;

8
joi/src/core/ScrollArea/index.tsx
View File

@ -7,13 +7,17 @@ import './styles.scss'
const ScrollArea = React.forwardRef<
React.ElementRef<typeof ScrollAreaPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
>(({ className, children, ...props }, ref) => (
>(({ className, children, onScroll, ...props }, ref) => (
<ScrollAreaPrimitive.Root
type="scroll"
className={twMerge('scroll-area__root', className)}
{...props}
>
<ScrollAreaPrimitive.Viewport className="scroll-area__viewport" ref={ref}>
<ScrollAreaPrimitive.Viewport
className="scroll-area__viewport"
ref={ref}
onScroll={onScroll}
>
{children}
</ScrollAreaPrimitive.Viewport>
<ScrollAreaPrimitive.Scrollbar

2
web/app/layout.tsx
View File

@ -13,7 +13,7 @@ export const metadata: Metadata = {
export default function RootLayout({ children }: PropsWithChildren) {
return (
<html lang="en" suppressHydrationWarning>
<body className="h-screen font-sans antialiased">
<body className="h-screen font-sans text-sm antialiased">
<div className="dragable-bar" />
{children}
</body>

2
web/containers/CenterPanelContainer/index.tsx
View File

@ -16,7 +16,7 @@ const CenterPanelContainer = ({ children }: PropsWithChildren) => {
className={twMerge(
'h-full w-full overflow-hidden bg-[hsla(var(--center-panel-bg))]',
!reduceTransparent &&
'rounded-lg border border-[hsla(var(--app-border))] shadow'
'rounded-lg border border-[hsla(var(--app-border))]'
)}
>
{children}

40
web/containers/Layout/BottomPanel/index.tsx
View File

@ -1,5 +1,7 @@
import { Button, Tooltip } from '@janhq/joi'
import { useAtomValue } from 'jotai'
import { FaGithub, FaDiscord } from 'react-icons/fa'
import { twMerge } from 'tailwind-merge'
import DownloadingState from './DownloadingState'
@ -13,6 +15,19 @@ import UpdatedFailedModal from './UpdateFailedModal'
import { appDownloadProgressAtom } from '@/helpers/atoms/App.atom'
import { reduceTransparentAtom } from '@/helpers/atoms/Setting.atom'
const menuLinks = [
{
name: 'Discord',
icon: <FaDiscord size={16} className="flex-shrink-0" />,
link: 'https://discord.gg/FTk2MvZwJH',
},
{
name: 'Github',
icon: <FaGithub size={14} className="flex-shrink-0" />,
link: 'https://github.com/janhq/jan',
},
]
const BottomPanel = () => {
const progress = useAtomValue(appDownloadProgressAtom)
const reduceTransparent = useAtomValue(reduceTransparentAtom)
@ -41,6 +56,31 @@ const BottomPanel = () => {
<span className="font-medium text-[hsla(var(--text-secondary))]">
Jan v{VERSION ?? ''}
</span>
<div className="ml-2 flex items-center">
{menuLinks
.filter((link) => !!link)
.map((link, i) => (
<div className="relative" key={i}>
<Tooltip
withArrow={false}
side="top"
trigger={
<Button theme="icon">
<a
href={link.link}
target="_blank"
rel="noopener noreferrer"
className="relative flex w-full flex-shrink-0 items-center justify-center no-underline"
>
{link.icon}
</a>
</Button>
}
content={link.name}
/>
</div>
))}
</div>
</div>
</div>
)

4
web/containers/Layout/TopPanel/index.tsx
View File

@ -77,11 +77,11 @@ const TopPanel = () => {
<Fragment>
{showRightPanel ? (
<Button theme="icon" onClick={() => setShowRightPanel(false)}>
<PanelRightOpenIcon size={16} />
<PanelRightCloseIcon size={16} />
</Button>
) : (
<Button theme="icon" onClick={() => setShowRightPanel(true)}>
<PanelRightCloseIcon size={16} />
<PanelRightOpenIcon size={16} />
</Button>
)}
</Fragment>

2
web/containers/ModalTroubleShoot/AppLogs.tsx
View File

@ -27,7 +27,7 @@ const AppLogs = () => {
return (
<div className="max-w-[50vw] p-4 pb-0">
<div className="absolute -top-11 right-2">
<div className="absolute right-2 top-7">
<div className="flex w-full flex-row items-center gap-2">
<Button
theme="ghost"

2
web/containers/ModalTroubleShoot/DeviceSpecs.tsx
View File

@ -27,7 +27,7 @@ const DeviceSpecs = () => {
return (
<div className="max-w-[50vw] p-4 pb-0">
<div className="absolute -top-11 right-2">
<div className="absolute right-2 top-7">
<Button
theme="ghost"
variant="outline"

29
web/containers/ModalTroubleShoot/index.tsx
View File

@ -1,7 +1,6 @@
import { useState } from 'react'
import { Modal, ScrollArea } from '@janhq/joi'
import { motion as m } from 'framer-motion'
import { Modal } from '@janhq/joi'
import { atom, useAtom } from 'jotai'
import { twMerge } from 'tailwind-merge'
@ -26,7 +25,7 @@ const ModalTroubleShooting = () => {
onOpenChange={setModalTroubleShooting}
title="Troubleshooting Assistance"
content={
<div className="flex h-full w-full flex-col overflow-hidden ">
<div className="flex h-full w-full flex-col overflow-hidden text-sm">
<div className="flex-shrink-0">
<p className="text-[hsla(var(--text-secondary)] mt-2 pr-3 leading-relaxed">
{`We're here to help! Your report is crucial for debugging and shaping
@ -78,41 +77,37 @@ const ModalTroubleShooting = () => {
</li>
</ul>
</div>
<div className="flex h-full w-full flex-col pt-4">
<div className="relative border-y border-[hsla(var(--app-border))] px-4 py-2 ">
<div className="relative flex h-full w-full flex-col pt-4">
<div className="border-y border-[hsla(var(--app-border))] px-4 py-2 ">
<ul className="inline-flex space-x-2 rounded-lg px-1">
{logOption.map((name, i) => {
return (
<li
className="relative cursor-pointer px-4 py-2"
className={twMerge(
'relative cursor-pointer px-4 py-2',
isTabActive === i &&
'rounded-md bg-[hsla(var(--primary-bg))] font-bold text-[hsla(var(--primary-fg))]'
)}
key={i}
onClick={() => setIsTabActivbe(i)}
>
<span
className={twMerge(
'text-[hsla(var(--text-secondary)] relative z-50 font-medium',
isTabActive === i &&
'bg= font-bold text-[hsla(var(--primary-fg))]'
'text-[hsla(var(--text-secondary)] relative z-50 font-medium'
)}
>
{name}
</span>
{isTabActive === i && (
<m.div
className="absolute left-0 top-1 h-[calc(100%-8px)] w-full rounded-md bg-[hsla(var(--primary-bg))]"
layoutId="log-state-active"
/>
)}
</li>
)
})}
</ul>
</div>
<ScrollArea className="w-full">
<div className="max-h-[160px] overflow-y-auto">
{isTabActive === 0 && <AppLogs />}
{isTabActive === 1 && <ServerLogs limit={50} withCopy />}
{isTabActive === 2 && <DeviceSpecs />}
</ScrollArea>
</div>
</div>
</div>
</div>

17
web/containers/ModelDropdown/index.tsx
View File

@ -35,6 +35,7 @@ import {
type Props = {
chatInputMode?: boolean
strictedThread?: boolean
disabled?: boolean
}
const engineHasLogo = [
@ -45,7 +46,11 @@ const engineHasLogo = [
InferenceEngine.openai,
]
const ModelDropdown = ({ chatInputMode, strictedThread = true }: Props) => {
const ModelDropdown = ({
disabled,
chatInputMode,
strictedThread = true,
}: Props) => {
const { downloadModel } = useDownloadModel()
const [searchFilter, setSearchFilter] = useState('all')
const [filterOptionsOpen, setFilterOptionsOpen] = useState(false)
@ -210,7 +215,7 @@ const ModelDropdown = ({ chatInputMode, strictedThread = true }: Props) => {
}
return (
<div className="relative">
<div className={twMerge('relative', disabled && 'pointer-events-none')}>
<div ref={setToggle}>
{chatInputMode ? (
<Badge
@ -224,6 +229,7 @@ const ModelDropdown = ({ chatInputMode, strictedThread = true }: Props) => {
<Input
value={selectedModel?.name || ''}
className="cursor-pointer"
disabled={disabled}
readOnly
suffixIcon={
<ChevronDownIcon
@ -387,10 +393,15 @@ const ModelDropdown = ({ chatInputMode, strictedThread = true }: Props) => {
className={twMerge(
'cursor-pointer px-3 py-2 hover:bg-[hsla(var(--dropdown-menu-hover-bg))]',
!apiKey &&
model.engine !==
InferenceEngine.nitro_tensorrt_llm &&
'cursor-default text-[hsla(var(--text-tertiary))]'
)}
onClick={() =>
apiKey && onClickModelItem(model.id)
apiKey ||
(model.engine ===
InferenceEngine.nitro_tensorrt_llm &&
onClickModelItem(model.id))
}
>
<div className="flex flex-shrink-0 gap-x-2">

2
web/containers/ServerLogs/index.tsx
View File

@ -67,7 +67,7 @@ const ServerLogs = (props: ServerLogsProps) => {
)}
>
{withCopy && (
<div className="absolute -top-11 right-2">
<div className="absolute right-2 top-7">
<div className="flex w-full flex-row gap-2">
<Button
theme="ghost"

2
web/screens/LocalServer/LocalServerRightPanel/index.tsx
View File

@ -85,7 +85,7 @@ const LocalServerRightPanel = () => {
</p>
</div>
<ModelDropdown strictedThread={false} />
<ModelDropdown strictedThread={false} disabled={serverEnabled} />
{loadModelError && serverEnabled && (
<div className="mt-3 flex space-x-2">

2
web/screens/Settings/Appearance/index.tsx
View File

@ -3,7 +3,7 @@ import { useCallback } from 'react'
import { useTheme } from 'next-themes'
import { fs, joinPath } from '@janhq/core'
import { Button, Select, Switch } from '@janhq/joi'
import { Button, Select } from '@janhq/joi'
import { useAtom, useAtomValue } from 'jotai'
import {