src/components/UISettings.jsx

// 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>
  );
}