@linktr.ee/messaging-react 1.38.0 → 1.40.0

package/dist/index.d.ts

@@ -58,9 +58,6 @@ export declare const ChannelList: default_2.NamedExoticComponent<ChannelListProp
 export declare interface ChannelListProps {
     onChannelSelect: (channel: Channel) => void;
     selectedChannel?: Channel;
-    showStartConversation?: boolean;
-    onStartConversation?: () => void;
-    participantLabel?: string;
     className?: string;
     filters: ChannelFilters;
     /**
@@ -363,9 +360,6 @@ declare interface MessageVoteButtonsProps {
  * Messaging capabilities configuration
  */
 export declare interface MessagingCapabilities {
-    showStartConversation?: boolean;
-    participantSource?: ParticipantSource;
-    participantLabel?: string;
     /**
      * Show the "Delete Conversation" button in channel info dialog.
      * Defaults to true for backward compatibility.
@@ -416,7 +410,6 @@ export declare interface MessagingShellProps extends ChannelViewPassthroughProps
     capabilities?: MessagingCapabilities;
     className?: string;
     onChannelSelect?: (channel: Channel) => void;
-    onParticipantSelect?: (participant: Participant) => void;
     /**
      * Auto-select a conversation with this participant on mount.
      * Useful for deep-linking to a specific conversation (e.g., /messages/[accountUuid])
@@ -480,41 +473,6 @@ export declare interface Participant {
     metadata?: Record<string, unknown>;
 }
 
-/**
- * Generic participant picker component for starting conversations
- */
-export declare const ParticipantPicker: default_2.FC<ParticipantPickerProps>;
-
-/**
- * ParticipantPicker component props
- */
-export declare interface ParticipantPickerProps {
-    participantSource: ParticipantSource;
-    onSelectParticipant: (participant: Participant) => void;
-    onClose: () => void;
-    existingParticipantIds?: Set<string>;
-    participantLabel?: string;
-    searchPlaceholder?: string;
-    className?: string;
-}
-
-/**
- * Source for loading participants (followers, team members, etc.)
- */
-export declare interface ParticipantSource {
-    loadParticipants: (options?: {
-        search?: string;
-        limit?: number;
-        cursor?: string;
-    }) => Promise<{
-        participants: Participant[];
-        hasMore: boolean;
-        nextCursor?: string;
-    }>;
-    totalCount?: number;
-    loading?: boolean;
-}
-
 /**
  * Message metadata for paid messaging and chatbot flows.
  * Used to identify message types and payment status.
@@ -548,24 +506,6 @@ declare interface UseMessageVoteResult {
  */
 export declare const useMessaging: () => MessagingContextValue;
 
-/**
- * Hook for managing participant loading with search and pagination
- */
-export declare const useParticipants: (participantSource: ParticipantSource, options?: {
-    initialSearch?: string;
-    pageSize?: number;
-}) => {
-    participants: Participant[];
-    loading: boolean;
-    error: string | null;
-    searchQuery: string;
-    hasMore: boolean;
-    totalCount: number | undefined;
-    loadMore: () => void;
-    search: (query: string) => void;
-    refresh: () => void;
-};
-
 export declare interface VisitorCardProps extends LockedAttachmentBaseProps {
     /**
      * Called when the visitor clicks Unlock on an unpaid attachment.

package/dist/index.js

@@ -1,25 +1,23 @@
-import { b as e, c as t, C as i, d as n, e as o, f as r, F as g, g as M, L as m, M as l, h as u, i as c, j as h, P as d, k as v, r as C, l as L, u as P, m as k, n as p, o as A } from "./index-B_4pciGp.js";
+import { b as a, c as t, C as i, d as n, e as o, f as g, F as r, g as M, L as m, M as l, h as u, i as h, j as d, k as v, r as C, l as L, u as c, m as A, n as F } from "./index-DY-3-rt4.js";
 export {
-  e as ActionButton,
+  a as ActionButton,
   t as Avatar,
   i as ChannelEmptyState,
   n as ChannelList,
   o as ChannelView,
-  r as CustomMessageProvider,
-  g as FaqList,
+  g as CustomMessageProvider,
+  r as FaqList,
   M as FaqListItem,
   m as LockedAttachment,
   l as MediaMessage,
   u as MessageVoteButtons,
-  c as MessagingProvider,
-  h as MessagingShell,
-  d as ParticipantPicker,
+  h as MessagingProvider,
+  d as MessagingShell,
   v as formatRelativeTime,
   C as resolveLinkAttachment,
   L as resolveMediaFromMessage,
-  P as useCustomMessage,
-  k as useMessageVote,
-  p as useMessaging,
-  A as useParticipants
+  c as useCustomMessage,
+  A as useMessageVote,
+  F as useMessaging
 };
 //# sourceMappingURL=index.js.map

package/package.json

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

package/src/components/ChannelList/ChannelList.stories.tsx

@@ -35,16 +35,11 @@ const Template: StoryFn<ComponentProps> = (args) => {
 export const Default: StoryFn<ComponentProps> = Template.bind({})
 Default.args = {
   onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
-  participantLabel: 'participants',
 }
 
-export const WithStartConversation: StoryFn<ComponentProps> = Template.bind({})
-WithStartConversation.args = {
+export const WithSelection: StoryFn<ComponentProps> = Template.bind({})
+WithSelection.args = {
   onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
-  showStartConversation: true,
-  onStartConversation: () => console.log('Start conversation clicked'),
-  participantLabel: 'followers',
 }
 
 
-

package/src/components/CustomMessage/MessageVoteButtons.stories.tsx

@@ -0,0 +1,86 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import React, { useState } from 'react'
+
+import type { VoteSelection } from '../../hooks/useMessageVote'
+
+import { MessageVoteButtons } from './MessageVoteButtons'
+
+type ComponentProps = React.ComponentProps<typeof MessageVoteButtons>
+
+const meta: Meta<ComponentProps> = {
+  title: 'MessageVoteButtons',
+  component: MessageVoteButtons,
+  parameters: {
+    layout: 'centered',
+  },
+}
+export default meta
+
+const Template: StoryFn<ComponentProps> = (args) => (
+  <div className="p-12">
+    <MessageVoteButtons {...args} />
+  </div>
+)
+
+export const Unselected: StoryFn<ComponentProps> = Template.bind({})
+Unselected.args = {
+  selected: null,
+  onVoteUp: () => {},
+  onVoteDown: () => {},
+}
+
+export const GoodResponse: StoryFn<ComponentProps> = Template.bind({})
+GoodResponse.args = {
+  selected: 'up',
+  onVoteUp: () => {},
+  onVoteDown: () => {},
+}
+
+export const BadResponse: StoryFn<ComponentProps> = Template.bind({})
+BadResponse.args = {
+  selected: 'down',
+  onVoteUp: () => {},
+  onVoteDown: () => {},
+}
+
+export const Interactive: StoryFn = () => {
+  const [selected, setSelected] = useState<VoteSelection>(null)
+  return (
+    <div className="p-12">
+      <MessageVoteButtons
+        selected={selected}
+        onVoteUp={() => setSelected(selected === 'up' ? null : 'up')}
+        onVoteDown={() => setSelected(selected === 'down' ? null : 'down')}
+      />
+    </div>
+  )
+}
+
+export const AllVariants: StoryFn = () => (
+  <div className="p-12 flex flex-col gap-6">
+    <div className="flex items-center gap-4">
+      <span className="text-sm w-32">Unselected:</span>
+      <MessageVoteButtons
+        selected={null}
+        onVoteUp={() => {}}
+        onVoteDown={() => {}}
+      />
+    </div>
+    <div className="flex items-center gap-4">
+      <span className="text-sm w-32">Good response:</span>
+      <MessageVoteButtons
+        selected="up"
+        onVoteUp={() => {}}
+        onVoteDown={() => {}}
+      />
+    </div>
+    <div className="flex items-center gap-4">
+      <span className="text-sm w-32">Bad response:</span>
+      <MessageVoteButtons
+        selected="down"
+        onVoteUp={() => {}}
+        onVoteDown={() => {}}
+      />
+    </div>
+  </div>
+)

package/src/components/CustomMessage/MessageVoteButtons.tsx

@@ -1,3 +1,5 @@
+import { ThumbsUpIcon, ThumbsDownIcon } from '@phosphor-icons/react'
+import classNames from 'classnames'
 import React from 'react'
 
 import type { VoteSelection } from '../../hooks/useMessageVote'
@@ -8,32 +10,6 @@ interface MessageVoteButtonsProps {
   onVoteDown: () => void
 }
 
-const ThumbUpIcon: React.FC<{ filled: boolean }> = ({ filled }) => (
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-    <path
-      d="M4.667 7.333l2.666-6A1.333 1.333 0 018.667 2v2.667a.667.667 0 00.666.666h3.764a1.334 1.334 0 011.192 1.93l-2.333 4.666a1.333 1.333 0 01-1.193.738H4.667m0-5.334v5.334m0-5.334H2.667a1.333 1.333 0 00-1.334 1.334v2.666a1.333 1.333 0 001.334 1.334h2"
-      stroke="currentColor"
-      strokeWidth="1.33"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      fill={filled ? 'currentColor' : 'none'}
-    />
-  </svg>
-)
-
-const ThumbDownIcon: React.FC<{ filled: boolean }> = ({ filled }) => (
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-    <path
-      d="M11.333 8.667l-2.666 6A1.333 1.333 0 017.333 14v-2.667a.667.667 0 00-.666-.666H2.903a1.334 1.334 0 01-1.192-1.93l2.333-4.666a1.333 1.333 0 011.193-.738h6.096m0 5.334V3.333m0 5.334h2a1.333 1.333 0 001.334-1.334V4.667a1.333 1.333 0 00-1.334-1.334h-2"
-      stroke="currentColor"
-      strokeWidth="1.33"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      fill={filled ? 'currentColor' : 'none'}
-    />
-  </svg>
-)
-
 export const MessageVoteButtons: React.FC<MessageVoteButtonsProps> = ({
   selected,
   onVoteUp,
@@ -42,21 +18,27 @@ export const MessageVoteButtons: React.FC<MessageVoteButtonsProps> = ({
   <div className="message-vote-buttons">
     <button
       type="button"
-      className={`message-vote-button${selected === 'up' ? ' message-vote-button--selected' : ''} focus-ring`}
+      className={classNames('message-vote-button focus-ring', {
+        'message-vote-button--selected': selected === 'up',
+      })}
       onClick={onVoteUp}
-      aria-label="Helpful"
+      aria-label="Good response"
       aria-pressed={selected === 'up'}
+      data-tooltip="Good response"
     >
-      <ThumbUpIcon filled={selected === 'up'} />
+      <ThumbsUpIcon size={16} weight={selected === 'up' ? 'fill' : 'regular'} />
     </button>
     <button
       type="button"
-      className={`message-vote-button${selected === 'down' ? ' message-vote-button--selected' : ''} focus-ring`}
+      className={classNames('message-vote-button focus-ring', {
+        'message-vote-button--selected': selected === 'down',
+      })}
       onClick={onVoteDown}
-      aria-label="Not helpful"
+      aria-label="Bad response"
       aria-pressed={selected === 'down'}
+      data-tooltip="Bad response"
     >
-      <ThumbDownIcon filled={selected === 'down'} />
+      <ThumbsDownIcon size={16} weight={selected === 'down' ? 'fill' : 'regular'} />
     </button>
   </div>
 )

package/src/components/MessagingShell/index.tsx

@@ -3,10 +3,9 @@ import React, { useState, useCallback, useRef, useEffect } from 'react'
 import type { Channel } from 'stream-chat'
 
 import { useMessaging } from '../../hooks/useMessaging'
-import type { MessagingShellProps, Participant } from '../../types'
+import type { MessagingShellProps } from '../../types'
 import { ChannelList } from '../ChannelList'
 import { ChannelView } from '../ChannelView'
-import { ParticipantPicker } from '../ParticipantPicker'
 
 import { EmptyState } from './EmptyState'
 import { ErrorState } from './ErrorState'
@@ -21,7 +20,6 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
   renderMessageInputActions,
   renderConversationFooter,
   onChannelSelect,
-  onParticipantSelect,
   initialParticipantFilter,
   initialParticipantData,
   CustomChannelEmptyState,
@@ -57,21 +55,12 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
   const [selectedChannel, setSelectedChannel] = useState<Channel | null>(null)
   const [hasChannels, setHasChannels] = useState(false)
   const [channelsLoaded, setChannelsLoaded] = useState(false)
-  const [_showParticipantPicker, setShowParticipantPicker] = useState(false)
-  const [existingParticipantIds, setExistingParticipantIds] = useState<
-    Set<string>
-  >(new Set())
-  const [pickerKey, _setPickerKey] = useState(0) // Key to force remount of ParticipantPicker
   const [directConversationMode, setDirectConversationMode] = useState(false)
   const [directConversationError, setDirectConversationError] = useState<
     string | null
   >(null)
 
-  const participantPickerRef = useRef<HTMLDialogElement>(null)
-
   const {
-    participantSource,
-    participantLabel = 'participants',
     showDeleteConversation = true,
   } = capabilities
 
@@ -121,27 +110,6 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
         { limit: 100 }
       )
 
-      const memberIds = new Set<string>()
-      channels.forEach((channel: Channel) => {
-        const members = channel.state.members
-        Object.values(members).forEach((member) => {
-          const memberId = member.user?.id
-          if (memberId && memberId !== userId) {
-            memberIds.add(memberId)
-          }
-        })
-      })
-
-      // Only update if the set contents have changed to prevent re-renders
-      setExistingParticipantIds((prev) => {
-        if (
-          prev.size === memberIds.size &&
-          [...prev].every((id) => memberIds.has(id))
-        ) {
-          return prev
-        }
-        return memberIds
-      })
       setHasChannels(channels.length > 0)
       setChannelsLoaded(true)
       syncedRef.current = userId // Mark as synced for this user
@@ -149,7 +117,6 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
       if (debug) {
         console.log('[MessagingShell] Channels synced successfully:', {
           channelCount: channels.length,
-          memberCount: memberIds.size,
         })
       }
     } catch (error) {
@@ -158,7 +125,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
     }
   }, [client, isConnected, debug])
 
-  // Sync existing channels to track which participants we can already message
+  // Sync existing channels to drive empty-state behavior.
   useEffect(() => {
     if (!client || !isConnected) return
 
@@ -303,58 +270,6 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
     setSelectedChannel(null)
   }, [directConversationMode])
 
-  const handleSelectParticipant = useCallback(
-    async (participant: Participant) => {
-      if (!service) return
-
-      try {
-        if (debug) {
-          console.log(
-            '[MessagingShell] Starting conversation with:',
-            participant.id
-          )
-        }
-
-        const channel = await service.startChannelWithParticipant({
-          id: participant.id,
-          name: participant.name,
-          email: participant.email,
-          phone: participant.phone,
-        })
-
-        // Show the channel
-        try {
-          await channel.show()
-        } catch (error) {
-          console.warn('[MessagingShell] Failed to unhide channel:', error)
-        }
-
-        setSelectedChannel(channel)
-        setShowParticipantPicker(false)
-        participantPickerRef.current?.close()
-
-        onParticipantSelect?.(participant)
-      } catch (error) {
-        console.error('[MessagingShell] Failed to start conversation:', error)
-      }
-    },
-    [service, onParticipantSelect, debug]
-  )
-
-  const handleCloseParticipantPicker = useCallback(() => {
-    setShowParticipantPicker(false)
-    participantPickerRef.current?.close()
-  }, [])
-
-  const handleDialogBackdropClick = useCallback(
-    (e: React.MouseEvent<HTMLDialogElement>) => {
-      if (e.target === participantPickerRef.current) {
-        handleCloseParticipantPicker()
-      }
-    },
-    [handleCloseParticipantPicker]
-  )
-
   const handleLeaveConversation = useCallback(
     async (channel: Channel) => {
       if (debug) {
@@ -520,29 +435,6 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
           )}
         </div>
       </div>
-
-      {/* Participant Picker Dialog */}
-      {participantSource && (
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
-        <dialog
-          ref={participantPickerRef}
-          className="mes-dialog"
-          onClick={handleDialogBackdropClick}
-          onClose={handleCloseParticipantPicker}
-        >
-          <div className="h-full w-full bg-white shadow-max-elevation-light">
-            <ParticipantPicker
-              key={pickerKey}
-              participantSource={participantSource}
-              onSelectParticipant={handleSelectParticipant}
-              onClose={handleCloseParticipantPicker}
-              existingParticipantIds={existingParticipantIds}
-              participantLabel={participantLabel}
-              searchPlaceholder={`Search ${participantLabel}...`}
-            />
-          </div>
-        </dialog>
-      )}
     </div>
   )
 }

