kris/ForcePilot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

auto size inputbox

Browse Source
This commit is contained in:
Wenjie Zhang 2024-07-17 20:00:35 +08:00
parent b0d0a77af3
commit 837dd9ff4e
1 changed files with 18 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
web/src/components/ChatComponent.vue
View File

@ -67,12 +67,19 @@
</div> </div>
</div> </div>
<div class="input-box"> <div class="input-box">
<input <a-textarea
class="user-input"
v-model:value="conv.inputText"
@keydown.enter="sendMessage"
placeholder="输入问题……"
:auto-size="{ minRows: 1, maxRows: 10 }"
/>
<!-- <input
class="user-input" class="user-input"
v-model="conv.inputText" v-model="conv.inputText"
@keydown.enter="sendMessage" @keydown.enter="sendMessage"
placeholder="输入问题……" placeholder="输入问题……"
/> /> -->
<a-button size="large" @click="sendMessage" :disabled="(!conv.inputText && !isStreaming)"> <a-button size="large" @click="sendMessage" :disabled="(!conv.inputText && !isStreaming)">
<template #icon> <SendOutlined v-if="!isStreaming" /> <LoadingOutlined v-else/> </template> <template #icon> <SendOutlined v-if="!isStreaming" /> <LoadingOutlined v-else/> </template>
</a-button> </a-button>
@ -460,14 +467,14 @@ img.message-image {
max-width: calc(1100px - 2rem); max-width: calc(1100px - 2rem);
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
align-items: center; align-items: flex-end;
background-color: #F4F4F4; background-color: #F4F4F4;
border-radius: 2rem; border-radius: 2rem;
height: 3.5rem; height: auto;
padding: 0.5rem; padding: 0.5rem;
} }
input.user-input { .user-input {
flex: 1; flex: 1;
height: 40px; height: 40px;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
@ -478,9 +485,15 @@ input.user-input {
color: #111111; color: #111111;
font-size: 16px; font-size: 16px;
font-variation-settings: 'wght' 400, 'opsz' 10.5; font-variation-settings: 'wght' 400, 'opsz' 10.5;
outline: none;
&:focus { &:focus {
outline: none; outline: none;
box-shadow: none;
}
&:active {
outline: none;
} }
} }