# Name

@codelic/chat-components(CodelicMagneterChat)

# Overview

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

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

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

> ルーム選択可能チャット

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

# Description

会社毎のチャット作成例
高さ幅ともにwrapして使用してください。
![GIF Alt Text](public/Videotogif.gif)

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

```ts
type: Object as PropType<MagnetarInstance>,
```

・userData
本人の情報

```ts
type: Object as PropType<UserData>,
```

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

```ts
type: Boolean,
```

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

```ts
type: Boolean,
```

<!-- ・modelSpinner
スピナ-用v-model（外部スピナーを使用する場合はこの値を共通化して使用してください）

```ts
type: Boolean,
``` -->

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

```ts
type: Number,
```

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

```ts
type: Number,
```

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

```ts
type: Number,
```

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

```ts
type: Number,
```

◼︎CMCRoom
・destinationIinformation
送信先情報

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

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

```ts
type: String,
```

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

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

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

```ts
  type: String,
```

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

```ts
  type: String,
```

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

```ts
  type: String,
```

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

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

◼︎CMCSelectRooms prosp

・deleteColor
削除ボタンの色

```ts
type: Strign,
```

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

```ts
type: Strign,
```

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

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

```js

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' },
    ],
  },
])

```

```html
<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情報)

```js
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 以降推奨

```bash
npm i magnetar
```

firebase 9.20.0 以上推奨

```bash
npm install firebase
```

# Usage

```bash
npm install @codelic/chat-component
```

修正等

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

# Note

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

# Author

Code-Daiki2170

# License

chat-component is Confidential.
