fix bug filter the list menu from command and make a symbol base on OS
This commit is contained in:
Faisal Amir
parent
62400243e0
commit
ff01a6e7ed
@ -27,7 +27,13 @@ const CommandModal = ({ children, ...props }: CommandModalProps) => {
|
||||
return (
|
||||
<Modal {...props}>
|
||||
<ModalContent className="command-modal-content">
|
||||
<Command className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
|
||||
<Command
|
||||
filter={(value, search) => {
|
||||
if (value.includes(search)) return 1
|
||||
return 0
|
||||
}}
|
||||
className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"
|
||||
>
|
||||
{children}
|
||||
</Command>
|
||||
</ModalContent>
|
||||
|
||||
@ -8,6 +8,8 @@ import ProgressBar from '@/containers/ProgressBar'
|
||||
|
||||
import { appDownloadProgress } from '@/containers/Providers/Jotai'
|
||||
|
||||
import ShortCut from '@/containers/Shortcut'
|
||||
|
||||
import { MainViewState } from '@/constants/screens'
|
||||
|
||||
import { useActiveModel } from '@/hooks/useActiveModel'
|
||||
@ -47,7 +49,10 @@ const BottomBar = () => {
|
||||
name="Active model:"
|
||||
value={
|
||||
activeModel?.id || (
|
||||
<Badge themes="secondary">⌘e to show your model</Badge>
|
||||
<Badge themes="outline">
|
||||
<ShortCut menu="E" />
|
||||
to show your model
|
||||
</Badge>
|
||||
)
|
||||
}
|
||||
/>
|
||||
|
||||
@ -61,6 +61,7 @@ export default function CommandListDownloadedModel() {
|
||||
return (
|
||||
<CommandItem
|
||||
key={i}
|
||||
value={model.id}
|
||||
onSelect={() => {
|
||||
onModelActionClick(model.id)
|
||||
setOpen(false)
|
||||
@ -71,7 +72,7 @@ export default function CommandListDownloadedModel() {
|
||||
className="mr-3 text-muted-foreground"
|
||||
/>
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<span>{model.name}</span>
|
||||
<span>{model.id}</span>
|
||||
{activeModel && activeModel.id === model.id && (
|
||||
<Badge themes="secondary">Active</Badge>
|
||||
)}
|
||||
|
||||
@ -19,6 +19,8 @@ import {
|
||||
BookOpenIcon,
|
||||
} from 'lucide-react'
|
||||
|
||||
import ShortCut from '@/containers/Shortcut'
|
||||
|
||||
import { FeatureToggleContext } from '@/context/FeatureToggle'
|
||||
|
||||
import { MainViewState } from '@/constants/screens'
|
||||
@ -27,10 +29,8 @@ import { useMainViewState } from '@/hooks/useMainViewState'
|
||||
|
||||
export default function CommandSearch() {
|
||||
const { experimentalFeatureEnabed } = useContext(FeatureToggleContext)
|
||||
|
||||
const { setMainViewState } = useMainViewState()
|
||||
|
||||
const [open, setOpen] = useState(false)
|
||||
const menus = [
|
||||
{
|
||||
name: 'Getting Started',
|
||||
@ -60,13 +60,15 @@ export default function CommandSearch() {
|
||||
name: 'Settings',
|
||||
icon: <SettingsIcon size={16} className="mr-3 text-muted-foreground" />,
|
||||
state: MainViewState.Setting,
|
||||
shortcut: '⌘,',
|
||||
shortcut: <ShortCut menu="," />,
|
||||
},
|
||||
]
|
||||
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
const down = (e: KeyboardEvent) => {
|
||||
if (e.key === 'j' && (e.metaKey || e.ctrlKey)) {
|
||||
if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
|
||||
e.preventDefault()
|
||||
setOpen((open) => !open)
|
||||
}
|
||||
@ -90,10 +92,11 @@ export default function CommandSearch() {
|
||||
>
|
||||
Search menus...
|
||||
</Button>
|
||||
<div className="absolute right-2 top-1/2 -translate-y-1/2 rounded-md bg-secondary px-1 py-0.5 text-xs font-bold text-muted-foreground">
|
||||
⌘ j
|
||||
<div className="absolute right-2 top-1/2 -translate-y-1/2">
|
||||
<ShortCut menu="K" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CommandModal open={open} onOpenChange={setOpen}>
|
||||
<CommandInput placeholder="Type a command or search..." />
|
||||
<CommandList>
|
||||
@ -103,6 +106,7 @@ export default function CommandSearch() {
|
||||
return (
|
||||
<CommandItem
|
||||
key={i}
|
||||
value={menu.name}
|
||||
onSelect={() => {
|
||||
setMainViewState(menu.state)
|
||||
setOpen(false)
|
||||
|
||||
21
web/containers/Shortcut/index.tsx
Normal file
21
web/containers/Shortcut/index.tsx
Normal file
@ -0,0 +1,21 @@
|
||||
import { useOs, type OS } from '@/hooks/useOs'
|
||||
|
||||
export default function ShortCut(props: { menu: string }) {
|
||||
const os = useOs()
|
||||
const { menu } = props
|
||||
const getSymbol = (os: OS) => {
|
||||
switch (os) {
|
||||
case 'macos':
|
||||
return '⌘'
|
||||
|
||||
default:
|
||||
return 'Ctrl'
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="inline-flex items-center justify-center rounded-md bg-secondary px-1 py-0.5 text-xs font-bold text-muted-foreground">
|
||||
<p>{getSymbol(os) + ' + ' + menu}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
57
web/hooks/useOs.ts
Normal file
57
web/hooks/useOs.ts
Normal file
@ -0,0 +1,57 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
export type OS =
|
||||
| 'undetermined'
|
||||
| 'macos'
|
||||
| 'ios'
|
||||
| 'windows'
|
||||
| 'android'
|
||||
| 'linux'
|
||||
|
||||
function getOS(): OS {
|
||||
if (typeof window === 'undefined') {
|
||||
return 'undetermined'
|
||||
}
|
||||
|
||||
const { userAgent } = window.navigator
|
||||
const macosPlatforms = /(Macintosh)|(MacIntel)|(MacPPC)|(Mac68K)/i
|
||||
const windowsPlatforms = /(Win32)|(Win64)|(Windows)|(WinCE)/i
|
||||
const iosPlatforms = /(iPhone)|(iPad)|(iPod)/i
|
||||
|
||||
if (iosPlatforms.test(userAgent)) {
|
||||
return 'ios'
|
||||
}
|
||||
if (/Android/i.test(userAgent)) {
|
||||
return 'android'
|
||||
}
|
||||
|
||||
if (macosPlatforms.test(userAgent)) {
|
||||
return 'macos'
|
||||
}
|
||||
if (windowsPlatforms.test(userAgent)) {
|
||||
return 'windows'
|
||||
}
|
||||
if (/Linux/i.test(userAgent)) {
|
||||
return 'linux'
|
||||
}
|
||||
|
||||
return 'undetermined'
|
||||
}
|
||||
|
||||
interface UseOsOptions {
|
||||
getValueInEffect: boolean
|
||||
}
|
||||
|
||||
export function useOs(options: UseOsOptions = { getValueInEffect: true }): OS {
|
||||
const [value, setValue] = useState<OS>(
|
||||
options.getValueInEffect ? 'undetermined' : getOS()
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
if (options.getValueInEffect) {
|
||||
setValue(getOS)
|
||||
}
|
||||
}, [])
|
||||
|
||||
return value
|
||||
}
|
||||
@ -10,6 +10,8 @@ import { twMerge } from 'tailwind-merge'
|
||||
|
||||
import { currentPromptAtom } from '@/containers/Providers/Jotai'
|
||||
|
||||
import ShortCut from '@/containers/Shortcut'
|
||||
|
||||
import { MainViewState } from '@/constants/screens'
|
||||
|
||||
import { useActiveModel } from '@/hooks/useActiveModel'
|
||||
@ -181,8 +183,9 @@ const ChatScreen = () => {
|
||||
<Fragment>
|
||||
<h1 className="text-lg font-medium">{`You don’t have any actively running models`}</h1>
|
||||
<p className="mt-1">{`Please start a downloaded model in My Models page to use this feature.`}</p>
|
||||
<Badge className="mt-4" themes="secondary">
|
||||
⌘e to show your model
|
||||
<Badge className="mt-4" themes="outline">
|
||||
<ShortCut menu="E" />
|
||||
to show your model
|
||||
</Badge>
|
||||
</Fragment>
|
||||
)}
|
||||
|
||||
@ -4,6 +4,8 @@ import { Badge, Button } from '@janhq/uikit'
|
||||
|
||||
import LogoMark from '@/containers/Brand/Logo/Mark'
|
||||
|
||||
import ShortCut from '@/containers/Shortcut'
|
||||
|
||||
import { MainViewState } from '@/constants/screens'
|
||||
|
||||
import { useActiveModel } from '@/hooks/useActiveModel'
|
||||
@ -46,8 +48,9 @@ const WelcomeScreen = () => {
|
||||
<Fragment>
|
||||
<h1 className="mt-2 text-lg font-medium">{`You don’t have any actively running models`}</h1>
|
||||
<p className="mt-1">{`Please start a downloaded model in My Models page to use this feature.`}</p>
|
||||
<Badge className="mt-4" themes="secondary">
|
||||
⌘e to show your model
|
||||
<Badge className="mt-4" themes="outline">
|
||||
<ShortCut menu="E" />
|
||||
to show your model
|
||||
</Badge>
|
||||
</Fragment>
|
||||
)}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user