changes

amotivv · Mar 15, 2023 · c1f701d · c1f701d
1 parent 883d007
commit c1f701d
Show file tree

Hide file tree

Showing 10 changed files with 139 additions and 22 deletions.
diff --git a/package.json b/package.json
@@ -42,6 +42,7 @@
     "node-plop": "0.26.3",
     "plop": "2.7.6",
     "prettier": "2.7.1",
+    "random-name": "0.1.2",
     "react": "18.2.0",
     "react-animated-text-content": "1.0.1",
     "react-app-polyfill": "3.0.0",

diff --git a/src/app/components/NavBar/Nav.tsx b/src/app/components/NavBar/Nav.tsx
@@ -1,11 +1,5 @@
 import * as React from 'react';
-import {
-  IconHeartFilled,
-  IconMenu,
-  IconMenu2,
-  IconStack3,
-  IconX,
-} from '@tabler/icons-react';
+import { IconHeartFilled, IconMenu2, IconX } from '@tabler/icons-react';
 import { ThemeSwitch } from 'app/pages/HomePage/Features/ThemeSwitch';
 import styled from 'styled-components/macro';
 import { ReactComponent as TwitterIcon } from './assets/twitter.svg';
@@ -24,11 +18,12 @@ export function Nav() {
     return (
       <MobileWrapper>
         {menuOpen ? (
+          // TODO: MAKE THESE WORK WITH DARK MODE
           <IconX onClick={toggleMenu} size={24} />
         ) : (
           <IconMenu2 onClick={toggleMenu} size={24} />
         )}
-        {menuOpen && <Overlay isOpened={menuOpen} />}
+        {isTabletOrMobile && <Overlay isOpened={menuOpen} />}
       </MobileWrapper>
     );
   }
@@ -57,7 +52,9 @@ export function Nav() {
   );
 }
 
-const MobileWrapper = styled.nav``;
+const MobileWrapper = styled.nav`
+  color: ${props => props.theme.text};
+`;
 
 const Wrapper = styled.nav`
   display: flex;

diff --git a/src/app/components/Overlay/Overlay.tsx b/src/app/components/Overlay/Overlay.tsx
@@ -1,13 +1,14 @@
+import React from 'react';
 import { Divider } from '@mantine/core';
 import { APIKey } from 'app/pages/Chat/components/APIKey';
 import { ChatHistory } from 'app/pages/Chat/components/ChatHistory';
-import { LeftSidebar } from 'app/pages/Chat/components/LeftSidebar';
 import { MoodSlider } from 'app/pages/Chat/components/MoodSlider';
 import SelectCharacter from 'app/pages/Chat/components/SelectCharacter';
 import { ThemeSwitch } from 'app/pages/HomePage/Features/ThemeSwitch';
-import React from 'react';
+import { ReactComponent as TwitterIcon } from '../NavBar/assets/twitter.svg';
 import styled from 'styled-components';
 import { StyleConstants } from 'styles/StyleConstants';
+import { IconHeartFilled } from '@tabler/icons-react';
 
 export function Overlay({ isOpened = false }: { isOpened: boolean }) {
   return (
@@ -23,15 +24,71 @@ export function Overlay({ isOpened = false }: { isOpened: boolean }) {
         <MoodSlider />
         <Divider my="md" variant="dashed" />
         <ChatHistory />
+        <Footer>
+          <Item
+            href="https://ko-fi.com/mikepechousek"
+            target="_blank"
+            title="Buy me a coffee"
+          >
+            Buy me a coffee{' '}
+            <IconHeartFilled
+              style={{ marginLeft: 5, color: 'red' }}
+              size={16}
+            />
+          </Item>
+          <Item
+            href="https://twitter.com/mikepechousek"
+            target="_blank"
+            title="Twitter Page"
+            rel="noopener noreferrer"
+          >
+            <TwitterIcon width={18} style={{ marginRight: 5 }} />
+            Twitter
+          </Item>
+        </Footer>
       </Inner>
     </Wrapper>
   );
 }
 
+const Item = styled.a`
+  color: ${p => p.theme.primary};
+  cursor: pointer;
+  text-decoration: none;
+  display: flex;
+  padding: 0.25rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  align-items: center;
+
+  &:hover {
+    opacity: 0.8;
+  }
+
+  &:active {
+    opacity: 0.4;
+  }
+
+  .icon {
+    margin-right: 0.25rem;
+  }
+`;
+
+const Footer = styled.footer`
+  display: flex;
+  position: absolute;
+  bottom: 20px;
+  justify-content: center;
+  right: 10px;
+  width: 100%;
+`;
+
 // This is an overlay wrapper for mobile
 const Wrapper = styled.nav<any>`
