feat: support delete message

gui/src/commands.rs

@@ -152,6 +152,13 @@ pub async fn delete_chat(chat_id: Id, chat_service: State<'_, ChatService>) -> R
     Ok(())
 }
 
+#[tauri::command]
+pub async fn delete_chat_log(log_id: Id, chat_service: State<'_, ChatService>) -> Result<()> {
+    chat_service.delete_chat_log(log_id)?;
+
+    Ok(())
+}
+
 #[tauri::command]
 pub async fn export_markdown(
     chat_id: Uuid,

gui/src/main.rs

@@ -59,6 +59,7 @@ async fn main() {
             commands::move_non_stick_chat,
             commands::all_archive_chats,
             commands::set_chat_archive,
+            commands::delete_chat_log,
             commands::send_message,
             commands::resend_message,
             commands::get_chat_models,

gui/web/src/api/index.ts

@@ -182,6 +182,10 @@ export async function moveNonStickChat(from: string, to: string) {
   return invoke<void>("move_non_stick_chat", { from, to });
 }
 
+export async function deleteChatLog(logId: string) {
+  return invoke<void>("delete_chat_log", { logId });
+}
+
 export function sendMessage(chatId: string, message: string) {
   return invoke<[string, string]>("send_message", { chatId, message });
 }

gui/web/src/components/chat/Chat.tsx

@@ -102,6 +102,7 @@ export default defineComponent({
           ref={historyRef}
           messages={props.chat.messages}
           resendMessage={resendMessage}
+          deleteMessage={props.chat.deleteLog}
         ></History>
 
         <UserInput

gui/web/src/components/chat/History.tsx

@@ -1,4 +1,4 @@
-import { NButton, NScrollbar } from "naive-ui";
+import { NButton, NPopconfirm, NScrollbar, NSpace } from "naive-ui";
 import {
   computed,
   defineComponent,
@@ -20,7 +20,7 @@ import {
 import { writeToClipboard } from "../../utils/clipboard";
 import { interceptLink } from "../../utils/interceptLink";
 import mdRender from "../../utils/mdRender";
-import { message } from "../../utils/prompt";
+import { dialog, message } from "../../utils/prompt";
 
 export default defineComponent({
   props: {
@@ -31,6 +31,9 @@ export default defineComponent({
     resendMessage: {
       type: Function as PropType<(messageId: string) => void>,
     },
+    deleteMessage: {
+      type: Function as PropType<(messageId: string) => void>,
+    },
   },
   setup(props, { expose }) {
     const { t } = useI18n();
@@ -120,64 +123,74 @@ export default defineComponent({
       const html = mdRender(content);
       return (
         <div
-          class="flex relative justify-start items-start pl-4 pr-24"
+          key={msg.id}
+          class="flex justify-start items-start pl-4 pr-24 pb-4 group"
           id={`assistant-${msg.id}`}
         >
-          <div class="relative flex-1 overflow-hidden">
+          <div class="relative">
             <div
-              class="markdown-root inline-block px-3 ml-2 rounded-t-xl rounded-r-xl z-1"
+              class="markdown-root inline-block px-3 py-2 ml-2 rounded-t-xl rounded-r-xl z-1"
               style="background-color: var(--assistant-msg-bg-color); color: var(--assistant-msg-color)"
               v-html={html}
             ></div>
+            {msg.done ? (
+              <div class="group-hover:block hidden absolute bottom-[-1.2rem] left-0 text-xs">
+                <NSpace size="small">
+                  <NButton
+                    type="default"
+                    text
+                    size="tiny"
+                    class="ml-2 text-gray-500"
+                    onClick={async () => {
+                      await writeToClipboard(msg.content);
+                      message.success(t("common.copy.success"));
+                    }}
+                  >
+                    {t("common.copy")}
+                  </NButton>
+                  {renderDeleteMessageButton(msg.id)}
+                </NSpace>
+              </div>
+            ) : null}
           </div>
-          {msg.done ? (
-            <div class="absolute bottom-[-1.2rem] left-4 text-xs">
-              <NButton
-                type="default"
-                text
-                size="tiny"
-                class="ml-2 text-gray-500"
-                onClick={async () => {
-                  await writeToClipboard(msg.content);
-                  message.success(t("common.copy.success"));
-                }}
-              >
-                {t("common.copy")}
-              </NButton>
-            </div>
-          ) : null}
         </div>
       );
     }
 
     function renderUserMessage(message: UserMessage) {
       return (
-        <div class="flex justify-end items-start pr-4 pl-24">
+        <div
+          key={message.id}
+          class="flex justify-end items-start pr-4 pl-24 pb-4 group"
+        >
           <div class="relative">
             <div
               class="inline-block py-2 px-3 mr-1 rounded-l-xl rounded-t-xl"
               style="background-color: var(--user-msg-bg-color); color: var(--user-msg-color)"
             >
-              <pre class="break-words whitespace-pre-line">
+              <div class="break-words whitespace-pre-line">
                 {message.content}
-              </pre>
+              </div>
             </div>
-            <div class="absolute bottom-[-1.2rem] right-1 text-xs">
-              {(() => {
-                if (message.finished === false) {
-                  return (
-                    <NButton
-                      type="error"
-                      text
-                      size="tiny"
-                      class="mr-2"
-                      onClick={() => props.resendMessage?.(message.id)}
-                    >
-                      resend
-                    </NButton>
-                  );
-                }
-              })()}
+            <div class="group-hover:block hidden absolute bottom-[-1.2rem] right-0 text-xs">
+              <NSpace size="small">
+                {(() => {
+                  if (message.finished === false) {
+                    return (
+                      <NButton
+                        type="error"
+                        text
+                        size="tiny"
+                        class="mr-2"
+                        onClick={() => props.resendMessage?.(message.id)}
+                      >
+                        {t("chat.message.resend")}
+                      </NButton>
+                    );
+                  }
+                })()}
+                {renderDeleteMessageButton(message.id)}
+              </NSpace>
             </div>
           </div>
         </div>
@@ -203,7 +216,7 @@ export default defineComponent({
                 }
                 case "api": {
                   const error = message.error.error;
-                  return error.message;
+                  return error.message ?? error.type;
                 }
               }
             })()}
@@ -212,11 +225,26 @@ export default defineComponent({
       );
     }
 
+    function renderDeleteMessageButton(messageId: string) {
+      return (
+        <NPopconfirm onPositiveClick={() => props.deleteMessage?.(messageId)}>
+          {{
+            trigger: () => (
+              <NButton type="error" text size="tiny">
+                {t("common.delete")}
+              </NButton>
+            ),
+            default: () => t("chat.message.delete.hint"),
+          }}
+        </NPopconfirm>
+      );
+    }
+
     return (() => (
       <div class="flex-1 flex flex-col overflow-hidden">
         <div class="flex-1 overflow-hidden">
           <NScrollbar ref={scrollRef} class="py-4">
-            <div class="grid gap-6 pb-6">
+            <div class="grid gap-4 pb-6">
               {props.messages.map((message, index) => (
                 <div key={index}>{renderMessage(message)} </div>
               ))}

gui/web/src/i18n/enUS.ts

@@ -21,6 +21,9 @@ export const messages = {
   "chat.archive": "Archive",
   "chat.busy": "Please wait for the previous response to complete.",
 
+  "chat.message.resend": 'resend',
+  "chat.message.delete.hint": 'Are you sure to delete this message?',
+
   "chat.config.model": "Model",
   "chat.config.model.hint": "ID of the model to use.",
   "chat.config.maxBacktrack": "Max Backtrack",

gui/web/src/i18n/zhCN.ts

@@ -23,6 +23,9 @@ const messages: Messages = {
   "chat.archive": "归档",
   "chat.busy": "请等待上一条响应完成",
 
+  "chat.message.resend": '重新发送',
+  "chat.message.delete.hint": '确定要删除此消息吗？',
+
   "chat.config.model": "模型",
   "chat.config.model.hint": "要使用的模型的ID。",
   "chat.config.maxBacktrack": "最大回溯",

gui/web/src/models/chat.ts

@@ -8,6 +8,7 @@ import {
   ChatLog,
   getChat,
   updateChat,
+  deleteChatLog,
 } from "../api";
 import {
   AssistantMessage,
@@ -52,6 +53,12 @@ export class Chat {
     return new Chat(chat, messages);
   }
 
+  async deleteLog(logId: string) {
+    await deleteChatLog(logId);
+    const index = this.messages.findIndex((item) => item.id === logId);
+    this.messages.splice(index, 1)
+  }
+
   async sendMessage(message: string, params?: { onFinish?: () => void }) {
     const userMessage = reactive(new UserMessage(message));
     this.messages.push(userMessage);

gui/web/src/models/message.ts

@@ -80,6 +80,6 @@ export type ErrorData =
       type: "api";
       error: {
         type: string;
-        message: string;
+        message?: string;
       };
     };

gui/web/src/style.css

@@ -25,11 +25,13 @@ html, body, #app {
   padding: 0;
 }
 
-.markdown-root *{
+.markdown-root pre {
   white-space: pre-wrap;
   word-break: break-word;
 }
 
+.markdown-root 
+
 .markdown-root p {
   margin: .5rem 0;
 }