opencode/picoclaw
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: corrección de saltos de línea en mensajes de usuario (frontend + backend)

Browse source
This commit is contained in:
JaviLib 2026-02-22 05:11:28 +01:00
parent 2e8d29bb96
commit b7f0a567da
2 changed files with 51 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
pkg/channels/http.go
View file

@ -282,6 +282,12 @@ func generateChatID(r *http.Request) string {
// renderMarkdown converts Markdown to HTML using goldmark
func renderMarkdown(input string) string {
// Debug: log first 100 chars of input
// logger.DebugF("http renderMarkdown input", map[string]any{"input": input[:min(100, len(input))]})
// Convert newlines to <br> before markdown processing
input = strings.ReplaceAll(input, "\n", " \n")
md := goldmark.New(
goldmark.WithExtensions(
extension.GFM,
@ -292,7 +298,15 @@ func renderMarkdown(input string) string {
var buf strings.Builder
if err := md.Convert([]byte(input), &buf); err != nil {
logger.ErrorCF("http", "renderMarkdown error", map[string]any{"error": err.Error()})
return input // fallback to plain text on error
}
return buf.String()
}
func min(a, b int) int {
if a < b {
return a
}
return b
}

46
pkg/channels/http_templates/index.html
View file

@ -116,7 +116,7 @@
display: flex;
gap: 12px;
}
.input-wrapper input {
.input-wrapper textarea {
flex: 1;
padding: 14px 20px;
border: 2px solid #2d2d44;
@ -125,12 +125,18 @@
color: white;
font-size: 1rem;
outline: none;
transition: border-color 0.2s;
resize: none;
min-height: 56px;
max-height: 200px;
line-height: 1.5;
box-sizing: border-box;
font-family: inherit;
overflow-y: auto;
}
.input-wrapper input:focus {
.input-wrapper textarea:focus {
border-color: #ff6b35;
}
.input-wrapper input::placeholder {
.input-wrapper textarea::placeholder {
color: #64748b;
}
.input-wrapper button {
@ -196,7 +202,7 @@
</div>
<div class="input-container">
<div class="input-wrapper">
<input type="text" id="messageInput" placeholder="Escribe tu mensaje..." autocomplete="off">
<textarea id="messageInput" placeholder="Escribe tu mensaje..." autocomplete="off" rows="1"></textarea>
<button id="sendButton">Enviar</button>
</div>
</div>
@ -247,7 +253,12 @@
function addMessage(content, type) {
const div = document.createElement('div');
div.className = `message ${type}`;
div.innerHTML = content;
// Convert newlines to <br> for proper rendering in HTML
// For user messages, we need to preserve line breaks from textarea
let processedContent = content.replace(/\n/g, '<br>');
// Also handle double newlines as paragraphs (optional, for better readability)
processedContent = processedContent.replace(/\n\n/g, '<br><br>');
div.innerHTML = processedContent;
chatContainer.appendChild(div);
chatContainer.scrollTop = chatContainer.scrollHeight;
}
@ -267,7 +278,7 @@
}
function sendMessage() {
const content = messageInput.value.trim();
const content = messageInput.value;
if (!content || !connected) return;
addMessage(content, 'user');
@ -287,10 +298,27 @@
}
sendButton.addEventListener('click', sendMessage);
messageInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') sendMessage();
messageInput.addEventListener('keydown', (e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
sendMessage();
}
});
// Auto-resize textarea
function autoResizeTextarea() {
const textarea = document.getElementById('messageInput');
textarea.style.height = 'auto';
textarea.style.height = textarea.scrollHeight + 'px';
}
messageInput.addEventListener('input', autoResizeTextarea);
messageInput.addEventListener('keyup', autoResizeTextarea);
messageInput.addEventListener('click', autoResizeTextarea);
// Initialize height
setTimeout(autoResizeTextarea, 100);
// Heartbeat to keep connection alive
setInterval(() => {
if (ws && ws.readyState === WebSocket.OPEN) {