fix: prevent chat input from growing infinitely

[ayberkuman]

Problem

The chat input in the Assistant sidebar grows infinitely when users:

• Press Shift+Enter to add multiple lines
• Paste long text
• Input grows upward, pushing messages until they disappear
• Continues growing downward past the viewport
• Attach/send buttons become hidden and inaccessible
• Cursor at bottom of input becomes invisible

Added max-h-[50vh] and overflow-y-auto to the ContentEditable component in the chat input.

Now the input:

• Grows naturally until it reaches 50% of viewport height
• Becomes scrollable after reaching max height
• Keeps attach/send buttons always visible

Summary by CodeRabbit

• Improvements
  • Chat input area now limits its height to half the viewport and enables vertical scrolling for longer messages, preventing the input from expanding excessively and keeping the layout tidy during extended conversations.

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

[vercel]

@ayberkuman is attempting to deploy a commit to the joschan21's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

📝 Walkthrough

Walkthrough

Added CSS classes max-h-[50vh] and overflow-y-auto to the chat input's ContentEditable element to constrain its maximum height and enable vertical scrolling when content exceeds that height.

Changes

Cohort / File(s)	Summary
Chat Input Styling src/components/app-sidebar.tsx	Added max-h-[50vh] overflow-y-auto to the ContentEditable className to limit height to 50vh and enable vertical scrolling for overflow.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐰 A little box that knows its bound,
It scrolls with rhythm, soft and sound,
No taller than half the view,
Neat and tidy—nice and new,
Hoppy changes, small and proud.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix: prevent chat input from growing infinitely' directly and clearly describes the main change - adding height constraints and scrolling to prevent the chat input from expanding uncontrollably.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a5bede0 and 7913d49.

📒 Files selected for processing (1)

• src/components/app-sidebar.tsx

🧰 Additional context used

📓 Path-based instructions (2)

**/*.{js,jsx,ts,tsx,py,go,java,rb}

📄 CodeRabbit inference engine (.cursor/rules/posthog-integration.mdc)

Never hallucinate an API key. Instead, always use the API key populated in the .env file.

Files:

• src/components/app-sidebar.tsx

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

📄 CodeRabbit inference engine (.cursor/rules/posthog-integration.mdc)

**/*.{ts,tsx,js,jsx}: If using TypeScript, use an enum to store flag names. If using JavaScript, store flag names as strings to an object declared as a constant, to simulate an enum. Use a consistent naming convention for this storage.
enum/const object members should be written UPPERCASE_WITH_UNDERSCORE.
Gate flag-dependent code on a check that verifies the flag's values are valid and expected.
If a custom property for a person or event is at any point referenced in two or more files or two or more callsites in the same file, use an enum or const object, as above in feature flags.

Files:

• src/components/app-sidebar.tsx

🔇 Additional comments (1)

src/components/app-sidebar.tsx (1)

261-267: LGTM! Clean fix for the infinite input growth issue.

The addition of max-h-[50vh] and overflow-y-auto correctly bounds the ContentEditable height while enabling scrolling when content exceeds the limit. This ensures the attach/send buttons remain accessible regardless of input length.

---

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

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

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In @src/components/app-sidebar.tsx:
- Around line 261-267: The Tailwind class name in the ContentEditable component
is misspelled; replace "diabled:opacity-50" with the correct
"disabled:opacity-50" in the className prop of the ContentEditable component so
the disabled styling toggles when isIndexing is true (Component:
ContentEditable, prop: className, state: isIndexing).

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3d86f3a and a5bede0.

📒 Files selected for processing (1)

• src/components/app-sidebar.tsx

🧰 Additional context used

📓 Path-based instructions (2)

**/*.{js,jsx,ts,tsx,py,go,java,rb}

📄 CodeRabbit inference engine (.cursor/rules/posthog-integration.mdc)

Never hallucinate an API key. Instead, always use the API key populated in the .env file.

Files:

• src/components/app-sidebar.tsx

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

📄 CodeRabbit inference engine (.cursor/rules/posthog-integration.mdc)

**/*.{ts,tsx,js,jsx}: If using TypeScript, use an enum to store flag names. If using JavaScript, store flag names as strings to an object declared as a constant, to simulate an enum. Use a consistent naming convention for this storage.
enum/const object members should be written UPPERCASE_WITH_UNDERSCORE.
Gate flag-dependent code on a check that verifies the flag's values are valid and expected.
If a custom property for a person or event is at any point referenced in two or more files or two or more callsites in the same file, use an enum or const object, as above in feature flags.

Files:

• src/components/app-sidebar.tsx