fix: replace non-standard SVG MIME type with image/svg+xml #2410

AkhmetovOlzhass · 2025-12-09T06:52:38Z

User description

Summary

Fixes #2402

Replaces the non-standard MIME type "image/svg" with the correct
"image/svg+xml" across the project.

Changes

Updated SVG MIME type in:
- use-generation-executor.ts
- file-panel.tsx
- file-node-properties-panel/index.tsx

Testing

Verified that the correct MIME type is now used across all components.

PR Type

Bug fix

Description

Replace non-standard "image/svg" MIME type with correct "image/svg+xml"
Update SVG MIME type in generation executor, file panel, and file node properties
Ensure consistent and standards-compliant MIME type usage across components

Diagram Walkthrough

flowchart LR
  A["Non-standard MIME type<br/>image/svg"] -->|"Replace with"| B["Standard MIME type<br/>image/svg+xml"]
  B --> C["use-generation-executor.ts"]
  B --> D["file-panel.tsx"]
  B --> E["file-node-properties-panel/index.tsx"]

File Walkthrough

Relevant files

Bug fix

use-generation-executor.ts `Update SVG MIME type in generation executor` packages/giselle/src/generations/internal/use-generation-executor.ts Updated SVG MIME type from "image/svg" to "image/svg+xml" in switch case statement Affects image blob handling in generation executor	+1/-1
file-panel.tsx `Update SVG MIME type in file panel error handling` internal-packages/workflow-designer-ui/src/editor/properties-panel/file-node-properties-panel/file-panel.tsx Updated SVG MIME type from "image/svg" to "image/svg+xml" in error message switch case Ensures correct error messaging for image file uploads	+1/-1
index.tsx `Update SVG MIME type in file type configuration` internal-packages/workflow-designer-ui/src/editor/properties-panel/file-node-properties-panel/index.tsx Updated SVG MIME type from "image/svg" to "image/svg+xml" in file type configuration Affects accepted file types for image category	+1/-1

Summary by CodeRabbit

Bug Fixes
- Tightened MIME-type validation to require exact matches, and standardized SVG handling to the image/svg+xml MIME type. This improves file upload and image-processing accuracy by ensuring SVG files are consistently recognized and invalid types trigger clearer validation.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

changeset-bot · 2025-12-09T06:52:42Z

⚠️ No Changeset found

Latest commit: 09cb650

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

💥 An error occurred when fetching the changed packages and changesets in this PR

Some errors occurred when validating the changesets config:
The package or glob expression "giselles-ai" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.

giselles-ai · 2025-12-09T06:52:44Z

Finished running flow.

Step 1
🟢	On Pull Request Opened Status: Success Updated: Dec 9, 2025 6:52am
Step 2
🟢	Manual QA Status: Success Updated: Dec 9, 2025 6:54am
🟢	Prompt for AI Agents Status: Success Updated: Dec 9, 2025 6:54am
Step 3
🟢	Create a Comment for PR Status: Success Updated: Dec 9, 2025 6:57am
Step 4
🟢	Create Pull Request Comment Status: Success Updated: Dec 9, 2025 6:57am

vercel · 2025-12-09T06:52:44Z

@AkhmetovOlzhass is attempting to deploy a commit to the Giselle Team on Vercel.

A member of the Team first needs to authorize it.

coderabbitai · 2025-12-09T06:52:51Z

Walkthrough

Tightened SVG MIME handling: replaced non-standard image/svg with image/svg+xml, and changed regex MIME/type checks to strict equality in file validation and assertions, updating error suggestion text accordingly across UI and generation executor code.

Changes

Cohort / File(s)	Summary
Workflow Designer UI – file validation & message `internal-packages/workflow-designer-ui/src/editor/properties-panel/file-node-properties-panel/file-panel.tsx`, `internal-packages/workflow-designer-ui/src/editor/properties-panel/file-node-properties-panel/index.tsx`	Replaced regex-based MIME/type checks with strict equality comparisons in drag validation (`validateItems`) and file assertions (`assertFiles`); expanded `InvalidFileTypeError.suggestion` to reference `image/svg+xml` instead of `image/svg`.
Generation Executor – image MIME handling `packages/giselle/src/generations/internal/use-generation-executor.ts`	Replaced `image/svg` with `image/svg+xml` in image content resolution and file-parameter handling paths (ImagePart construction). No other control-flow changes.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Review validation logic changes in file-panel.tsx to confirm strict equality matches desired accepted types and that no legitimate files are rejected.
Verify InvalidFileTypeError.suggestion wording and any tests/messages expecting previous regex behavior.
Check use-generation-executor.ts image path to ensure SVG handling remains correct for downstream image processing and any consumers expecting image/svg.
Run or update unit/integration tests around file uploads and image parameter handling.

