@linktr.ee/messaging-react 1.8.5 → 1.8.6

package/package.json

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

package/src/components/ChannelView.tsx

@@ -13,7 +13,6 @@ import {
   Channel,
   Window,
   MessageList,
-  MessageInput,
   useChannelStateContext,
 } from 'stream-chat-react'
 
@@ -23,7 +22,7 @@ import type { ChannelViewProps } from '../types'
 import ActionButton from './ActionButton'
 import { Avatar } from './Avatar'
 import { CloseButton } from './CloseButton'
-import { IconButton } from './IconButton'
+import { CustomMessageInput } from './CustomMessageInput'
 import { ChannelEmptyState } from './MessagingShell/ChannelEmptyState'
 
 // Custom user type with email and username
@@ -37,21 +36,6 @@ type BlockedUser = {
   blocked_user_id: string
 }
 
-/**
- * Custom message input component with render prop for actions
- */
-const CustomMessageInput: React.FC<{
-  renderActions?: () => React.ReactNode
-}> = ({ renderActions }) => (
-  <div className="message-input flex items-center gap-2 p-4">
-    {renderActions && renderActions()}
-
-    <div className="flex-1">
-      <MessageInput focus maxRows={4} />
-    </div>
-  </div>
-)
-
 /**
  * Custom channel header component
  */
