mirror of
https://github.com/nomadic-labs/safesupport-chatbox
synced 2025-12-15 23:13:24 +00:00
Compare commits
5 Commits
v1.1.3
...
dependabot
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
a5a80c4166 | ||
|
|
569a8e76c2 | ||
|
|
b76eebcacb | ||
|
|
c592253707 | ||
|
|
ebb06b3377 |
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "safesupport-chatbox",
|
||||
"version": "1.1.3",
|
||||
"version": "1.1.5",
|
||||
"description": "A secure and private embeddable chatbox that connects to Riot",
|
||||
"main": "dist/chatbox.js",
|
||||
"scripts": {
|
||||
|
||||
@@ -99,6 +99,7 @@
|
||||
width: 400px;
|
||||
max-width: calc(100vw - 10px);
|
||||
border-bottom: none;
|
||||
margin: 0;
|
||||
animation-duration: 0.2s;
|
||||
animation-fill-mode: forwards;
|
||||
|
||||
|
||||
@@ -68,7 +68,6 @@
|
||||
.message {
|
||||
&.from-bot {
|
||||
color: transparentize($light-text-color, 0.3);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
&.from-me {
|
||||
|
||||
@@ -599,103 +599,105 @@ class ChatBox extends React.Component {
|
||||
const inputLabel = 'Send a message...'
|
||||
|
||||
return (
|
||||
<div className="docked-widget" role="complementary">
|
||||
<Transition in={opened} timeout={250} onExited={this.handleWidgetExit} onEntered={this.handleWidgetEnter}>
|
||||
{(status) => {
|
||||
return (
|
||||
<div className={`widget widget-${status}`} aria-hidden={!opened}>
|
||||
<div id="safesupport-chatbox" aria-haspopup="dialog">
|
||||
<Header handleToggleOpen={this.handleToggleOpen} opened={opened} handleExitChat={this.handleExitChat} />
|
||||
<div id="safesupport">
|
||||
<div className="docked-widget" role="complementary">
|
||||
<Transition in={opened} timeout={250} onExited={this.handleWidgetExit} onEntered={this.handleWidgetEnter}>
|
||||
{(status) => {
|
||||
return (
|
||||
<div className={`widget widget-${status}`} aria-hidden={!opened}>
|
||||
<div id="safesupport-chatbox" aria-haspopup="dialog">
|
||||
<Header handleToggleOpen={this.handleToggleOpen} opened={opened} handleExitChat={this.handleExitChat} />
|
||||
|
||||
<div className="message-window" ref={this.messageWindow}>
|
||||
<div className="messages">
|
||||
<div className={`message from-bot`}>
|
||||
<div className="text">{ this.props.introMessage }</div>
|
||||
</div>
|
||||
|
||||
<div className={`message from-bot`}>
|
||||
<div className="text">Please read the full <a href={this.props.termsUrl} ref={this.termsUrl} target='_blank' rel='noopener noreferrer'>terms and conditions</a>. By using this chat, you agree to these terms.</div>
|
||||
</div>
|
||||
|
||||
<div className={`message from-bot`}>
|
||||
<div className="text">{ this.props.agreementMessage }</div>
|
||||
</div>
|
||||
|
||||
<div className={`message from-bot`}>
|
||||
<div className="text buttons">
|
||||
{`👉`}
|
||||
<button className="btn" id="accept" onClick={this.handleAcceptTerms}>YES</button>
|
||||
<button className="btn" id="reject" onClick={this.handleRejectTerms}>NO</button>
|
||||
<div className="message-window" ref={this.messageWindow}>
|
||||
<div className="messages">
|
||||
<div className={`message from-bot`}>
|
||||
<div className="text">{ this.props.introMessage }</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{
|
||||
messages.map((message, index) => {
|
||||
return(
|
||||
<Message key={message.id} message={message} userId={userId} botId={this.props.botId} client={this.state.client} />
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
{
|
||||
messagesInFlight.map((message, index) => {
|
||||
return(
|
||||
<Message key={`message-inflight-${index}`} message={{ content: { body: message }}} placeholder={true} />
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
{ typingStatus &&
|
||||
<div className="notices">
|
||||
<div role="status">{typingStatus}</div>
|
||||
<div className={`message from-bot`}>
|
||||
<div className="text">Please read the full <a href={this.props.termsUrl} ref={this.termsUrl} target='_blank' rel='noopener noreferrer'>terms and conditions</a>. By using this chat, you agree to these terms.</div>
|
||||
</div>
|
||||
|
||||
<div className={`message from-bot`}>
|
||||
<div className="text">{ this.props.agreementMessage }</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
{ Boolean(Object.keys(decryptionErrors).length) &&
|
||||
<div className={`message from-bot`}>
|
||||
<div className="text buttons">
|
||||
{`Restart chat without encryption?`}
|
||||
<button className="btn" id="accept" onClick={this.initializeUnencryptedChat}>RESTART</button>
|
||||
{`👉`}
|
||||
<button className="btn" id="accept" onClick={this.handleAcceptTerms}>YES</button>
|
||||
<button className="btn" id="reject" onClick={this.handleRejectTerms}>NO</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
{ !ready && <div className={`loader`}>loading...</div> }
|
||||
{
|
||||
messages.map((message, index) => {
|
||||
return(
|
||||
<Message key={message.id} message={message} userId={userId} botId={this.props.botId} client={this.state.client} />
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
{
|
||||
messagesInFlight.map((message, index) => {
|
||||
return(
|
||||
<Message key={`message-inflight-${index}`} message={{ content: { body: message }}} placeholder={true} />
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
{ typingStatus &&
|
||||
<div className="notices">
|
||||
<div role="status">{typingStatus}</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
{ Boolean(Object.keys(decryptionErrors).length) &&
|
||||
<div className={`message from-bot`}>
|
||||
<div className="text buttons">
|
||||
{`Restart chat without encryption?`}
|
||||
<button className="btn" id="accept" onClick={this.initializeUnencryptedChat}>RESTART</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
{ !ready && <div className={`loader`}>loading...</div> }
|
||||
</div>
|
||||
</div>
|
||||
<div className="input-window">
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<div className="message-input-container">
|
||||
<input
|
||||
id="message-input"
|
||||
type="text"
|
||||
onChange={this.handleInputChange}
|
||||
value={inputValue}
|
||||
aria-label={inputLabel}
|
||||
placeholder={inputLabel}
|
||||
autoFocus={true}
|
||||
ref={this.chatboxInput}
|
||||
/>
|
||||
{
|
||||
(status === "entered") && !isMobile &&
|
||||
<EmojiSelector
|
||||
onEmojiClick={this.onEmojiClick}
|
||||
emojiSelectorOpen={emojiSelectorOpen}
|
||||
toggleEmojiSelector={this.toggleEmojiSelector}
|
||||
closeEmojiSelector={this.closeEmojiSelector}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
<input type="submit" value="Send" id="submit" onClick={this.handleSubmit} />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div className="input-window">
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<div className="message-input-container">
|
||||
<input
|
||||
id="message-input"
|
||||
type="text"
|
||||
onChange={this.handleInputChange}
|
||||
value={inputValue}
|
||||
aria-label={inputLabel}
|
||||
placeholder={inputLabel}
|
||||
autoFocus={true}
|
||||
ref={this.chatboxInput}
|
||||
/>
|
||||
{
|
||||
(status === "entered") && !isMobile &&
|
||||
<EmojiSelector
|
||||
onEmojiClick={this.onEmojiClick}
|
||||
emojiSelectorOpen={emojiSelectorOpen}
|
||||
toggleEmojiSelector={this.toggleEmojiSelector}
|
||||
closeEmojiSelector={this.closeEmojiSelector}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
<input type="submit" value="Send" id="submit" onClick={this.handleSubmit} />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
}
|
||||
</Transition>
|
||||
{showDock && !roomId && <Dock handleToggleOpen={this.handleToggleOpen} />}
|
||||
{showDock && roomId && <Header handleToggleOpen={this.handleToggleOpen} opened={opened} handleExitChat={this.handleExitChat} />}
|
||||
)}
|
||||
}
|
||||
</Transition>
|
||||
{showDock && !roomId && <Dock handleToggleOpen={this.handleToggleOpen} />}
|
||||
{showDock && roomId && <Header handleToggleOpen={this.handleToggleOpen} opened={opened} handleExitChat={this.handleExitChat} />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
@import "variables";
|
||||
@import "loader";
|
||||
@import "chat";
|
||||
@import "dark_mode";
|
||||
#safesupport {
|
||||
@import "variables";
|
||||
@import "loader";
|
||||
@import "chat";
|
||||
@import "dark_mode";
|
||||
}
|
||||
12
yarn.lock
12
yarn.lock
@@ -8187,9 +8187,9 @@ querystring@0.2.0:
|
||||
integrity sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=
|
||||
|
||||
querystringify@^2.1.1:
|
||||
version "2.1.1"
|
||||
resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.1.1.tgz#60e5a5fd64a7f8bfa4d2ab2ed6fdf4c85bad154e"
|
||||
integrity sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA==
|
||||
version "2.2.0"
|
||||
resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
|
||||
integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
|
||||
|
||||
raf@^3.4.1:
|
||||
version "3.4.1"
|
||||
@@ -9917,9 +9917,9 @@ urix@^0.1.0:
|
||||
integrity sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=
|
||||
|
||||
url-parse@^1.4.3:
|
||||
version "1.4.7"
|
||||
resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.4.7.tgz#a8a83535e8c00a316e403a5db4ac1b9b853ae278"
|
||||
integrity sha512-d3uaVyzDB9tQoSXFvuSUNFibTd9zxd2bkVrDRvF5TmvWWQwqE4lgYJ5m+x1DbecWkw+LK4RNl2CU1hHuOKPVlg==
|
||||
version "1.5.10"
|
||||
resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.10.tgz#9d3c2f736c1d75dd3bd2be507dcc111f1e2ea9c1"
|
||||
integrity sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==
|
||||
dependencies:
|
||||
querystringify "^2.1.1"
|
||||
requires-port "^1.0.0"
|
||||
|
||||
Reference in New Issue
Block a user