@linktr.ee/messaging-react 1.9.2 → 1.10.0-rc-1764218520

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "1.9.2",
+  "version": "1.10.0-rc-1764218520",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.js",
@@ -34,9 +34,9 @@
   },
   "dependencies": {
     "@linktr.ee/component-library": "*",
-    "@linktr.ee/messaging-core": "^1.2.0",
-    "@phosphor-icons/react": "^2.1.9",
-    "stream-chat-react": "^13.9.0"
+    "@linktr.ee/messaging-core": "^1.5.0",
+    "@phosphor-icons/react": "^2.1.10",
+    "stream-chat-react": "^13.12.0"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^8.5.0",
@@ -61,7 +61,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "storybook": "^8.5.0",
-    "stream-chat": "^9.22.1",
+    "stream-chat": "^9.26.0",
     "tailwindcss": "^3.4.17",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "5.9.2",
@@ -73,7 +73,7 @@
     "classnames": "^2.3.2",
     "react": "18.x",
     "react-dom": "18.x",
-    "stream-chat": "^9.22.1",
-    "stream-chat-react": "^13.9.0"
+    "stream-chat": "^9.26.0",
+    "stream-chat-react": "^13.12.0"
   }
 }

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

@@ -27,9 +27,13 @@ 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,7 +5,9 @@ import React from 'react'
  */
 export const EmptyState: React.FC<{
   hasChannels: boolean
-}> = ({ hasChannels }) => (
+  onStartConversation?: () => void
+  participantLabel: string
+}> = ({ hasChannels, onStartConversation, participantLabel }) => (
   <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">
@@ -15,10 +17,42 @@ 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.'
-          : 'No conversations yet.'}
+        {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.
+            </>
+          )
+        )}
       </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,7 +52,11 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
 
   const participantPickerRef = useRef<HTMLDialogElement>(null)
 
-  const { participantSource, participantLabel = 'participants' } = capabilities
+  const {
+    showStartConversation = false,
+    participantSource,
+    participantLabel = 'participants',
+  } = capabilities
 
   // Create default filters and merge with provided filters
   const channelFilters = React.useMemo(() => {
@@ -272,6 +276,14 @@ 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
@@ -448,7 +460,13 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
               />
             </div>
           ) : (
-            <EmptyState hasChannels={hasChannels} />
+            <EmptyState
+              hasChannels={hasChannels}
+              onStartConversation={
+                showStartConversation ? handleStartConversation : undefined
+              }
+              participantLabel={participantLabel}
+            />
           )}
         </div>
       </div>

package/src/providers/MessagingProvider.tsx

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

package/src/types.ts

@@ -44,11 +44,20 @@ 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
@@ -148,5 +157,6 @@ export interface MessagingProviderProps {
   serviceConfig: Omit<StreamChatServiceConfig, 'apiKey'>
   apiKey: string
   capabilities?: MessagingCapabilities
+  customization?: MessagingCustomization
   debug?: boolean
 }