From 10c07413b59031b4e0fb0aa192f04bfd1ed92e94 Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Sat, 6 Jul 2024 17:24:07 +0800
Subject: [PATCH] feat: add send message shortcut

---
 src/renderer/src/hooks/useSettings.ts         | 14 ++++++
 .../pages/home/components/ChatSettings.tsx    | 16 ++++++
 .../src/pages/home/components/Inputbar.tsx    | 50 +++++++++++++------
 .../home/components/SendMessageSetting.tsx    | 34 +++++++++++++
 src/renderer/src/store/settings.ts            | 13 +++--
 5 files changed, 108 insertions(+), 19 deletions(-)
 create mode 100644 src/renderer/src/hooks/useSettings.ts
 create mode 100644 src/renderer/src/pages/home/components/ChatSettings.tsx
 create mode 100644 src/renderer/src/pages/home/components/SendMessageSetting.tsx

diff --git a/src/renderer/src/hooks/useSettings.ts b/src/renderer/src/hooks/useSettings.ts
new file mode 100644
index 00000000..8720e816
--- /dev/null
+++ b/src/renderer/src/hooks/useSettings.ts
@@ -0,0 +1,14 @@
+import { useAppDispatch, useAppSelector } from '@renderer/store'
+import { setSendMessageShortcut as _setSendMessageShortcut, SendMessageShortcut } from '@renderer/store/settings'
+
+export function useSettings() {
+  const settings = useAppSelector((state) => state.settings)
+  const dispatch = useAppDispatch()
+
+  return {
+    ...settings,
+    setSendMessageShortcut(shortcut: SendMessageShortcut) {
+      dispatch(_setSendMessageShortcut(shortcut))
+    }
+  }
+}
diff --git a/src/renderer/src/pages/home/components/ChatSettings.tsx b/src/renderer/src/pages/home/components/ChatSettings.tsx
new file mode 100644
index 00000000..0d9f5a02
--- /dev/null
+++ b/src/renderer/src/pages/home/components/ChatSettings.tsx
@@ -0,0 +1,16 @@
+import { FC } from 'react'
+import styled from 'styled-components'
+
+const ChatSettings: FC = () => {
+  return (
+    <Container>
+      <p>Chat Settings</p>
+    </Container>
+  )
+}
+
+const Container = styled.div`
+  width: 300px;
+`
+
+export default ChatSettings
diff --git a/src/renderer/src/pages/home/components/Inputbar.tsx b/src/renderer/src/pages/home/components/Inputbar.tsx
index 16999382..73bec748 100644
--- a/src/renderer/src/pages/home/components/Inputbar.tsx
+++ b/src/renderer/src/pages/home/components/Inputbar.tsx
@@ -9,6 +9,9 @@ import { useShowRightSidebar } from '@renderer/hooks/useStore'
 import { useAssistant } from '@renderer/hooks/useAssistant'
 import { ClearOutlined, HistoryOutlined, PlusCircleOutlined } from '@ant-design/icons'
 import { TextAreaRef } from 'antd/es/input/TextArea'
