@peers-app/peers-ui 0.14.0 → 0.15.0

package/src/components/messages/avatar.tsx

@@ -1,11 +1,17 @@
-import React from 'react';
-import { usePromise } from '../../hooks';
-import { IUser, Users, Assistants, getUserTrustLevel, TrustLevel, getUserContext } from "@peers-app/peers-sdk";
+import {
+  Assistants,
+  getUserContext,
+  getUserTrustLevel,
+  type IUser,
+  TrustLevel,
+  Users,
+} from "@peers-app/peers-sdk";
+import { usePromise } from "../../hooks";
 
 interface IProps {
-  userId: string,
-  assistantId?: string, 
-  setUser?: (user: IUser) => any
+  userId: string;
+  assistantId?: string;
+  setUser?: (user: IUser) => void;
 }
 
 export const Avatar = (props: IProps) => {
@@ -18,57 +24,65 @@ export const Avatar = (props: IProps) => {
     }
     return user;
   });
-  const assistant = usePromise(async () => {
-    if (assistantId) {
-      return Assistants().get(assistantId, { useCache: true});
-    }
-  }, undefined, [assistantId]);
+  const assistant = usePromise(
+    async () => {
+      if (assistantId) {
+        return Assistants().get(assistantId, { useCache: true });
+      }
+    },
+    undefined,
+    [assistantId],
+  );
 
-  const trustLevel = usePromise(async () => {
-    if (userId) {
-      const userContext = await getUserContext();
-      return await getUserTrustLevel(userContext.userDataContext, userId);
-    }
-    return TrustLevel.Unknown;
-  }, TrustLevel.Unknown, [userId]);
+  const trustLevel = usePromise(
+    async () => {
+      if (userId) {
+        const userContext = await getUserContext();
+        return await getUserTrustLevel(userContext.userDataContext, userId);
+      }
+      return TrustLevel.Unknown;
+    },
+    TrustLevel.Unknown,
+    [userId],
+  );
 
-  let initials = "?"
+  let initials = "?";
 
-  let name = assistant?.name || user?.name;
+  const name = assistant?.name || user?.name;
   if (user) {
     if (!name) {
-      initials = "!"
+      initials = "!";
     } else {
-      const words = name.split(' ');
+      const words = name.split(" ");
       const first = words[0];
-      const last = words.length > 1 ? words[words.length-1] : words[0][1];
-      initials = first[0] + last[0];      
+      const last = words.length > 1 ? words[words.length - 1] : words[0][1];
+      initials = first[0] + last[0];
     }
   }
 
   // TODO if user.avatarImage then get and show that
 
