@linktr.ee/messaging-react 1.5.3 → 1.6.0

package/package.json

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

package/src/components/ChannelView.tsx

@@ -433,7 +433,7 @@ const ChannelViewInner: React.FC<{
 
           {/* Show custom empty state when no messages */}
           {!hasMessages && CustomChannelEmptyState && (
-            <div className="absolute inset-0 flex items-start justify-center pt-8 bg-white">
+            <div className="absolute inset-0 flex bg-white">
               <CustomChannelEmptyState />
             </div>
           )}

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

@@ -49,6 +49,8 @@ Default.args = {
   ],
   onFaqClick: (id) => console.log('FAQ clicked:', id),
   headerText: 'Tap to send a suggested question by Brie Parson:',
+  avatarName: 'Brie Parson',
+  avatarImage: 'https://i.pravatar.cc/150?img=47',
 }
 
 export const WithoutHeader: StoryFn<ComponentProps> = Template.bind({})
@@ -135,3 +137,50 @@ Empty.args = {
   faqs: [],
   onFaqClick: (id) => console.log('FAQ clicked:', id),
 }
+
+export const WithAvatarOnly: StoryFn<ComponentProps> = Template.bind({})
+WithAvatarOnly.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),
+  headerText: 'Frequently Asked Questions',
+  avatarName: 'Account Owner',
+}
+
+export const WithAvatarAndImage: StoryFn<ComponentProps> = Template.bind({})
+WithAvatarAndImage.args = {
+  faqs: [
+    {
+      id: '1',
+      question: 'How do I contact support?',
+      answer: 'You can reach us...',
+      enabled: true,
+      order: 1,
+    },
+    {
+      id: '2',
+      question: 'What are your hours?',
+      answer: 'We are available...',
+      enabled: true,
+      order: 2,
+    },
+  ],
+  onFaqClick: (id) => console.log('FAQ clicked:', id),
+  headerText: 'Questions for Sarah',
+  avatarName: 'Sarah Johnson',
+  avatarImage: 'https://i.pravatar.cc/150?img=28',
+}

package/src/components/FaqList/FaqListItem.tsx

@@ -19,10 +19,11 @@ export const FaqListItem: React.FC<FaqListItemProps> = ({
       type="button"
       onClick={onClick}
       disabled={loading}
+      style={{ backgroundColor: '#E6E5E3' }}
       className={classNames(
-        'w-full text-center p-4 rounded-xl bg-chalk text-charcoal font-medium transition-colors',
+        'w-full text-center p-4 rounded-xl text-charcoal font-medium transition-colors',
         {
-          'hover:bg-sand active:bg-sand': !loading,
+          'hover:brightness-95 active:brightness-90': !loading,
           'opacity-50 cursor-not-allowed': loading,
         },
         className

package/src/components/FaqList/index.tsx

@@ -1,6 +1,8 @@
 import classNames from 'classnames'
 import React from 'react'
 
+import { Avatar } from '../Avatar'
+
 import { FaqListItem } from './FaqListItem'
 
 export interface Faq {
@@ -17,6 +19,8 @@ export interface FaqListProps {
   loadingFaqId?: string | null
   headerText?: string
   className?: string
+  avatarImage?: string
+  avatarName?: string
 }
 
 export const FaqList: React.FC<FaqListProps> = ({
@@ -25,6 +29,8 @@ export const FaqList: React.FC<FaqListProps> = ({
   loadingFaqId,
   headerText,
   className,
+  avatarImage,
+  avatarName,
 }) => {
   const enabledFaqs = faqs
     .filter((faq) => faq.enabled)
@@ -35,16 +41,38 @@ export const FaqList: React.FC<FaqListProps> = ({
   }
 
   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 className={classNames('px-4 py-6', className)}>
+      <div className="flex gap-3 items-end">
+        {/* Avatar at bottom-left, outside grey background */}
+        {(avatarImage || avatarName) && (
+          <div className="flex-none">
+            <Avatar
+              id={avatarName || 'account'}
+              name={avatarName || 'Account'}
+              image={avatarImage}
+              size={24}
+            />
+          </div>
+        )}
+
+        {/* FAQs with grey background */}
+        <div
+          className="flex-1 rounded-lg p-4 space-y-3"
+          style={{ backgroundColor: '#F1F0EE' }}
+        >
+          {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>
+      </div>
     </div>
   )
 }

package/src/components/MessagingShell/index.tsx

@@ -24,6 +24,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
   initialParticipantFilter,
   initialParticipantData,
   CustomChannelEmptyState,
+  showChannelList = true,
 }) => {
   const {
     service,
@@ -386,14 +387,18 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
           className={classNames(
             'messaging-channel-list-sidebar min-h-0 min-w-0 bg-white lg:bg-chalk lg:flex lg:flex-col lg:border-r lg:border-sand',
             {
-              // In direct conversation mode, always hide the channel list
-              '!hidden': directConversationMode,
+              // Explicitly hidden via prop or in direct conversation mode
+              '!hidden': showChannelList === false || directConversationMode,
               // Normal mode: hide on mobile when channel selected, show on desktop
               'hidden lg:flex lg:w-80 lg:min-w-[280px] lg:max-w-[360px]':
-                !directConversationMode && isChannelSelected,
+                showChannelList !== false &&
+                !directConversationMode &&
+                isChannelSelected,
               // Normal mode: show when no channel selected
               'flex flex-col w-full lg:flex-1 lg:max-w-2xl':
-                !directConversationMode && !isChannelSelected,
+                showChannelList !== false &&
+                !directConversationMode &&
+                !isChannelSelected,
             }
           )}
         >

package/src/types.ts

@@ -87,6 +87,13 @@ export interface MessagingShellProps {
    * Useful for showing FAQs or other contextual information in empty channels.
    */
   CustomChannelEmptyState?: React.ComponentType
+
+  /**
+   * Controls whether the channel list is shown. When false, the channel list
+   * is immediately hidden. Useful for direct conversation mode where you want
+   * to show only the channel view without the list.
+   */
+  showChannelList?: boolean
 }
 
 /**