From e206fb900c3989552d28ad316cdc141d2e3d8c9d Mon Sep 17 00:00:00 2001
From: sijinhui <sijinhui@qq.com>
Date: Thu, 15 Feb 2024 10:51:12 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=AD=A3=EF=BC=8C?=
 =?UTF-8?q?=E6=9A=82=E5=81=9C=E6=8C=89=E9=92=AE=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/chat.module.scss |  35 +++++----
 app/components/chat.tsx         | 133 ++++++++++++++++++++++----------
 2 files changed, 110 insertions(+), 58 deletions(-)

diff --git a/app/components/chat.module.scss b/app/components/chat.module.scss
index 32300a9c4..456e13eb0 100644
--- a/app/components/chat.module.scss
+++ b/app/components/chat.module.scss
@@ -298,24 +298,24 @@
 .chat-message-header {
   margin-top: 20px;
   display: flex;
-  align-items: center;
+  align-items: flex-end;
+}
 
-  .chat-message-actions {
+.chat-message-actions {
+  display: flex;
+  box-sizing: border-box;
+  font-size: 12px;
+  align-items: flex-end;
+  justify-content: space-between;
+  transition: all ease 0.3s;
+  transform: scale(0.9) translateY(5px);
+  margin: 0 10px;
+  opacity: 0;
+  pointer-events: none;
+
+  .chat-input-actions {
     display: flex;
-    box-sizing: border-box;
-    font-size: 12px;
-    align-items: flex-end;
-    justify-content: space-between;
-    transition: all ease 0.3s;
-    transform: scale(0.9) translateY(5px);
-    margin: 0 10px;
-    opacity: 0;
-    pointer-events: none;
-
-    .chat-input-actions {
-      display: flex;
-      flex-wrap: nowrap;
-    }
+    flex-wrap: nowrap;
   }
 }
 
@@ -431,10 +431,11 @@
   white-space: nowrap;
   transition: all ease 0.6s;
   color: var(--black);
-  text-align: right;
+  text-align: left;
   width: 100%;
   box-sizing: border-box;
   padding-right: 10px;
+  padding-left: 10px;
   pointer-events: none;
   z-index: 1;
 }
diff --git a/app/components/chat.tsx b/app/components/chat.tsx
index 4f1c6c764..0bef821b6 100644
--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@@ -1258,44 +1258,50 @@ function _Chat() {
                       )}
                     </div>
 
