From 67592f3f45ccd863d704bde1b60826a451b6fbd3 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Thu, 19 Jun 2025 23:08:45 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9Bfix:=20avoid=20render=20html=20titl?=
 =?UTF-8?q?e=20thread=20(#5375)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🐛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                             |  2 +-
 web-app/src/containers/DropdownModelProvider.tsx | 11 +++--------
 web-app/src/containers/ThreadList.tsx            |  4 +---
 web-app/src/hooks/useThreads.ts                  |  8 +++-----
 4 files changed, 8 insertions(+), 17 deletions(-)

diff --git a/web-app/package.json b/web-app/package.json
index ad82e5688..8b3193817 100644
--- a/web-app/package.json
+++ b/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",
diff --git a/web-app/src/containers/DropdownModelProvider.tsx b/web-app/src/containers/DropdownModelProvider.tsx
index 5b125282a..0747a1ad1 100644
--- a/web-app/src/containers/DropdownModelProvider.tsx
+++ b/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 && (
diff --git a/web-app/src/containers/ThreadList.tsx b/web-app/src/containers/ThreadList.tsx
index 0702c1bf9..9e3df65c1 100644
--- a/web-app/src/containers/ThreadList.tsx
+++ b/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
diff --git a/web-app/src/hooks/useThreads.ts b/web-app/src/hooks/useThreads.ts
index f8f990b44..e81b48e8e 100644
--- a/web-app/src/hooks/useThreads.ts
+++ b/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
         }
       }
     )