v1.5: Add login module and GPT selection feature

app/components/emoji.tsx

@@ -9,6 +9,8 @@ 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`;
 }
@@ -29,6 +31,15 @@ export function AvatarPicker(props: {
 }
 
 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">
@@ -43,7 +54,25 @@ export function Avatar(props: { model?: ModelType; avatar?: string }) {
 
   return (
     <div className="user-avatar">
-      {props.avatar && <EmojiAvatar avatar={props.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>
   );
 }