Flow XO Custom Channel

Let's Chat:

\n \n\n

\n \n loading messages…\n

\n\n \n\n \n",[],[153,173],{"_102":183,"_95":184,"_154":185,"_156":155,"_157":137,"_158":136,"_160":161,"_104":186,"_99":187,"_164":188,"_166":189,"_167":22,"_168":-5,"_169":190,"_98":191},"09d8fbce-93ff-11f0-8386-0224a6c84d84","script.js","30d2a5a2-93f7-11f0-ad37-0224a6c84d84",["D",1758138403953],13,"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 });",[],[153,184],{"_102":193,"_95":194,"_154":195,"_156":155,"_157":137,"_158":196,"_160":161,"_104":197,"_99":198,"_164":178,"_166":199,"_167":22,"_168":-5,"_169":200,"_98":201},"0cc843d2-93f8-11f0-869a-0224a6c84d84","style.css","08741ea0-93f8-11f0-95b5-0224a6c84d84",41,["D",1758135402397],3,"/* 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}",[],[153,194],[153],{"_102":204,"_95":205,"_154":206,"_156":-5,"_157":137,"_158":207,"_160":161,"_104":208,"_99":32,"_164":178,"_166":209,"_167":22,"_168":-5,"_169":210,"_98":211},"b7560cfa-93fb-11f0-9a24-0224a6c84d84","README.md","b7560db8-93fb-11f0-9a24-0224a6c84d84",54,["D",1758136977033],"# flowxo-http-bot-sample",[],[205],{"_102":213,"_95":214,"_154":215,"_156":-5,"_157":137,"_158":216,"_160":161,"_104":217,"_99":218,"_164":219,"_166":220,"_167":22,"_168":-5,"_169":221,"_98":222},"60e2b1c2-93fe-11f0-9c56-0224a6c84d84","index.ts","019958d4-47b2-713b-b60b-16033d0adf4c",73,["D",1758138120481],37,"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 = \"86bba26117ce3d3538b4cde816e1a810c9a862c23a5d9ca0\";\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: \"123\" });\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;",[],[214],"files",[151,171,182,192,203,212],"counts",{"_227":32,"_228":163,"_229":32,"_230":163},"pulls","branches","forks","envVars","contents",[233,236,239],{"_102":152,"_95":153,"_154":155,"_156":-5,"_157":137,"_158":159,"_160":161,"_104":234,"_99":163,"_164":165,"_166":-5,"_167":22,"_168":-5,"_98":235},["D",1758134545443],[153],{"_102":204,"_95":205,"_154":206,"_156":-5,"_157":137,"_158":207,"_160":161,"_104":237,"_99":32,"_164":178,"_166":209,"_167":22,"_168":-5,"_98":238},["D",1758136977033],[205],{"_102":213,"_95":214,"_154":215,"_156":-5,"_157":137,"_158":216,"_160":161,"_104":240,"_99":218,"_164":219,"_166":220,"_167":22,"_168":-5,"_98":241},["D",1758138120481],[214],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.environment-variables",{"_93":94,"_95":96,"_100":250,"_230":255},{"_102":103,"_95":96,"_104":251,"_106":-5,"_107":22,"_108":109,"_110":111,"_112":-5,"_14":113,"_114":-5,"_115":22,"_116":-5,"_117":32,"_16":118,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":252,"_131":253,"_134":254,"_148":22},["D",1758131931011],{"_93":94,"_129":130},{"_93":94,"_133":130},{"_99":136,"_95":43,"_102":137,"_138":103,"_139":-5,"_140":-5,"_141":142,"_143":144,"_145":118,"_146":96,"_147":94},[256],{"_257":258,"_104":259,"_260":-5,"_110":72,"_261":22},"key","WORKVIVO_AUTH_TOKEN",["D",1758131931011],"updatedAt","isEmpty","actionData","errors"]

Environment variables