Flow XO Custom Channel

Let's Chat:

\n \n\n

\n \n loading messages…\n

\n\n \n\n \n",[],[162,181],{"_104":191,"_97":192,"_163":193,"_165":164,"_166":146,"_167":145,"_169":119,"_106":194,"_101":195,"_172":196,"_174":197,"_175":22,"_176":-5,"_177":198,"_100":199},"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 });",[],[162,192],{"_104":201,"_97":202,"_163":203,"_165":164,"_166":146,"_167":204,"_169":119,"_106":205,"_101":206,"_172":186,"_174":207,"_175":22,"_176":-5,"_177":208,"_100":209},"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}",[],[162,202],[162],{"_104":212,"_97":213,"_163":214,"_165":-5,"_166":146,"_167":215,"_169":119,"_106":216,"_101":33,"_172":186,"_174":217,"_175":22,"_176":-5,"_177":218,"_100":219},"b7560cfa-93fb-11f0-9a24-0224a6c84d84","README.md","b7560db8-93fb-11f0-9a24-0224a6c84d84",54,["D",1758136977033],"# flowxo-http-bot-sample",[],[213],{"_104":221,"_97":222,"_163":117,"_165":-5,"_166":146,"_167":223,"_169":119,"_106":224,"_101":225,"_172":226,"_174":227,"_175":22,"_176":-5,"_177":228,"_100":229},"60e2b1c2-93fe-11f0-9c56-0224a6c84d84","index.ts",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;",[],[222],"files",[160,179,190,200,211,220],"counts",{"_234":33,"_235":171,"_236":171,"_237":238,"_241":242},"pulls","branches","forks","envVars",{"_239":171,"_240":33},"count","emptyCount","connections",{"_239":33,"_243":33},"unfilledCount","contents",[246,249,252],{"_104":161,"_97":162,"_163":164,"_165":-5,"_166":146,"_167":168,"_169":119,"_106":247,"_101":171,"_172":173,"_174":-5,"_175":22,"_176":-5,"_100":248},["D",1758134545443],[162],{"_104":212,"_97":213,"_163":214,"_165":-5,"_166":146,"_167":215,"_169":119,"_106":250,"_101":33,"_172":186,"_174":217,"_175":22,"_176":-5,"_100":251},["D",1758136977033],[213],{"_104":221,"_97":222,"_163":117,"_165":-5,"_166":146,"_167":223,"_169":119,"_106":253,"_101":225,"_172":226,"_174":227,"_175":22,"_176":-5,"_100":254},["D",1758138120481],[222],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.environment-variables",{"_95":96,"_97":98,"_102":263,"_237":268,"_275":22},{"_104":105,"_97":98,"_106":264,"_108":-5,"_109":22,"_110":111,"_112":113,"_114":-5,"_14":115,"_116":117,"_118":119,"_120":119,"_121":-5,"_122":33,"_16":123,"_124":-5,"_125":-5,"_126":127,"_128":127,"_129":130,"_131":130,"_132":130,"_133":127,"_134":127,"_23":265,"_138":266,"_143":267,"_157":22},["D",1758131931011],{"_95":96,"_136":137},{"_95":96,"_140":137,"_14":115,"_141":142},{"_101":145,"_97":45,"_104":146,"_147":105,"_148":-5,"_149":-5,"_150":151,"_152":153,"_154":123,"_155":98,"_156":96},[269],{"_270":271,"_106":272,"_273":-5,"_112":74,"_274":22},"key","WORKVIVO_AUTH_TOKEN",["D",1758131931011],"updatedAt","isEmpty","isTeamOrg","actionData","errors"]

flowxo

flowxo-http-bot-sample

Environment variables