From bdf32790c961f1807bbd274782f8ef3f21873311 Mon Sep 17 00:00:00 2001
From: Chenlei Hu <hcl@comfy.org>
Date: Fri, 16 May 2025 16:55:28 -0400
Subject: [PATCH] wip

---
 .../sidebar/tabs/queue/ResultItem.vue         |  2 +
 .../sidebar/tabs/queue/ResultText.vue         | 66 +++++++++++++++++++
 src/schemas/apiSchema.ts                      |  3 +-
 src/stores/queueStore.ts                      |  6 +-
 4 files changed, 75 insertions(+), 2 deletions(-)
 create mode 100644 src/components/sidebar/tabs/queue/ResultText.vue

diff --git a/src/components/sidebar/tabs/queue/ResultItem.vue b/src/components/sidebar/tabs/queue/ResultItem.vue
index 9f05ab687..d2544e268 100644
--- a/src/components/sidebar/tabs/queue/ResultItem.vue
+++ b/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<{
diff --git a/src/components/sidebar/tabs/queue/ResultText.vue b/src/components/sidebar/tabs/queue/ResultText.vue
new file mode 100644
index 000000000..1e0e4b600
--- /dev/null
+++ b/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>
diff --git a/src/schemas/apiSchema.ts b/src/schemas/apiSchema.ts
index a6d8eee27..adf414f60 100644
--- a/src/schemas/apiSchema.ts
+++ b/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()
 
diff --git a/src/stores/queueStore.ts b/src/stores/queueStore.ts
index 376063958..2d76d7b90 100644
--- a/src/stores/queueStore.ts
+++ b/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
   }
 }