@peers-app/peers-ui 0.14.0 → 0.15.0

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

@@ -1,17 +1,17 @@
-import { sortBy } from 'lodash';
-import React, { useEffect, useState } from 'react';
-import { IMessage, Messages } from "@peers-app/peers-sdk";
-import { me } from '../../globals';
-import { MessageCompose } from './message-compose';
-import { MessageDisplay } from './message-display';
-import { usePromise } from '../../hooks';
+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
+  threadId: string;
   effects?: {
-    pushMessage: (message: IMessage) => any,
-  }
-  scrollChanged?: (isBottomInView: boolean) => any,
+    pushMessage: (message: IMessage) => void;
+  };
+  scrollChanged?: (isBottomInView: boolean) => void;
 }
 
 export const ThreadMessageList = (props: IProps) => {
@@ -19,50 +19,54 @@ export const ThreadMessageList = (props: IProps) => {
 
   const [messages, setMessages] = useState<IMessage[]>([]);
   const messagesEndRef = React.useRef<HTMLDivElement>(null);
-  const messageParent = usePromise(() => Messages().get(messageParentId), undefined, [messageParentId]);
+  const messageParent = usePromise(() => Messages().get(messageParentId), undefined, [
+    messageParentId,
+  ]);
 
-  function scrollToBottom(behavior: 'instant' | 'smooth', delay = 100) {
+  const scrollToBottom = useCallback((behavior: "instant" | "smooth", delay = 100) => {
     setTimeout(() => {
       messagesEndRef.current?.scrollIntoView({ behavior });
     }, delay);
-  }
+  }, []);
 
-  async function loadMessages() {
-    const messages = await Messages().list(
+  const loadMessages = useCallback(async () => {
+    const loaded = await Messages().list(
       { messageParentId },
       {
-        sortBy: ['createdAt', 'messageId'],
-      }
+        sortBy: ["createdAt", "messageId"],
+      },
     );
-    setMessages(messages);
-    scrollToBottom('instant', 1);
-  }
+    setMessages(loaded);
+    scrollToBottom("instant", 1);
+  }, [messageParentId, scrollToBottom]);
 
   // first load
   useEffect(() => {
     loadMessages();
-  }, [messageParentId]);
+  }, [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) {
+      if (
+        evt.dataObject.messageParentId === messageParentId ||
+        evt.dataObject.messageId === messageParentId
+      ) {
         loadMessages();
       }
     });
     return () => {
       sub.unsubscribe();
-    }
-  }, [messageParentId]);
-
+    };
+  }, [messageParentId, loadMessages]);
 
   useEffect(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
         props?.scrollChanged?.(entry.isIntersecting);
       },
-      { threshold: 1.0 }
+      { threshold: 1.0 },
     );
 
     if (messagesEndRef.current) {
@@ -74,23 +78,24 @@ export const ThreadMessageList = (props: IProps) => {
         observer.unobserve(messagesEndRef.current);
       }
     };
-  }, []);
+  }, [props?.scrollChanged]);
 
-
-  const [effects] = useState(() => props.effects || ({} as IProps['effects'])!);
+  // 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)) {
+    if (messages.find((m) => m.messageId === newMessage.messageId)) {
       return;
     }
-    let _messages = sortBy([newMessage, ...messages], 'createdAt');
+    const _messages = sortBy([newMessage, ...messages], "createdAt");
     setMessages(_messages);
     if (newMessage.userId === me.userId && !newMessage.assistantId) {
-      scrollToBottom('instant', 1);
+      scrollToBottom("instant", 1);
     } else {
-      scrollToBottom('smooth');
+      scrollToBottom("smooth");
     }
-  }
-
+  };
 
   const sendMessage = (userMessage: IMessage) => {
     effects.pushMessage(userMessage);
@@ -103,18 +108,22 @@ export const ThreadMessageList = (props: IProps) => {
 
   return (
     <>
-      {messageParent &&
-        <MessageDisplay message={messageParent} isThreadParent={true} />
-      }
+      {messageParent && <MessageDisplay message={messageParent} isThreadParent={true} />}
       <hr />
 
       {messages.map((message, index) => {
-        return <MessageDisplay key={message.messageId} message={message} messageAbove={messages[index - 1]} />
+        return (
+          <MessageDisplay
+            key={message.messageId}
+            message={message}
+            messageAbove={messages[index - 1]}
+          />
+        );
       })}
 
-      <div className='p-2'>
+      <div className="p-2">
         <MessageCompose
-          channelId={messageParent.channelId!}
+          channelId={messageParent.channelId ?? ""}
           threadId={messageParentId}
           onMessageSubmit={sendMessage}
         />
@@ -122,5 +131,5 @@ export const ThreadMessageList = (props: IProps) => {
 
       <div ref={messagesEndRef} />
     </>
-  )
-}
+  );
+};

