From c29ad9ba1710f30ffad78a1dfe268954ded25fe6 Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Wed, 15 Jul 2026 16:42:18 +0800
Subject: [PATCH] fix(ai): stabilize message hover layout

---
 .../src/components/editor/AiAssistant.vue     | 12 +++--
 packages/app-tests/aiMessageLayout.test.ts    | 44 +++++++++++++++++++
 2 files changed, 53 insertions(+), 3 deletions(-)
 create mode 100644 packages/app-tests/aiMessageLayout.test.ts

diff --git a/apps/desktop/src/components/editor/AiAssistant.vue b/apps/desktop/src/components/editor/AiAssistant.vue
index a29bd206db..f2d6aa1dc7 100644
--- a/apps/desktop/src/components/editor/AiAssistant.vue
+++ b/apps/desktop/src/components/editor/AiAssistant.vue
@@ -1799,7 +1799,7 @@ async function openExternalUrl(url: string) {
         <div class="flex flex-col gap-3 p-3">
           <template v-for="(msg, i) in visibleMessages" :key="i">
             <div v-if="msg.role === 'user'" class="group flex justify-end">
-              <div class="min-w-0 max-w-[85%]" :class="{ 'w-[85%]': editingMessageIndex === i }">
+              <div class="relative min-w-0 max-w-[85%]" :class="{ 'w-[85%]': editingMessageIndex === i }">
                 <template v-if="editingMessageIndex === i">
                   <div v-if="editingMentions.length" class="mb-1.5 flex flex-wrap justify-end gap-1">
                     <button
@@ -1831,8 +1831,14 @@ async function openExternalUrl(url: string) {
                   </div>
                 </template>
                 <template v-else>
-                  <div class="flex items-start gap-1">
-                    <button v-if="!isGenerating" class="mt-1 hidden h-5 w-5 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-muted hover:text-foreground group-hover:flex" :title="t('ai.editMessage')" @click="startEditMessage(i)">
+                  <div class="min-w-0">
+                    <!-- Keep the hover action out of normal flow so message wrapping stays stable. -->
+                    <button
+                      v-if="!isGenerating"
+                      class="pointer-events-none absolute right-full top-1 mr-1 flex h-5 w-5 items-center justify-center rounded text-muted-foreground opacity-0 transition-opacity hover:bg-muted hover:text-foreground focus:pointer-events-auto focus:opacity-100 group-hover:pointer-events-auto group-hover:opacity-100"
+                      :title="t('ai.editMessage')"
+                      @click="startEditMessage(i)"
+                    >
                       <Pencil class="h-3 w-3" />
                     </button>
                     <div class="min-w-0 rounded-lg bg-primary px-3 py-2 text-xs text-primary-foreground">
diff --git a/packages/app-tests/aiMessageLayout.test.ts b/packages/app-tests/aiMessageLayout.test.ts
new file mode 100644
index 0000000000..a60a7aab3b
--- /dev/null
+++ b/packages/app-tests/aiMessageLayout.test.ts
@@ -0,0 +1,44 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { test } from "vitest";
+import { compileTemplate, parse } from "vue/compiler-sfc";
+
+const aiAssistantPath = "apps/desktop/src/components/editor/AiAssistant.vue";
+const source = readFileSync(aiAssistantPath, "utf8");
+
+function userMessageTemplate(): string {
+  const start = source.indexOf(`<div v-if="msg.role === 'user'"`);
+  const end = source.indexOf(`<div v-else-if="msg.content || msg.reasoning || msg.isThinking"`, start);
+
+  assert.notEqual(start, -1, "user message template should exist");
+  assert.notEqual(end, -1, "assistant message template should follow user messages");
+  return source.slice(start, end);
+}
+
+test("AI assistant template compiles", () => {
+  const { descriptor, errors } = parse(source, { filename: aiAssistantPath });
+  assert.deepEqual(errors, []);
+  assert.ok(descriptor.template);
+
+  const result = compileTemplate({ id: aiAssistantPath, filename: aiAssistantPath, source: descriptor.template.content });
+  assert.deepEqual(result.errors, []);
+});
+
+test("user message edit action does not change short or wrapped message layout", () => {
+  const template = userMessageTemplate();
+
+  assert.match(template, /class="relative min-w-0 max-w-\[85%\]"/);
+  assert.match(template, /class="min-w-0"/);
+  assert.match(template, /absolute right-full top-1 mr-1 flex h-5 w-5/);
+  assert.match(template, /class="whitespace-pre-wrap"/);
+  assert.doesNotMatch(template, /\bhidden\b[^\n>]*group-hover:flex/);
+});
+
+test("user message edit action remains available by pointer and keyboard", () => {
+  const template = userMessageTemplate();
+
+  assert.match(template, /group-hover:pointer-events-auto group-hover:opacity-100/);
+  assert.match(template, /focus:pointer-events-auto focus:opacity-100/);
+  assert.match(template, /:title="t\('ai\.editMessage'\)"[\s\S]*?@click="startEditMessage\(i\)"/);
+  assert.match(template, /v-if="!isGenerating"/);
+});