fix: small leftover issues with new starter screen (janhq#3661)

* fix: fix duplicate render progress component * fix: minor ui issue * chore: add manual recommend model * chore: make button create thread invisible * chore: fix conflict * chore: remove selector create thread icon * test: added unit test thread screen
satendrakumar · Sep 17, 2024 · c62b6e9 · c62b6e9
1 parent 031b351
commit c62b6e9
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 64 deletions.
diff --git a/electron/tests/e2e/thread.e2e.spec.ts b/electron/tests/e2e/thread.e2e.spec.ts
@@ -1,32 +1,29 @@
 import { expect } from '@playwright/test'
 import { page, test, TIMEOUT } from '../config/fixtures'
 
-test('Select GPT model from Hub and Chat with Invalid API Key', async ({ hubPage }) => {
+test('Select GPT model from Hub and Chat with Invalid API Key', async ({
+  hubPage,
+}) => {
   await hubPage.navigateByMenu()
   await hubPage.verifyContainerVisible()
 
   // Select the first GPT model
   await page
     .locator('[data-testid^="use-model-btn"][data-testid*="gpt"]')
-    .first().click()
-
-  // Attempt to create thread and chat in Thread page
-  await page
-    .getByTestId('btn-create-thread')
+    .first()
     .click()
 
-  await page
-    .getByTestId('txt-input-chat')
-    .fill('dummy value')
+  await page.getByTestId('txt-input-chat').fill('dummy value')
 
-  await page
-    .getByTestId('btn-send-chat')
-    .click()
+  await page.getByTestId('btn-send-chat').click()
 
-  await page.waitForFunction(() => {
-    const loaders = document.querySelectorAll('[data-testid$="loader"]');
-    return !loaders.length;
-  }, { timeout: TIMEOUT });
+  await page.waitForFunction(
+    () => {
+      const loaders = document.querySelectorAll('[data-testid$="loader"]')
+      return !loaders.length
+    },
+    { timeout: TIMEOUT }
+  )
 
   const APIKeyError = page.getByTestId('invalid-API-key-error')
   await expect(APIKeyError).toBeVisible({

diff --git a/web/containers/Layout/RibbonPanel/index.tsx b/web/containers/Layout/RibbonPanel/index.tsx
@@ -12,17 +12,18 @@ import { twMerge } from 'tailwind-merge'
 
 import { MainViewState } from '@/constants/screens'
 
-import { localEngines } from '@/utils/modelEngine'
-
 import { mainViewStateAtom, showLeftPanelAtom } from '@/helpers/atoms/App.atom'
 import { editMessageAtom } from '@/helpers/atoms/ChatMessage.atom'
 import { serverEnabledAtom } from '@/helpers/atoms/LocalServer.atom'
-import { downloadedModelsAtom } from '@/helpers/atoms/Model.atom'
+
 import {
   reduceTransparentAtom,
   selectedSettingAtom,
 } from '@/helpers/atoms/Setting.atom'
-import { threadsAtom } from '@/helpers/atoms/Thread.atom'
+import {
+  isDownloadALocalModelAtom,
+  threadsAtom,
+} from '@/helpers/atoms/Thread.atom'
 
 export default function RibbonPanel() {
   const [mainViewState, setMainViewState] = useAtom(mainViewStateAtom)
@@ -32,8 +33,9 @@ export default function RibbonPanel() {
   const matches = useMediaQuery('(max-width: 880px)')
   const reduceTransparent = useAtomValue(reduceTransparentAtom)
   const setSelectedSetting = useSetAtom(selectedSettingAtom)
-  const downloadedModels = useAtomValue(downloadedModelsAtom)
+
   const threads = useAtomValue(threadsAtom)
+  const isDownloadALocalModel = useAtomValue(isDownloadALocalModelAtom)
 
   const onMenuClick = (state: MainViewState) => {
     if (mainViewState === state) return
@@ -43,10 +45,6 @@ export default function RibbonPanel() {
     setEditMessage('')
   }
 
-  const isDownloadALocalModel = downloadedModels.some((x) =>
-    localEngines.includes(x.engine)
-  )
-
   const RibbonNavMenus = [
     {
       name: 'Thread',

diff --git a/web/containers/Layout/TopPanel/index.tsx b/web/containers/Layout/TopPanel/index.tsx
@@ -23,6 +23,7 @@ import { toaster } from '@/containers/Toast'
 import { MainViewState } from '@/constants/screens'
 
 import { useCreateNewThread } from '@/hooks/useCreateNewThread'
+import { useStarterScreen } from '@/hooks/useStarterScreen'
 
 import {
   mainViewStateAtom,
@@ -58,6 +59,8 @@ const TopPanel = () => {
     requestCreateNewThread(assistants[0])
   }
 
+  const { isShowStarterScreen } = useStarterScreen()
+
   return (
     <div
       className={twMerge(
@@ -93,7 +96,7 @@ const TopPanel = () => {
               )}
             </Fragment>
           )}
-          {mainViewState === MainViewState.Thread && (
+          {mainViewState === MainViewState.Thread && !isShowStarterScreen && (
             <Button
               data-testid="btn-create-thread"
               onClick={onCreateNewThreadClick}

diff --git a/web/helpers/atoms/Thread.atom.ts b/web/helpers/atoms/Thread.atom.ts
@@ -152,3 +152,6 @@ export const modalActionThreadAtom = atom<{
   showModal: undefined,
   thread: undefined,
 })
+
+export const isDownloadALocalModelAtom = atom<boolean>(false)
+export const isAnyRemoteModelConfiguredAtom = atom<boolean>(false)
diff --git a/web/hooks/useStarterScreen.ts b/web/hooks/useStarterScreen.ts
@@ -63,14 +63,9 @@ export function useStarterScreen() {
     (x) => x.apiKey.length > 1
   )
 
-  let isShowStarterScreen
-
-  isShowStarterScreen =
+  const isShowStarterScreen =
     !isAnyRemoteModelConfigured && !isDownloadALocalModel && !threads.length
 
-  // Remove this part when we rework on starter screen
-  isShowStarterScreen = false
-
   return {
     extensionHasSettings,
     isShowStarterScreen,

diff --git a/web/screens/Thread/ThreadCenterPanel/ChatBody/OnDeviceStarterScreen/index.tsx b/web/screens/Thread/ThreadCenterPanel/ChatBody/OnDeviceStarterScreen/index.tsx
@@ -58,9 +58,21 @@ const OnDeviceStarterScreen = ({ extensionHasSettings }: Props) => {
   const configuredModels = useAtomValue(configuredModelsAtom)
   const setMainViewState = useSetAtom(mainViewStateAtom)
 
-  const featuredModel = configuredModels.filter(
-    (x) => x.metadata.tags.includes('Featured') && x.metadata.size < 5000000000
-  )
+  const recommendModel = ['gemma-2-2b-it', 'llama3.1-8b-instruct']
+
+  const featuredModel = configuredModels.filter((x) => {
+    const manualRecommendModel = configuredModels.filter((x) =>
+      recommendModel.includes(x.id)
+    )
+
+    if (manualRecommendModel.length === 2) {
+      return x.id === recommendModel[0] || x.id === recommendModel[1]
+    } else {
+      return (
+        x.metadata.tags.includes('Featured') && x.metadata.size < 5000000000
+      )
+    }
+  })
 
   const remoteModel = configuredModels.filter(
     (x) => !localEngines.includes(x.engine)
@@ -105,7 +117,7 @@ const OnDeviceStarterScreen = ({ extensionHasSettings }: Props) => {
               width={48}
               height={48}
             />
-            <h1 className="text-base font-semibold">Select a model to start</h1>
+            <h1 className="text-base font-medium">Select a model to start</h1>
             <div className="mt-6 w-[320px] md:w-[400px]">
               <Fragment>
                 <div className="relative" ref={refDropdown}>
@@ -120,7 +132,7 @@ const OnDeviceStarterScreen = ({ extensionHasSettings }: Props) => {
                   />
                   <div
                     className={twMerge(
-                      'absolute left-0 top-10 max-h-[240px] w-full overflow-x-auto rounded-lg border border-[hsla(var(--app-border))] bg-[hsla(var(--app-bg))]',
+                      'absolute left-0 top-10 z-20 max-h-[240px] w-full overflow-x-auto rounded-lg border border-[hsla(var(--app-border))] bg-[hsla(var(--app-bg))]',
                       !isOpen ? 'invisible' : 'visible'
                     )}
                   >
@@ -205,39 +217,41 @@ const OnDeviceStarterScreen = ({ extensionHasSettings }: Props) => {
                   return (
                     <div
                       key={featModel.id}
-                      className="my-2 flex items-center justify-between gap-2 border-b border-[hsla(var(--app-border))] py-4 last:border-none"
+                      className="my-2 flex items-center justify-between gap-2 border-b border-[hsla(var(--app-border))] pb-4 pt-1 last:border-none"
                     >
                       <div className="w-full text-left">
-                        <h6>{featModel.name}</h6>
-                        <p className="mt-4 text-[hsla(var(--text-secondary))]">
+                        <h6 className="font-medium">{featModel.name}</h6>
+                        <p className="mt-2 font-medium text-[hsla(var(--text-secondary))]">
                           {featModel.metadata.author}
                         </p>
                       </div>
 
                       {isDownloading ? (
                         <div className="flex w-full items-center gap-2">
-                          {Object.values(downloadStates).map((item, i) => (
-                            <div
-                              className="flex w-full items-center gap-2"
-                              key={i}
-                            >
-                              <Progress
-                                className="w-full"
-                                value={
-                                  formatDownloadPercentage(item?.percent, {
-                                    hidePercentage: true,
-                                  }) as number
-                                }
-                              />
-                              <div className="flex items-center justify-between gap-x-2">
-                                <div className="flex gap-x-2">
-                                  <span className="font-medium text-[hsla(var(--primary-bg))]">
-                                    {formatDownloadPercentage(item?.percent)}
-                                  </span>
+                          {Object.values(downloadStates)
+                            .filter((x) => x.modelId === featModel.id)
+                            .map((item, i) => (
+                              <div
+                                className="flex w-full items-center gap-2"
+                                key={i}
+                              >
+                                <Progress
+                                  className="w-full"
+                                  value={
+                                    formatDownloadPercentage(item?.percent, {
+                                      hidePercentage: true,
+                                    }) as number
+                                  }
+                                />
+                                <div className="flex items-center justify-between gap-x-2">
+                                  <div className="flex gap-x-2">
+                                    <span className="font-medium text-[hsla(var(--primary-bg))]">
+                                      {formatDownloadPercentage(item?.percent)}
+                                    </span>
+                                  </div>
                                 </div>
                               </div>
-                            </div>
-                          ))}
+                            ))}
                         </div>
                       ) : (
                         <div className="flex flex-col items-end justify-end gap-2">
@@ -248,7 +262,7 @@ const OnDeviceStarterScreen = ({ extensionHasSettings }: Props) => {
                           >
                             Download
                           </Button>
-                          <span className="font-medium text-[hsla(var(--text-secondary))]">
+                          <span className="text-[hsla(var(--text-secondary))]">
                             {toGibibytes(featModel.metadata.size)}
                           </span>
                         </div>
@@ -257,7 +271,7 @@ const OnDeviceStarterScreen = ({ extensionHasSettings }: Props) => {
                   )
                 })}
 
-                <div className="mb-4 mt-8 flex items-center justify-between">
+                <div className="mb-2 mt-8 flex items-center justify-between">
                   <h2 className="text-[hsla(var(--text-secondary))]">
                     Cloud Models
                   </h2>
@@ -268,7 +282,7 @@ const OnDeviceStarterScreen = ({ extensionHasSettings }: Props) => {
                     return (
                       <div
                         key={rowIndex}
-                        className="my-2 flex items-center justify-center gap-4 md:gap-10"
+                        className="my-2 flex items-center gap-4 md:gap-10"
                       >
                         {row.map((remoteEngine) => {
                           const engineLogo = getLogoEngine(
@@ -298,7 +312,7 @@ const OnDeviceStarterScreen = ({ extensionHasSettings }: Props) => {
                                 />
                               )}
 
-                              <p>
+                              <p className="font-medium">
                                 {getTitleByEngine(
                                   remoteEngine as InferenceEngine
                                 )}

diff --git a/web/screens/Thread/index.test.tsx b/web/screens/Thread/index.test.tsx
@@ -0,0 +1,35 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import ThreadScreen from './index'
+import { useStarterScreen } from '../../hooks/useStarterScreen'
+import '@testing-library/jest-dom'
+
+global.ResizeObserver = class {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+// Mock the useStarterScreen hook
+jest.mock('@/hooks/useStarterScreen')
+
+describe('ThreadScreen', () => {
+  it('renders OnDeviceStarterScreen when isShowStarterScreen is true', () => {
+    ;(useStarterScreen as jest.Mock).mockReturnValue({
+      isShowStarterScreen: true,
+      extensionHasSettings: false,
+    })
+
+    const { getByText } = render(<ThreadScreen />)
+    expect(getByText('Select a model to start')).toBeInTheDocument()
+  })
+
+  it('renders Thread panels when isShowStarterScreen is false', () => {
+    ;(useStarterScreen as jest.Mock).mockReturnValue({
+      isShowStarterScreen: false,
+      extensionHasSettings: false,
+    })
+
+    const { getByText } = render(<ThreadScreen />)
+    expect(getByText('Welcome!')).toBeInTheDocument()
+  })
+})