@peers-app/peers-ui 0.0.14

package/src/components/messages/channel-message-list.tsx

@@ -0,0 +1,177 @@
+import { DataFilter, IMessage, Messages } from "@peers-app/peers-sdk";
+import { min, sortBy, uniqBy } from 'lodash';
+import React, { Fragment, useEffect, useState } from 'react';
+import InfiniteScroll from 'react-infinite-scroll-component';
+import { me } from '../../globals';
+import { LoadingIndicator } from '../loading-indicator';
+import { } from './message-compose';
+import { MessageDisplay } from './message-display';
+
+const windowHeight = () => window.innerHeight
+
+interface IProps {
+  height: any
+  channelId: string
+  batchSize: number
+  effects?: {
+    pushMessage: (message: IMessage) => any,
+  }
+  scrollChanged?: (isBottomInView: boolean) => any,
+}
+
+export const ChannelMessageList = (props: IProps) => {
+  const { height, channelId, batchSize } = props;
+
+  const [messages, setMessages] = useState<IMessage[]>([]);
+  const [allMessagesLoaded, setAllMessagesLoaded] = useState(false);
+  const messagesEndRef = React.useRef<HTMLDivElement>(null);
+  
+  function scrollToBottom(behavior: 'instant' | 'smooth', delay = 100) {
+    setTimeout(() => {
+      messagesEndRef.current?.scrollIntoView({ behavior });
+    }, delay);    
+  }
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        props?.scrollChanged?.(entry.isIntersecting);
+      },
+      { threshold: 1.0 }
+    );
+
+    if (messagesEndRef.current) {
+      observer.observe(messagesEndRef.current);
+    }
+
+    return () => {
+      if (messagesEndRef.current) {
+        observer.unobserve(messagesEndRef.current);
+      }
+    };
+  }, []);
+
+  function prependItems() {
+    const lastMessage = messages[messages.length - 1];
+    getMessages(batchSize, channelId, lastMessage)
+      .then(fetchedMessages => {
+        if (fetchedMessages.length === 0) {
+          setAllMessagesLoaded(true);
+        } else {
+          const _messages = sortBy([...messages, ...fetchedMessages], 'createdAt').reverse()
+          setMessages(uniqBy(_messages, 'messageId'));
+        }
+      })
+    return false
+  }
+
+  const minHeightOfMessage = 20;
+  useEffect(() => {
+    if (!allMessagesLoaded && (!messages.length || messages.length * minHeightOfMessage < windowHeight())) {
+      prependItems();
+    }
+  }, [channelId, messages]);
+
+
+  const [effects] = useState(() => props.effects || ({} as IProps['effects'])!);
+  effects.pushMessage = (newMessage: IMessage) => {
+    if (
+      (messages.length > batchSize && min(messages.map(m => m.createdAt))! > newMessage.createdAt)
+      || messages.find(m => m.messageId === newMessage.messageId)
+    ) {
+      return;
+    }
+    let _messages = sortBy([newMessage, ...messages], 'createdAt').reverse();
+    setMessages(_messages);
+    if (newMessage.userId === me.userId && !newMessage.assistantId) {
+      scrollToBottom('instant', 1);
+    } else {
+      scrollToBottom('smooth');
+    }    
+  }
+
+  useEffect(() => {
+    const sub = Messages().dataChanged.subscribe(evt => {
+      const message: IMessage = evt.dataObject;
+      if (message.channelId !== channelId || message.messageParentId) {
+        return;
+      }
+      if (evt.op === 'insert') {
+        effects.pushMessage(message);
+      }      
+    });
+    return () => {
+      sub.unsubscribe();
+    }
+  }, [channelId]);
+
+
+  return (
+    <div
+      id="scrollableDiv"
+      style={{
+        height,
+        overflow: 'auto',
+        display: 'flex',
+        flexDirection: 'column-reverse',
+        // marginBottom: '70px',
+      }}
+    >
+      <InfiniteScroll
+        dataLength={messages.length}
+        next={prependItems}
+        style={{ display: 'flex', flexDirection: 'column-reverse', overflow: 'hidden' }}
+        inverse={true}
+        hasMore={!allMessagesLoaded}
+        loader={<LoadingIndicator />}
+        scrollableTarget="scrollableDiv"
+        endMessage={
+          <Fragment>
+            <div className="d-flex justify-content-center">
+              {messages[0] && (
+                <div>
+                  {(new Date(messages[messages.length - 1].createdAt).toLocaleDateString())}
+                </div>
+              )}
+            </div>
+            <div className="d-flex justify-content-center">
+              <div>
+                <i>beginning of messages</i>
+              </div>
+            </div>
+          </Fragment>
+        }
+      >
+        {/* <div style={{ marginBottom: '10px' }}></div> */}
+        <div ref={messagesEndRef} />
+        {messages.map((message, index) => {
+          return <MessageDisplay key={message.messageId} message={message} messageAbove={messages[index + 1]} index={index} />
+        })}
+      </InfiniteScroll>
+    </div>
+  )
+}
+
+export async function getMessages(batchSize: number, channelId: string, lastMessage: IMessage | undefined): Promise<IMessage[]> {
+  const query: DataFilter<IMessage> = { 
+    channelId,
+    messageParentId: null,
+  };
+  if (lastMessage) {
+    query.messageId = { $lt: lastMessage.messageId };
+  }
+  const cursor = await Messages().cursor(
+    query,
+    {
+      sortBy: ['-createdAt', '-messageId'],
+    });
+
+  const messages: IMessage[] = [];
+  for await (const message of cursor) {
+    messages.push(message);
+    if (messages.length >= batchSize) {
+      break;
+    }
+  }
+  return messages;
+}

