scroll queue item for long text

build/plugins/addElementVnodeExportPlugin.ts

@@ -0,0 +1,59 @@
+import { Plugin } from 'vite'
+
+/**
+ * Vite plugin that adds an alias export for Vue's createBaseVNode as createElementVNode.
+ *
+ * This plugin addresses compatibility issues where some components or libraries
+ * might be using the older createElementVNode function name instead of createBaseVNode.
+ * It modifies the Vue vendor chunk during build to add the alias export.
+ *
+ * @returns {Plugin} A Vite plugin that modifies the Vue vendor chunk exports
+ */
+export function addElementVnodeExportPlugin(): Plugin {
+  return {
+    name: 'add-element-vnode-export-plugin',
+
+    renderChunk(code, chunk, _options) {
+      if (chunk.name.startsWith('vendor-vue')) {
+        const exportRegex = /(export\s*\{)([^}]*)(\}\s*;?\s*)$/
+        const match = code.match(exportRegex)
+
+        if (match) {
+          const existingExports = match[2].trim()
+          const exportsArray = existingExports
+            .split(',')
+            .map((e) => e.trim())
+            .filter(Boolean)
+
+          const hasCreateBaseVNode = exportsArray.some((e) =>
+            e.startsWith('createBaseVNode')
+          )
+          const hasCreateElementVNode = exportsArray.some((e) =>
+            e.includes('createElementVNode')
+          )
+
+          if (hasCreateBaseVNode && !hasCreateElementVNode) {
+            const newExportStatement = `${match[1]} ${existingExports ? existingExports + ',' : ''} createBaseVNode as createElementVNode ${match[3]}`
+            const newCode = code.replace(exportRegex, newExportStatement)
+
+            console.log(
+              `[add-element-vnode-export-plugin] Added 'createBaseVNode as createElementVNode' export to vendor-vue chunk.`
+            )
+
+            return { code: newCode, map: null }
+          } else if (!hasCreateBaseVNode) {
+            console.warn(
+              `[add-element-vnode-export-plugin] Warning: 'createBaseVNode' not found in exports of vendor-vue chunk. Cannot add alias.`
+            )
+          }
+        } else {
+          console.warn(
+            `[add-element-vnode-export-plugin] Warning: Could not find expected export block format in vendor-vue chunk.`
+          )
+        }
+      }
+
+      return null
+    }
+  }
+}

build/plugins/generateImportMapPlugin.ts

@@ -1,24 +1,9 @@
-import glob from 'fast-glob'
-import fs from 'fs-extra'
-import { dirname, join } from 'node:path'
-import { HtmlTagDescriptor, Plugin, normalizePath } from 'vite'
+import type { OutputOptions } from 'rollup'
+import { HtmlTagDescriptor, Plugin } from 'vite'
 
