Merge branch 'master' of github.com:GetStream/stream-chat-js into rc

Author: arnautov-anton

CHANGELOG.md

@@ -37,6 +37,27 @@ property in the formatted message output
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [8.57.5](https://github.com/GetStream/stream-chat-js/compare/v8.57.4...v8.57.5) (2025-03-01)
+
+
+### Bug Fixes
+
+* properly encode user agent on WS connection ([#1482](https://github.com/GetStream/stream-chat-js/issues/1482)) ([58b538b](https://github.com/GetStream/stream-chat-js/commit/58b538b5380000cfcf2abeb369b5ef6a0acf3913))
+
+### [8.57.4](https://github.com/GetStream/stream-chat-js/compare/v8.57.3...v8.57.4) (2025-02-28)
+
+
+### Bug Fixes
+
+* add missing env variable in rollup config ([#1480](https://github.com/GetStream/stream-chat-js/issues/1480)) ([a935e9e](https://github.com/GetStream/stream-chat-js/commit/a935e9e79232da0df9d951119f48891da59d6281))
+
+### [8.57.3](https://github.com/GetStream/stream-chat-js/compare/v8.57.2...v8.57.3) (2025-02-28)
+
+
+### Bug Fixes
+
+* add extra user agent fields resolvable by react native ([#1477](https://github.com/GetStream/stream-chat-js/issues/1477)) ([4232150](https://github.com/GetStream/stream-chat-js/commit/42321500096491252211b57e3d238cfe920a0777))
+
 ### [8.57.2](https://github.com/GetStream/stream-chat-js/compare/v8.57.1...v8.57.2) (2025-02-27)
 
 

src/client.ts

@@ -78,6 +78,7 @@ import {
   DeleteCommandResponse,
   DeleteUserOptions,
   Device,
+  DeviceIdentifier,
   EndpointName,
   ErrorFromResponse,
   Event,
@@ -274,6 +275,7 @@ export class StreamChat {
   defaultWSTimeoutWithFallback: number;
   defaultWSTimeout: number;
   sdkIdentifier?: SdkIdentifier;
+  deviceIdentifier?: DeviceIdentifier;
   private nextRequestAbortController: AbortController | null = null;
 
   /**
@@ -2870,12 +2872,20 @@ export class StreamChat {
       userAgentString = `stream-chat-js-v${version}-${this.node ? 'node' : 'browser'}`;
     }
 
-    const additionalOptions = ([
+    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).map(([key, value]) => `${key}=${value ?? ''}`);
-
-    return [userAgentString, ...additionalOptions].join('|');
+    ] as const).reduce(
+      (withArguments, [key, value]) =>
+        value && value.length > 0 ? withArguments.concat(`|${key}=${value}`) : withArguments,
+      userAgentString,
+    );
   }
 
   /**

src/connection.ts

@@ -194,7 +194,9 @@ export class StableWSConnection {
 
     return `${this.client.wsBaseURL}/connect?json=${qs}&api_key=${
       this.client.key
-    }&authorization=${token}&stream-auth-type=${this.client.getAuthType()}&X-Stream-Client=${this.client.getUserAgent()}`;
+    }&authorization=${token}&stream-auth-type=${this.client.getAuthType()}&X-Stream-Client=${encodeURIComponent(
+      this.client.getUserAgent(),
+    )}`;
   };
 
   /**

src/types.ts

@@ -3691,4 +3691,14 @@ export type PromoteChannelParams = {
   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

@@ -664,13 +664,29 @@ describe('X-Stream-Client header', () => {
 		expect(userAgent).to.be.equal('stream-chat-js-v1.2.3-browser|client_bundle=browser-esm');
 	});
 
-	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|client_bundle=browser-esm');
 	});
 
+	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();

test/unit/connection.js

@@ -77,6 +77,14 @@ describe('connection', function () {
 			expect(data.device).to.deep.equal(device);
 		});
 
+		it('should properly encode X-Stream-Client', () => {
+			const userAgent = 'agent|val=foo bar';
+			client.userAgent = userAgent;
+			const url = ws._buildUrl();
+
+			expect(url).to.contain(encodeURIComponent(userAgent));
+		});
+
 		it('should not include device if not there', function () {
 			ws.client.options.device = undefined;
 			const { query } = url.parse(ws._buildUrl(), true);