Skip to content

Conversation

@mrcfps
Copy link
Contributor

@mrcfps mrcfps commented Dec 18, 2025

Summary by CodeRabbit

  • New Features

    • Added visual feedback showing download progress for unsupported file formats.
  • Bug Fixes

    • Fixed the import button to properly disable when files are uploading, preventing unintended actions during upload.
  • Refactor

    • Simplified the file upload experience by removing the resource type selection interface for a more streamlined workflow.

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

mrcfps and others added 4 commits December 17, 2025 22:18
Staging Release 20251217
feat: Add invite page to public access pages whitelist (#1874)

feat: Add invite page check to `useIsSharePage` hook, ignore `.serena` files, and configure SCSS formatter in VS Code.

Co-authored-by: lefarcen <[email protected]>
refactor: update default selected credit pack in CreditInsufficientModal (#1876)

* Removed credit pack options for 100 and 500 credits.
* Changed default selected credit pack from 100 to 1000 for users with a paid subscription.
* Ensured consistency in credit pack options displayed for users.

Co-authored-by: Siri-Ray <[email protected]>
#1883)

feat: Enhance resource import by preventing save during upload, add file download loading states, and configure Serena project settings.
@coderabbitai
Copy link

coderabbitai bot commented Dec 18, 2025

Walkthrough

These changes refactor download state management in file preview components, streamline file resource form by removing multi-type filtering logic, and enhance upload state tracking in the import modal to prevent saves during file uploads.

Changes

Cohort / File(s) Summary
Download flow refactoring
packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx, packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/unsupported.tsx
Migrates download logic to use useDownloadFile hook; adds isDownloading state tracking and passes it to UnsupportedRenderer; updates button UI to reflect loading state.
File resource form simplification
packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx
Removes multi-type acceptance logic, resourceTypes selection UI, file-extension filtering, and validation. Removes form prop from component interface. Retains single-file upload flow without type filtering.
Import modal upload state
packages/ai-workspace-common/src/components/import-resource/index.tsx
Enhances disableSave logic to check for uploading files, preventing save action while files are being uploaded.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

  • resource-type-form.tsx requires careful verification that removed multi-type logic and form prop don't break dependent code or form submission flow
  • Download hook integration needs confirmation that useDownloadFile behavior matches previous inline logic and content-type handling
  • Upload state check in import modal should verify the condition logic covers all uploading file scenarios

Possibly related PRs

Suggested reviewers

  • CH1111

Poem

🐰 Hops with glee through cleaner code,
Downloads now on well-worn road,
Forms shed weight, uploads now wait,
State flows true—what a rate!
Refactored streams make our hearts keen!

Pre-merge checks and finishing touches

❌ Failed checks (1 inconclusive)
Check name Status Explanation Resolution
Title check ❓ Inconclusive The title 'Staging merge back to main' is generic and does not clearly summarize the actual changes in the pull request, which involve refactoring download flow, updating component props, and simplifying form logic. Replace the generic title with a specific summary of the main changes, such as 'Refactor file download flow and update component interfaces' or a more descriptive title reflecting the primary modifications.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch staging

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1bba87d and 7acafdd.

📒 Files selected for processing (4)
  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx (3 hunks)
  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/unsupported.tsx (2 hunks)
  • packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx (2 hunks)
  • packages/ai-workspace-common/src/components/import-resource/index.tsx (1 hunks)
🧰 Additional context used
📓 Path-based instructions (20)
**/*.{jsx,tsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{jsx,tsx}: Always use tailwind css to style the component
Always wrap pure components with React.memo to prevent unnecessary re-renders
Always use useMemo for expensive computations or complex object creation
Always use useCallback for function props to maintain referential equality
Always specify proper dependency arrays in useEffect to prevent infinite loops
Always avoid inline object/array creation in render to prevent unnecessary re-renders
Always use proper key props when rendering lists
Always split nested components with closures into separate components to avoid performance issues and improve code maintainability

**/*.{jsx,tsx}: Always wrap pure components with React.memo to prevent unnecessary re-renders
Always use useMemo for expensive computations or complex object creation in React
Always use useCallback for function props to maintain referential equality in React
Always specify proper dependency arrays in useEffect to prevent infinite loops in React
Always avoid inline object/array creation in render to prevent unnecessary re-renders in React
Always use proper key props when rendering lists in React (avoid using index when possible)
Always split nested components with closures into separate components in React
Use lazy loading for components that are not immediately needed in React
Debounce handlers for events that might fire rapidly (resize, scroll, input) in React
Implement fallback UI for components that might fail in React
Use error boundaries to catch and handle runtime errors in React

**/*.{jsx,tsx}: Place each attribute on a new line when a component has multiple attributes in JSX
Use self-closing tags for elements without children in JSX
Keep JSX expressions simple, extract complex logic to variables
Put closing brackets for multi-line JSX on a new line

**/*.{jsx,tsx}: Component file names should match the component name
Organize function components in order: imports, type definitions, constants, component function, hook calls, e...

Files:

  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/unsupported.tsx
  • packages/ai-workspace-common/src/components/import-resource/index.tsx
  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
  • packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx
**/*.{js,ts,jsx,tsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{js,ts,jsx,tsx}: Always use optional chaining (?.) when accessing object properties
Always use nullish coalescing (??) or default values for potentially undefined values
Always check array existence before using array methods
Always validate object properties before destructuring
Always use single quotes for string literals in JavaScript/TypeScript code

**/*.{js,ts,jsx,tsx}: Use semicolons at the end of statements
Include spaces around operators (e.g., a + b instead of a+b)
Always use curly braces for control statements
Place opening braces on the same line as their statement

**/*.{js,ts,jsx,tsx}: Group import statements in order: React/framework libraries, third-party libraries, internal modules, relative path imports, type imports, style imports
Sort imports alphabetically within each import group
Leave a blank line between import groups
Extract complex logic into custom hooks
Use functional updates for state (e.g., setCount(prev => prev + 1))
Split complex state into multiple state variables rather than single large objects
Use useReducer for complex state logic instead of multiple useState calls

Files:

  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/unsupported.tsx
  • packages/ai-workspace-common/src/components/import-resource/index.tsx
  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
  • packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx
**/*.{js,ts,tsx,jsx,py,java,cpp,c,cs,rb,go,rs,php,swift,kt,scala,r,m,mm,sql}

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

**/*.{js,ts,tsx,jsx,py,java,cpp,c,cs,rb,go,rs,php,swift,kt,scala,r,m,mm,sql}: All code comments MUST be written in English
All variable names, function names, class names, and other identifiers MUST use English words
Comments should be concise and explain 'why' rather than 'what'
Use proper grammar and punctuation in comments
Keep comments up-to-date when code changes
Document complex logic, edge cases, and important implementation details
Use clear, descriptive names that indicate purpose
Avoid abbreviations unless they are universally understood

Files:

  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/unsupported.tsx
  • packages/ai-workspace-common/src/components/import-resource/index.tsx
  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
  • packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx
**/*.{js,ts,tsx,jsx}

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

Use JSDoc style comments for functions and classes in JavaScript/TypeScript

Files:

  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/unsupported.tsx
  • packages/ai-workspace-common/src/components/import-resource/index.tsx
  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
  • packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx
**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/01-code-style.mdc)

**/*.{js,jsx,ts,tsx}: Use single quotes for string literals in TypeScript/JavaScript
Always use optional chaining (?.) when accessing object properties in TypeScript/JavaScript
Always use nullish coalescing (??) or default values for potentially undefined values in TypeScript/JavaScript
Always check array existence before using array methods in TypeScript/JavaScript
Validate object properties before destructuring in TypeScript/JavaScript
Use ES6+ features like arrow functions, destructuring, and spread operators in TypeScript/JavaScript
Avoid magic numbers and strings - use named constants in TypeScript/JavaScript
Use async/await instead of raw promises for asynchronous code in TypeScript/JavaScript

Files:

  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/unsupported.tsx
  • packages/ai-workspace-common/src/components/import-resource/index.tsx
  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
  • packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx
**/*.{jsx,tsx,css}

📄 CodeRabbit inference engine (.cursor/rules/01-code-style.mdc)

**/*.{jsx,tsx,css}: Use Tailwind CSS for styling components
Follow the utility-first approach with Tailwind CSS
Group related utility classes together in Tailwind CSS
Prefer Tailwind utilities over custom CSS when possible

Files:

  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/unsupported.tsx
  • packages/ai-workspace-common/src/components/import-resource/index.tsx
  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
  • packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx
**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/03-typescript-guidelines.mdc)

**/*.{ts,tsx}: Avoid using any type whenever possible - use unknown type instead with proper type guards
Always define explicit return types for functions, especially for public APIs
Prefer extending existing types over creating entirely new types
Use TypeScript utility types (Partial<T>, Pick<T, K>, Omit<T, K>, Readonly<T>, Record<K, T>) to derive new types
Use union types and intersection types to combine existing types
Always import types explicitly using the import type syntax
Group type imports separately from value imports
Minimize creating local type aliases for imported types

Files:

  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/unsupported.tsx
  • packages/ai-workspace-common/src/components/import-resource/index.tsx
  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
  • packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx
**/*.{js,ts,jsx,tsx,css,json}

📄 CodeRabbit inference engine (.cursor/rules/04-code-formatting.mdc)

Maximum line length of 100 characters

Files:

  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/unsupported.tsx
  • packages/ai-workspace-common/src/components/import-resource/index.tsx
  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
  • packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx
**/*.{js,ts,jsx,tsx,css,json,yml,yaml}

📄 CodeRabbit inference engine (.cursor/rules/04-code-formatting.mdc)

Use 2 spaces for indentation, no tabs

Files:

  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/unsupported.tsx
  • packages/ai-workspace-common/src/components/import-resource/index.tsx
  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
  • packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx
**/*.{js,ts,jsx,tsx,css,json,yml,yaml,md}

📄 CodeRabbit inference engine (.cursor/rules/04-code-formatting.mdc)

No trailing whitespace at the end of lines

Files:

  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/unsupported.tsx
  • packages/ai-workspace-common/src/components/import-resource/index.tsx
  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
  • packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx
**/*.{jsx,tsx,js}

📄 CodeRabbit inference engine (.cursor/rules/05-code-organization.mdc)

Each component file should contain only one main component

Files:

  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/unsupported.tsx
  • packages/ai-workspace-common/src/components/import-resource/index.tsx
  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
  • packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx
**/*.tsx

📄 CodeRabbit inference engine (.cursor/rules/05-code-organization.mdc)

Explicitly type props with interfaces or types in React components

Files:

  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/unsupported.tsx
  • packages/ai-workspace-common/src/components/import-resource/index.tsx
  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
  • packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx
**/*.{css,scss,sass,less,js,jsx,ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/09-design-system.mdc)

**/*.{css,scss,sass,less,js,jsx,ts,tsx}: Primary color (#155EEF) should be used for main brand color in buttons, links, and accents
Error color (#F04438) should be used for error states and destructive actions
Success color (#12B76A) should be used for success states and confirmations
Warning color (#F79009) should be used for warnings and important notifications
Info color (#0BA5EC) should be used for informational elements

Files:

  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/unsupported.tsx
  • packages/ai-workspace-common/src/components/import-resource/index.tsx
  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
  • packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx
**/*.{tsx,ts}

📄 CodeRabbit inference engine (.cursor/rules/09-i18n-guidelines.mdc)

**/*.{tsx,ts}: Use the translation wrapper component and useTranslation hook in components
Ensure all user-facing text is translatable

Files:

  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/unsupported.tsx
  • packages/ai-workspace-common/src/components/import-resource/index.tsx
  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
  • packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx
**/*.{tsx,ts,json}

📄 CodeRabbit inference engine (.cursor/rules/09-i18n-guidelines.mdc)

Support dynamic content with placeholders in translations

Files:

  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/unsupported.tsx
  • packages/ai-workspace-common/src/components/import-resource/index.tsx
  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
  • packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx
**/*.{tsx,ts,jsx,js,vue,css,scss,less}

📄 CodeRabbit inference engine (.cursor/rules/11-ui-design-patterns.mdc)

**/*.{tsx,ts,jsx,js,vue,css,scss,less}: Use the primary blue (#155EEF) for main UI elements, CTAs, and active states
Use red (#F04438) only for errors, warnings, and destructive actions
Use green (#12B76A) for success states and confirmations
Use orange (#F79009) for warning states and important notifications
Use blue (#0BA5EC) for informational elements
Primary buttons should be solid with the primary color
Secondary buttons should have a border with transparent or light background
Danger buttons should use the error color
Use consistent padding, border radius, and hover states for all buttons
Follow fixed button sizes based on their importance and context
Use consistent border radius (rounded-lg) for all cards
Apply light shadows (shadow-sm) for card elevation
Maintain consistent padding inside cards (p-4 or p-6)
Use subtle borders for card separation
Ensure proper spacing between card elements
Apply consistent styling to all form inputs
Use clear visual indicators for focus, hover, and error states in form elements
Apply proper spacing between elements using 8px, 16px, 24px increments
Ensure proper alignment of elements (left, center, or right)
Use responsive layouts that work across different device sizes
Maintain a minimum contrast ratio of 4.5:1 for text

Files:

  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/unsupported.tsx
  • packages/ai-workspace-common/src/components/import-resource/index.tsx
  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
  • packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx
**/*.{tsx,ts,jsx,js,vue}

📄 CodeRabbit inference engine (.cursor/rules/11-ui-design-patterns.mdc)

**/*.{tsx,ts,jsx,js,vue}: Include appropriate loading states for async actions in buttons
Group related form elements with appropriate spacing
Provide clear validation feedback for forms
Ensure proper labeling and accessibility for form elements
Ensure all interactive elements are keyboard accessible
Include appropriate ARIA attributes for complex components
Provide alternative text for images and icons
Support screen readers with semantic HTML elements

Files:

  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/unsupported.tsx
  • packages/ai-workspace-common/src/components/import-resource/index.tsx
  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
  • packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx
**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursor/rules/08-contributing-guidelines.mdc)

**/*.{ts,tsx,js,jsx}: Follow the TypeScript/JavaScript style guidelines
Ensure code is well-tested and documented

Files:

  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/unsupported.tsx
  • packages/ai-workspace-common/src/components/import-resource/index.tsx
  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
  • packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx
**/*.{tsx,jsx}

📄 CodeRabbit inference engine (.cursor/rules/08-contributing-guidelines.mdc)

Use React best practices for frontend code

Files:

  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/unsupported.tsx
  • packages/ai-workspace-common/src/components/import-resource/index.tsx
  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
  • packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx
**/index.{js,ts,jsx,tsx}

📄 CodeRabbit inference engine (.cursor/rules/05-code-organization.mdc)

Use index files to export multiple components from a directory

Files:

  • packages/ai-workspace-common/src/components/import-resource/index.tsx
  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
🧠 Learnings (4)
📚 Learning: 2025-11-25T03:05:07.580Z
Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/11-ui-design-patterns.mdc:0-0
Timestamp: 2025-11-25T03:05:07.580Z
Learning: Applies to **/*.{tsx,ts,jsx,js,vue} : Include appropriate loading states for async actions in buttons

Applied to files:

  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/unsupported.tsx
  • packages/ai-workspace-common/src/components/import-resource/index.tsx
📚 Learning: 2025-11-25T03:04:05.715Z
Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/05-code-organization.mdc:0-0
Timestamp: 2025-11-25T03:04:05.715Z
Learning: Applies to **/*.{js,ts,jsx,tsx} : Extract complex logic into custom hooks

Applied to files:

  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
📚 Learning: 2025-11-26T05:04:26.523Z
Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/08-contributing-guidelines.mdc:0-0
Timestamp: 2025-11-26T05:04:26.523Z
Learning: Applies to **/*.{tsx,jsx} : Use React best practices for frontend code

Applied to files:

  • packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx
📚 Learning: 2025-11-25T03:05:07.580Z
Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/11-ui-design-patterns.mdc:0-0
Timestamp: 2025-11-25T03:05:07.580Z
Learning: Applies to **/*.{tsx,ts,jsx,js,vue} : Ensure proper labeling and accessibility for form elements

Applied to files:

  • packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx
🧬 Code graph analysis (2)
packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx (2)
apps/api/src/modules/misc/misc.service.ts (1)
  • downloadFile (341-345)
packages/ai-workspace-common/src/hooks/canvas/use-download-file.ts (1)
  • useDownloadFile (24-108)
packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx (3)
packages/ai-workspace-common/src/components/canvas/workflow-variables/utils.ts (1)
  • getFileExtension (11-17)
packages/ai-workspace-common/src/components/canvas/workflow-variables/index.ts (2)
  • getFileExtension (24-24)
  • IMAGE_FILE_EXTENSIONS (15-15)
packages/ai-workspace-common/src/components/canvas/workflow-variables/constants.ts (1)
  • IMAGE_FILE_EXTENSIONS (57-57)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
  • GitHub Check: build / Build
🔇 Additional comments (6)
packages/ai-workspace-common/src/components/import-resource/index.tsx (1)

47-55: LGTM! Good UX improvement to prevent saving during uploads.

The addition of hasUploadingFiles check effectively prevents users from saving while files are still uploading, which improves data integrity and user experience. The implementation is clean with proper memoization and correct dependencies.

packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/unsupported.tsx (2)

8-8: LGTM! Proper loading state implementation.

The addition of the isDownloading prop enables proper loading state visualization for async download actions, consistent with the coding guidelines for handling async button states.


23-29: LGTM! Button states properly wired.

The Button correctly reflects the download state with both loading and disabled props, providing good user feedback during the async operation. Based on learnings, this follows the recommended pattern for async actions in buttons.

packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx (1)

62-68: LGTM! Clean simplification.

The simplified getFileIconType function correctly determines icon types based on file extensions with a straightforward implementation. The removal of multi-type logic reduces complexity while maintaining functionality.

packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx (2)

156-160: LGTM! Proper extraction of download logic into custom hook.

The refactoring to use useDownloadFile hook follows the coding guideline to extract complex logic into custom hooks. The implementation is clean with proper callback memoization and correct dependencies. Based on learnings, this improves code organization and maintainability.


236-236: LGTM! Download state properly propagated.

The isDownloading state is correctly passed to UnsupportedRenderer, enabling proper loading state visualization in the UI, which aligns with the pattern established across the PR.


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.

@mrcfps mrcfps changed the title Staging Merge Back Staging merge back to main Dec 18, 2025
Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx (1)

20-20: Remove unused form prop or add explicit usage.

The form prop is defined in the interface but never destructured or used in the component (see lines 25-34). Additionally, it uses the any type which violates the coding guideline to avoid any whenever possible.

🔎 Apply this diff to remove the unused prop:
   onFileRemove: (file: UploadFile) => void;
   onRefreshFile: () => void;
-  form?: any;
   showError?: boolean;
📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1bba87d and 7acafdd.

📒 Files selected for processing (4)
  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx (3 hunks)
  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/unsupported.tsx (2 hunks)
  • packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx (2 hunks)
  • packages/ai-workspace-common/src/components/import-resource/index.tsx (1 hunks)
🧰 Additional context used
📓 Path-based instructions (20)
**/*.{jsx,tsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{jsx,tsx}: Always use tailwind css to style the component
Always wrap pure components with React.memo to prevent unnecessary re-renders
Always use useMemo for expensive computations or complex object creation
Always use useCallback for function props to maintain referential equality
Always specify proper dependency arrays in useEffect to prevent infinite loops
Always avoid inline object/array creation in render to prevent unnecessary re-renders
Always use proper key props when rendering lists
Always split nested components with closures into separate components to avoid performance issues and improve code maintainability

**/*.{jsx,tsx}: Always wrap pure components with React.memo to prevent unnecessary re-renders
Always use useMemo for expensive computations or complex object creation in React
Always use useCallback for function props to maintain referential equality in React
Always specify proper dependency arrays in useEffect to prevent infinite loops in React
Always avoid inline object/array creation in render to prevent unnecessary re-renders in React
Always use proper key props when rendering lists in React (avoid using index when possible)
Always split nested components with closures into separate components in React
Use lazy loading for components that are not immediately needed in React
Debounce handlers for events that might fire rapidly (resize, scroll, input) in React
Implement fallback UI for components that might fail in React
Use error boundaries to catch and handle runtime errors in React

**/*.{jsx,tsx}: Place each attribute on a new line when a component has multiple attributes in JSX
Use self-closing tags for elements without children in JSX
Keep JSX expressions simple, extract complex logic to variables
Put closing brackets for multi-line JSX on a new line

**/*.{jsx,tsx}: Component file names should match the component name
Organize function components in order: imports, type definitions, constants, component function, hook calls, e...

Files:

  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/unsupported.tsx
  • packages/ai-workspace-common/src/components/import-resource/index.tsx
  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
  • packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx
**/*.{js,ts,jsx,tsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{js,ts,jsx,tsx}: Always use optional chaining (?.) when accessing object properties
Always use nullish coalescing (??) or default values for potentially undefined values
Always check array existence before using array methods
Always validate object properties before destructuring
Always use single quotes for string literals in JavaScript/TypeScript code

**/*.{js,ts,jsx,tsx}: Use semicolons at the end of statements
Include spaces around operators (e.g., a + b instead of a+b)
Always use curly braces for control statements
Place opening braces on the same line as their statement

**/*.{js,ts,jsx,tsx}: Group import statements in order: React/framework libraries, third-party libraries, internal modules, relative path imports, type imports, style imports
Sort imports alphabetically within each import group
Leave a blank line between import groups
Extract complex logic into custom hooks
Use functional updates for state (e.g., setCount(prev => prev + 1))
Split complex state into multiple state variables rather than single large objects
Use useReducer for complex state logic instead of multiple useState calls

Files:

  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/unsupported.tsx
  • packages/ai-workspace-common/src/components/import-resource/index.tsx
  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
  • packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx
**/*.{js,ts,tsx,jsx,py,java,cpp,c,cs,rb,go,rs,php,swift,kt,scala,r,m,mm,sql}

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

**/*.{js,ts,tsx,jsx,py,java,cpp,c,cs,rb,go,rs,php,swift,kt,scala,r,m,mm,sql}: All code comments MUST be written in English
All variable names, function names, class names, and other identifiers MUST use English words
Comments should be concise and explain 'why' rather than 'what'
Use proper grammar and punctuation in comments
Keep comments up-to-date when code changes
Document complex logic, edge cases, and important implementation details
Use clear, descriptive names that indicate purpose
Avoid abbreviations unless they are universally understood

Files:

  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/unsupported.tsx
  • packages/ai-workspace-common/src/components/import-resource/index.tsx
  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
  • packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx
**/*.{js,ts,tsx,jsx}

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

Use JSDoc style comments for functions and classes in JavaScript/TypeScript

Files:

  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/unsupported.tsx
  • packages/ai-workspace-common/src/components/import-resource/index.tsx
  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
  • packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx
**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/01-code-style.mdc)

**/*.{js,jsx,ts,tsx}: Use single quotes for string literals in TypeScript/JavaScript
Always use optional chaining (?.) when accessing object properties in TypeScript/JavaScript
Always use nullish coalescing (??) or default values for potentially undefined values in TypeScript/JavaScript
Always check array existence before using array methods in TypeScript/JavaScript
Validate object properties before destructuring in TypeScript/JavaScript
Use ES6+ features like arrow functions, destructuring, and spread operators in TypeScript/JavaScript
Avoid magic numbers and strings - use named constants in TypeScript/JavaScript
Use async/await instead of raw promises for asynchronous code in TypeScript/JavaScript

Files:

  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/unsupported.tsx
  • packages/ai-workspace-common/src/components/import-resource/index.tsx
  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
  • packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx
**/*.{jsx,tsx,css}

📄 CodeRabbit inference engine (.cursor/rules/01-code-style.mdc)

**/*.{jsx,tsx,css}: Use Tailwind CSS for styling components
Follow the utility-first approach with Tailwind CSS
Group related utility classes together in Tailwind CSS
Prefer Tailwind utilities over custom CSS when possible

Files:

  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/unsupported.tsx
  • packages/ai-workspace-common/src/components/import-resource/index.tsx
  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
  • packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx
**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/03-typescript-guidelines.mdc)

**/*.{ts,tsx}: Avoid using any type whenever possible - use unknown type instead with proper type guards
Always define explicit return types for functions, especially for public APIs
Prefer extending existing types over creating entirely new types
Use TypeScript utility types (Partial<T>, Pick<T, K>, Omit<T, K>, Readonly<T>, Record<K, T>) to derive new types
Use union types and intersection types to combine existing types
Always import types explicitly using the import type syntax
Group type imports separately from value imports
Minimize creating local type aliases for imported types

Files:

  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/unsupported.tsx
  • packages/ai-workspace-common/src/components/import-resource/index.tsx
  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
  • packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx
**/*.{js,ts,jsx,tsx,css,json}

📄 CodeRabbit inference engine (.cursor/rules/04-code-formatting.mdc)

Maximum line length of 100 characters

Files:

  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/unsupported.tsx
  • packages/ai-workspace-common/src/components/import-resource/index.tsx
  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
  • packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx
**/*.{js,ts,jsx,tsx,css,json,yml,yaml}

📄 CodeRabbit inference engine (.cursor/rules/04-code-formatting.mdc)

Use 2 spaces for indentation, no tabs

Files:

  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/unsupported.tsx
  • packages/ai-workspace-common/src/components/import-resource/index.tsx
  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
  • packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx
**/*.{js,ts,jsx,tsx,css,json,yml,yaml,md}

📄 CodeRabbit inference engine (.cursor/rules/04-code-formatting.mdc)

No trailing whitespace at the end of lines

Files:

  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/unsupported.tsx
  • packages/ai-workspace-common/src/components/import-resource/index.tsx
  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
  • packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx
**/*.{jsx,tsx,js}

📄 CodeRabbit inference engine (.cursor/rules/05-code-organization.mdc)

Each component file should contain only one main component

Files:

  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/unsupported.tsx
  • packages/ai-workspace-common/src/components/import-resource/index.tsx
  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
  • packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx
**/*.tsx

📄 CodeRabbit inference engine (.cursor/rules/05-code-organization.mdc)

Explicitly type props with interfaces or types in React components

Files:

  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/unsupported.tsx
  • packages/ai-workspace-common/src/components/import-resource/index.tsx
  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
  • packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx
**/*.{css,scss,sass,less,js,jsx,ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/09-design-system.mdc)

**/*.{css,scss,sass,less,js,jsx,ts,tsx}: Primary color (#155EEF) should be used for main brand color in buttons, links, and accents
Error color (#F04438) should be used for error states and destructive actions
Success color (#12B76A) should be used for success states and confirmations
Warning color (#F79009) should be used for warnings and important notifications
Info color (#0BA5EC) should be used for informational elements

Files:

  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/unsupported.tsx
  • packages/ai-workspace-common/src/components/import-resource/index.tsx
  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
  • packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx
**/*.{tsx,ts}

📄 CodeRabbit inference engine (.cursor/rules/09-i18n-guidelines.mdc)

**/*.{tsx,ts}: Use the translation wrapper component and useTranslation hook in components
Ensure all user-facing text is translatable

Files:

  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/unsupported.tsx
  • packages/ai-workspace-common/src/components/import-resource/index.tsx
  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
  • packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx
**/*.{tsx,ts,json}

📄 CodeRabbit inference engine (.cursor/rules/09-i18n-guidelines.mdc)

Support dynamic content with placeholders in translations

Files:

  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/unsupported.tsx
  • packages/ai-workspace-common/src/components/import-resource/index.tsx
  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
  • packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx
**/*.{tsx,ts,jsx,js,vue,css,scss,less}

📄 CodeRabbit inference engine (.cursor/rules/11-ui-design-patterns.mdc)

**/*.{tsx,ts,jsx,js,vue,css,scss,less}: Use the primary blue (#155EEF) for main UI elements, CTAs, and active states
Use red (#F04438) only for errors, warnings, and destructive actions
Use green (#12B76A) for success states and confirmations
Use orange (#F79009) for warning states and important notifications
Use blue (#0BA5EC) for informational elements
Primary buttons should be solid with the primary color
Secondary buttons should have a border with transparent or light background
Danger buttons should use the error color
Use consistent padding, border radius, and hover states for all buttons
Follow fixed button sizes based on their importance and context
Use consistent border radius (rounded-lg) for all cards
Apply light shadows (shadow-sm) for card elevation
Maintain consistent padding inside cards (p-4 or p-6)
Use subtle borders for card separation
Ensure proper spacing between card elements
Apply consistent styling to all form inputs
Use clear visual indicators for focus, hover, and error states in form elements
Apply proper spacing between elements using 8px, 16px, 24px increments
Ensure proper alignment of elements (left, center, or right)
Use responsive layouts that work across different device sizes
Maintain a minimum contrast ratio of 4.5:1 for text

Files:

  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/unsupported.tsx
  • packages/ai-workspace-common/src/components/import-resource/index.tsx
  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
  • packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx
**/*.{tsx,ts,jsx,js,vue}

📄 CodeRabbit inference engine (.cursor/rules/11-ui-design-patterns.mdc)

**/*.{tsx,ts,jsx,js,vue}: Include appropriate loading states for async actions in buttons
Group related form elements with appropriate spacing
Provide clear validation feedback for forms
Ensure proper labeling and accessibility for form elements
Ensure all interactive elements are keyboard accessible
Include appropriate ARIA attributes for complex components
Provide alternative text for images and icons
Support screen readers with semantic HTML elements

Files:

  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/unsupported.tsx
  • packages/ai-workspace-common/src/components/import-resource/index.tsx
  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
  • packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx
**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursor/rules/08-contributing-guidelines.mdc)

**/*.{ts,tsx,js,jsx}: Follow the TypeScript/JavaScript style guidelines
Ensure code is well-tested and documented

Files:

  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/unsupported.tsx
  • packages/ai-workspace-common/src/components/import-resource/index.tsx
  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
  • packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx
**/*.{tsx,jsx}

📄 CodeRabbit inference engine (.cursor/rules/08-contributing-guidelines.mdc)

Use React best practices for frontend code

Files:

  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/unsupported.tsx
  • packages/ai-workspace-common/src/components/import-resource/index.tsx
  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
  • packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx
**/index.{js,ts,jsx,tsx}

📄 CodeRabbit inference engine (.cursor/rules/05-code-organization.mdc)

Use index files to export multiple components from a directory

Files:

  • packages/ai-workspace-common/src/components/import-resource/index.tsx
  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
🧠 Learnings (4)
📚 Learning: 2025-11-25T03:05:07.580Z
Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/11-ui-design-patterns.mdc:0-0
Timestamp: 2025-11-25T03:05:07.580Z
Learning: Applies to **/*.{tsx,ts,jsx,js,vue} : Include appropriate loading states for async actions in buttons

Applied to files:

  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/unsupported.tsx
  • packages/ai-workspace-common/src/components/import-resource/index.tsx
📚 Learning: 2025-11-25T03:04:05.715Z
Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/05-code-organization.mdc:0-0
Timestamp: 2025-11-25T03:04:05.715Z
Learning: Applies to **/*.{js,ts,jsx,tsx} : Extract complex logic into custom hooks

Applied to files:

  • packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
📚 Learning: 2025-11-26T05:04:26.523Z
Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/08-contributing-guidelines.mdc:0-0
Timestamp: 2025-11-26T05:04:26.523Z
Learning: Applies to **/*.{tsx,jsx} : Use React best practices for frontend code

Applied to files:

  • packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx
📚 Learning: 2025-11-25T03:05:07.580Z
Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/11-ui-design-patterns.mdc:0-0
Timestamp: 2025-11-25T03:05:07.580Z
Learning: Applies to **/*.{tsx,ts,jsx,js,vue} : Ensure proper labeling and accessibility for form elements

Applied to files:

  • packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx
🧬 Code graph analysis (2)
packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx (2)
apps/api/src/modules/misc/misc.service.ts (1)
  • downloadFile (341-345)
packages/ai-workspace-common/src/hooks/canvas/use-download-file.ts (1)
  • useDownloadFile (24-108)
packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx (3)
packages/ai-workspace-common/src/components/canvas/workflow-variables/utils.ts (1)
  • getFileExtension (11-17)
packages/ai-workspace-common/src/components/canvas/workflow-variables/index.ts (2)
  • getFileExtension (24-24)
  • IMAGE_FILE_EXTENSIONS (15-15)
packages/ai-workspace-common/src/components/canvas/workflow-variables/constants.ts (1)
  • IMAGE_FILE_EXTENSIONS (57-57)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
  • GitHub Check: build / Build
🔇 Additional comments (6)
packages/ai-workspace-common/src/components/import-resource/index.tsx (1)

47-55: LGTM! Good UX improvement to prevent saving during uploads.

The addition of hasUploadingFiles check effectively prevents users from saving while files are still uploading, which improves data integrity and user experience. The implementation is clean with proper memoization and correct dependencies.

packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/unsupported.tsx (2)

8-8: LGTM! Proper loading state implementation.

The addition of the isDownloading prop enables proper loading state visualization for async download actions, consistent with the coding guidelines for handling async button states.


23-29: LGTM! Button states properly wired.

The Button correctly reflects the download state with both loading and disabled props, providing good user feedback during the async operation. Based on learnings, this follows the recommended pattern for async actions in buttons.

packages/ai-workspace-common/src/components/canvas/workflow-variables/resource-type-form.tsx (1)

62-68: LGTM! Clean simplification.

The simplified getFileIconType function correctly determines icon types based on file extensions with a straightforward implementation. The removal of multi-type logic reduces complexity while maintaining functionality.

packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx (2)

156-160: LGTM! Proper extraction of download logic into custom hook.

The refactoring to use useDownloadFile hook follows the coding guideline to extract complex logic into custom hooks. The implementation is clean with proper callback memoization and correct dependencies. Based on learnings, this improves code organization and maintainability.


236-236: LGTM! Download state properly propagated.

The isDownloading state is correctly passed to UnsupportedRenderer, enabling proper loading state visualization in the UI, which aligns with the pattern established across the PR.

@mrcfps mrcfps merged commit 6ebf774 into main Dec 18, 2025
6 checks passed
@mrcfps mrcfps deleted the staging branch December 18, 2025 11:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants