fix: small leftover issues with new starter screen (#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
2024-09-17 22:13:18 +07:00 · 2024-09-17 22:13:18 +07:00 · c62b6e9842
commit c62b6e9842
parent 031b3517dc
7 changed files with 109 additions and 64 deletions
--- 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({
--- 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',
--- 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}
--- 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)
--- 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,
--- 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
                                )}
--- 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()
+  })
+})