package/src/components/messages/channel-view.tsx

@@ -0,0 +1,74 @@
+import React, { useRef, useState } from 'react';
+import { IMessage, Messages } from "@peers-app/peers-sdk";
+import { me, openThread } from '../../globals';
+import { ChannelMessageList } from './channel-message-list';
+import { MessageCompose } from './message-compose';
+import { registerInternalPeersUI } from '../../ui-router/ui-loader';
+
+interface IProps {
+  channelId?: string;
+}
+
+export const ChannelMessages = (props: IProps) => {
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const [effects] = useState<{ pushMessage: (message: IMessage) => any }>(() => ({} as any));
+  const [scrolledToBottom, setScrolledToBottom] = useState(true);
+
+  let channelId = props.channelId;
+  // const scrollToBottom = (behavior: 'instant' | 'smooth' = 'instant') => {
+  //   setTimeout(() => messagesEndRef.current?.scrollIntoView({ behavior }), 500);
+  // };
+
+  const sendMessage = (userMessage: IMessage) => {
+    effects.pushMessage(userMessage);
+    Messages().save(userMessage).then(message => {
+      openThread(message.messageId);
+    });
+  };
+
+  channelId = channelId || me.userId;
+
+  return (
+    <div
+      className="d-flex flex-column flex-col-reverse"
+      style={{
+        // height: '100vh',
+        height: 'calc(100vh - 50px)',
+        // marginTop: '50px',
+      }}
+    >
+      <ChannelMessageList
+        batchSize={30}
+        channelId={channelId}
+        // height="calc(100vh - 50px)"
+        height='100vh'
+        effects={effects}
+        scrollChanged={setScrolledToBottom}
+      />
+      <div ref={messagesEndRef} />
+
+      <div className='p-2 pt-1'
+        style={{
+          boxShadow: scrolledToBottom ? '' : `0 -10px 11px -10px rgba(0, 0, 0, 0.9)`
+        }}
+      >
+        <MessageCompose 
+          channelId={channelId}
+          onMessageSubmit={sendMessage}
+        />
+      </div>
+
+    </div>
+  );
+}
+
+registerInternalPeersUI({
+  peersUIId: '00m5fsd8d4jma58fgvyr1riny',
+  component: ChannelMessages,
+  routes: [
+    { 
+      isMatch: (props, context) => context.path === 'threads' || context.path === '',
+      uiCategory: 'screen'
+    },
+  ]
+})

package/src/components/messages/message-compose.tsx

