fix build

2025-06-08 22:48:50 +03:30
parent 1b6139a80e
commit f7b28556b0
3 changed files with 86 additions and 98 deletions
@@ -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 = 'http://localhost:4000'
+VITE_BASE_URL = 'https://api-dzone.danakcorp.com'
+# VITE_BASE_URL = 'http://localhost:4000'

 VITE_SLUG_ID = 'slug_id'
@@ -55,8 +55,8 @@ const Chatbot: FC<ChatbotProps> = ({ isOpen, onClose }) => {
  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 [showConnectionMessage, setShowConnectionMessage] =
+  //   useState<boolean>(false);
  const [reconnectAttempts, setReconnectAttempts] = useState<number>(0);
  const maxReconnectAttempts = 5;

@@ -73,7 +73,6 @@ const Chatbot: FC<ChatbotProps> = ({ isOpen, onClose }) => {
    addMessage,
    addSystemMessage,
    updateMessage,
-    clearMessages,
  } = useMessages();
  const { setupSocketHandlers } = useSocketHandlers({
    socket,
@@ -202,7 +201,7 @@ const Chatbot: FC<ChatbotProps> = ({ isOpen, onClose }) => {
  // Show connection message only briefly when status changes
  useEffect(() => {
    // Always show connection status, don't hide it
-    setShowConnectionMessage(true);
+    // setShowConnectionMessage(true);

    return () => {
      if (connectionTimeoutRef.current) {
@@ -302,24 +301,24 @@ const Chatbot: FC<ChatbotProps> = ({ isOpen, onClose }) => {
    });
  };

-  const joinChat = (sessionId: string) => {
-    if (!socket || !socket.connected) {
-      addSystemMessage("اتصال Socket.IO برقرار نیست", "error");
-      return;
-    }
+  // const joinChat = (sessionId: string) => {
+  //   if (!socket || !socket.connected) {
+  //     addSystemMessage("اتصال Socket.IO برقرار نیست", "error");
+  //     return;
+  //   }

-    // Get user ID from localStorage or use a default
-    const userId =
-      localStorage.getItem(import.meta.env.VITE_USER_ID_KEY || "user_id") ||
-      localStorage.getItem("userId") ||
-      "anonymous_user";
+  //   // Get user ID from localStorage or use a default
+  //   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,
-    });
-  };
+  //   console.log(`🔄 Joining chat session: ${sessionId}`);
+  //   socket.emit(SOCKET_EVENTS.JOIN_CHAT, {
+  //     sessionId: sessionId,
+  //     userId: userId,
+  //   });
+  // };

  const handleSendMessage = () => {
    const message = inputValue.trim();
@@ -459,35 +458,32 @@ 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" }}
    >
      {/* 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"
+            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"
+            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>
@@ -520,9 +516,8 @@ const Chatbot: FC<ChatbotProps> = ({ isOpen, onClose }) => {
          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">
@@ -530,41 +525,37 @@ 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"
-                    : message.isSystem
+                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"
+                        ? "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"
-                      : 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
+                      ? message.metadata.confidence === 1
+                        ? "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"
                    : ""
-                }`}
+                  }`}
              >
                <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"
-                  }`}
+                  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",
@@ -626,23 +617,21 @@ const Chatbot: FC<ChatbotProps> = ({ isOpen, onClose }) => {
              isProcessing ||
              connectionStatus !== "connected"
            }
-            className={`ml-2 ${
-              inputValue.trim() === "" ||
+            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`}
+              ? "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() !== "" &&
+              className={`transform rotate-180 ${inputValue.trim() !== "" &&
                !isProcessing &&
                connectionStatus === "connected"
-                  ? "animate-pulse"
-                  : ""
-              }`}
+                ? "animate-pulse"
+                : ""
+                }`}
            />
          </button>
        </div>
@@ -24,7 +24,6 @@ export const useSocketHandlers = ({
  updateMessage,
  addSystemMessage,
  setCurrentSessionId,
-  isProcessing,
 }: UseSocketHandlersProps) => {
  // Keep track of the current bot message like in the JS version
  const botMessageRef = useRef<{
@@ -325,30 +324,30 @@ export const useSocketHandlers = ({
 };

 // Helper function to format text with markdown-like syntax
-const formatText = (text: string) => {
-  if (!text) return "";
+// const formatText = (text: string) => {
+//   if (!text) return "";

-  // Clean the text first to avoid HTML injection
-  const cleanedText = text
-    .replace(/&/g, "&amp;")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;")
-    .replace(/"/g, "&quot;")
-    .replace(/'/g, "&#039;");
+//   // Clean the text first to avoid HTML injection
+//   const cleanedText = text
+//     .replace(/&/g, "&amp;")
+//     .replace(/</g, "&lt;")
+//     .replace(/>/g, "&gt;")
+//     .replace(/"/g, "&quot;")
+//     .replace(/'/g, "&#039;");

-  // Format with markdown-like syntax and handle newlines properly
-  const formattedText = cleanedText
-    // Bold text
-    .replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")
-    // Italic text
-    .replace(/\*(.*?)\*/g, "<em>$1</em>")
-    // 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>'
-    );
+//   // Format with markdown-like syntax and handle newlines properly
+//   const formattedText = cleanedText
+//     // Bold text
+//     .replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")
+//     // Italic text
+//     .replace(/\*(.*?)\*/g, "<em>$1</em>")
+//     // 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>'
+//     );

-  return formattedText;
-};
+//   return formattedText;
+// };