@templmf/temp-solf-lmf 0.0.54 → 0.0.55

package/guanwang/src/chat-sdk/core/components/InputBar.vue

@@ -0,0 +1,354 @@
+<template>
+  <div
+    class="input-wrap"
+    :class="{ 'is-dragging': isDragging }"
+    @dragover.prevent="isDragging = true"
+    @dragleave.prevent="isDragging = false"
+    @drop.prevent="onDrop"
+  >
+    <!-- 附件预览条 -->
+    <FileAttachment
+      :attachments="attachments"
+      @remove="removeAttachment"
+    />
+
+    <!-- 拖拽提示遮罩 -->
+    <div v-if="isDragging" class="drop-overlay">
+      <Paperclip :size="28" />
+      <span>松开以添加附件</span>
+    </div>
+
+    <!-- 输入行 -->
+    <div class="input-row">
+      <!-- 上传按钮 -->
+      <el-tooltip content="添加附件（图片/PDF/代码/文档）" placement="top">
+        <el-button
+          text
+          circle
+          :disabled="isLoading"
+          class="upload-btn"
+          :class="{ 'has-files': attachments.length > 0 }"
+          @click="triggerFileInput"
+        >
+          <Paperclip :size="18" />
+        </el-button>
+      </el-tooltip>
+
+      <!-- 隐藏的 file input -->
+      <input
+        ref="fileInputRef"
+        type="file"
+        multiple
+        :accept="ACCEPT_TYPES"
+        style="display:none"
+        @change="onFileChange"
+      />
+
+      <!-- 文字输入框 -->
+      <el-input
+        ref="inputRef"
+        v-model="input"
+        type="textarea"
+        :autosize="{ minRows: 1, maxRows: 4 }"
+        :placeholder="currentPlaceholder"
+        resize="none"
+        style="flex: 1;"
+        @keydown="onKey"
+        @paste="onPaste"
+      />
+
+      <!-- 发送按钮 -->
+      <el-button
+        type="primary"
+        :disabled="!canSend"
+        :loading="isLoading"
+        class="send-btn"
+        @click="send"
+      >
+        <Send v-if="!isLoading" :size="18" />
+      </el-button>
+    </div>
+
+    <!-- 处理中提示 -->
+    <div v-if="processingFile" class="processing-bar">
+      <span class="processing-dot" />
+      正在处理附件：{{ processingFile }}...
+    </div>
+
+    <!-- 模型选择工具栏 -->
+     <!-- v-if="showModelSelector"  -->
+    <div class="model-bar">
+      <span class="model-bar__label">模型</span>
+      <el-select
+        v-model="localSelectedId"
+        size="small"
+        class="model-select"
+        @change="id => emit('select-model', id)"
+      >
+        <el-option
+          v-for="m in availableModels"
+          :key="m.id"
+          :label="m.name"
+          :value="m.id"
+        />
+      </el-select>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { Send, Paperclip } from 'lucide-vue-next'
+import { ElMessage } from 'element-plus'
+import FileAttachment from '../../features/upload/FileAttachment.vue'
+import { processFile, buildMessageContent, ACCEPT_TYPES, FILE_TYPE_HINT } from '../../features/upload/useFileHandler.js'
+
+const props = defineProps({
+  isLoading:        { type: Boolean, default: false },
+  placeholder:      { type: String,  default: '描述您的需求...' },
+  autoFocus:        { type: Boolean, default: false },
+  // 模型相关（由 ChatBox 从 chatStore 传入）
+  availableModels:  { type: Array,   default: () => [] },
+  selectedModelId:  { type: String,  default: '' },
+  showModelSelector: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['send', 'select-model'])
+
+const input         = ref('')
+const inputRef      = ref(null)
+const fileInputRef  = ref(null)
+const attachments   = ref([])
+const isDragging    = ref(false)
+const processingFile = ref('')
+
+// 本地临时选中（用户在当次会话里临时切换，和 store 双向同步）
+// selectedModelId 未传时自动取第一个可用模型，避免选择框空白
+const localSelectedId = ref(props.selectedModelId || props.availableModels[0]?.id || '')
+
+const canSend = computed(() =>
+  !props.isLoading && (input.value.trim().length > 0 || attachments.value.length > 0)
+)
+
+const currentPlaceholder = computed(() =>
+  attachments.value.length > 0 ? '描述一下你想对这些文件做什么...' : props.placeholder
+)
+
+onMounted(() => {
+  if (props.autoFocus) setTimeout(() => inputRef.value?.focus(), 100)
+})
+
+// ── 发送 ──────────────────────────────────────────────────────────
+function send() {
+  if (!canSend.value) return
+  const text    = input.value.trim()
+  const content = buildMessageContent(text, attachments.value)
+
+  emit('send', {
+    content,
+    displayText: text,
+    // 只有和 store 里的 selectedModelId 不同时才传 override
+    modelOverride: localSelectedId.value !== props.selectedModelId
+      ? localSelectedId.value
+      : undefined,
+    attachments: attachments.value.map(a => ({
+      id:       a.id,
+      fileName: a.fileName,
+      type:     a.type,
+      preview:  a.preview,
+      ext:      a.ext,
+    })),
+  })
+
+  input.value       = ''
+  attachments.value = []
+}
+
+function onKey(e) {
+  if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send() }
+}
+
+// ── 文件处理 ──────────────────────────────────────────────────────
+function triggerFileInput() { fileInputRef.value?.click() }
+
+async function onFileChange(e) {
+  const files = Array.from(e.target.files || [])
+  e.target.value = ''   // 清空 input 以便同文件可重复选
+  await addFiles(files)
+}
+
+async function onDrop(e) {
+  isDragging.value = false
+  const files = Array.from(e.dataTransfer.files || [])
+  await addFiles(files)
+}
+
+// 粘贴图片（截图直接粘贴）
+async function onPaste(e) {
+  const items = Array.from(e.clipboardData?.items || [])
+  // 修复：部分浏览器粘贴截图时 item.type 为空字符串，改为只要 kind==='file' 就尝试处理
+  const fileItems = items.filter(i => i.kind === 'file')
+  if (fileItems.length === 0) return
+  const files = fileItems.map(i => i.getAsFile()).filter(Boolean)
+  if (files.length === 0) return
+  e.preventDefault()
+  await addFiles(files)
+}
+
+async function addFiles(files) {
+  const MAX_ATTACHMENTS = 5
+  const remaining = MAX_ATTACHMENTS - attachments.value.length
+  if (remaining <= 0) {
+    ElMessage.warning(`最多同时上传 ${MAX_ATTACHMENTS} 个文件`)
+    return
+  }
+
+  for (const file of files.slice(0, remaining)) {
+    processingFile.value = file.name
+    try {
+      const att = await processFile(file)
+      attachments.value.push(att)
+    } catch (err) {
+      ElMessage.error(`${file.name}：${err.message}`)
+    }
+  }
+  processingFile.value = ''
+}
+
+function removeAttachment(id) {
+  attachments.value = attachments.value.filter(a => a.id !== id)
+}
+</script>
+
+<style scoped>
+.input-wrap {
+  position: relative;
+  border-radius: 14px;
+  border: 1px solid var(--border-default);
+  background: var(--bg-secondary);
+  transition: border-color 0.2s, box-shadow 0.2s;
+  overflow: hidden;
+}
+.input-wrap:focus-within {
+  border-color: rgba(26,111,196,0.6);
+  box-shadow: 0 0 0 3px rgba(26,111,196,0.08);
+}
+.input-wrap.is-dragging {
+  border-color: var(--brand-500);
+  box-shadow: 0 0 0 3px rgba(26,111,196,0.15);
+}
+
+/* 拖拽遮罩 */
+.drop-overlay {
+  position: absolute; inset: 0; z-index: 10;
+  background: rgba(26,111,196,0.1);
+  display: flex; flex-direction: column;
+  align-items: center; justify-content: center;
+  gap: 8px; color: var(--brand-400);
+  font-size: 14px; font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+  pointer-events: none;
+}
+
+/* 输入行 */
+.input-row {
+  display: flex;
+  align-items: flex-end;
+  gap: 6px;
+  padding: 8px 8px 8px 6px;
+}
+
+.upload-btn {
+  color: var(--text-muted) !important;
+  transition: color 0.15s !important;
+  flex-shrink: 0;
+  margin-bottom: 2px;
+}
+.upload-btn:hover { color: var(--brand-400) !important; }
+.upload-btn.has-files { color: var(--brand-500) !important; }
+
+.send-btn {
+  flex-shrink: 0;
+  width: 44px !important;
+  height: 44px !important;
+  border-radius: 10px !important;
+  padding: 0 !important;
+  margin-bottom: 2px;
+}
+
+/* 去掉输入框自带边框（改由 .input-wrap 统一管理） */
+:deep(.el-textarea__inner) {
+  border: none !important;
+  box-shadow: none !important;
+  background: transparent !important;
+  border-radius: 0 !important;
+  padding: 10px 6px !important;
+  font-size: 14px !important;
+  min-height: 44px !important;
+  line-height: 1.5 !important;
+  font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif !important;
+  resize: none !important;
+}
+:deep(.el-textarea__inner:focus) {
+  box-shadow: none !important;
+}
+
+/* 处理中提示 */
+.processing-bar {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 6px 14px 8px;
+  font-size: 12px;
+  font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+  color: var(--text-muted);
+  border-top: 1px solid var(--border-subtle);
+}
+.processing-dot {
+  width: 6px; height: 6px; border-radius: 50%;
+  background: var(--brand-400);
+  animation: pulseSlow 1s ease infinite;
+}
+
+/* ── 模型选择栏 ── */
+.model-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 12px 7px;
+  border-top: 1px solid var(--border-subtle);
+}
+.model-bar__label {
+  font-size: 11px;
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+.model-select {
+  width: 200px;
+}
+:deep(.model-select .el-input__wrapper) {
+  background: transparent !important;
+  box-shadow: none !important;
+  border: 1px solid var(--border-default) !important;
+  border-radius: 6px !important;
+  padding: 0 8px !important;
+  height: 26px !important;
+  font-size: 11px !important;
+  font-family: 'Cascadia Code', 'Consolas', monospace !important;
+  transition: border-color 0.15s !important;
+}
+:deep(.model-select .el-input__wrapper:hover),
+:deep(.model-select .el-input__wrapper.is-focus) {
+  border-color: var(--brand-500) !important;
+}
+:deep(.model-select .el-input__inner) {
+  font-size: 11px !important;
+  font-family: 'Cascadia Code', 'Consolas', monospace !important;
+  color: var(--text-secondary) !important;
+  height: 24px !important;
+  line-height: 24px !important;
+}
+:deep(.model-select .el-select__caret) {
+  color: var(--text-muted) !important;
+  font-size: 11px !important;
+}
+</style>