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>

web-app/src/containers/DropdownAssistant.tsx

@@ -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)

web-app/src/containers/DropdownModelProvider.tsx

@@ -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 } =
+  const {
-    useModelProvider()
+    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>
+    </>
   )
 }
 

web-app/src/containers/ModelSetting.tsx

@@ -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>
             )

web-app/src/routes/hub.tsx

@@ -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..."

web-app/src/routes/settings/providers/$providerName.tsx

@@ -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}