@codelic/chat-components NPM

Name

@codelic/chat-components(CodelicMagneterChat)

Overview

fairebase,magnetarと併用を想定したチャットコンポーネントです。動的なチャット機能をサポートします. 下記の二種類準備しています。

チャット(QAモード搭載)

シンプルなチャットモードです。 QAモードに切り替えを行うことで作成された質問の制御を行います。

ルーム選択可能チャット

ルームの選択を含めたチャットです。1コンポーネントで構成されているため1ページ完結型です。

Description

会社毎のチャット作成例高さ幅ともにwrapして使用してください。 GIF Alt Text

◼︎共通prosp(CMCRoom,CMCSelectRooms) ・magnetarInstance magnetarのインスタンス

type: Object as PropType<MagnetarInstance>,

・userData 本人の情報

type: Object as PropType<UserData>,

・firstModelSpinner 初回スピナ-を使用するかどうか

type: Boolean,

・firstLoadingCount 初回読み込みを最初に何件するか

type: Boolean,

・firstLoadingCount ・メッセージの初回読み込み数

type: Number,

・addLoadingCount メッセージの追加読み込み数

type: Number,

・authCounterUp 個人の判定をする際にAuthの文字数と同一かどうかを判断 ※今後仕様を変更予定

type: Number,

・authCounterDown 個人の判定をする際にAuthの文字数と同一かどうかを判断 ※今後仕様を変更予定

type: Number,

◼︎CMCRoom ・destinationIinformation 送信先情報

type: Object as PropType<Group[] | Independent>,

・chatRoomId 固定したチャットルームが存在している場合そのIDを渡す。もしない場合は、送信者の情報を元に自動生成を行う。

type: String,

・header ヘッダーの有無簡易CSSでデザインを変更してください。

 type: Object as PropType<{ [key: string]: string }>,

・headerImg headerのイメージアイコン

  type: String,

・title チャットルームが作成された時のタイトル

  type: String,

・height 全体の高さ（アプリ想定のためdefaultで100Vh）

  type: String,

・qAModeOptions QAモードを仕様する場合に必要なOP

{
  /** 最後の質問があるか */
  lastQuestion: boolean
  /** 現在のモード */
  isQAMode: boolean
  /** 対象の質問 */
  question: ChatRoomsMessages
  /** 対象の回答 */
  answer: ChatRoomsMessages
  /** 削除の状態
   * - 一個戻る場合の削除 'back'
   * - 全て削除する場合の削除 'all'
   * - 何もない場合 ''
   */
  deleteFlag: 'back' | 'all' | ''
}

◼︎CMCSelectRooms prosp

・deleteColor 削除ボタンの色

type: Strign,

・isAutoCreate アカウントの自動登録・現在は追加された【destinationIinformation】【userData】を元にCMCのDB情報を生成する

type: Strign,

import {
  CMCSelectRooms,
} from '@codelic/chat-components'
  <div style="height: 100vh">
    <CMCRoom
      :key="chatRoomId"
      :magnetarInstance="magnetar"
      :dbFirebaseStorage="storage"
      :chatRoomId="chatRoomId"
      :sender="userId"
    />
  </div>

ルーム選択＋ルーム作成機能()

const createDbChatRoom = async (
  selectData: {
    id: string
    name: string
  }[]

) => {
  try {
    //選択したグループをidを格納した配列に変換
    const selectedGroupIds = selectData.map((d) => d.id)
    // 選択したindexグループを取得
    // TODO:ここでグループじゃない場合の対応をしなければならない
    const selectedGroups = indexCompany.value.filter((group) =>
      selectedGroupIds.includes(group.id)
    )
    // 配列の[]だけ削除
    const titleCreate = (target: string) =>
      target.replace(/]/g, '').replace(/\[/g, '')
    const titleGroup = selectedGroups.map((user) => user.name).toLocaleString()
    const res = await openRoomCreateGroups(
      magnetar,
      titleCreate(titleGroup),
      window.userId,
      selectedGroups
    )
    if (res === 'success') {
      isClick.value = !isClick.value
    }
  } catch (error) {
    console.error(error)
  }
}
const indexCompany = ref<Group[]>([
  {
    kind: 'group',
    id: 'test_company1',
    name: 'テスト株式会社1',
    memberIds: [
      { id: 'test1', name: 'テスト太郎' },
      { id: 'test2', name: 'テスト二郎' },
      { id: 'test3', name: 'テスト三郎' },
    ],
  },
  {
    kind: 'group',
    id: 'test_company2',
    name: 'テスト株式会社2',
    memberIds: [
      { id: 'test4', name: 'テスター4' },
      { id: 'test5', name: 'テスター5' },
      { id: 'test6', name: 'テスター6' },
      { id: 'test7', name: 'テスター7' },
    ],
  },
])

