diff --git a/assets/pasted-20251217-014544-0379569d.png b/assets/pasted-20251217-014544-0379569d.png new file mode 100644 index 0000000..cdde0ef Binary files /dev/null and b/assets/pasted-20251217-014544-0379569d.png differ diff --git a/chat.php b/chat.php index 1f9a533..1e40c22 100644 --- a/chat.php +++ b/chat.php @@ -23,14 +23,29 @@ require_once 'db/config.php'; background-color: #fafafa; -webkit-font-smoothing: antialiased; } + /* Make main content fill the screen */ + .main-content { + height: 100vh; + display: flex; + flex-direction: column; + } + .chat-layout { + display: grid; + grid-template-columns: 1fr 320px; /* Main chat area and right sidebar */ + gap: 0; + height: 100%; + width: 100%; + } .chat-container { display: flex; flex-direction: column; - height: calc(100vh - 120px); /* Adjust based on header/footer height */ + height: 100%; /* Full height of its grid cell */ + background-color: #fafafa; } .chat-messages { flex-grow: 1; overflow-y: auto; + padding: 1.5rem; } .message-bubble { max-width: 75%; @@ -40,34 +55,25 @@ require_once 'db/config.php'; color: white; } .ai-message { - background-color: #F3F4F6; + background-color: #ffffff; color: #1F2937; + border: 1px solid #e5e7eb; } #chat-input-wrapper { position: relative; } - #chat-input { - padding-right: 40px; /* Space for the button */ - } #send-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); - background: none; - border: none; - cursor: pointer; - color: #9CA3AF; - } - #send-btn:hover { - color: #374151; }
-
+
FinMox Logo @@ -84,51 +90,108 @@ require_once 'db/config.php';
-
-
-

AI Copilot

- -
-
+
+
+ +
+ + + +
-
-
-

Hi, I'm FinMox AI.

-

How can I help you today?

-
-
-

Here are a few suggestions:

-
- - - +
-
+
- -
+ +
@@ -144,8 +207,9 @@ require_once 'db/config.php'; let welcomeMessageCleared = false; function addMessage(sender, content) { - if (!welcomeMessageCleared) { - chatMessages.innerHTML = ''; + if (welcomeScreen && !welcomeMessageCleared) { + welcomeScreen.style.display = 'none'; + chatMessages.innerHTML = ''; // Clear any lingering welcome message content if needed welcomeMessageCleared = true; } @@ -154,7 +218,11 @@ require_once 'db/config.php'; const bubble = document.createElement('div'); bubble.classList.add('p-3', 'rounded-lg', 'message-bubble'); - bubble.textContent = content; + + const contentContainer = document.createElement('div'); + contentContainer.textContent = content; + bubble.appendChild(contentContainer); + if (sender === 'user') { messageWrapper.classList.add('justify-end'); @@ -169,8 +237,8 @@ require_once 'db/config.php'; chatMessages.scrollTop = chatMessages.scrollHeight; } - async function sendMessage() { - const message = userInput.value.trim(); + async function sendMessage(messageOverride) { + const message = messageOverride || userInput.value.trim(); if (!message) return; addMessage('user', message); @@ -202,27 +270,29 @@ require_once 'db/config.php'; } } - function handleSuggestionClick(event) { - const button = event.target.closest('.suggestion-card'); - if (button) { - const text = button.querySelector('p').textContent; - userInput.value = text; - userInput.focus(); - } - } - - sendBtn.addEventListener('click', sendMessage); + sendBtn.addEventListener('click', () => sendMessage()); userInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') { e.preventDefault(); sendMessage(); } }); - + document.querySelectorAll('.suggestion-card').forEach(card => { - card.addEventListener('click', handleSuggestionClick); + card.addEventListener('click', (e) => { + e.preventDefault(); + const suggestion = e.currentTarget.dataset.suggestion; + sendMessage(suggestion); + }); + }); + + document.querySelectorAll('.suggestion-btn').forEach(button => { + button.addEventListener('click', (e) => { + const suggestion = e.currentTarget.dataset.suggestion; + sendMessage(suggestion); + }); }); - \ No newline at end of file +