stream-chat-react 13.14.2 → 14.0.0-beta.1

package/package.json

@@ -1,65 +1,38 @@
 {
   "name": "stream-chat-react",
-  "version": "13.14.2",
+  "version": "14.0.0-beta.1",
   "description": "React components to create chat conversations or livestream style chat",
-  "author": "GetStream",
-  "homepage": "https://getstream.io/chat/",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
     "type": "git",
     "url": "https://github.com/GetStream/stream-chat-react.git"
   },
-  "types": "dist/index.d.ts",
-  "main": "dist/index.node.cjs",
-  "module": "dist/index.js",
+  "homepage": "https://getstream.io/chat/",
+  "author": {
+    "name": "GetStream.io, Inc.",
+    "url": "https://getstream.io/team/"
+  },
+  "types": "./dist/types/index.d.ts",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/es/index.mjs",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "node": {
-        "require": "./dist/index.node.cjs",
-        "import": "./dist/index.js"
-      },
-      "browser": {
-        "require": "./dist/index.browser.cjs",
-        "import": "./dist/index.js"
-      },
-      "default": "./dist/index.js"
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/es/index.mjs",
+      "require": "./dist/cjs/index.js",
+      "default": "./dist/cjs/index.js"
     },
     "./emojis": {
-      "types": "./dist/plugins/Emojis/index.d.ts",
-      "node": {
-        "require": "./dist/plugins/Emojis/index.node.cjs",
-        "import": "./dist/plugins/Emojis/index.js"
-      },
-      "browser": {
-        "require": "./dist/plugins/Emojis/index.browser.cjs",
-        "import": "./dist/plugins/Emojis/index.js"
-      },
-      "default": "./dist/plugins/Emojis/index.js"
+      "types": "./dist/types/plugins/Emojis/index.d.ts",
+      "import": "./dist/es/emojis.mjs",
+      "require": "./dist/cjs/emojis.js",
+      "default": "./dist/cjs/emojis.js"
     },
     "./mp3-encoder": {
-      "types": "./dist/plugins/encoders/mp3.d.ts",
-      "node": {
-        "require": "./dist/plugins/encoders/mp3.node.cjs",
-        "import": "./dist/plugins/encoders/mp3.js"
-      },
-      "browser": {
-        "require": "./dist/plugins/encoders/mp3.browser.cjs",
-        "import": "./dist/plugins/encoders/mp3.js"
-      },
-      "default": "./dist/plugins/encoders/mp3.js"
-    },
-    "./experimental": {
-      "types": "./dist/experimental/index.d.ts",
-      "node": {
-        "require": "./dist/experimental/index.node.cjs",
-        "import": "./dist/experimental/index.js"
-      },
-      "browser": {
-        "require": "./dist/experimental/index.browser.cjs",
-        "import": "./dist/experimental/index.js"
-      },
-      "default": "./dist/experimental/index.js"
+      "types": "./dist/types/plugins/encoders/mp3.d.ts",
+      "import": "./dist/es/mp3-encoder.mjs",
+      "require": "./dist/cjs/mp3-encoder.js",
+      "default": "./dist/cjs/mp3-encoder.js"
     },
     "./dist/css/*": {
       "default": "./dist/css/*"
@@ -77,13 +50,10 @@
   "typesVersions": {
     "*": {
       "emojis": [
-        "./dist/plugins/Emojis/index.d.ts"
+        "./dist/types/plugins/Emojis/index.d.ts"
       ],
       "mp3-encoder": [
-        "./dist/plugins/encoders/mp3.d.ts"
-      ],
-      "experimental": [
-        "./dist/experimental/index.d.ts"
+        "./dist/types/plugins/encoders/mp3.d.ts"
       ]
     }
   },
@@ -115,15 +85,16 @@
     "lodash.mergewith": "^4.6.2",
     "lodash.throttle": "^4.1.1",
     "lodash.uniqby": "^4.7.0",
+    "modern-normalize": "^3.0.1",
     "nanoid": "^3.3.4",
     "react-dropzone": "^14.2.3",
     "react-fast-compare": "^3.2.2",
-    "react-image-gallery": "1.2.12",
     "react-markdown": "^9.0.3",
     "react-player": "2.10.1",
     "react-textarea-autosize": "^8.3.0",
     "react-virtuoso": "^2.16.5",
     "remark-gfm": "^4.0.1",
+    "ts-pattern": "^5.9.0",
     "tslib": "^2.6.2",
     "unist-builder": "^4.0.0",
     "unist-util-visit": "^5.0.0",
@@ -139,7 +110,7 @@
     "emoji-mart": "^5.4.0",
     "react": "^19.0.0 || ^18.0.0 || ^17.0.0",
     "react-dom": "^19.0.0 || ^18.0.0 || ^17.0.0",
-    "stream-chat": "^9.27.2"
+    "stream-chat": "^9.38.0"
   },
   "peerDependenciesMeta": {
     "@breezystack/lamejs": {
@@ -167,10 +138,10 @@
     "@babel/core": "^7.12.9",
     "@babel/node": "^7.12.6",
     "@babel/plugin-proposal-class-properties": "^7.12.1",
-    "@babel/plugin-transform-runtime": "^7.12.1",
+    "@babel/plugin-transform-runtime": "^7.28.5",
     "@babel/preset-env": "^7.12.7",
-    "@babel/preset-react": "^7.23.3",
-    "@babel/preset-typescript": "^7.12.7",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
     "@breezystack/lamejs": "^1.2.7",
     "@commitlint/cli": "^18.4.3",
     "@commitlint/config-conventional": "^18.4.3",
@@ -199,7 +170,6 @@
     "@types/moment": "^2.13.0",
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",
-    "@types/react-image-gallery": "^1.2.4",
     "@types/textarea-caret": "3.0.0",
     "@types/use-sync-external-store": "^0.0.6",
     "@types/uuid": "^8.3.0",
@@ -213,7 +183,6 @@
     "core-js": "^3.6.5",
     "dotenv": "^8.6.0",
     "emoji-mart": "^5.5.2",
-    "esbuild": "^0.23.1",
     "eslint": "^9.16.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jest": "^28.11.0",
@@ -233,29 +202,33 @@
     "prettier": "^3.5.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "sass": "^1.97.2",
     "semantic-release": "^25.0.2",
-    "stream-chat": "^9.27.2",
+    "stream-chat": "^9.38.0",
     "ts-jest": "^29.2.5",
     "typescript": "^5.4.5",
-    "typescript-eslint": "^8.17.0"
+    "typescript-eslint": "^8.17.0",
+    "vite": "^7.3.0"
   },
   "scripts": {
-    "build": "rm -rf dist && yarn build-translations && yarn bundle",
-    "bundle": "concurrently ./scripts/bundle-esm.mjs ./scripts/copy-css.sh scripts/bundle-cjs.mjs",
+    "clean": "rm -rf dist",
+    "build": "yarn clean && concurrently './scripts/copy-css.sh' 'yarn build-translations' 'vite build' 'tsc --project tsconfig.lib.json' 'yarn build-styling'",
+    "build-styling": "sass src/styling/index.scss dist/css/index.css",
     "build-translations": "i18next-cli extract",
     "coverage": "jest --collectCoverage && codecov",
     "lint": "yarn prettier --list-different && yarn eslint && yarn validate-translations",
     "lint-fix": "yarn prettier-fix && yarn eslint-fix",
     "eslint": "eslint --max-warnings 0",
     "eslint-fix": "eslint --fix",
-    "prettier": "prettier '**/*.{js,mjs,ts,mts,jsx,tsx,md,json,yml}'",
+    "prettier": "prettier '**/*.{js,mjs,ts,mts,jsx,tsx,md,json,yml,scss}'",
     "prettier-fix": "yarn prettier --write",
     "fix-staged": "lint-staged --config .lintstagedrc.fix.json --concurrent 1",
-    "start": "tsc --watch --sourceMap --declarationMap",
+    "start": "tsc -p tsconfig.lib.json -w",
+    "start:css": "node scripts/watch-styling.mjs",
     "prepare": "husky install",
     "preversion": "yarn install",
     "test": "jest",
-    "types": "tsc --noEmit",
+    "types": "tsc --emitDeclarationOnly false --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",

package/dist/components/AIStateIndicator/AIStateIndicator.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-import type { Channel } from 'stream-chat';
-export type AIStateIndicatorProps = {
-    channel?: Channel;
-};
-export declare const AIStateIndicator: ({ channel: channelFromProps, }: AIStateIndicatorProps) => React.JSX.Element | null;

package/dist/components/AIStateIndicator/AIStateIndicator.js

@@ -1,15 +0,0 @@
-import React from 'react';
-import { AIStates, useAIState } from './hooks/useAIState';
-import { useChannelStateContext, useTranslationContext } from '../../context';
-export const AIStateIndicator = ({ channel: channelFromProps, }) => {
-    const { t } = useTranslationContext();
-    const { channel: channelFromContext } = useChannelStateContext('AIStateIndicator');
-    const channel = channelFromProps || channelFromContext;
-    const { aiState } = useAIState(channel);
-    const allowedStates = {
-        [AIStates.Thinking]: t('Thinking...'),
-        [AIStates.Generating]: t('Generating...'),
-    };
-    return aiState in allowedStates ? (React.createElement("div", { className: 'str-chat__ai-state-indicator-container' },
-        React.createElement("p", { className: 'str-chat__ai-state-indicator-text' }, allowedStates[aiState]))) : null;
-};

package/dist/components/AIStateIndicator/hooks/useAIState.d.ts

@@ -1,17 +0,0 @@
-import type { AIState, Channel } from 'stream-chat';
-export declare const AIStates: {
-    Error: string;
-    ExternalSources: string;
-    Generating: string;
-    Idle: string;
-    Stop: string;
-    Thinking: string;
-};
-/**
- * A hook that returns the current state of the AI.
- * @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 declare const useAIState: (channel?: Channel) => {
-    aiState: AIState;
-};

package/dist/components/AIStateIndicator/hooks/useAIState.js

@@ -1,47 +0,0 @@
-import { useEffect, useState } from 'react';
-export const AIStates = {
-    Error: 'AI_STATE_ERROR',
-    ExternalSources: 'AI_STATE_EXTERNAL_SOURCES',
-    Generating: 'AI_STATE_GENERATING',
-    Idle: 'AI_STATE_IDLE',
-    Stop: 'AI_STATE_STOP',
-    Thinking: 'AI_STATE_THINKING',
-};
-/**
- * A hook that returns the current state of the AI.
- * @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 = (channel) => {
-    const [aiState, setAiState] = useState(AIStates.Idle);
-    useEffect(() => {
-        if (!channel) {
-            return;
-        }
-        const indicatorChangedListener = channel.on('ai_indicator.update', (event) => {
-            const { cid } = event;
-            const state = event.ai_state;
-            if (channel.cid === cid) {
-                setAiState(state);
-            }
-        });
-        const indicatorClearedListener = channel.on('ai_indicator.clear', (event) => {
-            const { cid } = event;
-            if (channel.cid === cid) {
-                setAiState(AIStates.Idle);
-            }
-        });
-        const indicatorStoppedListener = channel.on('ai_indicator.stop', (event) => {
-            const { cid } = event;
-            if (channel.cid === cid) {
-                setAiState(AIStates.Stop);
-            }
-        });
-        return () => {
-            indicatorChangedListener.unsubscribe();
-            indicatorClearedListener.unsubscribe();
-            indicatorStoppedListener.unsubscribe();
-        };
-    }, [channel]);
-    return { aiState };
-};

package/dist/components/AIStateIndicator/index.d.ts

@@ -1,2 +0,0 @@
-export * from './AIStateIndicator';
-export * from './hooks/useAIState';

package/dist/components/AIStateIndicator/index.js

@@ -1,2 +0,0 @@
-export * from './AIStateIndicator';
-export * from './hooks/useAIState';

package/dist/components/Attachment/Attachment.d.ts

@@ -1,44 +0,0 @@
-import React from 'react';
-import type { ReactPlayerProps } from 'react-player';
-import type { SharedLocationResponse, Attachment as StreamAttachment } from 'stream-chat';
-import type { AttachmentActionsProps } from './AttachmentActions';
-import type { AudioProps } from './Audio';
-import type { VoiceRecordingProps } from './VoiceRecording';
-import type { CardProps } from './Card';
-import type { FileAttachmentProps } from './FileAttachment';
-import type { GalleryProps, ImageProps } from '../Gallery';
-import type { UnsupportedAttachmentProps } from './UnsupportedAttachment';
-import type { ActionHandlerReturnType } from '../Message/hooks/useActionHandler';
-import type { GeolocationProps } from './Geolocation';
-export declare const ATTACHMENT_GROUPS_ORDER: readonly ["card", "gallery", "image", "media", "audio", "voiceRecording", "file", "geolocation", "unsupported"];
-export type AttachmentProps = {
-    /** The message attachments to render, see [attachment structure](https://getstream.io/chat/docs/javascript/message_format/?language=javascript) **/
-    attachments: (StreamAttachment | SharedLocationResponse)[];
-    /**	The handler function to call when an action is performed on an attachment, examples include canceling a \/giphy command or shuffling the results. */
-    actionHandler?: ActionHandlerReturnType;
-    /** Custom UI component for displaying attachment actions, defaults to and accepts same props as: [AttachmentActions](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/AttachmentActions.tsx) */
-    AttachmentActions?: React.ComponentType<AttachmentActionsProps>;
-    /** Custom UI component for displaying an audio type attachment, defaults to and accepts same props as: [Audio](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/Audio.tsx) */
-    Audio?: React.ComponentType<AudioProps>;
-    /** Custom UI component for displaying a card type attachment, defaults to and accepts same props as: [Card](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/Card.tsx) */
-    Card?: React.ComponentType<CardProps>;
-    /** Custom UI component for displaying a file type attachment, defaults to and accepts same props as: [File](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/FileAttachment.tsx) */
-    File?: React.ComponentType<FileAttachmentProps>;
-    /** Custom UI component for displaying a gallery of image type attachments, defaults to and accepts same props as: [Gallery](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Gallery/Gallery.tsx) */
-    Gallery?: React.ComponentType<GalleryProps>;
-    Geolocation?: React.ComponentType<GeolocationProps>;
-    /** Custom UI component for displaying an image type attachment, defaults to and accepts same props as: [Image](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Gallery/Image.tsx) */
-    Image?: React.ComponentType<ImageProps>;
-    /** Optional flag to signal that an attachment is a displayed as a part of a quoted message */
-    isQuoted?: boolean;
-    /** Custom UI component for displaying a media type attachment, defaults to `ReactPlayer` from 'react-player' */
-    Media?: React.ComponentType<ReactPlayerProps>;
-    /** Custom UI component for displaying unsupported attachment types, defaults to NullComponent */
-    UnsupportedAttachment?: React.ComponentType<UnsupportedAttachmentProps>;
-    /** Custom UI component for displaying an audio recording attachment, defaults to and accepts same props as: [VoiceRecording](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/VoiceRecording.tsx) */
-    VoiceRecording?: React.ComponentType<VoiceRecordingProps>;
-};
-/**
- * A component used for rendering message attachments. By default, the component supports: AttachmentActions, Audio, Card, File, Gallery, Image, and Video
- */
-export declare const Attachment: (props: AttachmentProps) => React.JSX.Element;

package/dist/components/Attachment/Attachment.js

@@ -1,94 +0,0 @@
-import React, { useMemo } from 'react';
-import { isAudioAttachment, isFileAttachment, isImageAttachment, isScrapedContent, isSharedLocationResponse, isVideoAttachment, isVoiceRecordingAttachment, } from 'stream-chat';
-import { AudioContainer, CardContainer, FileContainer, GalleryContainer, GeolocationContainer, ImageContainer, MediaContainer, UnsupportedAttachmentContainer, VoiceRecordingContainer, } from './AttachmentContainer';
-import { SUPPORTED_VIDEO_FORMATS } from './utils';
-const CONTAINER_MAP = {
-    audio: AudioContainer,
-    card: CardContainer,
-    file: FileContainer,
-    media: MediaContainer,
-    unsupported: UnsupportedAttachmentContainer,
-    voiceRecording: VoiceRecordingContainer,
-};
-export const ATTACHMENT_GROUPS_ORDER = [
-    'card',
-    'gallery',
-    'image',
-    'media',
-    'audio',
-    'voiceRecording',
-    'file',
-    'geolocation',
-    'unsupported',
-];
-/**
- * A component used for rendering message attachments. By default, the component supports: AttachmentActions, Audio, Card, File, Gallery, Image, and Video
- */
-export const Attachment = (props) => {
-    const { attachments } = props;
-    const groupedAttachments = useMemo(() => renderGroupedAttachments(props), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [attachments]);
-    return (React.createElement("div", { className: 'str-chat__attachment-list' }, ATTACHMENT_GROUPS_ORDER.reduce((acc, groupName) => [...acc, ...groupedAttachments[groupName]], [])));
-};
-const renderGroupedAttachments = ({ attachments, ...rest }) => {
-    const uploadedImages = attachments.filter((attachment) => isImageAttachment(attachment));
-    const containers = attachments
-        .filter((attachment) => !isImageAttachment(attachment))
-        .reduce((typeMap, attachment) => {
-        if (isSharedLocationResponse(attachment)) {
-            typeMap.geolocation.push(React.createElement(GeolocationContainer, { ...rest, key: 'geolocation-container', location: attachment }));
-        }
-        else {
-            const attachmentType = getAttachmentType(attachment);
-            const Container = CONTAINER_MAP[attachmentType];
-            typeMap[attachmentType].push(React.createElement(Container, { key: `${attachmentType}-${typeMap[attachmentType].length}`, ...rest, attachment: attachment }));
-        }
-        return typeMap;
-    }, {
-        audio: [],
-        card: [],
-        file: [],
-        media: [],
-        unsupported: [],
-        // not used in reduce
-        // eslint-disable-next-line sort-keys
-        image: [],
-        // eslint-disable-next-line sort-keys
-        gallery: [],
-        geolocation: [],
-        voiceRecording: [],
-    });
-    if (uploadedImages.length > 1) {
-        containers['gallery'] = [
-            React.createElement(GalleryContainer, { key: 'gallery-container', ...rest, attachment: {
-                    images: uploadedImages,
-                    type: 'gallery',
-                } }),
-        ];
-    }
-    else if (uploadedImages.length === 1) {
-        containers['image'] = [
-            React.createElement(ImageContainer, { key: 'image-container', ...rest, attachment: uploadedImages[0] }),
-        ];
-    }
-    return containers;
-};
-const getAttachmentType = (attachment) => {
-    if (isScrapedContent(attachment)) {
-        return 'card';
-    }
-    else if (isVideoAttachment(attachment, SUPPORTED_VIDEO_FORMATS)) {
-        return 'media';
-    }
-    else if (isAudioAttachment(attachment)) {
-        return 'audio';
-    }
-    else if (isVoiceRecordingAttachment(attachment)) {
-        return 'voiceRecording';
-    }
-    else if (isFileAttachment(attachment, SUPPORTED_VIDEO_FORMATS)) {
-        return 'file';
-    }
-    return 'unsupported';
-};

package/dist/components/Attachment/AttachmentActions.d.ts

@@ -1,17 +0,0 @@
-import React from 'react';
-import type { Action, Attachment } from 'stream-chat';
-import type { ActionHandlerReturnType } from '../Message/hooks/useActionHandler';
-export type AttachmentActionsProps = Attachment & {
-    /** A list of actions */
-    actions: Action[];
-    /** Unique id for action button key. Key is generated by concatenating this id with action value - {`${id}-${action.value}`} */
-    id: string;
-    /** The text for the form input */
-    text: string;
-    /** Click event handler */
-    actionHandler?: ActionHandlerReturnType;
-};
-/**
- * A component for rendering the actions you can take on an attachment.
- */
-export declare const AttachmentActions: (props: AttachmentActionsProps) => React.JSX.Element;

package/dist/components/Attachment/AttachmentActions.js

@@ -1,20 +0,0 @@
-import React, { useMemo } from 'react';
-import { useTranslationContext } from '../../context';
-const UnMemoizedAttachmentActions = (props) => {
-    const { actionHandler, actions, id, text } = props;
-    const { t } = useTranslationContext('UnMemoizedAttachmentActions');
-    const handleActionClick = (event, name, value) => actionHandler?.(name, value, event);
-    const knownActionText = useMemo(() => ({
-        Cancel: t('Cancel'),
-        Send: t('Send'),
-        Shuffle: t('Shuffle'),
-    }), [t]);
-    return (React.createElement("div", { className: 'str-chat__message-attachment-actions' },
-        React.createElement("div", { className: 'str-chat__message-attachment-actions-form' },
-            React.createElement("span", null, text),
-            actions.map((action) => (React.createElement("button", { className: `str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--${action.style}`, "data-testid": `${action.name}`, "data-value": action.value, key: `${id}-${action.value}`, onClick: (event) => handleActionClick(event, action.name, action.value) }, action.text ? (knownActionText[action.text] ?? t(action.text)) : null))))));
-};
-/**
- * A component for rendering the actions you can take on an attachment.
- */
-export const AttachmentActions = React.memo(UnMemoizedAttachmentActions);

package/dist/components/Attachment/AttachmentContainer.d.ts

@@ -1,19 +0,0 @@
-import type { PropsWithChildren } from 'react';
-import React from 'react';
-import type { Attachment, SharedLocationResponse } from 'stream-chat';
-import type { AttachmentComponentType, GalleryAttachment, GeolocationContainerProps, RenderAttachmentProps, RenderGalleryProps } from './utils';
-export type AttachmentContainerProps = {
-    attachment: Attachment | GalleryAttachment | SharedLocationResponse;
-    componentType: AttachmentComponentType;
-};
-export declare const AttachmentWithinContainer: ({ attachment, children, componentType, }: PropsWithChildren<AttachmentContainerProps>) => React.JSX.Element;
-export declare const AttachmentActionsContainer: ({ actionHandler, attachment, AttachmentActions, }: RenderAttachmentProps) => React.JSX.Element | null;
-export declare const GalleryContainer: ({ attachment, Gallery, }: RenderGalleryProps) => React.JSX.Element;
-export declare const ImageContainer: (props: RenderAttachmentProps) => React.JSX.Element;
-export declare const CardContainer: (props: RenderAttachmentProps) => React.JSX.Element;
-export declare const FileContainer: ({ attachment, File, }: RenderAttachmentProps) => React.JSX.Element | null;
-export declare const AudioContainer: ({ attachment, Audio, }: RenderAttachmentProps) => React.JSX.Element;
-export declare const VoiceRecordingContainer: ({ attachment, isQuoted, VoiceRecording, }: RenderAttachmentProps) => React.JSX.Element;
-export declare const MediaContainer: (props: RenderAttachmentProps) => React.JSX.Element;
-export declare const GeolocationContainer: ({ Geolocation, location, }: GeolocationContainerProps) => React.JSX.Element;
-export declare const UnsupportedAttachmentContainer: ({ attachment, UnsupportedAttachment, }: RenderAttachmentProps) => React.JSX.Element;