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
2025-10-15 02:06:25 +00:00
parent a125b37579
commit fb1d150554
9 changed files with 353 additions and 6 deletions
--- a/client/src/components/ChatbotModal.tsx
+++ b/client/src/components/ChatbotModal.tsx
@ -0,0 +1,134 @@
+import { useState } from "react";
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { MessageCircle, Send } from "lucide-react";
+import { apiRequest, queryClient } from "@/lib/queryClient";
+import type { ChatMessage, MediaOutlet } from "@shared/schema";
+
+interface ChatbotModalProps {
+  outlet: MediaOutlet;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function ChatbotModal({ outlet, isOpen, onClose }: ChatbotModalProps) {
+  const [message, setMessage] = useState("");
+
+  const { data: messages = [], isLoading } = useQuery<ChatMessage[]>({
+    queryKey: [`/api/media-outlets/${outlet.slug}/chat`],
+    enabled: isOpen
+  });
+
+  const sendMessageMutation = useMutation({
+    mutationFn: async (content: string) => {
+      return await apiRequest("POST", `/api/media-outlets/${outlet.slug}/chat`, { content });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [`/api/media-outlets/${outlet.slug}/chat`] });
+      setMessage("");
+    }
+  });
+
+  const handleSend = () => {
+    if (message.trim()) {
+      sendMessageMutation.mutate(message.trim());
+    }
+  };
+
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  const getChatbotName = () => {
+    if (outlet.category === 'people') {
+      return outlet.name;
+    } else if (outlet.category === 'topics') {
+      return `${outlet.name} 전문가`;
+    } else {
+      return `${outlet.name} 대표`;
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-[600px] h-[600px] flex flex-col" data-testid="chatbot-modal">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2" data-testid="chatbot-title">
+            <MessageCircle className="h-5 w-5" />
+            {getChatbotName()}와 대화하기
+          </DialogTitle>
+        </DialogHeader>
+        
+        <ScrollArea className="flex-1 pr-4" data-testid="chat-messages-container">
+          <div className="space-y-4">
+            {isLoading ? (
+              <div className="text-center text-muted-foreground py-8">
+                대화 내용을 불러오는 중...
+              </div>
+            ) : messages.length === 0 ? (
+              <div className="text-center text-muted-foreground py-8">
+                <MessageCircle className="h-12 w-12 mx-auto mb-4 opacity-50" />
+                <p>대화를 시작해보세요!</p>
+                <p className="text-sm mt-2">
+                  {getChatbotName()}에게 궁금한 것을 물어보세요.
+                </p>
+              </div>
+            ) : (
+              messages.map((msg) => (
+                <div
+                  key={msg.id}
+                  className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}
+                  data-testid={`chat-message-${msg.id}`}
+                >
+                  <div
+                    className={`max-w-[80%] rounded-lg px-4 py-2 ${
+                      msg.role === 'user'
+                        ? 'bg-primary text-primary-foreground'
+                        : 'bg-muted'
+                    }`}
+                  >
+                    <p className="text-sm whitespace-pre-wrap break-words">{msg.content}</p>
+                  </div>
+                </div>
+              ))
+            )}
+            {sendMessageMutation.isPending && (
+              <div className="flex justify-start">
+                <div className="max-w-[80%] rounded-lg px-4 py-2 bg-muted">
+                  <p className="text-sm text-muted-foreground">입력 중...</p>
+                </div>
+              </div>
+            )}
+          </div>
+        </ScrollArea>
+
+        <div className="flex gap-2 pt-4 border-t">
+          <Textarea
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+            onKeyPress={handleKeyPress}
+            placeholder="메시지를 입력하세요..."
+            className="min-h-[60px] resize-none"
+            disabled={sendMessageMutation.isPending}
+            data-testid="chat-input"
+          />
+          <Button
+            onClick={handleSend}
+            disabled={!message.trim() || sendMessageMutation.isPending}
+            size="icon"
+            className="h-[60px] w-[60px]"
+            data-testid="button-send-message"
+          >
+            <Send className="h-4 w-4" />
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}