fix bug filter the list menu from command and make a symbol base on OS

uikit/src/command/index.tsx

@@ -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>

web/containers/Layout/BottomBar/index.tsx

@@ -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" />
+                  &nbsp; to show your model
+                </Badge>
               )
             }
           />

web/containers/Layout/TopBar/CommandListDownloadedModel/index.tsx

@@ -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>
                       )}

web/containers/Layout/TopBar/CommandSearch/index.tsx

@@ -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">
+        <div className="absolute right-2 top-1/2 -translate-y-1/2">
-          ⌘ j
+          <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)

web/containers/Shortcut/index.tsx

@@ -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>
+  )
+}

web/hooks/useOs.ts

@@ -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
+}

web/screens/Chat/index.tsx

@@ -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">
+                  <Badge className="mt-4" themes="outline">
-                    ⌘e to show your model
+                    <ShortCut menu="E" />
+                    &nbsp; to show your model
                   </Badge>
                 </Fragment>
               )}

web/screens/Welcome/index.tsx

@@ -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">
+            <Badge className="mt-4" themes="outline">
-              ⌘e to show your model
+              <ShortCut menu="E" />
+              &nbsp; to show your model
             </Badge>
           </Fragment>
         )}