safak · IsakGunnardo · Oct 2, 2024 · Oct 2, 2024 · Oct 2, 2024 · Oct 3, 2024
diff --git a/.gitignore b/.gitignore
@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+.env
diff --git a/README.md b/README.md
@@ -1,3 +1,3 @@
 # Lama Dev AI Chat Bot App Starter Setup
 
-This template provides a minimal setup to get React 19 working in Vite with HMR and some ESLint rules.
+This template provides a minimal setup to get React 19 working in Vite with HMR and some ESLint rules.# AI-Client
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Lama Dev AI Chat</title>
+    <title>Ardo DEV AI Chat</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,8 +10,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "react": "19.0.0-rc-8b08e99e-20240713",
-    "react-dom": "19.0.0-rc-8b08e99e-20240713"
+    "@clerk/clerk-react": "^5.9.4",
+    "@google/generative-ai": "^0.20.0",
+    "@tanstack/react-query": "^5.56.2",
+    "imagekitio-react": "^4.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-markdown": "^9.0.1",
+    "react-router-dom": "^6.26.2",
+    "react-type-animation": "^3.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",

diff --git a/src/components/chatList/ChatList.jsx b/src/components/chatList/ChatList.jsx
@@ -0,0 +1,46 @@
+import { Link } from "react-router-dom";
+import "./chatList.css";
+import { useQuery } from "@tanstack/react-query";
+
+const ChatList = () => {
+  const { isPending, error, data } = useQuery({
+    queryKey: ["userChats"],
+    queryFn: () =>
+      fetch(`${import.meta.env.VITE_API_URL}/api/userchats`, {
+        credentials: "include",
+      }).then((res) => res.json()),
+  });
+  return (
+    <div className="chatList">
+      <span className="title">DASHBOARD</span>
+      <Link to="/dashboard">Create a new Chat</Link>
+      <Link to="/dashboard">Explore Ardo AI</Link>
+      <Link to="/dashboard">Contact</Link>
+
+      <hr />
+      <span className="title">RECENT CHATS</span>
+
+      <div className="list">
+        {isPending
+          ? "Loading..."
+          : error
+          ? "Something went wrong!"
+          : data?.map((chat) => (
+              <Link to={`/dashboard/chats/${chat._id}`} key={chat._id}>
+                {chat.title}
+              </Link>
+            ))}
+      </div>
+      <hr />
+      <div className="upgrade">
+        <img src="/logo.png" alt="" />
+        <div className="texts">
+          <span>Upgrade to Ardo AI Pro</span>
+          <span>Get unlimited acces to all features</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ChatList;
diff --git a/src/components/chatList/chatList.css b/src/components/chatList/chatList.css
@@ -0,0 +1,63 @@
+.chatList {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  hr {
+    border: none;
+    height: 2px;
+    background-color: #ddd;
+    opacity: 0.1;
+    border-radius: 5px;
+    margin: 20px 0px;
+  }
+
+  .title {
+    font-weight: 600;
+    font-size: 10px;
+    margin-bottom: 10px;
+  }
+
+  .list {
+    display: flex;
+    flex-direction: column;
+    overflow: scroll;
+  }
+
+  a {
+    padding: 10px;
+    border-radius: 10px;
+
+    &:hover {
+      background-color: #2c2937;
+    }
+  }
+
+
+  .upgrade{
+    margin-top: auto;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 12px;
+
+    img{
+        width: 24px;
+        height: 24px;
+    }
+
+    .texts{
+        display: flex;
+        flex-direction: column;
+
+        span{
+            &:first-child{
+                font-weight: 600;
+            }
+
+            &:last-child{
+                color:#888
+        }
+    }
+  }
+}}
diff --git a/src/components/newPrompt/NewPrompt.jsx b/src/components/newPrompt/NewPrompt.jsx
@@ -0,0 +1,144 @@
+import { useEffect, useRef, useState } from "react";
+import "./newPrompt.css";
+import Upload from "../upload/Upload";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { IKImage } from "imagekitio-react";
+import Markdown from "react-markdown";
+
+import model from "../../lib/gemini";
+
+const NewPrompt = ({ data }) => {
+  const [question, setQuestion] = useState("");
+  const [answer, setAnswer] = useState("");
+
+  const [img, setImg] = useState({
+    isLoading: false,
+    error: "",
+    dbData: {},
+    aiData: {},
+  });
+
+  const chat = model.startChat({
+    history: data?.history.map(({ role, parts }) => ({
+      role,
+      parts: [{ text: parts[0].text }],
+    })),
+    generationConfig: {
+      // maxOutputTokens: 100,
+    },
+  });
+  const endRef = useRef(null);
+  const formRef = useRef(null);
+
+  useEffect(() => {
+    endRef.current.scrollIntoView({ behavior: "smooth" });
+  }, [data, question, answer, img.dbData]);
+
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation({
+    mutationFn: () => {
+      return fetch(`${import.meta.env.VITE_API_URL}/api/chats/${data._id}`, {
+        method: "PUT",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          question: question.length ? question : undefined,
+          answer,
+          img: img.dbData?.filePath || undefined,
+        }),
+      }).then((res) => res.json());
+    },
+    onSuccess: () => {
+      queryClient
+        .invalidateQueries({ queryKey: ["chat", data._id] })
+        .then(() => {
+          formRef.current.reset();
+          setQuestion("");
+          setAnswer("");
+          setImg({
+            isLoading: false,
+            error: "",
+            dbData: {},
+            aiData: {},
+          });
+        });
+    },
+    onError: (err) => {
+      console.log(err);
+    },
+  });
+  const add = async (text, isInitial) => {
+    if (!isInitial) setQuestion(text);
+    try {
+      const result = await chat.sendMessageStream(
+        Object.entries(img.aiData).length ? [img.aiData, text] : [text]
+      );
+
+      let accumulatedText = "";
+      for await (const chunk of result.stream) {
+        const chunkText = chunk.text();
+        console.log(chunkText);
+        accumulatedText += chunkText;
+        setAnswer(accumulatedText);
+      }
+
+      mutation.mutate();
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    const text = e.target.text.value;
+    if (!text) return;
+
+    add(text, false);
+  };
+
+  // IN PRODUCTION WE DONT NEED IT 
+  const hasRun = useRef(false);
+  useEffect(() => {
+    if (!hasRun.current) {
+      if (data?.history.length === 1) {
+        add(data.history[0].parts[0].text, true);
+      }
+    }
+    hasRun.current = true;
+  }, []);
+  return (
+    <>
+      {/*ADD NEW CHAT */}
+      {img.isLoading && <div className=""></div>}
+      {img.dbData?.filePath && (
+        <IKImage
+          urlEndpoint={import.meta.env.VITE_IMAGE_KIT_ENDPOINT}
+          path={img.dbData?.filePath}
+          width="380"
+          transformation={[{ width: 380 }]}
+        />
+      )}
+      {question && <div className="message user">{question}</div>}
+      {answer && (
+        <div className="message">
+          <Markdown>{answer}</Markdown>
+        </div>
+      )}
+
+      <div className="endChat" ref={endRef}></div>
+      <form className="newForm" onSubmit={handleSubmit} ref={formRef}>
+        <Upload setImg={setImg} />
+        <input id="file" type="file" multiple={false} hidden />
+        <input type="text" name="text" placeholder="Ask anything..." />
+        <button>
+          <img src="/arrow.png" alt="" />
+        </button>
+      </form>
+    </>
+  );
+};
+
+export default NewPrompt;
diff --git a/src/components/newPrompt/newPrompt.css b/src/components/newPrompt/newPrompt.css
@@ -0,0 +1,41 @@
+
+  .endChat{
+    padding-bottom: 100px;
+  }
+  .newForm {
+    width: 50%;
+    position: absolute;
+    bottom: 0;
+    background-color: #2c2937;
+    border-radius: 20px;
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    padding: 0px 20px;
+
+    input{
+        flex: 1;
+        padding: 20px;
+        border: none;
+        outline: none;
+        background-color: transparent;
+        color: #ececec;
+    }
+    button,
+    label {
+      border-radius: 50%;
+      background-color: #605e68;
+      border: none;
+      padding: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+
+      img {
+        width: 16px;
+        height: 16px;
+      }
+    }
+  }
+
-Original file line number
+Diff line change
@@ Expand Up / @@ -22,3 +22,4 @@ dist-ssr @@
     *.njsproj
     *.sln
     *.sw?
+    .env