| import { FileSources } from 'librechat-data-provider'; |
| import ProgressCircle from './ProgressCircle'; |
| import SourceIcon from './SourceIcon'; |
| import { cn } from '~/utils'; |
|
|
| type styleProps = { |
| backgroundImage?: string; |
| backgroundSize?: string; |
| backgroundPosition?: string; |
| backgroundRepeat?: string; |
| }; |
|
|
| const ImagePreview = ({ |
| imageBase64, |
| url, |
| progress = 1, |
| className = '', |
| source, |
| }: { |
| imageBase64?: string; |
| url?: string; |
| progress?: number; // between 0 and 1 |
| className?: string; |
| source?: FileSources; |
| }) => { |
| let style: styleProps = { |
| backgroundSize: 'cover', |
| backgroundPosition: 'center', |
| backgroundRepeat: 'no-repeat', |
| }; |
| if (imageBase64) { |
| style = { |
| ...style, |
| backgroundImage: `url(${imageBase64})`, |
| }; |
| } else if (url) { |
| style = { |
| ...style, |
| backgroundImage: `url(${url})`, |
| }; |
| } |
|
|
| if (!style.backgroundImage) { |
| return null; |
| } |
|
|
| const radius = 55; |
| const circumference = 2 * Math.PI * radius; |
|
|
| |
| const offset = circumference - progress * circumference; |
| const circleCSSProperties = { |
| transition: 'stroke-dashoffset 0.3s linear', |
| }; |
|
|
| return ( |
| <div className={cn('h-14 w-14', className)}> |
| <button |
| type="button" |
| aria-haspopup="dialog" |
| aria-expanded="false" |
| className="h-full w-full" |
| style={style} |
| /> |
| {progress < 1 && ( |
| <ProgressCircle |
| circumference={circumference} |
| offset={offset} |
| circleCSSProperties={circleCSSProperties} |
| /> |
| )} |
| <SourceIcon source={source} /> |
| </div> |
| ); |
| }; |
|
|
| export default ImagePreview; |
|
|
