Merge pull request #11 from xmtp/rygine/reply-content-type

Add Reply content type

packages/content-type-reaction/README.md

@@ -50,7 +50,8 @@ await conversation.messages.send(reaction, {
 });
 ```
 
-Note that we’re using `contentFallback` to enable clients that don't support these content types to still display something. For cases where clients *do* support these types, they can use the content fallback as alt text for accessibility purposes.
+> **Note**
+> Use `contentFallback` to enable clients that don't support these content types to still display some useful context. For cases where clients *do* support these types, they can use the content fallback as alt text for accessibility purposes.
 
 ## Receive a reaction
 

packages/content-type-reply/.eslintrc.cjs

@@ -0,0 +1,10 @@
+module.exports = {
+  root: true,
+  extends: ["custom"],
+  parserOptions: {
+    project: "./tsconfig.eslint.json",
+  },
+  rules: {
+    "class-methods-use-this": "off",
+  },
+};

packages/content-type-reply/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 XMTP developers (xmtp.org)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/content-type-reply/README.md

@@ -0,0 +1,94 @@
+# Reply content type
+
+This package provides an XMTP content type to support direct replies to messages.
+
+## What’s a reply?
+
+A reply action is a way to respond directly to a specific message in a conversation. Instead of sending a new message, users can select and reply to a particular message.
+
+## Why replies?
+
+Providing replies in your app enables users to maintain context and clarity in their conversations. Replies can also help organize messages, making messages easier to find and reference in the future. This user experience can help make your app a great tool for collaboration.
+
+## Install the package
+
+```bash
+# npm
+npm i @xmtp/content-type-reply
+
+# yarn
+yarn add @xmtp/content-type-reply
+
+# pnpm
+pnpm i @xmtp/content-type-reply
+```
+
+## Create a reply
+
+With XMTP, replies are represented as objects with the following keys:
+
+- `reference`: The message ID for the message that is being reacted to
+- `content`: A string representation of the reply
+
+```tsx
+const reply: Reply = {
+  reference: someMessageID,
+  content: "I concur",
+};
+```
+
+## Send a reply
+
+Now that you have a reply, you can send it:
+
+```tsx
+await conversation.messages.send(reply, {
+  contentType: ContentTypeReply,
+  contentFallback: `[Reply] ${client.address} replied to ${someMessage.content} with:\n\n${reply.content}`,
+});
+```
+
+> **Note**
+> Use `contentFallback` to enable clients that don't support these content types to still display some useful context. For cases where clients *do* support these types, they can use the content fallback as alt text for accessibility purposes.
+
+## Receive a reply
+
+Now that you can send a reply, you need a way to receive a reply. For example:
+
+```tsx
+// Assume `loadLastMessage` is a thing you have
+const message: DecodedMessage = await loadLastMessage();
+
+if (!message.contentType.sameAs(ContentTypeReply)) {
+  // We do not have a reply. A topic for another blog post.
+  return;
+}
+
+// We've got a reply.
+const reply: Reply = message.content;
+```
+
+## Display the reply
+
+Generally, replies should be displayed alongside the original message to provide context. Ultimately, how you choose to display replies is completely up to you.
+
+## Developing
+
+Run `yarn dev` to build the content type and watch for changes, which will trigger a rebuild.
+
+## Testing
+
+Before running unit tests, start the required Docker container at the root of this repository. For more info, see [Running tests](../../README.md#running-tests).
+
+## Useful commands
+
+- `yarn build`: Builds the content type
+- `yarn clean`: Removes `node_modules`, `dist`, and `.turbo` folders
+- `yarn dev`: Builds the content type and watches for changes, which will trigger a rebuild
+- `yarn format`: Runs Prettier format and write changes
+- `yarn format:check`: Runs Prettier format check
+- `yarn lint`: Runs ESLint
+- `yarn test:setup`: Starts a necessary Docker container for testing
+- `yarn test:teardown`: Stops Docker container for testing
+- `yarn test`: Runs all unit tests
+- `yarn typecheck`: Runs `tsc`

packages/content-type-reply/package.json

@@ -0,0 +1,96 @@
+{
+  "name": "@xmtp/content-type-reply",
+  "version": "1.0.0",
+  "description": "An XMTP content type to support replying to a message",
+  "author": "XMTP Labs <eng@xmtp.com>",
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "browser": "dist/web/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "browser": "./dist/web/index.js",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:xmtp/xmtp-js-content-types.git",
+    "directory": "packages/content-type-reply"
+  },
+  "homepage": "https://github.com/xmtp/xmtp-js-content-types",
+  "bugs": {
+    "url": "https://github.com/xmtp/xmtp-js-content-types/issues"
+  },
+  "keywords": [
+    "xmtp",
+    "messaging",
+    "web3",
+    "js",
+    "ts",
+    "javascript",
+    "typescript",
+    "content-types"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 3 chrome versions",
+      "last 3 firefox versions",
+      "last 3 safari versions"
+    ]
+  },
+  "scripts": {
+    "build:node": "tsup",
+    "build:web": "tsup --platform browser --target esnext",
+    "build": "yarn clean:build && yarn build:node && yarn build:web",
+    "clean:build": "rimraf dist",
+    "clean": "rimraf .turbo node_modules && yarn clean:build",
+    "dev": "tsup --watch",
+    "format:base": "prettier --ignore-path ../../.gitignore",
+    "format:check": "yarn format:base -c .",
+    "format": "yarn format:base -w .",
+    "generate:types": "tsup --dts-only",
+    "lint": "eslint . --ignore-path ../../.gitignore",
+    "test:jsdom": "NODE_TLS_REJECT_UNAUTHORIZED=0 vitest run --environment jsdom",
+    "test:node": "NODE_TLS_REJECT_UNAUTHORIZED=0 vitest run --environment node",
+    "test": "yarn test:node && yarn test:jsdom",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@xmtp/proto": "^3.26.0",
+    "@xmtp/xmtp-js": "^9.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^18.14.2",
+    "@xmtp/content-type-remote-attachment": "workspace:*",
+    "buffer": "^6.0.3",
+    "esbuild": "^0.18.2",
+    "esbuild-plugin-external-global": "^1.0.1",
+    "eslint": "^8.43.0",
+    "eslint-config-custom": "workspace:*",
+    "ethers": "^6.0.8",
+    "jsdom": "^22.1.0",
+    "prettier": "^2.8.8",
+    "rimraf": "^5.0.1",
+    "tsup": "^7.0.0",
+    "typescript": "^5.1.3",
+    "vite": "^4.3.9",
+    "vitest": "^0.32.2"
+  },
+  "peerDependencies": {
+    "@xmtp/xmtp-js": "^9.2.0"
+  }
+}

packages/content-type-reply/src/Reply.test.ts

@@ -0,0 +1,107 @@
+import { Wallet } from "ethers";
+import { Client, ContentTypeText } from "@xmtp/xmtp-js";
+import type { Attachment } from "@xmtp/content-type-remote-attachment";
+import {
+  AttachmentCodec,
+  ContentTypeAttachment,
+} from "@xmtp/content-type-remote-attachment";
+import { ContentTypeReply, ReplyCodec } from "./Reply";
+import type { Reply } from "./Reply";
+
+describe("ReplyContentType", () => {
+  it("has the right content type", () => {
+    expect(ContentTypeReply.authorityId).toBe("xmtp.org");
+    expect(ContentTypeReply.typeId).toBe("reply");
+    expect(ContentTypeReply.versionMajor).toBe(1);
+    expect(ContentTypeReply.versionMinor).toBe(0);
+  });
+
+  it("can send a text reply", async () => {
+    const aliceWallet = Wallet.createRandom();
+    const aliceClient = await Client.create(aliceWallet, { env: "local" });
+    aliceClient.registerCodec(new ReplyCodec());
+    await aliceClient.publishUserContact();
+
+    const bobWallet = Wallet.createRandom();
+    const bobClient = await Client.create(bobWallet, { env: "local" });
+    bobClient.registerCodec(new ReplyCodec());
+    await bobClient.publishUserContact();
+
+    const conversation = await aliceClient.conversations.newConversation(
+      bobWallet.address,
+    );
+
+    const originalMessage = await conversation.send("test");
+
+    const reply: Reply = {
+      content: "LGTM",
+      contentType: ContentTypeText,
+      reference: originalMessage.id,
+    };
+
+    await conversation.send(reply, { contentType: ContentTypeReply });
+
+    const bobConversation = await bobClient.conversations.newConversation(
+      aliceWallet.address,
+    );
+    const messages = await bobConversation.messages();
+
+    expect(messages.length).toBe(2);
+
+    const replyMessage = messages[1];
+    const messageContent = replyMessage.content as Reply;
+    expect(messageContent.content).toBe("LGTM");
+    expect(messageContent.reference).toBe(originalMessage.id);
+  });
+
+  it("can send an attachment reply", async () => {
+    const aliceWallet = Wallet.createRandom();
+    const aliceClient = await Client.create(aliceWallet, { env: "local" });
+    aliceClient.registerCodec(new ReplyCodec());
+    aliceClient.registerCodec(new AttachmentCodec());
+    await aliceClient.publishUserContact();
+
+    const bobWallet = Wallet.createRandom();
+    const bobClient = await Client.create(bobWallet, { env: "local" });
+    bobClient.registerCodec(new ReplyCodec());
+    bobClient.registerCodec(new AttachmentCodec());
+    await bobClient.publishUserContact();
+
+    const conversation = await aliceClient.conversations.newConversation(
+      bobWallet.address,
+    );
+
+    const originalMessage = await conversation.send("test");
+
+    const attachment: Attachment = {
+      filename: "test.png",
+      mimeType: "image/png",
+      data: Uint8Array.from([5, 4, 3, 2, 1]),
+    };
+
+    const reply: Reply = {
+      content: attachment,
+      contentType: ContentTypeAttachment,
+      reference: originalMessage.id,
+    };
+
+    await conversation.send(reply, { contentType: ContentTypeReply });
+
+    const bobConversation = await bobClient.conversations.newConversation(
+      aliceWallet.address,
+    );
+    const messages = await bobConversation.messages();
+
+    expect(messages.length).toBe(2);
+
+    const replyMessage = messages[1];
+    const messageContent = replyMessage.content as Reply;
+    expect(ContentTypeAttachment.sameAs(messageContent.contentType)).toBe(true);
+    expect(messageContent.content).toEqual({
+      filename: "test.png",
+      mimeType: "image/png",
+      data: Uint8Array.from([5, 4, 3, 2, 1]),
+    });
+    expect(messageContent.reference).toBe(originalMessage.id);
+  });
+});