From fa2fddab10344ae998336633cb9e4b874ae02521 Mon Sep 17 00:00:00 2001
From: Brian Krabach <brkrabac@microsoft.com>
Date: Tue, 12 Nov 2024 13:26:16 -0800
Subject: [PATCH] remember canvas states on reload, experimental support for
 reasoning models, updated state persistence & canvas icon (#239)

---
 .../explorer-assistant/assistant/chat.py      | 72 ++++++++++++++-----
 .../explorer-assistant/assistant/config.py    |  8 +++
 .../openai-client/openai_client/tokens.py     |  3 +
 .../components/FrontDoor/Chat/ChatCanvas.tsx  | 20 ++----
 .../FrontDoor/Chat/ChatControls.tsx           |  4 +-
 .../FrontDoor/Controls/AssistantSelector.tsx  |  8 +--
 .../src/redux/features/app/AppState.ts        | 13 ++--
 .../src/redux/features/app/appSlice.ts        | 21 ++++--
 .../features/chatCanvas/ChatCanvasState.ts    |  1 +
 .../features/chatCanvas/chatCanvasSlice.ts    | 29 +++++++-
 .../features/localUser/localUserSlice.ts      | 24 ++++++-
 .../redux/features/settings/SettingsState.ts  |  1 +
 .../redux/features/settings/settingsSlice.ts  |  6 +-
 workbench-app/src/routes/FrontDoor.tsx        | 24 +++----
 14 files changed, 164 insertions(+), 70 deletions(-)

diff --git a/assistants/explorer-assistant/assistant/chat.py b/assistants/explorer-assistant/assistant/chat.py
index 03bf4412..1658604a 100644
--- a/assistants/explorer-assistant/assistant/chat.py
+++ b/assistants/explorer-assistant/assistant/chat.py
@@ -15,7 +15,7 @@
 from assistant_extensions.artifacts._model import ArtifactsConfigModel
 from assistant_extensions.attachments import AttachmentsExtension
 from content_safety.evaluators import CombinedContentSafetyEvaluator
-from openai.types.chat import ChatCompletionMessageParam
+from openai.types.chat import ChatCompletion, ChatCompletionMessageParam, ParsedChatCompletion
 from semantic_workbench_api_model.workbench_model import (
     AssistantStateEvent,
     ConversationEvent,
@@ -215,12 +215,19 @@ async def respond_to_conversation(
     # add the guardrails prompt to the system message content
     system_message_content += f"\n\n{config.guardrails_prompt}"
 
-    completion_messages: list[ChatCompletionMessageParam] = [
-        {
+    # reasoning models do not support system messages, so set the role to "user" for the system message
+    completion_messages: list[ChatCompletionMessageParam] = []
+    if config.request_config.is_reasoning_model:
+        # if the model is a reasoning model, add the system message as a user message
+        completion_messages.append({
+            "role": "user",
+            "content": system_message_content,
+        })
+    else:
+        completion_messages.append({
             "role": "system",
             "content": system_message_content,
-        }
-    ]
+        })
 
     # generate the attachment messages from the attachment agent
     attachment_messages = await attachments_extension.get_completion_messages_for_attachments(
@@ -269,6 +276,7 @@ async def respond_to_conversation(
     # initialize variables for the response content and total tokens used
     content = ""
     completion_total_tokens = 0
+    completion: ParsedChatCompletion | ChatCompletion | None = None
 
     # set default response message type
     message_type = MessageType.chat
@@ -312,19 +320,49 @@ async def respond_to_conversation(
 
             else:
                 # call the OpenAI API to generate a completion
-                completion = await client.chat.completions.create(
-                    messages=completion_messages,
-                    model=config.request_config.openai_model,
-                    max_tokens=config.request_config.response_tokens,
-                )
-
-                content = completion.choices[0].message.content
+                try:
+                    if config.request_config.is_reasoning_model:
+                        # for reasoning models, use max_completion_tokens instead of max_tokens
+                        completion = await client.chat.completions.create(
+                            messages=completion_messages,
+                            model=config.request_config.openai_model,
+                            max_completion_tokens=config.request_config.response_tokens,
+                        )
+                    else:
+                        completion = await client.chat.completions.create(
+                            messages=completion_messages,
+                            model=config.request_config.openai_model,
+                            max_tokens=config.request_config.response_tokens,
+                        )
+
+                    content = completion.choices[0].message.content
+                except Exception as e:
+                    logger.exception(f"exception occurred calling openai chat completion: {e}")
+                    content = (
+                        "An error occurred while calling the OpenAI API. Is it configured correctly?"
+                        " View the debug inspector for more information."
+                    )
+                    message_type = MessageType.notice
+                    deepmerge.always_merger.merge(
+                        metadata,
+                        {
+                            "debug": {
+                                method_metadata_key: {
+                                    "request": {
+                                        "model": config.request_config.openai_model,
+                                        "messages": completion_messages,
+                                    },
+                                    "error": str(e),
+                                },
+                            }
+                        },
+                    )
 
-            # get the total tokens used for the completion
-            completion_total_tokens = completion.usage.total_tokens if completion.usage else 0
-            footer_items = [
-                _get_token_usage_message(config.request_config.max_tokens, completion_total_tokens),
-            ]
+            footer_items = []
+            if completion is not None:
+                # get the total tokens used for the completion
+                completion_total_tokens = completion.usage.total_tokens if completion.usage else 0
+                footer_items.append(_get_token_usage_message(config.request_config.max_tokens, completion_total_tokens))
 
             # add the completion to the metadata for debugging
             deepmerge.always_merger.merge(
diff --git a/assistants/explorer-assistant/assistant/config.py b/assistants/explorer-assistant/assistant/config.py
index cdebd360..599269a4 100644
--- a/assistants/explorer-assistant/assistant/config.py
+++ b/assistants/explorer-assistant/assistant/config.py
@@ -111,6 +111,14 @@ class RequestConfig(BaseModel):
         Field(title="OpenAI Model", description="The OpenAI model to use for generating responses."),
     ] = "gpt-4o"
 
+    is_reasoning_model: Annotated[
+        bool,
+        Field(
+            title="Is Reasoning Model (o1-preview, o1-mini, etc)",
+            description="Experimental: enable support for reasoning models such as o1-preview, o1-mini, etc.",
+        ),
+    ] = False
+
 
 # the workbench app builds dynamic forms based on the configuration model and UI schema
 class AssistantConfigModel(BaseModel):
diff --git a/libraries/python/openai-client/openai_client/tokens.py b/libraries/python/openai-client/openai_client/tokens.py
index a09f5762..84430027 100644
--- a/libraries/python/openai-client/openai_client/tokens.py
+++ b/libraries/python/openai-client/openai_client/tokens.py
@@ -37,6 +37,9 @@ def num_tokens_from_message(message: ChatCompletionMessageParam, model: str) ->
         "gpt-4-32k-0613",
         "gpt-4o-mini-2024-07-18",
         "gpt-4o-2024-08-06",
+        # TODO: determine correct handling of reasoning models
+        "o1-preview",
+        "o1-mini",
     }:
         tokens_per_message = 3
         tokens_per_name = 1
diff --git a/workbench-app/src/components/FrontDoor/Chat/ChatCanvas.tsx b/workbench-app/src/components/FrontDoor/Chat/ChatCanvas.tsx
index c2b6e273..94e4e573 100644
--- a/workbench-app/src/components/FrontDoor/Chat/ChatCanvas.tsx
+++ b/workbench-app/src/components/FrontDoor/Chat/ChatCanvas.tsx
@@ -32,14 +32,14 @@ export const ChatCanvas: React.FC<ChatCanvasProps> = (props) => {
         preventAssistantModifyOnParticipantIds,
         readOnly,
     } = props;
-    const chatCanvasState = useAppSelector((state) => state.chatCanvas);
+    const { open, mode, selectedAssistantId } = useAppSelector((state) => state.chatCanvas);
     const chatCanvasController = useChatCanvasController();
     const [firstRun, setFirstRun] = React.useState(true);
     const [selectedAssistant, setSelectedAssistant] = React.useState<Assistant>();
 
     // Set the selected assistant based on the chat canvas state
     React.useEffect(() => {
-        if (!chatCanvasState.selectedAssistantId || !chatCanvasState.open || chatCanvasState.mode !== 'assistant') {
+        if (!selectedAssistantId || !open || mode !== 'assistant') {
             // If the assistant id is not set, the canvas is closed, or the mode is not assistant, clear
             // the selected assistant and exit early
             setSelectedAssistant(undefined);
@@ -59,9 +59,7 @@ export const ChatCanvas: React.FC<ChatCanvasProps> = (props) => {
         }
 
         // Find the assistant that corresponds to the selected assistant id
-        const assistant = conversationAssistants.find(
-            (assistant) => assistant.id === chatCanvasState.selectedAssistantId,
-        );
+        const assistant = conversationAssistants.find((assistant) => assistant.id === selectedAssistantId);
 
         // If the selected assistant is not found in the conversation, select the first assistant in the conversation
         if (!assistant) {
@@ -75,18 +73,10 @@ export const ChatCanvas: React.FC<ChatCanvasProps> = (props) => {
             log(`Setting selected assistant to ${assistant.id}`);
             setSelectedAssistant(assistant);
         }
-    }, [
-        conversationAssistants,
-        chatCanvasController,
-        selectedAssistant,
-        firstRun,
-        chatCanvasState.selectedAssistantId,
-        chatCanvasState.open,
-        chatCanvasState.mode,
-    ]);
+    }, [conversationAssistants, chatCanvasController, selectedAssistant, firstRun, selectedAssistantId, open, mode]);
 
     // Determine which drawer to open, default to none
-    const openDrawer = chatCanvasState.open ? chatCanvasState.mode : 'none';
+    const openDrawer = open ? mode : 'none';
     return (
         <>
             <ConversationDrawer
diff --git a/workbench-app/src/components/FrontDoor/Chat/ChatControls.tsx b/workbench-app/src/components/FrontDoor/Chat/ChatControls.tsx
index 0f20cca3..2414b6e4 100644
--- a/workbench-app/src/components/FrontDoor/Chat/ChatControls.tsx
+++ b/workbench-app/src/components/FrontDoor/Chat/ChatControls.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft. All rights reserved.
 
 import { Button, makeStyles, tokens, Tooltip } from '@fluentui/react-components';
-import { AppsList24Regular, BookInformation24Regular, Dismiss24Regular } from '@fluentui/react-icons';
+import { BookInformation24Regular, ChatSettingsRegular, Dismiss24Regular } from '@fluentui/react-icons';
 import { EventSourceMessage } from '@microsoft/fetch-event-source';
 import React from 'react';
 import { useChatCanvasController } from '../../../libs/useChatCanvasController';
@@ -75,7 +75,7 @@ export const ChatControls: React.FC<ChatControlsProps> = (props) => {
             <Tooltip content="Open conversation canvas" relationship="label">
                 <Button
                     disabled={conversationActive || chatCanvasController.isTransitioning}
-                    icon={<AppsList24Regular />}
+                    icon={<ChatSettingsRegular />}
                     onClick={handleActivateConversation}
                 />
             </Tooltip>
diff --git a/workbench-app/src/components/FrontDoor/Controls/AssistantSelector.tsx b/workbench-app/src/components/FrontDoor/Controls/AssistantSelector.tsx
index 293c10c2..a2efa64f 100644
--- a/workbench-app/src/components/FrontDoor/Controls/AssistantSelector.tsx
+++ b/workbench-app/src/components/FrontDoor/Controls/AssistantSelector.tsx
@@ -17,6 +17,9 @@ export const AssistantSelector: React.FC<AssistantSelectorProps> = (props) => {
             disabled={disabled}
             onOptionSelect={(_event, data) => onChange(data.optionValue as string)}
         >
+            <Option text="Create new assistant" value="new">
+                Create new assistant
+            </Option>
             <OptionGroup label="Existing Assistants">
                 {assistants
                     ?.slice()
@@ -27,11 +30,6 @@ export const AssistantSelector: React.FC<AssistantSelectorProps> = (props) => {
                         </Option>
                     ))}
             </OptionGroup>
-            <OptionGroup label="New Assistant">
-                <Option text="Create new assistant" value="new">
-                    Create new assistant
-                </Option>
-            </OptionGroup>
         </Dropdown>
     );
 };
diff --git a/workbench-app/src/redux/features/app/AppState.ts b/workbench-app/src/redux/features/app/AppState.ts
index 7412c609..f3f69a3f 100644
--- a/workbench-app/src/redux/features/app/AppState.ts
+++ b/workbench-app/src/redux/features/app/AppState.ts
@@ -1,12 +1,8 @@
 // Copyright (c) Microsoft. All rights reserved.
 
 export interface AppState {
+    // persisted
     devMode: boolean;
-    errors: {
-        id: string;
-        title?: string;
-        message?: string;
-    }[];
     completedFirstRun: {
         app: boolean;
         experimental: boolean;
@@ -14,6 +10,13 @@ export interface AppState {
     };
     hideExperimentalNotice: boolean;
     chatWidthPercent: number;
+    globalContentOpen: boolean;
+    // transient
     isDraggingOverBody?: boolean;
     activeConversationId?: string;
+    errors: {
+        id: string;
+        title?: string;
+        message?: string;
+    }[];
 }
diff --git a/workbench-app/src/redux/features/app/appSlice.ts b/workbench-app/src/redux/features/app/appSlice.ts
index 0adaffa7..d6c2cc60 100644
--- a/workbench-app/src/redux/features/app/appSlice.ts
+++ b/workbench-app/src/redux/features/app/appSlice.ts
@@ -8,12 +8,13 @@ import { conversationApi } from '../../../services/workbench';
 import { AppState } from './AppState';
 
 const localStorageKey = {
-    devMode: 'devMode',
-    chatWidthPercent: 'chatWidthPercent',
-    completedFirstRunApp: 'completedFirstRun:app',
-    completedFirstRunExperimental: 'completedFirstRun:experimental',
-    completedFirstRunWorkflow: 'completedFirstRun:workflow',
-    hideExperimentalNotice: 'hideExperimentalNotice',
+    devMode: 'app.dev-mode',
+    completedFirstRunApp: 'app.completed-first-run.app',
+    completedFirstRunExperimental: 'app.completed-first-run.experimental',
+    completedFirstRunWorkflow: 'app.completed-first-run.workflow',
+    hideExperimentalNotice: 'app.hide-experimental-notice',
+    chatWidthPercent: 'app.chat-width-percent',
+    globalContentOpen: 'app.global-content-open',
 };
 
 const initialState: AppState = {
@@ -30,6 +31,7 @@ const initialState: AppState = {
     },
     hideExperimentalNotice:
         AppStorage.getInstance().loadObject<boolean>(localStorageKey.hideExperimentalNotice) ?? false,
+    globalContentOpen: AppStorage.getInstance().loadObject<boolean>(localStorageKey.globalContentOpen) ?? false,
 };
 
 export const appSlice = createSlice({
@@ -38,7 +40,7 @@ export const appSlice = createSlice({
     reducers: {
         toggleDevMode: (state: AppState) => {
             state.devMode = !state.devMode;
-            localStorage.setItem(localStorageKey.devMode, state.devMode.toString());
+            AppStorage.getInstance().saveObject(localStorageKey.devMode, state.devMode);
         },
         setIsDraggingOverBody: (state: AppState, action: PayloadAction<boolean>) => {
             state.isDraggingOverBody = action.payload;
@@ -108,6 +110,10 @@ export const appSlice = createSlice({
                 );
             }
         },
+        setGlobalContentOpen: (state: AppState, action: PayloadAction<boolean>) => {
+            AppStorage.getInstance().saveObject(localStorageKey.globalContentOpen, action.payload);
+            state.globalContentOpen = action.payload;
+        },
     },
 });
 
@@ -121,6 +127,7 @@ export const {
     setCompletedFirstRun,
     setHideExperimentalNotice,
     setActiveConversationId,
+    setGlobalContentOpen,
 } = appSlice.actions;
 
 export default appSlice.reducer;
diff --git a/workbench-app/src/redux/features/chatCanvas/ChatCanvasState.ts b/workbench-app/src/redux/features/chatCanvas/ChatCanvasState.ts
index f35c9d19..1afe1f7e 100644
--- a/workbench-app/src/redux/features/chatCanvas/ChatCanvasState.ts
+++ b/workbench-app/src/redux/features/chatCanvas/ChatCanvasState.ts
@@ -1,6 +1,7 @@
 // Copyright (c) Microsoft. All rights reserved.
 
 export interface ChatCanvasState {
+    // persisted
     open: boolean;
     mode: 'conversation' | 'assistant';
     selectedAssistantId?: string;
diff --git a/workbench-app/src/redux/features/chatCanvas/chatCanvasSlice.ts b/workbench-app/src/redux/features/chatCanvas/chatCanvasSlice.ts
index 70188934..c303a823 100644
--- a/workbench-app/src/redux/features/chatCanvas/chatCanvasSlice.ts
+++ b/workbench-app/src/redux/features/chatCanvas/chatCanvasSlice.ts
@@ -1,11 +1,21 @@
 // Copyright (c) Microsoft. All rights reserved.
 
 import { PayloadAction, createSlice } from '@reduxjs/toolkit';
+import { AppStorage } from '../../../libs/AppStorage';
 import { ChatCanvasState } from './ChatCanvasState';
 
+const localStorageKey = {
+    chatCanvasOpen: 'chat-canvas.open',
+    chatCanvasMode: 'chat-canvas.mode',
+    chatCanvasSelectedAssistantId: 'chat-canvas.selected-assistant-id',
+    chatCanvasSelectedAssistantStateId: 'chat-canvas.selected-assistant-state-id',
+};
+
 const initialState: ChatCanvasState = {
-    open: false,
-    mode: 'conversation',
+    open: localStorage.getItem(localStorageKey.chatCanvasOpen) === 'true',
+    mode: localStorage.getItem(localStorageKey.chatCanvasMode) === 'assistant' ? 'assistant' : 'conversation',
+    selectedAssistantId: localStorage.getItem(localStorageKey.chatCanvasSelectedAssistantId) ?? undefined,
+    selectedAssistantStateId: localStorage.getItem(localStorageKey.chatCanvasSelectedAssistantStateId) ?? undefined,
 };
 
 export const chatCanvasSlice = createSlice({
@@ -14,22 +24,37 @@ export const chatCanvasSlice = createSlice({
     reducers: {
         setChatCanvasOpen: (state: ChatCanvasState, action: PayloadAction<boolean>) => {
             state.open = action.payload;
+            persistState(state);
         },
         setChatCanvasMode: (state: ChatCanvasState, action: PayloadAction<ChatCanvasState['mode']>) => {
             state.mode = action.payload;
+            persistState(state);
         },
         setChatCanvasAssistantId: (state: ChatCanvasState, action: PayloadAction<string | undefined>) => {
             state.selectedAssistantId = action.payload;
+            persistState(state);
         },
         setChatCanvasAssistantStateId: (state: ChatCanvasState, action: PayloadAction<string | undefined>) => {
             state.selectedAssistantStateId = action.payload;
+            persistState(state);
         },
         setChatCanvasState: (state: ChatCanvasState, action: PayloadAction<ChatCanvasState>) => {
             Object.assign(state, action.payload);
+            persistState(state);
         },
     },
 });
 
+const persistState = (state: ChatCanvasState) => {
+    AppStorage.getInstance().saveObject(localStorageKey.chatCanvasOpen, state.open);
+    AppStorage.getInstance().saveObject(localStorageKey.chatCanvasMode, state.mode);
+    AppStorage.getInstance().saveObject(localStorageKey.chatCanvasSelectedAssistantId, state.selectedAssistantId);
+    AppStorage.getInstance().saveObject(
+        localStorageKey.chatCanvasSelectedAssistantStateId,
+        state.selectedAssistantStateId,
+    );
+};
+
 export const {
     setChatCanvasOpen,
     setChatCanvasMode,
diff --git a/workbench-app/src/redux/features/localUser/localUserSlice.ts b/workbench-app/src/redux/features/localUser/localUserSlice.ts
index cd0fb7bd..f2ac0fc7 100644
--- a/workbench-app/src/redux/features/localUser/localUserSlice.ts
+++ b/workbench-app/src/redux/features/localUser/localUserSlice.ts
@@ -1,10 +1,27 @@
 // Copyright (c) Microsoft. All rights reserved.
 
 import { PayloadAction, createSlice } from '@reduxjs/toolkit';
+import { AppStorage } from '../../../libs/AppStorage';
 import { LocalUserState } from './LocalUserState';
 
+const storageKeys = {
+    id: 'local-user.id',
+    name: 'local-user.name',
+    email: 'local-user.email',
+    avatarName: 'local-user.avatar.name',
+    avatarImage: 'local-user.avatar.image',
+};
+
 const initialState: LocalUserState = {
-    avatar: {},
+    id: AppStorage.getInstance().loadObject<string>(storageKeys.id),
+    name: AppStorage.getInstance().loadObject<string>(storageKeys.name),
+    email: AppStorage.getInstance().loadObject<string>(storageKeys.email),
+    avatar: {
+        name: AppStorage.getInstance().loadObject<string>(storageKeys.avatarName),
+        image: AppStorage.getInstance().loadObject<{
+            src: string;
+        }>(storageKeys.avatarImage),
+    },
 };
 
 export const localUserSlice = createSlice({
@@ -13,6 +30,11 @@ export const localUserSlice = createSlice({
     reducers: {
         setLocalUser: (state: LocalUserState, action: PayloadAction<LocalUserState>) => {
             Object.assign(state, action.payload);
+            AppStorage.getInstance().saveObject(storageKeys.id, state.id);
+            AppStorage.getInstance().saveObject(storageKeys.name, state.name);
+            AppStorage.getInstance().saveObject(storageKeys.email, state.email);
+            AppStorage.getInstance().saveObject(storageKeys.avatarName, state.avatar.name);
+            AppStorage.getInstance().saveObject(storageKeys.avatarImage, state.avatar.image);
         },
     },
 });
diff --git a/workbench-app/src/redux/features/settings/SettingsState.ts b/workbench-app/src/redux/features/settings/SettingsState.ts
index b90bf908..0a1ef26f 100644
--- a/workbench-app/src/redux/features/settings/SettingsState.ts
+++ b/workbench-app/src/redux/features/settings/SettingsState.ts
@@ -1,6 +1,7 @@
 // Copyright (c) Microsoft. All rights reserved.
 
 export interface SettingsState {
+    // persisted
     theme?: string;
     environmentId?: string;
 }
diff --git a/workbench-app/src/redux/features/settings/settingsSlice.ts b/workbench-app/src/redux/features/settings/settingsSlice.ts
index b5a08eb3..78c78733 100644
--- a/workbench-app/src/redux/features/settings/settingsSlice.ts
+++ b/workbench-app/src/redux/features/settings/settingsSlice.ts
@@ -6,10 +6,8 @@ import { AppStorage } from '../../../libs/AppStorage';
 import { SettingsState } from './SettingsState';
 
 const storageKeys = {
-    theme: 'theme',
-    environmentId: 'environment-id',
-    speechKey: 'speech-key',
-    speechRegion: 'speech-region',
+    theme: 'settings.theme',
+    environmentId: 'settings.environment-id',
 };
 
 const initialState: SettingsState = {
diff --git a/workbench-app/src/routes/FrontDoor.tsx b/workbench-app/src/routes/FrontDoor.tsx
index bfadc7a0..46bc220b 100644
--- a/workbench-app/src/routes/FrontDoor.tsx
+++ b/workbench-app/src/routes/FrontDoor.tsx
@@ -10,7 +10,7 @@ import { GlobalContent } from '../components/FrontDoor/GlobalContent';
 import { MainContent } from '../components/FrontDoor/MainContent';
 import { useMediaQuery } from '../libs/useMediaQuery';
 import { useAppSelector } from '../redux/app/hooks';
-import { setActiveConversationId } from '../redux/features/app/appSlice';
+import { setActiveConversationId, setGlobalContentOpen } from '../redux/features/app/appSlice';
 
 const useClasses = makeStyles({
     documentBody: {
@@ -76,9 +76,9 @@ export const FrontDoor: React.FC = () => {
     const { conversationId } = useParams();
     const activeConversationId = useAppSelector((state) => state.app.activeConversationId);
     const chatCanvasState = useAppSelector((state) => state.chatCanvas);
+    const globalContentOpen = useAppSelector((state) => state.app.globalContentOpen);
     const dispatch = useDispatch();
     const sideRailLeftRef = React.useRef<HTMLDivElement | null>(null);
-    const [sideRailLeftOpen, setSideRailLeftOpen] = React.useState(!activeConversationId && !conversationId);
     const [isInitialized, setIsInitialized] = React.useState(false);
     const isSmall = useMediaQuery({ maxWidth: 720 });
     const [sideRailLeftType, setSideRailLeftType] = React.useState<'inline' | 'overlay'>('inline');
@@ -101,33 +101,33 @@ export const FrontDoor: React.FC = () => {
         (event: MouseEvent) => {
             if (!sideRailLeftRef.current) return;
 
-            if (!sideRailLeftRef.current.contains(event.target as HTMLElement)) {
-                setSideRailLeftOpen(false);
+            if (!sideRailLeftRef.current.contains(event.target as HTMLElement) && globalContentOpen) {
+                dispatch(setGlobalContentOpen(false));
             }
         },
-        [sideRailLeftRef],
+        [dispatch, globalContentOpen],
     );
 
     React.useEffect(() => {
-        if (sideRailLeftOpen && sideRailLeftType === 'overlay') {
+        if (globalContentOpen && sideRailLeftType === 'overlay') {
             document.addEventListener('click', handleClickOutside);
         } else {
             document.removeEventListener('click', handleClickOutside);
         }
         return () => document.removeEventListener('click', handleClickOutside);
-    }, [handleClickOutside, sideRailLeftOpen, sideRailLeftRef, sideRailLeftType]);
+    }, [globalContentOpen, handleClickOutside, sideRailLeftRef, sideRailLeftType]);
 
     const sideRailLeftButton = React.useMemo(
         () => (
             <Button
-                icon={sideRailLeftOpen ? <PanelLeftContractRegular /> : <PanelLeftExpandRegular />}
+                icon={globalContentOpen ? <PanelLeftContractRegular /> : <PanelLeftExpandRegular />}
                 onClick={(event) => {
                     event.stopPropagation();
-                    setSideRailLeftOpen((prev) => !prev);
+                    dispatch(setGlobalContentOpen(!globalContentOpen));
                 }}
             />
         ),
-        [sideRailLeftOpen],
+        [dispatch, globalContentOpen],
     );
 
     React.useEffect(() => {
@@ -153,7 +153,7 @@ export const FrontDoor: React.FC = () => {
                 <Drawer
                     ref={sideRailLeftRef}
                     className={classes.sideRailLeft}
-                    open={sideRailLeftOpen}
+                    open={globalContentOpen}
                     modalType="non-modal"
                     type={sideRailLeftType}
                     size="small"
@@ -170,7 +170,7 @@ export const FrontDoor: React.FC = () => {
                                     className={mergeClasses(
                                         classes.controls,
                                         classes.transitionFade,
-                                        !sideRailLeftOpen ? 'in' : undefined,
+                                        !globalContentOpen ? 'in' : undefined,
                                     )}
                                 >
                                     {sideRailLeftButton}