From c56c45d9048f1b0ac4a96dcb4ce9de78aee4350d Mon Sep 17 00:00:00 2001 From: Gabe Kangas Date: Wed, 4 May 2022 16:55:54 -0700 Subject: [PATCH] Use contentEditable for chat input field --- web/components/chat/ChatContainer.tsx | 3 +- .../chat/ChatTextField/ChatTextField.tsx | 54 +++++++++++-------- web/components/stores/ClientConfigStore.tsx | 14 +++-- web/components/ui/Content/Content.tsx | 2 +- web/package-lock.json | 22 ++++++++ web/package.json | 1 + web/stories/ChatContainer.stories.tsx | 14 ++++- web/stories/ChatTextField.stories.tsx | 33 +++++++++++- 8 files changed, 112 insertions(+), 31 deletions(-) diff --git a/web/components/chat/ChatContainer.tsx b/web/components/chat/ChatContainer.tsx index a2f66d952..142e15c7e 100644 --- a/web/components/chat/ChatContainer.tsx +++ b/web/components/chat/ChatContainer.tsx @@ -26,15 +26,14 @@ export default function ChatContainer(props: Props) { default: return null; } - return null; }; - console.log(messages); return (

Chat

(websocketServiceAtom); - useEffect(() => { - console.log({ value }); - }, [value]); + const text = useRef(value); + + // large is 40px + const size = 'small'; + + const handleChange = evt => { + text.current = evt.target.value; + }; return (
- - setValue(e.target.value)} - size={size} - placeholder="Enter text and hit enter!" - /> - @@ -36,3 +44,7 @@ export default function ChatTextField(props: Props) {
); } + +ChatTextField.defaultProps = { + value: '', +}; diff --git a/web/components/stores/ClientConfigStore.tsx b/web/components/stores/ClientConfigStore.tsx index 9a92b133b..24cac5f2b 100644 --- a/web/components/stores/ClientConfigStore.tsx +++ b/web/components/stores/ClientConfigStore.tsx @@ -59,6 +59,11 @@ export const chatMessagesAtom = atom({ default: [] as ChatMessage[], }); +export const websocketServiceAtom = atom({ + key: 'websocketServiceAtom', + default: null, +}); + export function ClientConfigStore() { const setClientConfig = useSetRecoilState(clientConfigStateAtom); const setChatVisibility = useSetRecoilState(chatVisibilityAtom); @@ -67,8 +72,10 @@ export function ClientConfigStore() { const setChatDisplayName = useSetRecoilState(chatDisplayNameAtom); const [appState, setAppState] = useRecoilState(appStateAtom); const [accessToken, setAccessToken] = useRecoilState(accessTokenAtom); + const [websocketService, setWebsocketService] = + useRecoilState(websocketServiceAtom); - let websocketService: WebsocketService; + // let websocketService: WebsocketService; const updateClientConfig = async () => { try { @@ -126,8 +133,9 @@ export function ClientConfigStore() { const startChat = async () => { setChatState(ChatState.Loading); try { - websocketService = new WebsocketService(accessToken, '/ws'); - websocketService.handleMessage = handleMessage; + const ws = new WebsocketService(accessToken, '/ws'); + ws.handleMessage = handleMessage; + setWebsocketService(ws); } catch (error) { console.error(`ChatService -> startChat() ERROR: \n${error}`); } diff --git a/web/components/ui/Content/Content.tsx b/web/components/ui/Content/Content.tsx index bc941cd59..6e4700e71 100644 --- a/web/components/ui/Content/Content.tsx +++ b/web/components/ui/Content/Content.tsx @@ -1,5 +1,5 @@ import { useRecoilValue } from 'recoil'; -import { Layout, Tabs, Layout, Row, Col, Tabs } from 'antd'; +import { Layout, Row, Col, Tabs } from 'antd'; import Grid from 'antd/lib/card/Grid'; import { chatVisibilityAtom, diff --git a/web/package-lock.json b/web/package-lock.json index d82a85105..e8e065293 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -26,6 +26,7 @@ "rc-util": "5.17.0", "react": "17.0.2", "react-chartkick": "0.5.2", + "react-contenteditable": "^3.3.6", "react-dom": "17.0.2", "react-linkify": "1.0.0-alpha", "react-markdown": "8.0.0", @@ -26414,6 +26415,18 @@ "react-dom": ">=16.8.0" } }, + "node_modules/react-contenteditable": { + "version": "3.3.6", + "resolved": "https://registry.npmjs.org/react-contenteditable/-/react-contenteditable-3.3.6.tgz", + "integrity": "sha512-61+Anbmzggel1sP7nwvxq3d2woD3duR5R89RoLGqKan1A+nruFIcmLjw2F+qqk70AyABls0BDKzE1vqS1UIF1g==", + "dependencies": { + "fast-deep-equal": "^3.1.3", + "prop-types": "^15.7.1" + }, + "peerDependencies": { + "react": ">=16.3" + } + }, "node_modules/react-docgen": { "version": "5.4.0", "resolved": "https://registry.npmjs.org/react-docgen/-/react-docgen-5.4.0.tgz", @@ -51724,6 +51737,15 @@ "integrity": "sha512-M1TJH2X3RXEt12sWkpa6hLc/bbYS0H6F4rIqjQZ+RxNBstpY67d9TrFXtqdZwhpmBXcCwEi7stKqFue3ZRkiOg==", "requires": {} }, + "react-contenteditable": { + "version": "3.3.6", + "resolved": "https://registry.npmjs.org/react-contenteditable/-/react-contenteditable-3.3.6.tgz", + "integrity": "sha512-61+Anbmzggel1sP7nwvxq3d2woD3duR5R89RoLGqKan1A+nruFIcmLjw2F+qqk70AyABls0BDKzE1vqS1UIF1g==", + "requires": { + "fast-deep-equal": "^3.1.3", + "prop-types": "^15.7.1" + } + }, "react-docgen": { "version": "5.4.0", "resolved": "https://registry.npmjs.org/react-docgen/-/react-docgen-5.4.0.tgz", diff --git a/web/package.json b/web/package.json index 17841fcff..758f914d5 100644 --- a/web/package.json +++ b/web/package.json @@ -29,6 +29,7 @@ "rc-util": "5.17.0", "react": "17.0.2", "react-chartkick": "0.5.2", + "react-contenteditable": "^3.3.6", "react-dom": "17.0.2", "react-linkify": "1.0.0-alpha", "react-markdown": "8.0.0", diff --git a/web/stories/ChatContainer.stories.tsx b/web/stories/ChatContainer.stories.tsx index db507d5ea..77d50a769 100644 --- a/web/stories/ChatContainer.stories.tsx +++ b/web/stories/ChatContainer.stories.tsx @@ -7,11 +7,21 @@ import { ChatState } from '../interfaces/application-state'; export default { title: 'owncast/Chat/Chat messages container', component: ChatContainer, - parameters: {}, + parameters: { + docs: { + description: { + component: ` +- Renders a list of messages from the bottom up. +- Auto-scrolls to the bottom as new messages come in. +- Pauses auto-scroll when reading backlog. +- Uses [Virtuoso](https://virtuoso.dev/) for rendering.`, + }, + }, + }, } as ComponentMeta; const testMessages = - '[{"type":"CHAT","id":"wY-MEXwnR","timestamp":"2022-04-28T20:30:27.001762726Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"this is a test message"},{"type":"CHAT","id":"VhLGEXwnR","timestamp":"2022-04-28T20:30:28.806999545Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"Hit 3"},{"type":"CHAT","id":"GguMEuw7R","timestamp":"2022-04-28T20:30:34.500150601Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"Jkjk"},{"type":"CHAT","id":"y_-VEXwnR","timestamp":"2022-04-28T20:31:32.695583044Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"I\u0026#39;m doing alright. How about you Hatnix?"},{"type":"CHAT","id":"qAaKEuwng","timestamp":"2022-04-28T20:34:16.22275314Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"Oh shiet I didn\u0026#39;t think you would kill him"},{"type":"CHAT","id":"8wUFEuwnR","timestamp":"2022-04-28T20:34:21.624898714Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"Hahaha, ruthless"},{"type":"CHAT","id":"onYcPuQnR","timestamp":"2022-04-28T20:34:50.671024312Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"I\u0026#39;ve never played it before"},{"type":"CHAT","id":"kORyEXQ7R","timestamp":"2022-04-28T20:40:29.761977233Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"brb real quick"},{"type":"CHAT","id":"F3DvsuQ7g","timestamp":"2022-04-28T20:50:29.451341783Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"I\u0026#39;m back"},{"type":"CHAT","id":"AH2vsXwnR","timestamp":"2022-04-28T20:50:33.872156152Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"Whoa what happened here?"},{"type":"CHAT","id":"xGkOsuw7R","timestamp":"2022-04-28T20:50:53.202147658Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"Your dwarf was half naked."},{"type":"CHAT","id":"opIdsuw7g","timestamp":"2022-04-28T20:50:59.631595947Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"lol"},{"type":"CHAT","id":"JpwdsuQnR","timestamp":"2022-04-28T20:51:18.065535459Z","user":{"id":"vbh9gtPng","displayName":"π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","displayColor":276,"createdAt":"2022-03-16T21:02:32.009965702Z","previousNames":["goth-volhard","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π’½π’Άπ“…π“…π“Ž π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π“ˆπ“‰π’Άπ’Άπ“‡π’»π’Άπ’Άπ“‡π‘’π‘’π“‡β„’","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’"],"nameChangedAt":"2022-04-14T21:51:50.97992512Z","scopes":[""]},"body":"evening did i just see you running around in... nothing"},{"type":"CHAT","id":"R4WKsXw7R","timestamp":"2022-04-28T20:51:28.064914803Z","user":{"id":"vbh9gtPng","displayName":"π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","displayColor":276,"createdAt":"2022-03-16T21:02:32.009965702Z","previousNames":["goth-volhard","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π’½π’Άπ“…π“…π“Ž π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π“ˆπ“‰π’Άπ’Άπ“‡π’»π’Άπ’Άπ“‡π‘’π‘’π“‡β„’","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’"],"nameChangedAt":"2022-04-14T21:51:50.97992512Z","scopes":[""]},"body":"^^"},{"type":"CHAT","id":"g-PKyXw7g","timestamp":"2022-04-28T20:51:47.936500772Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"Lol Starfarer, so my eyes didnt deceive me."},{"type":"CHAT","id":"fV8Ksuw7R","timestamp":"2022-04-28T20:51:49.588744112Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"hahahaha"},{"type":"CHAT","id":"TaStyuwnR","timestamp":"2022-04-28T20:52:38.127528579Z","user":{"id":"vbh9gtPng","displayName":"π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","displayColor":276,"createdAt":"2022-03-16T21:02:32.009965702Z","previousNames":["goth-volhard","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π’½π’Άπ“…π“…π“Ž π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π“ˆπ“‰π’Άπ’Άπ“‡π’»π’Άπ’Άπ“‡π‘’π‘’π“‡β„’","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’"],"nameChangedAt":"2022-04-14T21:51:50.97992512Z","scopes":[""]},"body":"lol sounds nice"},{"type":"CHAT","id":"JGposuwng","timestamp":"2022-04-28T20:53:49.329567087Z","user":{"id":"GCa3J9P7R","displayName":"(ghost of)^10 * toudy49","displayColor":147,"createdAt":"2022-03-22T21:49:25.284237821Z","previousNames":["lucid-pike","toudy49","ghost of toudy49","ghost of ghost of toudy49","ghost of ghost of ghost of toudy49","ghost of ghost of ghost of ghost of toudy49","ghost of ghost of ghost of ghost of ghost of toudy49","ghost ofghost of ghost of ghost of ghost of ghost of toudy49","ghostof ghost of ghost of ghost of ghost of ghost of toudy49","(ghost of)^6 * toudy49","(ghost of)^7 * toudy49","(ghost of)^8 * toudy49","(ghost of)^9 * toudy49","(ghost of)^10 * toudy49"],"nameChangedAt":"2022-04-11T21:01:19.938445828Z","scopes":[""]},"body":"!hydrate"},{"type":"CHAT","id":"T4tTsuwng","timestamp":"2022-04-28T20:53:49.391636551Z","user":{"id":"fKINHKpnR","displayName":"hatnixbot","displayColor":325,"createdAt":"2021-11-24T08:11:32Z","previousNames":["hatnixbot"],"scopes":["CAN_SEND_SYSTEM_MESSAGES","CAN_SEND_MESSAGES","HAS_ADMIN_ACCESS"]},"body":"test 123"},{"type":"CHAT","id":"wUJTsuw7R","timestamp":"2022-04-28T20:53:54.073218761Z","user":{"id":"GCa3J9P7R","displayName":"(ghost of)^10 * toudy49","displayColor":147,"createdAt":"2022-03-22T21:49:25.284237821Z","previousNames":["lucid-pike","toudy49","ghost of toudy49","ghost of ghost of toudy49","ghost of ghost of ghost of toudy49","ghost of ghost of ghost of ghost of toudy49","ghost of ghost of ghost of ghost of ghost of toudy49","ghost ofghost of ghost of ghost of ghost of ghost of toudy49","ghostof ghost of ghost of ghost of ghost of ghost of toudy49","(ghost of)^6 * toudy49","(ghost of)^7 * toudy49","(ghost of)^8 * toudy49","(ghost of)^9 * toudy49","(ghost of)^10 * toudy49"],"nameChangedAt":"2022-04-11T21:01:19.938445828Z","scopes":[""]},"body":"!stretch"},{"type":"CHAT","id":"S_Joyuw7R","timestamp":"2022-04-28T20:53:54.119778013Z","user":{"id":"fKINHKpnR","displayName":"hatnixbot","displayColor":325,"createdAt":"2021-11-24T08:11:32Z","previousNames":["hatnixbot"],"scopes":["CAN_SEND_SYSTEM_MESSAGES","CAN_SEND_MESSAGES","HAS_ADMIN_ACCESS"]},"body":"blah blah"},{"type":"CHAT","id":"MtYTyXwnR","timestamp":"2022-04-28T20:53:57.796985761Z","user":{"id":"vbh9gtPng","displayName":"π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","displayColor":276,"createdAt":"2022-03-16T21:02:32.009965702Z","previousNames":["goth-volhard","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π’½π’Άπ“…π“…π“Ž π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π“ˆπ“‰π’Άπ’Άπ“‡π’»π’Άπ’Άπ“‡π‘’π‘’π“‡β„’","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’"],"nameChangedAt":"2022-04-14T21:51:50.97992512Z","scopes":[""]},"body":"heyy toudy"}]'; + '[{"type":"CHAT","id":"wY-MEXwnR","timestamp":"2022-04-28T20:30:27.001762726Z","user":{"id":"h_5GQ6E7R","displayName":"UserDisplayName42","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"this is a test message"},{"type":"CHAT","id":"VhLGEXwnR","timestamp":"2022-04-28T20:30:28.806999545Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"Hit 3"},{"type":"CHAT","id":"GguMEuw7R","timestamp":"2022-04-28T20:30:34.500150601Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"Jkjk"},{"type":"CHAT","id":"y_-VEXwnR","timestamp":"2022-04-28T20:31:32.695583044Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"I\u0026#39;m doing alright. How about you Hatnix?"},{"type":"CHAT","id":"qAaKEuwng","timestamp":"2022-04-28T20:34:16.22275314Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"Oh shiet I didn\u0026#39;t think you would kill him"},{"type":"CHAT","id":"8wUFEuwnR","timestamp":"2022-04-28T20:34:21.624898714Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"Hahaha, ruthless"},{"type":"CHAT","id":"onYcPuQnR","timestamp":"2022-04-28T20:34:50.671024312Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"I\u0026#39;ve never played it before"},{"type":"CHAT","id":"kORyEXQ7R","timestamp":"2022-04-28T20:40:29.761977233Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"brb real quick"},{"type":"CHAT","id":"F3DvsuQ7g","timestamp":"2022-04-28T20:50:29.451341783Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"I\u0026#39;m back"},{"type":"CHAT","id":"AH2vsXwnR","timestamp":"2022-04-28T20:50:33.872156152Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"Whoa what happened here?"},{"type":"CHAT","id":"xGkOsuw7R","timestamp":"2022-04-28T20:50:53.202147658Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"Your dwarf was half naked."},{"type":"CHAT","id":"opIdsuw7g","timestamp":"2022-04-28T20:50:59.631595947Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"lol"},{"type":"CHAT","id":"JpwdsuQnR","timestamp":"2022-04-28T20:51:18.065535459Z","user":{"id":"vbh9gtPng","displayName":"π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","displayColor":276,"createdAt":"2022-03-16T21:02:32.009965702Z","previousNames":["goth-volhard","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π’½π’Άπ“…π“…π“Ž π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π“ˆπ“‰π’Άπ’Άπ“‡π’»π’Άπ’Άπ“‡π‘’π‘’π“‡β„’","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’"],"nameChangedAt":"2022-04-14T21:51:50.97992512Z","scopes":[""]},"body":"evening did i just see you running around in... nothing"},{"type":"CHAT","id":"R4WKsXw7R","timestamp":"2022-04-28T20:51:28.064914803Z","user":{"id":"vbh9gtPng","displayName":"π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","displayColor":276,"createdAt":"2022-03-16T21:02:32.009965702Z","previousNames":["goth-volhard","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π’½π’Άπ“…π“…π“Ž π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π“ˆπ“‰π’Άπ’Άπ“‡π’»π’Άπ’Άπ“‡π‘’π‘’π“‡β„’","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’"],"nameChangedAt":"2022-04-14T21:51:50.97992512Z","scopes":[""]},"body":"^^"},{"type":"CHAT","id":"g-PKyXw7g","timestamp":"2022-04-28T20:51:47.936500772Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"Lol Starfarer, so my eyes didnt deceive me."},{"type":"CHAT","id":"fV8Ksuw7R","timestamp":"2022-04-28T20:51:49.588744112Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"hahahaha"},{"type":"CHAT","id":"TaStyuwnR","timestamp":"2022-04-28T20:52:38.127528579Z","user":{"id":"vbh9gtPng","displayName":"π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","displayColor":276,"createdAt":"2022-03-16T21:02:32.009965702Z","previousNames":["goth-volhard","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π’½π’Άπ“…π“…π“Ž π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π“ˆπ“‰π’Άπ’Άπ“‡π’»π’Άπ’Άπ“‡π‘’π‘’π“‡β„’","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’"],"nameChangedAt":"2022-04-14T21:51:50.97992512Z","scopes":[""]},"body":"lol sounds nice"},{"type":"CHAT","id":"JGposuwng","timestamp":"2022-04-28T20:53:49.329567087Z","user":{"id":"GCa3J9P7R","displayName":"(ghost of)^10 * toudy49","displayColor":147,"createdAt":"2022-03-22T21:49:25.284237821Z","previousNames":["lucid-pike","toudy49","ghost of toudy49","ghost of ghost of toudy49","ghost of ghost of ghost of toudy49","ghost of ghost of ghost of ghost of toudy49","ghost of ghost of ghost of ghost of ghost of toudy49","ghost ofghost of ghost of ghost of ghost of ghost of toudy49","ghostof ghost of ghost of ghost of ghost of ghost of toudy49","(ghost of)^6 * toudy49","(ghost of)^7 * toudy49","(ghost of)^8 * toudy49","(ghost of)^9 * toudy49","(ghost of)^10 * toudy49"],"nameChangedAt":"2022-04-11T21:01:19.938445828Z","scopes":[""]},"body":"!hydrate"},{"type":"CHAT","id":"T4tTsuwng","timestamp":"2022-04-28T20:53:49.391636551Z","user":{"id":"fKINHKpnR","displayName":"hatnixbot","displayColor":325,"createdAt":"2021-11-24T08:11:32Z","previousNames":["hatnixbot"],"scopes":["CAN_SEND_SYSTEM_MESSAGES","CAN_SEND_MESSAGES","HAS_ADMIN_ACCESS"]},"body":"test 123"},{"type":"CHAT","id":"wUJTsuw7R","timestamp":"2022-04-28T20:53:54.073218761Z","user":{"id":"GCa3J9P7R","displayName":"(ghost of)^10 * toudy49","displayColor":147,"createdAt":"2022-03-22T21:49:25.284237821Z","previousNames":["lucid-pike","toudy49","ghost of toudy49","ghost of ghost of toudy49","ghost of ghost of ghost of toudy49","ghost of ghost of ghost of ghost of toudy49","ghost of ghost of ghost of ghost of ghost of toudy49","ghost ofghost of ghost of ghost of ghost of ghost of toudy49","ghostof ghost of ghost of ghost of ghost of ghost of toudy49","(ghost of)^6 * toudy49","(ghost of)^7 * toudy49","(ghost of)^8 * toudy49","(ghost of)^9 * toudy49","(ghost of)^10 * toudy49"],"nameChangedAt":"2022-04-11T21:01:19.938445828Z","scopes":[""]},"body":"!stretch"},{"type":"CHAT","id":"S_Joyuw7R","timestamp":"2022-04-28T20:53:54.119778013Z","user":{"id":"fKINHKpnR","displayName":"hatnixbot","displayColor":325,"createdAt":"2021-11-24T08:11:32Z","previousNames":["hatnixbot"],"scopes":["CAN_SEND_SYSTEM_MESSAGES","CAN_SEND_MESSAGES","HAS_ADMIN_ACCESS"]},"body":"blah blah"},{"type":"CHAT","id":"MtYTyXwnR","timestamp":"2022-04-28T20:53:57.796985761Z","user":{"id":"vbh9gtPng","displayName":"π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","displayColor":276,"createdAt":"2022-03-16T21:02:32.009965702Z","previousNames":["goth-volhard","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π’½π’Άπ“…π“…π“Ž π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π“ˆπ“‰π’Άπ’Άπ“‡π’»π’Άπ’Άπ“‡π‘’π‘’π“‡β„’","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’"],"nameChangedAt":"2022-04-14T21:51:50.97992512Z","scopes":[""]},"body":"heyy toudy"}]'; const messages: ChatMessage[] = JSON.parse(testMessages); const AddMessagesChatExample = args => { diff --git a/web/stories/ChatTextField.stories.tsx b/web/stories/ChatTextField.stories.tsx index 573ab1708..0f117dc9a 100644 --- a/web/stories/ChatTextField.stories.tsx +++ b/web/stories/ChatTextField.stories.tsx @@ -1,15 +1,44 @@ import React from 'react'; import { ComponentStory, ComponentMeta } from '@storybook/react'; +import { RecoilRoot } from 'recoil'; import ChatTextField from '../components/chat/ChatTextField/ChatTextField'; export default { title: 'owncast/Chat/Input text field', component: ChatTextField, - parameters: {}, + parameters: { + docs: { + description: { + component: ` +- This is a element using \`contentEditable\` in order to support rendering emoji images inline. +- Emoji button shows emoji picker. +- Should show one line by default, but grow to two lines as needed. +- The Send button should be hidden for desktop layouts and be shown for mobile layouts.`, + }, + }, + }, } as ComponentMeta; // eslint-disable-next-line @typescript-eslint/no-unused-vars -const Template: ComponentStory = args => ; +const Template: ComponentStory = args => ( + + + +); // eslint-disable-next-line @typescript-eslint/no-unused-vars export const Example = Template.bind({}); + +export const LongerMessage = Template.bind({}); +LongerMessage.args = { + value: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', +}; + +LongerMessage.parameters = { + docs: { + description: { + story: 'Should display two lines of text and scroll to display more.', + }, + }, +};