From 0bce853157cf7cd2bf552816ed3e488952212379 Mon Sep 17 00:00:00 2001 From: kangfenmao Date: Tue, 9 Jul 2024 16:11:45 +0800 Subject: [PATCH] feat: edit user message --- src/renderer/src/main.tsx | 1 - .../src/pages/home/components/Inputbar.tsx | 28 ++++++++++++------- .../src/pages/home/components/Message.tsx | 25 ++++++++++++----- .../src/pages/settings/AboutSettings.tsx | 10 ------- src/renderer/src/services/event.ts | 3 +- 5 files changed, 38 insertions(+), 29 deletions(-) diff --git a/src/renderer/src/main.tsx b/src/renderer/src/main.tsx index 04315e95..40d90854 100644 --- a/src/renderer/src/main.tsx +++ b/src/renderer/src/main.tsx @@ -1,4 +1,3 @@ -import 'highlight.js/styles/github-dark.css' import React from 'react' import ReactDOM from 'react-dom/client' import App from './App' diff --git a/src/renderer/src/pages/home/components/Inputbar.tsx b/src/renderer/src/pages/home/components/Inputbar.tsx index 12e2340e..94336e52 100644 --- a/src/renderer/src/pages/home/components/Inputbar.tsx +++ b/src/renderer/src/pages/home/components/Inputbar.tsx @@ -8,7 +8,7 @@ import { Button, Popconfirm, Tooltip } from 'antd' 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 TextArea, { TextAreaRef } from 'antd/es/input/TextArea' import { isEmpty } from 'lodash' import SendMessageSetting from './SendMessageSetting' import { useSettings } from '@renderer/hooks/useSettings' @@ -24,7 +24,7 @@ const Inputbar: FC = ({ assistant, setActiveTopic }) => { const { setShowRightSidebar } = useShowRightSidebar() const { addTopic } = useAssistant(assistant.id) const { sendMessageShortcut } = useSettings() - const inputRef = useRef() + const inputRef = useRef(null) const sendMessage = () => { if (isEmpty(text.trim())) { @@ -85,6 +85,16 @@ const Inputbar: FC = ({ assistant, setActiveTopic }) => { return () => document.removeEventListener('keydown', onKeydown) }, [addNewTopic]) + useEffect(() => { + const unsubscribes = [ + EventEmitter.on(EVENT_NAMES.EDIT_MESSAGE, (message: Message) => { + setText(message.content) + inputRef.current?.focus() + }) + ] + return () => unsubscribes.forEach((unsub) => unsub()) + }, []) + useEffect(() => { inputRef.current?.focus() }, [assistant]) @@ -133,6 +143,9 @@ const Inputbar: FC = ({ assistant, setActiveTopic }) => { placeholder="Type your message here..." autoFocus contextMenu="true" + variant="borderless" + styles={{ textarea: { resize: 'none', paddingLeft: 0 } }} + allowClear ref={inputRef} /> @@ -148,16 +161,11 @@ const Container = styled.div` padding: 5px 15px; ` -const Textarea = styled.textarea` +const Textarea = styled(TextArea)` + padding: 0; + border-radius: 0; display: flex; flex: 1; - border: none; - outline: none; - resize: none; - font-size: 13px; - line-height: 18px; - color: var(--color-text); - background-color: transparent; ` const Toolbar = styled.div` diff --git a/src/renderer/src/pages/home/components/Message.tsx b/src/renderer/src/pages/home/components/Message.tsx index d488b0f0..da0fc76e 100644 --- a/src/renderer/src/pages/home/components/Message.tsx +++ b/src/renderer/src/pages/home/components/Message.tsx @@ -1,12 +1,13 @@ import { Message } from '@renderer/types' -import { Avatar } from 'antd' +import { Avatar, Tooltip } from 'antd' import { FC } from 'react' import styled from 'styled-components' import Logo from '@renderer/assets/images/logo.png' import useAvatar from '@renderer/hooks/useAvatar' -import { CopyOutlined, DeleteOutlined } from '@ant-design/icons' +import { CopyOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons' import Markdown from 'react-markdown' import CodeBlock from './CodeBlock' +import { EVENT_NAMES, EventEmitter } from '@renderer/services/event' interface Props { message: Message @@ -33,6 +34,10 @@ const MessageItem: FC = ({ message, showMenu, onDeleteMessage }) => { confirmed && onDeleteMessage?.(message) } + const onEdit = () => { + EventEmitter.emit(EVENT_NAMES.EDIT_MESSAGE, message) + } + return ( {message.role === 'assistant' ? : } @@ -40,11 +45,19 @@ const MessageItem: FC = ({ message, showMenu, onDeleteMessage }) => { {message.content} - {/* */} {showMenu && ( - - + {message.role === 'user' && ( + + + + )} + + + + + + {message.modelId} )} @@ -64,8 +77,6 @@ const AvatarWrapper = styled.div` margin-right: 10px; ` -// const Markdown = styled.div`` - const MessageContent = styled.div` display: flex; flex-direction: column; diff --git a/src/renderer/src/pages/settings/AboutSettings.tsx b/src/renderer/src/pages/settings/AboutSettings.tsx index 5b893b27..ee58adcf 100644 --- a/src/renderer/src/pages/settings/AboutSettings.tsx +++ b/src/renderer/src/pages/settings/AboutSettings.tsx @@ -3,9 +3,6 @@ import { FC, useEffect, useState } from 'react' import styled from 'styled-components' import Logo from '@renderer/assets/images/logo.png' import { runAsyncFunction } from '@renderer/utils' -import { marked } from 'marked' - -const changeLog = `` const AboutSettings: FC = () => { const [version, setVersion] = useState('') @@ -24,13 +21,6 @@ const AboutSettings: FC = () => { Cherry Studio (v{version}) A powerful AI assistant for producer. -
) } diff --git a/src/renderer/src/services/event.ts b/src/renderer/src/services/event.ts index 1c3d73ad..eb1859c3 100644 --- a/src/renderer/src/services/event.ts +++ b/src/renderer/src/services/event.ts @@ -7,5 +7,6 @@ export const EVENT_NAMES = { AI_CHAT_COMPLETION: 'AI_CHAT_COMPLETION', AI_AUTO_RENAME: 'AI_AUTO_RENAME', CLEAR_MESSAGES: 'CLEAR_MESSAGES', - ADD_ASSISTANT: 'ADD_ASSISTANT' + ADD_ASSISTANT: 'ADD_ASSISTANT', + EDIT_MESSAGE: 'EDIT_MESSAGE' }