fix: optimize FilePreview performance with content truncation and rendering improvements #1857
Conversation
…rt, markdown truncation, and detailed workflow abort logging.
…ode files from 1000 to 2000.
WalkthroughEnhanced observability in backend abort flows with structured, phase-based logging and elapsed-time metrics; refactored frontend file preview to support card/preview modes with truncation and i18n notices; broadened syntax-highlighting language support and added UI layout containment and conditional banner rendering. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~30 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
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/utils/file-type.ts (1)
20-122: Verify that all new language mappings are supported by the syntax highlighter.Many languages added to the mapping (java, c, cpp, csharp, go, rust, ruby, php, swift, kotlin, scala, lua, perl, r, scss, sass, less, vue, svelte, yaml, toml, xml, fish, powershell, dockerfile, makefile, cmake, nginx, diff, ini, latex, log) are not in the
SUPPORTED_LANGUAGESset insyntax-highlighter.tsx. These will fall back to plaintext highlighting, which may not provide users with the expected syntax highlighting experience for common languages like Java, C++, Go, Rust, Ruby, PHP, YAML, and SCSS.Consider either:
- Adding support for these languages to
syntax-highlighter.tsxvia shiki's web bundle- Limiting the file type mappings to only those languages that are actually supported
- Documenting the limitation for users
🧹 Nitpick comments (5)
packages/ai-workspace-common/src/modules/artifacts/code-runner/syntax-highlighter.tsx (1)
52-55: Consider adding a warning log for unsupported languages.The fallback to plaintext is correct, but silently falling back may make debugging harder when users expect syntax highlighting for a language that's actually unsupported.
// Fall back to plaintext for unsupported languages const lang = SUPPORTED_LANGUAGES.has(language) ? language : 'plaintext'; + if (!SUPPORTED_LANGUAGES.has(language)) { + console.debug(`SyntaxHighlighter: Language "${language}" not supported, using plaintext`); + } const highlightedHtml = highlighter.codeToHtml(code, {packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/markdown.tsx (2)
21-29: Comment should be in English per coding guidelines.The comment "截断提示" should be translated to English.
-// 截断提示 +// Truncation notice banner const TruncationNotice = memo(({ maxLines }: { maxLines: number }) => {
7-19: Consider extracting shared truncation utilities to reduce duplication.The truncation constants (
MAX_CARD_LINES,MAX_CARD_CHARS, etc.),truncateContentfunction, andTruncationNoticecomponent are duplicated incode.tsx. Consider extracting these to a shared utility file.A shared file like
file-preview/utils.tscould export:
- Truncation constants
truncateContentfunctionTruncationNoticecomponentpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.tsx (2)
22-22: Multiple comments in Chinese violate coding guidelines.Lines 22, 41, 51, 84, 126, 134, 141, and 165 contain Chinese comments. Per coding guidelines, all code comments must be written in English.
-// 截断提示 +// Truncation notice banner const TruncationNotice = memo(({ maxLines }: { maxLines: number }) => {And similarly translate other comments:
- Line 41: "根据 source 使用不同的截断限制" → "Use different truncation limits based on source mode"
- Line 51: "Preview 模式下使用 CodeViewer" → "Use CodeViewer for preview mode (Monaco Editor has virtualization)"
- Line 84: Already in English
- Line 126: "支持预览的语言类型" → "Languages that support preview mode"
- Line 134: "Card 模式或不支持预览的语言" → "Card mode or non-previewable languages use CardRenderer"
- Line 141: "Preview 模式且支持预览" → "Preview mode with previewable language uses PreviewRenderer"
- Line 165: "Card 模式不显示截断提示" → "Card mode does not show truncation notice"
8-30: Truncation utilities are duplicated with markdown.tsx.The truncation constants,
truncateContentfunction, andTruncationNoticecomponent are identical to those inmarkdown.tsx. This violates the DRY principle.Consider creating a shared file
file-preview/truncation.ts:// Truncation limits export const MAX_CARD_LINES = 20; export const MAX_CARD_CHARS = 2000; export const MAX_PREVIEW_LINES = 2000; export const MAX_PREVIEW_CHARS = 100000; export const truncateContent = (content: string, maxLines: number, maxChars: number) => { const lines = content.split('\n'); if (lines.length <= maxLines && content.length <= maxChars) { return { content, isTruncated: false }; } return { content: lines.slice(0, maxLines).join('\n').slice(0, maxChars), isTruncated: true }; };And a shared
TruncationNoticecomponent infile-preview/truncation-notice.tsx.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (13)
apps/api/src/modules/action/action.service.ts(6 hunks)apps/api/src/modules/skill/skill-invoker.service.ts(6 hunks)apps/api/src/modules/workflow/workflow.controller.ts(3 hunks)packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.tsx(1 hunks)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/markdown.tsx(1 hunks)packages/ai-workspace-common/src/components/markdown/plugins/tool-call/product-card.tsx(1 hunks)packages/ai-workspace-common/src/components/result-message/index.tsx(2 hunks)packages/ai-workspace-common/src/modules/artifacts/code-runner/monaco-editor/SimpleTextEditor.tsx(1 hunks)packages/ai-workspace-common/src/modules/artifacts/code-runner/syntax-highlighter.tsx(2 hunks)packages/ai-workspace-common/src/utils/file-type.ts(2 hunks)packages/i18n/src/en-US/ui.ts(1 hunks)packages/i18n/src/zh-Hans/ui.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (25)
**/*.{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 + binstead ofa+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:
apps/api/src/modules/workflow/workflow.controller.tspackages/i18n/src/en-US/ui.tspackages/ai-workspace-common/src/modules/artifacts/code-runner/monaco-editor/SimpleTextEditor.tsxapps/api/src/modules/action/action.service.tspackages/ai-workspace-common/src/modules/artifacts/code-runner/syntax-highlighter.tsxpackages/ai-workspace-common/src/components/result-message/index.tsxpackages/ai-workspace-common/src/components/markdown/plugins/tool-call/product-card.tsxpackages/i18n/src/zh-Hans/ui.tspackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/markdown.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsxapps/api/src/modules/skill/skill-invoker.service.tspackages/ai-workspace-common/src/utils/file-type.ts
**/*.{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:
apps/api/src/modules/workflow/workflow.controller.tspackages/i18n/src/en-US/ui.tspackages/ai-workspace-common/src/modules/artifacts/code-runner/monaco-editor/SimpleTextEditor.tsxapps/api/src/modules/action/action.service.tspackages/ai-workspace-common/src/modules/artifacts/code-runner/syntax-highlighter.tsxpackages/ai-workspace-common/src/components/result-message/index.tsxpackages/ai-workspace-common/src/components/markdown/plugins/tool-call/product-card.tsxpackages/i18n/src/zh-Hans/ui.tspackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/markdown.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsxapps/api/src/modules/skill/skill-invoker.service.tspackages/ai-workspace-common/src/utils/file-type.ts
**/*.{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:
apps/api/src/modules/workflow/workflow.controller.tspackages/i18n/src/en-US/ui.tspackages/ai-workspace-common/src/modules/artifacts/code-runner/monaco-editor/SimpleTextEditor.tsxapps/api/src/modules/action/action.service.tspackages/ai-workspace-common/src/modules/artifacts/code-runner/syntax-highlighter.tsxpackages/ai-workspace-common/src/components/result-message/index.tsxpackages/ai-workspace-common/src/components/markdown/plugins/tool-call/product-card.tsxpackages/i18n/src/zh-Hans/ui.tspackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/markdown.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsxapps/api/src/modules/skill/skill-invoker.service.tspackages/ai-workspace-common/src/utils/file-type.ts
**/*.{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:
apps/api/src/modules/workflow/workflow.controller.tspackages/i18n/src/en-US/ui.tspackages/ai-workspace-common/src/modules/artifacts/code-runner/monaco-editor/SimpleTextEditor.tsxapps/api/src/modules/action/action.service.tspackages/ai-workspace-common/src/modules/artifacts/code-runner/syntax-highlighter.tsxpackages/ai-workspace-common/src/components/result-message/index.tsxpackages/ai-workspace-common/src/components/markdown/plugins/tool-call/product-card.tsxpackages/i18n/src/zh-Hans/ui.tspackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/markdown.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsxapps/api/src/modules/skill/skill-invoker.service.tspackages/ai-workspace-common/src/utils/file-type.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/03-typescript-guidelines.mdc)
**/*.{ts,tsx}: Avoid usinganytype whenever possible - useunknowntype 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 theimport typesyntax
Group type imports separately from value imports
Minimize creating local type aliases for imported types
Files:
apps/api/src/modules/workflow/workflow.controller.tspackages/i18n/src/en-US/ui.tspackages/ai-workspace-common/src/modules/artifacts/code-runner/monaco-editor/SimpleTextEditor.tsxapps/api/src/modules/action/action.service.tspackages/ai-workspace-common/src/modules/artifacts/code-runner/syntax-highlighter.tsxpackages/ai-workspace-common/src/components/result-message/index.tsxpackages/ai-workspace-common/src/components/markdown/plugins/tool-call/product-card.tsxpackages/i18n/src/zh-Hans/ui.tspackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/markdown.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsxapps/api/src/modules/skill/skill-invoker.service.tspackages/ai-workspace-common/src/utils/file-type.ts
**/*.{js,ts,jsx,tsx,css,json}
📄 CodeRabbit inference engine (.cursor/rules/04-code-formatting.mdc)
Maximum line length of 100 characters
Files:
apps/api/src/modules/workflow/workflow.controller.tspackages/i18n/src/en-US/ui.tspackages/ai-workspace-common/src/modules/artifacts/code-runner/monaco-editor/SimpleTextEditor.tsxapps/api/src/modules/action/action.service.tspackages/ai-workspace-common/src/modules/artifacts/code-runner/syntax-highlighter.tsxpackages/ai-workspace-common/src/components/result-message/index.tsxpackages/ai-workspace-common/src/components/markdown/plugins/tool-call/product-card.tsxpackages/i18n/src/zh-Hans/ui.tspackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/markdown.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsxapps/api/src/modules/skill/skill-invoker.service.tspackages/ai-workspace-common/src/utils/file-type.ts
**/*.{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:
apps/api/src/modules/workflow/workflow.controller.tspackages/i18n/src/en-US/ui.tspackages/ai-workspace-common/src/modules/artifacts/code-runner/monaco-editor/SimpleTextEditor.tsxapps/api/src/modules/action/action.service.tspackages/ai-workspace-common/src/modules/artifacts/code-runner/syntax-highlighter.tsxpackages/ai-workspace-common/src/components/result-message/index.tsxpackages/ai-workspace-common/src/components/markdown/plugins/tool-call/product-card.tsxpackages/i18n/src/zh-Hans/ui.tspackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/markdown.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsxapps/api/src/modules/skill/skill-invoker.service.tspackages/ai-workspace-common/src/utils/file-type.ts
**/*.{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:
apps/api/src/modules/workflow/workflow.controller.tspackages/i18n/src/en-US/ui.tspackages/ai-workspace-common/src/modules/artifacts/code-runner/monaco-editor/SimpleTextEditor.tsxapps/api/src/modules/action/action.service.tspackages/ai-workspace-common/src/modules/artifacts/code-runner/syntax-highlighter.tsxpackages/ai-workspace-common/src/components/result-message/index.tsxpackages/ai-workspace-common/src/components/markdown/plugins/tool-call/product-card.tsxpackages/i18n/src/zh-Hans/ui.tspackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/markdown.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsxapps/api/src/modules/skill/skill-invoker.service.tspackages/ai-workspace-common/src/utils/file-type.ts
apps/api/src/**/*.{controller,service}.ts
📄 CodeRabbit inference engine (.cursor/rules/06-api-structure.mdc)
Implement proper error handling in API modules
Files:
apps/api/src/modules/workflow/workflow.controller.tsapps/api/src/modules/action/action.service.tsapps/api/src/modules/skill/skill-invoker.service.ts
apps/api/src/**/*.controller.ts
📄 CodeRabbit inference engine (.cursor/rules/06-api-structure.mdc)
Document APIs with OpenAPI specifications
Files:
apps/api/src/modules/workflow/workflow.controller.ts
**/*.{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:
apps/api/src/modules/workflow/workflow.controller.tspackages/i18n/src/en-US/ui.tspackages/ai-workspace-common/src/modules/artifacts/code-runner/monaco-editor/SimpleTextEditor.tsxapps/api/src/modules/action/action.service.tspackages/ai-workspace-common/src/modules/artifacts/code-runner/syntax-highlighter.tsxpackages/ai-workspace-common/src/components/result-message/index.tsxpackages/ai-workspace-common/src/components/markdown/plugins/tool-call/product-card.tsxpackages/i18n/src/zh-Hans/ui.tspackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/markdown.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsxapps/api/src/modules/skill/skill-invoker.service.tspackages/ai-workspace-common/src/utils/file-type.ts
**/*.{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:
apps/api/src/modules/workflow/workflow.controller.tspackages/i18n/src/en-US/ui.tspackages/ai-workspace-common/src/modules/artifacts/code-runner/monaco-editor/SimpleTextEditor.tsxapps/api/src/modules/action/action.service.tspackages/ai-workspace-common/src/modules/artifacts/code-runner/syntax-highlighter.tsxpackages/ai-workspace-common/src/components/result-message/index.tsxpackages/ai-workspace-common/src/components/markdown/plugins/tool-call/product-card.tsxpackages/i18n/src/zh-Hans/ui.tspackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/markdown.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsxapps/api/src/modules/skill/skill-invoker.service.tspackages/ai-workspace-common/src/utils/file-type.ts
**/*.{tsx,ts,json}
📄 CodeRabbit inference engine (.cursor/rules/09-i18n-guidelines.mdc)
Support dynamic content with placeholders in translations
Files:
apps/api/src/modules/workflow/workflow.controller.tspackages/i18n/src/en-US/ui.tspackages/ai-workspace-common/src/modules/artifacts/code-runner/monaco-editor/SimpleTextEditor.tsxapps/api/src/modules/action/action.service.tspackages/ai-workspace-common/src/modules/artifacts/code-runner/syntax-highlighter.tsxpackages/ai-workspace-common/src/components/result-message/index.tsxpackages/ai-workspace-common/src/components/markdown/plugins/tool-call/product-card.tsxpackages/i18n/src/zh-Hans/ui.tspackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/markdown.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsxapps/api/src/modules/skill/skill-invoker.service.tspackages/ai-workspace-common/src/utils/file-type.ts
**/*.{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-4orp-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:
apps/api/src/modules/workflow/workflow.controller.tspackages/i18n/src/en-US/ui.tspackages/ai-workspace-common/src/modules/artifacts/code-runner/monaco-editor/SimpleTextEditor.tsxapps/api/src/modules/action/action.service.tspackages/ai-workspace-common/src/modules/artifacts/code-runner/syntax-highlighter.tsxpackages/ai-workspace-common/src/components/result-message/index.tsxpackages/ai-workspace-common/src/components/markdown/plugins/tool-call/product-card.tsxpackages/i18n/src/zh-Hans/ui.tspackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/markdown.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsxapps/api/src/modules/skill/skill-invoker.service.tspackages/ai-workspace-common/src/utils/file-type.ts
**/*.{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:
apps/api/src/modules/workflow/workflow.controller.tspackages/i18n/src/en-US/ui.tspackages/ai-workspace-common/src/modules/artifacts/code-runner/monaco-editor/SimpleTextEditor.tsxapps/api/src/modules/action/action.service.tspackages/ai-workspace-common/src/modules/artifacts/code-runner/syntax-highlighter.tsxpackages/ai-workspace-common/src/components/result-message/index.tsxpackages/ai-workspace-common/src/components/markdown/plugins/tool-call/product-card.tsxpackages/i18n/src/zh-Hans/ui.tspackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/markdown.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsxapps/api/src/modules/skill/skill-invoker.service.tspackages/ai-workspace-common/src/utils/file-type.ts
**/*.{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:
apps/api/src/modules/workflow/workflow.controller.tspackages/i18n/src/en-US/ui.tspackages/ai-workspace-common/src/modules/artifacts/code-runner/monaco-editor/SimpleTextEditor.tsxapps/api/src/modules/action/action.service.tspackages/ai-workspace-common/src/modules/artifacts/code-runner/syntax-highlighter.tsxpackages/ai-workspace-common/src/components/result-message/index.tsxpackages/ai-workspace-common/src/components/markdown/plugins/tool-call/product-card.tsxpackages/i18n/src/zh-Hans/ui.tspackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/markdown.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsxapps/api/src/modules/skill/skill-invoker.service.tspackages/ai-workspace-common/src/utils/file-type.ts
**/{i18n,locales,translations,lang}/**/*.{json,ts,tsx,js,jsx,properties}
📄 CodeRabbit inference engine (.cursor/rules/00-language-priority.mdc)
Use Chinese for all user-facing communication
Files:
packages/i18n/src/en-US/ui.tspackages/i18n/src/zh-Hans/ui.ts
packages/i18n/src/{en-US,zh-Hans}/**
📄 CodeRabbit inference engine (.cursor/rules/09-i18n-guidelines.mdc)
Add new translation keys to both language files (en-US and zh-Hans)
Files:
packages/i18n/src/en-US/ui.tspackages/i18n/src/zh-Hans/ui.ts
packages/i18n/src/**
📄 CodeRabbit inference engine (.cursor/rules/09-i18n-guidelines.mdc)
packages/i18n/src/**: Maintain consistency in translation key naming conventions
Use descriptive translation keys that reflect the content
Group related translation keys together in the translation file structure
Use namespaces for different sections of the application in translation keys
Follow a hierarchical structure for nested components in translation key organization
Files:
packages/i18n/src/en-US/ui.tspackages/i18n/src/zh-Hans/ui.ts
**/*.{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/modules/artifacts/code-runner/monaco-editor/SimpleTextEditor.tsxpackages/ai-workspace-common/src/modules/artifacts/code-runner/syntax-highlighter.tsxpackages/ai-workspace-common/src/components/result-message/index.tsxpackages/ai-workspace-common/src/components/markdown/plugins/tool-call/product-card.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/markdown.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.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/modules/artifacts/code-runner/monaco-editor/SimpleTextEditor.tsxpackages/ai-workspace-common/src/modules/artifacts/code-runner/syntax-highlighter.tsxpackages/ai-workspace-common/src/components/result-message/index.tsxpackages/ai-workspace-common/src/components/markdown/plugins/tool-call/product-card.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/markdown.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.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/modules/artifacts/code-runner/monaco-editor/SimpleTextEditor.tsxpackages/ai-workspace-common/src/modules/artifacts/code-runner/syntax-highlighter.tsxpackages/ai-workspace-common/src/components/result-message/index.tsxpackages/ai-workspace-common/src/components/markdown/plugins/tool-call/product-card.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/markdown.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.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/modules/artifacts/code-runner/monaco-editor/SimpleTextEditor.tsxpackages/ai-workspace-common/src/modules/artifacts/code-runner/syntax-highlighter.tsxpackages/ai-workspace-common/src/components/result-message/index.tsxpackages/ai-workspace-common/src/components/markdown/plugins/tool-call/product-card.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/markdown.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.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/modules/artifacts/code-runner/monaco-editor/SimpleTextEditor.tsxpackages/ai-workspace-common/src/modules/artifacts/code-runner/syntax-highlighter.tsxpackages/ai-workspace-common/src/components/result-message/index.tsxpackages/ai-workspace-common/src/components/markdown/plugins/tool-call/product-card.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/markdown.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.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/result-message/index.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
🧠 Learnings (37)
📚 Learning: 2025-11-25T03:04:12.836Z
Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/06-api-structure.mdc:0-0
Timestamp: 2025-11-25T03:04:12.836Z
Learning: Applies to apps/api/src/{auth,user,project,canvas,rag,knowledge,search,skill,share,code-artifact}/**/*.{controller,service}.ts : Use dependency injection for module dependencies in NestJS
Applied to files:
apps/api/src/modules/workflow/workflow.controller.ts
📚 Learning: 2025-11-25T03:04:12.836Z
Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/06-api-structure.mdc:0-0
Timestamp: 2025-11-25T03:04:12.836Z
Learning: Applies to apps/api/src/{auth,user,project,canvas,rag,knowledge,search,skill,share,code-artifact}/**/*.{ts,tsx} : Follow NestJS module structure with controllers, services, and DTOs in dedicated module directories
Applied to files:
apps/api/src/modules/workflow/workflow.controller.ts
📚 Learning: 2025-11-25T03:04:41.334Z
Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/09-i18n-guidelines.mdc:0-0
Timestamp: 2025-11-25T03:04:41.334Z
Learning: Applies to packages/i18n/src/{en-US,zh-Hans}/** : Add new translation keys to both language files (en-US and zh-Hans)
Applied to files:
packages/i18n/src/en-US/ui.tspackages/i18n/src/zh-Hans/ui.ts
📚 Learning: 2025-11-25T03:04:41.334Z
Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/09-i18n-guidelines.mdc:0-0
Timestamp: 2025-11-25T03:04:41.334Z
Learning: Applies to **/*.{tsx,ts} : Ensure all user-facing text is translatable
Applied to files:
packages/i18n/src/en-US/ui.tspackages/i18n/src/zh-Hans/ui.tspackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/markdown.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.tsx
📚 Learning: 2025-11-25T03:04:41.334Z
Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/09-i18n-guidelines.mdc:0-0
Timestamp: 2025-11-25T03:04:41.334Z
Learning: Applies to **/*.{tsx,ts,json} : Support dynamic content with placeholders in translations
Applied to files:
packages/i18n/src/en-US/ui.tspackages/i18n/src/zh-Hans/ui.tspackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/markdown.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
📚 Learning: 2025-11-25T03:04:41.334Z
Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/09-i18n-guidelines.mdc:0-0
Timestamp: 2025-11-25T03:04:41.334Z
Learning: Applies to packages/i18n/src/** : Use descriptive translation keys that reflect the content
Applied to files:
packages/i18n/src/en-US/ui.tspackages/i18n/src/zh-Hans/ui.ts
📚 Learning: 2025-11-25T03:03:19.158Z
Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/00-language-priority.mdc:0-0
Timestamp: 2025-11-25T03:03:19.158Z
Learning: Applies to **/{i18n,locales,translations,lang}/**/*.{json,ts,tsx,js,jsx,properties} : Use Chinese for all user-facing communication
Applied to files:
packages/i18n/src/en-US/ui.tspackages/i18n/src/zh-Hans/ui.ts
📚 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} : Support screen readers with semantic HTML elements
Applied to files:
packages/ai-workspace-common/src/modules/artifacts/code-runner/syntax-highlighter.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.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,css,scss,less} : Ensure proper spacing between card elements
Applied to files:
packages/ai-workspace-common/src/components/result-message/index.tsxpackages/ai-workspace-common/src/components/markdown/plugins/tool-call/product-card.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/markdown.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.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,css,scss,less} : Use subtle borders for card separation
Applied to files:
packages/ai-workspace-common/src/components/result-message/index.tsxpackages/ai-workspace-common/src/components/markdown/plugins/tool-call/product-card.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/markdown.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.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,css,scss,less} : Maintain consistent padding inside cards (`p-4` or `p-6`)
Applied to files:
packages/ai-workspace-common/src/components/result-message/index.tsxpackages/ai-workspace-common/src/components/markdown/plugins/tool-call/product-card.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/markdown.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,css,scss,less} : Apply light shadows (`shadow-sm`) for card elevation
Applied to files:
packages/ai-workspace-common/src/components/markdown/plugins/tool-call/product-card.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,css,scss,less} : Use consistent border radius (`rounded-lg`) for all cards
Applied to files:
packages/ai-workspace-common/src/components/markdown/plugins/tool-call/product-card.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,css,scss,less} : Use consistent padding, border radius, and hover states for all buttons
Applied to files:
packages/ai-workspace-common/src/components/markdown/plugins/tool-call/product-card.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} : Provide alternative text for images and icons
Applied to files:
packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/markdown.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.tsxpackages/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/canvas-resources/file-preview/markdown.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
📚 Learning: 2025-11-25T03:03:31.945Z
Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/01-code-style.mdc:0-0
Timestamp: 2025-11-25T03:03:31.945Z
Learning: Applies to **/*.{jsx,tsx} : Implement fallback UI for components that might fail in React
Applied to files:
packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/markdown.tsxpackages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.tsx
📚 Learning: 2025-11-25T03:02:45.779Z
Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T03:02:45.779Z
Learning: Applies to **/*.{jsx,tsx} : Always wrap pure components with React.memo to prevent unnecessary re-renders
Applied to files:
packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/markdown.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: Extract repeated JSX patterns into reusable components
Applied to files:
packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/markdown.tsx
📚 Learning: 2025-11-25T03:04:41.334Z
Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/09-i18n-guidelines.mdc:0-0
Timestamp: 2025-11-25T03:04:41.334Z
Learning: Applies to **/*.{tsx,ts} : Use the translation wrapper component and useTranslation hook in components
Applied to files:
packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.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 **/*.{jsx,tsx} : Organize function components in order: imports, type definitions, constants, component function, hook calls, event handlers, helper render functions, JSX return
Applied to files:
packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.tsx
📚 Learning: 2025-11-25T03:02:45.779Z
Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T03:02:45.779Z
Learning: Applies to **/*.{jsx,tsx} : Always split nested components with closures into separate components to avoid performance issues and improve code maintainability
Applied to files:
packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.tsx
📚 Learning: 2025-11-25T03:03:31.945Z
Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/01-code-style.mdc:0-0
Timestamp: 2025-11-25T03:03:31.945Z
Learning: Applies to **/*.{jsx,tsx} : Always avoid inline object/array creation in render to prevent unnecessary re-renders in React
Applied to files:
packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.tsx
📚 Learning: 2025-11-25T03:04:51.017Z
Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/10-testing-guidelines.mdc:0-0
Timestamp: 2025-11-25T03:04:51.017Z
Learning: Applies to **/*.{test,spec}.{ts,tsx,js,jsx} : Test component rendering, interactions, prop handling, state changes, error states and edge cases in component tests
Applied to files:
packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.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} : Include appropriate ARIA attributes for complex components
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 **/*.{ts,tsx,js,jsx} : Ensure code is well-tested and documented
Applied to files:
packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
📚 Learning: 2025-11-25T03:03:19.158Z
Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/00-language-priority.mdc:0-0
Timestamp: 2025-11-25T03:03:19.158Z
Learning: Applies to **/*.{js,ts,tsx,jsx,py,java,cpp,c,cs,rb,go,rs,php,swift,kt,scala,r,m,mm,sql} : Document complex logic, edge cases, and important implementation details
Applied to files:
packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsxpackages/ai-workspace-common/src/utils/file-type.ts
📚 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 **/*.{jsx,tsx} : Use ternary operators or && for conditional rendering in React
Applied to files:
packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
📚 Learning: 2025-11-25T03:03:19.158Z
Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/00-language-priority.mdc:0-0
Timestamp: 2025-11-25T03:03:19.158Z
Learning: Applies to **/*.{js,ts,tsx,jsx,py,java,cpp,c,cs,rb,go,rs,php,swift,kt,scala,r,m,mm,sql} : Keep comments up-to-date when code changes
Applied to files:
packages/ai-workspace-common/src/utils/file-type.ts
📚 Learning: 2025-11-25T03:03:43.116Z
Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/03-typescript-guidelines.mdc:0-0
Timestamp: 2025-11-25T03:03:43.116Z
Learning: Applies to **/*.{ts,tsx} : Prefer extending existing types over creating entirely new types
Applied to files:
packages/ai-workspace-common/src/utils/file-type.ts
📚 Learning: 2025-11-25T03:03:19.158Z
Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/00-language-priority.mdc:0-0
Timestamp: 2025-11-25T03:03:19.158Z
Learning: Applies to **/*.{js,ts,tsx,jsx,py,java,cpp,c,cs,rb,go,rs,php,swift,kt,scala,r,m,mm,sql} : Avoid abbreviations unless they are universally understood
Applied to files:
packages/ai-workspace-common/src/utils/file-type.ts
📚 Learning: 2025-11-25T03:03:43.116Z
Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/03-typescript-guidelines.mdc:0-0
Timestamp: 2025-11-25T03:03:43.116Z
Learning: Applies to **/*.{ts,tsx} : Minimize creating local type aliases for imported types
Applied to files:
packages/ai-workspace-common/src/utils/file-type.ts
📚 Learning: 2025-11-25T03:03:19.158Z
Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/00-language-priority.mdc:0-0
Timestamp: 2025-11-25T03:03:19.158Z
Learning: Applies to **/*.{js,ts,tsx,jsx,py,java,cpp,c,cs,rb,go,rs,php,swift,kt,scala,r,m,mm,sql} : Use clear, descriptive names that indicate purpose
Applied to files:
packages/ai-workspace-common/src/utils/file-type.ts
📚 Learning: 2025-11-25T03:03:19.158Z
Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/00-language-priority.mdc:0-0
Timestamp: 2025-11-25T03:03:19.158Z
Learning: Applies to **/*.{js,ts,tsx,jsx,py,java,cpp,c,cs,rb,go,rs,php,swift,kt,scala,r,m,mm,sql} : All variable names, function names, class names, and other identifiers MUST use English words
Applied to files:
packages/ai-workspace-common/src/utils/file-type.ts
📚 Learning: 2025-11-25T03:03:19.158Z
Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/00-language-priority.mdc:0-0
Timestamp: 2025-11-25T03:03:19.158Z
Learning: Applies to **/*.{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
Applied to files:
packages/ai-workspace-common/src/utils/file-type.ts
📚 Learning: 2025-11-25T03:03:19.158Z
Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/00-language-priority.mdc:0-0
Timestamp: 2025-11-25T03:03:19.158Z
Learning: Applies to **/*.{js,ts,tsx,jsx,py,java,cpp,c,cs,rb,go,rs,php,swift,kt,scala,r,m,mm,sql} : Use proper grammar and punctuation in comments
Applied to files:
packages/ai-workspace-common/src/utils/file-type.ts
📚 Learning: 2025-11-25T03:03:31.945Z
Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/01-code-style.mdc:0-0
Timestamp: 2025-11-25T03:03:31.945Z
Learning: Applies to **/*.{js,jsx,ts,tsx} : Avoid magic numbers and strings - use named constants in TypeScript/JavaScript
Applied to files:
packages/ai-workspace-common/src/utils/file-type.ts
🧬 Code graph analysis (6)
apps/api/src/modules/workflow/workflow.controller.ts (2)
packages/skill-template/src/engine/index.ts (1)
Logger(36-36)apps/api/src/utils/response.ts (1)
buildSuccessResponse(48-53)
apps/api/src/modules/action/action.service.ts (1)
packages/errors/src/errors.ts (1)
ActionResultNotFoundError(219-225)
packages/ai-workspace-common/src/components/markdown/plugins/tool-call/product-card.tsx (3)
packages/openapi-schema/src/types.gen.ts (1)
source(6257-6257)packages/request/src/requests/types.gen.ts (1)
source(6196-6196)packages/ai-workspace-common/src/requests/types.gen.ts (1)
source(6200-6200)
packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.tsx (3)
packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/types.ts (1)
SourceRendererProps(16-21)packages/ai-workspace-common/src/utils/file-type.ts (1)
getCodeLanguage(145-148)packages/ai-workspace-common/src/modules/artifacts/code-runner/syntax-highlighter.tsx (1)
SyntaxHighlighter(34-115)
packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx (4)
packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.tsx (2)
CodeRenderer(129-153)JsonRenderer(155-182)packages/openapi-schema/src/types.gen.ts (1)
language(4787-4787)packages/request/src/requests/types.gen.ts (1)
language(4738-4738)packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/markdown.tsx (1)
MarkdownRenderer(77-92)
apps/api/src/modules/skill/skill-invoker.service.ts (2)
apps/api/src/modules/tool/sandbox/scalebox.dto.ts (1)
error(214-220)packages/errors/src/errors.ts (1)
WorkflowExecutionNotFoundError(299-305)
⏰ 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 (15)
packages/ai-workspace-common/src/modules/artifacts/code-runner/monaco-editor/SimpleTextEditor.tsx (1)
38-45: LGTM! Correct fix for the banner visibility issue.The conditional rendering prevents the "AI is generating content" banner from displaying when generation is not active, directly addressing the issue mentioned in the PR objectives.
apps/api/src/modules/workflow/workflow.controller.ts (2)
1-1: LGTM! Logging infrastructure properly initialized.The Logger import and instantiation follow NestJS best practices and align with the dependency injection pattern used across the codebase.
Also applies to: 20-20
60-76: Excellent structured logging implementation for abort workflow.The phase-based logging (request → completed/failed) with elapsed time tracking provides clear observability into the abort workflow lifecycle. The structured format
[WORKFLOW_ABORT][REQ]is consistent with patterns in related services (action.service.ts, skill-invoker.service.ts), making log aggregation and analysis straightforward.apps/api/src/modules/action/action.service.ts (2)
639-721: Outstanding observability enhancement with comprehensive phase tracking.The structured logging in
abortActionFromReqprovides excellent visibility into the abort flow with:
- Clear phase progression (start → version_fallback → found → controller_aborted/no_controller → queue_job_removed → completed)
- Method indicators (same_pod vs. cross_pod_or_queued) for understanding execution paths
- Elapsed time tracking at key milestones for performance monitoring
- Consistent
[WORKFLOW_ABORT][ACTION]prefix for easy log filteringThis level of detail is particularly valuable for debugging cross-pod abort scenarios and queue-to-execution transitions.
776-776: LGTM! Database operation logging enhanced.The structured logging for database status updates includes helpful context like
updatedCountand clear phase indicators (status_updated,skip_update), making it easier to track whether abort requests successfully modified the database state.Also applies to: 780-780
apps/api/src/modules/skill/skill-invoker.service.ts (2)
416-425: LGTM! Poll-based abort detection logging enhanced.The structured logging for cross-pod abort detection provides clear visibility into the polling mechanism with
[WORKFLOW_ABORT][POLL]prefix, phase indicators (cross_pod_abort_detected,check_failed), and proper context (resultId, version, error).
2076-2172: Excellent comprehensive logging for workflow abort execution.The structured logging implementation in
abortWorkflowExecutionprovides exceptional observability:
- Clear phase progression: start → found → nodes_found → per-node abort → completed
- Rich context: Includes executionId, currentStatus, canvasId, node counts, and per-node outcomes
- Comprehensive metrics: Final log captures abortedNodes count, database update counts, and elapsed time
- Granular per-node tracking: Individual success/failure logs for each node abort operation
- Consistent format:
[WORKFLOW_ABORT][SVC]prefix aligns with patterns in workflow.controller.ts and action.service.tsThe success count calculation correctly analyzes
Promise.allSettledresults to distinguish fulfilled promises with success flags, and the captured database update results provide valuable confirmation of state changes.packages/ai-workspace-common/src/components/result-message/index.tsx (2)
91-97: Verify the intrinsic size estimate for typical tool message content.Similar to the AIMessageCard optimization, the
containIntrinsicSize: '0 300px'should be validated against typical ToolCall component heights. The 3x larger estimate (compared to AI messages) suggests tool cards are expected to be more substantial, but confirming this with actual usage data would help prevent layout shifts during scrolling.
39-45: ThecontainIntrinsicSizevalues may not account for theautokeyword. When usingcontain-intrinsic-size: auto <length>, the browser stores the actual rendered size if the element is ever "normally rendered", allowing offscreen elements with content-visibility: auto to benefit from size containment without requiring precise estimates. If the implementation uses just'0 100px'without theautokeyword, verify that the 100px and 300px placeholders reasonably estimate typical message heights. If usingauto 100px, the hardcoded values serve only as initial fallbacks and will be replaced by measured sizes, making validation less critical.packages/i18n/src/zh-Hans/ui.ts (1)
4322-4324: The English translation forfilePreview.contentTruncatedalready exists inpackages/i18n/src/en-US/ui.tswith the corresponding value. Both language files are properly synchronized, and the coding guideline is being followed correctly.Likely an incorrect or invalid review comment.
packages/i18n/src/en-US/ui.ts (1)
4291-4294: LGTM! Well-structured i18n addition.The new
filePreview.contentTruncatedtranslation key follows the established naming conventions, uses proper placeholder syntax for dynamic content ({{maxLines}}), and the AI summary confirms a corresponding Chinese translation exists inzh-Hans/ui.ts.packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx (1)
51-51: Good addition for JavaScript MIME type handling.Adding explicit handling for
application/javascriptensures JavaScript files are correctly categorized as code files for proper syntax highlighting.packages/ai-workspace-common/src/modules/artifacts/code-runner/syntax-highlighter.tsx (1)
4-27: Good defensive approach with centralized language support.The
SUPPORTED_LANGUAGESset and plaintext fallback (lines 52-55) ensure the highlighter won't fail for unsupported languages. This resolves the empty rendering issue mentioned in the PR objectives.packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.tsx (2)
126-152: Well-designed routing logic for code rendering.The
PREVIEWABLE_LANGUAGESset and theCodeRendererrouting logic cleanly separate previewable languages (html, markdown, mermaid, svg) from code-only languages. This addresses the PR objective of using CardRenderer for non-previewable languages.
155-182: JsonRenderer correctly implements mode-aware truncation.The component properly differentiates between card and preview modes, applying appropriate truncation limits and only showing the truncation notice in preview mode. Good use of
useMemofor performance.
| return ( | ||
| <CodeRenderer | ||
| source={rendererSource} | ||
| fileContent={fileContent} | ||
| file={file} | ||
| language={language!} | ||
| activeTab={activeTab} | ||
| onTabChange={handleTabChange} | ||
| /> | ||
| ); |
There was a problem hiding this comment.
Non-null assertion on potentially undefined language is unsafe.
When extractContentCategory returns { category: 'code' } for application/javascript (line 51), language will be undefined. The non-null assertion language! bypasses TypeScript's null checking.
<CodeRenderer
source={rendererSource}
fileContent={fileContent}
file={file}
- language={language!}
+ language={language}
activeTab={activeTab}
onTabChange={handleTabChange}
/>Note: The CodeRenderer already handles this case with language || getCodeLanguage(file.name) || 'text' fallback, so removing the assertion is safe.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| return ( | |
| <CodeRenderer | |
| source={rendererSource} | |
| fileContent={fileContent} | |
| file={file} | |
| language={language!} | |
| activeTab={activeTab} | |
| onTabChange={handleTabChange} | |
| /> | |
| ); | |
| return ( | |
| <CodeRenderer | |
| source={rendererSource} | |
| fileContent={fileContent} | |
| file={file} | |
| language={language} | |
| activeTab={activeTab} | |
| onTabChange={handleTabChange} | |
| /> | |
| ); |
🤖 Prompt for AI Agents
In
packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/index.tsx
around lines 211 to 220, the code uses a non-null assertion on `language!` which
is unsafe because `language` can be undefined for some mime types; remove the
`!` and pass a safe fallback instead (e.g., use the same fallback logic as
CodeRenderer: `language || getCodeLanguage(file.name) || 'text'`) so callers
never receive `undefined`.
| activeTab={activeTab!} | ||
| onTabChange={onTabChange!} |
There was a problem hiding this comment.
Non-null assertions on optional props are unsafe.
activeTab and onTabChange are optional in SourceRendererProps, but are used with non-null assertions. This could cause runtime errors if the parent doesn't provide these props.
<CodeViewer
code={textContent}
language="markdown"
title={file.name}
entityId={file.fileId}
isGenerating={false}
- activeTab={activeTab!}
- onTabChange={onTabChange!}
+ activeTab={activeTab ?? 'preview'}
+ onTabChange={onTabChange ?? (() => {})}
onClose={() => {}}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| activeTab={activeTab!} | |
| onTabChange={onTabChange!} | |
| <CodeViewer | |
| code={textContent} | |
| language="markdown" | |
| title={file.name} | |
| entityId={file.fileId} | |
| isGenerating={false} | |
| activeTab={activeTab ?? 'preview'} | |
| onTabChange={onTabChange ?? (() => {})} | |
| onClose={() => {}} |
🤖 Prompt for AI Agents
In
packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/markdown.tsx
around lines 63 to 64, the component uses non-null assertions on optional props
activeTab and onTabChange which can throw at runtime; change the usage to safely
handle undefined by either (1) making the props required in SourceRendererProps
if they must always be provided, or (2) providing safe defaults and guards where
used—e.g., only render tabs or call onTabChange when defined, and pass a default
activeTab value when undefined—so remove the `!` assertions and add null checks
or default values accordingly.
| style={ | ||
| source === 'card' | ||
| ? { | ||
| contentVisibility: 'auto', | ||
| containIntrinsicSize: '0 300px', | ||
| } | ||
| : undefined | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Memoize the style object to prevent unnecessary re-renders.
The inline style object is recreated on every render, which violates the React performance guideline to avoid inline object creation. This can trigger unnecessary re-renders even though the component uses React.memo.
Apply this diff to memoize the style object:
+ const cardStyle = useMemo(
+ () =>
+ source === 'card'
+ ? {
+ contentVisibility: 'auto',
+ containIntrinsicSize: '0 300px',
+ }
+ : undefined,
+ [source],
+ );
+
return (
<div
className={cn(
classNames,
'overflow-hidden flex flex-col',
source === 'card' ? 'rounded-lg border-[1px] border-solid border-refly-Card-Border' : '',
)}
- style={
- source === 'card'
- ? {
- contentVisibility: 'auto',
- containIntrinsicSize: '0 300px',
- }
- : undefined
- }
+ style={cardStyle}
>As per coding guidelines: "Always avoid inline object/array creation in render to prevent unnecessary re-renders."
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| style={ | |
| source === 'card' | |
| ? { | |
| contentVisibility: 'auto', | |
| containIntrinsicSize: '0 300px', | |
| } | |
| : undefined | |
| } | |
| const cardStyle = useMemo( | |
| () => | |
| source === 'card' | |
| ? { | |
| contentVisibility: 'auto', | |
| containIntrinsicSize: '0 300px', | |
| } | |
| : undefined, | |
| [source], | |
| ); | |
| return ( | |
| <div | |
| className={cn( | |
| classNames, | |
| 'overflow-hidden flex flex-col', | |
| source === 'card' ? 'rounded-lg border-[1px] border-solid border-refly-Card-Border' : '', | |
| )} | |
| style={cardStyle} | |
| > |
🤖 Prompt for AI Agents
In
packages/ai-workspace-common/src/components/markdown/plugins/tool-call/product-card.tsx
around lines 290 to 297, the inline style object is recreated on every render
causing unnecessary re-renders; wrap the conditional style in a useMemo that
returns the style object only when source === 'card' (and returns undefined
otherwise), with source as the dependency so the same object instance is reused
across renders, then replace the inline object with the memoized variable.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (9)
packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.tsx (9)
14-20: LGTM with a minor suggestion.The truncation logic is correct. Consider adding a brief JSDoc comment to document the return type and parameters for maintainability.
+/** + * Truncates content by line count and character limit. + * @returns Object with truncated content and flag indicating if truncation occurred. + */ const truncateContent = (content: string, maxLines: number, maxChars: number) => {
22-30: Well-implemented component with proper memoization and i18n.Component correctly uses
memo,useTranslation, and Tailwind CSS. Consider adding adisplayNamefor easier debugging in React DevTools.const TruncationNotice = memo(({ maxLines }: { maxLines: number }) => { const { t } = useTranslation(); return ( <div className="px-3 py-1.5 mb-2 text-xs text-gray-500 bg-gray-100/80 flex-shrink-0"> {t('filePreview.contentTruncated', { maxLines: maxLines.toLocaleString() })} </div> ); }); +TruncationNotice.displayName = 'TruncationNotice';
37-49: Consider memoizingrawContentto avoid repeated decoding.
TextDecoder().decode()is called on every render. While not expensive for small files, memoizing it ensures consistency with the component's optimization strategy.const CardRenderer = memo(({ source, fileContent, file, language }: CodeRendererProps) => { - const rawContent = new TextDecoder().decode(fileContent.data); + const rawContent = useMemo( + () => new TextDecoder().decode(fileContent.data), + [fileContent.data], + ); const detectedLanguage = language || getCodeLanguage(file.name) || 'text';
52-75: Extract inline empty functions to stable references.Inline arrow functions (
() => {}) create new references on each render, causing unnecessary re-renders in child components. Per coding guidelines, avoid inline object/array creation in render.+const noop = () => {}; + const CardRenderer = memo(({ source, fileContent, file, language }: CodeRendererProps) => { // ... existing code ... if (isPreview) { return ( <div className="h-full flex flex-col"> {isTruncated && <TruncationNotice maxLines={maxLines} />} <div className="flex-1 min-h-0"> <CodeViewer code={truncatedContent} language={detectedLanguage} title={file.name} entityId={file.fileId} isGenerating={false} activeTab="code" - onTabChange={() => {}} - onClose={() => {}} - onRequestFix={() => {}} + onTabChange={noop} + onClose={noop} + onRequestFix={noop} readOnly={true} type="text/plain" showActions={false} purePreview={true} /> </div> </div> ); }
86-99: WraphandleTabChangeinuseCallbackand memoizerawContent.Per coding guidelines, function props should use
useCallbackto maintain referential equality. Also,rawContentshould be memoized for consistency.+import { memo, useCallback, useMemo, useState } from 'react'; + const PreviewRenderer = memo( ({ fileContent, file, language, activeTab, onTabChange }: CodeRendererProps) => { - const rawContent = new TextDecoder().decode(fileContent.data); + const rawContent = useMemo( + () => new TextDecoder().decode(fileContent.data), + [fileContent.data], + ); const detectedLanguage = language || getCodeLanguage(file.name) || 'text'; const [tab, setTab] = useState<'code' | 'preview'>(activeTab || 'code'); const { content: textContent, isTruncated } = useMemo( () => truncateContent(rawContent, MAX_PREVIEW_LINES, MAX_PREVIEW_CHARS), [rawContent], ); - const handleTabChange = (v: 'code' | 'preview') => { + const handleTabChange = useCallback((v: 'code' | 'preview') => { setTab(v); onTabChange?.(v); - }; + }, [onTabChange]);
112-114: Extract inline empty functions to stable references.Same issue as CardRenderer -
onCloseandonRequestFixshould use stable references.Apply the same
noopconstant pattern suggested for CardRenderer:- onClose={() => {}} - onRequestFix={() => {}} + onClose={noop} + onRequestFix={noop}
129-153: Clean routing logic with proper memoization.The component correctly routes between
CardRendererandPreviewRendererbased on language capabilities. Consider addingdisplayNamefor debugging purposes.}, ); +CodeRenderer.displayName = 'CodeRenderer';
155-163: MemoizetextContentdecoding for consistency.Similar to other renderers, the
TextDecoder().decode()call should be memoized.export const JsonRenderer = memo(({ fileContent, source = 'card' }: SourceRendererProps) => { - const textContent = new TextDecoder().decode(fileContent.data); + const textContent = useMemo( + () => new TextDecoder().decode(fileContent.data), + [fileContent.data], + ); const { content: displayContent, isTruncated } = useMemo(
165-172: Clarify comment about truncation behavior.The comment "Card mode: no truncation notice" is slightly misleading since the content is still truncated - just without displaying the notice. Consider clarifying.
- // Card mode: no truncation notice + // Card mode: truncated content without displaying truncation notice if (source === 'card') {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.tsx(1 hunks)packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/markdown.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/markdown.tsx
🧰 Additional context used
📓 Path-based instructions (19)
**/*.{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/code.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 + binstead ofa+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/code.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/code.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/code.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/code.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/code.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/03-typescript-guidelines.mdc)
**/*.{ts,tsx}: Avoid usinganytype whenever possible - useunknowntype 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 theimport typesyntax
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/code.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/code.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/code.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/code.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/code.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/code.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/code.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/code.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/code.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-4orp-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/code.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/code.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/code.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/code.tsx
🧠 Learnings (13)
📚 Learning: 2025-11-25T03:04:41.334Z
Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/09-i18n-guidelines.mdc:0-0
Timestamp: 2025-11-25T03:04:41.334Z
Learning: Applies to **/*.{tsx,ts,json} : Support dynamic content with placeholders in translations
Applied to files:
packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.tsx
📚 Learning: 2025-11-25T03:04:41.334Z
Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/09-i18n-guidelines.mdc:0-0
Timestamp: 2025-11-25T03:04:41.334Z
Learning: Applies to **/*.{tsx,ts} : Ensure all user-facing text is translatable
Applied to files:
packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.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,css,scss,less} : Use subtle borders for card separation
Applied to files:
packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.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,css,scss,less} : Ensure proper spacing between card elements
Applied to files:
packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.tsx
📚 Learning: 2025-11-25T03:04:41.334Z
Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/09-i18n-guidelines.mdc:0-0
Timestamp: 2025-11-25T03:04:41.334Z
Learning: Applies to **/*.{tsx,ts} : Use the translation wrapper component and useTranslation hook in components
Applied to files:
packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.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} : Provide alternative text for images and icons
Applied to files:
packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.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/canvas-resources/file-preview/code.tsx
📚 Learning: 2025-11-25T03:03:31.945Z
Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/01-code-style.mdc:0-0
Timestamp: 2025-11-25T03:03:31.945Z
Learning: Applies to **/*.{jsx,tsx} : Implement fallback UI for components that might fail in React
Applied to files:
packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.tsx
📚 Learning: 2025-11-25T03:03:31.945Z
Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/01-code-style.mdc:0-0
Timestamp: 2025-11-25T03:03:31.945Z
Learning: Applies to **/*.{jsx,tsx} : Always avoid inline object/array creation in render to prevent unnecessary re-renders in React
Applied to files:
packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.tsx
📚 Learning: 2025-11-25T03:02:45.779Z
Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T03:02:45.779Z
Learning: Applies to **/*.{jsx,tsx} : Always wrap pure components with React.memo to prevent unnecessary re-renders
Applied to files:
packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.tsx
📚 Learning: 2025-11-25T03:02:45.779Z
Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T03:02:45.779Z
Learning: Applies to **/*.{jsx,tsx} : Always avoid inline object/array creation in render to prevent unnecessary re-renders
Applied to files:
packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.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 **/*.{jsx,tsx} : Use ternary operators or && for conditional rendering in React
Applied to files:
packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.tsx
📚 Learning: 2025-11-25T03:03:31.945Z
Learnt from: CR
Repo: refly-ai/refly PR: 0
File: .cursor/rules/01-code-style.mdc:0-0
Timestamp: 2025-11-25T03:03:31.945Z
Learning: Applies to **/*.{jsx,tsx} : Always use useMemo for expensive computations or complex object creation in React
Applied to files:
packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.tsx
🧬 Code graph analysis (1)
packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.tsx (3)
packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/types.ts (1)
SourceRendererProps(16-21)packages/ai-workspace-common/src/utils/file-type.ts (1)
getCodeLanguage(145-148)packages/ai-workspace-common/src/modules/artifacts/code-runner/syntax-highlighter.tsx (1)
SyntaxHighlighter(34-115)
⏰ 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 (4)
packages/ai-workspace-common/src/components/canvas/canvas-resources/file-preview/code.tsx (4)
6-6: Use explicit type import syntax.Per coding guidelines, types should be imported using the
import typesyntax. This is already correctly done here.
8-12: Verify the preview character limit matches requirements.The PR description states preview mode is limited to 500KB, but
MAX_PREVIEW_CHARSis set to100000(100KB). Please verify this is intentional or update to500000if 500KB was the intended limit.
32-34: LGTM!Interface extension is clean and follows TypeScript best practices.
126-127: LGTM!Using a
Setfor O(1) lookup is appropriate, and the comment provides useful context about the mapping source.
* fix: duplicate manual upload files when executing workflow app (#1829) * feat: Introduce `UseShareDataProvider` to control data source for shared content and refactor file ID handling for shared canvas data. * refactor: use `useRef` for stable references in `SkillResponse` and `replaceAll` for safer file ID replacement. * feat: Duplicate manual canvas files and update their references when duplicating a workflow app. * feat: Implement credit pack, voucher generation and sharing for template publishing #1771 (#1830) * Feat/credit pack (#1748) * feat: implement credit pack feature with enhanced subscription and onboarding - Add credit pack purchase functionality - Implement onboarding success modal with animation - Add form-based user onboarding system - Enhance subscription management with new pricing plans - Improve credit handling and error messaging - Add telemetry logging for user interactions - Update UI components and translations * refactor: remove unused schemas and enhance workflow execution polling - Deleted the schemas.ts file as it was no longer needed. - Updated use-workflow-execution-polling hook to include useSubscriptionStoreShallow for improved state management. * refactor: improve subscription component styling and logic - Refactored PriceOption and FeatureItem components for better performance and maintainability. - Updated Tailwind CSS classes for consistent styling across components. - Implemented optional chaining and nullish coalescing for safer property access. - Enhanced feature description display logic based on plan type. - Adjusted layout and spacing for improved user experience in subscription-related components. * feat: add currentPlan and source fields to checkout session models an… (#1753) feat: add currentPlan and source fields to checkout session models and requests - Introduced currentPlan and source fields in the CheckoutSession model for better tracking of subscription details. - Updated CreateCheckoutSessionRequest and CreateCreditPackCheckoutSessionRequest types to include currentPlan and source. - Enhanced subscription service and webhook logic to utilize new fields for improved telemetry logging and user experience. - Refactored related components to pass currentPlan and source during checkout session creation. * Feat/creator community (#1778) * feat: add promotion item component and community SVG asset - Introduced a new PromotionItem component to display promotional offers in the sidebar, utilizing Tailwind CSS for styling. - Added community.svg asset for visual representation in the PromotionItem. - Updated translations for promotion-related text in both English and Chinese. - Ensured proper handling of collapsed state and click events for opening promotion URLs. * fix: update PromotionItem component styling and enhance button accessibility - Adjusted the width and border radius of the PromotionItem component for improved aesthetics. - Enhanced the CTA button styling to support dark mode and improve hover effects. - Ensured compliance with Tailwind CSS for consistent styling across the component. * fix: update PromotionItem component styling and translations - Adjusted padding and text styles in the PromotionItem component for improved visual consistency. - Updated translation keys for promotion-related text to enhance clarity and user experience. - Ensured compliance with Tailwind CSS for consistent styling across the component. * fix: refine PromotionItem component styling and update translations - Adjusted padding and text styles in the PromotionItem component for improved layout and visual appeal. - Updated the promotion description in translations for better clarity and user engagement. - Ensured compliance with Tailwind CSS for consistent styling across the component. * feat(subscription): enhance subscription handling and user type management - Updated subscription DTO to include 'lookupKey' in the mapping. - Integrated user type management in the PromotionItem component, utilizing the subscription store for better user context. - Enhanced user settings hook to set subscription plan type and user type based on retrieved settings. - Expanded subscription plan type to include 'pro' across various schemas and types for consistency. - Ensured compliance with coding standards, including optional chaining and nullish coalescing for safer property access. * feat: Implement voucher generation and sharing for template publishing (#1771) * feat: implement voucher system with sharing, application, and rewards * feat: Implement voucher system with API for triggering generation, pending claim handling, and new UI components. * feat: implement Stripe promotion codes for vouchers, add `StripeCoupon` model, and refine discount percentage mapping. * fix: use semantic dialog element instead of div with role Replace div with role="dialog" with native <dialog> element to satisfy biome a11y/useSemanticElements lint rule. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]> * feat: enhance voucher popup UI with new confetti animation, Ant Design buttons, and improved invitation verification types * feat: enhance voucher claiming and sharing by adding inviter name display, refining UI logic, and improving share link copy functionality. * chore: Remove voucher invite page and its corresponding route. * feat: Implement voucher invite flow tracking for signup events and adjust associated redirects and share URLs. * fix: Set daily voucher popup limit to 3 and change agent file write type to text/plain. * docs: Remove deprecated voucher implementation and design documents. * refactor: Streamline voucher invitation handling by removing `shareUrl` and `qrCodeUrl` from API and standardizing event logging. * feat: Add user_type to various telemetry events for enhanced tracking. * feat: Enhance voucher invitation flow by showing claimed but unused vouchers, preserving invite codes during login, and removing popup limits. --------- Co-authored-by: Claude Opus 4.5 <[email protected]> * feat: Implement voucher email notifications with new templates and integrate with the notification module. * Remove invite code handling, `useSearchParams`, and associated redirects from the HomeRedirect component. * feat: Update voucher invite links to point to `/workspace` and enhance the claim hook to prioritize URL parameters. * feat: Redesign the voucher email template with enhanced styling and a new table-based layout. * refactor: remove SubscriptionService dependency from DriveService --------- Co-authored-by: Siri-Ray <[email protected]> Co-authored-by: Claude Opus 4.5 <[email protected]> * feat: enhance logout functionality with user state reset (#1831) - Added `resetUserState` parameter to the `logout` function to reset user state in the store upon logout. - Integrated `useUserStoreShallow` to access the `resetState` method within the `useLogout` hook. - Ensured compliance with coding standards, including optional chaining for safe property access. * feat: Add auto model routing tracking for token usage (#1834) - Add originalModelId and modelRoutedData fields to TokenUsage schema to track model routing history - Update skill invoker service to extract and store routing metadata when models are routed - Add routing data support in subscription service for token usage recording - Update OpenAPI schema with model routing metadata structure including routing strategy and timestamps - Add database index on originalModelId for efficient querying of auto-routed model usage * [Security] Fix CRITICAL vulnerability: V-001 (#1832) fix: resolve critical vulnerability V-001 Automatically generated security fix Co-authored-by: orbisai0security <[email protected]> * feat: add workflow template generation status tracking (#1793) * feat: add template generation status tracking and UI components - Enhanced the WorkflowApp model to include fields for template generation status and error messages. - Implemented a new service method to retrieve the template generation status for a workflow app. - Added a polling hook to manage template generation status updates in the UI. - Created a TemplateStatusBadge component to visually represent the generation status. - Updated the WorkflowAPPForm to integrate the new template status functionality and display the badge conditionally. - Ensured compliance with coding standards, including optional chaining and nullish coalescing for safer property access. * feat: enhance TemplateStatusBadge with ripple animation and improved styling - Added a ripple animation effect for the completed status using a new RippleWrapper component. - Implemented useEffect to manage the addition and cleanup of the ripple animation style. - Updated Badge component styling with Tailwind CSS for better visual consistency. - Ensured compliance with coding standards, including optional chaining and nullish coalescing for safer property access. * feat: add template generation messages to i18n translations - Introduced new translation keys for template generation status in both English and Chinese. - Updated the TemplateStatusBadge component to utilize the new translations for improved user feedback. - Ensured compliance with coding standards, including optional chaining and nullish coalescing for safer property access. * feat: implement auto-switch functionality for template editor - Added logic to automatically switch to the editor if the page refreshes with an existing completed template, enhancing user experience. - Introduced refs to track initial status and check for auto-switch conditions, ensuring the switch only occurs under specific criteria. - Updated useEffect hooks to manage state and side effects related to template content and user interactions. - Ensured compliance with coding standards, including optional chaining and nullish coalescing for safer property access. * feat: validate appId in template generation status request - Added a check to ensure appId is provided and not empty, throwing a BadRequestException if validation fails. - Updated the handling of template generation status to account for null values from old records, defaulting to 'idle' when necessary. - Enhanced logging for status mismatches when content exists but the status indicates otherwise. - Ensured compliance with coding standards, including optional chaining and nullish coalescing for safer property access. * feat: improve error logging and status updates in WorkflowAppTemplateProcessor - Enhanced logging messages to include job IDs and app IDs for better traceability during template generation failures. - Added checks to ensure appId is available before updating generation status, preventing unnecessary updates. - Ensured compliance with coding standards, including optional chaining and nullish coalescing for safer property access. * feat: enhance WorkflowAPPForm with dynamic polling and status tracking - Introduced a new state to control polling based on user interactions and template status, improving responsiveness during regeneration scenarios. - Added logic to track previous status for better detection of status changes, ensuring accurate updates during template generation. - Updated useEffect hooks to manage polling state and status changes effectively, preventing unnecessary re-renders and ensuring compliance with coding standards. - Enhanced TemplateStatusBadge component with proper styling using Tailwind CSS. - Ensured compliance with optional chaining and nullish coalescing for safer property access. * feat: add template generation status queries and hooks - Introduced new queries and hooks for retrieving and managing template generation status, enhancing the workflow app's capabilities. - Implemented ensureQueryData and prefetchQuery functions for efficient data handling. - Updated the OpenAPI schema to include the new endpoint for fetching template generation status. - Ensured compliance with coding standards, including optional chaining and nullish coalescing for safer property access. - Enhanced the useTemplateGenerationStatus hook to support polling and manual control for better user experience. * feat: update template generation messages in i18n translations - Revised translation strings for template generation status in both English and Chinese to provide clearer user feedback. - Ensured compliance with coding standards, including optional chaining and nullish coalescing for safer property access. * refactor: streamline WorkflowAPPForm and template status logic - Removed unused state and effects related to user switching and status tracking, simplifying the component's logic. - Updated polling logic to dynamically control based on template content and status, enhancing performance. - Refactored shouldShowStatusBadge function to eliminate unnecessary parameters, focusing on essential status checks. - Ensured compliance with coding standards, including optional chaining and nullish coalescing for safer property access. * feat: add TemplateEditorSkeleton component for improved user experience - Introduced TemplateEditorSkeleton to provide a skeleton loading screen during template generation states, enhancing user feedback. - Updated WorkflowAPPForm to conditionally render the skeleton based on template content and status, improving responsiveness. - Ensured compliance with coding standards, including the use of optional chaining and nullish coalescing for safer property access. * refactor: update WorkflowAPPForm logic for form and skeleton display - Enhanced the conditions for displaying the form and skeleton screen based on template status and content availability, improving user interaction. - Clarified comments to better explain the logic for showing the editor, form, and skeleton states. - Ensured compliance with coding standards, including the use of optional chaining and nullish coalescing for safer property access. * feat: rm Status badge * feat: add updating message to i18n translations - Introduced a new translation string for the updating state in both English and Chinese, enhancing user feedback during template updates. - Ensured compliance with coding standards, including optional chaining and nullish coalescing for safer property access. * refactor: remove status badge from WorkflowAPPForm - Eliminated the status badge from the top-right corner of the WorkflowAPPForm, streamlining the component's display logic. - Ensured compliance with coding standards, including the use of optional chaining and nullish coalescing for safer property access. * refactor: remove unused template status badge and related logic - Deleted the TemplateStatusBadge component and its references from WorkflowAPPForm, simplifying the component structure and improving maintainability. - Updated i18n translations by removing outdated template status messages, retaining only the necessary updating message for clarity. - Ensured compliance with coding standards, including the use of optional chaining and nullish coalescing for safer property access. * feat: add prompt caching to bedrock provider (#1822) feat: Add prompt caching support with cache write token tracking - Add cacheWriteTokens field to TokenUsageItem schema for tracking cache creation tokens - Implement cache token extraction from AWS Bedrock and Anthropic usage metadata - Support multiple field name variations for cache tokens across different providers - Fix token calculation logic to correctly handle cache read/write tokens separately - Add logging for cache hit events with detailed token breakdown - Update provider dependencies to support new caching features - Refactor message content handling with proper type assertions * fix: Remove duplicate token credit usage (#1835) * feat: enhance subscription store and workflow app integration (#1837) - Updated the subscription store to manage credit insufficient modal visibility with improved state handling. - Integrated subscription store into WorkflowAppPage to conditionally display error messages based on modal visibility. - Enhanced WorkflowAPPForm to check credit balance before executing workflows, ensuring better user feedback and experience. - Ensured compliance with coding standards, including optional chaining and nullish coalescing for safer property access. * fix: restore original PriceContent style & prioritize vouchers with Stripe promo code (#1843) * refactor: remove `PricingModal` component and integrate pricing display into `priceContent` and `subscribe-modal` components. * feat: Make voucher expiration configurable via `app.config` and reduce the daily popup trigger limit. * Fix/optimize shift tab animate (#1836) * fix: Reduce template list opacity transition duration from 300ms to 1ms. * feat: add GithubStar component to TopToolbar for enhanced user engagement - Integrated the GithubStar component into the TopToolbar, improving visibility for users to engage with the project. - Ensured compliance with coding standards, including the use of optional chaining and nullish coalescing for safer property access. * refactor: update avatar handling and improve user profile management … (#1840) * refactor: update avatar handling and improve user profile management in AccountSetting component - Changed avatarKey state initialization to use undefined instead of an empty string for better type safety. - Updated avatarStorageKey assignment to use nullish coalescing for handling undefined values. - Simplified userProfile handling by setting avatarKey to undefined directly, ensuring consistent state management. - Enhanced component performance by adhering to coding standards, including optional chaining and nullish coalescing for safer property access. * feat: enhance chat box and copilot message components with telemetry logging - Updated handleSendMessage in ChatBox to log events when messages are sent, capturing the source of the action. - Modified handleRetry in CopilotMessage to include logging for retry actions, improving event tracking. - Removed redundant logEvent call in ChatActions to streamline the code. - Ensured compliance with coding standards, including optional chaining and nullish coalescing for safer property access. * fix: update logging property name in CopilotMessage component - Changed the property name from 'source_type' to 'source' in the telemetry logging for retry button clicks, improving clarity and consistency in event tracking. - Ensured compliance with coding standards, including the use of optional chaining and nullish coalescing for safer property access. * feat: Add auto model routing info in action result (#1838) add auto model routing info in action result * feat: enhance PlanItem component with login handling and button state… (#1844) feat: enhance PlanItem component with login handling and button state management - Added source prop to PlanItem for conditional navigation during login. - Improved button state logic to differentiate between logged-in and guest users. - Updated button text to show "Get Started" for non-logged-in users. - Ensured compliance with coding standards, including optional chaining and nullish coalescing for safer property access. * feat(workflow-app): optimize cover image upload with compression and preloading (#1842) * fix: Reduce template list opacity transition duration from 300ms to 1ms. * feat: replace banner.svg with banner.png for improved image handling in workflow app * feat: replace banner.png with banner.webp for improved image format in workflow app * feat: enhance image compression utility with WebP support and format handling - Added support for WebP format in image compression options. - Implemented a check for WebP support in the user's browser. - Updated canvasToBlob function to handle different image formats based on availability. - Improved file naming logic to reflect the actual image format used during compression. - Ensured compliance with coding standards, including optional chaining and nullish coalescing for safer property access. * feat: Support credit billing for cached tokens (#1848) credit usage for cache * feat: Add file-type User Input support with optional handling and publish validation (#1847) * feat: Add validation for required file inputs, track missing optional file inputs, and enable auto-editing of variables with error display. * feat: Validate required workflow variables for completeness before template publishing, add i18n messages, and include a file input implementation plan document. * feat: Enhance variable extraction to include a default `required` field for all variables, improve resource type detection, and document file input implementation. * feat: enhances observability and tracing infrastructure (#1846) * WIP[3]: verify langfuse trace data completeness - Add toolDefinitions, systemPrompt, modelConfig to agent invoke metadata - langfuse-sdk v4 OpenTelemetry integration auto-records metadata to Generation - Fix api-server.sh restart orphan process issue 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]> * WIP[4]: remove redundant metadata fields (systemPrompt, modelConfig) Phase 6: Optimize Langfuse trace payload size Changes: - Remove systemPrompt from metadata (already in input[0]) - Remove modelConfig from metadata (duplicates modelParameters) - Silence console.log in tracer/providers (Phase 5 cleanup) Results: - Metadata size reduced from ~9.7KB to ~4.4KB per generation (-54%) - Total savings: ~10KB per agent invocation (2 generations) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]> * feat(observability): filter internal metadata from Langfuse traces Reduce Langfuse trace payload size by filtering out redundant metadata: - Add FilteredLangfuseCallbackHandler to remove LangGraph/LangChain internal fields (langgraph_*, ls_*, __pregel_*) that duplicate top-level Langfuse fields or are not useful for trace analysis - Slim down resourceAttributes in tracer.ts mask function, keeping only service.name, host.name, and process.runtime.version - Use new filtered handler in skill-invoker.service.ts This reduces Generation metadata from ~27 keys to ~15 keys per trace. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]> --------- Co-authored-by: HanYuanxi <[email protected]> Co-authored-by: Claude Opus 4.5 <[email protected]> * fix: preserve active credit recharge records after cancellation (#1849) refactor: remove credit recharge expiration logic from subscription service - Removed the logic for expiring active credit recharge records upon subscription cancellation to streamline the process. - Ensured compliance with coding standards, including optional chaining and nullish coalescing for safer property access. * feat: restore canvas duplication for new system (#1850) feat: Enable canvas and workflow duplication/sharing UI features, improve template generation enqueueing, enhance drive file duplication logic, and add image processing research documents. * fix: update default subscription interval to yearly (#1851) fix: update default subscription interval in PlanItem component from monthly to yearly * fix: enhance object storage error handling and object key normalization (#1852) - Added `normalizeObjectKey` method to MinioStorageBackend to ensure object keys are formatted correctly. - Introduced `isNotFoundError` method to handle various error cases consistently when accessing MinIO. - Updated methods in MinioStorageBackend to utilize normalized keys and improved error logging. - Refactored DriveService to handle missing storage keys and stream more robustly, throwing appropriate exceptions when necessary. - Ensured compliance with coding standards, including optional chaining and nullish coalescing for safer property access. * optimize to truncate the context and tool output * feat: Enhance context management and compression for agent tools - Introduced ToolType for post-processing selection in AgentBaseTool. - Added 'copilot' model scene and corresponding default model configuration. - Implemented archiving options in UpdateWorkflowVariablesRequest and UpsertDriveFileRequest. - Added ArchivedRef and context management utilities for efficient message handling. - Developed compressAgentLoopMessages function to manage context during agent iterations. - Enhanced context block truncation and archived references handling. - Updated utility exports to include context-manager functionalities. * feat: Update link filtering constants to allow more diverse results * feat: Enhance ComposioService and Token utilities for improved context handling and compression - Updated ComposioService to include 'heygen' as a valid integration for generic API key usage. - Refactored langchainConfig type casting to ensure compatibility. - Modified result handling to return full result object instead of a simplified error message. - Removed estimateTokens and estimateMessagesTokens functions from token utilities to streamline token counting. - Integrated countToken and countMessagesTokens for precise token calculations in various contexts. - Enhanced Agent class to calculate tool tokens for better budget estimation during agent loops. - Adjusted context manager to implement cache-friendly compression strategies, preserving essential message context. - Implemented truncation logic for ToolMessages to fit within budget constraints. - Updated pnpm-lock.yaml to reflect dependency changes. * feat: Add 'nodejs' to Language type for improved language support * feat: refactor sharing to shared-voucher mode with payment-based rewards (#1856) * feat: Enhance voucher invitation and sharing logic with improved verification, claimant usage, owner rewards, updated popup limit, and new documentation. * docs: Add voucher refactor plan and image processing research documents, and reduce daily voucher popup trigger limit. * fix: optimize FilePreview performance with content truncation and rendering improvements (#1857) * feat: Enhance file preview with expanded language and file type support, markdown truncation, and detailed workflow abort logging. * feat: decrease file preview truncation limits and use CodeViewer for code previews * feat: Increase the maximum number of preview lines for markdown and code files from 1000 to 2000. * refactor: Translate comments in file preview components from Chinese to English. * feat: add ResetPasswordModal to login page (#1855) - Integrated ResetPasswordModal component into the LoginPage for enhanced user experience. - Ensured compliance with coding standards, including proper component structure and styling with Tailwind CSS. * feat(workflow-app): preserve workflow products when ending execution (#1854) * feat(workflow-app): enhance execution polling and URL management - Updated error handling in useWorkflowExecutionPolling to include data error codes. - Refactored WorkflowAppPage to retrieve executionId from URL query parameters and manage it with useSearchParams. - Introduced a helper function to update executionId in the URL, maintaining it for debugging purposes. - Improved performance by using refs to store stopPolling and previous shareId, preventing unnecessary re-renders. - Ensured compliance with coding standards, including optional chaining and nullish coalescing for safer property access. * feat(workflow-app): improve runtime file fetching logic during execution - Updated the logic to fetch drive files for runtime products to include fetching during execution when nodes are finished. - Simplified the condition to check for canvasId and removed unnecessary checks for isRunning. - Enhanced the dependency array in useEffect to include nodeExecutions for better performance and accuracy. - Ensured compliance with coding standards, including optional chaining and nullish coalescing for safer property access. * fix: cache points for bedrock prompt caching (#1858) - Implemented two-level caching strategy: - Global static point: caches system prompt across all sessions (index 0) - Session dynamic points: caches recent conversation history (last 3 messages before user query) - Replaced `instanceof` checks with `_getType()` method to properly handle deserialized messages - Added support for caching AI messages with tool calls * feat: add invite redirect page (#1859) * feat: Implement invite redirection to handle voucher codes, preserve invite parameters during redirects, and rename tool call ID generation. * fix: retrieve invite code from 'invite' query parameter instead of 'code' * feat: implement pending redirect storage for payment and OAuth flows (#1860) - Added `storePendingRedirect` functionality across multiple components to preserve the current page for redirection after payment and OAuth callbacks. - Updated `CreditPacksModal`, `PriceContent`, `CreditInsufficientModal`, `VoucherPopup`, `LoginModal`, and `LoginPage` to utilize the new redirect storage mechanism. - Enhanced `useHandleUrlParamsCallback` to manage pending redirects effectively after payment success or OAuth login. * fix: Standardize invite link path to `/invite` and enhance invite redirection with SPA navigation. * feat: Implement invite redirection to handle voucher codes, preserve invite parameters during redirects, and rename tool call ID generation. * fix: retrieve invite code from 'invite' query parameter instead of 'code' * feat: Standardize invite link path to `/invite` and enhance invite redirection with SPA navigation. * Fix/Adjust plan priority (#1853) * fix: update default subscription interval in PlanItem component from monthly to yearly * fix: update PlanPriorityMap to correct starter plan priority from 1 to 2 * feat: implement tool-based auto model routing (#1861) - Add tool-based routing logic to AutoModelRouter with configurable target tools and model selection - Extend RouterContext with scene and toolsets fields for routing decision - Add getToolBasedRoutingConfig utility to read routing config from environment variables - Integrate tool-based routing in SkillService and WorkflowService by passing scene and toolsets context * feat: implement global audio manager and default agent title fallback (#1863) * feat: implement global audio manager for single audio playback control - Added AudioManager class to manage audio playback, ensuring only one audio plays at a time. - Integrated audio manager with AudioRenderer component to register audio elements and handle play/pause events. - Ensured compliance with coding standards, including proper use of hooks and Tailwind CSS for styling. * feat: add default agent title to translations for English and Chinese - Added 'defaultAgentTitle' key to the translations in both English and Chinese files to provide a fallback title for agents. - Updated WorkflowAppPage to utilize the new translation key when rendering node titles and current step titles, ensuring a consistent user experience. - Ensured compliance with coding standards, including optional chaining and nullish coalescing for safer property access. * fix: update unauthenticated invite redirect to use a full page reload. * feat: Implement invite redirection to handle voucher codes, preserve invite parameters during redirects, and rename tool call ID generation. * fix: retrieve invite code from 'invite' query parameter instead of 'code' * feat: Standardize invite link path to `/invite` and enhance invite redirection with SPA navigation. * feat: update unauthenticated invite redirect to use a full page reload. * enhance token estimation and truncation methods for improved performance feat: enhance token estimation and truncation methods for improved performance * enhance document generation by adding fileId placeholder support feat: enhance document generation by adding fileId placeholder support and URL replacement * fix: update translation queries in English and Chinese (#1870) * Updated query1 in both English and Chinese translation files to reflect new instructions for using Perplexity to analyze YouTube creators related to a product. * Ensured compliance with coding standards, including proper string literal usage and translation consistency. * 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. * 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. * feat: remove file type restrictions and fix unsupported file download (#1883) feat: Enhance resource import by preventing save during upload, add file download loading states, and configure Serena project settings. --------- Co-authored-by: lefarcen <[email protected]> Co-authored-by: Siri-Ray <[email protected]> Co-authored-by: Claude Opus 4.5 <[email protected]> Co-authored-by: nettee <[email protected]> Co-authored-by: orbisai0security <[email protected]> Co-authored-by: orbisai0security <[email protected]> Co-authored-by: Achieve <[email protected]> Co-authored-by: Sophia <[email protected]> Co-authored-by: PerishFire <[email protected]> Co-authored-by: HanYuanxi <[email protected]> Co-authored-by: a1chzt <[email protected]>
Summary
Optimize FilePreview component performance for large files and fix several rendering issues.
Content Truncation:
CodeRenderer Improvements:
PREVIEWABLE_LANGUAGESto determine preview support (html, markdown, mermaid, svg)SyntaxHighlighter Fix:
plaintextfor unsupported languages (fixes empty rendering for Java, etc.)SimpleTextEditor Fix:
loadingTimedOutLanguage Support:
EXTENSION_TO_LANGUAGEmapping with Java, C/C++, Go, Rust, Ruby, PHP, Swift, Kotlin, and moreImpact Areas
Checklist
dev/reformat(backend) andcd web && npx lint-staged(frontend) to appease the lint godsSummary by CodeRabbit
New Features
Improvements
✏️ Tip: You can customize this high-level summary in your review settings.