ForcePilot/web/src/components/AgentInputArea.vue

<template>
  <MessageInputComponent
    ref="inputRef"
    :model-value="modelValue"
    @update:modelValue="updateValue"
    :is-loading="isLoading"
    :disabled="disabled"
    :send-button-disabled="sendButtonDisabled"
    :placeholder="placeholder"
    @send="handleSend"
    @keydown="handleKeyDown"
  >
    <template #top>
      <ImagePreviewComponent
        v-if="currentImage"
        :image-data="currentImage"
        @remove="handleImageRemoved"
        class="image-preview-wrapper"
      />
    </template>
    <template #options-left>
      <AttachmentOptionsComponent
        v-if="supportsFileUpload"
        :disabled="disabled"
        @upload="handleAttachmentUpload"
        @upload-image="handleImageUpload"
        @upload-image-success="handleImageUploadSuccess"
      />
    </template>
    <template #actions-left>
      <AttachmentStatusIndicator
        :attachments="currentAttachments"
        :disabled="disabled"
        @remove="handleAttachmentRemove"
      />
    </template>
  </MessageInputComponent>
</template>

<script setup>
import { ref, reactive, computed, watch, nextTick } from 'vue';
import { message } from 'ant-design-vue';
import MessageInputComponent from '@/components/MessageInputComponent.vue';
import ImagePreviewComponent from '@/components/ImagePreviewComponent.vue';
import AttachmentOptionsComponent from '@/components/AttachmentOptionsComponent.vue';
import AttachmentStatusIndicator from '@/components/AttachmentStatusIndicator.vue';
import { threadApi } from '@/apis';
import { AgentValidator } from '@/utils/agentValidator';
import { handleChatError, handleValidationError } from '@/utils/errorHandler';

const props = defineProps({
  modelValue: { type: String, default: '' },
  isLoading: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false },
  sendButtonDisabled: { type: Boolean, default: false },
  placeholder: { type: String, default: '输入问题...' },
  supportsFileUpload: { type: Boolean, default: false },
  agentId: { type: String, default: '' },
  threadId: { type: String, default: null },
  ensureThread: { type: Function, required: true }
});

const emit = defineEmits(['update:modelValue', 'send', 'keydown']);

const inputRef = ref(null);
const currentImage = ref(null);
const attachmentState = reactive({
  itemsByThread: {},
  limits: null,
  isUploading: false,
});

const updateValue = (val) => {
  emit('update:modelValue', val);
};

const currentAttachments = computed(() => {
  if (!props.threadId) return [];
  return attachmentState.itemsByThread[props.threadId] || [];
});

const loadThreadAttachments = async (threadId, { silent = false } = {}) => {
  if (!threadId) return;
  try {
    const response = await threadApi.getThreadAttachments(threadId);
    attachmentState.itemsByThread[threadId] = response.attachments || [];
    if (response.limits) {
      attachmentState.limits = response.limits;
    }
  } catch (error) {
    if (silent) {
      console.warn('Failed to load attachments:', error);
    } else {
      handleChatError(error, 'load');
    }
  }
};

const handleImageUpload = (imageData) => {
  if (imageData && imageData.success) {
    currentImage.value = imageData;
  }
};

const handleImageRemoved = () => {
  currentImage.value = null;
};

const handleImageUploadSuccess = () => {
  if (inputRef.value) {
    inputRef.value.closeOptions();
  }
};

const handleAttachmentUpload = async (files) => {
  if (!files?.length) return;
  if (!AgentValidator.validateAgentIdWithError(props.agentId, '上传附件', handleValidationError)) return;

  const preferredTitle = files[0]?.name || '新的对话';
  let threadId = props.threadId;
  
  if (!threadId) {
    try {
      threadId = await props.ensureThread(preferredTitle);
    } catch (e) {
      return;
    }
  }
  
  if (!threadId) {
    message.error('创建对话失败，无法上传附件');
    return;
  }

  attachmentState.isUploading = true;
  try {
    for (const file of files) {
      await threadApi.uploadThreadAttachment(threadId, file);
      message.success(`${file.name} 上传成功`);
    }
    await loadThreadAttachments(threadId, { silent: true });
  } catch (error) {
    handleChatError(error, 'upload');
  } finally {
    attachmentState.isUploading = false;
  }
};

const handleAttachmentRemove = async (fileId) => {
  if (!fileId || !props.threadId) return;
  try {
    await threadApi.deleteThreadAttachment(props.threadId, fileId);
    await loadThreadAttachments(props.threadId, { silent: true });
    message.success('附件已删除');
  } catch (error) {
    handleChatError(error, 'delete');
  }
};

const handleSend = () => {
  emit('send', { image: currentImage.value });
  currentImage.value = null;
};

const handleKeyDown = (e) => {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault();
    handleSend();
  } else {
    emit('keydown', e);
  }
};

watch(() => props.threadId, (newId) => {
  if (newId) {
    loadThreadAttachments(newId, { silent: true });
  }
}, { immediate: true });

defineExpose({
  focus: () => inputRef.value?.focus(),
  closeOptions: () => inputRef.value?.closeOptions()
});
</script>