Flow XO Custom Channel

Let's Chat:

\n \n\n

\n \n loading messages…\n

\n\n \n\n \n",[],[157,175],{"_102":183,"_95":184,"_158":185,"_160":159,"_161":139,"_162":163,"_164":116,"_104":186,"_99":32,"_166":187,"_168":188,"_169":22,"_170":-5,"_171":189,"_98":190},"3fd74cec-cb74-11f0-925f-42dde27851f2","script.js","019ac4a9-e3db-75ce-aff5-c7d9abe5321f",["D",1764236059544],"script","// client-side js, loaded by index.html\n// run by the browser each time the page is loaded\n\n// define variables that reference elements on our page\nconst messageList = document.getElementById(\"messages\");\nconst messageForm = document.querySelector(\"form\");\nconst channel = \"some@user.com\";\nconst userId = \"123abc\";\nconst userName = \"Some User\";\n\nfunction makeMessage(messageText) {\n return {\n channel: {\n id: channel,\n },\n from: {\n id: userId,\n name: userName,\n },\n message: { text: messageText },\n metadata: {\n origin: window.location.href,\n },\n };\n}\n\nfunction sendNewMessage(message) {\n const payload = makeMessage(message);\n const opts = {\n method: \"POST\",\n body: JSON.stringify(payload),\n headers: {\n \"Content-Type\": \"application/json\",\n },\n };\n return fetch(\"/in\", opts).then(() => payload);\n}\n\nfunction formatMessage(payload, from) {\n const message = JSON.stringify(payload.message.text || payload.message)\n .replace(/(\\\\n)+/, \"
\");\n let formatted =\n `${from}: ${message}`;\n if (payload.options && payload.options.choices_message) {\n formatted +=\n `

${payload.options.choices_message}

