@d4y/agent-runtime-nuxt 0.1.0

package/src/runtime/components/AgentRuntimeArtifactPreview.vue

@@ -0,0 +1,192 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+import { getAgentRuntimeFilePreviewKind, type AgentRuntimeFileLike } from '../utils/files'
+
+const props = withDefaults(defineProps<{
+  file: AgentRuntimeFileLike
+  src?: string | null
+  resolveSrc?: ((relPath: string) => string | null | undefined) | null
+  textMaxChars?: number
+}>(), {
+  src: null,
+  resolveSrc: null,
+  textMaxChars: 120_000,
+})
+
+const kind = computed(() => getAgentRuntimeFilePreviewKind(props.file))
+const resolvedSrc = computed(() => {
+  if (props.src) {
+    return props.src
+  }
+
+  if (!props.file.relPath || !props.resolveSrc) {
+    return null
+  }
+
+  return props.resolveSrc(props.file.relPath) ?? null
+})
+
+const textContent = ref('')
+const textError = ref<string | null>(null)
+const textLoading = ref(false)
+let textAbortController: AbortController | null = null
+
+const abortTextLoad = () => {
+  textAbortController?.abort()
+  textAbortController = null
+}
+
+const loadTextPreview = async () => {
+  abortTextLoad()
+  textContent.value = ''
+  textError.value = null
+
+  if (kind.value !== 'text' || !resolvedSrc.value) {
+    textLoading.value = false
+    return
+  }
+
+  const controller = new AbortController()
+  textAbortController = controller
+  textLoading.value = true
+
+  try {
+    const response = await fetch(resolvedSrc.value, {
+      signal: controller.signal,
+    })
+
+    if (!response.ok) {
+      throw new Error(`Failed to load preview (${response.status})`)
+    }
+
+    const body = await response.text()
+    textContent.value =
+      body.length > props.textMaxChars
+        ? `${body.slice(0, props.textMaxChars).trimEnd()}\n\n…`
+        : body
+  } catch (error) {
+    if (controller.signal.aborted) {
+      return
+    }
+
+    textError.value = error instanceof Error ? error.message : 'Failed to load preview'
+  } finally {
+    if (textAbortController === controller) {
+      textAbortController = null
+    }
+    textLoading.value = false
+  }
+}
+
+watch([kind, resolvedSrc], () => {
+  void loadTextPreview()
+}, { immediate: true })
+
+onBeforeUnmount(() => {
+  abortTextLoad()
+})
+</script>
+
+<template>
+  <div class="agent-runtime-artifact-preview">
+    <img
+      v-if="kind === 'image' && resolvedSrc"
+      :src="resolvedSrc"
+      :alt="file.name ?? file.relPath ?? 'Preview image'"
+      class="agent-runtime-artifact-preview__image">
+
+    <iframe
+      v-else-if="kind === 'pdf' && resolvedSrc"
+      :src="resolvedSrc"
+      :title="file.name ?? file.relPath ?? 'PDF preview'"
+      class="agent-runtime-artifact-preview__frame" />
+
+    <div v-else-if="kind === 'text'" class="agent-runtime-artifact-preview__text-shell">
+      <div v-if="textLoading" class="agent-runtime-artifact-preview__note">
+        Loading preview…
+      </div>
+      <div v-else-if="textError" class="agent-runtime-artifact-preview__note agent-runtime-artifact-preview__note--error">
+        {{ textError }}
+      </div>
+      <pre v-else class="agent-runtime-artifact-preview__text">{{ textContent }}</pre>
+    </div>
+
+    <div v-else class="agent-runtime-artifact-preview__fallback">
+      <p class="agent-runtime-artifact-preview__note">
+        Preview unavailable for this file type.
+      </p>
+      <a
+        v-if="resolvedSrc"
+        :href="resolvedSrc"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="agent-runtime-artifact-preview__link">
+        Open file
+      </a>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.agent-runtime-artifact-preview {
+  display: block;
+  width: 100%;
+  min-height: 12rem;
+}
+
+.agent-runtime-artifact-preview__image,
+.agent-runtime-artifact-preview__frame {
+  display: block;
+  width: 100%;
+  border: 0;
+  border-radius: 0.875rem;
+  background: rgba(15, 23, 42, 0.04);
+}
+
+.agent-runtime-artifact-preview__image {
+  max-height: min(70vh, 48rem);
+  object-fit: contain;
+}
+
+.agent-runtime-artifact-preview__frame {
+  min-height: min(78vh, 52rem);
+}
+
+.agent-runtime-artifact-preview__text-shell,
+.agent-runtime-artifact-preview__fallback {
+  min-height: 18rem;
+  border-radius: 0.875rem;
+  border: 1px solid rgba(15, 23, 42, 0.1);
+  background: rgba(15, 23, 42, 0.03);
+}
+
+.agent-runtime-artifact-preview__text {
+  margin: 0;
+  max-height: min(72vh, 52rem);
+  overflow: auto;
+  padding: 1rem;
+  font-family: ui-monospace, SFMono-Regular, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
+  font-size: 0.8rem;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.agent-runtime-artifact-preview__note {
+  padding: 1rem;
+  font-size: 0.875rem;
+  color: rgba(15, 23, 42, 0.72);
+}
+
+.agent-runtime-artifact-preview__note--error {
+  color: rgb(185, 28, 28);
+}
+
+.agent-runtime-artifact-preview__link {
+  display: inline-flex;
+  margin: 0 1rem 1rem;
+  color: inherit;
+  text-decoration: underline;
+  text-underline-offset: 0.18em;
+}
+</style>