@codelic/chat-components
Advanced tools
@codelic/chat-components(CodelicMagneterChat)
fairebase,magnetarと併用を想定したチャットコンポーネントです。 動的なチャット機能をサポートします. 下記の二種類準備しています。
チャット(QAモード搭載)
シンプルなチャットモードです。 QAモードに切り替えを行うことで作成された質問の制御を行います。
ルーム選択可能チャット
ルームの選択を含めたチャットです。1コンポーネントで構成されているため1ページ完結型です。
会社毎のチャット作成例
高さ幅ともにwrapして使用してください。
◼︎共通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: 'テスト三郎' },
],
}
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 |
+-------------------+
magnetar 0.13.4 以降推奨
npm i magnetar
firebase 9.20.0 以上推奨
npm install firebase
npm install @codelic/chat-component
修正等
git clone https://github.com/chat-component/~
・magnetar 0.13.4 以降のバージョンのみ対応 ・streage についてdifinExposeで使用先から渡してください。 ・DBに記載されているコレクション自動生成されます。 ※User,Room,OverView ①ユーザーの初回コンポーネントが呼び出された時 ②ユーザーが任意にRoomを作成した場合 ※Message ①自身がチャットを送信した時 ②チャット相手がチャットを送信した場合
Code-Daiki2170
chat-component is Confidential.
FAQs
@codelic/chat-components(CodelicMagneterChat)
The npm package @codelic/chat-components receives a total of 493 weekly downloads. As such, @codelic/chat-components popularity was classified as not popular.
We found that @codelic/chat-components demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.
Security News
Biden's executive order pushes for AI-driven cybersecurity, software supply chain transparency, and stronger protections for federal and open source systems.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.