feat: add nav links

- add open AI discord link, updates and FAQ link
- allow all conversations clear
This commit is contained in:
sushant dhimal 2023-01-11 15:18:44 +05:45
parent c2bff8413a
commit 1b442fccee
4 changed files with 122 additions and 3 deletions

View File

@ -44,13 +44,16 @@ nav {
.navPromptWrapper {
border-bottom: 1px solid #ffffff33;
padding: 10px;
height: 55vh;
overflow-y: auto;
}
.navPrompt {
display: flex;
align-items: center;
padding: 10px;
column-gap: 5px;
column-gap: 20px;
margin: 5px 0;
text-align: left;
}
.navPrompt p {
font-size: 14px;

View File

@ -6,6 +6,7 @@ import NewChat from "./components/NewChat";
import NavPrompt from "./components/NavPrompt";
import Loading from "./components/Loading";
import Error from "./components/Error";
import NavLinks from "./components/NavLink";
function App() {
const [showMenu, setShowMenu] = useState(false);
@ -103,6 +104,98 @@ function App() {
)
)}
</div>
{chatLog.length > 0 && (
<NavLinks
svg={
<svg
fill="#fff"
viewBox="0 0 24 24"
data-name="Flat Line"
xmlns="http://www.w3.org/2000/svg"
className="icon flat-line"
stroke="#fff"
width={23}
height={23}
>
<path
d="M5 8h13a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H5V8Z"
transform="rotate(90 12 14)"
style={{
fill: "#fff202022",
strokeWidth: 2,
}}
/>
<path
d="M16 7V4a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v3"
style={{
fill: "none",
stroke: "#fff202022000000",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
}}
/>
<path
data-name="primary"
d="M10 11v6m4-6v6M4 7h16m-2 13V7H6v13a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1Z"
style={{
fill: "none",
stroke: "#fff202022000000",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
}}
/>
</svg>
}
text="Clear Conversations"
setChatLog={setChatLog}
/>
)}
<NavLinks
svg={
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
fill="#fff"
stroke="#fff"
width={25}
height={25}
>
<title>{"discord_fill"}</title>
<g stroke="none" fill="none" fillRule="evenodd">
<path d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002-.071.035-.02.004-.014-.004-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01-.017.428.005.02.01.013.104.074.015.004.012-.004.104-.074.012-.016.004-.017-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113-.013.002-.185.093-.01.01-.003.011.018.43.005.012.008.007.201.093c.012.004.023 0 .029-.008l.004-.014-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014-.034.614c0 .012.007.02.017.024l.015-.002.201-.093.01-.008.004-.011.017-.43-.003-.012-.01-.01-.184-.092Z" />
<path
d="M15.003 4c.744 0 1.53.26 2.25.547l.527.216c1.26.528 1.968 1.636 2.517 2.853.891 1.975 1.51 4.608 1.724 6.61.102.95.127 1.906-.056 2.549-.197.687-.867 1.173-1.518 1.555l-.322.183-.334.186c-.172.096-.349.191-.525.284l-.522.27-.717.357-.577.284a1 1 0 1 1-.894-1.788l.79-.39-.58-.609c-1.39.57-3.027.893-4.766.893-1.739 0-3.376-.322-4.766-.893l-.58.608.793.39a1 1 0 1 1-.894 1.79l-.544-.27c-.402-.2-.805-.398-1.203-.607l-.928-.505-.321-.183c-.651-.382-1.322-.868-1.518-1.555-.184-.643-.158-1.598-.057-2.55.214-2.001.833-4.634 1.724-6.609.549-1.217 1.257-2.325 2.517-2.853C7.059 4.413 8.072 4 9 4c.603 0 1.077.555.99 1.147A13.65 13.65 0 0 1 12 5c.691 0 1.366.05 2.014.148A1.012 1.012 0 0 1 15.004 4ZM8.75 10.5a1.75 1.75 0 1 0 0 3.5 1.75 1.75 0 0 0 0-3.5Zm6.5 0a1.75 1.75 0 1 0 0 3.5 1.75 1.75 0 0 0 0-3.5Z"
fill="#fff"
/>
</g>
</svg>
}
text="OpenAI Discord"
link="https://discord.com/invite/openai"
/>
<NavLinks
svg={
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
fill="none"
width={25}
height={25}
>
<path
stroke="#fff"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M12 6H7a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-5m-6 0 7.5-7.5M15 3h6v6"
/>
</svg>
}
text="Updates & FAQ"
link="https://help.openai.com/en/collections/3742473-chatgpt"
/>
</aside>
<section className="chatBox">

View File

@ -0,0 +1,23 @@
import React from "react";
const NavLinks = ({ svg, link, text, setChatLog }) => {
const handleClick = (text) => {
if (text === "Clear Conversations") setChatLog([]);
};
return (
<a
href={link}
target="_blank"
rel="noreferrer"
style={{ textDecoration: "none" }}
onClick={() => handleClick(text)}
>
<div className="navPrompt">
{svg}
<p>{text}</p>
</div>
</a>
);
};
export default NavLinks;

View File

@ -22,8 +22,8 @@ app.post("/", async (req, res) => {
const response = await openai.createCompletion({
model: "text-davinci-003",
prompt: message,
max_tokens: 100,
temperature: 0.5,
max_tokens: 3000,
temperature: 0.3,
});
res.json({ botResponse: response.data.choices[0].text });
});