Skip to content

Conversation

@HamedMP
Copy link
Member

@HamedMP HamedMP commented Apr 29, 2025

Summary by CodeRabbit

  • New Features

    • Introduced AI-powered inline code completion and formatting in the Monaco editor, with a new completion API and prompt generation logic.
    • Added a command bar accessible via keyboard shortcut for quick actions.
    • Implemented file tab management with per-project isolation, including a new tab bar UI in the IDE.
    • Added a customizable modal dialog for sending messages.
    • Integrated Clerk authentication and Waitlist functionality across landing and header components.
    • Added dynamic folder and file icons, including support for many new file types and special folders.
    • Enabled markdown editing with improved support for headings and content parsing.
    • Added a background grid pattern to the landing page.
  • Improvements

    • Enhanced editor usability with debounced content saving, improved theme fallback, and additional language support (e.g., Prisma).
    • Updated robots.txt structure and improved .gitignore to exclude sensitive Clerk configuration.
    • Improved visual styling for toolbars, tabs, dialogs, and scrollbars.
    • Updated and added several dependencies for AI, authentication, markdown, and editor features.
    • Added toast notifications globally.
  • Bug Fixes

    • Fixed duplicate and malformed code completions in the editor.
    • Corrected file and folder icon rendering based on state and type.
  • Chores

    • Added and configured authentication middleware and environment variables.
    • Cleaned up code formatting and comments for consistency.

@vercel
Copy link

vercel bot commented Apr 29, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
floki ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 29, 2025 6:46pm

@coderabbitai
Copy link

coderabbitai bot commented Apr 29, 2025

Caution

Review failed

The pull request is closed.

Walkthrough

This update introduces several new features and enhancements across the application. A significant addition is the implementation of a file tab system in the IDE, allowing users to manage open files with tabbed navigation, including actions to add, close, and activate tabs per project. The Monaco editor integration is expanded with AI-powered inline code completions, a debounced content handler, and a dialog triggered by a keyboard shortcut. Clerk authentication is integrated throughout the app, including middleware and provider setup. UI improvements include a command bar, file and folder icon enhancements, a markdown-based Tiptap editor, and visual updates to toolbars, tabs, and backgrounds. Numerous dependencies and environment variables are added or updated to support these features.

Changes

File(s) Change Summary
.gitignore Added /.clerk/ to ignore Clerk configuration directory.
package.json Updated build script; added dependencies for AI SDKs, Clerk, Monaco editor, Tiptap Markdown, and updated zod.
public/workers/workers/file-system.worker.js, src/workers/file-system.worker.ts Commented out all console.log statements in listFilesNonRecursively.
src/app/(ide)/@editor/default.tsx Removed trailing newline; no functional changes.
src/app/(ide)/ide/layout.tsx Added filtered file count indicator reflecting file filtering state.
src/app/(ide)/layout.tsx Added command bar component (CommandDialogDemo) to IDE layout.
src/app/(landing)/layout.tsx Wrapped layout in ClerkProvider for authentication context.
src/app/(landing)/page.tsx Added low-opacity grid pattern background overlay in main section.
src/app/api/completion/prompt.ts Introduced GenerateInstructions function for system prompt generation for code completion.
src/app/api/completion/route.ts Added new POST API route for streaming code completions using OpenAI GPT-4o.
src/app/layout.tsx Conditionally loads react-scan script only in development; added global Toaster for notifications.
src/app/robots.ts Changed rules property from object to array of objects in robots function's return value.
src/components/commandbar/commandbar.tsx Added new exported CommandDialogDemo component for command bar dialog with keyboard shortcut.
src/components/directory-permission-prompt.tsx Added blank line after import block; no functional changes.
src/components/editor/custom-dialog.tsx Added new exported CustomDialog component for message dialog with AI interaction.
src/components/editor/file-monaco-editor/components/completion-formatter.ts Introduced CompletionFormatter class for cleaning and formatting AI code completions.
src/components/editor/file-monaco-editor/components/editor-toolbar.tsx Adjusted toolbar height, padding, and margin; simplified conditional rendering.
src/components/editor/file-monaco-editor/components/monaco-wrapper.tsx Major refactor: added AI inline completions, dialog with Cmd+K, debounced content changes, and improved editor integration.
src/components/editor/file-monaco-editor/components/theme-selector.tsx Adjusted select trigger height, margin, and padding for theme selector.
src/components/editor/file-monaco-editor/hooks/use-monaco.ts Registered "prisma" as additional language in Monaco.
src/components/editor/file-monaco-editor/index.tsx Changed fallback and initial editor theme from "OneDark-Pro" to "Twilight".
src/components/file-tree/components/directory-node.tsx Replaced static folder icons with dynamic ones; refactored for clarity.
src/components/ide/file-tabs.tsx Added new exported FileTabs component with scroll indicators and tab management.
src/components/ide/file-viewer-panel.tsx Integrated FileTabs and ensured tab state sync with file selection.
src/components/landing/Hero.tsx Replaced grid background, updated text color, commented out buttons/tweets, added Waitlist component.
src/components/layout/Header.tsx Added Waitlist and Button to navigation.
src/components/tiptap-editor.tsx Switched to tiptap-markdown, expanded heading support, simplified content initialization.
src/components/ui/dialog.tsx Style and formatting cleanup; no functional changes.
src/components/ui/tabs.tsx Hid scrollbars in TabsList for all browsers.
src/components/ui/textarea.tsx Added new exported Textarea component with utility classes.
src/env.js Added Clerk-related environment variables to schema and runtime mapping.
src/lib/file-utils.tsx Expanded file/folder icon handling, added getFolderIcon, improved getFileIcon and isTextFile.
src/middleware.ts Added Clerk middleware with matcher config for route protection.
src/store/file-store.ts Added explanatory comment in handleFileClick.
src/store/ide-store.ts Introduced file tab management system: state, actions, and per-project tab isolation.
src/styles/globals.css Changed grid pattern gradient direction in .bg-grid-pattern.

