{"_id":"@blendvision/chatroom-web-sdk","_rev":"15-3b528555191b63442987291bf53b21f8","name":"@blendvision/chatroom-web-sdk","dist-tags":{"latest":"1.0.1-0"},"versions":{"1.0.0-0":{"name":"@blendvision/chatroom-web-sdk","version":"1.0.0-0","author":"","license":"Proprietary","_id":"@blendvision/chatroom-web-sdk@1.0.0-0","maintainers":[{"name":"webkks","email":"web@kkstream.com.tw"},{"name":"kksweb","email":"web@kkstream.com"}],"dist":{"shasum":"484b9488be0c4ecced191467e630f9b417261a2b","tarball":"https://registry.npmjs.org/@blendvision/chatroom-web-sdk/-/chatroom-web-sdk-1.0.0-0.tgz","fileCount":5,"integrity":"sha512-kisi/mH1LsjPcDtNZ3FqcycvSFO2LdizWKRQGJc5Mh7KqRpDXQU/AqEJyxnJrPjN6HD+OTPsaKTlss9Ysm5VXw==","signatures":[{"sig":"MEUCIDOAXKdOc4TSHcmXlrdCFLG1qOy5jRt+Ewlwyxj8RG8YAiEA3CnWSJWtLJ7mRFjZ2x+CBdaSpoD/mYo+vYE027faE9c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":8641400},"main":"index.cjs.js","type":"module","module":"index.esm.js","gitHead":"0a4095e9296291c94a30ec1d0d5d5779ccb25a0a","_npmUser":{"name":"webkks","email":"web@kkstream.com.tw"},"_npmVersion":"8.15.0","description":"Integrate Blendvision Chatroom SDK, including Word Filter, Sticker SDK","directories":{},"_nodeVersion":"18.7.0","dependencies":{"mqtt":"5.3.3","axios":"1.2.1","buffer":"^6.0.3","emoji-mart":"^5.5.2","@mui/material":"5.11.2","@emotion/react":"~11.10.4","@emotion/styled":"~11.10.4","@emoji-mart/data":"^1.1.2","@emoji-mart/react":"^1.1.1","@tanstack/react-query":"~4.19.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chatroom-web-sdk_1.0.0-0_1705314166974_0.6498824561663334","host":"s3://npm-registry-packages"}},"1.0.1-0":{"name":"@blendvision/chatroom-web-sdk","version":"1.0.1-0","author":"","_id":"@blendvision/chatroom-web-sdk@1.0.1-0","maintainers":[{"name":"webkks","email":"web@kkstream.com.tw"},{"name":"kksweb","email":"web@kkstream.com"}],"dist":{"shasum":"af7fc860a3b1f32e14d3e08c9e1adeeb2bb76a25","tarball":"https://registry.npmjs.org/@blendvision/chatroom-web-sdk/-/chatroom-web-sdk-1.0.1-0.tgz","fileCount":5,"integrity":"sha512-82kw90lS4osDB6UzZamVonosWPfiZuKE4h+JKgisHzVgwdJXkISTuu5eGEt6zeZ5JqWyTqldQihMYYz06BKiLw==","signatures":[{"sig":"MEUCIFl2JXuWQQwuZwFbkkBju1Ro6qSyJRk/PhqtZ09dmoo8AiEApIm0EtNvMFSGy3ELEVk5rhKILgsFFn6k+feclkGAj4s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":8642176},"main":"index.cjs.js","type":"module","module":"index.esm.js","gitHead":"e90b0edbf4be441024380988cd7cf778e22c14c1","_npmUser":{"name":"webkks","email":"web@kkstream.com.tw"},"_npmVersion":"8.15.0","description":"Integrate Blendvision Chatroom SDK, including Word Filter, Sticker SDK","directories":{},"_nodeVersion":"18.7.0","dependencies":{"mqtt":"5.3.3","axios":"1.2.1","buffer":"^6.0.3","emoji-mart":"^5.5.2","@mui/material":"5.11.2","@emotion/react":"~11.10.4","@emotion/styled":"~11.10.4","@emoji-mart/data":"^1.1.2","@emoji-mart/react":"^1.1.1","@tanstack/react-query":"~4.19.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/chatroom-web-sdk_1.0.1-0_1705892982191_0.04335521339461712","host":"s3://npm-registry-packages"}}},"time":{"created":"2024-01-15T10:22:46.862Z","modified":"2025-12-30T01:52:35.777Z","0.0.0":"2024-01-08T06:26:01.273Z","0.0.1":"2024-01-08T07:07:45.339Z","0.0.2":"2024-01-08T07:39:31.832Z","0.0.5":"2024-01-09T08:33:56.564Z","0.0.6":"2024-01-10T02:40:05.088Z","1.0.0-0":"2024-01-15T10:22:47.180Z","2.0.0-0":"2024-01-19T04:21:15.857Z","1.0.0-1":"2024-01-19T04:35:56.400Z","1.0.1-0":"2024-01-22T03:09:42.419Z"},"description":"Integrate Blendvision Chatroom SDK, including Word Filter, Sticker SDK","maintainers":[{"email":"service.bv@kkcompany.com","name":"webkks"}],"readme":"# Blendvision Chatroom Web SDK\n\nGetting Started\n\n- [Chatroom](#chatroom)\n- [WordFilter](#word-filter)\n- [Sticker](#sticker)\n\n## Chatroom\n\n### Setup with Chatroom Web SDK\n\n#### Installation\n\n```bash\nnpm install @blendvision/chatroom-web-sdk\n```\n\nor\n\n```bash\nyarn add @blendvision/chatroom-web-sdk\n```\n\n#### Import\n\n```ts\nimport { Chatroom } from '@blendvision/chatroom-web-sdk';\n```\n\n#### Initialize\n\nThe chatroom token is the response of [`bv/chatroom/v1/chatrooms/{id}/tokens`](https://docs.one-dev.kkstream.io/api/bv/v1.321.0/ui/elements/index.html#/operations/PublicChatroomService_CreateChatroomToken).\n\n```tsx\nconst App = () => {\n  const BV_TOKEN = 'YOUR_BV_TOKEN';\n\n  // use BV token to create a chatroom\n  const { id } = createChatroom(BV_TOKEN).chatroom;\n\n  // use BV token and chatroom ID to get chatroomToken\n  const { token: chatroomToken } = createChatroomToken(BV_TOKEN, id);\n\n  return (\n    <YourContainer\n      style={{\n        width: '373px', // min-width of chatroom component\n        height: '600px',\n      }}\n    >\n      <Chatroom token={chatroomToken} />\n    </YourContainer>\n  );\n};\n```\n\n### Supported Parameters\n\n> **Table of Contents**\n\n- [Default Theme](#default-theme)\n- [Time Format](#time-format)\n- [Language](#language)\n- [Collapse](#collapse)\n\n#### **Default Theme**\n\nCurrently support `dark` and `light`, and the default theme mode is `light`.\n\nThe defaultTheme would be store in **session storage**. Therefore, the theme would **not be updated** if init the chatroom with the same browser window in another theme.\n\nThe property only set the **default theme**, the value could be change by all users.\n\n| Params  | Theme               |\n| ------- | ------------------- |\n| `light` | Light **(default)** |\n| `dark`  | Dark                |\n\n```tsx\nconst App = () => {\n  const defaultTheme = 'dark';\n\n  return <Chatroom token={chatroomToken} defaultTheme={defaultTheme} />;\n};\n```\n\n#### **Time Format**\n\nYou can customize the time format of messages with the following parameters.\n\n| Params    | Examples           | Description                                |\n| --------- | ------------------ | ------------------------------------------ |\n| `H:mm`    | 8:16, 23:20        | 0-23, 2 digits for the hour                |\n| `HH:mm`   | 08:16, 23:20       | 00-23, 2 digits for the hour **(default)** |\n| `h:mm A`  | 8:16 AM, 11:20 PM  | 0-23, AM/PM                                |\n| `hh:mm A` | 08:16 AM, 11:20 PM | 00-23, AM/PM                               |\n| `h:mm a`  | 8:16 am, 11:20 pm  | 0-23, am/pm                                |\n| `hh:mm a` | 08:16 am, 11:20 pm | 00-23, am/pm                               |\n\n```tsx\nconst App = () => {\n  const timeFormat = 'hh:mm a';\n\n  return <Chatroom token={chatroomToken} timeFormat={timeFormat} />;\n};\n```\n\n#### **Language**\n\nCurrently support `en`, `zh`, and `ja`.\n\nSince the [emoji-mart](https://github.com/missive/emoji-mart) doesn't support Traditional Chinese, English is used as an alternative for displaying emojis. (We open a [PR](https://github.com/missive/emoji-mart/pull/836) for this)\n\n| Params | Language                       | Description                    |\n| ------ | ------------------------------ | ------------------------------ |\n| `en`   | English **(default)**          |\n| `zh`   | Mandarin (Traditional Chinese) | The emoji would be in English. |\n| `ja`   | Japanese                       |\n\n```tsx\nconst App = () => {\n  const locale = 'zh';\n\n  return <Chatroom token={chatroomToken} locale={locale} />;\n};\n```\n\n#### **Collapse**\n\nCollapse and expand chatroom is available by the following interface. All the properties is optional.\n\n**`collapse.in`**\n\nA boolean that can control the chatroom collapse or expand.\n\n| Params  | Description                       |\n| ------- | --------------------------------- |\n| `false` | Expand the chatroom **(default)** |\n| `true`  | Collapse the chatroom             |\n\n**`collapse.default`**\n\nFor setup default collapse or expand.\n\n| Params  | Description                                  |\n| ------- | -------------------------------------------- |\n| `false` | Expand the chatroom by default **(default)** |\n| `true`  | Collapse the chatroom by default             |\n\n**`collapse.collapseIcon.position`**\n\n| Params      | Description                                                       |\n| ----------- | ----------------------------------------------------------------- |\n| `top-left`  | The collapse icon would be on the `top-left` corner **(default)** |\n| `top-right` | The collapse icon would be on the `top-right` corner              |\n\n```tsx\nimport { OutlineExpand, OutlineCollapse } from '@sphere/web-ui';\n\nconst App = () => {\n  const YOUR_EXPAND_ICON = OutlineExpand;\n  const YOUR_COLLAPSE_ICON = OutlineCollapse;\n\n  return (\n    <Chatroom\n      token={chatroomToken}\n      collapse={{\n        in: true,\n        default: true,\n        collapseIcon: {\n          component: YOUR_COLLAPSE_ICON,\n          position: 'top-right',\n        },\n        expandIcon: {\n          component: YOUR_EXPAND_ICON,\n        },\n      }}\n      onCollapse={() => console.log('collapse')}\n      onExpand={() => console.log('expand')}\n    />\n  );\n};\n```\n\n## Word Filter\n\n### Setup With Word Filter SDK\n\n#### Installation\n\n```bash\nnpm install @blendvision/chatroom-web-sdk\n```\n\nor\n\n```bash\nyarn add @blendvision/chatroom-web-sdk\n```\n\n#### Import Word Filter SDK\n\n```ts\nimport { WordFilterListTable, WordFilterDetailForm } from '@blendvision/chatroom-web-sdk';\n```\n\n#### Initialize\n\n1. Call [`bv/chatroom/v1/dictionaries/tokens`](https://docs.one-dev.kkstream.io/api/bv/v1.321.0/ui/elements/index.html#/operations/PublicChatroomService_CreateDictionaryToken) API to get word filter token.\n2. Import `WordFilterListTable` and `WordFilterDetailForm` component for word filter list and detail UIs display.\n\n```tsx\nconst App = () => {\n  const BV_TOKEN = 'YOUR_BV_TOKEN';\n\n  // use BV token to get word filter token\n  const { token: wordFilterToken } = createWordFilterToken(BV_TOKEN);\n\n  return (\n    <WordFilterListTable\n      token={wordFilterToken}\n      onRowClick={(_, id) => {\n        // When you click one word filter, you can get id and do something...\n        console.log('word filter detail id', id);\n      }}\n    />\n  );\n};\n```\n\n```tsx\nconst App = () => {\n  const BV_TOKEN = 'YOUR_BV_TOKEN';\n\n  // Get id from `onRowClick function` of WordFilterListTable component\n  const id = '1';\n\n  // use BV token to get word filter token\n  const { token: wordFilterToken } = createWordFilterToken(BV_TOKEN);\n\n  return <WordFilterDetailFrom token={wordFilterToken} id={id} />;\n};\n```\n\n### Supported Parameters\n\n#### **Language**\n\nCurrently support `en`, `zh`, and `ja`.\n\n| Params | Language                       | Description |\n| ------ | ------------------------------ | ----------- |\n| `en`   | English **(default)**          |             |\n| `zh`   | Mandarin (Traditional Chinese) |             |\n| `ja`   | Japanese                       |             |\n\n```tsx\nconst App = () => {\n  const locale = 'zh';\n\n  return (\n    <>\n      <WordFilterListTable token={wordFilterToken} locale={locale} />\n      <WordFilterDetailForm token={wordFilterToken} id={wordFilterDetailId} locale={locale} />;\n    </>\n  );\n};\n```\n\n## Sticker\n\n### Setup With Sticker SDK\n\n#### Installation\n\n```bash\nnpm install @blendvision/chatroom-web-sdk\n```\n\nor\n\n```bash\nyarn add @blendvision/chatroom-web-sdk\n```\n\n#### Import Sticker SDK\n\n```ts\nimport { StickerListTable, StickerDetailForm } from '@blendvision/chatroom-web-sdk';\n```\n\n#### Initialize\n\n1. Call [`bv/chatroom/v1/stickerpacks/tokens`](https://docs.one-dev.kkstream.io/api/bv/v1.321.0/ui/elements/index.html#/operations/PublicChatroomService_CreateStickerPackToken) API to get sticker token.\n2. Import `StickerListTable` and `StickerDetailForm` component for sticker list and detail UIs display.\n\n```tsx\nconst App = () => {\n  const BV_TOKEN = 'YOUR_BV_TOKEN';\n\n  // use BV token to get sticker token\n  const { token: stickerToken } = createStickerToken(BV_TOKEN);\n\n  return (\n    <StickerListTable\n      token={stickerToken}\n      onRowClick={(_, id) => {\n        // When you click one sticker, you can get id and do something...\n        console.log('sticker detail id', id);\n      }}\n    />\n  );\n};\n```\n\n```tsx\nconst App = () => {\n  const BV_TOKEN = 'YOUR_BV_TOKEN';\n\n  // Get id from `onRowClick function` of stickerListTable component\n  const id = '1';\n\n  // use BV token to get sticker token\n  const { token: stickerToken } = createStickerToken(BV_TOKEN);\n\n  return <StickerDetailFrom token={stickerToken} id={id} />;\n};\n```\n\n### Supported Parameters\n\n#### **Language**\n\nCurrently support `en`, `zh`, and `ja`.\n\n| Params | Language                       | Description |\n| ------ | ------------------------------ | ----------- |\n| `en`   | English **(default)**          |             |\n| `zh`   | Mandarin (Traditional Chinese) |             |\n| `ja`   | Japanese                       |             |\n\n```tsx\nconst App = () => {\n  const locale = 'zh';\n\n  return (\n    <>\n      <StickerListTable token={stickerToken} locale={locale} />\n      <StickerDetailForm token={stickerToken} id={StickerDetailId} locale={locale} />;\n    </>\n  );\n};\n```\n","readmeFilename":"README.md"}