Make copy button changing to ok and back, add break-word property for pre

src/components/ChatPanel.ts

@@ -878,7 +878,20 @@ export class ChatPanel {
         const copyIconContainer = copyButton.createSpan({ cls: 'flex items-center justify-center touch:w-10 h-8 w-8' });
         setIcon(copyIconContainer, 'copy'); // Используем импортированную функцию setIcon
         copyButton.addEventListener('click', () => {
-            this.copyMessageContent(messageContent);
+            this.copyMessageContent(messageContent)
+                .then(() => {
+                    // В случае успешного копирования меняем иконку на галочку
+                    setIcon(copyIconContainer, 'check');
+                    // Возвращаем иконку копирования через 1 секунду
+                    setTimeout(() => {
+                        setIcon(copyIconContainer, 'copy');
+                    }, 1000);
+                })
+                .catch(err => {
+                    console.error('Не удалось скопировать сообщение:', err);
+                    // Optionally: show an error notice
+                    // new Notice('Не удалось скопировать сообщение.');
+                });
         });
 
         // Кнопка "Попробовать снова"
@@ -898,17 +911,7 @@ export class ChatPanel {
         });*/ // TODO: реализовать переотправку сообщения
     }
 
-    private copyMessageContent(content: string): void {
+    private copyMessageContent(content: string): Promise<void> {
-        navigator.clipboard.writeText(content)
+        return navigator.clipboard.writeText(content);
-            .then(() => {
-                console.log('Message content copied to clipboard.');
-                // Optionally: show a notice to the user
-                // new Notice('Сообщение скопировано!');
-            })
-            .catch(err => {
-                console.error('Failed to copy message content:', err);
-                // Optionally: show an error notice
-                // new Notice('Не удалось скопировать сообщение.');
-            });
     }
 }

src/css/styles.css

@@ -253,7 +253,19 @@
 	padding: 2px 4px;
 	font-family: var(--font-monospace);
 	font-size: 0.9em;
-	color: var(--text-accent);
+		color: var(--text-accent);
+}
+
+/* Стили для блоков кода (pre) */
+.chat-message-content pre {
+	white-space: pre-wrap; /* Сохраняет пробелы и переносит строки, когда это необходимо */
+	word-break: break-word; /* Разбивает длинные слова, чтобы они помещались в контейнер */
+	overflow-x: auto; /* Добавляет горизонтальную прокрутку, если содержимое все же не помещается */
+}
+
+/* Убедимся, что стили code внутри pre не конфликтуют с родительским pre */
+.chat-message-content pre code {
+	background-color: transparent; /* Убираем фон, так как он уже задан для pre */
 }
 
 /* Стиль для форм ввода чата */