Tidy repo, add emoji support to appCards, various fixes

valgaze · Feb 27, 2024 · 814f163 · 814f163
1 parent 4229dcd
commit 814f163
Show file tree

Hide file tree

Showing 24 changed files with 102 additions and 263 deletions.
diff --git a/docs/assets/bongo.png b/docs/assets/bongo.png
diff --git a/docs/assets/build_a_bot.gif b/docs/assets/build_a_bot.gif
diff --git a/docs/assets/card_nosubmit.gif b/docs/assets/card_nosubmit.gif
diff --git a/docs/assets/deno/deno_addcode.png b/docs/assets/deno/deno_addcode.png
diff --git a/docs/assets/deno/deno_playground.png b/docs/assets/deno/deno_playground.png
diff --git a/docs/assets/deno/deno_webhook.png b/docs/assets/deno/deno_webhook.png
diff --git a/docs/assets/deno/set_secrets.png b/docs/assets/deno/set_secrets.png
diff --git a/docs/assets/deno/set_secrets_saved.png b/docs/assets/deno/set_secrets_saved.png
diff --git a/docs/assets/download.png b/docs/assets/download.png
diff --git a/docs/assets/download2.png b/docs/assets/download2.png
diff --git a/docs/assets/regen_token.gif b/docs/assets/regen_token.gif
diff --git a/docs/assets/speedy.jpeg b/docs/assets/speedy.jpeg
diff --git a/docs/examples/deno/README.md b/docs/examples/deno/README.md
@@ -16,192 +16,11 @@ Note: The steps below assume you have a **[working WebEx account](https://develo
 
 - Press the blue "New Playground" button
 
-![sb](./../../assets/deno/deno_playground.png)
+![sb](https://raw.githubusercontent.com/valgaze/speedybot-utils/main/assets/various/deno/deno_playground.png)
 
-Note: There are many (better) ways to setup Deno, but for now we can just use the Playground and copy/paste everything in the panel below:
+Note: There are many (better) ways to setup Deno, but for now we can just use the Playground and copy/paste everything in **[index.ts](./index.ts)**
 
-## 2a) Copy the code below into the playground
-
-<details><summary>💡 Tap here to open code (copy me)</summary>
-
-```ts
-import { SpeedyBot, logoRoll } from "https://cdn.skypack.dev/speedybot@latest";
-
-Deno.serve(async (req: Request) => {
-  if (req.method === "GET") {
-    return new Response(`Server is running ${new Date()} ${logoRoll()}`);
-  }
-
-  const CONFIG = {
-    token: Deno.env.get("token"),
-    webhookSecret: Deno.env.get("webhookSecret"),
-  };
-
-  if (req.method === "POST") {
-    const signature =
-      req.headers.get("x-spark-signature") ||
-      req.headers.get("X-Spark-Signature");
-    const Bot = new SpeedyBot(CONFIG.token);
-    const json = await req.json();
-
-    if (signature) {
-      const validateWebhook = async <T = any>(
-        requestData: T,
-        secret: string,
-        signature: string
-      ): Promise<boolean> => {
-        const stringyBody =
-          typeof requestData !== "string"
-            ? JSON.stringify(requestData)
-            : requestData;
-        const algo = {
-          name: "HMAC",
-          hash: "SHA-1",
-        };
-        const enc = {
-          name: "UTF-8",
-        };
-        const hmacKey = await crypto.subtle.importKey(
-          "raw",
-          new TextEncoder().encode(secret),
-          algo,
-          false,
-          ["sign"]
-        );
-        const hmacData = await crypto.subtle.sign(
-          algo,
-          hmacKey,
-          new TextEncoder().encode(stringyBody)
-        );
-
-        const bufferToHex = (buffer: ArrayBufferLike) => {
-          return Array.prototype.map
-            .call(new Uint8Array(buffer), (x) =>
-              ("00" + x.toString(16)).slice(-2)
-            )
-            .join("");
-        };
-        const hmacDataHex = bufferToHex(hmacData);
-        return hmacDataHex === signature;
-      };
-      const proceed = await validateWebhook(
-        json,
-        CONFIG.webhookSecret,
-        signature
-      );
-      if (proceed === false) {
-        return new Response("Webhook Secret Rejected");
-      }
-    }
-
-    Bot.exact("$clear", async ($) => {
-      await $.clearScreen();
-      return $.end;
-    });
-
-    Bot.addStep(async ($) => {
-      if ($.data && !$.data.showCard) {
-        const dataSnippet = $.buildDataSnippet($.data);
-        await $.send(`This data was submitted:`);
-        await $.send(dataSnippet);
-        return $.end;
-      } else {
-        return $.next;
-      }
-    });
-
-    Bot.addStep(async ($) => {
-      await $.send(`helllllooo, you said "${$.text}"`);
-      const card = $.card().survey([
-        {
-          type: "text",
-          question: "What is the name of your company?",
-          id: "company_name",
-        },
-        {
-          type: "text",
-          question: "Describe the service performed by the vendor.",
-          id: "service_type",
-        },
-        {
-          type: "picker-date",
-          question: "When was the service provided?",
-          id: "service_date",
-        },
-        {
-          type: "single-select",
-          question: "How would you rate the quality of service?",
-          choices: ["Excellent", "Good", "Average", "Poor", "Very poor"],
-          id: "service_quality",
-        },
-        {
-          type: "multi-select",
-          question: "What were the highlights of the service?",
-          choices: [
-            "Communication",
-            "Punctuality",
-            "Time to Resolution",
-            "Friendliness",
-            "Cost",
-          ],
-          id: "service_highlights",
-        },
-        {
-          type: "single-select",
-          question:
-            "Would you consider using our services again in the future?",
-          choices: [
-            "Definitely",
-            "Probably",
-            "Not sure",
-            "Probably not",
-            "Definitely not",
-          ],
-          id: "future_use",
-        },
-        {
-          type: "textarea",
-          question:
-            "Please provide any other comments or suggestions for improvement.",
-          id: "other_comments",
-        },
-        {
-          type: "picker-time",
-          question: "What time of day is preferable for future contact?",
-          id: "preferred_contact_time",
-        },
-        {
-          type: "picker-dropdown",
-          question: "Preferred method of communication for future updates?",
-          choices: ["Email", "Phone", "Text"],
-          id: "communication_method",
-        },
-      ]);
-
-      await $.send(card);
-
-      return $.next;
-    });
-
-    Bot.captureError(async (payload) => {
-      const { roomId } = payload;
-      if (roomId) {
-        await Bot.sendTo(
-          roomId,
-          `Whoops, there was a problem: ${payload.message}`
-        );
-      }
-    });
-
-    await Bot.runMiddleware(json);
-  }
-  return new Response(`Request processed`); // webhooks should return **something**
-});
-```
-
-</details>
-
-![sb](./../../assets/deno/deno_addcode.png)
+![sb](https://raw.githubusercontent.com/valgaze/speedybot-utils/main/assets/various/deno/deno_addcode.png)
 
 ## 3) Expose your bot access token to Deno
 
@@ -211,51 +30,24 @@ Deno.serve(async (req: Request) => {
 
 - If you're using a webhook secret (which you should), add it as a secret `webhookSecret`
 
-![sb](./../../assets/deno/set_secrets.png)
+![sb](https://raw.githubusercontent.com/valgaze/speedybot-utils/main/assets/various/deno/set_secrets.png)
 
 Verify you hit save underneath each secret you add to the playground
 
-![sb](./../../assets/deno/set_secrets_saved.png)
+![sb](https://raw.githubusercontent.com/valgaze/speedybot-utils/main/assets/various/deno/set_secrets_saved.png)
 
 ## 4) Register your webhook
 
-- Right now if you try to interact with your "deployed" agent nothing happens, nobody is "home" to answer the knock at the door
+- Grab your playground's URL (it'll be a strange name like https://noisy-bongodrum-75.deno.dev) and register your webhook using SpeedyBot Garage
 
-- Grab your playground's URL (it'll likely be a strange/random name like https://noisy-bongodrum-75.deno.dev) and register your webhook using SpeedyBot Garage
+- Visit https://speedybot.js.org/garage and select **webhooks** and add your URL and optional (though highly recommeneded) webhook secret
 
-- Hop on over to the **[SpeedyBot Garage (https://speedybot.js.org/garage)](https://speedybot.js.org/garage)**, enter your access token, select the Webhooks tab, and then **Add New Webhook** and add your Worker's URL and (optionally but hopefully) a webhook secret
+- If all went well you should see this and your bot is up and running on Deno!
 
-<img src="https://raw.githubusercontent.com/valgaze/speedybot-utils/main/assets/various/webhook_steps.gif" 
-   :style="{ filter: isDark ? 'invert(1)' : 'none' }"
-    style="
-      margin: 1rem 0px;
-      display: inline-block;
-      max-width: 100%;
-      height: auto;
-      border-radius: 10px;
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-      padding: 10px;
-    "/>
+![sb](https://raw.githubusercontent.com/valgaze/speedybot-utils/main/assets/various/deno/deno_webhook.png)
 
 ## 5) Take it for a spin
 
 After connecting webhooks, send your bot a message to take it for a spin
 
-<img src="https://raw.githubusercontent.com/valgaze/speedybot-utils/main/assets/various/first_spin.gif"
-   :style="{ filter: isDark ? 'invert(1)' : 'none' }"
-    style="
-      margin: 1rem 0px;
-      display: inline-block;
-      max-width: 100%;
-      height: auto;
-      border-radius: 10px;
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-      padding: 10px;
-    "/>
-
-<script setup>
-import { useData } from 'vitepress'
-import { useCustomStore } from "./../../.vitepress/util/store";
-const { isDark } = useData()
-const store = useCustomStore()
-</script>
+<img src="https://raw.githubusercontent.com/valgaze/speedybot-utils/main/assets/various/first_spin.gif" />
diff --git a/docs/new.md b/docs/new.md
@@ -13,7 +13,7 @@ Follow the quick setup below to go from zero to a SpeedyBot running on your loca
 The flow to get a token will look roughly like this:
 
 <img
-    src="./assets/build_a_bot.gif"
+    src="https://raw.githubusercontent.com/valgaze/speedybot-utils/main/assets/various/new/build_a_bot.gif"
     :style="{ filter: isDark ? 'invert(1)' : 'none' }"
     style="
       margin: 1rem 0px;
@@ -41,7 +41,7 @@ SpeedyBot does **NOT** log/persist or do anything (except what you tell it to do
 **REMEMBER:** If your agent's access token is ever compromised/exposed, you can always invalidate it + get a new one by tapping "Regenerate Access Token" under your agent's <a href="https://developer.webex.com/my-apps" style="color:#646cff;text-decoration: bold;">settings page</a>
 
 <img
-    src="./assets/regen_token.gif"
+    src="https://raw.githubusercontent.com/valgaze/speedybot-utils/main/assets/various/new/regen_token.gif"
     :style="{ filter: isDark ? 'invert(1)' : 'none' }"
     style="
       margin: 1rem 0px;
@@ -73,7 +73,7 @@ SpeedyBot does **NOT** log/persist or do anything (except what you tell it to do
   />
 
 <img
-    src="./assets/card_nosubmit.gif"
+    src="https://raw.githubusercontent.com/valgaze/speedybot-utils/main/assets/various/new/card_nosubmit.gif"
     :style="{ filter: isDark ? 'invert(1)' : 'none' }"
     style="
       margin: 1rem 0px;
@@ -133,7 +133,7 @@ volta install node
 
 However you set up your system, make sure to run `node -v` in your terminal to verify node is correctly installed and you can get up and running with `npx speedybot setup --project default`:
 
-<img src="https://raw.githubusercontent.com/valgaze/speedybot-utils/main/assets/various/cli_setup.gif"     
+<img src="https://raw.githubusercontent.com/valgaze/speedybot-utils/main/assets/various/new/cli_setup.gif"     
     :style="{ filter: !isDark ? 'invert(1)' : 'none' }"
     style="
       margin: 1rem 0px;

diff --git a/docs/send-a-card.md b/docs/send-a-card.md
@@ -82,20 +82,19 @@ ref="rootRef"
 - In fact, any user interaction with a card sent from {{ store.state.userData?.emails[0] ?? 'your account'}} right now results in icy radio silence, the data doesn't "go" anywhere
 
 - If you want to collect the data from a SpeedyCard, you'll need a SpeedyBot for that. You can set one up in about 20 seconds (really) by visiting <a href="https://speedybot.js.org/new" target="_blank">https://speedybot.js.org/new</a>
-
-<img
-    src="./assets/card_nosubmit.gif"
-    :style="{ filter: isDark ? 'invert(1)' : 'none' }"
-    style="
-      margin: 1rem 0px;
-      display: inline-block;
-      max-width: 100%;
-      height: auto;
-      border-radius: 10px;
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-      padding: 10px;
-    "
-  />
+  <img
+      src="https://raw.githubusercontent.com/valgaze/speedybot-utils/main/assets/various/new/card_nosubmit.gif"
+      :style="{ filter: isDark ? 'invert(1)' : 'none' }"
+      style="
+        margin: 1rem 0px;
+        display: inline-block;
+        max-width: 100%;
+        height: auto;
+        border-radius: 10px;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+        padding: 10px;
+      "
+    />
 
 </div>
 

diff --git a/examples/deno/README.md b/examples/deno/README.md
@@ -16,11 +16,11 @@ Note: The steps below assume you have a **[working WebEx account](https://develo
 
 - Press the blue "New Playground" button
 
-![sb](./../../docs/assets/deno/deno_playground.png)
+![sb](https://raw.githubusercontent.com/valgaze/speedybot-utils/main/assets/various/deno/deno_playground.png)
 
 Note: There are many (better) ways to setup Deno, but for now we can just use the Playground and copy/paste everything in **[index.ts](./index.ts)**
 
-![sb](./../../docs/assets/deno/deno_addcode.png)
+![sb](https://raw.githubusercontent.com/valgaze/speedybot-utils/main/assets/various/deno/deno_addcode.png)
 
 ## 3) Expose your bot access token to Deno
 
@@ -30,11 +30,11 @@ Note: There are many (better) ways to setup Deno, but for now we can just use th
 
 - If you're using a webhook secret (which you should), add it as a secret `webhookSecret`
 
-![sb](./../../docs/assets/deno/set_secrets.png)
+![sb](https://raw.githubusercontent.com/valgaze/speedybot-utils/main/assets/various/deno/set_secrets.png)
 
 Verify you hit save underneath each secret you add to the playground
 
-![sb](./../../docs/assets/deno/set_secrets_saved.png)
+![sb](https://raw.githubusercontent.com/valgaze/speedybot-utils/main/assets/various/deno/set_secrets_saved.png)
 
 ## 4) Register your webhook
 
@@ -44,7 +44,7 @@ Verify you hit save underneath each secret you add to the playground
 
 - If all went well you should see this and your bot is up and running on Deno!
 
-![sb](./../../docs/assets/deno/deno_webhook.png)
+![sb](https://raw.githubusercontent.com/valgaze/speedybot-utils/main/assets/various/deno/deno_webhook.png)
 
 ## 5) Take it for a spin
 

diff --git a/examples/llm-stream/settings/bot.ts b/examples/llm-stream/settings/bot.ts
@@ -1,9 +1,9 @@
 import { SpeedyBot } from "speedybot";
 
 import { OpenAIStream } from "./llm-stream";
-const Bot = new SpeedyBot();
+const Bot = new SpeedyBot<"OPEN_AI_KEY">();
 
-const showDebug = false;
+const showDebug = false; // show debug info flag
 
 Bot.exact("$clear", async ($) => {
   await $.clearScreen();
@@ -34,6 +34,7 @@ Bot.addStep(async ($) => {
   if ($.text) {
     const rootMsg = await $.reply("Thinking...");
     OpenAIStream(
+      Bot.getSecret("OPEN_AI_KEY") as string,
       $.text,
       async (curr, isFinal) => {
         await $.edit(rootMsg, curr);