feat: 统一聊天助手头像
- 工作流运行状态、智能体正式聊天与试运行展示助手头像 - 新增默认机器人头像及消息、空状态回退组件
This commit is contained in:
@@ -24,6 +24,7 @@ import {
|
||||
ChatImageAttachments,
|
||||
ChatTimeline,
|
||||
ChatTimelineBuilder,
|
||||
defaultAssistantAvatar,
|
||||
} from '@easyflow/common-ui';
|
||||
import { copyTextToClipboard } from '@easyflow/utils';
|
||||
|
||||
@@ -1240,6 +1241,7 @@ onBeforeUnmount(() => {
|
||||
/>
|
||||
<ChatTimeline
|
||||
v-else
|
||||
:assistant-avatar="selectedAgent?.avatar || defaultAssistantAvatar"
|
||||
:items="timelineItems"
|
||||
:document-loader="loadAgentChatDocument"
|
||||
:image-loader="loadAgentChatImage"
|
||||
|
||||
@@ -12,6 +12,7 @@ import { computed, markRaw, onMounted, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import { useAccess } from '@easyflow/access';
|
||||
import { defaultAssistantAvatar } from '@easyflow/common-ui';
|
||||
|
||||
import {
|
||||
Check,
|
||||
@@ -25,7 +26,6 @@ import {
|
||||
import { ElIcon, ElMessage, ElMessageBox, ElPopover } from 'element-plus';
|
||||
import { tryit } from 'radash';
|
||||
|
||||
import defaultAgentAvatar from '#/assets/defaultUserAvatar.png';
|
||||
import HeaderSearch from '#/components/headerSearch/HeaderSearch.vue';
|
||||
import PageData from '#/components/page/PageData.vue';
|
||||
import PageSide from '#/components/page/PageSide.vue';
|
||||
@@ -354,7 +354,7 @@ async function handleDeleteAction(row: AgentInfo) {
|
||||
<CardList
|
||||
title-field="name"
|
||||
icon-field="avatar"
|
||||
:default-icon="defaultAgentAvatar"
|
||||
:default-icon="defaultAssistantAvatar"
|
||||
:data="pageList"
|
||||
:primary-action="primaryAction"
|
||||
:actions="actions"
|
||||
|
||||
@@ -17,6 +17,7 @@ import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
|
||||
import {
|
||||
CHAT_DOCUMENT_SUPPORTED_FORMATS,
|
||||
ChatTimeline,
|
||||
defaultAssistantAvatar,
|
||||
} from '@easyflow/common-ui';
|
||||
import { BrushCleaning } from '@easyflow/icons';
|
||||
import { copyTextToClipboard } from '@easyflow/utils';
|
||||
@@ -395,6 +396,7 @@ async function handleReject(payload: ChatTimelineToolApprovalPayload) {
|
||||
/>
|
||||
<ChatTimeline
|
||||
v-else
|
||||
:assistant-avatar="agent.avatar || defaultAssistantAvatar"
|
||||
:items="timelineItems"
|
||||
:document-loader="loadAgentChatDocument"
|
||||
:image-loader="loadAgentChatImage"
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { ChatAssistantAvatar } from '@easyflow/common-ui';
|
||||
|
||||
import { ArrowRight } from '@element-plus/icons-vue';
|
||||
import { useResizeObserver } from '@vueuse/core';
|
||||
import { ElIcon } from 'element-plus';
|
||||
|
||||
const props = defineProps<{
|
||||
defineProps<{
|
||||
agentName: string;
|
||||
avatar?: string;
|
||||
disabled?: boolean;
|
||||
@@ -17,11 +19,9 @@ const emit = defineEmits<{
|
||||
selectQuestion: [question: string];
|
||||
}>();
|
||||
|
||||
const avatarFailed = ref(false);
|
||||
const welcomeRef = ref<HTMLElement>();
|
||||
const legacyCompact = ref(false);
|
||||
const headingId = `agent-welcome-${Math.random().toString(36).slice(2, 9)}`;
|
||||
const initial = computed(() => [...props.agentName.trim()][0] || 'A');
|
||||
const needsContainerQueryFallback =
|
||||
typeof CSS === 'undefined' || !CSS.supports('container-type', 'inline-size');
|
||||
|
||||
@@ -29,13 +29,6 @@ useResizeObserver(welcomeRef, ([entry]) => {
|
||||
if (!needsContainerQueryFallback || !entry) return;
|
||||
legacyCompact.value = entry.contentRect.width <= 560;
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.avatar,
|
||||
() => {
|
||||
avatarFailed.value = false;
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -47,13 +40,7 @@ watch(
|
||||
>
|
||||
<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>
|
||||
<ChatAssistantAvatar :src="avatar" />
|
||||
</div>
|
||||
<h2 :id="headingId" class="agent-welcome__name">{{ agentName }}</h2>
|
||||
<p class="agent-welcome__message">{{ welcomeMessage }}</p>
|
||||
@@ -112,12 +99,6 @@ watch(
|
||||
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;
|
||||
|
||||
@@ -15,7 +15,7 @@ import type {
|
||||
import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
import { ChatTimeline } from '@easyflow/common-ui';
|
||||
import { ChatTimeline, defaultAssistantAvatar } from '@easyflow/common-ui';
|
||||
|
||||
import {
|
||||
ArrowLeft,
|
||||
@@ -931,8 +931,10 @@ function executionTraceText(
|
||||
<template v-else>
|
||||
<ChatTimeline
|
||||
class="workflow-chat__timeline"
|
||||
:assistant-avatar="defaultAssistantAvatar"
|
||||
:items="timelineItems"
|
||||
:empty-text="emptyText"
|
||||
:empty-title="descriptor.title || '工作流'"
|
||||
:copy-action="copyMessage"
|
||||
:copyable="(item) => item.parts.some((part) => part.content)"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user