Fix the bug of being unable to delete messages.

components/MessageActions.vue

@@ -41,7 +41,7 @@ const deleteMessage = async () => {
     method: 'DELETE'
   })
   if (!error.value) {
-    this.$emit('deleteMessage', props.messageIndex)
+    props.deleteMessage(props.messageIndex)
     showSnackbar('Deleted!')
   }
   showSnackbar('Delete failed')

components/MsgContent.vue

@@ -12,14 +12,19 @@ const md = new MarkdownIt({
   },
 })
 
-const props = defineProps(['content'])
+const props = defineProps({
+  message: {
+    type: Object,
+    required: true
+  }
+})
 
 const contentHtml = ref('')
 
 const contentElm = ref(null)
 
 watchEffect(() => {
-  contentHtml.value = props.content ? md.render(props.content) : ''
+  contentHtml.value = props.message.message ? md.render(props.message.message) : ''
 })
 
 const bindCopyCodeToButtons = () => {
@@ -54,11 +59,19 @@ onUpdated(() => {
 </script>
 
 <template>
+  <v-card
+      :color="message.is_bot ? '' : 'primary'"
+      rounded="lg"
+      elevation="2"
+  >
+    <v-card-text>
       <div
           ref="contentElm"
           v-html="contentHtml"
           class="chat-msg-content"
       ></div>
+    </v-card-text>
+  </v-card>
 </template>
 
 <style>

pages/index.vue

@@ -56,7 +56,7 @@ const fetchReply = async (message, parentMessageId) => {
   const data = Object.assign({}, currentModel.value, {
     openaiApiKey: openaiApiKey.value,
     message: message,
-    parentMessageId: parentMessageId,
+    // parentMessageId: parentMessageId,
     conversationId: currentConversation.value.id
   })
 
@@ -93,6 +93,13 @@ const fetchReply = async (message, parentMessageId) => {
           throw new Error(data.error);
         }
 
+        if (event === 'userMessageId') {
+          console.log(currentConversation.value.messages[currentConversation.value.messages.length - 1])
+          currentConversation.value.messages[currentConversation.value.messages.length - 1].id = data.userMessageId
+          console.log(currentConversation.value.messages[currentConversation.value.messages.length - 1])
+          return;
+        }
+
         if (event === 'done') {
           if (currentConversation.value.id === null) {
             currentConversation.value.id = data.conversationId
@@ -184,15 +191,7 @@ const deleteMessage = (index) => {
                 :use-prompt="usePrompt"
                 :delete-message="deleteMessage"
             />
-            <v-card
+            <MsgContent :message="message" />
-                :color="message.is_bot ? '' : 'primary'"
-                rounded="lg"
-                elevation="2"
-            >
-              <v-card-text>
-                <MsgContent :content="message.message" />
-              </v-card-text>
-            </v-card>
             <MessageActions
                 v-if="message.is_bot"
                 :message="message"