add AIAgent
This commit is contained in:
Timi
@@ -0,0 +1,42 @@
|
||||
<script setup lang="ts">
|
||||
import { useUserStore } from "timi-web-api/store";
|
||||
import AiChatPanel from "@/pages/ai/components/AiChatPanel.vue";
|
||||
import { useCurrentStoreStore } from "@/store/currentStoreStore";
|
||||
import { gaoRoleCodes } from "@/utils/permission";
|
||||
|
||||
defineOptions({
|
||||
name: "AiChatPage"
|
||||
});
|
||||
|
||||
const userStore = useUserStore();
|
||||
const currentStoreStore = useCurrentStoreStore();
|
||||
const sessionKey = computed(() => `${userStore.loginUser.user?.id || userStore.loginUser.id || ""}:${currentStoreStore.currentStoreId}`);
|
||||
const canUseAi = computed(() => userStore.hasRoles(gaoRoleCodes.storeManager));
|
||||
const isGlobalManager = computed(() => userStore.hasRoles(gaoRoleCodes.globalManager));
|
||||
const aiStoreId = computed(() => canUseAi.value && isGlobalManager.value ? currentStoreStore.currentStoreId : undefined);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="canUseAi" class="ai-chat-page">
|
||||
<ai-chat-panel
|
||||
:store-name="currentStoreStore.currentStoreName"
|
||||
:session-key="sessionKey"
|
||||
:store-id="aiStoreId"
|
||||
/>
|
||||
</div>
|
||||
<t-empty v-else description="当前账号无权使用门店智能助手" />
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
.ai-chat-page {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
:global(html.theme-dark) {
|
||||
.ai-chat-page {
|
||||
background: #10161f;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,8 @@
|
||||
/** 门店智能助手快捷问题。 */
|
||||
export const aiQuickQuestionList = [
|
||||
"今天门店经营怎么样？",
|
||||
"本月销售额、订单数和应收款是多少？",
|
||||
"哪些产品库存需要关注？",
|
||||
"本月有哪些需要重点跟进的客户？",
|
||||
"本月客户复购情况如何？"
|
||||
] as const;
|
||||
@@ -0,0 +1,131 @@
|
||||
<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.prevent="submitMessage">
|
||||
<t-input
|
||||
v-model="draft"
|
||||
class="input"
|
||||
borderless
|
||||
:disabled="isGenerating"
|
||||
: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;
|
||||
}
|
||||
|
||||
defineProps<Props>();
|
||||
const draft = defineModel<string>({ required: true });
|
||||
const emit = defineEmits<{
|
||||
send: [message: string];
|
||||
stop: [];
|
||||
retry: [];
|
||||
}>();
|
||||
|
||||
function submitMessage(): void {
|
||||
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);
|
||||
display: flex;
|
||||
padding: .25rem .25rem .25rem .75rem;
|
||||
margin-top: .5rem;
|
||||
box-shadow: 0 .5rem 1.5rem rgba(15, 23, 42, .12);
|
||||
align-items: center;
|
||||
border-radius: 1rem;
|
||||
|
||||
.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>
|
||||
@@ -0,0 +1,314 @@
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<article
|
||||
v-for="message in props.messages"
|
||||
:key="message.id"
|
||||
class="message-row"
|
||||
:class="message.role"
|
||||
>
|
||||
<div class="avatar">
|
||||
<t-icon :name="message.role === 'assistant' ? 'robot-2' : 'user'" />
|
||||
</div>
|
||||
<div class="message-main">
|
||||
<div class="role-name" v-text="message.role === 'assistant' ? 'AI 小糕' : '店长'" />
|
||||
<div class="bubble" :class="message.role">
|
||||
<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 } from "timi-web";
|
||||
import type { AiChatMessage } from "@/composables/useAiChat";
|
||||
|
||||
defineOptions({
|
||||
name: "AiChatMessageList"
|
||||
});
|
||||
|
||||
interface Props {
|
||||
messages: AiChatMessage[];
|
||||
isGenerating: boolean;
|
||||
quickQuestionList: readonly string[];
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const emit = defineEmits<{
|
||||
selectQuestion: [question: string];
|
||||
}>();
|
||||
|
||||
const messageListRef = useTemplateRef<HTMLElement>("messageList");
|
||||
|
||||
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(12rem + 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-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
.quick-question {
|
||||
max-width: 100%;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.message-row {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
&.user {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.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 {
|
||||
max-width: calc(100% - 2.5rem);
|
||||
}
|
||||
|
||||
&.user .message-main {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.role-name {
|
||||
color: var(--td-text-color-secondary);
|
||||
margin: 0 .25rem .25rem;
|
||||
font-size: .6875rem;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
color: var(--td-text-color-primary);
|
||||
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);
|
||||
|
||||
&.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);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<section class="ai-chat-panel" aria-label="门店经营助手">
|
||||
<ai-chat-message-list
|
||||
ref="messageList"
|
||||
:messages="messages"
|
||||
:is-generating="isGenerating"
|
||||
:quick-question-list="aiQuickQuestionList"
|
||||
@select-question="selectQuestion"
|
||||
/>
|
||||
<div class="bottom-area">
|
||||
<div v-if="activeToolStatus" class="tool-status">
|
||||
<t-icon name="loading" size="1rem" />
|
||||
<span v-text="activeToolStatus" />
|
||||
</div>
|
||||
<ai-chat-composer
|
||||
v-model="draft"
|
||||
:is-generating="isGenerating"
|
||||
:last-error="lastError"
|
||||
:can-retry="canRetry"
|
||||
@send="submitMessage"
|
||||
@stop="stopGeneration"
|
||||
@retry="retryLastMessage"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { useAiChat } from "@/composables/useAiChat";
|
||||
import AiChatComposer from "@/pages/ai/components/AiChatComposer.vue";
|
||||
import AiChatMessageList from "@/pages/ai/components/AiChatMessageList.vue";
|
||||
import { aiQuickQuestionList } from "@/pages/ai/aiChatQuestions";
|
||||
|
||||
defineOptions({
|
||||
name: "AiChatPanel"
|
||||
});
|
||||
|
||||
interface Props {
|
||||
storeName: string;
|
||||
sessionKey: string;
|
||||
storeId?: string;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
type MessageListExpose = {
|
||||
scrollToBottom: () => Promise<void>;
|
||||
};
|
||||
|
||||
const messageListRef = useTemplateRef<MessageListExpose>("messageList");
|
||||
const draft = shallowRef("");
|
||||
const { messages, isGenerating, activeToolStatus, lastError, canRetry, sendMessage, stopGeneration, retryLastMessage } = useAiChat({
|
||||
sessionKey: () => props.sessionKey,
|
||||
storeId: () => props.storeId,
|
||||
scrollToBottom
|
||||
});
|
||||
|
||||
async function submitMessage(message: string): Promise<void> {
|
||||
await sendMessage(message);
|
||||
}
|
||||
|
||||
function selectQuestion(question: string): void {
|
||||
draft.value = question;
|
||||
}
|
||||
|
||||
async function scrollToBottom(): Promise<void> {
|
||||
await messageListRef.value?.scrollToBottom();
|
||||
}
|
||||
</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;
|
||||
|
||||
.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;
|
||||
|
||||
.tool-status {
|
||||
gap: .375rem;
|
||||
margin-bottom: .5rem;
|
||||
color: #0f766e;
|
||||
padding: .5rem .75rem;
|
||||
border-radius: .75rem;
|
||||
display: flex;
|
||||
font-size: .75rem;
|
||||
background: var(--ai-soft);
|
||||
align-items: center;
|
||||
|
||||
.t-icon {
|
||||
animation: rotate 1s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
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>
|
||||
Reference in New Issue
Block a user