Poem

🐰 I hop through code, a careful chap,
Swapping strings in a tiny map,
From image/svg to image/svg+xml I leap,
Tightened checks now vigilantly keep,
Little changes, big-picture nap. 🥕

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title clearly and accurately describes the main change: replacing the non-standard 'image/svg' MIME type with the standard 'image/svg+xml'.
Description check	✅ Passed	The PR description comprehensively covers all required template sections: Summary with issue reference, detailed Changes list, Testing verification, and includes helpful diagrams and file walkthroughs.
Linked Issues check	✅ Passed	All changes in the PR directly address issue #2402 by replacing non-standard 'image/svg' with standard 'image/svg+xml' MIME type in three identified files (use-generation-executor.ts, file-panel.tsx, index.tsx).
Out of Scope Changes check	✅ Passed	All code changes are directly related to the linked issue #2402; no out-of-scope modifications to unrelated functionality or files are present.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 32afbac and 09cb650.

📒 Files selected for processing (1)

internal-packages/workflow-designer-ui/src/editor/properties-panel/file-node-properties-panel/file-panel.tsx (3 hunks)

🧰 Additional context used

📓 Path-based instructions (8)

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.{ts,tsx,js,jsx}: Favor clear, descriptive names and type annotations over clever tricks
If you need a multi-paragraph comment, refactor until intent is obvious

**/*.{ts,tsx,js,jsx}: Use async/await and proper error handling
Variables and functions should use camelCase naming
Booleans and functions should use is, has, can, should prefixes
Function names should clearly indicate purpose

Files:

internal-packages/workflow-designer-ui/src/editor/properties-panel/file-node-properties-panel/file-panel.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/development-guide.mdc)

**/*.{ts,tsx}: MUST run pnpm biome check --write [filename] after EVERY code modification
All code changes must be formatted using Biome before being committed
Use Biome for formatting with tab indentation and double quotes
Follow organized imports pattern (enabled in biome.json)
Use TypeScript for type safety; avoid any types
Use Next.js patterns for web applications
Use async/await for asynchronous code rather than promises
Error handling: use try/catch blocks and propagate errors appropriately
Use kebab-case for all filenames
Use PascalCase for React components and classes
Use camelCase for variables, functions, and methods
Use prefixes like is, has, can, should for boolean variables (e.g., isEnabled, hasPermission)
Use prefixes like is, has, can, should for boolean functions (e.g., isTriggerRequiringCallsign(), hasActiveSubscription()) instead of imperative verbs
Use verbs or verb phrases for function naming that clearly indicate purpose (e.g., calculateTotalPrice(), not process())

Use PascalCase for React component and class names

Use TypeScript and avoid any

Files:

internal-packages/workflow-designer-ui/src/editor/properties-panel/file-node-properties-panel/file-panel.tsx

**/*.tsx

📄 CodeRabbit inference engine (.cursor/rules/development-guide.mdc)

Use functional components with React hooks

Files:

internal-packages/workflow-designer-ui/src/editor/properties-panel/file-node-properties-panel/file-panel.tsx

**/*.{js,ts,tsx,jsx,py,java,cs,cpp,c,go,rb,php,swift,kt,scala,rs,dart}

📄 CodeRabbit inference engine (.cursor/rules/language-support.mdc)

Write all code comments in English

Files:

internal-packages/workflow-designer-ui/src/editor/properties-panel/file-node-properties-panel/file-panel.tsx

**/*

📄 CodeRabbit inference engine (.cursor/rules/naming-guide.mdc)

Use kebab-case for file names (e.g., user-profile.ts, api-client.tsx)

Files:

internal-packages/workflow-designer-ui/src/editor/properties-panel/file-node-properties-panel/file-panel.tsx

**/*.{js,ts,jsx,tsx}

📄 CodeRabbit inference engine (.cursor/rules/naming-guide.mdc)

