ваше сообщение коммита

2025-07-11 16:45:09 +03:00
parent e0ec889863
commit 584ff401ad
42 changed files with 1945 additions and 1004 deletions
--- a/frontend/nginx-optimized.conf
+++ b/frontend/nginx-optimized.conf
@@ -36,6 +36,12 @@ server {
        proxy_set_header Connection "upgrade";
    }

+    # Запрет на доступ к чувствительным файлам
+    location ~* /(sendgrid\.env|env\.js|config\.js|aws-exports\.js|firebase-config\.js|firebase\.js|settings\.js|app-settings\.js|config\.json|credentials\.json|secrets\.json)$ {
+        deny all;
+        return 403;
+    }
+
    # Основные страницы
    location / {
        proxy_pass http://localhost:9000;
--- a/frontend/nginx.conf
+++ b/frontend/nginx.conf
@@ -43,6 +43,12 @@ http {
            add_header Vary Accept-Encoding;
        }

+        # Запрет на доступ к чувствительным файлам
+        location ~* /(sendgrid\.env|env\.js|config\.js|aws-exports\.js|firebase-config\.js|firebase\.js|settings\.js|app-settings\.js|config\.json|credentials\.json|secrets\.json)$ {
+            deny all;
+            return 403;
+        }
+
        # Основные файлы HTML
        location / {
            try_files $uri $uri/ /index.html;
--- a/frontend/src/components/ContactTable.vue
+++ b/frontend/src/components/ContactTable.vue
@@ -37,18 +37,17 @@
          <el-option label="Только не заблокированные" value="unblocked" />
        </el-select>
      </el-form-item>
-      <el-form-item label="Теги">
+      <el-form-item label="Теги" v-if="availableTags.length">
        <el-select
          v-model="selectedTagIds"
          multiple
          filterable
-          collapse-tags
          placeholder="Выберите теги"
          style="min-width:180px;"
          @change="onAnyFilterChange"
        >
          <el-option
-            v-for="tag in allTags"
+            v-for="tag in availableTags"
            :key="tag.id"
            :label="tag.name"
            :value="tag.id"
@@ -97,6 +96,7 @@ import { useRouter } from 'vue-router';
 import { ElSelect, ElOption, ElForm, ElFormItem, ElInput, ElDatePicker, ElCheckbox, ElButton, ElMessageBox, ElMessage } from 'element-plus';
 import ImportContactsModal from './ImportContactsModal.vue';
 import BroadcastModal from './BroadcastModal.vue';
+import tablesService from '../services/tablesService';
 const props = defineProps({
  contacts: { type: Array, default: () => [] },
  newContacts: { type: Array, default: () => [] },
@@ -117,8 +117,8 @@ const filterDateTo = ref('');
 const filterNewMessages = ref('');
 const filterBlocked = ref('all');

-// Теги
-const allTags = ref([]);
+// Новый фильтр тегов через мультисвязи
+const availableTags = ref([]);
 const selectedTagIds = ref([]);

 const showImportModal = ref(false);
@@ -128,13 +128,36 @@ const selectedIds = ref([]);
 const selectAll = ref(false);

 onMounted(async () => {
-  await loadTags();
  await fetchContacts();
+  await loadAvailableTags();
 });

-async function loadTags() {
-  const res = await fetch('/api/tags');
-  allTags.value = await res.json();
+async function loadAvailableTags() {
+  try {
+    // Получаем все пользовательские таблицы и ищем "Теги клиентов"
+    const tables = await tablesService.getTables();
+    const tagsTable = tables.find(t => t.name === 'Теги клиентов');
+    
+    if (tagsTable) {
+      // Загружаем данные таблицы тегов
+      const table = await tablesService.getTable(tagsTable.id);
+      const nameColumn = table.columns.find(col => col.name === 'Название') || table.columns[0];
+      
+      if (nameColumn) {
+        // Формируем список тегов
+        availableTags.value = table.rows.map(row => {
+          const nameCell = table.cellValues.find(c => c.row_id === row.id && c.column_id === nameColumn.id);
+          return {
+            id: row.id,
+            name: nameCell ? nameCell.value : `Тег ${row.id}`
+          };
+        }).filter(tag => tag.name.trim()); // Исключаем пустые названия
+      }
+    }
+  } catch (e) {
+    console.error('Ошибка загрузки тегов:', e);
+    availableTags.value = [];
+  }
 }

 function buildQuery() {
@@ -158,10 +181,6 @@ async function fetchContacts() {
  contactsArray.value = data.contacts || [];
 }

-function onTagsFilterChange() {
-  onAnyFilterChange();
-}
-
 function onAnyFilterChange() {
  fetchContacts();
 }
@@ -173,7 +192,7 @@ function resetFilters() {
  filterDateTo.value = '';
  filterNewMessages.value = '';
  filterBlocked.value = 'all';
-  selectedTagIds.value = [];
+  selectedTagIds.value = []; // Сбрасываем выбранные теги
  fetchContacts();
 }

--- a/frontend/src/components/ai-assistant/RuleEditor.vue
+++ b/frontend/src/components/ai-assistant/RuleEditor.vue
@@ -6,7 +6,6 @@
      <input v-model="name" />
      <label>Описание</label>
      <textarea v-model="description" rows="3" placeholder="Опишите правило в свободной форме" />
-      <button type="button" @click="convertToJson" style="margin: 0.5rem 0;">Преобразовать в JSON</button>
      <label>Правила (JSON)</label>
      <textarea v-model="rulesJson" rows="6"></textarea>
      <div v-if="error" class="error">{{ error }}</div>
--- a/frontend/src/components/ai-assistant/SystemMonitoring.vue
+++ b/frontend/src/components/ai-assistant/SystemMonitoring.vue
@@ -136,7 +136,6 @@ const testRAG = async () => {
    const response = await axios.post('/rag/answer', {
      tableId: 28,
      question: ragQuestion.value,
-      userTags: [],
      product: null
    });
    ragResult.value = {
--- a/frontend/src/components/tables/TableCell.vue
+++ b/frontend/src/components/tables/TableCell.vue
@@ -1,22 +1,75 @@
 <template>
-  <template v-if="column.type === 'tags'">
+  <template v-if="column.type === 'multiselect'">
    <div v-if="!editing" @click="editing = true" class="tags-cell-view">
-      <span v-if="selectedTagNames.length">{{ selectedTagNames.join(', ') }}</span>
+      <span v-if="selectedMultiNames.length">{{ selectedMultiNames.join(', ') }}</span>
      <span v-else style="color:#bbb">—</span>
    </div>
    <div v-else class="tags-cell-edit">
      <div class="tags-multiselect">
-        <div v-for="tag in allTags" :key="tag.id" class="tag-option">
-          <input type="checkbox" :id="'cell-tag-' + tag.id + '-' + rowId" :value="tag.id" v-model="editTagIds" />
-          <label :for="'cell-tag-' + tag.id + '-' + rowId">{{ tag.name }}</label>
+        <div v-for="option in multiOptions" :key="option" class="tag-option">
+          <input type="checkbox" :id="'cell-multi-' + option + '-' + rowId" :value="option" v-model="editMultiValues" />
+          <label :for="'cell-multi-' + option + '-' + rowId">{{ option }}</label>
+          <span class="remove-option" @click.stop="removeMultiOption(option)">✕</span>
        </div>
      </div>
-      <button class="save-btn" @click="saveTags">Сохранить</button>
-      <button class="cancel-btn" @click="cancelTags">Отмена</button>
+      <div class="add-multiselect-option">
+        <input v-model="newMultiOption" @keyup.enter="addMultiOption" placeholder="Новое значение" />
+        <button class="add-btn" @click="addMultiOption">+</button>
+      </div>
+      <button class="save-btn" @click="saveMulti">Сохранить</button>
+      <button class="cancel-btn" @click="cancelMulti">Отмена</button>
+    </div>
+  </template>
+  <template v-else-if="column.type === 'relation'">
+    <div v-if="!editing" @click="editing = true" class="tags-cell-view">
+      <span v-if="selectedRelationName">{{ selectedRelationName }}</span>
+      <span v-else style="color:#bbb">—</span>
+    </div>
+    <div v-else class="tags-cell-edit">
+      <select v-model="editRelationValue" class="notion-input">
+        <option v-for="opt in relationOptions" :key="opt.id" :value="opt.id">{{ opt.display }}</option>
+      </select>
+      <button class="save-btn" @click="saveRelation">Сохранить</button>
+      <button class="cancel-btn" @click="cancelRelation">Отмена</button>
+    </div>
+  </template>
+  <template v-else-if="column.type === 'lookup'">
+    <div class="lookup-cell-view">
+      <span v-if="lookupValues.length">{{ lookupValues.join(', ') }}</span>
+      <span v-else style="color:#bbb">—</span>
+    </div>
+  </template>
+  <template v-else-if="column.type === 'multiselect-relation'">
+    <div v-if="!editing" @click="editing = true" class="tags-cell-view">
+      <span v-if="selectedMultiRelationNames.length">{{ selectedMultiRelationNames.map(prettyDisplay).join(', ') }}</span>
+      <span v-else>{{ prettyDisplay(localValue) }}</span>
+    </div>
+    <div v-else class="tags-cell-edit">
+      <div class="tags-multiselect">
+        <div v-for="option in multiRelationOptions" :key="option.id" class="tag-option">
+          <input type="checkbox" :id="'cell-multirel-' + option.id + '-' + rowId" :value="String(option.id)" v-model="editMultiRelationValues" />
+          <label :for="'cell-multirel-' + option.id + '-' + rowId">{{ prettyDisplay(option.display) }}</label>
+          <button class="delete-tag-btn" @click.prevent="deleteTag(option.id)" title="Удалить тег">×</button>
+        </div>
+      </div>
+      <div class="add-tag-block">
+        <button v-if="!showAddTagInput" class="add-tag-btn" @click="showAddTagInput = true">+ Новый тег</button>
+        <div v-else class="add-tag-form">
+          <input v-model="newTagName" @keyup.enter="addTag" placeholder="Название тега" />
+          <button class="add-tag-confirm" @click="addTag">Добавить</button>
+          <button class="add-tag-cancel" @click="showAddTagInput = false; newTagName = ''">×</button>
+        </div>
+      </div>
+      <div class="action-buttons">
+        <button class="save-btn" @click="saveMultiRelation">Сохранить</button>
+        <button class="cancel-btn" @click="cancelMultiRelation">Отмена</button>
+      </div>
    </div>
  </template>
  <template v-else>
+    <span v-if="isArrayString(localValue)">{{ parseArrayString(localValue).join(', ') }}</span>
    <input
+      v-else
      v-model="localValue"
      @blur="save"
      @keyup.enter="save"
@@ -27,46 +80,113 @@
 </template>

 <script setup>
-import { ref, watch, onMounted } from 'vue';
+import { ref, watch, onMounted, computed } from 'vue';
+import tablesService from '../../services/tablesService';
 const props = defineProps(['rowId', 'column', 'cellValues']);
 const emit = defineEmits(['update']);

 const localValue = ref('');
 const editing = ref(false);
-const allTags = ref([]); // Все теги из /api/tags
+// const allTags = ref([]); // Все теги из /api/tags
 const editTagIds = ref([]); // id выбранных тегов в режиме редактирования

 // Для отображения выбранных тегов
 const selectedTagNames = ref([]);

+const multiOptions = ref([]);
+const editMultiValues = ref([]);
+const selectedMultiNames = ref([]);
+const newMultiOption = ref('');
+// relation/lookup
+const relationOptions = ref([]);
+const editRelationValue = ref(null);
+const selectedRelationName = ref('');
+const lookupValues = ref([]);
+
+const multiRelationOptions = ref([]);
+const editMultiRelationValues = ref([]);
+const selectedMultiRelationNames = ref([]);
+
+const showAddTagInput = ref(false);
+const newTagName = ref('');
+
+// Добавляем watch для отслеживания изменений в мультисвязях
+watch(editMultiRelationValues, (newValues, oldValues) => {
+  console.log('[editMultiRelationValues] changed from:', oldValues, 'to:', newValues);
+}, { deep: true });
+
 onMounted(async () => {
-  if (props.column.type === 'tags') {
-    await loadTags();
-    updateSelectedTagNames();
+  if (props.column.type === 'multiselect') {
+    multiOptions.value = (props.column.options && props.column.options.options) || [];
+    const cell = props.cellValues.find(
+      c => c.row_id === props.rowId && c.column_id === props.column.id
+    );
+    let values = [];
+    if (cell && cell.value) {
+      try {
+        values = JSON.parse(cell.value);
+      } catch {}
+    }
+    editMultiValues.value = Array.isArray(values) ? values : [];
+    selectedMultiNames.value = multiOptions.value.filter(opt => editMultiValues.value.includes(opt));
+  } else if (props.column.type === 'relation') {
+    await loadRelationOptions();
+    const cell = props.cellValues.find(
+      c => c.row_id === props.rowId && c.column_id === props.column.id
+    );
+    editRelationValue.value = cell ? cell.value : null;
+    selectedRelationName.value = relationOptions.value.find(opt => String(opt.id) === String(editRelationValue.value))?.display || '';
+  } else if (props.column.type === 'lookup') {
+    await loadLookupValues();
+  } else if (props.column.type === 'multiselect-relation') {
+    await loadMultiRelationOptions();
+    await loadMultiRelationValues();
+    // Инициализация localValue для отображения массива, если нет имен
+    const cell = props.cellValues.find(
+      c => c.row_id === props.rowId && c.column_id === props.column.id
+    );
+    localValue.value = cell ? cell.value : '';
+  } else {
+    const cell = props.cellValues.find(
+      c => c.row_id === props.rowId && c.column_id === props.column.id
+    );
+    localValue.value = cell ? cell.value : '';
  }
 });

-async function loadTags() {
-  const res = await fetch('/api/tags');
-  allTags.value = await res.json();
-}
-
 watch(
  () => [props.rowId, props.column.id, props.cellValues],
-  () => {
-    if (props.column.type === 'tags') {
-      // Значение ячейки — строка с JSON-массивом id тегов
+  async () => {
+    if (props.column.type === 'multiselect') {
+      multiOptions.value = (props.column.options && props.column.options.options) || [];
      const cell = props.cellValues.find(
        c => c.row_id === props.rowId && c.column_id === props.column.id
      );
-      let ids = [];
+      let values = [];
      if (cell && cell.value) {
        try {
-          ids = JSON.parse(cell.value);
+          values = JSON.parse(cell.value);
        } catch {}
      }
-      editTagIds.value = Array.isArray(ids) ? ids : [];
-      updateSelectedTagNames();
+      editMultiValues.value = Array.isArray(values) ? values : [];
+      selectedMultiNames.value = multiOptions.value.filter(opt => editMultiValues.value.includes(opt));
+    } else if (props.column.type === 'relation') {
+      await loadRelationOptions();
+      const cell = props.cellValues.find(
+        c => c.row_id === props.rowId && c.column_id === props.column.id
+      );
+      editRelationValue.value = cell ? cell.value : null;
+      selectedRelationName.value = relationOptions.value.find(opt => String(opt.id) === String(editRelationValue.value))?.display || '';
+    } else if (props.column.type === 'lookup') {
+      await loadLookupValues();
+    } else if (props.column.type === 'multiselect-relation') {
+      await loadMultiRelationOptions();
+      await loadMultiRelationValues();
+      // Инициализация localValue для отображения массива, если нет имен
+      const cell = props.cellValues.find(
+        c => c.row_id === props.rowId && c.column_id === props.column.id
+      );
+      localValue.value = cell ? cell.value : '';
    } else {
      const cell = props.cellValues.find(
        c => c.row_id === props.rowId && c.column_id === props.column.id
@@ -77,26 +197,305 @@ watch(
  { immediate: true }
 );

-function updateSelectedTagNames() {
-  if (props.column.type === 'tags') {
-    selectedTagNames.value = allTags.value
-      .filter(tag => editTagIds.value.includes(tag.id))
-      .map(tag => tag.name);
+function saveMulti() {
+  emit('update', JSON.stringify(editMultiValues.value));
+  editing.value = false;
+}
+function cancelMulti() {
+  editing.value = false;
+  selectedMultiNames.value = multiOptions.value.filter(opt => editMultiValues.value.includes(opt));
+}
+
+async function addMultiOption() {
+  const val = newMultiOption.value.trim();
+  if (!val) return;
+  // Если multiselect связан с relation-таблицей (например, Теги клиентов)
+  if (props.column.options && props.column.options.relatedTableId && props.column.options.relatedColumnId) {
+    // 1. Создаём строку в relation-таблице
+    const newRow = await tablesService.addRow(props.column.options.relatedTableId);
+    // 2. Сохраняем значение в нужную ячейку (название тега)
+    await tablesService.saveCell({
+      table_id: props.column.options.relatedTableId,
+      row_id: newRow.id,
+      column_id: props.column.options.relatedColumnId,
+      value: val
+    });
+    // 3. Обновляем multiOptions (заново загружаем из relation-таблицы)
+    const relTable = await tablesService.getTable(props.column.options.relatedTableId);
+    const colId = props.column.options.relatedColumnId;
+    multiOptions.value = relTable.rows.map(row => {
+      const cell = relTable.cellValues.find(c => c.row_id === row.id && c.column_id === colId);
+      return cell ? cell.value : `ID ${row.id}`;
+    });
+    // 4. Добавляем новый тег в выбранные
+    editMultiValues.value.push(val);
+    newMultiOption.value = '';
+    return;
+  }
+  // Обычный multiselect (старый вариант)
+  if (multiOptions.value.includes(val)) return;
+  const updatedOptions = [...multiOptions.value, val];
+  await updateMultiOptionsOnServer(updatedOptions);
+  multiOptions.value = updatedOptions;
+  newMultiOption.value = '';
+}
+async function removeMultiOption(option) {
+  const updatedOptions = multiOptions.value.filter(o => o !== option);
+  await updateMultiOptionsOnServer(updatedOptions);
+  multiOptions.value = updatedOptions;
+  // Если удалили выбранное — убираем из выбранных
+  editMultiValues.value = editMultiValues.value.filter(v => v !== option);
+}
+async function updateMultiOptionsOnServer(optionsArr) {
+  // PATCH /api/tables/column/:columnId
+  const body = {
+    options: {
+      ...(props.column.options || {}),
+      options: optionsArr
+    }
+  };
+  await fetch(`/api/tables/column/${props.column.id}`, {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body)
+  });
+}
+
+async function loadRelationOptions() {
+  // Получаем данные из связанной таблицы (id и display)
+  const opts = [];
+  try {
+    const rel = props.column.options || {};
+    if (rel.relatedTableId) {
+      const res = await fetch(`/api/tables/${rel.relatedTableId}`);
+      const data = await res.json();
+      const colId = rel.relatedColumnId || (data.columns[0] && data.columns[0].id);
+      for (const row of data.rows) {
+        const cell = data.cellValues.find(c => c.row_id === row.id && c.column_id === colId);
+        opts.push({ id: row.id, display: cell ? cell.value : `ID ${row.id}` });
+      }
+    }
+  } catch {}
+  relationOptions.value = opts;
+}
+function saveRelation() {
+  emit('update', editRelationValue.value);
+  editing.value = false;
+  selectedRelationName.value = relationOptions.value.find(opt => String(opt.id) === String(editRelationValue.value))?.display || '';
+}
+function cancelRelation() {
+  editing.value = false;
+}
+
+async function loadLookupValues() {
+  // Получаем связанные rowId через relation-таблицу
+  lookupValues.value = [];
+  try {
+    const rel = props.column.options || {};
+    if (rel.relatedTableId && rel.relatedColumnId) {
+      // Получаем связи для текущей строки
+      const res = await fetch(`/api/tables/${props.column.table_id}/row/${props.rowId}/relations`);
+      const relations = await res.json();
+      // Фильтруем по нужному столбцу relation
+      const relatedRowIds = relations
+        .filter(r => String(r.column_id) === String(props.column.id) && String(r.to_table_id) === String(rel.relatedTableId))
+        .map(r => r.to_row_id);
+      if (relatedRowIds.length) {
+        // Получаем значения из связанной таблицы
+        const relTable = await fetch(`/api/tables/${rel.relatedTableId}`);
+        const relData = await relTable.json();
+        lookupValues.value = relatedRowIds.map(rowId => {
+          const cell = relData.cellValues.find(c => c.row_id === rowId && c.column_id === rel.relatedColumnId);
+          return cell ? cell.value : `ID ${rowId}`;
+        });
+      }
+    }
+  } catch {}
+}
+
+async function loadMultiRelationOptions() {
+  const rel = props.column.options || {};
+  if (!rel.relatedTableId) return;
+  const res = await fetch(`/api/tables/${rel.relatedTableId}`);
+  const data = await res.json();
+  // Далее используем data.columns, data.rows, data.cellValues
+  const colId = rel.relatedColumnId || (data.columns[0] && data.columns[0].id);
+  const opts = [];
+  for (const row of data.rows) {
+    const cell = data.cellValues.find(c => c.row_id === row.id && c.column_id === colId);
+    opts.push({ id: row.id, display: cell ? cell.value : `ID ${row.id}` });
+  }
+  multiRelationOptions.value = opts;
+}
+
+async function loadMultiRelationValues() {
+  // Получаем связи для текущей строки
+  console.log('[loadMultiRelationValues] called for row:', props.rowId, 'column:', props.column.id);
+  editMultiRelationValues.value = [];
+  selectedMultiRelationNames.value = [];
+  try {
+    const rel = props.column.options || {};
+    if (rel.relatedTableId && rel.relatedColumnId) {
+      const url = `/api/tables/${props.column.table_id}/row/${props.rowId}/relations`;
+      console.log('[loadMultiRelationValues] GET request to:', url);
+      const res = await fetch(url);
+      const relations = await res.json();
+      console.log('[loadMultiRelationValues] API response status:', res.status, 'relations:', relations);
+      // Приводим все id к строке для корректного сравнения
+      const relatedRowIds = relations
+        .filter(r => String(r.column_id) === String(props.column.id) && String(r.to_table_id) === String(rel.relatedTableId))
+        .map(r => String(r.to_row_id));
+      console.log('[loadMultiRelationValues] filtered related row ids:', relatedRowIds);
+      editMultiRelationValues.value = relatedRowIds;
+      // Получаем display-значения
+      await loadMultiRelationOptions();
+      selectedMultiRelationNames.value = multiRelationOptions.value
+        .filter(opt => relatedRowIds.includes(String(opt.id)))
+        .map(opt => opt.display);
+      console.log('[loadMultiRelationValues] selectedMultiRelationNames:', selectedMultiRelationNames.value);
+    }
+  } catch (e) {
+    console.error('[loadMultiRelationValues] Error:', e);
  }
 }

-function saveTags() {
-  emit('update', JSON.stringify(editTagIds.value));
-  editing.value = false;
+async function saveMultiRelation() {
+  console.log('[saveMultiRelation] called');
+  const rel = props.column.options || {};
+  console.log('[saveMultiRelation] editMultiRelationValues:', editMultiRelationValues.value);
+  try {
+    const payload = {
+      column_id: props.column.id,
+      to_table_id: rel.relatedTableId,
+      to_row_ids: editMultiRelationValues.value
+    };
+    console.log('[saveMultiRelation] POST payload:', payload);
+    const response = await fetch(`/api/tables/${props.column.table_id}/row/${props.rowId}/multirelations`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload)
+    });
+    const result = await response.json().catch(() => ({}));
+    console.log('[saveMultiRelation] API response status:', response.status, 'result:', result);
+    editing.value = false;
+    await loadMultiRelationValues();
+    console.log('[saveMultiRelation] emitting update with:', editMultiRelationValues.value);
+    emit('update', editMultiRelationValues.value);
+  } catch (e) {
+    console.error('[saveMultiRelation] Ошибка при сохранении мультисвязи:', e);
+  }
 }
-function cancelTags() {
+
+async function addTag() {
+  if (!newTagName.value.trim()) return;
+  const rel = props.column.options || {};
+  
+  try {
+    console.log('[addTag] Добавляем новый тег:', newTagName.value);
+    
+    // 1. Создаем новую пустую строку в связанной таблице
+    const rowResponse = await fetch(`/api/tables/${rel.relatedTableId}/rows`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' }
+    });
+    const newRow = await rowResponse.json();
+    
+    console.log('[addTag] Новая строка создана:', newRow);
+    
+    // 2. Добавляем значение в ячейку через POST /cell
+    const cellResponse = await fetch(`/api/tables/cell`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        row_id: newRow.id,
+        column_id: rel.relatedColumnId,
+        value: newTagName.value
+      })
+    });
+    const cellResult = await cellResponse.json();
+    
+    console.log('[addTag] Значение ячейки сохранено:', cellResult);
+    
+    // Очищаем форму
+    newTagName.value = '';
+    showAddTagInput.value = false;
+    
+    // Обновляем список опций
+    await loadMultiRelationOptions();
+    
+    // Автоматически добавляем новый тег в выбранные
+    editMultiRelationValues.value.push(String(newRow.id));
+    console.log('[addTag] Тег добавлен в выбранные:', editMultiRelationValues.value);
+  } catch (e) {
+    console.error('[addTag] Ошибка при добавлении тега:', e);
+  }
+}
+
+async function deleteTag(tagId) {
+  const rel = props.column.options || {};
+  if (!confirm('Удалить этот тег?')) return;
+  
+  try {
+    console.log('[deleteTag] Удаляем тег с ID:', tagId);
+    
+    // Удаляем тег из связанной таблицы
+    const response = await fetch(`/api/tables/row/${tagId}`, { method: 'DELETE' });
+    const result = await response.json();
+    
+    console.log('[deleteTag] Ответ сервера:', response.status, result);
+    
+    // Убираем тег из выбранных значений, если он был выбран
+    editMultiRelationValues.value = editMultiRelationValues.value.filter(id => String(id) !== String(tagId));
+    
+    // Обновляем список опций
+    await loadMultiRelationOptions();
+    
+    console.log('[deleteTag] Тег удален:', tagId);
+  } catch (e) {
+    console.error('[deleteTag] Ошибка при удалении тега:', e);
+  }
+}
+
+function cancelMultiRelation() {
+  // Сбрасываем форму добавления тега
+  showAddTagInput.value = false;
+  newTagName.value = '';
+  
+  // Закрываем режим редактирования
  editing.value = false;
-  updateSelectedTagNames();
+  
+  // Перезагружаем исходные значения
+  loadMultiRelationValues();
 }

 function save() {
  emit('update', localValue.value);
 }
+
+function isArrayString(val) {
+  if (typeof val !== 'string') return false;
+  try {
+    const arr = JSON.parse(val);
+    return Array.isArray(arr);
+  } catch {
+    return false;
+  }
+}
+function parseArrayString(val) {
+  try {
+    const arr = JSON.parse(val);
+    return Array.isArray(arr) ? arr : [val];
+  } catch {
+    return [val];
+  }
+}
+
+function prettyDisplay(val) {
+  if (isArrayString(val)) {
+    return parseArrayString(val).join(', ');
+  }
+  return val;
+}
 </script>

 <style scoped>
@@ -161,4 +560,150 @@ function save() {
 .cancel-btn:hover {
  background: #d5d5d5;
 }
+.add-multiselect-option {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+  margin-bottom: 0.7em;
+}
+.add-multiselect-option input {
+  flex: 1;
+  padding: 0.2em 0.5em;
+  border: 1px solid #e0e0e0;
+  border-radius: 5px;
+  font-size: 1em;
+}
+.add-btn {
+  background: #2ecc40;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  padding: 0.3em 1em;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+.add-btn:hover {
+  background: #27ae38;
+}
+.remove-option {
+  color: #e74c3c;
+  font-size: 1.1em;
+  margin-left: 0.4em;
+  cursor: pointer;
+  user-select: none;
+  transition: color 0.2s;
+}
+.remove-option:hover {
+  color: #c0392b;
+}
+.lookup-cell-view {
+  min-height: 1.7em;
+  padding: 0.2em 0.1em;
+  color: #222;
+}
+.multi-relation-edit {
+  padding: 8px 0;
+}
+.multi-relation-options {
+  max-height: 180px;
+  overflow-y: auto;
+  margin-bottom: 8px;
+}
+.multi-relation-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 2px 0;
+}
+.delete-tag-btn {
+  background: none;
+  border: none;
+  color: #e53e3e;
+  font-size: 1.1em;
+  cursor: pointer;
+  padding: 0 4px;
+}
+.multi-relation-actions {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+.save-btn {
+  background: #4f8cff;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  padding: 4px 12px;
+  cursor: pointer;
+}
+.cancel-btn {
+  background: #f3f4f6;
+  color: #333;
+  border: none;
+  border-radius: 4px;
+  padding: 4px 12px;
+  cursor: pointer;
+}
+.add-tag-block {
+  margin-top: 8px;
+}
+.add-tag-btn {
+  background: #f3f4f6;
+  color: #4f8cff;
+  border: none;
+  border-radius: 4px;
+  padding: 4px 10px;
+  cursor: pointer;
+}
+.add-tag-form {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+.add-tag-form input {
+  padding: 3px 8px;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+}
+.add-tag-confirm {
+  background: #4f8cff;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  padding: 3px 10px;
+  cursor: pointer;
+}
+.add-tag-cancel {
+  background: none;
+  border: none;
+  color: #e53e3e;
+  font-size: 1.1em;
+  cursor: pointer;
+  padding: 0 4px;
+}
+
+.action-buttons {
+  display: flex;
+  gap: 0.5em;
+  margin-top: 0.7em;
+}
+
+.delete-tag-btn:hover {
+  color: #c0392b;
+}
+
+.add-tag-btn:hover {
+  background: #e2e8f0;
+  color: #3182ce;
+}
+
+.add-tag-confirm:hover {
+  background: #3182ce;
+}
+
+.add-tag-block {
+  margin: 0.7em 0;
+}
 </style> 
--- a/frontend/src/components/tables/TagsTableView.vue
+++ b/frontend/src/components/tables/TagsTableView.vue
@@ -1,285 +0,0 @@
-<template>
-  <div class="tags-table-wrapper">
-    <div class="tableview-header-row">
-      <button class="nav-btn" @click="goToTables">Таблицы</button>
-      <button class="nav-btn" @click="goToCreate">Создать таблицу</button>
-      <button class="close-btn" @click="closeTable">Закрыть</button>
-      <button class="action-btn" disabled>Редактировать</button>
-      <button class="danger-btn" disabled>Удалить</button>
-    </div>
-    <div class="tags-header-row">
-      <h3>Теги</h3>
-    </div>
-    <table class="tags-table">
-      <thead>
-        <tr>
-          <th>Название</th>
-          <th>Описание</th>
-          <th style="width:110px;">Действия</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="tag in tags" :key="tag.id">
-          <td v-if="editId !== tag.id">{{ tag.name }}</td>
-          <td v-else><input v-model="editName" class="edit-input" /></td>
-
-          <td v-if="editId !== tag.id">{{ tag.description || '—' }}</td>
-          <td v-else><input v-model="editDescription" class="edit-input" /></td>
-
-          <td>
-            <template v-if="editId === tag.id">
-              <button class="save-btn" @click="saveEdit(tag)">Сохранить</button>
-              <button class="cancel-btn" @click="cancelEdit">Отмена</button>
-            </template>
-            <template v-else>
-              <button class="edit-btn" @click="startEdit(tag)" title="Редактировать">✏️</button>
-              <button class="delete-btn" @click="deleteTag(tag)" title="Удалить">🗑</button>
-            </template>
-          </td>
-        </tr>
-        <tr v-if="tags.length === 0">
-          <td colspan="3" style="text-align:center; color:#888;">Нет тегов</td>
-        </tr>
-        <tr>
-          <td></td>
-          <td></td>
-          <td style="text-align:center;">
-            <button class="edit-btn" @click="showAddTagModal = true" title="Добавить тег">➕</button>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-    <div v-if="showAddTagModal" class="modal-backdrop">
-      <div class="modal">
-        <h4>Добавить тег</h4>
-        <input v-model="newTagName" class="edit-input" placeholder="Название" />
-        <input v-model="newTagDescription" class="edit-input" placeholder="Описание" style="margin-top:0.7em;" />
-        <div class="modal-actions">
-          <button class="save-btn" @click="createTag">Создать</button>
-          <button class="cancel-btn" @click="showAddTagModal = false">Отмена</button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { useRouter } from 'vue-router';
-const tags = ref([]);
-const editId = ref(null);
-const editName = ref('');
-const editDescription = ref('');
-const router = useRouter();
-
-const showAddTagModal = ref(false);
-const newTagName = ref('');
-const newTagDescription = ref('');
-
-function goToTables() {
-  router.push({ name: 'tables-list' });
-}
-function goToCreate() {
-  router.push({ name: 'create-table' });
-}
-function closeTable() {
-  if (window.history.length > 1) {
-    router.back();
-  } else {
-    router.push({ name: 'home' });
-  }
-}
-
-async function loadTags() {
-  const res = await fetch('/api/tags');
-  tags.value = await res.json();
-}
-
-function startEdit(tag) {
-  editId.value = tag.id;
-  editName.value = tag.name;
-  editDescription.value = tag.description || '';
-}
-
-function cancelEdit() {
-  editId.value = null;
-  editName.value = '';
-  editDescription.value = '';
-}
-
-async function saveEdit(tag) {
-  await fetch(`/api/tags/${tag.id}`, {
-    method: 'PATCH',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ name: editName.value, description: editDescription.value })
-  });
-  await loadTags();
-  cancelEdit();
-}
-
-async function deleteTag(tag) {
-  if (!confirm(`Удалить тег "${tag.name}"?`)) return;
-  await fetch(`/api/tags/${tag.id}`, { method: 'DELETE' });
-  await loadTags();
-}
-
-async function createTag() {
-  if (!newTagName.value.trim()) return;
-  await fetch('/api/tags', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ name: newTagName.value, description: newTagDescription.value })
-  });
-  newTagName.value = '';
-  newTagDescription.value = '';
-  showAddTagModal.value = false;
-  await loadTags();
-}
-
-onMounted(loadTags);
-</script>
-
-<style scoped>
-.tableview-header-row {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  margin: 1.2em 0 0.5em 0;
-}
-.tags-header-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 1em;
-}
-.add-plus-btn, .edit-btn {
-  background: none;
-  border: none;
-  cursor: pointer;
-  font-size: 1.1em;
-  margin-right: 0.5em;
-  color: #2ecc40;
-  transition: color 0.2s;
-}
-.add-plus-btn:hover, .edit-btn:hover, .save-btn:hover {
-  color: #138496;
-}
-.close-btn {
-  background: #ff4d4f;
-  color: #fff;
-  border: none;
-  border-radius: 8px;
-  padding: 0.5em 1.2em;
-  font-weight: 600;
-  cursor: pointer;
-  font-size: 1em;
-  transition: background 0.2s;
-}
-.close-btn:hover {
-  background: #d9363e;
-}
-.action-btn {
-  background: #2ecc40;
-  color: #fff;
-  border: none;
-  border-radius: 8px;
-  padding: 0.5em 1.2em;
-  font-weight: 600;
-  cursor: pointer;
-  font-size: 1em;
-  margin-left: 0.7em;
-  transition: background 0.2s;
-}
-.action-btn:hover {
-  background: #27ae38;
-}
-.danger-btn {
-  background: #ff4d4f;
-  color: #fff;
-  border: none;
-  border-radius: 8px;
-  padding: 0.5em 1.2em;
-  font-weight: 600;
-  cursor: pointer;
-  font-size: 1em;
-  margin-left: 0.7em;
-  transition: background 0.2s;
-}
-.danger-btn:hover {
-  background: #d9363e;
-}
-.nav-btn {
-  background: #eaeaea;
-  color: #333;
-  border: none;
-  border-radius: 8px;
-  padding: 0.5em 1.2em;
-  font-weight: 500;
-  cursor: pointer;
-  font-size: 1em;
-  transition: background 0.2s;
-  margin-right: 0.7em;
-}
-.nav-btn:hover {
-  background: #d5d5d5;
-}
-.tags-table-wrapper {
-  margin: 2em 0;
-  background: #fff;
-  border-radius: 10px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
-  padding: 1.5em 1em;
-}
-.tags-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-.tags-table th, .tags-table td {
-  border: 1px solid #ececec;
-  padding: 0.6em 1em;
-  font-size: 1.05em;
-}
-.tags-table th {
-  background: #f7f7f7;
-  font-weight: 600;
-}
-.delete-btn {
-  color: #dc3545;
-}
-.cancel-btn {
-  color: #888;
-}
-.edit-input {
-  border: 1px solid #ccc;
-  border-radius: 6px;
-  padding: 4px 10px;
-  font-size: 1em;
-  min-width: 120px;
-}
-/* Модалка */
-.modal-backdrop {
-  position: fixed;
-  top: 0; left: 0; right: 0; bottom: 0;
-  background: rgba(0,0,0,0.18);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
-.modal {
-  background: #fff;
-  border-radius: 12px;
-  padding: 2em 1.5em;
-  box-shadow: 0 2px 16px rgba(0,0,0,0.13);
-  min-width: 260px;
-  display: flex;
-  flex-direction: column;
-  gap: 0.7em;
-}
-.modal-actions {
-  display: flex;
-  gap: 1em;
-  margin-top: 1em;
-  justify-content: flex-end;
-}
-</style> 
--- a/frontend/src/components/tables/UserTableView.vue
+++ b/frontend/src/components/tables/UserTableView.vue
@@ -10,20 +10,20 @@
    </span>
  </div>
  <!-- Фильтры на Element Plus -->
-  <div class="table-filters-el" v-if="productOptions.length || tagOptions.length">
-    <el-select v-model="selectedProduct" placeholder="Все продукты" clearable style="min-width: 180px;">
-      <el-option v-for="opt in productOptions" :key="opt" :label="opt" :value="opt" />
-    </el-select>
-    <el-select
-      v-model="selectedTags"
-      multiple
-      filterable
-      collapse-tags
-      placeholder="Теги"
-      style="min-width: 220px;"
-    >
-      <el-option v-for="tag in tagOptions" :key="tag" :label="tag" :value="tag" />
-    </el-select>
+  <div class="table-filters-el" v-if="relationFilterDefs.length">
+    <!-- Только фильтры по multiselect-relation -->
+    <template v-for="def in relationFilterDefs" :key="def.col.id">
+      <el-select
+        v-model="relationFilters[def.filterKey]"
+        :multiple="def.isMulti"
+        filterable
+        clearable
+        :placeholder="def.col.name"
+        style="min-width: 180px;"
+      >
+        <el-option v-for="opt in def.options" :key="opt.id" :label="opt.display" :value="opt.id" />
+      </el-select>
+    </template>
    <el-button @click="resetFilters" type="default" icon="el-icon-refresh">Сбросить фильтры</el-button>
  </div>
  <div class="notion-table-wrapper">
@@ -83,30 +83,28 @@
        <select v-model="newColType" class="notion-input">
          <option value="text">Текст</option>
          <option value="number">Число</option>
-          <option value="tags">Теги</option>
+          <option value="multiselect">Мультивыбор</option>
+          <option value="multiselect-relation">Мультивыбор из таблицы</option>
+          <option value="relation">Связь (relation)</option>
+          <option value="lookup">Lookup</option>
        </select>
-        <label>Назначение столбца</label>
-        <select v-model="newColPurpose" class="notion-input">
-          <option value="">— Не выбрано —</option>
-          <option value="question">Это столбец с вопросами</option>
-          <option value="answer">Это столбец с ответами</option>
-          <option value="clarifyingAnswer">Ответ с уточняющим вопросом</option>
-          <option value="objectionAnswer">Ответ на возражение</option>
-          <option value="userTags">Это столбец с тегами пользователей</option>
-          <option value="context">Это столбец с дополнительным контекстом</option>
-          <option value="product">Это столбец с продуктом/услугой</option>
-          <option value="priority">Это столбец с приоритетом</option>
-          <option value="date">Это столбец с датой</option>
-        </select>
-        <div v-if="newColType === 'tags'">
-          <label>Выберите теги</label>
-          <div class="tags-multiselect">
-            <div v-for="tag in tags" :key="tag.id" class="tag-option">
-              <input type="checkbox" :id="'tag-' + tag.id" :value="tag.id" v-model="selectedTagIds" />
-              <label :for="'tag-' + tag.id">{{ tag.name }}</label>
-            </div>
-          </div>
+        <div v-if="newColType === 'relation' || newColType === 'lookup' || newColType === 'multiselect-relation'">
+          <label>Связанная таблица</label>
+          <select v-model="relatedTableId" class="notion-input">
+            <option v-for="tbl in allTables" :key="tbl.id" :value="tbl.id">{{ tbl.name }}</option>
+          </select>
+          <label>Связанный столбец</label>
+          <select v-model="relatedColumnId" class="notion-input">
+            <option v-for="col in relatedTableColumns" :key="col.id" :value="col.id">{{ col.name }}</option>
+          </select>
        </div>
+        <div v-if="newColType === 'multiselect'">
+          <label>Опции для мультивыбора (через запятую)</label>
+          <input v-model="multiOptionsInput" class="notion-input" placeholder="например: VIP, B2B, Startup" />
+        </div>
+        <label>Плейсхолдер</label>
+        <input v-model="newColPlaceholder" class="notion-input" placeholder="Плейсхолдер (авто)" />
+        <!-- Удаляю блок назначения столбца -->
        <div class="modal-actions">
          <button class="save-btn" @click="handleAddColumn">Добавить</button>
          <button class="cancel-btn" @click="closeAddColModal">Отмена</button>
@@ -115,7 +113,6 @@
    </div>
  </div>
 </template>
-
 <script setup>
 import { ref, onMounted, computed, watch } from 'vue';
 import tablesService from '../../services/tablesService';
@@ -135,10 +132,9 @@ const cellValues = ref([]);
 const tableMeta = ref(null);

 // Фильтры
-const selectedProduct = ref('');
-const selectedTags = ref([]);
-const productOptions = ref([]);
-const tagOptions = ref([]);
+// Удаляю selectedProduct и productOptions
+// const selectedProduct = ref('');
+// const productOptions = ref([]);
 const filteredRows = ref([]);

 // Для модалки добавления столбца
@@ -147,7 +143,62 @@ const newColName = ref('');
 const newColType = ref('text');
 const tags = ref([]);
 const selectedTagIds = ref([]);
-const newColPurpose = ref("");
+const allTables = ref([]);
+const relatedTableId = ref(null);
+const relatedColumnId = ref(null);
+const relatedTableColumns = ref([]);
+const newColPlaceholder = ref('');
+const multiOptionsInput = ref('');
+
+// Новые фильтры по relation/multiselect/lookup
+const relationFilters = ref({});
+const relationFilterDefs = ref([]);
+
+watch(newColType, async (val) => {
+  if (val === 'relation' || val === 'lookup' || val === 'multiselect-relation') {
+    // Загрузить все таблицы
+    const tables = await tablesService.getTables();
+    allTables.value = tables;
+    relatedTableId.value = tables[0]?.id || null;
+  }
+});
+watch(relatedTableId, async (val) => {
+  if (val) {
+    const table = await tablesService.getTable(val);
+    relatedTableColumns.value = table.columns;
+    relatedColumnId.value = table.columns[0]?.id || null;
+  }
+});
+watch(newColName, async (val) => {
+  // Получить плейсхолдер с бэка
+  if (!val) { newColPlaceholder.value = ''; return; }
+  try {
+    // Имитация генерации плейсхолдера (можно заменить на API)
+    newColPlaceholder.value = val.toLowerCase().replace(/\s+/g, '_').replace(/[^a-z0-9_]/g, '');
+  } catch { newColPlaceholder.value = ''; }
+});
+
+// Автоматизация для столбца 'Теги клиентов'
+watch([newColType, selectedTagIds], async ([type, tagIds]) => {
+  if ((type === 'relation' || type === 'multiselect') && tagIds.length > 0) {
+    // Найти или создать таблицу 'Теги клиентов'
+    let tables = await tablesService.getTables();
+    let tagsTable = tables.find(t => t.name === 'Теги клиентов');
+    if (!tagsTable) {
+      tagsTable = await tablesService.createTable({
+        name: 'Теги клиентов',
+        description: 'Справочник тегов для контактов',
+        isRagSourceId: 2
+      });
+      tables = await tablesService.getTables();
+    }
+    relatedTableId.value = tagsTable.id;
+    // Получить первый столбец (название тега)
+    const tagTable = await tablesService.getTable(tagsTable.id);
+    relatedTableColumns.value = tagTable.columns;
+    relatedColumnId.value = tagTable.columns[0]?.id || null;
+  }
+});

 // Меню столбца
 const openedColMenuId = ref(null);
@@ -160,7 +211,8 @@ function closeAddColModal() {
  newColName.value = '';
  newColType.value = 'text';
  selectedTagIds.value = [];
-  newColPurpose.value = '';
+  newColPlaceholder.value = '';
+  multiOptionsInput.value = '';
 }

 async function handleAddColumn() {
@@ -171,47 +223,88 @@ async function handleAddColumn() {
    data.tagIds = selectedTagIds.value;
    options.tagIds = selectedTagIds.value;
  }
-  if (newColPurpose.value) {
-    options.purpose = newColPurpose.value;
+  if (newColType.value === 'multiselect') {
+    options.options = multiOptionsInput.value.split(',').map(s => s.trim()).filter(Boolean);
+  }
+  if (newColType.value === 'multiselect-relation') {
+    options.relatedTableId = relatedTableId.value;
+    options.relatedColumnId = relatedColumnId.value;
+  }
+  if (newColType.value === 'relation' || newColType.value === 'lookup') {
+    options.relatedTableId = relatedTableId.value;
+    options.relatedColumnId = relatedColumnId.value;
  }
  if (Object.keys(options).length > 0) {
    data.options = options;
  }
+  if (newColPlaceholder.value) {
+    data.placeholder = newColPlaceholder.value;
+  }
  await tablesService.addColumn(props.tableId, data);
  closeAddColModal();
-  fetchTable();
+  await fetchTable();
+  await updateRelationFilterDefs(); // Явно обновляем фильтры
 }

-async function loadTags() {
-  const res = await fetch('/api/tags');
-  tags.value = await res.json();
+async function deleteColumn(col) {
+  // Можно добавить подтверждение
+  if (!confirm(`Удалить столбец "${col.name}"?`)) return;
+  await tablesService.deleteColumn(col.id);
+  await fetchTable();
+  await updateRelationFilterDefs(); // Явно обновляем фильтры
 }

-// Получение уникальных значений для фильтров
-function updateFilterOptions() {
-  // product
-  const productCol = columns.value.find(c => c.options && c.options.purpose === 'product');
-  const tagCol = columns.value.find(c => c.options && c.options.purpose === 'userTags');
-  const products = new Set();
-  const tagsSet = new Set();
-  rows.value.forEach(row => {
-    const cells = cellValues.value.filter(cell => cell.row_id === row.id);
-    const prod = cells.find(c => c.column_id === productCol?.id)?.value;
-    if (prod) products.add(prod);
-    const tagsVal = cells.find(c => c.column_id === tagCol?.id)?.value;
-    if (tagsVal) tagsVal.split(',').map(t => t.trim()).forEach(t => t && tagsSet.add(t));
-  });
-  productOptions.value = Array.from(products);
-  tagOptions.value = Array.from(tagsSet);
-}
+// Удаляю все переменные, функции и UI, связанные с tags, tagOptions, selectedTags, loadTags, updateFilterOptions с tags, и т.д.

+function parseIfArray(val) {
+  if (typeof val === 'string') {
+    // Попытка распарсить как JSON-массив
+    try {
+      const arr = JSON.parse(val);
+      if (Array.isArray(arr)) return arr.map(String);
+    } catch {}
+    // Попытка распарсить как строку-объект вида {"49","47"}
+    if (/^\{.*\}$/.test(val)) {
+      return val.replace(/[{}\s]/g, '').split(',').map(s => s.replace(/"/g, ''));
+    }
+    // Если просто строка с числом/id
+    if (val.trim().length > 0) return [val.trim()];
+    return [];
+  }
+  if (Array.isArray(val)) return val.map(String);
+  if (val && typeof val === 'number') return [String(val)];
+  return [];
+}
 // Загрузка данных с фильтрацией
 async function fetchFilteredRows() {
-  const data = await tablesService.getFilteredRows(props.tableId, {
-    product: selectedProduct.value,
-    tags: selectedTags.value
+  const params = new URLSearchParams();
+  for (const def of relationFilterDefs.value) {
+    const val = relationFilters.value[def.filterKey];
+    if (val && (Array.isArray(val) ? val.length : true)) {
+      params.append(def.filterKey, Array.isArray(val) ? val.join(',') : val);
+    }
+  }
+  console.log('fetchFilteredRows params:', params.toString()); // Для отладки
+  const data = await tablesService.getFilteredRows(props.tableId, params);
+  // Локальная фильтрация по multiselect-relation (если backend не фильтрует)
+  filteredRows.value = data.filter(row => {
+    let ok = true;
+    for (const def of relationFilterDefs.value) {
+      const filterVal = relationFilters.value[def.filterKey];
+      if (!filterVal || (Array.isArray(filterVal) && !filterVal.length)) continue;
+      // Найти ячейку для этого столбца
+      const cell = cellValues.value.find(c => c.row_id === row.id && c.column_id === def.col.id);
+      const cellArr = parseIfArray(cell ? cell.value : []);
+      // filterVal может быть массивом (multi) или строкой
+      const filterArr = Array.isArray(filterVal) ? filterVal : [filterVal];
+      // Если хотя бы одно значение фильтра есть в массиве ячейки — строка проходит
+      if (!filterArr.some(val => cellArr.includes(val))) {
+        ok = false;
+        break;
+      }
+    }
+    return ok;
  });
-  filteredRows.value = data;
 }

 // Основная загрузка таблицы
@@ -221,22 +314,52 @@ async function fetchTable() {
  rows.value = data.rows;
  cellValues.value = data.cellValues;
  tableMeta.value = { name: data.name, description: data.description };
-  updateFilterOptions();
+  await updateRelationFilterDefs();
  await fetchFilteredRows();
 }

+async function updateRelationFilterDefs() {
+  // Для каждого multiselect-relation-столбца формируем опции
+  const defs = [];
+  for (const col of columns.value) {
+    if (col.type === 'multiselect-relation' && col.options && col.options.relatedTableId && col.options.relatedColumnId) {
+      // Собираем все уникальные id из этого столбца по всем строкам
+      const idsSet = new Set();
+      for (const row of rows.value) {
+        const cell = cellValues.value.find(c => c.row_id === row.id && c.column_id === col.id);
+        const arr = parseIfArray(cell ? cell.value : []);
+        arr.forEach(val => idsSet.add(val));
+      }
+      // Получаем значения из связанной таблицы
+      const relTable = await tablesService.getTable(col.options.relatedTableId);
+      const opts = Array.from(idsSet).map(id => {
+        const relRow = relTable.rows.find(r => String(r.id) === String(id));
+        const cell = relTable.cellValues.find(c => c.row_id === (relRow ? relRow.id : id) && c.column_id === col.options.relatedColumnId);
+        return { id, display: cell ? cell.value : `ID ${id}` };
+      });
+      defs.push({
+        col,
+        filterKey: `multiselect-relation_${col.id}`,
+        isMulti: true,
+        options: opts
+      });
+    }
+  }
+  console.log('relationFilterDefs:', defs); // Для отладки
+  relationFilterDefs.value = defs;
+}
+
 // Сброс фильтров
 function resetFilters() {
-  selectedProduct.value = '';
-  selectedTags.value = [];
+  // selectedProduct.value = '';
+  relationFilters.value = {};
  fetchFilteredRows();
 }

-watch([selectedProduct, selectedTags], fetchFilteredRows);
+watch([relationFilters], fetchFilteredRows, { deep: true });

 onMounted(() => {
  fetchTable();
-  loadTags();
 });

 // Для редактирования ячеек
@@ -261,6 +384,11 @@ function getCellValue(row, col) {
  return cell ? cell.value : '';
 }

+async function saveCellValue(rowId, colId, value) {
+  await tablesService.saveCell({ row_id: rowId, column_id: colId, value });
+  await fetchTable();
+}
+
 // Для редактирования названия столбца
 const editingCol = ref(null);
 const colEditValue = ref('');
@@ -300,275 +428,281 @@ function closeMenus() {
 function setMenuPosition(event, styleRef) {
  // Позиционируем меню под кнопкой
  const rect = event.target.getBoundingClientRect();
-  styleRef.value = `position:fixed;top:${rect.bottom + 4}px;left:${rect.left}px;z-index:2000;`;
-}
-// Действия меню столбца
-function startRenameCol(col) {
-  closeMenus();
-  editColumn(col);
-}
-function startChangeTypeCol(col) {
-  closeMenus();
-  // TODO: реализовать смену типа столбца (можно открыть модалку выбора типа)
-  alert('Изменение типа столбца пока не реализовано');
+  styleRef.value = `top: ${rect.bottom + window.scrollY}px; left: ${rect.left + window.scrollX}px;`;
 }

-function saveCellValue(rowId, columnId, value) {
-  tablesService.saveCell({ row_id: rowId, column_id: columnId, value }).then(fetchTable);
-}
-
-function deleteRow(row) {
-  if (confirm('Удалить эту строку?')) {
-    tablesService.deleteRow(row.id).then(fetchTable);
-  }
-}
-function deleteColumn(col) {
-  if (confirm('Удалить этот столбец?')) {
-    tablesService.deleteColumn(col.id).then(fetchTable);
-  }
+async function deleteRow(row) {
+  // Можно добавить подтверждение
+  if (!confirm(`Удалить строку с ID ${row.id}?`)) return;
+  await tablesService.deleteRow(row.id);
+  await fetchTable();
 }

 async function rebuildIndex() {
  rebuilding.value = true;
  rebuildStatus.value = null;
  try {
-    const { data } = await axios.post(`/tables/${props.tableId}/rebuild-index`);
-    if (data.success) {
-      rebuildStatus.value = { success: true, message: `Индекс пересобран (${data.count || 0} строк)` };
-    } else {
-      rebuildStatus.value = { success: false, message: data.message || 'Ошибка пересборки' };
-    }
+    const result = await tablesService.rebuildIndex(props.tableId);
+    rebuildStatus.value = { success: true, message: `Индекс успешно пересобран (${result.count || 0} строк)` };
+    await fetchTable();
  } catch (e) {
-    rebuildStatus.value = { success: false, message: e.response?.data?.error || e.message || 'Ошибка запроса' };
+    let msg = 'Ошибка пересборки индекса';
+    if (e?.response?.data?.error) msg += `: ${e.response.data.error}`;
+    rebuildStatus.value = { success: false, message: msg };
+  } finally {
+    rebuilding.value = false;
  }
-  rebuilding.value = false;
 }
+
 </script>

 <style scoped>
-.notion-table-wrapper {
-  overflow-x: auto;
+.user-table-header {
+  max-width: 1100px;
+  margin: 32px auto 0 auto;
+  padding: 32px 24px 18px 24px;
  background: #fff;
-  border-radius: 12px;
-  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
-  padding: 1.5rem 1rem;
+  border-radius: 18px;
+  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
+.user-table-header h2 {
+  font-size: 2rem;
+  font-weight: 700;
+  margin: 0 0 4px 0;
+  letter-spacing: 0.5px;
+}
+.table-desc {
+  color: #6b7280;
+  font-size: 1.08rem;
+  margin-bottom: 6px;
+}
+.rebuild-btn {
+  background: #4f8cff;
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  padding: 8px 16px;
+  font-size: 1rem;
+  margin-top: 8px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+.rebuild-btn:disabled {
+  background: #b6c6e6;
+  cursor: not-allowed;
+}
+.rebuild-btn:not(:disabled):hover {
+  background: #2563eb;
+}
+.rebuild-status {
+  margin-top: 6px;
+  font-size: 1rem;
+  font-weight: 500;
+}
+.rebuild-status.success { color: #22c55e; }
+.rebuild-status.error { color: #ef4444; }
+
+.table-filters-el {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  margin: 18px auto 0 auto;
+  max-width: 1100px;
+  padding: 0 24px;
+}
+
+.notion-table-wrapper {
+  max-width: 1100px;
+  margin: 24px auto 0 auto;
+  background: #fff;
+  border-radius: 6px;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
+  padding: 12px 6px 18px 6px;
+}
+
 .notion-table {
  width: 100%;
  border-collapse: collapse;
+  font-size: 0.98rem;
  background: #fff;
 }
+
 .notion-table th, .notion-table td {
-  border: 1px solid #ececec;
-  padding: 0.5em 0.7em;
-  min-width: 80px;
-  position: relative;
+  border: 1px solid #e5e7eb;
+  padding: 6px 10px;
+  text-align: left;
  background: #fff;
+  font-size: 0.98rem;
+  min-width: 80px;
 }
+
 .notion-table th {
-  background: #f7f7f7;
+  background: #f3f4f6;
  font-weight: 600;
+  border-bottom: 2px solid #d1d5db;
+  border-top: 1px solid #e5e7eb;
+  padding-top: 7px;
+  padding-bottom: 7px;
 }
-.notion-table tr:hover {
-  background: #f9fafb;
-}
-.col-menu, .row-menu, .add-col, .add-row {
-  background: none;
-  border: none;
-  color: #888;
-  cursor: pointer;
-  font-size: 1.1em;
-  margin-left: 0.3em;
-}
-.col-menu:hover, .row-menu:hover, .add-col:hover, .add-row:hover {
-  color: #2ecc40;
+
+.notion-table tr:hover td {
+  background: #f5f7fa;
 }
+
 .notion-input {
  width: 100%;
-  border: 1px solid #2ecc40;
+  padding: 4px 7px;
+  border: 1px solid #d1d5db;
+  border-radius: 3px;
+  font-size: 0.98rem;
+  background: #fff;
+  transition: border 0.2s;
+}
+
+.notion-input:focus {
+  border-color: #4f8cff;
+  outline: none;
+}
+
+.add-row, .add-col, .save-btn, .cancel-btn, .rebuild-btn {
+  background: #f3f4f6;
+  color: #222;
+  border: 1px solid #d1d5db;
  border-radius: 4px;
-  padding: 0.2em 0.4em;
-}
-.user-table-header {
-  margin-bottom: 1.2em;
-  padding: 1em 1.2em 0.5em 1.2em;
-  background: #f8f9fa;
-  border-radius: 10px 10px 0 0;
-  border-bottom: 1px solid #ececec;
-}
-.user-table-header h2 {
-  margin: 0 0 0.2em 0;
-  font-size: 1.3em;
-  font-weight: 700;
-}
-.table-desc {
-  color: #888;
-  font-size: 1em;
-}
-.modal-backdrop {
-  position: fixed;
-  top: 0; left: 0; right: 0; bottom: 0;
-  background: rgba(0,0,0,0.18);
-  z-index: 1000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.modal {
-  background: #fff;
-  border-radius: 12px;
-  box-shadow: 0 2px 16px rgba(0,0,0,0.13);
-  padding: 2em 2em 1.5em 2em;
-  min-width: 320px;
-  max-width: 95vw;
-}
-.add-col-modal label {
-  font-weight: 500;
-  margin-top: 0.7em;
-  display: block;
-}
-.add-col-modal input,
-.add-col-modal select {
-  width: 100%;
-  border: 1px solid #ececec;
-  border-radius: 7px;
-  padding: 0.5em 0.8em;
-  font-size: 1em;
-  background: #fafbfc;
-  margin-bottom: 0.7em;
-}
-.tags-multiselect {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5em 1.2em;
-  margin-bottom: 1em;
-}
-.tag-option {
-  display: flex;
-  align-items: center;
-  gap: 0.3em;
-}
-.save-btn {
-  background: #2ecc40;
-  color: #fff;
-  border: none;
-  border-radius: 8px;
-  padding: 0.5em 1.2em;
-  font-weight: 600;
+  padding: 5px 12px;
+  font-size: 0.98rem;
  cursor: pointer;
-  margin-right: 0.7em;
-  transition: background 0.2s;
+  transition: background 0.18s, border 0.18s;
+  margin: 0 2px;
 }
-.save-btn:hover {
-  background: #27ae38;
+
+.add-row:hover, .add-col:hover, .save-btn:hover, .cancel-btn:hover, .rebuild-btn:hover {
+  background: #e5e7eb;
+  border-color: #b6c6e6;
 }
-.cancel-btn {
-  background: #eaeaea;
-  color: #333;
-  border: none;
-  border-radius: 8px;
-  padding: 0.5em 1.2em;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background 0.2s;
-}
-.cancel-btn:hover {
-  background: #d5d5d5;
-}
-.th-col {
-  position: relative;
-}
-.delete-col-btn {
-  position: absolute;
-  top: 6px;
-  right: 6px;
+
+.col-menu, .row-menu {
  background: none;
  border: none;
-  color: #ff4d4f;
-  font-size: 1.1em;
+  font-size: 1.1rem;
  cursor: pointer;
-  opacity: 0;
-  transition: opacity 0.2s;
+  color: #6b7280;
+  padding: 2px 6px;
+  border-radius: 3px;
+  transition: background 0.15s;
 }
-.th-col:hover .delete-col-btn {
-  opacity: 1;
-}
-.delete-row-btn {
-  background: none;
-  border: none;
-  color: #ff4d4f;
-  font-size: 1.1em;
-  cursor: pointer;
-  opacity: 0;
-  transition: opacity 0.2s;
-}
-tr:hover .delete-row-btn {
-  opacity: 1;
+
+.col-menu:hover, .row-menu:hover {
+  background: #e5e7eb;
+  color: #1d4ed8;
 }
+
 .context-menu {
+  position: absolute;
+  z-index: 10;
+  min-width: 120px;
  background: #fff;
-  border: 1px solid #ececec;
-  border-radius: 8px;
-  box-shadow: 0 2px 12px rgba(0,0,0,0.13);
-  min-width: 150px;
-  padding: 0.3em 0.2em;
+  border: 1px solid #e5e7eb;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
+  padding: 4px 0;
  display: flex;
  flex-direction: column;
-  position: fixed;
-  z-index: 2001;
+  gap: 0;
 }
+
 .menu-item {
  background: none;
  border: none;
  text-align: left;
-  padding: 0.6em 1.1em;
-  font-size: 1em;
+  padding: 7px 14px;
+  font-size: 0.98rem;
  color: #222;
+  border-radius: 2px;
  cursor: pointer;
-  border-radius: 6px;
-  transition: background 0.18s;
+  transition: background 0.13s;
 }
+
 .menu-item:hover {
-  background: #f2f8f4;
+  background: #f5f7fa;
 }
+
 .menu-item.danger {
-  color: #ff4d4f;
+  color: #ef4444;
 }
+
+.menu-item.danger:hover {
+  background: #fee2e2;
+}
+
 .menu-overlay {
  position: fixed;
-  top: 0; left: 0; right: 0; bottom: 0;
-  z-index: 1999;
+  inset: 0;
+  z-index: 5;
+  background: transparent;
 }
-.rebuild-btn {
-  margin-top: 1em;
-  background: #2ecc40;
-  color: #fff;
-  border: none;
-  border-radius: 6px;
-  padding: 0.5rem 1.5rem;
-  cursor: pointer;
-  font-size: 1rem;
-  transition: background 0.2s;
-}
-.rebuild-btn:disabled {
-  background: #b2e6c2;
-  color: #fff;
-  cursor: not-allowed;
-}
-.rebuild-status {
-  margin-left: 1em;
-  font-weight: 500;
-}
-.rebuild-status.success {
-  color: #2ecc40;
-}
-.rebuild-status.error {
-  color: #ff4d4f;
-}
-.table-filters-el {
+
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.10);
+  z-index: 100;
  display: flex;
-  gap: 1.2em;
  align-items: center;
-  margin-bottom: 1.2em;
+  justify-content: center;
 }
-</style> 
+
+.modal {
+  background: #fff;
+  border-radius: 6px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
+  padding: 18px 16px 14px 16px;
+  min-width: 320px;
+  max-width: 98vw;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.modal h4 {
+  margin: 0 0 6px 0;
+  font-size: 1.08rem;
+  font-weight: 600;
+}
+
+.modal label {
+  font-size: 0.98rem;
+  color: #374151;
+  margin-bottom: 1px;
+}
+
+.modal-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.notion-table td:empty::after {
+  content: '—';
+  color: #b0b0b0;
+  font-style: italic;
+}
+
+@media (max-width: 700px) {
+  .notion-table-wrapper, .table-filters-el {
+    padding: 4px 1vw;
+    max-width: 100vw;
+  }
+  .modal {
+    min-width: 90vw;
+    padding: 10px 2vw;
+  }
+  .notion-table th, .notion-table td {
+    padding: 4px 2px;
+    font-size: 0.95rem;
+  }
+}
+</style>
--- a/frontend/src/components/tables/UserTablesList.vue
+++ b/frontend/src/components/tables/UserTablesList.vue
@@ -6,7 +6,7 @@
    <ul class="tables-list-simple">
      <!-- Системная таблица tags -->
      <li>
-        <button class="table-link" @click="goToTagsTable">Теги (tags)</button>
+        <!-- <button class="table-link" @click="goToTagsTable">Теги (tags)</button> -->
      </li>
      <!-- Пользовательские таблицы -->
      <li v-for="table in tables" :key="table.id">
@@ -40,9 +40,6 @@ function selectTable(table) {
 function createTable() {
  router.push({ name: 'create-table' });
 }
-function goToTagsTable() {
-  router.push({ name: 'tags-table-view' });
-}
 </script>

 <style scoped>
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -132,11 +132,6 @@ const routes = [
    component: () => import('../views/tables/DeleteTableView.vue'),
    props: true
  },
-  {
-    path: '/tables/tags',
-    name: 'tags-table-view',
-    component: () => import('../views/tables/TagsTableViewPage.vue')
-  },
  {
    path: '/contacts/:id',
    name: 'contact-details',
--- a/frontend/src/services/contactsService.js
+++ b/frontend/src/services/contactsService.js
@@ -36,8 +36,24 @@ export default {
  async unblockContact(id) {
    const res = await api.patch(`/users/${id}/unblock`);
    return res.data;
+  },
+  // --- Работа с тегами пользователя ---
+  async addTagsToContact(contactId, tagIds) {
+    // PATCH /users/:id/tags { tags: [...] }
+    const res = await api.patch(`/users/${contactId}/tags`, { tags: tagIds });
+    return res.data;
+  },
+  async getContactTags(contactId) {
+    // GET /users/:id/tags
+    const res = await api.get(`/users/${contactId}/tags`);
+    return res.data.tags || [];
+  },
+  async removeTagFromContact(contactId, tagId) {
+    // DELETE /users/:id/tags/:tagId
+    const res = await api.delete(`/users/${contactId}/tags/${tagId}`);
+    return res.data;
  }
-}; 
+};

 export async function getContacts() {
  const res = await fetch('/api/users');
--- a/frontend/src/services/tablesService.js
+++ b/frontend/src/services/tablesService.js
@@ -54,11 +54,14 @@ export default {
      throw error;
    }
  },
-  async getFilteredRows(tableId, { product = '', tags = [] } = {}) {
+  async getFilteredRows(tableId, { product = '' } = {}) {
    const params = new URLSearchParams();
    if (product) params.append('product', product);
-    if (tags.length) params.append('tags', tags.join(','));
    const res = await api.get(`/tables/${tableId}/rows?${params.toString()}`);
    return res.data;
+  },
+  async rebuildIndex(tableId) {
+    const res = await api.post(`/tables/${tableId}/rebuild-index`);
+    return res.data;
  }
 }; 
--- a/frontend/src/views/contacts/ContactDetailsView.vue
+++ b/frontend/src/views/contacts/ContactDetailsView.vue
@@ -144,6 +144,7 @@ import contactsService from '../../services/contactsService.js';
 import messagesService from '../../services/messagesService.js';
 import { useAuthContext } from '@/composables/useAuth';
 import { ElMessageBox } from 'element-plus';
+import tablesService from '../../services/tablesService';

 const route = useRoute();
 const router = useRouter();
@@ -168,6 +169,59 @@ const { isAdmin } = useAuthContext();
 const isAiLoading = ref(false);
 const conversationId = ref(null);

+// id таблицы тегов (будет найден или создан)
+const tagsTableId = ref(null);
+
+async function ensureTagsTable() {
+  // Получаем все пользовательские таблицы
+  const tables = await tablesService.getTables();
+  let tagsTable = tables.find(t => t.name === 'Теги клиентов');
+  if (!tagsTable) {
+    // Если таблицы нет — создаём
+    tagsTable = await tablesService.createTable({
+      name: 'Теги клиентов',
+      description: 'Справочник тегов для контактов',
+      isRagSourceId: 2 // не источник для RAG по умолчанию
+    });
+    // Добавляем столбцы
+    await tablesService.addColumn(tagsTable.id, { name: 'Название', type: 'text' });
+    await tablesService.addColumn(tagsTable.id, { name: 'Описание', type: 'text' });
+  } else {
+    // Проверяем, есть ли нужные столбцы, если таблица уже была создана
+    const table = await tablesService.getTable(tagsTable.id);
+    const hasName = table.columns.some(col => col.name === 'Название');
+    const hasDesc = table.columns.some(col => col.name === 'Описание');
+    if (!hasName) await tablesService.addColumn(tagsTable.id, { name: 'Название', type: 'text' });
+    if (!hasDesc) await tablesService.addColumn(tagsTable.id, { name: 'Описание', type: 'text' });
+  }
+  tagsTableId.value = tagsTable.id;
+  return tagsTable.id;
+}
+
+async function loadAllTags() {
+  // Убедимся, что таблица тегов есть
+  const tableId = await ensureTagsTable();
+  // Загружаем все строки из таблицы тегов
+  const table = await tablesService.getTable(tableId);
+  // Ожидаем, что первый столбец — название тега, второй — описание (если есть)
+  const nameCol = table.columns[0];
+  const descCol = table.columns[1];
+  allTags.value = table.rows.map(row => {
+    const nameCell = table.cellValues.find(c => c.row_id === row.id && c.column_id === nameCol.id);
+    const descCell = descCol ? table.cellValues.find(c => c.row_id === row.id && c.column_id === descCol.id) : null;
+    return {
+      id: row.id,
+      name: nameCell ? nameCell.value : '',
+      description: descCell ? descCell.value : ''
+    };
+  });
+}
+
+function openTagModal() {
+  showTagModal.value = true;
+  loadAllTags();
+}
+
 function toggleSidebar() {
  isSidebarOpen.value = !isSidebarOpen.value;
 }
@@ -270,58 +324,6 @@ async function loadMessages() {
  }
 }

-async function loadUserTags() {
-  if (!contact.value) return;
-  const res = await fetch(`/api/users/${contact.value.id}/tags`);
-  userTags.value = await res.json();
-  selectedTags.value = userTags.value.map(t => t.id);
-}
-
-async function openTagModal() {
-  await fetch('/api/tags/init', { method: 'POST' })
-  const res = await fetch('/api/tags')
-  allTags.value = await res.json()
-  await loadUserTags()
-  showTagModal.value = true
-}
-
-async function createTag() {
-  const res = await fetch('/api/tags', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ name: newTagName.value, description: newTagDescription.value })
-  });
-  const newTag = await res.json();
-  await fetch(`/api/users/${contact.value.id}/tags`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ tag_id: newTag.id })
-  });
-  const tagsRes = await fetch('/api/tags');
-  allTags.value = await tagsRes.json();
-  await loadUserTags();
-  newTagName.value = '';
-  newTagDescription.value = '';
-}
-
-async function addTagsToUser() {
-  for (const tagId of selectedTags.value) {
-    await fetch(`/api/users/${contact.value.id}/tags`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ tag_id: tagId })
-    })
-  }
-  await loadUserTags()
-}
-
-async function removeUserTag(tagId) {
-  await fetch(`/api/users/${contact.value.id}/tags/${tagId}`, {
-    method: 'DELETE'
-  });
-  await loadUserTags();
-}
-
 async function reloadContact() {
  isLoading.value = true;
  try {
@@ -454,15 +456,99 @@ async function unblockUser() {
  }
 }

+// --- Теги ---
+async function createTag() {
+  if (!newTagName.value) return;
+  const tableId = await ensureTagsTable();
+  const table = await tablesService.getTable(tableId);
+  const nameCol = table.columns[0];
+  const descCol = table.columns[1];
+  // 1. Создаём строку
+  const newRow = await tablesService.addRow(tableId);
+  console.log('DEBUG newRow:', newRow);
+  if (!newRow || !newRow.id) {
+    console.error('Ошибка: не удалось получить id новой строки', newRow);
+    alert('Ошибка: не удалось получить id новой строки. См. консоль.');
+    return;
+  }
+  const newRowId = newRow.id;
+  // 2. Сохраняем имя
+  await tablesService.saveCell({
+    table_id: tableId,
+    row_id: newRowId,
+    column_id: nameCol.id,
+    value: newTagName.value
+  });
+  // 3. Сохраняем описание (если есть столбец)
+  if (descCol && newTagDescription.value) {
+    await tablesService.saveCell({
+      table_id: tableId,
+      row_id: newRowId,
+      column_id: descCol.id,
+      value: newTagDescription.value
+    });
+  }
+  // 4. Обновляем список тегов
+  await loadAllTags();
+  // 5. Автоматически выбираем новый тег для пользователя
+  selectedTags.value = [...selectedTags.value, newRowId];
+  await addTagsToUser();
+  // 6. Очищаем поля
+  newTagName.value = '';
+  newTagDescription.value = '';
+}
+
+async function loadUserTags() {
+  if (!contact.value || !contact.value.id) {
+    userTags.value = [];
+    return;
+  }
+  // Получаем id тегов пользователя
+  const tagIds = await contactsService.getContactTags(contact.value.id);
+  if (!Array.isArray(tagIds) || tagIds.length === 0) {
+    userTags.value = [];
+    return;
+  }
+  // Загружаем справочник тегов
+  await loadAllTags();
+  // Сопоставляем id с объектами тегов
+  userTags.value = allTags.value.filter(tag => tagIds.includes(tag.id));
+}
+
+// После добавления/удаления тегов всегда обновляем userTags
+async function addTagsToUser() {
+  if (!contact.value || !contact.value.id) return;
+  if (!selectedTags.value || selectedTags.value.length === 0) return;
+  try {
+    await contactsService.addTagsToContact(contact.value.id, selectedTags.value);
+    await loadUserTags();
+    showTagModal.value = false;
+    ElMessageBox.alert('Теги успешно добавлены.', 'Успех', { type: 'success' });
+  } catch (e) {
+    ElMessageBox.alert('Ошибка добавления тегов: ' + (e?.response?.data?.error || e?.message || e), 'Ошибка', { type: 'error' });
+  }
+}
+
+async function removeUserTag(tagId) {
+  if (!contact.value || !contact.value.id) return;
+  try {
+    await contactsService.removeTagFromContact(contact.value.id, tagId);
+    await loadUserTags();
+    ElMessageBox.alert('Тег успешно удален.', 'Успех', { type: 'success' });
+  } catch (e) {
+    ElMessageBox.alert('Ошибка удаления тега: ' + (e?.response?.data?.error || e?.message || e), 'Ошибка', { type: 'error' });
+  }
+}
+
 onMounted(async () => {
  await reloadContact();
-  await loadMessages();
  await loadUserTags();
+  await loadMessages();
 });
 watch(userId, async () => {
  await reloadContact();
-  await loadMessages();
  await loadUserTags();
+  await loadMessages();
 });
 </script>

--- a/frontend/src/views/settings/AI/AiAssistantSettings.vue
+++ b/frontend/src/views/settings/AI/AiAssistantSettings.vue
@@ -7,6 +7,43 @@
        <form @submit.prevent="saveSettings">
          <label>Системный промт</label>
          <textarea v-model="settings.system_prompt" rows="3" />
+          <!-- Блок плейсхолдеров -->
+          <div class="placeholders-block">
+            <h4>Плейсхолдеры пользовательских таблиц</h4>
+            <div v-if="placeholders.length === 0" class="empty-placeholder">Нет пользовательских плейсхолдеров</div>
+            <table v-else class="placeholders-table">
+              <thead>
+                <tr>
+                  <th>Плейсхолдер</th>
+                  <th>Столбец</th>
+                  <th>Таблица</th>
+                  <th></th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="ph in placeholders" :key="ph.column_id">
+                  <td><code>{ {{ ph.placeholder }} }</code></td>
+                  <td>{{ ph.column_name }}</td>
+                  <td>{{ ph.table_name }}</td>
+                  <td><button type="button" @click="openEditPlaceholder(ph)">Редактировать</button></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <!-- Модалка редактирования плейсхолдера -->
+          <div v-if="editingPlaceholder" class="modal-bg">
+            <div class="modal">
+              <h4>Редактировать плейсхолдер</h4>
+              <div><b>Таблица:</b> {{ editingPlaceholder.table_name }}</div>
+              <div><b>Столбец:</b> {{ editingPlaceholder.column_name }}</div>
+              <label>Плейсхолдер</label>
+              <input v-model="editingPlaceholderValue" />
+              <div class="actions">
+                <button type="button" @click="savePlaceholderEdit">Сохранить</button>
+                <button type="button" @click="closeEditPlaceholder">Отмена</button>
+              </div>
+            </div>
+          </div>
          <label>LLM-модель</label>
          <select v-if="llmModels.length" v-model="settings.model">
            <option v-for="m in llmModels" :key="m.id" :value="m.id">{{ m.id }} ({{ m.provider }})</option>
@@ -86,6 +123,10 @@ const filteredEmbeddingModels = computed(() => {
  if (!selectedLLM.value) return embeddingModels.value;
  return embeddingModels.value.filter(m => m.provider === selectedLLM.value.provider);
 });
+const placeholders = ref([]);
+const editingPlaceholder = ref(null);
+const editingPlaceholderValue = ref('');
+
 async function loadUserTables() {
  const { data } = await axios.get('/tables');
  userTables.value = Array.isArray(data) ? data : [];
@@ -116,6 +157,24 @@ async function loadEmbeddingModels() {
  const { data } = await axios.get('/settings/embedding-models');
  embeddingModels.value = data.models || [];
 }
+async function loadPlaceholders() {
+  const { data } = await axios.get('/tables/placeholders/all');
+  placeholders.value = Array.isArray(data) ? data : [];
+}
+function openEditPlaceholder(ph) {
+  editingPlaceholder.value = { ...ph };
+  editingPlaceholderValue.value = ph.placeholder;
+}
+function closeEditPlaceholder() {
+  editingPlaceholder.value = null;
+  editingPlaceholderValue.value = '';
+}
+async function savePlaceholderEdit() {
+  if (!editingPlaceholder.value) return;
+  await axios.patch(`/tables/column/${editingPlaceholder.value.column_id}`, { placeholder: editingPlaceholderValue.value });
+  await loadPlaceholders();
+  closeEditPlaceholder();
+}
 onMounted(() => {
  loadSettings();
  loadUserTables();
@@ -124,6 +183,7 @@ onMounted(() => {
  loadEmailList();
  loadLLMModels();
  loadEmbeddingModels();
+  loadPlaceholders();
 });
 async function saveSettings() {
  await axios.put('/settings/ai-assistant', settings.value);
@@ -275,4 +335,30 @@ button[type="button"] {
 .rag-table-link:hover {
  color: #27ae38;
 }
+.placeholders-block {
+  margin: 1.5em 0 2em 0;
+  background: #f8f9fa;
+  border-radius: 8px;
+  padding: 1em 1.5em;
+}
+.placeholders-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 0.5em;
+  background: #fff;
+}
+.placeholders-table th, .placeholders-table td {
+  border: 1px solid #ececec;
+  padding: 0.5em 0.7em;
+  font-size: 1em;
+}
+.placeholders-table th {
+  background: #f7f7f7;
+  font-weight: 600;
+}
+.empty-placeholder {
+  color: #888;
+  font-size: 1em;
+  margin: 0.7em 0;
+}
 </style> 
--- a/frontend/src/views/tables/EditTableView.vue
+++ b/frontend/src/views/tables/EditTableView.vue
@@ -24,7 +24,7 @@
 import { ref, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import BaseLayout from '../../components/BaseLayout.vue';
-import axios from 'axios';
+import tablesService from '@/services/tablesService';
 const $route = useRoute();
 const router = useRouter();
 const name = ref('');
@@ -32,14 +32,14 @@ const description = ref('');
 const isRagSourceId = ref(2);

 onMounted(async () => {
-      const { data } = await axios.get(`/tables/${$route.params.id}`);
+  const data = await tablesService.getTable($route.params.id);
  name.value = data.name;
  description.value = data.description;
  isRagSourceId.value = data.is_rag_source_id || 2;
 });

 async function save() {
-  await axios.patch(`/api/tables/${$route.params.id}`, {
+  await tablesService.updateTable($route.params.id, {
    name: name.value,
    description: description.value,
    isRagSourceId: isRagSourceId.value
--- a/frontend/src/views/tables/TablesListView.vue
+++ b/frontend/src/views/tables/TablesListView.vue
@@ -14,7 +14,6 @@ import BaseLayout from '../../components/BaseLayout.vue';
 import UserTablesList from '../../components/tables/UserTablesList.vue';
 import { useRouter } from 'vue-router';
 import { useAuthContext } from '@/composables/useAuth';
-// import TagsTableView from '../../components/tables/TagsTableView.vue'; // больше не используется
 const router = useRouter();
 const { isAdmin } = useAuthContext();
 function goBack() {
--- a/frontend/src/views/tables/TagsTableViewPage.vue
+++ b/frontend/src/views/tables/TagsTableViewPage.vue
@@ -1,10 +0,0 @@
-<template>
-  <BaseLayout>
-    <TagsTableView />
-  </BaseLayout>
-</template>
- 
-<script setup>
-import BaseLayout from '../../components/BaseLayout.vue';
-import TagsTableView from '../../components/tables/TagsTableView.vue';
-</script> 
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -47,6 +47,15 @@ export default defineConfig({
        secure: false,
        credentials: true,
        rewrite: (path) => path,
+        ws: true,
+      },
+      '/ws': {
+        target: 'ws://dapp-backend:8000',
+        ws: true,
+        changeOrigin: true,
+        secure: false,
+        credentials: true,
+        rewrite: (path) => path,
      },
    },
    watch: {