+import { isEmpty } from 'lodash'
+import SendMessageSetting from './SendMessageSetting'
+import { useSettings } from '@renderer/hooks/useSettings'
 
 interface Props {
   assistant: Assistant
@@ -19,25 +22,40 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
   const [text, setText] = useState('')
   const { setShowRightSidebar } = useShowRightSidebar()
   const { addTopic } = useAssistant(assistant.id)
+  const { sendMessageShortcut } = useSettings()
   const inputRef = useRef<TextAreaRef>(null)
 
+  const sendMessage = () => {
+    if (isEmpty(text.trim())) {
+      return
+    }
+
+    const message: Message = {
+      id: uuid(),
+      role: 'user',
+      content: text,
+      assistantId: assistant.id,
+      topicId: assistant.topics[0].id || uuid(),
+      createdAt: 'now'
+    }
+
+    EventEmitter.emit(EVENT_NAMES.SEND_MESSAGE, message)
+
+    setText('')
+  }
+
   const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (event.key === 'Enter') {
-      const topicId = assistant.topics[0] ? assistant.topics[0] : uuid()
-
-      const message: Message = {
-        id: uuid(),
-        role: 'user',
-        content: text,
-        assistantId: assistant.id,
-        topicId,
-        createdAt: 'now'
+    if (sendMessageShortcut === 'Enter' && event.key === 'Enter') {
+      if (event.shiftKey) {
+        return
       }
+      sendMessage()
+      return event.preventDefault()
+    }
 
-      EventEmitter.emit(EVENT_NAMES.SEND_MESSAGE, message)
-
-      setText('')
-      event.preventDefault()
+    if (sendMessageShortcut === 'Shift+Enter' && event.key === 'Enter' && event.shiftKey) {
+      sendMessage()
+      return event.preventDefault()
     }
   }
 
@@ -101,11 +119,11 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
           </Tooltip>
         </ToolbarMenu>
         <ToolbarMenu>
-          <Tooltip placement="top" title=" Settings " arrow>
+          <SendMessageSetting>
             <ToolbarButton type="text" style={{ marginRight: 0 }}>
               <MoreOutlined />
             </ToolbarButton>
-          </Tooltip>
+          </SendMessageSetting>
         </ToolbarMenu>
       </Toolbar>
       <Textarea
diff --git a/src/renderer/src/pages/home/components/SendMessageSetting.tsx b/src/renderer/src/pages/home/components/SendMessageSetting.tsx
new file mode 100644
index 00000000..859f9032
--- /dev/null
+++ b/src/renderer/src/pages/home/components/SendMessageSetting.tsx
@@ -0,0 +1,34 @@
+import { useSettings } from '@renderer/hooks/useSettings'
+import { Dropdown, MenuProps } from 'antd'
+import { FC, PropsWithChildren } from 'react'
+
+interface Props extends PropsWithChildren {}
+
+const SendMessageSetting: FC<Props> = ({ children }) => {
+  const { sendMessageShortcut, setSendMessageShortcut } = useSettings()
+
+  const sendSettingItems: MenuProps['items'] = [
+    {
+      label: 'Enter Send',
+      key: 'Enter',
+      onClick: () => setSendMessageShortcut('Enter')
+    },
+    {
+      label: 'Shift + Enter Send',
+      key: 'Shift+Enter',
+      onClick: () => setSendMessageShortcut('Shift+Enter')
+    }
+  ]
+
+  return (
+    <Dropdown
+      menu={{ items: sendSettingItems, selectable: true, defaultSelectedKeys: [sendMessageShortcut] }}
+      placement="top"
+      trigger={['click']}
+      arrow>
+      {children}
+    </Dropdown>
+  )
+}
+
+export default SendMessageSetting
diff --git a/src/renderer/src/store/settings.ts b/src/renderer/src/store/settings.ts
index d34cc93b..c8957b83 100644
--- a/src/renderer/src/store/settings.ts
+++ b/src/renderer/src/store/settings.ts
@@ -1,11 +1,15 @@
-import { createSlice } from '@reduxjs/toolkit'
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+
+export type SendMessageShortcut = 'Enter' | 'Shift+Enter'
 
 export interface SettingsState {
   showRightSidebar: boolean
+  sendMessageShortcut: SendMessageShortcut
 }
 
 const initialState: SettingsState = {
-  showRightSidebar: true
+  showRightSidebar: true,
+  sendMessageShortcut: 'Enter'
 }
 
 const settingsSlice = createSlice({
@@ -14,10 +18,13 @@ const settingsSlice = createSlice({
   reducers: {
     toggleRightSidebar: (state) => {
       state.showRightSidebar = !state.showRightSidebar
+    },
+    setSendMessageShortcut: (state, action: PayloadAction<SendMessageShortcut>) => {
+      state.sendMessageShortcut = action.payload
     }
   }
 })
 
-export const { toggleRightSidebar } = settingsSlice.actions
+export const { toggleRightSidebar, setSendMessageShortcut } = settingsSlice.actions
 
 export default settingsSlice.reducer