-                    {showActions && (
-                      <div className={styles["chat-message-actions"]}>
-                        <div className={styles["chat-input-actions"]}>
-                          {message.streaming ? (
-                            <ChatAction
-                              text={Locale.Chat.Actions.Stop}
-                              icon={<StopIcon />}
-                              onClick={() => onUserStop(message.id ?? i)}
-                            />
-                          ) : (
-                            <>
-                              <ChatAction
-                                text={Locale.Chat.Actions.Retry}
-                                icon={<ResetIcon />}
-                                onClick={() => onResend(message)}
-                              />
+                    <div className={styles["chat-message-action-date"]}>
+                      {isContext
+                        ? Locale.Chat.IsContext
+                        : message.date.toLocaleString()}
+                    </div>
 
-                              <ChatAction
-                                text={Locale.Chat.Actions.Delete}
-                                icon={<DeleteIcon />}
-                                onClick={() => onDelete(message.id ?? i)}
-                              />
+                    {/*{showActions && (*/}
+                    {/*  <div className={styles["chat-message-actions"]}>*/}
+                    {/*    <div className={styles["chat-input-actions"]}>*/}
+                    {/*      {message.streaming ? (*/}
+                    {/*        <ChatAction*/}
+                    {/*          text={Locale.Chat.Actions.Stop}*/}
+                    {/*          icon={<StopIcon />}*/}
+                    {/*          onClick={() => onUserStop(message.id ?? i)}*/}
+                    {/*        />*/}
+                    {/*      ) : (*/}
+                    {/*        <>*/}
+                    {/*          <ChatAction*/}
+                    {/*            text={Locale.Chat.Actions.Retry}*/}
+                    {/*            icon={<ResetIcon />}*/}
+                    {/*            onClick={() => onResend(message)}*/}
+                    {/*          />*/}
 
-                              <ChatAction
-                                text={Locale.Chat.Actions.Pin}
-                                icon={<PinIcon />}
-                                onClick={() => onPinMessage(message)}
-                              />
-                              <ChatAction
-                                text={Locale.Chat.Actions.Copy}
-                                icon={<CopyIcon />}
-                                onClick={() => copyToClipboard(message.content)}
-                              />
-                            </>
-                          )}
-                        </div>
-                      </div>
-                    )}
+                    {/*          <ChatAction*/}
+                    {/*            text={Locale.Chat.Actions.Delete}*/}
+                    {/*            icon={<DeleteIcon />}*/}
+                    {/*            onClick={() => onDelete(message.id ?? i)}*/}
+                    {/*          />*/}
+
+                    {/*          <ChatAction*/}
+                    {/*            text={Locale.Chat.Actions.Pin}*/}
+                    {/*            icon={<PinIcon />}*/}
+                    {/*            onClick={() => onPinMessage(message)}*/}
+                    {/*          />*/}
+                    {/*          <ChatAction*/}
+                    {/*            text={Locale.Chat.Actions.Copy}*/}
+                    {/*            icon={<CopyIcon />}*/}
+                    {/*            onClick={() => copyToClipboard(message.content)}*/}
+                    {/*          />*/}
+                    {/*        </>*/}
+                    {/*      )}*/}
+                    {/*    </div>*/}
+                    {/*  </div>*/}
+                    {/*)}*/}
                   </div>
                   {showTyping && (
                     <div className={styles["chat-message-status"]}>
@@ -1413,11 +1419,56 @@ function _Chat() {
                       </div>
                     )}
 
-                  <div className={styles["chat-message-action-date"]}>
-                    {isContext
-                      ? Locale.Chat.IsContext
-                      : message.date.toLocaleString()}
-                  </div>
+                  {/*<div className={styles["chat-message-action-date"]}>*/}
+                  {/*  {isContext*/}
+                  {/*    ? Locale.Chat.IsContext*/}
+                  {/*    : message.date.toLocaleString()}*/}
+                  {/*</div>*/}
+
+                  {showActions && (
+                    <div
+                      className={styles["chat-message-actions"]}
+                      style={{
+                        marginTop: "10px",
+                        marginBottom: "0px",
+                      }}
+                    >
+                      <div className={styles["chat-input-actions"]}>
+                        {message.streaming ? (
+                          <ChatAction
+                            text={Locale.Chat.Actions.Stop}
+                            icon={<StopIcon />}
+                            onClick={() => onUserStop(message.id ?? i)}
+                          />
+                        ) : (
+                          <>
+                            <ChatAction
+                              text={Locale.Chat.Actions.Retry}
+                              icon={<ResetIcon />}
+                              onClick={() => onResend(message)}
+                            />
+
+                            <ChatAction
+                              text={Locale.Chat.Actions.Delete}
+                              icon={<DeleteIcon />}
+                              onClick={() => onDelete(message.id ?? i)}
+                            />
+
+                            <ChatAction
+                              text={Locale.Chat.Actions.Pin}
+                              icon={<PinIcon />}
+                              onClick={() => onPinMessage(message)}
+                            />
+                            <ChatAction
+                              text={Locale.Chat.Actions.Copy}
+                              icon={<CopyIcon />}
+                              onClick={() => copyToClipboard(message.content)}
+                            />
+                          </>
+                        )}
+                      </div>
+                    </div>
+                  )}
                 </div>
               </div>
               {shouldShowClearContextDivider && <ClearContextDivider />}