🎨 style: Address Minor UI Refresh Issues (#6552)

* 🎨 style: Adjust isSelected svg layout of ModelSpecItem * style: fix modelSpec URL image beeing off-center; style: selected svg centered vertically * style: Update CustomMenu component to use rounded-lg and enhance focus styles * style: SidePanel top padding same as NewChat * fix: prevent unnecessary space rendering in SplitText component * style: Fix class names and enhance layout in Badge components * feat: disable temporary chat when in chat * style: handle > 1 lines in title Landing * feat: enhance dynamic margin calculation based on line count and content height in Landing component
2025-12-17 00:40:14 +01:00 · 2025-03-26 23:57:29 +01:00 · 2025-03-26 23:57:29 +01:00 · 3ba7c4eb19
commit 3ba7c4eb19
parent 6b58547c63
10 changed files with 147 additions and 40 deletions
--- a/client/src/components/Chat/Input/BadgeRow.tsx
+++ b/client/src/components/Chat/Input/BadgeRow.tsx
@ -17,11 +17,13 @@ import store from '~/store';
 interface BadgeRowProps {
  onChange: (badges: Pick<BadgeItem, 'id'>[]) => void;
  onToggle?: (badgeId: string, currentActive: boolean) => void;
+  isInChat: boolean;
 }

 interface BadgeWrapperProps {
  badge: BadgeItem;
  isEditing: boolean;
+  isInChat: boolean;
  onToggle: (badge: BadgeItem) => void;
  onDelete: (id: string) => void;
  onMouseDown: (e: React.MouseEvent, badge: BadgeItem, isActive: boolean) => void;
@ -30,7 +32,7 @@ interface BadgeWrapperProps {

 const BadgeWrapper = React.memo(
  forwardRef<HTMLDivElement, BadgeWrapperProps>(
-    ({ badge, isEditing, onToggle, onDelete, onMouseDown, badgeRefs }, ref) => {
+    ({ badge, isEditing, isInChat, onToggle, onDelete, onMouseDown, badgeRefs }, ref) => {
      const isActive = badge.atom ? useRecoilValue(badge.atom) : false;

      return (
@ -49,11 +51,13 @@ const BadgeWrapper = React.memo(
          className={isEditing ? 'ios-wiggle badge-icon h-full' : 'badge-icon h-full'}
        >
          <Badge
+            id={badge.id}
            icon={badge.icon as LucideIcon}
            label={badge.label}
            isActive={isActive}
            isEditing={isEditing}
            isAvailable={badge.isAvailable}
+            isInChat={isInChat}
            onToggle={() => onToggle(badge)}
            onBadgeAction={() => onDelete(badge.id)}
          />
@ -64,6 +68,7 @@ const BadgeWrapper = React.memo(
  (prevProps, nextProps) =>
    prevProps.badge.id === nextProps.badge.id &&
    prevProps.isEditing === nextProps.isEditing &&
+    prevProps.isInChat === nextProps.isInChat &&
    prevProps.onToggle === nextProps.onToggle &&
    prevProps.onDelete === nextProps.onDelete &&
    prevProps.onMouseDown === nextProps.onMouseDown &&
@ -121,7 +126,7 @@ const dragReducer = (state: DragState, action: DragAction): DragState => {
  }
 };

-export function BadgeRow({ onChange, onToggle }: BadgeRowProps) {
+export function BadgeRow({ onChange, onToggle, isInChat }: BadgeRowProps) {
  const [orderedBadges, setOrderedBadges] = useState<BadgeItem[]>([]);
  const [dragState, dispatch] = useReducer(dragReducer, {
    draggedBadge: null,
@ -301,17 +306,20 @@ export function BadgeRow({ onChange, onToggle }: BadgeRowProps) {
          {dragState.draggedBadge && dragState.insertIndex === index && ghostBadge && (
            <div className="badge-icon h-full">
              <Badge
+                id={ghostBadge.id}
                icon={ghostBadge.icon as LucideIcon}
                label={ghostBadge.label}
                isActive={dragState.draggedBadgeActive}
                isEditing={isEditing}
                isAvailable={ghostBadge.isAvailable}
+                isInChat={isInChat}
              />
            </div>
          )}
          <BadgeWrapper
            badge={badge}
            isEditing={isEditing}
+            isInChat={isInChat}
            onToggle={handleBadgeToggle}
            onDelete={handleDelete}
            onMouseDown={handleMouseDown}
@ -322,11 +330,13 @@ export function BadgeRow({ onChange, onToggle }: BadgeRowProps) {
      {dragState.draggedBadge && dragState.insertIndex === tempBadges.length && ghostBadge && (
        <div className="badge-icon h-full">
          <Badge
+            id={ghostBadge.id}
            icon={ghostBadge.icon as LucideIcon}
            label={ghostBadge.label}
            isActive={dragState.draggedBadgeActive}
            isEditing={isEditing}
            isAvailable={ghostBadge.isAvailable}
+            isInChat={isInChat}
          />
        </div>
      )}
@ -343,10 +353,12 @@ export function BadgeRow({ onChange, onToggle }: BadgeRowProps) {
          }}
        >
          <Badge
+            id={ghostBadge.id}
            icon={ghostBadge.icon as LucideIcon}
            label={ghostBadge.label}
            isActive={dragState.draggedBadgeActive}
            isAvailable={ghostBadge.isAvailable}
+            isInChat={isInChat}
            isEditing
            isDragging
          />
--- a/client/src/components/Chat/Input/ChatForm.tsx
+++ b/client/src/components/Chat/Input/ChatForm.tsx
@ -278,7 +278,12 @@ const ChatForm = memo(({ index = 0 }: { index?: number }) => {
              <div className={`${isRTL ? 'mr-2' : 'ml-2'}`}>
                <AttachFileChat disableInputs={disableInputs} />
              </div>
-              <BadgeRow onChange={(newBadges) => setBadges(newBadges)} />
+              <BadgeRow
+                onChange={(newBadges) => setBadges(newBadges)}
+                isInChat={
+                  Array.isArray(conversation?.messages) && conversation.messages.length >= 1
+                }
+              />
              <div className="mx-auto flex" />
              {SpeechToText && (
                <AudioRecorder
--- a/client/src/components/Chat/Landing.tsx
+++ b/client/src/components/Chat/Landing.tsx
@ -1,5 +1,5 @@
+import { useMemo, useCallback, useState, useEffect, useRef } from 'react';
 import { easings } from '@react-spring/web';
-import { useMemo, useCallback } from 'react';
 import { EModelEndpoint } from 'librechat-data-provider';
 import { useChatContext, useAgentsMapContext, useAssistantsMapContext } from '~/Providers';
 import { useGetEndpointsQuery, useGetStartupConfig } from '~/data-provider';
@ -20,6 +20,11 @@ export default function Landing({ centerFormOnLanding }: { centerFormOnLanding:
  const { user } = useAuthContext();
  const localize = useLocalize();

+  const [textHasMultipleLines, setTextHasMultipleLines] = useState(false);
+  const [lineCount, setLineCount] = useState(1);
+  const [contentHeight, setContentHeight] = useState(0);
+  const contentRef = useRef<HTMLDivElement>(null);
+
  const endpointType = useMemo(() => {
    let ep = conversation?.endpoint ?? '';
    if (
@ -81,13 +86,46 @@ export default function Landing({ centerFormOnLanding }: { centerFormOnLanding:
    }
  }, [localize, startupConfig?.interface?.customWelcome]);

+  const handleLineCountChange = useCallback((count: number) => {
+    setTextHasMultipleLines(count > 1);
+    setLineCount(count);
+  }, []);
+
+  useEffect(() => {
+    if (contentRef.current) {
+      setContentHeight(contentRef.current.offsetHeight);
+    }
+  }, [lineCount, description]);
+
+  const getDynamicMargin = useMemo(() => {
+    let margin = 'mb-0';
+
+    if (lineCount > 2 || (description && description.length > 100)) {
+      margin = 'mb-10';
+    } else if (lineCount > 1 || (description && description.length > 0)) {
+      margin = 'mb-6';
+    } else if (textHasMultipleLines) {
+      margin = 'mb-4';
+    }
+
+    if (contentHeight > 200) {
+      margin = 'mb-16';
+    } else if (contentHeight > 150) {
+      margin = 'mb-12';
+    }
+
+    return margin;
+  }, [lineCount, description, textHasMultipleLines, contentHeight]);
+
  return (
    <div
-      className={`flex h-full transform-gpu flex-col items-center justify-center pb-16 transition-all duration-200 ${centerFormOnLanding ? 'max-h-full sm:max-h-0' : 'max-h-full'}`}
+      className={`flex h-full transform-gpu flex-col items-center justify-center pb-16 transition-all duration-200 ${centerFormOnLanding ? 'max-h-full sm:max-h-0' : 'max-h-full'} ${getDynamicMargin}`}
    >
-      <div className="flex flex-col items-center gap-0 p-2">
-        <div className="flex flex-col items-center justify-center gap-4 md:flex-row">
-          <div className="relative size-10 justify-center">
+      <div ref={contentRef} className="flex flex-col items-center gap-0 p-2">
+        <div
+          className={`flex ${textHasMultipleLines ? 'flex-col' : 'flex-col md:flex-row'} items-center justify-center gap-4`}
+        >
+          <div className={`relative size-10 justify-center ${textHasMultipleLines ? 'mb-2' : ''}`}>
            <ConvoIcon
              agentsMap={agentsMap}
              assistantMap={assistantMap}
@ -120,6 +158,7 @@ export default function Landing({ centerFormOnLanding }: { centerFormOnLanding:
                easing={easings.easeOutCubic}
                threshold={0}
                rootMargin="0px"
+                onLineCountChange={handleLineCountChange}
              />
            </div>
          ) : (
@ -134,6 +173,7 @@ export default function Landing({ centerFormOnLanding }: { centerFormOnLanding:
              easing={easings.easeOutCubic}
              threshold={0}
              rootMargin="0px"
+              onLineCountChange={handleLineCountChange}
            />
          )}
        </div>
--- a/client/src/components/Chat/Menus/Endpoints/CustomMenu.tsx
+++ b/client/src/components/Chat/Menus/Endpoints/CustomMenu.tsx
@ -77,8 +77,9 @@ export const CustomMenu = React.forwardRef<HTMLDivElement, CustomMenuProps>(func
                  autoSelect
                  render={combobox}
                  className={cn(
-                    'h-10 w-full rounded border-none bg-transparent px-2 text-base',
+                    'h-10 w-full rounded-lg border-none bg-transparent px-2 text-base',
                    'sm:h-8 sm:text-sm',
+                    'focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-white',
                  )}
                />
              </div>
--- a/client/src/components/Chat/Menus/Endpoints/components/ModelSpecItem.tsx
+++ b/client/src/components/Chat/Menus/Endpoints/components/ModelSpecItem.tsx
@ -18,8 +18,7 @@ export function ModelSpecItem({ spec, isSelected }: ModelSpecItemProps) {
      key={spec.name}
      onClick={() => handleSelectSpec(spec)}
      className={cn(
-        'flex w-full cursor-pointer justify-between rounded-lg px-2 text-sm',
-        spec.description ? 'items-start' : 'items-center',
+        'flex w-full cursor-pointer items-center justify-between rounded-lg px-2 text-sm',
      )}
    >
      <div
@ -41,7 +40,7 @@ export function ModelSpecItem({ spec, isSelected }: ModelSpecItemProps) {
        </div>
      </div>
      {isSelected && (
-        <div className={cn('flex-shrink-0', spec.description ? 'pt-1' : '')}>
+        <div className="flex-shrink-0 self-center">
          <svg
            width="16"
            height="16"
--- a/client/src/components/Chat/Menus/Endpoints/components/SpecIcon.tsx
+++ b/client/src/components/Chat/Menus/Endpoints/components/SpecIcon.tsx
@ -22,7 +22,15 @@ const SpecIcon: React.FC<SpecIconProps> = ({ currentSpec, endpointsConfig }) =>
  if (!iconURL.includes('http')) {
    Icon = (icons[iconKey] ?? icons.unknown) as IconType;
  } else if (iconURL) {
-    return <URLIcon iconURL={iconURL} altName={currentSpec.name} />;
+    return (
+      <URLIcon
+        iconURL={iconURL}
+        altName={currentSpec.name}
+        containerStyle={{ width: 20, height: 20 }}
+        className="icon-md shrink-0 overflow-hidden rounded-full"
+        endpoint={endpoint || undefined}
+      />
+    );
  } else {
    Icon = (icons[endpoint ?? ''] ?? icons.unknown) as IconType;
  }
--- a/client/src/components/Endpoints/URLIcon.tsx
+++ b/client/src/components/Endpoints/URLIcon.tsx
@ -1,14 +1,14 @@
 import React, { memo, useState } from 'react';
+import { AlertCircle } from 'lucide-react';
 import { icons } from '~/hooks/Endpoint/Icons';
-import { AlertCircle } from 'lucide-react'; // Assuming you have lucide-react for icons

 export const URLIcon = memo(
  ({
    iconURL,
    altName,
-    containerStyle = { width: '20', height: '20' },
+    containerStyle = { width: 20, height: 20 },
    imageStyle = { width: '100%', height: '100%' },
-    className = 'icon-xl mr-1 shrink-0 overflow-hidden rounded-full',
+    className = 'icon-md mr-1 shrink-0 overflow-hidden rounded-full',
    endpoint,
  }: {
    iconURL: string;
@ -26,11 +26,12 @@ export const URLIcon = memo(

    const DefaultIcon: React.ElementType =
      endpoint && icons[endpoint] ? icons[endpoint]! : icons.unknown!;
+
    if (imageError || !iconURL) {
      return (
        <div className="relative" style={{ ...containerStyle, margin: '2px' }}>
          <div className={className}>
-            <DefaultIcon endpoint={endpoint} context="menu-item" />
+            <DefaultIcon endpoint={endpoint} context="menu-item" size={containerStyle.width} />
          </div>
          {imageError && iconURL && (
            <div
@ -48,10 +49,14 @@ export const URLIcon = memo(
      <div className={className} style={containerStyle}>
        <img
          src={iconURL}
-          alt={altName ?? ''}
+          alt={altName ?? 'Icon'}
          style={imageStyle}
          className="object-cover"
          onError={handleImageError}
+          loading="lazy"
+          decoding="async"
+          width={Number(containerStyle.width)}
+          height={Number(containerStyle.height)}
        />
      </div>
    );
--- a/client/src/components/SidePanel/Nav.tsx
+++ b/client/src/components/SidePanel/Nav.tsx
@ -25,7 +25,7 @@ export default function Nav({ links, isCollapsed, resize, defaultActive }: NavPr
        <div className="flex h-full min-h-0 flex-col">
          <div className="flex h-full min-h-0 flex-col opacity-100 transition-opacity">
            <div className="scrollbar-trigger relative h-full w-full flex-1 items-start border-white/20">
-              <div className="flex h-full w-full flex-col gap-1 px-3 pb-3.5 group-[[data-collapsed=true]]:items-center group-[[data-collapsed=true]]:justify-center group-[[data-collapsed=true]]:px-2">
+              <div className="flex h-full w-full flex-col gap-1 px-3 py-2.5 group-[[data-collapsed=true]]:items-center group-[[data-collapsed=true]]:justify-center group-[[data-collapsed=true]]:px-2">
                {links.map((link, index) => {
                  const variant = getVariant(link);
                  return isCollapsed ? (
--- a/client/src/components/ui/Badge.tsx
+++ b/client/src/components/ui/Badge.tsx
@ -1,3 +1,5 @@
+import type React from 'react';
+
 import { X, Plus } from 'lucide-react';
 import { motion } from 'framer-motion';
 import type { ButtonHTMLAttributes } from 'react';
@ -7,10 +9,12 @@ import { cn } from '~/utils';
 interface BadgeProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  icon?: LucideIcon;
  label: string;
+  id?: string;
  isActive?: boolean;
  isEditing?: boolean;
  isDragging?: boolean;
  isAvailable: boolean;
+  isInChat?: boolean;
  onBadgeAction?: () => void;
  onToggle?: () => void;
 }
@ -18,18 +22,27 @@ interface BadgeProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 export default function Badge({
  icon: Icon,
  label,
+  id,
  isActive = false,
  isEditing = false,
  isDragging = false,
  isAvailable = true,
+  isInChat = false,
  onBadgeAction,
  onToggle,
  className,
  ...props
 }: BadgeProps) {
  const isMoveable = isEditing && isAvailable;
+  const isDisabled = id === '1' && isInChat;

  const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
+    if (isDisabled) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+
    if (!isEditing && onToggle) {
      if (typeof window !== 'undefined' && window.innerWidth >= 768) {
        e.preventDefault();
@ -44,27 +57,30 @@ export default function Badge({
      onClick={handleClick}
      className={cn(
        'group relative inline-flex items-center gap-1.5 rounded-full px-4 py-1.5',
-        'border border-border-medium text-sm font-medium transition-shadow',
+        'border border-border-medium text-sm font-medium transition-shadow md:w-full',
+        'size-9 p-2 md:p-3',
        isActive
          ? 'bg-surface-active shadow-md'
          : 'bg-surface-chat shadow-sm hover:bg-surface-hover hover:shadow-md',
+        'active:scale-95 active:shadow-inner',
        isMoveable && 'cursor-move',
+        isDisabled && 'cursor-not-allowed opacity-50 hover:shadow-sm',
        className,
      )}
      animate={{
        scale: isDragging ? 1.1 : 1,
        boxShadow: isDragging ? '0 10px 25px rgba(0,0,0,0.1)' : undefined,
      }}
-      whileTap={{ scale: isDragging ? 1.1 : 0.97 }}
+      whileTap={{ scale: isDragging ? 1.1 : isDisabled ? 1 : 0.97 }}
      transition={{ type: 'tween', duration: 0.1, ease: 'easeOut' }}
      {...props}
    >
-      {Icon && <Icon className="relative h-4 w-4" />}
+      {Icon && <Icon className={cn('relative h-5 w-5 md:h-4 md:w-4', !label && 'mx-auto')} />}
      <span className="relative hidden md:inline">{label}</span>

      {isEditing && !isDragging && (
        <motion.button
-          className="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-surface-secondary-alt text-text-primary"
+          className="absolute -right-1 -top-1 flex h-6 w-6 items-center justify-center rounded-full bg-surface-secondary-alt text-text-primary shadow-sm md:h-5 md:w-5"
          initial={{ opacity: 0, scale: 0.8 }}
          animate={{ opacity: 1, scale: 1 }}
          exit={{ opacity: 0, scale: 0.8 }}
--- a/client/src/components/ui/SplitText.tsx
+++ b/client/src/components/ui/SplitText.tsx
@ -12,6 +12,7 @@ interface SplitTextProps {
  rootMargin?: string;
  textAlign?: 'left' | 'right' | 'center' | 'justify' | 'start' | 'end';
  onLetterAnimationComplete?: () => void;
+  onLineCountChange?: (lineCount: number) => void;
 }

 const SplitText: React.FC<SplitTextProps> = ({
@ -25,6 +26,7 @@ const SplitText: React.FC<SplitTextProps> = ({
  rootMargin = '-100px',
  textAlign = 'center',
  onLetterAnimationComplete,
+  onLineCountChange,
 }) => {
  const words = text.split(' ').map((word) => word.split(''));
  const letters = words.flat();
@ -32,6 +34,24 @@ const SplitText: React.FC<SplitTextProps> = ({
  const ref = useRef<HTMLParagraphElement>(null);
  const animatedCount = useRef(0);

+  const springs = useSprings(
+    letters.length,
+    letters.map((_, i) => ({
+      from: animationFrom,
+      to: inView
+        ? async (next: (props: any) => Promise<void>) => {
+          await next(animationTo);
+          animatedCount.current += 1;
+          if (animatedCount.current === letters.length && onLetterAnimationComplete) {
+            onLetterAnimationComplete();
+          }
+        }
+        : animationFrom,
+      delay: i * delay,
+      config: { easing },
+    })),
+  );
+
  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
@ -52,23 +72,22 @@ const SplitText: React.FC<SplitTextProps> = ({
    return () => observer.disconnect();
  }, [threshold, rootMargin]);

-  const springs = useSprings(
-    letters.length,
-    letters.map((_, i) => ({
-      from: animationFrom,
-      to: inView
-        ? async (next: (props: any) => Promise<void>) => {
-          await next(animationTo);
-          animatedCount.current += 1;
-          if (animatedCount.current === letters.length && onLetterAnimationComplete) {
-            onLetterAnimationComplete();
-          }
+  useEffect(() => {
+    if (ref.current && inView) {
+      const element = ref.current;
+      setTimeout(() => {
+        const lineHeight =
+          parseInt(getComputedStyle(element).lineHeight) ||
+          parseInt(getComputedStyle(element).fontSize) * 1.2;
+        const height = element.offsetHeight;
+        const lines = Math.round(height / lineHeight);
+
+        if (onLineCountChange) {
+          onLineCountChange(lines);
        }
-        : animationFrom,
-      delay: i * delay,
-      config: { easing },
-    })),
-  );
+      }, 100);
+    }
+  }, [inView, text, onLineCountChange]);

  return (
    <p
@ -92,7 +111,9 @@ const SplitText: React.FC<SplitTextProps> = ({
              </animated.span>
            );
          })}
-          <span style={{ display: 'inline-block', width: '0.3em' }}>&nbsp;</span>
+          {wordIndex < words.length - 1 && (
+            <span style={{ display: 'inline-block', width: '0.3em' }}>&nbsp;</span>
+          )}
        </span>
      ))}
    </p>