From e9546e844e8b723fdd7df1039024264661fb38e0 Mon Sep 17 00:00:00 2001
From: smallstone <>
Date: Thu, 18 Jan 2024 14:45:07 +0800
Subject: [PATCH] Refactor Topic component and add AddTopic component

---
 .../components/InputMessage/AddTopic.tsx      | 26 +++++++++++++++++++
 src/views/components/InputMessage/Topic.tsx   | 14 ++--------
 src/views/components/InputMessage/index.tsx   | 14 +++++++++-
 3 files changed, 41 insertions(+), 13 deletions(-)
 create mode 100644 src/views/components/InputMessage/AddTopic.tsx

diff --git a/src/views/components/InputMessage/AddTopic.tsx b/src/views/components/InputMessage/AddTopic.tsx
new file mode 100644
index 0000000..7f48a3f
--- /dev/null
+++ b/src/views/components/InputMessage/AddTopic.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { Button } from "@mantine/core";
+import { IconPlus } from "@tabler/icons-react";
+import messageUtil from "@/util/MessageUtil";
+
+export default function Topic({ buttonStyles, disabled }) {
+  const setNewTopic = () => {
+    messageUtil.sendMessage({
+      command: "setNewTopic",
+    });
+  };
+
+  return (
+    <Button
+      variant="default"
+      size="xs"
+      radius="xl"
+      leftIcon={<IconPlus size="1rem" />}
+      styles={buttonStyles}
+      onClick={setNewTopic}
+      disabled={disabled}
+    >
+      New Topic
+    </Button>
+  );
+}
diff --git a/src/views/components/InputMessage/Topic.tsx b/src/views/components/InputMessage/Topic.tsx
index dc4f06b..b884c95 100644
--- a/src/views/components/InputMessage/Topic.tsx
+++ b/src/views/components/InputMessage/Topic.tsx
@@ -11,7 +11,6 @@ import {
 import {
   IconClock,
   IconChevronDown,
-  IconPlus,
   IconRefresh,
   IconTrash,
 } from "@tabler/icons-react";
@@ -19,7 +18,7 @@ import { useDisclosure } from "@mantine/hooks";
 import messageUtil from "@/util/MessageUtil";
 import dayjs from "dayjs";
 
-export default function Topic({ styleName }) {
+export default function Topic({ styleName, disabled }) {
   const [drawerOpened, { open: openDrawer, close: closeDrawer }] =
     useDisclosure(false);
   const [loading, setLoading] = useState(false);
@@ -55,13 +54,6 @@ export default function Topic({ styleName }) {
     });
   };
 
-  const setNewTopic = () => {
-    messageUtil.sendMessage({
-      command: "setNewTopic",
-    });
-    closeDrawer();
-  };
-
   const deleteTopic = (topicHash: string) => {
     const newTopicList = topicList.filter(
       (topic) => topic.root_prompt.hash !== topicHash
@@ -82,9 +74,6 @@ export default function Topic({ styleName }) {
           <Flex justify="space-between">
             <Text>Devchat Topic</Text>
             <Flex>
-              <ActionIcon onClick={setNewTopic}>
-                <IconPlus size="1rem" />
-              </ActionIcon>
               <ActionIcon onClick={refreshTopicList}>
                 <IconRefresh size="1rem" />
               </ActionIcon>
@@ -178,6 +167,7 @@ export default function Topic({ styleName }) {
       </Drawer>
       <ActionIcon
         className={styleName}
+        disabled={disabled}
         radius="xl"
         variant="default"
         onClick={openDrawer}
diff --git a/src/views/components/InputMessage/index.tsx b/src/views/components/InputMessage/index.tsx
index 4a19477..144e842 100644
--- a/src/views/components/InputMessage/index.tsx
+++ b/src/views/components/InputMessage/index.tsx
@@ -31,6 +31,7 @@ import {
 import messageUtil from "@/util/MessageUtil";
 import InputContexts from "./InputContexts";
 import Topic from "./Topic";
+import AddTopic from "./AddTopic";
 import { observer } from "mobx-react-lite";
 import { useMst } from "@/views/stores/RootStore";
 import { ChatContext } from "@/views/stores/InputStore";
@@ -481,7 +482,18 @@ const InputMessage = observer((props: any) => {
             </ScrollArea.Autosize>
           </Menu.Dropdown>
         </Menu>
-        {showTopic && <Topic styleName={classes.actionIcon} />}
+        {showTopic && (
+          <>
+            <Topic
+              styleName={classes.actionIcon}
+              disabled={generating || chat.disabled}
+            />
+            <AddTopic
+              buttonStyles={buttonStyles}
+              disabled={generating || chat.disabled}
+            />
+          </>
+        )}
       </Group>
       {contexts && contexts.length > 0 && (
         <Drawer