soumyadeepdas/TbhRichBotPublic · Community Store Listing

Rich Message Demo [TBH]

ProfileTelegram
17 commands0 envUpdated 5d agoCreated Jul 16, 2026
Back to folder

commands/_richAll.js

javascript · 302 lines · click line # to share

1/**#command2name: /richAll3answer: 4keyboard: 5parse_mode: 6aliases: 7allow_only_group: false8need_reply: false9is_web: 010#command**/11 12const photo1 = "https://image.zaw-myo.workers.dev/image/6c6c9eb5-2210-4736-b91e-e59344dd1be1";13const photo2 = "https://image.zaw-myo.workers.dev/image/d497582c-c5ab-47a1-8f91-56f34df7aa65";14const photo3 = "https://image.zaw-myo.workers.dev/image/f4e58160-eac9-4604-831b-053d91b402a4";15const video1 = "https://www.w3schools.com/html/mov_bbb.mp4";16const audio1 = "https://www.learningcontainer.com/wp-content/uploads/2020/02/Kalimba.mp3";17const audio2 = "https://www.w3schools.com/html/horse.mp3";18 19const html = `20<h1>🚀 Rich Message Showcase</h1>21 22<p>This document demonstrates <b>all</b> Rich Message features available in Telegram Bot API 10.1 – from basic formatting to advanced media, maps, collages, slideshows and nested layouts.</p>23 24<hr/>25 26<h3>📑 Navigation</h3>27<ul>28  <li><a href='#headings'>Headings</a></li>29  <li><a href='#formatting'>Text Formatting</a></li>30  <li><a href='#datetime'>Date & Time</a></li>31  <li><a href='#lists'>Lists</a></li>32  <li><a href='#quotes'>Quotes & Pull Quotes</a></li>33  <li><a href='#tables'>Tables</a></li>34  <li><a href='#code'>Code Blocks</a></li>35  <li><a href='#math'>Mathematical Expressions</a></li>36  <li><a href='#references'>References & Footnotes</a></li>37  <li><a href='#media'>Media (Images, Video, Audio)</a></li>38  <li><a href='#maps'>Maps</a></li>39  <li><a href='#collage'>Collages</a></li>40  <li><a href='#slideshow'>Slideshows</a></li>41  <li><a href='#details'>Details (Collapsible Blocks)</a></li>42  <li><a href='#nested'>Nested Details</a></li>43  <li><a href='#mixed'>Mixed Showcase</a></li>44</ul>45 46<hr/>47 48<a name='headings'></a>49<h1>Heading 1</h1>50<h2>Heading 2</h2>51<h3>Heading 3</h3>52<h4>Heading 4</h4>53<h5>Heading 5</h5>54<h6>Heading 6</h6>55 56<hr/>57 58<a name='formatting'></a>59<h2>🎨 Text Formatting</h2>60<p><b>Bold</b> | <strong>Strong</strong> | <i>Italic</i> | <em>Emphasis</em></p>61<p><u>Underline</u> | <ins>Inserted</ins> | <s>Strikethrough</s> | <del>Deleted</del> | <strike>Strike</strike></p>62<p><mark>Highlighted</mark> | <code>inline code</code> | H<sub>2</sub>O | X<sup>2</sup></p>63<p><tg-spoiler>Spoiler text (tap to reveal)</tg-spoiler></p>64<p><b><i><u>Nested formatting example</u></i></b></p>65<p><a href='https://telegram.org'>Telegram Website</a> | <a href='mailto:test@example.com'>Email Link</a> | <a href='tel:+123456789'>Phone Link</a></p>66 67<hr/>68 69<a name='datetime'></a>70<h2>🕒 Date & Time</h2>71<p><tg-time unix='1749686400' format='wDT'>Date Time Example</tg-time></p>72 73<hr/>74 75<a name='lists'></a>76<h2>📋 Lists</h2>77<h3>Unordered</h3>78<ul><li>Item One</li><li>Item Two</li><li>Item Three</li></ul>79<h3>Ordered (Decimal)</h3>80<ol><li>First</li><li>Second</li><li>Third</li></ol>81<h3>Alphabetic</h3>82<ol type='a'><li>Alpha</li><li>Beta</li><li>Gamma</li></ol>83<h3>Roman Numerals</h3>84<ol><li value='5' type='i'>Five</li><li>Six</li><li>Seven</li></ol>85 86<hr/>87 88<a name='quotes'></a>89<h2>💬 Quotes & Pull Quotes</h2>90<blockquote>The only way to do great work is to love what you do.<cite>Steve Jobs</cite></blockquote>91<blockquote>Success is not final.<br/>Failure is not fatal.<br/>It is the courage to continue that counts.<cite>Winston Churchill</cite></blockquote>92<aside>Simplicity is the ultimate sophistication.<cite>Leonardo da Vinci</cite></aside>93<blockquote>Outer Quote<blockquote>Nested Quote<blockquote>Deep Nested Quote</blockquote></blockquote></blockquote>94 95<hr/>96 97<a name='tables'></a>98<h2>📊 Tables</h2>99<table bordered striped>100<caption>Feature Table</caption>101<tr><th>Feature</th><th>Status</th></tr>102<tr><td>Formatting</td><td>✅ Working</td></tr>103<tr><td>Tables</td><td>✅ Working</td></tr>104<tr><td>Math</td><td>✅ Working</td></tr>105</table>106 107<hr/>108 109<a name='code'></a>110<h2>💻 Code Blocks</h2>111<pre>Simple preformatted text block</pre>112<pre><code class='language-javascript'>113function hello() {114  console.log('Hello World');115}116hello();117</code></pre>118<pre><code class='language-python'>119def greet():120    print('Hello')121greet();122</code></pre>123<pre><code class='language-json'>124{ "rich": true }125</code></pre>126 127<hr/>128 129<a name='math'></a>130<h2>🧮 Mathematical Expressions</h2>131<p>Inline: <tg-math>a^2+b^2=c^2</tg-math></p>132<tg-math-block>133x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}134</tg-math-block>135<tg-math-block>136\\int_{0}^{\\infty} e^{-x^2}dx = \\frac{\\sqrt{\\pi}}{2}137</tg-math-block>138<tg-math-block>139\\sum_{n=1}^{\\infty} \\frac{1}{n^2} = \\frac{\\pi^2}{6}140</tg-math-block>141 142<hr/>143 144<a name='references'></a>145<h2>🔖 References & Footnotes</h2>146<p>Layer 227 <a href='#ref1'>[1]</a> and Bot API 10.1 <a href='#ref2'>[2]</a> introduced Rich Messages.</p>147<tg-reference name='ref1'>Telegram Layer 227 introduced Rich Messages.</tg-reference>148<tg-reference name='ref2'>Bot API 10.1 exposed Rich Messages to bots.</tg-reference>149 150<hr/>151 152<a name='media'></a>153<h2>🖼 Media Blocks</h2>154<h3>Image</h3>155<figure><img src='${photo1}'/><figcaption>Standard Image</figcaption></figure>156<h3>Image with Credit</h3>157<figure><img src='${photo2}'/><figcaption>Image Caption<cite>Photo Credit</cite></figcaption></figure>158<h3>Spoiler Image</h3>159<figure><img src='${photo3}' tg-spoiler/><figcaption>Spoiler Protected Image</figcaption></figure>160<h3>Video</h3>161<figure><video src='${video1}'></video><figcaption>Standard Video Block</figcaption></figure>162<h3>Spoiler Video</h3>163<figure><video src='${video1}' tg-spoiler></video><figcaption>Spoiler Video</figcaption></figure>164<h3>Audio</h3>165<figure><audio src='${audio1}'></audio><figcaption>Audio Player Example</figcaption></figure>166<h3>Voice Note</h3>167<figure><audio src='${audio2}'></audio><figcaption>Voice Note Example</figcaption></figure>168 169<hr/>170 171<a name='maps'></a>172<h2>🗺 Maps</h2>173<h3>Standalone Map</h3>174<tg-map lat='48.8584' long='2.2945' zoom='16'/>175<h3>Map with Caption</h3>176<figure><tg-map lat='48.8584' long='2.2945' zoom='16'/><figcaption>Eiffel Tower, Paris</figcaption></figure>177<h3>Gateway of India, Mumbai</h3>178<figure><tg-map lat="18.921944" long="72.834667" zoom="16"/><figcaption>Gateway of India, Mumbai</figcaption></figure>179 180<hr/>181 182<a name='collage'></a>183<h2>🗃 Collages</h2>184<h3>Photo Collage</h3>185<tg-collage>186  <img src='${photo1}'/>187  <img src='${photo2}'/>188  <img src='${photo3}'/>189  <figcaption>Three Photo Collage</figcaption>190</tg-collage>191<h3>Mixed Media Collage</h3>192<tg-collage>193  <img src='${photo1}'/>194  <img src='${photo2}'/>195  <video src='${video1}'></video>196  <figcaption>Photo + Video Collage<cite>Mixed Media</cite></figcaption>197</tg-collage>198 199<hr/>200 201<a name='slideshow'></a>202<h2>🎞 Slideshows</h2>203<h3>Photo Slideshow</h3>204<tg-slideshow>205  <img src='${photo1}'/>206  <img src='${photo2}'/>207  <img src='${photo3}'/>208  <figcaption>Swipe Through Photos</figcaption>209</tg-slideshow>210<h3>Mixed Slideshow</h3>211<tg-slideshow>212  <video src='${video1}'></video>213  <img src='${photo1}'/>214  <img src='${photo2}'/>215  <figcaption>Video + Photos</figcaption>216</tg-slideshow>217 218<hr/>219 220<a name='details'></a>221<h2>📂 Details (Collapsible Blocks)</h2>222<details>223  <summary>Collapsed Block (click to expand)</summary>224  <p>This content is hidden until expanded.</p>225  <p><b>Bold</b>, <i>Italic</i>, <u>Underline</u>, <code>Code</code> and <tg-spoiler>Spoilers</tg-spoiler> work inside.</p>226</details>227<details open>228  <summary>Open By Default</summary>229  <p>This block starts expanded because it uses the <code>open</code> attribute.</p>230</details>231<details>232  <summary>Code Example</summary>233  <pre><code class='language-javascript'>234HTTP.post({235  url: api,236  body: payload237});238</code></pre>239</details>240<details>241  <summary>Table Example</summary>242  <table bordered><tr><th>Key</th><th>Value</th></tr><tr><td>Layer</td><td>227</td></tr><tr><td>Bot API</td><td>10.1</td></tr></table>243</details>244 245<hr/>246 247<a name='nested'></a>248<h2>📚 Nested Details</h2>249<details>250  <summary>Level 1</summary>251  <p>Outer Content</p>252  <details>253    <summary>Level 2</summary>254    <p>Middle Content</p>255    <details>256      <summary>Level 3</summary>257      <p>Deepest Nested Content</p>258    </details>259  </details>260</details>261 262<hr/>263 264<a name='mixed'></a>265<h2>🌟 Mixed Showcase</h2>266<p><b>Bold</b>, <i>Italic</i>, <u>Underline</u>, <code>Code</code>, <tg-spoiler>Spoiler</tg-spoiler>, <a href='https://telegram.org'>Link</a>, and inline media layouts.</p>267<blockquote>Rich Messages combine formatting, media and layouts into a single document.<cite>Telegram Bot API 10.1</cite></blockquote>268<details>269  <summary>Media Inside Details</summary>270  <tg-slideshow>271    <img src='${photo1}'/>272    <img src='${photo2}'/>273    <figcaption>Slideshow Inside Details</figcaption>274  </tg-slideshow>275</details>276 277<table bordered striped>278  <tr><th>Block</th><th>Status</th></tr>279  <tr><td>Media</td><td>✅ Working</td></tr>280  <tr><td>Maps</td><td>✅ Working</td></tr>281  <tr><td>Collage</td><td>✅ Working</td></tr>282  <tr><td>Slideshow</td><td>✅ Working</td></tr>283</table>284 285<hr/>286 287<footer>Complete Rich Message Showcase • Telegram Bot API 10.1</footer>288`;289 290Api.call("editMessageText", {291  chat_id: chat.chatid,292  message_id: update.callback_query.message.message_id,293  rich_message: { html: html },294  reply_markup: {295    inline_keyboard: [296      [297        { text: "« Ai Streaming", callback_data: "/richStreaming" },298        { text: "Home »", callback_data: "/start" }299      ]300    ]301  }302});