Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-31 15:48:51 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

📦 feat: Move Shared Components to @librechat/client (#8685)

Browse source 
* feat: init @librechat/client

* feat: Add common types and interfaces for accessibility, agents, artifacts, assistants, and tools

* feat: Add jotai as a peer dependency

* fix build client package

* feat: cleanup unused types from common/index.ts

- Remove 104 unused type exports from packages/client/src/common/index.ts
- Keep only 7 actually used exports (93% reduction)
- Add cleanup script with enhanced import pattern detection
- Support both named imports and namespace imports (* as t)
- Create automatic backups and comprehensive documentation
- Maintain type safety with build verification
- No breaking changes to existing code

Kept exports:
- TShowToast, Option, OptionWithIcon, DropdownValueSetter
- MentionOption, NotificationSeverity, MenuItemProps

Scripts: cleanup-common-types-safe.js, README-CLEANUP.md

* fix: cleanup

* fix: package; refactor: tsconfig

* feat: add back `recoil`

* fix: move dependencies to peerDependencies in client package

* feat: add @librechat/client as a dependency in package.json and package-lock.json

* feat: update client package configuration and dependencies

- Added new dependencies for Rollup plugins and updated existing ones in package.json and package-lock.json.
- Introduced a new Rollup configuration file for building the client package.
- Refactored build scripts to include a dedicated build command for the client.
- Updated TypeScript configuration for improved module resolution and type declaration output.
- Integrated a Toast component from the client package into the main App component.

* feat: enhance Rollup configuration for client package

- Updated terser plugin settings to preserve directives like 'use client'.
- Added custom warning handler to ignore "use client" directive warnings during the build process.

* chore: rename package/client build script command

* feat: update client package dependencies and Rollup configuration

- Added rollup-plugin-postcss to package.json and updated package-lock.json.
- Enhanced Rollup configuration to include postcss plugin for CSS handling.
- Updated index.ts to export all components from the components directory for better modularity.

* feat: add client package directory to update configuration

- Included the 'client' package directory in the update.js configuration to ensure it is recognized during updates.

* feat: export Toast component in client package

- Added export for the Toast component in index.ts to enhance modularity and accessibility of components.

* feat: /client transition to @librechat/client

* chore: fixed formatting issues

* fix: update peer dependencies in @librechat/client to prevent bundling them

* fix: correct useSprings implementation in SplitText component

* fix: circular dependencies in DataTable

* fix: add remaining peer dependencies and match actual versions previously used in `client/package.json`

* fix: correct frontend:ci script to include client package build

* chore: enhance unused package detection for @librechat/client and improve dependency extraction

* fix: add missing peer dependency for @radix-ui/react-collapsible

* chore: include "packages/client" in unused i18next keys detection

* test: update AgentFooter tests to use document.querySelector for spinner checks
test: mock window.matchMedia in setupTests.js for consistent test environment

* feat: add react-hook-form dependency and update FormInput component to use its types

* chore: linting

* refactor: remove unused defaultSelectedValues prop from MCPSelect and MultiSelect components

* chore: linting

* feat: update GitHub Actions workflow to publish @librechat/client

* chore: update GitHub Actions workflow to install and build data-provider and client dependencies

* chore: add missing @testing-library/react dependency to client package

* chore: update tsconfig.json to exclude additional test files

* chore: fix build issues, resolve latest LC changes

* chore: move MCP components outside of `~/components/ui`

* feat: implement dynamic theme system with environment variable support and Tailwind CSS integration

* chore: remove unnecessary logging of sttExternal and ttsExternal in Speech component

* chore: squashed cleanup commits

chore: move @tanstack/react-virtual to dependencies and remove recoil from package.json

chore: move dependencies to peerDependencies in package.json

feat: update package.json and rollup.config.js to include jotai and enhance bundling configuration

feat: update package.json and rollup.config.js to include jotai and enhance bundling configuration

refactor: reorganize exports in index.ts for improved clarity

refactor: remove unused types and interfaces from common files

refactor: update peer dependencies and improve component typings

- Removed duplicate peer dependencies from package.json and organized them.
- Updated rollup.config.js to disable TypeScript checking during the build process.
- Modified AnimatedTabs component to use React.ReactNode for label and content types, and added TypeScript workarounds for compatibility.
- Enhanced Label and Separator components to accept an optional className prop and improved prop spreading.
- Updated Slider component to include an optional className prop and refined prop handling for better type safety.

refactor: clean up client workflow and update package dependencies

refactor: update package dependencies and improve PostCSS and Rollup configurations

chore: bump version to 0.1.2 in package.json

chore: bump client version to 0.1.2 in package-lock.json

chore: bump client version to 0.1.3 and update dependencies

chore: bump client version to 0.1.4 and update @react-spring dependencies

chore: update package version to 0.1.5 and adjust peer dependencies

- Bump version in package.json from 0.1.4 to 0.1.5.
- Update peer dependency for @tanstack/react-query to allow version 5.0.0.
- Add @tanstack/react-table and @tanstack/react-virtual as dependencies.
- Update various dependencies to their latest compatible versions.
- Simplify postcss.config.js by removing unnecessary options.
- Clean up rollup.config.js by removing ignored PostCSS warnings.
- Update CheckboxButton component to cast icon as React JSX element.
- Adjust Combobox component's class names for better styling.
- Change DropdownPopup component to use React's namespace import.
- Modify InputOTP component to use 'any' type for OTPInputContext.
- Ensure displayLabel and value in ModelParameters are converted to strings.
- Update MultiSearch component's placeholder to ensure it's a string.
- Cast selectIcon in MultiSelect as React JSX element for consistency.
- Update OGDialogTemplate to cast selectText as React JSX element.
- Initialize animationRef in PixelCard with undefined for clarity.
- Add TypeScript ignore comments in Select and SelectDropDown components for Radix UI type conflicts.
- Ensure title in SelectDropDown is a string and adjust rendering of options.
- Update useLocalize hook to cast options as any for compatibility.

refactor: code structure; chore: translations cleanup

chore: remove unused imports and clean up code in NewChat component

refactor: enhance Menu component to support custom render functions for menu items

style: update itemClassName in ToolsDropdown for improved UI consistency

fix: merge conflicts

chore: update @radix-ui/react-accordion to version 1.2.11

* refactor: remove unnecessary TypeScript type assertions in AnimatedTabs, Label, Separator, and Slider components

* feat: enhance theme system with localStorage persistence and new theme atoms

* chore: bump version of @librechat/client to 0.1.7

* chore: fix ci/cd warnings/errors related to linting and unused localization keys

* chore: update dependencies for class-variance-authority, clsx, and match-sorter

* chore: bump @librechat/client to v0.1.8

* feat: add utility colors for theme customization and remove unused tailwindConfig

* v0.1.9

---------

Co-authored-by: Marco Beretta <81851188+berry-13@users.noreply.github.com>
This commit is contained in:
Danny Avila 2025-07-27 12:19:01 -04:00 • committed by GitHub
parent 97e1cdd224
commit 79197454f8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
569 changed files with 7010 additions and 1848 deletions
Download patch file Download diff file Expand all files Collapse all files

7
client/src/components/SidePanel/Agents/ActionsInput.tsx
View file

@ -1,6 +1,7 @@
import debounce from 'lodash/debounce';
import { useState, useEffect } from 'react';
import debounce from 'lodash/debounce';
import { useFormContext } from 'react-hook-form';
import { Spinner, useToastContext } from '@librechat/client';
import {
validateAndParseOpenAPISpec,
openapiToFunction,
@ -17,9 +18,7 @@ import type { Spec } from './ActionsTable';
import ActionCallback from '~/components/SidePanel/Builder/ActionCallback';
import { ActionsTable, columns } from './ActionsTable';
import { useUpdateAgentAction } from '~/data-provider';
import { useToastContext } from '~/Providers';
import useLocalize from '~/hooks/useLocalize';
import { Spinner } from '~/components/svg';
import { useLocalize } from '~/hooks';
import { logger } from '~/utils';
const debouncedValidation = debounce(

15
client/src/components/SidePanel/Agents/ActionsPanel.tsx
View file

@ -1,21 +1,26 @@
import { useEffect } from 'react';
import { ChevronLeft } from 'lucide-react';
import { useForm, FormProvider } from 'react-hook-form';
import {
AuthTypeEnum,
AuthorizationTypeEnum,
TokenExchangeMethodEnum,
} from 'librechat-data-provider';
import {
OGDialogTemplate,
TrashIcon,
OGDialog,
OGDialogTrigger,
Label,
useToastContext,
} from '@librechat/client';
import ActionsAuth from '~/components/SidePanel/Builder/ActionsAuth';
import { useAgentPanelContext } from '~/Providers/AgentPanelContext';
import { OGDialog, OGDialogTrigger, Label } from '~/components/ui';
import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
import { useDeleteAgentAction } from '~/data-provider';
import type { ActionAuthForm } from '~/common';
import useLocalize from '~/hooks/useLocalize';
import { useToastContext } from '~/Providers';
import { TrashIcon } from '~/components/svg';
import ActionsInput from './ActionsInput';
import { useLocalize } from '~/hooks';
import { Panel } from '~/common';
export default function ActionsPanel() {

13
client/src/components/SidePanel/Agents/AdminSettings.tsx
View file

@ -3,12 +3,19 @@ import { useMemo, useEffect, useState } from 'react';
import { ShieldEllipsis } from 'lucide-react';
import { useForm, Controller } from 'react-hook-form';
import { Permissions, SystemRoles, roleDefaults, PermissionTypes } from 'librechat-data-provider';
import {
OGDialog,
OGDialogTitle,
OGDialogContent,
OGDialogTrigger,
Button,
Switch,
DropdownPopup,
useToastContext,
} from '@librechat/client';
import type { Control, UseFormSetValue, UseFormGetValues } from 'react-hook-form';
import { OGDialog, OGDialogTitle, OGDialogContent, OGDialogTrigger } from '~/components/ui';
import { useUpdateAgentPermissionsMutation } from '~/data-provider';
import { Button, Switch, DropdownPopup } from '~/components/ui';
import { useLocalize, useAuthContext } from '~/hooks';
import { useToastContext } from '~/Providers';
type FormValues = Record<Permissions, boolean>;

2
client/src/components/SidePanel/Agents/Advanced/AdvancedButton.tsx
View file

@ -1,6 +1,6 @@
import React from 'react';
import { Settings2 } from 'lucide-react';
import { Button } from '~/components/ui';
import { Button } from '@librechat/client';
import { useLocalize } from '~/hooks';
import { Panel } from '~/common';

11
client/src/components/SidePanel/Agents/Advanced/AgentChain.tsx
View file

@ -1,13 +1,18 @@
import { X, Link2, PlusCircle } from 'lucide-react';
import { EModelEndpoint } from 'librechat-data-provider';
import React, { useState, useMemo, useCallback, useEffect } from 'react';
import {
ControlCombobox,
HoverCard,
HoverCardPortal,
HoverCardContent,
HoverCardTrigger,
CircleHelpIcon,
} from '@librechat/client';
import type { ControllerRenderProps } from 'react-hook-form';
import type { TMessage } from 'librechat-data-provider';
import type { AgentForm, OptionWithIcon } from '~/common';
import ControlCombobox from '~/components/ui/ControlCombobox';
import { HoverCard, HoverCardPortal, HoverCardContent, HoverCardTrigger } from '~/components/ui';
import MessageIcon from '~/components/Share/MessageIcon';
import { CircleHelpIcon } from '~/components/svg';
import { useAgentsMapContext } from '~/Providers';
import { useLocalize } from '~/hooks';
import { ESide } from '~/common';

6
client/src/components/SidePanel/Agents/Advanced/MaxAgentSteps.tsx
View file

@ -1,13 +1,13 @@
import { useFormContext, Controller } from 'react-hook-form';
import type { AgentForm } from '~/common';
import {
HoverCard,
FormInput,
HoverCardPortal,
HoverCardContent,
HoverCardTrigger,
} from '~/components/ui';
import { CircleHelpIcon } from '~/components/svg';
CircleHelpIcon,
} from '@librechat/client';
import type { AgentForm } from '~/common';
import { useLocalize } from '~/hooks';
import { ESide } from '~/common';

4
client/src/components/SidePanel/Agents/AgentAvatar.tsx
View file

@ -1,5 +1,6 @@
import * as Popover from '@radix-ui/react-popover';
import { useState, useEffect, useRef } from 'react';
import * as Popover from '@radix-ui/react-popover';
import { useToastContext } from '@librechat/client';
import { useQueryClient } from '@tanstack/react-query';
import {
fileConfig as defaultFileConfig,
@ -16,7 +17,6 @@ import type {
} from 'librechat-data-provider';
import { useUploadAgentAvatarMutation, useGetFileConfig } from '~/data-provider';
import { AgentAvatarRender, NoImage, AvatarMenu } from './Images';
import { useToastContext } from '~/Providers';
import { useLocalize } from '~/hooks';
import { formatBytes } from '~/utils';

3
client/src/components/SidePanel/Agents/AgentConfig.tsx
View file

@ -1,4 +1,5 @@
import React, { useState, useMemo, useCallback } from 'react';
import { useToastContext } from '@librechat/client';
import { EModelEndpoint } from 'librechat-data-provider';
import { Controller, useWatch, useFormContext } from 'react-hook-form';
import type { AgentForm, AgentPanelProps, IconComponentTypes } from '~/common';
@ -10,7 +11,7 @@ import {
getIconKey,
cn,
} from '~/utils';
import { useToastContext, useFileMapContext, useAgentPanelContext } from '~/Providers';
import { useFileMapContext, useAgentPanelContext } from '~/Providers';
import useAgentCapabilities from '~/hooks/Agents/useAgentCapabilities';
import Action from '~/components/SidePanel/Builder/Action';
import { ToolSelectDialog } from '~/components/Tools';

4
client/src/components/SidePanel/Agents/AgentFooter.tsx
View file

@ -1,16 +1,16 @@
import { Spinner } from '@librechat/client';
import { useWatch, useFormContext } from 'react-hook-form';
import { SystemRoles, Permissions, PermissionTypes } from 'librechat-data-provider';
import type { AgentForm, AgentPanelProps } from '~/common';
import { useLocalize, useAuthContext, useHasAccess } from '~/hooks';
import { useUpdateAgentMutation } from '~/data-provider';
import AdvancedButton from './Advanced/AdvancedButton';
import VersionButton from './Version/VersionButton';
import DuplicateAgent from './DuplicateAgent';
import AdminSettings from './AdminSettings';
import DeleteButton from './DeleteButton';
import { Spinner } from '~/components';
import ShareAgent from './ShareAgent';
import { Panel } from '~/common';
import VersionButton from './Version/VersionButton';
export default function AgentFooter({
activePanel,

3
client/src/components/SidePanel/Agents/AgentPanel.tsx
View file

@ -1,5 +1,6 @@
import { Plus } from 'lucide-react';
import React, { useMemo, useCallback } from 'react';
import { Button, useToastContext } from '@librechat/client';
import { useWatch, useForm, FormProvider } from 'react-hook-form';
import { useGetModelsQuery } from 'librechat-data-provider/react-query';
import {
@ -20,11 +21,9 @@ import { useSelectAgent, useLocalize, useAuthContext } from '~/hooks';
import { useAgentPanelContext } from '~/Providers/AgentPanelContext';
import AgentPanelSkeleton from './AgentPanelSkeleton';
import AdvancedPanel from './Advanced/AdvancedPanel';
import { useToastContext } from '~/Providers';
import AgentConfig from './AgentConfig';
import AgentSelect from './AgentSelect';
import AgentFooter from './AgentFooter';
import { Button } from '~/components';
import ModelPanel from './ModelPanel';
import { Panel } from '~/common';

2
client/src/components/SidePanel/Agents/AgentPanelSkeleton.tsx
View file

@ -1,5 +1,5 @@
import React from 'react';
import { Skeleton } from '~/components/ui';
import { Skeleton } from '@librechat/client';
export default function AgentPanelSkeleton() {
return (

2
client/src/components/SidePanel/Agents/AgentSelect.tsx
View file

@ -1,4 +1,5 @@
import { EarthIcon } from 'lucide-react';
import { ControlCombobox } from '@librechat/client';
import { useCallback, useEffect, useRef } from 'react';
import { useFormContext, Controller } from 'react-hook-form';
import { AgentCapabilities, defaultAgentFormValues } from 'librechat-data-provider';
@ -7,7 +8,6 @@ import type { Agent, AgentCreateParams } from 'librechat-data-provider';
import type { TAgentCapabilities, AgentForm } from '~/common';
import { cn, createProviderOption, processAgentOption, getDefaultAgentFormValues } from '~/utils';
import { useListAgentsQuery, useGetStartupConfig } from '~/data-provider';
import ControlCombobox from '~/components/ui/ControlCombobox';
import { useLocalize } from '~/hooks';
const keys = new Set(Object.keys(defaultAgentFormValues));

18
client/src/components/SidePanel/Agents/AgentTool.tsx
View file

@ -4,13 +4,21 @@ import { ChevronDown } from 'lucide-react';
import { useFormContext } from 'react-hook-form';
import * as AccordionPrimitive from '@radix-ui/react-accordion';
import { useUpdateUserPluginsMutation } from 'librechat-data-provider/react-query';
import {
Accordion,
AccordionItem,
AccordionContent,
TrashIcon,
CircleHelpIcon,
OGDialog,
OGDialogTrigger,
Label,
Checkbox,
OGDialogTemplate,
useToastContext,
} from '@librechat/client';
import type { AgentToolType } from 'librechat-data-provider';
import type { AgentForm } from '~/common';
import { Accordion, AccordionItem, AccordionContent } from '~/components/ui/Accordion';
import { OGDialog, OGDialogTrigger, Label, Checkbox } from '~/components/ui';
import { TrashIcon, CircleHelpIcon } from '~/components/svg';
import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
import { useToastContext } from '~/Providers';
import { useLocalize } from '~/hooks';
import { cn } from '~/utils';

6
client/src/components/SidePanel/Agents/Artifacts.tsx
View file

@ -1,15 +1,15 @@
import { useFormContext } from 'react-hook-form';
import { ArtifactModes, AgentCapabilities } from 'librechat-data-provider';
import type { AgentForm } from '~/common';
import {
Switch,
HoverCard,
HoverCardPortal,
HoverCardContent,
HoverCardTrigger,
} from '~/components/ui';
CircleHelpIcon,
} from '@librechat/client';
import type { AgentForm } from '~/common';
import { useLocalize } from '~/hooks';
import { CircleHelpIcon } from '~/components/svg';
import { ESide } from '~/common';
export default function Artifacts() {

6
client/src/components/SidePanel/Agents/Code/Action.tsx
View file

@ -1,16 +1,16 @@
import { KeyRoundIcon } from 'lucide-react';
import { AuthType, AgentCapabilities } from 'librechat-data-provider';
import { useFormContext, Controller, useWatch } from 'react-hook-form';
import type { AgentForm } from '~/common';
import {
Checkbox,
HoverCard,
CircleHelpIcon,
HoverCardContent,
HoverCardPortal,
HoverCardTrigger,
} from '~/components/ui';
} from '@librechat/client';
import type { AgentForm } from '~/common';
import { useLocalize, useCodeApiKeyForm } from '~/hooks';
import { CircleHelpIcon } from '~/components/svg';
import ApiKeyDialog from './ApiKeyDialog';
import { ESide } from '~/common';

5
client/src/components/SidePanel/Agents/Code/ApiKeyDialog.tsx
View file

@ -1,9 +1,8 @@
import { OGDialogTemplate, Input, Button, OGDialog } from '@librechat/client';
import type { UseFormRegister, UseFormHandleSubmit } from 'react-hook-form';
import type { ApiKeyFormData } from '~/common';
import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
import { Input, Button, OGDialog } from '~/components/ui';
import { useLocalize } from '~/hooks';
import type { RefObject } from 'react';
import { useLocalize } from '~/hooks';
export default function ApiKeyDialog({
isOpen,

2
client/src/components/SidePanel/Agents/Code/Files.tsx
View file

@ -1,5 +1,6 @@
import { useState, useRef } from 'react';
import { useFormContext } from 'react-hook-form';
import { AttachmentIcon } from '@librechat/client';
import {
EToolResources,
EModelEndpoint,
@ -12,7 +13,6 @@ import type { ExtendedFile, AgentForm } from '~/common';
import { useFileHandling, useLocalize, useLazyEffect } from '~/hooks';
import FileRow from '~/components/Chat/Input/Files/FileRow';
import { useGetFileConfig } from '~/data-provider';
import { AttachmentIcon } from '~/components/svg';
import { useChatContext } from '~/Providers';
const tool_resource = EToolResources.execute_code;

13
client/src/components/SidePanel/Agents/DeleteButton.tsx
View file

@ -1,13 +1,18 @@
import { useFormContext } from 'react-hook-form';
import {
OGDialog,
OGDialogTrigger,
Label,
OGDialogTemplate,
TrashIcon,
useToastContext,
} from '@librechat/client';
import type { Agent, AgentCreateParams } from 'librechat-data-provider';
import type { UseMutationResult } from '@tanstack/react-query';
import { cn, logger, removeFocusOutlines, getDefaultAgentFormValues } from '~/utils';
import { OGDialog, OGDialogTrigger, Label } from '~/components/ui';
import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
import { useChatContext, useToastContext } from '~/Providers';
import { useLocalize, useSetIndexOptions } from '~/hooks';
import { useDeleteAgentMutation } from '~/data-provider';
import { TrashIcon } from '~/components/svg';
import { useChatContext } from '~/Providers';
export default function DeleteButton({
agent_id,

2
client/src/components/SidePanel/Agents/DuplicateAgent.tsx
View file

@ -1,7 +1,7 @@
import { CopyIcon } from 'lucide-react';
import { useToastContext } from '@librechat/client';
import { useDuplicateAgentMutation } from '~/data-provider';
import { cn, removeFocusOutlines } from '~/utils';
import { useToastContext } from '~/Providers';
import { useLocalize } from '~/hooks';
export default function DuplicateAgent({ agent_id }: { agent_id: string }) {

10
client/src/components/SidePanel/Agents/FileContext.tsx
View file

@ -5,12 +5,18 @@ import {
mergeFileConfig,
fileConfig as defaultFileConfig,
} from 'librechat-data-provider';
import {
HoverCard,
HoverCardContent,
HoverCardPortal,
HoverCardTrigger,
AttachmentIcon,
CircleHelpIcon,
} from '@librechat/client';
import type { ExtendedFile } from '~/common';
import { useFileHandling, useLocalize, useLazyEffect } from '~/hooks';
import FileRow from '~/components/Chat/Input/Files/FileRow';
import { useGetFileConfig } from '~/data-provider';
import { HoverCard, HoverCardContent, HoverCardPortal, HoverCardTrigger } from '~/components/ui';
import { AttachmentIcon, CircleHelpIcon } from '~/components/svg';
import { useChatContext } from '~/Providers';
import { ESide } from '~/common';

2
client/src/components/SidePanel/Agents/FileSearch.tsx
View file

@ -1,5 +1,6 @@
import { useState, useRef } from 'react';
import { useFormContext } from 'react-hook-form';
import { AttachmentIcon } from '@librechat/client';
import {
EModelEndpoint,
EToolResources,
@ -12,7 +13,6 @@ import { useFileHandling, useLocalize, useLazyEffect } from '~/hooks';
import FileRow from '~/components/Chat/Input/Files/FileRow';
import FileSearchCheckbox from './FileSearchCheckbox';
import { useGetFileConfig } from '~/data-provider';
import { AttachmentIcon } from '~/components/svg';
import { useChatContext } from '~/Providers';
export default function FileSearch({

6
client/src/components/SidePanel/Agents/FileSearchCheckbox.tsx
View file

@ -1,15 +1,15 @@
import { memo } from 'react';
import { AgentCapabilities } from 'librechat-data-provider';
import { useFormContext, Controller } from 'react-hook-form';
import type { AgentForm } from '~/common';
import {
Checkbox,
HoverCard,
HoverCardContent,
HoverCardPortal,
HoverCardTrigger,
} from '~/components/ui';
import { CircleHelpIcon } from '~/components/svg';
CircleHelpIcon,
} from '@librechat/client';
import type { AgentForm } from '~/common';
import { useLocalize } from '~/hooks';
import { ESide } from '~/common';

6
client/src/components/SidePanel/Agents/ImageVision.tsx
View file

@ -1,7 +1,7 @@
import { useFormContext, Controller } from 'react-hook-form';
import { Checkbox } from '@librechat/client';
import { Capabilities } from 'librechat-data-provider';
import { useFormContext, Controller } from 'react-hook-form';
import type { AgentForm } from '~/common';
import { Checkbox } from '~/components/ui';
import { useLocalize } from '~/hooks';
export default function ImageVision() {
@ -19,7 +19,7 @@ export default function ImageVision() {
{...field}
checked={field.value}
onCheckedChange={field.onChange}
className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer"
className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer"
value={field.value?.toString()}
/>
)}

6
client/src/components/SidePanel/Agents/Instructions.tsx
View file

@ -1,13 +1,13 @@
import React, { useState, useId } from 'react';
import { PlusCircle } from 'lucide-react';
import * as Menu from '@ariakit/react/menu';
import { DropdownPopup } from '@librechat/client';
import { specialVariables } from 'librechat-data-provider';
import type { TSpecialVarLabel } from 'librechat-data-provider';
import { Controller, useFormContext } from 'react-hook-form';
import type { TSpecialVarLabel } from 'librechat-data-provider';
import type { AgentForm } from '~/common';
import { cn, defaultTextProps, removeFocusOutlines } from '~/utils';
// import ControlCombobox from '~/components/ui/ControlCombobox';
import { DropdownPopup } from '~/components';
// import { ControlCombobox } from '@librechat/client';
import { useLocalize } from '~/hooks';
const inputClass = cn(

2
client/src/components/SidePanel/Agents/MCPIcon.tsx
View file

@ -1,5 +1,5 @@
import { useState, useEffect, useRef } from 'react';
import SquirclePlusIcon from '~/components/svg/SquirclePlusIcon';
import { SquirclePlusIcon } from '@librechat/client';
import { useLocalize } from '~/hooks';
interface MCPIconProps {

6
client/src/components/SidePanel/Agents/MCPInput.tsx
View file

@ -1,13 +1,11 @@
import { useState, useEffect } from 'react';
import { useFormContext, Controller } from 'react-hook-form';
import { Label, Checkbox, Spinner, useToastContext } from '@librechat/client';
import type { MCP } from 'librechat-data-provider';
import MCPAuth from '~/components/SidePanel/Builder/MCPAuth';
import MCPIcon from '~/components/SidePanel/Agents/MCPIcon';
import { Label, Checkbox } from '~/components/ui';
import useLocalize from '~/hooks/useLocalize';
import { useToastContext } from '~/Providers';
import { Spinner } from '~/components/svg';
import { MCPForm } from '~/common/types';
import { useLocalize } from '~/hooks';
function useUpdateAgentMCP({
onSuccess,

24
client/src/components/SidePanel/Agents/MCPPanel.tsx
View file

@ -1,21 +1,25 @@
import { useEffect } from 'react';
import { ChevronLeft } from 'lucide-react';
import { useForm, FormProvider } from 'react-hook-form';
import { useAgentPanelContext } from '~/Providers/AgentPanelContext';
import { OGDialog, OGDialogTrigger, Label } from '~/components/ui';
import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
import { defaultMCPFormValues } from '~/common/mcp';
import useLocalize from '~/hooks/useLocalize';
import { useToastContext } from '~/Providers';
import { TrashIcon } from '~/components/svg';
import type { MCPForm } from '~/common';
import MCPInput from './MCPInput';
import { Panel } from '~/common';
import {
AuthTypeEnum,
AuthorizationTypeEnum,
TokenExchangeMethodEnum,
} from 'librechat-data-provider';
import {
OGDialog,
OGDialogTrigger,
Label,
OGDialogTemplate,
TrashIcon,
useToastContext,
} from '@librechat/client';
import { useAgentPanelContext } from '~/Providers/AgentPanelContext';
import { defaultMCPFormValues } from '~/common/mcp';
import type { MCPForm } from '~/common';
import { useLocalize } from '~/hooks';
import MCPInput from './MCPInput';
import { Panel } from '~/common';
// TODO: Add MCP delete (for now mocked for ui)
// import { useDeleteAgentMCP } from '~/data-provider';

2
client/src/components/SidePanel/Agents/MCPSection.tsx
View file

@ -1,6 +1,6 @@
import { useCallback } from 'react';
import { useLocalize } from '~/hooks';
import { useToastContext } from '~/Providers';
import { useToastContext } from '@librechat/client';
import { useAgentPanelContext } from '~/Providers/AgentPanelContext';
import MCP from '~/components/SidePanel/Builder/MCP';
import { Panel } from '~/common';

4
client/src/components/SidePanel/Agents/ModelPanel.tsx
View file

@ -1,5 +1,6 @@
import keyBy from 'lodash/keyBy';
import React, { useMemo, useEffect } from 'react';
import keyBy from 'lodash/keyBy';
import { ControlCombobox } from '@librechat/client';
import { ChevronLeft, RotateCcw } from 'lucide-react';
import { useFormContext, useWatch, Controller } from 'react-hook-form';
import { componentMapping } from '~/components/SidePanel/Parameters/components';
@ -12,7 +13,6 @@ import {
} from 'librechat-data-provider';
import type * as t from 'librechat-data-provider';
import type { AgentForm, AgentModelPanelProps, StringOption } from '~/common';
import ControlCombobox from '~/components/ui/ControlCombobox';
import { useGetEndpointsQuery } from '~/data-provider';
import { getEndpointField, cn } from '~/utils';
import { useLocalize } from '~/hooks';

4
client/src/components/SidePanel/Agents/Retrieval.tsx
View file

@ -4,12 +4,12 @@ import { useFormContext, Controller, useWatch } from 'react-hook-form';
import {
Checkbox,
HoverCard,
CircleHelpIcon,
HoverCardContent,
HoverCardPortal,
HoverCardTrigger,
} from '~/components/ui';
} from '@librechat/client';
import OptionHover from '~/components/SidePanel/Parameters/OptionHover';
import { CircleHelpIcon } from '~/components/svg';
import type { AgentForm } from '~/common';
import { useLocalize } from '~/hooks';
import { ESide } from '~/common';

6
client/src/components/SidePanel/Agents/Search/Action.tsx
View file

@ -1,16 +1,16 @@
import { KeyRoundIcon } from 'lucide-react';
import { AuthType, AgentCapabilities } from 'librechat-data-provider';
import { useFormContext, Controller, useWatch } from 'react-hook-form';
import type { AgentForm } from '~/common';
import {
CircleHelpIcon,
Checkbox,
HoverCard,
HoverCardContent,
HoverCardPortal,
HoverCardTrigger,
} from '~/components/ui';
} from '@librechat/client';
import type { AgentForm } from '~/common';
import { useLocalize, useSearchApiKeyForm } from '~/hooks';
import { CircleHelpIcon } from '~/components/svg';
import ApiKeyDialog from './ApiKeyDialog';
import { ESide } from '~/common';

3
client/src/components/SidePanel/Agents/Search/ApiKeyDialog.tsx
View file

@ -1,4 +1,5 @@
import { useState } from 'react';
import { Button, OGDialog, OGDialogTemplate } from '@librechat/client';
import {
AuthType,
SearchCategories,
@ -9,8 +10,6 @@ import {
import type { SearchApiKeyFormData } from '~/hooks/Plugins/useAuthSearchTool';
import type { UseFormRegister, UseFormHandleSubmit } from 'react-hook-form';
import InputSection, { type DropdownOption } from './InputSection';
import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
import { Button, OGDialog } from '~/components/ui';
import { useGetStartupConfig } from '~/data-provider';
import { useLocalize } from '~/hooks';

7
client/src/components/SidePanel/Agents/Search/InputSection.tsx
View file

@ -1,11 +1,10 @@
import { useState } from 'react';
import { ChevronDown, Eye, EyeOff } from 'lucide-react';
import * as Menu from '@ariakit/react/menu';
import type { UseFormRegister } from 'react-hook-form';
import { ChevronDown, Eye, EyeOff } from 'lucide-react';
import { Input, Label, DropdownPopup } from '@librechat/client';
import type { SearchApiKeyFormData } from '~/hooks/Plugins/useAuthSearchTool';
import type { UseFormRegister } from 'react-hook-form';
import type { MenuItemProps } from '~/common';
import { Input, Label } from '~/components/ui';
import DropdownPopup from '~/components/ui/DropdownPopup';
import { useLocalize } from '~/hooks';
interface InputConfig {

6
client/src/components/SidePanel/Agents/ShareAgent.tsx
View file

@ -2,7 +2,6 @@ import React, { useEffect, useMemo } from 'react';
import { Share2Icon } from 'lucide-react';
import { useForm, Controller } from 'react-hook-form';
import { Permissions } from 'librechat-data-provider';
import type { TStartupConfig, AgentUpdateParams } from 'librechat-data-provider';
import {
Button,
Switch,
@ -11,10 +10,11 @@ import {
OGDialogClose,
OGDialogContent,
OGDialogTrigger,
} from '~/components/ui';
useToastContext,
} from '@librechat/client';
import type { TStartupConfig, AgentUpdateParams } from 'librechat-data-provider';
import { useUpdateAgentMutation, useGetStartupConfig } from '~/data-provider';
import { cn, removeFocusOutlines } from '~/utils';
import { useToastContext } from '~/Providers';
import { useLocalize } from '~/hooks';
type FormValues = {

4
client/src/components/SidePanel/Agents/Version/VersionButton.tsx
View file

@ -1,7 +1,7 @@
import { History } from 'lucide-react';
import { Panel } from '~/common';
import { Button } from '~/components/ui';
import { Button } from '@librechat/client';
import { useLocalize } from '~/hooks';
import { Panel } from '~/common';
interface VersionButtonProps {
setActivePanel: (panel: Panel) => void;

6
client/src/components/SidePanel/Agents/Version/VersionContent.tsx
View file

@ -1,7 +1,7 @@
import { Spinner } from '~/components/svg';
import { useLocalize } from '~/hooks';
import VersionItem from './VersionItem';
import { Spinner } from '@librechat/client';
import type { VersionContext } from './types';
import VersionItem from './VersionItem';
import { useLocalize } from '~/hooks';
type VersionContentProps = {
selectedAgentId: string;

5
client/src/components/SidePanel/Agents/Version/VersionPanel.tsx
View file

@ -1,16 +1,17 @@
import { ChevronLeft } from 'lucide-react';
import { useCallback, useMemo } from 'react';
import { useToastContext } from '@librechat/client';
import { useGetAgentByIdQuery, useRevertAgentVersionMutation } from '~/data-provider';
import type { AgentWithVersions, VersionContext } from './types';
import { isActiveVersion } from './isActiveVersion';
import { useAgentPanelContext } from '~/Providers';
import { useLocalize, useToast } from '~/hooks';
import VersionContent from './VersionContent';
import { useLocalize } from '~/hooks';
import { Panel } from '~/common';
export default function VersionPanel() {
const localize = useLocalize();
const { showToast } = useToast();
const { showToast } = useToastContext();
const { agent_id, setActivePanel } = useAgentPanelContext();
const selectedAgentId = agent_id ?? '';

2
client/src/components/SidePanel/Agents/Version/__tests__/VersionContent.spec.tsx
View file

@ -32,7 +32,7 @@ jest.mock('~/hooks', () => ({
}),
}));
jest.mock('~/components/svg', () => ({
jest.mock('@librechat/client', () => ({
Spinner: () => <div data-testid="spinner" />,
}));

6
client/src/components/SidePanel/Agents/__tests__/AgentFooter.spec.tsx
View file

@ -198,14 +198,14 @@ describe('AgentFooter', () => {
expect(screen.queryByTestId('admin-settings')).not.toBeInTheDocument();
expect(screen.queryByTestId('share-agent')).not.toBeInTheDocument();
expect(screen.queryByTestId('duplicate-agent')).not.toBeInTheDocument();
expect(screen.queryByTestId('spinner')).not.toBeInTheDocument();
expect(document.querySelector('.spinner')).not.toBeInTheDocument();
});
test('handles loading states for createMutation', () => {
const { unmount } = render(
<AgentFooter {...defaultProps} createMutation={createBaseMutation(true)} />,
);
expect(screen.getByTestId('spinner')).toBeInTheDocument();
expect(document.querySelector('.spinner')).toBeInTheDocument();
expect(screen.queryByText('Save')).not.toBeInTheDocument();
expect(screen.getByRole('button')).toBeDisabled();
expect(screen.getByRole('button')).toHaveAttribute('aria-busy', 'true');
@ -214,7 +214,7 @@ describe('AgentFooter', () => {
test('handles loading states for updateMutation', () => {
render(<AgentFooter {...defaultProps} updateMutation={createBaseMutation(true)} />);
expect(screen.getByTestId('spinner')).toBeInTheDocument();
expect(document.querySelector('.spinner')).toBeInTheDocument();
expect(screen.queryByText('Save')).not.toBeInTheDocument();
});
});

4
client/src/components/SidePanel/Bookmarks/BookmarkTable.tsx
View file

@ -1,6 +1,5 @@
import React, { useCallback, useEffect, useState } from 'react';
import { BookmarkPlusIcon } from 'lucide-react';
import type { ConversationTagsResponse, TConversationTag } from 'librechat-data-provider';
import {
Table,
Input,
@ -11,7 +10,8 @@ import {
TableCell,
TableHeader,
OGDialogTrigger,
} from '~/components/ui';
} from '@librechat/client';
import type { ConversationTagsResponse, TConversationTag } from 'librechat-data-provider';
import { BookmarkContext, useBookmarkContext } from '~/Providers/BookmarkContext';
import { BookmarkEditDialog } from '~/components/Bookmarks';
import BookmarkTableRow from './BookmarkTableRow';

3
client/src/components/SidePanel/Bookmarks/BookmarkTableRow.tsx
View file

@ -1,11 +1,10 @@
import React, { useRef } from 'react';
import { useDrag, useDrop } from 'react-dnd';
import type { TConversationTag } from 'librechat-data-provider';
import { TableRow, TableCell, useToastContext } from '@librechat/client';
import { DeleteBookmarkButton, EditBookmarkButton } from '~/components/Bookmarks';
import { useConversationTagMutation } from '~/data-provider';
import { TableRow, TableCell } from '~/components/ui';
import { NotificationSeverity } from '~/common';
import { useToastContext } from '~/Providers';
import { useLocalize } from '~/hooks';
interface BookmarkTableRowProps {

2
client/src/components/SidePanel/Builder/Action.tsx
View file

@ -1,6 +1,6 @@
import { useState } from 'react';
import { GearIcon } from '@librechat/client';
import type { Action } from 'librechat-data-provider';
import GearIcon from '~/components/svg/GearIcon';
import { cn } from '~/utils';
export default function Action({ action, onClick }: { action: Action; onClick: () => void }) {

3
client/src/components/SidePanel/Builder/ActionCallback.tsx
View file

@ -2,9 +2,8 @@ import { useState } from 'react';
import { Copy, CopyCheck } from 'lucide-react';
import { useFormContext } from 'react-hook-form';
import { AuthTypeEnum } from 'librechat-data-provider';
import { Button, useToastContext } from '@librechat/client';
import { useLocalize, useCopyToClipboard } from '~/hooks';
import { useToastContext } from '~/Providers';
import { Button } from '~/components/ui';
import { cn } from '~/utils';
export default function ActionCallback({ action_id }: { action_id?: string }) {

2
client/src/components/SidePanel/Builder/ActionsAuth.tsx
View file

@ -13,7 +13,7 @@ import {
OGDialogHeader,
OGDialogContent,
OGDialogTrigger,
} from '~/components/ui';
} from '@librechat/client';
import { TranslationKeys, useLocalize } from '~/hooks';
import { cn } from '~/utils';

6
client/src/components/SidePanel/Builder/ActionsInput.tsx
View file

@ -1,6 +1,7 @@
import debounce from 'lodash/debounce';
import { useState, useEffect } from 'react';
import { useFormContext } from 'react-hook-form';
import { Spinner, useToastContext } from '@librechat/client';
import {
validateAndParseOpenAPISpec,
openapiToFunction,
@ -16,11 +17,10 @@ import type {
import type { ActionAuthForm, ActionWithNullableMetadata } from '~/common';
import type { Spec } from './ActionsTable';
import ActionCallback from '~/components/SidePanel/Builder/ActionCallback';
import { useAssistantsMapContext, useToastContext } from '~/Providers';
import { useAssistantsMapContext } from '~/Providers';
import { ActionsTable, columns } from './ActionsTable';
import { useUpdateAction } from '~/data-provider';
import useLocalize from '~/hooks/useLocalize';
import { Spinner } from '~/components/svg';
import { useLocalize } from '~/hooks';
const debouncedValidation = debounce(
(input: string, callback: (result: ValidationResult) => void) => {

17
client/src/components/SidePanel/Builder/ActionsPanel.tsx
View file

@ -1,20 +1,25 @@
import { useEffect } from 'react';
import { ChevronLeft } from 'lucide-react';
import { useForm, FormProvider } from 'react-hook-form';
import {
AuthTypeEnum,
AuthorizationTypeEnum,
TokenExchangeMethodEnum,
} from 'librechat-data-provider';
import { ChevronLeft } from 'lucide-react';
import {
OGDialog,
OGDialogTrigger,
Label,
OGDialogTemplate,
useToastContext,
TrashIcon,
} from '@librechat/client';
import type { AssistantPanelProps, ActionAuthForm } from '~/common';
import { useAssistantsMapContext, useToastContext } from '~/Providers';
import { OGDialog, OGDialogTrigger, Label } from '~/components/ui';
import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
import { useAssistantsMapContext } from '~/Providers';
import { useDeleteAction } from '~/data-provider';
import { TrashIcon } from '~/components/svg';
import useLocalize from '~/hooks/useLocalize';
import ActionsInput from './ActionsInput';
import ActionsAuth from './ActionsAuth';
import { useLocalize } from '~/hooks';
import { Panel } from '~/common';
export default function ActionsPanel({

8
client/src/components/SidePanel/Builder/AppendDateCheckbox.tsx
View file

@ -1,15 +1,15 @@
import { Control, Controller, UseFormSetValue, UseFormGetValues } from 'react-hook-form';
import { CircleHelpIcon } from '~/components/svg';
import { useLocalize } from '~/hooks';
import {
CircleHelpIcon,
HoverCard,
HoverCardContent,
HoverCardPortal,
HoverCardTrigger,
Checkbox,
} from '~/components/ui';
import { ESide } from '~/common';
} from '@librechat/client';
import type { AssistantForm } from '~/common';
import { useLocalize } from '~/hooks';
import { ESide } from '~/common';
interface AppendDateCheckboxProps {
control: Control<AssistantForm>;

9
client/src/components/SidePanel/Builder/AssistantAvatar.tsx
View file

@ -1,5 +1,6 @@
import * as Popover from '@radix-ui/react-popover';
import { useState, useEffect, useRef, useMemo } from 'react';
import * as Popover from '@radix-ui/react-popover';
import { useToastContext } from '@librechat/client';
import { useQueryClient } from '@tanstack/react-query';
import {
fileConfig as defaultFileConfig,
@ -7,7 +8,6 @@ import {
defaultOrderQuery,
mergeFileConfig,
} from 'librechat-data-provider';
import type { UseMutationResult } from '@tanstack/react-query';
import type {
Metadata,
Assistant,
@ -15,10 +15,11 @@ import type {
AssistantCreateParams,
AssistantListResponse,
} from 'librechat-data-provider';
import type { UseMutationResult } from '@tanstack/react-query';
import { useUploadAssistantAvatarMutation, useGetFileConfig } from '~/data-provider';
import { useToastContext, useAssistantsMapContext } from '~/Providers';
import { AssistantAvatar, NoImage, AvatarMenu } from './Images';
// import { Spinner } from '~/components/svg';
import { useAssistantsMapContext } from '~/Providers';
// import { Spinner } from '@librechat/client';
import { useLocalize } from '~/hooks';
import { formatBytes } from '~/utils';

2
client/src/components/SidePanel/Builder/AssistantConversationStarters.tsx
View file

@ -1,8 +1,8 @@
import React, { useRef, useState } from 'react';
import { Plus, X } from 'lucide-react';
import { TooltipAnchor } from '@librechat/client';
import { Transition } from 'react-transition-group';
import { Constants } from 'librechat-data-provider';
import { TooltipAnchor } from '~/components/ui';
import { useLocalize } from '~/hooks';
interface AssistantConversationStartersProps {

7
client/src/components/SidePanel/Builder/AssistantPanel.tsx
View file

@ -1,6 +1,7 @@
import { useState, useMemo } from 'react';
import { useForm, FormProvider, Controller, useWatch } from 'react-hook-form';
import { useGetModelsQuery } from 'librechat-data-provider/react-query';
import { Spinner, useToastContext, SelectDropDown } from '@librechat/client';
import { useForm, FormProvider, Controller, useWatch } from 'react-hook-form';
import {
Tools,
Capabilities,
@ -18,16 +19,14 @@ import {
import { cn, cardStyle, defaultTextProps, removeFocusOutlines } from '~/utils';
import AssistantConversationStarters from './AssistantConversationStarters';
import AssistantToolsDialog from '~/components/Tools/AssistantToolsDialog';
import { useAssistantsMapContext, useToastContext } from '~/Providers';
import { useSelectAssistant, useLocalize } from '~/hooks';
import { useAssistantsMapContext } from '~/Providers';
import AppendDateCheckbox from './AppendDateCheckbox';
import CapabilitiesForm from './CapabilitiesForm';
import { SelectDropDown } from '~/components/ui';
import AssistantAvatar from './AssistantAvatar';
import AssistantSelect from './AssistantSelect';
import ContextButton from './ContextButton';
import AssistantTool from './AssistantTool';
import { Spinner } from '~/components/svg';
import Knowledge from './Knowledge';
import { Panel } from '~/common';
import Action from './Action';

8
client/src/components/SidePanel/Builder/AssistantSelect.tsx
View file

@ -1,5 +1,6 @@
import { Plus } from 'lucide-react';
import { useMemo, useCallback, useEffect, useRef } from 'react';
import { Plus } from 'lucide-react';
import { SelectDropDown } from '@librechat/client';
import {
Tools,
FileSources,
@ -9,8 +10,6 @@ import {
isImageVisionTool,
defaultAssistantFormValues,
} from 'librechat-data-provider';
import type { UseFormReset } from 'react-hook-form';
import type { UseMutationResult } from '@tanstack/react-query';
import type {
TPlugin,
Assistant,
@ -25,7 +24,8 @@ import type {
TAssistantOption,
LastSelectedModels,
} from '~/common';
import SelectDropDown from '~/components/ui/SelectDropDown';
import type { UseMutationResult } from '@tanstack/react-query';
import type { UseFormReset } from 'react-hook-form';
import { useListAssistantsQuery } from '~/data-provider';
import { useLocalize, useLocalStorage } from '~/hooks';
import { cn, createDropdownSetter } from '~/utils';

14
client/src/components/SidePanel/Builder/AssistantTool.tsx
View file

@ -1,11 +1,15 @@
import React, { useState } from 'react';
import { useFormContext } from 'react-hook-form';
import type { TPlugin } from 'librechat-data-provider';
import { useUpdateUserPluginsMutation } from 'librechat-data-provider/react-query';
import { OGDialog, OGDialogTrigger, Label } from '~/components/ui';
import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
import { useToastContext } from '~/Providers';
import { TrashIcon } from '~/components/svg';
import {
OGDialog,
OGDialogTrigger,
Label,
OGDialogTemplate,
TrashIcon,
useToastContext,
} from '@librechat/client';
import type { TPlugin } from 'librechat-data-provider';
import { useLocalize } from '~/hooks';
import { cn } from '~/utils';

8
client/src/components/SidePanel/Builder/Code.tsx
View file

@ -1,14 +1,14 @@
import { Capabilities } from 'librechat-data-provider';
import { useFormContext, Controller } from 'react-hook-form';
import type { AssistantForm } from '~/common';
import {
Checkbox,
HoverCard,
HoverCardContent,
HoverCardPortal,
HoverCardTrigger,
} from '~/components/ui';
import { CircleHelpIcon } from '~/components/svg';
CircleHelpIcon,
} from '@librechat/client';
import type { AssistantForm } from '~/common';
import { useLocalize } from '~/hooks';
import { ESide } from '~/common';
@ -29,7 +29,7 @@ export default function Code({ version }: { version: number | string }) {
{...field}
checked={field.value}
onCheckedChange={field.onChange}
className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer"
className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer"
value={field.value.toString()}
/>
)}

2
client/src/components/SidePanel/Builder/CodeFiles.tsx
View file

@ -9,8 +9,8 @@ import type { ExtendedFile } from '~/common';
import FileRow from '~/components/Chat/Input/Files/FileRow';
import { useGetFileConfig } from '~/data-provider';
import { useFileHandling } from '~/hooks/Files';
import useLocalize from '~/hooks/useLocalize';
import { useChatContext } from '~/Providers';
import { useLocalize } from '~/hooks';
const tool_resource = EToolResources.code_interpreter;

15
client/src/components/SidePanel/Builder/ContextButton.tsx
View file

@ -1,12 +1,17 @@
import {
Dialog,
DialogTrigger,
Label,
DialogTemplate,
useToastContext,
TrashIcon,
} from '@librechat/client';
import type { Assistant, AssistantCreateParams, AssistantsEndpoint } from 'librechat-data-provider';
import type { UseMutationResult } from '@tanstack/react-query';
import { Dialog, DialogTrigger, Label } from '~/components/ui';
import { useChatContext, useToastContext } from '~/Providers';
import { useDeleteAssistantMutation } from '~/data-provider';
import DialogTemplate from '~/components/ui/DialogTemplate';
import { useLocalize, useSetIndexOptions } from '~/hooks';
import { cn, removeFocusOutlines } from '~/utils/';
import { TrashIcon } from '~/components/svg';
import { cn, removeFocusOutlines } from '~/utils';
import { useChatContext } from '~/Providers';
export default function ContextButton({
activeModel,

6
client/src/components/SidePanel/Builder/ImageVision.tsx
View file

@ -1,7 +1,7 @@
import { useFormContext, Controller } from 'react-hook-form';
import { Checkbox } from '@librechat/client';
import { Capabilities } from 'librechat-data-provider';
import { useFormContext, Controller } from 'react-hook-form';
import type { AssistantForm } from '~/common';
import { Checkbox, QuestionMark } from '~/components/ui';
import { useLocalize } from '~/hooks';
export default function ImageVision() {
@ -19,7 +19,7 @@ export default function ImageVision() {
{...field}
checked={field.value}
onCheckedChange={field.onChange}
className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer"
className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer"
value={field.value.toString()}
/>
)}

2
client/src/components/SidePanel/Builder/Knowledge.tsx
View file

@ -9,8 +9,8 @@ import type { ExtendedFile } from '~/common';
import FileRow from '~/components/Chat/Input/Files/FileRow';
import { useGetFileConfig } from '~/data-provider';
import { useFileHandling } from '~/hooks/Files';
import useLocalize from '~/hooks/useLocalize';
import { useChatContext } from '~/Providers';
import { useLocalize } from '~/hooks';
const CodeInterpreterFiles = ({ children }: { children: React.ReactNode }) => {
const localize = useLocalize();

3
client/src/components/SidePanel/Builder/MCP.tsx
View file

@ -1,7 +1,6 @@
import { useState } from 'react';
import { GearIcon, MCPIcon } from '@librechat/client';
import type { MCP } from 'librechat-data-provider';
import GearIcon from '~/components/svg/GearIcon';
import MCPIcon from '~/components/svg/MCPIcon';
import { cn } from '~/utils';
type MCPProps = {

2
client/src/components/SidePanel/Builder/MCPAuth.tsx
View file

@ -1,11 +1,11 @@
import { useEffect } from 'react';
import { FormProvider, useForm } from 'react-hook-form';
import ActionsAuth from '~/components/SidePanel/Builder/ActionsAuth';
import {
AuthorizationTypeEnum,
TokenExchangeMethodEnum,
AuthTypeEnum,
} from 'librechat-data-provider';
import ActionsAuth from '~/components/SidePanel/Builder/ActionsAuth';
export default function MCPAuth() {
// Create a separate form for auth

6
client/src/components/SidePanel/Builder/Retrieval.tsx
View file

@ -8,13 +8,13 @@ import {
HoverCardContent,
HoverCardPortal,
HoverCardTrigger,
} from '~/components/ui';
CircleHelpIcon,
} from '@librechat/client';
import OptionHover from '~/components/SidePanel/Parameters/OptionHover';
import { CircleHelpIcon } from '~/components/svg';
import type { AssistantForm } from '~/common';
import { useLocalize } from '~/hooks';
import { ESide } from '~/common';
import { cn } from '~/utils/';
import { cn } from '~/utils';
export default function Retrieval({
version,

5
client/src/components/SidePanel/Files/PanelColumns.tsx
View file

@ -1,9 +1,10 @@
/* eslint-disable react-hooks/rules-of-hooks */
import { ArrowUpDown } from 'lucide-react';
import { Button } from '@librechat/client';
import type { ColumnDef } from '@tanstack/react-table';
import type { TFile } from 'librechat-data-provider';
import useLocalize from '~/hooks/useLocalize';
import PanelFileCell from './PanelFileCell';
import { Button } from '~/components/ui';
import { useLocalize } from '~/hooks';
import { formatDate } from '~/utils';
export const columns: ColumnDef<TFile | undefined>[] = [

24
client/src/components/SidePanel/Files/PanelTable.tsx
View file

@ -1,6 +1,17 @@
import { useState, useCallback, useMemo } from 'react';
import { ArrowUpLeft } from 'lucide-react';
import { useSetRecoilState } from 'recoil';
import {
Button,
Input,
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
useToastContext,
} from '@librechat/client';
import {
flexRender,
getCoreRowModel,
@ -21,18 +32,7 @@ import {
isAssistantsEndpoint,
type TFile,
} from 'librechat-data-provider';
import {
Button,
Input,
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from '~/components/ui';
import { useFileMapContext, useChatContext, useToastContext } from '~/Providers';
import { useFileMapContext, useChatContext } from '~/Providers';
import { useLocalize, useUpdateFiles } from '~/hooks';
import { useGetFileConfig } from '~/data-provider';
import store from '~/store';

11
client/src/components/SidePanel/MCP/MCPPanel.tsx
View file

@ -1,16 +1,15 @@
import React, { useState, useMemo, useCallback } from 'react';
import { ChevronLeft } from 'lucide-react';
import { useQueryClient } from '@tanstack/react-query';
import React, { useState, useMemo, useCallback } from 'react';
import { Button, useToastContext } from '@librechat/client';
import { Constants, QueryKeys } from 'librechat-data-provider';
import type { TUpdateUserPlugins } from 'librechat-data-provider';
import { useUpdateUserPluginsMutation } from 'librechat-data-provider/react-query';
import ServerInitializationSection from '~/components/ui/MCP/ServerInitializationSection';
import CustomUserVarsSection from '~/components/ui/MCP/CustomUserVarsSection';
import type { TUpdateUserPlugins } from 'librechat-data-provider';
import ServerInitializationSection from '~/components/MCP/ServerInitializationSection';
import CustomUserVarsSection from '~/components/MCP/CustomUserVarsSection';
import { useMCPConnectionStatusQuery } from '~/data-provider/Tools/queries';
import { useGetStartupConfig } from '~/data-provider';
import MCPPanelSkeleton from './MCPPanelSkeleton';
import { useToastContext } from '~/Providers';
import { Button } from '~/components/ui';
import { useLocalize } from '~/hooks';
export default function MCPPanel() {

2
client/src/components/SidePanel/MCP/MCPPanelSkeleton.tsx
View file

@ -1,5 +1,5 @@
import React from 'react';
import { Skeleton } from '~/components/ui';
import { Skeleton } from '@librechat/client';
export default function MCPPanelSkeleton() {
return (

13
client/src/components/SidePanel/Memories/AdminSettings.tsx
View file

@ -3,12 +3,19 @@ import { useMemo, useEffect, useState } from 'react';
import { ShieldEllipsis } from 'lucide-react';
import { useForm, Controller } from 'react-hook-form';
import { Permissions, SystemRoles, roleDefaults, PermissionTypes } from 'librechat-data-provider';
import {
OGDialog,
OGDialogTitle,
OGDialogContent,
OGDialogTrigger,
Button,
Switch,
DropdownPopup,
useToastContext,
} from '@librechat/client';
import type { Control, UseFormSetValue, UseFormGetValues } from 'react-hook-form';
import { OGDialog, OGDialogTitle, OGDialogContent, OGDialogTrigger } from '~/components/ui';
import { useUpdateMemoryPermissionsMutation } from '~/data-provider';
import { Button, Switch, DropdownPopup } from '~/components/ui';
import { useLocalize, useAuthContext } from '~/hooks';
import { useToastContext } from '~/Providers';
type FormValues = Record<Permissions, boolean>;

12
client/src/components/SidePanel/Memories/MemoryCreateDialog.tsx
View file

@ -1,10 +1,16 @@
import React, { useState } from 'react';
import { PermissionTypes, Permissions } from 'librechat-data-provider';
import { OGDialog, OGDialogTemplate, Button, Label, Input } from '~/components/ui';
import {
OGDialog,
OGDialogTemplate,
Button,
Label,
Input,
Spinner,
useToastContext,
} from '@librechat/client';
import { useCreateMemoryMutation } from '~/data-provider';
import { useLocalize, useHasAccess } from '~/hooks';
import { useToastContext } from '~/Providers';
import { Spinner } from '~/components/svg';
interface MemoryCreateDialogProps {
open: boolean;

12
client/src/components/SidePanel/Memories/MemoryEditDialog.tsx
View file

@ -1,11 +1,17 @@
import React, { useState, useEffect } from 'react';
import { PermissionTypes, Permissions } from 'librechat-data-provider';
import {
OGDialog,
OGDialogTemplate,
Button,
Label,
Input,
Spinner,
useToastContext,
} from '@librechat/client';
import type { TUserMemory } from 'librechat-data-provider';
import { OGDialog, OGDialogTemplate, Button, Label, Input } from '~/components/ui';
import { useUpdateMemoryMutation, useMemoriesQuery } from '~/data-provider';
import { useLocalize, useHasAccess } from '~/hooks';
import { useToastContext } from '~/Providers';
import { Spinner } from '~/components/svg';
interface MemoryEditDialogProps {
memory: TUserMemory | null;

8
client/src/components/SidePanel/Memories/MemoryViewer.tsx
View file

@ -3,7 +3,6 @@ import { useMemo, useState, useRef, useEffect } from 'react';
import { Plus } from 'lucide-react';
import { matchSorter } from 'match-sorter';
import { SystemRoles, PermissionTypes, Permissions } from 'librechat-data-provider';
import type { TUserMemory } from 'librechat-data-provider';
import {
Spinner,
EditIcon,
@ -20,8 +19,11 @@ import {
TableCell,
TableHeader,
TooltipAnchor,
useToastContext,
OGDialogTrigger,
} from '~/components';
OGDialogTemplate,
} from '@librechat/client';
import type { TUserMemory } from 'librechat-data-provider';
import {
useGetUserQuery,
useMemoriesQuery,
@ -29,10 +31,8 @@ import {
useUpdateMemoryPreferencesMutation,
} from '~/data-provider';
import { useLocalize, useAuthContext, useHasAccess } from '~/hooks';
import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
import MemoryCreateDialog from './MemoryCreateDialog';
import MemoryEditDialog from './MemoryEditDialog';
import { useToastContext } from '~/Providers';
import AdminSettings from './AdminSettings';
import { cn } from '~/utils';

8
client/src/components/SidePanel/Nav.tsx
View file

@ -1,6 +1,12 @@
import * as AccordionPrimitive from '@radix-ui/react-accordion';
import {
AccordionContent,
AccordionItem,
TooltipAnchor,
Accordion,
Button,
} from '@librechat/client';
import type { NavLink, NavProps } from '~/common';
import { AccordionContent, AccordionItem, TooltipAnchor, Accordion, Button } from '~/components/ui';
import { ActivePanelProvider, useActivePanel } from '~/Providers';
import { useLocalize } from '~/hooks';
import { cn } from '~/utils';

10
client/src/components/SidePanel/Parameters/DynamicCheckbox.tsx
View file

@ -1,7 +1,7 @@
import { useMemo } from 'react';
import { OptionTypes } from 'librechat-data-provider';
import type { DynamicSettingProps } from 'librechat-data-provider';
import { Label, Checkbox, HoverCard, HoverCardTrigger } from '~/components/ui';
import { Label, Checkbox, HoverCard, HoverCardTrigger } from '@librechat/client';
import { TranslationKeys, useLocalize, useDebouncedInput, useParameterEffects } from '~/hooks';
import { useChatContext } from '~/Providers';
import OptionHover from './OptionHover';
@ -62,7 +62,7 @@ function DynamicCheckbox({
htmlFor={`${settingKey}-dynamic-checkbox`}
className="text-left text-sm font-medium"
>
{labelCode ? localize(label as TranslationKeys) ?? label : label || settingKey}{' '}
{labelCode ? (localize(label as TranslationKeys) ?? label) : label || settingKey}{' '}
{showDefault && (
<small className="opacity-40">
({localize('com_endpoint_default')}:{' '}
@ -81,7 +81,11 @@ function DynamicCheckbox({
</HoverCardTrigger>
{description && (
<OptionHover
description={descriptionCode ? localize(description as TranslationKeys) ?? description : description}
description={
descriptionCode
? (localize(description as TranslationKeys) ?? description)
: description
}
side={ESide.Left}
/>
)}

19
client/src/components/SidePanel/Parameters/DynamicCombobox.tsx
View file

@ -1,7 +1,6 @@
import { useMemo, useState, useCallback } from 'react';
import type { DynamicSettingProps } from 'librechat-data-provider';
import { Label, HoverCard, HoverCardTrigger } from '~/components/ui';
import ControlCombobox from '~/components/ui/ControlCombobox';
import { Label, HoverCard, HoverCardTrigger, ControlCombobox } from '@librechat/client';
import { TranslationKeys, useLocalize, useParameterEffects } from '~/hooks';
import { useChatContext } from '~/Providers';
import OptionHover from './OptionHover';
@ -85,7 +84,7 @@ function DynamicCombobox({
htmlFor={`${settingKey}-dynamic-combobox`}
className="text-left text-sm font-medium"
>
{labelCode ? localize(label as TranslationKeys) ?? label : label || settingKey}
{labelCode ? (localize(label as TranslationKeys) ?? label) : label || settingKey}
{showDefault && (
<small className="opacity-40">
({localize('com_endpoint_default')}: {defaultValue})
@ -97,10 +96,14 @@ function DynamicCombobox({
<ControlCombobox
displayValue={selectedValue}
selectPlaceholder={
selectPlaceholderCode === true ? localize(selectPlaceholder as TranslationKeys) : selectPlaceholder
selectPlaceholderCode === true
? localize(selectPlaceholder as TranslationKeys)
: selectPlaceholder
}
searchPlaceholder={
searchPlaceholderCode === true ? localize(searchPlaceholder as TranslationKeys) : searchPlaceholder
searchPlaceholderCode === true
? localize(searchPlaceholder as TranslationKeys)
: searchPlaceholder
}
isCollapsed={isCollapsed}
ariaLabel={settingKey}
@ -112,7 +115,11 @@ function DynamicCombobox({
</HoverCardTrigger>
{description && (
<OptionHover
description={descriptionCode ? localize(description as TranslationKeys) ?? description : description}
description={
descriptionCode
? (localize(description as TranslationKeys) ?? description)
: description
}
side={ESide.Left}
/>
)}

16
client/src/components/SidePanel/Parameters/DynamicDropdown.tsx
View file

@ -1,7 +1,7 @@
import { useMemo, useState } from 'react';
import { OptionTypes } from 'librechat-data-provider';
import { Label, HoverCard, HoverCardTrigger, SelectDropDown } from '@librechat/client';
import type { DynamicSettingProps } from 'librechat-data-provider';
import { Label, HoverCard, HoverCardTrigger, SelectDropDown } from '~/components/ui';
import { TranslationKeys, useLocalize, useParameterEffects } from '~/hooks';
import { useChatContext } from '~/Providers';
import OptionHover from './OptionHover';
@ -78,7 +78,7 @@ function DynamicDropdown({
htmlFor={`${settingKey}-dynamic-dropdown`}
className="text-left text-sm font-medium"
>
{labelCode ? localize(label as TranslationKeys) ?? label : label || settingKey}
{labelCode ? (localize(label as TranslationKeys) ?? label) : label || settingKey}
{showDefault && (
<small className="opacity-40">
({localize('com_endpoint_default')}: {defaultValue})
@ -96,12 +96,20 @@ function DynamicDropdown({
availableValues={options}
containerClassName="w-full"
id={`${settingKey}-dynamic-dropdown`}
placeholder={placeholderCode ? localize(placeholder as TranslationKeys) ?? placeholder : placeholder}
placeholder={
placeholderCode
? (localize(placeholder as TranslationKeys) ?? placeholder)
: placeholder
}
/>
</HoverCardTrigger>
{description && (
<OptionHover
description={descriptionCode ? localize(description as TranslationKeys) ?? description : description}
description={
descriptionCode
? (localize(description as TranslationKeys) ?? description)
: description
}
side={ESide.Left}
/>
)}

2
client/src/components/SidePanel/Parameters/DynamicInput.tsx
View file

@ -1,7 +1,7 @@
import { OptionTypes } from 'librechat-data-provider';
import { Label, Input, HoverCard, HoverCardTrigger } from '@librechat/client';
import type { DynamicSettingProps } from 'librechat-data-provider';
import { useLocalize, useDebouncedInput, useParameterEffects, TranslationKeys } from '~/hooks';
import { Label, Input, HoverCard, HoverCardTrigger } from '~/components/ui';
import { useChatContext } from '~/Providers';
import OptionHover from './OptionHover';
import { ESide } from '~/common';

2
client/src/components/SidePanel/Parameters/DynamicSlider.tsx
View file

@ -1,7 +1,7 @@
import { useMemo, useCallback } from 'react';
import { OptionTypes } from 'librechat-data-provider';
import type { DynamicSettingProps } from 'librechat-data-provider';
import { Label, Slider, HoverCard, Input, InputNumber, HoverCardTrigger } from '~/components/ui';
import { Label, Slider, HoverCard, Input, InputNumber, HoverCardTrigger } from '@librechat/client';
import { useLocalize, useDebouncedInput, useParameterEffects, TranslationKeys } from '~/hooks';
import { cn, defaultTextProps, optionText } from '~/utils';
import { ESide, defaultDebouncedDelay } from '~/common';

2
client/src/components/SidePanel/Parameters/DynamicSwitch.tsx
View file

@ -1,6 +1,6 @@
import { useState } from 'react';
import type { DynamicSettingProps } from 'librechat-data-provider';
import { Label, Switch, HoverCard, HoverCardTrigger } from '~/components/ui';
import { Label, Switch, HoverCard, HoverCardTrigger } from '@librechat/client';
import { TranslationKeys, useLocalize, useParameterEffects } from '~/hooks';
import { useChatContext } from '~/Providers';
import OptionHover from './OptionHover';

6
client/src/components/SidePanel/Parameters/DynamicTags.tsx
View file

@ -1,11 +1,11 @@
import { useState, useMemo, useCallback, useRef } from 'react';
import type { DynamicSettingProps } from 'librechat-data-provider';
import { Label, Input, HoverCard, HoverCardTrigger, Tag } from '~/components/ui';
import { useChatContext, useToastContext } from '~/Providers';
import { Label, Input, HoverCard, HoverCardTrigger, Tag, useToastContext } from '@librechat/client';
import { TranslationKeys, useLocalize, useParameterEffects } from '~/hooks';
import { cn } from '~/utils';
import { useChatContext } from '~/Providers';
import OptionHover from './OptionHover';
import { ESide } from '~/common';
import { cn } from '~/utils';
function DynamicTags({
label = '',

18
client/src/components/SidePanel/Parameters/DynamicTextarea.tsx
View file

@ -1,11 +1,11 @@
import { OptionTypes } from 'librechat-data-provider';
import type { DynamicSettingProps } from 'librechat-data-provider';
import { Label, TextareaAutosize, HoverCard, HoverCardTrigger } from '~/components/ui';
import { useLocalize, useDebouncedInput, useParameterEffects, TranslationKeys } from '~/hooks';
import { cn } from '~/utils';
import { Label, TextareaAutosize, HoverCard, HoverCardTrigger } from '@librechat/client';
import { useChatContext } from '~/Providers';
import OptionHover from './OptionHover';
import { ESide } from '~/common';
import { cn } from '~/utils';
function DynamicTextarea({
label = '',
@ -58,7 +58,7 @@ function DynamicTextarea({
htmlFor={`${settingKey}-dynamic-textarea`}
className="text-left text-sm font-medium"
>
{labelCode ? localize(label as TranslationKeys) ?? label : label || settingKey}{' '}
{labelCode ? (localize(label as TranslationKeys) ?? label) : label || settingKey}{' '}
{showDefault && (
<small className="opacity-40">
(
@ -75,7 +75,11 @@ function DynamicTextarea({
disabled={readonly}
value={inputValue ?? ''}
onChange={setInputValue}
placeholder={placeholderCode ? localize(placeholder as TranslationKeys) ?? placeholder : placeholder}
placeholder={
placeholderCode
? (localize(placeholder as TranslationKeys) ?? placeholder)
: placeholder
}
className={cn(
// TODO: configurable max height
'flex max-h-[138px] min-h-[100px] w-full resize-none rounded-lg bg-surface-secondary px-3 py-2 focus:outline-none',
@ -84,7 +88,11 @@ function DynamicTextarea({
</HoverCardTrigger>
{description && (
<OptionHover
description={descriptionCode ? localize(description as TranslationKeys) ?? description : description}
description={
descriptionCode
? (localize(description as TranslationKeys) ?? description)
: description
}
side={ESide.Left}
/>
)}

2
client/src/components/SidePanel/Parameters/OptionHover.tsx
View file

@ -1,5 +1,5 @@
import React from 'react';
import { HoverCardPortal, HoverCardContent } from '~/components/ui';
import { HoverCardPortal, HoverCardContent } from '@librechat/client';
import { TranslationKeys, useLocalize } from '~/hooks';
import { ESide } from '~/common';

4
client/src/components/SidePanel/Parameters/Panel.tsx
View file

@ -1,5 +1,6 @@
import { RotateCcw } from 'lucide-react';
import React, { useMemo, useState, useEffect, useCallback } from 'react';
import keyBy from 'lodash/keyBy';
import { RotateCcw } from 'lucide-react';
import {
excludedKeys,
paramSettings,
@ -14,7 +15,6 @@ import { useGetEndpointsQuery } from '~/data-provider';
import { getEndpointField, logger } from '~/utils';
import { componentMapping } from './components';
import { useChatContext } from '~/Providers';
import keyBy from 'lodash/keyBy';
export default function Parameters() {
const localize = useLocalize();

4
client/src/components/SidePanel/SidePanel.tsx
View file

@ -1,10 +1,10 @@
import { useState, useCallback, useMemo, memo } from 'react';
import { useUserKeyQuery } from 'librechat-data-provider/react-query';
import { ResizableHandleAlt, ResizablePanel, useMediaQuery } from '@librechat/client';
import type { TEndpointsConfig, TInterfaceConfig } from 'librechat-data-provider';
import type { ImperativePanelHandle } from 'react-resizable-panels';
import { ResizableHandleAlt, ResizablePanel } from '~/components/ui/Resizable';
import { useMediaQuery, useLocalStorage, useLocalize } from '~/hooks';
import useSideNavLinks from '~/hooks/Nav/useSideNavLinks';
import { useLocalStorage, useLocalize } from '~/hooks';
import { useGetEndpointsQuery } from '~/data-provider';
import NavToggle from '~/components/Nav/NavToggle';
import { useSidePanelContext } from '~/Providers';

8
client/src/components/SidePanel/SidePanelGroup.tsx
View file

@ -2,11 +2,15 @@ import { useState, useRef, useCallback, useEffect, useMemo, memo } from 'react';
import throttle from 'lodash/throttle';
import { useRecoilValue } from 'recoil';
import { getConfigDefaults } from 'librechat-data-provider';
import {
ResizableHandleAlt,
ResizablePanel,
ResizablePanelGroup,
useMediaQuery,
} from '@librechat/client';
import type { ImperativePanelHandle } from 'react-resizable-panels';
import { ResizableHandleAlt, ResizablePanel, ResizablePanelGroup } from '~/components/ui/Resizable';
import { useGetStartupConfig } from '~/data-provider';
import { normalizeLayout } from '~/utils';
import { useMediaQuery } from '~/hooks';
import SidePanel from './SidePanel';
import store from '~/store';