@linktr.ee/messaging-react 1.9.1 → 1.9.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "1.9.1",
+  "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">

package/src/components/MessagingShell/EmptyState.stories.tsx

@@ -27,13 +27,9 @@ const Template: StoryFn<ComponentProps> = (args) => {
 export const NoChannels: StoryFn<ComponentProps> = Template.bind({})
 NoChannels.args = {
   hasChannels: false,
-  participantLabel: 'followers',
-  onStartConversation: () => console.log('Start conversation clicked'),
 }
 
 export const WithChannels: StoryFn<ComponentProps> = Template.bind({})
 WithChannels.args = {
   hasChannels: true,
-  participantLabel: 'participants',
-  onStartConversation: () => console.log('Start conversation clicked'),
 }

package/src/components/MessagingShell/EmptyState.tsx

@@ -5,9 +5,7 @@ import React from 'react'
  */
 export const EmptyState: React.FC<{
   hasChannels: boolean
-  onStartConversation?: () => void
-  participantLabel: string
-}> = ({ hasChannels, onStartConversation, participantLabel }) => (
+}> = ({ 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">
@@ -17,42 +15,10 @@ export const EmptyState: React.FC<{
       <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 or{' '}
-            {onStartConversation && (
-              <TextButton onClick={onStartConversation}>
-                start a new conversation with a {participantLabel.slice(0, -1)}.
-              </TextButton>
-            )}
-          </>
-        ) : (
-          onStartConversation && (
-            <>
-              <TextButton onClick={onStartConversation}>
-                Start a new conversation with one of your {participantLabel}
-              </TextButton>{' '}
-              to begin messaging.
-            </>
-          )
-        )}
+        {hasChannels
+          ? 'Choose a conversation from the list.'
+          : 'No conversations yet.'}
       </p>
     </div>
   </div>
 )
-
-const TextButton = ({
-  onClick,
-  children,
-}: {
-  onClick: () => void
-  children: React.ReactNode
-}) => (
-  <button
-    type="button"
-    onClick={onClick}
-    className="inline-flex items-center gap-1 text-sm font-medium text-primary hover:text-primary-alt focus:outline-none focus:ring-2 focus:ring-primary"
-  >
-    {children}
-  </button>
-)

package/src/components/MessagingShell/index.tsx

@@ -44,7 +44,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
   const [existingParticipantIds, setExistingParticipantIds] = useState<
     Set<string>
   >(new Set())
-  const [pickerKey, setPickerKey] = useState(0) // Key to force remount of ParticipantPicker
+  const [pickerKey, _setPickerKey] = useState(0) // Key to force remount of ParticipantPicker
   const [directConversationMode, setDirectConversationMode] = useState(false)
   const [directConversationError, setDirectConversationError] = useState<
     string | null
@@ -52,11 +52,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
 
   const participantPickerRef = useRef<HTMLDialogElement>(null)
 
-  const {
-    showStartConversation = false,
-    participantSource,
-    participantLabel = 'participants',
-  } = capabilities
+  const { participantSource, participantLabel = 'participants' } = capabilities
 
   // Create default filters and merge with provided filters
   const channelFilters = React.useMemo(() => {
@@ -276,14 +272,6 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
     setSelectedChannel(null)
   }, [directConversationMode])
 
-  const handleStartConversation = useCallback(() => {
-    if (participantSource) {
-      setPickerKey((prev) => prev + 1) // Increment key to force remount
-      setShowParticipantPicker(true)
-      participantPickerRef.current?.showModal()
-    }
-  }, [participantSource])
-
   const handleSelectParticipant = useCallback(
     async (participant: Participant) => {
       if (!service) return
@@ -460,13 +448,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
               />
             </div>
           ) : (
-            <EmptyState
-              hasChannels={hasChannels}
-              onStartConversation={
-                showStartConversation ? handleStartConversation : undefined
-              }
-              participantLabel={participantLabel}
-            />
+            <EmptyState hasChannels={hasChannels} />
           )}
         </div>
       </div>

package/src/providers/MessagingProvider.tsx

@@ -10,11 +10,7 @@ import React, {
 import type { StreamChat } from 'stream-chat'
 import { Chat } from 'stream-chat-react'
 
-import type {
-  MessagingProviderProps,
-  MessagingCapabilities,
-  MessagingCustomization,
-} from '../types'
+import type { MessagingProviderProps, MessagingCapabilities } from '../types'
 
 /**
  * Context value for messaging state and service
@@ -26,7 +22,6 @@ export interface MessagingContextValue {
   isLoading: boolean
   error: string | null
   capabilities: MessagingCapabilities
-  customization: MessagingCustomization
   refreshConnection: () => Promise<void>
   debug: boolean
 }
@@ -38,7 +33,6 @@ const MessagingContext = createContext<MessagingContextValue>({
   isLoading: false,
   error: null,
   capabilities: {},
-  customization: {},
   refreshConnection: async () => {},
   debug: false,
 })
@@ -57,7 +51,6 @@ export const MessagingProvider: React.FC<MessagingProviderProps> = ({
   serviceConfig,
   apiKey,
   capabilities = {},
-  customization = {},
   debug = false,
 }) => {
   // Create debug logger that respects the debug prop
@@ -75,7 +68,6 @@ export const MessagingProvider: React.FC<MessagingProviderProps> = ({
     apiKey: apiKey?.substring(0, 8) + '...',
     serviceConfig: !!serviceConfig,
     capabilities: Object.keys(capabilities),
-    customization: Object.keys(customization),
   })
 
   const [service, setService] = useState<StreamChatService | null>(null)
@@ -93,7 +85,6 @@ export const MessagingProvider: React.FC<MessagingProviderProps> = ({
     apiKey,
     serviceConfig,
     capabilities,
-    customization,
   })
   const renderCountRef = useRef(0)
   renderCountRef.current++
@@ -107,8 +98,6 @@ export const MessagingProvider: React.FC<MessagingProviderProps> = ({
       serviceConfigChanged:
         prevPropsRef.current.serviceConfig !== serviceConfig,
       capabilitiesChanged: prevPropsRef.current.capabilities !== capabilities,
-      customizationChanged:
-        prevPropsRef.current.customization !== customization,
     },
   })
 
@@ -117,7 +106,6 @@ export const MessagingProvider: React.FC<MessagingProviderProps> = ({
     apiKey,
     serviceConfig,
     capabilities,
-    customization,
   }
 
   // Initialize service when config changes
@@ -315,7 +303,6 @@ export const MessagingProvider: React.FC<MessagingProviderProps> = ({
       isLoading,
       hasError: !!error,
       capabilitiesKeys: Object.keys(capabilities),
-      customizationKeys: Object.keys(customization),
     })
 
     return {
@@ -325,7 +312,6 @@ export const MessagingProvider: React.FC<MessagingProviderProps> = ({
       isLoading,
       error,
       capabilities,
-      customization,
       refreshConnection,
       debug,
     }
@@ -336,7 +322,6 @@ export const MessagingProvider: React.FC<MessagingProviderProps> = ({
     isLoading,
     error,
     capabilities,
-    customization,
     refreshConnection,
     debug,
     debugLog,

package/src/types.ts

@@ -44,20 +44,11 @@ export interface MessagingCapabilities {
   participantLabel?: string // e.g., "followers", "team members"
 }
 
-/**
- * Customization options
- */
-export interface MessagingCustomization {
-  theme?: 'light' | 'dark' | 'auto'
-  accentColor?: string
-}
-
 /**
  * Main MessagingShell component props
  */
 export interface MessagingShellProps {
   capabilities?: MessagingCapabilities
-  customization?: MessagingCustomization
   className?: string
   renderMessageInputActions?: (channel: Channel) => React.ReactNode
   onChannelSelect?: (channel: Channel) => void
@@ -157,6 +148,5 @@ export interface MessagingProviderProps {
   serviceConfig: Omit<StreamChatServiceConfig, 'apiKey'>
   apiKey: string
   capabilities?: MessagingCapabilities
-  customization?: MessagingCustomization
   debug?: boolean
 }