🐛fix: avoid render html title thread (#5375)

* 🐛fix: avoid render html title thread

* chore: minor bump - tokenjs for manual adding models

---------

Co-authored-by: Louis <louis@jan.ai>

web-app/package.json

@@ -65,7 +65,7 @@
     "remark-math": "^6.0.0",
     "sonner": "^2.0.3",
     "tailwindcss": "^4.1.4",
-    "token.js": "npm:token.js-fork@0.7.5",
+    "token.js": "npm:token.js-fork@0.7.9",
     "tw-animate-css": "^1.2.7",
     "ulidx": "^2.4.1",
     "unified": "^11.0.5",

web-app/src/containers/DropdownModelProvider.tsx

@@ -391,14 +391,9 @@ const DropdownModelProvider = ({
                               )}
                             >
                               <div className="flex items-center gap-2 flex-1 min-w-0">
-                                <span
-                                  className="truncate text-main-view-fg/80 text-sm"
-                                  dangerouslySetInnerHTML={{
-                                    __html:
-                                      searchableModel.highlightedId ||
-                                      searchableModel.model.id,
-                                  }}
-                                />
+                                <span className="truncate text-main-view-fg/80 text-sm">
+                                  {searchableModel.model.id}
+                                </span>
 
                                 <div className="flex-1"></div>
                                 {!isProd && capabilities.length > 0 && (

web-app/src/containers/ThreadList.tsx

@@ -101,9 +101,7 @@ const SortableItem = memo(({ thread }: { thread: Thread }) => {
       )}
     >
       <div className="py-1 pr-2 truncate">
-        <span
-          dangerouslySetInnerHTML={{ __html: thread.title || 'New Thread' }}
-        />
+        <span>{thread.title || 'New Thread'}</span>
       </div>
       <div className="flex items-center">
         <DropdownMenu

web-app/src/hooks/useThreads.ts

@@ -2,7 +2,7 @@ import { create } from 'zustand'
 import { ulid } from 'ulidx'
 import { createThread, deleteThread, updateThread } from '@/services/threads'
 import { Fzf } from 'fzf'
-import { highlightFzfMatch } from '../utils/highlight'
+
 type ThreadState = {
   threads: Record<string, Thread>
   currentThreadId?: string
@@ -68,12 +68,10 @@ export const useThreads = create<ThreadState>()((set, get) => ({
     return fzfResults.map(
       (result: { item: Thread; positions: Set<number> }) => {
         const thread = result.item // Fzf stores the original item here
-        // Ensure result.positions is an array, default to empty if undefined
-        const positions = Array.from(result.positions) || []
-        const highlightedTitle = highlightFzfMatch(thread.title, positions)
+
         return {
           ...thread,
-          title: highlightedTitle, // Override title with highlighted version
+          title: thread.title, // Override title with highlighted version
         }
       }
     )