From 9b927c29aa8418119d5c7fc4012ec10cd36561ee Mon Sep 17 00:00:00 2001 From: Enrico Ros Date: Sat, 3 Feb 2024 15:31:59 -0800 Subject: [PATCH] Chat Split: land. Controls in Page Menu. Fixes #208 --- src/apps/chat/AppChat.tsx | 25 +++++++++---------- .../components/applayout/ChatDropdowns.tsx | 24 ------------------ .../components/applayout/ChatMenuItems.tsx | 22 ++++++++++++++++ src/apps/settings-modal/UxLabsSettings.tsx | 10 ++------ src/common/state/store-ux-labs.ts | 6 ----- 5 files changed, 36 insertions(+), 51 deletions(-) diff --git a/src/apps/chat/AppChat.tsx b/src/apps/chat/AppChat.tsx index c8a88de2db..f868ace430 100644 --- a/src/apps/chat/AppChat.tsx +++ b/src/apps/chat/AppChat.tsx @@ -22,7 +22,6 @@ import { themeBgAppChatComposer } from '~/common/app.theme'; import { useFolderStore } from '~/common/state/store-folders'; import { useIsMobile } from '~/common/components/useMatchMedia'; import { useOptimaLayout, usePluggableOptimaLayout } from '~/common/layout/optima/useOptimaLayout'; -import { useUXLabsStore } from '~/common/state/store-ux-labs'; import type { ComposerOutputMultiPart } from './components/composer/composer.types'; import { ChatDrawerMemo } from './components/applayout/ChatDrawer'; @@ -311,24 +310,23 @@ export function AppChat() { const handleConversationBranch = React.useCallback((conversationId: DConversationId, messageId: string | null): DConversationId | null => { showNextTitle.current = true; const branchedConversationId = branchConversation(conversationId, messageId); + if (isSplitPane) + openSplitConversationId(branchedConversationId); + else + setFocusedConversationId(branchedConversationId); addSnackbar({ key: 'branch-conversation', message: 'Branch started.', type: 'success', overrides: { - autoHideDuration: 3000, + autoHideDuration: 2000, startDecorator: , }, }); - const branchInAltPanel = useUXLabsStore.getState().labsSplitBranching; - if (branchInAltPanel) - openSplitConversationId(branchedConversationId); - else - setFocusedConversationId(branchedConversationId); return branchedConversationId; - }, [branchConversation, openSplitConversationId, setFocusedConversationId]); + }, [branchConversation, isSplitPane, openSplitConversationId, setFocusedConversationId]); - const handleConversationFlatten = (conversationId: DConversationId) => setFlattenConversationId(conversationId); + const handleConversationFlatten = React.useCallback((conversationId: DConversationId) => setFlattenConversationId(conversationId), []); const handleConfirmedClearConversation = React.useCallback(() => { if (clearConversationId) { @@ -386,10 +384,8 @@ export function AppChat() { const centerItems = React.useMemo(() => , - [focusedConversationId, isSplitPane, toggleSplitPane], + [focusedConversationId], ); const drawerContent = React.useMemo(() => @@ -410,16 +406,19 @@ export function AppChat() { const menuItems = React.useMemo(() => , - [areChatsEmpty, focusedConversationId, handleConversationBranch, handleConversationClear, isFocusedChatEmpty, isMessageSelectionMode], + [areChatsEmpty, focusedConversationId, handleConversationBranch, handleConversationClear, handleConversationFlatten, isFocusedChatEmpty, isMessageSelectionMode, isMobile, isSplitPane, toggleSplitPane], ); usePluggableOptimaLayout(drawerContent, centerItems, menuItems, 'AppChat'); diff --git a/src/apps/chat/components/applayout/ChatDropdowns.tsx b/src/apps/chat/components/applayout/ChatDropdowns.tsx index a924fb7c1a..cd76ad8e77 100644 --- a/src/apps/chat/components/applayout/ChatDropdowns.tsx +++ b/src/apps/chat/components/applayout/ChatDropdowns.tsx @@ -1,12 +1,6 @@ import * as React from 'react'; -import { IconButton } from '@mui/joy'; -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 { useUXLabsStore } from '~/common/state/store-ux-labs'; import { useChatLLMDropdown } from './useLLMDropdown'; import { usePersonaIdDropdown } from './usePersonaDropdown'; @@ -15,8 +9,6 @@ import { useFolderDropdown } from './folder/useFolderDropdown'; export function ChatDropdowns(props: { conversationId: DConversationId | null - isSplitPanes: boolean - onToggleSplitPanes: () => void }) { // state @@ -24,9 +16,6 @@ export function ChatDropdowns(props: { const { personaDropdown } = usePersonaIdDropdown(props.conversationId); const { folderDropdown } = useFolderDropdown(props.conversationId); - // external state - const labsSplitBranching = useUXLabsStore(state => state.labsSplitBranching); - return <> {/* Persona selector */} @@ -38,18 +27,5 @@ export function ChatDropdowns(props: { {/* Folder selector */} {folderDropdown} - {/* Split Panes button */} - {labsSplitBranching && ( - - - {props.isSplitPanes ? : } - - - )} - ; } diff --git a/src/apps/chat/components/applayout/ChatMenuItems.tsx b/src/apps/chat/components/applayout/ChatMenuItems.tsx index 33b9e46b52..339f404a4f 100644 --- a/src/apps/chat/components/applayout/ChatMenuItems.tsx +++ b/src/apps/chat/components/applayout/ChatMenuItems.tsx @@ -6,9 +6,14 @@ import CheckBoxOutlinedIcon from '@mui/icons-material/CheckBoxOutlined'; import ClearIcon from '@mui/icons-material/Clear'; import CompressIcon from '@mui/icons-material/Compress'; import ForkRightIcon from '@mui/icons-material/ForkRight'; +import HorizontalSplitIcon from '@mui/icons-material/HorizontalSplit'; +import HorizontalSplitOutlinedIcon from '@mui/icons-material/HorizontalSplitOutlined'; import SettingsSuggestIcon from '@mui/icons-material/SettingsSuggest'; +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'; @@ -16,14 +21,17 @@ import { useChatShowSystemMessages } from '../../store-app-chat'; export function ChatMenuItems(props: { + isMobile: boolean, conversationId: DConversationId | null, hasConversations: boolean, isConversationEmpty: boolean, isMessageSelectionMode: boolean, + isSplitPane: boolean setIsMessageSelectionMode: (isMessageSelectionMode: boolean) => void, onConversationBranch: (conversationId: DConversationId, messageId: string | null) => void, onConversationClear: (conversationId: DConversationId) => void, onConversationFlatten: (conversationId: DConversationId) => void, + onToggleSplitPanes: () => void, }) { // external state @@ -64,6 +72,20 @@ export function ChatMenuItems(props: { return <> + {/* Split/Unsplit panes */} + + + { + props.isMobile + ? (props.isSplitPane ? : ) + : (props.isSplitPane ? : ) + } + {props.isSplitPane ? 'Unsplit' : props.isMobile ? 'Split Down' : 'Split Right'} + + + + + {/**/} {/* */} {/* Conversation*/} diff --git a/src/apps/settings-modal/UxLabsSettings.tsx b/src/apps/settings-modal/UxLabsSettings.tsx index bd2c482f24..3611a42f45 100644 --- a/src/apps/settings-modal/UxLabsSettings.tsx +++ b/src/apps/settings-modal/UxLabsSettings.tsx @@ -3,7 +3,6 @@ import * as React from 'react'; import { FormControl, Typography } from '@mui/joy'; import AddAPhotoIcon from '@mui/icons-material/AddAPhoto'; import ScreenshotMonitorIcon from '@mui/icons-material/ScreenshotMonitor'; -import VerticalSplitIcon from '@mui/icons-material/VerticalSplit'; import { FormLabelStart } from '~/common/components/forms/FormLabelStart'; import { FormSwitchControl } from '~/common/components/forms/FormSwitchControl'; @@ -19,7 +18,6 @@ export function UxLabsSettings() { const { labsAttachScreenCapture, setLabsAttachScreenCapture, labsCameraDesktop, setLabsCameraDesktop, - labsSplitBranching, setLabsSplitBranching, } = useUXLabsStore(); return <> @@ -34,15 +32,11 @@ export function UxLabsSettings() { checked={labsCameraDesktop} onChange={setLabsCameraDesktop} />} - Split Branching} description={/*'v1.6 · ' +*/ (labsSplitBranching ? 'Enabled' : 'Disabled')} - checked={labsSplitBranching} onChange={setLabsSplitBranching} - /> - - Draw App + Split Chats + {' · '}Draw App {' · '}Call AGI {' · '}Persona Creator {' · '}Auto Diagrams diff --git a/src/common/state/store-ux-labs.ts b/src/common/state/store-ux-labs.ts index fbb2f6ae8f..a518ba1c0b 100644 --- a/src/common/state/store-ux-labs.ts +++ b/src/common/state/store-ux-labs.ts @@ -18,9 +18,6 @@ interface UXLabsStore { labsCameraDesktop: boolean; setLabsCameraDesktop: (labsCameraDesktop: boolean) => void; - labsSplitBranching: boolean; - setLabsSplitBranching: (labsSplitBranching: boolean) => void; - } export const useUXLabsStore = create()( @@ -33,9 +30,6 @@ export const useUXLabsStore = create()( labsCameraDesktop: false, setLabsCameraDesktop: (labsCameraDesktop: boolean) => set({ labsCameraDesktop }), - labsSplitBranching: false, - setLabsSplitBranching: (labsSplitBranching: boolean) => set({ labsSplitBranching }), - }), { name: 'app-ux-labs',