Adding: Live Code Preview

EliasPereirah · EliasPereirah · commit ff90a8568483 · 2025-07-16T16:57:57.000-03:00
diff --git a/README.md b/README.md
@@ -1,5 +1,6 @@
 # OrionChat
-OrionChat is a web-based chat interface that simplifies interactions with multiple AI model providers.
+OrionChat is a free and open-source web-based chat interface that simplifies interactions with various generative AI providers.
+
 It provides a unified platform for chatting and exploring multiple large language models (LLMs), including:
 
 - 🌐 OpenAI (GPTs and beyond)
@@ -64,6 +65,16 @@ Some companies offer free API access. Check their terms and conditions before yo
 - **Anthropic:** [Anthropic API key](https://console.anthropic.com/settings/keys)
 - **DeepSeek:** [DeepSeek API Key](https://platform.deepseek.com/api_keys)
 - **Hyperbolic:** [Hyperbolic API Key](https://app.hyperbolic.xyz/settings#api-key) 
+
+### Live Code Preview for HTML/CSS/JS
+
+OrionChat can now render HTML, CSS, and JavaScript code snippets directly within the chat interface.
+![Live Code Preview Screenshot](imgs/screenshot_code_preview.jpg "Live Code Preview Screenshot")
+
+When the AI generates a code block containing these languages, a "Preview" button will appear, allowing you to instantly
+see the visual result without having to download the code.
+
+
 # Special Commands
 Use special commands to perform an action quickly and easily.
 
diff --git a/css/chat.css b/css/chat.css
@@ -551,7 +551,7 @@ code.hljs::-webkit-scrollbar-track {
     margin-top: -33px;
 }
 
-.copy-btn, .down-btn, .see_info {
+.copy-btn, .down-btn, .see_info, .preview-btn {
     padding: 3px 5px;
     color: var(--copy-btn-color);
     background-color: transparent;
@@ -562,9 +562,12 @@ code.hljs::-webkit-scrollbar-track {
 }
 
 
-.btn-group .copy-btn, .btn-group .down-btn {
+.btn-group .copy-btn, .btn-group .down-btn,.preview-btn {
     background-color: var(--copy-btn-bg);
 }
+.preview-btn{
+    border: 1px solid #FFEB3B;
+}
 
 
 .btn-ft-group .copy-btn, .see_info {
diff --git a/experiments/preview/index.html b/experiments/preview/index.html
@@ -0,0 +1,4 @@
+<!doctype html>
+<html lang="en">
+<script src="../../js/preview.js?v=1.0.2"></script>
+</html>
diff --git a/imgs/screenshot_code_preview.jpg b/imgs/screenshot_code_preview.jpg
diff --git a/index.html b/index.html
@@ -11,7 +11,7 @@
     </script>
     <link rel="icon" href="favicon.png">
     <link rel="stylesheet" href="css/highlight_js/themes/github-dark-dimmed.css?v=1.0.3">
-    <link rel="stylesheet" href="css/chat.css?v=3.2.1">
+    <link rel="stylesheet" href="css/chat.css?v=3.2.4">
     <link rel="manifest" href="manifest.json">
     <meta property="og:type" content="article">
     <meta property="og:title" content="OrionChat">
@@ -77,7 +77,7 @@
 <script src="js/4devs.js?v=1.0.1"></script>
 <script src="js/prompts.js?v=1.1.0"></script>
 <script src="js/tools_list.js?v=1.2.0"></script>
-<script src="js/script.js?v=3.2.3"></script>
+<script src="js/script.js?v=3.2.6"></script>
 <script src="js/search_chats.js?v=0.0.3"></script>
 <script src="js/voice_rec.js?v=1.0.6"></script>
 <script src="js/nuggets.js?v=0.0.1"></script>
diff --git a/js/preview.js b/js/preview.js
@@ -0,0 +1,6 @@
+let preview = localStorage.getItem('preview');
+if (preview) {
+    document.open();
+    document.write(preview);
+    document.close();
+}
diff --git a/js/script.js b/js/script.js
@@ -168,6 +168,7 @@ const language_extension = {
     "python": "py",
     "markdown": "md",
     "javascript": "js",
+    "js": "js",
     "java": "java",
     "c": "c",
     "cpp": "cpp",
@@ -887,6 +888,7 @@ function enableCopyForCode(enable_down_too = true) {
 
     document.querySelectorAll('pre code').forEach(block => {
         let block_group = block.previousElementSibling;
+
         let has_copy_btn = false;
         if (block_group) {
             has_copy_btn = block_group.querySelector(".copy-btn");
@@ -899,10 +901,19 @@ function enableCopyForCode(enable_down_too = true) {
             button.innerText = 'Copy';
             button.title = "Copy code";
             const btn_down = button.cloneNode(false);
+            const btn_preview = button.cloneNode(false);
             btn_down.className = 'down-btn';
             btn_down.innerText = 'Down';
             btn_down.title = "Download code";
+
+            btn_preview.className = 'preview-btn';
+            btn_preview.innerText = 'Preview';
+            btn_preview.title = "Preview code";
             div_ele.append(button);
+            if(block.classList.contains('html')) {
+                btn_preview.setAttribute('onclick', "savePreviewCode(event)");
+                div_ele.append(btn_preview)
+            }
             if (enable_down_too) {
                 div_ele.append(btn_down);
             }
@@ -3505,6 +3516,47 @@ function goNuggets(){
     document.location.href = 'experiments/nuggets.html';
 }
 
+
+
+
+function savePreviewCode(event){
+    let chat_box = event.target.parentElement.parentElement.parentElement;
+    let html_target = event.target.parentElement.parentElement;
+    let html_code_to_preview = document.createElement('div');
+    html_code_to_preview.innerHTML = html_target.querySelector(".html").innerText;
+    let css_elements = html_code_to_preview.querySelectorAll("[rel='stylesheet']");
+    let js_elements = html_code_to_preview.querySelectorAll('script[src]');
+    let css_idx = 0;
+    let js_idx = 0;
+    chat_box.querySelectorAll(".css").forEach(css=>{
+        let css_ele = css_elements[css_idx] ?? '';
+        if(css_ele){
+            let style_tag = document.createElement('style');
+            style_tag.innerHTML = css.innerText;
+            css_ele.after(style_tag);
+            css_ele.remove();
+
+        }
+        css_idx++;
+    });
+
+    chat_box.querySelectorAll(".language-javascript").forEach(js=>{
+        let js_ele = js_elements[js_idx] ?? '';
+        if(js_ele){
+            let script_tag = document.createElement('script');
+            script_tag.textContent = js.innerText;
+            js_ele.after(script_tag);
+            js_ele.remove();
+
+        }
+        js_idx++;
+    });
+    localStorage.setItem('preview', html_code_to_preview.innerHTML);
+    window.open('experiments/preview','_blank');
+
+}
+
+
 let theme_toggle_button = document.querySelector("#theme_toggle");
 theme_toggle_button.onclick = () => {
     themeToggle();
@@ -3527,4 +3579,4 @@ let new_url = document.URL;
 new_url = new_url.split('?')[0];
 new_url = new_url.split("#")[0];
 new_url += "#" + chat_id;
-history.pushState({url: new_url}, '', new_url);
+history.pushState({url: new_url}, '', new_url);

Original file line number	Diff line number	Diff line change
`@@ -551,7 +551,7 @@ code.hljs::-webkit-scrollbar-track {`
`551`	`551`	`margin-top: -33px;`
`552`	`552`	`}`
`553`	`553`
`554`		`-.copy-btn, .down-btn, .see_info {`
	`554`	`+.copy-btn, .down-btn, .see_info, .preview-btn {`
`555`	`555`	`padding: 3px 5px;`
`556`	`556`	`color: var(--copy-btn-color);`
`557`	`557`	`background-color: transparent;`
`@@ -562,9 +562,12 @@ code.hljs::-webkit-scrollbar-track {`
`562`	`562`	`}`
`563`	`563`
`564`	`564`
`565`		`-.btn-group .copy-btn, .btn-group .down-btn {`
	`565`	`+.btn-group .copy-btn, .btn-group .down-btn,.preview-btn {`
`566`	`566`	`background-color: var(--copy-btn-bg);`
`567`	`567`	`}`
	`568`	`+.preview-btn{`
	`569`	`+ border: 1px solid #FFEB3B;`
	`570`	`+}`
`568`	`571`
`569`	`572`
`570`	`573`	`.btn-ft-group .copy-btn, .see_info {`