add AiConversationList.vue

src/api/GaoAiAPI.ts

@@ -1,3 +1,5 @@
+import { axios } from "timi-web-api";
+
 /** 门店智能助手聊天请求。 */
 export interface GaoAiChatRequest {
 	message: string;
@@ -6,6 +8,58 @@ export interface GaoAiChatRequest {
 	storeId?: string;
 }
 
+/** 历史会话列表排序方式。 */
+export type GaoAiConversationSortBy = "created_at" | "-created_at" | "updated_at" | "-updated_at";
+
+/** 历史会话列表请求。 */
+export interface GaoAiConversationListRequest {
+	lastId?: string;
+	limit?: number;
+	sortBy?: GaoAiConversationSortBy;
+}
+
+/** 历史会话。 */
+export interface GaoAiConversation {
+	id: string;
+	name?: string;
+	status?: string;
+	introduction?: string;
+	"created_at"?: number | string;
+	"updated_at"?: number | string;
+}
+
+/** 历史会话列表响应。 */
+export interface GaoAiConversationListResponse {
+	"has_more"?: boolean;
+	limit?: number;
+	data?: GaoAiConversation[];
+}
+
+/** 历史会话消息读取请求。 */
+export interface GaoAiConversationReadRequest {
+	conversationId: string;
+	firstId?: string;
+	limit?: number;
+}
+
+/** 历史会话消息。 */
+export interface GaoAiConversationMessage {
+	id: string;
+	"conversation_id"?: string;
+	query?: string;
+	answer?: string;
+	"created_at"?: number | string;
+	status?: string;
+	feedback?: unknown;
+}
+
+/** 历史会话消息列表响应。 */
+export interface GaoAiConversationReadResponse {
+	"has_more"?: boolean;
+	limit?: number;
+	data?: GaoAiConversationMessage[];
+}
+
 /** 智能助手 SSE 事件。 */
 export interface GaoAiStreamEvent {
 	event: string;
@@ -37,6 +91,40 @@ export class GaoAiStreamError extends Error {
 }
 
 const chatPath = "/gao/ai/chat";
+const conversationBasePath = "/gao/ai/conversation";
+
+/**
+ * 查询当前登录用户的历史会话。
+ *
+ * @param request 历史会话分页请求
+ */
+export async function listConversations(
+	request: GaoAiConversationListRequest = {}
+): Promise<GaoAiConversationListResponse> {
+	return await axios.post(`${conversationBasePath}/list`, request);
+}
+
+/**
+ * 读取指定历史会话的消息。
+ *
+ * @param request 历史会话读取请求
+ */
+export async function readConversation(
+	request: GaoAiConversationReadRequest
+): Promise<GaoAiConversationReadResponse> {
+	return await axios.post(`${conversationBasePath}/read`, request);
+}
+
+/**
+ * 删除指定历史会话。
+ *
+ * @param conversationId 会话 ID
+ */
+export async function deleteConversation(conversationId: string): Promise<void> {
+	await axios.post(`${conversationBasePath}/delete`, undefined, {
+		params: { conversationId }
+	});
+}
 
 /**
  * 发起门店智能助手聊天请求。

src/assets/styles/global.less

@@ -92,6 +92,11 @@ html.theme-dark body {
 	gap: 1rem;
 }
 
+.t-pull-down-refresh {
+	overflow-x: hidden;
+	overflow-y: auto;
+}
+
 .t-dropdown-menu {
 
 	&:after {
@@ -111,9 +116,10 @@ html.theme-dark body {
 
 .center-tips {
 	color: var(--tui-gray);
+	margin: 0 auto;
 	padding: .75rem;
-	text-align: center;
 	font-size: .875rem;
+	text-align: center;
 }
 
 .avatar {

src/composables/useAiChat.ts

@@ -6,7 +6,10 @@ import {
 	GaoAiHttpError,
 	GaoAiStreamError,
 	parseSseData,
+	readConversation as readConversationApi,
 	readSseStream,
+	type GaoAiConversationMessage,
+	type GaoAiConversationReadResponse,
 	type GaoAiStreamEvent
 } from "@/api/GaoAiAPI";
 
@@ -58,17 +61,18 @@ export function useAiChat(options: UseAiChatOptions) {
 	const messages = shallowRef<AiChatMessage[]>([]);
 	const conversationId = shallowRef("");
 	const isGenerating = shallowRef(false);
+	const isLoadingConversation = shallowRef(false);
 	const activeToolStatus = shallowRef("");
 	const lastError = shallowRef("");
 	const lastQuestion = shallowRef("");
-	const canRetry = computed(() => !!lastError.value && !!lastQuestion.value && !isGenerating.value);
+	const canRetry = computed(() => !!lastError.value && !!lastQuestion.value && !isGenerating.value && !isLoadingConversation.value);
 	let activeController: AbortController | undefined;
 	let messageSequence = 0;
 	const responseStateMap = new Map<number, AssistantResponseState>();
 
 	async function sendMessage(message: string): Promise<void> {
 		const normalizedMessage = message.trim();
-		if (!normalizedMessage || isGenerating.value) {
+		if (!normalizedMessage || isGenerating.value || isLoadingConversation.value) {
 			return;
 		}
 
@@ -152,6 +156,70 @@ export function useAiChat(options: UseAiChatOptions) {
 		lastQuestion.value = "";
 	}
 
+	/**
+	 * 读取历史会话并转换成当前聊天页面使用的消息模型。
+	 *
+	 * @param id 历史会话 ID
+	 */
+	async function loadConversation(id: string): Promise<void> {
+		const normalizedId = id.trim();
+		if (!normalizedId || isGenerating.value || isLoadingConversation.value) {
+			return;
+		}
+
+		isLoadingConversation.value = true;
+		messages.value = [];
+		responseStateMap.clear();
+		conversationId.value = normalizedId;
+		lastError.value = "";
+		lastQuestion.value = "";
+		try {
+			const result = await readConversationHistory(normalizedId);
+			if (conversationId.value !== normalizedId) {
+				return;
+			}
+			messages.value = mapConversationMessages(result);
+			lastQuestion.value = [...messages.value].reverse().find(item => item.role === "user")?.content || "";
+			await scrollToBottom();
+		} catch (error) {
+			if (conversationId.value === normalizedId) {
+				resetConversation();
+			}
+			throw error;
+		} finally {
+			isLoadingConversation.value = false;
+		}
+	}
+
+	async function readConversationHistory(id: string): Promise<GaoAiConversationReadResponse> {
+		const messageList: GaoAiConversationMessage[] = [];
+		let firstId: string | undefined;
+		let result: GaoAiConversationReadResponse = {};
+
+		while (true) {
+			result = await readConversationApi({
+				conversationId: id,
+				firstId,
+				limit: 100
+			});
+			const currentList = Array.isArray(result.data) ? result.data : [];
+			messageList.push(...currentList);
+			if (result["has_more"] !== true || !currentList.length) {
+				break;
+			}
+			const nextFirstId = currentList[0]?.id;
+			if (!nextFirstId || nextFirstId === firstId) {
+				break;
+			}
+			firstId = nextFirstId;
+		}
+
+		return {
+			...result,
+			data: messageList
+		};
+	}
+
 	async function retryLastMessage(): Promise<void> {
 		if (canRetry.value) {
 			await sendMessage(lastQuestion.value);
@@ -330,6 +398,51 @@ export function useAiChat(options: UseAiChatOptions) {
 		return thinkingSequence;
 	}
 
+	function mapConversationMessages(response: GaoAiConversationReadResponse): AiChatMessage[] {
+		const sourceList = Array.isArray(response.data) ? response.data : [];
+		const orderedList = sourceList
+			.map((item, index) => ({
+				item,
+				index,
+				timestamp: getTimestamp(item["created_at"])
+			}))
+			.sort((left, right) => left.timestamp - right.timestamp || left.index - right.index)
+			.map(item => item.item);
+		const messageList: AiChatMessage[] = [];
+
+		for (const item of orderedList) {
+			const createdAt = getTimestamp(item["created_at"]);
+			const query = getRawString(item.query);
+			const answer = getRawString(item.answer);
+			if (query) {
+				messageList.push({
+					id: nextMessageId(),
+					role: "user",
+					content: query,
+					thinkingList: [],
+					citationList: [],
+					createdAt
+				});
+			}
+			if (answer || isFailedConversationMessage(item)) {
+				const parsedAnswer = parseAssistantResponse(answer);
+				messageList.push({
+					id: nextMessageId(),
+					role: "assistant",
+					content: parsedAnswer.answer,
+					thinkingList: parsedAnswer.thinkingList.map(content => ({
+						id: nextThinkingId(),
+						content
+					})),
+					citationList: [],
+					createdAt,
+					statusText: isFailedConversationMessage(item) ? "本次回答生成失败" : undefined
+				});
+			}
+		}
+		return messageList;
+	}
+
 	async function scrollToBottom(): Promise<void> {
 		await options.scrollToBottom?.();
 	}
@@ -345,11 +458,14 @@ export function useAiChat(options: UseAiChatOptions) {
 
 	return {
 		messages,
+		conversationId: computed(() => conversationId.value),
 		isGenerating,
+		isLoadingConversation,
 		activeToolStatus,
 		lastError,
 		canRetry,
 		sendMessage,
+		loadConversation,
 		stopGeneration,
 		resetConversation,
 		retryLastMessage
@@ -565,3 +681,16 @@ function formatScope(value: unknown): string | undefined {
 function getNumber(value: unknown): number | undefined {
 	return typeof value === "number" && Number.isFinite(value) ? value : undefined;
 }
+
+function getTimestamp(value: number | string | undefined): number {
+	const timestamp = typeof value === "number" ? value : Number(value);
+	if (!Number.isFinite(timestamp) || timestamp <= 0) {
+		return Date.now();
+	}
+	return timestamp < 100000000000 ? timestamp * 1000 : timestamp;
+}
+
+function isFailedConversationMessage(message: GaoAiConversationMessage): boolean {
+	const status = getString(message.status)?.toLowerCase();
+	return status === "error" || status === "failed" || status === "failure";
+}

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>