Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(UI): update experience model dropdown #3342

Merged
merged 4 commits into from
Aug 12, 2024
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
chore(ui)/update-experience-model-dropdown
urmauur committed Aug 12, 2024
commit 02c463d4d1e70bb8767d0f321dec57a752630cfa
1 change: 0 additions & 1 deletion web/containers/CenterPanelContainer/index.tsx
Original file line number Diff line number Diff line change
@@ -17,7 +17,6 @@ const CenterPanelContainer = ({ children }: PropsWithChildren) => {
<div
className={twMerge(
'flex h-full w-full',
!reduceTransparent && 'px-1.5',
mainViewState === MainViewState.Hub && 'pl-0',
!downloadedModels.length &&
mainViewState === MainViewState.Thread &&
Empty file.
99 changes: 79 additions & 20 deletions web/containers/ModelDropdown/ModelSection.tsx
Original file line number Diff line number Diff line change
@@ -1,22 +1,32 @@
import { useCallback, useEffect, useState } from 'react'
import React, { useCallback, useEffect, useState } from 'react'

import Image from 'next/image'

import { EngineStatus, LlmEngine, Model, RemoteEngine } from '@janhq/core'
import {
EngineStatus,
LlmEngine,
LlmEngines,
LocalEngine,
LocalEngines,
Model,
RemoteEngine,
RemoteEngines,
} from '@janhq/core'

import { Button } from '@janhq/joi'
import { useSetAtom } from 'jotai'
import { SettingsIcon } from 'lucide-react'
import { useAtom, useSetAtom } from 'jotai'
import { SettingsIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react'

import { twMerge } from 'tailwind-merge'

import useEngineQuery from '@/hooks/useEngineQuery'
import useGetModelsByEngine from '@/hooks/useGetModelsByEngine'

import { getTitleByCategory } from '@/utils/model-engine'
import { getLogoByLocalEngine, getTitleByCategory } from '@/utils/model-engine'

import ModelLabel from '../ModelLabel'

import { showEngineListModelAtom } from '@/helpers/atoms/Model.atom'
import { setUpRemoteModelStageAtom } from '@/helpers/atoms/SetupRemoteModel.atom'

type Props = {
@@ -35,6 +45,10 @@ const ModelSection: React.FC<Props> = ({
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<Props> = ({
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)
urmauur marked this conversation as resolved.
Show resolved Hide resolved
const showModel = showEngineListModel.includes(engine)

if (models.length === 0) return null

return (
<div className="w-full pt-2">
<div className="w-full border-b border-[hsla(var(--app-border))] py-3 last:border-none">
<div className="flex justify-between pr-2">
<div className="flex gap-2 pl-3">
{!isRemoteEngine && (
<Image
className="h-5 w-5 flex-shrink-0 rounded-full object-cover"
width={40}
height={40}
src={localEngineLogo as string}
alt="logo"
/>
)}
{engineLogo && (
<Image
className="h-5 w-5 flex-shrink-0 rounded-full object-cover"
@@ -71,35 +98,67 @@ const ModelSection: React.FC<Props> = ({
alt="logo"
/>
)}
<h6 className="mb-1 pr-3 font-medium text-[hsla(var(--text-secondary))]">
<h6 className="pr-3 font-medium text-[hsla(var(--text-secondary))]">
{engineName}
</h6>
</div>
<Button theme="icon" onClick={onSettingClick}>
<SettingsIcon
size={14}
className="text-[hsla(var(--text-secondary))]"
/>
</Button>
<div className="flex items-center">
{isRemoteEngine && (
<Button theme="icon" onClick={onSettingClick}>
<SettingsIcon
size={14}
className="text-[hsla(var(--text-secondary))]"
/>
</Button>
)}
{!showModel ? (
<Button
theme="icon"
onClick={() =>
setShowEngineListModel((prev) => [...prev, engine])
}
>
<ChevronDownIcon
size={14}
className="text-[hsla(var(--text-secondary))]"
/>
</Button>
) : (
<Button
theme="icon"
onClick={() =>
setShowEngineListModel((prev) =>
prev.filter((item) => item !== engine)
)
}
>
<ChevronUpIcon
size={14}
className="text-[hsla(var(--text-secondary))]"
/>
</Button>
)}
</div>
</div>
<ul className="pb-2">
<ul>
{models.map((model) => {
const isEngineReady =
engineData?.find((e) => e.name === model.engine)?.status ===
EngineStatus.Ready

if (!showModel) return null

return (
<li
key={model.model}
className={twMerge(
'flex cursor-pointer items-center gap-2 px-3 py-2 hover:bg-[hsla(var(--dropdown-menu-hover-bg))]',
isEngineReady
!isRemoteEngine || isEngineReady
? 'text-[hsla(var(--text-primary))]'
: 'cursor-not-allowed text-[hsla(var(--text-tertiary))]'
: 'pointer-events-none cursor-not-allowed text-[hsla(var(--text-tertiary))]'
)}
onClick={() => {
if (isEngineReady) {
onModelSelected(model)
}
onModelSelected(model)
}}
>
<div className="flex w-full items-center justify-between">
8 changes: 7 additions & 1 deletion web/containers/ModelDropdown/index.tsx
Original file line number Diff line number Diff line change
@@ -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'
10 changes: 9 additions & 1 deletion web/helpers/atoms/Model.atom.ts
Original file line number Diff line number Diff line change
@@ -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<ModelStatus[]>([])

export const showEngineListModelAtom = atom<LlmEngine[]>([...LocalEngines])
15 changes: 15 additions & 0 deletions web/public/icons/llamacpp.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions web/screens/Thread/ThreadLeftPanel/ThreadItem/index.tsx
Original file line number Diff line number Diff line change
@@ -74,7 +74,7 @@ const ThreadItem: React.FC<Props> = ({ 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<Props> = ({ thread }) => {
</div>
<div
className={twMerge(
'absolute bottom-0 right-0 top-0 flex w-[42px] items-center justify-end rounded-r-md'
'absolute bottom-0 right-1.5 top-0 flex w-[42px] items-center justify-end rounded-r-md'
)}
>
<div
5 changes: 2 additions & 3 deletions web/screens/Thread/ThreadLeftPanel/index.tsx
Original file line number Diff line number Diff line change
@@ -22,13 +22,12 @@ import { copyOverInstructionEnabledAtom } from '../ThreadRightPanel/AssistantSet
import ThreadItem from './ThreadItem'

import { getSelectedModelAtom } from '@/helpers/atoms/Model.atom'
import { reduceTransparentAtom } from '@/helpers/atoms/Setting.atom'
import { activeThreadAtom, threadsAtom } from '@/helpers/atoms/Thread.atom'

const ThreadLeftPanel: React.FC = () => {
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 (
<LeftPanelContainer>
<div className={twMerge('pl-1.5 pt-3', reduceTransparent && 'pr-1.5')}>
<div className={twMerge('pl-1.5 pt-3')}>
<Button
className="mb-2"
data-testid="btn-create-thread"
13 changes: 13 additions & 0 deletions web/utils/model-engine.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
import { ModelHubCategory } from '@/hooks/useModelHub'
import { LocalEngine } from '@janhq/core/.'

export const getTitleByCategory = (category: ModelHubCategory) => {
if (!category || !category.length) return ''
switch (category) {
case 'cortex.llamacpp':
return 'llama.cpp'
case 'BuiltInModels':
return 'Built-in Models'
case 'HuggingFace':
@@ -37,3 +40,13 @@ export const getLogoByCategory = (category: ModelHubCategory) => {
return undefined
}
}

export const getLogoByLocalEngine = (engine: LocalEngine) => {
switch (engine) {
case 'cortex.llamacpp':
return 'icons/llamacpp.svg'

default:
return undefined
}
}