Skip to content

Conversation

pamelafox
Copy link
Owner

@pamelafox pamelafox commented Sep 10, 2025

Purpose

Remove the hard-coded 1000 character limit on the chat question input and let the textarea grow (up to a visual cap) so longer prompts are supported. This addresses scenarios requiring large context prompts and fixes issue Azure-Samples#2399.

Screenshots of entering long text- it will scroll internally in the text field once it gets fairly large:

Screenshot 2025-09-10 at 10 40 40 AM Screenshot 2025-09-10 at 10 40 26 AM

Does this introduce a breaking change?

When developers merge from main and run the server, azd up, or azd deploy, will this produce an error?
If you're not sure, try it out on an old environment.

[X] No
[ ] Yes

Does this require changes to learn.microsoft.com docs?

The tutorial flow / screenshots are unaffected (input just allows longer text). No doc changes required.

[X] No
[ ] Yes

Type of change

[ ] Bugfix
[X] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Documentation content changes
[ ] Other... Please describe:

What was changed

  • app/frontend/src/components/QuestionInput/QuestionInput.tsx: Removed the 1000-char guard; enabled autoAdjustHeight.
  • app/frontend/src/components/QuestionInput/QuestionInput.module.css: Replaced fixed height with min-height, adjusted line-height, and added a max-height + scroll to prevent runaway growth.

Rationale

Users reported the 1000 character constraint was limiting legitimate use cases (issue Azure-Samples#2399). Modern chat prompts can exceed that length without harming backend processing; the UI now gracefully handles larger inputs.

Code quality checklist

  • The current tests pass locally (python -m pytest) except for unrelated existing test flakiness (none introduced by this change).
  • I added tests that prove my fix is effective or that my feature works (decided not to keep the added e2e test; it was brittle with component internals). Happy to revisit if preferred.
  • I ran python -m pytest --cov to verify 100% coverage of added lines (N/A: trivial logic removal)
  • I ran python -m mypy (or ensured CI will) to check for type errors (no TS/py typing impact beyond deletion)
  • Pre-commit formatting hooks (ruff/black/prettier) passed on commit.

Additional notes

An optional future enhancement could add a soft warning or token estimate for very large prompts instead of a hard cap.

@pamelafox pamelafox requested a review from Copilot September 10, 2025 18:50
Copy link

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull Request Overview

This PR removes the hard-coded 1000 character limit on chat input and enables the textarea to expand vertically to accommodate longer prompts, addressing user feedback in issue Azure-Samples#2399. The change allows for more flexible prompt input while maintaining UI constraints to prevent runaway growth.

Key changes:

  • Removed the 1000 character validation constraint from the input handler
  • Enabled auto-height adjustment for the textarea component
  • Updated CSS to use flexible height with scrolling for very large inputs

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File Description
app/frontend/src/components/QuestionInput/QuestionInput.tsx Removed character limit validation and enabled auto-height adjustment
app/frontend/src/components/QuestionInput/QuestionInput.module.css Changed from fixed height to flexible min-height with max-height constraint and scrolling

/* Limit uncontrolled growth while still allowing larger prompts; enable scrolling inside textarea if very large */
.questionInputTextArea textarea {
max-height: 20rem;
overflow-y: auto !important;
Copy link
Preview

Copilot AI Sep 10, 2025

Choose a reason for hiding this comment

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

Using !important should be avoided as it makes CSS harder to maintain and override. Consider using more specific selectors or restructuring the CSS hierarchy to achieve the same result without !important.

Suggested change
overflow-y: auto !important;
overflow-y: auto;

Copilot uses AI. Check for mistakes.

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.

1 participant