diff --git a/crmDashboard/src/features/sessions/ChatSessionModal.jsx b/crmDashboard/src/features/sessions/ChatSessionModal.jsx
new file mode 100644
index 0000000..2c6530c
--- /dev/null
+++ b/crmDashboard/src/features/sessions/ChatSessionModal.jsx
@@ -0,0 +1,139 @@
+import { useState, useRef, useEffect } from 'react'
+import {
+ Dialog,
+ DialogTitle,
+ DialogContent,
+ DialogActions,
+ Button,
+ TextField,
+ Box,
+ Typography,
+ CircularProgress,
+ Alert,
+} from '@mui/material'
+import { useChatHistory, useSendMessage } from './api'
+
+export default function ChatSessionModal({ session, onClose }) {
+ const [text, setText] = useState('')
+ const scrollRef = useRef(null)
+ const { data: messages, isLoading, error } = useChatHistory(session?.phone)
+ const sendMutation = useSendMessage()
+
+ useEffect(() => {
+ if (scrollRef.current) {
+ scrollRef.current.scrollTop = scrollRef.current.scrollHeight
+ }
+ }, [messages])
+
+ const handleSend = async () => {
+ if (!text.trim() || !session) return
+ await sendMutation.mutateAsync({ sessionId: session.phone, message: text.trim() })
+ setText('')
+ }
+
+ const handleKeyDown = (e) => {
+ if (e.key === 'Enter' && !e.shiftKey) {
+ e.preventDefault()
+ handleSend()
+ }
+ }
+
+ const parseMessage = (msg) => {
+ if (!msg) return null
+ if (typeof msg === 'string') {
+ try {
+ return JSON.parse(msg)
+ } catch {
+ return { type: 'ai', content: msg }
+ }
+ }
+ return msg
+ }
+
+ return (
+
+ )
+}
diff --git a/crmDashboard/src/features/sessions/SessionCard.jsx b/crmDashboard/src/features/sessions/SessionCard.jsx
index 977f3aa..d1b909f 100644
--- a/crmDashboard/src/features/sessions/SessionCard.jsx
+++ b/crmDashboard/src/features/sessions/SessionCard.jsx
@@ -20,7 +20,7 @@ function formatDate(d) {
}
}
-export default function SessionCard({ session, onBlock }) {
+export default function SessionCard({ session, onBlock, onChat }) {
const [anchor, setAnchor] = useState(null)
const deleteMutation = useDeleteSession()
const unblockMutation = useUnblockSession()
@@ -37,6 +37,11 @@ export default function SessionCard({ session, onBlock }) {
unblockMutation.mutate({ phone: session.phone })
}
+ const handleChat = () => {
+ setAnchor(null)
+ onChat(session)
+ }
+
const statusColor = session.finished ? 'success' : 'warning'
const statusText = session.finished ? 'Finalizada' : 'Activa'
@@ -83,6 +88,9 @@ export default function SessionCard({ session, onBlock }) {