Merge to master

packages/junto-utils/api/client.ts

@@ -2,9 +2,11 @@ import { Ad4mClient } from "@perspect3vism/ad4m";
 import { ApolloClient, ApolloLink, InMemoryCache } from "@apollo/client";
 import { WebSocketLink } from "@apollo/client/link/ws";
 
+const PORT = parseInt(window.location.search.slice(6))
+
 const apolloClient = new ApolloClient({
   link: new WebSocketLink({
-    uri: `ws://localhost:4000/graphql`,
+    uri: `ws://localhost:${PORT}/graphql`,
     options: {
       reconnect: true,
     },

packages/junto-utils/react/ChatContext.tsx

@@ -28,6 +28,7 @@ type State = {
   scrollPosition?: number;
   hasNewMessage: boolean;
   isMessageFromSelf: boolean;
+  showLoadMore: boolean;
 };
 
 type ContextProps = {
@@ -52,6 +53,7 @@ const initialState: ContextProps = {
     scrollPosition: 0,
     hasNewMessage: false,
     isMessageFromSelf: false,
+    showLoadMore: true
   },
   methods: {
     loadMore: () => null,
@@ -351,7 +353,10 @@ export function ChatProvider({ perspectiveUuid, children }: any) {
     }));
 
     const cachedMessages = await dexieMessages.getAll();
-    const oldMessages = { ...state.keyedMessages, ...cachedMessages };
+    const oldMessages = { 
+      ...state.keyedMessages, 
+      ...cachedMessages 
+    };
 
     const newMessages = await getMessages({
       perspectiveUuid,
@@ -370,6 +375,7 @@ export function ChatProvider({ perspectiveUuid, children }: any) {
 
     setState((oldState) => ({
       ...oldState,
+      showLoadMore: Object.values(newMessages).length === 35,
       isFetchingMessages: false,
     }));
 

packages/mini-chat-view/src/components/MessageItem/index.scss

@@ -46,10 +46,12 @@
   }
 
   & .messageItemContent p:first-of-type {
+    user-select: text !important;
     margin-top: 0;
   }
 
   & .messageItemContent p:last-of-type {
+    user-select: text !important;
     margin-bottom: 0;
   }
 

packages/mini-chat-view/src/components/MessageList/index.tsx

@@ -19,7 +19,7 @@ export default function MessageList({ perspectiveUuid, mainRef }) {
   const scroller = useRef();
 
   const {
-    state: { messages, isFetchingMessages, scrollPosition, hasNewMessage, isMessageFromSelf },
+    state: { messages, isFetchingMessages, scrollPosition, hasNewMessage, isMessageFromSelf, showLoadMore },
     methods: {
       loadMore,
       removeReaction,
@@ -160,7 +160,7 @@ export default function MessageList({ perspectiveUuid, mainRef }) {
       <Virtuoso
         components={{
           Header: () => (
-            <j-box py="500">
+            showLoadMore ? (<j-box py="500">
               <j-flex a="center" j="center">
                 {isFetchingMessages ? (
                   <j-flex a="center" gap="300">
@@ -173,7 +173,12 @@ export default function MessageList({ perspectiveUuid, mainRef }) {
                   </j-button>
                 )}
               </j-flex>
-            </j-box>
+            </j-box>) : (
+            <j-box py="500">
+              <j-flex a="center" j="center">
+                <j-text>You have reached the end...</j-text>
+              </j-flex>
+            </j-box>)
           ),
         }}
         ref={scroller}

packages/mini-chat-view/src/components/TipTap/Mention.ts

@@ -60,7 +60,7 @@ export default (name: string) =>
 
     inline: true,
 
-    selectable: false,
+    selectable: true,
 
     atom: true,
 
@@ -99,7 +99,7 @@ export default (name: string) =>
     parseHTML() {
       return [
         {
-          tag: "span[data-mention]",
+          tag: `span[data-mention="${name}"]`,
         },
       ];
     },
@@ -108,7 +108,7 @@ export default (name: string) =>
       return [
         "span",
         mergeAttributes(
-          { "data-mention": "" },
+          { "data-mention": name },
           this.options.HTMLAttributes,
           HTMLAttributes
         ),

packages/mini-chat-view/src/components/TipTap/MentionList.tsx

@@ -28,7 +28,7 @@ export default class MentionList extends Component<MentionListProps, MentionList
       return true;
     }
 
-    if (event.key === "Enter") {
+    if (event.key === "Enter" || event.key === 'Tab') {
       this.enterHandler();
       return true;
     }

packages/mini-chat-view/src/components/TipTap/index.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef } from "preact/hooks";
+import { useState, useRef, useContext } from "preact/hooks";
 import { useEditor, EditorContent } from "@tiptap/react";
 import BulletList from "@tiptap/extension-bullet-list";
 import ListItem from "@tiptap/extension-list-item";
@@ -21,6 +21,7 @@ import emojiList from "node-emoji/lib/emoji";
 import { useEffect } from "preact/hooks";
 
 import styles from "./index.scss";
+import UIContext from "../../context/UIContext";
 
 export default function Tiptap({
   value,
@@ -33,6 +34,10 @@ export default function Tiptap({
 
   const emojiPicker = useRef();
 
+  const {
+    state: { currentReply },
+  } = useContext(UIContext);
+
   // This is needed because React ugh.
   const sendCB = useRef(onSend);
   const membersCB = useRef(members);
@@ -164,11 +169,17 @@ export default function Tiptap({
   );
 
   useEffect(() => {
-    if (editor) {
+    if (editor && value.length === 0) {
       editor.commands.setContent(value);
     }
   }, [value]);
 
+  useEffect(() => {
+    if (currentReply) {
+      editor.commands.focus();
+    }
+  }, [currentReply])
+
   function onEmojiClick(event: CustomEvent) {
     if (editor) {
       const anchorPosition = editor.view.state.selection;