mirror of
https://github.com/infinilabs/coco-app.git
synced 2025-12-16 19:47:43 +01:00
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:
@@ -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
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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;
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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;
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user