create-message-kit 1.0.15 → 1.0.17

package/{examples → templates}/gm/package.json

@@ -11,6 +11,7 @@
     "@xmtp/message-kit": "workspace:*"
   },
   "devDependencies": {
+    "@types/node": "^20.14.2",
     "nodemon": "^3.1.3",
     "typescript": "^5.4.5"
   },

package/templates/group/.env.example

@@ -0,0 +1,3 @@
+KEY= # the private key of the bot wallet 
+OPEN_AI_API_KEY= # openai api key
+STACK_API_KEY= # stack api key

package/{examples → templates}/group/package.json

@@ -13,6 +13,7 @@
     "openai": "^4.52.0"
   },
   "devDependencies": {
+    "@types/node": "^20.14.2",
     "nodemon": "^3.1.3",
     "typescript": "^5.4.5"
   },

package/{examples → templates}/group/src/handler/agent.ts

@@ -1,14 +1,15 @@
-import { HandlerContext, User } from "@xmtp/message-kit";
+import { HandlerContext, AbstractedMember } from "@xmtp/message-kit";
 import { textGeneration } from "../lib/openai.js";
 
 export async function handler(context: HandlerContext) {
   if (!process?.env?.OPEN_AI_API_KEY) {
-    console.log("No OPEN_AI_API_KEY found in .env");
+    console.warn("No OPEN_AI_API_KEY found in .env");
     return;
   }
 
   const {
     message: {
+      sender,
       content: { content, params },
     },
   } = context;
@@ -16,11 +17,13 @@ export async function handler(context: HandlerContext) {
   const systemPrompt = generateSystemPrompt(context);
   try {
     let userPrompt = params?.prompt ?? content;
-    console.log("userPrompt", userPrompt);
 
-    const { reply } = await textGeneration(userPrompt, systemPrompt);
-    console.log("intent:", reply);
-    context.intent(reply);
+    const { reply } = await textGeneration(
+      sender.address,
+      userPrompt,
+      systemPrompt,
+    );
+    context.skill(reply);
   } catch (error) {
     console.error("Error during OpenAI call:", error);
     await context.reply("An error occurred while processing your request.");
@@ -30,7 +33,7 @@ export async function handler(context: HandlerContext) {
 function generateSystemPrompt(context: HandlerContext) {
   const {
     members,
-    commands,
+    skills,
     message: { sender },
   } = context;
 
@@ -39,10 +42,15 @@ function generateSystemPrompt(context: HandlerContext) {
   
   You are a helpful bot agent that lives inside a web3 messaging group that helps interpret user requests and execute commands.
   #### Users
-   ${JSON.stringify(members?.map((member: User) => ({ ...member, username: `@${member.username}` })))}\n 
+   ${JSON.stringify(
+     members?.map((member: AbstractedMember) => ({
+       ...member,
+       username: `@${member.accountAddresses[0]}`,
+     })),
+   )}\n
   #### Commands
-  ${JSON.stringify(commands)}\n
-  The message was sent by @${sender?.username}
+  ${JSON.stringify(skills)}\n
+  The message was sent by @${sender?.address}
   
   ### Examples
   prompt /agent tip alix and bo

package/{examples → templates}/group/src/handler/game.ts

@@ -17,8 +17,8 @@ export async function handler(context: HandlerContext) {
   }
   // URLs for each game type
   const gameUrls: { [key: string]: string } = {
-    wordle: "https://framedl.xyz/",
-    slot: "https://slot-machine-frame.vercel.app/",
+    wordle: "https://framedl.xyz",
+    slot: "https://slot-machine-frame.vercel.app",
   };
   // Respond with the appropriate game URL or an error message
   switch (params.game) {

package/{examples → templates}/group/src/handler/loyalty.ts

@@ -1,4 +1,4 @@
-import { HandlerContext, User } from "@xmtp/message-kit";
+import { HandlerContext, AbstractedMember } from "@xmtp/message-kit";
 import { getStackClient } from "../lib/stack.js";
 
 export async function handler(context: HandlerContext, fake?: boolean) {
@@ -6,15 +6,8 @@ export async function handler(context: HandlerContext, fake?: boolean) {
   const {
     members,
     group,
-    getMessageById,
-    message: {
-      content,
-      content: { command },
-      sender,
-      typeId,
-    },
+    message: { sender, typeId, content },
   } = context;
-  console.log(command);
   if (typeId === "text" && group) {
     const { command } = content;
     if (command === "points") {
@@ -40,14 +33,13 @@ export async function handler(context: HandlerContext, fake?: boolean) {
   } else if (typeId === "group_updated" && group) {
     const { initiatedByInboxId, addedInboxes } = content;
     const adminAddress = members?.find(
-      (member: User) => member.inboxId === initiatedByInboxId,
+      (member: AbstractedMember) => member.inboxId === initiatedByInboxId,
     );
     if (addedInboxes && addedInboxes.length > 0) {
       //if add someone to the group
       await stack?.track("referral", {
         points: 10,
         account: adminAddress?.address ?? "",
-        uniqueId: adminAddress?.username ?? "",
       });
     }
   }

package/{examples → templates}/group/src/handler/splitpayment.ts

@@ -1,14 +1,15 @@
 import { HandlerContext } from "@xmtp/message-kit";
 import { vision, textGeneration } from "../lib/openai.js";
+import { getUserInfo } from "../lib/resolver.js";
 
 export async function handler(context: HandlerContext) {
   if (!process?.env?.OPEN_AI_API_KEY) {
-    console.log("No OPEN_AI_API_KEY found in .env");
+    console.warn("No OPEN_AI_API_KEY found in .env");
     return;
   }
   const {
     members,
-    commands,
+    skills,
     message: {
       typeId,
       content: { attachment },
@@ -16,8 +17,12 @@ export async function handler(context: HandlerContext) {
     },
   } = context;
 
+  if (!members) {
+    return;
+  }
+  let senderInfo = await getUserInfo(sender.address);
   if (attachment && typeId === "remoteStaticAttachment") {
-    const { data, filename, mimeType } = attachment;
+    const { data } = attachment;
     const response = await vision(
       data,
       "This image is the bill of a restaurant dinner. Return the total. If you can't find the total, return 'undefined'.",
@@ -31,9 +36,6 @@ export async function handler(context: HandlerContext) {
     }
     if (response) {
       const prompt = `You a split wise agent that splits the bill between the members of this group except for the sender and bot.\n
-      These are the users of the group: ${JSON.stringify(members?.map((member) => ({ ...member, username: `@${member.username}` })))}\n 
-      This group app has many commands available: ${JSON.stringify(commands)}\n
-      
 
       ## Instructions:
       When you receive the totals you should split the bill between the members of the group and send to each one a transaction frame
@@ -44,18 +46,23 @@ export async function handler(context: HandlerContext) {
       Example:
       [  
         "This are the details: Total: $49.52. Tip (20%): $9.90",
-        "All users owe X USDC to @${sender?.username}. Pay here:",
-        "/send @${sender?.username} $9.90"
+        "All users owe X USDC to @${senderInfo?.converseUsername}. Pay here:",
+        "/send @${senderInfo?.converseUsername} $9.90"
       ]
       `;
 
       //I want the reply to be an array of messages so the bot feels like is sending multuple ones
-      const { reply } = await textGeneration(response, prompt);
+      const { reply } = await textGeneration(
+        sender.address,
+        response,
+        prompt,
+        true,
+      );
       let splitMessages = JSON.parse(reply);
       for (const message of splitMessages) {
         let msg = message as string;
-        if (msg.startsWith("/")) await context.intent(msg);
-        else await context.reply(msg);
+        if (msg.startsWith("/")) await context.skill(msg);
+        else await context.send(msg);
       }
     }
   }

package/{examples → templates}/group/src/handler/tipping.ts

@@ -1,4 +1,5 @@
-import { HandlerContext, User } from "@xmtp/message-kit";
+import { HandlerContext, AbstractedMember } from "@xmtp/message-kit";
+import { getUserInfo } from "../lib/resolver.js";
 
 export async function handler(context: HandlerContext) {
   const {
@@ -6,16 +7,15 @@ export async function handler(context: HandlerContext) {
     getMessageById,
     message: { content, sender, typeId },
   } = context;
+  console.log(sender);
   const msg = await getMessageById(content.reference);
   const replyReceiver = members?.find(
     (member) => member.inboxId === msg?.senderInboxId,
   );
   let amount: number = 0,
-    receivers: User[] = [];
+    receivers: AbstractedMember[] = [];
   // Handle different types of messages
   if (typeId === "reply" && replyReceiver) {
-    // Process reply messages/
-    //ha
     const { content: reply } = content;
 
     if (reply.includes("degen")) {
@@ -31,18 +31,22 @@ export async function handler(context: HandlerContext) {
       // Process text commands starting with "/tip"
       const {
         params: { amount: extractedAmount, username },
-        content: text,
       } = content;
       amount = extractedAmount || 10; // Default amount if not specified
-      receivers = username; // Extract receiver from parameters
+
+      receivers = await Promise.all(
+        username.map((username: string) => getUserInfo(username)),
+      );
     }
   }
   if (!sender || receivers.length === 0 || amount === 0) {
     context.reply("Sender or receiver or amount not found.");
     return;
   }
+  console.log(receivers);
   const receiverAddresses = receivers.map((receiver) => receiver.address);
   // Process sending tokens to each receiver
+
   context.sendTo(
     `You received ${amount} tokens from ${sender.address}.`,
     receiverAddresses,

package/{examples → templates}/group/src/handler/transaction.ts

@@ -1,4 +1,5 @@
 import { HandlerContext } from "@xmtp/message-kit";
+import { getUserInfo } from "../lib/resolver.js";
 
 // Main handler function for processing commands
 export async function handler(context: HandlerContext) {
@@ -7,26 +8,23 @@ export async function handler(context: HandlerContext) {
       content: { command, params },
     },
   } = context;
-  const baseUrl = "https://base-frame-lyart.vercel.app/transaction";
+  const baseUrl = "https://base-tx-frame.vercel.app/transaction";
 
   switch (command) {
     case "send":
       // Destructure and validate parameters for the send command
       const { amount: amountSend, token: tokenSend, username } = params; // [!code hl] // [!code focus]
-
-      if (!amountSend || !tokenSend || !username) {
+      let senderInfo = await getUserInfo(username);
+      if (!amountSend || !tokenSend || !senderInfo) {
         context.reply(
           "Missing required parameters. Please provide amount, token, and username.",
         );
         return;
       }
-      // Generate URL for the send transaction
-      let url_send = generateFrameURL(baseUrl, "send", {
-        amount: amountSend,
-        token: tokenSend,
-        receiver: username[0]?.address,
-      });
-      context.reply(`${url_send}`);
+      let name = senderInfo.converseUsername || senderInfo.address;
+
+      let sendUrl = `${baseUrl}/?transaction_type=send&amount=${amountSend}&token=${tokenSend}&receiver=${senderInfo.address}`;
+      context.send(`${sendUrl}`);
       break;
     case "swap":
       // Destructure and validate parameters for the swap command
@@ -38,13 +36,9 @@ export async function handler(context: HandlerContext) {
         );
         return;
       }
-      // Generate URL for the swap transaction
-      let url_swap = generateFrameURL(baseUrl, "swap", {
-        amount,
-        token_from,
-        token_to,
-      });
-      context.reply(`${url_swap}`);
+
+      let swapUrl = `${baseUrl}/?transaction_type=swap&token_from=${token_from}&token_to=${token_to}&amount=${amount}`;
+      context.send(`${swapUrl}`);
       break;
     case "show": // [!code hl] // [!code focus]
       // Show the base URL without the transaction path
@@ -55,26 +49,3 @@ export async function handler(context: HandlerContext) {
       context.reply("Unknown command. Use help to see all available commands.");
   }
 }
-
-// Function to generate a URL with query parameters for transactions
-function generateFrameURL(
-  baseUrl: string,
-  transaction_type: string,
-  params: { [key: string]: string | number | string[] | undefined },
-) {
-  // Filter out undefined parameters
-  let filteredParams: {
-    [key: string]: string | number | string[] | undefined;
-  } = {};
-
-  for (const key in params) {
-    if (params[key] !== undefined) {
-      filteredParams[key] = params[key];
-    }
-  }
-  let queryParams = new URLSearchParams({
-    transaction_type,
-    ...filteredParams,
-  }).toString();
-  return `${baseUrl}?${queryParams}`;
-}

package/templates/group/src/index.ts

@@ -0,0 +1,57 @@
+import { run, HandlerContext } from "@xmtp/message-kit";
+import { handler as splitpayment } from "./handler/splitpayment.js";
+
+// Main function to run the app
+run(
+  async (context: HandlerContext) => {
+    const {
+      message: { typeId },
+    } = context;
+    switch (typeId) {
+      case "reply":
+        handleReply(context);
+        break;
+      case "remoteStaticAttachment":
+        handleAttachment(context);
+        break;
+    }
+    if (!context.group) {
+      context.send("This is a group bot, add this address to a group");
+    }
+  },
+  { attachments: true },
+);
+async function handleReply(context: HandlerContext) {
+  const {
+    v2client,
+    getReplyChain,
+    version,
+    message: {
+      content: { reference },
+    },
+  } = context;
+
+  const { chain, isSenderInChain } = await getReplyChain(
+    reference,
+    version,
+    v2client.address,
+  );
+  //await context.skill(chain);
+}
+
+// Handle attachment messages
+async function handleAttachment(context: HandlerContext) {
+  await splitpayment(context);
+}
+
+export async function helpHandler(context: HandlerContext) {
+  const { skills } = context;
+  const intro =
+    "Available experiences:\n" +
+    skills
+      ?.flatMap((app) => app.skills)
+      .map((skill) => `${skill.command} - ${skill.description}`)
+      .join("\n") +
+    "\nUse these commands to interact with specific apps.";
+  context.send(intro);
+}

package/templates/group/src/lib/openai.ts

@@ -0,0 +1,137 @@
+import dotenv from "dotenv";
+dotenv.config();
+
+import OpenAI from "openai";
+const openai = new OpenAI({
+  apiKey: process.env.OPEN_AI_API_KEY,
+});
+
+export type ChatHistoryEntry = { role: string; content: string };
+export type ChatHistories = Record<string, ChatHistoryEntry[]>;
+
+let chatHistories: ChatHistories = {};
+export async function textGeneration(
+  address: string,
+  userPrompt: string,
+  systemPrompt: string,
+  isGroup: boolean = false,
+) {
+  let messages = chatHistories[address] || [];
+  if (messages.length === 0) {
+    messages.push({
+      role: "system",
+      content: systemPrompt,
+    });
+  }
+  messages.push({
+    role: "user",
+    content: userPrompt,
+  });
+  try {
+    const response = await openai.chat.completions.create({
+      model: "gpt-4o",
+      messages: messages as any,
+    });
+    const reply = response.choices[0].message.content;
+    messages.push({
+      role: "assistant",
+      content: reply || "No response from OpenAI.",
+    });
+    const cleanedReply = responseParser(reply as string);
+    if (!isGroup) chatHistories[address] = messages;
+    return { reply: cleanedReply, history: messages };
+  } catch (error) {
+    console.error("Failed to fetch from OpenAI:", error);
+    throw error;
+  }
+}
+
+// New method to interpret an image
+export async function vision(imageData: Uint8Array, systemPrompt: string) {
+  const base64Image = Buffer.from(imageData).toString("base64");
+  const dataUrl = `data:image/jpeg;base64,${base64Image}`;
+
+  // Create a new thread for each vision request
+  const visionMessages = [
+    {
+      role: "system",
+      content: systemPrompt,
+    },
+    {
+      role: "user",
+      content: [
+        { type: "text", text: systemPrompt },
+        {
+          type: "image_url",
+          image_url: {
+            url: dataUrl,
+          },
+        },
+      ],
+    },
+  ];
+
+  try {
+    const response = await openai.chat.completions.create({
+      model: "gpt-4o",
+      messages: visionMessages as any,
+    });
+    return response.choices[0].message.content;
+  } catch (error) {
+    console.error("Failed to interpret image with OpenAI:", error);
+    throw error;
+  }
+}
+
+export async function processResponseWithskill(
+  address: string,
+  reply: string,
+  context: any,
+) {
+  let messages = reply
+    .split("\n")
+    .map((message: string) => responseParser(message))
+    .filter((message): message is string => message.length > 0);
+
+  console.log(messages);
+  for (const message of messages) {
+    if (message.startsWith("/")) {
+      const response = await context.skill(message);
+      if (response && response.message) {
+        let msg = responseParser(response.message);
+
+        chatHistories[address].push({
+          role: "system",
+          content: msg,
+        });
+
+        await context.send(response.message);
+      }
+    } else {
+      await context.send(message);
+    }
+  }
+}
+export function responseParser(message: string) {
+  let trimmedMessage = message;
+  // Remove bold and underline markdown
+  trimmedMessage = trimmedMessage?.replace(/(\*\*|__)(.*?)\1/g, "$2");
+  // Remove markdown links, keeping only the URL
+  trimmedMessage = trimmedMessage?.replace(/\[([^\]]+)\]\(([^)]+)\)/g, "$2");
+  // Remove markdown headers
+  trimmedMessage = trimmedMessage?.replace(/^#+\s*(.*)$/gm, "$1");
+  // Remove inline code formatting
+  trimmedMessage = trimmedMessage?.replace(/`([^`]+)`/g, "$1");
+  // Remove single backticks at the start or end of the message
+  trimmedMessage = trimmedMessage?.replace(/^`|`$/g, "");
+  // Remove leading and trailing whitespace
+  trimmedMessage = trimmedMessage?.replace(/^\s+|\s+$/g, "");
+  // Remove any remaining leading or trailing whitespace
+  trimmedMessage = trimmedMessage.trim();
+
+  return trimmedMessage;
+}
+
+export const clearChatHistories = () => {
+  chatHistories = {};
+};

package/templates/group/src/lib/resolver.ts

@@ -0,0 +1,126 @@
+import { Client } from "@xmtp/xmtp-js";
+import { isAddress } from "viem";
+
+export const converseEndpointURL =
+  "https://converse-website-git-endpoit-ephemerahq.vercel.app";
+//export const converseEndpointURL = "http://localhost:3000";
+
+export type InfoCache = Map<string, UserInfo>;
+export type ConverseProfile = {
+  address: string | null;
+  onXmtp: boolean;
+  avatar: string | null;
+  formattedName: string | null;
+  name: string | null;
+};
+export type UserInfo = {
+  ensDomain?: string | undefined;
+  address?: string | undefined;
+  converseUsername?: string | undefined;
+  ensInfo?: EnsData | undefined;
+  avatar?: string | undefined;
+};
+export interface EnsData {
+  address?: string;
+  avatar?: string;
+  avatar_small?: string;
+  converse?: string;
+  avatar_url?: string;
+  contentHash?: string;
+  description?: string;
+  ens?: string;
+  ens_primary?: string;
+  github?: string;
+  resolverAddress?: string;
+  twitter?: string;
+  url?: string;
+  wallets?: {
+    eth?: string;
+  };
+}
+
+let infoCache: InfoCache = new Map();
+
+export const clearInfoCache = () => {
+  infoCache.clear();
+};
+export const getUserInfo = async (
+  key: string,
+  clientAddress?: string,
+): Promise<UserInfo | null> => {
+  let data: UserInfo = infoCache.get(key) || {
+    ensDomain: undefined,
+    address: undefined,
+    converseUsername: undefined,
+    ensInfo: undefined,
+  };
+  //console.log("Getting user info", key, clientAddress);
+  if (isAddress(clientAddress || "")) {
+    data.address = clientAddress;
+  } else if (isAddress(key || "")) {
+    data.address = key;
+  } else if (key.includes(".eth")) {
+    data.ensDomain = key;
+  } else if (key == "@user" || key == "@me" || key == "@bot") {
+    data.address = clientAddress;
+    data.ensDomain = key.replace("@", "") + ".eth";
+    data.converseUsername = key.replace("@", "");
+  } else if (key == "@alix") {
+    data.address = "0x3a044b218BaE80E5b9E16609443A192129A67BeA";
+    data.converseUsername = "alix";
+  } else if (key == "@bo") {
+    data.address = "0xbc3246461ab5e1682baE48fa95172CDf0689201a";
+    data.converseUsername = "bo";
+  } else {
+    data.converseUsername = key;
+  }
+
+  let keyToUse = data.address || data.ensDomain || data.converseUsername;
+  let cacheData = keyToUse && infoCache.get(keyToUse);
+  if (cacheData) {
+    //console.log("Getting user info", keyToUse, cacheData);
+    return cacheData;
+  } else {
+    //console.log("Getting user info", keyToUse, data);
+  }
+
+  if (keyToUse?.includes(".eth")) {
+    const response = await fetch(`https://ensdata.net/${keyToUse}`);
+    const ensData: EnsData = (await response.json()) as EnsData;
+    //console.log("Ens data", ensData);
+    if (ensData) {
+      data.ensInfo = ensData;
+      data.ensDomain = ensData?.ens;
+      data.address = ensData?.address;
+    }
+  } else if (keyToUse) {
+    keyToUse = keyToUse.replace("@", "");
+    const response = await fetch(`${converseEndpointURL}/profile/${keyToUse}`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+      body: JSON.stringify({
+        peer: keyToUse,
+      }),
+    });
+    const converseData = (await response.json()) as ConverseProfile;
+    if (process.env.MSG_LOG)
+      console.log("Converse data", keyToUse, converseData);
+    data.converseUsername =
+      converseData?.formattedName || converseData?.name || undefined;
+    data.address = converseData?.address || undefined;
+    data.avatar = converseData?.avatar || undefined;
+  }
+  if (data.address) infoCache.set(data.address, data);
+  return data;
+};
+export const isOnXMTP = async (
+  client: Client,
+  domain: string | undefined,
+  address: string | undefined,
+) => {
+  if (domain == "fabri.eth") return false;
+  if (address) return (await client.canMessage([address])).length > 0;
+};