From 001570464cb4db2f3b6ee16ee61b03ec3b9fbfc8 Mon Sep 17 00:00:00 2001
From: Enrico Ros <enrico.ros@gmail.com>
Date: Sun, 4 Feb 2024 01:58:27 -0800
Subject: [PATCH] Show Split chats in the Drawer. Fixes #389

---
 src/apps/chat/AppChat.tsx                     |  3 +-
 .../chat/components/applayout/ChatDrawer.tsx  |  6 ++--
 .../components/applayout/ChatDrawerItem.tsx   | 34 +++++++++++--------
 3 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/src/apps/chat/AppChat.tsx b/src/apps/chat/AppChat.tsx
index fb968ce9f..0b0a14454 100644
--- a/src/apps/chat/AppChat.tsx
+++ b/src/apps/chat/AppChat.tsx
@@ -402,6 +402,7 @@ export function AppChat() {
       <ChatDrawerMemo
         activeConversationId={focusedConversationId}
         activeFolderId={activeFolderId}
+        chatPanesConversationIds={chatPanes.map(pane => pane.conversationId).filter(Boolean) as DConversationId[]}
         disableNewButton={isFocusedChatEmpty}
         onConversationActivate={setFocusedConversationId}
         onConversationDelete={handleConversationDelete}
@@ -411,7 +412,7 @@ export function AppChat() {
         onConversationsDeleteAll={handleConversationsDeleteAll}
         setActiveFolderId={setActiveFolderId}
       />,
-    [activeFolderId, focusedConversationId, handleConversationDelete, handleConversationExport, handleConversationImportDialog, handleConversationNew, handleConversationsDeleteAll, isFocusedChatEmpty, setFocusedConversationId],
+    [activeFolderId, chatPanes, focusedConversationId, handleConversationDelete, handleConversationExport, handleConversationImportDialog, handleConversationNew, handleConversationsDeleteAll, isFocusedChatEmpty, setFocusedConversationId],
   );
 
   const menuItems = React.useMemo(() =>
diff --git a/src/apps/chat/components/applayout/ChatDrawer.tsx b/src/apps/chat/components/applayout/ChatDrawer.tsx
index de4983473..2337c5897 100644
--- a/src/apps/chat/components/applayout/ChatDrawer.tsx
+++ b/src/apps/chat/components/applayout/ChatDrawer.tsx
@@ -51,7 +51,7 @@ export const useFolders = (activeFolderId: string | null) => useFolderStore(({ e
  * Optimization: return a reduced version of the DConversation object for 'Drawer Items' purposes,
  * to avoid unnecessary re-renders on each new character typed by the assistant
  */
-export const useChatNavigationItemsData = (activeFolder: DFolder | null, allFolders: DFolder[], activeConversationId: DConversationId | null): ChatNavigationItemData[] =>
+export const useChatNavigationItemsData = (activeFolder: DFolder | null, allFolders: DFolder[], activeConversationId: DConversationId | null, chatPanesConversationIds: DConversationId[]): ChatNavigationItemData[] =>
   useChatStore(({ conversations }) => {
 
     const activeConversations = activeFolder
@@ -61,6 +61,7 @@ export const useChatNavigationItemsData = (activeFolder: DFolder | null, allFold
     return activeConversations.map((_c): ChatNavigationItemData => ({
       conversationId: _c.id,
       isActive: _c.id === activeConversationId,
+      isAlsoOpen: chatPanesConversationIds.includes(_c.id),
       isEmpty: !_c.messages.length && !_c.userTitle,
       title: conversationTitle(_c),
       folder: !allFolders.length
@@ -84,6 +85,7 @@ export const ChatDrawerMemo = React.memo(ChatDrawer);
 function ChatDrawer(props: {
   activeConversationId: DConversationId | null,
   activeFolderId: string | null,
+  chatPanesConversationIds: DConversationId[],
   disableNewButton: boolean,
   onConversationActivate: (conversationId: DConversationId) => void,
   onConversationDelete: (conversationId: DConversationId, bypassConfirmation: boolean) => void,
@@ -103,7 +105,7 @@ function ChatDrawer(props: {
   // external state
   const { closeDrawer, closeDrawerOnMobile } = useOptimaDrawers();
   const { activeFolder, allFolders, enableFolders, toggleEnableFolders } = useFolders(props.activeFolderId);
-  const chatNavItems = useChatNavigationItemsData(activeFolder, allFolders, props.activeConversationId);
+  const chatNavItems = useChatNavigationItemsData(activeFolder, allFolders, props.activeConversationId, props.chatPanesConversationIds);
   const showSymbols = useUIPreferencesStore(state => state.zenMode !== 'cleaner');
 
   // derived state
diff --git a/src/apps/chat/components/applayout/ChatDrawerItem.tsx b/src/apps/chat/components/applayout/ChatDrawerItem.tsx
index 9f578335b..9825b9723 100644
--- a/src/apps/chat/components/applayout/ChatDrawerItem.tsx
+++ b/src/apps/chat/components/applayout/ChatDrawerItem.tsx
@@ -24,7 +24,7 @@ import { InlineTextarea } from '~/common/components/InlineTextarea';
 
 
 export const FadeInButton = styled(IconButton)({
-  opacity: 0.5,
+  opacity: 0.667,
   transition: 'opacity 0.2s',
   '&:hover': { opacity: 1 },
 });
@@ -35,6 +35,7 @@ export const ChatDrawerItemMemo = React.memo(ChatDrawerItem);
 export interface ChatNavigationItemData {
   conversationId: DConversationId;
   isActive: boolean;
+  isAlsoOpen: boolean;
   isEmpty: boolean;
   title: string;
   folder: DFolder | null | undefined; // null: 'All', undefined: do not show folder select
@@ -67,7 +68,7 @@ function ChatDrawerItem(props: {
 
   // derived state
   const { onConversationExport, onConversationFolderChange } = props;
-  const { conversationId, isActive, title, folder, messageCount, assistantTyping, systemPurposeId, searchFrequency } = props.item;
+  const { conversationId, isActive, isAlsoOpen, title, folder, messageCount, assistantTyping, systemPurposeId, searchFrequency } = props.item;
   const isNew = messageCount === 0;
 
 
@@ -210,19 +211,28 @@ function ChatDrawerItem(props: {
     ), [progress]);
 
 
-  return isActive ? (
+  return (isActive || isAlsoOpen) ? (
 
-    // Active Conversation
+    // Active or Also Open
     <Sheet
-      variant={isActive ? 'solid' : 'plain'}
+      variant={isActive ? 'solid' : 'outlined'}
       invertedColors={isActive}
+      onClick={!isActive ? handleConversationActivate : undefined}
       sx={{
         // common
+        // position: 'relative', // for the progress bar (now disabled)
         '--ListItem-minHeight': '2.75rem',
-        position: 'relative', // for the progress bar
-        // '--variant-borderWidth': '0.125rem',
-        border: 'none', // there's a default border of 1px and invisible.. hmm
+
+        // differences between primary and secondary variants
+        ...(isActive ? {
+          border: 'none', // there's a default border of 1px and invisible.. hmm
+        } : {
+          // '--variant-borderWidth': '0.125rem',
+          cursor: 'pointer',
+        }),
+
         // style
+        backgroundColor: isActive ? 'neutral.solidActiveBg' : 'neutral.softBg',
         borderRadius: 'md',
         mx: '0.25rem',
         '&:hover > button': {
@@ -235,14 +245,11 @@ function ChatDrawerItem(props: {
 
         {/* Title row */}
         <Box sx={{ display: 'flex', gap: 'var(--ListItem-gap)', minHeight: '2.25rem', alignItems: 'center' }}>
-
           {titleRowComponent}
-
         </Box>
 
         {/* buttons row */}
         <Box sx={{ display: 'flex', gap: 1, minHeight: '2.25rem', alignItems: 'center' }}>
-
           <ListItemDecorator />
 
           {/* Current Folder color, and change initiator */}
@@ -284,7 +291,6 @@ function ChatDrawerItem(props: {
             </Tooltip>
           </>}
 
-
           {/* --> */}
           <Box sx={{ flex: 1 }} />
 
@@ -304,13 +310,13 @@ function ChatDrawerItem(props: {
               </FadeInButton>
             </Tooltip>
           </>}
-
         </Box>
 
       </ListItem>
 
       {/* Optional progress bar, underlay */}
-      {progressBarFixedComponent}
+      {/* NOTE: disabled on 20240204: quite distracting on the active chat sheet */}
+      {/*{progressBarFixedComponent}*/}
 
     </Sheet>