{{ template "headersMenu.html" . }}

<style>
@media (max-width:1023px) {
	.sloubi {
		min-height: calc(100vh - 420px);
	}
}
@media (min-width:1024px) {
	.sloubi {
		min-height: calc(100vh - 323px);
	}
}
	: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: #00cccc;
	--accent-color: #00cccc;
	--secondary-text: #000;
	--example-bg: rgba(10, 10, 10, 0.7);
	}
	body, .bg-gray-100 {
	background: #fff8 !important;
	}
	.dark body, body.dark,
	.dark body  .bg-gray-100, body.dark .bg-gray-100 {
	background: #0008 !important;
	}
	.chat-container {
	display: flex;
	flex-direction: column;
	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: 0;
	
	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 {
	
	font-size: 2.6rem;
	margin-bottom: 0.5rem;
	}
	.chat-messages {
	flex-grow: 1;
	padding: 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;
	white-space: pre-wrap;
	overflow-x: auto;
	}
	.user-message {
	align-self: flex-end;
	background-color: var(--text-color);
	color: var(--chat-bg);
	border: 2px solid var(--border-color);
	}
	.dark .user-message {
	background-color: var(--chat-bg);
	color: var(--text-color);
	}
	.gpt6-message {
	align-self: flex-start;
	color: #000;
	line-height: 1.4em;
	background-color: #fff;
	border: 2px solid #000;
	}
	.dark .gpt6-message {
		background-color: #000;
		border: 2px solid #fff;
		color: #fff;

	}
	.gpt6-message b, .gpt6-message strong {
	font-weight: 700;
	}
	.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: #fff0;
	border: 0;
	position: sticky; /* Utiliser sticky au lieu de fixed */
	bottom: 0;
	z-index: 100;
	}
	.dark .chat-input {
	background: #0000;
	}
	
	.chat-input-wrapper {
	display: flex;
	flex-direction: column;
	background-color: #f8f5f1dd;
	color: #000;
	overflow: hidden;
	border: 3px solid #000;
	border-radius: 12px;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(4px);
	}
	.dark .chat-input-wrapper {
	border: 3px solid #fff;
	background-color: #080501bb;
	color: #fff;
	}
	.chat-input textarea {
	flex-grow: 1;
	padding: 0.8rem;
	border: 0;
	font-size: 1rem;
	border-radius: 12px;
	background-color: transparent;
	color: #000;
	font-weight: bold;
	resize: none;
	min-height: 60px;
	max-height: 120px;
	}
	.dark .chat-input textarea {
	color: #fff;
	}
	.chat-input textarea:focus {
	outline: none;
	}
	.chat-input-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem;
	font-size: 0.8rem;
	}
	.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;
	}
	.send-btn {
	border: 0;
	cursor: pointer;
	font-size: 1rem;
	padding: 0.3rem 0.6rem;
	border-radius: 0.3rem;
	transition: all 0.3s ease;
	}
	.typing-indicator {
	align-self: flex-start;
	background-color: #ff00ff;
	padding: 0.4rem 0.6rem;
	font-style: italic;
	display: none;
	font-size: 0.8rem;
	animation: pulse 1.5s infinite;
	background: #ff00ff;
	z-index: 90909;
	}
	@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: 1rem;
		font-weight: bold;
		padding: 0.6rem;
	}
	.chat-input-footer {
		padding: 0.4rem;
	}
}
code[class*=language-], pre[class*=language-] {
	color:#000 !important;
}
.dark code[class*=language-], .dark pre[class*=language-] {
	color:#fff !important;
}
</style>

<div class="pt-16 chat-container">
  <div class="container">
	<div class="mt-10 text-4xl font-light">{{ "Je suis" | t }} <b class="font-bold">{{ .bot.Name }}</b>.</div>
	<div class="mt-2 text-lg">{{ "Que souhaitez-vous explorer aujourd'hui ?" | t }}</div>
	<div id="ListView">
		<div class="chat-messages sloubi" id="chatMessages">
	</div>
    </div>
  </div>
  <form id="chatForm" class="chat-input">
  	<div class="container">
		<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="text-black chat-input-footer dark:text-white">
			<div class="model-info">
				<div class="pdf-upload">
					<input type="file" id="pdfFile" accept=".pdf" />
					<label for="pdfFile"><i class="mx-1 fa fa-folder-open"></i> 
						<code>PDF ∞</code>
						<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>
						</label>
				</div>
			</div>
			<div style="display: flex; align-items: center;">
				<button type="submit" class="text-black border-0 btn dark:text-white transparent" title="{{ "Envoyer" | t }}"><i class="fa fa-2x fa-send"></i></button>
			</div>
		</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 src="https://cdn.jsdelivr.net/npm/clipboard@latest/dist/clipboard.min.js"></script>
<script>

const chatMessages = document.getElementById('chatMessages');
const chatForm = document.getElementById('chatForm');
const userInput = document.getElementById('userInput');
const typingIndicator = document.getElementById('typingIndicator');
const pdfFileInput = document.getElementById('pdfFile');
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;

    // Add click event to copy the content to clipboard
    messageDiv.addEventListener('click', () => {
        const tempTextArea = document.createElement('textarea');
        tempTextArea.value = messageDiv.innerText;
        document.body.appendChild(tempTextArea);
        tempTextArea.select();
        document.execCommand('copy');
        document.body.removeChild(tempTextArea);
        
		
    });

    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('/bin/assistant/chat/{{ .bot.Tag }}', {
        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();

    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'));
    }
});

pdfFileInput.addEventListener('change', async (e) => {
    const file = e.target.files[0];
    if (file && file.type === 'application/pdf') {
    showTypingIndicator();
    try {
        const arrayBuffer = await file.arrayBuffer();
        const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
        let text = '';
        for (let i = 1; i <= pdf.numPages; i++) {
        const page = await pdf.getPage(i);
        const content = await page.getTextContent();
        text += content.items.map(item => item.str).join(' ') + '\n';
        }
        extractedText = text;
        hasS = pdf.numPages>1 ? 's' : '';
        addMessage(`<span class="font-bold uppercase text-md">Assimilation du PDF terminée (${pdf.numPages} page${hasS})</span><br/>Vous pouvez maintenant m'interroger sur son contenu sans restrictions.`, true);
    } catch (error) {
        console.error('Erreur lors de l\'extraction du texte du PDF:', error);
        addMessage('Mes excuses, j\'ai rencontré une erreur lors du traitement du PDF. Veuillez essayer de le télécharger à nouveau ou utiliser un fichier différent.', true);
    } finally {
        hideTypingIndicator();
    }
    } else {
      addMessage('Veuillez télécharger un fichier PDF valide pour l\'analyse.', true);
    }
});

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" . }}