b5264a2560
# Pull Request Template ## Description This PR adds support for resizing the reply editor up to nearly half the screen height. It also deprecates the old modal-based pop-out reply box, clicking the same button now expands the editor inline. Users can adjust the height using the slider or the expand button. ## Type of change - [x] New feature (non-breaking change which adds functionality) ## How Has This Been Tested? ### Loom video https://www.loom.com/share/be27e1c06d19475ab404289710b3b0da ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [x] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules --------- Co-authored-by: Pranav <pranav@chatwoot.com>
95 lines
2.2 KiB
Vue
95 lines
2.2 KiB
Vue
<script setup>
|
|
import { ref } from 'vue';
|
|
import CopilotEditor from 'dashboard/components/widgets/WootWriter/CopilotEditor.vue';
|
|
import CaptainLoader from 'dashboard/components/widgets/conversation/copilot/CaptainLoader.vue';
|
|
|
|
defineProps({
|
|
showCopilotEditor: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
isGeneratingContent: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
generatedContent: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits([
|
|
'focus',
|
|
'blur',
|
|
'clearSelection',
|
|
'contentReady',
|
|
'send',
|
|
]);
|
|
|
|
const copilotEditorContent = ref('');
|
|
|
|
const onFocus = () => {
|
|
emit('focus');
|
|
};
|
|
|
|
const onBlur = () => {
|
|
emit('blur');
|
|
};
|
|
|
|
const clearEditorSelection = () => {
|
|
emit('clearSelection');
|
|
};
|
|
|
|
const onSend = () => {
|
|
emit('send', copilotEditorContent.value);
|
|
copilotEditorContent.value = '';
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<Transition
|
|
mode="out-in"
|
|
enter-active-class="transition-all duration-300 ease-out"
|
|
enter-from-class="opacity-0 translate-y-2 scale-[0.98]"
|
|
enter-to-class="opacity-100 translate-y-0 scale-100"
|
|
leave-active-class="transition-all duration-200 ease-in"
|
|
leave-from-class="opacity-100 translate-y-0 scale-100"
|
|
leave-to-class="opacity-0 translate-y-2 scale-[0.98]"
|
|
@after-enter="emit('contentReady')"
|
|
>
|
|
<CopilotEditor
|
|
v-if="showCopilotEditor && !isGeneratingContent"
|
|
key="copilot-editor"
|
|
v-model="copilotEditorContent"
|
|
class="copilot-editor"
|
|
:generated-content="generatedContent"
|
|
:min-height="4"
|
|
:enabled-menu-options="[]"
|
|
@focus="onFocus"
|
|
@blur="onBlur"
|
|
@clear-selection="clearEditorSelection"
|
|
@send="onSend"
|
|
/>
|
|
<div
|
|
v-else-if="isGeneratingContent"
|
|
key="loading-state"
|
|
class="bg-n-iris-5 rounded min-h-[4.75rem] w-full mb-4 p-4 flex items-start"
|
|
>
|
|
<div class="flex items-center gap-2">
|
|
<CaptainLoader class="text-n-iris-10 size-4" />
|
|
<span class="text-sm text-n-iris-10">
|
|
{{ $t('CONVERSATION.REPLYBOX.COPILOT_THINKING') }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.copilot-editor {
|
|
.ProseMirror-menubar {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|