@linktr.ee/messaging-react 1.11.2 → 1.11.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "1.11.2",
+  "version": "1.11.3",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.js",

package/src/components/ChannelList/CustomChannelPreview.tsx

@@ -72,7 +72,7 @@ const CustomChannelPreview: React.FC<
       type="button"
       onClick={handleClick}
       className={classNames(
-        'group w-full px-4 py-3 transition-colors border-b border-sand text-left max-w-full overflow-hidden focus-ring',
+        'group w-full px-4 py-3 transition-colors text-left max-w-full overflow-hidden focus-ring',
         {
           'bg-primary-alt/10 border-l-4 border-l-primary': isSelected,
           'hover:bg-sand': !isSelected,

package/src/components/ChannelView.tsx

@@ -291,7 +291,7 @@ const ChannelInfoDialog: React.FC<{
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
     <dialog
       ref={dialogRef}
-      className="mes-dialog"
+      className="mes-dialog group"
       onClose={onClose}
       onClick={(e) => {
         if (e.target === dialogRef.current) {
@@ -299,7 +299,7 @@ const ChannelInfoDialog: React.FC<{
         }
       }}
     >
-      <div className="ml-auto flex h-full w-full flex-col bg-white shadow-max-elevation-light">
+      <div className="ml-auto flex h-full w-full flex-col bg-white shadow-none transition-shadow duration-200 group-open:shadow-max-elevation-light">
         <div className="flex items-center justify-between border-b border-sand px-4 py-3">
           <h2 className="text-base font-semibold text-charcoal">Chat info</h2>
           <CloseButton onClick={onClose} />
@@ -526,7 +526,7 @@ export const ChannelView: React.FC<ChannelViewProps> = ({
   return (
     <div
       className={classNames(
-        'messaging-channel-view h-full flex flex-col bg-[#FBFAF9]',
+        'messaging-channel-view h-full flex flex-col',
         className
       )}
     >

package/src/components/MessagingShell/EmptyState.tsx

@@ -1,5 +1,98 @@
 import React from 'react'
 
+const ChatBubblesIllustration = ({ className }: { className?: string }) => (
+  <svg
+    width="140"
+    height="120"
+    viewBox="44 -2 144 126"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <g clipPath="url(#clip0_empty_state)">
+      <path
+        d="M123.68 82.1932C123.383 103.675 105.839 121 84.2417 121C77.4724 121 71.0986 119.297 65.5327 116.299L52.5873 119.687L53.8036 106.673C48.1776 99.8701 44.7994 91.1453 44.7994 81.6356C44.7994 59.8965 62.4554 42.2754 84.2374 42.2754C89.1328 42.2754 93.8175 43.1633 98.1413 44.789"
+        fill="#D7D4CE"
+      />
+      <path
+        d="M84.2458 86.0364C82.2851 86.0364 80.6957 84.4501 80.6957 82.4933C80.6957 80.5365 82.2851 78.9502 84.2458 78.9502C86.2065 78.9502 87.7959 80.5365 87.7959 82.4933C87.7959 84.4501 86.2065 86.0364 84.2458 86.0364Z"
+        fill="white"
+      />
+      <path
+        d="M68.3044 86.0364C66.3437 86.0364 64.7543 84.4501 64.7543 82.4933C64.7543 80.5365 66.3437 78.9502 68.3044 78.9502C70.2651 78.9502 71.8545 80.5365 71.8545 82.4933C71.8545 84.4501 70.2651 86.0364 68.3044 86.0364Z"
+        fill="white"
+      />
+      <path
+        d="M100.183 86.0364C98.2226 86.0364 96.6332 84.4501 96.6332 82.4933C96.6332 80.5365 98.2226 78.9502 100.183 78.9502C102.144 78.9502 103.733 80.5365 103.733 82.4933C103.733 84.4501 102.144 86.0364 100.183 86.0364Z"
+        fill="white"
+      />
+      <g filter="url(#filter0_empty_state)">
+        <path
+          d="M171.522 68.7154C177.443 61.4539 181 52.1488 181 42C181 18.8027 162.421 0 139.5 0C116.579 0 98 18.8027 98 42C98 65.1973 116.579 84 139.5 84C146.622 84 153.328 82.1857 159.184 78.9829L172.801 82.5993L171.522 68.7154Z"
+          fill="white"
+        />
+        <path
+          d="M171.522 68.7154C177.443 61.4539 181 52.1488 181 42C181 18.8027 162.421 0 139.5 0C116.579 0 98 18.8027 98 42C98 65.1973 116.579 84 139.5 84C146.622 84 153.328 82.1857 159.184 78.9829L172.801 82.5993L171.522 68.7154Z"
+          stroke="#D7D4CE"
+          strokeWidth="2"
+          strokeMiterlimit="10"
+        />
+      </g>
+      <path
+        d="M139.502 45.5431C137.541 45.5431 135.952 43.9568 135.952 42C135.952 40.0432 137.541 38.4569 139.502 38.4569C141.462 38.4569 143.052 40.0432 143.052 42C143.052 43.9568 141.462 45.5431 139.502 45.5431Z"
+        fill="#D7D4CE"
+      />
+      <path
+        d="M123.561 45.5431C121.601 45.5431 120.011 43.9568 120.011 42C120.011 40.0432 121.601 38.4569 123.561 38.4569C125.522 38.4569 127.111 40.0432 127.111 42C127.111 43.9568 125.522 45.5431 123.561 45.5431Z"
+        fill="#D7D4CE"
+      />
+      <path
+        d="M155.439 45.5431C153.478 45.5431 151.889 43.9568 151.889 42C151.889 40.0432 153.478 38.4569 155.439 38.4569C157.4 38.4569 158.989 40.0432 158.989 42C158.989 43.9568 157.4 45.5431 155.439 45.5431Z"
+        fill="#D7D4CE"
+      />
+    </g>
+    <defs>
+      <filter
+        id="filter0_empty_state"
+        x="97"
+        y="-1"
+        width="89"
+        height="90"
+        filterUnits="userSpaceOnUse"
+        colorInterpolationFilters="sRGB"
+      >
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dx="4" dy="4" />
+        <feComposite in2="hardAlpha" operator="out" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0.8428 0 0 0 0 0.830064 0 0 0 0 0.8095 0 0 0 1 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="BackgroundImageFix"
+          result="effect1_dropShadow"
+        />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="effect1_dropShadow"
+          result="shape"
+        />
+      </filter>
+      <clipPath id="clip0_empty_state">
+        <rect width="233" height="233" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+
 /**
  * Empty state component shown when no channel is selected
  */
@@ -7,18 +100,18 @@ export const EmptyState: React.FC<{
   hasChannels: boolean
 }> = ({ hasChannels }) => (
   <div className="messaging-empty-state flex items-center justify-center h-full p-8 text-balance">
-    <div className="text-center max-w-sm">
-      <div className="w-24 h-24 bg-primary-alt/10 rounded-full flex items-center justify-center mx-auto mb-6">
-        <span className="text-4xl">💬</span>
-      </div>
-
-      <h2 className="font-semibold text-charcoal">Welcome to Messages</h2>
-
-      <p className="text-stone text-sm mb-6">
-        {hasChannels
-          ? 'Choose a conversation from the list.'
-          : 'No conversations yet.'}
-      </p>
+    <div className="flex flex-col items-center max-w-sm text-center">
+      <ChatBubblesIllustration />
+      {!hasChannels && (
+        <div className="mt-8">
+          <h2 className="font-medium text-black text-[18px] mb-2">
+            Your inbox is empty
+          </h2>
+          <p className="text-[#676B5F] text-sm mb-6">
+            Share with your followers to start receiving messages
+          </p>
+        </div>
+      )}
     </div>
   </div>
 )

package/src/components/MessagingShell/index.tsx

@@ -389,7 +389,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
   return (
     <div
       className={classNames(
-        'messaging-shell h-full bg-white overflow-hidden',
+        'messaging-shell h-full bg-background-secondary overflow-hidden',
         className
       )}
     >
@@ -397,7 +397,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
         {/* Channel List Sidebar */}
         <div
           className={classNames(
-            'messaging-channel-list-sidebar min-h-0 min-w-0 bg-white lg:bg-chalk lg:flex lg:flex-col lg:border-r lg:border-sand',
+            'messaging-channel-list-sidebar min-h-0 min-w-0 lg:flex lg:flex-col',
             {
               // Explicitly hidden via prop or in direct conversation mode
               '!hidden': showChannelList === false || directConversationMode,

package/src/providers/MessagingProvider.tsx

@@ -336,7 +336,15 @@ export const MessagingProvider: React.FC<MessagingProviderProps> = ({
   return (
     <MessagingContext.Provider value={contextValue}>
       {client && isConnected ? (
-        <Chat client={client}>{children}</Chat>
+        <Chat
+          client={client}
+          customClasses={{
+            channelList:
+              'str-chat__channel-list str-chat__channel-list-react bg-transparent lg:border-r-2 border-r-0 border-[#0000000A]',
+          }}
+        >
+          {children}
+        </Chat>
       ) : (
         children
       )}