@churchapps/apphelper 0.1.2 → 0.1.4

package/src/components/markdownEditor/plugins/emoji/EmojisPlugin.tsx

@@ -1,65 +1,65 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import type {LexicalEditor} from 'lexical';
-import 'material-symbols';
-import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import {$createTextNode, TextNode} from 'lexical';
-import {useEffect} from 'react';
-import materialIcons from '../../../iconPicker/IconNamesList';
-
-import {$createEmojiNode, EmojiNode} from './EmojiNode';
-import { EMOJI_NODE_MARKDOWN_REGEX } from './EmojiNodeTransform';
-
-
-function useEmojis(editor: LexicalEditor): void {
-  useEffect(() => {
-    if (!editor.hasNodes([EmojiNode, TextNode])) {
-      throw new Error('EmojisPlugin: EmojiNode not registered on editor');
-    }
-
-    return editor.registerNodeTransform(TextNode, (textNode) => {
-      if (EMOJI_NODE_MARKDOWN_REGEX.test(textNode.getTextContent()) || materialIcons.map((materialIcon : string) => ':' + materialIcon + ':').some((materialIcon : string) => textNode.getTextContent().includes(materialIcon))) {
-
-        const materialIconToInsert = materialIcons.find((materialIcon : string) => textNode.getTextContent().replaceAll(':', '').includes(materialIcon));
-
-        if (!materialIconToInsert) return;
-
-        const initialTextInput = textNode.getTextContent();
-        const emojiNode = $createEmojiNode(materialIconToInsert);
-
-        const leftoverTextNodes : Array<TextNode> = [];
-
-        initialTextInput?.split(':').forEach((leftoverTextString : string, index : number) => {
-          if (materialIcons.includes(leftoverTextString)) {
-            const emojiNode = $createEmojiNode(leftoverTextString);
-
-            leftoverTextNodes.push(emojiNode);
-            return;
-          }
-          leftoverTextNodes.push($createTextNode(leftoverTextString));
-        });
-
-        textNode.setTextContent('');
-
-
-        textNode.getParent().splice(textNode.getIndexWithinParent(), 1, leftoverTextNodes);
-
-        (leftoverTextNodes.find((node : TextNode) => materialIcons.includes(node.__text)) || leftoverTextNodes[leftoverTextNodes.length - 1]).select();
-
-        textNode.remove();
-      }
-    });
-  }, [editor]);
-}
-
-export default function EmojisPlugin(): JSX.Element | null {
-  const [editor] = useLexicalComposerContext();
-  useEmojis(editor);
-  return null;
-}
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type {LexicalEditor} from 'lexical';
+import 'material-symbols';
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {$createTextNode, TextNode} from 'lexical';
+import {useEffect} from 'react';
+import materialIcons from '../../../iconPicker/IconNamesList';
+
+import {$createEmojiNode, EmojiNode} from './EmojiNode';
+import { EMOJI_NODE_MARKDOWN_REGEX } from './EmojiNodeTransform';
+
+
+function useEmojis(editor: LexicalEditor): void {
+  useEffect(() => {
+    if (!editor.hasNodes([EmojiNode, TextNode])) {
+      throw new Error('EmojisPlugin: EmojiNode not registered on editor');
+    }
+
+    return editor.registerNodeTransform(TextNode, (textNode) => {
+      if (EMOJI_NODE_MARKDOWN_REGEX.test(textNode.getTextContent()) || materialIcons.map((materialIcon : string) => ':' + materialIcon + ':').some((materialIcon : string) => textNode.getTextContent().includes(materialIcon))) {
+
+        const materialIconToInsert = materialIcons.find((materialIcon : string) => textNode.getTextContent().replaceAll(':', '').includes(materialIcon));
+
+        if (!materialIconToInsert) return;
+
+        const initialTextInput = textNode.getTextContent();
+        const emojiNode = $createEmojiNode(materialIconToInsert);
+
+        const leftoverTextNodes : Array<TextNode> = [];
+
+        initialTextInput?.split(':').forEach((leftoverTextString : string, index : number) => {
+          if (materialIcons.includes(leftoverTextString)) {
+            const emojiNode = $createEmojiNode(leftoverTextString);
+
+            leftoverTextNodes.push(emojiNode);
+            return;
+          }
+          leftoverTextNodes.push($createTextNode(leftoverTextString));
+        });
+
+        textNode.setTextContent('');
+
+
+        textNode.getParent().splice(textNode.getIndexWithinParent(), 1, leftoverTextNodes);
+
+        (leftoverTextNodes.find((node : TextNode) => materialIcons.includes(node.__text)) || leftoverTextNodes[leftoverTextNodes.length - 1]).select();
+
+        textNode.remove();
+      }
+    });
+  }, [editor]);
+}
+
+export default function EmojisPlugin(): JSX.Element | null {
+  const [editor] = useLexicalComposerContext();
+  useEmojis(editor);
+  return null;
+}