<button class="test" @click="isClick = !isClick">{{ '新規作成' }}</button>
<div style="height: 50vh; width: 100vw; overflow: scroll">
  <CMCSelectRooms
    :magnetar-instance="magnetar"
    :dbFirebaseStorage="storage"
    :userData="userData"
    :groupData="companyData"
    deleteColor="#3CD291"
  />
</div>
<div v-if="isClick">
  <button @click="createDbChatRoom(selectUsersData)" class="test">
    {{ 'トークルーム追加' }}
  </button>
  <CMCSelectUser
    :selectedOption="indexCompany"
    v-model:modelValue="selectUsersData"
    :isMulch="false"
    selectColor="#3CD291"
  ></CMCSelectUser>
</div>

ルーム選択＋ルーム作成機能(User情報)

const indexUser =
  ref <
  Independent >
  {
    kind: 'independent',
    memberIds: [
      { id: 'test1', name: 'テスト太郎' },
      { id: 'test2', name: 'テスト二郎' },
      { id: 'test3', name: 'テスト三郎' },
    ],
  }

DB

autoCreate
[User]:{id:string,name:string}
commonField:createdAt: Date
           :updatedAt: Date
           :createdBy: Date
           :updatedBy: Date
+-------------------------------------------+ +----------------------------------+
| ChatUser                                  | | ChatRoomsOverview                |
+-------------------------------------------+ +----------------------------------+
| namae: string                             | | unreadMessageDic:                |
| isPublic: boolean                         | | {                                |
| avatarUrl: string                         | |     [room:id]:                   |
| permission: enum                          | |         {                        |
| notificationSetting: Map<string, boolean> | |         unreadCount:number       |
| payload: payload: Map<string, boolean>     | |         roomId:string            |
+-------------------------------------------+ |         title:string             |
                                              |         lastMessageAt:Timestamp  |
                                              |         iconColor:string         |
                                              |         iconUrl:string           |
                                              |         }                        |
                                              | }                                |
                                              +----------------------------------+
+-------------------+
|   UserGroups      |
+-------------------+
| id: string        |
| name: string      |
| members: [User]   |
+-------------------+

+-------------------------+
| ChatRooms               |
+-------------------------+
| id: string              |
| name: string            |
| isReadFunction: boolean |
| isReadFunction: boolean |
| members: [User]         |
+-------------------------+
         |
         |
         v
 +---------------------------------------------+
 | ChatRoom/{roomId}/                          |
 |  messages                                   |
 +---------------------------------------------+
 | chatMessages: string                        |
 | body: string                                |
 | fileSrc: string                             |
 | fileType: string                            |
 | user: string                                |
 | replyId: string                             |
 | mentionIds: string[]                        |
 | hidden: boolean                             |
 | editHistory: string[]                       |
 | selecterId: string                          |
 | userSelectedId: string                      |
 | replyRequiredDataType: ’’ |’file’ | ‘text’  |
 | [key: string]: any                          |
 +---------------------------------------------+

 +-----------------------------------------+
 | InquiryQuestion                           |
 +-----------------------------------------+
 | selectedChoice: Map<string, choiceData> |
 | body: string                            |
 | isRoot: boolean                         |
 | isGoal: boolean                         |
 | answerId: string                        |
 +-----------------------------------------+

+-------------------+
|     MAnswer       |
+-------------------+
| id: string        |
| answer: string    |
| path: string      |
+-------------------+

DEMO

Requirement

magnetar ^0.13.4
@codelic/datagen: ^1.0.7
firebase: ^10.1.0
@magnetarjs/core: ^0.16.3,
@magnetarjs/plugin-firestore: ^0.16.3,
@magnetarjs/plugin-vue3: ^0.16.3
vue: ^3.3.4

Installation

magnetar 0.13.4 以降推奨

npm i magnetar

firebase 9.20.0 以上推奨

npm install firebase

Usage

npm install @codelic/chat-component

修正等

git clone https://github.com/chat-component/~

Note

・magnetar 0.13.4 以降のバージョンのみ対応・streage についてdifinExposeで使用先から渡してください。・DBに記載されているコレクション自動生成されます。 ※User,Room,OverView ①ユーザーの初回コンポーネントが呼び出された時 ②ユーザーが任意にRoomを作成した場合 ※Message ①自身がチャットを送信した時 ②チャット相手がチャットを送信した場合