0.1.6

Author: Asha20

src/BeforeMessages.js

@@ -1,9 +1,23 @@
+import { html, VirtualMessage } from "@talkjs/react-components";
 /** @import { BeforeMessagesProps } from "@talkjs/react-components"; */
 
 /**
  * BeforeMessages is rendered inside the message list container, before the first message.
+ * By default, it renders `conversation.welcomeMessages` as virtual system messages.
+ *
  * @param {BeforeMessagesProps} props
  */
 export function BeforeMessages({ common }) {
-  return null;
+  const welcomeMessages = common.conversation.welcomeMessages;
+  if (welcomeMessages.length === 0) {
+    return null;
+  }
+
+  const virtualMessages = welcomeMessages.map(
+    (message, i) => html`<${VirtualMessage} key=${i} text=${message} />`,
+  );
+
+  // We're inside a `flex-direction: column-reverse` container so we render the
+  // messages in reverse order.
+  return html`<div className="t-message-group">${virtualMessages.reverse()}</div>`;
 }

src/ChatHeader.css

@@ -76,3 +76,33 @@
   -webkit-box-shadow: inset 0 0 0 1px rgba(50, 50, 50, 0.4);
   box-shadow: inset 0 0 0 1px rgba(50, 50, 50, 0.4);
 }
+
+.t-theme-chat-header .t-back-button {
+  display: none;
+
+  margin-left: -0.5em;
+  margin-right: 0.5em;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: 0;
+  border-radius: 9999px;
+  cursor: pointer;
+  justify-content: center;
+  align-items: center;
+  background: transparent;
+  color: currentColor;
+  opacity: 0.75;
+  transition: 150ms ease-out;
+}
+
+.t-theme-chat-header .t-back-button:hover,
+.t-theme-chat-header .t-back-button:focus {
+  background-color: rgba(38 38 38 / 5%);
+  color: #007df9;
+  opacity: 1;
+}
+
+[t-mobile-inbox] .t-theme-chat-header .t-back-button {
+  display: inline-flex;
+}

src/ChatHeader.js

@@ -3,7 +3,7 @@ import { html, useParticipants } from "@talkjs/react-components";
 
 /** @param {ChatHeaderProps} props */
 export function ChatHeader(props) {
-  const { conversation, theme } = props.common;
+  const { conversation, theme, chatbox, t } = props.common;
   const { ConversationImage } = theme;
 
   const participants = useParticipants(conversation.id, 10);
@@ -12,6 +12,14 @@ export function ChatHeader(props) {
     <div className="t-theme-chat-header">
       <div className="t-inner">
         <div className="t-content">
+          <button
+            className="t-back-button"
+            aria-label=${t.INBOX}
+            title=${t.INBOX}
+            onClick=${() => chatbox.clickBackButton()}
+          >
+            <${theme.Icon} type="chevronLeft" common=${props.common} />
+          </button>
           <div className="t-image">
             <${ConversationImage}
               conversation=${conversation}

src/Message.css

@@ -309,7 +309,8 @@
   width: 1.143em;
   height: 1.143em;
 }
-.t-message-action-menu-button[t-message-status="sending"] {
+.t-theme-message[t-status="sending"] .t-message-action-menu-button,
+.t-theme-message[t-status="sending"] .t-add-reaction-button {
   visibility: hidden;
 }
 

src/Message.js

@@ -12,10 +12,10 @@ import {
 /** @param {MessageProps} props */
 export function Message(props) {
   const { message, messageStatus, permissions, common } = props;
-  const { currentUser, theme, chatbox, conversation, t } = common;
+  const { currentUser, theme, chatbox, conversationId, t } = common;
   const { Avatar, Icon, ReferencedMessage, TimeAgo, MessageActionMenu } = theme;
 
-  const participants = useParticipants(conversation.id, 3);
+  const participants = useParticipants(conversationId, 3);
 
   const isGroupChat = participants.length >= 3;
   const sender = message.sender;
@@ -40,6 +40,7 @@ export function Message(props) {
       className="t-theme-message"
       t-sender=${senderType}
       t-message-id=${message.id}
+      t-status=${messageStatus}
     >
       <div className="t-message-row">
         ${sender &&
@@ -81,7 +82,6 @@ export function Message(props) {
         html`
             <${PopoverButton}
               type="menu"
-              t-message-status=${messageStatus}
               popoverComponent=${MessageActionMenu}
               popoverProps=${{ message, permissions, common }}
               className="t-message-action-menu-button"
@@ -136,6 +136,10 @@ export function Message(props) {
 function StatusTick({ messageStatus, common }) {
   const { Icon } = common.theme;
 
+  if (messageStatus === "virtual") {
+    return null;
+  }
+
   if (messageStatus === "sending") {
     return html`
       <span className="t-status-icon">

src/NoConversationSelected.css

@@ -0,0 +1 @@
+/* This component renders nothing by default. You can add styles here when you add markup to the component. */

src/NoConversationSelected.js

@@ -0,0 +1,12 @@
+/** @import { NoConversationSelectedProps } from "@talkjs/react-components"; */
+
+/**
+ * NoConversationSelected is rendered inside the chatbox panel when `conversationId` is
+ * set to `null`. This happens e.g. when an Inbox is loaded without a selected
+ * conversation.
+ *
+ * @param {NoConversationSelectedProps} props
+ */
+export function NoConversationSelected({ common }) {
+  return null;
+}

src/TimeAgo.js

@@ -2,8 +2,18 @@ import { html, useTimeAgo } from "@talkjs/react-components";
 /** @import { TimeAgoProps } from "@talkjs/react-components"; */
 
 /** @param {TimeAgoProps} props */
-export function TimeAgo({ timestamp, common }) {
+export function TimeAgo(props) {
+  if (props.timestamp === -1) {
+    // virtual message, no timestamp
+    return null;
+  }
+  return html`<${TimeAgoSpan} ...${props} />`;
+}
+
+/** @param {TimeAgoProps} props */
+function TimeAgoSpan({ timestamp, common }) {
   const { t } = common;
+
   // Turns `timestamp` into a long, informative, locale specific datetime string
   const absoluteDateTimeString = new Date(timestamp).toLocaleString(t.locale, {
     weekday: "short",

src/index.css

@@ -10,6 +10,7 @@
 @import url("MessageListFooter.css");
 @import url("BeforeMessages.css");
 @import url("AfterMessages.css");
+@import url("NoConversationSelected.css");
 
 @import url("AudioBlock.css");
 @import url("FileBlock.css");

src/index.d.ts

@@ -12,6 +12,7 @@ export declare const MessageDivider = Theme["MessageDivider"];
 export declare const MessageListFooter = Theme["MessageListFooter"];
 export declare const BeforeMessages = Theme["BeforeMessages"];
 export declare const AfterMessages = Theme["AfterMessages"];
+export declare const NoConversationSelected = Theme["NoConversationSelected"];
 export declare const CompactMessageContent = Theme["CompactMessageContent"];
 
 export declare const AudioBlock = Theme["AudioBlock"];