Proposition : Fix WebSearchTool - Mobile + Autocompletion

Date : 07/02/2026 Status : IMPLEMENTEE Fichier principal : connectors-front/src/components/tools/WebSearchTool.tsx

1. Fix Autocompletion (bug)

Cause racine

L'endpoint SearXNG /autocompleter retourne le format OpenSearch Suggestions :

["test", ["test debit", "test de pureté", "test connexion", ...]]

Le proxy (connectors-api) retourne cette reponse comme une string dans data:

{"success":true, "status":200, "data":"[\"test\", [\"test debit\", ...]]"}

Le code frontend (ligne 211-212) :

const data = res.data || res;
state.autocompleteSuggestions = Array.isArray(data) ? data : (data.suggestions || []);

data = string → Array.isArray() = false
data.suggestions = undefined
Resultat : [] → autocompletion toujours vide

Fix

const data = res.data || res;
let parsed = data;
if (typeof parsed === 'string') {
  try { parsed = JSON.parse(parsed); } catch { /* ignore */ }
}
// OpenSearch format: [query, [suggestions]]
if (Array.isArray(parsed) && Array.isArray(parsed[1])) {
  state.autocompleteSuggestions = parsed[1];
} else if (Array.isArray(parsed)) {
  state.autocompleteSuggestions = parsed;
} else {
  state.autocompleteSuggestions = (parsed as any).suggestions || [];
}
autocompleteOpen.value = state.autocompleteSuggestions.length > 0;

2. Refonte Mobile WebSearchTool

Problemes identifies

Severite	Probleme	Lignes
CRITIQUE	Barre de recherche : bouton "Rechercher" trop large sur mobile	332-341
CRITIQUE	Category chips : wrappent sur 3-4 lignes au lieu de scroller	347-357
HAUTE	Filtres (time/safesearch/moteurs) : gap trop grand, wrap chaotique	360-394
HAUTE	Infobox cache sous 1024px (perdu sur tablettes)	557
HAUTE	Zone resultats : padding trop genereux, double-scroll possible	420
MOYENNE	Grille images : 2 colonnes minimum meme sur 320px	473
MOYENNE	Meta resultats (date, score, engines) : deborde sur petits ecrans	538-548

Modifications prevues

2.1 Barre de recherche responsive

Bouton : icone loupe seule sur mobile, texte "Rechercher" sur sm: et plus
Input : input-sm sur mobile, input-md sur desktop

2.2 Categories horizontales scrollables

Remplacer flex-wrap par overflow-x-auto avec scrollbar-hide
flex-nowrap pour garder tout sur une ligne
Boutons plus compacts sur mobile (icone seule sous sm:)

2.3 Filtres compacts

gap-2 sur mobile, gap-3 sur desktop
Selects select-xs partout (deja le cas)
Stack vertical sous sm: si necessaire

2.4 Infobox adaptative

Visible a partir de md: (768px) au lieu de lg: (1024px)
Sur mobile : collapse sous les resultats (pas hidden, juste en dessous)
flex-col md:flex-row sur le conteneur resultats+infobox

2.5 Zone resultats optimisee

p-3 sur mobile, p-4 sur desktop
Grille images : grid-cols-2 sm:grid-cols-3 lg:grid-cols-4
Meta engines : flex-wrap + gap-1 pour eviter debordement

2.6 Pagination mobile

Boutons plus larges et tactiles (btn-md au lieu de btn-sm)
Zone de tap suffisante (44px minimum)

Resume des fichiers modifies

Fichier	Modifications
`WebSearchTool.tsx`	Fix autocomplete parsing + refonte mobile CSS

Impact

Aucun changement backend - le proxy fonctionne correctement
Aucun changement de logique - uniquement parsing response + classes CSS
Retro-compatible - l'UI desktop reste identique