@peers-app/peers-ui 0.27.2 → 0.27.4

package/src/components/message-logs/tool-access-approval-card.test.tsx

@@ -1,127 +0,0 @@
-import {
-  AccessLevel,
-  ToolAccessApprovalScope,
-  ToolAccessApprovalStatus,
-} from "@peers-app/peers-sdk";
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
-import { ToolAccessApprovalCard } from "./tool-access-approval-card";
-
-const approve = jest.fn(async () => ({ result: { status: "executed" } }));
-const reject = jest.fn(async () => ({ result: { status: "rejected" } }));
-const getDataContext = jest.fn((dataContextId: string) => ({ dataContextId }));
-const getToolAccessControlConsumer = jest.fn(async (_dataContextId: string) => ({
-  tools: { approve, reject },
-}));
-
-jest.mock("../../screens/tools/tool-access-ipc", () => ({
-  getToolAccessControlConsumer: (dataContextId: string) =>
-    getToolAccessControlConsumer(dataContextId),
-}));
-
-jest.mock("@peers-app/peers-sdk", () => {
-  const actual = jest.requireActual("@peers-app/peers-sdk");
-  return {
-    ...actual,
-    getUserContext: async () => ({
-      getDataContext,
-    }),
-    getCurrentUserAccessLevel: async () => actual.AccessLevel.Self,
-  };
-});
-
-const pending = {
-  toolAccessApprovalId: "00testapproval0000000001",
-  userId: "00testuser000000000000001",
-  assistantId: "00testassistant000000001",
-  toolId: "00testtooladmin00000000",
-  toolName: "queryDatabase",
-  dataContextId: "00testdatacontext00000001",
-  argsHash: "hash",
-  argsPreview: '{"sql":"select 1"}',
-  frozenArgs: { sql: "select 1" },
-  requiredAccessLevel: AccessLevel.Owner,
-  scope: ToolAccessApprovalScope.once,
-  status: ToolAccessApprovalStatus.pending,
-  nonce: "nonce-from-table",
-  expiresAt: new Date(Date.now() + 60_000),
-  createdAt: new Date(),
-};
-
-describe("ToolAccessApprovalCard", () => {
-  beforeEach(() => {
-    approve.mockClear();
-    reject.mockClear();
-    getDataContext.mockClear();
-    getToolAccessControlConsumer.mockClear();
-  });
-
-  it("renders a pending card with actions", () => {
-    render(<ToolAccessApprovalCard approval={pending as any} />);
-    expect(screen.getByText("Approval required")).toBeInTheDocument();
-    expect(screen.getByText("queryDatabase")).toBeInTheDocument();
-    expect(screen.getByText(/Owner \(80\)/)).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Allow once" })).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Allow in thread (15 min)" })).toBeInTheDocument();
-    expect(
-      screen.getByRole("button", { name: "Allow in this context (15 min)" }),
-    ).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Deny" })).toBeInTheDocument();
-  });
-
-  it("evaluates the user role in the approval context", async () => {
-    render(<ToolAccessApprovalCard approval={pending as any} />);
-    await waitFor(() => {
-      expect(getDataContext).toHaveBeenCalledWith(pending.dataContextId);
-    });
-  });
-
-  it("approves once using the table nonce", async () => {
-    render(<ToolAccessApprovalCard approval={pending as any} />);
-    fireEvent.click(screen.getByRole("button", { name: "Allow once" }));
-    await waitFor(() => {
-      expect(getToolAccessControlConsumer).toHaveBeenCalledWith(pending.dataContextId);
-      expect(approve).toHaveBeenCalledWith({
-        approvalId: pending.toolAccessApprovalId,
-        nonce: "nonce-from-table",
-        scope: "once",
-      });
-    });
-  });
-
-  it("denies using the table nonce", async () => {
-    render(<ToolAccessApprovalCard approval={pending as any} />);
-    fireEvent.click(screen.getByRole("button", { name: "Deny" }));
-    await waitFor(() => {
-      expect(reject).toHaveBeenCalledWith({
-        approvalId: pending.toolAccessApprovalId,
-        nonce: "nonce-from-table",
-      });
-    });
-  });
-
-  it("hides empty argument previews", () => {
-    render(
-      <ToolAccessApprovalCard
-        approval={{ ...pending, argsPreview: "{}", frozenArgs: {} } as any}
-      />,
-    );
-    expect(screen.queryByText("{}")).not.toBeInTheDocument();
-  });
-
-  it("shows a decided card without actions", () => {
-    render(
-      <ToolAccessApprovalCard
-        approval={
-          {
-            ...pending,
-            status: ToolAccessApprovalStatus.rejected,
-            resultSummary: "Rejected by user",
-          } as any
-        }
-      />,
-    );
-    expect(screen.getByText("Access rejected")).toBeInTheDocument();
-    expect(screen.getByText("Rejected by user")).toBeInTheDocument();
-    expect(screen.queryByRole("button", { name: "Allow once" })).not.toBeInTheDocument();
-  });
-});

