feat: add quick access model setting via dropdown model (#5104)
* feat: add quick access model setting via dropdown model * Update web-app/src/containers/DropdownModelProvider.tsx Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com> --------- Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com>
This commit is contained in:
Faisal Amir
GitHub
parent
83464b367f
commit
8afb962739
@ -33,9 +33,9 @@ const DropdownAssistant = () => {
|
||||
return (
|
||||
<>
|
||||
<DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
|
||||
<div className="flex items-center justify-between gap-1">
|
||||
<div className="flex items-center justify-between gap-2 bg-main-view-fg/5 py-1 hover:bg-main-view-fg/8 px-2 rounded-sm">
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button className="bg-main-view-fg/5 py-1 hover:bg-main-view-fg/8 px-2 rounded font-medium cursor-pointer flex items-center gap-1.5 relative z-20 max-w-40">
|
||||
<button className="font-medium cursor-pointer flex items-center gap-1.5 relative z-20 max-w-40">
|
||||
<div className="text-main-view-fg/80 flex items-center gap-1">
|
||||
{selectedAssistant?.avatar && (
|
||||
<span className="shrink-0 w-4 h-4 relative flex items-center justify-center">
|
||||
@ -75,10 +75,13 @@ const DropdownAssistant = () => {
|
||||
align="start"
|
||||
>
|
||||
{assistants.map((assistant) => (
|
||||
<div className="relative pr-6" key={assistant.id}>
|
||||
<DropdownMenuItem asChild>
|
||||
<div
|
||||
className="text-main-view-fg/70 cursor-pointer"
|
||||
className="relative pr-6 hover:bg-main-view-fg/4 rounded-sm"
|
||||
key={assistant.id}
|
||||
>
|
||||
<DropdownMenuItem className="hover:bg-transparent">
|
||||
<div
|
||||
className="text-main-view-fg/70 cursor-pointer flex gap-2"
|
||||
onClick={() => {
|
||||
setCurrentAssistant(assistant)
|
||||
updateCurrentThreadAssistant(assistant)
|
||||
|
||||
@ -14,14 +14,20 @@ import { IconSettings } from '@tabler/icons-react'
|
||||
import { useNavigate } from '@tanstack/react-router'
|
||||
import { route } from '@/constants/routes'
|
||||
import { useThreads } from '@/hooks/useThreads'
|
||||
import { ModelSetting } from '@/containers/ModelSetting'
|
||||
|
||||
type DropdownModelProviderProps = {
|
||||
model?: ThreadModel
|
||||
}
|
||||
|
||||
const DropdownModelProvider = ({ model }: DropdownModelProviderProps) => {
|
||||
const { providers, selectModelProvider, selectedProvider, selectedModel } =
|
||||
useModelProvider()
|
||||
const {
|
||||
providers,
|
||||
getProviderByName,
|
||||
selectModelProvider,
|
||||
selectedProvider,
|
||||
selectedModel,
|
||||
} = useModelProvider()
|
||||
const [displayModel, setDisplayModel] = useState<string>('')
|
||||
const { updateCurrentThreadModel } = useThreads()
|
||||
const navigate = useNavigate()
|
||||
@ -48,12 +54,17 @@ const DropdownModelProvider = ({ model }: DropdownModelProviderProps) => {
|
||||
|
||||
if (!providers.length) return null
|
||||
|
||||
|
||||
const provider = getProviderByName(selectedProvider)
|
||||
|
||||
return (
|
||||
<>
|
||||
<DropdownMenu>
|
||||
<div className="bg-main-view-fg/5 hover:bg-main-view-fg/8 px-2 py-1 flex items-center gap-1.5 rounded-sm">
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button
|
||||
title={displayModel}
|
||||
className="bg-main-view-fg/5 hover:bg-main-view-fg/8 px-2 py-1 rounded font-medium cursor-pointer flex items-center gap-1.5 relative z-20 max-w-40"
|
||||
className="font-medium cursor-pointer flex items-center gap-1.5 relative z-20 max-w-38"
|
||||
>
|
||||
<img
|
||||
src={getProviderLogo(selectedProvider as string)}
|
||||
@ -70,6 +81,13 @@ const DropdownModelProvider = ({ model }: DropdownModelProviderProps) => {
|
||||
</span>
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
{selectedModel && (
|
||||
<ModelSetting
|
||||
model={selectedModel as Model}
|
||||
provider={provider as ProviderObject}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<DropdownMenuContent
|
||||
className="w-60 max-h-[320px]"
|
||||
side="bottom"
|
||||
@ -94,7 +112,7 @@ const DropdownModelProvider = ({ model }: DropdownModelProviderProps) => {
|
||||
alt={`${provider.provider} - Logo`}
|
||||
className="size-4"
|
||||
/>
|
||||
<span className="capitalize truncate">
|
||||
<span className="capitalize truncate text-sm">
|
||||
{getProviderTitle(provider.provider)}
|
||||
</span>
|
||||
</DropdownMenuLabel>
|
||||
@ -107,7 +125,10 @@ const DropdownModelProvider = ({ model }: DropdownModelProviderProps) => {
|
||||
})
|
||||
}
|
||||
>
|
||||
<IconSettings size={18} className="text-main-view-fg/50" />
|
||||
<IconSettings
|
||||
size={18}
|
||||
className="text-main-view-fg/50"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -149,6 +170,7 @@ const DropdownModelProvider = ({ model }: DropdownModelProviderProps) => {
|
||||
</DropdownMenuGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -13,12 +13,6 @@ import { useModelProvider } from '@/hooks/useModelProvider'
|
||||
import { updateModel } from '@/services/models'
|
||||
import { ModelSettingParams } from '@janhq/core'
|
||||
|
||||
// import {
|
||||
// HoverCard,
|
||||
// HoverCardContent,
|
||||
// HoverCardTrigger,
|
||||
// } from '@/components/ui/hover-card'
|
||||
|
||||
type ModelSettingProps = {
|
||||
provider: ProviderObject
|
||||
model: Model
|
||||
@ -91,10 +85,10 @@ export function ModelSetting({ model, provider }: ModelSettingProps) {
|
||||
const config = value as ProviderSetting
|
||||
return (
|
||||
<div key={key} className="space-y-2">
|
||||
<div className="flex flex-col">
|
||||
<div className="flex items-start justify-between gap-8">
|
||||
<div className="space-y-1 mb-2">
|
||||
<h3 className="font-medium">{config.title}</h3>
|
||||
<p className="text-main-view-fg/60 text-xs">
|
||||
<p className="text-main-view-fg/70 text-xs">
|
||||
{config.description}
|
||||
</p>
|
||||
</div>
|
||||
@ -109,38 +103,6 @@ export function ModelSetting({ model, provider }: ModelSettingProps) {
|
||||
}}
|
||||
onChange={(newValue) => handleSettingChange(key, newValue)}
|
||||
/>
|
||||
{/* <div className="mt-2">
|
||||
<HoverCard openDelay={200}>
|
||||
<HoverCardTrigger asChild>
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<label htmlFor={config.key}>{config.title}</label>
|
||||
</div>
|
||||
<DynamicControllerSetting
|
||||
key={config.key}
|
||||
title={config.title}
|
||||
description={config.description}
|
||||
controllerType={config.controller_type}
|
||||
controllerProps={{
|
||||
...config.controller_props,
|
||||
value: value,
|
||||
}}
|
||||
onChange={(newValue) =>
|
||||
handleSettingChange(key, newValue)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</HoverCardTrigger>
|
||||
<HoverCardContent
|
||||
align="start"
|
||||
className="w-[260px] text-sm"
|
||||
side="left"
|
||||
sideOffset={24}
|
||||
>
|
||||
{config.description}
|
||||
</HoverCardContent>
|
||||
</HoverCard>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -163,7 +163,7 @@ function Hub() {
|
||||
<div className="flex flex-col h-full w-full">
|
||||
<HeaderPage>
|
||||
<div className="pr-4 py-3 border-b border-main-view-fg/5 h-10 w-full flex items-center justify-between relative z-20 ">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-2 w-full pr-4">
|
||||
<IconSearch className="text-main-view-fg/60" size={14} />
|
||||
<input
|
||||
placeholder="Search models..."
|
||||
|
||||
@ -300,7 +300,7 @@ function ProviderDetail() {
|
||||
</div>
|
||||
}
|
||||
actions={
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-1">
|
||||
<DialogEditModel
|
||||
provider={provider}
|
||||
modelId={model.id}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user