-  let backgroundColor = name ? stringToHslColor(name) : stringToHslColor('', 100, 100);
+  let backgroundColor = name ? stringToHslColor(name) : stringToHslColor("", 100, 100);
   if (assistant) {
     // backgroundColor = stringToHslColor(name || '', 100, 100);
-    backgroundColor = stringToHslColor('', 0, 70);
+    backgroundColor = stringToHslColor("", 0, 70);
   }
 
   // Get trust level config
   const getTrustLevelConfig = (level: TrustLevel) => {
     const configs = [
-      { value: TrustLevel.Self, color: '#198754', icon: 'bi-shield-fill-check' },
-      { value: TrustLevel.Trusted, color: '#198754', icon: 'bi-shield-fill-check' },
-      { value: TrustLevel.Known, color: '#0d6efd', icon: 'bi-shield-fill-check' },
-      { value: TrustLevel.NewDevice, color: '#0dcaf0', icon: 'bi-shield-fill-plus' },
-      { value: TrustLevel.NewUser, color: '#0dcaf0', icon: 'bi-shield-fill-plus' },
-      { value: TrustLevel.Unknown, color: '#ffc107', icon: 'bi-shield-fill-exclamation' },
-      { value: TrustLevel.Untrusted, color: '#dc3545', icon: 'bi-shield-fill-exclamation' },
-      { value: TrustLevel.Malicious, color: '#dc3545', icon: 'bi-shield-fill-x' }
+      { value: TrustLevel.Self, color: "#198754", icon: "bi-shield-fill-check" },
+      { value: TrustLevel.Trusted, color: "#198754", icon: "bi-shield-fill-check" },
+      { value: TrustLevel.Known, color: "#0d6efd", icon: "bi-shield-fill-check" },
+      { value: TrustLevel.NewDevice, color: "#0dcaf0", icon: "bi-shield-fill-plus" },
+      { value: TrustLevel.NewUser, color: "#0dcaf0", icon: "bi-shield-fill-plus" },
+      { value: TrustLevel.Unknown, color: "#ffc107", icon: "bi-shield-fill-exclamation" },
+      { value: TrustLevel.Untrusted, color: "#dc3545", icon: "bi-shield-fill-exclamation" },
+      { value: TrustLevel.Malicious, color: "#dc3545", icon: "bi-shield-fill-x" },
     ];
 
     const sortedConfigs = configs.sort((a, b) => a.value - b.value);
-    let config = { color: '#6c757d', icon: 'bi-shield' };
+    let config = { color: "#6c757d", icon: "bi-shield" };
     for (const c of sortedConfigs) {
       if (level >= c.value) {
         config = c;
@@ -86,13 +100,13 @@ export const Avatar = (props: IProps) => {
       <div
         className="rounded-circle d-flex justify-content-center align-items-center fs-4 border"
         style={{
-          width: '40px',
-          height: '40px',
-          color: 'white',
+          width: "40px",
+          height: "40px",
+          color: "white",
           backgroundColor,
         }}
       >
-        <span style={{ fontSize: '15pt' }}>
+        <span style={{ fontSize: "15pt" }}>
           {assistant && <i className="bi bi-person-fill-gear"></i>}
           {!assistant && initials.toUpperCase()}
           {/* {assistant ? "ai" : initials.toUpperCase()} */}
@@ -103,19 +117,19 @@ export const Avatar = (props: IProps) => {
         <div
           className="position-absolute d-flex justify-content-center align-items-center"
           style={{
-            bottom: '-4px',
-            right: '0px',
-            width: '18px',
-            height: '18px',
+            bottom: "-4px",
+            right: "0px",
+            width: "18px",
+            height: "18px",
             // backgroundColor: 'white',
-            borderRadius: '50%',
+            borderRadius: "50%",
             // border: '1px solid #dee2e6',
           }}
         >
           <i
             className={trustConfig.icon}
             style={{
-              fontSize: '12px',
+              fontSize: "12px",
               color: trustConfig.color,
             }}
           ></i>
@@ -138,16 +152,20 @@ export const Avatar = (props: IProps) => {
       )} */}
     </div>
   );
-}
+};
 
-export function stringToHslColor(str: string = '', saturation: number = 50, lightness: number = 40) {
+export function stringToHslColor(
+  str: string = "",
+  saturation: number = 50,
+  lightness: number = 40,
+) {
   saturation = saturation % 100;
   lightness = lightness % 100;
-  var hash = 0;
-  for (var i = 0; i < str.length; i++) {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
     hash = str.charCodeAt(i) + ((hash << 5) - hash);
   }
 
-  var h = hash % 360;
-  return 'hsl('+h+', '+saturation+'%, '+lightness+'%)';
-}
+  const h = hash % 360;
+  return `hsl(${h}, ${saturation}%, ${lightness}%)`;
+}

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

@@ -1,22 +1,21 @@
-import { DataFilter, IMessage, Messages } from "@peers-app/peers-sdk";
-import { min, sortBy, uniqBy } from 'lodash';
-import React, { Fragment, useEffect, useState } from 'react';
-import InfiniteScroll from 'react-infinite-scroll-component';
-import { me } from '../../globals';
-import { LoadingIndicator } from '../loading-indicator';
-import { } from './message-compose';
-import { MessageDisplay } from './message-display';
+import { type DataFilter, type IMessage, Messages } from "@peers-app/peers-sdk";
+import { min, sortBy, uniqBy } from "lodash";
+import React, { Fragment, useCallback, useEffect, useState } from "react";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { me } from "../../globals";
+import { LoadingIndicator } from "../loading-indicator";
+import { MessageDisplay } from "./message-display";
 
