@d4y/agent-runtime-nuxt 0.1.0 → 0.1.2

package/src/runtime/components/AgentRuntimeArtifactPreview.vue

@@ -1,192 +0,0 @@
-<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>