package/src/components/router.tsx

@@ -1,27 +1,26 @@
-import React from "react";
 import * as globals from "../globals";
+import { useObservable } from "../hooks";
 import { AssistantDetails } from "../screens/assistants/assistant-details";
 import { AssistantList } from "../screens/assistants/assistant-list";
+import { PackageDetails } from "../screens/packages/package-details";
+import { PackageList } from "../screens/packages/package-list";
+import { PackageNewLocal } from "../screens/packages/package-new-local";
+import { PeerTypeDetails } from "../screens/peer-types/peer-type-details";
+import { PeerTypeLists } from "../screens/peer-types/peer-type-list";
+import { GlobalSearch } from "../screens/search/global-search";
+import { SettingsPage } from "../screens/settings/settings-page";
 // import { TaskDetails } from "../screens/tasks/task-details";
 // import { TaskList } from "../screens/tasks/task-list";
 import { ToolDetails } from "../screens/tools/tool-details";
 import { ToolList } from "../screens/tools/tool-list";
 import { ToolTestDetails } from "../screens/tools/tool-test-details";
+import { VariableDetails } from "../screens/variables/variable-details";
+import { VariableList } from "../screens/variables/variable-list";
 import { WorkflowDetails } from "../screens/workflows/workflow-details";
 import { WorkflowList } from "../screens/workflows/workflow-list";
-import { ChannelMessages } from "./messages/channel-view";
-import { SettingsPage } from "../screens/settings/settings-page";
-import { PackageDetails } from "../screens/packages/package-details";
-import { PackageList } from "../screens/packages/package-list";
-import { PackageNewLocal } from "../screens/packages/package-new-local";
-import { VariableList } from "../screens/variables/variable-list";
-import { VariableDetails } from "../screens/variables/variable-details";
-import { PeerTypeLists } from "../screens/peer-types/peer-type-list";
-import { PeerTypeDetails } from "../screens/peer-types/peer-type-details";
 import { UIRouter } from "../ui-router/ui-loader";
-import { useObservable } from "../hooks";
+import { ChannelMessages } from "./messages/channel-view";
 import { ThreadMessageList } from "./messages/thread-message-list";
-import { GlobalSearch } from "../screens/search/global-search";
 import "../screens/console-logs/console-logs-list";
 import "../screens/groups";
 import "../screens/contacts";
@@ -29,53 +28,54 @@ import "../screens/join-group";
 import "../screens/network-viewer";
 import "../screens/data-explorer";
 
