Connect user input to HF chatCompletion and display assistant response

modified: README.md
modified: src/components/ChatInterface.jsx

README.md

@@ -18,8 +18,7 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 ## Features
 
 - Get Hugging Face Access Token from environment variable.
-- Test dummy user input and show response in console log.
-- Support UI to send user input and get dummy response.
+- Support UI to send user input and get response of the chatbot.
 - Keep user input and response in chat history.
 
 ## Usage

src/components/ChatInterface.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { hf } from "../utils/hfClient";
 import MessageInput from "./MessageInput";
 import MessagePair from "./MessagePair";
@@ -6,22 +6,14 @@ import MessagePair from "./MessagePair";
 export default function ChatInterface() {
   const [chatHistory, setChatHistory] = useState([]);
 
-  useEffect(() => {
-    const testHF = async () => {
-      const result = await hf.chatCompletion({
-        model: "openai/gpt-oss-20b",
-        messages: [{ role: "user", content: "Hello!" }],
-      });
-      console.log("HF：", result.choices[0].message.content);
-    };
+  const handleMessageSend = async (message) => {
+    const result = await hf.chatCompletion({
+      model: "openai/gpt-oss-20b",
+      messages: [{ role: "user", content: message }],
+    });
 
-    testHF();
-  }, []);
-
-  const handleMessageSend = (message) => {
-    const fakeResponse =
-      "This is a simulated response.\nIt can span multiple lines.";
-    const newPair = { user: message, assistant: fakeResponse };
+    const assistantReply = result.choices[0].message.content;
+    const newPair = { user: message, assistant: assistantReply };
     setChatHistory([newPair, ...chatHistory]);
   };