schihei/chatbot-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add more mobile ui (#18)

Browse Source
This commit is contained in:
Mckay Wrigley
2023-03-19 06:48:57 -06:00
committed by GitHub
parent 263c5c33ae
commit 7e6651dea7
7 changed files with 141 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Chat/ChatInput.tsx
+41 -29
View File
@@ -32,14 +32,27 @@ export const ChatInput: FC<Props> = ({ onSend, messageIsStreaming }) => {
alert("Please enter a message");
return;
}
onSend({ role: "user", content });
setContent("");
if (textareaRef && textareaRef.current) {
textareaRef.current.blur();
}
};
const isMobile = () => {
const userAgent = typeof window.navigator === "undefined" ? "" : navigator.userAgent;
const mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile|CriOS/i;
return mobileRegex.test(userAgent);
};
const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
if (!isTyping && e.key === "Enter" && !e.shiftKey) {
e.preventDefault();
handleSend();
if (!isTyping) {
if (e.key === "Enter" && !e.shiftKey && !isMobile()) {
e.preventDefault();
handleSend();
}
}
};
@@ -51,32 +64,31 @@ export const ChatInput: FC<Props> = ({ onSend, messageIsStreaming }) => {
}, [content]);
return (
<div className="relative">
<div className="absolute bottom-[-80px] w-full">
<textarea
ref={textareaRef}
className="rounded-lg pl-4 pr-8 py-3 w-full focus:outline-none max-h-[280px] dark:bg-[#40414F] dark:border-opacity-50 dark:border-neutral-800 dark:text-neutral-100 border border-neutral-300 shadow text-neutral-900"
style={{
resize: "none",
bottom: `${textareaRef?.current?.scrollHeight}px`,
maxHeight: "400px",
overflow: "auto"
}}
placeholder="Type a message..."
value={content}
rows={1}
onCompositionStart={() => setIsTyping(true)}
onCompositionEnd={() => setIsTyping(false)}
onChange={handleChange}
onKeyDown={handleKeyDown}
/>
<button
className="absolute right-2 bottom-[14px] text-neutral-400 p-2 hover:dark:bg-neutral-800 hover:bg-neutral-400 hover:text-white rounded-md"
onClick={handleSend}
>
<IconSend size={18} />
</button>
</div>
<div className="fixed sm:absolute bottom-4 sm:bottom-8 w-full sm:w-1/2 px-2 left-0 sm:left-[280px] lg:left-[200px] right-0 ml-auto mr-auto">
<textarea
ref={textareaRef}
className="rounded-lg pl-4 pr-8 py-3 w-full focus:outline-none max-h-[280px] dark:bg-[#40414F] dark:border-opacity-50 dark:border-neutral-800 dark:text-neutral-100 border border-neutral-300 shadow text-neutral-900"
style={{
resize: "none",
bottom: `${textareaRef?.current?.scrollHeight}px`,
maxHeight: "400px",
overflow: "auto"
}}
placeholder="Type a message..."
value={content}
rows={1}
onCompositionStart={() => setIsTyping(true)}
onCompositionEnd={() => setIsTyping(false)}
onChange={handleChange}
onKeyDown={handleKeyDown}
/>
<button
className="absolute right-5 bottom-[18px] focus:outline-none text-neutral-800 hover:text-neutral-900 dark:text-neutral-100 dark:hover:text-neutral-200 dark:bg-opacity-50 hover:bg-neutral-200 p-1 rounded-sm"
onClick={handleSend}
>
<IconSend size={18} />
</button>
</div>
);
};