132 lines
2.2 KiB
Vue
132 lines
2.2 KiB
Vue
<template>
|
|
<div class="composer">
|
|
<div v-if="lastError" class="error-bar">
|
|
<span class="error-text" v-text="lastError" />
|
|
<t-button v-if="canRetry" variant="text" size="small" content="重试" @click="emit('retry')" />
|
|
</div>
|
|
<t-form class="input-wrap glass-white" @submit.prevent="submitMessage">
|
|
<t-input
|
|
v-model="draft"
|
|
class="input"
|
|
borderless
|
|
:disabled="isGenerating"
|
|
:maxlength="256"
|
|
placeholder="问问小糕怎么个事(●'◡'●)…"
|
|
/>
|
|
<t-button
|
|
v-if="isGenerating"
|
|
class="send"
|
|
type="button"
|
|
size="small"
|
|
theme="danger"
|
|
content="停止"
|
|
@click="emit('stop')"
|
|
/>
|
|
<t-button
|
|
v-else
|
|
class="send"
|
|
type="submit"
|
|
size="small"
|
|
theme="primary"
|
|
content="发送"
|
|
/>
|
|
</t-form>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
|
|
defineOptions({
|
|
name: "AiChatComposer"
|
|
});
|
|
|
|
interface Props {
|
|
isGenerating: boolean;
|
|
lastError: string;
|
|
canRetry: boolean;
|
|
}
|
|
|
|
defineProps<Props>();
|
|
const draft = defineModel<string>({ required: true });
|
|
const emit = defineEmits<{
|
|
send: [message: string];
|
|
stop: [];
|
|
retry: [];
|
|
}>();
|
|
|
|
function submitMessage(): void {
|
|
const message = draft.value.trim();
|
|
if (!message) {
|
|
return;
|
|
}
|
|
draft.value = "";
|
|
emit("send", message);
|
|
}
|
|
</script>
|
|
<style scoped lang="less">
|
|
.composer {
|
|
width: 100%;
|
|
|
|
.error-bar {
|
|
gap: .375rem;
|
|
display: flex;
|
|
padding: .5rem .75rem;
|
|
border-radius: .75rem;
|
|
color: #b42318;
|
|
font-size: .75rem;
|
|
background: #fef3f2;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.error-text {
|
|
min-width: 0;
|
|
}
|
|
|
|
.t-button {
|
|
color: #b42318;
|
|
flex: none;
|
|
}
|
|
}
|
|
|
|
.input-wrap {
|
|
--td-input-bg-color: transparent;
|
|
--td-button-border-radius: 1rem;
|
|
|
|
gap: .5rem;
|
|
border: 1px solid var(--td-component-border);
|
|
display: flex;
|
|
padding: .25rem .25rem .25rem .75rem;
|
|
margin-top: .5rem;
|
|
box-shadow: 0 .5rem 1.5rem rgba(15, 23, 42, .12);
|
|
align-items: center;
|
|
border-radius: 1rem;
|
|
|
|
.input {
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.send {
|
|
width: 4rem;
|
|
flex: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes rotate {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
:global(html.theme-dark) {
|
|
.error-bar {
|
|
color: #fda29b;
|
|
background: rgba(180, 35, 24, .18);
|
|
|
|
.t-button {
|
|
color: #fda29b;
|
|
}
|
|
}
|
|
}
|
|
</style>
|