Modularize chat completion and add loading and typing animation

modified: README.md
modified: src/components/ChatInterface.jsx
modified: src/components/ChatSettings.jsx
new file: src/components/LoadingBar.jsx
new file: src/components/LoadingIndicator.jsx
new file: src/components/Spinner.jsx
new file: src/components/ThinkingDots.jsx
new file: src/components/TypingMessage.jsx
new file: src/components/UISettings.jsx
new file: src/hooks/useChatCompletion.js
modified: src/hooks/useChatSettings.js
new file: src/hooks/useUISettings.js
new file: src/styles/LoadingBar.css
new file: src/styles/Spinner.css
new file: src/styles/ThinkingDots.css
new file: src/utils/simulateTyping.js

README.md

@@ -19,6 +19,7 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 - Support user input of Hugging Face Access Token.
 - Support tuning system prompt and parameters: temperature, top_p, max_tokens.
+- Support typing animation, loading animation, and error handling.
 - 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,35 +1,30 @@
 import { useState } from "react";
+import { useChatCompletion } from "../hooks/useChatCompletion";
+import { useChatSettings } from "../hooks/useChatSettings";
+import { useUISettings } from "../hooks/useUISettings";
 import ChatSettings from "./ChatSettings";
+import LoadingIndicator from "./LoadingIndicator";
 import MessageInput from "./MessageInput";
 import MessagePair from "./MessagePair";
 import TokenInput from "./TokenInput";
+import TypingMessage from "./TypingMessage";
+import UISettings from "./UISettings";
 
 export default function ChatInterface() {
   const [hfClient, setHFClient] = useState(null);
   const [chatHistory, setChatHistory] = useState([]);
-  const [chatSettings, setChatSettings] = useState();
+  const [chatSettings, setChatSettings] = useChatSettings();
+  const [uiSettings, setUISettings] = useUISettings();
 
-  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: "system", content: chatSettings.system },
-        { role: "user", content: message },
-      ],
-      temperature: chatSettings.temperature,
-      top_p: chatSettings.top_p,
-      max_tokens: chatSettings.max_tokens,
-    });
+  const { sendMessage, isLoading, typingMessage, error } = useChatCompletion(
+    hfClient,
+    chatSettings,
+    uiSettings,
+    (newPair) => setChatHistory([newPair, ...chatHistory])
+  );
 
