{{ template "headersMenu.html" . }}

<style>
	.sloubi {
		min-height: calc(100vh - 207px);
	}
		:root {
		--bg-color: #000000;
		--chat-bg: rgba(17, 17, 17, 0.7);
		--header-bg: rgba(0, 0, 0, 0.8);
		--input-bg: rgba(17, 17, 17, 0.8);
		--text-color: #00cccc;
		--border-color: #333333;
		--accent-color: #ff00ff;
		--secondary-text: #00cccc;
		--example-bg: rgba(10, 10, 10, 0.7);
		}
		.chat-container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		max-width: 100%;
		margin: 0 auto;
		position: relative;
		}
		.top-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0.5rem 1rem;
		background-color: var(--header-bg);
		color: var(--secondary-text);
		font-size: 0.9rem;
		z-index: 10;
		}
		.menu-icon {
		width: 24px;
		height: 24px;
		cursor: pointer;
		}
		.dont-upgrade-btn {
		background-color: transparent;
		border: none;
		color: var(--accent-color);
		cursor: pointer;
		font-size: 0.9rem;
		font-weight: 500;
		}
		.chat-header {
		background-color: var(--header-bg);
		color: var(--text-color);
		padding: 1rem;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 10;
		}
		.chat-header .greeting {
		font-size: 2rem;
		font-weight: 400;
		line-height: 1.1;
		}
		.chat-header .name {
		font-size: 2.4rem;
		font-weight: 700;
		}
		.hexagon-icon {
		color: var(--accent-color);
		font-size: 2.6rem;
		margin-bottom: 0.5rem;
		}
		.chat-messages {
		flex-grow: 1;
		padding: 1rem 1rem 0;
		display: flex;
		flex-direction: column;
		scrollbar-width: thin;
		scrollbar-color: var(--border-color) var(--bg-color);
		z-index: 10;
		overscroll-behavior: contain; /* Contient l'effet de rebond */
		}
		.chat-messages::-webkit-scrollbar {
		width: 6px;
		}
		.chat-messages::-webkit-scrollbar-track {
		background: var(--bg-color);
		}
		.chat-messages::-webkit-scrollbar-thumb {
		background-color: var(--border-color);
		border-radius: 20px;
		}
		.message {
		max-width: 90vw;
		margin-bottom: 1.5rem;
		padding: 1rem;
		border-radius: 0.5rem;
		line-height: 1.6;
		position: relative;
		word-wrap: break-word;
		font-size: 0.9rem;
		transition: all 0.3s ease;
		border: 2px solid var(--border-color);
		white-space: pre-wrap;
		overflow-x: auto;
		}
		.user-message {
		align-self: flex-end;
		background-color: var(--text-color);
		color: var(--chat-bg);
		}
		.dark .user-message {
		background-color: var(--chat-bg);
		color: var(--text-color);
		}
		.gpt6-message {
		align-self: flex-start;
		background-color: #f8f5f1;
		color: var(--input-bg);
		line-height: 1.4em;
		}
		.gpt6-message a {
		text-decoration: underline;
		}
		.gpt6-message h1 {
		font-size: 2em;
		font-weight: bold;
		margin:0;
		padding:0; 
		}
		.gpt6-message h2 {
		font-size: 1.8em;
		font-weight: bold;
		margin:0;
		padding:0; 
		}
		.gpt6-message h3 {
		font-size: 1.6em;
		font-weight: bold;
		margin:0;
		padding:0; 
		}
		.gpt6-message h4 {
		font-size: 1.4em;
		font-weight: bold;
		margin:0;
		padding:0; 
		}
		.gpt6-message h5 {
		font-size: 1.3em;
		font-weight: bold;
		margin:0;
		padding:0; 
		}
		.gpt6-message h6 {
		font-size: 1.2em;
		font-weight: bold;
		margin:0;
		padding:0; 
		}
		.gpt6-message p {
			line-height: 1.4em;
			font-size: 1em;
			margin:0;
			padding:0; 
		}
		.gpt6-message ul {
		margin:0;
		padding:0; 
			line-height: 1;
			list-style: square;
			padding-left: 17px;
		}
		.gpt6-message ul li {
			list-style: square;
			padding-left: 9px;
		}
		.dark .gpt6-message {
		background-color: var(--input-bg);
		color: #ffffff;
		}
		.gpt6-message.white {
		color: #ffffff;
		}
		.chat-input {
		display: flex;
		flex-direction: column;
		padding: 0.5rem;
		background: #0005;
		backdrop-filter: blur(4px);
		border-top: 2px solid var(--border-color);
		position: sticky; /* Utiliser sticky au lieu de fixed */
		bottom: 0;
		z-index: 100;
		}
		
		.chat-input-wrapper {
		display: flex;
		flex-direction: column;
		background-color: var(--input-bg);
		border-radius: 0.5rem;
		overflow: hidden;
		border: 1px solid var(--border-color);
		}
		.chat-input textarea {
		flex-grow: 1;
		padding: 0.8rem;
		border: none;
		font-size: 0.9rem;
		background-color: transparent;
		color: var(--text-color);
		resize: none;
		min-height: 60px;
		max-height: 120px;
		}
		.chat-input textarea:focus {
		outline: none;
		}
		.chat-input-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0.5rem;
		background-color: var(--chat-bg);
		font-size: 0.8rem;
		color: var(--secondary-text);
		}
		.model-info {
		display: flex;
		align-items: center;
		}
		.ai-icon {
		width: 14px;
		height: 14px;
		margin-left: 5px;
		}
		.pdf-upload {
		position: relative;
		margin-right: 0.5rem;
		}
		.pdf-upload input[type="file"] {
		display: none;
		}
		.pdf-upload label {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: transparent;
		color: var(--secondary-text);
		cursor: pointer;
		font-size: 1.2rem;
		transition: all 0.3s ease;
		}
		.pdf-upload label:hover {
		color: var(--accent-color);
		}
		.send-btn {
		background-color: #fff;
		border: none;
		color: #000;
		cursor: pointer;
		font-size: 1rem;
		padding: 0.3rem 0.6rem;
		border-radius: 0.3rem;
		transition: all 0.3s ease;
		}
		.send-btn:hover {
		background-color: rgb(0, 204, 204);
		color: var(--bg-color);
		}
		.typing-indicator {
		align-self: flex-start;
		background-color: var(--accent-color);
		color: #fff;
		padding: 0.4rem 0.6rem;
		font-style: italic;
		display: none;
		font-size: 0.8rem;
		animation: pulse 1.5s infinite;
		}
		@keyframes pulse {
		0% { opacity: 0.5; }
		50% { opacity: 1; }
		100% { opacity: 0.5; }
		}
		@media (max-width: 768px) {
		.chat-header .greeting {
			font-size: 1.8rem;
		}
		.chat-header .name {
			font-size: 2.2rem;
		}
		.chat-input textarea {
			font-size: 0.85rem;
			padding: 0.6rem;
		}
		.chat-input-footer {
			padding: 0.4rem;
		}
		}
	</style>
	