-const windowHeight = () => window.innerHeight
+const windowHeight = () => window.innerHeight;
 
 interface IProps {
-  height: any
-  channelId: string
-  batchSize: number
+  height: number | string;
+  channelId: string;
+  batchSize: number;
   effects?: {
-    pushMessage: (message: IMessage) => any,
-  }
-  scrollChanged?: (isBottomInView: boolean) => any,
+    pushMessage: (message: IMessage) => void;
+  };
+  scrollChanged?: (isBottomInView: boolean) => void;
 }
 
 export const ChannelMessageList = (props: IProps) => {
@@ -25,19 +24,19 @@ export const ChannelMessageList = (props: IProps) => {
   const [messages, setMessages] = useState<IMessage[]>([]);
   const [allMessagesLoaded, setAllMessagesLoaded] = useState(false);
   const messagesEndRef = React.useRef<HTMLDivElement>(null);
-  
-  function scrollToBottom(behavior: 'instant' | 'smooth', delay = 100) {
+
+  const scrollToBottom = useCallback((behavior: "instant" | "smooth", delay = 100) => {
     setTimeout(() => {
       messagesEndRef.current?.scrollIntoView({ behavior });
-    }, delay);    
-  }
+    }, delay);
+  }, []);
 
   useEffect(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
         props?.scrollChanged?.(entry.isIntersecting);
       },
-      { threshold: 1.0 }
+      { threshold: 1.0 },
     );
 
     if (messagesEndRef.current) {
@@ -49,78 +48,84 @@ export const ChannelMessageList = (props: IProps) => {
         observer.unobserve(messagesEndRef.current);
       }
     };
-  }, []);
+  }, [props?.scrollChanged]);
 
-  function prependItems() {
+  const prependItems = useCallback(() => {
     const lastMessage = messages[messages.length - 1];
-    getMessages(batchSize, channelId, lastMessage)
-      .then(fetchedMessages => {
-        if (fetchedMessages.length === 0) {
-          setAllMessagesLoaded(true);
-        } else {
-          const _messages = sortBy([...messages, ...fetchedMessages], 'createdAt').reverse()
-          setMessages(uniqBy(_messages, 'messageId'));
-        }
-      })
+    getMessages(batchSize, channelId, lastMessage).then((fetchedMessages) => {
+      if (fetchedMessages.length === 0) {
+        setAllMessagesLoaded(true);
+      } else {
+        const _messages = sortBy([...messages, ...fetchedMessages], "createdAt").reverse();
+        setMessages(uniqBy(_messages, "messageId"));
+      }
+    });
     return false;
-  }
+  }, [messages, batchSize, channelId]);
 
   const minHeightOfMessage = 20;
   useEffect(() => {
-    if (!allMessagesLoaded && (!messages.length || messages.length * minHeightOfMessage < windowHeight())) {
+    if (
+      !allMessagesLoaded &&
+      (!messages.length || messages.length * minHeightOfMessage < windowHeight())
+    ) {
       prependItems();
     }
-  }, [channelId, messages]);
+  }, [messages, allMessagesLoaded, prependItems]);
 
-
-  const [effects] = useState(() => props.effects || ({} as IProps['effects'])!);
+  // Shared-ref pattern: parent (ChannelMessages) passes its own `effects` object; we mutate
+  // `pushMessage` on that SAME reference so the parent's sendMessage can invoke it. Do NOT
+  // spread/clone (`{...props.effects}`) — it breaks the shared reference.
+  // 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.length > batchSize && min(messages.map(m => m.createdAt))! > newMessage.createdAt)
-      || messages.find(m => m.messageId === newMessage.messageId)
+      (messages.length > batchSize &&
+        // biome-ignore lint/style/noNonNullAssertion: guarded by `messages.length > batchSize` — messages is non-empty so `min(...)` is defined.
+        min(messages.map((m) => m.createdAt))! > newMessage.createdAt) ||
+      messages.find((m) => m.messageId === newMessage.messageId)
     ) {
       return;
     }
