60 lines
1.3 KiB
TypeScript
60 lines
1.3 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";
|
|
|
|
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 }) {
|
|
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 && <EmojiAvatar avatar={props.avatar} />}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function EmojiAvatar(props: { avatar: string; size?: number }) {
|
|
return (
|
|
<Emoji
|
|
unified={props.avatar}
|
|
size={props.size ?? 18}
|
|
getEmojiUrl={getEmojiUrl}
|
|
/>
|
|
);
|
|
}
|