From 7f61ab2a2115892f88cc6f866c340dc93e466c48 Mon Sep 17 00:00:00 2001 From: kangfenmao Date: Tue, 2 Jul 2024 18:48:32 +0800 Subject: [PATCH] feat: clear conversation --- .../home/components/Chat/Conversations.tsx | 9 ++- .../pages/home/components/Chat/Inputbar.tsx | 64 +++++++++++-------- .../pages/home/components/Chat/TopicList.tsx | 6 +- src/renderer/src/services/event.ts | 3 +- src/renderer/src/services/storage.ts | 13 +++- 5 files changed, 63 insertions(+), 32 deletions(-) diff --git a/src/renderer/src/pages/home/components/Chat/Conversations.tsx b/src/renderer/src/pages/home/components/Chat/Conversations.tsx index 3356ac77..060bb18c 100644 --- a/src/renderer/src/pages/home/components/Chat/Conversations.tsx +++ b/src/renderer/src/pages/home/components/Chat/Conversations.tsx @@ -54,10 +54,15 @@ const Conversations: FC = ({ agent, topic }) => { onSendMessage(msg) setTimeout(() => EventEmitter.emit(EVENT_NAMES.AI_AUTO_RENAME), 100) }), - EventEmitter.on(EVENT_NAMES.AI_AUTO_RENAME, autoRenameTopic) + EventEmitter.on(EVENT_NAMES.AI_AUTO_RENAME, autoRenameTopic), + EventEmitter.on(EVENT_NAMES.CLEAR_CONVERSATION, () => { + setMessages([]) + updateTopic({ ...topic, messages: [] }) + LocalStorage.clearTopicMessages(topic.id) + }) ] return () => unsubscribes.forEach((unsub) => unsub()) - }, [agent, autoRenameTopic, onSendMessage, topic]) + }, [agent, autoRenameTopic, onSendMessage, topic, updateTopic]) useEffect(() => { runAsyncFunction(async () => { diff --git a/src/renderer/src/pages/home/components/Chat/Inputbar.tsx b/src/renderer/src/pages/home/components/Chat/Inputbar.tsx index 97aa7561..fff55fbd 100644 --- a/src/renderer/src/pages/home/components/Chat/Inputbar.tsx +++ b/src/renderer/src/pages/home/components/Chat/Inputbar.tsx @@ -4,9 +4,10 @@ import { uuid } from '@renderer/utils' import { FC, useState } from 'react' import styled from 'styled-components' import { MoreOutlined } from '@ant-design/icons' -import { Tooltip } from 'antd' +import { Button, Popconfirm, Tooltip } from 'antd' import { useShowRightSidebar } from '@renderer/hooks/useStore' import { useAgent } from '@renderer/hooks/useAgents' +import { ClearOutlined, HistoryOutlined, PlusCircleOutlined } from '@ant-design/icons' interface Props { agent: Agent @@ -48,26 +49,44 @@ const Inputbar: FC = ({ agent, setActiveTopic }) => { setActiveTopic(topic) } + const clearTopic = () => { + EventEmitter.emit(EVENT_NAMES.CLEAR_CONVERSATION) + } + return ( - - - + + + - - - + + + + + + + + + + - + - + @@ -75,7 +94,7 @@ const Inputbar: FC = ({ agent, setActiveTopic }) => { value={text} onChange={(e) => setText(e.target.value)} onKeyDown={handleKeyDown} - placeholder="Type a message..." + placeholder="Type your message here..." autoFocus contextMenu="true" /> @@ -98,7 +117,8 @@ const Textarea = styled.textarea` border: none; outline: none; resize: none; - font-size: 14px; + font-size: 13px; + line-height: 18px; color: var(--color-text); background-color: transparent; ` @@ -107,8 +127,8 @@ const Toolbar = styled.div` display: flex; flex-direction: row; justify-content: space-between; - margin-bottom: 5px; margin: 0 -5px; + margin-bottom: 5px; ` const ToolbarMenu = styled.div` @@ -117,29 +137,21 @@ const ToolbarMenu = styled.div` align-items: center; ` -const ToolbarItem = styled.div` - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - cursor: pointer; +const ToolbarButton = styled(Button)` width: 32px; height: 32px; font-size: 18px; border-radius: 50%; - transition: all 0.2s ease-in-out; + transition: all 0.3s ease; margin-right: 6px; color: var(--color-icon); - .iconfont { - font-size: 18px; - transition: all 0.2s ease-in-out; - } - .icon-textedit_text_topic { - font-size: 20px; + &.anticon { + transition: all 0.3s ease; + color: var(--color-icon); } &:hover { background-color: var(--color-background-soft); - .iconfont { + .anticon { color: white; } } diff --git a/src/renderer/src/pages/home/components/Chat/TopicList.tsx b/src/renderer/src/pages/home/components/Chat/TopicList.tsx index edfcde11..2cfea630 100644 --- a/src/renderer/src/pages/home/components/Chat/TopicList.tsx +++ b/src/renderer/src/pages/home/components/Chat/TopicList.tsx @@ -76,12 +76,14 @@ const TopicList: FC = ({ agent, activeTopic, setActiveTopic }) => { Topics ({agent.topics.length}) + okText="Delete All" + okType="danger" + cancelText="Cancel"> diff --git a/src/renderer/src/services/event.ts b/src/renderer/src/services/event.ts index c20482cf..a46f1955 100644 --- a/src/renderer/src/services/event.ts +++ b/src/renderer/src/services/event.ts @@ -5,5 +5,6 @@ export const EventEmitter = new Emittery() export const EVENT_NAMES = { SEND_MESSAGE: 'SEND_MESSAGE', AI_CHAT_COMPLETION: 'AI_CHAT_COMPLETION', - AI_AUTO_RENAME: 'AI_AUTO_RENAME' + AI_AUTO_RENAME: 'AI_AUTO_RENAME', + CLEAR_CONVERSATION: 'CLEAR_CONVERSATION' } diff --git a/src/renderer/src/services/storage.ts b/src/renderer/src/services/storage.ts index 3dc21869..40c3a5c3 100644 --- a/src/renderer/src/services/storage.ts +++ b/src/renderer/src/services/storage.ts @@ -2,12 +2,23 @@ import { Topic } from '@renderer/types' import localforage from 'localforage' export default class LocalStorage { + static async getTopic(id: string) { + return localforage.getItem(`topic:${id}`) + } static async getTopicMessages(id: string) { - const topic = await localforage.getItem(`topic:${id}`) + const topic = await this.getTopic(id) return topic ? topic.messages : [] } static async removeTopic(id: string) { localforage.removeItem(`topic:${id}`) } + + static async clearTopicMessages(id: string) { + const topic = await this.getTopic(id) + if (topic) { + topic.messages = [] + await localforage.setItem(`topic:${id}`, topic) + } + } }