From 02c463d4d1e70bb8767d0f321dec57a752630cfa Mon Sep 17 00:00:00 2001 From: Faisal Amir Date: Sun, 11 Aug 2024 23:22:30 +0700 Subject: [PATCH 1/4] chore(ui)/update-experience-model-dropdown --- web/containers/CenterPanelContainer/index.tsx | 1 - web/containers/EngineAvatar/index.tsx | 0 web/containers/ModelDropdown/ModelSection.tsx | 99 +++++++++++++++---- web/containers/ModelDropdown/index.tsx | 8 +- web/helpers/atoms/Model.atom.ts | 10 +- web/public/icons/llamacpp.svg | 15 +++ .../ThreadLeftPanel/ThreadItem/index.tsx | 4 +- web/screens/Thread/ThreadLeftPanel/index.tsx | 5 +- web/utils/model-engine.ts | 13 +++ 9 files changed, 127 insertions(+), 28 deletions(-) create mode 100644 web/containers/EngineAvatar/index.tsx create mode 100644 web/public/icons/llamacpp.svg diff --git a/web/containers/CenterPanelContainer/index.tsx b/web/containers/CenterPanelContainer/index.tsx index ecbfb95fb8..8797b5ee64 100644 --- a/web/containers/CenterPanelContainer/index.tsx +++ b/web/containers/CenterPanelContainer/index.tsx @@ -17,7 +17,6 @@ const CenterPanelContainer = ({ children }: PropsWithChildren) => {
= ({ const setUpRemoteModelStage = useSetAtom(setUpRemoteModelStageAtom) const { data: engineData } = useEngineQuery() + const [showEngineListModel, setShowEngineListModel] = useAtom( + showEngineListModelAtom + ) + const engineLogo: string | undefined = models.find( (entry) => entry?.metadata?.logo != null )?.metadata?.logo @@ -55,13 +69,26 @@ const ModelSection: React.FC = ({ setModels(matchedModels) }, [getModelsByEngine, engine, searchText]) - if (models.length === 0) return null const engineName = getTitleByCategory(engine) + const localEngineLogo = getLogoByLocalEngine(engine as LocalEngine) + const isRemoteEngine = RemoteEngines.includes(engine as RemoteEngine) + const showModel = showEngineListModel.includes(engine) + + if (models.length === 0) return null return ( -
+
+ {!isRemoteEngine && ( + logo + )} {engineLogo && ( = ({ alt="logo" /> )} -
+
{engineName}
- +
+ {isRemoteEngine && ( + + )} + {!showModel ? ( + + ) : ( + + )} +
-
    +
      {models.map((model) => { const isEngineReady = engineData?.find((e) => e.name === model.engine)?.status === EngineStatus.Ready + + if (!showModel) return null + return (
    • { - if (isEngineReady) { - onModelSelected(model) - } + onModelSelected(model) }} >
      diff --git a/web/containers/ModelDropdown/index.tsx b/web/containers/ModelDropdown/index.tsx index 2cd09b329d..f411f8f461 100644 --- a/web/containers/ModelDropdown/index.tsx +++ b/web/containers/ModelDropdown/index.tsx @@ -1,6 +1,12 @@ import { useState, useCallback, useEffect, useRef } from 'react' -import { LlmEngines, LocalEngines, Model, RemoteEngines } from '@janhq/core' +import { + LlmEngine, + LlmEngines, + LocalEngines, + Model, + RemoteEngines, +} from '@janhq/core' import { Badge, Input, ScrollArea, Select, useClickOutside } from '@janhq/joi' import { useAtomValue } from 'jotai' diff --git a/web/helpers/atoms/Model.atom.ts b/web/helpers/atoms/Model.atom.ts index 88f685705b..9d11e26cda 100644 --- a/web/helpers/atoms/Model.atom.ts +++ b/web/helpers/atoms/Model.atom.ts @@ -1,4 +1,10 @@ -import { ImportingModel, Model, ModelStatus } from '@janhq/core' +import { + ImportingModel, + LlmEngine, + LocalEngines, + Model, + ModelStatus, +} from '@janhq/core' import { atom } from 'jotai' import { activeThreadAtom, threadsAtom } from './Thread.atom' @@ -128,3 +134,5 @@ export const updateSelectedModelAtom = atom(null, (get, set, model: Model) => { }) export const activeModelsAtom = atom([]) + +export const showEngineListModelAtom = atom([...LocalEngines]) diff --git a/web/public/icons/llamacpp.svg b/web/public/icons/llamacpp.svg new file mode 100644 index 0000000000..44db362013 --- /dev/null +++ b/web/public/icons/llamacpp.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/web/screens/Thread/ThreadLeftPanel/ThreadItem/index.tsx b/web/screens/Thread/ThreadLeftPanel/ThreadItem/index.tsx index 42913f1b00..8303b02502 100644 --- a/web/screens/Thread/ThreadLeftPanel/ThreadItem/index.tsx +++ b/web/screens/Thread/ThreadLeftPanel/ThreadItem/index.tsx @@ -74,7 +74,7 @@ const ThreadItem: React.FC = ({ thread }) => { transition={{ ease: 'linear', duration: 0.2 }} layoutId={thread.id} className={twMerge( - 'group/message relative mt-1 flex h-[28px] cursor-pointer items-center justify-between rounded-lg pl-2 first:mt-0 hover:bg-[hsla(var(--left-panel-menu-hover))]', + 'group/message relative mr-1.5 mt-1 flex h-[28px] cursor-pointer items-center justify-between rounded-lg pl-2 first:mt-0 hover:bg-[hsla(var(--left-panel-menu-hover))]', activeThreadId === thread.id && 'text-primary bg-[hsla(var(--left-panel-icon-active-bg))] font-medium' )} @@ -96,7 +96,7 @@ const ThreadItem: React.FC = ({ thread }) => {
      { const { setActiveThread } = useThreads() const createThreadMutation = useThreadCreateMutation() - const reduceTransparent = useAtomValue(reduceTransparentAtom) + const selectedModel = useAtomValue(getSelectedModelAtom) const threads = useAtomValue(threadsAtom) @@ -73,7 +72,7 @@ const ThreadLeftPanel: React.FC = () => { return ( -
      +
      )} {!showModel ? ( - ) : ( -
        {models.map((model) => { - const isEngineReady = - engineData?.find((e) => e.name === model.engine)?.status === - EngineStatus.Ready - if (!showModel) return null return (