mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-19 01:40:15 +01:00
📌 feat: Pin Agents and Models in the Sidebar (#10634)
* 🪦 refactor: Remove Legacy Code (#10533) * 🗑️ chore: Remove unused Legacy Provider clients and related helpers * Deleted OpenAIClient and GoogleClient files along with their associated tests. * Removed references to these clients in the clients index file. * Cleaned up typedefs by removing the OpenAISpecClient export. * Updated chat controllers to use the OpenAI SDK directly instead of the removed client classes. * chore/remove-openapi-specs * 🗑️ chore: Remove unused mergeSort and misc utility functions * Deleted mergeSort.js and misc.js files as they are no longer needed. * Removed references to cleanUpPrimaryKeyValue in messages.js and adjusted related logic. * Updated mongoMeili.ts to eliminate local implementations of removed functions. * chore: remove legacy endpoints * chore: remove all plugins endpoint related code * chore: remove unused prompt handling code and clean up imports * Deleted handleInputs.js and instructions.js files as they are no longer needed. * Removed references to these files in the prompts index.js. * Updated docker-compose.yml to simplify reverse proxy configuration. * chore: remove unused LightningIcon import from Icons.tsx * chore: clean up translation.json by removing deprecated and unused keys * chore: update Jest configuration and remove unused mock file * Simplified the setupFiles array in jest.config.js by removing the fetchEventSource mock. * Deleted the fetchEventSource.js mock file as it is no longer needed. * fix: simplify endpoint type check in Landing and ConversationStarters components * Updated the endpoint type check to use strict equality for better clarity and performance. * Ensured consistency in the handling of the azureOpenAI endpoint across both components. * chore: remove unused dependencies from package.json and package-lock.json * chore: remove legacy EditController, associated routes and imports * chore: update banResponse logic to refine request handling for banned users * chore: remove unused validateEndpoint middleware and its references * chore: remove unused 'res' parameter from initializeClient in multiple endpoint files * chore: remove unused 'isSmallScreen' prop from BookmarkNav and NewChat components; clean up imports in ArchivedChatsTable and useSetIndexOptions hooks; enhance localization in PromptVersions * chore: remove unused import of Constants and TMessage from MobileNav; retain only necessary QueryKeys import * chore: remove unused TResPlugin type and related references; clean up imports in types and schemas * 🪦 refactor: Remove Legacy Code (#10533) * 🗑️ chore: Remove unused Legacy Provider clients and related helpers * Deleted OpenAIClient and GoogleClient files along with their associated tests. * Removed references to these clients in the clients index file. * Cleaned up typedefs by removing the OpenAISpecClient export. * Updated chat controllers to use the OpenAI SDK directly instead of the removed client classes. * chore/remove-openapi-specs * 🗑️ chore: Remove unused mergeSort and misc utility functions * Deleted mergeSort.js and misc.js files as they are no longer needed. * Removed references to cleanUpPrimaryKeyValue in messages.js and adjusted related logic. * Updated mongoMeili.ts to eliminate local implementations of removed functions. * chore: remove legacy endpoints * chore: remove all plugins endpoint related code * chore: remove unused prompt handling code and clean up imports * Deleted handleInputs.js and instructions.js files as they are no longer needed. * Removed references to these files in the prompts index.js. * Updated docker-compose.yml to simplify reverse proxy configuration. * chore: remove unused LightningIcon import from Icons.tsx * chore: clean up translation.json by removing deprecated and unused keys * chore: update Jest configuration and remove unused mock file * Simplified the setupFiles array in jest.config.js by removing the fetchEventSource mock. * Deleted the fetchEventSource.js mock file as it is no longer needed. * fix: simplify endpoint type check in Landing and ConversationStarters components * Updated the endpoint type check to use strict equality for better clarity and performance. * Ensured consistency in the handling of the azureOpenAI endpoint across both components. * chore: remove unused dependencies from package.json and package-lock.json * chore: remove legacy EditController, associated routes and imports * chore: update banResponse logic to refine request handling for banned users * chore: remove unused validateEndpoint middleware and its references * chore: remove unused 'res' parameter from initializeClient in multiple endpoint files * chore: remove unused 'isSmallScreen' prop from BookmarkNav and NewChat components; clean up imports in ArchivedChatsTable and useSetIndexOptions hooks; enhance localization in PromptVersions * chore: remove unused import of Constants and TMessage from MobileNav; retain only necessary QueryKeys import * chore: remove unused TResPlugin type and related references; clean up imports in types and schemas * 📦 chore: Bump Express.js to v5 (#10671) * chore: update express to version 5.1.0 in package.json * chore: update express-rate-limit to version 8.2.1 in package.json and package-lock.json * fix: Enhance server startup error handling in experimental and index files * Added error handling for server startup in both experimental.js and index.js to log errors and exit the process if the server fails to start. * Updated comments in openidStrategy.js to clarify the purpose of the CustomOpenIDStrategy class and its relation to Express version changes. * chore: Implement rate limiting for all POST routes excluding /speech, required for express v5 * Added middleware to apply IP and user rate limiters to all POST requests, ensuring that the /speech route remains unaffected. * Enhanced code clarity with comments explaining the new rate limiting logic. * chore: Enable writable req.query for mongoSanitize compatibility in Express 5 * chore: Ensure req.body exists in multiple middleware and route files for Express 5 compatibility * 🗣 feat: MCP Status Accessibility Improvements (#10738) * feat: make MultiSelect highlight same opacity as other focus highlights in app * feat: add better screenreader announcements for mcp server and variable states * feat: memoize fullTitle calculation * 🪨 feat: Add PROXY support for AWS Bedrock endpoints (#8871) * feat: added PROXY support for AWS Bedrock endpoint * chore: explicit install of new packages required for bedrock proxy --------- Co-authored-by: Danny Avila <danny@librechat.ai> * ✨ feat: Implement Favorites functionality with controllers, hooks, and UI components * ✨ feat: Refactor Favorites functionality to support new data structure and enhance UI interactions * ✨ feat: Add endpoint to new conversation for agent favorites * ✨ feat: Enhance Conversations and Favorites components with expanded functionality and improved UI interactions * ✨ feat: Remove 'Pinned' label from UI translations for cleaner interface * feat: clean up comments and improve code readability in favorites and agent components; bump @librechat/data-schemas to 0.0.24 * ✨ feat: Enhance favorites management with validation, update data structure, and improve UI interactions * ✨ feat: Simplify rendering logic in EndpointModelItem and optimize useEffect dependencies in Conversations component * ✨ test: Update favorites mock implementation and improve button focus styles in AgentDetail tests * ✨ feat: Enhance favorites management by adding loading and error states, and refactor related hooks and components * ✨ feat: Add loading skeletons for favorites while agents are being fetched * ✨ feat: Improve loading experience in FavoritesList by adding skeleton placeholders for favorites and marketplace * feat: Optimize cache handling in Conversations and enhance FavoritesList to notify height changes on loading completion * ✨ feat: Add loading skeleton for SearchBar in Nav component and update agent avatar fallback icon to Feather * feat: Refactor FavoritesController validation, streamline ModelSelector component, and enhance EndpointModelItem with selection state * feat: Adjust padding in Conversations and FavoritesList components for improved layout consistency * feat: Refactor FavoritesController to use model methods for user updates and retrieval * feat: Enhance Favorites functionality with validation, cleanup, and improved error handling * tests: Update AgentCard and agent utilities to use Feather icon fallback instead of Bot icon * refactor: Remove collapsible animation styles from CSS * feat: Migrate favorites state management from Recoil to Jotai * fix: Correct type definition in useGetFavoritesQuery and ensure useFavorites is exported * refactor: Simplify AuthField component by removing TooltipAnchor and directly rendering Label * fix: Ensure favorites are always an array and update references in FavoritesList * style: Update Conversation component styles for improved UI consistency * feat: re-integrate AuthContext to manage agent marketplace visibility based on authentication state * fix: Improve optimistic updates in favorites mutation handling * feat: Implement error handling for favorites limit and consolidate marketplace access logic * fix: package-lock --------- Co-authored-by: Danny Avila <danny@librechat.ai> Co-authored-by: Dustin Healy <54083382+dustinhealy@users.noreply.github.com> Co-authored-by: Arthur Barrett <abarrett@fas.harvard.edu>
This commit is contained in:
Marco Beretta
Danny Avila
parent
cea4f57a73
commit
b6e5ea5d33
31 changed files with 1310 additions and 184 deletions
|
|
@ -55,52 +55,55 @@ const AgentCard: React.FC<AgentCardProps> = ({ agent, onClick, className = '' })
|
|||
}
|
||||
}}
|
||||
>
|
||||
{/* Two column layout */}
|
||||
<div className="flex h-full items-start gap-3">
|
||||
{/* Left column: Avatar and Category */}
|
||||
<div className="flex h-full flex-shrink-0 flex-col justify-between space-y-4">
|
||||
<div className="flex-shrink-0">{renderAgentAvatar(agent, { size: 'sm' })}</div>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
{/* Left column: Avatar and Category */}
|
||||
<div className="flex h-full flex-shrink-0 flex-col justify-between space-y-4">
|
||||
<div className="flex-shrink-0">{renderAgentAvatar(agent, { size: 'sm' })}</div>
|
||||
|
||||
{/* Category tag */}
|
||||
{agent.category && (
|
||||
<div className="inline-flex items-center rounded-md border-border-xheavy bg-surface-active-alt px-2 py-1 text-xs font-medium">
|
||||
<Label className="line-clamp-1 font-normal">{categoryLabel}</Label>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right column: Name, description, and other content */}
|
||||
<div className="flex h-full min-w-0 flex-1 flex-col justify-between space-y-1">
|
||||
<div className="space-y-1">
|
||||
{/* Agent name */}
|
||||
<Label className="mb-1 line-clamp-1 text-xl font-semibold text-text-primary">
|
||||
{agent.name}
|
||||
</Label>
|
||||
|
||||
{/* Agent description */}
|
||||
<p
|
||||
id={`agent-${agent.id}-description`}
|
||||
className="line-clamp-3 text-sm leading-relaxed text-text-primary"
|
||||
{...(agent.description ? { 'aria-label': `Description: ${agent.description}` } : {})}
|
||||
>
|
||||
{agent.description ?? ''}
|
||||
</p>
|
||||
{/* Category tag */}
|
||||
{agent.category && (
|
||||
<div className="inline-flex items-center rounded-md border-border-xheavy bg-surface-active-alt px-2 py-1 text-xs font-medium">
|
||||
<Label className="line-clamp-1 font-normal">{categoryLabel}</Label>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Owner info - moved to bottom right */}
|
||||
{(() => {
|
||||
const displayName = getContactDisplayName(agent);
|
||||
if (displayName) {
|
||||
return (
|
||||
<div className="flex justify-end">
|
||||
<div className="flex items-center text-sm text-text-secondary">
|
||||
<Label>{displayName}</Label>
|
||||
{/* Right column: Name, description, and other content */}
|
||||
<div className="flex h-full min-w-0 flex-1 flex-col justify-between space-y-1">
|
||||
<div className="space-y-1">
|
||||
{/* Agent name */}
|
||||
<Label className="mb-1 line-clamp-1 text-xl font-semibold text-text-primary">
|
||||
{agent.name}
|
||||
</Label>
|
||||
|
||||
{/* Agent description */}
|
||||
<p
|
||||
id={`agent-${agent.id}-description`}
|
||||
className="line-clamp-3 text-sm leading-relaxed text-text-primary"
|
||||
{...(agent.description
|
||||
? { 'aria-label': `Description: ${agent.description}` }
|
||||
: {})}
|
||||
>
|
||||
{agent.description ?? ''}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Owner info */}
|
||||
{(() => {
|
||||
const displayName = getContactDisplayName(agent);
|
||||
if (displayName) {
|
||||
return (
|
||||
<div className="flex justify-end">
|
||||
<div className="flex items-center text-sm text-text-secondary">
|
||||
<Label>{displayName}</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
})()}
|
||||
);
|
||||
}
|
||||
return null;
|
||||
})()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useRef } from 'react';
|
||||
import { Link } from 'lucide-react';
|
||||
import { Link, Pin, PinOff } from 'lucide-react';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import { OGDialog, OGDialogContent, Button, useToastContext } from '@librechat/client';
|
||||
import {
|
||||
|
|
@ -11,8 +11,8 @@ import {
|
|||
AgentListResponse,
|
||||
} from 'librechat-data-provider';
|
||||
import type t from 'librechat-data-provider';
|
||||
import { useLocalize, useDefaultConvo, useFavorites } from '~/hooks';
|
||||
import { renderAgentAvatar, clearMessagesCache } from '~/utils';
|
||||
import { useLocalize, useDefaultConvo } from '~/hooks';
|
||||
import { useChatContext } from '~/Providers';
|
||||
|
||||
interface SupportContact {
|
||||
|
|
@ -39,6 +39,14 @@ const AgentDetail: React.FC<AgentDetailProps> = ({ agent, isOpen, onClose }) =>
|
|||
const dialogRef = useRef<HTMLDivElement>(null);
|
||||
const getDefaultConversation = useDefaultConvo();
|
||||
const { conversation, newConversation } = useChatContext();
|
||||
const { isFavoriteAgent, toggleFavoriteAgent } = useFavorites();
|
||||
const isFavorite = isFavoriteAgent(agent?.id);
|
||||
|
||||
const handleFavoriteClick = () => {
|
||||
if (agent) {
|
||||
toggleFavoriteAgent(agent.id);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Navigate to chat with the selected agent
|
||||
|
|
@ -133,42 +141,48 @@ const AgentDetail: React.FC<AgentDetailProps> = ({ agent, isOpen, onClose }) =>
|
|||
return (
|
||||
<OGDialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
|
||||
<OGDialogContent ref={dialogRef} className="max-h-[90vh] w-11/12 max-w-lg overflow-y-auto">
|
||||
{/* Copy link button - positioned next to close button */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="absolute right-11 top-4 h-4 w-4 rounded-sm p-0 opacity-70 ring-ring-primary ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
|
||||
aria-label={localize('com_agents_copy_link')}
|
||||
onClick={handleCopyLink}
|
||||
title={localize('com_agents_copy_link')}
|
||||
>
|
||||
<Link aria-hidden="true" />
|
||||
</Button>
|
||||
|
||||
{/* Agent avatar - top center */}
|
||||
{/* Agent avatar */}
|
||||
<div className="mt-6 flex justify-center">{renderAgentAvatar(agent, { size: 'xl' })}</div>
|
||||
|
||||
{/* Agent name - center aligned below image */}
|
||||
{/* Agent name */}
|
||||
<div className="mt-3 text-center">
|
||||
<h2 className="text-2xl font-bold text-text-primary">
|
||||
{agent?.name || localize('com_agents_loading')}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* Contact info - center aligned below name */}
|
||||
{/* Contact info */}
|
||||
{agent?.support_contact && formatContact() && (
|
||||
<div className="mt-1 text-center text-sm text-text-secondary">
|
||||
{localize('com_agents_contact')}: {formatContact()}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Agent description - below contact */}
|
||||
{/* Agent description */}
|
||||
<div className="mt-4 whitespace-pre-wrap px-6 text-center text-base text-text-primary">
|
||||
{agent?.description}
|
||||
</div>
|
||||
|
||||
{/* Action button */}
|
||||
<div className="mb-4 mt-6 flex justify-center">
|
||||
<div className="mb-4 mt-6 flex justify-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={handleFavoriteClick}
|
||||
title={isFavorite ? localize('com_ui_unpin') : localize('com_ui_pin')}
|
||||
aria-label={isFavorite ? localize('com_ui_unpin') : localize('com_ui_pin')}
|
||||
>
|
||||
{isFavorite ? <PinOff className="h-4 w-4" /> : <Pin className="h-4 w-4" />}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={handleCopyLink}
|
||||
title={localize('com_agents_copy_link')}
|
||||
aria-label={localize('com_agents_copy_link')}
|
||||
>
|
||||
<Link className="h-4 w-4" aria-hidden="true" />
|
||||
</Button>
|
||||
<Button className="w-full max-w-xs" onClick={handleStartChat} disabled={!agent}>
|
||||
{localize('com_agents_start_chat')}
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@ describe('AgentCard', () => {
|
|||
expect(avatarImg).toHaveAttribute('src', '/string-avatar.png');
|
||||
});
|
||||
|
||||
it('displays Bot icon fallback when no avatar is provided', () => {
|
||||
it('displays Feather icon fallback when no avatar is provided', () => {
|
||||
const agentWithoutAvatar = {
|
||||
...mockAgent,
|
||||
avatar: undefined,
|
||||
|
|
@ -112,9 +112,9 @@ describe('AgentCard', () => {
|
|||
|
||||
render(<AgentCard agent={agentWithoutAvatar as any as t.Agent} onClick={mockOnClick} />);
|
||||
|
||||
// Check for Bot icon presence by looking for the svg with lucide-bot class
|
||||
const botIcon = document.querySelector('.lucide-bot');
|
||||
expect(botIcon).toBeInTheDocument();
|
||||
// Check for Feather icon presence by looking for the svg with lucide-feather class
|
||||
const featherIcon = document.querySelector('.lucide-feather');
|
||||
expect(featherIcon).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls onClick when card is clicked', () => {
|
||||
|
|
|
|||
|
|
@ -21,6 +21,23 @@ jest.mock('~/hooks', () => ({
|
|||
useMediaQuery: jest.fn(() => false), // Mock as desktop by default
|
||||
useLocalize: jest.fn(),
|
||||
useDefaultConvo: jest.fn(),
|
||||
useFavorites: jest.fn(() => ({
|
||||
favorites: [],
|
||||
isFavoriteAgent: jest.fn(() => false),
|
||||
toggleFavoriteAgent: jest.fn(),
|
||||
isFavoriteModel: jest.fn(() => false),
|
||||
toggleFavoriteModel: jest.fn(),
|
||||
addFavoriteAgent: jest.fn(),
|
||||
removeFavoriteAgent: jest.fn(),
|
||||
addFavoriteModel: jest.fn(),
|
||||
removeFavoriteModel: jest.fn(),
|
||||
reorderFavorites: jest.fn(),
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
isUpdating: false,
|
||||
fetchError: null,
|
||||
updateError: null,
|
||||
})),
|
||||
}));
|
||||
|
||||
jest.mock('@librechat/client', () => ({
|
||||
|
|
@ -342,7 +359,7 @@ describe('AgentDetail', () => {
|
|||
renderWithProviders(<AgentDetail {...defaultProps} />);
|
||||
|
||||
const copyLinkButton = screen.getByRole('button', { name: 'com_agents_copy_link' });
|
||||
expect(copyLinkButton).toHaveClass('focus:outline-none', 'focus:ring-2');
|
||||
expect(copyLinkButton).toHaveClass('focus-visible:outline-none', 'focus-visible:ring-2');
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -28,7 +28,6 @@ function ModelSelectorContent() {
|
|||
searchValue,
|
||||
searchResults,
|
||||
selectedValues,
|
||||
|
||||
// Functions
|
||||
setSearchValue,
|
||||
setSelectedValues,
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
import React from 'react';
|
||||
import { EarthIcon } from 'lucide-react';
|
||||
import { EarthIcon, Pin, PinOff } from 'lucide-react';
|
||||
import { isAgentsEndpoint, isAssistantsEndpoint } from 'librechat-data-provider';
|
||||
import type { Endpoint } from '~/common';
|
||||
import { useModelSelectorContext } from '../ModelSelectorContext';
|
||||
import { CustomMenuItem as MenuItem } from '../CustomMenu';
|
||||
import { useFavorites, useLocalize } from '~/hooks';
|
||||
import type { Endpoint } from '~/common';
|
||||
import { cn } from '~/utils';
|
||||
|
||||
interface EndpointModelItemProps {
|
||||
modelId: string | null;
|
||||
|
|
@ -12,7 +14,10 @@ interface EndpointModelItemProps {
|
|||
}
|
||||
|
||||
export function EndpointModelItem({ modelId, endpoint, isSelected }: EndpointModelItemProps) {
|
||||
const localize = useLocalize();
|
||||
const { handleSelectModel } = useModelSelectorContext();
|
||||
const { isFavoriteModel, toggleFavoriteModel, isFavoriteAgent, toggleFavoriteAgent } =
|
||||
useFavorites();
|
||||
let isGlobal = false;
|
||||
let modelName = modelId;
|
||||
const avatarUrl = endpoint?.modelIcons?.[modelId ?? ''] || null;
|
||||
|
|
@ -32,31 +37,79 @@ export function EndpointModelItem({ modelId, endpoint, isSelected }: EndpointMod
|
|||
modelName = endpoint.assistantNames[modelId];
|
||||
}
|
||||
|
||||
const isAgent = isAgentsEndpoint(endpoint.value);
|
||||
const isFavorite = isAgent
|
||||
? isFavoriteAgent(modelId ?? '')
|
||||
: isFavoriteModel(modelId ?? '', endpoint.value);
|
||||
|
||||
const handleFavoriteClick = (e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
if (!modelId) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (isAgent) {
|
||||
toggleFavoriteAgent(modelId);
|
||||
} else {
|
||||
toggleFavoriteModel({ model: modelId, endpoint: endpoint.value });
|
||||
}
|
||||
};
|
||||
|
||||
const renderAvatar = () => {
|
||||
const isAgentOrAssistant =
|
||||
isAgentsEndpoint(endpoint.value) || isAssistantsEndpoint(endpoint.value);
|
||||
const showEndpointIcon = isAgentOrAssistant && endpoint.icon;
|
||||
|
||||
const getContent = () => {
|
||||
if (avatarUrl) {
|
||||
return <img src={avatarUrl} alt={modelName ?? ''} className="h-full w-full object-cover" />;
|
||||
}
|
||||
if (showEndpointIcon) {
|
||||
return endpoint.icon;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const content = getContent();
|
||||
if (!content) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-5 w-5 flex-shrink-0 items-center justify-center overflow-hidden rounded-full">
|
||||
{content}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<MenuItem
|
||||
key={modelId}
|
||||
onClick={() => handleSelectModel(endpoint, modelId ?? '')}
|
||||
className="flex w-full cursor-pointer items-center justify-between rounded-lg px-2 text-sm"
|
||||
className="group flex w-full cursor-pointer items-center justify-between rounded-lg px-2 text-sm"
|
||||
>
|
||||
<div className="flex w-full min-w-0 items-center gap-2 px-1 py-1">
|
||||
{avatarUrl ? (
|
||||
<div className="flex h-5 w-5 flex-shrink-0 items-center justify-center overflow-hidden rounded-full">
|
||||
<img src={avatarUrl} alt={modelName ?? ''} className="h-full w-full object-cover" />
|
||||
</div>
|
||||
) : (isAgentsEndpoint(endpoint.value) || isAssistantsEndpoint(endpoint.value)) &&
|
||||
endpoint.icon ? (
|
||||
<div className="flex h-5 w-5 flex-shrink-0 items-center justify-center overflow-hidden rounded-full">
|
||||
{endpoint.icon}
|
||||
</div>
|
||||
) : null}
|
||||
<span className="truncate text-left">{modelName}</span>
|
||||
{isGlobal && (
|
||||
<EarthIcon
|
||||
className="ml-auto size-4 flex-shrink-0 self-center text-green-400"
|
||||
{renderAvatar()}
|
||||
<span className="truncate">{modelName}</span>
|
||||
{isGlobal && <EarthIcon className="ml-1 size-4 text-surface-submit" />}
|
||||
</div>
|
||||
<button
|
||||
onClick={handleFavoriteClick}
|
||||
aria-label={isFavorite ? localize('com_ui_unpin') : localize('com_ui_pin')}
|
||||
className={cn(
|
||||
'rounded-md p-1 hover:bg-surface-hover',
|
||||
isFavorite ? 'visible' : 'invisible group-hover:visible',
|
||||
)}
|
||||
>
|
||||
{isFavorite ? (
|
||||
<PinOff className="h-4 w-4 text-text-secondary" />
|
||||
) : (
|
||||
<Pin
|
||||
className="h-4 w-4 text-text-secondary"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
{isSelected && (
|
||||
<div className="flex-shrink-0 self-center">
|
||||
<svg
|
||||
|
|
|
|||
|
|
@ -1,20 +1,26 @@
|
|||
import { useMemo, memo, type FC, useCallback } from 'react';
|
||||
import { useMemo, memo, type FC, useCallback, useEffect, useRef } from 'react';
|
||||
import throttle from 'lodash/throttle';
|
||||
import { ChevronRight } from 'lucide-react';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
import { Spinner, useMediaQuery } from '@librechat/client';
|
||||
import { List, AutoSizer, CellMeasurer, CellMeasurerCache } from 'react-virtualized';
|
||||
import { TConversation } from 'librechat-data-provider';
|
||||
import { useLocalize, TranslationKeys } from '~/hooks';
|
||||
import { groupConversationsByDate } from '~/utils';
|
||||
import { useLocalize, TranslationKeys, useFavorites, useShowMarketplace } from '~/hooks';
|
||||
import FavoritesList from '~/components/Nav/Favorites/FavoritesList';
|
||||
import { groupConversationsByDate, cn } from '~/utils';
|
||||
import Convo from './Convo';
|
||||
import store from '~/store';
|
||||
|
||||
interface ConversationsProps {
|
||||
conversations: Array<TConversation | null>;
|
||||
moveToTop: () => void;
|
||||
toggleNav: () => void;
|
||||
containerRef: React.RefObject<HTMLDivElement | List>;
|
||||
containerRef: React.RefObject<List>;
|
||||
loadMoreConversations: () => void;
|
||||
isLoading: boolean;
|
||||
isSearchLoading: boolean;
|
||||
isChatsExpanded: boolean;
|
||||
setIsChatsExpanded: (expanded: boolean) => void;
|
||||
}
|
||||
|
||||
const LoadingSpinner = memo(() => {
|
||||
|
|
@ -30,10 +36,13 @@ const LoadingSpinner = memo(() => {
|
|||
|
||||
LoadingSpinner.displayName = 'LoadingSpinner';
|
||||
|
||||
const DateLabel: FC<{ groupName: string }> = memo(({ groupName }) => {
|
||||
const DateLabel: FC<{ groupName: string; isFirst?: boolean }> = memo(({ groupName, isFirst }) => {
|
||||
const localize = useLocalize();
|
||||
return (
|
||||
<h2 className="mt-2 pl-2 pt-1 text-text-secondary" style={{ fontSize: '0.7rem' }}>
|
||||
<h2
|
||||
className={cn('pl-1 pt-1 text-text-secondary', isFirst === true ? 'mt-0' : 'mt-2')}
|
||||
style={{ fontSize: '0.7rem' }}
|
||||
>
|
||||
{localize(groupName as TranslationKeys) || groupName}
|
||||
</h2>
|
||||
);
|
||||
|
|
@ -42,6 +51,8 @@ const DateLabel: FC<{ groupName: string }> = memo(({ groupName }) => {
|
|||
DateLabel.displayName = 'DateLabel';
|
||||
|
||||
type FlattenedItem =
|
||||
| { type: 'favorites' }
|
||||
| { type: 'chats-header' }
|
||||
| { type: 'header'; groupName: string }
|
||||
| { type: 'convo'; convo: TConversation }
|
||||
| { type: 'loading' };
|
||||
|
|
@ -75,10 +86,19 @@ const Conversations: FC<ConversationsProps> = ({
|
|||
loadMoreConversations,
|
||||
isLoading,
|
||||
isSearchLoading,
|
||||
isChatsExpanded,
|
||||
setIsChatsExpanded,
|
||||
}) => {
|
||||
const localize = useLocalize();
|
||||
const search = useRecoilValue(store.search);
|
||||
const { favorites, isLoading: isFavoritesLoading } = useFavorites();
|
||||
const isSmallScreen = useMediaQuery('(max-width: 768px)');
|
||||
const convoHeight = isSmallScreen ? 44 : 34;
|
||||
const showAgentMarketplace = useShowMarketplace();
|
||||
|
||||
// Determine if FavoritesList will render content
|
||||
const shouldShowFavorites =
|
||||
!search.query && (isFavoritesLoading || favorites.length > 0 || showAgentMarketplace);
|
||||
|
||||
const filteredConversations = useMemo(
|
||||
() => rawConversations.filter(Boolean) as TConversation[],
|
||||
|
|
@ -92,39 +112,79 @@ const Conversations: FC<ConversationsProps> = ({
|
|||
|
||||
const flattenedItems = useMemo(() => {
|
||||
const items: FlattenedItem[] = [];
|
||||
groupedConversations.forEach(([groupName, convos]) => {
|
||||
items.push({ type: 'header', groupName });
|
||||
items.push(...convos.map((convo) => ({ type: 'convo' as const, convo })));
|
||||
});
|
||||
// Only include favorites row if FavoritesList will render content
|
||||
if (shouldShowFavorites) {
|
||||
items.push({ type: 'favorites' });
|
||||
}
|
||||
items.push({ type: 'chats-header' });
|
||||
|
||||
if (isLoading) {
|
||||
items.push({ type: 'loading' } as any);
|
||||
if (isChatsExpanded) {
|
||||
groupedConversations.forEach(([groupName, convos]) => {
|
||||
items.push({ type: 'header', groupName });
|
||||
items.push(...convos.map((convo) => ({ type: 'convo' as const, convo })));
|
||||
});
|
||||
|
||||
if (isLoading) {
|
||||
items.push({ type: 'loading' } as any);
|
||||
}
|
||||
}
|
||||
return items;
|
||||
}, [groupedConversations, isLoading]);
|
||||
}, [groupedConversations, isLoading, isChatsExpanded, shouldShowFavorites]);
|
||||
|
||||
// Store flattenedItems in a ref for keyMapper to access without recreating cache
|
||||
const flattenedItemsRef = useRef(flattenedItems);
|
||||
flattenedItemsRef.current = flattenedItems;
|
||||
|
||||
// Create a stable cache that doesn't depend on flattenedItems
|
||||
const cache = useMemo(
|
||||
() =>
|
||||
new CellMeasurerCache({
|
||||
fixedWidth: true,
|
||||
defaultHeight: convoHeight,
|
||||
keyMapper: (index) => {
|
||||
const item = flattenedItems[index];
|
||||
const item = flattenedItemsRef.current[index];
|
||||
if (!item) {
|
||||
return `unknown-${index}`;
|
||||
}
|
||||
if (item.type === 'favorites') {
|
||||
return 'favorites';
|
||||
}
|
||||
if (item.type === 'chats-header') {
|
||||
return 'chats-header';
|
||||
}
|
||||
if (item.type === 'header') {
|
||||
return `header-${index}`;
|
||||
return `header-${item.groupName}`;
|
||||
}
|
||||
if (item.type === 'convo') {
|
||||
return `convo-${item.convo.conversationId}`;
|
||||
}
|
||||
if (item.type === 'loading') {
|
||||
return `loading-${index}`;
|
||||
return 'loading';
|
||||
}
|
||||
return `unknown-${index}`;
|
||||
},
|
||||
}),
|
||||
[flattenedItems, convoHeight],
|
||||
[convoHeight],
|
||||
);
|
||||
|
||||
// Debounced function to clear cache and recompute heights
|
||||
const clearFavoritesCache = useCallback(() => {
|
||||
if (cache) {
|
||||
cache.clear(0, 0);
|
||||
if (containerRef.current && 'recomputeRowHeights' in containerRef.current) {
|
||||
containerRef.current.recomputeRowHeights(0);
|
||||
}
|
||||
}
|
||||
}, [cache, containerRef]);
|
||||
|
||||
// Clear cache when favorites change
|
||||
useEffect(() => {
|
||||
const frameId = requestAnimationFrame(() => {
|
||||
clearFavoritesCache();
|
||||
});
|
||||
return () => cancelAnimationFrame(frameId);
|
||||
}, [favorites.length, isFavoritesLoading, clearFavoritesCache]);
|
||||
|
||||
const rowRenderer = useCallback(
|
||||
({ index, key, parent, style }) => {
|
||||
const item = flattenedItems[index];
|
||||
|
|
@ -140,8 +200,36 @@ const Conversations: FC<ConversationsProps> = ({
|
|||
);
|
||||
}
|
||||
let rendering: JSX.Element;
|
||||
if (item.type === 'header') {
|
||||
rendering = <DateLabel groupName={item.groupName} />;
|
||||
if (item.type === 'favorites') {
|
||||
rendering = (
|
||||
<FavoritesList
|
||||
isSmallScreen={isSmallScreen}
|
||||
toggleNav={toggleNav}
|
||||
onHeightChange={clearFavoritesCache}
|
||||
/>
|
||||
);
|
||||
} else if (item.type === 'chats-header') {
|
||||
rendering = (
|
||||
<button
|
||||
onClick={() => setIsChatsExpanded(!isChatsExpanded)}
|
||||
className="group flex w-full items-center justify-between px-1 py-2 text-xs font-bold text-text-secondary"
|
||||
type="button"
|
||||
>
|
||||
<span className="select-none">{localize('com_ui_chats')}</span>
|
||||
<ChevronRight
|
||||
className={cn(
|
||||
'h-3 w-3 transition-transform duration-200',
|
||||
isChatsExpanded ? 'rotate-90' : '',
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
} else if (item.type === 'header') {
|
||||
// First date header index depends on whether favorites row is included
|
||||
// With favorites: [favorites, chats-header, first-header] → index 2
|
||||
// Without favorites: [chats-header, first-header] → index 1
|
||||
const firstHeaderIndex = shouldShowFavorites ? 2 : 1;
|
||||
rendering = <DateLabel groupName={item.groupName} isFirst={index === firstHeaderIndex} />;
|
||||
} else if (item.type === 'convo') {
|
||||
rendering = (
|
||||
<MemoizedConvo conversation={item.convo} retainView={moveToTop} toggleNav={toggleNav} />
|
||||
|
|
@ -150,14 +238,25 @@ const Conversations: FC<ConversationsProps> = ({
|
|||
return (
|
||||
<CellMeasurer cache={cache} columnIndex={0} key={key} parent={parent} rowIndex={index}>
|
||||
{({ registerChild }) => (
|
||||
<div ref={registerChild} style={style} className="px-2">
|
||||
<div ref={registerChild} style={style} className="">
|
||||
{rendering}
|
||||
</div>
|
||||
)}
|
||||
</CellMeasurer>
|
||||
);
|
||||
},
|
||||
[cache, flattenedItems, moveToTop, toggleNav],
|
||||
[
|
||||
cache,
|
||||
flattenedItems,
|
||||
moveToTop,
|
||||
toggleNav,
|
||||
clearFavoritesCache,
|
||||
isSmallScreen,
|
||||
isChatsExpanded,
|
||||
localize,
|
||||
setIsChatsExpanded,
|
||||
shouldShowFavorites,
|
||||
],
|
||||
);
|
||||
|
||||
const getRowHeight = useCallback(
|
||||
|
|
@ -180,7 +279,7 @@ const Conversations: FC<ConversationsProps> = ({
|
|||
);
|
||||
|
||||
return (
|
||||
<div className="relative flex h-full flex-col pb-2 text-sm text-text-primary">
|
||||
<div className="relative flex h-full min-h-0 flex-col pb-2 text-sm text-text-primary">
|
||||
{isSearchLoading ? (
|
||||
<div className="flex flex-1 items-center justify-center">
|
||||
<Spinner className="text-text-primary" />
|
||||
|
|
@ -191,7 +290,7 @@ const Conversations: FC<ConversationsProps> = ({
|
|||
<AutoSizer>
|
||||
{({ width, height }) => (
|
||||
<List
|
||||
ref={containerRef as React.RefObject<List>}
|
||||
ref={containerRef}
|
||||
width={width}
|
||||
height={height}
|
||||
deferredMeasurementCache={cache}
|
||||
|
|
|
|||
|
|
@ -132,10 +132,10 @@ export default function Conversation({ conversation, retainView, toggleNav }: Co
|
|||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'group relative flex h-12 w-full items-center border-l-2 transition-[background-color] duration-200 md:h-9',
|
||||
isActiveConvo
|
||||
? 'rounded-r-lg border-l-border-xheavy bg-surface-active-alt'
|
||||
: 'rounded-lg border-l-transparent hover:bg-surface-active-alt',
|
||||
'group relative flex h-12 w-full items-center rounded-lg md:h-9',
|
||||
isActiveConvo || isPopoverActive
|
||||
? 'bg-surface-active-alt before:absolute before:bottom-1 before:left-0 before:top-1 before:w-0.5 before:rounded-full before:bg-black dark:before:bg-white'
|
||||
: 'hover:bg-surface-active-alt',
|
||||
)}
|
||||
role="button"
|
||||
tabIndex={renaming ? -1 : 0}
|
||||
|
|
@ -173,6 +173,7 @@ export default function Conversation({ conversation, retainView, toggleNav }: Co
|
|||
) : (
|
||||
<ConvoLink
|
||||
isActiveConvo={isActiveConvo}
|
||||
isPopoverActive={isPopoverActive}
|
||||
title={title}
|
||||
onRename={handleRename}
|
||||
isSmallScreen={isSmallScreen}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { cn } from '~/utils';
|
|||
|
||||
interface ConvoLinkProps {
|
||||
isActiveConvo: boolean;
|
||||
isPopoverActive: boolean;
|
||||
title: string | null;
|
||||
onRename: () => void;
|
||||
isSmallScreen: boolean;
|
||||
|
|
@ -12,6 +13,7 @@ interface ConvoLinkProps {
|
|||
|
||||
const ConvoLink: React.FC<ConvoLinkProps> = ({
|
||||
isActiveConvo,
|
||||
isPopoverActive,
|
||||
title,
|
||||
onRename,
|
||||
isSmallScreen,
|
||||
|
|
@ -22,7 +24,7 @@ const ConvoLink: React.FC<ConvoLinkProps> = ({
|
|||
<div
|
||||
className={cn(
|
||||
'flex grow items-center gap-2 overflow-hidden rounded-lg px-2',
|
||||
isActiveConvo ? 'bg-surface-active-alt' : '',
|
||||
isActiveConvo || isPopoverActive ? 'bg-surface-active-alt' : '',
|
||||
)}
|
||||
title={title ?? undefined}
|
||||
aria-current={isActiveConvo ? 'page' : undefined}
|
||||
|
|
@ -47,7 +49,7 @@ const ConvoLink: React.FC<ConvoLinkProps> = ({
|
|||
<div
|
||||
className={cn(
|
||||
'absolute bottom-0 right-0 top-0 w-20 rounded-r-lg bg-gradient-to-l',
|
||||
isActiveConvo
|
||||
isActiveConvo || isPopoverActive
|
||||
? 'from-surface-active-alt'
|
||||
: 'from-surface-primary-alt from-0% to-transparent group-hover:from-surface-active-alt group-hover:from-40%',
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
import React, { useCallback, useContext } from 'react';
|
||||
import React, { useCallback } from 'react';
|
||||
import { LayoutGrid } from 'lucide-react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { PermissionTypes, Permissions } from 'librechat-data-provider';
|
||||
import { TooltipAnchor, Button } from '@librechat/client';
|
||||
import { useLocalize, useHasAccess, AuthContext } from '~/hooks';
|
||||
import { useLocalize, useShowMarketplace } from '~/hooks';
|
||||
|
||||
interface AgentMarketplaceButtonProps {
|
||||
isSmallScreen?: boolean;
|
||||
|
|
@ -16,17 +15,7 @@ export default function AgentMarketplaceButton({
|
|||
}: AgentMarketplaceButtonProps) {
|
||||
const navigate = useNavigate();
|
||||
const localize = useLocalize();
|
||||
const authContext = useContext(AuthContext);
|
||||
|
||||
const hasAccessToAgents = useHasAccess({
|
||||
permissionType: PermissionTypes.AGENTS,
|
||||
permission: Permissions.USE,
|
||||
});
|
||||
|
||||
const hasAccessToMarketplace = useHasAccess({
|
||||
permissionType: PermissionTypes.MARKETPLACE,
|
||||
permission: Permissions.USE,
|
||||
});
|
||||
const showAgentMarketplace = useShowMarketplace();
|
||||
|
||||
const handleAgentMarketplace = useCallback(() => {
|
||||
navigate('/agents');
|
||||
|
|
@ -35,14 +24,6 @@ export default function AgentMarketplaceButton({
|
|||
}
|
||||
}, [navigate, isSmallScreen, toggleNav]);
|
||||
|
||||
// Check if auth is ready (avoid race conditions)
|
||||
const authReady =
|
||||
authContext?.isAuthenticated !== undefined &&
|
||||
(authContext?.isAuthenticated === false || authContext?.user !== undefined);
|
||||
|
||||
// Show agent marketplace when marketplace permission is enabled, auth is ready, and user has access to agents
|
||||
const showAgentMarketplace = authReady && hasAccessToAgents && hasAccessToMarketplace;
|
||||
|
||||
if (!showAgentMarketplace) {
|
||||
return null;
|
||||
}
|
||||
|
|
|
|||
150
client/src/components/Nav/Favorites/FavoriteItem.tsx
Normal file
150
client/src/components/Nav/Favorites/FavoriteItem.tsx
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
import React, { useState } from 'react';
|
||||
import * as Menu from '@ariakit/react/menu';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Ellipsis, PinOff } from 'lucide-react';
|
||||
import { DropdownPopup } from '@librechat/client';
|
||||
import { EModelEndpoint } from 'librechat-data-provider';
|
||||
import type { FavoriteModel } from '~/store/favorites';
|
||||
import type t from 'librechat-data-provider';
|
||||
import EndpointIcon from '~/components/Endpoints/EndpointIcon';
|
||||
import { useNewConvo, useFavorites, useLocalize } from '~/hooks';
|
||||
import { renderAgentAvatar, cn } from '~/utils';
|
||||
|
||||
type FavoriteItemProps = {
|
||||
item: t.Agent | FavoriteModel;
|
||||
type: 'agent' | 'model';
|
||||
};
|
||||
|
||||
export default function FavoriteItem({ item, type }: FavoriteItemProps) {
|
||||
const navigate = useNavigate();
|
||||
const localize = useLocalize();
|
||||
const { newConversation } = useNewConvo();
|
||||
const { removeFavoriteAgent, removeFavoriteModel } = useFavorites();
|
||||
const [isPopoverActive, setIsPopoverActive] = useState(false);
|
||||
|
||||
const handleClick = (e: React.MouseEvent) => {
|
||||
if ((e.target as HTMLElement).closest('[data-testid="favorite-options-button"]')) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (type === 'agent') {
|
||||
const agent = item as t.Agent;
|
||||
newConversation({
|
||||
template: {
|
||||
...agent,
|
||||
endpoint: EModelEndpoint.agents,
|
||||
agent_id: agent.id,
|
||||
},
|
||||
preset: {
|
||||
...agent,
|
||||
endpoint: EModelEndpoint.agents,
|
||||
agent_id: agent.id,
|
||||
},
|
||||
});
|
||||
navigate(`/c/new`);
|
||||
} else {
|
||||
const model = item as FavoriteModel;
|
||||
newConversation({
|
||||
template: {
|
||||
endpoint: model.endpoint,
|
||||
model: model.model,
|
||||
},
|
||||
preset: {
|
||||
endpoint: model.endpoint,
|
||||
model: model.model,
|
||||
},
|
||||
});
|
||||
navigate(`/c/new`);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemove = (e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
if (type === 'agent') {
|
||||
removeFavoriteAgent((item as t.Agent).id);
|
||||
} else {
|
||||
const model = item as FavoriteModel;
|
||||
removeFavoriteModel(model.model, model.endpoint);
|
||||
}
|
||||
setIsPopoverActive(false);
|
||||
};
|
||||
|
||||
const renderIcon = () => {
|
||||
if (type === 'agent') {
|
||||
return renderAgentAvatar(item as t.Agent, { size: 'icon', className: 'mr-2' });
|
||||
}
|
||||
const model = item as FavoriteModel;
|
||||
return (
|
||||
<div className="mr-2 h-5 w-5">
|
||||
<EndpointIcon
|
||||
conversation={{ endpoint: model.endpoint, model: model.model } as t.TConversation}
|
||||
endpoint={model.endpoint}
|
||||
model={model.model}
|
||||
size={20}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const getName = () => {
|
||||
if (type === 'agent') {
|
||||
return (item as t.Agent).name;
|
||||
}
|
||||
return (item as FavoriteModel).model;
|
||||
};
|
||||
|
||||
const menuId = React.useId();
|
||||
|
||||
const dropdownItems = [
|
||||
{
|
||||
label: localize('com_ui_unpin'),
|
||||
onClick: handleRemove,
|
||||
icon: <PinOff className="h-4 w-4 text-text-secondary" />,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'group relative flex w-full cursor-pointer items-center justify-between rounded-lg px-3 py-2 text-sm text-text-primary hover:bg-surface-active-alt',
|
||||
isPopoverActive ? 'bg-surface-active-alt' : '',
|
||||
)}
|
||||
onClick={handleClick}
|
||||
data-testid="favorite-item"
|
||||
>
|
||||
<div className="flex flex-1 items-center truncate pr-6">
|
||||
{renderIcon()}
|
||||
<span className="truncate">{getName()}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={cn(
|
||||
'absolute right-2 flex items-center',
|
||||
isPopoverActive ? 'opacity-100' : 'opacity-0 group-hover:opacity-100',
|
||||
)}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<DropdownPopup
|
||||
portal={true}
|
||||
mountByState={true}
|
||||
isOpen={isPopoverActive}
|
||||
setIsOpen={setIsPopoverActive}
|
||||
trigger={
|
||||
<Menu.MenuButton
|
||||
className={cn(
|
||||
'flex h-7 w-7 items-center justify-center rounded-md',
|
||||
isPopoverActive ? 'bg-surface-active-alt' : '',
|
||||
)}
|
||||
aria-label={localize('com_ui_options')}
|
||||
data-testid="favorite-options-button"
|
||||
>
|
||||
<Ellipsis className="h-4 w-4 text-text-secondary" />
|
||||
</Menu.MenuButton>
|
||||
}
|
||||
items={dropdownItems}
|
||||
menuId={menuId}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
299
client/src/components/Nav/Favorites/FavoritesList.tsx
Normal file
299
client/src/components/Nav/Favorites/FavoritesList.tsx
Normal file
|
|
@ -0,0 +1,299 @@
|
|||
import React, { useRef, useCallback, useMemo, useEffect } from 'react';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
import { LayoutGrid } from 'lucide-react';
|
||||
import { useDrag, useDrop } from 'react-dnd';
|
||||
import { Skeleton } from '@librechat/client';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { QueryKeys, dataService } from 'librechat-data-provider';
|
||||
import { useQueries, useQueryClient } from '@tanstack/react-query';
|
||||
import type { InfiniteData } from '@tanstack/react-query';
|
||||
import type t from 'librechat-data-provider';
|
||||
import { useFavorites, useLocalize, useShowMarketplace } from '~/hooks';
|
||||
import FavoriteItem from './FavoriteItem';
|
||||
import store from '~/store';
|
||||
|
||||
const FavoriteItemSkeleton = () => (
|
||||
<div className="flex w-full items-center rounded-lg px-3 py-2">
|
||||
<Skeleton className="mr-2 h-5 w-5 rounded-full" />
|
||||
<Skeleton className="h-4 w-24" />
|
||||
</div>
|
||||
);
|
||||
|
||||
const MarketplaceSkeleton = () => (
|
||||
<div className="flex w-full items-center rounded-lg px-3 py-2">
|
||||
<Skeleton className="mr-2 h-5 w-5" />
|
||||
<Skeleton className="h-4 w-28" />
|
||||
</div>
|
||||
);
|
||||
|
||||
interface DraggableFavoriteItemProps {
|
||||
id: string;
|
||||
index: number;
|
||||
moveItem: (dragIndex: number, hoverIndex: number) => void;
|
||||
onDrop: () => void;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const DraggableFavoriteItem = ({
|
||||
id,
|
||||
index,
|
||||
moveItem,
|
||||
onDrop,
|
||||
children,
|
||||
}: DraggableFavoriteItemProps) => {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const [{ handlerId }, drop] = useDrop<{ index: number; id: string }, unknown, { handlerId: any }>(
|
||||
{
|
||||
accept: 'favorite-item',
|
||||
collect(monitor) {
|
||||
return {
|
||||
handlerId: monitor.getHandlerId(),
|
||||
};
|
||||
},
|
||||
hover(item, monitor) {
|
||||
if (!ref.current) {
|
||||
return;
|
||||
}
|
||||
const dragIndex = item.index;
|
||||
const hoverIndex = index;
|
||||
|
||||
if (dragIndex === hoverIndex) {
|
||||
return;
|
||||
}
|
||||
|
||||
const hoverBoundingRect = ref.current?.getBoundingClientRect();
|
||||
const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
|
||||
const clientOffset = monitor.getClientOffset();
|
||||
if (!clientOffset) {
|
||||
return;
|
||||
}
|
||||
const hoverClientY = clientOffset.y - hoverBoundingRect.top;
|
||||
|
||||
if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
|
||||
return;
|
||||
}
|
||||
|
||||
moveItem(dragIndex, hoverIndex);
|
||||
item.index = hoverIndex;
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
const [{ isDragging }, drag] = useDrag({
|
||||
type: 'favorite-item',
|
||||
item: () => {
|
||||
return { id, index };
|
||||
},
|
||||
collect: (monitor) => ({
|
||||
isDragging: monitor.isDragging(),
|
||||
}),
|
||||
end: () => {
|
||||
onDrop();
|
||||
},
|
||||
});
|
||||
|
||||
const opacity = isDragging ? 0 : 1;
|
||||
drag(drop(ref));
|
||||
|
||||
return (
|
||||
<div ref={ref} style={{ opacity }} data-handler-id={handlerId}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default function FavoritesList({
|
||||
isSmallScreen,
|
||||
toggleNav,
|
||||
onHeightChange,
|
||||
}: {
|
||||
isSmallScreen?: boolean;
|
||||
toggleNav?: () => void;
|
||||
/** Callback when the list height might have changed (e.g., agents finished loading) */
|
||||
onHeightChange?: () => void;
|
||||
}) {
|
||||
const navigate = useNavigate();
|
||||
const localize = useLocalize();
|
||||
const queryClient = useQueryClient();
|
||||
const search = useRecoilValue(store.search);
|
||||
const { favorites, reorderFavorites, isLoading: isFavoritesLoading } = useFavorites();
|
||||
const showAgentMarketplace = useShowMarketplace();
|
||||
|
||||
const handleAgentMarketplace = useCallback(() => {
|
||||
navigate('/agents');
|
||||
if (isSmallScreen && toggleNav) {
|
||||
toggleNav();
|
||||
}
|
||||
}, [navigate, isSmallScreen, toggleNav]);
|
||||
|
||||
// Ensure favorites is always an array (could be corrupted in localStorage)
|
||||
const safeFavorites = useMemo(() => (Array.isArray(favorites) ? favorites : []), [favorites]);
|
||||
|
||||
const agentIds = safeFavorites.map((f) => f.agentId).filter(Boolean) as string[];
|
||||
|
||||
const agentQueries = useQueries({
|
||||
queries: agentIds.map((agentId) => ({
|
||||
queryKey: [QueryKeys.agent, agentId],
|
||||
queryFn: () => dataService.getAgentById({ agent_id: agentId }),
|
||||
staleTime: 1000 * 60 * 5,
|
||||
})),
|
||||
});
|
||||
|
||||
const isAgentsLoading = agentIds.length > 0 && agentQueries.some((q) => q.isLoading);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isAgentsLoading && onHeightChange) {
|
||||
onHeightChange();
|
||||
}
|
||||
}, [isAgentsLoading, onHeightChange]);
|
||||
const agentsMap = useMemo(() => {
|
||||
const map: Record<string, t.Agent> = {};
|
||||
|
||||
const addToMap = (agent: t.Agent) => {
|
||||
if (agent && agent.id && !map[agent.id]) {
|
||||
map[agent.id] = agent;
|
||||
}
|
||||
};
|
||||
|
||||
const marketplaceData = queryClient.getQueriesData<InfiniteData<t.AgentListResponse>>([
|
||||
QueryKeys.marketplaceAgents,
|
||||
]);
|
||||
marketplaceData.forEach(([_, data]) => {
|
||||
data?.pages.forEach((page) => {
|
||||
page.data.forEach(addToMap);
|
||||
});
|
||||
});
|
||||
|
||||
const agentsListData = queryClient.getQueriesData<t.AgentListResponse>([QueryKeys.agents]);
|
||||
agentsListData.forEach(([_, data]) => {
|
||||
if (data && Array.isArray(data.data)) {
|
||||
data.data.forEach(addToMap);
|
||||
}
|
||||
});
|
||||
|
||||
agentQueries.forEach((query) => {
|
||||
if (query.data) {
|
||||
map[query.data.id] = query.data;
|
||||
}
|
||||
});
|
||||
|
||||
return map;
|
||||
}, [agentQueries, queryClient]);
|
||||
|
||||
const draggedFavoritesRef = useRef(safeFavorites);
|
||||
|
||||
const moveItem = useCallback(
|
||||
(dragIndex: number, hoverIndex: number) => {
|
||||
const newFavorites = [...draggedFavoritesRef.current];
|
||||
const [draggedItem] = newFavorites.splice(dragIndex, 1);
|
||||
newFavorites.splice(hoverIndex, 0, draggedItem);
|
||||
draggedFavoritesRef.current = newFavorites;
|
||||
reorderFavorites(newFavorites, false);
|
||||
},
|
||||
[reorderFavorites],
|
||||
);
|
||||
|
||||
const handleDrop = useCallback(() => {
|
||||
// Persist the final order using the ref which has the latest state
|
||||
reorderFavorites(draggedFavoritesRef.current, true);
|
||||
}, [reorderFavorites]);
|
||||
|
||||
// Keep ref in sync when favorites change from external sources
|
||||
useEffect(() => {
|
||||
draggedFavoritesRef.current = safeFavorites;
|
||||
}, [safeFavorites]);
|
||||
|
||||
if (search.query) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (!isFavoritesLoading && safeFavorites.length === 0 && !showAgentMarketplace) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (isFavoritesLoading) {
|
||||
return (
|
||||
<div className="mb-2 flex flex-col pb-2">
|
||||
<div className="mt-1 flex flex-col gap-1">
|
||||
{showAgentMarketplace && <MarketplaceSkeleton />}
|
||||
<FavoriteItemSkeleton />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mb-2 flex flex-col">
|
||||
<div className="mt-1 flex flex-col gap-1">
|
||||
{/* Show skeletons for ALL items while agents are still loading */}
|
||||
{isAgentsLoading ? (
|
||||
<>
|
||||
{/* Marketplace skeleton */}
|
||||
{showAgentMarketplace && <MarketplaceSkeleton />}
|
||||
{/* Favorite items skeletons */}
|
||||
{safeFavorites.map((_, index) => (
|
||||
<FavoriteItemSkeleton key={`skeleton-${index}`} />
|
||||
))}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{/* Agent Marketplace button */}
|
||||
{showAgentMarketplace && (
|
||||
<div
|
||||
className="group relative flex w-full cursor-pointer items-center justify-between rounded-lg px-3 py-2 text-sm text-text-primary hover:bg-surface-active-alt"
|
||||
onClick={handleAgentMarketplace}
|
||||
data-testid="nav-agents-marketplace-button"
|
||||
>
|
||||
<div className="flex flex-1 items-center truncate pr-6">
|
||||
<div className="mr-2 h-5 w-5">
|
||||
<LayoutGrid className="h-5 w-5 text-text-primary" />
|
||||
</div>
|
||||
<span className="truncate">{localize('com_agents_marketplace')}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{safeFavorites.map((fav, index) => {
|
||||
if (fav.agentId) {
|
||||
const agent = agentsMap[fav.agentId];
|
||||
if (!agent) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<DraggableFavoriteItem
|
||||
key={fav.agentId}
|
||||
id={fav.agentId}
|
||||
index={index}
|
||||
moveItem={moveItem}
|
||||
onDrop={handleDrop}
|
||||
>
|
||||
<FavoriteItem item={agent} type="agent" />
|
||||
</DraggableFavoriteItem>
|
||||
);
|
||||
} else if (fav.model && fav.endpoint) {
|
||||
return (
|
||||
<DraggableFavoriteItem
|
||||
key={`${fav.endpoint}-${fav.model}`}
|
||||
id={`${fav.endpoint}-${fav.model}`}
|
||||
index={index}
|
||||
moveItem={moveItem}
|
||||
onDrop={handleDrop}
|
||||
>
|
||||
<FavoriteItem
|
||||
item={{ model: fav.model, endpoint: fav.endpoint }}
|
||||
type="model"
|
||||
/>
|
||||
</DraggableFavoriteItem>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,7 +1,8 @@
|
|||
import { useCallback, useEffect, useState, useMemo, memo, lazy, Suspense, useRef } from 'react';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
import { List } from 'react-virtualized';
|
||||
import { AnimatePresence, motion } from 'framer-motion';
|
||||
import { useMediaQuery } from '@librechat/client';
|
||||
import { Skeleton, useMediaQuery } from '@librechat/client';
|
||||
import { PermissionTypes, Permissions } from 'librechat-data-provider';
|
||||
import type { ConversationListResponse } from 'librechat-data-provider';
|
||||
import type { InfiniteQueryObserverResult } from '@tanstack/react-query';
|
||||
|
|
@ -21,11 +22,18 @@ import store from '~/store';
|
|||
|
||||
const BookmarkNav = lazy(() => import('./Bookmarks/BookmarkNav'));
|
||||
const AccountSettings = lazy(() => import('./AccountSettings'));
|
||||
const AgentMarketplaceButton = lazy(() => import('./AgentMarketplaceButton'));
|
||||
|
||||
const NAV_WIDTH_DESKTOP = '260px';
|
||||
const NAV_WIDTH_MOBILE = '320px';
|
||||
|
||||
const SearchBarSkeleton = memo(() => (
|
||||
<div className={cn('flex h-10 items-center py-2')}>
|
||||
<Skeleton className="h-10 w-full rounded-lg" />
|
||||
</div>
|
||||
));
|
||||
|
||||
SearchBarSkeleton.displayName = 'SearchBarSkeleton';
|
||||
|
||||
const NavMask = memo(
|
||||
({ navVisible, toggleNavVisible }: { navVisible: boolean; toggleNavVisible: () => void }) => (
|
||||
<div
|
||||
|
|
@ -60,6 +68,7 @@ const Nav = memo(
|
|||
const [navWidth, setNavWidth] = useState(NAV_WIDTH_DESKTOP);
|
||||
const isSmallScreen = useMediaQuery('(max-width: 768px)');
|
||||
const [newUser, setNewUser] = useLocalStorage('newUser', true);
|
||||
const [isChatsExpanded, setIsChatsExpanded] = useLocalStorage('chatsExpanded', true);
|
||||
const [showLoading, setShowLoading] = useState(false);
|
||||
const [tags, setTags] = useState<string[]>([]);
|
||||
|
||||
|
|
@ -92,7 +101,7 @@ const Nav = memo(
|
|||
}, [data?.pages]);
|
||||
|
||||
const outerContainerRef = useRef<HTMLDivElement>(null);
|
||||
const listRef = useRef<any>(null);
|
||||
const conversationsRef = useRef<List | null>(null);
|
||||
|
||||
const { moveToTop } = useNavScrolling<ConversationListResponse>({
|
||||
setShowLoading,
|
||||
|
|
@ -152,16 +161,18 @@ const Nav = memo(
|
|||
}, [isFetchingNextPage, computedHasNextPage, fetchNextPage]);
|
||||
|
||||
const subHeaders = useMemo(
|
||||
() => search.enabled === true && <SearchBar isSmallScreen={isSmallScreen} />,
|
||||
() => (
|
||||
<>
|
||||
{search.enabled === null && <SearchBarSkeleton />}
|
||||
{search.enabled === true && <SearchBar isSmallScreen={isSmallScreen} />}
|
||||
</>
|
||||
),
|
||||
[search.enabled, isSmallScreen],
|
||||
);
|
||||
|
||||
const headerButtons = useMemo(
|
||||
() => (
|
||||
<>
|
||||
<Suspense fallback={null}>
|
||||
<AgentMarketplaceButton isSmallScreen={isSmallScreen} toggleNav={toggleNavVisible} />
|
||||
</Suspense>
|
||||
{hasAccessToBookmarks && (
|
||||
<>
|
||||
<div className="mt-1.5" />
|
||||
|
|
@ -172,7 +183,7 @@ const Nav = memo(
|
|||
)}
|
||||
</>
|
||||
),
|
||||
[hasAccessToBookmarks, tags, isSmallScreen, toggleNavVisible],
|
||||
[hasAccessToBookmarks, tags],
|
||||
);
|
||||
|
||||
const [isSearchLoading, setIsSearchLoading] = useState(
|
||||
|
|
@ -210,24 +221,28 @@ const Nav = memo(
|
|||
<nav
|
||||
id="chat-history-nav"
|
||||
aria-label={localize('com_ui_chat_history')}
|
||||
className="flex h-full flex-col px-2 pb-3.5 md:px-3"
|
||||
className="flex h-full flex-col px-2 pb-3.5"
|
||||
>
|
||||
<div className="flex flex-1 flex-col" ref={outerContainerRef}>
|
||||
<div className="flex flex-1 flex-col overflow-hidden" ref={outerContainerRef}>
|
||||
<MemoNewChat
|
||||
subHeaders={subHeaders}
|
||||
toggleNav={toggleNavVisible}
|
||||
headerButtons={headerButtons}
|
||||
isSmallScreen={isSmallScreen}
|
||||
/>
|
||||
<Conversations
|
||||
conversations={conversations}
|
||||
moveToTop={moveToTop}
|
||||
toggleNav={itemToggleNav}
|
||||
containerRef={listRef}
|
||||
loadMoreConversations={loadMoreConversations}
|
||||
isLoading={isFetchingNextPage || showLoading || isLoading}
|
||||
isSearchLoading={isSearchLoading}
|
||||
/>
|
||||
<div className="flex min-h-0 flex-grow flex-col overflow-hidden">
|
||||
<Conversations
|
||||
conversations={conversations}
|
||||
moveToTop={moveToTop}
|
||||
toggleNav={itemToggleNav}
|
||||
containerRef={conversationsRef}
|
||||
loadMoreConversations={loadMoreConversations}
|
||||
isLoading={isFetchingNextPage || showLoading || isLoading}
|
||||
isSearchLoading={isSearchLoading}
|
||||
isChatsExpanded={isChatsExpanded}
|
||||
setIsChatsExpanded={setIsChatsExpanded}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Suspense fallback={null}>
|
||||
<AccountSettings />
|
||||
|
|
|
|||
|
|
@ -109,10 +109,7 @@ const SearchBar = forwardRef((props: SearchBarProps, ref: React.Ref<HTMLDivEleme
|
|||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'group relative mt-1 flex h-10 cursor-pointer items-center gap-3 rounded-lg border-2 border-transparent px-3 py-2 text-text-primary transition-all duration-200 focus-within:border-ring-primary focus-within:bg-surface-hover hover:bg-surface-hover',
|
||||
isSmallScreen === true ? 'mb-2 h-14 rounded-xl' : '',
|
||||
)}
|
||||
className="group relative my-1 flex h-10 cursor-pointer items-center gap-3 rounded-lg border-2 border-transparent px-3 py-2 text-text-primary focus-within:border-ring-primary focus-within:bg-surface-hover hover:bg-surface-hover"
|
||||
>
|
||||
<Search
|
||||
aria-hidden="true"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue