feat: 增加智能体对话体验配置

- 支持欢迎语、猜你想问和输入提示的编辑、草稿预览与发布态展示

- 补充配置校验、发布快照持久化和发布后回显修复

easyflow-ui-admin/app/src/views/ai/agent-chat/index.vue

@@ -4,32 +4,27 @@ import type {
   ChatTimelineMessageItem,
   ChatTimelineToolApprovalPayload,
 } from '@easyflow/common-ui';
-import {ChatTimeline, ChatTimelineBuilder} from '@easyflow/common-ui';
 
-import type {AgentInfo} from '../agents/types';
-import type {AgentChatSessionView} from './api';
-import {
-  approveAgentRun,
-  deleteAgentSession,
-  getAgentConversation,
-  getAgentSession,
-  getAgentSessions,
-  getPublishedAgents,
-  getPublishedKnowledges,
-  rejectAgentRun,
-  renameAgentSession,
-  saveAgentSessionExtraKnowledges,
-} from './api';
+import type { AgentInfo } from '../agents/types';
+import type { AgentChatSessionView } from './api';
 
 import type {
   ChatInputTriggerGroup,
   ChatInputTriggerItem,
 } from '#/components/chat-workspace/input-triggers/types';
 
-import {computed, onBeforeUnmount, onMounted, ref} from 'vue';
-import {useRoute, useRouter} from 'vue-router';
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 
-import {Delete, EditPen, MoreFilled, Plus, Promotion,} from '@element-plus/icons-vue';
+import { ChatTimeline, ChatTimelineBuilder } from '@easyflow/common-ui';
+
+import {
+  Delete,
+  EditPen,
+  MoreFilled,
+  Plus,
+  Promotion,
+} from '@element-plus/icons-vue';
 import {
   ElButton,
   ElDropdown,
@@ -45,26 +40,28 @@ import {
 
 import ChatCapabilityMenu from '#/components/chat-workspace/ChatCapabilityMenu.vue';
 import ChatInputTriggerPanel from '#/components/chat-workspace/ChatInputTriggerPanel.vue';
-import {useChatInputTrigger} from '#/components/chat-workspace/input-triggers/useChatInputTrigger';
+import { useChatInputTrigger } from '#/components/chat-workspace/input-triggers/useChatInputTrigger';
 
-import {recordsToTimelineItems} from './adapters/agentTimelineAdapter';
-import {agentChatRuntimeManager} from './agentChatRuntimeManager';
-import AgentChatWelcomeState from './components/AgentChatWelcomeState.vue';
+import AgentWelcomeState from '../agents/components/AgentWelcomeState.vue';
+import { resolveInteractionDisplay } from '../agents/interaction-config';
+import { recordsToTimelineItems } from './adapters/agentTimelineAdapter';
+import { agentChatRuntimeManager } from './agentChatRuntimeManager';
+import {
+  approveAgentRun,
+  deleteAgentSession,
+  getAgentConversation,
+  getAgentSession,
+  getAgentSessions,
+  getPublishedAgents,
+  getPublishedKnowledges,
+  rejectAgentRun,
+  renameAgentSession,
+  saveAgentSessionExtraKnowledges,
+} from './api';
 
 const route = useRoute();
 const router = useRouter();
 
-const WELCOME_TITLES = [
-  '我们应该做些什么',
-  '让协作发生',
-  '今天想推进什么',
-  '把想法变成行动',
-  '让智能体开始工作',
-  '从一个问题开始',
-  '一起把事情理清楚',
-  '把下一步交给协作',
-];
-
 const agents = ref<AgentInfo[]>([]);
 const sessions = ref<AgentChatSessionView[]>([]);
 const timelineItems = ref<ChatTimelineItem[]>([]);
@@ -73,6 +70,7 @@ const currentSessionId = ref('');
 const promptText = ref('');
 const promptInputRef = ref();
 const loadingAgents = ref(false);
+const agentLoadError = ref('');
 const loadingSessions = ref(false);
 const loadingConversation = ref(false);
 const loadingKnowledges = ref(false);
@@ -90,6 +88,9 @@ let runtimeUnsubscribe: (() => void) | undefined;
 const selectedAgent = computed(() =>
   agents.value.find((agent) => String(agent.id) === selectedAgentId.value),
 );
+const interactionDisplay = computed(() =>
+  resolveInteractionDisplay(selectedAgent.value),
+);
 const currentSession = computed(() =>
   sessions.value.find(
     (session) => String(session.sessionId) === currentSessionId.value,
@@ -104,7 +105,9 @@ const canSend = computed(
     !runtimeRunning.value,
 );
 const composerPlaceholder = computed(() =>
-  selectedAgent.value ? '输入消息' : '请选择智能体',
+  selectedAgent.value
+    ? interactionDisplay.value.inputPlaceholder
+    : '请选择智能体',
 );
 const selectedExtraKnowledges = computed(() => {
   const knowledges: { id: string; title: string }[] = [];
@@ -125,18 +128,12 @@ const capabilityDisabled = computed(
 );
 const isWelcomeState = computed(
   () =>
+    Boolean(selectedAgent.value) &&
+    !loadingAgents.value &&
     !loadingConversation.value &&
     !currentSessionId.value &&
     timelineItems.value.length === 0,
 );
-const welcomeTitle = computed(() => {
-  const agentKey = selectedAgentId.value || selectedAgent.value?.name || '';
-  const index = [...agentKey].reduce(
-    (total, char) => total + char.charCodeAt(0),
-    0,
-  );
-  return WELCOME_TITLES[index % WELCOME_TITLES.length] || '我们应该做些什么';
-});
 const agentSelectWidth = computed(() => {
   const name = selectedAgent.value?.name || '选择智能体';
   const textWidth = [...name].reduce(
@@ -222,6 +219,7 @@ async function syncSessionRoute(sessionId?: string) {
 
 async function loadAgents() {
   loadingAgents.value = true;
+  agentLoadError.value = '';
   try {
     const res = await getPublishedAgents();
     if (res.errorCode !== 0) {
@@ -232,7 +230,9 @@ async function loadAgents() {
       selectedAgentId.value = String(agents.value[0].id);
     }
   } catch (error) {
-    ElMessage.error(error instanceof Error ? error.message : '智能体加载失败');
+    agentLoadError.value =
+      error instanceof Error ? error.message : '智能体加载失败';
+    ElMessage.error(agentLoadError.value);
   } finally {
     loadingAgents.value = false;
   }
@@ -571,8 +571,8 @@ function buildCapabilities() {
   ];
 }
 
-async function handleSend() {
-  const content = promptText.value.trim();
+async function sendContent(rawContent: string) {
+  const content = rawContent.trim();
   if (!content || !selectedAgentId.value || sending.value) {
     return;
   }
@@ -602,6 +602,14 @@ async function handleSend() {
   }
 }
 
+async function handleSend() {
+  await sendContent(promptText.value);
+}
+
+function handleSuggestedQuestion(question: string) {
+  void sendContent(question);
+}
+
 function handlePromptInput() {
   chatInputTrigger.sync();
 }
@@ -894,12 +902,36 @@ onBeforeUnmount(() => {
         class="agent-chat__timeline-wrap"
         :class="{ 'is-welcome': isWelcomeState }"
       >
-        <div v-if="loadingConversation" class="agent-chat__state is-center">
+        <div
+          v-if="loadingConversation || loadingAgents"
+          class="agent-chat__state is-center"
+        >
           加载中
         </div>
-        <AgentChatWelcomeState
+        <div
+          v-else-if="
+            agentLoadError && !currentSessionId && timelineItems.length === 0
+          "
+          class="agent-chat__state is-center"
+        >
+          {{ agentLoadError }}
+        </div>
+        <div
+          v-else-if="
+            !selectedAgent && !currentSessionId && timelineItems.length === 0
+          "
+          class="agent-chat__state is-center"
+        >
+          暂无已发布智能体
+        </div>
+        <AgentWelcomeState
           v-else-if="isWelcomeState"
-          :title="welcomeTitle"
+          :agent-name="selectedAgent?.name || '智能体'"
+          :avatar="selectedAgent?.avatar"
+          :disabled="sending || runtimeRunning"
+          :suggested-questions="interactionDisplay.suggestedQuestions"
+          :welcome-message="interactionDisplay.welcomeMessage"
+          @select-question="handleSuggestedQuestion"
         />
         <ChatTimeline
           v-else
@@ -915,10 +947,7 @@ onBeforeUnmount(() => {
         />
       </div>
 
-      <div
-        class="agent-chat__composer"
-        :class="{ 'is-welcome': isWelcomeState }"
-      >
+      <div class="agent-chat__composer">
         <ChatCapabilityMenu
           :disabled="capabilityDisabled"
           :extra-knowledge-ids="extraKnowledgeIds"
@@ -1011,13 +1040,13 @@ onBeforeUnmount(() => {
 
 <style scoped>
 .agent-chat {
+  box-sizing: border-box;
   display: grid;
   grid-template-columns: 280px minmax(0, 1fr);
   height: var(--easyflow-content-height, 100%);
-  max-height: var(--easyflow-content-height, 100%);
   min-height: 0;
+  max-height: var(--easyflow-content-height, 100%);
   overflow: hidden;
-  box-sizing: border-box;
   background: var(--el-bg-color-page);
 }
 
@@ -1143,26 +1172,26 @@ onBeforeUnmount(() => {
 }
 
 .agent-chat__timeline-wrap {
+  box-sizing: border-box;
   display: flex;
   flex: 1;
   flex-direction: column;
   min-height: 0;
   padding-bottom: 176px;
   overflow: hidden;
-  box-sizing: border-box;
 }
 
 .agent-chat__timeline-wrap.is-welcome {
-  justify-content: center;
-  padding: 0 min(8vw, 96px) 252px;
+  padding: 0 min(8vw, 96px) 190px;
+  overflow: hidden auto;
 }
 
 .agent-chat__timeline-wrap :deep(.chat-timeline) {
+  box-sizing: border-box;
   height: 100%;
   min-height: 0;
   padding: 24px min(8vw, 96px);
   overflow: auto;
-  box-sizing: border-box;
 }
 
 .agent-chat__composer {
@@ -1180,12 +1209,6 @@ onBeforeUnmount(() => {
   box-shadow: var(--el-box-shadow-light);
 }
 
-.agent-chat__composer.is-welcome {
-  top: calc(50% + 40px);
-  bottom: auto;
-  transform: translateY(-50%);
-}
-
 .agent-chat__trigger-panel {
   position: absolute;
   bottom: calc(100% + 10px);
@@ -1212,9 +1235,9 @@ onBeforeUnmount(() => {
 
 .agent-chat__composer-tools {
   display: inline-flex;
+  gap: 4px;
   align-items: center;
   min-width: 0;
-  gap: 4px;
   max-width: calc(100% - 64px);
 }
 
@@ -1243,22 +1266,22 @@ onBeforeUnmount(() => {
   min-width: 0;
   max-width: none;
   overflow: hidden;
+  text-overflow: ellipsis;
   font-size: 14px;
   font-weight: 400;
   color: var(--el-text-color-secondary);
-  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .agent-chat__agent-select :deep(.el-select__caret) {
-  color: var(--el-color-primary);
   margin-left: 6px;
+  color: var(--el-color-primary);
 }
 
 .agent-chat__composer-actions {
   display: inline-flex;
-  align-items: center;
   flex: none;
+  align-items: center;
 }
 
 .agent-chat__send-button {
@@ -1283,7 +1306,7 @@ onBeforeUnmount(() => {
   display: block;
   width: 12px;
   height: 12px;
-  background: currentColor;
+  background: currentcolor;
   border-radius: 3px;
 }
 
@@ -1300,8 +1323,8 @@ onBeforeUnmount(() => {
 
 @media (max-width: 900px) {
   .agent-chat {
-    grid-template-columns: 1fr;
     grid-template-rows: auto minmax(0, 1fr);
+    grid-template-columns: 1fr;
   }
 
   .agent-chat__history {
@@ -1324,7 +1347,13 @@ onBeforeUnmount(() => {
   }
 
   .agent-chat__timeline-wrap.is-welcome {
-    padding: 0 16px 244px;
+    padding: 0 16px;
+  }
+
+  .agent-chat__timeline-wrap.is-welcome :deep(.agent-welcome) {
+    flex: 0 0 auto;
+    min-height: 100%;
+    padding-bottom: 206px;
   }
 
   .agent-chat__timeline-wrap :deep(.chat-timeline) {
@@ -1337,11 +1366,6 @@ onBeforeUnmount(() => {
     left: 16px;
   }
 
-  .agent-chat__composer.is-welcome {
-    top: calc(50% + 52px);
-    bottom: auto;
-  }
-
   .agent-chat__composer-footer {
     align-items: flex-end;
   }