update AIChart, customer followup, media selector
This commit is contained in:
Timi
@@ -1,135 +0,0 @@
|
||||
<template>
|
||||
<div class="composer">
|
||||
<div v-if="lastError" class="error-bar">
|
||||
<span class="error-text" v-text="lastError" />
|
||||
<t-button v-if="canRetry" variant="text" size="small" content="重试" @click="emit('retry')" />
|
||||
</div>
|
||||
<t-form class="input-wrap glass-white" @submit="submitMessage">
|
||||
<t-input
|
||||
v-model="draft"
|
||||
class="input"
|
||||
borderless
|
||||
:disabled="isGenerating || props.disabled"
|
||||
:maxlength="256"
|
||||
placeholder="问问小糕怎么个事…"
|
||||
/>
|
||||
<t-button
|
||||
v-if="isGenerating"
|
||||
class="send"
|
||||
type="button"
|
||||
size="small"
|
||||
theme="danger"
|
||||
content="停止"
|
||||
@click="emit('stop')"
|
||||
/>
|
||||
<t-button
|
||||
v-else
|
||||
class="send"
|
||||
type="submit"
|
||||
size="small"
|
||||
theme="primary"
|
||||
content="发送"
|
||||
/>
|
||||
</t-form>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
||||
defineOptions({
|
||||
name: "AiChatComposer"
|
||||
});
|
||||
|
||||
interface Props {
|
||||
isGenerating: boolean;
|
||||
lastError: string;
|
||||
canRetry: boolean;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const draft = defineModel<string>({ required: true });
|
||||
const emit = defineEmits<{
|
||||
send: [message: string];
|
||||
stop: [];
|
||||
retry: [];
|
||||
}>();
|
||||
|
||||
function submitMessage(): void {
|
||||
if (props.disabled) {
|
||||
return;
|
||||
}
|
||||
const message = draft.value.trim();
|
||||
if (!message) {
|
||||
return;
|
||||
}
|
||||
draft.value = "";
|
||||
emit("send", message);
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.composer {
|
||||
width: 100%;
|
||||
|
||||
.error-bar {
|
||||
gap: .375rem;
|
||||
display: flex;
|
||||
padding: .5rem .75rem;
|
||||
border-radius: .75rem;
|
||||
color: #b42318;
|
||||
font-size: .75rem;
|
||||
background: #fef3f2;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.error-text {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.t-button {
|
||||
color: #b42318;
|
||||
flex: none;
|
||||
}
|
||||
}
|
||||
|
||||
.input-wrap {
|
||||
--td-input-bg-color: transparent;
|
||||
--td-button-border-radius: 1rem;
|
||||
|
||||
gap: .5rem;
|
||||
border: 1px solid var(--td-component-border);
|
||||
margin: .5rem 0 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;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.send {
|
||||
width: 4rem;
|
||||
flex: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
:global(html.theme-dark) {
|
||||
.error-bar {
|
||||
color: #fda29b;
|
||||
background: rgba(180, 35, 24, .18);
|
||||
|
||||
.t-button {
|
||||
color: #fda29b;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,402 +0,0 @@
|
||||
<template>
|
||||
<div ref="messageList" class="message-list" role="log" aria-live="polite">
|
||||
<div v-if="!props.messages.length" class="welcome">
|
||||
<div class="welcome-icon"><t-icon name="robot-2" size="2rem" /></div>
|
||||
<h3>今天想了解什么？</h3>
|
||||
<p>我会根据当前门店的实时业务数据回答经营问题。</p>
|
||||
<div class="quick-list">
|
||||
<t-button
|
||||
v-for="question in props.quickQuestionList"
|
||||
:key="question"
|
||||
class="quick-question"
|
||||
variant="outline"
|
||||
size="small"
|
||||
@click="emit('selectQuestion', question)"
|
||||
>
|
||||
<span v-text="question" />
|
||||
</t-button>
|
||||
</div>
|
||||
<t-button
|
||||
v-if="props.quickQuestionList.length"
|
||||
class="refresh-button"
|
||||
variant="text"
|
||||
size="small"
|
||||
:disabled="isRefreshingQuestions"
|
||||
@click="handleRefreshQuestions"
|
||||
>
|
||||
<template #icon>
|
||||
<t-icon name="refresh" class="refresh-icon" :class="{ refreshing: isRefreshingQuestions }" />
|
||||
</template>
|
||||
<span>换一批</span>
|
||||
</t-button>
|
||||
</div>
|
||||
|
||||
<article
|
||||
v-for="message in props.messages"
|
||||
:key="message.id"
|
||||
class="message-row"
|
||||
:class="message.role"
|
||||
>
|
||||
<div class="message-header">
|
||||
<div class="avatar">
|
||||
<t-icon :name="message.role === 'assistant' ? 'robot-2' : 'user'" />
|
||||
</div>
|
||||
<div class="role-name" v-text="message.role === 'assistant' ? 'AI 小糕' : '店长'" />
|
||||
</div>
|
||||
<div class="message-main">
|
||||
<div class="bubble" :class="message.role">
|
||||
<template v-if="message.role === 'assistant'">
|
||||
<ai-chat-thinking
|
||||
v-for="thinking in message.thinkingList"
|
||||
:key="thinking.id"
|
||||
:content="thinking.content"
|
||||
:is-generating="props.isGenerating && thinking.id === message.thinkingList[message.thinkingList.length - 1]?.id"
|
||||
/>
|
||||
</template>
|
||||
<div v-if="message.content && message.role === 'assistant'" class="content markdown-content">
|
||||
<markdown-view :content="message.content" />
|
||||
</div>
|
||||
<div v-else-if="message.content" class="content" v-text="message.content" />
|
||||
<div v-else-if="message.role === 'assistant' && props.isGenerating" class="typing">
|
||||
<span /><span /><span />
|
||||
</div>
|
||||
<div v-if="message.role === 'assistant' && message.citationList.length" class="citation-list">
|
||||
<div
|
||||
v-for="(citation, index) in message.citationList"
|
||||
:key="`${message.id}-${index}`"
|
||||
class="citation"
|
||||
>
|
||||
<span class="citation-label">数据来源</span>
|
||||
<span v-text="getCitationText(citation)" />
|
||||
<span v-if="citation.generatedAt" class="citation-time" v-text="`生成时间：${citation.generatedAt}`" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="message.role === 'assistant' && (message.statusText || (!props.isGenerating && message.content))" class="message-status" v-text="getMessageStatus(message)" />
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { MarkdownView, Toolkit } from "timi-web";
|
||||
import type { AiChatMessage } from "@/composables/useAiChat";
|
||||
import AiChatThinking from "@/pages/ai/components/AiChatThinking.vue";
|
||||
|
||||
defineOptions({
|
||||
name: "AiChatMessageList"
|
||||
});
|
||||
|
||||
interface Props {
|
||||
messages: AiChatMessage[];
|
||||
isGenerating: boolean;
|
||||
quickQuestionList: readonly string[];
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const emit = defineEmits<{
|
||||
selectQuestion: [question: string];
|
||||
refreshQuestions: [];
|
||||
}>();
|
||||
|
||||
const messageListRef = useTemplateRef<HTMLElement>("messageList");
|
||||
const isRefreshingQuestions = ref(false);
|
||||
|
||||
async function handleRefreshQuestions(): Promise<void> {
|
||||
if (isRefreshingQuestions.value) {
|
||||
return;
|
||||
}
|
||||
isRefreshingQuestions.value = true;
|
||||
emit("refreshQuestions");
|
||||
await Toolkit.sleep(300);
|
||||
isRefreshingQuestions.value = false;
|
||||
}
|
||||
|
||||
async function scrollToBottom(): Promise<void> {
|
||||
await nextTick();
|
||||
const element = messageListRef.value;
|
||||
if (element) {
|
||||
element.scrollTop = element.scrollHeight;
|
||||
}
|
||||
}
|
||||
|
||||
function getMessageStatus(message: AiChatMessage): string {
|
||||
if (message.statusText) {
|
||||
return message.statusText;
|
||||
}
|
||||
const timeText = `生成时间：${formatDateTime(message.createdAt)}`;
|
||||
if (message.duration !== undefined) {
|
||||
return `${timeText} · 查询耗时：${formatDuration(message.duration)}`;
|
||||
}
|
||||
return timeText;
|
||||
}
|
||||
|
||||
function getCitationText(citation: AiChatMessage["citationList"][number]): string {
|
||||
const textList = [
|
||||
citation.dataDomain ? `数据域：${citation.dataDomain}` : "",
|
||||
citation.timeRange ? `统计范围：${citation.timeRange}` : "",
|
||||
citation.caliber ? `统计口径：${citation.caliber}` : "",
|
||||
citation.source ? `来源：${citation.source}` : ""
|
||||
].filter(Boolean);
|
||||
return textList.join(" · ");
|
||||
}
|
||||
|
||||
function formatDateTime(timestamp: number): string {
|
||||
return new Date(timestamp).toLocaleString("zh-CN", { hour12: false });
|
||||
}
|
||||
|
||||
function formatDuration(duration: number): string {
|
||||
if (duration < 1000) {
|
||||
return `${duration} 毫秒`;
|
||||
}
|
||||
return `${(duration / 1000).toFixed(1)} 秒`;
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
scrollToBottom
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.message-list {
|
||||
gap: 1rem;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
padding: .5rem 1rem calc(6rem + env(safe-area-inset-bottom, 0px));
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
flex-direction: column;
|
||||
|
||||
.welcome {
|
||||
margin: auto 0;
|
||||
text-align: center;
|
||||
|
||||
.welcome-icon {
|
||||
color: #0f766e;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
margin: 0 auto 1rem;
|
||||
border-radius: 1.25rem;
|
||||
display: flex;
|
||||
background: #ccfbf1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--td-text-color-secondary);
|
||||
margin: .5rem auto 1rem;
|
||||
font-size: .8125rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.quick-list {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.quick-question {
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
|
||||
:deep(.t-button__content) {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.refresh-button {
|
||||
margin-top: .75rem;
|
||||
|
||||
.refresh-icon.refreshing {
|
||||
animation: refresh-once .3s var(--tui-bezier);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-row {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
|
||||
&.user {
|
||||
.message-header {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.role-name {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.message-header {
|
||||
gap: .5rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
flex: none;
|
||||
color: #0f766e;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
display: flex;
|
||||
background: #ccfbf1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&.user .avatar {
|
||||
color: #2563eb;
|
||||
background: #dbeafe;
|
||||
}
|
||||
|
||||
.message-main {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
&.user .message-main {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.role-name {
|
||||
color: var(--td-text-color-secondary);
|
||||
margin: 0;
|
||||
font-size: .6875rem;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
color: var(--td-text-color-primary);
|
||||
width: 100%;
|
||||
padding: .75rem;
|
||||
border-radius: .25rem 1rem 1rem 1rem;
|
||||
background: var(--ai-bubble);
|
||||
text-align: left;
|
||||
box-shadow: 0 .25rem 1rem rgba(15, 23, 42, .05);
|
||||
|
||||
.thinking + .thinking {
|
||||
margin-top: .75rem;
|
||||
}
|
||||
|
||||
&.user {
|
||||
color: white;
|
||||
border-radius: 1rem .25rem 1rem 1rem;
|
||||
background: #0f766e;
|
||||
}
|
||||
|
||||
.content {
|
||||
font-size: .875rem;
|
||||
line-height: 1.65;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.markdown-content {
|
||||
white-space: normal;
|
||||
|
||||
:deep(.tui-markdown-view) {
|
||||
width: auto;
|
||||
font-size: .875rem;
|
||||
line-height: 1.65;
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.typing {
|
||||
gap: .25rem;
|
||||
display: flex;
|
||||
padding: .25rem .125rem;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
width: .375rem;
|
||||
height: .375rem;
|
||||
border-radius: 50%;
|
||||
background: #0f766e;
|
||||
animation: typing 1.2s infinite ease-in-out;
|
||||
|
||||
&:nth-child(2) {
|
||||
animation-delay: .16s;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
animation-delay: .32s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.citation-list {
|
||||
gap: .375rem;
|
||||
margin-top: .75rem;
|
||||
padding-top: .625rem;
|
||||
display: flex;
|
||||
border-top: 1px solid var(--td-component-border);
|
||||
flex-direction: column;
|
||||
|
||||
.citation {
|
||||
color: var(--td-text-color-secondary);
|
||||
display: flex;
|
||||
font-size: .6875rem;
|
||||
line-height: 1.4;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.citation-label {
|
||||
color: #0f766e;
|
||||
margin-right: .25rem;
|
||||
}
|
||||
|
||||
.citation-time {
|
||||
width: 100%;
|
||||
margin-top: .125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.message-status {
|
||||
color: var(--td-text-color-secondary);
|
||||
margin-top: .5rem;
|
||||
font-size: .6875rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes typing {
|
||||
0%, 60%, 100% {
|
||||
opacity: .35;
|
||||
transform: translateY(0);
|
||||
}
|
||||
30% {
|
||||
opacity: 1;
|
||||
transform: translateY(-.1875rem);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes refresh-once {
|
||||
from {
|
||||
transform: rotate(0);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,30 +1,63 @@
|
||||
<template>
|
||||
<section class="ai-chat-panel" :aria-label="`${props.storeName || '当前门店'}经营助手`">
|
||||
<ai-chat-message-list
|
||||
ref="messageList"
|
||||
:messages="messages"
|
||||
:is-generating="isGenerating"
|
||||
:quick-question-list="aiQuickQuestionList"
|
||||
@select-question="submitMessage"
|
||||
@refresh-questions="refreshQuickQuestions"
|
||||
/>
|
||||
<div class="bottom-area">
|
||||
<div v-if="activeToolStatus" class="tool-status">
|
||||
<t-icon name="loading" size="1rem" />
|
||||
<span v-text="activeToolStatus" />
|
||||
<shared-ai-chat-panel
|
||||
ref="messageList"
|
||||
class="shared-panel"
|
||||
:messages="messages"
|
||||
:is-generating="isGenerating"
|
||||
:is-loading="isLoadingConversation"
|
||||
:active-tool-status="activeToolStatus"
|
||||
:last-error="lastError"
|
||||
:can-retry="canRetry"
|
||||
:aria-label="`${props.storeName || '当前会话'}经营助手`"
|
||||
:role-names="{ assistant: 'AI 小糕', user: '店长' }"
|
||||
:placeholder="'问问小糕怎么个事…'"
|
||||
:format-message-status="formatMessageStatus"
|
||||
@send="submitMessage"
|
||||
@stop="stopGeneration"
|
||||
@retry="retryLastMessage"
|
||||
>
|
||||
<template #welcome>
|
||||
<div class="welcome">
|
||||
<div class="welcome-icon"><t-icon name="robot-2" size="2rem" /></div>
|
||||
<h3>今天想了解什么？</h3>
|
||||
<p>我会根据当前门店的实时业务数据回答经营问题。</p>
|
||||
<div class="quick-list">
|
||||
<t-button
|
||||
v-for="question in aiQuickQuestionList"
|
||||
:key="question"
|
||||
class="quick-question"
|
||||
variant="outline"
|
||||
size="small"
|
||||
@click="submitMessage(question)"
|
||||
>
|
||||
<span v-text="question" />
|
||||
</t-button>
|
||||
</div>
|
||||
<t-button
|
||||
v-if="aiQuickQuestionList.length"
|
||||
class="refresh-button"
|
||||
variant="text"
|
||||
size="small"
|
||||
:disabled="isRefreshingQuestions"
|
||||
@click="refreshQuickQuestions"
|
||||
>
|
||||
<template #icon>
|
||||
<t-icon name="refresh" class="refresh-icon" :class="{ refreshing: isRefreshingQuestions }" />
|
||||
</template>
|
||||
<span>换一批</span>
|
||||
</t-button>
|
||||
</div>
|
||||
<ai-chat-composer
|
||||
v-model="draft"
|
||||
:is-generating="isGenerating"
|
||||
:disabled="isLoadingConversation"
|
||||
:last-error="lastError"
|
||||
:can-retry="canRetry"
|
||||
@send="submitMessage"
|
||||
@stop="stopGeneration"
|
||||
@retry="retryLastMessage"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<template #citation="{ citation }">
|
||||
<div class="citation">
|
||||
<span class="citation-label">数据来源</span>
|
||||
<span v-text="formatCitation(citation)" />
|
||||
<span v-if="citation.generatedAt" class="citation-time">
|
||||
<span v-text="`生成时间：${citation.generatedAt}`" />
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</shared-ai-chat-panel>
|
||||
<ai-conversation-list
|
||||
v-model:visible="conversationVisible"
|
||||
:active-conversation-id="conversationId"
|
||||
@@ -34,16 +67,29 @@
|
||||
@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 {
|
||||
AiChatHttpError,
|
||||
AiChatPanel as SharedAiChatPanel,
|
||||
AiChatStreamError,
|
||||
parseAssistantResponse,
|
||||
useAiChat,
|
||||
type AiChatCitationFormatter,
|
||||
type AiChatMessage,
|
||||
type AiChatMessageStatusFormatter
|
||||
} from "timi-tdesign-mobile";
|
||||
import type { GaoAiConversation, GaoAiConversationMessage, GaoAiConversationReadResponse } from "@/api/GaoAiAPI";
|
||||
import {
|
||||
chat,
|
||||
readConversation as readConversationApi
|
||||
} from "@/api/GaoAiAPI";
|
||||
import AiConversationList from "@/pages/ai/components/AiConversationList.vue";
|
||||
import AiChatMessageList from "@/pages/ai/components/AiChatMessageList.vue";
|
||||
import { aiQuickQuestionList, loadAiQuickQuestions, refreshAiQuickQuestions } from "@/pages/ai/aiChatQuestions";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { Message } from "@/utils/message";
|
||||
import { useUserStore } from "timi-web-api/store";
|
||||
|
||||
defineOptions({
|
||||
name: "AiChatPanel"
|
||||
@@ -56,14 +102,15 @@ interface Props {
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const userStore = useUserStore();
|
||||
const navBarStore = useNavBarStore();
|
||||
type MessageListExpose = {
|
||||
scrollToBottom: () => Promise<void>;
|
||||
};
|
||||
|
||||
const messageListRef = useTemplateRef<MessageListExpose>("messageList");
|
||||
const draft = shallowRef("");
|
||||
const conversationVisible = ref(false);
|
||||
const isRefreshingQuestions = ref(false);
|
||||
const {
|
||||
messages,
|
||||
conversationId,
|
||||
@@ -77,12 +124,40 @@ const {
|
||||
stopGeneration,
|
||||
retryLastMessage,
|
||||
resetConversation
|
||||
} = useAiChat({
|
||||
} = useAiChat<GaoAiConversationReadResponse, { storeId?: string }>({
|
||||
sessionKey: () => props.sessionKey,
|
||||
storeId: () => props.storeId,
|
||||
scrollToBottom
|
||||
context: () => ({ storeId: props.storeId }),
|
||||
request: async ({ message, conversationId: activeConversationId, context, signal }) => await chat({
|
||||
message,
|
||||
...(activeConversationId ? { conversationId: activeConversationId } : {}),
|
||||
...(context?.storeId ? { storeId: context.storeId } : {})
|
||||
}, userStore.token, signal),
|
||||
readConversation: async conversationIdValue => await readConversationHistory(conversationIdValue),
|
||||
mapConversationMessages,
|
||||
scrollToBottom,
|
||||
isConversationExpired,
|
||||
getErrorMessage: error => getAiErrorMessage(error)
|
||||
});
|
||||
const isBusy = computed(() => isGenerating.value || isLoadingConversation.value);
|
||||
const formatCitation: AiChatCitationFormatter = citation => [
|
||||
citation.dataDomain ? `数据域：${citation.dataDomain}` : "",
|
||||
citation.timeRange ? `统计范围：${citation.timeRange}` : "",
|
||||
citation.caliber ? `统计口径：${citation.caliber}` : "",
|
||||
citation.source ? `来源：${citation.source}` : ""
|
||||
].filter(Boolean).join(" · ");
|
||||
const formatMessageStatus: AiChatMessageStatusFormatter = message => {
|
||||
if (message.statusText) {
|
||||
return message.statusText;
|
||||
}
|
||||
const timeText = `生成时间：${new Date(message.createdAt).toLocaleString("zh-CN", { hour12: false })}`;
|
||||
if (message.duration !== undefined) {
|
||||
const durationText = message.duration < 1000
|
||||
? `${message.duration} 毫秒`
|
||||
: `${(message.duration / 1000).toFixed(1)} 秒`;
|
||||
return `${timeText} · 查询耗时：${durationText}`;
|
||||
}
|
||||
return timeText;
|
||||
};
|
||||
|
||||
async function submitMessage(message: string): Promise<void> {
|
||||
await sendMessage(message);
|
||||
@@ -111,14 +186,144 @@ function handleConversationDelete(deletedConversationId: string): void {
|
||||
}
|
||||
}
|
||||
|
||||
function refreshQuickQuestions(): void {
|
||||
async function refreshQuickQuestions(): Promise<void> {
|
||||
if (isRefreshingQuestions.value) {
|
||||
return;
|
||||
}
|
||||
isRefreshingQuestions.value = true;
|
||||
refreshAiQuickQuestions();
|
||||
await new Promise<void>(resolve => setTimeout(resolve, 300));
|
||||
isRefreshingQuestions.value = false;
|
||||
}
|
||||
|
||||
async function scrollToBottom(): Promise<void> {
|
||||
await messageListRef.value?.scrollToBottom();
|
||||
}
|
||||
|
||||
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
|
||||
};
|
||||
}
|
||||
|
||||
function mapConversationMessages(response: GaoAiConversationReadResponse): AiChatMessage[] {
|
||||
const sourceList = Array.isArray(response.data) ? response.data : [];
|
||||
return sourceList
|
||||
.map((item, index) => ({
|
||||
item,
|
||||
index,
|
||||
timestamp: getTimestamp(item["created_at"])
|
||||
}))
|
||||
.sort((left, right) => left.timestamp - right.timestamp || left.index - right.index)
|
||||
.flatMap(({ item, index }) => {
|
||||
const messageList: AiChatMessage[] = [];
|
||||
const createdAt = getTimestamp(item["created_at"]);
|
||||
const query = getRawString(item.query);
|
||||
const answer = getRawString(item.answer);
|
||||
if (query) {
|
||||
messageList.push(createHistoryMessage(index * 2 + 1, "user", query, createdAt));
|
||||
}
|
||||
if (answer || isFailedConversationMessage(item)) {
|
||||
const parsedAnswer = parseAssistantResponse(answer);
|
||||
messageList.push({
|
||||
...createHistoryMessage(index * 2 + 2, "assistant", parsedAnswer.answer, createdAt),
|
||||
thinkingList: parsedAnswer.thinkingList.map((content, index) => ({
|
||||
id: index + 1,
|
||||
content
|
||||
})),
|
||||
statusText: isFailedConversationMessage(item) ? "本次回答生成失败" : undefined
|
||||
});
|
||||
}
|
||||
return messageList;
|
||||
});
|
||||
}
|
||||
|
||||
function createHistoryMessage(
|
||||
id: number,
|
||||
role: AiChatMessage["role"],
|
||||
content: string,
|
||||
createdAt: number
|
||||
): AiChatMessage {
|
||||
return {
|
||||
id,
|
||||
role,
|
||||
content,
|
||||
thinkingList: [],
|
||||
citationList: [],
|
||||
createdAt
|
||||
};
|
||||
}
|
||||
|
||||
function isConversationExpired(error: unknown): boolean {
|
||||
if (error instanceof AiChatHttpError || error instanceof AiChatStreamError) {
|
||||
return error.message.includes("AI 会话不存在或已过期")
|
||||
|| error.code?.toLowerCase().includes("session") === true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function getAiErrorMessage(error: unknown): string {
|
||||
if (error instanceof AiChatHttpError) {
|
||||
if (error.status === 401) {
|
||||
return error.message.includes("会话") ? error.message : "登录已过期，请重新登录";
|
||||
}
|
||||
if (error.status === 403) {
|
||||
return "当前账号无权使用门店智能助手";
|
||||
}
|
||||
if (error.status === 429) {
|
||||
return "请求过于频繁，请稍后再试";
|
||||
}
|
||||
return error.message;
|
||||
}
|
||||
if (error instanceof AiChatStreamError) {
|
||||
if (error.code === "DIFY_TIMEOUT") {
|
||||
return "数据查询超时，请缩小时间范围后重试";
|
||||
}
|
||||
return error.message;
|
||||
}
|
||||
return getErrorMessage(error, "智能助手暂时不可用，请稍后重试");
|
||||
}
|
||||
|
||||
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 getRawString(value: unknown): string {
|
||||
return typeof value === "string" ? value : "";
|
||||
}
|
||||
|
||||
function isFailedConversationMessage(message: GaoAiConversationMessage): boolean {
|
||||
const status = typeof message.status === "string" ? message.status.toLowerCase() : "";
|
||||
return status === "error" || status === "failed" || status === "failure";
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
navBarStore.clearRight();
|
||||
navBarStore.setRightText("历史", "var(--td-brand-color)", openConversationList);
|
||||
@@ -129,60 +334,97 @@ watch(isBusy, value => navBarStore.setRightDisabled(value));
|
||||
|
||||
onUnmounted(() => navBarStore.clearRight());
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.ai-chat-panel {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
background: var(--ai-background);
|
||||
padding-top: var(--app-nav-height);
|
||||
flex-direction: column;
|
||||
.shared-panel {
|
||||
:deep(.ai-chat-panel) {
|
||||
padding-top: var(--app-nav-height);
|
||||
}
|
||||
|
||||
.bottom-area {
|
||||
inset: auto 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
|
||||
width: auto;
|
||||
margin: 0 auto;
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
max-width: 40rem;
|
||||
:deep(.welcome) {
|
||||
margin: auto 0;
|
||||
text-align: center;
|
||||
|
||||
.tool-status {
|
||||
gap: .375rem;
|
||||
margin-bottom: .5rem;
|
||||
.welcome-icon {
|
||||
color: #0f766e;
|
||||
padding: .5rem .75rem;
|
||||
border-radius: .75rem;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
margin: 0 auto 1rem;
|
||||
border-radius: 1.25rem;
|
||||
display: flex;
|
||||
font-size: .75rem;
|
||||
background: var(--ai-soft);
|
||||
background: #ccfbf1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.t-icon {
|
||||
animation: rotate 1s linear infinite;
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--td-text-color-secondary);
|
||||
margin: .5rem auto 1rem;
|
||||
font-size: .8125rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.quick-list {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.quick-question {
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
|
||||
:deep(.t-button__content) {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.refresh-button {
|
||||
margin-top: .75rem;
|
||||
|
||||
.refresh-icon.refreshing {
|
||||
animation: refresh-once .3s var(--td-animation-easing-standard);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.citation) {
|
||||
color: var(--td-text-color-secondary);
|
||||
display: flex;
|
||||
font-size: .6875rem;
|
||||
line-height: 1.4;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
:deep(.citation-label) {
|
||||
color: #0f766e;
|
||||
margin-right: .25rem;
|
||||
}
|
||||
|
||||
:deep(.citation-time) {
|
||||
width: 100%;
|
||||
margin-top: .125rem;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
@keyframes refresh-once {
|
||||
from {
|
||||
transform: rotate(0);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
:global(:root) {
|
||||
--ai-background: rgba(255, 255, 255, .98);
|
||||
--ai-bubble: #f5f6f8;
|
||||
--ai-input: white;
|
||||
--ai-soft: #f0fdfa;
|
||||
}
|
||||
|
||||
:global(html.theme-dark) {
|
||||
--ai-background: rgba(15, 23, 42, .98);
|
||||
--ai-bubble: #1e293b;
|
||||
--ai-input: #111827;
|
||||
--ai-soft: rgba(20, 184, 166, .12);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,84 +0,0 @@
|
||||
<template>
|
||||
<section class="thinking" aria-label="Agent think">
|
||||
<div class="thinking-header">
|
||||
<span>小糕正在思考...</span>
|
||||
</div>
|
||||
<div
|
||||
ref="thinkingContent"
|
||||
class="thinking-content"
|
||||
role="log"
|
||||
aria-live="polite"
|
||||
>
|
||||
<span v-text="props.content" />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
content: string;
|
||||
isGenerating: boolean;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const thinkingContentRef = useTemplateRef<HTMLElement>("thinkingContent");
|
||||
|
||||
// ---------- 自动滚动 ----------
|
||||
|
||||
async function scrollToBottom(): Promise<void> {
|
||||
await nextTick();
|
||||
|
||||
const element = thinkingContentRef.value;
|
||||
if (!element) {
|
||||
return;
|
||||
}
|
||||
|
||||
element.scrollTop = element.scrollHeight;
|
||||
}
|
||||
|
||||
watch(
|
||||
[() => props.content, () => props.isGenerating],
|
||||
async ([content, isGenerating]) => {
|
||||
if (content && isGenerating) {
|
||||
await scrollToBottom();
|
||||
}
|
||||
},
|
||||
{ deep: true, flush: "post" }
|
||||
);
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.thinking {
|
||||
gap: .5rem;
|
||||
height: clamp(2rem, 24vh, 10rem);
|
||||
display: flex;
|
||||
padding: .625rem .75rem;
|
||||
border: 1px solid var(--td-component-border);
|
||||
border-radius: .75rem;
|
||||
background: var(--ai-background);
|
||||
flex-direction: column;
|
||||
min-height: 2rem;
|
||||
max-height: 10rem;
|
||||
overflow: hidden;
|
||||
|
||||
.thinking-header {
|
||||
gap: .375rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--td-text-color-secondary);
|
||||
font-size: .75rem;
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
.thinking-content {
|
||||
flex: 1;
|
||||
padding-right: .25rem;
|
||||
color: var(--td-text-color-secondary);
|
||||
font-size: .75rem;
|
||||
line-height: 1.5;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -235,7 +235,7 @@ function formatConversationTime(conversation: GaoAiConversation): number {
|
||||
const value = conversation["updated_at"] || conversation["created_at"];
|
||||
const timestamp = typeof value === "number" ? value : Number(value);
|
||||
if (!Number.isFinite(timestamp) || timestamp <= 0) {
|
||||
return "时间未知";
|
||||
return -1;
|
||||
}
|
||||
return timestamp < 100000000000 ? timestamp * 1000 : timestamp;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user