feat(chat): add message editing & regeneration (M8.1)

Pencil icon on hover for user messages to edit inline. Regenerate
icon on assistant messages to re-send from the same prompt. Editing
clears all subsequent messages and triggers a fresh AI response.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

packages/app/src/components/chat/ChatMessage.vue

@@ -1,25 +1,73 @@
 <template>
   <div
-    class="flex animate-fade-up-fast"
+    class="group/msg flex animate-fade-up-fast"
     :class="isUser ? 'justify-end' : 'justify-start'"
     :style="{ animationDelay: `${index * 30}ms` }"
   >
-    <div
-      class="max-w-[85%] md:max-w-[75%] rounded-2xl px-4 py-3 transition-all duration-300"
-      :class="[bubbleClasses, { 'cursor-pointer': hasContext }]"
-      @click="handleBubbleClick"
-    >
+    <div class="relative max-w-[85%] md:max-w-[75%]">
+      <!-- Action buttons (hover on desktop, always visible on touch) -->
       <div
-        v-if="!isUser"
-        class="chat-markdown text-sm leading-relaxed break-words"
-        :class="isDark ? 'text-white/90' : 'text-gray-800'"
-        v-html="renderedMarkdown"
-      />
-      <p
-        v-else
-        class="text-sm leading-relaxed whitespace-pre-wrap break-words"
-        :class="isDark ? 'text-white/90' : 'text-gray-800'"
-      >{{ displayText }}</p>
+        v-if="!isEditing"
+        class="absolute -top-3 opacity-0 group-hover/msg:opacity-100 transition-opacity duration-200 z-10 flex gap-1"
+        :class="isUser ? 'right-1' : 'left-1'"
+      >
+        <button
+          v-if="isUser"
+          class="glass-button-sm !h-7 !min-h-0 !w-7 !min-w-0 !px-0 flex items-center justify-center text-white/60 hover:text-white/90"
+          title="Edit message"
+          @click.stop="startEditing"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 20 20" fill="currentColor"><path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" /></svg>
+        </button>
+        <button
+          v-if="!isUser"
+          class="glass-button-sm !h-7 !min-h-0 !w-7 !min-w-0 !px-0 flex items-center justify-center text-white/60 hover:text-white/90"
+          title="Regenerate response"
+          @click.stop="$emit('regenerate')"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd" /></svg>
+        </button>
+      </div>
+
+      <div
+        class="rounded-2xl px-4 py-3 transition-all duration-300"
+        :class="[bubbleClasses, { 'cursor-pointer': hasContext }]"
+        @click="handleBubbleClick"
+      >
+        <!-- Edit mode -->
+        <div v-if="isEditing" class="space-y-2" @click.stop>
+          <textarea
+            ref="editTextareaRef"
+            v-model="editContent"
+            class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-white/90 resize-none focus:outline-none focus:border-accent/50"
+            rows="3"
+            @keydown.enter.exact="submitEdit"
+            @keydown.escape="cancelEdit"
+          />
+          <div class="flex gap-2 justify-end">
+            <button
+              class="glass-button-sm !h-7 !min-h-0 text-xs text-white/60 hover:text-white/90 px-3"
+              @click="cancelEdit"
+            >Cancel</button>
+            <button
+              class="glass-button-sm !h-7 !min-h-0 text-xs bg-accent/20 text-accent hover:bg-accent/30 px-3"
+              @click="submitEdit"
+            >Save & Resend</button>
+          </div>
+        </div>
+
+        <!-- Normal display -->
+        <template v-else>
+          <div
+            v-if="!isUser"
+            class="chat-markdown text-sm leading-relaxed break-words text-white/90"
+            v-html="renderedMarkdown"
+          />
+          <p
+            v-else
+            class="text-sm leading-relaxed whitespace-pre-wrap break-words text-white/90"
+          >{{ displayText }}</p>
+        </template>
 
       <div v-if="inlineFilms.length > 0" class="mt-3 space-y-1" @click.stop>
         <FilmCard
@@ -109,9 +157,9 @@
         />
       </div>
 
-      <div class="flex items-center gap-2 mt-1.5">
-        <span class="text-[10px] select-none"
-              :class="isDark ? 'text-white/30' : 'text-gray-400'">{{ formattedTime }}</span>
+      <div v-if="!isEditing" class="flex items-center gap-2 mt-1.5">
+        <span class="text-[10px] select-none text-white/30">{{ formattedTime }}</span>
+        <span v-if="message.editedAt" class="text-[10px] text-white/25 select-none">(edited)</span>
         <button
           v-if="inlineFilms.length > 1"
           class="text-[10px] text-accent/70 hover:text-accent transition-colors"
@@ -183,12 +231,13 @@
           View brief →
         </button>
       </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref, nextTick } from 'vue'
 import MarkdownIt from 'markdown-it'
 import type { Message, WebSearchResult } from '@aiui/core/types/message'
 import type { Film, Song, Podcast, Book, TVSeries, ImageItem, Place } from '@aiui/core/types/content'
@@ -215,7 +264,43 @@ const props = withDefaults(
   { triggeringQuery: '' }
 )
 
+const emit = defineEmits<{
+  edit: [messageId: string, newContent: string]
+  regenerate: []
+}>()
+
 const { isDark } = useTheme()
+
+// Editing state
+const isEditing = ref(false)
+const editContent = ref('')
+const editTextareaRef = ref<HTMLTextAreaElement | null>(null)
+
+function startEditing() {
+  editContent.value = props.message.content
+  isEditing.value = true
+  nextTick(() => {
+    editTextareaRef.value?.focus()
+    // Auto-size textarea
+    if (editTextareaRef.value) {
+      editTextareaRef.value.style.height = 'auto'
+      editTextareaRef.value.style.height = editTextareaRef.value.scrollHeight + 'px'
+    }
+  })
+}
+
+function cancelEdit() {
+  isEditing.value = false
+  editContent.value = ''
+}
+
+function submitEdit() {
+  const trimmed = editContent.value.trim()
+  if (!trimmed) return
+  emit('edit', props.message.id, trimmed)
+  isEditing.value = false
+  editContent.value = ''
+}
 const { getContextualInlineContent, stripContentTags, stripMarkdownLinks, updatePanelFromText, panelOpen, availableTabs, setActiveTab, openFilmDetail, openBookDetail, openTVSeriesDetail, openImageDetail, openPlaceDetail, openSongDetail, openPodcastDetail, openArticleDetail, openWebsiteDetail, closeFilmDetail, closeBookDetail, closeTVSeriesDetail, closeImageDetail, closePlaceDetail, closeSongDetail, closePodcastDetail } = useContentPanel()
 const codeContext = useCodeContext()