Rename 'broadcast' to 'multicast' in code, and much improve the Panes and Multicase modes - #388

enricoros · enricoros · commit 2e7f2b600484 · 2024-02-03T19:59:27.000-08:00
diff --git a/src/apps/chat/AppChat.tsx b/src/apps/chat/AppChat.tsx
@@ -55,7 +55,7 @@ const SPECIAL_ID_WIPE_ALL: DConversationId = 'wipe-chats';
 export function AppChat() {
 
   // state
-  const [isComposerBroadcast, setIsComposerBroadcast] = React.useState(false);
+  const [isComposerMulticast, setIsComposerMulticast] = React.useState(false);
   const [isMessageSelectionMode, setIsMessageSelectionMode] = React.useState(false);
   const [diagramConfig, setDiagramConfig] = React.useState<DiagramConfig | null>(null);
   const [tradeConfig, setTradeConfig] = React.useState<TradeConfig | null>(null);
@@ -116,10 +116,9 @@ export function AppChat() {
 
   // Window actions
 
-  const isSplitPane = chatPanes.length > 1;
-  const panesConversationIDs = chatPanes.length > 0 ? chatPanes.map((pane) => pane.conversationId) : [null];
-  const showBroadcastControl = isSplitPane && new Set(panesConversationIDs).size >= 2;
-  const isRealBroadcast = showBroadcastControl && isComposerBroadcast;
+  const isMultiPane = chatPanes.length >= 2;
+  const isMultiConversationId = isMultiPane && new Set(chatPanes.map((pane) => pane.conversationId)).size >= 2;
+  const willMulticast = isComposerMulticast && isMultiConversationId;
 
   const setFocusedConversationId = React.useCallback((conversationId: DConversationId | null) => {
     conversationId && openConversationInFocusedPane(conversationId);
@@ -129,12 +128,12 @@ export function AppChat() {
     conversationId && openConversationInSplitPane(conversationId);
   }, [openConversationInSplitPane]);
 
-  const toggleSplitPane = React.useCallback(() => {
-    if (isSplitPane)
+  const handleToggleMultiPane = React.useCallback(() => {
+    if (isMultiPane)
       removeOtherPanes();
     else
       duplicateFocusedPane();
-  }, [duplicateFocusedPane, isSplitPane, removeOtherPanes]);
+  }, [duplicateFocusedPane, isMultiPane, removeOtherPanes]);
 
   const handleNavigateHistory = React.useCallback((direction: 'back' | 'forward') => {
     if (navigateHistoryInFocusedPane(direction))
@@ -240,19 +239,19 @@ export function AppChat() {
     }
     const userText = multiPartMessage[0].text;
 
-    // broadcast mode scatterer
-    const uniqueConversationIds = new Set([conversationId]);
-    if (isRealBroadcast)
-      chatPanes.forEach(pane => pane.conversationId && uniqueConversationIds.add(pane.conversationId));
+    // multicast: send the message to all the panes
+    const uniqueIds = new Set([conversationId]);
+    if (willMulticast)
+      chatPanes.forEach(pane => pane.conversationId && uniqueIds.add(pane.conversationId));
 
-    // we loop to handle both the normal and broadcast modes
+    // we loop to handle both the normal and multicast modes
     let enqueued = false;
-    for (const targetConversationId of uniqueConversationIds) {
-      const targetConversation = getConversation(targetConversationId);
-      if (targetConversation) {
+    for (const _cId of uniqueIds) {
+      const _conversation = getConversation(_cId);
+      if (_conversation) {
         // start execution fire/forget
-        void _handleExecute(chatModeId, targetConversationId, [
-          ...targetConversation.messages,
+        void _handleExecute(chatModeId, _cId, [
+          ..._conversation.messages,
           createDMessage('user', userText),
         ]);
         enqueued = true;
@@ -321,7 +320,7 @@ export function AppChat() {
   const handleConversationBranch = React.useCallback((conversationId: DConversationId, messageId: string | null): DConversationId | null => {
     showNextTitleChange.current = true;
     const branchedConversationId = branchConversation(conversationId, messageId);
-    if (isSplitPane)
+    if (isMultiPane)
       openSplitConversationId(branchedConversationId);
     else
       setFocusedConversationId(branchedConversationId);
@@ -335,7 +334,7 @@ export function AppChat() {
       },
     });
     return branchedConversationId;
-  }, [branchConversation, isSplitPane, openSplitConversationId, setFocusedConversationId]);
+  }, [branchConversation, isMultiPane, openSplitConversationId, setFocusedConversationId]);
 
   const handleConversationFlatten = React.useCallback((conversationId: DConversationId) => setFlattenConversationId(conversationId), []);
 
@@ -422,14 +421,14 @@ export function AppChat() {
         hasConversations={!areChatsEmpty}
         isConversationEmpty={isFocusedChatEmpty}
         isMessageSelectionMode={isMessageSelectionMode}
-        isSplitPane={isSplitPane}
-        setIsMessageSelectionMode={setIsMessageSelectionMode}
+        isMultiPane={isMultiPane}
         onConversationBranch={handleConversationBranch}
         onConversationClear={handleConversationClear}
         onConversationFlatten={handleConversationFlatten}
-        onToggleSplitPanes={toggleSplitPane}
+        onToggleMultiPane={handleToggleMultiPane}
+        setIsMessageSelectionMode={setIsMessageSelectionMode}
       />,
-    [areChatsEmpty, focusedConversationId, handleConversationBranch, handleConversationClear, handleConversationFlatten, isFocusedChatEmpty, isMessageSelectionMode, isMobile, isSplitPane, toggleSplitPane],
+    [areChatsEmpty, focusedConversationId, handleConversationBranch, handleConversationClear, handleConversationFlatten, handleToggleMultiPane, isFocusedChatEmpty, isMessageSelectionMode, isMobile, isMultiPane],
   );
 
   usePluggableOptimaLayout(drawerContent, centerItems, menuItems, 'AppChat');
@@ -456,18 +455,23 @@ export function AppChat() {
               const setFocus = chatPanes.length < 2 || !event.altKey;
               setFocusedPane(setFocus ? idx : -1);
             }}
-            onCollapse={() => removePane(idx)}
+            onCollapse={() => {
+              // the small delay does not look good but lets the Panel state settle
+              // setTimeout(() => removePane(idx), 50);
+              // NOTE: seems there's an issue anyway with the Pane locking the screen, so we'll just call it directly
+              removePane(idx);
+            }}
             style={{
               // for anchoring the scroll button in place
               position: 'relative',
-              ...(panesConversationIDs.length >= 2 ? {
+              ...(isMultiPane ? {
                 borderRadius: '0.375rem',
                 border: `2px solid ${idx === focusedPaneIndex
-                  ? (isRealBroadcast ? theme.palette.warning.solidBg : theme.palette.primary.solidBg)
-                  : (isRealBroadcast ? theme.palette.warning.softActiveBg : theme.palette.background.level1)}`,
-                filter: (isRealBroadcast || idx === focusedPaneIndex)
-                  ? undefined :
-                  'grayscale(60%)',
+                  ? ((willMulticast || !isMultiConversationId) ? theme.palette.warning.solidBg : theme.palette.primary.solidBg)
+                  : ((willMulticast || !isMultiConversationId) ? theme.palette.warning.softActiveBg : theme.palette.background.level1)}`,
+                filter: (!willMulticast && idx !== focusedPaneIndex)
+                  ? (!isMultiConversationId ? 'grayscale(66.67%)' /* clone of the same */ : 'grayscale(66.67%)')
+                  : undefined,
               } : {}),
             }}
           >
@@ -529,12 +533,11 @@ export function AppChat() {
       composerTextAreaRef={composerTextAreaRef}
       conversationId={focusedConversationId}
       capabilityHasT2I={capabilityHasT2I}
+      isMulticast={!isMultiConversationId ? null : isComposerMulticast}
       isDeveloperMode={focusedSystemPurposeId === 'Developer'}
       onAction={handleComposerAction}
       onTextImagine={handleTextImagine}
-      isBroadcast={isComposerBroadcast}
-      onSetBroadcast={setIsComposerBroadcast}
-      showBroadcastControl={showBroadcastControl}
+      setIsMulticast={setIsComposerMulticast}
       sx={{
         zIndex: 21, // position: 'sticky', bottom: 0,
         backgroundColor: themeBgAppChatComposer,
diff --git a/src/apps/chat/components/applayout/ChatPageMenuItems.tsx b/src/apps/chat/components/applayout/ChatPageMenuItems.tsx
@@ -13,7 +13,6 @@ import VerticalSplitIcon from '@mui/icons-material/VerticalSplit';
 import VerticalSplitOutlinedIcon from '@mui/icons-material/VerticalSplitOutlined';
 
 import type { DConversationId } from '~/common/state/store-chats';
-import { GoodTooltip } from '~/common/components/GoodTooltip';
 import { KeyStroke } from '~/common/components/KeyStroke';
 import { useOptimaDrawers } from '~/common/layout/optima/useOptimaDrawers';
 
@@ -26,12 +25,12 @@ export function ChatPageMenuItems(props: {
   hasConversations: boolean,
   isConversationEmpty: boolean,
   isMessageSelectionMode: boolean,
-  isSplitPane: boolean
-  setIsMessageSelectionMode: (isMessageSelectionMode: boolean) => void,
+  isMultiPane: boolean,
   onConversationBranch: (conversationId: DConversationId, messageId: string | null) => void,
   onConversationClear: (conversationId: DConversationId) => void,
   onConversationFlatten: (conversationId: DConversationId) => void,
-  onToggleSplitPanes: () => void,
+  onToggleMultiPane: () => void,
+  setIsMessageSelectionMode: (isMessageSelectionMode: boolean) => void,
 }) {
 
   // external state
@@ -80,16 +79,13 @@ export function ChatPageMenuItems(props: {
     </MenuItem>
 
     {/* Split/Unsplit panes */}
-    <GoodTooltip title={props.isSplitPane ? 'Close Split Panes' : 'Split Conversation Vertically'}>
-      <MenuItem onClick={props.onToggleSplitPanes}>
-        <ListItemDecorator>{
-          props.isMobile
-            ? (props.isSplitPane ? <HorizontalSplitIcon /> : <HorizontalSplitOutlinedIcon />)
-            : (props.isSplitPane ? <VerticalSplitIcon /> : <VerticalSplitOutlinedIcon />)
-        }</ListItemDecorator>
-        {props.isSplitPane ? 'Unsplit' : props.isMobile ? 'Split Down' : 'Split Right'}
-      </MenuItem>
-    </GoodTooltip>
+    <MenuItem onClick={props.onToggleMultiPane}>
+      <ListItemDecorator>{props.isMobile
+        ? (props.isMultiPane ? <HorizontalSplitIcon /> : <HorizontalSplitOutlinedIcon />)
+        : (props.isMultiPane ? <VerticalSplitIcon /> : <VerticalSplitOutlinedIcon />)
+      }</ListItemDecorator>
+      {props.isMultiPane ? 'Unsplit' : props.isMobile ? 'Split Down' : 'Split Right'}
+    </MenuItem>
 
     <ListDivider />
 
diff --git a/src/apps/chat/components/composer/Composer.tsx b/src/apps/chat/components/composer/Composer.tsx
@@ -23,8 +23,8 @@ import type { DLLM } from '~/modules/llms/store-llms';
 import type { LLMOptionsOpenAI } from '~/modules/llms/vendors/openai/openai.vendor';
 import { useBrowseCapability } from '~/modules/browse/store-module-browsing';
 
-import { ChatBroadcastOffIcon } from '~/common/components/icons/ChatBroadcastOffIcon';
-import { ChatBroadcastOnIcon } from '~/common/components/icons/ChatBroadcastOnIcon';
+import { ChatMulticastOffIcon } from '~/common/components/icons/ChatMulticastOffIcon';
+import { ChatMulticastOnIcon } from '~/common/components/icons/ChatMulticastOnIcon';
 import { DConversationId, useChatStore } from '~/common/state/store-chats';
 import { PreferencesTab, useOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
 import { SpeechResult, useSpeechRecognition } from '~/common/components/useSpeechRecognition';
@@ -84,12 +84,11 @@ export function Composer(props: {
   composerTextAreaRef: React.RefObject<HTMLTextAreaElement>;
   conversationId: DConversationId | null;
   capabilityHasT2I: boolean;
+  isMulticast: boolean | null;
   isDeveloperMode: boolean;
   onAction: (chatModeId: ChatModeId, conversationId: DConversationId, multiPartMessage: ComposerOutputMultiPart) => boolean;
   onTextImagine: (conversationId: DConversationId, text: string) => void;
-  isBroadcast: boolean;
-  onSetBroadcast: (broadcast: boolean) => void;
-  showBroadcastControl: boolean;
+  setIsMulticast: (on: boolean) => void;
   sx?: SxProps;
 }) {
 
@@ -716,14 +715,16 @@ export function Composer(props: {
 
             </Box>
 
-            {/* [desktop] Broadcast switch (under the Chat button) */}
-            {isDesktop && props.showBroadcastControl && isText && (
-              <FormControl orientation='horizontal' sx={{ minHeight: '2.25rem', justifyContent: 'space-between', alignItems: 'center' }}>
-                <FormLabel sx={{ gap: 1 }}>
-                  {props.isBroadcast ? <ChatBroadcastOnIcon sx={{ color: 'warning.solidBg' }} /> : <ChatBroadcastOffIcon />}
-                  Broadcast {props.isBroadcast ? ' · On' : ''}
+            {/* [desktop] Multicast switch (under the Chat button) */}
+            {isDesktop && props.isMulticast !== null && (
+              <FormControl orientation='horizontal' sx={{ minHeight: '2.25rem', justifyContent: 'space-between' }}>
+                <FormLabel sx={{ gap: 1, flexFlow: 'row nowrap' }}>
+                  <Box sx={{ display: { xs: 'none', lg: 'inline-block' } }}>
+                    {props.isMulticast ? <ChatMulticastOnIcon sx={{ color: 'warning.solidBg' }} /> : <ChatMulticastOffIcon />}
+                  </Box>
+                  {props.isMulticast ? 'Multichat · On' : 'Multichat'}
                 </FormLabel>
-                <Switch color={props.isBroadcast ? 'primary' : undefined} checked={props.isBroadcast} onChange={(e) => props.onSetBroadcast(e.target.checked)} />
+                <Switch color={props.isMulticast ? 'primary' : undefined} checked={props.isMulticast} onChange={(e) => props.setIsMulticast(e.target.checked)} />
               </FormControl>
             )}
 
diff --git a/src/common/components/icons/ChatMulticastOffIcon.tsx b/src/common/components/icons/ChatMulticastOffIcon.tsx
@@ -6,7 +6,7 @@ import { SvgIcon } from '@mui/joy';
 /*
  * Source: the PodcastsIcon from '@mui/icons-material/Podcasts';
  */
-export function ChatBroadcastOffIcon(props: { sx?: SxProps }) {
+export function ChatMulticastOffIcon(props: { sx?: SxProps }) {
   return (
     <SvgIcon viewBox='0 0 24 24' width='24' height='24' {...props}>
       <path d='M14 12c0 .74-.4 1.38-1 1.72V22h-2v-8.28c-.6-.35-1-.98-1-1.72 0-1.1.9-2 2-2s2 .9 2 2'></path>
diff --git a/src/common/components/icons/ChatMulticastOnIcon.tsx b/src/common/components/icons/ChatMulticastOnIcon.tsx
@@ -6,7 +6,7 @@ import { SvgIcon } from '@mui/joy';
 /*
  * Source: the PodcastsIcon from '@mui/icons-material/Podcasts';
  */
-export function ChatBroadcastOnIcon(props: { sx?: SxProps }) {
+export function ChatMulticastOnIcon(props: { sx?: SxProps }) {
   return (
     <SvgIcon viewBox='0 0 24 24' width='24' height='24' {...props}>
       <path d='M14 12c0 .74-.4 1.38-1 1.72V22h-2v-8.28c-.6-.35-1-.98-1-1.72 0-1.1.9-2 2-2s2 .9 2 2m-2-6c-3.31 0-6 2.69-6 6 0 1.74.75 3.31 1.94 4.4l1.42-1.42C8.53 14.25 8 13.19 8 12c0-2.21 1.79-4 4-4s4 1.79 4 4c0 1.19-.53 2.25-1.36 2.98l1.42 1.42C17.25 15.31 18 13.74 18 12c0-3.31-2.69-6-6-6m0-4C6.48 2 2 6.48 2 12c0 2.85 1.2 5.41 3.11 7.24l1.42-1.42C4.98 16.36 4 14.29 4 12c0-4.41 3.59-8 8-8s8 3.59 8 8c0 2.29-.98 4.36-2.53 5.82l1.42 1.42C20.8 17.41 22 14.85 22 12c0-5.52-4.48-10-10-10'></path>
diff --git a/src/common/components/useSingleTabEnforcer.ts b/src/common/components/useSingleTabEnforcer.ts
@@ -7,7 +7,7 @@ import * as React from 'react';
  */
 class AloneDetector {
   private readonly clientId: string;
-  private readonly broadcastChannel: BroadcastChannel;
+  private readonly bChannel: BroadcastChannel;
 
   private aloneCallback: ((isAlone: boolean) => void) | null;
   private aloneTimerId: number | undefined;
@@ -17,15 +17,15 @@ class AloneDetector {
     this.clientId = Math.random().toString(36).substring(2, 10);
     this.aloneCallback = onAlone;
 
-    this.broadcastChannel = new BroadcastChannel(channelName);
-    this.broadcastChannel.onmessage = this.handleIncomingMessage;
+    this.bChannel = new BroadcastChannel(channelName);
+    this.bChannel.onmessage = this.handleIncomingMessage;
 
   }
 
   public onUnmount(): void {
     // close channel
-    this.broadcastChannel.onmessage = null;
-    this.broadcastChannel.close();
+    this.bChannel.onmessage = null;
+    this.bChannel.close();
 
     // clear timeout
     if (this.aloneTimerId)
@@ -38,7 +38,7 @@ class AloneDetector {
   public checkIfAlone(): void {
 
     // triggers other clients
-    this.broadcastChannel.postMessage({ type: 'CHECK', sender: this.clientId });
+    this.bChannel.postMessage({ type: 'CHECK', sender: this.clientId });
 
     // if no response within 500ms, assume this client is alone
     this.aloneTimerId = window.setTimeout(() => {
@@ -56,7 +56,7 @@ class AloneDetector {
     switch (event.data.type) {
 
       case 'CHECK':
-        this.broadcastChannel.postMessage({ type: 'ALIVE', sender: this.clientId });
+        this.bChannel.postMessage({ type: 'ALIVE', sender: this.clientId });
         break;
 
       case 'ALIVE':
