feat: 重构聊天组件以支持附件上传和状态指示器
- 在 `AgentChatComponent.vue` 中，替换 `AttachmentInputPanel` 为 `AttachmentOptionsComponent`，并添加图片上传功能的处理。 - 新增 `AttachmentOptionsComponent.vue` 以处理文件和图片上传选项。 - 新增 `AttachmentStatusIndicator.vue` 以显示已上传附件的状态和操作。 - 更新 `MessageInputComponent.vue` 以支持新的插槽结构，增强组件的灵活性和可扩展性。
This commit is contained in:
Wenjie Zhang
parent
5adff04865
commit
31cc6aa8a5
@ -76,13 +76,17 @@
|
||||
@keydown="handleKeyDown"
|
||||
>
|
||||
<template #options-left>
|
||||
<AttachmentInputPanel
|
||||
<AttachmentOptionsComponent
|
||||
v-if="supportsFileUpload"
|
||||
:attachments="currentAttachments"
|
||||
:limits="attachmentState.limits"
|
||||
:is-uploading="attachmentState.isUploading"
|
||||
:disabled="!currentAgent"
|
||||
@upload="handleAttachmentUpload"
|
||||
@upload-image="handleImageUpload"
|
||||
/>
|
||||
</template>
|
||||
<template #actions-left>
|
||||
<AttachmentStatusIndicator
|
||||
:attachments="currentAttachments"
|
||||
:disabled="!currentAgent"
|
||||
@remove="handleAttachmentRemove"
|
||||
/>
|
||||
</template>
|
||||
@ -157,13 +161,17 @@
|
||||
@keydown="handleKeyDown"
|
||||
>
|
||||
<template #options-left>
|
||||
<AttachmentInputPanel
|
||||
<AttachmentOptionsComponent
|
||||
v-if="supportsFileUpload"
|
||||
:attachments="currentAttachments"
|
||||
:limits="attachmentState.limits"
|
||||
:is-uploading="attachmentState.isUploading"
|
||||
:disabled="!currentAgent"
|
||||
@upload="handleAttachmentUpload"
|
||||
@upload-image="handleImageUpload"
|
||||
/>
|
||||
</template>
|
||||
<template #actions-left>
|
||||
<AttachmentStatusIndicator
|
||||
:attachments="currentAttachments"
|
||||
:disabled="!currentAgent"
|
||||
@remove="handleAttachmentRemove"
|
||||
/>
|
||||
</template>
|
||||
@ -183,6 +191,8 @@ import { LoadingOutlined } from '@ant-design/icons-vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import MessageInputComponent from '@/components/MessageInputComponent.vue'
|
||||
import AttachmentInputPanel from '@/components/AttachmentInputPanel.vue'
|
||||
import AttachmentOptionsComponent from '@/components/AttachmentOptionsComponent.vue'
|
||||
import AttachmentStatusIndicator from '@/components/AttachmentStatusIndicator.vue'
|
||||
import AgentMessageComponent from '@/components/AgentMessageComponent.vue'
|
||||
import ChatSidebarComponent from '@/components/ChatSidebarComponent.vue'
|
||||
import RefsComponent from '@/components/RefsComponent.vue'
|
||||
@ -715,6 +725,12 @@ const handleAttachmentRemove = async (fileId) => {
|
||||
}
|
||||
};
|
||||
|
||||
// 处理图片上传（开发中功能）
|
||||
const handleImageUpload = () => {
|
||||
// 图片上传功能暂未实现，在 AttachmentOptionsComponent 中已经显示了提示信息
|
||||
// 这里可以预留扩展接口
|
||||
};
|
||||
|
||||
// ==================== 审批功能管理 ====================
|
||||
const { approvalState, handleApproval, processApprovalInStream } = useApproval({
|
||||
getThreadState,
|
||||
|
||||
133
web/src/components/AttachmentOptionsComponent.vue
Normal file
133
web/src/components/AttachmentOptionsComponent.vue
Normal file
@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<div class="attachment-options">
|
||||
<div class="option-item">
|
||||
<label class="attachment-upload-label" :class="{ disabled: disabled }">
|
||||
<input
|
||||
ref="fileInputRef"
|
||||
type="file"
|
||||
multiple
|
||||
accept=".txt,.md,.docx,.html,.htm"
|
||||
:disabled="disabled"
|
||||
@change="handleFileChange"
|
||||
style="display: none;"
|
||||
/>
|
||||
<a-tooltip title="支持 txt/md/docx/html/htm 格式，单文件 ≤ 5 MB" placement="right">
|
||||
<div class="option-content">
|
||||
<FileText :size="16" class="option-icon" />
|
||||
<span class="option-text">添加附件</span>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="option-item" @click="handleImageUpload">
|
||||
<a-tooltip title="支持 jpg/jpeg/png/gif 格式，单文件 ≤ 5 MB" placement="right">
|
||||
<div class="option-content">
|
||||
<Image :size="16" class="option-icon" />
|
||||
<span class="option-text">上传图片</span>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { FileText, Image } from 'lucide-vue-next';
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
const fileInputRef = ref(null);
|
||||
|
||||
const props = defineProps({
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['upload', 'upload-image']);
|
||||
|
||||
// 处理文件选择变化
|
||||
const handleFileChange = (event) => {
|
||||
const files = event.target.files;
|
||||
if (files && files.length > 0) {
|
||||
emit('upload', Array.from(files));
|
||||
}
|
||||
// 清空文件输入，允许重复选择同一文件
|
||||
event.target.value = '';
|
||||
};
|
||||
|
||||
// 处理图片上传（开发中提示）
|
||||
const handleImageUpload = () => {
|
||||
if (props.disabled) return;
|
||||
message.info('图片上传功能开发中，敬请期待！');
|
||||
emit('upload-image');
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.attachment-options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.option-item {
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
|
||||
.option-content {
|
||||
color: var(--gray-400);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.option-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 10px;
|
||||
color: var(--gray-700);
|
||||
font-size: 13px;
|
||||
border-radius: 6px;
|
||||
transition: all 0.15s ease;
|
||||
|
||||
.option-item:hover & {
|
||||
color: var(--main-color);
|
||||
background-color: var(--gray-50);
|
||||
}
|
||||
}
|
||||
|
||||
.option-icon {
|
||||
flex-shrink: 0;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.option-text {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.attachment-upload-label {
|
||||
display: block;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
|
||||
.option-content {
|
||||
color: var(--gray-400);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
299
web/src/components/AttachmentStatusIndicator.vue
Normal file
299
web/src/components/AttachmentStatusIndicator.vue
Normal file
@ -0,0 +1,299 @@
|
||||
<template>
|
||||
<div v-if="hasAttachments" class="attachment-status">
|
||||
<a-popover
|
||||
v-model:open="detailsVisible"
|
||||
placement="topLeft"
|
||||
trigger="click"
|
||||
:overlay-class-name="'attachment-details-popover'"
|
||||
>
|
||||
<template #content>
|
||||
<div class="attachment-details">
|
||||
<div class="details-header">
|
||||
<span class="header-title">已上传附件</span>
|
||||
</div>
|
||||
<div class="attachment-list">
|
||||
<div
|
||||
v-for="attachment in attachments"
|
||||
:key="attachment.file_id"
|
||||
class="attachment-item"
|
||||
>
|
||||
<div class="file-info">
|
||||
<component :is="getFileIcon(attachment.file_type)" :size="15" class="file-icon" />
|
||||
<div class="file-details">
|
||||
<div class="file-name">{{ attachment.file_name }}</div>
|
||||
<div class="file-meta">
|
||||
{{ formatFileSize(attachment.file_size) }} · {{ getStatusLabel(attachment.status) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-button
|
||||
type="link"
|
||||
class="remove-btn"
|
||||
@click="handleRemoveAttachment(attachment.file_id)"
|
||||
:disabled="disabled"
|
||||
>
|
||||
<X :size="15" />
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<a-button
|
||||
type="text"
|
||||
size="small"
|
||||
class="status-indicator has-multiple"
|
||||
:disabled="disabled"
|
||||
>
|
||||
<template #icon>
|
||||
<Paperclip :size="14" />
|
||||
</template>
|
||||
<span class="attachment-count">
|
||||
{{ attachments.length }}
|
||||
</span>
|
||||
</a-button>
|
||||
</a-popover>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import {
|
||||
Paperclip,
|
||||
FileText,
|
||||
File,
|
||||
X
|
||||
} from 'lucide-vue-next';
|
||||
|
||||
const props = defineProps({
|
||||
attachments: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['remove']);
|
||||
|
||||
const detailsVisible = ref(false);
|
||||
|
||||
// 是否有附件
|
||||
const hasAttachments = computed(() => {
|
||||
return props.attachments && props.attachments.length > 0;
|
||||
});
|
||||
|
||||
// 根据文件类型获取图标
|
||||
const getFileIcon = (fileType) => {
|
||||
const iconMap = {
|
||||
'text/plain': FileText,
|
||||
'text/markdown': FileText,
|
||||
'application/vnd.openxmlformats-officedocument.wordprocessingml.document': File,
|
||||
'text/html': File,
|
||||
'text/htm': File,
|
||||
};
|
||||
return iconMap[fileType] || File;
|
||||
};
|
||||
|
||||
// 格式化文件大小
|
||||
const formatFileSize = (bytes) => {
|
||||
if (!bytes || bytes === 0) return '0 B';
|
||||
const k = 1024;
|
||||
const sizes = ['B', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
|
||||
};
|
||||
|
||||
// 获取状态标签
|
||||
const getStatusLabel = (status) => {
|
||||
const statusMap = {
|
||||
'uploaded': '已上传',
|
||||
'processing': '处理中',
|
||||
'parsed': '已解析',
|
||||
'failed': '解析失败',
|
||||
'pending': '待处理'
|
||||
};
|
||||
return statusMap[status] || status || '未知';
|
||||
};
|
||||
|
||||
// 处理删除附件
|
||||
const handleRemoveAttachment = (fileId) => {
|
||||
if (props.disabled) return;
|
||||
emit('remove', fileId);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.attachment-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--gray-600);
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
border: 1px solid transparent;
|
||||
background-color: transparent;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
color: var(--main-color);
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
&.has-multiple {
|
||||
.attachment-count {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: -4px;
|
||||
background-color: var(--main-500);
|
||||
color: white;
|
||||
border-radius: 10px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
font-size: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
border: 2px solid white;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less">
|
||||
.attachment-details-popover {
|
||||
.ant-popover-inner-content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ant-popover-inner {
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
}
|
||||
|
||||
.ant-popover-arrow {
|
||||
&::before {
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.attachment-details {
|
||||
min-width: 260px;
|
||||
max-width: 320px;
|
||||
|
||||
.details-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 10px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background-color: var(--muted);
|
||||
|
||||
.header-icon {
|
||||
color: var(--main-500);
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-weight: 600;
|
||||
color: var(--foreground);
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.attachment-list {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.attachment-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 6px 8px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
transition: background-color 0.15s ease;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--gray-50);
|
||||
}
|
||||
|
||||
.file-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
cursor: pointer;
|
||||
|
||||
.file-icon {
|
||||
color: var(--main-500);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.file-details {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
.file-name {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--foreground);
|
||||
margin-bottom: 1px;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.file-meta {
|
||||
font-size: 10px;
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.remove-btn {
|
||||
color: var(--muted-foreground);
|
||||
flex-shrink: 0;
|
||||
border-radius: 4px;
|
||||
transition: all 0.15s ease;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="input-box" :class="[customClasses, { 'single-line': isSingleLine }]" @click="focusInput">
|
||||
<slot name="top"></slot>
|
||||
<div class="expand-options" v-if="hasOptionsLeft">
|
||||
<a-popover
|
||||
v-model:open="optionsExpanded"
|
||||
@ -7,15 +8,12 @@
|
||||
trigger="click"
|
||||
>
|
||||
<template #content>
|
||||
<div class="popover-options">
|
||||
<slot name="options-left">
|
||||
<div class="no-options">没有配置 options</div>
|
||||
</slot>
|
||||
</div>
|
||||
<slot name="options-left">
|
||||
<div class="no-options">没有配置 options</div>
|
||||
</slot>
|
||||
</template>
|
||||
<a-button
|
||||
type="text"
|
||||
size="small"
|
||||
class="expand-btn"
|
||||
>
|
||||
<template #icon>
|
||||
@ -23,6 +21,7 @@
|
||||
</template>
|
||||
</a-button>
|
||||
</a-popover>
|
||||
<slot name="actions-left"></slot>
|
||||
</div>
|
||||
|
||||
<textarea
|
||||
@ -37,6 +36,7 @@
|
||||
/>
|
||||
|
||||
<div class="send-button-container">
|
||||
<slot name="actions-right"></slot>
|
||||
<a-tooltip :title="isLoading ? '停止回答' : ''">
|
||||
<a-button
|
||||
@click="handleSendOrStop"
|
||||
@ -51,6 +51,7 @@
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<slot name="bottom"></slot>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -116,6 +117,15 @@ const hasOptionsLeft = computed(() => {
|
||||
return Boolean(renderedNodes && renderedNodes.length);
|
||||
});
|
||||
|
||||
const hasActionsLeft = computed(() => {
|
||||
const slot = slots['actions-left'];
|
||||
if (!slot) {
|
||||
return false;
|
||||
}
|
||||
const renderedNodes = slot();
|
||||
return Boolean(renderedNodes && renderedNodes.length);
|
||||
});
|
||||
|
||||
// 图标映射
|
||||
const iconComponents = {
|
||||
'SendOutlined': SendOutlined,
|
||||
@ -285,6 +295,9 @@ onBeforeUnmount(() => {
|
||||
|
||||
.expand-options {
|
||||
justify-self: start;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.send-button-container {
|
||||
justify-self: end;
|
||||
@ -302,6 +315,7 @@ onBeforeUnmount(() => {
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-areas: "options input send";
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
.user-input {
|
||||
min-height: 24px;
|
||||
@ -314,6 +328,12 @@ onBeforeUnmount(() => {
|
||||
.expand-options, .send-button-container {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.expand-options {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -357,23 +377,29 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
|
||||
.expand-btn {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--gray-600);
|
||||
transition: all 0.2s ease;
|
||||
border: 1px solid transparent;
|
||||
background-color: transparent;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--gray-100);
|
||||
color: var(--main-500);
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--main-color);
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.anticon {
|
||||
font-size: 12px;
|
||||
transition: transform 0.2s ease;
|
||||
font-size: 14px;
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
&.rotated {
|
||||
transform: rotate(45deg);
|
||||
@ -383,34 +409,34 @@ onBeforeUnmount(() => {
|
||||
|
||||
// Popover 选项样式
|
||||
.popover-options {
|
||||
min-width: 200px;
|
||||
max-width: 300px;
|
||||
min-width: 160px;
|
||||
max-width: 200px;
|
||||
padding: 4px;
|
||||
|
||||
.no-options {
|
||||
color: var(--gray-700);
|
||||
color: var(--gray-500);
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
padding: 12px 8px;
|
||||
}
|
||||
|
||||
:deep(.opt-item) {
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--gray-300);
|
||||
padding: 5px 10px;
|
||||
border-radius: 8px;
|
||||
padding: 6px 10px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
color: var(--gray-700);
|
||||
transition: all 0.2s ease;
|
||||
margin: 4px;
|
||||
margin: 2px;
|
||||
display: inline-block;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--main-10);
|
||||
color: var(--main-color);
|
||||
color: var(--main-600);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--main-color);
|
||||
border: 1px solid var(--main-500);
|
||||
color: var(--main-600);
|
||||
background-color: var(--main-10);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user