Workflows can receive images from other workflows/historical prompts

src/lib/components/modal/A1111PromptModal.svelte

@@ -104,7 +104,6 @@
      .accordion {
          background: var(--panel-background-fill);
 
-
          :global(> .block .block) {
              background: var(--panel-background-fill);
          }

src/lib/components/modal/ReceiveOutputTargets.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+ import type { ComfyReceiveOutputNode } from "$lib/nodes/actions";
+ import type { ComfyWorkflow, WorkflowReceiveOutputTargets } from "$lib/stores/workflowState";
+ import { Block, BlockTitle } from "@gradio/atoms";
+ import { Button } from "@gradio/button";
+ import { createEventDispatcher } from "svelte";
+
+ const dispatch = createEventDispatcher<{
+     select: { workflow: ComfyWorkflow, targetNode: ComfyReceiveOutputNode };
+ }>();
+
+ export let receiveTargets: WorkflowReceiveOutputTargets[] = [];
+
+ function onSelected( workflow: ComfyWorkflow, targetNode: ComfyReceiveOutputNode ) {
+     dispatch("select", {
+         workflow,
+         targetNode
+     })
+}
+</script>
+
+<div class="scroll-container">
+    {#if receiveTargets.length > 0}
+        {#each receiveTargets as { workflow, targetNodes }}
+            <Block>
+                <BlockTitle>{workflow.attrs.title}</BlockTitle>
+                {#each targetNodes as targetNode}
+                    <Block>
+                        <div class="target">
+                            <div class="target-name-and-desc">
+                                <div class="target-name">➤ {targetNode.properties.name}</div>
+                                {#if targetNode.properties.description}
+                                    <div class="target-desc">{targetNode.properties.description}</div>
+                                {/if}
+                            </div>
+                            <div class="send-button">
+                                <Button variant="primary" on:click={() => onSelected(workflow, targetNode)}>
+                                    Send
+                                </Button>
+                            </div>
+                        </div>
+                    </Block>
+                {/each}
+            </Block>
+        {/each}
+            {:else}
+        <div>(No receive targets found.)</div>
+    {/if}
+</div>
+
+<style lang="scss">
+ .scroll-container {
+     overflow: auto;
+     position: relative;
+     flex: 1 1 0%;
+     height: 100%;
+
+     > :global(.block) {
+         background: var(--panel-background-fill);
+     }
+ }
+
+ .target {
+     display: flex;
+     flex-direction: row;
+     justify-content: center;
+     text-align: left;
+
+     .target-name-and-desc {
+         margin: auto auto auto 0;
+         left: 0px;
+
+         .target-desc {
+             opacity: 65%;
+             font-size: 11pt;
+         }
+     }
+}
+</style>

src/lib/components/modal/SendOutputModal.svelte

@@ -0,0 +1,79 @@
+<script lang="ts" context="module">
+ export type SendOutputModalResult = {
+     workflow?: ComfyWorkflow,
+     targetNode?: ComfyReceiveOutputNode,
+ }
+</script>
+
+<script lang="ts">
+ import type { ModalData, ModalState } from "$lib/stores/modalState";
+ import { Block, BlockTitle } from "@gradio/atoms";
+ import type { SlotType } from "@litegraph-ts/core";
+ import type { Writable } from "svelte/store";
+ import { StaticImage } from "$lib/components/gradio/image";
+	import type { ComfyWorkflow, WorkflowReceiveOutputTargets } from "$lib/stores/workflowState";
+	import { comfyBoxImageToComfyURL } from "$lib/utils";
+	import { Button } from "@gradio/button";
+	import type { ComfyReceiveOutputNode } from "$lib/nodes/actions";
+	import ReceiveOutputTargets from "./ReceiveOutputTargets.svelte";
+
+ export let value: any;
+ export let type: SlotType;
+ export let receiveTargets: WorkflowReceiveOutputTargets[] = [];
+
+ export let _modal: ModalData;
+
+ let images = []
+
+ if (type === "COMFYBOX_IMAGE") {
+     images = [comfyBoxImageToComfyURL(value)];
+ }
+
+ function sendOutput(workflow: ComfyWorkflow, targetNode: ComfyReceiveOutputNode) {
+     const result: SendOutputModalResult = {
+         workflow,
+         targetNode
+     }
+     _modal.state.set(result)
+     _modal.close();
+ }
+</script>
+
+<div class="send-output-modal">
+    <div class="targets-container">
+        <Block>
+            <span>Type: {type}</span>
+        </Block>
+        <ReceiveOutputTargets {receiveTargets} on:select={(e) => sendOutput(e.detail.workflow, e.detail.targetNode)} />
+    </div>
+    <div class="output-display">
+        <Block>
+            {#if type === "COMFYBOX_IMAGE"}
+                <StaticImage show_label={false} label="Image" value={images[0]} />
+            {/if}
+        </Block>
+    </div>
+</div>
+
+<style lang="scss">
+ .send-output-modal {
+     width: 60vw;
+     height: 70vh;
+     color: none;
+
+     display: flex;
+     flex-wrap: nowrap;
+     overflow-y: none;
+
+     flex-direction: row;
+ }
+
+ .targets-container {
+     width: 100%;
+     flex-direction: column;
+ }
+
+ .output-display {
+     width: 40vw;
+ }
+</style>