-    let _messages = sortBy([newMessage, ...messages], 'createdAt').reverse();
+    const _messages = sortBy([newMessage, ...messages], "createdAt").reverse();
     setMessages(_messages);
     if (newMessage.userId === me.userId && !newMessage.assistantId) {
-      scrollToBottom('instant', 1);
+      scrollToBottom("instant", 1);
     } else {
-      scrollToBottom('smooth');
-    }    
-  }
+      scrollToBottom("smooth");
+    }
+  };
 
   useEffect(() => {
-    const sub = Messages().dataChanged.subscribe(evt => {
+    const sub = Messages().dataChanged.subscribe((evt) => {
       const message: IMessage = evt.dataObject;
       if (message.channelId !== channelId || message.messageParentId) {
         return;
       }
-      if (evt.op === 'insert') {
+      if (evt.op === "insert") {
         effects.pushMessage(message);
-      }      
+      }
     });
     return () => {
       sub.unsubscribe();
-    }
-  }, [channelId]);
-
+    };
+  }, [channelId, effects.pushMessage]);
 
   return (
     <div
       id="scrollableDiv"
       style={{
         height,
-        overflow: 'auto',
-        display: 'flex',
-        flexDirection: 'column-reverse',
+        overflow: "auto",
+        display: "flex",
+        flexDirection: "column-reverse",
         // marginBottom: '70px',
       }}
     >
       <InfiniteScroll
         dataLength={messages.length}
         next={prependItems}
-        style={{ display: 'flex', flexDirection: 'column-reverse', overflow: 'hidden' }}
+        style={{ display: "flex", flexDirection: "column-reverse", overflow: "hidden" }}
         inverse={true}
         hasMore={!allMessagesLoaded}
         loader={<LoadingIndicator />}
@@ -129,9 +134,7 @@ export const ChannelMessageList = (props: IProps) => {
           <Fragment>
             <div className="d-flex justify-content-center">
               {messages[0] && (
-                <div>
-                  {(new Date(messages[messages.length - 1].createdAt).toLocaleDateString())}
-                </div>
+                <div>{new Date(messages[messages.length - 1].createdAt).toLocaleDateString()}</div>
               )}
             </div>
             <div className="d-flex justify-content-center">
@@ -145,26 +148,35 @@ export const ChannelMessageList = (props: IProps) => {
         {/* <div style={{ marginBottom: '10px' }}></div> */}
         <div ref={messagesEndRef} />
         {messages.map((message, index) => {
-          return <MessageDisplay key={message.messageId} message={message} messageAbove={messages[index + 1]} index={index} />
+          return (
+            <MessageDisplay
+              key={message.messageId}
+              message={message}
+              messageAbove={messages[index + 1]}
+              index={index}
+            />
+          );
         })}
       </InfiniteScroll>
     </div>
-  )
-}
-
-export async function getMessages(batchSize: number, channelId: string, lastMessage: IMessage | undefined): Promise<IMessage[]> {
-  const query: DataFilter<IMessage> = { 
+  );
+};
+
+export async function getMessages(
+  batchSize: number,
+  channelId: string,
+  lastMessage: IMessage | undefined,
+): Promise<IMessage[]> {
+  const query: DataFilter<IMessage> = {
     channelId,
     messageParentId: null,
   };
   if (lastMessage) {
     query.messageId = { $lt: lastMessage.messageId };
   }
-  const cursor = await Messages().cursor(
-    query,
-    {
-      sortBy: ['-createdAt', '-messageId'],
-    });
+  const cursor = await Messages().cursor(query, {
+    sortBy: ["-createdAt", "-messageId"],
+  });
 
   const messages: IMessage[] = [];
   for await (const message of cursor) {
@@ -174,4 +186,4 @@ export async function getMessages(batchSize: number, channelId: string, lastMess
     }
   }
   return messages;
-}
+}

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