@@ -0,0 +1,162 @@
+import { deviceVar, Observable, observable, Subscription, userVar } from "@peers-app/peers-sdk";
+
+import { IFile, IMessage, newid, PersistentVar } from "@peers-app/peers-sdk";
+import React, { useEffect, useState } from 'react';
+import { me } from '../../globals';
+import { useObservable } from "../../hooks";
+import { IEditorEffects, MarkdownEditor } from '../markdown-editor/editor';
+
+
+const pVarCache: { [key: string]: PersistentVar<string> } = {};
+
+export function getContentPersistenceValue(channelId: string, threadId?: string) {
+  const contentPersistenceName = `messageCompose-channel-${channelId}${threadId ? '-thread-' + threadId : ''}`;
+  if (!pVarCache[contentPersistenceName]) {
+    pVarCache[contentPersistenceName] = userVar<string>(contentPersistenceName, { defaultValue: '' });
+  }
+  return pVarCache[contentPersistenceName];
+}
+
+interface IProps {
+  channelId: string
+  threadId?: string
+  onMessageSubmit: (message: IMessage, files?: IFile[]) => any
+}
+
+export const MessageCompose = (props: IProps) => {
+  const { channelId, threadId, onMessageSubmit } = props;
+
+  const [contentObs] = useState(() => observable(''));
+  const [mdEffects] = useState<IEditorEffects>(() => ({}));
+  const composeBottomRef = React.useRef<HTMLDivElement>(null);
+
+  function scrollToBottom() {
+    if (composeBottomRef?.current) {
+      composeBottomRef.current.scrollIntoView({ behavior: 'instant' });
+    }
+  }
+
+  useEffect(() => {
+    let disposed = false;
+    let sub: Subscription | undefined;
+    getContentPersistenceValue(channelId, threadId).loadingPromise.then(pVar => {
+      if (!disposed) {
+        contentObs(pVar() ?? '');
+        sub = contentObs.subscribe(() => pVar(contentObs()));
+        setTimeout(() => scrollToBottom(), 100);
+      }
+    });
+    return () => {
+      disposed = true;
+      sub?.dispose();
+    }
+  }, [channelId, threadId]);
+
+  useEffect(() => {
+    const sub = contentObs.subscribe(() => scrollToBottom());
+    return () => sub.dispose();
+  }, [contentObs]);
+
+  function submitMessage() {
+    const markdown = contentObs() ?? '';
+    contentObs('');
+    if (!markdown.trim()) {
+      return;
+    }
+    const userMessage: IMessage = {
+      messageId: newid(),
+      message: markdown,
+      userId: me.userId,
+      channelId,
+      messageParentId: threadId,
+      createdAt: new Date(),
+    }
+    onMessageSubmit(userMessage);
+  }
+
+  return (
+    <div className="border rounded border-dark-subtle" style={{ overflowY: 'auto' }}>
+      <MarkdownEditor
+        value={contentObs}
+        effects={mdEffects}
+        autoFocus={!!threadId}
+        maxHeight={'50vh'}
+      />
+      <BottomControls
+        submitMessage={submitMessage}
+        contentObs={contentObs}
+        mdEffects={mdEffects}
+      />
+      <div ref={composeBottomRef} />
+    </div>
+  )
+}
+
+const BottomControls = (props: {
+  submitMessage: () => void,
+  contentObs: Observable<string>,
+  mdEffects: any,
+}) => {
+  const { submitMessage, contentObs } = props;
+  const [content] = useObservable(contentObs, [contentObs]);
+
+  const [submitOnEnter] = useState(() => deviceVar<boolean>(`messageCompose-submitOnEnter`, { defaultValue: true }));
+  useObservable(submitOnEnter);
+  if (isMobile()) {
+    submitOnEnter(false);
+  }
+
+  function onKeyDown(evt: KeyboardEvent) {
+    if (evt.code === 'Enter' && !evt.ctrlKey && !evt.shiftKey && !evt.altKey && !evt.metaKey) {
+      if (submitOnEnter()) {
+        submitMessage();
+        evt.preventDefault();
+        return true;
+      }
+    }
+    else if (evt.code === 'Enter' && (evt.ctrlKey || evt.metaKey)) {
+      if (!submitOnEnter()) {
+        submitMessage();
+        evt.preventDefault();
+        return true;
+      }
+    }
+  }
+  props.mdEffects.onKeyDown = onKeyDown;
+
+  return (
+    <div>
+      <div className='float-end small'>
+        <span className='small' hidden={isMobile()}>
+          <input type="checkbox" id="sendOnEnter" checked={!!submitOnEnter()} onChange={evt => submitOnEnter(evt.target.checked)} /> Send on Enter
+        </span>
+        &nbsp;&nbsp;
+
+        {content.trim()?.length === 0
+          ? (
+            <button className="btn btn-sm btn-outline" type="button" disabled>
+              Send &nbsp;
+              <i className="bi bi-send-fill"></i>
+            </button>
+          )
+          : (
+            <button className="btn btn-sm btn-success" type="button" onClick={props.submitMessage}>
+              Send &nbsp;
+              <i className="bi bi-send-fill"></i>
+            </button>
+          )
+        }
+      </div>
+    </div>
+  )
+}
+
+export function isMobile() {
+  if ((navigator as any)?.userAgentData?.mobile) {
+    return true;
+  }
+  let check = false;
+  // @ts-ignore
+  (function (a) { if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) check = true; })(navigator.userAgent || navigator.vendor || window.opera);
+  return check;
+}

