feat: add chat page

Author: neysidev

app/_components/Chat.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import { useEffect, useRef } from "react"
+
+import { MESSAGES } from "@/fixtures/chats"
+import Chat from "@/components/common/Chat"
+import ChatNote from "@/components/common/ChatNote"
+import Messages from "@/components/common/Messages"
+
+export default function ChatPage() {
+  const messagesEndRef = useRef<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
+  }, [])
+
+  return (
+    <div
+      style={{ height: "calc(100vh - 32px)" }}
+      className="flex flex-col justify-between"
+    >
+      <div className="flex-1 overflow-y-auto">
+        <Messages messages={MESSAGES} />
+        <div ref={messagesEndRef} />
+      </div>
+      <div className="space-y-4 bg-neutral-100">
+        <Chat />
+        <ChatNote />
+      </div>
+    </div>
+  )
+}

app/chat/[id]/page.tsx

@@ -1,4 +1,4 @@
-import Chat from "./_components/Chat"
+import Chat from "../components/common/Chat"
 import Header from "./_components/Header"
 import Prompts from "./_components/Prompts"
 

app/page.tsx

@@ -0,0 +1,70 @@
+"use client"
+
+import clsx from "clsx"
+import { useState } from "react"
+import { usePathname, useRouter } from "next/navigation"
+
+import { useChatStore } from "@/stores/chatStore"
+import { generateRandomId } from "@/utils/random"
+import Icon from "@/components/common/Icon"
+import Tooltip from "@/components/common/Tooltip"
+import AddAttachment from "@/app/_components/AddAttachment"
+
+const maxLength = 1000
+
+export default function Chat() {
+  const router = useRouter()
+  const { addMessage } = useChatStore()
+
+  const pathname = usePathname()
+  const isHomePage = pathname === "/"
+
+  const [prompt, setPrompt] = useState<string>("")
+
+  const onSubmit = () => {
+    const id = generateRandomId()
+
+    addMessage(id, {
+      role: "user",
+      content: prompt,
+    })
+    router.push(`/chat/${id}`)
+  }
+
+  return (
+    <section
+      className={clsx(
+        "w-full space-y-2 bg-white shadow-sm rounded-xl border p-4 border-neutral-150",
+        isHomePage ? "sm:mt-16" : ""
+      )}
+    >
+      <textarea
+        rows={isHomePage ? 5 : 1}
+        value={prompt}
+        maxLength={maxLength}
+        className="bg-transparent text-sm w-full resize-none placeholder:text-black focus:outline-none"
+        placeholder="Ask whatever you want..."
+        onChange={e => setPrompt(e.target.value)}
+      />
+
+      <footer className="flex text-sm items-end justify-between">
+        <AddAttachment />
+
+        <div className="space-x-2 flex items-center">
+          <span className="ml-auto text-neutral-500 font-medium">
+            {prompt.length}/{maxLength}
+          </span>
+
+          <Tooltip id="send" content="Send" place="top">
+            <button
+              onClick={onSubmit}
+              className="rounded-xl p-1.5 text-white bg-gradient-to-t from-purple-900 to-purple-600"
+            >
+              <Icon name="arrowUp" size={16} strokeWidth={2} />
+            </button>
+          </Tooltip>
+        </div>
+      </footer>
+    </section>
+  )
+}

components/common/Chat.tsx

@@ -0,0 +1,7 @@
+export default function ChatNote() {
+  return (
+    <p className="text-xs text-center w-full">
+      ChatAI can make mistakes. Check important info.
+    </p>
+  )
+}

components/common/ChatNote.tsx

