cf8f401dab
* feat: update icon alert warning and copies tooltip model dropdown * chore: update loader when user click download model dropdown
50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
import { Fragment, memo } from 'react'
|
|
|
|
import { Badge, Tooltip } from '@janhq/joi'
|
|
import { AlertTriangleIcon, InfoIcon } from 'lucide-react'
|
|
|
|
type Props = {
|
|
compact?: boolean
|
|
unit: string
|
|
}
|
|
|
|
const tooltipContent = `Your device doesn't have enough RAM to run this model. Consider upgrading your RAM or using a device with more memory capacity.`
|
|
|
|
const NotEnoughMemoryLabel = ({ unit, compact }: Props) => (
|
|
<>
|
|
{compact ? (
|
|
<div className="flex h-5 w-5 items-center">
|
|
<Tooltip
|
|
trigger={
|
|
<AlertTriangleIcon
|
|
size={14}
|
|
className="cursor-pointer text-[hsla(var(--destructive-bg))]"
|
|
/>
|
|
}
|
|
content={
|
|
<Fragment>
|
|
<b>Not enough RAM:</b> <span>{tooltipContent}</span>
|
|
</Fragment>
|
|
}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<Badge theme="destructive" variant="soft">
|
|
<span className="line-clamp-1">Not enough {unit}</span>
|
|
<Tooltip
|
|
trigger={
|
|
<InfoIcon size={14} className="ml-2 flex-shrink-0 cursor-pointer" />
|
|
}
|
|
content={
|
|
<Fragment>
|
|
<b>Not enough RAM:</b> <span>{tooltipContent}</span>
|
|
</Fragment>
|
|
}
|
|
/>
|
|
</Badge>
|
|
)}
|
|
</>
|
|
)
|
|
|
|
export default memo(NotEnoughMemoryLabel)
|