Unique persistent chat IDs and support for chat history navigation
- Chat identifiers are now unique and no longer tied to the user session. - Users can navigate between previous chats from the sidebar. - New chats can be created via a dedicated "New Chat" button. - The most recently started chat is automatically selected on load.
This commit is contained in:
parent
73f3ade0f0
commit
4a5a8858ab
@ -1,10 +1,5 @@
|
||||
package com.pablotj.ia.chat.boot.adapter.controller;
|
||||
|
||||
import com.pablotj.ia.chat.boot.application.session.ChatSessionManager;
|
||||
import com.pablotj.ia.chat.boot.application.usecase.ChatUseCase;
|
||||
import com.pablotj.ia.chat.boot.domain.model.ChatMessage;
|
||||
import jakarta.servlet.http.HttpSession;
|
||||
import java.util.List;
|
||||
import org.apache.logging.log4j.LogManager;
|
||||
import org.apache.logging.log4j.Logger;
|
||||
import org.springframework.stereotype.Controller;
|
||||
@ -17,26 +12,10 @@ import org.springframework.web.bind.annotation.RequestMapping;
|
||||
public class ChatPageController {
|
||||
|
||||
private static final Logger LOGGER = LogManager.getLogger(ChatPageController.class);
|
||||
private final ChatSessionManager chatSessionManager;
|
||||
private final ChatUseCase chatUseCase;
|
||||
|
||||
public ChatPageController(ChatSessionManager chatSessionManager, ChatUseCase chatUseCase) {
|
||||
this.chatSessionManager = chatSessionManager;
|
||||
this.chatUseCase = chatUseCase;
|
||||
}
|
||||
|
||||
@GetMapping
|
||||
public String showChat(Model model, HttpSession session) {
|
||||
public String showChat(Model model) {
|
||||
LOGGER.debug("Accessing to chat");
|
||||
List<ChatMessage> messages = chatSessionManager.getMessages(session);
|
||||
if (messages != null && messages.isEmpty()) {
|
||||
try {
|
||||
messages.add(chatUseCase.processUserPrompt("", session));
|
||||
} catch (Exception e) {
|
||||
LOGGER.error(e.getMessage(), e);
|
||||
}
|
||||
}
|
||||
model.addAttribute("messages", messages);
|
||||
return "chat";
|
||||
}
|
||||
}
|
@ -1,37 +1,66 @@
|
||||
package com.pablotj.ia.chat.boot.adapter.controller;
|
||||
|
||||
import com.pablotj.ia.chat.boot.application.usecase.ChatHistoryUseCase;
|
||||
import com.pablotj.ia.chat.boot.application.usecase.ChatUseCase;
|
||||
import com.pablotj.ia.chat.boot.domain.model.ChatIdentity;
|
||||
import com.pablotj.ia.chat.boot.domain.model.ChatMessage;
|
||||
import jakarta.servlet.http.HttpSession;
|
||||
import java.util.Date;
|
||||
import java.util.List;
|
||||
import java.util.UUID;
|
||||
import org.apache.logging.log4j.LogManager;
|
||||
import org.apache.logging.log4j.Logger;
|
||||
import org.springframework.http.ResponseEntity;
|
||||
import org.springframework.util.ObjectUtils;
|
||||
import org.springframework.web.bind.annotation.GetMapping;
|
||||
import org.springframework.web.bind.annotation.PathVariable;
|
||||
import org.springframework.web.bind.annotation.PostMapping;
|
||||
import org.springframework.web.bind.annotation.PutMapping;
|
||||
import org.springframework.web.bind.annotation.RequestMapping;
|
||||
import org.springframework.web.bind.annotation.RequestParam;
|
||||
import org.springframework.web.bind.annotation.RestController;
|
||||
|
||||
@RestController
|
||||
@RequestMapping("/chat")
|
||||
@RequestMapping("/api/v1/chats")
|
||||
public class ChatRestController {
|
||||
|
||||
private static final Logger LOGGER = LogManager.getLogger(ChatRestController.class);
|
||||
|
||||
private final ChatUseCase chatUseCase;
|
||||
private final ChatHistoryUseCase chatHistoryUseCase;
|
||||
|
||||
public ChatRestController(ChatUseCase chatUseCase) {
|
||||
public ChatRestController(ChatUseCase chatUseCase, ChatHistoryUseCase chatHistoryUseCase) {
|
||||
this.chatUseCase = chatUseCase;
|
||||
this.chatHistoryUseCase = chatHistoryUseCase;
|
||||
}
|
||||
|
||||
@PostMapping(consumes = "application/x-www-form-urlencoded", produces = "application/json")
|
||||
public ResponseEntity<ChatMessage> handleChat(@RequestParam("prompt") String prompt, HttpSession session) {
|
||||
@GetMapping
|
||||
public ResponseEntity<List<ChatIdentity>> getChatHistory() {
|
||||
LOGGER.debug("Accessing to chat");
|
||||
return ResponseEntity.ok(chatHistoryUseCase.chats());
|
||||
}
|
||||
|
||||
@GetMapping("{chatId}")
|
||||
public ResponseEntity<List<ChatMessage>> getChatMessages(@PathVariable("chatId") String chatId) {
|
||||
LOGGER.debug("Accessing to chat messages");
|
||||
return ResponseEntity.ok(chatUseCase.getMessages(chatId));
|
||||
}
|
||||
|
||||
@PostMapping(produces = "application/json")
|
||||
public ResponseEntity<String> newChat() {
|
||||
return ResponseEntity.ok(UUID.randomUUID().toString());
|
||||
}
|
||||
|
||||
@PutMapping(value = "{chatId}", consumes = "application/x-www-form-urlencoded", produces = "application/json")
|
||||
public ResponseEntity<ChatMessage> handleChat(@PathVariable("chatId") String chatId, @RequestParam("prompt") String prompt) {
|
||||
if (ObjectUtils.isEmpty(chatId)) {
|
||||
throw new IllegalArgumentException("Chat id cannot be empty");
|
||||
}
|
||||
ChatMessage reply;
|
||||
try {
|
||||
reply = chatUseCase.processUserPrompt(prompt, session);
|
||||
reply = chatUseCase.processUserPrompt(prompt, chatId);
|
||||
} catch (Exception e) {
|
||||
LOGGER.error(e.getMessage(), e);
|
||||
reply = new ChatMessage("bot", e.getMessage(), new Date());
|
||||
reply = new ChatMessage(chatId, "bot", e.getMessage(), new Date());
|
||||
}
|
||||
return ResponseEntity.ok(reply);
|
||||
}
|
||||
|
@ -2,13 +2,11 @@ package com.pablotj.ia.chat.boot.application.session;
|
||||
|
||||
import com.pablotj.ia.chat.boot.domain.model.ChatMessage;
|
||||
import com.pablotj.ia.chat.boot.domain.port.ChatMessageStore;
|
||||
import jakarta.servlet.http.HttpSession;
|
||||
import java.util.ArrayList;
|
||||
import java.util.List;
|
||||
import org.springframework.stereotype.Component;
|
||||
import org.springframework.util.ObjectUtils;
|
||||
|
||||
import java.util.List;
|
||||
|
||||
@Component
|
||||
public class ChatSessionManager {
|
||||
|
||||
@ -18,9 +16,8 @@ public class ChatSessionManager {
|
||||
this.chatMessageStore = chatMessageStore;
|
||||
}
|
||||
|
||||
public List<ChatMessage> getMessages(HttpSession session) {
|
||||
String sessionId = session.getId();
|
||||
List<ChatMessage> messages = chatMessageStore.getMessages(sessionId);
|
||||
public List<ChatMessage> getMessages(String chatId) {
|
||||
List<ChatMessage> messages = chatMessageStore.getMessages(chatId);
|
||||
List<ChatMessage> filteredMessages = new ArrayList<>(messages);
|
||||
|
||||
if (ObjectUtils.isEmpty(filteredMessages)) {
|
||||
@ -31,8 +28,8 @@ public class ChatSessionManager {
|
||||
return filteredMessages;
|
||||
}
|
||||
|
||||
public void setMessages(HttpSession session, List<ChatMessage> messages) {
|
||||
public void setMessages(String chatId, List<ChatMessage> messages) {
|
||||
messages.removeIf(m -> ObjectUtils.isEmpty(m.text()));
|
||||
chatMessageStore.saveMessages(session.getId(), messages);
|
||||
chatMessageStore.saveMessages(chatId, messages);
|
||||
}
|
||||
}
|
@ -0,0 +1,20 @@
|
||||
package com.pablotj.ia.chat.boot.application.usecase;
|
||||
|
||||
import com.pablotj.ia.chat.boot.domain.model.ChatIdentity;
|
||||
import com.pablotj.ia.chat.boot.domain.port.ChatMessageStore;
|
||||
import java.util.List;
|
||||
import org.springframework.stereotype.Component;
|
||||
|
||||
@Component
|
||||
public class ChatHistoryUseCase {
|
||||
|
||||
private final ChatMessageStore chatMessageStore;
|
||||
|
||||
public ChatHistoryUseCase(ChatMessageStore chatMessageStore) {
|
||||
this.chatMessageStore = chatMessageStore;
|
||||
}
|
||||
|
||||
public List<ChatIdentity> chats() {
|
||||
return chatMessageStore.getChats();
|
||||
}
|
||||
}
|
@ -5,7 +5,6 @@ import com.pablotj.ia.chat.boot.application.prompt.PromptTemplates;
|
||||
import com.pablotj.ia.chat.boot.application.session.ChatSessionManager;
|
||||
import com.pablotj.ia.chat.boot.domain.model.ChatMessage;
|
||||
import com.pablotj.ia.chat.boot.infraestructure.llm.LlmModelClient;
|
||||
import jakarta.servlet.http.HttpSession;
|
||||
import java.util.Date;
|
||||
import java.util.List;
|
||||
import org.springframework.stereotype.Component;
|
||||
@ -25,9 +24,13 @@ public class ChatUseCase {
|
||||
this.sessionManager = sessionManager;
|
||||
}
|
||||
|
||||
public ChatMessage processUserPrompt(String prompt, HttpSession session) {
|
||||
List<ChatMessage> messages = sessionManager.getMessages(session);
|
||||
messages.add(new ChatMessage(ATTR_ROLE_USER, prompt, new Date()));
|
||||
public List<ChatMessage> getMessages(String chatId) {
|
||||
return sessionManager.getMessages(chatId);
|
||||
}
|
||||
|
||||
public ChatMessage processUserPrompt(String prompt, String chatId) {
|
||||
List<ChatMessage> messages = sessionManager.getMessages(chatId);
|
||||
messages.add(new ChatMessage(chatId, ATTR_ROLE_USER, prompt, new Date()));
|
||||
|
||||
PromptBuilder builder = new PromptBuilder(PromptTemplates.getDefault());
|
||||
|
||||
@ -40,9 +43,9 @@ public class ChatUseCase {
|
||||
}
|
||||
|
||||
String result = llmModelClient.generate(builder.build());
|
||||
ChatMessage reply = new ChatMessage(ATTR_ROLE_BOT, result, new Date());
|
||||
ChatMessage reply = new ChatMessage(chatId, ATTR_ROLE_BOT, result, new Date());
|
||||
messages.add(reply);
|
||||
sessionManager.setMessages(session, messages);
|
||||
sessionManager.setMessages(chatId, messages);
|
||||
return reply;
|
||||
}
|
||||
}
|
||||
|
@ -0,0 +1,6 @@
|
||||
package com.pablotj.ia.chat.boot.domain.model;
|
||||
|
||||
import java.io.Serializable;
|
||||
|
||||
public record ChatIdentity(String id, String name) implements Serializable {
|
||||
}
|
@ -4,7 +4,7 @@ import com.fasterxml.jackson.annotation.JsonFormat;
|
||||
import java.io.Serializable;
|
||||
import java.util.Date;
|
||||
|
||||
public record ChatMessage(String role, String text, Date date) implements Serializable {
|
||||
public record ChatMessage(String chatId, String role, String text, Date date) implements Serializable {
|
||||
|
||||
@Override
|
||||
@JsonFormat(pattern = "dd/MM/yyyy HH:mm", timezone = "Europe/Madrid")
|
||||
|
@ -1,9 +1,12 @@
|
||||
package com.pablotj.ia.chat.boot.domain.port;
|
||||
|
||||
import com.pablotj.ia.chat.boot.domain.model.ChatIdentity;
|
||||
import com.pablotj.ia.chat.boot.domain.model.ChatMessage;
|
||||
import java.util.List;
|
||||
|
||||
public interface ChatMessageStore {
|
||||
List<ChatMessage> getMessages(String sessionId);
|
||||
List<ChatIdentity> getChats();
|
||||
|
||||
List<ChatMessage> getMessages(String chatId);
|
||||
void saveMessages(String sessionId, List<ChatMessage> messages);
|
||||
}
|
||||
|
@ -1,10 +1,24 @@
|
||||
package com.pablotj.ia.chat.boot.persistence;
|
||||
|
||||
import org.springframework.data.jpa.repository.JpaRepository;
|
||||
import java.util.List;
|
||||
import org.springframework.data.jpa.repository.JpaRepository;
|
||||
import org.springframework.data.jpa.repository.Query;
|
||||
|
||||
|
||||
public interface ChatMessageJpaRepository extends JpaRepository<ChatMessageEntity, Long> {
|
||||
List<ChatMessageEntity> findBySessionIdOrderByIdAsc(String sessionId);
|
||||
void deleteBySessionId(String sessionId);
|
||||
|
||||
@Query(value = """
|
||||
SELECT *
|
||||
FROM (
|
||||
SELECT *, ROW_NUMBER() OVER (PARTITION BY session_id ORDER BY id ASC) AS rn
|
||||
FROM chat_messages
|
||||
) sub
|
||||
WHERE rn = 1
|
||||
ORDER BY id desc
|
||||
""", nativeQuery = true)
|
||||
List<ChatMessageEntity> findFirstMessagePerSession();
|
||||
|
||||
List<ChatMessageEntity> findBySessionIdOrderByIdAsc(String chatId);
|
||||
|
||||
void deleteBySessionId(String chatId);
|
||||
}
|
@ -1,12 +1,17 @@
|
||||
package com.pablotj.ia.chat.boot.persistence;
|
||||
|
||||
import com.pablotj.ia.chat.boot.domain.model.ChatIdentity;
|
||||
import com.pablotj.ia.chat.boot.domain.model.ChatMessage;
|
||||
|
||||
public class ChatMessageMapper {
|
||||
|
||||
public static ChatMessageEntity toEntity(String sessionId, ChatMessage message) {
|
||||
private ChatMessageMapper() throws IllegalAccessException {
|
||||
throw new IllegalAccessException("Private access to ChatMessageMapper");
|
||||
}
|
||||
|
||||
public static ChatMessageEntity toEntity(String chatId, ChatMessage message) {
|
||||
ChatMessageEntity entity = new ChatMessageEntity();
|
||||
entity.setSessionId(sessionId);
|
||||
entity.setSessionId(chatId);
|
||||
entity.setRole(message.role());
|
||||
entity.setText(message.text());
|
||||
entity.setDate(message.date());
|
||||
@ -14,6 +19,10 @@ public class ChatMessageMapper {
|
||||
}
|
||||
|
||||
public static ChatMessage toDomain(ChatMessageEntity entity) {
|
||||
return new ChatMessage(entity.getRole(), entity.getText(), entity.getDate());
|
||||
return new ChatMessage(entity.getSessionId(), entity.getRole(), entity.getText(), entity.getDate());
|
||||
}
|
||||
|
||||
public static ChatIdentity toEntityId(ChatMessageEntity m) {
|
||||
return new ChatIdentity(m.getSessionId(), m.getText().length() > 35 ? m.getText().substring(0, 35).concat("...") : m.getText());
|
||||
}
|
||||
}
|
@ -1,9 +1,10 @@
|
||||
package com.pablotj.ia.chat.boot.persistence;
|
||||
|
||||
import com.pablotj.ia.chat.boot.domain.model.ChatIdentity;
|
||||
import com.pablotj.ia.chat.boot.domain.model.ChatMessage;
|
||||
import com.pablotj.ia.chat.boot.domain.port.ChatMessageStore;
|
||||
import org.springframework.stereotype.Repository;
|
||||
import java.util.List;
|
||||
import org.springframework.stereotype.Repository;
|
||||
import org.springframework.transaction.annotation.Transactional;
|
||||
|
||||
@Repository
|
||||
@ -16,8 +17,15 @@ public class SqliteChatMessageStore implements ChatMessageStore {
|
||||
}
|
||||
|
||||
@Override
|
||||
public List<ChatMessage> getMessages(String sessionId) {
|
||||
return repository.findBySessionIdOrderByIdAsc(sessionId)
|
||||
public List<ChatIdentity> getChats() {
|
||||
return repository.findFirstMessagePerSession().stream()
|
||||
.map(ChatMessageMapper::toEntityId)
|
||||
.toList();
|
||||
}
|
||||
|
||||
@Override
|
||||
public List<ChatMessage> getMessages(String chatId) {
|
||||
return repository.findBySessionIdOrderByIdAsc(chatId)
|
||||
.stream()
|
||||
.map(ChatMessageMapper::toDomain)
|
||||
.toList();
|
||||
@ -25,10 +33,10 @@ public class SqliteChatMessageStore implements ChatMessageStore {
|
||||
|
||||
@Override
|
||||
@Transactional
|
||||
public void saveMessages(String sessionId, List<ChatMessage> messages) {
|
||||
repository.deleteBySessionId(sessionId);
|
||||
public void saveMessages(String chatId, List<ChatMessage> messages) {
|
||||
repository.deleteBySessionId(chatId);
|
||||
List<ChatMessageEntity> entities = messages.stream()
|
||||
.map(m -> ChatMessageMapper.toEntity(sessionId, m))
|
||||
.map(m -> ChatMessageMapper.toEntity(chatId, m))
|
||||
.toList();
|
||||
repository.saveAll(entities);
|
||||
}
|
||||
|
@ -11,14 +11,74 @@ html, body {
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100vh;
|
||||
background-color: #121217;
|
||||
}
|
||||
|
||||
/* Layout general */
|
||||
.layout-container {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Menú lateral izquierdo */
|
||||
#sidebar {
|
||||
width: 25%;
|
||||
min-width: 200px;
|
||||
background-color: #1b1d23;
|
||||
color: #ffffff;
|
||||
padding: 1.5rem 1rem;
|
||||
box-sizing: border-box;
|
||||
border-right: 1px solid #2c2e34;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
height: 100vh;
|
||||
padding: 2rem 1.25rem 1rem;
|
||||
}
|
||||
|
||||
#sidebar h2 {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #5a90ff;
|
||||
}
|
||||
|
||||
#chat-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow-y: auto;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#chat-list li {
|
||||
padding: 0.5rem 0.75rem;
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
transition: background-color 0.2s ease;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
#chat-list li:hover {
|
||||
background-color: #2c2f3a;
|
||||
}
|
||||
|
||||
#chat-list li.active {
|
||||
background-color: #3451d1;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Área principal del chat */
|
||||
#main-content {
|
||||
width: 75%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 2rem 1.25rem 1rem;
|
||||
background-color: #121217;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Título */
|
||||
@ -50,6 +110,7 @@ h1 {
|
||||
#chat-log::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
#chat-log::-webkit-scrollbar-thumb {
|
||||
background-color: #5a90ff55;
|
||||
border-radius: 3px;
|
||||
@ -70,7 +131,6 @@ h1 {
|
||||
animation: slideFadeIn 0.3s forwards;
|
||||
}
|
||||
|
||||
/* Animación de entrada */
|
||||
@keyframes slideFadeIn {
|
||||
to {
|
||||
opacity: 1;
|
||||
@ -138,7 +198,7 @@ textarea:focus {
|
||||
}
|
||||
|
||||
/* Botón */
|
||||
button {
|
||||
button#send-btn {
|
||||
background-color: #5a90ff;
|
||||
border: none;
|
||||
border-radius: 14px;
|
||||
@ -151,16 +211,16 @@ button {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
button:hover:not(:disabled) {
|
||||
button#send-btn:hover:not(:disabled) {
|
||||
background-color: #4076e0;
|
||||
}
|
||||
|
||||
button:active:not(:disabled) {
|
||||
button#send-btn:active:not(:disabled) {
|
||||
transform: translateY(1px);
|
||||
background-color: #305dc0;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
button#send-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
background-color: #3a4a6a;
|
||||
@ -205,30 +265,33 @@ button:disabled {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#new-chat-btn {
|
||||
margin-bottom: 10px;
|
||||
padding: 8px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
background-color: #f0f0f0;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#new-chat-btn:hover {
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 480px) {
|
||||
body {
|
||||
max-width: 100%;
|
||||
padding: 1.5rem 1rem 1rem;
|
||||
@media (max-width: 768px) {
|
||||
.layout-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#chat-log {
|
||||
padding: 1rem 1.25rem;
|
||||
border-radius: 12px;
|
||||
#sidebar {
|
||||
width: 100%;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid #2c2e34;
|
||||
}
|
||||
|
||||
form {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 3.5rem;
|
||||
font-size: 0.95rem;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0 1.25rem;
|
||||
font-size: 0.95rem;
|
||||
#main-content {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
@ -1,4 +1,8 @@
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
let chatId = '';
|
||||
|
||||
document.addEventListener("DOMContentLoaded", async () => {
|
||||
const newChatBtn = document.getElementById("new-chat-btn");
|
||||
const chatList = document.getElementById("chat-list");
|
||||
const form = document.getElementById('chat-form');
|
||||
const promptInput = document.getElementById('prompt');
|
||||
const chatLog = document.getElementById('chat-log');
|
||||
@ -6,21 +10,116 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
const spinner = document.getElementById('spinner');
|
||||
const thinkingText = document.getElementById('thinking-text');
|
||||
|
||||
await loadHistory();
|
||||
|
||||
async function loadHistory() {
|
||||
try {
|
||||
const response = await fetch("/api/v1/chats", { method: "GET" });
|
||||
const data = await response.json();
|
||||
|
||||
chatList.innerHTML = "";
|
||||
|
||||
data.forEach(chat => {
|
||||
const li = document.createElement("li");
|
||||
li.textContent = chat.name;
|
||||
li.setAttribute("data-chat-id", chat.id);
|
||||
if (chat.id === chatId) {
|
||||
li.classList.add("active");
|
||||
}
|
||||
|
||||
li.addEventListener("click", async () => {
|
||||
const selectedId = chat.id;
|
||||
if (selectedId !== chatId) {
|
||||
chatId = selectedId;
|
||||
highlightActiveChat(li);
|
||||
await loadMessages(chatId);
|
||||
}
|
||||
});
|
||||
|
||||
chatList.appendChild(li);
|
||||
});
|
||||
|
||||
// Autoabrir primer chat si no hay chatId activo
|
||||
if (!chatId && data.length > 0) {
|
||||
chatId = data[0].id;
|
||||
const firstLi = chatList.querySelector('li');
|
||||
if (firstLi) {
|
||||
firstLi.classList.add("active");
|
||||
await loadMessages(chatId);
|
||||
}
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error("Error cargando historial:", error);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadMessages(chatId) {
|
||||
try {
|
||||
const response = await fetch(`/api/v1/chats/${chatId}`);
|
||||
const messages = await response.json();
|
||||
|
||||
chatLog.innerHTML = "";
|
||||
|
||||
messages.forEach(msg => {
|
||||
appendMessage(msg.role, msg.text, msg.date);
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
appendMessage("bot", "❌ Error cargando mensajes del chat.");
|
||||
console.error("Error al cargar mensajes:", error);
|
||||
}
|
||||
}
|
||||
|
||||
function highlightActiveChat(selectedLi) {
|
||||
const lis = chatList.querySelectorAll("li");
|
||||
lis.forEach(li => li.classList.remove("active"));
|
||||
selectedLi.classList.add("active");
|
||||
}
|
||||
|
||||
function appendMessage(role, text, date) {
|
||||
const bubble = document.createElement('div');
|
||||
bubble.className = `bubble ${role}`;
|
||||
bubble.textContent = text;
|
||||
chatLog.appendChild(bubble);
|
||||
|
||||
const timestamp = document.createElement('em');
|
||||
timestamp.className = 'timestamp';
|
||||
timestamp.textContent = date;
|
||||
bubble.appendChild(timestamp);
|
||||
|
||||
chatLog.scrollTop = chatLog.scrollHeight;
|
||||
}
|
||||
|
||||
async function createNewChat() {
|
||||
try {
|
||||
const response = await fetch("/api/v1/chats", {
|
||||
method: "POST"
|
||||
});
|
||||
chatId = await response.text();
|
||||
|
||||
await loadHistory();
|
||||
await loadMessages(chatId);
|
||||
|
||||
const li = chatList.querySelector(`li[data-chat-id="${chatId}"]`);
|
||||
if (li) highlightActiveChat(li);
|
||||
|
||||
} catch (error) {
|
||||
console.error("Error al crear nuevo chat:", error);
|
||||
appendMessage("bot", "❌ Error creando nuevo chat.");
|
||||
}
|
||||
}
|
||||
newChatBtn.addEventListener("click", async () => {
|
||||
await createNewChat()
|
||||
});
|
||||
|
||||
form.addEventListener('submit', async function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
if (chatId === undefined || chatId === null || chatId === '') {
|
||||
await createNewChat();
|
||||
}
|
||||
|
||||
const prompt = promptInput.value.trim();
|
||||
if (!prompt) return;
|
||||
|
||||
@ -31,8 +130,8 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
thinkingText.style.display = 'block';
|
||||
|
||||
try {
|
||||
const response = await fetch("/chat", {
|
||||
method: "POST",
|
||||
const response = await fetch(`/api/v1/chats/${chatId}`, {
|
||||
method: "PUT",
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded'
|
||||
},
|
||||
@ -40,7 +139,12 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
chatId = data.chatId;
|
||||
|
||||
appendMessage("bot", data.text, data.date);
|
||||
|
||||
await loadHistory();
|
||||
|
||||
} catch (error) {
|
||||
appendMessage("bot", "❌ Error procesando la respuesta.");
|
||||
console.error(error);
|
||||
@ -53,7 +157,7 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
|
||||
function formatDate(date) {
|
||||
const day = date.getDate().toString().padStart(2, '0');
|
||||
const month = (date.getMonth() + 1).toString().padStart(2, '0'); // Enero = 0
|
||||
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
||||
const year = date.getFullYear();
|
||||
const hours = date.getHours().toString().padStart(2, '0');
|
||||
const minutes = date.getMinutes().toString().padStart(2, '0');
|
||||
|
@ -6,23 +6,43 @@
|
||||
<link rel="stylesheet" th:href="@{/css/styles.css}" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>🤖 Chat IA Offline</h1>
|
||||
<div class="layout-container">
|
||||
|
||||
<!-- Menú lateral izquierdo -->
|
||||
<aside id="sidebar">
|
||||
<h2>🗂️ Chats</h2>
|
||||
<button id="new-chat-btn">➕ Nuevo chat</button>
|
||||
<ul id="chat-list">
|
||||
<li th:each="chat : ${chats}"
|
||||
th:text="${chat.name}"
|
||||
th:attr="data-chat-id=${chat.id}"
|
||||
th:data-chat-id="${chat.id}">
|
||||
</li>
|
||||
</ul>
|
||||
</aside>
|
||||
|
||||
<!-- Área principal del chat -->
|
||||
<main id="main-content">
|
||||
<h1>🤖 Chat IA Offline</h1>
|
||||
|
||||
<div id="chat-log">
|
||||
<div th:each="msg : ${messages}"
|
||||
th:if="${msg.text != ''}"
|
||||
th:class="'bubble ' + ${msg.role}">
|
||||
<span th:text="${msg.text}"></span>
|
||||
<em class="timestamp" th:text="${#dates.format(msg.date, 'dd/MM/yyyy HH:mm')}"></em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="spinner"></div>
|
||||
<div id="thinking-text">Pensando...</div>
|
||||
|
||||
<form id="chat-form">
|
||||
<textarea aria-label="Pregunta del usuario" id="prompt" name="prompt" placeholder="Escribe tu mensaje..." autocomplete="off" required></textarea>
|
||||
<button id="send-btn" type="submit">Enviar</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
<div id="chat-log">
|
||||
<div th:each="msg : ${messages}"
|
||||
th:if="${msg.text != ''}"
|
||||
th:class="'bubble ' + ${msg.role}">
|
||||
<span th:text="${msg.text}"></span>
|
||||
<em class="timestamp" th:text="${#dates.format(msg.date, 'dd/MM/yyyy HH:mm')}"></em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="spinner"></div>
|
||||
<div id="thinking-text">Pensando...</div>
|
||||
|
||||
<form id="chat-form">
|
||||
<textarea aria-label="Pregunta del usuario" id="prompt" name="prompt" placeholder="Escribe tu mensaje..." autocomplete="off" required></textarea>
|
||||
<button id="send-btn" type="submit">Enviar</button>
|
||||
</form>
|
||||
|
||||
<script th:src="@{/js/main.js}"></script>
|
||||
</body>
|
||||
|
Loading…
x
Reference in New Issue
Block a user