@@ -17,13 +17,13 @@ const Layout: FC<PropsWithChildren> = ({ children }) => {
 
       <main
         className={clsx(
-          "flex-1 p-4 md:py-16 max-h-screen overflow-y-auto",
+          "flex-1 p-4 max-h-screen overflow-y-auto",
           isHomePage && "sm:grid sm:place-items-center"
         )}
       >
         <section
           className={clsx(
-            "max-w-3xl min-w-3xl mx-auto",
+            "max-w-3xl min-w-3xl mx-auto h-full relative",
             isHomePage &&
               "flex flex-col h-full items-start justify-between sm:h-auto"
           )}

components/common/Layout.tsx

@@ -0,0 +1,21 @@
+import { Message } from "@/stores/chatStore"
+import UserMessage from "./UserMessage"
+import SystemMessage from "./SystemMessage"
+
+interface MessagesProps {
+  messages: Message[]
+}
+
+export default function Messages({ messages }: MessagesProps) {
+  return (
+    <section className="flex flex-col flex-1 py-4 text-sm space-y-4 justify-end">
+      {messages.map(({ role, content }, index) =>
+        role === "user" ? (
+          <UserMessage key={index}>{content}</UserMessage>
+        ) : (
+          <SystemMessage key={index}>{content}</SystemMessage>
+        )
+      )}
+    </section>
+  )
+}

components/common/Messages.tsx

@@ -0,0 +1,24 @@
+import Image from "next/image"
+import ReactMarkdown from "react-markdown"
+import rehypeHighlight from "rehype-highlight"
+import "highlight.js/styles/github.css"
+
+export default function SystemMessage({ children }: { children: string }) {
+  return (
+    <div className="flex space-x-2 items-start max-w-[90%] sm:max-w-[80%]">
+      <Image
+        src="/logo.png"
+        alt="Logo"
+        width={34}
+        height={34}
+        className="rounded-full"
+      />
+
+      <div className="system-message overflow-x-auto bg-white border border-neutral-200 p-4 rounded-xl">
+        <ReactMarkdown rehypePlugins={[rehypeHighlight]}>
+          {children}
+        </ReactMarkdown>
+      </div>
+    </div>
+  )
+}

components/common/SystemMessage.tsx

@@ -0,0 +1,20 @@
+import Image from "next/image"
+
+export default function UserMessage({ children }: { children: string }) {
+  return (
+    <div className="flex space-x-2 items-start max-w-[80%] ml-auto">
+      <div
+        className="bg-neutral-200 border border-neutral-300 p-3 rounded-xl"
+        dangerouslySetInnerHTML={{ __html: children }}
+      />
+
+      <Image
+        src="/profile.png"
+        alt="Profile"
+        width={34}
+        height={34}
+        className="hidden sm:block rounded-full"
+      />
+    </div>
+  )
+}

components/common/UserMessage.tsx

@@ -0,0 +1,43 @@
+import { Message } from "@/stores/chatStore"
+
+export const MESSAGES: Message[] = [
+  {
+    role: "user",
+    content: "Can you show me how to implement a basic React component?",
+  },
+  {
+    role: "system",
+    content:
+      "Sure! Here's a simple example of a React component that displays a greeting message.\n ```jsx\nimport React from 'react';\n\nconst Greeting = () => {\n  return <h1>Hello, welcome to my site!</h1>;\n};\n\nexport default Greeting;\n```",
+  },
+  {
+    role: "user",
+    content:
+      "That looks great! Can you add a button that changes the greeting message when clicked?",
+  },
+  {
+    role: "system",
+    content:
+      "Absolutely! Here's the updated version with a button that changes the message.\n```jsx\nimport React, { useState } from 'react';\n\nconst Greeting = () => {\n  const [message, setMessage] = useState('Hello, welcome to my site!');\n\n  const changeMessage = () => {\n    setMessage('Thanks for clicking the button!');\n  };\n\n  return (\n    <div>\n      <h1>{message}</h1>\n      <button onClick={changeMessage}>Click me</button>\n    </div>\n  );\n};\n\nexport default Greeting;\n```",
+  },
+  {
+    role: "user",
+    content:
+      "Looks good! Can you share a quick guide on how to use hooks in React?",
+  },
+  {
+    role: "system",
+    content:
+      "Sure! Here's a quick list of common React hooks and how they are used:\n- `useState`: Allows you to add state to your functional components.\n- `useEffect`: Used for side effects such as fetching data, subscribing to events, etc.\n- `useContext`: Lets you subscribe to React context without needing to pass props manually.\n- `useReducer`: An alternative to `useState`, more suitable for complex state logic.\n- `useRef`: Allows you to access a DOM element or store a mutable value.",
+  },
+  {
+    role: "user",
+    content:
+      "That's helpful! Can you show me an image of a React component lifecycle?",
+  },
+  {
+    role: "system",
+    content:
+      "Here’s an image that illustrates the React component lifecycle.\n![React Component Lifecycle](https://cdn-media-1.freecodecamp.org/images/1*_drMYY_IEgboMS4RhvC-lQ.png)",
+  },
+]