update

_layouts/default.html

@@ -309,7 +309,57 @@
       });
     </script>
     {% endif %}
-    <style>video { max-width: 100% !important; }</style>
+    <style>
+      video { max-width: 100% !important; }
+      
+      /* Embed button styling */
+      .modal-embed-button {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 16px;
+        background-color: var(--accent-color);
+        color: white;
+        border: none;
+        border-radius: 6px;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        margin-right: 8px;
+      }
+      
+      .modal-embed-button:hover {
+        background-color: var(--accent-color-hover);
+        transform: translateY(-1px);
+      }
+      
+      .modal-embed-button svg {
+        width: 16px;
+        height: 16px;
+        flex-shrink: 0;
+      }
+      
+      /* Responsive adjustments for modal buttons */
+      @media (max-width: 640px) {
+        .modal-footer-right {
+          flex-direction: column-reverse;
+          gap: 8px;
+        }
+        
+        .modal-embed-button {
+          margin-right: 0;
+          margin-bottom: 0;
+          width: 100%;
+          justify-content: center;
+        }
+        
+        .modal-chat-button {
+          width: 100%;
+          justify-content: center;
+        }
+      }
+    </style>
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-MSNHFWTE77"></script>
     <script>

_layouts/embed.html

@@ -76,12 +76,12 @@
                             <label class="text-sm font-medium text-dynamic-muted-foreground">Model</label>
                             <select id="designer-model" class="w-full p-3 lg:p-2 bg-dynamic-background border border-dynamic-border rounded-lg text-sm focus-ring touch-target">
                                 <option value="o3">o3</option>
-                                <option value="GPT-4.1">GPT 4.1</option>
+                                <option value="gpt-4.1">GPT 4.1</option>
-                                <option value="GPT 4o" selected>GPT 4o</option>
+                                <option value="gpt-4o" selected>GPT 4o</option>
-                                <option value="Claude 3.7 Sonnet">Claude 3.7 Sonnet</option>
+                                <option value="claude-3.7-sonnet">Claude 3.7 Sonnet</option>
-                                <option value="Claude 4 Sonnet">Claude 4 Sonnet</option>
+                                <option value="claude-4-sonnet">Claude 4 Sonnet</option>
-                                <option value="Claude 4 Opus">Claude 4 Opus</option>
+                                <option value="claude-4-opus">Claude 4 Opus</option>
-                                <option value="Gemini 2.5 Pro">Gemini 2.5 Pro</option>
+                                <option value="gemini-2.5-pro">Gemini 2.5 Pro</option>
                                 <option value="custom">[Custom]</option>
                             </select>
                             <input type="text" id="designer-custom-model" 

_site/embed-preview-style.css

@@ -99,6 +99,29 @@
     justify-content: center;
 }
 
