Merge pull request #22 from devchat-ai/fix-214

Add CSS style for vscode-commandCenter-activeBackground and refactor …

Author: small-stone

src/main.html

@@ -8,6 +8,7 @@
       body {
         margin: 0;
         padding: 0;
+        --vscode-commandCenter-activeBackground: rgba(0, 0, 0, 0.08);
       }
     </style>
   </head>

src/views/components/InputMessage/index.tsx

@@ -397,57 +397,59 @@ const InputMessage = observer((props: any) => {
           marginTop: 5,
         }}
       >
-        <Menu
-          width={chat.chatPanelWidth - 10}
-          position="bottom-start"
-          shadow="sm"
-          withArrow
-          styles={menuStyles}
-          disabled={contextMenus.length === 0}
-        >
-          <Menu.Target>
-            <ActionIcon
-              radius="xl"
-              variant="default"
-              disabled={generating || chat.disabled}
-              className={classes.actionIcon}
-            >
-              <IconTextPlus size="1rem" />
-            </ActionIcon>
-          </Menu.Target>
-          <Menu.Dropdown>
-            <ScrollArea.Autosize placeholder="" type="always" mah={240}>
-              {[...contextMenus]
-                .sort((a, b) => {
-                  if (a.name === "<custom command>") {
-                    return 1; // Placing '<custom command>' at the end
-                  } else if (b.name === "<custom command>") {
-                    return -1; // Placing '<custom command>' at the front
-                  } else {
-                    return (a.name || "").localeCompare(b.name || ""); // Sorting alphabetically for other cases
-                  }
-                })
-                .map(({ pattern, description, name }, index) => {
-                  return (
-                    <Menu.Item
-                      key={`contexts-menus-${index}`}
-                      icon={contextMenuIcon(name)}
-                      onClick={() => {
-                        handleContextClick(name);
-                      }}
-                    >
-                      {name}
-                      <Text
-                        sx={{ fontSize: "9pt", color: theme.colors.gray[6] }}
+        {!showTopic && (
+          <Menu
+            width={chat.chatPanelWidth - 10}
+            position="bottom-start"
+            shadow="sm"
+            withArrow
+            styles={menuStyles}
+            disabled={contextMenus.length === 0}
+          >
+            <Menu.Target>
+              <ActionIcon
+                radius="xl"
+                variant="default"
+                disabled={generating || chat.disabled}
+                className={classes.actionIcon}
+              >
+                <IconTextPlus size="1rem" />
+              </ActionIcon>
+            </Menu.Target>
+            <Menu.Dropdown>
+              <ScrollArea.Autosize placeholder="" type="always" mah={240}>
+                {[...contextMenus]
+                  .sort((a, b) => {
+                    if (a.name === "<custom command>") {
+                      return 1; // Placing '<custom command>' at the end
+                    } else if (b.name === "<custom command>") {
+                      return -1; // Placing '<custom command>' at the front
+                    } else {
+                      return (a.name || "").localeCompare(b.name || ""); // Sorting alphabetically for other cases
+                    }
+                  })
+                  .map(({ pattern, description, name }, index) => {
+                    return (
+                      <Menu.Item
+                        key={`contexts-menus-${index}`}
+                        icon={contextMenuIcon(name)}
+                        onClick={() => {
+                          handleContextClick(name);
+                        }}
                       >
-                        {description}
-                      </Text>
-                    </Menu.Item>
-                  );
-                })}
-            </ScrollArea.Autosize>
-          </Menu.Dropdown>
-        </Menu>
+                        {name}
+                        <Text
+                          sx={{ fontSize: "9pt", color: theme.colors.gray[6] }}
+                        >
+                          {description}
+                        </Text>
+                      </Menu.Item>
+                    );
+                  })}
+              </ScrollArea.Autosize>
+            </Menu.Dropdown>
+          </Menu>
+        )}
         <Menu
           position="bottom-start"
           withArrow
@@ -484,14 +486,14 @@ const InputMessage = observer((props: any) => {
         </Menu>
         {showTopic && (
           <>
-            <Topic
-              styleName={classes.actionIcon}
-              disabled={generating || chat.disabled}
-            />
             <AddTopic
               buttonStyles={buttonStyles}
               disabled={generating || chat.disabled}
             />
+            <Topic
+              styleName={classes.actionIcon}
+              disabled={generating || chat.disabled}
+            />
           </>
         )}
       </Group>