Merge branch 'master' into feat-model-based-on-key

2025-12-22 11:20:15 +01:00 · 2023-03-16 13:39:41 -04:00 · 2023-03-16 13:39:41 -04:00 · 1fe9e29187
commit 1fe9e29187
parent b6f7f95709 ba8692dbe4
27 changed files with 602 additions and 157 deletions
--- a/client/src/components/Main/Landing.jsx
+++ b/client/src/components/Main/Landing.jsx
@ -28,7 +28,7 @@ export default function Landing({ title }) {
  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">
+        <h1 className="mt-6 ml-auto mr-auto mb-10 flex items-center justify-center gap-2 text-center text-4xl font-semibold md:mt-[20vh] sm:mb-16">
          ChatGPT Clone
        </h1>
        <div className="items-start gap-3.5 text-center md:flex">
--- a/client/src/components/Main/SubmitButton.jsx
+++ b/client/src/components/Main/SubmitButton.jsx
@ -10,9 +10,12 @@ export default function SubmitButton({ submitMessage }) {

  if (isSubmitting) {
    return (
-      <button className="absolute bottom-0 h-[50px] w-[30px] right-1 rounded-md p-1 text-gray-500 hover:bg-gray-100disabled:hover:bg-transparent dark:hover:bg-gray-900 dark:hover:text-gray-400 dark:disabled:hover:bg-transparent md:right-2" disabled>
+      <button
+        className="absolute bottom-0 right-1 h-[100%] w-[30px] 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:right-2"
+        disabled
+      >
        <div className="text-2xl">
-          <span >·</span>
+          <span>·</span>
          <span className="blink">·</span>
          <span className="blink2">·</span>
        </div>
@ -23,28 +26,30 @@ export default function SubmitButton({ submitMessage }) {
    <button
      onClick={clickHandler}
      disabled={disabled}
-      className="absolute bottom-0 flex justify-center items-center h-[50px] w-[50px] right-0 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"
+      className="group absolute bottom-0 right-0 flex h-[100%] w-[50px] items-center justify-center bg-transparent p-1 text-gray-500"
    >
-      <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>
+      <div className="m-1 rounded-md p-2 pt-[10px] pb-[10px] group-hover:bg-gray-100 group-disabled:hover:bg-transparent dark:group-hover:bg-gray-900 dark:group-hover:text-gray-400 dark:group-disabled:hover:bg-transparent">
+        <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>
+      </div>
    </button>
  );
 }
--- a/client/src/components/Main/TextChat.jsx
+++ b/client/src/components/Main/TextChat.jsx
@ -18,6 +18,7 @@ export default function TextChat({ messages }) {
  const inputRef = useRef(null)
  const isComposing = useRef(false);
  const dispatch = useDispatch();
+  const { user } = useSelector((state) => state.user);
  const convo = useSelector((state) => state.convo);
  const { initial } = useSelector((state) => state.models);
  const { isSubmitting, stopStream, submission, disabled, model, chatGptLabel, promptPrefix } =
@ -309,7 +310,7 @@ export default function TextChat({ messages }) {
            <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 ${
+              } py-3 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`}
            >
@ -328,7 +329,7 @@ export default function TextChat({ messages }) {
                onCompositionEnd={handleCompositionEnd}
                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"
+                className="m-0 h-auto max-h-52 resize-none overflow-auto border-0 bg-transparent p-0 pl-12 pr-8 leading-6 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:pl-8"
              />
              <SubmitButton submitMessage={submitMessage} />
            </div>
--- a/client/src/components/Models/ModelItem.jsx
+++ b/client/src/components/Models/ModelItem.jsx
@ -28,7 +28,7 @@ export default function ModelItem({ modelName, value, model, onSelect, id, chatG
    dispatch(setModels(fetchedModels));
  });

-  const icon = getIconOfModel({ size: 16, sender: modelName, isCreatedByUser: false, model, chatGptLabel, promptPrefix, error: false, className: "mr-2" });
+  const icon = getIconOfModel({ size: 20, sender: modelName, isCreatedByUser: false, model, chatGptLabel, promptPrefix, error: false, className: "mr-2" });

  if (value === 'chatgptCustom') {
    return (
@ -143,7 +143,7 @@ export default function ModelItem({ modelName, value, model, onSelect, id, chatG
          onKeyDown={handleKeyDown}
        />
      ) : (
-        <div className="w-3/4 overflow-hidden">{modelInput}</div>
+        <div className=" overflow-hidden">{modelInput}</div>
      )}

      {value === 'chatgpt' && <sup>$</sup>}
--- a/client/src/components/Models/ModelMenu.jsx
+++ b/client/src/components/Models/ModelMenu.jsx
@ -18,6 +18,7 @@ import { setText } from '~/store/textSlice';
 import GPTIcon from '../svg/GPTIcon';
 import BingIcon from '../svg/BingIcon';
 import { Button } from '../ui/Button.tsx';
+import { getIconOfModel } from '../../utils';

 import {
  DropdownMenu,
@ -34,7 +35,7 @@ export default function ModelMenu() {
  const dispatch = useDispatch();
  const [modelSave, setModelSave] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
-  const { model, customModel } = useSelector((state) => state.submit);
+  const { model, customModel, promptPrefix, chatGptLabel } = useSelector((state) => state.submit);
  const { models, modelMap, initial } = useSelector((state) => state.models);
  const { data, isLoading, mutate } = swr(`/api/customGpts`, (res) => {
    const fetchedModels = res.map((modelItem) => ({
@ -176,7 +177,7 @@ export default function ModelMenu() {

  const isBing = model === 'bingai' || model === 'sydney';
  const colorProps = model === 'chatgpt' ? chatgptColorProps : defaultColorProps;
-  const icon = isBing ? <BingIcon button={true} /> : <GPTIcon button={true} />;
+  const icon = getIconOfModel({ size: 32, sender: chatGptLabel || model, isCreatedByUser: false, model, chatGptLabel, promptPrefix, error: false, button: true});

  return (
    <Dialog onOpenChange={onOpenChange}>
@ -188,9 +189,9 @@ export default function ModelMenu() {
          <Button
            variant="outline"
            // style={{backgroundColor: 'rgb(16, 163, 127)'}}
-            className={`absolute bottom-0.5 rounded-md border-0 p-1 pl-2 outline-none ${colorProps.join(
+            className={`absolute bottom-0.5 items-center mb-[1.75px] md:mb-0 rounded-md border-0 p-1 ml-1 md:ml-0 outline-none ${colorProps.join(
              ' '
-            )} focus:ring-0 focus:ring-offset-0 disabled:bottom-0.5 dark:data-[state=open]:bg-opacity-50 md:bottom-1 md:left-2 md:pl-1 md:disabled:bottom-1`}
+            )} focus:ring-0 focus:ring-offset-0 disabled:bottom-0.5 dark:data-[state=open]:bg-opacity-50 md:bottom-1 md:left-1 md:pl-1 md:disabled:bottom-1`}
          >
            {icon}
          </Button>
--- a/client/src/components/Nav/Logout.jsx
+++ b/client/src/components/Nav/Logout.jsx
@ -0,0 +1,23 @@
+import React, { useState, useContext } from 'react';
+import { useSelector } from 'react-redux';
+import LogOutIcon from '../svg/LogOutIcon';
+
+
+export default function Logout() {
+  const { user } = useSelector((state) => state.user);
+  
+  const clickHandler = () => {
+    window.location.href = "/auth/logout";
+  };
+
+  return (
+    <a
+      className="flex cursor-pointer items-center gap-3 rounded-md py-3 px-3 text-sm text-white transition-colors duration-200 hover:bg-gray-500/10"
+      onClick={clickHandler}
+    >
+      <LogOutIcon />
+      {user?.display || user?.username || 'USER'}
+      <small>Log out</small>
+    </a>
+  );
+}
--- a/client/src/components/Nav/NavLinks.jsx
+++ b/client/src/components/Nav/NavLinks.jsx
@ -3,16 +3,18 @@ import NavLink from './NavLink';
 import LogOutIcon from '../svg/LogOutIcon';
 import ClearConvos from './ClearConvos';
 import DarkMode from './DarkMode';
+import Logout from './Logout';

 export default function NavLinks() {
  return (
    <>
      <ClearConvos />
      <DarkMode />
-      <NavLink
+      <Logout />
+      {/* <NavLink
        svg={LogOutIcon}
        text="Log out"
-      />
+      /> */}
    </>
  );
 }