danny-avila / LibreChat

Enhanced ChatGPT Clone: Features Anthropic, AWS, OpenAI, Assistants API, Azure, Groq, o1, GPT-4o, Mistral, OpenRouter, Vertex AI, Gemini, Artifacts, AI model switching, message search, langchain, DALL-E-3, ChatGPT Plugins, OpenAI Functions, Secure Multi-User System, Presets, completely open-source for self-hosting. Actively in public development.
https://librechat.ai/
MIT License
19.41k stars 3.24k forks source link

Enhancement: artifacts - add button to download/save the generated html (or other code) #4645

Open quacrobat opened 3 weeks ago

quacrobat commented 3 weeks ago

What features would you like to see added?

Right now there's a copy-code-to-clipboard button at the bottom right of the artifacts window. I suggest an additional button to download/save to local disk. Ideally it would try to chose a filename by default (eg. the of the html). <img referrerpolicy="no-referrer" src="https://github.com/user-attachments/assets/f12dff66-a5fa-41f2-a0af-ca7b5b3e84fb" alt="image" /></p> <h3>More details</h3> <p>// something like this should work</p> <pre><code> const content = //get the artifact content const filename = prompt("Enter a filename to save as:", `${defaultTitle}.html`); if (filename) { const blob = new Blob([content], { type: "text/html" }); const url = URL.createObjectURL(blob); const link = document.createElement("a"); link.href = url; link.download = filename; link.click(); URL.revokeObjectURL(url);</code></pre> <h3>Which components are impacted by your request?</h3> <p>UI</p> <h3>Pictures</h3> <p><em>No response</em></p> <h3>Code of Conduct</h3> <ul> <li>[X] I agree to follow this project's Code of Conduct</li> </ul> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>