Instant sync.

tsx
import { CoMap, CoList, co, Group, ID } from "jazz-tools";
import { createJazzReactContext, DemoAuth } from "jazz-react";
import { createRoot } from "react-dom/client";
import { useIframeHashRouter } from "hash-slash";
import { ChatScreen } from "./chatScreen.tsx";
 
export class Message extends CoMap {
  text = co.string;
}
 
export class Chat extends CoList.Of(co.ref(Message)) {}
 
const Jazz = createJazzReactContext({
  auth: DemoAuth({ appName: "Jazz Chat" }),
  peer: `wss://mesh.jazz.tools/?key=you@example.com`
});
export const { useAccount, useCoState } = Jazz;
 
 
function App() {
  const { me, logOut } = useAccount();
 
  const createChat = () => {
    const group = Group.create({ owner: me });
    group.addMember("everyone", "writer");
    const chat = Chat.create([], { owner: group });
    location.hash = "/chat/" + chat.id;
  };
 
  return <div className="flex flex-col items-center justify-between w-screen h-screen p-2 dark:bg-black dark:text-white">
    <div className="rounded mb-5 px-2 py-1 text-sm self-end">
      {me.profile?.name} · <button onClick={logOut}>Log Out</button>
    </div>
    {useIframeHashRouter().route({
      '/': () => createChat() as never,
      '/chat/:id': (id) => <ChatScreen chatID={id as ID<Chat>} />
    })}
  </div>;
}
 
createRoot(document.getElementById("root")!)
  .render(<Jazz.Provider><App/></Jazz.Provider>);

tsx
import { ID } from 'jazz-tools';
import { Chat, Message, useCoState } from './app.tsx';
 
export function ChatScreen(props: { chatID: ID<Chat> }) {
  const chat = useCoState(Chat, props.chatID, [{}]);
 
  return chat ? <div className='w-full max-w-xl h-full flex flex-col items-stretch'>
    {chat.length > 0
      ? chat.map((msg) => <ChatBubble msg={msg} key={msg.id} />)
      : <div className='m-auto text-sm'>(Empty chat)</div>}
    <ChatInput onSubmit={(text) => {
      chat.push(
        Message.create({ text }, { owner: chat._owner })
      );
    }} />
  </div> : <div>Loading...</div>;
}
 
function ChatBubble(props: { msg: Message }) {
  const lastEdit = props.msg._edits.text;
  const align = lastEdit.by?.isMe ? 'items-end' : 'items-start';
 
  return <div className={`${align} flex flex-col`}>
    <div className='rounded-xl bg-stone-100 dark:bg-stone-700 dark:text-white py-2 px-4 mt-2 min-w-[5rem]'>
      { props.msg.text }
    </div>
    <div className='text-xs text-neutral-500 ml-2'>
      { lastEdit.by?.profile?.name }{' '}
      { lastEdit.madeAt?.toLocaleTimeString() }
    </div>
  </div>;
}
 
function ChatInput(props: { onSubmit: (text: string) => void }) {
  return <input className='rounded p-2 border mt-auto dark:bg-black dark:text-white border-stone-300 dark:border-stone-700'
    placeholder='Type a message and press Enter'
    onKeyDown={({ key, currentTarget: input }) => {
      if (key !== 'Enter' || !input.value) return;
      props.onSubmit(input.value);
      input.value = '';
    }} />;
}