Thorsten
f37dc9fa76
FastAPI + Postgres backend with fastapi-users auth, games/characters CRUD, and a WebSocket chat endpoint where an x.ai Grok DM narrates play, rolls dice, and maintains character sheets via tool calls. React + Tailwind frontend covers registration/login, game list and creation, participation-code join flow, character viewer, and a real-time chat session view. Docker Compose skeleton (Postgres + backend) included; Caddy/frontend container wiring is deferred to the deploy milestone. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import { useState } from "react";
|
|
|
|
export default function SendMessageForm({
|
|
onSend,
|
|
disabled,
|
|
}: {
|
|
onSend: (content: string) => Promise<void>;
|
|
disabled?: boolean;
|
|
}) {
|
|
const [content, setContent] = useState("");
|
|
const [sending, setSending] = useState(false);
|
|
|
|
async function handleSend() {
|
|
const trimmed = content.trim();
|
|
if (!trimmed || sending) return;
|
|
setSending(true);
|
|
try {
|
|
await onSend(trimmed);
|
|
setContent("");
|
|
} finally {
|
|
setSending(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="flex gap-2 border-t border-slate-800 p-3">
|
|
<textarea
|
|
value={content}
|
|
onChange={(e) => setContent(e.target.value)}
|
|
disabled={disabled || sending}
|
|
placeholder="Was tust du?"
|
|
rows={2}
|
|
className="flex-1 resize-none rounded bg-slate-800 px-3 py-2 outline-none focus:ring-2 focus:ring-amber-400 disabled:opacity-50"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={handleSend}
|
|
disabled={disabled || sending || !content.trim()}
|
|
className="shrink-0 self-end rounded bg-amber-500 px-4 py-2 font-semibold text-slate-950 hover:bg-amber-400 disabled:opacity-50"
|
|
>
|
|
{sending ? "…" : "Senden"}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|