Тестовый коммит после удаления husky

frontend/src/components/chat/ConversationList.vue

@@ -0,0 +1,225 @@
+<template>
+  <div class="conversation-list">
+    <div class="list-header">
+      <h3>Диалоги</h3>
+      <button @click="createNewConversation" class="new-conversation-btn">
+        <span>+</span> Новый диалог
+      </button>
+    </div>
+
+    <div v-if="loading" class="loading">Загрузка диалогов...</div>
+
+    <div v-else-if="conversations.length === 0" class="empty-list">
+      <p>У вас пока нет диалогов.</p>
+      <p>Создайте новый диалог, чтобы начать общение с ИИ-ассистентом.</p>
+    </div>
+
+    <div v-else class="conversations">
+      <div
+        v-for="conversation in conversations"
+        :key="conversation.conversation_id"
+        :class="[
+          'conversation-item',
+          { active: selectedConversationId === conversation.conversation_id },
+        ]"
+        @click="selectConversation(conversation.conversation_id)"
+      >
+        <div class="conversation-title">{{ conversation.title }}</div>
+        <div class="conversation-meta">
+          <span class="message-count">{{ conversation.message_count }} сообщений</span>
+          <span class="time">{{ formatTime(conversation.last_activity) }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed, defineEmits } from 'vue';
+import { useAuthStore } from '../../stores/auth';
+import axios from 'axios';
+
+const emit = defineEmits(['select-conversation']);
+const authStore = useAuthStore();
+
+const conversations = ref([]);
+const loading = ref(true);
+const selectedConversationId = ref(null);
+
+// Загрузка списка диалогов
+const fetchConversations = async () => {
+  try {
+    loading.value = true;
+    const response = await axios.get('/api/messages/conversations');
+    conversations.value = response.data;
+
+    // Если есть диалоги и не выбран ни один, выбираем первый
+    if (conversations.value.length > 0 && !selectedConversationId.value) {
+      selectConversation(conversations.value[0].conversation_id);
+    }
+  } catch (error) {
+    console.error('Error fetching conversations:', error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+// Выбор диалога
+const selectConversation = (conversationId) => {
+  selectedConversationId.value = conversationId;
+  emit('select-conversation', conversationId);
+};
+
+// Создание нового диалога
+const createNewConversation = async () => {
+  try {
+    const response = await axios.post('/api/messages/conversations', {
+      title: 'Новый диалог',
+    });
+
+    // Добавляем новый диалог в список
+    const newConversation = {
+      conversation_id: response.data.id,
+      title: response.data.title,
+      username: authStore.username,
+      address: authStore.address,
+      message_count: 0,
+      last_activity: response.data.created_at,
+      created_at: response.data.created_at,
+    };
+
+    conversations.value.unshift(newConversation);
+
+    // Выбираем новый диалог
+    selectConversation(newConversation.conversation_id);
+  } catch (error) {
+    console.error('Error creating conversation:', error);
+  }
+};
+
+// Форматирование времени
+const formatTime = (timestamp) => {
+  if (!timestamp) return '';
+
+  const date = new Date(timestamp);
+  const now = new Date();
+  const diffDays = Math.floor((now - date) / (1000 * 60 * 60 * 24));
+
+  if (diffDays === 0) {
+    // Сегодня - показываем только время
+    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  } else if (diffDays === 1) {
+    // Вчера
+    return 'Вчера';
+  } else if (diffDays < 7) {
+    // В течение недели - показываем день недели
+    const days = ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'];
+    return days[date.getDay()];
+  } else {
+    // Более недели назад - показываем дату
+    return date.toLocaleDateString();
+  }
+};
+
+// Загрузка диалогов при монтировании компонента
+onMounted(() => {
+  fetchConversations();
+});
+
+// Экспорт методов для использования в родительском компоненте
+defineExpose({
+  fetchConversations,
+});
+</script>
+
+<style scoped>
+.conversation-list {
+  display: flex;
+  flex-direction: column;
+  width: 300px;
+  border-right: 1px solid #e0e0e0;
+  background-color: #f9f9f9;
+  height: 100%;
+}
+
+.list-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.list-header h3 {
+  margin: 0;
+  font-size: 1.2rem;
+}
+
+.new-conversation-btn {
+  display: flex;
+  align-items: center;
+  background-color: #4caf50;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+  font-size: 0.9rem;
+}
+
+.new-conversation-btn span {
+  font-size: 1.2rem;
+  margin-right: 0.25rem;
+}
+
+.loading,
+.empty-list {
+  padding: 2rem;
+  text-align: center;
+  color: #666;
+}
+
+.empty-list p {
+  margin: 0.5rem 0;
+}
+
+.conversations {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.conversation-item {
+  padding: 1rem;
+  border-bottom: 1px solid #e0e0e0;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.conversation-item:hover {
+  background-color: #f0f0f0;
+}
+
+.conversation-item.active {
+  background-color: #e8f5e9;
+  color: #4caf50;
+}
+
+.conversation-title {
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.conversation-meta {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.8rem;
+  color: #888;
+}
+
+.time {
+  font-size: 0.8rem;
+}
+</style>

frontend/src/components/chat/MessageInput.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="message-input">
+    <textarea
+      v-model="message"
+      placeholder="Введите сообщение..."
+      @keydown.enter.prevent="handleEnter"
+      ref="textareaRef"
+      :disabled="sending"
+    ></textarea>
+
+    <button @click="sendMessage" class="send-button" :disabled="!message.trim() || sending">
+      <span v-if="sending">Отправка...</span>
+      <span v-else>Отправить</span>
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { ref, defineEmits, nextTick } from 'vue';
+import axios from 'axios';
+
+const props = defineProps({
+  conversationId: {
+    type: [Number, String],
+    required: true,
+  },
+});
+
+const emit = defineEmits(['message-sent']);
+const message = ref('');
+const sending = ref(false);
+const textareaRef = ref(null);
+
+// Обработка нажатия Enter
+const handleEnter = (event) => {
+  // Если нажат Shift+Enter, добавляем перенос строки
+  if (event.shiftKey) {
+    return;
+  }
+
+  // Иначе отправляем сообщение
+  sendMessage();
+};
+
+// Отправка сообщения
+const sendMessage = async () => {
+  if (!message.value.trim() || sending.value) return;
+
+  try {
+    sending.value = true;
+
+    const response = await axios.post(
+      `/api/messages/conversations/${props.conversationId}/messages`,
+      { content: message.value }
+    );
+
+    // Очищаем поле ввода
+    message.value = '';
+
+    // Фокусируемся на поле ввода
+    nextTick(() => {
+      textareaRef.value.focus();
+    });
+
+    // Уведомляем родительский компонент о новых сообщениях
+    emit('message-sent', [response.data.userMessage, response.data.aiMessage]);
+  } catch (error) {
+    console.error('Error sending message:', error);
+  } finally {
+    sending.value = false;
+  }
+};
+
+// Сброс поля ввода
+const resetInput = () => {
+  message.value = '';
+};
+
+// Экспорт методов для использования в родительском компоненте
+defineExpose({
+  resetInput,
+  focus: () => textareaRef.value?.focus(),
+});
+</script>
+
+<style scoped>
+.message-input {
+  display: flex;
+  padding: 1rem;
+  border-top: 1px solid #e0e0e0;
+  background-color: #fff;
+}
+
+textarea {
+  flex: 1;
+  min-height: 40px;
+  max-height: 120px;
+  padding: 0.75rem;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  resize: none;
+  font-family: inherit;
+  font-size: 0.9rem;
+  line-height: 1.4;
+}
+
+textarea:focus {
+  outline: none;
+  border-color: #4caf50;
+  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
+}
+
+.send-button {
+  margin-left: 0.5rem;
+  padding: 0 1rem;
+  height: 40px;
+  background-color: #4caf50;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-weight: 500;
+  transition: background-color 0.2s;
+}
+
+.send-button:hover:not(:disabled) {
+  background-color: #43a047;
+}
+
+.send-button:disabled {
+  background-color: #9e9e9e;
+  cursor: not-allowed;
+}
+</style>

frontend/src/components/chat/MessageThread.vue

@@ -0,0 +1,194 @@
+<template>
+  <div class="message-thread" ref="threadContainer">
+    <div v-if="loading" class="loading">Загрузка сообщений...</div>
+
+    <div v-else-if="messages.length === 0" class="empty-thread">
+      <p>Нет сообщений. Начните диалог, отправив сообщение.</p>
+    </div>
+
+    <div v-else class="messages">
+      <div v-for="message in messages" :key="message.id" :class="['message', message.sender_type]">
+        <div class="message-content">{{ message.content }}</div>
+        <div class="message-meta">
+          <span class="time">{{ formatTime(message.created_at) }}</span>
+          <span v-if="message.channel" class="channel">
+            {{ channelName(message.channel) }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch, nextTick, defineExpose } from 'vue';
+import axios from 'axios';
+
+const props = defineProps({
+  conversationId: {
+    type: [Number, String],
+    required: true,
+  },
+});
+
+const messages = ref([]);
+const loading = ref(true);
+const threadContainer = ref(null);
+
+// Загрузка сообщений диалога
+const fetchMessages = async () => {
+  try {
+    loading.value = true;
+    const response = await axios.get(
+      `/api/messages/conversations/${props.conversationId}/messages`
+    );
+    messages.value = response.data;
+
+    // Прокрутка к последнему сообщению
+    await nextTick();
+    scrollToBottom();
+  } catch (error) {
+    console.error('Error fetching messages:', error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+// Добавление новых сообщений
+const addMessages = (newMessages) => {
+  if (Array.isArray(newMessages)) {
+    messages.value = [...messages.value, ...newMessages];
+  } else {
+    messages.value.push(newMessages);
+  }
+
+  // Прокрутка к последнему сообщению
+  nextTick(() => {
+    scrollToBottom();
+  });
+};
+
+// Прокрутка к последнему сообщению
+const scrollToBottom = () => {
+  if (threadContainer.value) {
+    threadContainer.value.scrollTop = threadContainer.value.scrollHeight;
+  }
+};
+
+// Форматирование времени
+const formatTime = (timestamp) => {
+  if (!timestamp) return '';
+
+  const date = new Date(timestamp);
+  return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+};
+
+// Получение названия канала
+const channelName = (channel) => {
+  const channels = {
+    web: 'Веб',
+    telegram: 'Telegram',
+    email: 'Email',
+  };
+
+  return channels[channel] || channel;
+};
+
+// Наблюдение за изменением ID диалога
+watch(
+  () => props.conversationId,
+  (newId, oldId) => {
+    if (newId && newId !== oldId) {
+      fetchMessages();
+    }
+  }
+);
+
+// Загрузка сообщений при монтировании компонента
+onMounted(() => {
+  if (props.conversationId) {
+    fetchMessages();
+  }
+});
+
+// Экспорт методов для использования в родительском компоненте
+defineExpose({
+  fetchMessages,
+  addMessages,
+});
+</script>
+
+<style scoped>
+.message-thread {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.loading,
+.empty-thread {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  color: #666;
+}
+
+.messages {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.message {
+  max-width: 80%;
+  padding: 0.75rem 1rem;
+  border-radius: 8px;
+  position: relative;
+}
+
+.message.user {
+  align-self: flex-end;
+  background-color: #e3f2fd;
+  border: 1px solid #bbdefb;
+}
+
+.message.ai {
+  align-self: flex-start;
+  background-color: #f5f5f5;
+  border: 1px solid #e0e0e0;
+}
+
+.message.admin {
+  align-self: flex-start;
+  background-color: #fff3e0;
+  border: 1px dashed #ffb74d;
+}
+
+.message-content {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.message-meta {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: 0.25rem;
+  font-size: 0.7rem;
+  color: #999;
+}
+
+.time {
+  font-size: 0.7rem;
+}
+
+.channel {
+  font-size: 0.7rem;
+  padding: 0.1rem 0.3rem;
+  border-radius: 3px;
+  background-color: #f0f0f0;
+}
+</style>