Spaces:
Sleeping
Sleeping
File size: 2,836 Bytes
90cbf22 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
import clsx from 'clsx';
import { useMutation, useQuery } from 'convex/react';
import { KeyboardEvent, useRef, useState } from 'react';
import { api } from '../../convex/_generated/api';
import { Id } from '../../convex/_generated/dataModel';
import { useSendInput } from '../hooks/sendInput';
import { Player } from '../../convex/aiTown/player';
import { Conversation } from '../../convex/aiTown/conversation';
export function MessageInput({
worldId,
engineId,
humanPlayer,
conversation,
}: {
worldId: Id<'worlds'>;
engineId: Id<'engines'>;
humanPlayer: Player;
conversation: Conversation;
}) {
const descriptions = useQuery(api.world.gameDescriptions, { worldId });
const humanName = descriptions?.playerDescriptions.find((p) => p.playerId === humanPlayer.id)
?.name;
const inputRef = useRef<HTMLParagraphElement>(null);
const inflightUuid = useRef<string | undefined>();
const writeMessage = useMutation(api.messages.writeMessage);
const startTyping = useSendInput(engineId, 'startTyping');
const currentlyTyping = conversation.isTyping;
const onKeyDown = async (e: KeyboardEvent) => {
e.stopPropagation();
// Set the typing indicator if we're not submitting.
if (e.key !== 'Enter') {
console.log(inflightUuid.current);
if (currentlyTyping || inflightUuid.current !== undefined) {
return;
}
inflightUuid.current = crypto.randomUUID();
try {
// Don't show a toast on error.
await startTyping({
playerId: humanPlayer.id,
conversationId: conversation.id,
messageUuid: inflightUuid.current,
});
} finally {
inflightUuid.current = undefined;
}
return;
}
// Send the current message.
e.preventDefault();
if (!inputRef.current) {
return;
}
const text = inputRef.current.innerText;
inputRef.current.innerText = '';
if (!text) {
return;
}
let messageUuid = inflightUuid.current;
if (currentlyTyping && currentlyTyping.playerId === humanPlayer.id) {
messageUuid = currentlyTyping.messageUuid;
}
messageUuid = messageUuid || crypto.randomUUID();
await writeMessage({
worldId,
playerId: humanPlayer.id,
conversationId: conversation.id,
text,
messageUuid,
});
};
return (
<div className="leading-tight mb-6">
<div className="flex gap-4">
<span className="uppercase flex-grow">{humanName}</span>
</div>
<div className={clsx('bubble', 'bubble-mine')}>
<p
className="bg-white -mx-3 -my-1"
ref={inputRef}
contentEditable
style={{ outline: 'none' }}
tabIndex={0}
placeholder="Type here"
onKeyDown={(e) => onKeyDown(e)}
/>
</div>
</div>
);
}
|