-    const assistantReply = result.choices[0].message.content;
-    const newPair = { user: message, assistant: assistantReply };
-    setChatHistory([newPair, ...chatHistory]);
+  const handleMessageSend = async (message) => {
+    sendMessage(message);
   };
 
   const handleHFClientReady = (client) => {
@@ -54,7 +49,12 @@ export default function ChatInterface() {
 
       {/* Chat settings */}
       <div>
-        <ChatSettings onChange={(s) => setChatSettings(s)} />
+        <ChatSettings settings={chatSettings} setSettings={setChatSettings} />
+      </div>
+
+      {/* UI behavior settings */}
+      <div>
+        <UISettings settings={uiSettings} setSettings={setUISettings} />
       </div>
 
       {/* Input area */}
@@ -64,6 +64,10 @@ export default function ChatInterface() {
 
       {/* Chat history */}
       <div>
+        {isLoading && <LoadingIndicator type={uiSettings.loadingStyle} />}
+        {typingMessage && <TypingMessage text={typingMessage} />}
+        {error && <div style={{ color: "red" }}>{error.message}</div>}
+
         {chatHistory.map((pair, index) => (
           <MessagePair
             key={index}

src/components/ChatSettings.jsx

@@ -1,8 +1,4 @@
-import { useChatSettings } from "../hooks/useChatSettings";
-
-export default function ChatSettings({ onChange }) {
-  const [settings, setSettings] = useChatSettings(onChange);
-
+export default function ChatSettings({ settings, setSettings }) {
   return (
     <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
       <input

src/components/LoadingBar.jsx

@@ -0,0 +1,5 @@
+import "../styles/LoadingBar.css";
+
+export default function LoadingBar() {
+  return <div className="loading-bar" />;
+}

src/components/LoadingIndicator.jsx

@@ -0,0 +1,11 @@
+import LoadingBar from "./LoadingBar";
+import Spinner from "./Spinner";
+import ThinkingDots from "./ThinkingDots";
+
+// Render different loading styles based on type
+export default function LoadingIndicator({ type = "dots" }) {
+  if (type === "dots") return <ThinkingDots />;
+  if (type === "spinner") return <Spinner />;
+  if (type === "bar") return <LoadingBar />;
+  return null;
+}

src/components/Spinner.jsx

@@ -0,0 +1,5 @@
+import "../styles/Spinner.css";
+
+export default function Spinner() {
+  return <div className="spinner" />;
+}

src/components/ThinkingDots.jsx

@@ -0,0 +1,11 @@
+import "../styles/ThinkingDots.css";
+
+export default function ThinkingDots() {
+  return (
+    <div className="thinking-dots">
+      <span>.</span>
+      <span>.</span>
+      <span>.</span>
+    </div>
+  );
+}

src/components/TypingMessage.jsx

@@ -0,0 +1,3 @@
+export default function TypingMessage({ text }) {
+  return <div style={{ fontStyle: "italic", color: "#666" }}>{text}</div>;
+}

src/components/UISettings.jsx

@@ -0,0 +1,31 @@
+// UI behavior control panel
+export default function UISettings({ settings, setSettings }) {
+  return (
+    <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
+      <label htmlFor="loading-style">Loading Style:</label>
+      <select
+        id="loading-style"
+        value={settings.loadingStyle}
+        onChange={(e) =>
+          setSettings({ ...settings, loadingStyle: e.target.value })
+        }
+      >
+        <option value="dots">Thinking Dots</option>
+        <option value="spinner">Spinner</option>
+        <option value="bar">Loading Bar</option>
+        <option value="none">None</option>
+      </select>
+
+      <label style={{ marginLeft: "20px" }}>
+        <input
+          type="checkbox"
+          checked={settings.typingEnabled}
+          onChange={(e) =>
+            setSettings({ ...settings, typingEnabled: e.target.checked })
+          }
+        />
+        Enable Typing Animation
+      </label>
+    </div>
+  );
+}

src/hooks/useChatCompletion.js

@@ -0,0 +1,61 @@
+import { useState } from "react";
+import { simulateTyping } from "../utils/simulateTyping";
+
+// Handle chat completion logic, including settings, UI behavior, and error management
+export function useChatCompletion(
+  client,
+  chatSettings,
+  uiSettings,
+  onMessageComplete
+) {
+  const [isLoading, setIsLoading] = useState(false);
+  const [typingMessage, setTypingMessage] = useState("");
+  const [error, setError] = useState(null);
+
+  const sendMessage = async (message) => {
+    if (!client) {
+      setError({
+        type: "MISSING_CLIENT",
+        message: "Please enter a valid Hugging Face token first.",
+      });
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+    setTypingMessage("");
+
+    let result;
+
+    try {
+      result = await client.chatCompletion({
+        model: "openai/gpt-oss-20b",
+        messages: [
+          { role: "system", content: chatSettings.system },
+          { role: "user", content: message },
+        ],
+        temperature: chatSettings.temperature,
+        top_p: chatSettings.top_p,
+        max_tokens: chatSettings.max_tokens,
+      });
+    } catch (err) {
+      setError({ type: "CHAT_ERROR", message: err.message });
+      return;
+    } finally {
+      setIsLoading(false);
+    }
+
+    const assistantReply = result.choices[0].message.content;
+
+    if (uiSettings.typingEnabled) {
+      simulateTyping(assistantReply, setTypingMessage, () => {
+        onMessageComplete({ user: message, assistant: assistantReply });
+        setTypingMessage("");
+      });
+    } else {
+      onMessageComplete({ user: message, assistant: assistantReply });
+    }
+  };
+
+  return { sendMessage, isLoading, typingMessage, error };
+}

src/hooks/useChatSettings.js

@@ -1,24 +1,12 @@
-import { useEffect, useRef, useState } from "react";
+import { useState } from "react";
 
 // Manage chat settings and trigger onChange when settings change
-export function useChatSettings(onChange) {
+export function useChatSettings() {
   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];
 }

src/hooks/useUISettings.js

@@ -0,0 +1,10 @@
+import { useState } from "react";
+
+// Manage UI behavior settings like loading style and typing animation
+export function useUISettings() {
+  const [settings, setSettings] = useState({
+    loadingStyle: "dots",
+    typingEnabled: true,
+  });
+  return [settings, setSettings];
+}

src/styles/LoadingBar.css

@@ -0,0 +1,16 @@
+.loading-bar {
+  width: 100px;
+  height: 6px;
+  background: linear-gradient(90deg, #333 0%, #ccc 50%, #333 100%);
+  background-size: 200% 100%;
+  animation: slide 1.2s linear infinite;
+}
+
+@keyframes slide {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}

src/styles/Spinner.css

@@ -0,0 +1,14 @@
+.spinner {
+  width: 24px;
+  height: 24px;
+  border: 4px solid #ccc;
+  border-top-color: #333;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

src/styles/ThinkingDots.css

@@ -0,0 +1,28 @@
+.thinking-dots {
+  font-size: 24px;
+  font-weight: bold;
+  display: inline-block;
+}
+
+.thinking-dots span {
+  animation: blink 1.2s infinite;
+  margin: 0 2px;
+}
+
+.thinking-dots span:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.thinking-dots span:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes blink {
+  0%,
+  100% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+}

src/utils/simulateTyping.js

@@ -0,0 +1,12 @@
+// Simulate typing effect by revealing text one character at a time
+export function simulateTyping(fullText, onUpdate, onComplete, delay = 20) {
+  let index = 0;
+  const interval = setInterval(() => {
+    onUpdate((prev) => prev + fullText[index]);
+    index++;
+    if (index >= fullText.length) {
+      clearInterval(interval);
+      onComplete();
+    }
+  }, delay);
+}