diff --git a/lib/AppInfo/Application.php b/lib/AppInfo/Application.php
index 82c977d0..2fc55a2e 100644
--- a/lib/AppInfo/Application.php
+++ b/lib/AppInfo/Application.php
@@ -64,7 +64,7 @@ class Application extends App implements IBootstrap {
 	public const TASK_CATEGORY_SPEECH_TO_TEXT = 2;
 
 	public const CHAT_USER_INSTRUCTIONS = 'This is a conversation in a specific language between {user} and you, Nextcloud Assistant. You are a kind, polite and helpful AI that helps {user} to the best of its abilities. If you do not understand something, you will ask for clarification. Detect the language that {user} is using. Make sure to use the same language in your response. Do not mention the language explicitly.';
-	public const CHAT_USER_INSTRUCTIONS_TITLE = 'Above is a chat session in a specific language between {user} and you, Nextcloud Assistant. Generate a suitable title summarizing the conversation in the same language and output only that.';
+	public const CHAT_USER_INSTRUCTIONS_TITLE = 'Above is a chat session in a specific language between {user} and you, Nextcloud Assistant. Generate a suitable title summarizing the conversation in the same language. Output only the title in plain text, nothing else.';
 
 	public function __construct(array $urlParams = []) {
 		parent::__construct(self::APP_ID, $urlParams);
diff --git a/src/components/ChattyLLM/ChattyLLMInputForm.vue b/src/components/ChattyLLM/ChattyLLMInputForm.vue
index f59d7bc0..ae27ac0b 100644
--- a/src/components/ChattyLLM/ChattyLLMInputForm.vue
+++ b/src/components/ChattyLLM/ChattyLLMInputForm.vue
@@ -24,18 +24,10 @@
 					:name="getSessionTitle(session)"
 					:title="getSessionTitle(session)"
 					:aria-description="getSessionTitle(session)"
-					:editable="true"
-					:edit-label="t('assistant', 'Edit Title')"
-					@click="onSessionSelect(session)"
-					@update:name="(newTitle) => onEditSessionTitle(session.id, newTitle)">
+					:editable="false"
+					:inline-actions="1"
+					@click="onSessionSelect(session)">
 					<template #actions>
-						<NcActionButton @click="onGenerateSessionTitle(session.id)">
-							<template #icon>
-								<AutoFixIcon v-if="!loading.titleGeneration" :size="20" />
-								<NcLoadingIcon v-else :size="20" />
-							</template>
-							{{ t('assistant', 'Generate Title') }}
-						</NcActionButton>
 						<NcActionButton @click="deleteSession(session.id)">
 							<template #icon>
 								<DeleteIcon v-if="!loading.sessionDelete" :size="20" />
@@ -49,7 +41,33 @@
 		</NcAppNavigation>
 		<NcAppContent class="session-area">
 			<div class="session-area__top-bar">
-				{{ getSessionTitle(active) }}
+				<div class="session-area__top-bar__title">
+					<EditableTextField v-if="active != null"
+						:initial-text="getSessionTitle(active)"
+						:editing.sync="editingTitle"
+						:placeholder="t('assistant', 'Conversation title')"
+						:edit-button-aria-label="t('assistant', 'Edit title')"
+						:loading="loading.updateTitle"
+						:max-length="140"
+						@submit-text="onEditSessionTitle" />
+				</div>
+				<div v-if="active != null" class="session-area__top-bar__actions">
+					<NcActions :open.sync="titleActionsOpen">
+						<NcActionButton :disabled="loading.titleGeneration || editingTitle" @click="onEditSessionTitleClick">
+							<template #icon>
+								<PencilIcon :size="20" />
+							</template>
+							{{ t('assistant', 'Edit Title') }}
+						</NcActionButton>
+						<NcActionButton :disabled="loading.titleGeneration || editingTitle" @click="onGenerateSessionTitle">
+							<template #icon>
+								<AutoFixIcon v-if="!loading.titleGeneration" :size="20" />
+								<NcLoadingIcon v-else :size="20" />
+							</template>
+							{{ t('assistant', 'Generate Title') }}
+						</NcActionButton>
+					</NcActions>
+				</div>
 			</div>
 			<div class="session-area__chat-area">
 				<NoSession v-if="loading.newSession"
@@ -110,11 +128,13 @@
 <script>
 import AutoFixIcon from 'vue-material-design-icons/AutoFix.vue'
 import DeleteIcon from 'vue-material-design-icons/Delete.vue'
+import PencilIcon from 'vue-material-design-icons/Pencil.vue'
 import PlusIcon from 'vue-material-design-icons/Plus.vue'
 
 import AssistantIcon from '../icons/AssistantIcon.vue'
 
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
 import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
 import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
@@ -124,6 +144,7 @@ import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 
 import ConversationBox from './ConversationBox.vue'
+import EditableTextField from './EditableTextField.vue'
 import InputArea from './InputArea.vue'
 import NoSession from './NoSession.vue'
 
@@ -146,11 +167,13 @@ export default {
 	components: {
 		AutoFixIcon,
 		DeleteIcon,
+		PencilIcon,
 		PlusIcon,
 
 		AssistantIcon,
 
 		NcActionButton,
+		NcActions,
 		NcAppContent,
 		NcAppNavigation,
 		NcAppNavigationItem,
@@ -160,6 +183,7 @@ export default {
 		NcLoadingIcon,
 
 		ConversationBox,
+		EditableTextField,
 		InputArea,
 		NoSession,
 	},
@@ -179,6 +203,7 @@ export default {
 				olderMessages: false,
 				llmGeneration: false,
 				titleGeneration: false,
+				updateTitle: false,
 				newHumanMessage: false,
 				newSession: false,
 				messageDelete: false,
@@ -186,6 +211,8 @@ export default {
 			},
 			msgCursor: 0,
 			msgLimit: 20,
+			titleActionsOpen: false,
+			editingTitle: false,
 		}
 	},
 
@@ -195,6 +222,7 @@ export default {
 			this.chatContent = ''
 			this.msgCursor = 0
 			this.messages = []
+			this.editingTitle = false
 			this.$refs.inputComponent.focus()
 
 			if (this.active != null && !this.loading.newSession) {
@@ -233,14 +261,27 @@ export default {
 			this.active = session
 		},
 
-		onEditSessionTitle(sessionId, newTitle) {
-			console.debug(sessionId, newTitle)
-			for (const session of this.sessions) {
-				if (session.id === sessionId) {
-					session.title = newTitle
-					this.updateTitle(sessionId, newTitle)
-					break
-				}
+		onEditSessionTitleClick() {
+			this.editingTitle = true
+			this.titleActionsOpen = false
+		},
+
+		async onEditSessionTitle(newTitle) {
+			this.loading.updateTitle = true
+			const session = this.sessions.find((session) => session.id === this.active.id)
+
+			try {
+				await axios.patch(getChatURL('/update_session'), {
+					sessionId: this.active.id,
+					title: newTitle,
+				})
+				this.editingTitle = false
+				session.title = newTitle
+			} catch (error) {
+				console.error('updateTitle error:', error)
+				showError(error?.response?.data?.error ?? t('assistant', 'Error updating conversations\'s title'))
+			} finally {
+				this.loading.updateTitle = false
 			}
 		},
 
@@ -288,28 +329,16 @@ export default {
 			this.fetchMessages(true)
 		},
 
-		async updateTitle(sessionId, title) {
-			try {
-				await axios.patch(getChatURL('/update_session'), {
-					sessionId,
-					title,
-				})
-			} catch (error) {
-				console.error('updateTitle error:', error)
-				showError(error?.response?.data?.error ?? t('assistant', 'Error updating session title'))
-			}
-		},
-
-		async onGenerateSessionTitle(sessionId) {
+		async onGenerateSessionTitle() {
 			try {
 				this.loading.titleGeneration = true
-				const response = await axios.get(getChatURL('/generate_title'), { params: { sessionId } })
+				const response = await axios.get(getChatURL('/generate_title'), { params: { sessionId: this.active.id } })
 				if (response?.data?.result == null) {
-					throw new Error('No title generated')
+					throw new Error('No title generated, response:', response)
 				}
 
 				for (const session of this.sessions) {
-					if (session.id === sessionId) {
+					if (session.id === this.active.id) {
 						session.title = response?.data?.result
 						break
 					}
@@ -632,6 +661,7 @@ export default {
 
 		&__top-bar {
 			display: flex;
+			justify-content: space-between;
 			align-items: center;
 			position: sticky;
 			top: 0;
@@ -639,8 +669,13 @@ export default {
 			box-sizing: border-box;
 			border-bottom: 1px solid var(--color-border);
 			padding-left: 4.5em;
+			padding-right: 0.5em;
 			font-weight: bold;
 			background-color: var(--color-main-background);
+
+			&__title {
+				width: 100%;
+			}
 		}
 
 		&__chat-area {
diff --git a/src/components/ChattyLLM/EditableTextField.vue b/src/components/ChattyLLM/EditableTextField.vue
new file mode 100644
index 00000000..0a692e10
--- /dev/null
+++ b/src/components/ChattyLLM/EditableTextField.vue
@@ -0,0 +1,286 @@
+<!--
+  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<div ref="editable-text-field" class="editable-text-field">
+		<NcRichText v-if="!editing"
+			class="editable-text-field__output"
+			dir="auto"
+			:text="text"
+			:autolink="false"
+			:use-extended-markdown="useMarkdown" />
+		<NcRichContenteditable v-else
+			ref="richContenteditable"
+			dir="auto"
+			:value.sync="text"
+			:auto-complete="()=>{}"
+			:maxlength="maxLength"
+			:multiline="multiline"
+			:contenteditable="!loading"
+			:placeholder="placeholder"
+			@submit="handleSubmitText"
+			@keydown.esc="handleCancelEditing" />
+		<template v-if="!loading">
+			<template v-if="editing">
+				<NcButton type="tertiary"
+					:aria-label="t('assistant', 'Cancel editing')"
+					@click="handleCancelEditing">
+					<template #icon>
+						<Close :size="20" />
+					</template>
+				</NcButton>
+				<NcButton type="primary"
+					:aria-label="t('assistant', 'Submit')"
+					:disabled="!canSubmit"
+					@click="handleSubmitText">
+					<template #icon>
+						<Check :size="20" />
+					</template>
+				</NcButton>
+				<div v-if="showCountDown"
+					v-tooltip.auto="countDownWarningText"
+					class="counter"
+					tabindex="0"
+					aria-label="countDownWarningText">
+					<span>{{ charactersCountDown }}</span>
+				</div>
+			</template>
+		</template>
+		<div v-if="loading" class="icon-loading-small spinner" />
+	</div>
+</template>
+
+<script>
+import Check from 'vue-material-design-icons/Check.vue'
+import Close from 'vue-material-design-icons/Close.vue'
+
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcRichContenteditable from '@nextcloud/vue/dist/Components/NcRichContenteditable.js'
+import NcRichText from '@nextcloud/vue/dist/Components/NcRichText.js'
+import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
+
+import { parseSpecialSymbols } from '../../utils.js'
+
+export default {
+	name: 'EditableTextField',
+	components: {
+		Check,
+		Close,
+		NcButton,
+		NcRichContenteditable,
+		NcRichText,
+	},
+
+	directives: {
+		Tooltip,
+	},
+
+	props: {
+		/**
+		 * The "outer" value of the text, coming from the store. Every time this changes,
+		 * the text value in this component is overwritten.
+		 */
+		initialText: {
+			type: String,
+			default: '',
+		},
+
+		/**
+		 * Shows or hides the editing buttons.
+		 */
+		editable: {
+			type: Boolean,
+			default: true,
+		},
+
+		/**
+		 * Toggles the text editing state on and off.
+		 */
+		editing: {
+			type: Boolean,
+			default: false,
+		},
+
+		/**
+		 * Placeholder for the contenteditable element.
+		 */
+		placeholder: {
+			type: String,
+			default: '',
+		},
+
+		/**
+		 * Toggles the loading state on and off.
+		 */
+		loading: {
+			type: Boolean,
+			default: false,
+		},
+
+		/**
+		 * Maximum text length in characters
+		 */
+		maxLength: {
+			type: Number,
+			default: 500,
+		},
+
+		editButtonAriaLabel: {
+			type: String,
+			required: true,
+		},
+
+		multiline: {
+			type: Boolean,
+			default: false,
+		},
+
+		useMarkdown: {
+			type: Boolean,
+			default: true,
+		},
+	},
+
+	emits: ['update:editing', 'submit-text'],
+
+	data() {
+		return {
+			text: this.initialText,
+			overflows: null,
+		}
+	},
+
+	computed: {
+		canSubmit() {
+			return this.charactersCount <= this.maxLength && this.text !== this.initialText
+		},
+
+		charactersCount() {
+			return this.text.length
+		},
+
+		charactersCountDown() {
+			return this.maxLength - this.charactersCount
+		},
+
+		showCountDown() {
+			return this.charactersCount >= this.maxLength - 20
+		},
+
+		countDownWarningText() {
+			return t('assistant', 'The text must be less than or equal to {maxLength} characters long. Your current text is {charactersCount} characters long.', {
+				maxLength: this.maxLength,
+				charactersCount: this.charactersCount,
+			})
+		},
+	},
+
+	watch: {
+		// Each time the prop changes, reflect the changes in the value stored in this component
+		initialText(newValue) {
+			this.text = newValue
+		},
+
+		editing(newValue) {
+			if (!newValue) {
+				this.text = this.initialText
+			} else {
+				this.$nextTick(() => {
+					this.$refs.richContenteditable.focus()
+				})
+			}
+		},
+	},
+
+	methods: {
+		handleEditText() {
+			this.$emit('update:editing', true)
+			this.$nextTick(() => {
+				// Focus and select rich text
+				this.$refs.richContenteditable.focus()
+
+				// TODO upstream: declare as select() method for NcRichContenteditable
+				const range = document.createRange()
+				range.selectNodeContents(this.$refs.richContenteditable.$refs.contenteditable)
+				window.getSelection().removeAllRanges()
+				window.getSelection().addRange(range)
+			})
+		},
+
+		handleSubmitText() {
+			if (!this.canSubmit) {
+				return
+			}
+
+			// Parse special symbols
+			this.text = parseSpecialSymbols(this.text)
+
+			// Submit text
+			this.$emit('submit-text', this.text)
+		},
+
+		handleCancelEditing() {
+			this.text = this.initialText
+			this.$emit('update:editing', false)
+			// Deselect all the text that's been selected in `handleEditText`
+			window.getSelection().removeAllRanges()
+		},
+	},
+}
+
+</script>
+
+<style lang="scss" scoped>
+// @import '../../assets/variables';
+// @import '../../assets/markdown';
+
+.editable-text-field {
+	display: flex;
+	width: 100%;
+	overflow: hidden;
+	position: relative;
+	min-height: var(--default-clickable-area);
+	align-items: flex-end;
+
+	&__edit {
+		margin-left: var(--default-clickable-area);
+	}
+
+	&__output {
+		width: 100%;
+		padding: 10px;
+		line-height: var(--default-line-height) !important;
+	}
+
+	// Restyle NcRichContenteditable component from our library.
+	:deep(.rich-contenteditable) {
+		flex-grow: 1;
+	}
+
+	:deep(.rich-text--wrapper) {
+		text-align: start;
+		// @include markdown;
+	}
+}
+
+.spinner {
+	width: var(--default-clickable-area);
+	height: var(--default-clickable-area);
+	margin: 0 0 0 44px;
+}
+
+.counter {
+	background-color: var(--color-background-dark);
+	height: 44px;
+	width: 44px;
+	border-radius: var(--border-radius-pill);
+	position: absolute;
+	top: 0;
+	right: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+</style>
diff --git a/src/utils.js b/src/utils.js
index 222a6494..7fe4b49f 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -5,3 +5,19 @@ export function delay(callback, ms = 0) {
 	clearTimeout(mytimer)
 	mytimer = setTimeout(callback, ms)
 }
+
+/**
+ * Parse special symbols in text like &amp; &lt; &gt; &sect;
+ * FIXME upstream: https://github.com/nextcloud-libraries/nextcloud-vue/issues/4492
+ *
+ * @param {string} text The text to parse
+ */
+export function parseSpecialSymbols(text) {
+	const temp = document.createElement('textarea')
+	temp.innerHTML = text.replace(/&/gmi, '&amp;')
+	text = temp.value.replace(/&amp;/gmi, '&').replace(/&lt;/gmi, '<')
+		.replace(/&gt;/gmi, '>').replace(/&sect;/gmi, '§')
+		.replace(/^\s+|\s+$/g, '') // remove trailing and leading whitespaces
+		.replace(/\r\n|\n|\r/gm, '\n') // remove line breaks
+	return text
+}