310c6c4424
* Integrate chat from upstream Substantially borrowed from upstream ref: 13a208ee88e55 (before they started editing generated artefacts instead of source). Integrated, including: - Remove previously removed features: emoji, hats, and name colors - Compensate for lack of unified root template - Add React build process to Dockerfile and `bootstrap/init.sh` - Preliminary integration of chat websocket workers For testing, modify `supervisord.conf.dev` to put chat on port 80 and the site service on some other port. Then visit: http://localhost/chat Still to do: - Access control for specific small-groups (and admins probably): Set the values somewhere (site_settings.json? Redis?) and use for authorization in `chat_is_allowed`. - Proxying only /chat to the websocket workers - Chat persistance across restarts: either Redis devops or to DB * Add nginx server to do appropriate redirection. * Add necessary columns to User. * Wire up chat permissions. * Reload chat on source change. * Add a better structure for slash commands and add/remove functionality. * Stop putting up previews of slash commands. * We require more whitespace. * Strip DMs out entirely, I currently do not want to deal with them. * Change "Users Online" to just "Users". * Clean up a little more DM detritus. * Save chat history in database. * Remove unnecessary hefty query to the DB. * Clean up optimistic messages. * Initial implementation of notification icon. * Update readme a little bit. * Fix notification highlight (mostly). * Remove chat version number that will never be updated. * Fix: Errors on logged-out users. * Add function to nuke the chat state. * Update DB. * Add a dedicated deployable docker image. * Fix: init_build.sh execute bit not set. * Whoops, screwed up the abort() call. * Relax chat rate limiter. * Remove a somewhat silly comment. * Remove an unnecessary g.db.add(). --------- Co-authored-by: TLSM <duolsm@outlook.com>
81 lines
2 KiB
TypeScript
81 lines
2 KiB
TypeScript
import React, {
|
|
ChangeEvent,
|
|
KeyboardEvent,
|
|
FormEvent,
|
|
useCallback,
|
|
useRef,
|
|
useMemo,
|
|
useState,
|
|
useEffect,
|
|
} from "react";
|
|
import cx from "classnames";
|
|
import { useChat } from "../../hooks";
|
|
import "./UserInput.css";
|
|
|
|
interface Props {
|
|
large?: boolean;
|
|
onFocus(): void;
|
|
onBlur(): void;
|
|
}
|
|
|
|
export function UserInput({ large = false, onFocus, onBlur }: Props) {
|
|
const { draft, sendMessage, updateDraft } = useChat();
|
|
const builtChatInput = useRef<HTMLTextAreaElement>(null);
|
|
const form = useRef<HTMLFormElement>(null);
|
|
const [typingOffset, setTypingOffset] = useState(0);
|
|
const handleChange = useCallback(
|
|
(event: ChangeEvent<HTMLTextAreaElement>) => {
|
|
const input = event.target.value;
|
|
updateDraft(input);
|
|
},
|
|
[]
|
|
);
|
|
const handleSendMessage = useCallback(
|
|
(event?: FormEvent<HTMLFormElement>) => {
|
|
event?.preventDefault();
|
|
sendMessage();
|
|
},
|
|
[sendMessage]
|
|
);
|
|
const handleKeyUp = useCallback(
|
|
(event: KeyboardEvent<HTMLTextAreaElement>) => {
|
|
if (event.key === "Enter" && !event.shiftKey) {
|
|
handleSendMessage();
|
|
}
|
|
},
|
|
[handleSendMessage]
|
|
);
|
|
const handleFocus = useCallback(() => {
|
|
builtChatInput.current?.scrollIntoView({ behavior: "smooth" });
|
|
onFocus();
|
|
}, [onFocus]);
|
|
|
|
return (
|
|
<form ref={form} className="UserInput" onSubmit={handleSendMessage}>
|
|
<textarea
|
|
ref={builtChatInput}
|
|
id="builtChatInput"
|
|
className={cx("UserInput-input form-control", {
|
|
"UserInput-input__large": large
|
|
})}
|
|
minLength={1}
|
|
maxLength={1000}
|
|
rows={1}
|
|
onChange={handleChange}
|
|
onKeyUp={handleKeyUp}
|
|
onFocus={handleFocus}
|
|
onBlur={onBlur}
|
|
placeholder="Message"
|
|
autoComplete="off"
|
|
value={draft}
|
|
/>
|
|
<button
|
|
className="btn btn-secondary"
|
|
disabled={draft.length === 0}
|
|
onClick={sendMessage}
|
|
>
|
|
<i className="UserInput-emoji fas fa-reply" />
|
|
</button>
|
|
</form>
|
|
);
|
|
}
|