59 lines
1.3 KiB
Vue
59 lines
1.3 KiB
Vue
<template>
|
|
<div class="demo">
|
|
<div class="phone">
|
|
<ai-chat-panel
|
|
:messages="messages"
|
|
:is-generating="isGenerating"
|
|
:active-tool-status="activeToolStatus"
|
|
:last-error="lastError"
|
|
:can-retry="canRetry"
|
|
@send="sendMessage"
|
|
@stop="stopGeneration"
|
|
@retry="retryLastMessage"
|
|
/>
|
|
</div>
|
|
|
|
<p class="note" v-text="'输入任意问题：回答由本地假流逐块吐出，可随时点「停止」。'" />
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { AiChatPanel, useAiChat } from "timi-tdesign-mobile";
|
|
import { createMockReply } from "../ai/mock-sse";
|
|
|
|
/**
|
|
* 面板本身是纯展示组件，会话状态全部由 `useAiChat` 提供。
|
|
* 真实项目里把 `request` 换成调后端 SSE 接口即可，组件侧不用改。
|
|
*/
|
|
const {
|
|
messages,
|
|
isGenerating,
|
|
activeToolStatus,
|
|
lastError,
|
|
canRetry,
|
|
sendMessage,
|
|
stopGeneration,
|
|
retryLastMessage
|
|
} = useAiChat({
|
|
request: async ({ message, signal }) => createMockReply(message, signal)
|
|
});
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.demo {
|
|
.phone {
|
|
height: 30rem;
|
|
overflow: hidden;
|
|
border: 1px solid var(--vp-c-divider);
|
|
border-radius: .5rem;
|
|
background: var(--vp-c-bg-soft);
|
|
}
|
|
|
|
.note {
|
|
margin: .75rem 0 0;
|
|
font-size: .75rem;
|
|
color: var(--vp-c-text-2);
|
|
}
|
|
}
|
|
</style>
|