Filipinos
5e7664677e
Este commit introduce varias mejoras en la experiencia del usuario, incluyendo un chatbot más intuitivo y con mejor feedback visual, notificaciones para la generación de M3U y un soporte de internacionalización ampliado. Cambios principales: - Indicador de "trabajando" en el chat: Se ha añadido un indicador de "escribiendo..." que se muestra mientras se ejecutan las herramientas del chat, mejorando la percepción de que el asistente está procesando la petición. - Traducciones: Se han añadido nuevas claves de i18n para el asistente de IA y las herramientas M3U en español, inglés, francés, italiano, portugués y alemán. - Cierre del chat: Se ha corregido un error que provocaba que el chatbot se cerrara automáticamente después de ejecutar un comando. - Mensajes del chat: Se han eliminado los mensajes de "ejecutando herramienta" y "resultado de la herramienta" para una experiencia de chat más limpia. - Notificaciones M3U: Se han añadido notificaciones visuales para informar al usuario cuando se está generando un archivo M3U.
282 lines
11 KiB
JavaScript
282 lines
11 KiB
JavaScript
import { state } from './state.js';
|
|
import { showNotification, _ } from './utils.js';
|
|
import { AITools } from './ai-tools.js';
|
|
|
|
export class Chat {
|
|
constructor() {
|
|
this.dom = {
|
|
fab: document.getElementById('chat-fab'),
|
|
window: document.getElementById('chat-window'),
|
|
header: document.querySelector('.chat-header'),
|
|
closeBtn: document.getElementById('chat-close-btn'),
|
|
messagesContainer: document.getElementById('chat-messages'),
|
|
inputForm: document.getElementById('chat-input-form'),
|
|
input: document.getElementById('chat-input'),
|
|
sendBtn: document.getElementById('chat-send-btn')
|
|
};
|
|
this.isOpen = false;
|
|
this.isDragging = false;
|
|
this.offset = { x: 0, y: 0 };
|
|
this.conversationHistory = [];
|
|
this.aiTools = new AITools(this);
|
|
|
|
this.bindEvents();
|
|
}
|
|
|
|
bindEvents() {
|
|
this.dom.fab.addEventListener('click', () => this.toggle());
|
|
this.dom.closeBtn.addEventListener('click', () => this.close());
|
|
this.dom.inputForm.addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
this.sendMessage();
|
|
});
|
|
this.dom.input.addEventListener('input', this.autoResizeTextarea.bind(this));
|
|
this.dom.input.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Enter' && !e.shiftKey) {
|
|
e.preventDefault();
|
|
this.sendMessage();
|
|
}
|
|
});
|
|
this.dom.header.addEventListener('mousedown', this.startDrag.bind(this));
|
|
document.addEventListener('mousemove', this.drag.bind(this));
|
|
document.addEventListener('mouseup', this.stopDrag.bind(this));
|
|
}
|
|
|
|
toggle() {
|
|
this.isOpen ? this.close() : this.open();
|
|
}
|
|
|
|
open() {
|
|
if (this.isOpen) return;
|
|
this.isOpen = true;
|
|
|
|
this.dom.window.style.top = '';
|
|
this.dom.window.style.left = '';
|
|
this.dom.window.style.bottom = '95px';
|
|
this.dom.window.style.right = '2rem';
|
|
|
|
this.dom.window.style.display = 'flex';
|
|
gsap.fromTo(this.dom.window, { opacity: 0, scale: 0.9, y: 20 }, { opacity: 1, scale: 1, y: 0, duration: 0.3, ease: 'power3.out' });
|
|
gsap.to(this.dom.fab, { scale: 0, opacity: 0, duration: 0.2, ease: 'power2.in' });
|
|
|
|
if (this.conversationHistory.length === 0) {
|
|
const welcomeMessage = _('chatWelcome');
|
|
this.addMessage(welcomeMessage, 'assistant');
|
|
this.conversationHistory.push({ role: 'assistant', content: welcomeMessage });
|
|
}
|
|
}
|
|
|
|
close() {
|
|
if (!this.isOpen) return;
|
|
this.isOpen = false;
|
|
gsap.to(this.dom.window, { opacity: 0, scale: 0.9, y: 20, duration: 0.3, ease: 'power2.in', onComplete: () => {
|
|
this.dom.window.style.display = 'none';
|
|
}});
|
|
gsap.fromTo(this.dom.fab, { scale: 0, opacity: 0 }, { scale: 1, opacity: 1, duration: 0.3, ease: 'back.out(1.7)', delay: 0.2 });
|
|
}
|
|
|
|
async sendMessage() {
|
|
const userInput = this.dom.input.value.trim();
|
|
if (!userInput) return;
|
|
|
|
this.addMessage(userInput, 'user');
|
|
this.conversationHistory.push({ role: 'user', content: userInput });
|
|
this.dom.input.value = '';
|
|
this.autoResizeTextarea();
|
|
this.dom.sendBtn.disabled = true;
|
|
|
|
this.addTypingIndicator();
|
|
|
|
try {
|
|
const response = await this.getOpenAIResponseWithTools();
|
|
this.removeTypingIndicator();
|
|
|
|
if (response) {
|
|
this.addMessage(response, 'assistant');
|
|
this.conversationHistory.push({ role: 'assistant', content: response });
|
|
}
|
|
|
|
} catch (error) {
|
|
this.removeTypingIndicator();
|
|
this.addMessage(error.message, 'assistant', true);
|
|
} finally {
|
|
this.dom.sendBtn.disabled = false;
|
|
}
|
|
}
|
|
|
|
addMessage(text, sender, isError = false, toolName = null) {
|
|
const wrapper = document.createElement('div');
|
|
wrapper.className = `message-wrapper ${sender}-wrapper`;
|
|
|
|
const messageEl = document.createElement('div');
|
|
messageEl.classList.add('message', `${sender}-message`);
|
|
if(isError) messageEl.style.color = 'var(--danger)';
|
|
|
|
if (sender === 'assistant' || sender === 'tool-call' || sender === 'tool-result') {
|
|
const avatar = document.createElement('div');
|
|
avatar.className = 'avatar';
|
|
let icon = '';
|
|
if (sender === 'assistant') {
|
|
icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm-2.5-5h5v2h-5v-2z"/></svg>';
|
|
} else {
|
|
icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"/></svg>';
|
|
}
|
|
avatar.innerHTML = icon;
|
|
wrapper.appendChild(avatar);
|
|
}
|
|
|
|
const p = document.createElement('p');
|
|
if (sender === 'tool-call' || sender === 'tool-result') {
|
|
p.innerHTML = `<strong>${toolName}:</strong> ${text}`;
|
|
} else {
|
|
p.textContent = text;
|
|
}
|
|
messageEl.appendChild(p);
|
|
|
|
wrapper.appendChild(messageEl);
|
|
this.dom.messagesContainer.appendChild(wrapper);
|
|
this.scrollToBottom();
|
|
}
|
|
|
|
addTypingIndicator() {
|
|
const wrapper = document.createElement('div');
|
|
wrapper.id = 'typing-indicator';
|
|
wrapper.className = 'message-wrapper assistant-wrapper';
|
|
|
|
const avatar = document.createElement('div');
|
|
avatar.className = 'avatar';
|
|
avatar.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm-2.5-5h5v2h-5v-2z"/></svg>`;
|
|
wrapper.appendChild(avatar);
|
|
|
|
const indicator = document.createElement('div');
|
|
indicator.classList.add('message', 'assistant-message', 'typing-indicator-bubble');
|
|
indicator.innerHTML = '<span></span><span></span><span></span>';
|
|
|
|
wrapper.appendChild(indicator);
|
|
this.dom.messagesContainer.appendChild(wrapper);
|
|
this.scrollToBottom();
|
|
}
|
|
|
|
removeTypingIndicator() {
|
|
const indicator = document.getElementById('typing-indicator');
|
|
if (indicator) indicator.remove();
|
|
}
|
|
|
|
async getOpenAIResponseWithTools() {
|
|
const apiKey = state.settings.openaiApiKey;
|
|
if (!apiKey) {
|
|
return _('chatApiKeyMissing');
|
|
}
|
|
|
|
const systemPrompt = _('aiSystemPrompt_v2');
|
|
const messagesForApi = [
|
|
{ role: 'system', content: systemPrompt },
|
|
...this.conversationHistory
|
|
];
|
|
|
|
try {
|
|
const response = await fetch('https://api.proxyapi.ru/openai/v1/chat/completions', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Authorization': `Bearer ${apiKey}`
|
|
},
|
|
body: JSON.stringify({
|
|
model: 'gpt-4o-2024-05-13',
|
|
messages: messagesForApi,
|
|
tools: this.aiTools.toolDefinitions,
|
|
tool_choice: 'auto',
|
|
max_tokens: 400,
|
|
temperature: 0.7
|
|
})
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const errorData = await response.json().catch(() => ({}));
|
|
throw new Error(errorData?.error?.message || `Error HTTP ${response.status}`);
|
|
}
|
|
|
|
const data = await response.json();
|
|
const message = data.choices[0].message;
|
|
|
|
if (message.tool_calls) {
|
|
this.conversationHistory.push(message);
|
|
for (const toolCall of message.tool_calls) {
|
|
const toolResult = await this.aiTools.executeTool(toolCall);
|
|
this.conversationHistory.push({ role: 'tool', tool_call_id: toolCall.id, name: toolCall.function.name, content: toolResult });
|
|
}
|
|
// Now call the API again with the tool results
|
|
return await this.getOpenAIResponseWithTools();
|
|
} else if (message.content) {
|
|
return message.content;
|
|
} else {
|
|
return _('chatApiInvalidResponse');
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('OpenAI API call failed:', error);
|
|
showNotification(_('chatApiError') + `: ${error.message}`, 'error');
|
|
return _('chatApiError') + `: ${error.message}`;
|
|
}
|
|
}
|
|
|
|
autoResizeTextarea() {
|
|
this.dom.input.style.height = 'auto';
|
|
const scrollHeight = this.dom.input.scrollHeight;
|
|
if (scrollHeight > 200) {
|
|
this.dom.input.style.height = '200px';
|
|
this.dom.input.style.overflowY = 'auto';
|
|
} else {
|
|
this.dom.input.style.height = `${scrollHeight}px`;
|
|
this.dom.input.style.overflowY = 'hidden';
|
|
}
|
|
}
|
|
|
|
scrollToBottom() {
|
|
this.dom.messagesContainer.scrollTop = this.dom.messagesContainer.scrollHeight;
|
|
}
|
|
|
|
startDrag(e) {
|
|
if (e.target !== this.dom.header && e.target !== this.dom.header.querySelector('.chat-title')) return;
|
|
this.isDragging = true;
|
|
const rect = this.dom.window.getBoundingClientRect();
|
|
this.offset.x = e.clientX - rect.left;
|
|
this.offset.y = e.clientY - rect.top;
|
|
this.dom.header.style.cursor = 'grabbing';
|
|
}
|
|
|
|
drag(e) {
|
|
if (!this.isDragging) return;
|
|
e.preventDefault();
|
|
|
|
let newX = e.clientX - this.offset.x;
|
|
let newY = e.clientY - this.offset.y;
|
|
|
|
const winWidth = this.dom.window.offsetWidth;
|
|
const winHeight = this.dom.window.offsetHeight;
|
|
const docWidth = document.documentElement.clientWidth;
|
|
const docHeight = document.documentElement.clientHeight;
|
|
|
|
newX = Math.max(0, Math.min(newX, docWidth - winWidth));
|
|
newY = Math.max(0, Math.min(newY, docHeight - winHeight));
|
|
|
|
this.dom.window.style.left = `${newX}px`;
|
|
this.dom.window.style.top = `${newY}px`;
|
|
this.dom.window.style.bottom = 'auto';
|
|
this.dom.window.style.right = 'auto';
|
|
}
|
|
|
|
stopDrag() {
|
|
this.isDragging = false;
|
|
this.dom.header.style.cursor = 'move';
|
|
}
|
|
|
|
clearHistory() {
|
|
this.conversationHistory = [];
|
|
this.dom.messagesContainer.innerHTML = '';
|
|
const welcomeMessage = _('chatWelcome');
|
|
this.addMessage(welcomeMessage, 'assistant');
|
|
this.conversationHistory.push({ role: 'assistant', content: welcomeMessage });
|
|
}
|
|
}
|