diff --git a/src/apps/chat/AppChat.tsx b/src/apps/chat/AppChat.tsx
index d4c853963..c12d28950 100644
--- a/src/apps/chat/AppChat.tsx
+++ b/src/apps/chat/AppChat.tsx
@@ -41,7 +41,6 @@ import { ChatDrawerMemo } from './components/layout-drawer/ChatDrawer';
import { ChatMessageList } from './components/ChatMessageList';
import { ChatPageMenuItems } from './components/layout-menu/ChatPageMenuItems';
import { Composer } from './components/composer/Composer';
-import { StatusBar } from './components/StatusBar';
import { usePanesManager } from './components/panes/usePanesManager';
import type { ChatExecuteMode } from './execute-mode/execute-mode.types';
@@ -63,8 +62,11 @@ const composerOpenSx: SxProps = {
zIndex: 21, // just to allocate a surface, and potentially have a shadow
backgroundColor: themeBgAppChatComposer,
borderTop: `1px solid`,
- borderTopColor: 'divider',
- p: { xs: 1, md: 2 },
+ borderTopColor: 'rgba(var(--joy-palette-neutral-mainChannel, 99 107 116) / 0.4)',
+ // hack: eats the bottom of the last message (as it has a 1px divider)
+ mt: '-1px',
+ // the padding inside the composer used to be set here, not it's on the grid therein
+ // p: { xs: 1, md: 2 },
};
const composerClosedSx: SxProps = {
@@ -573,8 +575,6 @@ export function AppChat() {
- {!isMobile && !beamOpenStoreInFocusedPane && }
-
({
+ const { labsAttachScreenCapture, labsCameraDesktop, labsShowCost, labsShowShortcutBar } = useUXLabsStore(useShallow(state => ({
labsAttachScreenCapture: state.labsAttachScreenCapture,
labsCameraDesktop: state.labsCameraDesktop,
labsShowCost: state.labsShowCost,
+ labsShowShortcutBar: state.labsShowShortcutBar,
})));
const timeToShowTips = useAppStateStore(state => state.usageCount > 2);
const { novel: explainShiftEnter, touch: touchShiftEnter } = useUICounter('composer-shift-enter');
@@ -518,14 +520,24 @@ export function Composer(props: {
textPlaceholder += platformAwareKeystrokes('\n\n💡 Tip: Ctrl + Enter to beam');
}
+ const stableGridSx: SxProps = React.useMemo(() => ({
+ // basically a position:relative to enable the inner drop area
+ ...dragContainerSx,
+ // This used to be in the outer box, but we put it here instead
+ p: { xs: 1, md: 2 },
+ }), [dragContainerSx]);
+
return (
+
+ {!isMobile && labsShowShortcutBar && }
+
{/* [Mobile: top, Desktop: left] */}