improve logic

README.md

@@ -9,6 +9,10 @@ More things whit openai
 
 # Release Notes
 
+### 1.0.5-1.0.6
+
+improve logic for send to many chats, add more styles
+
 ### 1.0.2-1.0.4
 
 cleanup

css/body.css

@@ -6,3 +6,16 @@ body {
 	background-color: var(--vscode-editor-background);
 }
 
+/* Улучшения для скроллбара */
+body::-webkit-scrollbar {
+	width: 6px;
+}
+
+body::-webkit-scrollbar-thumb {
+	background: var(--vscode-button-background);
+	border-radius: 4px;
+}
+
+body::-webkit-scrollbar-thumb:hover {
+	background: var(--vscode-button-hoverBackground);
+}

css/conversation.css

@@ -27,30 +27,12 @@
 	margin: 5px;
 	border-radius: 8px;
 	/* color: #333; */
-	max-width: 90%;
+	max-width: 90%!important;
 	box-sizing: border-box;
 	word-wrap: break-word; /* Переносит длинные слова на новую строку */
 	overflow-wrap: break-word; /* Дополнительное свойство для обеспечения переноса */
 }
 
-/* Стили для сообщений, отправленных пользователем */
-.userMargin {
-	margin-left: auto;
-	background-color: var(--vscode-dropdown-background);
-	color: var(--vscode-button-foreground);
-	border-right: 2px solid var(--vscode-focusBorder); /* Добавление обводки справа */
-	/* Светло-зеленый цвет фона, типичный для сообщений пользователя */
-}
-
-/* Стили для сообщений, полученных от других */
-.nonuserMargin {
-	margin-right: auto;
-	background-color: var(--vscode-dropdown-background);
-	color: var(--vscode-button-foreground);
-	border-left: 2px solid var(--vscode-focusBorder); /* Добавление обводки справа */
-	/* Светлый цвет фона для входящих сообщений */
-}
-
 .conversationTextareaToSendInput {
 	font-family: inherit;
 	font-size: var(--vscode-editor-font-size);

css/conversationsList.css

@@ -1,36 +1,49 @@
-
-.conversationsListContainer{
+.conversationsListContainer {
 	margin-top: 10px;
 }
 
 .openConversationButton {
-    display: block; /* Устанавливаем блочный тип элемента */
-    padding: 10px; /* Подберите подходящий отступ */
-    margin-bottom: 10px; /* Добавляем отступ между кнопками */
-    width: 100%;
-    background-color: var(--vscode-dropdown-background); /* Цвет фона кнопки */
-    color: var(--vscode-button-foreground); /* Цвет текста кнопки */
-    border: none; /* Убираем границу кнопки */
-    border-radius: 5px; /* Задаем скругление углов */
-    cursor: pointer; /* Указатель при наведении */
-	--border-intensity: 0; /* Интенсивность подсветки границы */
-    --border-color: rgba(255, 255, 255, var(--border-intensity)); /* Цвет границы */
+	display: block;
+	padding: 10px;
+	margin-bottom: 10px;
+	width: 100%;
+	background-color: var(--vscode-dropdown-background);
+	transition: background-color 0.2s;
+	color: var(--vscode-button-foreground);
+	border: none;
+	border-radius: 5px;
+	cursor: pointer;
+	box-shadow: 0 0 0 0 none;
+	transition: background-color 0.4s, box-shadow 0.4s, padding 0.2s, height 0.4s, max-height 0.4s;
 }
 
 .openConversationButton:hover {
-    background-color: var(--vscode-button-hoverBackground);
-	/* border-color: var(--border-color); */
+	background-color: var(--vscode-button-hoverBackground);
+	box-shadow: 0 0 2em 0.2em var(--vscode-button-hoverBackground);
+	padding: 15px;
+	max-height: 20vh;
+}
+
+.openConversationButton:hover .openConversationButtonTopText,
+.openConversationButton:hover .openConversationButtonBottomText {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 4;
+    overflow: hidden;
+    white-space: normal;
+    text-overflow: ellipsis;
 }
 
-.openConversationButton .openConversationButtonTopText, .openConversationButton .openConversationButtonBottomText {
-    display: block; 
-    white-space: nowrap; /* Позволяем перенос строк */
-    overflow: hidden; /* Отменяем обрезание текста */
-    text-overflow: ellipsis; /* Убираем эффект многоточия для каждой строки */
-	text-align: left; /* Выравнивание текста по левому краю */
+.openConversationButton .openConversationButtonTopText,
+.openConversationButton .openConversationButtonBottomText {
+	display: block;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	text-align: left;
 }
 
 .openConversationButton .openConversationButtonBottomText {
-    font-size: var(--vscode-editor-font-size, 14px) - 2px; /* Меньший размер шрифта для второй строки */
-	color: var(--vscode-textPreformat-foreground); /* Цвет текста кнопки */
+	font-size: var(--vscode-editor-font-size, 14px) - 2px;
+	color: var(--vscode-textPreformat-foreground);
 }

css/margins.css

@@ -0,0 +1,15 @@
+/* Стили для сообщений, отправленных пользователем */
+.userMargin {
+	margin-left: auto!important;
+	background-color: var(--vscode-dropdown-background);
+	color: var(--vscode-button-foreground);
+	border-right: 2px solid var(--vscode-focusBorder)!important;
+}
+
+/* Стили для сообщений, полученных от других */
+.nonuserMargin {
+	margin-right: auto!important;
+	background-color: var(--vscode-dropdown-background);
+	color: var(--vscode-button-foreground);
+	border-left: 2px solid var(--vscode-focusBorder)!important;
+}

html/index.html

@@ -29,6 +29,7 @@
 
 	<link rel="stylesheet" href="../css/header.css">
 	<link rel="stylesheet" href="../css/spacer.css">
+	<link rel="stylesheet" href="../css/margins.css">
 	<link rel="stylesheet" href="../css/body.css">
 	<link rel="stylesheet" href="../css/conversationsList.css">
 	<link rel="stylesheet" href="../css/conversation.css">

js/addChatButton.js

@@ -8,8 +8,8 @@ function addChatButtonOnClick(){
 
 // eslint-disable-next-line no-unused-vars
 function addChatButtonOnClickResponse(message){
-	let chatsListData = message.chatsListData.reverse();
-	updateConversationsList(chatsListData);
+	let sortedChatsDesc = message.chatsListData.sort((a, b) => b.lastUpdate - a.lastUpdate);
+	updateConversationsList(sortedChatsDesc);
 }
 
 addChatButton.addEventListener('click', () => {

js/conversation.js

@@ -29,7 +29,25 @@ function conversationSendTextButtonOnClick(){
 	let chatHistoryElement = document.createElement('div');
 	chatHistoryElement.className = "chatHistoryElement userMargin";
 	chatHistoryElement.innerHTML = marked.parse(query);
+	let codeBlocks = chatHistoryElement.querySelectorAll('pre code');
+	if (codeBlocks){
+		codeBlocks.forEach((block) => {
+			hljs.highlightElement(block);
+			let copyButton = document.createElement('button');
+			copyButton.textContent = 'copy';
+			copyButton.className = 'copyButton';
+			copyButton.type = 'button';
+			copyButton.addEventListener('click', () => {
+				navigator.clipboard.writeText(block.textContent).then(() => {
+					copyButton.textContent = 'done!';
+					setTimeout(() => copyButton.textContent = 'copy', 2000);
+				}).catch(err => console.error('js//conversation.js error: ', err));
+			});
+			block.parentNode.insertBefore(copyButton, block);
+		});
+	}
 	let chatHistoryContainer = document.getElementById('chatHistoryContainer');
+
 	chatHistoryContainer.appendChild(chatHistoryElement);
 	vscode.postMessage({
 		command: 'conversationSendTextButtonOnClickRequest',
@@ -113,6 +131,7 @@ function createConversationBody(chatData) {
 
 // eslint-disable-next-line no-unused-vars
 function conversationSendTextButtonOnClickResponse(message) {
+
 	let chatData = message.chatData;
 
 	let chatHistoryContainer = document.getElementById('chatHistoryContainer');
@@ -124,15 +143,14 @@ function conversationSendTextButtonOnClickResponse(message) {
 		} else {
 			chatHistoryElement.className = "chatHistoryElement nonuserMargin";
 		}
-		// chatHistoryElement.textContent = messageData.message;
 		chatHistoryElement.innerHTML = marked.parse(messageData.content);
 		let codeBlocks = chatHistoryElement.querySelectorAll('pre code');
 		if (codeBlocks){
 			codeBlocks.forEach((block) => {
 				hljs.highlightElement(block);
 				let copyButton = document.createElement('button');
 				copyButton.textContent = 'copy';
-				copyButton.className = 'copy-btn';
+				copyButton.className = 'copyButton';
 				copyButton.type = 'button';
 				copyButton.addEventListener('click', () => {
 					navigator.clipboard.writeText(block.textContent).then(() => {

js/conversationsList.js

@@ -1,70 +1,57 @@
 
 
-function clickToOpenConversationButton(chatData){
+function clickToOpenConversationButton(chatData) {
 	IN_CHAT = true;
 	CURRENT_CHAT_ID = chatData.id;
 	// console.log(chatData);
 	createConversationBody(chatData);
 }
 
-
 // eslint-disable-next-line no-unused-vars
-function createOpenConversationButton(chatData){
+function createOpenConversationButton(chatData) {
 	let openConversationButton = document.createElement('button');
-	openConversationButton.className = 'openConversationButton';
-
+	if (chatData.conversation.length == 0 || chatData.conversation[chatData.conversation.length-1].role == "user") {
+		openConversationButton.className = "openConversationButton userMargin";
+	} else {
+		openConversationButton.className = "openConversationButton nonuserMargin";
+	}
 	let openConversationButtonTopText = document.createElement('span');
-	if (chatData.conversation.length>0){
-		openConversationButtonTopText.textContent = chatData.conversation[chatData.conversation.length-1].content;
-	}else{
+	if (chatData.conversation.length > 0) {
+		openConversationButtonTopText.textContent = chatData.conversation[chatData.conversation.length - 1].content;
+	} else {
 		openConversationButtonTopText.textContent = "Empty chat";
 	}
-    openConversationButtonTopText.className = 'openConversationButtonTopText';
-    openConversationButton.appendChild(openConversationButtonTopText);
+	openConversationButtonTopText.className = 'openConversationButtonTopText';
+	openConversationButton.appendChild(openConversationButtonTopText);
 
-    openConversationButton.appendChild(document.createElement('br')); 
+	openConversationButton.appendChild(document.createElement('br'));
 
-    let openConversationButtonBottomText = document.createElement('span');
-    openConversationButtonBottomText.textContent = chatData.model;
-    openConversationButtonBottomText.className = 'openConversationButtonBottomText';
-    openConversationButton.appendChild(openConversationButtonBottomText);
+	let openConversationButtonBottomText = document.createElement('span');
+	openConversationButtonBottomText.textContent = chatData.model;
+	openConversationButtonBottomText.className = 'openConversationButtonBottomText';
+	openConversationButton.appendChild(openConversationButtonBottomText);
 
-	openConversationButton.addEventListener('click', function() {
+	openConversationButton.addEventListener('click', function () {
 		clickToOpenConversationButton(chatData);
 	});
-	// openConversationButton.addEventListener('mousemove', function(e) {
-    //     const rect = e.target.getBoundingClientRect();
-    //     const x = e.clientX - rect.left; // X координата относительно кнопки
-    //     const y = e.clientY - rect.top; // Y координата относительно кнопки
-    //     const centerX = rect.width / 2;
-    //     const centerY = rect.height / 2;
-    //     const distance = Math.sqrt((x - centerX) ** 2 + (y - centerY) ** 2);
-    //     const maxDistance = Math.sqrt(centerX ** 2 + centerY ** 2); // Максимальное расстояние от центра до угла
-    //     const intensity = 1 - Math.min(distance / maxDistance, 1); // Интенсивность от 0 до 1
-    //     openConversationButton.style.setProperty('--border-intensity', intensity.toFixed(2));
-    // });
-
-    // // Возвращаем нормальный стиль когда курсор уходит с кнопки
-    // openConversationButton.addEventListener('mouseleave', function() {
-    //     openConversationButton.style.setProperty('--border-intensity', 0);
-    // });
 	return openConversationButton;
 }
 
 
 // eslint-disable-next-line no-unused-vars
 function updateConversationsList(chatsListData) {
-    let bodyElement = document.getElementById('body');
+	let bodyElement = document.getElementById('body');
 
-    bodyElement.innerHTML = '';
+	bodyElement.innerHTML = '';
 
 	let conversationsListContainer = document.createElement('div');
 	conversationsListContainer.id = 'conversationsListContainer';
 	conversationsListContainer.className = 'conversationsListContainer';
 
-    chatsListData.forEach(function(chat) {
+	chatsListData.forEach(function (chat) {
 		let button = createOpenConversationButton(chat);
-        conversationsListContainer.appendChild(button);
-    });
+		conversationsListContainer.appendChild(button);
+	});
+
 	bodyElement.appendChild(conversationsListContainer);
 }

js/toHomeButton.js

@@ -16,8 +16,8 @@ function goToHome() {
 
 // eslint-disable-next-line no-unused-vars
 function toHomeButtonOnClickResponse(message) {
-	let chatsListData = message.chatsListData.reverse();
-	updateConversationsList(chatsListData);
+	let sortedChatsDesc = message.chatsListData.sort((a, b) => b.lastUpdate - a.lastUpdate);
+	updateConversationsList(sortedChatsDesc);
 }
 
 toHomeButton.addEventListener('click', () => {

src/.initExtension.js

@@ -49,23 +49,28 @@ class OpenAIViewProvider {
 			switch (message.command) {
 				case 'conversationSendTextButtonOnClickRequest':
 					await OpenAI.request(message);
-					webviewView.webview.postMessage({ command: 'conversationSendTextButtonOnClickResponse', chatData: await OpenAI.getCurrentChatData() });
+					if (OpenAI.getCurrentChat()>0){
+						webviewView.webview.postMessage({ command: 'conversationSendTextButtonOnClickResponse', chatData: await OpenAI.getCurrentChatData() });
+					}else{
+						// chatsListData = await OpenAI.getChatsListData();
+						webviewView.webview.postMessage({ command: 'toHomeButtonOnClickResponse', chatsListData : await OpenAI.getChatsListData() });
+					}
 					break;
 				case 'addChatButtonOnClickRequest':
 					await OpenAI.createNewChat(ExtensionSettings.OPENAI_MODEL);
-					chatsListData = await OpenAI.getChatsListData();
-					webviewView.webview.postMessage({ command: 'addChatButtonOnClickResponse', chatsListData : chatsListData });
+					// chatsListData = await OpenAI.getChatsListData();
+					webviewView.webview.postMessage({ command: 'addChatButtonOnClickResponse', chatsListData : await OpenAI.getChatsListData() });
 					break;
 				case 'deleteChatButtonOnClickRequest':
 					await OpenAI.deleteChatDataByID(message);
-					chatsListData = await OpenAI.getChatsListData();
+					// chatsListData = await OpenAI.getChatsListData();
 					await OpenAI.setCurrentChatID(-1);
-					webviewView.webview.postMessage({ command: 'deleteChatButtonOnClickResponse', chatsListData : chatsListData });
+					webviewView.webview.postMessage({ command: 'deleteChatButtonOnClickResponse', chatsListData : await OpenAI.getChatsListData() });
 					break;
 				case 'toHomeButtonOnClickRequest':
 					chatsListData = await OpenAI.getChatsListData();
 					await OpenAI.setCurrentChatID(-1);
-					webviewView.webview.postMessage({ command: 'toHomeButtonOnClickResponse', chatsListData : chatsListData });
+					webviewView.webview.postMessage({ command: 'toHomeButtonOnClickResponse', chatsListData : await OpenAI.getChatsListData() });
 					break;
 			}
 		});
@@ -75,7 +80,6 @@ class OpenAIViewProvider {
 function activate(context) {
 	try {
 		ExtensionData.Init(context);
-
 		let disposable = vscode.commands.registerCommand('vscode-fxpw-ai-chat.openSettings', function () {
 			vscode.commands.executeCommand('workbench.action.openSettings', 'vscode-fxpw-ai-chat').then(() => {
 				// console.log('vscode-fxpw-ai-chat config open');

src/ExtensionData.js

@@ -59,6 +59,18 @@ class ExtensionData {
 		currentChatData.lastUpdate = timestamp;
 		await this.saveChatsData();
 	}
+	static async addDataToChatById(data,chatID){
+		let currentChatData = await this.getChatDataByID(chatID);
+		if(currentChatData && currentChatData.needRenameOnRequest && data.role == "user" && data.content){
+			currentChatData.needRenameOnRequest = false;
+			currentChatData.name = data.content;
+		}
+		currentChatData.conversation.push(data);
+		let currentDate = new Date();
+		let timestamp = currentDate.getTime();
+		currentChatData.lastUpdate = timestamp;
+		await this.saveChatsData();
+	}
 
 	static async deleteChatDataByID(chatID){
 		this.#chatsData.forEach((element, index) => {