fix: add extra user agent fields resolvable by react native (#1477)

## CLA

- [ ] I have signed the [Stream
CLA](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform)
(required).
- [ ] Code changes are tested

## Description of the changes, What, Why and How?

## Changelog

-

Author: isekovanic

src/client.ts

@@ -79,6 +79,7 @@ import {
   DeleteCommandResponse,
   DeleteUserOptions,
   Device,
+  DeviceIdentifier,
   EndpointName,
   ErrorFromResponse,
   Event,
@@ -277,6 +278,7 @@ export class StreamChat<StreamChatGenerics extends ExtendableGenerics = DefaultG
   defaultWSTimeoutWithFallback: number;
   defaultWSTimeout: number;
   sdkIdentifier?: SdkIdentifier;
+  deviceIdentifier?: DeviceIdentifier;
   private nextRequestAbortController: AbortController | null = null;
 
   /**
@@ -2922,12 +2924,31 @@ export class StreamChat<StreamChatGenerics extends ExtendableGenerics = DefaultG
     if (this.userAgent) {
       return this.userAgent;
     }
+
     const version = process.env.PKG_VERSION;
+    const clientBundle = process.env.CLIENT_BUNDLE;
+
+    let userAgentString = '';
     if (this.sdkIdentifier) {
-      return `stream-chat-${this.sdkIdentifier.name}-v${this.sdkIdentifier.version}-llc-v${version}`;
+      userAgentString = `stream-chat-${this.sdkIdentifier.name}-v${this.sdkIdentifier.version}-llc-v${version}`;
     } else {
-      return `stream-chat-js-v${version}-${this.node ? 'node' : 'browser'}`;
-    }
+      userAgentString = `stream-chat-js-v${version}-${this.node ? 'node' : 'browser'}`;
+    }
+
+    const { os, model } = this.deviceIdentifier ?? {};
+
+    return ([
+      // reports the device OS, if provided
+      ['os', os],
+      // reports the device model, if provided
+      ['device_model', model],
+      // reports which bundle is being picked from the exports
+      ['client_bundle', clientBundle],
+    ] as const).reduce(
+      (withArguments, [key, value]) =>
+        value && value.length > 0 ? withArguments.concat(`|${key}=${value}`) : withArguments,
+      userAgentString,
+    );
   }
 
   /**

src/types.ts

@@ -3816,4 +3816,14 @@ export type PromoteChannelParams<SCG extends ExtendableGenerics = DefaultGeneric
   channelToMoveIndexWithinChannels?: number;
 };
 
-export type SdkIdentifier = { name: 'react' | 'react-native' | 'angular'; version: string };
+/**
+ * An identifier containing information about the downstream SDK using stream-chat. It
+ * is used to resolve the user agent.
+ */
+export type SdkIdentifier = { name: 'react' | 'react-native' | 'expo' | 'angular'; version: string };
+
+/**
+ * An identifier containing information about the downstream device using stream-chat, if
+ * available. Is used by the react-native SDKs to enrich the user agent further.
+ */
+export type DeviceIdentifier = { os: string; model?: string };

test/unit/client.js

@@ -663,13 +663,29 @@ describe('X-Stream-Client header', () => {
 		expect(userAgent).to.be.equal('stream-chat-js-v1.2.3-browser');
 	});
 
-	it('SDK integration', () => {
+	it('SDK integration without deviceIdentifier', () => {
 		client.sdkIdentifier = { name: 'react', version: '2.3.4' };
 		const userAgent = client.getUserAgent();
 
 		expect(userAgent).to.be.equal('stream-chat-react-v2.3.4-llc-v1.2.3');
 	});
 
+	it('SDK integration with deviceIdentifier', () => {
+		client.sdkIdentifier = { name: 'react-native', version: '2.3.4' };
+		client.deviceIdentifier = { os: 'iOS 15.0', model: 'iPhone17,4' };
+		const userAgent = client.getUserAgent();
+
+		expect(userAgent).to.be.equal('stream-chat-react-native-v2.3.4-llc-v1.2.3|os=iOS 15.0|device_model=iPhone17,4');
+	});
+
+	it('SDK integration with process.env.CLIENT_BUNDLE', () => {
+		process.env.CLIENT_BUNDLE = 'browser';
+		client.sdkIdentifier = { name: 'react', version: '2.3.4' };
+		const userAgent = client.getUserAgent();
+
+		expect(userAgent).to.be.equal('stream-chat-react-v2.3.4-llc-v1.2.3|client_bundle=browser');
+	});
+
 	it('setUserAgent is now deprecated', () => {
 		client.setUserAgent('deprecated');
 		const userAgent = client.getUserAgent();