From 42ede42f6206d4e2be03a913afab578a2235d573 Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Wed, 8 Jan 2025 12:44:01 +0800
Subject: [PATCH] feat: narrow layout

---
 .../src/assets/fonts/icon-fonts/iconfont.css  |  51 +++--
 .../assets/fonts/icon-fonts/iconfont.woff2    | Bin 3860 -> 3768 bytes
 .../src/pages/home/Inputbar/Inputbar.tsx      | 205 +++++++++---------
 .../pages/home/Messages/MessageMenubar.tsx    |   4 +-
 .../src/pages/home/Messages/Messages.tsx      |  57 ++---
 .../src/pages/home/Messages/NarrowLayout.tsx  |  24 ++
 .../src/pages/home/Messages/Prompt.tsx        |   2 +-
 src/renderer/src/pages/home/Navbar.tsx        |  14 +-
 src/renderer/src/providers/OpenAIProvider.ts  |  12 +-
 src/renderer/src/store/settings.ts            |  10 +-
 10 files changed, 215 insertions(+), 164 deletions(-)
 create mode 100644 src/renderer/src/pages/home/Messages/NarrowLayout.tsx

diff --git a/src/renderer/src/assets/fonts/icon-fonts/iconfont.css b/src/renderer/src/assets/fonts/icon-fonts/iconfont.css
index 0f00ab67..c49c6ae6 100644
--- a/src/renderer/src/assets/fonts/icon-fonts/iconfont.css
+++ b/src/renderer/src/assets/fonts/icon-fonts/iconfont.css
@@ -1,88 +1,91 @@
 @font-face {
-  font-family: 'iconfont'; /* Project id 4753420 */
-  src: url('iconfont.woff2?t=1733224456443') format('woff2');
+  font-family: "iconfont"; /* Project id 4753420 */
+  src: url('iconfont.woff2?t=1736309723926') format('woff2'),
+       url('iconfont.woff?t=1736309723926') format('woff'),
+       url('iconfont.ttf?t=1736309723926') format('truetype');
 }
 
 .iconfont {
-  font-family: 'iconfont' !important;
+  font-family: "iconfont" !important;
   font-size: 16px;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-at1:before {
-  content: '\e7df';
+.icon-at:before {
+  content: "\e623";
 }
 
-.icon-at:before {
-  content: '\e630';
+.icon-icon-adaptive-width:before {
+  content: "\e87a";
 }
 
 .icon-a-darkmode:before {
-  content: '\e6cd';
+  content: "\e6cd";
 }
 
 .icon-ai-model:before {
-  content: '\e827';
+  content: "\e827";
 }
 
 .icon-ai-model1:before {
-  content: '\ec09';
+  content: "\ec09";
 }
 
 .icon-gridlines:before {
-  content: '\e942';
+  content: "\e942";
 }
 
 .icon-inbox:before {
-  content: '\e869';
+  content: "\e869";
 }
 
 .icon-business-smart-assistant:before {
-  content: '\e601';
+  content: "\e601";
 }
 
 .icon-copy:before {
-  content: '\e6ae';
+  content: "\e6ae";
 }
 
 .icon-ic_send:before {
-  content: '\e795';
+  content: "\e795";
 }
 
 .icon-dark1:before {
-  content: '\e72f';
+  content: "\e72f";
 }
 
 .icon-theme-light:before {
-  content: '\e6b7';
+  content: "\e6b7";
 }
 
 .icon-translate_line:before {
-  content: '\e7de';
+  content: "\e7de";
 }
 
 .icon-history:before {
-  content: '\e758';
+  content: "\e758";
 }
 
 .icon-hide-sidebar:before {
-  content: '\e8eb';
+  content: "\e8eb";
 }
 
 .icon-show-sidebar:before {
-  content: '\e944';
+  content: "\e944";
 }
 
 .icon-appstore:before {
-  content: '\e792';
+  content: "\e792";
 }
 
 .icon-chat:before {
-  content: '\e615';
+  content: "\e615";
 }
 
 .icon-setting:before {
-  content: '\e78e';
+  content: "\e78e";
 }
+
diff --git a/src/renderer/src/assets/fonts/icon-fonts/iconfont.woff2 b/src/renderer/src/assets/fonts/icon-fonts/iconfont.woff2
index 9a6c9a7bac7db7b534f6a8df786270985e2ca379..5eee38b818ad3d45ff2cefdb20bfd00379b042c6 100644
GIT binary patch
literal 3768
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

literal 3860
zcmV+v59{!EPew8T0RR9101p%Z3jhEB02`P901n3h0RR9100000000000000000000
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
W#%*109rFBjr&tySs1}eYvYG)qjb}*!

diff --git a/src/renderer/src/pages/home/Inputbar/Inputbar.tsx b/src/renderer/src/pages/home/Inputbar/Inputbar.tsx
index 2b86aa90..9de9d2a5 100644
--- a/src/renderer/src/pages/home/Inputbar/Inputbar.tsx
+++ b/src/renderer/src/pages/home/Inputbar/Inputbar.tsx
@@ -35,6 +35,7 @@ import { CSSProperties, FC, useCallback, useEffect, useMemo, useRef, useState }
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
+import NarrowLayout from '../Messages/NarrowLayout'
 import AttachmentButton from './AttachmentButton'
 import AttachmentPreview from './AttachmentPreview'
 import KnowledgeBaseButton from './KnowledgeBaseButton'
@@ -387,114 +388,116 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic }) => {
 
   return (
     <Container onDragOver={handleDragOver} onDrop={handleDrop} className="inputbar">
-      <AttachmentPreview files={files} setFiles={setFiles} />
-      <InputBarContainer
-        id="inputbar"
-        className={classNames('inputbar-container', inputFocus && 'focus')}
-        ref={containerRef}>
-        <Textarea
-          value={text}
-          onChange={(e) => setText(e.target.value)}
-          onKeyDown={handleKeyDown}
-          placeholder={isTranslating ? t('chat.input.translating') : t('chat.input.placeholder')}
-          autoFocus
-          contextMenu="true"
-          variant="borderless"
-          spellCheck={false}
-          rows={textareaRows}
-          ref={textareaRef}
-          style={{ fontSize }}
-          styles={{ textarea: TextareaStyle }}
-          onFocus={() => setInputFocus(true)}
-          onBlur={() => setInputFocus(false)}
-          onInput={onInput}
-          disabled={searching}
-          onPaste={(e) => onPaste(e.nativeEvent)}
-          onClick={() => searching && dispatch(setSearching(false))}
-        />
-        <Toolbar>
-          <ToolbarMenu>
-            <Tooltip placement="top" title={t('chat.input.new_topic', { Command: newTopicShortcut })} arrow>
-              <ToolbarButton type="text" onClick={addNewTopic}>
-                <FormOutlined />
-              </ToolbarButton>
-            </Tooltip>
-            {isWebSearchModel(model) && (
-              <Tooltip placement="top" title={t('chat.input.web_search')} arrow>
+      <NarrowLayout style={{ width: '100%' }}>
+        <AttachmentPreview files={files} setFiles={setFiles} />
+        <InputBarContainer
+          id="inputbar"
+          className={classNames('inputbar-container', inputFocus && 'focus')}
+          ref={containerRef}>
+          <Textarea
+            value={text}
+            onChange={(e) => setText(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={isTranslating ? t('chat.input.translating') : t('chat.input.placeholder')}
+            autoFocus
+            contextMenu="true"
+            variant="borderless"
+            spellCheck={false}
+            rows={textareaRows}
+            ref={textareaRef}
+            style={{ fontSize }}
+            styles={{ textarea: TextareaStyle }}
+            onFocus={() => setInputFocus(true)}
+            onBlur={() => setInputFocus(false)}
+            onInput={onInput}
+            disabled={searching}
+            onPaste={(e) => onPaste(e.nativeEvent)}
+            onClick={() => searching && dispatch(setSearching(false))}
+          />
+          <Toolbar>
+            <ToolbarMenu>
+              <Tooltip placement="top" title={t('chat.input.new_topic', { Command: newTopicShortcut })} arrow>
+                <ToolbarButton type="text" onClick={addNewTopic}>
+                  <FormOutlined />
+                </ToolbarButton>
+              </Tooltip>
+              {isWebSearchModel(model) && (
+                <Tooltip placement="top" title={t('chat.input.web_search')} arrow>
+                  <ToolbarButton
+                    type="text"
+                    onClick={() => updateAssistant({ ...assistant, enableWebSearch: !assistant.enableWebSearch })}>
+                    <GlobalOutlined
+                      style={{ color: assistant.enableWebSearch ? 'var(--color-link)' : 'var(--color-icon)' }}
+                    />
+                  </ToolbarButton>
+                </Tooltip>
+              )}
+              <Tooltip placement="top" title={t('chat.input.clear')} arrow>
+                <Popconfirm
+                  title={t('chat.input.clear.content')}
+                  placement="top"
+                  onConfirm={clearTopic}
+                  okButtonProps={{ danger: true }}
+                  icon={<QuestionCircleOutlined style={{ color: 'red' }} />}
+                  okText={t('chat.input.clear')}>
+                  <ToolbarButton type="text">
+                    <ClearOutlined />
+                  </ToolbarButton>
+                </Popconfirm>
+              </Tooltip>
+              <Tooltip placement="top" title={t('chat.input.settings')} arrow>
                 <ToolbarButton
                   type="text"
-                  onClick={() => updateAssistant({ ...assistant, enableWebSearch: !assistant.enableWebSearch })}>
-                  <GlobalOutlined
-                    style={{ color: assistant.enableWebSearch ? 'var(--color-link)' : 'var(--color-icon)' }}
-                  />
+                  onClick={() => {
+                    !showTopics && toggleShowTopics()
+                    setTimeout(() => EventEmitter.emit(EVENT_NAMES.SHOW_CHAT_SETTINGS), 0)
+                  }}>
+                  <ControlOutlined />
                 </ToolbarButton>
               </Tooltip>
-            )}
-            <Tooltip placement="top" title={t('chat.input.clear')} arrow>
-              <Popconfirm
-                title={t('chat.input.clear.content')}
-                placement="top"
-                onConfirm={clearTopic}
-                okButtonProps={{ danger: true }}
-                icon={<QuestionCircleOutlined style={{ color: 'red' }} />}
-                okText={t('chat.input.clear')}>
-                <ToolbarButton type="text">
-                  <ClearOutlined />
-                </ToolbarButton>
-              </Popconfirm>
-            </Tooltip>
-            <Tooltip placement="top" title={t('chat.input.settings')} arrow>
-              <ToolbarButton
-                type="text"
-                onClick={() => {
-                  !showTopics && toggleShowTopics()
-                  setTimeout(() => EventEmitter.emit(EVENT_NAMES.SHOW_CHAT_SETTINGS), 0)
-                }}>
-                <ControlOutlined />
+              {showKnowledgeIcon && (
+                <KnowledgeBaseButton
+                  selectedBase={selectedKnowledgeBase}
+                  onSelect={handleKnowledgeBaseSelect}
+                  ToolbarButton={ToolbarButton}
+                  disabled={files.length > 0}
+                />
+              )}
+              <AttachmentButton model={model} files={files} setFiles={setFiles} ToolbarButton={ToolbarButton} />
+              <ToolbarButton type="text" onClick={onNewContext}>
+                <Tooltip placement="top" title={t('chat.input.new.context')}>
+                  <PicCenterOutlined />
+                </Tooltip>
               </ToolbarButton>
-            </Tooltip>
-            {showKnowledgeIcon && (
-              <KnowledgeBaseButton
-                selectedBase={selectedKnowledgeBase}
-                onSelect={handleKnowledgeBaseSelect}
+              <Tooltip placement="top" title={expended ? t('chat.input.collapse') : t('chat.input.expand')} arrow>
+                <ToolbarButton type="text" onClick={onToggleExpended}>
+                  {expended ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
+                </ToolbarButton>
+              </Tooltip>
+              <TokenCount
+                estimateTokenCount={estimateTokenCount}
+                inputTokenCount={inputTokenCount}
+                contextCount={contextCount}
                 ToolbarButton={ToolbarButton}
-                disabled={files.length > 0}
+                onClick={onNewContext}
               />
-            )}
-            <AttachmentButton model={model} files={files} setFiles={setFiles} ToolbarButton={ToolbarButton} />
-            <ToolbarButton type="text" onClick={onNewContext}>
-              <Tooltip placement="top" title={t('chat.input.new.context')}>
-                <PicCenterOutlined />
-              </Tooltip>
-            </ToolbarButton>
-            <Tooltip placement="top" title={expended ? t('chat.input.collapse') : t('chat.input.expand')} arrow>
-              <ToolbarButton type="text" onClick={onToggleExpended}>
-                {expended ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
-              </ToolbarButton>
-            </Tooltip>
-            <TokenCount
-              estimateTokenCount={estimateTokenCount}
-              inputTokenCount={inputTokenCount}
-              contextCount={contextCount}
-              ToolbarButton={ToolbarButton}
-              onClick={onNewContext}
-            />
-          </ToolbarMenu>
-          <ToolbarMenu>
-            {!language.startsWith('en') && (
-              <TranslateButton text={text} onTranslated={onTranslated} isLoading={isTranslating} />
-            )}
-            {generating && (
-              <Tooltip placement="top" title={t('chat.input.pause')} arrow>
-                <ToolbarButton type="text" onClick={onPause} style={{ marginRight: -2, marginTop: 1 }}>
-                  <PauseCircleOutlined style={{ color: 'var(--color-error)', fontSize: 20 }} />
-                </ToolbarButton>
-              </Tooltip>
-            )}
-            {!generating && <SendMessageButton sendMessage={sendMessage} disabled={generating || inputEmpty} />}
-          </ToolbarMenu>
-        </Toolbar>
-      </InputBarContainer>
+            </ToolbarMenu>
+            <ToolbarMenu>
+              {!language.startsWith('en') && (
+                <TranslateButton text={text} onTranslated={onTranslated} isLoading={isTranslating} />
+              )}
+              {generating && (
+                <Tooltip placement="top" title={t('chat.input.pause')} arrow>
+                  <ToolbarButton type="text" onClick={onPause} style={{ marginRight: -2, marginTop: 1 }}>
+                    <PauseCircleOutlined style={{ color: 'var(--color-error)', fontSize: 20 }} />
+                  </ToolbarButton>
+                </Tooltip>
+              )}
+              {!generating && <SendMessageButton sendMessage={sendMessage} disabled={generating || inputEmpty} />}
+            </ToolbarMenu>
+          </Toolbar>
+        </InputBarContainer>
+      </NarrowLayout>
     </Container>
   )
 }
diff --git a/src/renderer/src/pages/home/Messages/MessageMenubar.tsx b/src/renderer/src/pages/home/Messages/MessageMenubar.tsx
index 2cc965d0..e6b94a2e 100644
--- a/src/renderer/src/pages/home/Messages/MessageMenubar.tsx
+++ b/src/renderer/src/pages/home/Messages/MessageMenubar.tsx
@@ -224,7 +224,7 @@ const MessageMenubar: FC<Props> = (props) => {
       {canRegenerate && (
         <Tooltip title={t('chat.message.regenerate.model')} mouseEnterDelay={0.8}>
           <ActionButton className="message-action-button" onClick={onAtModelRegenerate}>
-            <i className="iconfont icon-at1"></i>
+            <i className="iconfont icon-at"></i>
           </ActionButton>
         </Tooltip>
       )}
@@ -335,7 +335,7 @@ const ActionButton = styled.div`
   &:hover {
     color: var(--color-text-1);
   }
-  .icon-at1 {
+  .icon-at {
     font-size: 16px;
   }
 `
diff --git a/src/renderer/src/pages/home/Messages/Messages.tsx b/src/renderer/src/pages/home/Messages/Messages.tsx
index 9d485161..0f9023ec 100644
--- a/src/renderer/src/pages/home/Messages/Messages.tsx
+++ b/src/renderer/src/pages/home/Messages/Messages.tsx
@@ -26,6 +26,7 @@ import styled from 'styled-components'
 
 import Suggestions from '../components/Suggestions'
 import MessageItem from './Message'
+import NarrowLayout from './NarrowLayout'
 import Prompt from './Prompt'
 
 interface Props {
@@ -283,33 +284,35 @@ const Messages: FC<Props> = ({ assistant, topic, setActiveTopic }) => {
       key={assistant.id}
       ref={containerRef}
       right={topicPosition === 'left'}>
-      <Suggestions assistant={assistant} messages={messages} />
-      <InfiniteScroll
-        dataLength={displayMessages.length}
-        next={loadMoreMessages}
-        hasMore={hasMore}
-        loader={null}
-        inverse={true}
-        scrollableTarget="messages">
-        <ScrollContainer>
-          <LoaderContainer $loading={isLoadingMore}>
-            <BeatLoader size={8} color="var(--color-text-2)" />
-          </LoaderContainer>
-          {displayMessages.map((message, index) => (
-            <MessageItem
-              key={message.id}
-              message={message}
-              topic={topic}
-              index={index}
-              hidePresetMessages={assistant.settings?.hideMessages}
-              onSetMessages={setMessages}
-              onDeleteMessage={onDeleteMessage}
-              onGetMessages={onGetMessages}
-            />
-          ))}
-        </ScrollContainer>
-      </InfiniteScroll>
-      <Prompt assistant={assistant} key={assistant.prompt} />
+      <NarrowLayout style={{ display: 'flex', flexDirection: 'column-reverse' }}>
+        <Suggestions assistant={assistant} messages={messages} />
+        <InfiniteScroll
+          dataLength={displayMessages.length}
+          next={loadMoreMessages}
+          hasMore={hasMore}
+          loader={null}
+          inverse={true}
+          scrollableTarget="messages">
+          <ScrollContainer>
+            <LoaderContainer $loading={isLoadingMore}>
+              <BeatLoader size={8} color="var(--color-text-2)" />
+            </LoaderContainer>
+            {displayMessages.map((message, index) => (
+              <MessageItem
+                key={message.id}
+                message={message}
+                topic={topic}
+                index={index}
+                hidePresetMessages={assistant.settings?.hideMessages}
+                onSetMessages={setMessages}
+                onDeleteMessage={onDeleteMessage}
+                onGetMessages={onGetMessages}
+              />
+            ))}
+          </ScrollContainer>
+        </InfiniteScroll>
+        <Prompt assistant={assistant} key={assistant.prompt} />
+      </NarrowLayout>
     </Container>
   )
 }
diff --git a/src/renderer/src/pages/home/Messages/NarrowLayout.tsx b/src/renderer/src/pages/home/Messages/NarrowLayout.tsx
new file mode 100644
index 00000000..e69a3f37
--- /dev/null
+++ b/src/renderer/src/pages/home/Messages/NarrowLayout.tsx
@@ -0,0 +1,24 @@
+import { useSettings } from '@renderer/hooks/useSettings'
+import { FC, HTMLAttributes } from 'react'
+import styled from 'styled-components'
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode
+}
+
+const NarrowLayout: FC<Props> = ({ children, ...props }) => {
+  const { narrowMode } = useSettings()
+
+  if (narrowMode) {
+    return <Container {...props}>{children}</Container>
+  }
+
+  return children
+}
+
+const Container = styled.div`
+  max-width: 800px;
+  margin: 0 auto;
+`
+
+export default NarrowLayout
diff --git a/src/renderer/src/pages/home/Messages/Prompt.tsx b/src/renderer/src/pages/home/Messages/Prompt.tsx
index 7056091c..8d2a27c9 100644
--- a/src/renderer/src/pages/home/Messages/Prompt.tsx
+++ b/src/renderer/src/pages/home/Messages/Prompt.tsx
@@ -28,7 +28,7 @@ const Container = styled.div`
   padding: 10px 20px;
   background-color: var(--color-background-soft);
   margin-bottom: 20px;
-  margin: 0 20px 0 20px;
+  margin: 4px 20px 0 20px;
   border-radius: 6px;
   cursor: pointer;
   border: 0.5px solid var(--color-border);
diff --git a/src/renderer/src/pages/home/Navbar.tsx b/src/renderer/src/pages/home/Navbar.tsx
index ef0de6a0..c4b2b221 100644
--- a/src/renderer/src/pages/home/Navbar.tsx
+++ b/src/renderer/src/pages/home/Navbar.tsx
@@ -10,6 +10,8 @@ import { useShortcut } from '@renderer/hooks/useShortcuts'
 import { useShowAssistants, useShowTopics } from '@renderer/hooks/useStore'
 import AssistantSettingsPopup from '@renderer/pages/settings/AssistantSettings'
 import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
+import { useAppDispatch } from '@renderer/store'
+import { setNarrowMode } from '@renderer/store/settings'
 import { Assistant, Topic } from '@renderer/types'
 import { FC } from 'react'
 import styled from 'styled-components'
@@ -25,8 +27,9 @@ interface Props {
 const HeaderNavbar: FC<Props> = ({ activeAssistant }) => {
   const { assistant } = useAssistant(activeAssistant.id)
   const { showAssistants, toggleShowAssistants } = useShowAssistants()
-  const { topicPosition, sidebarIcons } = useSettings()
+  const { topicPosition, sidebarIcons, narrowMode } = useSettings()
   const { showTopics, toggleShowTopics } = useShowTopics()
+  const dispatch = useAppDispatch()
 
   useShortcut('toggle_show_assistants', () => {
     toggleShowAssistants()
@@ -75,19 +78,22 @@ const HeaderNavbar: FC<Props> = ({ activeAssistant }) => {
           </TitleText>
           <SelectModelButton assistant={assistant} />
         </HStack>
-        <HStack alignItems="center">
+        <HStack alignItems="center" gap={8}>
           <NavbarIcon onClick={() => SearchPopup.show()}>
             <SearchOutlined />
           </NavbarIcon>
+          <NavbarIcon onClick={() => dispatch(setNarrowMode(!narrowMode))}>
+            <i className="iconfont icon-icon-adaptive-width"></i>
+          </NavbarIcon>
           {sidebarIcons.visible.includes('minapp') && (
             <AppStorePopover>
-              <NavbarIcon style={{ marginLeft: isMac ? 5 : 10 }}>
+              <NavbarIcon>
                 <i className="iconfont icon-appstore" />
               </NavbarIcon>
             </AppStorePopover>
           )}
           {topicPosition === 'right' && (
-            <NavbarIcon onClick={toggleShowTopics} style={{ marginLeft: isMac ? 5 : 10 }}>
+            <NavbarIcon onClick={toggleShowTopics}>
               <i className={`iconfont icon-${showTopics ? 'show' : 'hide'}-sidebar`} />
             </NavbarIcon>
           )}
diff --git a/src/renderer/src/providers/OpenAIProvider.ts b/src/renderer/src/providers/OpenAIProvider.ts
index 2b57490e..6868aa5a 100644
--- a/src/renderer/src/providers/OpenAIProvider.ts
+++ b/src/renderer/src/providers/OpenAIProvider.ts
@@ -133,7 +133,13 @@ export default class OpenAIProvider extends BaseProvider {
     }
 
     const isOpenAIo1 = model.id.includes('o1-')
-    const isSupportStreamOutput = streamOutput
+
+    const isSupportStreamOutput = () => {
+      if (this.provider.id === 'github' && isOpenAIo1) {
+        return false
+      }
+      return streamOutput
+    }
 
     let time_first_token_millsec = 0
     const start_time_millsec = new Date().getTime()
@@ -148,12 +154,12 @@ export default class OpenAIProvider extends BaseProvider {
       top_p: assistant?.settings?.topP,
       max_tokens: maxTokens,
       keep_alive: this.keepAliveTime,
-      stream: isSupportStreamOutput,
+      stream: isSupportStreamOutput(),
       ...(assistant.enableWebSearch ? getWebSearchParams(model) : {}),
       ...this.getCustomParameters(assistant)
     })
 
-    if (!isSupportStreamOutput) {
+    if (!isSupportStreamOutput()) {
       const time_completion_millsec = new Date().getTime() - start_time_millsec
       return onChunk({
         text: stream.choices[0].message?.content || '',
diff --git a/src/renderer/src/store/settings.ts b/src/renderer/src/store/settings.ts
index 00433598..3009e20a 100644
--- a/src/renderer/src/store/settings.ts
+++ b/src/renderer/src/store/settings.ts
@@ -60,6 +60,7 @@ export interface SettingsState {
     visible: SidebarIcon[]
     disabled: SidebarIcon[]
   }
+  narrowMode: boolean
 }
 
 const initialState: SettingsState = {
@@ -103,7 +104,8 @@ const initialState: SettingsState = {
   sidebarIcons: {
     visible: DEFAULT_SIDEBAR_ICONS,
     disabled: []
-  }
+  },
+  narrowMode: false
 }
 
 const settingsSlice = createSlice({
@@ -230,6 +232,9 @@ const settingsSlice = createSlice({
     },
     setSidebarIcons: (state, action: PayloadAction<{ visible: SidebarIcon[]; disabled: SidebarIcon[] }>) => {
       state.sidebarIcons = action.payload
+    },
+    setNarrowMode: (state, action: PayloadAction<boolean>) => {
+      state.narrowMode = action.payload
     }
   }
 })
@@ -274,7 +279,8 @@ export const {
   setPasteLongTextThreshold,
   setCustomCss,
   setTopicNamingPrompt,
-  setSidebarIcons
+  setSidebarIcons,
+  setNarrowMode
 } = settingsSlice.actions
 
 export default settingsSlice.reducer