refactor: dynamic documents

package.json

@@ -8,7 +8,7 @@
     "private": true,
     "scripts": {
         "docusaurus": "docusaurus",
-        "start": "concurrently --raw --kill-others 'docusaurus start' 'sleep 5s && ts-node updateSync/packageDocsSync/watch.ts --src packages --dest tdev-website/docs/packages'",
+        "start": "concurrently --raw --kill-others 'docusaurus start' 'sleep 1s && ts-node updateSync/packageDocsSync/watch.ts --src packages --dest tdev-website/docs/packages'",
         "prebuild": "ts-node updateSync/packageDocsSync/preBuild.ts --src packages --dest tdev-website/docs/packages",
         "build": "docusaurus build",
         "swizzle": "docusaurus swizzle",

packages/tdev/text-message/README.mdx

@@ -5,22 +5,24 @@ tags:
   - dynamic-documents
 ---
 
+import SimpleChat from '@tdev/text-message/components/SimpleChat';
 import DynamicDocumentRoots from '@tdev-components/documents/DynamicDocumentRoots';
 import BrowserWindow from '@tdev-components/BrowserWindow';
 
 # text-message
 
 Textnachrichten ermöglichen einen simplen Chat - dies ist eher ein PoC und die Basis für weitere, unterrichtsrelevante Interaktionsmöglichkeiten.
 
+<SimpleChat id="1c762ae7-b3f2-4379-a779-3ac4b7858eb4" name="Allgemeiner Chat" maxHeight='30em' />
 
 ```mdx
 import DynamicDocumentRoots from '@tdev-components/documents/DynamicDocumentRoots';
 
-<DynamicDocumentRoots id="732a4df4-26b0-4809-a71b-70d20ccd21a8" />
+<DynamicDocumentRoots id="dfa9db5a-7e25-4547-8c89-dc8cf0e7e712" />
 ```
 
 <BrowserWindow>
-    <DynamicDocumentRoots id="732a4df4-26b0-4809-a71b-70d20ccd21a8" />
+    <DynamicDocumentRoots id="68c2487d-1538-4843-9d76-a291bc89414c" type='simple_chat' />
 </BrowserWindow>
 
 

packages/tdev/text-message/components/SimpleChat/ChatName.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.scss';
+import { observer } from 'mobx-react-lite';
+import SimpleChat from '@tdev/text-message/models/SimpleChat';
+import PermissionsPanel from '@tdev-components/PermissionsPanel';
+import ClearHistory from './ClearHistory';
+import Button from '@tdev-components/shared/Button';
+import { mdiCircleEditOutline } from '@mdi/js';
+import TextInput from '@tdev-components/shared/TextInput';
+import { Source } from '@tdev-models/iDocument';
+
+interface Props {
+    name: string;
+    documentRootId: string;
+    simpleChat?: SimpleChat;
+}
+
+const ChatName = observer((props: Props) => {
+    const { name, documentRootId, simpleChat } = props;
+    const [edit, setEdit] = React.useState(false);
+    return (
+        <h1 className={clsx(styles.name)}>
+            {edit ? (
+                <TextInput
+                    value={simpleChat?.name || ''}
+                    onChange={(name) => {
+                        if (simpleChat) {
+                            simpleChat.setName(name);
+                        }
+                    }}
+                    onEnter={() => {
+                        simpleChat?.saveNow();
+                        setEdit(false);
+                    }}
+                    onSave={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        simpleChat?.saveNow();
+                        setEdit(false);
+                    }}
+                />
+            ) : (
+                name
+            )}
+            <div className={clsx(styles.actions)}>
+                {simpleChat && <ClearHistory simpleChat={simpleChat} />}
+                {simpleChat?.hasAdminAccess && (
+                    <Button
+                        icon={mdiCircleEditOutline}
+                        color="orange"
+                        onClick={() => {
+                            setEdit(true);
+                        }}
+                    />
+                )}
+                <PermissionsPanel documentRootId={documentRootId} />
+            </div>
+        </h1>
+    );
+});
+
+export default ChatName;

packages/tdev/text-message/components/SimpleChat/ClearHistory.tsx

@@ -0,0 +1,28 @@
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+import { Delete } from '@tdev-components/shared/Button/Delete';
+import { mdiChatRemove } from '@mdi/js';
+import SimpleChat from '@tdev/text-message/models/SimpleChat';
+import { action } from 'mobx';
+
+interface Props {
+    simpleChat: SimpleChat;
+}
+
+const ClearHistory = observer((props: Props) => {
+    if (!props.simpleChat.hasAdminAccess) {
+        return null;
+    }
+    return (
+        <Delete
+            onDelete={action(() => {
+                props.simpleChat.clearHistory();
+            })}
+            title="Chat löschen"
+            text={''}
+            confirmMessage="Chat wirklich löschen?"
+            icon={mdiChatRemove}
+        />
+    );
+});
+export default ClearHistory;

