fix: replace StreamChatGenerics with module augmentation (#2634)

### 🎯 Goal

References: GetStream/stream-chat-js#1458

#### Notable changes:

- Extended `EventComponentProps.message` property with `{ event?: Event
}` to cover for weird edge-case
- Extended `StreamMessage` type with these properties commonly used
across the SDK
`{ customType?: string; errorStatusCode?: number; editing?: boolean;
date?: Date }`
  
BREAKING CHANGE: dropped `StreamChatGenerics`, use `Custom<Entity>Data`
to extend your types

Author: arnautov-anton

eslint.config.mjs

@@ -91,6 +91,7 @@ export default tseslint.config(
         { ignoreRestSiblings: false, caughtErrors: 'none' },
       ],
       '@typescript-eslint/no-unsafe-function-type': 'error',
+      '@typescript-eslint/consistent-type-imports': 'error',
       '@typescript-eslint/no-wrapper-object-types': 'error',
       '@typescript-eslint/no-non-null-assertion': 'error',
       'no-empty-function': 'off',

examples/capacitor/src/App.tsx

@@ -21,25 +21,7 @@ const filters: ChannelFilters = { type: 'messaging', members: { $in: [userId] }
 const options: ChannelOptions = { state: true, presence: true, limit: 10 };
 const sort: ChannelSort = { last_message_at: -1, updated_at: -1 };
 
-type LocalAttachmentType = Record<string, unknown>;
-type LocalChannelType = Record<string, unknown>;
-type LocalCommandType = string;
-type LocalEventType = Record<string, unknown>;
-type LocalMessageType = Record<string, unknown>;
-type LocalReactionType = Record<string, unknown>;
-type LocalUserType = Record<string, unknown>;
-
-type StreamChatGenerics = {
-  attachmentType: LocalAttachmentType;
-  channelType: LocalChannelType;
-  commandType: LocalCommandType;
-  eventType: LocalEventType;
-  messageType: LocalMessageType;
-  reactionType: LocalReactionType;
-  userType: LocalUserType;
-};
-
-const chatClient = StreamChat.getInstance<StreamChatGenerics>(apiKey);
+const chatClient = StreamChat.getInstance(apiKey);
 
 if (process.env.REACT_APP_CHAT_SERVER_ENDPOINT) {
   chatClient.setBaseURL(process.env.REACT_APP_CHAT_SERVER_ENDPOINT);

examples/typescript/src/App.tsx

@@ -23,31 +23,7 @@ const filters: ChannelFilters = { type: 'messaging', members: { $in: [userId] }
 const options: ChannelOptions = { state: true, presence: true, limit: 10 };
 const sort: ChannelSort = { last_message_at: -1, updated_at: -1 };
 
-type LocalAttachmentType = Record<string, unknown>;
-type LocalChannelType = Record<string, unknown>;
-type LocalCommandType = string;
-type LocalEventType = Record<string, unknown>;
-type LocalMemberType = Record<string, unknown>;
-type LocalMessageType = Record<string, unknown>;
-type LocalPollOptionType = Record<string, unknown>;
-type LocalPollType = Record<string, unknown>;
-type LocalReactionType = Record<string, unknown>;
-type LocalUserType = Record<string, unknown>;
-
-type StreamChatGenerics = {
-  attachmentType: LocalAttachmentType;
-  channelType: LocalChannelType;
-  commandType: LocalCommandType;
-  eventType: LocalEventType;
-  memberType: LocalMemberType;
-  messageType: LocalMessageType;
-  pollOptionType: LocalPollOptionType;
-  pollType: LocalPollType;
-  reactionType: LocalReactionType;
-  userType: LocalUserType;
-};
-
-const chatClient = StreamChat.getInstance<StreamChatGenerics>(apiKey);
+const chatClient = StreamChat.getInstance(apiKey);
 
 if (process.env.REACT_APP_CHAT_SERVER_ENDPOINT) {
   chatClient.setBaseURL(process.env.REACT_APP_CHAT_SERVER_ENDPOINT);

examples/vite/src/App.tsx

@@ -40,35 +40,10 @@ const filters: ChannelFilters = {
 const options: ChannelOptions = { limit: 5, presence: true, state: true };
 const sort: ChannelSort = { pinned_at: 1, last_message_at: -1, updated_at: -1 };
 
-type LocalAttachmentType = Record<string, unknown>;
-type LocalChannelType = Record<string, unknown>;
-type LocalCommandType = string;
-type LocalEventType = Record<string, unknown>;
-type LocalMemberType = Record<string, unknown>;
-type LocalMessageType = Record<string, unknown>;
-type LocalPollOptionType = Record<string, unknown>;
-type LocalPollType = Record<string, unknown>;
-type LocalReactionType = Record<string, unknown>;
-type LocalUserType = Record<string, unknown>;
-
-type StreamChatGenerics = {
-  attachmentType: LocalAttachmentType;
-  channelType: LocalChannelType;
-  commandType: LocalCommandType;
-  eventType: LocalEventType;
-  memberType: LocalMemberType;
-  messageType: LocalMessageType;
-  pollOptionType: LocalPollOptionType;
-  pollType: LocalPollType;
-  reactionType: LocalReactionType;
-  userType: LocalUserType;
-};
-
-const isMessageAIGenerated = (message: StreamMessage<StreamChatGenerics>) =>
-  !!message?.ai_generated;
+const isMessageAIGenerated = (message: StreamMessage) => !!message?.ai_generated;
 
 const App = () => {
-  const chatClient = useCreateChatClient<StreamChatGenerics>({
+  const chatClient = useCreateChatClient({
     apiKey,
     tokenOrProvider: userToken,
     userData: { id: userId },

package.json

@@ -239,7 +239,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "semantic-release": "^24.2.3",
-    "stream-chat": "^8.55.0",
+    "stream-chat": "^9.0.0-rc.8",
     "ts-jest": "^29.2.5",
     "typescript": "^5.4.5",
     "typescript-eslint": "^8.17.0"
@@ -260,7 +260,7 @@
     "prepare": "husky install",
     "preversion": "yarn install",
     "test": "jest",
-    "types": "tsc --noEmit --skipLibCheck false",
+    "types": "tsc --noEmit",
     "validate-translations": "node scripts/validate-translations.js",
     "validate-cjs": "concurrently 'node scripts/validate-cjs-node-bundle.cjs' 'node scripts/validate-cjs-browser-bundle.cjs'",
     "semantic-release": "semantic-release",

src/@types/image-files.d.ts

@@ -0,0 +1,9 @@
+import 'stream-chat';
+
+declare module 'stream-chat' {
+  interface CustomChannelData {
+    image?: string;
+    name?: string;
+    subtitle?: string;
+  }
+}

src/@types/stream-chat-common-custom-data.d.ts

@@ -1,26 +1,19 @@
 import React from 'react';
-
-import { Channel } from 'stream-chat';
+import type { Channel } from 'stream-chat';
 
 import { AIStates, useAIState } from './hooks/useAIState';
 
 import { useChannelStateContext, useTranslationContext } from '../../context';
-import type { DefaultStreamChatGenerics } from '../../types/types';
 
-export type AIStateIndicatorProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = {
-  channel?: Channel<StreamChatGenerics>;
+export type AIStateIndicatorProps = {
+  channel?: Channel;
 };
 
-export const AIStateIndicator = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->({
+export const AIStateIndicator = ({
   channel: channelFromProps,
-}: AIStateIndicatorProps<StreamChatGenerics>) => {
+}: AIStateIndicatorProps) => {
   const { t } = useTranslationContext();
-  const { channel: channelFromContext } =
-    useChannelStateContext<StreamChatGenerics>('AIStateIndicator');
+  const { channel: channelFromContext } = useChannelStateContext('AIStateIndicator');
   const channel = channelFromProps || channelFromContext;
   const { aiState } = useAIState(channel);
   const allowedStates = {

src/@types/vfile-message.d.ts

@@ -1,8 +1,5 @@
 import { useEffect, useState } from 'react';
-
-import { AIState, Channel, Event } from 'stream-chat';
-
-import type { DefaultStreamChatGenerics } from '../../../types/types';
+import type { AIState, Channel, Event } from 'stream-chat';
 
 export const AIStates = {
   Error: 'AI_STATE_ERROR',
@@ -17,28 +14,21 @@ export const AIStates = {
  * @param {Channel} channel - The channel for which we want to know the AI state.
  * @returns {{ aiState: AIState }} The current AI state for the given channel.
  */
-export const useAIState = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  channel?: Channel<StreamChatGenerics>,
-): { aiState: AIState } => {
+export const useAIState = (channel?: Channel): { aiState: AIState } => {
   const [aiState, setAiState] = useState<AIState>(AIStates.Idle);
 
   useEffect(() => {
     if (!channel) {
       return;
     }
 
-    const indicatorChangedListener = channel.on(
-      'ai_indicator.update',
-      (event: Event<StreamChatGenerics>) => {
-        const { cid } = event;
-        const state = event.ai_state as AIState;
-        if (channel.cid === cid) {
-          setAiState(state);
-        }
-      },
-    );
+    const indicatorChangedListener = channel.on('ai_indicator.update', (event: Event) => {
+      const { cid } = event;
+      const state = event.ai_state as AIState;
+      if (channel.cid === cid) {
+        setAiState(state);
+      }
+    });
 
     const indicatorClearedListener = channel.on('ai_indicator.clear', (event) => {
       const { cid } = event;