33800 Docs

← Retour

Proposition: QIG v2.1 - Mode Display (Tables/Listes)

Date: 24-01-2026 19:45 Status: En attente validation

Objectif

Ajouter un mode "display" au QIG pour afficher des donnees (listes, tables) en plus des formulaires.

Exemple :

User: "Liste mes domaines O2switch"
  ↓
Ollama detecte: action=read, entity=domains, connector=o2switch
  ↓
QIG appelle: connectors-hub /api/fetch GET /domains
  ↓
Ollama genere: DisplaySpec (table avec colonnes)
  ↓
Qwik render: Table avec les domaines

Architecture

1. DisplaySpec (nouveau format)

interface DisplaySpec {
  title: string;
  description?: string;
  type: "table" | "list" | "cards" | "detail";

  // Pour table
  columns?: Array<{
    id: string;
    label: string;
    type: "text" | "date" | "badge" | "link" | "actions";
    sortable?: boolean;
  }>;

  // Pour list/cards
  itemTemplate?: {
    title: string;      // ex: "{{name}}"
    subtitle?: string;  // ex: "{{created_at}}"
    badge?: string;     // ex: "{{status}}"
  };

  // Actions possibles
  actions?: Array<{
    id: string;
    label: string;
    icon?: string;
    action: "edit" | "delete" | "view" | "custom";
    connector: string;
    method: string;
    path: string;  // ex: "/domains/{{id}}"
  }>;

  // Source des donnees
  source: {
    connector: string;
    method: "GET";
    path: string;
    dataPath?: string;  // ex: "data.domains" si nested
  };
}

2. Nouveaux composants Qwik

src/components/display/
├── DisplayRenderer.tsx    # Dispatch selon type
├── TableDisplay.tsx       # Table avec tri, pagination
├── ListDisplay.tsx        # Liste verticale
├── CardsDisplay.tsx       # Grille de cards
└── DetailDisplay.tsx      # Vue detail single item

3. Flow modifie

Input utilisateur
       ↓
  Intent Analysis (Ollama)
       ↓
  ┌────────────────────────────┐
  │ action = create/update ?   │──→ UISpec → FormRenderer
  │ action = read/list ?       │──→ Fetch data → DisplaySpec → DisplayRenderer
  │ action = delete ?          │──→ ConfirmSpec → ConfirmDialog
  └────────────────────────────┘

4. Prompts Ollama

displayPrompt() pour generer DisplaySpec :

Tu es un expert UX/UI. L'utilisateur veut AFFICHER des donnees.

Action: {{action}}
Connector: {{connector}}
Entity: {{entity}}
Donnees recues: {{data_sample}}

Genere un DisplaySpec JSON pour afficher ces donnees de maniere claire.
Choisis le type le plus adapte (table pour listes, cards pour items visuels, etc.)

Fichiers a creer/modifier

Fichier Action
src/lib/ui-spec/display-types.ts Creer - Types DisplaySpec
src/lib/ollama/prompts.ts Modifier - Ajouter displayPrompt
src/components/display/DisplayRenderer.tsx Creer
src/components/display/TableDisplay.tsx Creer
src/components/display/ListDisplay.tsx Creer
src/components/display/CardsDisplay.tsx Creer
src/routes/index.tsx Modifier - Ajouter flow read

Exemple concret: Domaines O2switch

Input: "Liste mes domaines O2switch"

Intent:

{
  "understood": true,
  "language": "fr",
  "connector": "o2switch",
  "action": "read",
  "entity": "domains",
  "description": "Lister les domaines heberges"
}

Appel API:

POST connectors-hub/api/fetch
{
  "connector": "o2switch",
  "method": "GET",
  "path": "/execute/DomainInfo/list_domains"
}

DisplaySpec genere:

{
  "title": "Mes domaines O2switch",
  "type": "table",
  "columns": [
    {"id": "domain", "label": "Domaine", "type": "text"},
    {"id": "status", "label": "Status", "type": "badge"},
    {"id": "documentroot", "label": "Dossier", "type": "text"}
  ],
  "actions": [
    {"id": "view", "label": "Voir", "action": "view"}
  ],
  "source": {
    "connector": "o2switch",
    "method": "GET",
    "path": "/execute/DomainInfo/list_domains"
  }
}

Resultat: Table avec tous tes domaines, triable, avec actions.

Estimation

Validation requise