reorganize components and add root import plugin

src/components/main/Message.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+export default function Message({ sender, text }) {
+  const props = {
+    className:
+      'group w-full border-b border-black/10 text-gray-800 dark:border-gray-900/50 dark:bg-gray-800 dark:text-gray-100'
+  };
+
+  if (sender === 'GPT') {
+    props.className =
+      'group w-full border-b border-black/10 bg-gray-100 text-gray-800 dark:border-gray-900/50 dark:bg-[#444654] dark:text-gray-100';
+  }
+
+  return (
+    <div {...props}>
+      <div className="m-auto flex gap-4 p-4 text-base md:max-w-2xl md:gap-6 md:py-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
+        <strong className="relative flex w-[30px] flex-col items-end">{sender}:</strong>
+        <div className="relative flex w-[calc(100%-50px)] flex-col gap-1 whitespace-pre-wrap md:gap-3 lg:w-[calc(100%-115px)]">
+          {text}
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/main/Messages.jsx

@@ -0,0 +1,31 @@
+import React, { useEffect, useRef } from 'react';
+import Message from './Message';
+
+export default function Messages({ messages }) {
+  const messagesEndRef = useRef(null);
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  };
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages]);
+
+  // <div className="flex-1 overflow-hidden">
+  // <div className="w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group dark:bg-gray-800">
+  // </div>
+  // <div className="flex h-full text-sm dark:bg-gray-800"></div>;
+  return (
+    <div className="flex-1 overflow-y-auto ">
+      {messages.map((message, i) => (
+        <Message
+          key={i}
+          sender={message.sender}
+          text={message.text}
+        />
+      ))}
+      <div ref={messagesEndRef} />
+    </div>
+  );
+}

src/components/main/SubmitButton.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+export default function SubmitButton({ onClick, disabled }) {
+  return (
+    <button onClick={onClick} className="absolute bottom-1.5 right-1 rounded-md p-1 text-gray-500 hover:bg-gray-100 disabled:hover:bg-transparent dark:hover:bg-gray-900 dark:hover:text-gray-400 dark:disabled:hover:bg-transparent md:bottom-2.5 md:right-2">
+      <svg
+        stroke="currentColor"
+        fill="none"
+        strokeWidth="2"
+        viewBox="0 0 24 24"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="mr-1 h-4 w-4"
+        height="1em"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <line
+          x1="22"
+          y1="2"
+          x2="11"
+          y2="13"
+        />
+        <polygon points="22 2 15 22 11 13 2 9 22 2" />
+      </svg>
+    </button>
+  );
+}

src/components/main/TextChat.jsx

@@ -0,0 +1,86 @@
+import React, { useState } from 'react';
+import SubmitButton from './SubmitButton';
+import TextareaAutosize from 'react-textarea-autosize';
+import handleSubmit from '~/utils/handleSubmit';
+import { useSelector, useDispatch } from 'react-redux';
+import { setConversation } from '~/store/convoSlice';
+import { setMessages } from '~/store/messageSlice';
+
+export default function TextChat({ messages, reloadConvos }) {
+  const [text, setText] = useState('');
+  const dispatch = useDispatch();
+  const convo = useSelector((state) => state.convo);
+
+  const submitMessage = () => {
+    const payload = text.trim();
+    const currentMsg = { sender: 'user', text: payload, current: true };
+    dispatch(setMessages([...messages, currentMsg]));
+    setText('');
+    const messageHandler = (data) => {
+      dispatch(setMessages([...messages, currentMsg, { sender: 'GPT', text: data }]));
+    };
+    const convoHandler = (data) => {
+      if (convo.conversationId === null && convo.parentMessageId === null) {
+        const { conversationId, parentMessageId } = data;
+        dispatch(setConversation({ conversationId, parentMessageId: data.id }));
+      }
+
+      reloadConvos();
+    };
+    console.log('User Input:', payload);
+    handleSubmit(payload, messageHandler, convo, convoHandler);
+  };
+
+  const handleKeyPress = (e) => {
+    if (e.key === 'Enter' && e.shiftKey) {
+      console.log('Enter + Shift');
+    }
+
+    if (e.key === 'Enter' && !e.shiftKey) {
+      submitMessage();
+    }
+  };
+
+  // <>
+  //   <textarea
+  //     className="m-10 h-16 p-4"
+  //     value={text}
+  //     onKeyUp={handleKeyPress}
+  //     onChange={(e) => setText(e.target.value)}
+  //   />
+  // </>
+  return (
+    <div className="md:bg-vert-light-gradient dark:md:bg-vert-dark-gradient w-full border-t bg-white dark:border-white/20 dark:bg-gray-800 md:border-t-0 md:border-transparent md:!bg-transparent md:dark:border-transparent">
+      <form className="stretch mx-2 flex flex-row gap-3 pt-2 last:mb-2 md:last:mb-6 lg:mx-auto lg:max-w-3xl lg:pt-6">
+        <div className="relative flex h-full flex-1 md:flex-col">
+          <div className="ml-1 mt-1.5 flex justify-center gap-0 md:m-auto md:mb-2 md:w-full md:gap-2" />
+          <div className="relative flex w-full flex-grow flex-col rounded-md border border-black/10 bg-white py-2 shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-gray-900/50 dark:bg-gray-700 dark:text-white dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] md:py-3 md:pl-4">
+            <TextareaAutosize
+              tabIndex="0"
+              // style={{maxHeight: '200px', height: '24px', overflowY: 'hidden'}}
+              rows="1"
+              value={text}
+              onKeyUp={handleKeyPress}
+              onChange={(e) => setText(e.target.value)}
+              placeholder=""
+              className="m-0 h-auto max-h-52 resize-none overflow-auto border-0 bg-transparent p-0 pl-2 pr-7 leading-6 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:pl-0"
+            />
+            <SubmitButton onClick={() => submitMessage()} />
+          </div>
+        </div>
+      </form>
+      <div className="px-3 pt-2 pb-3 text-center text-xs text-black/50 dark:text-white/50 md:px-4 md:pt-3 md:pb-6">
+        <a
+          href="https://help.openai.com/en/articles/6825453-chatgpt-release-notes"
+          target="_blank"
+          rel="noreferrer"
+          className="underline"
+        >
+          ChatGPT Jan 30 Version
+        </a>
+        . Free Research Preview. Our goal is to make AI systems more natural and safe to
+        interact with. Your feedback will help us improve.
+      </div>
+    </div>
+  );
+}