package/src/components/markdownEditor/plugins/index.ts

@@ -1,6 +1,6 @@
-export { ToolbarPlugin } from "./ToolbarPlugin";
-export { CustomAutoLinkPlugin } from "./AutoLinkPlugin";
-export { ListMaxIndentLevelPlugin } from "./ListMaxIndentLevelPlugin";
-export { PLAYGROUND_TRANSFORMERS } from "./MarkdownTransformers";
-export { ReadOnlyPlugin } from "./ReadOnlyPlugin";
-export { ControlledEditorPlugin } from "./ControlledEditorPlugin";
+export { ToolbarPlugin } from "./ToolbarPlugin";
+export { CustomAutoLinkPlugin } from "./AutoLinkPlugin";
+export { ListMaxIndentLevelPlugin } from "./ListMaxIndentLevelPlugin";
+export { PLAYGROUND_TRANSFORMERS } from "./MarkdownTransformers";
+export { ReadOnlyPlugin } from "./ReadOnlyPlugin";
+export { ControlledEditorPlugin } from "./ControlledEditorPlugin";

package/src/components/markdownEditor/theme.ts

@@ -1,65 +1,65 @@
-export const theme = {
-  placeholder: "editor-placeholder",
-  paragraph: "editor-paragraph",
-  quote: "editor-quote",
-  heading: {
-    h1: "editor-heading-h1",
-    h2: "editor-heading-h2",
-    h3: "editor-heading-h3",
-    h4: "editor-heading-h4",
-    h5: "editor-heading-h5"
-  },
-  list: {
-    nested: {
-      listitem: "editor-nested-listitem"
-    },
-    ol: "editor-list-ol",
-    ul: "editor-list-ul",
-    listitem: "editor-listitem"
-  },
-  image: "editor-image",
-  link: "editor-link",
-  text: {
-    bold: "editor-text-bold",
-    italic: "editor-text-italic",
-    overflowed: "editor-text-overflowed",
-    hashtag: "editor-text-hashtag",
-    underline: "editor-text-underline",
-    strikethrough: "editor-text-strikethrough",
-    underlineStrikethrough: "editor-text-underlineStrikethrough",
-    code: "editor-text-code"
-  },
-  code: "editor-code",
-  codeHighlight: {
-    atrule: "editor-tokenAttr",
-    attr: "editor-tokenAttr",
-    boolean: "editor-tokenProperty",
-    builtin: "editor-tokenSelector",
-    cdata: "editor-tokenComment",
-    char: "editor-tokenSelector",
-    class: "editor-tokenFunction",
-    "class-name": "editor-tokenFunction",
-    comment: "editor-tokenComment",
-    constant: "editor-tokenProperty",
-    deleted: "editor-tokenProperty",
-    doctype: "editor-tokenComment",
-    entity: "editor-tokenOperator",
-    function: "editor-tokenFunction",
-    important: "editor-tokenVariable",
-    inserted: "editor-tokenSelector",
-    keyword: "editor-tokenAttr",
-    namespace: "editor-tokenVariable",
-    number: "editor-tokenProperty",
-    operator: "editor-tokenOperator",
-    prolog: "editor-tokenComment",
-    property: "editor-tokenProperty",
-    punctuation: "editor-tokenPunctuation",
-    regex: "editor-tokenVariable",
-    selector: "editor-tokenSelector",
-    string: "editor-tokenSelector",
-    symbol: "editor-tokenProperty",
-    tag: "editor-tokenProperty",
-    url: "editor-tokenOperator",
-    variable: "editor-tokenVariable"
-  }
-};
+export const theme = {
+  placeholder: "editor-placeholder",
+  paragraph: "editor-paragraph",
+  quote: "editor-quote",
+  heading: {
+    h1: "editor-heading-h1",
+    h2: "editor-heading-h2",
+    h3: "editor-heading-h3",
+    h4: "editor-heading-h4",
+    h5: "editor-heading-h5"
+  },
+  list: {
+    nested: {
+      listitem: "editor-nested-listitem"
+    },
+    ol: "editor-list-ol",
+    ul: "editor-list-ul",
+    listitem: "editor-listitem"
+  },
+  image: "editor-image",
+  link: "editor-link",
+  text: {
+    bold: "editor-text-bold",
+    italic: "editor-text-italic",
+    overflowed: "editor-text-overflowed",
+    hashtag: "editor-text-hashtag",
+    underline: "editor-text-underline",
+    strikethrough: "editor-text-strikethrough",
+    underlineStrikethrough: "editor-text-underlineStrikethrough",
+    code: "editor-text-code"
+  },
+  code: "editor-code",
+  codeHighlight: {
+    atrule: "editor-tokenAttr",
+    attr: "editor-tokenAttr",
+    boolean: "editor-tokenProperty",
+    builtin: "editor-tokenSelector",
+    cdata: "editor-tokenComment",
+    char: "editor-tokenSelector",
+    class: "editor-tokenFunction",
+    "class-name": "editor-tokenFunction",
+    comment: "editor-tokenComment",
+    constant: "editor-tokenProperty",
+    deleted: "editor-tokenProperty",
+    doctype: "editor-tokenComment",
+    entity: "editor-tokenOperator",
+    function: "editor-tokenFunction",
+    important: "editor-tokenVariable",
+    inserted: "editor-tokenSelector",
+    keyword: "editor-tokenAttr",
+    namespace: "editor-tokenVariable",
+    number: "editor-tokenProperty",
+    operator: "editor-tokenOperator",
+    prolog: "editor-tokenComment",
+    property: "editor-tokenProperty",
+    punctuation: "editor-tokenPunctuation",
+    regex: "editor-tokenVariable",
+    selector: "editor-tokenSelector",
+    string: "editor-tokenSelector",
+    symbol: "editor-tokenProperty",
+    tag: "editor-tokenProperty",
+    url: "editor-tokenOperator",
+    variable: "editor-tokenVariable"
+  }
+};

