From e7a676975badf0b5e894dfcdd834b8a0339eca18 Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Mon, 1 Jul 2024 15:45:12 +0800
Subject: [PATCH] feat: toggle topic list

---
 src/main/index.ts                             |  5 +++-
 src/renderer/src/assets/styles/index.scss     |  5 ++--
 src/renderer/src/hooks/useStore.ts            | 12 ++++++++++
 src/renderer/src/pages/home/HomePage.tsx      | 14 +++++++----
 .../src/pages/home/components/Agents.tsx      |  2 +-
 .../src/pages/home/components/Chat/Chat.tsx   | 11 ++++++---
 .../pages/home/components/Chat/Inputbar.tsx   |  4 +++-
 .../pages/home/components/Chat/TopicList.tsx  | 21 +++++++++++++++++
 src/renderer/src/store/index.ts               |  4 +++-
 src/renderer/src/store/settings.ts            | 23 +++++++++++++++++++
 10 files changed, 88 insertions(+), 13 deletions(-)
 create mode 100644 src/renderer/src/hooks/useStore.ts
 create mode 100644 src/renderer/src/pages/home/components/Chat/TopicList.tsx
 create mode 100644 src/renderer/src/store/settings.ts

diff --git a/src/main/index.ts b/src/main/index.ts
index dd22e20e..2dc3474e 100644
--- a/src/main/index.ts
+++ b/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()
   })
 
diff --git a/src/renderer/src/assets/styles/index.scss b/src/renderer/src/assets/styles/index.scss
index b2fa7df5..6303f185 100644
--- a/src/renderer/src/assets/styles/index.scss
+++ b/src/renderer/src/assets/styles/index.scss
@@ -26,8 +26,9 @@
   --color-icon-white: #ffffff;
 
   --navbar-height: 40px;
-  --sidebar-width: 70px;
-  --agents-width: 240px;
+  --sidebar-width: 65px;
+  --agents-width: 250px;
+  --topic-list-width: var(--agents-width);
   --settings-width: 280px;
   --status-bar-height: 40px;
   --input-bar-height: 120px;
diff --git a/src/renderer/src/hooks/useStore.ts b/src/renderer/src/hooks/useStore.ts
new file mode 100644
index 00000000..81fba555
--- /dev/null
+++ b/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())
+  }
+}
diff --git a/src/renderer/src/pages/home/HomePage.tsx b/src/renderer/src/pages/home/HomePage.tsx
index f47560af..be502b2f 100644
--- a/src/renderer/src/pages/home/HomePage.tsx
+++ b/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>
-            <i className="iconfont icon-showsidebarhoriz"></i>
-          </NewButton>
+          <Tooltip placement="left" title={showRightSidebar ? 'Hide Topics' : 'Show Topics'} arrow>
+            <NewButton onClick={setShowRightSidebar}>
+              <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 {
diff --git a/src/renderer/src/pages/home/components/Agents.tsx b/src/renderer/src/pages/home/components/Agents.tsx
index 2f752ed6..b4441ecf 100644
--- a/src/renderer/src/pages/home/components/Agents.tsx
+++ b/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 {
diff --git a/src/renderer/src/pages/home/components/Chat/Chat.tsx b/src/renderer/src/pages/home/components/Chat/Chat.tsx
index 342080e5..e82c459f 100644
--- a/src/renderer/src/pages/home/components/Chat/Chat.tsx
+++ b/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} />
-      <Inputbar agent={agent} />
+      <Flex vertical flex={1} justify="space-between">
+        <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;
diff --git a/src/renderer/src/pages/home/components/Chat/Inputbar.tsx b/src/renderer/src/pages/home/components/Chat/Inputbar.tsx
index 3708b4dd..b29a2136 100644
--- a/src/renderer/src/pages/home/components/Chat/Inputbar.tsx
+++ b/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>
diff --git a/src/renderer/src/pages/home/components/Chat/TopicList.tsx b/src/renderer/src/pages/home/components/Chat/TopicList.tsx
new file mode 100644
index 00000000..9ce54ad2
--- /dev/null
+++ b/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
diff --git a/src/renderer/src/store/index.ts b/src/renderer/src/store/index.ts
index 8e19d01e..7db486dc 100644
--- a/src/renderer/src/store/index.ts
+++ b/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({
diff --git a/src/renderer/src/store/settings.ts b/src/renderer/src/store/settings.ts
new file mode 100644
index 00000000..d34cc93b
--- /dev/null
+++ b/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