From 9ed113b52ba5296c59ee285eed189d10238f1dc6 Mon Sep 17 00:00:00 2001
From: H0llyW00dzZ <priv8@btz.pm>
Date: Sun, 15 Oct 2023 02:34:51 +0700
Subject: [PATCH] Refactor & Feat UI Page Chat [Image Exporter]

[+] refactor(exporter.tsx): extract variables for message role and avatar
[+] feat(exporter.tsx): add support for system messages to use a different avatar
---
 app/components/exporter.tsx | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/app/components/exporter.tsx b/app/components/exporter.tsx
index 0a885d874..d6f345941 100644
--- a/app/components/exporter.tsx
+++ b/app/components/exporter.tsx
@@ -543,15 +543,22 @@ export function ImagePreviewer(props: {
           </div>
         </div>
         {props.messages.map((m, i) => {
+          const isUserMessage = m.role === "user";
+          const isSystemMessage = m.role === "system";
+          const avatar =
+            isUserMessage && config.avatar
+              ? config.avatar
+              : isSystemMessage
+              ? "2699-fe0f"
+              : mask.avatar;
+          const messageClass = `${styles["message"]} ${
+            styles["message-" + m.role]
+          }`;
+
           return (
-            <div
-              className={styles["message"] + " " + styles["message-" + m.role]}
-              key={i}
-            >
+            <div className={messageClass} key={i}>
               <div className={styles["avatar"]}>
-                <ExportAvatar
-                  avatar={m.role === "user" ? config.avatar : mask.avatar}
-                />
+                <ExportAvatar avatar={avatar} />
               </div>
 
               <div className={styles["body"]}>