今天我們要先用 Next.js 建立聊天機器人的前端基本畫面。
這一天的重點是畫面框架，還不會加入互動功能。

1. 建立標題元件
我們先建立一個簡單的標題，顯示在畫面最上方。

const Title = () =>
  React.createElement("h1", {
    style: { fontSize: "24px", textAlign: "center", marginBottom: "16px" }
  }, "🤖 智慧聊天機器人");

2. 建立訊息區容器
這裡是用來顯示聊天紀錄的區塊。(先放一個文字提示，未來再顯示真正的訊息。)

const MessageArea = () =>
  React.createElement("div", {
    style: {
      flex: 1,
      border: "1px solid #ccc",
      borderRadius: "8px",
      padding: "12px",
      backgroundColor: "#f9f9f9",
    }
  }, "這裡會顯示聊天內容");

3. 建立輸入區（還不能互動）
輸入框 + 發送按鈕的基本結構：

const InputArea = () =>
  React.createElement("div", {
    style: { display: "flex", marginTop: "12px" }
  },
    React.createElement("input", {
      type: "text",
      placeholder: "輸入訊息...",
      style: { flex: 1, padding: "8px", border: "1px solid #ccc", borderRadius: "4px" }
    }),
    React.createElement("button", {
      style: { marginLeft: "8px", padding: "8px 16px" }
    }, "發送")
  );

4. 組合整個頁面
把標題、訊息區、輸入框組合起來，形成聊天介面：

export default function ChatPage() {
  return React.createElement("div", {
    style: { display: "flex", flexDirection: "column", height: "100vh", maxWidth: "600px", margin: "0 auto", padding: "16px" }
  },
    React.createElement(Title),
    React.createElement(MessageArea),
    React.createElement(InputArea)
  );
}

這樣我們的基本介面架構就完成啦~~~~