fix: fix types for WebSocketEventPromptDialog

Author: MartinCupela

examples/vite/src/AppSettings/ActionsMenu/WebSocketEventPromptDialog/WebSocketEventPromptDialog.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode, Ref } from 'react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { Event } from 'stream-chat';
 import {
   Dropdown,
   type DropdownTriggerProps,
@@ -808,7 +809,7 @@ export const WebSocketEventPromptDialog = ({
       throw new Error('Payload must be a JSON object');
     }
 
-    return parsedPayload as Record<string, unknown>;
+    return parsedPayload as Partial<Event>;
   }, []);
 
   const emitConfiguredEvent = useCallback(

examples/vite/src/AppSettings/ActionsMenu/WebSocketEventPromptDialog/types.ts

@@ -1,3 +1,4 @@
+import type { ChannelMemberResponse, UserResponse } from 'stream-chat';
 import type { SupportedWebsocketEventType } from './websocketEventTemplates';
 
 export type PayloadMode = 'fixed' | 'fresh';
@@ -63,12 +64,12 @@ export type IntervalEmitter = {
 
 export type DialogMode = 'single' | 'pipeline' | 'intervals';
 
-export type SimulationUser = Record<string, unknown> & {
-  id: string;
+export type SimulationUser = UserResponse & {
+  invisible?: boolean;
 };
 
 export type SimulationState = {
-  membersByCid: Record<string, Record<string, Record<string, unknown>>>;
+  membersByCid: Record<string, Record<string, ChannelMemberResponse>>;
   messageIdsByCid: Record<string, string[]>;
   nextReactionTypeIndex: number;
   nextSequence: number;

examples/vite/src/AppSettings/ActionsMenu/WebSocketEventPromptDialog/websocketEventAutomation.ts

@@ -1,4 +1,12 @@
-import type { Channel, Event, StreamChat } from 'stream-chat';
+import type {
+  Channel,
+  ChannelMemberResponse,
+  Event,
+  MessageResponseBase,
+  ReactionResponse,
+  StreamChat,
+  UserResponse,
+} from 'stream-chat';
 
 import {
   type SupportedWebsocketEventType,
@@ -7,7 +15,17 @@ import {
 } from './websocketEventTemplates';
 import type { SimulationState, SimulationUser } from './types';
 
-type JsonObject = Record<string, unknown>;
+type UnknownRecord = Record<string, unknown>;
+type EventPayload = Omit<
+  Partial<Event>,
+  'channel' | 'member' | 'message' | 'reaction' | 'user'
+> & {
+  channel?: Partial<WebSocketEventTemplateContext['channel']>;
+  member?: ChannelMemberResponse;
+  message?: Partial<MessageResponseBase>;
+  reaction?: ReactionResponse;
+  user?: UserResponse;
+};
 
 const messageTextFragments = [
   'debug event payload',
@@ -19,12 +37,12 @@ const messageTextFragments = [
 
 const reactionTypes = ['love', 'haha', 'wow', 'like', 'sad'] as const;
 
-const asJsonObject = (value: unknown): JsonObject | undefined => {
+const asJsonObject = (value: unknown): UnknownRecord | undefined => {
   if (!value || typeof value !== 'object' || Array.isArray(value)) {
     return undefined;
   }
 
-  return value as JsonObject;
+  return value as UnknownRecord;
 };
 
 const getId = (value: unknown) => {
@@ -44,10 +62,33 @@ const getMessageUser = (message: unknown) => asJsonObject(asJsonObject(message)?
 const getMessageMember = (message: unknown) =>
   asJsonObject(asJsonObject(message)?.member);
 
+const asUserResponse = (value: unknown): UserResponse | undefined => {
+  const user = asJsonObject(value);
+
+  return typeof user?.id === 'string' ? (user as unknown as UserResponse) : undefined;
+};
+
+const asChannelMemberResponse = (value: unknown): ChannelMemberResponse | undefined => {
+  const member = asJsonObject(value);
+
+  if (!member) return undefined;
+
+  const userId = getId(member.user_id) ?? getUserId(member.user);
+
+  return userId ? (member as unknown as ChannelMemberResponse) : undefined;
+};
+
 const buildRandomMessageText = (sequence: number) =>
   `${messageTextFragments[sequence % messageTextFragments.length]} #${sequence}`;
 
-const buildReactionState = ({ reaction }: { reaction: JsonObject }): JsonObject => {
+const buildReactionState = ({
+  reaction,
+}: {
+  reaction: ReactionResponse;
+}): Pick<
+  MessageResponseBase,
+  'latest_reactions' | 'reaction_counts' | 'reaction_groups' | 'reaction_scores'
+> => {
   const reactionType = getId(reaction.type) ?? 'love';
   const reactionScore =
     typeof reaction.score === 'number' && Number.isFinite(reaction.score)
@@ -99,7 +140,7 @@ const getChannelMembersForCid = (
   cid: string,
   simulationState: SimulationState,
   templateContext: WebSocketEventTemplateContext,
-) => {
+): ChannelMemberResponse[] => {
   const knownMembers = Object.values(simulationState.membersByCid[cid] ?? {});
 
   if (knownMembers.length > 0) {
@@ -121,7 +162,7 @@ const buildFreshContext = (
     templateContext,
   );
   const memberCount = channelMembers.length || templateContext.memberCount;
-  const baseChannel = asJsonObject(templateContext.channel) ?? {};
+  const baseChannel = templateContext.channel;
 
   return {
     ...templateContext,
@@ -211,9 +252,9 @@ const registerUserAndMember = ({
   user,
 }: {
   cid: string;
-  member?: JsonObject;
+  member?: ChannelMemberResponse;
   simulationState: SimulationState;
-  user?: JsonObject;
+  user?: UserResponse;
 }) => {
   if (user) {
     const userId = getUserId(user);
@@ -265,9 +306,9 @@ export const createInitialSimulationState = ({
 
   registerUserAndMember({
     cid,
-    member: templateContext.actorMember,
+    member: templateContext.actorMember as ChannelMemberResponse,
     simulationState: state,
-    user: templateContext.actor,
+    user: templateContext.actor as UserResponse,
   });
   registerUserAndMember({
     cid,
@@ -283,9 +324,9 @@ export const createInitialSimulationState = ({
 
     registerUserAndMember({
       cid,
-      member: memberObject,
+      member: asChannelMemberResponse(memberObject),
       simulationState: state,
-      user: userObject,
+      user: asUserResponse(userObject),
     });
   });
 
@@ -304,9 +345,9 @@ export const createInitialSimulationState = ({
 
     registerUserAndMember({
       cid,
-      member: getMessageMember(messageObject),
+      member: asChannelMemberResponse(getMessageMember(messageObject)),
       simulationState: state,
-      user: getMessageUser(messageObject),
+      user: asUserResponse(getMessageUser(messageObject)),
     });
   });
 
@@ -321,11 +362,11 @@ export const buildFreshWebSocketEventPayload = ({
   eventType: SupportedWebsocketEventType;
   simulationState: SimulationState;
   templateContext: WebSocketEventTemplateContext;
-}): JsonObject => {
+}): EventPayload => {
   const freshContext = buildFreshContext(templateContext, simulationState);
   const basePayload = websocketEventTemplateDefinitions[eventType].buildDefault(
     freshContext,
-  ) as JsonObject;
+  ) as EventPayload;
 
   switch (eventType) {
     case 'message.new':
@@ -470,15 +511,15 @@ export const trackSimulationStateFromPayload = ({
 
   registerUserAndMember({
     cid,
-    member: asJsonObject(payload.member),
+    member: asChannelMemberResponse(payload.member),
     simulationState,
-    user: asJsonObject(payload.user),
+    user: asUserResponse(payload.user),
   });
   registerUserAndMember({
     cid,
-    member: getMessageMember(message),
+    member: asChannelMemberResponse(getMessageMember(message)),
     simulationState,
-    user: getMessageUser(message),
+    user: asUserResponse(getMessageUser(message)),
   });
 
   const channelObject = asJsonObject(payload.channel);
@@ -493,9 +534,9 @@ export const trackSimulationStateFromPayload = ({
 
       registerUserAndMember({
         cid,
-        member,
+        member: asChannelMemberResponse(member),
         simulationState,
-        user: asJsonObject(member.user),
+        user: asUserResponse(member.user),
       });
     });
   }
@@ -510,14 +551,14 @@ export const emitWebSocketEventPayload = ({
 }: {
   client: StreamChat;
   eventType: SupportedWebsocketEventType;
-  payload: Event;
+  payload: EventPayload;
   simulationState: SimulationState;
   templateContext: WebSocketEventTemplateContext;
 }) => {
-  const emittedPayload: Event = {
+  const emittedPayload = {
     ...payload,
     type: eventType,
-  };
+  } as Event;
 
   client.dispatchEvent(emittedPayload);
 

examples/vite/src/AppSettings/ActionsMenu/WebSocketEventPromptDialog/websocketEventTemplates.ts

@@ -1,6 +1,14 @@
-import type { Channel, StreamChat } from 'stream-chat';
+import type {
+  Channel,
+  ChannelMemberResponse,
+  ChannelResponse,
+  StreamChat,
+  UserResponse,
+} from 'stream-chat';
 
 type JsonObject = Record<string, unknown>;
+type DebugUserResponse = UserResponse & { invisible?: boolean };
+type DebugChannelResponse = ChannelResponse & { name?: string };
 
 export const supportedWebsocketEventTypes = [
   'ai_indicator.clear',
@@ -84,11 +92,11 @@ export type WebSocketEventPresetOption = {
 };
 
 export type WebSocketEventTemplateContext = {
-  actor: JsonObject;
-  actorMember: JsonObject;
+  actor: DebugUserResponse;
+  actorMember: ChannelMemberResponse;
   actorId: string;
-  channel: JsonObject;
-  channelMembers: JsonObject[];
+  channel: DebugChannelResponse;
+  channelMembers: ChannelMemberResponse[];
   channelId: string;
   channelName: string;
   channelType: string;
@@ -97,8 +105,8 @@ export type WebSocketEventTemplateContext = {
   lastReadAt: string;
   memberCount: number;
   messageId: string;
-  otherMember: JsonObject;
-  otherUser: JsonObject;
+  otherMember: ChannelMemberResponse;
+  otherUser: DebugUserResponse;
   parentMessageId: string;
   pollId: string;
   reactionType: string;
@@ -108,7 +116,11 @@ export type WebSocketEventTemplateContext = {
   watcherCount: number;
 };
 
-const createFallbackUser = (id: string, createdAt: string): JsonObject => ({
+type BuildChannelSeedContext = Omit<WebSocketEventTemplateContext, 'channel'> & {
+  channel: Partial<DebugChannelResponse>;
+};
+
+const createFallbackUser = (id: string, createdAt: string): DebugUserResponse => ({
   banned: false,
   blocked_user_ids: [],
   created_at: createdAt,
@@ -124,10 +136,10 @@ const createFallbackUser = (id: string, createdAt: string): JsonObject => ({
   updated_at: createdAt,
 });
 
-const getUserId = (user: JsonObject) =>
+const getUserId = (user: DebugUserResponse) =>
   typeof user.id === 'string' ? user.id : 'debug-user';
 
-const createMember = (user: JsonObject): JsonObject => {
+const createMember = (user: DebugUserResponse): ChannelMemberResponse => {
   const createdAt =
     typeof user.created_at === 'string' ? user.created_at : new Date().toISOString();
 
@@ -159,9 +171,9 @@ const getMemberUserId = (member: { user?: unknown; user_id?: unknown }) => {
 };
 
 const buildChannel = (
-  context: WebSocketEventTemplateContext,
+  context: BuildChannelSeedContext,
   overrides: JsonObject = {},
-): JsonObject => {
+): DebugChannelResponse => {
   const createdAt = context.createdAt;
 
   return {
@@ -235,6 +247,7 @@ const buildChannel = (
     hidden: false,
     id: context.channelId,
     last_message_at: createdAt,
+    metadata: [],
     member_count: context.memberCount,
     members: context.channelMembers,
     name: context.channelName,
@@ -274,7 +287,7 @@ const buildNotificationChannelMutesUpdatedPayload = (
 
 const buildMuteEntry = (
   context: WebSocketEventTemplateContext,
-  target: JsonObject = context.otherUser,
+  target: DebugUserResponse = context.otherUser,
   overrides: JsonObject = {},
 ): JsonObject => ({
   created_at: context.createdAt,
@@ -749,7 +762,7 @@ export const createWebSocketEventTemplateContext = ({
   const createdAt = new Date().toISOString();
   const actorUser =
     client.user && typeof client.user === 'object'
-      ? ({ ...client.user } as JsonObject)
+      ? ({ ...client.user } as DebugUserResponse)
       : createFallbackUser('debug-user', createdAt);
   const actorId = typeof actorUser.id === 'string' ? actorUser.id : 'debug-user';
 
@@ -758,24 +771,24 @@ export const createWebSocketEventTemplateContext = ({
     (member) => getMemberUserId(member) === actorId,
   );
   const actorMember = actorMemberFromChannel
-    ? ({ ...actorMemberFromChannel } as JsonObject)
+    ? ({ ...actorMemberFromChannel } as ChannelMemberResponse)
     : createMember(actorUser);
 
   const otherMemberFromChannel = members.find(
     (member) => getMemberUserId(member) !== actorId,
   );
   const otherUser =
     otherMemberFromChannel?.user && typeof otherMemberFromChannel.user === 'object'
-      ? ({ ...otherMemberFromChannel.user } as JsonObject)
+      ? ({ ...otherMemberFromChannel.user } as DebugUserResponse)
       : createFallbackUser('debug-other-user', createdAt);
   const otherMember = otherMemberFromChannel
-    ? ({ ...otherMemberFromChannel } as JsonObject)
+    ? ({ ...otherMemberFromChannel } as ChannelMemberResponse)
     : createMember(otherUser);
   const channelMembers = (
     members.length
-      ? members.map((member) => ({ ...member }) as JsonObject)
+      ? members.map((member) => ({ ...member }) as ChannelMemberResponse)
       : [actorMember, otherMember]
-  ) as JsonObject[];
+  ) as ChannelMemberResponse[];
 
   const channelData = channel?.data as
     | {