diff --git a/src/apps/chat/AppChat.tsx b/src/apps/chat/AppChat.tsx
index c8a88de2d..f868ace43 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 a924fb7c1..cd76ad8e7 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 33b9e46b5..339f404a4 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 */}
+
+
+
+
+
+
{/**/}
{/* */}
{/* Conversation*/}
diff --git a/src/apps/settings-modal/UxLabsSettings.tsx b/src/apps/settings-modal/UxLabsSettings.tsx
index bd2c482f2..3611a42f4 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 fbb2f6ae8..a518ba1c0 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',