Чатбот ICQ-ға ұқсайтын

Сайттағы чатты ашамын. Түймені басамын, хабарлама жазамын. Жауап келеді. Тек бәрі бір мәтін жолағы сияқты көрінеді. Бот қайда, мен қаймын - тек сол жақтағы «IM» аватарынан ғана ажыратуға болады. Сәлем, 2003 жыл.

Реттеуге шештім. «React-та Framer Motion-мен нөлден қайта жазу» емес. Бірнеше сағатта акценттерді дұрыстап қою.

Не дұрыс емес еді

Проблемалар жетерлік:

• User bubble мен bot bubble визуалды бірдей. Екеуі де сұр, екеуі де бір өлшемде, екеуінде де аватарлар. Айырмашылық тек туралауда, ол стильдер қолданылған кезде ғана жұмыс істейтін
• Оң жақтағы пайдаланушы аватары - шеңбердегі SVG-адам. Артық шу. Оң жақ туралау мен акцент түсі «бұл мен жаздым» деп айтып тұр
• Input өрісі мен жіберу түймесі бөлек тұрды. Арасында gap бар екі тәуелсіз элемент. Оқулықтан алынған форма сияқты
• Бот нөмірленген тізімдерді көрсете алмайтын. renderMarkdown буллеттер мен bold өңдейтін, бірақ 1. item қарапайым абзацқа айналатын

Жеті өзгеріс

Көпіршіктер. Пайдаланушы хабарлары жартылай мөлдір фон алды - көзді қарықтыратын ақтың орнына жұмсақ акцент. Бот хабарлары визуалды якорь ретінде жіңішке сол жақ жиек алды. Екеуінің де енін 75%-бен шектедім, бүкіл экранға жайылмауы үшін.

Бот аватары. Сәл үлкейттім, жиек қостым, хабарламаның жоғарғы жағына бекіттім. «IM» ұзын жауаптың астында қалқып жүруден қалды.

Пайдаланушы аватары. Жойдым. Толығымен. Оң жақ туралау мен акцент түсі «бұл мен жаздым» деп айтып тұр. Тазарақ, тыныштау, анығырақ.

Енгізу өрісі. Мәтін өрісі мен түймені бір визуалды блокқа біріктірдім. Ортақ жиек, ортақ дөңгелектеу. Фокуста бүкіл орауыш жарықтанады. Бөлгішті жоғарыдан жеңіл көлеңкемен алмастырдым.

Нөмірленген тізімдер. Бот енді тек буллеттер емес, нөмірленген тізімдермен де жауап бере алады.

Аралықтар. Соңғы хабарлама енгізу өрісіне жабыспайтын болды.

Қолжетімділік. Жіберу формасы скринридерлер үшін белгі алды.

Бәрін бұзған баг

Деплой жасадым. Ашып қарадым. Ештеңе өзгерген жоқ. Мүлдем ештеңе. Сол сұр тіктөртбұрыштар, сол мәтін ағыны. Бір CSS-ереже де қолданылмағандай.

Себебі шынымен қолданылмаған.

Astro стильдерді әдепкі бойынша локальды етеді - олар тек рендер кезінде бар болған элементтерге қолданылады. Ал чат хабарлалары JavaScript арқылы динамикалық жасалады. Astro оларды білмейді, стильдер оларға жетпейді. Тыныштық.

Түзету - бір сөз: <style is:global>. Селекторлар жеткілікті нақты, стильдер ағыны жоқ.

Бұл баг чатботта бірінші күннен бері тұрған. Разметкадағы Tailwind-кластар жұмыс істейтін (олар глобальды), бірақ динамикалық элементтерге арналған CSS-ережелер үнсіз елемейтін. Чат мәтін жолағына ұқсайтын себебі жаман дизайнда емес - дизайн сөзбе-сөз жоқ болғандықтан. Браузер элементтерді бір де бір кастомды ережесіз көрсететін.

oklch - rgb орнына

Неліктен oklch? Ескі rgba форматы - төрт сан, мәнін тек авторы түсінеді. Қараңғы режимде мәндерді сезіммен болжауға тура келеді. oklch жарықтық, хрома мен мөлдірлікті бөледі. oklch(0.985 0 0 / 0.18) - «ақтай, түссіз, 18% көрінеді» деп оқылады. Екі режимде де түсінікті және болжамды.

Қауіпсіздік

innerHTML бар frontend кодына тиген сайын тексеру керек. Барлық өзгерістерді қарап шықтым:

• Markdown рендері арнайы таңбаларды өңдеуден бұрын экрандайды - HTML-инъекция мүмкін емес
• Пайдаланушы хабарлары мәтін ретінде қойылады, HTML емес
• Глобальды стильдер CSS-инъекция ашпайды - барлық мәндер тұрақты кодталған
• Нөмірленген тізімдер буллеттермен бірдей қауіпсіз тәсілмен парсыланады

Тесік жоқ. Тексердім.

Қорытынды

Екі коммит. Бір файл. Ақыры жұмыс істейтін CSS. Чатбот терминалдағы логқа ұқсаудан қалды, чатқа ұқсай бастады.

Ең қызық баг кодта емес. «Элемент бетте тұр - стильдер жетеді» деген болжамда. Astro-да жетеді. Бірақ тек рендер кезінде бар болған элементтерге. Қалғандарына рұқсат қағаз керек.