Merge branch 'master' into feat/channel-delivery-state

Author: MartinCupela

AGENTS.md

@@ -0,0 +1,118 @@
+Guidance for AI coding agents (Copilot, Cursor, Aider, Claude, etc.) working in this repository. Human readers are welcome, but this file is written for tools.
+
+### Repository purpose
+
+This repo hosts Stream’s React Chat SDK. It provides UI component.
+
+Agents should prioritize backwards compatibility, API stability, and high test coverage when changing code.
+
+### Tech & toolchain
+
+- Language: React (Typescript)
+- Primary runtime: Node (use the version in .nvmrc via nvm use)
+- Testing: Unit/integration: Jest (+ React Testing Library).
+- CI: GitHub Actions (assume PR validation on build + tests + lint)
+- Lint/format: ESLint + Prettier (configs in repo root)
+- Styles: Import Stream styles and override via CSS layers as described in README (don’t edit compiled CSS)
+- Release discipline: Conventional Commits + automated release tooling (see commitlint/semantic-release configs).
+
+### Project layout (high level)
+
+- src/ — Components, hooks, contexts, styles, and utilities (library source).
+- scripts/ - Scripts run during the build process
+- e2e/ — Playwright specs.
+- examples/ — Example apps/snippets.
+- developers/ — Dev notes & scripts.
+
+Use the closest folder’s patterns and conventions when editing.
+
+### Configurations
+
+Root configs:
+
+- .babelrc.js
+- .gitignore
+- .lintstagedrc.fix.json
+- .lintstagedrc.json
+- .nvmrc
+- .prettierignore
+- .prettierrc
+- .releaserc.json
+- babel.config.js
+- codecov.yml
+- commitlint.config.mjs
+- eslint.config.mjs,
+- i18next-parser.config.js
+- jest.config.js
+- jest.config.js
+- playwright.config.ts
+- tsconfig.json
+
+Respect any repo-specific rules. Do not suppress rules broadly; justify and scope exceptions.
+
+### Runbook (commands)
+
+1. Install dependencies: yarn install
+2. Build: yarn build
+3. Typecheck: yarn types
+4. Lint: yarn lint
+5. Fix lint issues: yarn lint-fix
+6. Unit tests: yarn test
+
+### General rules
+
+#### Linting & formatting
+
+- Make sure the eslint and prettier configurations are followed. Run before committing:
+
+```
+yarn lint-fix
+```
+
+#### Commit / PR conventions
+
+- Keep PRs small and focused; include tests.
+- Follow the project’s “zero warnings” policy—fix new warnings and avoid introducing any.
+- For UI changes, attach comparison screenshots (before/after) where feasible.
+- Ensure public API changes include docs.
+
+#### Testing policy
+
+Add/extend tests in the matching module’s `__tests__`/ folder.
+
+Cover:
+
+- React components
+- React hooks
+- Utility functions
+- Use fakes/mocks from the test helpers provided by the repo when possible.
+
+#### Docs & samples
+
+- When altering public API, update inline docs and any affected guide pages in the docs site where this repo is the source of truth.
+- Keep sample/snippet code compilable.
+
+#### Security & credentials
+
+- Never commit API keys or customer data.
+- Example code must use obvious placeholders (e.g., YOUR_STREAM_KEY).
+- If you add scripts, ensure they fail closed on missing env vars.
+
+#### When in doubt
+
+- Mirror existing patterns in the nearest module.
+- Prefer additive changes; avoid breaking public APIs.
+- Ask maintainers (CODEOWNERS) through PR mentions for modules you touch.
+
+---
+
+Quick agent checklist (per commit)
+
+- Build the src
+- Run all tests and ensure green
+- Run lint commands
+- Update docs if public API changed
+- Add/adjust tests
+- No new warnings
+
+End of machine guidance. Edit this file to refine agent behavior over time; keep human-facing details in README.md and docs.

CHANGELOG.md

