Skip to content

DELETE_ICON_FIX.md

Latest commit

 

History

History
172 lines (119 loc) · 5.79 KB

DELETE_ICON_FIX.md

File metadata and controls

172 lines (119 loc) · 5.79 KB

🔧 Исправление иконки кнопки удаления чата

📋 Проблема

На скриншоте видно, что иконка кнопки удаления чата (🗑️) может отображаться некорректно или иметь проблемы с рендерингом в некоторых браузерах/ОС.

✅ Примененное решение

Вариант 1: Упрощённый Unicode (текущее решение)

# Убрана вариация селектора (variation selector)
st.button("🗑", ...)  # Вместо "🗑️"

Почему это работает:

  • 🗑️ состоит из двух символов: U+1F5D1 (корзина) + U+FE0F (variation selector)
  • Variation selector указывает браузеру использовать эмодзи-стиль
  • Не все браузеры корректно обрабатывают variation selector
  • 🗑 (только U+1F5D1) — более совместимый вариант

🔄 Альтернативные варианты (если проблема сохраняется)

Вариант 2: Текстовая иконка

st.button("✖", key=f"delete_btn_{session_id}", help="Удалить чат")
# Или
st.button("×", key=f"delete_btn_{session_id}", help="Удалить чат")

Вариант 3: Символ корзины из другого набора

st.button("🗑", key=f"delete_btn_{session_id}", help="Удалить чат")  # U+1F5D1
st.button("🗙", key=f"delete_btn_{session_id}", help="Удалить чат")  # U+1F5D9 (cancel)
st.button("⌫", key=f"delete_btn_{session_id}", help="Удалить чат")  # U+232B (backspace)

Вариант 4: HTML с Material Icons (требует подключения шрифта)

import streamlit.components.v1 as components

# В начале приложения
st.markdown("""
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
""", unsafe_allow_html=True)

# В кнопке
st.markdown("""
<button style="...">
    <i class="material-icons">delete</i>
</button>
""", unsafe_allow_html=True)

Вариант 5: SVG иконка (самый надёжный)

delete_icon = """
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
    <polyline points="3 6 5 6 21 6"></polyline>
    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
    <line x1="10" y1="11" x2="10" y2="17"></line>
    <line x1="14" y1="11" x2="14" y2="17"></line>
</svg>
"""
st.button(delete_icon, key=f"delete_btn_{session_id}", help="Удалить чат")

🧪 Тестирование

Проверьте текущее решение:

  1. Перезагрузите приложение
  2. Откройте sidebar
  3. Посмотрите на иконки удаления в списке чатов

Ожидаемый результат:

  • Иконка корзины отображается чётко
  • Нет "квадратиков" или других артефактов
  • Иконка видна на всех элементах списка

📊 Сравнение вариантов

Вариант Совместимость Визуал Сложность
🗑 (текущий) ⭐⭐⭐⭐ ⭐⭐⭐ ⭐
✖ или × ⭐⭐⭐⭐⭐ ⭐⭐ ⭐
🗙 ⭐⭐⭐ ⭐⭐⭐ ⭐
Material Icons ⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐
SVG ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐

🎯 Рекомендации

Если иконка всё ещё не отображается:

  1. Проверьте шрифт браузера

    • Некоторые шрифты не поддерживают эмодзи
    • Попробуйте другой браузер (Chrome, Firefox, Edge)

  2. Используйте простой символ

    st.button("✖", ...)  # Крестик — универсальный символ

  3. Добавьте текст рядом с иконкой (только для широкого sidebar)

    if sidebar_width > 300:
    st.button("🗑 Удалить", ...)
else:
    st.button("🗑", ...)

🔧 Быстрое исправление (если нужно)

Если текущее решение не помогло, замените строку 246 в app.py:

Вариант A: Крестик

"✖",  # Простой крестик — работает везде

Вариант B: Круг с крестиком

"⊗",  # Круг с крестиком

Вариант C: Минус в круге

"⊖",  # Минус в круге

📝 Применённое изменение

Файл: app.py
Строка: ~246
Было: "🗑️"
Стало: "🗑"

Причина: Убран variation selector (U+FE0F) для улучшения совместимости с различными браузерами и операционными системами.

✅ Итог

  • ✅ Изменён символ иконки удаления
  • ✅ Улучшена совместимость с браузерами
  • ✅ Сохранена функциональность
  • ✅ Подготовлены альтернативные варианты

Перезагрузите приложение и проверьте результат! 🚀