+  position: relative;
   position: fixed;
-  top: ${StyleConstants.NAV_BAR_HEIGHT};
+  top: ${props => (props.isOpened ? StyleConstants.NAV_BAR_HEIGHT : '105vh')};
+  transition: all 0.3s ease-in-out;
   left: 0;
   width: 100vw;
   height: calc(100vh - ${StyleConstants.NAV_BAR_HEIGHT});

diff --git a/src/app/pages/Chat/Textbox.tsx b/src/app/pages/Chat/Textbox.tsx
@@ -10,6 +10,7 @@ import { useSelector } from 'react-redux';
 import { getCharacter, getMood, getOpenAiApiKey } from './slice/selectors';
 import { characterOptions } from 'app/api/characters';
 import { useMediaQuery } from 'react-responsive';
+import { StyleConstants } from 'styles/StyleConstants';
 
 const defaultMessages = [
   { role: 'assistant', content: 'Hello there! Start by typing a message!' },
@@ -56,23 +57,31 @@ export function Textbox() {
 
   return (
     <Wrapper isMobile={isTabletOrMobile}>
-      <P>
+      <Model>
         Model: <b>turbo-gpt-3.5</b>
-      </P>
+      </Model>
       {characterSelected !== characterOptions[0] && (
         <Character>
           You are now speaking to a virtual {characterSelected}. Cool eh?
         </Character>
       )}
       <ChatBubbles isTyping={isLoading || isRefetching} messages={messages} />
-      <Input addMessage={addMessage} />
+      <Input disabled={isLoading || isRefetching} addMessage={addMessage} />
     </Wrapper>
   );
 }
 
+export const Model = styled.p`
+  font-size: 1rem;
+  line-height: 1.5;
+  color: ${p => p.theme.textSecondary};
+  margin: 0;
+  position: absolute;
+  top: 15px;
+`;
+
 const Wrapper = styled.main<any>`
-  margin-top: 5vh;
-  height: 80vh;
+  height: 100%;
   display: flex;
   width: ${props => (props.isMobile ? '100%' : '60vw')};
   flex-direction: column;

diff --git a/src/app/pages/Chat/components/ChatBubbles.tsx b/src/app/pages/Chat/components/ChatBubbles.tsx
@@ -63,7 +63,10 @@ export function ChatBubbles({
           />
         );
       })}
-      <div style={{ height: '10px' }} ref={messagesEndRef} />
+      <div
+        style={{ height: '8px', marginTop: 0, paddingBottom: '5px' }}
+        ref={messagesEndRef}
+      />
       <EllipsisAnimation visible={isTyping} />
     </Wrapper>
   );
@@ -80,6 +83,6 @@ const Wrapper = styled.div`
   z-index: 5;
   min-height: calc(97% - ${StyleConstants.NAV_BAR_HEIGHT});
   overflow-y: auto;
-  height: max-content;
+  height: 100%;
   padding: 10px;
 `;
diff --git a/src/app/pages/Chat/components/Input.tsx b/src/app/pages/Chat/components/Input.tsx
@@ -7,19 +7,42 @@ import { useMediaQuery } from 'react-responsive';
 
 export function Input({
   addMessage,
+  disabled = false,
 }: {
   addMessage: (message: string) => void;
+  disabled: boolean;
 }) {
   const [message, setMessage] = React.useState<string>('');
+  const [loading, setLoading] = React.useState<boolean>(false);
   const apiKeyStatus = useSelector(getOpenAiKeyStatus);
   const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1024px)' });
 
   const handleSubmitForm = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
+
+    if (!message) {
+      return;
+    }
+
+    if (disabled) {
+      return;
+    }
+
+    if (loading) {
+      return;
+    }
+
     addMessage(message);
+    setLoading(true);
     setMessage('');
   };
 
+  React.useEffect(() => {
+    if (!disabled) {
+      setLoading(false);
+    }
+  }, [disabled]);
+
   return (
     <Wrapper>
       <InputWrapper
@@ -37,7 +60,8 @@ export function Input({
         />
 
         <Button
-          disabled={!apiKeyStatus}
+          disabled={!apiKeyStatus || disabled}
+          loading={loading}
           type="submit"
           size={isTabletOrMobile ? 'md' : 'lg'}
           left={5}
@@ -54,16 +78,24 @@ export function Input({
 
 const Wrapper = styled.div`
   width: 100%;
-  height: fit-content;
+  height: 100%;
   padding-top: 10px;
   display: flex;
   justify-content: center;
   align-items: flex-end;
+  position: relative;
+  height: fit-content;
+  z-index: 100;
 `;
 
 const InputWrapper = styled.form<any>`
   width: 100%;
   max-width: ${props => (props.isMobile ? '90%' : '80vw')};
+  position: ${props => (props.isMobile ? 'fixed' : 'relative')};
+  bottom: 5;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
   display: flex;
   align-items: center;
 `;
diff --git a/src/app/pages/Chat/components/MessageComponent.tsx b/src/app/pages/Chat/components/MessageComponent.tsx
@@ -90,6 +90,8 @@ export const MessageComponent = ({
         justifyContent: role === 'assistant' ? 'flex-start' : 'flex-end',
         opacity: visible ? 1 : 0,
         visibility: visible ? 'visible' : 'hidden',
+        height: visible ? 'auto' : 0,
+        margin: visible ? '15px 0' : 0,
         transition: 'opacity 0.3s ease-in-out',
       }}
     >

diff --git a/src/app/pages/Chat/components/SelectCharacter.tsx b/src/app/pages/Chat/components/SelectCharacter.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect } from 'react';
-import { NativeSelect } from '@mantine/core';
+import { Checkbox, NativeSelect } from '@mantine/core';
 import styled from 'styled-components/macro';
 import debounce from 'lodash/debounce';
 import { useDispatch, useSelector } from 'react-redux';
@@ -33,6 +33,11 @@ function SelectCharacter() {
         description="This will give your AI a personality and cater the conversation to your preferences. Note: This will clear your current conversation."
         variant="default"
       />
+      <Checkbox
+        color="red"
+        className="checkbox"
+        label="Spare me a random name?"
+      />
     </Wrapper>
   );
 }
@@ -41,4 +46,8 @@ export default SelectCharacter;
 
 const Wrapper = styled.div`
   margin-bottom: 10px;
+
+  .checkbox {
+    margin-top: 10px;
+  }
 `;
diff --git a/src/app/pages/Chat/index.tsx b/src/app/pages/Chat/index.tsx
@@ -41,6 +41,8 @@ const Wrapper = styled.div<any>`
   flex-direction: column;
   align-items: center;
   min-height: 320px;
+  padding: 25px 0;
+  padding-top: ${props => props.isMobile && '0'};
   position: relative;
   width: ${props => props.isMobile && '100%'};
 `;

diff --git a/yarn.lock b/yarn.lock
@@ -10219,6 +10219,11 @@ raf@^3.4.1:
   dependencies:
     performance-now "^2.1.0"
 
+[email protected]:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/random-name/-/random-name-0.1.2.tgz#20a1ad0efce9976764c5dd3c418c7018b57e816d"
+  integrity sha512-3UHvhW50ZMbm6R11J3G1WeKvvys3GWE0uw5IxPzJjIxG+c0QoIbMlWfRKBlji9boEXPBx4CiSL3XWIkO9T/OVA==
+
 randombytes@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"