packages/tdev/text-message/components/SimpleChat/Conversation/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.scss';
+import { observer } from 'mobx-react-lite';
+import TextMessage from '../../TextMessage';
+import { default as SimpleChatModel } from '@tdev/text-message/models/SimpleChat';
+
+interface Props {
+    simpleChat: SimpleChatModel;
+    maxHeight?: string;
+}
+
+const Conversation = observer((props: Props) => {
+    const { simpleChat } = props;
+    const ref = React.useRef<HTMLDivElement>(null);
+    React.useEffect(() => {
+        if (ref.current) {
+            ref.current.scrollTo({ behavior: 'smooth', top: ref.current.scrollHeight });
+        }
+    }, [ref, simpleChat.messages.length]);
+    if (!simpleChat.canRead) {
+        return null;
+    }
+    return (
+        <div className={clsx(styles.conversation)} style={{ maxHeight: props.maxHeight }} ref={ref}>
+            {simpleChat.messages.map((message, index) => {
+                return <TextMessage key={index} message={message} />;
+            })}
+        </div>
+    );
+});
+
+export default Conversation;

packages/tdev/text-message/components/SimpleChat/CreateSimpleChat.tsx

@@ -0,0 +1,37 @@
+import clsx from 'clsx';
+import styles from './styles.module.scss';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+import { ModelMeta } from '@tdev/text-message/models/SimpleChat/ModelMeta';
+import { useCreateDocument } from '@tdev-hooks/useCreateDocument';
+import { useStore } from '@tdev-hooks/useStore';
+import Button from '@tdev-components/shared/Button';
+import { ApiState } from '@tdev-stores/iStore';
+import ChatName from './ChatName';
+
+interface Props {
+    id: string;
+    name: string;
+    maxHeight?: string;
+}
+
+const CreateSimpleChat = observer((props: Props) => {
+    const userStore = useStore('userStore');
+    const [meta] = React.useState(new ModelMeta({ name: props.name }));
+    const { create, apiState } = useCreateDocument(props.id, meta, true);
+    if (!userStore.current?.hasElevatedAccess) {
+        return null;
+    }
+    return (
+        <div className={clsx(styles.simpleChatContainer)}>
+            <ChatName name={props.name} documentRootId={props.id} />
+            <Button
+                onClick={create}
+                spin={apiState === ApiState.SYNCING}
+                disabled={apiState === ApiState.SYNCING}
+                text="Neuer Chat erstellen"
+            />
+        </div>
+    );
+});
+export default CreateSimpleChat;

packages/tdev/text-message/components/SimpleChat/NewMessage/index.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.scss';
+import { observer } from 'mobx-react-lite';
+import { mdiSend } from '@mdi/js';
+import Button from '@tdev-components/shared/Button';
+import SimpleChat from '@tdev/text-message/models/SimpleChat';
+import TextInput from '@tdev-components/shared/TextInput';
+
+interface Props {
+    simpleChat: SimpleChat;
+}
+
+const NewMessage = observer((props: Props) => {
+    const { simpleChat } = props;
+    return (
+        <div className={clsx(styles.message)}>
+            <TextInput
+                onChange={(text) => simpleChat.setMessageText(text)}
+                value={simpleChat.messageText}
+                placeholder={simpleChat.canWrite ? 'Neue Nachricht' : 'Keine Schreibrechte'}
+                readOnly={!simpleChat.canWrite}
+                onEnter={() => simpleChat.sendMessage()}
+                className={clsx(styles.input)}
+            />
+            <Button
+                icon={mdiSend}
+                onClick={() => simpleChat.sendMessage()}
+                className={clsx(styles.button)}
+                size={1.1}
+                disabled={!simpleChat.canWrite || simpleChat.messageText.trim() === ''}
+            />
+        </div>
+    );
+});
+
+export default NewMessage;

packages/tdev/text-message/TextMessages/Text/NewMessage/styles.module.scss → packages/tdev/text-message/components/SimpleChat/NewMessage/styles.module.scss

@@ -1,4 +1,5 @@
 .message {
+    margin-top: 0.5em;
     display: flex;
     .input {
         width: 100%;