@@ -1,10 +1,10 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { getUserContext, IMessage, Messages } from "@peers-app/peers-sdk";
-import { openThread } from '../../globals';
-import { ChannelMessageList } from './channel-message-list';
-import { MessageCompose } from './message-compose';
-import { registerInternalPeersUI } from '../../ui-router/ui-loader';
-import { useObservableState, usePromise } from '../../hooks';
+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;
@@ -12,26 +12,28 @@ interface IProps {
 
 export const ChannelMessages = (props: IProps) => {
   const messagesEndRef = useRef<HTMLDivElement>(null);
-  const [effects] = useState<{ pushMessage: (message: IMessage) => any }>(() => ({} as any));
+  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() || '');
+      currentlyActiveGroupId(userContext.currentlyActiveGroupId() || "");
       const sub = userContext.currentlyActiveGroupId.subscribe(() => {
-        currentlyActiveGroupId(userContext?.currentlyActiveGroupId() || '');
+        currentlyActiveGroupId(userContext?.currentlyActiveGroupId() || "");
       });
       return () => sub.dispose();
     }
-  }, [userContext]);
+  }, [userContext, currentlyActiveGroupId]);
 
   if (!userContext) {
     return <div>Loading...</div>;
   }
-  
-  let channelId = props.channelId || currentlyActiveGroupId();
+
+  const channelId = props.channelId || currentlyActiveGroupId();
 
   // const scrollToBottom = (behavior: 'instant' | 'smooth' = 'instant') => {
   //   setTimeout(() => messagesEndRef.current?.scrollIntoView({ behavior }), 500);
@@ -39,10 +41,12 @@ export const ChannelMessages = (props: IProps) => {
 
   const sendMessage = (userMessage: IMessage) => {
     effects.pushMessage(userMessage);
-    Messages().save(userMessage).then(message => {
-      openThread(message.messageId);
-    });
-  };  
+    Messages()
+      .save(userMessage)
+      .then((message) => {
+        openThread(message.messageId);
+      });
+  };
 
   return (
     <div
@@ -50,7 +54,7 @@ export const ChannelMessages = (props: IProps) => {
       className="d-flex flex-column flex-col-reverse"
       style={{
         // height: '100vh',
-        height: 'calc(100vh - 50px)',
+        height: "calc(100vh - 50px)",
         // marginTop: '50px',
       }}
     >
@@ -58,34 +62,31 @@ export const ChannelMessages = (props: IProps) => {
         batchSize={30}
         channelId={channelId}
         // height="calc(100vh - 50px)"
-        height='100vh'
+        height="100vh"
         effects={effects}
         scrollChanged={setScrolledToBottom}
       />
       <div ref={messagesEndRef} />
 
-      <div className='p-2 pt-1'
+      <div
+        className="p-2 pt-1"
         style={{
-          boxShadow: scrolledToBottom ? '' : `0 -10px 11px -10px rgba(0, 0, 0, 0.9)`
+          boxShadow: scrolledToBottom ? "" : `0 -10px 11px -10px rgba(0, 0, 0, 0.9)`,
         }}
       >
-        <MessageCompose 
-          channelId={channelId}
-          onMessageSubmit={sendMessage}
-        />
+        <MessageCompose channelId={channelId} onMessageSubmit={sendMessage} />
       </div>
-
     </div>
   );
-}
+};
 
 registerInternalPeersUI({
-  peersUIId: '00m5fsd8d4jma58fgvyr1riny',
+  peersUIId: "00m5fsd8d4jma58fgvyr1riny",
   component: ChannelMessages,
   routes: [
-    { 
-      isMatch: (props, context) => context.path === 'threads' || context.path === '',
-      uiCategory: 'screen'
+    {
+      isMatch: (_props, context) => context.path === "threads" || context.path === "",
+      uiCategory: "screen",
     },
-  ]
-})
+  ],
+});