@linktr.ee/messaging-react 3.3.6-rc-1781077089 → 3.3.6-rc-1781144689

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-CtuiVyk1.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-CV-61_np.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
 //# sourceMappingURL=index.cjs.map

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as e, b as t, C as i, c as n, d as o, e as m, F as g, f as l, L as r, h as M, M as u, i as L, j as c, k as h, l as d, m as p, n as v, o as A, p as C, q as F, s as k, t as b, u as f, v as x, w as y, x as P, y as S, z as q, B as z, D as B } from "./index-BpkIKkeQ.js";
+import { a as e, b as t, C as i, c as n, d as o, e as m, F as g, f as l, L as r, h as M, M as u, i as L, j as c, k as h, l as d, m as p, n as v, o as A, p as C, q as F, s as k, t as b, u as f, v as x, w as y, x as P, y as S, z as q, B as z, D as B } from "./index-DkqNYdg4.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.3.6-rc-1781077089",
+  "version": "3.3.6-rc-1781144689",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",

package/src/components/ChannelView.tsx

@@ -10,6 +10,7 @@ import {
   useChannelStateContext,
   WithComponents,
   MessageUIComponentProps,
+  defaultRenderMessages,
 } from 'stream-chat-react'
 
 import { useChannelStar } from '../hooks/useChannelStar'
@@ -405,15 +406,22 @@ const ChannelViewInner: React.FC<{
             <MessageList
               hideDeletedMessages
               hideNewMessageSeparator={false}
+              renderMessages={(options) => {
+                const elements = defaultRenderMessages(options)
+
+                if (renderConversationFooter) {
+                  elements.push(
+                    <li key="lt-channel-conversation-footer">
+                      {renderConversationFooter(channel)}
+                    </li>
+                  )
+                }
+
+                return elements
+              }}
             />
           </div>
 
-          {renderConversationFooter ? (
-            <React.Fragment key="lt-channel-conversation-footer">
-              {renderConversationFooter(channel)}
-            </React.Fragment>
-          ) : null}
-
           <div className="absolute bottom-0 inset-x-0 flex w-full">
             <div className="absolute bottom-0 inset-x-0 w-full h-4/5 backdrop-blur-[16px] [mask-image:linear-gradient(to_top,black_0%,transparent_100%)] [-webkit-mask-image:linear-gradient(to_top,black_0%,transparent_100%)]" />
             <CustomMessageInput

package/src/components/CustomTypingIndicator/index.tsx

@@ -17,7 +17,7 @@ interface CustomTypingIndicatorProps {
 }
 
 const Circle = ({ cx, index }: { cx: string; index: number }) => (
-  <circle cx={cx} cy="4" r="3.9" fill="#A0A0A0">
+  <circle cx={cx} cy="6.15" r="3.9" fill="#A0A0A0">
     <animateTransform
       attributeName="transform"
       type="translate"
@@ -115,33 +115,43 @@ const TypingBubble = ({
   testId: string
 }) => (
   <div
-    className="str-chat__typing-indicator !items-end !bg-transparent"
+    className="str-chat__li str-chat__li--single str-chat__typing-indicator !static"
     data-testid={testId}
-    style={{ insetInlineStart: 0, insetInlineEnd: 'auto' }}
+    style={{
+      marginBottom: 'var(--messaging-channel-input-spacer-height, 80px)',
+    }}
   >
-    <div className="shrink-0" aria-hidden="true">
+    <div className="str-chat__message str-chat__message-simple str-chat__message--regular str-chat__message--received str-chat__message--other str-chat__message--has-text">
       <Avatar
+        className="str-chat__avatar str-chat__message-sender-avatar"
         id={avatarId}
         name={avatarName}
         image={avatarImage ?? undefined}
         size={24}
         shape="circle"
       />
-    </div>
-
-    <div className="px-4 py-3 rounded-lg bg-[#E9EAED] h-12 flex flex-col justify-end">
-      <svg
-        aria-hidden="true"
-        className="block overflow-visible mb-[0.2rem]"
-        viewBox="0 0 32 8"
-        width="32"
-        height="8"
-        overflow="visible"
-      >
-        <Circle cx="4" index={0} />
-        <Circle cx="16" index={1} />
-        <Circle cx="28" index={2} />
-      </svg>
+      <div className="str-chat__message-inner mx-0">
+        <div className="str-chat__message-bubble-wrapper">
+          <div className="str-chat__message-bubble">
+            <div className="str-chat__message-text min-h-11 flex items-center">
+              <div className="str-chat__message-text-inner str-chat__message-simple-text-inner">
+                <svg
+                  aria-hidden="true"
+                  className="block overflow-visible"
+                  viewBox="0 0 32 12.3"
+                  width="32"
+                  height="13"
+                  overflow="visible"
+                >
+                  <Circle cx="4" index={0} />
+                  <Circle cx="16" index={1} />
+                  <Circle cx="28" index={2} />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 )

package/src/styles.css

@@ -306,6 +306,10 @@
   height: var(--messaging-channel-input-spacer-height, 80px);
 }
 
+.messaging-channel-view:has(.str-chat__typing-indicator) .str-chat__ul::after {
+  height: 0;
+}
+
 .str-chat__message.str-chat__message--me {
   .str-chat__attachment-list .str-chat__message-attachment--card {
     color: white;