Skip to content

Commit

Permalink
v0
Browse files Browse the repository at this point in the history
  • Loading branch information
@0wh
0wh committed Jan 31, 2024
1 parent 715b17c commit 1222e79
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 35 deletions.
61 changes: 46 additions & 15 deletions app/Panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,13 @@ import React, { useState, useEffect, useRef } from "react";

const Panel = () => {
// OpenAI API
const [messages, setMessages] = useState([]);
const [messages, setMessages] = useState([
{
role: "assistant",
content:
"Hi! I am Mike's assistant. I can help with exploring Mike's skills and projects.",
},
]);
const [inputText, setInputText] = useState("");

const sendMessageToAPI = async () => {
Expand Down Expand Up @@ -42,7 +48,7 @@ const Panel = () => {
{
role: "system",
content:
"You are a virtual assistant built by a full-stack developer, whose nickname is Mike Hyatt. He uses the nickname for privacy reasons. Always mention this consideration to people who asks about Mike.",
"You are a virtual assistant built by a full-stack developer, whose nickname is Mike Hyatt. He uses the nickname for privacy reasons. Always mention this consideration to people who asks about Mike. Mike's skill set contains Python, JavaScript (ES6+), TypeScript, Node.js, Java, PHP, C/C++, Swift, HTML, CSS, Tailwind, React, Next.js, Vue, Nuxt, Angular, React Native, TensorFlow, PyTorch, JAX, React AI, SQL, NoSQL(DynamoDB, MongoDB), Git, Docker, AWS Amplify, Azure, Redux, Vuex, MobX, NgRx, Fetch, AJAX, Axios, REST, GraphQL, OAuth, JWT, Jest, Mocha, and JUnit. Mike's projects include an all-encompassing chatbot hosted on AWS named NextGPT.live, a voice assistant app for elderly tech coaching named Doorman, a software-in-the-loop simulation for autonomous drone navigation, and a learning-based differential equation solver with enhanced accuracy.",
},
...context,
{ role: "user", content: userMessage },
Expand Down Expand Up @@ -75,17 +81,27 @@ const Panel = () => {
};
const filteredMessages = messages.filter((item) => item.content !== null);
const [finishedTyping, setFinishedTyping] = useState(true);

const endOfContentRef = useRef();
useEffect(() => {
endOfContentRef.current?.scrollIntoView();
}, [messages]);
return (
<div className="p-3 justify-between">
<FloatView messages={filteredMessages} />
<div className={`flex w-full items-end justify-center`}>
<FullView messages={filteredMessages} endOfContentRef={endOfContentRef} />
<div className={`flex w-full`}>
{!inputText && (
<div className="flex flex-col justify-center opacity-40">
<svg className="absolute mt-1 ml-2.5 h-5 w-5 text-2xl flex justify-center items-center">
<path d="M17.211,3.39H2.788c-0.22,0-0.4,0.18-0.4,0.4v9.614c0,0.221,0.181,0.402,0.4,0.402h3.206v2.402c0,0.363,0.429,0.533,0.683,0.285l2.72-2.688h7.814c0.221,0,0.401-0.182,0.401-0.402V3.79C17.612,3.569,17.432,3.39,17.211,3.39M16.811,13.004H9.232c-0.106,0-0.206,0.043-0.282,0.117L6.795,15.25v-1.846c0-0.219-0.18-0.4-0.401-0.4H3.189V4.19h13.622V13.004z"></path>
</svg>
</div>
)}
<input
className="w-full bg-white/50 px-[9px] py-1.5 border border-gray-400 rounded-md"
className="w-full bg-white/50 px-[9px] py-1.5 pr-11 border border-gray-400 rounded-md"
maxLength="256"
onChange={(event) => setInputText(event.target.value)}
value={inputText}
placeholder={"Type your message here."}
placeholder={" How can I help you?"}
onKeyDown={(event) => {
if (event.key === "Enter" && finishedTyping) {
sendMessageToAPI();
Expand All @@ -100,13 +116,8 @@ const Panel = () => {
/>
{inputText && (
<button
className="absolute -translate-x-5 leading-4"
style={{
borderRadius: 10,
padding: 15,
paddingTop: 10,
fontSize: 24,
}}
className="-ml-11 w-11 rounded-r-md text-2xl leading-4 pb-3.5 pt-2 bg-slate-500/5 hover:backdrop-invert hover:invert hover:opacity-80"
style={{}}
onClick={sendMessageToAPI}
>
◮
Expand All @@ -132,7 +143,7 @@ const FloatView = ({ messages }) => {
const MsgBox = ({ message }) => {
return (
<div
className={`w-full mb-3 flex flex-col justify-start items-start px-3 py-2 max-h-24 overflow-auto rounded-md ${
className={`w-full mb-3 flex flex-col justify-start items-start px-2.5 py-[7px] max-h-24 overflow-auto rounded-md ${
message.role === "user"
? " bg-sky-400 dark:bg-sky-900 opacity-90"
: "bg-gray-300 dark:bg-gray-700 opacity-95"
Expand All @@ -142,3 +153,23 @@ const MsgBox = ({ message }) => {
</div>
);
};

const FullView = ({ messages, endOfContentRef }) => {
return (
<div className="flex flex-col w-full items-center h-[440px] overflow-auto rounded-md">
{messages.map((message, index) => (
<div
key={index}
className={`w-full mb-3 flex flex-col justify-start items-start px-2.5 py-[7px] rounded-md ${
message.role === "user"
? " bg-sky-400 dark:bg-sky-900 opacity-90"
: "bg-gray-300 dark:bg-gray-700 opacity-95"
}`}
>
{message.content}
</div>
))}
<div ref={endOfContentRef} />
</div>
);
};
40 changes: 20 additions & 20 deletions app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,26 +4,25 @@ import Panel from "./Panel";

export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center p-32">
<div className="z-10 max-w-5xl w-full mb-4 md:flex">
<p className="static left-0 top-0 border-b border-gray-300 from-zinc-200 py-4 dark:border-neutral-800 dark:from-inherit rounded-xl border bg-gray-200 px-24 dark:bg-zinc-800/30 font-semibold text-2xl font-serif">
Hey, I'm <span className="font-sans">Mike Hyatt</span>.
<main className="flex min-h-screen flex-col items-center pt-5 sm:p-5 sm:pt-16 lg:p-32">
<div className="mb-4 max-w-[600px] lg:max-w-[900px] xl:max-w-[1200px] w-full">
<p className="mx-4 text-start font-semibold font-sans">
Hey, I'm <span className="font-serif text-2xl">Mike Hyatt</span>.
Please chat with my assistant.
</p>
</div>
<div className="mb-4 max-w-5xl w-full">
<div className="mx-4 rounded-lg border border-transparent my-4 px-5 transition-colors border-gray-300 bg-gray-100 dark:border-neutral-700 dark:bg-neutral-800/30">
<div className="sm:mx-4 sm:rounded-lg border border-transparent my-4 px-5 transition-colors border-gray-300 bg-gray-100 dark:border-neutral-700 dark:bg-neutral-800/30">
<Panel />
</div>
</div>
<div className="z-10 max-w-5xl w-full mb-4 md:flex">
<p className="static left-0 top-0 border-b border-gray-300 from-zinc-200 py-4 dark:border-neutral-800 dark:from-inherit rounded-xl border bg-gray-200 px-24 dark:bg-zinc-800/30 font-semibold text-2xl font-serif">
<div className="z-10 w-full">
<p className="text-center font-semibold text-2xl font-serif">
Projects
</p>
</div>
<div className="grid w-full text-left md:grid-cols-2 lg:grid-cols-3 xl:max-w-5xl xl:grid-cols-4">
<div className="grid text-left grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<a
href=""
className="group rounded-lg border border-transparent mx-4 my-4 px-5 py-4 transition-colors border-gray-300 bg-gray-100 dark:border-neutral-700 dark:bg-neutral-800/30"
className="group rounded-lg border border-transparent max-w-[268px] mx-4 my-4 px-5 py-4 transition-colors border-gray-300 bg-gray-100 dark:border-neutral-700 dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
Expand All @@ -41,13 +40,13 @@ export default function Home() {
priority
/>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
Find in-depth information about Next.js features and API.
An all-encompassing chatbot hosted on AWS.
</p>
</a>

<a
href=""
className="group rounded-lg border border-transparent mx-4 my-4 px-5 py-4 transition-colors border-gray-300 bg-gray-100 dark:border-neutral-700 dark:bg-neutral-800/30"
className="group rounded-lg border border-transparent max-w-[268px] mx-4 my-4 px-5 py-4 transition-colors border-gray-300 bg-gray-100 dark:border-neutral-700 dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
Expand All @@ -56,7 +55,7 @@ export default function Home() {
>
Doorman{" "}
</h2>
<div className="flex w-[150px] h-[150px] justify-center items-center">
<div className="mb-2 flex w-[150px] h-[150px] justify-center items-center">
<Image
className="mb-2 rounded transition-transform group-hover:translate-x-1 motion-reduce:transform-none"
src="/doorman.png"
Expand All @@ -67,13 +66,13 @@ export default function Home() {
/>
</div>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
Learn about Next.js in an interactive course with&nbsp;quizzes!
A voice assistant app for elderly tech coaching.
</p>
</a>

<a
href=""
className="group rounded-lg border border-transparent mx-4 my-4 px-5 py-4 transition-colors border-gray-300 bg-gray-100 dark:border-neutral-700 dark:bg-neutral-800/30"
className="group rounded-lg border border-transparent max-w-[268px] mx-4 my-4 px-5 py-4 transition-colors border-gray-300 bg-gray-100 dark:border-neutral-700 dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
Expand All @@ -91,20 +90,20 @@ export default function Home() {
priority
/>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
Explore starter templates for Next.js.
A software-in-the-loop simulation for autonomous drone navigation.
</p>
</a>

<a
href=""
className="group rounded-lg border border-transparent mx-4 my-4 px-5 py-4 transition-colors border-gray-300 bg-gray-100 dark:border-neutral-700 dark:bg-neutral-800/30"
className="group rounded-lg border border-transparent max-w-[268px] mx-4 my-4 px-5 py-4 transition-colors border-gray-300 bg-gray-100 dark:border-neutral-700 dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
<h2
className={`mb-3 text-2xl font-semibold group-hover:text-blue-500 group-hover:dark:text-blue-300`}
>
NTK for PINNs{" "}
NTsolver{" "}
</h2>
<Image
className="mb-2 rounded transition-transform group-hover:translate-x-1 motion-reduce:transform-none"
Expand All @@ -115,7 +114,8 @@ export default function Home() {
priority
/>
<p className={`m-0 max-w-[30ch] text-sm opacity-50 text-balance`}>
Instantly deploy your Next.js site to a shareable URL with Vercel.
A learning-based differential equation solver with enhanced
accuracy.
</p>
</a>
</div>
Expand Down

0 comments on commit 1222e79

Please sign in to comment.