**/*.{js,ts,jsx,tsx}: Use camelCase for variable names, functions, and methods
Use verbs or verb phrases for function names to clearly indicate what the function does (e.g., calculateTotalPrice(), validateUserInput())
Use nouns or noun phrases for variable names to describe what the variable represents
Use boolean prefixes (is, has, can, should) for boolean variables and functions returning boolean values (e.g., isEnabled, hasPermission, isTriggerRequiringCallsign())

**/*.{js,ts,jsx,tsx}: Run pnpm biome check --write [filename] after every code change
All code must be formatted with Biome before commit

Files:

internal-packages/workflow-designer-ui/src/editor/properties-panel/file-node-properties-panel/file-panel.tsx

**/*.{ts,tsx,js,jsx,css}

📄 CodeRabbit inference engine (AGENTS.md)

Files should use kebab-case naming

Files:

internal-packages/workflow-designer-ui/src/editor/properties-panel/file-node-properties-panel/file-panel.tsx

**/*.{tsx,ts}

📄 CodeRabbit inference engine (AGENTS.md)

Components should use PascalCase naming

Files:

internal-packages/workflow-designer-ui/src/editor/properties-panel/file-node-properties-panel/file-panel.tsx

🧠 Learnings (11)

📓 Common learnings

Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/edit-workspace-tour.mdc:0-0
Timestamp: 2025-11-25T03:05:31.051Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/workspace-tour/assets/** : Replace GIFs and images in the `assets/` directory and update imports and references in `workspace-tour.tsx`

📚 Learning: 2025-11-25T03:07:19.740Z

Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/new-editor/AGENTS.md:0-0
Timestamp: 2025-11-25T03:07:19.740Z
Learning: Applies to internal-packages/workflow-designer-ui/src/new-editor/**/*.{ts,tsx} : Use shallow equality for arrays and objects in selectors to avoid false-positive updates

Applied to files:

internal-packages/workflow-designer-ui/src/editor/properties-panel/file-node-properties-panel/file-panel.tsx

📚 Learning: 2025-11-25T03:07:19.740Z

Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/new-editor/AGENTS.md:0-0
Timestamp: 2025-11-25T03:07:19.740Z
Learning: Applies to internal-packages/workflow-designer-ui/src/new-editor/components/node/**/*.{ts,tsx} : In Node component, select exactly the node data, derived connection ids, and UI flags needed, providing a custom equality function that combines strict equality for references with `shallow` for arrays

Applied to files:

internal-packages/workflow-designer-ui/src/editor/properties-panel/file-node-properties-panel/file-panel.tsx

📚 Learning: 2025-11-25T03:07:19.740Z

Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/new-editor/AGENTS.md:0-0
Timestamp: 2025-11-25T03:07:19.740Z
Learning: Applies to internal-packages/workflow-designer-ui/src/new-editor/**/*.{ts,tsx} : Keep derivations simple and stable in selectors; maintain ordering when mapping to arrays so equality checks can short-circuit

Applied to files:

internal-packages/workflow-designer-ui/src/editor/properties-panel/file-node-properties-panel/file-panel.tsx

📚 Learning: 2025-11-25T03:05:31.051Z

Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/edit-workspace-tour.mdc:0-0
Timestamp: 2025-11-25T03:05:31.051Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/workspace-tour/assets/** : Replace GIFs and images in the `assets/` directory and update imports and references in `workspace-tour.tsx`

Applied to files:

internal-packages/workflow-designer-ui/src/editor/properties-panel/file-node-properties-panel/file-panel.tsx

📚 Learning: 2025-11-25T03:07:19.740Z

Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/new-editor/AGENTS.md:0-0
Timestamp: 2025-11-25T03:07:19.740Z
Learning: Applies to internal-packages/workflow-designer-ui/src/new-editor/**/*.{ts,tsx} : In selectors, avoid selecting full state; select by id (e.g., `s.nodesById[id]`) and derive small, stable shapes

Applied to files:

internal-packages/workflow-designer-ui/src/editor/properties-panel/file-node-properties-panel/file-panel.tsx

📚 Learning: 2025-05-29T01:36:42.353Z

Learnt from: satococoa
Repo: giselles-ai/giselle PR: 981
File: internal-packages/workflow-designer-ui/src/editor/properties-panel/image-generation-node-properties-panel/sources/use-connected-sources.ts:0-0
Timestamp: 2025-05-29T01:36:42.353Z
Learning: In the image generation node properties panel source handling, file, github, and vectorStore variable node types should be supported by adding them to the switch statement in use-connected-sources.ts, similar to how text nodes are handled, to prevent breaking existing connector flows.

