From c6d152ae3b7af58f30ed32104c70196ef3f8bffc Mon Sep 17 00:00:00 2001 From: Tanishq Dubey Date: Thu, 26 Sep 2024 13:53:07 -0400 Subject: [PATCH] UI Changes --- index.html | 27 +++++++++++++++++++++++---- 1 file changed, 23 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 59ea570..4f33f8f 100644 --- a/index.html +++ b/index.html @@ -117,9 +117,17 @@ function addThought(step, content) { if (thinkingDetails) { - const thoughtElement = document.createElement('div'); - thoughtElement.innerHTML = `${step}: ${content}`; - thinkingDetails.appendChild(thoughtElement); + const stepElement = document.createElement('div'); + stepElement.classList.add('thought-summary', 'collapsible'); + stepElement.textContent = step; + stepElement.onclick = toggleStepDetails; + + const stepDetails = document.createElement('div'); + stepDetails.classList.add('thought-details'); + stepDetails.innerHTML = content; + + thinkingDetails.appendChild(stepElement); + thinkingDetails.appendChild(stepDetails); chatContainer.scrollTop = chatContainer.scrollHeight; } } @@ -133,7 +141,18 @@ function toggleThinkingDetails() { this.classList.toggle('open'); - thinkingDetails.style.display = thinkingDetails.style.display === 'none' ? 'block' : 'none'; + const details = this.nextElementSibling; + if (details) { + details.style.display = details.style.display === 'none' ? 'block' : 'none'; + } + } + + function toggleStepDetails() { + this.classList.toggle('open'); + const details = this.nextElementSibling; + if (details) { + details.style.display = details.style.display === 'none' ? 'block' : 'none'; + } } socket.on('thinking', (data) => {