Merge pull request #6283 from menloresearch/fix/ui-feedback

fix: update ui info
2025-08-25 20:10:26 +07:00 · 2025-08-25 20:10:26 +07:00 · a92aa4e3f1
commit a92aa4e3f1
parent 128ea578bd e376314315
6 changed files with 68 additions and 106 deletions
--- a/web-app/src/components/ui/hover-card.tsx
+++ b/web-app/src/components/ui/hover-card.tsx
@ -6,7 +6,14 @@ import { cn } from '@/lib/utils'
 function HoverCard({
  ...props
 }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
-  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
+  return (
+    <HoverCardPrimitive.Root
+      openDelay={0}
+      closeDelay={0}
+      data-slot="hover-card"
+      {...props}
+    />
+  )
 }

 function HoverCardTrigger({
--- a/web-app/src/containers/ChatInput.tsx
+++ b/web-app/src/containers/ChatInput.tsx
@ -562,7 +562,7 @@ const ChatInput = ({ model, className, initialMessage }: ChatInputProps) => {
                        </div>
                      </TooltipTrigger>
                      <TooltipContent>
-                        <p>{t('visions')}</p>
+                        <p>{t('vision')}</p>
                      </TooltipContent>
                    </Tooltip>
                  </TooltipProvider>
--- a/web-app/src/containers/ModelInfoHoverCard.tsx
+++ b/web-app/src/containers/ModelInfoHoverCard.tsx
@ -5,11 +5,11 @@ import {
 } from '@/components/ui/hover-card'
 import { IconInfoCircle } from '@tabler/icons-react'
 import { CatalogModel, ModelQuant } from '@/services/models'
-import { extractDescription } from '@/lib/models'

 interface ModelInfoHoverCardProps {
  model: CatalogModel
  variant?: ModelQuant
+  isDefaultVariant?: boolean
  defaultModelQuantizations: string[]
  modelSupportStatus: Record<string, string>
  onCheckModelSupport: (variant: ModelQuant) => void
@ -19,12 +19,12 @@ interface ModelInfoHoverCardProps {
 export const ModelInfoHoverCard = ({
  model,
  variant,
+  isDefaultVariant,
  defaultModelQuantizations,
  modelSupportStatus,
  onCheckModelSupport,
  children,
 }: ModelInfoHoverCardProps) => {
-  const isVariantMode = !!variant
  const displayVariant =
    variant ||
    model.quants.find((m) =>
@ -95,8 +95,8 @@ export const ModelInfoHoverCard = ({
        {children || (
          <div className="cursor-pointer">
            <IconInfoCircle
-              size={14}
-              className="mt-0.5 text-main-view-fg/50 hover:text-main-view-fg/80 transition-colors"
+              size={isDefaultVariant ? 20 : 14}
+              className="mt-0.5 text-main-view-fg/80 hover:text-main-view-fg/80 transition-colors"
            />
          </div>
        )}
@ -106,10 +106,10 @@ export const ModelInfoHoverCard = ({
          {/* Header */}
          <div className="border-b border-main-view-fg/10 pb-3">
            <h4 className="text-sm font-semibold text-main-view-fg">
-              {isVariantMode ? variant.model_id : model.model_name}
+              {!isDefaultVariant ? variant?.model_id : model?.model_name}
            </h4>
            <p className="text-xs text-main-view-fg/60 mt-1">
-              {isVariantMode
+              {!isDefaultVariant
                ? 'Model Variant Information'
                : 'Model Information'}
            </p>
@ -118,57 +118,21 @@ export const ModelInfoHoverCard = ({
          {/* Main Info Grid */}
          <div className="grid grid-cols-2 gap-3 text-xs">
            <div className="space-y-2">
-              {isVariantMode ? (
-                <>
-                  <div>
-                    <span className="text-main-view-fg/50 block">
-                      File Size
-                    </span>
-                    <span className="text-main-view-fg font-medium mt-1 inline-block">
-                      {variant.file_size}
-                    </span>
-                  </div>
-                  <div>
-                    <span className="text-main-view-fg/50 block">
-                      Quantization
-                    </span>
-                    <span className="text-main-view-fg font-medium mt-1 inline-block">
-                      {variant.model_id.split('-').pop()?.toUpperCase() ||
-                        'N/A'}
-                    </span>
-                  </div>
-                </>
-              ) : (
-                <>
-                  <div>
-                    <span className="text-main-view-fg/50 block">
-                      Downloads
-                    </span>
-                    <span className="text-main-view-fg font-medium mt-1 inline-block">
-                      {model.downloads?.toLocaleString() || '0'}
-                    </span>
-                  </div>
-                  <div>
-                    <span className="text-main-view-fg/50 block">Variants</span>
-                    <span className="text-main-view-fg font-medium mt-1 inline-block">
-                      {model.quants?.length || 0}
-                    </span>
-                  </div>
-                </>
-              )}
+              <>
+                <div>
+                  <span className="text-main-view-fg/50 block">
+                    {isDefaultVariant
+                      ? 'Maybe Default Quantization'
+                      : 'Quantization'}
+                  </span>
+                  <span className="text-main-view-fg font-medium mt-1 inline-block">
+                    {variant?.model_id.split('-').pop()?.toUpperCase() || 'N/A'}
+                  </span>
+                </div>
+              </>
            </div>

            <div className="space-y-2">
-              {!isVariantMode && (
-                <div>
-                  <span className="text-main-view-fg/50 block">
-                    Default Size
-                  </span>
-                  <span className="text-main-view-fg font-medium mt-1 inline-block">
-                    {displayVariant?.file_size || 'N/A'}
-                  </span>
-                </div>
-              )}
              <div>
                <span className="text-main-view-fg/50 block">
                  Compatibility
@ -204,21 +168,6 @@ export const ModelInfoHoverCard = ({
              </div>
            </div>
          )}
-
-          {/* Content Section */}
-          <div className="border-t border-main-view-fg/10 pt-3">
-            <h5 className="text-xs font-medium text-main-view-fg/70 mb-1">
-              {isVariantMode ? 'Download URL' : 'Description'}
-            </h5>
-            <div className="text-xs text-main-view-fg/60 bg-main-view-fg/5 rounded p-2">
-              {isVariantMode ? (
-                <div className="font-mono break-all">{variant.path}</div>
-              ) : (
-                extractDescription(model?.description) ||
-                'No description available'
-              )}
-            </div>
-          </div>
        </div>
      </HoverCardContent>
    </HoverCard>
--- a/web-app/src/containers/dialogs/EditModel.tsx
+++ b/web-app/src/containers/dialogs/EditModel.tsx
@ -7,11 +7,7 @@ import {
  DialogTrigger,
 } from '@/components/ui/dialog'
 import { Switch } from '@/components/ui/switch'
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from '@/components/ui/tooltip'
+
 import { useModelProvider } from '@/hooks/useModelProvider'
 import {
  IconPencil,
@ -19,7 +15,7 @@ import {
  IconTool,
  // IconWorld,
  // IconAtom,
-  IconCodeCircle2,
+  // IconCodeCircle2,
 } from '@tabler/icons-react'
 import { useState, useEffect } from 'react'
 import { useTranslation } from '@/i18n/react-i18next-compat'
@ -186,7 +182,7 @@ export const DialogEditModel = ({
              />
            </div>

-            <div className="flex items-center justify-between">
+            {/* <div className="flex items-center justify-between">
              <div className="flex items-center space-x-2">
                <IconCodeCircle2 className="size-4 text-main-view-fg/70" />
                <span className="text-sm">
@ -208,7 +204,7 @@ export const DialogEditModel = ({
                  {t('providers:editModel.notAvailable')}
                </TooltipContent>
              </Tooltip>
-            </div>
+            </div> */}

            {/* <div className="flex items-center justify-between">
              <div className="flex items-center space-x-2">
--- a/web-app/src/routes/hub/index.tsx
+++ b/web-app/src/routes/hub/index.tsx
@ -353,12 +353,7 @@ function Hub() {
        // Immediately set local downloading state
        addLocalDownloadingModel(modelId)
        const mmprojPath = model.mmproj_models?.[0]?.path
-        pullModelWithMetadata(
-          modelId, 
-          modelUrl,
-          mmprojPath,
-          huggingfaceToken
-        )
+        pullModelWithMetadata(modelId, modelUrl, mmprojPath, huggingfaceToken)
      }

      return (
@ -399,13 +394,13 @@ function Hub() {
      )
    }
  }, [
+    localDownloadingModels,
    downloadProcesses,
    llamaProvider?.models,
    isRecommendedModel,
-    downloadButtonRef,
-    localDownloadingModels,
-    addLocalDownloadingModel,
    t,
+    addLocalDownloadingModel,
+    huggingfaceToken,
    handleUseModel,
  ])

@ -482,9 +477,9 @@ function Hub() {
  const isLastStep = currentStepIndex === steps.length - 1

  const renderFilter = () => {
-    if (searchValue.length === 0)
-      return (
-        <>
+    return (
+      <>
+        {searchValue.length === 0 && (
          <DropdownMenu>
            <DropdownMenuTrigger>
              <span className="flex cursor-pointer items-center gap-1 px-2 py-1 rounded-sm bg-main-view-fg/15 text-sm outline-none text-main-view-fg font-medium">
@ -509,17 +504,18 @@ function Hub() {
              ))}
            </DropdownMenuContent>
          </DropdownMenu>
-          <div className="flex items-center gap-2">
-            <Switch
-              checked={showOnlyDownloaded}
-              onCheckedChange={setShowOnlyDownloaded}
-            />
-            <span className="text-xs text-main-view-fg/70 font-medium whitespace-nowrap">
-              {t('hub:downloaded')}
-            </span>
-          </div>
-        </>
-      )
+        )}
+        <div className="flex items-center gap-2">
+          <Switch
+            checked={showOnlyDownloaded}
+            onCheckedChange={setShowOnlyDownloaded}
+          />
+          <span className="text-xs text-main-view-fg/70 font-medium whitespace-nowrap">
+            {t('hub:downloaded')}
+          </span>
+        </div>
+      </>
+    )
  }

  return (
@ -661,6 +657,18 @@ function Hub() {
                                  defaultModelQuantizations={
                                    defaultModelQuantizations
                                  }
+                                  variant={
+                                    filteredModels[
+                                      virtualItem.index
+                                    ].quants.find((m) =>
+                                      defaultModelQuantizations.some((e) =>
+                                        m.model_id.toLowerCase().includes(e)
+                                      )
+                                    ) ??
+                                    filteredModels[virtualItem.index]
+                                      .quants?.[0]
+                                  }
+                                  isDefaultVariant={true}
                                  modelSupportStatus={modelSupportStatus}
                                  onCheckModelSupport={checkModelSupport}
                                />
--- a/web-app/src/routes/settings/providers/$providerName.tsx
+++ b/web-app/src/routes/settings/providers/$providerName.tsx
@ -584,10 +584,12 @@ function ProviderDetail() {
                          }
                          actions={
                            <div className="flex items-center gap-0.5">
-                              <DialogEditModel
-                                provider={provider}
-                                modelId={model.id}
-                              />
+                              {provider && provider.provider !== 'llamacpp' && (
+                                <DialogEditModel
+                                  provider={provider}
+                                  modelId={model.id}
+                                />
+                              )}
                              {model.settings && (
                                <ModelSetting
                                  provider={provider}