@wasto/cms-components 1.5.10 → 1.5.12

package/src/components/chat/Chat.tsx

@@ -1,928 +1,928 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import {
-  ActivityIndicator,
-  FlatList,
-  Linking,
-  Modal,
-  Pressable,
-  StyleSheet,
-  Text,
-  TextInput,
-  View,
-} from "react-native";
-import { Image } from "expo-image";
-import { Download, MapPin, MessageCircle, Send, X } from "lucide-react-native";
-import type { CalendarPdfSector, StreetSectorMatch } from "@wasto/sdk";
-import { useTheme } from "../../contexts/ThemeContext";
-import { useLocal } from "../../contexts/LocalContext";
-import { useWastoClient } from "../../hooks/useWastoClient";
-import { resolveTheme } from "../../helpers/themeStyles";
-import { SPACE } from "../../helpers/layout";
-import { ConsignesModal } from "../consignes-modal/ConsignesModal";
-import { resolveApiAssetUrl } from "../../helpers/resolveApiAssetUrl";
-import { useWasto } from "../../contexts/WastoContext";
-import { getContrastColor } from "../../helpers/getContrastColor";
-
-export type ChatProps = {
-  title?: string;
-  cityId?: string;
-  cityGroupId?: string;
-};
-
-type ChatWasteTypeCard = {
-  id: string;
-  name: string;
-  description?: string | null;
-  instructions?: string | null;
-  color?: string | null;
-  colorLight?: string | null;
-  imageUrl?: string | null;
-  matchedMaterial?: string;
-};
-
-type ChatLink = {
-  id: string;
-  label: string;
-  url: string;
-};
-
-type ChatBubble = {
-  id: string;
-  role: "USER" | "ASSISTANT";
-  content: string;
-  wasteTypes?: ChatWasteTypeCard[];
-  links?: ChatLink[];
-};
-
-/** Label compact (pas de hover natif). */
-function shortDownloadLabel(label: string): string {
-  if (/calendrier|pdf/i.test(label)) return "Télécharger le PDF";
-  if (label.length <= 22) return label;
-  return `${label.slice(0, 20)}…`;
-}
-
-const DISCLAIMER =
-  "Informations indicatives · règles de votre territoire. En cas de doute, contactez un agent.";
-
-const ASK_ADDRESS =
-  "Pour vous répondre précisément (collectes, consignes locales), quelle est votre adresse ? Indiquez le nom de votre rue.";
-
-const WELCOME =
-  "Bonjour ! Je suis Wast'O Agent. Posez-moi une question sur le tri, les collectes ou les déchetteries.";
-
-/** Texte court dans la vignette (intro + consignes), template générique. */
-function wasteTypeCardBody(
-  fiche: Pick<
-    ChatWasteTypeCard,
-    "name" | "matchedMaterial" | "instructions" | "description"
-  >,
-): string {
-  const material = fiche.matchedMaterial?.trim();
-  const lines: string[] = [];
-  if (material) {
-    lines.push(
-      `Pour « ${material} », le référentiel de votre collectivité indique le flux « ${fiche.name} ».`,
-    );
-  } else {
-    lines.push(`Voici la fiche « ${fiche.name} » de votre collectivité.`);
-  }
-  const tip = fiche.instructions?.trim() || fiche.description?.trim();
-  if (tip) {
-    lines.push(tip);
-  }
-  return lines.join("\n\n");
-}
-
-export function Chat({ title, cityId, cityGroupId: cityGroupIdProp }: ChatProps) {
-  const client = useWastoClient();
-  const { theme } = useTheme();
-  const { apiUrl, cityGroupId: contextCityGroupId } = useWasto();
-  const resolved = resolveTheme(theme);
-  const local = useLocal();
-  const cityGroupId =
-    cityGroupIdProp?.trim() || contextCityGroupId?.trim() || null;
-  const resolvedCityId = cityId ?? local.selectedCityId ?? null;
-  const resolvedPlaceId = local.selectedPlaceId ?? null;
-  const deviceId = local.deviceId;
-  const hasAddress = Boolean(resolvedCityId && resolvedPlaceId);
-
-  const [open, setOpen] = useState(false);
-  const [available, setAvailable] = useState<boolean | null>(null);
-  const [unavailableReason, setUnavailableReason] = useState<string | null>(null);
-  const [conversationId, setConversationId] = useState<string | null>(null);
-  const [messages, setMessages] = useState<ChatBubble[]>([]);
-  const [input, setInput] = useState("");
-  const [loading, setLoading] = useState(false);
-  const [initError, setInitError] = useState<string | null>(null);
-  const [selectedWasteTypeId, setSelectedWasteTypeId] = useState<string | null>(
-    null,
-  );
-  const [needsAddress, setNeedsAddress] = useState(!hasAddress);
-  const [addressQuery, setAddressQuery] = useState("");
-  const [addressResults, setAddressResults] = useState<StreetSectorMatch[]>([]);
-  const [addressSearching, setAddressSearching] = useState(false);
-  const [selectedStreet, setSelectedStreet] = useState<StreetSectorMatch | null>(
-    null,
-  );
-  const [pendingSectors, setPendingSectors] = useState<CalendarPdfSector[]>([]);
-  const listRef = useRef<FlatList<ChatBubble>>(null);
-
-  useEffect(() => {
-    setNeedsAddress(!hasAddress);
-  }, [hasAddress]);
-
-  useEffect(() => {
-    let cancelled = false;
-    (async () => {
-      if (!cityGroupId && !resolvedCityId) {
-        setAvailable(false);
-        setUnavailableReason(
-          "Configuration manquante : collectivité requise pour Wast'O Agent.",
-        );
-        return;
-      }
-      try {
-        const res = await client.public.chat.getAvailability({
-          cityGroupId: cityGroupId || undefined,
-          cityId: cityGroupId ? undefined : resolvedCityId || undefined,
-        });
-        if (cancelled) return;
-        setAvailable(Boolean(res?.enabled));
-        setUnavailableReason(res?.enabled ? null : res?.reason ?? null);
-      } catch {
-        if (cancelled) return;
-        setAvailable(true);
-        setUnavailableReason(null);
-      }
-    })();
-    return () => {
-      cancelled = true;
-    };
-  }, [client, cityGroupId, resolvedCityId]);
-
-  useEffect(() => {
-    if (!needsAddress || !open) return;
-    const trimmed = addressQuery.trim();
-    if (trimmed.length < 2 || !cityGroupId) {
-      setAddressResults([]);
-      setAddressSearching(false);
-      return;
-    }
-    setAddressSearching(true);
-    const handle = setTimeout(async () => {
-      try {
-        const res = await client.public.cityGroups.searchStreetSectors(
-          cityGroupId,
-          { q: trimmed },
-        );
-        setAddressResults(res.data ?? []);
-      } catch {
-        setAddressResults([]);
-      } finally {
-        setAddressSearching(false);
-      }
-    }, 300);
-    return () => clearTimeout(handle);
-  }, [addressQuery, cityGroupId, client.public.cityGroups, needsAddress, open]);
-
-  const ensureConversation = useCallback(async () => {
-    if (conversationId) return conversationId;
-    setInitError(null);
-    const id =
-      deviceId ??
-      `anon-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
-    try {
-      const conversation = (await client.public.chat.createConversation({
-        deviceId: id,
-        cityId: resolvedCityId ?? undefined,
-        cityGroupId: cityGroupId ?? undefined,
-      })) as { id: string };
-      setConversationId(conversation.id);
-      return conversation.id;
-    } catch (e: unknown) {
-      const msg =
-        e instanceof Error
-          ? e.message
-          : "Impossible d’ouvrir l’assistant pour le moment.";
-      setInitError(msg);
-      throw e;
-    }
-  }, [client, conversationId, deviceId, resolvedCityId, cityGroupId]);
-
-  const handleOpen = async () => {
-    setOpen(true);
-    if (available === false) return;
-
-    if (!hasAddress) {
-      setNeedsAddress(true);
-      setMessages([{ id: "ask-address", role: "ASSISTANT", content: ASK_ADDRESS }]);
-      return;
-    }
-
-    if (!conversationId) {
-      setLoading(true);
-      try {
-        await ensureConversation();
-        const sector = local.placeMeta?.sectorName;
-        const cityName = local.placeMeta?.cityName;
-        const welcome = sector
-          ? `Bonjour ! Je suis Wast'O Agent (secteur « ${sector} »${
-              cityName ? `, ${cityName}` : ""
-            }). Posez-moi une question sur le tri, les collectes ou les déchetteries.`
-          : WELCOME;
-        setMessages([{ id: "welcome", role: "ASSISTANT", content: welcome }]);
-      } catch {
-        // initError déjà posé
-      } finally {
-        setLoading(false);
-      }
-    }
-  };
-
-  const confirmAddress = async (
-    cityIdNext: string,
-    placeId: string,
-    meta: {
-      cityName?: string | null;
-      streetName?: string | null;
-      sectorName?: string | null;
-    },
-    userLabel: string,
-  ) => {
-    setLoading(true);
-    try {
-      const registeredDeviceId = await local.registerDevice(
-        cityIdNext,
-        placeId,
-        meta,
-      );
-      setNeedsAddress(false);
-      setPendingSectors([]);
-      setSelectedStreet(null);
-      setAddressQuery("");
-      setMessages((prev) => [
-        ...prev,
-        { id: `u-addr-${Date.now()}`, role: "USER", content: userLabel },
-        {
-          id: `a-addr-${Date.now()}`,
-          role: "ASSISTANT",
-          content: meta.sectorName
-            ? `Parfait — secteur « ${meta.sectorName} »${
-                meta.cityName ? ` à ${meta.cityName}` : ""
-              }. Posez-moi votre question.`
-            : "Parfait. Posez-moi votre question.",
-        },
-      ]);
-      const id =
-        registeredDeviceId ??
-        deviceId ??
-        `anon-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
-      if (conversationId) {
-        await client.public.chat.setConversationLocation(conversationId, {
-          cityId: cityIdNext,
-          placeId,
-        });
-      } else {
-        const conversation = (await client.public.chat.createConversation({
-          deviceId: id,
-          cityId: cityIdNext,
-          cityGroupId: cityGroupId ?? undefined,
-        })) as { id: string };
-        setConversationId(conversation.id);
-      }
-    } catch (e: unknown) {
-      setInitError(
-        e instanceof Error ? e.message : "Impossible d’enregistrer l’adresse.",
-      );
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const onSelectStreet = (street: StreetSectorMatch) => {
-    setSelectedStreet(street);
-    const sectors = (street.sectors ?? []).filter(Boolean);
-    if (sectors.length === 0) return;
-    if (sectors.length === 1) {
-      const sector = sectors[0]!;
-      void confirmAddress(
-        sector.cityId || street.cityId,
-        sector.id,
-        {
-          cityName: sector.cityName || street.cityName,
-          streetName: street.streetName,
-          sectorName: sector.name,
-        },
-        `${street.streetName}${street.cityName ? ` (${street.cityName})` : ""}`,
-      );
-      return;
-    }
-    setPendingSectors(sectors);
-  };
-
-  const onSelectSector = (sector: CalendarPdfSector) => {
-    if (!selectedStreet) return;
-    void confirmAddress(
-      sector.cityId || selectedStreet.cityId,
-      sector.id,
-      {
-        cityName: sector.cityName || selectedStreet.cityName,
-        streetName: selectedStreet.streetName,
-        sectorName: sector.name,
-      },
-      `${selectedStreet.streetName} — ${sector.name}`,
-    );
-  };
-
-  const handleSend = async () => {
-    const content = input.trim();
-    if (!content || loading || needsAddress) return;
-    setInput("");
-    setLoading(true);
-    const tempId = `u-${Date.now()}`;
-    setMessages((prev) => [...prev, { id: tempId, role: "USER", content }]);
-    try {
-      const id = await ensureConversation();
-      const res = (await client.public.chat.sendMessage(id, {
-        content,
-        placeId: resolvedPlaceId || local.selectedPlaceId || undefined,
-      })) as {
-        response?: {
-          type?: string;
-          content?: string;
-          message?: string;
-          wasteTypes?: ChatWasteTypeCard[];
-          links?: ChatLink[];
-        };
-        message?: { id?: string };
-      };
-      let reply = "Réponse reçue.";
-      const wasteTypes =
-        res?.response?.type === "text" && Array.isArray(res.response.wasteTypes)
-          ? res.response.wasteTypes
-          : undefined;
-      const links =
-        res?.response?.type === "text" && Array.isArray(res.response.links)
-          ? res.response.links
-          : undefined;
-      if (res?.response?.type === "text") {
-        reply = res.response.content ?? reply;
-      } else if (res?.response?.message) {
-        reply = res.response.message;
-      }
-      setMessages((prev) => [
-        ...prev,
-        {
-          id: res?.message?.id ? `${res.message.id}-a` : `a-${Date.now()}`,
-          role: "ASSISTANT",
-          content: reply,
-          wasteTypes,
-          links,
-        },
-      ]);
-    } catch (e: unknown) {
-      setMessages((prev) => [
-        ...prev,
-        {
-          id: `err-${Date.now()}`,
-          role: "ASSISTANT",
-          content:
-            e instanceof Error
-              ? e.message
-              : "Désolé, une erreur s'est produite. Veuillez réessayer.",
-        },
-      ]);
-    } finally {
-      setLoading(false);
-      requestAnimationFrame(() =>
-        listRef.current?.scrollToEnd({ animated: true }),
-      );
-    }
-  };
-
-  if (available === false && !open) {
-    return null;
-  }
-
-  const headerTitle = title?.trim() || "Wast'O Agent";
-  const { colors } = resolved;
-  const onPrimary = colors.onPrimary;
-
-  return (
-    <>
-      {!open ? (
-        <View style={styles.fabHost} pointerEvents="box-none">
-          <Pressable
-            accessibilityRole="button"
-            accessibilityLabel="Ouvrir Wast'O Agent"
-            onPress={handleOpen}
-            style={[styles.fab, { backgroundColor: colors.primary }]}
-          >
-            <MessageCircle size={24} color={onPrimary} />
-          </Pressable>
-        </View>
-      ) : null}
-
-      <Modal
-        visible={open}
-        animationType="slide"
-        presentationStyle="fullScreen"
-        onRequestClose={() => setOpen(false)}
-      >
-        <View
-          style={[
-            styles.panel,
-            {
-              backgroundColor: colors.surface,
-            },
-          ]}
-        >
-            <View
-              style={[styles.header, { backgroundColor: colors.primary }]}
-            >
-              <Text style={[styles.headerTitle, { color: onPrimary }]}>
-                {headerTitle}
-              </Text>
-              <Pressable
-                onPress={() => setOpen(false)}
-                accessibilityLabel="Fermer"
-                hitSlop={8}
-              >
-                <X size={22} color={onPrimary} />
-              </Pressable>
-            </View>
-
-            <Text style={styles.disclaimer}>{DISCLAIMER}</Text>
-
-            {initError || unavailableReason ? (
-              <View style={styles.errorBox}>
-                <Text style={styles.errorText}>
-                  {initError || unavailableReason}
-                </Text>
-              </View>
-            ) : null}
-
-            <FlatList
-              ref={listRef}
-              data={messages}
-              keyExtractor={(item) => item.id}
-              style={styles.list}
-              contentContainerStyle={styles.listContent}
-              onContentSizeChange={() =>
-                listRef.current?.scrollToEnd({ animated: true })
-              }
-              ListEmptyComponent={
-                loading ? (
-                  <ActivityIndicator
-                    color={colors.primary}
-                    style={{ marginTop: 24 }}
-                  />
-                ) : null
-              }
-              renderItem={({ item }) => {
-                const hasWasteCards =
-                  item.role === "ASSISTANT" &&
-                  Array.isArray(item.wasteTypes) &&
-                  item.wasteTypes.length > 0;
-                const hasLinks =
-                  item.role === "ASSISTANT" &&
-                  Array.isArray(item.links) &&
-                  item.links.length > 0;
-                return (
-                  <View
-                    style={[
-                      item.role === "USER"
-                        ? styles.bubbleUserWrap
-                        : styles.bubbleAssistantWrap,
-                    ]}
-                  >
-                    {!hasWasteCards ? (
-                      <View
-                        style={[
-                          styles.bubble,
-                          item.role === "USER"
-                            ? [
-                                styles.bubbleUser,
-                                { backgroundColor: colors.primary },
-                              ]
-                            : [
-                                styles.bubbleAssistant,
-                                { backgroundColor: colors.primarySoft },
-                              ],
-                        ]}
-                      >
-                        <Text
-                          style={{
-                            color:
-                              item.role === "USER"
-                                ? onPrimary
-                                : colors.onSurface,
-                          }}
-                        >
-                          {item.content}
-                        </Text>
-                      </View>
-                    ) : null}
-                    {hasWasteCards &&
-                      item.wasteTypes?.map((fiche) => {
-                        const accent = fiche.color || colors.primary;
-                        const img = resolveApiAssetUrl(apiUrl, fiche.imageUrl);
-                        const body = wasteTypeCardBody(fiche);
-                        return (
-                          <Pressable
-                            key={fiche.id}
-                            onPress={() => setSelectedWasteTypeId(fiche.id)}
-                            style={[styles.ficheCard, { borderColor: accent }]}
-                          >
-                            <View
-                              style={[
-                                styles.ficheHeader,
-                                { backgroundColor: accent },
-                              ]}
-                            >
-                              {img ? (
-                                <Image
-                                  source={img}
-                                  style={styles.ficheImage}
-                                  contentFit="contain"
-                                />
-                              ) : null}
-                              <Text
-                                style={[
-                                  styles.ficheTitle,
-                                  { color: getContrastColor(accent) },
-                                ]}
-                                numberOfLines={2}
-                              >
-                                {fiche.name}
-                              </Text>
-                            </View>
-                            {fiche.matchedMaterial ? (
-                              <Text style={styles.ficheMeta}>
-                                Matériau : {fiche.matchedMaterial}
-                              </Text>
-                            ) : null}
-                            {body ? (
-                              <Text style={styles.ficheBody}>{body}</Text>
-                            ) : null}
-                            <Text style={[styles.ficheCta, { color: accent }]}>
-                              Voir la fiche complète
-                            </Text>
-                          </Pressable>
-                        );
-                      })}
-                    {hasLinks
-                      ? item.links?.map((link) => (
-                          <Pressable
-                            key={link.id}
-                            accessibilityRole="link"
-                            accessibilityLabel={link.label}
-                            onPress={() => {
-                              void Linking.openURL(link.url);
-                            }}
-                            style={[
-                              styles.downloadChip,
-                              { backgroundColor: colors.primary },
-                            ]}
-                          >
-                            <Download size={18} color={onPrimary} />
-                            <Text
-                              style={[
-                                styles.downloadChipLabel,
-                                { color: onPrimary },
-                              ]}
-                              numberOfLines={1}
-                            >
-                              {shortDownloadLabel(link.label)}
-                            </Text>
-                          </Pressable>
-                        ))
-                      : null}
-                  </View>
-                );
-              }}
-            />
-
-            {needsAddress ? (
-              <View style={styles.addressBlock}>
-                <View
-                  style={[
-                    styles.addressSearch,
-                    { borderColor: colors.border },
-                  ]}
-                >
-                  <MapPin size={16} color={colors.muted} />
-                  <TextInput
-                    value={addressQuery}
-                    onChangeText={setAddressQuery}
-                    placeholder="Votre rue…"
-                    placeholderTextColor={colors.muted}
-                    style={[styles.addressInput, { color: colors.onSurface }]}
-                    autoCorrect={false}
-                    autoCapitalize="words"
-                  />
-                </View>
-                {!cityGroupId ? (
-                  <Text style={[styles.errorText, { marginTop: 8 }]}>
-                    cityGroupId requis pour la recherche d&apos;adresse.
-                  </Text>
-                ) : null}
-                {addressSearching ? (
-                  <ActivityIndicator
-                    color={colors.primary}
-                    style={{ marginTop: 8 }}
-                  />
-                ) : null}
-                {pendingSectors.length > 1 ? (
-                  <View style={{ gap: 6, marginTop: 8 }}>
-                    <Text style={{ fontSize: 12, color: colors.muted }}>
-                      Choisissez votre secteur :
-                    </Text>
-                    {pendingSectors.map((sector) => (
-                      <Pressable
-                        key={sector.id}
-                        onPress={() => onSelectSector(sector)}
-                        style={[
-                          styles.sectorBtn,
-                          { borderColor: colors.primary },
-                        ]}
-                      >
-                        <Text style={{ color: colors.primary, fontWeight: "600" }}>
-                          {sector.name}
-                          {sector.cityName ? ` · ${sector.cityName}` : ""}
-                        </Text>
-                      </Pressable>
-                    ))}
-                  </View>
-                ) : (
-                  <FlatList
-                    data={addressResults}
-                    keyExtractor={(item) => item.streetId}
-                    keyboardShouldPersistTaps="handled"
-                    style={{ maxHeight: 160, marginTop: 8 }}
-                    renderItem={({ item }) => (
-                      <Pressable
-                        onPress={() => onSelectStreet(item)}
-                        style={styles.addressRow}
-                      >
-                        <Text
-                          style={{
-                            color: colors.onSurface,
-                            fontWeight: "600",
-                          }}
-                        >
-                          {item.streetName}
-                        </Text>
-                        <Text style={{ color: colors.muted, fontSize: 12 }}>
-                          {item.cityName}
-                        </Text>
-                      </Pressable>
-                    )}
-                  />
-                )}
-              </View>
-            ) : (
-              <View style={styles.inputRow}>
-                <TextInput
-                  value={input}
-                  onChangeText={setInput}
-                  placeholder="Votre question…"
-                  placeholderTextColor={colors.muted}
-                  editable={!loading && available !== false}
-                  style={[
-                    styles.input,
-                    {
-                      borderColor: colors.border,
-                      color: colors.onSurface,
-                    },
-                  ]}
-                  onSubmitEditing={handleSend}
-                  returnKeyType="send"
-                />
-                <Pressable
-                  onPress={handleSend}
-                  disabled={loading || !input.trim() || available === false}
-                  style={[
-                    styles.sendBtn,
-                    {
-                      backgroundColor: colors.primary,
-                      opacity: loading || !input.trim() ? 0.5 : 1,
-                    },
-                  ]}
-                  accessibilityLabel="Envoyer"
-                >
-                  {loading ? (
-                    <ActivityIndicator color={onPrimary} />
-                  ) : (
-                    <Send size={18} color={onPrimary} />
-                  )}
-                </Pressable>
-              </View>
-            )}
-          </View>
-      </Modal>
-
-      <ConsignesModal
-        visible={!!selectedWasteTypeId}
-        wasteTypeId={selectedWasteTypeId ?? ""}
-        onClose={() => setSelectedWasteTypeId(null)}
-      />
-    </>
-  );
-}
-
-const styles = StyleSheet.create({
-  /** Couche plein écran hors scroll — le FAB flotte au-dessus de la page. */
-  fabHost: {
-    ...StyleSheet.absoluteFillObject,
-    zIndex: 1000,
-    elevation: 1000,
-  },
-  fab: {
-    position: "absolute",
-    right: SPACE.pageX,
-    bottom: SPACE.sectionY,
-    width: 56,
-    height: 56,
-    borderRadius: 28,
-    alignItems: "center",
-    justifyContent: "center",
-    elevation: 6,
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.2,
-    shadowRadius: 4,
-  },
-  panel: {
-    flex: 1,
-    overflow: "hidden",
-  },
-  list: {
-    flex: 1,
-  },
-  header: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingHorizontal: SPACE.pageX,
-    paddingVertical: 14,
-  },
-  headerTitle: {
-    fontSize: 17,
-    fontWeight: "600",
-  },
-  disclaimer: {
-    fontSize: 11,
-    color: "#666",
-    paddingHorizontal: 14,
-    paddingVertical: 8,
-    backgroundColor: "#f6f6f6",
-  },
-  errorBox: {
-    margin: SPACE.stack,
-    padding: 10,
-    borderRadius: 8,
-    backgroundColor: "#fff4f4",
-  },
-  errorText: {
-    color: "#a33",
-    fontSize: 13,
-  },
-  listContent: {
-    padding: 14,
-    gap: 8,
-    paddingBottom: 8,
-  },
-  bubbleUserWrap: {
-    alignItems: "flex-end",
-    marginBottom: 8,
-  },
-  bubbleAssistantWrap: {
-    alignItems: "flex-start",
-    marginBottom: 8,
-    gap: 8,
-    maxWidth: "92%",
-  },
-  bubble: {
-    maxWidth: "100%",
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-    borderRadius: 12,
-  },
-  bubbleUser: {
-    alignSelf: "flex-end",
-  },
-  bubbleAssistant: {
-    alignSelf: "flex-start",
-  },
-  ficheCard: {
-    alignSelf: "stretch",
-    borderWidth: 2,
-    borderRadius: 12,
-    overflow: "hidden",
-    backgroundColor: "#fff",
-  },
-  ficheHeader: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 10,
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-  },
-  ficheImage: {
-    width: 36,
-    height: 36,
-  },
-  ficheTitle: {
-    flex: 1,
-    fontSize: 15,
-    fontWeight: "700",
-  },
-  ficheMeta: {
-    paddingHorizontal: 12,
-    paddingTop: 8,
-    fontSize: 12,
-    color: "#555",
-  },
-  ficheBody: {
-    paddingHorizontal: 12,
-    paddingTop: 8,
-    fontSize: 13,
-    lineHeight: 18,
-    color: "#222",
-  },
-  ficheCta: {
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    fontSize: 12,
-    fontWeight: "600",
-  },
-  downloadChip: {
-    flexDirection: "row",
-    alignItems: "center",
-    alignSelf: "flex-start",
-    gap: 8,
-    height: 40,
-    maxWidth: "100%",
-    paddingHorizontal: 12,
-    borderRadius: 20,
-  },
-  downloadChipLabel: {
-    fontSize: 13,
-    fontWeight: "600",
-    flexShrink: 1,
-  },
-  addressBlock: {
-    padding: SPACE.pageXTight,
-    borderTopWidth: StyleSheet.hairlineWidth,
-    borderTopColor: "#e0e0e0",
-  },
-  addressSearch: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    borderWidth: 1,
-    borderRadius: 20,
-    paddingHorizontal: 12,
-    height: 42,
-  },
-  addressInput: {
-    flex: 1,
-    fontSize: 15,
-    paddingVertical: 0,
-  },
-  addressRow: {
-    paddingVertical: 10,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: "#eee",
-  },
-  sectorBtn: {
-    borderWidth: 1,
-    borderRadius: 8,
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-  },
-  inputRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    padding: SPACE.pageXTight,
-    borderTopWidth: StyleSheet.hairlineWidth,
-    borderTopColor: "#e0e0e0",
-  },
-  input: {
-    flex: 1,
-    borderWidth: 1,
-    borderRadius: 20,
-    paddingHorizontal: 14,
-    paddingVertical: 10,
-    fontSize: 15,
-  },
-  sendBtn: {
-    width: 42,
-    height: 42,
-    borderRadius: 21,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import {
+  ActivityIndicator,
+  FlatList,
+  Linking,
+  Modal,
+  Pressable,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from "react-native";
+import { Image } from "expo-image";
+import { Download, MapPin, MessageCircle, Send, X } from "lucide-react-native";
+import type { CalendarPdfSector, StreetSectorMatch } from "@wasto/sdk";
+import { useTheme } from "../../contexts/ThemeContext";
+import { useLocal } from "../../contexts/LocalContext";
+import { useWastoClient } from "../../hooks/useWastoClient";
+import { resolveTheme } from "../../helpers/themeStyles";
+import { SPACE } from "../../helpers/layout";
+import { ConsignesModal } from "../consignes-modal/ConsignesModal";
+import { resolveApiAssetUrl } from "../../helpers/resolveApiAssetUrl";
+import { useWasto } from "../../contexts/WastoContext";
+import { getContrastColor } from "../../helpers/getContrastColor";
+
+export type ChatProps = {
+  title?: string;
+  cityId?: string;
+  cityGroupId?: string;
+};
+
+type ChatWasteTypeCard = {
+  id: string;
+  name: string;
+  description?: string | null;
+  instructions?: string | null;
+  color?: string | null;
+  colorLight?: string | null;
+  imageUrl?: string | null;
+  matchedMaterial?: string;
+};
+
+type ChatLink = {
+  id: string;
+  label: string;
+  url: string;
+};
+
+type ChatBubble = {
+  id: string;
+  role: "USER" | "ASSISTANT";
+  content: string;
+  wasteTypes?: ChatWasteTypeCard[];
+  links?: ChatLink[];
+};
+
+/** Label compact (pas de hover natif). */
+function shortDownloadLabel(label: string): string {
+  if (/calendrier|pdf/i.test(label)) return "Télécharger le PDF";
+  if (label.length <= 22) return label;
+  return `${label.slice(0, 20)}…`;
+}
+
+const DISCLAIMER =
+  "Informations indicatives · règles de votre territoire. En cas de doute, contactez un agent.";
+
+const ASK_ADDRESS =
+  "Pour vous répondre précisément (collectes, consignes locales), quelle est votre adresse ? Indiquez le nom de votre rue.";
+
+const WELCOME =
+  "Bonjour ! Je suis Wast'O Agent. Posez-moi une question sur le tri, les collectes ou les déchetteries.";
+
+/** Texte court dans la vignette (intro + consignes), template générique. */
+function wasteTypeCardBody(
+  fiche: Pick<
+    ChatWasteTypeCard,
+    "name" | "matchedMaterial" | "instructions" | "description"
+  >,
+): string {
+  const material = fiche.matchedMaterial?.trim();
+  const lines: string[] = [];
+  if (material) {
+    lines.push(
+      `Pour « ${material} », le référentiel de votre collectivité indique le flux « ${fiche.name} ».`,
+    );
+  } else {
+    lines.push(`Voici la fiche « ${fiche.name} » de votre collectivité.`);
+  }
+  const tip = fiche.instructions?.trim() || fiche.description?.trim();
+  if (tip) {
+    lines.push(tip);
+  }
+  return lines.join("\n\n");
+}
+
+export function Chat({ title, cityId, cityGroupId: cityGroupIdProp }: ChatProps) {
+  const client = useWastoClient();
+  const { theme } = useTheme();
+  const { apiUrl, cityGroupId: contextCityGroupId } = useWasto();
+  const resolved = resolveTheme(theme);
+  const local = useLocal();
+  const cityGroupId =
+    cityGroupIdProp?.trim() || contextCityGroupId?.trim() || null;
+  const resolvedCityId = cityId ?? local.selectedCityId ?? null;
+  const resolvedPlaceId = local.selectedPlaceId ?? null;
+  const deviceId = local.deviceId;
+  const hasAddress = Boolean(resolvedCityId && resolvedPlaceId);
+
+  const [open, setOpen] = useState(false);
+  const [available, setAvailable] = useState<boolean | null>(null);
+  const [unavailableReason, setUnavailableReason] = useState<string | null>(null);
+  const [conversationId, setConversationId] = useState<string | null>(null);
+  const [messages, setMessages] = useState<ChatBubble[]>([]);
+  const [input, setInput] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [initError, setInitError] = useState<string | null>(null);
+  const [selectedWasteTypeId, setSelectedWasteTypeId] = useState<string | null>(
+    null,
+  );
+  const [needsAddress, setNeedsAddress] = useState(!hasAddress);
+  const [addressQuery, setAddressQuery] = useState("");
+  const [addressResults, setAddressResults] = useState<StreetSectorMatch[]>([]);
+  const [addressSearching, setAddressSearching] = useState(false);
+  const [selectedStreet, setSelectedStreet] = useState<StreetSectorMatch | null>(
+    null,
+  );
+  const [pendingSectors, setPendingSectors] = useState<CalendarPdfSector[]>([]);
+  const listRef = useRef<FlatList<ChatBubble>>(null);
+
+  useEffect(() => {
+    setNeedsAddress(!hasAddress);
+  }, [hasAddress]);
+
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      if (!cityGroupId && !resolvedCityId) {
+        setAvailable(false);
+        setUnavailableReason(
+          "Configuration manquante : collectivité requise pour Wast'O Agent.",
+        );
+        return;
+      }
+      try {
+        const res = await client.public.chat.getAvailability({
+          cityGroupId: cityGroupId || undefined,
+          cityId: cityGroupId ? undefined : resolvedCityId || undefined,
+        });
+        if (cancelled) return;
+        setAvailable(Boolean(res?.enabled));
+        setUnavailableReason(res?.enabled ? null : res?.reason ?? null);
+      } catch {
+        if (cancelled) return;
+        setAvailable(true);
+        setUnavailableReason(null);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [client, cityGroupId, resolvedCityId]);
+
+  useEffect(() => {
+    if (!needsAddress || !open) return;
+    const trimmed = addressQuery.trim();
+    if (trimmed.length < 2 || !cityGroupId) {
+      setAddressResults([]);
+      setAddressSearching(false);
+      return;
+    }
+    setAddressSearching(true);
+    const handle = setTimeout(async () => {
+      try {
+        const res = await client.public.cityGroups.searchStreetSectors(
+          cityGroupId,
+          { q: trimmed },
+        );
+        setAddressResults(res.data ?? []);
+      } catch {
+        setAddressResults([]);
+      } finally {
+        setAddressSearching(false);
+      }
+    }, 300);
+    return () => clearTimeout(handle);
+  }, [addressQuery, cityGroupId, client.public.cityGroups, needsAddress, open]);
+
+  const ensureConversation = useCallback(async () => {
+    if (conversationId) return conversationId;
+    setInitError(null);
+    const id =
+      deviceId ??
+      `anon-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+    try {
+      const conversation = (await client.public.chat.createConversation({
+        deviceId: id,
+        cityId: resolvedCityId ?? undefined,
+        cityGroupId: cityGroupId ?? undefined,
+      })) as { id: string };
+      setConversationId(conversation.id);
+      return conversation.id;
+    } catch (e: unknown) {
+      const msg =
+        e instanceof Error
+          ? e.message
+          : "Impossible d’ouvrir l’assistant pour le moment.";
+      setInitError(msg);
+      throw e;
+    }
+  }, [client, conversationId, deviceId, resolvedCityId, cityGroupId]);
+
+  const handleOpen = async () => {
+    setOpen(true);
+    if (available === false) return;
+
+    if (!hasAddress) {
+      setNeedsAddress(true);
+      setMessages([{ id: "ask-address", role: "ASSISTANT", content: ASK_ADDRESS }]);
+      return;
+    }
+
+    if (!conversationId) {
+      setLoading(true);
+      try {
+        await ensureConversation();
+        const sector = local.placeMeta?.sectorName;
+        const cityName = local.placeMeta?.cityName;
+        const welcome = sector
+          ? `Bonjour ! Je suis Wast'O Agent (secteur « ${sector} »${
+              cityName ? `, ${cityName}` : ""
+            }). Posez-moi une question sur le tri, les collectes ou les déchetteries.`
+          : WELCOME;
+        setMessages([{ id: "welcome", role: "ASSISTANT", content: welcome }]);
+      } catch {
+        // initError déjà posé
+      } finally {
+        setLoading(false);
+      }
+    }
+  };
+
+  const confirmAddress = async (
+    cityIdNext: string,
+    placeId: string,
+    meta: {
+      cityName?: string | null;
+      streetName?: string | null;
+      sectorName?: string | null;
+    },
+    userLabel: string,
+  ) => {
+    setLoading(true);
+    try {
+      const registeredDeviceId = await local.registerDevice(
+        cityIdNext,
+        placeId,
+        meta,
+      );
+      setNeedsAddress(false);
+      setPendingSectors([]);
+      setSelectedStreet(null);
+      setAddressQuery("");
+      setMessages((prev) => [
+        ...prev,
+        { id: `u-addr-${Date.now()}`, role: "USER", content: userLabel },
+        {
+          id: `a-addr-${Date.now()}`,
+          role: "ASSISTANT",
+          content: meta.sectorName
+            ? `Parfait — secteur « ${meta.sectorName} »${
+                meta.cityName ? ` à ${meta.cityName}` : ""
+              }. Posez-moi votre question.`
+            : "Parfait. Posez-moi votre question.",
+        },
+      ]);
+      const id =
+        registeredDeviceId ??
+        deviceId ??
+        `anon-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+      if (conversationId) {
+        await client.public.chat.setConversationLocation(conversationId, {
+          cityId: cityIdNext,
+          placeId,
+        });
+      } else {
+        const conversation = (await client.public.chat.createConversation({
+          deviceId: id,
+          cityId: cityIdNext,
+          cityGroupId: cityGroupId ?? undefined,
+        })) as { id: string };
+        setConversationId(conversation.id);
+      }
+    } catch (e: unknown) {
+      setInitError(
+        e instanceof Error ? e.message : "Impossible d’enregistrer l’adresse.",
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const onSelectStreet = (street: StreetSectorMatch) => {
+    setSelectedStreet(street);
+    const sectors = (street.sectors ?? []).filter(Boolean);
+    if (sectors.length === 0) return;
+    if (sectors.length === 1) {
+      const sector = sectors[0]!;
+      void confirmAddress(
+        sector.cityId || street.cityId,
+        sector.id,
+        {
+          cityName: sector.cityName || street.cityName,
+          streetName: street.streetName,
+          sectorName: sector.name,
+        },
+        `${street.streetName}${street.cityName ? ` (${street.cityName})` : ""}`,
+      );
+      return;
+    }
+    setPendingSectors(sectors);
+  };
+
+  const onSelectSector = (sector: CalendarPdfSector) => {
+    if (!selectedStreet) return;
+    void confirmAddress(
+      sector.cityId || selectedStreet.cityId,
+      sector.id,
+      {
+        cityName: sector.cityName || selectedStreet.cityName,
+        streetName: selectedStreet.streetName,
+        sectorName: sector.name,
+      },
+      `${selectedStreet.streetName} — ${sector.name}`,
+    );
+  };
+
+  const handleSend = async () => {
+    const content = input.trim();
+    if (!content || loading || needsAddress) return;
+    setInput("");
+    setLoading(true);
+    const tempId = `u-${Date.now()}`;
+    setMessages((prev) => [...prev, { id: tempId, role: "USER", content }]);
+    try {
+      const id = await ensureConversation();
+      const res = (await client.public.chat.sendMessage(id, {
+        content,
+        placeId: resolvedPlaceId || local.selectedPlaceId || undefined,
+      })) as {
+        response?: {
+          type?: string;
+          content?: string;
+          message?: string;
+          wasteTypes?: ChatWasteTypeCard[];
+          links?: ChatLink[];
+        };
+        message?: { id?: string };
+      };
+      let reply = "Réponse reçue.";
+      const wasteTypes =
+        res?.response?.type === "text" && Array.isArray(res.response.wasteTypes)
+          ? res.response.wasteTypes
+          : undefined;
+      const links =
+        res?.response?.type === "text" && Array.isArray(res.response.links)
+          ? res.response.links
+          : undefined;
+      if (res?.response?.type === "text") {
+        reply = res.response.content ?? reply;
+      } else if (res?.response?.message) {
+        reply = res.response.message;
+      }
+      setMessages((prev) => [
+        ...prev,
+        {
+          id: res?.message?.id ? `${res.message.id}-a` : `a-${Date.now()}`,
+          role: "ASSISTANT",
+          content: reply,
+          wasteTypes,
+          links,
+        },
+      ]);
+    } catch (e: unknown) {
+      setMessages((prev) => [
+        ...prev,
+        {
+          id: `err-${Date.now()}`,
+          role: "ASSISTANT",
+          content:
+            e instanceof Error
+              ? e.message
+              : "Désolé, une erreur s'est produite. Veuillez réessayer.",
+        },
+      ]);
+    } finally {
+      setLoading(false);
+      requestAnimationFrame(() =>
+        listRef.current?.scrollToEnd({ animated: true }),
+      );
+    }
+  };
+
+  if (available === false && !open) {
+    return null;
+  }
+
+  const headerTitle = title?.trim() || "Wast'O Agent";
+  const { colors } = resolved;
+  const onPrimary = colors.onPrimary;
+
+  return (
+    <>
+      {!open ? (
+        <View style={styles.fabHost} pointerEvents="box-none">
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel="Ouvrir Wast'O Agent"
+            onPress={handleOpen}
+            style={[styles.fab, { backgroundColor: colors.primary }]}
+          >
+            <MessageCircle size={24} color={onPrimary} />
+          </Pressable>
+        </View>
+      ) : null}
+
+      <Modal
+        visible={open}
+        animationType="slide"
+        presentationStyle="fullScreen"
+        onRequestClose={() => setOpen(false)}
+      >
+        <View
+          style={[
+            styles.panel,
+            {
+              backgroundColor: colors.surface,
+            },
+          ]}
+        >
+            <View
+              style={[styles.header, { backgroundColor: colors.primary }]}
+            >
+              <Text style={[styles.headerTitle, { color: onPrimary }]}>
+                {headerTitle}
+              </Text>
+              <Pressable
+                onPress={() => setOpen(false)}
+                accessibilityLabel="Fermer"
+                hitSlop={8}
+              >
+                <X size={22} color={onPrimary} />
+              </Pressable>
+            </View>
+
+            <Text style={styles.disclaimer}>{DISCLAIMER}</Text>
+
+            {initError || unavailableReason ? (
+              <View style={styles.errorBox}>
+                <Text style={styles.errorText}>
+                  {initError || unavailableReason}
+                </Text>
+              </View>
+            ) : null}
+
+            <FlatList
+              ref={listRef}
+              data={messages}
+              keyExtractor={(item) => item.id}
+              style={styles.list}
+              contentContainerStyle={styles.listContent}
+              onContentSizeChange={() =>
+                listRef.current?.scrollToEnd({ animated: true })
+              }
+              ListEmptyComponent={
+                loading ? (
+                  <ActivityIndicator
+                    color={colors.primary}
+                    style={{ marginTop: 24 }}
+                  />
+                ) : null
+              }
+              renderItem={({ item }) => {
+                const hasWasteCards =
+                  item.role === "ASSISTANT" &&
+                  Array.isArray(item.wasteTypes) &&
+                  item.wasteTypes.length > 0;
+                const hasLinks =
+                  item.role === "ASSISTANT" &&
+                  Array.isArray(item.links) &&
+                  item.links.length > 0;
+                return (
+                  <View
+                    style={[
+                      item.role === "USER"
+                        ? styles.bubbleUserWrap
+                        : styles.bubbleAssistantWrap,
+                    ]}
+                  >
+                    {!hasWasteCards ? (
+                      <View
+                        style={[
+                          styles.bubble,
+                          item.role === "USER"
+                            ? [
+                                styles.bubbleUser,
+                                { backgroundColor: colors.primary },
+                              ]
+                            : [
+                                styles.bubbleAssistant,
+                                { backgroundColor: colors.primarySoft },
+                              ],
+                        ]}
+                      >
+                        <Text
+                          style={{
+                            color:
+                              item.role === "USER"
+                                ? onPrimary
+                                : colors.onSurface,
+                          }}
+                        >
+                          {item.content}
+                        </Text>
+                      </View>
+                    ) : null}
+                    {hasWasteCards &&
+                      item.wasteTypes?.map((fiche) => {
+                        const accent = fiche.color || colors.primary;
+                        const img = resolveApiAssetUrl(apiUrl, fiche.imageUrl);
+                        const body = wasteTypeCardBody(fiche);
+                        return (
+                          <Pressable
+                            key={fiche.id}
+                            onPress={() => setSelectedWasteTypeId(fiche.id)}
+                            style={[styles.ficheCard, { borderColor: accent }]}
+                          >
+                            <View
+                              style={[
+                                styles.ficheHeader,
+                                { backgroundColor: accent },
+                              ]}
+                            >
+                              {img ? (
+                                <Image
+                                  source={img}
+                                  style={styles.ficheImage}
+                                  contentFit="contain"
+                                />
+                              ) : null}
+                              <Text
+                                style={[
+                                  styles.ficheTitle,
+                                  { color: getContrastColor(accent) },
+                                ]}
+                                numberOfLines={2}
+                              >
+                                {fiche.name}
+                              </Text>
+                            </View>
+                            {fiche.matchedMaterial ? (
+                              <Text style={styles.ficheMeta}>
+                                Matériau : {fiche.matchedMaterial}
+                              </Text>
+                            ) : null}
+                            {body ? (
+                              <Text style={styles.ficheBody}>{body}</Text>
+                            ) : null}
+                            <Text style={[styles.ficheCta, { color: accent }]}>
+                              Voir la fiche complète
+                            </Text>
+                          </Pressable>
+                        );
+                      })}
+                    {hasLinks
+                      ? item.links?.map((link) => (
+                          <Pressable
+                            key={link.id}
+                            accessibilityRole="link"
+                            accessibilityLabel={link.label}
+                            onPress={() => {
+                              void Linking.openURL(link.url);
+                            }}
+                            style={[
+                              styles.downloadChip,
+                              { backgroundColor: colors.primary },
+                            ]}
+                          >
+                            <Download size={18} color={onPrimary} />
+                            <Text
+                              style={[
+                                styles.downloadChipLabel,
+                                { color: onPrimary },
+                              ]}
+                              numberOfLines={1}
+                            >
+                              {shortDownloadLabel(link.label)}
+                            </Text>
+                          </Pressable>
+                        ))
+                      : null}
+                  </View>
+                );
+              }}
+            />
+
+            {needsAddress ? (
+              <View style={styles.addressBlock}>
+                <View
+                  style={[
+                    styles.addressSearch,
+                    { borderColor: colors.border },
+                  ]}
+                >
+                  <MapPin size={16} color={colors.muted} />
+                  <TextInput
+                    value={addressQuery}
+                    onChangeText={setAddressQuery}
+                    placeholder="Votre rue…"
+                    placeholderTextColor={colors.muted}
+                    style={[styles.addressInput, { color: colors.onSurface }]}
+                    autoCorrect={false}
+                    autoCapitalize="words"
+                  />
+                </View>
+                {!cityGroupId ? (
+                  <Text style={[styles.errorText, { marginTop: 8 }]}>
+                    cityGroupId requis pour la recherche d&apos;adresse.
+                  </Text>
+                ) : null}
+                {addressSearching ? (
+                  <ActivityIndicator
+                    color={colors.primary}
+                    style={{ marginTop: 8 }}
+                  />
+                ) : null}
+                {pendingSectors.length > 1 ? (
+                  <View style={{ gap: 6, marginTop: 8 }}>
+                    <Text style={{ fontSize: 12, color: colors.muted }}>
+                      Choisissez votre secteur :
+                    </Text>
+                    {pendingSectors.map((sector) => (
+                      <Pressable
+                        key={sector.id}
+                        onPress={() => onSelectSector(sector)}
+                        style={[
+                          styles.sectorBtn,
+                          { borderColor: colors.primary },
+                        ]}
+                      >
+                        <Text style={{ color: colors.primary, fontWeight: "600" }}>
+                          {sector.name}
+                          {sector.cityName ? ` · ${sector.cityName}` : ""}
+                        </Text>
+                      </Pressable>
+                    ))}
+                  </View>
+                ) : (
+                  <FlatList
+                    data={addressResults}
+                    keyExtractor={(item) => item.streetId}
+                    keyboardShouldPersistTaps="handled"
+                    style={{ maxHeight: 160, marginTop: 8 }}
+                    renderItem={({ item }) => (
+                      <Pressable
+                        onPress={() => onSelectStreet(item)}
+                        style={styles.addressRow}
+                      >
+                        <Text
+                          style={{
+                            color: colors.onSurface,
+                            fontWeight: "600",
+                          }}
+                        >
+                          {item.streetName}
+                        </Text>
+                        <Text style={{ color: colors.muted, fontSize: 12 }}>
+                          {item.cityName}
+                        </Text>
+                      </Pressable>
+                    )}
+                  />
+                )}
+              </View>
+            ) : (
+              <View style={styles.inputRow}>
+                <TextInput
+                  value={input}
+                  onChangeText={setInput}
+                  placeholder="Votre question…"
+                  placeholderTextColor={colors.muted}
+                  editable={!loading && available !== false}
+                  style={[
+                    styles.input,
+                    {
+                      borderColor: colors.border,
+                      color: colors.onSurface,
+                    },
+                  ]}
+                  onSubmitEditing={handleSend}
+                  returnKeyType="send"
+                />
+                <Pressable
+                  onPress={handleSend}
+                  disabled={loading || !input.trim() || available === false}
+                  style={[
+                    styles.sendBtn,
+                    {
+                      backgroundColor: colors.primary,
+                      opacity: loading || !input.trim() ? 0.5 : 1,
+                    },
+                  ]}
+                  accessibilityLabel="Envoyer"
+                >
+                  {loading ? (
+                    <ActivityIndicator color={onPrimary} />
+                  ) : (
+                    <Send size={18} color={onPrimary} />
+                  )}
+                </Pressable>
+              </View>
+            )}
+          </View>
+      </Modal>
+
+      <ConsignesModal
+        visible={!!selectedWasteTypeId}
+        wasteTypeId={selectedWasteTypeId ?? ""}
+        onClose={() => setSelectedWasteTypeId(null)}
+      />
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  /** Couche plein écran hors scroll — le FAB flotte au-dessus de la page. */
+  fabHost: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 1000,
+    elevation: 1000,
+  },
+  fab: {
+    position: "absolute",
+    right: SPACE.pageX,
+    bottom: SPACE.sectionY,
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    alignItems: "center",
+    justifyContent: "center",
+    elevation: 6,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.2,
+    shadowRadius: 4,
+  },
+  panel: {
+    flex: 1,
+    overflow: "hidden",
+  },
+  list: {
+    flex: 1,
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: SPACE.pageX,
+    paddingVertical: 14,
+  },
+  headerTitle: {
+    fontSize: 17,
+    fontWeight: "600",
+  },
+  disclaimer: {
+    fontSize: 11,
+    color: "#666",
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+    backgroundColor: "#f6f6f6",
+  },
+  errorBox: {
+    margin: SPACE.stack,
+    padding: 10,
+    borderRadius: 8,
+    backgroundColor: "#fff4f4",
+  },
+  errorText: {
+    color: "#a33",
+    fontSize: 13,
+  },
+  listContent: {
+    padding: 14,
+    gap: 8,
+    paddingBottom: 8,
+  },
+  bubbleUserWrap: {
+    alignItems: "flex-end",
+    marginBottom: 8,
+  },
+  bubbleAssistantWrap: {
+    alignItems: "flex-start",
+    marginBottom: 8,
+    gap: 8,
+    maxWidth: "92%",
+  },
+  bubble: {
+    maxWidth: "100%",
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderRadius: 12,
+  },
+  bubbleUser: {
+    alignSelf: "flex-end",
+  },
+  bubbleAssistant: {
+    alignSelf: "flex-start",
+  },
+  ficheCard: {
+    alignSelf: "stretch",
+    borderWidth: 2,
+    borderRadius: 12,
+    overflow: "hidden",
+    backgroundColor: "#fff",
+  },
+  ficheHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+  },
+  ficheImage: {
+    width: 36,
+    height: 36,
+  },
+  ficheTitle: {
+    flex: 1,
+    fontSize: 15,
+    fontWeight: "700",
+  },
+  ficheMeta: {
+    paddingHorizontal: 12,
+    paddingTop: 8,
+    fontSize: 12,
+    color: "#555",
+  },
+  ficheBody: {
+    paddingHorizontal: 12,
+    paddingTop: 8,
+    fontSize: 13,
+    lineHeight: 18,
+    color: "#222",
+  },
+  ficheCta: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    fontSize: 12,
+    fontWeight: "600",
+  },
+  downloadChip: {
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "flex-start",
+    gap: 8,
+    height: 40,
+    maxWidth: "100%",
+    paddingHorizontal: 12,
+    borderRadius: 20,
+  },
+  downloadChipLabel: {
+    fontSize: 13,
+    fontWeight: "600",
+    flexShrink: 1,
+  },
+  addressBlock: {
+    padding: SPACE.pageXTight,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: "#e0e0e0",
+  },
+  addressSearch: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    borderWidth: 1,
+    borderRadius: 20,
+    paddingHorizontal: 12,
+    height: 42,
+  },
+  addressInput: {
+    flex: 1,
+    fontSize: 15,
+    paddingVertical: 0,
+  },
+  addressRow: {
+    paddingVertical: 10,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: "#eee",
+  },
+  sectorBtn: {
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+  },
+  inputRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    padding: SPACE.pageXTight,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: "#e0e0e0",
+  },
+  input: {
+    flex: 1,
+    borderWidth: 1,
+    borderRadius: 20,
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    fontSize: 15,
+  },
+  sendBtn: {
+    width: 42,
+    height: 42,
+    borderRadius: 21,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});