package/src/index.ts

@@ -7,7 +7,6 @@ export { ChannelList } from './components/ChannelList'
 export { ChannelView } from './components/ChannelView'
 export { default as ActionButton } from './components/ActionButton'
 export { default as LockedAttachment } from './components/LockedAttachment'
-export { ParticipantPicker } from './components/ParticipantPicker'
 export { Avatar } from './components/Avatar'
 export { FaqList } from './components/FaqList'
 export { FaqListItem } from './components/FaqList/FaqListItem'
@@ -26,7 +25,6 @@ export { CustomMessageProvider } from './components/CustomMessage/context'
 
 // Hooks
 export { useMessaging } from './hooks/useMessaging'
-export { useParticipants } from './hooks/useParticipants'
 export { useMessageVote } from './hooks/useMessageVote'
 export { useCustomMessage } from './components/CustomMessage/context'
 
@@ -38,10 +36,8 @@ export type {
   MessagingShellProps,
   ChannelListProps,
   ChannelViewProps,
-  ParticipantPickerProps,
   MessagingProviderProps,
   MessagingCapabilities,
-  ParticipantSource,
   Participant,
   LockedAttachmentSource,
 } from './types'

package/src/styles.css

@@ -280,6 +280,7 @@
 }
 
 .message-vote-button {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -289,7 +290,7 @@
   border: none;
   border-radius: 50%;
   background-color: transparent;
-  color: rgba(0, 0, 0, 0.35);
+  color: #737373;
   cursor: pointer;
   transition:
     background-color 0.15s,
@@ -297,16 +298,91 @@
 }
 
 .message-vote-button:hover {
-  background-color: rgba(0, 0, 0, 0.06);
-  color: rgba(0, 0, 0, 0.55);
+  background-color: rgba(0, 0, 0, 0.05);
+  color: #737373;
 }
 
