projectmoon
/
perplexica
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(message-input): prevent message when loading

This commit is contained in:
ItzCrazyKns 2024-04-24 10:06:56 +05:30
parent 571cdc1b4e
commit 3b66808e7d
No known key found for this signature in database
GPG Key ID: 8162927C7CCE3065
3 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/components/Chat.tsx
View File

@ -77,7 +77,7 @@ const Chat = ({
className="bottom-24 lg:bottom-10 fixed z-40" className="bottom-24 lg:bottom-10 fixed z-40"
style={{ width: dividerWidth }} style={{ width: dividerWidth }}
> >
<MessageInput sendMessage={sendMessage} /> <MessageInput loading={loading} sendMessage={sendMessage} />
</div> </div>
)} )}
</div> </div>

9
ui/components/MessageInput.tsx
View File

@ -6,8 +6,10 @@ import { Attach, CopilotToggle } from './MessageInputActions';
const MessageInput = ({ const MessageInput = ({
sendMessage, sendMessage,
loading,
}: { }: {
sendMessage: (message: string) => void; sendMessage: (message: string) => void;
loading: boolean;
}) => { }) => {
const [copilotEnabled, setCopilotEnabled] = useState(false); const [copilotEnabled, setCopilotEnabled] = useState(false);
const [message, setMessage] = useState(''); const [message, setMessage] = useState('');
@ -25,12 +27,13 @@ const MessageInput = ({
return ( return (
<form <form
onSubmit={(e) => { onSubmit={(e) => {
if (loading) return;
e.preventDefault(); e.preventDefault();
sendMessage(message); sendMessage(message);
setMessage(''); setMessage('');
}} }}
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key === 'Enter' && !e.shiftKey) { if (e.key === 'Enter' && !e.shiftKey && !loading) {
e.preventDefault(); e.preventDefault();
sendMessage(message); sendMessage(message);
setMessage(''); setMessage('');
@ -58,7 +61,7 @@ const MessageInput = ({
setCopilotEnabled={setCopilotEnabled} setCopilotEnabled={setCopilotEnabled}
/> />
<button <button
disabled={message.trim().length === 0} disabled={message.trim().length === 0 || loading}
className="bg-[#24A0ED] text-white disabled:text-white/50 hover:bg-opacity-85 transition duration-100 disabled:bg-[#ececec21] rounded-full p-2" className="bg-[#24A0ED] text-white disabled:text-white/50 hover:bg-opacity-85 transition duration-100 disabled:bg-[#ececec21] rounded-full p-2"
> >
<ArrowUp className="bg-background" size={17} /> <ArrowUp className="bg-background" size={17} />
@ -74,7 +77,7 @@ const MessageInput = ({
setCopilotEnabled={setCopilotEnabled} setCopilotEnabled={setCopilotEnabled}
/> />
<button <button
disabled={message.trim().length === 0} disabled={message.trim().length === 0 || loading}
className="bg-[#24A0ED] text-white disabled:text-white/50 hover:bg-opacity-85 transition duration-100 disabled:bg-[#ececec21] rounded-full p-2" className="bg-[#24A0ED] text-white disabled:text-white/50 hover:bg-opacity-85 transition duration-100 disabled:bg-[#ececec21] rounded-full p-2"
> >
<ArrowUp className="bg-background" size={17} /> <ArrowUp className="bg-background" size={17} />

4
ui/components/SettingsDialog.tsx
View File

@ -168,7 +168,7 @@ const SettingsDialog = ({
<p className="text-white/70 text-sm">OpenAI API Key</p> <p className="text-white/70 text-sm">OpenAI API Key</p>
<input <input
type="text" type="text"
placeholder='OpenAI API Key' placeholder="OpenAI API Key"
defaultValue={config.openeaiApiKey} defaultValue={config.openeaiApiKey}
onChange={(e) => onChange={(e) =>
setConfig({ setConfig({
@ -183,7 +183,7 @@ const SettingsDialog = ({
<p className="text-white/70 text-sm">Ollama API URL</p> <p className="text-white/70 text-sm">Ollama API URL</p>
<input <input
type="text" type="text"
placeholder='Ollama API URL' placeholder="Ollama API URL"
defaultValue={config.ollamaApiUrl} defaultValue={config.ollamaApiUrl}
onChange={(e) => onChange={(e) =>
setConfig({ setConfig({