chore: reorganize client files for docker

client/src/components/Main/Footer.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export default function Footer() {
+  return (
+    <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://github.com/danny-avila/chatgpt-clone"
+        target="_blank"
+        rel="noreferrer"
+        className="underline"
+      >
+        ChatGPT Clone
+      </a>
+      . Serves and searches all conversations reliably. All AI convos under one house. Pay per
+      call and not per month (cents compared to dollars).
+    </div>
+  );
+}

client/src/components/Main/Landing.jsx

@@ -0,0 +1,112 @@
+import React, { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { setText } from '~/store/textSlice';
+import useDocumentTitle from '~/hooks/useDocumentTitle';
+import Templates from '../Prompts/Templates';
+import SunIcon from '../svg/SunIcon';
+import LightningIcon from '../svg/LightningIcon';
+import CautionIcon from '../svg/CautionIcon';
+import ChatIcon from '../svg/ChatIcon';
+
+export default function Landing({ title }) {
+  const [showingTemplates, setShowingTemplates] = useState(false);
+  const dispatch = useDispatch();
+  useDocumentTitle(title);
+
+  const clickHandler = (e) => {
+    e.preventDefault();
+    const { innerText } = e.target;
+    const quote = innerText.split('"')[1].trim();
+    dispatch(setText(quote));
+  };
+
+  const showTemplates = (e) => {
+    e.preventDefault();
+    setShowingTemplates(!showingTemplates);
+  };
+
+  return (
+    <div className="flex h-full flex-col items-center overflow-y-auto text-sm dark:bg-gray-800">
+      <div className="w-full px-6 text-gray-800 dark:text-gray-100 md:flex md:max-w-2xl md:flex-col lg:max-w-3xl">
+        <h1 className="mt-6 ml-auto mr-auto mb-10 flex items-center justify-center gap-2 text-center text-4xl font-semibold sm:mt-[20vh] sm:mb-16">
+          ChatGPT Clone
+        </h1>
+        <div className="items-start gap-3.5 text-center md:flex">
+          <div className="mb-8 flex flex-1 flex-col gap-3.5 md:mb-auto">
+            <h2 className="m-auto flex items-center gap-3 text-lg font-normal md:flex-col md:gap-2">
+              <SunIcon />
+              Examples
+            </h2>
+            <ul className="m-auto flex w-full flex-col gap-3.5 sm:max-w-md">
+              <button
+                onClick={clickHandler}
+                className="w-full rounded-md bg-gray-50 p-3 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-gray-900"
+              >
+                &quot;Explain quantum computing in simple terms&quot; →
+              </button>
+              <button
+                onClick={clickHandler}
+                className="w-full rounded-md bg-gray-50 p-3 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-gray-900"
+              >
+                &quot;Got any creative ideas for a 10 year old&apos;s birthday?&quot; →
+              </button>
+              <button
+                onClick={clickHandler}
+                className="w-full rounded-md bg-gray-50 p-3 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-gray-900"
+              >
+                &quot;How do I make an HTTP request in Javascript?&quot; →
+              </button>
+            </ul>
+          </div>
+          <div className="mb-8 flex flex-1 flex-col gap-3.5 md:mb-auto">
+            <h2 className="m-auto flex items-center gap-3 text-lg font-normal md:flex-col md:gap-2">
+              <LightningIcon />
+              Capabilities
+            </h2>
+            <ul className="m-auto flex w-full flex-col gap-3.5 sm:max-w-md">
+              <li className="w-full rounded-md bg-gray-50 p-3 dark:bg-white/5">
+                Remembers what user said earlier in the conversation
+              </li>
+              <li className="w-full rounded-md bg-gray-50 p-3 dark:bg-white/5">
+                Allows user to provide follow-up corrections
+              </li>
+              <li className="w-full rounded-md bg-gray-50 p-3 dark:bg-white/5">
+                Trained to decline inappropriate requests
+              </li>
+            </ul>
+          </div>
+          <div className="mb-8 flex flex-1 flex-col gap-3.5 md:mb-auto">
+            <h2 className="m-auto flex items-center gap-3 text-lg font-normal md:flex-col md:gap-2">
+              <CautionIcon />
+              Limitations
+            </h2>
+            <ul className="m-auto flex w-full flex-col gap-3.5 sm:max-w-md">
+              <li className="w-full rounded-md bg-gray-50 p-3 dark:bg-white/5">
+                May occasionally generate incorrect information
+              </li>
+              <li className="w-full rounded-md bg-gray-50 p-3 dark:bg-white/5">
+                May occasionally produce harmful instructions or biased content
+              </li>
+              <li className="w-full rounded-md bg-gray-50 p-3 dark:bg-white/5">
+                Limited knowledge of world and events after 2021
+              </li>
+            </ul>
+          </div>
+        </div>
+        {/* {!showingTemplates && (
+          <div className="mt-8 mb-4 flex flex-col items-center gap-3.5 md:mt-16">
+            <button
+              onClick={showTemplates}
+              className="btn btn-neutral justify-center gap-2 border-0 md:border"
+            >
+              <ChatIcon />
+              Show Prompt Templates
+            </button>
+          </div>
+        )}
+        {!!showingTemplates && <Templates showTemplates={showTemplates}/>} */}
+        <div className="group h-32 w-full flex-shrink-0 dark:border-gray-900/50 dark:bg-gray-800 md:h-48" />
+      </div>
+    </div>
+  );
+}

client/src/components/Main/Regenerate.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import RegenerateIcon from '../svg/RegenerateIcon';
+
+export default function Regenerate({ submitMessage, tryAgain, errorMessage }) {
+  const clickHandler = (e) => {
+    e.preventDefault();
+    submitMessage();
+  };
+
+  return (
+    <>
+      <span className="mb-2 block flex justify-center text-xs text-black dark:text-white/50 md:mb-2">
+        There was an error generating a response
+      </span>
+      <span className="m-auto flex justify-center">
+        {!errorMessage.includes('short') && (
+          <button
+            onClick={clickHandler}
+            className="btn btn-primary m-auto flex justify-center gap-2"
+          >
+            <RegenerateIcon />
+            Regenerate response
+          </button>
+        )}
+        <button
+          onClick={tryAgain}
+          className="btn btn-neutral flex justify-center gap-2 border-0 md:border"
+        >
+          <RegenerateIcon />
+          Try another message
+        </button>
+      </span>
+    </>
+  );
+}

client/src/components/Main/SubmitButton.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+export default function SubmitButton({ submitMessage }) {
+  const { isSubmitting, disabled } = useSelector((state) => state.submit);
+  const clickHandler = (e) => {
+    e.preventDefault();
+    submitMessage();
+  };
+
+  if (isSubmitting) {
+    return (
+      <button className="absolute bottom-1.5 right-1 rounded-md p-1 text-gray-500 hover:bg-gray-100 disabled:bottom-0.5 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 md:disabled:bottom-1">
+        <div className="text-2xl">
+          <span >·</span>
+          <span className="blink">·</span>
+          <span className="blink2">·</span>
+        </div>
+      </button>
+    );
+  }
+  return (
+    <button
+      onClick={clickHandler}
+      disabled={disabled}
+      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>
+  );
+}
+
+{
+  /* <div class="text-2xl"><span class="">·</span><span class="">·</span><span class="invisible">·</span></div> */
+}

client/src/components/Main/TextChat.jsx

@@ -0,0 +1,207 @@
+import React, { useState } from 'react';
+import SubmitButton from './SubmitButton';
+import Regenerate from './Regenerate';
+import ModelMenu from '../Models/ModelMenu';
+import Footer from './Footer';
+import TextareaAutosize from 'react-textarea-autosize';
+import handleSubmit from '~/utils/handleSubmit';
+import { useSelector, useDispatch } from 'react-redux';
+import { setConversation, setError } from '~/store/convoSlice';
+import { setMessages } from '~/store/messageSlice';
+import { setSubmitState } from '~/store/submitSlice';
+import { setText } from '~/store/textSlice';
+
+export default function TextChat({ messages }) {
+  const [errorMessage, setErrorMessage] = useState('');
+  const dispatch = useDispatch();
+  const convo = useSelector((state) => state.convo);
+  const { initial } = useSelector((state) => state.models);
+  const { isSubmitting, disabled, model, chatGptLabel, promptPrefix } = useSelector(
+    (state) => state.submit
+  );
+  const { text } = useSelector((state) => state.text);
+  const { error } = convo;
+  const isCustomModel = model === 'chatgptCustom' || !initial[model];
+
+  const submitMessage = () => {
+    if (error) {
+      dispatch(setError(false));
+    }
+
+    if (!!isSubmitting || text.trim() === '') {
+      return;
+    }
+    dispatch(setSubmitState(true));
+    const message = text.trim();
+    const currentMsg = { sender: 'User', text: message, current: true };
+    const sender = model === 'chatgptCustom' ? chatGptLabel : model;
+    const initialResponse = { sender, text: '' };
+    dispatch(setMessages([...messages, currentMsg, initialResponse]));
+    dispatch(setText(''));
+    const messageHandler = (data) => {
+      dispatch(setMessages([...messages, currentMsg, { sender, text: data }]));
+    };
+    const convoHandler = (data) => {
+      dispatch(
+        setMessages([...messages, currentMsg, { sender, text: data.text || data.response }])
+      );
+
+      if (
+        model !== 'bingai' &&
+        convo.conversationId === null &&
+        convo.parentMessageId === null
+      ) {
+        const { title, conversationId, id } = data;
+        dispatch(
+          setConversation({
+            title,
+            conversationId,
+            parentMessageId: id,
+            conversationSignature: null,
+            clientId: null,
+            invocationId: null,
+            chatGptLabel: model === isCustomModel ? chatGptLabel : null,
+            promptPrefix: model === isCustomModel ? promptPrefix : null
+          })
+        );
+      } else if (
+        model === 'bingai' &&
+        convo.conversationId === null &&
+        convo.invocationId === null
+      ) {
+        const { title, conversationSignature, clientId, conversationId, invocationId } = data;
+        dispatch(
+          setConversation({
+            title,
+            conversationSignature,
+            clientId,
+            conversationId,
+            invocationId,
+            parentMessageId: null
+          })
+        );
+      }
+
+      dispatch(setSubmitState(false));
+    };
+
+    // const convoHandler = (data) => {
+    //   const { conversationId, id, invocationId } = data;
+    //   const conversationData = {
+    //     title: data.title,
+    //     conversationId,
+    //     parentMessageId:
+    //       model !== 'bingai' && !convo.conversationId && !convo.parentMessageId ? id : null,
+    //     conversationSignature:
+    //       model === 'bingai' && !convo.conversationId ? data.conversationSignature : null,
+    //     clientId: model === 'bingai' && !convo.conversationId ? data.clientId : null,
+    //     // invocationId: model === 'bingai' && !convo.conversationId ? data.invocationId : null
+    //     invocationId: invocationId ? invocationId : null
+    //   };
+    //   dispatch(setMessages([...messages, currentMsg, { sender: model, text: data.text || data.response }]));
+    //   dispatch(setConversation(conversationData));
+    //   dispatch(setSubmitState(false));
+    // };
+
+    const errorHandler = (event) => {
+      console.log('Error:', event);
+      const errorResponse = {
+        ...initialResponse,
+        text: `An error occurred. Please try again in a few moments.\n\nError message: ${event.data}`,
+        error: true
+      };
+      setErrorMessage(event.data);
+      dispatch(setSubmitState(false));
+      dispatch(setMessages([...messages.slice(0, -2), currentMsg, errorResponse]));
+      dispatch(setText(message));
+      dispatch(setError(true));
+      return;
+    };
+    const submission = {
+      model,
+      text: message,
+      convo,
+      messageHandler,
+      convoHandler,
+      errorHandler,
+      chatGptLabel,
+      promptPrefix
+    };
+    console.log('User Input:', message);
+    handleSubmit(submission);
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+    }
+  };
+
+  const handleKeyUp = (e) => {
+    if (e.key === 'Enter' && e.shiftKey) {
+      return console.log('Enter + Shift');
+    }
+
+    if (isSubmitting) {
+      return;
+    }
+
+    if (e.key === 'Enter' && !e.shiftKey) {
+      submitMessage();
+    }
+  };
+
+  const changeHandler = (e) => {
+    const { value } = e.target;
+    if (isSubmitting && (value === '' || value === '\n')) {
+      return;
+    }
+    dispatch(setText(value));
+  };
+
+  const tryAgain = (e) => {
+    e.preventDefault();
+    dispatch(setError(false));
+  };
+
+  return (
+    <div className="md:bg-vert-light-gradient dark:md:bg-vert-dark-gradient absolute bottom-0 left-0 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" />
+          {error ? (
+            <Regenerate
+              submitMessage={submitMessage}
+              tryAgain={tryAgain}
+              errorMessage={errorMessage}
+            />
+          ) : (
+            <div
+              className={`relative flex w-full flex-grow flex-col rounded-md border border-black/10 ${
+                disabled ? 'bg-gray-100' : 'bg-white'
+              } py-2 shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-gray-900/50 ${
+                disabled ? 'dark:bg-gray-900' : 'dark:bg-gray-700'
+              } dark:text-white dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] md:py-3 md:pl-4`}
+            >
+              <ModelMenu />
+              <TextareaAutosize
+                tabIndex="0"
+                // style={{maxHeight: '200px', height: '24px', overflowY: 'hidden'}}
+                rows="1"
+                value={text}
+                onKeyUp={handleKeyUp}
+                onKeyDown={handleKeyDown}
+                onChange={changeHandler}
+                placeholder={disabled ? 'Choose another model or customize GPT again' : ''}
+                disabled={disabled}
+                className="m-0 h-auto max-h-52 resize-none overflow-auto border-0 bg-transparent p-0 pl-9 pr-8 leading-6 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:pl-8"
+              />
+              <SubmitButton submitMessage={submitMessage} />
+            </div>
+          )}
+        </div>
+      </form>
+      <Footer />
+    </div>
+  );
+}