Add AI-powered chatbot for media outlets

Integrate an AI chatbot feature allowing users to interact with media outlets, fetch chat history, and generate AI responses using OpenAI.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 9a264234-c5d7-4dcc-adf3-a954b149b30d
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/9a264234-c5d7-4dcc-adf3-a954b149b30d/d35d7YU

client/src/pages/MediaOutlet.tsx

@@ -6,7 +6,7 @@ import { Input } from "@/components/ui/input";
 import { Card, CardContent } from "@/components/ui/card";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
-import { Search, Settings, User, LogOut, Grid, List, Info } from "lucide-react";
+import { Search, Settings, User, LogOut, Grid, List, Info, MessageCircle } from "lucide-react";
 import { useAuth } from "@/hooks/useAuth";
 import { useToast } from "@/hooks/use-toast";
 import { queryClient } from "@/lib/queryClient";
@@ -14,6 +14,7 @@ import ArticleCard from "@/components/ArticleCard";
 import Footer from "@/components/Footer";
 import LoginModal from "@/components/LoginModal";
 import SearchModal from "@/components/SearchModal";
+import ChatbotModal from "@/components/ChatbotModal";
 import type { MediaOutlet, Article } from "@shared/schema";
 
 export default function MediaOutlet() {
@@ -22,6 +23,7 @@ export default function MediaOutlet() {
   const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
   const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
   const [isSearchModalOpen, setIsSearchModalOpen] = useState(false);
+  const [isChatbotOpen, setIsChatbotOpen] = useState(false);
   const [enlargedImage, setEnlargedImage] = useState<string | null>(null);
   const { user, isAuthenticated } = useAuth();
   const { toast } = useToast();
@@ -271,6 +273,16 @@ export default function MediaOutlet() {
                     Community
                   </Button>
                   
+                  <Button 
+                    variant="ghost" 
+                    size="sm"
+                    onClick={() => setIsChatbotOpen(true)}
+                    data-testid="button-chatbot"
+                  >
+                    <MessageCircle className="h-4 w-4 mr-1" />
+                    Chat
+                  </Button>
+                  
                   <Button 
                     variant="ghost" 
                     size="sm"
@@ -415,6 +427,15 @@ export default function MediaOutlet() {
         onClose={() => setIsSearchModalOpen(false)}
       />
 
+      {/* Chatbot Modal */}
+      {outlet && (
+        <ChatbotModal
+          outlet={outlet}
+          isOpen={isChatbotOpen}
+          onClose={() => setIsChatbotOpen(false)}
+        />
+      )}
+
       {/* Image Enlargement Dialog */}
       <Dialog open={!!enlargedImage} onOpenChange={() => setEnlargedImage(null)}>
         <DialogContent className="max-w-3xl p-0 bg-transparent border-none">