diff --git a/cache.json b/cache.json index d599a16dab..3dbc27e336 100644 --- a/cache.json +++ b/cache.json @@ -1 +1 @@ -{"cache":[["chatgpt:717552b6-8705-4c84-967e-dab4a5d8ac36",{"value":"{\"value\":{\"messages\":[{\"id\":\"c1bca391-e16c-45ee-9adc-732bb4dca429\",\"parentMessageId\":\"5509a303-a673-4927-885c-9af93e6ade8a\",\"role\":\"User\",\"message\":\"Write me a haiku about microsoft bing\"},{\"id\":\"21a764a8-abce-4eb9-b3e6-c80d82107e70\",\"parentMessageId\":\"c1bca391-e16c-45ee-9adc-732bb4dca429\",\"role\":\"ChatGPT\",\"message\":\"Bing searches the web,\\nSilent, swift, and always fast.\\nFinds what we seek.\"},{\"id\":\"ed1a217f-96c1-4421-9728-e6d5c25638ae\",\"parentMessageId\":\"21a764a8-abce-4eb9-b3e6-c80d82107e70\",\"role\":\"User\",\"message\":\"what would you title your haiku?\"},{\"id\":\"4ac0cd08-8198-40fc-a157-48f7e99ee186\",\"parentMessageId\":\"ed1a217f-96c1-4421-9728-e6d5c25638ae\",\"role\":\"ChatGPT\",\"message\":\"\\\"The Search Engine's Song\\\"\"}],\"createdAt\":1676312828824},\"expires\":null}"}],["chatgpt:9114ea69-7661-47d7-83eb-1fbeeb8ea26a",{"value":"{\"value\":{\"messages\":[{\"id\":\"a522e536-5d8c-4064-8de9-f5ac176a400a\",\"parentMessageId\":\"2023227d-f7ab-4a4b-b300-1f42e0c57a54\",\"role\":\"User\",\"message\":\"Explain quantum computing\"},{\"id\":\"9d3119db-0cd0-4baa-a325-159bf8055728\",\"parentMessageId\":\"a522e536-5d8c-4064-8de9-f5ac176a400a\",\"role\":\"ChatGPT\",\"message\":\"Quantum computing is a type of computing architecture that is based on the principles of quantum mechanics. It uses quantum bits, or qubits, instead of classical bits to perform computations. Unlike classical bits, which can only represent either 0 or 1, qubits can exist in multiple states simultaneously, known as superposition. This allows quantum computers to perform certain computations much faster than classical computers.\\n\\nQuantum computing also leverages the principle of entanglement, which allows qubits to be correlated with each other in such a way that the state of one qubit is dependent on the state of another. This allows quantum computers to perform certain computations in parallel, which is not possible with classical computers.\\n\\nIn practical applications, quantum computing has the potential to solve problems that are intractable for classical computers, such as simulating complex quantum systems, searching large datasets, and optimizing complex functions.\\n\\nHowever, quantum computing is still in its early stages of development and there are many technical challenges that need to be overcome, such as improving the stability of qubits and developing more efficient algorithms.\"}],\"createdAt\":1676321753702},\"expires\":null}"}],["chatgpt:6c9902e7-2f05-4b1b-918b-5ec69eec0b8b",{"value":"{\"value\":{\"messages\":[{\"id\":\"abf6e770-b0f8-49c4-b6ec-fdd7427facb3\",\"parentMessageId\":\"3e064c73-669e-41fd-8658-1a02aa94f55f\",\"role\":\"User\",\"message\":\"hello\"},{\"id\":\"9089f2b2-7de4-443e-a59f-f13bcf60d784\",\"parentMessageId\":\"abf6e770-b0f8-49c4-b6ec-fdd7427facb3\",\"role\":\"ChatGPT\",\"message\":\"Hi there! How can I help you today?\"}],\"createdAt\":1676323588344},\"expires\":null}"}]],"lastExpire":1676312828824} \ No newline at end of file +{"cache":[["chatgpt:717552b6-8705-4c84-967e-dab4a5d8ac36",{"value":"{\"value\":{\"messages\":[{\"id\":\"c1bca391-e16c-45ee-9adc-732bb4dca429\",\"parentMessageId\":\"5509a303-a673-4927-885c-9af93e6ade8a\",\"role\":\"User\",\"message\":\"Write me a haiku about microsoft bing\"},{\"id\":\"21a764a8-abce-4eb9-b3e6-c80d82107e70\",\"parentMessageId\":\"c1bca391-e16c-45ee-9adc-732bb4dca429\",\"role\":\"ChatGPT\",\"message\":\"Bing searches the web,\\nSilent, swift, and always fast.\\nFinds what we seek.\"},{\"id\":\"ed1a217f-96c1-4421-9728-e6d5c25638ae\",\"parentMessageId\":\"21a764a8-abce-4eb9-b3e6-c80d82107e70\",\"role\":\"User\",\"message\":\"what would you title your haiku?\"},{\"id\":\"4ac0cd08-8198-40fc-a157-48f7e99ee186\",\"parentMessageId\":\"ed1a217f-96c1-4421-9728-e6d5c25638ae\",\"role\":\"ChatGPT\",\"message\":\"\\\"The Search Engine's Song\\\"\"}],\"createdAt\":1676312828824},\"expires\":null}"}],["chatgpt:9114ea69-7661-47d7-83eb-1fbeeb8ea26a",{"value":"{\"value\":{\"messages\":[{\"id\":\"a522e536-5d8c-4064-8de9-f5ac176a400a\",\"parentMessageId\":\"2023227d-f7ab-4a4b-b300-1f42e0c57a54\",\"role\":\"User\",\"message\":\"Explain quantum computing\"},{\"id\":\"9d3119db-0cd0-4baa-a325-159bf8055728\",\"parentMessageId\":\"a522e536-5d8c-4064-8de9-f5ac176a400a\",\"role\":\"ChatGPT\",\"message\":\"Quantum computing is a type of computing architecture that is based on the principles of quantum mechanics. It uses quantum bits, or qubits, instead of classical bits to perform computations. Unlike classical bits, which can only represent either 0 or 1, qubits can exist in multiple states simultaneously, known as superposition. This allows quantum computers to perform certain computations much faster than classical computers.\\n\\nQuantum computing also leverages the principle of entanglement, which allows qubits to be correlated with each other in such a way that the state of one qubit is dependent on the state of another. This allows quantum computers to perform certain computations in parallel, which is not possible with classical computers.\\n\\nIn practical applications, quantum computing has the potential to solve problems that are intractable for classical computers, such as simulating complex quantum systems, searching large datasets, and optimizing complex functions.\\n\\nHowever, quantum computing is still in its early stages of development and there are many technical challenges that need to be overcome, such as improving the stability of qubits and developing more efficient algorithms.\"}],\"createdAt\":1676321753702},\"expires\":null}"}],["chatgpt:6c9902e7-2f05-4b1b-918b-5ec69eec0b8b",{"value":"{\"value\":{\"messages\":[{\"id\":\"abf6e770-b0f8-49c4-b6ec-fdd7427facb3\",\"parentMessageId\":\"3e064c73-669e-41fd-8658-1a02aa94f55f\",\"role\":\"User\",\"message\":\"hello\"},{\"id\":\"9089f2b2-7de4-443e-a59f-f13bcf60d784\",\"parentMessageId\":\"abf6e770-b0f8-49c4-b6ec-fdd7427facb3\",\"role\":\"ChatGPT\",\"message\":\"Hi there! How can I help you today?\"}],\"createdAt\":1676323588344},\"expires\":null}"}],["chatgpt:9e37799e-de14-4183-89ff-be0ef1ab032e",{"value":"{\"value\":{\"messages\":[{\"id\":\"c6d3bc85-4f73-430d-8d83-543756913873\",\"parentMessageId\":\"efaf35bd-45e0-4d16-bf8c-48c3a1090fe9\",\"role\":\"User\",\"message\":\"Explain quantum computing in simple terms\"},{\"id\":\"70c80578-cad0-49f1-8f6f-8ea3be58a04e\",\"parentMessageId\":\"c6d3bc85-4f73-430d-8d83-543756913873\",\"role\":\"ChatGPT\",\"message\":\"Quantum computing is a type of computing that uses quantum mechanics to perform certain calculations and solve problems. Unlike classical computers, which use bits (1s and 0s) to represent information and perform operations, quantum computers use quantum bits, or qubits, which can exist in multiple states simultaneously. This allows quantum computers to perform certain types of calculations much faster than classical computers.\\n\\nTo give an analogy, classical computers can be thought of as a light switch that is either on or off, while quantum computers can be thought of as a light switch that can be both on and off at the same time. This property is known as superposition and it allows quantum computers to perform many calculations at once, making them well suited to solving complex problems that classical computers struggle with.\"},{\"id\":\"436a958d-bf3f-43b0-815f-655e287cf8e2\",\"parentMessageId\":\"70c80578-cad0-49f1-8f6f-8ea3be58a04e\",\"role\":\"User\",\"message\":\"Explain like I'm five\"},{\"id\":\"bc2ba7b7-e54b-4a1c-89f5-105ec659baca\",\"parentMessageId\":\"436a958d-bf3f-43b0-815f-655e287cf8e2\",\"role\":\"ChatGPT\",\"message\":\"Okay, let's make it super simple! Imagine you have a computer that can only answer yes or no questions, like a magic 8 ball. But a quantum computer is like a magic 8 ball that can answer \\\"yes,\\\" \\\"no,\\\" and \\\"maybe\\\" all at the same time! This special ability makes it much faster at solving certain types of problems and helps us understand things that are too hard for regular computers to figure out.\"}],\"createdAt\":1676327380566},\"expires\":null}"}],["chatgpt:06ec46dd-95ef-452d-a45d-150865e74c64",{"value":"{\"value\":{\"messages\":[{\"id\":\"0768c0f2-609a-4c54-8d9a-ee4145392652\",\"parentMessageId\":\"bf89b975-b3c5-4b90-8e37-fb5d45c5aa74\",\"role\":\"User\",\"message\":\"How do i fade out a react element when it's no longer being rendered?\"},{\"id\":\"f13d47ef-db2a-4a92-98bf-fb1e9e87c73d\",\"parentMessageId\":\"0768c0f2-609a-4c54-8d9a-ee4145392652\",\"role\":\"ChatGPT\",\"message\":\"You can add a CSS transition property to the element's style to fade it out when it is no longer being rendered. \\n\\nHere's an example of how you can implement this in React:\\n\\n```\\nimport React, { useState } from \\\"react\\\";\\n\\nconst FadeOutElement = ({ children }) => {\\n const [isVisible, setIsVisible] = useState(true);\\n\\n const fadeOut = () => {\\n setIsVisible(false);\\n };\\n\\n return (\\n
\\n {children}\\n \\n
\\n );\\n};\\n\\nexport default FadeOutElement;\\n```\\n\\nIn this example, the `opacity` of the element is set to `0` when `isVisible` is `false`. The `transition` property is set to `\\\"opacity 1s\\\"`, which means the opacity will transition from `1` to `0` over a duration of `1` second when the state changes.\\n\\nYou can also use a CSS library like `react-transition-group` to handle transitions in React components.\"},{\"id\":\"814c33a4-1d56-4823-b57f-419528fd8c4c\",\"parentMessageId\":\"f13d47ef-db2a-4a92-98bf-fb1e9e87c73d\",\"role\":\"User\",\"message\":\"how do i make sure a div element scrolls to bottom as new content within is being rendered?\"},{\"id\":\"8d667fd0-815d-4ee8-a8c4-3c2f54383893\",\"parentMessageId\":\"814c33a4-1d56-4823-b57f-419528fd8c4c\",\"role\":\"ChatGPT\",\"message\":\"You can use JavaScript to scroll to the bottom of a div element whenever new content is being rendered. Here is an example of how you can implement this in React:\\n\\n```\\nimport React, { useRef, useEffect } from \\\"react\\\";\\n\\nconst ScrollingDiv = ({ children }) => {\\n const divRef = useRef(null);\\n\\n useEffect(() => {\\n divRef.current.scrollTop = divRef.current.scrollHeight;\\n }, [children]);\\n\\n return (\\n
\\n {children}\\n
\\n );\\n};\\n\\nexport default ScrollingDiv;\\n```\\n\\nIn this example, we are using the `useRef` hook to create a reference to the div element, and the `useEffect` hook to update the `scrollTop` property of the div to be equal to its `scrollHeight` every time the `children` prop changes.\\n\\nNote that, we have set `overflow` property to `auto` and `height` property to `200px` to make the div scrollable.\"}],\"createdAt\":1676329155959},\"expires\":null}"}]],"lastExpire":1676312828824} \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index ef8676d344..d865fc5cf4 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,14 +1,17 @@ import React from 'react'; import Messages from './components/main/Messages'; +import Landing from './components/main/Landing'; import TextChat from './components/main/TextChat'; import Nav from './components/Nav'; import MobileNav from './components/Nav/MobileNav'; +import useDocumentTitle from '~/hooks/useDocumentTitle'; import { useSelector } from 'react-redux'; const App = () => { - const { messages } = useSelector((state) => state.messages); - const convo = useSelector((state) => state.convo); + const { title } = useSelector((state) => state.convo); + + useDocumentTitle(title); return (
@@ -16,8 +19,14 @@ const App = () => {
- - + {messages.length === 0 ? ( + + ) : ( + + )} +
diff --git a/src/components/main/Messages.jsx b/src/components/main/Messages.jsx index e1124d8b2f..762bde2c33 100644 --- a/src/components/main/Messages.jsx +++ b/src/components/main/Messages.jsx @@ -1,28 +1,24 @@ import React, { useEffect, useState, useRef } from 'react'; -import { useSelector } from 'react-redux'; -import useDocumentTitle from '~/hooks/useDocumentTitle'; import useDidMountEffect from '~/hooks/useDidMountEffect'; import Message from './Message'; import ScrollToBottom from './ScrollToBottom'; -import Landing from './Landing'; -export default function Messages({ title, messages }) { - if (messages.length === 0) { - return ; - } - - useDocumentTitle(title); - const messagesEndRef = useRef(null); +const Messages = ({ messages }) => { const [showScrollButton, setShowScrollButton] = useState(false); + const scrollableRef = useRef(null); + const messagesEndRef = useRef(null); + + + useEffect(() => { + const scrollable = scrollableRef.current; + const hasScrollbar = scrollable.scrollHeight > scrollable.clientHeight; + setShowScrollButton(hasScrollbar); + }, [scrollableRef]); const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); }; - if (document.body.clientHeight > window.innerHeight) { - setShowScrollButton(true); - } - const handleScroll = (e) => { const bottom = e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight; if (bottom) { @@ -30,7 +26,7 @@ export default function Messages({ title, messages }) { } else { setShowScrollButton(true); } - } + }; const scrollHandler = (e) => { e.preventDefault(); @@ -38,27 +34,33 @@ export default function Messages({ title, messages }) { }; return ( -
+
{/*
*/} -
-
- {messages.map((message, i) => ( - - ))} - {showScrollButton && } -
+
+ {messages.map((message, i) => ( + -
+ ))} + {showScrollButton && } +
+
{/*
*/}
); -} +}; + +export default Messages diff --git a/src/components/main/TextChat.jsx b/src/components/main/TextChat.jsx index cbaff162ed..b29d02cdd2 100644 --- a/src/components/main/TextChat.jsx +++ b/src/components/main/TextChat.jsx @@ -123,7 +123,7 @@ export default function TextChat({ messages }) { onKeyDown={handleKeyDown} onChange={changeHandler} placeholder="" - className="m-0 h-auto max-h-52 resize-none overflow-auto border-0 bg-transparent p-0 pl-9 pr-7 leading-6 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:pl-7" + className="m-0 h-auto max-h-52 resize-none overflow-auto border-0 bg-transparent p-0 pl-9 pr-7 leading-6 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:pl-8" />