feat: add expert search, legal search and UI improvements

ui/app/chatroom/[expertId]/page.tsx

@@ -0,0 +1,295 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { supabase } from '@/lib/supabase';
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { useParams, useRouter } from 'next/navigation';
+import { toast } from 'sonner';
+import { formatTimeDifference } from '@/lib/utils';
+import Link from 'next/link';
+import { Expert, Message } from '@/types';
+
+interface Conversation {
+  expert: Expert;
+  lastMessage?: Message;
+  unreadCount: number;
+}
+
+export default function ChatRoom() {
+  const router = useRouter();
+  const { expertId } = useParams();
+  const [conversations, setConversations] = useState<Conversation[]>([]);
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [newMessage, setNewMessage] = useState('');
+  const [currentExpert, setCurrentExpert] = useState<Expert | null>(null);
+
+  // Charger les conversations
+  useEffect(() => {
+    const loadConversations = async () => {
+      const { data: messages, error } = await supabase
+        .from('messages')
+        .select('*, expert:experts(*)')
+        .or('sender_id.eq.user_id,receiver_id.eq.user_id')
+        .order('created_at', { ascending: false });
+
+      if (error) {
+        toast.error("Erreur lors du chargement des conversations");
+        return;
+      }
+
+      // Grouper les messages par expert
+      const conversationsMap = new Map<string, Conversation>();
+      messages?.forEach(message => {
+        const expertId = message.sender_id === 'user_id' ? message.receiver_id : message.sender_id;
+        if (!conversationsMap.has(expertId)) {
+          conversationsMap.set(expertId, {
+            expert: message.expert,
+            lastMessage: message,
+            unreadCount: message.sender_id !== 'user_id' && !message.read ? 1 : 0
+          });
+        }
+      });
+
+      setConversations(Array.from(conversationsMap.values()));
+    };
+
+    loadConversations();
+  }, []);
+
+  // Charger les messages de la conversation courante
+  useEffect(() => {
+    if (!expertId) return;
+
+    const loadMessages = async () => {
+      const { data: expert, error: expertError } = await supabase
+        .from('experts')
+        .select('*')
+        .eq('id_expert', expertId)
+        .single();
+
+      if (expertError) {
+        toast.error("Erreur lors du chargement de l'expert");
+        return;
+      }
+
+      setCurrentExpert(expert);
+
+      const { data: messages, error: messagesError } = await supabase
+        .from('messages')
+        .select('*')
+        .or(`sender_id.eq.${expertId},receiver_id.eq.${expertId}`)
+        .order('created_at', { ascending: true });
+
+      if (messagesError) {
+        toast.error("Erreur lors du chargement des messages");
+        return;
+      }
+
+      setMessages(messages || []);
+    };
+
+    loadMessages();
+
+    // Souscrire aux nouveaux messages
+    const channel = supabase.channel('public:messages')
+      .on(
+        'postgres_changes',
+        {
+          event: 'INSERT',
+          schema: 'public',
+          table: 'messages',
+        },
+        (payload) => {
+          setMessages(current => [...current, payload.new as Message]);
+        }
+      )
+      .subscribe();
+
+    return () => {
+      channel.unsubscribe();
+    };
+  }, [expertId]);
+
+  const sendMessage = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newMessage.trim() || !expertId) return;
+
+    const { error } = await supabase
+      .from('messages')
+      .insert({
+        content: newMessage,
+        sender_id: 'user_id',
+        receiver_id: expertId,
+      });
+
+    if (error) {
+      toast.error("Erreur lors de l'envoi du message");
+      return;
+    }
+
+    setNewMessage('');
+  };
+
+  const markAsRead = async (messageId: string) => {
+    const { error } = await supabase
+      .from('messages')
+      .update({ read: true })
+      .eq('id', messageId);
+
+    if (error) {
+      toast.error("Erreur lors de la mise à jour du message");
+    }
+  };
+
+  // Utilisez markAsRead quand un message est affiché
+  useEffect(() => {
+    if (!messages.length) return;
+
+    // Marquer les messages non lus comme lus
+    messages
+      .filter(msg => !msg.read && msg.sender_id !== 'user_id')
+      .forEach(msg => markAsRead(msg.id));
+  }, [messages]);
+
+  return (
+    <div className="flex h-[calc(100vh-4rem)]">
+      {/* Liste des conversations - cachée sur mobile si conversation active */}
+      <div className={`
+        ${expertId ? 'hidden md:block' : 'block'} 
+        w-full md:w-80 border-r bg-gray-50 dark:bg-gray-900
+      `}>
+        <div className="p-4 border-b">
+          <h2 className="text-lg font-semibold">Messages</h2>
+        </div>
+        <div className="overflow-y-auto h-[calc(100vh-8rem)]">
+          {conversations.length > 0 ? (
+            conversations.map((conversation) => (
+              <Link
+                key={conversation.expert.id_expert}
+                href={`/chatroom/${conversation.expert.id_expert}`}
+                className={`flex items-center p-4 hover:bg-gray-100 dark:hover:bg-gray-800 ${
+                  expertId === conversation.expert.id_expert ? 'bg-gray-100 dark:bg-gray-800' : ''
+                }`}
+              >
+                <div className="w-12 h-12 rounded-full bg-gray-300 mr-4">
+                  {(conversation.expert.avatar_url || conversation.expert.image_url) && (
+                    <img
+                      src={conversation.expert.avatar_url || conversation.expert.image_url}
+                      alt={`${conversation.expert.prenom} ${conversation.expert.nom}`}
+                      className="w-full h-full rounded-full object-cover"
+                    />
+                  )}
+                </div>
+                <div className="flex-1">
+                  <h3 className="font-medium">
+                    {conversation.expert.prenom} {conversation.expert.nom}
+                  </h3>
+                  {conversation.lastMessage && (
+                    <p className="text-sm text-gray-500 truncate">
+                      {conversation.lastMessage.content}
+                    </p>
+                  )}
+                </div>
+                {conversation.unreadCount > 0 && (
+                  <div className="ml-2 bg-blue-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
+                    {conversation.unreadCount}
+                  </div>
+                )}
+              </Link>
+            ))
+          ) : (
+            <div className="p-4 text-center text-gray-500">
+              Aucune conversation
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Zone de chat - plein écran sur mobile si conversation active */}
+      <div className={`
+        flex-1 flex flex-col
+        ${!expertId ? 'hidden md:flex' : 'flex'}
+      `}>
+        {expertId && currentExpert ? (
+          <>
+            {/* En-tête avec bouton retour sur mobile */}
+            <div className="p-4 border-b flex items-center">
+              <button 
+                onClick={() => router.push('/chatroom')}
+                className="md:hidden mr-2 p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+                </svg>
+              </button>
+              <div className="w-10 h-10 rounded-full bg-gray-300 mr-4">
+                {currentExpert.avatar_url && (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    src={currentExpert.avatar_url}
+                    alt=""
+                    className="w-full h-full rounded-full object-cover"
+                  />
+                )}
+              </div>
+              <h2 className="text-xl font-semibold">
+                {currentExpert.prenom} {currentExpert.nom}
+              </h2>
+            </div>
+
+            {/* Messages avec padding ajusté */}
+            <div className="flex-1 overflow-y-auto p-4 space-y-4 pb-20 md:pb-4">
+              {messages.map((message) => (
+                <div
+                  key={message.id}
+                  className={`flex ${
+                    message.sender_id === 'user_id' ? 'justify-end' : 'justify-start'
+                  }`}
+                >
+                  <div
+                    className={`max-w-[70%] rounded-lg p-3 ${
+                      message.sender_id === 'user_id'
+                        ? 'bg-blue-500 text-white'
+                        : 'bg-gray-200 dark:bg-gray-700'
+                    }`}
+                  >
+                    <div>{message.content}</div>
+                    <div className="text-xs opacity-70 mt-1">
+                      {formatTimeDifference(new Date(message.created_at), new Date())}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {/* Formulaire d'envoi fixé en bas sur mobile */}
+            <form onSubmit={sendMessage} className="p-4 border-t flex gap-2 bg-white dark:bg-gray-900 fixed md:relative bottom-0 left-0 right-0">
+              <Input
+                value={newMessage}
+                onChange={(e) => setNewMessage(e.target.value)}
+                placeholder="Écrivez votre message..."
+                className="flex-1"
+              />
+              <Button type="submit">Envoyer</Button>
+            </form>
+          </>
+        ) : (
+          <div className="flex-1 flex items-center justify-center p-4">
+            <div className="text-center">
+              <h2 className="text-2xl font-semibold mb-4">
+                Bienvenue dans votre messagerie
+              </h2>
+              <p className="text-gray-500 mb-8">
+                Sélectionnez une conversation ou commencez à discuter avec un expert
+              </p>
+              <Button onClick={() => router.push('/discover')}>
+                Trouver un expert
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+} 

ui/app/chatroom/page.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { Button } from "@/components/ui/button";
+
+export default function ChatRoomHome() {
+  const router = useRouter();
+
+  return (
+    <div className="flex h-[calc(100vh-4rem)]">
+      {/* Liste des conversations (même composant que dans [expertId]/page.tsx) */}
+      <div className="w-full md:w-80 border-r bg-gray-50 dark:bg-gray-900">
+        <div className="p-4 border-b">
+          <h2 className="text-lg font-semibold">Messages</h2>
+        </div>
+        <div className="overflow-y-auto h-[calc(100vh-8rem)]">
+          {/* La liste des conversations sera chargée ici */}
+        </div>
+      </div>
+
+      {/* Zone de bienvenue (visible uniquement sur desktop) */}
+      <div className="hidden md:flex flex-1 items-center justify-center">
+        <div className="text-center">
+          <h2 className="text-2xl font-semibold mb-4">
+            Bienvenue dans votre messagerie
+          </h2>
+          <p className="text-gray-500 mb-8">
+            Sélectionnez une conversation ou commencez à discuter avec un expert
+          </p>
+          <Button onClick={() => router.push('/discover')}>
+            Trouver un expert
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

ui/app/discover/page.tsx

@@ -1,50 +1,231 @@
 'use client';
 
-import { Search } from 'lucide-react';
-import { useEffect, useState } from 'react';
+import { Search, Filter, X } from 'lucide-react';
+import { useEffect, useState, useCallback } from 'react';
 import Link from 'next/link';
 import { toast } from 'sonner';
+import { supabase } from '@/lib/supabase';
+import { Button } from "@/components/ui/button";
+import { useRouter } from 'next/navigation';
+import Image from 'next/image';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { FilterModal } from "@/components/FilterModal";
 
-interface Discover {
-  title: string;
-  content: string;
-  url: string;
-  thumbnail: string;
+interface Expert {
+  id: number;
+  id_expert: string;
+  nom: string;
+  prenom: string;
+  adresse: string;
+  pays: string;
+  ville: string;
+  expertises: string;
+  biographie: string;
+  tarif: number;
+  services: any;
+  created_at: string;
+  image_url: string;
 }
 
+interface Location {
+  pays: string;
+  villes: string[];
+}
+
+interface Expertise {
+  id: string;
+  name: string;
+}
+
+const ExpertCard = ({ expert }: { expert: Expert }) => {
+  const router = useRouter();
+
+  const handleContact = async (e: React.MouseEvent) => {
+    e.preventDefault(); // Empêche la navigation vers la page expert
+    
+    try {
+      // Vérifier si une conversation existe déjà
+      const { data: existingMessages } = await supabase
+        .from('messages')
+        .select('*')
+        .or(`sender_id.eq.user_id,receiver_id.eq.${expert.id_expert}`)
+        .limit(1);
+
+      if (!existingMessages || existingMessages.length === 0) {
+        // Si pas de conversation existante, créer le premier message
+        const { error: messageError } = await supabase
+          .from('messages')
+          .insert({
+            content: `Bonjour ${expert.prenom}, je souhaiterais échanger avec vous.`,
+            sender_id: 'user_id', // À remplacer par l'ID de l'utilisateur connecté
+            receiver_id: expert.id_expert,
+            read: false
+          });
+
+        if (messageError) {
+          throw messageError;
+        }
+      }
+
+      // Rediriger vers la conversation
+      router.push(`/chatroom/${expert.id_expert}`);
+      toast.success(`Conversation ouverte avec ${expert.prenom} ${expert.nom}`);
+    } catch (error) {
+      console.error('Error starting conversation:', error);
+      toast.error("Erreur lors de l'ouverture de la conversation");
+    }
+  };
+
+  return (
+    <Link
+      href={`/expert/${expert.id_expert}`}
+      key={expert.id}
+      className="max-w-sm w-full rounded-lg overflow-hidden bg-light-secondary dark:bg-dark-secondary hover:-translate-y-[1px] transition duration-200"
+    >
+      <div className="relative w-full h-48">
+        {expert.image_url ? (
+          <Image
+            src={expert.image_url}
+            alt={`${expert.prenom} ${expert.nom}`}
+            fill
+            className="object-cover"
+            onError={(e) => {
+              // Fallback en cas d'erreur de chargement de l'image
+              const target = e.target as HTMLImageElement;
+              target.onerror = null;
+              target.src = '/placeholder-image.jpg';
+            }}
+          />
+        ) : (
+          <div className="w-full h-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
+            <span className="text-gray-400">Pas d&apos;image</span>
+          </div>
+        )}
+      </div>
+
+      <div className="px-6 py-4">
+        <div className="font-bold text-lg mb-2">
+          {expert.prenom} {expert.nom}
+        </div>
+        <div className="flex flex-col space-y-2">
+          <p className="text-black/70 dark:text-white/70 text-sm">
+            {expert.ville}, {expert.pays}
+          </p>
+          <p className="text-black/70 dark:text-white/70 text-sm">
+            {expert.expertises}
+          </p>
+          {expert.tarif && (
+            <p className="text-black/90 dark:text-white/90 font-medium">
+              {expert.tarif}€ /heure
+            </p>
+          )}
+          <Button 
+            onClick={handleContact}
+            className="mt-4"
+            variant="outline"
+          >
+            Contacter
+          </Button>
+        </div>
+      </div>
+    </Link>
+  );
+};
+
 const Page = () => {
-  const [discover, setDiscover] = useState<Discover[] | null>(null);
+  const [experts, setExperts] = useState<Expert[] | null>(null);
   const [loading, setLoading] = useState(true);
+  const [selectedPays, setSelectedPays] = useState('');
+  const [selectedVille, setSelectedVille] = useState('');
+  const [locations, setLocations] = useState<Location[]>([]);
+  const [selectedExpertises, setSelectedExpertises] = useState<string[]>([]);
+  const [open, setOpen] = useState(false);
+
+  // Calcul du nombre de filtres actifs
+  const activeFiltersCount = [
+    ...(selectedExpertises.length > 0 ? [1] : []),
+    selectedPays,
+    selectedVille
+  ].filter(Boolean).length;
+
+  // Récupérer les experts avec filtres
+  const fetchExperts = useCallback(async () => {
+    try {
+      let query = supabase
+        .from('experts')
+        .select('*');
+
+      if (selectedExpertises.length > 0) {
+        // Adaptez cette partie selon la structure de votre base de données
+        query = query.contains('expertises', selectedExpertises);
+      }
+
+      // Filtre par pays
+      if (selectedPays) {
+        query = query.eq('pays', selectedPays);
+      }
+
+      // Filtre par ville
+      if (selectedVille) {
+        query = query.eq('ville', selectedVille);
+      }
+
+      const { data, error } = await query;
+          
+      if (error) throw error;
+      setExperts(data);
+    } catch (err: any) {
+      console.error('Error fetching experts:', err.message);
+      toast.error('Erreur lors du chargement des experts');
+    } finally {
+      setLoading(false);
+    }
+  }, [selectedPays, selectedVille, selectedExpertises]);
+
+  // Récupérer la liste des pays et villes uniques
+  const fetchLocations = async () => {
+    try {
+      const { data, error } = await supabase
+        .from('experts')
+        .select('pays, ville');
+      
+      if (error) throw error;
+
+      // Créer un objet avec pays et villes uniques
+      const locationMap = new Map<string, Set<string>>();
+      
+      data.forEach(expert => {
+        if (expert.pays) {
+          if (!locationMap.has(expert.pays)) {
+            locationMap.set(expert.pays, new Set());
+          }
+          if (expert.ville) {
+            locationMap.get(expert.pays)?.add(expert.ville);
+          }
+        }
+      });
+
+      // Convertir en tableau trié
+      const sortedLocations = Array.from(locationMap).map(([pays, villes]) => ({
+        pays,
+        villes: Array.from(villes).sort()
+      })).sort((a, b) => a.pays.localeCompare(b.pays));
+
+      setLocations(sortedLocations);
+    } catch (err: any) {
+      console.error('Error fetching locations:', err.message);
+    }
+  };
+
+  // Reset ville quand le pays change
+  useEffect(() => {
+    setSelectedVille('');
+  }, [selectedPays]);
 
   useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/discover`, {
-          method: 'GET',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-        });
-
-        const data = await res.json();
-
-        if (!res.ok) {
-          throw new Error(data.message);
-        }
-
-        data.blogs = data.blogs.filter((blog: Discover) => blog.thumbnail);
-
-        setDiscover(data.blogs);
-      } catch (err: any) {
-        console.error('Error fetching data:', err.message);
-        toast.error('Error fetching data');
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchData();
-  }, []);
+    fetchExperts();
+    fetchLocations();
+  }, [fetchExperts]);
 
   return loading ? (
     <div className="flex flex-row items-center justify-center min-h-screen">
@@ -66,47 +247,64 @@ const Page = () => {
       </svg>
     </div>
   ) : (
-    <>
-      <div>
-        <div className="flex flex-col pt-4">
-          <div className="flex items-center">
-            <Search />
-            <h1 className="text-3xl font-medium p-2">Discover</h1>
+    <div className="pb-24 lg:pb-0">
+      <div className="flex flex-col pt-4">
+        <div className="flex items-center justify-between">
+          <div className="flex flex-col">
+            <div className="flex items-center">
+              <Search />
+              <h1 className="text-3xl font-medium p-2">Nos Experts</h1>
+            </div>
+            <div className="text-gray-500 ml-10">
+              Plus de 300 experts à votre écoute
+            </div>
           </div>
-          <hr className="border-t border-[#2B2C2C] my-4 w-full" />
-        </div>
-
-        <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-4 pb-28 lg:pb-8 w-full justify-items-center lg:justify-items-start">
-          {discover &&
-            discover?.map((item, i) => (
-              <Link
-                href={`/?q=Summary: ${item.url}`}
-                key={i}
-                className="max-w-sm rounded-lg overflow-hidden bg-light-secondary dark:bg-dark-secondary hover:-translate-y-[1px] transition duration-200"
-                target="_blank"
-              >
-                <img
-                  className="object-cover w-full aspect-video"
-                  src={
-                    new URL(item.thumbnail).origin +
-                    new URL(item.thumbnail).pathname +
-                    `?id=${new URL(item.thumbnail).searchParams.get('id')}`
-                  }
-                  alt={item.title}
-                />
-                <div className="px-6 py-4">
-                  <div className="font-bold text-lg mb-2">
-                    {item.title.slice(0, 100)}...
-                  </div>
-                  <p className="text-black-70 dark:text-white/70 text-sm">
-                    {item.content.slice(0, 100)}...
-                  </p>
-                </div>
-              </Link>
-            ))}
+          
+          {/* CTA Filtres unifié */}
+          <Button 
+            onClick={() => setOpen(true)}
+            variant="outline"
+            className="flex items-center gap-2"
+          >
+            <Filter size={18} />
+            <span>Filtrer</span>
+            {activeFiltersCount > 0 && (
+              <span className="bg-blue-500 text-white text-xs px-2 py-0.5 rounded-full">
+                {activeFiltersCount}
+              </span>
+            )}
+          </Button>
         </div>
       </div>
-    </>
+
+      {/* Modale de filtres */}
+      <FilterModal
+        open={open}
+        setOpen={setOpen}
+        selectedPays={selectedPays}
+        setSelectedPays={setSelectedPays}
+        selectedVille={selectedVille}
+        setSelectedVille={setSelectedVille}
+        selectedExpertises={selectedExpertises}
+        setSelectedExpertises={setSelectedExpertises}
+        locations={locations}
+        experts={experts}
+      />
+
+      <hr className="border-t border-[#2B2C2C] my-4 w-full" />
+
+      <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-4 pb-28 lg:pb-8 w-full justify-items-center lg:justify-items-start">
+        {experts && experts.length > 0 ? (
+          experts.map((expert) => (
+            <ExpertCard key={expert.id} expert={expert} />
+          ))
+        ) : (
+          <p className="col-span-full text-center text-gray-500">
+            Aucun expert trouvé
+          </p>
+        )}
+      </div>
+    </div>
   );
 };
 

ui/app/layout.tsx

@@ -14,9 +14,9 @@ const montserrat = Montserrat({
 });
 
 export const metadata: Metadata = {
-  title: 'Perplexica - Chat with the internet',
+  title: 'X&me - Chat with the internet',
   description:
-    'Perplexica is an AI powered chatbot that is connected to the internet.',
+    'X&me is an AI powered chatbot that is connected to the internet.',
 };
 
 export default function RootLayout({

ui/app/page.tsx

@@ -3,8 +3,8 @@ import { Metadata } from 'next';
 import { Suspense } from 'react';
 
 export const metadata: Metadata = {
-  title: 'Chat - Perplexica',
-  description: 'Chat with the internet, chat with Perplexica.',
+  title: 'Chat - X-me',
+  description: 'Chat with the internet, chat with X-me.',
 };
 
 const Home = () => {