Merge pull request #7060 from Lokimorty/hub-new-chat-button

Vanalite · web-flow · commit 0c7ecbdd1ed2 · 2025-12-01T18:38:13.000+07:00
fix: improve Hub download button UX for installed models
diff --git a/web-app/src/containers/DownloadButton.tsx b/web-app/src/containers/DownloadButton.tsx
@@ -137,11 +137,15 @@ export function DownloadButtonPlaceholder({
       )}
       {isDownloaded ? (
         <Button
+          variant="link"
           size="sm"
+          className="p-0"
           onClick={() => handleUseModel(modelId)}
           data-test-id={`hub-model-${modelId}`}
         >
-          {t('hub:use')}
+          <div className="rounded-sm hover:bg-main-view-fg/15 bg-main-view-fg/10 transition-all duration-200 ease-in-out px-2 py-1">
+            {t('hub:newChat')}
+          </div>
         </Button>
       ) : (
         <Button
diff --git a/web-app/src/containers/ModelDownloadAction.tsx b/web-app/src/containers/ModelDownloadAction.tsx
@@ -79,18 +79,17 @@ export const ModelDownloadAction = ({
 
   if (isDownloaded) {
     return (
-      <div
-        className="flex items-center justify-center rounded bg-main-view-fg/10"
+      <Button
+        variant="link"
+        size="sm"
+        className="p-0"
+        onClick={() => handleUseModel(variant.model_id)}
         title={t('hub:useModel')}
       >
-        <Button
-          variant="link"
-          size="sm"
-          onClick={() => handleUseModel(variant.model_id)}
-        >
-          {t('hub:use')}
-        </Button>
-      </div>
+        <div className="rounded-sm hover:bg-main-view-fg/15 bg-main-view-fg/10 transition-all duration-200 ease-in-out px-2 py-1">
+          {t('hub:newChat')}
+        </div>
+      </Button>
     )
   }
 
diff --git a/web-app/src/locales/cs/hub.json b/web-app/src/locales/cs/hub.json
@@ -1,7 +1,7 @@
 {
   "sortNewest": "Newest",
   "sortMostDownloaded": "Most downloaded",
-  "use": "Use",
+  "newChat": "Nový chat",
   "download": "Download",
   "downloaded": "Downloaded",
   "loadingModels": "Loading models...",
diff --git a/web-app/src/locales/de-DE/hub.json b/web-app/src/locales/de-DE/hub.json
@@ -1,7 +1,7 @@
 {
   "sortNewest": "Neueste",
   "sortMostDownloaded": "Meist heruntergeladen",
-  "use": "Nutzen",
+  "newChat": "Neuer Chat",
   "download": "Herunterladen",
   "downloaded": "Heruntergeladen",
   "loadingModels": "Lade Modelle...",
diff --git a/web-app/src/locales/en/hub.json b/web-app/src/locales/en/hub.json
@@ -1,7 +1,7 @@
 {
   "sortNewest": "Newest",
   "sortMostDownloaded": "Most downloaded",
-  "use": "Use",
+  "newChat": "New chat",
   "download": "Download",
   "downloaded": "Downloaded",
   "loadingModels": "Loading models...",
diff --git a/web-app/src/locales/fr/hub.json b/web-app/src/locales/fr/hub.json
@@ -1,7 +1,7 @@
 {
   "sortNewest": "Le plus récent",
   "sortMostDownloaded": "Le plus téléchargé",
-  "use": "Utiliser",
+  "newChat": "Nouvelle conversation",
   "download": "Télécharger",
   "downloaded": "Téléchargé",
   "loadingModels": "Chargement des modèles...",
diff --git a/web-app/src/locales/id/hub.json b/web-app/src/locales/id/hub.json
@@ -1,7 +1,7 @@
 {
   "sortNewest": "Terbaru",
   "sortMostDownloaded": "Paling Banyak Diunduh",
-  "use": "Gunakan",
+  "newChat": "Chat baru",
   "download": "Unduh",
   "downloaded": "Telah Diunduh",
   "loadingModels": "Memuat model...",
diff --git a/web-app/src/locales/ja/hub.json b/web-app/src/locales/ja/hub.json
@@ -1,7 +1,7 @@
 {
   "sortNewest": "新着順",
   "sortMostDownloaded": "ダウンロード数順",
-  "use": "使用",
+  "newChat": "新しいチャット",
   "download": "ダウンロード",
   "downloaded": "ダウンロード済み",
   "loadingModels": "モデルを読み込み中...",
diff --git a/web-app/src/locales/pl/hub.json b/web-app/src/locales/pl/hub.json
@@ -1,7 +1,7 @@
 {
   "sortNewest": "Najnowsze",
   "sortMostDownloaded": "Najczęściej pobierane",
-  "use": "Użyj",
+  "newChat": "Nowy czat",
   "download": "Pobierz",
   "downloaded": "Pobrany",
   "loadingModels": "Wczytywanie modeli…",
diff --git a/web-app/src/locales/pt-BR/hub.json b/web-app/src/locales/pt-BR/hub.json
@@ -1,7 +1,7 @@
 {
   "sortNewest": "Mais Recentes",
   "sortMostDownloaded": "Mais Baixados",
-  "use": "Usar",
+  "newChat": "Nova conversa",
   "download": "Baixar",
   "downloaded": "Baixado",
   "loadingModels": "Carregando modelos...",
diff --git a/web-app/src/locales/ru/hub.json b/web-app/src/locales/ru/hub.json
@@ -1,7 +1,7 @@
 {
   "sortNewest": "Самые новые",
   "sortMostDownloaded": "Наиболее загружаемые",
-  "use": "Использовать",
+  "newChat": "Новый чат",
   "download": "Загрузить",
   "downloaded": "Загруженные",
   "loadingModels": "Загрузка моделей…",
diff --git a/web-app/src/locales/vn/hub.json b/web-app/src/locales/vn/hub.json
@@ -1,7 +1,7 @@
 {
   "sortNewest": "Mới nhất",
   "sortMostDownloaded": "Tải nhiều nhất",
-  "use": "Sử dụng",
+  "newChat": "Cuộc trò chuyện mới",
   "download": "Tải xuống",
   "downloaded": "Đã tải xuống",
   "loadingModels": "Đang tải mô hình...",
diff --git a/web-app/src/locales/zh-CN/hub.json b/web-app/src/locales/zh-CN/hub.json
@@ -1,7 +1,7 @@
 {
   "sortNewest": "最新",
   "sortMostDownloaded": "最多下载",
-  "use": "使用",
+  "newChat": "新对话",
   "download": "下载",
   "downloaded": "已下载",
   "loadingModels": "正在加载模型...",
diff --git a/web-app/src/locales/zh-TW/hub.json b/web-app/src/locales/zh-TW/hub.json
@@ -1,7 +1,7 @@
 {
   "sortNewest": "最新",
   "sortMostDownloaded": "最多下載",
-  "use": "使用",
+  "newChat": "新對話",
   "download": "下載",
   "downloaded": "已下載",
   "loadingModels": "正在載入模型...",
diff --git a/web-app/src/routes/hub/$modelId.tsx b/web-app/src/routes/hub/$modelId.tsx
@@ -27,6 +27,7 @@ import { Button } from '@/components/ui/button'
 import { cn } from '@/lib/utils'
 import { useGeneralSetting } from '@/hooks/useGeneralSetting'
 import { ModelInfoHoverCard } from '@/containers/ModelInfoHoverCard'
+import { useTranslation } from '@/i18n'
 
 type SearchParams = {
   repo: string
@@ -50,6 +51,7 @@ function HubModelDetail() {
 }
 
 function HubModelDetailContent() {
+  const { t } = useTranslation()
   const { modelId } = useParams({ from: Route.id })
   const navigate = useNavigate()
   const { huggingfaceToken } = useGeneralSetting()
@@ -456,12 +458,16 @@ function HubModelDetailContent() {
                                   if (isDownloaded) {
                                     return (
                                       <Button
+                                        variant="link"
                                         size="sm"
+                                        className="p-0"
                                         onClick={() =>
                                           handleUseModel(variant.model_id)
                                         }
                                       >
-                                        Use
+                                        <div className="rounded-sm hover:bg-main-view-fg/15 bg-main-view-fg/10 transition-all duration-200 ease-in-out px-2 py-1">
+                                          {t('hub:newChat')}
+                                        </div>
                                       </Button>
                                     )
                                   }

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"sortNewest": "Newest",`
`3`	`3`	`"sortMostDownloaded": "Most downloaded",`
`4`		`- "use": "Use",`
	`4`	`+ "newChat": "Nový chat",`
`5`	`5`	`"download": "Download",`
`6`	`6`	`"downloaded": "Downloaded",`
`7`	`7`	`"loadingModels": "Loading models...",`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"sortNewest": "Neueste",`
`3`	`3`	`"sortMostDownloaded": "Meist heruntergeladen",`
`4`		`- "use": "Nutzen",`
	`4`	`+ "newChat": "Neuer Chat",`
`5`	`5`	`"download": "Herunterladen",`
`6`	`6`	`"downloaded": "Heruntergeladen",`
`7`	`7`	`"loadingModels": "Lade Modelle...",`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"sortNewest": "Le plus récent",`
`3`	`3`	`"sortMostDownloaded": "Le plus téléchargé",`
`4`		`- "use": "Utiliser",`
	`4`	`+ "newChat": "Nouvelle conversation",`
`5`	`5`	`"download": "Télécharger",`
`6`	`6`	`"downloaded": "Téléchargé",`
`7`	`7`	`"loadingModels": "Chargement des modèles...",`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"sortNewest": "Terbaru",`
`3`	`3`	`"sortMostDownloaded": "Paling Banyak Diunduh",`
`4`		`- "use": "Gunakan",`
	`4`	`+ "newChat": "Chat baru",`
`5`	`5`	`"download": "Unduh",`
`6`	`6`	`"downloaded": "Telah Diunduh",`
`7`	`7`	`"loadingModels": "Memuat model...",`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"sortNewest": "新着順",`
`3`	`3`	`"sortMostDownloaded": "ダウンロード数順",`
`4`		`- "use": "使用",`
	`4`	`+ "newChat": "新しいチャット",`
`5`	`5`	`"download": "ダウンロード",`
`6`	`6`	`"downloaded": "ダウンロード済み",`
`7`	`7`	`"loadingModels": "モデルを読み込み中...",`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"sortNewest": "Najnowsze",`
`3`	`3`	`"sortMostDownloaded": "Najczęściej pobierane",`
`4`		`- "use": "Użyj",`
	`4`	`+ "newChat": "Nowy czat",`
`5`	`5`	`"download": "Pobierz",`
`6`	`6`	`"downloaded": "Pobrany",`
`7`	`7`	`"loadingModels": "Wczytywanie modeli…",`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"sortNewest": "Mais Recentes",`
`3`	`3`	`"sortMostDownloaded": "Mais Baixados",`
`4`		`- "use": "Usar",`
	`4`	`+ "newChat": "Nova conversa",`
`5`	`5`	`"download": "Baixar",`
`6`	`6`	`"downloaded": "Baixado",`
`7`	`7`	`"loadingModels": "Carregando modelos...",`