From 5b60116d218c15a49b6a5ee6eab3dcc1a16ee727 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Wed, 18 Jun 2025 21:48:18 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9Bfix:=20setting=20provider=20hide=20?=
 =?UTF-8?q?model=20capabilities=20(#5355)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🐛fix: setting provider hide model capabilities

* 🐛fix: hide tools icon on dropdown model providers

* fix: stop server on app close or reload

* ✨enhancement: reset heading class

---------

Co-authored-by: Louis <louis@jan.ai>
---
 web-app/src/containers/DropdownModelProvider.tsx        | 3 ++-
 web-app/src/index.css                                   | 9 +++++++++
 web-app/src/routes/__root.tsx                           | 8 ++++++++
 web-app/src/routes/hub.tsx                              | 2 +-
 web-app/src/routes/settings/providers/$providerName.tsx | 4 +++-
 web-app/src/services/providers.ts                       | 3 +--
 6 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/web-app/src/containers/DropdownModelProvider.tsx b/web-app/src/containers/DropdownModelProvider.tsx
index 6d5d24155..5b125282a 100644
--- a/web-app/src/containers/DropdownModelProvider.tsx
+++ b/web-app/src/containers/DropdownModelProvider.tsx
@@ -16,6 +16,7 @@ import { ModelSetting } from '@/containers/ModelSetting'
 import ProvidersAvatar from '@/containers/ProvidersAvatar'
 import { Fzf } from 'fzf'
 import { localStorageKey } from '@/constants/localStorage'
+import { isProd } from '@/lib/version'
 
 type DropdownModelProviderProps = {
   model?: ThreadModel
@@ -400,7 +401,7 @@ const DropdownModelProvider = ({
                                 />
 
                                 <div className="flex-1"></div>
-                                {capabilities.length > 0 && (
+                                {!isProd && capabilities.length > 0 && (
                                   <div className="flex-shrink-0 -mr-1.5">
                                     <Capabilities capabilities={capabilities} />
                                   </div>
diff --git a/web-app/src/index.css b/web-app/src/index.css
index 185cb0612..d8ae284e9 100644
--- a/web-app/src/index.css
+++ b/web-app/src/index.css
@@ -79,6 +79,15 @@
   ::-ms-reveal {
     display: none;
   }
+
+  .reset-heading {
+    :is(h1, h2, h3, h4, h5, h6) {
+      font-weight: 600;
+      font-size: 14px !important;
+      margin-top: 0 !important;
+      margin-bottom: 0.5em;
+    }
+  }
 }
 
 @layer utilities {
diff --git a/web-app/src/routes/__root.tsx b/web-app/src/routes/__root.tsx
index 67e88ed90..6f6099cbb 100644
--- a/web-app/src/routes/__root.tsx
+++ b/web-app/src/routes/__root.tsx
@@ -18,6 +18,7 @@ import { AnalyticProvider } from '@/providers/AnalyticProvider'
 import { useLeftPanel } from '@/hooks/useLeftPanel'
 import { cn } from '@/lib/utils'
 import ToolApproval from '@/containers/dialogs/ToolApproval'
+import { useEffect } from 'react'
 
 export const Route = createRootRoute({
   component: RootLayout,
@@ -82,6 +83,13 @@ function RootLayout() {
     router.location.pathname === route.systemMonitor ||
     router.location.pathname === route.appLogs
 
+  useEffect(() => {
+    return () => {
+      // This is to attempt to stop the local API server when the app is closed or reloaded.
+      window.core?.api?.stopServer()
+    }
+  }, [])
+
   return (
     <Fragment>
       <ThemeProvider />
diff --git a/web-app/src/routes/hub.tsx b/web-app/src/routes/hub.tsx
index 42147d0f8..3bca8649f 100644
--- a/web-app/src/routes/hub.tsx
+++ b/web-app/src/routes/hub.tsx
@@ -495,7 +495,7 @@ function Hub() {
                         <div className="line-clamp-2 mt-3 text-main-view-fg/60">
                           <RenderMarkdown
                             enableRawHtml={true}
-                            className="select-none"
+                            className="select-none reset-heading"
                             components={{
                               a: ({ ...props }) => (
                                 <a
diff --git a/web-app/src/routes/settings/providers/$providerName.tsx b/web-app/src/routes/settings/providers/$providerName.tsx
index 3d8f67af5..2daa496b7 100644
--- a/web-app/src/routes/settings/providers/$providerName.tsx
+++ b/web-app/src/routes/settings/providers/$providerName.tsx
@@ -455,7 +455,9 @@ function ProviderDetail() {
                           title={
                             <div className="flex items-center gap-2">
                               <h1 className="font-medium">{model.id}</h1>
-                              <Capabilities capabilities={capabilities} />
+                              {!isProd && (
+                                <Capabilities capabilities={capabilities} />
+                              )}
                             </div>
                           }
                           actions={
diff --git a/web-app/src/services/providers.ts b/web-app/src/services/providers.ts
index 517d2c5f0..6bd2b63f0 100644
--- a/web-app/src/services/providers.ts
+++ b/web-app/src/services/providers.ts
@@ -13,7 +13,6 @@ import {
 import { modelSettings } from '@/lib/predefined'
 import { fetchModels } from './models'
 import { ExtensionManager } from '@/lib/extension'
-import { isProd } from '@/lib/version'
 
 export const getProviders = async (): Promise<ModelProvider[]> => {
   const engines = !localStorage.getItem('migration_completed')
@@ -66,7 +65,7 @@ export const getProviders = async (): Promise<ModelProvider[]> => {
           ].filter(Boolean) as string[]
           return {
             ...(modelManifest ?? { id: model, name: model }),
-            ...(!isProd ? { capabilities } : {}),
+            capabilities,
           } as Model
         })
     }