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;