<div class="pt-16 chat-container">
  <div class="container sloubi">
    <div class="chat-messages" id="chatMessages">
      <div class="message gpt6-message"><b>Support PM.STUDIO 24/7.</b> Créons votre charte graphique :) <div class="hidden absolute right-0 bottom-0 text-green-500 check-icon">✓</div>
      </div>
    </div>
  </div>
  <form id="chatForm" class="chat-input">
    <div class="fixed bottom-0 left-0 mb-4 typing-indicator" id="typingIndicator">assistant.pm est en train de calculer...</div>
    <div class="chat-input-wrapper">
      <textarea id="userInput" placeholder="Initiez votre requête..." aria-label="Saisie de chat" required></textarea>
      <div class="chat-input-footer">
        <div class="model-info">
          <svg class="ai-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          ∞
        </div>
        <div style="display: flex; align-items: center;">
          <button type="submit" class="send-btn">{{ "Envoyer" | t }}</button>
        </div>
      </div>
    </div>
  </form>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.9.359/pdf.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-go.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-php.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-markdown.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-json.min.js"></script>
<script>

const chatMessages = document.getElementById('chatMessages');
const chatForm = document.getElementById('chatForm');
const userInput = document.getElementById('userInput');
const typingIndicator = document.getElementById('typingIndicator');
let extractedText = '';

