30天用React打造AI工具箱 Day16

建立一個聊天室UI

昨天我們完成了Layout，也把待辦清單放到主內容區。今天要開始實作Chat工具的雛形，我們先做出聊天室的介面UI，但還不會真的連上AI。

第一步：新增 ChatBox.jsx

在src資料夾底下建立一個新檔案ChatBox.jsx

// src/ChatBox.jsx
import { useState } from "react"

export default function ChatBox(){
  const [messages, setMessages] = useState([])
  const [input, setInput] = useState("")

  const sendMessage = () => {
    if(input.trim() === "") return
    setMessages([...messages, {role: "user", text: input}])
    setInput("")
  }

  return (
    <div className="flex flex-col h-full">
      {/* 聊天訊息區 */}
      <div className="flex-1 overflow-y-auto space-y-3 p-4 bg-white rounded shadow">
        {messages.map((msg, idx) => (
          <div
            key={idx}
            className={`p-2 rounded ${
              msg.role === "user"
                ? "bg-blue-100 text-right"
                : "bg-gray-100 text-left"
            }`}
          >
            {msg.text}
          </div>
        ))}
      </div>

      {/* 輸入框 */}
      <div className="flex mt-4">
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          className="flex-1 border rounded-l px-3 py-2"
          placeholder="輸入訊息..."
        />
        <button
          onClick={sendMessage}
          className="bg-blue-600 text-white px-4 rounded-r hover:bg-blue-700"
        >
          送出
        </button>
      </div>
    </div>
  )
}

第二步:修改Layout.jsx

再來讓Chat工具選單顯示我們剛剛做的ChatBox

import { useState } from "react"
import TodoApp from "./TodoApp"
import ChatBox from "./ChatBox"

export default function Layout(){
  const [active,setActive] = useState("todo")

  return (
    <div className="min-h-screen flex">
      {/* 側邊選單 */}
      <aside className="w-64 bg-gray-800 text-white p-6 space-y-4">
        <h2 className="text-xl font-bold mb-6">AI工具箱</h2>
        <nav className="space-y-2">
          <button
            className={`block w-full text-left px-3 py-2 rounded ${
              active==="todo" ? "bg-blue-600" : "hover:bg-gray-700"
            }`}
            onClick={()=>setActive("todo")}
          >
            待辦清單
          </button>
          <button
            className={`block w-full text-left px-3 py-2 rounded ${
              active==="chat" ? "bg-blue-600" : "hover:bg-gray-700"
            }`}
            onClick={()=>setActive("chat")}
          >
            Chat工具
          </button>
          <button
            className={`block w-full text-left px-3 py-2 rounded ${
              active==="translate" ? "bg-blue-600" : "hover:bg-gray-700"
            }`}
            onClick={()=>setActive("translate")}
          >
            翻譯工具
          </button>
        </nav>
      </aside>

      {/* 主要內容 */}
      <main className="flex-1 bg-gray-50 p-6">
        {active==="todo" && (
          <>
            <h1 className="text-2xl font-bold mb-4">待辦清單</h1>
            <TodoApp/>
          </>
        )}
        {active==="chat" && (
          <>
            <h1 className="text-2xl font-bold mb-4">聊天室</h1>
            <ChatBox/>
          </>
        )}
        {active==="translate" && (
          <h1 className="text-2xl font-bold">這裡未來會放翻譯工具</h1>
        )}
      </main>
    </div>
  )
}

畫面效果

重啟一次服務後，點選左邊的Chat工具，就可以看到一個簡單的聊天室介面

• 上方是訊息顯示區。
• 下方是輸入框+送出按鈕。
• 每按一次「送出」就會把訊息加到上方列表。