support attach

src/components/ai/AiChatComposer.vue

@@ -12,28 +12,46 @@
 				/>
 			</slot>
 		</div>
-		<div class="input-wrap">
-			<t-button
-				type="button"
-				theme="primary"
-				shape="circle"
-				aria-label="新开会话"
+		<t-form class="form glass-white" @submit="submitMessage">
+			<t-textarea
+				v-model="draft"
+				class="input"
+				:autosize="{ minRows: 3, maxRows: 6 }"
 				:disabled="props.isGenerating || props.disabled"
-				@click="startNewConversation"
-			>
-				<template #icon>
-					<t-icon name="chat-add" />
-				</template>
-			</t-button>
-			<t-form class="form glass-white" @submit="submitMessage">
-				<t-input
-					v-model="draft"
-					class="input bg-transparent"
-					borderless
-					:disabled="props.isGenerating || props.disabled"
-					:maxlength="props.maxLength"
-					:placeholder="props.placeholder"
-				/>
+				:maxlength="props.maxLength"
+				:placeholder="props.placeholder"
+			/>
+			<div class="actions">
+				<div class="tools">
+					<t-button
+						class="tool"
+						type="button"
+						size="extra-small"
+						variant="outline"
+						aria-label="新会话"
+						content="新会话"
+						:disabled="props.isGenerating || props.disabled"
+						@click="startNewConversation"
+					>
+						<template #icon>
+							<t-icon name="chat-add" size="small" />
+						</template>
+					</t-button>
+					<t-button
+						class="tool"
+						type="button"
+						size="extra-small"
+						variant="outline"
+						aria-label="上传附件"
+						content="上传附件"
+						:disabled="props.isGenerating || props.disabled"
+						@click="addAttachment"
+					>
+						<template #icon>
+							<t-icon name="file-add" size="small" />
+						</template>
+					</t-button>
+				</div>
 				<slot
 					v-if="props.isGenerating"
 					name="stop"
@@ -43,8 +61,9 @@
 					<t-button
 						class="send"
 						type="button"
-						size="small"
+						size="extra-small"
 						theme="danger"
+						:disabled="props.disabled"
 						:content="props.stopText"
 						@click="emit('stop')"
 					/>
@@ -58,14 +77,14 @@
 					<t-button
 						class="send"
 						type="submit"
-						size="small"
+						size="extra-small"
 						theme="primary"
 						:disabled="props.disabled"
 						:content="props.sendText"
 					/>
 				</slot>
-			</t-form>
-		</div>
+			</div>
+		</t-form>
 	</div>
 </template>
 
@@ -103,6 +122,7 @@ const emit = defineEmits<{
 	stop: [];
 	retry: [];
 	"new-conversation": [];
+	"add-attachment": [];
 }>();
 
 function startNewConversation(): void {
@@ -113,6 +133,13 @@ function startNewConversation(): void {
 	emit("new-conversation");
 }
 
+function addAttachment(): void {
+	if (props.disabled || props.isGenerating) {
+		return;
+	}
+	emit("add-attachment");
+}
+
 function submitMessage(): void {
 	if (props.disabled || props.isGenerating) {
 		return;
@@ -152,35 +179,42 @@ function submitMessage(): void {
 		}
 	}
 
-	.input-wrap {
+	.form {
+		--td-textarea-background-color: transparent;
 
-		gap: .75rem;
+		border: 1px solid var(--td-component-border);
 		margin: .5rem 0 0;
 		display: flex;
-		align-items: center;
+		padding: .5rem;
+		box-shadow: 0 .5rem 1.5rem rgba(15, 23, 42, .12);
+		align-items: stretch;
+		border-radius: 1.25rem;
+		flex-direction: column;
 
-		.form {
-			--td-input-bg-color: transparent;
-			--td-button-border-radius: 1rem;
+		.input {
+			flex: 1;
+			width: 100%;
+			padding: 0 .25rem;
+			min-width: 0;
+		}
+
+		.actions {
+			--td-button-border-radius: .75rem;
 
 			gap: .5rem;
-			flex: 1;
-			border: 1px solid var(--td-component-border);
-			margin: 0;
+			margin-top: .375rem;
 			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;
+			justify-content: space-between;
 
-			.input {
-				flex: 1;
-				min-width: 0;
+			.tools {
+				gap: .5rem;
+				display: flex;
+				align-items: center;
 			}
 
 			.send {
-				width: 4rem;
-				flex: none;
+				padding: 0 1rem;
 			}
 		}
 	}