2026-08-20 11:36:27 +08:00
7 changed files with 242 additions and 67 deletions
--- a/easyflow-ui-admin/app/src/components/ai-chat/useChatDocumentUploads.test.ts
+++ b/easyflow-ui-admin/app/src/components/ai-chat/useChatDocumentUploads.test.ts
@@ -107,6 +107,21 @@ describe('useChatDocumentUploads', () => {
    });
  });

+  it('rejects unsupported files without adding an error attachment', async () => {
+    const uploads = useChatDocumentUploads();
+    const result = await uploads.addFiles(
+      [new File(['archive'], 'unsupported.zip', { type: 'application/zip' })],
+      { agentId: 'agent-1', mode: 'FORMAL', sessionId: 'session-1' },
+    );
+
+    expect(result).toEqual({
+      rejectedCount: 0,
+      unsupportedCount: 1,
+    });
+    expect(uploads.items.value).toEqual([]);
+    expect(mediaApi.uploadAgentChatDocument).not.toHaveBeenCalled();
+  });
+
  it('exposes a server read failure without continuing to poll', async () => {
    mediaApi.uploadAgentChatDocument.mockResolvedValue({
      data: {
--- a/easyflow-ui-admin/app/src/components/ai-chat/useChatImageUploads.test.ts
+++ b/easyflow-ui-admin/app/src/components/ai-chat/useChatImageUploads.test.ts
@@ -59,4 +59,19 @@ describe('useChatImageUploads', () => {
    expect(observedStatuses.at(-1)).toBe('ready');
    expect(uploads.uploadIds.value).toEqual(['upload-1']);
  });
+
+  it('rejects unsupported images without adding an error attachment', async () => {
+    const uploads = useChatImageUploads();
+    const result = await uploads.addFiles(
+      [new File(['vector'], 'unsupported.svg', { type: 'image/svg+xml' })],
+      { agentId: 'agent-1', mode: 'FORMAL', sessionId: 'session-1' },
+    );
+
+    expect(result).toEqual({
+      rejectedCount: 0,
+      unsupportedCount: 1,
+    });
+    expect(uploads.items.value).toEqual([]);
+    expect(mediaApi.uploadAgentChatImage).not.toHaveBeenCalled();
+  });
 });
--- a/easyflow-ui-admin/app/src/components/ai-chat/useChatImageUploads.ts
+++ b/easyflow-ui-admin/app/src/components/ai-chat/useChatImageUploads.ts
@@ -7,6 +7,7 @@ import type { AgentComposerMode, AgentMediaUpload } from './mediaApi';

 const MAX_IMAGES = 5;
 const MAX_IMAGE_BYTES = 10 * 1024 * 1024;
+export const CHAT_IMAGE_SUPPORTED_FORMATS = 'PNG、JPG、JPEG、WebP、GIF、BMP';
 const ACCEPTED_EXTENSIONS = new Set([
  'bmp',
  'gif',
@@ -26,6 +27,11 @@ interface LocalAttachment extends ChatImageAttachment {
  file?: File;
 }

+interface ChatImageAddFilesResult {
+  rejectedCount: number;
+  unsupportedCount: number;
+}
+
 function createLocalId() {
  return `agent-image-${Date.now()}-${Math.random().toString(16).slice(2, 8)}`;
 }
@@ -69,12 +75,20 @@ export function useChatImageUploads() {
  );

  async function addFiles(files: File[], context: UploadContext) {
+    const supportedFiles: File[] = [];
+    let unsupportedCount = 0;
+    for (const file of files) {
+      if (ACCEPTED_EXTENSIONS.has(extensionOf(file))) {
+        supportedFiles.push(file);
+      } else {
+        unsupportedCount++;
+      }
+    }
    const available = Math.max(0, MAX_IMAGES - items.value.length);
-    const accepted = files.slice(0, available);
-    const rejectedCount = Math.max(0, files.length - accepted.length);
+    const accepted = supportedFiles.slice(0, available);
+    const rejectedCount = Math.max(0, supportedFiles.length - accepted.length);
    const uploads: Promise<void>[] = [];
    for (const file of accepted) {
-      const extension = extensionOf(file);
      const local: LocalAttachment = {
        file,
        localId: createLocalId(),
@@ -85,11 +99,6 @@ export function useChatImageUploads() {
        status: 'uploading',
      };
      items.value.push(local);
-      if (!ACCEPTED_EXTENSIONS.has(extension)) {
-        local.status = 'error';
-        local.error = '仅支持 PNG、JPG、JPEG、WebP、GIF、BMP';
-        continue;
-      }
      if (file.size > MAX_IMAGE_BYTES) {
        local.status = 'error';
        local.error = '单张图片不能超过 10 MiB';
@@ -98,7 +107,10 @@ export function useChatImageUploads() {
      uploads.push(upload(local, context));
    }
    await Promise.all(uploads);
-    return rejectedCount;
+    return {
+      rejectedCount,
+      unsupportedCount,
+    } satisfies ChatImageAddFilesResult;
  }

  async function upload(item: LocalAttachment, context: UploadContext) {
--- a/easyflow-ui-admin/app/src/views/ai/agent-chat/index.vue
+++ b/easyflow-ui-admin/app/src/views/ai/agent-chat/index.vue
@@ -19,6 +19,7 @@ import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';

 import {
+  CHAT_DOCUMENT_SUPPORTED_FORMATS,
  ChatDocumentAttachments,
  ChatImageAttachments,
  ChatTimeline,
@@ -33,6 +34,7 @@ import {
  Paperclip,
  Plus,
  Promotion,
+  UploadFilled,
 } from '@element-plus/icons-vue';
 import {
  ElButton,
@@ -52,6 +54,7 @@ import {
  loadAgentChatImage,
 } from '#/components/ai-chat/mediaApi';
 import { useAgentComposerDraft } from '#/components/ai-chat/useAgentComposerDraft';
+import { CHAT_IMAGE_SUPPORTED_FORMATS } from '#/components/ai-chat/useChatImageUploads';
 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';
@@ -114,6 +117,11 @@ const selectedAgentImageSupport = computed(() =>
    selectedAgent.value?.publishedSnapshotJson?.modelSummary?.supportImage,
  ),
 );
+const supportedAttachmentFormats = computed(() =>
+  selectedAgentImageSupport.value === false
+    ? CHAT_DOCUMENT_SUPPORTED_FORMATS
+    : `${CHAT_DOCUMENT_SUPPORTED_FORMATS}；图片支持 ${CHAT_IMAGE_SUPPORTED_FORMATS}`,
+);
 const interactionDisplay = computed(() =>
  resolveInteractionDisplay(selectedAgent.value),
 );
@@ -747,17 +755,29 @@ async function addImageFiles(files: File[]) {
    return;
  }
  if (selectedAgentImageSupport.value === false) {
-    ElMessage.warning('当前智能体不支持图片');
+    ElMessage.warning({
+      grouping: true,
+      message: `当前智能体不支持图片，支持：${CHAT_DOCUMENT_SUPPORTED_FORMATS}`,
+    });
    return;
  }
  await composer.ensureSession();
-  const rejected = await composer.images.addFiles(files, {
-    agentId: selectedAgentId.value,
-    mode: 'FORMAL',
-    sessionId: composer.sessionId.value,
-  });
+  const { rejectedCount, unsupportedCount } = await composer.images.addFiles(
+    files,
+    {
+      agentId: selectedAgentId.value,
+      mode: 'FORMAL',
+      sessionId: composer.sessionId.value,
+    },
+  );
  composer.scheduleSave();
-  if (rejected > 0) {
+  if (unsupportedCount > 0) {
+    ElMessage.warning({
+      grouping: true,
+      message: `不支持该图片格式，支持：${CHAT_IMAGE_SUPPORTED_FORMATS}`,
+    });
+  }
+  if (rejectedCount > 0) {
    ElMessage.warning('每次最多添加 5 张图片');
  }
 }
@@ -768,22 +788,38 @@ async function addDocumentFiles(files: File[]) {
    return;
  }
  await composer.ensureSession();
-  const rejected = await composer.documents.addFiles(files, {
-    agentId: selectedAgentId.value,
-    mode: 'FORMAL',
-    sessionId: composer.sessionId.value,
-  });
+  const { rejectedCount, unsupportedCount } = await composer.documents.addFiles(
+    files,
+    {
+      agentId: selectedAgentId.value,
+      mode: 'FORMAL',
+      sessionId: composer.sessionId.value,
+    },
+  );
  composer.scheduleSave();
-  if (rejected > 0) {
+  if (unsupportedCount > 0) {
+    ElMessage.warning({
+      grouping: true,
+      message: `不支持该文件格式，支持：${supportedAttachmentFormats.value}`,
+    });
+  }
+  if (rejectedCount > 0) {
    ElMessage.warning('每轮最多添加 3 份文档');
  }
 }

+function isImageAttachmentFile(file: File) {
+  return (
+    file.type.startsWith('image/') ||
+    /\.(?:bmp|gif|jpe?g|png|webp)$/i.test(file.name)
+  );
+}
+
 function handleAttachmentFiles(event: Event) {
  const target = event.target as HTMLInputElement;
  const files = [...(target.files || [])];
-  const imageFiles = files.filter((file) => file.type.startsWith('image/'));
-  const documentFiles = files.filter((file) => !file.type.startsWith('image/'));
+  const imageFiles = files.filter((file) => isImageAttachmentFile(file));
+  const documentFiles = files.filter((file) => !isImageAttachmentFile(file));
  if (imageFiles.length > 0) void addImageFiles(imageFiles);
  if (documentFiles.length > 0) void addDocumentFiles(documentFiles);
  target.value = '';
@@ -810,6 +846,13 @@ function handleAttachmentDragEnter(event: DragEvent) {
  }
 }

+function handleAttachmentDragOver(event: DragEvent) {
+  handleAttachmentDragEnter(event);
+  if (composerDragActive.value && event.dataTransfer) {
+    event.dataTransfer.dropEffect = 'copy';
+  }
+}
+
 function handleAttachmentDragLeave(event: DragEvent) {
  const container = event.currentTarget as HTMLElement;
  if (
@@ -824,17 +867,8 @@ function handleAttachmentDrop(event: DragEvent) {
  composerDragActive.value = false;
  if (capabilityDisabled.value) return;
  const files = [...(event.dataTransfer?.files || [])];
-  const imageFiles = files.filter(
-    (file) =>
-      file.type.startsWith('image/') &&
-      selectedAgentImageSupport.value !== false &&
-      composer.images.items.value.length < 5,
-  );
-  const documentFiles = files.filter(
-    (file) =>
-      !file.type.startsWith('image/') &&
-      composer.documents.items.value.length < 3,
-  );
+  const imageFiles = files.filter((file) => isImageAttachmentFile(file));
+  const documentFiles = files.filter((file) => !isImageAttachmentFile(file));
  if (imageFiles.length > 0) void addImageFiles(imageFiles);
  if (documentFiles.length > 0) void addDocumentFiles(documentFiles);
 }
@@ -1151,7 +1185,13 @@ onBeforeUnmount(() => {
      </div>
    </aside>

-    <main class="agent-chat__main">
+    <main
+      class="agent-chat__main"
+      @dragenter.prevent="handleAttachmentDragEnter"
+      @dragover.prevent="handleAttachmentDragOver"
+      @dragleave.prevent="handleAttachmentDragLeave"
+      @drop.prevent="handleAttachmentDrop"
+    >
      <header class="agent-chat__main-head">
        <div>
          <div class="agent-chat__main-title">
@@ -1214,14 +1254,7 @@ onBeforeUnmount(() => {
        />
      </div>

-      <div
-        class="agent-chat__composer"
-        :class="{ 'is-dragging': composerDragActive }"
-        @dragenter.prevent="handleAttachmentDragEnter"
-        @dragover.prevent
-        @dragleave.prevent="handleAttachmentDragLeave"
-        @drop.prevent="handleAttachmentDrop"
-      >
+      <div class="agent-chat__composer">
        <ChatCapabilityMenu
          :disabled="capabilityDisabled"
          :extra-knowledge-ids="extraKnowledgeIds"
@@ -1353,6 +1386,24 @@ onBeforeUnmount(() => {
          </div>
        </div>
      </div>
+      <Transition name="agent-chat-drag-fade">
+        <div
+          v-if="composerDragActive"
+          class="agent-chat__drop-overlay"
+          role="status"
+          aria-live="polite"
+        >
+          <div class="agent-chat__drop-overlay-content">
+            <ElIcon class="agent-chat__drop-overlay-icon">
+              <UploadFilled />
+            </ElIcon>
+            <div class="agent-chat__drop-overlay-title">松手上传文件</div>
+            <div class="agent-chat__drop-overlay-formats">
+              支持 {{ supportedAttachmentFormats }}
+            </div>
+          </div>
+        </div>
+      </Transition>
    </main>
  </section>
 </template>
@@ -1526,9 +1577,53 @@ onBeforeUnmount(() => {
  box-shadow: var(--el-box-shadow-light);
 }

-.agent-chat__composer.is-dragging {
+.agent-chat__drop-overlay {
+  position: absolute;
+  inset: 16px;
+  z-index: 20;
+  display: grid;
+  pointer-events: none;
  background: var(--el-color-primary-light-9);
-  border-color: var(--el-color-primary-light-5);
+  border: 2px dashed var(--el-color-primary-light-5);
+  border-radius: 16px;
+  place-items: center;
+}
+
+.agent-chat__drop-overlay-content {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+  max-width: min(560px, calc(100% - 48px));
+  padding: 24px;
+  text-align: center;
+}
+
+.agent-chat__drop-overlay-icon {
+  font-size: 40px;
+  color: var(--el-color-primary);
+}
+
+.agent-chat__drop-overlay-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+}
+
+.agent-chat__drop-overlay-formats {
+  font-size: 13px;
+  line-height: 20px;
+  color: var(--el-text-color-secondary);
+}
+
+.agent-chat-drag-fade-enter-active,
+.agent-chat-drag-fade-leave-active {
+  transition: opacity 160ms ease;
+}
+
+.agent-chat-drag-fade-enter-from,
+.agent-chat-drag-fade-leave-to {
+  opacity: 0;
 }

 .agent-chat__trigger-panel {
--- a/easyflow-ui-admin/app/src/views/ai/agents/components/AgentTryoutPanel.vue
+++ b/easyflow-ui-admin/app/src/views/ai/agents/components/AgentTryoutPanel.vue
@@ -14,7 +14,10 @@ import type {

 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';

-import { ChatTimeline } from '@easyflow/common-ui';
+import {
+  CHAT_DOCUMENT_SUPPORTED_FORMATS,
+  ChatTimeline,
+} from '@easyflow/common-ui';
 import { BrushCleaning } from '@easyflow/icons';
 import { copyTextToClipboard } from '@easyflow/utils';

@@ -26,6 +29,7 @@ import {
  loadAgentChatImage,
 } from '#/components/ai-chat/mediaApi';
 import { useAgentComposerDraft } from '#/components/ai-chat/useAgentComposerDraft';
+import { CHAT_IMAGE_SUPPORTED_FORMATS } from '#/components/ai-chat/useChatImageUploads';

 import { approveAgentRun, rejectAgentRun } from '../api';
 import { useAgentTryoutStream } from '../composables/useAgentTryoutStream';
@@ -214,12 +218,21 @@ async function handleAddImageFiles(files: File[]) {
    return;
  }
  await composer.ensureSession();
-  const rejected = await composer.images.addFiles(files, {
-    agentId: String(props.agent.id),
-    mode: 'DRAFT',
-    sessionId: composer.sessionId.value,
-  });
-  if (rejected > 0) {
+  const { rejectedCount, unsupportedCount } = await composer.images.addFiles(
+    files,
+    {
+      agentId: String(props.agent.id),
+      mode: 'DRAFT',
+      sessionId: composer.sessionId.value,
+    },
+  );
+  if (unsupportedCount > 0) {
+    ElMessage.warning({
+      grouping: true,
+      message: `不支持该图片格式，支持：${CHAT_IMAGE_SUPPORTED_FORMATS}`,
+    });
+  }
+  if (rejectedCount > 0) {
    ElMessage.warning('每次最多添加 5 张图片');
  }
  composer.scheduleSave();
@@ -231,12 +244,21 @@ async function handleAddDocumentFiles(files: File[]) {
    return;
  }
  await composer.ensureSession();
-  const rejected = await composer.documents.addFiles(files, {
-    agentId: String(props.agent.id),
-    mode: 'DRAFT',
-    sessionId: composer.sessionId.value,
-  });
-  if (rejected > 0) {
+  const { rejectedCount, unsupportedCount } = await composer.documents.addFiles(
+    files,
+    {
+      agentId: String(props.agent.id),
+      mode: 'DRAFT',
+      sessionId: composer.sessionId.value,
+    },
+  );
+  if (unsupportedCount > 0) {
+    ElMessage.warning({
+      grouping: true,
+      message: `不支持该文件格式，支持：${CHAT_DOCUMENT_SUPPORTED_FORMATS}`,
+    });
+  }
+  if (rejectedCount > 0) {
    ElMessage.warning('每轮最多添加 3 份文档');
  }
  composer.scheduleSave();
--- a/easyflow-ui-admin/packages/effects/common-ui/src/components/chat-timeline/index.ts
+++ b/easyflow-ui-admin/packages/effects/common-ui/src/components/chat-timeline/index.ts
@@ -34,6 +34,8 @@ export type {
  ChatTimelineToolStatus,
 } from './types';
 export {
+  CHAT_DOCUMENT_SUPPORTED_FORMATS,
+  type ChatDocumentAddFilesResult,
  type ChatDocumentUploadApi,
  type ChatDocumentUploadContext,
  type ChatDocumentUploadView,
--- a/easyflow-ui-admin/packages/effects/common-ui/src/components/chat-timeline/useChatDocumentUploads.ts
+++ b/easyflow-ui-admin/packages/effects/common-ui/src/components/chat-timeline/useChatDocumentUploads.ts
@@ -11,6 +11,8 @@ const MAX_EXCEL_BYTES = 10 * 1024 * 1024;
 const MAX_TEXT_BYTES = 5 * 1024 * 1024;
 const POLL_INTERVAL_MS = 750;
 const MAX_POLL_ATTEMPTS = 80;
+export const CHAT_DOCUMENT_SUPPORTED_FORMATS =
+  'PDF、Word、PPT、Excel、TXT、Markdown';
 const SUPPORTED_EXTENSIONS = new Set([
  'doc',
  'docx',
@@ -54,6 +56,11 @@ export interface ChatDocumentUploadApi {
  ) => Promise<RequestResult<ChatDocumentUploadView>>;
 }

+export interface ChatDocumentAddFilesResult {
+  rejectedCount: number;
+  unsupportedCount: number;
+}
+
 interface LocalDocument extends ChatDocumentAttachment {
  file?: File;
 }
@@ -198,9 +205,18 @@ export function createChatDocumentUploads(api: ChatDocumentUploadApi) {
  }

  async function addFiles(files: File[], context: ChatDocumentUploadContext) {
+    const supportedFiles: File[] = [];
+    let unsupportedCount = 0;
+    for (const file of files) {
+      if (SUPPORTED_EXTENSIONS.has(extensionOf(file))) {
+        supportedFiles.push(file);
+      } else {
+        unsupportedCount++;
+      }
+    }
    const available = Math.max(0, MAX_DOCUMENTS - items.value.length);
-    const accepted = files.slice(0, available);
-    const rejectedCount = Math.max(0, files.length - accepted.length);
+    const accepted = supportedFiles.slice(0, available);
+    const rejectedCount = Math.max(0, supportedFiles.length - accepted.length);
    const currentTotal = items.value.reduce(
      (total, item) => total + Number(item.size || 0),
      0,
@@ -220,11 +236,6 @@ export function createChatDocumentUploads(api: ChatDocumentUploadApi) {
      items.value.push(item);
      const trackedItem = items.value[items.value.length - 1];
      if (!trackedItem) continue;
-      if (!SUPPORTED_EXTENSIONS.has(extension)) {
-        trackedItem.status = 'error';
-        trackedItem.error = '仅支持 PDF、Word、PPT、Excel、TXT、Markdown';
-        continue;
-      }
      if (file.size > maxBytes(extension)) {
        trackedItem.status = 'error';
        trackedItem.error = sizeLimitMessage(extension);
@@ -239,7 +250,10 @@ export function createChatDocumentUploads(api: ChatDocumentUploadApi) {
      uploads.push(upload(trackedItem, context));
    }
    await Promise.all(uploads);
-    return rejectedCount;
+    return {
+      rejectedCount,
+      unsupportedCount,
+    } satisfies ChatDocumentAddFilesResult;
  }

  async function remove(item: ChatDocumentAttachment) {