Seamless Integration: Enhancing your Static Web App by adding an Azure Functions backed AI Chatbot

• State Management: It uses React state hooks to manage the following state variables:
  • chatId: Stores the unique identifier for the chat session.
  • message: Stores the user's input message.
  • messages: Stores the chat messages exchanged between the user and the chatbot.
  • lastUpdate: Keeps track of the timestamp of the last chat message update.
• Initialization: When the component mounts, it initializes a chat session by calling the createChat function from the ChatService and sets the chatId.
• 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.
• 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.
• Scrolling: It ensures that the chat interface automatically scrolls to display the latest messages at the bottom.
• Rendered Elements: It renders a chat interface with the chat messages and an input field for users to type their messages.
• Conditional Rendering: Messages from the chatbot are displayed with an "Assistant" label.

import React, { useState, useEffect, useRef } from 'react';
import { createChat, postMessage, getChatState } from './ChatService';
import './ChatBox.css';

const ChatBox = () => {
  const [chatId, setChatId] = useState('');
  const [message, setMessage] = useState('');
  const [messages, setMessages] = useState([]);
  const [lastUpdate, setLastUpdate] = useState(new Date().toISOString());

  const messagesEndRef = useRef(null);

  useEffect(() => {
    const initChat = async () => {
      const chatSessionId = `chat_${new Date().getTime()}`;
      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.";
      setChatId(chatSessionId);
      await createChat(chatSessionId, instructions);
    };

    initChat();
  }, []);

  const pollForMessages = async () => {
    const maxPollingDuration = 10000;
    const pollingInterval = 200;
    let totalPollingTime = 0;
    
    const poll = setInterval(() => {
      getChatState(chatId, lastUpdate).then(data => {
        if (data !== null) {
          const assistantMessages = data.RecentMessages.filter(msg => msg.Role === 'assistant');
          if (assistantMessages.length > 0) {
            setMessages(prevMessages => [...prevMessages, ...assistantMessages]);
            setLastUpdate(new Date().toISOString());
            clearInterval(poll);
          }
        }
      });
  
      totalPollingTime += pollingInterval;
      if (totalPollingTime >= maxPollingDuration) {
        clearInterval(poll);
      }
    }, pollingInterval);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (message) {
      const tempMessage = {
        Content: message,
        Role: 'user',
        id: new Date().getTime(),
      };
      setMessages(prevMessages => [...prevMessages, tempMessage]);
      await postMessage(chatId, message);
      setMessage('');
      pollForMessages();
    }
  };

  useEffect(() => {
    const messagesContainer = messagesEndRef.current;
    if (messagesContainer) {
      messagesContainer.scrollTop = messagesContainer.scrollHeight;
    }
  }, [messages]);
  
  return (
    <div className="chatbox-container">
      <div className="chatbox-header">
        Tailored Tales
      </div>
      <div className="chatbox-messages" ref={messagesEndRef}>
        {messages.map((msg, index) => (
          <div key={index} className={`message ${msg.Role}`}>
            {msg.Role === 'assistant' && <div className="message-role">Assistant</div>}
            <span>{msg.Content}</span>
          </div>
        ))}
      </div>
      <form onSubmit={handleSubmit} className="chatbox-form">
        <input
          type="text"
          value={message}
          onChange={(e) => setMessage(e.target.value)}
          placeholder="Type here..."
          className="chatbox-input"
        />
      </form>
    </div>
  );
};

export default ChatBox;