Chotto UI — набор компонентов для чатов на Vue3
- четверг, 24 апреля 2025 г. в 00:00:04
Пытаясь подражать слогу классика, можно сказать, что "все чаты в целом одинаковы, но каждый реализует что-то свое".
так ли это? посмотрим.
TL, DR: далее рассказываю, что мы делаем свой UI набор компонентов для чата, даю ссылки и приглашаю присоединяться к проекту.
Что есть у каждого чата? Во-первых, участники диалога - это или живые собеседники - тет-а-тет, или в группе, или живой собеседник и ИИ-бот.
Во-вторых, для каждого человека в диалоге необходим интерфейс, в котором он сможет видеть свою переписку с собеседником, сможет отправлять и принимать сообщения.
В третьих, обычно обмен сообщениями происходит через какой-то сервер.
По большей части все чаты как раз различаются своей внутренней, даже можно сказать серверной частью, где в UI чата мы используем всего лишь проявления тех возможностей, что есть у месседж-сервера.
А в UI как раз используются одни и те же концепции, элементы, возможности.
И если ты занимаешься чатами, можно ли каждый раз не реализовывать все те же элементы, а брать готовый UI набор компонентов, и реализовывать необходимую тебе функциональность?
Так думали многие, и реализовывали свои библиотеки компонентов. Есть Chat UI Kit от Sendbird и chat ui components от Pubnub (перестали развивать) на React, Assistant UI, Rustic UI для чатов с AI. У vue-advanced-chat есть внутри компоненты для чата, но они не предполагают их отдельное использование.
Сhotto UI - набор компонент для реализации только UI чата, т.е. вся логика чат-приложения на фронтенде и на бекенде абсолютно ваша, вы реализуете ее полностью. Вы решаете как будут взаимодейстовать браузер и сервер, какие данные и как передавать.
А вот UI можно реализовать из готового набора очень быстро. Как аналогия, мы берем какой-то фреймворк типа bootstrap-vue и просто реализуем таблицы, формы, не погружаясь на уровень css, html.
И так, что такое чат?
Это а) лента сообщений + б) поле ввода нового сообщения.
Простой пример - чат на сайте. вы можете общаться с оператором или скриптом, сто раз видели на сайтах.
Если добавить справа список контактов - то это уже некий простой мессенджер.
Если добавить в список контактов не только p2p чаты, но и групповые - то у вас уже почти аналог любого корпоративного мессенджера.
Добавив плюшек в виде отправки смайликов, отправки файлов, предпросмотра медиа, аватарок контактов - в целом, уже вполне годное средство общения.
Если у контактов будет несколько атрибутов, например, можно указать несколько номеров телефонов, и добавив каналы общения с контактами, например Whatsapp, Telegram, то можно реализовать омникальный центр обработки запросов клиентов.
А если добавите в список контактов чат с ботом - и вот уже в вашем приложении есть искусственный интеллект.
И не смотря на различия, сущности, с которыми мы работаем - сообщение, картинка, файл, лента сообщений, список контактов, список чатов - примерно одни и те же.
В репозитории в отдельной директории сохранил скриншоты разных систем, чтобы можно было сравнивать различия, находит общее и улучшать функциональность компонент.
Работаем над Chotto UI для внутренних продуктов. пробуем, экспериментируем. принимаем советы, предложения, конструктивную критику.
Буду крайне рад предложениям и советам по рефакторингу, реорганизации кода, чтобы сделать более функциональным, и удобным для разработки и использования.