chat with people

function setup() {
  // Create a canvas as a background for the sketch
  createCanvas(windowWidth, windowHeight);
  background(220); // Default background for the canvas

  // Get a reference to the main chat container div from index.html
  chatContainer = select('#chat-app');

  // Create the chat display area (where messages appear)
  chatDisplay = createElement('div');
  chatDisplay.id('chat-display');
  chatContainer.child(chatDisplay); // Append to the chat container

  // Create the input area container
  let inputArea = createElement('div');
  inputArea.id('input-area');
  chatContainer.child(inputArea); // Append to the chat container

  // Create the message input field
  inputField = createInput('');
  inputField.id('message-input');
  inputField.attribute('placeholder', 'Type your message...');
  inputField.changed(sendMessage); // Call sendMessage when Enter is pressed
  inputArea.child(inputField); // Append to the input area

  // Create the send button
  sendButton = createButton('Send');
  sendButton.id('send-button');
  sendButton.mousePressed(sendMessage); // Call sendMessage when button is clicked
  inputArea.child(sendButton); // Append to the input area

  // Add an initial welcome message to the chat
  messages.push({ sender: "System", text: "Welcome to the chat! Say hello!", type: "system" });
  updateChatDisplay(); // Display the initial messages
}

function draw() {
  // The canvas is primarily a background.
  // No continuous drawing is needed for the chat UI itself, as it's DOM-based.
  // You could add dynamic background animations here if desired!
}

function sendMessage() {
  let userMessage = inputField.value().trim(); // Get message and remove leading/trailing whitespace
  if (userMessage === '') {
    return; // Don't send empty messages
  }

  // Add the user's message to our messages array
  messages.push({ sender: "You", text: userMessage, type: "user" });
  inputField.value(''); // Clear the input field

  // Generate and add responses from each "person"
  for (let i = 0; i < people.length; i++) {
    let person = people[i];
    let response = generatePersonResponse(person, userMessage);
    // Removed emoji from the message object here as well
    messages.push({ sender: person.name, text: response, type: "ai" });
    person.lastMessage = response; // Update the person's last message
  }

  updateChatDisplay(); // Refresh the chat display
}

function generatePersonResponse(person, userMessage) {
  userMessage = userMessage.toLowerCase(); // Convert user message to lowercase for easier matching
  let matchedResponse = null;
  let matchedTopic = null;

  // 1. Check for responses based on the last topic first
  // This helps maintain context if the user continues the previous conversation
  if (person.lastTopic) {
    const topicResponses = responsesByTopic[person.lastTopic] || responsesByTopic.general;
    for (let resp of topicResponses) {
      if (resp.keywords.some(keyword => userMessage.includes(keyword))) {
        matchedResponse = resp.response(person);
        matchedTopic = person.lastTopic; // Continue with the same topic
        break;
      }
    }
  }

  // 2. If no response from last topic, check general and person-specific topics
  // This allows the user to shift topics
  if (!matchedResponse) {
    const allTopicLists = [responsesByTopic.general, responsesByTopic[person.name]];
    for (let topicList of allTopicLists) {
      if (topicList) {
        for (let resp of topicList) {
          if (resp.keywords.some(keyword => userMessage.includes(keyword))) {
            matchedResponse = resp.response(person);
            // If a new keyword from a specific person's topic list is found, update the lastTopic
            // This prioritizes new topics over existing ones if the user shifts
            if (topicList === responsesByTopic[person.name]) {
              matchedTopic = person.name; // This person's specific topic
            } else if (resp.keywords.includes("p5.js") || resp.keywords.includes("code") || resp.keywords.includes("algorithm")) {
              matchedTopic = "Alice"; // P5.js/code/algorithms are Alice's domain
            } else if (resp.keywords.includes("art") || resp.keywords.includes("creative") || resp.keywords.includes("design")) {
              matchedTopic = "Bob"; // Art/creativity/design are Bob's domain
            } else if (resp.keywords.includes("robot") || resp.keywords.includes("AI") || resp.keywords.includes("data")) {
              matchedTopic = "Charlie"; // Robots/AI/data are Charlie's domain
            } else {
              matchedTopic = null; // No strong topic detected, reset
            }
            break;
          }
        }
      }
      if (matchedResponse) break;
    }
  }

  // 3. Fallback to a random generic response if no specific keyword is found
  if (!matchedResponse) {
    // If there was a last topic, ask a generic follow-up question related to it
    if (person.lastTopic) {
      switch (person.lastTopic) {
        case "Alice": return `So, anything interesting happening in the world of coding, ${person.name}?`;
        case "Bob": return `What's been inspiring your creativity lately, ${person.name}?`;
        case "Charlie": return `Have you encountered any new data patterns, ${person.name}?`;
        default: return genericResponses[Math.floor(Math.random() * genericResponses.length)];
      }
    } else {
      // If no last topic, use a truly generic response
      return genericResponses[Math.floor(Math.random() * genericResponses.length)];
    }
  }

  person.lastTopic = matchedTopic; // Update the person's last topic for the next turn
  return matchedResponse;
}

function updateChatDisplay() {
  chatDisplay.html(''); // Clear current display

  for (let msg of messages) {
    let msgContainer = createElement('div');
    msgContainer.class('message-container');

    let msgBubble = createElement('div');
    msgBubble.class('message-bubble');

    let senderName = createElement('span');
    senderName.class('sender-name');
    senderName.html(msg.sender + ":");

    let messageText = createElement('span');
    messageText.html(msg.text);

    if (msg.type === 'user') {
      msgContainer.addClass('user-message');
      msgBubble.child(messageText); // User messages just have the text bubble
    } else if (msg.type === 'ai') {
      msgContainer.addClass('ai-message');
      // Removed emoji display logic here
      msgBubble.child(senderName);
      msgBubble.child(messageText);
    } else if (msg.type === 'system') {
      // System messages are centered and styled differently
      msgContainer.addClass('system-message');
      msgBubble.child(messageText);
    }
    msgContainer.child(msgBubble);
    chatDisplay.child(msgContainer);
  }

  // Scroll to the bottom of the chat display to show the latest message
  chatDisplay.elt.scrollTop = chatDisplay.elt.scrollHeight;
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  // The DOM elements for the chat app are styled with CSS flexbox and absolute positioning,
  // so they will adjust automatically without needing p5.js resizing logic here.
}