Add CSS style for vscode-commandCenter-activeBackground and refactor InputMessage component

This commit is contained in:
小石头 2024-01-25 14:51:11 +08:00
parent 5fd5d2cff4
commit 3fb5516ffc
2 changed files with 57 additions and 54 deletions

View File

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

View File

@ -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>