ios-chat
v1.2.1
Published
Style chat ui like Apple's iOS
Downloads
64
Readme
ios-chat
Small Library to show chat UI as iOS style
You can easily style your chatbot or chat system with "ios-chat"
currently, all the library's functions only works at browser (not support SSR)
Contents
Setup
using npm
npm install ios-chat
import { addRoomListener, answerChat } from "ios-chat";
using script
<!-- esm module -->
<script src="https://unpkg.com/ios-chat/dist/esm/index.js"></script>
<!-- umd module -->
<script src="https://unpkg.com/ios-chat/dist/umd/index.js"></script>
<ios-chat room-id="example"></ios-chat>
<script>
Chat.addRoomListener("example", (msg) => {
// ...
});
</script>
Basic Concepts
ios-chat is just using Web Components API, so you can attach everywhere inside of body with predefined tag name, <ios-chat>
attributes
room-id:
string
(required)Chat room ID, it is necessary to use API since the library configured chat room with room-id
⭐️important note - all chat rooms can be handled after the tag is attached at DOM. Literally, The functions below will work after the tags are added inside of body tag.
dark:
boolean
(optional)The attribute for setting dark mode
if it is
true
, dark mode appeareddefault value is
false
textonly:
boolean
(optional)The attribute for setting input mode
if it is
true
, the sender can only send string messagesdefault value is
false
example on html
<ios-chat room-id="chat" dark="true"></ios-chat>
<!-- only string sending -->
<ios-chat room-id="chat" dark="true" textonly></ios-chat>
Precautions
answer and sender UI
Don't be confused while using answerChat( ) and sendChat( )
all images and audio are created with URL.createObjectURL( );
so all of them are just temporary data, if you want to know how to save data to server or other storage, check next js + ios-chat
<ios-chat>
has z-index a maximal of 10
API
functions
sendChat (async)
async function sendChat(roomId: string, info: SendInfo);
if chat room is blocked, throw error
send chat message to room, check SendInfo
it return Promise that has same duration with message animation duration
so if you don't want to override animation, wait this Promise
answerChat (async)
async function answerChat(roomId: string, info: SendInfo);
if chat room is blocked, throw error
answer chat message to room, check SendInfo
it return Promise that has same duration with message animation duration
so if you don't want to override animation, wait this Promise
startAnswerLoading
function startAnswerLoading(roomId: string);
endAnswerLoading (async)
async function endAnswerLoading(roomId: string);
end loading for room
the blocked value will be false
isBlocked
function isBlocked(roomId: string): boolean;
- return status, as boolean, for roomId
getMessages
function getMessages(roomId: string): ChatMessage[];
- get all message list from chat room
initChat
function initChat(roomId: string, messages: ChatMessage[]);
// e.g
initChat("example", messages);
init room with message list
this won't show message animation
addRoomListener
function addRoomListener(roomId: string, callback: ListenerCallback): string;
// e.g
const listenerId = addRoomListener("example", (msg: ChatMessage) => {
if (msg.type === "text")
alert(msg.content)
});
with this function, you can listen recent message(type
ChatMessage
) from chat roomthe function get recent message except
loading
type message (message from startAnswerLoading)the function return listener id which will use at removeRoomListener
removeRoomListener
function removeRoomListener(roomId: string, listenerId: string);
// e.g
removeRoomListener("example", listenerId);
types
ChatMessage
type ChatMessage = {
type: ChatMessageType; // 'text' | 'img' |'audio' | "loading"
role: Role; // 'sender' | 'receiver'
id: string;
createdDatetime: number;
content: string;
origin?: string; // room-id string
};
- if one chat room send message to other room, the origin will be stored.
SendInfo
type SendInfo = {
type: ChatMessageType; // 'text' | 'img' |'audio' | "loading"
content: string;
origin?: string;
}