tacit/nanochat
1
0
Fork 0
mirror of https://github.com/karpathy/nanochat.git synced 2025-12-22 12:12:20 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

change in linespacing of response

Browse Source
This commit is contained in:
Goderr 2025-10-21 20:14:15 +05:30
parent 07348bb1d3
commit e9c5e911f6
1 changed files with 46 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
nanochat/ui.html
View File

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -101,11 +102,14 @@
} }
.message-content { .message-content {
white-space: pre-wrap;
line-height: 1.6; line-height: 1.6;
max-width: 100%; max-width: 100%;
} }
.message.user .message-content {
white-space: pre-wrap;
}
.message.assistant .message-content { .message.assistant .message-content {
background: transparent; background: transparent;
border: none; border: none;
@ -221,8 +225,16 @@
} }
@keyframes typing { @keyframes typing {
0%, 60%, 100% { opacity: 0.2; }
30% { opacity: 1; } 0%,
60%,
100% {
opacity: 0.2;
}
30% {
opacity: 1;
}
} }
.error-message { .error-message {
@ -237,7 +249,7 @@
/* Markdown styling */ /* Markdown styling */
.message-content table { .message-content table {
border-collapse: collapse; border-collapse: collapse;
margin: 0.5rem 0; margin: 0.25rem 0;
width: 100%; width: 100%;
} }
@ -266,7 +278,7 @@
padding: 0.75rem; padding: 0.75rem;
border-radius: 0.5rem; border-radius: 0.5rem;
overflow-x: auto; overflow-x: auto;
margin: 0.5rem 0; margin: 0.25rem 0;
} }
.message-content pre code { .message-content pre code {
@ -280,22 +292,30 @@
.message-content h4, .message-content h4,
.message-content h5, .message-content h5,
.message-content h6 { .message-content h6 {
margin: 1rem 0 0.5rem 0; margin: 0.75rem 0 0.25rem 0;
font-weight: 600; font-weight: 600;
} }
.message-content h1 { font-size: 1.5em; } .message-content h1 {
.message-content h2 { font-size: 1.3em; } font-size: 1.5em;
.message-content h3 { font-size: 1.1em; } }
.message-content h2 {
font-size: 1.3em;
}
.message-content h3 {
font-size: 1.1em;
}
.message-content ul, .message-content ul,
.message-content ol { .message-content ol {
margin: 0.5rem 0; margin: 0.25rem 0;
padding-left: 1.5rem; padding-left: 1.5rem;
} }
.message-content li { .message-content li {
margin: 0.25rem 0; margin: 0.1rem 0;
} }
.message-content blockquote { .message-content blockquote {
@ -306,11 +326,13 @@
} }
</style> </style>
</head> </head>
<body> <body>
<div class="header"> <div class="header">
<div class="header-left"> <div class="header-left">
<button class="new-conversation-btn" onclick="newConversation()" title="New Conversation (Ctrl+Shift+N)"> <button class="new-conversation-btn" onclick="newConversation()" title="New Conversation (Ctrl+Shift+N)">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="M12 5v14"></path> <path d="M12 5v14"></path>
<path d="M5 12h14"></path> <path d="M5 12h14"></path>
</svg> </svg>
@ -327,15 +349,11 @@
<div class="input-container"> <div class="input-container">
<div class="input-wrapper"> <div class="input-wrapper">
<textarea <textarea id="chatInput" class="chat-input" placeholder="Ask anything" rows="1"
id="chatInput" onkeydown="handleKeyDown(event)"></textarea>
class="chat-input"
placeholder="Ask anything"
rows="1"
onkeydown="handleKeyDown(event)"
></textarea>
<button id="sendButton" class="send-button" onclick="sendMessage()" disabled> <button id="sendButton" class="send-button" onclick="sendMessage()" disabled>
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="M22 2L11 13"></path> <path d="M22 2L11 13"></path>
<path d="M22 2l-7 20-4-9-9-4 20-7z"></path> <path d="M22 2l-7 20-4-9-9-4 20-7z"></path>
</svg> </svg>
@ -388,7 +406,7 @@
return div.innerHTML; return div.innerHTML;
} }
chatInput.addEventListener('input', function() { chatInput.addEventListener('input', function () {
this.style.height = 'auto'; this.style.height = 'auto';
this.style.height = Math.min(this.scrollHeight, 200) + 'px'; this.style.height = Math.min(this.scrollHeight, 200) + 'px';
sendButton.disabled = !this.value.trim() || isGenerating; sendButton.disabled = !this.value.trim() || isGenerating;
@ -401,7 +419,7 @@
} }
} }
document.addEventListener('keydown', function(event) { document.addEventListener('keydown', function (event) {
// Ctrl+Shift+N for new conversation // Ctrl+Shift+N for new conversation
if (event.ctrlKey && event.shiftKey && event.key === 'N') { if (event.ctrlKey && event.shiftKey && event.key === 'N') {
event.preventDefault(); event.preventDefault();
@ -439,7 +457,7 @@
if (role === 'user' && messageIndex !== null) { if (role === 'user' && messageIndex !== null) {
contentDiv.setAttribute('data-message-index', messageIndex); contentDiv.setAttribute('data-message-index', messageIndex);
contentDiv.setAttribute('title', 'Click to edit and restart from here'); contentDiv.setAttribute('title', 'Click to edit and restart from here');
contentDiv.addEventListener('click', function() { contentDiv.addEventListener('click', function () {
if (!isGenerating) { if (!isGenerating) {
editMessage(messageIndex); editMessage(messageIndex);
} }
@ -450,7 +468,7 @@
if (role === 'assistant' && messageIndex !== null) { if (role === 'assistant' && messageIndex !== null) {
contentDiv.setAttribute('data-message-index', messageIndex); contentDiv.setAttribute('data-message-index', messageIndex);
contentDiv.setAttribute('title', 'Click to regenerate this response'); contentDiv.setAttribute('title', 'Click to regenerate this response');
contentDiv.addEventListener('click', function() { contentDiv.addEventListener('click', function () {
if (!isGenerating) { if (!isGenerating) {
regenerateMessage(messageIndex); regenerateMessage(messageIndex);
} }
@ -549,7 +567,7 @@
// Add click handler to regenerate this assistant message // Add click handler to regenerate this assistant message
assistantContent.setAttribute('data-message-index', assistantMessageIndex); assistantContent.setAttribute('data-message-index', assistantMessageIndex);
assistantContent.setAttribute('title', 'Click to regenerate this response'); assistantContent.setAttribute('title', 'Click to regenerate this response');
assistantContent.addEventListener('click', function() { assistantContent.addEventListener('click', function () {
if (!isGenerating) { if (!isGenerating) {
regenerateMessage(assistantMessageIndex); regenerateMessage(assistantMessageIndex);
} }
@ -671,4 +689,5 @@
}); });
</script> </script>
</body> </body>
</html> </html>