@linktr.ee/messaging-react 1.4.1 → 1.5.0-rc-1761632549

package/src/components/ChannelView.tsx

@@ -370,19 +370,29 @@ const ChannelInfoDialog: React.FC<{
 }
 
 /**
- * Channel view component with message list and input
+ * Inner component that has access to channel context
  */
-export const ChannelView: React.FC<ChannelViewProps> = ({
-  channel,
+const ChannelViewInner: React.FC<{
+  onBack?: () => void
+  showBackButton: boolean
+  renderMessageInputActions?: (channel: ChannelType) => React.ReactNode
+  onLeaveConversation?: (channel: ChannelType) => void
+  onBlockParticipant?: (participantId?: string) => void
+  CustomChannelEmptyState?: React.ComponentType
+}> = ({
   onBack,
-  showBackButton = false,
+  showBackButton,
   renderMessageInputActions,
   onLeaveConversation,
   onBlockParticipant,
-  className,
+  CustomChannelEmptyState,
 }) => {
+  const { channel } = useChannelStateContext()
   const [showInfo, setShowInfo] = useState(false)
 
+  // Check if channel has messages - using context to reactively subscribe to message updates
+  const hasMessages = (channel?.state?.messages?.length ?? 0) > 0
+
   // Get participant info for info dialog
   const participant = React.useMemo(() => {
     const members = Object.values(channel.state.members || {})
@@ -405,35 +415,35 @@ export const ChannelView: React.FC<ChannelViewProps> = ({
   }, [channel.data])
 
   return (
-    <div
-      className={classNames(
-        'messaging-channel-view h-full flex flex-col',
-        className
-      )}
-    >
-      <Channel channel={channel}>
-        <Window>
-          {/* Custom Channel Header */}
-          <div className="border-b border-sand bg-white px-4 py-3">
-            <CustomChannelHeader
-              onBack={onBack}
-              showBackButton={showBackButton}
-              onShowInfo={() => setShowInfo(true)}
-              canShowInfo={Boolean(participant)}
-            />
-          </div>
+    <>
+      <Window>
+        {/* Custom Channel Header */}
+        <div className="border-b border-sand bg-white px-4 py-3">
+          <CustomChannelHeader
+            onBack={onBack}
+            showBackButton={showBackButton}
+            onShowInfo={() => setShowInfo(true)}
+            canShowInfo={Boolean(participant)}
+          />
+        </div>
 
-          {/* Message List */}
-          <div className="flex-1 overflow-hidden">
-            <MessageList hideDeletedMessages hideNewMessageSeparator={false} />
-          </div>
+        {/* Message List */}
+        <div className="flex-1 overflow-hidden">
+          <MessageList hideDeletedMessages hideNewMessageSeparator={false} />
 
-          {/* Message Input */}
-          <CustomMessageInput
-            renderActions={() => renderMessageInputActions?.(channel)}
-          />
-        </Window>
-      </Channel>
+          {/* Show custom empty state when no messages */}
+          {hasMessages === false && CustomChannelEmptyState && (
+            <div className="p-4">
+              <CustomChannelEmptyState />
+            </div>
+          )}
+        </div>
+
+        {/* Message Input */}
+        <CustomMessageInput
+          renderActions={() => renderMessageInputActions?.(channel)}
+        />
+      </Window>
 
       {/* Channel Info Dialog */}
       <ChannelInfoDialog
@@ -445,6 +455,40 @@ export const ChannelView: React.FC<ChannelViewProps> = ({
         onLeaveConversation={onLeaveConversation}
         onBlockParticipant={onBlockParticipant}
       />
+    </>
+  )
+}
+
+/**
+ * Channel view component with message list and input
+ */
+export const ChannelView: React.FC<ChannelViewProps> = ({
+  channel,
+  onBack,
+  showBackButton = false,
+  renderMessageInputActions,
+  onLeaveConversation,
+  onBlockParticipant,
+  className,
+  CustomChannelEmptyState,
+}) => {
+  return (
+    <div
+      className={classNames(
+        'messaging-channel-view h-full flex flex-col',
+        className
+      )}
+    >
+      <Channel channel={channel}>
+        <ChannelViewInner
+          onBack={onBack}
+          showBackButton={showBackButton}
+          renderMessageInputActions={renderMessageInputActions}
+          onLeaveConversation={onLeaveConversation}
+          onBlockParticipant={onBlockParticipant}
+          CustomChannelEmptyState={CustomChannelEmptyState}
+        />
+      </Channel>
     </div>
   )
 }

package/src/components/FaqList/FaqList.stories.tsx

@@ -0,0 +1,137 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+
+import { FaqList } from './index'
+
+type ComponentProps = React.ComponentProps<typeof FaqList>
+
+const meta: Meta<ComponentProps> = {
+  title: 'FaqList',
+  component: FaqList,
+  parameters: {
+    layout: 'centered',
+  },
+}
+export default meta
+
+const Template: StoryFn<ComponentProps> = (args) => {
+  return (
+    <div className="w-96 bg-white">
+      <FaqList {...args} />
+    </div>
+  )
+}
+
+export const Default: StoryFn<ComponentProps> = Template.bind({})
+Default.args = {
+  faqs: [
+    {
+      id: '1',
+      question: 'Book club slots',
+      answer: 'We ship worldwide...',
+      enabled: true,
+      order: 1,
+    },
+    {
+      id: '2',
+      question: 'Refunds',
+      answer: 'You can track...',
+      enabled: true,
+      order: 2,
+    },
+    {
+      id: '3',
+      question: 'Brand collabs',
+      answer: 'Returns are accepted...',
+      enabled: true,
+      order: 3,
+    },
+  ],
+  onFaqClick: (id) => console.log('FAQ clicked:', id),
+  headerText: 'Tap to send a suggested question by Brie Parson:',
+}
+
+export const WithoutHeader: StoryFn<ComponentProps> = Template.bind({})
+WithoutHeader.args = {
+  faqs: [
+    {
+      id: '1',
+      question: 'Book club slots',
+      answer: 'We ship worldwide...',
+      enabled: true,
+      order: 1,
+    },
+    {
+      id: '2',
+      question: 'Refunds',
+      answer: 'You can track...',
+      enabled: true,
+      order: 2,
+    },
+  ],
+  onFaqClick: (id) => console.log('FAQ clicked:', id),
+}
+
+export const WithDisabledFaq: StoryFn<ComponentProps> = Template.bind({})
+WithDisabledFaq.args = {
+  faqs: [
+    {
+      id: '1',
+      question: 'Enabled question',
+      answer: 'Answer...',
+      enabled: true,
+      order: 1,
+    },
+    {
+      id: '2',
+      question: 'Disabled question',
+      answer: 'Answer...',
+      enabled: false,
+      order: 2,
+    },
+    {
+      id: '3',
+      question: 'Another enabled',
+      answer: 'Answer...',
+      enabled: true,
+      order: 3,
+    },
+  ],
+  onFaqClick: (id) => console.log('FAQ clicked:', id),
+}
+
+export const WithLoading: StoryFn<ComponentProps> = Template.bind({})
+WithLoading.args = {
+  faqs: [
+    {
+      id: '1',
+      question: 'Book club slots',
+      answer: 'We ship worldwide...',
+      enabled: true,
+      order: 1,
+    },
+    {
+      id: '2',
+      question: 'Refunds',
+      answer: 'You can track...',
+      enabled: true,
+      order: 2,
+    },
+    {
+      id: '3',
+      question: 'Brand collabs',
+      answer: 'Returns are accepted...',
+      enabled: true,
+      order: 3,
+    },
+  ],
+  onFaqClick: (id) => console.log('FAQ clicked:', id),
+  loadingFaqId: '2',
+  headerText: 'Tap to send a suggested question:',
+}
+
+export const Empty: StoryFn<ComponentProps> = Template.bind({})
+Empty.args = {
+  faqs: [],
+  onFaqClick: (id) => console.log('FAQ clicked:', id),
+}

package/src/components/FaqList/FaqListItem.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+
+import { FaqListItem } from './FaqListItem'
+type ComponentProps = React.ComponentProps<typeof FaqListItem>
+
+const meta: Meta<ComponentProps> = {
+  title: 'FaqList/FaqListItem',
+  component: FaqListItem,
+  parameters: {
+    layout: 'centered',
+  },
+}
+export default meta
+
+const Template: StoryFn<ComponentProps> = (args) => {
+  return (
+    <div className="w-96 bg-white p-4">
+      <FaqListItem {...args} />
+    </div>
+  )
+}
+
+export const Default: StoryFn<ComponentProps> = Template.bind({})
+Default.args = {
+  question: 'What are your shipping options?',
+  onClick: () => console.log('FAQ clicked'),
+}
+
+export const Loading: StoryFn<ComponentProps> = Template.bind({})
+Loading.args = {
+  question: 'What are your shipping options?',
+  onClick: () => console.log('FAQ clicked'),
+  loading: true,
+}

package/src/components/FaqList/FaqListItem.tsx

@@ -0,0 +1,34 @@
+import classNames from 'classnames'
+import React from 'react'
+
+export interface FaqListItemProps {
+  question: string
+  onClick: () => void
+  loading?: boolean
+  className?: string
+}
+
+export const FaqListItem: React.FC<FaqListItemProps> = ({
+  question,
+  onClick,
+  loading = false,
+  className,
+}) => {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={loading}
+      className={classNames(
+        'w-full text-center p-4 rounded-xl bg-chalk text-charcoal font-medium transition-colors',
+        {
+          'hover:bg-sand active:bg-sand': !loading,
+          'opacity-50 cursor-not-allowed': loading,
+        },
+        className
+      )}
+    >
+      {question}
+    </button>
+  )
+}

package/src/components/FaqList/index.tsx

@@ -0,0 +1,50 @@
+import classNames from 'classnames'
+import React from 'react'
+
+import { FaqListItem } from './FaqListItem'
+
+export interface Faq {
+  id: string
+  question: string
+  answer: string
+  enabled: boolean
+  order?: number | null
+}
+
+export interface FaqListProps {
+  faqs: Faq[]
+  onFaqClick: (faqId: string) => void
+  loadingFaqId?: string | null
+  headerText?: string
+  className?: string
+}
+
+export const FaqList: React.FC<FaqListProps> = ({
+  faqs,
+  onFaqClick,
+  loadingFaqId,
+  headerText,
+  className,
+}) => {
+  const enabledFaqs = faqs
+    .filter((faq) => faq.enabled)
+    .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
+
+  if (enabledFaqs.length === 0) {
+    return null
+  }
+
+  return (
+    <div className={classNames('px-4 py-6 space-y-3', className)}>
+      {headerText && <p className="text-md text-charcoal mb-4">{headerText}</p>}
+      {enabledFaqs.map((faq) => (
+        <FaqListItem
+          key={faq.id}
+          question={faq.question}
+          onClick={() => onFaqClick(faq.id)}
+          loading={loadingFaqId === faq.id}
+        />
+      ))}
+    </div>
+  )
+}

package/src/components/MessagingShell/index.tsx

@@ -23,6 +23,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
   onParticipantSelect,
   initialParticipantFilter,
   initialParticipantData,
+  CustomChannelEmptyState,
 }) => {
   const {
     service,
@@ -418,6 +419,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
                 renderMessageInputActions={renderMessageInputActions}
                 onLeaveConversation={handleLeaveConversation}
                 onBlockParticipant={handleBlockParticipant}
+                CustomChannelEmptyState={CustomChannelEmptyState}
               />
             </div>
           ) : (

package/src/index.ts

@@ -7,6 +7,8 @@ export { ChannelList } from './components/ChannelList'
 export { ChannelView } from './components/ChannelView'
 export { ParticipantPicker } from './components/ParticipantPicker'
 export { Avatar } from './components/Avatar'
+export { FaqList } from './components/FaqList'
+export { FaqListItem } from './components/FaqList/FaqListItem'
 
 // Providers
 export { MessagingProvider } from './providers/MessagingProvider'
@@ -27,3 +29,5 @@ export type {
   Participant,
 } from './types'
 export type { AvatarProps } from './components/Avatar'
+export type { Faq, FaqListProps } from './components/FaqList'
+export type { FaqListItemProps } from './components/FaqList/FaqListItem'

package/src/types.ts

@@ -14,7 +14,7 @@ export interface Participant {
   image?: string
   username?: string
   phone?: string
-  metadata?: Record<string, any>
+  metadata?: Record<string, unknown>
 }
 
 /**
@@ -81,6 +81,12 @@ export interface MessagingShellProps {
    * This reuses the existing ChannelCreator from StreamChatServiceConfig.
    */
   initialParticipantData?: Participant
+
+  /**
+   * Custom empty state component to render when a channel has no messages.
+   * Useful for showing FAQs or other contextual information in empty channels.
+   */
+  CustomChannelEmptyState?: React.ComponentType
 }
 
 /**
@@ -106,6 +112,7 @@ export interface ChannelViewProps {
   onLeaveConversation?: (channel: Channel) => void
   onBlockParticipant?: (participantId?: string) => void
   className?: string
+  CustomChannelEmptyState?: React.ComponentType
 }
 
 /**