🖌️ style: Minor UI Updates (#2011)

* UI Design update

* Add an error icon next to the avatar.

* fix

* Change the style of buttons

* fix: avatar

client/src/components/Endpoints/Icon.tsx

@@ -25,6 +25,7 @@ const Icon: React.FC<IconProps> = (props) => {
     button,
     model = '',
     endpoint,
+    error,
     jailbreak,
     assistantName,
   } = props;
@@ -45,13 +46,18 @@ const Icon: React.FC<IconProps> = (props) => {
       >
         {!user?.avatar && !user?.username ? (
           <div
-            style={{ backgroundColor: 'rgb(121, 137, 255)', width: '24px', height: '24px' }}
-            className="relative flex h-9 w-9 items-center justify-center rounded-sm p-1 text-white"
+            style={{ 
+              backgroundColor: 'rgb(121, 137, 255)', 
+              width: '20px', 
+              height: '20px', 
+              boxShadow: 'rgba(240, 246, 252, 0.1) 0px 0px 0px 1px', 
+            }}
+            className="relative flex h-9 w-9 items-center justify-center rounded-full p-1 text-white"
           >
             <UserIcon />
           </div>
         ) : (
-          <img className="rounded-sm" src={user?.avatar || avatarSrc} alt="avatar" />
+          <img className="rounded-full" src={user?.avatar || avatarSrc} alt="avatar" />
         )}
       </div>
     );
@@ -67,7 +73,7 @@ const Icon: React.FC<IconProps> = (props) => {
             }}
             className={cn('relative flex items-center justify-center', props.className ?? '')}
           >
-            <img className="rounded-sm" src={props.iconURL} alt={assistantName} />
+            <img className="rounded-full" src={props.iconURL} alt={assistantName} />
           </div>
         ) : (
           <div className="h-6 w-6">
@@ -156,21 +162,20 @@ const Icon: React.FC<IconProps> = (props) => {
       <div
         title={name}
         style={{
-          background: bg || 'transparent',
           width: size,
           height: size,
         }}
         className={cn(
-          'relative flex items-center justify-center rounded-sm text-white ',
+          'relative flex items-center justify-center rounded-full text-black dark:text-white',
           props.className || '',
         )}
       >
         {icon}
-        {/* {error && (
-          <span className="absolute right-0 top-[20px] -mr-2 flex h-4 w-4 items-center justify-center rounded-full border border-white bg-red-500 text-[10px] text-white">
+        {error && (
+          <span className="absolute right-0 top-[20px] -mr-2 flex h-3 w-3 items-center justify-center rounded-full border border-white bg-red-500 text-[10px] text-white">
             !
           </span>
-        )} */}
+        )}
       </div>
     );
   }

client/src/components/Endpoints/SaveAsPresetDialog.tsx

@@ -50,7 +50,7 @@ const SaveAsPresetDialog = ({ open, onOpenChange, preset }: TEditPresetProps) =>
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogTemplate
         title={localize('com_endpoint_save_as_preset')}
-        className="w-11/12 sm:w-1/4"
+        className="w-11/12 sm:w-2/4"
         showCloseButton={false}
         main={
           <div className="flex w-full flex-col items-center gap-2">

client/src/components/Endpoints/Settings/AgentSettings.tsx

@@ -88,7 +88,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
         </HoverCard>
         <div className="grid w-full grid-cols-2 items-center gap-10">
           <HoverCard openDelay={500}>
-            <HoverCardTrigger className="w-[100px]">
+            <HoverCardTrigger className="w-[100px] flex flex-col items-center text-center space-y-4">
               <label
                 htmlFor="functions-agent"
                 className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-gray-50"
@@ -106,7 +106,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
             <OptionHover endpoint={conversation.endpoint ?? ''} type="func" side={ESide.Bottom} />
           </HoverCard>
           <HoverCard openDelay={500}>
-            <HoverCardTrigger className="ml-[-60px] w-[100px]">
+            <HoverCardTrigger className="ml-[-60px] w-[100px] flex flex-col items-center text-center space-y-4">
               <label
                 htmlFor="skip-completion"
                 className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-gray-50"

client/src/components/Endpoints/Settings/OptionHover.tsx

@@ -50,7 +50,7 @@ function OptionHover({ endpoint, type, side }: TOptionHoverProps) {
   }
   return (
     <HoverCardPortal>
-      <HoverCardContent side={side} className="z-[80]  w-80">
+      <HoverCardContent side={side} className="z-[999] w-80">
         <div className="space-y-2">
           <p className="text-sm text-gray-600 dark:text-gray-300">{localize(text)}</p>
         </div>