add aiChat

2026-09-20 12:03:03 +08:00
parent 3d2968cb3b
commit b435bf992e
8 changed files with 1782 additions and 2 deletions
@@ -0,0 +1,163 @@
+<template>
+	<div class="composer">
+		<div v-if="props.lastError" class="error-bar">
+			<slot name="error" :error="props.lastError" :can-retry="props.canRetry">
+				<span class="error-text" v-text="props.lastError" />
+				<t-button
+					v-if="props.canRetry"
+					variant="text"
+					size="small"
+					:content="props.retryText"
+					@click="emit('retry')"
+				/>
+			</slot>
+		</div>
+		<t-form class="input-wrap" @submit="submitMessage">
+			<t-input
+				v-model="draft"
+				class="input"
+				borderless
+				:disabled="props.isGenerating || props.disabled"
+				:maxlength="props.maxLength"
+				:placeholder="props.placeholder"
+			/>
+			<slot
+				v-if="props.isGenerating"
+				name="stop"
+				:disabled="props.disabled"
+				:on-stop="() => emit('stop')"
+			>
+				<t-button
+					class="send"
+					type="button"
+					size="small"
+					theme="danger"
+					:content="props.stopText"
+					@click="emit('stop')"
+				/>
+			</slot>
+			<slot
+				v-else
+				name="send"
+				:disabled="props.disabled"
+				:on-send="submitMessage"
+			>
+				<t-button
+					class="send"
+					type="submit"
+					size="small"
+					theme="primary"
+					:disabled="props.disabled"
+					:content="props.sendText"
+				/>
+			</slot>
+		</t-form>
+	</div>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+	name: "AiChatComposer"
+});
+
+export interface Props {
+	isGenerating: boolean;
+	lastError?: string;
+	canRetry?: boolean;
+	disabled?: boolean;
+	placeholder?: string;
+	sendText?: string;
+	stopText?: string;
+	retryText?: string;
+	maxLength?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	lastError: "",
+	canRetry: false,
+	disabled: false,
+	placeholder: "输入消息…",
+	sendText: "发送",
+	stopText: "停止",
+	retryText: "重试",
+	maxLength: 2000
+});
+
+const draft = defineModel<string>({ required: true });
+const emit = defineEmits<{
+	send: [message: string];
+	stop: [];
+	retry: [];
+}>();
+
+function submitMessage(): void {
+	if (props.disabled || props.isGenerating) {
+		return;
+	}
+	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: var(--ai-chat-error-color, #b42318);
+		font-size: .75rem;
+		background: var(--ai-chat-error-background, #fef3f2);
+		align-items: center;
+		justify-content: space-between;
+
+		.error-text {
+			min-width: 0;
+			word-break: break-word;
+		}
+
+		.t-button {
+			color: inherit;
+			flex: none;
+		}
+	}
+
+	.input-wrap {
+		--td-input-bg-color: transparent;
+		--td-button-border-radius: 1rem;
+
+		gap: .5rem;
+		border: 1px solid var(--td-component-border);
+		margin: .5rem 0 0;
+		display: flex;
+		padding: .25rem .25rem .25rem .75rem;
+		box-shadow: 0 .5rem 1.5rem rgba(15, 23, 42, .12);
+		align-items: center;
+		border-radius: 1.25rem;
+
+		.input {
+			min-width: 0;
+			flex: 1;
+		}
+
+		.send {
+			width: 4rem;
+			flex: none;
+		}
+	}
+}
+
+:global(html.theme-dark) {
+	.error-bar {
+		color: var(--ai-chat-error-color-dark, #fda29b);
+		background: var(--ai-chat-error-background-dark, rgba(180, 35, 24, .18));
+	}
+}
+</style>