You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
641 lines
14 KiB
641 lines
14 KiB
<script setup lang="ts">
|
|
import type { ContentPart } from "../../types/chat";
|
|
|
|
interface ToolInfo {
|
|
slug: string;
|
|
name: string;
|
|
type: string;
|
|
description: string;
|
|
}
|
|
|
|
interface UploadedImage {
|
|
url: string;
|
|
mimeType: string;
|
|
name: string;
|
|
}
|
|
|
|
const props = defineProps<{
|
|
isLoading: boolean;
|
|
disabled?: boolean;
|
|
disabledReason?: "approval" | "rate-limit" | null;
|
|
placeholder?: string;
|
|
enableTools: boolean;
|
|
toolsDisabled?: boolean;
|
|
loggedIn: boolean;
|
|
editing?: boolean;
|
|
agentTools?: ToolInfo[];
|
|
supportsVision?: boolean;
|
|
maxImages?: number;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
send: [parts: ContentPart[]];
|
|
stop: [];
|
|
"update:enableTools": [val: boolean];
|
|
cancelEdit: [];
|
|
}>();
|
|
|
|
const inputText = ref("");
|
|
const textareaRef = ref<HTMLTextAreaElement | null>(null);
|
|
const fileInputRef = ref<HTMLInputElement | null>(null);
|
|
const fetchedTools = ref<ToolInfo[]>([]);
|
|
const images = ref<UploadedImage[]>([]);
|
|
const isDragging = ref(false);
|
|
const isUploading = ref(false);
|
|
|
|
const maxImages = computed(() => props.maxImages ?? 4);
|
|
|
|
const hasAgentTools = computed(() => !!(props.agentTools && props.agentTools.length > 0));
|
|
|
|
const availableTools = computed<ToolInfo[]>(() => {
|
|
if (hasAgentTools.value) {
|
|
return props.agentTools!;
|
|
}
|
|
return fetchedTools.value;
|
|
});
|
|
|
|
const canAddImage = computed(() => props.supportsVision && images.value.length < maxImages.value);
|
|
|
|
const effectivePlaceholder = computed(() => {
|
|
if (props.disabled) {
|
|
if (props.disabledReason === "rate-limit") return "已达发送频率限制，请稍后再试…";
|
|
return "请先处理待审批的工具调用…";
|
|
}
|
|
return props.placeholder || "输入消息…（Enter 发送，Shift+Enter 换行）";
|
|
});
|
|
|
|
async function loadTools() {
|
|
if (hasAgentTools.value) return;
|
|
try {
|
|
const res = await $fetch<{ code: number; data: ToolInfo[] }>("/api/llm/chat/tools");
|
|
fetchedTools.value = res.data ?? [];
|
|
} catch {
|
|
fetchedTools.value = [];
|
|
}
|
|
}
|
|
|
|
watch(
|
|
() => props.enableTools,
|
|
(val) => {
|
|
if (val && availableTools.value.length === 0) {
|
|
loadTools();
|
|
}
|
|
},
|
|
);
|
|
|
|
onMounted(() => {
|
|
if (props.enableTools) {
|
|
loadTools();
|
|
}
|
|
});
|
|
|
|
function autoResize() {
|
|
if (!textareaRef.value) return;
|
|
textareaRef.value.style.height = "auto";
|
|
const h = Math.min(textareaRef.value.scrollHeight, 200);
|
|
textareaRef.value.style.height = h + "px";
|
|
}
|
|
|
|
watch(inputText, () => {
|
|
nextTick(autoResize);
|
|
});
|
|
|
|
async function uploadImages(files: File[]) {
|
|
if (!props.supportsVision) return;
|
|
const remaining = maxImages.value - images.value.length;
|
|
const toUpload = files.slice(0, remaining);
|
|
if (toUpload.length === 0) return;
|
|
|
|
isUploading.value = true;
|
|
const { $toast } = useNuxtApp();
|
|
try {
|
|
const formData = new FormData();
|
|
for (const f of toUpload) {
|
|
formData.append("file", f);
|
|
}
|
|
const res = await $fetch<{ code: number; data: { name: string; url: string; mimeType: string; size: number }[] }>(
|
|
"/api/file/upload",
|
|
{ method: "POST", body: formData },
|
|
);
|
|
if (res.code === 0 && res.data) {
|
|
for (const item of res.data) {
|
|
images.value.push({ url: item.url, mimeType: item.mimeType, name: item.name });
|
|
}
|
|
}
|
|
} catch {
|
|
$toast?.error?.("图片上传失败");
|
|
} finally {
|
|
isUploading.value = false;
|
|
}
|
|
}
|
|
|
|
function removeImage(idx: number) {
|
|
images.value.splice(idx, 1);
|
|
}
|
|
|
|
function handleFileSelect(e: Event) {
|
|
const target = e.target as HTMLInputElement;
|
|
if (!target.files) return;
|
|
const files = Array.from(target.files).filter((f) => f.type.startsWith("image/"));
|
|
uploadImages(files);
|
|
target.value = "";
|
|
}
|
|
|
|
function handlePaste(e: ClipboardEvent) {
|
|
if (!props.supportsVision) return;
|
|
const items = e.clipboardData?.items;
|
|
if (!items) return;
|
|
const imageFiles: File[] = [];
|
|
for (const item of items) {
|
|
if (item.type.startsWith("image/")) {
|
|
const file = item.getAsFile();
|
|
if (file) imageFiles.push(file);
|
|
}
|
|
}
|
|
if (imageFiles.length > 0) {
|
|
e.preventDefault();
|
|
uploadImages(imageFiles);
|
|
}
|
|
}
|
|
|
|
function handleDrop(e: DragEvent) {
|
|
e.preventDefault();
|
|
isDragging.value = false;
|
|
if (!props.supportsVision) return;
|
|
const files = Array.from(e.dataTransfer?.files ?? []).filter((f) => f.type.startsWith("image/"));
|
|
if (files.length > 0) {
|
|
uploadImages(files);
|
|
}
|
|
}
|
|
|
|
function handleDragOver(e: DragEvent) {
|
|
e.preventDefault();
|
|
if (props.supportsVision) {
|
|
isDragging.value = true;
|
|
}
|
|
}
|
|
|
|
function handleDragLeave(e: DragEvent) {
|
|
e.preventDefault();
|
|
isDragging.value = false;
|
|
}
|
|
|
|
function handleSend() {
|
|
const text = inputText.value.trim();
|
|
const hasImages = images.value.length > 0;
|
|
if ((!text && !hasImages) || props.isLoading || props.disabled) return;
|
|
|
|
const parts: ContentPart[] = [];
|
|
if (text) {
|
|
parts.push({ type: "text", text });
|
|
}
|
|
for (const img of images.value) {
|
|
parts.push({ type: "image", image: img.url, mimeType: img.mimeType, name: img.name });
|
|
}
|
|
|
|
emit("send", parts);
|
|
inputText.value = "";
|
|
images.value = [];
|
|
nextTick(autoResize);
|
|
}
|
|
|
|
function handleKeydown(e: KeyboardEvent) {
|
|
if (e.key === "Escape" && props.editing) {
|
|
e.preventDefault();
|
|
emit("cancelEdit");
|
|
return;
|
|
}
|
|
if (e.key === "Enter" && !e.shiftKey) {
|
|
e.preventDefault();
|
|
handleSend();
|
|
}
|
|
}
|
|
|
|
defineExpose({
|
|
setText(text: string) {
|
|
inputText.value = text;
|
|
nextTick(() => {
|
|
autoResize();
|
|
textareaRef.value?.focus();
|
|
});
|
|
},
|
|
setParts(parts: ContentPart[]) {
|
|
inputText.value = parts.filter((p) => p.type === "text").map((p) => (p as any).text).join("");
|
|
images.value = parts
|
|
.filter((p) => p.type === "image")
|
|
.map((p) => ({ url: (p as any).image, mimeType: (p as any).mimeType, name: (p as any).name ?? "image" }));
|
|
nextTick(() => {
|
|
autoResize();
|
|
textareaRef.value?.focus();
|
|
});
|
|
},
|
|
focus() {
|
|
textareaRef.value?.focus();
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="agent-input">
|
|
<!-- Editing banner -->
|
|
<div v-if="editing" class="edit-banner">
|
|
<div class="edit-banner-info">
|
|
<Icon name="lucide:pencil-line" class="edit-banner-icon" />
|
|
<span>正在编辑消息</span>
|
|
</div>
|
|
<button class="edit-banner-cancel" @click="emit('cancelEdit')">
|
|
<Icon name="lucide:x" />
|
|
取消
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Tools bar above input (hidden when model doesn't support tools or agent has no tools) -->
|
|
<div v-if="!toolsDisabled && hasAgentTools" class="tools-bar">
|
|
<button
|
|
class="toggle-btn"
|
|
:class="{ active: enableTools, disabled: toolsDisabled }"
|
|
:disabled="toolsDisabled"
|
|
:title="toolsDisabled ? '当前模型不支持工具调用' : '工具调用'"
|
|
@click="!toolsDisabled && emit('update:enableTools', !enableTools)"
|
|
>
|
|
<Icon name="lucide:wrench" />
|
|
<span>工具</span>
|
|
</button>
|
|
<div v-if="enableTools && availableTools.length > 0" class="tools-list">
|
|
<span
|
|
v-for="t in availableTools"
|
|
:key="t.slug"
|
|
class="tool-chip"
|
|
:title="t.description"
|
|
>
|
|
{{ t.name }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Image preview area -->
|
|
<div v-if="images.length > 0" class="image-preview-area">
|
|
<div v-for="(img, idx) in images" :key="idx" class="image-preview-item">
|
|
<img :src="img.url" :alt="img.name" class="image-preview-img" />
|
|
<button class="image-remove-btn" @click="removeImage(idx)">
|
|
<Icon name="lucide:x" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="input-wrapper"
|
|
:class="{ 'is-dragging': isDragging }"
|
|
@drop="handleDrop"
|
|
@dragover="handleDragOver"
|
|
@dragleave="handleDragLeave"
|
|
>
|
|
<!-- Image upload button -->
|
|
<button
|
|
v-if="supportsVision"
|
|
class="btn-image"
|
|
:class="{ disabled: !canAddImage }"
|
|
:disabled="!canAddImage || isUploading"
|
|
:title="!supportsVision ? '当前模型不支持图片' : canAddImage ? '上传图片（可粘贴/拖拽）' : `最多 ${maxImages} 张图片`"
|
|
@click="fileInputRef?.click()"
|
|
>
|
|
<Icon :name="isUploading ? 'lucide:loader-2' : 'lucide:image-plus'" />
|
|
</button>
|
|
<input
|
|
ref="fileInputRef"
|
|
type="file"
|
|
accept="image/png,image/jpeg,image/webp,image/svg+xml"
|
|
multiple
|
|
class="file-input-hidden"
|
|
@change="handleFileSelect"
|
|
/>
|
|
<textarea
|
|
ref="textareaRef"
|
|
v-model="inputText"
|
|
class="agent-textarea"
|
|
:placeholder="effectivePlaceholder"
|
|
:disabled="disabled"
|
|
rows="1"
|
|
@keydown="handleKeydown"
|
|
@paste="handlePaste"
|
|
/>
|
|
<div class="input-actions">
|
|
<button
|
|
v-if="isLoading"
|
|
class="btn-stop"
|
|
@click="emit('stop')"
|
|
>
|
|
<Icon name="lucide:square" />
|
|
停止
|
|
</button>
|
|
<button
|
|
v-else
|
|
class="btn-send"
|
|
:disabled="(!inputText.trim() && images.length === 0) || disabled"
|
|
@click="handleSend"
|
|
>
|
|
<Icon name="lucide:arrow-up" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Drag overlay hint -->
|
|
<div v-if="isDragging" class="drag-hint">
|
|
<Icon name="lucide:image-plus" />
|
|
<span>松开以上传图片</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.agent-input {
|
|
padding: 0 24px 20px;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
}
|
|
|
|
.edit-banner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 6px 14px;
|
|
margin-bottom: 8px;
|
|
background: var(--color-surface-soft);
|
|
border: 1px solid var(--color-hairline);
|
|
border-radius: 12px;
|
|
font-size: 13px;
|
|
color: var(--color-muted);
|
|
}
|
|
|
|
.edit-banner-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.edit-banner-icon {
|
|
font-size: 14px;
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.edit-banner-cancel {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 2px 10px;
|
|
background: none;
|
|
border: 1px solid var(--color-hairline);
|
|
border-radius: 8px;
|
|
font-size: 12px;
|
|
color: var(--color-muted);
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.edit-banner-cancel:hover {
|
|
border-color: var(--color-primary);
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.tools-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.toggle-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 4px 10px;
|
|
background: var(--color-surface-soft);
|
|
border: 1px solid var(--color-hairline);
|
|
border-radius: 8px;
|
|
font-size: 12px;
|
|
color: var(--color-muted);
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.toggle-btn:hover {
|
|
border-color: var(--color-primary);
|
|
}
|
|
|
|
.toggle-btn.active {
|
|
background: var(--color-primary);
|
|
border-color: var(--color-primary);
|
|
color: var(--color-on-primary);
|
|
}
|
|
|
|
.toggle-btn.disabled {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.toggle-btn.disabled:hover {
|
|
border-color: var(--color-hairline);
|
|
}
|
|
|
|
.tools-list {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.tool-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 2px 8px;
|
|
background: var(--color-surface-soft);
|
|
border: 1px solid var(--color-hairline);
|
|
border-radius: 6px;
|
|
font-size: 11px;
|
|
color: var(--color-muted);
|
|
cursor: default;
|
|
}
|
|
|
|
.image-preview-area {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.image-preview-item {
|
|
position: relative;
|
|
width: 64px;
|
|
height: 64px;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--color-hairline);
|
|
}
|
|
|
|
.image-preview-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.image-remove-btn {
|
|
position: absolute;
|
|
top: 2px;
|
|
right: 2px;
|
|
width: 18px;
|
|
height: 18px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: none;
|
|
border-radius: 50%;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
color: #fff;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
padding: 0;
|
|
}
|
|
|
|
.image-remove-btn:hover {
|
|
background: rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
.input-wrapper {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 8px;
|
|
background: var(--color-surface-card);
|
|
border: 1px solid var(--color-hairline);
|
|
border-radius: 24px;
|
|
padding: 8px 8px 8px 12px;
|
|
transition: border-color 0.15s, box-shadow 0.15s;
|
|
}
|
|
|
|
.input-wrapper:focus-within {
|
|
border-color: var(--color-primary);
|
|
box-shadow: 0 0 0 3px rgba(204, 120, 92, 0.12);
|
|
}
|
|
|
|
.input-wrapper.is-dragging {
|
|
border-color: var(--color-primary);
|
|
border-style: dashed;
|
|
background: var(--color-surface-soft);
|
|
}
|
|
|
|
.file-input-hidden {
|
|
display: none;
|
|
}
|
|
|
|
.btn-image {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
border: none;
|
|
border-radius: 50%;
|
|
background: none;
|
|
color: var(--color-muted);
|
|
cursor: pointer;
|
|
font-size: 18px;
|
|
transition: all 0.15s;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.btn-image:hover:not(:disabled) {
|
|
color: var(--color-primary);
|
|
background: var(--color-surface-soft);
|
|
}
|
|
|
|
.btn-image.disabled {
|
|
opacity: 0.3;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.agent-textarea {
|
|
flex: 1;
|
|
border: none;
|
|
background: none;
|
|
outline: none;
|
|
resize: none;
|
|
font-family: var(--font-body);
|
|
font-size: 15px;
|
|
line-height: 1.6;
|
|
color: var(--color-ink);
|
|
max-height: 200px;
|
|
padding: 6px 0;
|
|
}
|
|
|
|
.agent-textarea::placeholder {
|
|
color: var(--color-muted);
|
|
}
|
|
|
|
.agent-textarea:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.input-actions {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.btn-send,
|
|
.btn-stop {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: none;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
font-size: 18px;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.btn-send {
|
|
width: 36px;
|
|
height: 36px;
|
|
background: var(--color-primary);
|
|
color: var(--color-on-primary);
|
|
}
|
|
|
|
.btn-send:hover:not(:disabled) {
|
|
background: var(--color-primary-active);
|
|
}
|
|
|
|
.btn-send:disabled {
|
|
background: var(--color-hairline);
|
|
color: var(--color-muted);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.btn-stop {
|
|
height: 36px;
|
|
background: var(--color-surface-dark);
|
|
color: var(--color-on-dark);
|
|
font-size: 13px;
|
|
border-radius: 18px;
|
|
padding: 0 14px;
|
|
gap: 5px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.btn-stop:hover {
|
|
filter: brightness(1.2);
|
|
}
|
|
|
|
.drag-hint {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
padding: 8px;
|
|
margin-top: 4px;
|
|
font-size: 13px;
|
|
color: var(--color-primary);
|
|
}
|
|
</style>
|
|
|