zoeissleeping
8ccaa824dd
- Add HMAC-based file token auth for secure AI model file access - Add file upload retry with exponential backoff (max 3 retries) - File endpoint now requires session auth or signed token - Support assistant role messages in chat input - Optimistic UI for attachments on message send - Verify topic ownership before allowing messages - Switch web scraping to Firecrawl API - Agent profile page layout fixes (proper flex overflow) - Add quick switcher (Ctrl+K) to sidenav - Clean up longcat.ts and stale comments
96 lines
4.0 KiB
Vue
96 lines
4.0 KiB
Vue
<script setup lang="ts">
|
|
import ImageViewer from '~/components/ImageViewer.vue';
|
|
import { resolveFileUrl } from '~~/utils/url';
|
|
|
|
const props = defineProps<{
|
|
file: {
|
|
id: string;
|
|
name: string;
|
|
mimeType: string;
|
|
status?: 'uploading' | 'uploaded' | 'error';
|
|
url: string;
|
|
progress?: number;
|
|
retryCount?: number;
|
|
};
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
retry: [];
|
|
}>();
|
|
|
|
const isImage = computed(() => props.file.mimeType.startsWith('image/'));
|
|
const isVideo = computed(() => props.file.mimeType.startsWith('video/'));
|
|
const isAudio = computed(() => props.file.mimeType.startsWith('audio/'));
|
|
const isPdf = computed(() => props.file.mimeType === 'application/pdf');
|
|
|
|
const resolvedUrl = computed(() => resolveFileUrl(props.file.url));
|
|
|
|
const imageViewerOpen = ref(false);
|
|
const imageRef = ref<HTMLImageElement | null>(null);
|
|
const imageViewerOriginRect = ref<DOMRect | null>(null);
|
|
|
|
const fileIcon = computed(() => {
|
|
if (isImage.value) return 'i-mynaui-image';
|
|
if (isVideo.value) return 'i-mynaui-video';
|
|
if (isAudio.value) return 'i-mynaui-music';
|
|
if (isPdf.value) return 'i-tabler-file-type-pdf';
|
|
if (props.file.mimeType.includes('text')) return 'i-mynaui-file-text';
|
|
if (props.file.mimeType.includes('zip') || props.file.mimeType.includes('archive')) return 'i-mynaui-archive';
|
|
return 'i-mynaui-file';
|
|
});
|
|
|
|
const fileExtension = computed(() => {
|
|
const parts = props.file.name.split('.');
|
|
return parts.length > 1 ? parts.pop()?.toUpperCase() : 'FILE';
|
|
});
|
|
|
|
function openImageViewer() {
|
|
imageViewerOriginRect.value = imageRef.value?.getBoundingClientRect() ?? null;
|
|
imageViewerOpen.value = true;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="relative h-full w-fit flex">
|
|
<div v-if="isImage">
|
|
<img ref="imageRef" :src="resolvedUrl"
|
|
class="rounded-lg h-full w-full max-h-36 max-w-64 object-cover cursor-zoom-in hover:opacity-90 transition-opacity"
|
|
@click="openImageViewer" />
|
|
<ImageViewer v-if="imageViewerOpen" :src="resolvedUrl" :alt="props.file.name"
|
|
:origin-rect="imageViewerOriginRect" :origin-element="imageRef"
|
|
@close="imageViewerOpen = false" />
|
|
</div>
|
|
<video v-else-if="isVideo" controls :src="resolvedUrl"
|
|
class="rounded-lg h-full w-full max-h-36 max-w-64 object-cover" />
|
|
<audio v-else-if="isAudio" controls :src="resolvedUrl" class="rounded-lg h-full w-full max-h-36 max-w-64" />
|
|
|
|
<div v-else class="flex items-center gap-2 p-2 rounded-lg bg-[var(--color-hover)] min-w-40 max-w-48">
|
|
<span :class="[fileIcon, 'text-6 text-[var(--color-accent)]']"></span>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-sm truncate">{{ props.file.name }}</p>
|
|
<p class="text-xs text-[var(--text-tertiary)]">{{ fileExtension }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="file.status === 'uploading'"
|
|
class="absolute inset-0 bg-black/50 rounded-lg flex items-center justify-center">
|
|
<div class="text-center">
|
|
<span class="i-svg-spinners-90-ring-with-bg text-6 text-white block mb-1"></span>
|
|
<span class="text-xs text-white">
|
|
{{ file.retryCount ? `Retry ${file.retryCount}/3` : `${file.progress || 0}%` }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="file.status === 'error'"
|
|
class="absolute inset-0 bg-black/60 rounded-lg flex flex-col items-center justify-center gap-1">
|
|
<span class="i-mynaui-danger-triangle text-6 text-red-400"></span>
|
|
<span class="text-xs text-red-300">Upload failed</span>
|
|
<button @click.stop="emit('retry')"
|
|
class="mt-1 flex items-center gap-1 px-2 py-0.5 rounded-md bg-white/10 hover:bg-white/20 text-xs text-white transition-colors">
|
|
<span class="i-mynaui-refresh text-3"></span>
|
|
Retry
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|