[PR #10370] [CLOSED] Feat: Nick's Open-Webui Artifacts Overhaul (or "Artifacts 3") #22512

Closed
opened 2026-04-20 04:12:16 -05:00 by GiteaMirror · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/open-webui/open-webui/pull/10370
Author: @nick-tonjum
Created: 2/19/2025
Status: Closed

Base: devHead: main


📝 Commits (9)

📊 Changes

13 files changed (+3044 additions, -127 deletions)

View changed files

📝 README.md (+76 -0)
demo-diffeditor.webp (+0 -0)
demo-filenavigator.gif (+0 -0)
demo-react.webp (+0 -0)
📝 package-lock.json (+1932 -4)
📝 package.json (+1 -0)
📝 src/lib/components/chat/Artifacts.svelte (+855 -98)
📝 src/lib/components/chat/Messages/CitationsModal.svelte (+1 -0)
📝 src/lib/components/chat/Messages/ContentRenderer.svelte (+9 -5)
📝 src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte (+132 -19)
📝 src/lib/components/chat/Navbar.svelte (+31 -0)
📝 src/lib/stores/index.ts (+2 -1)
📝 src/lib/utils/index.ts (+5 -0)

📄 Description

Pull Request Checklist

Note to first-time contributors: Please open a discussion post in Discussions and describe your changes before submitting a pull request.

Before submitting, make sure you've checked the following:

  • [*] Target branch: Please verify that the pull request targets the dev branch.
  • [*] Description: Provide a concise description of the changes made in this pull request.
  • [*] Changelog: Ensure a changelog entry following the format of Keep a Changelog is added at the bottom of the PR description.
  • [*] Documentation: Have you updated relevant documentation Open WebUI Docs, or other documentation sources?
  • [*] Dependencies: Are there any new dependencies? Have you updated the dependency versions in the documentation?
  • [*] Testing: Have you written and run sufficient tests for validating the changes? (Yes but help needed)
  • [*] Code review: Have you performed a self-review of your code, addressing any coding standard issues and ensuring adherence to the project's coding standards?
  • [*] Prefix: To cleary categorize this pull request, prefix the pull request title, using one of the following:
    • BREAKING CHANGE: Significant changes that may affect compatibility
    • build: Changes that affect the build system or external dependencies
    • ci: Changes to our continuous integration processes or workflows
    • chore: Refactor, cleanup, or other non-functional code changes
    • docs: Documentation update or addition
    • feat: Introduces a new feature or enhancement to the codebase
    • fix: Bug fix or error correction
    • i18n: Internationalization or localization changes
    • perf: Performance improvement
    • refactor: Code restructuring for better maintainability, readability, or scalability
    • style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc.)
    • test: Adding missing tests or correcting existing tests
    • WIP: Work in progress, a temporary label for incomplete or ongoing work

Changelog Entry

Description

This fork provides a more hands-on and overall improved coding experience. This aims to replicate OpenAI's Canvas and Claude Artifacts

Added

  • </> button to open the artifacts window
  • Monaco editor window in place of the old artifacts window that supports various coding languages
  • Difference viewer that shows you what updated since the last response (automatically matches code blocks too!)
  • A way to switch between different code blocks and versions
  • A 'Display Mode' that lets you visualize HTML/CSS (Tailwind now natively supported) and React Components
  • Ability to shrink code blocks into a file type view in the chat window while the artifacts window is opened

Removed

  • Old HTML/JS/CSS Viewer // "Artifacts 2.0"

Screenshots or Videos

image
image
image

###Note: Additional Testing Help Needed

This just needs some more real-world testing that may be available from people using the dev branch


🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/open-webui/open-webui/pull/10370 **Author:** [@nick-tonjum](https://github.com/nick-tonjum) **Created:** 2/19/2025 **Status:** ❌ Closed **Base:** `dev` ← **Head:** `main` --- ### 📝 Commits (9) - [`7c97d9b`](https://github.com/open-webui/open-webui/commit/7c97d9b171f4d8b3597a4f9e8a4a415547f2f90c) initial commit - [`afef82e`](https://github.com/open-webui/open-webui/commit/afef82e0d4abf0d61f50a3817bd022dba465d2ac) Update README.md - [`029d866`](https://github.com/open-webui/open-webui/commit/029d8660354f00c139c460274812912d871f443e) Update README.md - [`5d6cc05`](https://github.com/open-webui/open-webui/commit/5d6cc05b2d880ad1d989a04f1d4eac473f38907e) Add files via upload - [`1d95da5`](https://github.com/open-webui/open-webui/commit/1d95da54c7c7ce338059d2e2b7d19542d0a06cd1) Update README.md - [`3c40255`](https://github.com/open-webui/open-webui/commit/3c40255e2dc6f0c50b8db8470bbbe69f374d109e) Update README.md - [`6f9f9de`](https://github.com/open-webui/open-webui/commit/6f9f9de54bfba94133d5833c593a244461bc361c) Merge remote-tracking branch 'upstream/main' - [`4f226d3`](https://github.com/open-webui/open-webui/commit/4f226d3ab2155b19d5abee472e80501a019f915d) updated to v0.6.0 - [`7bf832d`](https://github.com/open-webui/open-webui/commit/7bf832d9cde80695c9774092c1c737daa750a008) added 'sh' as an acceptable coding language ### 📊 Changes **13 files changed** (+3044 additions, -127 deletions) <details> <summary>View changed files</summary> 📝 `README.md` (+76 -0) ➕ `demo-diffeditor.webp` (+0 -0) ➕ `demo-filenavigator.gif` (+0 -0) ➕ `demo-react.webp` (+0 -0) 📝 `package-lock.json` (+1932 -4) 📝 `package.json` (+1 -0) 📝 `src/lib/components/chat/Artifacts.svelte` (+855 -98) 📝 `src/lib/components/chat/Messages/CitationsModal.svelte` (+1 -0) 📝 `src/lib/components/chat/Messages/ContentRenderer.svelte` (+9 -5) 📝 `src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte` (+132 -19) 📝 `src/lib/components/chat/Navbar.svelte` (+31 -0) 📝 `src/lib/stores/index.ts` (+2 -1) 📝 `src/lib/utils/index.ts` (+5 -0) </details> ### 📄 Description # Pull Request Checklist ### Note to first-time contributors: Please open a discussion post in [Discussions](https://github.com/open-webui/open-webui/discussions) and describe your changes before submitting a pull request. **Before submitting, make sure you've checked the following:** - [*] **Target branch:** Please verify that the pull request targets the `dev` branch. - [*] **Description:** Provide a concise description of the changes made in this pull request. - [*] **Changelog:** Ensure a changelog entry following the format of [Keep a Changelog](https://keepachangelog.com/) is added at the bottom of the PR description. - [*] **Documentation:** Have you updated relevant documentation [Open WebUI Docs](https://github.com/open-webui/docs), or other documentation sources? - [*] **Dependencies:** Are there any new dependencies? Have you updated the dependency versions in the documentation? - [*] **Testing:** Have you written and run sufficient tests for validating the changes? (Yes but help needed) - [*] **Code review:** Have you performed a self-review of your code, addressing any coding standard issues and ensuring adherence to the project's coding standards? - [*] **Prefix:** To cleary categorize this pull request, prefix the pull request title, using one of the following: - **BREAKING CHANGE**: Significant changes that may affect compatibility - **build**: Changes that affect the build system or external dependencies - **ci**: Changes to our continuous integration processes or workflows - **chore**: Refactor, cleanup, or other non-functional code changes - **docs**: Documentation update or addition - **feat**: Introduces a new feature or enhancement to the codebase - **fix**: Bug fix or error correction - **i18n**: Internationalization or localization changes - **perf**: Performance improvement - **refactor**: Code restructuring for better maintainability, readability, or scalability - **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc.) - **test**: Adding missing tests or correcting existing tests - **WIP**: Work in progress, a temporary label for incomplete or ongoing work # Changelog Entry ### Description This fork provides a more hands-on and overall improved coding experience. This aims to replicate OpenAI's Canvas and Claude Artifacts ### Added - </> button to open the artifacts window - Monaco editor window in place of the old artifacts window that supports various coding languages - Difference viewer that shows you what updated since the last response (automatically matches code blocks too!) - A way to switch between different code blocks and versions - A 'Display Mode' that lets you visualize HTML/CSS (Tailwind now natively supported) and React Components - Ability to shrink code blocks into a file type view in the chat window while the artifacts window is opened ### Removed - Old HTML/JS/CSS Viewer // "Artifacts 2.0" ### Screenshots or Videos ![image](https://github.com/user-attachments/assets/53e5554b-37eb-4852-81b4-b235f0b58b8a) ![image](https://github.com/user-attachments/assets/c798a76a-8877-49da-96b5-956e61fe7946) ![image](https://github.com/user-attachments/assets/8c702841-952f-47bb-8e58-de3f63203c0c) ###Note: Additional Testing Help Needed This just needs some more real-world testing that may be available from people using the dev branch --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2026-04-20 04:12:16 -05:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/open-webui#22512