-interface ImportMapSource {
+interface VendorLibrary {
   name: string
-  pattern: string | RegExp
-  entry: string
-  recursiveDependence?: boolean
-  override?: Record<string, Partial<ImportMapSource>>
-}
-
-const parseDeps = (root: string, pkg: string) => {
-  const pkgPath = join(root, 'node_modules', pkg, 'package.json')
-  if (fs.existsSync(pkgPath)) {
-    const content = fs.readFileSync(pkgPath, 'utf-8')
-    const pkg = JSON.parse(content)
-    return Object.keys(pkg.dependencies || {})
-  }
-  return []
+  pattern: RegExp
 }
 
 /**
@@ -38,89 +23,53 @@ const parseDeps = (root: string, pkg: string) => {
  * @returns {Plugin} A Vite plugin that generates and injects an import map
  */
 export function generateImportMapPlugin(
-  importMapSources: ImportMapSource[]
+  vendorLibraries: VendorLibrary[]
 ): Plugin {
   const importMapEntries: Record<string, string> = {}
-  const resolvedImportMapSources: Map<string, ImportMapSource> = new Map()
-  const assetDir = 'assets/lib'
-  let root: string
 
   return {
     name: 'generate-import-map-plugin',
 
     // Configure manual chunks during the build process
     configResolved(config) {
-      root = config.root
-
       if (config.build) {
         // Ensure rollupOptions exists
         if (!config.build.rollupOptions) {
           config.build.rollupOptions = {}
         }
 
-        for (const source of importMapSources) {
-          resolvedImportMapSources.set(source.name, source)
-          if (source.recursiveDependence) {
-            const deps = parseDeps(root, source.name)
-
-            while (deps.length) {
-              const dep = deps.shift()!
-              const depSource = Object.assign({}, source, {
-                name: dep,
-                pattern: dep,
-                ...source.override?.[dep]
-              })
-              resolvedImportMapSources.set(depSource.name, depSource)
-
-              const _deps = parseDeps(root, depSource.name)
-              deps.unshift(..._deps)
+        const outputOptions: OutputOptions = {
+          manualChunks: (id: string) => {
+            for (const lib of vendorLibraries) {
+              if (lib.pattern.test(id)) {
+                return `vendor-${lib.name}`
+              }
             }
-          }
+            return null
+          },
+          // Disable minification of internal exports to preserve function names
+          minifyInternalExports: false
         }
-
-        const external: (string | RegExp)[] = []
-        for (const [, source] of resolvedImportMapSources) {
-          external.push(source.pattern)
-        }
-        config.build.rollupOptions.external = external
+        config.build.rollupOptions.output = outputOptions
       }
     },
 
-    generateBundle(_options) {
-      for (const [, source] of resolvedImportMapSources) {
-        if (source.entry) {
-          const moduleFile = join(source.name, source.entry)
-          const sourceFile = join(root, 'node_modules', moduleFile)
-          const targetFile = join(root, 'dist', assetDir, moduleFile)
+    generateBundle(_options, bundle) {
+      for (const fileName in bundle) {
+        const chunk = bundle[fileName]
+        if (chunk.type === 'chunk' && !chunk.isEntry) {
+          // Find matching vendor library by chunk name
+          const vendorLib = vendorLibraries.find(
+            (lib) => chunk.name === `vendor-${lib.name}`
+          )
 
-          importMapEntries[source.name] =
-            './' + normalizePath(join(assetDir, moduleFile))
+          if (vendorLib) {
+            const relativePath = `./${chunk.fileName.replace(/\\/g, '/')}`
+            importMapEntries[vendorLib.name] = relativePath
 
-          const targetDir = dirname(targetFile)
-          if (!fs.existsSync(targetDir)) {
-            fs.mkdirSync(targetDir, { recursive: true })
-          }
-          fs.copyFileSync(sourceFile, targetFile)
-        }
-
-        if (source.recursiveDependence) {
-          const files = glob.sync(['**/*.{js,mjs}'], {
-            cwd: join(root, 'node_modules', source.name)
-          })
-
-          for (const file of files) {
-            const moduleFile = join(source.name, file)
-            const sourceFile = join(root, 'node_modules', moduleFile)
-            const targetFile = join(root, 'dist', assetDir, moduleFile)
-
-            importMapEntries[normalizePath(join(source.name, dirname(file)))] =
-              './' + normalizePath(join(assetDir, moduleFile))
-
-            const targetDir = dirname(targetFile)
-            if (!fs.existsSync(targetDir)) {
-              fs.mkdirSync(targetDir, { recursive: true })
-            }
-            fs.copyFileSync(sourceFile, targetFile)
+            console.log(
+              `[ImportMap Plugin] Found chunk: ${chunk.name} -> Mapped '${vendorLib.name}' to '${relativePath}'`
+            )
           }
         }
       }

build/plugins/index.ts

@@ -1,2 +1,3 @@
+export { addElementVnodeExportPlugin } from './addElementVnodeExportPlugin'
 export { comfyAPIPlugin } from './comfyAPIPlugin'
 export { generateImportMapPlugin } from './generateImportMapPlugin'

package-lock.json

@@ -1,18 +1,18 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.21.1",
+  "version": "1.21.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@comfyorg/comfyui-frontend",
-      "version": "1.21.1",
+      "version": "1.21.0",
       "license": "GPL-3.0-only",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
         "@comfyorg/comfyui-electron-types": "^0.4.43",
-        "@comfyorg/litegraph": "^0.15.12",
+        "@comfyorg/litegraph": "^0.15.11",
         "@primevue/forms": "^4.2.5",
         "@primevue/themes": "^4.2.5",
         "@sentry/vue": "^8.48.0",
@@ -788,9 +788,9 @@
       "license": "GPL-3.0-only"
     },
     "node_modules/@comfyorg/litegraph": {
-      "version": "0.15.12",
-      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.15.12.tgz",
-      "integrity": "sha512-Pp5qihW1RlBtMER1ynV4OoHts9udm4opaDVvKrI4RTFzxTJkjbH24JMRMnXQw3Wc0t1RL0XqdKSM6T5nIYGP8A==",
+      "version": "0.15.11",
+      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.15.11.tgz",
+      "integrity": "sha512-gU8KK9cid7dXSK1yh3ReUolG0HGT3piKgKLd8YDr21PWl64pQvzy8BIh7W1vKH8ZWictKmNBaG9IRKlsJ667Zw==",
       "license": "MIT"
     },
     "node_modules/@cspotcode/source-map-support": {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.21.1",
+  "version": "1.21.0",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -74,7 +74,7 @@
     "@alloc/quick-lru": "^5.2.0",
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
     "@comfyorg/comfyui-electron-types": "^0.4.43",
-    "@comfyorg/litegraph": "^0.15.12",
+    "@comfyorg/litegraph": "^0.15.11",
     "@primevue/forms": "^4.2.5",
     "@primevue/themes": "^4.2.5",
     "@sentry/vue": "^8.48.0",

src/components/dialog/content/signin/SignInForm.spec.ts

@@ -1,293 +0,0 @@
-import { Form } from '@primevue/forms'
-import { VueWrapper, mount } from '@vue/test-utils'
-import Button from 'primevue/button'
-import PrimeVue from 'primevue/config'
-import InputText from 'primevue/inputtext'
-import Password from 'primevue/password'
-import ProgressSpinner from 'primevue/progressspinner'
-import ToastService from 'primevue/toastservice'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { nextTick } from 'vue'
-import { createI18n } from 'vue-i18n'
-
-import enMessages from '@/locales/en/main.json'
-
-import SignInForm from './SignInForm.vue'
-
-type ComponentInstance = InstanceType<typeof SignInForm>
-
-// Mock firebase auth modules
-vi.mock('firebase/app', () => ({
-  initializeApp: vi.fn(),
-  getApp: vi.fn()
-}))
-
-vi.mock('firebase/auth', () => ({
-  getAuth: vi.fn(),
-  setPersistence: vi.fn(),
-  browserLocalPersistence: {},
-  onAuthStateChanged: vi.fn(),
-  signInWithEmailAndPassword: vi.fn(),
-  signOut: vi.fn(),
-  sendPasswordResetEmail: vi.fn()
-}))
-
-// Mock the auth composables and stores
-const mockSendPasswordReset = vi.fn()
-vi.mock('@/composables/auth/useFirebaseAuthActions', () => ({
-  useFirebaseAuthActions: vi.fn(() => ({
-    sendPasswordReset: mockSendPasswordReset
-  }))
-}))
-
-let mockLoading = false
-vi.mock('@/stores/firebaseAuthStore', () => ({
-  useFirebaseAuthStore: vi.fn(() => ({
-    get loading() {
-      return mockLoading
-    }
-  }))
-}))
-
-// Mock toast
-const mockToastAdd = vi.fn()
-vi.mock('primevue/usetoast', () => ({
-  useToast: vi.fn(() => ({
-    add: mockToastAdd
-  }))
-}))
-
-describe('SignInForm', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockSendPasswordReset.mockReset()
-    mockToastAdd.mockReset()
-    mockLoading = false
-  })
-
-  const mountComponent = (
-    props = {},
-    options = {}
-  ): VueWrapper<ComponentInstance> => {
-    const i18n = createI18n({
-      legacy: false,
-      locale: 'en',
-      messages: { en: enMessages }
-    })
-
-    return mount(SignInForm, {
-      global: {
-        plugins: [PrimeVue, i18n, ToastService],
-        components: {
-          Form,
-          Button,
-          InputText,
-          Password,
-          ProgressSpinner
-        }
-      },
-      props,
-      ...options
-    })
-  }
-
-  describe('Forgot Password Link', () => {
-    it('shows disabled style when email is empty', async () => {
-      const wrapper = mountComponent()
-      await nextTick()
-
-      const forgotPasswordSpan = wrapper.find(
-        'span.text-muted.text-base.font-medium.cursor-pointer'
-      )
-
-      expect(forgotPasswordSpan.classes()).toContain('text-link-disabled')
-    })
-
-    it('shows toast and focuses email input when clicked while disabled', async () => {
-      const wrapper = mountComponent()
-      const forgotPasswordSpan = wrapper.find(
-        'span.text-muted.text-base.font-medium.cursor-pointer'
-      )
-
-      // Mock getElementById to track focus
-      const mockFocus = vi.fn()
-      const mockElement = { focus: mockFocus }
-      vi.spyOn(document, 'getElementById').mockReturnValue(mockElement as any)
-
-      // Click forgot password link while email is empty
-      await forgotPasswordSpan.trigger('click')
-      await nextTick()
-
-      // Should show toast warning
-      expect(mockToastAdd).toHaveBeenCalledWith({
-        severity: 'warn',
-        summary: enMessages.auth.login.emailPlaceholder,
-        life: 5000
-      })
-
-      // Should focus email input
-      expect(document.getElementById).toHaveBeenCalledWith(
-        'comfy-org-sign-in-email'
-      )
-      expect(mockFocus).toHaveBeenCalled()
-
-      // Should NOT call sendPasswordReset
-      expect(mockSendPasswordReset).not.toHaveBeenCalled()
-    })
-
-    it('calls handleForgotPassword with email when link is clicked', async () => {
-      const wrapper = mountComponent()
-      const component = wrapper.vm as any
-
-      // Spy on handleForgotPassword
-      const handleForgotPasswordSpy = vi.spyOn(
-        component,
-        'handleForgotPassword'
-      )
-
-      const forgotPasswordSpan = wrapper.find(
-        'span.text-muted.text-base.font-medium.cursor-pointer'
-      )
-
-      // Click the forgot password link
-      await forgotPasswordSpan.trigger('click')
-
-      // Should call handleForgotPassword
-      expect(handleForgotPasswordSpy).toHaveBeenCalled()
-    })
-  })
-
-  describe('Form Submission', () => {
-    it('emits submit event when onSubmit is called with valid data', async () => {
-      const wrapper = mountComponent()
-      const component = wrapper.vm as any
-
-      // Call onSubmit directly with valid data
-      component.onSubmit({
-        valid: true,
-        values: { email: 'test@example.com', password: 'password123' }
-      })
-
-      // Check emitted event
-      expect(wrapper.emitted('submit')).toBeTruthy()
-      expect(wrapper.emitted('submit')?.[0]).toEqual([
-        {
-          email: 'test@example.com',
-          password: 'password123'
-        }
-      ])
-    })
-
-    it('does not emit submit event when form is invalid', async () => {
-      const wrapper = mountComponent()
-      const component = wrapper.vm as any
-
-      // Call onSubmit with invalid form
-      component.onSubmit({ valid: false, values: {} })
-
-      // Should not emit submit event
-      expect(wrapper.emitted('submit')).toBeFalsy()
-    })
-  })
-
-  describe('Loading State', () => {
-    it('shows spinner when loading', async () => {
-      mockLoading = true
-
-      try {
-        const wrapper = mountComponent()
-        await nextTick()
-
-        expect(wrapper.findComponent(ProgressSpinner).exists()).toBe(true)
-        expect(wrapper.findComponent(Button).exists()).toBe(false)
-      } catch (error) {
-        // Fallback test - check HTML content if component rendering fails
-        mockLoading = true
-        const wrapper = mountComponent()
-        expect(wrapper.html()).toContain('p-progressspinner')
-        expect(wrapper.html()).not.toContain('<button')
-      }
-    })
-
-    it('shows button when not loading', () => {
-      mockLoading = false
-
-      const wrapper = mountComponent()
-
-      expect(wrapper.findComponent(ProgressSpinner).exists()).toBe(false)
-      expect(wrapper.findComponent(Button).exists()).toBe(true)
-    })
-  })
-
-  describe('Component Structure', () => {
-    it('renders email input with correct attributes', () => {
-      const wrapper = mountComponent()
-      const emailInput = wrapper.findComponent(InputText)
-
-      expect(emailInput.attributes('id')).toBe('comfy-org-sign-in-email')
-      expect(emailInput.attributes('autocomplete')).toBe('email')
-      expect(emailInput.attributes('name')).toBe('email')
-      expect(emailInput.attributes('type')).toBe('text')
-    })
-
-    it('renders password input with correct attributes', () => {
-      const wrapper = mountComponent()
-      const passwordInput = wrapper.findComponent(Password)
-
-      // Check props instead of attributes for Password component
-      expect(passwordInput.props('inputId')).toBe('comfy-org-sign-in-password')
-      // Password component passes name as prop, not attribute
-      expect(passwordInput.props('name')).toBe('password')
-      expect(passwordInput.props('feedback')).toBe(false)
-      expect(passwordInput.props('toggleMask')).toBe(true)
-    })
-
-    it('renders form with correct resolver', () => {
-      const wrapper = mountComponent()
-      const form = wrapper.findComponent(Form)
-
-      expect(form.props('resolver')).toBeDefined()
-    })
-  })
-
-  describe('Focus Behavior', () => {
-    it('focuses email input when handleForgotPassword is called with invalid email', async () => {
-      const wrapper = mountComponent()
-      const component = wrapper.vm as any
-
-      // Mock getElementById to track focus
-      const mockFocus = vi.fn()
-      const mockElement = { focus: mockFocus }
-      vi.spyOn(document, 'getElementById').mockReturnValue(mockElement as any)
-
-      // Call handleForgotPassword with no email
-      await component.handleForgotPassword('', false)
-
-      // Should focus email input
-      expect(document.getElementById).toHaveBeenCalledWith(
-        'comfy-org-sign-in-email'
-      )
-      expect(mockFocus).toHaveBeenCalled()
-    })
-
-    it('does not focus email input when valid email is provided', async () => {
-      const wrapper = mountComponent()
-      const component = wrapper.vm as any
-
-      // Mock getElementById
-      const mockFocus = vi.fn()
-      const mockElement = { focus: mockFocus }
-      vi.spyOn(document, 'getElementById').mockReturnValue(mockElement as any)
-
-      // Call handleForgotPassword with valid email
-      await component.handleForgotPassword('test@example.com', true)
-
-      // Should NOT focus email input
-      expect(document.getElementById).not.toHaveBeenCalled()
-      expect(mockFocus).not.toHaveBeenCalled()
-
-      // Should call sendPasswordReset
-      expect(mockSendPasswordReset).toHaveBeenCalledWith('test@example.com')
-    })
-  })
-})

src/components/dialog/content/signin/SignInForm.vue

@@ -7,12 +7,15 @@
   >
     <!-- Email Field -->
     <div class="flex flex-col gap-2">
-      <label class="opacity-80 text-base font-medium mb-2" :for="emailInputId">
+      <label
+        class="opacity-80 text-base font-medium mb-2"
+        for="comfy-org-sign-in-email"
+      >
         {{ t('auth.login.emailLabel') }}
       </label>
       <InputText
-        :id="emailInputId"
-        autocomplete="email"
+        pt:root:id="comfy-org-sign-in-email"
+        pt:root:autocomplete="email"
         class="h-10"
         name="email"
         type="text"
@@ -34,11 +37,8 @@
           {{ t('auth.login.passwordLabel') }}
         </label>
         <span
-          class="text-muted text-base font-medium cursor-pointer select-none"
-          :class="{
-            'text-link-disabled': !$form.email?.value || $form.email?.invalid
-          }"
-          @click="handleForgotPassword($form.email?.value, $form.email?.valid)"
+          class="text-muted text-base font-medium cursor-pointer"
+          @click="handleForgotPassword($form.email?.value)"
         >
           {{ t('auth.login.forgotPassword') }}
         </span>
@@ -77,7 +77,6 @@ import Button from 'primevue/button'
 import InputText from 'primevue/inputtext'
 import Password from 'primevue/password'
 import ProgressSpinner from 'primevue/progressspinner'
-import { useToast } from 'primevue/usetoast'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -88,7 +87,6 @@ import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
 const authStore = useFirebaseAuthStore()
 const firebaseAuthActions = useFirebaseAuthActions()
 const loading = computed(() => authStore.loading)
-const toast = useToast()
 
 const { t } = useI18n()
 
@@ -96,34 +94,14 @@ const emit = defineEmits<{
   submit: [values: SignInData]
 }>()
 
-const emailInputId = 'comfy-org-sign-in-email'
-
 const onSubmit = (event: FormSubmitEvent) => {
   if (event.valid) {
     emit('submit', event.values as SignInData)
   }
 }
 
-const handleForgotPassword = async (
-  email: string,
-  isValid: boolean | undefined
-) => {
-  if (!email || !isValid) {
-    toast.add({
-      severity: 'warn',
-      summary: t('auth.login.emailPlaceholder'),
-      life: 5_000
-    })
-    // Focus the email input
-    document.getElementById(emailInputId)?.focus?.()
-    return
-  }
+const handleForgotPassword = async (email: string) => {
+  if (!email) return
   await firebaseAuthActions.sendPasswordReset(email)
 }
 </script>
-
-<style scoped>
-.text-link-disabled {
-  @apply opacity-50 cursor-not-allowed;
-}
-</style>

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

@@ -36,6 +36,7 @@
       />
       <ResultVideo v-else-if="item.isVideo" :result="item" />
       <ResultAudio v-else-if="item.isAudio" :result="item" />
+      <ResultText v-else-if="item.isText" :result="item" />
     </template>
   </Galleria>
 </template>
@@ -48,12 +49,13 @@ import ComfyImage from '@/components/common/ComfyImage.vue'
 import { ResultItemImpl } from '@/stores/queueStore'
 
 import ResultAudio from './ResultAudio.vue'
+import ResultText from './ResultText.vue'
 import ResultVideo from './ResultVideo.vue'
 
 const galleryVisible = ref(false)
 
 const emit = defineEmits<{
-  (e: 'update:activeIndex', value: number): void
+  'update:activeIndex': [number]
 }>()
 
 const props = defineProps<{

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,81 @@
+<template>
+  <div class="result-text-container">
+    <div class="text-content">
+      {{ 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'
+
+defineProps<{
+  result: ResultItemImpl
+}>()
+
+const { copyToClipboard } = useCopyToClipboard()
+</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);
+  width: 100%;
+  max-height: 100%;
+  max-width: 80vw;
+  overflow-y: auto;
+  line-height: 1.5;
+  padding-right: 0.5rem;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+}
+
+/* Hide scrollbar but keep functionality */
+.text-content::-webkit-scrollbar {
+  width: 0;
+  background: transparent;
+}
+
+.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/extensions/core/load3d.ts

@@ -266,7 +266,7 @@ useExtensionService().registerExtension({
       LOAD_3D_ANIMATION(node) {
         const fileInput = document.createElement('input')
         fileInput.type = 'file'
-        fileInput.accept = '.gltf,.glb,.fbx'
+        fileInput.accept = '.fbx,glb,gltf'
         fileInput.style.display = 'none'
         fileInput.onchange = async () => {
           if (fileInput.files?.length) {
@@ -452,43 +452,31 @@ useExtensionService().registerExtension({
 
     const onExecuted = node.onExecuted
 
-    useLoad3dService().waitForLoad3d(node, (load3d) => {
-      const config = new Load3DConfiguration(load3d)
+    node.onExecuted = function (message: any) {
+      onExecuted?.apply(this, arguments as any)
 
-      const modelWidget = node.widgets?.find((w) => w.name === 'model_file')
+      let filePath = message.result[0]
 
-      if (modelWidget) {
-        const lastTimeModelFile = node.properties['Last Time Model File']
+      if (!filePath) {
+        const msg = t('toastMessages.unableToGetModelFilePath')
+        console.error(msg)
+        useToastStore().addAlert(msg)
+      }
 
-        if (lastTimeModelFile) {
-          modelWidget.value = lastTimeModelFile
+      let cameraState = message.result[1]
 
-          const cameraState = node.properties['Camera Info']
-
-          config.configure('output', modelWidget, cameraState)
-        }
-
-        node.onExecuted = function (message: any) {
-          onExecuted?.apply(this, arguments as any)
-
-          let filePath = message.result[0]
-
-          if (!filePath) {
-            const msg = t('toastMessages.unableToGetModelFilePath')
-            console.error(msg)
-            useToastStore().addAlert(msg)
-          }
-
-          let cameraState = message.result[1]
+      useLoad3dService().waitForLoad3d(node, (load3d) => {
+        const modelWidget = node.widgets?.find((w) => w.name === 'model_file')
 
+        if (modelWidget) {
           modelWidget.value = filePath.replaceAll('\\', '/')
 
-          node.properties['Last Time Model File'] = modelWidget.value
+          const config = new Load3DConfiguration(load3d)
 
           config.configure('output', modelWidget, cameraState)
         }
-      }
-    })
+      })
+    }
   }
 })
 
@@ -538,42 +526,29 @@ useExtensionService().registerExtension({
 
     const onExecuted = node.onExecuted
 
-    useLoad3dService().waitForLoad3d(node, (load3d) => {
-      const config = new Load3DConfiguration(load3d)
+    node.onExecuted = function (message: any) {
+      onExecuted?.apply(this, arguments as any)
 
-      const modelWidget = node.widgets?.find((w) => w.name === 'model_file')
+      let filePath = message.result[0]
 
-      if (modelWidget) {
-        const lastTimeModelFile = node.properties['Last Time Model File']
+      if (!filePath) {
+        const msg = t('toastMessages.unableToGetModelFilePath')
+        console.error(msg)
+        useToastStore().addAlert(msg)
+      }
 
-        if (lastTimeModelFile) {
-          modelWidget.value = lastTimeModelFile
-
-          const cameraState = node.properties['Camera Info']
-
-          config.configure('output', modelWidget, cameraState)
-        }
-
-        node.onExecuted = function (message: any) {
-          onExecuted?.apply(this, arguments as any)
-
-          let filePath = message.result[0]
-
-          if (!filePath) {
-            const msg = t('toastMessages.unableToGetModelFilePath')
-            console.error(msg)
-            useToastStore().addAlert(msg)
-          }
-
-          let cameraState = message.result[1]
+      let cameraState = message.result[1]
 
+      useLoad3dService().waitForLoad3d(node, (load3d) => {
+        const modelWidget = node.widgets?.find((w) => w.name === 'model_file')
+        if (modelWidget) {
           modelWidget.value = filePath.replaceAll('\\', '/')
 
-          node.properties['Last Time Model File'] = modelWidget.value
+          const config = new Load3DConfiguration(load3d)
 
           config.configure('output', modelWidget, cameraState)
         }
-      }
-    })
+      })
+    }
   }
 })

src/extensions/core/load3d/LoaderManager.ts

@@ -132,14 +132,6 @@ export class LoaderManager implements LoaderManagerInterface {
         if (this.modelManager.materialMode === 'original') {
           const mtlUrl = url.replace(/(filename=.*?)\.obj/, '$1.mtl')
 
-          const subfolderMatch = url.match(/[?&]subfolder=([^&]*)/)
-
-          const subfolder = subfolderMatch
-            ? decodeURIComponent(subfolderMatch[1])
-            : '3d'
-
-          this.mtlLoader.setSubfolder(subfolder)
-
           try {
             const materials = await this.mtlLoader.loadAsync(mtlUrl)
             materials.preload()

src/extensions/core/load3d/threejsOverride/OverrideMTLLoader.js

@@ -38,10 +38,6 @@ class OverrideMTLLoader extends Loader {
     this.loadRootFolder = loadRootFolder
   }
 
-  setSubfolder(subfolder) {
-    this.subfolder = subfolder
-  }
-
   /**
    * Starts loading from the given URL and passes the loaded MTL asset
    * to the `onLoad()` callback.
@@ -139,8 +135,7 @@ class OverrideMTLLoader extends Loader {
     const materialCreator = new OverrideMaterialCreator(
       this.resourcePath || path,
       this.materialOptions,
-      this.loadRootFolder,
-      this.subfolder
+      this.loadRootFolder
     )
     materialCreator.setCrossOrigin(this.crossOrigin)
     materialCreator.setManager(this.manager)
@@ -160,7 +155,7 @@ class OverrideMTLLoader extends Loader {
  */
 
 class OverrideMaterialCreator {
-  constructor(baseUrl = '', options = {}, loadRootFolder, subfolder) {
+  constructor(baseUrl = '', options = {}, loadRootFolder) {
     this.baseUrl = baseUrl
     this.options = options
     this.materialsInfo = {}
@@ -169,7 +164,6 @@ class OverrideMaterialCreator {
     this.nameLookup = {}
 
     this.loadRootFolder = loadRootFolder
-    this.subfolder = subfolder
 
     this.crossOrigin = 'anonymous'
 
@@ -289,25 +283,16 @@ class OverrideMaterialCreator {
     /**
      * Override for ComfyUI api url
      */
-    function resolveURL(baseUrl, url, loadRootFolder, subfolder) {
+    function resolveURL(baseUrl, url, loadRootFolder) {
       if (typeof url !== 'string' || url === '') return ''
 
-      if (baseUrl.endsWith('/')) {
-        baseUrl = baseUrl.slice(0, -1)
-      }
-
-      if (!baseUrl.endsWith('api')) {
-        baseUrl = '/api'
-      }
-
       baseUrl =
         baseUrl +
         '/view?filename=' +
         url +
         '&type=' +
         loadRootFolder +
-        '&subfolder=' +
-        subfolder
+        '&subfolder=3d'
 
       return baseUrl
     }
@@ -317,12 +302,7 @@ class OverrideMaterialCreator {
 
       const texParams = scope.getTextureParams(value, params)
       const map = scope.loadTexture(
-        resolveURL(
-          scope.baseUrl,
-          texParams.url,
-          scope.loadRootFolder,
-          scope.subfolder
-        )
+        resolveURL(scope.baseUrl, texParams.url, scope.loadRootFolder)
       )
 
       map.repeat.copy(texParams.scale)

src/locales/es/nodeDefs.json

@@ -3403,7 +3403,7 @@
       "clear": {
       },
       "height": {
-        "name": "alto"
+        "name": "altura"
       },
       "image": {
         "name": "imagen"
@@ -3417,26 +3417,20 @@
         "name": "ancho"
       }
     },
-    "outputs": {
-      "0": {
-        "name": "imagen"
-      },
-      "1": {
-        "name": "mask"
-      },
-      "2": {
-        "name": "ruta_malla"
-      },
-      "3": {
+    "outputs": [
+      null,
+      null,
+      null,
+      {
         "name": "normal"
       },
-      "4": {
+      {
         "name": "lineart"
       },
-      "5": {
-        "name": "info_cámara"
+      {
+        "name": "camera_info"
       }
-    }
+    ]
   },
   "Load3DAnimation": {
     "display_name": "Cargar 3D - Animación",
@@ -3444,7 +3438,7 @@
       "clear": {
       },
       "height": {
-        "name": "alto"
+        "name": "altura"
       },
       "image": {
         "name": "imagen"
@@ -3458,23 +3452,17 @@
         "name": "ancho"
       }
     },
-    "outputs": {
-      "0": {
-        "name": "imagen"
-      },
-      "1": {
-        "name": "mask"
-      },
-      "2": {
-        "name": "ruta_malla"
-      },
-      "3": {
+    "outputs": [
+      null,
+      null,
+      null,
+      {
         "name": "normal"
       },
-      "4": {
-        "name": "info_cámara"
+      {
+        "name": "camera_info"
       }
-    }
+    ]
   },
   "LoadAudio": {
     "display_name": "CargarAudio",

src/locales/fr/nodeDefs.json

@@ -3417,26 +3417,20 @@
         "name": "largeur"
       }
     },
-    "outputs": {
-      "0": {
-        "name": "image"
-      },
-      "1": {
-        "name": "masque"
-      },
-      "2": {
-        "name": "chemin_maillage"
-      },
-      "3": {
+    "outputs": [
+      null,
+      null,
+      null,
+      {
         "name": "normale"
       },
-      "4": {
-        "name": "lineart"
+      {
+        "name": "ligne artistique"
       },
-      "5": {
-        "name": "info_caméra"
+      {
+        "name": "informations caméra"
       }
-    }
+    ]
   },
   "Load3DAnimation": {
     "display_name": "Charger 3D - Animation",
@@ -3458,23 +3452,17 @@
         "name": "largeur"
       }
     },
-    "outputs": {
-      "0": {
-        "name": "image"
+    "outputs": [
+      null,
+      null,
+      null,
+      {
+        "name": "normal"
       },
-      "1": {
-        "name": "masque"
-      },
-      "2": {
-        "name": "chemin_maillage"
-      },
-      "3": {
-        "name": "normale"
-      },
-      "4": {
-        "name": "info_caméra"
+      {
+        "name": "camera_info"
       }
-    }
+    ]
   },
   "LoadAudio": {
     "display_name": "ChargerAudio",

src/locales/ja/nodeDefs.json

@@ -3417,29 +3417,23 @@
         "name": "幅"
       }
     },
-    "outputs": {
-      "0": {
-        "name": "画像"
-      },
-      "1": {
-        "name": "マスク"
-      },
-      "2": {
-        "name": "メッシュパス"
-      },
-      "3": {
+    "outputs": [
+      null,
+      null,
+      null,
+      {
         "name": "法線"
       },
-      "4": {
+      {
         "name": "線画"
       },
-      "5": {
+      {
         "name": "カメラ情報"
       }
-    }
+    ]
   },
   "Load3DAnimation": {
-    "display_name": "3D読み込み - アニメーション",
+    "display_name": "3Dを読み込む - アニメーション",
     "inputs": {
       "clear": {
       },
@@ -3458,23 +3452,17 @@
         "name": "幅"
       }
     },
-    "outputs": {
-      "0": {
-        "name": "画像"
-      },
-      "1": {
-        "name": "マスク"
-      },
-      "2": {
-        "name": "メッシュパス"
-      },
-      "3": {
+    "outputs": [
+      null,
+      null,
+      null,
+      {
         "name": "法線"
       },
-      "4": {
+      {
         "name": "カメラ情報"
       }
-    }
+    ]
   },
   "LoadAudio": {
     "display_name": "音声を読み込む",

src/locales/ko/nodeDefs.json

@@ -3398,7 +3398,7 @@
     }
   },
   "Load3D": {
-    "display_name": "3D 불러오기",
+    "display_name": "3D 로드",
     "inputs": {
       "clear": {
       },
@@ -3417,29 +3417,23 @@
         "name": "너비"
       }
     },
-    "outputs": {
-      "0": {
-        "name": "이미지"
-      },
-      "1": {
-        "name": "마스크"
-      },
-      "2": {
-        "name": "메시 경로"
-      },
-      "3": {
+    "outputs": [
+      null,
+      null,
+      null,
+      {
         "name": "노멀"
       },
-      "4": {
+      {
         "name": "라인아트"
       },
-      "5": {
+      {
         "name": "카메라 정보"
       }
-    }
+    ]
   },
   "Load3DAnimation": {
-    "display_name": "3D 불러오기 - 애니메이션",
+    "display_name": "3D 로드 - 애니메이션",
     "inputs": {
       "clear": {
       },
@@ -3458,23 +3452,17 @@
         "name": "너비"
       }
     },
-    "outputs": {
-      "0": {
-        "name": "이미지"
-      },
-      "1": {
-        "name": "마스크"
-      },
-      "2": {
-        "name": "메시 경로"
-      },
-      "3": {
+    "outputs": [
+      null,
+      null,
+      null,
+      {
         "name": "노멀"
       },
-      "4": {
+      {
         "name": "카메라 정보"
       }
-    }
+    ]
   },
   "LoadAudio": {
     "display_name": "오디오 로드",

src/locales/ru/nodeDefs.json

@@ -3409,7 +3409,7 @@
         "name": "изображение"
       },
       "model_file": {
-        "name": "файл модели"
+        "name": "файл_модели"
       },
       "upload 3d model": {
       },
@@ -3417,29 +3417,23 @@
         "name": "ширина"
       }
     },
-    "outputs": {
-      "0": {
-        "name": "изображение"
-      },
-      "1": {
-        "name": "mask"
-      },
-      "2": {
-        "name": "путь к mesh"
-      },
-      "3": {
+    "outputs": [
+      null,
+      null,
+      null,
+      {
         "name": "нормаль"
       },
-      "4": {
-        "name": "линейный рисунок"
+      {
+        "name": "линеарт"
       },
-      "5": {
-        "name": "информация о камере"
+      {
+        "name": "информация_камеры"
       }
-    }
+    ]
   },
   "Load3DAnimation": {
-    "display_name": "Загрузить 3D - Анимация",
+    "display_name": "Загрузить 3D — Анимация",
     "inputs": {
       "clear": {
       },
@@ -3458,23 +3452,17 @@
         "name": "ширина"
       }
     },
-    "outputs": {
-      "0": {
-        "name": "изображение"
-      },
-      "1": {
-        "name": "mask"
-      },
-      "2": {
-        "name": "путь_к_модели"
-      },
-      "3": {
+    "outputs": [
+      null,
+      null,
+      null,
+      {
         "name": "нормаль"
       },
-      "4": {
-        "name": "информация_о_камере"
+      {
+        "name": "информация_камеры"
       }
-    }
+    ]
   },
   "LoadAudio": {
     "display_name": "Загрузить аудио",

src/locales/zh/nodeDefs.json

@@ -3417,26 +3417,20 @@
         "name": "宽度"
       }
     },
-    "outputs": {
-      "0": {
-        "name": "image"
+    "outputs": [
+      null,
+      null,
+      null,
+      {
+        "name": "法线"
       },
-      "1": {
-        "name": "mask"
+      {
+        "name": "线稿"
       },
-      "2": {
-        "name": "mesh_path"
-      },
-      "3": {
-        "name": "normal"
-      },
-      "4": {
-        "name": "lineart"
-      },
-      "5": {
-        "name": "camera_info"
+      {
+        "name": "相机信息"
       }
-    }
+    ]
   },
   "Load3DAnimation": {
     "display_name": "加载3D动画",
@@ -3458,23 +3452,17 @@
         "name": "宽度"
       }
     },
-    "outputs": {
-      "0": {
-        "name": "图像"
-      },
-      "1": {
-        "name": "遮罩"
-      },
-      "2": {
-        "name": "mesh_path"
-      },
-      "3": {
+    "outputs": [
+      null,
+      null,
+      null,
+      {
         "name": "法线"
       },
-      "4": {
+      {
         "name": "相机信息"
       }
-    }
+    ]
   },
   "LoadAudio": {
     "display_name": "加载音频",

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/scripts/app.ts

@@ -1074,11 +1074,11 @@ export class ComfyApp {
     try {
       // @ts-expect-error Discrepancies between zod and litegraph - in progress
       this.graph.configure(graphData)
-      if (
-        restore_view &&
-        useSettingStore().get('Comfy.EnableWorkflowViewRestore')
-      ) {
-        if (graphData.extra?.ds) {
+      if (restore_view) {
+        if (
+          useSettingStore().get('Comfy.EnableWorkflowViewRestore') &&
+          graphData.extra?.ds
+        ) {
           this.canvas.ds.offset = graphData.extra.ds.offset
           this.canvas.ds.scale = graphData.extra.ds.scale
         } else {

src/scripts/changeTracker.ts

@@ -32,7 +32,7 @@ export class ChangeTracker {
   /**
    * Whether the redo/undo restoring is in progress.
    */
-  _restoringState: boolean = false
+  private restoringState: boolean = false
 
   ds?: { scale: number; offset: [number, number] }
   nodeOutputs?: Record<string, any>
@@ -55,7 +55,7 @@ export class ChangeTracker {
    */
   reset(state?: ComfyWorkflowJSON) {
     // Do not reset the state if we are restoring.
-    if (this._restoringState) return
+    if (this.restoringState) return
 
     logger.debug('Reset State')
     if (state) this.activeState = clone(state)
@@ -124,7 +124,7 @@ export class ChangeTracker {
     const prevState = source.pop()
     if (prevState) {
       target.push(this.activeState)
-      this._restoringState = true
+      this.restoringState = true
       try {
         await app.loadGraphData(prevState, false, false, this.workflow, {
           showMissingModelsDialog: false,
@@ -134,7 +134,7 @@ export class ChangeTracker {
         this.activeState = prevState
         this.updateModified()
       } finally {
-        this._restoringState = false
+        this.restoringState = false
       }
     }
   }

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
@@ -193,8 +195,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
   }
 }
 
@@ -233,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
             })
-        )
+          }
+        })
       )
     )
   }

src/stores/workflowStore.ts

@@ -23,7 +23,7 @@ export class ComfyWorkflow extends UserFile {
   /**
    * Whether the workflow has been modified comparing to the initial state.
    */
-  _isModified: boolean = false
+  private _isModified: boolean = false
 
   /**
    * @param options The path, modified, and size of the workflow.
@@ -131,7 +131,7 @@ export interface WorkflowStore {
   activeWorkflow: LoadedComfyWorkflow | null
   isActive: (workflow: ComfyWorkflow) => boolean
   openWorkflows: ComfyWorkflow[]
-  openedWorkflowIndexShift: (shift: number) => ComfyWorkflow | null
+  openedWorkflowIndexShift: (shift: number) => LoadedComfyWorkflow | null
   openWorkflow: (workflow: ComfyWorkflow) => Promise<LoadedComfyWorkflow>
   openWorkflowsInBackground: (paths: {
     left?: string[]
@@ -477,7 +477,7 @@ export const useWorkflowStore = defineStore('workflow', () => {
     isSubgraphActive,
     updateActiveGraph
   }
-}) satisfies () => WorkflowStore
+}) as () => WorkflowStore
 
 export const useWorkflowBookmarkStore = defineStore('workflowBookmark', () => {
   const bookmarks = ref<Set<string>>(new Set())

vite.config.mts

@@ -8,7 +8,11 @@ import { createHtmlPlugin } from 'vite-plugin-html'
 import vueDevTools from 'vite-plugin-vue-devtools'
 import type { UserConfigExport } from 'vitest/config'
 
-import { comfyAPIPlugin, generateImportMapPlugin } from './build/plugins'
+import {
+  addElementVnodeExportPlugin,
+  comfyAPIPlugin,
+  generateImportMapPlugin
+} from './build/plugins'
 
 dotenv.config()
 
@@ -73,40 +77,11 @@ export default defineConfig({
       : [vue()]),
     comfyAPIPlugin(IS_DEV),
     generateImportMapPlugin([
-      {
-        name: 'vue',
-        pattern: 'vue',
-        entry: './dist/vue.esm-browser.prod.js'
-      },
-      {
-        name: 'vue-i18n',
-        pattern: 'vue-i18n',
-        entry: './dist/vue-i18n.esm-browser.prod.js'
-      },
-      {
-        name: 'primevue',
-        pattern: /^primevue\/?.*/,
-        entry: './index.mjs',
-        recursiveDependence: true
-      },
-      {
-        name: '@primevue/themes',
-        pattern: /^@primevue\/themes\/?.*/,
-        entry: './index.mjs',
-        recursiveDependence: true
-      },
-      {
-        name: '@primevue/forms',
-        pattern: /^@primevue\/forms\/?.*/,
-        entry: './index.mjs',
-        recursiveDependence: true,
-        override: {
-          '@primeuix/forms': {
-            entry: ''
-          }
-        }
-      }
+      { name: 'vue', pattern: /[\\/]node_modules[\\/]vue[\\/]/ },
+      { name: 'primevue', pattern: /[\\/]node_modules[\\/]primevue[\\/]/ },
+      { name: 'vue-i18n', pattern: /[\\/]node_modules[\\/]vue-i18n[\\/]/ }
     ]),
+    addElementVnodeExportPlugin(),
 
     Icons({
       compiler: 'vue3'