stream-chat 9.0.1 → 9.1.0

package/dist/types/messageComposer/middleware/messageComposer/pollOnly.d.ts

@@ -0,0 +1,3 @@
+import type { MessageCompositionMiddleware } from './types';
+import type { MessageComposer } from '../../messageComposer';
+export declare const createPollOnlyCompositionMiddleware: (composer: MessageComposer) => MessageCompositionMiddleware;

package/dist/types/messageComposer/middleware/pollComposer/types.d.ts

@@ -43,6 +43,7 @@ export type PollComposerStateChangeMiddlewareValue = {
     targetFields: Partial<{
         [K in keyof PollComposerState['data']]: K extends 'options' ? PollComposerOptionUpdate : PollComposerState['data'][K];
     }>;
+    injectedFieldErrors?: PollComposerFieldErrors;
 };
 export type PollComposerStateMiddlewareValue = MiddlewareExecutionResult<PollComposerStateChangeMiddlewareValue>;
 export {};

package/dist/types/messageComposer/middleware/textComposer/TextComposerMiddlewareExecutor.d.ts

@@ -1,5 +1,5 @@
-import type { ExecuteParams, MiddlewareExecutionResult, MiddlewareHandler } from '../../../middleware';
 import { MiddlewareExecutor } from '../../../middleware';
