refactor: un-hardcode file urls

app/components/Attachment/Display.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import ImageViewer from '~/components/ImageViewer.vue';
+import { resolveFileUrl } from '~~/utils/url';
 
 const props = defineProps<{
     file: {
@@ -17,6 +18,8 @@ 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);
@@ -45,16 +48,16 @@ function openImageViewer() {
 <template>
     <div class="relative h-full w-fit flex">
         <div v-if="isImage">
-            <img ref="imageRef" :src="props.file.url"
+            <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="props.file.url" :alt="props.file.name"
+            <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="props.file.url"
+        <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="props.file.url" class="rounded-lg h-full w-full max-h-36 max-w-64" />
+        <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>

app/components/Message/index.vue

@@ -42,7 +42,7 @@ watch(() => message.children.length, (newCount, oldCount) => {
     }
 
     if (oldCount > newCount) {
-        const activeChild = message.children.find(c => c.id === message.activeChildId);
+        const activeChild = message.children.find(c => c?.id === message.activeChildId);
         if (!activeChild) {
             emit('patch', { activeChildId: message.children[newCount - 1]?.id ?? null });
         }
@@ -57,7 +57,7 @@ watch(() => message.children.length, (newCount, oldCount) => {
 
 const activeMessage = computed(() => {
     if (message.activeChildId && message.children.length > 0) {
-        const child = message.children.find(c => c.id === message.activeChildId);
+        const child = message.children.find(c => c?.id === message.activeChildId);
         if (child) return child;
     }
 
@@ -140,7 +140,7 @@ const messageCount = computed(() => {
 
 const currentChildIndex = computed(() => {
     if (!message.activeChildId) return 0;
-    const idx = message.children.findIndex(c => c.id === message.activeChildId);
+    const idx = message.children.findIndex(c => c?.id === message.activeChildId);
     return idx >= 0 ? idx + 1 : 0;
 });
 
@@ -150,7 +150,7 @@ const navigateChild = (direction: -1 | 1) => {
         : [null, ...message.children];
 
     const currentIdx = allItems.findIndex(item =>
-        item === null ? !message.activeChildId : item.id === message.activeChildId
+        !item ? !message.activeChildId : item.id === message.activeChildId
     );
 
     const newIdx = Math.max(0, Math.min(allItems.length - 1, currentIdx + direction));

app/composables/useResources.ts

@@ -1,5 +1,6 @@
 import { attempt } from "~~/types/result";
 import * as schema from '~~/drizzle/schema';
+import { resolveFileUrl } from '~~/utils/url';
 
 export type ResourceFile = typeof schema.files.$inferSelect;
 
@@ -118,12 +119,12 @@ export const useResources = async () => {
     };
 
     const copyLink = async (file: ResourceFile) => {
-        const url = file.url;
+        const url = resolveFileUrl(file.url);
         await navigator.clipboard.writeText(url);
     };
 
     const downloadFile = (file: ResourceFile) => {
-        const url = file.url;
+        const url = resolveFileUrl(file.url);
         const a = document.createElement('a');
         a.href = url;
         a.download = file.name;

app/pages/resources.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useFloating, offset, flip, shift, autoUpdate, hide } from '@floating-ui/vue';
+import { resolveFileUrl } from '~~/utils/url';
 
 const { open: sidebarOpen, openSidebar } = useSidebar();
 const {
@@ -88,7 +89,7 @@ const handleRowClick = (e: MouseEvent) => {
             if (file && isImage(file.mimeType)) {
                 const row = trigger.closest('[data-file-id]') as HTMLElement;
                 previewOrigin.value = row?.getBoundingClientRect() ?? null;
-                previewSrc.value = file.url;
+                previewSrc.value = resolveFileUrl(file.url);
             }
             break;
     }

bun.lock

@@ -1,6 +1,5 @@
 {
   "lockfileVersion": 1,
-  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "veridian",

drizzle/migrations/20260512150519_strip-file-url-prefix/migration.sql

@@ -0,0 +1,4 @@
+-- Custom SQL migration file, put your code below! --
+UPDATE files
+SET url = regexp_replace(url, '^https?://[^/]+', '')
+WHERE url ~ '^https?://[^/]+';

nuxt.config.ts

@@ -169,6 +169,7 @@ export default defineNuxtConfig({
 
         public: {
             disableSignup: process.env.DISABLE_SIGNUP === 'true' || process.env.DISABLE_SIGNUP === '1',
+            publicUrl: process.env.NUXT_PUBLIC_URL ?? 'http://localhost:3000',
         }
     },
 

server/api/upload/presigned.post.ts

@@ -56,7 +56,7 @@ export default defineEventHandler(async (event) => {
 
         return {
             url,
-            assetUrl: `${process.env.NUXT_PUBLIC_URL}/api/files/${key}`,
+            assetUrl: `/api/files/${key}`,
         };
     } catch (error) {
         console.error('Failed to generate presigned URL:', error);

utils/message.ts

@@ -3,6 +3,7 @@ import { ToolCallType } from "~~/drizzle/schema";
 import { Err, Ok, type Result } from "~~/types/result";
 import type { Message, MessageEntity } from "~/composables/useChat";
 import type { Agent } from "~/composables/useAgents";
+import { resolveFileUrl } from "~~/utils/url";
 
 export const buildMessageTree = (flatMessages: MessageEntity[]) => {
     const messagesMap = new Map(flatMessages.map(m => [m.id, { ...m, children: [] as MessageEntity[] }]));
@@ -50,16 +51,18 @@ export const marshallMessages = (agent: Agent, messages: Readonly<MessageEntity[
         switch (message.role) {
             case 'user': {
                 const attachments = message.attachments.map(attachment => {
+                    const url = resolveFileUrl(attachment.file.url);
+
                     if (attachment.file.mimeType.startsWith('image/')) {
                         return {
                             type: 'image',
-                            image: attachment.file.url,
+                            image: url,
                         };
                     }
 
                     return {
                         type: 'file',
-                        data: attachment.file.url,
+                        data: url,
                         filename: attachment.file.name,
                         mediaType: attachment.file.mimeType,
                     };

utils/url.ts

@@ -0,0 +1,7 @@
+export const resolveFileUrl = (path: string): string => {
+    if (path.startsWith('http://') || path.startsWith('https://') || path.startsWith('blob:') || path.startsWith('data:')) {
+        return path;
+    }
+    const config = useRuntimeConfig();
+    return `${config.public.publicUrl}${path}`;
+};