b103747584
# Pull Request Template ## Description CJK language users (Chinese, Japanese, Korean, etc.) use IME where Enter confirms character selection. AI input components were intercepting Enter unconditionally, making them unusable for IME users. Add `event.isComposing` check to CopilotEditor, CopilotInput, and AssistantPlayground so Enter during active IME composition is ignored. ## Type of change Please delete options that are not relevant. - [x] Bug fix (non-breaking change which fixes an issue) ## How Has This Been Tested? Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration. Before: Add a Japenese keyboard, then go to AI follow-ups, type some word, selecting it with enter submits the follow up. So CJK users cannot use follow-ups. https://github.com/user-attachments/assets/53517432-d97b-47fc-a802-81675e31d5c9 After: Type a word, press enter to choose it, press enter again to unselect it and enter again to send https://github.com/user-attachments/assets/6c2a420b-7ee6-4c71-82a6-d9f1d7bbf31a ## 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 - [x] 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 - [x] Any dependent changes have been merged and published in downstream modules --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
62 lines
1.7 KiB
Vue
62 lines
1.7 KiB
Vue
<script setup>
|
|
import { ref, nextTick, onMounted } from 'vue';
|
|
|
|
const emit = defineEmits(['send']);
|
|
const message = ref('');
|
|
const textareaRef = ref(null);
|
|
|
|
const adjustHeight = () => {
|
|
if (!textareaRef.value) return;
|
|
|
|
// Reset height to auto to get the correct scrollHeight
|
|
textareaRef.value.style.height = 'auto';
|
|
// Set the height to the scrollHeight
|
|
textareaRef.value.style.height = `${textareaRef.value.scrollHeight}px`;
|
|
};
|
|
|
|
const sendMessage = () => {
|
|
if (message.value.trim()) {
|
|
emit('send', message.value);
|
|
message.value = '';
|
|
// Reset textarea height after sending
|
|
nextTick(() => {
|
|
adjustHeight();
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleInput = () => {
|
|
nextTick(adjustHeight);
|
|
};
|
|
|
|
const handleEnterKey = event => {
|
|
if (event.isComposing) return;
|
|
event.preventDefault();
|
|
sendMessage();
|
|
};
|
|
|
|
onMounted(() => {
|
|
nextTick(adjustHeight);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<form class="relative" @submit.prevent="sendMessage">
|
|
<textarea
|
|
ref="textareaRef"
|
|
v-model="message"
|
|
:placeholder="$t('CAPTAIN.COPILOT.SEND_MESSAGE')"
|
|
class="w-full reset-base bg-n-alpha-3 ltr:pl-4 ltr:pr-12 rtl:pl-12 rtl:pr-4 py-3 text-sm border border-n-weak rounded-lg focus:outline-0 focus:outline-none focus:ring-2 focus:ring-n-blue-11 focus:border-n-blue-11 resize-none overflow-hidden max-h-[200px] mb-0 text-n-slate-12"
|
|
rows="1"
|
|
@input="handleInput"
|
|
@keydown.enter.exact="handleEnterKey"
|
|
/>
|
|
<button
|
|
class="absolute ltr:right-1 rtl:left-1 top-1/2 -translate-y-1/2 h-9 w-10 flex items-center justify-center text-n-slate-11 hover:text-n-blue-11"
|
|
type="submit"
|
|
>
|
|
<i class="i-ph-arrow-up" />
|
|
</button>
|
|
</form>
|
|
</template>
|