Improved ai with custom prompt

[nizzyabi]

• AI Replier improved. you can hit tab to get the information now
• Better system prompt

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
0	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 29, 2025 8:55pm

[coderabbitai]

Walkthrough

This pull request introduces a custom prompt feature that integrates deeply into AI-driven email responses. The changes update the AI reply function to include a dynamic system prompt and user-specific custom prompt retrieved from settings. Additionally, modifications are made to the settings page, database schema, and localization strings to support this feature. UI enhancements include improved Tab key handling in the editor, loading state management in the mail list and reply composer, and layout adjustments for better feedback during email sending.

Changes

Files	Change Summary
apps/mail/actions/ai-reply.ts, apps/mail/app/(routes)/settings/…/page.tsx, packages/db/src/…/schema.ts, packages/db/src/…/user_settings_default.ts, apps/mail/locales/en.json	Introduced customPrompt integration: retrieving user settings in AI responses, adding a form field in settings, updating the DB schema and default settings, and enhancing localization strings.
apps/mail/components/create/editor.tsx, apps/mail/components/mail/mail-list.tsx, apps/mail/components/mail/reply-composer.tsx	UI enhancements: Added an optional onTab callback in the editor, improved layout and loading indicators in mail list, and incorporated state management with key event handlers in the reply composer.

Sequence Diagram(s)

sequenceDiagram
    participant U as User
    participant E as Editor
    participant R as ReplyCompose
    participant A as AI Response Service
    participant O as OpenAI API

    U->>E: Compose email
    E->>R: Trigger send (Enter/Tab key event)
    R->>R: Set isSubmitting to true
    R->>A: Call generateAIResponse (with customPrompt)
    A->>A: Retrieve user settings (customPrompt)
    A->>O: Send API request with formatted prompt
    O-->>A: Return AI-generated reply
    A-->>R: Provide reply response
    R->>U: Display response and update UI

Loading

Possibly related PRs

• New Crowdin updates #440: Addresses custom prompt localization and user settings adjustments, directly connecting with the custom prompt integration.
• reply ai #526: Focuses on enhancements to the AI response generation and the ReplyCompose integration, aligning with modifications in this PR.
• fix(ui): button as button error fixed, create mail editor fixes #424: Involves custom prompt handling within user settings and AI response mechanics, closely related to these changes.

Suggested reviewers

• MrgSub

Poem

I'm a rabbit hopping in code's delight,
Custom prompts now guide emails just right.
With Tab key hops and loading spins so keen,
I bounce through functions, swift and serene.
In a garden of code, every bug I greet,
Celebrating each change with a joyful beat!

✨ Finishing Touches

• 📝 Generate Docstrings

---

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

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 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 resolve resolve all the CodeRabbit review comments.
• @coderabbitai plan to trigger planning for file edits and PR creation.
• @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.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

apps/mail/components/create/editor.tsx (2)

474-480: Consider using optional chaining for the onTab callback.

The current implementation checks if onTab exists before calling it. Using optional chaining would make the code more concise.

