Chotto UI — набор компонентов для чатов на Vue3

Пытаясь подражать ^[1] слогу классика, можно сказать, что “все чаты в целом одинаковы, но каждый реализует что-то свое”.

так ли это? посмотрим.

TL, DR: далее рассказываю, что мы делаем свой UI набор компонентов для чата, даю ссылки и приглашаю присоединяться к проекту.

Что есть у каждого чата? Во-первых, участники диалога – это или живые собеседники – тет-а-тет, или в группе, или живой собеседник и ИИ-бот.

Во-вторых, для каждого человека в диалоге необходим интерфейс, в котором он сможет видеть свою переписку с собеседником, сможет отправлять и принимать сообщения.

В третьих, обычно обмен сообщениями происходит через какой-то сервер.

По большей части все чаты как раз различаются своей внутренней, даже можно сказать серверной частью, где в UI чата мы используем всего лишь проявления тех возможностей, что есть у месседж-сервера.

А в UI как раз используются одни и те же концепции, элементы, возможности.

И если ты занимаешься чатами, можно ли каждый раз не реализовывать все те же элементы, а брать готовый UI набор компонентов, и реализовывать необходимую тебе функциональность?

Так думали многие, и реализовывали свои библиотеки компонентов. Есть Chat UI Kit ^[2] от Sendbird и chat ui components ^[3] от Pubnub (перестали развивать) на React, Assistant UI ^[4], Rustic UI ^[5] для чатов с AI. У vue-advanced-chat ^[6] есть внутри компоненты для чата, но они не предполагают их отдельное использование.

Сhotto UI – набор компонент для реализации только UI чата, т.е. вся логика ^[7] чат-приложения на фронтенде и на бекенде абсолютно ваша, вы реализуете ее полностью. Вы решаете как будут взаимодейстовать браузер и сервер, какие данные и как передавать.

А вот UI можно реализовать из готового набора очень быстро. Как аналогия, мы берем какой-то фреймворк типа bootstrap-vue и просто реализуем таблицы, формы, не погружаясь на уровень css, html.

И так, что такое чат?

Это а) лента сообщений + б) поле ввода нового сообщения.

Простой пример – чат на сайте. вы можете общаться с оператором или скриптом, сто раз видели на сайтах.

Если добавить справа список контактов – то это уже некий простой мессенджер.

Если добавить в список контактов не только p2p чаты, но и групповые – то у вас уже почти аналог любого корпоративного мессенджера.

Добавив плюшек в виде отправки смайликов, отправки файлов, предпросмотра медиа, аватарок контактов – в целом, уже вполне годное средство общения.

Если у контактов будет несколько атрибутов, например, можно указать несколько номеров телефонов, и добавив каналы общения с контактами, например Whatsapp, Telegram, то можно реализовать омникальный центр обработки запросов клиентов.

А если добавите в список контактов чат с ботом – и вот уже в вашем приложении есть искусственный интеллект ^[8].

И не смотря на различия, сущности, с которыми мы работаем – сообщение, картинка, файл, лента сообщений, список контактов, список чатов – примерно одни и те же.

В репозитории в отдельной директории ^[9] сохранил скриншоты разных систем, чтобы можно было сравнивать различия, находит общее и улучшать функциональность компонент.

Работаем над Chotto UI для внутренних продуктов. пробуем, экспериментируем. принимаем советы, предложения, конструктивную критику.

• Репозиторий ^[10]

• Storybook ^[11]

• Документация ^[12]

• Примеры ^[13]

• телеграм-чат ^[14]

Буду крайне рад предложениям и советам по рефакторингу, реорганизации кода, чтобы сделать более функциональным, и удобным для разработки и использования.