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 @@ -50,18 +67,55 @@ const ModelSection: React.FC = ({ }) }, [apiKeyUrl, engine, engineLogo, setUpRemoteModelStage]) + const isEngineReady = + engineData?.find((e) => e.name === engine)?.status === EngineStatus.Ready + + const getEngineStatusReady: LlmEngine[] | undefined = engineData + ?.filter((e) => e.status === EngineStatus.Ready) + .map((x) => x.name as LlmEngine) + + const showModel = showEngineListModel.includes(engine) + + const onClickChevron = useCallback(() => { + if (showModel) { + setShowEngineListModel((prev) => prev.filter((item) => item !== engine)) + } else { + setShowEngineListModel((prev) => [...prev, engine]) + } + }, [engine, setShowEngineListModel, showModel]) + useEffect(() => { const matchedModels = getModelsByEngine(engine, searchText) setModels(matchedModels) - }, [getModelsByEngine, engine, searchText]) + setShowEngineListModel((prev) => [ + ...prev, + ...(getEngineStatusReady as LlmEngine[]), + ]) + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [getModelsByEngine, engine, searchText, setShowEngineListModel]) - if (models.length === 0) return null const engineName = getTitleByCategory(engine) + const localEngineLogo = getLogoByLocalEngine(engine as LocalEngine) + const isRemoteEngine = RemoteEngines.includes(engine as RemoteEngine) + + 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/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 ( -
      +