├── .distignore ├── LICENSE ├── README.md ├── VENDORS ├── chatterbox.php ├── package-lock.json ├── package.json ├── readme.txt ├── src ├── chat │ ├── edit.js │ ├── index.js │ ├── save.js │ └── utils.js ├── constants.js ├── editor.scss ├── index.js ├── message │ ├── edit.js │ ├── index.js │ ├── save.js │ └── utils.js ├── style-app.scss └── style.scss └── webpack.config.js /.distignore: -------------------------------------------------------------------------------- 1 | /.wporg 2 | /.git 3 | /.github 4 | /node_modules 5 | /src 6 | 7 | .distignore 8 | .editorconfig 9 | .gitignore 10 | .gitattributes 11 | 12 | package-lock.json 13 | package.json 14 | webpack.config.js 15 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | GNU GENERAL PUBLIC LICENSE 2 | Version 2, June 1991 3 | 4 | Copyright (C) 1989, 1991 Free Software Foundation, Inc., 5 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA 6 | Everyone is permitted to copy and distribute verbatim copies 7 | of this license document, but changing it is not allowed. 8 | 9 | Preamble 10 | 11 | The licenses for most software are designed to take away your 12 | freedom to share and change it. By contrast, the GNU General Public 13 | License is intended to guarantee your freedom to share and change free 14 | software--to make sure the software is free for all its users. This 15 | General Public License applies to most of the Free Software 16 | Foundation's software and to any other program whose authors commit to 17 | using it. (Some other Free Software Foundation software is covered by 18 | the GNU Lesser General Public License instead.) You can apply it to 19 | your programs, too. 20 | 21 | When we speak of free software, we are referring to freedom, not 22 | price. Our General Public Licenses are designed to make sure that you 23 | have the freedom to distribute copies of free software (and charge for 24 | this service if you wish), that you receive source code or can get it 25 | if you want it, that you can change the software or use pieces of it 26 | in new free programs; and that you know you can do these things. 27 | 28 | To protect your rights, we need to make restrictions that forbid 29 | anyone to deny you these rights or to ask you to surrender the rights. 30 | These restrictions translate to certain responsibilities for you if you 31 | distribute copies of the software, or if you modify it. 32 | 33 | For example, if you distribute copies of such a program, whether 34 | gratis or for a fee, you must give the recipients all the rights that 35 | you have. You must make sure that they, too, receive or can get the 36 | source code. And you must show them these terms so they know their 37 | rights. 38 | 39 | We protect your rights with two steps: (1) copyright the software, and 40 | (2) offer you this license which gives you legal permission to copy, 41 | distribute and/or modify the software. 42 | 43 | Also, for each author's protection and ours, we want to make certain 44 | that everyone understands that there is no warranty for this free 45 | software. If the software is modified by someone else and passed on, we 46 | want its recipients to know that what they have is not the original, so 47 | that any problems introduced by others will not reflect on the original 48 | authors' reputations. 49 | 50 | Finally, any free program is threatened constantly by software 51 | patents. We wish to avoid the danger that redistributors of a free 52 | program will individually obtain patent licenses, in effect making the 53 | program proprietary. To prevent this, we have made it clear that any 54 | patent must be licensed for everyone's free use or not licensed at all. 55 | 56 | The precise terms and conditions for copying, distribution and 57 | modification follow. 58 | 59 | GNU GENERAL PUBLIC LICENSE 60 | TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 61 | 62 | 0. This License applies to any program or other work which contains 63 | a notice placed by the copyright holder saying it may be distributed 64 | under the terms of this General Public License. The "Program", below, 65 | refers to any such program or work, and a "work based on the Program" 66 | means either the Program or any derivative work under copyright law: 67 | that is to say, a work containing the Program or a portion of it, 68 | either verbatim or with modifications and/or translated into another 69 | language. (Hereinafter, translation is included without limitation in 70 | the term "modification".) Each licensee is addressed as "you". 71 | 72 | Activities other than copying, distribution and modification are not 73 | covered by this License; they are outside its scope. The act of 74 | running the Program is not restricted, and the output from the Program 75 | is covered only if its contents constitute a work based on the 76 | Program (independent of having been made by running the Program). 77 | Whether that is true depends on what the Program does. 78 | 79 | 1. You may copy and distribute verbatim copies of the Program's 80 | source code as you receive it, in any medium, provided that you 81 | conspicuously and appropriately publish on each copy an appropriate 82 | copyright notice and disclaimer of warranty; keep intact all the 83 | notices that refer to this License and to the absence of any warranty; 84 | and give any other recipients of the Program a copy of this License 85 | along with the Program. 86 | 87 | You may charge a fee for the physical act of transferring a copy, and 88 | you may at your option offer warranty protection in exchange for a fee. 89 | 90 | 2. You may modify your copy or copies of the Program or any portion 91 | of it, thus forming a work based on the Program, and copy and 92 | distribute such modifications or work under the terms of Section 1 93 | above, provided that you also meet all of these conditions: 94 | 95 | a) You must cause the modified files to carry prominent notices 96 | stating that you changed the files and the date of any change. 97 | 98 | b) You must cause any work that you distribute or publish, that in 99 | whole or in part contains or is derived from the Program or any 100 | part thereof, to be licensed as a whole at no charge to all third 101 | parties under the terms of this License. 102 | 103 | c) If the modified program normally reads commands interactively 104 | when run, you must cause it, when started running for such 105 | interactive use in the most ordinary way, to print or display an 106 | announcement including an appropriate copyright notice and a 107 | notice that there is no warranty (or else, saying that you provide 108 | a warranty) and that users may redistribute the program under 109 | these conditions, and telling the user how to view a copy of this 110 | License. (Exception: if the Program itself is interactive but 111 | does not normally print such an announcement, your work based on 112 | the Program is not required to print an announcement.) 113 | 114 | These requirements apply to the modified work as a whole. If 115 | identifiable sections of that work are not derived from the Program, 116 | and can be reasonably considered independent and separate works in 117 | themselves, then this License, and its terms, do not apply to those 118 | sections when you distribute them as separate works. But when you 119 | distribute the same sections as part of a whole which is a work based 120 | on the Program, the distribution of the whole must be on the terms of 121 | this License, whose permissions for other licensees extend to the 122 | entire whole, and thus to each and every part regardless of who wrote it. 123 | 124 | Thus, it is not the intent of this section to claim rights or contest 125 | your rights to work written entirely by you; rather, the intent is to 126 | exercise the right to control the distribution of derivative or 127 | collective works based on the Program. 128 | 129 | In addition, mere aggregation of another work not based on the Program 130 | with the Program (or with a work based on the Program) on a volume of 131 | a storage or distribution medium does not bring the other work under 132 | the scope of this License. 133 | 134 | 3. You may copy and distribute the Program (or a work based on it, 135 | under Section 2) in object code or executable form under the terms of 136 | Sections 1 and 2 above provided that you also do one of the following: 137 | 138 | a) Accompany it with the complete corresponding machine-readable 139 | source code, which must be distributed under the terms of Sections 140 | 1 and 2 above on a medium customarily used for software interchange; or, 141 | 142 | b) Accompany it with a written offer, valid for at least three 143 | years, to give any third party, for a charge no more than your 144 | cost of physically performing source distribution, a complete 145 | machine-readable copy of the corresponding source code, to be 146 | distributed under the terms of Sections 1 and 2 above on a medium 147 | customarily used for software interchange; or, 148 | 149 | c) Accompany it with the information you received as to the offer 150 | to distribute corresponding source code. (This alternative is 151 | allowed only for noncommercial distribution and only if you 152 | received the program in object code or executable form with such 153 | an offer, in accord with Subsection b above.) 154 | 155 | The source code for a work means the preferred form of the work for 156 | making modifications to it. For an executable work, complete source 157 | code means all the source code for all modules it contains, plus any 158 | associated interface definition files, plus the scripts used to 159 | control compilation and installation of the executable. However, as a 160 | special exception, the source code distributed need not include 161 | anything that is normally distributed (in either source or binary 162 | form) with the major components (compiler, kernel, and so on) of the 163 | operating system on which the executable runs, unless that component 164 | itself accompanies the executable. 165 | 166 | If distribution of executable or object code is made by offering 167 | access to copy from a designated place, then offering equivalent 168 | access to copy the source code from the same place counts as 169 | distribution of the source code, even though third parties are not 170 | compelled to copy the source along with the object code. 171 | 172 | 4. You may not copy, modify, sublicense, or distribute the Program 173 | except as expressly provided under this License. Any attempt 174 | otherwise to copy, modify, sublicense or distribute the Program is 175 | void, and will automatically terminate your rights under this License. 176 | However, parties who have received copies, or rights, from you under 177 | this License will not have their licenses terminated so long as such 178 | parties remain in full compliance. 179 | 180 | 5. You are not required to accept this License, since you have not 181 | signed it. However, nothing else grants you permission to modify or 182 | distribute the Program or its derivative works. These actions are 183 | prohibited by law if you do not accept this License. Therefore, by 184 | modifying or distributing the Program (or any work based on the 185 | Program), you indicate your acceptance of this License to do so, and 186 | all its terms and conditions for copying, distributing or modifying 187 | the Program or works based on it. 188 | 189 | 6. Each time you redistribute the Program (or any work based on the 190 | Program), the recipient automatically receives a license from the 191 | original licensor to copy, distribute or modify the Program subject to 192 | these terms and conditions. You may not impose any further 193 | restrictions on the recipients' exercise of the rights granted herein. 194 | You are not responsible for enforcing compliance by third parties to 195 | this License. 196 | 197 | 7. If, as a consequence of a court judgment or allegation of patent 198 | infringement or for any other reason (not limited to patent issues), 199 | conditions are imposed on you (whether by court order, agreement or 200 | otherwise) that contradict the conditions of this License, they do not 201 | excuse you from the conditions of this License. If you cannot 202 | distribute so as to satisfy simultaneously your obligations under this 203 | License and any other pertinent obligations, then as a consequence you 204 | may not distribute the Program at all. For example, if a patent 205 | license would not permit royalty-free redistribution of the Program by 206 | all those who receive copies directly or indirectly through you, then 207 | the only way you could satisfy both it and this License would be to 208 | refrain entirely from distribution of the Program. 209 | 210 | If any portion of this section is held invalid or unenforceable under 211 | any particular circumstance, the balance of the section is intended to 212 | apply and the section as a whole is intended to apply in other 213 | circumstances. 214 | 215 | It is not the purpose of this section to induce you to infringe any 216 | patents or other property right claims or to contest validity of any 217 | such claims; this section has the sole purpose of protecting the 218 | integrity of the free software distribution system, which is 219 | implemented by public license practices. Many people have made 220 | generous contributions to the wide range of software distributed 221 | through that system in reliance on consistent application of that 222 | system; it is up to the author/donor to decide if he or she is willing 223 | to distribute software through any other system and a licensee cannot 224 | impose that choice. 225 | 226 | This section is intended to make thoroughly clear what is believed to 227 | be a consequence of the rest of this License. 228 | 229 | 8. If the distribution and/or use of the Program is restricted in 230 | certain countries either by patents or by copyrighted interfaces, the 231 | original copyright holder who places the Program under this License 232 | may add an explicit geographical distribution limitation excluding 233 | those countries, so that distribution is permitted only in or among 234 | countries not thus excluded. In such case, this License incorporates 235 | the limitation as if written in the body of this License. 236 | 237 | 9. The Free Software Foundation may publish revised and/or new versions 238 | of the General Public License from time to time. Such new versions will 239 | be similar in spirit to the present version, but may differ in detail to 240 | address new problems or concerns. 241 | 242 | Each version is given a distinguishing version number. If the Program 243 | specifies a version number of this License which applies to it and "any 244 | later version", you have the option of following the terms and conditions 245 | either of that version or of any later version published by the Free 246 | Software Foundation. If the Program does not specify a version number of 247 | this License, you may choose any version ever published by the Free Software 248 | Foundation. 249 | 250 | 10. If you wish to incorporate parts of the Program into other free 251 | programs whose distribution conditions are different, write to the author 252 | to ask for permission. For software which is copyrighted by the Free 253 | Software Foundation, write to the Free Software Foundation; we sometimes 254 | make exceptions for this. Our decision will be guided by the two goals 255 | of preserving the free status of all derivatives of our free software and 256 | of promoting the sharing and reuse of software generally. 257 | 258 | NO WARRANTY 259 | 260 | 11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY 261 | FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN 262 | OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES 263 | PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED 264 | OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF 265 | MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS 266 | TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE 267 | PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, 268 | REPAIR OR CORRECTION. 269 | 270 | 12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING 271 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR 272 | REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, 273 | INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING 274 | OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED 275 | TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY 276 | YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER 277 | PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE 278 | POSSIBILITY OF SUCH DAMAGES. 279 | 280 | END OF TERMS AND CONDITIONS 281 | 282 | How to Apply These Terms to Your New Programs 283 | 284 | If you develop a new program, and you want it to be of the greatest 285 | possible use to the public, the best way to achieve this is to make it 286 | free software which everyone can redistribute and change under these terms. 287 | 288 | To do so, attach the following notices to the program. It is safest 289 | to attach them to the start of each source file to most effectively 290 | convey the exclusion of warranty; and each file should have at least 291 | the "copyright" line and a pointer to where the full notice is found. 292 | 293 | {description} 294 | Copyright (C) {year} {fullname} 295 | 296 | This program is free software; you can redistribute it and/or modify 297 | it under the terms of the GNU General Public License as published by 298 | the Free Software Foundation; either version 2 of the License, or 299 | (at your option) any later version. 300 | 301 | This program is distributed in the hope that it will be useful, 302 | but WITHOUT ANY WARRANTY; without even the implied warranty of 303 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 304 | GNU General Public License for more details. 305 | 306 | You should have received a copy of the GNU General Public License along 307 | with this program; if not, write to the Free Software Foundation, Inc., 308 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA. 309 | 310 | Also add information on how to contact you by electronic and paper mail. 311 | 312 | If the program is interactive, make it output a short notice like this 313 | when it starts in an interactive mode: 314 | 315 | Gnomovision version 69, Copyright (C) year name of author 316 | Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'. 317 | This is free software, and you are welcome to redistribute it 318 | under certain conditions; type `show c' for details. 319 | 320 | The hypothetical commands `show w' and `show c' should show the appropriate 321 | parts of the General Public License. Of course, the commands you use may 322 | be called something other than `show w' and `show c'; they could even be 323 | mouse-clicks or menu items--whatever suits your program. 324 | 325 | You should also get your employer (if you work as a programmer) or your 326 | school, if any, to sign a "copyright disclaimer" for the program, if 327 | necessary. Here is a sample; alter the names: 328 | 329 | Yoyodyne, Inc., hereby disclaims all copyright interest in the program 330 | `Gnomovision' (which makes passes at compilers) written by James Hacker. 331 | 332 | {signature of Ty Coon}, 1 April 1989 333 | Ty Coon, President of Vice 334 | 335 | This General Public License does not permit incorporating your program into 336 | proprietary programs. If your program is a subroutine library, you may 337 | consider it more useful to permit linking proprietary applications with the 338 | library. If this is what you want to do, use the GNU Lesser General 339 | Public License instead of this License. 340 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Chatterbox 2 | 3 | ![example of chatterbox inside a smartphone wrapper](https://raw.githubusercontent.com/0aveRyan/chatterbox/master/.wporg/screenshot-4.gif) 4 | 5 | Create chat threads using WordPress Blocks inside app and mobile wrappers. 6 | 7 | Chatterbox can be used for: 8 | * Demos of chat bots 9 | * Publishing chat records in news stories 10 | * A fun way to add striking visual display to conversations 11 | 12 | ## Installation 13 | 14 | Download the latest release from WordPress.org or GitHub. 15 | 16 | ## Usage 17 | 18 | 1. Install & Activate 19 | 1. Open Block Editor & Type `/chatterbox` 20 | 1. Change styles by hovering over the app icon or from the block toolbar. 21 | 22 | ## Roadmap 23 | 24 | - [x] Initial release 25 | - [x] Block Styles 26 | 27 | #### Once the Block Context API matures 28 | - [ ] Message BG/Text Colors 29 | - [ ] Message Sender with Name, Avatar (initial|headshot) 30 | - [ ] Override Message Sender per-Message for Group Chats 31 | 32 | #### General 33 | - [ ] Implement Bookends and other [SFDS Chat](https://www.lightningdesignsystem.com/components/chat/#About-Chat) options 34 | - [ ] Animated chat sequences 35 | - [ ] Automated animated sequences, using character lengths for timing 36 | - [ ] Automate hiding of message meta based on adjacent blocks 37 | - [ ] Message Images 38 | - [ ] Message Files 39 | 40 | ## LICENSE 41 | 42 | Chatterbox is available under the General Public License v2+. 43 | 44 | For more, see the LICENSE file. 45 | For more on included third-party code, see VENDORS. 46 | -------------------------------------------------------------------------------- /VENDORS: -------------------------------------------------------------------------------- 1 | --- 2 | Photonkit - https://github.com/connors/photon 3 | Copyright @connors. Released under MIT. 4 | --- 5 | Salesforce Design System - https://www.lightningdesignsystem.com/components/chat/ 6 | Copyright (c) 2015-present, Salesforce.com, Inc. 7 | All rights reserved. 8 | 9 | Redistribution and use in source and binary forms, with or without 10 | modification, are permitted provided that the following conditions are met: 11 | * Redistributions of source code must retain the above copyright 12 | notice, this list of conditions and the following disclaimer. 13 | * Redistributions in binary form must reproduce the above copyright 14 | notice, this list of conditions and the following disclaimer in the 15 | documentation and/or other materials provided with the distribution. 16 | * Neither the name of the Salesforce.com nor the 17 | names of its contributors may be used to endorse or promote products 18 | derived from this software without specific prior written permission. 19 | 20 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 21 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 22 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 23 | DISCLAIMED. IN NO EVENT SHALL COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY 24 | DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 25 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 26 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND 27 | ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 28 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 29 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 30 | --- 31 | devices.css - https://picturepan2.github.io/devices.css/ 32 | MIT License 33 | 34 | Copyright (c) 2017 Yan Zhu 35 | 36 | Permission is hereby granted, free of charge, to any person obtaining a copy 37 | of this software and associated documentation files (the "Software"), to deal 38 | in the Software without restriction, including without limitation the rights 39 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 40 | copies of the Software, and to permit persons to whom the Software is 41 | furnished to do so, subject to the following conditions: 42 | 43 | The above copyright notice and this permission notice shall be included in all 44 | copies or substantial portions of the Software. 45 | 46 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 47 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 48 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 49 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 50 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 51 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 52 | SOFTWARE. -------------------------------------------------------------------------------- /chatterbox.php: -------------------------------------------------------------------------------- 1 | "{$prefix}-block", 57 | 'editor_style' => "{$prefix}-editor", 58 | 'style' => "{$prefix}-block", 59 | ) 60 | ); 61 | } 62 | \add_action( 'init', __NAMESPACE__ . '\\init' ); 63 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "chatterbox", 3 | "version": "0.1.1", 4 | "description": "Create chat threads using WordPress Blocks inside app and device wrappers.", 5 | "author": "Dave Ryan", 6 | "license": "GPL-2.0-or-later", 7 | "main": "build/index.js", 8 | "scripts": { 9 | "build": "wp-scripts build", 10 | "format:js": "wp-scripts format-js", 11 | "lint:css": "wp-scripts lint-style", 12 | "lint:js": "wp-scripts lint-js", 13 | "start": "wp-scripts start", 14 | "packages-update": "wp-scripts packages-update" 15 | }, 16 | "devDependencies": { 17 | "@wordpress/scripts": "^8.0.1", 18 | "css-loader": "^3.5.2", 19 | "mini-css-extract-plugin": "^0.9.0", 20 | "node-sass": "^4.13.1", 21 | "sass-loader": "^8.0.2", 22 | "webpack-fix-style-only-entries": "^0.4.0", 23 | "webpack-merge": "^4.2.2" 24 | }, 25 | "dependencies": { 26 | "@salesforce-ux/design-system": "^2.11.8", 27 | "@wordpress/block-editor": "^3.9.1", 28 | "@wordpress/blocks": "^6.14.1", 29 | "@wordpress/components": "^9.4.1", 30 | "@wordpress/editor": "^9.14.1", 31 | "@wordpress/element": "^2.13.1", 32 | "@wordpress/i18n": "^3.11.0", 33 | "classnames": "^2.2.6", 34 | "devices.css": "picturepan2/devices.css", 35 | "lodash": "^4.17.15" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /readme.txt: -------------------------------------------------------------------------------- 1 | === Chatterbox === 2 | Author URI: https://www.daveryan.io 3 | Plugin URI: https://www.github.com/0aveRyan/chatterbox 4 | Contributors: dryanpress 5 | Tags: block, chat, message, mobile, gutenberg 6 | Requires at least: 5.3.2 7 | Tested up to: 5.3.2 8 | Stable tag: 0.1.1 9 | Requires PHP: 7.0.0 10 | License: GPL-2.0-or-later 11 | License URI: https://www.gnu.org/licenses/gpl-2.0.html 12 | 13 | Create chat threads using WordPress Blocks inside app and mobile wrappers. 14 | 15 | == Description == 16 | 17 | Create chat threads using WordPress Blocks inside app and mobile wrappers. 18 | 19 | Chatterbox can be used for: 20 | * Demos of chat bots 21 | * Publishing chat records in news stories 22 | * A fun way to add striking visual display to conversations 23 | 24 | At launch, Chatterbox allows display of chats with messages and timestamps in inbound and outbound styles. 25 | 26 | Chat threads can be displayed without a background, in an app container, in mobile phones and other computer screens. 27 | 28 | Learn more about what's [on the roadmap](https://github.com/0aveRyan/chatterbox#roadmap). 29 | 30 | == Installation == 31 | 32 | 1. Upload the plugin files to the `/wp-content/plugins/chatterbox` directory or search for "Chatterbox" in the WordPress Admin's Plugin screen. 33 | 1. Activate the plugin through the 'Plugins' screen in WordPress 34 | 1. Go to the Block Editor and type `/chatterbox` to get started. 35 | 36 | == Frequently Asked Questions == 37 | 38 | = Is Chatterbox a live chat service? = 39 | 40 | No, Chatterbox is a display block -- there are no interactive chat features. 41 | 42 | = Can I customize the fonts and colors? = 43 | 44 | At launch, these features aren't in Chatterbox -- hopefully in the next few months! 45 | 46 | = Wouldn't it be great it chats were animated? Had names? Avatars? Etc? = 47 | 48 | Yes. Yes it would. Those kind of features are on the [on the roadmap](https://github.com/0aveRyan/chatterbox#roadmap)! 49 | 50 | Some of these features will rely on new features in the Gutenberg project. Once those are out in the wild, Chatterbox will be getting some love. 51 | 52 | == Screenshots == 53 | 54 | 1. 55 | 56 | == Changelog == 57 | 58 | = 0.1.0 = 59 | * Initial Public Release 60 | -------------------------------------------------------------------------------- /src/chat/edit.js: -------------------------------------------------------------------------------- 1 | import { __ } from '@wordpress/i18n'; 2 | 3 | import { Fragment } from '@wordpress/element'; 4 | 5 | import { InnerBlocks } from '@wordpress/block-editor'; 6 | 7 | import classNames from 'classnames'; 8 | 9 | import { NS } from '../constants'; 10 | 11 | import { resolveChatType, deviceCssTypes } from './utils'; 12 | 13 | const MESSAGE_BLOCK = `${ NS }/message`; 14 | const ALLOWED_BLOCKS = [ MESSAGE_BLOCK ]; 15 | const CHAT_TEMPLATE = [ [ MESSAGE_BLOCK ] ]; 16 | 17 | export default ( { className } ) => { 18 | const chatType = resolveChatType( className ); 19 | 20 | const chat = ( 21 |
22 | 28 |
29 | ); 30 | 31 | return ( 32 |
33 | { chatType && 'app' === chatType && ( 34 | 35 |
36 | { chat } 37 |
38 | 39 | ) } 40 | { chatType && 'app' !== chatType && ( 41 | 42 |
48 |
49 |
{ chat }
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 | 58 | ) } 59 | { ! chatType && chat } 60 |
61 | ); 62 | }; 63 | -------------------------------------------------------------------------------- /src/chat/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * WordPress Dependencies 3 | */ 4 | import { __ } from '@wordpress/i18n'; 5 | import { registerBlockType } from '@wordpress/blocks'; 6 | 7 | import save from './save'; 8 | import edit from './edit'; 9 | 10 | import { NS } from '../constants'; 11 | 12 | registerBlockType( `${ NS }/chat`, { 13 | title: __( 'Chatterbox' ), 14 | 15 | description: __( 'A group of chat messages.' ), 16 | 17 | keywords: [ __( 'chat' ), __( 'DM' ), __( 'SMS' ) ], 18 | 19 | styles: [ 20 | { name: 'borderless', label: __( 'Borderless' ), isDefault: true }, 21 | { name: 'app', label: __( 'App' ) }, 22 | { name: 'imac', label: __( 'iMac' ) }, 23 | { name: 'iphone', label: __( 'iPhone' ) }, 24 | { name: 'laptop', label: __( 'Laptop' ) }, 25 | { name: 'pixel', label: __( 'Pixel' ) }, 26 | ], 27 | 28 | category: 'layout', 29 | 30 | icon: 'format-chat', 31 | 32 | supports: { 33 | html: false, 34 | }, 35 | 36 | edit, 37 | 38 | save, 39 | } ); 40 | -------------------------------------------------------------------------------- /src/chat/save.js: -------------------------------------------------------------------------------- 1 | import { Fragment } from '@wordpress/element'; 2 | import { InnerBlocks } from '@wordpress/block-editor'; 3 | import classNames from 'classnames'; 4 | 5 | import { resolveChatType } from './utils'; 6 | 7 | export default ( { attributes } ) => { 8 | const { className } = attributes; 9 | 10 | const chatType = resolveChatType( className ); 11 | 12 | const chat = ( 13 |
14 | 17 |
18 | ); 19 | 20 | return ( 21 |
22 | { chatType && 'app' === chatType && ( 23 | 24 |
25 | { chat } 26 |
27 | 28 | ) } 29 | { chatType && 'app' !== chatType && ( 30 | 31 |
37 |
38 |
{ chat }
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 | 47 | ) } 48 | { ! chatType && chat } 49 |
50 | ); 51 | }; 52 | -------------------------------------------------------------------------------- /src/chat/utils.js: -------------------------------------------------------------------------------- 1 | import { intersection } from 'lodash'; 2 | 3 | export const resolveChatType = ( className = '' ) => { 4 | return mapTypeFromClasses( className ); 5 | }; 6 | 7 | export const mapTypeFromClasses = ( className ) => { 8 | const blockClasses = className.split( ' ' ); 9 | 10 | const styleClasses = [ 11 | 'is-style-app', 12 | 'is-style-imac', 13 | 'is-style-iphone', 14 | 'is-style-laptop', 15 | 'is-style-pixel', 16 | ]; 17 | 18 | const mapPublicClass = { 19 | 'is-style-app': 'app', 20 | 'is-style-imac': 'imac-pro', 21 | 'is-style-iphone': 'iphone-x', 22 | 'is-style-laptop': 'surface-book', 23 | 'is-style-pixel': 'google-pixel', 24 | }; 25 | 26 | const matches = intersection( styleClasses, blockClasses ); 27 | if ( matches[ 0 ] ) { 28 | let match = matches[ 0 ]; 29 | return mapPublicClass[ match ]; 30 | } 31 | 32 | return false; 33 | }; 34 | -------------------------------------------------------------------------------- /src/constants.js: -------------------------------------------------------------------------------- 1 | export const NS = 'chatterbox'; 2 | -------------------------------------------------------------------------------- /src/editor.scss: -------------------------------------------------------------------------------- 1 | .block-editor-block-list__block[data-type="chatterbox/message"] { 2 | margin-top: 0 !important; 3 | margin-bottom: 0 !important; 4 | } -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import './chat/'; 2 | import './message/'; 3 | -------------------------------------------------------------------------------- /src/message/edit.js: -------------------------------------------------------------------------------- 1 | import { __ } from '@wordpress/i18n'; 2 | 3 | import { RichText } from '@wordpress/block-editor'; 4 | 5 | import { InspectorControls } from '@wordpress/editor'; 6 | 7 | import { PanelBody, TextControl } from '@wordpress/components'; 8 | 9 | import { Fragment } from '@wordpress/element'; 10 | 11 | import classNames from 'classnames'; 12 | 13 | import { resolveMessageType } from './utils'; 14 | 15 | export default ( { className, attributes, setAttributes } ) => { 16 | const { content, timestamp } = attributes; 17 | 18 | const type = resolveMessageType( className ); 19 | 20 | return ( 21 | 22 | 23 | 24 | 28 | setAttributes( { timestamp } ) 29 | } 30 | /> 31 | 32 | 33 |
  • 40 |
    41 |
    42 |
    48 | 49 | 56 | setAttributes( { content } ) 57 | } 58 | /> 59 | 60 |
    61 | { timestamp && ( 62 |
    66 | 71 | setAttributes( { timestamp } ) 72 | } 73 | allowedFormats={ [] } 74 | /> 75 |
    76 | ) } 77 |
    78 |
    79 |
    • 80 |     81 | ); 82 | }; 83 | -------------------------------------------------------------------------------- /src/message/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @wordpress dependencies 3 | */ 4 | import { __ } from '@wordpress/i18n'; 5 | import { registerBlockType } from '@wordpress/blocks'; 6 | 7 | import save from './save'; 8 | import edit from './edit'; 9 | 10 | import { NS } from '../constants'; 11 | 12 | registerBlockType( `${ NS }/message`, { 13 | title: __( 'Message' ), 14 | 15 | description: __( 'A chat message.' ), 16 | 17 | category: 'layout', 18 | 19 | inserter: false, 20 | 21 | parent: [ `${ NS }/chat` ], 22 | 23 | icon: 'admin-comments', 24 | 25 | supports: { 26 | html: false, 27 | reusable: false, 28 | }, 29 | 30 | styles: [ 31 | { name: 'inbound', label: __( 'Inbound' ), isDefault: true }, 32 | { name: 'outbound', label: __( 'Outbound' ) }, 33 | { name: 'event', label: __( 'Event' ) }, 34 | ], 35 | 36 | attributes: { 37 | content: { 38 | type: 'string', 39 | }, 40 | timestamp: { 41 | type: 'string', 42 | }, 43 | }, 44 | 45 | edit, 46 | 47 | save, 48 | } ); 49 | -------------------------------------------------------------------------------- /src/message/save.js: -------------------------------------------------------------------------------- 1 | import { __ } from '@wordpress/i18n'; 2 | 3 | import { RichText } from '@wordpress/block-editor'; 4 | 5 | import classNames from 'classnames'; 6 | 7 | import { resolveMessageType } from './utils'; 8 | 9 | export default ( { attributes } ) => { 10 | const { className, content, timestamp } = attributes; 11 | 12 | const type = resolveMessageType( className ); 13 | 14 | return ( 15 |
  • 22 |
    23 |
    24 |
    30 | 31 |
    32 | { timestamp && ( 33 |
    37 | 41 |
    42 | ) } 43 |
    44 |
    45 |
    • 46 | ); 47 | }; 48 | -------------------------------------------------------------------------------- /src/message/utils.js: -------------------------------------------------------------------------------- 1 | export const resolveMessageType = ( className = '' ) => { 2 | if ( className.includes( 'is-style-event' ) ) { 3 | return 'event'; 4 | } else if ( className.includes( 'is-style-outbound' ) ) { 5 | return 'outbound'; 6 | } else { 7 | return 'inbound'; 8 | } 9 | }; 10 | -------------------------------------------------------------------------------- /src/style-app.scss: -------------------------------------------------------------------------------- 1 | .chatterbox-app-toolbar { 2 | min-height: 22px; 3 | box-shadow: inset 0 1px 0 #f5f4f5; 4 | background-color: #e8e6e8; 5 | background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e8e6e8), color-stop(100%,#d1cfd1)); 6 | background-image: -webkit-linear-gradient(top, #e8e6e8 0%, #d1cfd1 100%); 7 | background-image: linear-gradient(to bottom, #e8e6e8 0%, #d1cfd1 100%); 8 | &:before, 9 | &:after { 10 | display: table; 11 | content: " "; 12 | } 13 | &:after { 14 | clear: both; 15 | } 16 | } 17 | 18 | .chatterbox-app-header { 19 | border-bottom: 1px solid #c2c0c2; 20 | } 21 | 22 | .chatterbox-app-footer { 23 | border-top: 1px solid #c2c0c2; 24 | } 25 | -------------------------------------------------------------------------------- /src/style.scss: -------------------------------------------------------------------------------- 1 | @import "../node_modules/@salesforce-ux/design-system/css/chat/base/index.css"; 2 | @import "./style-app.scss"; 3 | @import "../node_modules/devices.css/src/reset"; 4 | @import "../node_modules/devices.css/src/imac-pro"; 5 | @import "../node_modules/devices.css/src/iphone-x"; 6 | @import "../node_modules/devices.css/src/surface-book"; 7 | @import "../node_modules/devices.css/src/google-pixel"; 8 | 9 | .wp-block-chatterbox-chat { 10 | ul { 11 | padding-left: 0 !important; 12 | padding-right: 0 !important; 13 | margin-left: 0 !important; 14 | margin-right: 0 !important; 15 | } 16 | &.is-style-app { 17 | border: 1px solid #ddd; 18 | .slds-chat { 19 | background: #f9f9f9; 20 | margin-bottom: 0 !important; 21 | } 22 | ul { 23 | padding: 1rem 1.5rem !important; 24 | margin: 0 !important; 25 | } 26 | } 27 | .device-imac-pro { 28 | width: auto; 29 | .device-frame, 30 | .device-frame:after, 31 | .device-content { 32 | width: auto; 33 | } 34 | } 35 | .device-iphone-x, 36 | .device-google-pixel { 37 | margin: 0 auto; 38 | } 39 | .device-iphone-x .device-content { 40 | padding-top: 4rem; 41 | } 42 | &.is-style-laptop { 43 | transform: scale( 0.9 ); 44 | position: relative; 45 | left: -6rem; 46 | @media screen and (max-width: 420px) { 47 | left: -11.5rem; 48 | transform: scale(0.66); 49 | } 50 | } 51 | .device-content { 52 | background: #f9f9f9; 53 | padding: 1rem; 54 | overflow-y: scroll; 55 | overflow-x: hidden; 56 | } 57 | } 58 | 59 | .wp-block-chatterbox-message { 60 | font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; 61 | padding-left: 0 !important; 62 | margin-left: 0 !important; 63 | } 64 | 65 | .wp-block-chatterbox-message .slds-chat-message__text { 66 | font-size: 16px; 67 | max-width: fit-content; 68 | } 69 | 70 | .is-style-outbound .slds-chat-message__meta { 71 | margin-left: auto !important; 72 | max-width: fit-content; 73 | } -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require( 'path' ); 2 | const wpScriptsConfig = require( '@wordpress/scripts/config/webpack.config' ); 3 | const merge = require( 'webpack-merge' ); 4 | 5 | const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' ); 6 | const FixStyleOnlyEntriesPlugin = require( 'webpack-fix-style-only-entries' ); 7 | 8 | const isProduction = process.env.NODE_ENV === 'production'; 9 | 10 | const chatterboxConfig = merge( wpScriptsConfig, { 11 | entry: { 12 | 'chatterbox-editor': path.resolve( process.cwd(), 'src/editor.scss' ), 13 | 'chatterbox-style': path.resolve( process.cwd(), 'src/style.scss' ), 14 | }, 15 | module: { 16 | rules: [ 17 | { 18 | test: /\.scss$/, 19 | use: [ 20 | MiniCssExtractPlugin.loader, 21 | { 22 | loader: 'css-loader', 23 | options: { url: false, sourceMap: ! isProduction }, 24 | }, 25 | { 26 | loader: 'sass-loader', 27 | options: { sourceMap: ! isProduction }, 28 | }, 29 | ], 30 | }, 31 | ], 32 | }, 33 | plugins: [ 34 | new FixStyleOnlyEntriesPlugin(), 35 | new MiniCssExtractPlugin( { filename: '[name].css' } ), 36 | ], 37 | } ); 38 | 39 | module.exports = chatterboxConfig; 40 | --------------------------------------------------------------------------------