feat!: support for v10

.claude/skills/run-e2e/SKILL.md

@@ -0,0 +1,33 @@
+---
+name: run-e2e
+description: Run the manual end-to-end test plan for the stream-chat-angular sample app (SDK features, WS events, performance vs master) using the internal "Angular testing" doc. Use when asked to run e2e tests, QA the sample app, test the stream-chat v10 migration, or work through the Angular testing doc.
+---
+
+# run-e2e
+
+The test plan lives in the **Angular testing** doc:
+https://claude.ai/artifact/AJ7avSbHUizPhMpBfSSsrF
+
+**Internal to Stream.** The doc is a private Claude Docs artifact for Stream employees. Do not copy its contents into public places (GitHub issues, PRs, public docs, this repo).
+
+**The doc contains the Stream credentials needed to run the tests.** These are the test app's API key, its token endpoint and the **API secret**. Read them from the doc's Setup tab when you need them. Never commit them, paste them into the sample app's `.env` (it is compiled into the browser bundle), or echo the secret in chat or logs.
+
+## What the doc contains
+
+Read it through the Claude Docs connector (`read` with the project id from the link), not with a web fetch. It has four tabs:
+
+| Tab             | Contents                                                                                                                                                                                                                                                                                                                                                      |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Setup           | `.env` for the sample app: dynamic users via `?user_id=`, a token URL with a `user_id` placeholder, and a members channel filter. It also has the node SDK client with the API secret, the test users `angular-test-alice`/`bob`/`carol`, the scratch channel `messaging:angular-test-scratch` and the performance channel `messaging:sample-app-channel-10`. |
+| 1. SDK features | Test cases per feature area. Each case has UI steps, the expected UI result, a backend check with `@stream-io/node-sdk` and a Result dropdown. Some areas include test-only harness snippets for the sample app (drafts, log out / log in); never commit those.                                                                                               |
+| 2. WS events    | Events the Angular SDK handles itself (section A) and events it reads through stream-chat state (section B). Each case has a trigger (node SDK or a second user), the expected reaction and a backend check. There is also a list of excluded events.                                                                                                         |
+| 3. Performance  | Scrolling the performance channel through its latest 1,000 messages on this branch vs master. It covers production builds, a master worktree, a repeatable console scroll script, a Chrome DevTools recording procedure and results tables.                                                                                                                   |
+
+## How to run
+
+1. Read the doc first (Setup tab, then the tab for the step being run). It is the source of truth; the summary above may be out of date.
+2. Set up the sample app as the Setup tab describes (`npm run config:dev`, build the lib, `npm start`). Open `localhost:4200/?user_id=angular-test-alice`.
+3. For backend checks and triggers, use `@stream-io/node-sdk` server-side with the key and secret from the doc. For example, run a script with Node from a project that has the SDK installed (`~/Stream/stream-node-client-reporduction`).
+4. Run destructive cases (truncate, hide, delete, freeze, ban, user delete) only on the scratch channel or throwaway users, as each case says. Never run them on `sample-app-channel-*` or the performance channel.
+5. Report outcomes to the user in chat (Pass / Fail / Blocked per case, with what happened for failures and blocks). **Do not post results to the doc:** don't set the Result dropdowns, fill in the performance results tables, or add comments. The doc is a shared test plan template and must stay clean.
+6. Revert any test-only changes afterwards: harness snippets, `&exp=60` on the token URL, `openMessageListAt` and channel-type permission changes.

.github/workflows/workflow.yml

@@ -3,7 +3,7 @@ on:
   push:
     branches:
       - master
-      - feat/ngx-translate-v18-support
+      - feat/stream-chat-v10
   pull_request:
     branches:
       - master

README.md

@@ -1,4 +1,4 @@
-# Official Angular SDK for [Stream Chat](https://getstream.io/chat/sdk/react/)
+# Official Angular SDK for [Stream Chat](https://getstream.io/chat/sdk/angular/)
 
 > The official Angular components for Stream Chat, a service for building chat applications.
 
