DEV MODE. Visible/usable only on localhost:3xxx

src/apps/chat/components/layout-menu/ChatPageMenuItems.tsx

@@ -1,11 +1,12 @@
 import * as React from 'react';
 
-import { Box, IconButton, ListDivider, ListItemDecorator, MenuItem, Switch, Tooltip } from '@mui/joy';
+import { Box, IconButton, ListDivider, ListItemDecorator, MenuItem, Switch, Tooltip, Typography } from '@mui/joy';
 import AddIcon from '@mui/icons-material/Add';
 import CheckBoxOutlineBlankOutlinedIcon from '@mui/icons-material/CheckBoxOutlineBlankOutlined';
 import CheckBoxOutlinedIcon from '@mui/icons-material/CheckBoxOutlined';
 import ClearIcon from '@mui/icons-material/Clear';
 import CompressIcon from '@mui/icons-material/Compress';
+import EngineeringIcon from '@mui/icons-material/Engineering';
 import ForkRightIcon from '@mui/icons-material/ForkRight';
 import HorizontalSplitIcon from '@mui/icons-material/HorizontalSplit';
 import HorizontalSplitOutlinedIcon from '@mui/icons-material/HorizontalSplitOutlined';
@@ -14,7 +15,10 @@ import VerticalSplitIcon from '@mui/icons-material/VerticalSplit';
 import VerticalSplitOutlinedIcon from '@mui/icons-material/VerticalSplitOutlined';
 
 import type { DConversationId } from '~/common/stores/chat/chat.conversation';
+import { GoodModal } from '~/common/components/GoodModal';
 import { KeyStroke } from '~/common/components/KeyStroke';
+import { devMode_AixLastDispatchRequestBody } from '~/modules/aix/client/aix.client'; // [DEV MODE]
+import { useLabsDevMode } from '~/common/state/store-ux-labs';
 import { useOptimaDrawers } from '~/common/layout/optima/useOptimaDrawers';
 
 import { useChatShowSystemMessages } from '../../store-app-chat';