-if (onTab && onTab()) {
+if (onTab?.()) {
  e.preventDefault();
  e.stopPropagation();
  return;
}

🧰 Tools

🪛 Biome (1.9.4)

[error] 475-475: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

---

505-510: Consider using optional chaining for the onTab callback in the EditorContent keydown handler.

Similar to the previous suggestion, optional chaining would simplify this code.

-if (onTab && onTab()) {
+if (onTab?.()) {
  event.preventDefault();
  return true;
}

🧰 Tools

🪛 Biome (1.9.4)

[error] 506-506: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between f39133a and d007a4b.

📒 Files selected for processing (8)

• apps/mail/actions/ai-reply.ts (5 hunks)
• apps/mail/app/(routes)/settings/general/page.tsx (3 hunks)
• apps/mail/components/create/editor.tsx (4 hunks)
• apps/mail/components/mail/mail-list.tsx (2 hunks)
• apps/mail/components/mail/reply-composer.tsx (10 hunks)
• apps/mail/locales/en.json (1 hunks)
• packages/db/src/schema.ts (1 hunks)
• packages/db/src/user_settings_default.ts (1 hunks)

🧰 Additional context used

🧬 Code Definitions (2)

apps/mail/actions/ai-reply.ts (1)

packages/db/src/schema.ts (2)

• session (18-29)
• userSettings (108-117)

apps/mail/app/(routes)/settings/general/page.tsx (3)

apps/mail/i18n/config.ts (1)

• locales (24-24)

apps/mail/components/ui/form.tsx (5)

• FormField (169-169)
• FormItem (164-164)
• FormLabel (165-165)
• FormControl (166-166)
• FormDescription (167-167)

apps/mail/components/ui/textarea.tsx (1)

• Textarea (21-21)

🪛 Biome (1.9.4)

apps/mail/components/create/editor.tsx

[error] 475-475: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

---

[error] 506-506: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

🔇 Additional comments (29)

packages/db/src/schema.ts (1)

15-15: Addition of customPrompt field to user table schema.

The implementation looks good. Adding this field will allow storing user-specific custom prompts in the database.

packages/db/src/user_settings_default.ts (2)

8-8: Default value for customPrompt is properly initialized.

The empty string is an appropriate default value for the custom prompt field.

---

16-16: Validation schema for customPrompt is properly defined.

The schema correctly uses z.string() for validation, which aligns with the default value's type.

apps/mail/components/create/editor.tsx (1)

77-77: New onTab callback property added to EditorProps interface.

This addition allows parent components to handle tab key events, which is useful for implementing custom tab navigation.

apps/mail/app/(routes)/settings/general/page.tsx (4)

33-33: Import of Textarea component for the custom prompt field.

The Textarea component is appropriately imported for handling multi-line input for the custom prompt.

---

40-40: Addition of customPrompt to form schema.

The form schema correctly defines customPrompt as a string using Zod validation.

---

56-56: Default value for customPrompt in the form.

An empty string is set as the default value, which aligns with the schema in user_settings_default.ts.

---

195-213: UI implementation for the custom prompt input.

The implementation looks good with proper form structure and localization support. The min-height property on the Textarea ensures sufficient space for users to input potentially lengthy custom prompts.

apps/mail/locales/en.json (2)

267-267: Update placeholder variable for localization consistency.

The placeholder has been changed from {language} to {locale} for better consistency with naming conventions in internationalization libraries.

---

268-270: LGTM: New localization strings for custom AI prompt feature.

These new localization strings support the custom AI prompt feature, making it accessible to users through proper UI labels and descriptions.

apps/mail/components/mail/mail-list.tsx (2)

496-496: Improvement in scroll area styling.

Removing the pb-4 class eliminates extra padding at the bottom of the scroll area, providing more space for content display.

---

513-528: Enhanced loading state feedback for better UX.

The button now provides visual feedback during loading states with a spinner and text, and is properly disabled when loading. The rounded-none class makes the button styling consistent with the surrounding UI.

apps/mail/actions/ai-reply.ts (7)

3-3: Added import for user settings to support custom prompts.

The new import enables retrieving user-defined custom prompts from the database.

---

32-35: Code formatting improvement in function signature.

The function signature has been reformatted for better readability.

---

47-49: Implemented custom prompt retrieval from user settings.

This key addition retrieves the user's custom prompt from settings, with a fallback to an empty string if not defined. This is a central feature of the PR that enables personalized AI responses.

---

56-58: Enhanced AI system prompt with environment variable.

Using an environment variable for the system prompt allows for easier configuration changes without code modifications.

---

67-67: Improved prompt instructions for better AI context awareness.

The updated instruction allows the AI to adapt its tone based on the email context, creating more natural-sounding responses.

---

76-77: Added user's custom prompt to the AI instruction set.

This is the core functionality that integrates the user's custom prompt into the AI generation process, allowing for personalized email replies.

---

87-87: Formatting improvement in API authorization header.

The formatting change makes the code more readable while maintaining the same functionality.

apps/mail/components/mail/reply-composer.tsx (10)

219-219: Added loading state for improved UX during email submission.

This state variable tracks when an email is being sent, enabling visual feedback to users.

---

223-223: Implemented proper loading state management.

The loading state is now properly set before sending an email and reset in a finally block, ensuring it's always reset even if an error occurs.

Also applies to: 272-273

---

347-352: Added auto-focus after AI content generation.

This UX improvement automatically focuses the editor after AI content is generated, allowing users to immediately start editing the suggested text.

---

392-398: Added keyboard shortcut for sending emails.

The send button ref and Command+Enter handler improve accessibility by allowing users to send emails using keyboard shortcuts.

---

401-407: Implemented Tab key handling for accepting AI suggestions.

This smart addition allows users to quickly accept AI suggestions by pressing Tab, improving workflow efficiency.

---

483-485: Enhanced editor with keyboard shortcuts and loading state.

The editor now supports Command+Enter to send emails, Tab key to accept AI suggestions, and properly disables during submission.

---

488-489: Added visual feedback for AI suggestions and loading states.

The styling changes provide clear visual cues when AI suggestions are available and when the form is submitting.

---

502-506: Added helpful keyboard shortcut hint.

This UI improvement informs users they can press Tab to accept AI suggestions, enhancing discoverability of this feature.

---

621-626: Added loading state to Save Draft button.

The button is now properly disabled during submission to prevent double submissions.

---

629-641: Enhanced send button with loading state and accessibility.

The send button now has a reference for keyboard shortcuts and is properly disabled during submission, with appropriate styling.