mirror of
https://github.com/Safe-Support-Chat/ocrcc-chatbox
synced 2024-11-22 02:34:55 +00:00
add namespace to avoid css collistions
This commit is contained in:
parent
f262c9df0f
commit
8427e82c9d
@ -99,6 +99,7 @@
|
|||||||
width: 400px;
|
width: 400px;
|
||||||
max-width: calc(100vw - 10px);
|
max-width: calc(100vw - 10px);
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
|
margin: 0;
|
||||||
animation-duration: 0.2s;
|
animation-duration: 0.2s;
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
|
|
||||||
|
@ -599,103 +599,105 @@ class ChatBox extends React.Component {
|
|||||||
const inputLabel = 'Send a message...'
|
const inputLabel = 'Send a message...'
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="docked-widget" role="complementary">
|
<div id="safesupport">
|
||||||
<Transition in={opened} timeout={250} onExited={this.handleWidgetExit} onEntered={this.handleWidgetEnter}>
|
<div className="docked-widget" role="complementary">
|
||||||
{(status) => {
|
<Transition in={opened} timeout={250} onExited={this.handleWidgetExit} onEntered={this.handleWidgetEnter}>
|
||||||
return (
|
{(status) => {
|
||||||
<div className={`widget widget-${status}`} aria-hidden={!opened}>
|
return (
|
||||||
<div id="safesupport-chatbox" aria-haspopup="dialog">
|
<div className={`widget widget-${status}`} aria-hidden={!opened}>
|
||||||
<Header handleToggleOpen={this.handleToggleOpen} opened={opened} handleExitChat={this.handleExitChat} />
|
<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="message-window" ref={this.messageWindow}>
|
||||||
<div className="messages">
|
<div className="messages">
|
||||||
<div className={`message from-bot`}>
|
<div className={`message from-bot`}>
|
||||||
<div className="text">{ this.props.introMessage }</div>
|
<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>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{
|
<div className={`message from-bot`}>
|
||||||
messages.map((message, index) => {
|
<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>
|
||||||
return(
|
</div>
|
||||||
<Message key={message.id} message={message} userId={userId} botId={this.props.botId} client={this.state.client} />
|
|
||||||
)
|
<div className={`message from-bot`}>
|
||||||
})
|
<div className="text">{ this.props.agreementMessage }</div>
|
||||||
}
|
|
||||||
|
|
||||||
{
|
|
||||||
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>
|
</div>
|
||||||
}
|
|
||||||
|
|
||||||
{ Boolean(Object.keys(decryptionErrors).length) &&
|
|
||||||
<div className={`message from-bot`}>
|
<div className={`message from-bot`}>
|
||||||
<div className="text buttons">
|
<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>
|
||||||
</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>
|
</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>
|
||||||
</div>
|
)}
|
||||||
)}
|
}
|
||||||
}
|
</Transition>
|
||||||
</Transition>
|
{showDock && !roomId && <Dock handleToggleOpen={this.handleToggleOpen} />}
|
||||||
{showDock && !roomId && <Dock handleToggleOpen={this.handleToggleOpen} />}
|
{showDock && roomId && <Header handleToggleOpen={this.handleToggleOpen} opened={opened} handleExitChat={this.handleExitChat} />}
|
||||||
{showDock && roomId && <Header handleToggleOpen={this.handleToggleOpen} opened={opened} handleExitChat={this.handleExitChat} />}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -1,4 +1,6 @@
|
|||||||
@import "variables";
|
#safesupport {
|
||||||
@import "loader";
|
@import "variables";
|
||||||
@import "chat";
|
@import "loader";
|
||||||
@import "dark_mode";
|
@import "chat";
|
||||||
|
@import "dark_mode";
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user