feat: toggle topic list

src/main/index.ts

@@ -18,7 +18,7 @@ function createWindow(): void {
     y: mainWindowState.y,
     width: mainWindowState.width,
     height: mainWindowState.height,
-    minWidth: 800,
+    minWidth: 1080,
     minHeight: 500,
     show: false,
     autoHideMenuBar: true,
@@ -38,6 +38,9 @@ function createWindow(): void {
     const menu = new Menu()
     menu.append(new MenuItem({ label: 'Copy', role: 'copy' }))
     menu.append(new MenuItem({ label: 'Paste', role: 'paste' }))
+    menu.append(new MenuItem({ label: 'Cut', role: 'cut' }))
+    menu.append(new MenuItem({ type: 'separator' }))
+    menu.append(new MenuItem({ label: 'Select All', role: 'selectAll' }))
     menu.popup()
   })
 

src/renderer/src/assets/styles/index.scss

@@ -26,8 +26,9 @@
   --color-icon-white: #ffffff;
 
   --navbar-height: 40px;
-  --sidebar-width: 70px;
+  --sidebar-width: 65px;
-  --agents-width: 240px;
+  --agents-width: 250px;
+  --topic-list-width: var(--agents-width);
   --settings-width: 280px;
   --status-bar-height: 40px;
   --input-bar-height: 120px;

src/renderer/src/hooks/useStore.ts

@@ -0,0 +1,12 @@
+import { useAppDispatch, useAppSelector } from '@renderer/store'
+import { toggleRightSidebar } from '@renderer/store/settings'
+
+export function useShowRightSidebar() {
+  const showRightSidebar = useAppSelector((state) => state.settings.showRightSidebar)
+  const dispatch = useAppDispatch()
+
+  return {
+    showRightSidebar,
+    setShowRightSidebar: () => dispatch(toggleRightSidebar())
+  }
+}

src/renderer/src/pages/home/HomePage.tsx

@@ -6,10 +6,13 @@ import Chat from './components/Chat/Chat'
 import Agents from './components/Agents'
 import { uuid } from '@renderer/utils'
 import { getDefaultAgent } from '@renderer/services/agent'