+/* Fixed height for prompt container to enable scrolling */
+#prompt-container {
+    height: calc(100vh - 140px); /* Fixed height minus header and footer space */
+    min-height: 100px;
+    max-height: calc(100vh - 120px);
+    /* max-height: 100vh; */
+}
+
+@media (max-width: 640px) {
+    #prompt-container {
+        height: calc(100vh - 120px); /* Smaller on mobile */
+        max-height: calc(100vh - 120px);
+    }
+}
+
+/* Ensure prompt text scrolls within container */
+#prompt-text {
+    height: 100%;
+    overflow-y: auto !important;
+    flex: 1;
+    white-space: wrap;
+}
+
 /* Responsive improvements */
 @media (max-width: 640px) {
     /* Ensure context pills don't wrap and scroll horizontally */

_site/embed-script.js

@@ -15,24 +15,45 @@ class EmbedDesigner {
     }
     
     getInitialConfig() {
-        // Try to load from localStorage first
+        // Check if we have URL parameters
+        const hasUrlParams = Object.keys(this.params).length > 0;
+        
+        // If URL params exist, prioritize them over saved config
+        if (hasUrlParams) {
+            // Start with defaults, then apply saved config, then override with URL params
+            const savedConfig = this.loadFromLocalStorage() || {};
+            return {
+                prompt: this.params.prompt || savedConfig.prompt || '',
+                context: this.params.context ? this.params.context.split(',').map(c => c.trim()) : (savedConfig.context || []),
+                model: this.params.model || savedConfig.model || 'gpt-4o',
+                mode: this.params.agentMode || savedConfig.mode || 'chat',
+                thinking: this.params.thinking === 'true' ? true : (this.params.thinking === 'false' ? false : (savedConfig.thinking || false)),
+                max: this.params.max === 'true' ? true : (this.params.max === 'false' ? false : (savedConfig.max || false)),
+                lightColor: this.params.lightColor || savedConfig.lightColor || '#3b82f6',
+                darkColor: this.params.darkColor || savedConfig.darkColor || '#60a5fa',
+                height: this.params.height || savedConfig.height || '400',
+                themeMode: this.params.themeMode || savedConfig.themeMode || 'auto'
+            };
+        }
+        
+        // Otherwise, try to load from localStorage
         const savedConfig = this.loadFromLocalStorage();
         if (savedConfig) {
             return savedConfig;
         }
         
-        // Otherwise, use URL params or defaults
+        // Fall back to defaults
         return {
-            prompt: this.params.prompt || '',
+            prompt: '',
-            context: this.params.context ? this.params.context.split(',').map(c => c.trim()) : [],
+            context: [],
-            model: this.params.model || 'gpt-4o',
+            model: 'gpt-4o',
-            mode: this.params.agentMode || 'chat',
+            mode: 'chat',
-            thinking: this.params.thinking === 'true',
+            thinking: false,
-            max: this.params.max === 'true',
+            max: false,
-            lightColor: this.params.lightColor || '#3b82f6',
+            lightColor: '#3b82f6',
-            darkColor: this.params.darkColor || '#60a5fa',
+            darkColor: '#60a5fa',
-            height: this.params.height || '400',
+            height: '400',
-            themeMode: this.params.themeMode || 'auto'
+            themeMode: 'auto'
         };
     }
     

_site/embed/index.html

@@ -76,12 +76,12 @@
                             <label class="text-sm font-medium text-dynamic-muted-foreground">Model</label>
                             <select id="designer-model" class="w-full p-3 lg:p-2 bg-dynamic-background border border-dynamic-border rounded-lg text-sm focus-ring touch-target">
                                 <option value="o3">o3</option>
-                                <option value="GPT-4.1">GPT 4.1</option>
+                                <option value="gpt-4.1">GPT 4.1</option>
-                                <option value="GPT 4o" selected>GPT 4o</option>
+                                <option value="gpt-4o" selected>GPT 4o</option>
-                                <option value="Claude 3.7 Sonnet">Claude 3.7 Sonnet</option>
+                                <option value="claude-3.7-sonnet">Claude 3.7 Sonnet</option>
-                                <option value="Claude 4 Sonnet">Claude 4 Sonnet</option>
+                                <option value="claude-4-sonnet">Claude 4 Sonnet</option>
-                                <option value="Claude 4 Opus">Claude 4 Opus</option>
+                                <option value="claude-4-opus">Claude 4 Opus</option>
-                                <option value="Gemini 2.5 Pro">Gemini 2.5 Pro</option>
+                                <option value="gemini-2.5-pro">Gemini 2.5 Pro</option>
                                 <option value="custom">[Custom]</option>
                             </select>
                             <input type="text" id="designer-custom-model" 

_site/index.html

@@ -25,7 +25,7 @@
 
 
     <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="/style.css?v=30d68386ccc36c5cd3aaa3773656bc130a8f1918">
+    <link rel="stylesheet" href="/style.css?v=02b85cf83506c024ac20fde0b38f51f24ed21336">
   </head>
   <body class="">
     <div class="layout-wrapper">
@@ -3567,7 +3567,57 @@ comments and ensure scripts are compatible across common Linux distributions.</p
       });
     </script>
     
-    <style>video { max-width: 100% !important; }</style>
+    <style>
+      video { max-width: 100% !important; }
+      
+      /* Embed button styling */
+      .modal-embed-button {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 16px;
+        background-color: var(--accent-color);
+        color: white;
+        border: none;
+        border-radius: 6px;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        margin-right: 8px;
+      }
+      
+      .modal-embed-button:hover {
+        background-color: var(--accent-color-hover);
+        transform: translateY(-1px);
+      }
+      
+      .modal-embed-button svg {
+        width: 16px;
+        height: 16px;
+        flex-shrink: 0;
+      }
+      
+      /* Responsive adjustments for modal buttons */
+      @media (max-width: 640px) {
+        .modal-footer-right {
+          flex-direction: column-reverse;
+          gap: 8px;
+        }
+        
+        .modal-embed-button {
+          margin-right: 0;
+          margin-bottom: 0;
+          width: 100%;
+          justify-content: center;
+        }
+        
+        .modal-chat-button {
+          width: 100%;
+          justify-content: center;
+        }
+      }
+    </style>
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-MSNHFWTE77"></script>
     <script>

