{"id":24807847,"url":"https://github.com/eddienubes/react-styled-chat-widget","last_synced_at":"2025-10-13T09:30:48.527Z","repository":{"id":57345857,"uuid":"374743441","full_name":"eddienubes/react-styled-chat-widget","owner":"eddienubes","description":"Flexibly styled chat-widget for your react apps. It was mainly created for integration with chat-bots in messengers.","archived":false,"fork":false,"pushed_at":"2021-06-10T20:52:00.000Z","size":1643,"stargazers_count":4,"open_issues_count":0,"forks_count":6,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-06T07:11:03.524Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eddienubes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-06-07T17:10:12.000Z","updated_at":"2025-01-16T22:51:03.000Z","dependencies_parsed_at":"2022-09-17T22:13:46.881Z","dependency_job_id":null,"html_url":"https://github.com/eddienubes/react-styled-chat-widget","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/eddienubes/react-styled-chat-widget","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eddienubes%2Freact-styled-chat-widget","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eddienubes%2Freact-styled-chat-widget/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eddienubes%2Freact-styled-chat-widget/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eddienubes%2Freact-styled-chat-widget/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eddienubes","download_url":"https://codeload.github.com/eddienubes/react-styled-chat-widget/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eddienubes%2Freact-styled-chat-widget/sbom","scorecard":{"id":366137,"data":{"date":"2025-08-11","repo":{"name":"github.com/eddienubes/react-styled-chat-widget","commit":"f575bcfd91fb7269b22d892223fdf932c59befa5"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.7,"checks":[{"name":"Code-Review","score":0,"reason":"Found 0/17 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Vulnerabilities","score":0,"reason":"70 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc","Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-33f9-j839-rf8h","Warn: Project is vulnerable to: GHSA-c36v-fmgq-m8hx","Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-4wx3-54gh-9fr9","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-qrpm-p2h7-hrv2","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-6fx8-h7jm-663j","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-gj77-59wh-66hg","Warn: Project is vulnerable to: GHSA-hqhp-5p83-hx96","Warn: Project is vulnerable to: GHSA-3949-f494-cm99","Warn: Project is vulnerable to: GHSA-x7hr-w5r2-h6wg","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7","Warn: Project is vulnerable to: GHSA-qm95-pgcg-qqfq","Warn: Project is vulnerable to: GHSA-cqmj-92xf-r6r9","Warn: Project is vulnerable to: GHSA-w5hq-hm5m-4548","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw","Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v","Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq","Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-18T11:53:04.286Z","repository_id":57345857,"created_at":"2025-08-18T11:53:04.286Z","updated_at":"2025-08-18T11:53:04.286Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279014521,"owners_count":26085536,"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","status":"online","status_checked_at":"2025-10-13T02:00:06.723Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2025-01-30T09:27:43.891Z","updated_at":"2025-10-13T09:30:48.178Z","avatar_url":"https://github.com/eddienubes.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React styled chat widget\n\n\n[![npm version](https://badge.fury.io/js/react-styled-chat-widget.svg)](https://badge.fury.io/js/react-styled-chat-widget)\n\n\u003cp align=\"center\"\u003e\n    \u003cimg height=\"600\" src=\"https://i.ibb.co/VB6fPKM/image.png\" alt=\"image\" border=\"0\" /\u003e\n\u003c/p\u003e\n\nFlexibly styled chat-widget for your react apps. It was mainly created for integration with chat-bot messengers.\n\n---\n\n#### Technical Documentation\n\n- [Installing](#installing)\n- [Exports](#exports)\n- [Usage](#chat-widget-usage)\n- [Tiny Warning :)](#tiny-warning)\n- [Chat Widget API](#chat-widget-api)\n- [License](#license)\n\n### Installing\n\nnpm\n\n```bash\n$ npm install react-styled-chat-widget styled-components\n```\nyarn \n\n```bash\n$ yarn add react-styled-chat-widget styled-components\n```\nAs you have probably already noticed, \nthis library uses styled-components to provide a nice development experience when it comes to customizing.\n\nIf you aren't using browserify/webpack, a UMD version of react-styled-chat-widget is available.\nThis bundle is also what is loaded when installing from npm. It expects external React and ReactDOM.\n\n---\n\n### Exports\n\nThe default export is `\u003cChatWidget/\u003e`. There are additional types that you can use as well.\n\n```js\nimport ChatWidget from \"react-styled-chat-widget\";\nimport {Message, MessageSendHandler, SendClickHandler} from \"react-styled-chat-widget\";\n```\n\n### Chat Widget usage\n\nYou can take a look at the \u003ca href=\"https://eddienubes.github.io/react-styled-chat-widget/?path=/story/app-test--app\"\u003eDEMO\u003c/a\u003e story-book I made. Don't forget to use fullscreen mode there or close other windows, because component itself \nrelies on the screen size a lot and storybook changes it in the runtime. \n\n```tsx\nimport React, {useCallback, useEffect, useState} from 'react';\nimport ChatWidget from \"react-styled-chat-widget\";\nimport {Message, MessageSendHandler, SendClickHandler} from \"react-styled-chat-widget\";\nimport Spinner from \"../components/spinner\";\n\nconst App = () =\u003e {\n  const [messages, setMessages] = useState\u003cMessage[]\u003e([]);\n  const [loading, setLoading] = useState(true);\n  \n  useEffect(() =\u003e {\n    // load some messages from history here using setMessages\n    setLoading(false);\n  }, []);\n\n\n  // used to switch message delivery indicator\n  const onMessageSend = useCallback\u003cMessageSendHandler\u003e((currentID, setDeliveryStatus) =\u003e {\n    setDeliveryStatus();\n  }, []);\n\n  // called when user presses the send button\n  const onSendClick = useCallback\u003cSendClickHandler\u003e((message: string) =\u003e {\n    setMessages((messages) =\u003e {\n      return [\n        ...messages,\n        {id: Math.floor(Math.random() * 10000), isPrimary: true, date: new Date(), sent: true, message, author: 'You'},\n      ]\n    })\n  }, []);\n\n\n  return (\n    \u003cChatWidget\n      defaultPosition={'bottomRight'}\n      messages={messages} // required\n      loading={loading} // required\n      onMessageSend={onMessageSend} // required\n      onSendClick={onSendClick} // required\n      spinner={\u003cSpinner/\u003e} // required\n    \u003e\n      // Header of the widget should be here :)\n      \u003cdiv\u003e\n        \u003cp\u003eWelcome to support window!\u003c/p\u003e\n        \u003chr/\u003e\n        \u003cp\u003eHere you can chat directly with moderators. They usually answer in a few hours.\u003c/p\u003e\n      \u003c/div\u003e\n    \u003c/ChatWidget\u003e\n  );\n}\n\nexport default App;\n```\n\n### Tiny Warning\nIt's my first ui component released on NPM. So, you may experience some bugs during development even though I didn't find any by myself :)\n\n---\n\n### Chat Widget API\n\nBelow you will find all the properties that chat widget accepts. Pay attention to the ones that are marked as required! \nWithout them widget won't work!\n\n| Property | Type   | Required | Default |  Example/Description |\n|----------|--------|----------|---------|----------------------|\n| indent   | number | no       | window.innerWidth * 0.015 | Indent from screen borders for the button that opens widget |\n| size | number | no | window.innerWidth * 3 / 100 | Size of the opening button. Percent of the screen width |\n| minSize | number | no | 60 | Minimal size of the opening button. Specified in pixels |\n| mainContentWidth | number | no | 25 | Width of the whole widget specified in percents of it's corresponding property - screen Width |\n| mainContentHeight | number | no | 60 | Height of the whole widget specified in percents of it's corresponding property - screen Height | \n| chatOffset | number | no | 10 | When widget is opened, there is a space between it and button. |\n| messages | `Messages[]` | yes | - | Messages that should be passed according to `Messages[]` type |\n| loading | boolean | yes | - | When loading is `true` the `spinner` is shown | \n| onMessageSend | `MessageSendHandler` | yes | - | Interesting option. This function gets invoked when message appears on the screen, but let's say \"has not been saved in your db yet\". So, calling `setDeliveryStatus` which comes as a second argument you are able to toggle \"delivery check mark\" on.|\n| onSendClick | `SendClickHandler` | yes | - | Event handler that gets invoked when user smashes send button |\n| primary| color code | no | gray | Sets background color of widget |\n| secondary | color code | no | purple | Color of the stroke at the top of textarea |\n| defaultPosition | `\"topLeft\"` `\"topRight\"`  `\"bottomLeft\"` `\"bottomRight\"` | no | `\"bottomRight\"` | Default position of the chat opening button |\n| isDraggable | boolean | no | true | Here it comes, draggable chat opening button. Yes, chat widget is draggable by it's button. You can turn it off by setting this property to false, otherwise users will play with this widget forever. Is it cool or not, idk, you decide :) |\n| spinner | `JSX.Element` | yes | - | Component that is shown while `loading` option is `true` |\n| primaryAuthorNameColor | color code | no | white | Author thumb color of sender |\n| secondaryAuthorNameColor | color code | no | black | Author thumb color of \"moderator\" |\n| primaryMessageBackground | color code | no | purple | BG of sender's messages | \n| secondaryMessageBackground | color code | no | white | BG of moderator's messages |\n| primaryMessageTextColor | color code | no | white | Text color for sender | \n| secondaryMessageTextColor | color code | no | black | Text color for moderator | \n| buttonBackground | color code | no | purple | BG of the opening button |\n| buttonTextColor | color code | no | white | Text color of the opening button |\n| placeHolder | string | no | What can I help you with? | Textarea placeholder |\n| greeting | string | no | Feel free to ask anything you want to! | Placeholder in case `messages` property is an empty array! |\n| sendButton | `JSX.Element` | no | Cool icon there | You can replace send button to your own component. All the event handlers will be binded automatically |\n| backgroundClassName | string | no | - | You can assign your custom classname in case you want to customize bg |\n| inputContainerClassName | string | no | - | Textarea container classname for customization |\n| buttonClassName | string | no | - | Opening button classname for customization purposes |\n\n### License\n\nMIT\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feddienubes%2Freact-styled-chat-widget","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feddienubes%2Freact-styled-chat-widget","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feddienubes%2Freact-styled-chat-widget/lists"}