package/src/components/messages/message-display.tsx

@@ -0,0 +1,217 @@
+import React, { useEffect, useState } from 'react';
+import { Avatar } from './avatar';
+// import { FileListDisplay } from './file-list-display';
+import { Assistants, IMessage, IUser, Messages, Observable, observable } from "@peers-app/peers-sdk";
+import moment from 'moment';
+import { openThread, openThreads } from '../../globals';
+import { useObservable, usePromise, useSubscription } from '../../hooks';
+import { MarkdownWithMentions } from '../markdown-with-mentions';
+import { MessageLogs } from '../message-logs/message-logs';
+
+
+interface IProps {
+  message: IMessage
+  messageAbove?: IMessage
+  isThreadParent?: boolean
+  index?: number
+}
+
+export const MessageDisplay = (props: IProps) => {
+  const { message, messageAbove, isThreadParent } = props;
+
+  const [messageId, setMessageId] = useState(message.messageId);
+
+  useSubscription(openThreads, () => {
+
+  })
+
+  const [user, setUser] = useState<IUser>();
+  const [messageChangedTime, setMessageChangedTime] = useState(0);
+  const assistant = usePromise(async () => {
+    if (message.assistantId) {
+      return Assistants().get(message.assistantId);
+    }
+  }, undefined, [message.assistantId]);
+
+  const countReplies = usePromise(() => Messages().count({ messageParentId: messageId }), 1, [messageId, messageChangedTime])!;
+
+  const [showMenu] = useState(() => observable(false));
+
+  useEffect(() => {
+    setMessageId(message.messageId);
+    const sub = Messages().dataChanged.subscribe((evt) => {
+      const changedMessage = evt.dataObject;
+      if (changedMessage.messageId === messageId || changedMessage.messageParentId === messageId) {
+        setMessageChangedTime(Date.now());
+      }
+    });
+    return () => {
+      sub.unsubscribe();
+    }
+  }, [message]);
+
+  // calculate short time string
+  const messageDate = new Date(message.createdAt)
+  let hour: any = messageDate.getHours();
+  const minute = messageDate.getMinutes().toString().padStart(2, '0');
+  let ampm = "AM";
+  if (hour > 11) {
+    ampm = "PM";
+  }
+  if (hour > 12) {
+    hour = hour - 12;
+  }
+  let timeStr = `${hour || 12}:${minute} ${ampm}`
+  
+  const showDateDivider = messageAbove
+    && messageDate.toDateString() !== (new Date(messageAbove.createdAt)).toDateString();
+  const showUserInfo = showDateDivider
+    || !messageAbove || !message
+    || messageAbove.userId !== message.userId
+    || messageAbove.assistantId !== message.assistantId
+    || messageDate.getHours() !== (new Date(messageAbove.createdAt)).getHours()
+    || countReplies > 0;
+
+
+  // // show time of this message if hour is different than last message
+  // const showTime = !showUserInfo 
+  //   && messageDate.getHours() !== (new Date(messageAbove.modified)).getHours(); 
+
+  const isThreadView = isThreadParent || message.messageParentId;
+
+  const dateTimeStr = moment(message.createdAt).calendar().split(' at ')[0] + ' ' + timeStr;
+  if (isThreadParent) {
+    timeStr = dateTimeStr;
+  }
+
+  let messageParsed = message.message.trim();
+
+  return (
+    <div
+      className={isThreadParent ? '' : `peers-message-container`}
+      onMouseEnter={() => showMenu(true)}
+      onMouseLeave={() => showMenu(false)}
+    >
+      <MessageMenu message={message} showMenu={showMenu} isThreadView={!!isThreadView} />
+
+      {showDateDivider && (
+        <div style={{ marginTop: `20px` }}>
+          <hr />
+          <div className="d-flex justify-content-center">
+            <span
+              className='message-display-list-date'
+              style={{
+                position: 'relative',
+                top: '-29px',
+                paddingLeft: '11px',
+                paddingRight: '11px',
+                fontSize: '16px',
+                borderRadius: '20px',
+              }}
+            >
+              <strong>
+                {
+                  moment(message.createdAt).calendar().split(' at ')[0].replace('Last', '')
+                }
+              </strong>
+            </span>
+          </div>
+        </div>
+      )}
+
+      {/* new block so add some padding */}
+      {showUserInfo && (
+        <div style={{ marginTop: '15px' }}></div>
+      )}
+
+      <div className="d-flex">
+        <div className="p-0 flex-shrink-0 justify-content-center align-items-center"
+          style={{
+            width: '46px',
+            height: '20px',
+            overflow: 'visible',
+            // zIndex: message.modified,
+            position: 'relative',
+            top: '4px',
+            left: '3px',
+          }}
+        >
+          {showUserInfo && <Avatar userId={message.userId} assistantId={message.assistantId} setUser={setUser} />}
+        </div>
+        <div 
+          className="p-1 flex-grow-1 justify-content-start text-break"
+          style={{
+            maxWidth: 'calc(100% - 50px)',
+          }}
+        >
+
+          {showUserInfo && (
+            <div className="peers-message">
+              <span style={{ fontSize: '9pt' }}>
+                <b>
+                  {assistant?.name || message?.assistantId || user?.name || message.userId}
+                </b>
+              </span>
+              {/* TODO show status */}
+              <span className="text-muted sub-sup-font-size" style={{ fontSize: '8pt' }} title={dateTimeStr}>&nbsp;&nbsp;{timeStr}</span>
+            </div>
+          )}
+
+          {messageParsed.length > 0 && (
+            <div className="peers-message">
+              <MarkdownWithMentions content={messageParsed} />
+            </div>
+          )}
+
+          <MessageLogs key={messageId} messageId={messageId} />
+
+          {/* replies info and link */}
+          {!isThreadView && countReplies > 0 && (
+            <div className="d-inline">
+              {/* this space prevents the logs and replies indicator from being included when selecting and copying a message text */}
+              &nbsp;
+              <button
+                className="btn btn-sm btn-link m-1"
+                onClick={() => openThread(message.messageParentId || messageId)}
+                tabIndex={props.index}
+              >
+                {countReplies === 1 ? '1 reply' : countReplies + ' replies'}
+              </button>
+            </div>
+          )}          
+
+        </div>
+      </div>
+
+      {message?.fileIds?.length && (
+        <div style={{ marginLeft: '46px' }}>
+          {/* <FileListDisplay files={message.fileIds} /> */}
+        </div>
+      ) || undefined}
+
+
+    </div>
+  )
+}
+
+const MessageMenu = (props: { message: IMessage, showMenu: Observable<boolean>, isThreadView: boolean }) => {
+
+  const { message, isThreadView, showMenu } = props;
+  useObservable(showMenu);
+
+  return (
+    <>
+      {/* TODO show different menu if it's a thread view */}
+      {showMenu() && !isThreadView && (
+        <div className="message-hover-menu">
+          <button
+            className="btn btn-sm btn-link m-1"
+            onClick={() => openThread(message.messageParentId || message.messageId)}
+          >
+            Reply
+          </button>
+        </div>
+      )}
+    </>
+  )
+}