add more mobile ui (#18)

components/Chat/Chat.tsx

@@ -27,22 +27,22 @@ export const Chat: FC<Props> = ({ model, messages, messageIsStreaming, loading,
   }, [messages]);
 
   return (
-    <div className="h-full w-full flex flex-col dark:bg-[#343541]">
-      <div className="flex-1 overflow-auto">
+    <div className="flex-1 overflow-scroll dark:bg-[#343541]">
+      <div>
         {messages.length === 0 ? (
           <>
-            <div className="flex justify-center pt-8 overflow-auto">
+            <div className="flex justify-center pt-8">
               <ModelSelect
                 model={model}
                 onSelect={onSelect}
               />
             </div>
 
-            <div className="flex-1 text-4xl text-center text-neutral-300 pt-[280px]">Chatbot UI Pro</div>
+            <div className="text-4xl text-center text-neutral-600 dark:text-neutral-200 pt-[160px] sm:pt-[280px]">Chatbot UI</div>
           </>
         ) : (
           <>
-            <div className="text-center py-3 dark:bg-[#444654] dark:text-neutral-300 text-neutral-500 text-sm border border-b-neutral-300 dark:border-none">Model: {OpenAIModelNames[model]}</div>
+            <div className="flex justify-center py-2 text-neutral-500 bg-neutral-100 dark:bg-[#444654] dark:text-neutral-200 text-sm border border-b-neutral-300 dark:border-none">Model: {OpenAIModelNames[model]}</div>
 
             {messages.map((message, index) => (
               <ChatMessage
@@ -51,18 +51,21 @@ export const Chat: FC<Props> = ({ model, messages, messageIsStreaming, loading,
                 lightMode={lightMode}
               />
             ))}
+
             {loading && <ChatLoader />}
-            <div ref={messagesEndRef} />
+
+            <div
+              className="bg-white dark:bg-[#343541] h-24 sm:h-32"
+              ref={messagesEndRef}
+            />
           </>
         )}
       </div>
 
-      <div className="h-[100px] w-[340px] sm:w-[400px] md:w-[500px] lg:w-[700px] xl:w-[800px] mx-auto">
-        <ChatInput
-          messageIsStreaming={messageIsStreaming}
-          onSend={onSend}
-        />
-      </div>
+      <ChatInput
+        messageIsStreaming={messageIsStreaming}
+        onSend={onSend}
+      />
     </div>
   );
 };

components/Chat/ChatInput.tsx

@@ -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>
   );
 };