package/src/components/message-logs/tool-access-approval-card.tsx

@@ -1,178 +0,0 @@
-import {
-  getAccessLevelLabel,
-  getCurrentUserAccessLevel,
-  getUserContext,
-  type IToolAccessApproval,
-  recordAccessLevel,
-  TOOL_ACCESS_GRANT_TTL_MS,
-  ToolAccessApprovalStatus,
-} from "@peers-app/peers-sdk";
-import { useState } from "react";
-import { usePromise } from "../../hooks";
-import { getToolAccessControlConsumer } from "../../screens/tools/tool-access-ipc";
-
-const GRANT_TTL_MINUTES = TOOL_ACCESS_GRANT_TTL_MS / (60 * 1000);
-
-/** Props for {@link ToolAccessApprovalCard}. */
-export interface ToolAccessApprovalCardProps {
-  /** Approval or grant row to render. */
-  approval: IToolAccessApproval;
-}
-
-/**
- * Inline thread card for a pending or decided tool-access approval.
- *
- * Uses Bootstrap theme tokens (`bg-body-*`, `text-body-*`) so the card follows
- * light and dark `data-bs-theme` instead of a hardcoded `bg-light` panel.
- */
-export function ToolAccessApprovalCard(props: ToolAccessApprovalCardProps) {
-  const { approval } = props;
-  const [busy, setBusy] = useState(false);
-  const [error, setError] = useState<string | undefined>();
-  const userLevel = usePromise(
-    async () => {
-      const userContext = await getUserContext();
-      return getCurrentUserAccessLevel(userContext.getDataContext(approval.dataContextId));
-    },
-    recordAccessLevel({ accessLevel: 100 }),
-    [approval.dataContextId],
-  );
-
-  const required = approval.requiredAccessLevel;
-  const current = userLevel ?? 100;
-  const pending = approval.status === ToolAccessApprovalStatus.pending;
-  const expired = approval.expiresAt.getTime() <= Date.now();
-  const argsPreview = meaningfulArgsPreview(approval.argsPreview);
-  const statusStyle = statusAppearance(approval.status, expired);
-
-  async function decide(scope?: "once" | "thread" | "context", reject = false) {
-    setBusy(true);
-    setError(undefined);
-    try {
-      const consumer = await getToolAccessControlConsumer(approval.dataContextId);
-      if (reject) {
-        await consumer.tools.reject({
-          approvalId: approval.toolAccessApprovalId,
-          nonce: approval.nonce,
-        });
-      } else {
-        await consumer.tools.approve({
-          approvalId: approval.toolAccessApprovalId,
-          nonce: approval.nonce,
-          scope,
-        });
-      }
-    } catch (err) {
-      setError(String(err));
-    } finally {
-      setBusy(false);
-    }
-  }
-
-  return (
-    <div
-      className="card my-2 bg-body-secondary border-secondary-subtle"
-      data-testid="tool-access-approval-card"
-    >
-      <div className="card-body py-2 px-3">
-        <div className="d-flex align-items-start gap-2">
-          <i
-            className={`bi ${statusStyle.icon} ${statusStyle.iconClass} mt-1`}
-            aria-hidden="true"
-          />
-          <div className="flex-grow-1 min-w-0">
-            <div className="fw-semibold text-body">
-              {pending ? "Approval required" : `Access ${approval.status}`}
-            </div>
-            <div className="small text-body">
-              <code className="text-body">{approval.toolName}</code> needs{" "}
-              {getAccessLevelLabel(required)} ({required}). You have {getAccessLevelLabel(current)}{" "}
-              ({current}).
-            </div>
-            {argsPreview && (
-              <pre
-                className="small mb-2 mt-2 p-2 bg-body-tertiary border rounded text-body"
-                style={{ whiteSpace: "pre-wrap" }}
-              >
-                {argsPreview}
-              </pre>
-            )}
-            <div className="text-body-secondary small mt-1">
-              Expires {approval.expiresAt.toLocaleTimeString()}
-              {expired ? " (expired)" : ""}
-            </div>
-            {approval.resultSummary && (
-              <div className="small text-body mt-1">{approval.resultSummary}</div>
-            )}
-            {error && <div className="text-danger small mt-1">{error}</div>}
-            {pending && !expired && (
-              <div className="d-flex flex-wrap gap-1 mt-2">
-                <button
-                  type="button"
-                  className="btn btn-sm btn-primary"
-                  disabled={busy}
-                  onClick={() => decide("once")}
-                >
-                  Allow once
-                </button>
-                <button
-                  type="button"
-                  className="btn btn-sm btn-outline-secondary"
-                  disabled={busy}
-                  onClick={() => decide("thread")}
-                >
-                  Allow in thread ({GRANT_TTL_MINUTES} min)
-                </button>
-                <button
-                  type="button"
-                  className="btn btn-sm btn-outline-secondary"
-                  disabled={busy}
-                  onClick={() => decide("context")}
-                >
-                  Allow in this context ({GRANT_TTL_MINUTES} min)
-                </button>
-                <button
-                  type="button"
-                  className="btn btn-sm btn-outline-danger"
-                  disabled={busy}
-                  onClick={() => decide(undefined, true)}
-                >
-                  Deny
-                </button>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function meaningfulArgsPreview(preview: string | undefined): string | undefined {
-  const trimmed = preview?.trim();
-  if (!trimmed || trimmed === "{}" || trimmed === "[]") {
-    return undefined;
-  }
-  return trimmed;
-}
-
-function statusAppearance(
-  status: ToolAccessApprovalStatus,
-  expired: boolean,
-): { icon: string; iconClass: string } {
-  if (status === ToolAccessApprovalStatus.pending && expired) {
-    return { icon: "bi-shield-x", iconClass: "text-body-secondary" };
-  }
-  switch (status) {
-    case ToolAccessApprovalStatus.pending:
-      return { icon: "bi-shield-lock", iconClass: "text-warning" };
-    case ToolAccessApprovalStatus.approved:
-    case ToolAccessApprovalStatus.executed:
-      return { icon: "bi-shield-check", iconClass: "text-success" };
-    case ToolAccessApprovalStatus.rejected:
-    case ToolAccessApprovalStatus.failed:
-      return { icon: "bi-shield-x", iconClass: "text-danger" };
-    default:
-      return { icon: "bi-shield", iconClass: "text-body-secondary" };
-  }
-}

package/src/components/messages/avatar.tsx

@@ -1,171 +0,0 @@
-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) => void;
-}
-
-export const Avatar = (props: IProps) => {
-  const { userId, setUser: parentSetUser, assistantId } = props;
-
-  const user = usePromise(async () => {
-    const user = await Users().get(userId, { useCache: true });
-    if (user && parentSetUser) {
-      parentSetUser(user);
-    }
-    return user;
-  });
-  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],
-  );
-
-  let initials = "?";
-
-  const name = assistant?.name || user?.name;
-  if (user) {
-    if (!name) {
-      initials = "!";
-    } else {
-      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];
-    }
-  }
-
-  // TODO if user.avatarImage then get and show that
-
-  let backgroundColor = name ? stringToHslColor(name) : stringToHslColor("", 100, 100);
-  if (assistant) {
-    // backgroundColor = stringToHslColor(name || '', 100, 100);
-    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" },
-    ];
-
-    const sortedConfigs = configs.sort((a, b) => a.value - b.value);
-    let config = { color: "#6c757d", icon: "bi-shield" };
-    for (const c of sortedConfigs) {
-      if (level >= c.value) {
-        config = c;
-      } else {
-        break;
-      }
-    }
-    return config;
-  };
-
-  const trustConfig = getTrustLevelConfig(trustLevel || TrustLevel.Unknown);
-
-  return (
-    <div className="position-relative">
-      <div
-        className="rounded-circle d-flex justify-content-center align-items-center fs-4 border"
-        style={{
-          width: "40px",
-          height: "40px",
-          color: "white",
-          backgroundColor,
-        }}
-      >
-        <span style={{ fontSize: "15pt" }}>
-          {assistant && <i className="bi bi-person-fill-gear"></i>}
-          {!assistant && initials.toUpperCase()}
-          {/* {assistant ? "ai" : initials.toUpperCase()} */}
-        </span>
-      </div>
-      {/* Trust level badge overlay */}
-      {!assistant && (
-        <div
-          className="position-absolute d-flex justify-content-center align-items-center"
-          style={{
-            bottom: "-4px",
-            right: "0px",
-            width: "18px",
-            height: "18px",
-            // backgroundColor: 'white',
-            borderRadius: "50%",
-            // border: '1px solid #dee2e6',
-          }}
-        >
-          <i
-            className={trustConfig.icon}
-            style={{
-              fontSize: "12px",
-              color: trustConfig.color,
-            }}
-          ></i>
-        </div>
-      )}
-      {/* Keep this here in case we want to show the assistant icon */}
-      {/* {assistantId && (
-        <i
-          className="bi bi-gear-fill position-absolute"
-          style={{
-            bottom: '0',
-            right: '0',
-            fontSize: '12px',
-            backgroundColor: 'white',
-            borderRadius: '50%',
-            padding: '2px',
-          }}
-          title={`${user?.name}'s assistant`}
-        ></i>
-      )} */}
-    </div>
-  );
-};
-
-export function stringToHslColor(
-  str: string = "",
-  saturation: number = 50,
-  lightness: number = 40,
-) {
-  saturation = saturation % 100;
-  lightness = lightness % 100;
-  let hash = 0;
-  for (let i = 0; i < str.length; i++) {
-    hash = str.charCodeAt(i) + ((hash << 5) - hash);
-  }
-
-  const h = hash % 360;
-  return `hsl(${h}, ${saturation}%, ${lightness}%)`;
-}

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

