@codelic/chat-components

Name

@codelic/chat-components(CodelicMagneterChat)

Overview

fairebase,magnetarと併用を想定したチャットコンポーネントです。 動的なチャット機能をサポートします.

Description

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

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
           :updateBy: Date
+-------------------------------------------+ +----------------------------------+
| ChatUser                                  | | ChatRoomsOverview                |
+-------------------------------------------+ +----------------------------------+
| namae: string                             | | unreadMessageDic:                |
| isPublic: boolean                         | | {                                |
| avatarUrl: string                         | |     [room:id]:                   |
| permission: enum                          | |         {                        |
| notificationSetting: Map<string, boolean> | |         unreadCount:number       |
| payload: payload: Record<string, any>     | |         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                          |
 +---------------------------------------------+

 +-----------------------------------------+
 | MQAChatSelect                           |
 +-----------------------------------------+
 | 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 についてはプレーンな Firebase を使用しています ・DBに記載されているコレクション自動生成されます。 ※User,Room,OverView ①ユーザーの初回コンポーネントが呼び出された時 ②ユーザーが任意にRoomを作成した場合 ※Message ①自身がチャットを送信した時 ②チャット相手がチャットを送信した場合

Author

Code-Daiki2170

License

chat-component is Confidential.