Merge 59d9fba045 into 06f897f32f

app/components/exporter.module.scss

@@ -252,6 +252,12 @@
         }
       }
 
+      &-system {
+        .body {
+          background-color: var(--white);
+        }
+      }
+
       &-user {
         flex-direction: row-reverse;
 

app/components/exporter.tsx

@@ -568,15 +568,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
+            <div className={messageClass} key={i}>
-              className={styles["message"] + " " + styles["message-" + m.role]}
-              key={i}
-            >
               <div className={styles["avatar"]}>
-                <ExportAvatar
+                <ExportAvatar avatar={avatar} />
-                  avatar={m.role === "user" ? config.avatar : mask.avatar}
-                />
               </div>
 
               <div className={styles["body"]}>
@@ -665,10 +672,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,

app/store/chat.ts

@@ -652,10 +652,19 @@ export const useChatStore = createPersistStore(
             onFinish(message) {
               if (!isValidMessage(message)) return;
               get().updateCurrentSession(
-                (session) =>
+                (session) => {
-                  (session.topic =
+                  session.topic =
-                    message.length > 0 ? trimTopic(message) : DEFAULT_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 = {
+                    date: new Date().toLocaleString(),
+                    id: nanoid(),
+                    role: "system",
+                    content: `${Locale.FineTuned.Sysmessage} ${session.topic}`,
+                  };
+                  session.messages = [systemMessage, ...session.messages];
+                });
             },
           });
         }