feat: message editable

public/locales/en/translation.json

@@ -20,7 +20,13 @@
     "abort": "Stop generating response",
     "retry": "Retry",
     "noModelAlert": "No available model",
-    "modelSettings": "Model Settings"
+    "modelSettings": "Model Settings",
+    "copy": "Copy",
+    "copied": "Copied",
+    "edit": "Edit",
+    "editDescription": "Editing this message will regenerate a new response",
+    "cancel": "Cancel",
+    "save": "Save"
   },
   "welcome": {
     "title": "Welcome to Dive AI",

public/locales/zh-CN/translation.json

@@ -20,7 +20,13 @@
     "abort": "停止生成回应",
     "retry": "重试",
     "noModelAlert": "无可用模型",
-    "modelSettings": "模型设置"
+    "modelSettings": "模型设置",
+    "copy": "复制",
+    "copied": "已复制",
+    "edit": "编辑",
+    "editDescription": "编辑此消息将重新生成一个新回复",
+    "cancel": "取消",
+    "save": "保存"
   },
   "welcome": {
     "title": "欢迎使用 Dive AI",

public/locales/zh-TW/translation.json

@@ -20,7 +20,13 @@
     "abort": "停止生成回應",
     "retry": "重試",
     "noModelAlert": "無可用模型",
-    "modelSettings": "模型設定"
+    "modelSettings": "模型設定",
+    "copy": "複製",
+    "copied": "已複製",
+    "edit": "編輯",
+    "editDescription": "編輯此訊息將會重新生成一個新的回應",
+    "cancel": "取消",
+    "save": "儲存"
   },
   "welcome": {
     "title": "歡迎使用 Dive AI",

src/styles/pages/_Chat.scss

@@ -39,13 +39,8 @@
   overflow-y: auto;
   padding: 15px 15px 0;
   margin-bottom: 0;
-  padding-bottom: 150px;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  top: 0;
-
+  padding-bottom: 45px;
+
   &::-webkit-scrollbar {
     width: 6px;
   }
@@ -64,17 +59,24 @@
 }
 
 .message-container {
-  padding: 5px 15px;
+  padding: 10px 15px;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
+  position: relative;
 
   .message-tools {
+    z-index: 1;
     display: none;
-    // display: flex;
     align-items: center;
-    justify-content: space-between;
-    width: 100%;
+    position: absolute;
+    left: 100%;
+    bottom: -4px;
+    transform: translate(-100%, 25%);
+    background: var(--bg-medium);
+    padding: 7px 10px;
+    border-radius: 8px;
+    gap: 10px;
 
     .message-page {
       display: flex;
@@ -95,20 +97,28 @@
       }
     }
 
-    .retry-btn {
+    .tools-btn {
       display: flex;
       align-items: center;
       gap: 8px;
       width: fit-content;
-      padding: 8px 12px;
-      background: var(--bg-op-dark-extremeweak);
-      border-radius: 6px;
+      height: 25px;
+      padding: 4px 7px;
+      border-radius: 4px;
       font-size: 14px;
       cursor: pointer;
       word-break: keep-all;
+      background: transparent;
+      border: none;
+
+      &:hover {
+        background: var(--bg-op-dark-extremeweak);
+      }
+
       svg {
         fill: currentColor;
       }
+
     }
   }
 
@@ -126,11 +136,8 @@
   border: 1px solid var(--border-weak);
   border-radius: 12px;
   position: relative;
-  z-index: 1;
-  position: absolute;
   bottom: 20px;
-  left: 0;
-  right: 0;
+  z-index: 1;
   background: var(--bg);
   color: var(--text);
 
@@ -153,6 +160,8 @@
       overflow-y: auto;
       background: var(--bg);
       color: var(--text);
+
+      @include scrollbar;
     }
   }
 
@@ -416,6 +425,81 @@
     }
   }
 
+  &.edit {
+    background: var(--bg-ultraweak);
+
+    .edit-text {
+      display: flex;
+      flex-direction: column;
+      gap: 15px;
+
+      textarea {
+        width: 600px;
+        max-width: 100%;
+        min-height: 80px;
+        max-height: 200px;
+        field-sizing: content;
+        padding: 8px;
+        border: 1px solid var(--border-weak);
+        border-radius: 8px;
+        outline: none;
+        resize: none;
+        line-height: 20px;
+        overflow-y: auto;
+        background: var(--bg);
+        color: var(--text);
+
+        @include scrollbar;
+      }
+
+      .edit-text-footer {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .edit-text-footer-left {
+          font-size: 14px;
+          color: var(--text-weak);
+        }
+
+        .edit-text-footer-right {
+          display: flex;
+          align-items: center;
+          gap: 15px;
+
+          button {
+            padding: 8px 16px;
+            border-radius: 8px;
+            border: none;
+            background: var(--bg-pri-blue);
+            color: white;
+            cursor: pointer;
+            transition: background 0.2s;
+
+            &:hover {
+              background: var(--bg-hover-blue);
+            }
+
+            &:disabled {
+              opacity: 0.5;
+              cursor: not-allowed;
+              background: var(--bg-hover-blue);
+            }
+
+            &.cancel-btn {
+              background: var(--bg);
+              color: var(--text);
+
+              &:hover {
+                background: var(--bg-btn-hover);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
   .code-block-button {
     display: inline-flex;
     align-items: center;
@@ -524,7 +608,7 @@
               &:hover {
                 background: rgba(0, 0, 0, 0.1);
               }
-              
+
               &.active {
                 background: rgba(0, 0, 0, 0.15);
               }
@@ -542,6 +626,8 @@
         margin: 0 !important;
         border-radius: 0 !important;
         height: 100% !important;
+
+        @include scrollbar;
       }
 
       .html-preview {

src/views/Chat/ChatMessages.tsx

@@ -17,9 +17,10 @@ interface Props {
   messages: Message[]
   isLoading?: boolean
   onRetry: (messageId: string) => void
+  onEdit: (messageId: string, newText: string) => void
 }
 
-const ChatMessages = ({ messages, isLoading, onRetry }: Props) => {
+const ChatMessages = ({ messages, isLoading, onRetry, onEdit }: Props) => {
   const messagesEndRef = useRef<HTMLDivElement>(null)
 
   const scrollToBottom = () => {
@@ -45,6 +46,7 @@ const ChatMessages = ({ messages, isLoading, onRetry }: Props) => {
           toolResults={message.toolResults}
           messageId={message.id}
           onRetry={() => onRetry(message.id)}
+          onEdit={(newText: string) => onEdit(message.id, newText)}
         />
       ))}
       <div ref={messagesEndRef} />