Message history

chat/package.json

@@ -25,17 +25,18 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "fuse.js": "^7.1.0",
+    "idb": "^8.0.3",
     "iso-639-1": "^3.1.5",
     "jdenticon": "^3.3.0",
     "localforage": "^1.10.0",
     "lucide-react": "^0.562.0",
     "marmot-ts": "workspace:*",
     "nostr-wasm": "^0.1.0",
     "radix-ui": "^1.4.3",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "react-error-boundary": "^6.1.0",
-    "react-router": "^7.12.0",
+    "react-router": "^7.13.0",
     "recharts": "2.15.4",
     "rxjs": "^7.8.2",
     "tailwind-merge": "^3.4.0",
@@ -48,7 +49,7 @@
   "devDependencies": {
     "@tailwindcss/vite": "^4.1.18",
     "@types/node": "^24.10.9",
-    "@types/react": "^19.2.9",
+    "@types/react": "^19.2.10",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.2",
     "globals": "^16.5.0",

chat/src/hooks/use-group-messages.ts

@@ -0,0 +1,88 @@
+import type { Rumor } from "applesauce-common/helpers/gift-wrap";
+import { type MarmotGroup, type GroupRumorHistory } from "marmot-ts";
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+/**
+ * Hook that loads and subscribes to group messages: paginated history from the
+ * group history store and live rumors via the history "rumor" listener.
+ *
+ * @param group - The current group, or null when none is selected
+ * @returns messages, loadMoreMessages, loadingMore, loadingDone, and
+ *   addNewMessages for optimistic updates (e.g. after sending)
+ *
+ * @example
+ * ```tsx
+ * const { messages, loadMoreMessages, loadingMore, loadingDone, addNewMessages } =
+ *   useGroupMessages(group);
+ * // After send: addNewMessages([sentRumor]);
+ * ```
+ */
+export function useGroupMessages(
+  group: MarmotGroup<GroupRumorHistory> | null,
+): {
+  messages: Rumor[];
+  loadMoreMessages: () => Promise<void>;
+  loadingMore: boolean;
+  loadingDone: boolean;
+} {
+  const [messages, setMessages] = useState<Rumor[]>([]);
+  const [loadingDone, setLoadingDone] = useState(false);
+  const [loadingMore, setLoadingMore] = useState(false);
+
+  const paginatedLoader = useMemo(() => {
+    if (!group?.history) return null;
+    return group.history.createPaginatedLoader({ limit: 50 });
+  }, [group]);
+
+  const addNewMessages = useCallback((newMessages: Rumor[]) => {
+    setMessages((prev) => {
+      const messageMap = new Map<string, Rumor>();
+      prev.forEach((msg) => {
+        if (msg.id) messageMap.set(msg.id, msg);
+      });
+      newMessages.forEach((msg) => {
+        if (msg.id) messageMap.set(msg.id, msg);
+      });
+      const combined = Array.from(messageMap.values());
+      return combined.sort((a, b) => a.created_at - b.created_at);
+    });
+  }, []);
+
+  const loadMoreMessages = useCallback(async () => {
+    if (!paginatedLoader) return;
+    setLoadingMore(true);
+    const page = await paginatedLoader.next();
+    addNewMessages(page.value);
+    if (page.done) setLoadingDone(page.done);
+    setLoadingMore(false);
+  }, [paginatedLoader, addNewMessages]);
+
+  // Clear messages and reset loading state when group changes
+  useEffect(() => {
+    setMessages([]);
+    setLoadingDone(false);
+    setLoadingMore(false);
+  }, [group]);
+
+  // Load initial messages
+  useEffect(() => {
+    loadMoreMessages();
+  }, [loadMoreMessages]);
+
+  // Subscribe to new rumors
+  useEffect(() => {
+    if (!group?.history) return;
+    const listener = (rumor: Rumor) => addNewMessages([rumor]);
+    group.history.addListener("rumor", listener);
+    return () => {
+      group.history.removeListener("rumor", listener);
+    };
+  }, [group, addNewMessages]);
+
+  return {
+    messages,
+    loadMoreMessages,
+    loadingMore,
+    loadingDone,
+  };
+}

chat/src/lib/account-database.ts

@@ -0,0 +1,203 @@
+import { Rumor } from "applesauce-common/helpers";
+import {
+  bytesToHex,
+  Filter,
+  matchFilter,
+  NostrEvent,
+} from "applesauce-core/helpers";
+import { IDBPDatabase, openDB } from "idb";
+import localforage from "localforage";
+import {
+  defaultMarmotClientConfig,
+  GroupHistoryFactory,
+  GroupRumorHistory,
+  GroupRumorHistoryBackend,
+  GroupStore,
+  KeyPackageStore,
+} from "marmot-ts";
+
+const DB_VERSION = 1;
+
+export interface StoredRumor {
+  groupId: string;
+  created_at: number;
+  id: string;
+  rumor: Rumor;
+}
+
+/** Schema for an indexeddb for a single account */
+export type RumorDatabaseSchema = {
+  rumors: {
+    value: StoredRumor;
+    key: [string, string]; // [groupId, rumorId]
+    indexes: { by_group_created_at: [string, number] }; // [groupId, created_at]
+  };
+};
+
+/**
+ * IndexedDB-backed implementation of {@link MarmotGroupHistoryStoreBackend}.
+ * Stores and retrieves group history (MIP-03 rumors) using the `idb` package.
+ *
+ * TODO: once this is stable this should be moved to the marmot-ts package
+ */
+class IdbRumorHistoryBackend implements GroupRumorHistoryBackend {
+  private groupKey: string;
+  private database: IDBPDatabase<RumorDatabaseSchema>;
+
+  constructor(
+    database: IDBPDatabase<RumorDatabaseSchema>,
+    groupId: Uint8Array,
+  ) {
+    this.database = database;
+    this.groupKey = bytesToHex(groupId);
+  }
+
+  /** Load rumors from the indexeddb database based on the given filter */
+  async queryRumors(filter: Filter): Promise<Rumor[]> {
+    const { since, until, limit } = filter;
+
+    // Always use a bounded range so we only get this group's rumors (avoids
+    // lowerBound/upperBound including other groups when groupId hex is a prefix).
+    const range = IDBKeyRange.bound(
+      [this.groupKey, since ?? 0],
+      [this.groupKey, until ?? Number.MAX_SAFE_INTEGER],
+      false,
+      false,
+    );
+
+    const tx = this.database.transaction("rumors", "readonly");
+    const index = tx.objectStore("rumors").index("by_group_created_at");
+    const cursor = await index.openCursor(range, "prev");
+    const stored: StoredRumor[] = [];
+    let cur = cursor;
+    while (cur && (limit === undefined || stored.length < limit)) {
+      stored.push(cur.value);
+      cur = await cur.continue();
+    }
+
+    return (
+      stored
+        .map((s) => s.rumor)
+        // Filter down by extra nostr filters if provided
+        .filter((r) => matchFilter(filter, r as NostrEvent))
+    );
+  }
+
+  /** Saves a new rumor event to the database */
+  async addRumor(rumor: Rumor): Promise<void> {
+    const entry: StoredRumor = {
+      groupId: this.groupKey,
+      created_at: rumor.created_at,
+      id: rumor.id,
+      rumor: rumor,
+    };
+    await this.database.put("rumors", entry);
+  }
+
+  /** Clear all stored rumors for the group */
+  async clear(): Promise<void> {
+    const range = IDBKeyRange.bound(
+      [this.groupKey, 0],
+      [this.groupKey, Number.MAX_SAFE_INTEGER],
+      false,
+      false,
+    );
+
+    // Get all keys for the groups rumors
+    const keys = await this.database.getAllKeysFromIndex(
+      "rumors",
+      "by_group_created_at",
+      range,
+    );
+
+    // Delete all keys
+    const tx = this.database.transaction("rumors", "readwrite");
+    const store = tx.objectStore("rumors");
+    for (const key of keys) {
+      await store.delete(key);
+    }
+    await tx.done;
+  }
+}
+
+type StorageInterfaces = {
+  groupStore: GroupStore;
+  historyFactory: GroupHistoryFactory<GroupRumorHistory>;
+  keyPackageStore: KeyPackageStore;
+};
+
+/** A singleton class that manages databases for  */
+export class MultiAccountDatabaseBroker {
+  private customDatabases: Map<
+    string,
+    | IDBPDatabase<RumorDatabaseSchema>
+    | Promise<IDBPDatabase<RumorDatabaseSchema>>
+  > = new Map();
+
+  /** Get, open, or create a database for a given account */
+  private async getCustomDatabaseForAccount(
+    pubkey: string,
+  ): Promise<IDBPDatabase<RumorDatabaseSchema>> {
+    const existing = this.customDatabases.get(pubkey);
+    if (existing) return existing;
+
+    // Create a new database for the account
+    const db = openDB<RumorDatabaseSchema>(pubkey, DB_VERSION, {
+      upgrade(db) {
+        const rumors = db.createObjectStore("rumors", {
+          keyPath: ["groupId", "id"],
+        });
+        rumors.createIndex("by_group_created_at", ["groupId", "created_at"]);
+      },
+    }).then((open) => {
+      this.customDatabases.set(pubkey, open);
+      return open;
+    });
+
+    this.customDatabases.set(pubkey, db);
+    return db;
+  }
+
+  #storageInterfaces = new Map<string, StorageInterfaces>();
+
+  /** Gets or creates a set of storage interfaces for a given account */
+  async getStorageInterfacesForAccount(pubkey: string) {
+    const existing = this.#storageInterfaces.get(pubkey);
+    if (existing) return existing;
+
+    const groupStore = new GroupStore(
+      localforage.createInstance({
+        name: `${pubkey}-key-value`,
+        storeName: "groups",
+      }),
+      // TODO: this should be provided by the MarmotClient somehow.
+      // this does not seem like something that should be passed to the generic group store interface
+      defaultMarmotClientConfig,
+    );
+
+    const keyPackageStore = new KeyPackageStore(
+      localforage.createInstance({
+        name: `${pubkey}-key-value`,
+        storeName: "keyPackages",
+      }),
+    );
+
+    const rumorDatabase = await this.getCustomDatabaseForAccount(pubkey);
+    const historyFactory = (groupId: Uint8Array) =>
+      new GroupRumorHistory(new IdbRumorHistoryBackend(rumorDatabase, groupId));
+
+    const storageInterfaces: StorageInterfaces = {
+      groupStore,
+      keyPackageStore,
+      historyFactory,
+    };
+
+    this.#storageInterfaces.set(pubkey, storageInterfaces);
+    return storageInterfaces;
+  }
+}
+
+// Create singleton instance of the database broker
+const databaseBroker = new MultiAccountDatabaseBroker();
+
+export default databaseBroker;