@linktr.ee/messaging-react 1.9.2 → 1.9.3

package/package.json

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

package/src/components/CustomLinkPreviewList/index.tsx

@@ -0,0 +1,97 @@
+import { XIcon } from '@phosphor-icons/react'
+import React from 'react'
+import {
+  LinkPreview,
+  LinkPreviewsManager,
+  LinkPreviewsManagerState,
+} from 'stream-chat'
+import { useMessageComposer, useStateStore } from 'stream-chat-react'
+
+const linkPreviewsManagerStateSelector = (state: LinkPreviewsManagerState) => ({
+  linkPreviews: Array.from(state.previews.values()).filter(
+    (preview) =>
+      LinkPreviewsManager.previewIsLoaded(preview) ||
+      LinkPreviewsManager.previewIsLoading(preview)
+  ),
+})
+
+interface CustomLinkPreviewCardProps {
+  link: LinkPreview
+  onDismiss: (url: string) => void
+}
+
+const CustomLinkPreviewCard: React.FC<CustomLinkPreviewCardProps> = ({
+  link,
+  onDismiss,
+}) => {
+  const { og_scrape_url, title, image_url } = link
+
+  const handleDismissLink = (e: React.MouseEvent) => {
+    e.preventDefault()
+    onDismiss(og_scrape_url)
+  }
+
+  return (
+    <a
+      href={og_scrape_url}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="relative w-full block rounded-[24px] bg-[#121110] p-2 no-underline transition-opacity hover:opacity-90"
+    >
+      {image_url && (
+        <img
+          src={image_url}
+          alt={title || ''}
+          className="h-[148px] w-full rounded-[20px] object-cover"
+        />
+      )}
+      <button
+        type="button"
+        onClick={handleDismissLink}
+        className="absolute right-4 top-4 flex size-6 items-center justify-center rounded-full border border-white/40 bg-white/70 backdrop-blur-2xl"
+        aria-label="Close link preview"
+      >
+        <XIcon className="size-4 text-black/90" />
+      </button>
+      <div className="p-2">
+        {title && (
+          <div className="text-[14px] font-medium leading-5 text-white">
+            {title}
+          </div>
+        )}
+        <div className="text-[12px] leading-4 text-white/55">
+          {og_scrape_url}
+        </div>
+      </div>
+    </a>
+  )
+}
+
+export const CustomLinkPreviewList = () => {
+  const { linkPreviewsManager } = useMessageComposer()
+
+  const { linkPreviews: stateLinkPreviews } = useStateStore(
+    linkPreviewsManager.state,
+    linkPreviewsManagerStateSelector
+  )
+
+  const handleDismiss = (url: string) => {
+    linkPreviewsManager.dismissPreview(url)
+  }
+
+  const showLinkPreviews = stateLinkPreviews.length > 0
+
+  if (!showLinkPreviews) return null
+
+  return (
+    <div className="str-chat__link-preview-list p-0 gap-2 mb-4">
+      {stateLinkPreviews.map((linkPreview) => (
+        <CustomLinkPreviewCard
+          key={linkPreview.og_scrape_url}
+          link={linkPreview}
+          onDismiss={handleDismiss}
+        />
+      ))}
+    </div>
+  )
+}

package/src/components/CustomMessageInput/index.tsx

@@ -2,7 +2,6 @@ import { ArrowUpIcon } from '@phosphor-icons/react'
 import React from 'react'
 import {
   AttachmentPreviewList,
-  LinkPreviewList,
   MessageInput,
   QuotedMessagePreview,
   SimpleAttachmentSelector,
@@ -11,6 +10,8 @@ import {
   useMessageInputContext,
 } from 'stream-chat-react'
 
+import { CustomLinkPreviewList } from '../CustomLinkPreviewList'
+
 const CustomMessageInputInner: React.FC = () => {
   const { handleSubmit } = useMessageInputContext()
   const hasSendableData = useMessageComposerHasSendableData()
@@ -20,9 +21,9 @@ const CustomMessageInputInner: React.FC = () => {
       <div className="left-container">
         <SimpleAttachmentSelector />
       </div>
-      <div className="central-container w-full p-2 bg-white rounded-lg shadow-[0_4px_16px_0_rgba(0,0,0,0.08),0_1px_2px_0_rgba(0,0,0,0.04),0_0_0_1px_rgba(0,0,0,0.04)]">
+      <div className="central-container min-w-0 w-full p-2 bg-white rounded-lg shadow-[0_4px_16px_0_rgba(0,0,0,0.08),0_1px_2px_0_rgba(0,0,0,0.04),0_0_0_1px_rgba(0,0,0,0.04)]">
         <QuotedMessagePreview />
-        <LinkPreviewList />
+        <CustomLinkPreviewList />
         <AttachmentPreviewList />
         <div className="flex">
           <div className="w-full ml-2 mr-4">