feat: Add asGuest prop

Author: Asha20

lib/hooks.tsx

@@ -40,6 +40,23 @@ export function useSetter<
   }, [setter, box, value]);
 }
 
+/**
+ * Calls method `setter` on `box` with the arguments `args`, iff `args` is set &
+ * deeply different from before (and the box is alive)
+ */
+export function useSpreadSetter<
+  V extends any[],
+  S extends string,
+  T extends TalkObject & Record<S, (...args: V) => any>,
+>(box: T | undefined, args: V | undefined, setter: S) {
+  args = usePreviousIfDeeplyEqual(args);
+  useEffect(() => {
+    if (args !== undefined && box?.isAlive) {
+      box[setter](...args);
+    }
+  }, [setter, box, args]);
+}
+
 /**
  * Calls `box.select` with either `syncConversation` or `conversationId`
  * depending on which is set. If neither is set, which is valid for the Inbox,
@@ -50,14 +67,20 @@ export function useConversation<T extends Talk.UIBox>(
   box: T | undefined,
   syncConversation: ConversationProps["syncConversation"],
   conversationId: ConversationProps["conversationId"],
+  asGuest: boolean | undefined,
 ) {
   const conversation = useMemo(() => {
     if (typeof syncConversation === "function") {
       return session?.isAlive ? syncConversation(session) : undefined;
     }
     return syncConversation ?? conversationId;
   }, [session, syncConversation, conversationId]);
-  useSetter(box, conversation, "select");
+
+  const args = (
+    conversation !== undefined ? [conversation, { asGuest }] : []
+  ) as any;
+
+  useSpreadSetter(box, args, "select");
 }
 
 // subset of Session to help TypeScript pick the right overloads

lib/types.ts

@@ -43,7 +43,7 @@ export type ConversationProps =
     };
 
 export type UIBoxProps<T extends Talk.UIBox> = UIBoxEvents<T> &
-  ConversationProps;
+  ConversationProps & { asGuest?: boolean };
 
 declare const testChatboxEvents: UIBoxEvents<Talk.Chatbox>;
 declare const testInboxEvents: UIBoxEvents<Talk.Inbox>;

lib/ui/Chatbox.tsx

@@ -35,6 +35,7 @@ function ActiveChatbox(props: ChatboxProps & { session: Talk.Session }) {
     session,
     conversationId,
     syncConversation,
+    asGuest,
     chatboxRef,
     style,
     className,
@@ -50,7 +51,7 @@ function ActiveChatbox(props: ChatboxProps & { session: Talk.Session }) {
   useSetter(box, messageFilter, "setMessageFilter");
   useSetter(box, presence, "setPresence");
   useSetter(box, highlightedWords, "setHighlightedWords");
-  useConversation(session, box, syncConversation, conversationId);
+  useConversation(session, box, syncConversation, conversationId, asGuest);
 
   return (
     <MountedBox

lib/ui/Inbox.tsx

@@ -35,6 +35,7 @@ function ActiveInbox(props: InboxProps & { session: Talk.Session }) {
     session,
     conversationId,
     syncConversation,
+    asGuest,
     inboxRef,
     style,
     className,
@@ -56,7 +57,7 @@ function ActiveInbox(props: InboxProps & { session: Talk.Session }) {
   useSetter(box, feedFilter, "setFeedFilter");
   useSetter(box, presence, "setPresence");
   useSetter(box, highlightedWords, "setHighlightedWords");
-  useConversation(session, box, syncConversation, conversationId);
+  useConversation(session, box, syncConversation, conversationId, asGuest);
 
   return (
     <MountedBox

lib/ui/Popup.tsx

@@ -26,6 +26,7 @@ function ActivePopup(props: PopupProps & { session: Talk.Session }) {
     session,
     conversationId,
     syncConversation,
+    asGuest,
     popupRef,
     ...optionsAndEvents
   } = props;
@@ -38,7 +39,7 @@ function ActivePopup(props: PopupProps & { session: Talk.Session }) {
   useSetter(box, messageFilter, "setMessageFilter");
   useSetter(box, presence, "setPresence");
   useSetter(box, highlightedWords, "setHighlightedWords");
-  useConversation(session, box, syncConversation, conversationId);
+  useConversation(session, box, syncConversation, conversationId, asGuest);
   useMountBox(box, undefined);
 
   return <EventListeners target={box} handlers={events} />;