{"id":23042302,"url":"https://github.com/kata-ai/sawala","last_synced_at":"2026-04-29T17:34:30.637Z","repository":{"id":83222671,"uuid":"218187047","full_name":"kata-ai/sawala","owner":"kata-ai","description":"UI Wrapper of Qiscus Chat SDK using the React framework","archived":false,"fork":false,"pushed_at":"2019-11-22T05:11:10.000Z","size":393,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-02-21T11:50:34.253Z","etag":null,"topics":["chat-sdk","kata","react","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/sawala","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kata-ai.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-10-29T02:25:57.000Z","updated_at":"2019-11-22T05:11:12.000Z","dependencies_parsed_at":null,"dependency_job_id":"8112c0df-13ed-4506-96c4-9b267810a8c1","html_url":"https://github.com/kata-ai/sawala","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kata-ai%2Fsawala","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kata-ai%2Fsawala/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kata-ai%2Fsawala/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kata-ai%2Fsawala/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kata-ai","download_url":"https://codeload.github.com/kata-ai/sawala/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246916762,"owners_count":20854514,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chat-sdk","kata","react","typescript"],"created_at":"2024-12-15T20:24:08.157Z","updated_at":"2026-04-29T17:34:25.607Z","avatar_url":"https://github.com/kata-ai.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.org/kata-ai/sawala.svg?branch=master)](https://travis-ci.org/kata-ai/sawala)\n[![Dependencies](https://david-dm.org/kata-ai/sawala.svg)](https://david-dm.org/kata-ai/sawala)\n[![NPM Version](https://img.shields.io/npm/v/sawala.svg)](https://www.npmjs.com/package/sawala)\n\n# Sawala\n\n**Sawala** is an Wrapper of [Qiscus Chat SDK](https://github.com/qiscus/qiscus-sdk-web-core) using the React framework. It's designed for Kata Internal needs.\n\n**Note: Sawala is still in beta.**\n\n---\n\n## Documentation\n\n- [Introduction](./docs/introduction.md)\n- [Getting Started](./docs/getting-started.md)\n- [Contributing](./docs/contributing.md)\n\n## Contributing\n\nSawala is developed by the help of developers like you! Please read our [Contributing Guidelines](CONTRIBUTING.md) to get started on developing Sawala.\n\nThis project is bound by a [Code of Conduct](CODE_OF_CONDUCT.md).\n\n## Usage\n\n### Install\n\n```bash\n# npm\n$ npm install --save sawala\n\n# yarn\n$ yarn add sawala\n```\n\n### How to use\n\nSawala is built in React, you can use it like this example:\n\n```jsx\nimport * as React from 'react';\nimport { SawalaChat } from 'sawala';\nimport { EmptyMessage } from '@kata-kit/common';\n\nexport default class Chat extends React.Component\u003cProps\u003e {\n  renderEmptyRoom = () =\u003e {\n    return (\n      \u003cEmptyMessage\n        image={require('assets/images/no-page.svg')}\n        title={'No chat selected'}\n      \u003e\n        Please select chat first.\n      \u003c/EmptyMessage\u003e\n    );\n  };\n\n  render() {\n    return (\n      \u003cSawalaChat\n        config={{\n          autoConnect: true,\n          appId: 'sdksample',\n          user: {\n            id: 'rohmad@kata.ai',\n            password: 'q1w2e3r4',\n            displayName: 'Rohmad from Kata.ai',\n            avatar:\n              'https://res.cloudinary.com/kata-ai/image/upload/v1572663263/sawala/kata_favicon-02_zzldhx.png'\n          }\n        }}\n        onRendered={this.handleRendered}\n        noSelectedComponent={this.renderEmptyRoom()}\n        onClickDetailComment={this.handleClickDetailComment}\n        loginSuccessCallback={this.handleloginSuccessCallback}\n        newMessagesCallback={this.handlenewMessagesCallback}\n      /\u003e\n    );\n  }\n}\n```\n\n## Components\n\n### SawalaChat\n\n`SawalaChat` is the only component needed to use sawala. It will react dynamically to handle all features.\n\nSawalaChat props:\n\n| prop                 | type                                | required | description                                                                                         |\n| -------------------- | ----------------------------------- | -------- | --------------------------------------------------------------------------------------------------- |\n| config               | [AppConfig](#appconfig)             | yes      | App Configuration for setup to [Qiscus Web SDK Core](https://github.com/qiscus/qiscus-sdk-web-core) |\n| onRendered           | function([QiscusCore](#qiscuscore)) | yes      | Callback after Sawala successfully rendered, for example you can call method `qiscus.getNonce()`    |\n| newMessagesCallback  | function([messages](#messages))     | yes      | Callback when you are have a new messages incoming                                                  |\n| onClickDetailComment | function([Comment](#comment))       | yes      | Callback when you click `Message Details` in your own message                                       |\n| noSelectedComponent  | ReactElement                        | no       | React element for showing an empty state                                                            |\n| headerComponent      | ReactElement                        | no       | React element for additional feature in Header. E.g: `Context menu`                                 |\n| onSelectedRoom       | function([Selected](#selected))     | no       | Callback after selected room using method `window.qiscus.setSelected`                               |\n| loginSuccessCallback | function([AuthData](#authdata))     | no       | Callback when you initiate to qiscus is success                                                     |\n\n#### AppConfig\n\n```jsx\nexport type User = {\n  id: string,\n  password: string,\n  displayName: string,\n  avatar?: string\n};\n\nexport type AppConfig = {\n  autoConnect: boolean | true,\n  appId: string,\n  user?: User | null\n};\n```\n\n#### QiscusCore\n\nQiscusCore is response from qiscus-sdk-web-core. Look like this:\n\n```json\n{\n  \"events\": {},\n  \"rooms\": [],\n  \"selected\": null,\n  \"room_name_id_map\": {},\n  \"pendingCommentId\": 0,\n  \"uploadedFiles\": [],\n  \"chatmateStatus\": null,\n  \"version\": \"WEB_2.8.36\",\n  \"userData\": {},\n  \"AppId\": \"esl-9qaeayalt99fccowr\",\n  \"baseURL\": \"https://api.qiscus.com\",\n  \"uploadURL\": \"https://api.qiscus.com/api/v2/sdk/upload\",\n  \"mqttURL\": \"wss://mqtt.qiscus.com:1886/mqtt\",\n  \"HTTPAdapter\": null,\n  \"realtimeAdapter\": {},\n  \"customEventAdapter\": {},\n  \"isInit\": false,\n  \"isSynced\": false,\n  \"syncInterval\": 5000,\n  \"sync\": \"socket\",\n  \"httpsync\": null,\n  \"eventsync\": null,\n  \"extras\": null,\n  \"last_received_comment_id\": 0,\n  \"googleMapKey\": \"\",\n  \"options\": { \"avatar\": true },\n  \"UI\": {},\n  \"mode\": \"widget\",\n  \"avatar\": true,\n  \"plugins\": [],\n  \"isLogin\": false,\n  \"isLoading\": false,\n  \"emoji\": false,\n  \"isTypingStatus\": \"\",\n  \"customTemplate\": false,\n  \"templateFunction\": null,\n  \"debugMode\": false,\n  \"debugMQTTMode\": false,\n  \"lastReceiveMessages\": [],\n  \"_customHeader\": {},\n  \"syncAdapter\": { \"events\": {} }\n}\n```\n\n#### AuthData\n\nAuthData also is response from qiscus-sdk-web-core. Look like this:\n\n```json\n{\n  \"user\": {\n    \"app\": {\n      \"code\": \"esl-9qaeayalt99fccowr\",\n      \"id\": 8216,\n      \"id_str\": \"8216\",\n      \"name\": \"esl\"\n    },\n    \"avatar\": {\n      \"avatar\": {\n        \"url\": \"https://d1edrlpyc25xu0.cloudfront.net/kiwari-prod/image/upload/75r6s_jOHa/1507541871-avatar-mine.png\"\n      }\n    },\n    \"avatar_url\": \"https://d1edrlpyc25xu0.cloudfront.net/kiwari-prod/image/upload/75r6s_jOHa/1507541871-avatar-mine.png\",\n    \"email\": \"esl-9qaeayalt99fccowr_admin@qismo.com\",\n    \"extras\": {},\n    \"id\": 64061322,\n    \"id_str\": \"64061322\",\n    \"last_comment_id\": 0,\n    \"last_comment_id_str\": \"0\",\n    \"last_sync_event_id\": 0,\n    \"pn_android_configured\": true,\n    \"pn_ios_configured\": true,\n    \"rtKey\": \"somestring\",\n    \"token\": \"PiJ8ndNiZwDI7pLONsFF1572018149\",\n    \"username\": \"User from Kata.ai\"\n  }\n}\n```\n\n#### Messages\n\nMessages also is response from qiscus-sdk-web-core. Look like this:\n\n```json\n[\n  {\n    \"chat_type\": \"group\",\n    \"comment_before_id\": 80343513,\n    \"comment_before_id_str\": \"80343513\",\n    \"created_at\": \"2019-10-31T02:21:06.138008Z\",\n    \"disable_link_preview\": false,\n    \"email\": \"esl-9qaeayalt99fccowr_admin@qismo.com\",\n    \"extras\": {},\n    \"id\": 80541844,\n    \"id_str\": \"80541844\",\n    \"is_public_channel\": false,\n    \"message\": \"Contoh pesan masuk\",\n    \"payload\": {},\n    \"raw_room_name\": \"Rohmad Sasmito\",\n    \"room_avatar\": \"https://avatars3.githubusercontent.com/u/10769688?s=100\",\n    \"room_id\": 4947400,\n    \"room_id_str\": \"4947400\",\n    \"room_name\": \"Rohmad Sasmito\",\n    \"room_options\": null,\n    \"room_type\": \"group\",\n    \"status\": \"sent\",\n    \"timestamp\": \"2019-10-31T02:21:06Z\",\n    \"topic_id\": 4947400,\n    \"topic_id_str\": \"4947400\",\n    \"type\": \"text\",\n    \"unique_temp_id\": \"bq1572488465709\",\n    \"unix_nano_timestamp\": 1572488466138008000,\n    \"unix_timestamp\": 1572488466,\n    \"user_avatar\": \"https://d1edrlpyc25xu0.cloudfront.net/kiwari-prod/image/upload/75r6s_jOHa/1507541871-avatar-mine.png\",\n    \"user_avatar_url\": \"https://d1edrlpyc25xu0.cloudfront.net/kiwari-prod/image/upload/75r6s_jOHa/1507541871-avatar-mine.png\",\n    \"user_id\": 64061322,\n    \"user_id_str\": \"64061322\",\n    \"username\": \"User from Kata.ai\"\n  }\n]\n```\n\n#### Selected\n\nSelected also is response from qiscus-sdk-web-core. Look like this:\n\n```json\n{\n  \"id\": 5000296,\n  \"last_comment_id\": 81421286,\n  \"last_comment_message\": \"Jangan lupa makan mahal, minimal sehari sekali.\",\n  \"avatar\": \"https://api.telegram.org/file/bot925192808:AAHfy0Y0pnVPk_n60w0I6zNJWl4bqzgFXOc/profile_photos/file_15.jpg\",\n  \"name\": \"Rohmad from Kata.ai\",\n  \"room_type\": \"group\",\n  \"participants\": [],\n  \"options\": null,\n  \"topics\": [],\n  \"comments\": [],\n  \"count_notif\": 0,\n  \"isLoaded\": false,\n  \"unread_comments\": [],\n  \"custom_title\": null,\n  \"custom_subtitle\": null,\n  \"unique_id\": \"6f5689f6-0aee-45f9-980f-6fa74eea70df\",\n  \"isChannel\": false,\n  \"participantNumber\": 0\n}\n```\n\n#### Comment\n\nComment also is response from qiscus-sdk-web-core. Look like this:\n\n```json\n{\n  \"id\": 81365202,\n  \"before_id\": 81363608,\n  \"message\": \"[file] https://d1edrlpyc25xu0.cloudfront.net/orgin-lg5ja1kyfcrid8r/raw/upload/yptF4THWmI/50727c5bd9eee40535166b73f6f706f5.jpg [/file]\",\n  \"username_as\": \"User from Kata.ai\",\n  \"username_real\": \"orgin-lg5ja1kyfcrid8r_admin@qismo.com\",\n  \"date\": \"2019-11-01\",\n  \"time\": \"19:48\",\n  \"timestamp\": \"2019-11-01T12:48:18Z\",\n  \"unique_id\": \"bq1572612497702\",\n  \"avatar\": \"https://res.cloudinary.com/kata-ai/image/upload/v1572501422/klient/admin-avatar_2x_b39pbw.png\",\n  \"room_id\": 5000305,\n  \"isChannel\": false,\n  \"unix_timestamp\": 1572612498,\n  \"is_deleted\": false,\n  \"isPending\": false,\n  \"isFailed\": false,\n  \"isDelivered\": true,\n  \"isRead\": true,\n  \"isSent\": true,\n  \"attachment\": null,\n  \"payload\": {\n    \"url\": \"https://d1edrlpyc25xu0.cloudfront.net/orgin-lg5ja1kyfcrid8r/raw/upload/yptF4THWmI/50727c5bd9eee40535166b73f6f706f5.jpg.webp\",\n    \"caption\": \"Ini makanan ku hari ini, anti murah-murah club\",\n    \"file_name\": \"50727c5bd9eee40535166b73f6f706f5.jpg.webp\",\n    \"size\": 6678,\n    \"pages\": 1,\n    \"encryption_key\": \"\"\n  },\n  \"status\": \"read\",\n  \"type\": \"file_attachment\",\n  \"subtype\": null\n}\n```\n\n## License\n\nLicensed under the [Apache 2.0 license](LICENSE). Copyright (c) 2019 Kata.ai and/or contributors. All rights reserved.\n\n## Maintainers\n\n- Rohmad Sasmito ([@rohmad-st](https://github.com/rohmad-st)) – [Kata.ai](https://kata.ai)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkata-ai%2Fsawala","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkata-ai%2Fsawala","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkata-ai%2Fsawala/lists"}