function addMessage(content, isUser = false) {
    const messageDiv = document.createElement('div');
    messageDiv.classList.add('message');
    messageDiv.classList.add(isUser ? 'user-message' : 'gpt6-message');
    messageDiv.classList.add('shadow-md');
    
    content = content.trim();
    content = content.replace(/```(\w+)?\n([\s\S]*?)```/g, (match, language, code) => {
    return `<pre><code class="${language || ''}">${code.trim()}</code></pre>`;
    });
    content = content.replace(/^[-*•]\s(.+)$/gm, '<li>$1</li>');
    content = content.replace(/<li>.*?<\/li>/gs, match => `<ul>${match}</ul>`);
    
    messageDiv.innerHTML = content;

    chatMessages.appendChild(messageDiv);
    chatMessages.scrollTop = chatMessages.scrollHeight;
    return messageDiv;
}

function showTypingIndicator() {
  window.scrollTo(0, document.body.scrollHeight);
  typingIndicator.style.display = 'block';
  chatMessages.scrollTop = chatMessages.scrollHeight;
}

function hideTypingIndicator() {
  window.scrollTo(0, document.body.scrollHeight);
  typingIndicator.style.display = 'none';
}

async function getGPT6Response(userMessage) {
    showTypingIndicator();
    try {
    const response = await fetch('/api/assistant/chat/template', {
        method: 'POST',
        headers: {
        'Content-Type': 'application/json',
        },
        body: JSON.stringify({ message: userMessage, extractedText: extractedText, uncensored: true }),
    });
    if (!response.ok) {
        throw new Error('La réponse du réseau n\'était pas correcte');
    }
    
    const jsonResponse = await response.json();
    const gptResponse = jsonResponse.response;

    const messageDiv = addMessage('', false);
    messageDiv.innerHTML = gptResponse.trim();

	extractedText += "\n\n---\n\nRéponse précédente: "+gptResponse.trim()+"\n\n";

    const checkedDiv = document.createElement('div');
    checkedDiv.classList.add('check-icon');
    checkedDiv.classList.add('hidden');
    checkedDiv.classList.add('absolute');
    checkedDiv.classList.add('bottom-0');
    checkedDiv.classList.add('right-0');
    checkedDiv.classList.add('text-green-500');
    checkedDiv.innerHTML = '✓';
    messageDiv.appendChild(checkedDiv);
    
    chatMessages.scrollTop = chatMessages.scrollHeight;

    return gptResponse;

    } catch (error) {
    console.error('Erreur:', error);
    return "Je m'excuse, mais j'ai rencontré une fluctuation quantique inattendue. Veuillez reformuler votre requête ou explorer une autre ligne d'interrogation.";
    } finally {
    hideTypingIndicator();
    }
}

chatForm.addEventListener('submit', async (e) => {
    e.preventDefault();
    const message = userInput.value.trim();
    if (message) {
    addMessage(message, true);
    userInput.value = '';
    userInput.focus();
    await getGPT6Response(message);
    }
});

userInput.addEventListener('keydown', async (e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault();
    chatForm.dispatchEvent(new Event('submit'));
    }
});

userInput.addEventListener('input', function() {
    this.style.height = 'auto';
    this.style.height = (this.scrollHeight) + 'px';
});

window.addEventListener('load', () => {
    userInput.focus();
});

document.addEventListener('gesturestart', function(e) {
    e.preventDefault();
});

</script>

{{ template "footer.html" . }}