phpmooc · pull · May 14, 2025 · May 14, 2025 · May 14, 2025 · May 14, 2025
diff --git a/core/src/browser/extensions/model.ts b/core/src/browser/extensions/model.ts
@@ -40,4 +40,9 @@ export abstract class ModelExtension
    * Delete a model source
    */
   abstract deleteSource(source: string): Promise<void>
+
+  /**
+   * Fetch models hub
+   */
+  abstract fetchModelsHub(): Promise<void>
 }
diff --git a/extensions/model-extension/src/index.ts b/extensions/model-extension/src/index.ts
@@ -67,7 +67,7 @@ export default class JanModelExtension extends ModelExtension {
     }
 
     // Sync with cortexsohub
-    this.fetchCortexsoModels()
+    this.fetchModelsHub()
   }
 
   /**
@@ -450,7 +450,7 @@ export default class JanModelExtension extends ModelExtension {
   /**
    * Fetch models from cortex.so
    */
-  private fetchCortexsoModels = async () => {
+  fetchModelsHub = async () => {
     const models = await this.fetchModels()
 
     return this.queue.add(() =>

diff --git a/web/containers/ModelSearch/index.tsx b/web/containers/ModelSearch/index.tsx
@@ -5,12 +5,23 @@ import { SearchIcon } from 'lucide-react'
 
 import { useDebouncedCallback } from 'use-debounce'
 
+import {
+  useGetModelSources,
+  useModelSourcesMutation,
+} from '@/hooks/useModelSource'
+
+import Spinner from '../Loader/Spinner'
+
 type Props = {
+  supportModelImport?: boolean
   onSearchLocal?: (searchText: string) => void
 }
 
-const ModelSearch = ({ onSearchLocal }: Props) => {
+const ModelSearch = ({ supportModelImport, onSearchLocal }: Props) => {
   const [searchText, setSearchText] = useState('')
+  const [isSearching, setSearching] = useState(false)
+  const { mutate } = useGetModelSources()
+  const { addModelSource } = useModelSourcesMutation()
   const inputRef = useRef<HTMLInputElement | null>(null)
   const debounced = useDebouncedCallback(async () => {
     if (searchText.indexOf('/') === -1) {
@@ -20,6 +31,15 @@ const ModelSearch = ({ onSearchLocal }: Props) => {
     }
     // Attempt to search local
     onSearchLocal?.(searchText)
+
+    setSearching(true)
+    // Attempt to search model source
+    if (supportModelImport)
+      addModelSource(searchText)
+        .then(() => mutate())
+        .then(() => onSearchLocal?.(searchText))
+        .catch(console.debug)
+        .finally(() => setSearching(false))
   }, 300)
 
   const >
@@ -50,14 +70,24 @@ const ModelSearch = ({ onSearchLocal }: Props) => {
   return (
     <Input
       ref={inputRef}
-      prefixIcon={<SearchIcon size={16} />}
-      placeholder="Search models..."
+      prefixIcon={
+        isSearching ? (
+          <Spinner size={16} strokeWidth={2} />
+        ) : (
+          <SearchIcon size={16} />
+        )
+      }
+      placeholder={
+        supportModelImport
+          ? 'Search or enter Hugging Face URL'
+          : 'Search models'
+      }
       >
       >
       value={searchText}
       clearable={searchText.length > 0}
       >
-      className="border-1 bg-[hsla(var(--app-bg))]"
+      className="bg-[hsla(var(--app-bg))]"
        => {
         onSearchLocal?.(inputRef.current?.value ?? '')
       }}

diff --git a/web/hooks/useEngineManagement.ts b/web/hooks/useEngineManagement.ts
@@ -12,6 +12,7 @@ import {
   ModelEvent,
   ModelSource,
   ModelSibling,
+  ModelExtension,
 } from '@janhq/core'
 import { useAtom, useAtomValue } from 'jotai'
 import { atomWithStorage } from 'jotai/utils'
@@ -497,3 +498,21 @@ export const useRefreshModelList = (engine: string) => {
 
   return { refreshingModels, refreshModels }
 }
+
+export const useFetchModelsHub = () => {
+  const extension = useMemo(
+    () => extensionManager.get<ModelExtension>(ExtensionTypeEnum.Model) ?? null,
+    []
+  )
+
+  const { data, error, mutate } = useSWR(
+    extension ? 'fetchModelsHub' : null,
+    () => extension?.fetchModelsHub(),
+    {
+      revalidateOnFocus: false,
+      revalidateOnReconnect: true,
+    }
+  )
+
+  return { modelsHub: data, error, mutate }
+}
diff --git a/web/screens/Hub/index.tsx b/web/screens/Hub/index.tsx
@@ -25,7 +25,10 @@
 import CenterPanelContainer from '@/containers/CenterPanelContainer'
 import ModelSearch from '@/containers/ModelSearch'
 
-import { useGetEngineModelSources } from '@/hooks/useEngineManagement'
+import {
+  useFetchModelsHub,
+  useGetEngineModelSources,
+} from '@/hooks/useEngineManagement'
 import { setImportModelStageAtom } from '@/hooks/useImportModel'
 
 import {
@@ -85,6 +88,7 @@
 const HubScreen = () => {
   const { sources } = useGetModelSources()
   const { sources: remoteModelSources } = useGetEngineModelSources()
+  const { mutate: fetchModelsHub } = useFetchModelsHub()
   const { addModelSource } = useModelSourcesMutation()
   const [searchValue, setSearchValue] = useState('')
   const [sortSelected, setSortSelected] = useState('newest')
@@ -149,7 +153,7 @@

      return isCompatible && matchesCtxLen && matchesMinSize && matchesMaxSize
    })
  }, [
    sources,
    compatible,
    ctxLenFilter,
@@ -189,7 +193,7 @@
        )
      )
    }
  }, [largestModel])

  useEffect(() => {
    if (selectedModel) {
@@ -268,6 +272,10 @@
     },
   })
 
+  useEffect(() => {
+    fetchModelsHub()
+  }, [])
+
   return (
     <CenterPanelContainer>
       <m.div
@@ -422,7 +430,10 @@
                 <div className="absolute left-1/2 top-1/2 z-10 mx-auto w-4/5 -translate-x-1/2 -translate-y-1/2 rounded-xl sm:w-2/6">
                   <div className="flex flex-col items-center justify-between gap-2 sm:flex-row">
                     <div className="w-full" ref={dropdownRef}>
-                      <ModelSearch  />
+                      <ModelSearch
+                        >
+                        supportModelImport
+                      />
                       <div
                         className={twMerge(
                           'invisible absolute mt-2 max-h-[400px] w-full overflow-y-auto rounded-lg border border-[hsla(var(--app-border))] bg-[hsla(var(--app-bg))] shadow-lg',

diff --git a/web/utils/messageRequestBuilder.ts b/web/utils/messageRequestBuilder.ts
@@ -155,7 +155,8 @@ export class MessageRequestBuilder {
     const stack = new Stack<ChatCompletionMessage>()
     for (const message of messages) {
       // Handle message content such as reasoning tags
-      message.content = this.reasoningTagHandle(message)
+      if (message.role === ChatCompletionRole.Assistant)
+        message.content = this.reasoningTagHandle(message)
       if (stack.isEmpty()) {
         stack.push(message)
         continue