Skip to content

Conversation

hjamet
Copy link
Contributor

@hjamet hjamet commented Sep 4, 2025

🚀 Major Features & UX Overhaul: Keyboard Shortcuts, File Handling, and Polished UI

Description

This pull request introduces significant new features to boost productivity and implements a comprehensive set of UI/UX enhancements to create a more stable, intuitive, and polished chat experience. It adds global keyboard shortcuts and direct file handling while refining the core application layout, message interactions, and input field behavior.


⌨️ Global Keyboard Shortcuts

image
  • Reusable Hook: A new useKeyboardShortcuts hook has been created to capture and dispatch global shortcuts. It is configured to ignore key presses when the focus is inside inputs, textareas, or content-editable elements to prevent conflicts with typing.
  • App-Wide Integration: Shortcuts are registered in the global ThemeProvider, enabling page navigation (e.g., Alt+H for Home) and actions like focusing the conversation search field (Alt+F).
  • Enhanced Discoverability: Shortcut labels are now displayed in the sidebar next to their corresponding navigation items using a styled <kbd> element, making them easy for users to discover and learn.

✨ Enhanced Chat Input

  • Paste & Drag-and-Drop Files: Users can now paste or drag-and-drop files and images directly into the chat input area. This is seamlessly integrated with the existing uploadFiles handler to centralize file processing and ensure UI state is updated consistently.
  • Visual Feedback: A dashed outline now appears around the input area when a user is dragging a file over it, providing clear visual feedback.
image - **Improved Slash Command Navigation**: The slash command menu is now fully navigable with the keyboard. `ArrowUp` and `ArrowDown` key presses are correctly forwarded to the command list, while the `Enter` key properly selects a command without submitting the chat. image - **Consistent Positioning**: The chat input is now reliably positioned at the bottom of the viewport. It remains sticky during scrolling and maintains consistent spacing, resolving various visual glitches. image

🎨 UI & UX Polish

  • Single-Scroll Layout: The application now enforces a single, internal scroll container for the chat history by setting body { overflow: hidden; }. This eliminates the "double scrollbar" issue and provides a cleaner, more native app-like feel.
  • Stable Text Selection: Text selection within messages is now persistent. The highlight remains visible even when the mouse leaves the message bubble, making it reliable and easy to copy content.
  • Responsive Message Bubbles: Message bubbles now correctly size to fit their content. Short messages no longer stretch to fill the available width, creating a more natural and readable conversation flow. (Also smoother animation)
  • Unified Message Footer: The message footer (timestamp, actions) now appears consistently on hover for all messages.
  • Improved Click Affordance: The cursor now changes to a pointer when hovering over the account menu trigger and its dropdown items, providing a clearer visual cue for clickable elements.
  • Small hover animations on Agents proposals on the Home Page
image

…e de suggestions. Les états de survol, de focus et d'activation ont été améliorés pour une meilleure interactivité visuelle.
…t, avec des styles CSS pour améliorer la visibilité de la sélection. Les contrôles du pied de page sont maintenant visibles ou cachés en fonction de l'état de survol, sans provoquer de montage/démontage du DOM. Amélioration de l'interactivité et de l'expérience utilisateur.
…ation de la gestion du défilement dans le composant de chat. Les classes CSS ont été mises à jour pour garantir un affichage correct et une meilleure expérience utilisateur.
…ors de l'impression et mise à jour de la classe d'entrée pour un espacement approprié. Cela améliore l'expérience utilisateur en garantissant une présentation correcte des éléments dans différents contextes.
…uter un positionnement fixe en bas de la page, améliorant ainsi l'accessibilité et l'expérience utilisateur lors de l'interaction avec le chat. Les styles ont été ajustés pour garantir une présentation cohérente.
…ur remplacer les curseurs par défaut par un curseur pointer, augmentant ainsi l'interactivité et l'expérience utilisateur. Les classes ont été mises à jour pour garantir une cohérence visuelle dans l'interface.
…ns mineures de l'interface utilisateur et un changement de développement pour éviter un échec du hook pre-commit.
…aisie de chat, permettant une gestion améliorée des événements de clavier pour la sélection de commandes. Cela inclut la gestion des touches fléchées et de la touche Entrée pour une meilleure interactivité lors de l'utilisation des commandes. Des ajustements ont également été effectués pour améliorer la gestion des erreurs lors de la conversion de fichiers.
…, avec des styles CSS pour mettre en surbrillance la zone lors du glissement de fichiers. Cela inclut la gestion des événements de glissement et de collage pour améliorer l'interaction utilisateur lors de l'importation de fichiers.
…application, avec des mappages de touches pour accéder rapidement aux différentes sections. Mise à jour des styles CSS pour les éléments de raccourci clavier et amélioration de l'affichage des éléments dans la barre latérale. Mise à jour de la version de la bibliothèque Katex.
…hier useKeyboardShortcuts.ts et ajout d'une nouvelle ligne à la fin du fichier navMenu.module.css pour respecter les conventions de style. Cela améliore la lisibilité et la cohérence du code.
…au niveau du composant de chat, tout en déplaçant la gestion du défilement spécifique à la zone de chat. Cela améliore l'expérience utilisateur en évitant de masquer les barres de défilement sur d'autres pages.
…s conventions de style, améliorant ainsi la lisibilité et la cohérence du code.
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