From fc508775017ebd48a87f7440505fe880cc9c637c Mon Sep 17 00:00:00 2001
From: H0llyW00dzZ <priv8@btz.pm>
Date: Tue, 28 Nov 2023 13:16:06 +0700
Subject: [PATCH] Refactor & Feat UI/UX Page [Chats] (#164)

* Chore Locales [Chats Page]

- [+] chore(locales): add "GeneratingImage" translation in cn.ts, en.ts, and id.ts

* Refactor & Feat UI/UX Page [Chats]

- [+] refactor(chat.tsx): simplify conditional rendering of typing status message
- [+] feat(chat.tsx): add support for displaying "Generating Image" status message for assistant using DALL-E model
---
 app/components/chat.tsx | 11 ++++++++---
 app/locales/cn.ts       |  1 +
 app/locales/en.ts       |  1 +
 app/locales/id.ts       |  1 +
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/app/components/chat.tsx b/app/components/chat.tsx
index bdeaf358076..c0ee58a2b8e 100644
--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@@ -1353,6 +1353,9 @@ function _Chat() {
         {messages.map((message, i) => {
           const isUser = message.role === "user";
           const isContext = i < context.length;
+          const isAssistant = message.role === "assistant";
+          const isDallEModel = session.mask.modelConfig.model.startsWith("dall-e");
+
           const showActions =
             i > 0 &&
             !(message.preview || message.content.length === 0) &&
@@ -1450,11 +1453,13 @@ function _Chat() {
                       </div>
                     )}
                   </div>
-                  {showTyping && (
+                  {showTyping && (isAssistant || isUser) ? (
                     <div className={styles["chat-message-status"]}>
-                      {Locale.Chat.Typing}
+                      {isAssistant && isDallEModel
+                        ? Locale.Chat.GeneratingImage
+                        : Locale.Chat.Typing}
                     </div>
-                  )}
+                  ) : null}
                   <div className={styles["chat-message-item"]}>
                     <Markdown
                       content={message.content}
diff --git a/app/locales/cn.ts b/app/locales/cn.ts
index b13036465aa..f5fb823740f 100644
--- a/app/locales/cn.ts
+++ b/app/locales/cn.ts
@@ -103,6 +103,7 @@ const cn = {
     },
     Rename: "重命名对话",
     Typing: "正在输入…",
+    GeneratingImage: "生成图片中...",
     Input: (submitKey: string) => {
       var inputHints = `${submitKey} 发送`;
       if (submitKey === String(SubmitKey.Enter)) {
diff --git a/app/locales/en.ts b/app/locales/en.ts
index d4e92011960..065c6aa7341 100644
--- a/app/locales/en.ts
+++ b/app/locales/en.ts
@@ -105,6 +105,7 @@ const en: LocaleType = {
     },
     Rename: "Rename Chat",
     Typing: "Typing…",
+    GeneratingImage: "Generating Images…",
     Input: (submitKey: string) => {
       var inputHints = `${submitKey} to send`;
       if (submitKey === String(SubmitKey.Enter)) {
diff --git a/app/locales/id.ts b/app/locales/id.ts
index a76e7a30b91..acb2cdeec0f 100644
--- a/app/locales/id.ts
+++ b/app/locales/id.ts
@@ -92,6 +92,7 @@ const id: PartialLocaleType = {
     },
     Rename: "Ubah Nama Chat",
     Typing: "Mengetik...",
+    GeneratingImage: "Menghasilkan Gambar...",
     Input: (submitKey: string) => {
       var inputHints = `${submitKey} untuk mengirim`;
       if (submitKey === String(SubmitKey.Enter)) {