mky-vent-base/src/views/ventAI/manageAssistent/components/chatModal/ChatInputArea.vue

<template>
  <div class="chat-input-area">
    <div v-if="pendingFile" class="pending-file-display">
      <div class="pending-file-card">
        <div class="file-icon-pending"></div>
        <div class="file-info-pending">
          <div class="file-name-pending">{{ pendingFile.name }}</div>
          <div class="file-size-pending">{{ formatFileSize(pendingFile.size) }}</div>
        </div>
        <div class="remove-pending" @click="emit('remove-pending-file')">
          <CloseOutlined />
        </div>
      </div>
    </div>

    <a-textarea
      :value="modelValue"
      @update:value="emit('update:modelValue', $event)"
      :rows="3"
      class="chat-input"
      placeholder="请输入你的问题"
      :auto-size="{ minRows: 3, maxRows: 6 }"
      @keydown.enter.prevent="handleEnterKey"
    />
    <div class="input-actions">
      <div class="action-left">
        <a-tooltip title="从本地上传">
          <div class="btn-upload" @click="emit('file-upload')">
            <div class="plus-icon"></div>
          </div>
        </a-tooltip>
        <input ref="fileInputRef" type="file" style="display: none" @change="emit('file-change', $event)" accept=".pdf" />
      </div>
      <div class="action-right">
        <div class="btn-send" :class="{ loading, disabled: !modelValue.trim() }" @click="handleSend">
          <div class="send-icon"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { CloseOutlined } from '@ant-design/icons-vue';
  import { formatFileSize } from './utils';
  import type { AttachedFile } from './types';

  const props = defineProps<{
    modelValue: string;
    pendingFile: AttachedFile | null;
    loading: boolean;
  }>();

  const emit = defineEmits<{
    (e: 'update:modelValue', value: string): void;
    (e: 'send'): void;
    (e: 'file-upload'): void;
    (e: 'file-change', event: Event): void;
    (e: 'remove-pending-file'): void;
  }>();

  const fileInputRef = ref<HTMLInputElement>();

  const handleEnterKey = (e: KeyboardEvent) => {
    if (!e.shiftKey && props.modelValue.trim()) {
      emit('send');
    }
  };

  const handleSend = () => {
    if (props.modelValue.trim() && !props.loading) {
      emit('send');
    }
  };

  defineExpose({ fileInputRef });
</script>

<style scoped lang="less">
  .chat-input-area {
    padding: 5px 10px;
    flex-shrink: 0;
    background-color: #002f4a;
    border: 1px solid #005482;
    border-radius: 4px;
    margin: 10px 16px 16px 16px;

    .pending-file-display {
      margin-bottom: 5px;

      .pending-file-card {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        background: rgba(10, 132, 255, 0.06);
        border: 1px solid rgba(63, 80, 106, 0.5);
        border-radius: 6px;
        transition: all 0.3s;

        &:hover {
          background: rgba(10, 132, 255, 0.1);
        }

        .file-icon-pending {
          width: 32px;
          height: 32px;
          background-image: var(--img-chat-attach-icon);
          background-repeat: no-repeat;
          background-size: 100% 100%;
          flex-shrink: 0;
        }

        .file-info-pending {
          flex: 1;
          min-width: 0;

          .file-name-pending {
            font-size: 12px;
            font-weight: 400;
            line-height: 1.4;
            color: #e0e6ed;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-bottom: 2px;
          }

          .file-size-pending {
            font-size: 11px;
            font-weight: 400;
            line-height: 1.3;
            color: #8b949e;
          }
        }

        .remove-pending {
          cursor: pointer;
          color: #8b949e;
          font-size: 14px;
          padding: 4px;
          border-radius: 4px;
          transition: all 0.3s;

          &:hover {
            color: #ff4d4f;
            background: rgba(220, 38, 38, 0.1);
          }
        }
      }
    }

    :deep(.chat-input) {
      color: #e0e6ed;
      background-color: transparent !important;
      border: none !important;

      &::placeholder {
        color: #8b949e !important;
        opacity: 1 !important;
      }
      &:focus,
      &:hover,
      &:active {
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
      }
    }
    .input-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 12px;

      .action-left,
      .action-right {
        display: flex;
        gap: 8px;
        .btn-upload {
          width: 30px;
          height: 30px;
          border-radius: 6px;
          margin-right: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .plus-icon {
          width: 20px;
          height: 20px;
          background-image: var(--img-chat-input-bg);
          background-repeat: no-repeat;
          background-size: 100% 100%;
          cursor: pointer;
        }
        .btn-send {
          width: 32px;
          height: 32px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          opacity: 1;
          transition: opacity 0.2s;

          &.disabled {
            opacity: 0.4;
            cursor: not-allowed;
          }

          .send-icon {
            width: 24px;
            height: 24px;
            background-image: var(--img-chat-send-icon);
            background-repeat: no-repeat;
            background-size: 100% 100%;
          }
        }
      }
    }
  }
</style>