-.message-vote-button--selected {
-  color: rgba(0, 0, 0, 0.7);
+.message-vote-button[data-tooltip]::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: rgba(0, 0, 0, 0.85);
+  color: #fff;
+  font-size: 12px;
+  line-height: 1;
+  padding: 4px 8px;
+  border-radius: 4px;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.15s 0s;
 }
 
-.message-vote-button--selected:hover {
-  color: rgba(0, 0, 0, 0.7);
+.message-vote-button[data-tooltip]:hover::after,
+.message-vote-button[data-tooltip]:focus-visible::after {
+  opacity: 1;
+  transition-delay: 300ms;
+}
+
+/* Chatbot reply markdown — restore semantics that consumer Tailwind preflight
+   (or other resets) strip from the body of `.str-chat__message-text-inner`. */
+.str-chat__message-text-inner :where(h1, h2, h3, h4, h5, h6) {
+  font-weight: 600;
+  margin: 0.5rem 0 0.25rem;
+  line-height: 1.3;
+  text-wrap: balance;
+}
+.str-chat__message-text-inner h1 {
+  font-size: 1.5rem;
+}
+.str-chat__message-text-inner h2 {
+  font-size: 1.25rem;
+}
+.str-chat__message-text-inner h3 {
+  font-size: 1.0625rem;
+}
+.str-chat__message-text-inner :where(h1, h2, h3, h4, h5, h6):first-child {
+  margin-top: 0;
+}
+
+.str-chat__message-text-inner ul {
+  list-style-type: disc;
+  padding-inline-start: 1.25rem;
+  margin: 0.25rem 0;
+}
+.str-chat__message-text-inner ol {
+  list-style-type: decimal;
+  padding-inline-start: 1.25rem;
+  margin: 0.25rem 0;
+}
+.str-chat__message-text-inner li {
+  display: list-item;
+  margin: 0.125rem 0;
+}
+.str-chat__message-text-inner ul ul,
+.str-chat__message-text-inner ol ol,
+.str-chat__message-text-inner ul ol,
+.str-chat__message-text-inner ol ul {
+  margin: 0;
+}
+
+.str-chat__message-text-inner a {
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+  word-break: break-word;
+}
+
+.str-chat__message-text-inner p {
+  margin: 0.25rem 0;
+  text-wrap: pretty;
+}
+.str-chat__message-text-inner > :first-child {
+  margin-top: 0;
+}
+.str-chat__message-text-inner > :last-child {
+  margin-bottom: 0;
 }
 
 /* Standalone tip message (tip without text) */