chore: open URL from model detail page should open in an external browser (#4611)

* chore: open URL from model detail page should open in an external browser

* chore: remove unused param

web/screens/Hub/ModelList/ModelHeader/index.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from 'react'
+import { useCallback, useMemo } from 'react'
 
 import { ModelSource } from '@janhq/core'
 
@@ -20,6 +20,8 @@ import { toGigabytes } from '@/utils/converter'
 
 import { extractModelName } from '@/utils/modelSource'
 
+import { fuzzySearch } from '@/utils/search'
+
 import { mainViewStateAtom } from '@/helpers/atoms/App.atom'
 import { assistantsAtom } from '@/helpers/atoms/Assistant.atom'
 import { serverEnabledAtom } from '@/helpers/atoms/LocalServer.atom'
@@ -66,6 +68,11 @@ const ModelItemHeader = ({ model, onSelectedModel }: Props) => {
   const isDownloaded = downloadedModels.some((md) =>
     model.models.some((m) => m.id === md.id)
   )
+  const defaultModel = useMemo(() => {
+    return model.models?.find(
+      (e) => e.id.includes('q4-km') || fuzzySearch('q4km', e.id)
+    )
+  }, [model])
 
   let downloadButton = (
     <div className="group flex h-8 cursor-pointer items-center justify-center rounded-md bg-[hsla(var(--primary-bg))]">
@@ -76,19 +83,21 @@ const ModelItemHeader = ({ model, onSelectedModel }: Props) => {
         <span className="mx-4 font-medium text-white">Download</span>
       </div>
       <Dropdown
-        className="z-50 max-h-[240px] min-w-[240px] max-w-[320px] overflow-y-auto border border-[hsla(var(--app-border))] bg-[hsla(var(--app-bg))] shadow"
+        className="z-50 min-w-[240px]"
         options={model.models?.map((e) => ({
           name: (
             <div className="flex space-x-2">
               <span className="line-clamp-1 max-w-[340px] font-normal">
                 {e.id}
               </span>
+              {e.id === defaultModel?.id && (
                 <Badge
                   theme="secondary"
                   className="inline-flex w-[60px] items-center font-medium"
                 >
                   <span>Default</span>
                 </Badge>
+              )}
             </div>
           ),
           value: e.id,

web/screens/Hub/ModelList/ModelItem/index.tsx

@@ -10,6 +10,8 @@ import ModelLabel from '@/containers/ModelLabel'
 
 import ModelItemHeader from '@/screens/Hub/ModelList/ModelHeader'
 
+import { markdownComponents } from '@/screens/Thread/ThreadCenterPanel/TextMessage/MarkdownUtils'
+
 import { toGigabytes } from '@/utils/converter'
 import { extractDescription } from '@/utils/modelSource'
 import '@/styles/components/model.scss'
@@ -31,7 +33,10 @@ const ModelItem: React.FC<Props> = ({ model, onSelectedModel }) => {
             <ModelLabel size={model.models?.[0]?.size} />
           </div>
           <div className="flex flex-col">
-            <Markdown className="md-short-desc line-clamp-3 max-w-full overflow-hidden font-light text-[hsla(var(--text-secondary))]">
+            <Markdown
+              className="md-short-desc line-clamp-3 max-w-full overflow-hidden font-light text-[hsla(var(--text-secondary))]"
+              components={markdownComponents}
+            >
               {extractDescription(model.metadata?.description) || '-'}
             </Markdown>
           </div>

web/screens/Thread/ThreadCenterPanel/TextMessage/MarkdownTextMessage.tsx

@@ -20,6 +20,8 @@ import { useClipboard } from '@/hooks/useClipboard'
 
 import { getLanguageFromExtension } from '@/utils/codeLanguageExtension'
 
+import { markdownComponents } from './MarkdownUtils'
+
 interface Props {
   text: string
   isUser?: boolean
@@ -222,6 +224,7 @@ export const MarkdownTextMessage = memo(
               wrapCodeBlocksWithoutVisit,
             ].filter((e) => !!e) as PluggableList
           }
+          components={markdownComponents}
         >
           {preprocessMarkdown(text)}
         </Markdown>

web/screens/Thread/ThreadCenterPanel/TextMessage/MarkdownUtils.tsx

@@ -0,0 +1,14 @@
+import { Components } from 'react-markdown'
+
+export const markdownComponents: Partial<Components> = {
+  a: ({ href, children, ...props }) => (
+    <a
+      target="_blank"
+      href={href}
+      className="text-[hsla(var(--app-link))]"
+      {...props}
+    >
+      {children}
+    </a>
+  ),
+}