diff --git a/src/components/fields/TextInput.vue b/src/components/fields/TextInput.vue index c9b9e243..0df983e1 100644 --- a/src/components/fields/TextInput.vue +++ b/src/components/fields/TextInput.vue @@ -9,7 +9,17 @@
{{ limitLabel ?? '' }} + + @update:model-value="$emit('update:value', $event)" + @blur="onEditableBlur" />
{ + const scrollableArea = this.$refs.input?.$el?.querySelector('#' + this.id) + if (scrollableArea) { + scrollableArea.scrollTo(0, scrollableArea.scrollHeight) + } + const richText = this.$refs.richText?.$el + if (richText) { + richText.scrollTo(0, richText.scrollHeight) + } + }) }, }, @@ -233,6 +253,39 @@ export default { showError(t('assistant', 'Result could not be copied to clipboard')) } }, + enterEditMode() { + if (!this.isOutput) { + return + } + this.isEditing = true + this.$nextTick(() => { + const ref = this.$refs.input + if (!ref) { + return + } + if (typeof ref.focus === 'function') { + ref.focus() + return + } + const el = ref.$el + if (!el) { + return + } + if (typeof el.focus === 'function') { + el.focus() + return + } + const editable = el.querySelector?.('[contenteditable]') + if (editable && typeof editable.focus === 'function') { + editable.focus() + } + }) + }, + onEditableBlur() { + if (this.isOutput && this.isEditing) { + this.isEditing = false + } + }, }, } @@ -272,6 +325,21 @@ body[dir="rtl"] .output-buttons { bottom: 2px; } + .output-wrapper { + display: block !important; + box-sizing: border-box !important; + border: 2px solid var(--color-primary-element) !important; + border-radius: var(--border-radius-large) !important; + padding: 8px !important; + padding-bottom: 42px !important; + min-height: calc(var(--default-clickable-area) * 3 + 4px); + max-height: 35vh !important; + overflow-y: auto !important; + .rendered-output, .rendered-output * { + cursor: text; + } + } + .rich-contenteditable__input { min-height: calc(var(--default-clickable-area) * 3 + 4px); padding-top: 5px !important; @@ -280,6 +348,7 @@ body[dir="rtl"] .output-buttons { .shadowed .rich-contenteditable__input { border: 2px solid var(--color-primary-element); padding-bottom: 38px !important; + max-height: 35vh !important; } .shadowed.streaming .rich-contenteditable__input { animation: pulse 2s infinite;