chat bot
This commit is contained in:
mahyargdz
@@ -1,6 +1,6 @@
|
||||
VITE_TOKEN_NAME = 'dzone_token'
|
||||
VITE_REFRESH_TOKEN_NAME = 'dzone_refresh_token'
|
||||
# VITE_BASE_URL = 'https://api-dzone.danakcorp.com'
|
||||
VITE_BASE_URL = 'https://nhrq9m1d-4000.eun1.devtunnels.ms'
|
||||
VITE_BASE_URL = 'http://localhost:4000'
|
||||
|
||||
VITE_SLUG_ID = 'slug_id'
|
||||
+232
-162
@@ -1,24 +1,24 @@
|
||||
import { FC, useState, useRef, useEffect } from 'react';
|
||||
import { Send, CloseCircle, Wifi } from 'iconsax-react';
|
||||
import io, { Socket } from 'socket.io-client';
|
||||
import { SOCKET_EVENTS } from './constants';
|
||||
import { useSocketHandlers } from './hooks/useSocketHandlers';
|
||||
import { useMessages } from './hooks/useMessages';
|
||||
import { Message } from './types';
|
||||
import { getToken } from '../config/func';
|
||||
import './chatbot.css'; // Import CSS for animations
|
||||
import { FC, useState, useRef, useEffect } from "react";
|
||||
import { Send, CloseCircle, Wifi } from "iconsax-react";
|
||||
import io, { Socket } from "socket.io-client";
|
||||
import { SOCKET_EVENTS } from "./constants";
|
||||
import { useSocketHandlers } from "./hooks/useSocketHandlers";
|
||||
import { useMessages } from "./hooks/useMessages";
|
||||
import { Message } from "./types";
|
||||
import { getToken } from "../config/func";
|
||||
import "./chatbot.css"; // Import CSS for animations
|
||||
|
||||
// Helper function to format text with markdown-like syntax
|
||||
export const formatText = (text: string) => {
|
||||
if (!text) return '';
|
||||
if (!text) return "";
|
||||
|
||||
// Clean the text first to avoid HTML injection
|
||||
const cleanedText = text
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''');
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'");
|
||||
|
||||
// Format with markdown-like syntax and handle newlines properly
|
||||
const formattedText = cleanedText
|
||||
@@ -29,7 +29,10 @@ export const formatText = (text: string) => {
|
||||
// Line breaks - ensure they work properly with proper spacing
|
||||
.replace(/\n/g, "<br class='message-line-break' />")
|
||||
// Links (optional)
|
||||
.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer" class="text-blue-500 underline">$1</a>');
|
||||
.replace(
|
||||
/\[([^\]]+)\]\(([^)]+)\)/g,
|
||||
'<a href="$2" target="_blank" rel="noopener noreferrer" class="text-blue-500 underline">$1</a>'
|
||||
);
|
||||
|
||||
return formattedText;
|
||||
};
|
||||
@@ -40,41 +43,55 @@ interface ChatbotProps {
|
||||
}
|
||||
|
||||
// Connection status types
|
||||
type ConnectionStatus = 'disconnected' | 'connecting' | 'connected' | 'error';
|
||||
type ConnectionStatus = "disconnected" | "connecting" | "connected" | "error";
|
||||
|
||||
const Chatbot: FC<ChatbotProps> = ({ isOpen, onClose }) => {
|
||||
// State
|
||||
const [inputValue, setInputValue] = useState<string>('');
|
||||
const [inputValue, setInputValue] = useState<string>("");
|
||||
const [isProcessing, setIsProcessing] = useState<boolean>(false);
|
||||
const [connectionStatus, setConnectionStatus] = useState<ConnectionStatus>('disconnected');
|
||||
const [connectionStatus, setConnectionStatus] =
|
||||
useState<ConnectionStatus>("disconnected");
|
||||
const [isTyping, setIsTyping] = useState<boolean>(false);
|
||||
const [currentSessionId, setCurrentSessionId] = useState<string | null>(null);
|
||||
const [socket, setSocket] = useState<Socket | null>(null);
|
||||
const [showChatbot, setShowChatbot] = useState<boolean>(false);
|
||||
const [showConnectionMessage, setShowConnectionMessage] = useState<boolean>(false);
|
||||
const [isStreamingMode, setIsStreamingMode] = useState<boolean>(true);
|
||||
const [showConnectionMessage, setShowConnectionMessage] =
|
||||
useState<boolean>(false);
|
||||
const [reconnectAttempts, setReconnectAttempts] = useState<number>(0);
|
||||
const maxReconnectAttempts = 5;
|
||||
|
||||
// Config
|
||||
const apiBaseUrl = import.meta.env.VITE_BASE_URL;
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||||
const connectionTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
const connectionTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(
|
||||
null
|
||||
);
|
||||
|
||||
// Custom hooks
|
||||
const { messages, addMessage, addSystemMessage, updateMessage, clearMessages } = useMessages();
|
||||
const { setupSocketHandlers, streamingText } = useSocketHandlers({
|
||||
const {
|
||||
messages,
|
||||
addMessage,
|
||||
addSystemMessage,
|
||||
updateMessage,
|
||||
clearMessages,
|
||||
} = useMessages();
|
||||
const { setupSocketHandlers } = useSocketHandlers({
|
||||
socket,
|
||||
setStatus: (status: string) => {
|
||||
console.log("📊 Status update:", status);
|
||||
// Map status string to connection status
|
||||
if (status.includes('متصل شد')) {
|
||||
setConnectionStatus('connected');
|
||||
} else if (status.includes('در حال')) {
|
||||
setConnectionStatus('connecting');
|
||||
} else if (status.includes('خطا')) {
|
||||
setConnectionStatus('error');
|
||||
} else if (status.includes('قطع')) {
|
||||
setConnectionStatus('disconnected');
|
||||
if (
|
||||
status.includes("متصل شد") ||
|
||||
status.includes("آماده") ||
|
||||
status.includes("متصل و آماده")
|
||||
) {
|
||||
setConnectionStatus("connected");
|
||||
} else if (status.includes("در حال")) {
|
||||
setConnectionStatus("connecting");
|
||||
} else if (status.includes("خطا")) {
|
||||
setConnectionStatus("error");
|
||||
} else if (status.includes("قطع")) {
|
||||
setConnectionStatus("disconnected");
|
||||
}
|
||||
},
|
||||
setIsTyping,
|
||||
@@ -83,13 +100,33 @@ const Chatbot: FC<ChatbotProps> = ({ isOpen, onClose }) => {
|
||||
updateMessage,
|
||||
addSystemMessage,
|
||||
setCurrentSessionId,
|
||||
isProcessing
|
||||
isProcessing,
|
||||
});
|
||||
|
||||
// Debug streaming text changes
|
||||
// Debug connection status changes
|
||||
useEffect(() => {
|
||||
console.log("Streaming text updated:", streamingText.substring(0, 50) + (streamingText.length > 50 ? "..." : ""));
|
||||
}, [streamingText]);
|
||||
console.log("🔄 Connection status changed:", {
|
||||
connectionStatus,
|
||||
socketConnected: socket?.connected,
|
||||
currentSessionId,
|
||||
isProcessing,
|
||||
});
|
||||
}, [connectionStatus, socket?.connected, currentSessionId, isProcessing]);
|
||||
|
||||
// Monitor socket connection and session state
|
||||
useEffect(() => {
|
||||
if (socket?.connected && currentSessionId) {
|
||||
console.log(
|
||||
"🔗 Socket connected and session ready - setting status to connected"
|
||||
);
|
||||
setConnectionStatus("connected");
|
||||
}
|
||||
}, [socket?.connected, currentSessionId]);
|
||||
|
||||
// Update button state when processing state changes
|
||||
useEffect(() => {
|
||||
updateButtonState();
|
||||
}, [isProcessing, connectionStatus, inputValue]);
|
||||
|
||||
// Initialize component
|
||||
const init = () => {
|
||||
@@ -128,7 +165,10 @@ const Chatbot: FC<ChatbotProps> = ({ isOpen, onClose }) => {
|
||||
|
||||
// Handle reconnection attempts
|
||||
useEffect(() => {
|
||||
if (connectionStatus === 'error' && reconnectAttempts < maxReconnectAttempts) {
|
||||
if (
|
||||
connectionStatus === "error" &&
|
||||
reconnectAttempts < maxReconnectAttempts
|
||||
) {
|
||||
const reconnectTimer = setTimeout(() => {
|
||||
attemptReconnect();
|
||||
}, 2000 * (reconnectAttempts + 1)); // Exponential backoff
|
||||
@@ -157,7 +197,7 @@ const Chatbot: FC<ChatbotProps> = ({ isOpen, onClose }) => {
|
||||
cleanup();
|
||||
}
|
||||
};
|
||||
}, [socket, setupSocketHandlers]);
|
||||
}, [socket]); // Only depend on socket, not setupSocketHandlers
|
||||
|
||||
// Show connection message only briefly when status changes
|
||||
useEffect(() => {
|
||||
@@ -172,26 +212,27 @@ const Chatbot: FC<ChatbotProps> = ({ isOpen, onClose }) => {
|
||||
}, [connectionStatus]);
|
||||
|
||||
const scrollToBottom = () => {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
|
||||
};
|
||||
|
||||
const connectSocket = async () => {
|
||||
try {
|
||||
setConnectionStatus('connecting');
|
||||
setConnectionStatus("connecting");
|
||||
|
||||
// Get token from environment or localStorage
|
||||
const token = await getToken();
|
||||
|
||||
if (!apiBaseUrl) {
|
||||
console.error("API base URL not defined in environment variables");
|
||||
setConnectionStatus('error');
|
||||
setConnectionStatus("error");
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("🔄 Connecting to Socket.IO...");
|
||||
const newSocket = io(`${apiBaseUrl}/chat`, {
|
||||
auth: {
|
||||
token: token
|
||||
}
|
||||
token: token,
|
||||
},
|
||||
});
|
||||
|
||||
setSocket(newSocket);
|
||||
@@ -199,16 +240,21 @@ const Chatbot: FC<ChatbotProps> = ({ isOpen, onClose }) => {
|
||||
|
||||
// Set a timeout for connection
|
||||
connectionTimeoutRef.current = setTimeout(() => {
|
||||
if (connectionStatus === 'connecting') {
|
||||
setConnectionStatus('error');
|
||||
if (connectionStatus === "connecting") {
|
||||
console.log("❌ Connection timeout");
|
||||
setConnectionStatus("error");
|
||||
}
|
||||
}, 10000); // 10 seconds timeout
|
||||
}, 10000);
|
||||
|
||||
// Create session after connection
|
||||
setTimeout(() => createSession(newSocket), 1000);
|
||||
// Create session after connection - like in JS version
|
||||
setTimeout(() => {
|
||||
if (newSocket.connected) {
|
||||
createSession(newSocket);
|
||||
}
|
||||
}, 1000);
|
||||
} catch (error) {
|
||||
console.error("Socket connection error:", error);
|
||||
setConnectionStatus('error');
|
||||
setConnectionStatus("error");
|
||||
attemptReconnect();
|
||||
}
|
||||
};
|
||||
@@ -217,7 +263,9 @@ const Chatbot: FC<ChatbotProps> = ({ isOpen, onClose }) => {
|
||||
if (reconnectAttempts < maxReconnectAttempts) {
|
||||
const newAttempts = reconnectAttempts + 1;
|
||||
setReconnectAttempts(newAttempts);
|
||||
console.log(`🔄 Reconnecting... Attempt ${newAttempts}/${maxReconnectAttempts}`);
|
||||
console.log(
|
||||
`🔄 Reconnecting... Attempt ${newAttempts}/${maxReconnectAttempts}`
|
||||
);
|
||||
|
||||
setTimeout(() => {
|
||||
connectSocket();
|
||||
@@ -232,22 +280,25 @@ const Chatbot: FC<ChatbotProps> = ({ isOpen, onClose }) => {
|
||||
if (socket) {
|
||||
socket.disconnect();
|
||||
setSocket(null);
|
||||
setConnectionStatus('disconnected');
|
||||
setConnectionStatus("disconnected");
|
||||
}
|
||||
};
|
||||
|
||||
const createSession = (socketInstance: Socket | null = socket) => {
|
||||
if (!socketInstance || !socketInstance.connected) {
|
||||
console.log("❌ Socket not connected for session creation");
|
||||
return;
|
||||
}
|
||||
|
||||
if (currentSessionId) {
|
||||
console.log("Session already exists:", currentSessionId);
|
||||
console.log("🚫 Session already exists:", currentSessionId);
|
||||
addSystemMessage("جلسه از قبل وجود دارد", "info");
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("🔄 Creating new session via Socket.IO...");
|
||||
socketInstance.emit(SOCKET_EVENTS.CREATE_SESSION, {
|
||||
title: `جلسه ${new Date().toLocaleDateString("fa-IR")}`
|
||||
title: `جلسه ${new Date().toLocaleDateString("fa-IR")}`,
|
||||
});
|
||||
};
|
||||
|
||||
@@ -258,28 +309,26 @@ const Chatbot: FC<ChatbotProps> = ({ isOpen, onClose }) => {
|
||||
}
|
||||
|
||||
// Get user ID from localStorage or use a default
|
||||
const userId = localStorage.getItem(import.meta.env.VITE_USER_ID_KEY || "user_id") ||
|
||||
const userId =
|
||||
localStorage.getItem(import.meta.env.VITE_USER_ID_KEY || "user_id") ||
|
||||
localStorage.getItem("userId") ||
|
||||
"anonymous_user";
|
||||
|
||||
console.log(`🔄 Joining chat session: ${sessionId}`);
|
||||
socket.emit(SOCKET_EVENTS.JOIN_CHAT, {
|
||||
sessionId: sessionId,
|
||||
userId: userId
|
||||
userId: userId,
|
||||
});
|
||||
};
|
||||
|
||||
const newSession = () => {
|
||||
setCurrentSessionId(null);
|
||||
clearMessages();
|
||||
createSession();
|
||||
};
|
||||
|
||||
const handleSendMessage = () => {
|
||||
const message = inputValue.trim();
|
||||
|
||||
if (!message || isProcessing) {
|
||||
console.log("❌ Cannot send:", { message: !!message, processing: isProcessing });
|
||||
console.log("❌ Cannot send:", {
|
||||
message: !!message,
|
||||
processing: isProcessing,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -305,15 +354,18 @@ const Chatbot: FC<ChatbotProps> = ({ isOpen, onClose }) => {
|
||||
// Add user message to UI
|
||||
addMessage({
|
||||
text: message,
|
||||
isUser: true
|
||||
isUser: true,
|
||||
});
|
||||
|
||||
// Clear input immediately to prevent accidental resend
|
||||
setInputValue('');
|
||||
autoResizeTextarea({ target: { value: '', style: { height: 'auto' } } } as React.ChangeEvent<HTMLTextAreaElement>);
|
||||
setInputValue("");
|
||||
autoResizeTextarea({
|
||||
target: { value: "", style: { height: "auto" } },
|
||||
} as React.ChangeEvent<HTMLTextAreaElement>);
|
||||
|
||||
// Get user ID from localStorage or use a default
|
||||
const userId = localStorage.getItem(import.meta.env.VITE_USER_ID_KEY || "user_id") ||
|
||||
const userId =
|
||||
localStorage.getItem(import.meta.env.VITE_USER_ID_KEY || "user_id") ||
|
||||
localStorage.getItem("userId") ||
|
||||
"anonymous_user";
|
||||
|
||||
@@ -322,9 +374,8 @@ const Chatbot: FC<ChatbotProps> = ({ isOpen, onClose }) => {
|
||||
socket.emit(SOCKET_EVENTS.SEND_MESSAGE, {
|
||||
sessionId: currentSessionId,
|
||||
content: message,
|
||||
userId: userId
|
||||
userId: userId,
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error("Send message error:", error);
|
||||
addSystemMessage(`خطا در ارسال پیام`, "error");
|
||||
@@ -334,21 +385,25 @@ const Chatbot: FC<ChatbotProps> = ({ isOpen, onClose }) => {
|
||||
};
|
||||
|
||||
const handleKeyPress = (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
if (e.key === "Enter" && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
handleSendMessage();
|
||||
}
|
||||
};
|
||||
|
||||
const autoResizeTextarea = (e: React.ChangeEvent<HTMLTextAreaElement> | { target: { value: string, style?: { height: string } } }): void => {
|
||||
const autoResizeTextarea = (
|
||||
e:
|
||||
| React.ChangeEvent<HTMLTextAreaElement>
|
||||
| { target: { value: string; style?: { height: string } } }
|
||||
): void => {
|
||||
const value = e.target.value;
|
||||
setInputValue(value);
|
||||
|
||||
// Handle the case when this is called programmatically without a real DOM element
|
||||
if ('style' in e.target) {
|
||||
if ("style" in e.target) {
|
||||
const textarea = e.target as HTMLTextAreaElement;
|
||||
textarea.style.height = 'auto';
|
||||
textarea.style.height = Math.min(textarea.scrollHeight, 150) + 'px';
|
||||
textarea.style.height = "auto";
|
||||
textarea.style.height = Math.min(textarea.scrollHeight, 150) + "px";
|
||||
}
|
||||
|
||||
updateButtonState();
|
||||
@@ -356,49 +411,44 @@ const Chatbot: FC<ChatbotProps> = ({ isOpen, onClose }) => {
|
||||
|
||||
const updateButtonState = () => {
|
||||
const hasText = inputValue.trim().length > 0;
|
||||
const canSend = hasText && !isProcessing && connectionStatus === 'connected';
|
||||
const canSend =
|
||||
hasText && !isProcessing && connectionStatus === "connected";
|
||||
|
||||
console.log("🔄 Button state:", {
|
||||
console.log("🔄 Button state updated:", {
|
||||
hasText,
|
||||
isProcessing,
|
||||
connectionStatus,
|
||||
currentSessionId,
|
||||
canSend,
|
||||
});
|
||||
|
||||
// Button state is managed via the disabled prop and className
|
||||
};
|
||||
|
||||
const toggleStreaming = () => {
|
||||
setIsStreamingMode(!isStreamingMode);
|
||||
addSystemMessage(`حالت ${isStreamingMode ? "عادی" : "استریم"} فعال شد`, "success");
|
||||
};
|
||||
|
||||
// Get connection status icon and text
|
||||
const getConnectionStatusInfo = () => {
|
||||
switch (connectionStatus) {
|
||||
case 'connected':
|
||||
case "connected":
|
||||
return {
|
||||
icon: <Wifi size={16} className="text-green-400" />,
|
||||
text: "متصل",
|
||||
className: "bg-green-100 text-green-800"
|
||||
className: "bg-green-100 text-green-800",
|
||||
};
|
||||
case 'connecting':
|
||||
case "connecting":
|
||||
return {
|
||||
icon: <Wifi size={16} className="text-yellow-400 animate-pulse" />,
|
||||
text: "در حال اتصال...",
|
||||
className: "bg-yellow-100 text-yellow-800"
|
||||
className: "bg-yellow-100 text-yellow-800",
|
||||
};
|
||||
case 'error':
|
||||
case "error":
|
||||
return {
|
||||
icon: <Wifi size={16} className="text-red-500" />,
|
||||
text: "خطا در اتصال",
|
||||
className: "bg-red-100 text-red-800"
|
||||
className: "bg-red-100 text-red-800",
|
||||
};
|
||||
default:
|
||||
return {
|
||||
icon: <Wifi size={16} variant="Bold" className="text-gray-500" />,
|
||||
text: "قطع اتصال",
|
||||
className: "bg-gray-100 text-gray-800"
|
||||
className: "bg-gray-100 text-gray-800",
|
||||
};
|
||||
}
|
||||
};
|
||||
@@ -409,23 +459,36 @@ const Chatbot: FC<ChatbotProps> = ({ isOpen, onClose }) => {
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`fixed bottom-20 right-4 w-80 sm:w-96 bg-white rounded-xl shadow-xl flex flex-col z-50 border border-gray-200 transition-all duration-300 ease-in-out ${showChatbot ? 'opacity-100 transform translate-y-0' : 'opacity-0 transform translate-y-10'
|
||||
className={`fixed bottom-20 right-4 w-80 sm:w-96 bg-white rounded-xl shadow-xl flex flex-col z-50 border border-gray-200 transition-all duration-300 ease-in-out ${
|
||||
showChatbot
|
||||
? "opacity-100 transform translate-y-0"
|
||||
: "opacity-0 transform translate-y-10"
|
||||
}`}
|
||||
style={{ height: '500px', direction: 'rtl' }}
|
||||
style={{ height: "500px", direction: "rtl" }}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="bg-gradient-to-l from-blue-500 to-blue-600 text-white p-3.5 rounded-t-xl flex justify-between items-center shadow-sm">
|
||||
<div className="flex items-center">
|
||||
<div className={`w-3 h-3 rounded-full ml-2 ${connectionStatus === 'connected' ? 'bg-green-400 animate-pulse' :
|
||||
connectionStatus === 'connecting' ? 'bg-yellow-400 animate-pulse' :
|
||||
'bg-red-400'
|
||||
}`}></div>
|
||||
<div
|
||||
className={`w-3 h-3 rounded-full ml-2 ${
|
||||
connectionStatus === "connected"
|
||||
? "bg-green-400 animate-pulse"
|
||||
: connectionStatus === "connecting"
|
||||
? "bg-yellow-400 animate-pulse"
|
||||
: "bg-red-400"
|
||||
}`}
|
||||
></div>
|
||||
<h3 className="font-bold text-base">چت بات داناک</h3>
|
||||
{/* Always show a compact connection status */}
|
||||
<div className={`flex items-center text-xs mr-2 ml-2 ${connectionStatus === 'connected' ? 'text-green-200' :
|
||||
connectionStatus === 'connecting' ? 'text-yellow-200' :
|
||||
'text-red-200'
|
||||
}`}>
|
||||
<div
|
||||
className={`flex items-center text-xs mr-2 ml-2 ${
|
||||
connectionStatus === "connected"
|
||||
? "text-green-200"
|
||||
: connectionStatus === "connecting"
|
||||
? "text-yellow-200"
|
||||
: "text-red-200"
|
||||
}`}
|
||||
>
|
||||
{connectionInfo.icon}
|
||||
</div>
|
||||
</div>
|
||||
@@ -438,52 +501,28 @@ const Chatbot: FC<ChatbotProps> = ({ isOpen, onClose }) => {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Control buttons */}
|
||||
<div className="flex justify-between px-3 py-2 bg-gray-50 border-b border-gray-200">
|
||||
<button
|
||||
onClick={() => clearMessages()}
|
||||
className="text-xs text-gray-600 hover:text-blue-600 px-2 py-1 hover:bg-gray-100 rounded transition-colors"
|
||||
>
|
||||
پاک کردن
|
||||
</button>
|
||||
<button
|
||||
onClick={newSession}
|
||||
className="text-xs text-gray-600 hover:text-blue-600 px-2 py-1 hover:bg-gray-100 rounded transition-colors"
|
||||
>
|
||||
جلسه جدید
|
||||
</button>
|
||||
<button
|
||||
onClick={toggleStreaming}
|
||||
className={`text-xs ${isStreamingMode ? 'text-blue-600' : 'text-gray-600'} px-2 py-1 hover:bg-gray-100 rounded transition-colors`}
|
||||
>
|
||||
{isStreamingMode ? '📡 استریم' : '📝 عادی'}
|
||||
</button>
|
||||
{connectionStatus !== 'connected' && (
|
||||
<button
|
||||
onClick={connectSocket}
|
||||
className="text-xs text-blue-600 hover:text-blue-800 px-2 py-1 hover:bg-blue-50 rounded transition-colors"
|
||||
>
|
||||
اتصال مجدد
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Messages */}
|
||||
<div className="flex-1 p-3.5 overflow-y-auto bg-gray-50" style={{ height: '350px' }}>
|
||||
{
|
||||
messages?.map((message: Message) => {
|
||||
<div
|
||||
className="flex-1 p-3.5 overflow-y-auto bg-gray-50"
|
||||
style={{ height: "350px" }}
|
||||
>
|
||||
{messages?.map((message: Message) => {
|
||||
// Debug message content
|
||||
console.log(`Rendering message ${message.id}:`, {
|
||||
text: message.text.substring(0, 30) + (message.text.length > 30 ? "..." : ""),
|
||||
text:
|
||||
message.text.substring(0, 30) +
|
||||
(message.text.length > 30 ? "..." : ""),
|
||||
isUser: message.isUser,
|
||||
isSystem: message.isSystem,
|
||||
streaming: message.streaming
|
||||
streaming: message.streaming,
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
key={message.id}
|
||||
className={`mb-3 flex ${message.isUser ? 'justify-start' : 'justify-end'} animate-fade-in`}
|
||||
className={`mb-3 flex ${
|
||||
message.isUser ? "justify-start" : "justify-end"
|
||||
} animate-fade-in`}
|
||||
>
|
||||
{message.isUser && (
|
||||
<div className="w-7 h-7 rounded-full bg-blue-600 flex items-center justify-center ml-2 flex-shrink-0">
|
||||
@@ -491,30 +530,46 @@ const Chatbot: FC<ChatbotProps> = ({ isOpen, onClose }) => {
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className={`relative px-3.5 py-2.5 pb-4 rounded-lg max-w-[85%] ${message.isUser
|
||||
? 'bg-blue-600 text-white rounded-tr-none shadow-sm animate-slide-right'
|
||||
className={`relative px-3.5 py-2.5 pb-4 rounded-lg max-w-[85%] ${
|
||||
message.isUser
|
||||
? "bg-blue-600 text-white rounded-tr-none shadow-sm animate-slide-right"
|
||||
: message.isSystem
|
||||
? message.metadata?.type === 'error'
|
||||
? 'bg-red-100 text-red-800 rounded-tl-none'
|
||||
: message.metadata?.type === 'success'
|
||||
? 'bg-green-100 text-green-800 rounded-tl-none'
|
||||
: 'bg-yellow-100 text-yellow-800 rounded-tl-none'
|
||||
: message.metadata && 'confidence' in message.metadata
|
||||
? message.metadata?.type === "error"
|
||||
? "bg-red-100 text-red-800 rounded-tl-none"
|
||||
: message.metadata?.type === "success"
|
||||
? "bg-green-100 text-green-800 rounded-tl-none"
|
||||
: "bg-yellow-100 text-yellow-800 rounded-tl-none"
|
||||
: message.metadata && "confidence" in message.metadata
|
||||
? message.metadata.confidence === 1
|
||||
? 'bg-green-100 text-green-800 rounded-tl-none'
|
||||
? "bg-green-100 text-green-800 rounded-tl-none"
|
||||
: message.metadata.confidence === 0
|
||||
? 'bg-red-100 text-red-800 rounded-tl-none'
|
||||
: 'bg-yellow-100 text-yellow-800 rounded-tl-none'
|
||||
: 'bg-white text-gray-800 rounded-tl-none shadow-sm animate-slide-left'
|
||||
} ${message.streaming ? 'border-r-4 border-blue-400 streaming-message animate-pulse' : ''}`}
|
||||
? "bg-red-100 text-red-800 rounded-tl-none"
|
||||
: "bg-yellow-100 text-yellow-800 rounded-tl-none"
|
||||
: "bg-white text-gray-800 rounded-tl-none shadow-sm animate-slide-left"
|
||||
} ${
|
||||
message.streaming
|
||||
? "border-r-4 border-blue-400 streaming-message animate-pulse"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
id={`message-${message.id}`}
|
||||
className={`text-sm leading-6 font-light whitespace-pre-line break-words text-right mb-2 ${message.streaming ? 'streaming-content' : ''}`}
|
||||
className={`text-sm leading-6 font-light whitespace-pre-line break-words text-right mb-2 ${
|
||||
message.streaming ? "streaming-content" : ""
|
||||
}`}
|
||||
dangerouslySetInnerHTML={{ __html: formatText(message.text) }}
|
||||
/>
|
||||
<div className={`text-[8px] opacity-70 absolute bottom-1 ${message.isUser ? 'left-2.5 text-left' : 'right-2.5 text-right'}`}>
|
||||
{message.timestamp.toLocaleTimeString('fa-IR', { hour: '2-digit', minute: '2-digit' })}
|
||||
<div
|
||||
className={`text-[8px] opacity-70 absolute bottom-1 ${
|
||||
message.isUser
|
||||
? "left-2.5 text-left"
|
||||
: "right-2.5 text-right"
|
||||
}`}
|
||||
>
|
||||
{message.timestamp.toLocaleTimeString("fa-IR", {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})}
|
||||
</div>
|
||||
{message.metadata?.confidence !== undefined &&
|
||||
message.metadata.confidence !== 0 &&
|
||||
@@ -532,10 +587,9 @@ const Chatbot: FC<ChatbotProps> = ({ isOpen, onClose }) => {
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
}
|
||||
{/* Improved typing indicator */}
|
||||
{isTyping && (
|
||||
})}
|
||||
{/* Typing indicator - only show when no streaming messages exist */}
|
||||
{isTyping && !messages.some((msg) => msg.streaming) && (
|
||||
<div className="flex justify-end mb-3 animate-fade-in">
|
||||
<div className="bg-white text-gray-800 px-3.5 py-2 rounded-lg rounded-tl-none shadow-sm">
|
||||
<div className="typing-indicator">
|
||||
@@ -560,20 +614,36 @@ const Chatbot: FC<ChatbotProps> = ({ isOpen, onClose }) => {
|
||||
onChange={autoResizeTextarea}
|
||||
onKeyPress={handleKeyPress}
|
||||
placeholder="پیام خود را بنویسید..."
|
||||
disabled={isProcessing || connectionStatus !== 'connected'}
|
||||
disabled={isProcessing || connectionStatus !== "connected"}
|
||||
className="flex-1 bg-transparent border-none px-2 py-2.5 text-sm focus:outline-none resize-none min-h-[40px] font-light"
|
||||
style={{ maxHeight: '80px' }}
|
||||
style={{ maxHeight: "80px" }}
|
||||
/>
|
||||
|
||||
<button
|
||||
onClick={handleSendMessage}
|
||||
disabled={inputValue.trim() === '' || isProcessing || connectionStatus !== 'connected'}
|
||||
className={`ml-2 ${inputValue.trim() === '' || isProcessing || connectionStatus !== 'connected'
|
||||
? 'bg-gray-300'
|
||||
: 'bg-blue-600 hover:bg-blue-700'
|
||||
disabled={
|
||||
inputValue.trim() === "" ||
|
||||
isProcessing ||
|
||||
connectionStatus !== "connected"
|
||||
}
|
||||
className={`ml-2 ${
|
||||
inputValue.trim() === "" ||
|
||||
isProcessing ||
|
||||
connectionStatus !== "connected"
|
||||
? "bg-gray-300"
|
||||
: "bg-blue-600 hover:bg-blue-700"
|
||||
} text-white rounded-full w-9 h-9 flex items-center justify-center focus:outline-none transition-colors flex-shrink-0`}
|
||||
>
|
||||
<Send size={18} className={`transform rotate-180 ${inputValue.trim() !== '' && !isProcessing && connectionStatus === 'connected' ? 'animate-pulse' : ''}`} />
|
||||
<Send
|
||||
size={18}
|
||||
className={`transform rotate-180 ${
|
||||
inputValue.trim() !== "" &&
|
||||
!isProcessing &&
|
||||
connectionStatus === "connected"
|
||||
? "animate-pulse"
|
||||
: ""
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -111,3 +111,31 @@
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Typing dots for streaming messages */
|
||||
.typing-dots {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.typing-dots span {
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
margin: 0 1px;
|
||||
background-color: #3b82f6;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
animation: typing-dot 1.2s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.typing-dots span:nth-child(1) {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.typing-dots span:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.typing-dots span:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useCallback, useRef, useState } from "react";
|
||||
import { useCallback, useRef } from "react";
|
||||
import { Socket } from "socket.io-client";
|
||||
import { SOCKET_EVENTS } from "../constants";
|
||||
import { Message } from "../types";
|
||||
@@ -26,34 +26,11 @@ export const useSocketHandlers = ({
|
||||
setCurrentSessionId,
|
||||
isProcessing,
|
||||
}: UseSocketHandlersProps) => {
|
||||
// Keep track of the current streaming message
|
||||
const currentStreamingMessageRef = useRef<{
|
||||
// Keep track of the current bot message like in the JS version
|
||||
const botMessageRef = useRef<{
|
||||
id: string;
|
||||
text: string;
|
||||
} | null>(null);
|
||||
const [streamingText, setStreamingText] = useState<string>("");
|
||||
|
||||
// Simple function to update streaming message content
|
||||
const updateStreamingMessage = (id: string, text: string) => {
|
||||
console.log(
|
||||
`Updating streaming message ${id} with ${text.length} characters`
|
||||
);
|
||||
|
||||
// Update the state for React
|
||||
updateMessage(id, { text });
|
||||
|
||||
// Also try direct DOM update as a fallback
|
||||
setTimeout(() => {
|
||||
try {
|
||||
const element = document.getElementById(`message-${id}`);
|
||||
if (element) {
|
||||
element.innerHTML = formatText(text);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Error updating DOM directly:", e);
|
||||
}
|
||||
}, 0);
|
||||
};
|
||||
|
||||
const setupSocketHandlers = useCallback(() => {
|
||||
if (!socket) return () => {};
|
||||
@@ -112,6 +89,7 @@ export const useSocketHandlers = ({
|
||||
const onChatJoined = (data: any) => {
|
||||
console.log("✅ Joined chat:", data);
|
||||
addSystemMessage("به چت متصل شدید", "success");
|
||||
setStatus("متصل و آماده ✅");
|
||||
};
|
||||
|
||||
const onSessionError = (data: any) => {
|
||||
@@ -125,22 +103,28 @@ export const useSocketHandlers = ({
|
||||
// Message is already shown in UI when sent
|
||||
};
|
||||
|
||||
// Bot response streaming
|
||||
// Bot response streaming - following the JS implementation pattern
|
||||
const onBotResponseStart = (data: any) => {
|
||||
console.log("🤖 Bot response starting:", data);
|
||||
|
||||
// Reset streaming text
|
||||
setStreamingText("");
|
||||
// Turn off typing indicator since we're starting streaming
|
||||
setIsTyping(false);
|
||||
|
||||
// Create a new message and store its ID
|
||||
// Clear any existing bot message first
|
||||
if (botMessageRef.current) {
|
||||
console.log("⚠️ Clearing existing bot message before starting new one");
|
||||
botMessageRef.current = null;
|
||||
}
|
||||
|
||||
// Create new bot message with streaming flag
|
||||
const newMessage = addMessage({
|
||||
text: "",
|
||||
isUser: false,
|
||||
streaming: true,
|
||||
});
|
||||
|
||||
// Store the message ID and initial text in ref
|
||||
currentStreamingMessageRef.current = {
|
||||
// Store reference like in JS version
|
||||
botMessageRef.current = {
|
||||
id: newMessage.id,
|
||||
text: "",
|
||||
};
|
||||
@@ -149,32 +133,43 @@ export const useSocketHandlers = ({
|
||||
};
|
||||
|
||||
const onBotResponseChunk = (data: any) => {
|
||||
console.log(
|
||||
"🤖 Bot response chunk received, data length:",
|
||||
data?.data?.length || 0
|
||||
);
|
||||
console.log("🤖 Bot response chunk received:", data);
|
||||
|
||||
if (data.data && currentStreamingMessageRef.current) {
|
||||
try {
|
||||
// Update the text in our ref and state
|
||||
const newText = currentStreamingMessageRef.current.text + data.data;
|
||||
currentStreamingMessageRef.current.text = newText;
|
||||
// If no bot message exists, create one (in case bot_response_start was missed)
|
||||
if (!botMessageRef.current && data?.data) {
|
||||
console.log("⚠️ Creating bot message from chunk (missing start event)");
|
||||
|
||||
// Update state to trigger re-render
|
||||
setStreamingText(newText);
|
||||
// Turn off typing indicator since we're starting streaming
|
||||
setIsTyping(false);
|
||||
|
||||
const newMessage = addMessage({
|
||||
text: "",
|
||||
isUser: false,
|
||||
streaming: true,
|
||||
});
|
||||
|
||||
botMessageRef.current = {
|
||||
id: newMessage.id,
|
||||
text: "",
|
||||
};
|
||||
}
|
||||
|
||||
if (botMessageRef.current && data?.data) {
|
||||
// Accumulate text like in JS version
|
||||
botMessageRef.current.text += data.data;
|
||||
|
||||
// Update the message content
|
||||
updateStreamingMessage(
|
||||
currentStreamingMessageRef.current.id,
|
||||
newText
|
||||
updateMessage(botMessageRef.current.id, {
|
||||
text: botMessageRef.current.text,
|
||||
});
|
||||
|
||||
console.log(
|
||||
`Updated message to length: ${botMessageRef.current.text.length}`
|
||||
);
|
||||
} catch (error) {
|
||||
console.error("Error processing bot response chunk:", error);
|
||||
}
|
||||
} else {
|
||||
console.warn("Received chunk but no active streaming message found", {
|
||||
hasData: !!data.data,
|
||||
hasCurrentMessage: !!currentStreamingMessageRef.current,
|
||||
console.warn("Received chunk but no active bot message found", {
|
||||
hasBotMessage: !!botMessageRef.current,
|
||||
hasData: !!data?.data,
|
||||
data,
|
||||
});
|
||||
}
|
||||
@@ -183,45 +178,28 @@ export const useSocketHandlers = ({
|
||||
const onBotResponseEnd = (data: any) => {
|
||||
console.log("🤖 Bot response ended:", data);
|
||||
|
||||
if (currentStreamingMessageRef.current) {
|
||||
// Make sure we have the final text
|
||||
const finalText = currentStreamingMessageRef.current.text;
|
||||
const messageId = currentStreamingMessageRef.current.id;
|
||||
|
||||
console.log(
|
||||
`Finalizing message ${messageId} with text length: ${finalText.length}`
|
||||
);
|
||||
|
||||
// Final update to the message content
|
||||
updateStreamingMessage(messageId, finalText);
|
||||
|
||||
if (botMessageRef.current) {
|
||||
// Finalize the message by removing streaming flag
|
||||
setTimeout(() => {
|
||||
updateMessage(messageId, {
|
||||
updateMessage(botMessageRef.current.id, {
|
||||
streaming: false,
|
||||
});
|
||||
}, 100);
|
||||
|
||||
// Clear the ref and state
|
||||
setStreamingText("");
|
||||
currentStreamingMessageRef.current = null;
|
||||
console.log(`Finalized message ${botMessageRef.current.id}`);
|
||||
|
||||
// Clear the reference
|
||||
botMessageRef.current = null;
|
||||
}
|
||||
|
||||
// Reset all states to allow user to send messages again
|
||||
setIsTyping(false);
|
||||
setIsProcessing(false);
|
||||
console.log("✅ Bot response ended - user can send messages again");
|
||||
};
|
||||
|
||||
const onBotResponse = (data: any) => {
|
||||
console.log("🤖 Bot response (non-streaming):", data);
|
||||
|
||||
if (data.message && data.message.content) {
|
||||
console.log(
|
||||
`Adding non-streaming message: "${data.message.content.substring(
|
||||
0,
|
||||
50
|
||||
)}${data.message.content.length > 50 ? "..." : ""}"`
|
||||
);
|
||||
|
||||
addMessage({
|
||||
text: data.message.content,
|
||||
isUser: false,
|
||||
@@ -231,8 +209,10 @@ export const useSocketHandlers = ({
|
||||
console.warn("Received bot_response event with no content", data);
|
||||
}
|
||||
|
||||
// Reset all states to allow user to send messages again
|
||||
setIsTyping(false);
|
||||
setIsProcessing(false);
|
||||
console.log("✅ Bot response completed - user can send messages again");
|
||||
};
|
||||
|
||||
// Typing events
|
||||
@@ -265,15 +245,21 @@ export const useSocketHandlers = ({
|
||||
const onError = (data: any) => {
|
||||
console.error("❌ Socket.IO error:", data);
|
||||
addSystemMessage(data.message || "خطا در پردازش", "error");
|
||||
|
||||
// Reset states on error to allow user to try again
|
||||
setIsProcessing(false);
|
||||
setIsTyping(false);
|
||||
console.log("❌ Error occurred - reset processing state");
|
||||
};
|
||||
|
||||
const onMessageError = (data: any) => {
|
||||
console.error("❌ Message error:", data);
|
||||
addSystemMessage(data.message || "خطا در ارسال پیام", "error");
|
||||
|
||||
// Reset states on error to allow user to try again
|
||||
setIsProcessing(false);
|
||||
setIsTyping(false);
|
||||
console.log("❌ Message error - reset processing state");
|
||||
};
|
||||
|
||||
// Register event handlers
|
||||
@@ -321,9 +307,8 @@ export const useSocketHandlers = ({
|
||||
socket.off(SOCKET_EVENTS.MESSAGE_ERROR, onMessageError);
|
||||
socket.off(SOCKET_EVENTS.WEBSOCKET_ERROR, onError);
|
||||
|
||||
// Clear streaming message ref on cleanup
|
||||
currentStreamingMessageRef.current = null;
|
||||
setStreamingText("");
|
||||
// Clear bot message reference on cleanup
|
||||
botMessageRef.current = null;
|
||||
};
|
||||
}, [
|
||||
socket,
|
||||
@@ -334,10 +319,9 @@ export const useSocketHandlers = ({
|
||||
updateMessage,
|
||||
addSystemMessage,
|
||||
setCurrentSessionId,
|
||||
streamingText, // Add dependency to ensure handler is updated when streaming text changes
|
||||
]);
|
||||
|
||||
return { setupSocketHandlers, streamingText };
|
||||
return { setupSocketHandlers };
|
||||
};
|
||||
|
||||
// Helper function to format text with markdown-like syntax
|
||||
|
||||
Reference in New Issue
Block a user