Applied to files:

internal-packages/workflow-designer-ui/src/editor/properties-panel/file-node-properties-panel/file-panel.tsx

📚 Learning: 2025-11-25T03:07:19.740Z

Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/new-editor/AGENTS.md:0-0
Timestamp: 2025-11-25T03:07:19.740Z
Learning: Applies to internal-packages/workflow-designer-ui/src/new-editor/**/*.{ts,tsx} : Avoid new object/array creation in selectors unless using an equality function that treats them as equal when unchanged

Applied to files:

internal-packages/workflow-designer-ui/src/editor/properties-panel/file-node-properties-panel/file-panel.tsx

📚 Learning: 2025-11-25T03:07:19.740Z

Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/new-editor/AGENTS.md:0-0
Timestamp: 2025-11-25T03:07:19.740Z
Learning: Applies to internal-packages/workflow-designer-ui/src/new-editor/**/*.{ts,tsx} : Use `updateNode(id, patch)` to patch a single node in `nodesById` without touching other nodes

Applied to files:

internal-packages/workflow-designer-ui/src/editor/properties-panel/file-node-properties-panel/file-panel.tsx

📚 Learning: 2025-11-25T03:05:31.051Z

Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/edit-workspace-tour.mdc:0-0
Timestamp: 2025-11-25T03:05:31.051Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/workspace-tour/workspace-tour.tsx : Import new images at the top of `workspace-tour.tsx` and update the `imageSrc` prop in the appropriate step component to use the new image

Applied to files:

internal-packages/workflow-designer-ui/src/editor/properties-panel/file-node-properties-panel/file-panel.tsx

📚 Learning: 2025-11-25T03:07:07.498Z

Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/AGENTS.md:0-0
Timestamp: 2025-11-25T03:07:07.498Z
Learning: Applies to internal-packages/workflow-designer-ui/src/editor/properties-panel/trigger-node-properties-panel/providers/github-trigger/**/*.tsx : Validate that callsign input is non-empty before allowing submission in the `input-callsign` step.

Applied to files:

internal-packages/workflow-designer-ui/src/editor/properties-panel/file-node-properties-panel/file-panel.tsx

🔇 Additional comments (2)

internal-packages/workflow-designer-ui/src/editor/properties-panel/file-node-properties-panel/file-panel.tsx (2)

53-53: LGTM! Correct SVG MIME type.

The update to image/svg+xml correctly implements the PR objective and aligns with the standard MIME type for SVG files.

134-136: Good simplification from regex to exact equality.

The change from regex-based matching to exact equality is cleaner and more appropriate for MIME type validation. This approach also avoids potential issues with special characters in MIME types (e.g., the + in image/svg+xml).

Ensure that config.accept contains exact MIME type strings and that all expected file types validate correctly with the direct equality comparison.

Also applies to: 159-161

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

qodo-free-for-open-source-projects · 2025-12-09T06:52:58Z

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance

🟢

No security concerns identified

No security vulnerabilities detected by AI analysis. Human verification advised for critical code.

Ticket Compliance

🟢

🎫 #2402

🟢	Replace the non-standard MIME type "image/svg" with the correct standard MIME type "image/svg+xml"
	Update the MIME type in the switch case statement at line 491 in use-generation-executor.ts
	Ensure SVG images are properly handled with the correct MIME type

Codebase Duplication Compliance

⚪

Codebase context is not defined

Follow the guide to enable codebase context checks.

Custom Compliance

🟢

Generic: Comprehensive Audit Trails

Objective: To create a detailed and reliable record of critical system actions for security analysis
and compliance.

Status: Passed

Learn more about managing compliance generic rules or creating your own custom rules

Generic: Meaningful Naming and Self-Documenting Code

Objective: Ensure all identifiers clearly express their purpose and intent, making code
self-documenting

Status: Passed

Learn more about managing compliance generic rules or creating your own custom rules

Generic: Robust Error Handling and Edge Case Management

Objective: Ensure comprehensive error handling that provides meaningful context and graceful
degradation

Status: Passed

Learn more about managing compliance generic rules or creating your own custom rules

Generic: Secure Error Handling

Objective: To prevent the leakage of sensitive system information through error messages while
providing sufficient detail for internal debugging.

Status: Passed

Learn more about managing compliance generic rules or creating your own custom rules

Generic: Secure Logging Practices

