feat: check or enter to close the list of assistants (#469)

* feat: check or enter to close the list of assistants

* docs: update changelog
This commit is contained in:
ayangweb
2025-04-29 15:16:46 +08:00
committed by GitHub
parent 47d2e46b72
commit 661b5d1b77
10 changed files with 44 additions and 24 deletions

View File

@@ -13,6 +13,8 @@ Information about release notes of Coco Server is provided here.
### 🚀 Features
- feat: check or enter to close the list of assistants #469
### 🐛 Bug fix
### ✈️ Improvements

View File

@@ -51,6 +51,7 @@ export function AssistantList({ assistantIDs = [] }: AssistantListProps) {
const aiAssistant = useShortcutsStore((state) => state.aiAssistant);
const [assistants, setAssistants] = useState<any[]>([]);
const [isRefreshing, setIsRefreshing] = useState(false);
const popoverRef = useRef<HTMLDivElement>(null);
const popoverButtonRef = useRef<HTMLButtonElement>(null);
const searchInputRef = useRef<HTMLInputElement>(null);
const [keyword, setKeyword] = useState("");
@@ -195,25 +196,41 @@ export function AssistantList({ assistantIDs = [] }: AssistantListProps) {
setTimeout(() => setIsRefreshing(false), 1000);
};
useKeyPress(["uparrow", "downarrow"], (_, key) => {
const isClose = isNil(popoverButtonRef.current?.dataset["open"]);
const index = assistants.findIndex(
(item) => item._id === currentAssistant?._id
);
const length = assistants.length;
useKeyPress(
["uparrow", "downarrow", "enter"],
(event, key) => {
const isClose = isNil(popoverButtonRef.current?.dataset["open"]);
if (isClose || length <= 1) return;
if (isClose) return;
let nextIndex = index;
event.stopPropagation();
event.preventDefault();
if (key === "uparrow") {
nextIndex = index > 0 ? index - 1 : length - 1;
} else {
nextIndex = index < length - 1 ? index + 1 : 0;
if (key === "enter") {
return popoverButtonRef.current?.click();
}
const index = assistants.findIndex(
(item) => item._id === currentAssistant?._id
);
const length = assistants.length;
if (length <= 1) return;
let nextIndex = index;
if (key === "uparrow") {
nextIndex = index > 0 ? index - 1 : length - 1;
} else {
nextIndex = index < length - 1 ? index + 1 : 0;
}
setCurrentAssistant(assistants[nextIndex]);
},
{
target: popoverRef,
}
setCurrentAssistant(assistants[nextIndex]);
});
);
const handlePrev = useCallback(() => {
if (pagination.current <= 1) return;
@@ -231,7 +248,7 @@ export function AssistantList({ assistantIDs = [] }: AssistantListProps) {
return (
<div className="relative">
<Popover>
<Popover ref={popoverRef}>
<PopoverButton
ref={popoverButtonRef}
className="h-6 p-1 px-1.5 flex items-center gap-1 rounded-full bg-white dark:bg-[#202126] text-sm/6 font-semibold text-gray-800 dark:text-[#d8d8d8] border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none"
@@ -326,6 +343,7 @@ export function AssistantList({ assistantIDs = [] }: AssistantListProps) {
)}
onClick={() => {
setCurrentAssistant(assistant);
popoverButtonRef.current?.click();
}}
>
<div className="flex items-center justify-center size-6 bg-white border border-[#E6E6E6] rounded-full overflow-hidden">

View File

@@ -125,7 +125,7 @@ const SessionFile = (props: SessionFileProps) => {
onChange={handleCheckAll}
/>
</div>
<ul className="flex-1 overflow-auto flex flex-col gap-2 mt-6">
<ul className="flex-1 overflow-auto flex flex-col gap-2 mt-6 p-0">
{uploadedFiles.map((item) => {
const { id, name, icon, size } = item._source;

View File

@@ -24,7 +24,7 @@ const PrevSuggestion: FC<PrevSuggestionProps> = (props) => {
}, [JSON.stringify(currentAssistant)]);
return (
<ul className="absolute left-2 bottom-2 flex flex-col gap-2">
<ul className="absolute left-2 bottom-2 flex flex-col gap-2 p-0">
{list.map((item) => {
return (
<li

View File

@@ -206,7 +206,7 @@ const HistoryList: FC<HistoryListProps> = (props) => {
<div key={label}>
<span className="text-xs text-[#999] px-3">{t(label)}</span>
<ul>
<ul className="p-0">
{list.map((item) => {
const { _id, _source } = item;

View File

@@ -206,7 +206,7 @@ const ContextMenu = ({ hideCoco }: ContextMenuProps) => {
>
<div className="text-[#999] dark:text-[#666] truncate">{title}</div>
<ul className="flex flex-col -mx-2">
<ul className="flex flex-col -mx-2 p-0">
{searchMenus.map((item, index) => {
const { name, icon, keys, clickEvent } = item;

View File

@@ -261,7 +261,7 @@ export default function SearchPopover({
</div>
{visibleList.length > 0 ? (
<ul className="flex flex-col gap-2">
<ul className="flex flex-col gap-2 p-0">
{visibleList?.map((item, index) => {
const { id, name } = item;

View File

@@ -266,7 +266,7 @@ export default function SearchPopover({
</div>
{visibleList.length > 0 ? (
<ul className="flex flex-col gap-2">
<ul className="flex flex-col gap-2 p-0">
{visibleList?.map((item, index) => {
const { id, name } = item;

View File

@@ -44,7 +44,7 @@ const App: FC<AppProps> = (props) => {
];
return (
<ul className="flex flex-col gap-2">
<ul className="flex flex-col gap-2 p-0">
{metadata.map((item) => {
const { label, value } = item;

View File

@@ -40,7 +40,7 @@ const Applications = () => {
{t("settings.extensions.application.button.addDirectories")}
</Button>
<ul className="flex flex-col gap-2">
<ul className="flex flex-col gap-2 p-0">
{searchPaths.map((item) => {
return (
<li key={item} className="flex items-center justify-between gap-2">