Flow XO Custom Channel

Let's Chat:

\n \n\n

\n \n loading messages…\n

\n\n \n\n \n",[],[164,183],{"_106":193,"_97":194,"_165":195,"_167":166,"_168":148,"_169":196,"_171":22,"_108":197,"_102":198,"_174":199,"_176":200,"_177":22,"_178":-5,"_179":201,"_100":202},"9da39f42-93f7-11f0-83e5-0224a6c84d84","script.js","30d2a5a2-93f7-11f0-ad37-0224a6c84d84",32,["D",1758135215931],3,"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(\"dreams\");\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(\"/message\", 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 dreams\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 dream 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), 250);\n\n // listen for the form to be submitted and add a new dream when it is\n messageForm.addEventListener(\"submit\", (event) => {\n // stop our form submission from refreshing the page\n event.preventDefault();\n\n // get dream value and add it to the list\n let newMessage = messageForm.elements.dream.value;\n\n sendNewMessage(newMessage).then((message) => {\n appendNewMessage(message);\n\n // reset form\n messageForm.reset();\n messageForm.elements.dream.focus();\n });\n });\n });",[],[164,194],{"_106":204,"_97":205,"_165":206,"_167":166,"_168":148,"_169":207,"_171":121,"_108":208,"_102":198,"_174":188,"_176":209,"_177":22,"_178":-5,"_179":210,"_100":211},"0cc843d2-93f8-11f0-869a-0224a6c84d84","style.css","08741ea0-93f8-11f0-95b5-0224a6c84d84",41,["D",1758135402397],"/* 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}",[],[164,205],[164],{"_106":214,"_97":215,"_165":119,"_167":-5,"_168":148,"_169":103,"_171":22,"_108":216,"_102":217,"_174":218,"_176":219,"_177":22,"_178":-5,"_179":220,"_100":221},"feed9f80-93f9-11f0-98ff-0224a6c84d84","bot.ts",["D",1758136238125],23,"http","import process from \"node:process\";\nimport { 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 = \"https://bm.flowxo.com/integration_http/xxx\";\nconst BOT_SECRET = \"yyy\";\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 (request, response) {\n messages = [];\n});\n\n//Receive a message from Flow XO\napp.post(\"/bot\", async function (c) {\n const msg = await c.req.json();\n console.log(\"RECEIVED A MESSAGE\", JSON.stringify(msg, null, 2));\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(\"/message\", async function (c) {\n const message = c.req.json();\n const url = BOT_URL;\n const secret = BOT_SECRET;\n messages.push({ from: \"user\", message });\n console.log(\"SENDING MESSAGE\", JSON.stringify(message, null, 4));\n const opts = {\n headers: {\n Authorization: `Bearer ${secret}`,\n },\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 console.log(\"MESSAGES\", messages);\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;",[],[215],"files",[162,181,192,203,213],"counts",{"_226":33,"_227":173,"_228":173,"_229":230,"_233":234},"pulls","branches","forks","envVars",{"_231":173,"_232":33},"count","emptyCount","connections",{"_231":33,"_235":33},"unfilledCount","contents",[],{"_106":204,"_97":205,"_165":206,"_167":166,"_168":148,"_169":207,"_171":121,"_108":239,"_102":198,"_174":188,"_176":209,"_177":22,"_178":-5,"_100":240},["D",1758135402397],[164,205],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_95":96,"_97":98,"_99":45,"_102":103,"_100":101,"_104":249,"_160":254,"_222":270,"_188":271,"_236":273,"_274":-5,"_275":-5,"_276":-5,"_277":-5,"_278":279,"_229":-5},{"_106":107,"_97":98,"_108":250,"_110":-5,"_111":22,"_112":113,"_114":115,"_116":-5,"_14":117,"_118":119,"_120":121,"_122":121,"_123":-5,"_124":33,"_16":125,"_126":-5,"_127":-5,"_128":129,"_130":129,"_131":132,"_133":132,"_134":132,"_135":129,"_136":129,"_23":251,"_140":252,"_145":253,"_159":22},["D",1758131931011],{"_95":96,"_138":139},{"_95":96,"_142":139,"_14":117,"_143":144},{"_102":147,"_97":45,"_106":148,"_149":107,"_150":-5,"_151":-5,"_152":153,"_154":155,"_156":125,"_157":98,"_158":96},[255,267],{"_106":163,"_97":164,"_165":166,"_167":-5,"_168":148,"_169":170,"_171":121,"_108":172,"_102":173,"_174":175,"_176":-5,"_177":22,"_178":-5,"_179":256,"_100":266},[257,260,263],{"_106":182,"_97":183,"_165":184,"_167":166,"_168":148,"_169":185,"_171":22,"_108":186,"_102":187,"_174":188,"_176":189,"_177":22,"_178":-5,"_179":258,"_100":259},[],[164,183],{"_106":193,"_97":194,"_165":195,"_167":166,"_168":148,"_169":196,"_171":22,"_108":197,"_102":198,"_174":199,"_176":200,"_177":22,"_178":-5,"_179":261,"_100":262},[],[164,194],{"_106":204,"_97":205,"_165":206,"_167":166,"_168":148,"_169":207,"_171":121,"_108":208,"_102":198,"_174":188,"_176":209,"_177":22,"_178":-5,"_179":264,"_100":265},[],[164,205],[164],{"_106":214,"_97":215,"_165":119,"_167":-5,"_168":148,"_169":103,"_171":22,"_108":216,"_102":217,"_174":218,"_176":219,"_177":22,"_178":-5,"_179":268,"_100":269},[],[215],[255,257,260,263,267],{"_106":204,"_97":205,"_165":206,"_167":166,"_168":148,"_169":207,"_171":121,"_108":239,"_102":198,"_174":188,"_176":209,"_177":22,"_178":-5,"_100":272},[164,205],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]

flowxo

flowxo-http-bot-sample