Objective: To ensure logs are useful for debugging and auditing without exposing sensitive
information like PII, PHI, or cardholder data.

Status: Passed

Learn more about managing compliance generic rules or creating your own custom rules

Generic: Security-First Input Validation and Data Handling

Objective: Ensure all data inputs are validated, sanitized, and handled securely to prevent
vulnerabilities

Status: Passed

Learn more about managing compliance generic rules or creating your own custom rules

Update

Compliance status legend

🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label

qodo-free-for-open-source-projects · 2025-12-09T06:53:53Z

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Support both standard and non-standard SVG MIME types Add back the `case "image/svg":` to the switch statement to support both the standard (`image/svg+xml`) and non-standard (`image/svg`) MIME types for SVG files, ensuring broader compatibility. internal-packages/workflow-designer-ui/src/editor/properties-panel/file-node-properties-panel/file-panel.tsx [50-54] case "image/jpeg": case "image/png": case "image/gif": case "image/svg+xml": +case "image/svg": return "Please use Image node to upload this file."; Apply / Chat Suggestion importance[1-10]: 7 __ Why: The suggestion correctly identifies a potential regression by removing support for the `image/svg` MIME type, and proposes adding it back to ensure broader compatibility with systems that may not use the standard `image/svg+xml`.	Medium
Update

vercel · 2025-12-09T06:54:25Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
giselle	Ready	Preview	Comment	Dec 9, 2025 6:58am
ui	Ready	Preview	Comment	Dec 9, 2025 6:58am

giselles-ai · 2025-12-09T06:57:26Z

🔍 QA Testing Assistant by Giselle

📋 Manual QA Checklist

Based on the changes in this PR, here are the key areas to test manually:

Image Node: Upload an SVG file to the Image node. Expected: Successful upload.
File Node: Attempt to upload an SVG file to a generic File node. Expected: Error message "Please use Image node to upload this file."
Image Node Regression: Upload a PNG file to the Image node. Expected: Successful upload.
File Node Regression: Attempt to upload a PNG file to a generic File node. Expected: Error message "Please use Image node to upload this file."

✨ Prompt for AI Agents

Use the following prompts with Cursor or Claude Code to automate E2E testing:

📝 E2E Test Generation Prompt


### **Prompt for AI Agent: Create E2E Tests for SVG MIME Type Fix**

You are an expert QA engineer tasked with writing automated E2E tests using Playwright. Your goal is to validate the changes from a recent Pull Request that corrected the MIME type for SVG files from a non-standard `image/svg` to the standard `image/svg+xml`.

Analyze the context and instructions below to generate a complete, CI-ready Playwright test file.

### 1. Context Summary

*   **PR Change:** The core change is a string replacement of the SVG MIME type from `image/svg` to the correct `image/svg+xml`. This fix was applied in three places: an image generation hook, a file upload panel, and a file properties panel.
*   **User Flow:** The primary user flow affected is file uploading within a "Workflow Designer" UI. In this UI, users can add different types of nodes (e.g., "Image Node", "File Node") to a canvas and configure them in a properties panel. The change ensures that SVG files are correctly identified and handled by the appropriate nodes.
*   **Critical Paths:**
    1.  **Successful Upload:** An SVG file with the `image/svg+xml` MIME type must be successfully uploaded to an "Image Node".
    2.  **Failed Upload (Correct Error):** An SVG file with the `image/svg+xml` MIME type must be rejected when uploaded to a generic "File Node", displaying a specific error message.
    3.  **Regression:** Uploading other valid image types (like PNG, JPG) to the "Image Node" must continue to work as expected.

### 2. Test Scenarios

Create Playwright tests for the following scenarios. Assume a baseline state where the user is on the main workflow designer page.

*   **Test Scenario 1: Happy Path - SVG Upload to Image Node**
    *   **Goal:** Verify that an "Image Node" correctly accepts an SVG file with the standard `image/svg+xml` MIME type.
    *   **Steps:**
        1.  Start with a clean workflow canvas.
        2.  Drag an "Image Node" onto the canvas.
        3.  Select the "Image Node" to open its properties panel.
        4.  Simulate uploading an SVG file with MIME type `image/svg+xml`.
    *   **Expected Result:** The upload succeeds. No error message is shown. An image preview element becomes visible within the properties panel.