+import { useShowRightSidebar } from '@renderer/hooks/useStore'
+import { Tooltip } from 'antd'
 
 const HomePage: FC = () => {
   const { agents, addAgent } = useAgents()
   const [activeAgent, setActiveAgent] = useState(agents[0])
+  const { showRightSidebar, setShowRightSidebar } = useShowRightSidebar()
 
   const onCreateAgent = () => {
     const _agent = getDefaultAgent()
@@ -28,9 +31,11 @@ const HomePage: FC = () => {
         </NavbarLeft>
         <NavbarCenter style={{ border: 'none' }}>{activeAgent?.name}</NavbarCenter>
         <NavbarRight style={{ justifyContent: 'flex-end', padding: 5 }}>
-          <NewButton>
+          <Tooltip placement="left" title={showRightSidebar ? 'Hide Topics' : 'Show Topics'} arrow>
-            <i className="iconfont icon-showsidebarhoriz"></i>
+            <NewButton onClick={setShowRightSidebar}>
-          </NewButton>
+              <i className={`iconfont ${showRightSidebar ? 'icon-showsidebarhoriz' : 'icon-hidesidebarhoriz'}`} />
+            </NewButton>
+          </Tooltip>
         </NavbarRight>
       </Navbar>
       <ContentContainer>
@@ -69,7 +74,8 @@ const NewButton = styled.div`
   .iconfont {
     font-size: 22px;
   }
-  .icon-showsidebarhoriz {
+  .icon-showsidebarhoriz,
+  .icon-hidesidebarhoriz {
     font-size: 18px;
   }
   &:hover {

src/renderer/src/pages/home/components/Agents.tsx

@@ -82,7 +82,7 @@ const Container = styled.div`
 const AgentItem = styled.div`
   display: flex;
   flex-direction: column;
-  padding: 10px;
+  padding: 10px 15px;
   position: relative;
   cursor: pointer;
   .anticon {

src/renderer/src/pages/home/components/Chat/Chat.tsx

@@ -4,6 +4,8 @@ import styled from 'styled-components'
 import Inputbar from './Inputbar'
 import Conversations from './Conversations'
 import { uuid } from '@renderer/utils'
+import { Flex } from 'antd'
+import TopicList from './TopicList'
 
 interface Props {
   agent: Agent
@@ -22,15 +24,18 @@ const Chat: FC<Props> = ({ agent }) => {
 
   return (
     <Container id="chat">
-      <Conversations agent={agent} conversationId={conversationId} />
+      <Flex vertical flex={1} justify="space-between">
-      <Inputbar agent={agent} />
+        <Conversations agent={agent} conversationId={conversationId} />
+        <Inputbar agent={agent} />
+      </Flex>
+      <TopicList />
     </Container>
   )
 }
 
 const Container = styled.div`
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   height: 100%;
   flex: 1;
   justify-content: space-between;

src/renderer/src/pages/home/components/Chat/Inputbar.tsx

@@ -5,6 +5,7 @@ import { FC, useState } from 'react'
 import styled from 'styled-components'
 import { MoreOutlined } from '@ant-design/icons'
 import { Tooltip } from 'antd'
+import { useShowRightSidebar } from '@renderer/hooks/useStore'
 
 interface Props {
   agent: Agent
@@ -12,6 +13,7 @@ interface Props {
 
 const Inputbar: FC<Props> = ({ agent }) => {
   const [text, setText] = useState('')
+  const { setShowRightSidebar } = useShowRightSidebar()
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (event.key === 'Enter') {
@@ -43,7 +45,7 @@ const Inputbar: FC<Props> = ({ agent }) => {
             </ToolbarItem>
           </Tooltip>
           <Tooltip placement="top" title=" Topics " arrow>
-            <ToolbarItem>
+            <ToolbarItem onClick={setShowRightSidebar}>
               <i className="iconfont icon-textedit_text_topic"></i>
             </ToolbarItem>
           </Tooltip>

src/renderer/src/pages/home/components/Chat/TopicList.tsx

@@ -0,0 +1,21 @@
+import { useShowRightSidebar } from '@renderer/hooks/useStore'
+import { FC } from 'react'
+import styled from 'styled-components'
+
+const TopicList: FC = () => {
+  const { showRightSidebar } = useShowRightSidebar()
+
+  return <Container className={showRightSidebar ? '' : 'collapsed'}></Container>
+}
+
+const Container = styled.div`
+  width: var(--topic-list-width);
+  height: 100%;
+  border-left: 0.5px solid #ffffff20;
+  &.collapsed {
+    width: 0;
+    border-left: none;
+  }
+`
+
+export default TopicList

src/renderer/src/store/index.ts

@@ -3,9 +3,11 @@ import { useDispatch, useSelector, useStore } from 'react-redux'
 import { FLUSH, PAUSE, PERSIST, persistReducer, persistStore, PURGE, REGISTER, REHYDRATE } from 'redux-persist'
 import storage from 'redux-persist/lib/storage'
 import agents from './agents'
+import settings from './settings'
 
 const rootReducer = combineReducers({
-  agents
+  agents,
+  settings
 })
 
 const store = configureStore({

src/renderer/src/store/settings.ts

@@ -0,0 +1,23 @@
+import { createSlice } from '@reduxjs/toolkit'
+
+export interface SettingsState {
+  showRightSidebar: boolean
+}
+
+const initialState: SettingsState = {
+  showRightSidebar: true
+}
+
+const settingsSlice = createSlice({
+  name: 'settings',
+  initialState,
+  reducers: {
+    toggleRightSidebar: (state) => {
+      state.showRightSidebar = !state.showRightSidebar
+    }
+  }
+})
+
+export const { toggleRightSidebar } = settingsSlice.actions
+
+export default settingsSlice.reducer