package/src/components/notes/AddNote.tsx

@@ -1,90 +1,90 @@
-import React, { useState, useEffect } from "react"
-import { ApiHelper, PersonHelper } from "../../helpers"
-import { MessageInterface, UserContextInterface } from "../../interfaces"
-import { Icon, Stack, TextField } from "@mui/material"
-import { ErrorMessages } from "../ErrorMessages"
-import { SmallButton } from "../SmallButton"
-
-type Props = {
-  messageId?: string;
-  onUpdate: () => void;
-  createConversation: () => Promise<string>;
-  conversationId?: string;
-  context: UserContextInterface
-};
-
-export function AddNote({ context, ...props }: Props) {
-  const [message, setMessage] = useState<MessageInterface>()
-  const [errors, setErrors] = React.useState<string[]>([]);
-  const [isSubmitting, setIsSubmitting] = React.useState(false);
-  const headerText = props.messageId ? "Edit note" : "Add a note"
-
-  useEffect(() => {
-    if (props.messageId) ApiHelper.get(`/messages/${props.messageId}`, "MessagingApi").then(n => setMessage(n));
-    else setMessage({ conversationId: props.conversationId, content: "" });
-    return () => {
-      setMessage(null);
-    };
-  }, [props.messageId, props.conversationId])
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
-    setErrors([]);
-    const m = { ...message } as MessageInterface;
-    m.content = e.target.value;
-    setMessage(m);
-  }
-
-  const validate = () => {
-    const result = [];
-    if (!message.content.trim()) result.push("Please enter a note.");
-    setErrors(result);
-    return result.length === 0;
-  }
-
-  async function handleSave() {
-    if (validate()) {
-      setIsSubmitting(true);
-      let cId = props.conversationId;
-      if (!cId) cId = await props.createConversation();
-
-      const m = { ...message };
-      m.conversationId = cId;
-      ApiHelper.post("/messages", [m], "MessagingApi")
-        .then(() => {
-          props.onUpdate();
-          const m = { ...message } as MessageInterface;
-          m.content = "";
-          setMessage(m);
-        })
-        .finally(() => { setIsSubmitting(false); });
-    }
-  };
-
-  async function deleteNote() {
-    await ApiHelper.delete(`/messages/${props.messageId}`, "MessagingApi")
-    props.onUpdate()
-  }
-
-  const deleteFunction = props.messageId ? deleteNote : null;
-
-  const image = PersonHelper.getPhotoUrl(context?.person)
-
-  return (
-    <>
-      <ErrorMessages errors={errors} />
-
-      <Stack direction="row" spacing={1.5} style={{ marginTop: 15 }} justifyContent="end">
-
-        {image ? <img src={image} alt="user" style={{ width: 60, height: 45, borderRadius: 5, marginLeft: 8 }} /> : <Icon>person</Icon>}
-        <Stack direction="column" spacing={2} style={{ width: "100%" }} justifyContent="end">
-          <div><b>{context?.person?.name?.display}</b></div>
-          <TextField fullWidth name="noteText" aria-label={headerText} placeholder="Add a note" multiline style={{ marginTop: 0, border: "none" }} variant="standard" onChange={handleChange} value={message?.content} />
-        </Stack>
-        <Stack direction="column" spacing={1} justifyContent="end">
-          <SmallButton icon="send" onClick={handleSave} />
-          {deleteFunction && <SmallButton icon="delete" onClick={deleteFunction} disabled={isSubmitting} />}
-        </Stack>
-      </Stack>
-    </>
-  );
-}
+import React, { useState, useEffect } from "react"
+import { ApiHelper, PersonHelper } from "../../helpers"
+import { MessageInterface, UserContextInterface } from "../../interfaces"
+import { Icon, Stack, TextField } from "@mui/material"
+import { ErrorMessages } from "../ErrorMessages"
+import { SmallButton } from "../SmallButton"
+
+type Props = {
+  messageId?: string;
+  onUpdate: () => void;
+  createConversation: () => Promise<string>;
+  conversationId?: string;
+  context: UserContextInterface
+};
+
+export function AddNote({ context, ...props }: Props) {
+  const [message, setMessage] = useState<MessageInterface>()
+  const [errors, setErrors] = React.useState<string[]>([]);
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const headerText = props.messageId ? "Edit note" : "Add a note"
+
+  useEffect(() => {
+    if (props.messageId) ApiHelper.get(`/messages/${props.messageId}`, "MessagingApi").then(n => setMessage(n));
+    else setMessage({ conversationId: props.conversationId, content: "" });
+    return () => {
+      setMessage(null);
+    };
+  }, [props.messageId, props.conversationId])
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
+    setErrors([]);
+    const m = { ...message } as MessageInterface;
+    m.content = e.target.value;
+    setMessage(m);
+  }
+
+  const validate = () => {
+    const result = [];
+    if (!message.content.trim()) result.push("Please enter a note.");
+    setErrors(result);
+    return result.length === 0;
+  }
+
+  async function handleSave() {
+    if (validate()) {
+      setIsSubmitting(true);
+      let cId = props.conversationId;
+      if (!cId) cId = await props.createConversation();
+
+      const m = { ...message };
+      m.conversationId = cId;
+      ApiHelper.post("/messages", [m], "MessagingApi")
+        .then(() => {
+          props.onUpdate();
+          const m = { ...message } as MessageInterface;
+          m.content = "";
+          setMessage(m);
+        })
+        .finally(() => { setIsSubmitting(false); });
+    }
+  };
+
+  async function deleteNote() {
+    await ApiHelper.delete(`/messages/${props.messageId}`, "MessagingApi")
+    props.onUpdate()
+  }
+
+  const deleteFunction = props.messageId ? deleteNote : null;
+
+  const image = PersonHelper.getPhotoUrl(context?.person)
+
+  return (
+    <>
+      <ErrorMessages errors={errors} />
+
+      <Stack direction="row" spacing={1.5} style={{ marginTop: 15 }} justifyContent="end">
+
+        {image ? <img src={image} alt="user" style={{ width: 60, height: 45, borderRadius: 5, marginLeft: 8 }} /> : <Icon>person</Icon>}
+        <Stack direction="column" spacing={2} style={{ width: "100%" }} justifyContent="end">
+          <div><b>{context?.person?.name?.display}</b></div>
+          <TextField fullWidth name="noteText" aria-label={headerText} placeholder="Add a note" multiline style={{ marginTop: 0, border: "none" }} variant="standard" onChange={handleChange} value={message?.content} />
+        </Stack>
+        <Stack direction="column" spacing={1} justifyContent="end">
+          <SmallButton icon="send" onClick={handleSave} />
+          {deleteFunction && <SmallButton icon="delete" onClick={deleteFunction} disabled={isSubmitting} />}
+        </Stack>
+      </Stack>
+    </>
+  );
+}

