@wasto/cms-components 1.5.10

package/src/components/chat/Chat.tsx

@@ -0,0 +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",
+  },
+});