Merge pull request #6 from ably/feat/add-granular-settings-control

Refactor: Add more granular settings to match chat capabilities.

Author: splindsay-92

.storybook/mocks/mock-ably-chat.ts

@@ -44,10 +44,6 @@ const MockOverridesContext = createContext<MockOverrides>({});
 
 const useMockOverrides = () => useContext(MockOverridesContext);
 
-interface MockChatClientResponse {
-  clientId: string;
-}
-
 const mockPaginatedResultWithItems = (items: Message[]): PaginatedResult<Message> => {
   return {
     items,
@@ -383,8 +379,10 @@ export const useChatSettings = (): Partial<ChatSettingsContextType> => {
   const overrides = useMockOverrides();
 
   const defaultSettings: ChatSettings = {
-    allowMessageUpdates: true,
-    allowMessageDeletes: true,
+    allowMessageUpdatesOwn: true,
+    allowMessageUpdatesAny: false,
+    allowMessageDeletesOwn: true,
+    allowMessageDeletesAny: false,
     allowMessageReactions: true,
   };
 

eslint.config.js

@@ -105,6 +105,7 @@ export default [
       'no-redeclare':                    'off',
       'node/no-missing-import':          'off',
       '@typescript-eslint/prefer-nullish-coalescing': 'off',
+      'unicorn/number-literal-case': 'off',
 
       /* --- naming convention ------------------------------------------ */
       '@typescript-eslint/naming-convention': [

src/components/atoms/avatar.tsx

@@ -44,7 +44,7 @@ const getRandomColor = (text: string): string => {
   // Generate a deterministic hash from the text
   let hash = 0;
   for (let i = 0; i < text.length; i++) {
-    hash = ((hash << 5) - hash + (text.codePointAt(i) ?? 0)) & 0xFFFFFFFF;
+    hash = ((hash << 5) - hash + (text.codePointAt(i) ?? 0)) & 0xffffffff;
   }
 
   const colorIndex = Math.abs(hash) % colors.length;

src/components/molecules/chat-message.tsx

@@ -53,22 +53,19 @@ export interface ChatMessageProps {
 
   /**
    * Optional callback triggered when the user saves an edited message.
-   * Only called for messages owned by the current user.
    * @param message - The original message object being edited
    * @param newText - The updated message text after editing
    */
   onEdit?: (message: Message, newText: string) => void;
 
   /**
    * Optional callback triggered when the user confirms message deletion.
-   * Only called for messages owned by the current user after confirmation dialog.
    * @param message - The message object to be deleted
    */
   onDelete?: (message: Message) => void;
 
   /**
    * Optional callback triggered when a user adds an emoji reaction to the message.
-   * Can be called by any user, not just the message owner.
    * @param message - The message object receiving the reaction
    * @param emoji - The emoji character being added as a reaction
    */

src/components/molecules/chat-window.tsx

@@ -3,7 +3,6 @@ import { useMessages, usePresence } from '@ably/chat/react';
 import { clsx } from 'clsx';
 import React, { useCallback } from 'react';
 
-import { useChatSettings } from '../../hooks/use-chat-settings.tsx';
 import { useMessageWindow } from '../../hooks/use-message-window.tsx';
 import { ChatMessageList } from './chat-message-list.tsx';
 import { ChatWindowFooter } from './chat-window-footer.tsx';
@@ -271,9 +270,6 @@ export const ChatWindow = ({
   className,
   onError,
 }: ChatWindowProps) => {
-  const { getEffectiveSettings } = useChatSettings();
-  const settings = getEffectiveSettings(roomName);
-
   const {
     deleteMessage,
     update: updateMessageRemote,
@@ -381,10 +377,10 @@ export const ChatWindow = ({
         }}
         hasMoreHistory={hasMoreHistory}
         enableTypingIndicators={enableTypingIndicators}
-        onEdit={settings.allowMessageUpdates ? handleMessageUpdate : undefined}
-        onDelete={settings.allowMessageDeletes ? handleMessageDelete : undefined}
-        onReactionAdd={settings.allowMessageReactions ? handleReactionAdd : undefined}
-        onReactionRemove={settings.allowMessageReactions ? handleReactionRemove : undefined}
+        onEdit={handleMessageUpdate}
+        onDelete={handleMessageDelete}
+        onReactionAdd={handleReactionAdd}
+        onReactionRemove={handleReactionRemove}
         onMessageInView={showMessagesAroundSerial}
         onViewLatest={showLatestMessages}
       ></ChatMessageList>

src/components/molecules/message-actions.tsx

@@ -1,5 +1,7 @@
+import { useRoom } from '@ably/chat/react';
 import React from 'react';
 
+import { useChatSettings } from '../../hooks/use-chat-settings.tsx';
 import { Button } from '../atoms/button.tsx';
 import { Icon } from '../atoms/icon.tsx';
 
@@ -27,8 +29,8 @@ export interface MessageActionsProps {
    * Callback function triggered when the edit button is clicked.
    * Should initiate edit mode for the message, typically replacing the message
    * content with an editable input field or editor component.
-   * Only displayed when isOwn is true.
-   *
+   * Displayed when:
+   * - The message is owned by the current user and allowMessageUpdatesOwn is true, or allowMessageUpdatesAny is true
    *
    * @example
    * ```tsx
@@ -44,8 +46,8 @@ export interface MessageActionsProps {
   /**
    * Callback function triggered when the delete button is clicked.
    * Should handle message deletion, typically with confirmation dialog.
-   * Only displayed when isOwn is true.
-   *
+   * Displayed when:
+   * - The message is owned by the current user and allowMessageDeletesOwn is true, or allowMessageDeletesAny is true
    *
    * @example
    * ```tsx
@@ -59,17 +61,12 @@ export interface MessageActionsProps {
 
   /**
    * Whether the message belongs to the current user.
-   * Determines if edit and delete buttons are shown.
-   * When false, only the reaction button is displayed.
-   *
-   * - Own messages: Show all actions (reaction, edit, delete)
-   * - Other messages: Show only reaction button
+   * Used in combination with chat settings to determine if edit and delete buttons are shown.
    *
    * @example
    * ```tsx
    * // Basic ownership check
    * isOwn={message.senderId === currentUser.id}
-   *
    * ```
    */
   isOwn: boolean;
@@ -116,10 +113,35 @@ export const MessageActions = ({
   onDeleteButtonClicked,
   isOwn,
 }: MessageActionsProps) => {
-  // Check if there are any actions to display
-  const hasReactionAction = onReactionButtonClicked !== undefined;
-  const hasEditAction = isOwn && onEditButtonClicked !== undefined;
-  const hasDeleteAction = isOwn && onDeleteButtonClicked !== undefined;
+  // Get the current room name
+  const { roomName } = useRoom();
+
+  // Get chat settings for the current room
+  const { getEffectiveSettings } = useChatSettings();
+  const settings = getEffectiveSettings(roomName);
+
+  const {
+    allowMessageUpdatesOwn,
+    allowMessageUpdatesAny,
+    allowMessageDeletesOwn,
+    allowMessageDeletesAny,
+    allowMessageReactions,
+  } = settings;
+
+  // Check if there are any actions to display based on settings and permissions
+  const hasReactionAction = allowMessageReactions && onReactionButtonClicked !== undefined;
+
+  // Can edit if:
+  // - User owns the message AND can edit own messages, OR
+  // - User can edit any message
+  const canEdit = (isOwn && allowMessageUpdatesOwn) || allowMessageUpdatesAny;
+  const hasEditAction = canEdit && onEditButtonClicked !== undefined;
+
+  // Can delete if:
+  // - User owns the message AND can delete own messages, OR
+  // - User can delete any message
+  const canDelete = (isOwn && allowMessageDeletesOwn) || allowMessageDeletesAny;
+  const hasDeleteAction = canDelete && onDeleteButtonClicked !== undefined;
 
   // If no actions are available, don't render anything
   if (!hasReactionAction && !hasEditAction && !hasDeleteAction) {
@@ -128,7 +150,7 @@ export const MessageActions = ({
 
   return (
     <div
-      className="absolute -top-10 right-0 z-10 flex items-center gap-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-md p-1"
+      className="absolute -top-9 right-0 z-10 flex items-center gap-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-md p-1"
       role="toolbar"
       aria-label="Message actions"
     >

src/context/chat-settings-context.tsx

@@ -1,10 +1,17 @@
 import { createContext } from 'react';
 
+/**
+ * Interface defining chat feature settings that control UI behavior
+ */
 export interface ChatSettings {
-  /** Whether users can update their messages after sending */
-  allowMessageUpdates: boolean;
-  /** Whether users can delete their messages */
-  allowMessageDeletes: boolean;
+  /** Whether users can update their own messages after sending */
+  allowMessageUpdatesOwn: boolean;
+  /** Whether users can update any message (not just their own) */
+  allowMessageUpdatesAny: boolean;
+  /** Whether users can delete their own messages */
+  allowMessageDeletesOwn: boolean;
+  /** Whether users can delete any message (not just their own) */
+  allowMessageDeletesAny: boolean;
   /** Whether users can add reactions to messages */
   allowMessageReactions: boolean;
 }

src/providers/avatar-provider.tsx

@@ -136,7 +136,7 @@ const useAvatarGeneration = (customColors?: string[]) => {
     (text: string): string => {
       let hash = 0;
       for (let i = 0; i < text.length; i++) {
-        hash = ((hash << 5) - hash + (text.codePointAt(i) ?? 0)) & 0xFFFFFFFF;
+        hash = ((hash << 5) - hash + (text.codePointAt(i) ?? 0)) & 0xffffffff;
       }
       return avatarColors[Math.abs(hash) % avatarColors.length] || 'bg-gray-500';
     },

src/providers/chat-settings-provider.tsx

@@ -7,8 +7,10 @@ import {
 } from '../context/chat-settings-context.tsx';
 
 export const DEFAULT_SETTINGS: ChatSettings = {
-  allowMessageUpdates: true,
-  allowMessageDeletes: true,
+  allowMessageUpdatesOwn: true,
+  allowMessageUpdatesAny: false,
+  allowMessageDeletesOwn: true,
+  allowMessageDeletesAny: false,
   allowMessageReactions: true,
 };
 
@@ -40,20 +42,26 @@ export interface ChatSettingsProviderProps {
  * but do not affect the underlying Ably Chat functionality. If you wish to ensure no user can edit or delete messages,
  * you must also configure the Ably client capabilities accordingly.
  *
- *
  * @example
  * ```tsx
  * const globalSettings = {
- *   allowMessageUpdates: false,
- *   allowMessageDeletes: true,
+ *   allowMessageUpdatesOwn: true,
+ *   allowMessageUpdatesAny: false,
+ *   allowMessageDeletesOwn: true,
+ *   allowMessageDeletesAny: false,
  *   allowMessageReactions: true
  * };
  *
  * const roomSettings = {
- *   'general': { allowMessageUpdates: true },
+ *   'general': {
+ *     allowMessageUpdatesOwn: true,
+ *     allowMessageUpdatesAny: true // Allow user to update any message in general room
+ *   },
  *   'announcements': {
- *     allowMessageUpdates: false,
- *     allowMessageDeletes: false
+ *     allowMessageUpdatesOwn: false,
+ *     allowMessageUpdatesAny: false,
+ *     allowMessageDeletesOwn: false,
+ *     allowMessageDeletesAny: true // Allow user to delete any messages in announcements
  *   }
  * };
  *

src/stories/chat-message-list.stories.tsx

@@ -11,6 +11,7 @@ import {
   MockChatClient,
 } from '../../.storybook/mocks/mock-ably-chat.ts';
 import { AvatarProvider } from '../providers/avatar-provider.tsx';
+import { ChatSettingsProvider } from '../providers';
 
 const messages = [
   createMockMessage({
@@ -61,15 +62,20 @@ const meta: Meta<StoryProps> = {
   component: ChatMessageList,
   decorators: [
     (Story, context) => (
-      <ChatClientProvider client={new MockChatClient()} mockOverrides={context.args.mockOverrides}>
-        <AvatarProvider>
-          <div className="h-screen w-full flex items-center justify-center bg-gray-50 dark:bg-gray-950">
-            <div className="h-full max-w-xl w-full border rounded-md overflow-hidden bg-white dark:bg-gray-900 flex flex-col">
-              <Story />
+      <ChatSettingsProvider>
+        <ChatClientProvider
+          client={new MockChatClient()}
+          mockOverrides={context.args.mockOverrides}
+        >
+          <AvatarProvider>
+            <div className="h-screen w-full flex items-center justify-center bg-gray-50 dark:bg-gray-950">
+              <div className="h-full max-w-xl w-full border rounded-md overflow-hidden bg-white dark:bg-gray-900 flex flex-col">
+                <Story />
+              </div>
             </div>
-          </div>
-        </AvatarProvider>
-      </ChatClientProvider>
+          </AvatarProvider>
+        </ChatClientProvider>
+      </ChatSettingsProvider>
     ),
   ],
   parameters: {