Skip to content

Commit

Permalink
Merge pull request #3869 from continuedev/dallin/unselectable-loading…
Browse files Browse the repository at this point in the history
…-item

Submenu loading items - unselectable Loading item + abort controllers
RomneyDa authored Jan 28, 2025
2 parents e625b24 + 4ba2aef commit a5d01c6
Showing 2 changed files with 197 additions and 151 deletions.
164 changes: 93 additions & 71 deletions gui/src/components/mainInput/MentionList.tsx
Original file line number Diff line number Diff line change
@@ -155,7 +155,6 @@ const ItemDiv = styled.div`
text-align: left;
width: 100%;
color: ${vscForeground};
cursor: pointer;
&.is-selected {
background-color: ${vscListActiveBackground};
@@ -203,6 +202,9 @@ const MentionList = forwardRef((props: MentionListProps, ref) => {
const [querySubmenuItem, setQuerySubmenuItem] = useState<
ComboBoxItem | undefined
>(undefined);
const [loadingSubmenuItem, setLoadingSubmenuItem] = useState<
ComboBoxItem | undefined
>(undefined);

const [allItems, setAllItems] = useState<ComboBoxItem[]>([]);

@@ -245,8 +247,8 @@ const MentionList = forwardRef((props: MentionListProps, ref) => {
description: "Create a new .prompt file",
});
}

setAllItems(items);
setLoadingSubmenuItem(items.find((item) => item.id === "loading"));
setAllItems(items.filter((item) => item.id !== "loading"));
}, [subMenuTitle, props.items, props.editor]);

const queryInputRef = useRef<HTMLTextAreaElement>(null);
@@ -403,78 +405,98 @@ const MentionList = forwardRef((props: MentionListProps, ref) => {
) : (
<>
{subMenuTitle && <ItemDiv className="mb-2">{subMenuTitle}</ItemDiv>}
{loadingSubmenuItem && (
<ItemDiv>
<span className="flex w-full items-center justify-between">
<div className="flex items-center justify-center">
<DropdownIcon item={loadingSubmenuItem} className="mr-2" />
<span>{loadingSubmenuItem.title}</span>
{" "}
</div>
<span
style={{
color: lightGray,
float: "right",
textAlign: "right",
minWidth: "30px",
}}
className="ml-2 flex items-center overflow-hidden overflow-ellipsis whitespace-nowrap text-xs"
>
{loadingSubmenuItem.description}
</span>
</span>
</ItemDiv>
)}
{allItems.length ? (
allItems.map((item, index) => (
<ItemDiv
as="button"
ref={(el) => (itemRefs.current[index] = el)}
className={`item ${
index === selectedIndex ? "is-selected" : ""
}`}
key={index}
onClick={() => selectItem(index)}
onMouseEnter={() => setSelectedIndex(index)}
data-testid="context-provider-dropdown-item"
>
<span className="flex w-full items-center justify-between">
<div className="flex items-center justify-center">
{showFileIconForItem(item) && (
<FileIcon
height="20px"
width="20px"
filename={item.description}
/>
)}
{!showFileIconForItem(item) && (
<>
<DropdownIcon item={item} className="mr-2" />
</>
)}
<span title={item.id}>{item.title}</span>
{" "}
</div>
<span
style={{
color: lightGray,
float: "right",
textAlign: "right",
opacity: index !== selectedIndex ? 0 : 1,
minWidth: "30px",
}}
className="ml-2 flex items-center overflow-hidden overflow-ellipsis whitespace-nowrap"
>
{item.description}
{item.type === "contextProvider" &&
item.contextProvider?.type === "submenu" && (
<ArrowRightIcon
className="ml-2 flex-shrink-0"
width="1.2em"
height="1.2em"
allItems.map((item, index) => {
const isSelected = index === selectedIndex;
return (
<ItemDiv
as="button"
ref={(el) => (itemRefs.current[index] = el)}
className={`item cursor-pointer ${isSelected ? "is-selected" : ""}`}
key={index}
onClick={() => selectItem(index)}
onMouseEnter={() => setSelectedIndex(index)}
data-testid="context-provider-dropdown-item"
>
<span className="flex w-full items-center justify-between">
<div className="flex items-center justify-center">
{showFileIconForItem(item) ? (
<FileIcon
height="20px"
width="20px"
filename={item.description}
/>
) : (
<DropdownIcon item={item} className="mr-2" />
)}
{item.subActions?.map((subAction) => {
const Icon = getIconFromDropdownItem(
subAction.icon,
"action",
);
return (
<HeaderButtonWithToolTip
onClick={(e) => {
subAction.action(item);
e.stopPropagation();
e.preventDefault();
props.onClose();
}}
text={undefined}
>
<Icon width="1.2em" height="1.2em" />
</HeaderButtonWithToolTip>
);
})}
<span title={item.id}>{item.title}</span>
{" "}
</div>
<span
style={{
color: lightGray,
float: "right",
textAlign: "right",
opacity: isSelected ? 1 : 0,
minWidth: "30px",
}}
className="ml-2 flex items-center overflow-hidden overflow-ellipsis whitespace-nowrap text-xs"
>
{item.description}
{item.type === "contextProvider" &&
item.contextProvider?.type === "submenu" && (
<ArrowRightIcon
className="ml-2 flex-shrink-0"
width="1.2em"
height="1.2em"
/>
)}
{item.subActions?.map((subAction) => {
const Icon = getIconFromDropdownItem(
subAction.icon,
"action",
);
return (
<HeaderButtonWithToolTip
onClick={(e) => {
subAction.action(item);
e.stopPropagation();
e.preventDefault();
props.onClose();
}}
text={undefined}
>
<Icon width="1.2em" height="1.2em" />
</HeaderButtonWithToolTip>
);
})}
</span>
</span>
</span>
</ItemDiv>
))
</ItemDiv>
);
})
) : (
<ItemDiv className="item">No results</ItemDiv>
)}
Loading

0 comments on commit a5d01c6

Please sign in to comment.