From d287c70358ebcde39166fa612254c952d5ddaac2 Mon Sep 17 00:00:00 2001
From: wizardchen <wizardchen@tencent.com>
Date: Thu, 9 Jul 2026 00:06:53 +0800
Subject: [PATCH] feat(frontend): add inline session title rename in sidebar

Allow users to rename chat sessions from the sidebar menu with inline editing, API persistence, and i18n feedback.
---
 frontend/src/api/chat/index.ts                |  6 +-
 frontend/src/components/SessionSidebarRow.vue | 72 ++++++++++++++++++-
 frontend/src/components/menu.vue              | 24 ++++++-
 .../src/components/sessionTitleEdit.test.ts   | 17 +++++
 frontend/src/components/sessionTitleEdit.ts   |  5 ++
 frontend/src/i18n/locales/en-US.ts            |  3 +
 frontend/src/i18n/locales/ko-KR.ts            |  3 +
 frontend/src/i18n/locales/ru-RU.ts            |  3 +
 frontend/src/i18n/locales/zh-CN.ts            |  3 +
 9 files changed, 132 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/components/sessionTitleEdit.test.ts
 create mode 100644 frontend/src/components/sessionTitleEdit.ts

diff --git a/frontend/src/api/chat/index.ts b/frontend/src/api/chat/index.ts
index ff5b1c8d..6c2e57e6 100644
--- a/frontend/src/api/chat/index.ts
+++ b/frontend/src/api/chat/index.ts
@@ -26,6 +26,10 @@ export async function generateSessionsTitle(session_id: string, data: any) {
   return post(`/api/v1/sessions/${session_id}/generate_title`, data);
 }
 
+export async function updateSession(session_id: string, data: { title: string; description?: string }) {
+  return put(`/api/v1/sessions/${session_id}`, data);
+}
+
 export async function knowledgeChat(data: { session_id: string; query: string; }) {
   return postChat(`/api/v1/knowledge-chat/${data.session_id}`, { query: data.query, channel: "web" });
 }
