janhq · urmauur · May 30, 2024 · May 30, 2024 · May 30, 2024 · May 30, 2024
diff --git a/electron/utils/setup.ts b/electron/utils/setup.ts
@@ -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()
 

diff --git a/joi/src/core/Modal/styles.scss b/joi/src/core/Modal/styles.scss
@@ -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%;

diff --git a/joi/src/core/ScrollArea/index.tsx b/joi/src/core/ScrollArea/index.tsx
@@ -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

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 font-sans 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
@@ -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}

diff --git a/web/containers/Layout/BottomPanel/index.tsx b/web/containers/Layout/BottomPanel/index.tsx
@@ -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>
   )

diff --git a/web/containers/Layout/TopPanel/index.tsx b/web/containers/Layout/TopPanel/index.tsx
@@ -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>

diff --git a/web/containers/ModalTroubleShoot/AppLogs.tsx b/web/containers/ModalTroubleShoot/AppLogs.tsx
@@ -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"

diff --git a/web/containers/ModalTroubleShoot/DeviceSpecs.tsx b/web/containers/ModalTroubleShoot/DeviceSpecs.tsx
@@ -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"

diff --git a/web/containers/ModalTroubleShoot/index.tsx b/web/containers/ModalTroubleShoot/index.tsx
@@ -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>

diff --git a/web/containers/ModelDropdown/index.tsx b/web/containers/ModelDropdown/index.tsx
@@ -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">

diff --git a/web/containers/ServerLogs/index.tsx b/web/containers/ServerLogs/index.tsx
@@ -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"

diff --git a/web/screens/LocalServer/LocalServerRightPanel/index.tsx b/web/screens/LocalServer/LocalServerRightPanel/index.tsx
@@ -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">

diff --git a/web/screens/Settings/Appearance/index.tsx b/web/screens/Settings/Appearance/index.tsx
@@ -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 {