@@ -9,8 +9,9 @@
 **Quick Links**
 
 - [Register](https://getstream.io/chat/trial/) to get an API key for Stream Chat
-- [Angular Chat Tutorial](https://getstream.io/chat/angular/tutorial/)
-- [Docs](https://getstream.io/chat/docs/sdk/angular/)
+- [Angular Chat Tutorial](https://getstream.io/chat/sdk/angular/tutorial/)
+- [Docs](https://getstream.io/chat/docs/sdk/angular/v8/)
+- [Upgrade guide to v8](https://getstream.io/chat/docs/sdk/angular/v8/basics/upgrade-to-v8/)
 - [Chat UI Kit](https://getstream.io/chat/ui-kit/)
 - [Demo application](https://angular-chat-demo-getstreamio.vercel.app/)
 - [Codesandbox](https://codesandbox.io/p/devbox/stream-chat-angular-sample-app-rc3hyw)
@@ -24,7 +25,7 @@ With our component library, you can build a variety of chat use cases, including
 
 ## Angular Chat Tutorial
 
-The best way to get started is to follow the [Angular Chat Tutorial](https://getstream.io/chat/angular/tutorial/). It shows you how to use this SDK to build a fully functional chat application and includes common customizations.
+The best way to get started is to follow the [Angular Chat Tutorial](https://getstream.io/chat/sdk/angular/tutorial/). It shows you how to use this SDK to build a fully functional chat application and includes common customizations.
 
 ## Free for Makers
 
@@ -33,9 +34,9 @@ For complete pricing and details visit our [Chat Pricing Page](https://getstream
 
 ## Docs
 
-The [docs](https://getstream.io/chat/docs/sdk/angular/) provide a brief description about the components and services in the library.
+The [docs](https://getstream.io/chat/docs/sdk/angular/v8/) provide a brief description about the components and services in the library.
 
-The Angular library is created using the [stream-chat-js](https://github.com/getstream/stream-chat-js) library. For the most common use cases our services should give a nice abstraction over this library, however you might need it for more advanced customization, the [documentation](https://getstream.io/chat/docs/js/) is on our website.
+The Angular library is created using the [stream-chat-js](https://github.com/getstream/stream-chat-js) library. For the most common use cases our services should give a nice abstraction over this library, however you might need it for more advanced customization, the [documentation](https://getstream.io/chat/docs/javascript/) is on our website.
 
 ## Contributing
 
@@ -52,6 +53,8 @@ Check out our current openings and apply via [Stream's website](https://getstrea
 
 ### Install with NPM
 
+> v8 is built on [`stream-chat`](https://github.com/getstream/stream-chat-js) v10. If you are upgrading from v7, follow the [upgrade guide](https://getstream.io/chat/docs/sdk/angular/v8/basics/upgrade-to-v8/).
+
 Supported Angular versions: **Angular 17-22**
 
 _Zoneless mode isn't yet supported_
@@ -96,7 +99,7 @@ Run this command if you are using **Angular 17**:
 npm install stream-chat-angular stream-chat @ngx-translate/core@17 ngx-float-ui@17
 ```
 
-Supported node verisons: 18+
+Supported Node versions: 22.18+
 
 ## Sample App
 
@@ -112,7 +115,7 @@ STREAM_USER_ID=<Your user ID>
 STREAM_USER_TOKEN=<Your user token>
 ```
 
-The easiest way to generate a token for testing purposes is to use our [token generator](https://getstream.io/chat/docs/react/token_generator/).
+The easiest way to generate a token for testing purposes is to use our [token generator](https://getstream.io/chat/docs/javascript/tokens-and-authentication/).
 
 Run `npm install` to install dependencies.
 

copy-generated-component-docs.ts

@@ -1,4 +1,5 @@
 const fs = require('fs');
+const { normalizeGeneratedDocs } = require('./normalize-generated-docs');
 
 const generatedDocsPath = 'temp-component-docs/classes';
 const componentDocsPath = process.argv[2];
@@ -32,9 +33,11 @@ const insertGeneratedParts = (
   fileContent: string,
   generatedContent: string[]
 ) => {
-  generatedContent = generatedContent.map((l) =>
-    l.replace(/•\s/g, '').replace(/▸\s/g, '')
-  );
+  generatedContent = normalizeGeneratedDocs(
+    generatedContent
+      .map((l) => l.replace(/•\s/g, '').replace(/▸\s/g, ''))
+      .join('\n')
+  ).split('\n');
   const lines: string[] = fileContent.split('\n');
   const startOfGeneratedContentLineNumber = lines.indexOf(
     startOfGeneratedContentMark

copy-generated-service-docs.ts

@@ -1,4 +1,8 @@
 const fs = require('fs');
+const {
+  normalizeGeneratedDocs,
+  servicesDocsBaseUrl,
+} = require('./normalize-generated-docs');
 
 const sourcePath = 'temp-service-docs/classes';
 const serviceDocsTargetPath = process.argv[2];
@@ -30,26 +34,15 @@ fs.readdir(sourcePath, (err: any, files: string[]) => {
         throw err;
       }
 
-      // Remove the thre prefix from the title
-      const result =
-        `---` +
-        `\n` +
-        `title: ${file.replace('.md', '')}` +
-        `\n` +
-        `slug: /chat/docs/sdk/angular/services/${file.replace('.md', '')}/` +
-        `\n` +
-        `---` +
-        '\n\n' +
+      // Title and slug come from the sidebar config, so no frontmatter is added
+      const result = normalizeGeneratedDocs(
         data
           .replace(`# Class: ${file.replace('.md', '')}`, '')
-          .replace(
-            /\b(?!README)(\w+)\.md\b/g,
-            '/chat/docs/sdk/angular/services/$1'
-          )
+          .replace(/\b(?!README)(\w+)\.md\b/g, `${servicesDocsBaseUrl}/$1/`)
           .replace(/•\s/g, '')
           .replace(/▸\s/g, '')
           .replace('<T\\>', '')
-          .replace('\\', '');
+      );
 
       fs.writeFile(`${sourcePath}/${file}`, result, 'utf8', (err: any) => {
         if (err) {

normalize-generated-docs.ts

@@ -0,0 +1,84 @@
+// typedoc-plugin-markdown splits generic types into multiple code spans with escaped angle brackets (`Promise`\<`void`\>)
+// The docs site renders markdown as MDX, so these are merged into a single code span (`Promise<void>`)
+const typeGroupStart = /^(`\w+`\\?<|\\<|\\\{)/;
+
+const findEndOfTypeGroup = (line: string, start: number) => {
+  let depth = 0;
+  let i = start;
+  while (i < line.length) {
+    if (line.startsWith('=>', i)) {
+      i += 2;
+      continue;
+    }
+    if (line.startsWith('\\<', i) || line.startsWith('\\{', i)) {
+      depth++;
+      i += 2;
+      continue;
+    }
+    if (line[i] === '<' || line[i] === '{') {
+      depth++;
+    } else if (
+      line.startsWith('\\>', i) ||
+      line[i] === '>' ||
+      line[i] === '}'
+    ) {
+      depth--;
+      const length = line[i] === '\\' ? 2 : 1;
+      if (depth === 0) {
+        return i + length;
+      }
+      i += length;
+      continue;
+    }
+    i += line[i] === '\\' ? 2 : 1;
+  }
+  return -1;
+};
+
+const normalizeGenericTypes = (line: string) => {
+  const isTableRow = line.trimStart().startsWith('|');
+  let result = '';
+  let i = 0;
+  while (i < line.length) {
+    const end = typeGroupStart.test(line.slice(i))
+      ? findEndOfTypeGroup(line, i)
+      : -1;
+    if (end === -1) {
+      result += line[i];
+      i++;
+      continue;
+    }
+    const type = line
+      .slice(i, end)
+      .replace(/`/g, '')
+      .replace(/\\([<>{}])/g, '$1')
+      .replace(/\\\|/g, isTableRow ? '\\|' : '|')
+      .replace(/ {2,}/g, ' ');
+    result += '`' + type + '`';
+    i = end;
+  }
+  return (
+    result
+      // Merge intersection types into a single code span
+      .replace(/`([^`]+)` & `([^`]+)`/g, '`$1 & $2`')
+      .replace(/\\_/g, '_')
+  );
+};
+
+// v8 is the latest version, its docs are served from the unversioned URL (the same URL the links in the source code use)
+const docsBaseUrl = '/chat/docs/sdk/angular';
+
+const normalizeLinks = (line: string) =>
+  line
+    // Heading anchors don't contain $ (for example #querystate$)
+    .replace(/(\]\([^)#\s]*#[\w-]+)\$\)/g, '$1)');
+
+export const servicesDocsBaseUrl = `${docsBaseUrl}/services`;
+
+export const normalizeGeneratedDocs = (content: string) =>
+  content
+    .split('\n')
+    // typedoc emits a lone backslash as a line break in some class descriptions
+    .filter((line) => line !== '\\')
+    .map((line) => normalizeLinks(normalizeGenericTypes(line)))
+    .join('\n');