@@ -1,189 +0,0 @@
-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;
-
-interface IProps {
-  height: number | string;
-  channelId: string;
-  batchSize: number;
-  effects?: {
-    pushMessage: (message: IMessage) => void;
-  };
-  scrollChanged?: (isBottomInView: boolean) => void;
-}
-
-export const ChannelMessageList = (props: IProps) => {
-  const { height, channelId, batchSize } = props;
-
-  const [messages, setMessages] = useState<IMessage[]>([]);
-  const [allMessagesLoaded, setAllMessagesLoaded] = useState(false);
-  const messagesEndRef = React.useRef<HTMLDivElement>(null);
-
-  const scrollToBottom = useCallback((behavior: "instant" | "smooth", delay = 100) => {
-    setTimeout(() => {
-      messagesEndRef.current?.scrollIntoView({ behavior });
-    }, delay);
-  }, []);
-
-  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]);
-
-  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"));
-      }
-    });
-    return false;
-  }, [messages, batchSize, channelId]);
-
-  const minHeightOfMessage = 20;
-  useEffect(() => {
-    if (
-      !allMessagesLoaded &&
-      (!messages.length || messages.length * minHeightOfMessage < windowHeight())
-    ) {
-      prependItems();
-    }
-  }, [messages, allMessagesLoaded, prependItems]);
-
-  // 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 &&
-        // 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;
-    }
-    const _messages = sortBy([newMessage, ...messages], "createdAt").reverse();
-    setMessages(_messages);
-    if (newMessage.userId === me.userId && !newMessage.assistantId) {
-      scrollToBottom("instant", 1);
-    } else {
-      scrollToBottom("smooth");
-    }
-  };
-
-  useEffect(() => {
-    const sub = Messages().dataChanged.subscribe((evt) => {
-      const message: IMessage = evt.dataObject;
-      if (message.channelId !== channelId || message.messageParentId) {
-        return;
-      }
-      if (evt.op === "insert") {
-        effects.pushMessage(message);
-      }
-    });
-    return () => {
-      sub.unsubscribe();
-    };
-  }, [channelId, effects.pushMessage]);
-
-  return (
-    <div
-      id="scrollableDiv"
-      style={{
-        height,
-        overflow: "auto",
-        display: "flex",
-        flexDirection: "column-reverse",
-        // marginBottom: '70px',
-      }}
-    >
-      <InfiniteScroll
-        dataLength={messages.length}
-        next={prependItems}
-        style={{ display: "flex", flexDirection: "column-reverse", overflow: "hidden" }}
-        inverse={true}
-        hasMore={!allMessagesLoaded}
-        loader={<LoadingIndicator />}
-        scrollableTarget="scrollableDiv"
-        endMessage={
-          <Fragment>
-            <div className="d-flex justify-content-center">
-              {messages[0] && (
-                <div>{new Date(messages[messages.length - 1].createdAt).toLocaleDateString()}</div>
-              )}
-            </div>
-            <div className="d-flex justify-content-center">
-              <div>
-                <i>beginning of messages</i>
-              </div>
-            </div>
-          </Fragment>
-        }
-      >
-        {/* <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}
-            />
-          );
-        })}
-      </InfiniteScroll>
-    </div>
-  );
-};
-
-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 messages: IMessage[] = [];
-  for await (const message of cursor) {
-    messages.push(message);
-    if (messages.length >= batchSize) {
-      break;
-    }
-  }
-  return messages;
-}