refactor(ui): clean up component code and improve styling

- Refactored EmojiIcon, ExpandableText, and ProviderAvatar components for better readability and consistency.
- Simplified JSX structure and improved styling in ExpandableText and EmojiAvatar stories.
- Enhanced code formatting in various files for improved maintainability.

packages/ui/src/components/base/EmojiIcon/index.tsx

@@ -17,15 +17,13 @@ const EmojiIcon: FC<EmojiIconProps> = ({ emoji, className = '', size = 26, fontS
         height: `${size}px`,
         borderRadius: `${size / 2}px`,
         fontSize: `${fontSize}px`
-      }}
-    >
+      }}>
       <div
         className="absolute inset-0 flex items-center justify-center blur-sm opacity-40"
         style={{
           fontSize: '200%',
           transform: 'scale(1.5)'
-        }}
-      >
+        }}>
         {emoji || '⭐️'}
       </div>
       {emoji}

packages/ui/src/components/display/ExpandableText/index.tsx

@@ -21,38 +21,29 @@ const ExpandableText = ({
   lineClamp = 1,
   ref
 }: ExpandableTextProps) => {
-    const [isExpanded, setIsExpanded] = useState(false)
+  const [isExpanded, setIsExpanded] = useState(false)
 
-    const toggleExpand = useCallback(() => {
-      setIsExpanded((prev) => !prev)
-    }, [])
+  const toggleExpand = useCallback(() => {
+    setIsExpanded((prev) => !prev)
+  }, [])
 
-    return (
+  return (
+    <div
+      ref={ref}
+      className={`flex ${isExpanded ? 'flex-col' : 'flex-row items-center'} gap-2 ${className}`}
+      style={style}>
       <div
-        ref={ref}
-        className={`flex ${isExpanded ? 'flex-col' : 'flex-row items-center'} gap-2 ${className}`}
-        style={style}>
-        <div
-          className={`overflow-hidden ${
-            isExpanded
-              ? ''
-              : lineClamp === 1
-              ? 'text-ellipsis whitespace-nowrap'
-              : `line-clamp-${lineClamp}`
-          } ${isExpanded ? '' : 'flex-1'}`}>
-          {text}
-        </div>
-        <Button
-          size="sm"
-          variant="light"
-          color="primary"
-          onClick={toggleExpand}
-          className="min-w-fit px-2">
-          {isExpanded ? collapseText : expandText}
-        </Button>
+        className={`overflow-hidden ${
+          isExpanded ? '' : lineClamp === 1 ? 'text-ellipsis whitespace-nowrap' : `line-clamp-${lineClamp}`
+        } ${isExpanded ? '' : 'flex-1'}`}>
+        {text}
       </div>
-    )
-  }
+      <Button size="sm" variant="light" color="primary" onClick={toggleExpand} className="min-w-fit px-2">
+        {isExpanded ? collapseText : expandText}
+      </Button>
+    </div>
+  )
+}
 
 ExpandableText.displayName = 'ExpandableText'
 

packages/ui/src/components/display/ProviderAvatar/index.tsx

@@ -53,9 +53,7 @@ export const ProviderAvatar: React.FC<ProviderAvatarProps> = ({
         <div
           className={`flex items-center justify-center rounded-full border border-gray-200 dark:border-gray-700 ${className || ''}`}
           style={getCustomStyle()}>
-          <div className="w-4/5 h-4/5 flex items-center justify-center">
-            {customLogo}
-          </div>
+          <div className="w-4/5 h-4/5 flex items-center justify-center">{customLogo}</div>
         </div>
       )
     }