Refactor Topic component and add AddTopic component

Author: smallstone

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>
+  );
+}

src/views/components/InputMessage/Topic.tsx

@@ -11,15 +11,14 @@ import {
 import {
   IconClock,
   IconChevronDown,
-  IconPlus,
   IconRefresh,
   IconTrash,
 } from "@tabler/icons-react";
 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}

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