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 1/4] 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"]}>

From 18175d4d6a85cc72a3c6a5a4e14d43e4e35d2560 Mon Sep 17 00:00:00 2001
From: H0llyW00dzZ <priv8@btz.pm>
Date: Sun, 15 Oct 2023 17:51:48 +0700
Subject: [PATCH 2/4] Fix & Feat UI Page Chat [Json Exporter]

[+] fix(exporter.tsx): remove system message in JsonPreviewer component
[+] feat(chat.ts): add system message after updating current session topic for all models
---
 app/components/exporter.tsx |  4 ----
 app/store/chat.ts           | 16 ++++++++++++----
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/app/components/exporter.tsx b/app/components/exporter.tsx
index d6f345941..d0d9b7438 100644
--- a/app/components/exporter.tsx
+++ b/app/components/exporter.tsx
@@ -619,10 +619,6 @@ export function JsonPreviewer(props: {
 }) {
   const msgs = {
     messages: [
-      {
-        role: "system",
-        content: `${Locale.FineTuned.Sysmessage} ${props.topic}`,
-      },
       ...props.messages.map((m) => ({
         role: m.role,
         content: m.content,
diff --git a/app/store/chat.ts b/app/store/chat.ts
index 56ac8db6c..4ec53bb13 100644
--- a/app/store/chat.ts
+++ b/app/store/chat.ts
@@ -519,10 +519,18 @@ export const useChatStore = createPersistStore(
             },
             onFinish(message) {
               get().updateCurrentSession(
-                (session) =>
-                  (session.topic =
-                    message.length > 0 ? trimTopic(message) : DEFAULT_TOPIC),
-              );
+                (session) => {
+                  session.topic =
+                    message.length > 0 ? trimTopic(message) : DEFAULT_TOPIC;
+                  // Add system message after summarizing the topic
+                  const systemMessage: ChatMessage = {
+                    role: "system",
+                    content: `${Locale.FineTuned.Sysmessage} ${session.topic}`,
+                    date: new Date().toLocaleString(),
+                    id: nanoid(),
+                  };
+                  session.messages = [systemMessage, ...session.messages];
+                });
             },
           });
         }

From 3b1ce9ee714a4be9f2f472ed73935e701dbac174 Mon Sep 17 00:00:00 2001
From: H0llyW00dzZ <priv8@btz.pm>
Date: Tue, 17 Oct 2023 18:55:29 +0700
Subject: [PATCH 3/4] Fix System Message

[+] fix(chat.ts): change schema for adding system message after summarizing the topic
---
 app/store/chat.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/store/chat.ts b/app/store/chat.ts
index 4ec53bb13..178579cf5 100644
--- a/app/store/chat.ts
+++ b/app/store/chat.ts
@@ -523,11 +523,12 @@ export const useChatStore = createPersistStore(
                   session.topic =
                     message.length > 0 ? trimTopic(message) : DEFAULT_TOPIC;
                   // Add system message after summarizing the topic
+                  // which is powerful based of fine-tuning
                   const systemMessage: ChatMessage = {
-                    role: "system",
-                    content: `${Locale.FineTuned.Sysmessage} ${session.topic}`,
                     date: new Date().toLocaleString(),
                     id: nanoid(),
+                    role: "system",
+                    content: `${Locale.FineTuned.Sysmessage} ${session.topic}`,
                   };
                   session.messages = [systemMessage, ...session.messages];
                 });

From 59d9fba0456ef1cc30303f2054a3e2c6c044a3e7 Mon Sep 17 00:00:00 2001
From: H0llyW00dzZ <priv8@btz.pm>
Date: Mon, 23 Oct 2023 10:21:13 +0700
Subject: [PATCH 4/4] Add Styles UI Page [Exporter]

[+] chore(exporter.module.scss): add new styles for .exporter-system.body
---
 app/components/exporter.module.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/app/components/exporter.module.scss b/app/components/exporter.module.scss
index c2046ffc0..ed6289f17 100644
--- a/app/components/exporter.module.scss
+++ b/app/components/exporter.module.scss
@@ -197,6 +197,12 @@
         }
       }
 
+      &-system {
+        .body {
+          background-color: var(--white);
+        }
+      }
+
       &-user {
         flex-direction: row-reverse;