This commit is contained in:
Fatih Kadir Akın 2025-06-16 23:33:48 +03:00
parent 02b85cf835
commit b7146f0ae9
11 changed files with 353 additions and 41 deletions

View File

@ -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>

View File

@ -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 4o" selected>GPT 4o</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 Opus">Claude 4 Opus</option>
<option value="Gemini 2.5 Pro">Gemini 2.5 Pro</option>
<option value="gpt-4.1">GPT 4.1</option>
<option value="gpt-4o" selected>GPT 4o</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-opus">Claude 4 Opus</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"

View File

@ -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 */

View File

@ -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 || '',
context: this.params.context ? this.params.context.split(',').map(c => c.trim()) : [],
model: this.params.model || 'gpt-4o',
mode: this.params.agentMode || 'chat',
thinking: this.params.thinking === 'true',
max: this.params.max === 'true',
lightColor: this.params.lightColor || '#3b82f6',
darkColor: this.params.darkColor || '#60a5fa',
height: this.params.height || '400',
themeMode: this.params.themeMode || 'auto'
prompt: '',
context: [],
model: 'gpt-4o',
mode: 'chat',
thinking: false,
max: false,
lightColor: '#3b82f6',
darkColor: '#60a5fa',
height: '400',
themeMode: 'auto'
};
}

View File

@ -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 4o" selected>GPT 4o</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 Opus">Claude 4 Opus</option>
<option value="Gemini 2.5 Pro">Gemini 2.5 Pro</option>
<option value="gpt-4.1">GPT 4.1</option>
<option value="gpt-4o" selected>GPT 4o</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-opus">Claude 4 Opus</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"

View File

@ -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>

View File

@ -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");

View File

@ -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>

View File

@ -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 */

View File

@ -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 || '',
context: this.params.context ? this.params.context.split(',').map(c => c.trim()) : [],
model: this.params.model || 'gpt-4o',
mode: this.params.agentMode || 'chat',
thinking: this.params.thinking === 'true',
max: this.params.max === 'true',
lightColor: this.params.lightColor || '#3b82f6',
darkColor: this.params.darkColor || '#60a5fa',
height: this.params.height || '400',
themeMode: this.params.themeMode || 'auto'
prompt: '',
context: [],
model: 'gpt-4o',
mode: 'chat',
thinking: false,
max: false,
lightColor: '#3b82f6',
darkColor: '#60a5fa',
height: '400',
themeMode: 'auto'
};
}

View File

@ -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");