Skip to content

Add collapsible user input display for long messages #471

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Aug 1, 2025

Conversation

nitboss
Copy link
Contributor

@nitboss nitboss commented Aug 1, 2025

Summary

  • Implement collapsible UI for user messages over 150 characters to preserve screen space
  • Add smart headline generation that extracts email subjects or truncates text intelligently
  • Maintain backward compatibility with original styling for short messages

Changes

  • Modified UserMessage component in messages.tsx to support collapsible long text
  • Added smart headline extraction for emails (subject lines) and general text (first sentences)
  • Integrated existing Radix UI Collapsible components with smooth animations
  • Added chevron icons to indicate expand/collapse state

Visual Behavior

  • Short messages (≤150 chars): Display with original large text styling
  • Long messages (>150 chars): Show generated headline with expand/collapse functionality
  • Email messages: Extract subject line as headline automatically
  • General text: Use first sentence or truncated text as headline

Test Results

✅ Preserves original behavior for short text
✅ Smart headline generation works for various input types
✅ Smooth expand/collapse interactions
✅ TypeScript compilation passes
✅ ESLint validation passes
✅ Responsive design maintained

Fixes the issue where long user inputs dominated the results page, improving UX by preserving screen real estate for answers while maintaining easy access to full user context.

- Implement smart headline generation that extracts email subjects or truncates text intelligently
- Add collapsible UI for messages over 150 characters to preserve screen space for answers
- Maintain original large text styling for short messages (backward compatible)
- Use existing Radix UI Collapsible components with smooth expand/collapse animations
- Include visual indicators (chevron icons) for interaction state

Fixes issue where long user inputs dominated the results page with oversized text.
Copy link

vercel bot commented Aug 1, 2025

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

Name Status Preview Comments Updated (UTC)
chat-langchain ✅ Ready (Inspect) Visit Preview 💬 Add feedback Aug 1, 2025 9:14am

- Update deprecated import paths to use langchain_core and provider-specific packages
- Update GitHub Actions from v3 to v4 for better compatibility
- Fixes failing eval workflow in CI
- Fix I001 import sorting errors in evaluation scripts by moving provider-specific imports after langchain.* imports
- Fix ModuleNotFoundError by correcting import path from langchain_core.chat_models to langchain.chat_models in backend/utils.py
- Apply code formatting fixes using ruff and prettier
- Addresses failing tests and linting issues in CI
@nitboss nitboss merged commit debb1fd into master Aug 1, 2025
7 of 8 checks passed
@nitboss nitboss deleted the feature/collapsible-user-input branch August 1, 2025 22:58
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