57 lines
1.9 KiB
TypeScript
57 lines
1.9 KiB
TypeScript
import { useEffect, useState, useRef } from "react";
|
|
|
|
type MessageInputProps = {
|
|
handleQueryChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
|
|
handleKeyDown: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
|
|
handleQuestionSubmit: () => void;
|
|
setSimbaMode: (sdf: boolean) => void;
|
|
query: string;
|
|
isLoading: boolean;
|
|
};
|
|
|
|
export const MessageInput = ({
|
|
query,
|
|
handleKeyDown,
|
|
handleQueryChange,
|
|
handleQuestionSubmit,
|
|
setSimbaMode,
|
|
isLoading,
|
|
}: MessageInputProps) => {
|
|
return (
|
|
<div className="flex flex-col gap-4 sticky bottom-0 bg-[#3D763A] p-6 rounded-xl">
|
|
<div className="flex flex-row justify-between grow">
|
|
<textarea
|
|
className="p-3 sm:p-4 border border-blue-200 rounded-md grow bg-[#F9F5EB] min-h-[44px] resize-y"
|
|
onChange={handleQueryChange}
|
|
onKeyDown={handleKeyDown}
|
|
value={query}
|
|
rows={2}
|
|
placeholder="Type your message... (Press Enter to send, Shift+Enter for new line)"
|
|
/>
|
|
</div>
|
|
<div className="flex flex-row justify-between gap-2 grow">
|
|
<button
|
|
className={`p-3 sm:p-4 min-h-[44px] border border-blue-400 rounded-md flex-grow text-sm sm:text-base ${
|
|
isLoading
|
|
? "bg-gray-400 cursor-not-allowed opacity-50"
|
|
: "bg-[#EDA541] hover:bg-blue-400 cursor-pointer"
|
|
}`}
|
|
onClick={() => handleQuestionSubmit()}
|
|
type="submit"
|
|
disabled={isLoading}
|
|
>
|
|
{isLoading ? "Sending..." : "Submit"}
|
|
</button>
|
|
</div>
|
|
<div className="flex flex-row justify-center gap-2 grow items-center">
|
|
<input
|
|
type="checkbox"
|
|
onChange={(event) => setSimbaMode(event.target.checked)}
|
|
className="w-5 h-5 cursor-pointer"
|
|
/>
|
|
<p className="text-sm sm:text-base">simba mode?</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|