tacit/nanochat
1
0
Fork 0
mirror of https://github.com/karpathy/nanochat.git synced 2025-12-16 01:02:18 +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

73
nanochat/ui.html
View File

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