@peers-app/peers-ui 0.27.2 → 0.27.4

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

@@ -1,92 +0,0 @@
-import { getUserContext, type IMessage, Messages } from "@peers-app/peers-sdk";
-import { useEffect, useRef, useState } from "react";
-import { openThread } from "../../globals";
-import { useObservableState, usePromise } from "../../hooks";
-import { registerInternalPeersUI } from "../../ui-router/ui-loader";
-import { ChannelMessageList } from "./channel-message-list";
-import { MessageCompose } from "./message-compose";
-
-interface IProps {
-  channelId?: string;
-}
-
-export const ChannelMessages = (props: IProps) => {
-  const messagesEndRef = useRef<HTMLDivElement>(null);
-  const [effects] = useState<{ pushMessage: (message: IMessage) => void }>(
-    () => ({}) as { pushMessage: (message: IMessage) => void },
-  );
-  const [scrolledToBottom, setScrolledToBottom] = useState(true);
-  const currentlyActiveGroupId = useObservableState("");
-  const userContext = usePromise(() => getUserContext());
-
-  useEffect(() => {
-    if (userContext) {
-      currentlyActiveGroupId(userContext.currentlyActiveGroupId() || "");
-      const sub = userContext.currentlyActiveGroupId.subscribe(() => {
-        currentlyActiveGroupId(userContext?.currentlyActiveGroupId() || "");
-      });
-      return () => sub.dispose();
-    }
-  }, [userContext, currentlyActiveGroupId]);
-
-  if (!userContext) {
-    return <div>Loading...</div>;
-  }
-
-  const channelId = props.channelId || currentlyActiveGroupId();
-
-  // 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);
-      });
-  };
-
-  return (
-    <div
-      key={channelId}
-      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

@@ -1,192 +0,0 @@
-import {
-  deviceVar,
-  type IFile,
-  type IMessage,
-  newid,
-  type Observable,
-  observable,
-  type PersistentVar,
-  type Subscription,
-  userVar,
-} from "@peers-app/peers-sdk";
-import React, { useCallback, useEffect, useState } from "react";
-import { me } from "../../globals";
-import { useObservable } from "../../hooks";
-import { type 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]) {
-    const pVar = userVar<string>(contentPersistenceName, { defaultValue: "" });
-    pVarCache[contentPersistenceName] = pVar;
-
-    // Auto-delete the pvar when content is cleared (message sent or editor cleared)
-    // This ensures drafts don't accumulate in the database
-    pVar.loadingPromise.then(() => {
-      pVar.subscribe((value) => {
-        if (!value) {
-          pVar.delete();
-        }
-      });
-    });
-  }
-  return pVarCache[contentPersistenceName];
-}
-
-interface IProps {
-  channelId: string;
-  threadId?: string;
-  onMessageSubmit: (message: IMessage, files?: IFile[]) => void | Promise<void>;
-  initialMessage?: string;
-}
-
-export const MessageCompose = (props: IProps) => {
-  const { channelId, threadId, onMessageSubmit, initialMessage } = props;
-
-  const [contentObs] = useState(() => observable(""));
-  const [mdEffects] = useState<IEditorEffects>(() => ({}));
-  const composeBottomRef = React.useRef<HTMLDivElement>(null);
-
-  const scrollToBottom = useCallback(() => {
-    if (composeBottomRef?.current) {
-      composeBottomRef.current.scrollIntoView({ behavior: "instant" });
-    }
-  }, []);
-
-  useEffect(() => {
-    let disposed = false;
-    let sub: Subscription | undefined;
-    getContentPersistenceValue(channelId, threadId).loadingPromise.then((pVar) => {
-      if (!disposed) {
-        const persistedValue = pVar() ?? "";
-        contentObs(initialMessage ?? persistedValue);
-        sub = contentObs.subscribe(() => pVar(contentObs()));
-        setTimeout(() => scrollToBottom(), 100);
-      }
-    });
-    return () => {
-      disposed = true;
-      sub?.dispose();
-    };
-  }, [channelId, threadId, contentObs, initialMessage, scrollToBottom]);
-
-  useEffect(() => {
-    const sub = contentObs.subscribe(() => scrollToBottom());
-    return () => sub.dispose();
-  }, [contentObs, scrollToBottom]);
-
-  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: IEditorEffects;
-}) => {
-  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: React.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() {
-  const nav = navigator as Navigator & { userAgentData?: { mobile?: boolean } };
-  if (nav.userAgentData?.mobile) {
-    return true;
-  }
-  let check = false;
-  const legacyWindow = window as Window & { opera?: string };
-  ((a: string) => {
-    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 || legacyWindow.opera || "");
-  return check;
-}

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

@@ -1,231 +0,0 @@
-// import { FileListDisplay } from './file-list-display';
-import {
-  Assistants,
-  type IMessage,
-  type IUser,
-  Messages,
-  type Observable,
-  observable,
-} from "@peers-app/peers-sdk";
-import moment from "moment";
-import { useEffect, useState } from "react";
-import { openThread } from "../../globals";
-import { useObservable, usePromise } from "../../hooks";
-import { MarkdownWithMentions } from "../markdown-with-mentions";
-import { MessageLogs } from "../message-logs/message-logs";
-import { Avatar } from "./avatar";
-
-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);
-
-  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 }), 0, [
-    messageId,
-    messageChangedTime,
-  ]);
-  const replyCount = countReplies ?? 0;
-
-  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, messageId]);
-
-  // calculate short time string
-  const messageDate = new Date(message.createdAt);
-  let hour = 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() ||
-    replyCount > 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;
-  }
-
-  const 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 && replyCount > 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}
-              >
-                {replyCount === 1 ? "1 reply" : `${replyCount} 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>
-      )}
-    </>
-  );
-};

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

@@ -1,135 +0,0 @@
-import { type IMessage, Messages } from "@peers-app/peers-sdk";
-import { sortBy } from "lodash";
-import React, { useCallback, useEffect, useState } from "react";
-import { me } from "../../globals";
-import { usePromise } from "../../hooks";
-import { MessageCompose } from "./message-compose";
-import { MessageDisplay } from "./message-display";
-
-interface IProps {
-  threadId: string;
-  effects?: {
-    pushMessage: (message: IMessage) => void;
-  };
-  scrollChanged?: (isBottomInView: boolean) => void;
-}
-
-export const ThreadMessageList = (props: IProps) => {
-  const { threadId: messageParentId } = props;
-
-  const [messages, setMessages] = useState<IMessage[]>([]);
-  const messagesEndRef = React.useRef<HTMLDivElement>(null);
-  const messageParent = usePromise(() => Messages().get(messageParentId), undefined, [
-    messageParentId,
-  ]);
-
-  const scrollToBottom = useCallback((behavior: "instant" | "smooth", delay = 100) => {
-    setTimeout(() => {
-      messagesEndRef.current?.scrollIntoView({ behavior });
-    }, delay);
-  }, []);
-
-  const loadMessages = useCallback(async () => {
-    const loaded = await Messages().list(
-      { messageParentId },
-      {
-        sortBy: ["createdAt", "messageId"],
-      },
-    );
-    setMessages(loaded);
-    scrollToBottom("instant", 1);
-  }, [messageParentId, scrollToBottom]);
-
-  // first load
-  useEffect(() => {
-    loadMessages();
-  }, [loadMessages]);
-
-  // reload when messages change
-  useEffect(() => {
-    // subscribe to message changes
-    const sub = Messages().dataChanged.subscribe((evt) => {
-      if (
-        evt.dataObject.messageParentId === messageParentId ||
-        evt.dataObject.messageId === messageParentId
-      ) {
-        loadMessages();
-      }
-    });
-    return () => {
-      sub.unsubscribe();
-    };
-  }, [messageParentId, loadMessages]);
-
-  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);
-      }
-    };
-  }, [props?.scrollChanged]);
-
-  // Shared-ref pattern: if a parent passes `effects`, we mutate `pushMessage` on that SAME
-  // reference so the parent can invoke it. Do NOT spread/clone (`{...props.effects}`).
-  // biome-ignore lint/style/noNonNullAssertion: initial `{}` is populated on this same render; the `!` placates TS for the optional `IProps["effects"]` shape.
-  const [effects] = useState(() => props.effects || ({} as IProps["effects"])!);
-  effects.pushMessage = (newMessage: IMessage) => {
-    if (messages.find((m) => m.messageId === newMessage.messageId)) {
-      return;
-    }
-    const _messages = sortBy([newMessage, ...messages], "createdAt");
-    setMessages(_messages);
-    if (newMessage.userId === me.userId && !newMessage.assistantId) {
-      scrollToBottom("instant", 1);
-    } else {
-      scrollToBottom("smooth");
-    }
-  };
-
-  const sendMessage = (userMessage: IMessage) => {
-    effects.pushMessage(userMessage);
-    Messages().save(userMessage);
-  };
-
-  if (!messageParent) {
-    return false;
-  }
-
-  return (
-    <>
-      {messageParent && <MessageDisplay message={messageParent} isThreadParent={true} />}
-      <hr />
-
-      {messages.map((message, index) => {
-        return (
-          <MessageDisplay
-            key={message.messageId}
-            message={message}
-            messageAbove={messages[index - 1]}
-          />
-        );
-      })}
-
-      <div className="p-2">
-        <MessageCompose
-          channelId={messageParent.channelId ?? ""}
-          threadId={messageParentId}
-          onMessageSubmit={sendMessage}
-        />
-      </div>
-
-      <div ref={messagesEndRef} />
-    </>
-  );
-};