@@ -75,4 +79,4 @@ export async function stopSession(session_id: string, message_id: string) {
 
 export async function clearSessionMessages(session_id: string) {
   return del(`/api/v1/sessions/${session_id}/messages`);
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/SessionSidebarRow.vue b/frontend/src/components/SessionSidebarRow.vue
index 8f534693..4a199cbc 100644
--- a/frontend/src/components/SessionSidebarRow.vue
+++ b/frontend/src/components/SessionSidebarRow.vue
@@ -17,7 +17,22 @@
       @click.stop
       @change="emit('toggle-select')"
     />
-    <span class="submenu_title" :class="batchMode ? 'submenu_title--batch' : ''" :title="item.title">
+    <form
+      v-if="titleEditing"
+      class="session-title-edit"
+      @submit.prevent="submitTitleEdit"
+      @click.stop
+    >
+      <input
+        ref="titleInputRef"
+        v-model="titleDraft"
+        class="session-title-edit__input"
+        :maxlength="SESSION_TITLE_MAX_LENGTH"
+        @keydown.esc.prevent="cancelTitleEdit"
+        @blur="submitTitleEdit"
+      />
+    </form>
+    <span v-else class="submenu_title" :class="batchMode ? 'submenu_title--batch' : ''" :title="item.title">
       <t-icon v-if="item.is_pinned" name="pin" class="submenu_pin_icon" />
       <span class="submenu_title-text">{{ item.title }}</span>
     </span>
@@ -64,6 +79,7 @@
 
 <script setup lang="ts">
 import { onBeforeUnmount, nextTick, ref } from 'vue'
+import { normalizeSessionTitleDraft, SESSION_TITLE_MAX_LENGTH } from './sessionTitleEdit'
 
 interface SessionMenuOption {
   content: string
@@ -72,7 +88,7 @@ interface SessionMenuOption {
   prefixIcon?: any
 }
 
-defineProps<{
+const props = defineProps<{
   item: { id: string; path: string; title: string; is_pinned?: boolean }
   batchMode: boolean
   activePath: string
@@ -86,6 +102,7 @@ const emit = defineEmits<{
   (e: 'navigate'): void
   (e: 'toggle-select'): void
   (e: 'menu-click', data: { value: string }): void
+  (e: 'rename-submit', data: { title: string }): void
   (e: 'hover-in'): void
   (e: 'hover-out'): void
 }>()
@@ -95,7 +112,10 @@ const MENU_GAP = 4
 const VIEWPORT_MARGIN = 8
 
 const menuOpen = ref(false)
+const titleEditing = ref(false)
+const titleDraft = ref('')
 const triggerRef = ref<HTMLButtonElement | null>(null)
+const titleInputRef = ref<HTMLInputElement | null>(null)
 const menuStyle = ref<Record<string, string>>({})
 
 const updateMenuPosition = (): void => {
@@ -138,7 +158,36 @@ const toggleMenu = (): void => {
   })
 }
 
+const startTitleEdit = (): void => {
+  closeMenu()
+  titleDraft.value = props.item.title || ''
+  titleEditing.value = true
+  nextTick(() => {
+    titleInputRef.value?.focus()
+    titleInputRef.value?.select()
+  })
+}
+
+const cancelTitleEdit = (): void => {
+  titleEditing.value = false
+  titleDraft.value = ''
+}
+
+const submitTitleEdit = (): void => {
+  if (!titleEditing.value) return
+  const nextTitle = normalizeSessionTitleDraft(titleDraft.value)
+  const currentTitle = normalizeSessionTitleDraft(props.item.title || '')
+  titleEditing.value = false
+  titleDraft.value = ''
+  if (!nextTitle || nextTitle === currentTitle) return
+  emit('rename-submit', { title: nextTitle })
+}
+
 const handleMenuClick = (option: SessionMenuOption): void => {
+  if (option.value === 'rename') {
+    startTitleEdit()
+    return
+  }
   closeMenu()
   emit('menu-click', { value: option.value })
 }
@@ -158,6 +207,25 @@ onBeforeUnmount(() => {
   flex: 0 0 auto;
 }
 
+.session-title-edit {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.session-title-edit__input {
+  width: 100%;
+  height: 26px;
+  padding: 0 8px;
+  border: 1px solid var(--td-brand-color);
+  border-radius: 5px;
+  color: var(--td-text-color-primary);
+  background: var(--td-bg-color-container);
+  font-size: 14px;
+  line-height: 24px;
+  outline: none;
+  box-shadow: 0 0 0 2px var(--td-brand-color-light);
+}
+
 .menu-more-wrap {
   display: inline-flex;
   align-items: center;
diff --git a/frontend/src/components/menu.vue b/frontend/src/components/menu.vue
index 486342d2..eb5a403f 100644
--- a/frontend/src/components/menu.vue
+++ b/frontend/src/components/menu.vue
@@ -153,6 +153,7 @@
                                             @navigate="gotopage(subitem.path)"
                                             @toggle-select="toggleBatchSelect(subitem.id)"
                                             @menu-click="handleSessionMenuClick($event, subitem)"
+                                            @rename-submit="renameSessionTitle(subitem, $event.title)"
                                             @hover-in="mouseenteBotDownr(subitem.id)" @hover-out="mouseleaveBotDown" />
                                     </div>
                                 </div>
@@ -201,7 +202,7 @@
 import { storeToRefs } from 'pinia';
 import { onMounted, onUnmounted, watch, computed, ref, h, nextTick } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import { getSessionsList, delSession, batchDelSessions, deleteAllSessions, clearSessionMessages, pinSession, unpinSession } from "@/api/chat/index";
+import { getSessionsList, delSession, batchDelSessions, deleteAllSessions, clearSessionMessages, pinSession, unpinSession, updateSession } from "@/api/chat/index";
 import { useChatResourcesStore } from '@/stores/chatResources';
 import { listAllIMChannels } from '@/api/agent/index';
 import SessionSidebarRow from './SessionSidebarRow.vue';
@@ -616,6 +617,7 @@ const buildSessionMenuOptions = (item: any) => {
         });
     }
     options.push(
+        { content: t('menu.renameSession'), value: 'rename', prefixIcon: () => h(TIcon, { name: 'edit-1', size: '16px' }) },
         { content: t('menu.clearMessages'), value: 'clearMessages', prefixIcon: () => h(TIcon, { name: 'clear', size: '16px' }) },
         { content: t('menu.batchManage'), value: 'batchManage', prefixIcon: () => h(TIcon, { name: 'queue', size: '16px' }) },
         { content: t('upload.deleteRecord'), value: 'delete', theme: 'error', prefixIcon: () => h(TIcon, { name: 'delete', size: '16px' }) },
@@ -638,6 +640,26 @@ const updateSessionInBuckets = (
     syncMenuStoreFromBuckets();
 };
 
+const renameSessionTitle = async (item: any, title: string) => {
+    try {
+        const res: any = await updateSession(item.id, {
+            title,
+            description: item.description || '',
+        });
+        if (res && res.success) {
+            updateSessionInBuckets(item.id, {
+                title: res.data?.title || title,
+                isNoTitle: false,
+            });
+            MessagePlugin.success(t('menu.renameSessionSuccess'));
+        } else {
+            MessagePlugin.error(t('menu.renameSessionFailed'));
+        }
+    } catch {
+        MessagePlugin.error(t('menu.renameSessionFailed'));
+    }
+};
+
 const togglePin = (item: any, pin: boolean) => {
     if (pinningIds.value.has(item.id)) return;
     pinningIds.value.add(item.id);
diff --git a/frontend/src/components/sessionTitleEdit.test.ts b/frontend/src/components/sessionTitleEdit.test.ts
new file mode 100644
index 00000000..9065abfe
--- /dev/null
+++ b/frontend/src/components/sessionTitleEdit.test.ts
@@ -0,0 +1,17 @@
+import assert from 'node:assert/strict'
+import test from 'node:test'
+
+import { normalizeSessionTitleDraft } from './sessionTitleEdit.ts'
+
+test('normalizeSessionTitleDraft trims whitespace and collapses inner runs', () => {
+  assert.equal(normalizeSessionTitleDraft('  Quarterly   summary\t review  '), 'Quarterly summary review')
+})
+
+test('normalizeSessionTitleDraft rejects blank titles after trimming', () => {
+  assert.equal(normalizeSessionTitleDraft(' \n\t '), '')
+})
+
+test('normalizeSessionTitleDraft caps long titles at 80 characters', () => {
+  const input = 'x'.repeat(90)
+  assert.equal(normalizeSessionTitleDraft(input), 'x'.repeat(80))
+})
diff --git a/frontend/src/components/sessionTitleEdit.ts b/frontend/src/components/sessionTitleEdit.ts
new file mode 100644
index 00000000..1bfe1379
--- /dev/null
+++ b/frontend/src/components/sessionTitleEdit.ts
@@ -0,0 +1,5 @@
+export const SESSION_TITLE_MAX_LENGTH = 80
+
+export function normalizeSessionTitleDraft(value: string): string {
+  return value.trim().replace(/\s+/g, ' ').slice(0, SESSION_TITLE_MAX_LENGTH)
+}
diff --git a/frontend/src/i18n/locales/en-US.ts b/frontend/src/i18n/locales/en-US.ts
index 11847533..8880e29e 100755
--- a/frontend/src/i18n/locales/en-US.ts
+++ b/frontend/src/i18n/locales/en-US.ts
@@ -15,6 +15,9 @@ export default {
     clearMessages: 'Clear Messages',
     clearMessagesSuccess: 'Messages cleared',
     clearMessagesFailed: 'Failed to clear messages, please try again later',
+    renameSession: 'Rename',
+    renameSessionSuccess: 'Title updated',
+    renameSessionFailed: 'Failed to update title, please try again later',
     batchManage: 'Batch Manage',
     newSession: 'New Chat',
     pin: 'Pin',
diff --git a/frontend/src/i18n/locales/ko-KR.ts b/frontend/src/i18n/locales/ko-KR.ts
index 0040cb54..b110c251 100755
--- a/frontend/src/i18n/locales/ko-KR.ts
+++ b/frontend/src/i18n/locales/ko-KR.ts
@@ -15,6 +15,9 @@ export default {
     clearMessages: "메시지 지우기",
     clearMessagesSuccess: "메시지가 지워졌습니다",
     clearMessagesFailed: "메시지 지우기 실패, 나중에 다시 시도해 주세요",
+    renameSession: "제목 수정",
+    renameSessionSuccess: "제목이 업데이트되었습니다",
+    renameSessionFailed: "제목 수정 실패, 나중에 다시 시도해 주세요",
     batchManage: "일괄 관리",
     newSession: "새 세션",
     pin: "고정",
diff --git a/frontend/src/i18n/locales/ru-RU.ts b/frontend/src/i18n/locales/ru-RU.ts
index 7ed1903c..cd3b2145 100755
--- a/frontend/src/i18n/locales/ru-RU.ts
+++ b/frontend/src/i18n/locales/ru-RU.ts
@@ -12,6 +12,9 @@ export default {
     clearMessages: 'Очистить сообщения',
     clearMessagesSuccess: 'Сообщения очищены',
     clearMessagesFailed: 'Не удалось очистить сообщения, попробуйте позже',
+    renameSession: 'Переименовать',
+    renameSessionSuccess: 'Название обновлено',
+    renameSessionFailed: 'Не удалось обновить название, попробуйте позже',
     batchManage: 'Пакетное управление',
     newSession: 'Новый диалог',
     pin: 'Закрепить',
diff --git a/frontend/src/i18n/locales/zh-CN.ts b/frontend/src/i18n/locales/zh-CN.ts
index de5a2f1b..1bc1d592 100755
--- a/frontend/src/i18n/locales/zh-CN.ts
+++ b/frontend/src/i18n/locales/zh-CN.ts
@@ -15,6 +15,9 @@ export default {
     clearMessages: "清空消息",
     clearMessagesSuccess: "消息已清空",
     clearMessagesFailed: "清空消息失败，请稍后再试",
+    renameSession: "修改标题",
+    renameSessionSuccess: "标题已更新",
+    renameSessionFailed: "修改标题失败，请稍后再试",
     batchManage: "批量管理",
     newSession: "新会话",
     pin: "置顶",