YouHaveTrouble/HmmAI
1
0
Fork 0
mirror of https://github.com/YouHaveTrouble/HmmAI.git synced 2026-05-11 22:06:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

separated thinking time message from sender element

Browse Source
This commit is contained in:
YouHaveTrouble
2026-03-08 13:04:46 +01:00
parent 029616ee6b
commit f8f7d08fb3
2 changed files with 26 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/index.astro
+19 -5
View File
@@ -67,6 +67,15 @@ const description = "An AI that responds with 'Huh'.";
</div> </div>
</div> </div>
<template id="message-template">
<div class="message">
<span class="header">
<span class="sender"></span>
<span class="thinking-time"></span>
</span>
<span class="content"></span>
</div>
</template>
</body> </body>
</html> </html>
@@ -75,6 +84,7 @@ const description = "An AI that responds with 'Huh'.";
const messageInput = messageForm?.querySelector("input"); const messageInput = messageForm?.querySelector("input");
const sendButton: HTMLButtonElement | null | undefined = messageForm?.querySelector('button[type="submit"]'); const sendButton: HTMLButtonElement | null | undefined = messageForm?.querySelector('button[type="submit"]');
const messagesContainer = document.querySelector(".messages"); const messagesContainer = document.querySelector(".messages");
const messageTemplate = document.querySelector("#message-template") as HTMLTemplateElement | null;
const optionsContainer = document.querySelector(".options"); const optionsContainer = document.querySelector(".options");
const advancedResponsesCheckbox = optionsContainer?.querySelector('input[name="advanced-responses"]') as HTMLInputElement | null; const advancedResponsesCheckbox = optionsContainer?.querySelector('input[name="advanced-responses"]') as HTMLInputElement | null;
@@ -118,16 +128,20 @@ const description = "An AI that responds with 'Huh'.";
if (options.thinkingMode && messagesContainer?.firstElementChild) { if (options.thinkingMode && messagesContainer?.firstElementChild) {
messagesContainer.removeChild(messagesContainer.firstElementChild); messagesContainer.removeChild(messagesContainer.firstElementChild);
} }
addMessage(options.thinkingMode ? `HmmAI (Thought for ${(randomDelay / 1000).toFixed(2)} seconds)` : "HmmAI", generateResponse()); addMessage("HmmAI", generateResponse(), randomDelay / 1000);
messageInput.disabled = false; messageInput.disabled = false;
messageInput.focus(); messageInput.focus();
}, randomDelay); }, randomDelay);
}); });
function addMessage(sender: string, text: string) { function addMessage(sender: string, text: string, thinkingTime?: number) {
const messageElement = document.createElement("div"); if (!messageTemplate) return;
messageElement.setAttribute("data-user", sender); const messageElement = document.importNode(messageTemplate.content, true);
messageElement.textContent = text; messageElement.querySelector('.sender')!.textContent = sender;
messageElement.querySelector('.content')!.textContent = text;
if (thinkingTime !== undefined) {
messageElement.querySelector('.thinking-time')!.textContent = `Thought for (${thinkingTime.toFixed(2)}s)`;
}
messagesContainer?.prepend(messageElement); messagesContainer?.prepend(messageElement);
} }
src/style/style.scss
+7 -3
View File
@@ -45,7 +45,7 @@ body {
padding-inline: 0.5rem; padding-inline: 0.5rem;
max-height: 100%; max-height: 100%;
div { .message {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0.5rem; padding: 0.5rem;
@@ -54,10 +54,14 @@ body {
border-radius: 0.25rem; border-radius: 0.25rem;
position: relative; position: relative;
&::before { .sender {
content: attr(data-user);
font-weight: bold; font-weight: bold;
} }
.thinking-time {
font-size: 0.75rem;
color: #aaaaaa;
}
} }
} }