ios-chat

demo

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
  • using script
• Basic Concepts
  • attributes
    • example on html
  • Precautions
• API
  • functions
    • sendChat (async)
    • answerChat (async)
    • startAnswerLoading
    • endAnswerLoading (async)
    • isBlocked
    • getMessages
    • initChat
    • addRoomListener
    • removeRoomListener
  • types
    • ChatMessage
    • SendInfo
• Examples
• Issues

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

1. 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.

2. dark: boolean (optional)

   The attribute for setting dark mode

   if it is true, dark mode appeared

   default value is false

3. textonly: boolean (optional)

   The attribute for setting input mode

   if it is true, the sender can only send string messages

   default 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

1. answer and sender UI

   Don't be confused while using answerChat( ) and sendChat( )

2. 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

3. <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);

• if chat room is blocked, throw error

• start loading for room

• the blocked value will be true

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 room

• the 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;
}

Examples

next js + ios-chat

vanilla JS + ios-chat

Issues