diff --git a/.github/workflows/vale-doc-lint.yml b/.github/workflows/vale-doc-lint.yml
deleted file mode 100644
index e31a29d1..00000000
--- a/.github/workflows/vale-doc-lint.yml
+++ /dev/null
@@ -1,23 +0,0 @@
-name: Check Docusaurus docs with Vale linter
-
-on: [pull_request]
-
-jobs:
-  vale:
-    name: Vale doc linter
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: errata-ai/vale-action@reviewdog
-        with:
-          version: 2.30.0
-          # added, diff_context, file, nofilter
-          filter_mode: nofilter
-          # github-pr-check, github-pr-review, github-check
-          reporter: github-pr-check
-          fail_on_error: true
-          files: docusaurus
-        env:
-          # Required, set by GitHub actions automatically:
-          # https://docs.github.com/en/actions/security-guides/automatic-token-authentication#about-the-github_token-secret
-          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
diff --git a/.github/workflows/workflow.yml b/.github/workflows/workflow.yml
index d9d532a6..eaab2c8a 100644
--- a/.github/workflows/workflow.yml
+++ b/.github/workflows/workflow.yml
@@ -60,14 +60,3 @@ jobs:
           yarn vercel pull --yes --environment=${{ github.ref == 'refs/heads/master' && 'production' || 'preview' }} --token=${{ secrets.VERCEL_TOKEN }} &&
           yarn vercel build ${{ github.ref == 'refs/heads/master' && '--prod' || '' }} --token=${{ secrets.VERCEL_TOKEN }} &&
           yarn vercel deploy ${{ github.ref == 'refs/heads/master' && '--prod' || '' }} --prebuilt --token=${{ secrets.VERCEL_TOKEN }}
-      - name: Copy docs from stream-chat-css
-        run: npm run ${{ (github.ref == 'refs/heads/master' || contains(github.head_ref, 'v5')) && 'copy-css-docs:v5' || 'copy-css-docs' }}
-      - name: Generate docs
-        run: |
-          npm run ${{ (github.ref == 'refs/heads/master' || contains(github.head_ref, 'v5')) && 'generate-docs:v5' || 'generate-docs' }}
-      - name: Push to docusaurus
-        uses: GetStream/push-stream-chat-docusaurus-action@main
-        with:
-          target-branch: ${{ (github.ref == 'refs/heads/master' || github.ref == 'refs/heads/master') && 'production' || 'staging' }}
-        env:
-          DOCUSAURUS_GH_TOKEN: ${{ secrets.DOCUSAURUS_GH_TOKEN }}
diff --git a/.styles/Google/AMPM.yml b/.styles/Google/AMPM.yml
deleted file mode 100644
index fbdc6e4f..00000000
--- a/.styles/Google/AMPM.yml
+++ /dev/null
@@ -1,9 +0,0 @@
-extends: existence
-message: "Use 'AM' or 'PM' (preceded by a space)."
-link: 'https://developers.google.com/style/word-list'
-level: error
-nonword: true
-tokens:
-  - '\d{1,2}[AP]M'
-  - '\d{1,2} ?[ap]m'
-  - '\d{1,2} ?[aApP]\.[mM]\.'
diff --git a/.styles/Google/Acronyms.yml b/.styles/Google/Acronyms.yml
deleted file mode 100644
index f41af018..00000000
--- a/.styles/Google/Acronyms.yml
+++ /dev/null
@@ -1,64 +0,0 @@
-extends: conditional
-message: "Spell out '%s', if it's unfamiliar to the audience."
-link: 'https://developers.google.com/style/abbreviations'
-level: suggestion
-ignorecase: false
-# Ensures that the existence of 'first' implies the existence of 'second'.
-first: '\b([A-Z]{3,5})\b'
-second: '(?:\b[A-Z][a-z]+ )+\(([A-Z]{3,5})\)'
-# ... with the exception of these:
-exceptions:
-  - API
-  - ASP
-  - CLI
-  - CPU
-  - CSS
-  - CSV
-  - DEBUG
-  - DOM
-  - DPI
-  - FAQ
-  - GCC
-  - GDB
-  - GET
-  - GPU
-  - GTK
-  - GUI
-  - HTML
-  - HTTP
-  - HTTPS
-  - IDE
-  - JAR
-  - JSON
-  - JSX
-  - LESS
-  - LLDB
-  - NET
-  - NOTE
-  - NVDA
-  - OSS
-  - PATH
-  - PDF
-  - PHP
-  - POST
-  - RAM
-  - REPL
-  - RSA
-  - SCM
-  - SCSS
-  - SDK
-  - SQL
-  - SSH
-  - SSL
-  - SVG
-  - TBD
-  - TCP
-  - TODO
-  - URI
-  - URL
-  - USB
-  - UTF
-  - XML
-  - XSS
-  - YAML
-  - ZIP
diff --git a/.styles/Google/Colons.yml b/.styles/Google/Colons.yml
deleted file mode 100644
index 99363fbd..00000000
--- a/.styles/Google/Colons.yml
+++ /dev/null
@@ -1,8 +0,0 @@
-extends: existence
-message: "'%s' should be in lowercase."
-link: 'https://developers.google.com/style/colons'
-nonword: true
-level: warning
-scope: sentence
-tokens:
-  - ':\s[A-Z]'
diff --git a/.styles/Google/Contractions.yml b/.styles/Google/Contractions.yml
deleted file mode 100644
index 95234987..00000000
--- a/.styles/Google/Contractions.yml
+++ /dev/null
@@ -1,30 +0,0 @@
-extends: substitution
-message: "Feel free to use '%s' instead of '%s'."
-link: 'https://developers.google.com/style/contractions'
-level: suggestion
-ignorecase: true
-action:
-  name: replace
-swap:
-  are not: aren't
-  cannot: can't
-  could not: couldn't
-  did not: didn't
-  do not: don't
-  does not: doesn't
-  has not: hasn't
-  have not: haven't
-  how is: how's
-  is not: isn't
-  it is: it's
-  should not: shouldn't
-  that is: that's
-  they are: they're
-  was not: wasn't
-  we are: we're
-  we have: we've
-  were not: weren't
-  what is: what's
-  when is: when's
-  where is: where's
-  will not: won't
diff --git a/.styles/Google/DateFormat.yml b/.styles/Google/DateFormat.yml
deleted file mode 100644
index e9d227fa..00000000
--- a/.styles/Google/DateFormat.yml
+++ /dev/null
@@ -1,9 +0,0 @@
-extends: existence
-message: "Use 'July 31, 2016' format, not '%s'."
-link: 'https://developers.google.com/style/dates-times'
-ignorecase: true
-level: error
-nonword: true
-tokens:
-  - '\d{1,2}(?:\.|/)\d{1,2}(?:\.|/)\d{4}'
-  - '\d{1,2} (?:Jan(?:uary)?|Feb(?:ruary)?|Mar(?:ch)?|Apr(?:il)|May|Jun(?:e)|Jul(?:y)|Aug(?:ust)|Sep(?:tember)?|Oct(?:ober)|Nov(?:ember)?|Dec(?:ember)?) \d{4}'
diff --git a/.styles/Google/Ellipses.yml b/.styles/Google/Ellipses.yml
deleted file mode 100644
index 1e070517..00000000
--- a/.styles/Google/Ellipses.yml
+++ /dev/null
@@ -1,9 +0,0 @@
-extends: existence
-message: "In general, don't use an ellipsis."
-link: 'https://developers.google.com/style/ellipses'
-nonword: true
-level: warning
-action:
-  name: remove
-tokens:
-  - '\.\.\.'
diff --git a/.styles/Google/EmDash.yml b/.styles/Google/EmDash.yml
deleted file mode 100644
index 1befe72a..00000000
--- a/.styles/Google/EmDash.yml
+++ /dev/null
@@ -1,12 +0,0 @@
-extends: existence
-message: "Don't put a space before or after a dash."
-link: 'https://developers.google.com/style/dashes'
-nonword: true
-level: error
-action:
-  name: edit
-  params:
-    - remove
-    - ' '
-tokens:
-  - '\s[—–]\s'
diff --git a/.styles/Google/EnDash.yml b/.styles/Google/EnDash.yml
deleted file mode 100644
index b314dc4e..00000000
--- a/.styles/Google/EnDash.yml
+++ /dev/null
@@ -1,13 +0,0 @@
-extends: existence
-message: "Use an em dash ('—') instead of '–'."
-link: 'https://developers.google.com/style/dashes'
-nonword: true
-level: error
-action:
-  name: edit
-  params:
-    - replace
-    - '-'
-    - '—'
-tokens:
-  - '–'
diff --git a/.styles/Google/Exclamation.yml b/.styles/Google/Exclamation.yml
deleted file mode 100644
index 3e15181b..00000000
--- a/.styles/Google/Exclamation.yml
+++ /dev/null
@@ -1,7 +0,0 @@
-extends: existence
-message: "Don't use exclamation points in text."
-link: 'https://developers.google.com/style/exclamation-points'
-nonword: true
-level: error
-tokens:
-  - '\w!(?:\s|$)'
diff --git a/.styles/Google/FirstPerson.yml b/.styles/Google/FirstPerson.yml
deleted file mode 100644
index 0b7b8828..00000000
--- a/.styles/Google/FirstPerson.yml
+++ /dev/null
@@ -1,13 +0,0 @@
-extends: existence
-message: "Avoid first-person pronouns such as '%s'."
-link: 'https://developers.google.com/style/pronouns#personal-pronouns'
-ignorecase: true
-level: warning
-nonword: true
-tokens:
-  - (?:^|\s)I\s
-  - (?:^|\s)I,\s
-  - \bI'm\b
-  - \bme\b
-  - \bmy\b
-  - \bmine\b
diff --git a/.styles/Google/Gender.yml b/.styles/Google/Gender.yml
deleted file mode 100644
index c8486181..00000000
--- a/.styles/Google/Gender.yml
+++ /dev/null
@@ -1,9 +0,0 @@
-extends: existence
-message: "Don't use '%s' as a gender-neutral pronoun."
-link: 'https://developers.google.com/style/pronouns#gender-neutral-pronouns'
-level: error
-ignorecase: true
-tokens:
-  - he/she
-  - s/he
-  - \(s\)he
diff --git a/.styles/Google/GenderBias.yml b/.styles/Google/GenderBias.yml
deleted file mode 100644
index 261cfb66..00000000
--- a/.styles/Google/GenderBias.yml
+++ /dev/null
@@ -1,45 +0,0 @@
-extends: substitution
-message: "Consider using '%s' instead of '%s'."
-link: 'https://developers.google.com/style/inclusive-documentation'
-ignorecase: true
-level: error
-swap:
-  (?:alumna|alumnus):          graduate
-  (?:alumnae|alumni):          graduates
-  air(?:m[ae]n|wom[ae]n):      pilot(s)
-  anchor(?:m[ae]n|wom[ae]n):   anchor(s)
-  authoress:                   author
-  camera(?:m[ae]n|wom[ae]n):   camera operator(s)
-  chair(?:m[ae]n|wom[ae]n):    chair(s)
-  congress(?:m[ae]n|wom[ae]n): member(s) of congress
-  door(?:m[ae]|wom[ae]n):      concierge(s)
-  draft(?:m[ae]n|wom[ae]n):    drafter(s)
-  fire(?:m[ae]n|wom[ae]n):     firefighter(s)
-  fisher(?:m[ae]n|wom[ae]n):   fisher(s)
-  fresh(?:m[ae]n|wom[ae]n):    first-year student(s)
-  garbage(?:m[ae]n|wom[ae]n):  waste collector(s)
-  lady lawyer:                 lawyer
-  ladylike:                    courteous
-  landlord:                    building manager
-  mail(?:m[ae]n|wom[ae]n):     mail carriers
-  man and wife:                husband and wife
-  man enough:                  strong enough
-  mankind:                     human kind
-  manmade:                     manufactured
-  manpower:                    personnel
-  men and girls:               men and women
-  middle(?:m[ae]n|wom[ae]n):   intermediary
-  news(?:m[ae]n|wom[ae]n):     journalist(s)
-  ombuds(?:man|woman):         ombuds
-  oneupmanship:                upstaging
-  poetess:                     poet
-  police(?:m[ae]n|wom[ae]n):   police officer(s)
-  repair(?:m[ae]n|wom[ae]n):   technician(s)
-  sales(?:m[ae]n|wom[ae]n):    salesperson or sales people
-  service(?:m[ae]n|wom[ae]n):  soldier(s)
-  steward(?:ess)?:             flight attendant
-  tribes(?:m[ae]n|wom[ae]n):   tribe member(s)
-  waitress:                    waiter
-  woman doctor:                doctor
-  woman scientist[s]?:         scientist(s)
-  work(?:m[ae]n|wom[ae]n):     worker(s)
diff --git a/.styles/Google/HeadingPunctuation.yml b/.styles/Google/HeadingPunctuation.yml
deleted file mode 100644
index b538be5b..00000000
--- a/.styles/Google/HeadingPunctuation.yml
+++ /dev/null
@@ -1,13 +0,0 @@
-extends: existence
-message: "Don't put a period at the end of a heading."
-link: 'https://developers.google.com/style/capitalization#capitalization-in-titles-and-headings'
-nonword: true
-level: warning
-scope: heading
-action:
-  name: edit
-  params:
-    - remove
-    - '.'
-tokens:
-  - '[a-z0-9][.]\s*$'
diff --git a/.styles/Google/Headings.yml b/.styles/Google/Headings.yml
deleted file mode 100644
index a5330133..00000000
--- a/.styles/Google/Headings.yml
+++ /dev/null
@@ -1,29 +0,0 @@
-extends: capitalization
-message: "'%s' should use sentence-style capitalization."
-link: 'https://developers.google.com/style/capitalization#capitalization-in-titles-and-headings'
-level: warning
-scope: heading
-match: $sentence
-indicators:
-  - ':'
-exceptions:
-  - Azure
-  - CLI
-  - Code
-  - Cosmos
-  - Docker
-  - Emmet
-  - gRPC
-  - I
-  - Kubernetes
-  - Linux
-  - macOS
-  - Marketplace
-  - MongoDB
-  - REPL
-  - Studio
-  - TypeScript
-  - URLs
-  - Visual
-  - VS
-  - Windows
diff --git a/.styles/Google/Latin.yml b/.styles/Google/Latin.yml
deleted file mode 100644
index d91700de..00000000
--- a/.styles/Google/Latin.yml
+++ /dev/null
@@ -1,11 +0,0 @@
-extends: substitution
-message: "Use '%s' instead of '%s'."
-link: 'https://developers.google.com/style/abbreviations'
-ignorecase: true
-level: error
-nonword: true
-action:
-  name: replace
-swap:
-  '\b(?:eg|e\.g\.)[\s,]': for example
-  '\b(?:ie|i\.e\.)[\s,]': that is
diff --git a/.styles/Google/LyHyphens.yml b/.styles/Google/LyHyphens.yml
deleted file mode 100644
index ac8f557a..00000000
--- a/.styles/Google/LyHyphens.yml
+++ /dev/null
@@ -1,14 +0,0 @@
-extends: existence
-message: "'%s' doesn't need a hyphen."
-link: 'https://developers.google.com/style/hyphens'
-level: error
-ignorecase: false
-nonword: true
-action:
-  name: edit
-  params:
-    - replace
-    - '-'
-    - ' '
-tokens:
-  - '\s[^\s-]+ly-'
diff --git a/.styles/Google/OptionalPlurals.yml b/.styles/Google/OptionalPlurals.yml
deleted file mode 100644
index f858ea6f..00000000
--- a/.styles/Google/OptionalPlurals.yml
+++ /dev/null
@@ -1,12 +0,0 @@
-extends: existence
-message: "Don't use plurals in parentheses such as in '%s'."
-link: 'https://developers.google.com/style/plurals-parentheses'
-level: error
-nonword: true
-action:
-  name: edit
-  params:
-    - remove
-    - '(s)'
-tokens:
-  - '\b\w+\(s\)'
diff --git a/.styles/Google/Ordinal.yml b/.styles/Google/Ordinal.yml
deleted file mode 100644
index d1ac7d27..00000000
--- a/.styles/Google/Ordinal.yml
+++ /dev/null
@@ -1,7 +0,0 @@
-extends: existence
-message: "Spell out all ordinal numbers ('%s') in text."
-link: 'https://developers.google.com/style/numbers'
-level: error
-nonword: true
-tokens:
-  - \d+(?:st|nd|rd|th)
diff --git a/.styles/Google/OxfordComma.yml b/.styles/Google/OxfordComma.yml
deleted file mode 100644
index b9ba21eb..00000000
--- a/.styles/Google/OxfordComma.yml
+++ /dev/null
@@ -1,7 +0,0 @@
-extends: existence
-message: "Use the Oxford comma in '%s'."
-link: 'https://developers.google.com/style/commas'
-scope: sentence
-level: warning
-tokens:
-  - '(?:[^,]+,){1,}\s\w+\s(?:and|or)'
diff --git a/.styles/Google/Parens.yml b/.styles/Google/Parens.yml
deleted file mode 100644
index 3b8711d0..00000000
--- a/.styles/Google/Parens.yml
+++ /dev/null
@@ -1,7 +0,0 @@
-extends: existence
-message: "Use parentheses judiciously."
-link: 'https://developers.google.com/style/parentheses'
-nonword: true
-level: suggestion
-tokens:
-  - '\(.+\)'
diff --git a/.styles/Google/Passive.yml b/.styles/Google/Passive.yml
deleted file mode 100644
index 3265890e..00000000
--- a/.styles/Google/Passive.yml
+++ /dev/null
@@ -1,184 +0,0 @@
-extends: existence
-link: 'https://developers.google.com/style/voice'
-message: "In general, use active voice instead of passive voice ('%s')."
-ignorecase: true
-level: suggestion
-raw:
-  - \b(am|are|were|being|is|been|was|be)\b\s*
-tokens:
-  - '[\w]+ed'
-  - awoken
-  - beat
-  - become
-  - been
-  - begun
-  - bent
-  - beset
-  - bet
-  - bid
-  - bidden
-  - bitten
-  - bled
-  - blown
-  - born
-  - bought
-  - bound
-  - bred
-  - broadcast
-  - broken
-  - brought
-  - built
-  - burnt
-  - burst
-  - cast
-  - caught
-  - chosen
-  - clung
-  - come
-  - cost
-  - crept
-  - cut
-  - dealt
-  - dived
-  - done
-  - drawn
-  - dreamt
-  - driven
-  - drunk
-  - dug
-  - eaten
-  - fallen
-  - fed
-  - felt
-  - fit
-  - fled
-  - flown
-  - flung
-  - forbidden
-  - foregone
-  - forgiven
-  - forgotten
-  - forsaken
-  - fought
-  - found
-  - frozen
-  - given
-  - gone
-  - gotten
-  - ground
-  - grown
-  - heard
-  - held
-  - hidden
-  - hit
-  - hung
-  - hurt
-  - kept
-  - knelt
-  - knit
-  - known
-  - laid
-  - lain
-  - leapt
-  - learnt
-  - led
-  - left
-  - lent
-  - let
-  - lighted
-  - lost
-  - made
-  - meant
-  - met
-  - misspelt
-  - mistaken
-  - mown
-  - overcome
-  - overdone
-  - overtaken
-  - overthrown
-  - paid
-  - pled
-  - proven
-  - put
-  - quit
-  - read
-  - rid
-  - ridden
-  - risen
-  - run
-  - rung
-  - said
-  - sat
-  - sawn
-  - seen
-  - sent
-  - set
-  - sewn
-  - shaken
-  - shaven
-  - shed
-  - shod
-  - shone
-  - shorn
-  - shot
-  - shown
-  - shrunk
-  - shut
-  - slain
-  - slept
-  - slid
-  - slit
-  - slung
-  - smitten
-  - sold
-  - sought
-  - sown
-  - sped
-  - spent
-  - spilt
-  - spit
-  - split
-  - spoken
-  - spread
-  - sprung
-  - spun
-  - stolen
-  - stood
-  - stridden
-  - striven
-  - struck
-  - strung
-  - stuck
-  - stung
-  - stunk
-  - sung
-  - sunk
-  - swept
-  - swollen
-  - sworn
-  - swum
-  - swung
-  - taken
-  - taught
-  - thought
-  - thrived
-  - thrown
-  - thrust
-  - told
-  - torn
-  - trodden
-  - understood
-  - upheld
-  - upset
-  - wed
-  - wept
-  - withheld
-  - withstood
-  - woken
-  - won
-  - worn
-  - wound
-  - woven
-  - written
-  - wrung
diff --git a/.styles/Google/Periods.yml b/.styles/Google/Periods.yml
deleted file mode 100644
index d24a6a6c..00000000
--- a/.styles/Google/Periods.yml
+++ /dev/null
@@ -1,7 +0,0 @@
-extends: existence
-message: "Don't use periods with acronyms or initialisms such as '%s'."
-link: 'https://developers.google.com/style/abbreviations'
-level: error
-nonword: true
-tokens:
-  - '\b(?:[A-Z]\.){3,}'
diff --git a/.styles/Google/Quotes.yml b/.styles/Google/Quotes.yml
deleted file mode 100644
index 3cb6f1ab..00000000
--- a/.styles/Google/Quotes.yml
+++ /dev/null
@@ -1,7 +0,0 @@
-extends: existence
-message: "Commas and periods go inside quotation marks."
-link: 'https://developers.google.com/style/quotation-marks'
-level: error
-nonword: true
-tokens:
-  - '"[^"]+"[.,?]'
diff --git a/.styles/Google/Ranges.yml b/.styles/Google/Ranges.yml
deleted file mode 100644
index 3ec045e7..00000000
--- a/.styles/Google/Ranges.yml
+++ /dev/null
@@ -1,7 +0,0 @@
-extends: existence
-message: "Don't add words such as 'from' or 'between' to describe a range of numbers."
-link: 'https://developers.google.com/style/hyphens'
-nonword: true
-level: warning
-tokens:
-  - '(?:from|between)\s\d+\s?-\s?\d+'
diff --git a/.styles/Google/Semicolons.yml b/.styles/Google/Semicolons.yml
deleted file mode 100644
index bb8b85b4..00000000
--- a/.styles/Google/Semicolons.yml
+++ /dev/null
@@ -1,8 +0,0 @@
-extends: existence
-message: "Use semicolons judiciously."
-link: 'https://developers.google.com/style/semicolons'
-nonword: true
-scope: sentence
-level: suggestion
-tokens:
-  - ';'
diff --git a/.styles/Google/Slang.yml b/.styles/Google/Slang.yml
deleted file mode 100644
index 63f4c248..00000000
--- a/.styles/Google/Slang.yml
+++ /dev/null
@@ -1,11 +0,0 @@
-extends: existence
-message: "Don't use internet slang abbreviations such as '%s'."
-link: 'https://developers.google.com/style/abbreviations'
-ignorecase: true
-level: error
-tokens:
-  - 'tl;dr'
-  - ymmv
-  - rtfm
-  - imo
-  - fwiw
diff --git a/.styles/Google/Spacing.yml b/.styles/Google/Spacing.yml
deleted file mode 100644
index 27f7ca2b..00000000
--- a/.styles/Google/Spacing.yml
+++ /dev/null
@@ -1,8 +0,0 @@
-extends: existence
-message: "'%s' should have one space."
-link: 'https://developers.google.com/style/sentence-spacing'
-level: error
-nonword: true
-tokens:
-  - '[a-z][.?!] {2,}[A-Z]'
-  - '[a-z][.?!][A-Z]'
diff --git a/.styles/Google/Spelling.yml b/.styles/Google/Spelling.yml
deleted file mode 100644
index 57acb884..00000000
--- a/.styles/Google/Spelling.yml
+++ /dev/null
@@ -1,8 +0,0 @@
-extends: existence
-message: "In general, use American spelling instead of '%s'."
-link: 'https://developers.google.com/style/spelling'
-ignorecase: true
-level: warning
-tokens:
-  - '(?:\w+)nised?'
-  - '(?:\w+)logue'
diff --git a/.styles/Google/Units.yml b/.styles/Google/Units.yml
deleted file mode 100644
index 379fad6b..00000000
--- a/.styles/Google/Units.yml
+++ /dev/null
@@ -1,8 +0,0 @@
-extends: existence
-message: "Put a nonbreaking space between the number and the unit in '%s'."
-link: 'https://developers.google.com/style/units-of-measure'
-nonword: true
-level: error
-tokens:
-  - \d+(?:B|kB|MB|GB|TB)
-  - \d+(?:ns|ms|s|min|h|d)
diff --git a/.styles/Google/We.yml b/.styles/Google/We.yml
deleted file mode 100644
index c7ac7d36..00000000
--- a/.styles/Google/We.yml
+++ /dev/null
@@ -1,11 +0,0 @@
-extends: existence
-message: "Try to avoid using first-person plural like '%s'."
-link: 'https://developers.google.com/style/pronouns#personal-pronouns'
-level: warning
-ignorecase: true
-tokens:
-  - we
-  - we'(?:ve|re)
-  - ours?
-  - us
-  - let's
diff --git a/.styles/Google/Will.yml b/.styles/Google/Will.yml
deleted file mode 100644
index 128a9183..00000000
--- a/.styles/Google/Will.yml
+++ /dev/null
@@ -1,7 +0,0 @@
-extends: existence
-message: "Avoid using '%s'."
-link: 'https://developers.google.com/style/tense'
-ignorecase: true
-level: warning
-tokens:
-  - will
diff --git a/.styles/Google/WordList.yml b/.styles/Google/WordList.yml
deleted file mode 100644
index bb711517..00000000
--- a/.styles/Google/WordList.yml
+++ /dev/null
@@ -1,80 +0,0 @@
-extends: substitution
-message: "Use '%s' instead of '%s'."
-link: 'https://developers.google.com/style/word-list'
-level: warning
-ignorecase: false
-action:
-  name: replace
-swap:
-  '(?:API Console|dev|developer) key': API key
-  '(?:cell ?phone|smart ?phone)': phone|mobile phone
-  '(?:dev|developer|APIs) console': API console
-  '(?:e-mail|Email|E-mail)': email
-  '(?:file ?path|path ?name)': path
-  '(?:kill|terminate|abort)': stop|exit|cancel|end
-  '(?:OAuth ?2|Oauth)': OAuth 2.0
-  '(?:ok|Okay)': OK|okay
-  '(?:WiFi|wifi)': Wi-Fi
-  '[\.]+apk': APK
-  '3\-D': 3D
-  'Google (?:I\-O|IO)': Google I/O
-  'tap (?:&|and) hold': touch & hold
-  'un(?:check|select)': clear
-  above: preceding
-  account name: username
-  action bar: app bar
-  admin: administrator
-  Ajax: AJAX
-  Android device: Android-powered device
-  android: Android
-  API explorer: APIs Explorer
-  application: app
-  approx\.: approximately
-  authN: authentication
-  authZ: authorization
-  autoupdate: automatically update
-  cellular data: mobile data
-  cellular network: mobile network
-  chapter: documents|pages|sections
-  check box: checkbox
-  check: select
-  CLI: command-line tool
-  click on: click|click in
-  Cloud: Google Cloud Platform|GCP
-  Container Engine: Kubernetes Engine
-  content type: media type
-  curated roles: predefined roles
-  data are: data is
-  Developers Console: Google API Console|API Console
-  disabled?: turn off|off
-  ephemeral IP address: ephemeral external IP address
-  fewer data: less data
-  file name: filename
-  firewalls: firewall rules
-  functionality: capability|feature
-  Google account: Google Account
-  Google accounts: Google Accounts
-  Googling: search with Google
-  grayed-out: unavailable
-  HTTPs: HTTPS
-  in order to: to
-  ingest: import|load
-  k8s: Kubernetes
-  long press: touch & hold
-  network IP address: internal IP address
-  omnibox: address bar
-  open-source: open source
-  overview screen: recents screen
-  regex: regular expression
-  SHA1: SHA-1|HAS-SHA1
-  sign into: sign in to
-  sign-?on: single sign-on
-  static IP address: static external IP address
-  stylesheet: style sheet
-  synch: sync
-  tablename: table name
-  tablet: device
-  touch: tap
-  url:  URL
-  vs\.: versus
-  World Wide Web: web
diff --git a/.styles/Google/meta.json b/.styles/Google/meta.json
deleted file mode 100644
index a5da2a84..00000000
--- a/.styles/Google/meta.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "feed": "https://github.com/errata-ai/Google/releases.atom",
-  "vale_version": ">=1.0.0"
-}
diff --git a/.styles/Google/vocab.txt b/.styles/Google/vocab.txt
deleted file mode 100644
index e69de29b..00000000
diff --git a/.styles/Vocab/Base/accept.txt b/.styles/Vocab/Base/accept.txt
deleted file mode 100644
index da1cddc0..00000000
--- a/.styles/Vocab/Base/accept.txt
+++ /dev/null
@@ -1,8 +0,0 @@
-Angular
-Overwatch
-Fortnite
-API
-SDK
-performant
-textarea
-angular
diff --git a/.styles/Vocab/Base/reject.txt b/.styles/Vocab/Base/reject.txt
deleted file mode 100644
index e69de29b..00000000
diff --git a/README.md b/README.md
index 776410b4..8072cda7 100644
--- a/README.md
+++ b/README.md
@@ -133,9 +133,3 @@ STREAM_USER_TOKEN=<Your user token>
 ```
 
 Run `npm install` in the root of the project. You can use the `npm run start:dev` command to start the SampleApp with automatic reloading.
-
-A note about the documentation:
-
-- Documentations for Angular services are generated from doc comments in the source files (not under source control)
-- Documentations for inputs and outputs of Angular components are generated from doc comments in the source files (not under source control)
-- Everything else in the documentation is written in `mdx` files located in the `docusaurus` folder
diff --git a/docusaurus/angular-docusaurus-dontent-docs.plugin.js b/docusaurus/angular-docusaurus-dontent-docs.plugin.js
deleted file mode 100644
index f2fb15d4..00000000
--- a/docusaurus/angular-docusaurus-dontent-docs.plugin.js
+++ /dev/null
@@ -1,20 +0,0 @@
-module.exports = {
-  plugins: [
-    [
-      "@docusaurus/plugin-content-docs",
-      {
-        lastVersion: "current",
-        versions: {
-          current: {
-            label: "v5",
-          },
-          4: {
-            label: "v4",
-            banner: "unmaintained",
-            path: "4",
-          },
-        },
-      },
-    ],
-  ],
-};
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/angular-logo.png b/docusaurus/angular_versioned_docs/version-4/assets/angular-logo.png
deleted file mode 100644
index 6fe29fad..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/angular-logo.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/attachment-preview-list-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/attachment-preview-list-screenshot.png
deleted file mode 100644
index 0a148e08..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/attachment-preview-list-screenshot.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/attachment-size-warning.png b/docusaurus/angular_versioned_docs/version-4/assets/attachment-size-warning.png
deleted file mode 100644
index 6f88c5a9..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/attachment-size-warning.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/attachments-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/attachments-screenshot.png
deleted file mode 100644
index f12f8d52..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/attachments-screenshot.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/channel-header-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/channel-header-screenshot.png
deleted file mode 100644
index e4f7c3bd..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/channel-header-screenshot.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/channel-header-with-menu-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/channel-header-with-menu-screenshot.png
deleted file mode 100644
index 24973cd0..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/channel-header-with-menu-screenshot.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/channel-invites-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/channel-invites-screenshot.png
deleted file mode 100644
index 3a15dde9..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/channel-invites-screenshot.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/channel-preview-info.png b/docusaurus/angular_versioned_docs/version-4/assets/channel-preview-info.png
deleted file mode 100644
index 21aba239..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/channel-preview-info.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/channel-preview.png b/docusaurus/angular_versioned_docs/version-4/assets/channel-preview.png
deleted file mode 100644
index 0e695c6b..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/channel-preview.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/chat-ui-layout-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/chat-ui-layout-screenshot.png
deleted file mode 100644
index edf1655a..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/chat-ui-layout-screenshot.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/custom-dark-theme-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/custom-dark-theme-screenshot.png
deleted file mode 100644
index 26ca814e..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/custom-dark-theme-screenshot.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/custom-light-theme-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/custom-light-theme-screenshot.png
deleted file mode 100644
index 9cea0f6a..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/custom-light-theme-screenshot.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/custom-textarea-after.png b/docusaurus/angular_versioned_docs/version-4/assets/custom-textarea-after.png
deleted file mode 100644
index 7eca78e7..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/custom-textarea-after.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/custom-textarea-before.png b/docusaurus/angular_versioned_docs/version-4/assets/custom-textarea-before.png
deleted file mode 100644
index 113c99ac..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/custom-textarea-before.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/dark-theme-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/dark-theme-screenshot.png
deleted file mode 100644
index 0bfec89d..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/dark-theme-screenshot.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/emoji-picker-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/emoji-picker-screenshot.png
deleted file mode 100644
index 893b6a1c..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/emoji-picker-screenshot.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/firebase-console-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/firebase-console-screenshot.png
deleted file mode 100644
index 432eaf46..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/firebase-console-screenshot.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/image-sizing-screenshot-1.png b/docusaurus/angular_versioned_docs/version-4/assets/image-sizing-screenshot-1.png
deleted file mode 100644
index ea73ba9d..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/image-sizing-screenshot-1.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/image-sizing-screenshot-2.png b/docusaurus/angular_versioned_docs/version-4/assets/image-sizing-screenshot-2.png
deleted file mode 100644
index 4c327afe..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/image-sizing-screenshot-2.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/image-sizing-screenshot-3.png b/docusaurus/angular_versioned_docs/version-4/assets/image-sizing-screenshot-3.png
deleted file mode 100644
index 38ec296a..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/image-sizing-screenshot-3.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/invite-button-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/invite-button-screenshot.png
deleted file mode 100644
index 4452360f..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/invite-button-screenshot.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/invite-modal1-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/invite-modal1-screenshot.png
deleted file mode 100644
index 6ff9d2bf..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/invite-modal1-screenshot.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/invite-modal2-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/invite-modal2-screenshot.png
deleted file mode 100644
index 2c417ed3..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/invite-modal2-screenshot.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/ionic-screenshot1.png b/docusaurus/angular_versioned_docs/version-4/assets/ionic-screenshot1.png
deleted file mode 100644
index 9d94cc69..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/ionic-screenshot1.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/light-theme-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/light-theme-screenshot.png
deleted file mode 100644
index 63109a45..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/light-theme-screenshot.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/mention-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/mention-screenshot.png
deleted file mode 100644
index d403737a..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/mention-screenshot.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/message-actions-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/message-actions-screenshot.png
deleted file mode 100644
index f688bda8..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/message-actions-screenshot.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/message-bounce-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/message-bounce-screenshot.png
deleted file mode 100644
index 4449e270..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/message-bounce-screenshot.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/message-reactions-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/message-reactions-screenshot.png
deleted file mode 100644
index ec51fb92..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/message-reactions-screenshot.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/message-reactions-selector-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/message-reactions-selector-screenshot.png
deleted file mode 100644
index 82c2a427..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/message-reactions-selector-screenshot.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/message-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/message-screenshot.png
deleted file mode 100644
index 9f453159..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/message-screenshot.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/messages-with-grouping-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/messages-with-grouping-screenshot.png
deleted file mode 100644
index 8e2d590e..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/messages-with-grouping-screenshot.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/messages-without-groups-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/messages-without-groups-screenshot.png
deleted file mode 100644
index 408fcb6d..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/messages-without-groups-screenshot.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/pin-action-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/pin-action-screenshot.png
deleted file mode 100644
index 6ab6b30c..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/pin-action-screenshot.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/pinned-message-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/pinned-message-screenshot.png
deleted file mode 100644
index 639cfba9..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/pinned-message-screenshot.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/reaction-details.png b/docusaurus/angular_versioned_docs/version-4/assets/reaction-details.png
deleted file mode 100644
index c30d2841..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/reaction-details.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-chat-ui-layout-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-chat-ui-layout-screenshot.png
deleted file mode 100644
index 240d6a1e..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-chat-ui-layout-screenshot.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-chat-ui-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-chat-ui-screenshot.png
deleted file mode 100644
index edf1655a..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-chat-ui-screenshot.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-chat-ui-theme-customization-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-chat-ui-theme-customization-screenshot.png
deleted file mode 100644
index 82451bdf..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-chat-ui-theme-customization-screenshot.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-custom-avatar-color-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-custom-avatar-color-screenshot.png
deleted file mode 100644
index f1cb121d..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-custom-avatar-color-screenshot.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-custom-dark-theme-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-custom-dark-theme-screenshot.png
deleted file mode 100644
index 7651965a..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-custom-dark-theme-screenshot.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-dark-ui-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-dark-ui-screenshot.png
deleted file mode 100644
index e871cfcd..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-dark-ui-screenshot.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-message-color-customization-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-message-color-customization-screenshot.png
deleted file mode 100644
index dd3f0d2a..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-message-color-customization-screenshot.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-message-color-customization2-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-message-color-customization2-screenshot.png
deleted file mode 100644
index 27a486a1..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-message-color-customization2-screenshot.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-message-color-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-message-color-screenshot.png
deleted file mode 100644
index 2c9d1650..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-message-color-screenshot.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-rtl-layout-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-rtl-layout-screenshot.png
deleted file mode 100644
index a83946ca..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-rtl-layout-screenshot.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-square-theme-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-square-theme-screenshot.png
deleted file mode 100644
index 8afae493..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/stream-chat-css-square-theme-screenshot.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/stream-logo.png b/docusaurus/angular_versioned_docs/version-4/assets/stream-logo.png
deleted file mode 100644
index 35ae302d..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/stream-logo.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/voice-recording-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/voice-recording-screenshot.png
deleted file mode 100644
index 8b139081..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/voice-recording-screenshot.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/assets/wavebar-screenshot.png b/docusaurus/angular_versioned_docs/version-4/assets/wavebar-screenshot.png
deleted file mode 100644
index fbc17234..00000000
Binary files a/docusaurus/angular_versioned_docs/version-4/assets/wavebar-screenshot.png and /dev/null differ
diff --git a/docusaurus/angular_versioned_docs/version-4/basics/_category_.json b/docusaurus/angular_versioned_docs/version-4/basics/_category_.json
deleted file mode 100644
index daec3e16..00000000
--- a/docusaurus/angular_versioned_docs/version-4/basics/_category_.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "label": "Basics",
-  "position": 1
-}
diff --git a/docusaurus/angular_versioned_docs/version-4/basics/angular-version-support.mdx b/docusaurus/angular_versioned_docs/version-4/basics/angular-version-support.mdx
deleted file mode 100644
index 70003637..00000000
--- a/docusaurus/angular_versioned_docs/version-4/basics/angular-version-support.mdx
+++ /dev/null
@@ -1,7 +0,0 @@
----
-id: angular-version-support
-title: Angular version support
-sidebar_position: 2
----
-
-The current version of the SDK supports all Angular versions starting from Angular 12. However since [Angular itself doesn't support versions 12-14 anymore](https://angular.io/guide/releases#actively-supported-versions) the SDK will drop support for these in Q2 2024 (this will be released in a major release). Moving forward our version support policy will be matched more closely with the Angular's official [support window](https://angular.io/guide/releases#support-window). You can update your Angular application following the official [Angular update guide](https://update.angular.io/).
diff --git a/docusaurus/angular_versioned_docs/version-4/basics/overview.mdx b/docusaurus/angular_versioned_docs/version-4/basics/overview.mdx
deleted file mode 100644
index 4ec2aac9..00000000
--- a/docusaurus/angular_versioned_docs/version-4/basics/overview.mdx
+++ /dev/null
@@ -1,59 +0,0 @@
----
-id: overview
-sidebar_position: 1
-slug: /
-title: Overview
----
-
-Building on top of the Stream Chat API, the Stream Chat Angular component library includes everything you need to build feature-rich and high-functioning chat user experiences out of the box.
-The library includes an extensive set of performant and customizable Angular components which allow you to get started quickly with little to no plumbing required.
-Use cases include team and social messaging and customer support. The library supports:
-
-- Rich media messages
-- Reactions
-- Image and file uploads
-- Read state
-- Channel and message lists
-- Threads
-
-## Architecture
-
-The library contains a set of components that contain all of the necessary features to build a performant chat UI. However, it is also possible to provide your own custom components instead of the built-in ones.
-
-If you want to, you can build your own chat UI from scratch but still take advantage of the library by using our services.
-
-The left navigation will guide you to the various documentation sections for information on everything regarding our robust component library. Check out the instructions below for adding the library to your Angular project.
-
-## Installation
-
-We recommend using the component library through a package manager. Stream Chat Angular is based on top of Stream's [JavaScript Client](https://getstream.io/chat/docs/javascript/?language=javascript).
-
-### Install with NPM
-
-Run the following command if you are using **Angular 16** or **Angular 15**:
-
-```shell
-npm install stream-chat-angular stream-chat @ngx-translate/core
-```
-
-Run the following command if you are using **Angular 14**:
-
-```shell
-npm install stream-chat-angular stream-chat @ngx-translate/core ngx-popperjs@14
-```
-
-Run the following command if you are using **Angular 13**:
-
-```shell
-npm install stream-chat-angular stream-chat @ngx-translate/core angular-mentions@1.4.0 ngx-popperjs@13 --legacy-peer-deps
-```
-
-Run this command if you are using **Angular 12**:
-
-```shell
-npm install stream-chat-angular stream-chat @ngx-translate/core angular-mentions@1.4.0 ngx-popperjs@12 --legacy-peer-deps
-```
-
-## Tutorial
-
-Follow our [tutorial](https://getstream.io/chat/angular/tutorial/) and build your first Stream Angular chat application.
diff --git a/docusaurus/angular_versioned_docs/version-4/basics/upgrade-v2.mdx b/docusaurus/angular_versioned_docs/version-4/basics/upgrade-v2.mdx
deleted file mode 100644
index cf257faf..00000000
--- a/docusaurus/angular_versioned_docs/version-4/basics/upgrade-v2.mdx
+++ /dev/null
@@ -1,119 +0,0 @@
----
-id: upgrade-v2
-title: Upgrade from v2
----
-
-## About v3
-
-This version's main focus was to enhance the customizability of the SDK, the two main features are:
-
-- there are many new customization points where you can provide your own template to override the default UI - our [customization guide](../concepts/customization.mdx) covers this topic in detail
-- you can take advantage of TypeScript generics to define custom fields for messages, message reactions, attachments, commands, channels or events - our [generics guide](../concepts/generics.mdx) explain this topic in more details
-
-Below you can find the list of breaking changes and instructions on how to update your code.
-
-## Peer dependencies
-
-### stream-chat
-
-Upgrade to stream-chat `^6.4.0`.
-
-You might need to update your code if you created custom components/services that used `stream-chat` in your application.
-
-The biggest change is that generic parameters were refactored into a single generic parameter, this has two major implications:
-
-- If you used generic parameters for handling messages, message reactions, attachments, commands, channels or events you have to change those generic parameters, the SDK uses the [`DefaultStreamChatGenerics`](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/types.ts) parameter instead of the individual `DefaultAttachmentType`, `DefaultChannelType`, `DefaultCommandType`, `DefaultEventType` `DefaultMessageType`, `DefaultReactionType` and `DefaultUserType` parameters.
-- If you are interacting with the `ChannelService` or `ChatClientService` you'll have to provide the [`DefaultStreamChatGenerics`](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/types.ts) parameter (or a descended) for message reactions, attachments, commands, channels or events (you don't need to provide it for messages as it's already part of the [`StreamMessage`](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/types.ts) class)
-
-Our [generics guide](../concepts/generics.mdx) explains this topic in more details.
-
-You can find the full list of breaking changes in stream-chat [v5](https://github.com/GetStream/stream-chat-js/releases/tag/v5.0.0) and [v6](https://github.com/GetStream/stream-chat-js/releases/tag/v6.0.0) on GitHub.
-
-#### Angular 13
-
-Run the following command to upgrade if you're using Angular 13:
-
-```
-npm install stream-chat@6.4.0 stream-chat-angular
-```
-
-#### Angular 12
-
-Run the following command to upgrade if you're using Angular 12:
-
-```
-npm install stream-chat@6.4.0 stream-chat-angular@3 --legacy-peer-deps
-```
-
-### stream-chat-css
-
-You can drop the `@stream-io/stream-chat-css` dependency because going forward `stream-chat-angular` will encapsulate the library.
-
-Rewrite your stylesheet imports to this:
-
-`~stream-chat-angular/src/assets/styles/scss/index.scss`
-
-Or this if you were using CSS:
-
-`~stream-chat-angular/src/assets/styles/css/index.css`
-
-It's still possible to individually import stylesheets you just have to replace the `~@stream-io/stream-chat-css/dist` prefix with `~stream-chat-angular/src/assets/styles`.
-
-## Inputs removed in favor of channel capabilities
-
-The following inputs are removed:
-
-| Component/service                                                        | Input name                   | Replacement                                                                                                                                                                                                                                                                                       |
-| ------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [`MessageListComponent`](../components/MessageListComponent.mdx)         | `enabledMessageActionsInput` | Use our [permission framework](https://getstream.io/chat/docs/javascript/chat_permission_policies/?language=javascript&q=slow%20mode) to control what actions are available to different users                                                                                                    |
-| [`MessageListComponent`](../components/MessageListComponent.mdx)         | `areReactionsEnabled`        | Use our [permission framework](https://getstream.io/chat/docs/javascript/chat_permission_policies/?language=javascript&q=slow%20mode) to control what actions are available to different users                                                                                                    |
-| [`MessageInputConfigService`](../services/MessageInputConfigService.mdx) | `acceptedFileTypes`          | Use [application settings](https://getstream.io/chat/docs/javascript/app_setting_overview/?language=javascript#file-uploads) to control the accepted file types                                                                                                                                   |
-| [`MessageInputComponent`](../components/MessageInputComponent.mdx)       | `acceptedFileTypes`          | Use [application settings](https://getstream.io/chat/docs/javascript/app_setting_overview/?language=javascript#file-uploads) to control the accepted file types                                                                                                                                   |
-| [`MessageComponent`](../components/MessageComponent.mdx)                 | `areReactionsEnabled`        | Use our [permission framework](https://getstream.io/chat/docs/javascript/chat_permission_policies/?language=javascript&q=slow%20mode) to control what actions are available to different users. Please note that existing reactions of a message will be displayed, even if reacting is disabled. |
-| [`MessageComponent`](../components/MessageComponent.mdx)                 | `canReactToMessage`          | Use our [permission framework](https://getstream.io/chat/docs/javascript/chat_permission_policies/?language=javascript&q=slow%20mode) to control what actions are available to different users. Please note that existing reactions of a message will be displayed, even if reacting is disabled. |
-| [`MessageComponent`](../components/MessageComponent.mdx)                 | `canReceiveReadEvents`       | Use our [permission framework](https://getstream.io/chat/docs/javascript/chat_permission_policies/?language=javascript&q=slow%20mode) to control what actions are available to different users                                                                                                    |
-
-## Centralized customizations
-
-| Description                                                 | Old option                                                      | New option                                                                                          |
-| ----------------------------------------------------------- | --------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
-| The autocomplete list item template for mentioning users    | `AutocompleteTextareaComponent.mentionAutocompleteItemTemplate` | [`CustomTemplatesService.mentionAutocompleteItemTemplate$`](../services/CustomTemplatesService.mdx) |
-| The autocomplete list item template for commands            | `AutocompleteTextareaComponent.commandAutocompleteItemTemplate` | [`CustomTemplatesService.commandAutocompleteItemTemplate$`](../services/CustomTemplatesService.mdx) |
-| Item in the channel list                                    | `ChannelListComponent.customChannelPreviewTemplate`             | [`CustomTemplatesService.customChannelPreviewTemplate$`](../services/CustomTemplatesService.mdx)    |
-| The message input template used when editing a message      | `MessageActionsBoxComponent.messageInputTemplate`               | [`CustomTemplatesService.messageInputTemplate$`](../services/CustomTemplatesService.mdx)            |
-| The message input template used when editing a message      | `MessageComponent.messageInputTemplate`                         | [`CustomTemplatesService.messageInputTemplate$`](../services/CustomTemplatesService.mdx)            |
-| The template used for displaying a mention inside a message | `MessageComponent.mentionTemplate`                              | [`CustomTemplatesService.mentionTemplate$`](../services/CustomTemplatesService.mdx)                 |
-| The autocomplete list item template for mentioning users    | `MessageInputComponent.mentionAutocompleteItemTemplate`         | [`CustomTemplatesService.mentionAutocompleteItemTemplate$`](../services/CustomTemplatesService.mdx) |
-| The autocomplete list item template for commands            | `MessageInputComponent.commandAutocompleteItemTemplate`         | [`CustomTemplatesService.commandAutocompleteItemTemplate$`](../services/CustomTemplatesService.mdx) |
-| The template for emoji picker                               | `MessageInputComponent.emojiPickerTemplate$`                    | [`CustomTemplatesService.emojiPickerTemplate$`](../services/CustomTemplatesService.mdx)             |
-| The template used to display a message in the message list  | `MessageListComponent.messageTemplate`                          | [`CustomTemplatesService.messageTemplate$ `](../services/CustomTemplatesService.mdx)                |
-| The message input template used when editing a message      | `MessageListComponent.messageInputTemplate`                     | [`CustomTemplatesService.messageInputTemplate$`](../services/CustomTemplatesService.mdx)            |
-| The template used for displaying a mention inside a message | `MessageListComponent.mentionTemplate`                          | [`CustomTemplatesService.mentionTemplate$`](../services/CustomTemplatesService.mdx)                 |
-| The typing indicator template used in the message list      | `MessageListComponent.typingIndicatorTemplate`                  | [`CustomTemplatesService.typingIndicatorTemplate$`](../services/CustomTemplatesService.mdx)         |
-| The typing indicator template used in the message list      | `MessageReactionsComponent.typingIndicatorTemplate`             | [`CustomTemplatesService.typingIndicatorTemplate$`](../services/CustomTemplatesService.mdx)         |
-| The autocomplete list item template for commands            | `MessageInputConfigService.commandAutocompleteItemTemplate`     | [`CustomTemplatesService.commandAutocompleteItemTemplate$`](../services/CustomTemplatesService.mdx) |
-| The autocomplete list item template for mentioning users    | `MessageInputConfigService.mentionAutocompleteItemTemplate`     | [`CustomTemplatesService.mentionAutocompleteItemTemplate$`](../services/CustomTemplatesService.mdx) |
-| The template for emoji picker                               | `MessageInputConfigService.emojiPickerTemplate`                 | [`CustomTemplatesService.emojiPickerTemplate$`](../services/CustomTemplatesService.mdx)             |
-| The template for channel actions                            | `ChannelHeaderComponent.channelActionsTemplate`                 | [`CustomTemplatesService.channelActionsTemplate$`](../services/CustomTemplatesService.mdx)          |
-
-## `ChatClient.notification$` renamed to `events$`
-
-The `notification$` stream on the [`ChatClientService`](../services/ChatClientService.mdx) was renamed to `events$` as it better represents what this Observable does.
-
-The `events$` stream emits the received [client, notification and user presence events](https://getstream.io/chat/docs/javascript/event_object/?language=javascript).
-
-The payload of this Observable was renamed from `Notification` to `ClientEvent`.
-
-## Custom action names removed
-
-Use our [permission framework](https://getstream.io/chat/docs/javascript/chat_permission_policies/?language=javascript&q=slow%20mode) to control the authorization of the following message actions:
-
-| Custom action name | Channel capability   | Comment                                      |
-| ------------------ | -------------------- | -------------------------------------------- |
-| `quote`            | `quote-message`      |                                              |
-| `pin`              | `pin-message`        | Currently turned off because not implemented |
-| `flag`             | `flag-message`       |                                              |
-| `edit`             | `update-own-message` |                                              |
-| `edit-any`         | `update-any-message` |                                              |
-
-The `mute` action is removed.
diff --git a/docusaurus/angular_versioned_docs/version-4/basics/upgrade-v3.mdx b/docusaurus/angular_versioned_docs/version-4/basics/upgrade-v3.mdx
deleted file mode 100644
index c8bd3911..00000000
--- a/docusaurus/angular_versioned_docs/version-4/basics/upgrade-v3.mdx
+++ /dev/null
@@ -1,48 +0,0 @@
----
-id: upgrade-v3
-title: Upgrade from v3
----
-
-## About version 4
-
-Version 4 of `stream-chat-angular` brings a new and improved theming system. To use the new system please refer to our new [theming guide](../theming/introduction.mdx).
-
-## Theme-v1
-
-The old theme can still be used with the latest SDK versions however, you might need to update your custom CSS as some changes were introduced to theme-v1.
-
-Updating from theme-v1 to theme-v2 will require to rewrite your custom CSS code as the new theme has a new variable system, and all the components were restructured.
-
-Theme-v1 is now deprecated and will be removed in a future release.
-
-## Thread layout
-
-Previously you had to provide a selector for the message list and message input component projected inside the [thread component](../components/ThreadComponent.mdx).
-
-```html
-<stream-thread name="thread">
-  <stream-message-list
-    name="thread-message-list"
-    mode="thread"
-  ></stream-message-list>
-  <stream-message-input
-    mode="thread"
-    name="thread-message-input"
-  ></stream-message-input>
-</stream-thread>
-```
-
-You don't need to provide those selectors anymore, anything inside the content part of `stream-thread` HTML element will be projected inside the thread component:
-
-```html
-<stream-thread name="thread">
-  <stream-message-list mode="thread"></stream-message-list>
-  <stream-message-input mode="thread"></stream-message-input>
-</stream-thread>
-```
-
-Providing the selector won't cause a problem, but it's unnecessary.
-
-## `device-width` module was removed
-
-The `device-width` utility module was removed. If you rely on this code inside your chat application, you'll have to update your code.
diff --git a/docusaurus/angular_versioned_docs/version-4/code-examples/_category_.json b/docusaurus/angular_versioned_docs/version-4/code-examples/_category_.json
deleted file mode 100644
index 817e0360..00000000
--- a/docusaurus/angular_versioned_docs/version-4/code-examples/_category_.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "label": "Code examples",
-  "position": 4
-}
diff --git a/docusaurus/angular_versioned_docs/version-4/code-examples/channel-invites.mdx b/docusaurus/angular_versioned_docs/version-4/code-examples/channel-invites.mdx
deleted file mode 100644
index d77d5ce7..00000000
--- a/docusaurus/angular_versioned_docs/version-4/code-examples/channel-invites.mdx
+++ /dev/null
@@ -1,499 +0,0 @@
----
-id: channel-invites
-title: Channel invites
----
-
-import InviteButton from "../assets/invite-button-screenshot.png";
-import InviteModal1 from "../assets/invite-modal1-screenshot.png";
-import InviteModal2 from "../assets/invite-modal2-screenshot.png";
-import Invites from "../assets/channel-invites-screenshot.png";
-
-This guide gives you a step-by-step tutorial on how to use [channel invites](https://getstream.io/chat/docs/javascript/channel_invites/?language=javascript) in your chat application.
-
-## Invite button
-
-The [`CustomTemplatesService`](../services/CustomTemplatesService.mdx) has a property called `channelActionsTemplate$` that can be used to add action buttons to the [channel header](../components/ChannelHeaderComponent.mdx).
-
-Let's create a component for the invite button that we'll add to the channel header:
-
-```
-ng g c invite-button
-```
-
-### HTML template
-
-We create a simplistic UI with an "Invite users" button that opens a [modal](../components/ModalComponent.mdx) where users can search for other users in the application. The [`NotificationList` component](../components/NotificationListComponent.mdx) is used to display any error messages that may occur during the invite request.
-
-```html
-<button *ngIf="canInviteUsers" (click)="isModalOpen = true">
-  Invite users
-</button>
-<stream-modal [(isOpen)]="isModalOpen">
-  <div class="modal-content">
-    <div class="title">Invite users</div>
-    <div class="invited-users">
-      <div *ngFor="let u of usersToInvite">{{ u.name || u.id }}</div>
-    </div>
-    <div>
-      <input #input type="search" (change)="addUser()" list="app-users" />
-      <datalist id="app-users">
-        <option (select)="addUser()" *ngFor="let o of autocompleteOptions">
-          {{ o.name || o.id }}
-        </option>
-      </datalist>
-    </div>
-    <button class="invite" (click)="inviteMembers()">Send invitation(s)</button>
-    <stream-notification-list class="notifications"></stream-notification-list>
-  </div>
-</stream-modal>
-```
-
-### Styling
-
-We are using stream-chat theme variables to match the default chat theme. You can read more about theme variables in our [theming guide](../theming/introduction.mdx).
-
-```scss
-.modal-content {
-  width: 600px;
-  padding: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  gap: 15px;
-
-  .title {
-    font-size: 23px;
-    font-weight: 700;
-  }
-
-  input {
-    width: 200px;
-    padding: 10px;
-    border: none;
-    background-color: var(--str-chat__message-textarea-background-color);
-    color: var(--str-chat__message-textarea-color);
-    border-radius: var(--str-chat__message-textarea-border-radius);
-    border-block-start: var(--str-chat__message-textarea-border-block-start);
-    border-block-end: var(--str-chat__message-textarea-border-block-end);
-    border-inline-start: var(--str-chat__message-textarea-border-inline-start);
-    border-inline-end: var(--str-chat__message-textarea-border-inline-end);
-  }
-
-  .invited-users {
-    text-align: center;
-  }
-
-  .add {
-    margin-left: 5px;
-  }
-
-  .notifications {
-    width: 100%;
-  }
-}
-
-button {
-  background-color: var(--str-chat__cta-button-background-color);
-  border: none;
-  border-radius: var(--str-chat__cta-button-border-radius);
-  color: var(--str-chat__cta-button-color);
-  padding: 10px;
-  cursor: pointer;
-}
-```
-
-### Component logic
-
-Let's break down the most important parts of the component's logic:
-
-- We define an input with the type `Channel` to access the current active channel - this will be provided by the [`ChannelHeader`](../components/ChannelHeaderComponent.mdx) component
-- We check if the current user has the `update-channel-members` [capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript) to see if they can invite members (it's important to note that [not every channel can be extended with new members](https://getstream.io/chat/docs/javascript/creating_channels/?language=javascript#2.-creating-a-channel-for-a-list-of-members))
-- The `autocompleteUsers` method of the [`ChatClientService`](../services/ChatClientService.mdx) can be used to search for users in the application
-- The `inviteMembers` method of the `Channel` can be used to invite one or more members to the channel
-- The [`NotificationService`](../services/NotificationService.mdx) can be used to notify the user about the result of the invite request
-
-```typescript
-import {
-  Component,
-  ElementRef,
-  Input,
-  OnChanges,
-  OnInit,
-  SimpleChanges,
-  ViewChild,
-} from "@angular/core";
-import { fromEvent } from "rxjs";
-import { debounceTime, switchMap } from "rxjs/operators";
-import { Channel, UserResponse } from "stream-chat";
-import { ChatClientService, NotificationService } from "stream-chat-angular";
-
-@Component({
-  selector: "app-invite-button",
-  templateUrl: "./invite-button.component.html",
-  styleUrls: ["./invite-button.component.scss"],
-})
-export class InviteButtonComponent implements OnInit, OnChanges {
-  @Input() channel?: Channel;
-  usersToInvite: UserResponse[] = [];
-  canInviteUsers = false;
-  isModalOpen = false;
-  autocompleteOptions: UserResponse[] = [];
-  @ViewChild("input", { static: true })
-  private input!: ElementRef<HTMLInputElement>;
-
-  constructor(
-    private chatClientService: ChatClientService,
-    private notificationService: NotificationService
-  ) {}
-
-  ngOnInit(): void {
-    fromEvent(this.input.nativeElement, "input")
-      .pipe(
-        debounceTime(300),
-        switchMap(() =>
-          this.chatClientService.autocompleteUsers(
-            this.input.nativeElement.value
-          )
-        )
-      )
-      .subscribe((users) => (this.autocompleteOptions = users));
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes.channel && this.channel) {
-      this.canInviteUsers = (
-        this.channel.data?.own_capabilities as string[]
-      ).includes("update-channel-members");
-      this.usersToInvite = [];
-      this.autocompleteOptions = [];
-    }
-  }
-
-  async inviteMembers() {
-    try {
-      await this.channel?.inviteMembers(this.usersToInvite.map((u) => u.id));
-      this.notificationService.addTemporaryNotification(
-        "User(s) successfully invited",
-        "success"
-      );
-      this.usersToInvite = [];
-      this.autocompleteOptions = [];
-      this.isModalOpen = false;
-    } catch {
-      this.notificationService.addTemporaryNotification(
-        `User(s) couldn't be invited`,
-        "error"
-      );
-    }
-  }
-
-  addUser() {
-    const inputValue = this.input.nativeElement.value;
-    const user = this.autocompleteOptions.find(
-      (u) => u.id === inputValue || u.name === inputValue
-    );
-    if (user) {
-      this.usersToInvite.push(user);
-      this.input.nativeElement.value = "";
-      this.autocompleteOptions = [];
-    }
-  }
-}
-```
-
-### Providing the invite button to the channel header
-
-Lastly, we provide the `InviteButton` component to the `ChannelHeader`.
-
-Create the template (for example in your `AppComponent`):
-
-```html
-<ng-template #channelActionsTemplate let-channel="channel">
-  <app-invite-button [channel]="channel"></app-invite-button>
-</ng-template>
-```
-
-Register the template in your TypeScript code (for example in your `AppComponent`).
-
-These are the necessary steps:
-
-- Create a reference to the custom template
-- Import the [CustomTemplatesService](../services/CustomTemplatesService.mdx)
-- Register your custom template
-
-```typescript
-import {
-  AfterViewInit,
-  Component,
-  TemplateRef,
-  ViewChild,
-} from "@angular/core";
-import {
-  ChatClientService,
-  ChannelService,
-  StreamI18nService,
-} from "stream-chat-angular";
-import {
-  CustomTemplatesService,
-  ChannelActionsContext,
-} from "stream-chat-angular";
-import { environment } from "../environments/environment";
-
-@Component({
-  selector: "app-root",
-  templateUrl: "./app.component.html",
-  styleUrls: ["./app.component.scss"],
-})
-export class AppComponent implements AfterViewInit {
-  // Create a reference to the custom template
-  @ViewChild("channelActionsTemplate")
-  private channelActionsTemplate!: TemplateRef<ChannelActionsContext>;
-
-  constructor(
-    private chatService: ChatClientService,
-    private channelService: ChannelService,
-    private streamI18nService: StreamI18nService,
-    private customTemplatesService: CustomTemplatesService // Import customTemplatesService
-  ) {
-    void this.chatService.init(
-      environment.apiKey,
-      environment.userId,
-      environment.userToken
-    );
-    void this.channelService.init({
-      type: "messaging",
-      members: { $in: [environment.userId] },
-    });
-    this.streamI18nService.setTranslation();
-  }
-
-  ngAfterViewInit(): void {
-    // Register your custom template
-    this.customTemplatesService.channelActionsTemplate$.next(
-      this.channelActionsTemplate
-    );
-  }
-}
-```
-
-This is how the channel header looks with the invite button present:
-
-<img src={InviteButton} width="600" />
-
-And this is how the invite modal turned out:
-
-<img src={InviteModal1} width="600" />
-
-<img src={InviteModal2} width="400" />
-
-## Pending invitations
-
-The next step is to show the pending invitations to the user.
-
-### Invitation notification component
-
-First we create a component that will display a pending invitation:
-
-```
-ng g c invitation --inline-template --inline-style
-```
-
-Here are the most important parts of the component:
-
-- The component will be displayed inside the [`NotificationList`](../components/NotificationListComponent.mdx) component
-- We create an input with `Channel` type, this will be provided by the `NotificationList`
-- We create an input called `dismissFn`, this will also be provided by the `NotificationList` and can be used to dismiss the notification
-- The [`ChatClientService`](../services/ChatClientService.mdx) can be used to get the current chat user's id, this will be necessary when accepting/rejecting the invite
-- The invite can be accepted with the `acceptInvite` method of the `channel`
-- The invite can be rejected with the `rejectInvite` method of the `channel`
-
-The component:
-
-```typescript
-import { Component, Input, OnInit } from "@angular/core";
-import { Channel } from "stream-chat";
-import { ChatClientService, NotificationService } from "stream-chat-angular";
-
-@Component({
-  selector: "app-invitation",
-  template: `
-    <div>
-      You have been invited to the
-      {{ channelName }} channel. <button (click)="accept()">Accept</button> |
-      <button (click)="decline()">Decline</button> |
-      <button (click)="dismissFn()">Dismiss</button>
-    </div>
-  `,
-  styles: [
-    "button {border: none; background-color: transparent; color: var(--blue); font-weight: bold; cursor: pointer}",
-  ],
-})
-export class InvitationComponent implements OnInit {
-  @Input() channel?: Channel;
-  @Input() dismissFn!: Function;
-
-  constructor(
-    private notificationService: NotificationService,
-    private chatClientService: ChatClientService
-  ) {}
-
-  ngOnInit(): void {}
-
-  accept() {
-    this.sendRequest("accept");
-  }
-
-  async decline() {
-    this.sendRequest("reject");
-  }
-
-  get channelName() {
-    return this.channel?.data?.name || this.channel?.id;
-  }
-
-  private async sendRequest(answer: "accept" | "reject") {
-    const payload = {
-      user_id: this.chatClientService?.chatClient.user?.id,
-    };
-    const request =
-      answer === "accept"
-        ? async () => await this.channel?.acceptInvite(payload)
-        : async () => await this.channel?.rejectInvite(payload);
-    try {
-      await request();
-      this.dismissFn();
-      this.notificationService.addTemporaryNotification(
-        `Invite from ${this.channelName} successfully ${answer}ed`,
-        "success"
-      );
-    } catch {
-      this.notificationService.addTemporaryNotification(
-        `An error occured during ${answer}ing the invitation from ${this.channelName}`,
-        "error"
-      );
-    }
-  }
-}
-```
-
-### Displaying the invitations
-
-The next step will be to display the invitations.
-
-#### Invitation template
-
-We will have to create the invitation template that can be passed to the [`NotificationList`](../components/NotificationListComponent.mdx) component.
-
-Add this to your `app.component.html` file:
-
-```html
-<ng-template #inviteTemplate let-channel="channel" let-dismissFn="dismissFn">
-  <app-invitation [channel]="channel" [dismissFn]="dismissFn"></app-invitation>
-</ng-template>
-```
-
-Add a reference to the template in your `app.component.ts`:
-
-```typescript
-@ViewChild('inviteTemplate') private inviteTemplate!: TemplateRef<{channel: Channel<DefaultStreamChatGenerics> | ChannelResponse<DefaultStreamChatGenerics>}>;
-```
-
-#### Displaying the invitations
-
-The [`ChatClientService`](../services/ChatClientService.mdx) can keep track of pending invites, to enable this you have to initialize the service with the following flag:
-
-```typescript
-this.chatService.init("<API key>", "<user>", "<token provider>", {
-  trackPendingChannelInvites: true,
-});
-```
-
-The `pendingInvites$` Observable on the [`ChatClientService`](../services/ChatClientService.mdx) can notify us about the pending invitations of the current user. Let's subscribe to this Observable and [display the invites](../services/NotificationService.mdx) in the `ngOnInit` method of the `app.component.ts`
-
-```typescript
-ngOnInit(): void {
-  this.chatService.pendingInvites$.pipe(pairwise()).subscribe((pair) => {
-    const [prevInvites, currentInvites] = pair;
-    const notShownInvites = currentInvites.filter(
-      (i) => !prevInvites.find((prevI) => prevI.cid === i.cid)
-    );
-    notShownInvites.forEach((i) =>
-      this.notificationService.addPermanentNotification(
-        this.inviteTemplate,
-        'info',
-        undefined,
-        { channel: i }
-      )
-    );
-  });
-}
-```
-
-The above method will display all the pending invitations on page load and display every new invitation received later.
-
-This is how the invitation notifications look like:
-
-<img src={Invites} width="600" />
-
-## Channel list
-
-### Channel filter
-
-If a user is invited to a channel they immediately become member of the channel (the membership applies even if the invite is rejected).
-This means that if you use a channel filter that is based on membership (for example `{members: {$in: [<user id>]}}`), channels with pending and rejected invites will be returned and displayed in the channel list as well.
-If this is not what you need, you can use the [`joined`](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript#channel-queryable-built-in-fields) flag to only list channels that the user was directly added to or the invitation was accepted by the user.
-
-The channel filter can be provided to the `init` method of the [`ChannelService`](../services/ChannelService.mdx), here is an example:
-
-```typescript
-this.channelService.init({
-  joined: true,
-});
-```
-
-### `notification.added_to_channel` event
-
-It's important to note that the filtering set above is not applied to [events](https://getstream.io/chat/docs/javascript/event_object/?language=javascript) which means that you'll have to override the [default channel list behavior](../services/ChannelService.mdx/#channels) if you don't want channels with pending invites to be added to the channel list when a `notification.added_to_channel` event is received.
-
-To override the default behavior create a custom event handler in `app.component.ts` that checks if the user was invited to the channel or added directly and only adds the channel to the list if the user was added directly:
-
-```typescript
-private customAddedToChannelNotificationHandler(
-    clientEvent: ClientEvent,
-    channelListSetter: (channels: (Channel | ChannelResponse)[]) => void
-  ): void {
-    let channels!: Channel[];
-    this.channelService.channels$
-      .pipe(take(1))
-      .subscribe((c) => (channels = c || []));
-    if (clientEvent.event.member?.invited) {
-      return;
-    }
-    channelListSetter([clientEvent!.event!.channel!, ...channels]);
-  }
-```
-
-Now register the handler to the [channel service](../services/ChannelService.mdx) in the constructor of `app.component.ts`:
-
-```
-this.channelService.customAddedToChannelNotificationHandler =
-      this.customAddedToChannelNotificationHandler.bind(this);
-```
-
-### `notification.invite_accepted` event
-
-The `notification.invite_accepted` event emitted by the [`ChatClientService`](../services/ChatClientService.mdx) signals that the user accepted an invitation to a channel, we should add the channel to the channel list, we can do this by re-initializing the channel list.
-
-Add this to the constructor of your `app.component.ts`:
-
-```typescript
-this.chatService.events$
-  .pipe(filter((n) => n.eventType === "notification.invite_accepted"))
-  .subscribe(() => {
-    this.channelService.reset();
-    void this.channelService.init({
-      joined: true,
-    });
-  });
-```
diff --git a/docusaurus/angular_versioned_docs/version-4/code-examples/custom-textarea.mdx b/docusaurus/angular_versioned_docs/version-4/code-examples/custom-textarea.mdx
deleted file mode 100644
index 588f223f..00000000
--- a/docusaurus/angular_versioned_docs/version-4/code-examples/custom-textarea.mdx
+++ /dev/null
@@ -1,171 +0,0 @@
----
-id: custom-textarea
-title: Custom textarea
----
-
-import ImageShowcase from "@site/src/components/ImageShowcase";
-import before from "../assets/custom-textarea-before.png";
-import after from "../assets/custom-textarea-after.png";
-
-## Introduction
-
-This guide shows you how to replace the built in textarea component inside the [message input component](../../components/MessageInputComponent). One example where it's useful, is if you want to implement a HTML based editor for your chat users.
-
-The guide will provide step-by-step instructions to create the textarea on the right:
-
-<ImageShowcase
-  items={[
-    { image: before, caption: "Message input with built-in textarea" },
-    { image: after, caption: "Message input with custom textarea" },
-  ]}
-/>
-
-If you want to follow the tutorial, make sure to have a simple stream-chat-angular application set up. If you don't already have that, [follow our tutorial](https://getstream.io/chat/angular/tutorial/).
-
-## Custom textarea component
-
-Let's create a new component for our custom textarea:
-
-```
-ng g c textarea --inline-style --inline-template
-```
-
-The textarea will be displayed inside the `stream-message-input` component, and the two components need to communicate with each other. To ensure compatibility, your custom textarea component needs to implement the [`Textarea` interface](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/message-input/textarea.interface.ts).
-
-The interface has some optional elements that you might decide to ignore based on your own requirements. Below you'll find the essential parts of the interface:
-
-```typescript
-@Input() value: string = '';
-@Output() readonly valueChange = new EventEmitter<string>();
-@Output() readonly send = new EventEmitter<void>();
-```
-
-| Name          | Input/Output | Description                                                                                                                                                         |
-| ------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `value`       | Input        | The value to display inside the textarea. For new messages it will be undefined, but for editing messages this will be the original message content                 |
-| `valueChange` | Output       | An output to notify the message input component about value changes. It is used to send `typing.start` and `typing.end` events to other users                       |
-| `send`        | Output       | An output to notify the message input component to send the message. It is useful if you want to enable your users to trigger message send with hitting the `Enter` |
-
-Now let's see a very simple custom textarea implementation:
-
-```typescript
-import { Component, EventEmitter, Input, Output } from "@angular/core";
-import { TextareaInterface } from "stream-chat-angular";
-
-@Component({
-  selector: "app-textarea",
-  template: `
-    <button (click)="setToBold(input)">Bold</button>
-    <textarea
-      style="width: 100%"
-      [value]="value || ''"
-      #input
-      placeholder="Type your message here"
-      rows="1"
-      (input)="inputChanged(input.value)"
-      (keydown.enter)="enterHit($event)"
-    ></textarea>
-  `,
-  styles: [":host {width: 100%}"],
-})
-export class TextareaComponent implements TextareaInterface {
-  @Input() value = "";
-  @Output() readonly valueChange = new EventEmitter<string>();
-  @Output() readonly send = new EventEmitter<void>();
-
-  constructor() {}
-
-  inputChanged(value: string) {
-    this.valueChange.emit(value);
-  }
-
-  setToBold(input: HTMLTextAreaElement) {
-    const currentValue = input.value;
-    const newValue = `<b>${currentValue}</b>`;
-    input.value = newValue;
-    this.inputChanged(newValue);
-  }
-
-  enterHit(event: Event) {
-    event.preventDefault();
-    this.send.next();
-  }
-}
-```
-
-## Registering the component
-
-To use the custom textarea component we need to let the `stream-message-input` component know which component to create for the textarea slot. To do this you need to define a provider for the `textareaInjectionToken`.
-
-Let's update your `app.module.ts` to the following:
-
-```typescript
-import { NgModule } from "@angular/core";
-import { BrowserModule } from "@angular/platform-browser";
-import { TranslateModule } from "@ngx-translate/core";
-
-import { AppComponent } from "./app.component";
-import { StreamChatModule, textareaInjectionToken } from "stream-chat-angular";
-import { TextareaComponent } from "./textarea/textarea.component";
-
-@NgModule({
-  declarations: [AppComponent, TextareaComponent],
-  imports: [
-    BrowserModule,
-    TranslateModule.forRoot(),
-    StreamChatModule,
-    //highlight-start
-    // Make sure you remove any import to StreamAutocompleteTextareaModule or StreamTextareaModule
-    //highlight-end
-  ],
-  providers: [
-    //highlight-start
-    {
-      provide: textareaInjectionToken,
-      useValue: TextareaComponent,
-    },
-    //highlight-end
-  ],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
-```
-
-With that the built-in textarea will be replaced with your custom textarea component.
-
-## Displaying HTML content
-
-By default the [`Message`](../../components/MessageComponent) and [`ChannelPreview`](../../components/ChannelPreviewComponent) components will format message content as text. So the message bubble will display something like this: `<b>Hi</b>` instead of this: <b>Hi</b>.
-
-To fix this, you need to set text formatting to HTML using the [`MessageService`](../../services/MessageService)
-
-```typescript
-constructor(
-    private chatService: ChatClientService,
-    private channelService: ChannelService,
-    private streamI18nService: StreamI18nService,
-    messageService: MessageService
-  ) {
-    // Set message formatting before initializing the ChannelService
-    //highlight-start
-    messageService.displayAs = 'html';
-    //highlight-end
-    void this.chatService.init(
-      environment.apiKey,
-      environment.userId,
-      environment.userToken
-    );
-    void this.channelService.init({
-      type: 'messaging',
-      members: { $in: [environment.userId] },
-    });
-    this.streamI18nService.setTranslation();
-  }
-```
-
-If you want to use a different formatting, you have to provide your own message and channel preview components for that.
-
-## Limitations
-
-- The built-in [`TextareaComponent`](../../components/TextareaComponent/#feature-overview) and [`AutocompleteTextareaComponent`](../../components/AutocompleteTextareaComponent/#feature-overview) have additional features that you have to implement for yourself if you decide to create your own textarea component.
-- The built-in `Message` and `ChannelPreview` components can only format message content as text or HTML. If you want to implement a different formatting (for example Markdown), you need to create a custom [message](../../components/MessageComponent/#customization) and [channel preview](../../components/ChannelPreviewComponent/#customization) components.
diff --git a/docusaurus/angular_versioned_docs/version-4/code-examples/emoji-picker.mdx b/docusaurus/angular_versioned_docs/version-4/code-examples/emoji-picker.mdx
deleted file mode 100644
index 7aad2b2e..00000000
--- a/docusaurus/angular_versioned_docs/version-4/code-examples/emoji-picker.mdx
+++ /dev/null
@@ -1,309 +0,0 @@
----
-id: emoji-picker
-title: Emoji picker
----
-
-import Screenshot from "../assets/emoji-picker-screenshot.png";
-
-The SDK doesn't have a built-in emoji picker, but it has support for providing your own template. This guide shows you how to add an emoji picker to your chat application.
-
-## Create the emoji picker template
-
-1. Create a new component in your application
-
-```
-ng g c emoji-picker
-```
-
-2. Install `@ctrl/ngx-emoji-mart`
-
-You can use any emoji picker but this example will use [`@ctrl/ngx-emoji-mart `](https://www.npmjs.com/package/@ctrl/ngx-emoji-mart)
-
-```
-npm install @ctrl/ngx-emoji-mart
-```
-
-Import the emoji-mart stylesheet into your root stylesheet (for example `styles.scss`):
-
-```
-@import "~@ctrl/ngx-emoji-mart/picker";
-```
-
-Import the `PickerModule` into your `AppModule`:
-
-```typescript
-import { NgModule } from "@angular/core";
-import { BrowserModule } from "@angular/platform-browser";
-import { TranslateModule } from "@ngx-translate/core";
-
-import { AppComponent } from "./app.component";
-import {
-  StreamChatModule,
-  StreamAutocompleteTextareaModule,
-} from "stream-chat-angular";
-import { EmojiPickerComponent } from "./emoji-picker/emoji-picker.component";
-import { PickerModule } from "@ctrl/ngx-emoji-mart";
-
-@NgModule({
-  declarations: [AppComponent, EmojiPickerComponent],
-  imports: [
-    BrowserModule,
-    TranslateModule.forRoot(),
-    StreamAutocompleteTextareaModule,
-    StreamChatModule,
-    PickerModule,
-  ],
-  providers: [],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
-```
-
-3. Component class
-
-Your emoji picker component should have an input with the type `Subject<string>` to emit the selected emojis. This input will be provided by the [`MessageInput`](../components/MessageInputComponent.mdx) component.
-
-We also defined an `isOpened` property that tells if the emoji picker should be opened or closed.
-
-The emoji picker will close on outside clicks.
-
-```typescript
-import { Component, ElementRef, Input, ViewChild } from "@angular/core";
-import { Observable, Subject } from "rxjs";
-import { ThemeService } from "stream-chat-angular";
-
-@Component({
-  selector: "app-emoji-picker",
-  templateUrl: "./emoji-picker.component.html",
-  styleUrls: ["./emoji-picker.component.scss"],
-})
-export class EmojiPickerComponent {
-  isOpened = false;
-  theme$: Observable<string>;
-  @Input() emojiInput$: Subject<string> | undefined;
-  @ViewChild("container") container: ElementRef<HTMLElement> | undefined;
-
-  constructor(themeService: ThemeService) {
-    this.theme$ = themeService.theme$;
-  }
-
-  emojiSelected(event: any) {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-    this.emojiInput$?.next(event.emoji.native);
-  }
-
-  eventHandler = (event: Event) => {
-    // Watching for outside clicks
-    if (!this.container?.nativeElement.contains(event.target as Node)) {
-      this.isOpened = false;
-      window.removeEventListener("click", this.eventHandler);
-    }
-  };
-
-  toggled() {
-    if (!this.container) {
-      return;
-    }
-    this.isOpened = !this.isOpened;
-    if (this.isOpened) {
-      window.addEventListener("click", this.eventHandler);
-    } else {
-      window.removeEventListener("click", this.eventHandler);
-    }
-  }
-}
-```
-
-4. Component template
-
-We create a button that can be used to toggle the emoji picker.
-
-The [`emoji-mart`](https://www.npmjs.com/package/@ctrl/ngx-emoji-mart) component has a lot of configuration options, feel free to explore those.
-
-We set the `color` input to `--str-chat__primary-color` defined in the [stream-chat-css theme](../theming/global-variables.mdx).
-
-The [`ngIf`](https://angular.io/api/common/NgIf) directive is used to hide/show the emoji picker.
-
-The `emojiSelect` event is fired when a user selects an emoji, we emit the selected emoji using the `emojiSelected` method.
-
-```html
-<div #container class="emoji-picker-container">
-  <button (click)="toggled()">
-    <svg
-      viewBox="0 0 28 28"
-      width="100%"
-      preserveAspectRatio="xMinYMin"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g clip-rule="evenodd" fill-rule="evenodd">
-        <path
-          d="M14 4.4C8.6 4.4 4.4 8.6 4.4 14c0 5.4 4.2 9.6 9.6 9.6c5.4 0 9.6-4.2 9.6-9.6c0-5.4-4.2-9.6-9.6-9.6zM2 14c0-6.6 5.4-12 12-12s12 5.4 12 12s-5.4 12-12 12s-12-5.4-12-12zM12.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM18.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM8.6 15.4c.6-.4 1.2-.2 1.6.2c.6.8 1.6 1.8 3 2c1.2.4 2.8.2 4.8-2c.4-.4 1.2-.6 1.6 0c.4.4.6 1.2 0 1.6c-2.2 2.6-4.8 3.4-7 3c-2-.4-3.6-1.8-4.4-3c-.4-.6-.2-1.2.4-1.8z"
-        ></path>
-      </g>
-    </svg>
-  </button>
-
-  <emoji-mart
-    class="picker"
-    color="var(--str-chat__primary-color)"
-    *ngIf="isOpened"
-    title="Pick your emoji…"
-    emoji="point_up"
-    (emojiSelect)="emojiSelected($event)"
-    [darkMode]="(theme$ | async) === 'dark'"
-  ></emoji-mart>
-</div>
-```
-
-5. Component styles
-
-If you want to match the color of the emoji picker toggle button to the other tool buttons in the message input, you can use the `--str-chat__message-input-tools-color` to do that as defined in the [stream-chat-css theme](../theming/global-variables.mdx)
-
-```scss
-.emoji-picker-container {
-  position: relative;
-  width: 24px;
-  height: 24px;
-
-  button {
-    background-color: transparent;
-    border: none;
-    cursor: pointer;
-    padding: 0;
-    margin: 0;
-
-    svg {
-      display: flex;
-      width: 24px;
-      height: 24px;
-
-      path {
-        fill: var(--str-chat__message-input-tools-color);
-      }
-    }
-  }
-
-  .picker {
-    z-index: 3;
-    position: absolute;
-    bottom: 100%;
-    transform: scale(0.8);
-    right: 0;
-    transform-origin: bottom right;
-  }
-
-  @media only screen and (min-device-width: 1024px) {
-    .picker {
-      transform: scale(1);
-    }
-  }
-}
-```
-
-## Provide your custom template
-
-Let's create the template for the emoji picker (for example in your `AppComponent`):
-
-```html
-<!-- The MessageInput component will provide the emojiInput$ to emit the selected emojis and insert them in the textarea -->
-<ng-template #emojiPickerTemplate let-emojiInput$="emojiInput$">
-  <app-emoji-picker [emojiInput$]="emojiInput$"></app-emoji-picker>
-</ng-template>
-```
-
-Register the template in your TypeScript code (for example in your `AppComponent`).
-
-These are the necessary steps:
-
-- Create a reference to the custom template
-- Import the [CustomTemplatesService](../services/CustomTemplatesService.mdx)
-- Register your custom template
-
-Here is an example file:
-
-```typescript
-import {
-  AfterViewInit,
-  Component,
-  TemplateRef,
-  ViewChild,
-} from "@angular/core";
-import {
-  ChatClientService,
-  ChannelService,
-  StreamI18nService,
-} from "stream-chat-angular";
-import {
-  CustomTemplatesService,
-  EmojiPickerContext,
-} from "stream-chat-angular";
-import { environment } from "../environments/environment";
-
-@Component({
-  selector: "app-root",
-  templateUrl: "./app.component.html",
-  styleUrls: ["./app.component.scss"],
-})
-export class AppComponent implements AfterViewInit {
-  // Create a reference to the custom template
-  @ViewChild("emojiPickerTemplate")
-  private emojiPickerTemplate!: TemplateRef<EmojiPickerContext>;
-
-  constructor(
-    private chatService: ChatClientService,
-    private channelService: ChannelService,
-    private streamI18nService: StreamI18nService,
-    private customTemplatesService: CustomTemplatesService // Import the customTemplatesService
-  ) {
-    void this.chatService.init(
-      environment.apiKey,
-      environment.userId,
-      environment.userToken
-    );
-    void this.channelService.init({
-      type: "messaging",
-      members: { $in: [environment.userId] },
-    });
-    this.streamI18nService.setTranslation();
-  }
-
-  ngAfterViewInit(): void {
-    // Register your custom template
-    this.customTemplatesService.emojiPickerTemplate$.next(
-      this.emojiPickerTemplate
-    );
-  }
-}
-```
-
-This is how our emoji picker looks like:
-
-<img src={Screenshot} width="500" />
-
-## Dark and light mode
-
-If your application supports dark and light themes, here how you can toggle the theme on the emoji input component:
-
-Add this to you emoji picker component class:
-
-```typescript
-theme$: Observable<string>;
-
-constructor(themeService: ThemeService) {
-  this.theme$ = themeService.theme$;
-}
-```
-
-And set the `darkMode` input on the `emoji-mart` component:
-
-```html
-<emoji-mart
-  class="picker"
-  color="var(--str-chat__primary-color)"
-  *ngIf="isOpened"
-  title="Pick your emoji…"
-  emoji="point_up"
-  (emojiSelect)="emojiSelected($event)"
-  [darkMode]="(theme$ | async) === 'dark'"
-></emoji-mart>
-```
diff --git a/docusaurus/angular_versioned_docs/version-4/code-examples/ionic-guide.mdx b/docusaurus/angular_versioned_docs/version-4/code-examples/ionic-guide.mdx
deleted file mode 100644
index 9f6799ce..00000000
--- a/docusaurus/angular_versioned_docs/version-4/code-examples/ionic-guide.mdx
+++ /dev/null
@@ -1,237 +0,0 @@
----
-id: ionic-guide
-title: Mobile app with Ionic
----
-
-import Screenshot1 from "../assets/ionic-screenshot1.png";
-
-This guide shows you how to create a Stream chat mobile app with [Ionic + Capacitor](https://ionicframework.com/docs/). The guide is based on the [Ionic + Angular tutorial](https://ionicframework.com/docs/angular/your-first-app).
-
-You can find the [required tools](https://ionicframework.com/docs/angular/your-first-app#download-required-tools) in the Ionic guide.
-
-## Install ionic tooling
-
-```bash
-npm install -g @ionic/cli native-run cordova-res
-```
-
-## Create the app
-
-Next, create an Ionic Angular app using the "side menu" template and add Capacitor for native functionality:
-
-```bash
-ionic start chat-app sidemenu --type=angular --capacitor
-```
-
-Next, change into the app folder:
-
-```bash
-cd chat-app
-```
-
-You can start the app with the following command:
-
-```bash
-npm start
-```
-
-## Create the chat UI
-
-Install the necessary dependencies:
-
-```
-npm install stream-chat-angular stream-chat @ngx-translate/core
-```
-
-Add this to your `tsconfig.json` file to the `compilerOptions` part:
-
-```
-"allowSyntheticDefaultImports": true
-```
-
-Import CSS in your `global.scss` file:
-
-```
-@import "~stream-chat-angular/src/assets/styles/v2/scss/index.scss";
-```
-
-Add the module imports required by `stream-chat-angular` to the `app.module.ts` file:
-
-```typescript
-import { NgModule } from "@angular/core";
-import { BrowserModule } from "@angular/platform-browser";
-import { RouteReuseStrategy } from "@angular/router";
-
-import { IonicModule, IonicRouteStrategy } from "@ionic/angular";
-
-import { AppComponent } from "./app.component";
-import { AppRoutingModule } from "./app-routing.module";
-import { TranslateModule } from "@ngx-translate/core";
-import {
-  StreamAutocompleteTextareaModule,
-  StreamChatModule,
-} from "stream-chat-angular";
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [
-    BrowserModule,
-    IonicModule.forRoot(),
-    AppRoutingModule,
-    TranslateModule.forRoot(),
-    StreamAutocompleteTextareaModule,
-    StreamChatModule,
-  ],
-  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
-```
-
-Connect to your Stream chat application by replacing the content of the `app.component.ts` file (add the necessary credentials to your `environment.ts` file):
-
-If you don't already have a Stream account you can [start your free trial](https://getstream.io/try-for-free/).
-
-```typescript
-import { Component, OnInit } from "@angular/core";
-import { environment } from "src/environments/environment";
-import {
-  ChatClientService,
-  ChannelService,
-  StreamI18nService,
-} from "stream-chat-angular";
-
-@Component({
-  selector: "app-root",
-  templateUrl: "./app.component.html",
-  styleUrls: ["./app.component.scss"],
-})
-export class AppComponent implements OnInit {
-  constructor(
-    private chatService: ChatClientService,
-    private channelService: ChannelService,
-    private streamI18nService: StreamI18nService
-  ) {
-    const apiKey = environment.apiKey;
-    const userId = environment.userId;
-    const userToken = environment.userToken;
-    this.chatService.init(apiKey, userId, userToken);
-    this.streamI18nService.setTranslation();
-  }
-
-  async ngOnInit() {
-    this.channelService.init({
-      type: "messaging",
-      members: { $in: [environment.userId] },
-    });
-  }
-}
-```
-
-Display the channel list in your `app.component.html`:
-
-```html
-<ion-app>
-  <ion-split-pane contentId="main-content">
-    <ion-menu contentId="main-content" type="overlay">
-      <ion-content>
-        <ion-menu-toggle auto-hide="false">
-          <ion-list>
-            <stream-channel-list></stream-channel-list>
-          </ion-list>
-        </ion-menu-toggle>
-      </ion-content>
-    </ion-menu>
-    <ion-router-outlet id="main-content"></ion-router-outlet>
-  </ion-split-pane>
-</ion-app>
-```
-
-Extend the `folder.module.ts` with the necessary module imports:
-
-```typescript
-import { NgModule } from "@angular/core";
-import { CommonModule } from "@angular/common";
-import { FormsModule } from "@angular/forms";
-
-import { IonicModule } from "@ionic/angular";
-
-import { FolderPageRoutingModule } from "./folder-routing.module";
-
-import { FolderPage } from "./folder.page";
-import { StreamChatModule } from "stream-chat-angular";
-
-@NgModule({
-  imports: [
-    CommonModule,
-    FormsModule,
-    IonicModule,
-    FolderPageRoutingModule,
-    StreamChatModule,
-  ],
-  declarations: [FolderPage],
-})
-export class FolderPageModule {}
-```
-
-Display the active channel in the `folder.page.html`:
-
-```html
-<ion-content [fullscreen]="true">
-  <stream-channel>
-    <stream-channel-header>
-      <ion-menu-button></ion-menu-button>
-    </stream-channel-header>
-    <stream-message-list></stream-message-list>
-    <stream-notification-list></stream-notification-list>
-    <stream-message-input></stream-message-input>
-    <stream-thread name="thread">
-      <stream-message-list mode="thread"></stream-message-list>
-      <stream-message-input mode="thread"></stream-message-input>
-    </stream-thread>
-  </stream-channel>
-</ion-content>
-```
-
-Our chat UI is now ready.
-
-<img src={Screenshot1} width="500" />
-
-## Deploying to iOS and Android
-
-Create a clean build
-
-```bash
-ionic build
-```
-
-Next, create both the iOS and Android projects:
-
-```bash
-ionic cap add ios
-ionic cap add android
-```
-
-For more information see the [Ionic guide](https://ionicframework.com/docs/angular/your-first-app/deploying-mobile)
-
-Open the iOS app:
-
-```bash
-ionic cap open ios
-```
-
-This will open XCode on your machine, you can start the app by clicking the play button on the top toolbar.
-
-Open the Android app:
-
-```bash
-ionic cap open android
-```
-
-This will open Android studio on your machine, you can start the app by clicking the play button on the top toolbar.
-
-We've successfully deployed our Stream chat mobile app to iOS and Android.
-
-## Push notifications
-
-We have a separate [push notification guide](./push-guide.mdx) to show you how to add push notifications to your mobile apps.
diff --git a/docusaurus/angular_versioned_docs/version-4/code-examples/mention-actions.mdx b/docusaurus/angular_versioned_docs/version-4/code-examples/mention-actions.mdx
deleted file mode 100644
index 685fff4e..00000000
--- a/docusaurus/angular_versioned_docs/version-4/code-examples/mention-actions.mdx
+++ /dev/null
@@ -1,191 +0,0 @@
----
-id: mention-actions
-sidebar_position: 1
-title: Mention actions
----
-
-import Screenshot from "../assets/mention-screenshot.png";
-
-In this example, we will demonstrate how to create custom mention actions if a user clicks on or hovers over a mention in a message.
-
-## Custom mention template
-
-You can provide a custom message template to the [`CustomTemplatesService`](../services/CustomTemplatesService.mdx):
-
-Create the template (for example in your `AppComponent`):
-
-```html
-<ng-template #mentionTemplate let-user="user">
-  <b>@{{ user.name || user.id }}</b>
-</ng-template>
-```
-
-The `Message` component will provide the mentioned user in a variable called `user`, the object has a [`UserResponse`](https://github.com/GetStream/stream-chat-js/blob/master/src/types.ts) type and you can use it to display information about the user.
-
-This template looks and works like the default mention template, however you can add interactions to this element.
-
-Register the template in your TypeScript code (for example in your `AppComponent`).
-
-These are the necessary steps:
-
-- Create a reference to the custom template
-- Import the [CustomTemplatesService](../services/CustomTemplatesService.mdx)
-- Register your custom template
-
-Here is an example file:
-
-```typescript
-import {
-  AfterViewInit,
-  Component,
-  TemplateRef,
-  ViewChild,
-} from "@angular/core";
-import {
-  ChatClientService,
-  ChannelService,
-  StreamI18nService,
-} from "stream-chat-angular";
-import {
-  CustomTemplatesService,
-  MentionTemplateContext,
-} from "stream-chat-angular";
-import { environment } from "../environments/environment";
-
-@Component({
-  selector: "app-root",
-  templateUrl: "./app.component.html",
-  styleUrls: ["./app.component.scss"],
-})
-export class AppComponent implements AfterViewInit {
-  // Create a reference to the custom template
-  @ViewChild("mentionTemplate")
-  private mentionTemplate!: TemplateRef<MentionTemplateContext>;
-
-  constructor(
-    private chatService: ChatClientService,
-    private channelService: ChannelService,
-    private streamI18nService: StreamI18nService,
-    private customTemplatesService: CustomTemplatesService // Import the customTemplatesService
-  ) {
-    void this.chatService.init(
-      environment.apiKey,
-      environment.userId,
-      environment.userToken
-    );
-    void this.channelService.init({
-      type: "messaging",
-      members: { $in: [environment.userId] },
-    });
-    this.streamI18nService.setTranslation();
-  }
-
-  ngAfterViewInit(): void {
-    // Register your custom template
-    this.customTemplatesService.mentionTemplate$.next(this.mentionTemplate);
-  }
-}
-```
-
-## Display user information on click
-
-In this step we will create a popover with additional user information that will be displayed if the user clicks on a mention. We are using the [`ngx-popperjs`](https://www.npmjs.com/package/ngx-popperjs) library for the popover, but you can use a different library as well.
-
-### Install `ngx-popperjs`
-
-Let's install the necessary dependencies:
-
-```bash
-npm install @popperjs/core ngx-popperjs --save
-```
-
-### Import the `NgxPopperjsModule` module
-
-```typescript
-import {NgxPopperjsModule} from 'ngx-popperjs';
-
-@NgModule({
- // ...
- imports: [
-   // ...
-   NgxPopperjsModule
- ]
-})
-```
-
-### Import SCSS
-
-Add this to your `styles.scss`:
-
-```scss
-@import "~ngx-popperjs/scss/theme-white";
-```
-
-[CSS is also supported.](https://www.npmjs.com/package/ngx-popperjs)
-
-### Create the popover
-
-```html
-<ng-template #mentionTemplate let-user="user">
-  <span
-    style="cursor: pointer"
-    [popper]="popperContent"
-    [popperPositionFixed]="true"
-  >
-    <b>@{{ user.name || user.id }}</b>
-  </span>
-  <popper-content #popperContent style="display: inline">
-    <div style="display: flex; align-items: center">
-      <stream-avatar
-        [imageUrl]="user.image"
-        [name]="user.name || user.id"
-      ></stream-avatar>
-      <b>{{ user.name || user.id }}</b>
-      <span>&nbsp;{{ user.online ? "online" : "offline" }}</span>
-    </div>
-  </popper-content>
-</ng-template>
-```
-
-This is the popover that is displayed if we click on a mention in a message:
-
-<img src={Screenshot} width="500" />
-
-[`ngx-popperjs`](https://www.npmjs.com/package/ngx-popperjs) has a lot of other configuration options, feel free to explore those.
-
-## Display user information on hover
-
-Let's modify our solution and display the popover on hover instead of click:
-
-We need to add a variable to our component class:
-
-```typescript
-import { NgxPopperjsTriggers } from "ngx-popperjs";
-
-popoverTrigger = NgxPopperjsTriggers.hover;
-```
-
-And modify our template:
-
-```html
-<ng-template #mentionTemplate let-user="user">
-  <span
-    style="cursor: pointer"
-    [popper]="popperContent"
-    [popperPositionFixed]="true"
-    [popperTrigger]="popoverTrigger"
-  >
-    <b>@{{ user.name || user.id }}</b>
-  </span>
-  <popper-content #popperContent style="display: inline">
-    <div style="display: flex; align-items: center">
-      <stream-avatar
-        [imageUrl]="user.image"
-        [name]="user.name || user.id"
-      ></stream-avatar>
-      <b>{{ user.name || user.id }}</b>
-      <span>&nbsp;{{ user.online ? "online" : "offline" }}</span>
-    </div>
-  </popper-content>
-</ng-template>
-```
diff --git a/docusaurus/angular_versioned_docs/version-4/code-examples/pin-messages.mdx b/docusaurus/angular_versioned_docs/version-4/code-examples/pin-messages.mdx
deleted file mode 100644
index d918cc21..00000000
--- a/docusaurus/angular_versioned_docs/version-4/code-examples/pin-messages.mdx
+++ /dev/null
@@ -1,103 +0,0 @@
----
-id: pin-messages
-title: Pin messages
----
-
-import PinActionScreenshot from "../assets/pin-action-screenshot.png";
-import PinnedMessageScreenshot from "../assets/pinned-message-screenshot.png";
-
-Pinning messages can be a useful feature inside your chat application, `stream-chat-angular` supports this feature, but you have to provide the UI template for the pinned messages. This guide shows you how you can set up this functionality.
-
-## Pin and unpin actions
-
-The default message action box contains the pin/unpin action, this action marks a message as pinned/unpinned.
-
-<img src={PinActionScreenshot} width="500" />
-
-:::note
-If you don't see the action, you might have [authorize the pin action](https://getstream.io/chat/docs/javascript/chat_permission_policies/?language=javascript).
-:::
-
-## Pinned messages stream
-
-The [`activeChannelPinnedMessages$`](../services/ChannelService.mdx/#activechannelpinnedmessages) stream of the [`ChannelService`](../services/ChannelService.mdx) emits the list of currently pinned messages inside the active channel.
-
-```typescript
-this.channelService.activeChannelPinnedMessages$.subscribe(console.log);
-```
-
-- The initial value is retrieved from the [channel query response](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript&q=pin#channelstate-response)
-- After that, all pin and unpin actions are reflected in the emitted list
-
-## Pinned messages UI
-
-Once we know the list of pinned messages, we should display them somewhere users can easily spot them. You can display pinned messages anywhere you want to, however a common place could be the top/bottom of the message list, this example will display pinned messages at the bottom of the message list.
-
-You have to provide the template for the pinned messages:
-
-```html
-<stream-notification-list></stream-notification-list>
-<div
-  style="padding: 8px; background: #e1f5fe"
-  *ngFor="
-          let message of channelService.activeChannelPinnedMessages$ | async
-        "
->
-  {{ message.text }}
-</div>
-<stream-message-input></stream-message-input>
-```
-
-The `message` variable has [`StreamMessage`](../types/stream-message.mdx) type, so you can access all fields defined there inside your template.
-
-<img src={PinnedMessageScreenshot} width="500" />
-
-## Jump to a pinned message
-
-Let's add a click event handler to the pinned message, and jump to the message (works for channel and thread messages as well):
-
-```typescript
-jumpToMessage(message: StreamMessage) {
-  this.channelService.jumpToMessage(message.id, message.parent_id);
-}
-```
-
-```html
-<div
-  style="padding: 8px; background: #e1f5fe"
-  *ngFor="
-          let message of channelService.activeChannelPinnedMessages$ | async
-        "
-  (click)="jumpToMessage(message)"
->
-  {{ message.text }}
-</div>
-```
-
-## Unpin message
-
-Let's extend our example and add an Unpin button to remove the pin from a message.
-
-```typescript
-unpinMessage(message: StreamMessage<DefaultStreamChatGenerics>) {
-  this.channelService.unpinMessage(message);
-}
-```
-
-```html
-<div
-  style="padding: 8px; background: #e1f5fe"
-  *ngFor="
-        let message of channelService.activeChannelPinnedMessages$ | async
-      "
-  (click)="jumpToMessage(message)"
->
-  {{ message.text }}
-  <button
-    style="border: none; background: none; padding: 0; margin: 0"
-    (click)="$event.stopPropagation(); unpinMessage(message)"
-  >
-    Unpin
-  </button>
-</div>
-```
diff --git a/docusaurus/angular_versioned_docs/version-4/code-examples/push-guide.mdx b/docusaurus/angular_versioned_docs/version-4/code-examples/push-guide.mdx
deleted file mode 100644
index 297484e0..00000000
--- a/docusaurus/angular_versioned_docs/version-4/code-examples/push-guide.mdx
+++ /dev/null
@@ -1,187 +0,0 @@
----
-id: push-guide
-title: Push notifications
----
-
-import FirebaseConsoleScreenshot from "../assets/firebase-console-screenshot.png";
-
-This guide shows you how to add push notifications using [Firebase Cloud Messaging](https://firebase.google.com/docs/cloud-messaging) to your Stream chat Ionic mobile apps (iOS and Android). This guide is based on the [Capacitor Firebase push notification tutorial](https://capacitorjs.com/docs/guides/push-notifications-firebase#building-the-app--adding-platforms).
-
-## Before you start
-
-If you want to follow this guide make sure to complete our [Ionic mobile app tutorial](./ionic-guide.mdx) first.
-
-## Using the Capacitor Push Notification API​
-
-First of all, we need to install the [Capacitor Push Notifications Plugin](https://capacitorjs.com/docs/apis/push-notifications)
-
-```bash
-npm install @capacitor/push-notifications
-npx cap sync
-```
-
-Let's integrate the Push Notification API in our `app.component.ts` file:
-
-```typescript
-import { Component, OnInit } from "@angular/core";
-import { environment } from "src/environments/environment";
-import {
-  ChatClientService,
-  ChannelService,
-  StreamI18nService,
-} from "stream-chat-angular";
-import {
-  ActionPerformed,
-  PushNotificationSchema,
-  PushNotifications,
-  Token,
-} from "@capacitor/push-notifications";
-
-@Component({
-  selector: "app-root",
-  templateUrl: "./app.component.html",
-  styleUrls: ["./app.component.scss"],
-})
-export class AppComponent implements OnInit {
-  constructor(
-    private chatService: ChatClientService,
-    private channelService: ChannelService,
-    private streamI18nService: StreamI18nService
-  ) {
-    const apiKey = environment.apiKey;
-    const userId = environment.userId;
-    const userToken = environment.userToken;
-    this.chatService.init(apiKey, userId, userToken);
-    this.streamI18nService.setTranslation();
-  }
-
-  async ngOnInit() {
-    this.channelService.init({
-      type: "messaging",
-      members: { $in: [environment.userId] },
-    });
-    // Request permission to use push notifications
-    // iOS will prompt user and return if they granted permission or not
-    // Android will just grant without prompting
-    PushNotifications.requestPermissions().then((result) => {
-      if (result.receive === "granted") {
-        // Register with Apple / Google to receive push via APNS/FCM
-        PushNotifications.register();
-      } else {
-        // Show some error
-      }
-    });
-
-    // On success, we should be able to receive notifications
-    PushNotifications.addListener("registration", (token: Token) => {
-      alert("Push registration success, token: " + token.value);
-      // Register to Stream API
-      this.chatService.chatClient.addDevice(
-        token.value,
-        "firebase",
-        environment.userId
-      );
-    });
-
-    // Some issue with our setup and push will not work
-    PushNotifications.addListener("registrationError", (error: any) => {
-      alert("Error on registration: " + JSON.stringify(error));
-    });
-
-    // Show us the notification payload if the app is open on our device
-    PushNotifications.addListener(
-      "pushNotificationReceived",
-      (notification: PushNotificationSchema) => {
-        alert("Push received: " + JSON.stringify(notification));
-      }
-    );
-
-    // Method called when tapping on a notification
-    PushNotifications.addListener(
-      "pushNotificationActionPerformed",
-      (notification: ActionPerformed) => {
-        alert("Push action performed: " + JSON.stringify(notification));
-      }
-    );
-  }
-}
-```
-
-We are adding `alert` calls to the various events to be able to observe the behaviour when the app is running on mobile devices.
-
-After this, you'll want to generate a new build and let Capacitor know about the changes. You can do that with:
-
-```bash
-ionic build
-npx cap copy
-```
-
-## Creating a Firebase project
-
-Complete the [Creating a Project for your App on Firebase step](https://capacitorjs.com/docs/guides/push-notifications-firebase#creating-a-project-for-your-app-on-firebase) in the Capacitor Push guide.
-
-## Integrate with Android
-
-Complete the [Android integration steps](https://capacitorjs.com/docs/guides/push-notifications-firebase#android) in the Capacitor Push guide.
-
-## Integrate with iOS
-
-Complete the [iOS integration steps](https://capacitorjs.com/docs/guides/push-notifications-firebase#ios) in the Capacitor Push guide.
-
-## Integrate with Stream API
-
-This guide doesn't give you an in-depth overview of the Stream Push API, if you want to know more about that visit our [push documentation](https://getstream.io/chat/docs/javascript/push_introduction/?language=javascript).
-
-:::important
-This guide uses the [Push v2](https://getstream.io/chat/docs/javascript/upgrading_to_push_v2/?language=javascript) Stream API.
-:::
-
-### Firebase configuration in Stream Dashboard
-
-To be able to receive notifications from Stream, you need to provide your Firebase credentials to Stream.
-
-Go to the [Firebase Console](https://console.firebase.google.com/), and select the project your app belongs to.
-
-Click on the gear icon next to **Project Overview** and navigate to **Project settings**.
-
-Navigate to the **Service Accounts** tab. Under **Firebase Admin SDK section**, click on **Generate new private key** button that will generate a _JSON_ file with the Firebase Credentials.
-
-<img src={FirebaseConsoleScreenshot} width="500" />
-
-Open the [Stream Dashboard](https://dashboard.getstream.io/) and navigate to your application.
-
-Select **Push notifications** from the left menu.
-
-Add a new **Firebase** configuration.
-
-Upload the _JSON_ file you created in the Firebase console.
-
-For more information about push configurations see our [Push Providers & Multi Bundle guide](https://getstream.io/chat/docs/javascript/push_providers_and_multi_bundle/?language=javascript)
-
-### Push templates in Stream Dashboard
-
-The [Capacitor Push API has some limitations around data-only notifications](https://capacitorjs.com/docs/apis/push-notifications#silent-push-notifications--data-only-notifications). The default Firebase APN notification payload works well with the Capacitor Push API, but if you need to send notifications for Android you have to update the **Notification Template** in the **Push Notifications** settings in the **Stream Dashboard**.
-
-Here is an example **Notification template**
-
-```
-{
-    "title": "{{ sender.name }} @ {{ channel.name }}",
-    "body": "{{ truncate message.text 2000 }}",
-    "click_action": "OPEN_ACTIVITY_1",
-    "sound": "default"
-}
-```
-
-You can read more about templates in our [Push Templates in v2 guide](https://getstream.io/chat/docs/javascript/push_templates_in_v2/?language=javascript).
-
-Add the following code to your `android/app/src/main/AndroidManifest.xml` file to open the app if the notification is clicked:
-
-```
-<intent-filter>
-  <action android:name="OPEN_ACTIVITY_1" />
-  <category android:name="android.intent.category.DEFAULT" />
-</intent-filter>
-```
-
-Add this element as a child to the `activity` element. "OPEN_ACTIVITY_1" is the "`click_action`" field from your Firebase Notification template.
diff --git a/docusaurus/angular_versioned_docs/version-4/code-examples/responsive-layout.mdx b/docusaurus/angular_versioned_docs/version-4/code-examples/responsive-layout.mdx
deleted file mode 100644
index ae6ae435..00000000
--- a/docusaurus/angular_versioned_docs/version-4/code-examples/responsive-layout.mdx
+++ /dev/null
@@ -1,214 +0,0 @@
----
-id: responsive-layout
-title: Responsive layout
----
-
-import ChatUILayoutScreenshot from "../assets/chat-ui-layout-screenshot.png";
-import ChannelHeaderWithMenu from "../assets/channel-header-with-menu-screenshot.png";
-
-:::caution
-This example is only applicable if you're using [theme-v2](../theming/introduction.mdx).
-:::
-
-Our SDK gives you maximum control over the layout of your chat application. This tutorial shows you a simple example of creating a layout.
-
-## Channel list, channel, and thread layout
-
-Let's create a simple chat application UI:
-
-```html
-<div id="root">
-  <stream-channel-list class="channel-list"></stream-channel-list>
-  <stream-channel class="channel">
-    <stream-channel-header> </stream-channel-header>
-    <stream-message-list></stream-message-list>
-    <stream-notification-list></stream-notification-list>
-    <stream-message-input></stream-message-input>
-    <stream-thread class="thread" name="thread">
-      <stream-message-list mode="thread"></stream-message-list>
-      <stream-message-input mode="thread"></stream-message-input>
-    </stream-thread>
-  </stream-channel>
-</div>
-```
-
-Let's add the layout for the [channel list](../components/ChannelListComponent.mdx), [channel](../components/ChannelComponent.mdx) and [thread](../components/ThreadComponent.mdx) components:
-
-```scss
-#root {
-  display: flex;
-  height: 100%;
-
-  .channel {
-    width: 100%;
-  }
-
-  .channel-list {
-    width: 30%;
-  }
-
-  .thread {
-    width: 45%;
-  }
-}
-```
-
-This how our chat application looks like:
-
-<img src={ChatUILayoutScreenshot} width="500" />
-
-This layout works fine on bigger screens, but we should create a separate layout for mobile devices.
-
-## Mobile layout
-
-On mobile screens, the thread and channel list components will overlay the channel component filling the whole screen.
-
-Let's start with the thread component:
-
-```scss
-#root {
-  display: flex;
-  height: 100%;
-
-  .channel {
-    width: 100%;
-  }
-
-  // Overlay for thread
-  .thread {
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    z-index: 2;
-  }
-
-  @media screen and (min-width: 768px) {
-    .channel-list {
-      width: 30%;
-    }
-
-    .thread {
-      width: 45%;
-      position: initial;
-      z-index: auto;
-    }
-  }
-}
-```
-
-For the channel list component, we should add a menu button to toggle the channel list.
-
-The [ChannelHeader](../components/ChannelHeaderComponent.mdx) component has a slot where you can inject your own' menu button template:
-
-```html
-<stream-channel-header>
-  <button class="menu-button" (click)="isMenuOpen = !isMenuOpen">
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M3 8V6H21V8H3ZM3 13H21V11H3V13ZM3 18H21V16H3V18Z"
-        [attr.fill]="(theme$ | async) === 'light' ? 'black' : 'white'"
-      />
-    </svg>
-  </button>
-</stream-channel-header>
-```
-
-```scss
-.menu-button {
-  border: none;
-  background-color: transparent;
-  cursor: pointer;
-  width: 50px;
-  height: 50px;
-}
-```
-
-In your component class:
-
-```typescript
-isMenuOpen = true;
-```
-
-This is what the channel header looks like:
-
-<img src={ChannelHeaderWithMenu} width="500" />
-
-Let's add a class to the [ChannelList component](../components/ChannelListComponent.mdx) based on the menu state:
-
-```html
-<stream-channel-list
-  class="channel-list menu-{{ isMenuOpen ? 'open' : 'close' }}"
-></stream-channel-list>
-```
-
-Provide the layout based on the menu state and hide the menu on bigger screens:
-
-```scss
-#root {
-  display: flex;
-  height: 100%;
-
-  .menu-open {
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    z-index: 3;
-  }
-
-  .menu-close {
-    width: 0;
-  }
-
-  .menu-button {
-    display: block;
-  }
-
-  .channel {
-    min-width: 0;
-    width: 100%;
-  }
-
-  .thread {
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    z-index: 2;
-  }
-
-  @media screen and (min-width: 768px) {
-    .menu-button {
-      display: none;
-    }
-
-    .channel-list {
-      width: 30%;
-      max-width: 420px;
-      position: initial;
-      z-index: auto;
-    }
-
-    .thread {
-      width: 45%;
-      position: initial;
-      z-index: auto;
-    }
-  }
-}
-```
-
-Lastly, implement auto close behavior for the channel list:
-
-```html
-<stream-channel-list
-  (click)="isMenuOpen = false"
-  class="channel-list menu-{{ isMenuOpen ? 'open' : 'close' }}"
-></stream-channel-list>
-```
diff --git a/docusaurus/angular_versioned_docs/version-4/components/AttachmentListComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/AttachmentListComponent.mdx
deleted file mode 100644
index a6b82eda..00000000
--- a/docusaurus/angular_versioned_docs/version-4/components/AttachmentListComponent.mdx
+++ /dev/null
@@ -1,163 +0,0 @@
-import AttachmentsScreenshot from "../assets/attachments-screenshot.png";
-import VoiceRecordingScreenshot from "../assets/voice-recording-screenshot.png";
-import ImageSizingScreenshot1 from "../assets/image-sizing-screenshot-1.png";
-import ImageSizingScreenshot2 from "../assets/image-sizing-screenshot-2.png";
-import ImageSizingScreenshot3 from "../assets/image-sizing-screenshot-3.png";
-import AttachmentSizeWarning from "../assets/attachment-size-warning.png";
-
-The `AttachmentList` component displays the attachments of a message. The following attachments are supported:
-
-- Images (including GIFs) are displayed inline
-- Videos are displayed inline
-- Voice recordings are displayed inline (the Angular SDK doesn't support recording, only playback)
-- Other files can be downloaded
-- Links in a message are enriched with built-in open graph URL scraping
-
-**Example 1** - different type of attachments:
-
-<img src={AttachmentsScreenshot} width="500" />
-
-**Example 2** - voice recording:
-
-<img src={VoiceRecordingScreenshot} width="500" />
-
-## Basic Usage
-
-A typical use case for the `AttachmentList` component would be to use in your custom components that will completely override the message component.
-
-**Example 1** - a basic example:
-
-```typescript
-@Component({
-  selector: "app-custom-message",
-  template: `
-    <stream-attachment-list
-      *ngIf="hasAttachment"
-      [attachments]="message.attachments"
-    ></stream-attachment-list>
-    <!-- Other parts of the custom message component -->
-  `,
-})
-export class CustomMessageComponent {
-  @Input() message: StreamMessage;
-  hasAttachment: boolean;
-}
-```
-
-## Customization
-
-You can use the [`AttachmentConfigurationService`](../services/AttachmentConfigurationService.mdx) to override certain attributes of attachments.
-
-You can provide your own attachment list component by the [`CustomTemplatesService`](../services/CustomTemplatesService.mdx)
-
-You can override attachment display by attachment types, here are the available options for this:
-
-- [Single image](../services/CustomTemplatesService.mdx/#imageattachmenttemplate): this template is used if a message has only one image attachment. Please note that your template is responsible for proper image sizing (see below).
-- [Gallery image](../services/CustomTemplatesService.mdx/#galleryattachmenttemplate): this template is used if a message has multiple image attachments, the template will receive all image attachments. Please note that your template is responsible for proper image sizing (see below).
-- [Video attachment](../services/CustomTemplatesService.mdx/#videoattachmenttemplate): this template is used to display video attachments. Please note that your template is responsible for proper image sizing (see below).
-- [File attachment](../services/CustomTemplatesService.mdx/#fileattachmenttemplate): this template is used to display file type attachments
-- [Voice recording](../services/CustomTemplatesService.mdx/#voicerecordingattachmenttemplate): this template is used to display voice recordings
-- [Card attachment](../services/CustomTemplatesService.mdx/#cardattachmenttemplate): this template is used to display GIFs or open graph URL data
-- [Attachment actions](../services/CustomTemplatesService.mdx/#attachmentactionstemplate): this template is used to display attachment actions
-
-### Image and video sizing
-
-The following section details how the width and height of images and videos uploaded from files are computed.
-
-#### Maximum size
-
-You can control the maximum size of images and videos with the [`--str-chat__attachment-max-width`](../theming/component-variables.mdx) CSS variable (available only in [theme-v2](../theming/introduction.mdx)). The value of this variable must be a value that can be computed to a valid pixel value using the [`getComputedStyle`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) method (for example: `300px`, `10rem`, `calc(300px - var(--margin))`, but not `100%`). If you provide an invalid value, the image and video sizing can break, which can lead to scrolling issues inside the message list (for example the message list isn't scrolled to the bottom when you open a channel).
-
-If you set an invalid value to the variable, you'll see a warning on the browser's console:
-
-<img src={AttachmentSizeWarning} width="800" />
-
-#### File size optimization
-
-Based on the CSS settings provided for images and videos, the SDK will load an image (or thumbnail image in case of a video file) with a reduced file size while still providing sufficient image quality for the given dimensions. This will result in less network traffic and faster image load for users.
-
-#### Aspect ratio
-
-The following description is applicable for [theme-v2](../theming/introduction.mdx).
-
-The SDK will try to display images and videos with their original aspect ratio, however this isn't always guaranteed (in those cases a cropped image will be displayed). Three notable exceptions are:
-
-1. if a message contains multiple lines of texts and/or multiple attachments, the image/video might be stretched to its `max-width`
-
-**Example 1** - message with one line of text
-
-<img src={ImageSizingScreenshot1} width="200" />
-
-**Example 2** - message with multiple lines of text
-
-<img src={ImageSizingScreenshot2} width="200" />
-
-2. in Safari, images/videos with portrait orientation are stretched to `max-width`
-
-**Example 3** - portrait images in Safari
-
-<img src={ImageSizingScreenshot3} width="200" />
-
-3. if the image/video can't be rendered with the original aspect ratio given the `max-width` and `max-height` constraints of the host HTML element
-
-:::important
-**File size optimization** and maintaining **aspect ratio** uses features provided by Stream's CDN. If you're using your **own CDN** you'll likely have to provide your own implementation for this. You can do this using the [`AttachmentConfigurationService`](../services/AttachmentConfigurationService.mdx).
-:::
-
-:::danger
-**If you're planning to rewrite attachment sizing with your own CSS code** it's important to note that:
-
-The sizing logic for images and videos inside the [`AttachmentConfigurationService`](../services/AttachmentConfigurationService.mdx) requires that host elements of images and videos (usually `img` and `video` elements) have `max-height`/`height` and `max-width` properties defined and that these values can be computed to a valid pixel value using the [`getComputedStyle`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) (for more information refer to the [Maximum size](#maximum-size) section).
-:::
-
-[//]: # "Start of generated content"
-
-## Inputs and outputs
-
-### messageId
-
-• **messageId**: `undefined` \| `string`
-
-The id of the message the attachments belong to
-
-#### Defined in
-
-[lib/attachment-list/attachment-list.component.ts:40](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L40)
-
----
-
-### parentMessageId
-
-• **parentMessageId**: `undefined` \| `string`
-
-The parent id of the message the attachments belong to
-
-#### Defined in
-
-[lib/attachment-list/attachment-list.component.ts:44](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L44)
-
----
-
-### attachments
-
-• **attachments**: `Attachment`<`DefaultStreamChatGenerics`\>[] = `[]`
-
-The attachments to display
-
-#### Defined in
-
-[lib/attachment-list/attachment-list.component.ts:48](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L48)
-
----
-
-### imageModalStateChange
-
-• `Readonly` **imageModalStateChange**: `EventEmitter`<`"opened"` \| `"closed"`\>
-
-Emits the state of the image carousel window
-
-#### Defined in
-
-[lib/attachment-list/attachment-list.component.ts:52](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L52)
-
-[//]: # "End of generated content"
diff --git a/docusaurus/angular_versioned_docs/version-4/components/AttachmentPreviewListComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/AttachmentPreviewListComponent.mdx
deleted file mode 100644
index 8f91f3b4..00000000
--- a/docusaurus/angular_versioned_docs/version-4/components/AttachmentPreviewListComponent.mdx
+++ /dev/null
@@ -1,76 +0,0 @@
-import Screenshot from "../assets/attachment-preview-list-screenshot.png";
-
-The `AttachmentPreviewList` component displays a preview of the attachments uploaded to a message. Users can delete attachments using the preview component, or retry upload if it failed previously.
-
-The following attachment types are supported:
-
-- Images - displayed inline
-- Video files - no preview provided inside the message input, but displayed inline inside the message list
-- Other files - no preview provided, users can download the uploaded files
-
-**Example 1** - attachment previews
-
-<img src={Screenshot} width="1000" />
-
-## Basic Usage
-
-A typical use case for the `AttachmentPreviewList` component would be to use in your custom components that will completely override the message input component.
-
-**Example 1** - a basic example:
-
-```typescript
-@Component({
-  selector: "app-custom-message-input",
-  template: `
-    <stream-attachment-preview-list></stream-attachment-list>
-    <!-- Other parts of the custom message input component -->
-  `,
-})
-export class CustomMessageInputComponent {}
-```
-
-The `AttachmentPreviewList` uses the [`AttachmentService`](../services/AttachmentService.mdx) to display the attachment previews.
-
-## Customization
-
-You can provide your own attachment preview list component by the [`CustomTemplatesService`](../services/CustomTemplatesService.mdx)
-
-[//]: # "Start of generated content"
-
-## Inputs and outputs
-
-### attachmentUploads$
-
-• **attachmentUploads$**: `undefined` \| `Observable`<`AttachmentUpload`<`DefaultStreamChatGenerics`\>[]\>
-
-A stream that emits the current file uploads and their states
-
-#### Defined in
-
-[lib/attachment-preview-list/attachment-preview-list.component.ts:18](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L18)
-
----
-
-### retryAttachmentUpload
-
-• `Readonly` **retryAttachmentUpload**: `EventEmitter`<`File`\>
-
-An output to notify the parent component if the user tries to retry a failed upload
-
-#### Defined in
-
-[lib/attachment-preview-list/attachment-preview-list.component.ts:22](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L22)
-
----
-
-### deleteAttachment
-
-• `Readonly` **deleteAttachment**: `EventEmitter`<`AttachmentUpload`<`DefaultStreamChatGenerics`\>\>
-
-An output to notify the parent component if the user wants to delete a file
-
-#### Defined in
-
-[lib/attachment-preview-list/attachment-preview-list.component.ts:26](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L26)
-
-[//]: # "End of generated content"
diff --git a/docusaurus/angular_versioned_docs/version-4/components/AutocompleteTextareaComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/AutocompleteTextareaComponent.mdx
deleted file mode 100644
index 18f47273..00000000
--- a/docusaurus/angular_versioned_docs/version-4/components/AutocompleteTextareaComponent.mdx
+++ /dev/null
@@ -1,184 +0,0 @@
-The `AutocompleteTextarea` component is used by the [`MessageInput`](./MessageInputComponent.mdx) component to display the input HTML element where users can type their message.
-
-Message send can be triggered with the `Enter` key, new line can be added with the `Shift+Enter` combination.
-
-## Feature overview
-
-The `AutocompleteTextarea` extends the functionalities of the [`Textarea`](./TextareaComponent.mdx) component with autocomplete features:
-
-- users can mention other users in a message (transliteration is used to support languages with non-Latin characters)
-- users can send commands (for example /giphy)
-
-## Basic usage
-
-You can use the `AutocompleteTextarea` component if you want to create your own message input component to override the default one:
-
-```typescript
-@Component({
-  selector: "app-custom-message-input",
-  template: `
-    <stream-autocomplete-textarea
-      [(value)]="textareaValue"
-      (send)="messageSent()"
-      (userMentions)="mentionedUsers = $event"
-    ></stream-autocomplete-textarea>
-    <!-- Other parts of the custom message input component -->
-  `,
-})
-export class CustomMessageInputComponent {
-  textareaValue = "";
-  mentionedUsers = [];
-
-  messageSent() {
-    // Send your message
-  }
-}
-```
-
-[//]: # "Start of generated content"
-
-## Inputs and outputs
-
-### value
-
-• **value**: `string` = `''`
-
-The value of the input HTML element.
-
-#### Implementation of
-
-TextareaInterface.value
-
-#### Defined in
-
-[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:49](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L49)
-
----
-
-### placeholder
-
-• **placeholder**: `string` = `''`
-
-Placeholder of the textarea
-
-#### Implementation of
-
-TextareaInterface.placeholder
-
-#### Defined in
-
-[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:53](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L53)
-
----
-
-### areMentionsEnabled
-
-• **areMentionsEnabled**: `undefined` \| `boolean` = `true`
-
-If true, users can mention other users in messages. You can also set this input on the [`MessageInput`](./MessageInputComponent.mdx/#inputs-and-outputs) component.
-
-#### Implementation of
-
-TextareaInterface.areMentionsEnabled
-
-#### Defined in
-
-[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:57](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L57)
-
----
-
-### inputMode
-
-• **inputMode**: `"desktop"` \| `"mobile"`
-
-See [`MessageInputConfigService`](../services/MessageInputConfigService.mdx) for more information
-
-#### Implementation of
-
-TextareaInterface.inputMode
-
-#### Defined in
-
-[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:61](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L61)
-
----
-
-### mentionScope
-
-• **mentionScope**: `"channel"` \| `"application"` = `'channel'`
-
-The scope for user mentions, either members of the current channel of members of the application. You can also set this input on the [`MessageInput`](./MessageInputComponent.mdx/#inputs-and-outputs) component.
-
-#### Implementation of
-
-TextareaInterface.mentionScope
-
-#### Defined in
-
-[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:65](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L65)
-
----
-
-### autoFocus
-
-• **autoFocus**: `boolean` = `true`
-
-Enables or disables auto focus on the textarea element
-
-#### Implementation of
-
-TextareaInterface.autoFocus
-
-#### Defined in
-
-[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:69](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L69)
-
----
-
-### valueChange
-
-• `Readonly` **valueChange**: `EventEmitter`<`string`\>
-
-Emits the current value of the input element when a user types.
-
-#### Implementation of
-
-TextareaInterface.valueChange
-
-#### Defined in
-
-[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:73](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L73)
-
----
-
-### send
-
-• `Readonly` **send**: `EventEmitter`<`void`\>
-
-Emits when a user triggers a message send event (this happens when they hit the `Enter` key).
-
-#### Implementation of
-
-TextareaInterface.send
-
-#### Defined in
-
-[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:77](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L77)
-
----
-
-### userMentions
-
-• `Readonly` **userMentions**: `EventEmitter`<`UserResponse`<`DefaultGenerics`\>[]\>
-
-Emits the array of users that are mentioned in the message, it is updated when a user mentions a new user or deletes a mention.
-
-#### Implementation of
-
-TextareaInterface.userMentions
-
-#### Defined in
-
-[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:81](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L81)
-
-[//]: # "End of generated content"
diff --git a/docusaurus/angular_versioned_docs/version-4/components/AvatarComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/AvatarComponent.mdx
deleted file mode 100644
index 7284b013..00000000
--- a/docusaurus/angular_versioned_docs/version-4/components/AvatarComponent.mdx
+++ /dev/null
@@ -1,172 +0,0 @@
-The `Avatar` component displays the provided image, with fallback to the first letter of the optional name input.
-
-## Basic Usage
-
-A typical use case for the `Avatar` component would be to use in your custom components that will completely override a message component, or similar.
-
-**Example 1** - a basic example:
-
-```typescript
-@Component({
-  selector: "app-custom-message",
-  template: `
-    <stream-avatar [imageUrl]="imageUrl" [name]="name"></stream-avatar>
-    <!-- Other parts of the custom message component -->
-  `,
-})
-export class CustomMessageComponent {
-  imageUrl =
-    "https://pbs.twimg.com/profile_images/897621870069112832/dFGq6aiE_400x400.jpg";
-  name = "Roy";
-}
-```
-
-## Customization
-
-You can provide your own avatar component using the [`CustomTemplatesService`](../services/CustomTemplatesService/#avatartemplate)
-
-This will override the avatar for all locations (for example: message sender, channel preview). In case you want to override it only for selected locations, you can create a custom template like this:
-
-```html
-<ng-template
-  #avatarTemplate
-  let-name="name"
-  let-imageUrl="imageUrl"
-  let-size="size"
-  let-type="type"
-  let-location="location"
-  let-user="user"
-  let-channel="channel"
-  let-initialsType="initialsType"
-  let-showOnlineIndicator="showOnlineIndicator"
->
-  <my-custom-avatar
-    *ngIf="location === 'message-sender'; else defaultAvatar"
-  ></my-custom-avatar>
-  <ng-template #defaultAvatar>
-    <stream-avatar
-      [name]="name"
-      [imageUrl]="imageUrl"
-      [size]="size"
-      [type]="type"
-      [location]="location"
-      [user]="user"
-      [channel]="channel"
-      [initialsType]="initialsType"
-      [showOnlineIndicator]="showOnlineIndicator"
-    ></stream-avatar>
-  </ng-template>
-</ng-template>
-```
-
-[//]: # "Start of generated content"
-
-## Inputs and outputs
-
-### name
-
-• **name**: `undefined` \| `string`
-
-An optional name of the image, used for fallback image or image title (if `imageUrl` is provided)
-
-#### Defined in
-
-[lib/avatar/avatar.component.ts:35](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L35)
-
----
-
-### imageUrl
-
-• **imageUrl**: `undefined` \| `string`
-
-The URL of the image to be displayed. If the image can't be displayed the first letter of the name input is displayed.
-
-#### Defined in
-
-[lib/avatar/avatar.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L39)
-
----
-
-### size
-
-• **size**: `number` = `32`
-
-The size in pixels of the avatar image.
-
-#### Defined in
-
-[lib/avatar/avatar.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L43)
-
----
-
-### location
-
-• **location**: `undefined` \| `AvatarLocation`
-
-The location the avatar will be displayed in
-
-#### Defined in
-
-[lib/avatar/avatar.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L47)
-
----
-
-### channel
-
-• `Optional` **channel**: `Channel`<`DefaultStreamChatGenerics`\>
-
-The channel the avatar belongs to (if avatar of a channel is displayed)
-
-#### Defined in
-
-[lib/avatar/avatar.component.ts:51](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L51)
-
----
-
-### user
-
-• `Optional` **user**: `User`<`DefaultStreamChatGenerics`\>
-
-The user the avatar belongs to (if avatar of a user is displayed)
-
-#### Defined in
-
-[lib/avatar/avatar.component.ts:55](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L55)
-
----
-
-### type
-
-• **type**: `undefined` \| `AvatarType`
-
-The type of the avatar: channel if channel avatar is displayed, user if user avatar is displayed
-
-#### Defined in
-
-[lib/avatar/avatar.component.ts:59](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L59)
-
----
-
-### showOnlineIndicator
-
-• **showOnlineIndicator**: `boolean` = `true`
-
-If a channel avatar is displayed, and if the channel has exactly two members a green dot is displayed if the other member is online. Set this flag to `false` to turn off this behavior.
-
-#### Defined in
-
-[lib/avatar/avatar.component.ts:63](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L63)
-
----
-
-### initialsType
-
-• **initialsType**: `"first-letter-of-first-word"` \| `"first-letter-of-each-word"` = `'first-letter-of-first-word'`
-
-If channel/user image isn't provided the initials of the name of the channel/user is shown instead, you can choose how the initals should be computed
-
-#### Defined in
-
-[lib/avatar/avatar.component.ts:67](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L67)
-
-[//]: # "End of generated content"
diff --git a/docusaurus/angular_versioned_docs/version-4/components/AvatarPlaceholderComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/AvatarPlaceholderComponent.mdx
deleted file mode 100644
index 45bf3f1f..00000000
--- a/docusaurus/angular_versioned_docs/version-4/components/AvatarPlaceholderComponent.mdx
+++ /dev/null
@@ -1,113 +0,0 @@
-The `AvatarPlaceholder` component displays the [default avatar](./AvatarComponent.mdx) unless a [custom template](../services/CustomTemplatesService.mdx) is provided. This component is used by the SDK internally, you likely won't need to use it.
-
-[//]: # "Start of generated content"
-
-## Inputs and outputs
-
-### name
-
-• **name**: `undefined` \| `string`
-
-An optional name of the image, used for fallback image or image title (if `imageUrl` is provided)
-
-#### Defined in
-
-[lib/avatar-placeholder/avatar-placeholder.component.ts:23](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L23)
-
----
-
-### imageUrl
-
-• **imageUrl**: `undefined` \| `string`
-
-The URL of the image to be displayed. If the image can't be displayed the first letter of the name input is displayed.
-
-#### Defined in
-
-[lib/avatar-placeholder/avatar-placeholder.component.ts:27](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L27)
-
----
-
-### size
-
-• **size**: `number` = `32`
-
-The size in pixels of the avatar image.
-
-#### Defined in
-
-[lib/avatar-placeholder/avatar-placeholder.component.ts:31](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L31)
-
----
-
-### location
-
-• **location**: `undefined` \| `AvatarLocation`
-
-The location the avatar will be displayed in
-
-#### Defined in
-
-[lib/avatar-placeholder/avatar-placeholder.component.ts:35](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L35)
-
----
-
-### channel
-
-• `Optional` **channel**: `Channel`<`DefaultStreamChatGenerics`\>
-
-The channel the avatar belongs to (if avatar of a channel is displayed)
-
-#### Defined in
-
-[lib/avatar-placeholder/avatar-placeholder.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L39)
-
----
-
-### user
-
-• `Optional` **user**: `User`<`DefaultStreamChatGenerics`\>
-
-The user the avatar belongs to (if avatar of a user is displayed)
-
-#### Defined in
-
-[lib/avatar-placeholder/avatar-placeholder.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L43)
-
----
-
-### type
-
-• **type**: `undefined` \| `AvatarType`
-
-The type of the avatar: channel if channel avatar is displayed, user if user avatar is displayed
-
-#### Defined in
-
-[lib/avatar-placeholder/avatar-placeholder.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L47)
-
----
-
-### initialsType
-
-• **initialsType**: `"first-letter-of-first-word"` \| `"first-letter-of-each-word"` = `'first-letter-of-first-word'`
-
-If channel/user image isn't provided the initials of the name of the channel/user is shown instead, you can choose how the initals should be computed
-
-#### Defined in
-
-[lib/avatar-placeholder/avatar-placeholder.component.ts:51](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L51)
-
----
-
-### showOnlineIndicator
-
-• **showOnlineIndicator**: `boolean` = `true`
-
-If a channel avatar is displayed, and if the channel has exactly two members a green dot is displayed if the other member is online. Set this flag to `false` to turn off this behavior.
-
-#### Defined in
-
-[lib/avatar-placeholder/avatar-placeholder.component.ts:57](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L57)
-
-[//]: # "End of generated content"
diff --git a/docusaurus/angular_versioned_docs/version-4/components/ChannelComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/ChannelComponent.mdx
deleted file mode 100644
index 2ae29307..00000000
--- a/docusaurus/angular_versioned_docs/version-4/components/ChannelComponent.mdx
+++ /dev/null
@@ -1,29 +0,0 @@
-The `Channel` component is a container component that displays the [`ChannelHeader`](./ChannelHeaderComponent.mdx), [`MessageList`](./MessageListComponent.mdx), [`NotificationList`](./NotificationListComponent.mdx), [`EditMessageForm`](./EditMessageFormComponent.mdx), [`MessageBouncePrompt`](./MessageBouncePromptComponent.mdx) and [`MessageInput`](./MessageInputComponent.mdx) components. You can also provide the [`Thread`](./ThreadComponent.mdx) component to use message [threads](https://getstream.io/chat/docs/javascript/threads/?language=javascript).
-
-## Usage
-
-```html
-<div id="root">
-  <stream-channel-list></stream-channel-list>
-  <stream-channel>
-    <!-- Main messages in the channel -->
-    <stream-channel-header></stream-channel-header>
-    <stream-message-list></stream-message-list>
-    <stream-message-input></stream-message-input>
-    <!-- Main messages in the channel -->
-    <!-- Thread messages in the channel -->
-    <!-- The name attribute selects the slot for the thread component inside channel -->
-    <stream-thread name="thread">
-      <stream-message-list mode="thread"></stream-message-list>
-      <stream-message-input mode="thread"></stream-message-input>
-    </stream-thread>
-    <!-- Thread messages in the channel -->
-  </stream-channel>
-  <stream-notification-list></stream-notification-list>
-</div>
-```
-
-The `Channel` component doesn't do any settings, it's just displays its children components. The main purpose of this component is to provide the layout for the initial chat UI.
-
-[//]: # "Start of generated content"
-[//]: # "End of generated content"
diff --git a/docusaurus/angular_versioned_docs/version-4/components/ChannelHeaderComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/ChannelHeaderComponent.mdx
deleted file mode 100644
index 3e8211f4..00000000
--- a/docusaurus/angular_versioned_docs/version-4/components/ChannelHeaderComponent.mdx
+++ /dev/null
@@ -1,51 +0,0 @@
-import ChannelHeaderScreenshot from "../assets/channel-header-screenshot.png";
-
-The `ChannelHeader` component displays the avatar and name of the currently active channel along with member and watcher information. You can read about [the difference between members and watchers](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript#watchers-vs-members) in the platform documentation. Please note that number of watchers is only displayed if the user has [`connect-events` capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript)
-
-**Example 1** - Channel header:
-
-<img src={ChannelHeaderScreenshot} width="500" />
-
-## Customization
-
-If you create your own channel header, you can use the [`ChannelService`](../services/ChannelService.mdx) to access the currently active channel. Please note that, the default channel header also contains the menu button to [toggle the channel list](../services/ChannelListToggleService.mdx). Here is a simple implementation of a custom channel header to guide you:
-
-```typescript
-@Component({
-  selector: "custom-channel-header",
-  template: `
-    <button (click)="toggleMenu()">Menu</button>
-    {{ activeChannel?.data?.name }}
-  `,
-  styles: [],
-})
-export class ChannelHeaderComponent {
-  activeChannel: Channel | undefined;
-
-  constructor(
-    private channelService: ChannelService,
-    private channelListToggleService: ChannelListToggleService
-  ) {
-    this.channelService.activeChannel$.subscribe(
-      (c) => (this.activeChannel = c)
-    );
-  }
-
-  toggleMenu() {
-    this.channelListToggleService.toggle();
-  }
-}
-```
-
-If you want to create your own channel component check out our [customization guide](../concepts/customization.mdx) for more information.
-
-## Channel actions
-
-By default no channel action is displayed, but it's possible to [add action buttons to the channel header](../services/CustomTemplatesService.mdx/#channelactionstemplate) component. You can follow our [code example](../code-examples/channel-invites.mdx) that implements the invite action (you can implement other kind of actions as well, for example edit).
-
-## Menu button
-
-You can provide a menu button template to the channel header, the [responsive layout guide](../code-examples/responsive-layout.mdx) shows how you can use this to toggle the channel list on mobile screens.
-
-[//]: # "Start of generated content"
-[//]: # "End of generated content"
diff --git a/docusaurus/angular_versioned_docs/version-4/components/ChannelListComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/ChannelListComponent.mdx
deleted file mode 100644
index 50a424fa..00000000
--- a/docusaurus/angular_versioned_docs/version-4/components/ChannelListComponent.mdx
+++ /dev/null
@@ -1,49 +0,0 @@
-The `ChannelList` component renders the list of channels.
-
-The `ChannelList` displays channels using pagination, new channels are loaded if the user clicks the "Load more" button.
-
-The channel list is always visible on desktop devices, on mobile devices, the list can be opened or closed controlled by a button in the [`ChannelHeader`](./ChannelHeaderComponent.mdx) component.
-
-## Customization
-
-**Example 1** - Using a custom channel list component
-
-See our [customization guide](../concepts/customization.mdx) on how to provide your own channel list component.
-
-:::note
-If you want to create your own channel list, you can use the [`ChannelService`](../services/ChannelService.mdx) to receive the channels and interact with the Stream API.
-
-Other building blocks, that you might find useful:
-
-### Toggle
-
-The channel list is always visible on desktop devices, on mobile devices, the list can be opened or closed controlled by a button in the `ChannelHeader` component. The open/close mechanism is implemented by the [`ChannelListToggleService`](../services/ChannelListToggleService.mdx).
-
-### Loading indicator
-
-The `ChannelList` component uses the [`LoadingIndicator`](./LoadingIndicatorComponent.mdx) component to display a spinner while more channels are being fetched.
-
-### Icons
-
-The `ChannelList` component uses the [`Icon`](./IconComponent.mdx) component to display icons.
-:::
-
-**Example 2** - Using a custom channel preview component
-
-If you only want to customize the channel preview items (not the whole list), see the [channel preview customization](./ChannelPreviewComponent.mdx/#customization) guide.
-
-**Example 3** - Content injection points
-
-It's possible to inject your own content to the top or to the bottom of the channel list:
-
-```html
-<stream-channel-list>
-  <input channel-list-top placeholder="Search" />
-  <button channel-list-bottom>Add new channel</button>
-</stream-channel-list>
-```
-
-Use the `channel-list-top` attribute to inject content at the top of the channel list, and the `channel-list-bottom` to display content at the bottom of the channel list.
-
-[//]: # "Start of generated content"
-[//]: # "End of generated content"
diff --git a/docusaurus/angular_versioned_docs/version-4/components/ChannelPreviewComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/ChannelPreviewComponent.mdx
deleted file mode 100644
index aa9b2a73..00000000
--- a/docusaurus/angular_versioned_docs/version-4/components/ChannelPreviewComponent.mdx
+++ /dev/null
@@ -1,42 +0,0 @@
-import ChannelPreview from "../assets/channel-preview.png";
-import ChannelPreviewInfo from "../assets/channel-preview-info.png";
-
-The `ChannelPreview` component displays a channel preview in the channel list, it consists of the image, name (or list of members if name isn't defined) and latest message of the channel.
-
-<img src={ChannelPreview} width="500" />
-
-## Basic usage
-
-The `ChannelPreview` component is displayed inside the built-in [channel list component](../../components/ChannelListComponent). If you're building you own channel list, this is how you can use this component:
-
-```html
-<stream-channel-preview [channel]="channel"></stream-channel-preview>
-```
-
-## Customization
-
-1. You can provide your own template for the channel preview info (marked with the red rectangle on the screenshot) by providing your own template for the [`customTemplatesService.channelPreviewInfoTemplate$`](../../services/CustomTemplatesService/#channelpreviewinfotemplate).
-
-<img src={ChannelPreviewInfo} width="500" />
-
-2. If you want to customize the channel avatar, please refer to the [avatar customization section](../../components/AvatarComponent/#customization)
-
-3. You can replace the whole component by providing your own template for the [`customTemplatesService.channelPreviewInfoTemplate$`](../../services/CustomTemplatesService/#channelpreviewtemplate).
-
-4. The [`MessageService`](../services/MessageService.mdx) provides some customization options for message display the are applied to both the message and channel preview components
-
-[//]: # "Start of generated content"
-
-## Inputs and outputs
-
-### channel
-
-• **channel**: `undefined` \| `Channel`<`DefaultStreamChatGenerics`\>
-
-The channel to be displayed
-
-#### Defined in
-
-[lib/channel-preview/channel-preview.component.ts:28](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel-preview/channel-preview.component.ts#L28)
-
-[//]: # "End of generated content"
diff --git a/docusaurus/angular_versioned_docs/version-4/components/EditMessageFormComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/EditMessageFormComponent.mdx
deleted file mode 100644
index 4af82aba..00000000
--- a/docusaurus/angular_versioned_docs/version-4/components/EditMessageFormComponent.mdx
+++ /dev/null
@@ -1,25 +0,0 @@
-The edit message form displays a modal that's opened when a user edits a message. The component uses the [`MessageActionsService`](../../services/MessageActionsService) to know which message is being edited.
-
-By default this is displayed within the [`stream-channel` component](../../components/ChannelComponent).
-
-## Usage
-
-```typescript
-constructor(private messageActionsService: MessageActionsService) {
-  // Open the modal
-  this.messageActionsService.messageToEdit$.next(<stream message>);
-  // Close the modal
-  this.messageActionsService.messageToEdit$.next(undefined);
-}
-```
-
-```html
-<stream-edit-message-form></stream-edit-message-form>
-```
-
-## Customization
-
-You can provide your own custom component using the [`customTemplatesService.editMessageFormTemplate$` property](../../services/CustomTemplatesService/#editmessageformtemplate)
-
-[//]: # "Start of generated content"
-[//]: # "End of generated content"
diff --git a/docusaurus/angular_versioned_docs/version-4/components/IconComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/IconComponent.mdx
deleted file mode 100644
index dad666b5..00000000
--- a/docusaurus/angular_versioned_docs/version-4/components/IconComponent.mdx
+++ /dev/null
@@ -1,50 +0,0 @@
-The `Icon` component can be used to display different icons (i. e. message delivered icon).
-
-## Basic usage
-
-A typical use case for the `Icon` component would be to use in your custom components.
-
-```typescript
-@Component({
-  selector: "app-custom-message",
-  template: `
-    <stream-icon icon="delivered-icon"></stream-icon>
-    <!-- Other parts of the custom message component -->
-  `,
-})
-export class CustomMessageComponent {
-  @Input() message: StreamMessage;
-}
-```
-
-## Customization
-
-You can provide your own icon component by the [`CustomTemplatesService`](../services/CustomTemplatesService.mdx)
-
-[//]: # "Start of generated content"
-
-## Inputs and outputs
-
-### icon
-
-• **icon**: `undefined` \| `Icon`
-
-The icon to display, the list of [supported icons](https://github.com/GetStream/stream-chat-angular/tree/master/projects/stream-chat-angular/src/lib/icon/icon.component.ts) can be found on GitHub.
-
-#### Defined in
-
-[lib/icon/icon.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/icon/icon.component.ts#L43)
-
----
-
-### size
-
-• **size**: `undefined` \| `number`
-
-The size of the icon (in pixels)
-
-#### Defined in
-
-[lib/icon/icon.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/icon/icon.component.ts#L47)
-
-[//]: # "End of generated content"
diff --git a/docusaurus/angular_versioned_docs/version-4/components/IconPlaceholderComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/IconPlaceholderComponent.mdx
deleted file mode 100644
index 56698fa8..00000000
--- a/docusaurus/angular_versioned_docs/version-4/components/IconPlaceholderComponent.mdx
+++ /dev/null
@@ -1,29 +0,0 @@
-The `IconPlaceholder` component displays the [default icons](./IconComponent.mdx) unless a [custom template](../services/CustomTemplatesService.mdx) is provided. This component is used by the SDK internally, you likely won't need to use it.
-
-[//]: # "Start of generated content"
-
-## Inputs and outputs
-
-### icon
-
-• **icon**: `undefined` \| `Icon`
-
-The icon to display, the list of [supported icons](https://github.com/GetStream/stream-chat-angular/tree/master/projects/stream-chat-angular/src/lib/icon/icon.component.ts) can be found on GitHub.
-
-#### Defined in
-
-[lib/icon-placeholder/icon-placeholder.component.ts:18](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/icon-placeholder/icon-placeholder.component.ts#L18)
-
----
-
-### size
-
-• **size**: `undefined` \| `number`
-
-The size of the icon (in pixels)
-
-#### Defined in
-
-[lib/icon-placeholder/icon-placeholder.component.ts:22](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/icon-placeholder/icon-placeholder.component.ts#L22)
-
-[//]: # "End of generated content"
diff --git a/docusaurus/angular_versioned_docs/version-4/components/LoadingIndicatorComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/LoadingIndicatorComponent.mdx
deleted file mode 100644
index 87271456..00000000
--- a/docusaurus/angular_versioned_docs/version-4/components/LoadingIndicatorComponent.mdx
+++ /dev/null
@@ -1,53 +0,0 @@
-The `LoadingIndicator` component displays a spinner to indicate that an action is in progress.
-
-## Basic usage
-
-A typical use case for the `LoadingIndicator` component would be to use in your custom components that will completely override a message component, or similar.
-
-```typescript
-@Component({
-  selector: "app-custom-message",
-  template: `
-    <stream-loading-indicator
-      *ngIf="message.status === 'sending'"
-      [size]="20"
-    ></stream-loading-indicator>
-    <!-- Other parts of the custom message component -->
-  `,
-})
-export class CustomMessageComponent {
-  @Input() message: StreamMessage;
-}
-```
-
-## Customization
-
-You can provide your own loading indicator component by the [`CustomTemplatesService`](../services/CustomTemplatesService.mdx)
-
-[//]: # "Start of generated content"
-
-## Inputs and outputs
-
-### size
-
-• **size**: `number` = `15`
-
-The size of the indicator (in pixels)
-
-#### Defined in
-
-[lib/loading-indicator/loading-indicator.component.ts:16](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/loading-indicator/loading-indicator.component.ts#L16)
-
----
-
-### color
-
-• **color**: `string`
-
-The color of the indicator
-
-#### Defined in
-
-[lib/loading-indicator/loading-indicator.component.ts:21](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/loading-indicator/loading-indicator.component.ts#L21)
-
-[//]: # "End of generated content"
diff --git a/docusaurus/angular_versioned_docs/version-4/components/LoadingIndicatorPlaceholderComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/LoadingIndicatorPlaceholderComponent.mdx
deleted file mode 100644
index f68fc87c..00000000
--- a/docusaurus/angular_versioned_docs/version-4/components/LoadingIndicatorPlaceholderComponent.mdx
+++ /dev/null
@@ -1,29 +0,0 @@
-The `LoadingInficatorPlaceholder` component displays the [default loading indicator](./LoadingIndicatorComponent.mdx) unless a [custom template](../services/CustomTemplatesService.mdx) is provided. This component is used by the SDK internally, you likely won't need to use it.
-
-[//]: # "Start of generated content"
-
-## Inputs and outputs
-
-### size
-
-• **size**: `number` = `15`
-
-The size of the indicator (in pixels)
-
-#### Defined in
-
-[lib/loading-indicator-placeholder/loading-indicator-placeholder.component.ts:17](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/loading-indicator-placeholder/loading-indicator-placeholder.component.ts#L17)
-
----
-
-### color
-
-• **color**: `string`
-
-The color of the indicator
-
-#### Defined in
-
-[lib/loading-indicator-placeholder/loading-indicator-placeholder.component.ts:22](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/loading-indicator-placeholder/loading-indicator-placeholder.component.ts#L22)
-
-[//]: # "End of generated content"
diff --git a/docusaurus/angular_versioned_docs/version-4/components/MessageActionsBoxComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/MessageActionsBoxComponent.mdx
deleted file mode 100644
index 8851eac7..00000000
--- a/docusaurus/angular_versioned_docs/version-4/components/MessageActionsBoxComponent.mdx
+++ /dev/null
@@ -1,137 +0,0 @@
-import MessageActionsScreenshot from "../assets/message-actions-screenshot.png";
-
-The `MessageActionsBox` component displays a list of message actions (i.e edit), that can be opened or closed. You can find the [list of the supported actions](../concepts/message-interactions.mdx) in the message interaction guide.
-
-**Example 1** - example message actions with the message component:
-
-<img src={MessageActionsScreenshot} width="500" />
-
-## Basic usage
-
-A typical use case for the `MessageActionsBox` component would be to use in your custom components that will completely override the message component.
-
-```typescript
-@Component({
-  selector: "app-custom-message",
-  template: `
-    <stream-message-actions-box
-      [isOpen]="isActionBoxOpen"
-      [isMine]="isMessageSentByCurrentUser"
-    ></stream-message-actions-box>
-    <!-- Other parts of the custom message component -->
-  `,
-})
-export class CustomMessageComponent {
-  @Input() message: StreamMessage;
-  isActionBoxOpen: boolean;
-  isMessageSentByCurrentUser: boolean;
-}
-```
-
-## Customization
-
-- You can provide your own message actions box component (or just a template for the items) by the [`CustomTemplatesService`](../services/CustomTemplatesService.mdx).
-- You can extend the built-in actions with custom actions, for more info see the [`MessageActionsService`](../../services/MessageActionsService/#customactions)
-- You can also provide a custom event handler method to be called when the message actions button is clicked, for more info see the [`MessageActionsService`](../../services/MessageActionsService/#customactionclickhandler)
-
-[//]: # "Start of generated content"
-
-## Inputs and outputs
-
-### isOpen
-
-• **isOpen**: `boolean` = `false`
-
-Indicates if the list should be opened or closed. Adding a UI element to open and close the list is the parent's component responsibility.
-
-**`deprecated`** No need for this since [theme-v2](../theming/introduction.mdx)
-
-#### Defined in
-
-[lib/message-actions-box/message-actions-box.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L39)
-
----
-
-### isMine
-
-• **isMine**: `boolean` = `false`
-
-Indicates if the message actions are belonging to a message that was sent by the current user or not.
-
-#### Defined in
-
-[lib/message-actions-box/message-actions-box.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L43)
-
----
-
-### message
-
-• **message**: `undefined` \| `StreamMessage`<`DefaultStreamChatGenerics`\>
-
-The message the actions will be executed on
-
-#### Defined in
-
-[lib/message-actions-box/message-actions-box.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L47)
-
----
-
-### enabledActions
-
-• **enabledActions**: `string`[] = `[]`
-
-The list of [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript) that are enabled for the current user, the list of [supported interactions](../concepts/message-interactions.mdx) can be found in our message interaction guide. Unathorized actions won't be displayed on the UI.
-
-#### Defined in
-
-[lib/message-actions-box/message-actions-box.component.ts:51](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L51)
-
----
-
-### customActions
-
-• **customActions**: `CustomMessageActionItem`<`DefaultStreamChatGenerics`\>[] = `[]`
-
-A list of custom message actions to be displayed in the action box
-
-In the next major release this will be released with `messageReactionsService.customActions$`
-
-More information: https://getstream.io/chat/docs/sdk/angular/services/MessageActionsService
-
-#### Defined in
-
-[lib/message-actions-box/message-actions-box.component.ts:59](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L59)
-
----
-
-### displayedActionsCount
-
-• `Readonly` **displayedActionsCount**: `EventEmitter`<`number`\>
-
-The number of authorized actions (it can be less or equal than the number of enabled actions)
-
-**`deprecated`** components should use `messageReactionsService.getAuthorizedMessageActionsCount` method
-
-More information: https://getstream.io/chat/docs/sdk/angular/services/MessageActionsService
-
-#### Defined in
-
-[lib/message-actions-box/message-actions-box.component.ts:67](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L67)
-
----
-
-### isEditing
-
-• `Readonly` **isEditing**: `EventEmitter`<`boolean`\>
-
-An event which emits `true` if the edit message modal is open, and `false` when it is closed.
-
-**`deprecated`** components should use `messageReactionsService.messageToEdit$` Observable
-
-More information: https://getstream.io/chat/docs/sdk/angular/services/MessageActionsService
-
-#### Defined in
-
-[lib/message-actions-box/message-actions-box.component.ts:75](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L75)
-
-[//]: # "End of generated content"
diff --git a/docusaurus/angular_versioned_docs/version-4/components/MessageBouncePromptComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/MessageBouncePromptComponent.mdx
deleted file mode 100644
index eb1d3011..00000000
--- a/docusaurus/angular_versioned_docs/version-4/components/MessageBouncePromptComponent.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-import Screenshot from "../assets/message-bounce-screenshot.png";
-
-The component watches for the [`channelService.bouncedMessage$` stream](../../services/ChannelService/#bouncedmessage) and opens the bounce modal if a message is emitted.
-
-To bounce messages, you need to set up [semantic filters for moderation](https://getstream.io/automated-moderation/docs/automod_configuration/?q=semantic%20filters).
-
-## Usage
-
-To bounce messages, you need to set up [semantic filters for moderation](https://getstream.io/automated-moderation/docs/automod_configuration/?q=semantic%20filters).
-
-When a user tries to send a message that voilates the content guidelines set up by a semantic filter the `StreamMessage` object will have the following format:
-
-- `type` will be `error`
-- the `moderation_details` property will contain the details of the error
-
-The built-in [message component](../../components/MessageComponent) will open the bounce prompt when a bounced message is clicked. If you have a custom UI, this is how you can do that:
-
-```typescript
-constructor(private channelService: ChannelService) {
-  // Open the modal
-  this.messageActionsService.bouncedMessage$.next(<stream message>);
-  // Close the modal
-  this.messageActionsService.bouncedMessage$.next(undefined);
-}
-```
-
-The built-in [channel component](../../components/ChannelComponent) displays the `stream-message-bounce-prompt` component. If you have a custom UI, this is how you can do that:
-
-```html
-<stream-message-bounce-prompt></stream-message-bounce-prompt>
-```
-
-<img src={Screenshot} width="1000" />
-
-## Customization
-
-You can provide your own custom component using the [`customTemplatesService.messageBouncePromptTemplate$` property](../../services/CustomTemplatesService/#messagebounceprompttemplate)
-
-[//]: # "Start of generated content"
-[//]: # "End of generated content"
diff --git a/docusaurus/angular_versioned_docs/version-4/components/MessageComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/MessageComponent.mdx
deleted file mode 100644
index 4592bb3a..00000000
--- a/docusaurus/angular_versioned_docs/version-4/components/MessageComponent.mdx
+++ /dev/null
@@ -1,140 +0,0 @@
-import MessageScreenshot from "../assets/message-screenshot.png";
-import MessageActionsScreenshot from "../assets/message-actions-screenshot.png";
-import MessageReactionsScreenshot from "../assets/message-reactions-screenshot.png";
-
-The `Message` component displays a message with additional information such as sender and date, and enables [interaction with the message (for example edit or react)](../concepts/message-interactions.mdx).
-
-**Example 1** - example message:
-
-<img src={MessageScreenshot} width="500" />
-
-**Example 2** - message with reactions:
-
-<img src={MessageReactionsScreenshot} width="500" />
-
-**Example 3** - message actions:
-
-<img src={MessageActionsScreenshot} width="500" />
-
-## Customization
-
-The message list uses the `Message` component to display messages, if you want to replace that with your own custom component, you can do that by providing it to the [`CustomTemplatesService`](../services/CustomTemplatesService.mdx/#messagetemplate). It's also possible to just override parts of the message component.
-
-The `Message` component uses the [`DateParserService`](../services/DateParserService.mdx) to create user-friendly dates, you can override the date-parsing methods with your own functions.
-
-The [`MessageService`](../services/MessageService.mdx) has additional customization options.
-
-:::note
-
-If you want to build your own `Message` component, you might find the following building blocks useful:
-
-### Avatar
-
-The `Message` component uses the [`Avatar`](./AvatarComponent.mdx) component to display the sender's photo.
-
-### Message actions
-
-The `Message` component uses the [`MessageActionsBox`](./MessageActionsBoxComponent.mdx) component to enable interaction with the message (edit).
-
-### Message reactions
-
-The `Message` component uses the [`MessageReactions`](./MessageReactionsComponent.mdx) component to display reactions of a message, and enable reacting to a message.
-
-### Attachments
-
-The `Message` component uses the [`AttachmentList`](./AttachmentListComponent.mdx) component to display the attachments of the message.
-
-### Read by
-
-The `Message` component uses the [`listUsers`](https://github.com/GetStream/stream-chat-angular/tree/master/projects/stream-chat-angular/src/lib/list-users.ts) utility function to display the list of people who have read a particular message in a user friendly way (for example _Bob, Sophie, Jack, Rose, John and 1 more_).
-
-### Loading indicator
-
-The `Message` component uses the [`LoadingIndicator`](./LoadingIndicatorComponent.mdx) component to display a spinner while the message is being sent.
-
-### Icons
-
-The `Message` component uses the [`Icon`](./IconComponent.mdx) component to display icons.
-:::
-
-## Mention template
-
-You can add interactions to mentions inside a message, follow our [mention actions guide](../code-examples/mention-actions.mdx) to get to know more.
-
-[//]: # "Start of generated content"
-
-## Inputs and outputs
-
-### message
-
-• **message**: `undefined` \| `StreamMessage`<`DefaultStreamChatGenerics`\>
-
-The message to be displayed
-
-#### Defined in
-
-[lib/message/message.component.ts:67](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message/message.component.ts#L67)
-
----
-
-### enabledMessageActions
-
-• **enabledMessageActions**: `string`[] = `[]`
-
-The list of [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript) that are enabled for the current user, the list of [supported interactions](../concepts/message-interactions.mdx) can be found in our message interaction guide. Unathorized actions won't be displayed on the UI. The [`MessageList`](./MessageListComponent.mdx) component automatically sets this based on [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript).
-
-#### Defined in
-
-[lib/message/message.component.ts:71](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message/message.component.ts#L71)
-
----
-
-### isLastSentMessage
-
-• **isLastSentMessage**: `undefined` \| `boolean`
-
-If `true`, the message status (sending, sent, who read the message) is displayed.
-
-#### Defined in
-
-[lib/message/message.component.ts:75](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message/message.component.ts#L75)
-
----
-
-### mode
-
-• **mode**: `"thread"` \| `"main"` = `'main'`
-
-Determines if the message is being dispalyed in a channel or in a [thread](https://getstream.io/chat/docs/javascript/threads/?language=javascript).
-
-#### Defined in
-
-[lib/message/message.component.ts:79](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message/message.component.ts#L79)
-
----
-
-### isHighlighted
-
-• **isHighlighted**: `boolean` = `false`
-
-Highlighting is used to add visual emphasize to a message when jumping to the message
-
-#### Defined in
-
-[lib/message/message.component.ts:83](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message/message.component.ts#L83)
-
----
-
-### customActions
-
-• **customActions**: `CustomMessageActionItem`<`DefaultStreamChatGenerics`\>[] = `[]`
-
-A list of custom message actions to be displayed in the action box
-
-**`deprecated`** please use the [`MessageActionsService`](https://getstream.io/chat/docs/sdk/angular/services/MessageActionsService) to set this property.
-
-#### Defined in
-
-[lib/message/message.component.ts:89](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message/message.component.ts#L89)
-
-[//]: # "End of generated content"
diff --git a/docusaurus/angular_versioned_docs/version-4/components/MessageInputComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/MessageInputComponent.mdx
deleted file mode 100644
index 4146b236..00000000
--- a/docusaurus/angular_versioned_docs/version-4/components/MessageInputComponent.mdx
+++ /dev/null
@@ -1,173 +0,0 @@
-The `MessageInput` component displays an input where users can type their messages and upload files, and sends the message to the active channel. The component can be used to compose new messages or update existing ones. To send messages, the chat user needs to have the necessary [channel capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript).
-
-## Configuration
-
-The `MessageInput` component can use the [`Textarea`](./TextareaComponent.mdx) or the [`AutocompleteTextarea`](./AutocompleteTextareaComponent.mdx) component for displaying an HTML input for the users to type. You need to [provide your chosen component at module import](../concepts/opt-in-architecture.mdx).
-
-## Emoji picker
-
-The SDK doesn't have a built-in emoji picker, but it has support for providing your own template. Follow our [emoji picker guide](../code-examples/emoji-picker.mdx) to get to know more.
-
-## Customization
-
-If you want to provide your own message input component you'll have to provide it in the following places:
-
-- Replace the default message input inside the [channel](./ChannelComponent.mdx)
-- Replace the default message input inside the [thread](./ThreadComponent.mdx)
-- Provide your own [messageInputTemplate$](../services/CustomTemplatesService.mdx/#messageinputtemplate) to the `CustomTemplatesService`
-
-You can replace the textarea inside the message input following our [Custom textarea guide](../../code-examples/custom-textarea)
-
-See [our customization guide](../concepts/customization.mdx) for more information.
-
-:::note
-If you want to create your own message input, you can use the following building blocks:
-
-### Send and update messages
-
-You can use [`ChannelService`](../services/ChannelService.mdx) to send and update messages.
-
-### File uploads
-
-You can use the [`AttachmentService`](../services/AttachmentService.mdx) to manage file uploads.
-
-If more than one message input component can exist on your chat UI you should provide the `AttachmentService` on the component level:
-
-```typescript
-@Component({
-  selector: 'custom-message-input',
-  templateUrl: './message-input.component.html',
-  styles: [],
-  providers: [AttachmentService],
-})
-```
-
-### `Textarea`
-
-You can use the [`Textarea`](./TextareaComponent.mdx) or the [`AutocompleteTextarea`](./AutocompleteTextareaComponent.mdx) component to display the input HTML element for the users to type.
-
-:::
-
-[//]: # "Start of generated content"
-
-## Inputs and outputs
-
-### isFileUploadEnabled
-
-• **isFileUploadEnabled**: `undefined` \| `boolean`
-
-If file upload is enabled, the user can open a file selector from the input. Please note that the user also needs to have the necessary [channel capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript). If no value is provided, it is set from the [`MessageInputConfigService`](../services/MessageInputConfigService.mdx).
-
-#### Defined in
-
-[lib/message-input/message-input.component.ts:61](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L61)
-
----
-
-### areMentionsEnabled
-
-• **areMentionsEnabled**: `undefined` \| `boolean`
-
-If true, users can mention other users in messages. You also [need to use the `AutocompleteTextarea`](../concepts/opt-in-architecture.mdx) for this feature to work. If no value is provided, it is set from the [`MessageInputConfigService`](../services/MessageInputConfigService.mdx).
-
-#### Defined in
-
-[lib/message-input/message-input.component.ts:65](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L65)
-
----
-
-### mentionScope
-
-• **mentionScope**: `undefined` \| `"channel"` \| `"application"`
-
-The scope for user mentions, either members of the current channel of members of the application. If no value is provided, it is set from the [`MessageInputConfigService`](../services/MessageInputConfigService.mdx).
-
-#### Defined in
-
-[lib/message-input/message-input.component.ts:69](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L69)
-
----
-
-### mode
-
-• **mode**: `"thread"` \| `"main"` = `'main'`
-
-Determines if the message is being dispalyed in a channel or in a [thread](https://getstream.io/chat/docs/javascript/threads/?language=javascript).
-
-#### Defined in
-
-[lib/message-input/message-input.component.ts:73](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L73)
-
----
-
-### isMultipleFileUploadEnabled
-
-• **isMultipleFileUploadEnabled**: `undefined` \| `boolean`
-
-If true, users can select multiple files to upload. If no value is provided, it is set from the [`MessageInputConfigService`](../services/MessageInputConfigService.mdx).
-
-#### Defined in
-
-[lib/message-input/message-input.component.ts:77](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L77)
-
----
-
-### message
-
-• **message**: `undefined` \| `StreamMessage`<`DefaultStreamChatGenerics`\>
-
-The message to edit
-
-#### Defined in
-
-[lib/message-input/message-input.component.ts:81](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L81)
-
----
-
-### sendMessage$
-
-• **sendMessage$**: `undefined` \| `Observable`<`void`\>
-
-An observable that can be used to trigger message sending from the outside
-
-#### Defined in
-
-[lib/message-input/message-input.component.ts:85](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L85)
-
----
-
-### inputMode
-
-• **inputMode**: `"desktop"` \| `"mobile"`
-
-In `desktop` mode the `Enter` key will trigger message sending, in `mobile` mode the `Enter` key will insert a new line to the message input. If no value is provided, it is set from the [`MessageInputConfigService`](../services/MessageInputConfigService.mdx).
-
-#### Defined in
-
-[lib/message-input/message-input.component.ts:89](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L89)
-
----
-
-### autoFocus
-
-• **autoFocus**: `boolean` = `true`
-
-Enables or disables auto focus on the textarea element
-
-#### Defined in
-
-[lib/message-input/message-input.component.ts:93](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L93)
-
----
-
-### messageUpdate
-
-• `Readonly` **messageUpdate**: `EventEmitter`<{}\>
-
-Emits when a message was successfuly sent or updated
-
-#### Defined in
-
-[lib/message-input/message-input.component.ts:97](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L97)
-
-[//]: # "End of generated content"
diff --git a/docusaurus/angular_versioned_docs/version-4/components/MessageListComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/MessageListComponent.mdx
deleted file mode 100644
index 6c3098d9..00000000
--- a/docusaurus/angular_versioned_docs/version-4/components/MessageListComponent.mdx
+++ /dev/null
@@ -1,162 +0,0 @@
-import MessagesWithGroupingsScreenhot from "../assets/messages-with-grouping-screenshot.png";
-import MessagesWithoutGroupingsScreenhot from "../assets/messages-without-groups-screenshot.png";
-
-The `MessageList` component renders a scroll-able list of messages.
-
-The `MessageList` displays messages using pagination, new messages are loaded when the user scrolls to the top of the list.
-
-## Customization
-
-### Custom message component
-
-If you want to customize how messages are displayed in the list, head over to the [`Message` component's page](../../components/MessageComponent/#customization).
-
-### Date separator
-
-- The component provides the [`displayDateSeparator`](#displaydateseparator) and [`dateSeparatorTextPos`](#dateseparatortextpos) inputs for configuring the date separator's behavior.
-- You can customize the displayed date format by providing your own [date parser](../../services/DateParserService/#customdateparser).
-- If you want to provide your own date separator UI, provide that to the [`CustomTemplatesService`](../../services/CustomTemplatesService/#dateseparatortemplate).
-
-### Custom message list
-
-The message list contains a lot of low-level logic related to scrolling, we don't advise to create your own message list component
-
-[//]: # "Start of generated content"
-
-## Inputs and outputs
-
-### mode
-
-• **mode**: `"thread"` \| `"main"` = `'main'`
-
-Determines if the message list should display channel messages or [thread messages](https://getstream.io/chat/docs/javascript/threads/?language=javascript).
-
-#### Defined in
-
-[lib/message-list/message-list.component.ts:55](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L55)
-
----
-
-### direction
-
-• **direction**: `"bottom-to-top"` \| `"top-to-bottom"` = `'bottom-to-top'`
-
-The direction of the messages in the list, `bottom-to-top` means newest message is at the bottom of the message list and users scroll upwards to load older messages
-
-#### Defined in
-
-[lib/message-list/message-list.component.ts:59](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L59)
-
----
-
-### messageOptionsTrigger
-
-• **messageOptionsTrigger**: `"message-row"` \| `"message-bubble"` = `'message-row'`
-
-Determines what triggers the appearance of the message options: by default you can hover (click on mobile) anywhere in the row of the message (`message-row` option), or you can set `message-bubble`, in that case only a hover (click on mobile) in the message bubble will trigger the options to appear.
-
-#### Defined in
-
-[lib/message-list/message-list.component.ts:63](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L63)
-
----
-
-### hideJumpToLatestButtonDuringScroll
-
-• **hideJumpToLatestButtonDuringScroll**: `boolean` = `false`
-
-You can hide the "jump to latest" button while scrolling. A potential use-case for this input would be to [workaround a known issue on iOS Safar webview](https://github.com/GetStream/stream-chat-angular/issues/418)
-
-#### Defined in
-
-[lib/message-list/message-list.component.ts:69](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L69)
-
----
-
-### customMessageActions
-
-• **customMessageActions**: `CustomMessageActionItem`<`any`\>[] = `[]`
-
-A list of custom message actions to be displayed in the message action box
-
-**`deprecated`** please use the [`MessageActionsService`](https://getstream.io/chat/docs/sdk/angular/services/MessageActionsService) to set this property.
-
-#### Defined in
-
-[lib/message-list/message-list.component.ts:75](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L75)
-
----
-
-### displayDateSeparator
-
-• **displayDateSeparator**: `boolean` = `true`
-
-If `true` date separators will be displayed
-
-#### Defined in
-
-[lib/message-list/message-list.component.ts:79](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L79)
-
----
-
-### displayUnreadSeparator
-
-• **displayUnreadSeparator**: `boolean` = `true`
-
-If `true` unread indicator will be displayed
-
-#### Defined in
-
-[lib/message-list/message-list.component.ts:83](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L83)
-
----
-
-### dateSeparatorTextPos
-
-• **dateSeparatorTextPos**: `"center"` \| `"right"` \| `"left"` = `'center'`
-
-If date separators are displayed, you can set the horizontal position of the date text.
-
-#### Defined in
-
-[lib/message-list/message-list.component.ts:87](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L87)
-
----
-
-### openMessageListAt
-
-• **openMessageListAt**: `"last-message"` \| `"last-read-message"` = `'last-message'`
-
-`last-message` option will open the message list at the last message, `last-read-message` will open the list at the last unread message. This option only works if mode is `main`.
-
-#### Defined in
-
-[lib/message-list/message-list.component.ts:91](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L91)
-
----
-
-### hideUnreadCountForNotificationAndIndicator
-
-• **hideUnreadCountForNotificationAndIndicator**: `boolean` = `false`
-
-If the user has unread messages when they open the channel the UI shows the unread indicator / notification which features the unread count by default. This count will be increased every time a user receives a new message. If you don't want to show the unread count, you can turn that off.
-
-This is only applicable for `main` mode, as threads doesn't have read infromation.
-
-#### Defined in
-
-[lib/message-list/message-list.component.ts:98](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L98)
-
----
-
-### displayLoadingIndicator
-
-• **displayLoadingIndicator**: `boolean` = `true`
-
-You can turn on and off the loading indicator that signals to users that more messages are being loaded to the message list
-
-#### Defined in
-
-[lib/message-list/message-list.component.ts:102](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L102)
-
-[//]: # "End of generated content"
diff --git a/docusaurus/angular_versioned_docs/version-4/components/MessageReactionsComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/MessageReactionsComponent.mdx
deleted file mode 100644
index a2378fa4..00000000
--- a/docusaurus/angular_versioned_docs/version-4/components/MessageReactionsComponent.mdx
+++ /dev/null
@@ -1,125 +0,0 @@
-import MessageReactionsScreenshot from "../assets/message-reactions-screenshot.png";
-import MessageReactionsDetailsScreenshot from "../assets/reaction-details.png";
-import MessageReactionsSelectorScreenshot from "../assets/message-reactions-selector-screenshot.png";
-
-The `MessageReactions` component displays the reactions of a message, the current user can add and remove reactions. You can read more about [message reactions](https://getstream.io/chat/docs/javascript/send_reaction/?language=javascript) in the platform documentation.
-
-**Example 1** - displaying reactions of a message:
-
-<img src={MessageReactionsScreenshot} width="500" />
-
-**Example 2** - displaying the reacting users - only visible if a message has at maximum 1200 reactions:
-
-<img src={MessageReactionsDetailsScreenshot} width="500" />
-
-**Example 3** - adding/removing a reaction:
-
-<img src={MessageReactionsSelectorScreenshot} width="500" />
-
-## Basic usage
-
-A typical use case for the `MessageReactions` component would be to use in your custom components that will completely override the message component.
-
-```typescript
-@Component({
-  selector: "app-custom-message",
-  template: `
-    <stream-message-reactions
-      [isSelectorOpen]="isReactionSelectorOpen"
-      [messageId]="message.id"
-      [messageReactionCounts]="message.reaction_counts"
-      [latestReactions]="message.latest_reactions"
-      [ownReactions]="message.own_reactions"
-    ></stream-message-reactions>
-    <!-- Other parts of the custom message component -->
-  `,
-})
-export class CustomMessageComponent {
-  @Input() message: StreamMessage;
-  isReactionSelectorOpen: boolean;
-}
-```
-
-## Customization
-
-You can override the default reactions using the [`MessageReactionsService`](../services/MessageReactionsService.mdx).
-
-You can provide your own UI for the reaction details using the [`MessageReactionsService`](../services/MessageReactionsService.mdx).
-
-You can provide your own message reactions component by the [`CustomTemplatesService`](../services/CustomTemplatesService.mdx).
-
-[//]: # "Start of generated content"
-
-## Inputs and outputs
-
-### messageId
-
-• **messageId**: `undefined` \| `string`
-
-The id of the message the reactions belong to
-
-#### Defined in
-
-[lib/message-reactions/message-reactions.component.ts:38](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L38)
-
----
-
-### messageReactionCounts
-
-• **messageReactionCounts**: `Object` = `{}`
-
-The number of reactions grouped by [reaction types](https://github.com/GetStream/stream-chat-angular/tree/master/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts)
-
-#### Defined in
-
-[lib/message-reactions/message-reactions.component.ts:42](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L42)
-
----
-
-### isSelectorOpen
-
-• **isSelectorOpen**: `boolean` = `false`
-
-Indicates if the selector should be opened or closed. Adding a UI element to open and close the selector is the parent's component responsibility.
-
-#### Defined in
-
-[lib/message-reactions/message-reactions.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L47)
-
----
-
-### latestReactions
-
-• **latestReactions**: `ReactionResponse`<`DefaultStreamChatGenerics`\>[] = `[]`
-
-List of reactions of a [message](../types/stream-message.mdx), used to display the users of a reaction type.
-
-#### Defined in
-
-[lib/message-reactions/message-reactions.component.ts:51](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L51)
-
----
-
-### ownReactions
-
-• **ownReactions**: `ReactionResponse`<`DefaultStreamChatGenerics`\>[] = `[]`
-
-List of the user's own reactions of a [message](../types/stream-message.mdx), used to display the users of a reaction type.
-
-#### Defined in
-
-[lib/message-reactions/message-reactions.component.ts:55](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L55)
-
----
-
-### isSelectorOpenChange
-
-• `Readonly` **isSelectorOpenChange**: `EventEmitter`<`boolean`\>
-
-Indicates if the selector should be opened or closed. Adding a UI element to open and close the selector is the parent's component responsibility.
-
-#### Defined in
-
-[lib/message-reactions/message-reactions.component.ts:59](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L59)
-
-[//]: # "End of generated content"
diff --git a/docusaurus/angular_versioned_docs/version-4/components/ModalComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/ModalComponent.mdx
deleted file mode 100644
index d5b55c89..00000000
--- a/docusaurus/angular_versioned_docs/version-4/components/ModalComponent.mdx
+++ /dev/null
@@ -1,57 +0,0 @@
-The `Modal` component displays its content in an overlay. The modal can be closed with a close button, if the user clicks outside of the modal content, or if the escape button is pressed. The modal can also be closed from outside.
-
-## Basic usage
-
-This example shows how to use the modal component
-
-**Example 1** - simple modal:
-
-```html
-<stream-modal [(isOpen)]="isModalOpen">
-  <!-- Modal content here -->
-</stream-modal>
-```
-
-## Customization
-
-You can provide your own modal component by the [`CustomTemplatesService`](../services/CustomTemplatesService.mdx)
-
-[//]: # "Start of generated content"
-
-## Inputs and outputs
-
-### isOpen
-
-• **isOpen**: `boolean` = `false`
-
-If `true` the modal will be displayed, if `false` the modal will be hidden
-
-#### Defined in
-
-[lib/modal/modal.component.ts:25](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/modal/modal.component.ts#L25)
-
----
-
-### content
-
-• **content**: `undefined` \| `TemplateRef`<`void`\>
-
-The content of the modal (can also be provided using `ng-content`)
-
-#### Defined in
-
-[lib/modal/modal.component.ts:29](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/modal/modal.component.ts#L29)
-
----
-
-### isOpenChange
-
-• `Readonly` **isOpenChange**: `EventEmitter`<`boolean`\>
-
-Emits `true` if the modal becomes visible, and `false` if the modal is closed.
-
-#### Defined in
-
-[lib/modal/modal.component.ts:33](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/modal/modal.component.ts#L33)
-
-[//]: # "End of generated content"
diff --git a/docusaurus/angular_versioned_docs/version-4/components/NotificationComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/NotificationComponent.mdx
deleted file mode 100644
index c13b6cd7..00000000
--- a/docusaurus/angular_versioned_docs/version-4/components/NotificationComponent.mdx
+++ /dev/null
@@ -1,41 +0,0 @@
-The `Notification` component displays a notification in the [notification list](./NotificationListComponent.mdx).
-
-## Basic Usage
-
-```html
-<stream-notification type="success">
-  File upload was successfuly
-</stream-notification>
-```
-
-## Customization
-
-You can provide your own notification component by the [`CustomTemplatesService`](../services/CustomTemplatesService.mdx)
-
-[//]: # "Start of generated content"
-
-## Inputs and outputs
-
-### type
-
-• **type**: `undefined` \| `NotificationType`
-
-The type of the notification
-
-#### Defined in
-
-[lib/notification/notification.component.ts:16](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/notification/notification.component.ts#L16)
-
----
-
-### content
-
-• **content**: `undefined` \| `TemplateRef`<`void`\>
-
-The content of the notification (can also be provided using `ng-content`)
-
-#### Defined in
-
-[lib/notification/notification.component.ts:20](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/notification/notification.component.ts#L20)
-
-[//]: # "End of generated content"
diff --git a/docusaurus/angular_versioned_docs/version-4/components/NotificationListComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/NotificationListComponent.mdx
deleted file mode 100644
index f596651b..00000000
--- a/docusaurus/angular_versioned_docs/version-4/components/NotificationListComponent.mdx
+++ /dev/null
@@ -1,24 +0,0 @@
-The `NotificationList` component displays the list of active notifications.
-
-## Basic Usage
-
-You can use the `NotificationList` component to display the active notifications:
-
-```html
-<div id="root">
-  <stream-channel-list></stream-channel-list>
-  <stream-channel>
-    <stream-channel-header></stream-channel-header>
-    <stream-message-list></stream-message-list>
-    <stream-message-input></stream-message-input>
-  </stream-channel>
-  <stream-notification-list></stream-notification-list>
-</div>
-```
-
-## Customization
-
-See [our customization guide](../concepts/customization.mdx) on how to provide your own notification list component.
-
-[//]: # "Start of generated content"
-[//]: # "End of generated content"
diff --git a/docusaurus/angular_versioned_docs/version-4/components/TextareaComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/TextareaComponent.mdx
deleted file mode 100644
index a53cf29e..00000000
--- a/docusaurus/angular_versioned_docs/version-4/components/TextareaComponent.mdx
+++ /dev/null
@@ -1,133 +0,0 @@
-The `Textarea` component is used by the [`MessageInput`](./MessageInputComponent.mdx) component to display the input HTML element where users can type their message.
-
-## Feature overview
-
-- Message send can be triggered with the `Enter` key, new line can be added with the `Shift+Enter` combination
-- The textarea will automatically grow with the text
-- The textarea will automatically insert emojis [from the emoji picker](../../code-examples/emoji-picker)
-
-If you want to enable autocomplete features, you can use the [`AutcompleteTextarea`](./AutocompleteTextareaComponent.mdx) component instead of this one.
-
-## Basic usage
-
-You can use the `Textarea` component if you want to create your own message input component to override the default one:
-
-```typescript
-@Component({
-  selector: "app-custom-message-input",
-  template: `
-    <stream-textarea
-      [(value)]="textareaValue"
-      (send)="messageSent()"
-    ></stream-textarea>
-    <!-- Other parts of the custom message input component -->
-  `,
-})
-export class CustomMessageInputComponent {
-  textareaValue = "";
-
-  messageSent() {
-    // Send your message
-  }
-}
-```
-
-[//]: # "Start of generated content"
-
-## Inputs and outputs
-
-### value
-
-• **value**: `string` = `''`
-
-The value of the input HTML element.
-
-#### Implementation of
-
-TextareaInterface.value
-
-#### Defined in
-
-[lib/message-input/textarea/textarea.component.ts:35](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L35)
-
----
-
-### placeholder
-
-• **placeholder**: `string` = `''`
-
-Placeholder of the textarea
-
-#### Implementation of
-
-TextareaInterface.placeholder
-
-#### Defined in
-
-[lib/message-input/textarea/textarea.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L39)
-
----
-
-### inputMode
-
-• **inputMode**: `"desktop"` \| `"mobile"`
-
-See [`MessageInputConfigService`](../services/MessageInputConfigService.mdx) for more information
-
-#### Implementation of
-
-TextareaInterface.inputMode
-
-#### Defined in
-
-[lib/message-input/textarea/textarea.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L43)
-
----
-
-### autoFocus
-
-• **autoFocus**: `boolean` = `true`
-
-Enables or disables auto focus on the textarea element
-
-#### Implementation of
-
-TextareaInterface.autoFocus
-
-#### Defined in
-
-[lib/message-input/textarea/textarea.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L47)
-
----
-
-### valueChange
-
-• `Readonly` **valueChange**: `EventEmitter`<`string`\>
-
-Emits the current value of the input element when a user types.
-
-#### Implementation of
-
-TextareaInterface.valueChange
-
-#### Defined in
-
-[lib/message-input/textarea/textarea.component.ts:51](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L51)
-
----
-
-### send
-
-• `Readonly` **send**: `EventEmitter`<`void`\>
-
-Emits when a user triggers a message send event (this happens when they hit the `Enter` key).
-
-#### Implementation of
-
-TextareaInterface.send
-
-#### Defined in
-
-[lib/message-input/textarea/textarea.component.ts:55](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L55)
-
-[//]: # "End of generated content"
diff --git a/docusaurus/angular_versioned_docs/version-4/components/ThreadComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/ThreadComponent.mdx
deleted file mode 100644
index c8c6c1ba..00000000
--- a/docusaurus/angular_versioned_docs/version-4/components/ThreadComponent.mdx
+++ /dev/null
@@ -1,21 +0,0 @@
-The `Thread` component represents a [message thread](https://getstream.io/chat/docs/javascript/threads/?language=javascript), it is a container component that displays a thread with a header, [`MessageList`](./MessageListComponent.mdx) and [`MessageInput`](./MessageInputComponent.mdx) components.
-
-## Usage
-
-The `Thread` component displays the thread header (built inside the thread), the message list and message input components:
-
-```html
-<stream-thread name="thread">
-  <stream-message-list mode="thread"></stream-message-list>
-  <stream-message-input mode="thread"></stream-message-input>
-</stream-thread>
-```
-
-You can use the default SDK components, or use your own custom components.
-
-## Customization
-
-See [our customization guide](../concepts/customization.mdx) on how to provide your own thread header or thread component.
-
-[//]: # "Start of generated content"
-[//]: # "End of generated content"
diff --git a/docusaurus/angular_versioned_docs/version-4/components/VoiceRecordingComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/VoiceRecordingComponent.mdx
deleted file mode 100644
index 54e6d9c2..00000000
--- a/docusaurus/angular_versioned_docs/version-4/components/VoiceRecordingComponent.mdx
+++ /dev/null
@@ -1,87 +0,0 @@
-import VoiceRecordingScreenshot from "../assets/voice-recording-screenshot.png";
-
-This component can be used to display an attachment with type `voiceRecording`. The component allows playing the attachment inside the browser.
-
-<img src={VoiceRecordingScreenshot} width="500" />
-
-## Usage
-
-The built-in [`AttachmentListComponent`](../../components/AttachmentListComponent) displays this component. If you want to use this directly in your UI you can do it like this:
-
-```html
-<stream-voice-recording [attachment]="attachment"></stream-voice-recording>
-```
-
-## Customization
-
-You can provide your own template using the [custom templates service](../services/CustomTemplatesService.mdx/#voicerecordingattachmenttemplate).
-
-## Example
-
-An example voice recording attachment:
-
-```typescript
-{
-  type: 'voiceRecording',
-  title: '99831FB3-5E35-41CD-8286-7A2E95A78FDC.aac',
-  asset_url:
-    '<link to file on Stream or custom CDN>',
-  waveform_data: [
-    0.18580253422260284, 0.22792305052280426, 0.23014479875564575,
-    0.2215365618467331, 0.280057817697525, 0.24526794254779816,
-    0.23399925231933594, 0.3128012716770172, 0.37945452332496643,
-    0.33992674946784973, 0.33231520652770996, 0.35996779799461365,
-    0.24952147901058197, 0.2771506607532501, 0.18567748367786407,
-    0.2669936418533325, 0.2318495213985443, 0.266754150390625,
-    0.24599547684192657, 0.22025825083255768, 0.2574225664138794,
-    0.2297886610031128, 0.21858176589012146, 0.22855964303016663,
-    0.21926963329315186, 0.1592704802751541, 0.17932571470737457,
-    0.17183426022529602, 0.16925041377544403, 0.17725585401058197,
-    0.20863258838653564, 0.15763725340366364, 0.17838287353515625,
-    0.2596689462661743, 0.2821672856807709, 0.2308555543422699,
-    0.21800407767295837, 0.237264484167099, 0.24341285228729248,
-    0.21091987192630768, 0.22752471268177032, 0.28887689113616943,
-    0.25566428899765015, 0.2714449167251587, 0.30015745759010315,
-    0.2883681356906891, 0.28020721673965454, 0.21566811203956604,
-    0.2041303962469101, 0.1856091320514679, 0.22570304572582245,
-    0.22362418472766876, 0.18938171863555908, 0.2105405479669571,
-    0.22487449645996094, 0.2667095959186554, 0.29159706830978394,
-    0.2825489938259125, 0.2347666174173355, 0.2768406569957733,
-    0.2953290641307831, 0.26249200105667114, 0.3034127950668335,
-    0.26899436116218567, 0.2931807041168213, 0.24274344742298126,
-    0.23544998466968536, 0.29423996806144714, 0.2060961127281189,
-    0.05098915100097656, 0.0063146972097456455, 0.015633393079042435,
-    0.03022758476436138, 0.026124343276023865, 0.014958725310862064,
-    0.01488060038536787, 0.0297449491918087, 0.046876221895217896,
-    0.016678161919116974, 0.030463561415672302, 0.022851256653666496,
-    0.040972135961055756, 0.050609588623046875, 0.04940780624747276,
-    0.04304153472185135, 0.08744628727436066, 0.0762052908539772,
-    0.0801474004983902, 0.0818980410695076, 0.08521285653114319,
-    0.07830711454153061, 0.07637504488229752, 0.09124496579170227,
-    0.16371025145053864, 0.08206146210432053, 0.0569305419921875,
-    0.043944090604782104, 0.07224594056606293, 0.06922554224729538,
-    5.340576194612368e-7,
-  ],
-  // in seconds
-  duration: 21.07675,
-  // in bytes
-  file_size: 56504,
-  mime_type: 'audio/aac',
-};
-```
-
-[//]: # "Start of generated content"
-
-## Inputs and outputs
-
-### attachment
-
-• `Optional` **attachment**: `Attachment`<`DefaultStreamChatGenerics`\>
-
-The voice recording attachment
-
-#### Defined in
-
-[lib/voice-recording/voice-recording.component.ts:28](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/voice-recording/voice-recording.component.ts#L28)
-
-[//]: # "End of generated content"
diff --git a/docusaurus/angular_versioned_docs/version-4/components/VoiceRecordingWavebarComponent.mdx b/docusaurus/angular_versioned_docs/version-4/components/VoiceRecordingWavebarComponent.mdx
deleted file mode 100644
index 0a3679db..00000000
--- a/docusaurus/angular_versioned_docs/version-4/components/VoiceRecordingWavebarComponent.mdx
+++ /dev/null
@@ -1,63 +0,0 @@
-import WavebarScreenshot from "../assets/wavebar-screenshot.png";
-
-This component can be used to visualize the wave bar of a voice recording
-
-<img src={WavebarScreenshot} width="500" />
-
-## Usage
-
-The built-in [`AttachmentListComponent`](../../components/AttachmentListComponent) component displays this component. If you want to use this directly in your UI you can do it like this:
-
-```html
-<audio #audioElement></audio>
-<stream-voice-recording-wavebar
-  *ngIf="attachment?.waveform_data && attachment?.duration"
-  [waveFormData]="attachment?.waveform_data || []"
-  [duration]="attachment?.duration"
-  [audioElement]="audioElement"
-></stream-voice-recording-wavebar>
-```
-
-## Customization
-
-It's not possible to override only the wave data visualization, but you can override the [`VoiceRecordingComponent`](../services/CustomTemplatesService.mdx/#voicerecordingattachmenttemplate).
-
-[//]: # "Start of generated content"
-
-## Inputs and outputs
-
-### audioElement
-
-• `Optional` **audioElement**: `HTMLAudioElement`
-
-The audio element that plays the voice recording
-
-#### Defined in
-
-[lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts:28](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts#L28)
-
----
-
-### waveFormData
-
-• **waveFormData**: `number`[] = `[]`
-
-The waveform data to visualize
-
-#### Defined in
-
-[lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts:32](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts#L32)
-
----
-
-### duration
-
-• `Optional` **duration**: `number`
-
-The duration of the voice recording in seconds
-
-#### Defined in
-
-[lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts:36](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts#L36)
-
-[//]: # "End of generated content"
diff --git a/docusaurus/angular_versioned_docs/version-4/components/_category_.json b/docusaurus/angular_versioned_docs/version-4/components/_category_.json
deleted file mode 100644
index d6b06f52..00000000
--- a/docusaurus/angular_versioned_docs/version-4/components/_category_.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "label": "Components",
-  "position": 5
-}
diff --git a/docusaurus/angular_versioned_docs/version-4/concepts/_category_.json b/docusaurus/angular_versioned_docs/version-4/concepts/_category_.json
deleted file mode 100644
index 1d3167d4..00000000
--- a/docusaurus/angular_versioned_docs/version-4/concepts/_category_.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "label": "Concepts",
-  "position": 3
-}
diff --git a/docusaurus/angular_versioned_docs/version-4/concepts/change-detection.mdx b/docusaurus/angular_versioned_docs/version-4/concepts/change-detection.mdx
deleted file mode 100644
index 110c3f3f..00000000
--- a/docusaurus/angular_versioned_docs/version-4/concepts/change-detection.mdx
+++ /dev/null
@@ -1,77 +0,0 @@
----
-id: change-detection
-sidebar_position: 4
-title: Change detection
----
-
-For performance reasons, the Stream chat WebSocket connection is opened outside of the [Angular change detection zone](https://angular.io/guide/zone). This means that when we react to WebSocket events, Angular won't update the UI in response to these events. Furthermore, if a new component is created reacting to a WebSocket event (for example, if we receive a new message, and a new message component is created to display the new message), the new component will operate outside of the Angular change detection zone. To solve this problem, we need to reenter Angular's change detection zone.
-
-## Reentering Angular's change detection zone
-
-You can reenter Angular's change detection zone with the `run` method of the `NgZone` service. For example if you want to display a notification when a user is added to a channel, you can watch for the `notification.added_to_channel` event and return to the zone when that event is received:
-
-```typescript
-import { Component, NgZone, OnInit } from "@angular/core";
-import { filter } from "rxjs/operators";
-import { ChatClientService, NotificationService } from "stream-chat-angular";
-
-@Component({
-  selector: "app-root",
-  templateUrl: "./app.component.html",
-  styleUrls: ["./app.component.scss"],
-})
-export class AppComponent implements OnInit {
-  constructor(
-    private chatService: ChatClientService,
-    private notificationService: NotificationService,
-    private ngZone: NgZone
-  ) {}
-
-  ngOnInit(): void {
-    this.chatService.events$
-      .pipe(filter((n) => n.eventType === "notification.added_to_channel"))
-      .subscribe((notification) => {
-        // reenter Angular's change detection zone
-        this.ngZone.run(() => {
-          this.notificationService.addTemporaryNotification(
-            `You've been added to the ${notification.event.channel?.name} channel`,
-            "success"
-          );
-        });
-      });
-  }
-}
-```
-
-If you were to display the notification without reentering Angular's zone, the `addTemporaryNotification` would run outside of Angular's change detection zone, and the notification wouldn't disappear after the 5-second timeout.
-
-## When necessary to reenter the zone
-
-You need to reenter Angular's change detection zone when
-
-- you subscribe to events using the [`events$`](../services/ChatClientService.mdx/#notification) Observable of the `ChatClientService`
-- you subscribe to channel events
-
-For example the [`ChannelPreview`](../components/ChannelPreviewComponent.mdx) component needs to subscribe to the `message.read` channel events to know if the channel has unread messages and reenter Angular's zone when an event is received:
-
-```typescript
-this.channel.on("message.read", () =>
-  this.ngZone.run(() => {
-    this.isUnread = !!this.channel.countUnread() && this.canSendReadEvents;
-  })
-);
-```
-
-## When unnecessary to reenter the zone
-
-You **don't** need to reenter the zone when
-
-- you use the SDK's default components in your UI and don't watch for additional events
-- when you [override the default channel list behavior](../services/ChannelService.mdx/#channels)
-- when you subscribe to the [`connectionState$`](../services/ChatClientService.mdx/#connectionstate) Observable of the `ChatClientService`
-
-If you are unsure whether or not you are in Angular's zone, you can use the following function call to check:
-
-```typescript
-NgZone.isInAngularZone();
-```
diff --git a/docusaurus/angular_versioned_docs/version-4/concepts/customization.mdx b/docusaurus/angular_versioned_docs/version-4/concepts/customization.mdx
deleted file mode 100644
index fff38739..00000000
--- a/docusaurus/angular_versioned_docs/version-4/concepts/customization.mdx
+++ /dev/null
@@ -1,36 +0,0 @@
----
-id: customization
-title: Customization
----
-
-Apart from customizing the [theming and CSS](../theming/introduction.mdx) of UI components it's also possible to provide your own template to completely override parts of the UI to further improve the flexibility of our SDK. This guide shows you the different custom templates you can provide.
-
-For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
-
-## Initial chat UI
-
-This is how our initial chat UI looks like:
-
-```html
-<stream-channel-list></stream-channel-list>
-<stream-channel>
-  <!-- Main messages in the channel -->
-  <stream-channel-header></stream-channel-header>
-  <stream-message-list></stream-message-list>
-  <stream-message-input></stream-message-input>
-  <!-- Main messages in the channel -->
-  <!-- Thread messages in the channel -->
-  <stream-thread name="thread">
-    <stream-message-list mode="thread"></stream-message-list>
-    <stream-message-input mode="thread"></stream-message-input>
-  </stream-thread>
-  <!-- Thread messages in the channel -->
-</stream-channel>
-<stream-notification-list></stream-notification-list>
-```
-
-This template lives in your application so you can freely replace any component with your own custom component, for example if you want to use your own channel header you can just replace `stream-channel-header` with your own component.
-
-## `CustomTemplatesService`
-
-However you might just want to override parts of these components, for example you want to use your own custom message component, but don't want to override the whole message list. In these instances you can use the `CustomTemplatesService`, the [full list of override-able parts](../services/CustomTemplatesService.mdx) can be found in the documentation page of the `CustomTemplatesService`.
diff --git a/docusaurus/angular_versioned_docs/version-4/concepts/generics.mdx b/docusaurus/angular_versioned_docs/version-4/concepts/generics.mdx
deleted file mode 100644
index 4d9c1e08..00000000
--- a/docusaurus/angular_versioned_docs/version-4/concepts/generics.mdx
+++ /dev/null
@@ -1,96 +0,0 @@
----
-id: generics
-title: Generics
----
-
-The [`stream-chat-js`](https://github.com/GetStream/stream-chat-js) library takes advantage of [TypeScript generics](https://www.typescriptlang.org/docs/handbook/2/generics.html) to make it possible to define custom file ids on the following entities:
-
-1. [`Attachment`](https://github.com/GetStream/stream-chat-js/blob/master/src/types.ts)
-2. [`ChannelResponse`](https://github.com/GetStream/stream-chat-js/blob/master/src/types.ts)
-3. [`CommandVariants`](https://github.com/GetStream/stream-chat-js/blob/master/src/types.ts)
-4. [`Event`](https://github.com/GetStream/stream-chat-js/blob/master/src/types.ts)
-5. [`MessageBase`](https://github.com/GetStream/stream-chat-js/blob/master/src/types.ts)
-6. [`Reaction`](https://github.com/GetStream/stream-chat-js/blob/master/src/types.ts)
-7. [`User`](https://github.com/GetStream/stream-chat-js/blob/master/src/types.ts)
-
-Those 7 overrides are combined to a single generic parameter called [`DefaultGenerics`](https://github.com/GetStream/stream-chat-js/blob/master/src/types.ts).
-
-The Angular SDK extends the `DefaultGenerics` with custom fields creating the [`DefaultStreamChatGenerics`](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/types.ts) type.
-
-You can further extend the `DefaultStreamChatGenerics` type with your own custom fields, both the [`ChatClientService`](../services/ChatClientService.mdx) and [`ChannelService`](../services/ChannelService.mdx) accepts a generic parameter.
-
-Here is an example about custom fields with generics:
-
-```typescript
-import { Component, OnInit } from "@angular/core";
-import {
-  ChatClientService,
-  ChannelService,
-  StreamI18nService,
-  DefaultStreamChatGenerics,
-} from "stream-chat-angular";
-import { environment } from "../environments/environment";
-
-type MyStreamGenerics = DefaultStreamChatGenerics & {
-  attachmentType: { lat?: string; lon?: string };
-  channelType: {
-    color: string;
-    topic: "gardening" | "cats" | "f1";
-  };
-  userType: {
-    nickname: string;
-  };
-  messageType: {
-    isSecret: boolean;
-  };
-  reactionType: {
-    onlyVisibleToSender: boolean;
-  };
-};
-
-@Component({
-  selector: "app-root",
-  templateUrl: "./app.component.html",
-  styleUrls: ["./app.component.scss"],
-})
-export class AppComponent implements OnInit {
-  constructor(
-    private chatService: ChatClientService<MyStreamGenerics>,
-    private channelService: ChannelService<MyStreamGenerics>,
-    private streamI18nService: StreamI18nService
-  ) {
-    void this.chatService.init(
-      environment.apiKey,
-      { id: environment.userId, nickname: "Zizi" },
-      environment.userToken
-    );
-    this.streamI18nService.setTranslation();
-  }
-
-  async ngOnInit() {
-    await this.channelService.init({
-      type: "messaging",
-      topic: "cats",
-    });
-    const channel = this.chatService.chatClient.channel(
-      "messaging",
-      "cat-photos",
-      { color: "blue", topic: "cats", name: "The bes cat photos" }
-    );
-
-    await channel.create();
-    await this.channelService.sendMessage(
-      "This is a secret message",
-      [{ type: "geolocation", lat: "40.7128", lon: "74.0060" }],
-      [],
-      undefined,
-      undefined,
-      { isSecret: true }
-    );
-    const message = channel.state.messages[0];
-    this.channelService.addReaction(message.id, "like", {
-      onlyVisibleToSender: true,
-    });
-  }
-}
-```
diff --git a/docusaurus/angular_versioned_docs/version-4/concepts/message-interactions.mdx b/docusaurus/angular_versioned_docs/version-4/concepts/message-interactions.mdx
deleted file mode 100644
index 825599dd..00000000
--- a/docusaurus/angular_versioned_docs/version-4/concepts/message-interactions.mdx
+++ /dev/null
@@ -1,20 +0,0 @@
----
-id: message-interactions
-sidebar_position: 5
-title: Message interactions
----
-
-Users can interact with the messages in the message list. The following table provides a list of possible interactions together with the [necessary capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript) and the corresponding components:
-
-| Description                                                                                          | Necessary channel capability             | Component                                                           |
-| ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------- |
-| [Flags](https://getstream.io/chat/docs/javascript/moderation/?language=javascript) the given message | flag-message                             | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx) |
-| Edits a message that belongs to the user                                                             | update-own-message or update-any-message | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx) |
-| Edits any message                                                                                    | update-any-message                       | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx) |
-| Deletes a message that belongs to the user                                                           | delete-own-message or delete-any-message | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx) |
-| Deletes any message                                                                                  | delete-any-message                       | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx) |
-| Send reaction to a message                                                                           | send-reaction                            | [`MessageReactions`](../components/MessageReactionsComponent.mdx)   |
-| Receive read events                                                                                  | read-events                              | [`Message`](../components/MessageComponent.mdx)                     |
-| Reply to a message in a thread                                                                       | send-reply                               | [`Message`](../components/MessageComponent.mdx)                     |
-| Quote reply to a message                                                                             | quote-message                            | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx) |
-| Mark a message as unread                                                                             | read-events                              | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx) |
diff --git a/docusaurus/angular_versioned_docs/version-4/concepts/opt-in-architecture.mdx b/docusaurus/angular_versioned_docs/version-4/concepts/opt-in-architecture.mdx
deleted file mode 100644
index 1c556b9c..00000000
--- a/docusaurus/angular_versioned_docs/version-4/concepts/opt-in-architecture.mdx
+++ /dev/null
@@ -1,74 +0,0 @@
----
-id: opt-in-architecture
-sidebar_position: 3
-title: Opt-in architecture
----
-
-In an effort to keep our bundle size small in the long run our SDK uses an architecture where integrators can decide to opt-out of certain costly (in terms of bundle size) features.
-
-The decision to opt-in or opt-out happens at module import, you can choose between the `StreamAutocompleteTextareaModule` and the `StreamTextareaModule`:
-
-```typescript
-import { NgModule } from "@angular/core";
-import { BrowserModule } from "@angular/platform-browser";
-import { TranslateModule } from "@ngx-translate/core";
-
-import { AppComponent } from "./app.component";
-import { CustomMessageComponent } from "./custom-message/custom-message.component";
-import {
-  StreamChatModule,
-  StreamAutocompleteTextareaModule,
-} from "stream-chat-angular";
-
-@NgModule({
-  declarations: [AppComponent, CustomMessageComponent],
-  imports: [
-    BrowserModule,
-    TranslateModule.forRoot(),
-    StreamAutocompleteTextareaModule,
-    StreamChatModule,
-  ],
-  providers: [],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
-```
-
-Or if you're using standalone components:
-
-```typescript showLineNumbers={true} highlightedLines=8
-import { Component } from "@angular/core";
-import { TranslateModule } from "@ngx-translate/core";
-import {
-  StreamAutocompleteTextareaModule,
-  StreamChatModule,
-} from "stream-chat-angular";
-
-@Component({
-  selector: "app-root",
-  standalone: true,
-  imports: [
-    TranslateModule,
-    StreamAutocompleteTextareaModule,
-    StreamChatModule,
-  ],
-  templateUrl: "./app.component.html",
-  styleUrls: ["./app.component.scss"],
-})
-export class AppComponent {}
-```
-
-The chosen module decides what kind of `textarea` should be used in the message composer, you can choose between the [`AutocompleteTextareaComponent`](../components/AutocompleteTextareaComponent.mdx) with mentions or the [`TextareaComponent`](../components/TextareaComponent.mdx) that doesn't support mentions, but has a smaller bundle size. Your final application bundle will only include either the `TextareaComponent` or the `AutocompleteTextareaComponent`.
-
-## Opt-in features
-
-The list of opt-in features can be found below:
-
-### `Textarea`
-
-For the `textarea` inside the [`MessageInputComponent`](../components/MessageInputComponent.mdx) you can choose between the [`TextareaComponent`](../components/TextareaComponent.mdx) or the [`AutocompleteTextareaComponent`](../components/AutocompleteTextareaComponent.mdx) component. The table below provides a comparison between the two components:
-
-| Feature       | `TextareaComponent` | `AutocompleteTextareaComponent` |
-| ------------- | ------------------- | ------------------------------- |
-| User mentions | No                  | Yes                             |
-| Commands      | No                  | Yes                             |
diff --git a/docusaurus/angular_versioned_docs/version-4/concepts/theming-and-css.mdx b/docusaurus/angular_versioned_docs/version-4/concepts/theming-and-css.mdx
deleted file mode 100644
index cad5637e..00000000
--- a/docusaurus/angular_versioned_docs/version-4/concepts/theming-and-css.mdx
+++ /dev/null
@@ -1,102 +0,0 @@
----
-id: themeing
-sidebar_position: 1
-title: Theming and CSS (deprecated)
----
-
-import LightThemeScreenshot from "../assets/light-theme-screenshot.png";
-import DarkThemeScreenshot from "../assets/dark-theme-screenshot.png";
-import CustomLightThemeScreenshot from "../assets/custom-light-theme-screenshot.png";
-import CustomDarkThemeScreenshot from "../assets/custom-dark-theme-screenshot.png";
-
-:::caution
-This page contains information about the old theming system of the chat UI, this is now deprecated and will be removed in a future release. Please refer to our [new theming guide](../theming/introduction.mdx).
-:::
-
-## Overriding CSS
-
-To override pre-defined library styles, follow this simple process:
-
-- Import our bundled CSS into your root stylesheet. We maintain a separate repository, [stream-chat-css](https://github.com/GetStream/stream-chat-css), which houses all of the SCSS files for the components.
-
-- Use the browser inspector or view the library code and locate default styles you wish to override
-
-- Add selectors to your local CSS file to override our defaults.
-
-- Add your local CSS selectors after Stream's bundled CSS
-
-- Additionally you can override [the following CSS variables](https://github.com/GetStream/stream-chat-css/blob/main/src/styles/_variables.scss) to better customize the chat UI
-
-For example:
-
-```scss
-@import "~stream-chat-angular/src/assets/styles/scss/index.scss";
-
-/* Your CSS here */
-```
-
-OR
-
-```css
-@import "~stream-chat-angular/src/assets/styles/css/index.css";
-
-/* Your CSS here */
-```
-
-## Importing SCSS Files
-
-As an alternative to importing our entire style sheet (perhaps, due to it's size), there's also the option to easily assemble only
-what you need by importing individual SCSS files. The imports should happen in your root stylesheet.
-
-:::note
-If not importing our entire bundled CSS, individually importing the SDK's SCSS files is the better alternative to copy and pasting
-our stylesheets and then customizing that code in your application. The CSS in the library does change occasionally, and you want
-to keep up to date with these to ensure no problems arise by falling behind in important styling updates.
-:::
-
-## Changing the theme
-
-Our library supports light and dark themes. You can change between the different themes using the `ThemeService`:
-
-```typescript
-import { ThemeService } from 'stream-chat-angular';
-
-constructor(themeService: ThemeService) {
-  themeService.theme$.next('dark');
-}
-```
-
-The default theme is `light`.
-
-**Example 1** - Light theme
-
-<img src={LightThemeScreenshot} width="900" />
-
-**Example 2** - Dark theme
-
-<img src={DarkThemeScreenshot} width="900" />
-
-## Customizing the theme
-
-You can customize the theme by overriding the CSS variables. The [complete list of CSS variables](https://github.com/GetStream/stream-chat-css/blob/main/src/styles/_variables.scss) can be found in the stream-chat-css repository.
-
-You can override the variables using the [`ThemeService`](../services/ThemeService.mdx). Here is an example:
-
-```typescript
-this.themeService.customLightThemeVariables = {
-  "--primary-color": "lightgreen",
-};
-this.themeService.customDarkThemeVariables = {
-  "--primary-color": "darkgreen",
-};
-```
-
-The result:
-
-**Example 1** - Custom light theme
-
-<img src={CustomLightThemeScreenshot} width="900" />
-
-**Example 2** - Custom dark theme
-
-<img src={CustomDarkThemeScreenshot} width="900" />
diff --git a/docusaurus/angular_versioned_docs/version-4/concepts/translation.mdx b/docusaurus/angular_versioned_docs/version-4/concepts/translation.mdx
deleted file mode 100644
index fbb2ba48..00000000
--- a/docusaurus/angular_versioned_docs/version-4/concepts/translation.mdx
+++ /dev/null
@@ -1,169 +0,0 @@
----
-id: translation
-sidebar_position: 2
-title: Translation
----
-
-The library uses [ngx-translate](https://github.com/ngx-translate/core) for internalization of the labels of the user interface. Currently, the library only supports English, but you can provide your own translations if you want to. If you use ngx-translate in your own project, you can still use our library's translations; for more information, see the [setup guide](./translation.mdx/#set-up-the-translations) below.
-
-## Setup
-
-You will always have to set up translations, even if you don't want to override the default translations.
-
-### Install ngx-translate
-
-`npm install @ngx-translate/core --save`
-
-### Import the `TranslateModule`
-
-```typescript
-import { TranslateModule } from "@ngx-translate/core";
-import { StreamChatModule } from "stream-chat-angular";
-
-imports: [TranslateModule.forRoot(), StreamChatModule];
-export class AppModule {}
-```
-
-Or if you're using standalone components:
-
-```typescript
-import { ApplicationConfig, importProvidersFrom } from "@angular/core";
-import { TranslateModule } from "@ngx-translate/core";
-
-export const appConfig: ApplicationConfig = {
-  providers: [importProvidersFrom(TranslateModule.forRoot())],
-};
-```
-
-:::important
-You should import the `TranslateModule.forRoot()` in a non-lazy loaded module (for example `AppModule`) even if the chat application is displayed from a lazy loaded module. If the translation isn't initialized properly the UI labels will be displayed as `"streamChat..."`.
-:::
-
-If you're using standalone components, make sure to also import the `TranslateModule` to the component that displays the chat UI:
-
-```typescript
-import { Component } from "@angular/core";
-import { TranslateModule } from "@ngx-translate/core";
-import {
-  StreamAutocompleteTextareaModule,
-  StreamChatModule,
-} from "stream-chat-angular";
-
-@Component({
-  selector: "app-root",
-  standalone: true,
-  imports: [
-    TranslateModule,
-    StreamAutocompleteTextareaModule,
-    StreamChatModule,
-  ],
-  templateUrl: "./app.component.html",
-  styleUrls: ["./app.component.scss"],
-})
-export class AppComponent {}
-```
-
-### Set up the translations
-
-Initialize the translation in the **constructor** of the component which displays the chat UI (for example `AppComponent`)
-
-```typescript
-import { StreamI18nService } from 'stream-chat-angular';
-
-constructor(private streamI18nService: StreamI18nService) {
-  this.streamI18nService.setTranslation();
-}
-```
-
-:::important
-It's important to call the `setTranslation` in the constructor of the component that displays the chat UI. If the translation isn't initialized properly the UI labels will be displayed as `"streamChat..."`.
-:::
-
-## Setup, if you're using ngx-translate in your project
-
-### Module import
-
-If you are already using ngx-translate in your project, you already have the `TranslateModule` imported and configured in your project, so you **don't** need to import `TranslateModule.forRoot()`. However you still need to import `TranslateModule` (**without** the `forRoot`) to the module/standalone component that displays the chat UI to access the `translate` pipe.
-
-### Register the translations
-
-Our library will use the same `TranslateService` as your project, and the library will register the translations through the `StreamI18nService`. Here is how to do it (typically, you will be doing it in your `AppComponent`
-):
-
-```typescript
-import { StreamI18nService } from 'stream-chat-angular';
-import { TranslateService } from '@ngx-translate/core';
-
-constructor(
-  private streamI18nService: StreamI18nService,
-  private translateService: TranslateService
-) {
-  this.translateService.getTranslation('en').subscribe(() => {
-    this.streamI18nService.setTranslation('en');
-  });
-}
-```
-
-:::important
-The HTTP loader will override all registered translations. If you use that, it is necessary to wait for the HTTP loader to finish and only register the library's translations afterward (the code snippet above shows that scenario). Ngx-translate already has a [GitHub issue](https://github.com/ngx-translate/http-loader/issues/6#issuecomment-372118792) open to solve that problem.
-:::
-
-:::important
-Our library uses the `streamChat` prefix for the translation keys, so you don't need to worry about translation keys clashing.
-:::
-
-### Provide a custom language key
-
-You can provide the language key for the translation registration:
-
-```typescript
-import { StreamI18nService } from 'stream-chat-angular';
-import { TranslateService } from '@ngx-translate/core';
-
-constructor(
-  private streamI18nService: StreamI18nService,
-  private translateService: TranslateService
-) {
-  this.translateService.getTranslation('de').subscribe(() => {
-    this.streamI18nService.setTranslation('de');
-  });
-}
-```
-
-However, it is important to note that since our library currently only supports English, the translations will always be the same. You can also provide [custom translations](./translation.mdx/#custom-translation) for each language key, if you want to.
-
-### Set the default language
-
-For the translations to work, it is necessary to set the default language. Here are two different ways to do that:
-
-```typescript
-TranslateModule.forRoot({
-  defaultLanguage: "en",
-});
-```
-
-or
-
-```typescript
-this.translateService.use("en");
-```
-
-## Custom translation
-
-You can entirely or partially override the library's [default translations](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/assets/i18n/en.ts).
-
-The `setTranslation` method of the `StreamI18nService` lets you to pass your own translations:
-
-```typescript
-import { StreamI18nService } from 'stream-chat-angular';
-
-const customTranslations = {'Nothing yet...': 'This channel is empty'};
-
-constructor(private streamI18nService: StreamI18nService) {
-  this.streamI18nService.setTranslation('en', customTranslations);
-}
-```
-
-You can see the list of translation keys [here](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/assets/i18n/en.ts).
-
-You can override the entire translation or just some keys.
diff --git a/docusaurus/angular_versioned_docs/version-4/services/AttachmentConfigurationService.mdx b/docusaurus/angular_versioned_docs/version-4/services/AttachmentConfigurationService.mdx
deleted file mode 100644
index f6056c43..00000000
--- a/docusaurus/angular_versioned_docs/version-4/services/AttachmentConfigurationService.mdx
+++ /dev/null
@@ -1,219 +0,0 @@
-# AttachmentConfigurationService
-
-The `AttachmentConfigurationService` provides customization for certain attributes of attachments displayed inside the message component. If you're using your own CDN, you can integrate resizing features of it by providing your own handlers.
-
-## Type parameters
-
-| Name | Type                                                              |
-| :--- | :---------------------------------------------------------------- |
-| `T`  | extends `DefaultStreamChatGenerics` = `DefaultStreamChatGenerics` |
-
-## Properties
-
-### customGiphyAttachmentConfigurationHandler
-
-• `Optional` **customGiphyAttachmentConfigurationHandler**: (`a`: `Attachment`<`T`\>) => `AttachmentConfigration`
-
-#### Type declaration
-
-▸ (`a`): `AttachmentConfigration`
-
-A custom handler can be provided to override the default giphy attachment (GIFs sent with the /giphy command) configuration. By default the SDK uses fixed height (a size that's known before the GIF is loaded), if you override that with dynamic height (for example: height: 100%) the scrolling logic inside the message list can break.
-
-##### Parameters
-
-| Name | Type               |
-| :--- | :----------------- |
-| `a`  | `Attachment`<`T`\> |
-
-##### Returns
-
-`AttachmentConfigration`
-
-#### Defined in
-
-[lib/attachment-configuration.service.ts:37](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L37)
-
----
-
-### customImageAttachmentConfigurationHandler
-
-• `Optional` **customImageAttachmentConfigurationHandler**: (`a`: `Attachment`<`T`\>, `type`: `"gallery"` \| `"single"` \| `"carousel"`, `containerElement`: `HTMLElement`) => `ImageAttachmentConfiguration`
-
-#### Type declaration
-
-▸ (`a`, `type`, `containerElement`): `ImageAttachmentConfiguration`
-
-A custom handler can be provided to override the default image attachment (images uploaded from files) configuration. By default the SDK uses fixed image height (a size that's known before image is loaded), if you override that with dynamic image height (for example: height: 100%) the scrolling logic inside the message list can break.
-
-##### Parameters
-
-| Name               | Type                                      |
-| :----------------- | :---------------------------------------- |
-| `a`                | `Attachment`<`T`\>                        |
-| `type`             | `"gallery"` \| `"single"` \| `"carousel"` |
-| `containerElement` | `HTMLElement`                             |
-
-##### Returns
-
-`ImageAttachmentConfiguration`
-
-#### Defined in
-
-[lib/attachment-configuration.service.ts:22](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L22)
-
----
-
-### customScrapedImageAttachmentConfigurationHandler
-
-• `Optional` **customScrapedImageAttachmentConfigurationHandler**: (`a`: `Attachment`<`T`\>) => `AttachmentConfigration`
-
-#### Type declaration
-
-▸ (`a`): `AttachmentConfigration`
-
-A custom handler can be provided to override the default scraped image attachment (images found in links inside messages) configuration. By default the SDK uses fixed height (a size that's known before image is loaded), if you override that with dynamic height (for example: height: 100%) the scrolling logic inside the message list can break.
-
-##### Parameters
-
-| Name | Type               |
-| :--- | :----------------- |
-| `a`  | `Attachment`<`T`\> |
-
-##### Returns
-
-`AttachmentConfigration`
-
-#### Defined in
-
-[lib/attachment-configuration.service.ts:43](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L43)
-
----
-
-### customVideoAttachmentConfigurationHandler
-
-• `Optional` **customVideoAttachmentConfigurationHandler**: (`a`: `Attachment`<`T`\>, `containerElement`: `HTMLElement`) => `VideoAttachmentConfiguration`
-
-#### Type declaration
-
-▸ (`a`, `containerElement`): `VideoAttachmentConfiguration`
-
-A custom handler can be provided to override the default video attachment (videos uploaded from files) configuration. By default the SDK uses fixed height (a size that's known before video is loaded), if you override that with dynamic height (for example: height: 100%) the scrolling logic inside the message list can break.
-
-##### Parameters
-
-| Name               | Type               |
-| :----------------- | :----------------- |
-| `a`                | `Attachment`<`T`\> |
-| `containerElement` | `HTMLElement`      |
-
-##### Returns
-
-`VideoAttachmentConfiguration`
-
-#### Defined in
-
-[lib/attachment-configuration.service.ts:30](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L30)
-
----
-
-### shouldGenerateVideoThumbnail
-
-• **shouldGenerateVideoThumbnail**: `boolean` = `true`
-
-You can turn on/off thumbnail generation for video attachments
-
-#### Defined in
-
-[lib/attachment-configuration.service.ts:49](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L49)
-
-## Methods
-
-### getGiphyAttachmentConfiguration
-
-▸ **getGiphyAttachmentConfiguration**(`attachment`): `AttachmentConfigration`
-
-Handles the configuration for giphy attachments, it's possible to provide your own function to override the default logic
-
-#### Parameters
-
-| Name         | Type               | Description                 |
-| :----------- | :----------------- | :-------------------------- |
-| `attachment` | `Attachment`<`T`\> | The attachment to configure |
-
-#### Returns
-
-`AttachmentConfigration`
-
-#### Defined in
-
-[lib/attachment-configuration.service.ts:180](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L180)
-
----
-
-### getImageAttachmentConfiguration
-
-▸ **getImageAttachmentConfiguration**(`attachment`, `location`, `element`): `ImageAttachmentConfiguration`
-
-Handles the configuration for image attachments, it's possible to provide your own function to override the default logic
-
-#### Parameters
-
-| Name         | Type                                      | Description                                                                                                                                                                                     |
-| :----------- | :---------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `attachment` | `Attachment`<`T`\>                        | The attachment to configure                                                                                                                                                                     |
-| `location`   | `"gallery"` \| `"single"` \| `"carousel"` | Specifies where the image is being displayed                                                                                                                                                    |
-| `element`    | `HTMLElement`                             | The default resizing logics reads the height/max-height and max-width propperties of this element and reduces file size based on the given values. File size reduction is done by Stream's CDN. |
-
-#### Returns
-
-`ImageAttachmentConfiguration`
-
-#### Defined in
-
-[lib/attachment-configuration.service.ts:57](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L57)
-
----
-
-### getScrapedImageAttachmentConfiguration
-
-▸ **getScrapedImageAttachmentConfiguration**(`attachment`): `AttachmentConfigration`
-
-Handles the configuration for scraped image attachments, it's possible to provide your own function to override the default logic
-
-#### Parameters
-
-| Name         | Type               | Description                 |
-| :----------- | :----------------- | :-------------------------- |
-| `attachment` | `Attachment`<`T`\> | The attachment to configure |
-
-#### Returns
-
-`AttachmentConfigration`
-
-#### Defined in
-
-[lib/attachment-configuration.service.ts:200](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L200)
-
----
-
-### getVideoAttachmentConfiguration
-
-▸ **getVideoAttachmentConfiguration**(`attachment`, `element`): `VideoAttachmentConfiguration`
-
-Handles the configuration for video attachments, it's possible to provide your own function to override the default logic
-
-#### Parameters
-
-| Name         | Type               | Description                                                                                                                                                                                     |
-| :----------- | :----------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `attachment` | `Attachment`<`T`\> | The attachment to configure                                                                                                                                                                     |
-| `element`    | `HTMLElement`      | The default resizing logics reads the height/max-height and max-width propperties of this element and reduces file size based on the given values. File size reduction is done by Stream's CDN. |
-
-#### Returns
-
-`VideoAttachmentConfiguration`
-
-#### Defined in
-
-[lib/attachment-configuration.service.ts:123](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L123)
diff --git a/docusaurus/angular_versioned_docs/version-4/services/AttachmentService.mdx b/docusaurus/angular_versioned_docs/version-4/services/AttachmentService.mdx
deleted file mode 100644
index 7fdb8c97..00000000
--- a/docusaurus/angular_versioned_docs/version-4/services/AttachmentService.mdx
+++ /dev/null
@@ -1,183 +0,0 @@
-# AttachmentService
-
-The `AttachmentService` manages the uploads of a message input.
-
-## Type parameters
-
-| Name | Type                                                              |
-| :--- | :---------------------------------------------------------------- |
-| `T`  | extends `DefaultStreamChatGenerics` = `DefaultStreamChatGenerics` |
-
-## Properties
-
-### attachmentUploadInProgressCounter$
-
-• **attachmentUploadInProgressCounter$**: `Observable`<`number`\>
-
-Emits the number of uploads in progress.
-
-#### Defined in
-
-[lib/attachment.service.ts:22](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment.service.ts#L22)
-
----
-
-### attachmentUploads$
-
-• **attachmentUploads$**: `Observable`<`AttachmentUpload`<`DefaultStreamChatGenerics`\>[]\>
-
-Emits the state of the uploads ([`AttachmentUpload[]`](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/types.ts)), it adds a state (`success`, `error` or `uploading`) to each file the user selects for upload. It is used by the [`AttachmentPreviewList`](../components/AttachmentPreviewListComponent.mdx) to display the attachment previews.
-
-#### Defined in
-
-[lib/attachment.service.ts:26](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment.service.ts#L26)
-
-## Methods
-
-### addAttachment
-
-▸ **addAttachment**(`attachment`): `void`
-
-You can add custom `image`, `video` and `file` attachments using this method.
-
-Note: If you just want to use your own CDN for file uploads, you don't necessary need this method, you can just specify you own upload function in the [`ChannelService`](./ChannelService.mdx)
-
-#### Parameters
-
-| Name         | Type               |
-| :----------- | :----------------- |
-| `attachment` | `Attachment`<`T`\> |
-
-#### Returns
-
-`void`
-
-#### Defined in
-
-[lib/attachment.service.ts:103](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment.service.ts#L103)
-
----
-
-### createFromAttachments
-
-▸ **createFromAttachments**(`attachments`): `void`
-
-Maps attachments received from the Stream API to uploads. This is useful when editing a message.
-
-#### Parameters
-
-| Name          | Type                 | Description                           |
-| :------------ | :------------------- | :------------------------------------ |
-| `attachments` | `Attachment`<`T`\>[] | Attachemnts received with the message |
-
-#### Returns
-
-`void`
-
-#### Defined in
-
-[lib/attachment.service.ts:189](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment.service.ts#L189)
-
----
-
-### deleteAttachment
-
-▸ **deleteAttachment**(`upload`): `Promise`<`void`\>
-
-Deletes an attachment, the attachment can have any state (`error`, `uploading` or `success`).
-
-#### Parameters
-
-| Name     | Type                                             |
-| :------- | :----------------------------------------------- |
-| `upload` | `AttachmentUpload`<`DefaultStreamChatGenerics`\> |
-
-#### Returns
-
-`Promise`<`void`\>
-
-#### Defined in
-
-[lib/attachment.service.ts:128](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment.service.ts#L128)
-
----
-
-### filesSelected
-
-▸ **filesSelected**(`fileList`): `Promise`<`void`\>
-
-Uploads the selected files, and creates preview for image files. The result is propagated throught the `attachmentUploads$` stream.
-
-#### Parameters
-
-| Name       | Type                 | Description                    |
-| :--------- | :------------------- | :----------------------------- |
-| `fileList` | `null` \| `FileList` | The files selected by the user |
-
-#### Returns
-
-`Promise`<`void`\>
-
-A promise with the result
-
-#### Defined in
-
-[lib/attachment.service.ts:54](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment.service.ts#L54)
-
----
-
-### mapToAttachments
-
-▸ **mapToAttachments**(): `Attachment`<`DefaultGenerics`\>[]
-
-Maps the current uploads to a format that can be sent along with the message to the Stream API.
-
-#### Returns
-
-`Attachment`<`DefaultGenerics`\>[]
-
-the attachments
-
-#### Defined in
-
-[lib/attachment.service.ts:158](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment.service.ts#L158)
-
----
-
-### resetAttachmentUploads
-
-▸ **resetAttachmentUploads**(): `void`
-
-Resets the attachments uploads (for example after the message with the attachments sent successfully)
-
-#### Returns
-
-`void`
-
-#### Defined in
-
-[lib/attachment.service.ts:45](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment.service.ts#L45)
-
----
-
-### retryAttachmentUpload
-
-▸ **retryAttachmentUpload**(`file`): `Promise`<`void`\>
-
-Retries to upload an attachment.
-
-#### Parameters
-
-| Name   | Type   |
-| :----- | :----- |
-| `file` | `File` |
-
-#### Returns
-
-`Promise`<`void`\>
-
-A promise with the result
-
-#### Defined in
-
-[lib/attachment.service.ts:113](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment.service.ts#L113)
diff --git a/docusaurus/angular_versioned_docs/version-4/services/ChannelListToggleService.mdx b/docusaurus/angular_versioned_docs/version-4/services/ChannelListToggleService.mdx
deleted file mode 100644
index 148d1d8b..00000000
--- a/docusaurus/angular_versioned_docs/version-4/services/ChannelListToggleService.mdx
+++ /dev/null
@@ -1,103 +0,0 @@
-# ChannelListToggleService
-
-The `ChannelListToggleService` can be used to toggle the channel list.
-
-**`deprecated`** This service can only be used with [theming-v1](../concepts/theming-and-css.mdx), if you are using [thmeing-v2](../theming/introduction.mdx) please refer to our [responsive layout guide](../code-examples/responsive-layout.mdx)
-
-## Properties
-
-### isOpen$
-
-• **isOpen$**: `Observable`<`boolean`\>
-
-Emits `true` if the channel list is in open state, otherwise it emits `false`
-
-#### Defined in
-
-[lib/channel-list/channel-list-toggle.service.ts:15](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel-list/channel-list-toggle.service.ts#L15)
-
-## Methods
-
-### channelSelected
-
-▸ **channelSelected**(): `void`
-
-This method should be called if a channel was selected, if on mobile, the channel list will be closed.
-
-#### Returns
-
-`void`
-
-#### Defined in
-
-[lib/channel-list/channel-list-toggle.service.ts:60](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel-list/channel-list-toggle.service.ts#L60)
-
----
-
-### close
-
-▸ **close**(): `void`
-
-Closes the channel list.
-
-#### Returns
-
-`void`
-
-#### Defined in
-
-[lib/channel-list/channel-list-toggle.service.ts:38](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel-list/channel-list-toggle.service.ts#L38)
-
----
-
-### open
-
-▸ **open**(): `void`
-
-Opens the channel list.
-
-#### Returns
-
-`void`
-
-#### Defined in
-
-[lib/channel-list/channel-list-toggle.service.ts:31](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel-list/channel-list-toggle.service.ts#L31)
-
----
-
-### setMenuElement
-
-▸ **setMenuElement**(`element`): `void`
-
-Sets the channel list element, on mobile screen size if the user opens the channel list, and clicks outside, the service automatically closes the channel list if a reference to the HTML element is provided.
-
-#### Parameters
-
-| Name      | Type                         |
-| :-------- | :--------------------------- |
-| `element` | `undefined` \| `HTMLElement` |
-
-#### Returns
-
-`void`
-
-#### Defined in
-
-[lib/channel-list/channel-list-toggle.service.ts:53](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel-list/channel-list-toggle.service.ts#L53)
-
----
-
-### toggle
-
-▸ **toggle**(): `void`
-
-Opens the channel list if it was closed, and closes if it was opened.
-
-#### Returns
-
-`void`
-
-#### Defined in
-
-[lib/channel-list/channel-list-toggle.service.ts:45](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel-list/channel-list-toggle.service.ts#L45)
diff --git a/docusaurus/angular_versioned_docs/version-4/services/ChannelService.mdx b/docusaurus/angular_versioned_docs/version-4/services/ChannelService.mdx
deleted file mode 100644
index 07f49e33..00000000
--- a/docusaurus/angular_versioned_docs/version-4/services/ChannelService.mdx
+++ /dev/null
@@ -1,1450 +0,0 @@
-# ChannelService
-
-The `ChannelService` provides data and interaction for the channel list and message list.
-
-## Type parameters
-
-| Name | Type                                                              |
-| :--- | :---------------------------------------------------------------- |
-| `T`  | extends `DefaultStreamChatGenerics` = `DefaultStreamChatGenerics` |
-
-## Properties
-
-### activeChannel$
-
-• **activeChannel$**: `Observable`<`undefined` \| `Channel`<`T`\>\>
-
-Emits the currently active channel.
-
-:::important
-If you want to subscribe to channel events, you need to manually reenter Angular's change detection zone, our [Change detection guide](../concepts/change-detection.mdx) explains this in detail.
-:::
-
-The active channel will always be marked as read when a new message is received
-
-#### Defined in
-
-[lib/channel.service.ts:97](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L97)
-
----
-
-### activeChannelLastReadMessageId
-
-• `Optional` **activeChannelLastReadMessageId**: `string`
-
-The last read message id of the active channel, it's used by the message list component to display unread UI, and jump to latest read message
-
-This property isn't always updated, please use `channel.read` to display up-to-date read information
-
-#### Defined in
-
-[lib/channel.service.ts:149](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L149)
-
----
-
-### activeChannelMessages$
-
-• **activeChannelMessages$**: `Observable`<`StreamMessage`<`T`\>[]\>
-
-Emits the list of currently loaded messages of the active channel.
-
-#### Defined in
-
-[lib/channel.service.ts:101](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L101)
-
----
-
-### activeChannelPinnedMessages$
-
-• **activeChannelPinnedMessages$**: `Observable`<`StreamMessage`<`T`\>[]\>
-
-Emits the list of pinned messages of the active channel.
-
-#### Defined in
-
-[lib/channel.service.ts:105](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L105)
-
----
-
-### activeChannelUnreadCount
-
-• `Optional` **activeChannelUnreadCount**: `number`
-
-The unread count of the active channel, it's used by the message list component to display unread UI
-
-This property isn't always updated, please use `channel.read` to display up-to-date read information
-
-#### Defined in
-
-[lib/channel.service.ts:155](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L155)
-
----
-
-### activeParentMessage$
-
-• **activeParentMessage$**: `Observable`<`undefined` \| `StreamMessage`<`T`\>\>
-
-Emits the currently selected parent message. If no message is selected, it emits undefined.
-
-#### Defined in
-
-[lib/channel.service.ts:117](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L117)
-
----
-
-### activeParentMessageId$
-
-• **activeParentMessageId$**: `Observable`<`undefined` \| `string`\>
-
-Emits the id of the currently selected parent message. If no message is selected, it emits undefined.
-
-#### Defined in
-
-[lib/channel.service.ts:109](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L109)
-
----
-
-### activeThreadMessages$
-
-• **activeThreadMessages$**: `Observable`<`StreamMessage`<`T`\>[]\>
-
-Emits the list of currently loaded thread replies belonging to the selected parent message. If there is no currently active thread it emits an empty array.
-
-#### Defined in
-
-[lib/channel.service.ts:113](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L113)
-
----
-
-### beforeSendMessage
-
-• `Optional` **beforeSendMessage**: (`input`: `MessageInput`<`T`\>) => `MessageInput`<`T`\> \| `Promise`<`MessageInput`<`T`\>\>
-
-#### Type declaration
-
-▸ (`input`): `MessageInput`<`T`\> \| `Promise`<`MessageInput`<`T`\>\>
-
-The provided method will be called before a new message is sent to Stream's API. You can use this hook to tranfrom or enrich the message being sent.
-
-##### Parameters
-
-| Name    | Type                 |
-| :------ | :------------------- |
-| `input` | `MessageInput`<`T`\> |
-
-##### Returns
-
-`MessageInput`<`T`\> \| `Promise`<`MessageInput`<`T`\>\>
-
-#### Defined in
-
-[lib/channel.service.ts:304](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L304)
-
----
-
-### beforeUpdateMessage
-
-• `Optional` **beforeUpdateMessage**: (`message`: `StreamMessage`<`T`\>) => `StreamMessage`<`T`\> \| `Promise`<`StreamMessage`<`T`\>\>
-
-#### Type declaration
-
-▸ (`message`): `StreamMessage`<`T`\> \| `Promise`<`StreamMessage`<`T`\>\>
-
-The provided method will be called before a message is sent to Stream's API for update. You can use this hook to tranfrom or enrich the message being updated.
-
-##### Parameters
-
-| Name      | Type                  |
-| :-------- | :-------------------- |
-| `message` | `StreamMessage`<`T`\> |
-
-##### Returns
-
-`StreamMessage`<`T`\> \| `Promise`<`StreamMessage`<`T`\>\>
-
-#### Defined in
-
-[lib/channel.service.ts:310](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L310)
-
----
-
-### bouncedMessage$
-
-• **bouncedMessage$**: `BehaviorSubject`<`undefined` \| `StreamMessage`<`T`\>\>
-
-If you're using [semantic filters for moderation](https://getstream.io/automated-moderation/docs/automod_configuration/?q=semantic%20filters) you can set up rules for bouncing messages.
-
-If a message is bounced, it will be emitted via this `Observable`. The built-in [`MessageBouncePrompt` component](../../components/MessageBouncePromptComponent) will display the bounce option to the user if a bounced message is clicked.
-
-#### Defined in
-
-[lib/channel.service.ts:143](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L143)
-
----
-
-### channelQueryState$
-
-• **channelQueryState$**: `Observable`<`undefined` \| `ChannelQueryState`\>
-
-The result of the latest channel query request.
-
-#### Defined in
-
-[lib/channel.service.ts:87](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L87)
-
----
-
-### channels$
-
-• **channels$**: `Observable`<`undefined` \| `Channel`<`T`\>[]\>
-
-Emits the currently loaded and [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel list.
-
-:::important
-If you want to subscribe to channel events, you need to manually reenter Angular's change detection zone, our [Change detection guide](../concepts/change-detection.mdx) explains this in detail.
-:::
-
-Apart from pagination, the channel list is also updated on the following events:
-
-| Event type                          | Default behavior                                                   | Custom handler to override                    |
-| ----------------------------------- | ------------------------------------------------------------------ | --------------------------------------------- |
-| `channel.deleted`                   | Remove channel from the list                                       | `customChannelDeletedHandler`                 |
-| `channel.hidden`                    | Remove channel from the list                                       | `customChannelHiddenHandler`                  |
-| `channel.truncated`                 | Updates the channel                                                | `customChannelTruncatedHandler`               |
-| `channel.updated`                   | Updates the channel                                                | `customChannelUpdatedHandler`                 |
-| `channel.visible`                   | Adds the channel to the list                                       | `customChannelVisibleHandler`                 |
-| `message.new`                       | Moves the channel to top of the list                               | `customNewMessageHandler`                     |
-| `notification.added_to_channel`     | Adds the new channel to the top of the list and starts watching it | `customAddedToChannelNotificationHandler`     |
-| `notification.message_new`          | Adds the new channel to the top of the list and starts watching it | `customNewMessageNotificationHandler`         |
-| `notification.removed_from_channel` | Removes the channel from the list                                  | `customRemovedFromChannelNotificationHandler` |
-
-It's important to note that filters don't apply to updates to the list from events.
-
-Our platform documentation covers the topic of [channel events](https://getstream.io/chat/docs/javascript/event_object/?language=javascript#events) in depth.
-
-By default if an error occurs during channel load, the Observable will emit an error, which will close the stream. Users will have to reload the page to be able to reinitialize the `ChannelService`. If you don't want the streams to be closed, you can pass `options.keepAliveChannels$OnError = true` to the `init` method. In that case the `channelQueryState$` stream will emit the status of the latest channel load request.
-
-#### Defined in
-
-[lib/channel.service.ts:83](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L83)
-
----
-
-### customAddedToChannelNotificationHandler
-
-• `Optional` **customAddedToChannelNotificationHandler**: (`clientEvent`: `ClientEvent`<`DefaultStreamChatGenerics`\>, `channelListSetter`: (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`) => `void`
-
-#### Type declaration
-
-▸ (`clientEvent`, `channelListSetter`): `void`
-
-Custom event handler to call when the user is added to a channel, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels)
-
-##### Parameters
-
-| Name                | Type                                                                                                                    |
-| :------------------ | :---------------------------------------------------------------------------------------------------------------------- |
-| `clientEvent`       | `ClientEvent`<`DefaultStreamChatGenerics`\>                                                                             |
-| `channelListSetter` | (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` |
-
-##### Returns
-
-`void`
-
-#### Defined in
-
-[lib/channel.service.ts:169](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L169)
-
----
-
-### customChannelDeletedHandler
-
-• `Optional` **customChannelDeletedHandler**: (`event`: `Event`<`DefaultGenerics`\>, `channel`: `Channel`<`T`\>, `channelListSetter`: (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`, `messageListSetter`: (`messages`: `StreamMessage`<`T`\>[]) => `void`, `threadListSetter`: (`messages`: `StreamMessage`<`T`\>[]) => `void`, `parentMessageSetter`: (`message`: `undefined` \| `StreamMessage`<`T`\>) => `void`) => `void`
-
-#### Type declaration
-
-▸ (`event`, `channel`, `channelListSetter`, `messageListSetter`, `threadListSetter`, `parentMessageSetter`): `void`
-
-Custom event handler to call when a channel is deleted, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels)
-
-##### Parameters
-
-| Name                  | Type                                                                                                                    |
-| :-------------------- | :---------------------------------------------------------------------------------------------------------------------- |
-| `event`               | `Event`<`DefaultGenerics`\>                                                                                             |
-| `channel`             | `Channel`<`T`\>                                                                                                         |
-| `channelListSetter`   | (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` |
-| `messageListSetter`   | (`messages`: `StreamMessage`<`T`\>[]) => `void`                                                                         |
-| `threadListSetter`    | (`messages`: `StreamMessage`<`T`\>[]) => `void`                                                                         |
-| `parentMessageSetter` | (`message`: `undefined` \| `StreamMessage`<`T`\>) => `void`                                                             |
-
-##### Returns
-
-`void`
-
-#### Defined in
-
-[lib/channel.service.ts:189](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L189)
-
----
-
-### customChannelHiddenHandler
-
-• `Optional` **customChannelHiddenHandler**: (`event`: `Event`<`DefaultGenerics`\>, `channel`: `Channel`<`T`\>, `channelListSetter`: (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`, `messageListSetter`: (`messages`: `StreamMessage`<`T`\>[]) => `void`, `threadListSetter`: (`messages`: `StreamMessage`<`T`\>[]) => `void`, `parentMessageSetter`: (`message`: `undefined` \| `StreamMessage`<`T`\>) => `void`) => `void`
-
-#### Type declaration
-
-▸ (`event`, `channel`, `channelListSetter`, `messageListSetter`, `threadListSetter`, `parentMessageSetter`): `void`
-
-Custom event handler to call when a channel becomes hidden, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels)
-
-##### Parameters
-
-| Name                  | Type                                                                                                                    |
-| :-------------------- | :---------------------------------------------------------------------------------------------------------------------- |
-| `event`               | `Event`<`DefaultGenerics`\>                                                                                             |
-| `channel`             | `Channel`<`T`\>                                                                                                         |
-| `channelListSetter`   | (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` |
-| `messageListSetter`   | (`messages`: `StreamMessage`<`T`\>[]) => `void`                                                                         |
-| `threadListSetter`    | (`messages`: `StreamMessage`<`T`\>[]) => `void`                                                                         |
-| `parentMessageSetter` | (`message`: `undefined` \| `StreamMessage`<`T`\>) => `void`                                                             |
-
-##### Returns
-
-`void`
-
-#### Defined in
-
-[lib/channel.service.ts:231](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L231)
-
----
-
-### customChannelTruncatedHandler
-
-• `Optional` **customChannelTruncatedHandler**: (`event`: `Event`<`DefaultGenerics`\>, `channel`: `Channel`<`T`\>, `channelListSetter`: (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`, `messageListSetter`: (`messages`: `StreamMessage`<`T`\>[]) => `void`, `threadListSetter`: (`messages`: `StreamMessage`<`T`\>[]) => `void`, `parentMessageSetter`: (`message`: `undefined` \| `StreamMessage`<`T`\>) => `void`) => `void`
-
-#### Type declaration
-
-▸ (`event`, `channel`, `channelListSetter`, `messageListSetter`, `threadListSetter`, `parentMessageSetter`): `void`
-
-Custom event handler to call when a channel is truncated, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels)
-
-##### Parameters
-
-| Name                  | Type                                                                                                                    |
-| :-------------------- | :---------------------------------------------------------------------------------------------------------------------- |
-| `event`               | `Event`<`DefaultGenerics`\>                                                                                             |
-| `channel`             | `Channel`<`T`\>                                                                                                         |
-| `channelListSetter`   | (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` |
-| `messageListSetter`   | (`messages`: `StreamMessage`<`T`\>[]) => `void`                                                                         |
-| `threadListSetter`    | (`messages`: `StreamMessage`<`T`\>[]) => `void`                                                                         |
-| `parentMessageSetter` | (`message`: `undefined` \| `StreamMessage`<`T`\>) => `void`                                                             |
-
-##### Returns
-
-`void`
-
-#### Defined in
-
-[lib/channel.service.ts:217](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L217)
-
----
-
-### customChannelUpdatedHandler
-
-• `Optional` **customChannelUpdatedHandler**: (`event`: `Event`<`DefaultGenerics`\>, `channel`: `Channel`<`T`\>, `channelListSetter`: (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`, `messageListSetter`: (`messages`: `StreamMessage`<`DefaultStreamChatGenerics`\>[]) => `void`, `threadListSetter`: (`messages`: `StreamMessage`<`DefaultStreamChatGenerics`\>[]) => `void`, `parentMessageSetter`: (`message`: `undefined` \| `StreamMessage`<`DefaultStreamChatGenerics`\>) => `void`) => `void`
-
-#### Type declaration
-
-▸ (`event`, `channel`, `channelListSetter`, `messageListSetter`, `threadListSetter`, `parentMessageSetter`): `void`
-
-Custom event handler to call when a channel is updated, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels)
-
-##### Parameters
-
-| Name                  | Type                                                                                                                    |
-| :-------------------- | :---------------------------------------------------------------------------------------------------------------------- |
-| `event`               | `Event`<`DefaultGenerics`\>                                                                                             |
-| `channel`             | `Channel`<`T`\>                                                                                                         |
-| `channelListSetter`   | (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` |
-| `messageListSetter`   | (`messages`: `StreamMessage`<`DefaultStreamChatGenerics`\>[]) => `void`                                                 |
-| `threadListSetter`    | (`messages`: `StreamMessage`<`DefaultStreamChatGenerics`\>[]) => `void`                                                 |
-| `parentMessageSetter` | (`message`: `undefined` \| `StreamMessage`<`DefaultStreamChatGenerics`\>) => `void`                                     |
-
-##### Returns
-
-`void`
-
-#### Defined in
-
-[lib/channel.service.ts:203](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L203)
-
----
-
-### customChannelVisibleHandler
-
-• `Optional` **customChannelVisibleHandler**: (`event`: `Event`<`DefaultGenerics`\>, `channel`: `Channel`<`T`\>, `channelListSetter`: (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`, `messageListSetter`: (`messages`: `StreamMessage`<`T`\>[]) => `void`, `threadListSetter`: (`messages`: `StreamMessage`<`T`\>[]) => `void`, `parentMessageSetter`: (`message`: `undefined` \| `StreamMessage`<`T`\>) => `void`) => `void`
-
-#### Type declaration
-
-▸ (`event`, `channel`, `channelListSetter`, `messageListSetter`, `threadListSetter`, `parentMessageSetter`): `void`
-
-Custom event handler to call when a channel becomes visible, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels)
-
-##### Parameters
-
-| Name                  | Type                                                                                                                    |
-| :-------------------- | :---------------------------------------------------------------------------------------------------------------------- |
-| `event`               | `Event`<`DefaultGenerics`\>                                                                                             |
-| `channel`             | `Channel`<`T`\>                                                                                                         |
-| `channelListSetter`   | (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` |
-| `messageListSetter`   | (`messages`: `StreamMessage`<`T`\>[]) => `void`                                                                         |
-| `threadListSetter`    | (`messages`: `StreamMessage`<`T`\>[]) => `void`                                                                         |
-| `parentMessageSetter` | (`message`: `undefined` \| `StreamMessage`<`T`\>) => `void`                                                             |
-
-##### Returns
-
-`void`
-
-#### Defined in
-
-[lib/channel.service.ts:245](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L245)
-
----
-
-### customFileDeleteRequest
-
-• `Optional` **customFileDeleteRequest**: (`url`: `string`, `channel`: `Channel`<`T`\>) => `Promise`<`void`\>
-
-#### Type declaration
-
-▸ (`url`, `channel`): `Promise`<`void`\>
-
-You can override the default file delete request - override this if you use your own CDN
-
-##### Parameters
-
-| Name      | Type            |
-| :-------- | :-------------- |
-| `url`     | `string`        |
-| `channel` | `Channel`<`T`\> |
-
-##### Returns
-
-`Promise`<`void`\>
-
-#### Defined in
-
-[lib/channel.service.ts:287](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L287)
-
----
-
-### customFileUploadRequest
-
-• `Optional` **customFileUploadRequest**: (`file`: `File`, `channel`: `Channel`<`T`\>) => `Promise`<{}\>
-
-#### Type declaration
-
-▸ (`file`, `channel`): `Promise`<{}\>
-
-You can override the default file upload request - you can use this to upload files to your own CDN
-
-##### Parameters
-
-| Name      | Type            |
-| :-------- | :-------------- |
-| `file`    | `File`          |
-| `channel` | `Channel`<`T`\> |
-
-##### Returns
-
-`Promise`<{}\>
-
-#### Defined in
-
-[lib/channel.service.ts:273](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L273)
-
----
-
-### customImageDeleteRequest
-
-• `Optional` **customImageDeleteRequest**: (`url`: `string`, `channel`: `Channel`<`T`\>) => `Promise`<`void`\>
-
-#### Type declaration
-
-▸ (`url`, `channel`): `Promise`<`void`\>
-
-You can override the default image delete request - override this if you use your own CDN
-
-##### Parameters
-
-| Name      | Type            |
-| :-------- | :-------------- |
-| `url`     | `string`        |
-| `channel` | `Channel`<`T`\> |
-
-##### Returns
-
-`Promise`<`void`\>
-
-#### Defined in
-
-[lib/channel.service.ts:291](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L291)
-
----
-
-### customImageUploadRequest
-
-• `Optional` **customImageUploadRequest**: (`file`: `File`, `channel`: `Channel`<`T`\>) => `Promise`<{}\>
-
-#### Type declaration
-
-▸ (`file`, `channel`): `Promise`<{}\>
-
-You can override the default image upload request - you can use this to upload images to your own CDN
-
-##### Parameters
-
-| Name      | Type            |
-| :-------- | :-------------- |
-| `file`    | `File`          |
-| `channel` | `Channel`<`T`\> |
-
-##### Returns
-
-`Promise`<{}\>
-
-#### Defined in
-
-[lib/channel.service.ts:280](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L280)
-
----
-
-### customNewMessageHandler
-
-• `Optional` **customNewMessageHandler**: (`event`: `Event`<`DefaultGenerics`\>, `channel`: `Channel`<`T`\>, `channelListSetter`: (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`, `messageListSetter`: (`messages`: `StreamMessage`<`T`\>[]) => `void`, `threadListSetter`: (`messages`: `StreamMessage`<`T`\>[]) => `void`, `parentMessageSetter`: (`message`: `undefined` \| `StreamMessage`<`T`\>) => `void`) => `void`
-
-#### Type declaration
-
-▸ (`event`, `channel`, `channelListSetter`, `messageListSetter`, `threadListSetter`, `parentMessageSetter`): `void`
-
-Custom event handler to call if a new message received from a channel that is being watched, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels)
-
-##### Parameters
-
-| Name                  | Type                                                                                                                    |
-| :-------------------- | :---------------------------------------------------------------------------------------------------------------------- |
-| `event`               | `Event`<`DefaultGenerics`\>                                                                                             |
-| `channel`             | `Channel`<`T`\>                                                                                                         |
-| `channelListSetter`   | (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` |
-| `messageListSetter`   | (`messages`: `StreamMessage`<`T`\>[]) => `void`                                                                         |
-| `threadListSetter`    | (`messages`: `StreamMessage`<`T`\>[]) => `void`                                                                         |
-| `parentMessageSetter` | (`message`: `undefined` \| `StreamMessage`<`T`\>) => `void`                                                             |
-
-##### Returns
-
-`void`
-
-#### Defined in
-
-[lib/channel.service.ts:259](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L259)
-
----
-
-### customNewMessageNotificationHandler
-
-• `Optional` **customNewMessageNotificationHandler**: (`clientEvent`: `ClientEvent`<`DefaultStreamChatGenerics`\>, `channelListSetter`: (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`) => `void`
-
-#### Type declaration
-
-▸ (`clientEvent`, `channelListSetter`): `void`
-
-Custom event handler to call if a new message received from a channel that is not being watched, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels)
-
-##### Parameters
-
-| Name                | Type                                                                                                                    |
-| :------------------ | :---------------------------------------------------------------------------------------------------------------------- |
-| `clientEvent`       | `ClientEvent`<`DefaultStreamChatGenerics`\>                                                                             |
-| `channelListSetter` | (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` |
-
-##### Returns
-
-`void`
-
-#### Defined in
-
-[lib/channel.service.ts:159](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L159)
-
----
-
-### customPaginator
-
-• `Optional` **customPaginator**: (`channelQueryResult`: `Channel`<`T`\>[]) => `NextPageConfiguration`
-
-#### Type declaration
-
-▸ (`channelQueryResult`): `NextPageConfiguration`
-
-By default the SDK uses an offset based pagination, you can change/extend this by providing your own custom paginator method.
-
-The method will be called with the result of the latest channel query.
-
-You can return either an offset, or a filter using the [`$lte`/`$gte` operator](https://getstream.io/chat/docs/javascript/query_syntax_operators/). If you return a filter, it will be merged with the filter provided for the `init` method.
-
-##### Parameters
-
-| Name                 | Type              |
-| :------------------- | :---------------- |
-| `channelQueryResult` | `Channel`<`T`\>[] |
-
-##### Returns
-
-`NextPageConfiguration`
-
-#### Defined in
-
-[lib/channel.service.ts:320](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L320)
-
----
-
-### customRemovedFromChannelNotificationHandler
-
-• `Optional` **customRemovedFromChannelNotificationHandler**: (`clientEvent`: `ClientEvent`<`DefaultStreamChatGenerics`\>, `channelListSetter`: (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`) => `void`
-
-#### Type declaration
-
-▸ (`clientEvent`, `channelListSetter`): `void`
-
-Custom event handler to call when the user is removed from a channel, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels)
-
-##### Parameters
-
-| Name                | Type                                                                                                                    |
-| :------------------ | :---------------------------------------------------------------------------------------------------------------------- |
-| `clientEvent`       | `ClientEvent`<`DefaultStreamChatGenerics`\>                                                                             |
-| `channelListSetter` | (`channels`: (`Channel`<`T`\> \| `ChannelResponse`<`T`\>)[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` |
-
-##### Returns
-
-`void`
-
-#### Defined in
-
-[lib/channel.service.ts:179](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L179)
-
----
-
-### hasMoreChannels$
-
-• **hasMoreChannels$**: `Observable`<`boolean`\>
-
-Emits `false` if there are no more pages of channels that can be loaded.
-
-#### Defined in
-
-[lib/channel.service.ts:55](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L55)
-
----
-
-### jumpToMessage$
-
-• **jumpToMessage$**: `Observable`<{}\>
-
-Emits the ID of the message the message list should jump to (can be a channel message or thread message)
-
-#### Defined in
-
-[lib/channel.service.ts:125](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L125)
-
----
-
-### latestMessageDateByUserByChannels$
-
-• **latestMessageDateByUserByChannels$**: `Observable`<{ [key: string]: `Date`; }\>
-
-Emits a map that contains the date of the latest message sent by the current user by channels (this is used to detect if slow mode countdown should be started)
-
-#### Defined in
-
-[lib/channel.service.ts:137](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L137)
-
----
-
-### messageDeleteConfirmationHandler
-
-• `Optional` **messageDeleteConfirmationHandler**: (`message`: `StreamMessage`<`T`\>) => `Promise`<`boolean`\>
-
-#### Type declaration
-
-▸ (`message`): `Promise`<`boolean`\>
-
-The provided method will be called before deleting a message. If the returned Promise resolves to `true` to deletion will go ahead. If `false` is returned, the message won't be deleted.
-
-##### Parameters
-
-| Name      | Type                  |
-| :-------- | :-------------------- |
-| `message` | `StreamMessage`<`T`\> |
-
-##### Returns
-
-`Promise`<`boolean`\>
-
-#### Defined in
-
-[lib/channel.service.ts:298](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L298)
-
----
-
-### messageToQuote$
-
-• **messageToQuote$**: `Observable`<`undefined` \| `StreamMessage`<`T`\>\>
-
-Emits the currently selected message to quote
-
-#### Defined in
-
-[lib/channel.service.ts:121](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L121)
-
----
-
-### usersTypingInChannel$
-
-• **usersTypingInChannel$**: `Observable`<`UserResponse`<`T`\>[]\>
-
-Emits the list of users that are currently typing in the channel (current user is not included)
-
-#### Defined in
-
-[lib/channel.service.ts:129](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L129)
-
----
-
-### usersTypingInThread$
-
-• **usersTypingInThread$**: `Observable`<`UserResponse`<`T`\>[]\>
-
-Emits the list of users that are currently typing in the active thread (current user is not included)
-
-#### Defined in
-
-[lib/channel.service.ts:133](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L133)
-
-## Accessors
-
-### activeChannel
-
-• `get` **activeChannel**(): `undefined` \| `Channel`<`T`\>
-
-The current active channel
-
-#### Returns
-
-`undefined` \| `Channel`<`T`\>
-
-#### Defined in
-
-[lib/channel.service.ts:1555](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L1555)
-
----
-
-### activeChannelMessages
-
-• `get` **activeChannelMessages**(): (`StreamMessage`<`T`\> \| `MessageResponse`<`T`\> \| `FormatMessageResponse`<`T`\>)[]
-
-The current active channel messages
-
-#### Returns
-
-(`StreamMessage`<`T`\> \| `MessageResponse`<`T`\> \| `FormatMessageResponse`<`T`\>)[]
-
-#### Defined in
-
-[lib/channel.service.ts:1562](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L1562)
-
----
-
-### channels
-
-• `get` **channels**(): `Channel`<`T`\>[]
-
-The current list of channels
-
-#### Returns
-
-`Channel`<`T`\>[]
-
-#### Defined in
-
-[lib/channel.service.ts:1548](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L1548)
-
----
-
-### shouldMarkActiveChannelAsRead
-
-• `get` **shouldMarkActiveChannelAsRead**(): `boolean`
-
-If set to false, read events won't be sent as new messages are received. If set to true active channel (if any) will immediately be marked as read.
-
-#### Returns
-
-`boolean`
-
-#### Defined in
-
-[lib/channel.service.ts:523](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L523)
-
-• `set` **shouldMarkActiveChannelAsRead**(`shouldMarkActiveChannelAsRead`): `void`
-
-If set to false, read events won't be sent as new messages are received. If set to true active channel (if any) will immediately be marked as read.
-
-#### Parameters
-
-| Name                            | Type      |
-| :------------------------------ | :-------- |
-| `shouldMarkActiveChannelAsRead` | `boolean` |
-
-#### Returns
-
-`void`
-
-#### Defined in
-
-[lib/channel.service.ts:530](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L530)
-
-## Methods
-
-### addChannel
-
-▸ **addChannel**(`channel`): `void`
-
-Add a new channel to the channel list
-The channel will be added to the beginning of the channel list
-
-#### Parameters
-
-| Name      | Type            |
-| :-------- | :-------------- |
-| `channel` | `Channel`<`T`\> |
-
-#### Returns
-
-`void`
-
-#### Defined in
-
-[lib/channel.service.ts:1080](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L1080)
-
----
-
-### addReaction
-
-▸ **addReaction**(`messageId`, `reactionType`, `customData?`): `Promise`<`void`\>
-
-Adds a reaction to a message.
-
-#### Parameters
-
-| Name           | Type                    | Description                                  |
-| :------------- | :---------------------- | :------------------------------------------- |
-| `messageId`    | `string`                | The id of the message to add the reaction to |
-| `reactionType` | `string`                | The type of the reaction                     |
-| `customData?`  | `T`[``"reactionType"``] |                                              |
-
-#### Returns
-
-`Promise`<`void`\>
-
-#### Defined in
-
-[lib/channel.service.ts:771](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L771)
-
----
-
-### autocompleteMembers
-
-▸ **autocompleteMembers**(`searchTerm`): `Promise`<`ChannelMemberResponse`<`T`\>[]\>
-
-Returns the autocomplete options for current channel members. If the channel has less than 100 members, it returns the channel members, otherwise sends a [search request](https://getstream.io/chat/docs/javascript/query_members/?language=javascript#pagination-and-ordering) with the given search term.
-
-#### Parameters
-
-| Name         | Type     | Description                                |
-| :----------- | :------- | :----------------------------------------- |
-| `searchTerm` | `string` | Text to search for in the names of members |
-
-#### Returns
-
-`Promise`<`ChannelMemberResponse`<`T`\>[]\>
-
-The list of members matching the search filter
-
-#### Defined in
-
-[lib/channel.service.ts:1007](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L1007)
-
----
-
-### clearMessageJump
-
-▸ **clearMessageJump**(): `void`
-
-Clears the currently selected message to jump
-
-#### Returns
-
-`void`
-
-#### Defined in
-
-[lib/channel.service.ts:1203](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L1203)
-
----
-
-### deleteAttachment
-
-▸ **deleteAttachment**(`attachmentUpload`): `Promise`<`void`\>
-
-Deletes an uploaded file by URL. If you want to know more about [file uploads](https://getstream.io/chat/docs/javascript/file_uploads/?language=javascript) check out the platform documentation
-
-#### Parameters
-
-| Name               | Type                                             | Description                                                                             |
-| :----------------- | :----------------------------------------------- | :-------------------------------------------------------------------------------------- |
-| `attachmentUpload` | `AttachmentUpload`<`DefaultStreamChatGenerics`\> | Attachment to be deleted (output of the [`AttachmentService`](./AttachmentService.mdx)) |
-
-#### Returns
-
-`Promise`<`void`\>
-
-#### Defined in
-
-[lib/channel.service.ts:991](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L991)
-
----
-
-### deleteMessage
-
-▸ **deleteMessage**(`message`, `isLocalDelete?`): `Promise`<`void`\>
-
-Deletes the message from the active channel
-
-#### Parameters
-
-| Name            | Type                                          | Default value | Description                                                                                                       |
-| :-------------- | :-------------------------------------------- | :------------ | :---------------------------------------------------------------------------------------------------------------- |
-| `message`       | `StreamMessage`<`DefaultStreamChatGenerics`\> | `undefined`   | Message to be deleted                                                                                             |
-| `isLocalDelete` | `boolean`                                     | `false`       | set this `true` if you want to delete a message that's only part of the local state, not yet saved on the backend |
-
-#### Returns
-
-`Promise`<`void`\>
-
-#### Defined in
-
-[lib/channel.service.ts:893](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L893)
-
----
-
-### deselectActiveChannel
-
-▸ **deselectActiveChannel**(): `void`
-
-Deselects the currently active (if any) channel
-
-#### Returns
-
-`void`
-
-#### Defined in
-
-[lib/channel.service.ts:578](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L578)
-
----
-
-### getMessageReactions
-
-▸ **getMessageReactions**(`messageId`): `Promise`<`ReactionResponse`<`T`\>[]\>
-
-Get the last 1200 reactions of a message in the current active channel. If you need to fetch more reactions please use the [following endpoint](https://getstream.io/chat/docs/javascript/send_reaction/?language=javascript#paginating-reactions).
-
-#### Parameters
-
-| Name        | Type     |
-| :---------- | :------- |
-| `messageId` | `string` |
-
-#### Returns
-
-`Promise`<`ReactionResponse`<`T`\>[]\>
-
-all reactions of a message
-
-#### Defined in
-
-[lib/channel.service.ts:1571](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L1571)
-
----
-
-### init
-
-▸ **init**(`filters`, `sort?`, `options?`, `shouldSetActiveChannel?`): `Promise`<`Channel`<`T`\>[]\>
-
-Queries the channels with the given filters, sorts and options. More info about [channel querying](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript) can be found in the platform documentation. By default the first channel in the list will be set as active channel and will be marked as read.
-
-#### Parameters
-
-| Name                     | Type                   | Default value | Description                                                                                                              |
-| :----------------------- | :--------------------- | :------------ | :----------------------------------------------------------------------------------------------------------------------- |
-| `filters`                | `ChannelFilters`<`T`\> | `undefined`   |                                                                                                                          |
-| `sort?`                  | `ChannelSort`<`T`\>    | `undefined`   |                                                                                                                          |
-| `options?`               | `ChannelOptions` & {}  | `undefined`   |                                                                                                                          |
-| `shouldSetActiveChannel` | `boolean`              | `true`        | Decides if the first channel in the result should be made as an active channel, or no channel should be marked as active |
-
-#### Returns
-
-`Promise`<`Channel`<`T`\>[]\>
-
-the list of channels found by the query
-
-#### Defined in
-
-[lib/channel.service.ts:708](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L708)
-
----
-
-### jumpToMessage
-
-▸ **jumpToMessage**(`messageId`, `parentMessageId?`): `Promise`<`void`\>
-
-Jumps to the selected message inside the message list, if the message is not yet loaded, it'll load the message (and it's surroundings) from the API.
-
-#### Parameters
-
-| Name               | Type     | Description                                                                    |
-| :----------------- | :------- | :----------------------------------------------------------------------------- |
-| `messageId`        | `string` | The ID of the message to be loaded, 'latest' means jump to the latest messages |
-| `parentMessageId?` | `string` | The ID of the parent message if we want to load a thread message               |
-
-#### Returns
-
-`Promise`<`void`\>
-
-#### Defined in
-
-[lib/channel.service.ts:1175](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L1175)
-
----
-
-### loadMoreChannels
-
-▸ **loadMoreChannels**(): `Promise`<`void`\>
-
-Loads the next page of channels. The page size can be set in the [query option](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript#query-options) object.
-
-#### Returns
-
-`Promise`<`void`\>
-
-#### Defined in
-
-[lib/channel.service.ts:761](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L761)
-
----
-
-### loadMoreMessages
-
-▸ **loadMoreMessages**(`direction?`): `undefined` \| `false` \| `Promise`<`QueryChannelAPIResponse`<`T`\>\>
-
-Loads the next page of messages of the active channel. The page size can be set in the [query option](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript#query-options) object.
-
-#### Parameters
-
-| Name        | Type                   | Default value |
-| :---------- | :--------------------- | :------------ |
-| `direction` | `"older"` \| `"newer"` | `'older'`     |
-
-#### Returns
-
-`undefined` \| `false` \| `Promise`<`QueryChannelAPIResponse`<`T`\>\>
-
-#### Defined in
-
-[lib/channel.service.ts:639](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L639)
-
----
-
-### loadMoreThreadReplies
-
-▸ **loadMoreThreadReplies**(`direction?`): `Promise`<`void`\>
-
-Loads the next page of messages of the active thread. The page size can be set in the [query option](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript#query-options) object.
-
-#### Parameters
-
-| Name        | Type                   | Default value |
-| :---------- | :--------------------- | :------------ |
-| `direction` | `"older"` \| `"newer"` | `'older'`     |
-
-#### Returns
-
-`Promise`<`void`\>
-
-#### Defined in
-
-[lib/channel.service.ts:678](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L678)
-
----
-
-### markMessageUnread
-
-▸ **markMessageUnread**(`messageId`): `Promise`<`undefined` \| `null` \| `APIResponse`\>
-
-Marks the channel from the given message as unread
-
-#### Parameters
-
-| Name        | Type     |
-| :---------- | :------- |
-| `messageId` | `string` |
-
-#### Returns
-
-`Promise`<`undefined` \| `null` \| `APIResponse`\>
-
-the result of the request
-
-#### Defined in
-
-[lib/channel.service.ts:1604](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L1604)
-
----
-
-### pinMessage
-
-▸ **pinMessage**(`message`): `Promise`<`void`\>
-
-Pins the given message in the channel
-
-#### Parameters
-
-| Name      | Type                                          |
-| :-------- | :-------------------------------------------- |
-| `message` | `StreamMessage`<`DefaultStreamChatGenerics`\> |
-
-#### Returns
-
-`Promise`<`void`\>
-
-#### Defined in
-
-[lib/channel.service.ts:1211](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L1211)
-
----
-
-### removeOldMessageFromMessageList
-
-▸ **removeOldMessageFromMessageList**(): `void`
-
-internal
-
-#### Returns
-
-`void`
-
-#### Defined in
-
-[lib/channel.service.ts:501](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L501)
-
----
-
-### removeReaction
-
-▸ **removeReaction**(`messageId`, `reactionType`): `Promise`<`void`\>
-
-Removes a reaction from a message.
-
-#### Parameters
-
-| Name           | Type     | Description                                       |
-| :------------- | :------- | :------------------------------------------------ |
-| `messageId`    | `string` | The id of the message to remove the reaction from |
-| `reactionType` | `string` | Thr type of reaction to remove                    |
-
-#### Returns
-
-`Promise`<`void`\>
-
-#### Defined in
-
-[lib/channel.service.ts:787](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L787)
-
----
-
-### resendMessage
-
-▸ **resendMessage**(`message`): `Promise`<`NonNullable`<`StreamMessage`<`T`\>\>\>
-
-Resends the given message to the active channel
-
-#### Parameters
-
-| Name      | Type                                          | Description           |
-| :-------- | :-------------------------------------------- | :-------------------- |
-| `message` | `StreamMessage`<`DefaultStreamChatGenerics`\> | The message to resend |
-
-#### Returns
-
-`Promise`<`NonNullable`<`StreamMessage`<`T`\>\>\>
-
-#### Defined in
-
-[lib/channel.service.ts:841](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L841)
-
----
-
-### reset
-
-▸ **reset**(): `void`
-
-Resets the `activeChannel$`, `channels$` and `activeChannelMessages$` Observables. Useful when disconnecting a chat user, use in combination with [`disconnectUser`](./ChatClientService.mdx/#disconnectuser).
-
-#### Returns
-
-`void`
-
-#### Defined in
-
-[lib/channel.service.ts:744](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L744)
-
----
-
-### selectMessageToQuote
-
-▸ **selectMessageToQuote**(`message`): `void`
-
-Selects or deselects the current message to quote reply to
-
-#### Parameters
-
-| Name      | Type                                                         | Description                                                                 |
-| :-------- | :----------------------------------------------------------- | :-------------------------------------------------------------------------- |
-| `message` | `undefined` \| `StreamMessage`<`DefaultStreamChatGenerics`\> | The message to select, if called with `undefined`, it deselects the message |
-
-#### Returns
-
-`void`
-
-#### Defined in
-
-[lib/channel.service.ts:1071](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L1071)
-
----
-
-### sendAction
-
-▸ **sendAction**(`messageId`, `formData`, `parentMessageId?`): `Promise`<`void`\>
-
-[Runs a message action](https://getstream.io/chat/docs/rest/#messages-runmessageaction) in the current channel. Updates the message list based on the action result (if no message is returned, the message will be removed from the message list).
-
-#### Parameters
-
-| Name               | Type                          |
-| :----------------- | :---------------------------- |
-| `messageId`        | `string`                      |
-| `formData`         | `Record`<`string`, `string`\> |
-| `parentMessageId?` | `string`                      |
-
-#### Returns
-
-`Promise`<`void`\>
-
-#### Defined in
-
-[lib/channel.service.ts:1034](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L1034)
-
----
-
-### sendMessage
-
-▸ **sendMessage**(`text`, `attachments?`, `mentionedUsers?`, `parentId?`, `quotedMessageId?`, `customData?`): `Promise`<`NonNullable`<`StreamMessage`<`T`\>\>\>
-
-Sends a message to the active channel. The message is immediately added to the message list, if an error occurs and the message can't be sent, the error is indicated in `state` of the message.
-
-#### Parameters
-
-| Name              | Type                                              | Default value | Description                                           |
-| :---------------- | :------------------------------------------------ | :------------ | :---------------------------------------------------- |
-| `text`            | `string`                                          | `undefined`   | The text of the message                               |
-| `attachments`     | `Attachment`<`T`\>[]                              | `[]`          | The attachments                                       |
-| `mentionedUsers`  | `UserResponse`<`T`\>[]                            | `[]`          | Mentioned users                                       |
-| `parentId`        | `undefined` \| `string`                           | `undefined`   | Id of the parent message (if sending a thread reply)  |
-| `quotedMessageId` | `undefined` \| `string`                           | `undefined`   | Id of the message to quote (if sending a quote reply) |
-| `customData`      | `undefined` \| `Partial`<`T`[``"messageType"``]\> | `undefined`   |                                                       |
-
-#### Returns
-
-`Promise`<`NonNullable`<`StreamMessage`<`T`\>\>\>
-
-#### Defined in
-
-[lib/channel.service.ts:802](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L802)
-
----
-
-### setAsActiveChannel
-
-▸ **setAsActiveChannel**(`channel`): `void`
-
-Sets the given `channel` as active and marks it as read.
-If the channel wasn't previously part of the channel, it will be added to the beginning of the list.
-
-#### Parameters
-
-| Name      | Type            |
-| :-------- | :-------------- |
-| `channel` | `Channel`<`T`\> |
-
-#### Returns
-
-`void`
-
-#### Defined in
-
-[lib/channel.service.ts:546](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L546)
-
----
-
-### setAsActiveParentMessage
-
-▸ **setAsActiveParentMessage**(`message`, `loadMessagesForm?`): `Promise`<`void`\>
-
-Sets the given `message` as an active parent message. If `undefined` is provided, it will deleselect the current parent message.
-
-#### Parameters
-
-| Name               | Type                                 | Default value |
-| :----------------- | :----------------------------------- | :------------ |
-| `message`          | `undefined` \| `StreamMessage`<`T`\> | `undefined`   |
-| `loadMessagesForm` | `"request"` \| `"state"`             | `'request'`   |
-
-#### Returns
-
-`Promise`<`void`\>
-
-#### Defined in
-
-[lib/channel.service.ts:604](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L604)
-
----
-
-### typingStarted
-
-▸ **typingStarted**(`parentId?`): `Promise`<`void`\>
-
-Call this method if user started typing in the active channel
-
-#### Parameters
-
-| Name        | Type     | Description                                                 |
-| :---------- | :------- | :---------------------------------------------------------- |
-| `parentId?` | `string` | The id of the parent message, if user is typing in a thread |
-
-#### Returns
-
-`Promise`<`void`\>
-
-#### Defined in
-
-[lib/channel.service.ts:1531](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L1531)
-
----
-
-### typingStopped
-
-▸ **typingStopped**(`parentId?`): `Promise`<`void`\>
-
-Call this method if user stopped typing in the active channel
-
-#### Parameters
-
-| Name        | Type     | Description                                                   |
-| :---------- | :------- | :------------------------------------------------------------ |
-| `parentId?` | `string` | The id of the parent message, if user were typing in a thread |
-
-#### Returns
-
-`Promise`<`void`\>
-
-#### Defined in
-
-[lib/channel.service.ts:1540](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L1540)
-
----
-
-### unpinMessage
-
-▸ **unpinMessage**(`message`): `Promise`<`void`\>
-
-Removes the given message from pinned messages
-
-#### Parameters
-
-| Name      | Type                                          |
-| :-------- | :-------------------------------------------- |
-| `message` | `StreamMessage`<`DefaultStreamChatGenerics`\> |
-
-#### Returns
-
-`Promise`<`void`\>
-
-#### Defined in
-
-[lib/channel.service.ts:1230](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L1230)
-
----
-
-### updateMessage
-
-▸ **updateMessage**(`message`): `Promise`<`StreamMessage`<`T`\> \| `T`[``"messageType"``] & {} & {} & {} & `Omit`<`MessageResponse`<{}\>, `"created_at"` \| `"updated_at"` \| `"status"` \| `"pinned_at"`\> & `UR` & {}\>
-
-Updates the message in the active channel
-
-#### Parameters
-
-| Name      | Type                  | Description          |
-| :-------- | :-------------------- | :------------------- |
-| `message` | `StreamMessage`<`T`\> | Mesage to be updated |
-
-#### Returns
-
-`Promise`<`StreamMessage`<`T`\> \| `T`[``"messageType"``] & {} & {} & {} & `Omit`<`MessageResponse`<{}\>, `"created_at"` \| `"updated_at"` \| `"status"` \| `"pinned_at"`\> & `UR` & {}\>
-
-#### Defined in
-
-[lib/channel.service.ts:858](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L858)
-
----
-
-### uploadAttachments
-
-▸ **uploadAttachments**(`uploads`): `Promise`<`AttachmentUpload`<`DefaultStreamChatGenerics`\>[]\>
-
-Uploads files to the channel. If you want to know more about [file uploads](https://getstream.io/chat/docs/javascript/file_uploads/?language=javascript) check out the platform documentation.
-
-#### Parameters
-
-| Name      | Type                                               | Description                                                                              |
-| :-------- | :------------------------------------------------- | :--------------------------------------------------------------------------------------- |
-| `uploads` | `AttachmentUpload`<`DefaultStreamChatGenerics`\>[] | the attachments to upload (output of the [`AttachmentService`](./AttachmentService.mdx)) |
-
-#### Returns
-
-`Promise`<`AttachmentUpload`<`DefaultStreamChatGenerics`\>[]\>
-
-the result of file upload requests
-
-#### Defined in
-
-[lib/channel.service.ts:925](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/channel.service.ts#L925)
diff --git a/docusaurus/angular_versioned_docs/version-4/services/ChatClientService.mdx b/docusaurus/angular_versioned_docs/version-4/services/ChatClientService.mdx
deleted file mode 100644
index cdf1e5e5..00000000
--- a/docusaurus/angular_versioned_docs/version-4/services/ChatClientService.mdx
+++ /dev/null
@@ -1,187 +0,0 @@
-# ChatClientService
-
-The `ChatClient` service connects the user to the Stream chat.
-
-## Type parameters
-
-| Name | Type                                                              |
-| :--- | :---------------------------------------------------------------- |
-| `T`  | extends `DefaultStreamChatGenerics` = `DefaultStreamChatGenerics` |
-
-## Properties
-
-### appSettings$
-
-• **appSettings$**: `Observable`<`undefined` \| `AppSettings`\>
-
-Emits the current [application settings](https://getstream.io/chat/docs/javascript/app_setting_overview/?language=javascript). Since getting the application settings is an expensive API call and we don't always need the result, this is not initialized by default, you need to call `getApplicationSettings` to load them.
-
-#### Defined in
-
-[lib/chat-client.service.ts:49](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/chat-client.service.ts#L49)
-
----
-
-### chatClient
-
-• **chatClient**: `StreamChat`<`T`\>
-
-The [StreamChat client](https://github.com/GetStream/stream-chat-js/blob/master/src/client.ts) instance. In general you shouldn't need to access the client, but it's there if you want to use it.
-
-#### Defined in
-
-[lib/chat-client.service.ts:38](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/chat-client.service.ts#L38)
-
----
-
-### connectionState$
-
-• **connectionState$**: `Observable`<`"offline"` \| `"online"`\>
-
-Emits the current connection state of the user (`online` or `offline`)
-
-#### Defined in
-
-[lib/chat-client.service.ts:53](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/chat-client.service.ts#L53)
-
----
-
-### events$
-
-• **events$**: `Observable`<`ClientEvent`<`T`\>\>
-
-Emits [`ClientEvent`](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/chat-client.service.ts) events. The platform documentation covers [the list of client, user presence and notification events](https://getstream.io/chat/docs/javascript/event_object/?language=javascript).
-:::important
-For performance reasons this Observable operates outside of the Angular change detection zone. If you subscribe to it, you need to manually reenter Angular's change detection zone, our [Change detection guide](../concepts/change-detection.mdx) explains this in detail.
-:::
-
-#### Defined in
-
-[lib/chat-client.service.ts:45](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/chat-client.service.ts#L45)
-
----
-
-### pendingInvites$
-
-• **pendingInvites$**: `Observable`<(`ChannelResponse`<`T`\> \| `Channel`<`T`\>)[]\>
-
-Emits the list of pending invites of the user. It emits every pending invitation during initialization and then extends the list when a new invite is received. More information can be found in the [channel invitations](../code-examples/channel-invites.mdx) guide.
-
-#### Defined in
-
-[lib/chat-client.service.ts:57](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/chat-client.service.ts#L57)
-
----
-
-### user$
-
-• **user$**: `Observable`<`undefined` \| `OwnUserResponse`<`T`\> \| `UserResponse`<`T`\>\>
-
-Emits the current chat user
-
-#### Defined in
-
-[lib/chat-client.service.ts:61](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/chat-client.service.ts#L61)
-
-## Methods
-
-### autocompleteUsers
-
-▸ **autocompleteUsers**(`searchTerm`): `Promise`<`UserResponse`<`T`\>[]\>
-
-Searches for users in the application that have ID or name matching the provided search term
-
-#### Parameters
-
-| Name         | Type     |
-| :----------- | :------- |
-| `searchTerm` | `string` |
-
-#### Returns
-
-`Promise`<`UserResponse`<`T`\>[]\>
-
-The users matching the search
-
-#### Defined in
-
-[lib/chat-client.service.ts:209](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/chat-client.service.ts#L209)
-
----
-
-### disconnectUser
-
-▸ **disconnectUser**(): `Promise`<`void`\>
-
-Disconnects the current user, and closes the WebSocket connection. Useful when disconnecting a chat user, use in combination with [`reset`](./ChannelService.mdx/#reset).
-
-#### Returns
-
-`Promise`<`void`\>
-
-#### Defined in
-
-[lib/chat-client.service.ts:178](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/chat-client.service.ts#L178)
-
----
-
-### flagMessage
-
-▸ **flagMessage**(`messageId`): `Promise`<`void`\>
-
-Flag the message with the given ID. If you want to know [more about flags](https://getstream.io/chat/docs/javascript/moderation/?language=javascript) check out the platform documentation.
-
-#### Parameters
-
-| Name        | Type     |
-| :---------- | :------- |
-| `messageId` | `string` |
-
-#### Returns
-
-`Promise`<`void`\>
-
-#### Defined in
-
-[lib/chat-client.service.ts:200](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/chat-client.service.ts#L200)
-
----
-
-### getAppSettings
-
-▸ **getAppSettings**(): `Promise`<`void`\>
-
-Loads the current [application settings](https://getstream.io/chat/docs/javascript/app_setting_overview/?language=javascript), if the application settings have already been loaded, it does nothing.
-
-#### Returns
-
-`Promise`<`void`\>
-
-#### Defined in
-
-[lib/chat-client.service.ts:188](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/chat-client.service.ts#L188)
-
----
-
-### init
-
-▸ **init**(`apiKey`, `userOrId`, `userTokenOrProvider`, `clientOptions?`): `ConnectAPIResponse`<`T`\>
-
-Creates a [`StreamChat`](https://github.com/GetStream/stream-chat-js/blob/668b3e5521339f4e14fc657834531b4c8bf8176b/src/client.ts#L124) instance using the provided `apiKey`, and connects a user with the given meta data and token. More info about [connecting users](https://getstream.io/chat/docs/javascript/init_and_users/?language=javascript) can be found in the platform documentation.
-
-#### Parameters
-
-| Name                  | Type                                                                       | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
-| :-------------------- | :------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `apiKey`              | `string`                                                                   |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
-| `userOrId`            | `undefined` \| `string` \| `OwnUserResponse`<`T`\> \| `UserResponse`<`T`\> | you can emit this for anonymous logins                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
-| `userTokenOrProvider` | `TokenOrProvider`                                                          | You can provide:<ul> <li> a token, </li> <li> a token provider, a method that returns `Promise<string>`, which can be called when the previous token expires (recommended setup for production applications)</li> <li> the keyword 'guest' to connect as [guest user](https://getstream.io/chat/docs/javascript/authless_users/?language=javascript#guest-users) </li> <li> the keyword 'anonymous' to connect as [anonymous user](https://getstream.io/chat/docs/javascript/authless_users/?language=javascript#anonymous-users) </li> </ul> |
-| `clientOptions?`      | `StreamChatOptions`                                                        | Setting to provide to the Stream client instance                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
-
-#### Returns
-
-`ConnectAPIResponse`<`T`\>
-
-#### Defined in
-
-[lib/chat-client.service.ts:98](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/chat-client.service.ts#L98)
diff --git a/docusaurus/angular_versioned_docs/version-4/services/CustomTemplatesService.mdx b/docusaurus/angular_versioned_docs/version-4/services/CustomTemplatesService.mdx
deleted file mode 100644
index 1a5a795b..00000000
--- a/docusaurus/angular_versioned_docs/version-4/services/CustomTemplatesService.mdx
+++ /dev/null
@@ -1,527 +0,0 @@
-# CustomTemplatesService
-
-A central location for registering your custom templates to override parts of the chat application.
-
-For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
-
-You can find the type definitions of the context that is provided for each template [on GitHub](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angu)
-
-## Type parameters
-
-| Name | Type                                                              |
-| :--- | :---------------------------------------------------------------- |
-| `T`  | extends `DefaultStreamChatGenerics` = `DefaultStreamChatGenerics` |
-
-## Properties
-
-### attachmentActionsTemplate$
-
-• **attachmentActionsTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`AttachmentContext`\>\>
-
-The template that can be used to override how attachment actions are displayed inside the [attachment list](../components/AttachmentListComponent.mdx)
-
-#### Defined in
-
-[lib/custom-templates.service.ts:277](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L277)
-
----
-
-### attachmentListTemplate$
-
-• **attachmentListTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`AttachmentListContext`\>\>
-
-The template used to display attachments of a [message](../components/MessageComponent.mdx) (instead of the [default attachment list](../components/AttachmentListComponent.mdx))
-
-#### Defined in
-
-[lib/custom-templates.service.ts:117](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L117)
-
----
-
-### attachmentPreviewListTemplate$
-
-• **attachmentPreviewListTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`AttachmentPreviewListContext`\>\>
-
-The template used to display attachments in the [message input](../components/MessageInputComponent.mdx) component (instead of the [default attachment preview](../components/AttachmentPreviewListComponent.mdx))
-
-#### Defined in
-
-[lib/custom-templates.service.ts:124](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L124)
-
----
-
-### avatarTemplate$
-
-• **avatarTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`AvatarContext`\>\>
-
-The template used to display avatars for channels and users (instead of the [default avatar](../components/AvatarComponent.mdx))
-
-#### Defined in
-
-[lib/custom-templates.service.ts:131](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L131)
-
----
-
-### cardAttachmentTemplate$
-
-• **cardAttachmentTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`AttachmentContext`\>\>
-
-The template that can be used to override how a card attachment is displayed inside the [attachment list](../components/AttachmentListComponent.mdx)
-
-#### Defined in
-
-[lib/custom-templates.service.ts:271](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L271)
-
----
-
-### channelActionsTemplate$
-
-• **channelActionsTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`ChannelActionsContext`<`DefaultStreamChatGenerics`\>\>\>
-
-The template for channel actions displayed in the [channel header](../components/ChannelHeaderComponent.mdx) (by default no channel action is displayed)
-
-#### Defined in
-
-[lib/custom-templates.service.ts:110](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L110)
-
----
-
-### channelHeaderInfoTemplate$
-
-• **channelHeaderInfoTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`ChannelHeaderInfoContext`<`DefaultStreamChatGenerics`\>\>\>
-
-The template used to display additional information about a channel under the channel name inside the [channel header component](../components/ChannelHeaderComponent.mdx)
-
-#### Defined in
-
-[lib/custom-templates.service.ts:228](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L228)
-
----
-
-### channelPreviewInfoTemplate$
-
-• **channelPreviewInfoTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`ChannelPreviewInfoContext`<`DefaultStreamChatGenerics`\>\>\>
-
-Template used to display the channel information inside the [channel list item](../components/ChannelPreviewComponent.mdx)
-
-#### Defined in
-
-[lib/custom-templates.service.ts:336](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L336)
-
----
-
-### channelPreviewTemplate$
-
-• **channelPreviewTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`ChannelPreviewContext`<`DefaultStreamChatGenerics`\>\>\>
-
-Template used to display an item in the [channel list](../components/ChannelListComponent.mdx) (instead of the default [channal list item](../components/ChannelPreviewComponent.mdx))
-
-#### Defined in
-
-[lib/custom-templates.service.ts:68](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L68)
-
----
-
-### commandAutocompleteItemTemplate$
-
-• **commandAutocompleteItemTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`CommandAutocompleteListItemContext`\>\>
-
-The autocomplete list item template for commands (used in the [`AutocompleteTextareaComponent`](../components/AutocompleteTextareaComponent.mdx))
-
-#### Defined in
-
-[lib/custom-templates.service.ts:61](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L61)
-
----
-
-### customAttachmentUploadTemplate$
-
-• **customAttachmentUploadTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`CustomAttachmentUploadContext`\>\>
-
-The template used for displaying file upload/attachment selector inside the [message input](../components/MessageInputComponent.mdx)
-
-#### Defined in
-
-[lib/custom-templates.service.ts:235](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L235)
-
----
-
-### customMessageMetadataTemplate$
-
-• **customMessageMetadataTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`CustomMetadataContext`<`T`\>\>\>
-
-Template to display custom metadata inside [message component](../components/MessageComponent.mdx)
-
-#### Defined in
-
-[lib/custom-templates.service.ts:221](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L221)
-
----
-
-### dateSeparatorTemplate$
-
-• **dateSeparatorTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`DateSeparatorContext`\>\>
-
-The template used to display the date separator inside the [message list](../components/MessageListComponent.mdx)
-
-#### Defined in
-
-[lib/custom-templates.service.ts:289](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L289)
-
----
-
-### deliveredStatusTemplate$
-
-• **deliveredStatusTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`DeliveredStatusContext`\>\>
-
-The template used for displaying the delivered state of the message inside the [message component](../components/MessageComponent.mdx)
-
-Displayed for the last message sent by the current user, if the message isn't yet read by anyone
-
-#### Defined in
-
-[lib/custom-templates.service.ts:196](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L196)
-
----
-
-### editMessageFormTemplate$
-
-• **editMessageFormTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`void`\>\>
-
-The template used to display the [edit message form](../components/EditMessageFormComponent.mdx)
-
-#### Defined in
-
-[lib/custom-templates.service.ts:323](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L323)
-
----
-
-### emojiPickerTemplate$
-
-• **emojiPickerTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`EmojiPickerContext`\>\>
-
-The template for [emoji picker](../code-examples/emoji-picker.mdx)
-
-#### Defined in
-
-[lib/custom-templates.service.ts:89](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L89)
-
----
-
-### emptyMainMessageListPlaceholder$
-
-• **emptyMainMessageListPlaceholder$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`void`\>\>
-
-The template to show if the main message list is empty
-
-#### Defined in
-
-[lib/custom-templates.service.ts:311](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L311)
-
----
-
-### emptyThreadMessageListPlaceholder$
-
-• **emptyThreadMessageListPlaceholder$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`void`\>\>
-
-The template to show if the thread message list is empty
-
-#### Defined in
-
-[lib/custom-templates.service.ts:317](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L317)
-
----
-
-### fileAttachmentTemplate$
-
-• **fileAttachmentTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`AttachmentContext`\>\>
-
-The template that can be used to override how a file attachment is displayed inside the [attachment list](../components/AttachmentListComponent.mdx)
-
-#### Defined in
-
-[lib/custom-templates.service.ts:265](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L265)
-
----
-
-### galleryAttachmentTemplate$
-
-• **galleryAttachmentTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`AttachmentContext`\>\>
-
-The template that can be used to override how image gallery is displayed inside the [attachment list](../components/AttachmentListComponent.mdx)
-
-#### Defined in
-
-[lib/custom-templates.service.ts:259](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L259)
-
----
-
-### iconTemplate$
-
-• **iconTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`IconContext`\>\>
-
-Template for displaying icons (instead of the [default icon component](../components/IconComponent.mdx))
-
-#### Defined in
-
-[lib/custom-templates.service.ts:138](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L138)
-
----
-
-### imageAttachmentTemplate$
-
-• **imageAttachmentTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`AttachmentContext`\>\>
-
-The template that can be used to override how a single image attachment is displayed inside the [attachment list](../components/AttachmentListComponent.mdx)
-
-#### Defined in
-
-[lib/custom-templates.service.ts:241](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L241)
-
----
-
-### loadingIndicatorTemplate$
-
-• **loadingIndicatorTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`LoadingIndicatorContext`\>\>
-
-Template for displaying the loading indicator (instead of the [default loading indicator](../components/LoadingIndicatorComponent.mdx))
-
-#### Defined in
-
-[lib/custom-templates.service.ts:145](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L145)
-
----
-
-### mentionAutocompleteItemTemplate$
-
-• **mentionAutocompleteItemTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`MentionAutcompleteListItemContext`\>\>
-
-The autocomplete list item template for mentioning users (used in the [`AutocompleteTextareaComponent`](../components/AutocompleteTextareaComponent.mdx))
-
-#### Defined in
-
-[lib/custom-templates.service.ts:55](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L55)
-
----
-
-### mentionTemplate$
-
-• **mentionTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`MentionTemplateContext`\>\>
-
-The template used for displaying a [mention inside a message](../code-examples/mention-actions.mdx)
-
-#### Defined in
-
-[lib/custom-templates.service.ts:82](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L82)
-
----
-
-### messageActionsBoxItemTemplate$
-
-• **messageActionsBoxItemTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`MessageActionBoxItemContext`<`DefaultStreamChatGenerics`\>\>\>
-
-The template used for displaying an item in the [message actions box](../components/MessageActionsBoxComponent.mdx)
-
-#### Defined in
-
-[lib/custom-templates.service.ts:159](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L159)
-
----
-
-### messageActionsBoxTemplate$
-
-• **messageActionsBoxTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`MessageActionsBoxContext`\>\>
-
-Template for displaying the message actions box (instead of the [default message actions box](../components/MessageActionsBoxComponent.mdx))
-
-#### Defined in
-
-[lib/custom-templates.service.ts:152](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L152)
-
----
-
-### messageBouncePromptTemplate$
-
-• **messageBouncePromptTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`void`\>\>
-
-The template used to display the [message bounce prompt](../components/MessageBouncePromptComponent.mdx)
-
-#### Defined in
-
-[lib/custom-templates.service.ts:329](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L329)
-
----
-
-### messageInputTemplate$
-
-• **messageInputTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`MessageInputContext`\>\>
-
-The message input template used when editing a message (instead of the [default message input](../components/MessageInputComponent.mdx))
-
-#### Defined in
-
-[lib/custom-templates.service.ts:75](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L75)
-
----
-
-### messageReactionsTemplate$
-
-• **messageReactionsTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`MessageReactionsContext`\>\>
-
-The template used to display the reactions of a [message](../components/MessageComponent.mdx), and the selector to add a reaction to a message (instead of the [default message reactions component](../components/MessageReactionsComponent.mdx))
-
-#### Defined in
-
-[lib/custom-templates.service.ts:166](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L166)
-
----
-
-### messageTemplate$
-
-• **messageTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`MessageContext`\>\>
-
-The template used to display a message in the [message list](../components/MessageListComponent.mdx) (instead of the [default message component](../components/MessageComponent.mdx))
-
-#### Defined in
-
-[lib/custom-templates.service.ts:103](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L103)
-
----
-
-### modalTemplate$
-
-• **modalTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`ModalContext`\>\>
-
-The template used to display a modal window (instead of the [default modal](../components/ModalComponent.mdx))
-
-#### Defined in
-
-[lib/custom-templates.service.ts:173](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L173)
-
----
-
-### newMessagesIndicatorTemplate$
-
-• **newMessagesIndicatorTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`UnreadMessagesIndicatorContext`\>\>
-
-The template used to display unread messages indicator inside the [message list](../components/MessageListComponent.mdx) when the channel is opened
-
-This UI element is used to separate unread messages from read messages
-
-#### Defined in
-
-[lib/custom-templates.service.ts:297](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L297)
-
----
-
-### newMessagesNotificationTemplate$
-
-• **newMessagesNotificationTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`UnreadMessagesNotificationContext`\>\>
-
-The template used to display unread messages notification inside the [message list](../components/MessageListComponent.mdx) when the channel is opened
-
-Users can use this notification to jump to the first unread message when it's clicked
-
-#### Defined in
-
-[lib/custom-templates.service.ts:305](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L305)
-
----
-
-### notificationTemplate$
-
-• **notificationTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`NotificationContext`\>\>
-
-The template used to override the [default notification component](../components/NotificationComponent.mdx)
-
-#### Defined in
-
-[lib/custom-templates.service.ts:180](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L180)
-
----
-
-### readStatusTemplate$
-
-• **readStatusTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`ReadStatusContext`\>\>
-
-The template used for displaying the sent state of the message inside the [message component](../components/MessageComponent.mdx)
-
-Displayed for the last message sent by the current user, if the message is read at least by one user
-
-#### Defined in
-
-[lib/custom-templates.service.ts:214](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L214)
-
----
-
-### sendingStatusTemplate$
-
-• **sendingStatusTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`SendingStatusContext`\>\>
-
-The template used for displaying the sending state of the message inside the [message component](../components/MessageComponent.mdx)
-
-Displayed for the last message sent by the current user, if the message is currently being sent
-
-#### Defined in
-
-[lib/custom-templates.service.ts:205](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L205)
-
----
-
-### systemMessageTemplate$
-
-• **systemMessageTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`SystemMessageContext`\>\>
-
-The template used to display [system messages](https://getstream.io/chat/docs/javascript/silent_messages/?language=javascript&q=system) indise the [message component](../components/MessageComponent.mdx)
-
-#### Defined in
-
-[lib/custom-templates.service.ts:283](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L283)
-
----
-
-### threadHeaderTemplate$
-
-• **threadHeaderTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`ThreadHeaderContext`\>\>
-
-The template used for header of a [thread](../components/ThreadComponent.mdx)
-
-#### Defined in
-
-[lib/custom-templates.service.ts:187](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L187)
-
----
-
-### typingIndicatorTemplate$
-
-• **typingIndicatorTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`TypingIndicatorContext`\>\>
-
-The typing indicator template used in the [message list](../components/MessageListComponent.mdx)
-
-#### Defined in
-
-[lib/custom-templates.service.ts:96](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L96)
-
----
-
-### videoAttachmentTemplate$
-
-• **videoAttachmentTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`AttachmentContext`\>\>
-
-The template that can be used to override how a video attachment is displayed inside the [attachment list](../components/AttachmentListComponent.mdx)
-
-#### Defined in
-
-[lib/custom-templates.service.ts:253](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L253)
-
----
-
-### voiceRecordingAttachmentTemplate$
-
-• **voiceRecordingAttachmentTemplate$**: `BehaviorSubject`<`undefined` \| `TemplateRef`<`AttachmentContext`\>\>
-
-The template that can be used to override how a voice recording attachment is displayed inside the [attachment list](../components/AttachmentListComponent.mdx), by default the [voice recording component](../components/VoiceRecordingComponent.mdx) is used
-
-#### Defined in
-
-[lib/custom-templates.service.ts:247](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L247)
diff --git a/docusaurus/angular_versioned_docs/version-4/services/DateParserService.mdx b/docusaurus/angular_versioned_docs/version-4/services/DateParserService.mdx
deleted file mode 100644
index 56ef4f69..00000000
--- a/docusaurus/angular_versioned_docs/version-4/services/DateParserService.mdx
+++ /dev/null
@@ -1,153 +0,0 @@
-# DateParserService
-
-The `DateParserService` parses dates into user-friendly string representations.
-
-## Properties
-
-### customDateParser
-
-• `Optional` **customDateParser**: (`date`: `Date`) => `string`
-
-#### Type declaration
-
-▸ (`date`): `string`
-
-Custom parser to override `parseDate`
-
-##### Parameters
-
-| Name   | Type   |
-| :----- | :----- |
-| `date` | `Date` |
-
-##### Returns
-
-`string`
-
-#### Defined in
-
-[lib/date-parser.service.ts:18](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/date-parser.service.ts#L18)
-
----
-
-### customDateTimeParser
-
-• `Optional` **customDateTimeParser**: (`date`: `Date`) => `string`
-
-#### Type declaration
-
-▸ (`date`): `string`
-
-Custom parser to override `parseDateTime`
-
-##### Parameters
-
-| Name   | Type   |
-| :----- | :----- |
-| `date` | `Date` |
-
-##### Returns
-
-`string`
-
-#### Defined in
-
-[lib/date-parser.service.ts:22](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/date-parser.service.ts#L22)
-
----
-
-### customTimeParser
-
-• `Optional` **customTimeParser**: (`date`: `Date`) => `string`
-
-#### Type declaration
-
-▸ (`date`): `string`
-
-Custom parser to override `parseTime`
-
-##### Parameters
-
-| Name   | Type   |
-| :----- | :----- |
-| `date` | `Date` |
-
-##### Returns
-
-`string`
-
-#### Defined in
-
-[lib/date-parser.service.ts:14](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/date-parser.service.ts#L14)
-
-## Methods
-
-### parseDate
-
-▸ **parseDate**(`date`): `string`
-
-Return a user-friendly string representation of the date (year, month and date)
-
-#### Parameters
-
-| Name   | Type   |
-| :----- | :----- |
-| `date` | `Date` |
-
-#### Returns
-
-`string`
-
-The parsed date
-
-#### Defined in
-
-[lib/date-parser.service.ts:43](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/date-parser.service.ts#L43)
-
----
-
-### parseDateTime
-
-▸ **parseDateTime**(`date`): `string`
-
-Return a user-friendly string representation of the date and time
-
-#### Parameters
-
-| Name   | Type   |
-| :----- | :----- |
-| `date` | `Date` |
-
-#### Returns
-
-`string`
-
-The parsed date
-
-#### Defined in
-
-[lib/date-parser.service.ts:55](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/date-parser.service.ts#L55)
-
----
-
-### parseTime
-
-▸ **parseTime**(`date`): `string`
-
-Return a user-friendly string representation of the time
-
-#### Parameters
-
-| Name   | Type   |
-| :----- | :----- |
-| `date` | `Date` |
-
-#### Returns
-
-`string`
-
-The parsed time
-
-#### Defined in
-
-[lib/date-parser.service.ts:31](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/date-parser.service.ts#L31)
diff --git a/docusaurus/angular_versioned_docs/version-4/services/EmojiInputService.mdx b/docusaurus/angular_versioned_docs/version-4/services/EmojiInputService.mdx
deleted file mode 100644
index 5427198f..00000000
--- a/docusaurus/angular_versioned_docs/version-4/services/EmojiInputService.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
-# EmojiInputService
-
-If you have an emoji picker in your application, you can propagate the selected emoji to the textarea using this service, more info can be found in [custom emoji picker guide](../code-examples/emoji-picker.mdx)
-
-## Properties
-
-### emojiInput$
-
-• **emojiInput$**: `Subject`<`string`\>
-
-If you have an emoji picker in your application, you can propagate the selected emoji to the textarea using this Subject, more info can be found in [custom emoji picker guide](../code-examples/emoji-picker.mdx)
-
-#### Defined in
-
-[lib/message-input/emoji-input.service.ts:14](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/emoji-input.service.ts#L14)
diff --git a/docusaurus/angular_versioned_docs/version-4/services/ImageLoadService.mdx b/docusaurus/angular_versioned_docs/version-4/services/ImageLoadService.mdx
deleted file mode 100644
index 3070c976..00000000
--- a/docusaurus/angular_versioned_docs/version-4/services/ImageLoadService.mdx
+++ /dev/null
@@ -1,17 +0,0 @@
-# ImageLoadService
-
-The `ImageLoadService` is used to position the scrollbar in the message list
-
-**`deprecated`** - This class is no longer used by SDK components as image sizes are fixed
-
-## Properties
-
-### imageLoad$
-
-• **imageLoad$**: `Subject`<`void`\>
-
-A subject that can be used to notify the message list if an image attachment finished loading
-
-#### Defined in
-
-[lib/message-list/image-load.service.ts:15](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-list/image-load.service.ts#L15)
diff --git a/docusaurus/angular_versioned_docs/version-4/services/MessageActionsService.mdx b/docusaurus/angular_versioned_docs/version-4/services/MessageActionsService.mdx
deleted file mode 100644
index b8eef751..00000000
--- a/docusaurus/angular_versioned_docs/version-4/services/MessageActionsService.mdx
+++ /dev/null
@@ -1,96 +0,0 @@
-# MessageActionsService
-
-The message actions service provides customization options for the [message actions](../../components/MessageActionsBoxComponent)
-
-## Type parameters
-
-| Name | Type                                                              |
-| :--- | :---------------------------------------------------------------- |
-| `T`  | extends `DefaultStreamChatGenerics` = `DefaultStreamChatGenerics` |
-
-## Properties
-
-### customActionClickHandler
-
-• `Optional` **customActionClickHandler**: (`details`: `MessageActionsClickDetails`<`T`\>) => `void`
-
-#### Type declaration
-
-▸ (`details`): `void`
-
-By default the [`MessageComponent`](../../components/MessageComponent) will display the [`MessageActionsBoxComponent`](../../components/MessageActionsBoxComponent). You can override that behavior by providing your own event handler.
-
-##### Parameters
-
-| Name      | Type                               |
-| :-------- | :--------------------------------- |
-| `details` | `MessageActionsClickDetails`<`T`\> |
-
-##### Returns
-
-`void`
-
-#### Defined in
-
-[lib/message-actions.service.ts:117](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-actions.service.ts#L117)
-
----
-
-### customActions$
-
-• **customActions$**: `BehaviorSubject`<`CustomMessageActionItem`<`DefaultStreamChatGenerics`\>[]\>
-
-You can pass your own custom actions that will be displayed inside the built-in message actions component
-
-#### Defined in
-
-[lib/message-actions.service.ts:113](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-actions.service.ts#L113)
-
----
-
-### defaultActions
-
-• `Readonly` **defaultActions**: `MessageActionItem`<`T`\>[]
-
-Default actions - these are the actions that are handled by the built-in component
-
-#### Defined in
-
-[lib/message-actions.service.ts:26](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-actions.service.ts#L26)
-
----
-
-### messageToEdit$
-
-• **messageToEdit$**: `BehaviorSubject`<`undefined` \| `StreamMessage`<`T`\>\>
-
-The built-in components will handle changes to this observable.
-
-#### Defined in
-
-[lib/message-actions.service.ts:109](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-actions.service.ts#L109)
-
-## Methods
-
-### getAuthorizedMessageActionsCount
-
-▸ **getAuthorizedMessageActionsCount**(`message`, `enabledActions`): `number`
-
-This method returns how many authorized actions are available to the given message
-
-#### Parameters
-
-| Name             | Type                  |
-| :--------------- | :-------------------- |
-| `message`        | `StreamMessage`<`T`\> |
-| `enabledActions` | `string`[]            |
-
-#### Returns
-
-`number`
-
-the count
-
-#### Defined in
-
-[lib/message-actions.service.ts:132](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-actions.service.ts#L132)
diff --git a/docusaurus/angular_versioned_docs/version-4/services/MessageInputConfigService.mdx b/docusaurus/angular_versioned_docs/version-4/services/MessageInputConfigService.mdx
deleted file mode 100644
index 54a8e917..00000000
--- a/docusaurus/angular_versioned_docs/version-4/services/MessageInputConfigService.mdx
+++ /dev/null
@@ -1,63 +0,0 @@
-# MessageInputConfigService
-
-The `MessageInputConfigService` is used to keep a consistent configuration among the different [`MessageInput`](../components/MessageInputComponent.mdx) components if your UI has more than one input component.
-
-## Properties
-
-### areMentionsEnabled
-
-• **areMentionsEnabled**: `undefined` \| `boolean` = `true`
-
-If true, users can mention other users in messages. You also [need to use the `AutocompleteTextarea`](../concepts/opt-in-architecture.mdx) for this feature to work.
-
-#### Defined in
-
-[lib/message-input/message-input-config.service.ts:17](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts#L17)
-
----
-
-### inputMode
-
-• **inputMode**: `"desktop"` \| `"mobile"` = `'desktop'`
-
-In `desktop` mode the `Enter` key will trigger message sending, in `mobile` mode the `Enter` key will insert a new line to the message input.
-
-#### Defined in
-
-[lib/message-input/message-input-config.service.ts:30](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts#L30)
-
----
-
-### isFileUploadEnabled
-
-• **isFileUploadEnabled**: `undefined` \| `boolean` = `true`
-
-If file upload is enabled, the user can open a file selector from the input. Please note that the user also needs to have the necessary [channel capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript).
-
-#### Defined in
-
-[lib/message-input/message-input-config.service.ts:13](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts#L13)
-
----
-
-### isMultipleFileUploadEnabled
-
-• **isMultipleFileUploadEnabled**: `undefined` \| `boolean` = `true`
-
-If `false`, users can only upload one attachment per message
-
-#### Defined in
-
-[lib/message-input/message-input-config.service.ts:21](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts#L21)
-
----
-
-### mentionScope
-
-• **mentionScope**: `undefined` \| `"channel"` \| `"application"` = `'channel'`
-
-The scope for user mentions, either members of the current channel of members of the application
-
-#### Defined in
-
-[lib/message-input/message-input-config.service.ts:25](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts#L25)
diff --git a/docusaurus/angular_versioned_docs/version-4/services/MessageReactionsService.mdx b/docusaurus/angular_versioned_docs/version-4/services/MessageReactionsService.mdx
deleted file mode 100644
index 75ae1297..00000000
--- a/docusaurus/angular_versioned_docs/version-4/services/MessageReactionsService.mdx
+++ /dev/null
@@ -1,79 +0,0 @@
-# MessageReactionsService
-
-The `MessageReactionsService` provides customization options to message [reactions](https://getstream.io/chat/docs/javascript/send_reaction/?language=javascript).
-
-## Properties
-
-### customReactionClickHandler
-
-• `Optional` **customReactionClickHandler**: (`details`: `MessageReactionClickDetails`) => `void`
-
-#### Type declaration
-
-▸ (`details`): `void`
-
-By default the [`MessageReactionsComponent`](../../components/MessageReactionsComponent) will display the reacting users when a reaction is clicked. You can override this with your own UI by providing a custom event handler.
-
-The event handler can retrieve all reactions of a message inside the active channel using the [`channelService.getMessageReactions` method](../../services/ChannelService/#getmessagereactions)
-
-##### Parameters
-
-| Name      | Type                          |
-| :-------- | :---------------------------- |
-| `details` | `MessageReactionClickDetails` |
-
-##### Returns
-
-`void`
-
-#### Defined in
-
-[lib/message-reactions.service.ts:31](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-reactions.service.ts#L31)
-
----
-
-### reactions$
-
-• **reactions$**: `BehaviorSubject`<{}\>
-
-The enabled [reactions](https://getstream.io/chat/docs/javascript/send_reaction/?language=javascript) and the associated emoji
-
-You can provide any string as a reaction. The emoji can be provided as a string, if you want to use custom images for reactions you have to provide a [custom reactions UI](../../services/CustomTemplatesService/#messagereactionstemplate)
-
-#### Defined in
-
-[lib/message-reactions.service.ts:18](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-reactions.service.ts#L18)
-
-## Accessors
-
-### reactions
-
-• `get` **reactions**(): `Object`
-
-Get the currently enabled reactions
-
-#### Returns
-
-`Object`
-
-#### Defined in
-
-[lib/message-reactions.service.ts:45](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-reactions.service.ts#L45)
-
-• `set` **reactions**(`reactions`): `void`
-
-Sets the enabled reactions
-
-#### Parameters
-
-| Name        | Type     |
-| :---------- | :------- |
-| `reactions` | `Object` |
-
-#### Returns
-
-`void`
-
-#### Defined in
-
-[lib/message-reactions.service.ts:38](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-reactions.service.ts#L38)
diff --git a/docusaurus/angular_versioned_docs/version-4/services/MessageService.mdx b/docusaurus/angular_versioned_docs/version-4/services/MessageService.mdx
deleted file mode 100644
index 2e29a188..00000000
--- a/docusaurus/angular_versioned_docs/version-4/services/MessageService.mdx
+++ /dev/null
@@ -1,48 +0,0 @@
-# MessageService
-
-The message service contains configuration options related to displaying the message content
-
-## Properties
-
-### customLinkRenderer
-
-• `Optional` **customLinkRenderer**: (`url`: `string`) => `string`
-
-#### Type declaration
-
-▸ (`url`): `string`
-
-You can provide a custom method to display links
-
-##### Parameters
-
-| Name  | Type     | Description                      |
-| :---- | :------- | :------------------------------- |
-| `url` | `string` | the url the link should refer to |
-
-##### Returns
-
-`string`
-
-the HTML markup as a string for the link
-
-#### Defined in
-
-[lib/message.service.ts:25](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message.service.ts#L25)
-
----
-
-### displayAs
-
-• **displayAs**: `"html"` \| `"text"` = `'text'`
-
-Decides if the message content should be formatted as text or HTML
-
-If you display messages as text the following parts are still be displayed as HTML:
-
-- user mentions -> you can customize this with your own template using the [`customTemplatesService.mentionTemplate$`](https://getstream.io/chat/docs/sdk/angular/services/CustomTemplatesService/#mentiontemplate)
-- links -> you can customize this by providing you own [`customLinkRenderer`](#customlinkrenderer) method
-
-#### Defined in
-
-[lib/message.service.ts:17](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message.service.ts#L17)
diff --git a/docusaurus/angular_versioned_docs/version-4/services/NotificationService.mdx b/docusaurus/angular_versioned_docs/version-4/services/NotificationService.mdx
deleted file mode 100644
index 9a9872e6..00000000
--- a/docusaurus/angular_versioned_docs/version-4/services/NotificationService.mdx
+++ /dev/null
@@ -1,94 +0,0 @@
-# NotificationService
-
-The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](../components/NotificationListComponent.mdx) component displays the currently active notifications.
-
-## Properties
-
-### notifications$
-
-• **notifications$**: `Observable`<`NotificationPayload`<{}\>[]\>
-
-Emits the currently active [notifications](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/notification.service.ts).
-
-#### Defined in
-
-[lib/notification.service.ts:15](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/notification.service.ts#L15)
-
-## Methods
-
-### addPermanentNotification
-
-▸ **addPermanentNotification**<`T`\>(`content`, `type?`, `translateParams?`, `templateContext?`): () => `void`
-
-Displays a notification, that will be visible until it's removed.
-
-#### Type parameters
-
-| Name | Type                      |
-| :--- | :------------------------ |
-| `T`  | { [key: string]: `any`; } |
-
-#### Parameters
-
-| Name               | Type                            | Default value | Description                                                            |
-| :----------------- | :------------------------------ | :------------ | :--------------------------------------------------------------------- |
-| `content`          | `string` \| `TemplateRef`<`T`\> | `undefined`   | The text of the notification or the HTML template for the notification |
-| `type`             | `NotificationType`              | `'error'`     | The type of the notification                                           |
-| `translateParams?` | `Object`                        | `undefined`   | Translation parameters for the `content` (for text notifications)      |
-| `templateContext?` | `T`                             | `undefined`   | The input of the notification template (for HTML notifications)        |
-
-#### Returns
-
-`fn`
-
-A method to clear the notification.
-
-▸ (): `void`
-
-##### Returns
-
-`void`
-
-#### Defined in
-
-[lib/notification.service.ts:68](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/notification.service.ts#L68)
-
----
-
-### addTemporaryNotification
-
-▸ **addTemporaryNotification**<`T`\>(`content`, `type?`, `timeout?`, `translateParams?`, `templateContext?`): () => `void`
-
-Displays a notification for the given amount of time.
-
-#### Type parameters
-
-| Name |
-| :--- |
-| `T`  |
-
-#### Parameters
-
-| Name               | Type                            | Default value | Description                                                            |
-| :----------------- | :------------------------------ | :------------ | :--------------------------------------------------------------------- |
-| `content`          | `string` \| `TemplateRef`<`T`\> | `undefined`   | The text of the notification or the HTML template for the notification |
-| `type`             | `NotificationType`              | `'error'`     | The type of the notification                                           |
-| `timeout`          | `number`                        | `5000`        | The number of milliseconds while the notification should be visible    |
-| `translateParams?` | `Object`                        | `undefined`   | Translation parameters for the `content` (for text notifications)      |
-| `templateContext?` | `T`                             | `undefined`   | The input of the notification template (for HTML notifications)        |
-
-#### Returns
-
-`fn`
-
-A method to clear the notification (before the timeout).
-
-▸ (): `void`
-
-##### Returns
-
-`void`
-
-#### Defined in
-
-[lib/notification.service.ts:31](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/notification.service.ts#L31)
diff --git a/docusaurus/angular_versioned_docs/version-4/services/StreamI18nService.mdx b/docusaurus/angular_versioned_docs/version-4/services/StreamI18nService.mdx
deleted file mode 100644
index a0b4065e..00000000
--- a/docusaurus/angular_versioned_docs/version-4/services/StreamI18nService.mdx
+++ /dev/null
@@ -1,26 +0,0 @@
-# StreamI18nService
-
-The `StreamI18nService` can be used to customize the labels of the chat UI. Our [translation guide](../concepts/translation.mdx) covers this topic in detail.
-
-## Methods
-
-### setTranslation
-
-▸ **setTranslation**(`lang?`, `overrides?`): `void`
-
-Registers the translation to the [ngx-translate](https://github.com/ngx-translate/core) TranslateService.
-
-#### Parameters
-
-| Name         | Type     | Default value | Description                                                                       |
-| :----------- | :------- | :------------ | :-------------------------------------------------------------------------------- |
-| `lang`       | `string` | `'en'`        | The language key to register the translation to                                   |
-| `overrides?` | `Object` | `undefined`   | An object which keys are translation keys, and the values are custom translations |
-
-#### Returns
-
-`void`
-
-#### Defined in
-
-[lib/stream-i18n.service.ts:19](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/stream-i18n.service.ts#L19)
diff --git a/docusaurus/angular_versioned_docs/version-4/services/ThemeService.mdx b/docusaurus/angular_versioned_docs/version-4/services/ThemeService.mdx
deleted file mode 100644
index 21793e6f..00000000
--- a/docusaurus/angular_versioned_docs/version-4/services/ThemeService.mdx
+++ /dev/null
@@ -1,111 +0,0 @@
-# ThemeService
-
-The `ThemeService` can be used to change the theme of the chat UI and to customize the theme. Our [theming guide](../theming/introduction.mdx) gives a complete overview about the topic.
-
-## Properties
-
-### theme$
-
-• **theme$**: `BehaviorSubject`<`string`\>
-
-A Subject that can be used to get or set the currently active theme.
-
-#### Defined in
-
-[lib/theme.service.ts:16](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/theme.service.ts#L16)
-
----
-
-### themeVersion
-
-• **themeVersion**: `"1"` \| `"2"`
-
-Stream chat theme version - this is used internally by some UI components of the SDK, integrators shouldn't need to use this variable
-
-#### Defined in
-
-[lib/theme.service.ts:20](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/theme.service.ts#L20)
-
-## Accessors
-
-### customDarkThemeVariables
-
-• `get` **customDarkThemeVariables**(): `undefined` \| { [key: string]: `string`; }
-
-A getter that returns the currently set custom dark theme variables.
-
-**`deprecated`** Only use with [theme v1](../concepts/theming-and-css.mdx)
-
-#### Returns
-
-`undefined` \| { [key: string]: `string`; }
-
-An object where the keys are theme variables, and the values are the currently set CSS values.
-
-#### Defined in
-
-[lib/theme.service.ts:103](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/theme.service.ts#L103)
-
-• `set` **customDarkThemeVariables**(`variables`): `void`
-
-A setter that can be used to overwrite the values of the CSS theme variables of the dark theme.
-
-**`deprecated`** Only use with [theme v1](../concepts/theming-and-css.mdx)
-
-#### Parameters
-
-| Name        | Type                                        | Description                                                                  |
-| :---------- | :------------------------------------------ | :--------------------------------------------------------------------------- |
-| `variables` | `undefined` \| { [key: string]: `string`; } | An object where the keys are theme variables, and the values are CSS values. |
-
-#### Returns
-
-`void`
-
-An object where the keys are theme variables, and the values are the currently set CSS values.
-
-#### Defined in
-
-[lib/theme.service.ts:112](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/theme.service.ts#L112)
-
----
-
-### customLightThemeVariables
-
-• `get` **customLightThemeVariables**(): `undefined` \| { [key: string]: `string`; }
-
-A getter that returns the currently set custom light theme variables.
-
-**`deprecated`** Only use with [theme v1](../concepts/theming-and-css.mdx)
-
-#### Returns
-
-`undefined` \| { [key: string]: `string`; }
-
-An object where the keys are theme variables, and the values are the currently set CSS values.
-
-#### Defined in
-
-[lib/theme.service.ts:76](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/theme.service.ts#L76)
-
-• `set` **customLightThemeVariables**(`variables`): `void`
-
-A setter that can be used to overwrite the values of the CSS theme variables of the light theme.
-
-**`deprecated`** Only use with [theme v1](../concepts/theming-and-css.mdx)
-
-#### Parameters
-
-| Name        | Type                                        | Description                                                                  |
-| :---------- | :------------------------------------------ | :--------------------------------------------------------------------------- |
-| `variables` | `undefined` \| { [key: string]: `string`; } | An object where the keys are theme variables, and the values are CSS values. |
-
-#### Returns
-
-`void`
-
-An object where the keys are theme variables, and the values are the currently set CSS values.
-
-#### Defined in
-
-[lib/theme.service.ts:85](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/theme.service.ts#L85)
diff --git a/docusaurus/angular_versioned_docs/version-4/services/TransliterationService.mdx b/docusaurus/angular_versioned_docs/version-4/services/TransliterationService.mdx
deleted file mode 100644
index 5f70e91d..00000000
--- a/docusaurus/angular_versioned_docs/version-4/services/TransliterationService.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
-# TransliterationService
-
-The `TransliterationService` wraps the [@sindresorhus/transliterate](https://www.npmjs.com/package/@sindresorhus/transliterate) library
diff --git a/docusaurus/angular_versioned_docs/version-4/services/_category_.json b/docusaurus/angular_versioned_docs/version-4/services/_category_.json
deleted file mode 100644
index 86e7c524..00000000
--- a/docusaurus/angular_versioned_docs/version-4/services/_category_.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "label": "Services",
-  "position": 6
-}
diff --git a/docusaurus/angular_versioned_docs/version-4/theming/SDKSpecific.jsx b/docusaurus/angular_versioned_docs/version-4/theming/SDKSpecific.jsx
deleted file mode 100644
index ecac5236..00000000
--- a/docusaurus/angular_versioned_docs/version-4/theming/SDKSpecific.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from "react";
-import BrowserOnly from "@docusaurus/BrowserOnly";
-
-const SDKSpecific = ({ children, name = "angular" }) => (
-  <BrowserOnly>
-    {() =>
-      window.location.pathname.includes(`/sdk/${name}`) ? children : null
-    }
-  </BrowserOnly>
-);
-
-export default SDKSpecific;
diff --git a/docusaurus/angular_versioned_docs/version-4/theming/V2Warning.jsx b/docusaurus/angular_versioned_docs/version-4/theming/V2Warning.jsx
deleted file mode 100644
index 4ac30f5f..00000000
--- a/docusaurus/angular_versioned_docs/version-4/theming/V2Warning.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from "react";
-import Link from "@docusaurus/Link";
-
-const V2Warning = ({
-  introductionPath = "../themingv2",
-  themingAndCSSPath,
-}) => {
-  return (
-    <>
-      This part of the documentation refers to the new version of the theming
-      and customization system which won't work with the old system, please
-      refer to the <Link to={introductionPath}>theme-v2 documentation</Link> to
-      learn more about the new system or{" "}
-      <Link to={themingAndCSSPath}>CSS and Theming</Link> if you need
-      documentation for the old system (also known as v1 or version 1).
-    </>
-  );
-};
-
-export default V2Warning;
diff --git a/docusaurus/angular_versioned_docs/version-4/theming/_category_.json b/docusaurus/angular_versioned_docs/version-4/theming/_category_.json
deleted file mode 100644
index 90aab7f6..00000000
--- a/docusaurus/angular_versioned_docs/version-4/theming/_category_.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "label": "Theming and CSS",
-  "position": 2
-}
diff --git a/docusaurus/angular_versioned_docs/version-4/theming/component-variables.mdx b/docusaurus/angular_versioned_docs/version-4/theming/component-variables.mdx
deleted file mode 100644
index 519ec4df..00000000
--- a/docusaurus/angular_versioned_docs/version-4/theming/component-variables.mdx
+++ /dev/null
@@ -1,963 +0,0 @@
----
-id: component-variables
-sidebar_position: 3
-title: Component variables
-keywords: [v2, theme-v2, theming-v2, theming, component variables]
----
-
-import SDKSpecific from "./SDKSpecific";
-import V2Warning from "./V2Warning";
-
-<SDKSpecific name='react'>
-
-:::info
-
-<V2Warning themingAndCSSPath="../../customization/css_and_theming" />
-
-:::
-
-</SDKSpecific>
-
-CSS variables are the easiest way to customize the theme. The variables are organized into two layers:
-
-- Global
-- Component
-
-This page contains information about the component variables.
-
-## AttachmentList
-
-### Theme variables
-
-| Name                                                                    | Value(s)                                                                                                                                                   | Description                                                                                                                |
-| ----------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
-| `--str-chat__attachment-list-border-radius`                             | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                                                                          | The border radius used for the borders of the component                                                                    |
-| `--str-chat__attachment-list-color`                                     | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                                                                | The text/icon color of the component                                                                                       |
-| `--str-chat__attachment-list-background-color`                          | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                                                                | The background color of the component                                                                                      |
-| `--str-chat__attachment-list-border-block-start`                        | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Top border of the component                                                                                                |
-| `--str-chat__attachment-list-border-block-end`                          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Bottom border of the component                                                                                             |
-| `--str-chat__attachment-list-border-inline-start`                       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Left (right in RTL layout) border of the component                                                                         |
-| `--str-chat__attachment-list-border-inline-end`                         | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Right (left in RTL layout) border of the component                                                                         |
-| `--str-chat__attachment-list-box-shadow`                                | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Box shadow applied to the component                                                                                        |
-| `--str-chat__image-attachment-border-radius`                            | <table><tr><th>`.str-chat`</th></tr><tr><td>`calc( var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin) )`</td></tr></table> | The border radius used for the borders of image/video attachments (images/videos uploaded from files, scraped media, GIFs) |
-| `--str-chat__image-attachment-color`                                    | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                                                                | The text/icon color of image/video attachments (images/videos uploaded from files, scraped media, GIFs)                    |
-| `--str-chat__image-attachment-background-color`                         | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-surface-color)`</td></tr></table>                                                   | The background color of image/video attachments (images/videos uploaded from files, scraped media, GIFs)                   |
-| `--str-chat__image-attachment-border-block-start`                       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Top border of image/video attachments (images/videos uploaded from files, scraped media, GIFs)                             |
-| `--str-chat__image-attachment-border-block-end`                         | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Bottom border of image/video attachments (images/videos uploaded from files, scraped media, GIFs)                          |
-| `--str-chat__image-attachment-border-inline-start`                      | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Left (right in RTL layout) border of image/video attachments (images/videos uploaded from files, scraped media, GIFs)      |
-| `--str-chat__image-attachment-border-inline-end`                        | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Right (left in RTL layout) border of image/video attachments (images/videos uploaded from files, scraped media, GIFs)      |
-| `--str-chat__image-attachment-box-shadow`                               | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Box shadow applied to image/video attachments (images/videos uploaded from files, scraped media, GIFs)                     |
-| `--str-chat__image-gallery-attachment-border-radius`                    | <table><tr><th>`.str-chat`</th></tr><tr><td>`calc( var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin) )`</td></tr></table> | The border radius used for the borders of image gallery attachments                                                        |
-| `--str-chat__image-gallery-attachment-color`                            | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                                                                | The text/icon color of image gallery attachments                                                                           |
-| `--str-chat__image-gallery-attachment-background-color`                 | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                                                                | The background color of image gallery attachments                                                                          |
-| `--str-chat__image-gallery-attachment-border-block-start`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Top border of image gallery attachments                                                                                    |
-| `--str-chat__image-gallery-attachment-border-block-end`                 | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Bottom border of image gallery attachments                                                                                 |
-| `--str-chat__image-gallery-attachment-border-inline-start`              | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Left (right in RTL layout) border of image gallery attachments                                                             |
-| `--str-chat__image-gallery-attachment-border-inline-end`                | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Right (left in RTL layout) border of image gallery attachments                                                             |
-| `--str-chat__image-gallery-attachment-box-shadow`                       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Box shadow applied to image gallery attachments                                                                            |
-| `--str-chat__image-gallery-attachment-overlay`                          | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-overlay-color)`</td></tr></table>                                                   | Overlay color applied to image gallery attachments                                                                         |
-| `--str-chat__image-gallery-attachment-overlay-text-color`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__secondary-overlay-text-color )`</td></tr></table>                                            | Text colors used on overlay applied to image gallery attachments                                                           |
-| `--str-chat__card-attachment-border-radius`                             | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                                                                          | The border radius used for the borders of card attachments                                                                 |
-| `--str-chat__card-attachment-color`                                     | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                                                                | The text/icon color of card attachments                                                                                    |
-| `--str-chat__card-attachment-link-color`                                | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color)`</td></tr></table>                                                             | The text color of links inside card attachments                                                                            |
-| `--str-chat__card-attachment-background-color`                          | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                                                                | The background color of card attachments                                                                                   |
-| `--str-chat__card-attachment-border-block-start`                        | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Top border of card attachments                                                                                             |
-| `--str-chat__card-attachment-border-block-end`                          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Bottom border of card attachments                                                                                          |
-| `--str-chat__card-attachment-border-inline-start`                       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Left (right in RTL layout) border of card attachments                                                                      |
-| `--str-chat__card-attachment-border-inline-end`                         | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Right (left in RTL layout) border of card attachments                                                                      |
-| `--str-chat__card-attachment-box-shadow`                                | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Box shadow applied to card attachments                                                                                     |
-| `--str-chat__file-attachment-border-radius`                             | <table><tr><th>`.str-chat`</th></tr><tr><td>`calc( var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin) )`</td></tr></table> | The border radius used for the borders of file attachments                                                                 |
-| `--str-chat__file-attachment-color`                                     | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                                                                | The text/icon color of file attachments                                                                                    |
-| `--str-chat__file-attachment-secondary-color`                           | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>                                                   | The text/icon color of file attachments for low emphasis texts (for example file size)                                     |
-| `--str-chat__file-attachment-background-color`                          | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-background-color)`</td></tr></table>                                                | The background color of file attachments                                                                                   |
-| `--str-chat__file-attachment-border-block-start`                        | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Top border of file attachments                                                                                             |
-| `--str-chat__file-attachment-border-block-end`                          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Bottom border of file attachments                                                                                          |
-| `--str-chat__file-attachment-border-inline-start`                       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Left (right in RTL layout) border of file attachments                                                                      |
-| `--str-chat__file-attachment-border-inline-end`                         | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Right (left in RTL layout) border of file attachments                                                                      |
-| `--str-chat__file-attachment-box-shadow`                                | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Box shadow applied to file attachments                                                                                     |
-| `--str-chat__audio-attachment-widget-border-radius`                     | <table><tr><th>`.str-chat`</th></tr><tr><td>`calc( var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin) )`</td></tr></table> | Border radius applied audio widget                                                                                         |
-| `--str-chat__audio-attachment-widget-color`                             | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                                                                | Text color used in audio widget                                                                                            |
-| `--str-chat__audio-attachment-widget-secondary-color`                   | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>                                                   | Border radius applied audio widget                                                                                         |
-| `--str-chat__audio-attachment-widget-background-color`                  | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-background-color)`</td></tr></table>                                                | The text/icon color for low emphasis texts (for example file size) in audio widget                                         |
-| `--str-chat__audio-attachment-widget-border-block-start`                | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Top border of audio widget                                                                                                 |
-| `--str-chat__audio-attachment-widget-border-block-end`                  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Bottom border of audio widget                                                                                              |
-| `--str-chat__audio-attachment-widget-border-inline-start`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Left (right in RTL layout) border of audio widget                                                                          |
-| `--str-chat__audio-attachment-widget-border-inline-end`                 | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Right (left in RTL layout) border of audio widget                                                                          |
-| `--str-chat__audio-attachment-widget-box-shadow`                        | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Box shadow applied to audio widget                                                                                         |
-| `--str-chat__voice-recording-attachment-widget-border-radius`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`calc( var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin) )`</td></tr></table> | Border radius applied to audio recording widget                                                                            |
-| `--str-chat__voice-recording-attachment-widget-color`                   | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                                                                | Text color used in audio recording widget                                                                                  |
-| `--str-chat__voice-recording-attachment-widget-secondary-color`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__text-low-emphasis-color )`</td></tr></table>                                                 | Border radius applied to audio recording widget                                                                            |
-| `--str-chat__voice-recording-attachment-widget-background-color`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__secondary-background-color )`</td></tr></table>                                              | The text/icon color for low emphasis texts (for example file size) in audio recording widget                               |
-| `--str-chat__voice-recording-attachment-widget-border-block-start`      | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Top border of audio recording widget                                                                                       |
-| `--str-chat__voice-recording-attachment-widget-border-block-end`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Bottom border of audio recording widget                                                                                    |
-| `--str-chat__voice-recording-attachment-widget-border-inline-start`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Left (right in RTL layout) border of audio recording widget                                                                |
-| `--str-chat__voice-recording-attachment-widget-border-inline-end`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Right (left in RTL layout) border of audio recording widget                                                                |
-| `--str-chat__voice-recording-attachment-widget-box-shadow`              | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Box shadow applied to audio recording widget                                                                               |
-| `--str-chat__audio-attachment-controls-button-border-radius`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-circle)`</td></tr></table>                                                      | Border radius applied to the play / pause button of audio widget                                                           |
-| `--str-chat__audio-attachment-controls-button-color`                    | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                                                                | Text color applied to audio widget's play / pause button                                                                   |
-| `--str-chat__audio-attachment-controls-button-background-color`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__secondary-background-color )`</td></tr></table>                                              | Background color applied to audio widget's play / pause button                                                             |
-| `--str-chat__audio-attachment-controls-button-pressed-background-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__surface-color )`</td></tr></table>                                                           | Background color applied to audio widget's play / pause button when in pressed (active) state                              |
-| `--str-chat__audio-attachment-controls-button-border-block-start`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Top border of audio widget's play / pause button                                                                           |
-| `--str-chat__audio-attachment-controls-button-border-block-end`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Bottom border of audio widget's play / pause button                                                                        |
-| `--str-chat__audio-attachment-controls-button-border-inline-start`      | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Left (right in RTL layout) border of audio widget's play / pause button                                                    |
-| `--str-chat__audio-attachment-controls-button-border-inline-end`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Right (left in RTL layout) border of audio widget's play / pause button                                                    |
-| `--str-chat__audio-attachment-controls-button-box-shadow`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__circle-fab-box-shadow)`</td></tr></table>                                                     | Box shadow applied to audio widget's play / pause button                                                                   |
-| `--str-chat__attachment-actions-border-radius`                          | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                                                                          | The border radius used for attachment actions                                                                              |
-| `--str-chat__attachment-actions-color`                                  | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                                                                | The text/icon color of attachment actions                                                                                  |
-| `--str-chat__attachment-actions-background-color`                       | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                                                                | The background color of attachment actions                                                                                 |
-| `--str-chat__attachment-actions-border-block-start`                     | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Top border of attachment actions                                                                                           |
-| `--str-chat__attachment-actions-border-block-end`                       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Bottom border of attachment actions                                                                                        |
-| `--str-chat__attachment-actions-border-inline-start`                    | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Left (right in RTL layout) border of attachment actions                                                                    |
-| `--str-chat__attachment-actions-border-inline-end`                      | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Right (left in RTL layout) border of attachment actions                                                                    |
-| `--str-chat__attachment-actions-box-shadow`                             | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Box shadow applied to attachment actions                                                                                   |
-| `--str-chat__attachment-action-border-radius`                           | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                                                                          | The border radius used for an attachment action                                                                            |
-| `--str-chat__attachment-action-color`                                   | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>                                                   | The text/icon color of an attachment action                                                                                |
-| `--str-chat__attachment-action-background-color`                        | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-background-color)`</td></tr></table>                                                | The background color of an attachment action                                                                               |
-| `--str-chat__attachment-action-border-block-start`                      | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__surface-color) 1px solid`</td></tr></table>                                                   | Top border of an attachment action                                                                                         |
-| `--str-chat__attachment-action-border-block-end`                        | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__surface-color) 1px solid`</td></tr></table>                                                   | Bottom border of an attachment action                                                                                      |
-| `--str-chat__attachment-action-border-inline-start`                     | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__surface-color) 1px solid`</td></tr></table>                                                   | Left (right in RTL layout) border of an attachment action                                                                  |
-| `--str-chat__attachment-action-border-inline-end`                       | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__surface-color) 1px solid`</td></tr></table>                                                   | Right (left in RTL layout) border of an attachment action                                                                  |
-| `--str-chat__attachment-action-box-shadow`                              | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                                                       | Box shadow applied to an attachment action                                                                                 |
-| `--str-chat__attachment-action-active-color`                            | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color)`</td></tr></table>                                                             | The text/icon color of an attachment action while in pressed state                                                         |
-
-Defined in: [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss)
-
-### Layout variables
-
-| Name                                                  | Value(s)                                                                                                                                                                   | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
-| ----------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--str-chat__attachment-margin`                       | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__spacing-0_5)`</td></tr><tr><th>`.str-chat__quoted-message-preview`</th></tr><tr><td>`0px`</td></tr></table>   | The margin applied to every attachment in the attachment list                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| `--str-chat__gif-height`                              | <table><tr><th>`.str-chat`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 200)`</td></tr></table>                                                                    | The height of GIFs                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
-| `--str-chat__voice-recording-amplitude-bar-width`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`2px`</td></tr></table>                                                                                                        | The width of the amplitude bar of the voice recording wave data                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-| `--str-chat__voice-recording-amplitude-bar-gap-width` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__spacing-px)`</td></tr></table>                                                                                | The gap between amplitudes of the wave data of a voice recording                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
-| `--str-chat__attachment-max-width`                    | <table><tr><th>`.str-chat__attachment-list`</th></tr><tr><td>`calc( var(--str-chat__message-max-width) - calc(2 * var(--str-chat__attachment-margin)) )`</td></tr></table> | The maximum allowed width and height of attachments, in case of gallery images this is the maximum size of the whole gallery (not just for a single image inside the gallery). There are some constraints for the acceptable values you can provide for this variable, [Angular documentation](https://getstream.io/chat/docs/sdk/angular/components/AttachmentListComponent/#maximum-size), [React documentation](https://getstream.io/chat/docs/sdk/react/message-components/attachment/#image-and-video-sizing). |
-| `--str-chat__video-height`                            | <table><tr><th>`.str-chat__attachment-list`</th></tr><tr><td>`var(--str-chat__attachment-max-width)`</td></tr></table>                                                     | The maximum height of videos, the default value is the mase as `--str-chat__attachment-max-width`. The rendered video can be smaller based on the aspect ratio                                                                                                                                                                                                                                                                                                                                                      |
-| `--str-chat__scraped-image-height`                    | <table><tr><th>`.str-chat__attachment-list`</th></tr><tr><td>`calc(var(--str-chat__attachment-max-width) * calc(1 / 1.91))`</td></tr></table>                              | The height of scraped images, the default value is optimized for 1.91:1 aspect ratio                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| `--str-chat__scraped-video-height`                    | <table><tr><th>`.str-chat__attachment-list`</th></tr><tr><td>`calc(var(--str-chat__attachment-max-width) * calc(9 / 16))`</td></tr></table>                                | The height of scraped videos, the default value is optimized for 16:9 aspect ratio                                                                                                                                                                                                                                                                                                                                                                                                                                  |
-
-Defined in: [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentList/AttachmentList-layout.scss)
-
-## AttachmentPreviewList
-
-### Theme variables
-
-| Name                                                       | Value(s)                                                                                                      | Description                                                                                      |
-| ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
-| `--str-chat__attachment-preview-list-border-radius`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-sm)`</td></tr></table>             | The border radius used for the borders of the component                                          |
-| `--str-chat__attachment-preview-list-color`                | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                   | The text/icon color of the component                                                             |
-| `--str-chat__attachment-preview-list-background-color`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                   | The background color of the component                                                            |
-| `--str-chat__attachment-preview-list-border-block-start`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Top border of the component                                                                      |
-| `--str-chat__attachment-preview-list-border-block-end`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Bottom border of the component                                                                   |
-| `--str-chat__attachment-preview-list-border-inline-start`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Left (right in RTL layout) border of the component                                               |
-| `--str-chat__attachment-preview-list-border-inline-end`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Right (left in RTL layout) border of the component                                               |
-| `--str-chat__attachment-preview-list-box-shadow`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Box shadow applied to the component                                                              |
-| `--str-chat__attachment-preview-close-icon-background`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-overlay-color)`</td></tr></table>      | Background color of the preview delete icon                                                      |
-| `--str-chat__attachment-preview-close-icon-color`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-overlay-text-color)`</td></tr></table> | Foreground color of the preview delete icon                                                      |
-| `--str-chat__attachment-preview-retry-icon-color`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color)`</td></tr></table>                | Color of the upload retry icon                                                                   |
-| `--str-chat__attachment-preview-download-icon-color`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>      | Color of the preview download icon                                                               |
-| `--str-chat__attachment-preview-overlay-color`             | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__overlay-color)`</td></tr></table>                | Overlay color applied to attachment previews during upload and if an error occured during upload |
-| `--str-chat__attachment-preview-image-border-radius`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-sm)`</td></tr></table>             | The border radius used for the borders of the image preview                                      |
-| `--str-chat__attachment-preview-image-color`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                   | The text/icon color of the image preview                                                         |
-| `--str-chat__attachment-preview-image-background-color`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                   | The background color of the image preview                                                        |
-| `--str-chat__attachment-preview-image-border-block-start`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Top border of the image preview                                                                  |
-| `--str-chat__attachment-preview-image-border-block-end`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Bottom border of the image preview                                                               |
-| `--str-chat__attachment-preview-image-border-inline-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Left (right in RTL layout) border of the image preview                                           |
-| `--str-chat__attachment-preview-image-border-inline-end`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Right (left in RTL layout) border of the image preview                                           |
-| `--str-chat__attachment-preview-image-box-shadow`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Box shadow applied to the image preview                                                          |
-| `--str-chat__attachment-preview-file-border-radius`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-md)`</td></tr></table>             | The border radius used for the borders of the file preview                                       |
-| `--str-chat__attachment-preview-file-color`                | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                   | The text/icon color of the file preview                                                          |
-| `--str-chat__attachment-preview-file-background-color`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                   | The background color of the file preview                                                         |
-| `--str-chat__attachment-preview-file-border-block-start`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`1px solid var(--str-chat__surface-color)`</td></tr></table>      | Top border of the file preview                                                                   |
-| `--str-chat__attachment-preview-file-border-block-end`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`1px solid var(--str-chat__surface-color)`</td></tr></table>      | Bottom border of the file preview                                                                |
-| `--str-chat__attachment-preview-file-border-inline-start`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`1px solid var(--str-chat__surface-color)`</td></tr></table>      | Left (right in RTL layout) border of the file preview                                            |
-| `--str-chat__attachment-preview-file-border-inline-end`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`1px solid var(--str-chat__surface-color)`</td></tr></table>      | Right (left in RTL layout) border of the file preview                                            |
-| `--str-chat__attachment-preview-file-box-shadow`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Box shadow applied to the file preview                                                           |
-
-Defined in: [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss)
-
-## Autocomplete
-
-### Theme variables
-
-| Name                                                          | Value(s)                                                                                                      | Description                                                                                  |
-| ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
-| `--str-chat__autocomplete-menu-border-radius`                 | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-xs)`</td></tr></table>             | The border radius used for the borders of the component                                      |
-| `--str-chat__autocomplete-menu-color`                         | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                   | The text/icon color of the component                                                         |
-| `--str-chat__autocomplete-menu-background-color`              | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-background-color)`</td></tr></table>   | The background color of the component                                                        |
-| `--str-chat__autocomplete-menu-border-block-start`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Top border of the component                                                                  |
-| `--str-chat__autocomplete-menu-border-block-end`              | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Bottom border of the component                                                               |
-| `--str-chat__autocomplete-menu-border-inline-start`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Left (right in RTL layout) border of the component                                           |
-| `--str-chat__autocomplete-menu-border-inline-end`             | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Right (left in RTL layout) border of the component                                           |
-| `--str-chat__autocomplete-menu-box-shadow`                    | <table><tr><th>`.str-chat`</th></tr><tr><td>`0 0 8px rgba(0, 0, 0, 0.15)`</td></tr></table>                   | Box shadow applied to the component                                                          |
-| `--str-chat__autocomplete-active-background-color`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__surface-color)`</td></tr></table>                | The background color of a selected autocomplete item                                         |
-| `--str-chat__suggestion-list-container-border-radius`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-xs)`</td></tr></table>             | The border radius used for the borders of the component (ReactSDK)                           |
-| `--str-chat__suggestion-list-container-color`                 | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                   | The text/icon color of the component (ReactSDK)                                              |
-| `--str-chat__suggestion-list-container-background-color`      | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__secondary-background-color )`</td></tr></table> | The background color of the component (ReactSDK)                                             |
-| `--str-chat__suggestion-list-container-border-block-start`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Top border of the component (ReactSDK)                                                       |
-| `--str-chat__suggestion-list-container-border-block-end`      | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Bottom border of the component (ReactSDK)                                                    |
-| `--str-chat__suggestion-list-container-border-inline-start`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Left (right in RTL layout) border of the component (ReactSDK)                                |
-| `--str-chat__suggestion-list-container-border-inline-end`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Right (left in RTL layout) border of the component (ReactSDK)                                |
-| `--str-chat__suggestion-list-container-box-shadow`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`0 0 8px rgba(0, 0, 0, 0.15)`</td></tr></table>                   | Box shadow applied to the component (ReactSDK)                                               |
-| `--str-chat__suggestion-list-item--selected-background-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__surface-color)`</td></tr></table>                | The background color of a selected autocomplete item (ReactSDK)                              |
-| `--str-chat__slash-command-border-radius`                     | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                             | The border radius used for the borders of the slash command item in the autocomplete list    |
-| `--str-chat__slash-command-color`                             | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                   | The text/icon color of the slash command item in the autocomplete list                       |
-| `--str-chat__slash-command-background-color`                  | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                   | The background color of the slash command item in the autocomplete list                      |
-| `--str-chat__slash-command-border-block-start`                | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Top border of the slash command item in the autocomplete list                                |
-| `--str-chat__slash-command-border-block-end`                  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Bottom border of the slash command item in the autocomplete list                             |
-| `--str-chat__slash-command-border-inline-start`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Left (right in RTL layout) border of the slash command item in the autocomplete list         |
-| `--str-chat__slash-command-border-inline-end`                 | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Right (left in RTL layout) border of the slash command item in the autocomplete list         |
-| `--str-chat__slash-command-box-shadow`                        | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Box shadow of the slash command item in the autocomplete list                                |
-| `--str-chat__slash-command-args-color`                        | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>      | Text color of the arguments of a slash command item in the autocomplete list                 |
-| `--str-chat__mention-list-user-item-border-radius`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                             | The border radius used for the borders of the user mention item in the autocomplete list     |
-| `--str-chat__mention-list-user-item-color`                    | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                   | The text/icon color of the user mention item in the autocomplete list                        |
-| `--str-chat__mention-list-user-item-background-color`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                   | The background color of the user mention item in the autocomplete list                       |
-| `--str-chat__mention-list-user-item-border-block-start`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Top border of the user mention item in the autocomplete list                                 |
-| `--str-chat__mention-list-user-item-border-block-end`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Bottom border of the user mention item in the autocomplete list                              |
-| `--str-chat__mention-list-user-item-border-inline-start`      | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Left (right in RTL layout) border of the user mention item in the autocomplete list          |
-| `--str-chat__mention-list-user-item-border-inline-end`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Right (left in RTL layout) border of the user mention item in the autocomplete list          |
-| `--str-chat__mention-list-user-item-box-shadow`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Box shadow of the user mention item in the autocomplete list                                 |
-| `--str-chat__mention-list-user-item-at-sign-color`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color)`</td></tr></table>                | The text color of the at sign inside a user mention itome in the autocomplete list           |
-| `--str-chat__mention-list-emoji-item-border-radius`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                             | The border radius used for the borders of the emoji suggestion item in the autocomplete list |
-| `--str-chat__mention-list-emoji-item-color`                   | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                   | The text/icon color of the emoji suggestion item in the autocomplete list                    |
-| `--str-chat__mention-list-emoji-item-background-color`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                   | The background color of the emoji suggestion item in the autocomplete list                   |
-| `--str-chat__mention-list-emoji-item-border-block-start`      | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Top border of the emoji suggestion item in the autocomplete list                             |
-| `--str-chat__mention-list-emoji-item-border-block-end`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Bottom border of the emoji suggestion item in the autocomplete list                          |
-| `--str-chat__mention-list-emoji-item-border-inline-start`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Left (right in RTL layout) border of the emoji suggestion item in the autocomplete list      |
-| `--str-chat__mention-list-emoji-item-border-inline-end`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Right (left in RTL layout) border of the emoji suggestion item in the autocomplete list      |
-| `--str-chat__mention-list-emoji-item-box-shadow`              | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Box shadow of the emoji suggestion item in the autocomplete list                             |
-
-Defined in: [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss)
-
-### Layout variables
-
-| Name                                              | Value(s)                                                                                     | Description                                                         |
-| ------------------------------------------------- | -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- |
-| `--str-chat__mention-list-emoji-item-font-family` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__font-family)`</td></tr></table> | The font used in the emoji suggestion item in the autocomplete list |
-
-Defined in: [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Autocomplete/Autocomplete-layout.scss)
-
-## Avatar
-
-### Theme variables
-
-| Name                                                | Value(s)                                                                                              | Description                                                               |
-| --------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- |
-| `--str-chat__avatar-border-radius`                  | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-circle)`</td></tr></table> | The border radius used for the borders of the component                   |
-| `--str-chat__avatar-color`                          | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__on-primary-color)`</td></tr></table>     | The text/icon color of the component                                      |
-| `--str-chat__avatar-background-color`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color)`</td></tr></table>        | The background color of the component                                     |
-| `--str-chat__avatar-border-block-start`             | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                  | Top border of the component                                               |
-| `--str-chat__avatar-border-block-end`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                  | Bottom border of the component                                            |
-| `--str-chat__avatar-border-inline-start`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                  | Left (right in RTL layout) border of the component                        |
-| `--str-chat__avatar-border-inline-end`              | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                  | Right (left in RTL layout) border of the component                        |
-| `--str-chat__avatar-box-shadow`                     | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                  | Box shadow applied to the component                                       |
-| `--str-chat__avatar-online-indicator-color`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__info-color)`</td></tr></table>           | The color of the online indicator (only available in Angular SDK)         |
-| `--str-chat__avatar-online-indicator-border-radius` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-circle)`</td></tr></table> | The border radius of the online indicator (only available in Angular SDK) |
-
-Defined in: [Avatar](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Avatar/Avatar-theme.scss)
-
-### Layout variables
-
-| Name                      | Value(s)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Description                                           |
-| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- |
-| `--str-chat__avatar-size` | <table><tr><th>`.str-chat`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 32)`</td></tr><tr><th>`.str-chat .stream-chat__avatar--autocomplete-item`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 30)`</td></tr><tr><th>`.str-chat .stream-chat__avatar--channel-header`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 40)`</td></tr><tr><th>`.str-chat .stream-chat__avatar--channel-preview`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 49)`</td></tr><tr><th>`.str-chat .stream-chat__avatar--quoted-message-sender`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 20)`</td></tr><tr><th>`.str-chat .stream-chat__avatar--reaction`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 30)`</td></tr></table> | The size of the avatar, only available in Angular v5+ |
-
-Defined in: [Avatar](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Avatar/Avatar-layout.scss)
-
-## Channel
-
-### Theme variables
-
-| Name                                        | Value(s)                                                                                                 | Description                                             |
-| ------------------------------------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
-| `--str-chat__channel-border-radius`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                        | The border radius used for the borders of the component |
-| `--str-chat__channel-color`                 | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>              | The text/icon color of the component                    |
-| `--str-chat__channel-background-color`      | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__background-color)`</td></tr></table>        | The background color of the component                   |
-| `--str-chat__channel-box-shadow`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                     | Box shadow applied to the component                     |
-| `--str-chat__channel-border-block-start`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                     | Top border of the component                             |
-| `--str-chat__channel-border-block-end`      | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                     | Bottom border of the component                          |
-| `--str-chat__channel-border-inline-start`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                     | Left (right in RTL layout) border of the component      |
-| `--str-chat__channel-border-inline-end`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                     | Right (left in RTL layout) border of the component      |
-| `--str-chat__channel-empty-indicator-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__disabled-color)`</td></tr></table>          | The icon color used when no channel is selected         |
-| `--str-chat__channel-empty-color`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table> | The text color used when no channel is selected         |
-| `--str-chat__channel-loading-state-color`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__disabled-color)`</td></tr></table>          | The color of the loading indicator                      |
-
-Defined in: [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Channel/Channel-theme.scss)
-
-## ChannelHeader
-
-### Theme variables
-
-| Name                                             | Value(s)                                                                                                    | Description                                                              |
-| ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
-| `--str-chat__channel-header-border-radius`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                           | The border radius used for the borders of the component                  |
-| `--str-chat__channel-header-color`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                           | The text/icon color of the component                                     |
-| `--str-chat__channel-header-background-color`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-background-color)`</td></tr></table> | The background color of the component                                    |
-| `--str-chat__channel-header-border-block-start`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Top border of the component                                              |
-| `--str-chat__channel-header-border-block-end`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Bottom border of the component                                           |
-| `--str-chat__channel-header-border-inline-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Left (right in RTL layout) border of the component                       |
-| `--str-chat__channel-header-border-inline-end`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Right (left in RTL layout) border of the component                       |
-| `--str-chat__channel-header-box-shadow`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Box shadow applied to the component                                      |
-| `--str-chat__channel-header-info-color`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>    | The text/icon color used to display member information about the channel |
-
-Defined in: [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss)
-
-## ChannelList
-
-### Theme variables
-
-| Name                                                           | Value(s)                                                                                                                | Description                                                    |
-| -------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- |
-| `--str-chat__channel-list-border-radius`                       | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                                       | The border radius used for the borders of the component        |
-| `--str-chat__channel-list-color`                               | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                             | The text/icon color of the component                           |
-| `--str-chat__channel-list-background-color`                    | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-background-color)`</td></tr></table>             | The background color of the component                          |
-| `--str-chat__channel-list-box-shadow`                          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                    | Box shadow applied to the component                            |
-| `--str-chat__channel-list-border-block-start`                  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                    | Top border of the component                                    |
-| `--str-chat__channel-list-border-block-end`                    | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                    | Bottom border of the component                                 |
-| `--str-chat__channel-list-border-inline-start`                 | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                    | Left (right in RTL layout) border of the component             |
-| `--str-chat__channel-list-border-inline-end`                   | <table><tr><th>`.str-chat`</th></tr><tr><td>`1px solid var(--str-chat__surface-color)`</td></tr></table>                | Right (left in RTL layout) border of the component             |
-| `--str-chat__channel-list-load-more-border-radius`             | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__cta-button-border-radius)`</td></tr></table>               | The border radius used for the borders of the load more button |
-| `--str-chat__channel-list-load-more-color`                     | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__cta-button-color)`</td></tr></table>                       | The text/icon color of the load more button                    |
-| `--str-chat__channel-list-load-more-background-color`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__cta-button-background-color)`</td></tr></table>            | The background color of the load more button                   |
-| `--str-chat__channel-list-load-more-box-shadow`                | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__cta-button-box-shadow)`</td></tr></table>                  | Box shadow applied to the load more button                     |
-| `--str-chat__channel-list-load-more-border-block-start`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__cta-button-border-block-start )`</td></tr></table>        | Top border of the load more button                             |
-| `--str-chat__channel-list-load-more-border-block-end`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__cta-button-border-block-end)`</td></tr></table>            | Bottom border of the load more button                          |
-| `--str-chat__channel-list-load-more-border-inline-start`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__cta-button-border-inline-start )`</td></tr></table>       | Left (right in RTL layout) border of the load more button      |
-| `--str-chat__channel-list-load-more-border-inline-end`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__cta-button-border-inline-end )`</td></tr></table>         | Right (left in RTL layout) border of the load more button      |
-| `--str-chat__channel-list-load-more-pressed-background-color`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__cta-button-pressed-background-color )`</td></tr></table>  | The background color of the load more button in pressed state  |
-| `--str-chat__channel-list-load-more-disabled-background-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__cta-button-disabled-background-color )`</td></tr></table> | The background color of the load more button in disabled state |
-| `--str-chat__channel-list-load-more-disabled-color`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__cta-button-disabled-color)`</td></tr></table>              | The text/icon color of the load more button in disabled state  |
-| `--str-chat__channel-list-empty-indicator-color`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>                | The text/icon color for the empty list state                   |
-
-Defined in: [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelList/ChannelList-theme.scss)
-
-## ChannelPreview
-
-### Theme variables
-
-| Name                                                           | Value(s)                                                                                                   | Description                                                                      |
-| -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
-| `--str-chat__channel-preview-border-radius`                    | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                          | The border radius used for the borders of the component                          |
-| `--str-chat__channel-preview-color`                            | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                | The text/icon color of the component                                             |
-| `--str-chat__channel-preview-background-color`                 | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                | The background color of the component                                            |
-| `--str-chat__channel-preview-border-block-start`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                       | Top border of the component                                                      |
-| `--str-chat__channel-preview-border-block-end`                 | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                       | Bottom border of the component                                                   |
-| `--str-chat__channel-preview-border-inline-start`              | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                       | Left (right in RTL layout) border of the component                               |
-| `--str-chat__channel-preview-border-inline-end`                | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                       | Right (left in RTL layout) border of the component                               |
-| `--str-chat__channel-preview-active-background-color`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__surface-color)`</td></tr></table>             | Background color used for selected channel preview components                    |
-| `--str-chat__channel-preview-hover-background-color`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-surface-color)`</td></tr></table>   | Background color used for the hover state                                        |
-| `--str-chat__channel-preview-latest-message-secondary-color`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__text-low-emphasis-color )`</td></tr></table> | Text color of the latest message when preview is not hovered or selected         |
-| `--str-chat__channel-preview-loading-state-color`              | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__disabled-color)`</td></tr></table>            | The color of the loading indicator while initializing the channel list           |
-| `--str-chat__channel-preview-unread-badge-background-color`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__unread-badge-color)`</td></tr></table>        | The background color of the unread badge                                         |
-| `--str-chat__channel-preview-unread-badge-color`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__on-unread-badge-color)`</td></tr></table>     | The color of the unread badge                                                    |
-| `--str-chat__channel-preview-unread-badge-border-radius`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-circle)`</td></tr></table>      | The border radius used for the borders of the unread badge                       |
-| `--str-chat__channel-preview-unread-badge-border-block-start`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                       | Top border of the unread badge                                                   |
-| `--str-chat__channel-preview-unread-badge-border-block-end`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                       | Bottom border of the unread badge                                                |
-| `--str-chat__channel-preview-unread-badge-border-inline-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                       | Left (right in RTL layout) border of the unread badge                            |
-| `--str-chat__channel-preview-unread-badge-border-inline-end`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                       | Right (left in RTL layout) border of the unread badge                            |
-| `--str-chat__channel-preview-message-status-color`             | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color)`</td></tr></table>             | The color of the message status indicator icon (only available in Angular)       |
-| `--str-chat__channel-preview-message-time-color`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__message-secondary-color)`</td></tr></table>   | The color of the text that displays the message time (only available in Angular) |
-
-Defined in: [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss)
-
-## ChannelSearch - Only available in React SDK
-
-### Theme variables
-
-| Name                                                                       | Value(s)                                                                                                    | Description                                                       |
-| -------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- |
-| `--str-chat__channel-search-input-color`                                   | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                 | The text/icon color of the component                              |
-| `--str-chat__channel-search-input-placeholder-color`                       | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>    | The text/icon color of the component                              |
-| `--str-chat__channel-search-input-icon-color`                              | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>    | The text/icon color of the component                              |
-| `--str-chat__channel-search-input-border-block-start`                      | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Top border of the component                                       |
-| `--str-chat__channel-search-input-border-block-end`                        | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Bottom border of the component                                    |
-| `--str-chat__channel-search-input-border-inline-start`                     | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Left (right in RTL layout) borhe component                        |
-| `--str-chat__channel-search-input-border-inline-end`                       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Right (left in RTL layout) borhe component                        |
-| `--str-chat__channel-search-input-wrapper-border-radius`                   | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-lg)`</td></tr></table>           | The border radius used for the borders of the component           |
-| `--str-chat__channel-search-input-wrapper-background-color`                | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                 | The background color of the component                             |
-| `--str-chat__channel-search-input-wrapper-border-block-start`              | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__surface-color) 1px solid`</td></tr></table>    | Top border of the component                                       |
-| `--str-chat__channel-search-input-wrapper-border-block-end`                | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__surface-color) 1px solid`</td></tr></table>    | Bottom border of the component                                    |
-| `--str-chat__channel-search-input-wrapper-border-inline-start`             | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__surface-color) 1px solid`</td></tr></table>    | Left (right in RTL layout) border of the component                |
-| `--str-chat__channel-search-input-wrapper-border-inline-end`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__surface-color) 1px solid`</td></tr></table>    | Right (left in RTL layout) border of the component                |
-| `--str-chat__channel-search-input-wrapper-active-border-radius`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-lg)`</td></tr></table>           | The border radius used for the borders of the component           |
-| `--str-chat__channel-search-input-wrapper-active-background-color`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                 | The background color of the component                             |
-| `--str-chat__channel-search-input-wrapper-active-border-block-start`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color) 1px solid`</td></tr></table>    | Top border of the component                                       |
-| `--str-chat__channel-search-input-wrapper-active-border-block-end`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color) 1px solid`</td></tr></table>    | Bottom border of the component                                    |
-| `--str-chat__channel-search-input-wrapper-active-border-inline-start`      | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__primary-color ) 1px solid`</td></tr></table>  | Left (right in RTL layout) border of the component                |
-| `--str-chat__channel-search-input-wrapper-active-border-inline-end`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color) 1px solid`</td></tr></table>    | Right (left in RTL layout) border of the component                |
-| `--str-chat__channel-search-result-background-color`                       | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                 | The background applied to channel search result                   |
-| `--str-chat__channel-search-result-border-block-start`                     | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Top border of the component                                       |
-| `--str-chat__channel-search-result-border-block-end`                       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Bottom border of the component                                    |
-| `--str-chat__channel-search-result-border-inline-start`                    | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Left (right in RTL layout) border of the component                |
-| `--str-chat__channel-search-result-border-inline-end`                      | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Right (left in RTL layout) border of the component                |
-| `--str-chat__channel-search-result-hover-background-color`                 | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__secondary-surface-color )`</td></tr></table>  | Background color used for the search result hover / focused state |
-| `--str-chat__channel-search-result-list-color`                             | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                 |                                                                   |
-| `--str-chat__channel-search-result-list-background-color`                  | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-background-color)`</td></tr></table> |                                                                   |
-| `--str-chat__channel-search-result-list-border-block-start`                | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Top border of the component                                       |
-| `--str-chat__channel-search-result-list-border-block-end`                  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Bottom border of the component                                    |
-| `--str-chat__channel-search-result-list-border-inline-start`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Left (right in RTL layout) border of the component                |
-| `--str-chat__channel-search-result-list-border-inline-end`                 | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Right (left in RTL layout) border of the component                |
-| `--str-chat__channel-search-result-list-popup-box-shadow`                  | <table><tr><th>`.str-chat`</th></tr><tr><td>`0 4px 4px var(--str-chat__box-shadow-color)`</td></tr></table> | Box shadow applied to the component                               |
-| `--str-chat__channel-search-results-header-color`                          | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>    | The font color used in the search results header                  |
-| `--str-chat__channel-search-results-header-background-color`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__background-color)`</td></tr></table>           | The background color used in the search results header            |
-| `--str-chat__channel-search-results-header-border-block-start`             | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Top border of the component                                       |
-| `--str-chat__channel-search-results-header-border-block-end`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__surface-color) 1px solid`</td></tr></table>    | Bottom border of the component                                    |
-| `--str-chat__channel-search-results-header-border-inline-start`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Left (right in RTL layout) border of the component                |
-| `--str-chat__channel-search-results-header-border-inline-end`              | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Right (left in RTL layout) border of the component                |
-| `--str-chat__channel-search-results-loading-indicator-color`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>    | The font color used in the search results loading indicator       |
-| `--str-chat__channel-search-results-loading-indicator-background-color`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__background-color)`</td></tr></table>           | The background color used in the search results loading indicator |
-| `--str-chat__channel-search-results-loading-indicator-border-block-start`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Top border of the component                                       |
-| `--str-chat__channel-search-results-loading-indicator-border-block-end`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__surface-color) 1px solid`</td></tr></table>    | Bottom border of the component                                    |
-| `--str-chat__channel-search-results-loading-indicator-border-inline-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Left (right in RTL layout) border of the component                |
-| `--str-chat__channel-search-results-loading-indicator-border-inline-end`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Right (left in RTL layout) border of the component                |
-| `--str-chat__channel-search-results-empty-color`                           | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>    | The font color used in the empty search results indicator         |
-| `--str-chat__channel-search-results-empty-icon-color`                      | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__disabled-color)`</td></tr></table>             | The icon color used in the empty search results indicator         |
-| `--str-chat__channel-search-results-empty-background-color`                | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__background-color)`</td></tr></table>           | The background color used in the empty search results indicator   |
-| `--str-chat__channel-search-results-empty-border-block-start`              | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Top border of the component                                       |
-| `--str-chat__channel-search-results-empty-border-block-end`                | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Bottom border of the component                                    |
-| `--str-chat__channel-search-results-empty-border-inline-start`             | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Left (right in RTL layout) border of the component                |
-| `--str-chat__channel-search-results-empty-border-inline-end`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Right (left in RTL layout) border of the component                |
-
-Defined in: [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss)
-
-## CircleFAButton
-
-### Theme variables
-
-| Name                                              | Value(s)                                                                                                    | Description                                             |
-| ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
-| `--str-chat__circle-fab-border-radius`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-circle)`</td></tr></table>       | The border radius used for the borders of the component |
-| `--str-chat__circle-fab-color`                    | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color)`</td></tr></table>              | The text/icon color of the component                    |
-| `--str-chat__circle-fab-background-color`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-background-color)`</td></tr></table> | The background color of the component                   |
-| `--str-chat__circle-fab-pressed-background-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__surface-color)`</td></tr></table>              | The background color of the component in pressed state  |
-| `--str-chat__circle-fab-box-shadow`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`0 2px 4px rgba(0, 0, 0, 0.25)`</td></tr></table>               | Box shadow applied to the component                     |
-| `--str-chat__circle-fab-border-block-start`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Top border of the component                             |
-| `--str-chat__circle-fab-border-block-end`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Bottom border of the component                          |
-| `--str-chat__circle-fab-border-inline-start`      | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Left (right in RTL layout) border of the component      |
-| `--str-chat__circle-fab-border-inline-end`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Right (left in RTL layout) border of the component      |
-
-Defined in: [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss)
-
-## CTAButton
-
-### Theme variables
-
-| Name                                               | Value(s)                                                                                              | Description                                             |
-| -------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
-| `--str-chat__cta-button-border-radius`             | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-xs)`</td></tr></table>     | The border radius used for the borders of the component |
-| `--str-chat__cta-button-color`                     | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__on-primary-color)`</td></tr></table>     | The text/icon color of the component                    |
-| `--str-chat__cta-button-background-color`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color)`</td></tr></table>        | The background color of the component                   |
-| `--str-chat__cta-button-border-block-start`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                  | Top border of the component                             |
-| `--str-chat__cta-button-border-block-end`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                  | Bottom border of the component                          |
-| `--str-chat__cta-button-border-inline-start`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                  | Left (right in RTL layout) border of the component      |
-| `--str-chat__cta-button-border-inline-end`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                  | Right (left in RTL layout) border of the component      |
-| `--str-chat__cta-button-box-shadow`                | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                  | Box shadow applied to the component                     |
-| `--str-chat__cta-button-pressed-background-color`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__active-primary-color)`</td></tr></table> | The background color of the component in pressed state  |
-| `--str-chat__cta-button-disabled-background-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__disabled-color)`</td></tr></table>       | The background color of the component in disabled state |
-| `--str-chat__cta-button-disabled-color`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__on-disabled-color)`</td></tr></table>    | The text/icon color of the component in disabled state  |
-
-Defined in: [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/CTAButton/CTAButton-theme.scss)
-
-## EditMessageForm
-
-### Theme variables
-
-| Name                                                        | Value(s)                                                                                                 | Description                                             |
-| ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
-| `--str-chat__edit-message-modal-button-border-radius`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                     | The border radius used for the borders of the component |
-| `--str-chat__edit-message-modal-send-button-color`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color)`</td></tr></table>           | The text color used for the send button                 |
-| `--str-chat__edit-message-modal-cancel-button-color`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table> | The text color used for the cancel button               |
-| `--str-chat__edit-message-modal-button-background-color`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                              | The background color of the component                   |
-| `--str-chat__edit-message-modal-button-border-block-start`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                     | Top border of the component                             |
-| `--str-chat__edit-message-modal-button-border-block-end`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                     | Bottom border of the component                          |
-| `--str-chat__edit-message-modal-button-border-inline-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                     | Left (right in RTL layout) border of the component      |
-| `--str-chat__edit-message-modal-button-border-inline-end`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                     | Right (left in RTL layout) border of the component      |
-| `--str-chat__edit-message-modal-button-box-shadow`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                     | Box shadow applied to the component                     |
-
-Defined in: [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss)
-
-## Icon - Only available in Angular SDK
-
-### Theme variables
-
-| Name                    | Value(s)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | Description                                          |
-| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- |
-| `--str-chat-icon-color` | <table><tr><th>`.str-chat__attachment-preview-list .str-chat__attachment-preview-unsupported .str-chat__attachment-preview-file-download,.str-chat__attachment-preview-list .str-chat__attachment-preview-voice-recording .str-chat__attachment-preview-file-download,.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-download`</th></tr><tr><td>`var(--str-chat__attachment-preview-download-icon-color)`</td></tr><tr><th>`.str-chat__attachment-preview-list .str-chat__attachment-preview-delete`</th></tr><tr><td>`var(--str-chat__attachment-preview-close-icon-color)`</td></tr><tr><th>`.str-chat__attachment-preview-list .str-chat__attachment-preview-error`</th></tr><tr><td>`var(--str-chat__attachment-preview-retry-icon-color)`</td></tr><tr><th>`.str-chat__empty-channel`</th></tr><tr><td>`var(--str-chat__channel-empty-color)`</td></tr><tr><th>`.str-chat__channel-list .str-chat__channel-list-empty`</th></tr><tr><td>`var(--str-chat__channel-list-empty-indicator-color)`</td></tr><tr><th>`.str-chat__channel-preview .str-chat__channel-preview-messenger--status`</th></tr><tr><td>`var(--str-chat__channel-preview-message-status-color)`</td></tr><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr><tr><th>`.str-chat__icon--error`</th></tr><tr><td>`var(--str-chat__danger-color)`</td></tr><tr><th>`.str-chat__image-carousel .str-chat__image-carousel-stepper`</th></tr><tr><td>`var(--str-chat__image-carousel-stepper-color)`</td></tr><tr><th>`.str-chat__message .str-chat__message-options`</th></tr><tr><td>`var(--str-chat__message-options-color)`</td></tr><tr><th>`.str-chat__message .str-chat__message-status`</th></tr><tr><td>`var(--str-chat__message-status-color)`</td></tr><tr><th>`.str-chat__message .str-chat__message-error-icon`</th></tr><tr><td>`var(--str-chat__message-error-message-color)`</td></tr><tr><th>`.str-chat__unread-messages-notification`</th></tr><tr><td>`var(--str-chat__on-primary-color)`</td></tr><tr><th>`.str-chat__message-input .str-chat__file-input-container`</th></tr><tr><td>`var(--str-chat__message-input-tools-color)`</td></tr><tr><th>`.str-chat__message-input .str-chat__send-button`</th></tr><tr><td>`var(--str-chat__message-send-color)`</td></tr><tr><th>`.str-chat__message-input .str-chat__send-button:disabled`</th></tr><tr><td>`var(--str-chat__message-send-disabled-color)`</td></tr><tr><th>`.str-chat__jump-to-latest-message`</th></tr><tr><td>`var(--str-chat__jump-to-latest-message-unread-count-background-color)`</td></tr><tr><th>`.str-chat__modal .str-chat__modal__close-button`</th></tr><tr><td>`var(--str-chat__modal-close-icon-color)`</td></tr></table> | The color of the icon, only available in Angular v5+ |
-
-Defined in: [Icon](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Icon/Icon-theme.scss)
-
-### Layout variables
-
-| Name                     | Value(s)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Description                                           |
-| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------- |
-| `--str-chat-icon-height` | <table><tr><th>`.str-chat__attachment-list .str-chat__message-attachment-download-icon`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 16)`</td></tr><tr><th>`.str-chat__attachment-list .str-chat__attachment-type-icon`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 37)`</td></tr><tr><th>`.str-chat__message-attachment-audio-widget--play-button`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 24)`</td></tr><tr><th>`.str-chat__attachment-preview-list .str-chat__attachment-preview-unsupported .str-chat__attachment-preview-file-icon,.str-chat__attachment-preview-list .str-chat__attachment-preview-voice-recording .str-chat__attachment-preview-file-icon,.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-icon`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 37)`</td></tr><tr><th>`.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-end .str-chat__attachment-preview-file-download`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 16)`</td></tr><tr><th>`.str-chat__attachment-preview-list .str-chat__attachment-preview-delete`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 24)`</td></tr><tr><th>`.str-chat__attachment-preview-list .str-chat__attachment-preview-error`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 24)`</td></tr><tr><th>`.str-chat__empty-channel`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 136)`</td></tr><tr><th>`.str-chat__channel-list .str-chat__channel-list-messenger .str-chat__channel-list-messenger__main .str-chat__channel-list-empty`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 136)`</td></tr><tr><th>`.str-chat__channel-preview .str-chat__channel-preview-end .str-chat__channel-preview-end-second-row .str-chat__channel-preview-messenger--status`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 15)`</td></tr><tr><th>`.str-chat`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 24)`</td></tr><tr><th>`.str-chat__image-carousel .str-chat__image-carousel-stepper`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 30)`</td></tr><tr><th>`.str-chat__message .str-chat__message-options`</th></tr><tr><td>`calc(var(--str-chat__message-options-button-size) * 0.7)`</td></tr><tr><th>`.str-chat__message .str-chat__message-status,.str-chat__quoted-message-preview .str-chat__message-status`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 15)`</td></tr><tr><th>`.str-chat__unread-messages-notification`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 16)`</td></tr><tr><th>`.str-chat__message-input .str-chat__message-input-inner .str-chat__file-input-container`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 24)`</td></tr><tr><th>`.str-chat__message-input .str-chat__send-button`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 32)`</td></tr><tr><th>`.str-chat__modal--open .str-chat__modal__close-button`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 28)`</td></tr></table> | The height of the icon, only available in Angular v5+ |
-| `--str-chat-icon-width`  | <table><tr><th>`.str-chat__attachment-preview-list .str-chat__attachment-preview-unsupported .str-chat__attachment-preview-file-icon,.str-chat__attachment-preview-list .str-chat__attachment-preview-voice-recording .str-chat__attachment-preview-file-icon,.str-chat__attachment-preview-list .str-chat__attachment-preview-file .str-chat__attachment-preview-file-icon`</th></tr><tr><td>`auto`</td></tr><tr><th>`.str-chat`</th></tr><tr><td>`auto`</td></tr></table>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | The width of the icon, only available in Angular v5+  |
-
-Defined in: [Icon](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Icon/Icon-layout.scss)
-
-## ImageCarousel - Only available in Angular SDK
-
-### Theme variables
-
-| Name                                       | Value(s)                                                                                    | Description                    |
-| ------------------------------------------ | ------------------------------------------------------------------------------------------- | ------------------------------ |
-| `--str-chat__image-carousel-stepper-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table> | The color of the stepper icon. |
-
-Defined in: [ImageCarousel](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ImageCarousel/ImageCarousel-theme.scss)
-
-## LoadingIndicator
-
-### Theme variables
-
-| Name                                  | Value(s)                                                                                       | Description                        |
-| ------------------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------- |
-| `--str-chat__loading-indicator-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color)`</td></tr></table> | The color of the loading indicator |
-
-Defined in: [LoadingIndicator](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/LoadingIndicator/LoadingIndicator-theme.scss)
-
-### Layout variables
-
-| Name                                 | Value(s)                                                                                                                                                                                                               | Description                                                      |
-| ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- |
-| `--str-chat__loading-indicator-size` | <table><tr><th>`.str-chat__attachment-preview-list`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 18)`</td></tr><tr><th>`.str-chat`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 15)`</td></tr></table> | The size of the loading indicator, only available in Angular v5+ |
-
-Defined in: [LoadingIndicator](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/LoadingIndicator/LoadingIndicator-layout.scss)
-
-## Message
-
-### Theme variables
-
-| Name                                                     | Value(s)                                                                                                    | Description                                                                                                  |
-| -------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
-| `--str-chat__message-border-radius`                      | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | The border radius used for the borders of the component                                                      |
-| `--str-chat__message-color`                              | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                 | The text/icon color of the component                                                                         |
-| `--str-chat__message-error-message-color`                | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__danger-color)`</td></tr></table>               | The text/icon color used for displaying error messages                                                       |
-| `--str-chat__message-secondary-color`                    | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>    | The text/icon color used for displaying items with less emphasis                                             |
-| `--str-chat__message-link-color`                         | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color)`</td></tr></table>              | The text color used for displaying links                                                                     |
-| `--str-chat__message-mention-color`                      | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color)`</td></tr></table>              | The text color used for displaying mentions                                                                  |
-| `--str-chat__message-status-color`                       | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color)`</td></tr></table>              | The text/icon color used for displaying message status                                                       |
-| `--str-chat__message-replies-count-color`                | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color)`</td></tr></table>              | The text color used for displaying the number of thread replies of a message                                 |
-| `--str-chat__message-background-color`                   | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                 | The background color of the component                                                                        |
-| `--str-chat__message-highlighted-background-color`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__message-highlight-color)`</td></tr></table>    | The background color of a jumped-to message                                                                  |
-| `--str-chat__message-border-block-start`                 | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Top border of the component                                                                                  |
-| `--str-chat__message-border-block-end`                   | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Bottom border of the component                                                                               |
-| `--str-chat__message-border-inline-start`                | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Left (right in RTL layout) border of the component                                                           |
-| `--str-chat__message-border-inline-end`                  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Right (left in RTL layout) border of the component                                                           |
-| `--str-chat__message-box-shadow`                         | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Box shadow applied to the component                                                                          |
-| `--str-chat__message-active-bacground-color`             | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                 | The background of the message component in active state                                                      |
-| `--str-chat__message-options-color`                      | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>    | The icon color used for displaying message options                                                           |
-| `--str-chat__message-options-hover-background-color`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__tertiary-surface-color)`</td></tr></table>     | The icon color used for displaying message options if a message option is clicked                            |
-| `--str-chat__message-options-border-radius`              | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-circle)`</td></tr></table>       | The border radius used for displaying message options                                                        |
-| `--str-chat__message-options-active-color`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color)`</td></tr></table>              | The background color used if a message option is hovered                                                     |
-| `--str-chat__message-bubble-border-radius`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-md)`</td></tr></table>           | The border radius used for the borders of the message bubble                                                 |
-| `--str-chat__message-bubble-color`                       | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                 | The text/icon of the message bubble                                                                          |
-| `--str-chat__message-bubble-background-color`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-surface-color)`</td></tr></table>    | The background of the message bubble                                                                         |
-| `--str-chat__own-message-bubble-color`                   | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__message-bubble-color)`</td></tr></table>       | The text/icon of the message bubble, if the message was sent by the user                                     |
-| `--str-chat__own-message-bubble-background-color`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-surface-color)`</td></tr></table>      | The background of the message bubble, if the message was sent by the user                                    |
-| `--str-chat__quoted-message-bubble-background-color`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-background-color)`</td></tr></table> | The background of the message bubble, if it's a quoted message                                               |
-| `--str-chat__message-bubble-border-block-start`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Top border of the message bubble                                                                             |
-| `--str-chat__message-bubble-border-block-end`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Bottom border of the message bubble                                                                          |
-| `--str-chat__message-bubble-border-inline-start`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Left (right in RTL layout) border of the message bubble                                                      |
-| `--str-chat__message-bubble-border-inline-end`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Right (left in RTL layout) border of the message bubble                                                      |
-| `--str-chat__message-bubble-box-shadow`                  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Box shadow applied to the message bubble                                                                     |
-| `--str-chat__deleted-message-border-radius`              | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-md)`</td></tr></table>           | The border radius used for the borders of a deleted message                                                  |
-| `--str-chat__deleted-message-color`                      | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>    | The text/icon of a deleted message                                                                           |
-| `--str-chat__deleted-message-background-color`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-surface-color)`</td></tr></table>    | The background of a deleted message                                                                          |
-| `--str-chat__deleted-message-border-block-start`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Top border of a deleted message                                                                              |
-| `--str-chat__deleted-message-border-block-end`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Bottom border of a deleted message                                                                           |
-| `--str-chat__deleted-message-border-inline-start`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Left (right in RTL layout) border of a deleted message                                                       |
-| `--str-chat__deleted-message-border-inline-end`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Right (left in RTL layout) border of a deleted message                                                       |
-| `--str-chat__deleted-message-box-shadow`                 | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Box shadow applied to a deleted message                                                                      |
-| `--str-chat__system-message-border-radius`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                           | The border radius used for the borders of a system message                                                   |
-| `--str-chat__system-message-color`                       | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>    | The text/icon of a system message                                                                            |
-| `--str-chat__system-message-background-color`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                 | The background of a system message                                                                           |
-| `--str-chat__system-message-border-block-start`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Top border of a system message                                                                               |
-| `--str-chat__system-message-border-block-end`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Bottom border of a system message                                                                            |
-| `--str-chat__system-message-border-inline-start`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Left (right in RTL layout) border of a system message                                                        |
-| `--str-chat__system-message-border-inline-end`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Right (left in RTL layout) border of a system message                                                        |
-| `--str-chat__system-message-box-shadow`                  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Box shadow applied to a system message                                                                       |
-| `--str-chat__date-separator-color`                       | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>    | Text color in a date separator                                                                               |
-| `--str-chat__date-separator-line-color`                  | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__disabled-color)`</td></tr></table>             | The line color applied to date separator                                                                     |
-| `--str-chat__date-separator-border-radius`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                           | The border radius used for the borders of a date separator                                                   |
-| `--str-chat__date-separator-background-color`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                 | The background color of a date separator                                                                     |
-| `--str-chat__date-separator-border-block-start`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Top border of a date separator                                                                               |
-| `--str-chat__date-separator-border-block-end`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Bottom border of a date separator                                                                            |
-| `--str-chat__date-separator-border-inline-start`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Left (right in RTL layout) border of a date separator                                                        |
-| `--str-chat__date-separator-border-inline-end`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Right (left in RTL layout) border of a date separator                                                        |
-| `--str-chat__date-separator-box-shadow`                  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Box shadow applied to a date separator                                                                       |
-| `--str-chat__translation-notice-color`                   | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>    | The text color of the translation notice that is displayed if a message is translated with auto-translation  |
-| `--str-chat__translation-notice-active-background-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__tertiary-surface-color)`</td></tr></table>     | The hover color of the translation notice that is displayed if a message is translated with auto-translation |
-
-Defined in: [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-theme.scss)
-
-### Layout variables
-
-| Name                                                         | Value(s)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Description                                                                      |
-| ------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
-| `--str-chat__message-options-button-size`                    | <table><tr><th>`.str-chat`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 26)`</td></tr></table>                                                                                                                                                                                                                                                                                                                                                                                                                                  | The width/height of the message options buttons                                  |
-| `--str-chat__message-max-width`                              | <table><tr><th>`.str-chat`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 480)`</td></tr><tr><th>`.str-chat__message.str-chat__message--has-attachment`</th></tr><tr><td>`var(--str-chat__message-with-attachment-max-width)`</td></tr><tr><th>`.str-chat__quoted-message-preview`</th></tr><tr><td>`var(--str-chat__quoted-message-max-width)`</td></tr><tr><th>`.str-chat__message-input .str-chat__quoted-message-preview`</th></tr><tr><td>`var(--str-chat__quoted-message-inside-message-input-max-width)`</td></tr></table> | The maximum allowed width of the message component                               |
-| `--str-chat__message-with-attachment-max-width`              | <table><tr><th>`.str-chat`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 300)`</td></tr></table>                                                                                                                                                                                                                                                                                                                                                                                                                                 | The maximum allowed width of the message component, if it has attachments        |
-| `--str-chat__quoted-message-max-width`                       | <table><tr><th>`.str-chat`</th></tr><tr><td>`calc(var(--str-chat__spacing-px) * 250)`</td></tr></table>                                                                                                                                                                                                                                                                                                                                                                                                                                 | The maximum allowed width of quoted messages inside the message component        |
-| `--str-chat__quoted-message-inside-message-input-max-width`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`calc( var(--str-chat__spacing-px) * 200 )`</td></tr></table>                                                                                                                                                                                                                                                                                                                                                                                                                               | The maximum allowed width of quoted messages inside the message input component  |
-| `--str-chat__quoted-message-inside-message-input-max-height` | <table><tr><th>`.str-chat`</th></tr><tr><td>`calc( var(--str-chat__quoted-message-inside-message-input-max-width) + calc(var(--str-chat__spacing-px) * 50) )`</td></tr></table>                                                                                                                                                                                                                                                                                                                                                         | The maximum allowed height of quoted messages inside the message input component |
-| `--str-chat__message-edited-timestamp-height`                | <table><tr><th>`.str-chat__message .str-chat__message-metadata .str-chat__message-edited-timestamp,.str-chat__quoted-message-preview .str-chat__message-metadata .str-chat__message-edited-timestamp`</th></tr><tr><td>`1rem`</td></tr></table>                                                                                                                                                                                                                                                                                         |                                                                                  |
-
-Defined in: [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-layout.scss)
-
-## MessageActionsBox
-
-### Theme variables
-
-| Name                                                          | Value(s)                                                                                                    | Description                                                                  |
-| ------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
-| `--str-chat__message-actions-box-border-radius`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-sm)`</td></tr></table>           | The border radius used for the borders of the component                      |
-| `--str-chat__message-actions-box-color`                       | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                 | The text/icon color of the component                                         |
-| `--str-chat__message-actions-box-background-color`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-background-color)`</td></tr></table> | The background color of the component                                        |
-| `--str-chat__message-actions-box-border-block-start`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Top border of the component                                                  |
-| `--str-chat__message-actions-box-border-block-end`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Bottom border of the component                                               |
-| `--str-chat__message-actions-box-border-inline-start`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Left (right in RTL layout) border of the component                           |
-| `--str-chat__message-actions-box-border-inline-end`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Right (left in RTL layout) border of the component                           |
-| `--str-chat__message-actions-box-box-shadow`                  | <table><tr><th>`.str-chat`</th></tr><tr><td>`0 0 8px var(--str-chat__box-shadow-color)`</td></tr></table>   | Box shadow applied to the component                                          |
-| `--str-chat__message-actions-box-item-border-radius`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                           | The border radius used for the borders of an item in the message actions box |
-| `--str-chat__message-actions-box-item-color`                  | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                 | The text/icon color of an item in the message actions box                    |
-| `--str-chat__message-actions-box-item-background-color`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                 | The background color of an item in the message actions box                   |
-| `--str-chat__message-actions-box-item-hover-background-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__secondary-surface-color )`</td></tr></table>  | The background color of an item in the message actions box when hovered      |
-| `--str-chat__message-actions-box-item-border-block-start`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Top border of an item in the message actions box                             |
-| `--str-chat__message-actions-box-item-border-block-end`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Bottom border of an item in the message actions box                          |
-| `--str-chat__message-actions-box-item-border-inline-start`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Left (right in RTL layout) border of an item in the message actions box      |
-| `--str-chat__message-actions-box-item-border-inline-end`      | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Right (left in RTL layout) border of an item in the message actions box      |
-| `--str-chat__message-actions-box-item-box-shadow`             | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Box shadow applied to an item in the message actions box                     |
-
-Defined in: [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss)
-
-## MessageBouncePrompt
-
-### Theme variables
-
-| Name                                                    | Value(s)                                                                                       | Description                                        |
-| ------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | -------------------------------------------------- |
-| `--str-chat__message-bounce-edit-button-color`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color)`</td></tr></table> | The text color used for the edit button            |
-| `--str-chat__message-bounce-send-button-color`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color)`</td></tr></table> | The text color used for the send button            |
-| `--str-chat__message-bounce-delete-button-color`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color)`</td></tr></table> | The text color used for the delete button          |
-| `--str-chat__message-bounce-button-background-color`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                    | The background color of the button                 |
-| `--str-chat__message-bounce-button-border-block-start`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                           | Top border of the button                           |
-| `--str-chat__message-bounce-button-border-block-end`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                           | Bottom border of the button                        |
-| `--str-chat__message-bounce-button-border-inline-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                           | Left (right in RTL layout) button of the component |
-| `--str-chat__message-bounce-button-border-inline-end`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                           | Right (left in RTL layout) button of the component |
-| `--str-chat__message-bounce-button-box-shadow`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                           | Box shadow applied to the button                   |
-
-Defined in: [MessageBouncePrompt](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageBouncePrompt/MessageBouncePrompt-theme.scss)
-
-## MessageInput
-
-### Theme variables
-
-| Name                                                                 | Value(s)                                                                                                    | Description                                                                                                        |
-| -------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
-| `--str-chat__message-input-border-radius`                            | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                           | The border radius of the component                                                                                 |
-| `--str-chat__message-input-color`                                    | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                 | The text/icon color of the component                                                                               |
-| `--str-chat__message-input-background-color`                         | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-background-color)`</td></tr></table> | The background color of the component                                                                              |
-| `--str-chat__message-input-border-block-start`                       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Top border of the component                                                                                        |
-| `--str-chat__message-input-border-block-end`                         | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Bottom border of the component                                                                                     |
-| `--str-chat__message-input-border-inline-start`                      | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Left (right in RTL layout) border of the component                                                                 |
-| `--str-chat__message-input-border-inline-end`                        | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Right (left in RTL layout) border of the component                                                                 |
-| `--str-chat__message-input-box-shadow`                               | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Box shadow applied to the component                                                                                |
-| `--str-chat__dropzone-container-color`                               | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__on-primary-color)`</td></tr></table>           | The text/icon color of the dropzone container                                                                      |
-| `--str-chat__dropzone-container-background-color`                    | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-overlay-color)`</td></tr></table>      | The background color of the dropzone container                                                                     |
-| `--str-chat__message-textarea-border-radius`                         | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-md)`</td></tr></table>           | The border radius used for the borders of the textarea                                                             |
-| `--str-chat__message-textarea-color`                                 | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                 | The text/icon color of the textarea                                                                                |
-| `--str-chat__message-textarea-background-color`                      | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                 | The background color of the textarea                                                                               |
-| `--str-chat__message-textarea-border-block-start`                    | <table><tr><th>`.str-chat`</th></tr><tr><td>`1px solid var(--str-chat__surface-color)`</td></tr></table>    | Top border of the textarea                                                                                         |
-| `--str-chat__message-textarea-border-block-end`                      | <table><tr><th>`.str-chat`</th></tr><tr><td>`1px solid var(--str-chat__surface-color)`</td></tr></table>    | Bottom border of the textarea                                                                                      |
-| `--str-chat__message-textarea-border-inline-start`                   | <table><tr><th>`.str-chat`</th></tr><tr><td>`1px solid var(--str-chat__surface-color)`</td></tr></table>    | Left (right in RTL layout) border of the textarea                                                                  |
-| `--str-chat__message-textarea-border-inline-end`                     | <table><tr><th>`.str-chat`</th></tr><tr><td>`1px solid var(--str-chat__surface-color)`</td></tr></table>    | Right (left in RTL layout) border of the textarea                                                                  |
-| `--str-chat__message-textarea-box-shadow`                            | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Box shadow applied to the textarea                                                                                 |
-| `--str-chat__message-send-border-radius`                             | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-circle)`</td></tr></table>       | The border radius used for the borders of the send button                                                          |
-| `--str-chat__message-send-color`                                     | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color)`</td></tr></table>              | The text/icon color of the send button                                                                             |
-| `--str-chat__message-send-background-color`                          | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                 | The background color of the send button                                                                            |
-| `--str-chat__message-send-border-block-start`                        | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                           | Top border of the send button                                                                                      |
-| `--str-chat__message-send-border-block-end`                          | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                           | Bottom border of the send button                                                                                   |
-| `--str-chat__message-send-border-inline-start`                       | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                           | Left (right in RTL layout) border of the send button                                                               |
-| `--str-chat__message-send-border-inline-end`                         | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                           | Right (left in RTL layout) border of the send button                                                               |
-| `--str-chat__message-send-box-shadow`                                | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Box shadow applied to the send button                                                                              |
-| `--str-chat__message-send-disabled-color`                            | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__disabled-color)`</td></tr></table>             | The color of the send button in disabled state                                                                     |
-| `--str-chat__message-send-disabled-background-color`                 | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__disabled-color)`</td></tr></table>             | The background color of the send button in disabled state                                                          |
-| `--str-chat__start-recording-audio-button-border-radius`             | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-circle)`</td></tr></table>       | The border radius used for the borders of the audio recording button                                               |
-| `--str-chat__start-recording-audio-button-color`                     | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>    | The text/icon color of the audio recording button                                                                  |
-| `--str-chat__start-recording-audio-button-background-color`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                 | The background color of the audio recording button                                                                 |
-| `--str-chat__start-recording-audio-button-border-block-start`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                           | Top border of the audio recording button                                                                           |
-| `--str-chat__start-recording-audio-button-border-block-end`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                           | Bottom border of the audio recording button                                                                        |
-| `--str-chat__start-recording-audio-button-border-inline-start`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                           | Left (right in RTL layout) border of the audio recording button                                                    |
-| `--str-chat__start-recording-audio-button-border-inline-end`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                           | Right (left in RTL layout) border of the audio recording button                                                    |
-| `--str-chat__start-recording-audio-button-box-shadow`                | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Box shadow applied to the audio recording button                                                                   |
-| `--str-chat__start-recording-audio-button-disabled-color`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__disabled-color)`</td></tr></table>             | The color of the audio recording button in disabled state                                                          |
-| `--str-chat__start-recording-audio-button-disabled-background-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                 | The background color of the audio recording button in disabled state                                               |
-| `--str-chat__message-input-tools-border-radius`                      | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-circle)`</td></tr></table>       | The border radius used for the borders of the tool buttons of the message input (such as attachment upload button) |
-| `--str-chat__message-input-tools-color`                              | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>    | The text/icon color of the tool buttons of the message input (such as attachment upload button)                    |
-| `--str-chat__message-input-tools-background-color`                   | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                 | The background color of the tool buttons of the message input (such as attachment upload button)                   |
-| `--str-chat__message-input-tools-border-block-start`                 | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                           | Top border of the tool buttons of the message input (such as attachment upload button)                             |
-| `--str-chat__message-input-tools-border-block-end`                   | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                           | Bottom border of the tool buttons of the message input (such as attachment upload button)                          |
-| `--str-chat__message-input-tools-border-inline-start`                | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                           | Left (right in RTL layout) border of the tool buttons of the message input (such as attachment upload button)      |
-| `--str-chat__message-input-tools-border-inline-end`                  | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                           | Right (left in RTL layout) border of the tool buttons of the message input (such as attachment upload button)      |
-| `--str-chat__message-input-tools-box-shadow`                         | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Box shadow applied to the tool buttons of the message input (such as attachment upload button)                     |
-| `--str-chat__message-input-not-allowed-color`                        | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__disabled-color)`</td></tr></table>             | Thex text color of the message that is displayed when the use can't send messages                                  |
-| `--str-chat__cooldown-border-radius`                                 | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-circle)`</td></tr></table>       | The border radius used for the borders of the cooldown timer                                                       |
-| `--str-chat__cooldown-color`                                         | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__on-disabled-color)`</td></tr></table>          | The text/icon color of the cooldown timer                                                                          |
-| `--str-chat__cooldown-background-color`                              | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__disabled-color)`</td></tr></table>             | The background color of the cooldown timer                                                                         |
-| `--str-chat__cooldown-border-block-start`                            | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                           | Top border of the cooldown timer                                                                                   |
-| `--str-chat__cooldown-border-block-end`                              | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                           | Bottom border of the cooldown timer                                                                                |
-| `--str-chat__cooldown-border-inline-start`                           | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                           | Left (right in RTL layout) border of the cooldown timer                                                            |
-| `--str-chat__cooldown-border-inline-end`                             | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                           | Right (left in RTL layout) border of the cooldown timer                                                            |
-| `--str-chat__cooldown-box-shadow`                                    | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Box shadow applied to the cooldown timer                                                                           |
-
-Defined in: [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageInput/MessageInput-theme.scss)
-
-### Layout variables
-
-| Name                                             | Value(s)                                                                  | Description                                           |
-| ------------------------------------------------ | ------------------------------------------------------------------------- | ----------------------------------------------------- |
-| `--str-chat__dropzone-container-backdrop-filter` | <table><tr><th>`.str-chat`</th></tr><tr><td>`blur(3px)`</td></tr></table> | The backdrop filter applied to the dropzone container |
-
-Defined in: [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageInput/MessageInput-layout.scss)
-
-## MessageList
-
-### Theme variables
-
-| Name                                                               | Value(s)                                                                                                                   | Description                                                                                |
-| ------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
-| `--str-chat__message-list-border-radius`                           | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                                          | The border radius used for the borders of the component                                    |
-| `--str-chat__message-list-color`                                   | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                                | The text/icon color of the component                                                       |
-| `--str-chat__message-list-background-color`                        | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__background-color)`</td></tr></table>                          | The background color of the component                                                      |
-| `--str-chat__message-list-box-shadow`                              | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                       | Box shadow applied to the component                                                        |
-| `--str-chat__message-list-border-block-start`                      | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                       | Top border of the component                                                                |
-| `--str-chat__message-list-border-block-end`                        | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                       | Bottom border of the component                                                             |
-| `--str-chat__message-list-border-inline-start`                     | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                       | Left (right in RTL layout) border of the component                                         |
-| `--str-chat__message-list-border-inline-end`                       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                       | Right (left in RTL layout) border of the component                                         |
-| `--str-chat__jump-to-latest-message-border-radius`                 | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__circle-fab-border-radius)`</td></tr></table>                  | The border radius used for the borders of the jump to latest message button                |
-| `--str-chat__jump-to-latest-message-color`                         | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__circle-fab-color)`</td></tr></table>                          | The text/icon color of the jump to latest message button                                   |
-| `--str-chat__jump-to-latest-message-background-color`              | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__circle-fab-background-color)`</td></tr></table>               | The background color of the jump to latest message button                                  |
-| `--str-chat__jump-to-latest-message-pressed-background-color`      | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__circle-fab-pressed-background-color )`</td></tr></table>     | The background color of the jump to latest message button in pressed state                 |
-| `--str-chat__jump-to-latest-message-box-shadow`                    | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__circle-fab-box-shadow)`</td></tr></table>                     | Box shadow applied to the jump to latest message button                                    |
-| `--str-chat__jump-to-latest-message-border-block-start`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__circle-fab-border-block-start )`</td></tr></table>           | Top border of the jump to latest message button                                            |
-| `--str-chat__jump-to-latest-message-border-block-end`              | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__circle-fab-border-block-end)`</td></tr></table>               | Bottom border of the jump to latest message button                                         |
-| `--str-chat__jump-to-latest-message-border-inline-start`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__circle-fab-border-inline-start )`</td></tr></table>          | Left (right in RTL layout) border of the jump to latest message button                     |
-| `--str-chat__jump-to-latest-message-border-inline-end`             | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__circle-fab-border-inline-end )`</td></tr></table>            | Right (left in RTL layout) border of the jump to latest message button                     |
-| `--str-chat__jump-to-latest-message-unread-count-background-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__jump-to-latest-message-color )`</td></tr></table>            | The background color of the unread messages count on the jump to latest message button     |
-| `--str-chat__jump-to-latest-message-unread-count-color`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__jump-to-latest-message-background-color )`</td></tr></table> | The text/icon color of the unread messages count on the jump to latest message button      |
-| `--str-chat__thread-head-start-color`                              | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>                   | The color used for displaying thread replies and thread separator at the start of a thread |
-| `--str-chat__thread-head-start-border-block-end-color`             | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__surface-color)`</td></tr></table>                             | The color used for the separator below the first message in a thread                       |
-
-Defined in: [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageList/MessageList-theme.scss)
-
-## MessageNotification - Only available in React SDK
-
-### Theme variables
-
-| Name                                                   | Value(s)                                                                                          | Description                                             |
-| ------------------------------------------------------ | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
-| `--str-chat__message-notification-background-color`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__primary-color)`</td></tr></table>    | The background color of the component                   |
-| `--str-chat__message-notification-border-block-start`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                              | Top border of the component                             |
-| `--str-chat__message-notification-border-block-end`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                              | Bottom border of the component                          |
-| `--str-chat__message-notification-border-inline-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                              | Left (right in RTL layout) border of the component      |
-| `--str-chat__message-notification-border-inline-end`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                              | Right (left in RTL layout) border of the component      |
-| `--str-chat__message-notification-border-radius`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`50px`</td></tr></table>                              | The border radius used for the borders of the component |
-| `--str-chat__message-notification-box-shadow`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                              | Box shadow applied to the component                     |
-| `--str-chat__message-notification-color`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__on-primary-color)`</td></tr></table> | The text/icon color of the component                    |
-
-Defined in: [MessageNotification](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageNotification/MessageNotification-theme.scss)
-
-## MessageReactions
-
-### Theme variables
-
-| Name                                                     | Value(s)                                                                                                              | Description                                                                        |
-| -------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
-| `--str-chat__message-reactions-border-radius`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                  | The border radius used for the borders of the component                            |
-| `--str-chat__message-reactions-color`                    | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                           | The text/icon color of the component                                               |
-| `--str-chat__message-reactions-background-color`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                           | The background color of the component                                              |
-| `--str-chat__message-reactions-border-block-start`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                  | Top border of the component                                                        |
-| `--str-chat__message-reactions-border-block-end`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                  | Bottom border of the component                                                     |
-| `--str-chat__message-reactions-border-inline-start`      | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                  | Left (right in RTL layout) border of the component                                 |
-| `--str-chat__message-reactions-border-inline-end`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                  | Right (left in RTL layout) border of the component                                 |
-| `--str-chat__message-reactions-box-shadow`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                  | Box shadow applied to the component                                                |
-| `--str-chat__message-reaction-border-radius`             | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-xs)`</td></tr></table>                     | The border radius used for the borders of a message reaction                       |
-| `--str-chat__message-reaction-color`                     | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                           | The text/icon color of a message reaction                                          |
-| `--str-chat__message-reaction-background-color`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__tertiary-surface-color)`</td></tr></table>               | The background color of a message reaction                                         |
-| `--str-chat__message-reaction-border-block-start`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                  | Top border of a message reaction                                                   |
-| `--str-chat__message-reaction-border-block-end`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                  | Bottom border of a message reaction                                                |
-| `--str-chat__message-reaction-border-inline-start`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                  | Left (right in RTL layout) border of a message reaction                            |
-| `--str-chat__message-reaction-border-inline-end`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                  | Right (left in RTL layout) border of a message reaction                            |
-| `--str-chat__message-reaction-box-shadow`                | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                                  | Box shadow applied to a message reaction                                           |
-| `--str-chat__own-message-reaction-color`                 | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                           | The text/icon color of a message reaction, if the user reacted with that reaction  |
-| `--str-chat__own-message-reaction-background-color`      | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__primary-surface-color-low-emphasis )`</td></tr></table> | The background color of a message reaction, if the user reacted with that reaction |
-| `--str-chat__messsage-reactions-details--selected-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`solid var(--str-chat__primary-color)`</td></tr></table>                  |                                                                                    |
-
-Defined in: [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageReactions/MessageReactions-theme.scss)
-
-### Layout variables
-
-| Name                            | Value(s)                                                                                                                             | Description |
-| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ----------- |
-| `--str-chat__stream-emoji-size` | <table><tr><th>`.str-chat__message-reactions-details .str-chat__message-reaction-emoji-big`</th></tr><tr><td>`1em`</td></tr></table> |             |
-
-Defined in: [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageReactions/MessageReactions-layout.scss)
-
-## MessageReactionsSelector
-
-### Theme variables
-
-| Name                                                             | Value(s)                                                                                                      | Description                                             |
-| ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
-| `--str-chat__message-reactions-options-border-radius`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-circle)`</td></tr></table>         | The border radius used for the borders of the component |
-| `--str-chat__message-reactions-options-color`                    | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                   | The text/icon color of the component                    |
-| `--str-chat__message-reactions-options-background-color`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__secondary-background-color )`</td></tr></table> | The background color of the component                   |
-| `--str-chat__message-reactions-options-border-block-start`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Top border of the component                             |
-| `--str-chat__message-reactions-options-border-block-end`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Bottom border of the component                          |
-| `--str-chat__message-reactions-options-border-inline-start`      | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Left (right in RTL layout) border of the component      |
-| `--str-chat__message-reactions-options-border-inline-end`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Right (left in RTL layout) border of the component      |
-| `--str-chat__message-reactions-options-box-shadow`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`0 0 8px var(--str-chat__box-shadow-color)`</td></tr></table>     | Box shadow applied to the component                     |
-| `--str-chat__message-reactions-option-border-radius`             | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-md)`</td></tr></table>             | The border radius used for the borders of the component |
-| `--str-chat__message-reactions-option-color`                     | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                   | The text/icon color of the component                    |
-| `--str-chat__message-reactions-option-background-color`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__secondary-background-color )`</td></tr></table> | The background color of the component                   |
-| `--str-chat__message-reactions-option-hover-background-color`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__primary-surface-color )`</td></tr></table>      | The background color of the component when hovered      |
-| `--str-chat__message-reactions-option-selected-background-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var( --str-chat__primary-color-low-emphasis )`</td></tr></table> | The background color of the component when selected     |
-| `--str-chat__message-reactions-option-border-block-start`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Top border of the component                             |
-| `--str-chat__message-reactions-option-border-block-end`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Bottom border of the component                          |
-| `--str-chat__message-reactions-option-border-inline-start`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Left (right in RTL layout) border of the component      |
-| `--str-chat__message-reactions-option-border-inline-end`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Right (left in RTL layout) border of the component      |
-| `--str-chat__message-reactions-option-box-shadow`                | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Box shadow applied to the component                     |
-
-Defined in: [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss)
-
-## Modal
-
-### Theme variables
-
-| Name                                        | Value(s)                                                                                                    | Description                                                                                                      |
-| ------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
-| `--str-chat__modal-border-radius`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-sm)`</td></tr></table>           | The border radius used for the borders of the content area of the component of the content area of the component |
-| `--str-chat__modal-color`                   | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                 | The text/icon color of the content area of the component                                                         |
-| `--str-chat__modal-background-color`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-background-color)`</td></tr></table> | The background color of the content area of the component                                                        |
-| `--str-chat__modal-overlay-color`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-overlay-color)`</td></tr></table>    | The overlay color of the component                                                                               |
-| `--str-chat__modal-overlay-backdrop-filter` | <table><tr><th>`.str-chat`</th></tr><tr><td>`blur(3px)`</td></tr></table>                                   | The backdrop filter applied to the component                                                                     |
-| `--str-chat__modal-border-block-start`      | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Top border of the content area of the component                                                                  |
-| `--str-chat__modal-border-block-end`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Bottom border of the content area of the component                                                               |
-| `--str-chat__modal-border-inline-start`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Left (right in RTL layout) border of the content area of the component                                           |
-| `--str-chat__modal-border-inline-end`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Right (left in RTL layout) border of the content area of the component                                           |
-| `--str-chat__modal-box-shadow`              | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Box shadow applied to the content area of the component                                                          |
-| `--str-chat__modal-close-icon-background`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>    | The background color of the close button                                                                         |
-| `--str-chat__modal-close-icon-color`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__on-disabled-color)`</td></tr></table>          | The icon color of the close button                                                                               |
-
-Defined in: [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Modal/Modal-theme.scss)
-
-## Notification
-
-### Theme variables
-
-| Name                                           | Value(s)                                                                                                         | Description                                             |
-| ---------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
-| `--str-chat__notification-border-radius`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-sm)`</td></tr></table>                | The border radius used for the borders of the component |
-| `--str-chat__notification-color`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__opaque-surface-text-color)`</td></tr></table>       | The text/icon color of the component                    |
-| `--str-chat__notification-background-color`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__opaque-surface-background-color)`</td></tr></table> | The background color of the component                   |
-| `--str-chat__notification-border-block-start`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                             | Top border of the component                             |
-| `--str-chat__notification-border-block-end`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                             | Bottom border of the component                          |
-| `--str-chat__notification-border-inline-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                             | Left (right in RTL layout) border of the component      |
-| `--str-chat__notification-border-inline-end`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                             | Right (left in RTL layout) border of the component      |
-| `--str-chat__notification-box-shadow`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`0 0 8px var(--str-chat__box-shadow-color)`</td></tr></table>        | Box shadow applied to the component                     |
-
-Defined in: [Notification](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Notification/Notification-theme.scss)
-
-## NotificationList
-
-### Theme variables
-
-| Name                                                | Value(s)                                                                                                      | Description                                             |
-| --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
-| `--str-chat__notification-list-border-radius`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | The border radius used for the borders of the component |
-| `--str-chat__notification-list-color`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__notification-list-text-color)`</td></tr></table> | The text/icon color of the component                    |
-| `--str-chat__notification-list-background-color`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`transparent`</td></tr></table>                                   | The background color of the component                   |
-| `--str-chat__notification-list-border-block-start`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Top border of the component                             |
-| `--str-chat__notification-list-border-block-end`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Bottom border of the component                          |
-| `--str-chat__notification-list-border-inline-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Left (right in RTL layout) border of the component      |
-| `--str-chat__notification-list-border-inline-end`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Right (left in RTL layout) border of the component      |
-| `--str-chat__notification-list-box-shadow`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                          | Box shadow applied to the component                     |
-
-Defined in: [NotificationList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/NotificationList/NotificationList-theme.scss)
-
-## Thread
-
-### Theme variables
-
-| Name                                            | Value(s)                                                                                                    | Description                                                                    |
-| ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ |
-| `--str-chat__thread-border-radius`              | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                           | The border radius used for the borders of the component                        |
-| `--str-chat__thread-color`                      | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                 | The text/icon color of the component                                           |
-| `--str-chat__thread-background-color`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-background-color)`</td></tr></table> | The background color of the component                                          |
-| `--str-chat__thread-border-block-start`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Top border of the component                                                    |
-| `--str-chat__thread-border-block-end`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Bottom border of the component                                                 |
-| `--str-chat__thread-border-inline-start`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`1px solid var(--str-chat__surface-color)`</td></tr></table>    | Left (right in RTL layout) border of the component                             |
-| `--str-chat__thread-border-inline-end`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Right (left in RTL layout) border of the component                             |
-| `--str-chat__thread-box-shadow`                 | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Box shadow applied to the component                                            |
-| `--str-chat__thread-header-border-radius`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                           | The border radius used for the borders of the thread header                    |
-| `--str-chat__thread-header-color`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                 | The text/icon color of the thread header                                       |
-| `--str-chat__thread-header-background-color`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-background-color)`</td></tr></table> | The background color of the thread header                                      |
-| `--str-chat__thread-header-border-block-start`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Top border of the thread header                                                |
-| `--str-chat__thread-header-border-block-end`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Bottom border of the thread header                                             |
-| `--str-chat__thread-header-border-inline-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Left (right in RTL layout) border of the thread header                         |
-| `--str-chat__thread-header-border-inline-end`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Right (left in RTL layout) border of the thread header                         |
-| `--str-chat__thread-header-box-shadow`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Box shadow applied to the thread header                                        |
-| `--str-chat__thread-header-info-color`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table>    | The text/icon color used to display less emphasized text in the channel header |
-
-Defined in: [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Thread/Thread-theme.scss)
-
-## Tooltip
-
-### Theme variables
-
-| Name                                      | Value(s)                                                                                                    | Description                                             |
-| ----------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
-| `--str-chat__tooltip-border-radius`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__border-radius-xs)`</td></tr></table>           | The border radius used for the borders of the component |
-| `--str-chat__tooltip-color`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>                 | The text/icon color of the component                    |
-| `--str-chat__tooltip-background-color`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__secondary-background-color)`</td></tr></table> | The background color of the component                   |
-| `--str-chat__tooltip-border-block-start`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Top border of the component                             |
-| `--str-chat__tooltip-border-block-end`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Bottom border of the component                          |
-| `--str-chat__tooltip-border-inline-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Left (right in RTL layout) border of the component      |
-| `--str-chat__tooltip-border-inline-end`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                        | Right (left in RTL layout) border of the component      |
-| `--str-chat__tooltip-box-shadow`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`0 0 20px var(--str-chat__box-shadow-color)`</td></tr></table>  | Box shadow applied to the component                     |
-
-Defined in: [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Tooltip/Tooltip-theme.scss)
-
-## TypingIndicator
-
-### Theme variables
-
-| Name                                                | Value(s)                                                                                                 | Description                                                   |
-| --------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
-| `--str-chat__typing-indicator-border-radius`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                     | The border radius used for the borders of the component       |
-| `--str-chat__typing-indicator-color`                | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-low-emphasis-color)`</td></tr></table> | The text/icon color of the component                          |
-| `--str-chat__typing-indicator-background-color`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__overlay-color)`</td></tr></table>           | The background color of the component                         |
-| `--str-chat__typing-indicator-border-block-start`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                     | Top border of the component                                   |
-| `--str-chat__typing-indicator-border-block-end`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                     | Bottom border of the component                                |
-| `--str-chat__typing-indicator-border-inline-start`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                     | Left (right in RTL layout) border of the component            |
-| `--str-chat__typing-indicator-border-inline-end`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                     | Right (left in RTL layout) border of the component            |
-| `--str-chat__typing-indicator-box-shadow`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                                     | Box shadow applied to the component                           |
-| `--str-chat__typing-indicator-dot-background-color` | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>              | Background color of the animated dots in the typing indicator |
-
-Defined in: [TypingIndicator](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/TypingIndicator/TypingIndicator-theme.scss)
-
-## VirtualizedMessageList - Only available in React SDK
-
-### Theme variables
-
-| Name                                           | Value(s)                                                                                          | Description                                             |
-| ---------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
-| `--str-chat__virtual-list-border-radius`       | <table><tr><th>`.str-chat`</th></tr><tr><td>`0`</td></tr></table>                                 | The border radius used for the borders of the component |
-| `--str-chat__virtual-list-color`               | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__text-color)`</td></tr></table>       | The text/icon color of the component                    |
-| `--str-chat__virtual-list-background-color`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`var(--str-chat__background-color)`</td></tr></table> | The background color of the component                   |
-| `--str-chat__virtual-list-box-shadow`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                              | Box shadow applied to the component                     |
-| `--str-chat__virtual-list-border-block-start`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                              | Top border of the component                             |
-| `--str-chat__virtual-list-border-block-end`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                              | Bottom border of the component                          |
-| `--str-chat__virtual-list-border-inline-start` | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                              | Left (right in RTL layout) border of the component      |
-| `--str-chat__virtual-list-border-inline-end`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`none`</td></tr></table>                              | Right (left in RTL layout) border of the component      |
-
-Defined in: [VirtualizedMessageList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/VirtualizedMessageList/VirtualizedMessageList-theme.scss)
diff --git a/docusaurus/angular_versioned_docs/version-4/theming/global-variables.mdx b/docusaurus/angular_versioned_docs/version-4/theming/global-variables.mdx
deleted file mode 100644
index a822b05d..00000000
--- a/docusaurus/angular_versioned_docs/version-4/theming/global-variables.mdx
+++ /dev/null
@@ -1,134 +0,0 @@
----
-id: global-variables
-sidebar_position: 2
-title: Global variables
-keywords: [v2, theme-v2, theming-v2, theming, global variables]
----
-
-import SDKSpecific from "./SDKSpecific";
-import V2Warning from "./V2Warning";
-
-<SDKSpecific name='react'>
-
-:::info
-
-<V2Warning themingAndCSSPath="../../customization/css_and_theming" />
-
-:::
-
-</SDKSpecific>
-
-CSS variables are the easiest way to customize the theme. The variables are organized into two layers:
-
-- Global
-- Component
-
-This page contains information about the global variables.
-
-Global variables can be grouped into the following categories:
-
-- Theme: colors, typography and border radiuses
-- Layout: spacing (padding and margin) and sizing
-
-You can read about each category in detail in the tables below.
-
-## Theme variables
-
-### Colors
-
-| Name                                             | Value(s)                                                                                                                                                                                                 | Description                                                                                                        | Used in                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
-| ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--str-chat__primary-color`                      | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__blue500)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__blue400)`</td></tr></table>     | Used for emphasis, brands can inject their main color using this variable                                          | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [AudioRecorder](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [Avatar](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Avatar/Avatar-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/CTAButton/CTAButton-theme.scss), [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss), [LinkPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/LinkPreview/LinkPreview-theme.scss), [LoadingIndicator](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/LoadingIndicator/LoadingIndicator-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-theme.scss), [MessageBouncePrompt](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageBouncePrompt/MessageBouncePrompt-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [MessageNotification](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageNotification/MessageNotification-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| `--str-chat__primary-overlay-color`              | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`rgba(0, 95, 255, 0.6)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`rgba(51, 126, 255, 0.6)`</td></tr></table>         | Used for emphasised overlays - color of --str-chat\_\_primary-color with alpha channel                             | [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageInput/MessageInput-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| `--str-chat__primary-color-low-emphasis`         | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__blue300)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__blue700)`</td></tr></table>     | Used for emphasis, brands can inject their main color using this variable, it has less emphasis than primary color | [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
-| `--str-chat__active-primary-color`               | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__blue600)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__blue600)`</td></tr></table>     | Used to indicate that a UI element with primary color is in an active state                                        | [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/CTAButton/CTAButton-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
-| `--str-chat__on-primary-color`                   | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr></table>       | If the primary color is used as a background, text/icons are displayed in this color                               | [AudioRecorder](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Avatar](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Avatar/Avatar-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/CTAButton/CTAButton-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageNotification](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageNotification/MessageNotification-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
-| `--str-chat__background-color`                   | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey950)`</td></tr></table>      | Used as a background color for the main chat UI components                                                         | [AudioRecorder](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Channel/Channel-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageList/MessageList-theme.scss), [VirtualizedMessageList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/VirtualizedMessageList/VirtualizedMessageList-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
-| `--str-chat__secondary-background-color`         | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey900)`</td></tr></table>      | Used as a background color for the main chat UI components                                                         | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Modal/Modal-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Thread/Thread-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Tooltip/Tooltip-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
-| `--str-chat__primary-surface-color`              | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__blue100)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__blue900)`</td></tr></table>     | Used as a background color to give emphasis, but less vibrant than the primary color                               | [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
-| `--str-chat__primary-surface-color-low-emphasis` | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__blue50)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__blue950)`</td></tr></table>      | Used as a background color to give emphasis, but less vibrant than the primary surface color                       | [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageReactions/MessageReactions-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-| `--str-chat__surface-color`                      | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey300)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey700)`</td></tr></table>     | A neutral color used to give emphasis to different surfaces                                                        | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageList/MessageList-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Thread/Thread-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| `--str-chat__secondary-surface-color`            | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey200)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey800)`</td></tr></table>     | A neutral color used to give emphasis to different surfaces                                                        | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [BaseImage](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/BaseImage/BaseImage-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-| `--str-chat__tertiary-surface-color`             | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey100)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey900)`</td></tr></table>     | A neutral color used to give emphasis to different surfaces                                                        | [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageReactions/MessageReactions-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
-| `--str-chat__text-color`                         | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey950)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr></table>      | The main color used for texts/icons                                                                                | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [BaseImage](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/BaseImage/BaseImage-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Channel/Channel-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [Icon](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Icon/Icon-theme.scss), [ImageCarousel](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ImageCarousel/ImageCarousel-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageList/MessageList-theme.scss), [VirtualizedMessageList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/VirtualizedMessageList/VirtualizedMessageList-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Modal/Modal-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Thread/Thread-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Tooltip/Tooltip-theme.scss), [TypingIndicator](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/TypingIndicator/TypingIndicator-theme.scss) |
-| `--str-chat__text-low-emphasis-color`            | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey500)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey500)`</td></tr></table>     | Used for texts/icons that need less emphasis                                                                       | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [AudioRecorder](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Channel/Channel-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelList/ChannelList-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss), [LinkPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/LinkPreview/LinkPreview-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageList/MessageList-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Modal/Modal-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Thread/Thread-theme.scss), [TypingIndicator](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/TypingIndicator/TypingIndicator-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
-| `--str-chat__disabled-color`                     | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey400)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey600)`</td></tr></table>     | Used for displaying disabled UI elements (typically buttons)                                                       | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [BaseImage](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/BaseImage/BaseImage-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Channel/Channel-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/CTAButton/CTAButton-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageInput/MessageInput-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| `--str-chat__on-disabled-color`                  | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr></table>       | Used for text/icon colors if disabled color is used as a background color                                          | [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/CTAButton/CTAButton-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Modal/Modal-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
-| `--str-chat__danger-color`                       | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__red400)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__red600)`</td></tr></table>       | Used for error messages, and destructive actions                                                                   | [AudioRecorder](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Icon](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Icon/Icon-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
-| `--str-chat__message-highlight-color`            | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__yellow100)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__yellow900)`</td></tr></table> | The background color used to highlight a message when jumping to a message. Only available in React SDK.           | [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| `--str-chat__unread-badge-color`                 | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__red400)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__red400)`</td></tr></table>       | Used for displaying the unread badge                                                                               | [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| `--str-chat__on-unread-badge-color`              | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr></table>       | Used for text/icon colors if unread badge color is used as a background color                                      | [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| `--str-chat__overlay-color`                      | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`rgba(252, 252, 252, 0.9)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`rgba(0, 0, 0, 0.7)`</td></tr></table>           | The background color used for overlays                                                                             | [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [TypingIndicator](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/TypingIndicator/TypingIndicator-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
-| `--str-chat__secondary-overlay-color`            | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`rgba(0, 0, 0, 0.2)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`rgba(0, 0, 0, 0.4)`</td></tr></table>                 | The background color used for subtle overlays                                                                      | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Modal/Modal-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
-| `--str-chat__secondary-overlay-text-color`       | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr></table>       | The text/icon color used on subtle overlays                                                                        | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
-| `--str-chat__opaque-surface-background-color`    | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`rgba(0, 0, 0, 0.8)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`rgba(250, 250, 250, 0.85)`</td></tr></table>          | The background color used for opaque surfaces                                                                      | [Notification](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Notification/Notification-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| `--str-chat__opaque-surface-text-color`          | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__grey50)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__grey900)`</td></tr></table>      | The text color used on opaque surfaces                                                                             | [Notification](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Notification/Notification-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| `--str-chat__box-shadow-color`                   | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`rgba(0, 0, 0, 0.18)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`rgba(0, 0, 0, 0.8)`</td></tr></table>                | If a component has a box shadow applied to it, this will be the color used for the shadow                          | [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Notification](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Notification/Notification-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Tooltip/Tooltip-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
-| `--str-chat__info-color`                         | <table><tr><th>`.str-chat,.str-chat__theme-light`</th></tr><tr><td>`var(--str-chat__green500)`</td></tr><tr><th>`.str-chat__theme-dark`</th></tr><tr><td>`var(--str-chat__green500)`</td></tr></table>   | Used for online indicator and success messages                                                                     | [Avatar](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Avatar/Avatar-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
-
-### Typography
-
-| Name                                | Value(s)                                                                                                                                                                                | Description                                                                                         | Used in                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
-| ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--str-chat__font-family`           | <table><tr><th>`.str-chat`</th></tr><tr><td>`-apple-system , BlinkMacSystemFont , Segoe UI , Roboto , Oxygen-Sans , Ubuntu , Cantarell , Helvetica Neue , sans-serif`</td></tr></table> | The font used in the chat, by default, we use [preinstalled OS fonts](https://systemfontstack.com/) | [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| `--str-chat__caption-text`          | <table><tr><th>`.str-chat`</th></tr><tr><td>`0.75 rem/1.3 var(--str-chat__font-family)`</td></tr></table>                                                                               | The font used for caption texts                                                                     | [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [LinkPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/LinkPreview/LinkPreview-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageList/MessageList-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [MessageNotification](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageNotification/MessageNotification-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Tooltip/Tooltip-theme.scss)                                                                                                                                                                                                                                                                                                          |
-| `--str-chat__caption-medium-text`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`500 0.75 rem/1.3 var(--str-chat__font-family)`</td></tr></table>                                                                           | The font used for caption texts with emphasize                                                      | [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| `--str-chat__caption-strong-text`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`700 0.75 rem/1.3 var(--str-chat__font-family)`</td></tr></table>                                                                           | The font used for caption texts with emphasize                                                      | [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| `--str-chat__body-text`             | <table><tr><th>`.str-chat`</th></tr><tr><td>`0.875 rem/1.2 var(--str-chat__font-family)`</td></tr></table>                                                                              | The font used for body texts                                                                        | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Thread/Thread-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| `--str-chat__body-medium-text`      | <table><tr><th>`.str-chat`</th></tr><tr><td>`500 0.875 rem/1.2 var(--str-chat__font-family)`</td></tr></table>                                                                          | The font used for body texts with emphasize                                                         | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [EditMessageForm](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss), [LinkPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/LinkPreview/LinkPreview-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-theme.scss), [MessageBouncePrompt](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageBouncePrompt/MessageBouncePrompt-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| `--str-chat__body2-text`            | <table><tr><th>`.str-chat`</th></tr><tr><td>`0.9375 rem/1.2 var(--str-chat__font-family)`</td></tr></table>                                                                             | The font used for body texts                                                                        | [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| `--str-chat__body2-medium-text`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`500 0.9375 rem/1.2 var(--str-chat__font-family)`</td></tr></table>                                                                         | The font used for body texts with emphasize                                                         | [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| `--str-chat__subtitle-text`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`1 rem/1.1.25 var(--str-chat__font-family)`</td></tr></table>                                                                               | The font used for subtitle texts                                                                    | [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/CTAButton/CTAButton-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageList/MessageList-theme.scss), [VirtualizedMessageList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/VirtualizedMessageList/VirtualizedMessageList-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [Notification](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Notification/Notification-theme.scss) |
-| `--str-chat__subtitle-medium-text`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`500 1 rem/1.25 var(--str-chat__font-family)`</td></tr></table>                                                                             | The font used for subtitle texts with emphasize                                                     | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [ChannelHeader](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [Thread](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Thread/Thread-theme.scss)                                                                                                                                                                                                                                                                                  |
-| `--str-chat__subtitle2-text`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`1.25 rem/1.2 var(--str-chat__font-family)`</td></tr></table>                                                                               | The font used for subtitle texts                                                                    | [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| `--str-chat__subtitle2-medium-text` | <table><tr><th>`.str-chat`</th></tr><tr><td>`500 1.25 rem/1.2 var(--str-chat__font-family)`</td></tr></table>                                                                           | The font used for subtitle texts with emphasize                                                     | [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageInput/MessageInput-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| `--str-chat__headline-text`         | <table><tr><th>`.str-chat`</th></tr><tr><td>`1.5 rem/1.2 var(--str-chat__font-family)`</td></tr></table>                                                                                | The font used for headline texts                                                                    | [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Channel/Channel-theme.scss), [ChannelList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelList/ChannelList-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-| `--str-chat__headline2-text`        | <table><tr><th>`.str-chat`</th></tr><tr><td>`1.8 rem/1.2 var(--str-chat__font-family)`</td></tr></table>                                                                                | The font used for headline texts                                                                    | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-
-### Radius
-
-| Name                               | Value(s)                                                              | Description                                      | Used in                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
-| ---------------------------------- | --------------------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--str-chat__border-radius-xs`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`8px`</td></tr></table>   | Border radius used for slightly rounded elements | [Autocomplete](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Autocomplete/Autocomplete-theme.scss), [Channel](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Channel/Channel-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [CTAButton](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/CTAButton/CTAButton-theme.scss), [MessageReactions](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [Tooltip](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Tooltip/Tooltip-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
-| `--str-chat__border-radius-sm`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`14px`</td></tr></table>  | Border radius used for slightly rounded elements | [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [MessageActionsBox](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Modal/Modal-theme.scss), [Notification](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Notification/Notification-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
-| `--str-chat__border-radius-md`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`18px`</td></tr></table>  | Border radius used for rounded elements          | [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
-| `--str-chat__border-radius-lg`     | <table><tr><th>`.str-chat`</th></tr><tr><td>`20px`</td></tr></table>  | Border radius used for rounded elements          | [ChannelSearch](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
-| `--str-chat__border-radius-circle` | <table><tr><th>`.str-chat`</th></tr><tr><td>`999px`</td></tr></table> | Border radius used for circular elements         | [AttachmentList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [AttachmentPreviewList](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [AudioRecorder](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/AudioRecorder/AudioRecorder-theme.scss), [Avatar](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Avatar/Avatar-theme.scss), [ChannelPreview](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [CircleFAButton](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss), [Message](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Message/Message-theme.scss), [MessageInput](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageInput/MessageInput-theme.scss), [MessageReactionsSelector](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss), [Modal](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/Modal/Modal-theme.scss) |
-
-All global theme variables are defined in: [https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/\_global-theme-variables.scss](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/_global-theme-variables.scss)
-
-## Layout variables
-
-### Spacing
-
-| Name                      | Value(s)                                                                 | Description                                                                                                            |
-| ------------------------- | ------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- |
-| `--str-chat__spacing-px`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`1px`</td></tr></table>      | Used for elements where sizing is necessary (such as icons, avatar), you can use this variable to scale those elements |
-| `--str-chat__spacing-0_5` | <table><tr><th>`.str-chat`</th></tr><tr><td>`0.125rem`</td></tr></table> | Used for margins and paddings                                                                                          |
-| `--str-chat__spacing-1`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`0.25rem`</td></tr></table>  | Used for margins and paddings                                                                                          |
-| `--str-chat__spacing-1_5` | <table><tr><th>`.str-chat`</th></tr><tr><td>`0.375rem`</td></tr></table> | Used for margins and paddings                                                                                          |
-| `--str-chat__spacing-2`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`0.5rem`</td></tr></table>   | Used for margins and paddings                                                                                          |
-| `--str-chat__spacing-2_5` | <table><tr><th>`.str-chat`</th></tr><tr><td>`0.625rem`</td></tr></table> | Used for margins and paddings                                                                                          |
-| `--str-chat__spacing-3`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`0.75rem`</td></tr></table>  | Used for margins and paddings                                                                                          |
-| `--str-chat__spacing-3_5` | <table><tr><th>`.str-chat`</th></tr><tr><td>`0.875rem`</td></tr></table> | Used for margins and paddings                                                                                          |
-| `--str-chat__spacing-4`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`1rem`</td></tr></table>     | Used for margins and paddings                                                                                          |
-| `--str-chat__spacing-5`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`1.25rem`</td></tr></table>  | Used for margins and paddings                                                                                          |
-| `--str-chat__spacing-6`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`1.5rem`</td></tr></table>   | Used for margins and paddings                                                                                          |
-| `--str-chat__spacing-7`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`1.75rem`</td></tr></table>  | Used for margins and paddings                                                                                          |
-| `--str-chat__spacing-8`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`2rem`</td></tr></table>     | Used for margins and paddings                                                                                          |
-| `--str-chat__spacing-9`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`2.25rem`</td></tr></table>  | Used for margins and paddings                                                                                          |
-| `--str-chat__spacing-10`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`2.5rem`</td></tr></table>   | Used for margins and paddings                                                                                          |
-| `--str-chat__spacing-11`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`2.75rem`</td></tr></table>  | Used for margins and paddings                                                                                          |
-| `--str-chat__spacing-12`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`3rem`</td></tr></table>     | Used for margins and paddings                                                                                          |
-| `--str-chat__spacing-14`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`3.5rem`</td></tr></table>   | Used for margins and paddings                                                                                          |
-| `--str-chat__spacing-16`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`4rem`</td></tr></table>     | Used for margins and paddings                                                                                          |
-
-### Others
-
-| Name                        | Value(s)                                                      | Description                                                   |
-| --------------------------- | ------------------------------------------------------------- | ------------------------------------------------------------- |
-| `--str-chat__theme-version` | <table><tr><th>`:root`</th></tr><tr><td>`2`</td></tr></table> | The theme version being used, 1 or 2. Used internally by SDKs |
-
-All global layout variables are defined in: [https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/\_global-layout-variables.scss](https://github.com/GetStream/stream-chat-css/tree/v4.16.1/src/v2/styles/_global-layout-variables.scss)
-
-If you find that these variables are too high-level and you need more granular control, you also have the option to provide [component layer overrides](./component-variables.mdx).
diff --git a/docusaurus/angular_versioned_docs/version-4/theming/introduction.mdx b/docusaurus/angular_versioned_docs/version-4/theming/introduction.mdx
deleted file mode 100644
index 58fc8906..00000000
--- a/docusaurus/angular_versioned_docs/version-4/theming/introduction.mdx
+++ /dev/null
@@ -1,599 +0,0 @@
----
-id: themingv2
-sidebar_position: 1
-title: Introduction
-keywords: [v2, theme-v2, theming-v2, theming, introduction]
----
-
-import SDKSpecific from "./SDKSpecific";
-import ChatUiScreenshot from "../assets/stream-chat-css-chat-ui-screenshot.png";
-import DarkUiScreenshot from "../assets/stream-chat-css-dark-ui-screenshot.png";
-import CustomDarkUiScreenshot from "../assets/stream-chat-css-custom-dark-theme-screenshot.png";
-import ChatUiThemeCustomizationScreenshot from "../assets/stream-chat-css-chat-ui-theme-customization-screenshot.png";
-import ChatUiLayoutScreenshot from "../assets/stream-chat-css-chat-ui-layout-screenshot.png";
-import CustomAvatarColorScreenshot from "../assets/stream-chat-css-custom-avatar-color-screenshot.png";
-import MessageScreenshot from "../assets/stream-chat-css-message-color-screenshot.png";
-import MessageCustomColorScreenshot from "../assets/stream-chat-css-message-color-customization-screenshot.png";
-import MessageCustomColor2Screenshot from "../assets/stream-chat-css-message-color-customization2-screenshot.png";
-import ChatUiSquareThemeScreenshot from "../assets/stream-chat-css-square-theme-screenshot.png";
-import ChatUiRtlScreenshot from "../assets/stream-chat-css-rtl-layout-screenshot.png";
-
-<SDKSpecific name="react">
-
-The SDK has a new theming and customization system. This page contains information about the new version (refered to as version 2 or v2). The most significant improvements of the new version:
-
-- Refreshed design
-- Better customization through CSS variables
-- Support for RTL layout
-
-The [old theme](../customization/css-and-theming.mdx) (also refered to as version 1 or v1) can still be used with the latest SDK versions, but it's now deprecated, won't be receiving further updates and will be removed in a future major release.
-
-</SDKSpecific>
-
-<SDKSpecific name="react">
-
-New theming system (v2) utilises updated markup and new class names in certain components which are being rendered based on which of the two systems you use. Most of the new components (and/or markup) aren't available in the old version (v1) due to compatibility reasons.
-
-To use the new theme, please upgrade [`stream-chat-react`](https://www.npmjs.com/package/stream-chat-react) to version `10.0.2` and follow the instructions below.
-
-</SDKSpecific>
-
-## Importing the stylesheet
-
-If you're using SCSS:
-
-<SDKSpecific name="angular">
-
-```scss
-// stream-chat-angular@5
-@import "stream-chat-angular/src/assets/styles/scss/index.scss";
-
-// stream-chat-angular@4
-@import "stream-chat-angular/src/assets/styles/v2/scss/index.scss";
-```
-
-</SDKSpecific>
-
-<SDKSpecific name="react">
-
-```scss
-@import "~stream-chat-react/dist/scss/v2/index.scss";
-```
-
-</SDKSpecific>
-
-If you're using CSS:
-
-<SDKSpecific name="angular">
-
-```css
-// stream-chat-angular@5
-@import "stream-chat-angular/src/assets/styles/css/index.css";
-
-// stream-chat-angular@4
-@import "stream-chat-angular/src/assets/styles/v2/css/index.css";
-```
-
-</SDKSpecific>
-
-<SDKSpecific name="react">
-
-```css
-@import "~stream-chat-react/dist/css/v2/index.css";
-```
-
-</SDKSpecific>
-
-## Customization
-
-Our theming system has various customization options allowing for both smaller and large-scale UI changes. This document guides you through the different customization options.
-
-### CSS variables
-
-CSS variables are the easiest way to customize the theme. The variables are organized into two layers:
-
-- global
-- component
-
-#### Global variables
-
-You can use global variables to apply changes to the whole chat UI (as opposed to changing the design of individual components).
-
-The [full list of global variables](./global-variables.mdx) can be found in our global variables guide.
-
-Here is the default chat UI:
-
-<img src={ChatUiScreenshot} width="500" />
-
-Here is how you can customize global variables:
-
-<SDKSpecific name="react">
-
-```scss
-@import "~stream-chat-react/dist/scss/v2/index.scss";
-```
-
-</SDKSpecific>
-
-```scss
-.str-chat {
-  --str-chat__primary-color: #009688;
-  --str-chat__active-primary-color: #004d40;
-  --str-chat__surface-color: #f5f5f5;
-  --str-chat__secondary-surface-color: #fafafa;
-  --str-chat__primary-surface-color: #e0f2f1;
-  --str-chat__primary-surface-color-low-emphasis: #edf7f7;
-  --str-chat__border-radius-circle: 6px;
-}
-```
-
-Here is the result:
-
-<img src={ChatUiThemeCustomizationScreenshot} width="500" />
-
-<SDKSpecific name="angular">
-
-:::note
-The `str-chat` class is applied to the [channel list](../components/ChannelListComponent.mdx) and [channel](../components/ChannelComponent.mdx) component, all CSS variables are declared on this level, if you don't use those components in your chat application you'll have apply this class manually.
-:::
-
-</SDKSpecific>
-
-<SDKSpecific name="react">
-
-:::note
-The `str-chat` class is applied to the [`ChannelList`](../core-components/channel-list.mdx) and [`Channel`](../core-components/channel.mdx) components, all CSS variables are declared on this level.
-:::
-
-</SDKSpecific>
-
-#### Component variables
-
-You can use component layer variables to change the design of individual components. The [full list of component variables](./component-variables.mdx) can be found in our component variables guide.
-
-In the above example we set the avatar background color by setting the `--str-chat__primary-color` variable which also sets the color of other UI elements. If we want to change the background color only for the avatar component we can use the `--str-chat__avatar-background-color` variable:
-
-```scss
-.str-chat {
-  --str-chat__primary-color: #009688;
-  --str-chat__active-primary-color: #004d40;
-  --str-chat__surface-color: #f5f5f5;
-  --str-chat__secondary-surface-color: #fafafa;
-  --str-chat__primary-surface-color: #e0f2f1;
-  --str-chat__primary-surface-color-low-emphasis: #edf7f7;
-  --str-chat__border-radius-circle: 6px;
-  --str-chat__avatar-background-color: #bf360c; // Only changes the background color of the avatar component
-}
-```
-
-Here is the result:
-
-<img src={CustomAvatarColorScreenshot} width="500" />
-
-Component variables don't inherit. Let's see an example of this.
-
-Here is the message component without custom color:
-
-<img src={MessageScreenshot} width="500" />
-
-Setting custom text color inside message bubble:
-
-```scss
-.str-chat {
-  --str-chat__primary-color: #009688;
-  --str-chat__active-primary-color: #004d40;
-  --str-chat__surface-color: #f5f5f5;
-  --str-chat__secondary-surface-color: #fafafa;
-  --str-chat__primary-surface-color: #e0f2f1;
-  --str-chat__primary-surface-color-low-emphasis: #edf7f7;
-  --str-chat__border-radius-circle: 6px;
-  --str-chat__avatar-background-color: #bf360c;
-  --str-chat__message-bubble-color: #00695c; // Custom text color only for the message bubble
-}
-```
-
-<img src={MessageCustomColorScreenshot} width="500" />
-
-We can see that setting the text color of the message bubble won't change the color of the link attachments.
-
-To solve this we also have to set the text color for the link attachment component:
-
-```scss
-.str-chat {
-  --str-chat__primary-color: #009688;
-  --str-chat__active-primary-color: #004d40;
-  --str-chat__surface-color: #f5f5f5;
-  --str-chat__secondary-surface-color: #fafafa;
-  --str-chat__primary-surface-color: #e0f2f1;
-  --str-chat__primary-surface-color-low-emphasis: #edf7f7;
-  --str-chat__border-radius-circle: 6px;
-  --str-chat__avatar-background-color: #bf360c;
-  --str-chat__message-bubble-color: #00695c;
-  --str-chat__card-attachment-color: #00695c; // Setting text color of link attachments
-}
-```
-
-<img src={MessageCustomColor2Screenshot} width="500" />
-
-### Custom icons
-
-<SDKSpecific name="angular">
-
-#### From CSS
-
-Starting from stream-chat-angular@5 it's possible to customize icons from CSS.
-
-Here is an example using the [Google Material Icon library](https://fonts.google.com/icons) to override the send icon:
-
-```scss
-// Import the icon library you want to use
-@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");
-
-// Override the send icon
-.str-chat__icon--send::before {
-  font-family: "Material Symbols Outlined";
-  content: "\e163";
-}
-```
-
-It's also possible to use image files for icons:
-
-```scss
-.str-chat__icon--send {
-  &::before {
-    display: none;
-  }
-  // Link to your image file, or encode the image inline
-  content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik0xMjAtMTYwdi02NDBsNzYwIDMyMC03NjAgMzIwWm04MC0xMjAgNDc0LTIwMC00NzQtMjAwdjE0MGwyNDAgNjAtMjQwIDYwdjE0MFptMCAwdi00MDAgNDAwWiIvPjwvc3ZnPg==");
-}
-```
-
-The full list of icons used by the SDK can be found [here](https://github.com/GetStream/stream-chat-css/blob/main/src/v2/styles/Icon/Icon-layout.scss).
-
-You can also change the size and color of the icons:
-
-```scss
-.str-chat__icon--attach {
-  --str-chat-icon-color: green; // Only works for font icons
-  --str-chat-icon-height: 60px;
-}
-```
-
-#### From HTML template
-
-If you're using stream-chat-angular@4 or an older version, or CSS customizations are not enough, you can completely replace the built-in icon component with your own using the [`CustomTemplatesService`](../../services/CustomTemplatesService/#icontemplate).
-
-You can find a working example in the [customization sample app](https://github.com/GetStream/stream-chat-angular/blob/master/projects/customizations-example/src/app/icon/icon.component.ts).
-
-If the default rules set by the stream-chat-angular stylesheets not enough to set the size and color of your custom icons, you can rely on the `--str-chat-icon-color`, `--str-chat-icon-height` and `--str-chat-icon-width` variables:
-
-```
-.my-custom-send-icon {
-  svg {
-    height: var(--str-chat-icon-height);
-    width: var(--str-chat-icon-width);
-
-    path {
-      fill: var(--str-chat-icon-color);
-    }
-  }
-}
-```
-
-</SDKSpecific>
-
-<SDKSpecific name="react">
-
-TODO
-
-</SDKSpecific>
-
-### CSS overrides
-
-If you'd like to add customizations that are not supported by CSS variables, you can override parts of the default CSS:
-
-<SDKSpecific name="react">
-
-```scss
-@import "~stream-chat-react/dist/scss/v2/index.scss";
-```
-
-</SDKSpecific>
-
-```scss
-// Provide your overrides after the stream-chat-angular stylesheet imports
-.str-chat__channel-preview-messenger--last-message {
-  font-weight: 500;
-}
-```
-
-Just make sure that you add the customization rules after the stylesheet import.
-
-If you're using SCSS it's also possible to import component stylesheets separately (instead of our bundled stylesheet):
-
-<SDKSpecific name="angular">
-
-```scss
-// stream-chat-angular@5
-// Use default theme for channel list and channel preview components
-@import "stream-chat-angular/src/assets/styles/scss/ChannelList/ChannelList-layout.scss";
-@import "stream-chat-angular/src/assets/styles/scss/ChannelList/ChannelList-theme.scss";
-@import "stream-chat-angular/src/assets/styles/scss/ChannelPreview/ChannelPreview-layout.scss";
-@import "stream-chat-angular/src/assets/styles/scss/ChannelPreview/ChannelPreview-theme.scss";
-
-// stream-chat-angular@4
-// Use default theme for channel list and channel preview components
-@import "stream-chat-angular/src/assets/styles/v2/scss/ChannelList/ChannelList-layout.scss";
-@import "stream-chat-angular/src/assets/styles/v2/scss/ChannelList/ChannelList-theme.scss";
-@import "stream-chat-angular/src/assets/styles/v2/scss/ChannelPreview/ChannelPreview-layout.scss";
-@import "stream-chat-angular/src/assets/styles/v2/scss/ChannelPreview/ChannelPreview-theme.scss";
-```
-
-</SDKSpecific>
-
-<SDKSpecific name="react">
-
-```scss
-// Use default theme for channel list and channel preview components
-@import "~stream-chat-react/dist/scss/v2/ChannelList/ChannelList-layout.scss";
-@import "~stream-chat-react/dist/scss/v2/ChannelList/ChannelList-theme.scss";
-@import "~stream-chat-react/dist/scss/v2/ChannelPreview/ChannelPreview-layout.scss";
-@import "~stream-chat-react/dist/scss/v2/ChannelPreview/ChannelPreview-theme.scss";
-```
-
-</SDKSpecific>
-
-```scss
-.str-chat__avatar {
-  // Custom CSS for avatar component
-}
-```
-
-### Apply your own look and feel
-
-If you want to create a truly custom look and feel, it can be exhausting to override the default styling. In that case, it's possible only to apply layout rules from the default theme.
-
-Here is how you can import the layout stylesheet:
-
-<SDKSpecific name="angular">
-
-```scss
-// stream-chat-angular@5
-@import "stream-chat-angular/src/assets/styles/scss/index.layout.scss";
-
-// stream-chat-angular@4
-@import "stream-chat-angular/src/assets/styles/v2/scss/index.layout.scss";
-```
-
-</SDKSpecific>
-
-<SDKSpecific name="react">
-
-```scss
-@import "~stream-chat-react/dist/scss/v2/index.layout.scss";
-```
-
-</SDKSpecific>
-
-or if you're using CSS:
-
-<SDKSpecific name="angular">
-
-```css
-// stream-chat-angular@5
-@import "stream-chat-angular/src/assets/styles/css/index.layout.css";
-
-// stream-chat-angular@4
-@import "stream-chat-angular/src/assets/styles/v2/css/index.layout.css";
-```
-
-</SDKSpecific>
-
-<SDKSpecific name="react">
-
-```css
-@import "~stream-chat-react/dist/css/v2/index.layout.css";
-```
-
-</SDKSpecific>
-
-<img src={ChatUiLayoutScreenshot} width="500" />
-
-The result will be a minimalistic UI without
-
-- coloring
-- fonts
-- borders
-- shadows
-
-Please note that if you're only using the layout rules, you can only use the layout CSS variables.
-
-## Dark and light themes
-
-The default theme has dark and light variants. Here is how you can switch between the different themes:
-
-<SDKSpecific name="angular">
-
-Use the [`ThemeService`](../services/ThemeService.mdx):
-
-```typescript
-import { ThemeService } from 'stream-chat-angular';
-
-constructor(themeService: ThemeService) {
-  themeService.theme$.next('dark'); // or light
-}
-```
-
-</SDKSpecific>
-
-<SDKSpecific name="react">
-
-```tsx
-<Chat client={client} theme="str-chat__theme-dark">
-  {/* ... */}
-</Chat>
-```
-
-or only to a specific component (`Channel` or/and `ChannelList`):
-
-:::note
-Using the `customClasses` approach for either of the components will override default class names. Don't forget to add those to your theme class names (as defined in the snippet) for the styling to work properly.
-:::
-
-```tsx
-<Chat
-  client={client}
-  customClasses={{
-    channelList: "str-chat__theme-dark str-chat__channel-list",
-    channel: "str-chat__theme-light str-chat__channel",
-  }}
->
-  {/* ... */}
-</Chat>
-```
-
-</SDKSpecific>
-
-Here is what the dark theme looks like:
-
-<img src={DarkUiScreenshot} width="500" />
-
-<SDKSpecific name="angular">
-
-:::note
-The `str-chat__theme-dark`/`str-chat__theme-light` class is applied to the [channel list](../components/ChannelListComponent.mdx) and [channel](../components/ChannelComponent.mdx) components, these classes are responsible for switching between the dark and light theme color combinations, if you don't use those components in your chat application you'll have apply the theme classes manually.
-:::
-
-</SDKSpecific>
-
-<SDKSpecific name="react">
-
-:::note
-The `str-chat__theme-dark`/`str-chat__theme-light` class is applied to the [ChannelList](../core-components/channel-list.mdx) and [Channel](../core-components/channel.mdx) components, these classes are responsible for switching between the dark and light theme color combinations.
-:::
-
-</SDKSpecific>
-
-Here is how you can provide different color configurations for the dark and light themes:
-
-<SDKSpecific name="react">
-
-```scss
-@import "~stream-chat-react/dist/scss/v2/index.scss";
-```
-
-</SDKSpecific>
-
-```scss
-.str-chat {
-  --str-chat__border-radius-circle: 6px;
-}
-
-.str-chat__theme-light {
-  --str-chat__primary-color: #009688;
-  --str-chat__active-primary-color: #004d40;
-  --str-chat__surface-color: #f5f5f5;
-  --str-chat__secondary-surface-color: #fafafa;
-  --str-chat__primary-surface-color: #e0f2f1;
-  --str-chat__primary-surface-color-low-emphasis: #edf7f7;
-  --str-chat__avatar-background-color: #bf360c;
-}
-
-.str-chat__theme-dark {
-  --str-chat__primary-color: #26a69a;
-  --str-chat__active-primary-color: #00796b;
-  --str-chat__surface-color: #424242;
-  --str-chat__secondary-surface-color: #212121;
-  --str-chat__primary-surface-color: #00695c;
-  --str-chat__primary-surface-color-low-emphasis: #004d40;
-  --str-chat__avatar-background-color: #ff7043;
-}
-```
-
-Here is the custom dark theme:
-
-<img src={CustomDarkUiScreenshot} width="500" />
-
-### Creating your own theme
-
-It's possible to extend the existing themes with your own themes.
-
-Here is an example creating 'round' and 'square' themes:
-
-<SDKSpecific name="react">
-
-```scss
-@import "~stream-chat-react/dist/scss/v2/index.scss";
-```
-
-</SDKSpecific>
-
-```scss
-// Make sure to use the proper naming convention: str-chat__theme-<your theme>
-.str-chat__theme-round {
-  // You can use the predefined theme and component layer variables
-  --str-chat__border-radius-circle: 999px;
-}
-
-.str-chat__theme-square {
-  --str-chat__border-radius-circle: 6px;
-}
-```
-
-<SDKSpecific name="angular">
-
-Set the theme using the [`ThemeService`](../services/ThemeService.mdx):
-
-```typescript
-import { ThemeService } from 'stream-chat-angular';
-
-constructor(themeService: ThemeService) {
-  themeService.theme$.next('square');
-}
-```
-
-</SDKSpecific>
-
-<SDKSpecific name="react">
-
-```tsx
-<Chat client={client} theme="str-chat__theme-square">
-  {/* ... */}
-</Chat>
-```
-
-or only to a specific component (`Channel` or/and `ChannelList`):
-
-:::note
-Using the `customClasses` approach for either of the components will override default class names. Don't forget to add those to your theme class names (as defined in the snippet) for the styling to work properly.
-:::
-
-```tsx
-<Chat
-  client={client}
-  customClasses={{
-    channelList: "str-chat__theme-square str-chat__channel-list",
-    channel: "str-chat__theme-round str-chat__channel",
-  }}
->
-  {/* ... */}
-</Chat>
-```
-
-</SDKSpecific>
-
-<img src={ChatUiSquareThemeScreenshot} width="500" />
-
-## RTL support
-
-The layout was built with RTL support in mind. You can use the RTL layout by providing the `dir` attribute in your HTML:
-
-```html
-<html dir="rtl">
-  <!-- ... -->
-</html>
-```
-
-Here is the result:
-
-<img src={ChatUiRtlScreenshot} width="500" />
diff --git a/docusaurus/angular_versioned_docs/version-4/theming/palette-variables.mdx b/docusaurus/angular_versioned_docs/version-4/theming/palette-variables.mdx
deleted file mode 100644
index be727092..00000000
--- a/docusaurus/angular_versioned_docs/version-4/theming/palette-variables.mdx
+++ /dev/null
@@ -1,75 +0,0 @@
----
-id: palette-variables
-sidebar_position: 4
-title: Palette variables
-keywords: [v2, theme-v2, theming-v2, theming, palette variables]
----
-
-import SDKSpecific from "./SDKSpecific";
-import V2Warning from "./V2Warning";
-
-<SDKSpecific name='react'>
-
-:::info
-
-<V2Warning themingAndCSSPath="../../customization/css_and_theming" />
-
-:::
-
-</SDKSpecific>
-
-A color palette is defined inside the library that used to define default values for the [global theme variables](./global-variables.mdx). If you want to work with the default theme but want to adjust the shades (for example, change `blue500` to a lighter color), you can update the palette variables. However, if you want to change the color scheme of the theme (for example, change the primary color from blue to green), you should take a look at [global theme variables](./global-variables.mdx).
-
-| Name                    | Value(s)                                                                |
-| ----------------------- | ----------------------------------------------------------------------- |
-| `--str-chat__blue950`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`#001333`</td></tr></table> |
-| `--str-chat__blue900`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`#00163d`</td></tr></table> |
-| `--str-chat__blue800`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`#002666`</td></tr></table> |
-| `--str-chat__blue700`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`#003999`</td></tr></table> |
-| `--str-chat__blue600`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`#004ccc`</td></tr></table> |
-| `--str-chat__blue500`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`#005fff`</td></tr></table> |
-| `--str-chat__blue400`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`#337eff`</td></tr></table> |
-| `--str-chat__blue300`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`#669fff`</td></tr></table> |
-| `--str-chat__blue200`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`#ccdfff`</td></tr></table> |
-| `--str-chat__blue100`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`#e0f0ff`</td></tr></table> |
-| `--str-chat__blue50`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`#ebf5ff`</td></tr></table> |
-| `--str-chat__grey950`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`#080707`</td></tr></table> |
-| `--str-chat__grey900`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`#17191c`</td></tr></table> |
-| `--str-chat__grey800`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`#1c1e22`</td></tr></table> |
-| `--str-chat__grey700`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`#272a30`</td></tr></table> |
-| `--str-chat__grey600`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`#4c525c`</td></tr></table> |
-| `--str-chat__grey500`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`#72767e`</td></tr></table> |
-| `--str-chat__grey400`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`#b4b7bb`</td></tr></table> |
-| `--str-chat__grey300`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`#dbdde1`</td></tr></table> |
-| `--str-chat__grey200`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`#e9eaed`</td></tr></table> |
-| `--str-chat__grey100`   | <table><tr><th>`.str-chat`</th></tr><tr><td>`#f4f4f5`</td></tr></table> |
-| `--str-chat__grey50`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`#ffffff`</td></tr></table> |
-| `--str-chat__red900`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`#330003`</td></tr></table> |
-| `--str-chat__red800`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`#660006`</td></tr></table> |
-| `--str-chat__red700`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`#990008`</td></tr></table> |
-| `--str-chat__red600`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`#cc000b`</td></tr></table> |
-| `--str-chat__red500`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`#ff000e`</td></tr></table> |
-| `--str-chat__red400`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`#ff3742`</td></tr></table> |
-| `--str-chat__red300`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`#ff666e`</td></tr></table> |
-| `--str-chat__red200`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`#ff999f`</td></tr></table> |
-| `--str-chat__red100`    | <table><tr><th>`.str-chat`</th></tr><tr><td>`#ffe5e7`</td></tr></table> |
-| `--str-chat__green900`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`#062d16`</td></tr></table> |
-| `--str-chat__green800`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`#0d592c`</td></tr></table> |
-| `--str-chat__green700`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`#138643`</td></tr></table> |
-| `--str-chat__green600`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`#19b359`</td></tr></table> |
-| `--str-chat__green500`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`#20e070`</td></tr></table> |
-| `--str-chat__green400`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`#4ce68c`</td></tr></table> |
-| `--str-chat__green300`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`#79eca9`</td></tr></table> |
-| `--str-chat__green200`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`#a6f2c6`</td></tr></table> |
-| `--str-chat__green100`  | <table><tr><th>`.str-chat`</th></tr><tr><td>`#e9f1ff`</td></tr></table> |
-| `--str-chat__yellow900` | <table><tr><th>`.str-chat`</th></tr><tr><td>`#332500`</td></tr></table> |
-| `--str-chat__yellow800` | <table><tr><th>`.str-chat`</th></tr><tr><td>`#664900`</td></tr></table> |
-| `--str-chat__yellow700` | <table><tr><th>`.str-chat`</th></tr><tr><td>`#996e00`</td></tr></table> |
-| `--str-chat__yellow600` | <table><tr><th>`.str-chat`</th></tr><tr><td>`#cc9200`</td></tr></table> |
-| `--str-chat__yellow500` | <table><tr><th>`.str-chat`</th></tr><tr><td>`#ffb700`</td></tr></table> |
-| `--str-chat__yellow400` | <table><tr><th>`.str-chat`</th></tr><tr><td>`#ffd466`</td></tr></table> |
-| `--str-chat__yellow300` | <table><tr><th>`.str-chat`</th></tr><tr><td>`#ffe299`</td></tr></table> |
-| `--str-chat__yellow200` | <table><tr><th>`.str-chat`</th></tr><tr><td>`#fff1cc`</td></tr></table> |
-| `--str-chat__yellow100` | <table><tr><th>`.str-chat`</th></tr><tr><td>`#fff8e5`</td></tr></table> |
-
-Palette variables are defined in: [https://github.com/GetStream/stream-chat-css/blob/main/src-v2/styles/\_palette-variables.scss](https://github.com/GetStream/stream-chat-css/blob/main/src-v2/styles/_palette-variables.scss)
diff --git a/docusaurus/angular_versioned_docs/version-4/types/_category_.json b/docusaurus/angular_versioned_docs/version-4/types/_category_.json
deleted file mode 100644
index fef0a70b..00000000
--- a/docusaurus/angular_versioned_docs/version-4/types/_category_.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "label": "Types",
-  "position": 7
-}
diff --git a/docusaurus/angular_versioned_docs/version-4/types/stream-message.mdx b/docusaurus/angular_versioned_docs/version-4/types/stream-message.mdx
deleted file mode 100644
index 1d64810c..00000000
--- a/docusaurus/angular_versioned_docs/version-4/types/stream-message.mdx
+++ /dev/null
@@ -1,16 +0,0 @@
----
-id: stream-message
-sidebar_position: 1
-title: Stream message
----
-
-The [`StreamMessage`](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/types.ts) type represents a chat message.
-
-# Overview
-
-The class extends the base Stream [message](https://getstream.io/chat/docs/javascript/message_format/?language=javascript#open-graph-scraper) format with the following properties:
-
-| Name          | Type     | Description                                                                                                                                                                                    |
-| ------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `readBy`      | string[] | The list of users that read the message                                                                                                                                                        |
-| `translation` | string   | The message translation if message was translated with [auto-translation](https://getstream.io/chat/docs/javascript/translation/?language=javascript&q=auto%20trasnlate#automatic-translation) |
diff --git a/docusaurus/angular_versioned_sidebars/version-5-sidebars.json b/docusaurus/angular_versioned_sidebars/version-5-sidebars.json
deleted file mode 100644
index cff0c94e..00000000
--- a/docusaurus/angular_versioned_sidebars/version-5-sidebars.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "defaultSidebar": [
-    {
-      "type": "autogenerated",
-      "dirName": "."
-    }
-  ]
-}
diff --git a/docusaurus/angular_versions.json b/docusaurus/angular_versions.json
deleted file mode 100644
index 13443156..00000000
--- a/docusaurus/angular_versions.json
+++ /dev/null
@@ -1 +0,0 @@
-["4"]
diff --git a/docusaurus/docs/Angular/_common/supported-attachments.mdx b/docusaurus/docs/Angular/_common/supported-attachments.mdx
deleted file mode 100644
index b517d9fd..00000000
--- a/docusaurus/docs/Angular/_common/supported-attachments.mdx
+++ /dev/null
@@ -1,16 +0,0 @@
-import AttachmentsScreenshot from "../assets/attachments-screenshot.png";
-import VoiceRecordingScreenshot from "../assets/voice-recording-screenshot.png";
-
-- Images (including GIFs) are displayed inline
-- Videos are displayed inline
-- Voice recordings are displayed inline
-- Other files can be downloaded
-- Links in a message are enriched with built-in open graph URL scraping
-
-**Example 1** - different type of attachments:
-
-<img src={AttachmentsScreenshot} width="500" />
-
-**Example 2** - voice recording:
-
-<img src={VoiceRecordingScreenshot} width="500" />
diff --git a/docusaurus/docs/Angular/assets/angular-logo.png b/docusaurus/docs/Angular/assets/angular-logo.png
deleted file mode 100644
index 6fe29fad..00000000
Binary files a/docusaurus/docs/Angular/assets/angular-logo.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/attachment-preview-list-screenshot.png b/docusaurus/docs/Angular/assets/attachment-preview-list-screenshot.png
deleted file mode 100644
index 0a148e08..00000000
Binary files a/docusaurus/docs/Angular/assets/attachment-preview-list-screenshot.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/attachment-size-warning.png b/docusaurus/docs/Angular/assets/attachment-size-warning.png
deleted file mode 100644
index 6f88c5a9..00000000
Binary files a/docusaurus/docs/Angular/assets/attachment-size-warning.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/attachments-screenshot.png b/docusaurus/docs/Angular/assets/attachments-screenshot.png
deleted file mode 100644
index f12f8d52..00000000
Binary files a/docusaurus/docs/Angular/assets/attachments-screenshot.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/channel-header-screenshot.png b/docusaurus/docs/Angular/assets/channel-header-screenshot.png
deleted file mode 100644
index e4f7c3bd..00000000
Binary files a/docusaurus/docs/Angular/assets/channel-header-screenshot.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/channel-header-with-menu-screenshot.png b/docusaurus/docs/Angular/assets/channel-header-with-menu-screenshot.png
deleted file mode 100644
index 24973cd0..00000000
Binary files a/docusaurus/docs/Angular/assets/channel-header-with-menu-screenshot.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/channel-invites-screenshot.png b/docusaurus/docs/Angular/assets/channel-invites-screenshot.png
deleted file mode 100644
index 3a15dde9..00000000
Binary files a/docusaurus/docs/Angular/assets/channel-invites-screenshot.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/channel-list.png b/docusaurus/docs/Angular/assets/channel-list.png
deleted file mode 100644
index 901d93b9..00000000
Binary files a/docusaurus/docs/Angular/assets/channel-list.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/channel-preview-info.png b/docusaurus/docs/Angular/assets/channel-preview-info.png
deleted file mode 100644
index 2bea77f8..00000000
Binary files a/docusaurus/docs/Angular/assets/channel-preview-info.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/channel-preview.png b/docusaurus/docs/Angular/assets/channel-preview.png
deleted file mode 100644
index 87bb2a39..00000000
Binary files a/docusaurus/docs/Angular/assets/channel-preview.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/chat-ui-layout-screenshot.png b/docusaurus/docs/Angular/assets/chat-ui-layout-screenshot.png
deleted file mode 100644
index edf1655a..00000000
Binary files a/docusaurus/docs/Angular/assets/chat-ui-layout-screenshot.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/custom-dark-theme-screenshot.png b/docusaurus/docs/Angular/assets/custom-dark-theme-screenshot.png
deleted file mode 100644
index 26ca814e..00000000
Binary files a/docusaurus/docs/Angular/assets/custom-dark-theme-screenshot.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/custom-light-theme-screenshot.png b/docusaurus/docs/Angular/assets/custom-light-theme-screenshot.png
deleted file mode 100644
index 9cea0f6a..00000000
Binary files a/docusaurus/docs/Angular/assets/custom-light-theme-screenshot.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/custom-textarea-after.png b/docusaurus/docs/Angular/assets/custom-textarea-after.png
deleted file mode 100644
index 7eca78e7..00000000
Binary files a/docusaurus/docs/Angular/assets/custom-textarea-after.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/custom-textarea-before.png b/docusaurus/docs/Angular/assets/custom-textarea-before.png
deleted file mode 100644
index 113c99ac..00000000
Binary files a/docusaurus/docs/Angular/assets/custom-textarea-before.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/dark-theme-screenshot.png b/docusaurus/docs/Angular/assets/dark-theme-screenshot.png
deleted file mode 100644
index 0bfec89d..00000000
Binary files a/docusaurus/docs/Angular/assets/dark-theme-screenshot.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/emoji-picker-screenshot.png b/docusaurus/docs/Angular/assets/emoji-picker-screenshot.png
deleted file mode 100644
index 893b6a1c..00000000
Binary files a/docusaurus/docs/Angular/assets/emoji-picker-screenshot.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/firebase-console-screenshot.png b/docusaurus/docs/Angular/assets/firebase-console-screenshot.png
deleted file mode 100644
index 432eaf46..00000000
Binary files a/docusaurus/docs/Angular/assets/firebase-console-screenshot.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/image-sizing-screenshot-1.png b/docusaurus/docs/Angular/assets/image-sizing-screenshot-1.png
deleted file mode 100644
index ea73ba9d..00000000
Binary files a/docusaurus/docs/Angular/assets/image-sizing-screenshot-1.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/image-sizing-screenshot-2.png b/docusaurus/docs/Angular/assets/image-sizing-screenshot-2.png
deleted file mode 100644
index 4c327afe..00000000
Binary files a/docusaurus/docs/Angular/assets/image-sizing-screenshot-2.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/image-sizing-screenshot-3.png b/docusaurus/docs/Angular/assets/image-sizing-screenshot-3.png
deleted file mode 100644
index 38ec296a..00000000
Binary files a/docusaurus/docs/Angular/assets/image-sizing-screenshot-3.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/invite-button-screenshot.png b/docusaurus/docs/Angular/assets/invite-button-screenshot.png
deleted file mode 100644
index 4452360f..00000000
Binary files a/docusaurus/docs/Angular/assets/invite-button-screenshot.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/invite-modal1-screenshot.png b/docusaurus/docs/Angular/assets/invite-modal1-screenshot.png
deleted file mode 100644
index 6ff9d2bf..00000000
Binary files a/docusaurus/docs/Angular/assets/invite-modal1-screenshot.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/invite-modal2-screenshot.png b/docusaurus/docs/Angular/assets/invite-modal2-screenshot.png
deleted file mode 100644
index 2c417ed3..00000000
Binary files a/docusaurus/docs/Angular/assets/invite-modal2-screenshot.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/ionic-screenshot1.png b/docusaurus/docs/Angular/assets/ionic-screenshot1.png
deleted file mode 100644
index 9d94cc69..00000000
Binary files a/docusaurus/docs/Angular/assets/ionic-screenshot1.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/light-theme-screenshot.png b/docusaurus/docs/Angular/assets/light-theme-screenshot.png
deleted file mode 100644
index 63109a45..00000000
Binary files a/docusaurus/docs/Angular/assets/light-theme-screenshot.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/mention-screenshot.png b/docusaurus/docs/Angular/assets/mention-screenshot.png
deleted file mode 100644
index d403737a..00000000
Binary files a/docusaurus/docs/Angular/assets/mention-screenshot.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/message-actions-screenshot.png b/docusaurus/docs/Angular/assets/message-actions-screenshot.png
deleted file mode 100644
index e37b35fd..00000000
Binary files a/docusaurus/docs/Angular/assets/message-actions-screenshot.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/message-bounce-screenshot.png b/docusaurus/docs/Angular/assets/message-bounce-screenshot.png
deleted file mode 100644
index 4449e270..00000000
Binary files a/docusaurus/docs/Angular/assets/message-bounce-screenshot.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/message-edit-after.png b/docusaurus/docs/Angular/assets/message-edit-after.png
deleted file mode 100644
index 1d21598a..00000000
Binary files a/docusaurus/docs/Angular/assets/message-edit-after.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/message-edit-before.png b/docusaurus/docs/Angular/assets/message-edit-before.png
deleted file mode 100644
index 8b9e942f..00000000
Binary files a/docusaurus/docs/Angular/assets/message-edit-before.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/message-menu-after-desktop.png b/docusaurus/docs/Angular/assets/message-menu-after-desktop.png
deleted file mode 100644
index 829f5613..00000000
Binary files a/docusaurus/docs/Angular/assets/message-menu-after-desktop.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/message-menu-after-mobile.png b/docusaurus/docs/Angular/assets/message-menu-after-mobile.png
deleted file mode 100644
index 3c23613e..00000000
Binary files a/docusaurus/docs/Angular/assets/message-menu-after-mobile.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/message-menu-before.png b/docusaurus/docs/Angular/assets/message-menu-before.png
deleted file mode 100644
index 76ee46cd..00000000
Binary files a/docusaurus/docs/Angular/assets/message-menu-before.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/message-reactions-screenshot.png b/docusaurus/docs/Angular/assets/message-reactions-screenshot.png
deleted file mode 100644
index ec51fb92..00000000
Binary files a/docusaurus/docs/Angular/assets/message-reactions-screenshot.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/message-reactions-selector-screenshot.png b/docusaurus/docs/Angular/assets/message-reactions-selector-screenshot.png
deleted file mode 100644
index 0596a3ec..00000000
Binary files a/docusaurus/docs/Angular/assets/message-reactions-selector-screenshot.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/message-screenshot.png b/docusaurus/docs/Angular/assets/message-screenshot.png
deleted file mode 100644
index 9f453159..00000000
Binary files a/docusaurus/docs/Angular/assets/message-screenshot.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/messages-with-grouping-screenshot.png b/docusaurus/docs/Angular/assets/messages-with-grouping-screenshot.png
deleted file mode 100644
index 8e2d590e..00000000
Binary files a/docusaurus/docs/Angular/assets/messages-with-grouping-screenshot.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/messages-without-groups-screenshot.png b/docusaurus/docs/Angular/assets/messages-without-groups-screenshot.png
deleted file mode 100644
index 408fcb6d..00000000
Binary files a/docusaurus/docs/Angular/assets/messages-without-groups-screenshot.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/multi-channel-list.png b/docusaurus/docs/Angular/assets/multi-channel-list.png
deleted file mode 100644
index fdf9468b..00000000
Binary files a/docusaurus/docs/Angular/assets/multi-channel-list.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/payment-attachment.png b/docusaurus/docs/Angular/assets/payment-attachment.png
deleted file mode 100644
index 304e638b..00000000
Binary files a/docusaurus/docs/Angular/assets/payment-attachment.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/payment-link.png b/docusaurus/docs/Angular/assets/payment-link.png
deleted file mode 100644
index ebf7193a..00000000
Binary files a/docusaurus/docs/Angular/assets/payment-link.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/payment-preview.png b/docusaurus/docs/Angular/assets/payment-preview.png
deleted file mode 100644
index 9acc104e..00000000
Binary files a/docusaurus/docs/Angular/assets/payment-preview.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/pin-action-screenshot.png b/docusaurus/docs/Angular/assets/pin-action-screenshot.png
deleted file mode 100644
index 6ab6b30c..00000000
Binary files a/docusaurus/docs/Angular/assets/pin-action-screenshot.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/pinned-message-screenshot.png b/docusaurus/docs/Angular/assets/pinned-message-screenshot.png
deleted file mode 100644
index 639cfba9..00000000
Binary files a/docusaurus/docs/Angular/assets/pinned-message-screenshot.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/reaction-details.png b/docusaurus/docs/Angular/assets/reaction-details.png
deleted file mode 100644
index c30d2841..00000000
Binary files a/docusaurus/docs/Angular/assets/reaction-details.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/start-voice-recording.png b/docusaurus/docs/Angular/assets/start-voice-recording.png
deleted file mode 100644
index 7d7058af..00000000
Binary files a/docusaurus/docs/Angular/assets/start-voice-recording.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/stream-chat-css-chat-ui-layout-screenshot.png b/docusaurus/docs/Angular/assets/stream-chat-css-chat-ui-layout-screenshot.png
deleted file mode 100644
index 240d6a1e..00000000
Binary files a/docusaurus/docs/Angular/assets/stream-chat-css-chat-ui-layout-screenshot.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/stream-chat-css-chat-ui-screenshot.png b/docusaurus/docs/Angular/assets/stream-chat-css-chat-ui-screenshot.png
deleted file mode 100644
index edf1655a..00000000
Binary files a/docusaurus/docs/Angular/assets/stream-chat-css-chat-ui-screenshot.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/stream-chat-css-chat-ui-theme-customization-screenshot.png b/docusaurus/docs/Angular/assets/stream-chat-css-chat-ui-theme-customization-screenshot.png
deleted file mode 100644
index 82451bdf..00000000
Binary files a/docusaurus/docs/Angular/assets/stream-chat-css-chat-ui-theme-customization-screenshot.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/stream-chat-css-custom-avatar-color-screenshot.png b/docusaurus/docs/Angular/assets/stream-chat-css-custom-avatar-color-screenshot.png
deleted file mode 100644
index f1cb121d..00000000
Binary files a/docusaurus/docs/Angular/assets/stream-chat-css-custom-avatar-color-screenshot.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/stream-chat-css-custom-dark-theme-screenshot.png b/docusaurus/docs/Angular/assets/stream-chat-css-custom-dark-theme-screenshot.png
deleted file mode 100644
index 7651965a..00000000
Binary files a/docusaurus/docs/Angular/assets/stream-chat-css-custom-dark-theme-screenshot.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/stream-chat-css-dark-ui-screenshot.png b/docusaurus/docs/Angular/assets/stream-chat-css-dark-ui-screenshot.png
deleted file mode 100644
index e871cfcd..00000000
Binary files a/docusaurus/docs/Angular/assets/stream-chat-css-dark-ui-screenshot.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/stream-chat-css-message-color-customization-screenshot.png b/docusaurus/docs/Angular/assets/stream-chat-css-message-color-customization-screenshot.png
deleted file mode 100644
index dd3f0d2a..00000000
Binary files a/docusaurus/docs/Angular/assets/stream-chat-css-message-color-customization-screenshot.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/stream-chat-css-message-color-customization2-screenshot.png b/docusaurus/docs/Angular/assets/stream-chat-css-message-color-customization2-screenshot.png
deleted file mode 100644
index 27a486a1..00000000
Binary files a/docusaurus/docs/Angular/assets/stream-chat-css-message-color-customization2-screenshot.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/stream-chat-css-message-color-screenshot.png b/docusaurus/docs/Angular/assets/stream-chat-css-message-color-screenshot.png
deleted file mode 100644
index 2c9d1650..00000000
Binary files a/docusaurus/docs/Angular/assets/stream-chat-css-message-color-screenshot.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/stream-chat-css-rtl-layout-screenshot.png b/docusaurus/docs/Angular/assets/stream-chat-css-rtl-layout-screenshot.png
deleted file mode 100644
index a83946ca..00000000
Binary files a/docusaurus/docs/Angular/assets/stream-chat-css-rtl-layout-screenshot.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/stream-chat-css-square-theme-screenshot.png b/docusaurus/docs/Angular/assets/stream-chat-css-square-theme-screenshot.png
deleted file mode 100644
index 8afae493..00000000
Binary files a/docusaurus/docs/Angular/assets/stream-chat-css-square-theme-screenshot.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/stream-logo.png b/docusaurus/docs/Angular/assets/stream-logo.png
deleted file mode 100644
index 35ae302d..00000000
Binary files a/docusaurus/docs/Angular/assets/stream-logo.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/voice-recorder-wavebar.png b/docusaurus/docs/Angular/assets/voice-recorder-wavebar.png
deleted file mode 100644
index 974ec30b..00000000
Binary files a/docusaurus/docs/Angular/assets/voice-recorder-wavebar.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/voice-recorder.png b/docusaurus/docs/Angular/assets/voice-recorder.png
deleted file mode 100644
index 6e497b18..00000000
Binary files a/docusaurus/docs/Angular/assets/voice-recorder.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/voice-recording-demo.png b/docusaurus/docs/Angular/assets/voice-recording-demo.png
deleted file mode 100644
index 4091d048..00000000
Binary files a/docusaurus/docs/Angular/assets/voice-recording-demo.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/voice-recording-playback.png b/docusaurus/docs/Angular/assets/voice-recording-playback.png
deleted file mode 100644
index 5cf95965..00000000
Binary files a/docusaurus/docs/Angular/assets/voice-recording-playback.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/voice-recording-screenshot.png b/docusaurus/docs/Angular/assets/voice-recording-screenshot.png
deleted file mode 100644
index 8b139081..00000000
Binary files a/docusaurus/docs/Angular/assets/voice-recording-screenshot.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/assets/wavebar-screenshot.png b/docusaurus/docs/Angular/assets/wavebar-screenshot.png
deleted file mode 100644
index fbc17234..00000000
Binary files a/docusaurus/docs/Angular/assets/wavebar-screenshot.png and /dev/null differ
diff --git a/docusaurus/docs/Angular/basics/_category_.json b/docusaurus/docs/Angular/basics/_category_.json
deleted file mode 100644
index daec3e16..00000000
--- a/docusaurus/docs/Angular/basics/_category_.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "label": "Basics",
-  "position": 1
-}
diff --git a/docusaurus/docs/Angular/basics/angular-version-support.mdx b/docusaurus/docs/Angular/basics/angular-version-support.mdx
deleted file mode 100644
index 85c9be58..00000000
--- a/docusaurus/docs/Angular/basics/angular-version-support.mdx
+++ /dev/null
@@ -1,38 +0,0 @@
----
-id: angular-version-support
-title: Angular version support
-sidebar_position: 2
----
-
-The current version of the SDK supports Angular versions 15-18. This is how you can install it:
-
-Run this command if you are using **Angular 18**:
-
-```shell
-npm install stream-chat-angular ngx-float-ui@beta
-```
-
-Run this command if you are using **Angular 17**:
-
-```shell
-npm install stream-chat-angular ngx-float-ui@17
-```
-
-Run this command if you are using **Angular 16**:
-
-```shell
-npm install stream-chat-angular ngx-float-ui@16
-```
-
-Run this command if you are using **Angular 15**:
-
-```shell
-npm install stream-chat-angular @ngx-translate/core@14 ngx-float-ui@15
-```
-
-Supported node verisons: 18+
-
-## Angular version support policy:
-
-- We're doing our best to introduce support for the latest Angular version as soon as it becomes stable
-- To be able to use new features of Angular, we need to remove support for older Angular versions, however we always make sure to support [all actively supported Angular versions](https://angular.dev/reference/versions#actively-supported-versions)
diff --git a/docusaurus/docs/Angular/basics/overview.mdx b/docusaurus/docs/Angular/basics/overview.mdx
deleted file mode 100644
index bca70f86..00000000
--- a/docusaurus/docs/Angular/basics/overview.mdx
+++ /dev/null
@@ -1,61 +0,0 @@
----
-id: overview
-sidebar_position: 1
-slug: /
-title: Overview
----
-
-Building on top of the Stream Chat API, the Stream Chat Angular component library includes everything you need to build feature-rich and high-functioning chat user experiences out of the box.
-The library includes an extensive set of performant and customizable Angular components which allow you to get started quickly with little to no plumbing required.
-Use cases include team and social messaging and customer support. The library supports:
-
-- Rich media messages
-- Reactions
-- Image and file uploads
-- Read state
-- Channel and message lists
-- Threads
-
-## Architecture
-
-The library contains a set of components that contain all of the necessary features to build a performant chat UI. However, it is also possible to provide your own custom components instead of the built-in ones.
-
-If you want to, you can build your own chat UI from scratch but still take advantage of the library by using our services.
-
-The left navigation will guide you to the various documentation sections for information on everything regarding our robust component library. Check out the instructions below for adding the library to your Angular project.
-
-## Installation
-
-We recommend using the component library through a package manager. Stream Chat Angular is based on top of Stream's [JavaScript Client](https://getstream.io/chat/docs/javascript/?language=javascript).
-
-### Install with NPM
-
-Run this command if you are using **Angular 18**:
-
-```shell
-npm install stream-chat-angular stream-chat ngx-float-ui@18
-```
-
-Run this command if you are using **Angular 17**:
-
-```shell
-npm install stream-chat-angular stream-chat ngx-float-ui@17
-```
-
-Run this command if you are using **Angular 16**:
-
-```shell
-npm install stream-chat-angular stream-chat ngx-float-ui@16
-```
-
-Run this command if you are using **Angular 15**:
-
-```shell
-npm install stream-chat-angular stream-chat @ngx-translate/core@14 ngx-float-ui@15
-```
-
-Supported Node versions: 18+
-
-## Tutorial
-
-Follow our [tutorial](https://getstream.io/chat/angular/tutorial/) and build your first Stream Angular chat application.
diff --git a/docusaurus/docs/Angular/basics/upgrade-v2.mdx b/docusaurus/docs/Angular/basics/upgrade-v2.mdx
deleted file mode 100644
index cf257faf..00000000
--- a/docusaurus/docs/Angular/basics/upgrade-v2.mdx
+++ /dev/null
@@ -1,119 +0,0 @@
----
-id: upgrade-v2
-title: Upgrade from v2
----
-
-## About v3
-
-This version's main focus was to enhance the customizability of the SDK, the two main features are:
-
-- there are many new customization points where you can provide your own template to override the default UI - our [customization guide](../concepts/customization.mdx) covers this topic in detail
-- you can take advantage of TypeScript generics to define custom fields for messages, message reactions, attachments, commands, channels or events - our [generics guide](../concepts/generics.mdx) explain this topic in more details
-
-Below you can find the list of breaking changes and instructions on how to update your code.
-
-## Peer dependencies
-
-### stream-chat
-
-Upgrade to stream-chat `^6.4.0`.
-
-You might need to update your code if you created custom components/services that used `stream-chat` in your application.
-
-The biggest change is that generic parameters were refactored into a single generic parameter, this has two major implications:
-
-- If you used generic parameters for handling messages, message reactions, attachments, commands, channels or events you have to change those generic parameters, the SDK uses the [`DefaultStreamChatGenerics`](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/types.ts) parameter instead of the individual `DefaultAttachmentType`, `DefaultChannelType`, `DefaultCommandType`, `DefaultEventType` `DefaultMessageType`, `DefaultReactionType` and `DefaultUserType` parameters.
-- If you are interacting with the `ChannelService` or `ChatClientService` you'll have to provide the [`DefaultStreamChatGenerics`](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/types.ts) parameter (or a descended) for message reactions, attachments, commands, channels or events (you don't need to provide it for messages as it's already part of the [`StreamMessage`](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/types.ts) class)
-
-Our [generics guide](../concepts/generics.mdx) explains this topic in more details.
-
-You can find the full list of breaking changes in stream-chat [v5](https://github.com/GetStream/stream-chat-js/releases/tag/v5.0.0) and [v6](https://github.com/GetStream/stream-chat-js/releases/tag/v6.0.0) on GitHub.
-
-#### Angular 13
-
-Run the following command to upgrade if you're using Angular 13:
-
-```
-npm install stream-chat@6.4.0 stream-chat-angular
-```
-
-#### Angular 12
-
-Run the following command to upgrade if you're using Angular 12:
-
-```
-npm install stream-chat@6.4.0 stream-chat-angular@3 --legacy-peer-deps
-```
-
-### stream-chat-css
-
-You can drop the `@stream-io/stream-chat-css` dependency because going forward `stream-chat-angular` will encapsulate the library.
-
-Rewrite your stylesheet imports to this:
-
-`~stream-chat-angular/src/assets/styles/scss/index.scss`
-
-Or this if you were using CSS:
-
-`~stream-chat-angular/src/assets/styles/css/index.css`
-
-It's still possible to individually import stylesheets you just have to replace the `~@stream-io/stream-chat-css/dist` prefix with `~stream-chat-angular/src/assets/styles`.
-
-## Inputs removed in favor of channel capabilities
-
-The following inputs are removed:
-
-| Component/service                                                        | Input name                   | Replacement                                                                                                                                                                                                                                                                                       |
-| ------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [`MessageListComponent`](../components/MessageListComponent.mdx)         | `enabledMessageActionsInput` | Use our [permission framework](https://getstream.io/chat/docs/javascript/chat_permission_policies/?language=javascript&q=slow%20mode) to control what actions are available to different users                                                                                                    |
-| [`MessageListComponent`](../components/MessageListComponent.mdx)         | `areReactionsEnabled`        | Use our [permission framework](https://getstream.io/chat/docs/javascript/chat_permission_policies/?language=javascript&q=slow%20mode) to control what actions are available to different users                                                                                                    |
-| [`MessageInputConfigService`](../services/MessageInputConfigService.mdx) | `acceptedFileTypes`          | Use [application settings](https://getstream.io/chat/docs/javascript/app_setting_overview/?language=javascript#file-uploads) to control the accepted file types                                                                                                                                   |
-| [`MessageInputComponent`](../components/MessageInputComponent.mdx)       | `acceptedFileTypes`          | Use [application settings](https://getstream.io/chat/docs/javascript/app_setting_overview/?language=javascript#file-uploads) to control the accepted file types                                                                                                                                   |
-| [`MessageComponent`](../components/MessageComponent.mdx)                 | `areReactionsEnabled`        | Use our [permission framework](https://getstream.io/chat/docs/javascript/chat_permission_policies/?language=javascript&q=slow%20mode) to control what actions are available to different users. Please note that existing reactions of a message will be displayed, even if reacting is disabled. |
-| [`MessageComponent`](../components/MessageComponent.mdx)                 | `canReactToMessage`          | Use our [permission framework](https://getstream.io/chat/docs/javascript/chat_permission_policies/?language=javascript&q=slow%20mode) to control what actions are available to different users. Please note that existing reactions of a message will be displayed, even if reacting is disabled. |
-| [`MessageComponent`](../components/MessageComponent.mdx)                 | `canReceiveReadEvents`       | Use our [permission framework](https://getstream.io/chat/docs/javascript/chat_permission_policies/?language=javascript&q=slow%20mode) to control what actions are available to different users                                                                                                    |
-
-## Centralized customizations
-
-| Description                                                 | Old option                                                      | New option                                                                                          |
-| ----------------------------------------------------------- | --------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
-| The autocomplete list item template for mentioning users    | `AutocompleteTextareaComponent.mentionAutocompleteItemTemplate` | [`CustomTemplatesService.mentionAutocompleteItemTemplate$`](../services/CustomTemplatesService.mdx) |
-| The autocomplete list item template for commands            | `AutocompleteTextareaComponent.commandAutocompleteItemTemplate` | [`CustomTemplatesService.commandAutocompleteItemTemplate$`](../services/CustomTemplatesService.mdx) |
-| Item in the channel list                                    | `ChannelListComponent.customChannelPreviewTemplate`             | [`CustomTemplatesService.customChannelPreviewTemplate$`](../services/CustomTemplatesService.mdx)    |
-| The message input template used when editing a message      | `MessageActionsBoxComponent.messageInputTemplate`               | [`CustomTemplatesService.messageInputTemplate$`](../services/CustomTemplatesService.mdx)            |
-| The message input template used when editing a message      | `MessageComponent.messageInputTemplate`                         | [`CustomTemplatesService.messageInputTemplate$`](../services/CustomTemplatesService.mdx)            |
-| The template used for displaying a mention inside a message | `MessageComponent.mentionTemplate`                              | [`CustomTemplatesService.mentionTemplate$`](../services/CustomTemplatesService.mdx)                 |
-| The autocomplete list item template for mentioning users    | `MessageInputComponent.mentionAutocompleteItemTemplate`         | [`CustomTemplatesService.mentionAutocompleteItemTemplate$`](../services/CustomTemplatesService.mdx) |
-| The autocomplete list item template for commands            | `MessageInputComponent.commandAutocompleteItemTemplate`         | [`CustomTemplatesService.commandAutocompleteItemTemplate$`](../services/CustomTemplatesService.mdx) |
-| The template for emoji picker                               | `MessageInputComponent.emojiPickerTemplate$`                    | [`CustomTemplatesService.emojiPickerTemplate$`](../services/CustomTemplatesService.mdx)             |
-| The template used to display a message in the message list  | `MessageListComponent.messageTemplate`                          | [`CustomTemplatesService.messageTemplate$ `](../services/CustomTemplatesService.mdx)                |
-| The message input template used when editing a message      | `MessageListComponent.messageInputTemplate`                     | [`CustomTemplatesService.messageInputTemplate$`](../services/CustomTemplatesService.mdx)            |
-| The template used for displaying a mention inside a message | `MessageListComponent.mentionTemplate`                          | [`CustomTemplatesService.mentionTemplate$`](../services/CustomTemplatesService.mdx)                 |
-| The typing indicator template used in the message list      | `MessageListComponent.typingIndicatorTemplate`                  | [`CustomTemplatesService.typingIndicatorTemplate$`](../services/CustomTemplatesService.mdx)         |
-| The typing indicator template used in the message list      | `MessageReactionsComponent.typingIndicatorTemplate`             | [`CustomTemplatesService.typingIndicatorTemplate$`](../services/CustomTemplatesService.mdx)         |
-| The autocomplete list item template for commands            | `MessageInputConfigService.commandAutocompleteItemTemplate`     | [`CustomTemplatesService.commandAutocompleteItemTemplate$`](../services/CustomTemplatesService.mdx) |
-| The autocomplete list item template for mentioning users    | `MessageInputConfigService.mentionAutocompleteItemTemplate`     | [`CustomTemplatesService.mentionAutocompleteItemTemplate$`](../services/CustomTemplatesService.mdx) |
-| The template for emoji picker                               | `MessageInputConfigService.emojiPickerTemplate`                 | [`CustomTemplatesService.emojiPickerTemplate$`](../services/CustomTemplatesService.mdx)             |
-| The template for channel actions                            | `ChannelHeaderComponent.channelActionsTemplate`                 | [`CustomTemplatesService.channelActionsTemplate$`](../services/CustomTemplatesService.mdx)          |
-
-## `ChatClient.notification$` renamed to `events$`
-
-The `notification$` stream on the [`ChatClientService`](../services/ChatClientService.mdx) was renamed to `events$` as it better represents what this Observable does.
-
-The `events$` stream emits the received [client, notification and user presence events](https://getstream.io/chat/docs/javascript/event_object/?language=javascript).
-
-The payload of this Observable was renamed from `Notification` to `ClientEvent`.
-
-## Custom action names removed
-
-Use our [permission framework](https://getstream.io/chat/docs/javascript/chat_permission_policies/?language=javascript&q=slow%20mode) to control the authorization of the following message actions:
-
-| Custom action name | Channel capability   | Comment                                      |
-| ------------------ | -------------------- | -------------------------------------------- |
-| `quote`            | `quote-message`      |                                              |
-| `pin`              | `pin-message`        | Currently turned off because not implemented |
-| `flag`             | `flag-message`       |                                              |
-| `edit`             | `update-own-message` |                                              |
-| `edit-any`         | `update-any-message` |                                              |
-
-The `mute` action is removed.
diff --git a/docusaurus/docs/Angular/basics/upgrade-v3.mdx b/docusaurus/docs/Angular/basics/upgrade-v3.mdx
deleted file mode 100644
index c8bd3911..00000000
--- a/docusaurus/docs/Angular/basics/upgrade-v3.mdx
+++ /dev/null
@@ -1,48 +0,0 @@
----
-id: upgrade-v3
-title: Upgrade from v3
----
-
-## About version 4
-
-Version 4 of `stream-chat-angular` brings a new and improved theming system. To use the new system please refer to our new [theming guide](../theming/introduction.mdx).
-
-## Theme-v1
-
-The old theme can still be used with the latest SDK versions however, you might need to update your custom CSS as some changes were introduced to theme-v1.
-
-Updating from theme-v1 to theme-v2 will require to rewrite your custom CSS code as the new theme has a new variable system, and all the components were restructured.
-
-Theme-v1 is now deprecated and will be removed in a future release.
-
-## Thread layout
-
-Previously you had to provide a selector for the message list and message input component projected inside the [thread component](../components/ThreadComponent.mdx).
-
-```html
-<stream-thread name="thread">
-  <stream-message-list
-    name="thread-message-list"
-    mode="thread"
-  ></stream-message-list>
-  <stream-message-input
-    mode="thread"
-    name="thread-message-input"
-  ></stream-message-input>
-</stream-thread>
-```
-
-You don't need to provide those selectors anymore, anything inside the content part of `stream-thread` HTML element will be projected inside the thread component:
-
-```html
-<stream-thread name="thread">
-  <stream-message-list mode="thread"></stream-message-list>
-  <stream-message-input mode="thread"></stream-message-input>
-</stream-thread>
-```
-
-Providing the selector won't cause a problem, but it's unnecessary.
-
-## `device-width` module was removed
-
-The `device-width` utility module was removed. If you rely on this code inside your chat application, you'll have to update your code.
diff --git a/docusaurus/docs/Angular/basics/upgrade-v4.mdx b/docusaurus/docs/Angular/basics/upgrade-v4.mdx
deleted file mode 100644
index 570727c1..00000000
--- a/docusaurus/docs/Angular/basics/upgrade-v4.mdx
+++ /dev/null
@@ -1,397 +0,0 @@
----
-id: upgrade-v4
-title: Upgrade from v4
----
-
-import Tabs from "@theme/Tabs";
-import TabItem from "@theme/TabItem";
-import MessageMenuBefore from "../assets/message-menu-before.png";
-import MessageMenuAfterDesktop from "../assets/message-menu-after-desktop.png";
-import MessageMenuAfterMobile from "../assets/message-menu-after-mobile.png";
-import ImageShowcase from "@site/src/components/ImageShowcase";
-import MessageEditBefore from "../assets/message-edit-before.png";
-import MessageEditAfter from "../assets/message-edit-after.png";
-
-## Highlights
-
-- New message menu and message edit UIs to improve usability
-- Provide more CSS customization options for the avatar and icon components (to avoid providing a custom component for even basic customization)
-- Drop support for [Angular 12-14](https://getstream.io/chat/docs/sdk/angular/basics/angular-version-support/) and [theme-v1](https://getstream.io/chat/docs/sdk/angular/concepts/themeing/)
-
-Want to see it all in action? Check out [the demo application](https://angular-chat-demo-getstreamio.vercel.app/) or try it out in your own application using the instructions below.
-
-<ImageShowcase
-  border
-  items={[
-    {
-      image: MessageMenuBefore,
-      caption:
-        "Before (mobile) - Opening message menu or an image attachment used to take two taps",
-      alt: "Message menu - before",
-    },
-    {
-      image: MessageMenuAfterMobile,
-      caption:
-        "After (mobile) - Message menu is triggered by long press anywhere in the message bubble (attachment or the blue area), no more double tap required for opening image attachments",
-      alt: "Message menu - after",
-    },
-  ]}
-/>
-
-<ImageShowcase
-  border
-  items={[
-    {
-      image: MessageEditBefore,
-      caption: "Message edit UI - before",
-      alt: "Message edit - before",
-    },
-    {
-      image: MessageEditAfter,
-      caption: "Message edit UI - after",
-      alt: "Message edit - after",
-    },
-  ]}
-/>
-
-## Get started
-
-<Tabs groupId="examples">
-<TabItem value="Angular18" label="Angular 18">
-
-```shell
-npm install stream-chat-angular ngx-float-ui@18
-
-# or
-yarn add stream-chat-angular stream-chat @ngx-translate/core angular-mentions ngx-float-ui@18 @floating-ui/dom
-```
-
-</TabItem>
-<TabItem value="Angular17" label="Angular 17">
-
-```shell
-npm install stream-chat-angular ngx-float-ui@17
-
-# or
-yarn add stream-chat-angular stream-chat @ngx-translate/core angular-mentions ngx-float-ui@17 @floating-ui/dom
-```
-
-</TabItem>
-<TabItem value="Angular16" label="Angular 16">
-
-```shell
-npm install stream-chat-angular ngx-float-ui@16
-
-# or
-yarn add stream-chat-angular stream-chat @ngx-translate/core angular-mentions ngx-float-ui@16 @floating-ui/dom
-```
-
-</TabItem>
-<TabItem value="Angular15" label="Angular 15">
-
-```shell
-npm install stream-chat-angular @ngx-translate/core@14 ngx-float-ui@15
-
-# or
-yarn add stream-chat-angular stream-chat @ngx-translate/core@14 angular-mentions ngx-float-ui@15 @floating-ui/dom
-```
-
-</TabItem>
-</Tabs>
-
-## Breaking changes
-
-### Angular version support
-
-Angular versions 12-14 are no longer supported. You can use the [Angular update guide](https://update.angular.io/) to update your application.
-
-### Theme v1 is removed
-
-Theme-v1 was deprecated in version 4. Most customers already use theme-v2 which used to be imported from this path:
-
-```scss
-@import "stream-chat-angular/src/assets/styles/v2/scss/index.scss";
-```
-
-From version 5 this path should be used:
-
-```scss
-@import "stream-chat-angular/src/assets/styles/scss/index.scss";
-
-// or if you're using CSS
-@import "stream-chat-angular/src/assets/styles/css/index.css";
-```
-
-In case you run into an SCSS issue related to icons, you should extend the stylesheet import like this:
-
-```scss
-@use "stream-chat-angular/src/assets/styles/scss/variables" with
-  ($assetsPath: "../node_modules/stream-chat-angular/src/assets/assets");
-@import "stream-chat-angular/src/assets/styles/scss/index.scss";
-```
-
-If Angular can't find the stylesheet, you should include `node_modules` in your `angular.json` in the `build.options` section:
-
-```
-"stylePreprocessorOptions": {
-  "includePaths": ["./node_modules"]
-}
-```
-
-No futher action is required for customers who were already using theme-v2.
-
-Customers who used to use theme-v1 now need to use theme-v2. Updating from theme-v1 to theme-v2 will require to rewrite your custom CSS code as the new theme has a new variable system, and all the components were restructured. To help you get started please refer our [theming guide](../theming/introduction.mdx).
-
-### New message menu UI
-
-The old message menu UI caused usability issues on mobile devices. The new UI address these issues, and adds some other improvements as well.
-
-<ImageShowcase
-  border
-  items={[
-    {
-      image: MessageMenuBefore,
-      caption:
-        "Before (mobile) - Opening message menu or an image attachment used to take two taps",
-      alt: "Message menu - before",
-    },
-    {
-      image: MessageMenuAfterMobile,
-      caption:
-        "After (mobile) - Message menu is triggered by long press anywhere in the message bubble (attachment or the blue area), no more double tap required for opening image attachments",
-      alt: "Message menu - after",
-    },
-  ]}
-/>
-
-<ImageShowcase
-  border
-  items={[
-    {
-      image: MessageMenuBefore,
-      caption: "Before (desktop)",
-      alt: "Message menu - before",
-    },
-    {
-      image: MessageMenuAfterDesktop,
-      caption: "After (desktop)",
-      alt: "Message menu - after",
-    },
-  ]}
-/>
-
-With the new UI these component-level changes are introduced:
-
-- The [`MessageListComponent`](../../components/MessageListComponent) no longer supports the `messageOptionsTrigger` parameter as this was a workaround for mobile UX problems. On desktop devices the message menu will be triggered by hovering anywhere in the message area. On mobile devices the message menu will be triggered by a longpress insde the message bubble area.
-- The [`MessageReactionsComponent`](../../components/MessageReactionsComponent) was split into two components. The `MessageReactionsComponent` is only responsible for displaying the existing reactions, and with that the `isSelectorOpen` input and `isSelectorOpenChange` output was removed. The [`MessageReactionsSelector`](../../components/MessageReactionsSelectorComponent) is a new component, that's responsible for adding/removing message reactions.
-
-### New message edit UI
-
-The modal-based edit message UI is replaced with a more modern approach: the message will be edited inside the main/thread [message input](../../components/MessageInputComponent).
-
-<ImageShowcase
-  border
-  items={[
-    {
-      image: MessageEditBefore,
-      caption: "Message edit UI - before",
-      alt: "Message edit - before",
-    },
-    {
-      image: MessageEditAfter,
-      caption: "Message edit UI - after",
-      alt: "Message edit - after",
-    },
-  ]}
-/>
-
-These are the component-level changes related to this feature:
-
-- The `EditMessageForm` component has been removed
-- The `editMessageFormTemplate$` and `messageInputTemplate$` have been removed from the [`CustomTemplatesService`](../../services/CustomTemplatesService)
-
-If you don't want to have this UI, you can set the [`watchForMessageToEdit`](../../components/MessageInputComponent/#watchformessagetoedit) input to `false` on the `MessageInputComponent`:
-
-```html
-<stream-message-input [watchForMessageToEdit]="false"></stream-message-input>
-```
-
-The `stream-message-input` still has all inputs/outputs you need to create a custom message edit UI:
-
-```html
-<stream-message-input
-  [watchForMessageToEdit]="false"
-  [displaySendButton]="false"
-  [message]="messageToEdit"
-  [sendMessage$]="sendMessage$Input"
-  (messageUpdate)="messageUpdateHandler()"
-></stream-message-input>
-```
-
-### Signature change for custom channel list event handlers
-
-The `channelListSetter`'s signature changed for the following custom event handlers of the `ChannelService`:
-
-- `customNewMessageNotificationHandler`
-- `customAddedToChannelNotificationHandler`
-- `customRemovedFromChannelNotificationHandler`
-- `customChannelDeletedHandler`
-- `customChannelUpdatedHandler`
-- `customChannelTruncatedHandler`
-- `customChannelHiddenHandler`
-- `customChannelVisibleHandler`
-- `customNewMessageHandler`
-
-If you're adding a new channel to the list from these handlers, you need to make sure to provide a [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel.
-
-Example code:
-
-```typescript
-private async customEventHandler(
-  clientEvent: ClientEvent,
-  channelListSetter: (channels: Channel<DefaultStreamChatGenerics>[]) => void
-) {
-  const channelResponse = clientEvent!.event!.channel!;
-  // Change 1: create a channel from `ChannelResponse`
-  const newChanel = this.chatService.chatClient.channel(
-    channelResponse.type,
-    channelResponse.id
-  );
-  try {
-    // Change 2: call .watch() before adding it to the channel list
-    await newChanel.watch();
-    const existingChannels = this.channelService.channels;
-    channelListSetter([newChanel, ...existingChannels]);
-  } catch (error) {
-    console.error('Failed to watch channel', error);
-  }
-}
-```
-
-If you need more information, we have a [channel list guide](../../concepts/channel-list/) you can check out.
-
-### Removed deprecated features
-
-#### `MessageListComponent`
-
-- No longer accepts the `customMessageActions` input. You can use the [`MessageActionsService`](../../services/MessageActionsService/#customactions) for configuring custom message actions.
-
-[Go to documentation](../../components/MessageListComponent)
-
-#### `MessageComponent`
-
-- No longer accepts the `customActions` input. You can use the [`MessageActionsService`](../../services/MessageActionsService/#customactions) for configuring custom message actions.
-
-[Go to documentation](../../components/MessageComponent)
-
-#### `MessageActionsBoxComponent`
-
-- No longer accepts the `isOpen` input. The `Message` component will take care of hiding/showing the action box component.
-- The `customActions` input has been removed. You can use the [`MessageActionsService`](../../services/MessageActionsService/#customactions) for configuring custom message actions.
-- The `displayedActionsCount` output has been removed. Moving forward the [`MessageActionsService`](../../services/MessageActionsService/#customactions) will be able to provide this information.
-- The `isEditing` output has been removed. Moving forward the [`MessageActionsService`](../../services/MessageActionsService/#customactions) will be able to provide this information.
-
-[Go to documentation](../../components/MessageActionsBoxComponent)
-
-#### `messageActionsBoxTemplate$`
-
-- No longer accepts the `isOpen` input. The `Message` component will take care of hiding/showing the action box component.
-- The `customActions` input has been removed. You can use the [`MessageActionsService`](../../services/MessageActionsService/#customactions) for configuring custom message actions.
-- The `displayedActionsCountChangeHandler` input has been removed. Moving forward the [`MessageActionsService`](../../services/MessageActionsService/#customactions) will be able to provide this information.
-
-[Go to documentation](../../services/CustomTemplatesService/#messageactionsboxtemplate)
-
-#### `ImageLoadService`
-
-The `ImageLoadService` is now removed. It's no longer required since the SDK uses a more [advanced image sizing method](../../components/AttachmentListComponent/#image-and-video-sizing).
-
-#### `ChannelListToggleService`
-
-The `ChannelListToggleService` is now removed as it was only used in theme-v1. For theme-v2 please refer to the [responsive layout guide](../code-examples/responsive-layout.mdx).
-
-### Channel query error handling
-
-In previous versions if an error occured during channel load, the `channelService.channels$` Observable emitted an error, which would close the stream. Users would have to reload the page to be able to reinitialize the `ChannelService`. This isn't a sensible default behavior. From version 5 the `channels$` Observable will never emit an error, the channel query result can be observed using the [`channelService.channelQueryState$`](../../services/ChannelService/#channelquerystate). With this change the `options.keepAliveChannels$OnError` is no longer necessary, and has been removed.
-
-### Type changes
-
-- Event handlers with `Function` type are changed to `() => void`
-- Event handlers with `any` return types are changed to `void` return type
-- The action handler signature of (custom) message actions was changed from `(message: StreamMessage, isMine: boolean) => void` to `(message: StreamMessage, extraParams: MessageActionHandlerExtraParams) => void`. The `isMine` flag is part of the `MessageActionHandlerExtraParams` object.
-- The `MessageActionBoxItemContext` is changed, `isMine` is removed, and `params: MessageActionHandlerExtraParams` is added. The `isMine` flag is part of the `MessageActionHandlerExtraParams` object.
-
-### Default reactions
-
-To better align with other SDKs, the default reaction set has been changed: the `angry` reaction is removed. You can provide your own reaction set using the [`MessageReactionsService`](../../services/MessageReactionsService/#reactions)
-
-### Component customization
-
-#### Avatar
-
-To allow better customization for avatar, the `size` input has been removed, and was replaced with the [`--str-chat__avatar-size` CSS variable](../../theming/component-variables/#avatar).
-
-With this change the `size` input is no longer supported on the [`AvatarPlaceholderComponent`](../../components/AvatarPlaceholderComponent), [`AvatarComponent`](../../components/AvatarComponent), and the [`avatarTemplate$`](../../services/CustomTemplatesService/#avatartemplate).
-
-#### Icon
-
-In previous versions it was hard to customize icon size and color from CSS, and using custom icons required overriding the built-in icon component. To solve these issues stream-chat-angular@5 introduces a better customization system for icons.
-
-Please refer to the [theming guide](../../theming/themingv2/#custom-icons) that explains how to customize icons.
-
-With this change the `size` input is no longer necessary and has been removed from the the [`IconPlaceholderComponent`](../../components/IconPlaceHolderComponent), [`IconComponent`](../../components/IconComponent), and the [`iconTemplate$`](../../services/CustomTemplatesService/#icontemplate).
-
-The icon names have also been consolidated, so if you're using a custom icon component, you need to update it accordingly:
-
-| Previous name          | Change                                |
-| ---------------------- | ------------------------------------- |
-| `action-icon`          | Renamed to `action`                   |
-| `delivered-icon`       | Renamed to `delivered`                |
-| `read-icon`            | Renamed to `read`                     |
-| `reaction-icon`        | Renamed to `reaction`                 |
-| `connection-error`     | Removed, it was only used in theme-v1 |
-| `send`                 | Unchanged                             |
-| `file-upload`          | Removed, it was only used in theme-v1 |
-| `retry`                | Unchanged                             |
-| `close`                | Unchanged                             |
-| `file`                 | Removed, it was only used in theme-v1 |
-| `audio-file`           | Unchanged                             |
-| `reply`                | Removed, it was only used in theme-v1 |
-| `close-no-outline`     | Removed, use `close` instead          |
-| `reply-in-thread`      | Unchanged                             |
-| `arrow-left`           | Unchanged                             |
-| `arrow-right`          | Unchanged                             |
-| `menu`                 | Removed, it was only used in theme-v1 |
-| `arrow-up`             | Unchanged                             |
-| `arrow-down`           | Unchanged                             |
-| `chat-bubble`          | Unchanged                             |
-| `attach`               | Unchanged                             |
-| `unspecified-filetype` | Unchanged                             |
-| `download`             | Unchanged                             |
-| `error`                | Unchanged                             |
-| `play`                 | Unchanged                             |
-| `pause`                | Unchanged                             |
-
-#### Loading indicator
-
-To allow better customization for loading indicator, the `size` input has been removed, and was replaced with the [`--str-chat__loading-indicator-size` CSS variable](../../theming/component-variables/#loadingindicator).
-
-With this change the `size` input is no longer supported on the [`LoadingIndicatorPlaceholderComponent`](../../components/LoadingIndicatorPlaceholderComponent), [`LoadingIndicatorComponent`](../../components/LoadingIndicatorComponent), and the [`loadingIndicatorTemplate$`](../../services/CustomTemplatesService/#loadingindicatortemplate). The `loadingIndicatorTemplate$` now accepts `TemplateRef<void>` instead of `TemplateRef<LoadingIndicatorContext>`
-
-### Channel invites
-
-Keeping track of pending channel invites is no longer automatic. If you're using channel invites and want to enable this behavior you need to initialize the [`ChatClientService`](../services/ChatClientService.mdx) with the following flag:
-
-```typescript
-this.chatService.init("<API key>", "<user>", "<token provider>", {
-  trackPendingChannelInvites: true,
-});
-```
-
-## Other changes
-
-### Unused packages
-
-The `ngx-popperjs` package is no longer used, so you can remove the related packages from your `package.json` file:
-
-- `@popperjs/core`
-- `ngx-popperjs`
diff --git a/docusaurus/docs/Angular/code-examples/_category_.json b/docusaurus/docs/Angular/code-examples/_category_.json
deleted file mode 100644
index 817e0360..00000000
--- a/docusaurus/docs/Angular/code-examples/_category_.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "label": "Code examples",
-  "position": 4
-}
diff --git a/docusaurus/docs/Angular/code-examples/channel-invites.mdx b/docusaurus/docs/Angular/code-examples/channel-invites.mdx
deleted file mode 100644
index 137cf5b5..00000000
--- a/docusaurus/docs/Angular/code-examples/channel-invites.mdx
+++ /dev/null
@@ -1,508 +0,0 @@
----
-id: channel-invites
-title: Channel invites
----
-
-import InviteButton from "../assets/invite-button-screenshot.png";
-import InviteModal1 from "../assets/invite-modal1-screenshot.png";
-import InviteModal2 from "../assets/invite-modal2-screenshot.png";
-import Invites from "../assets/channel-invites-screenshot.png";
-
-This guide gives you a step-by-step tutorial on how to use [channel invites](https://getstream.io/chat/docs/javascript/channel_invites/?language=javascript) in your chat application.
-
-## Invite button
-
-The [`CustomTemplatesService`](../services/CustomTemplatesService.mdx) has a property called `channelActionsTemplate$` that can be used to add action buttons to the [channel header](../components/ChannelHeaderComponent.mdx).
-
-Let's create a component for the invite button that we'll add to the channel header:
-
-```
-ng g c invite-button
-```
-
-### HTML template
-
-We create a simplistic UI with an "Invite users" button that opens a [modal](../components/ModalComponent.mdx) where users can search for other users in the application. The [`NotificationList` component](../components/NotificationListComponent.mdx) is used to display any error messages that may occur during the invite request.
-
-```html
-<button *ngIf="canInviteUsers" (click)="isModalOpen = true">
-  Invite users
-</button>
-<stream-modal [(isOpen)]="isModalOpen">
-  <div class="modal-content">
-    <div class="title">Invite users</div>
-    <div class="invited-users">
-      <div *ngFor="let u of usersToInvite">{{ u.name || u.id }}</div>
-    </div>
-    <div>
-      <input #input type="search" (change)="addUser()" list="app-users" />
-      <datalist id="app-users">
-        <option (select)="addUser()" *ngFor="let o of autocompleteOptions">
-          {{ o.name || o.id }}
-        </option>
-      </datalist>
-    </div>
-    <button class="invite" (click)="inviteMembers()">Send invitation(s)</button>
-    <stream-notification-list class="notifications"></stream-notification-list>
-  </div>
-</stream-modal>
-```
-
-### Styling
-
-We are using stream-chat theme variables to match the default chat theme. You can read more about theme variables in our [theming guide](../theming/introduction.mdx).
-
-```scss
-.modal-content {
-  width: 600px;
-  padding: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  gap: 15px;
-
-  .title {
-    font-size: 23px;
-    font-weight: 700;
-  }
-
-  input {
-    width: 200px;
-    padding: 10px;
-    border: none;
-    background-color: var(--str-chat__message-textarea-background-color);
-    color: var(--str-chat__message-textarea-color);
-    border-radius: var(--str-chat__message-textarea-border-radius);
-    border-block-start: var(--str-chat__message-textarea-border-block-start);
-    border-block-end: var(--str-chat__message-textarea-border-block-end);
-    border-inline-start: var(--str-chat__message-textarea-border-inline-start);
-    border-inline-end: var(--str-chat__message-textarea-border-inline-end);
-  }
-
-  .invited-users {
-    text-align: center;
-  }
-
-  .add {
-    margin-left: 5px;
-  }
-
-  .notifications {
-    width: 100%;
-  }
-}
-
-button {
-  background-color: var(--str-chat__cta-button-background-color);
-  border: none;
-  border-radius: var(--str-chat__cta-button-border-radius);
-  color: var(--str-chat__cta-button-color);
-  padding: 10px;
-  cursor: pointer;
-}
-```
-
-### Component logic
-
-Let's break down the most important parts of the component's logic:
-
-- We define an input with the type `Channel` to access the current active channel - this will be provided by the [`ChannelHeader`](../components/ChannelHeaderComponent.mdx) component
-- We check if the current user has the `update-channel-members` [capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript) to see if they can invite members (it's important to note that [not every channel can be extended with new members](https://getstream.io/chat/docs/javascript/creating_channels/?language=javascript#2.-creating-a-channel-for-a-list-of-members))
-- The `autocompleteUsers` method of the [`ChatClientService`](../services/ChatClientService.mdx) can be used to search for users in the application
-- The `inviteMembers` method of the `Channel` can be used to invite one or more members to the channel
-- The [`NotificationService`](../services/NotificationService.mdx) can be used to notify the user about the result of the invite request
-
-```typescript
-import {
-  Component,
-  ElementRef,
-  Input,
-  OnChanges,
-  OnInit,
-  SimpleChanges,
-  ViewChild,
-} from "@angular/core";
-import { fromEvent } from "rxjs";
-import { debounceTime, switchMap } from "rxjs/operators";
-import { Channel, UserResponse } from "stream-chat";
-import { ChatClientService, NotificationService } from "stream-chat-angular";
-
-@Component({
-  selector: "app-invite-button",
-  templateUrl: "./invite-button.component.html",
-  styleUrls: ["./invite-button.component.scss"],
-})
-export class InviteButtonComponent implements OnInit, OnChanges {
-  @Input() channel?: Channel;
-  usersToInvite: UserResponse[] = [];
-  canInviteUsers = false;
-  isModalOpen = false;
-  autocompleteOptions: UserResponse[] = [];
-  @ViewChild("input", { static: true })
-  private input!: ElementRef<HTMLInputElement>;
-
-  constructor(
-    private chatClientService: ChatClientService,
-    private notificationService: NotificationService
-  ) {}
-
-  ngOnInit(): void {
-    fromEvent(this.input.nativeElement, "input")
-      .pipe(
-        debounceTime(300),
-        switchMap(() =>
-          this.chatClientService.autocompleteUsers(
-            this.input.nativeElement.value
-          )
-        )
-      )
-      .subscribe((users) => (this.autocompleteOptions = users));
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes.channel && this.channel) {
-      this.canInviteUsers = (
-        this.channel.data?.own_capabilities as string[]
-      ).includes("update-channel-members");
-      this.usersToInvite = [];
-      this.autocompleteOptions = [];
-    }
-  }
-
-  async inviteMembers() {
-    try {
-      await this.channel?.inviteMembers(this.usersToInvite.map((u) => u.id));
-      this.notificationService.addTemporaryNotification(
-        "User(s) successfully invited",
-        "success"
-      );
-      this.usersToInvite = [];
-      this.autocompleteOptions = [];
-      this.isModalOpen = false;
-    } catch {
-      this.notificationService.addTemporaryNotification(
-        `User(s) couldn't be invited`,
-        "error"
-      );
-    }
-  }
-
-  addUser() {
-    const inputValue = this.input.nativeElement.value;
-    const user = this.autocompleteOptions.find(
-      (u) => u.id === inputValue || u.name === inputValue
-    );
-    if (user) {
-      this.usersToInvite.push(user);
-      this.input.nativeElement.value = "";
-      this.autocompleteOptions = [];
-    }
-  }
-}
-```
-
-### Providing the invite button to the channel header
-
-Lastly, we provide the `InviteButton` component to the `ChannelHeader`.
-
-Create the template (for example in your `AppComponent`):
-
-```html
-<ng-template #channelActionsTemplate let-channel="channel">
-  <app-invite-button [channel]="channel"></app-invite-button>
-</ng-template>
-```
-
-Register the template in your TypeScript code (for example in your `AppComponent`).
-
-These are the necessary steps:
-
-- Create a reference to the custom template
-- Import the [CustomTemplatesService](../services/CustomTemplatesService.mdx)
-- Register your custom template
-
-```typescript
-import {
-  AfterViewInit,
-  Component,
-  TemplateRef,
-  ViewChild,
-} from "@angular/core";
-import {
-  ChatClientService,
-  ChannelService,
-  StreamI18nService,
-} from "stream-chat-angular";
-import {
-  CustomTemplatesService,
-  ChannelActionsContext,
-} from "stream-chat-angular";
-import { environment } from "../environments/environment";
-
-@Component({
-  selector: "app-root",
-  templateUrl: "./app.component.html",
-  styleUrls: ["./app.component.scss"],
-})
-export class AppComponent implements AfterViewInit {
-  // Create a reference to the custom template
-  @ViewChild("channelActionsTemplate")
-  private channelActionsTemplate!: TemplateRef<ChannelActionsContext>;
-
-  constructor(
-    private chatService: ChatClientService,
-    private channelService: ChannelService,
-    private streamI18nService: StreamI18nService,
-    private customTemplatesService: CustomTemplatesService // Import customTemplatesService
-  ) {
-    void this.chatService.init(
-      environment.apiKey,
-      environment.userId,
-      environment.userToken
-    );
-    void this.channelService.init({
-      type: "messaging",
-      members: { $in: [environment.userId] },
-    });
-    this.streamI18nService.setTranslation();
-  }
-
-  ngAfterViewInit(): void {
-    // Register your custom template
-    this.customTemplatesService.channelActionsTemplate$.next(
-      this.channelActionsTemplate
-    );
-  }
-}
-```
-
-This is how the channel header looks with the invite button present:
-
-<img src={InviteButton} width="600" />
-
-And this is how the invite modal turned out:
-
-<img src={InviteModal1} width="600" />
-
-<img src={InviteModal2} width="400" />
-
-## Pending invitations
-
-The next step is to show the pending invitations to the user.
-
-### Invitation notification component
-
-First we create a component that will display a pending invitation:
-
-```
-ng g c invitation --inline-template --inline-style
-```
-
-Here are the most important parts of the component:
-
-- The component will be displayed inside the [`NotificationList`](../components/NotificationListComponent.mdx) component
-- We create an input with `Channel` type, this will be provided by the `NotificationList`
-- We create an input called `dismissFn`, this will also be provided by the `NotificationList` and can be used to dismiss the notification
-- The [`ChatClientService`](../services/ChatClientService.mdx) can be used to get the current chat user's id, this will be necessary when accepting/rejecting the invite
-- The invite can be accepted with the `acceptInvite` method of the `channel`
-- The invite can be rejected with the `rejectInvite` method of the `channel`
-
-The component:
-
-```typescript
-import { Component, Input, OnInit } from "@angular/core";
-import { Channel } from "stream-chat";
-import { ChatClientService, NotificationService } from "stream-chat-angular";
-
-@Component({
-  selector: "app-invitation",
-  template: `
-    <div>
-      You have been invited to the
-      {{ channelName }} channel. <button (click)="accept()">Accept</button> |
-      <button (click)="decline()">Decline</button> |
-      <button (click)="dismissFn()">Dismiss</button>
-    </div>
-  `,
-  styles: [
-    "button {border: none; background-color: transparent; color: var(--blue); font-weight: bold; cursor: pointer}",
-  ],
-})
-export class InvitationComponent implements OnInit {
-  @Input() channel?: Channel;
-  @Input() dismissFn!: Function;
-
-  constructor(
-    private notificationService: NotificationService,
-    private chatClientService: ChatClientService
-  ) {}
-
-  ngOnInit(): void {}
-
-  accept() {
-    this.sendRequest("accept");
-  }
-
-  async decline() {
-    this.sendRequest("reject");
-  }
-
-  get channelName() {
-    return this.channel?.data?.name || this.channel?.id;
-  }
-
-  private async sendRequest(answer: "accept" | "reject") {
-    const payload = {
-      user_id: this.chatClientService?.chatClient.user?.id,
-    };
-    const request =
-      answer === "accept"
-        ? async () => await this.channel?.acceptInvite(payload)
-        : async () => await this.channel?.rejectInvite(payload);
-    try {
-      await request();
-      this.dismissFn();
-      this.notificationService.addTemporaryNotification(
-        `Invite from ${this.channelName} successfully ${answer}ed`,
-        "success"
-      );
-    } catch {
-      this.notificationService.addTemporaryNotification(
-        `An error occured during ${answer}ing the invitation from ${this.channelName}`,
-        "error"
-      );
-    }
-  }
-}
-```
-
-### Displaying the invitations
-
-The next step will be to display the invitations.
-
-#### Invitation template
-
-We will have to create the invitation template that can be passed to the [`NotificationList`](../components/NotificationListComponent.mdx) component.
-
-Add this to your `app.component.html` file:
-
-```html
-<ng-template #inviteTemplate let-channel="channel" let-dismissFn="dismissFn">
-  <app-invitation [channel]="channel" [dismissFn]="dismissFn"></app-invitation>
-</ng-template>
-```
-
-Add a reference to the template in your `app.component.ts`:
-
-```typescript
-@ViewChild('inviteTemplate') private inviteTemplate!: TemplateRef<{channel: Channel<DefaultStreamChatGenerics> | ChannelResponse<DefaultStreamChatGenerics>}>;
-```
-
-#### Displaying the invitations
-
-The [`ChatClientService`](../services/ChatClientService.mdx) can keep track of pending invites, to enable this you have to initialize the service with the following flag:
-
-```typescript
-this.chatService.init("<API key>", "<user>", "<token provider>", {
-  trackPendingChannelInvites: true,
-});
-```
-
-The `pendingInvites$` Observable on the [`ChatClientService`](../services/ChatClientService.mdx) can notify us about the pending invitations of the current user. Let's subscribe to this Observable and [display the invites](../services/NotificationService.mdx) in the `ngOnInit` method of the `app.component.ts`
-
-```typescript
-ngOnInit(): void {
-  this.chatService.pendingInvites$.pipe(pairwise()).subscribe((pair) => {
-    const [prevInvites, currentInvites] = pair;
-    const notShownInvites = currentInvites.filter(
-      (i) => !prevInvites.find((prevI) => prevI.cid === i.cid)
-    );
-    notShownInvites.forEach((i) =>
-      this.notificationService.addPermanentNotification(
-        this.inviteTemplate,
-        'info',
-        undefined,
-        { channel: i }
-      )
-    );
-  });
-}
-```
-
-The above method will display all the pending invitations on page load and display every new invitation received later.
-
-This is how the invitation notifications look like:
-
-<img src={Invites} width="600" />
-
-## Channel list
-
-### Channel filter
-
-If a user is invited to a channel they immediately become member of the channel (the membership applies even if the invite is rejected).
-This means that if you use a channel filter that is based on membership (for example `{members: {$in: [<user id>]}}`), channels with pending and rejected invites will be returned and displayed in the channel list as well.
-If this is not what you need, you can use the [`joined`](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript#channel-queryable-built-in-fields) flag to only list channels that the user was directly added to or the invitation was accepted by the user.
-
-The channel filter can be provided to the `init` method of the [`ChannelService`](../services/ChannelService.mdx), here is an example:
-
-```typescript
-this.channelService.init({
-  joined: true,
-});
-```
-
-### `notification.added_to_channel` event
-
-It's important to note that the filtering set above is not applied to [events](https://getstream.io/chat/docs/javascript/event_object/?language=javascript) which means that you'll have to override the [default channel list behavior](../services/ChannelService.mdx/#channels) if you don't want channels with pending invites to be added to the channel list when a `notification.added_to_channel` event is received.
-
-To override the default behavior create a custom event handler in `app.component.ts` that checks if the user was invited to the channel or added directly and only adds the channel to the list if the user was added directly:
-
-```typescript
-private async customAddedToChannelNotificationHandler(
-  clientEvent: ClientEvent,
-  channelListSetter: (channels: Channel<DefaultStreamChatGenerics>[]) => void
-) {
-  if (clientEvent.event.member?.invited) {
-    return;
-  }
-  const channelResponse = clientEvent!.event!.channel!;
-  const newChanel = this.chatService.chatClient.channel(
-    channelResponse.type,
-    channelResponse.id
-  );
-  try {
-    await newChanel.watch();
-    const existingChannels = this.channelService.channels;
-    channelListSetter([newChanel, ...existingChannels]);
-  } catch (error) {
-    console.error('Failed to watch channel', error);
-  }
-}
-```
-
-Now register the handler to the [channel service](../services/ChannelService.mdx) in the constructor of `app.component.ts`:
-
-```
-this.channelService.customAddedToChannelNotificationHandler =
-      this.customAddedToChannelNotificationHandler.bind(this);
-```
-
-### `notification.invite_accepted` event
-
-The `notification.invite_accepted` event emitted by the [`ChatClientService`](../services/ChatClientService.mdx) signals that the user accepted an invitation to a channel, we should add the channel to the channel list, we can do this by re-initializing the channel list.
-
-Add this to the constructor of your `app.component.ts`:
-
-```typescript
-this.chatService.events$
-  .pipe(filter((n) => n.eventType === "notification.invite_accepted"))
-  .subscribe(() => {
-    this.channelService.reset();
-    void this.channelService.init({
-      joined: true,
-    });
-  });
-```
-
-If you're doing this in a component other than `AppComponent`, don't forget to unsubscribe from the `events$` Observable.
diff --git a/docusaurus/docs/Angular/code-examples/custom-attachments.mdx b/docusaurus/docs/Angular/code-examples/custom-attachments.mdx
deleted file mode 100644
index 4a018619..00000000
--- a/docusaurus/docs/Angular/code-examples/custom-attachments.mdx
+++ /dev/null
@@ -1,251 +0,0 @@
----
-id: custom-attachments
-title: Custom attachments
----
-
-import SupportedAttachments from "../_common/supported-attachments.mdx";
-import PaymentLink from "../assets/payment-link.png";
-import PaymentPreview from "../assets/payment-preview.png";
-import PaymentAttachment from "../assets/payment-attachment.png";
-
-The Stream API allows you to add any attachment to a message. The SDK supports some common types (such as images, videos, etc.) out-of-the-box, but you have to provide your own template to display others.
-
-The Angular SDK has out-of-the-box support for the following types:
-
-<SupportedAttachments />
-
-This guide will show you how to create custom attachments. In the example, we'll allow users to make payment links to send money to each other, but the same logic works for any attachment.
-
-## Creating the attachment
-
-Let's add a button to the message input component to make a payment link. How we create the attachment doesn't matter; the important part is to create an `Attachment` object we can provide to the [`AttachmentService`](../../services/AttachmentService).
-
-```html showLineNumbers
-<!-- Each message input component has it's own instance of the AttachmentService -->
-<stream-message-input #input>
-  <button
-    message-input-start
-    (click)="createPaymentLink(input.attachmentService)"
-  >
-    Payment link
-  </button>
-</stream-message-input>
-```
-
-```typescript showLineNumbers {18-22}
-// Optionally, you can define the shape of your custom attachments to get proper compile checks
-type MyGenerics = DefaultStreamChatGenerics & {
-  attachmentType: {
-    type: 'custom';
-    subtype: 'payment';
-    value: string;
-    paymentLink: string;
-  };
-};
-
-createPaymentLink(attachmentService: AttachmentService) {
-  const attachment: Attachment<MyGenerics> = {
-      type: 'custom',
-      subtype: 'payment',
-      value: `${Math.ceil(Math.random() * 99)}$`,
-      paymentLink: 'pay/me/or/else',
-  };
-  // Insert the attachment to the list of custom attachments
-  attachmentService.customAttachments$.next([
-      ...attachmentService.customAttachments$.value,
-      attachment,
-  ]);
-}
-```
-
-<img src={PaymentLink} width="500" />
-
-Clicking the "Payment link" will add the attachment to the message, but we don't yet have any visual indicator of this.
-
-## Custom attachment preview
-
-Let's add a preview of the payment attachment.
-
-To do this, we define the HTML template code for the preview that uses the `AttachmentService` to display the previews of the custom attachments:
-
-```html showLineNumbers
-<ng-template #customAttachmentPreviews let-service="service">
-  <div
-    style="padding: 8px; background-color: azure; border-radius: inherit"
-    class="custom-attachment-container"
-    *ngFor="let attachment of service.customAttachments$ | async"
-  >
-    <ng-container [ngSwitch]="attachment.subtype">
-      <div *ngSwitchCase="'payment'" class="payment-link">
-        🤑 {{ attachment.value }}
-      </div>
-    </ng-container>
-  </div>
-</ng-template>
-```
-
-If you have multiple different types of custom attachments, you can display them all here.
-
-Next, we register the template for the `customAttachmentPreviewListTemplate$` field of the [`CustomTemplatesService`](../../services/CustomTemplatesService):
-
-```typescript showLineNumbers {8-10}
-export class AppComponent implements AfterViewInit {
-  @ViewChild("customAttachmentPreviews")
-  customAttachmentPreviewsTemplate!: TemplateRef<CustomAttachmentPreviewListContext>;
-
-  constructor(private customTemplateService: CustomTemplatesService) {}
-
-  ngAfterViewInit(): void {
-    this.customTemplateService.customAttachmentPreviewListTemplate$.next(
-      this.customAttachmentPreviewsTemplate
-    );
-  }
-}
-```
-
-If we click the "Payment link" button, the preview is now visible:
-
-<img src={PaymentPreview} width="500" />
-
-## Delete attachment preview
-
-Let's allow deleting a payment link by extending the template of the preview:
-
-```html showLineNumbers {10-11}
-<ng-template #customAttachmentPreviews let-service="service">
-  <div
-    style="padding: 8px; background-color: azure; border-radius: inherit"
-    class="custom-attachment-container"
-    *ngFor="let attachment of service.customAttachments$ | async"
-  >
-    <ng-container [ngSwitch]="attachment.subtype">
-      <div *ngSwitchCase="'payment'" class="payment-link">
-        🤑 {{ attachment.value }}
-        <!-- Add a delete button -->
-        <button (click)="deletePaymentLink(attachment, service)">X</button>
-      </div>
-    </ng-container>
-  </div>
-</ng-template>
-```
-
-This is the implementation of the delete payment attachment method:
-
-```typescript showLineNumbers {5-8}
-deletePaymentLink(
-  attachment: Attachment<MyGenerics>,
-  attachmentService: AttachmentService<MyGenerics>
-) {
-  attachmentService.customAttachments$.next(
-    attachmentService.customAttachments$.value.filter(
-      (a) => a.paymentLink !== attachment.paymentLink
-    )
-  );
-}
-```
-
-## Loading state
-
-Sometimes, creating attachments happens asynchronously. If that's the case, you should disable message sending while the attachment is processing.
-
-Here is how you can do that by extending the `createPaymentLink` method:
-
-```typescript showLineNumbers {2-5,23-26}
-async createPaymentLink(attachmentService: AttachmentService) {
-    // Increment the upload counter to disable message send
-    attachmentService.attachmentUploadInProgressCounter$.next(
-      attachmentService.attachmentUploadInProgressCounter$.value + 1
-    );
-    const attachment: Attachment<MyGenerics> = {
-      type: 'custom',
-      subtype: 'payment',
-      value: `${Math.ceil(Math.random() * 99)}$`,
-      paymentLink: '',
-    };
-    // simulate network call
-    await new Promise<void>((resolve) => {
-      setTimeout(() => {
-        attachment.paymentLink = 'pay/me/or/else';
-        resolve();
-      }, 2000);
-    });
-    attachmentService.customAttachments$.next([
-      ...attachmentService.customAttachments$.value,
-      attachment,
-    ]);
-    // Attachment is ready, decrease the upload counter
-    attachmentService.attachmentUploadInProgressCounter$.next(
-      attachmentService.attachmentUploadInProgressCounter$.value - 1
-    );
-  }
-```
-
-## Custom attachment inside the message list
-
-The last missing step is to display the payment link inside the message list. This will be very similar to how we created the attachment preview.
-
-First, let's define an HTML template:
-
-```html showLineNumbers
-<ng-template #customAttachments let-attachments="attachments">
-  <div
-    class="custom-attachment-container"
-    *ngFor="let attachment of attachments"
-  >
-    <ng-container [ngSwitch]="attachment.subtype">
-      <div
-        style="margin-inline: 16px; margin-top: 8px"
-        *ngSwitchCase="'payment'"
-        class="payment-link"
-      >
-        💵
-        <a [href]="attachment.link" target="_blank">{{ attachment.value }}</a>
-      </div>
-    </ng-container>
-  </div>
-</ng-template>
-```
-
-The `attachments` template variable will contain the list of custom attachments.
-
-:::note
-By default the SDK will treat all `image`, `file`, `giphy`, `video` and `voiceRecording` attachments as built-in. All other type of attachments are treated as custom attachments.
-
-If you want to change the filtering logic, provide your own implementation using the `filterCustomAttachment` method of the [`MessageService`](../../services/MessageService/#filtercustomattachment).
-:::
-
-Next, we register the template for the `customAttachmentListTemplate$` field of the [`CustomTemplatesService`](../../services/CustomTemplatesService):
-
-```typescript showLineNumbers {8-10}
-export class AppComponent implements AfterViewInit {
-  @ViewChild("customAttachments")
-  customAttachmentsTemplate!: TemplateRef<CustomAttachmentListContext>;
-
-  constructor(private customTemplateService: CustomTemplatesService) {}
-
-  ngAfterViewInit(): void {
-    this.customTemplateService.customAttachmentListTemplate$.next(
-      this.customAttachmentsTemplate
-    );
-  }
-}
-```
-
-This is how the attachment looks like inside the message list:
-
-<img src={PaymentAttachment} width="500" />
-
-If you need reference to the message ID (and parent message ID for thread replies) the attachments belong to, this is how you can access them:
-
-```html showLineNumbers {4-5}
-<ng-template
-  #customAttachments
-  let-attachments="attachments"
-  let-messageId="messageId"
-  let-parentMessageId="parentMessageId"
->
-  <div *ngFor="let attachment of attachments">
-    {{ messageId }} {{ parentMessageId }} {{ attachment | json }}
-  </div>
-</ng-template>
-```
diff --git a/docusaurus/docs/Angular/code-examples/custom-textarea.mdx b/docusaurus/docs/Angular/code-examples/custom-textarea.mdx
deleted file mode 100644
index 588f223f..00000000
--- a/docusaurus/docs/Angular/code-examples/custom-textarea.mdx
+++ /dev/null
@@ -1,171 +0,0 @@
----
-id: custom-textarea
-title: Custom textarea
----
-
-import ImageShowcase from "@site/src/components/ImageShowcase";
-import before from "../assets/custom-textarea-before.png";
-import after from "../assets/custom-textarea-after.png";
-
-## Introduction
-
-This guide shows you how to replace the built in textarea component inside the [message input component](../../components/MessageInputComponent). One example where it's useful, is if you want to implement a HTML based editor for your chat users.
-
-The guide will provide step-by-step instructions to create the textarea on the right:
-
-<ImageShowcase
-  items={[
-    { image: before, caption: "Message input with built-in textarea" },
-    { image: after, caption: "Message input with custom textarea" },
-  ]}
-/>
-
-If you want to follow the tutorial, make sure to have a simple stream-chat-angular application set up. If you don't already have that, [follow our tutorial](https://getstream.io/chat/angular/tutorial/).
-
-## Custom textarea component
-
-Let's create a new component for our custom textarea:
-
-```
-ng g c textarea --inline-style --inline-template
-```
-
-The textarea will be displayed inside the `stream-message-input` component, and the two components need to communicate with each other. To ensure compatibility, your custom textarea component needs to implement the [`Textarea` interface](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/message-input/textarea.interface.ts).
-
-The interface has some optional elements that you might decide to ignore based on your own requirements. Below you'll find the essential parts of the interface:
-
-```typescript
-@Input() value: string = '';
-@Output() readonly valueChange = new EventEmitter<string>();
-@Output() readonly send = new EventEmitter<void>();
-```
-
-| Name          | Input/Output | Description                                                                                                                                                         |
-| ------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `value`       | Input        | The value to display inside the textarea. For new messages it will be undefined, but for editing messages this will be the original message content                 |
-| `valueChange` | Output       | An output to notify the message input component about value changes. It is used to send `typing.start` and `typing.end` events to other users                       |
-| `send`        | Output       | An output to notify the message input component to send the message. It is useful if you want to enable your users to trigger message send with hitting the `Enter` |
-
-Now let's see a very simple custom textarea implementation:
-
-```typescript
-import { Component, EventEmitter, Input, Output } from "@angular/core";
-import { TextareaInterface } from "stream-chat-angular";
-
-@Component({
-  selector: "app-textarea",
-  template: `
-    <button (click)="setToBold(input)">Bold</button>
-    <textarea
-      style="width: 100%"
-      [value]="value || ''"
-      #input
-      placeholder="Type your message here"
-      rows="1"
-      (input)="inputChanged(input.value)"
-      (keydown.enter)="enterHit($event)"
-    ></textarea>
-  `,
-  styles: [":host {width: 100%}"],
-})
-export class TextareaComponent implements TextareaInterface {
-  @Input() value = "";
-  @Output() readonly valueChange = new EventEmitter<string>();
-  @Output() readonly send = new EventEmitter<void>();
-
-  constructor() {}
-
-  inputChanged(value: string) {
-    this.valueChange.emit(value);
-  }
-
-  setToBold(input: HTMLTextAreaElement) {
-    const currentValue = input.value;
-    const newValue = `<b>${currentValue}</b>`;
-    input.value = newValue;
-    this.inputChanged(newValue);
-  }
-
-  enterHit(event: Event) {
-    event.preventDefault();
-    this.send.next();
-  }
-}
-```
-
-## Registering the component
-
-To use the custom textarea component we need to let the `stream-message-input` component know which component to create for the textarea slot. To do this you need to define a provider for the `textareaInjectionToken`.
-
-Let's update your `app.module.ts` to the following:
-
-```typescript
-import { NgModule } from "@angular/core";
-import { BrowserModule } from "@angular/platform-browser";
-import { TranslateModule } from "@ngx-translate/core";
-
-import { AppComponent } from "./app.component";
-import { StreamChatModule, textareaInjectionToken } from "stream-chat-angular";
-import { TextareaComponent } from "./textarea/textarea.component";
-
-@NgModule({
-  declarations: [AppComponent, TextareaComponent],
-  imports: [
-    BrowserModule,
-    TranslateModule.forRoot(),
-    StreamChatModule,
-    //highlight-start
-    // Make sure you remove any import to StreamAutocompleteTextareaModule or StreamTextareaModule
-    //highlight-end
-  ],
-  providers: [
-    //highlight-start
-    {
-      provide: textareaInjectionToken,
-      useValue: TextareaComponent,
-    },
-    //highlight-end
-  ],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
-```
-
-With that the built-in textarea will be replaced with your custom textarea component.
-
-## Displaying HTML content
-
-By default the [`Message`](../../components/MessageComponent) and [`ChannelPreview`](../../components/ChannelPreviewComponent) components will format message content as text. So the message bubble will display something like this: `<b>Hi</b>` instead of this: <b>Hi</b>.
-
-To fix this, you need to set text formatting to HTML using the [`MessageService`](../../services/MessageService)
-
-```typescript
-constructor(
-    private chatService: ChatClientService,
-    private channelService: ChannelService,
-    private streamI18nService: StreamI18nService,
-    messageService: MessageService
-  ) {
-    // Set message formatting before initializing the ChannelService
-    //highlight-start
-    messageService.displayAs = 'html';
-    //highlight-end
-    void this.chatService.init(
-      environment.apiKey,
-      environment.userId,
-      environment.userToken
-    );
-    void this.channelService.init({
-      type: 'messaging',
-      members: { $in: [environment.userId] },
-    });
-    this.streamI18nService.setTranslation();
-  }
-```
-
-If you want to use a different formatting, you have to provide your own message and channel preview components for that.
-
-## Limitations
-
-- The built-in [`TextareaComponent`](../../components/TextareaComponent/#feature-overview) and [`AutocompleteTextareaComponent`](../../components/AutocompleteTextareaComponent/#feature-overview) have additional features that you have to implement for yourself if you decide to create your own textarea component.
-- The built-in `Message` and `ChannelPreview` components can only format message content as text or HTML. If you want to implement a different formatting (for example Markdown), you need to create a custom [message](../../components/MessageComponent/#customization) and [channel preview](../../components/ChannelPreviewComponent/#customization) components.
diff --git a/docusaurus/docs/Angular/code-examples/emoji-picker.mdx b/docusaurus/docs/Angular/code-examples/emoji-picker.mdx
deleted file mode 100644
index ca4eed0e..00000000
--- a/docusaurus/docs/Angular/code-examples/emoji-picker.mdx
+++ /dev/null
@@ -1,310 +0,0 @@
----
-id: emoji-picker
-title: Emoji picker
----
-
-import Screenshot from "../assets/emoji-picker-screenshot.png";
-
-The SDK doesn't have a built-in emoji picker, but it has support for providing your own template. This guide shows you how to add an emoji picker to your chat application.
-
-## Create the emoji picker template
-
-1. Create a new component in your application
-
-```
-ng g c emoji-picker
-```
-
-2. Install `@ctrl/ngx-emoji-mart`
-
-You can use any emoji picker but this example will use [`@ctrl/ngx-emoji-mart `](https://www.npmjs.com/package/@ctrl/ngx-emoji-mart)
-
-```
-npm install @ctrl/ngx-emoji-mart
-```
-
-Import the emoji-mart stylesheet into your root stylesheet (for example `styles.scss`):
-
-```
-@import "~@ctrl/ngx-emoji-mart/picker";
-```
-
-Import the `PickerModule` into your `AppModule`:
-
-```typescript
-import { NgModule } from "@angular/core";
-import { BrowserModule } from "@angular/platform-browser";
-import { TranslateModule } from "@ngx-translate/core";
-
-import { AppComponent } from "./app.component";
-import {
-  StreamChatModule,
-  StreamAutocompleteTextareaModule,
-} from "stream-chat-angular";
-import { EmojiPickerComponent } from "./emoji-picker/emoji-picker.component";
-import { PickerModule } from "@ctrl/ngx-emoji-mart";
-
-@NgModule({
-  declarations: [AppComponent, EmojiPickerComponent],
-  imports: [
-    BrowserModule,
-    TranslateModule.forRoot(),
-    StreamAutocompleteTextareaModule,
-    StreamChatModule,
-    PickerModule,
-  ],
-  providers: [],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
-```
-
-3. Component class
-
-Your emoji picker component should have an input with the type `Subject<string>` to emit the selected emojis. This input will be provided by the [`MessageInput`](../components/MessageInputComponent.mdx) component.
-
-We also defined an `isOpened` property that tells if the emoji picker should be opened or closed.
-
-The emoji picker will close on outside clicks.
-
-```typescript
-import { Component, ElementRef, Input, ViewChild } from "@angular/core";
-import { Observable, Subject } from "rxjs";
-import { ThemeService } from "stream-chat-angular";
-
-@Component({
-  selector: "app-emoji-picker",
-  templateUrl: "./emoji-picker.component.html",
-  styleUrls: ["./emoji-picker.component.scss"],
-})
-export class EmojiPickerComponent {
-  isOpened = false;
-  theme$: Observable<string>;
-  @Input() emojiInput$: Subject<string> | undefined;
-  @ViewChild("container") container: ElementRef<HTMLElement> | undefined;
-
-  constructor(themeService: ThemeService) {
-    this.theme$ = themeService.theme$;
-  }
-
-  emojiSelected(event: any) {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-    this.emojiInput$?.next(event.emoji.native);
-  }
-
-  eventHandler = (event: Event) => {
-    // Watching for outside clicks
-    if (!this.container?.nativeElement.contains(event.target as Node)) {
-      this.isOpened = false;
-      window.removeEventListener("click", this.eventHandler);
-    }
-  };
-
-  toggled() {
-    if (!this.container) {
-      return;
-    }
-    this.isOpened = !this.isOpened;
-    if (this.isOpened) {
-      window.addEventListener("click", this.eventHandler);
-    } else {
-      window.removeEventListener("click", this.eventHandler);
-    }
-  }
-}
-```
-
-4. Component template
-
-We create a button that can be used to toggle the emoji picker.
-
-The [`emoji-mart`](https://www.npmjs.com/package/@ctrl/ngx-emoji-mart) component has a lot of configuration options, feel free to explore those.
-
-We set the `color` input to `--str-chat__primary-color` defined in the [stream-chat-css theme](../theming/global-variables.mdx).
-
-The [`ngIf`](https://angular.io/api/common/NgIf) directive is used to hide/show the emoji picker.
-
-The `emojiSelect` event is fired when a user selects an emoji, we emit the selected emoji using the `emojiSelected` method.
-
-```html
-<div #container class="emoji-picker-container">
-  <button (click)="toggled()">
-    <svg
-      viewBox="0 0 28 28"
-      width="100%"
-      preserveAspectRatio="xMinYMin"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g clip-rule="evenodd" fill-rule="evenodd">
-        <path
-          d="M14 4.4C8.6 4.4 4.4 8.6 4.4 14c0 5.4 4.2 9.6 9.6 9.6c5.4 0 9.6-4.2 9.6-9.6c0-5.4-4.2-9.6-9.6-9.6zM2 14c0-6.6 5.4-12 12-12s12 5.4 12 12s-5.4 12-12 12s-12-5.4-12-12zM12.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM18.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM8.6 15.4c.6-.4 1.2-.2 1.6.2c.6.8 1.6 1.8 3 2c1.2.4 2.8.2 4.8-2c.4-.4 1.2-.6 1.6 0c.4.4.6 1.2 0 1.6c-2.2 2.6-4.8 3.4-7 3c-2-.4-3.6-1.8-4.4-3c-.4-.6-.2-1.2.4-1.8z"
-        ></path>
-      </g>
-    </svg>
-  </button>
-
-  <emoji-mart
-    class="picker"
-    color="var(--str-chat__primary-color)"
-    *ngIf="isOpened"
-    title="Pick your emoji…"
-    emoji="point_up"
-    (emojiSelect)="emojiSelected($event)"
-    [isNative]="true"
-  ></emoji-mart>
-</div>
-```
-
-5. Component styles
-
-If you want to match the color of the emoji picker toggle button to the other tool buttons in the message input, you can use the `--str-chat__message-input-tools-color` to do that as defined in the [stream-chat-css theme](../theming/global-variables.mdx)
-
-```scss
-.emoji-picker-container {
-  position: relative;
-  width: 24px;
-  height: 24px;
-
-  button {
-    background-color: transparent;
-    border: none;
-    cursor: pointer;
-    padding: 0;
-    margin: 0;
-
-    svg {
-      display: flex;
-      width: 24px;
-      height: 24px;
-
-      path {
-        fill: var(--str-chat__message-input-tools-color);
-      }
-    }
-  }
-
-  .picker {
-    z-index: 3;
-    position: absolute;
-    bottom: 100%;
-    transform: scale(0.8);
-    right: 0;
-    transform-origin: bottom right;
-  }
-
-  @media only screen and (min-device-width: 1024px) {
-    .picker {
-      transform: scale(1);
-    }
-  }
-}
-```
-
-## Provide your custom template
-
-Let's create the template for the emoji picker (for example in your `AppComponent`):
-
-```html
-<!-- The MessageInput component will provide the emojiInput$ to emit the selected emojis and insert them in the textarea -->
-<ng-template #emojiPickerTemplate let-emojiInput$="emojiInput$">
-  <app-emoji-picker [emojiInput$]="emojiInput$"></app-emoji-picker>
-</ng-template>
-```
-
-Register the template in your TypeScript code (for example in your `AppComponent`).
-
-These are the necessary steps:
-
-- Create a reference to the custom template
-- Import the [CustomTemplatesService](../services/CustomTemplatesService.mdx)
-- Register your custom template
-
-Here is an example file:
-
-```typescript
-import {
-  AfterViewInit,
-  Component,
-  TemplateRef,
-  ViewChild,
-} from "@angular/core";
-import {
-  ChatClientService,
-  ChannelService,
-  StreamI18nService,
-} from "stream-chat-angular";
-import {
-  CustomTemplatesService,
-  EmojiPickerContext,
-} from "stream-chat-angular";
-import { environment } from "../environments/environment";
-
-@Component({
-  selector: "app-root",
-  templateUrl: "./app.component.html",
-  styleUrls: ["./app.component.scss"],
-})
-export class AppComponent implements AfterViewInit {
-  // Create a reference to the custom template
-  @ViewChild("emojiPickerTemplate")
-  private emojiPickerTemplate!: TemplateRef<EmojiPickerContext>;
-
-  constructor(
-    private chatService: ChatClientService,
-    private channelService: ChannelService,
-    private streamI18nService: StreamI18nService,
-    private customTemplatesService: CustomTemplatesService // Import the customTemplatesService
-  ) {
-    void this.chatService.init(
-      environment.apiKey,
-      environment.userId,
-      environment.userToken
-    );
-    void this.channelService.init({
-      type: "messaging",
-      members: { $in: [environment.userId] },
-    });
-    this.streamI18nService.setTranslation();
-  }
-
-  ngAfterViewInit(): void {
-    // Register your custom template
-    this.customTemplatesService.emojiPickerTemplate$.next(
-      this.emojiPickerTemplate
-    );
-  }
-}
-```
-
-This is how our emoji picker looks like:
-
-<img src={Screenshot} width="500" />
-
-## Dark and light mode
-
-If your application supports dark and light themes, here how you can toggle the theme on the emoji input component:
-
-Add this to you emoji picker component class:
-
-```typescript
-theme$: Observable<string>;
-
-constructor(themeService: ThemeService) {
-  this.theme$ = themeService.theme$;
-}
-```
-
-And set the `darkMode` input on the `emoji-mart` component:
-
-```html
-<emoji-mart
-  class="picker"
-  color="var(--str-chat__primary-color)"
-  *ngIf="isOpened"
-  title="Pick your emoji…"
-  emoji="point_up"
-  (emojiSelect)="emojiSelected($event)"
-  [isNative]="true"
-  [darkMode]="(theme$ | async) === 'dark'"
-></emoji-mart>
-```
diff --git a/docusaurus/docs/Angular/code-examples/ionic-guide.mdx b/docusaurus/docs/Angular/code-examples/ionic-guide.mdx
deleted file mode 100644
index f3a997d4..00000000
--- a/docusaurus/docs/Angular/code-examples/ionic-guide.mdx
+++ /dev/null
@@ -1,237 +0,0 @@
----
-id: ionic-guide
-title: Mobile app with Ionic
----
-
-import Screenshot1 from "../assets/ionic-screenshot1.png";
-
-This guide shows you how to create a Stream chat mobile app with [Ionic + Capacitor](https://ionicframework.com/docs/). The guide is based on the [Ionic + Angular tutorial](https://ionicframework.com/docs/angular/your-first-app).
-
-You can find the [required tools](https://ionicframework.com/docs/angular/your-first-app#download-required-tools) in the Ionic guide.
-
-## Install ionic tooling
-
-```bash
-npm install -g @ionic/cli native-run cordova-res
-```
-
-## Create the app
-
-Next, create an Ionic Angular app using the "side menu" template and add Capacitor for native functionality:
-
-```bash
-ionic start chat-app sidemenu --type=angular --capacitor
-```
-
-Next, change into the app folder:
-
-```bash
-cd chat-app
-```
-
-You can start the app with the following command:
-
-```bash
-npm start
-```
-
-## Create the chat UI
-
-Install the necessary dependencies:
-
-```
-npm install stream-chat-angular stream-chat @ngx-translate/core
-```
-
-Add this to your `tsconfig.json` file to the `compilerOptions` part:
-
-```
-"allowSyntheticDefaultImports": true
-```
-
-Import CSS in your `global.scss` file:
-
-```
-@import "~stream-chat-angular/src/assets/styles/scss/index.scss";
-```
-
-Add the module imports required by `stream-chat-angular` to the `app.module.ts` file:
-
-```typescript
-import { NgModule } from "@angular/core";
-import { BrowserModule } from "@angular/platform-browser";
-import { RouteReuseStrategy } from "@angular/router";
-
-import { IonicModule, IonicRouteStrategy } from "@ionic/angular";
-
-import { AppComponent } from "./app.component";
-import { AppRoutingModule } from "./app-routing.module";
-import { TranslateModule } from "@ngx-translate/core";
-import {
-  StreamAutocompleteTextareaModule,
-  StreamChatModule,
-} from "stream-chat-angular";
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [
-    BrowserModule,
-    IonicModule.forRoot(),
-    AppRoutingModule,
-    TranslateModule.forRoot(),
-    StreamAutocompleteTextareaModule,
-    StreamChatModule,
-  ],
-  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
-```
-
-Connect to your Stream chat application by replacing the content of the `app.component.ts` file (add the necessary credentials to your `environment.ts` file):
-
-If you don't already have a Stream account you can [start your free trial](https://getstream.io/try-for-free/).
-
-```typescript
-import { Component, OnInit } from "@angular/core";
-import { environment } from "src/environments/environment";
-import {
-  ChatClientService,
-  ChannelService,
-  StreamI18nService,
-} from "stream-chat-angular";
-
-@Component({
-  selector: "app-root",
-  templateUrl: "./app.component.html",
-  styleUrls: ["./app.component.scss"],
-})
-export class AppComponent implements OnInit {
-  constructor(
-    private chatService: ChatClientService,
-    private channelService: ChannelService,
-    private streamI18nService: StreamI18nService
-  ) {
-    const apiKey = environment.apiKey;
-    const userId = environment.userId;
-    const userToken = environment.userToken;
-    this.chatService.init(apiKey, userId, userToken);
-    this.streamI18nService.setTranslation();
-  }
-
-  async ngOnInit() {
-    this.channelService.init({
-      type: "messaging",
-      members: { $in: [environment.userId] },
-    });
-  }
-}
-```
-
-Display the channel list in your `app.component.html`:
-
-```html
-<ion-app>
-  <ion-split-pane contentId="main-content">
-    <ion-menu contentId="main-content" type="overlay">
-      <ion-content>
-        <ion-menu-toggle auto-hide="false">
-          <ion-list>
-            <stream-channel-list></stream-channel-list>
-          </ion-list>
-        </ion-menu-toggle>
-      </ion-content>
-    </ion-menu>
-    <ion-router-outlet id="main-content"></ion-router-outlet>
-  </ion-split-pane>
-</ion-app>
-```
-
-Extend the `folder.module.ts` with the necessary module imports:
-
-```typescript
-import { NgModule } from "@angular/core";
-import { CommonModule } from "@angular/common";
-import { FormsModule } from "@angular/forms";
-
-import { IonicModule } from "@ionic/angular";
-
-import { FolderPageRoutingModule } from "./folder-routing.module";
-
-import { FolderPage } from "./folder.page";
-import { StreamChatModule } from "stream-chat-angular";
-
-@NgModule({
-  imports: [
-    CommonModule,
-    FormsModule,
-    IonicModule,
-    FolderPageRoutingModule,
-    StreamChatModule,
-  ],
-  declarations: [FolderPage],
-})
-export class FolderPageModule {}
-```
-
-Display the active channel in the `folder.page.html`:
-
-```html
-<ion-content [fullscreen]="true">
-  <stream-channel>
-    <stream-channel-header>
-      <ion-menu-button></ion-menu-button>
-    </stream-channel-header>
-    <stream-message-list></stream-message-list>
-    <stream-notification-list></stream-notification-list>
-    <stream-message-input></stream-message-input>
-    <stream-thread name="thread">
-      <stream-message-list mode="thread"></stream-message-list>
-      <stream-message-input mode="thread"></stream-message-input>
-    </stream-thread>
-  </stream-channel>
-</ion-content>
-```
-
-Our chat UI is now ready.
-
-<img src={Screenshot1} width="500" />
-
-## Deploying to iOS and Android
-
-Create a clean build
-
-```bash
-ionic build
-```
-
-Next, create both the iOS and Android projects:
-
-```bash
-ionic cap add ios
-ionic cap add android
-```
-
-For more information see the [Ionic guide](https://ionicframework.com/docs/angular/your-first-app/deploying-mobile)
-
-Open the iOS app:
-
-```bash
-ionic cap open ios
-```
-
-This will open XCode on your machine, you can start the app by clicking the play button on the top toolbar.
-
-Open the Android app:
-
-```bash
-ionic cap open android
-```
-
-This will open Android studio on your machine, you can start the app by clicking the play button on the top toolbar.
-
-We've successfully deployed our Stream chat mobile app to iOS and Android.
-
-## Push notifications
-
-We have a separate [push notification guide](./push-guide.mdx) to show you how to add push notifications to your mobile apps.
diff --git a/docusaurus/docs/Angular/code-examples/mention-actions.mdx b/docusaurus/docs/Angular/code-examples/mention-actions.mdx
deleted file mode 100644
index 685fff4e..00000000
--- a/docusaurus/docs/Angular/code-examples/mention-actions.mdx
+++ /dev/null
@@ -1,191 +0,0 @@
----
-id: mention-actions
-sidebar_position: 1
-title: Mention actions
----
-
-import Screenshot from "../assets/mention-screenshot.png";
-
-In this example, we will demonstrate how to create custom mention actions if a user clicks on or hovers over a mention in a message.
-
-## Custom mention template
-
-You can provide a custom message template to the [`CustomTemplatesService`](../services/CustomTemplatesService.mdx):
-
-Create the template (for example in your `AppComponent`):
-
-```html
-<ng-template #mentionTemplate let-user="user">
-  <b>@{{ user.name || user.id }}</b>
-</ng-template>
-```
-
-The `Message` component will provide the mentioned user in a variable called `user`, the object has a [`UserResponse`](https://github.com/GetStream/stream-chat-js/blob/master/src/types.ts) type and you can use it to display information about the user.
-
-This template looks and works like the default mention template, however you can add interactions to this element.
-
-Register the template in your TypeScript code (for example in your `AppComponent`).
-
-These are the necessary steps:
-
-- Create a reference to the custom template
-- Import the [CustomTemplatesService](../services/CustomTemplatesService.mdx)
-- Register your custom template
-
-Here is an example file:
-
-```typescript
-import {
-  AfterViewInit,
-  Component,
-  TemplateRef,
-  ViewChild,
-} from "@angular/core";
-import {
-  ChatClientService,
-  ChannelService,
-  StreamI18nService,
-} from "stream-chat-angular";
-import {
-  CustomTemplatesService,
-  MentionTemplateContext,
-} from "stream-chat-angular";
-import { environment } from "../environments/environment";
-
-@Component({
-  selector: "app-root",
-  templateUrl: "./app.component.html",
-  styleUrls: ["./app.component.scss"],
-})
-export class AppComponent implements AfterViewInit {
-  // Create a reference to the custom template
-  @ViewChild("mentionTemplate")
-  private mentionTemplate!: TemplateRef<MentionTemplateContext>;
-
-  constructor(
-    private chatService: ChatClientService,
-    private channelService: ChannelService,
-    private streamI18nService: StreamI18nService,
-    private customTemplatesService: CustomTemplatesService // Import the customTemplatesService
-  ) {
-    void this.chatService.init(
-      environment.apiKey,
-      environment.userId,
-      environment.userToken
-    );
-    void this.channelService.init({
-      type: "messaging",
-      members: { $in: [environment.userId] },
-    });
-    this.streamI18nService.setTranslation();
-  }
-
-  ngAfterViewInit(): void {
-    // Register your custom template
-    this.customTemplatesService.mentionTemplate$.next(this.mentionTemplate);
-  }
-}
-```
-
-## Display user information on click
-
-In this step we will create a popover with additional user information that will be displayed if the user clicks on a mention. We are using the [`ngx-popperjs`](https://www.npmjs.com/package/ngx-popperjs) library for the popover, but you can use a different library as well.
-
-### Install `ngx-popperjs`
-
-Let's install the necessary dependencies:
-
-```bash
-npm install @popperjs/core ngx-popperjs --save
-```
-
-### Import the `NgxPopperjsModule` module
-
-```typescript
-import {NgxPopperjsModule} from 'ngx-popperjs';
-
-@NgModule({
- // ...
- imports: [
-   // ...
-   NgxPopperjsModule
- ]
-})
-```
-
-### Import SCSS
-
-Add this to your `styles.scss`:
-
-```scss
-@import "~ngx-popperjs/scss/theme-white";
-```
-
-[CSS is also supported.](https://www.npmjs.com/package/ngx-popperjs)
-
-### Create the popover
-
-```html
-<ng-template #mentionTemplate let-user="user">
-  <span
-    style="cursor: pointer"
-    [popper]="popperContent"
-    [popperPositionFixed]="true"
-  >
-    <b>@{{ user.name || user.id }}</b>
-  </span>
-  <popper-content #popperContent style="display: inline">
-    <div style="display: flex; align-items: center">
-      <stream-avatar
-        [imageUrl]="user.image"
-        [name]="user.name || user.id"
-      ></stream-avatar>
-      <b>{{ user.name || user.id }}</b>
-      <span>&nbsp;{{ user.online ? "online" : "offline" }}</span>
-    </div>
-  </popper-content>
-</ng-template>
-```
-
-This is the popover that is displayed if we click on a mention in a message:
-
-<img src={Screenshot} width="500" />
-
-[`ngx-popperjs`](https://www.npmjs.com/package/ngx-popperjs) has a lot of other configuration options, feel free to explore those.
-
-## Display user information on hover
-
-Let's modify our solution and display the popover on hover instead of click:
-
-We need to add a variable to our component class:
-
-```typescript
-import { NgxPopperjsTriggers } from "ngx-popperjs";
-
-popoverTrigger = NgxPopperjsTriggers.hover;
-```
-
-And modify our template:
-
-```html
-<ng-template #mentionTemplate let-user="user">
-  <span
-    style="cursor: pointer"
-    [popper]="popperContent"
-    [popperPositionFixed]="true"
-    [popperTrigger]="popoverTrigger"
-  >
-    <b>@{{ user.name || user.id }}</b>
-  </span>
-  <popper-content #popperContent style="display: inline">
-    <div style="display: flex; align-items: center">
-      <stream-avatar
-        [imageUrl]="user.image"
-        [name]="user.name || user.id"
-      ></stream-avatar>
-      <b>{{ user.name || user.id }}</b>
-      <span>&nbsp;{{ user.online ? "online" : "offline" }}</span>
-    </div>
-  </popper-content>
-</ng-template>
-```
diff --git a/docusaurus/docs/Angular/code-examples/pin-messages.mdx b/docusaurus/docs/Angular/code-examples/pin-messages.mdx
deleted file mode 100644
index d918cc21..00000000
--- a/docusaurus/docs/Angular/code-examples/pin-messages.mdx
+++ /dev/null
@@ -1,103 +0,0 @@
----
-id: pin-messages
-title: Pin messages
----
-
-import PinActionScreenshot from "../assets/pin-action-screenshot.png";
-import PinnedMessageScreenshot from "../assets/pinned-message-screenshot.png";
-
-Pinning messages can be a useful feature inside your chat application, `stream-chat-angular` supports this feature, but you have to provide the UI template for the pinned messages. This guide shows you how you can set up this functionality.
-
-## Pin and unpin actions
-
-The default message action box contains the pin/unpin action, this action marks a message as pinned/unpinned.
-
-<img src={PinActionScreenshot} width="500" />
-
-:::note
-If you don't see the action, you might have [authorize the pin action](https://getstream.io/chat/docs/javascript/chat_permission_policies/?language=javascript).
-:::
-
-## Pinned messages stream
-
-The [`activeChannelPinnedMessages$`](../services/ChannelService.mdx/#activechannelpinnedmessages) stream of the [`ChannelService`](../services/ChannelService.mdx) emits the list of currently pinned messages inside the active channel.
-
-```typescript
-this.channelService.activeChannelPinnedMessages$.subscribe(console.log);
-```
-
-- The initial value is retrieved from the [channel query response](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript&q=pin#channelstate-response)
-- After that, all pin and unpin actions are reflected in the emitted list
-
-## Pinned messages UI
-
-Once we know the list of pinned messages, we should display them somewhere users can easily spot them. You can display pinned messages anywhere you want to, however a common place could be the top/bottom of the message list, this example will display pinned messages at the bottom of the message list.
-
-You have to provide the template for the pinned messages:
-
-```html
-<stream-notification-list></stream-notification-list>
-<div
-  style="padding: 8px; background: #e1f5fe"
-  *ngFor="
-          let message of channelService.activeChannelPinnedMessages$ | async
-        "
->
-  {{ message.text }}
-</div>
-<stream-message-input></stream-message-input>
-```
-
-The `message` variable has [`StreamMessage`](../types/stream-message.mdx) type, so you can access all fields defined there inside your template.
-
-<img src={PinnedMessageScreenshot} width="500" />
-
-## Jump to a pinned message
-
-Let's add a click event handler to the pinned message, and jump to the message (works for channel and thread messages as well):
-
-```typescript
-jumpToMessage(message: StreamMessage) {
-  this.channelService.jumpToMessage(message.id, message.parent_id);
-}
-```
-
-```html
-<div
-  style="padding: 8px; background: #e1f5fe"
-  *ngFor="
-          let message of channelService.activeChannelPinnedMessages$ | async
-        "
-  (click)="jumpToMessage(message)"
->
-  {{ message.text }}
-</div>
-```
-
-## Unpin message
-
-Let's extend our example and add an Unpin button to remove the pin from a message.
-
-```typescript
-unpinMessage(message: StreamMessage<DefaultStreamChatGenerics>) {
-  this.channelService.unpinMessage(message);
-}
-```
-
-```html
-<div
-  style="padding: 8px; background: #e1f5fe"
-  *ngFor="
-        let message of channelService.activeChannelPinnedMessages$ | async
-      "
-  (click)="jumpToMessage(message)"
->
-  {{ message.text }}
-  <button
-    style="border: none; background: none; padding: 0; margin: 0"
-    (click)="$event.stopPropagation(); unpinMessage(message)"
-  >
-    Unpin
-  </button>
-</div>
-```
diff --git a/docusaurus/docs/Angular/code-examples/push-guide.mdx b/docusaurus/docs/Angular/code-examples/push-guide.mdx
deleted file mode 100644
index 297484e0..00000000
--- a/docusaurus/docs/Angular/code-examples/push-guide.mdx
+++ /dev/null
@@ -1,187 +0,0 @@
----
-id: push-guide
-title: Push notifications
----
-
-import FirebaseConsoleScreenshot from "../assets/firebase-console-screenshot.png";
-
-This guide shows you how to add push notifications using [Firebase Cloud Messaging](https://firebase.google.com/docs/cloud-messaging) to your Stream chat Ionic mobile apps (iOS and Android). This guide is based on the [Capacitor Firebase push notification tutorial](https://capacitorjs.com/docs/guides/push-notifications-firebase#building-the-app--adding-platforms).
-
-## Before you start
-
-If you want to follow this guide make sure to complete our [Ionic mobile app tutorial](./ionic-guide.mdx) first.
-
-## Using the Capacitor Push Notification API​
-
-First of all, we need to install the [Capacitor Push Notifications Plugin](https://capacitorjs.com/docs/apis/push-notifications)
-
-```bash
-npm install @capacitor/push-notifications
-npx cap sync
-```
-
-Let's integrate the Push Notification API in our `app.component.ts` file:
-
-```typescript
-import { Component, OnInit } from "@angular/core";
-import { environment } from "src/environments/environment";
-import {
-  ChatClientService,
-  ChannelService,
-  StreamI18nService,
-} from "stream-chat-angular";
-import {
-  ActionPerformed,
-  PushNotificationSchema,
-  PushNotifications,
-  Token,
-} from "@capacitor/push-notifications";
-
-@Component({
-  selector: "app-root",
-  templateUrl: "./app.component.html",
-  styleUrls: ["./app.component.scss"],
-})
-export class AppComponent implements OnInit {
-  constructor(
-    private chatService: ChatClientService,
-    private channelService: ChannelService,
-    private streamI18nService: StreamI18nService
-  ) {
-    const apiKey = environment.apiKey;
-    const userId = environment.userId;
-    const userToken = environment.userToken;
-    this.chatService.init(apiKey, userId, userToken);
-    this.streamI18nService.setTranslation();
-  }
-
-  async ngOnInit() {
-    this.channelService.init({
-      type: "messaging",
-      members: { $in: [environment.userId] },
-    });
-    // Request permission to use push notifications
-    // iOS will prompt user and return if they granted permission or not
-    // Android will just grant without prompting
-    PushNotifications.requestPermissions().then((result) => {
-      if (result.receive === "granted") {
-        // Register with Apple / Google to receive push via APNS/FCM
-        PushNotifications.register();
-      } else {
-        // Show some error
-      }
-    });
-
-    // On success, we should be able to receive notifications
-    PushNotifications.addListener("registration", (token: Token) => {
-      alert("Push registration success, token: " + token.value);
-      // Register to Stream API
-      this.chatService.chatClient.addDevice(
-        token.value,
-        "firebase",
-        environment.userId
-      );
-    });
-
-    // Some issue with our setup and push will not work
-    PushNotifications.addListener("registrationError", (error: any) => {
-      alert("Error on registration: " + JSON.stringify(error));
-    });
-
-    // Show us the notification payload if the app is open on our device
-    PushNotifications.addListener(
-      "pushNotificationReceived",
-      (notification: PushNotificationSchema) => {
-        alert("Push received: " + JSON.stringify(notification));
-      }
-    );
-
-    // Method called when tapping on a notification
-    PushNotifications.addListener(
-      "pushNotificationActionPerformed",
-      (notification: ActionPerformed) => {
-        alert("Push action performed: " + JSON.stringify(notification));
-      }
-    );
-  }
-}
-```
-
-We are adding `alert` calls to the various events to be able to observe the behaviour when the app is running on mobile devices.
-
-After this, you'll want to generate a new build and let Capacitor know about the changes. You can do that with:
-
-```bash
-ionic build
-npx cap copy
-```
-
-## Creating a Firebase project
-
-Complete the [Creating a Project for your App on Firebase step](https://capacitorjs.com/docs/guides/push-notifications-firebase#creating-a-project-for-your-app-on-firebase) in the Capacitor Push guide.
-
-## Integrate with Android
-
-Complete the [Android integration steps](https://capacitorjs.com/docs/guides/push-notifications-firebase#android) in the Capacitor Push guide.
-
-## Integrate with iOS
-
-Complete the [iOS integration steps](https://capacitorjs.com/docs/guides/push-notifications-firebase#ios) in the Capacitor Push guide.
-
-## Integrate with Stream API
-
-This guide doesn't give you an in-depth overview of the Stream Push API, if you want to know more about that visit our [push documentation](https://getstream.io/chat/docs/javascript/push_introduction/?language=javascript).
-
-:::important
-This guide uses the [Push v2](https://getstream.io/chat/docs/javascript/upgrading_to_push_v2/?language=javascript) Stream API.
-:::
-
-### Firebase configuration in Stream Dashboard
-
-To be able to receive notifications from Stream, you need to provide your Firebase credentials to Stream.
-
-Go to the [Firebase Console](https://console.firebase.google.com/), and select the project your app belongs to.
-
-Click on the gear icon next to **Project Overview** and navigate to **Project settings**.
-
-Navigate to the **Service Accounts** tab. Under **Firebase Admin SDK section**, click on **Generate new private key** button that will generate a _JSON_ file with the Firebase Credentials.
-
-<img src={FirebaseConsoleScreenshot} width="500" />
-
-Open the [Stream Dashboard](https://dashboard.getstream.io/) and navigate to your application.
-
-Select **Push notifications** from the left menu.
-
-Add a new **Firebase** configuration.
-
-Upload the _JSON_ file you created in the Firebase console.
-
-For more information about push configurations see our [Push Providers & Multi Bundle guide](https://getstream.io/chat/docs/javascript/push_providers_and_multi_bundle/?language=javascript)
-
-### Push templates in Stream Dashboard
-
-The [Capacitor Push API has some limitations around data-only notifications](https://capacitorjs.com/docs/apis/push-notifications#silent-push-notifications--data-only-notifications). The default Firebase APN notification payload works well with the Capacitor Push API, but if you need to send notifications for Android you have to update the **Notification Template** in the **Push Notifications** settings in the **Stream Dashboard**.
-
-Here is an example **Notification template**
-
-```
-{
-    "title": "{{ sender.name }} @ {{ channel.name }}",
-    "body": "{{ truncate message.text 2000 }}",
-    "click_action": "OPEN_ACTIVITY_1",
-    "sound": "default"
-}
-```
-
-You can read more about templates in our [Push Templates in v2 guide](https://getstream.io/chat/docs/javascript/push_templates_in_v2/?language=javascript).
-
-Add the following code to your `android/app/src/main/AndroidManifest.xml` file to open the app if the notification is clicked:
-
-```
-<intent-filter>
-  <action android:name="OPEN_ACTIVITY_1" />
-  <category android:name="android.intent.category.DEFAULT" />
-</intent-filter>
-```
-
-Add this element as a child to the `activity` element. "OPEN_ACTIVITY_1" is the "`click_action`" field from your Firebase Notification template.
diff --git a/docusaurus/docs/Angular/code-examples/responsive-layout.mdx b/docusaurus/docs/Angular/code-examples/responsive-layout.mdx
deleted file mode 100644
index 1a12e031..00000000
--- a/docusaurus/docs/Angular/code-examples/responsive-layout.mdx
+++ /dev/null
@@ -1,218 +0,0 @@
----
-id: responsive-layout
-title: Responsive layout
----
-
-import ChatUILayoutScreenshot from "../assets/chat-ui-layout-screenshot.png";
-import ChannelHeaderWithMenu from "../assets/channel-header-with-menu-screenshot.png";
-
-Our SDK gives you maximum control over the layout of your chat application. This tutorial shows you a simple example of creating a layout.
-
-## Channel list, channel, and thread layout
-
-Let's create a simple chat application UI:
-
-```html
-<div id="root">
-  <stream-channel-list class="channel-list"></stream-channel-list>
-  <stream-channel class="channel">
-    <stream-channel-header> </stream-channel-header>
-    <stream-message-list></stream-message-list>
-    <stream-notification-list></stream-notification-list>
-    <stream-message-input></stream-message-input>
-    <stream-thread class="thread" name="thread">
-      <stream-message-list mode="thread"></stream-message-list>
-      <stream-message-input mode="thread"></stream-message-input>
-    </stream-thread>
-  </stream-channel>
-</div>
-```
-
-Let's add the layout for the [channel list](../components/ChannelListComponent.mdx), [channel](../components/ChannelComponent.mdx) and [thread](../components/ThreadComponent.mdx) components:
-
-```scss
-#root {
-  display: flex;
-  height: 100%;
-
-  .channel {
-    width: 100%;
-  }
-
-  .channel-list {
-    width: 30%;
-  }
-
-  .thread {
-    width: 45%;
-  }
-}
-```
-
-This how our chat application looks like:
-
-<img src={ChatUILayoutScreenshot} width="500" />
-
-This layout works fine on bigger screens, but we should create a separate layout for mobile devices.
-
-## Mobile layout
-
-On mobile screens, the thread and channel list components will overlay the channel component filling the whole screen.
-
-Let's start with the thread component:
-
-```scss
-#root {
-  display: flex;
-  height: 100%;
-
-  .channel {
-    width: 100%;
-  }
-
-  // Overlay for thread
-  .thread {
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    z-index: 3;
-  }
-
-  @media screen and (min-width: 768px) {
-    .channel-list {
-      width: 30%;
-    }
-
-    .thread {
-      width: 45%;
-      position: initial;
-      z-index: auto;
-    }
-  }
-}
-```
-
-For the channel list component, we should add a menu button to toggle the channel list.
-
-The [ChannelHeader](../components/ChannelHeaderComponent.mdx) component has a slot where you can inject your own' menu button template:
-
-```html
-<stream-channel-header>
-  <button class="menu-button" (click)="isMenuOpen = !isMenuOpen">
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M3 8V6H21V8H3ZM3 13H21V11H3V13ZM3 18H21V16H3V18Z"
-        [attr.fill]="(theme$ | async) === 'light' ? 'black' : 'white'"
-      />
-    </svg>
-  </button>
-</stream-channel-header>
-```
-
-```scss
-.menu-button {
-  border: none;
-  background-color: transparent;
-  cursor: pointer;
-  width: 50px;
-  height: 50px;
-}
-```
-
-In your component class:
-
-```typescript
-isMenuOpen = true;
-```
-
-This is what the channel header looks like:
-
-<img src={ChannelHeaderWithMenu} width="500" />
-
-Let's add a class to the [ChannelList component](../components/ChannelListComponent.mdx) based on the menu state:
-
-```html
-<stream-channel-list
-  class="channel-list menu-{{ isMenuOpen ? 'open' : 'close' }}"
-></stream-channel-list>
-```
-
-Provide the layout based on the menu state and hide the menu on bigger screens:
-
-```scss
-#root {
-  display: flex;
-  height: 100%;
-
-  .menu-open {
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    z-index: 3;
-  }
-
-  .menu-close {
-    width: 0;
-  }
-
-  .menu-button {
-    display: block;
-  }
-
-  .channel {
-    min-width: 0;
-    width: 100%;
-  }
-
-  .thread {
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    z-index: 3;
-  }
-
-  @media screen and (min-width: 768px) {
-    .menu-button {
-      display: none;
-    }
-
-    .channel-list {
-      width: 30%;
-      max-width: 420px;
-      position: initial;
-      z-index: auto;
-    }
-
-    .thread {
-      width: 45%;
-      position: initial;
-      z-index: auto;
-    }
-  }
-}
-```
-
-Lastly, implement auto close behavior for the channel list:
-
-```html
-<stream-channel-list
-  (click)="closeMenu($event)"
-  class="channel-list menu-{{ isMenuOpen ? 'open' : 'close' }}"
-></stream-channel-list>
-```
-
-```ts
-closeMenu(event: Event) {
-  if ((event.target as HTMLElement).closest('stream-channel-preview')) {
-    this.isMenuOpen = false;
-  }
-}
-```
diff --git a/docusaurus/docs/Angular/code-examples/voice-recordings.mdx b/docusaurus/docs/Angular/code-examples/voice-recordings.mdx
deleted file mode 100644
index bbd09b64..00000000
--- a/docusaurus/docs/Angular/code-examples/voice-recordings.mdx
+++ /dev/null
@@ -1,187 +0,0 @@
----
-id: voice-recordings
-title: Voice recordings
----
-
-import VoiceRecordingScreenshot from "../assets/voice-recording-screenshot.png";
-import StartRecording from "../assets/start-voice-recording.png";
-import RecordingDemo from "../assets/voice-recording-demo.png";
-import Playback from "../assets/voice-recording-playback.png";
-
-The Stream API allows you to send voice recordings as attachments. This is an example attachment:
-
-```json
-{
-  "type": "voiceRecording",
-  "title": "audio_recording_2024-09-26T14:41:24.473Z.wav",
-  "asset_url": "https://dublin.stream-io-cdn.com/...",
-  // This is used to display a visual representation of the voice recording
-  "waveform_data": [
-    0.03389095297537962,
-    0.03389095297537962,
-    0.19684165186582253 //...
-  ],
-  // The duration of the recording in seconds
-  "duration": 31.19,
-  "file_size": 97964,
-  "mime_type": "audio/wav"
-}
-```
-
-## Playing voice recordings
-
-The SDK can play these recordings without any additional setup:
-
-<img src={VoiceRecordingScreenshot} width="500" />
-
-If you'd like to use your own UI, you can provide your own template using the [custom templates service](../../services/CustomTemplatesService/#voicerecordingattachmenttemplate).
-
-## Creating voice recordings
-
-If you want to let users to create voice recordings, you have to configure the SDK with a few easy steps.
-
-### Start recording button
-
-The [message input](../../components/MessageInputComponent) component can display the start recording button optionally. This is how you can enable it:
-
-```html
-<stream-message-input
-  [displayVoiceRecordingButton]="true"
-></stream-message-input>
-```
-
-This is how the input looks with the button enabled:
-
-<img src={StartRecording} width="500" />
-
-You can also display your own start button. The easiest way is to use the `message-input-start` or `message-input-end` attributes, which will insert the element before or after the textarea element:
-
-```html
-<stream-message-input #input [displayVoiceRecordingButton]="false">
-  <button message-input-start (click)="input.startVoiceRecording()">
-    Start recording
-  </button>
-</stream-message-input>
-```
-
-### Import the `VoiceRecorderModule`
-
-The `VoiceRecorderModule` contains the voice recorder component and the services needed to make a recording. You have to import it like this:
-
-```typescript
-import { StreamChatModule, VoiceRecorderModule } from "stream-chat-angular";
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [
-    // other imports...
-    StreamChatModule,
-    VoiceRecorderModule,
-    // ...more imports
-  ],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
-```
-
-### Display the voice recorder component
-
-You have to provide the voice recorder template to the message input component. The SDK provides the `VoiceRecorderComponent` for this:
-
-```html
-<stream-message-input [displayVoiceRecordingButton]="true">
-  <ng-template voice-recorder let-service="service">
-    <stream-voice-recorder
-      [voiceRecorderService]="service"
-    ></stream-voice-recorder>
-  </ng-template>
-</stream-message-input>
-```
-
-The message input provides a [`VoiceRecorderService`](../../services/VoiceRecorderService) instance, which is used by the two components to communicate.
-
-If you want to use your own UI, provide your own component here that uses `VoiceRecorderService` to communicate with the message input component.
-
-### Voice recorder component
-
-That's it. We can now start a voice recording:
-
-<img src={RecordingDemo} width="500" />
-
-The recording can be paused and resumed. Once a user is finished recording, they can play it back:
-
-<img src={Playback} width="500" />
-
-If they are unhappy with the recording, they can discard it. Once the recording is finalized, they can hit the send button.
-
-### Sending modes
-
-There are two ways to send voice recordings:
-
-1. Once a recording is finalized, you can immediately send a message with the recording; this is the default mode.
-2. Once a recording is finalized, you can return it to the message composer and continue editing the message.
-
-This is how you can change between the modes:
-
-```typescript
-constructor(private messageInputService: MessageInputConfigService) {
-  // Defaults to true
-  // Set false if you want to return to the message composer after a recording was added to the message
-  this.messageInputService.sendVoiceRecordingImmediately = true;
-}
-```
-
-### Error states
-
-If an error occurs at any point during the recording, the recording will be stopped, and an error message will be emitted via the [`NotificationService`](../../services/NotificationService). The built-in `stream-notification-list` component will display this error message.
-
-### Custom recording title
-
-You can generate the recording title using your own logic using the `customGenerateRecordingTitle` field of the `AudioRecorderService`.
-
-```typescript
-constructor(private audioRecorder: AudioRecorderService, private chatService: ChatClientService) {
-  this.audioRecorder.customGenerateRecordingTitle = (
-    options: MediaRecordingTitleOptions
-  ) => {
-    const extension = options.mimeType.match(/\/([^/;]+)/)?.[1] || "";
-    return `${
-      this.chatService.chatClient.user?.name
-    }-${new Date().toISOString()}.${extension}`;
-  };
-}
-```
-
-### Custom transcoding
-
-Due to browser restrictions, the SDK records with the following configuration:
-
-- In Safari: recordings are sent in `mp4` files
-- In all other browsers: recordings are created in `webm` and then transcoded into `wav` files
-
-The downside of the `wav` format is that it's uncompressed, which results in a larger file size.
-
-You can provide a custom transcoder to reduce the file size. The following example shows how to transcode to `mp3` using the [`@breezystack/lamejs`](https://www.npmjs.com/package/@breezystack/lamejs) library.
-
-First, install the library:
-
-```
-npm install @breezystack/lamejs
-```
-
-Then register the custom transcoder to the `TranscoderService`:
-
-```typescript
-import { encodeWebmToMp3, TranscoderService } from "stream-chat-angular";
-import * as lamejs from "@breezystack/lamejs";
-
-constructor(private transcoderService: TranscoderService) {
-  transcoderService.customTranscoder = (blob: Blob) => {
-    if (blob.type.includes('audio/mp4')) {
-      return blob;
-    } else {
-      return encodeWebmToMp3(blob, lamejs);
-    }
-  };
-}
-```
diff --git a/docusaurus/docs/Angular/components/AttachmentListComponent.mdx b/docusaurus/docs/Angular/components/AttachmentListComponent.mdx
deleted file mode 100644
index 287ed30c..00000000
--- a/docusaurus/docs/Angular/components/AttachmentListComponent.mdx
+++ /dev/null
@@ -1,150 +0,0 @@
-import ImageSizingScreenshot1 from "../assets/image-sizing-screenshot-1.png";
-import ImageSizingScreenshot2 from "../assets/image-sizing-screenshot-2.png";
-import ImageSizingScreenshot3 from "../assets/image-sizing-screenshot-3.png";
-import AttachmentSizeWarning from "../assets/attachment-size-warning.png";
-import SupportedAttachments from "../_common/supported-attachments.mdx";
-
-The `AttachmentList` component displays the attachments of a message. The following attachments are supported:
-
-<SupportedAttachments />
-
-## Basic Usage
-
-A typical use case for the `AttachmentList` component would be to use in your custom components that will completely override the message component.
-
-**Example 1** - a basic example:
-
-```typescript
-@Component({
-  selector: "app-custom-message",
-  template: `
-    <stream-attachment-list
-      *ngIf="hasAttachment"
-      [attachments]="message.attachments"
-    ></stream-attachment-list>
-    <!-- Other parts of the custom message component -->
-  `,
-})
-export class CustomMessageComponent {
-  @Input() message: StreamMessage;
-  hasAttachment: boolean;
-}
-```
-
-## Customization
-
-You can use the [`AttachmentConfigurationService`](../services/AttachmentConfigurationService.mdx) to override certain attributes of attachments.
-
-You can provide your own attachment list component by the [`CustomTemplatesService`](../services/CustomTemplatesService.mdx)
-
-You can override attachment display by attachment types, here are the available options for this:
-
-- [Single image](../services/CustomTemplatesService.mdx/#imageattachmenttemplate): this template is used if a message has only one image attachment. Please note that your template is responsible for proper image sizing (see below).
-- [Gallery image](../services/CustomTemplatesService.mdx/#galleryattachmenttemplate): this template is used if a message has multiple image attachments, the template will receive all image attachments. Please note that your template is responsible for proper image sizing (see below).
-- [Video attachment](../services/CustomTemplatesService.mdx/#videoattachmenttemplate): this template is used to display video attachments. Please note that your template is responsible for proper image sizing (see below).
-- [File attachment](../services/CustomTemplatesService.mdx/#fileattachmenttemplate): this template is used to display file type attachments
-- [Voice recording](../services/CustomTemplatesService.mdx/#voicerecordingattachmenttemplate): this template is used to display voice recordings
-- [Card attachment](../services/CustomTemplatesService.mdx/#cardattachmenttemplate): this template is used to display GIFs or open graph URL data
-- [Attachment actions](../services/CustomTemplatesService.mdx/#attachmentactionstemplate): this template is used to display attachment actions
-
-### Image and video sizing
-
-The following section details how the width and height of images and videos uploaded from files are computed.
-
-#### Maximum size
-
-You can control the maximum size of images and videos with the [`--str-chat__attachment-max-width`](../theming/component-variables.mdx) CSS variable. The value of this variable must be a value that can be computed to a valid pixel value using the [`getComputedStyle`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) method (for example: `300px`, `10rem`, `calc(300px - var(--margin))`, but not `100%`). If you provide an invalid value, the image and video sizing can break, which can lead to scrolling issues inside the message list (for example the message list isn't scrolled to the bottom when you open a channel).
-
-If you set an invalid value to the variable, you'll see a warning on the browser's console:
-
-<img src={AttachmentSizeWarning} width="800" />
-
-#### File size optimization
-
-Based on the CSS settings provided for images and videos, the SDK will load an image (or thumbnail image in case of a video file) with a reduced file size while still providing sufficient image quality for the given dimensions. This will result in less network traffic and faster image load for users.
-
-#### Aspect ratio
-
-The following description is applicable for [theme-v2](../theming/introduction.mdx).
-
-The SDK will try to display images and videos with their original aspect ratio, however this isn't always guaranteed (in those cases a cropped image will be displayed). Three notable exceptions are:
-
-1. if a message contains multiple lines of texts and/or multiple attachments, the image/video might be stretched to its `max-width`
-
-**Example 1** - message with one line of text
-
-<img src={ImageSizingScreenshot1} width="200" />
-
-**Example 2** - message with multiple lines of text
-
-<img src={ImageSizingScreenshot2} width="200" />
-
-2. in Safari, images/videos with portrait orientation are stretched to `max-width`
-
-**Example 3** - portrait images in Safari
-
-<img src={ImageSizingScreenshot3} width="200" />
-
-3. if the image/video can't be rendered with the original aspect ratio given the `max-width` and `max-height` constraints of the host HTML element
-
-:::important
-**File size optimization** and maintaining **aspect ratio** uses features provided by Stream's CDN. If you're using your **own CDN** you'll likely have to provide your own implementation for this. You can do this using the [`AttachmentConfigurationService`](../services/AttachmentConfigurationService.mdx).
-:::
-
-:::danger
-**If you're planning to rewrite attachment sizing with your own CSS code** it's important to note that:
-
-The sizing logic for images and videos inside the [`AttachmentConfigurationService`](../services/AttachmentConfigurationService.mdx) requires that host elements of images and videos (usually `img` and `video` elements) have `max-height`/`height` and `max-width` properties defined and that these values can be computed to a valid pixel value using the [`getComputedStyle`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) (for more information refer to the [Maximum size](#maximum-size) section).
-:::
-
-[//]: # "Start of generated content"
-
-## Inputs and outputs
-
-### messageId
-
-• **messageId**: `undefined` \| `string`
-
-The id of the message the attachments belong to
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:44](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L44)
-
----
-
-### parentMessageId
-
-• **parentMessageId**: `undefined` \| `string`
-
-The parent id of the message the attachments belong to
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:48](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L48)
-
----
-
-### attachments
-
-• **attachments**: `Attachment`\<`DefaultStreamChatGenerics`\>[] = `[]`
-
-The attachments to display
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:52](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L52)
-
----
-
-### imageModalStateChange
-
-• `Readonly` **imageModalStateChange**: `EventEmitter`\<`"closed"` \| `"opened"`\>
-
-Emits the state of the image carousel window
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:56](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L56)
-
-[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/AttachmentPreviewListComponent.mdx b/docusaurus/docs/Angular/components/AttachmentPreviewListComponent.mdx
deleted file mode 100644
index b162258a..00000000
--- a/docusaurus/docs/Angular/components/AttachmentPreviewListComponent.mdx
+++ /dev/null
@@ -1,76 +0,0 @@
-import Screenshot from "../assets/attachment-preview-list-screenshot.png";
-
-The `AttachmentPreviewList` component displays a preview of the attachments uploaded to a message. Users can delete attachments using the preview component, or retry upload if it failed previously.
-
-The following attachment types are supported:
-
-- Images - displayed inline
-- Video files - no preview provided inside the message input, but displayed inline inside the message list
-- Other files - no preview provided, users can download the uploaded files
-
-**Example 1** - attachment previews
-
-<img src={Screenshot} width="1000" />
-
-## Basic Usage
-
-A typical use case for the `AttachmentPreviewList` component would be to use in your custom components that will completely override the message input component.
-
-**Example 1** - a basic example:
-
-```typescript
-@Component({
-  selector: "app-custom-message-input",
-  template: `
-    <stream-attachment-preview-list></stream-attachment-list>
-    <!-- Other parts of the custom message input component -->
-  `,
-})
-export class CustomMessageInputComponent {}
-```
-
-The `AttachmentPreviewList` uses the [`AttachmentService`](../services/AttachmentService.mdx) to display the attachment previews.
-
-## Customization
-
-You can provide your own attachment preview list component by the [`CustomTemplatesService`](../services/CustomTemplatesService.mdx)
-
-[//]: # "Start of generated content"
-
-## Inputs and outputs
-
-### attachmentUploads$
-
-• **attachmentUploads$**: `undefined` \| `Observable`\<`AttachmentUpload`\<`DefaultStreamChatGenerics`\>[]\>
-
-A stream that emits the current file uploads and their states
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:28](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L28)
-
----
-
-### retryAttachmentUpload
-
-• `Readonly` **retryAttachmentUpload**: `EventEmitter`\<`File`\>
-
-An output to notify the parent component if the user tries to retry a failed upload
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:32](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L32)
-
----
-
-### deleteAttachment
-
-• `Readonly` **deleteAttachment**: `EventEmitter`\<`AttachmentUpload`\<`DefaultStreamChatGenerics`\>\>
-
-An output to notify the parent component if the user wants to delete a file
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:36](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L36)
-
-[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/AutocompleteTextareaComponent.mdx b/docusaurus/docs/Angular/components/AutocompleteTextareaComponent.mdx
deleted file mode 100644
index 8c2ec29b..00000000
--- a/docusaurus/docs/Angular/components/AutocompleteTextareaComponent.mdx
+++ /dev/null
@@ -1,200 +0,0 @@
-The `AutocompleteTextarea` component is used by the [`MessageInput`](./MessageInputComponent.mdx) component to display the input HTML element where users can type their message.
-
-Message send can be triggered with the `Enter` key, new line can be added with the `Shift+Enter` combination.
-
-## Feature overview
-
-The `AutocompleteTextarea` extends the functionalities of the [`Textarea`](./TextareaComponent.mdx) component with autocomplete features:
-
-- users can mention other users in a message (transliteration is used to support languages with non-Latin characters)
-- users can send commands (for example /giphy)
-
-## Basic usage
-
-You can use the `AutocompleteTextarea` component if you want to create your own message input component to override the default one:
-
-```typescript
-@Component({
-  selector: "app-custom-message-input",
-  template: `
-    <stream-autocomplete-textarea
-      [(value)]="textareaValue"
-      (send)="messageSent()"
-      (userMentions)="mentionedUsers = $event"
-    ></stream-autocomplete-textarea>
-    <!-- Other parts of the custom message input component -->
-  `,
-})
-export class CustomMessageInputComponent {
-  textareaValue = "";
-  mentionedUsers = [];
-
-  messageSent() {
-    // Send your message
-  }
-}
-```
-
-[//]: # "Start of generated content"
-
-## Inputs and outputs
-
-### value
-
-• **value**: `string` = `''`
-
-The value of the input HTML element.
-
-#### Implementation of
-
-TextareaInterface.value
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:49](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L49)
-
----
-
-### placeholder
-
-• **placeholder**: `string` = `''`
-
-Placeholder of the textarea
-
-#### Implementation of
-
-TextareaInterface.placeholder
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:53](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L53)
-
----
-
-### areMentionsEnabled
-
-• **areMentionsEnabled**: `undefined` \| `boolean` = `true`
-
-If true, users can mention other users in messages. You can also set this input on the [`MessageInput`](./MessageInputComponent.mdx/#inputs-and-outputs) component.
-
-#### Implementation of
-
-TextareaInterface.areMentionsEnabled
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:57](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L57)
-
----
-
-### inputMode
-
-• **inputMode**: `"mobile"` \| `"desktop"`
-
-See [`MessageInputConfigService`](../services/MessageInputConfigService.mdx) for more information
-
-#### Implementation of
-
-TextareaInterface.inputMode
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:61](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L61)
-
----
-
-### mentionScope
-
-• **mentionScope**: `"channel"` \| `"application"` = `'channel'`
-
-The scope for user mentions, either members of the current channel of members of the application. You can also set this input on the [`MessageInput`](./MessageInputComponent.mdx/#inputs-and-outputs) component.
-
-#### Implementation of
-
-TextareaInterface.mentionScope
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:65](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L65)
-
----
-
-### autoFocus
-
-• **autoFocus**: `boolean` = `true`
-
-Enables or disables auto focus on the textarea element
-
-#### Implementation of
-
-TextareaInterface.autoFocus
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:69](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L69)
-
----
-
-### valueChange
-
-• `Readonly` **valueChange**: `EventEmitter`\<`string`\>
-
-Emits the current value of the input element when a user types.
-
-#### Implementation of
-
-TextareaInterface.valueChange
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:73](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L73)
-
----
-
-### send
-
-• `Readonly` **send**: `EventEmitter`\<`void`\>
-
-Emits when a user triggers a message send event (this happens when they hit the `Enter` key).
-
-#### Implementation of
-
-TextareaInterface.send
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:77](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L77)
-
----
-
-### userMentions
-
-• `Readonly` **userMentions**: `EventEmitter`\<`UserResponse`\<`DefaultGenerics`\>[]\>
-
-Emits the array of users that are mentioned in the message, it is updated when a user mentions a new user or deletes a mention.
-
-#### Implementation of
-
-TextareaInterface.userMentions
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:81](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L81)
-
----
-
-### paste
-
-• `Readonly` **paste**: `EventEmitter`\<`ClipboardEvent`\>
-
-Emits any paste event that occured inside the textarea
-
-#### Implementation of
-
-TextareaInterface.paste
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:85](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L85)
-
-[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/AvatarComponent.mdx b/docusaurus/docs/Angular/components/AvatarComponent.mdx
deleted file mode 100644
index ed2e3902..00000000
--- a/docusaurus/docs/Angular/components/AvatarComponent.mdx
+++ /dev/null
@@ -1,160 +0,0 @@
-The `Avatar` component displays the provided image, with fallback to the first letter of the optional name input.
-
-## Basic Usage
-
-A typical use case for the `Avatar` component would be to use in your custom components that will completely override a message component, or similar.
-
-**Example 1** - a basic example:
-
-```typescript
-@Component({
-  selector: "app-custom-message",
-  template: `
-    <stream-avatar [imageUrl]="imageUrl" [name]="name"></stream-avatar>
-    <!-- Other parts of the custom message component -->
-  `,
-})
-export class CustomMessageComponent {
-  imageUrl =
-    "https://pbs.twimg.com/profile_images/897621870069112832/dFGq6aiE_400x400.jpg";
-  name = "Roy";
-}
-```
-
-## Customization
-
-You can provide your own avatar component using the [`CustomTemplatesService`](../services/CustomTemplatesService/#avatartemplate)
-
-This will override the avatar for all locations (for example: message sender, channel preview). In case you want to override it only for selected locations, you can create a custom template like this:
-
-```html
-<ng-template
-  #avatarTemplate
-  let-name="name"
-  let-imageUrl="imageUrl"
-  let-size="size"
-  let-type="type"
-  let-location="location"
-  let-user="user"
-  let-channel="channel"
-  let-initialsType="initialsType"
-  let-showOnlineIndicator="showOnlineIndicator"
->
-  <my-custom-avatar
-    *ngIf="location === 'message-sender'; else defaultAvatar"
-  ></my-custom-avatar>
-  <ng-template #defaultAvatar>
-    <stream-avatar
-      [name]="name"
-      [imageUrl]="imageUrl"
-      [size]="size"
-      [type]="type"
-      [location]="location"
-      [user]="user"
-      [channel]="channel"
-      [initialsType]="initialsType"
-      [showOnlineIndicator]="showOnlineIndicator"
-    ></stream-avatar>
-  </ng-template>
-</ng-template>
-```
-
-[//]: # "Start of generated content"
-
-## Inputs and outputs
-
-### name
-
-• **name**: `undefined` \| `string`
-
-An optional name of the image, used for fallback image or image title (if `imageUrl` is provided)
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:36](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L36)
-
----
-
-### imageUrl
-
-• **imageUrl**: `undefined` \| `string`
-
-The URL of the image to be displayed. If the image can't be displayed the first letter of the name input is displayed.
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:40](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L40)
-
----
-
-### location
-
-• **location**: `undefined` \| `AvatarLocation`
-
-The location the avatar will be displayed in
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:44](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L44)
-
----
-
-### channel
-
-• `Optional` **channel**: `Channel`\<`DefaultStreamChatGenerics`\>
-
-The channel the avatar belongs to (if avatar of a channel is displayed)
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:48](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L48)
-
----
-
-### user
-
-• `Optional` **user**: `User`\<`DefaultStreamChatGenerics`\>
-
-The user the avatar belongs to (if avatar of a user is displayed)
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:52](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L52)
-
----
-
-### type
-
-• **type**: `undefined` \| `AvatarType`
-
-The type of the avatar: channel if channel avatar is displayed, user if user avatar is displayed
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:56](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L56)
-
----
-
-### showOnlineIndicator
-
-• **showOnlineIndicator**: `boolean` = `true`
-
-If a channel avatar is displayed, and if the channel has exactly two members a green dot is displayed if the other member is online. Set this flag to `false` to turn off this behavior.
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:60](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L60)
-
----
-
-### initialsType
-
-• **initialsType**: `"first-letter-of-first-word"` \| `"first-letter-of-each-word"` = `'first-letter-of-first-word'`
-
-If channel/user image isn't provided the initials of the name of the channel/user is shown instead, you can choose how the initals should be computed
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:64](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L64)
-
-[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/AvatarPlaceholderComponent.mdx b/docusaurus/docs/Angular/components/AvatarPlaceholderComponent.mdx
deleted file mode 100644
index 754c55f8..00000000
--- a/docusaurus/docs/Angular/components/AvatarPlaceholderComponent.mdx
+++ /dev/null
@@ -1,101 +0,0 @@
-The `AvatarPlaceholder` component displays the [default avatar](./AvatarComponent.mdx) unless a [custom template](../services/CustomTemplatesService.mdx) is provided. This component is used by the SDK internally, you likely won't need to use it.
-
-[//]: # "Start of generated content"
-
-## Inputs and outputs
-
-### name
-
-• **name**: `undefined` \| `string`
-
-An optional name of the image, used for fallback image or image title (if `imageUrl` is provided)
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:23](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L23)
-
----
-
-### imageUrl
-
-• **imageUrl**: `undefined` \| `string`
-
-The URL of the image to be displayed. If the image can't be displayed the first letter of the name input is displayed.
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:27](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L27)
-
----
-
-### location
-
-• **location**: `undefined` \| `AvatarLocation`
-
-The location the avatar will be displayed in
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:31](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L31)
-
----
-
-### channel
-
-• `Optional` **channel**: `Channel`\<`DefaultStreamChatGenerics`\>
-
-The channel the avatar belongs to (if avatar of a channel is displayed)
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:35](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L35)
-
----
-
-### user
-
-• `Optional` **user**: `User`\<`DefaultStreamChatGenerics`\>
-
-The user the avatar belongs to (if avatar of a user is displayed)
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L39)
-
----
-
-### type
-
-• **type**: `undefined` \| `AvatarType`
-
-The type of the avatar: channel if channel avatar is displayed, user if user avatar is displayed
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L43)
-
----
-
-### initialsType
-
-• **initialsType**: `"first-letter-of-first-word"` \| `"first-letter-of-each-word"` = `'first-letter-of-first-word'`
-
-If channel/user image isn't provided the initials of the name of the channel/user is shown instead, you can choose how the initals should be computed
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L47)
-
----
-
-### showOnlineIndicator
-
-• **showOnlineIndicator**: `boolean` = `true`
-
-If a channel avatar is displayed, and if the channel has exactly two members a green dot is displayed if the other member is online. Set this flag to `false` to turn off this behavior.
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts:53](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts#L53)
-
-[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/ChannelComponent.mdx b/docusaurus/docs/Angular/components/ChannelComponent.mdx
deleted file mode 100644
index b9367aa2..00000000
--- a/docusaurus/docs/Angular/components/ChannelComponent.mdx
+++ /dev/null
@@ -1,29 +0,0 @@
-The `Channel` component is a container component that displays the [`ChannelHeader`](./ChannelHeaderComponent.mdx), [`MessageList`](./MessageListComponent.mdx), [`NotificationList`](./NotificationListComponent.mdx), [`MessageBouncePrompt`](./MessageBouncePromptComponent.mdx) and [`MessageInput`](./MessageInputComponent.mdx) components. You can also provide the [`Thread`](./ThreadComponent.mdx) component to use message [threads](https://getstream.io/chat/docs/javascript/threads/?language=javascript).
-
-## Usage
-
-```html
-<div id="root">
-  <stream-channel-list></stream-channel-list>
-  <stream-channel>
-    <!-- Main messages in the channel -->
-    <stream-channel-header></stream-channel-header>
-    <stream-message-list></stream-message-list>
-    <stream-message-input></stream-message-input>
-    <!-- Main messages in the channel -->
-    <!-- Thread messages in the channel -->
-    <!-- The name attribute selects the slot for the thread component inside channel -->
-    <stream-thread name="thread">
-      <stream-message-list mode="thread"></stream-message-list>
-      <stream-message-input mode="thread"></stream-message-input>
-    </stream-thread>
-    <!-- Thread messages in the channel -->
-  </stream-channel>
-  <stream-notification-list></stream-notification-list>
-</div>
-```
-
-The `Channel` component doesn't do any settings, it's just displays its children components. The main purpose of this component is to provide the layout for the initial chat UI.
-
-[//]: # "Start of generated content"
-[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/ChannelHeaderComponent.mdx b/docusaurus/docs/Angular/components/ChannelHeaderComponent.mdx
deleted file mode 100644
index e20dbd02..00000000
--- a/docusaurus/docs/Angular/components/ChannelHeaderComponent.mdx
+++ /dev/null
@@ -1,32 +0,0 @@
-import ChannelHeaderScreenshot from "../assets/channel-header-screenshot.png";
-
-The `ChannelHeader` component displays the avatar and name of the currently active channel along with member and watcher information. You can read about [the difference between members and watchers](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript#watchers-vs-members) in the platform documentation. Please note that number of watchers is only displayed if the user has [`connect-events` capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript)
-
-**Example 1** - Channel header:
-
-<img src={ChannelHeaderScreenshot} width="500" />
-
-## Basic usage
-
-```html
-<my-channel>
-  <stream-channel-header></stream-channel-header>
-</my-channel>
-```
-
-## Customization
-
-### Channel information
-
-You can provide your own template for displaying channel information using the [`CustomTemplatesService`](../services/CustomTemplatesService/#channelheaderinfotemplate)
-
-### Channel actions
-
-By default no channel action is displayed, but it's possible to [add action buttons to the channel header](../services/CustomTemplatesService.mdx/#channelactionstemplate) component. You can follow our [code example](../code-examples/channel-invites.mdx) that implements the invite action (you can implement other kind of actions as well, for example edit).
-
-### Menu button
-
-You can provide a menu button template to the channel header, the [responsive layout guide](../code-examples/responsive-layout.mdx) shows how you can use this to toggle the channel list on mobile screens.
-
-[//]: # "Start of generated content"
-[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/ChannelListComponent.mdx b/docusaurus/docs/Angular/components/ChannelListComponent.mdx
deleted file mode 100644
index 13e71fef..00000000
--- a/docusaurus/docs/Angular/components/ChannelListComponent.mdx
+++ /dev/null
@@ -1,41 +0,0 @@
-import ChannelList from "../assets/channel-list.png";
-
-The `ChannelList` component renders the list of channels.
-
-The `ChannelList` displays channels using pagination, new channels are loaded if the user clicks the "Load more" button.
-
-The channel list is always visible on desktop devices, on mobile devices, the list can be opened or closed controlled by a button in the [`ChannelHeader`](./ChannelHeaderComponent.mdx) component.
-
-<img src={ChannelList} />
-
-## Customization
-
-### UI customization
-
-**Example 1** - Using a custom channel list component
-
-See our [customization guide](../concepts/customization.mdx) on how to provide your own channel list component.
-
-**Example 2** - Using a custom channel preview component
-
-If you only want to customize the channel preview items (not the whole list), see the [channel preview customization](./ChannelPreviewComponent.mdx/#customization) guide.
-
-**Example 3** - Content injection points
-
-It's possible to inject your own content to the top or to the bottom of the channel list:
-
-```html
-<stream-channel-list>
-  <input channel-list-top placeholder="Search" />
-  <button channel-list-bottom>Add new channel</button>
-</stream-channel-list>
-```
-
-Use the `channel-list-top` attribute to inject content at the top of the channel list, and the `channel-list-bottom` to display content at the bottom of the channel list.
-
-### Behavior customization
-
-Please refer to the [channel list guide](../../concepts/channel-list/)
-
-[//]: # "Start of generated content"
-[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/ChannelPreviewComponent.mdx b/docusaurus/docs/Angular/components/ChannelPreviewComponent.mdx
deleted file mode 100644
index ebdafda1..00000000
--- a/docusaurus/docs/Angular/components/ChannelPreviewComponent.mdx
+++ /dev/null
@@ -1,42 +0,0 @@
-import ChannelPreview from "../assets/channel-preview.png";
-import ChannelPreviewInfo from "../assets/channel-preview-info.png";
-
-The `ChannelPreview` component displays a channel preview in the channel list, it consists of the image, name (or list of members if name isn't defined) and latest message of the channel.
-
-<img src={ChannelPreview} width="500" />
-
-## Basic usage
-
-The `ChannelPreview` component is displayed inside the built-in [channel list component](../../components/ChannelListComponent). If you're building you own channel list, this is how you can use this component:
-
-```html
-<stream-channel-preview [channel]="channel"></stream-channel-preview>
-```
-
-## Customization
-
-1. You can provide your own template for the channel preview info (marked with the red rectangle on the screenshot) by providing your own template for the [`customTemplatesService.channelPreviewInfoTemplate$`](../../services/CustomTemplatesService/#channelpreviewinfotemplate).
-
-<img src={ChannelPreviewInfo} width="500" />
-
-2. If you want to customize the channel avatar, please refer to the [avatar customization section](../../components/AvatarComponent/#customization)
-
-3. You can replace the whole component by providing your own template for the [`customTemplatesService.channelPreviewInfoTemplate$`](../../services/CustomTemplatesService/#channelpreviewtemplate).
-
-4. The [`MessageService`](../services/MessageService.mdx) provides some customization options for message display the are applied to both the message and channel preview components
-
-[//]: # "Start of generated content"
-
-## Inputs and outputs
-
-### channel
-
-• **channel**: `undefined` \| `Channel`\<`DefaultStreamChatGenerics`\>
-
-The channel to be displayed
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel-preview/channel-preview.component.ts:28](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel-preview/channel-preview.component.ts#L28)
-
-[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/IconComponent.mdx b/docusaurus/docs/Angular/components/IconComponent.mdx
deleted file mode 100644
index 0478f84a..00000000
--- a/docusaurus/docs/Angular/components/IconComponent.mdx
+++ /dev/null
@@ -1,38 +0,0 @@
-The `Icon` component can be used to display different icons (i. e. message delivered icon).
-
-## Basic usage
-
-A typical use case for the `Icon` component would be to use in your custom components.
-
-```typescript
-@Component({
-  selector: "app-custom-message",
-  template: `
-    <stream-icon icon="delivered-icon"></stream-icon>
-    <!-- Other parts of the custom message component -->
-  `,
-})
-export class CustomMessageComponent {
-  @Input() message: StreamMessage;
-}
-```
-
-## Customization
-
-Please refer to the [theming docs](../../theming/themingv2/#custom-icons)
-
-[//]: # "Start of generated content"
-
-## Inputs and outputs
-
-### icon
-
-• **icon**: `undefined` \| `Icon`
-
-The icon to display, the list of [supported icons](https://github.com/GetStream/stream-chat-angular/tree/master/projects/stream-chat-angular/src/lib/icon/icon.component.ts) can be found on GitHub.
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/icon/icon.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/icon/icon.component.ts#L39)
-
-[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/IconPlaceholderComponent.mdx b/docusaurus/docs/Angular/components/IconPlaceholderComponent.mdx
deleted file mode 100644
index b0d47b9a..00000000
--- a/docusaurus/docs/Angular/components/IconPlaceholderComponent.mdx
+++ /dev/null
@@ -1,17 +0,0 @@
-The `IconPlaceholder` component displays the [default icons](./IconComponent.mdx) unless a [custom template](../services/CustomTemplatesService.mdx) is provided. This component is used by the SDK internally, you likely won't need to use it.
-
-[//]: # "Start of generated content"
-
-## Inputs and outputs
-
-### icon
-
-• **icon**: `undefined` \| `Icon`
-
-The icon to display, the list of [supported icons](https://github.com/GetStream/stream-chat-angular/tree/master/projects/stream-chat-angular/src/lib/icon/icon.component.ts) can be found on GitHub.
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/icon/icon-placeholder/icon-placeholder.component.ts:18](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/icon/icon-placeholder/icon-placeholder.component.ts#L18)
-
-[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/LoadingIndicatorComponent.mdx b/docusaurus/docs/Angular/components/LoadingIndicatorComponent.mdx
deleted file mode 100644
index b5045a7d..00000000
--- a/docusaurus/docs/Angular/components/LoadingIndicatorComponent.mdx
+++ /dev/null
@@ -1,28 +0,0 @@
-The `LoadingIndicator` component displays a spinner to indicate that an action is in progress.
-
-## Basic usage
-
-A typical use case for the `LoadingIndicator` component would be to use in your custom components that will completely override a message component, or similar.
-
-```typescript
-@Component({
-  selector: "app-custom-message",
-  template: `
-    <stream-loading-indicator
-      *ngIf="message.status === 'sending'"
-      [size]="20"
-    ></stream-loading-indicator>
-    <!-- Other parts of the custom message component -->
-  `,
-})
-export class CustomMessageComponent {
-  @Input() message: StreamMessage;
-}
-```
-
-## Customization
-
-You can provide your own loading indicator component by the [`CustomTemplatesService`](../services/CustomTemplatesService.mdx)
-
-[//]: # "Start of generated content"
-[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/LoadingIndicatorPlaceholderComponent.mdx b/docusaurus/docs/Angular/components/LoadingIndicatorPlaceholderComponent.mdx
deleted file mode 100644
index 404bd82b..00000000
--- a/docusaurus/docs/Angular/components/LoadingIndicatorPlaceholderComponent.mdx
+++ /dev/null
@@ -1,4 +0,0 @@
-The `LoadingInficatorPlaceholder` component displays the [default loading indicator](./LoadingIndicatorComponent.mdx) unless a [custom template](../services/CustomTemplatesService.mdx) is provided. This component is used by the SDK internally, you likely won't need to use it.
-
-[//]: # "Start of generated content"
-[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/MessageActionsBoxComponent.mdx b/docusaurus/docs/Angular/components/MessageActionsBoxComponent.mdx
deleted file mode 100644
index c5643bc6..00000000
--- a/docusaurus/docs/Angular/components/MessageActionsBoxComponent.mdx
+++ /dev/null
@@ -1,89 +0,0 @@
-import MessageActionsScreenshot from "../assets/message-actions-screenshot.png";
-
-The `MessageActionsBox` component displays a list of message actions (i.e edit), that can be opened or closed. You can find the [list of the supported actions](../concepts/message-interactions.mdx) in the message interaction guide.
-
-**Example 1** - example message actions with the message component:
-
-<img src={MessageActionsScreenshot} width="500" />
-
-## Basic usage
-
-A typical use case for the `MessageActionsBox` component would be to use in your custom components that will completely override the message component.
-
-```typescript
-@Component({
-  selector: "app-custom-message",
-  template: `
-    <stream-message-actions-box
-      [isMine]="isMine"
-      [enabledActions]="enabledActions"
-      [message]="message"
-      [messageTextHtmlElement]="messageTextHtmlElement"
-    ></stream-message-actions-box>
-    <!-- Other parts of the custom message component -->
-    <div #messageTextHtmlElement>{{ message.text }}</div>
-  `,
-})
-export class CustomMessageComponent {
-  @Input() message: StreamMessage;
-  @Input() enabledActions: string[];
-}
-```
-
-## Customization
-
-- You can provide your own message actions box component (or just a template for the items) by the [`CustomTemplatesService`](../services/CustomTemplatesService.mdx).
-- You can extend the built-in actions with custom actions, for more info see the [`MessageActionsService`](../../services/MessageActionsService/#customactions)
-- You can also provide a custom event handler method to be called when the message actions button is clicked, for more info see the [`MessageActionsService`](../../services/MessageActionsService/#customactionclickhandler)
-
-[//]: # "Start of generated content"
-
-## Inputs and outputs
-
-### isMine
-
-• **isMine**: `boolean` = `false`
-
-Indicates if the message actions are belonging to a message that was sent by the current user or not.
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts:37](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L37)
-
----
-
-### message
-
-• **message**: `undefined` \| `StreamMessage`\<`DefaultStreamChatGenerics`\>
-
-The message the actions will be executed on
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts:41](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L41)
-
----
-
-### messageTextHtmlElement
-
-• **messageTextHtmlElement**: `undefined` \| `HTMLElement`
-
-The HTML element which contains the message text, it's used for the "copy message text" action
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts:45](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L45)
-
----
-
-### enabledActions
-
-• **enabledActions**: `string`[] = `[]`
-
-The list of [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript) that are enabled for the current user, the list of [supported interactions](../concepts/message-interactions.mdx) can be found in our message interaction guide. Unathorized actions won't be displayed on the UI.
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts:49](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts#L49)
-
-[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/MessageBouncePromptComponent.mdx b/docusaurus/docs/Angular/components/MessageBouncePromptComponent.mdx
deleted file mode 100644
index eb1d3011..00000000
--- a/docusaurus/docs/Angular/components/MessageBouncePromptComponent.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-import Screenshot from "../assets/message-bounce-screenshot.png";
-
-The component watches for the [`channelService.bouncedMessage$` stream](../../services/ChannelService/#bouncedmessage) and opens the bounce modal if a message is emitted.
-
-To bounce messages, you need to set up [semantic filters for moderation](https://getstream.io/automated-moderation/docs/automod_configuration/?q=semantic%20filters).
-
-## Usage
-
-To bounce messages, you need to set up [semantic filters for moderation](https://getstream.io/automated-moderation/docs/automod_configuration/?q=semantic%20filters).
-
-When a user tries to send a message that voilates the content guidelines set up by a semantic filter the `StreamMessage` object will have the following format:
-
-- `type` will be `error`
-- the `moderation_details` property will contain the details of the error
-
-The built-in [message component](../../components/MessageComponent) will open the bounce prompt when a bounced message is clicked. If you have a custom UI, this is how you can do that:
-
-```typescript
-constructor(private channelService: ChannelService) {
-  // Open the modal
-  this.messageActionsService.bouncedMessage$.next(<stream message>);
-  // Close the modal
-  this.messageActionsService.bouncedMessage$.next(undefined);
-}
-```
-
-The built-in [channel component](../../components/ChannelComponent) displays the `stream-message-bounce-prompt` component. If you have a custom UI, this is how you can do that:
-
-```html
-<stream-message-bounce-prompt></stream-message-bounce-prompt>
-```
-
-<img src={Screenshot} width="1000" />
-
-## Customization
-
-You can provide your own custom component using the [`customTemplatesService.messageBouncePromptTemplate$` property](../../services/CustomTemplatesService/#messagebounceprompttemplate)
-
-[//]: # "Start of generated content"
-[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/MessageComponent.mdx b/docusaurus/docs/Angular/components/MessageComponent.mdx
deleted file mode 100644
index 72c0beae..00000000
--- a/docusaurus/docs/Angular/components/MessageComponent.mdx
+++ /dev/null
@@ -1,138 +0,0 @@
-import MessageScreenshot from "../assets/message-screenshot.png";
-import MessageActionsScreenshot from "../assets/message-actions-screenshot.png";
-import MessageReactionsScreenshot from "../assets/message-reactions-screenshot.png";
-
-The `Message` component displays a message with additional information such as sender and date, and enables [interaction with the message (for example edit or react)](../concepts/message-interactions.mdx).
-
-**Example 1** - example message:
-
-<img src={MessageScreenshot} width="500" />
-
-**Example 2** - message with reactions:
-
-<img src={MessageReactionsScreenshot} width="500" />
-
-**Example 3** - message actions:
-
-<img src={MessageActionsScreenshot} width="500" />
-
-## Customization
-
-The message list uses the `Message` component to display messages, if you want to replace that with your own custom component, you can do that by providing it to the [`CustomTemplatesService`](../services/CustomTemplatesService.mdx/#messagetemplate). It's also possible to just override parts of the message component.
-
-The `Message` component uses the [`DateParserService`](../services/DateParserService.mdx) to create user-friendly dates, you can override the date-parsing methods with your own functions.
-
-The [`MessageService`](../services/MessageService.mdx) has additional customization options.
-
-:::note
-
-If you want to build your own `Message` component, you might find the following building blocks useful:
-
-### Avatar
-
-The `Message` component uses the [`Avatar`](./AvatarComponent.mdx) component to display the sender's photo.
-
-### Message actions
-
-The `Message` component uses the [`MessageActionsBox`](./MessageActionsBoxComponent.mdx) component to enable interaction with the message (edit).
-
-### Message reactions
-
-The `Message` component uses the [`MessageReactions`](./MessageReactionsComponent.mdx) component to display reactions of a message, and enable reacting to a message.
-
-### Attachments
-
-The `Message` component uses the [`AttachmentList`](./AttachmentListComponent.mdx) component to display the attachments of the message.
-
-### Read by
-
-The `Message` component uses the [`listUsers`](https://github.com/GetStream/stream-chat-angular/tree/master/projects/stream-chat-angular/src/lib/list-users.ts) utility function to display the list of people who have read a particular message in a user friendly way (for example _Bob, Sophie, Jack, Rose, John and 1 more_).
-
-### Loading indicator
-
-The `Message` component uses the [`LoadingIndicator`](./LoadingIndicatorComponent.mdx) component to display a spinner while the message is being sent.
-
-### Icons
-
-The `Message` component uses the [`Icon`](./IconComponent.mdx) component to display icons.
-:::
-
-## Mention template
-
-You can add interactions to mentions inside a message, follow our [mention actions guide](../code-examples/mention-actions.mdx) to get to know more.
-
-[//]: # "Start of generated content"
-
-## Inputs and outputs
-
-### message
-
-• **message**: `undefined` \| `StreamMessage`\<`DefaultStreamChatGenerics`\>
-
-The message to be displayed
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message/message.component.ts:64](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message/message.component.ts#L64)
-
----
-
-### enabledMessageActions
-
-• **enabledMessageActions**: `string`[] = `[]`
-
-The list of [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript) that are enabled for the current user, the list of [supported interactions](../concepts/message-interactions.mdx) can be found in our message interaction guide. Unathorized actions won't be displayed on the UI. The [`MessageList`](./MessageListComponent.mdx) component automatically sets this based on [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript).
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message/message.component.ts:68](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message/message.component.ts#L68)
-
----
-
-### isLastSentMessage
-
-• **isLastSentMessage**: `undefined` \| `boolean`
-
-If `true`, the message status (sending, sent, who read the message) is displayed.
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message/message.component.ts:72](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message/message.component.ts#L72)
-
----
-
-### mode
-
-• **mode**: `"main"` \| `"thread"` = `'main'`
-
-Determines if the message is being dispalyed in a channel or in a [thread](https://getstream.io/chat/docs/javascript/threads/?language=javascript).
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message/message.component.ts:76](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message/message.component.ts#L76)
-
----
-
-### isHighlighted
-
-• **isHighlighted**: `boolean` = `false`
-
-Highlighting is used to add visual emphasize to a message when jumping to the message
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message/message.component.ts:80](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message/message.component.ts#L80)
-
----
-
-### scroll$
-
-• `Optional` **scroll$**: `Observable`\<`void`\>
-
-An Observable that emits when the message list is scrolled, it's used to prevent opening the message menu while scroll is in progress
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message/message.component.ts:84](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message/message.component.ts#L84)
-
-[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/MessageInputComponent.mdx b/docusaurus/docs/Angular/components/MessageInputComponent.mdx
deleted file mode 100644
index 1fe6b7b9..00000000
--- a/docusaurus/docs/Angular/components/MessageInputComponent.mdx
+++ /dev/null
@@ -1,223 +0,0 @@
-The `MessageInput` component displays an input where users can type their messages and upload files, and sends the message to the active channel. The component can be used to compose new messages or update existing ones. To send messages, the chat user needs to have the necessary [channel capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript).
-
-## Configuration
-
-The `MessageInput` component can use the [`Textarea`](./TextareaComponent.mdx) or the [`AutocompleteTextarea`](./AutocompleteTextareaComponent.mdx) component for displaying an HTML input for the users to type. You need to [provide your chosen component at module import](../concepts/opt-in-architecture.mdx).
-
-## Emoji picker
-
-The SDK doesn't have a built-in emoji picker, but it has support for providing your own template. Follow our [emoji picker guide](../code-examples/emoji-picker.mdx) to get to know more.
-
-## Voice recorder
-
-To enable recording voice messages, please follow the [voice recordings guide](../../code-examples/voice-recordings).
-
-## Customization
-
-If you want to provide your own message input component you'll have to provide it in the following places:
-
-- Replace the default message input inside the [channel](./ChannelComponent.mdx)
-- Replace the default message input inside the [thread](./ThreadComponent.mdx)
-
-You can replace the textarea inside the message input following our [Custom textarea guide](../../code-examples/custom-textarea)
-
-You can instert custom HTML content to the start or end of the message input using the `message-input-start` or `message-input-end` attributes:
-
-```html
-<stream-message-input>
-  <div message-input-start>Custom content injected before the textarea</div>
-  <div message-input-end>Custom content injected after the textarea</div>
-</stream-message-input>
-```
-
-See [our customization guide](../concepts/customization.mdx) for more information.
-
-:::note
-If you want to create your own message input, you can use the following building blocks:
-
-### Send and update messages
-
-You can use [`ChannelService`](../services/ChannelService.mdx) to send and update messages.
-
-### File uploads
-
-You can use the [`AttachmentService`](../services/AttachmentService.mdx) to manage file uploads.
-
-If more than one message input component can exist on your chat UI you should provide the `AttachmentService` on the component level:
-
-```typescript
-@Component({
-  selector: 'custom-message-input',
-  templateUrl: './message-input.component.html',
-  styles: [],
-  providers: [AttachmentService],
-})
-```
-
-### `Textarea`
-
-You can use the [`Textarea`](./TextareaComponent.mdx) or the [`AutocompleteTextarea`](./AutocompleteTextareaComponent.mdx) component to display the input HTML element for the users to type.
-
-:::
-
-[//]: # "Start of generated content"
-
-## Inputs and outputs
-
-### isFileUploadEnabled
-
-• **isFileUploadEnabled**: `undefined` \| `boolean`
-
-If file upload is enabled, the user can open a file selector from the input. Please note that the user also needs to have the necessary [channel capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript). If no value is provided, it is set from the [`MessageInputConfigService`](../services/MessageInputConfigService.mdx).
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:64](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L64)
-
----
-
-### areMentionsEnabled
-
-• **areMentionsEnabled**: `undefined` \| `boolean`
-
-If true, users can mention other users in messages. You also [need to use the `AutocompleteTextarea`](../concepts/opt-in-architecture.mdx) for this feature to work. If no value is provided, it is set from the [`MessageInputConfigService`](../services/MessageInputConfigService.mdx).
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:68](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L68)
-
----
-
-### mentionScope
-
-• **mentionScope**: `undefined` \| `"channel"` \| `"application"`
-
-The scope for user mentions, either members of the current channel of members of the application. If no value is provided, it is set from the [`MessageInputConfigService`](../services/MessageInputConfigService.mdx).
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:72](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L72)
-
----
-
-### mode
-
-• **mode**: `"main"` \| `"thread"` = `'main'`
-
-Determines if the message is being dispalyed in a channel or in a [thread](https://getstream.io/chat/docs/javascript/threads/?language=javascript).
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:76](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L76)
-
----
-
-### isMultipleFileUploadEnabled
-
-• **isMultipleFileUploadEnabled**: `undefined` \| `boolean`
-
-If true, users can select multiple files to upload. If no value is provided, it is set from the [`MessageInputConfigService`](../services/MessageInputConfigService.mdx).
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:80](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L80)
-
----
-
-### message
-
-• **message**: `undefined` \| `StreamMessage`\<`DefaultStreamChatGenerics`\>
-
-The message to edit
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:84](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L84)
-
----
-
-### sendMessage$
-
-• **sendMessage$**: `undefined` \| `Observable`\<`void`\>
-
-An observable that can be used to trigger message sending from the outside
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:88](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L88)
-
----
-
-### inputMode
-
-• **inputMode**: `"mobile"` \| `"desktop"`
-
-In `desktop` mode the `Enter` key will trigger message sending, in `mobile` mode the `Enter` key will insert a new line to the message input. If no value is provided, it is set from the [`MessageInputConfigService`](../services/MessageInputConfigService.mdx).
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:92](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L92)
-
----
-
-### autoFocus
-
-• **autoFocus**: `boolean` = `true`
-
-Enables or disables auto focus on the textarea element
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:96](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L96)
-
----
-
-### watchForMessageToEdit
-
-• **watchForMessageToEdit**: `boolean` = `true`
-
-By default the input will react to changes in `messageToEdit$` from [`MessageActionsService`](../services/MessageActionsService.mdx) and display the message to be edited (taking into account the current `mode`).
-
-If you don't need that behavior, you can turn this of with this flag. In that case you should create your own edit message UI.
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:102](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L102)
-
----
-
-### displaySendButton
-
-• **displaySendButton**: `boolean` = `true`
-
-Use this input to control wether a send button is rendered or not. If you don't render a send button, you can still trigger message send using the `sendMessage$` input.
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:106](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L106)
-
----
-
-### displayVoiceRecordingButton
-
-• **displayVoiceRecordingButton**: `boolean` = `false`
-
-You can enable/disable voice recordings with this input
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:110](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L110)
-
----
-
-### messageUpdate
-
-• `Readonly` **messageUpdate**: `EventEmitter`\<\{ `message`: `StreamMessage`\<`DefaultStreamChatGenerics`\> }\>
-
-Emits when a message was successfuly sent or updated
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:114](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L114)
-
-[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/MessageListComponent.mdx b/docusaurus/docs/Angular/components/MessageListComponent.mdx
deleted file mode 100644
index 746dcb95..00000000
--- a/docusaurus/docs/Angular/components/MessageListComponent.mdx
+++ /dev/null
@@ -1,136 +0,0 @@
-import MessagesWithGroupingsScreenhot from "../assets/messages-with-grouping-screenshot.png";
-import MessagesWithoutGroupingsScreenhot from "../assets/messages-without-groups-screenshot.png";
-
-The `MessageList` component renders a scroll-able list of messages.
-
-The `MessageList` displays messages using pagination, new messages are loaded when the user scrolls to the top of the list.
-
-## Customization
-
-### Custom message component
-
-If you want to customize how messages are displayed in the list, head over to the [`Message` component's page](../../components/MessageComponent/#customization).
-
-### Date separator
-
-- The component provides the [`displayDateSeparator`](#displaydateseparator) and [`dateSeparatorTextPos`](#dateseparatortextpos) inputs for configuring the date separator's behavior.
-- You can customize the displayed date format by providing your own [date parser](../../services/DateParserService/#customdateparser).
-- If you want to provide your own date separator UI, provide that to the [`CustomTemplatesService`](../../services/CustomTemplatesService/#dateseparatortemplate).
-
-### Custom message list
-
-The message list contains a lot of low-level logic related to scrolling, we don't advise to create your own message list component
-
-[//]: # "Start of generated content"
-
-## Inputs and outputs
-
-### mode
-
-• **mode**: `"main"` \| `"thread"` = `'main'`
-
-Determines if the message list should display channel messages or [thread messages](https://getstream.io/chat/docs/javascript/threads/?language=javascript).
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:63](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L63)
-
----
-
-### direction
-
-• **direction**: `"bottom-to-top"` \| `"top-to-bottom"` = `'bottom-to-top'`
-
-The direction of the messages in the list, `bottom-to-top` means newest message is at the bottom of the message list and users scroll upwards to load older messages
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:67](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L67)
-
----
-
-### hideJumpToLatestButtonDuringScroll
-
-• **hideJumpToLatestButtonDuringScroll**: `boolean` = `false`
-
-You can hide the "jump to latest" button while scrolling. A potential use-case for this input would be to [workaround a known issue on iOS Safar webview](https://github.com/GetStream/stream-chat-angular/issues/418)
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:72](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L72)
-
----
-
-### displayDateSeparator
-
-• **displayDateSeparator**: `boolean` = `true`
-
-If `true` date separators will be displayed
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:76](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L76)
-
----
-
-### displayUnreadSeparator
-
-• **displayUnreadSeparator**: `boolean` = `true`
-
-If `true` unread indicator will be displayed
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:80](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L80)
-
----
-
-### dateSeparatorTextPos
-
-• **dateSeparatorTextPos**: `"center"` \| `"left"` \| `"right"` = `'center'`
-
-If date separators are displayed, you can set the horizontal position of the date text.
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:84](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L84)
-
----
-
-### openMessageListAt
-
-• **openMessageListAt**: `"last-message"` \| `"last-read-message"` = `'last-message'`
-
-`last-message` option will open the message list at the last message, `last-read-message` will open the list at the last unread message. This option only works if mode is `main`.
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:88](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L88)
-
----
-
-### hideUnreadCountForNotificationAndIndicator
-
-• **hideUnreadCountForNotificationAndIndicator**: `boolean` = `false`
-
-If the user has unread messages when they open the channel the UI shows the unread indicator / notification which features the unread count by default. This count will be increased every time a user receives a new message. If you don't want to show the unread count, you can turn that off.
-
-This is only applicable for `main` mode, as threads doesn't have read infromation.
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:95](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L95)
-
----
-
-### displayLoadingIndicator
-
-• **displayLoadingIndicator**: `boolean` = `true`
-
-You can turn on and off the loading indicator that signals to users that more messages are being loaded to the message list
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:99](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L99)
-
-[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/MessageReactionsComponent.mdx b/docusaurus/docs/Angular/components/MessageReactionsComponent.mdx
deleted file mode 100644
index cb0989b7..00000000
--- a/docusaurus/docs/Angular/components/MessageReactionsComponent.mdx
+++ /dev/null
@@ -1,114 +0,0 @@
-import MessageReactionsScreenshot from "../assets/message-reactions-screenshot.png";
-import MessageReactionsDetailsScreenshot from "../assets/reaction-details.png";
-
-The `MessageReactions` component displays the reactions of a message. You can read more about [message reactions](https://getstream.io/chat/docs/javascript/send_reaction/?language=javascript) in the platform documentation.
-
-**Example 1** - displaying reactions of a message:
-
-<img src={MessageReactionsScreenshot} width="500" />
-
-**Example 2** - displaying the reacting users - only visible if a message has at maximum 1200 reactions:
-
-<img src={MessageReactionsDetailsScreenshot} width="500" />
-
-## Basic usage
-
-A typical use case for the `MessageReactions` component would be to use in your custom components that will completely override the message component.
-
-```typescript
-@Component({
-  selector: "app-custom-message",
-  template: `
-    <stream-message-reactions
-      [messageId]="message.id"
-      [messageReactionCounts]="message.reaction_counts"
-      [latestReactions]="message.latest_reactions"
-      [ownReactions]="message.own_reactions"
-    ></stream-message-reactions>
-    <!-- Other parts of the custom message component -->
-  `,
-})
-export class CustomMessageComponent {
-  @Input() message: StreamMessage;
-}
-```
-
-## Customization
-
-You can override the default reaction options using the [`MessageReactionsService`](../services/MessageReactionsService.mdx).
-
-You can provide your own UI for the reaction details using the [`MessageReactionsService`](../services/MessageReactionsService.mdx).
-
-You can provide your own message reactions component by the [`CustomTemplatesService`](../services/CustomTemplatesService.mdx).
-
-[//]: # "Start of generated content"
-
-## Inputs and outputs
-
-### messageId
-
-• **messageId**: `undefined` \| `string`
-
-The id of the message the reactions belong to
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts:36](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L36)
-
----
-
-### messageReactionGroups
-
-• **messageReactionGroups**: `undefined` \| \{ `[key: string]`: `ReactionGroupResponse`; } = `undefined`
-
-The number of reactions grouped by [reaction types](https://github.com/GetStream/stream-chat-angular/tree/master/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts)
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts:40](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L40)
-
----
-
-### messageReactionCounts
-
-• **messageReactionCounts**: `Object` = `{}`
-
-The number of reactions grouped by [reaction types](https://github.com/GetStream/stream-chat-angular/tree/master/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts)
-
-**`Deprecated`**
-
-use `messageReactionGroups`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L47)
-
----
-
-### latestReactions
-
-• **latestReactions**: `ReactionResponse`\<`DefaultStreamChatGenerics`\>[] = `[]`
-
-List of reactions of a [message](../types/stream-message.mdx), used to display the users of a reaction type.
-
-**`Deprecated`**
-
-you can fetch the reactions using [`messageReactionsService.queryReactions()`](https://getstream.io/chat/docs/sdk/angular/services/MessageReactionsService/#queryreactions)
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts:53](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L53)
-
----
-
-### ownReactions
-
-• **ownReactions**: `ReactionResponse`\<`DefaultStreamChatGenerics`\>[] = `[]`
-
-List of the user's own reactions of a [message](../types/stream-message.mdx), used to display the users of a reaction type.
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts:57](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L57)
-
-[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/MessageReactionsSelectorComponent.mdx b/docusaurus/docs/Angular/components/MessageReactionsSelectorComponent.mdx
deleted file mode 100644
index 7ac39fff..00000000
--- a/docusaurus/docs/Angular/components/MessageReactionsSelectorComponent.mdx
+++ /dev/null
@@ -1,63 +0,0 @@
-import MessageReactionsSelectorScreenshot from "../assets/message-reactions-selector-screenshot.png";
-
-The `MessageReactionsSelectorComponent` makes it possible for users to react to a message, the reaction options can be set using the [`MessageReactionsService`](../../services/MessageReactionsService). You can read more about [message reactions](https://getstream.io/chat/docs/javascript/send_reaction/?language=javascript) in the platform documentation.
-
-**Example** - reacting to a message
-
-<img src={MessageReactionsSelectorScreenshot} width="500" />
-
-The `MessageReactionsSelectorComponent` is displayed inside the built-in [`MessageActionsBoxComponent`](../../components/MessageActionsBoxComponent).
-
-## Basic usage
-
-A typical use case for the `MessageReactionsSelectorComponent` would be to use in your custom components that will completely override the message component.
-
-```typescript
-@Component({
-  selector: "app-custom-message",
-  template: `
-    <stream-message-reactions-selector
-      [messageId]="message.id"
-      [ownReactions]="message.own_reactions"
-    ></stream-message-reactions-selector>
-    <!-- Other parts of the custom message component -->
-  `,
-})
-export class CustomMessageComponent {
-  @Input() message: StreamMessage;
-}
-```
-
-## Customization
-
-You can override the default reaction options using the [`MessageReactionsService`](../services/MessageReactionsService.mdx).
-
-You can provide your own message reaction selector component by the [`CustomTemplatesService`](../services/CustomTemplatesService.mdx).
-
-[//]: # "Start of generated content"
-
-## Inputs and outputs
-
-### ownReactions
-
-• **ownReactions**: `ReactionResponse`\<`DefaultStreamChatGenerics`\>[] = `[]`
-
-List of the user's own reactions of a [message](../types/stream-message.mdx), used to display the users of a reaction type.
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-reactions-selector/message-reactions-selector.component.ts:29](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-reactions-selector/message-reactions-selector.component.ts#L29)
-
----
-
-### messageId
-
-• **messageId**: `undefined` \| `string`
-
-The id of the message the reactions belong to
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-reactions-selector/message-reactions-selector.component.ts:33](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-reactions-selector/message-reactions-selector.component.ts#L33)
-
-[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/ModalComponent.mdx b/docusaurus/docs/Angular/components/ModalComponent.mdx
deleted file mode 100644
index b13ce58d..00000000
--- a/docusaurus/docs/Angular/components/ModalComponent.mdx
+++ /dev/null
@@ -1,57 +0,0 @@
-The `Modal` component displays its content in an overlay. The modal can be closed with a close button, if the user clicks outside of the modal content, or if the escape button is pressed. The modal can also be closed from outside.
-
-## Basic usage
-
-This example shows how to use the modal component
-
-**Example 1** - simple modal:
-
-```html
-<stream-modal [(isOpen)]="isModalOpen">
-  <!-- Modal content here -->
-</stream-modal>
-```
-
-## Customization
-
-You can provide your own modal component by the [`CustomTemplatesService`](../services/CustomTemplatesService.mdx)
-
-[//]: # "Start of generated content"
-
-## Inputs and outputs
-
-### isOpen
-
-• **isOpen**: `boolean` = `false`
-
-If `true` the modal will be displayed, if `false` the modal will be hidden
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/modal/modal.component.ts:25](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/modal/modal.component.ts#L25)
-
----
-
-### content
-
-• **content**: `undefined` \| `TemplateRef`\<`void`\>
-
-The content of the modal (can also be provided using `ng-content`)
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/modal/modal.component.ts:29](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/modal/modal.component.ts#L29)
-
----
-
-### isOpenChange
-
-• `Readonly` **isOpenChange**: `EventEmitter`\<`boolean`\>
-
-Emits `true` if the modal becomes visible, and `false` if the modal is closed.
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/modal/modal.component.ts:33](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/modal/modal.component.ts#L33)
-
-[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/NotificationComponent.mdx b/docusaurus/docs/Angular/components/NotificationComponent.mdx
deleted file mode 100644
index e052cb50..00000000
--- a/docusaurus/docs/Angular/components/NotificationComponent.mdx
+++ /dev/null
@@ -1,41 +0,0 @@
-The `Notification` component displays a notification in the [notification list](./NotificationListComponent.mdx).
-
-## Basic Usage
-
-```html
-<stream-notification type="success">
-  File upload was successfuly
-</stream-notification>
-```
-
-## Customization
-
-You can provide your own notification component by the [`CustomTemplatesService`](../services/CustomTemplatesService.mdx)
-
-[//]: # "Start of generated content"
-
-## Inputs and outputs
-
-### type
-
-• **type**: `undefined` \| `NotificationType`
-
-The type of the notification
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/notification/notification.component.ts:16](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/notification/notification.component.ts#L16)
-
----
-
-### content
-
-• **content**: `undefined` \| `TemplateRef`\<`void`\>
-
-The content of the notification (can also be provided using `ng-content`)
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/notification/notification.component.ts:20](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/notification/notification.component.ts#L20)
-
-[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/NotificationListComponent.mdx b/docusaurus/docs/Angular/components/NotificationListComponent.mdx
deleted file mode 100644
index f596651b..00000000
--- a/docusaurus/docs/Angular/components/NotificationListComponent.mdx
+++ /dev/null
@@ -1,24 +0,0 @@
-The `NotificationList` component displays the list of active notifications.
-
-## Basic Usage
-
-You can use the `NotificationList` component to display the active notifications:
-
-```html
-<div id="root">
-  <stream-channel-list></stream-channel-list>
-  <stream-channel>
-    <stream-channel-header></stream-channel-header>
-    <stream-message-list></stream-message-list>
-    <stream-message-input></stream-message-input>
-  </stream-channel>
-  <stream-notification-list></stream-notification-list>
-</div>
-```
-
-## Customization
-
-See [our customization guide](../concepts/customization.mdx) on how to provide your own notification list component.
-
-[//]: # "Start of generated content"
-[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/PaginatedListComponent.mdx b/docusaurus/docs/Angular/components/PaginatedListComponent.mdx
deleted file mode 100644
index 6938a476..00000000
--- a/docusaurus/docs/Angular/components/PaginatedListComponent.mdx
+++ /dev/null
@@ -1,92 +0,0 @@
-The `PaginatedListComponent` can display a list of arbitrary data with support for loading indicator and pagination. This is a utility component, you don't need to use it unless you're building a custom component.
-
-## Usage
-
-The paginated list component relies on data provided by the parent component. You can provide the HTML template for the list items.
-
-```html
-<stream-paginated-list
-  [items]="<list of items to display>"
-  [isLoading]="<set to true to display loading indicator>"
-  [hasMore]="<whether or not the list has more pages to retrieve>"
-  (loadMore)="<use this output to fetch the next page of items>"
->
-    <ng-template let-item="item" let-index="index"
-        ><div data-testid="test-item" [style.height]="height">
-          {{ index }}. {{ item }}
-        </div></ng-template
-    >
-</stream-user-list>
-```
-
-## Customization
-
-You can provide the HTML template for the list items, see above example.
-
-[//]: # "Start of generated content"
-
-## Inputs and outputs
-
-### items
-
-• **items**: `T`[] = `[]`
-
-The items to display
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/paginated-list/paginated-list.component.ts:28](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/paginated-list/paginated-list.component.ts#L28)
-
----
-
-### isLoading
-
-• **isLoading**: `boolean` = `false`
-
-If `true`, the loading indicator will be displayed
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/paginated-list/paginated-list.component.ts:32](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/paginated-list/paginated-list.component.ts#L32)
-
----
-
-### hasMore
-
-• **hasMore**: `boolean` = `false`
-
-If `false` the component won't ask for more data vua the `loadMore` output
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/paginated-list/paginated-list.component.ts:36](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/paginated-list/paginated-list.component.ts#L36)
-
----
-
-### trackBy
-
-• **trackBy**: `TrackByFunction`\<`T`\>
-
-The `trackBy` to use with the `NgFor` directive
-
-**`Param`**
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/paginated-list/paginated-list.component.ts:42](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/paginated-list/paginated-list.component.ts#L42)
-
----
-
-### loadMore
-
-• `Readonly` **loadMore**: `EventEmitter`\<`void`\>
-
-The component will signal via this output when more items should be fetched
-
-The new items should be appended to the `items` array
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/paginated-list/paginated-list.component.ts:49](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/paginated-list/paginated-list.component.ts#L49)
-
-[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/TextareaComponent.mdx b/docusaurus/docs/Angular/components/TextareaComponent.mdx
deleted file mode 100644
index deeca754..00000000
--- a/docusaurus/docs/Angular/components/TextareaComponent.mdx
+++ /dev/null
@@ -1,133 +0,0 @@
-The `Textarea` component is used by the [`MessageInput`](./MessageInputComponent.mdx) component to display the input HTML element where users can type their message.
-
-## Feature overview
-
-- Message send can be triggered with the `Enter` key, new line can be added with the `Shift+Enter` combination
-- The textarea will automatically grow with the text
-- The textarea will automatically insert emojis [from the emoji picker](../../code-examples/emoji-picker)
-
-If you want to enable autocomplete features, you can use the [`AutcompleteTextarea`](./AutocompleteTextareaComponent.mdx) component instead of this one.
-
-## Basic usage
-
-You can use the `Textarea` component if you want to create your own message input component to override the default one:
-
-```typescript
-@Component({
-  selector: "app-custom-message-input",
-  template: `
-    <stream-textarea
-      [(value)]="textareaValue"
-      (send)="messageSent()"
-    ></stream-textarea>
-    <!-- Other parts of the custom message input component -->
-  `,
-})
-export class CustomMessageInputComponent {
-  textareaValue = "";
-
-  messageSent() {
-    // Send your message
-  }
-}
-```
-
-[//]: # "Start of generated content"
-
-## Inputs and outputs
-
-### value
-
-• **value**: `string` = `''`
-
-The value of the input HTML element.
-
-#### Implementation of
-
-TextareaInterface.value
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts:35](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L35)
-
----
-
-### placeholder
-
-• **placeholder**: `string` = `''`
-
-Placeholder of the textarea
-
-#### Implementation of
-
-TextareaInterface.placeholder
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L39)
-
----
-
-### inputMode
-
-• **inputMode**: `"mobile"` \| `"desktop"`
-
-See [`MessageInputConfigService`](../services/MessageInputConfigService.mdx) for more information
-
-#### Implementation of
-
-TextareaInterface.inputMode
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L43)
-
----
-
-### autoFocus
-
-• **autoFocus**: `boolean` = `true`
-
-Enables or disables auto focus on the textarea element
-
-#### Implementation of
-
-TextareaInterface.autoFocus
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L47)
-
----
-
-### valueChange
-
-• `Readonly` **valueChange**: `EventEmitter`\<`string`\>
-
-Emits the current value of the input element when a user types.
-
-#### Implementation of
-
-TextareaInterface.valueChange
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts:51](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L51)
-
----
-
-### send
-
-• `Readonly` **send**: `EventEmitter`\<`void`\>
-
-Emits when a user triggers a message send event (this happens when they hit the `Enter` key).
-
-#### Implementation of
-
-TextareaInterface.send
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts:55](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts#L55)
-
-[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/ThreadComponent.mdx b/docusaurus/docs/Angular/components/ThreadComponent.mdx
deleted file mode 100644
index c8c6c1ba..00000000
--- a/docusaurus/docs/Angular/components/ThreadComponent.mdx
+++ /dev/null
@@ -1,21 +0,0 @@
-The `Thread` component represents a [message thread](https://getstream.io/chat/docs/javascript/threads/?language=javascript), it is a container component that displays a thread with a header, [`MessageList`](./MessageListComponent.mdx) and [`MessageInput`](./MessageInputComponent.mdx) components.
-
-## Usage
-
-The `Thread` component displays the thread header (built inside the thread), the message list and message input components:
-
-```html
-<stream-thread name="thread">
-  <stream-message-list mode="thread"></stream-message-list>
-  <stream-message-input mode="thread"></stream-message-input>
-</stream-thread>
-```
-
-You can use the default SDK components, or use your own custom components.
-
-## Customization
-
-See [our customization guide](../concepts/customization.mdx) on how to provide your own thread header or thread component.
-
-[//]: # "Start of generated content"
-[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/UserListComponent.mdx b/docusaurus/docs/Angular/components/UserListComponent.mdx
deleted file mode 100644
index 9315f857..00000000
--- a/docusaurus/docs/Angular/components/UserListComponent.mdx
+++ /dev/null
@@ -1,72 +0,0 @@
-The `UserListComponent` can display a list of Stream users with pagination. This can be useful if you want to build a user list in your application.
-
-## Usage
-
-The user list component relies on data provided by the parent component:
-
-```html
-<stream-user-list
-  [users]="<list of users to display>"
-  [isLoading]="<set to true to display loading indicator>"
-  [hasMore]="<whether or not the list has more pages to retrieve>"
-  (loadMore)="<use this output to fetch the next page of users>"
-></stream-user-list>
-```
-
-## Customization
-
-The component is built on top of the [`PaginatedListComponent`](../../components/PaginatedListComponent.mdx), you can use that component to build your own user list component.
-
-[//]: # "Start of generated content"
-
-## Inputs and outputs
-
-### users
-
-• **users**: `UserResponse`\<`DefaultStreamChatGenerics`\>[] = `[]`
-
-The users to display
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/user-list/user-list.component.ts:17](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/user-list/user-list.component.ts#L17)
-
----
-
-### isLoading
-
-• **isLoading**: `boolean` = `false`
-
-If `true`, the loading indicator will be displayed
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/user-list/user-list.component.ts:21](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/user-list/user-list.component.ts#L21)
-
----
-
-### hasMore
-
-• **hasMore**: `boolean` = `false`
-
-If `false` the component won't ask for more data vua the `loadMore` output
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/user-list/user-list.component.ts:25](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/user-list/user-list.component.ts#L25)
-
----
-
-### loadMore
-
-• `Readonly` **loadMore**: `EventEmitter`\<`void`\>
-
-The component will signal via this output when more items should be fetched
-
-The new items should be appended to the `items` array
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/user-list/user-list.component.ts:31](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/user-list/user-list.component.ts#L31)
-
-[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/VoiceRecorderComponent.mdx b/docusaurus/docs/Angular/components/VoiceRecorderComponent.mdx
deleted file mode 100644
index dbb19b40..00000000
--- a/docusaurus/docs/Angular/components/VoiceRecorderComponent.mdx
+++ /dev/null
@@ -1,16 +0,0 @@
-import VoiceRecorder from "../assets/voice-recorder.png";
-
-The `VoiceRecorderComponent` makes it possible to record audio, and then upload it as a voice recording attachment
-
-<img src={VoiceRecorder} width="500" />
-
-## Usage
-
-Please refer to the [voice recordings guide](../../code-examples/voice-recordings)
-
-## Customization
-
-Please refer to the [voice recordings guide](../../code-examples/voice-recordings)
-
-[//]: # "Start of generated content"
-[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/VoiceRecorderWavebarComponent.mdx b/docusaurus/docs/Angular/components/VoiceRecorderWavebarComponent.mdx
deleted file mode 100644
index 108e08e8..00000000
--- a/docusaurus/docs/Angular/components/VoiceRecorderWavebarComponent.mdx
+++ /dev/null
@@ -1,28 +0,0 @@
-import VoiceRecorderWavebar from "../assets/voice-recorder-wavebar.png";
-
-The `VoiceRecorderWavebarComponent` displays the amplitudes of the recording while the recoding is in progress
-
-<img src={VoiceRecorderWavebar} width="500" />
-
-The component doesn't have any inputs, instead it uses the [`AudioRecorderService`](../../services/AudioRecorderService.mdx) and the [`AmplitudeRecorderService`](../../services/AmplitudeRecorderService.mdx) to gather all necessary data.
-
-## Usage
-
-```html
-<stream-voice-recorder-wavebar
-  *ngIf="isRecording$ | async"
-></stream-voice-recorder-wavebar>
-```
-
-```typescript
-isRecording$: Observable<boolean>;
-
-constructor(public readonly recorder: AudioRecorderService) {
-    this.isRecording$ = this.recorder.recordingState$.pipe(map(s => s === MediaRecordingState.RECORDING || s === MediaRecordingState.PAUSED));
-}
-```
-
-## Customization
-
-[//]: # "Start of generated content"
-[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/VoiceRecordingComponent.mdx b/docusaurus/docs/Angular/components/VoiceRecordingComponent.mdx
deleted file mode 100644
index ea72c2a7..00000000
--- a/docusaurus/docs/Angular/components/VoiceRecordingComponent.mdx
+++ /dev/null
@@ -1,87 +0,0 @@
-import VoiceRecordingScreenshot from "../assets/voice-recording-screenshot.png";
-
-This component can be used to display an attachment with type `voiceRecording`. The component allows playing the attachment inside the browser.
-
-<img src={VoiceRecordingScreenshot} width="500" />
-
-## Usage
-
-The built-in [`AttachmentListComponent`](../../components/AttachmentListComponent) displays this component. If you want to use this directly in your UI you can do it like this:
-
-```html
-<stream-voice-recording [attachment]="attachment"></stream-voice-recording>
-```
-
-## Customization
-
-You can provide your own template using the [custom templates service](../services/CustomTemplatesService.mdx/#voicerecordingattachmenttemplate).
-
-## Example
-
-An example voice recording attachment:
-
-```typescript
-{
-  type: 'voiceRecording',
-  title: '99831FB3-5E35-41CD-8286-7A2E95A78FDC.aac',
-  asset_url:
-    '<link to file on Stream or custom CDN>',
-  waveform_data: [
-    0.18580253422260284, 0.22792305052280426, 0.23014479875564575,
-    0.2215365618467331, 0.280057817697525, 0.24526794254779816,
-    0.23399925231933594, 0.3128012716770172, 0.37945452332496643,
-    0.33992674946784973, 0.33231520652770996, 0.35996779799461365,
-    0.24952147901058197, 0.2771506607532501, 0.18567748367786407,
-    0.2669936418533325, 0.2318495213985443, 0.266754150390625,
-    0.24599547684192657, 0.22025825083255768, 0.2574225664138794,
-    0.2297886610031128, 0.21858176589012146, 0.22855964303016663,
-    0.21926963329315186, 0.1592704802751541, 0.17932571470737457,
-    0.17183426022529602, 0.16925041377544403, 0.17725585401058197,
-    0.20863258838653564, 0.15763725340366364, 0.17838287353515625,
-    0.2596689462661743, 0.2821672856807709, 0.2308555543422699,
-    0.21800407767295837, 0.237264484167099, 0.24341285228729248,
-    0.21091987192630768, 0.22752471268177032, 0.28887689113616943,
-    0.25566428899765015, 0.2714449167251587, 0.30015745759010315,
-    0.2883681356906891, 0.28020721673965454, 0.21566811203956604,
-    0.2041303962469101, 0.1856091320514679, 0.22570304572582245,
-    0.22362418472766876, 0.18938171863555908, 0.2105405479669571,
-    0.22487449645996094, 0.2667095959186554, 0.29159706830978394,
-    0.2825489938259125, 0.2347666174173355, 0.2768406569957733,
-    0.2953290641307831, 0.26249200105667114, 0.3034127950668335,
-    0.26899436116218567, 0.2931807041168213, 0.24274344742298126,
-    0.23544998466968536, 0.29423996806144714, 0.2060961127281189,
-    0.05098915100097656, 0.0063146972097456455, 0.015633393079042435,
-    0.03022758476436138, 0.026124343276023865, 0.014958725310862064,
-    0.01488060038536787, 0.0297449491918087, 0.046876221895217896,
-    0.016678161919116974, 0.030463561415672302, 0.022851256653666496,
-    0.040972135961055756, 0.050609588623046875, 0.04940780624747276,
-    0.04304153472185135, 0.08744628727436066, 0.0762052908539772,
-    0.0801474004983902, 0.0818980410695076, 0.08521285653114319,
-    0.07830711454153061, 0.07637504488229752, 0.09124496579170227,
-    0.16371025145053864, 0.08206146210432053, 0.0569305419921875,
-    0.043944090604782104, 0.07224594056606293, 0.06922554224729538,
-    5.340576194612368e-7,
-  ],
-  // in seconds
-  duration: 21.07675,
-  // in bytes
-  file_size: 56504,
-  mime_type: 'audio/aac',
-};
-```
-
-[//]: # "Start of generated content"
-
-## Inputs and outputs
-
-### attachment
-
-• `Optional` **attachment**: `Attachment`\<`DefaultStreamChatGenerics`\>
-
-The voice recording attachment
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/voice-recording/voice-recording.component.ts:29](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/voice-recording/voice-recording.component.ts#L29)
-
-[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/VoiceRecordingWavebarComponent.mdx b/docusaurus/docs/Angular/components/VoiceRecordingWavebarComponent.mdx
deleted file mode 100644
index 33979b00..00000000
--- a/docusaurus/docs/Angular/components/VoiceRecordingWavebarComponent.mdx
+++ /dev/null
@@ -1,63 +0,0 @@
-import WavebarScreenshot from "../assets/wavebar-screenshot.png";
-
-This component can be used to visualize the wave bar of a voice recording
-
-<img src={WavebarScreenshot} width="500" />
-
-## Usage
-
-The built-in [`AttachmentListComponent`](../../components/AttachmentListComponent) component displays this component. If you want to use this directly in your UI you can do it like this:
-
-```html
-<audio #audioElement></audio>
-<stream-voice-recording-wavebar
-  *ngIf="attachment?.waveform_data && attachment?.duration"
-  [waveFormData]="attachment?.waveform_data || []"
-  [duration]="attachment?.duration"
-  [audioElement]="audioElement"
-></stream-voice-recording-wavebar>
-```
-
-## Customization
-
-It's not possible to override only the wave data visualization, but you can override the [`VoiceRecordingComponent`](../services/CustomTemplatesService.mdx/#voicerecordingattachmenttemplate).
-
-[//]: # "Start of generated content"
-
-## Inputs and outputs
-
-### audioElement
-
-• `Optional` **audioElement**: `HTMLAudioElement`
-
-The audio element that plays the voice recording
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts:29](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts#L29)
-
----
-
-### waveFormData
-
-• **waveFormData**: `number`[] = `[]`
-
-The waveform data to visualize
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts:33](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts#L33)
-
----
-
-### duration
-
-• `Optional` **duration**: `number`
-
-The duration of the voice recording in seconds
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts:37](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts#L37)
-
-[//]: # "End of generated content"
diff --git a/docusaurus/docs/Angular/components/_category_.json b/docusaurus/docs/Angular/components/_category_.json
deleted file mode 100644
index d6b06f52..00000000
--- a/docusaurus/docs/Angular/components/_category_.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "label": "Components",
-  "position": 5
-}
diff --git a/docusaurus/docs/Angular/concepts/_category_.json b/docusaurus/docs/Angular/concepts/_category_.json
deleted file mode 100644
index 1d3167d4..00000000
--- a/docusaurus/docs/Angular/concepts/_category_.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "label": "Concepts",
-  "position": 3
-}
diff --git a/docusaurus/docs/Angular/concepts/change-detection.mdx b/docusaurus/docs/Angular/concepts/change-detection.mdx
deleted file mode 100644
index 110c3f3f..00000000
--- a/docusaurus/docs/Angular/concepts/change-detection.mdx
+++ /dev/null
@@ -1,77 +0,0 @@
----
-id: change-detection
-sidebar_position: 4
-title: Change detection
----
-
-For performance reasons, the Stream chat WebSocket connection is opened outside of the [Angular change detection zone](https://angular.io/guide/zone). This means that when we react to WebSocket events, Angular won't update the UI in response to these events. Furthermore, if a new component is created reacting to a WebSocket event (for example, if we receive a new message, and a new message component is created to display the new message), the new component will operate outside of the Angular change detection zone. To solve this problem, we need to reenter Angular's change detection zone.
-
-## Reentering Angular's change detection zone
-
-You can reenter Angular's change detection zone with the `run` method of the `NgZone` service. For example if you want to display a notification when a user is added to a channel, you can watch for the `notification.added_to_channel` event and return to the zone when that event is received:
-
-```typescript
-import { Component, NgZone, OnInit } from "@angular/core";
-import { filter } from "rxjs/operators";
-import { ChatClientService, NotificationService } from "stream-chat-angular";
-
-@Component({
-  selector: "app-root",
-  templateUrl: "./app.component.html",
-  styleUrls: ["./app.component.scss"],
-})
-export class AppComponent implements OnInit {
-  constructor(
-    private chatService: ChatClientService,
-    private notificationService: NotificationService,
-    private ngZone: NgZone
-  ) {}
-
-  ngOnInit(): void {
-    this.chatService.events$
-      .pipe(filter((n) => n.eventType === "notification.added_to_channel"))
-      .subscribe((notification) => {
-        // reenter Angular's change detection zone
-        this.ngZone.run(() => {
-          this.notificationService.addTemporaryNotification(
-            `You've been added to the ${notification.event.channel?.name} channel`,
-            "success"
-          );
-        });
-      });
-  }
-}
-```
-
-If you were to display the notification without reentering Angular's zone, the `addTemporaryNotification` would run outside of Angular's change detection zone, and the notification wouldn't disappear after the 5-second timeout.
-
-## When necessary to reenter the zone
-
-You need to reenter Angular's change detection zone when
-
-- you subscribe to events using the [`events$`](../services/ChatClientService.mdx/#notification) Observable of the `ChatClientService`
-- you subscribe to channel events
-
-For example the [`ChannelPreview`](../components/ChannelPreviewComponent.mdx) component needs to subscribe to the `message.read` channel events to know if the channel has unread messages and reenter Angular's zone when an event is received:
-
-```typescript
-this.channel.on("message.read", () =>
-  this.ngZone.run(() => {
-    this.isUnread = !!this.channel.countUnread() && this.canSendReadEvents;
-  })
-);
-```
-
-## When unnecessary to reenter the zone
-
-You **don't** need to reenter the zone when
-
-- you use the SDK's default components in your UI and don't watch for additional events
-- when you [override the default channel list behavior](../services/ChannelService.mdx/#channels)
-- when you subscribe to the [`connectionState$`](../services/ChatClientService.mdx/#connectionstate) Observable of the `ChatClientService`
-
-If you are unsure whether or not you are in Angular's zone, you can use the following function call to check:
-
-```typescript
-NgZone.isInAngularZone();
-```
diff --git a/docusaurus/docs/Angular/concepts/channel-list.mdx b/docusaurus/docs/Angular/concepts/channel-list.mdx
deleted file mode 100644
index f5d3828c..00000000
--- a/docusaurus/docs/Angular/concepts/channel-list.mdx
+++ /dev/null
@@ -1,331 +0,0 @@
----
-id: channel-list
-sidebar_position: 4
-title: Channel list state
----
-
-import ChannelList from "../assets/channel-list.png";
-import MultiChannelList from "../assets/multi-channel-list.png";
-
-This guide describes the behaviour of the channel list, and shows how you can customize it. The channel list is controlled by the [`ChannelService`](../../services/ChannelService/).
-
-<img src={ChannelList} />
-
-On the screenshot you can see the [built-in channel list component](../../components/ChannelListComponent) that integrates with the `ChannelService`.
-
-## Querying channels
-
-The `ChannelService` will initialize the channel list when you call either of the following methods:
-
-```ts
-channelService.init(/* see details below */);
-channelService.initWithCustomQuery(/* see details below */);
-```
-
-To load more pages:
-
-```ts
-channelService.loadMoreChannels();
-```
-
-To clear the list:
-
-```ts
-channelService.reset();
-```
-
-The current state of the channel list and the latest query can be accessed via theese variables:
-
-```ts
-// Reactive value of the current channel list, you'll be notified when it changes
-channelService.channels$.subscribe((channels) => console.log(channels));
-
-// The current value of the channel list
-console.log(channelService.channels);
-
-// Reactive value of the latest channel query request, it could be: 'in-progress' | 'success' | 'error'
-channelService.channelQueryState$.subscribe((state) => console.log(state));
-
-// Reactive value that tells if there are more pages to load
-channelService.hasMoreChannels$.subscribe((hasMoreChannels) =>
-  console.log(hasMoreChannels)
-);
-```
-
-### Built-in queries
-
-The easiest way to initialize the channel list is to use a built-in query, a typical configuration could look like this:
-
-```ts
-channelService.init({ type: "messaging", members: { $in: ["<user id>"] } });
-
-// If you want, you can add sort configuration and other options
-channelService.init(
-  { type: "messaging", members: { $in: ["<user id>"] } },
-  { name: 1 },
-  { limit: 20 }
-);
-```
-
-For the full list of capabilities please refer the [query channel API documentation](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript).
-
-### Custom queries
-
-If built-in quieries aren't enough for you use-case, you can provide a custom query function that has this signature: `(queryType: ChannelQueryType) => Promise<ChannelQueryResult>`. `ChannelQueryType` can be `'first-page' | 'next-page' | 'recover-state'`, the result is expected to be this format:
-
-```ts
-{
-  channels: Channel[]; // Ordered list of all channels that are displayed
-  hasMorePage: boolean; // Are there any more pages to load?
-};
-```
-
-Let's say you're using the [channel invites](../../code-examples/channel-invites/) to add members to a channel. In that case you might want to do a channel list where you display the channels the user is invited to, but not yet joined, at the top. And then all other chanenls, the user already joined. To do this you need to combine two query channel requests. Here is how you can do that:
-
-```ts
-notJoinedChannelsQuery = new ChannelQuery(
-  this.chatService,
-  this.channelService,
-  {
-    type: 'messaging',
-    members: { $in: ["<user id>"] },
-    joined: false,
-  }
-);
-joinedChannelsQuery = new ChannelQuery(
-  this.chatService,
-  this.channelService,
-  {
-    type: 'messaging',
-    members: { $in: ["<user id>"] },
-    joined: true,
-  }
-);
-areAllNotJoinedChannelsQueried = false;
-
-async myCustomChannelQuery(queryType: ChannelQueryType) {
-  if (queryType === 'first-page' || queryType === 'recover-state') {
-    this.areAllNotJoinedChannelsQueried = false;
-  }
-
-  if (!this.areAllNotJoinedChannelsQueried) {
-    const notJoinedQueryResult = await this.notJoinedChannelsQuery.query(
-      queryType
-    );
-    if (notJoinedQueryResult.hasMorePage) {
-      return {
-        channels: notJoinedQueryResult.channels,
-        hasMorePage: notJoinedQueryResult.hasMorePage,
-      };
-    } else {
-      this.areAllNotJoinedChannelsQueried = true;
-      const joinedQueryResult = await this.joinedChannelsQuery.query(
-        'first-page'
-      );
-      return {
-        channels: [
-          ...notJoinedQueryResult.channels,
-          ...joinedQueryResult.channels,
-        ],
-        hasMorePage: joinedQueryResult.hasMorePage,
-      };
-    }
-  } else {
-    return this.joinedChannelsQuery.query(queryType);
-  }
-}
-```
-
-And then provide your query to the `ChannelService`:
-
-```ts
-this.channelService.initWithCustomQuery((queryType) =>
-  this.myCustomChannelQuery(queryType)
-);
-```
-
-The above example used the `ChannelQuery` class that's exported by the SDK, but you can use any implementation you like, as long as your custom query follows this method signature: `(queryType: ChannelQueryType) => Promise<ChannelQueryResult>`. You can reference the [`ChannelQuery` implementation](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/channel-query.ts) for the details.
-
-### Pagination
-
-By default the SDK will use an offset based pagination, where the offset will start from 0, and will be incremented with the number of channels returned from each query request.
-
-However, it's possible to provide your own pagination logic. Let's see the below example which sorts the channels alphabetically by their names, and then paginates using the following filter: `{name: $gt: <last loaded channel>}`
-
-```ts
-this.channelService.customPaginator = (
-  channelQueryResult: Channel<DefaultStreamChatGenerics>[]
-) => {
-  const lastChannel = channelQueryResult[channelQueryResult.length - 1];
-  if (!lastChannel) {
-    return undefined;
-  } else {
-    return {
-      type: "filter",
-      paginationFilter: {
-        name: { $gt: lastChannel.data?.name || "" },
-      },
-    };
-  }
-};
-this.channelService.init(
-  {
-    type: "messaging",
-    members: { $in: ["<user id>"] },
-  },
-  { name: 1 }
-);
-```
-
-## Active channel
-
-The currently selected channel is called the active channel.
-
-```ts
-// Reactive value of the current active channel, you'll be notified when it changes
-channelService.activeChannel$.subscribe((channel) => console.log(channel));
-
-// The current value of the active channel
-console.log(channelService.activeChannel);
-```
-
-Here is how you can select/deselect the active channel:
-
-```ts
-channelService.setAsActiveChannel(<channel to select>);
-channelService.deselectActiveChannel();
-```
-
-Selecting a channel as active will immediately mark the channel as read.
-
-By default the SDK will set the first channel as active when initializing the channel list. If you wish to turn off that behvior, set the `shouldSetActiveChannel` flag to `false`:
-
-```ts
-channelService.init(<filter>, <sort>, <options>, false);
-channelService.initWithCustomQuery(<custom query>, {shouldSetActiveChannel: false});
-```
-
-## WebSocket events
-
-Apart from channel queries, the channel list is also updated on the following WebSocket events:
-
-| Event type                          | Default behavior                                                   | Custom handler to override                    |
-| ----------------------------------- | ------------------------------------------------------------------ | --------------------------------------------- |
-| `channel.deleted`                   | Remove channel from the list                                       | `customChannelDeletedHandler`                 |
-| `channel.hidden`                    | Remove channel from the list                                       | `customChannelHiddenHandler`                  |
-| `channel.truncated`                 | Updates the channel                                                | `customChannelTruncatedHandler`               |
-| `channel.updated`                   | Updates the channel                                                | `customChannelUpdatedHandler`                 |
-| `channel.visible`                   | Adds the channel to the list                                       | `customChannelVisibleHandler`                 |
-| `message.new`                       | Moves the channel to top of the list                               | `customNewMessageHandler`                     |
-| `notification.added_to_channel`     | Adds the new channel to the top of the list and starts watching it | `customAddedToChannelNotificationHandler`     |
-| `notification.message_new`          | Adds the new channel to the top of the list and starts watching it | `customNewMessageNotificationHandler`         |
-| `notification.removed_from_channel` | Removes the channel from the list                                  | `customRemovedFromChannelNotificationHandler` |
-
-Our platform documentation covers the topic of [channel events](https://getstream.io/chat/docs/javascript/event_object/?language=javascript#events) in depth.
-
-It's important to note that filters don't apply to updates to the list from events. So if you initialize the channel list with this filter:
-
-```ts
-{
-  type: 'messaging',
-  members: { $in: ['<user id>'] },
-}
-```
-
-And the user receives a message from a `team` channel, that channel will be added to the channel list by the default `notification.message_new` handler. If you don't want that behavior, you will need to provide your custom event handler to all relevant events. Here is an example event handler:
-
-```ts
-customNewMessageNotificationHandler = async (
-  clientEvent: ClientEvent,
-  channelListSetter: (channels: Channel<DefaultStreamChatGenerics>[]) => void
-) => {
-  const channelResponse = clientEvent!.event!.channel!;
-  if (channelResponse.type !== "messaging") {
-    return;
-  }
-  const newChanel = this.chatService.chatClient.channel(
-    channelResponse.type,
-    channelResponse.id
-  );
-  try {
-    // We can only add watched channels to the channel list, so make sure to call `watch`
-    await newChanel.watch();
-    const existingChannels = this.channelService.channels;
-    channelListSetter([newChanel, ...existingChannels]);
-  } catch (error) {
-    console.error("Failed to watch channel", error);
-  }
-};
-
-this.channelService.customNewMessageNotificationHandler =
-  this.customNewMessageNotificationHandler;
-this.channelService.init(/* ... */);
-```
-
-## Adding and removing channels
-
-While the SDK doesn't come with built-in components to [create](https://getstream.io/chat/docs/javascript/creating_channels/?language=javascript) or [delete](https://getstream.io/chat/docs/javascript/channel_delete/?language=javascript) channels it's easy to create these components should you need them. The SDK even provides a few component hooks to inject you custom UI ([channel list](../../components/ChannelListComponent/#ui-customization), [channel preview](../../components/ChannelPreviewComponent/#customization), [channel header](../../components/ChannelHeaderComponent/#channel-actions)). But of course you can also create a completely custom UI.
-
-The channel list will be automatically updated on the `notification.added_to_channel` and `channel.deleted` events, however it's also possible to add and remove channels manually from the list:
-
-```ts
-// Make sure to watch the channel before adding it
-channelService.addChannel(<watched channel>);
-
-channelService.removeChannel('<cid>');
-// This will automatically unwatch the chennel, unless you provide the following flag:
-channelService.removeChannel('<cid>', false);
-```
-
-It's important to note that you should make sure that the channel you add is watched, more information about [watching channels](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) can be found in our API documentation.
-
-## Multiple channel lists
-
-Sometimes we need to show multiple separate channel lists. For example: we want to show 1:1 conversations and team chats in two separate tabs.
-
-<img src={MultiChannelList} />
-
-Here are the necessary steps to achieve this:
-
-1. Create your own channel list component, and provide a separate `ChannelService` instance to them using Angular's dependency injection system:
-
-```ts
-@Component({
-  selector: 'app-custom-channel-list',
-  templateUrl: './custom-channel-list.component.html',
-  styleUrls: ['./custom-channel-list.component.css'],
-  // Each channel list has it's own ChannelService instance
-  providers: [ChannelService],
-})
-```
-
-2. Each channel list component will initialize it's `ChannelService` instance with the given filter:
-
-```ts
-this.channelService.init({
-  type: "messaging",
-  members: { $in: [this.userId] },
-  member_count:
-    this.channelListType === "1:1 conversations" ? { $lte: 2 } : { $gt: 2 },
-});
-```
-
-3. Each channel list component will have to define custom WebSocket event handlers, where it filters which channel can be added to the list
-
-```ts
-this.channelService.customAddedToChannelNotificationHandler = (
-  clientEvent,
-  channelListSetter
-) => filter(clientEvent.event.channel, channelListSetter);
-this.channelService.customNewMessageNotificationHandler = (
-  clientEvent,
-  channelListSetter
-) => filter(clientEvent.event.channel, channelListSetter);
-this.channelService.customChannelVisibleHandler = (
-  _,
-  channel,
-  channelListSetter
-) => filter(channel, channelListSetter);
-```
-
-You can checkout the full example on [Codesandbox](https://codesandbox.io/p/devbox/stream-chat-angular-multiple-channel-list-zptmyv?embed=1&file=%2Fsrc%2Fapp%2Fcustom-channel-list%2Fcustom-channel-list.component.ts)
diff --git a/docusaurus/docs/Angular/concepts/client-state.mdx b/docusaurus/docs/Angular/concepts/client-state.mdx
deleted file mode 100644
index 0785fa82..00000000
--- a/docusaurus/docs/Angular/concepts/client-state.mdx
+++ /dev/null
@@ -1,59 +0,0 @@
----
-id: client-state
-title: Client state
-sidebar_position: 1
----
-
-## Creating a client
-
-To connect a user, you need to have a client. This is how you can create one:
-
-```ts
-import { ChatClientService } from "stream-chat-angular";
-
-export class AppComponent {
-  constructor(private chatService: ChatClientService) {
-    this.chatService.init(
-      "<API key>",
-      "<user or id>",
-      "<token or provider>",
-      "<client options>"
-    );
-  }
-}
-```
-
-The Angular SDK uses the [stream-chat-js client](https://github.com/GetStream/stream-chat-js) under the hood, but most of the time you don't need to interact with the client directly, instead, you'll use the [`ChatClientService`](../../services/ChatClientService) or [`ChannelService`](../../services/ChannelService). However, it's still possible to access the client directly:
-
-```ts
-import { StreamChat } from "stream-chat";
-
-// only possible to do after chatService.init was called
-const client: StreamChat = this.chatService.chatClient;
-
-// independently from chatService
-const client: StreamChat = StreamChat.getInstance("<API key>");
-```
-
-The `StreamChat` client uses singleton pattern to ensure only one instance is created, so you'll get the same instance with both methods
-
-You can refer the [stream-chat-js client documentation](https://getstream.io/chat/docs/javascript/?language=javascript) to understand the most important concepts of the Stream API.
-
-## Client options
-
-Optionally you can provide configuration options to the client using the `init` method. Here is a simple example that sets the timeout for HTTP requests, and provide `console.log` for logging.
-
-```ts
-this.chatService.init("<API key>", "<user or id>", "<token or provider>", {
-  timeout: 10000,
-  logger: console.log,
-});
-```
-
-## Connecting and disconnecting users
-
-Please refer to the [Users and tokens guide](../../concepts/users-and-tokens/).
-
-## Reference
-
-For more information, please refer to the [`ChatClientService` reference documentation](../../services/ChatClientService).
diff --git a/docusaurus/docs/Angular/concepts/customization.mdx b/docusaurus/docs/Angular/concepts/customization.mdx
deleted file mode 100644
index fff38739..00000000
--- a/docusaurus/docs/Angular/concepts/customization.mdx
+++ /dev/null
@@ -1,36 +0,0 @@
----
-id: customization
-title: Customization
----
-
-Apart from customizing the [theming and CSS](../theming/introduction.mdx) of UI components it's also possible to provide your own template to completely override parts of the UI to further improve the flexibility of our SDK. This guide shows you the different custom templates you can provide.
-
-For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
-
-## Initial chat UI
-
-This is how our initial chat UI looks like:
-
-```html
-<stream-channel-list></stream-channel-list>
-<stream-channel>
-  <!-- Main messages in the channel -->
-  <stream-channel-header></stream-channel-header>
-  <stream-message-list></stream-message-list>
-  <stream-message-input></stream-message-input>
-  <!-- Main messages in the channel -->
-  <!-- Thread messages in the channel -->
-  <stream-thread name="thread">
-    <stream-message-list mode="thread"></stream-message-list>
-    <stream-message-input mode="thread"></stream-message-input>
-  </stream-thread>
-  <!-- Thread messages in the channel -->
-</stream-channel>
-<stream-notification-list></stream-notification-list>
-```
-
-This template lives in your application so you can freely replace any component with your own custom component, for example if you want to use your own channel header you can just replace `stream-channel-header` with your own component.
-
-## `CustomTemplatesService`
-
-However you might just want to override parts of these components, for example you want to use your own custom message component, but don't want to override the whole message list. In these instances you can use the `CustomTemplatesService`, the [full list of override-able parts](../services/CustomTemplatesService.mdx) can be found in the documentation page of the `CustomTemplatesService`.
diff --git a/docusaurus/docs/Angular/concepts/generics.mdx b/docusaurus/docs/Angular/concepts/generics.mdx
deleted file mode 100644
index 4d9c1e08..00000000
--- a/docusaurus/docs/Angular/concepts/generics.mdx
+++ /dev/null
@@ -1,96 +0,0 @@
----
-id: generics
-title: Generics
----
-
-The [`stream-chat-js`](https://github.com/GetStream/stream-chat-js) library takes advantage of [TypeScript generics](https://www.typescriptlang.org/docs/handbook/2/generics.html) to make it possible to define custom file ids on the following entities:
-
-1. [`Attachment`](https://github.com/GetStream/stream-chat-js/blob/master/src/types.ts)
-2. [`ChannelResponse`](https://github.com/GetStream/stream-chat-js/blob/master/src/types.ts)
-3. [`CommandVariants`](https://github.com/GetStream/stream-chat-js/blob/master/src/types.ts)
-4. [`Event`](https://github.com/GetStream/stream-chat-js/blob/master/src/types.ts)
-5. [`MessageBase`](https://github.com/GetStream/stream-chat-js/blob/master/src/types.ts)
-6. [`Reaction`](https://github.com/GetStream/stream-chat-js/blob/master/src/types.ts)
-7. [`User`](https://github.com/GetStream/stream-chat-js/blob/master/src/types.ts)
-
-Those 7 overrides are combined to a single generic parameter called [`DefaultGenerics`](https://github.com/GetStream/stream-chat-js/blob/master/src/types.ts).
-
-The Angular SDK extends the `DefaultGenerics` with custom fields creating the [`DefaultStreamChatGenerics`](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/types.ts) type.
-
-You can further extend the `DefaultStreamChatGenerics` type with your own custom fields, both the [`ChatClientService`](../services/ChatClientService.mdx) and [`ChannelService`](../services/ChannelService.mdx) accepts a generic parameter.
-
-Here is an example about custom fields with generics:
-
-```typescript
-import { Component, OnInit } from "@angular/core";
-import {
-  ChatClientService,
-  ChannelService,
-  StreamI18nService,
-  DefaultStreamChatGenerics,
-} from "stream-chat-angular";
-import { environment } from "../environments/environment";
-
-type MyStreamGenerics = DefaultStreamChatGenerics & {
-  attachmentType: { lat?: string; lon?: string };
-  channelType: {
-    color: string;
-    topic: "gardening" | "cats" | "f1";
-  };
-  userType: {
-    nickname: string;
-  };
-  messageType: {
-    isSecret: boolean;
-  };
-  reactionType: {
-    onlyVisibleToSender: boolean;
-  };
-};
-
-@Component({
-  selector: "app-root",
-  templateUrl: "./app.component.html",
-  styleUrls: ["./app.component.scss"],
-})
-export class AppComponent implements OnInit {
-  constructor(
-    private chatService: ChatClientService<MyStreamGenerics>,
-    private channelService: ChannelService<MyStreamGenerics>,
-    private streamI18nService: StreamI18nService
-  ) {
-    void this.chatService.init(
-      environment.apiKey,
-      { id: environment.userId, nickname: "Zizi" },
-      environment.userToken
-    );
-    this.streamI18nService.setTranslation();
-  }
-
-  async ngOnInit() {
-    await this.channelService.init({
-      type: "messaging",
-      topic: "cats",
-    });
-    const channel = this.chatService.chatClient.channel(
-      "messaging",
-      "cat-photos",
-      { color: "blue", topic: "cats", name: "The bes cat photos" }
-    );
-
-    await channel.create();
-    await this.channelService.sendMessage(
-      "This is a secret message",
-      [{ type: "geolocation", lat: "40.7128", lon: "74.0060" }],
-      [],
-      undefined,
-      undefined,
-      { isSecret: true }
-    );
-    const message = channel.state.messages[0];
-    this.channelService.addReaction(message.id, "like", {
-      onlyVisibleToSender: true,
-    });
-  }
-}
-```
diff --git a/docusaurus/docs/Angular/concepts/message-interactions.mdx b/docusaurus/docs/Angular/concepts/message-interactions.mdx
deleted file mode 100644
index 812c9aac..00000000
--- a/docusaurus/docs/Angular/concepts/message-interactions.mdx
+++ /dev/null
@@ -1,20 +0,0 @@
----
-id: message-interactions
-sidebar_position: 5
-title: Message interactions
----
-
-Users can interact with the messages in the message list. The following table provides a list of possible interactions together with the [necessary capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript) and the corresponding components:
-
-| Description                                                                                          | Necessary channel capability             | Component                                                                         |
-| ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------------------------------------------------- |
-| [Flags](https://getstream.io/chat/docs/javascript/moderation/?language=javascript) the given message | flag-message                             | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx)               |
-| Edits a message that belongs to the user                                                             | update-own-message or update-any-message | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx)               |
-| Edits any message                                                                                    | update-any-message                       | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx)               |
-| Deletes a message that belongs to the user                                                           | delete-own-message or delete-any-message | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx)               |
-| Deletes any message                                                                                  | delete-any-message                       | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx)               |
-| Send reaction to a message                                                                           | send-reaction                            | [`MessageReactionsSelector`](../components/MessageReactionsSelectorComponent.mdx) |
-| Receive read events                                                                                  | read-events                              | [`Message`](../components/MessageComponent.mdx)                                   |
-| Reply to a message in a thread                                                                       | send-reply                               | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx)               |
-| Quote reply to a message                                                                             | quote-message                            | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx)               |
-| Mark a message as unread                                                                             | read-events                              | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx)               |
diff --git a/docusaurus/docs/Angular/concepts/opt-in-architecture.mdx b/docusaurus/docs/Angular/concepts/opt-in-architecture.mdx
deleted file mode 100644
index 1c556b9c..00000000
--- a/docusaurus/docs/Angular/concepts/opt-in-architecture.mdx
+++ /dev/null
@@ -1,74 +0,0 @@
----
-id: opt-in-architecture
-sidebar_position: 3
-title: Opt-in architecture
----
-
-In an effort to keep our bundle size small in the long run our SDK uses an architecture where integrators can decide to opt-out of certain costly (in terms of bundle size) features.
-
-The decision to opt-in or opt-out happens at module import, you can choose between the `StreamAutocompleteTextareaModule` and the `StreamTextareaModule`:
-
-```typescript
-import { NgModule } from "@angular/core";
-import { BrowserModule } from "@angular/platform-browser";
-import { TranslateModule } from "@ngx-translate/core";
-
-import { AppComponent } from "./app.component";
-import { CustomMessageComponent } from "./custom-message/custom-message.component";
-import {
-  StreamChatModule,
-  StreamAutocompleteTextareaModule,
-} from "stream-chat-angular";
-
-@NgModule({
-  declarations: [AppComponent, CustomMessageComponent],
-  imports: [
-    BrowserModule,
-    TranslateModule.forRoot(),
-    StreamAutocompleteTextareaModule,
-    StreamChatModule,
-  ],
-  providers: [],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
-```
-
-Or if you're using standalone components:
-
-```typescript showLineNumbers={true} highlightedLines=8
-import { Component } from "@angular/core";
-import { TranslateModule } from "@ngx-translate/core";
-import {
-  StreamAutocompleteTextareaModule,
-  StreamChatModule,
-} from "stream-chat-angular";
-
-@Component({
-  selector: "app-root",
-  standalone: true,
-  imports: [
-    TranslateModule,
-    StreamAutocompleteTextareaModule,
-    StreamChatModule,
-  ],
-  templateUrl: "./app.component.html",
-  styleUrls: ["./app.component.scss"],
-})
-export class AppComponent {}
-```
-
-The chosen module decides what kind of `textarea` should be used in the message composer, you can choose between the [`AutocompleteTextareaComponent`](../components/AutocompleteTextareaComponent.mdx) with mentions or the [`TextareaComponent`](../components/TextareaComponent.mdx) that doesn't support mentions, but has a smaller bundle size. Your final application bundle will only include either the `TextareaComponent` or the `AutocompleteTextareaComponent`.
-
-## Opt-in features
-
-The list of opt-in features can be found below:
-
-### `Textarea`
-
-For the `textarea` inside the [`MessageInputComponent`](../components/MessageInputComponent.mdx) you can choose between the [`TextareaComponent`](../components/TextareaComponent.mdx) or the [`AutocompleteTextareaComponent`](../components/AutocompleteTextareaComponent.mdx) component. The table below provides a comparison between the two components:
-
-| Feature       | `TextareaComponent` | `AutocompleteTextareaComponent` |
-| ------------- | ------------------- | ------------------------------- |
-| User mentions | No                  | Yes                             |
-| Commands      | No                  | Yes                             |
diff --git a/docusaurus/docs/Angular/concepts/translation.mdx b/docusaurus/docs/Angular/concepts/translation.mdx
deleted file mode 100644
index fbb2ba48..00000000
--- a/docusaurus/docs/Angular/concepts/translation.mdx
+++ /dev/null
@@ -1,169 +0,0 @@
----
-id: translation
-sidebar_position: 2
-title: Translation
----
-
-The library uses [ngx-translate](https://github.com/ngx-translate/core) for internalization of the labels of the user interface. Currently, the library only supports English, but you can provide your own translations if you want to. If you use ngx-translate in your own project, you can still use our library's translations; for more information, see the [setup guide](./translation.mdx/#set-up-the-translations) below.
-
-## Setup
-
-You will always have to set up translations, even if you don't want to override the default translations.
-
-### Install ngx-translate
-
-`npm install @ngx-translate/core --save`
-
-### Import the `TranslateModule`
-
-```typescript
-import { TranslateModule } from "@ngx-translate/core";
-import { StreamChatModule } from "stream-chat-angular";
-
-imports: [TranslateModule.forRoot(), StreamChatModule];
-export class AppModule {}
-```
-
-Or if you're using standalone components:
-
-```typescript
-import { ApplicationConfig, importProvidersFrom } from "@angular/core";
-import { TranslateModule } from "@ngx-translate/core";
-
-export const appConfig: ApplicationConfig = {
-  providers: [importProvidersFrom(TranslateModule.forRoot())],
-};
-```
-
-:::important
-You should import the `TranslateModule.forRoot()` in a non-lazy loaded module (for example `AppModule`) even if the chat application is displayed from a lazy loaded module. If the translation isn't initialized properly the UI labels will be displayed as `"streamChat..."`.
-:::
-
-If you're using standalone components, make sure to also import the `TranslateModule` to the component that displays the chat UI:
-
-```typescript
-import { Component } from "@angular/core";
-import { TranslateModule } from "@ngx-translate/core";
-import {
-  StreamAutocompleteTextareaModule,
-  StreamChatModule,
-} from "stream-chat-angular";
-
-@Component({
-  selector: "app-root",
-  standalone: true,
-  imports: [
-    TranslateModule,
-    StreamAutocompleteTextareaModule,
-    StreamChatModule,
-  ],
-  templateUrl: "./app.component.html",
-  styleUrls: ["./app.component.scss"],
-})
-export class AppComponent {}
-```
-
-### Set up the translations
-
-Initialize the translation in the **constructor** of the component which displays the chat UI (for example `AppComponent`)
-
-```typescript
-import { StreamI18nService } from 'stream-chat-angular';
-
-constructor(private streamI18nService: StreamI18nService) {
-  this.streamI18nService.setTranslation();
-}
-```
-
-:::important
-It's important to call the `setTranslation` in the constructor of the component that displays the chat UI. If the translation isn't initialized properly the UI labels will be displayed as `"streamChat..."`.
-:::
-
-## Setup, if you're using ngx-translate in your project
-
-### Module import
-
-If you are already using ngx-translate in your project, you already have the `TranslateModule` imported and configured in your project, so you **don't** need to import `TranslateModule.forRoot()`. However you still need to import `TranslateModule` (**without** the `forRoot`) to the module/standalone component that displays the chat UI to access the `translate` pipe.
-
-### Register the translations
-
-Our library will use the same `TranslateService` as your project, and the library will register the translations through the `StreamI18nService`. Here is how to do it (typically, you will be doing it in your `AppComponent`
-):
-
-```typescript
-import { StreamI18nService } from 'stream-chat-angular';
-import { TranslateService } from '@ngx-translate/core';
-
-constructor(
-  private streamI18nService: StreamI18nService,
-  private translateService: TranslateService
-) {
-  this.translateService.getTranslation('en').subscribe(() => {
-    this.streamI18nService.setTranslation('en');
-  });
-}
-```
-
-:::important
-The HTTP loader will override all registered translations. If you use that, it is necessary to wait for the HTTP loader to finish and only register the library's translations afterward (the code snippet above shows that scenario). Ngx-translate already has a [GitHub issue](https://github.com/ngx-translate/http-loader/issues/6#issuecomment-372118792) open to solve that problem.
-:::
-
-:::important
-Our library uses the `streamChat` prefix for the translation keys, so you don't need to worry about translation keys clashing.
-:::
-
-### Provide a custom language key
-
-You can provide the language key for the translation registration:
-
-```typescript
-import { StreamI18nService } from 'stream-chat-angular';
-import { TranslateService } from '@ngx-translate/core';
-
-constructor(
-  private streamI18nService: StreamI18nService,
-  private translateService: TranslateService
-) {
-  this.translateService.getTranslation('de').subscribe(() => {
-    this.streamI18nService.setTranslation('de');
-  });
-}
-```
-
-However, it is important to note that since our library currently only supports English, the translations will always be the same. You can also provide [custom translations](./translation.mdx/#custom-translation) for each language key, if you want to.
-
-### Set the default language
-
-For the translations to work, it is necessary to set the default language. Here are two different ways to do that:
-
-```typescript
-TranslateModule.forRoot({
-  defaultLanguage: "en",
-});
-```
-
-or
-
-```typescript
-this.translateService.use("en");
-```
-
-## Custom translation
-
-You can entirely or partially override the library's [default translations](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/assets/i18n/en.ts).
-
-The `setTranslation` method of the `StreamI18nService` lets you to pass your own translations:
-
-```typescript
-import { StreamI18nService } from 'stream-chat-angular';
-
-const customTranslations = {'Nothing yet...': 'This channel is empty'};
-
-constructor(private streamI18nService: StreamI18nService) {
-  this.streamI18nService.setTranslation('en', customTranslations);
-}
-```
-
-You can see the list of translation keys [here](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/assets/i18n/en.ts).
-
-You can override the entire translation or just some keys.
diff --git a/docusaurus/docs/Angular/concepts/users-and-tokens.mdx b/docusaurus/docs/Angular/concepts/users-and-tokens.mdx
deleted file mode 100644
index 0cd51fee..00000000
--- a/docusaurus/docs/Angular/concepts/users-and-tokens.mdx
+++ /dev/null
@@ -1,103 +0,0 @@
----
-id: users-and-tokens
-title: Users and tokens
-sidebar_position: 1
----
-
-## Connecting users
-
-The client documentation details all important information about [regular](https://getstream.io/chat/docs/javascript/init_and_users/?language=javascript) and [authless users](https://getstream.io/chat/docs/javascript/authless_users/?language=javascript). Here is how you can connect these users in the Angular SDK:
-
-```ts
-// Connect by providing user id only
-this.chatService.init("<API key>", "<user id>", "<token or provider>");
-
-// Or connect by providing user settings such as name, image, etc.
-this.chatService.init(
-  "<API key>",
-  {
-    id: "<user id>",
-    name: "Sara",
-    image: "url/to/image",
-  },
-  "<token or provider>"
-);
-
-// Guest users
-this.chatService.init(environment.apiKey, "john", "guest");
-
-// Anonymous users
-this.chatService.init(environment.apiKey, undefined, "anonymous");
-```
-
-## Generating tokens
-
-Regular users (all users except guests and anonymous users) require a valid JWT token to access the Stream API. Tokens can't be created securely on the client-side, so you should generate tokens on your server-side. All important information about [tokens can be found in the client documentation](https://getstream.io/chat/docs/javascript/tokens_and_authentication/?language=javascript).
-
-Here is how you can provide the generated token to the Angular SDK:
-
-```ts
-// Option 1: using a static token
-this.chatService.init(
-  "<API key>",
-  "<user or id>",
-  // Example static token
-  "eyJhbGcIOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
-);
-
-// Option 2. using a token provider
-this.chatService.init(
-  "<API key>",
-  "<user or id>",
-  // Example token provider
-  // The SDK will call your token provider when you connect, or when the token is expired and it needs a new one
-  // With token providers you can use short-living tokens, so we advise using this method in your production applications
-  () => async {
-    const token = await (<HTTP call to your own backend to obtain a new token>).token;
-
-    return token;
-  }
-);
-```
-
-This is how you can use [developer tokens](https://getstream.io/chat/docs/javascript/tokens_and_authentication/?language=javascript#developer-tokens) with the Angular SDK:
-
-```ts
-import { StreamChat } from "stream-chat";
-
-const apiKey = "<API key>";
-const userId = "<user id>";
-const devToken = StreamChat.getInstance(apiKey).devToken(userId);
-this.chatService.init(apiKey, userId, devToken);
-```
-
-## Disconnecting users
-
-If your application allows connecting with different users, you should make sure to properly disconnect the previous user before connecting a new one:
-
-```ts
-private async connectUser(userId: string) {
-    // Make sure to wait for disconnect before connecting a new user
-    await this.disconnectUser();
-    await this.chatService.init('<API key>', userId, '<token provider>');
-    this.channelService.init('<channel filters>');
-}
-
-private async disconnectUser() {
-    if (!this.chatService.chatClient?.user) {
-        return;
-    }
-    this.channelService.reset();
-    await this.chatService.disconnectUser();
-}
-```
-
-## User object
-
-You can subscribe to the `user$` Observable to get all important information (such us online state, unread count, etc) about the current user:
-
-```ts
-this.chatService.user$.subscribe((u) => console.log(u));
-```
-
-If there is no connected user, it will emit `undefined`.
diff --git a/docusaurus/docs/Angular/services/AmplitudeRecorderService.mdx b/docusaurus/docs/Angular/services/AmplitudeRecorderService.mdx
deleted file mode 100644
index b703e836..00000000
--- a/docusaurus/docs/Angular/services/AmplitudeRecorderService.mdx
+++ /dev/null
@@ -1,89 +0,0 @@
-# AmplitudeRecorderService
-
-The `AmplitudeRecorderService` is a utility service used to create amplitude values for voice recordings, making it possible to display a wave bar
-
-## Accessors
-
-### amplitudes
-
-• `get` **amplitudes**(): `number`[]
-
-The recorded amplitudes
-
-#### Returns
-
-`number`[]
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/voice-recorder/amplitude-recorder.service.ts:76](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/voice-recorder/amplitude-recorder.service.ts#L76)
-
-## Methods
-
-### pause
-
-▸ **pause**(): `void`
-
-Temporarily pause amplitude recording, recording can be resumed with `resume`
-
-#### Returns
-
-`void`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/voice-recorder/amplitude-recorder.service.ts:96](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/voice-recorder/amplitude-recorder.service.ts#L96)
-
----
-
-### resume
-
-▸ **resume**(): `void`
-
-Resume amplited recording after it was pasued
-
-#### Returns
-
-`void`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/voice-recorder/amplitude-recorder.service.ts:104](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/voice-recorder/amplitude-recorder.service.ts#L104)
-
----
-
-### start
-
-▸ **start**(`stream`): `void`
-
-Start amplitude recording for the given media stream
-
-#### Parameters
-
-| Name     | Type          |
-| :------- | :------------ |
-| `stream` | `MediaStream` |
-
-#### Returns
-
-`void`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/voice-recorder/amplitude-recorder.service.ts:84](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/voice-recorder/amplitude-recorder.service.ts#L84)
-
----
-
-### stop
-
-▸ **stop**(): `void`
-
-Stop the amplitude recording and frees up used resources
-
-#### Returns
-
-`void`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/voice-recorder/amplitude-recorder.service.ts:129](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/voice-recorder/amplitude-recorder.service.ts#L129)
diff --git a/docusaurus/docs/Angular/services/AttachmentConfigurationService.mdx b/docusaurus/docs/Angular/services/AttachmentConfigurationService.mdx
deleted file mode 100644
index c8e3e481..00000000
--- a/docusaurus/docs/Angular/services/AttachmentConfigurationService.mdx
+++ /dev/null
@@ -1,219 +0,0 @@
-# AttachmentConfigurationService
-
-The `AttachmentConfigurationService` provides customization for certain attributes of attachments displayed inside the message component. If you're using your own CDN, you can integrate resizing features of it by providing your own handlers.
-
-## Type parameters
-
-| Name | Type                                                              |
-| :--- | :---------------------------------------------------------------- |
-| `T`  | extends `DefaultStreamChatGenerics` = `DefaultStreamChatGenerics` |
-
-## Properties
-
-### customGiphyAttachmentConfigurationHandler
-
-• `Optional` **customGiphyAttachmentConfigurationHandler**: (`a`: `Attachment`\<`T`\>) => `AttachmentConfigration`
-
-A custom handler can be provided to override the default giphy attachment (GIFs sent with the /giphy command) configuration. By default the SDK uses fixed height (a size that's known before the GIF is loaded), if you override that with dynamic height (for example: height: 100%) the scrolling logic inside the message list can break.
-
-#### Type declaration
-
-▸ (`a`): `AttachmentConfigration`
-
-##### Parameters
-
-| Name | Type                |
-| :--- | :------------------ |
-| `a`  | `Attachment`\<`T`\> |
-
-##### Returns
-
-`AttachmentConfigration`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/attachment-configuration.service.ts:37](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L37)
-
----
-
-### customImageAttachmentConfigurationHandler
-
-• `Optional` **customImageAttachmentConfigurationHandler**: (`a`: `Attachment`\<`T`\>, `type`: `"gallery"` \| `"single"` \| `"carousel"`, `containerElement`: `HTMLElement`) => `ImageAttachmentConfiguration`
-
-A custom handler can be provided to override the default image attachment (images uploaded from files) configuration. By default the SDK uses fixed image height (a size that's known before image is loaded), if you override that with dynamic image height (for example: height: 100%) the scrolling logic inside the message list can break.
-
-#### Type declaration
-
-▸ (`a`, `type`, `containerElement`): `ImageAttachmentConfiguration`
-
-##### Parameters
-
-| Name               | Type                                      |
-| :----------------- | :---------------------------------------- |
-| `a`                | `Attachment`\<`T`\>                       |
-| `type`             | `"gallery"` \| `"single"` \| `"carousel"` |
-| `containerElement` | `HTMLElement`                             |
-
-##### Returns
-
-`ImageAttachmentConfiguration`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/attachment-configuration.service.ts:22](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L22)
-
----
-
-### customScrapedImageAttachmentConfigurationHandler
-
-• `Optional` **customScrapedImageAttachmentConfigurationHandler**: (`a`: `Attachment`\<`T`\>) => `AttachmentConfigration`
-
-A custom handler can be provided to override the default scraped image attachment (images found in links inside messages) configuration. By default the SDK uses fixed height (a size that's known before image is loaded), if you override that with dynamic height (for example: height: 100%) the scrolling logic inside the message list can break.
-
-#### Type declaration
-
-▸ (`a`): `AttachmentConfigration`
-
-##### Parameters
-
-| Name | Type                |
-| :--- | :------------------ |
-| `a`  | `Attachment`\<`T`\> |
-
-##### Returns
-
-`AttachmentConfigration`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/attachment-configuration.service.ts:43](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L43)
-
----
-
-### customVideoAttachmentConfigurationHandler
-
-• `Optional` **customVideoAttachmentConfigurationHandler**: (`a`: `Attachment`\<`T`\>, `containerElement`: `HTMLElement`) => `VideoAttachmentConfiguration`
-
-A custom handler can be provided to override the default video attachment (videos uploaded from files) configuration. By default the SDK uses fixed height (a size that's known before video is loaded), if you override that with dynamic height (for example: height: 100%) the scrolling logic inside the message list can break.
-
-#### Type declaration
-
-▸ (`a`, `containerElement`): `VideoAttachmentConfiguration`
-
-##### Parameters
-
-| Name               | Type                |
-| :----------------- | :------------------ |
-| `a`                | `Attachment`\<`T`\> |
-| `containerElement` | `HTMLElement`       |
-
-##### Returns
-
-`VideoAttachmentConfiguration`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/attachment-configuration.service.ts:30](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L30)
-
----
-
-### shouldGenerateVideoThumbnail
-
-• **shouldGenerateVideoThumbnail**: `boolean` = `true`
-
-You can turn on/off thumbnail generation for video attachments
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/attachment-configuration.service.ts:49](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L49)
-
-## Methods
-
-### getGiphyAttachmentConfiguration
-
-▸ **getGiphyAttachmentConfiguration**(`attachment`): `AttachmentConfigration`
-
-Handles the configuration for giphy attachments, it's possible to provide your own function to override the default logic
-
-#### Parameters
-
-| Name         | Type                | Description                 |
-| :----------- | :------------------ | :-------------------------- |
-| `attachment` | `Attachment`\<`T`\> | The attachment to configure |
-
-#### Returns
-
-`AttachmentConfigration`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/attachment-configuration.service.ts:180](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L180)
-
----
-
-### getImageAttachmentConfiguration
-
-▸ **getImageAttachmentConfiguration**(`attachment`, `location`, `element`): `ImageAttachmentConfiguration`
-
-Handles the configuration for image attachments, it's possible to provide your own function to override the default logic
-
-#### Parameters
-
-| Name         | Type                                      | Description                                                                                                                                                                                     |
-| :----------- | :---------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `attachment` | `Attachment`\<`T`\>                       | The attachment to configure                                                                                                                                                                     |
-| `location`   | `"gallery"` \| `"single"` \| `"carousel"` | Specifies where the image is being displayed                                                                                                                                                    |
-| `element`    | `HTMLElement`                             | The default resizing logics reads the height/max-height and max-width propperties of this element and reduces file size based on the given values. File size reduction is done by Stream's CDN. |
-
-#### Returns
-
-`ImageAttachmentConfiguration`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/attachment-configuration.service.ts:57](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L57)
-
----
-
-### getScrapedImageAttachmentConfiguration
-
-▸ **getScrapedImageAttachmentConfiguration**(`attachment`): `AttachmentConfigration`
-
-Handles the configuration for scraped image attachments, it's possible to provide your own function to override the default logic
-
-#### Parameters
-
-| Name         | Type                | Description                 |
-| :----------- | :------------------ | :-------------------------- |
-| `attachment` | `Attachment`\<`T`\> | The attachment to configure |
-
-#### Returns
-
-`AttachmentConfigration`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/attachment-configuration.service.ts:200](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L200)
-
----
-
-### getVideoAttachmentConfiguration
-
-▸ **getVideoAttachmentConfiguration**(`attachment`, `element`): `VideoAttachmentConfiguration`
-
-Handles the configuration for video attachments, it's possible to provide your own function to override the default logic
-
-#### Parameters
-
-| Name         | Type                | Description                                                                                                                                                                                     |
-| :----------- | :------------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `attachment` | `Attachment`\<`T`\> | The attachment to configure                                                                                                                                                                     |
-| `element`    | `HTMLElement`       | The default resizing logics reads the height/max-height and max-width propperties of this element and reduces file size based on the given values. File size reduction is done by Stream's CDN. |
-
-#### Returns
-
-`VideoAttachmentConfiguration`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/attachment-configuration.service.ts:123](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/attachment-configuration.service.ts#L123)
diff --git a/docusaurus/docs/Angular/services/AttachmentService.mdx b/docusaurus/docs/Angular/services/AttachmentService.mdx
deleted file mode 100644
index 98089e86..00000000
--- a/docusaurus/docs/Angular/services/AttachmentService.mdx
+++ /dev/null
@@ -1,227 +0,0 @@
-# AttachmentService
-
-The `AttachmentService` manages the uploads of a message input.
-
-You can read more about [uploads](https://getstream.io/chat/docs/javascript/file_uploads/?language=javascript&q=size) in the Stream API documentation. You can use Stream's API or the dashboard to customize the [file](https://getstream.io/chat/docs/javascript/app_setting_overview/?language=javascript&q=size#file-uploads) and [image upload](https://getstream.io/chat/docs/javascript/app_setting_overview/?language=javascript&q=size#image-uploads) configuration.
-
-## Type parameters
-
-| Name | Type                                                              |
-| :--- | :---------------------------------------------------------------- |
-| `T`  | extends `DefaultStreamChatGenerics` = `DefaultStreamChatGenerics` |
-
-## Properties
-
-### attachmentUploadInProgressCounter$
-
-• **attachmentUploadInProgressCounter$**: `BehaviorSubject`\<`number`\>
-
-Emits the number of uploads in progress.
-
-You can increment and decrement this counter if you're using custom attachments and want to disable message sending until all attachments are uploaded.
-
-The SDK will handle updating this counter for built-in attachments, but for custom attachments you should take care of this.
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/attachment.service.ts:34](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/attachment.service.ts#L34)
-
----
-
-### attachmentUploads$
-
-• **attachmentUploads$**: `Observable`\<`AttachmentUpload`\<`DefaultStreamChatGenerics`\>[]\>
-
-Emits the state of the uploads ([`AttachmentUpload[]`](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/types.ts)), it adds a state (`success`, `error` or `uploading`) to each file the user selects for upload. It is used by the [`AttachmentPreviewList`](../components/AttachmentPreviewListComponent.mdx) to display the attachment previews.
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/attachment.service.ts:38](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/attachment.service.ts#L38)
-
----
-
-### customAttachments$
-
-• **customAttachments$**: `BehaviorSubject`\<`Attachment`\<`T`\>[]\>
-
-You can get and set the list if uploaded custom attachments
-
-By default the SDK components won't display these, but you can provide your own `customAttachmentPreviewListTemplate$` and `customAttachmentListTemplate$` for the [`CustomTemplatesService`](../../services/CustomTemplatesService).
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/attachment.service.ts:44](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/attachment.service.ts#L44)
-
-## Methods
-
-### addAttachment
-
-▸ **addAttachment**(`attachment`): `void`
-
-You can add custom `image`, `video` and `file` attachments using this method.
-
-Note: If you just want to use your own CDN for file uploads, you don't necessary need this method, you can just specify you own upload function in the [`ChannelService`](./ChannelService.mdx)
-
-#### Parameters
-
-| Name         | Type                |
-| :----------- | :------------------ |
-| `attachment` | `Attachment`\<`T`\> |
-
-#### Returns
-
-`void`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/attachment.service.ts:166](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/attachment.service.ts#L166)
-
----
-
-### createFromAttachments
-
-▸ **createFromAttachments**(`attachments`): `void`
-
-Maps attachments received from the Stream API to uploads. This is useful when editing a message.
-
-#### Parameters
-
-| Name          | Type                  | Description                           |
-| :------------ | :-------------------- | :------------------------------------ |
-| `attachments` | `Attachment`\<`T`\>[] | Attachemnts received with the message |
-
-#### Returns
-
-`void`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/attachment.service.ts:256](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/attachment.service.ts#L256)
-
----
-
-### deleteAttachment
-
-▸ **deleteAttachment**(`upload`): `Promise`\<`void`\>
-
-Deletes an attachment, the attachment can have any state (`error`, `uploading` or `success`).
-
-#### Parameters
-
-| Name     | Type                                              |
-| :------- | :------------------------------------------------ |
-| `upload` | `AttachmentUpload`\<`DefaultStreamChatGenerics`\> |
-
-#### Returns
-
-`Promise`\<`void`\>
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/attachment.service.ts:191](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/attachment.service.ts#L191)
-
----
-
-### filesSelected
-
-▸ **filesSelected**(`fileList`): `Promise`\<`undefined` \| `boolean`\>
-
-Uploads the selected files, and creates preview for image files. The result is propagated throught the `attachmentUploads$` stream.
-
-#### Parameters
-
-| Name       | Type                             | Description                                                                                                                                                           |
-| :--------- | :------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `fileList` | `null` \| `File`[] \| `FileList` | The files selected by the user, if you have Blobs instead of Files, you can convert them with this method: https://developer.mozilla.org/en-US/docs/Web/API/File/File |
-
-#### Returns
-
-`Promise`\<`undefined` \| `boolean`\>
-
-A promise with true or false. If false is returned the upload was canceled because of a client side error. The error is emitted via the `NotificationService`.
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/attachment.service.ts:108](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/attachment.service.ts#L108)
-
----
-
-### mapToAttachments
-
-▸ **mapToAttachments**(): `Attachment`\<`DefaultGenerics`\>[]
-
-Maps the current uploads to a format that can be sent along with the message to the Stream API.
-
-#### Returns
-
-`Attachment`\<`DefaultGenerics`\>[]
-
-the attachments
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/attachment.service.ts:221](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/attachment.service.ts#L221)
-
----
-
-### resetAttachmentUploads
-
-▸ **resetAttachmentUploads**(): `void`
-
-Resets the attachments uploads (for example after the message with the attachments sent successfully)
-
-#### Returns
-
-`void`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/attachment.service.ts:65](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/attachment.service.ts#L65)
-
----
-
-### retryAttachmentUpload
-
-▸ **retryAttachmentUpload**(`file`): `Promise`\<`void`\>
-
-Retries to upload an attachment.
-
-#### Parameters
-
-| Name   | Type   |
-| :----- | :----- |
-| `file` | `File` |
-
-#### Returns
-
-`Promise`\<`void`\>
-
-A promise with the result
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/attachment.service.ts:176](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/attachment.service.ts#L176)
-
----
-
-### uploadVoiceRecording
-
-▸ **uploadVoiceRecording**(`audioRecording`): `Promise`\<`boolean`\>
-
-Upload a voice recording
-
-#### Parameters
-
-| Name             | Type             |
-| :--------------- | :--------------- |
-| `audioRecording` | `AudioRecording` |
-
-#### Returns
-
-`Promise`\<`boolean`\>
-
-A promise with true or false. If false is returned the upload was canceled because of a client side error. The error is emitted via the `NotificationService`.
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/attachment.service.ts:75](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/attachment.service.ts#L75)
diff --git a/docusaurus/docs/Angular/services/AudioRecorderService.mdx b/docusaurus/docs/Angular/services/AudioRecorderService.mdx
deleted file mode 100644
index 8936bb79..00000000
--- a/docusaurus/docs/Angular/services/AudioRecorderService.mdx
+++ /dev/null
@@ -1,117 +0,0 @@
-# AudioRecorderService
-
-The `AudioRecorderService` can record an audio file, the SDK uses this to record a voice message
-
-## Hierarchy
-
-- `MultimediaRecorder`<`Omit`\<`AudioRecording`, keyof `MediaRecording`\>\>
-
-  ↳ **`AudioRecorderService`**
-
-## Properties
-
-### config
-
-• **config**: `MediaRecorderConfig`
-
-Due to browser restrictions the following config is used:
-
-- In Safari we record in audio/mp4
-- For all other browsers we use audio/webm (which is then transcoded to wav)
-
-#### Overrides
-
-MultimediaRecorder.config
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/voice-recorder/audio-recorder.service.ts:24](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/voice-recorder/audio-recorder.service.ts#L24)
-
-## Methods
-
-### pause
-
-▸ **pause**(): `void`
-
-Pause audio recording, it can be restarted using `resume`
-
-#### Returns
-
-`void`
-
-#### Overrides
-
-MultimediaRecorder.pause
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/voice-recorder/audio-recorder.service.ts:62](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/voice-recorder/audio-recorder.service.ts#L62)
-
----
-
-### resume
-
-▸ **resume**(): `void`
-
-Resume a previously paused recording
-
-#### Returns
-
-`void`
-
-#### Overrides
-
-MultimediaRecorder.resume
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/voice-recorder/audio-recorder.service.ts:73](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/voice-recorder/audio-recorder.service.ts#L73)
-
----
-
-### start
-
-▸ **start**(): `Promise`\<`void`\>
-
-Start audio recording
-
-#### Returns
-
-`Promise`\<`void`\>
-
-#### Overrides
-
-MultimediaRecorder.start
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/voice-recorder/audio-recorder.service.ts:49](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/voice-recorder/audio-recorder.service.ts#L49)
-
----
-
-### stop
-
-▸ **stop**(`options?`): `Promise`\<`MediaRecording` & `Omit`\<`AudioRecording`, keyof `MediaRecording`\>\>
-
-Stop the recording and free up used resources
-
-#### Parameters
-
-| Name             | Type      | Description                                                                 |
-| :--------------- | :-------- | :-------------------------------------------------------------------------- |
-| `options?`       | `Object`  |                                                                             |
-| `options.cancel` | `boolean` | if this is `true` no recording will be created, but resources will be freed |
-
-#### Returns
-
-`Promise`\<`MediaRecording` & `Omit`\<`AudioRecording`, keyof `MediaRecording`\>\>
-
-the recording
-
-#### Overrides
-
-MultimediaRecorder.stop
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/voice-recorder/audio-recorder.service.ts:87](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/voice-recorder/audio-recorder.service.ts#L87)
diff --git a/docusaurus/docs/Angular/services/ChannelService.mdx b/docusaurus/docs/Angular/services/ChannelService.mdx
deleted file mode 100644
index 0b2138cc..00000000
--- a/docusaurus/docs/Angular/services/ChannelService.mdx
+++ /dev/null
@@ -1,1506 +0,0 @@
-# ChannelService
-
-The `ChannelService` provides data and interaction for the channel list and message list.
-
-## Type parameters
-
-| Name | Type                                                              |
-| :--- | :---------------------------------------------------------------- |
-| `T`  | extends `DefaultStreamChatGenerics` = `DefaultStreamChatGenerics` |
-
-## Properties
-
-### activeChannel$
-
-• **activeChannel$**: `Observable`\<`undefined` \| `Channel`\<`T`\>\>
-
-Emits the currently active channel.
-
-:::important
-If you want to subscribe to channel events, you need to manually reenter Angular's change detection zone, our [Change detection guide](../concepts/change-detection.mdx) explains this in detail.
-:::
-
-The active channel will always be marked as read when a new message is received
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:80](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L80)
-
----
-
-### activeChannelLastReadMessageId
-
-• `Optional` **activeChannelLastReadMessageId**: `string`
-
-The last read message id of the active channel, it's used by the message list component to display unread UI, and jump to latest read message
-
-This property isn't always updated, please use `channel.read` to display up-to-date read information
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:132](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L132)
-
----
-
-### activeChannelMessages$
-
-• **activeChannelMessages$**: `Observable`\<`StreamMessage`\<`T`\>[]\>
-
-Emits the list of currently loaded messages of the active channel.
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:84](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L84)
-
----
-
-### activeChannelPinnedMessages$
-
-• **activeChannelPinnedMessages$**: `Observable`\<`StreamMessage`\<`T`\>[]\>
-
-Emits the list of pinned messages of the active channel.
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:88](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L88)
-
----
-
-### activeChannelUnreadCount
-
-• `Optional` **activeChannelUnreadCount**: `number`
-
-The unread count of the active channel, it's used by the message list component to display unread UI
-
-This property isn't always updated, please use `channel.read` to display up-to-date read information
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:138](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L138)
-
----
-
-### activeParentMessage$
-
-• **activeParentMessage$**: `Observable`\<`undefined` \| `StreamMessage`\<`T`\>\>
-
-Emits the currently selected parent message. If no message is selected, it emits undefined.
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:100](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L100)
-
----
-
-### activeParentMessageId$
-
-• **activeParentMessageId$**: `Observable`\<`undefined` \| `string`\>
-
-Emits the id of the currently selected parent message. If no message is selected, it emits undefined.
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:92](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L92)
-
----
-
-### activeThreadMessages$
-
-• **activeThreadMessages$**: `Observable`\<`StreamMessage`\<`T`\>[]\>
-
-Emits the list of currently loaded thread replies belonging to the selected parent message. If there is no currently active thread it emits an empty array.
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:96](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L96)
-
----
-
-### beforeSendMessage
-
-• `Optional` **beforeSendMessage**: (`input`: `MessageInput`\<`T`\>) => `MessageInput`\<`T`\> \| `Promise`\<`MessageInput`\<`T`\>\>
-
-The provided method will be called before a new message is sent to Stream's API. You can use this hook to tranfrom or enrich the message being sent.
-
-#### Type declaration
-
-▸ (`input`): `MessageInput`\<`T`\> \| `Promise`\<`MessageInput`\<`T`\>\>
-
-##### Parameters
-
-| Name    | Type                  |
-| :------ | :-------------------- |
-| `input` | `MessageInput`\<`T`\> |
-
-##### Returns
-
-`MessageInput`\<`T`\> \| `Promise`\<`MessageInput`\<`T`\>\>
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:305](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L305)
-
----
-
-### beforeUpdateMessage
-
-• `Optional` **beforeUpdateMessage**: (`message`: `StreamMessage`\<`T`\>) => `StreamMessage`\<`T`\> \| `Promise`\<`StreamMessage`\<`T`\>\>
-
-The provided method will be called before a message is sent to Stream's API for update. You can use this hook to tranfrom or enrich the message being updated.
-
-#### Type declaration
-
-▸ (`message`): `StreamMessage`\<`T`\> \| `Promise`\<`StreamMessage`\<`T`\>\>
-
-##### Parameters
-
-| Name      | Type                   |
-| :-------- | :--------------------- |
-| `message` | `StreamMessage`\<`T`\> |
-
-##### Returns
-
-`StreamMessage`\<`T`\> \| `Promise`\<`StreamMessage`\<`T`\>\>
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:311](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L311)
-
----
-
-### bouncedMessage$
-
-• **bouncedMessage$**: `BehaviorSubject`\<`undefined` \| `StreamMessage`\<`T`\>\>
-
-If you're using [semantic filters for moderation](https://getstream.io/automated-moderation/docs/automod_configuration/?q=semantic%20filters) you can set up rules for bouncing messages.
-
-If a message is bounced, it will be emitted via this `Observable`. The built-in [`MessageBouncePrompt` component](../../components/MessageBouncePromptComponent) will display the bounce option to the user if a bounced message is clicked.
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:126](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L126)
-
----
-
-### channelQueryState$
-
-• **channelQueryState$**: `Observable`\<`undefined` \| `ChannelQueryState`\>
-
-The result of the latest channel query request.
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:70](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L70)
-
----
-
-### channels$
-
-• **channels$**: `Observable`\<`undefined` \| `Channel`\<`T`\>[]\>
-
-Emits the currently loaded and [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel list.
-
-:::important
-If you want to subscribe to channel events, you need to manually reenter Angular's change detection zone, our [Change detection guide](../concepts/change-detection.mdx) explains this in detail.
-:::
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:66](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L66)
-
----
-
-### customAddedToChannelNotificationHandler
-
-• `Optional` **customAddedToChannelNotificationHandler**: (`clientEvent`: `ClientEvent`\<`DefaultStreamChatGenerics`\>, `channelListSetter`: (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`) => `void`
-
-Custom event handler to call when the user is added to a channel, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels).
-
-If you're adding a new channel, make sure that it's a [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel.
-
-#### Type declaration
-
-▸ (`clientEvent`, `channelListSetter`): `void`
-
-##### Parameters
-
-| Name                | Type                                                                                        |
-| :------------------ | :------------------------------------------------------------------------------------------ |
-| `clientEvent`       | `ClientEvent`\<`DefaultStreamChatGenerics`\>                                                |
-| `channelListSetter` | (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` |
-
-##### Returns
-
-`void`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:156](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L156)
-
----
-
-### customChannelDeletedHandler
-
-• `Optional` **customChannelDeletedHandler**: (`event`: `Event`\<`DefaultGenerics`\>, `channel`: `Channel`\<`T`\>, `channelListSetter`: (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`, `messageListSetter`: (`messages`: `StreamMessage`\<`T`\>[]) => `void`, `threadListSetter`: (`messages`: `StreamMessage`\<`T`\>[]) => `void`, `parentMessageSetter`: (`message`: `undefined` \| `StreamMessage`\<`T`\>) => `void`) => `void`
-
-Custom event handler to call when a channel is deleted, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels).
-
-If you're adding a new channel, make sure that it's a [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel.
-
-#### Type declaration
-
-▸ (`event`, `channel`, `channelListSetter`, `messageListSetter`, `threadListSetter`, `parentMessageSetter`): `void`
-
-##### Parameters
-
-| Name                  | Type                                                                                        |
-| :-------------------- | :------------------------------------------------------------------------------------------ |
-| `event`               | `Event`\<`DefaultGenerics`\>                                                                |
-| `channel`             | `Channel`\<`T`\>                                                                            |
-| `channelListSetter`   | (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` |
-| `messageListSetter`   | (`messages`: `StreamMessage`\<`T`\>[]) => `void`                                            |
-| `threadListSetter`    | (`messages`: `StreamMessage`\<`T`\>[]) => `void`                                            |
-| `parentMessageSetter` | (`message`: `undefined` \| `StreamMessage`\<`T`\>) => `void`                                |
-
-##### Returns
-
-`void`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:180](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L180)
-
----
-
-### customChannelHiddenHandler
-
-• `Optional` **customChannelHiddenHandler**: (`event`: `Event`\<`DefaultGenerics`\>, `channel`: `Channel`\<`T`\>, `channelListSetter`: (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`, `messageListSetter`: (`messages`: `StreamMessage`\<`T`\>[]) => `void`, `threadListSetter`: (`messages`: `StreamMessage`\<`T`\>[]) => `void`, `parentMessageSetter`: (`message`: `undefined` \| `StreamMessage`\<`T`\>) => `void`) => `void`
-
-Custom event handler to call when a channel becomes hidden, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels).
-
-If you're adding a new channel, make sure that it's a [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel.
-
-#### Type declaration
-
-▸ (`event`, `channel`, `channelListSetter`, `messageListSetter`, `threadListSetter`, `parentMessageSetter`): `void`
-
-##### Parameters
-
-| Name                  | Type                                                                                        |
-| :-------------------- | :------------------------------------------------------------------------------------------ |
-| `event`               | `Event`\<`DefaultGenerics`\>                                                                |
-| `channel`             | `Channel`\<`T`\>                                                                            |
-| `channelListSetter`   | (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` |
-| `messageListSetter`   | (`messages`: `StreamMessage`\<`T`\>[]) => `void`                                            |
-| `threadListSetter`    | (`messages`: `StreamMessage`\<`T`\>[]) => `void`                                            |
-| `parentMessageSetter` | (`message`: `undefined` \| `StreamMessage`\<`T`\>) => `void`                                |
-
-##### Returns
-
-`void`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:228](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L228)
-
----
-
-### customChannelTruncatedHandler
-
-• `Optional` **customChannelTruncatedHandler**: (`event`: `Event`\<`DefaultGenerics`\>, `channel`: `Channel`\<`T`\>, `channelListSetter`: (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`, `messageListSetter`: (`messages`: `StreamMessage`\<`T`\>[]) => `void`, `threadListSetter`: (`messages`: `StreamMessage`\<`T`\>[]) => `void`, `parentMessageSetter`: (`message`: `undefined` \| `StreamMessage`\<`T`\>) => `void`) => `void`
-
-Custom event handler to call when a channel is truncated, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels).
-
-If you're adding a new channel, make sure that it's a [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel.
-
-#### Type declaration
-
-▸ (`event`, `channel`, `channelListSetter`, `messageListSetter`, `threadListSetter`, `parentMessageSetter`): `void`
-
-##### Parameters
-
-| Name                  | Type                                                                                        |
-| :-------------------- | :------------------------------------------------------------------------------------------ |
-| `event`               | `Event`\<`DefaultGenerics`\>                                                                |
-| `channel`             | `Channel`\<`T`\>                                                                            |
-| `channelListSetter`   | (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` |
-| `messageListSetter`   | (`messages`: `StreamMessage`\<`T`\>[]) => `void`                                            |
-| `threadListSetter`    | (`messages`: `StreamMessage`\<`T`\>[]) => `void`                                            |
-| `parentMessageSetter` | (`message`: `undefined` \| `StreamMessage`\<`T`\>) => `void`                                |
-
-##### Returns
-
-`void`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:212](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L212)
-
----
-
-### customChannelUpdatedHandler
-
-• `Optional` **customChannelUpdatedHandler**: (`event`: `Event`\<`DefaultGenerics`\>, `channel`: `Channel`\<`T`\>, `channelListSetter`: (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`, `messageListSetter`: (`messages`: `StreamMessage`\<`DefaultStreamChatGenerics`\>[]) => `void`, `threadListSetter`: (`messages`: `StreamMessage`\<`DefaultStreamChatGenerics`\>[]) => `void`, `parentMessageSetter`: (`message`: `undefined` \| `StreamMessage`\<`DefaultStreamChatGenerics`\>) => `void`) => `void`
-
-Custom event handler to call when a channel is updated, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels).
-
-If you're adding a new channel, make sure that it's a [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel.
-
-#### Type declaration
-
-▸ (`event`, `channel`, `channelListSetter`, `messageListSetter`, `threadListSetter`, `parentMessageSetter`): `void`
-
-##### Parameters
-
-| Name                  | Type                                                                                        |
-| :-------------------- | :------------------------------------------------------------------------------------------ |
-| `event`               | `Event`\<`DefaultGenerics`\>                                                                |
-| `channel`             | `Channel`\<`T`\>                                                                            |
-| `channelListSetter`   | (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` |
-| `messageListSetter`   | (`messages`: `StreamMessage`\<`DefaultStreamChatGenerics`\>[]) => `void`                    |
-| `threadListSetter`    | (`messages`: `StreamMessage`\<`DefaultStreamChatGenerics`\>[]) => `void`                    |
-| `parentMessageSetter` | (`message`: `undefined` \| `StreamMessage`\<`DefaultStreamChatGenerics`\>) => `void`        |
-
-##### Returns
-
-`void`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:196](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L196)
-
----
-
-### customChannelVisibleHandler
-
-• `Optional` **customChannelVisibleHandler**: (`event`: `Event`\<`DefaultGenerics`\>, `channel`: `Channel`\<`T`\>, `channelListSetter`: (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`, `messageListSetter`: (`messages`: `StreamMessage`\<`T`\>[]) => `void`, `threadListSetter`: (`messages`: `StreamMessage`\<`T`\>[]) => `void`, `parentMessageSetter`: (`message`: `undefined` \| `StreamMessage`\<`T`\>) => `void`) => `void`
-
-Custom event handler to call when a channel becomes visible, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels).
-
-If you're adding a new channel, make sure that it's a [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel.
-
-#### Type declaration
-
-▸ (`event`, `channel`, `channelListSetter`, `messageListSetter`, `threadListSetter`, `parentMessageSetter`): `void`
-
-##### Parameters
-
-| Name                  | Type                                                                                        |
-| :-------------------- | :------------------------------------------------------------------------------------------ |
-| `event`               | `Event`\<`DefaultGenerics`\>                                                                |
-| `channel`             | `Channel`\<`T`\>                                                                            |
-| `channelListSetter`   | (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` |
-| `messageListSetter`   | (`messages`: `StreamMessage`\<`T`\>[]) => `void`                                            |
-| `threadListSetter`    | (`messages`: `StreamMessage`\<`T`\>[]) => `void`                                            |
-| `parentMessageSetter` | (`message`: `undefined` \| `StreamMessage`\<`T`\>) => `void`                                |
-
-##### Returns
-
-`void`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:244](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L244)
-
----
-
-### customFileDeleteRequest
-
-• `Optional` **customFileDeleteRequest**: (`url`: `string`, `channel`: `Channel`\<`T`\>) => `Promise`\<`void`\>
-
-You can override the default file delete request - override this if you use your own CDN
-
-#### Type declaration
-
-▸ (`url`, `channel`): `Promise`\<`void`\>
-
-##### Parameters
-
-| Name      | Type             |
-| :-------- | :--------------- |
-| `url`     | `string`         |
-| `channel` | `Channel`\<`T`\> |
-
-##### Returns
-
-`Promise`\<`void`\>
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:288](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L288)
-
----
-
-### customFileUploadRequest
-
-• `Optional` **customFileUploadRequest**: (`file`: `File`, `channel`: `Channel`\<`T`\>) => `Promise`\<\{ `file`: `string` }\>
-
-You can override the default file upload request - you can use this to upload files to your own CDN
-
-#### Type declaration
-
-▸ (`file`, `channel`): `Promise`\<\{ `file`: `string` }\>
-
-##### Parameters
-
-| Name      | Type             |
-| :-------- | :--------------- |
-| `file`    | `File`           |
-| `channel` | `Channel`\<`T`\> |
-
-##### Returns
-
-`Promise`\<\{ `file`: `string` }\>
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:274](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L274)
-
----
-
-### customImageDeleteRequest
-
-• `Optional` **customImageDeleteRequest**: (`url`: `string`, `channel`: `Channel`\<`T`\>) => `Promise`\<`void`\>
-
-You can override the default image delete request - override this if you use your own CDN
-
-#### Type declaration
-
-▸ (`url`, `channel`): `Promise`\<`void`\>
-
-##### Parameters
-
-| Name      | Type             |
-| :-------- | :--------------- |
-| `url`     | `string`         |
-| `channel` | `Channel`\<`T`\> |
-
-##### Returns
-
-`Promise`\<`void`\>
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:292](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L292)
-
----
-
-### customImageUploadRequest
-
-• `Optional` **customImageUploadRequest**: (`file`: `File`, `channel`: `Channel`\<`T`\>) => `Promise`\<\{ `file`: `string` }\>
-
-You can override the default image upload request - you can use this to upload images to your own CDN
-
-#### Type declaration
-
-▸ (`file`, `channel`): `Promise`\<\{ `file`: `string` }\>
-
-##### Parameters
-
-| Name      | Type             |
-| :-------- | :--------------- |
-| `file`    | `File`           |
-| `channel` | `Channel`\<`T`\> |
-
-##### Returns
-
-`Promise`\<\{ `file`: `string` }\>
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:281](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L281)
-
----
-
-### customNewMessageHandler
-
-• `Optional` **customNewMessageHandler**: (`event`: `Event`\<`DefaultGenerics`\>, `channel`: `Channel`\<`T`\>, `channelListSetter`: (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`, `messageListSetter`: (`messages`: `StreamMessage`\<`T`\>[]) => `void`, `threadListSetter`: (`messages`: `StreamMessage`\<`T`\>[]) => `void`, `parentMessageSetter`: (`message`: `undefined` \| `StreamMessage`\<`T`\>) => `void`) => `void`
-
-Custom event handler to call if a new message received from a channel that is being watched, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels).
-
-If you're adding a new channel, make sure that it's a [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel.
-
-#### Type declaration
-
-▸ (`event`, `channel`, `channelListSetter`, `messageListSetter`, `threadListSetter`, `parentMessageSetter`): `void`
-
-##### Parameters
-
-| Name                  | Type                                                                                        |
-| :-------------------- | :------------------------------------------------------------------------------------------ |
-| `event`               | `Event`\<`DefaultGenerics`\>                                                                |
-| `channel`             | `Channel`\<`T`\>                                                                            |
-| `channelListSetter`   | (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` |
-| `messageListSetter`   | (`messages`: `StreamMessage`\<`T`\>[]) => `void`                                            |
-| `threadListSetter`    | (`messages`: `StreamMessage`\<`T`\>[]) => `void`                                            |
-| `parentMessageSetter` | (`message`: `undefined` \| `StreamMessage`\<`T`\>) => `void`                                |
-
-##### Returns
-
-`void`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:260](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L260)
-
----
-
-### customNewMessageNotificationHandler
-
-• `Optional` **customNewMessageNotificationHandler**: (`clientEvent`: `ClientEvent`\<`DefaultStreamChatGenerics`\>, `channelListSetter`: (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`) => `void`
-
-Custom event handler to call if a new message received from a channel that is not being watched, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels)
-
-If you're adding a new channel, make sure that it's a [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel.
-
-#### Type declaration
-
-▸ (`clientEvent`, `channelListSetter`): `void`
-
-##### Parameters
-
-| Name                | Type                                                                                        |
-| :------------------ | :------------------------------------------------------------------------------------------ |
-| `clientEvent`       | `ClientEvent`\<`DefaultStreamChatGenerics`\>                                                |
-| `channelListSetter` | (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` |
-
-##### Returns
-
-`void`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:144](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L144)
-
----
-
-### customRemovedFromChannelNotificationHandler
-
-• `Optional` **customRemovedFromChannelNotificationHandler**: (`clientEvent`: `ClientEvent`\<`DefaultStreamChatGenerics`\>, `channelListSetter`: (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void`) => `void`
-
-Custom event handler to call when the user is removed from a channel, provide an event handler if you want to override the [default channel list ordering](./ChannelService.mdx/#channels).
-
-If you're adding a new channel, make sure that it's a [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel.
-
-#### Type declaration
-
-▸ (`clientEvent`, `channelListSetter`): `void`
-
-##### Parameters
-
-| Name                | Type                                                                                        |
-| :------------------ | :------------------------------------------------------------------------------------------ |
-| `clientEvent`       | `ClientEvent`\<`DefaultStreamChatGenerics`\>                                                |
-| `channelListSetter` | (`channels`: `Channel`\<`T`\>[], `shouldStopWatchingRemovedChannels?`: `boolean`) => `void` |
-
-##### Returns
-
-`void`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:168](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L168)
-
----
-
-### hasMoreChannels$
-
-• **hasMoreChannels$**: `Observable`\<`boolean`\>
-
-Emits `false` if there are no more pages of channels that can be loaded.
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:58](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L58)
-
----
-
-### jumpToMessage$
-
-• **jumpToMessage$**: `Observable`\<\{ `id?`: `string` ; `parentId?`: `string` }\>
-
-Emits the ID of the message the message list should jump to (can be a channel message or thread message)
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:108](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L108)
-
----
-
-### latestMessageDateByUserByChannels$
-
-• **latestMessageDateByUserByChannels$**: `Observable`\<\{ `[key: string]`: `Date`; }\>
-
-Emits a map that contains the date of the latest message sent by the current user by channels (this is used to detect if slow mode countdown should be started)
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:120](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L120)
-
----
-
-### messageDeleteConfirmationHandler
-
-• `Optional` **messageDeleteConfirmationHandler**: (`message`: `StreamMessage`\<`T`\>) => `Promise`\<`boolean`\>
-
-The provided method will be called before deleting a message. If the returned Promise resolves to `true` to deletion will go ahead. If `false` is returned, the message won't be deleted.
-
-#### Type declaration
-
-▸ (`message`): `Promise`\<`boolean`\>
-
-##### Parameters
-
-| Name      | Type                   |
-| :-------- | :--------------------- |
-| `message` | `StreamMessage`\<`T`\> |
-
-##### Returns
-
-`Promise`\<`boolean`\>
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:299](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L299)
-
----
-
-### messageToQuote$
-
-• **messageToQuote$**: `Observable`\<`undefined` \| `StreamMessage`\<`T`\>\>
-
-Emits the currently selected message to quote
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:104](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L104)
-
----
-
-### usersTypingInChannel$
-
-• **usersTypingInChannel$**: `Observable`\<`UserResponse`\<`T`\>[]\>
-
-Emits the list of users that are currently typing in the channel (current user is not included)
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:112](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L112)
-
----
-
-### usersTypingInThread$
-
-• **usersTypingInThread$**: `Observable`\<`UserResponse`\<`T`\>[]\>
-
-Emits the list of users that are currently typing in the active thread (current user is not included)
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:116](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L116)
-
----
-
-### MAX_MESSAGE_REACTIONS_TO_FETCH
-
-▪ `Static` `Readonly` **MAX_MESSAGE_REACTIONS_TO_FETCH**: `1200`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:317](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L317)
-
-## Accessors
-
-### activeChannel
-
-• `get` **activeChannel**(): `undefined` \| `Channel`\<`T`\>
-
-The current active channel
-
-#### Returns
-
-`undefined` \| `Channel`\<`T`\>
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:1619](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L1619)
-
----
-
-### activeChannelMessages
-
-• `get` **activeChannelMessages**(): (`StreamMessage`\<`T`\> \| `MessageResponse`\<`T`\> \| `FormatMessageResponse`\<`T`\>)[]
-
-The current active channel messages
-
-#### Returns
-
-(`StreamMessage`\<`T`\> \| `MessageResponse`\<`T`\> \| `FormatMessageResponse`\<`T`\>)[]
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:1626](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L1626)
-
----
-
-### activeChannelThreadReplies
-
-• `get` **activeChannelThreadReplies**(): (`StreamMessage`\<`T`\> \| `MessageResponse`\<`T`\> \| `FormatMessageResponse`\<`T`\>)[]
-
-The current thread replies
-
-#### Returns
-
-(`StreamMessage`\<`T`\> \| `MessageResponse`\<`T`\> \| `FormatMessageResponse`\<`T`\>)[]
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:1633](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L1633)
-
----
-
-### channels
-
-• `get` **channels**(): `Channel`\<`T`\>[]
-
-The current list of channels
-
-#### Returns
-
-`Channel`\<`T`\>[]
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:1612](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L1612)
-
----
-
-### customPaginator
-
-• `set` **customPaginator**(`paginator`): `void`
-
-By default the SDK uses an offset based pagination, you can change/extend this by providing your own custom paginator method.
-
-The method will be called with the result of the latest channel query.
-
-You can return either an offset, or a filter using the [`$lte`/`$gte` operator](https://getstream.io/chat/docs/javascript/query_syntax_operators/). If you return a filter, it will be merged with the filter provided for the `init` method.
-
-#### Parameters
-
-| Name        | Type                                                                                 |
-| :---------- | :----------------------------------------------------------------------------------- |
-| `paginator` | `undefined` \| (`channelQueryResult`: `Channel`\<`T`\>[]) => `NextPageConfiguration` |
-
-#### Returns
-
-`void`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:547](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L547)
-
----
-
-### shouldMarkActiveChannelAsRead
-
-• `get` **shouldMarkActiveChannelAsRead**(): `boolean`
-
-If set to false, read events won't be sent as new messages are received. If set to true active channel (if any) will immediately be marked as read.
-
-#### Returns
-
-`boolean`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:523](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L523)
-
-• `set` **shouldMarkActiveChannelAsRead**(`shouldMarkActiveChannelAsRead`): `void`
-
-If set to false, read events won't be sent as new messages are received. If set to true active channel (if any) will immediately be marked as read.
-
-#### Parameters
-
-| Name                            | Type      |
-| :------------------------------ | :-------- |
-| `shouldMarkActiveChannelAsRead` | `boolean` |
-
-#### Returns
-
-`void`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:530](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L530)
-
-## Methods
-
-### addChannel
-
-▸ **addChannel**(`channel`): `void`
-
-Add a new channel to the channel list
-The channel will be added to the beginning of the channel list
-
-#### Parameters
-
-| Name      | Type             |
-| :-------- | :--------------- |
-| `channel` | `Channel`\<`T`\> |
-
-#### Returns
-
-`void`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:1131](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L1131)
-
----
-
-### addReaction
-
-▸ **addReaction**(`messageId`, `reactionType`, `customData?`): `Promise`\<`void`\>
-
-Adds a reaction to a message.
-
-#### Parameters
-
-| Name           | Type                    | Description                                  |
-| :------------- | :---------------------- | :------------------------------------------- |
-| `messageId`    | `string`                | The id of the message to add the reaction to |
-| `reactionType` | `string`                | The type of the reaction                     |
-| `customData?`  | `T`[``"reactionType"``] |                                              |
-
-#### Returns
-
-`Promise`\<`void`\>
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:806](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L806)
-
----
-
-### autocompleteMembers
-
-▸ **autocompleteMembers**(`searchTerm`): `Promise`\<`ChannelMemberResponse`\<`T`\>[]\>
-
-Returns the autocomplete options for current channel members. If the channel has less than 100 members, it returns the channel members, otherwise sends a [search request](https://getstream.io/chat/docs/javascript/query_members/?language=javascript#pagination-and-ordering) with the given search term.
-
-#### Parameters
-
-| Name         | Type     | Description                                |
-| :----------- | :------- | :----------------------------------------- |
-| `searchTerm` | `string` | Text to search for in the names of members |
-
-#### Returns
-
-`Promise`\<`ChannelMemberResponse`\<`T`\>[]\>
-
-The list of members matching the search filter
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:1056](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L1056)
-
----
-
-### clearMessageJump
-
-▸ **clearMessageJump**(): `void`
-
-Clears the currently selected message to jump
-
-#### Returns
-
-`void`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:1291](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L1291)
-
----
-
-### deleteAttachment
-
-▸ **deleteAttachment**(`attachmentUpload`): `Promise`\<`void`\>
-
-Deletes an uploaded file by URL. If you want to know more about [file uploads](https://getstream.io/chat/docs/javascript/file_uploads/?language=javascript) check out the platform documentation
-
-#### Parameters
-
-| Name               | Type                                              | Description                                                                             |
-| :----------------- | :------------------------------------------------ | :-------------------------------------------------------------------------------------- |
-| `attachmentUpload` | `AttachmentUpload`\<`DefaultStreamChatGenerics`\> | Attachment to be deleted (output of the [`AttachmentService`](./AttachmentService.mdx)) |
-
-#### Returns
-
-`Promise`\<`void`\>
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:1040](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L1040)
-
----
-
-### deleteMessage
-
-▸ **deleteMessage**(`message`, `isLocalDelete?`): `Promise`\<`void`\>
-
-Deletes the message from the active channel
-
-#### Parameters
-
-| Name            | Type                                           | Default value | Description                                                                                                       |
-| :-------------- | :--------------------------------------------- | :------------ | :---------------------------------------------------------------------------------------------------------------- |
-| `message`       | `StreamMessage`\<`DefaultStreamChatGenerics`\> | `undefined`   | Message to be deleted                                                                                             |
-| `isLocalDelete` | `boolean`                                      | `false`       | set this `true` if you want to delete a message that's only part of the local state, not yet saved on the backend |
-
-#### Returns
-
-`Promise`\<`void`\>
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:928](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L928)
-
----
-
-### deselectActiveChannel
-
-▸ **deselectActiveChannel**(): `void`
-
-Deselects the currently active (if any) channel
-
-#### Returns
-
-`void`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:596](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L596)
-
----
-
-### getMessageReactions
-
-▸ **getMessageReactions**(`messageId`): `Promise`\<`ReactionResponse`\<`T`\>[]\>
-
-Get the last 1200 reactions of a message in the current active channel. If you need to fetch more reactions please use the [following endpoint](https://getstream.io/chat/docs/javascript/send_reaction/?language=javascript#paginating-reactions).
-
-#### Parameters
-
-| Name        | Type     |
-| :---------- | :------- |
-| `messageId` | `string` |
-
-#### Returns
-
-`Promise`\<`ReactionResponse`\<`T`\>[]\>
-
-all reactions of a message
-
-**`Deprecated`**
-
-use [`messageReactionsService.queryReactions()`](https://getstream.io/chat/docs/sdk/angular/services/MessageReactionsService/#queryreactions) instead
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:1643](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L1643)
-
----
-
-### init
-
-▸ **init**(`filters`, `sort?`, `options?`, `shouldSetActiveChannel?`): `Promise`\<`Channel`\<`T`\>[]\>
-
-Queries the channels with the given filters, sorts and options. More info about [channel querying](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript) can be found in the platform documentation. By default the first channel in the list will be set as active channel and will be marked as read.
-
-#### Parameters
-
-| Name                     | Type                    | Default value | Description                                                                            |
-| :----------------------- | :---------------------- | :------------ | :------------------------------------------------------------------------------------- |
-| `filters`                | `ChannelFilters`\<`T`\> | `undefined`   |                                                                                        |
-| `sort?`                  | `ChannelSort`\<`T`\>    | `undefined`   |                                                                                        |
-| `options?`               | `ChannelOptions`        | `undefined`   |                                                                                        |
-| `shouldSetActiveChannel` | `boolean`               | `true`        | Decides if the first channel in the result should be made as an active channel or not. |
-
-#### Returns
-
-`Promise`\<`Channel`\<`T`\>[]\>
-
-the list of channels found by the query
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:730](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L730)
-
----
-
-### initWithCustomQuery
-
-▸ **initWithCustomQuery**(`query`, `options?`): `Promise`\<`Channel`\<`T`\>[]\>
-
-Queries the channels with the given query function. More info about [channel querying](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript) can be found in the platform documentation.
-
-#### Parameters
-
-| Name                             | Type                                                                          | Description                                                                                                                                   |
-| :------------------------------- | :---------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------- |
-| `query`                          | (`queryType`: `ChannelQueryType`) => `Promise`\<`ChannelQueryResult`\<`T`\>\> |                                                                                                                                               |
-| `options`                        | `Object`                                                                      |                                                                                                                                               |
-| `options.messagePageSize`        | `number`                                                                      | How many messages should we load? The default is 25                                                                                           |
-| `options.shouldSetActiveChannel` | `boolean`                                                                     | The `shouldSetActiveChannel` specifies if the first channel in the result should be selected as the active channel or not. Default is `true`. |
-
-#### Returns
-
-`Promise`\<`Channel`\<`T`\>[]\>
-
-the channels that were loaded
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:766](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L766)
-
----
-
-### jumpToMessage
-
-▸ **jumpToMessage**(`messageId`, `parentMessageId?`): `Promise`\<`void`\>
-
-Jumps to the selected message inside the message list, if the message is not yet loaded, it'll load the message (and it's surroundings) from the API.
-
-#### Parameters
-
-| Name               | Type     | Description                                                                    |
-| :----------------- | :------- | :----------------------------------------------------------------------------- |
-| `messageId`        | `string` | The ID of the message to be loaded, 'latest' means jump to the latest messages |
-| `parentMessageId?` | `string` | The ID of the parent message if we want to load a thread message               |
-
-#### Returns
-
-`Promise`\<`void`\>
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:1263](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L1263)
-
----
-
-### loadMoreChannels
-
-▸ **loadMoreChannels**(): `Promise`\<`void`\>
-
-Loads the next page of channels. The page size can be set in the [query option](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript#query-options) object.
-
-#### Returns
-
-`Promise`\<`void`\>
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:796](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L796)
-
----
-
-### loadMoreMessages
-
-▸ **loadMoreMessages**(`direction?`): `undefined` \| `false` \| `Promise`\<`QueryChannelAPIResponse`\<`T`\>\>
-
-Loads the next page of messages of the active channel. The page size can be set in the [query option](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript#query-options) object.
-
-#### Parameters
-
-| Name        | Type                   | Default value |
-| :---------- | :--------------------- | :------------ |
-| `direction` | `"older"` \| `"newer"` | `'older'`     |
-
-#### Returns
-
-`undefined` \| `false` \| `Promise`\<`QueryChannelAPIResponse`\<`T`\>\>
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:658](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L658)
-
----
-
-### loadMoreThreadReplies
-
-▸ **loadMoreThreadReplies**(`direction?`): `false` \| `Promise`\<`void`\>
-
-Loads the next page of messages of the active thread. The page size can be set in the [query option](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript#query-options) object.
-
-#### Parameters
-
-| Name        | Type                   | Default value |
-| :---------- | :--------------------- | :------------ |
-| `direction` | `"older"` \| `"newer"` | `'older'`     |
-
-#### Returns
-
-`false` \| `Promise`\<`void`\>
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:697](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L697)
-
----
-
-### markMessageUnread
-
-▸ **markMessageUnread**(`messageId`): `Promise`\<`undefined` \| `null` \| `APIResponse`\>
-
-Marks the channel from the given message as unread
-
-#### Parameters
-
-| Name        | Type     |
-| :---------- | :------- |
-| `messageId` | `string` |
-
-#### Returns
-
-`Promise`\<`undefined` \| `null` \| `APIResponse`\>
-
-the result of the request
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:1676](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L1676)
-
----
-
-### pinMessage
-
-▸ **pinMessage**(`message`): `Promise`\<`void`\>
-
-Pins the given message in the channel
-
-#### Parameters
-
-| Name      | Type                                           |
-| :-------- | :--------------------------------------------- |
-| `message` | `StreamMessage`\<`DefaultStreamChatGenerics`\> |
-
-#### Returns
-
-`Promise`\<`void`\>
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:1299](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L1299)
-
----
-
-### removeChannel
-
-▸ **removeChannel**(`cid`, `shouldStopWatching?`): `void`
-
-#### Parameters
-
-| Name                 | Type      | Default value |
-| :------------------- | :-------- | :------------ |
-| `cid`                | `string`  | `undefined`   |
-| `shouldStopWatching` | `boolean` | `true`        |
-
-#### Returns
-
-`void`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:1143](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L1143)
-
----
-
-### removeReaction
-
-▸ **removeReaction**(`messageId`, `reactionType`): `Promise`\<`void`\>
-
-Removes a reaction from a message.
-
-#### Parameters
-
-| Name           | Type     | Description                                       |
-| :------------- | :------- | :------------------------------------------------ |
-| `messageId`    | `string` | The id of the message to remove the reaction from |
-| `reactionType` | `string` | Thr type of reaction to remove                    |
-
-#### Returns
-
-`Promise`\<`void`\>
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:822](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L822)
-
----
-
-### resendMessage
-
-▸ **resendMessage**(`message`): `Promise`\<`StreamMessage`\<`T`\>\>
-
-Resends the given message to the active channel
-
-#### Parameters
-
-| Name      | Type                                           | Description           |
-| :-------- | :--------------------------------------------- | :-------------------- |
-| `message` | `StreamMessage`\<`DefaultStreamChatGenerics`\> | The message to resend |
-
-#### Returns
-
-`Promise`\<`StreamMessage`\<`T`\>\>
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:876](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L876)
-
----
-
-### reset
-
-▸ **reset**(): `void`
-
-Resets the `activeChannel$`, `channels$` and `activeChannelMessages$` Observables. Useful when disconnecting a chat user, use in combination with [`disconnectUser`](./ChatClientService.mdx/#disconnectuser).
-
-#### Returns
-
-`void`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:780](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L780)
-
----
-
-### selectMessageToQuote
-
-▸ **selectMessageToQuote**(`message`): `void`
-
-Selects or deselects the current message to quote reply to
-
-#### Parameters
-
-| Name      | Type                                                          | Description                                                                 |
-| :-------- | :------------------------------------------------------------ | :-------------------------------------------------------------------------- |
-| `message` | `undefined` \| `StreamMessage`\<`DefaultStreamChatGenerics`\> | The message to select, if called with `undefined`, it deselects the message |
-
-#### Returns
-
-`void`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:1122](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L1122)
-
----
-
-### sendAction
-
-▸ **sendAction**(`messageId`, `formData`, `parentMessageId?`): `Promise`\<`void`\>
-
-[Runs a message action](https://getstream.io/chat/docs/rest/#messages-runmessageaction) in the current channel. Updates the message list based on the action result (if no message is returned, the message will be removed from the message list).
-
-#### Parameters
-
-| Name               | Type                           |
-| :----------------- | :----------------------------- |
-| `messageId`        | `string`                       |
-| `formData`         | `Record`\<`string`, `string`\> |
-| `parentMessageId?` | `string`                       |
-
-#### Returns
-
-`Promise`\<`void`\>
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:1085](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L1085)
-
----
-
-### sendMessage
-
-▸ **sendMessage**(`text`, `attachments?`, `mentionedUsers?`, `parentId?`, `quotedMessageId?`, `customData?`): `Promise`\<`StreamMessage`\<`T`\>\>
-
-Sends a message to the active channel. The message is immediately added to the message list, if an error occurs and the message can't be sent, the error is indicated in `state` of the message.
-
-#### Parameters
-
-| Name              | Type                                               | Default value | Description                                           |
-| :---------------- | :------------------------------------------------- | :------------ | :---------------------------------------------------- |
-| `text`            | `string`                                           | `undefined`   | The text of the message                               |
-| `attachments`     | `Attachment`\<`T`\>[]                              | `[]`          | The attachments                                       |
-| `mentionedUsers`  | `UserResponse`\<`T`\>[]                            | `[]`          | Mentioned users                                       |
-| `parentId`        | `undefined` \| `string`                            | `undefined`   | Id of the parent message (if sending a thread reply)  |
-| `quotedMessageId` | `undefined` \| `string`                            | `undefined`   | Id of the message to quote (if sending a quote reply) |
-| `customData`      | `undefined` \| `Partial`\<`T`[``"messageType"``]\> | `undefined`   |                                                       |
-
-#### Returns
-
-`Promise`\<`StreamMessage`\<`T`\>\>
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:837](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L837)
-
----
-
-### setAsActiveChannel
-
-▸ **setAsActiveChannel**(`channel`): `void`
-
-Sets the given `channel` as active and marks it as read.
-If the channel wasn't previously part of the channel, it will be added to the beginning of the list.
-
-#### Parameters
-
-| Name      | Type             |
-| :-------- | :--------------- |
-| `channel` | `Channel`\<`T`\> |
-
-#### Returns
-
-`void`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:563](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L563)
-
----
-
-### setAsActiveParentMessage
-
-▸ **setAsActiveParentMessage**(`message`, `loadMessagesForm?`): `Promise`\<`void`\>
-
-Sets the given `message` as an active parent message. If `undefined` is provided, it will deleselect the current parent message.
-
-#### Parameters
-
-| Name               | Type                                  | Default value |
-| :----------------- | :------------------------------------ | :------------ |
-| `message`          | `undefined` \| `StreamMessage`\<`T`\> | `undefined`   |
-| `loadMessagesForm` | `"state"` \| `"request"`              | `'request'`   |
-
-#### Returns
-
-`Promise`\<`void`\>
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:623](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L623)
-
----
-
-### typingStarted
-
-▸ **typingStarted**(`parentId?`): `Promise`\<`void`\>
-
-Call this method if user started typing in the active channel
-
-#### Parameters
-
-| Name        | Type     | Description                                                 |
-| :---------- | :------- | :---------------------------------------------------------- |
-| `parentId?` | `string` | The id of the parent message, if user is typing in a thread |
-
-#### Returns
-
-`Promise`\<`void`\>
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:1595](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L1595)
-
----
-
-### typingStopped
-
-▸ **typingStopped**(`parentId?`): `Promise`\<`void`\>
-
-Call this method if user stopped typing in the active channel
-
-#### Parameters
-
-| Name        | Type     | Description                                                   |
-| :---------- | :------- | :------------------------------------------------------------ |
-| `parentId?` | `string` | The id of the parent message, if user were typing in a thread |
-
-#### Returns
-
-`Promise`\<`void`\>
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:1604](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L1604)
-
----
-
-### unpinMessage
-
-▸ **unpinMessage**(`message`): `Promise`\<`void`\>
-
-Removes the given message from pinned messages
-
-#### Parameters
-
-| Name      | Type                                           |
-| :-------- | :--------------------------------------------- |
-| `message` | `StreamMessage`\<`DefaultStreamChatGenerics`\> |
-
-#### Returns
-
-`Promise`\<`void`\>
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:1318](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L1318)
-
----
-
-### updateMessage
-
-▸ **updateMessage**(`message`): `Promise`\<`StreamMessage`\<`T`\> \| `T`[``"messageType"``] & {} & {} & {} & `Omit`\<`MessageResponse`\<{}\>, `"status"` \| `"created_at"` \| `"pinned_at"` \| `"updated_at"` \| `"deleted_at"`\> & `UR` & {}\>
-
-Updates the message in the active channel
-
-#### Parameters
-
-| Name      | Type                   | Description          |
-| :-------- | :--------------------- | :------------------- |
-| `message` | `StreamMessage`\<`T`\> | Mesage to be updated |
-
-#### Returns
-
-`Promise`\<`StreamMessage`\<`T`\> \| `T`[``"messageType"``] & {} & {} & {} & `Omit`\<`MessageResponse`\<{}\>, `"status"` \| `"created_at"` \| `"pinned_at"` \| `"updated_at"` \| `"deleted_at"`\> & `UR` & {}\>
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:893](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L893)
-
----
-
-### uploadAttachments
-
-▸ **uploadAttachments**(`uploads`): `Promise`\<`AttachmentUpload`\<`DefaultStreamChatGenerics`\>[]\>
-
-Uploads files to the channel. If you want to know more about [file uploads](https://getstream.io/chat/docs/javascript/file_uploads/?language=javascript) check out the platform documentation.
-
-#### Parameters
-
-| Name      | Type                                                | Description                                                                              |
-| :-------- | :-------------------------------------------------- | :--------------------------------------------------------------------------------------- |
-| `uploads` | `AttachmentUpload`\<`DefaultStreamChatGenerics`\>[] | the attachments to upload (output of the [`AttachmentService`](./AttachmentService.mdx)) |
-
-#### Returns
-
-`Promise`\<`AttachmentUpload`\<`DefaultStreamChatGenerics`\>[]\>
-
-the result of file upload requests
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/channel.service.ts:960](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/channel.service.ts#L960)
diff --git a/docusaurus/docs/Angular/services/ChatClientService.mdx b/docusaurus/docs/Angular/services/ChatClientService.mdx
deleted file mode 100644
index 35bed14a..00000000
--- a/docusaurus/docs/Angular/services/ChatClientService.mdx
+++ /dev/null
@@ -1,187 +0,0 @@
-# ChatClientService
-
-The `ChatClient` service connects the user to the Stream chat.
-
-## Type parameters
-
-| Name | Type                                                              |
-| :--- | :---------------------------------------------------------------- |
-| `T`  | extends `DefaultStreamChatGenerics` = `DefaultStreamChatGenerics` |
-
-## Properties
-
-### appSettings$
-
-• **appSettings$**: `Observable`\<`undefined` \| `AppSettings`\>
-
-Emits the current [application settings](https://getstream.io/chat/docs/javascript/app_setting_overview/?language=javascript). Since getting the application settings is an expensive API call and we don't always need the result, this is not initialized by default, you need to call `getApplicationSettings` to load them.
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/chat-client.service.ts:49](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/chat-client.service.ts#L49)
-
----
-
-### chatClient
-
-• **chatClient**: `StreamChat`\<`T`\>
-
-The [StreamChat client](https://github.com/GetStream/stream-chat-js/blob/master/src/client.ts) instance. In general you shouldn't need to access the client, but it's there if you want to use it.
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/chat-client.service.ts:38](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/chat-client.service.ts#L38)
-
----
-
-### connectionState$
-
-• **connectionState$**: `Observable`\<`"offline"` \| `"online"`\>
-
-Emits the current connection state of the user (`online` or `offline`)
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/chat-client.service.ts:53](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/chat-client.service.ts#L53)
-
----
-
-### events$
-
-• **events$**: `Observable`\<`ClientEvent`\<`T`\>\>
-
-Emits [`ClientEvent`](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/chat-client.service.ts) events. The platform documentation covers [the list of client, user presence and notification events](https://getstream.io/chat/docs/javascript/event_object/?language=javascript).
-:::important
-For performance reasons this Observable operates outside of the Angular change detection zone. If you subscribe to it, you need to manually reenter Angular's change detection zone, our [Change detection guide](../concepts/change-detection.mdx) explains this in detail.
-:::
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/chat-client.service.ts:45](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/chat-client.service.ts#L45)
-
----
-
-### pendingInvites$
-
-• **pendingInvites$**: `Observable`\<`Channel`\<`T`\>[]\>
-
-Emits the list of pending invites of the user. It emits every pending invitation during initialization and then extends the list when a new invite is received. More information can be found in the [channel invitations](../code-examples/channel-invites.mdx) guide.
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/chat-client.service.ts:57](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/chat-client.service.ts#L57)
-
----
-
-### user$
-
-• **user$**: `Observable`\<`undefined` \| `OwnUserResponse`\<`T`\> \| `UserResponse`\<`T`\>\>
-
-Emits the current chat user
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/chat-client.service.ts:61](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/chat-client.service.ts#L61)
-
-## Methods
-
-### autocompleteUsers
-
-▸ **autocompleteUsers**(`searchTerm`): `Promise`\<`UserResponse`\<`T`\>[]\>
-
-Searches for users in the application that have ID or name matching the provided search term
-
-#### Parameters
-
-| Name         | Type     |
-| :----------- | :------- |
-| `searchTerm` | `string` |
-
-#### Returns
-
-`Promise`\<`UserResponse`\<`T`\>[]\>
-
-The users matching the search
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/chat-client.service.ts:226](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/chat-client.service.ts#L226)
-
----
-
-### disconnectUser
-
-▸ **disconnectUser**(): `Promise`\<`void`\>
-
-Disconnects the current user, and closes the WebSocket connection. Useful when disconnecting a chat user, use in combination with [`reset`](./ChannelService.mdx/#reset).
-
-#### Returns
-
-`Promise`\<`void`\>
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/chat-client.service.ts:188](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/chat-client.service.ts#L188)
-
----
-
-### flagMessage
-
-▸ **flagMessage**(`messageId`): `Promise`\<`void`\>
-
-Flag the message with the given ID. If you want to know [more about flags](https://getstream.io/chat/docs/javascript/moderation/?language=javascript) check out the platform documentation.
-
-#### Parameters
-
-| Name        | Type     |
-| :---------- | :------- |
-| `messageId` | `string` |
-
-#### Returns
-
-`Promise`\<`void`\>
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/chat-client.service.ts:217](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/chat-client.service.ts#L217)
-
----
-
-### getAppSettings
-
-▸ **getAppSettings**(): `Promise`\<`void`\>
-
-Loads the current [application settings](https://getstream.io/chat/docs/javascript/app_setting_overview/?language=javascript), if the application settings have already been loaded, it does nothing.
-
-#### Returns
-
-`Promise`\<`void`\>
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/chat-client.service.ts:198](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/chat-client.service.ts#L198)
-
----
-
-### init
-
-▸ **init**(`apiKey`, `userOrId`, `userTokenOrProvider`, `clientOptions?`): `ConnectAPIResponse`\<`T`\>
-
-Creates a [`StreamChat`](https://github.com/GetStream/stream-chat-js/blob/668b3e5521339f4e14fc657834531b4c8bf8176b/src/client.ts#L124) instance using the provided `apiKey`, and connects a user with the given meta data and token. More info about [connecting users](https://getstream.io/chat/docs/javascript/init_and_users/?language=javascript) can be found in the platform documentation.
-
-#### Parameters
-
-| Name                  | Type                                                                               | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
-| :-------------------- | :--------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `apiKey`              | `string`                                                                           |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
-| `userOrId`            | `undefined` \| `string` \| `OwnUserResponse`\<`T`\> \| `UserResponse`\<`T`\>       | you can emit this for anonymous logins                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
-| `userTokenOrProvider` | `TokenOrProvider`                                                                  | You can provide:<ul> <li> a token, </li> <li> a token provider, a method that returns `Promise<string>`, which can be called when the previous token expires (recommended setup for production applications)</li> <li> the keyword 'guest' to connect as [guest user](https://getstream.io/chat/docs/javascript/authless_users/?language=javascript#guest-users) </li> <li> the keyword 'anonymous' to connect as [anonymous user](https://getstream.io/chat/docs/javascript/authless_users/?language=javascript#anonymous-users) </li> </ul> |
-| `clientOptions?`      | `AxiosRequestConfig`\<`any`\> & {} & \{ `trackPendingChannelInvites?`: `boolean` } | Setting to provide to the Stream client instance                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
-
-#### Returns
-
-`ConnectAPIResponse`\<`T`\>
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/chat-client.service.ts:98](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/chat-client.service.ts#L98)
diff --git a/docusaurus/docs/Angular/services/CustomTemplatesService.mdx b/docusaurus/docs/Angular/services/CustomTemplatesService.mdx
deleted file mode 100644
index 62b08685..00000000
--- a/docusaurus/docs/Angular/services/CustomTemplatesService.mdx
+++ /dev/null
@@ -1,539 +0,0 @@
-# CustomTemplatesService
-
-A central location for registering your custom templates to override parts of the chat application.
-
-For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
-
-You can find the type definitions of the context that is provided for each template [on GitHub](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angu)
-
-## Type parameters
-
-| Name | Type                                                              |
-| :--- | :---------------------------------------------------------------- |
-| `T`  | extends `DefaultStreamChatGenerics` = `DefaultStreamChatGenerics` |
-
-## Properties
-
-### attachmentActionsTemplate$
-
-• **attachmentActionsTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`AttachmentContext`\>\>
-
-The template that can be used to override how attachment actions are displayed inside the [attachment list](../components/AttachmentListComponent.mdx)
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:278](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L278)
-
----
-
-### attachmentListTemplate$
-
-• **attachmentListTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`AttachmentListContext`\>\>
-
-The template used to display attachments of a [message](../components/MessageComponent.mdx) (instead of the [default attachment list](../components/AttachmentListComponent.mdx))
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:111](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L111)
-
----
-
-### attachmentPreviewListTemplate$
-
-• **attachmentPreviewListTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`AttachmentPreviewListContext`\>\>
-
-The template used to display attachments in the [message input](../components/MessageInputComponent.mdx) component (instead of the [default attachment preview](../components/AttachmentPreviewListComponent.mdx))
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:118](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L118)
-
----
-
-### avatarTemplate$
-
-• **avatarTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`AvatarContext`\>\>
-
-The template used to display avatars for channels and users (instead of the [default avatar](../components/AvatarComponent.mdx))
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:125](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L125)
-
----
-
-### cardAttachmentTemplate$
-
-• **cardAttachmentTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`AttachmentContext`\>\>
-
-The template that can be used to override how a card attachment is displayed inside the [attachment list](../components/AttachmentListComponent.mdx)
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:272](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L272)
-
----
-
-### channelActionsTemplate$
-
-• **channelActionsTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`ChannelActionsContext`\<`DefaultStreamChatGenerics`\>\>\>
-
-The template for channel actions displayed in the [channel header](../components/ChannelHeaderComponent.mdx) (by default no channel action is displayed)
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:104](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L104)
-
----
-
-### channelHeaderInfoTemplate$
-
-• **channelHeaderInfoTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`ChannelHeaderInfoContext`\<`DefaultStreamChatGenerics`\>\>\>
-
-The template used to display additional information about a channel under the channel name inside the [channel header component](../components/ChannelHeaderComponent.mdx)
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:229](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L229)
-
----
-
-### channelPreviewInfoTemplate$
-
-• **channelPreviewInfoTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`ChannelPreviewInfoContext`\<`DefaultStreamChatGenerics`\>\>\>
-
-Template used to display the channel information inside the [channel list item](../components/ChannelPreviewComponent.mdx)
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:331](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L331)
-
----
-
-### channelPreviewTemplate$
-
-• **channelPreviewTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`ChannelPreviewContext`\<`DefaultStreamChatGenerics`\>\>\>
-
-Template used to display an item in the [channel list](../components/ChannelListComponent.mdx) (instead of the default [channal list item](../components/ChannelPreviewComponent.mdx))
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:69](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L69)
-
----
-
-### commandAutocompleteItemTemplate$
-
-• **commandAutocompleteItemTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`CommandAutocompleteListItemContext`\>\>
-
-The autocomplete list item template for commands (used in the [`AutocompleteTextareaComponent`](../components/AutocompleteTextareaComponent.mdx))
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:62](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L62)
-
----
-
-### customAttachmentListTemplate$
-
-• **customAttachmentListTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`CustomAttachmentListContext`\<`DefaultStreamChatGenerics`\>\>\>
-
-The template used to display custom attachments in the [message component](../../components/MessageComponent.mdx)
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:343](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L343)
-
----
-
-### customAttachmentPreviewListTemplate$
-
-• **customAttachmentPreviewListTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`CustomAttachmentPreviewListContext`\<`DefaultStreamChatGenerics`\>\>\>
-
-The template used to display custom attachment previews in the [message input component](../../components/MessageInputComponent.mdx)
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:337](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L337)
-
----
-
-### customAttachmentUploadTemplate$
-
-• **customAttachmentUploadTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`CustomAttachmentUploadContext`\>\>
-
-The template used for displaying file upload/attachment selector inside the [message input](../components/MessageInputComponent.mdx)
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:236](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L236)
-
----
-
-### customMessageMetadataTemplate$
-
-• **customMessageMetadataTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`CustomMetadataContext`\<`T`\>\>\>
-
-Template to display custom metadata inside [message component](../components/MessageComponent.mdx)
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:222](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L222)
-
----
-
-### dateSeparatorTemplate$
-
-• **dateSeparatorTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`DateSeparatorContext`\>\>
-
-The template used to display the date separator inside the [message list](../components/MessageListComponent.mdx)
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:290](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L290)
-
----
-
-### deliveredStatusTemplate$
-
-• **deliveredStatusTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`DeliveredStatusContext`\>\>
-
-The template used for displaying the delivered state of the message inside the [message component](../components/MessageComponent.mdx)
-
-Displayed for the last message sent by the current user, if the message isn't yet read by anyone
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:197](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L197)
-
----
-
-### emojiPickerTemplate$
-
-• **emojiPickerTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`EmojiPickerContext`\>\>
-
-The template for [emoji picker](../code-examples/emoji-picker.mdx)
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:83](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L83)
-
----
-
-### emptyMainMessageListPlaceholder$
-
-• **emptyMainMessageListPlaceholder$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`void`\>\>
-
-The template to show if the main message list is empty
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:312](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L312)
-
----
-
-### emptyThreadMessageListPlaceholder$
-
-• **emptyThreadMessageListPlaceholder$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`void`\>\>
-
-The template to show if the thread message list is empty
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:318](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L318)
-
----
-
-### fileAttachmentTemplate$
-
-• **fileAttachmentTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`AttachmentContext`\>\>
-
-The template that can be used to override how a file attachment is displayed inside the [attachment list](../components/AttachmentListComponent.mdx)
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:266](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L266)
-
----
-
-### galleryAttachmentTemplate$
-
-• **galleryAttachmentTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`AttachmentContext`\>\>
-
-The template that can be used to override how image gallery is displayed inside the [attachment list](../components/AttachmentListComponent.mdx)
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:260](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L260)
-
----
-
-### iconTemplate$
-
-• **iconTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`IconContext`\>\>
-
-Template for displaying icons (instead of the [default icon component](../components/IconComponent.mdx))
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:132](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L132)
-
----
-
-### imageAttachmentTemplate$
-
-• **imageAttachmentTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`AttachmentContext`\>\>
-
-The template that can be used to override how a single image attachment is displayed inside the [attachment list](../components/AttachmentListComponent.mdx)
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:242](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L242)
-
----
-
-### loadingIndicatorTemplate$
-
-• **loadingIndicatorTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`void`\>\>
-
-Template for displaying the loading indicator (instead of the [default loading indicator](../components/LoadingIndicatorComponent.mdx))
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:139](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L139)
-
----
-
-### mentionAutocompleteItemTemplate$
-
-• **mentionAutocompleteItemTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`MentionAutcompleteListItemContext`\>\>
-
-The autocomplete list item template for mentioning users (used in the [`AutocompleteTextareaComponent`](../components/AutocompleteTextareaComponent.mdx))
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:56](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L56)
-
----
-
-### mentionTemplate$
-
-• **mentionTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`MentionTemplateContext`\>\>
-
-The template used for displaying a [mention inside a message](../code-examples/mention-actions.mdx)
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:76](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L76)
-
----
-
-### messageActionsBoxItemTemplate$
-
-• **messageActionsBoxItemTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`MessageActionBoxItemContext`\<`DefaultStreamChatGenerics`\>\>\>
-
-The template used for displaying an item in the [message actions box](../components/MessageActionsBoxComponent.mdx)
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:153](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L153)
-
----
-
-### messageActionsBoxTemplate$
-
-• **messageActionsBoxTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`MessageActionsBoxContext`\<`DefaultStreamChatGenerics`\>\>\>
-
-Template for displaying the message actions box (instead of the [default message actions box](../components/MessageActionsBoxComponent.mdx))
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:146](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L146)
-
----
-
-### messageBouncePromptTemplate$
-
-• **messageBouncePromptTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`void`\>\>
-
-The template used to display the [message bounce prompt](../components/MessageBouncePromptComponent.mdx)
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:324](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L324)
-
----
-
-### messageReactionsSelectorTemplate$
-
-• **messageReactionsSelectorTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`MessageReactionsSelectorContext`\>\>
-
-The template used to display the reactions of a [message](../components/MessageComponent.mdx), and the selector to add a reaction to a message (instead of the [default message reactions component](../components/MessageReactionsComponent.mdx))
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:167](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L167)
-
----
-
-### messageReactionsTemplate$
-
-• **messageReactionsTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`MessageReactionsContext`\>\>
-
-The template used to display the reactions of a [message](../components/MessageComponent.mdx), and the selector to add a reaction to a message (instead of the [default message reactions component](../components/MessageReactionsComponent.mdx))
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:160](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L160)
-
----
-
-### messageTemplate$
-
-• **messageTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`MessageContext`\>\>
-
-The template used to display a message in the [message list](../components/MessageListComponent.mdx) (instead of the [default message component](../components/MessageComponent.mdx))
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:97](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L97)
-
----
-
-### modalTemplate$
-
-• **modalTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`ModalContext`\>\>
-
-The template used to display a modal window (instead of the [default modal](../components/ModalComponent.mdx))
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:174](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L174)
-
----
-
-### newMessagesIndicatorTemplate$
-
-• **newMessagesIndicatorTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`UnreadMessagesIndicatorContext`\>\>
-
-The template used to display unread messages indicator inside the [message list](../components/MessageListComponent.mdx) when the channel is opened
-
-This UI element is used to separate unread messages from read messages
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:298](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L298)
-
----
-
-### newMessagesNotificationTemplate$
-
-• **newMessagesNotificationTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`UnreadMessagesNotificationContext`\>\>
-
-The template used to display unread messages notification inside the [message list](../components/MessageListComponent.mdx) when the channel is opened
-
-Users can use this notification to jump to the first unread message when it's clicked
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:306](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L306)
-
----
-
-### notificationTemplate$
-
-• **notificationTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`NotificationContext`\>\>
-
-The template used to override the [default notification component](../components/NotificationComponent.mdx)
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:181](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L181)
-
----
-
-### readStatusTemplate$
-
-• **readStatusTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`ReadStatusContext`\>\>
-
-The template used for displaying the sent state of the message inside the [message component](../components/MessageComponent.mdx)
-
-Displayed for the last message sent by the current user, if the message is read at least by one user
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:215](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L215)
-
----
-
-### sendingStatusTemplate$
-
-• **sendingStatusTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`SendingStatusContext`\>\>
-
-The template used for displaying the sending state of the message inside the [message component](../components/MessageComponent.mdx)
-
-Displayed for the last message sent by the current user, if the message is currently being sent
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:206](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L206)
-
----
-
-### systemMessageTemplate$
-
-• **systemMessageTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`SystemMessageContext`\>\>
-
-The template used to display [system messages](https://getstream.io/chat/docs/javascript/silent_messages/?language=javascript&q=system) indise the [message component](../components/MessageComponent.mdx)
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:284](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L284)
-
----
-
-### threadHeaderTemplate$
-
-• **threadHeaderTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`ThreadHeaderContext`\>\>
-
-The template used for header of a [thread](../components/ThreadComponent.mdx)
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:188](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L188)
-
----
-
-### typingIndicatorTemplate$
-
-• **typingIndicatorTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`TypingIndicatorContext`\>\>
-
-The typing indicator template used in the [message list](../components/MessageListComponent.mdx)
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:90](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L90)
-
----
-
-### videoAttachmentTemplate$
-
-• **videoAttachmentTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`AttachmentContext`\>\>
-
-The template that can be used to override how a video attachment is displayed inside the [attachment list](../components/AttachmentListComponent.mdx)
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:254](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L254)
-
----
-
-### voiceRecordingAttachmentTemplate$
-
-• **voiceRecordingAttachmentTemplate$**: `BehaviorSubject`\<`undefined` \| `TemplateRef`\<`AttachmentContext`\>\>
-
-The template that can be used to override how a voice recording attachment is displayed inside the [attachment list](../components/AttachmentListComponent.mdx), by default the [voice recording component](../components/VoiceRecordingComponent.mdx) is used
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/custom-templates.service.ts:248](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/custom-templates.service.ts#L248)
diff --git a/docusaurus/docs/Angular/services/DateParserService.mdx b/docusaurus/docs/Angular/services/DateParserService.mdx
deleted file mode 100644
index e99035b4..00000000
--- a/docusaurus/docs/Angular/services/DateParserService.mdx
+++ /dev/null
@@ -1,153 +0,0 @@
-# DateParserService
-
-The `DateParserService` parses dates into user-friendly string representations.
-
-## Properties
-
-### customDateParser
-
-• `Optional` **customDateParser**: (`date`: `Date`) => `string`
-
-Custom parser to override `parseDate`
-
-#### Type declaration
-
-▸ (`date`): `string`
-
-##### Parameters
-
-| Name   | Type   |
-| :----- | :----- |
-| `date` | `Date` |
-
-##### Returns
-
-`string`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/date-parser.service.ts:18](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/date-parser.service.ts#L18)
-
----
-
-### customDateTimeParser
-
-• `Optional` **customDateTimeParser**: (`date`: `Date`) => `string`
-
-Custom parser to override `parseDateTime`
-
-#### Type declaration
-
-▸ (`date`): `string`
-
-##### Parameters
-
-| Name   | Type   |
-| :----- | :----- |
-| `date` | `Date` |
-
-##### Returns
-
-`string`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/date-parser.service.ts:22](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/date-parser.service.ts#L22)
-
----
-
-### customTimeParser
-
-• `Optional` **customTimeParser**: (`date`: `Date`) => `string`
-
-Custom parser to override `parseTime`
-
-#### Type declaration
-
-▸ (`date`): `string`
-
-##### Parameters
-
-| Name   | Type   |
-| :----- | :----- |
-| `date` | `Date` |
-
-##### Returns
-
-`string`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/date-parser.service.ts:14](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/date-parser.service.ts#L14)
-
-## Methods
-
-### parseDate
-
-▸ **parseDate**(`date`): `string`
-
-Return a user-friendly string representation of the date (year, month and date)
-
-#### Parameters
-
-| Name   | Type   |
-| :----- | :----- |
-| `date` | `Date` |
-
-#### Returns
-
-`string`
-
-The parsed date
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/date-parser.service.ts:43](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/date-parser.service.ts#L43)
-
----
-
-### parseDateTime
-
-▸ **parseDateTime**(`date`): `string`
-
-Return a user-friendly string representation of the date and time
-
-#### Parameters
-
-| Name   | Type   |
-| :----- | :----- |
-| `date` | `Date` |
-
-#### Returns
-
-`string`
-
-The parsed date
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/date-parser.service.ts:55](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/date-parser.service.ts#L55)
-
----
-
-### parseTime
-
-▸ **parseTime**(`date`): `string`
-
-Return a user-friendly string representation of the time
-
-#### Parameters
-
-| Name   | Type   |
-| :----- | :----- |
-| `date` | `Date` |
-
-#### Returns
-
-`string`
-
-The parsed time
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/date-parser.service.ts:31](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/date-parser.service.ts#L31)
diff --git a/docusaurus/docs/Angular/services/EmojiInputService.mdx b/docusaurus/docs/Angular/services/EmojiInputService.mdx
deleted file mode 100644
index fb893a9b..00000000
--- a/docusaurus/docs/Angular/services/EmojiInputService.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
-# EmojiInputService
-
-If you have an emoji picker in your application, you can propagate the selected emoji to the textarea using this service, more info can be found in [custom emoji picker guide](../code-examples/emoji-picker.mdx)
-
-## Properties
-
-### emojiInput$
-
-• **emojiInput$**: `Subject`<`string`\>
-
-If you have an emoji picker in your application, you can propagate the selected emoji to the textarea using this Subject, more info can be found in [custom emoji picker guide](../code-examples/emoji-picker.mdx)
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-input/emoji-input.service.ts:14](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-input/emoji-input.service.ts#L14)
diff --git a/docusaurus/docs/Angular/services/MessageActionsService.mdx b/docusaurus/docs/Angular/services/MessageActionsService.mdx
deleted file mode 100644
index 1f7f6213..00000000
--- a/docusaurus/docs/Angular/services/MessageActionsService.mdx
+++ /dev/null
@@ -1,96 +0,0 @@
-# MessageActionsService
-
-The message actions service provides customization options for the [message actions](../../components/MessageActionsBoxComponent)
-
-## Type parameters
-
-| Name | Type                                                              |
-| :--- | :---------------------------------------------------------------- |
-| `T`  | extends `DefaultStreamChatGenerics` = `DefaultStreamChatGenerics` |
-
-## Properties
-
-### customActionClickHandler
-
-• `Optional` **customActionClickHandler**: (`details`: `MessageActionsClickDetails`\<`T`\>) => `void`
-
-By default the [`MessageComponent`](../../components/MessageComponent) will display the [`MessageActionsBoxComponent`](../../components/MessageActionsBoxComponent). You can override that behavior by providing your own event handler.
-
-#### Type declaration
-
-▸ (`details`): `void`
-
-##### Parameters
-
-| Name      | Type                                |
-| :-------- | :---------------------------------- |
-| `details` | `MessageActionsClickDetails`\<`T`\> |
-
-##### Returns
-
-`void`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-actions.service.ts:188](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-actions.service.ts#L188)
-
----
-
-### customActions$
-
-• **customActions$**: `BehaviorSubject`\<`CustomMessageActionItem`\<`DefaultStreamChatGenerics`\>[]\>
-
-You can pass your own custom actions that will be displayed inside the built-in message actions component
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-actions.service.ts:184](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-actions.service.ts#L184)
-
----
-
-### defaultActions
-
-• `Readonly` **defaultActions**: (`MessageActionItem`\<`T`\> \| `MessageReactionActionItem`\<`T`\>)[]
-
-Default actions - these are the actions that are handled by the built-in component
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-actions.service.ts:28](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-actions.service.ts#L28)
-
----
-
-### messageToEdit$
-
-• **messageToEdit$**: `BehaviorSubject`\<`undefined` \| `StreamMessage`\<`T`\>\>
-
-The built-in components will handle changes to this observable.
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-actions.service.ts:180](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-actions.service.ts#L180)
-
-## Methods
-
-### getAuthorizedMessageActionsCount
-
-▸ **getAuthorizedMessageActionsCount**(`message`, `enabledActions`): `number`
-
-This method returns how many authorized actions are available to the given message
-
-#### Parameters
-
-| Name             | Type                   |
-| :--------------- | :--------------------- |
-| `message`        | `StreamMessage`\<`T`\> |
-| `enabledActions` | `string`[]             |
-
-#### Returns
-
-`number`
-
-the count
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-actions.service.ts:227](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-actions.service.ts#L227)
diff --git a/docusaurus/docs/Angular/services/MessageInputConfigService.mdx b/docusaurus/docs/Angular/services/MessageInputConfigService.mdx
deleted file mode 100644
index df302759..00000000
--- a/docusaurus/docs/Angular/services/MessageInputConfigService.mdx
+++ /dev/null
@@ -1,111 +0,0 @@
-# MessageInputConfigService
-
-The `MessageInputConfigService` is used to keep a consistent configuration among the different [`MessageInput`](../components/MessageInputComponent.mdx) components if your UI has more than one input component.
-
-## Properties
-
-### areMentionsEnabled
-
-• **areMentionsEnabled**: `undefined` | `boolean` = `true`
-
-If true, users can mention other users in messages. You also [need to use the `AutocompleteTextarea`](../concepts/opt-in-architecture.mdx) for this feature to work.
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts:18](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts#L18)
-
----
-
-### customPasteEventHandler
-
-• `Optional` **customPasteEventHandler**: (`event`: `ClipboardEvent`, `inputComponent`: `MessageInputComponent`) => `void`
-
-Override the message input's default event handler for [paste events](https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event)
-
-The event handler will receive the event object, and the [message input component](../../components/MessageInputComponent).
-
-You can use the public API of the message input component to update the composer. Typically you want to update the message text and/or attachments, this is how you can do these:
-
-- Change message text: `inputComponent.textareaValue = '<new value>'`
-- Upload file or image attachments: `inputComponent.attachmentService.filesSelected(<files>)`
-- Upload custom attachments: `inputComponent.attachmentService.customAttachments$.next(<custom attachments>)`
-
-#### Type declaration
-
-▸ (`event`, `inputComponent`): `void`
-
-##### Parameters
-
-| Name             | Type                    |
-| :--------------- | :---------------------- |
-| `event`          | `ClipboardEvent`        |
-| `inputComponent` | `MessageInputComponent` |
-
-##### Returns
-
-`void`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts:46](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts#L46)
-
----
-
-### inputMode
-
-• **inputMode**: `"mobile"` \| `"desktop"` = `'desktop'`
-
-In `desktop` mode the `Enter` key will trigger message sending, in `mobile` mode the `Enter` key will insert a new line to the message input.
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts:30](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts#L30)
-
----
-
-### isFileUploadEnabled
-
-• **isFileUploadEnabled**: `undefined` \| `boolean` = `true`
-
-If file upload is enabled, the user can open a file selector from the input. Please note that the user also needs to have the necessary [channel capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript).
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts:14](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts#L14)
-
----
-
-### isMultipleFileUploadEnabled
-
-• **isMultipleFileUploadEnabled**: `undefined` \| `boolean` = `true`
-
-If `false`, users can only upload one attachment per message
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts:22](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts#L22)
-
----
-
-### mentionScope
-
-• **mentionScope**: `undefined` \| `"channel"` \| `"application"` = `'channel'`
-
-The scope for user mentions, either members of the current channel of members of the application
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts:26](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts#L26)
-
----
-
-### sendVoiceRecordingImmediately
-
-• **sendVoiceRecordingImmediately**: `boolean` = `true`
-
-If `true` the recording will be sent as a message immediately after the recording is completed.
-If `false`, the recording will added to the attachment preview, and users can continue composing the message.
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts:35](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts#L35)
diff --git a/docusaurus/docs/Angular/services/MessageReactionsService.mdx b/docusaurus/docs/Angular/services/MessageReactionsService.mdx
deleted file mode 100644
index f33d3043..00000000
--- a/docusaurus/docs/Angular/services/MessageReactionsService.mdx
+++ /dev/null
@@ -1,105 +0,0 @@
-# MessageReactionsService
-
-The `MessageReactionsService` provides customization options to message [reactions](https://getstream.io/chat/docs/javascript/send_reaction/?language=javascript).
-
-## Properties
-
-### customReactionClickHandler
-
-• `Optional` **customReactionClickHandler**: (`details`: `MessageReactionClickDetails`) => `void`
-
-By default the [`MessageReactionsComponent`](../../components/MessageReactionsComponent) will display the reacting users when a reaction is clicked. You can override this with your own UI by providing a custom event handler.
-
-The event handler can retrieve all reactions of a message using the [`messageReactionsService.queryReactions()`](https://getstream.io/chat/docs/sdk/angular/services/MessageReactionsService/#queryreactions)
-
-#### Type declaration
-
-▸ (`details`): `void`
-
-##### Parameters
-
-| Name      | Type                          |
-| :-------- | :---------------------------- |
-| `details` | `MessageReactionClickDetails` |
-
-##### Returns
-
-`void`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-reactions.service.ts:32](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-reactions.service.ts#L32)
-
----
-
-### reactions$
-
-• **reactions$**: `BehaviorSubject`<{}\>
-
-The enabled [reactions](https://getstream.io/chat/docs/javascript/send_reaction/?language=javascript) and the associated emoji
-
-You can provide any string as a reaction. The emoji can be provided as a string, if you want to use custom images for reactions you have to provide a [custom reactions UI](../../services/CustomTemplatesService/#messagereactionstemplate)
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-reactions.service.ts:20](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-reactions.service.ts#L20)
-
-## Accessors
-
-### reactions
-
-• `get` **reactions**(): `Object`
-
-Get the currently enabled reactions
-
-#### Returns
-
-`Object`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-reactions.service.ts:49](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-reactions.service.ts#L49)
-
-• `set` **reactions**(`reactions`): `void`
-
-Sets the enabled reactions
-
-#### Parameters
-
-| Name        | Type     |
-| :---------- | :------- |
-| `reactions` | `Object` |
-
-#### Returns
-
-`void`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-reactions.service.ts:42](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-reactions.service.ts#L42)
-
-## Methods
-
-### queryReactions
-
-▸ **queryReactions**(`messageId`, `type`, `next?`): `Promise`\<`QueryReactionsAPIResponse`\<`DefaultStreamChatGenerics`\>\>
-
-Query reactions of a specific message, more info in the [API documentation](https://getstream.io/chat/docs/javascript/send_reaction/?language=javascript#query-reactions)
-
-#### Parameters
-
-| Name        | Type     |
-| :---------- | :------- |
-| `messageId` | `string` |
-| `type`      | `string` |
-| `next?`     | `string` |
-
-#### Returns
-
-`Promise`\<`QueryReactionsAPIResponse`\<`DefaultStreamChatGenerics`\>\>
-
-the reactions and the cursor for the next/prev pages
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-reactions.service.ts:60](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-reactions.service.ts#L60)
diff --git a/docusaurus/docs/Angular/services/MessageService.mdx b/docusaurus/docs/Angular/services/MessageService.mdx
deleted file mode 100644
index 30f03c67..00000000
--- a/docusaurus/docs/Angular/services/MessageService.mdx
+++ /dev/null
@@ -1,106 +0,0 @@
-# MessageService
-
-The message service contains configuration options related to displaying the message content
-
-## Type parameters
-
-| Name | Type                                                              |
-| :--- | :---------------------------------------------------------------- |
-| `T`  | extends `DefaultStreamChatGenerics` = `DefaultStreamChatGenerics` |
-
-## Properties
-
-### customLinkRenderer
-
-• `Optional` **customLinkRenderer**: (`url`: `string`) => `string`
-
-You can provide a custom method to display links
-
-#### Type declaration
-
-▸ (`url`): `string`
-
-##### Parameters
-
-| Name  | Type     | Description                      |
-| :---- | :------- | :------------------------------- |
-| `url` | `string` | the url the link should refer to |
-
-##### Returns
-
-`string`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message.service.ts:28](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message.service.ts#L28)
-
----
-
-### displayAs
-
-• **displayAs**: `"html"` \| `"text"` = `'text'`
-
-Decides if the message content should be formatted as text or HTML
-
-If you display messages as text the following parts are still be displayed as HTML:
-
-- user mentions -> you can customize this with your own template using the [`customTemplatesService.mentionTemplate$`](https://getstream.io/chat/docs/sdk/angular/services/CustomTemplatesService/#mentiontemplate)
-- links -> you can customize this by providing you own [`customLinkRenderer`](#customlinkrenderer) method
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message.service.ts:21](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message.service.ts#L21)
-
----
-
-### filterCustomAttachment
-
-• `Optional` **filterCustomAttachment**: (`attachment`: `Attachment`\<`T`\>) => `boolean`
-
-The SDK supports the following attachment types: `image`, `file`, `giphy`, `video` and `voiceRecording` attachments.
-
-All other types are treated as custom attachments, however it's possible to override this logic, and provide a custom filtering method which can be used to treat some built-in attachments as custom.
-
-Provide a method which retruns `true` if an attachment should be considered as custom.
-
-#### Type declaration
-
-▸ (`attachment`): `boolean`
-
-##### Parameters
-
-| Name         | Type                |
-| :----------- | :------------------ |
-| `attachment` | `Attachment`\<`T`\> |
-
-##### Returns
-
-`boolean`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message.service.ts:36](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message.service.ts#L36)
-
-## Methods
-
-### isCustomAttachment
-
-▸ **isCustomAttachment**(`attachment`): `boolean`
-
-Tells if an attachment is custom (you need to provide your own template to display them) or built-in (the SDK supports it out-of-the-box)
-
-#### Parameters
-
-| Name         | Type                |
-| :----------- | :------------------ |
-| `attachment` | `Attachment`\<`T`\> |
-
-#### Returns
-
-`boolean`
-
-`true` if the attachment is custom
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message.service.ts:45](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message.service.ts#L45)
diff --git a/docusaurus/docs/Angular/services/NotificationService.mdx b/docusaurus/docs/Angular/services/NotificationService.mdx
deleted file mode 100644
index 7792ef6a..00000000
--- a/docusaurus/docs/Angular/services/NotificationService.mdx
+++ /dev/null
@@ -1,94 +0,0 @@
-# NotificationService
-
-The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](../components/NotificationListComponent.mdx) component displays the currently active notifications.
-
-## Properties
-
-### notifications$
-
-• **notifications$**: `Observable`<`NotificationPayload`\<`object`\>[]\>
-
-Emits the currently active [notifications](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/notification.service.ts).
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/notification.service.ts:15](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/notification.service.ts#L15)
-
-## Methods
-
-### addPermanentNotification
-
-▸ **addPermanentNotification**\<`T`\>(`content`, `type?`, `translateParams?`, `templateContext?`): () => `void`
-
-Displays a notification, that will be visible until it's removed.
-
-#### Type parameters
-
-| Name | Type     |
-| :--- | :------- |
-| `T`  | `object` |
-
-#### Parameters
-
-| Name               | Type                             | Default value | Description                                                            |
-| :----------------- | :------------------------------- | :------------ | :--------------------------------------------------------------------- |
-| `content`          | `string` \| `TemplateRef`\<`T`\> | `undefined`   | The text of the notification or the HTML template for the notification |
-| `type`             | `NotificationType`               | `'error'`     | The type of the notification                                           |
-| `translateParams?` | `object`                         | `undefined`   | Translation parameters for the `content` (for text notifications)      |
-| `templateContext?` | `T`                              | `undefined`   | The input of the notification template (for HTML notifications)        |
-
-#### Returns
-
-`fn`
-
-A method to clear the notification.
-
-▸ (): `void`
-
-##### Returns
-
-`void`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/notification.service.ts:68](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/notification.service.ts#L68)
-
----
-
-### addTemporaryNotification
-
-▸ **addTemporaryNotification**\<`T`\>(`content`, `type?`, `timeout?`, `translateParams?`, `templateContext?`): () => `void`
-
-Displays a notification for the given amount of time.
-
-#### Type parameters
-
-| Name |
-| :--- |
-| `T`  |
-
-#### Parameters
-
-| Name               | Type                             | Default value | Description                                                            |
-| :----------------- | :------------------------------- | :------------ | :--------------------------------------------------------------------- |
-| `content`          | `string` \| `TemplateRef`\<`T`\> | `undefined`   | The text of the notification or the HTML template for the notification |
-| `type`             | `NotificationType`               | `'error'`     | The type of the notification                                           |
-| `timeout`          | `number`                         | `5000`        | The number of milliseconds while the notification should be visible    |
-| `translateParams?` | `object`                         | `undefined`   | Translation parameters for the `content` (for text notifications)      |
-| `templateContext?` | `T`                              | `undefined`   | The input of the notification template (for HTML notifications)        |
-
-#### Returns
-
-`fn`
-
-A method to clear the notification (before the timeout).
-
-▸ (): `void`
-
-##### Returns
-
-`void`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/notification.service.ts:31](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/notification.service.ts#L31)
diff --git a/docusaurus/docs/Angular/services/StreamI18nService.mdx b/docusaurus/docs/Angular/services/StreamI18nService.mdx
deleted file mode 100644
index 00909851..00000000
--- a/docusaurus/docs/Angular/services/StreamI18nService.mdx
+++ /dev/null
@@ -1,26 +0,0 @@
-# StreamI18nService
-
-The `StreamI18nService` can be used to customize the labels of the chat UI. Our [translation guide](../concepts/translation.mdx) covers this topic in detail.
-
-## Methods
-
-### setTranslation
-
-▸ **setTranslation**(`lang?`, `overrides?`): `void`
-
-Registers the translation to the [ngx-translate](https://github.com/ngx-translate/core) TranslateService.
-
-#### Parameters
-
-| Name         | Type     | Default value | Description                                                                       |
-| :----------- | :------- | :------------ | :-------------------------------------------------------------------------------- |
-| `lang`       | `string` | `'en'`        | The language key to register the translation to                                   |
-| `overrides?` | `Object` | `undefined`   | An object which keys are translation keys, and the values are custom translations |
-
-#### Returns
-
-`void`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/stream-i18n.service.ts:19](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/stream-i18n.service.ts#L19)
diff --git a/docusaurus/docs/Angular/services/ThemeService.mdx b/docusaurus/docs/Angular/services/ThemeService.mdx
deleted file mode 100644
index 28cdf083..00000000
--- a/docusaurus/docs/Angular/services/ThemeService.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
-# ThemeService
-
-The `ThemeService` can be used to change the theme of the chat UI and to customize the theme. Our [theming guide](../theming/introduction.mdx) gives a complete overview about the topic.
-
-## Properties
-
-### theme$
-
-• **theme$**: `BehaviorSubject`<`string`\>
-
-A Subject that can be used to get or set the currently active theme. By default light and dark themes are supported.
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/theme.service.ts:14](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/theme.service.ts#L14)
diff --git a/docusaurus/docs/Angular/services/TranscoderService.mdx b/docusaurus/docs/Angular/services/TranscoderService.mdx
deleted file mode 100644
index 6863975f..00000000
--- a/docusaurus/docs/Angular/services/TranscoderService.mdx
+++ /dev/null
@@ -1,29 +0,0 @@
-# TranscoderService
-
-The `TranscoderService` is used to transcibe audio recording to a format that's supported by all major browsers. The SDK uses this to create voice messages.
-
-If you want to use your own transcoder you can provide a `customTranscoder`.
-
-## Methods
-
-### transcode
-
-▸ **transcode**(`blob`): `Promise`<`Blob`\>
-
-The default transcoder will leave audio/mp4 files as is, and transcode webm files to wav. If you want to customize this, you can provide your own transcoder using the `customTranscoder` field
-
-#### Parameters
-
-| Name   | Type   |
-| :----- | :----- |
-| `blob` | `Blob` |
-
-#### Returns
-
-`Promise`\<`Blob`\>
-
-the transcoded file
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/voice-recorder/transcoder.service.ts:63](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/voice-recorder/transcoder.service.ts#L63)
diff --git a/docusaurus/docs/Angular/services/TransliterationService.mdx b/docusaurus/docs/Angular/services/TransliterationService.mdx
deleted file mode 100644
index 1c017f81..00000000
--- a/docusaurus/docs/Angular/services/TransliterationService.mdx
+++ /dev/null
@@ -1,25 +0,0 @@
-# TransliterationService
-
-The `TransliterationService` wraps the [@sindresorhus/transliterate](https://www.npmjs.com/package/@sindresorhus/transliterate) library
-
-## Methods
-
-### transliterate
-
-▸ **transliterate**(`s`): `string`
-
-#### Parameters
-
-| Name | Type     | Description                     |
-| :--- | :------- | :------------------------------ |
-| `s`  | `string` | the string to be transliterated |
-
-#### Returns
-
-`string`
-
-the result of the transliteration
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/transliteration.service.ts:16](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/transliteration.service.ts#L16)
diff --git a/docusaurus/docs/Angular/services/VirtualizedListService.mdx b/docusaurus/docs/Angular/services/VirtualizedListService.mdx
deleted file mode 100644
index 364ce538..00000000
--- a/docusaurus/docs/Angular/services/VirtualizedListService.mdx
+++ /dev/null
@@ -1,85 +0,0 @@
-# VirtualizedListService
-
-The `VirtualizedListService` removes items from a list that are not currently displayed. This is a high-level overview of how it works:
-
-- Create a new instance for each list that needs virtualization
-- Input: Provide a reactive stream that emits all items in the list
-- Input: Provide a reactive stream that emit the current scroll position (top, middle or bottom)
-- Input: maximum number of items that are allowed in the list (in practice the service can make the virtualized list half this number, you should take this into account when choosing the value)
-- Output: The service will emit the current list of displayed items via the virtualized items reactive stream
-- For simplicity, the service won't track the height of the items, nor it needs an exact scroll location -> this is how removing items work:
-  - If scroll location is bottom/top items around the current bottom/top item will be emitted in the virtualized items stream
-  - If scroll location is middle, the service won't remove items, if new items are received, those will be appended to the virtualized list (this means that in theory the list can grow very big if a lot of new items are received while the user is scrolled somewhere, this is a trade-off for the simplicity of no height tracking)
-  - Since there is no height tracking, you should make sure to provide a maximum number that is big enough to fill the biggest expected screen size twice
-- If the user scrolls to the bottom/top and there are no more local items to show, the service will trigger a query to load more items
-  - Input: you should provide the page size to use, in order for the service to determine if loading is necessary
-
-The `VirtualizedMessageListService` provides an implementation for the message list component.
-
-## Type parameters
-
-| Name |
-| :--- |
-| `T`  |
-
-## Hierarchy
-
-- **`VirtualizedListService`**
-
-  ↳ [`VirtualizedMessageListService`](VirtualizedMessageListService.md)
-
-## Properties
-
-### queryState$
-
-• **queryState$**: `Observable`\<`VirtualizedListQueryState`\>
-
-The result of the last query used to load more items
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/virtualized-list.service.ts:46](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/virtualized-list.service.ts#L46)
-
----
-
-### virtualizedItems$
-
-• **virtualizedItems$**: `Observable`\<`T`[]\>
-
-The items that should be currently displayed, a subset of all items
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/virtualized-list.service.ts:42](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/virtualized-list.service.ts#L42)
-
-## Accessors
-
-### virtualizedItems
-
-• `get` **virtualizedItems**(): `T`[]
-
-The current value of virtualized items
-
-#### Returns
-
-`T`[]
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/virtualized-list.service.ts:355](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/virtualized-list.service.ts#L355)
-
-## Methods
-
-### dispose
-
-▸ **dispose**(): `void`
-
-Remove all subscriptions, call this once you're done using an instance of this service
-
-#### Returns
-
-`void`
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/virtualized-list.service.ts:362](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/virtualized-list.service.ts#L362)
diff --git a/docusaurus/docs/Angular/services/VirtualizedMessageListService.mdx b/docusaurus/docs/Angular/services/VirtualizedMessageListService.mdx
deleted file mode 100644
index 8444f90f..00000000
--- a/docusaurus/docs/Angular/services/VirtualizedMessageListService.mdx
+++ /dev/null
@@ -1,81 +0,0 @@
-# VirtualizedMessageListService
-
-The `VirtualizedMessageListService` removes messages from the message list that are currently not in view
-
-## Hierarchy
-
-- [`VirtualizedListService`](VirtualizedListService.md)<`StreamMessage`\>
-
-  ↳ **`VirtualizedMessageListService`**
-
-## Properties
-
-### queryState$
-
-• **queryState$**: `Observable`\<`VirtualizedListQueryState`\>
-
-The result of the last query used to load more items
-
-#### Inherited from
-
-[VirtualizedListService](VirtualizedListService.md).[queryState$](VirtualizedListService.md#querystate$)
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/virtualized-list.service.ts:46](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/virtualized-list.service.ts#L46)
-
----
-
-### virtualizedItems$
-
-• **virtualizedItems$**: `Observable`\<`StreamMessage`\<`DefaultStreamChatGenerics`\>[]\>
-
-The items that should be currently displayed, a subset of all items
-
-#### Inherited from
-
-[VirtualizedListService](VirtualizedListService.md).[virtualizedItems$](VirtualizedListService.md#virtualizeditems$)
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/virtualized-list.service.ts:42](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/virtualized-list.service.ts#L42)
-
-## Accessors
-
-### virtualizedItems
-
-• `get` **virtualizedItems**(): `T`[]
-
-The current value of virtualized items
-
-#### Returns
-
-`T`[]
-
-#### Inherited from
-
-VirtualizedListService.virtualizedItems
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/virtualized-list.service.ts:355](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/virtualized-list.service.ts#L355)
-
-## Methods
-
-### dispose
-
-▸ **dispose**(): `void`
-
-Remove all subscriptions, call this once you're done using an instance of this service
-
-#### Returns
-
-`void`
-
-#### Inherited from
-
-[VirtualizedListService](VirtualizedListService.md).[dispose](VirtualizedListService.md#dispose)
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/virtualized-list.service.ts:362](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/virtualized-list.service.ts#L362)
diff --git a/docusaurus/docs/Angular/services/VoiceRecorderService.mdx b/docusaurus/docs/Angular/services/VoiceRecorderService.mdx
deleted file mode 100644
index 79cb9f6e..00000000
--- a/docusaurus/docs/Angular/services/VoiceRecorderService.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
-# VoiceRecorderService
-
-The `VoiceRecorderService` provides a commincation outlet between the message input and voice recorder components.
-
-## Properties
-
-### isRecorderVisible$
-
-• **isRecorderVisible$**: `BehaviorSubject`<`boolean`\>
-
-Use this property to get/set if the recording component should be visible
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-input/voice-recorder.service.ts:15](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-input/voice-recorder.service.ts#L15)
-
----
-
-### recording$
-
-• **recording$**: `BehaviorSubject`\<`undefined` \| `AudioRecording`\>
-
-The audio recording that was created
-
-#### Defined in
-
-[projects/stream-chat-angular/src/lib/message-input/voice-recorder.service.ts:19](https://github.com/GetStream/stream-chat-angular/blob/917075731bcb0a273dd8c532453df1d45328c0f4/projects/stream-chat-angular/src/lib/message-input/voice-recorder.service.ts#L19)
diff --git a/docusaurus/docs/Angular/services/_category_.json b/docusaurus/docs/Angular/services/_category_.json
deleted file mode 100644
index 86e7c524..00000000
--- a/docusaurus/docs/Angular/services/_category_.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "label": "Services",
-  "position": 6
-}
diff --git a/docusaurus/docs/Angular/theming/SDKSpecific.jsx b/docusaurus/docs/Angular/theming/SDKSpecific.jsx
deleted file mode 100644
index ecac5236..00000000
--- a/docusaurus/docs/Angular/theming/SDKSpecific.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from "react";
-import BrowserOnly from "@docusaurus/BrowserOnly";
-
-const SDKSpecific = ({ children, name = "angular" }) => (
-  <BrowserOnly>
-    {() =>
-      window.location.pathname.includes(`/sdk/${name}`) ? children : null
-    }
-  </BrowserOnly>
-);
-
-export default SDKSpecific;
diff --git a/docusaurus/docs/Angular/theming/V2Warning.jsx b/docusaurus/docs/Angular/theming/V2Warning.jsx
deleted file mode 100644
index 4ac30f5f..00000000
--- a/docusaurus/docs/Angular/theming/V2Warning.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from "react";
-import Link from "@docusaurus/Link";
-
-const V2Warning = ({
-  introductionPath = "../themingv2",
-  themingAndCSSPath,
-}) => {
-  return (
-    <>
-      This part of the documentation refers to the new version of the theming
-      and customization system which won't work with the old system, please
-      refer to the <Link to={introductionPath}>theme-v2 documentation</Link> to
-      learn more about the new system or{" "}
-      <Link to={themingAndCSSPath}>CSS and Theming</Link> if you need
-      documentation for the old system (also known as v1 or version 1).
-    </>
-  );
-};
-
-export default V2Warning;
diff --git a/docusaurus/docs/Angular/theming/_category_.json b/docusaurus/docs/Angular/theming/_category_.json
deleted file mode 100644
index 90aab7f6..00000000
--- a/docusaurus/docs/Angular/theming/_category_.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "label": "Theming and CSS",
-  "position": 2
-}
diff --git a/docusaurus/docs/Angular/theming/component-variables.mdx b/docusaurus/docs/Angular/theming/component-variables.mdx
deleted file mode 100644
index e629202b..00000000
--- a/docusaurus/docs/Angular/theming/component-variables.mdx
+++ /dev/null
@@ -1,66 +0,0 @@
----
-id: component-variables
-sidebar_position: 3
-title: Component variables
-keywords: [v2, theme-v2, theming-v2, theming, component variables]
----
-
-import SDKSpecific from "./SDKSpecific";
-import V2Warning from "./V2Warning";
-
-<SDKSpecific name='react'>
-
-:::info
-
-<V2Warning themingAndCSSPath="../../customization/css_and_theming" />
-
-:::
-
-</SDKSpecific>
-
-CSS variables are the easiest way to customize the theme. The variables are organized into two layers:
-
-- Global
-- Component
-
-Global variables change the layout/look-and-feel of the whole chat UI, meanwhile component variables change only a part of it (for example message component).
-
-Component variables can be further grouped in the following ways:
-
-- **Theme variables** for changing text and background colors, borders and shadows
-- **Layout variables** defined for some components (but not all) to change the size of a specific part of a component
-
-You can find the list of components below:
-
-| Component name                            | Variables                                                                                                                                                                                                                                                                                              |
-| ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `AttachmentList`                          | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/AttachmentList/AttachmentList-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/AttachmentList/AttachmentList-layout.scss)                             |
-| `AttachmentPreviewList`                   | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-layout.scss) |
-| `Autocomplete`                            | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/Autocomplete/Autocomplete-theme.scss)                                                                                                                                                                        |
-| `Avatar`                                  | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/Avatar/Avatar-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/Avatar/Avatar-layout.scss)                                                             |
-| `Channel`                                 | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/Channel/Channel-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/Channel/Channel-layout.scss)                                                         |
-| `ChannelHeader`                           | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss)                                                                                                                                                                      |
-| `ChannelList`                             | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/ChannelList/ChannelList-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/ChannelList/ChannelList-layout.scss)                                         |
-| `ChannelPreview`                          | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/ChannelPreview/ChannelPreview-layout.scss)                             |
-| `ChannelSearch` (React SDK only)          | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss)                                                                                                                                                                      |
-| `CircleFAButton`                          | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/CircleFAButton/CircleFAButton-theme.scss)                                                                                                                                                                    |
-| `CTAButton`                               | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/CTAButton/CTAButton-theme.scss)                                                                                                                                                                              |
-| `EditMessageForm`                         | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/EditMessageForm/EditMessageForm-theme.scss)                                                                                                                                                                  |
-| `Icon` (Angular SDK only)                 | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/Icon/Icon-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/Icon/Icon-layout.scss)                                                                     |
-| `ImageCarousel` (Angular SDK only)        | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/ImageCarousel/ImageCarousel-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/ImageCarousel/ImageCarousel-layout.scss)                                 |
-| `LoadingIndicator`                        | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/LoadingIndicator/LoadingIndicator-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/LoadingIndicator/LoadingIndicator-layout.scss)                     |
-| `Message`                                 | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/Message/Message-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/Message/Message-layout.scss)                                                         |
-| `MessageActionsBox`                       | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/MessageActionsBox/MessageActionsBox-theme.scss)                                                                                                                                                              |
-| `MessageBouncePrompt`                     | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/MessageBouncePrompt/MessageBouncePrompt-theme.scss)                                                                                                                                                          |
-| `MessageInput`                            | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/MessageInput/MessageInput-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/MessageInput/MessageInput-layout.scss)                                     |
-| `MessageList`                             | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/MessageList/MessageList-theme.scss)                                                                                                                                                                          |
-| `MessageNotification` (React SDK only)    | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/MessageNotification/MessageNotification-theme.scss)                                                                                                                                                          |
-| `MessageReactions`                        | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/MessageReactions/MessageReactions-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/MessageReactions/MessageReactions-layout.scss)                     |
-| `MessageReactionsSelector`                | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/MessageReactionsSelector/MessageReactionsSelector-theme.scss)                                                                                                                                                |
-| `Modal`                                   | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/Modal/Modal-theme.scss), [layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/Modal/Modal-layout.scss)                                                                 |
-| `Notification`                            | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/Notification/Notification-theme.scss)                                                                                                                                                                        |
-| `NotificationList`                        | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/NotificationList/NotificationList-theme.scss)                                                                                                                                                                |
-| `Thread`                                  | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/Thread/Thread-theme.scss)                                                                                                                                                                                    |
-| `Tooltip`                                 | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/Tooltip/Tooltip-theme.scss)                                                                                                                                                                                  |
-| `TypingIndicator`                         | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/TypingIndicator/TypingIndicator-theme.scss)                                                                                                                                                                  |
-| `VirtualizedMessageList` (React SDK only) | [theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/VirtualizedMessageList/VirtualizedMessageList-theme.scss)                                                                                                                                                    |
diff --git a/docusaurus/docs/Angular/theming/global-variables.mdx b/docusaurus/docs/Angular/theming/global-variables.mdx
deleted file mode 100644
index fd206abd..00000000
--- a/docusaurus/docs/Angular/theming/global-variables.mdx
+++ /dev/null
@@ -1,34 +0,0 @@
----
-id: global-variables
-sidebar_position: 2
-title: Global variables
-keywords: [v2, theme-v2, theming-v2, theming, global variables]
----
-
-import SDKSpecific from "./SDKSpecific";
-import V2Warning from "./V2Warning";
-
-<SDKSpecific name='react'>
-
-:::info
-
-<V2Warning themingAndCSSPath="../../customization/css_and_theming" />
-
-:::
-
-</SDKSpecific>
-
-CSS variables are the easiest way to customize the theme. The variables are organized into two layers:
-
-- Global
-- Component
-
-Global variables change the layout/look-and-feel of the whole chat UI, meanwhile component variables change only a part of it (for example message component).
-
-Global variables can be grouped into the following categories:
-
-- **Theme**: colors, typography and border radiuses ([list of global theme variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/_global-theme-variables.scss))
-
-- **Layout**: spacing (padding and margin) and sizing ([list of global layout variables](https://github.com/GetStream/stream-chat-css/tree/v4.17.5/src/v2/styles/_global-layout-variables.scss))
-
-If you find that these variables are too high-level and you need more granular control, you also have the option to provide [component layer overrides](./component-variables.mdx).
diff --git a/docusaurus/docs/Angular/theming/introduction.mdx b/docusaurus/docs/Angular/theming/introduction.mdx
deleted file mode 100644
index 9f1cd1fa..00000000
--- a/docusaurus/docs/Angular/theming/introduction.mdx
+++ /dev/null
@@ -1,595 +0,0 @@
----
-id: themingv2
-sidebar_position: 1
-title: Introduction
-keywords: [v2, theme-v2, theming-v2, theme, theming, introduction]
----
-
-import SDKSpecific from "./SDKSpecific";
-import ChatUiScreenshot from "../assets/stream-chat-css-chat-ui-screenshot.png";
-import DarkUiScreenshot from "../assets/stream-chat-css-dark-ui-screenshot.png";
-import CustomDarkUiScreenshot from "../assets/stream-chat-css-custom-dark-theme-screenshot.png";
-import ChatUiThemeCustomizationScreenshot from "../assets/stream-chat-css-chat-ui-theme-customization-screenshot.png";
-import ChatUiLayoutScreenshot from "../assets/stream-chat-css-chat-ui-layout-screenshot.png";
-import CustomAvatarColorScreenshot from "../assets/stream-chat-css-custom-avatar-color-screenshot.png";
-import MessageScreenshot from "../assets/stream-chat-css-message-color-screenshot.png";
-import MessageCustomColorScreenshot from "../assets/stream-chat-css-message-color-customization-screenshot.png";
-import MessageCustomColor2Screenshot from "../assets/stream-chat-css-message-color-customization2-screenshot.png";
-import ChatUiSquareThemeScreenshot from "../assets/stream-chat-css-square-theme-screenshot.png";
-import ChatUiRtlScreenshot from "../assets/stream-chat-css-rtl-layout-screenshot.png";
-
-The SDK provides default CSS, which can be overridden by the integrators.
-
-## Importing the stylesheet
-
-If you're using SCSS:
-
-<SDKSpecific name="angular">
-
-```scss
-// stream-chat-angular@5
-@import "stream-chat-angular/src/assets/styles/scss/index.scss";
-
-// stream-chat-angular@4
-@import "stream-chat-angular/src/assets/styles/v2/scss/index.scss";
-```
-
-</SDKSpecific>
-
-<SDKSpecific name="react">
-
-```scss
-@import "~stream-chat-react/dist/scss/v2/index.scss";
-```
-
-</SDKSpecific>
-
-If you're using CSS:
-
-<SDKSpecific name="angular">
-
-```css
-// stream-chat-angular@5
-@import "stream-chat-angular/src/assets/styles/css/index.css";
-
-// stream-chat-angular@4
-@import "stream-chat-angular/src/assets/styles/v2/css/index.css";
-```
-
-</SDKSpecific>
-
-<SDKSpecific name="react">
-
-```css
-@import "~stream-chat-react/dist/css/v2/index.css";
-```
-
-</SDKSpecific>
-
-## Customization
-
-Our theming system has various customization options allowing for both smaller and large-scale UI changes. This document guides you through the different customization options.
-
-### CSS variables
-
-CSS variables are the easiest way to customize the theme. The variables are organized into two layers:
-
-- global
-- component
-
-#### Global variables
-
-You can use global variables to apply changes to the whole chat UI (as opposed to changing the design of individual components).
-
-The [full list of global variables](./global-variables.mdx) can be found in our global variables guide.
-
-Here is the default chat UI:
-
-<img src={ChatUiScreenshot} width="500" />
-
-Here is how you can customize global variables:
-
-<SDKSpecific name="react">
-
-```scss
-@import "~stream-chat-react/dist/scss/v2/index.scss";
-```
-
-</SDKSpecific>
-
-```scss
-.str-chat {
-  --str-chat__primary-color: #009688;
-  --str-chat__active-primary-color: #004d40;
-  --str-chat__surface-color: #f5f5f5;
-  --str-chat__secondary-surface-color: #fafafa;
-  --str-chat__primary-surface-color: #e0f2f1;
-  --str-chat__primary-surface-color-low-emphasis: #edf7f7;
-  --str-chat__border-radius-circle: 6px;
-}
-```
-
-Here is the result:
-
-<img src={ChatUiThemeCustomizationScreenshot} width="500" />
-
-<SDKSpecific name="angular">
-
-:::note
-The `str-chat` class is applied to the [channel list](../components/ChannelListComponent.mdx) and [channel](../components/ChannelComponent.mdx) component, all CSS variables are declared on this level, if you don't use those components in your chat application you'll have apply this class manually.
-:::
-
-</SDKSpecific>
-
-<SDKSpecific name="react">
-
-:::note
-The `str-chat` class is applied to the [`ChannelList`](../core-components/channel-list.mdx) and [`Channel`](../core-components/channel.mdx) components, all CSS variables are declared on this level.
-:::
-
-</SDKSpecific>
-
-#### Component variables
-
-You can use component layer variables to change the design of individual components. The [full list of component variables](./component-variables.mdx) can be found in our component variables guide.
-
-In the above example we set the avatar background color by setting the `--str-chat__primary-color` variable which also sets the color of other UI elements. If we want to change the background color only for the avatar component we can use the `--str-chat__avatar-background-color` variable:
-
-```scss
-.str-chat {
-  --str-chat__primary-color: #009688;
-  --str-chat__active-primary-color: #004d40;
-  --str-chat__surface-color: #f5f5f5;
-  --str-chat__secondary-surface-color: #fafafa;
-  --str-chat__primary-surface-color: #e0f2f1;
-  --str-chat__primary-surface-color-low-emphasis: #edf7f7;
-  --str-chat__border-radius-circle: 6px;
-  --str-chat__avatar-background-color: #bf360c; // Only changes the background color of the avatar component
-}
-```
-
-Here is the result:
-
-<img src={CustomAvatarColorScreenshot} width="500" />
-
-Component variables don't inherit. Let's see an example of this.
-
-Here is the message component without custom color:
-
-<img src={MessageScreenshot} width="500" />
-
-Setting custom text color inside message bubble:
-
-```scss
-.str-chat {
-  --str-chat__primary-color: #009688;
-  --str-chat__active-primary-color: #004d40;
-  --str-chat__surface-color: #f5f5f5;
-  --str-chat__secondary-surface-color: #fafafa;
-  --str-chat__primary-surface-color: #e0f2f1;
-  --str-chat__primary-surface-color-low-emphasis: #edf7f7;
-  --str-chat__border-radius-circle: 6px;
-  --str-chat__avatar-background-color: #bf360c;
-  --str-chat__message-bubble-color: #00695c; // Custom text color only for the message bubble
-}
-```
-
-<img src={MessageCustomColorScreenshot} width="500" />
-
-We can see that setting the text color of the message bubble won't change the color of the link attachments.
-
-To solve this we also have to set the text color for the link attachment component:
-
-```scss
-.str-chat {
-  --str-chat__primary-color: #009688;
-  --str-chat__active-primary-color: #004d40;
-  --str-chat__surface-color: #f5f5f5;
-  --str-chat__secondary-surface-color: #fafafa;
-  --str-chat__primary-surface-color: #e0f2f1;
-  --str-chat__primary-surface-color-low-emphasis: #edf7f7;
-  --str-chat__border-radius-circle: 6px;
-  --str-chat__avatar-background-color: #bf360c;
-  --str-chat__message-bubble-color: #00695c;
-  --str-chat__card-attachment-color: #00695c; // Setting text color of link attachments
-}
-```
-
-<img src={MessageCustomColor2Screenshot} width="500" />
-
-<SDKSpecific name="angular">
-### Custom icons
-
-#### From CSS
-
-Starting from stream-chat-angular@5 it's possible to customize icons from CSS.
-
-Here is an example using the [Google Material Icon library](https://fonts.google.com/icons) to override the send icon:
-
-#### From CSS
-
-Starting from stream-chat-angular@5 it's possible to customize icons from CSS.
-
-Here is an example using the [Google Material Icon library](https://fonts.google.com/icons) to override the send icon:
-
-```scss
-// Import the icon library you want to use
-@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");
-
-// Override the send icon
-.str-chat__icon--send::before {
-  font-family: "Material Symbols Outlined";
-  content: "\e163";
-}
-```
-
-It's also possible to use image files for icons:
-
-```scss
-.str-chat__icon--send {
-  &::before {
-    display: none;
-  }
-  // Link to your image file, or encode the image inline
-  content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik0xMjAtMTYwdi02NDBsNzYwIDMyMC03NjAgMzIwWm04MC0xMjAgNDc0LTIwMC00NzQtMjAwdjE0MGwyNDAgNjAtMjQwIDYwdjE0MFptMCAwdi00MDAgNDAwWiIvPjwvc3ZnPg==");
-}
-```
-
-The full list of icons used by the SDK can be found [here](https://github.com/GetStream/stream-chat-css/blob/main/src/v2/styles/Icon/Icon-layout.scss).
-
-You can also change the size and color of the icons:
-
-```scss
-.str-chat__icon--attach {
-  --str-chat-icon-color: green; // Only works for font icons
-  --str-chat-icon-height: 60px;
-}
-```
-
-#### From HTML template
-
-If you're using stream-chat-angular@4 or an older version, or CSS customizations are not enough, you can completely replace the built-in icon component with your own using the [`CustomTemplatesService`](../../services/CustomTemplatesService/#icontemplate).
-
-You can find a working example in the [customization sample app](https://github.com/GetStream/stream-chat-angular/blob/master/projects/customizations-example/src/app/icon/icon.component.ts).
-
-If the default rules set by the stream-chat-angular stylesheets not enough to set the size and color of your custom icons, you can rely on the `--str-chat-icon-color`, `--str-chat-icon-height` and `--str-chat-icon-width` variables:
-
-```
-.my-custom-send-icon {
-  svg {
-    height: var(--str-chat-icon-height);
-    width: var(--str-chat-icon-width);
-
-    path {
-      fill: var(--str-chat-icon-color);
-    }
-  }
-}
-```
-
-</SDKSpecific>
-
-<SDKSpecific name="todo-react">
-### Custom icons
-
-</SDKSpecific>
-
-### CSS overrides
-
-If you'd like to add customizations that are not supported by CSS variables, you can override parts of the default CSS:
-
-<SDKSpecific name="react">
-
-TODO
-
-</SDKSpecific>
-
-### CSS overrides
-
-If you'd like to add customizations that are not supported by CSS variables, you can override parts of the default CSS:
-
-<SDKSpecific name="react">
-
-```scss
-@import "~stream-chat-react/dist/scss/v2/index.scss";
-```
-
-</SDKSpecific>
-
-```scss
-// Provide your overrides after the stream-chat-angular stylesheet imports
-.str-chat__channel-preview-messenger--last-message {
-  font-weight: 500;
-}
-```
-
-Just make sure that you add the customization rules after the stylesheet import.
-
-If you're using SCSS it's also possible to import component stylesheets separately (instead of our bundled stylesheet):
-
-<SDKSpecific name="angular">
-
-```scss
-// stream-chat-angular@5
-// Use default theme for channel list and channel preview components
-@import "stream-chat-angular/src/assets/styles/scss/ChannelList/ChannelList-layout.scss";
-@import "stream-chat-angular/src/assets/styles/scss/ChannelList/ChannelList-theme.scss";
-@import "stream-chat-angular/src/assets/styles/scss/ChannelPreview/ChannelPreview-layout.scss";
-@import "stream-chat-angular/src/assets/styles/scss/ChannelPreview/ChannelPreview-theme.scss";
-
-// stream-chat-angular@4
-// Use default theme for channel list and channel preview components
-@import "stream-chat-angular/src/assets/styles/v2/scss/ChannelList/ChannelList-layout.scss";
-@import "stream-chat-angular/src/assets/styles/v2/scss/ChannelList/ChannelList-theme.scss";
-@import "stream-chat-angular/src/assets/styles/v2/scss/ChannelPreview/ChannelPreview-layout.scss";
-@import "stream-chat-angular/src/assets/styles/v2/scss/ChannelPreview/ChannelPreview-theme.scss";
-```
-
-</SDKSpecific>
-
-<SDKSpecific name="react">
-
-```scss
-// Use default theme for channel list and channel preview components
-@import "~stream-chat-react/dist/scss/v2/ChannelList/ChannelList-layout.scss";
-@import "~stream-chat-react/dist/scss/v2/ChannelList/ChannelList-theme.scss";
-@import "~stream-chat-react/dist/scss/v2/ChannelPreview/ChannelPreview-layout.scss";
-@import "~stream-chat-react/dist/scss/v2/ChannelPreview/ChannelPreview-theme.scss";
-```
-
-</SDKSpecific>
-
-```scss
-.str-chat__avatar {
-  // Custom CSS for avatar component
-}
-```
-
-### Apply your own look and feel
-
-If you want to create a truly custom look and feel, it can be exhausting to override the default styling. In that case, it's possible only to apply layout rules from the default theme.
-
-Here is how you can import the layout stylesheet:
-
-<SDKSpecific name="angular">
-
-```scss
-// stream-chat-angular@5
-@import "stream-chat-angular/src/assets/styles/scss/index.layout.scss";
-
-// stream-chat-angular@4
-@import "stream-chat-angular/src/assets/styles/v2/scss/index.layout.scss";
-```
-
-</SDKSpecific>
-
-<SDKSpecific name="react">
-
-```scss
-@import "~stream-chat-react/dist/scss/v2/index.layout.scss";
-```
-
-</SDKSpecific>
-
-or if you're using CSS:
-
-<SDKSpecific name="angular">
-
-```css
-// stream-chat-angular@5
-@import "stream-chat-angular/src/assets/styles/css/index.layout.css";
-
-// stream-chat-angular@4
-@import "stream-chat-angular/src/assets/styles/v2/css/index.layout.css";
-```
-
-</SDKSpecific>
-
-<SDKSpecific name="react">
-
-```css
-@import "~stream-chat-react/dist/css/v2/index.layout.css";
-```
-
-</SDKSpecific>
-
-<img src={ChatUiLayoutScreenshot} width="500" />
-
-The result will be a minimalistic UI without
-
-- coloring
-- fonts
-- borders
-- shadows
-
-Please note that if you're only using the layout rules, you can only use the layout CSS variables.
-
-## Dark and light themes
-
-The default theme has dark and light variants. Here is how you can switch between the different themes:
-
-<SDKSpecific name="angular">
-
-Use the [`ThemeService`](../services/ThemeService.mdx):
-
-```typescript
-import { ThemeService } from 'stream-chat-angular';
-
-constructor(themeService: ThemeService) {
-  themeService.theme$.next('dark'); // or light
-}
-```
-
-</SDKSpecific>
-
-<SDKSpecific name="react">
-
-```tsx
-<Chat client={client} theme="str-chat__theme-dark">
-  {/* ... */}
-</Chat>
-```
-
-or only to a specific component (`Channel` or/and `ChannelList`):
-
-:::note
-Using the `customClasses` approach for either of the components will override default class names. Don't forget to add those to your theme class names (as defined in the snippet) for the styling to work properly.
-:::
-
-```tsx
-<Chat
-  client={client}
-  customClasses={{
-    channelList: "str-chat__theme-dark str-chat__channel-list",
-    channel: "str-chat__theme-light str-chat__channel",
-  }}
->
-  {/* ... */}
-</Chat>
-```
-
-</SDKSpecific>
-
-Here is what the dark theme looks like:
-
-<img src={DarkUiScreenshot} width="500" />
-
-<SDKSpecific name="angular">
-
-:::note
-The `str-chat__theme-dark`/`str-chat__theme-light` class is applied to the [channel list](../components/ChannelListComponent.mdx) and [channel](../components/ChannelComponent.mdx) components, these classes are responsible for switching between the dark and light theme color combinations, if you don't use those components in your chat application you'll have apply the theme classes manually.
-:::
-
-</SDKSpecific>
-
-<SDKSpecific name="react">
-
-:::note
-The `str-chat__theme-dark`/`str-chat__theme-light` class is applied to the [ChannelList](../core-components/channel-list.mdx) and [Channel](../core-components/channel.mdx) components, these classes are responsible for switching between the dark and light theme color combinations.
-:::
-
-</SDKSpecific>
-
-Here is how you can provide different color configurations for the dark and light themes:
-
-<SDKSpecific name="react">
-
-```scss
-@import "~stream-chat-react/dist/scss/v2/index.scss";
-```
-
-</SDKSpecific>
-
-```scss
-.str-chat {
-  --str-chat__border-radius-circle: 6px;
-}
-
-.str-chat__theme-light {
-  --str-chat__primary-color: #009688;
-  --str-chat__active-primary-color: #004d40;
-  --str-chat__surface-color: #f5f5f5;
-  --str-chat__secondary-surface-color: #fafafa;
-  --str-chat__primary-surface-color: #e0f2f1;
-  --str-chat__primary-surface-color-low-emphasis: #edf7f7;
-  --str-chat__avatar-background-color: #bf360c;
-}
-
-.str-chat__theme-dark {
-  --str-chat__primary-color: #26a69a;
-  --str-chat__active-primary-color: #00796b;
-  --str-chat__surface-color: #424242;
-  --str-chat__secondary-surface-color: #212121;
-  --str-chat__primary-surface-color: #00695c;
-  --str-chat__primary-surface-color-low-emphasis: #004d40;
-  --str-chat__avatar-background-color: #ff7043;
-}
-```
-
-Here is the custom dark theme:
-
-<img src={CustomDarkUiScreenshot} width="500" />
-
-### Creating your own theme
-
-It's possible to extend the existing themes with your own themes.
-
-Here is an example creating 'round' and 'square' themes:
-
-<SDKSpecific name="react">
-
-```scss
-@import "~stream-chat-react/dist/scss/v2/index.scss";
-```
-
-</SDKSpecific>
-
-```scss
-// Make sure to use the proper naming convention: str-chat__theme-<your theme>
-.str-chat__theme-round {
-  // You can use the predefined theme and component layer variables
-  --str-chat__border-radius-circle: 999px;
-}
-
-.str-chat__theme-square {
-  --str-chat__border-radius-circle: 6px;
-}
-```
-
-<SDKSpecific name="angular">
-
-Set the theme using the [`ThemeService`](../services/ThemeService.mdx):
-
-```typescript
-import { ThemeService } from 'stream-chat-angular';
-
-constructor(themeService: ThemeService) {
-  themeService.theme$.next('square');
-}
-```
-
-</SDKSpecific>
-
-<SDKSpecific name="react">
-
-```tsx
-<Chat client={client} theme="str-chat__theme-square">
-  {/* ... */}
-</Chat>
-```
-
-or only to a specific component (`Channel` or/and `ChannelList`):
-
-:::note
-Using the `customClasses` approach for either of the components will override default class names. Don't forget to add those to your theme class names (as defined in the snippet) for the styling to work properly.
-:::
-
-```tsx
-<Chat
-  client={client}
-  customClasses={{
-    channelList: "str-chat__theme-square str-chat__channel-list",
-    channel: "str-chat__theme-round str-chat__channel",
-  }}
->
-  {/* ... */}
-</Chat>
-```
-
-</SDKSpecific>
-
-<img src={ChatUiSquareThemeScreenshot} width="500" />
-
-## RTL support
-
-The layout was built with RTL support in mind. You can use the RTL layout by providing the `dir` attribute in your HTML:
-
-```html
-<html dir="rtl">
-  <!-- ... -->
-</html>
-```
-
-Here is the result:
-
-<img src={ChatUiRtlScreenshot} width="500" />
diff --git a/docusaurus/docs/Angular/theming/palette-variables.mdx b/docusaurus/docs/Angular/theming/palette-variables.mdx
deleted file mode 100644
index db1eb577..00000000
--- a/docusaurus/docs/Angular/theming/palette-variables.mdx
+++ /dev/null
@@ -1,10 +0,0 @@
----
-id: palette-variables
-sidebar_position: 4
-title: Palette variables
-keywords: [v2, theme-v2, theming-v2, theming, palette variables]
----
-
-A color palette is defined inside the library that used to define default values for the [global theme variables](./global-variables.mdx). If you want to work with the default theme but want to adjust the shades (for example, change `blue500` to a lighter color), you can update the palette variables. However, if you want to change the color scheme of the theme (for example, change the primary color from blue to green), you should take a look at [global theme variables](./global-variables.mdx).
-
-You can find the [list of palette variables on GitHub](https://github.com/GetStream/stream-chat-css/blob/main/src-v2/styles/_palette-variables.scss).
diff --git a/docusaurus/docs/Angular/types/_category_.json b/docusaurus/docs/Angular/types/_category_.json
deleted file mode 100644
index fef0a70b..00000000
--- a/docusaurus/docs/Angular/types/_category_.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "label": "Types",
-  "position": 7
-}
diff --git a/docusaurus/docs/Angular/types/stream-message.mdx b/docusaurus/docs/Angular/types/stream-message.mdx
deleted file mode 100644
index 1d64810c..00000000
--- a/docusaurus/docs/Angular/types/stream-message.mdx
+++ /dev/null
@@ -1,16 +0,0 @@
----
-id: stream-message
-sidebar_position: 1
-title: Stream message
----
-
-The [`StreamMessage`](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/types.ts) type represents a chat message.
-
-# Overview
-
-The class extends the base Stream [message](https://getstream.io/chat/docs/javascript/message_format/?language=javascript#open-graph-scraper) format with the following properties:
-
-| Name          | Type     | Description                                                                                                                                                                                    |
-| ------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `readBy`      | string[] | The list of users that read the message                                                                                                                                                        |
-| `translation` | string   | The message translation if message was translated with [auto-translation](https://getstream.io/chat/docs/javascript/translation/?language=javascript&q=auto%20trasnlate#automatic-translation) |
diff --git a/package.json b/package.json
index 370b9714..46b112e7 100644
--- a/package.json
+++ b/package.json
@@ -22,21 +22,10 @@
     "lint:fix": "ng lint --fix",
     "config:dev": "ANGULAR_ENV=development ts-node set-env.ts",
     "config:prod": "ANGULAR_ENV=production ts-node set-env.ts",
-    "start-docs": "npm run generate-docs && npx stream-chat-docusaurus -s",
-    "start-docs:v5": "npm run generate-docs:v5 && npx stream-chat-docusaurus -s",
     "build:sample-app": "npm run config:prod && ng build --stats-json --project sample-app",
     "preanalyze:sample-app": "npm run build:sample-app",
     "analyze:sample-app": "webpack-bundle-analyzer dist/sample-app/stats.json",
-    "generate-docs:v4": "typedoc:services && npm run typedoc:components && npm run copy-docs && npm run copy-css-docs",
-    "generate-docs": "npm run generate-docs:v5",
-    "generate-docs:v5": "npm run typedoc:services && npm run typedoc:components && npm run copy-docs:v5 && npm run copy-css-docs:v5",
-    "typedoc:services": "typedoc --plugin typedoc-plugin-markdown --plugin typedoc-plugin-reference-excluder --cleanOutputDir true --excludeConstructors true --hideBreadcrumbs true --hideInPageTOC true --excludePrivate true --out temp-service-docs --exclude '!**/*service.ts' --excludeNotDocumented --tsconfig projects/stream-chat-angular/tsconfig.lib.json projects/stream-chat-angular/src/public-api.ts",
-    "typedoc:components": "typedoc --plugin typedoc-plugin-markdown --plugin typedoc-plugin-reference-excluder --cleanOutputDir true --excludeConstructors true --sort source-order --hideBreadcrumbs true --hideInPageTOC true --excludePrivate true --excludeNotDocumented --out temp-component-docs --exclude '!**/*component.ts' --tsconfig projects/stream-chat-angular/tsconfig.lib.json projects/stream-chat-angular/src/public-api.ts",
-    "copy-docs": "ts-node copy-generated-service-docs.ts docusaurus/angular_versioned_docs/version-4/services & (ts-node remove-generated-component-docs-content docusaurus/angular_versioned_docs/version-4/components && ts-node copy-generated-component-docs.ts docusaurus/angular_versioned_docs/version-4/components)",
-    "copy-docs:v5": "ts-node copy-generated-service-docs.ts docusaurus/docs/Angular/services & (ts-node remove-generated-component-docs-content docusaurus/docs/Angular/components && ts-node copy-generated-component-docs.ts docusaurus/docs/Angular/components)",
-    "copy-css": "rm -rf projects/stream-chat-angular/src/assets/styles && copyfiles --up 5 \"node_modules/@stream-io/stream-chat-css/dist/v2/**/*\" projects/stream-chat-angular/src/assets/styles && copyfiles --up 5 \"node_modules/@stream-io/stream-chat-css/dist/assets/**/*\" projects/stream-chat-angular/src/assets/assets",
-    "copy-css-docs": "./copy-css-docs.sh node_modules/@stream-io/stream-chat-css/docs docusaurus/angular_versioned_docs/version-4",
-    "copy-css-docs:v5": "./copy-css-docs.sh node_modules/@stream-io/stream-chat-css/docs docusaurus/docs/Angular"
+    "copy-css": "rm -rf projects/stream-chat-angular/src/assets/styles && copyfiles --up 5 \"node_modules/@stream-io/stream-chat-css/dist/v2/**/*\" projects/stream-chat-angular/src/assets/styles && copyfiles --up 5 \"node_modules/@stream-io/stream-chat-css/dist/assets/**/*\" projects/stream-chat-angular/src/assets/assets"
   },
   "lint-staged": {
     "**/*": [
diff --git a/projects/stream-chat-angular/README.md b/projects/stream-chat-angular/README.md
index 37d743e8..4bd29387 100644
--- a/projects/stream-chat-angular/README.md
+++ b/projects/stream-chat-angular/README.md
@@ -98,9 +98,3 @@ Run `npm start:customizations-example` and navigate to `http://localhost:4200/`.
 ## Local development
 
 Run `npm install` in the root of the project. You can use the `npm run start:dev` command to start the SampleApp with automatic reloading.
-
-A note about the documentation:
-
-- Documentations for Angular services are generated from doc comments in the source files (not under source control)
-- Documentations for inputs and outputs of Angular components are generated from doc comments in the source files (not under source control)
-- Everything else in the documentation is written in `mdx` files located in the `docusaurus` folder