@linktr.ee/messaging-react 1.19.3 → 1.20.0

package/package.json

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

package/src/components/ChannelView.tsx

@@ -527,6 +527,7 @@ const ChannelViewInner: React.FC<{
   onBlockParticipantClick?: () => void
   onReportParticipantClick?: () => void
   showStarButton?: boolean
+  chatbotVotingEnabled?: boolean
 }> = ({
   onBack,
   showBackButton,
@@ -538,6 +539,7 @@ const ChannelViewInner: React.FC<{
   onBlockParticipantClick,
   onReportParticipantClick,
   showStarButton = false,
+  chatbotVotingEnabled = false,
 }) => {
   const { channel } = useChannelStateContext()
   const infoDialogRef = useRef<HTMLDialogElement>(null)
@@ -584,7 +586,7 @@ const ChannelViewInner: React.FC<{
       <WithComponents
         overrides={{
           Message: (props: MessageUIComponentProps) => (
-            <CustomMessage {...props} />
+            <CustomMessage {...props} chatbotVotingEnabled={chatbotVotingEnabled} />
           ),
         }}
       >
@@ -655,6 +657,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
     messageMetadata,
     onMessageSent,
     showStarButton = false,
+    chatbotVotingEnabled = false,
   }) => {
     // Custom send message handler that:
     // 1. Applies messageMetadata if provided
@@ -727,6 +730,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
             onBlockParticipantClick={onBlockParticipantClick}
             onReportParticipantClick={onReportParticipantClick}
             showStarButton={showStarButton}
+            chatbotVotingEnabled={chatbotVotingEnabled}
           />
         </Channel>
       </div>

package/src/components/CustomMessage/MessageVoteButtons.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+
+import type { VoteSelection } from '../../hooks/useMessageVote'
+
+interface MessageVoteButtonsProps {
+  selected: VoteSelection
+  onVoteUp: () => void
+  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,
+  onVoteDown,
+}) => (
+  <div className="message-vote-buttons">
+    <button
+      type="button"
+      className={`message-vote-button${selected === 'up' ? ' message-vote-button--selected' : ''}`}
+      onClick={onVoteUp}
+      aria-label="Helpful"
+      aria-pressed={selected === 'up'}
+    >
+      <ThumbUpIcon filled={selected === 'up'} />
+    </button>
+    <button
+      type="button"
+      className={`message-vote-button${selected === 'down' ? ' message-vote-button--selected' : ''}`}
+      onClick={onVoteDown}
+      aria-label="Not helpful"
+      aria-pressed={selected === 'down'}
+    >
+      <ThumbDownIcon filled={selected === 'down'} />
+    </button>
+  </div>
+)

package/src/components/CustomMessage/index.tsx

@@ -28,15 +28,20 @@ import {
   type MessageUIComponentProps,
 } from 'stream-chat-react'
 
+import { useMessageVote } from '../../hooks/useMessageVote'
 import { Avatar } from '../Avatar'
 
-import { MessageTag, isTipOnlyMessage } from './MessageTag'
+import { MessageTag, isChatbotMessage, isTipOnlyMessage } from './MessageTag'
+import { MessageVoteButtons } from './MessageVoteButtons'
 
-type CustomMessageWithContextProps = MessageContextValue
+type CustomMessageWithContextProps = MessageContextValue & {
+  chatbotVotingEnabled?: boolean
+}
 
 const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
   const {
     additionalMessageInputProps,
+    chatbotVotingEnabled,
     editing,
     endOfGroup,
     firstOfGroup,
@@ -55,6 +60,7 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
   const { client } = useChatContext('CustomMessage')
   const [isBounceDialogOpen, setIsBounceDialogOpen] = useState(false)
   const reminder = useMessageReminder(message.id)
+  const { selected: voteState, voteUp, voteDown } = useMessageVote(message)
 
   const {
     Attachment = DefaultAttachment,
@@ -204,6 +210,13 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
               </div>
               {/* Tag positioned outside and below the bubble */}
               <MessageTag message={message} />
+              {chatbotVotingEnabled && isChatbotMessage(message) && (
+                <MessageVoteButtons
+                  selected={voteState}
+                  onVoteUp={voteUp}
+                  onVoteDown={voteDown}
+                />
+              )}
             </div>
           )}
         </div>
@@ -226,7 +239,9 @@ const MemoizedCustomMessage = React.memo(
   areMessageUIPropsEqual
 ) as typeof CustomMessageWithContext
 
-export const CustomMessage = (props: MessageUIComponentProps) => {
+export const CustomMessage = (
+  props: MessageUIComponentProps & { chatbotVotingEnabled?: boolean }
+) => {
   const messageContext = useMessageContext('CustomMessage')
   return <MemoizedCustomMessage {...messageContext} {...props} />
 }

package/src/components/MessagingShell/index.tsx

@@ -34,6 +34,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
   messageMetadata,
   onMessageSent,
   showStarButton = false,
+  chatbotVotingEnabled = false,
   renderMessagePreview,
 }) => {
   const {
@@ -491,6 +492,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
                 messageMetadata={messageMetadata}
                 onMessageSent={onMessageSent}
                 showStarButton={showStarButton}
+                chatbotVotingEnabled={chatbotVotingEnabled}
               />
             </div>
           ) : initialParticipantFilter ? (

package/src/hooks/useMessageVote.ts

@@ -0,0 +1,77 @@
+import { useCallback, useMemo } from 'react'
+import type { LocalMessage } from 'stream-chat'
+import { useChannelStateContext, useChatContext } from 'stream-chat-react'
+
+export type VoteSelection = 'up' | 'down' | null
+
+const VOTE_UP = 'vote_up'
+const VOTE_DOWN = 'vote_down'
+
+function getVoteFromReactions(
+  ownReactions: LocalMessage['own_reactions']
+): VoteSelection {
+  if (!ownReactions?.length) return null
+  if (ownReactions.some((r) => r.type === VOTE_DOWN)) return 'down'
+  if (ownReactions.some((r) => r.type === VOTE_UP)) return 'up'
+  return null
+}
+
+interface UseMessageVoteResult {
+  selected: VoteSelection
+  voteUp: () => void
+  voteDown: () => void
+}
+
+/**
+ * Hook that wraps Stream Chat reactions to provide toggle-style
+ * upvote/downvote behavior on a message.
+ *
+ * Uses enforce_unique so sending a new reaction type automatically
+ * removes the previous one. Uses skip_push to avoid notifying the
+ * Linker on every vote.
+ */
+export function useMessageVote(message: LocalMessage): UseMessageVoteResult {
+  const { channel } = useChannelStateContext()
+  const { client } = useChatContext('useMessageVote')
+
+  const selected = useMemo(
+    () => getVoteFromReactions(message.own_reactions),
+    [message.own_reactions]
+  )
+
+  const voteUp = useCallback(async () => {
+    if (!client?.userID) return
+    try {
+      if (selected === 'up') {
+        await channel.deleteReaction(message.id, VOTE_UP)
+      } else {
+        await channel.sendReaction(
+          message.id,
+          { type: VOTE_UP },
+          { enforce_unique: true, skip_push: true }
+        )
+      }
+    } catch {
+      // Silently fail — voting is non-critical
+    }
+  }, [channel, client?.userID, message.id, selected])
+
+  const voteDown = useCallback(async () => {
+    if (!client?.userID) return
+    try {
+      if (selected === 'down') {
+        await channel.deleteReaction(message.id, VOTE_DOWN)
+      } else {
+        await channel.sendReaction(
+          message.id,
+          { type: VOTE_DOWN },
+          { enforce_unique: true, skip_push: true }
+        )
+      }
+    } catch {
+      // Silently fail — voting is non-critical
+    }
+  }, [channel, client?.userID, message.id, selected])
+
+  return { selected, voteUp, voteDown }
+}

package/src/index.ts

@@ -10,6 +10,7 @@ export { Avatar } from './components/Avatar'
 export { FaqList } from './components/FaqList'
 export { FaqListItem } from './components/FaqList/FaqListItem'
 export { ChannelEmptyState } from './components/MessagingShell/ChannelEmptyState'
+export { MessageVoteButtons } from './components/CustomMessage/MessageVoteButtons'
 
 // Providers
 export { MessagingProvider } from './providers/MessagingProvider'
@@ -17,6 +18,7 @@ export { MessagingProvider } from './providers/MessagingProvider'
 // Hooks
 export { useMessaging } from './hooks/useMessaging'
 export { useParticipants } from './hooks/useParticipants'
+export { useMessageVote } from './hooks/useMessageVote'
 
 // Utils
 export { formatRelativeTime } from './utils/formatRelativeTime'
@@ -36,3 +38,4 @@ export type { MessageMetadata } from './stream-custom-data'
 export type { AvatarProps } from './components/Avatar'
 export type { Faq, FaqListProps } from './components/FaqList'
 export type { FaqListItemProps } from './components/FaqList/FaqListItem'
+export type { VoteSelection } from './hooks/useMessageVote'

package/src/styles.css

@@ -139,6 +139,42 @@
   color: #7f22fe;
 }
 
+/* Message vote buttons (chatbot feedback) */
+.message-vote-buttons {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  margin-top: 4px;
+}
+
+.message-vote-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background-color: transparent;
+  color: rgba(0, 0, 0, 0.35);
+  cursor: pointer;
+  transition: background-color 0.15s, color 0.15s;
+}
+
+.message-vote-button:hover {
+  background-color: rgba(0, 0, 0, 0.06);
+  color: rgba(0, 0, 0, 0.55);
+}
+
+.message-vote-button--selected {
+  color: rgba(0, 0, 0, 0.7);
+}
+
+.message-vote-button--selected:hover {
+  color: rgba(0, 0, 0, 0.7);
+}
+
 /* Standalone tip message (tip without text) */
 .message-tip-standalone {
   display: inline-flex;

package/src/types.ts

@@ -139,6 +139,14 @@ export interface ChannelViewProps {
    * and filter by starred/pinned status.
    */
   showStarButton?: boolean
+
+  /**
+   * Enable thumbs up/down voting on chatbot messages.
+   * When true, vote buttons render below chatbot (DM Agent) messages.
+   * Votes are persisted as Stream Chat reactions (vote_up / vote_down).
+   * Defaults to false.
+   */
+  chatbotVotingEnabled?: boolean
 }
 
 /**
@@ -156,6 +164,7 @@ export type ChannelViewPassthroughProps = Pick<
   | 'messageMetadata'
   | 'onMessageSent'
   | 'showStarButton'
+  | 'chatbotVotingEnabled'
 >
 
 /**