_site/script.js

@@ -719,6 +719,21 @@ function createModal() {
             <a class="modal-contributor" target="_blank" rel="noopener"></a>
         </div>
         <div class="modal-footer-right">
+            <button class="modal-embed-button" onclick="openEmbedDesigner()">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <rect x="4" y="4" width="16" height="16" rx="2"></rect>
+                <rect x="9" y="9" width="6" height="6"></rect>
+                <path d="M15 2v2"></path>
+                <path d="M15 20v2"></path>
+                <path d="M2 15h2"></path>
+                <path d="M20 15h2"></path>
+                <path d="M2 9h2"></path>
+                <path d="M20 9h2"></path>
+                <path d="M9 2v2"></path>
+                <path d="M9 20v2"></path>
+            </svg>
+            Embed
+            </button>
             <button class="modal-chat-button" onclick="openModalChat()">
             <svg class="chat-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
@@ -1045,6 +1060,28 @@ function openModalChat() {
   }
 }
 
+// Function to handle embed button click in modal
+function openEmbedDesigner() {
+  const modalContent = document.querySelector(".modal-content");
+  if (modalContent) {
+    let content = modalContent.textContent || modalContent.innerText;
+    
+    // If there's a variable form, get the processed content with variables
+    const form = document.querySelector(".variable-form");
+    if (form) {
+      content = buildPrompt(encodeURIComponent(content.trim()));
+      // Remove the added language/tone preferences for embed
+      content = content.replace(/\s*Reply in .+ using .+ tone for .+\.$/, '').trim();
+    }
+    
+    // Build the embed URL
+    const embedUrl = `/embed/?prompt=${encodeURIComponent(content)}&context=https://prompts.chat&model=gpt-4o&agentMode=chat&thinking=false&max=false&height=400`;
+    
+    // Open in new tab
+    window.open(embedUrl, '_blank');
+  }
+}
+
 // Add these functions before the closing script tag
 function showCopilotSuggestion() {
   const modal = document.getElementById("copilotSuggestionModal");

_site/vibe/index.html

@@ -25,7 +25,7 @@
 
 
     <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="/style.css?v=30d68386ccc36c5cd3aaa3773656bc130a8f1918">
+    <link rel="stylesheet" href="/style.css?v=02b85cf83506c024ac20fde0b38f51f24ed21336">
   </head>
   <body class="vibe">
     <div class="layout-wrapper">
@@ -176,7 +176,57 @@
     </div>
     <script src="script.js"></script>
     
-    <style>video { max-width: 100% !important; }</style>
+    <style>
+      video { max-width: 100% !important; }
+      
+      /* Embed button styling */
+      .modal-embed-button {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 16px;
+        background-color: var(--accent-color);
+        color: white;
+        border: none;
+        border-radius: 6px;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        margin-right: 8px;
+      }
+      
+      .modal-embed-button:hover {
+        background-color: var(--accent-color-hover);
+        transform: translateY(-1px);
+      }
+      
+      .modal-embed-button svg {
+        width: 16px;
+        height: 16px;
+        flex-shrink: 0;
+      }
+      
+      /* Responsive adjustments for modal buttons */
+      @media (max-width: 640px) {
+        .modal-footer-right {
+          flex-direction: column-reverse;
+          gap: 8px;
+        }
+        
+        .modal-embed-button {
+          margin-right: 0;
+          margin-bottom: 0;
+          width: 100%;
+          justify-content: center;
+        }
+        
+        .modal-chat-button {
+          width: 100%;
+          justify-content: center;
+        }
+      }
+    </style>
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-MSNHFWTE77"></script>
     <script>

embed-preview-style.css

@@ -99,6 +99,29 @@
     justify-content: center;
 }
 