@@ -1,3 +1,17 @@
+## [13.7.0](https://github.com/GetStream/stream-chat-react/compare/v13.6.6...v13.7.0) (2025-09-18)
+
+### Features
+
+* add imageToLink Remark plugin for converting image MD links to anchor tags ([#2832](https://github.com/GetStream/stream-chat-react/issues/2832)) ([32fce17](https://github.com/GetStream/stream-chat-react/commit/32fce1760b167f94a1c2e55f8816a998a79ee8cd))
+* support inserted text element in message markdown rendering ([#2831](https://github.com/GetStream/stream-chat-react/issues/2831)) ([9135112](https://github.com/GetStream/stream-chat-react/commit/9135112a73bde470988f5cbb038209f84e1f3966))
+
+## [13.6.6](https://github.com/GetStream/stream-chat-react/compare/v13.6.5...v13.6.6) (2025-09-17)
+
+### Bug Fixes
+
+* enabled headings in message markdown ([#2829](https://github.com/GetStream/stream-chat-react/issues/2829)) ([1bdcb8d](https://github.com/GetStream/stream-chat-react/commit/1bdcb8d3cf44e334c999c333d419c0f51d6cf1bc))
+* render html as text in ChannelPreview ([#2830](https://github.com/GetStream/stream-chat-react/issues/2830)) ([509e45f](https://github.com/GetStream/stream-chat-react/commit/509e45f34d0dde8af0a7302225306e7fbbcedf27))
+
 ## [13.6.5](https://github.com/GetStream/stream-chat-react/compare/v13.6.4...v13.6.5) (2025-09-15)
 
 ### Bug Fixes

CODEOWNERS

@@ -0,0 +1 @@
+* @oliverlaz @arnautov-anton @MartinCupela

package.json

@@ -12,7 +12,6 @@
   "types": "dist/index.d.ts",
   "main": "dist/index.node.cjs",
   "module": "dist/index.js",
-  "jsdelivr": "./dist/browser.full-bundle.min.js",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

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

@@ -6,6 +6,7 @@ import {
   DefaultCommandData,
   DefaultEventData,
   DefaultMemberData,
+  DefaultMessageComposerData,
   DefaultMessageData,
   DefaultPollData,
   DefaultPollOptionData,
@@ -36,4 +37,6 @@ declare module 'stream-chat' {
   interface CustomUserData extends DefaultUserData {}
 
   interface CustomThreadData extends DefaultThreadData {}
+
+  interface CustomMessageComposerData extends DefaultMessageComposerData {}
 }

src/components/ChannelPreview/ChannelPreview.tsx

@@ -88,6 +88,10 @@ export const ChannelPreview = (props: ChannelPreviewProps) => {
   const [lastMessage, setLastMessage] = useState<LocalMessage>(
     channel.state.messages[channel.state.messages.length - 1],
   );
+  const [latestMessagePreview, setLatestMessagePreview] = useState<ReactNode>(() =>
+    getLatestMessagePreview(channel, t, userLanguage, isMessageAIGenerated),
+  );
+
   const [unread, setUnread] = useState(0);
   const { messageDeliveryStatus } = useMessageDeliveryStatus({
     channel,
@@ -134,6 +138,9 @@ export const ChannelPreview = (props: ChannelPreviewProps) => {
 
   useEffect(() => {
     refreshUnreadCount();
+    setLatestMessagePreview(
+      getLatestMessagePreview(channel, t, userLanguage, isMessageAIGenerated),
+    );
 
     const handleEvent = (event: Event) => {
       const deletedMessagesInAnotherChannel =
@@ -144,6 +151,9 @@ export const ChannelPreview = (props: ChannelPreviewProps) => {
       setLastMessage(
         channel.state.latestMessages[channel.state.latestMessages.length - 1],
       );
+      setLatestMessagePreview(
+        getLatestMessagePreview(channel, t, userLanguage, isMessageAIGenerated),
+      );
       refreshUnreadCount();
     };
 
@@ -162,16 +172,18 @@ export const ChannelPreview = (props: ChannelPreviewProps) => {
       channel.off('message.undeleted', handleEvent);
       channel.off('channel.truncated', handleEvent);
     };
-  }, [channel, client, refreshUnreadCount, channelUpdateCount]);
-
-  if (!Preview) return null;
-
-  const latestMessagePreview = getLatestMessagePreview(
+  }, [
     channel,
+    client,
+    refreshUnreadCount,
+    channelUpdateCount,
+    getLatestMessagePreview,
     t,
     userLanguage,
     isMessageAIGenerated,
-  );
+  ]);
+
+  if (!Preview) return null;
 
   return (
     <Preview

src/components/ChannelPreview/__tests__/utils.test.js

@@ -1,3 +1,5 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
 import '@testing-library/jest-dom';
 import { nanoid } from 'nanoid';
 
@@ -14,6 +16,7 @@ import {
 
 import { getDisplayImage, getDisplayTitle, getLatestMessagePreview } from '../utils';
 import { generateStaticLocationResponse } from '../../../mock-builders';
+import { render } from '@testing-library/react';
 
 describe('ChannelPreview utils', () => {
   const clientUser = generateUser();
@@ -55,16 +58,45 @@ describe('ChannelPreview utils', () => {
         }),
       ],
     });
+    const channelWithHTMLInMessage = generateChannel({
+      messages: [
+        generateMessage({
+          attachments: [generateImageAttachment()],
+          text:
+            '<h1>Hello, world!</h1> \n' +
+            '<p>This is my first web page.</p> \n' +
+            '<p>It contains a <strong>main heading</strong> and <em> paragraph </em>.</p>',
+        }),
+      ],
+    });
+
+    const expectedTextWithHTMLRendering =
+      '<h1>Hello, world!</h1> <p>This is my first web page.</p> <p>It contains a <strong>main heading</strong> and <em> paragraph </em>.</p>';
+
+    function isReactMarkdownElement(x) {
+      return React.isValidElement(x) && x.type === ReactMarkdown;
+    }
 
     it.each([
       ['Nothing yet...', 'channelWithEmptyMessage', channelWithEmptyMessage],
       ['Message deleted', 'channelWithDeletedMessage', channelWithDeletedMessage],
       ['🏙 Attachment...', 'channelWithAttachmentMessage', channelWithAttachmentMessage],
       ['📍Shared location', 'channelWithLocationMessage', channelWithLocationMessage],
+      [
+        expectedTextWithHTMLRendering,
+        'channelWithHTMLInMessage',
+        channelWithHTMLInMessage,
+      ],
     ])('should return %s for %s', async (expectedValue, testCaseName, c) => {
       const t = (text) => text;
       const channel = await getQueriedChannelInstance(c);
-      expect(getLatestMessagePreview(channel, t)).toBe(expectedValue);
+      const preview = getLatestMessagePreview(channel, t);
+      if (isReactMarkdownElement(preview)) {
+        const { container } = render(preview);
+        expect(container).toHaveTextContent(expectedValue);
+      } else {
+        expect(getLatestMessagePreview(channel, t)).toBe(expectedValue);
+      }
     });
   });
 

src/components/ChannelPreview/utils.tsx

@@ -5,9 +5,21 @@ import type { Channel, PollVote, TranslationLanguages, UserResponse } from 'stre
 
 import type { TranslationContextValue } from '../../context/TranslationContext';
 import type { ChatContextValue } from '../../context';
+import type { PluggableList } from 'unified';
+import { htmlToTextPlugin, imageToLink, plusPlusToEmphasis } from '../Message';
+import remarkGfm from 'remark-gfm';
+
+const remarkPlugins: PluggableList = [
+  htmlToTextPlugin,
+  [remarkGfm, { singleTilde: false }],
+  plusPlusToEmphasis,
+  imageToLink,
+];
 
 export const renderPreviewText = (text: string) => (
-  <ReactMarkdown skipHtml>{text}</ReactMarkdown>
+  <ReactMarkdown remarkPlugins={remarkPlugins} skipHtml>
+    {text}
+  </ReactMarkdown>
 );
 
 const getLatestPollVote = (latestVotesByOption: Record<string, PollVote[]>) => {

src/components/Message/QuotedMessage.tsx

@@ -12,6 +12,7 @@ import { useTranslationContext } from '../../context/TranslationContext';
 import { useChannelActionContext } from '../../context/ChannelActionContext';
 import { renderText as defaultRenderText } from './renderText';
 import type { MessageContextValue } from '../../context/MessageContext';
+import { useActionHandler } from './';
 
 export type QuotedMessageProps = Pick<MessageContextValue, 'renderText'>;
 
@@ -26,6 +27,7 @@ export const QuotedMessage = ({ renderText: propsRenderText }: QuotedMessageProp
   } = useMessageContext('QuotedMessage');
   const { t, userLanguage } = useTranslationContext('QuotedMessage');
   const { jumpToMessage } = useChannelActionContext('QuotedMessage');
+  const actionHandler = useActionHandler(message);
 
   const renderText = propsRenderText ?? contextRenderText ?? defaultRenderText;
 
@@ -96,7 +98,7 @@ export const QuotedMessage = ({ renderText: propsRenderText }: QuotedMessageProp
         </div>
       </div>
       {message.attachments?.length ? (
-        <Attachment attachments={message.attachments} />
+        <Attachment actionHandler={actionHandler} attachments={message.attachments} />
       ) : null}
     </>
   );

src/components/Message/hooks/useActionHandler.ts

@@ -3,6 +3,7 @@ import { useChannelStateContext } from '../../../context/ChannelStateContext';
 
 import type React from 'react';
 import type { LocalMessage } from 'stream-chat';
+import { useStableCallback } from '../../../utils/useStableCallback';
 
 export type FormData = Record<string, string>;
 
@@ -19,15 +20,15 @@ export function useActionHandler(message?: LocalMessage): ActionHandlerReturnTyp
   const { removeMessage, updateMessage } = useChannelActionContext('useActionHandler');
   const { channel } = useChannelStateContext('useActionHandler');
 
-  return async (dataOrName, value, event) => {
+  return useStableCallback(async (dataOrName, value, event) => {
     if (event) event.preventDefault();
 
     if (!message || !updateMessage || !removeMessage || !channel) {
       console.warn(handleActionWarning);
       return;
     }
 
-    const messageID = message.id;
+    const messageId = message.id;
     let formData: FormData = {};
 
     // deprecated: value&name should be removed in favor of data obj
@@ -37,14 +38,14 @@ export function useActionHandler(message?: LocalMessage): ActionHandlerReturnTyp
       formData = { ...dataOrName };
     }
 
-    if (messageID) {
-      const data = await channel.sendAction(messageID, formData);
+    if (messageId) {
+      const data = await channel.sendAction(messageId, formData);
 
       if (data?.message) {
         updateMessage(data.message);
       } else {
         removeMessage(message);
       }
     }
-  };
+  });
 }