🎨 feat: UI Refresh for Enhanced UX (#6346)

* ✨ feat: Add Expand Chat functionality and improve UI components * ✨ feat: Introduce Chat Badges feature with editing capabilities and UI enhancements * ✨ feat: re-implement file attachment functionality with new components and improved UI * ✨ feat: Enhance BadgeRow component with drag-and-drop functionality and add animations for better user experience * ✨ feat: Add useChatBadges hook and enhance Badge component with animations and toggle functionality * feat: Improve Add/Delete Badges + style and bug fixes * ✨ feat: Refactor EditBadges component and optimize useChatBadges hook for improved performance and readability * ✨ feat: Add type definition for LucideIcon in EditBadges component * refactor: Clean up BadgeRow component by removing outdated comment and improving code readability * refactor: Rename app-icon class to badge-icon for consistency and improve badge styling * feat: Add Center Chat Input toggle and update related components for improved UI/UX * refactor: Simplify ChatView and MessagesView components for improved readability and performance * refactor: Improve layout and positioning of scroll button in MessagesView component * refactor: Adjust scroll button position in MessagesView component for better visibility * refactor: Remove redundant background class from Badge component for cleaner styling * feat: disable chat badges * refactor: adjust positioning of scroll button and popover for improved layout * refactor: simplify class names in ChatForm and RemoveFile components for cleaner code * refactor: move Switcher to HeaderOptions from SidePanel * fix(Landing): duplicate description * feat: add SplitText component for animated text display and update Landing component to use it * feat(Chat): add ConversationStarters component and integrate it into ChatView; remove ConvoStarter component * feat(Chat): enhance Message component layout and styling for improved readability * feat(ControlCombobox, Select): enhance styling and add animation for improved UI experience * feat(Chat): update Header and HeaderNewChat components for improved layout and styling * feat(Chat): add ModelDropdown (now includes both endpoint and model) and refactor Menu components for improved UI * feat(ModelDropdown): add Agent Select; removed old AgentSwitcher components * feat(ModelDropdown): add settings button for user key configuration * fix(ModelDropdown): the model dropdown wasn't opening automatically when opening the endpoint one * refactor(Chat): remove unused EndpointsMenu and related components to streamline codebase * feat: enhance greeting message and improve accessibility fro ModelDropdown * refactor(Endpoints): add new hooks and components for endpoint management * feat(Endpoint): add support for modelSpecs * feat(Endpoints): add mobile support * fix: type issues * fix(modelSpec): type issue * fix(EndpointMenuDropdown): double overflow scroller in mobile model list * fix: search model on mobile * refactor: Endpoint/Model/modelSpec dropdown * refactor: reorganize imports in Endpoint components * refactor: remove unused translation keys from English locale * BREAKING: moving to ariakit with new CustomMenu * refactor: remove unnecessary comments * refactor: remove EndpointItem, ModelDropdownButton, SpecIcon, and SpecItem components * 🔧 fix: AI Icon bump when regenerating message * wip: chat UI refactoring, fix issues * chore: add recent update to useAutoSave * feat: add access control for agent permissions in useMentions hook * refactor: streamline ModelSelector by removing unused endpoints logic * refactor: enhance ModelSelector and context by integrating endpointsConfig and improving type usage * feat: update ModelSelectorContext to utilize conversation data for initial state * feat: add selector effects for synced endpoint handling * feat: add guard clause for conversation endpoint in useSelectorEffects hook * fix: safely call onSelectMention and add autofocus to mention input * chore: typing * refactor: ModelSelector to streamline key dialog handling and improve endpoint rendering * refactor: extract SettingsButton component for cleaner endpoint item rendering * wip: first pass, expand set api key * wip: first pass, expanding set key * refactor: update EndpointItem styles for improved layout and hover effects * refactor: adjust padding in EndpointItem for improved layout consistency * refactor: update preset structure in useSelectMention to include spec as null * refactor: rename setKeyDialogOpen to onOpenChange for clarity and consistency, bring focus back to button that opened dialog * feat: add SpecIcon component for dynamic model spec icons in menu, adjust icon styling * refactor: update getSelectedIcon to accept additional parameters and improve icon rendering logic * fix: adjust padding in MessageRender for improved layout * refactor: remove inline style for menu width in CustomMenu component * refactor: enhance layout and styling in ModelSpecItem component for better responsiveness * refactor: update getDefaultModelSpec to accept startupConfig and improve model spec retrieval logic * refactor: improve key management and default values in ModelSelector and related components * refactor: adjust menu width and improve responsiveness in CustomMenu and EndpointItem components * refactor: enhance focus styles and responsiveness in EndpointItem component * refactor: improve layout and spacing in Header and ModelSelector components for better responsiveness * refactor: adjust button styles for consistency and improved layout in AddMultiConvo and PresetsMenu components * fix: initial fix of assistant names * fix: assistants handling * chore: update version of librechat-data-provider to 0.7.75 and add 'spec' to excludedKeys * fix: improve endpoint filtering logic based on interface configuration and access rights * fix: remove unused HeaderOptions import and set spec to null in presets and mentions * fix: ensure currentExample is always an object when updating examples * fix: update interfaceConfig checks to ensure modelSelect is considered for rendering components * fix: update model selection logic to consider interface configuration when prioritizing model specs * fix: add missing localizations * fix: remove unused agent and assistant selection translations * fix: implement debounced state updates for selected values in useSelectorEffects * style: minor style changes related to the ModelSelector * fix: adjust maximum height for popover and set fixed height for model item * fix: update placeholders for model and endpoint search inputs * fix: refactor MessageRender and ContentRender components to better match each other * fix: remove convo fallback for iconURL in MessageRender and ContentRender components * fix: update handling of spec, iconURL, and modelLabel in conversation presets, to allow better interchangeability * fix: replace chatGptLabel with modelLabel in OpenAI settings configuration (fully deprecate chatGptLabel) * fix: remove console log for assistantNames in useEndpoints hook * refactor: add cleanInput and cleanOutput options to default conversation handling * chore: update bun.lockb * fix: set default value for showIconInHeader in getSelectedIcon function * refactor: enhance error handling in message processing when latest message has existing content blocks * chore: allow import/no-cycle for messages * fix: adjust flex properties in BookmarkMenu for better layout * feat: support both 'prompt' and 'q' as query parameters in useQueryParams hook * feat: re-enable Badges components * refactor: disable edit badge component * chore: rename assistantMap to assistantsMap for consistency * chore: rename assistantMap to assistantsMap for consistency in Mention component * feat: set staleTime for various queries to improve data freshness * feat: add spec field to tQueryParamsSchema for model specification * feat: enhance useQueryParams to handle model specs --------- Co-authored-by: Danny Avila <danny@librechat.ai>
2025-12-21 10:50:14 +01:00 · 2025-03-25 23:50:58 +01:00 · 2025-03-25 23:50:58 +01:00 · 7f29f2f676
commit 7f29f2f676
parent c4fea9cd79
127 changed files with 4507 additions and 2163 deletions
--- a/client/src/components/Chat/Input/BadgeRow.tsx
+++ b/client/src/components/Chat/Input/BadgeRow.tsx
@ -0,0 +1,357 @@
+import React, {
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+  useMemo,
+  forwardRef,
+  useReducer,
+} from 'react';
+import { useRecoilValue, useRecoilCallback } from 'recoil';
+import type { LucideIcon } from 'lucide-react';
+import { useChatBadges } from '~/hooks';
+import { Badge } from '~/components/ui';
+import { BadgeItem } from '~/common';
+import store from '~/store';
+
+interface BadgeRowProps {
+  onChange: (badges: Pick<BadgeItem, 'id'>[]) => void;
+  onToggle?: (badgeId: string, currentActive: boolean) => void;
+}
+
+interface BadgeWrapperProps {
+  badge: BadgeItem;
+  isEditing: boolean;
+  onToggle: (badge: BadgeItem) => void;
+  onDelete: (id: string) => void;
+  onMouseDown: (e: React.MouseEvent, badge: BadgeItem, isActive: boolean) => void;
+  badgeRefs: React.MutableRefObject<Record<string, HTMLDivElement>>;
+}
+
+const BadgeWrapper = React.memo(
+  forwardRef<HTMLDivElement, BadgeWrapperProps>(
+    ({ badge, isEditing, onToggle, onDelete, onMouseDown, badgeRefs }, ref) => {
+      const isActive = badge.atom ? useRecoilValue(badge.atom) : false;
+
+      return (
+        <div
+          ref={(el) => {
+            if (el) {
+              badgeRefs.current[badge.id] = el;
+            }
+            if (typeof ref === 'function') {
+              ref(el);
+            } else if (ref) {
+              ref.current = el;
+            }
+          }}
+          onMouseDown={(e) => onMouseDown(e, badge, isActive)}
+          className={isEditing ? 'ios-wiggle badge-icon h-full' : 'badge-icon h-full'}
+        >
+          <Badge
+            icon={badge.icon as LucideIcon}
+            label={badge.label}
+            isActive={isActive}
+            isEditing={isEditing}
+            isAvailable={badge.isAvailable}
+            onToggle={() => onToggle(badge)}
+            onBadgeAction={() => onDelete(badge.id)}
+          />
+        </div>
+      );
+    },
+  ),
+  (prevProps, nextProps) =>
+    prevProps.badge.id === nextProps.badge.id &&
+    prevProps.isEditing === nextProps.isEditing &&
+    prevProps.onToggle === nextProps.onToggle &&
+    prevProps.onDelete === nextProps.onDelete &&
+    prevProps.onMouseDown === nextProps.onMouseDown &&
+    prevProps.badgeRefs === nextProps.badgeRefs,
+);
+
+BadgeWrapper.displayName = 'BadgeWrapper';
+
+interface DragState {
+  draggedBadge: BadgeItem | null;
+  mouseX: number;
+  offsetX: number;
+  insertIndex: number | null;
+  draggedBadgeActive: boolean;
+}
+
+type DragAction =
+  | {
+      type: 'START_DRAG';
+      badge: BadgeItem;
+      mouseX: number;
+      offsetX: number;
+      insertIndex: number;
+      isActive: boolean;
+    }
+  | { type: 'UPDATE_POSITION'; mouseX: number; insertIndex: number }
+  | { type: 'END_DRAG' };
+
+const dragReducer = (state: DragState, action: DragAction): DragState => {
+  switch (action.type) {
+    case 'START_DRAG':
+      return {
+        draggedBadge: action.badge,
+        mouseX: action.mouseX,
+        offsetX: action.offsetX,
+        insertIndex: action.insertIndex,
+        draggedBadgeActive: action.isActive,
+      };
+    case 'UPDATE_POSITION':
+      return {
+        ...state,
+        mouseX: action.mouseX,
+        insertIndex: action.insertIndex,
+      };
+    case 'END_DRAG':
+      return {
+        draggedBadge: null,
+        mouseX: 0,
+        offsetX: 0,
+        insertIndex: null,
+        draggedBadgeActive: false,
+      };
+    default:
+      return state;
+  }
+};
+
+export function BadgeRow({ onChange, onToggle }: BadgeRowProps) {
+  const [orderedBadges, setOrderedBadges] = useState<BadgeItem[]>([]);
+  const [dragState, dispatch] = useReducer(dragReducer, {
+    draggedBadge: null,
+    mouseX: 0,
+    offsetX: 0,
+    insertIndex: null,
+    draggedBadgeActive: false,
+  });
+
+  const badgeRefs = useRef<Record<string, HTMLDivElement>>({});
+  const containerRef = useRef<HTMLDivElement>(null);
+  const animationFrame = useRef<number | null>(null);
+  const containerRectRef = useRef<DOMRect | null>(null);
+
+  const allBadges = useChatBadges() || [];
+  const isEditing = useRecoilValue(store.isEditingBadges);
+
+  const badges = useMemo(
+    () => allBadges.filter((badge) => badge.isAvailable !== false),
+    [allBadges],
+  );
+
+  const toggleBadge = useRecoilCallback(
+    ({ snapshot, set }) =>
+      async (badgeAtom: any) => {
+        const current = await snapshot.getPromise(badgeAtom);
+        set(badgeAtom, !current);
+      },
+    [],
+  );
+
+  useEffect(() => {
+    setOrderedBadges((prev) => {
+      const currentIds = new Set(prev.map((b) => b.id));
+      const newBadges = badges.filter((b) => !currentIds.has(b.id));
+      return newBadges.length > 0 ? [...prev, ...newBadges] : prev;
+    });
+  }, [badges]);
+
+  const tempBadges = dragState.draggedBadge
+    ? orderedBadges.filter((b) => b.id !== dragState.draggedBadge?.id)
+    : orderedBadges;
+  const ghostBadge = dragState.draggedBadge || null;
+
+  const calculateInsertIndex = useCallback(
+    (currentMouseX: number): number => {
+      if (!dragState.draggedBadge || !containerRef.current || !containerRectRef.current) {
+        return 0;
+      }
+      const relativeMouseX = currentMouseX - containerRectRef.current.left;
+      const refs = tempBadges.map((b) => badgeRefs.current[b.id]).filter(Boolean);
+      if (refs.length === 0) {
+        return 0;
+      }
+      let idx = 0;
+      for (let i = 0; i < refs.length; i++) {
+        const rect = refs[i].getBoundingClientRect();
+        const relativeLeft = rect.left - containerRectRef.current.left;
+        const relativeCenter = relativeLeft + rect.width / 2;
+        if (relativeMouseX < relativeCenter) {
+          break;
+        }
+        idx = i + 1;
+      }
+      return idx;
+    },
+    [dragState.draggedBadge, tempBadges],
+  );
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent, badge: BadgeItem, isActive: boolean) => {
+      if (!isEditing || !containerRef.current) {
+        return;
+      }
+      const el = badgeRefs.current[badge.id];
+      if (!el) {
+        return;
+      }
+      const rect = el.getBoundingClientRect();
+      const offsetX = e.clientX - rect.left;
+      const mouseX = e.clientX;
+      const initialIndex = orderedBadges.findIndex((b) => b.id === badge.id);
+      containerRectRef.current = containerRef.current.getBoundingClientRect();
+      dispatch({
+        type: 'START_DRAG',
+        badge,
+        mouseX,
+        offsetX,
+        insertIndex: initialIndex,
+        isActive,
+      });
+    },
+    [isEditing, orderedBadges],
+  );
+
+  const handleMouseMove = useCallback(
+    (e: MouseEvent) => {
+      if (!dragState.draggedBadge) {
+        return;
+      }
+      if (animationFrame.current) {
+        cancelAnimationFrame(animationFrame.current);
+      }
+      animationFrame.current = requestAnimationFrame(() => {
+        const newMouseX = e.clientX;
+        const newInsertIndex = calculateInsertIndex(newMouseX);
+        if (newInsertIndex !== dragState.insertIndex) {
+          dispatch({ type: 'UPDATE_POSITION', mouseX: newMouseX, insertIndex: newInsertIndex });
+        } else {
+          dispatch({
+            type: 'UPDATE_POSITION',
+            mouseX: newMouseX,
+            insertIndex: dragState.insertIndex,
+          });
+        }
+      });
+    },
+    [dragState.draggedBadge, dragState.insertIndex, calculateInsertIndex],
+  );
+
+  const handleMouseUp = useCallback(() => {
+    if (dragState.draggedBadge && dragState.insertIndex !== null) {
+      const otherBadges = orderedBadges.filter((b) => b.id !== dragState.draggedBadge?.id);
+      const newBadges = [
+        ...otherBadges.slice(0, dragState.insertIndex),
+        dragState.draggedBadge,
+        ...otherBadges.slice(dragState.insertIndex),
+      ];
+      setOrderedBadges(newBadges);
+      onChange(newBadges.map((badge) => ({ id: badge.id })));
+    }
+    dispatch({ type: 'END_DRAG' });
+    containerRectRef.current = null;
+  }, [dragState.draggedBadge, dragState.insertIndex, orderedBadges, onChange]);
+
+  const handleDelete = useCallback(
+    (badgeId: string) => {
+      const newBadges = orderedBadges.filter((b) => b.id !== badgeId);
+      setOrderedBadges(newBadges);
+      onChange(newBadges.map((badge) => ({ id: badge.id })));
+    },
+    [orderedBadges, onChange],
+  );
+
+  const handleBadgeToggle = useCallback(
+    (badge: BadgeItem) => {
+      if (badge.atom) {
+        toggleBadge(badge.atom);
+      }
+      if (onToggle) {
+        onToggle(badge.id, !!badge.atom);
+      }
+    },
+    [toggleBadge, onToggle],
+  );
+
+  useEffect(() => {
+    if (!dragState.draggedBadge) {
+      return;
+    }
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+      if (animationFrame.current) {
+        cancelAnimationFrame(animationFrame.current);
+        animationFrame.current = null;
+      }
+    };
+  }, [dragState.draggedBadge, handleMouseMove, handleMouseUp]);
+
+  return (
+    <div ref={containerRef} className="relative flex flex-wrap items-center gap-2">
+      {tempBadges.map((badge, index) => (
+        <React.Fragment key={badge.id}>
+          {dragState.draggedBadge && dragState.insertIndex === index && ghostBadge && (
+            <div className="badge-icon h-full">
+              <Badge
+                icon={ghostBadge.icon as LucideIcon}
+                label={ghostBadge.label}
+                isActive={dragState.draggedBadgeActive}
+                isEditing={isEditing}
+                isAvailable={ghostBadge.isAvailable}
+              />
+            </div>
+          )}
+          <BadgeWrapper
+            badge={badge}
+            isEditing={isEditing}
+            onToggle={handleBadgeToggle}
+            onDelete={handleDelete}
+            onMouseDown={handleMouseDown}
+            badgeRefs={badgeRefs}
+          />
+        </React.Fragment>
+      ))}
+      {dragState.draggedBadge && dragState.insertIndex === tempBadges.length && ghostBadge && (
+        <div className="badge-icon h-full">
+          <Badge
+            icon={ghostBadge.icon as LucideIcon}
+            label={ghostBadge.label}
+            isActive={dragState.draggedBadgeActive}
+            isEditing={isEditing}
+            isAvailable={ghostBadge.isAvailable}
+          />
+        </div>
+      )}
+      {ghostBadge && (
+        <div
+          className="ghost-badge h-full"
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            transform: `translateX(${dragState.mouseX - dragState.offsetX - (containerRectRef.current?.left || 0)}px)`,
+            zIndex: 10,
+            pointerEvents: 'none',
+          }}
+        >
+          <Badge
+            icon={ghostBadge.icon as LucideIcon}
+            label={ghostBadge.label}
+            isActive={dragState.draggedBadgeActive}
+            isAvailable={ghostBadge.isAvailable}
+            isEditing
+            isDragging
+          />
+        </div>
+      )}
+    </div>
+  );
+}