@@ -38,6 +42,7 @@ export function ChatPageMenuItems(props: {
   const { closePageMenu } = useOptimaDrawers();
   const { canAddPane, isMultiPane, duplicateFocusedPane, removeOtherPanes } = usePaneDuplicateOrClose();
   const [showSystemMessages, setShowSystemMessages] = useChatShowSystemMessages();
+  const labsDevMode = useLabsDevMode();
 
 
   const handleIncreaseMultiPane = React.useCallback((event?: React.MouseEvent) => {
@@ -87,16 +92,35 @@ export function ChatPageMenuItems(props: {
   const handleToggleSystemMessages = () => setShowSystemMessages(!showSystemMessages);
 
 
+  // [DEV MODE]
+
+  const [devModeDialog, setDevModeDialog] = React.useState<React.ReactNode | null>(null);
+
+  const handleAixShowLastRequest = React.useCallback(() => {
+    setDevModeDialog((
+      <GoodModal
+        open
+        onClose={() => setDevModeDialog(null)}
+        title='Aix: Last Dispach Request Body'
+        sx={{ width: '80vw', height: '80vh' }}
+      >
+        <Typography level='body-sm' sx={{ whiteSpace: 'break-spaces' }}>
+          {devMode_AixLastDispatchRequestBody || 'Contents will be shown after the next request.'}
+        </Typography>
+      </GoodModal>
+    ));
+  }, []);
+
+
   return <>
 
-    {/* System Message(s) */}
     <MenuItem onClick={handleToggleSystemMessages}>
       <ListItemDecorator><SettingsSuggestOutlinedIcon /></ListItemDecorator>
       System messages
       <Switch checked={showSystemMessages} onChange={handleToggleSystemMessages} sx={{ ml: 'auto' }} />
     </MenuItem>
 
-    {/* Un /Split */}
+    {/* Pane management: Un/Split */}
     <MenuItem onClick={handleToggleMultiPane}>
       <ListItemDecorator>{props.isMobile
         ? (isMultiPane ? <HorizontalSplitIcon /> : <HorizontalSplitOutlinedIcon />)
@@ -137,6 +161,15 @@ export function ChatPageMenuItems(props: {
       Compress ...
     </MenuItem>
 
+    {labsDevMode && <ListDivider />}
+
+    {labsDevMode && (
+      <MenuItem disabled={props.disableItems} onClick={handleAixShowLastRequest}>
+        <ListItemDecorator><EngineeringIcon /></ListItemDecorator>
+        AIX: Show Last Request...
+      </MenuItem>
+    )}
+
     <ListDivider />
 
     <MenuItem disabled={props.disableItems} onClick={handleConversationClear}>
@@ -147,5 +180,8 @@ export function ChatPageMenuItems(props: {
       </Box>
     </MenuItem>
 
+    {/* [DEV MODE] Show any dialog, if present */}
+    {devModeDialog}
+
   </>;
 }

src/apps/settings-modal/UxLabsSettings.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { FormControl, Typography } from '@mui/joy';
 import AddAPhotoIcon from '@mui/icons-material/AddAPhoto';
+import EngineeringIcon from '@mui/icons-material/Engineering';
 import LocalAtmOutlinedIcon from '@mui/icons-material/LocalAtmOutlined';
 import ScreenshotMonitorIcon from '@mui/icons-material/ScreenshotMonitor';
 import SpeedIcon from '@mui/icons-material/Speed';
@@ -10,6 +11,7 @@ import TitleIcon from '@mui/icons-material/Title';
 import { FormLabelStart } from '~/common/components/forms/FormLabelStart';
 import { FormSwitchControl } from '~/common/components/forms/FormSwitchControl';
 import { Link } from '~/common/components/Link';
+import { isDevModeLocalhost } from '~/common/util/pwaUtils';
 import { useIsMobile } from '~/common/components/useMatchMedia';
 import { useUXLabsStore } from '~/common/state/store-ux-labs';
 
@@ -28,6 +30,7 @@ export function UxLabsSettings() {
     labsChatBarAlt, setLabsChatBarAlt,
     labsHighPerformance, setLabsHighPerformance,
     labsShowCost, setLabsShowCost,
+    labsDevMode, setLabsDevMode,
   } = useUXLabsStore();
 
   return <>
@@ -59,6 +62,13 @@ export function UxLabsSettings() {
       checked={labsShowCost} onChange={setLabsShowCost}
     />
 
+    {isDevModeLocalhost && (
+      <FormSwitchControl
+        title={<><EngineeringIcon sx={{ fontSize: 'lg', mr: 0.5, mb: 0.25 }} />[DEV Mode]</>} description={labsDevMode ? 'Enabled' : 'Disabled'}
+        checked={labsDevMode} onChange={setLabsDevMode}
+      />
+    )}
+
     {/*
       Other Graduated (removed or backlog):
         - <Link href='https://github.com/enricoros/big-AGI/issues/359' target='_blank'>Draw App</Link>

src/common/state/store-ux-labs.ts

@@ -1,6 +1,8 @@
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 
+import { isDevModeLocalhost } from '~/common/util/pwaUtils';
+
 
 // UX Labs Experiments
 
@@ -24,6 +26,11 @@ interface UXLabsStore {
   labsShowCost: boolean;
   setLabsShowCost: (labsShowCost: boolean) => void;
 
+  // [DEV MODE] only shown on localhost
+
+  labsDevMode: boolean;
+  setLabsDevMode: (labsDevMode: boolean) => void;
+
 }
 
 export const useUXLabsStore = create<UXLabsStore>()(
@@ -45,6 +52,11 @@ export const useUXLabsStore = create<UXLabsStore>()(
       labsShowCost: true, // release 1.16.0 with this enabled by default
       setLabsShowCost: (labsShowCost: boolean) => set({ labsShowCost }),
 
+      // [DEV MODE] - maybe move them from here
+
+      labsDevMode: false,
+      setLabsDevMode: (labsDevMode: boolean) => set({ labsDevMode }),
+
     }),
     {
       name: 'app-ux-labs',
@@ -58,10 +70,19 @@ export const useUXLabsStore = create<UXLabsStore>()(
           return { ...state, labsAttachScreenCapture: true };
         return state;
       },
+
     },
   ),
 );
 
 export function getUXLabsHighPerformance() {
   return useUXLabsStore.getState().labsHighPerformance;
-}
+}
+
+export function useLabsDevMode() {
+  return useUXLabsStore((state) => state.labsDevMode) && isDevModeLocalhost;
+}
+
+export function getLabsDevMode() {
+  return useUXLabsStore.getState().labsDevMode && isDevModeLocalhost;
+}

src/common/util/pwaUtils.ts

@@ -2,6 +2,7 @@ import { Brand } from '../app.config';
 
 // assume these won't change during the application lifetime
 export const isBrowser = typeof window !== 'undefined';
+export const isDevModeLocalhost = clientHostName().includes('localhost:300');
 
 // this sort of detection is brittle, but we use it for very optional features
 const safeUA = isBrowser ? window.navigator?.userAgent || '' : '';

src/modules/aix/client/aix.client.ts

@@ -3,6 +3,7 @@ import type { DLLMId } from '~/modules/llms/store-llms';
 import { findVendorForLlmOrThrow } from '~/modules/llms/vendors/vendors.registry';
 
 import { apiStream } from '~/common/util/trpc.client';
+import { getLabsDevMode } from '~/common/state/store-ux-labs';
 
 // NOTE: pay particular attention to the "import type", as this is importing from the server-side Zod definitions
 import type { AixAPI_Access, AixAPI_ContextChatStream, AixAPI_Model, AixAPIChatGenerate_Request } from '~/modules/aix/server/aix.wiretypes';
@@ -68,6 +69,9 @@ function _aixModelFromLLMOptions(llmOptions: Record<string, any>, debugLlmId: st
 }
 
 
+export let devMode_AixLastDispatchRequestBody: string | null = null;
+
+
 /**
  * Client side chat generation, with streaming. This decodes the (text) streaming response from
  * our server streaming endpoint (plain text, not EventSource), and signals updates via a callback.
@@ -89,7 +93,7 @@ async function _aixChatGenerateContent(
 ): Promise<void> {
 
   const operation = await apiStream.aix.chatGenerateContent.mutate(
-    { access: aixAccess, model: aixModel, chatGenerate: aixChatGenerate, context: aixContext, streaming: true, _debugRequestBody: false },
+    { access: aixAccess, model: aixModel, chatGenerate: aixChatGenerate, context: aixContext, streaming: true, _debugRequestBody: getLabsDevMode() },
     { signal: abortSignal },
   );
 
@@ -111,6 +115,7 @@ async function _aixChatGenerateContent(
         onUpdate({ textSoFar: incrementalText, typing: true }, false);
       } else if ('_debugClientPrint' in update) {
         console.log('_debugClientPrint:', update._debugClientPrint);
+        devMode_AixLastDispatchRequestBody = update._debugClientPrint;
       } else
         console.log('update:', update);
     }