\n
• State Management: It uses React state hooks to manage the following state variables:\n
  \n
  • chatId: Stores the unique identifier for the chat session.
  \n
  • message: Stores the user's input message.
  \n
  • messages: Stores the chat messages exchanged between the user and the chatbot.
  \n
  • lastUpdate: Keeps track of the timestamp of the last chat message update.
  \n
  \n
\n
• Initialization: When the component mounts, it initializes a chat session by calling the createChat function from the ChatService and sets the chatId.
\n
• Polling for Messages: It sets up a polling mechanism (pollForMessages) to check for new chatbot responses at regular intervals. When new responses are received, they are added to the messages state.
\n
• Message Submission: When the user submits a message, it adds the user's message to the chat interface, calls the postMessage function to send the message to the chatbot backend, and triggers the polling for new chatbot responses.
\n
• Scrolling: It ensures that the chat interface automatically scrolls to display the latest messages at the bottom.
\n
• Rendered Elements: It renders a chat interface with the chat messages and an input field for users to type their messages.
\n
• Conditional Rendering: Messages from the chatbot are displayed with an \"Assistant\" label.
\n

import React, { useState, useEffect, useRef } from 'react';\nimport { createChat, postMessage, getChatState } from './ChatService';\nimport './ChatBox.css';\n\nconst ChatBox = () => {\n  const [chatId, setChatId] = useState('');\n  const [message, setMessage] = useState('');\n  const [messages, setMessages] = useState([]);\n  const [lastUpdate, setLastUpdate] = useState(new Date().toISOString());\n\n  const messagesEndRef = useRef(null);\n\n  useEffect(() => {\n    const initChat = async () => {\n      const chatSessionId = `chat_${new Date().getTime()}`;\n      const instructions = \"You are TailoredTales, a guide in the quest for the perfect read. Respond with brief, engaging hints, leading seekers to books that fit as if destined, blending curiosity with the promise of a great discovery.\";\n      setChatId(chatSessionId);\n      await createChat(chatSessionId, instructions);\n    };\n\n    initChat();\n  }, []);\n\n  const pollForMessages = async () => {\n    const maxPollingDuration = 10000;\n    const pollingInterval = 200;\n    let totalPollingTime = 0;\n    \n    const poll = setInterval(() => {\n      getChatState(chatId, lastUpdate).then(data => {\n        if (data !== null) {\n          const assistantMessages = data.RecentMessages.filter(msg => msg.Role === 'assistant');\n          if (assistantMessages.length > 0) {\n            setMessages(prevMessages => [...prevMessages, ...assistantMessages]);\n            setLastUpdate(new Date().toISOString());\n            clearInterval(poll);\n          }\n        }\n      });\n  \n      totalPollingTime += pollingInterval;\n      if (totalPollingTime >= maxPollingDuration) {\n        clearInterval(poll);\n      }\n    }, pollingInterval);\n  };\n\n  const handleSubmit = async (e) => {\n    e.preventDefault();\n    if (message) {\n      const tempMessage = {\n        Content: message,\n        Role: 'user',\n        id: new Date().getTime(),\n      };\n      setMessages(prevMessages => [...prevMessages, tempMessage]);\n      await postMessage(chatId, message);\n      setMessage('');\n      pollForMessages();\n    }\n  };\n\n  useEffect(() => {\n    const messagesContainer = messagesEndRef.current;\n    if (messagesContainer) {\n      messagesContainer.scrollTop = messagesContainer.scrollHeight;\n    }\n  }, [messages]);\n  \n  return (\n    <div className=\"chatbox-container\">\n      <div className=\"chatbox-header\">\n        Tailored Tales\n      </div>\n      <div className=\"chatbox-messages\" ref={messagesEndRef}>\n        {messages.map((msg, index) => (\n          <div key={index} className={`message ${msg.Role}`}>\n            {msg.Role === 'assistant' && <div className=\"message-role\">Assistant</div>}\n            <span>{msg.Content}</span>\n          </div>\n        ))}\n      </div>\n      <form onSubmit={handleSubmit} className=\"chatbox-form\">\n        <input\n          type=\"text\"\n          value={message}\n          onChange={(e) => setMessage(e.target.value)}\n          placeholder=\"Type here...\"\n          className=\"chatbox-input\"\n        />\n      </form>\n    </div>\n  );\n};\n\nexport default ChatBox;

\n
• State Management: It uses React state hooks to manage the following state variables:\n
  \n
  • chatId: Stores the unique identifier for the chat session.
  \n
  • message: Stores the user's input message.
  \n
  • messages: Stores the chat messages exchanged between the user and the chatbot.
  \n
  • lastUpdate: Keeps track of the timestamp of the last chat message update.
  \n
  \n
\n
• Initialization: When the component mounts, it initializes a chat session by calling the createChat function from the ChatService and sets the chatId.
\n
• Polling for Messages: It sets up a polling mechanism (pollForMessages) to check for new chatbot responses at regular intervals. When new responses are received, they are added to the messages state.
\n
• Message Submission: When the user submits a message, it adds the user's message to the chat interface, calls the postMessage function to send the message to the chatbot backend, and triggers the polling for new chatbot responses.
\n
• Scrolling: It ensures that the chat interface automatically scrolls to display the latest messages at the bottom.
\n
• Rendered Elements: It renders a chat interface with the chat messages and an input field for users to type their messages.
\n
• Conditional Rendering: Messages from the chatbot are displayed with an \"Assistant\" label.
\n