Sequence Diagram(s)

File Tab Management in IDE

sequenceDiagram
    participant User
    participant FileTree
    participant IDEStore
    participant FileTabs
    participant FileViewerPanel

    User->>FileTree: Clicks file
    FileTree->>IDEStore: handleFileClick(file)
    IDEStore->>IDEStore: addFileTab({path, name})
    IDEStore->>FileTabs: Update openTabs and activeTab
    FileTabs->>FileViewerPanel: Render tabs, show active file
    User->>FileTabs: Clicks tab or close
    FileTabs->>IDEStore: setActiveFileTab(tabId) / closeFileTab(tabId)
    IDEStore->>FileTabs: Update tab state
Loading

AI Inline Completion in Monaco Editor

sequenceDiagram
    participant User
    participant MonacoWrapper
    participant CompletionAPI
    participant CompletionFormatter
    participant MonacoEditor

    User->>MonacoEditor: Types in editor
    MonacoEditor->>MonacoWrapper: onChange (debounced)
    MonacoWrapper->>CompletionAPI: Fetch inline completions
    CompletionAPI-->>MonacoWrapper: Streamed suggestions
    MonacoWrapper->>CompletionFormatter: Format suggestions
    CompletionFormatter-->>MonacoWrapper: Cleaned completions
    MonacoWrapper->>MonacoEditor: Show inline suggestions
Loading

Clerk Authentication Middleware

sequenceDiagram
    participant Browser
    participant Middleware
    participant ClerkProvider
    participant App

    Browser->>Middleware: Request (API or page)
    Middleware->>ClerkProvider: Apply authentication
    ClerkProvider->>App: Provide user context
    App-->>Browser: Rendered page/API response
Loading

Poem

🐇✨
Tabs now hop from file to file,
With icons bright, they stack in style.
AI whispers code so neat,
While Clerk keeps logins discreet.
Gridlines shimmer, markdown flows,
Command bars bloom where the bunny goes!
A carrot toast for features new—
This warren’s work is never through!


📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2f8a867 and c3ad832.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (37)
  • .gitignore (1 hunks)
  • package.json (4 hunks)
  • public/workers/workers/file-system.worker.js (1 hunks)
  • src/app/(ide)/@editor/default.tsx (1 hunks)
  • src/app/(ide)/ide/layout.tsx (2 hunks)
  • src/app/(ide)/layout.tsx (2 hunks)
  • src/app/(landing)/layout.tsx (1 hunks)
  • src/app/(landing)/page.tsx (1 hunks)
  • src/app/api/completion/prompt.ts (1 hunks)
  • src/app/api/completion/route.ts (1 hunks)
  • src/app/layout.tsx (2 hunks)
  • src/app/robots.ts (1 hunks)
  • src/components/commandbar/commandbar.tsx (1 hunks)
  • src/components/directory-permission-prompt.tsx (1 hunks)
  • src/components/editor/custom-dialog.tsx (1 hunks)
  • src/components/editor/file-monaco-editor/components/completion-formatter.ts (1 hunks)
  • src/components/editor/file-monaco-editor/components/editor-toolbar.tsx (3 hunks)
  • src/components/editor/file-monaco-editor/components/monaco-wrapper.tsx (2 hunks)
  • src/components/editor/file-monaco-editor/components/theme-selector.tsx (1 hunks)
  • src/components/editor/file-monaco-editor/hooks/use-monaco.ts (1 hunks)
  • src/components/editor/file-monaco-editor/index.tsx (2 hunks)
  • src/components/file-tree/components/directory-node.tsx (7 hunks)
  • src/components/ide/file-tabs.tsx (1 hunks)
  • src/components/ide/file-viewer-panel.tsx (4 hunks)
  • src/components/landing/Hero.tsx (6 hunks)
  • src/components/layout/Header.tsx (2 hunks)
  • src/components/tiptap-editor.tsx (2 hunks)
  • src/components/ui/dialog.tsx (1 hunks)
  • src/components/ui/tabs.tsx (1 hunks)
  • src/components/ui/textarea.tsx (1 hunks)
  • src/env.js (3 hunks)
  • src/lib/file-utils.tsx (11 hunks)
  • src/middleware.ts (1 hunks)
  • src/store/file-store.ts (1 hunks)
  • src/store/ide-store.ts (6 hunks)
  • src/styles/globals.css (1 hunks)
  • src/workers/file-system.worker.ts (1 hunks)
✨ Finishing Touches
  • 📝 Generate Docstrings

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@HamedMP HamedMP merged commit d435a38 into main Apr 29, 2025
2 of 5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants