E2ee

README.md

@@ -2,8 +2,6 @@
 
 A set of tools for AI developers to build on top of [XMTP](https://xmtp.org)
 
-## What's inside?
-
 ### MessageKit
 
 - [`message-kit`](/packages/message-kit): A kit for quickly building messaging apps

packages/client/src/components/Chat.module.css

@@ -169,16 +169,13 @@
 }
 
 .urlContainer {
-  margin: 8px 0;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  border-radius: 8px 8px 0 0;
   max-width: 300px;
-  background: #e0e0e0;
 }
 
 .urlPreview {
-  border-radius: 8px 8px 0 0;
   overflow: hidden;
   background: #ffffff;
   border: 1px solid #b0b0b0;
@@ -231,3 +228,11 @@
   color: var(--accent);
   font-size: 0.9rem;
 }
+.encryptionInfo {
+  text-align: center !important;
+  width: 100%;
+  font-size: 0.7rem;
+  padding: 0rem;
+  padding-top: 0.4rem;
+  display: block !important;
+}

packages/client/src/components/Chat.tsx

@@ -37,8 +37,6 @@ function Chat({ user }: { user: UserInfo }) {
   const [processedMessageIds] = useState(new Set<string>());
 
   useEffect(() => {
-    console.log("useEffect triggered with user:", user);
-
     const init = async () => {
       try {
         setRecipientInfo(user);
@@ -64,7 +62,6 @@ function Chat({ user }: { user: UserInfo }) {
 
   const onMessage = async (message: Message | undefined) => {
     if (message) {
-      console.log("onMessage", message);
       setMessages((prevMessages) => [...prevMessages, message]);
     }
   };
@@ -88,7 +85,6 @@ function Chat({ user }: { user: UserInfo }) {
         receivers: [recipientInfo.address],
         originalMessage: undefined,
       })) as Message;
-      console.log("message", message);
 
       setMessages((prevMessages) => [...prevMessages, message]);
       setNewMessage("");
@@ -144,17 +140,19 @@ function Chat({ user }: { user: UserInfo }) {
       if (urlRegex.test(part)) {
         try {
           const urlType = getUrlType(part);
-          const isMessageKitUrl = part.includes("message-kit.org");
-
+          const isMessageKitUrl =
+            part.includes("message-kit.org") ||
+            part.includes("baselinks.vercel.app");
+          const isMobile = window.innerWidth < 768;
           return (
             <div key={index} className={styles.urlContainer}>
-              {isMessageKitUrl && <UrlPreview url={part} urlType={urlType} />}
+              {isMessageKitUrl && <UrlPreview url={part} />}
               <div className={styles.buttonContainer}>
                 {urlType === "payment" && (
                   <button
                     onClick={() => {
                       const ethUrl = ethereumURL(part);
-                      openUrl(ethUrl);
+                      isMobile ? openUrl(ethUrl) : alert("Not on mobile");
                     }}
                     className={styles.urlButton}>
                     Pay in USDC
@@ -248,6 +246,9 @@ function Chat({ user }: { user: UserInfo }) {
             Send
           </button>
         </div>
+        <div className={styles.encryptionInfo}>
+          End-to-end encrypted powered by XMTP
+        </div>
       </form>
     </div>
   );

packages/client/src/components/UrlPreview.tsx

@@ -8,13 +8,7 @@ interface OgData {
   url?: string;
 }
 
-export const UrlPreview = ({
-  url,
-  urlType,
-}: {
-  url: string;
-  urlType?: string;
-}) => {
+export const UrlPreview = ({ url }: { url: string; urlType?: string }) => {
   const [ogData, setOgData] = useState<OgData | null>(null);
   const [loading, setLoading] = useState(true);
 

packages/create-message-kit/package.json

@@ -36,4 +36,4 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   }
-}
+}

packages/docs/pages/concepts/xmtp.mdx

@@ -2,7 +2,7 @@
 
 [XMTP](https://xmtp.org/) is the protocol that MessageKit uses to send and receive messages.
 
-> Check out the [XMTP AI](/plugins/xmtp) plugins for more information.
+> Check out the [xmtp e2ee](/plugins/xmtp) plugins for more information.
 
 ## Context
 

packages/docs/pages/plugins/xmtp.mdx

@@ -1,4 +1,4 @@
-# End-to-end encrypted messaging
+# Secure agent messaging
 
 AI is transforming consumer tech, with messaging becoming the main channel for interacting with agent services. This shift will scale message traffic astronomically, analogous to the web’s rise in the 2000s. Just as Cloud-flare secured web traffic, messaging will need robust scalable end-to-end encrypted messages to protect sensitive information.
 
@@ -108,7 +108,11 @@ const onMessage = async (message, user) => {
 
 ### React example
 
-This is how you can use the `xmtp-e2ee` package to create a client and handle messages.
+xmtp-e2ee is a light wrapper around the xmtp package to make it easier to use in react and web. Doesnt support groups yet.
+
+```bash [cmd]
+bun install xmtp-e2ee
+```
 
 ```tsx
 import { XMTP, Message } from "xmtp-e2ee";

packages/xmtp-e2ee/README.md

@@ -1,6 +1,6 @@
 # XMTP
 
-> See [XMTP AI](https://message-kit.org/plugins/xmtp) plugin
+> See [xmtp e2ee](https://message-kit.org/plugins/xmtp) plugin
 
 ### Installation
 

packages/xmtp-e2ee/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xmtp-e2ee",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "license": "MIT",
   "type": "module",
   "exports": {
@@ -61,4 +61,4 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   }
-}
+}

packages/xmtp-e2ee/src/lib/xmtp.ts

@@ -237,7 +237,8 @@ async function streamMessages(
   while (true) {
     try {
       const stream = await client.conversations.streamAllMessages();
-      console.log(`Stream started`);
+      console.log(`XMTP: [v2] Stream started`);
+
       for await (const message of stream) {
         if (message) {
           try {

packages/xmtp/README.md

@@ -1,6 +1,6 @@
 # XMTP
 
-> See [XMTP AI](https://message-kit.org/plugins/xmtp) plugin
+> See [xmtp e2ee](https://message-kit.org/plugins/xmtp) plugin
 
 ### Installation
 

packages/xmtp/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xmtp",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "license": "MIT",
   "type": "module",
   "exports": {
@@ -59,4 +59,4 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   }
-}
+}

packages/xmtp/src/lib/xmtp.ts

@@ -238,7 +238,6 @@ export class XMTP {
       contentType = ContentTypeAgentMessage;
     }
 
-    console.log(`message`, message);
     if (userMessage.originalMessage?.version == "v2") {
       let v2Conversation = await this.getV2ConversationByAddress(
         userMessage.originalMessage.client?.address,
@@ -359,7 +358,7 @@ async function streamMessages(
         await v3client.conversations.sync();
         await v3client.conversations.list();
         const stream = await v3client.conversations.streamAllMessages();
-        console.warn(`XMTP: [v3] Stream started`);
+        console.log(`XMTP: [v3] Stream started`);
         for await (const message of stream) {
           let conversation = await xmtp.getConversationFromMessage(message);
           if (message && conversation) {
@@ -378,7 +377,6 @@ async function streamMessages(
                 conversation,
                 client,
               );
-              console.log(`parsedMessage`, parsedMessage);
               await onMessage(parsedMessage as Message);
             } catch (e) {
               console.log(`error`, e);
@@ -390,7 +388,7 @@ async function streamMessages(
         typeof v2client.conversations.streamAllMessages === "function"
       ) {
         const stream = await v2client.conversations.streamAllMessages();
-        console.warn(`XMTP: [v2] Stream started`);
+        console.log(`XMTP: [v2] Stream started`);
         for await (const message of stream) {
           let conversation = await xmtp.getConversationFromMessage(message);
           if (message && conversation) {
@@ -408,7 +406,6 @@ async function streamMessages(
                 conversation,
                 client,
               );
-              console.log(`parsedMessage`, parsedMessage);
               await onMessage(parsedMessage as Message);
             } catch (e) {
               console.log(`error`, e);