From 7e37ef88f389da6cefacb09fcf520c7579cefde5 Mon Sep 17 00:00:00 2001 From: fayeed Date: Tue, 8 Feb 2022 15:04:29 +0530 Subject: [PATCH 1/6] fix(chat) - Made the chat messages selectable closes #14 --- .../mini-chat-view/src/components/MessageItem/index.scss | 2 ++ packages/mini-chat-view/src/components/TipTap/Mention.ts | 6 +++--- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/mini-chat-view/src/components/MessageItem/index.scss b/packages/mini-chat-view/src/components/MessageItem/index.scss index 6a23483..d2c7e87 100644 --- a/packages/mini-chat-view/src/components/MessageItem/index.scss +++ b/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; } diff --git a/packages/mini-chat-view/src/components/TipTap/Mention.ts b/packages/mini-chat-view/src/components/TipTap/Mention.ts index ecf7728..c95810a 100644 --- a/packages/mini-chat-view/src/components/TipTap/Mention.ts +++ b/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 ), From b5f4aad9ecc78e75f78c71f4bb7733e57da687e1 Mon Sep 17 00:00:00 2001 From: fayeed Date: Thu, 10 Feb 2022 12:40:19 +0530 Subject: [PATCH 2/6] feat(chat) - Autofocuses the input when replying closes #13 --- .../mini-chat-view/src/components/TipTap/index.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/mini-chat-view/src/components/TipTap/index.tsx b/packages/mini-chat-view/src/components/TipTap/index.tsx index 75bebf9..5e01f15 100644 --- a/packages/mini-chat-view/src/components/TipTap/index.tsx +++ b/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); @@ -169,6 +174,12 @@ export default function Tiptap({ } }, [value]); + useEffect(() => { + if (currentReply) { + editor.commands.focus(); + } + }, [currentReply]) + function onEmojiClick(event: CustomEvent) { if (editor) { const anchorPosition = editor.view.state.selection; From c43a8b462a02587f4fbe850c1e2eb7bfd2e7c5a9 Mon Sep 17 00:00:00 2001 From: fayeed Date: Thu, 10 Feb 2022 12:54:57 +0530 Subject: [PATCH 3/6] feat(chat) - Added a way to add mentions with tab closes #20 --- packages/mini-chat-view/src/components/TipTap/MentionList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mini-chat-view/src/components/TipTap/MentionList.tsx b/packages/mini-chat-view/src/components/TipTap/MentionList.tsx index 0013e0f..4815bc0 100644 --- a/packages/mini-chat-view/src/components/TipTap/MentionList.tsx +++ b/packages/mini-chat-view/src/components/TipTap/MentionList.tsx @@ -28,7 +28,7 @@ export default class MentionList extends Component Date: Thu, 10 Feb 2022 14:19:23 +0530 Subject: [PATCH 4/6] fix(chat) - closes #21 --- packages/mini-chat-view/src/components/TipTap/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mini-chat-view/src/components/TipTap/index.tsx b/packages/mini-chat-view/src/components/TipTap/index.tsx index 5e01f15..d04292d 100644 --- a/packages/mini-chat-view/src/components/TipTap/index.tsx +++ b/packages/mini-chat-view/src/components/TipTap/index.tsx @@ -169,7 +169,7 @@ export default function Tiptap({ ); useEffect(() => { - if (editor) { + if (editor && value.length === 0) { editor.commands.setContent(value); } }, [value]); From 81c5f83b375db45f35f4ce47a9106106014e0cc1 Mon Sep 17 00:00:00 2001 From: fayeed Date: Thu, 10 Feb 2022 14:43:15 +0530 Subject: [PATCH 5/6] fix(chat) - Hide the loadmore button when reached to the end closes #22 --- packages/junto-utils/react/ChatContext.tsx | 8 +++++++- .../src/components/MessageList/index.tsx | 11 ++++++++--- 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/packages/junto-utils/react/ChatContext.tsx b/packages/junto-utils/react/ChatContext.tsx index d55aa9a..708dfc2 100644 --- a/packages/junto-utils/react/ChatContext.tsx +++ b/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, })); diff --git a/packages/mini-chat-view/src/components/MessageList/index.tsx b/packages/mini-chat-view/src/components/MessageList/index.tsx index 5cb5ed3..88e28dd 100644 --- a/packages/mini-chat-view/src/components/MessageList/index.tsx +++ b/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 }) { ( - + showLoadMore ? ( {isFetchingMessages ? ( @@ -173,7 +173,12 @@ export default function MessageList({ perspectiveUuid, mainRef }) { )} - + ) : ( + + + You have reached the end... + + ) ), }} ref={scroller} From 21c08a32fcfce8bb7db3bafcdc6fe70c735875cf Mon Sep 17 00:00:00 2001 From: fayeed Date: Mon, 14 Feb 2022 08:16:23 +0530 Subject: [PATCH 6/6] feat(chat) - Dynamic port for perspective view --- packages/junto-utils/api/client.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/junto-utils/api/client.ts b/packages/junto-utils/api/client.ts index 92ab66c..d385b17 100644 --- a/packages/junto-utils/api/client.ts +++ b/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, },