add new session button

src/components/ai/AiChatComposer.vue

@@ -12,46 +12,60 @@
 				/>
 			</slot>
 		</div>
-		<t-form class="input-wrap" @submit="submitMessage">
-			<t-input
-				v-model="draft"
-				class="input"
-				borderless
+		<div class="input-wrap">
+			<t-button
+				type="button"
+				theme="primary"
+				shape="circle"
+				aria-label="新开会话"
 				: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')"
+				@click="startNewConversation"
 			>
-				<t-button
-					class="send"
-					type="button"
-					size="small"
-					theme="danger"
-					:content="props.stopText"
-					@click="emit('stop')"
+				<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"
 				/>
-			</slot>
-			<slot
-				v-else
-				name="send"
-				:disabled="props.disabled"
-				:on-send="submitMessage"
-			>
-				<t-button
-					class="send"
-					type="submit"
-					size="small"
-					theme="primary"
+				<slot
+					v-if="props.isGenerating"
+					name="stop"
 					:disabled="props.disabled"
-					:content="props.sendText"
-				/>
-			</slot>
-		</t-form>
+					: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>
 	</div>
 </template>
 
@@ -88,8 +102,17 @@ const emit = defineEmits<{
 	send: [message: string];
 	stop: [];
 	retry: [];
+	"new-conversation": [];
 }>();
 
+function startNewConversation(): void {
+	if (props.disabled || props.isGenerating) {
+		return;
+	}
+	draft.value = "";
+	emit("new-conversation");
+}
+
 function submitMessage(): void {
 	if (props.disabled || props.isGenerating) {
 		return;
@@ -130,26 +153,35 @@ function submitMessage(): void {
 	}
 
 	.input-wrap {
-		--td-input-bg-color: transparent;
-		--td-button-border-radius: 1rem;
 
-		gap: .5rem;
-		border: 1px solid var(--td-component-border);
+		gap: .75rem;
 		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;
+		.form {
+			--td-input-bg-color: transparent;
+			--td-button-border-radius: 1rem;
+
+			gap: .5rem;
 			flex: 1;
-		}
+			border: 1px solid var(--td-component-border);
+			margin: 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;
 
-		.send {
-			width: 4rem;
-			flex: none;
+			.input {
+				flex: 1;
+				min-width: 0;
+			}
+
+			.send {
+				width: 4rem;
+				flex: none;
+			}
 		}
 	}
 }