From 51f8c96a5752a80dc8bfc05c64fae0f6b0283009 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Tue, 25 Feb 2025 14:37:15 +0700
Subject: [PATCH] chore: update hub UI  (#4734)

* chore: update hub ui based feedback

* chore: update hub ui

* chore: code block ui

* chore: update bg color

* chore: decrease margin codeblock
---
 web/containers/ModelDownloadButton/index.tsx  |  8 +++++--
 .../Hub/ModelList/ModelHeader/index.tsx       | 23 +++++++++++++++++--
 web/screens/Hub/ModelPage/index.tsx           | 12 +++++++++-
 web/screens/Hub/index.tsx                     |  4 ++--
 .../TextMessage/MarkdownTextMessage.tsx       |  1 -
 web/styles/components/code-block.scss         |  1 -
 web/styles/components/marked.scss             |  2 ++
 web/styles/components/message.scss            |  6 +++++
 8 files changed, 48 insertions(+), 9 deletions(-)

diff --git a/web/containers/ModelDownloadButton/index.tsx b/web/containers/ModelDownloadButton/index.tsx
index 946c2b2f8..9555582fa 100644
--- a/web/containers/ModelDownloadButton/index.tsx
+++ b/web/containers/ModelDownloadButton/index.tsx
@@ -3,6 +3,8 @@ import { useCallback, useMemo } from 'react'
 import { Button, Tooltip } from '@janhq/joi'
 import { useAtomValue, useSetAtom } from 'jotai'
 
+import { twMerge } from 'tailwind-merge'
+
 import { MainViewState } from '@/constants/screens'
 
 import { useCreateNewThread } from '@/hooks/useCreateNewThread'
@@ -22,8 +24,9 @@ interface Props {
   id: string
   theme?: 'primary' | 'ghost' | 'icon' | 'destructive' | undefined
   variant?: 'solid' | 'soft' | 'outline' | undefined
+  className?: string
 }
-const ModelDownloadButton = ({ id, theme, variant }: Props) => {
+const ModelDownloadButton = ({ id, theme, variant, className }: Props) => {
   const { downloadModel } = useDownloadModel()
   const downloadingModels = useAtomValue(getDownloadingModelAtom)
   const downloadedModels = useAtomValue(downloadedModelsAtom)
@@ -59,7 +62,8 @@ const ModelDownloadButton = ({ id, theme, variant }: Props) => {
   const defaultButton = (
     <Button
       theme={theme ? theme : 'primary'}
-      variant={variant ? variant : 'solid'}
+      // variant={variant ? variant : 'solid'}
+      className={twMerge('min-w-[70px]', className)}
       onClick={(e) => {
         e.stopPropagation()
         onDownloadClick()
diff --git a/web/screens/Hub/ModelList/ModelHeader/index.tsx b/web/screens/Hub/ModelList/ModelHeader/index.tsx
index 43bbe9033..7bfc81dbc 100644
--- a/web/screens/Hub/ModelList/ModelHeader/index.tsx
+++ b/web/screens/Hub/ModelList/ModelHeader/index.tsx
@@ -1,12 +1,16 @@
 import { useCallback, useMemo } from 'react'
 
-import { ModelSource } from '@janhq/core'
+import Image from 'next/image'
+
+import { InferenceEngine, ModelSource } from '@janhq/core'
 
 import { Button, Tooltip, Dropdown, Badge } from '@janhq/joi'
 
 import { useAtomValue, useSetAtom } from 'jotai'
 import { ChevronDownIcon } from 'lucide-react'
 
+import { twMerge } from 'tailwind-merge'
+
 import ModalCancelDownload from '@/containers/ModalCancelDownload'
 
 import { MainViewState } from '@/constants/screens'
@@ -18,6 +22,7 @@ import { useSettings } from '@/hooks/useSettings'
 
 import { toGigabytes } from '@/utils/converter'
 
+import { getLogoEngine } from '@/utils/modelEngine'
 import { extractModelName } from '@/utils/modelSource'
 
 import { fuzzySearch } from '@/utils/search'
@@ -167,9 +172,23 @@ const ModelItemHeader = ({ model, onSelectedModel }: Props) => {
       <div className="flex items-center justify-between py-2">
         <div className="group flex cursor-pointer items-center gap-2">
           <span
-            className="line-clamp-1 text-base font-medium capitalize group-hover:text-blue-500 group-hover:underline"
+            className={twMerge(
+              'line-clamp-1 text-base font-medium capitalize group-hover:text-blue-500 group-hover:underline',
+              model.type === 'cloud' && 'flex items-center gap-x-2'
+            )}
             onClick={onSelectedModel}
           >
+            {model.type === 'cloud' && (
+              <>
+                <Image
+                  className="h-6 w-6 flex-shrink-0"
+                  width={48}
+                  height={48}
+                  src={getLogoEngine(model.id as InferenceEngine) || ''}
+                  alt="logo"
+                />
+              </>
+            )}
             {extractModelName(model.metadata?.id)}
           </span>
         </div>
diff --git a/web/screens/Hub/ModelPage/index.tsx b/web/screens/Hub/ModelPage/index.tsx
index 8bded0a4f..2bacbcd2f 100644
--- a/web/screens/Hub/ModelPage/index.tsx
+++ b/web/screens/Hub/ModelPage/index.tsx
@@ -14,6 +14,8 @@ import {
 import Spinner from '@/containers/Loader/Spinner'
 import ModelDownloadButton from '@/containers/ModelDownloadButton'
 
+import ModelLabel from '@/containers/ModelLabel'
+
 import { MainViewState } from '@/constants/screens'
 
 import { useRefreshModelList } from '@/hooks/useEngineManagement'
@@ -146,6 +148,7 @@ const ModelPage = ({ model, onGoBack }: Props) => {
                       </th>
                       {model.type !== 'cloud' && (
                         <>
+                          <th></th>
                           <th className="hidden max-w-32 px-6 py-3 text-left text-sm font-semibold sm:table-cell">
                             Format
                           </th>
@@ -201,6 +204,9 @@ const ModelPage = ({ model, onGoBack }: Props) => {
                           </td>
                           {model.type !== 'cloud' && (
                             <>
+                              <td>
+                                <ModelLabel size={item.size} compact />
+                              </td>
                               <td className="hidden px-6 py-4 sm:table-cell">
                                 GGUF
                               </td>
@@ -215,7 +221,11 @@ const ModelPage = ({ model, onGoBack }: Props) => {
                               <ModelDownloadButton
                                 id={item.id}
                                 theme={i === 0 ? 'primary' : 'ghost'}
-                                variant={i === 0 ? 'solid' : 'outline'}
+                                className={
+                                  i !== 0
+                                    ? '!bg-[hsla(var(--secondary-bg))]'
+                                    : ''
+                                }
                               />
                             )}
                           </td>
diff --git a/web/screens/Hub/index.tsx b/web/screens/Hub/index.tsx
index 15f2b2bbe..7da83d27a 100644
--- a/web/screens/Hub/index.tsx
+++ b/web/screens/Hub/index.tsx
@@ -79,7 +79,7 @@ const filterOptions = [
   },
 ]
 
-const hubCompatibleAtom = atom(false)
+const hubCompatibleAtom = atom(true)
 
 const HubScreen = () => {
   const { sources } = useGetModelSources()
@@ -450,7 +450,7 @@ const HubScreen = () => {
               {/* Filters and Model List */}
               <div className="ml-4 mt-8 flex h-full w-full flex-row">
                 {/* Filters */}
-                <div className="sticky top-10 mr-6 hidden h-full w-[200px] shrink-0 flex-col md:flex">
+                <div className="sticky top-8 mr-6 hidden h-full w-[200px] shrink-0 flex-col md:flex">
                   <div className="flex w-full flex-row justify-between">
                     Filters
                     <button
diff --git a/web/screens/Thread/ThreadCenterPanel/TextMessage/MarkdownTextMessage.tsx b/web/screens/Thread/ThreadCenterPanel/TextMessage/MarkdownTextMessage.tsx
index 6dae7a6b6..c2aed197d 100644
--- a/web/screens/Thread/ThreadCenterPanel/TextMessage/MarkdownTextMessage.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/TextMessage/MarkdownTextMessage.tsx
@@ -107,7 +107,6 @@ export const MarkdownTextMessage = memo(
                       'code-block',
                       'group/item',
                       'relative',
-                      'my-4',
                       'overflow-auto',
                     ],
                   },
diff --git a/web/styles/components/code-block.scss b/web/styles/components/code-block.scss
index f2c140427..61cb60c28 100644
--- a/web/styles/components/code-block.scss
+++ b/web/styles/components/code-block.scss
@@ -60,7 +60,6 @@
   border-bottom-left-radius: 0.4rem;
   border-bottom-right-radius: 0.4rem;
   color: #f8f8f2;
-  background: hsla(var(--app-code-block)) !important;
 }
 
 pre {
diff --git a/web/styles/components/marked.scss b/web/styles/components/marked.scss
index 753f95df6..8e0985eee 100644
--- a/web/styles/components/marked.scss
+++ b/web/styles/components/marked.scss
@@ -51,6 +51,8 @@
   overflow-x: auto;
   font-size: 0.9rem;
   margin: 1rem 0;
+  padding: 16px;
+  background-color: hsla(var(--app-code-block)) !important;
 }
 
 /* Tables */
diff --git a/web/styles/components/message.scss b/web/styles/components/message.scss
index d96ab8b6a..f62e271ff 100644
--- a/web/styles/components/message.scss
+++ b/web/styles/components/message.scss
@@ -28,4 +28,10 @@
   blockquote {
     @apply inline-flex flex-col border-s-4 border-[hsla(var(--primary-bg))] bg-[hsla(var(--primary-bg-soft))] px-4 py-2;
   }
+
+  .markdown-content pre {
+    margin-top: 0 !important;
+    border-top-left-radius: 0 !important;
+    border-top-right-radius: 0 !important;
+  }
 }