Val Town Code SearchReturn to Val Town

8// Environment variables should be set in your Val Town val's settings
9const WHATSAPP_WEBHOOK_VERIFY_TOKEN = Deno.env.get("WHATSAPP_WEBHOOK_VERIFY_TOKEN");
10const WHATSAPP_GRAPH_API_TOKEN = Deno.env.get("WHATSAPP_GRAPH_API_TOKEN");
11const WHATSAPP_BUSINESS_ID = Deno.env.get("WHATSAPP_BUSINESS_ID");
12const GROQ_API_KEY = Deno.env.get("GROQ_API_KEY"); // For the new quick ack
13
14// URL of YOUR Cloudflare Worker that orchestrates MCP calls & has /initiate-async-chat
46// --- Helper Functions ---
47async function sendWhatsAppMessage(phoneNumber, businessId, text, originalMessageId) {
48  if (!WHATSAPP_GRAPH_API_TOKEN || !businessId) {
49    console.error("WhatsApp API token or business ID is missing. Cannot send message.");
50    return;
51  }
58        method: "POST",
59        headers: {
60          "Authorization": `Bearer ${WHATSAPP_GRAPH_API_TOKEN}`,
61          "Content-Type": "application/json",
62        },
90  let messageToSend = "Hmm, let me look into that for you!"; // Default deferral message
91
92  if (!GROQ_API_KEY) {
93    console.warn("[SmartAck] GROQ_API_KEY missing. Sending static deferral ack.");
94    await sendWhatsAppMessage(phoneNumber, businessId, messageToSend, originalMessageId);
95    return { action: "defer_to_worker", messageSent: messageToSend };
177  try {
178    console.log(`[SmartAck] Attempting to generate smart ack for: "${userQuery.substring(0, 50)}..." with ${QUICK_ACK_MODEL}`);
179    const groqResponse = await fetch("https://api.groq.com/openai/v1/chat/completions", {
180      method: "POST",
181      headers: {
182        "Authorization": `Bearer ${GROQ_API_KEY}`,
183        "Content-Type": "application/json",
184      },
198    if (!groqResponse.ok) {
199      const errorText = await groqResponse.text().catch(() => "Could not retrieve error text");
200      console.error(`[SmartAck] Error from Groq API: ${groqResponse.status} ${groqResponse.statusText}`, errorText);
201      // Fallback to deferral message
202    } else {
308    console.log(`[initiateChat] Sending to CF Orchestrator (${CLOUDFLARE_WORKER_ORCHESTRATOR_URL}/initiate-async-chat) for ${userIdentifier}:`, JSON.stringify(mcpPayload, null, 2));
309
310    const mcpApiResponse = await fetch(`${CLOUDFLARE_WORKER_ORCHESTRATOR_URL}/initiate-async-chat`, {
311      method: "POST",
312      headers: { "Content-Type": "application/json" },
314    });
315
316    if (!mcpApiResponse.ok) {
317      const errorText = await mcpApiResponse.text();
318      console.error(`[initiateChat] Error from CF Orchestrator for ${clientRequestId}: ${mcpApiResponse.status} ${mcpApiResponse.statusText}`, errorText);
319      await sendWhatsAppMessage(userIdentifier, businessPhoneNumberId, "Sorry, I couldn't start a session with the assistant.", originalMessageId);
320      return { error: true, details: errorText };
321    } else {
322      const mcpResponseData = await mcpApiResponse.json();
323      console.log(`[initiateChat] Response from CF Orchestrator for ${clientRequestId} (Status ${mcpApiResponse.status}):`, mcpResponseData);
324      return { error: false, data: mcpResponseData };
325    }
458    console.log(`[PROCESS] Smartly Acknowledging for ${userPhoneNumber} (hash: ${queryHash || 'N/A'}). Effective Query for Ack: "${userQueryForSmartAck.substring(0,50)}..."`);
459
460    if (WHATSAPP_GRAPH_API_TOKEN && business_phone_number_id) {
461      // 1. Mark as read (sends blue check for the CURRENT incoming message)
462      try {
463        console.log(`Marking read for ${userPhoneNumber} (msg_id: ${currentMessageId})`);
464        const markReadResp = await fetch(`https://graph.facebook.com/v22.0/${business_phone_number_id}/messages`, {
465          method: "POST", headers: {"Authorization": `Bearer ${WHATSAPP_GRAPH_API_TOKEN}`, "Content-Type": "application/json"},
466          body: JSON.stringify({messaging_product: "whatsapp", status: "read", message_id: currentMessageId}),
467        });
494
495    } else {
496      console.error("WHATSAPP_GRAPH_API_TOKEN or business_phone_number_id missing.");
497    }
498  } else if (waMessage) {
534    // This means for direct GET, you'd need to monitor this Val's `/cf-worker-updates` or provide one.
535
536    const userIdentifier = "direct_api_user_" + crypto.randomUUID();
537    const clientRequestId = crypto.randomUUID(); // Not used by initiateChat directly, but good practice
538
653// Handle sending the welcome message
654app.post("/send-welcome", async (c) => {
655  if (!WHATSAPP_GRAPH_API_TOKEN || !WHATSAPP_BUSINESS_ID) {
656    console.error("WhatsApp API token or Business ID is not configured.");
657    return c.json({ error: "Server configuration error: WhatsApp API token or Business ID is missing." }, 500);
658  }
659
686        method: "POST",
687        headers: {
688          "Authorization": `Bearer ${WHATSAPP_GRAPH_API_TOKEN}`,
689          "Content-Type": "application/json",
690        },
697    );
698
699    const responseData = await response.json().catch(() => ({ error: { message: "Received non-JSON response from WhatsApp API" } }));
700
701    if (!response.ok) {
702      console.error(`Error sending custom message to ${phoneNumber}: ${response.status} ${response.statusText}`, responseData);
703      return c.json({ error: `WhatsApp API Error: ${responseData.error?.message || response.statusText}`, details: responseData }, response.status > 0 ? response.status : 500);
704    }
705    

8  const { isAuthenticated, authenticate, error } = useAuth();
9  const [tokenValue, setTokenValue] = useState("");
10  const [apiKey, setApiKey] = useState("");
11  // const [invalid, setInvalid] = useState(""); // TODO
12
13  const handleSubmit = (e) => {
14    e.preventDefault();
15    authenticate(tokenValue, apiKey);
16  };
17
36      >
37        <div>
38          <label htmlFor="valtown-token" className="label">Val Town API Token</label>
39          <div style={{ fontSize: "0.8em", color: "#666" }}>
40            <p>
41              <a href="https://www.val.town/settings/api/new" target="_blank" rel="noreferrer">
42                Create a Val Town token here
43              </a>
58        </div>
59        <div>
60          <label htmlFor="anthropic-api-key" className="label">Anthropic API Key (optional)</label>
61          <input
62            type="password"
63            id="anthropic-api-key"
64            name="anthropic-key"
65            value={apiKey}
66            onChange={e => {
67              setApiKey(e.target.value);
68            }}
69          />