Copy to clipboard

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

@@ -1,28 +1,29 @@
 <template>
-  <div class="result-text-container" @click="copyToClipboard">
+  <div class="result-text-container">
     <div class="text-content">
-      {{ result }}
-    </div>
-    <div class="copy-button">
-      <i class="pi pi-copy" />
+      {{ result.text }}
     </div>
+
+    <Button
+      class="copy-button"
+      icon="pi pi-copy"
+      text
+      @click.stop="copyToClipboard(result.text ?? '')"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
+
+import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { ResultItemImpl } from '@/stores/queueStore'
 
-const props = defineProps<{
+defineProps<{
   result: ResultItemImpl
 }>()
 
-const copyToClipboard = async () => {
-  try {
-    await navigator.clipboard.writeText(props.result.text)
-  } catch (err) {
-    console.error('Failed to copy text:', err)
-  }
-}
+const { copyToClipboard } = useCopyToClipboard()
 </script>
 
 <style scoped>

src/stores/queueStore.ts

@@ -30,6 +30,7 @@ export class ResultItemImpl {
   filename: string
   subfolder: string
   type: string
+  text?: string
 
   nodeId: NodeId
   // 'audio' | 'images' | ...
@@ -43,6 +44,7 @@ export class ResultItemImpl {
     this.filename = obj.filename ?? ''
     this.subfolder = obj.subfolder ?? ''
     this.type = obj.type ?? ''
+    this.text = obj.text
 
     this.nodeId = obj.nodeId
     this.mediaType = obj.mediaType
@@ -237,14 +239,21 @@ export class TaskItemImpl {
     }
     return Object.entries(this.outputs).flatMap(([nodeId, nodeOutputs]) =>
       Object.entries(nodeOutputs).flatMap(([mediaType, items]) =>
-        (items as ResultItem[]).map(
-          (item: ResultItem) =>
-            new ResultItemImpl({
+        (items as (ResultItem | string)[]).map((item: ResultItem | string) => {
+          if (typeof item === 'string') {
+            return new ResultItemImpl({
+              text: item,
+              nodeId,
+              mediaType
+            })
+          } else {
+            return new ResultItemImpl({
               ...item,
               nodeId,
               mediaType
             })
-        )
+          }
+        })
       )
     )
   }