@@ -76,39 +60,73 @@ const CustomChannelHeader: React.FC<{
   const participantImage = participant?.user?.image
 
   return (
-    <div className="flex items-center justify-between gap-3 min-h-12">
-      <div className="flex items-center gap-3 min-w-0">
-        {showBackButton && onBack && (
+    <div className="@container">
+      <div className="flex justify-between items-center @md:hidden">
+        <button
+          className={classNames(
+            'size-10 rounded-full bg-[#F1F0EE] flex items-center justify-center',
+            !showBackButton && 'invisible'
+          )}
+          onClick={onBack || (() => {})}
+        >
+          <ArrowLeftIcon className="size-5 text-black/90" />
+        </button>
+        <div className="flex flex-col gap-1 items-center">
+          <Avatar
+            id={participant?.user?.id || channel.id || 'unknown'}
+            name={participantName}
+            image={participantImage}
+            size={40}
+          />
+          <h1 className="text-xs font-medium text-black/90">
+            {participantName}
+          </h1>
+        </div>
+        <button
+          className={classNames(
+            'size-10 rounded-full bg-[#F1F0EE] flex items-center justify-center'
+          )}
+          onClick={onShowInfo || (() => {})}
+        >
+          <DotsThreeIcon className="size-5 text-black/90" />
+        </button>
+      </div>
+      <div className="hidden @md:flex items-center justify-between gap-3 min-h-12">
+        <div className="flex items-center gap-4 min-w-0">
+          {showBackButton && onBack && (
+            <button
+              type="button"
+              onClick={onBack}
+              className="size-10 rounded-full bg-[#F1F0EE] flex items-center justify-center"
+              aria-label="Back to conversations"
+            >
+              <ArrowLeftIcon className="size-5 text-black/90" />
+            </button>
+          )}
+          {/* Avatar */}
+          <Avatar
+            id={participant?.user?.id || channel.id || 'unknown'}
+            name={participantName}
+            image={participantImage}
+            size={40}
+          />
+          <div className="min-w-0">
+            <h1 className="font-medium text-black/90 truncate">
+              {participantName}
+            </h1>
+          </div>
+        </div>
+        {canShowInfo && onShowInfo && (
           <button
-            type="button"
-            onClick={onBack}
-            className="inline-flex items-center justify-center w-8 h-8 rounded-lg hover:bg-sand focus:outline-none focus:ring-2 focus:ring-primary transition-colors lg:hidden"
-            aria-label="Back to conversations"
+            className={classNames(
+              'size-10 rounded-full bg-[#F1F0EE] flex items-center justify-center'
+            )}
+            onClick={onShowInfo}
           >
-            <ArrowLeftIcon className="h-5 w-5 text-stone" weight="bold" />
+            <DotsThreeIcon className="size-5 text-black/90" />
           </button>
         )}
-
-        {/* Avatar */}
-        <Avatar
-          id={participant?.user?.id || channel.id || 'unknown'}
-          name={participantName}
-          image={participantImage}
-          size={40}
-        />
-
-        <div className="min-w-0">
-          <h1 className="text-lg font-semibold text-charcoal truncate">
-            {participantName}
-          </h1>
-        </div>
       </div>
-
-      {canShowInfo && onShowInfo && (
-        <IconButton label="Chat info" onClick={onShowInfo}>
-          <DotsThreeIcon className="h-6 w-6 text-charcoal" weight="bold" />
-        </IconButton>
-      )}
     </div>
   )
 }
@@ -446,7 +464,7 @@ const ChannelViewInner: React.FC<{
     <>
       <Window>
         {/* Custom Channel Header */}
-        <div className="border-b border-sand bg-white px-4 py-3">
+        <div className="p-4">
           <CustomChannelHeader
             onBack={onBack}
             showBackButton={showBackButton}
@@ -461,7 +479,7 @@ const ChannelViewInner: React.FC<{
 
           {/* Show custom empty state when no messages */}
           {!hasMessages && CustomChannelEmptyState && (
-            <div className="absolute inset-0 w-full h-full bg-white">
+            <div className="absolute inset-0 w-full h-full">
               <CustomChannelEmptyState />
             </div>
           )}
@@ -503,7 +521,7 @@ export const ChannelView: React.FC<ChannelViewProps> = ({
   return (
     <div
       className={classNames(
-        'messaging-channel-view h-full flex flex-col',
+        'messaging-channel-view h-full flex flex-col bg-[#FBFAF9]',
         className
       )}
     >

package/src/components/CustomMessageInput/index.tsx

@@ -0,0 +1,61 @@
+import { ArrowUpIcon } from '@phosphor-icons/react'
+import React from 'react'
+import {
+  AttachmentPreviewList,
+  LinkPreviewList,
+  MessageInput,
+  QuotedMessagePreview,
+  SimpleAttachmentSelector,
+  TextareaComposer,
+  useMessageComposerHasSendableData,
+  useMessageInputContext,
+} from 'stream-chat-react'
+
+const CustomMessageInputInner: React.FC = () => {
+  const { handleSubmit } = useMessageInputContext()
+  const hasSendableData = useMessageComposerHasSendableData()
+
+  return (
+    <>
+      <div className="left-container">
+        <SimpleAttachmentSelector />
+      </div>
+      <div className="central-container w-full p-2 bg-white rounded-lg shadow-[0_4px_16px_0_rgba(0,0,0,0.08),0_1px_2px_0_rgba(0,0,0,0.04),0_0_0_1px_rgba(0,0,0,0.04)]">
+        <QuotedMessagePreview />
+        <LinkPreviewList />
+        <AttachmentPreviewList />
+        <div className="flex">
+          <div className="w-full ml-2 mr-4">
+            <TextareaComposer
+              className="align-middle w-full resize-none outline-none"
+              maxRows={4}
+            />
+          </div>
+          <button
+            aria-label="Send"
+            className="str-chat__send-button mt-auto flex justify-center items-center flex-shrink-0 rounded-full size-8 bg-[#121110] disabled:bg-[#F1F0EE] disabled:text-black/20 text-white"
+            data-testid="send-button"
+            disabled={!hasSendableData}
+            onClick={handleSubmit}
+            type="button"
+          >
+            <ArrowUpIcon className="size-4" />
+          </button>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export interface CustomMessageInputProps {
+  renderActions?: () => React.ReactNode
+}
+
+export const CustomMessageInput: React.FC<CustomMessageInputProps> = ({
+  renderActions,
+}) => (
+  <div className="message-input flex items-center gap-2 p-4">
+    {renderActions && renderActions?.()}
+    <MessageInput Input={CustomMessageInputInner} />
+  </div>
+)

package/src/styles.css

@@ -75,6 +75,10 @@
 
 /* Custom Stream Chat message bubble styles */
 
+.str-chat__channel {
+  background-color: transparent;
+}
+
 .str-chat__message.str-chat__message--me {
   .str-chat__message-bubble {
     background-color: #121110;