Skip to content

Commit

Permalink
fix: broken several ui when model name too long (janhq#2728)
Browse files Browse the repository at this point in the history
  • Loading branch information
@urmauur
urmauur authored Apr 15, 2024
1 parent 20657bb commit 49401bd
Show file tree
Hide file tree
Showing 4 changed files with 120 additions and 98 deletions.
51 changes: 28 additions & 23 deletions web/containers/DropdownListSidebar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -266,12 +266,36 @@ const DropdownListSidebar = ({
value={x.id}
className={twMerge(
x.id === selectedModel?.id && 'bg-secondary',
'my-0 pb-8 pt-4'
'my-0 py-2'
)}
>
<div className="relative flex w-full justify-between">
<span className="line-clamp-1 block">{x.name}</span>
<div className="absolute right-0 top-2 space-x-2">
<div className="flex w-full items-center justify-between gap-x-4">
<div className="max-w-[200px]">
<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">
{toGibibytes(x.metadata.size)}
</span>
Expand All @@ -281,25 +305,6 @@ const DropdownListSidebar = ({
</div>
</div>
</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>
))
)}
Expand Down
22 changes: 16 additions & 6 deletions web/containers/Layout/BottomBar/SystemMonitor/TableActiveModel/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const TableActiveModel = () => {
return (
<th
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}
</th>
Expand All @@ -46,17 +46,27 @@ const TableActiveModel = () => {
<Fragment>
<tbody>
<tr>
<td className="px-6 py-2 font-bold">{activeModel.name}</td>
<td className="px-6 py-2 font-bold">{activeModel.id}</td>
<td className="px-6 py-2">
<td
className="max-w-[200px] px-4 py-2 font-bold"
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">
{toGibibytes(activeModel.metadata.size)}
</Badge>
</td>
<td className="px-6 py-2">
<td className="px-4 py-2">
<Badge themes="secondary">v{activeModel.version}</Badge>
</td>
<td className="px-6 py-2 text-center">
<td className="px-4 py-2 text-center">
<Tooltip>
<TooltipTrigger className="w-full">
<Button
Expand Down
129 changes: 66 additions & 63 deletions web/screens/Settings/Advanced/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,7 @@ const Advanced = () => {
</div>

{/* 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 items-start justify-between">
<div className="space-y-1.5">
Expand Down Expand Up @@ -223,73 +223,76 @@ const Advanced = () => {
for further assistance.
</p>
</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>
<TooltipTrigger>
<AlertCircleIcon
size={20}
className="mr-2 text-yellow-600"
<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>
<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>
{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>
)}

<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">
<label className="mb-1 inline-block font-medium">
Expand Down
16 changes: 10 additions & 6 deletions web/screens/Settings/Models/Row.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,19 +63,23 @@ export default function RowModel(props: RowModelProps) {

return (
<tr className="relative border-b border-border last:border-none">
<td className="px-6 py-4 font-bold">{props.data.name}</td>
<td className="px-6 py-4 font-bold">{props.data.id}</td>
<td className="px-6 py-4">
<td className="max-w-[200px] p-4 font-bold" title={props.data.name}>
<p className="line-clamp-2">{props.data.name}</p>
</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">
{props.data.metadata.size
? toGibibytes(props.data.metadata.size)
: '-'}
</Badge>
</td>
<td className="px-6 py-4">
<td className="p-4">
<Badge themes="secondary">v{props.data.version}</Badge>
</td>
<td className="px-6 py-4">
<td className="p-4">
{isRemoteModel ? (
<Badge
themes="success"
Expand Down Expand Up @@ -112,7 +116,7 @@ export default function RowModel(props: RowModelProps) {
</Badge>
)}
</td>
<td className="px-6 py-4 text-center">
<td className="p-4 text-center">
{!isRemoteModel && (
<div
className="cursor-pointer"
Expand Down

0 comments on commit 49401bd

Please sign in to comment.