feat: 增加智能体对话体验配置
- 支持欢迎语、猜你想问和输入提示的编辑、草稿预览与发布态展示 - 补充配置校验、发布快照持久化和发布后回显修复
This commit is contained in:
@@ -5,12 +5,13 @@ import type {
|
||||
AgentValidationIssue,
|
||||
} from '../types';
|
||||
|
||||
import { computed } from 'vue';
|
||||
import { computed, nextTick, ref, watch } from 'vue';
|
||||
|
||||
import { Close } from '@element-plus/icons-vue';
|
||||
import { ElButton } from 'element-plus';
|
||||
import { ElButton, ElTabPane, ElTabs } from 'element-plus';
|
||||
|
||||
import AgentBaseForm from './AgentBaseForm.vue';
|
||||
import AgentInteractionForm from './AgentInteractionForm.vue';
|
||||
import AgentKnowledgeForm from './AgentKnowledgeForm.vue';
|
||||
import AgentToolForm from './AgentToolForm.vue';
|
||||
import AgentTryoutPanel from './AgentTryoutPanel.vue';
|
||||
@@ -39,6 +40,36 @@ const selectedKnowledge = computed(() => {
|
||||
return props.state.knowledgeBindings.find((item) => item.localId === localId);
|
||||
});
|
||||
|
||||
const activeBaseTab = ref<'basic' | 'interaction'>('basic');
|
||||
const interactionForm = ref<InstanceType<typeof AgentInteractionForm>>();
|
||||
|
||||
function isInteractionIssue(issue?: AgentValidationIssue) {
|
||||
return issue?.field?.startsWith('interaction.');
|
||||
}
|
||||
|
||||
async function focusIssue(issue: AgentValidationIssue) {
|
||||
if (issue.nodeId !== 'agent-base') return;
|
||||
activeBaseTab.value = isInteractionIssue(issue) ? 'interaction' : 'basic';
|
||||
if (isInteractionIssue(issue)) {
|
||||
await nextTick();
|
||||
await interactionForm.value?.focusField(issue.field);
|
||||
}
|
||||
}
|
||||
|
||||
function handleIssueClick(issue: AgentValidationIssue) {
|
||||
void focusIssue(issue);
|
||||
emit('selectIssue', issue.nodeId);
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.issues,
|
||||
(issues) => {
|
||||
const firstIssue = issues[0];
|
||||
if (firstIssue?.nodeId === 'agent-base') void focusIssue(firstIssue);
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
const selectedTool = computed(() => {
|
||||
if (!props.state.selectedNodeId.startsWith('tool:')) return;
|
||||
const localId = props.state.selectedNodeId.slice('tool:'.length);
|
||||
@@ -88,19 +119,31 @@ const selectedToolOptions = computed(() => {
|
||||
:key="`${issue.nodeId}-${issue.field || issue.message}`"
|
||||
class="agent-inspector__issue"
|
||||
type="button"
|
||||
@click="emit('selectIssue', issue.nodeId)"
|
||||
@click="handleIssueClick(issue)"
|
||||
>
|
||||
{{ issue.message }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<AgentBaseForm
|
||||
v-if="state.panelMode === 'base'"
|
||||
:agent="state.agent"
|
||||
:categories="categories"
|
||||
:models="models"
|
||||
@change="emit('change')"
|
||||
/>
|
||||
<template v-if="state.panelMode === 'base'">
|
||||
<ElTabs v-model="activeBaseTab" class="agent-inspector__tabs">
|
||||
<ElTabPane label="基础设置" name="basic">
|
||||
<AgentBaseForm
|
||||
:agent="state.agent"
|
||||
:categories="categories"
|
||||
:models="models"
|
||||
@change="emit('change')"
|
||||
/>
|
||||
</ElTabPane>
|
||||
<ElTabPane label="对话体验" name="interaction">
|
||||
<AgentInteractionForm
|
||||
ref="interactionForm"
|
||||
:agent="state.agent"
|
||||
@change="emit('change')"
|
||||
/>
|
||||
</ElTabPane>
|
||||
</ElTabs>
|
||||
</template>
|
||||
<AgentKnowledgeForm
|
||||
v-else-if="selectedKnowledge"
|
||||
:binding="selectedKnowledge"
|
||||
@@ -186,6 +229,20 @@ const selectedToolOptions = computed(() => {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.agent-inspector__tabs :deep(.el-tabs__header) {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
padding: 0 var(--space-4);
|
||||
margin: 0;
|
||||
background: hsl(var(--surface-panel));
|
||||
border-bottom: 1px solid hsl(var(--line-subtle));
|
||||
}
|
||||
|
||||
.agent-inspector__tabs :deep(.el-tabs__nav-wrap::after) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.agent-inspector__empty {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,328 @@
|
||||
<script setup lang="ts">
|
||||
import type { AgentInfo } from '../types';
|
||||
|
||||
import { computed, nextTick, ref } from 'vue';
|
||||
|
||||
import { Delete, Plus, Rank } from '@element-plus/icons-vue';
|
||||
import { ElButton, ElForm, ElFormItem, ElIcon, ElInput } from 'element-plus';
|
||||
|
||||
import {
|
||||
MAX_INPUT_PLACEHOLDER_LENGTH,
|
||||
MAX_SUGGESTED_QUESTION_COUNT,
|
||||
MAX_SUGGESTED_QUESTION_LENGTH,
|
||||
MAX_WELCOME_MESSAGE_LENGTH,
|
||||
} from '../interaction-config';
|
||||
|
||||
const props = defineProps<{
|
||||
agent: AgentInfo;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{ change: [] }>();
|
||||
|
||||
const welcomeInput = ref();
|
||||
const placeholderInput = ref();
|
||||
const questionInputs = ref<any[]>([]);
|
||||
const draggingIndex = ref<number>();
|
||||
|
||||
const questions = computed(
|
||||
() => props.agent.interactionConfigJson!.suggestedQuestions,
|
||||
);
|
||||
const duplicateQuestionIndexes = computed(() => {
|
||||
const firstIndexes = new Map<string, number>();
|
||||
const duplicates = new Set<number>();
|
||||
questions.value.forEach((question, index) => {
|
||||
const normalized = question.trim();
|
||||
if (!normalized) return;
|
||||
const firstIndex = firstIndexes.get(normalized);
|
||||
if (firstIndex === undefined) {
|
||||
firstIndexes.set(normalized, index);
|
||||
return;
|
||||
}
|
||||
duplicates.add(firstIndex);
|
||||
duplicates.add(index);
|
||||
});
|
||||
return duplicates;
|
||||
});
|
||||
|
||||
function questionError(index: number) {
|
||||
const question = questions.value[index] || '';
|
||||
if (question.trim().length > MAX_SUGGESTED_QUESTION_LENGTH) {
|
||||
return '最多 80 个字符';
|
||||
}
|
||||
if (duplicateQuestionIndexes.value.has(index)) {
|
||||
return '内容重复';
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
async function addQuestion() {
|
||||
if (questions.value.length >= MAX_SUGGESTED_QUESTION_COUNT) return;
|
||||
questions.value.push('');
|
||||
emit('change');
|
||||
await nextTick();
|
||||
questionInputs.value.at(-1)?.focus?.();
|
||||
}
|
||||
|
||||
function removeQuestion(index: number) {
|
||||
questions.value.splice(index, 1);
|
||||
emit('change');
|
||||
}
|
||||
|
||||
function moveQuestion(from: number, to: number) {
|
||||
if (from === to || to < 0 || to >= questions.value.length) return;
|
||||
const [question] = questions.value.splice(from, 1);
|
||||
questions.value.splice(to, 0, question || '');
|
||||
emit('change');
|
||||
void nextTick(() => questionInputs.value[to]?.focus?.());
|
||||
}
|
||||
|
||||
function handleDragStart(index: number, event: DragEvent) {
|
||||
draggingIndex.value = index;
|
||||
event.dataTransfer?.setData('text/plain', String(index));
|
||||
if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move';
|
||||
}
|
||||
|
||||
function handleDrop(index: number, event: DragEvent) {
|
||||
event.preventDefault();
|
||||
const from = draggingIndex.value;
|
||||
draggingIndex.value = undefined;
|
||||
if (from === undefined) return;
|
||||
moveQuestion(from, index);
|
||||
}
|
||||
|
||||
function handleMoveKeydown(index: number, event: KeyboardEvent) {
|
||||
if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') return;
|
||||
event.preventDefault();
|
||||
moveQuestion(index, index + (event.key === 'ArrowUp' ? -1 : 1));
|
||||
}
|
||||
|
||||
async function focusField(field?: string) {
|
||||
await nextTick();
|
||||
if (field === 'interaction.welcomeMessage') {
|
||||
welcomeInput.value?.focus?.();
|
||||
return;
|
||||
}
|
||||
if (field === 'interaction.inputPlaceholder') {
|
||||
placeholderInput.value?.focus?.();
|
||||
return;
|
||||
}
|
||||
const match = field?.match(/^interaction\.suggestedQuestions\.(\d+)$/);
|
||||
if (match) questionInputs.value[Number(match[1])]?.focus?.();
|
||||
}
|
||||
|
||||
defineExpose({ focusField });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ElForm label-position="top" class="agent-interaction-form">
|
||||
<ElFormItem label="欢迎语">
|
||||
<ElInput
|
||||
ref="welcomeInput"
|
||||
v-model="agent.interactionConfigJson!.welcomeMessage"
|
||||
type="textarea"
|
||||
:rows="5"
|
||||
resize="vertical"
|
||||
:maxlength="MAX_WELCOME_MESSAGE_LENGTH"
|
||||
show-word-limit
|
||||
placeholder="留空时使用默认欢迎语"
|
||||
@input="emit('change')"
|
||||
/>
|
||||
</ElFormItem>
|
||||
|
||||
<div class="agent-interaction-form__section-head">
|
||||
<div>
|
||||
<div class="agent-interaction-form__section-title">猜你想问</div>
|
||||
<div class="agent-interaction-form__section-hint">
|
||||
新会话中展示，点击后直接发送
|
||||
</div>
|
||||
</div>
|
||||
<span class="agent-interaction-form__count">
|
||||
{{ questions.length }}/{{ MAX_SUGGESTED_QUESTION_COUNT }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div v-if="questions.length > 0" class="agent-interaction-form__questions">
|
||||
<div
|
||||
v-for="(_, index) in questions"
|
||||
:key="index"
|
||||
class="agent-interaction-form__question"
|
||||
:class="{ 'is-dragging': draggingIndex === index }"
|
||||
@dragover.prevent
|
||||
@drop="handleDrop(index, $event)"
|
||||
>
|
||||
<button
|
||||
class="agent-interaction-form__drag"
|
||||
type="button"
|
||||
draggable="true"
|
||||
:aria-label="`调整第 ${index + 1} 条问题顺序`"
|
||||
title="拖动排序，或使用上下方向键"
|
||||
@dragend="draggingIndex = undefined"
|
||||
@dragstart="handleDragStart(index, $event)"
|
||||
@keydown="handleMoveKeydown(index, $event)"
|
||||
>
|
||||
<ElIcon><Rank /></ElIcon>
|
||||
</button>
|
||||
<div class="agent-interaction-form__question-input">
|
||||
<ElInput
|
||||
:ref="(element) => (questionInputs[index] = element)"
|
||||
v-model="questions[index]"
|
||||
:maxlength="MAX_SUGGESTED_QUESTION_LENGTH"
|
||||
:placeholder="`问题 ${index + 1}`"
|
||||
@input="emit('change')"
|
||||
/>
|
||||
<span
|
||||
v-if="questionError(index)"
|
||||
class="agent-interaction-form__error"
|
||||
>
|
||||
{{ questionError(index) }}
|
||||
</span>
|
||||
</div>
|
||||
<ElButton
|
||||
:icon="Delete"
|
||||
circle
|
||||
text
|
||||
type="danger"
|
||||
:aria-label="`删除第 ${index + 1} 条问题`"
|
||||
@click="removeQuestion(index)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="agent-interaction-form__empty">暂无建议问题</div>
|
||||
|
||||
<ElButton
|
||||
class="agent-interaction-form__add"
|
||||
:icon="Plus"
|
||||
:disabled="questions.length >= MAX_SUGGESTED_QUESTION_COUNT"
|
||||
@click="addQuestion"
|
||||
>
|
||||
添加问题
|
||||
</ElButton>
|
||||
|
||||
<ElFormItem label="输入提示" class="agent-interaction-form__placeholder">
|
||||
<ElInput
|
||||
ref="placeholderInput"
|
||||
v-model="agent.interactionConfigJson!.inputPlaceholder"
|
||||
:maxlength="MAX_INPUT_PLACEHOLDER_LENGTH"
|
||||
show-word-limit
|
||||
placeholder="输入消息"
|
||||
@input="emit('change')"
|
||||
/>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.agent-interaction-form {
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.agent-interaction-form__section-head {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.agent-interaction-form__section-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--text-strong));
|
||||
}
|
||||
|
||||
.agent-interaction-form__section-hint,
|
||||
.agent-interaction-form__count {
|
||||
margin-top: var(--space-1);
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
color: hsl(var(--text-muted));
|
||||
}
|
||||
|
||||
.agent-interaction-form__questions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.agent-interaction-form__question {
|
||||
display: grid;
|
||||
grid-template-columns: 28px minmax(0, 1fr) 32px;
|
||||
gap: var(--space-2);
|
||||
align-items: start;
|
||||
padding: var(--space-2);
|
||||
background: hsl(var(--surface-subtle));
|
||||
border: 1px solid hsl(var(--line-subtle));
|
||||
border-radius: var(--radius-toolbar);
|
||||
transition:
|
||||
border-color var(--motion-duration-fast) var(--motion-ease-standard),
|
||||
opacity var(--motion-duration-fast) var(--motion-ease-standard);
|
||||
}
|
||||
|
||||
.agent-interaction-form__question:focus-within {
|
||||
border-color: var(--el-color-primary-light-5);
|
||||
}
|
||||
|
||||
.agent-interaction-form__question.is-dragging {
|
||||
opacity: 0.56;
|
||||
}
|
||||
|
||||
.agent-interaction-form__drag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
color: hsl(var(--text-muted));
|
||||
cursor: grab;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: var(--radius-control);
|
||||
}
|
||||
|
||||
.agent-interaction-form__drag:hover {
|
||||
color: var(--el-color-primary);
|
||||
background: var(--el-color-primary-light-9);
|
||||
}
|
||||
|
||||
.agent-interaction-form__drag:focus-visible {
|
||||
outline: 2px solid var(--el-color-primary-light-5);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.agent-interaction-form__question-input {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.agent-interaction-form__error {
|
||||
display: block;
|
||||
margin-top: var(--space-1);
|
||||
font-size: 12px;
|
||||
color: var(--el-color-danger);
|
||||
}
|
||||
|
||||
.agent-interaction-form__empty {
|
||||
padding: var(--space-4);
|
||||
font-size: 13px;
|
||||
color: hsl(var(--text-muted));
|
||||
text-align: center;
|
||||
background: hsl(var(--surface-subtle));
|
||||
border-radius: var(--radius-toolbar);
|
||||
}
|
||||
|
||||
.agent-interaction-form__add {
|
||||
width: 100%;
|
||||
margin-top: var(--space-2);
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
.agent-interaction-form__placeholder {
|
||||
margin-top: var(--space-6);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.agent-interaction-form__question {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,18 +1,28 @@
|
||||
<script setup lang="ts">
|
||||
import type {ChatTimelineMessageItem, ChatTimelineToolApprovalPayload,} from '@easyflow/common-ui';
|
||||
import {ChatTimeline} from '@easyflow/common-ui';
|
||||
import type {
|
||||
ChatTimelineMessageItem,
|
||||
ChatTimelineToolApprovalPayload,
|
||||
} from '@easyflow/common-ui';
|
||||
|
||||
import type {AgentInfo, AgentKnowledgeBinding, AgentToolBinding,} from '../types';
|
||||
import type {
|
||||
AgentInfo,
|
||||
AgentKnowledgeBinding,
|
||||
AgentToolBinding,
|
||||
} from '../types';
|
||||
|
||||
import {onMounted, ref, watch} from 'vue';
|
||||
import {BrushCleaning} from '@easyflow/icons';
|
||||
import { computed, onMounted, ref, watch } from 'vue';
|
||||
|
||||
import {ElButton, ElMessage} from 'element-plus';
|
||||
import { ChatTimeline } from '@easyflow/common-ui';
|
||||
import { BrushCleaning } from '@easyflow/icons';
|
||||
|
||||
import { ElButton, ElMessage } from 'element-plus';
|
||||
|
||||
import AiChatPanel from '#/components/ai-chat/AiChatPanel.vue';
|
||||
|
||||
import {approveAgentRun, rejectAgentRun} from '../api';
|
||||
import {useAgentTryoutStream} from '../composables/useAgentTryoutStream';
|
||||
import { approveAgentRun, rejectAgentRun } from '../api';
|
||||
import { useAgentTryoutStream } from '../composables/useAgentTryoutStream';
|
||||
import { resolveInteractionDisplay } from '../interaction-config';
|
||||
import AgentWelcomeState from './AgentWelcomeState.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
agent: AgentInfo;
|
||||
@@ -35,6 +45,9 @@ const {
|
||||
stop,
|
||||
} = useAgentTryoutStream();
|
||||
const approvalLoading = ref(false);
|
||||
const interactionDisplay = computed(() =>
|
||||
resolveInteractionDisplay(props.agent),
|
||||
);
|
||||
|
||||
function getDraftContext() {
|
||||
return {
|
||||
@@ -68,12 +81,17 @@ watch(
|
||||
);
|
||||
|
||||
async function handleSend(prompt: string) {
|
||||
if (loading.value || approvalLoading.value) return;
|
||||
await sendDraft({
|
||||
...getDraftContext(),
|
||||
prompt,
|
||||
});
|
||||
}
|
||||
|
||||
function handleSuggestedQuestion(question: string) {
|
||||
void handleSend(question);
|
||||
}
|
||||
|
||||
function canCopyMessage(item: ChatTimelineMessageItem) {
|
||||
if (item.role === 'user') {
|
||||
return Boolean(copyMessageText(item).trim());
|
||||
@@ -176,6 +194,7 @@ async function handleReject(payload: ChatTimelineToolApprovalPayload) {
|
||||
closable
|
||||
:messages="[]"
|
||||
:loading="loading"
|
||||
:placeholder="interactionDisplay.inputPlaceholder"
|
||||
:approval-loading="approvalLoading"
|
||||
@send="handleSend"
|
||||
@stop="handleStop"
|
||||
@@ -194,19 +213,47 @@ async function handleReject(payload: ChatTimelineToolApprovalPayload) {
|
||||
@click="handleClearSession"
|
||||
/>
|
||||
</template>
|
||||
<ChatTimeline
|
||||
:items="timelineItems"
|
||||
empty-text="输入问题试运行当前智能体"
|
||||
:approval-loading="approvalLoading"
|
||||
:copyable="canCopyMessage"
|
||||
:regenerable="canRegenerateMessage"
|
||||
:regenerate-disabled="true"
|
||||
@approve="handleApprove"
|
||||
@copy-message="handleCopyMessage"
|
||||
@regenerate-message="handleRegenerateMessage"
|
||||
@reject="handleReject"
|
||||
@select-next-variant="handleSelectNextVariant"
|
||||
@select-previous-variant="handleSelectPreviousVariant"
|
||||
/>
|
||||
<div class="agent-tryout__conversation">
|
||||
<AgentWelcomeState
|
||||
v-if="timelineItems.length === 0"
|
||||
:agent-name="agent.name || '智能体'"
|
||||
:avatar="agent.avatar"
|
||||
:disabled="loading || approvalLoading"
|
||||
:suggested-questions="interactionDisplay.suggestedQuestions"
|
||||
:welcome-message="interactionDisplay.welcomeMessage"
|
||||
@select-question="handleSuggestedQuestion"
|
||||
/>
|
||||
<ChatTimeline
|
||||
v-else
|
||||
:items="timelineItems"
|
||||
empty-text="输入问题试运行当前智能体"
|
||||
:approval-loading="approvalLoading"
|
||||
:copyable="canCopyMessage"
|
||||
:regenerable="canRegenerateMessage"
|
||||
:regenerate-disabled="true"
|
||||
@approve="handleApprove"
|
||||
@copy-message="handleCopyMessage"
|
||||
@regenerate-message="handleRegenerateMessage"
|
||||
@reject="handleReject"
|
||||
@select-next-variant="handleSelectNextVariant"
|
||||
@select-previous-variant="handleSelectPreviousVariant"
|
||||
/>
|
||||
</div>
|
||||
</AiChatPanel>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.agent-tryout__conversation {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
padding: 0 var(--space-4);
|
||||
overflow: auto;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
.agent-tryout__conversation :deep(.chat-timeline) {
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,222 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue';
|
||||
|
||||
import { ArrowRight } from '@element-plus/icons-vue';
|
||||
import { ElIcon } from 'element-plus';
|
||||
|
||||
const props = defineProps<{
|
||||
agentName: string;
|
||||
avatar?: string;
|
||||
disabled?: boolean;
|
||||
suggestedQuestions?: string[];
|
||||
welcomeMessage: string;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
selectQuestion: [question: string];
|
||||
}>();
|
||||
|
||||
const avatarFailed = ref(false);
|
||||
const headingId = `agent-welcome-${Math.random().toString(36).slice(2, 9)}`;
|
||||
const initial = computed(() => [...props.agentName.trim()][0] || 'A');
|
||||
|
||||
watch(
|
||||
() => props.avatar,
|
||||
() => {
|
||||
avatarFailed.value = false;
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="agent-welcome" :aria-labelledby="headingId">
|
||||
<div class="agent-welcome__content">
|
||||
<div class="agent-welcome__avatar" aria-hidden="true">
|
||||
<img
|
||||
v-if="avatar && !avatarFailed"
|
||||
:src="avatar"
|
||||
alt=""
|
||||
@error="avatarFailed = true"
|
||||
/>
|
||||
<span v-else>{{ initial }}</span>
|
||||
</div>
|
||||
<h2 :id="headingId" class="agent-welcome__name">{{ agentName }}</h2>
|
||||
<p class="agent-welcome__message">{{ welcomeMessage }}</p>
|
||||
|
||||
<div v-if="suggestedQuestions?.length" class="agent-welcome__suggestions">
|
||||
<div class="agent-welcome__suggestions-title">猜你想问</div>
|
||||
<div class="agent-welcome__suggestions-grid">
|
||||
<button
|
||||
v-for="question in suggestedQuestions"
|
||||
:key="question"
|
||||
class="agent-welcome__question"
|
||||
type="button"
|
||||
:title="question"
|
||||
:disabled="disabled"
|
||||
@click="emit('selectQuestion', question)"
|
||||
@keydown.enter.stop.prevent="emit('selectQuestion', question)"
|
||||
@keydown.space.stop.prevent="emit('selectQuestion', question)"
|
||||
>
|
||||
<span>{{ question }}</span>
|
||||
<ElIcon aria-hidden="true"><ArrowRight /></ElIcon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.agent-welcome {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
padding: var(--space-8) 0;
|
||||
container-type: inline-size;
|
||||
}
|
||||
|
||||
.agent-welcome__content {
|
||||
width: min(680px, 100%);
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.agent-welcome__avatar {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
overflow: hidden;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--el-color-primary);
|
||||
background: var(--el-color-primary-light-9);
|
||||
border: 1px solid var(--el-color-primary-light-8);
|
||||
border-radius: var(--radius-panel);
|
||||
}
|
||||
|
||||
.agent-welcome__avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.agent-welcome__name {
|
||||
margin: var(--space-3) 0 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 24px;
|
||||
color: hsl(var(--text-strong));
|
||||
}
|
||||
|
||||
.agent-welcome__message {
|
||||
max-width: 640px;
|
||||
margin: var(--space-2) auto 0;
|
||||
font-size: 17px;
|
||||
line-height: 1.7;
|
||||
color: var(--el-text-color-regular);
|
||||
overflow-wrap: anywhere;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.agent-welcome__suggestions {
|
||||
margin-top: var(--space-6);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.agent-welcome__suggestions-title {
|
||||
margin-bottom: var(--space-2);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: hsl(var(--text-muted));
|
||||
}
|
||||
|
||||
.agent-welcome__suggestions-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.agent-welcome__question {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 18px;
|
||||
gap: var(--space-2);
|
||||
align-items: center;
|
||||
min-height: 48px;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
font: inherit;
|
||||
color: var(--el-text-color-primary);
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
background: hsl(var(--surface-subtle));
|
||||
border: 1px solid hsl(var(--line-subtle));
|
||||
border-radius: var(--radius-toolbar);
|
||||
transition:
|
||||
color var(--motion-duration-fast) var(--motion-ease-standard),
|
||||
background-color var(--motion-duration-fast) var(--motion-ease-standard),
|
||||
border-color var(--motion-duration-fast) var(--motion-ease-standard),
|
||||
transform var(--motion-duration-fast) var(--motion-ease-standard);
|
||||
}
|
||||
|
||||
.agent-welcome__question span {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
overflow-wrap: anywhere;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.agent-welcome__question .el-icon {
|
||||
color: hsl(var(--text-muted));
|
||||
transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
|
||||
}
|
||||
|
||||
.agent-welcome__question:hover:not(:disabled) {
|
||||
color: var(--el-color-primary);
|
||||
background: var(--el-color-primary-light-9);
|
||||
border-color: var(--el-color-primary-light-7);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.agent-welcome__question:active:not(:disabled) {
|
||||
background: var(--el-color-primary-light-8);
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.agent-welcome__question:hover:not(:disabled) .el-icon {
|
||||
color: var(--el-color-primary);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
.agent-welcome__question:focus-visible {
|
||||
outline: 2px solid var(--el-color-primary-light-5);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.agent-welcome__question:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.56;
|
||||
}
|
||||
|
||||
@container (max-width: 560px) {
|
||||
.agent-welcome__suggestions-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.agent-welcome__message {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.agent-welcome__question,
|
||||
.agent-welcome__question .el-icon {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user