wip

src/components/sidebar/tabs/queue/ResultItem.vue

@@ -13,6 +13,7 @@
     />
     <ResultVideo v-else-if="result.isVideo" :result="result" />
     <ResultAudio v-else-if="result.isAudio" :result="result" />
+    <ResultText v-else-if="result.isText" :result="result" />
     <div v-else class="task-result-preview">
       <i class="pi pi-file" />
       <span>{{ result.mediaType }}</span>
@@ -28,6 +29,7 @@ import { ResultItemImpl } from '@/stores/queueStore'
 import { useSettingStore } from '@/stores/settingStore'
 
 import ResultAudio from './ResultAudio.vue'
+import ResultText from './ResultText.vue'
 import ResultVideo from './ResultVideo.vue'
 
 const props = defineProps<{

src/components/sidebar/tabs/queue/ResultText.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="result-text-container" @click="copyToClipboard">
+    <div class="text-content">
+      {{ result }}
+    </div>
+    <div class="copy-button">
+      <i class="pi pi-copy" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ResultItemImpl } from '@/stores/queueStore'
+
+const props = defineProps<{
+  result: ResultItemImpl
+}>()
+
+const copyToClipboard = async () => {
+  try {
+    await navigator.clipboard.writeText(props.result.text)
+  } catch (err) {
+    console.error('Failed to copy text:', err)
+  }
+}
+</script>
+
+<style scoped>
+.result-text-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+  padding: 1rem;
+  text-align: center;
+  word-break: break-word;
+}
+
+.text-content {
+  font-size: 0.875rem;
+  color: var(--text-color);
+}
+
+.copy-button {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  color: var(--text-color-secondary);
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  background-color: var(--surface-ground);
+}
+
+.result-text-container:hover .copy-button {
+  opacity: 1;
+}
+
+.copy-button:hover {
+  background-color: var(--surface-hover);
+}
+</style>

src/schemas/apiSchema.ts

@@ -22,7 +22,8 @@ const zOutputs = z
     audio: z.array(zResultItem).optional(),
     images: z.array(zResultItem).optional(),
     video: z.array(zResultItem).optional(),
-    animated: z.array(z.boolean()).optional()
+    animated: z.array(z.boolean()).optional(),
+    text: z.string().optional()
   })
   .passthrough()
 

src/stores/queueStore.ts

@@ -193,8 +193,12 @@ export class ResultItemImpl {
     )
   }
 
+  get isText(): boolean {
+    return ['text', 'json', 'display_text'].includes(this.mediaType)
+  }
+
   get supportsPreview(): boolean {
-    return this.isImage || this.isVideo || this.isAudio
+    return this.isImage || this.isVideo || this.isAudio || this.isText
   }
 }