+import type { ExecuteParams, MiddlewareExecutionResult, MiddlewareHandler } from '../../../middleware';
 import type { Suggestion, TextComposerMiddlewareExecutorOptions, TextComposerState } from './types';
 export type TextComposerMiddlewareExecutorState<T extends Suggestion = Suggestion> = TextComposerState<T> & {
     change?: {

package/dist/types/messageComposer/pollComposer.d.ts

@@ -2,7 +2,7 @@ import { PollComposerCompositionMiddlewareExecutor, PollComposerStateMiddlewareE
 import { StateStore } from '../store';
 import { VotingVisibility } from '../types';
 import type { MessageComposer } from './messageComposer';
-import type { PollComposerState, UpdateFieldsData } from './middleware/pollComposer';
+import type { PollComposerFieldErrors, PollComposerState, UpdateFieldsData } from './middleware/pollComposer';
 export type PollComposerOptions = {
     composer: MessageComposer;
 };
@@ -25,7 +25,12 @@ export declare class PollComposer {
     get voting_visibility(): VotingVisibility | undefined;
     get canCreatePoll(): boolean;
     initState: () => void;
-    updateFields: (data: UpdateFieldsData) => Promise<void>;
+    /**
+     * Updates specified fields and generates relevant errors
+     * @param data
+     * @param injectedFieldErrors - errors produced externally that will take precedence over the errors generated in the middleware chaing
+     */
+    updateFields: (data: UpdateFieldsData, injectedFieldErrors?: PollComposerFieldErrors) => Promise<void>;
     handleFieldBlur: (field: keyof PollComposerState["data"]) => Promise<void>;
     compose: () => Promise<import("..").PollComposerCompositionMiddlewareValueState | undefined>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat",
-  "version": "9.0.1",
+  "version": "9.1.0",
   "description": "JS SDK for the Stream Chat API",
   "homepage": "https://getstream.io/chat/",
   "author": {

package/src/messageComposer/messageComposer.ts

@@ -88,16 +88,18 @@ const initState = (
   const quotedMessage = composition.quoted_message;
   let message;
   let draftId = null;
+  let id = MessageComposer.generateId(); // do not use draft id for messsage id
   if (compositionIsDraftResponse(composition)) {
     message = composition.message;
     draftId = composition.message.id;
   } else {
     message = composition;
+    id = composition.id;
   }
 
   return {
     draftId,
-    id: message.id,
+    id,
     quotedMessage: quotedMessage
       ? formatMessage(quotedMessage as MessageResponseBase)
       : null,
@@ -318,6 +320,7 @@ export class MessageComposer {
     this.attachmentManager.initState({ message });
     this.linkPreviewsManager.initState({ message });
     this.textComposer.initState({ message });
+    this.pollComposer.initState();
     this.customDataManager.initState({ message });
     this.state.next(initState(composition));
     if (
@@ -543,11 +546,6 @@ export class MessageComposer {
   };
 
   clear = () => {
-    this.attachmentManager.initState();
-    this.linkPreviewsManager.initState();
-    this.textComposer.initState();
-    this.pollComposer.initState();
-    this.customDataManager.initState();
     this.initState();
   };
 
@@ -630,6 +628,7 @@ export class MessageComposer {
     try {
       const { poll } = await this.client.createPoll(composition.data);
       this.state.partialNext({ pollId: poll.id });
+      this.pollComposer.initState();
     } catch (error) {
       this.client.notifications.add({
         message: 'Failed to create the poll',

package/src/messageComposer/middleware/messageComposer/MessageComposerMiddlewareExecutor.ts

@@ -30,6 +30,7 @@ import {
   createCustomDataCompositionMiddleware,
   createDraftCustomDataCompositionMiddleware,
 } from './customData';
+import { createPollOnlyCompositionMiddleware } from './pollOnly';
 
 export class MessageComposerMiddlewareExecutor extends MiddlewareExecutor<
   MessageComposerMiddlewareState,
@@ -40,6 +41,7 @@ export class MessageComposerMiddlewareExecutor extends MiddlewareExecutor<
     // todo: document how to add custom data to a composed message using middleware
     //  or adding custom composer components (apart from AttachmentsManager, TextComposer etc.)
     this.use([
+      createPollOnlyCompositionMiddleware(composer),
       createTextComposerCompositionMiddleware(composer),
       createAttachmentsCompositionMiddleware(composer),
       createLinkPreviewsCompositionMiddleware(composer),

package/src/messageComposer/middleware/messageComposer/pollOnly.ts

@@ -0,0 +1,49 @@
+import type {
+  MessageComposerMiddlewareState,
+  MessageCompositionMiddleware,
+} from './types';
+import type { MessageComposer } from '../../messageComposer';
+import type { MiddlewareHandlerParams } from '../../../middleware';
+import type { LocalMessage } from '../../../types';
+
+const pollLocalMessageNullifiedFields: Pick<
+  LocalMessage,
+  'attachments' | 'mentioned_users' | 'parent_id' | 'quoted_message' | 'text'
+> = {
+  attachments: [],
+  mentioned_users: [],
+  parent_id: undefined,
+  quoted_message: undefined,
+  text: '',
+};
+
+export const createPollOnlyCompositionMiddleware = (
+  composer: MessageComposer,
+): MessageCompositionMiddleware => ({
+  id: 'stream-io/message-composer-middleware/poll-only',
+  handlers: {
+    compose: ({
+      state,
+      complete,
+      forward,
+    }: MiddlewareHandlerParams<MessageComposerMiddlewareState>) => {
+      const pollId = composer.pollId;
+      const isEditingMessage = !!composer.editedMessage;
+      const isComposingThreadReply = !!composer.threadId;
+      if (!pollId || isComposingThreadReply || isEditingMessage) return forward();
+
+      return complete({
+        ...state,
+        localMessage: {
+          ...state.localMessage,
+          ...pollLocalMessageNullifiedFields,
+          poll_id: pollId,
+        },
+        message: {
+          id: state.localMessage.id,
+          poll_id: pollId,
+        },
+      });
+    },
+  },
+});

package/src/messageComposer/middleware/pollComposer/state.ts

@@ -31,6 +31,10 @@ export const pollStateChangeValidators: Partial<
   max_votes_allowed: ({ data, value }) => {
     if (data.enforce_unique_vote && value)
       return { max_votes_allowed: 'Enforce unique vote is enabled' };
+    const numericMatch = value.match(/^[0-9]+$/);
+    if (!numericMatch && value) {
+      return { max_votes_allowed: 'Only numbers are allowed' };
+    }
     if (value?.length > 1 && !value.match(VALID_MAX_VOTES_VALUE_REGEX))
       return { max_votes_allowed: 'Type a number from 2 to 10' };
     return { max_votes_allowed: undefined };
@@ -225,7 +229,7 @@ export const createPollComposerStateMiddleware = ({
         forward,
       }: MiddlewareHandlerParams<PollComposerStateChangeMiddlewareValue>) => {
         if (!state.targetFields) return forward();
-        const { previousState } = state;
+        const { previousState, injectedFieldErrors } = state;
         const finalValidators = {
           ...pollStateChangeValidators,
           ...defaultPollFieldChangeEventValidators,
@@ -247,7 +251,7 @@ export const createPollComposerStateMiddleware = ({
           nextState: {
             ...previousState,
             data: { ...previousState.data, ...newData },
-            errors: { ...previousState.errors, ...newErrors },
+            errors: { ...previousState.errors, ...newErrors, ...injectedFieldErrors },
           },
         });
       },
@@ -275,7 +279,11 @@ export const createPollComposerStateMiddleware = ({
           nextState: {
             ...previousState,
             data: { ...previousState.data, ...newData },
-            errors: { ...previousState.errors, ...newErrors },
+            errors: {
+              ...previousState.errors,
+              ...newErrors,
+              ...state.injectedFieldErrors,
+            },
           },
         });
       },

package/src/messageComposer/middleware/pollComposer/types.ts

@@ -60,6 +60,7 @@ export type PollComposerStateChangeMiddlewareValue = {
       ? PollComposerOptionUpdate
       : PollComposerState['data'][K];
   }>;
+  injectedFieldErrors?: PollComposerFieldErrors;
 };
 
 export type PollComposerStateMiddlewareValue =

package/src/messageComposer/middleware/textComposer/TextComposerMiddlewareExecutor.ts

@@ -1,15 +1,15 @@
 import { createCommandsMiddleware } from './commands';
 import { createMentionsMiddleware } from './mentions';
 import { createTextComposerPreValidationMiddleware } from './validation';
+import { MiddlewareExecutor } from '../../../middleware';
 import type {
   ExecuteParams,
   MiddlewareExecutionResult,
   MiddlewareHandler,
 } from '../../../middleware';
-import { MiddlewareExecutor } from '../../../middleware';
-import { withCancellation } from '../../../utils/concurrency';
 import type {
   Suggestion,
+  Suggestions,
   TextComposerMiddlewareExecutorOptions,
   TextComposerState,
 } from './types';
@@ -58,28 +58,14 @@ export class TextComposerMiddlewareExecutor<
       initialValue: initialState,
     });
 
-    if (result && result.state.suggestions) {
-      try {
-        const searchResult = await withCancellation(
-          'textComposer-suggestions-search',
-          async () => {
-            await result.state.suggestions?.searchSource.search(
-              result.state.suggestions?.query,
-            );
-          },
-        );
-        if (searchResult === 'canceled') return { ...result, status: 'discard' };
-      } catch (error) {
-        // Clear suggestions on search error
-        return {
-          ...result,
-          state: {
-            ...result.state,
-            suggestions: undefined,
-          },
-        };
-      }
-    }
+    const { query, searchSource } = result.state.suggestions ?? ({} as Suggestions);
+    /**
+     * Catching error just for sanity purposes.
+     * The BaseSearchSource.search() method returns debounced result.
+     * That means the result of the previous search call as the debounced call result is unknown at the moment.
+     * Custom search source implementation should handle errors meaningfully internally.
+     */
+    searchSource?.search(query)?.catch(console.error);
 
     return result;
   }

package/src/messageComposer/pollComposer.ts

@@ -7,7 +7,11 @@ import { StateStore } from '../store';
 import { VotingVisibility } from '../types';
 import { generateUUIDv4 } from '../utils';
 import type { MessageComposer } from './messageComposer';
-import type { PollComposerState, UpdateFieldsData } from './middleware/pollComposer';
+import type {
+  PollComposerFieldErrors,
+  PollComposerState,
+  UpdateFieldsData,
+} from './middleware/pollComposer';
 
 export type PollComposerOptions = {
   composer: MessageComposer;
@@ -102,13 +106,23 @@ export class PollComposer {
     this.state.next(this.initialState);
   };
 
-  updateFields = async (data: UpdateFieldsData) => {
+  /**
+   * Updates specified fields and generates relevant errors
+   * @param data
+   * @param injectedFieldErrors - errors produced externally that will take precedence over the errors generated in the middleware chaing
+   */
+  // FIXME: change method params to a single object with the next major release
+  updateFields = async (
+    data: UpdateFieldsData,
+    injectedFieldErrors?: PollComposerFieldErrors,
+  ) => {
     const { state, status } = await this.stateMiddlewareExecutor.execute({
       eventName: 'handleFieldChange',
       initialValue: {
         nextState: { ...this.state.getLatestValue() },
         previousState: { ...this.state.getLatestValue() },
         targetFields: data,
+        injectedFieldErrors,
       },
     });