+/* Fixed height for prompt container to enable scrolling */
+#prompt-container {
+    height: calc(100vh - 140px); /* Fixed height minus header and footer space */
+    min-height: 100px;
+    max-height: calc(100vh - 120px);
+    /* max-height: 100vh; */
+}
+
+@media (max-width: 640px) {
+    #prompt-container {
+        height: calc(100vh - 120px); /* Smaller on mobile */
+        max-height: calc(100vh - 120px);
+    }
+}
+
+/* Ensure prompt text scrolls within container */
+#prompt-text {
+    height: 100%;
+    overflow-y: auto !important;
+    flex: 1;
+    white-space: wrap;
+}
+
 /* Responsive improvements */
 @media (max-width: 640px) {
     /* Ensure context pills don't wrap and scroll horizontally */

embed-script.js

@@ -15,24 +15,45 @@ class EmbedDesigner {
     }
     
     getInitialConfig() {
-        // Try to load from localStorage first
+        // Check if we have URL parameters
+        const hasUrlParams = Object.keys(this.params).length > 0;
+        
+        // If URL params exist, prioritize them over saved config
+        if (hasUrlParams) {
+            // Start with defaults, then apply saved config, then override with URL params
+            const savedConfig = this.loadFromLocalStorage() || {};
+            return {
+                prompt: this.params.prompt || savedConfig.prompt || '',
+                context: this.params.context ? this.params.context.split(',').map(c => c.trim()) : (savedConfig.context || []),
+                model: this.params.model || savedConfig.model || 'gpt-4o',
+                mode: this.params.agentMode || savedConfig.mode || 'chat',
+                thinking: this.params.thinking === 'true' ? true : (this.params.thinking === 'false' ? false : (savedConfig.thinking || false)),
+                max: this.params.max === 'true' ? true : (this.params.max === 'false' ? false : (savedConfig.max || false)),
+                lightColor: this.params.lightColor || savedConfig.lightColor || '#3b82f6',
+                darkColor: this.params.darkColor || savedConfig.darkColor || '#60a5fa',
+                height: this.params.height || savedConfig.height || '400',
+                themeMode: this.params.themeMode || savedConfig.themeMode || 'auto'
+            };
+        }
+        
+        // Otherwise, try to load from localStorage
         const savedConfig = this.loadFromLocalStorage();
         if (savedConfig) {
             return savedConfig;
         }
         
-        // Otherwise, use URL params or defaults
+        // Fall back to defaults
         return {
-            prompt: this.params.prompt || '',
+            prompt: '',
-            context: this.params.context ? this.params.context.split(',').map(c => c.trim()) : [],
+            context: [],
-            model: this.params.model || 'gpt-4o',
+            model: 'gpt-4o',
-            mode: this.params.agentMode || 'chat',
+            mode: 'chat',
-            thinking: this.params.thinking === 'true',
+            thinking: false,
-            max: this.params.max === 'true',
+            max: false,
-            lightColor: this.params.lightColor || '#3b82f6',
+            lightColor: '#3b82f6',
-            darkColor: this.params.darkColor || '#60a5fa',
+            darkColor: '#60a5fa',
-            height: this.params.height || '400',
+            height: '400',
-            themeMode: this.params.themeMode || 'auto'
+            themeMode: 'auto'
         };
     }
     

script.js

@@ -719,6 +719,21 @@ function createModal() {
             <a class="modal-contributor" target="_blank" rel="noopener"></a>
         </div>
         <div class="modal-footer-right">
+            <button class="modal-embed-button" onclick="openEmbedDesigner()">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <rect x="4" y="4" width="16" height="16" rx="2"></rect>
+                <rect x="9" y="9" width="6" height="6"></rect>
+                <path d="M15 2v2"></path>
+                <path d="M15 20v2"></path>
+                <path d="M2 15h2"></path>
+                <path d="M20 15h2"></path>
+                <path d="M2 9h2"></path>
+                <path d="M20 9h2"></path>
+                <path d="M9 2v2"></path>
+                <path d="M9 20v2"></path>
+            </svg>
+            Embed
+            </button>
             <button class="modal-chat-button" onclick="openModalChat()">
             <svg class="chat-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
@@ -1045,6 +1060,28 @@ function openModalChat() {
   }
 }
 
+// Function to handle embed button click in modal
+function openEmbedDesigner() {
+  const modalContent = document.querySelector(".modal-content");
+  if (modalContent) {
+    let content = modalContent.textContent || modalContent.innerText;
+    
+    // If there's a variable form, get the processed content with variables
+    const form = document.querySelector(".variable-form");
+    if (form) {
+      content = buildPrompt(encodeURIComponent(content.trim()));
+      // Remove the added language/tone preferences for embed
+      content = content.replace(/\s*Reply in .+ using .+ tone for .+\.$/, '').trim();
+    }
+    
+    // Build the embed URL
+    const embedUrl = `/embed/?prompt=${encodeURIComponent(content)}&context=https://prompts.chat&model=gpt-4o&agentMode=chat&thinking=false&max=false&height=400`;
+    
+    // Open in new tab
+    window.open(embedUrl, '_blank');
+  }
+}
+
 // Add these functions before the closing script tag
 function showCopilotSuggestion() {
   const modal = document.getElementById("copilotSuggestionModal");