Add ChatSettings component with slider-based parameter control

modified: README.md
modified: src/components/ChatInterface.jsx
new file: src/components/ChatSettings.jsx
new file: src/hooks/useChatSettings.js

README.md

@@ -18,6 +18,7 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 ## Features
 
 - Support user input of Hugging Face Access Token.
+- Support tuning system prompt and parameters: temperature, top_p, max_tokens.
 - Support UI to send user input and get response of the chatbot.
 - Keep user input and response in chat history.
 

src/components/ChatInterface.jsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import ChatSettings from "./ChatSettings";
 import MessageInput from "./MessageInput";
 import MessagePair from "./MessagePair";
 import TokenInput from "./TokenInput";
@@ -6,16 +7,24 @@ import TokenInput from "./TokenInput";
 export default function ChatInterface() {
   const [hfClient, setHFClient] = useState(null);
   const [chatHistory, setChatHistory] = useState([]);
+  const [chatSettings, setChatSettings] = useState();
 
   const handleMessageSend = async (message) => {
     if (!hfClient) {
       alert("Please enter a valid Hugging Face token first.");
       return;
     }
+    if (!chatSettings) return;
 
     const result = await hfClient.chatCompletion({
       model: "openai/gpt-oss-20b",
-      messages: [{ role: "user", content: message }],
+      messages: [
+        { role: "system", content: chatSettings.system },
+        { role: "user", content: message },
+      ],
+      temperature: chatSettings.temperature,
+      top_p: chatSettings.top_p,
+      max_tokens: chatSettings.max_tokens,
     });
 
     const assistantReply = result.choices[0].message.content;
@@ -43,6 +52,11 @@ export default function ChatInterface() {
         <TokenInput onHFClientReady={handleHFClientReady} />
       </div>
 
+      {/* Chat settings */}
+      <div>
+        <ChatSettings onChange={(s) => setChatSettings(s)} />
+      </div>
+
       {/* Input area */}
       <div>
         <MessageInput onSend={handleMessageSend} />

src/components/ChatSettings.jsx

@@ -0,0 +1,62 @@
+import { useChatSettings } from "../hooks/useChatSettings";
+
+export default function ChatSettings({ onChange }) {
+  const [settings, setSettings] = useChatSettings(onChange);
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <input
+        type="text"
+        value={settings.system}
+        onChange={(e) => setSettings({ ...settings, system: e.target.value })}
+        placeholder="System prompt (e.g. You are a helpful assistant)"
+        style={{ padding: "10px", fontSize: "16px" }}
+      />
+
+      <label>
+        Temperature: {settings.temperature}
+        <input
+          type="range"
+          min="0"
+          max="2"
+          step="0.1"
+          value={settings.temperature}
+          onChange={(e) =>
+            setSettings({
+              ...settings,
+              temperature: parseFloat(e.target.value),
+            })
+          }
+        />
+      </label>
+
+      <label>
+        Top-p: {settings.top_p}
+        <input
+          type="range"
+          min="0"
+          max="1"
+          step="0.05"
+          value={settings.top_p}
+          onChange={(e) =>
+            setSettings({ ...settings, top_p: parseFloat(e.target.value) })
+          }
+        />
+      </label>
+
+      <label>
+        Max tokens: {settings.max_tokens}
+        <input
+          type="range"
+          min="50"
+          max="1024"
+          step="50"
+          value={settings.max_tokens}
+          onChange={(e) =>
+            setSettings({ ...settings, max_tokens: parseInt(e.target.value) })
+          }
+        />
+      </label>
+    </div>
+  );
+}

src/hooks/useChatSettings.js

@@ -0,0 +1,24 @@
+import { useEffect, useRef, useState } from "react";
+
+// Manage chat settings and trigger onChange when settings change
+export function useChatSettings(onChange) {
+  const [settings, setSettings] = useState({
+    system: "You are a helpful assistant.",
+    temperature: 0.7,
+    top_p: 1,
+    max_tokens: 512,
+  });
+
+  // Always use the latest onChange without triggering effect
+  const stableOnChange = useRef(onChange);
+  useEffect(() => {
+    stableOnChange.current = onChange;
+  }, [onChange]);
+
+  // Trigger onChange only when settings change
+  useEffect(() => {
+    stableOnChange.current(settings);
+  }, [settings]);
+
+  return [settings, setSettings];
+}