*   **Test Scenario 2: Negative Path - SVG Upload to Generic File Node**
    *   **Goal:** Verify that a generic "File Node" correctly rejects an SVG file and provides the user with the correct guidance.
    *   **Steps:**
        1.  Start with a clean workflow canvas.
        2.  Drag a "File Node" onto the canvas.
        3.  Select the "File Node" to open its properties panel.
        4.  Simulate uploading the same SVG file with MIME type `image/svg+xml`.
    *   **Expected Result:** The upload fails. An error message with the exact text "Please use Image node to upload this file." is displayed.

*   **Test Scenario 3: Regression - PNG Upload to Image Node**
    *   **Goal:** Ensure that existing functionality for other image types is not broken.
    *   **Steps:**
        1.  Start with a clean workflow canvas.
        2.  Drag an "Image Node" onto the canvas.
        3.  Select the "Image Node" to open its properties panel.
        4.  Simulate uploading a PNG file.
    *   **Expected Result:** The upload succeeds, and no error message is shown.

### 3. Playwright Implementation Instructions

Use the following guidelines to implement the tests.

*   **Selectors:** Assume the application uses `data-testid` attributes for stable selectors. If a `data-testid` is not available, use the most robust selector you can find (e.g., `role`, `aria-label`).
    *   Image Node in toolbox: `[data-testid="toolbox-item-image"]`
    *   File Node in toolbox: `[data-testid="toolbox-item-file"]`
    *   Workflow Canvas: `[data-testid="workflow-canvas"]`
    *   Properties Panel: `[data-testid="properties-panel"]`
    *   File Upload Input: `input[type="file"]` (likely inside the properties panel)
    *   File Upload Error Message: `[data-testid="file-upload-error"]`
    *   Uploaded Image Preview: `[data-testid="image-preview"]`

*   **File Simulation:** Do not use real file paths. Instead, create mock files in-memory using `Buffer`. This is critical for controlling the MIME type and ensuring test reliability.

    ```typescript
    // Helper function or inline code to create a mock SVG for testing
    const svgBuffer = Buffer.from('<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"/>');
    const mockSvgFile = {
      name: 'test-image.svg',
      mimeType: 'image/svg+xml', // This is the key value to test
      buffer: svgBuffer,
    };

    // Helper for a mock PNG file
    const pngBuffer = Buffer.from('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==', 'base64');
    const mockPngFile = {
      name: 'test-image.png',
      mimeType: 'image/png',
      buffer: pngBuffer,
    };

    // Usage
    const fileChooserPromise = page.waitForEvent('filechooser');
    await page.locator('...').click(); // Clicks the button that opens the file dialog
    const fileChooser = await fileChooserPromise;
    await fileChooser.setFiles(mockSvgFile);
    
    // OR, if the input is directly available and visible:
    await page.locator('input[type="file"]').setInputFiles(mockSvgFile);
    ```

*   **Assertions:** Use Playwright's `expect` library for all assertions.
    *   `await expect(page.locator('[data-testid="file-upload-error"]')).toBeHidden();`
    *   `await expect(page.locator('[data-testid="image-preview"]')).toBeVisible();`
    *   `await expect(page.locator('[data-testid="file-upload-error"]')).toHaveText('Please use Image node to upload this file.');`

### 4. MCP Integration Guidelines

*   **Command Structure:** The tests should be runnable via the standard Playwright CLI. A typical command would be:
    ```bash
    npx playwright test --project=chromium
    ```
*   **Environment:** Assume the `baseURL` is configured in `playwright.config.ts`. The tests should navigate to a relative path like `/workflow-designer`.
*   **Parameters:** No special parameters are required for this test suite.

### 5. CI-Ready Code Requirements

*   **File Structure & Naming:**
    *   Create a new test file named `svg-upload.spec.ts` inside an appropriate folder (e.g., `tests/e2e/workflow/`).
*   **Test Organization:**
    *   Use `test.describe('Workflow File Uploads', () => { ... })` to group all related tests.
    *   Use `test.beforeEach(async ({ page }) => { ... })` to handle repetitive setup, such as navigating to the page and ensuring the workflow canvas is ready. This ensures tests are atomic and independent.
*   **Naming Conventions:**
    *   Use descriptive test names, for example: `test('should accept an SVG file in an Image Node')`.
*   **Error Handling & async/await:**
    *   Use `async/await` correctly for all Playwright operations.
    *   Ensure assertions are awaited.
*   **Parallelization:**
    *   Write tests to be fully independent so they can run in parallel without conflicts. The `beforeEach` hook for setup is key to achieving this.

