feat: /client transition to @librechat/client

packages/client/src/Providers/ToastContext.tsx

@@ -0,0 +1,21 @@
+import { createContext, useContext, ReactNode } from 'react';
+import type { TShowToast } from '~/common';
+import useToast from '~/hooks/useToast';
+
+type ToastContextType = {
+  showToast: ({ message, severity, showIcon, duration }: TShowToast) => void;
+};
+
+export const ToastContext = createContext<ToastContextType>({
+  showToast: () => ({}),
+});
+
+export function useToastContext() {
+  return useContext(ToastContext);
+}
+
+export default function ToastProvider({ children }: { children: ReactNode }) {
+  const { showToast } = useToast();
+
+  return <ToastContext.Provider value={{ showToast }}>{children}</ToastContext.Provider>;
+}

packages/client/src/Providers/index.ts

@@ -0,0 +1,2 @@
+export { default as ToastProvider } from './ToastContext';
+export * from './ToastContext';

packages/client/src/components/DialogTemplate.tsx

@@ -6,7 +6,7 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from './';
+} from './Dialog';
 import { cn } from '~/utils/';
 
 type SelectionProps = {

packages/client/src/components/Resizable.tsx

@@ -24,13 +24,13 @@ const ResizableHandle = ({
 }) => (
   <ResizablePrimitive.PanelResizeHandle
     className={cn(
-      'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90',
+      'relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90',
       className,
     )}
     {...props}
   >
     {withHandle && (
-      <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-sm border">
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
         <GripVertical className="h-2.5 w-2.5" />
       </div>
     )}
@@ -46,13 +46,13 @@ const ResizableHandleAlt = ({
 }) => (
   <ResizablePrimitive.PanelResizeHandle
     className={cn(
-      'bg-border focus-visible:ring-ring group relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90',
+      'group relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90',
       className,
     )}
     {...props}
   >
     {withHandle && (
-      <div className="bg-border invisible z-10 flex h-4 w-3 items-center justify-center rounded-sm border group-hover:visible group-active:visible">
+      <div className="invisible z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border group-hover:visible group-active:visible">
         <GripVertical className="h-2.5 w-2.5" />
       </div>
     )}

packages/client/src/components/Toast.tsx

@@ -2,7 +2,7 @@ import * as RadixToast from '@radix-ui/react-toast';
 import { NotificationSeverity } from '~/common/types';
 import { useToast } from '~/hooks';
 
-export default function Toast() {
+export function Toast() {
   const { toast, onOpenChange } = useToast();
   const severityClassName = {
     [NotificationSeverity.INFO]: 'border-gray-500 bg-gray-500',

packages/client/src/components/index.ts

@@ -29,18 +29,25 @@ export * from './Tooltip';
 export * from './Pagination';
 export * from './Progress';
 export * from './InputOTP';
+export * from './MultiSearch';
+export * from './Resizable';
 export { default as Badge } from './Badge';
 export { default as Combobox } from './Combobox';
 export { default as Dropdown } from './Dropdown';
 export { default as SplitText } from './SplitText';
+export { default as DataTable } from './DataTable';
 export { default as FormInput } from './FormInput';
 export { default as PixelCard } from './PixelCard';
 export { default as FileUpload } from './FileUpload';
+export { default as MultiSelect } from './MultiSelect';
 export { default as DropdownPopup } from './DropdownPopup';
 export { default as DelayedRender } from './DelayedRender';
 export { default as ThemeSelector } from './ThemeSelector';
+export { default as CheckboxButton } from './CheckboxButton';
+export { default as DialogTemplate } from './DialogTemplate';
 export { default as SelectDropDown } from './SelectDropDown';
 export { default as ModelParameters } from './ModelParameters';
+export { default as ControlCombobox } from './ControlCombobox';
 export { default as OGDialogTemplate } from './OGDialogTemplate';
 export { default as InputWithDropdown } from './InputWithDropDown';
 export { default as AnimatedSearchInput } from './AnimatedSearchInput';

packages/client/src/index.ts

@@ -4,9 +4,18 @@ export * from './components';
 // Hooks
 export * from './hooks';
 
+// Common
 export * from './common';
-// Common types
 export * from './common/types';
 
 // Store
 export * from './store';
+
+// SVGs
+export * from './svgs';
+
+// Utils
+export * from './utils';
+
+// Providers
+export * from './Providers';

packages/client/src/svgs/index.ts

@@ -64,3 +64,4 @@ export { default as XAIcon } from './XAIcon';
 export { default as PersonalizationIcon } from './PersonalizationIcon';
 export { default as MCPIcon } from './MCPIcon';
 export { default as VectorIcon } from './VectorIcon';
+export { default as SquirclePlusIcon } from './SquirclePlusIcon';