@linktr.ee/messaging-react 1.40.0 → 1.40.2

package/dist/index.d.ts

@@ -283,6 +283,8 @@ export declare interface FaqListProps {
  */
 export declare const formatRelativeTime: (date: Date) => string;
 
+export declare function isLinkAttachment(a: Attachment): boolean;
+
 export declare const LockedAttachment: {
     Creator: (props: CreatorCardProps) => JSX_2.Element;
     Visitor: (props: VisitorCardProps) => JSX_2.Element;

package/dist/index.js

@@ -1,23 +1,24 @@
-import { b as a, c as t, C as i, d as n, e as o, f as g, F as r, g as M, L as m, M as l, h as u, i as h, j as d, k as v, r as C, l as L, u as c, m as A, n as F } from "./index-DY-3-rt4.js";
+import { b as e, c as t, C as i, d as n, e as o, f as g, F as m, g as r, L as M, M as l, h, i as u, j as L, k as c, l as d, r as v, m as C, u as A, n as k, o as F } from "./index-B_PLgcDi.js";
 export {
-  a as ActionButton,
+  e as ActionButton,
   t as Avatar,
   i as ChannelEmptyState,
   n as ChannelList,
   o as ChannelView,
   g as CustomMessageProvider,
-  r as FaqList,
-  M as FaqListItem,
-  m as LockedAttachment,
+  m as FaqList,
+  r as FaqListItem,
+  M as LockedAttachment,
   l as MediaMessage,
-  u as MessageVoteButtons,
-  h as MessagingProvider,
-  d as MessagingShell,
-  v as formatRelativeTime,
-  C as resolveLinkAttachment,
-  L as resolveMediaFromMessage,
-  c as useCustomMessage,
-  A as useMessageVote,
+  h as MessageVoteButtons,
+  u as MessagingProvider,
+  L as MessagingShell,
+  c as formatRelativeTime,
+  d as isLinkAttachment,
+  v as resolveLinkAttachment,
+  C as resolveMediaFromMessage,
+  A as useCustomMessage,
+  k as useMessageVote,
   F as useMessaging
 };
 //# sourceMappingURL=index.js.map

package/package.json

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

package/src/components/Avatar/index.tsx

@@ -54,7 +54,7 @@ export const Avatar = ({
         <img
           src={image}
           alt=""
-          className="aspect-square h-full w-full object-cover"
+          className="h-full w-full object-cover"
         />
       ) : (
         <div
@@ -77,9 +77,10 @@ export const Avatar = ({
         className
       )}
       style={{
+        '--str-chat__avatar-size': `${size}px`,
         width: `${size}px`,
         height: `${size}px`,
-      }}
+      } as React.CSSProperties}
     >
       {starred && (
         <div

package/src/components/CustomMessage/CustomMessage.stories.tsx

@@ -386,6 +386,34 @@ ChatbotVariants.args = {
   ],
 }
 
+export const ChatbotLinkPreviews: StoryFn<TemplateProps> = Template.bind({})
+ChatbotLinkPreviews.args = {
+  messages: [
+    {
+      id: 'msg-1',
+      text: 'Check the FAQ pages: pizzeriamozza.com/faq or osteriamozza.com/faq.',
+      user: storyUsers.creator,
+      metadata: { custom_type: 'MESSAGE_CHATBOT' },
+      attachments: [
+        {
+          type: 'link',
+          og_scrape_url: 'https://www.pizzeriamozza.com/faq',
+          title: 'Pizzeria Mozza | Pizza Restaurant in CA',
+          text: 'FAQ | Pizzeria Mozza',
+          image_url: 'https://picsum.photos/seed/mozza1/560/315',
+        },
+        {
+          type: 'link',
+          og_scrape_url: 'https://www.osteriamozza.com/faq',
+          title: 'Osteria Mozza | Italian Restaurant in LA',
+          text: 'FAQ | Osteria Mozza',
+          image_url: 'https://picsum.photos/seed/mozza2/560/315',
+        },
+      ],
+    },
+  ],
+}
+
 export const WithTypingIndicatorComparison: StoryFn<TemplateProps> =
   Template.bind({})
 WithTypingIndicatorComparison.args = {

package/src/components/CustomMessage/index.tsx

@@ -32,6 +32,7 @@ import {
 import { useMessageVote } from '../../hooks/useMessageVote'
 import { Avatar } from '../Avatar'
 import LockedAttachment from '../LockedAttachment'
+import { isLinkAttachment } from '../MediaMessage'
 
 import { useCustomMessage } from './context'
 import {
@@ -95,15 +96,17 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
     () => isMessageAIGenerated?.(message),
     [isMessageAIGenerated, message]
   )
-  const finalAttachments = useMemo(
-    () =>
-      !message.shared_location && !message.attachments
-        ? []
-        : !message.shared_location
-          ? message.attachments
-          : [message.shared_location, ...(message.attachments ?? [])],
-    [message]
-  )
+  const finalAttachments = useMemo(() => {
+    const attachments = message.attachments ?? []
+    const raw = message.shared_location
+      ? [message.shared_location, ...attachments]
+      : attachments
+
+    if (!isChatbotMessage(message)) return raw
+
+    const filtered = raw.filter((a) => !('type' in a) || !isLinkAttachment(a))
+    return filtered.length === raw.length ? raw : filtered
+  }, [message])
 
   if (isDateSeparatorMessage(message)) {
     return null
@@ -188,6 +191,9 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
             id={message.user.id}
             image={message.user.image}
             name={message.user.name || message.user.id}
+            size={isChatbot ? 24 : 28}
+            shape="circle"
+            dmAgentEnabled={isChatbot}
           />
         )}
         {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}

package/src/components/MediaMessage/index.tsx

@@ -95,12 +95,14 @@ const LinkCard: React.FC<{
   return <div className="block">{body}</div>
 }
 
+export function isLinkAttachment(a: Attachment): boolean {
+  return a.type === 'link' || (!!a.og_scrape_url && !a.asset_url)
+}
+
 export function resolveLinkAttachment(
   message: LocalMessage
 ): Attachment | undefined {
-  return message.attachments?.find(
-    (a) => a.type === 'link' || (!!a.og_scrape_url && !a.asset_url)
-  )
+  return message.attachments?.find(isLinkAttachment)
 }
 
 async function triggerDownload(url: string, filename?: string): Promise<void> {

package/src/index.ts

@@ -14,6 +14,7 @@ export { ChannelEmptyState } from './components/MessagingShell/ChannelEmptyState
 export { MessageVoteButtons } from './components/CustomMessage/MessageVoteButtons'
 export {
   MediaMessage,
+  isLinkAttachment,
   resolveLinkAttachment,
   resolveMediaFromMessage,
 } from './components/MediaMessage'

package/src/styles.css

@@ -137,10 +137,6 @@
   .str-chat__attachment-list .str-chat__message-attachment--card {
     color: white;
   }
-
-  a {
-    color: color-mix(in srgb, white 60%, #005fff);
-  }
 }
 
 .str-chat__unread-messages-separator,
@@ -169,7 +165,7 @@
 
 .str-chat__li .str-chat__message--other {
   position: relative;
-  grid-template-columns: 40px 1fr;
+  grid-template-columns: 28px 1fr;
 }
 
 .str-chat__li .str-chat__message--other .str-chat__message-bubble-wrapper {
@@ -369,6 +365,7 @@
 }
 
 .str-chat__message-text-inner a {
+  color: inherit;
   text-decoration: underline;
   text-underline-offset: 0.15em;
   word-break: break-word;