89 lines
2.0 KiB
TypeScript
89 lines
2.0 KiB
TypeScript
import EmojiPicker, {
|
|
Emoji,
|
|
EmojiStyle,
|
|
Theme as EmojiTheme,
|
|
} from "emoji-picker-react";
|
|
|
|
import { ModelType } from "../store";
|
|
|
|
import BotIcon from "../icons/bot.svg";
|
|
import BlackBotIcon from "../icons/black-bot.svg";
|
|
|
|
import Image from 'next/image';
|
|
|
|
export function getEmojiUrl(unified: string, style: EmojiStyle) {
|
|
return `https://cdn.staticfile.org/emoji-datasource-apple/14.0.0/img/${style}/64/${unified}.png`;
|
|
}
|
|
|
|
export function AvatarPicker(props: {
|
|
onEmojiClick: (emojiId: string) => void;
|
|
}) {
|
|
return (
|
|
<EmojiPicker
|
|
lazyLoadEmojis
|
|
theme={EmojiTheme.AUTO}
|
|
getEmojiUrl={getEmojiUrl}
|
|
onEmojiClick={(e) => {
|
|
props.onEmojiClick(e.unified);
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export function Avatar(props: { model?: ModelType; avatar?: string }) {
|
|
const isSvg = (url: string) => {
|
|
return url.toLowerCase().endsWith('.svg');
|
|
};
|
|
|
|
const isRegularImage = (url: string) => {
|
|
const regex = /\.(jpe?g|png|gif)$/i;
|
|
return regex.test(url);
|
|
};
|
|
|
|
if (props.model) {
|
|
return (
|
|
<div className="no-dark">
|
|
{props.model?.startsWith("gpt-4") ? (
|
|
<BlackBotIcon className="user-avatar" />
|
|
) : (
|
|
<BotIcon className="user-avatar" />
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="user-avatar">
|
|
{props.avatar && isRegularImage(props.avatar) && (
|
|
<Image
|
|
src={props.avatar}
|
|
alt="User Avatar"
|
|
width={30}
|
|
height={30}
|
|
className="user-avatar"
|
|
/>
|
|
)}
|
|
{props.avatar && isSvg(props.avatar) && (
|
|
<img
|
|
src={props.avatar}
|
|
alt="User Avatar"
|
|
className="user-avatar"
|
|
/>
|
|
)}
|
|
{props.avatar && !isSvg(props.avatar) && !isRegularImage(props.avatar) && (
|
|
<EmojiAvatar avatar={props.avatar} />
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function EmojiAvatar(props: { avatar: string; size?: number }) {
|
|
return (
|
|
<Emoji
|
|
unified={props.avatar}
|
|
size={props.size ?? 18}
|
|
getEmojiUrl={getEmojiUrl}
|
|
/>
|
|
);
|
|
}
|