-
 export function Router({ path: providedPath }: { path?: string } = {}) {
+  // Hooks must run unconditionally (same order every render)
+  const [globalPath] = useObservable(globals.mainContentPath);
+
   try {
     // Use provided path or fall back to global mainContentPath
-    const [globalPath] = useObservable(globals.mainContentPath);
     let path = providedPath ?? globalPath;
     const originalPath = path;
     path = path.toLowerCase().trim();
-    path = path.split('?')[0]; // remove query string
+    path = path.split("?")[0]; // remove query string
 
     // remove leading '/'
-    if (path.startsWith('/')) {
+    if (path.startsWith("/")) {
       path = path.substring(1);
     }
     // remove trailing '/'
-    if (path.endsWith('/')) {
+    if (path.endsWith("/")) {
       path = path.substring(0, path.length - 1);
     }
 
-    if (path === 'search') {
+    if (path === "search") {
       return <GlobalSearch />;
     }
-    if (path === 'settings' || path === 'profile') {
+    if (path === "settings" || path === "profile") {
       return <SettingsPage />;
     }
-    if (path === 'threads' || path === '') {
+    if (path === "threads" || path === "") {
       return <ChannelMessages />;
     }
 
-    const ui = UIRouter({ path, props: {}, uiCategory: 'screen' });
+    const ui = UIRouter({ path, props: {}, uiCategory: "screen" });
     if (ui) {
       return ui;
     }
 
     if (path.match(/^channel\//)) {
-      const parts = path.split('/');
+      const parts = path.split("/");
       parts.shift();
       const channelId = parts[0];
       // todo add additional params as props if they exist
       return <ChannelMessages channelId={channelId} />;
     }
 
-    if (path === 'assistants') {
+    if (path === "assistants") {
       return <AssistantList />;
     }
     if (path.match(/^assistants\//)) {
-      const parts = path.split('/');
+      const parts = path.split("/");
       parts.shift();
       const id = parts[0];
       return <AssistantDetails assistantId={id} />;
@@ -91,85 +91,84 @@ export function Router({ path: providedPath }: { path?: string } = {}) {
     //   return <TaskDetails taskId={taskId} />;
     // }
 
-    if (path === 'workflows') {
+    if (path === "workflows") {
       return <WorkflowList />;
     }
     if (path.match(/^workflows\//)) {
-      const parts = path.split('/');
+      const parts = path.split("/");
       parts.shift();
       const workflowId = parts[0];
       return <WorkflowDetails workflowId={workflowId} />;
     }
 
-    if (path === 'tools') {
+    if (path === "tools") {
       return <ToolList />;
     }
     if (path.match(/^tools\/tests\//)) {
-      const parts = path.split('/');
+      const parts = path.split("/");
       parts.shift();
       parts.shift();
       const toolTestId = parts[0];
       return <ToolTestDetails toolTestId={toolTestId} />;
     }
     if (path.match(/^tools\//)) {
-      const parts = path.split('/');
+      const parts = path.split("/");
       parts.shift();
       const toolId = parts[0];
       return <ToolDetails toolId={toolId} />;
     }
 
-    if (path === 'packages') {
+    if (path === "packages") {
       return <PackageList />;
     }
     if (path.match(/^packages\//)) {
-      const parts = path.split('/');
+      const parts = path.split("/");
       parts.shift();
       const id = parts[0];
-      if (id.toLowerCase() === 'newlocal') {
+      if (id.toLowerCase() === "newlocal") {
         return <PackageNewLocal />;
       }
       return <PackageDetails packageId={id} />;
     }
 
-    if (path === 'variables') {
+    if (path === "variables") {
       return <VariableList />;
     }
     if (path.match(/^variables\//)) {
-      const parts = path.split('/');
+      const parts = path.split("/");
       parts.shift();
       const id = parts[0];
       return <VariableDetails persistentVarId={id} />;
     }
 
-    if (path === 'peer-types') {
+    if (path === "peer-types") {
       return <PeerTypeLists />;
     }
     if (path.match(/^peer-types\//)) {
-      const parts = path.split('/');
+      const parts = path.split("/");
       parts.shift();
       const id = parts[0];
       return <PeerTypeDetails peerTypeId={id} />;
     }
 
     if (path.match(/^threads\//)) {
-      const parts = path.split('/');
+      const parts = path.split("/");
       parts.shift();
       const threadId = parts[0];
       return <ThreadMessageList threadId={threadId} />;
     }
 
-    throw new Error('Unrecognized route: ' + originalPath);
-
+    throw new Error(`Unrecognized route: ${originalPath}`);
   } catch (err) {
     return (
       <div className="p-3">
-        <a href='#threads'>Home</a>
+        <a href="#threads">Home</a>
         <h3>Error loading route</h3>
         <pre>
-          route: {globals.mainContentPath() + '\n'}
+          route: {`${globals.mainContentPath()}\n`}
           {String(err)}
         </pre>
       </div>
-    )
+    );
   }
-}
+}

package/src/components/save-button.tsx

@@ -1,19 +1,20 @@
-import React from "react";
-import { IDoc } from "@peers-app/peers-sdk";
+import type { IDoc } from "@peers-app/peers-sdk";
+import type React from "react";
 import { isDesktop, mainContentPath } from "../globals";
 import { useObservable } from "../hooks";
 
 export interface ISaveButtonProps {
-  doc: IDoc<any>
+  // biome-ignore lint/suspicious/noExplicitAny: SaveButton is used with many concrete table row shapes; IDoc stays generic at call sites.
+  doc: IDoc<any>;
   onClick?: () => void | Promise<void>;
   addActions?: (
-    {
-      label: string;
-      onClick: () => void;
-      className?: string;
-    }
+    | {
+        label: string;
+        onClick: () => void;
+        className?: string;
+      }
     | React.ReactNode
-  )[]
+  )[];
   noBuiltInActions?: boolean;
 }
 
@@ -25,85 +26,88 @@ export const SaveButton = (props: ISaveButtonProps) => {
   if (!addActions) {
     addActions = [];
   }
-  const allActions: ISaveButtonProps['addActions'] = props.addActions ? [...addActions] : [];
+  const allActions: ISaveButtonProps["addActions"] = props.addActions ? [...addActions] : [];
 
   if (!props.noBuiltInActions) {
     if (q()) {
       allActions.unshift({
-        label: 'Discard Changes',
-        className: 'text-bg-warning',
+        label: "Discard Changes",
+        className: "text-bg-warning",
         onClick: () => {
-          if (confirm('Are you sure you want to discard your changes?')) {
-            doc.load()
-              .then(() => {
-                setTimeout(() => doc.q(0), 100);
-              });
+          if (confirm("Are you sure you want to discard your changes?")) {
+            doc.load().then(() => {
+              setTimeout(() => doc.q(0), 100);
+            });
           }
-        }
+        },
       });
     }
     if (allActions.length) {
       allActions.push(<hr className="dropdown-divider mt-3" />);
     }
     allActions.push({
-      label: 'Delete',
+      label: "Delete",
       className: `text-bg-danger`,
       onClick: async () => {
-        if (confirm('Are you sure you want to delete this?')) {
+        if (confirm("Are you sure you want to delete this?")) {
           await doc.delete();
-          const pathParts = mainContentPath().split('/');
+          const pathParts = mainContentPath().split("/");
           pathParts.pop();
-          const path = pathParts.join('/') ?? '';
+          const path = pathParts.join("/") ?? "";
           mainContentPath(path);
         }
-      }
+      },
     });
   }
 
-
-
   let className = `btn `;
   if (q()) {
-    className += 'btn-primary';
+    className += "btn-primary";
   } else {
-    className += 'disabled';
+    className += "disabled";
   }
 
   if (!addActions?.length && props.noBuiltInActions) {
     return (
       <button className={className} onClick={props.onClick ?? doc.save} disabled={!q()}>
-        {isDesktop() ? 'Save Changes' : 'Save'}
+        {isDesktop() ? "Save Changes" : "Save"}
       </button>
-    )
+    );
   }
 
   return (
-    <div style={{ display: 'inline-block' }}>
-      <div className="input-group" >
+    <div style={{ display: "inline-block" }}>
+      <div className="input-group">
         <button className={className} onClick={props.onClick ?? doc.save} disabled={!q()}>
-          {isDesktop() ? 'Save Changes' : 'Save'}
+          {isDesktop() ? "Save Changes" : "Save"}
         </button>
-        <button type="button" data-bs-toggle="dropdown" aria-expanded="false"
+        <button
+          type="button"
+          data-bs-toggle="dropdown"
+          aria-expanded="false"
           // className={`btn dropdown-toggle dropdown-toggle-split ${q() ? 'btn-primary' : 'btn-secondary'}`}
           className={`btn dropdown-toggle dropdown-toggle-split btn-secondary`}
         >
           <span className="visually-hidden">Toggle Dropdown</span>
         </button>
         <ul className="dropdown-menu dropdown-menu-end">
-          {allActions.map(action => {
-            if (typeof action !== 'object' || action === null || !('label' in action)) {
-              return (<li key={Math.random()}>{action}</li>);
+          {allActions.map((action) => {
+            if (typeof action !== "object" || action === null || !("label" in action)) {
+              return <li key={Math.random()}>{action}</li>;
             }
             return (
               <li key={action.label}>
-                <button className={`dropdown-item rounded mt-2 ${action.className || ''}`} onClick={action.onClick}>
+                <button
+                  className={`dropdown-item rounded mt-2 ${action.className || ""}`}
+                  onClick={action.onClick}
+                >
                   {action.label}
                 </button>
               </li>
-            )
+            );
           })}
         </ul>
       </div>
     </div>
   );
-}
+};