Skip to content

Conversation

hjamet
Copy link
Contributor

@hjamet hjamet commented Aug 31, 2025

Description

This change adds an interactive, caret-aware query filter selector to the chat input so users can easily add explicit context filters (file, date, word) to chat queries. The input now recognizes triggers like @, file, dt and +"/-" and provides keyboard/mouse-driven menus to insert correctly-formatted filters that are passed to the backend.

Recording 2025-09-01 at 00 51 38

🗂️ File filter autocomplete

  • 🗂️ File filter autocomplete: when a user types file: (or chooses file from the @ menu) a searchable, keyboard-navigable file selector appears showing the top matches (limited to 20). Selecting a file inserts file:"path/to/file" at the caret position and preserves surrounding spacing.

✨ Structured query triggers (date & word)

  • ✨ Structured query triggers (date & word):
    • @ opens a small menu with file, date, word choices. Choosing an option inserts the corresponding token and opens the appropriate sub-selector.
    • date supports operator choices (exact / after / before). Choosing an operator inserts the operator token (e.g. dt>=") and opens a mirror suggestion that shows the text the user types; pressing Enter validates and inserts the final filter (e.g. dt>="YYYY-MM-DD").
    • word supports include/exclude via +" and -" triggers and shows a mirror suggestion of the typed term; Enter inserts +"term" or -"term".
    • 🧭 Immediate @-typing: typing immediately after @ (e.g. @Task) now opens the file selector filtered by the typed text.

✨ New feature: inline badge preview in input

  • Inline filter badges in input: the chat input now shows a live, non-interactive overlay that renders recognized filters (e.g. file:"...", dt:"...", +"...", -"...") as light-colored inline badges while you type. The overlay is caret-aware and synchronized with the textarea to mirror cursor position and wrapping.
image

Notes

  • The feature is implemented inside src/interface/web/app/components/chatInputArea/chatInputArea.tsx. It reuses the existing file listing API (/api/content/computer) and aims to keep behavior keyboard-first (Arrow Up/Down, Enter, Esc).
  • The insertion logic ensures spaces are preserved and added before/after inserted tokens to avoid concatenation bugs when chaining multiple filters.

hjamet added 17 commits August 31, 2025 20:17
…ludes loading available files via an API, managing suggestions based on user input, and inserting suggestions at the caret. Improved user experience with keyboard interactions for navigating and selecting suggestions.
…k. La version de 'magika' a été augmentée à 0.6.2 et celle de 'katex' à 0.16.22. Ajout d'une référence pour le conteneur de suggestions dans le composant ChatInputArea, et ajustement de la logique de filtrage des suggestions pour limiter le nombre d'éléments affichés à 20.
…atInputArea component. Updated suggestion filtering logic to include separate menu levels and improved keyboard interaction for selecting suggestions. Integrated new states for date mode and word mode, enabling dynamic insertion of corresponding filters.
…nt ChatInputArea. Mise à jour de la logique de filtrage des suggestions pour inclure des niveaux de menu distincts et amélioration de l'interaction au clavier pour la sélection des suggestions. Intégration de nouveaux états pour le mode date et le mode mot, permettant l'insertion dynamique des filtres correspondants.
…e ChatInputArea component. Updated suggestion logic to enable dynamic insertion of corresponding filters based on selected modes. Improved user interaction when entering operators.
…ChatInputArea. Mise à jour de la logique de filtrage des suggestions pour inclure des niveaux de menu distincts et amélioration de l'interaction utilisateur lors de l'insertion dynamique des filtres correspondants. Gestion des opérateurs pour les filtres de date et de mot intégrée.
…e tokens dans le composant ChatInputArea. Amélioration de l'expérience utilisateur en garantissant un espacement approprié lors de l'insertion dynamique de contenu.
… dans le composant ChatInputArea. Ajout de vérifications pour garantir des espaces appropriés avant et après les tokens et les dates, améliorant ainsi l'expérience utilisateur lors de la saisie dynamique.
…tArea. Ajout d'une logique pour ouvrir le sélecteur de fichiers filtré en fonction de la saisie utilisateur après le symbole '@'. Mise à jour du texte d'espace réservé pour clarifier l'utilisation des commandes et des filtres.
…nputArea. Importation de la fonction getTriggerAtCaret depuis le nouveau fichier query-filters.tsx pour améliorer la lisibilité et la modularité du code. Mise à jour de l'affichage des suggestions pour intégrer un composant QueryFiltersPopover, optimisant ainsi l'interaction utilisateur lors de la sélection des filtres.
…icher les messages avec des badges pour les tokens (fichiers, dates, inclusions, exclusions). Synchronisation du défilement de l'overlay avec la zone de texte pour une meilleure expérience utilisateur lors de la saisie. Mise à jour du style de la zone de texte pour améliorer la visibilité des entrées.
…Message pour mettre en évidence les tokens (fichiers, dates, inclusions, exclusions) en fonction de leur type. Gestion des erreurs de décoration pour assurer un rendu markdown en cas d'échec. Amélioration de l'expérience utilisateur lors de l'affichage des messages.
…upprimant les bordures pour une apparence plus épurée. Mise à jour de la classe CSS pour le texte afin d'assurer une meilleure lisibilité sur les appareils mobiles. Ajustement de la taille du texte pour une expérience utilisateur optimisée.
…putArea afin d'améliorer la synchronisation des métriques de police et le défilement. Mise à jour de la logique de défilement pour assurer un alignement précis du texte et amélioration de la gestion des tokens dans le composant ChatMessage pour une meilleure correspondance des formats. Optimisation de l'expérience utilisateur lors de la saisie et de l'affichage des messages.
…s sur les corrections automatiques de formatage appliquées par les hooks pré-commit.
@hjamet
Copy link
Contributor Author

hjamet commented Sep 5, 2025

I can't work out where the CI jobs fail: does it really come from my code? @debanjum 🦦

@debanjum
Copy link
Member

I can't work out where the CI jobs fail: does it really come from my code? @debanjum 🦦

Yeah, the test failures are unrelated to your changes

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.

2 participants