Please generate the full `svg-upload.spec.ts` file now.

shige

@AkhmetovOlzhass I would be grateful if you could fix the following!

Issue: RegExp special character breaks SVG file validation

The validation logic uses new RegExp(accept).test(itemType) to check MIME types, but image/svg+xml contains a + character which is a special regex metacharacter meaning "one or more occurrences".

When image/svg+xml is interpreted as a regex pattern:

It matches: image/svgxml, image/svgxxml, etc.
It does not match: image/svg+xml (the actual MIME type)

Suggested fix options:

Escape the regex special character: accept: ["image/png", "image/jpeg", "image/gif", "image/svg\+xml"],
Use simple string comparison instead of RegExp (recommended): isValid = config.accept.some((accept) => accept === itemType);
Or if partial matching is needed: isValid = config.accept.some((accept) => itemType.startsWith(accept));

Option 2 is recommended since MIME type validation doesn't require regex complexity.

Affected locations:

file-panel.tsx:134 - validateItems function
file-panel.tsx:159 - assertFiles function

fix: replace non-standard SVG MIME type with image/svg+xml

32afbac

AkhmetovOlzhass requested a review from shige as a code owner December 9, 2025 06:52

qodo-free-for-open-source-projects bot added the Review effort 1/5 label Dec 9, 2025

vercel bot deployed to Preview – ui December 9, 2025 06:57 View deployment

shige assigned AkhmetovOlzhass Dec 9, 2025

vercel bot deployed to Preview – giselle December 9, 2025 06:58 View deployment

shige requested changes Dec 9, 2025

View reviewed changes

fix: replace RegExp validation with strict MIME comparison for SVG

09cb650

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: replace non-standard SVG MIME type with image/svg+xml #2410

fix: replace non-standard SVG MIME type with image/svg+xml #2410

Uh oh!

AkhmetovOlzhass commented Dec 9, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

changeset-bot bot commented Dec 9, 2025 •

edited

Loading

Uh oh!

giselles-ai bot commented Dec 9, 2025 •

edited

Loading

Uh oh!

vercel bot commented Dec 9, 2025

Uh oh!

coderabbitai bot commented Dec 9, 2025 •

edited

Loading

Uh oh!

qodo-free-for-open-source-projects bot commented Dec 9, 2025 •

edited

Loading

Uh oh!

qodo-free-for-open-source-projects bot commented Dec 9, 2025 •

edited

Loading

Uh oh!

vercel bot commented Dec 9, 2025 •

edited

Loading

Uh oh!

giselles-ai bot commented Dec 9, 2025 •

edited by shige

Loading

Uh oh!

shige left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

fix: replace non-standard SVG MIME type with image/svg+xml #2410

Are you sure you want to change the base?

fix: replace non-standard SVG MIME type with image/svg+xml #2410

Uh oh!

Conversation

AkhmetovOlzhass commented Dec 9, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

User description

Summary

Changes

Testing

PR Type

Description

Diagram Walkthrough

File Walkthrough

Summary by CodeRabbit

Uh oh!

changeset-bot bot commented Dec 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

giselles-ai bot commented Dec 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented Dec 9, 2025

Uh oh!

coderabbitai bot commented Dec 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

Pre-merge checks and finishing touches

Uh oh!

qodo-free-for-open-source-projects bot commented Dec 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Compliance Guide 🔍

Uh oh!

qodo-free-for-open-source-projects bot commented Dec 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Code Suggestions ✨

Uh oh!

vercel bot commented Dec 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

giselles-ai bot commented Dec 9, 2025 • edited by shige Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔍 QA Testing Assistant by Giselle

📋 Manual QA Checklist

✨ Prompt for AI Agents

Uh oh!

shige left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

AkhmetovOlzhass commented Dec 9, 2025 •

edited by coderabbitai bot

Loading

changeset-bot bot commented Dec 9, 2025 •

edited

Loading

giselles-ai bot commented Dec 9, 2025 •

edited

Loading

coderabbitai bot commented Dec 9, 2025 •

edited

Loading

qodo-free-for-open-source-projects bot commented Dec 9, 2025 •

edited

Loading

qodo-free-for-open-source-projects bot commented Dec 9, 2025 •

edited

Loading

vercel bot commented Dec 9, 2025 •

edited

Loading

giselles-ai bot commented Dec 9, 2025 •

edited by shige

Loading