add AiConversationList.vue

src/pages/ai/components/AiChatComposer.vue

@@ -9,7 +9,7 @@
 				v-model="draft"
 				class="input"
 				borderless
-				:disabled="isGenerating"
+				:disabled="isGenerating || props.disabled"
 				:maxlength="256"
 				placeholder="问问小糕怎么个事…"
 			/>
@@ -43,9 +43,10 @@ interface Props {
 	isGenerating: boolean;
 	lastError: string;
 	canRetry: boolean;
+	disabled?: boolean;
 }
 
-defineProps<Props>();
+const props = defineProps<Props>();
 const draft = defineModel<string>({ required: true });
 const emit = defineEmits<{
 	send: [message: string];
@@ -54,6 +55,9 @@ const emit = defineEmits<{
 }>();
 
 function submitMessage(): void {
+	if (props.disabled) {
+		return;
+	}
 	const message = draft.value.trim();
 	if (!message) {
 		return;
@@ -98,7 +102,7 @@ function submitMessage(): void {
 		padding: .25rem .25rem .25rem .75rem;
 		box-shadow: 0 .5rem 1.5rem rgba(15, 23, 42, .12);
 		align-items: center;
-		border-radius: 1rem;
+		border-radius: 1.25rem;
 
 		.input {
 			min-width: 0;

src/pages/ai/components/AiChatPanel.vue

@@ -1,5 +1,5 @@
 <template>
-	<section class="ai-chat-panel" aria-label="门店经营助手">
+	<section class="ai-chat-panel" :aria-label="`${props.storeName || '当前门店'}经营助手`">
 		<ai-chat-message-list
 			ref="messageList"
 			:messages="messages"
@@ -15,6 +15,7 @@
 			<ai-chat-composer
 				v-model="draft"
 				:is-generating="isGenerating"
+				:disabled="isLoadingConversation"
 				:last-error="lastError"
 				:can-retry="canRetry"
 				@send="submitMessage"
@@ -23,12 +24,25 @@
 			/>
 		</div>
 	</section>
+	<ai-conversation-list
+		v-model:visible="conversationVisible"
+		:active-conversation-id="conversationId"
+		:disabled="isBusy"
+		:session-key="props.sessionKey"
+		@select="selectConversation"
+		@delete="handleConversationDelete"
+	/>
 </template>
 <script setup lang="ts">
 import { useAiChat } from "@/composables/useAiChat";
+import type { GaoAiConversation } from "@/api/GaoAiAPI";
 import AiChatComposer from "@/pages/ai/components/AiChatComposer.vue";
+import AiConversationList from "@/pages/ai/components/AiConversationList.vue";
 import AiChatMessageList from "@/pages/ai/components/AiChatMessageList.vue";
 import { aiQuickQuestionList } from "@/pages/ai/aiChatQuestions";
+import { useNavBarStore } from "@/store/navBarStore";
+import { getErrorMessage } from "@/utils/error";
+import { Message } from "@/utils/message";
 
 defineOptions({
 	name: "AiChatPanel"
@@ -41,22 +55,61 @@ interface Props {
 }
 
 const props = defineProps<Props>();
+const navBarStore = useNavBarStore();
 type MessageListExpose = {
 	scrollToBottom: () => Promise<void>;
 };
 
 const messageListRef = useTemplateRef<MessageListExpose>("messageList");
 const draft = shallowRef("");
-const { messages, isGenerating, activeToolStatus, lastError, canRetry, sendMessage, stopGeneration, retryLastMessage } = useAiChat({
+const conversationVisible = ref(false);
+const {
+	messages,
+	conversationId,
+	isGenerating,
+	isLoadingConversation,
+	activeToolStatus,
+	lastError,
+	canRetry,
+	sendMessage,
+	loadConversation,
+	stopGeneration,
+	retryLastMessage,
+	resetConversation
+} = useAiChat({
 	sessionKey: () => props.sessionKey,
 	storeId: () => props.storeId,
 	scrollToBottom
 });
+const isBusy = computed(() => isGenerating.value || isLoadingConversation.value);
 
 async function submitMessage(message: string): Promise<void> {
 	await sendMessage(message);
 }
 
+function openConversationList(): void {
+	if (!isBusy.value) {
+		conversationVisible.value = true;
+	}
+}
+
+async function selectConversation(conversation: GaoAiConversation): Promise<void> {
+	if (isBusy.value || !conversation.id) {
+		return;
+	}
+	try {
+		await loadConversation(conversation.id);
+	} catch (error) {
+		Message.error(getErrorMessage(error, "历史会话读取失败"));
+	}
+}
+
+function handleConversationDelete(deletedConversationId: string): void {
+	if (deletedConversationId === conversationId.value) {
+		resetConversation();
+	}
+}
+
 function selectQuestion(question: string): void {
 	draft.value = question;
 }
@@ -64,6 +117,15 @@ function selectQuestion(question: string): void {
 async function scrollToBottom(): Promise<void> {
 	await messageListRef.value?.scrollToBottom();
 }
+
+onMounted(() => {
+	navBarStore.clearRight();
+	navBarStore.setRightText("历史", "var(--td-brand-color)", openConversationList);
+});
+
+watch(isBusy, value => navBarStore.setRightDisabled(value));
+
+onUnmounted(() => navBarStore.clearRight());
 </script>
 <style scoped lang="less">
 .ai-chat-panel {

src/pages/ai/components/AiConversationList.vue

@@ -0,0 +1,366 @@
+<template>
+	<t-popup v-model="popupVisible" placement="right" destroy-on-close>
+		<section class="ai-conversation-list" @scroll="handleScroll">
+			<header class="header glass-white">
+				<h3>历史会话</h3>
+				<t-button
+					theme="danger"
+					shape="circle"
+					variant="text"
+					@click="popupVisible = false"
+				>
+					<template #icon>
+						<t-icon name="close" />
+					</template>
+				</t-button>
+			</header>
+			<t-cell-group v-if="conversationList.length" class="items fix-last-cell-line">
+				<t-swipe-cell
+					v-for="(item, index) in conversationList"
+					:key="item.id"
+					class="item"
+					v-entrance-transition="index * 30"
+				>
+					<t-cell
+						class="cell"
+						:class="{ active: item.id === props.activeConversationId }"
+						:disabled="props.disabled"
+						@click="selectConversation(item)"
+					>
+						<template #leftIcon>
+							<div class="icon">
+								<t-icon name="chat" size="1.25rem" />
+							</div>
+						</template>
+						<template #title>
+							<span class="title" v-text="getConversationName(item)" />
+						</template>
+						<template #description>
+							<span v-text="formatConversationTime(item)" />
+						</template>
+					</t-cell>
+					<template #right>
+						<t-button
+							class="swipe-cell-button"
+							theme="danger"
+							:loading="deletingId === item.id"
+							:disabled="props.disabled"
+							@click.stop="confirmDelete(item)"
+						>
+							删除
+						</t-button>
+					</template>
+				</t-swipe-cell>
+			</t-cell-group>
+			<t-empty v-else-if="!isLoading" class="center-tips" description="暂无历史会话" />
+			<t-loading
+				v-if="isLoading && !conversationList.length"
+				class="center-tips"
+				size="1.5rem"
+				text="正在加载会话"
+			/>
+			<div class="footer glass-white">
+				<span class="llm gray">Deepseek v4.1-flash</span>
+				<t-button
+					class="agreement-button"
+					variant="text"
+					size="small"
+					type="button"
+					content="服务协议"
+				/>
+			</div>
+		</section>
+	</t-popup>
+</template>
+
+<script setup lang="ts">
+import { DialogPlugin } from "tdesign-mobile-vue";
+import { deleteConversation as removeConversation, type GaoAiConversation, listConversations } from "@/api/GaoAiAPI";
+import { getErrorMessage } from "@/utils/error";
+import { Message } from "@/utils/message";
+
+defineOptions({
+	name: "AiConversationList"
+});
+
+interface Props {
+	visible: boolean;
+	activeConversationId: string;
+	disabled: boolean;
+	sessionKey: string;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<{
+	"update:visible": [value: boolean];
+	select: [conversation: GaoAiConversation];
+	delete: [conversationId: string];
+}>();
+
+const pageSize = 20;
+const popupVisible = computed({
+	get() {
+		return props.visible;
+	},
+	set(value: boolean) {
+		emit("update:visible", value);
+	}
+});
+const conversationList = ref<GaoAiConversation[]>([]);
+const isLoading = ref(false);
+const isNoMore = ref(false);
+const lastId = ref("");
+const deletingId = ref("");
+let requestToken = 0;
+let loadingPromise: Promise<void> | undefined;
+
+const loadStateText = computed(() => {
+	if (isLoading.value && conversationList.value.length) {
+		return "正在加载更多";
+	}
+	if (isNoMore.value) {
+		return conversationList.value.length ? "没有更多会话" : "";
+	}
+	return "上拉加载更多";
+});
+
+async function loadMore(): Promise<void> {
+	if (loadingPromise) {
+		await loadingPromise;
+		return;
+	}
+	if (isNoMore.value) {
+		return;
+	}
+
+	const currentToken = requestToken;
+	const request = (async () => {
+		isLoading.value = true;
+		try {
+			const result = await listConversations({
+				lastId: lastId.value || undefined,
+				limit: pageSize,
+				sortBy: "-updated_at"
+			});
+			if (currentToken !== requestToken) {
+				return;
+			}
+			const nextList = (result.data || []).filter(item => item.id);
+			const idSet = new Set(conversationList.value.map(item => item.id));
+			conversationList.value = conversationList.value.concat(nextList.filter(item => !idSet.has(item.id)));
+			lastId.value = nextList[nextList.length - 1]?.id || lastId.value;
+			isNoMore.value = result["has_more"] !== true || !nextList.length;
+		} catch (error) {
+			if (currentToken === requestToken) {
+				Message.error(getErrorMessage(error, "历史会话加载失败"));
+			}
+		} finally {
+			if (currentToken === requestToken) {
+				isLoading.value = false;
+			}
+		}
+	})();
+	loadingPromise = request;
+	try {
+		await request;
+	} finally {
+		if (loadingPromise === request) {
+			loadingPromise = undefined;
+		}
+	}
+}
+
+async function reloadList(): Promise<void> {
+	const currentToken = requestToken + 1;
+	requestToken = currentToken;
+	conversationList.value = [];
+	lastId.value = "";
+	isNoMore.value = false;
+	if (loadingPromise) {
+		await loadingPromise;
+	}
+	if (currentToken === requestToken) {
+		await loadMore();
+	}
+}
+
+async function handleScroll(event: Event): Promise<void> {
+	const target = event.currentTarget;
+	if (!(target instanceof HTMLElement)) {
+		return;
+	}
+	if (target.scrollHeight - target.scrollTop - target.clientHeight < 40) {
+		await loadMore();
+	}
+}
+
+function selectConversation(conversation: GaoAiConversation): void {
+	if (props.disabled || !conversation.id) {
+		return;
+	}
+	emit("select", conversation);
+	emit("update:visible", false);
+}
+
+async function confirmDelete(conversation: GaoAiConversation): Promise<void> {
+	if (props.disabled || deletingId.value || !conversation.id) {
+		return;
+	}
+	const conversationId = conversation.id;
+	const dialog = DialogPlugin.confirm({
+		title: "删除历史会话",
+		content: "确定删除这段历史会话吗？删除后无法恢复。",
+		cancelBtn: "取消",
+		confirmBtn: "删除",
+		onCancel() {
+			dialog.destroy();
+		},
+		async onConfirm() {
+			dialog.destroy();
+			await deleteItem(conversationId);
+		}
+	});
+}
+
+async function deleteItem(conversationId: string): Promise<void> {
+	deletingId.value = conversationId;
+	try {
+		await removeConversation(conversationId);
+		emit("delete", conversationId);
+		await reloadList();
+		Message.success("历史会话已删除");
+	} catch (error) {
+		Message.error(getErrorMessage(error, "历史会话删除失败"));
+	} finally {
+		deletingId.value = "";
+	}
+}
+
+function getConversationName(conversation: GaoAiConversation): string {
+	return conversation.name?.trim() || conversation.introduction?.trim() || "未命名会话";
+}
+
+function formatConversationTime(conversation: GaoAiConversation): string {
+	const value = conversation["updated_at"] || conversation["created_at"];
+	const timestamp = typeof value === "number" ? value : Number(value);
+	if (!Number.isFinite(timestamp) || timestamp <= 0) {
+		return "时间未知";
+	}
+	const milliseconds = timestamp < 100000000000 ? timestamp * 1000 : timestamp;
+	return new Date(milliseconds).toLocaleString("zh-CN", { hour12: false });
+}
+
+watch(() => props.visible, async visible => {
+	if (visible) {
+		await reloadList();
+	}
+});
+
+watch(() => props.sessionKey, async () => {
+	requestToken += 1;
+	conversationList.value = [];
+	lastId.value = "";
+	isNoMore.value = false;
+	if (props.visible) {
+		await reloadList();
+	}
+});
+</script>
+
+<style scoped lang="less">
+.ai-conversation-list {
+	width: min(70vw, 24rem);
+	height: 100vh;
+	padding: calc(var(--app-nav-height) + .5rem) 0 calc(1rem + env(safe-area-inset-bottom, 0px));
+	display: flex;
+	overflow: auto;
+	position: relative;
+	flex-direction: column;
+
+	.header {
+		top: 0;
+		z-index: 1;
+		display: flex;
+		position: sticky;
+		box-shadow: var(--td-shadow-1);
+		align-items: center;
+		justify-content: space-between;
+
+		h3 {
+			margin: .5rem 0 .5rem 1rem;
+		}
+
+		.t-button {
+			gap: .25rem;
+			display: inline-flex;
+			align-items: center;
+		}
+	}
+
+	.items {
+
+		.item {
+
+			.cell {
+				&.active {
+					background: var(--td-bg-color-secondarycontainer);
+				}
+
+				:deep(.t-cell__title) {
+					min-width: 0;
+				}
+
+				.icon {
+					color: #0f766e;
+					width: 2rem;
+					height: 2rem;
+					border-radius: .625rem;
+					display: flex;
+					background: #ccfbf1;
+					align-items: center;
+					justify-content: center;
+				}
+
+				.title {
+					overflow: hidden;
+					display: block;
+					white-space: nowrap;
+					text-overflow: ellipsis;
+				}
+			}
+
+			.delete {
+				height: 100%;
+			}
+		}
+	}
+
+	.footer {
+		bottom: 0;
+		display: flex;
+		padding: 0 .5rem;
+		position: sticky;
+		box-shadow: 0 -2px 10px rgba(0, 0, 0, .03);
+		align-items: center;
+		justify-content: space-between;
+
+		.llm {
+			font-size: .875rem;
+		}
+
+		.agreement-button {
+		}
+	}
+}
+
+:global(html.theme-dark) {
+	.conversation-drawer {
+		background: #0f172a;
+
+		.icon {
+			color: #5eead4;
+			background: rgba(20, 184, 166, .15);
+		}
+	}
+}
+</style>