🐛fix: setting provider hide model capabilities (#5355)

* 🐛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

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

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 {

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 />

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

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={

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