前一天我們已經完成了靜態的畫面框架，現在要加入互動功能，讓使用者可以輸入訊息，並立即在訊息區看到自己發送的內容。

1. 使用 useState 儲存訊息
React 提供 Hook useState 讓我們可以保存「聊天訊息」的狀態。
在這裡我們會建立一個 messages 陣列，存放所有訊息。

"use client";
import React, { useState } from "react";

2. 修改 MessageArea 顯示訊息
我們把 Day 1 的 MessageArea 改寫，讓它能顯示所有訊息。
（如果訊息是空的，就顯示「這裡會顯示聊天內容」）

const MessageArea = ({ messages }) =>
  React.createElement("div", {
    style: {
      flex: 1,
      border: "1px solid #ccc",
      borderRadius: "8px",
      padding: "12px",
      backgroundColor: "#f9f9f9",
      overflowY: "auto"
    }
  },
    messages.length === 0
      ? "這裡會顯示聊天內容"
      : messages.map((msg, i) =>
          React.createElement("div", { key: i, style: { marginBottom: "8px" } }, msg)
        )
  );

3. 修改 InputArea，加入輸入框狀態 + 發送功能
我們要用 useState 來記錄目前輸入框的內容，然後在按下按鈕時，把文字加到 messages。

const InputArea = ({ onSend }) => {
  const [input, setInput] = useState("");

  return React.createElement("div", { style: { display: "flex", marginTop: "12px" } },
    React.createElement("input", {
      type: "text",
      placeholder: "輸入訊息...",
      value: input,
      onChange: (e) => setInput(e.target.value),
      style: {
        flex: 1,
        padding: "8px",
        border: "1px solid #ccc",
        borderRadius: "4px"
      }
    }),
    React.createElement("button", {
      style: { marginLeft: "8px", padding: "8px 16px" },
      onClick: () => {
        if (input.trim() !== "") {
          onSend(input);   // 把訊息傳回父層
          setInput("");    // 清空輸入框
        }
      }
    }, "發送")
  );
};

4. 組合 ChatPage（主頁面）
我們把 messages 狀態放在最上層的 ChatPage，
然後把它傳給 MessageArea，再把 onSend 傳給 InputArea。

export default function ChatPage() {
  const [messages, setMessages] = useState([]);

  const handleSend = (msg) => {
    setMessages([...messages, msg]);
  };

  return React.createElement("div", {
    style: {
      display: "flex",
      flexDirection: "column",
      height: "100vh",
      maxWidth: "600px",
      margin: "0 auto",
      padding: "16px"
    }
  },
    React.createElement("h1", {
      style: { fontSize: "24px", textAlign: "center", marginBottom: "16px" }
    }, "🤖 智慧聊天機器人"),

    React.createElement(MessageArea, { messages }),
    React.createElement(InputArea, { onSend: handleSend })
  );
}

🎉 今天我們完成了聊天介面的互動功能！

1. 使用者可以在輸入框輸入訊息

2. 點擊「發送」或按下 Enter 鍵即可傳送訊息

3. 訊息會即時顯示在聊天區，介面仍然保持整齊排版

到目前為止，我們已經完成了 前端的完整互動基礎。