fix: broken several ui when model name too long (#2728)
This commit is contained in:
Faisal Amir
GitHub
parent
20657bb3da
commit
49401bd8eb
@ -266,12 +266,36 @@ const DropdownListSidebar = ({
|
|||||||
value={x.id}
|
value={x.id}
|
||||||
className={twMerge(
|
className={twMerge(
|
||||||
x.id === selectedModel?.id && 'bg-secondary',
|
x.id === selectedModel?.id && 'bg-secondary',
|
||||||
'my-0 pb-8 pt-4'
|
'my-0 py-2'
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<div className="relative flex w-full justify-between">
|
<div className="flex w-full items-center justify-between gap-x-4">
|
||||||
<span className="line-clamp-1 block">{x.name}</span>
|
<div className="max-w-[200px]">
|
||||||
<div className="absolute right-0 top-2 space-x-2">
|
<p className="line-clamp-2">{x.name}</p>
|
||||||
|
<div
|
||||||
|
className={twMerge(
|
||||||
|
'mt-2 inline-flex items-center space-x-2 text-muted-foreground'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<p className="line-clamp-2 text-xs">{x.id}</p>
|
||||||
|
{clipboard.copied && copyId === x.id ? (
|
||||||
|
<CheckIcon
|
||||||
|
size={16}
|
||||||
|
className="flex-shrink-0 text-green-600"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<CopyIcon
|
||||||
|
size={16}
|
||||||
|
className="z-20 flex-shrink-0 cursor-pointer"
|
||||||
|
onClick={() => {
|
||||||
|
clipboard.copy(x.id)
|
||||||
|
setCopyId(x.id)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex-shrink-0 space-x-2">
|
||||||
<span className="font-bold text-muted-foreground">
|
<span className="font-bold text-muted-foreground">
|
||||||
{toGibibytes(x.metadata.size)}
|
{toGibibytes(x.metadata.size)}
|
||||||
</span>
|
</span>
|
||||||
@ -281,25 +305,6 @@ const DropdownListSidebar = ({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</SelectItem>
|
</SelectItem>
|
||||||
<div
|
|
||||||
className={twMerge(
|
|
||||||
'absolute -mt-6 inline-flex items-center space-x-2 px-4 pb-2 text-muted-foreground'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<span className="text-xs">{x.id}</span>
|
|
||||||
{clipboard.copied && copyId === x.id ? (
|
|
||||||
<CheckIcon size={16} className="text-green-600" />
|
|
||||||
) : (
|
|
||||||
<CopyIcon
|
|
||||||
size={16}
|
|
||||||
className="z-20 cursor-pointer"
|
|
||||||
onClick={() => {
|
|
||||||
clipboard.copy(x.id)
|
|
||||||
setCopyId(x.id)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
))
|
))
|
||||||
)}
|
)}
|
||||||
|
|||||||
@ -34,7 +34,7 @@ const TableActiveModel = () => {
|
|||||||
return (
|
return (
|
||||||
<th
|
<th
|
||||||
key={i}
|
key={i}
|
||||||
className="px-6 py-2 text-left font-normal last:text-center"
|
className="px-4 py-2 text-left font-normal last:text-center"
|
||||||
>
|
>
|
||||||
{col}
|
{col}
|
||||||
</th>
|
</th>
|
||||||
@ -46,17 +46,27 @@ const TableActiveModel = () => {
|
|||||||
<Fragment>
|
<Fragment>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td className="px-6 py-2 font-bold">{activeModel.name}</td>
|
<td
|
||||||
<td className="px-6 py-2 font-bold">{activeModel.id}</td>
|
className="max-w-[200px] px-4 py-2 font-bold"
|
||||||
<td className="px-6 py-2">
|
title={activeModel.name}
|
||||||
|
>
|
||||||
|
<p className="line-clamp-2">{activeModel.name}</p>
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
className="max-w-[200px] px-4 py-2 font-bold"
|
||||||
|
title={activeModel.id}
|
||||||
|
>
|
||||||
|
<p className="line-clamp-2">{activeModel.id}</p>
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-2">
|
||||||
<Badge themes="secondary">
|
<Badge themes="secondary">
|
||||||
{toGibibytes(activeModel.metadata.size)}
|
{toGibibytes(activeModel.metadata.size)}
|
||||||
</Badge>
|
</Badge>
|
||||||
</td>
|
</td>
|
||||||
<td className="px-6 py-2">
|
<td className="px-4 py-2">
|
||||||
<Badge themes="secondary">v{activeModel.version}</Badge>
|
<Badge themes="secondary">v{activeModel.version}</Badge>
|
||||||
</td>
|
</td>
|
||||||
<td className="px-6 py-2 text-center">
|
<td className="px-4 py-2 text-center">
|
||||||
<Tooltip>
|
<Tooltip>
|
||||||
<TooltipTrigger className="w-full">
|
<TooltipTrigger className="w-full">
|
||||||
<Button
|
<Button
|
||||||
|
|||||||
@ -195,7 +195,7 @@ const Advanced = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* CPU / GPU switching */}
|
{/* CPU / GPU switching */}
|
||||||
{!isMac && (
|
{isMac && (
|
||||||
<div className="flex w-full flex-col items-start justify-between border-b border-border py-4 first:pt-0 last:border-none">
|
<div className="flex w-full flex-col items-start justify-between border-b border-border py-4 first:pt-0 last:border-none">
|
||||||
<div className="flex w-full items-start justify-between">
|
<div className="flex w-full items-start justify-between">
|
||||||
<div className="space-y-1.5">
|
<div className="space-y-1.5">
|
||||||
@ -223,73 +223,76 @@ const Advanced = () => {
|
|||||||
for further assistance.
|
for further assistance.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
{gpuList.length > 0 && !gpuEnabled && (
|
|
||||||
|
<div>
|
||||||
|
{gpuList.length > 0 && !gpuEnabled && (
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger>
|
||||||
|
<AlertCircleIcon
|
||||||
|
size={20}
|
||||||
|
className="mr-2 text-yellow-600"
|
||||||
|
/>
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent
|
||||||
|
side="right"
|
||||||
|
sideOffset={10}
|
||||||
|
className="max-w-[240px]"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Disabling NVIDIA GPU Acceleration may result in reduced
|
||||||
|
performance. It is recommended to keep this enabled for
|
||||||
|
optimal user experience.
|
||||||
|
</span>
|
||||||
|
<TooltipArrow />
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
|
||||||
<Tooltip>
|
<Tooltip>
|
||||||
<TooltipTrigger>
|
<TooltipTrigger>
|
||||||
<AlertCircleIcon
|
<Switch
|
||||||
size={20}
|
disabled={gpuList.length === 0 || vulkanEnabled}
|
||||||
className="mr-2 text-yellow-600"
|
checked={gpuEnabled}
|
||||||
|
onCheckedChange={(e) => {
|
||||||
|
if (e === true) {
|
||||||
|
saveSettings({ runMode: 'gpu' })
|
||||||
|
setGpuEnabled(true)
|
||||||
|
snackbar({
|
||||||
|
description:
|
||||||
|
'Successfully turned on GPU Acceleration',
|
||||||
|
type: 'success',
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
saveSettings({ runMode: 'cpu' })
|
||||||
|
setGpuEnabled(false)
|
||||||
|
snackbar({
|
||||||
|
description:
|
||||||
|
'Successfully turned off GPU Acceleration',
|
||||||
|
type: 'success',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// Stop any running model to apply the changes
|
||||||
|
if (e !== gpuEnabled) stopModel()
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
</TooltipTrigger>
|
</TooltipTrigger>
|
||||||
<TooltipContent
|
{gpuList.length === 0 && (
|
||||||
side="right"
|
<TooltipContent
|
||||||
sideOffset={10}
|
side="right"
|
||||||
className="max-w-[240px]"
|
sideOffset={10}
|
||||||
>
|
className="max-w-[240px]"
|
||||||
<span>
|
>
|
||||||
Disabling NVIDIA GPU Acceleration may result in reduced
|
<span>
|
||||||
performance. It is recommended to keep this enabled for
|
Your current device does not have a compatible GPU for
|
||||||
optimal user experience.
|
monitoring. To enable GPU monitoring, please ensure your
|
||||||
</span>
|
device has a supported Nvidia or AMD GPU with updated
|
||||||
<TooltipArrow />
|
drivers.
|
||||||
</TooltipContent>
|
</span>
|
||||||
|
<TooltipArrow />
|
||||||
|
</TooltipContent>
|
||||||
|
)}
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
)}
|
</div>
|
||||||
|
|
||||||
<Tooltip>
|
|
||||||
<TooltipTrigger>
|
|
||||||
<Switch
|
|
||||||
disabled={gpuList.length === 0 || vulkanEnabled}
|
|
||||||
checked={gpuEnabled}
|
|
||||||
onCheckedChange={(e) => {
|
|
||||||
if (e === true) {
|
|
||||||
saveSettings({ runMode: 'gpu' })
|
|
||||||
setGpuEnabled(true)
|
|
||||||
snackbar({
|
|
||||||
description:
|
|
||||||
'Successfully turned on GPU Acceleration',
|
|
||||||
type: 'success',
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
saveSettings({ runMode: 'cpu' })
|
|
||||||
setGpuEnabled(false)
|
|
||||||
snackbar({
|
|
||||||
description:
|
|
||||||
'Successfully turned off GPU Acceleration',
|
|
||||||
type: 'success',
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// Stop any running model to apply the changes
|
|
||||||
if (e !== gpuEnabled) stopModel()
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</TooltipTrigger>
|
|
||||||
{gpuList.length === 0 && (
|
|
||||||
<TooltipContent
|
|
||||||
side="right"
|
|
||||||
sideOffset={10}
|
|
||||||
className="max-w-[240px]"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
Your current device does not have a compatible GPU for
|
|
||||||
monitoring. To enable GPU monitoring, please ensure your
|
|
||||||
device has a supported Nvidia or AMD GPU with updated
|
|
||||||
drivers.
|
|
||||||
</span>
|
|
||||||
<TooltipArrow />
|
|
||||||
</TooltipContent>
|
|
||||||
)}
|
|
||||||
</Tooltip>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-2 w-full rounded-lg bg-secondary p-4">
|
<div className="mt-2 w-full rounded-lg bg-secondary p-4">
|
||||||
<label className="mb-1 inline-block font-medium">
|
<label className="mb-1 inline-block font-medium">
|
||||||
|
|||||||
@ -63,19 +63,23 @@ export default function RowModel(props: RowModelProps) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<tr className="relative border-b border-border last:border-none">
|
<tr className="relative border-b border-border last:border-none">
|
||||||
<td className="px-6 py-4 font-bold">{props.data.name}</td>
|
<td className="max-w-[200px] p-4 font-bold" title={props.data.name}>
|
||||||
<td className="px-6 py-4 font-bold">{props.data.id}</td>
|
<p className="line-clamp-2">{props.data.name}</p>
|
||||||
<td className="px-6 py-4">
|
</td>
|
||||||
|
<td className="max-w-[200px] p-4 font-bold" title={props.data.id}>
|
||||||
|
<p className="line-clamp-2">{props.data.id}</p>
|
||||||
|
</td>
|
||||||
|
<td className="p-4">
|
||||||
<Badge themes="secondary">
|
<Badge themes="secondary">
|
||||||
{props.data.metadata.size
|
{props.data.metadata.size
|
||||||
? toGibibytes(props.data.metadata.size)
|
? toGibibytes(props.data.metadata.size)
|
||||||
: '-'}
|
: '-'}
|
||||||
</Badge>
|
</Badge>
|
||||||
</td>
|
</td>
|
||||||
<td className="px-6 py-4">
|
<td className="p-4">
|
||||||
<Badge themes="secondary">v{props.data.version}</Badge>
|
<Badge themes="secondary">v{props.data.version}</Badge>
|
||||||
</td>
|
</td>
|
||||||
<td className="px-6 py-4">
|
<td className="p-4">
|
||||||
{isRemoteModel ? (
|
{isRemoteModel ? (
|
||||||
<Badge
|
<Badge
|
||||||
themes="success"
|
themes="success"
|
||||||
@ -112,7 +116,7 @@ export default function RowModel(props: RowModelProps) {
|
|||||||
</Badge>
|
</Badge>
|
||||||
)}
|
)}
|
||||||
</td>
|
</td>
|
||||||
<td className="px-6 py-4 text-center">
|
<td className="p-4 text-center">
|
||||||
{!isRemoteModel && (
|
{!isRemoteModel && (
|
||||||
<div
|
<div
|
||||||
className="cursor-pointer"
|
className="cursor-pointer"
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user