package/src/components/notes/Conversation.tsx

@@ -1,82 +1,82 @@
-import { Box, Paper, Stack } from "@mui/material";
-import React from "react";
-import { ApiHelper, ArrayHelper, DateHelper, PersonHelper } from "../../helpers";
-import { ConversationInterface, MessageInterface, UserContextInterface } from "../../interfaces";
-import { AddNote } from "./AddNote";
-import { Note } from "./Note";
-
-interface Props {
-  conversation: ConversationInterface;
-  context: UserContextInterface;
-  showCommentCount?: boolean;
-  noWrapper?: boolean;
-}
-
-export function Conversation(props: Props) {
-  const [conversation, setConversation] = React.useState<ConversationInterface>(null)
-  const [editMessageId, setEditMessageId] = React.useState(null)
-
-  const loadNotes = async () => {
-    const messages: MessageInterface[] = (conversation.id) ? await ApiHelper.get("/messages/conversation/" + conversation.id, "MessagingApi") : [];
-    if (messages.length > 0) {
-      const peopleIds = ArrayHelper.getIds(messages, "personId");
-      const people = await ApiHelper.get("/people/ids?ids=" + peopleIds.join(","), "MembershipApi");
-      messages.forEach(n => {
-        n.person = ArrayHelper.getOne(people, "id", n.personId);
-      })
-    }
-    const c = { ...conversation }
-    c.messages = messages;
-    setConversation(c);
-    setEditMessageId(null);
-  };
-
-  React.useEffect(() => { setConversation(props.conversation) }, [props.conversation]); //eslint-disable-line
-
-  if (conversation === null) return null;
-  else {
-    const message = conversation.messages[0];
-    const photoUrl = PersonHelper.getPhotoUrl(message.person);
-    let datePosted = new Date(message.timeUpdated || message.timeSent);
-    const displayDuration = DateHelper.getDisplayDuration(datePosted);
-
-    const isEdited = message.timeUpdated && message.timeUpdated !== message.timeSent && <>(edited)</>;
-    const contents = message.content?.split("\n");
-
-    const getNotes = () => {
-      let noteArray: React.ReactNode[] = [];
-      for (let i = 1; i < conversation.messages.length; i++) noteArray.push(<Note message={conversation.messages[i]} key={conversation.messages[i].id} showEditNote={setEditMessageId} />);
-      return noteArray;
-    }
-
-    let result = (<>
-      <div className="conversation">
-        <div className="postedBy">
-          <img src={photoUrl} alt="avatar" />
-        </div>
-        <Box sx={{ width: "100%" }} className="conversationContents">
-          <Stack direction="row" justifyContent="space-between">
-            <div>
-              <b>{message.person?.name?.display}</b> · <span className="text-grey">{displayDuration}{isEdited}</span>
-              {contents.map((c, i) => c ? <p key={i}>{c}</p> : <br />)}
-            </div>
-          </Stack>
-        </Box>
-      </div>
-      {props.showCommentCount && (
-        <div className="commentCount">
-          <div>{(conversation.postCount === 1) ? "1 comment" : conversation.postCount + " comments"}</div>
-          {(conversation.postCount > conversation.messages.length) ? <a href="about:blank" onClick={(e) => { e.preventDefault(); loadNotes(); }}>View all {conversation.postCount} comments</a> : <>&nbsp;</>}
-        </div>
-      )}
-      <div className="messages">
-        {getNotes()}
-        <AddNote context={props.context} conversationId={props.conversation.id} onUpdate={loadNotes} createConversation={async () => (props.conversation.id)} messageId={editMessageId} />
-      </div>
-    </>);
-
-
-    if (props.noWrapper) return result;
-    else return (<Paper sx={{ padding: 1, marginBottom: 2 }}>{result}</Paper>);
-  }
-};
+import { Box, Paper, Stack } from "@mui/material";
+import React from "react";
+import { ApiHelper, ArrayHelper, DateHelper, PersonHelper } from "../../helpers";
+import { ConversationInterface, MessageInterface, UserContextInterface } from "../../interfaces";
+import { AddNote } from "./AddNote";
+import { Note } from "./Note";
+
+interface Props {
+  conversation: ConversationInterface;
+  context: UserContextInterface;
+  showCommentCount?: boolean;
+  noWrapper?: boolean;
+}
+
+export function Conversation(props: Props) {
+  const [conversation, setConversation] = React.useState<ConversationInterface>(null)
+  const [editMessageId, setEditMessageId] = React.useState(null)
+
+  const loadNotes = async () => {
+    const messages: MessageInterface[] = (conversation.id) ? await ApiHelper.get("/messages/conversation/" + conversation.id, "MessagingApi") : [];
+    if (messages.length > 0) {
+      const peopleIds = ArrayHelper.getIds(messages, "personId");
+      const people = await ApiHelper.get("/people/ids?ids=" + peopleIds.join(","), "MembershipApi");
+      messages.forEach(n => {
+        n.person = ArrayHelper.getOne(people, "id", n.personId);
+      })
+    }
+    const c = { ...conversation }
+    c.messages = messages;
+    setConversation(c);
+    setEditMessageId(null);
+  };
+
+  React.useEffect(() => { setConversation(props.conversation) }, [props.conversation]); //eslint-disable-line
+
+  if (conversation === null) return null;
+  else {
+    const message = conversation.messages[0];
+    const photoUrl = PersonHelper.getPhotoUrl(message.person);
+    let datePosted = new Date(message.timeUpdated || message.timeSent);
+    const displayDuration = DateHelper.getDisplayDuration(datePosted);
+
+    const isEdited = message.timeUpdated && message.timeUpdated !== message.timeSent && <>(edited)</>;
+    const contents = message.content?.split("\n");
+
+    const getNotes = () => {
+      let noteArray: React.ReactNode[] = [];
+      for (let i = 1; i < conversation.messages.length; i++) noteArray.push(<Note message={conversation.messages[i]} key={conversation.messages[i].id} showEditNote={setEditMessageId} />);
+      return noteArray;
+    }
+
+    let result = (<>
+      <div className="conversation">
+        <div className="postedBy">
+          <img src={photoUrl} alt="avatar" />
+        </div>
+        <Box sx={{ width: "100%" }} className="conversationContents">
+          <Stack direction="row" justifyContent="space-between">
+            <div>
+              <b>{message.person?.name?.display}</b> · <span className="text-grey">{displayDuration}{isEdited}</span>
+              {contents.map((c, i) => c ? <p key={i}>{c}</p> : <br />)}
+            </div>
+          </Stack>
+        </Box>
+      </div>
+      {props.showCommentCount && (
+        <div className="commentCount">
+          <div>{(conversation.postCount === 1) ? "1 comment" : conversation.postCount + " comments"}</div>
+          {(conversation.postCount > conversation.messages.length) ? <a href="about:blank" onClick={(e) => { e.preventDefault(); loadNotes(); }}>View all {conversation.postCount} comments</a> : <>&nbsp;</>}
+        </div>
+      )}
+      <div className="messages">
+        {getNotes()}
+        <AddNote context={props.context} conversationId={props.conversation.id} onUpdate={loadNotes} createConversation={async () => (props.conversation.id)} messageId={editMessageId} />
+      </div>
+    </>);
+
+
+    if (props.noWrapper) return result;
+    else return (<Paper sx={{ padding: 1, marginBottom: 2 }}>{result}</Paper>);
+  }
+};