feat: close #291 gpt-4 model uses black icon

app/components/chat.tsx

@@ -10,6 +10,7 @@ import CopyIcon from "../icons/copy.svg";
 import DownloadIcon from "../icons/download.svg";
 import LoadingIcon from "../icons/three-dots.svg";
 import BotIcon from "../icons/bot.svg";
+import BlackBotIcon from "../icons/black-bot.svg";
 import AddIcon from "../icons/add.svg";
 import DeleteIcon from "../icons/delete.svg";
 import MaxIcon from "../icons/max.svg";
@@ -30,6 +31,7 @@ import {
   createMessage,
   useAccessStore,
   Theme,
+  ModelType,
 } from "../store";
 
 import {
@@ -64,13 +66,17 @@ const Emoji = dynamic(async () => (await import("emoji-picker-react")).Emoji, {
   loading: () => <LoadingIcon />,
 });
 
-export function Avatar(props: { role: Message["role"] }) {
+export function Avatar(props: { role: Message["role"]; model?: ModelType }) {
   const config = useChatStore((state) => state.config);
 
   if (props.role !== "user") {
     return (
       <div className="no-dark">
-        <BotIcon className={styles["user-avtar"]} />
+        {props.model?.startsWith("gpt-4") ? (
+          <BlackBotIcon className={styles["user-avtar"]} />
+        ) : (
+          <BotIcon className={styles["user-avtar"]} />
+        )}
       </div>
     );
   }
@@ -727,7 +733,7 @@ export function Chat(props: {
             >
               <div className={styles["chat-message-container"]}>
                 <div className={styles["chat-message-avatar"]}>
-                  <Avatar role={message.role} />
+                  <Avatar role={message.role} model={message.model} />
                 </div>
                 {(message.preview || message.streaming) && (
                   <div className={styles["chat-message-status"]}>

app/store/app.ts

@@ -17,6 +17,7 @@ export type Message = ChatCompletionResponseMessage & {
   streaming?: boolean;
   isError?: boolean;
   id?: number;
+  model?: ModelType;
 };
 
 export function createMessage(override: Partial<Message>): Message {
@@ -58,7 +59,7 @@ export interface ChatConfig {
   disablePromptHint: boolean;
 
   modelConfig: {
-    model: string;
+    model: ModelType;
     temperature: number;
     max_tokens: number;
     presence_penalty: number;
@@ -96,7 +97,9 @@ export const ALL_MODELS = [
     name: "gpt-3.5-turbo-0301",
     available: true,
   },
-];
+] as const;
+
+export type ModelType = (typeof ALL_MODELS)[number]["name"];
 
 export function limitNumber(
   x: number,
@@ -387,6 +390,7 @@ export const useChatStore = create<ChatStore>()(
           role: "assistant",
           streaming: true,
           id: userMessage.id! + 1,
+          model: get().config.modelConfig.model,
         });
 
         // get recent messages