diff --git a/packages/app/src/composer/index.tsx b/packages/app/src/composer/index.tsx
index df180e40d..476a05b35 100644
--- a/packages/app/src/composer/index.tsx
+++ b/packages/app/src/composer/index.tsx
@@ -186,20 +186,34 @@ function buildAgentStateSelector(serverId: string, agentId: string) {
};
}
-function renderContextWindowMeterSlot(
+function renderContextWindowMeter(
contextWindowMaxTokens: number | null,
contextWindowUsedTokens: number | null,
totalCostUsd: number | null,
-): ReactElement {
- const meter =
- contextWindowMaxTokens !== null && contextWindowUsedTokens !== null ? (
-
- ) : null;
- return {meter};
+): ReactElement | null {
+ if (contextWindowMaxTokens === null || contextWindowUsedTokens === null) {
+ return null;
+ }
+ return (
+
+ );
+}
+
+function resolveContextWindowPlacement(
+ meter: ReactElement | null,
+ isMobile: boolean,
+): { beforeVoiceContent: ReactNode; footerRight: ReactNode } {
+ if (isMobile) {
+ return { beforeVoiceContent: null, footerRight: meter };
+ }
+ return {
+ beforeVoiceContent: {meter},
+ footerRight: null,
+ };
}
interface RenderLeftContentArgs {
@@ -224,11 +238,14 @@ interface RenderAttachmentTrayArgs {
handleRemoveAttachment: (index: number) => void;
}
-function renderComposerFooter(footer: ReactNode): ReactElement | null {
- if (!footer) return null;
+function renderComposerFooter(footer: ReactNode, footerRight: ReactNode): ReactElement | null {
+ if (!footer && !footerRight) return null;
return (
- {footer}
+
+ {footer}
+ {footerRight}
+
);
}
@@ -1441,15 +1458,19 @@ export function Composer({
agentState.contextWindowUsedTokens,
);
- const beforeVoiceContent = useMemo(
+ const contextWindowMeter = useMemo(
() =>
- renderContextWindowMeterSlot(
+ renderContextWindowMeter(
contextWindowMaxTokens,
contextWindowUsedTokens,
agentState.totalCostUsd,
),
[contextWindowMaxTokens, contextWindowUsedTokens, agentState.totalCostUsd],
);
+ const { beforeVoiceContent, footerRight } = useMemo(
+ () => resolveContextWindowPlacement(contextWindowMeter, isMobile),
+ [contextWindowMeter, isMobile],
+ );
const githubSearchQueryTrimmed = githubSearchQuery.trim();
const githubSearchResultsQuery = useGithubSearchQuery({
@@ -1693,7 +1714,7 @@ export function Composer({
- {renderComposerFooter(footer)}
+ {renderComposerFooter(footer, footerRight)}
);
}
@@ -1737,10 +1758,27 @@ const styles = StyleSheet.create((theme: Theme) => ({
footerContent: {
width: "100%",
maxWidth: MAX_CONTENT_WIDTH,
+ flexDirection: "row",
+ alignItems: "center",
+ justifyContent: "space-between",
paddingLeft: {
xs: 6,
md: 10,
},
+ paddingRight: {
+ xs: 6,
+ md: 10,
+ },
+ },
+ footerLeft: {
+ flexShrink: 1,
+ flexDirection: "row",
+ alignItems: "center",
+ },
+ footerRight: {
+ flexShrink: 0,
+ flexDirection: "row",
+ alignItems: "center",
},
messageInputContainer: {
position: "relative",