BCC Chat UI

Installation

Vue Components

1. Add package to project

# npm
npm install @bcc-code/vue-bcc-chat-ui

2. Register component in the Vue App

import chat from "@bcc-code/vue-bcc-chat-ui";

const app = createApp(App);
app.use(chat, { environment: "prod", themeMode: "light" });

await chat.login("access-token")

3. Use component in Vue

<script lang="ts" setup>
import { BccChatMessageList } from '@bcc-code/vue-bcc-chat-ui';

const authToken = ref('....');
const chatUid = ref('my-chat-id');

</script>

<template>
   <div>
      <BccChatMessageList :chatUid="chatUid" />
   </div>
</template>

Styling

The component can by styled with the folowing styles

.bcc-chat-message-list {
  /* 1. Wrapper for Messages component */
  .cc-messages-wrapper {

    /* 1.1 Messages component */
    .cc-messages-wrapper__messages {
     
      /* 1.1.1 Wrapper for Messages List */
      .cc-messages-wrapper__messages-list {

        /* 1.1.1.1 Messages List header view */
        .cc__messagelist__headerview {
        }
        
        /* 1.1.1.2 Messages List messages */
        .cc-messagelist {
            .cc-list__wrapper {
              .cc-list__header {
              }
              .cc-list__list {
              }
            }
        }

        /* 1.1.1.3 Message List footer */
        .cc__messagelist__footerview {
        }
      }

      /* 1.1.2 Wrapper for Composer */
      .cc-messages-wrapper__composer {
      }

      /* 1.1.3 Wrapper for Live Reaction */
      .cc__messages__livereaction {
      }

    }

  }
}