add new session button

docs/components/ai-chat-composer.md

@@ -1,6 +1,6 @@
 # AiChatComposer 输入框
 
-对话输入框，按状态在发送、停止与重试之间切换。
+对话输入框，按状态在发送、停止、重试与新开会话之间切换。
 
 ## 基础用法
 
@@ -18,17 +18,19 @@ demo-preview=../demos/ai-chat-composer/basic.vue
 
 | 状态 | 按钮 |
 | --- | --- |
+| 空闲且未禁用 | 新开会话（`chat-add`） |
 | 默认 | 发送（`sendText`） |
 | `isGenerating` 为真 | 停止（`stopText`，危险色） |
 | 有 `lastError` 且 `canRetry` | 错误条 + 重试（`retryText`） |
 
-生成中或 `disabled` 为真时输入框不可编辑，`send` 事件也不会抛出。
+生成中或 `disabled` 为真时输入框不可编辑，新开会话和 `send` 事件也不会触发。
 
 ## 事件
 
 - `send`：抛出**去除首尾空白后**的内容，抛完自动清空输入框；空内容不抛
 - `stop`：点停止按钮
 - `retry`：点错误条上的重试
+- `new-conversation`：清空输入框并请求业务侧开始一个新会话
 
 输入框内容用 `v-model` 绑定，`maxLength` 默认 2000。
 

docs/components/ai-chat-panel.md

@@ -24,7 +24,7 @@ import { AiChatPanel, useAiChat } from "timi-tdesign-mobile";
 
 const {
 	messages, isGenerating, activeToolStatus, lastError, canRetry,
-	sendMessage, stopGeneration, retryLastMessage
+	sendMessage, stopGeneration, retryLastMessage, resetConversation
 } = useAiChat({
 	request: ({ message, signal }) => fetchReply(message, signal)
 });
@@ -40,6 +40,7 @@ const {
 		@send="sendMessage"
 		@stop="stopGeneration"
 		@retry="retryLastMessage"
+		@new-conversation="resetConversation"
 	/>
 </template>
 ```
@@ -63,7 +64,7 @@ const {
 
 ## 自定义
 
-`welcome`、`composer`、`tool-status`、`message` 等插槽可以替换对应区域。`composer` 插槽会拿到 `draft`、`on-send`、`on-stop`、`on-retry` 等，便于接入自定义输入框。
+`welcome`、`composer`、`tool-status`、`message` 等插槽可以替换对应区域。`composer` 插槽会拿到 `draft`、`on-send`、`on-stop`、`on-retry`、`on-new-conversation` 等，便于接入自定义输入框。
 
 ## API
 

docs/demos/ai-chat-composer/basic.vue

@@ -8,6 +8,7 @@
 			@send="onSend"
 			@stop="onStop"
 			@retry="onRetry"
+			@new-conversation="onNewConversation"
 		/>
 
 		<div class="bar">
@@ -53,6 +54,11 @@ function onRetry() {
 	error.value = "";
 	push("retry()");
 }
+
+function onNewConversation() {
+	error.value = "";
+	push("new-conversation()");
+}
 </script>
 
 <style lang="less" scoped>

docs/demos/ai-chat-panel/basic.vue

@@ -10,6 +10,7 @@
 				@send="sendMessage"
 				@stop="stopGeneration"
 				@retry="retryLastMessage"
+				@new-conversation="resetConversation"
 			/>
 		</div>
 
@@ -33,7 +34,8 @@ const {
 	canRetry,
 	sendMessage,
 	stopGeneration,
-	retryLastMessage
+	retryLastMessage,
+	resetConversation
 } = useAiChat({
 	request: async ({ message, signal }) => createMockReply(message, signal)
 });

src/components/ai/AiChatComposer.vue

@@ -12,46 +12,60 @@
 				/>
 			</slot>
 		</div>
-		<t-form class="input-wrap" @submit="submitMessage">
+		<div class="input-wrap">
-			<t-input
+			<t-button
-				v-model="draft"
+				type="button"
-				class="input"
+				theme="primary"
-				borderless
+				shape="circle"
+				aria-label="新开会话"
 				:disabled="props.isGenerating || props.disabled"
-				:maxlength="props.maxLength"
+				@click="startNewConversation"
-				:placeholder="props.placeholder"
-			/>
-			<slot
-				v-if="props.isGenerating"
-				name="stop"
-				:disabled="props.disabled"
-				:on-stop="() => emit('stop')"
 			>
-				<t-button
+				<template #icon>
-					class="send"
+					<t-icon name="chat-add" />
-					type="button"
+				</template>
-					size="small"
+			</t-button>
-					theme="danger"
+			<t-form class="form glass-white" @submit="submitMessage">
-					:content="props.stopText"
+				<t-input
-					@click="emit('stop')"
+					v-model="draft"
+					class="input bg-transparent"
+					borderless
+					:disabled="props.isGenerating || props.disabled"
+					:maxlength="props.maxLength"
+					:placeholder="props.placeholder"
 				/>
-			</slot>
+				<slot
-			<slot
+					v-if="props.isGenerating"
-				v-else
+					name="stop"
-				name="send"
-				:disabled="props.disabled"
-				:on-send="submitMessage"
-			>
-				<t-button
-					class="send"
-					type="submit"
-					size="small"
-					theme="primary"
 					:disabled="props.disabled"
-					:content="props.sendText"
+					:on-stop="() => emit('stop')"
-				/>
+				>
-			</slot>
+					<t-button
-		</t-form>
+						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;
+		gap: .75rem;
-		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 {
+		.form {
-			min-width: 0;
+			--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 {
+			.input {
-			width: 4rem;
+				flex: 1;
-			flex: none;
+				min-width: 0;
+			}
+
+			.send {
+				width: 4rem;
+				flex: none;
+			}
 		}
 	}
 }

src/components/ai/AiChatPanel.vue

@@ -57,6 +57,7 @@
 				:on-send="submitMessage"
 				:on-stop="() => emit('stop')"
 				:on-retry="() => emit('retry')"
+				:on-new-conversation="() => emit('new-conversation')"
 			>
 				<ai-chat-composer
 					v-model="draft"
@@ -72,6 +73,7 @@
 					@send="submitMessage"
 					@stop="emit('stop')"
 					@retry="emit('retry')"
+					@new-conversation="emit('new-conversation')"
 				/>
 			</slot>
 		</div>
@@ -141,6 +143,7 @@ const emit = defineEmits<{
 	send: [message: string];
 	stop: [];
 	retry: [];
+	"new-conversation": [];
 }>();
 
 const messageListRef = useTemplateRef<{ scrollToBottom: () => Promise<void> }>("messageList");