`;\n }\n return formatted;\n}\n\nfunction appendNewMessage(data) {\n const message = data.message;\n if (!message.message || message.message_type === \"action\") {\n return;\n }\n const newListItem = document.createElement(\"p\");\n newListItem.innerHTML = formatMessage(message, data.from);\n messageList.appendChild(newListItem);\n}\n\nfunction resetMessages() {\n return fetch(\"/reset\");\n}\n\nfunction getMessages() {\n return fetch(\"/messages\")\n .then((response) => response.json())\n .then((data) => data.messages);\n}\n\nfunction displayMessages(messages) {\n messageList.innerHTML = \"\";\n messages.forEach(appendNewMessage);\n}\n\n// fetch the initial list of messages\nfetch(\"/messages\")\n .then((response) => response.json()) // parse the JSON from the server\n .then((data) => {\n // remove the loading text\n messageList.firstElementChild.remove();\n\n // iterate through every message and add it to our page\n data.messages.forEach(appendNewMessage);\n\n //set a timer to continuously fetch new messages\n setInterval(() => getMessages().then(displayMessages), 2000);\n\n // listen for the form to be submitted and add a new message when it is\n messageForm.addEventListener(\"submit\", (event) => {\n // stop our form submission from refreshing the page\n event.preventDefault();\n\n // get message value and add it to the list\n const newMessage = messageForm.elements.message.value;\n\n sendNewMessage(newMessage).then((message) => {\n appendNewMessage(message);\n\n // reset form\n messageForm.reset();\n messageForm.elements.message.focus();\n });\n });\n\n //If there are no messages, send a start message to kick off the conversation\n if (!data.messages.length) {\n sendNewMessage(\"start\");\n }\n });",[],[157,184],{"_102":192,"_95":193,"_158":194,"_160":159,"_161":139,"_162":163,"_164":116,"_104":195,"_99":32,"_166":178,"_168":196,"_169":22,"_170":-5,"_171":197,"_98":198},"3fd75d36-cb74-11f0-925f-42dde27851f2","style.css","019ac4a9-e3db-75ce-aff5-cb5120cb7d85",["D",1764236059544],"/* this file is loaded by index.html and styles the page */\n\n* {\n box-sizing: border-box;\n}\n\nspan.bot {\n font-weight: bold;\n color: pink;\n}\n\nspan.user {\n font-weight: bold;\n color: yellow;\n}\n\ndiv.choices {\n color: #aaa;\n border: 1px solid #eee;\n padding: 5px;\n}\n\nbody {\n font-family: sans-serif;\n margin: 2em 1em;\n line-height: 1.5em;\n}\n\nh1 {\n font-style: italic;\n color: #373fff;\n max-width: calc(100% - 5rem);\n line-height: 1.1;\n}\n\nform {\n background-color: #eee;\n display: grid;\n grid-gap: 1em;\n padding: 1em;\n max-width: 40ch;\n}\n\ninput {\n border: 1px solid silver;\n display: block;\n font-size: 16px;\n margin-bottom: 10px;\n padding: 5px;\n width: 100%;\n}\n\nform button {\n background-color: #bbbbf2;\n border: 2px solid currentColor;\n border-radius: 0.25em;\n cursor: pointer;\n font-size: inherit;\n line-height: 1.4em;\n padding: 0.25em 1em;\n max-width: 20ch;\n}\n\nform button:hover {\n background-color: lavender;\n}\n\nfooter {\n margin-top: 3em;\n padding-top: 1.5em;\n border-top: 1px solid lightgrey;\n}",[],[157,193],[157],{"_102":201,"_95":202,"_158":203,"_160":-5,"_161":139,"_162":163,"_164":116,"_104":204,"_99":32,"_166":178,"_168":205,"_169":22,"_170":-5,"_171":206,"_98":207},"3fd76038-cb74-11f0-925f-42dde27851f2","README.md","019ac4a9-e3db-75ce-aff5-d14c3396b952",["D",1764236059544],"# flowxo-http-bot-sample",[],[202],{"_102":209,"_95":210,"_158":114,"_160":-5,"_161":139,"_162":138,"_164":116,"_104":211,"_99":212,"_166":213,"_168":214,"_169":22,"_170":-5,"_171":215,"_98":216},"30766f16-cb75-11f0-b042-42dde27851f2","index.ts",["D",1764236463307],2,"http","import { Hono } from \"npm:hono@3\";\nimport {\n readFile,\n serveFile,\n} from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nconst BOT_URL =\n \"https://bm.flowxo.com/integration_http/68cb088a4f61e8006c33867a\";\nconst BOT_SECRET = \"aa279828eadd2c675dd0315b42fe962c046b61f267e8224f\";\n\nconst app = new Hono();\n\nlet messages = [];\n\napp.get(\"/\", async (c) => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\napp.get(\"/frontend/*\", async (c) => {\n try {\n const response = await serveFile(c.req.path, import.meta.url);\n return response;\n } catch (error) {\n return c.text(\"File not found\", 404);\n }\n});\n\napp.get(\"/messages\", function async(c) {\n return c.json({ messages });\n});\n\n//Clear messages\napp.get(\"/reset\", function (_c) {\n messages = [];\n});\n\n//Receive a message from Flow XO\napp.post(\"/out\", async function (c) {\n const msg = await c.req.json();\n\n // console.log(\"RECEIVED A MESSAGE\", JSON.stringify(msg, null, 2));\n\n messages.push({ from: \"bot\", message: msg });\n return c.json({ message_id: \"126663\" });\n});\n\n//Send a message to Flow XO\napp.post(\"/in\", async function (c) {\n const message = await c.req.json();\n messages.push({ from: \"user\", message });\n\n // console.log(\"SENDING MESSAGE\", JSON.stringify(message, null, 4));\n\n const options = {\n method: \"POST\",\n body: JSON.stringify(message),\n headers: {\n \"Content-Type\": \"application/json\",\n \"Authorization\": `Bearer ${BOT_SECRET}`,\n },\n };\n\n // console.log(\"MESSAGES\", messages);\n\n return fetch(BOT_URL, options).catch((ex) => {\n return c.json({ ok: false, ex: ex.message });\n }).then((res) => {\n if (res.status >= 200 && res.status < 400) {\n return c.json({ ok: true });\n } else {\n return c.json({ ok: false, status: res.status });\n }\n });\n});\n\nexport default app.fetch;",[],[210],"files",[155,173,182,191,200,208],"counts",{"_221":32,"_222":163,"_223":32,"_224":225},"pulls","branches","forks","envVars",{"_226":163,"_227":163},"count","emptyCount","contents",[230,233,236],{"_102":156,"_95":157,"_158":159,"_160":-5,"_161":139,"_162":163,"_164":116,"_104":231,"_99":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_98":232},["D",1764236059544],[157],{"_102":201,"_95":202,"_158":203,"_160":-5,"_161":139,"_162":163,"_164":116,"_104":234,"_99":32,"_166":178,"_168":205,"_169":22,"_170":-5,"_98":235},["D",1764236059544],[202],{"_102":209,"_95":210,"_158":114,"_160":-5,"_161":139,"_162":138,"_164":116,"_104":237,"_99":212,"_166":213,"_168":214,"_169":22,"_170":-5,"_98":238},["D",1764236463307],[210],"upstreamProject",{"_102":147,"_95":96,"_110":241,"_111":-5,"_108":109,"_23":242},"An example HTTP bot server implementation ",{"_93":243,"_131":244},"flowxo","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yV0F5VVVrVzhYVm1Ec1J6YmdieDB2Q2FXOVEifQ","upstreamBranch",{"_102":142,"_104":247,"_248":249,"_95":43,"_140":147,"_99":144,"_141":250,"_143":138,"_251":252,"_106":-5,"_152":22,"_108":109,"_151":243,"_16":149,"_150":96},["D",1758131931011],"updatedAt",["D",1758138403953],"cdcfc7f8-4c81-11f0-b658-76b3cceeab13","lockfileKey","1758138404359-esm.town_v_flowxo_flowxo-http-bot-sample@74-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.remixes",{"_93":94,"_95":96,"_100":259,"_223":264,"_265":266},{"_102":103,"_95":96,"_104":260,"_106":-5,"_107":22,"_108":109,"_110":-5,"_111":-5,"_14":112,"_113":114,"_115":116,"_117":116,"_118":-5,"_119":32,"_16":120,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":122,"_23":261,"_133":262,"_136":263,"_152":22},["D",1764236059544],{"_93":94,"_131":132},{"_93":94,"_135":132,"_14":112},{"_99":138,"_95":43,"_102":139,"_140":103,"_141":142,"_143":144,"_145":109,"_146":147,"_148":149,"_150":96,"_151":94},[],"upstream",{"_102":147,"_95":96,"_110":241,"_111":-5,"_108":109,"_23":267},{"_93":243,"_131":244},"actionData","errors"]

nmgbw

flowxo-http-bot-sample