Spaces:
Running
Running
File size: 2,587 Bytes
6e29063 |
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 96 97 |
import { Button, Group, Textarea } from "@mantine/core";
import { usePubSub } from "create-pubsub/react";
import { Suspense, lazy } from "react";
import {
chatGenerationStatePubSub,
chatInputPubSub,
followUpQuestionPubSub,
} from "../../modules/pubSub";
const IconSend = lazy(() =>
import("@tabler/icons-react").then((module) => ({
default: module.IconSend,
})),
);
interface ChatInputAreaProps {
onKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
handleSend: (textToSend?: string) => void;
}
function ChatInputArea({ onKeyDown, handleSend }: ChatInputAreaProps) {
const [input, setInput] = usePubSub(chatInputPubSub);
const [generationState] = usePubSub(chatGenerationStatePubSub);
const [followUpQuestion] = usePubSub(followUpQuestionPubSub);
const isGenerating =
generationState.isGeneratingResponse &&
!generationState.isGeneratingFollowUpQuestion;
const placeholder =
followUpQuestion || "Anything else you would like to know?";
const onChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
setInput(event.target.value);
};
const handleKeyDownWithPlaceholder = (
event: React.KeyboardEvent<HTMLTextAreaElement>,
) => {
if (input.trim() === "" && followUpQuestion) {
if (event.key === "Enter" && !event.shiftKey) {
event.preventDefault();
handleSend(followUpQuestion);
return;
}
}
onKeyDown(event);
};
const handleSendWithPlaceholder = () => {
if (input.trim() === "" && followUpQuestion) {
handleSend(followUpQuestion);
} else {
handleSend();
}
};
return (
<Group align="flex-end" style={{ position: "relative" }}>
<Textarea
aria-label="Chat input"
placeholder={placeholder}
value={input}
onChange={onChange}
onKeyDown={handleKeyDownWithPlaceholder}
autosize
minRows={1}
maxRows={4}
style={{ flexGrow: 1, paddingRight: "50px" }}
disabled={isGenerating}
/>
<Button
aria-label="Send message"
size="sm"
variant="default"
onClick={handleSendWithPlaceholder}
loading={isGenerating}
style={{
height: "100%",
position: "absolute",
right: 0,
top: 0,
bottom: 0,
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0,
}}
>
<Suspense fallback={<span>→</span>}>
<IconSend size={16} />
</Suspense>
</Button>
</Group>
);
}
export default ChatInputArea;
|