Loading...
34 | } 35 | 36 | return uid != null ?Loading...
34 | } 35 | 36 | return uid != null ? children :
17 |
22 |
48 |
49 | );
50 | }
51 |
52 | export default SignUp;
53 |
--------------------------------------------------------------------------------
/SECURITY.md:
--------------------------------------------------------------------------------
1 | # Security Policy
2 |
3 | ## Supported Versions
4 |
5 | We actively support the following versions of Yapper AI with security updates:
6 |
7 | | Version | Supported |
8 | | ------- | ------------------ |
9 | | 5.1.x | :white_check_mark: |
10 | | 5.0.x | :x: |
11 | | 4.0.x | :white_check_mark: |
12 | | < 4.0 | :x: |
13 |
14 | If you're using an unsupported version, we recommend upgrading to a supported version to ensure you receive the latest security fixes.
15 |
16 | ---
17 |
18 | ## Reporting a Vulnerability
19 |
20 | We take security issues seriously and appreciate your efforts in responsibly disclosing vulnerabilities. If you discover a security vulnerability, please follow these steps:
21 |
22 | 1. **Contact Us**:
23 | Email us at [shashanklhr](mailto:shashanklhr@gmail.com) with a detailed description of the issue. Include:
24 | - Affected version(s).
25 | - Steps to reproduce the vulnerability.
26 | - Potential impact of the issue.
27 |
28 | 2. **Response Timeline**:
29 | - We aim to acknowledge your report within **48 hours**.
30 | - You can expect a detailed update within **5 business days**, outlining our assessment and next steps.
31 |
32 | 3. **What to Expect**:
33 | - If the issue is valid, we will work on a fix and credit you in our release notes, if desired.
34 | - If the issue is declined, we will provide an explanation for our decision.
35 |
36 | 4. **Responsible Disclosure**:
37 | Please refrain from publicly disclosing the vulnerability until we have resolved it and released a patch.
38 |
39 | ---
40 |
41 | ## Security Best Practices for Users
42 |
43 | To maintain a secure environment when using Yapper AI, we recommend:
44 |
45 | - Regularly updating to the latest version.
46 | - Using strong authentication methods (e.g., secure Firebase login).
47 | - Reporting any unusual behavior or potential security issues promptly.
48 |
--------------------------------------------------------------------------------
/src/assets/google-color-svgrepo-com.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/src/components/Testimonials/Testimonial.jsx:
--------------------------------------------------------------------------------
1 | import React, { Suspense } from 'react'
2 |
3 | const LazyCard = React.lazy(() => import("./TestimonialCard.jsx"))
4 |
5 | function Testimonial() {
6 | return (
7 |
23 | {/* Features Section */}
24 |
25 |
27 |
28 |
29 | {/* Build Info Section */}
30 |
31 |
33 |
34 | {/* Testimonials Section */}
35 |
36 |
38 |
39 | {/* Call to Action */}
40 |
41 |
43 |
44 | {/* Developer Section */}
45 |
47 | 9 | What Our Users Say 10 |
11 |
12 |
13 |
18 |
19 |
24 |
25 |
30 |
31 |
36 |
37 |
42 |
43 |
48 |
49 |
50 |
23 |
54 | );
55 | }
56 |
57 | export default Header;
58 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Yapper AI 🤖
2 |
3 | Welcome to **Yapper AI** – an innovative chatbot that offers numerous companions to talk to, each with a unique personality based on current world trends. Whether you're looking for a friendly chat, intellectual discussion, or some lighthearted fun, Yapper AI has it all!
4 |
5 | 🚀 **[Yapper AI - Live App](https://yapper-ai.vercel.app/)**
6 |
7 | ## 📚 Overview
8 |
9 | **Yapper AI** is a modern, feature-rich chatbot web app built using ReactJS, TailwindCSS, and the powerful **Gemini Flash 1.5** model. The app features a wide range of personalities users can interact with, from the trending **Sigma Male** persona to a playful **Baby** companion. Each personality offers a unique conversational experience tailored to different moods and trends.
10 |
11 | This project is open-source, and we welcome developers to contribute to its ongoing development!
12 |
13 | ## 🎨 Features
14 |
15 | - **Personalized Chat Companions:** Multiple personalities based on modern trends such as Desi Indian, Caring Girlfriend, Anime Characters, and more.
16 | - **Advanced Markdown Rendering:** Complex markdown text is used to display beautifully formatted, highlighted chat content.
17 | - **Firebase Authentication:** Secure login and user management with Firebase integration.
18 | - **Responsive Design:** The app is fully responsive, providing a seamless experience across devices, powered by TailwindCSS.
19 | - **Open Source Contribution:** Yapper AI is open to contributions from developers who want to enhance its features and functionalities.
20 |
21 | ## 🛠️ Tech Stack
22 |
23 | - **Frontend:** ReactJS, TailwindCSS
24 | - **Backend Model:** Gemini Flash 1.5 (for chatbot personalities)
25 | - **Authentication:** Firebase
26 | - **Markdown Rendering:** React Markdown
27 | - **Deployment:** Vercel
28 |
29 | ## 🤝 Contributing
30 |
31 | We welcome contributions to Yapper AI! To get started:
32 |
33 | 1. Fork this repository
34 | 2. Create a new branch:
35 | ```bash
36 | git checkout -b feature/your-feature
37 | ```
38 | 3. Commit your changes
39 | ```bash
40 | git commit -m "Add some features"
41 | ```
42 | 4. Push to the branch:
43 | ```bash
44 | git push origin feature/your-feature
45 | ```
46 | 5.Open a pull request
47 |
48 | please make sure your code adheres to our coding standards and is well documented.
49 |
50 | ## 📄 License
51 |
52 | This project is open source under the MIT License. Feel free to use it as you see fit.
53 |
54 | ## 🌐 Links
55 |
56 | - **Live App:** [Yapper AI](https://yapper-ai.vercel.app/)
57 | - **Github Repository URL:** [Yapper AI Github](https://github.com/Ganesh-Sharmaz/YapperAI)
58 |
59 | ## ✨ Contributors
60 |
61 | Thanks to all the amazing developers who have contributed to the project.
62 |
63 |
64 |
65 |
--------------------------------------------------------------------------------
/src/components/Features/Features.jsx:
--------------------------------------------------------------------------------
1 | import React, { Suspense } from 'react'
2 | import FeatureCard from './FeatureCard'
3 |
4 | const LazyFCard = React.lazy(() => import('./FeatureCard.jsx'))
5 |
6 | function Features() {
7 | return (
8 |
24 |
29 |
25 |
26 |
28 | YAI
27 |
30 |
53 | 31 | A certified degree holder in yappanese 32 |
33 | {currentUser ? ( 34 | <> 35 |
36 | {currentUser}
37 |
38 |
44 |
45 | ) : (
46 |
47 | Sign In
48 |
49 | )}
50 |
51 |
52 | 10 | Personalities that Speak to You 11 |
12 |
13 |
14 |
19 |
20 |
25 |
26 |
31 |
32 |
37 |
38 |
43 |
44 |
49 |
50 |
55 |
56 |
61 |
62 |
67 |
68 |
10 |
59 | );
60 | }
61 |
62 | export const gitInfoLoader = async () => {
63 | const response = await fetch("https://api.github.com/users/Ganesh-Sharmaz");
64 | return response.json();
65 | };
66 |
67 | export default About;
68 |
--------------------------------------------------------------------------------
/src/components/Hero/Hero.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { signInWithPopup, GoogleAuthProvider } from "firebase/auth";
3 | import { auth } from "../Server/server.js";
4 | import { useNavigate } from "react-router-dom";
5 | import GoogleImg from '../../assets/google-color-svgrepo-com.png'
6 |
7 | function Hero() {
8 | const navigate = useNavigate();
9 |
10 | const provider = new GoogleAuthProvider();
11 | const handleSignIn = () => {
12 | signInWithPopup(auth, provider)
13 | .then((result) => {
14 | // This gives you a Google Access Token. You can use it to access the Google API.
15 | const credential =
16 | GoogleAuthProvider.credentialFromResult(result);
17 | const token = credential.accessToken;
18 | // The signed-in user info.
19 | const user = result.user;
20 | console.log("User: ", user);
21 | console.log("sign in successful");
22 |
23 | if (user) {
24 | localStorage.setItem("userName", user.displayName);
25 | navigate("/");
26 | }
27 | // IdP data available using getAdditionalUserInfo(result)
28 | // ...
29 | })
30 | .catch((error) => {
31 | // Handle Errors here.
32 | const errorCode = error.code;
33 | const errorMessage = error.message;
34 | console.log(errorCode, errorMessage);
35 | const email = error.customData.email;
36 | // The AuthCredential type that was used.
37 | const credential =
38 | GoogleAuthProvider.credentialFromError(error);
39 | // ...
40 | });
41 | };
42 |
43 | return (
44 |
11 |
58 | 12 | Developer 13 |
14 |
15 | 
20 |
57 |
21 |
23 | {data.name}
22 |24 | MERN stack developer passionate about building 25 | interactive web applications. Creator of Yapper AI. 26 |
27 |
28 |
34 |
37 |
38 |
56 | 39 | I welcome contributions and feedback from fellow 40 | developers. 41 |
42 |
43 |
55 | 44 | Contribute here: {" "} 45 | 51 | Yapper AI Repository 52 | 53 |
54 |
45 |
71 | );
72 | }
73 |
74 | export default Hero;
75 |
--------------------------------------------------------------------------------
/src/assets/react.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Contributor Covenant Code of Conduct
2 |
3 | ## Our Pledge
4 |
5 | We as members, contributors, and leaders pledge to make participation in our
6 | community a harassment-free experience for everyone, regardless of age, body
7 | size, visible or invisible disability, ethnicity, sex characteristics, gender
8 | identity and expression, level of experience, education, socio-economic status,
9 | nationality, personal appearance, race, religion, or sexual identity
10 | and orientation.
11 |
12 | We pledge to act and interact in ways that contribute to an open, welcoming,
13 | diverse, inclusive, and healthy community.
14 |
15 | ## Our Standards
16 |
17 | Examples of behavior that contributes to a positive environment for our
18 | community include:
19 |
20 | * Demonstrating empathy and kindness toward other people
21 | * Being respectful of differing opinions, viewpoints, and experiences
22 | * Giving and gracefully accepting constructive feedback
23 | * Accepting responsibility and apologizing to those affected by our mistakes,
24 | and learning from the experience
25 | * Focusing on what is best not just for us as individuals, but for the
26 | overall community
27 |
28 | Examples of unacceptable behavior include:
29 |
30 | * The use of sexualized language or imagery, and sexual attention or
31 | advances of any kind
32 | * Trolling, insulting or derogatory comments, and personal or political attacks
33 | * Public or private harassment
34 | * Publishing others' private information, such as a physical or email
35 | address, without their explicit permission
36 | * Other conduct which could reasonably be considered inappropriate in a
37 | professional setting
38 |
39 | ## Enforcement Responsibilities
40 |
41 | Community leaders are responsible for clarifying and enforcing our standards of
42 | acceptable behavior and will take appropriate and fair corrective action in
43 | response to any behavior that they deem inappropriate, threatening, offensive,
44 | or harmful.
45 |
46 | Community leaders have the right and responsibility to remove, edit, or reject
47 | comments, commits, code, wiki edits, issues, and other contributions that are
48 | not aligned to this Code of Conduct, and will communicate reasons for moderation
49 | decisions when appropriate.
50 |
51 | ## Scope
52 |
53 | This Code of Conduct applies within all community spaces, and also applies when
54 | an individual is officially representing the community in public spaces.
55 | Examples of representing our community include using an official e-mail address,
56 | posting via an official social media account, or acting as an appointed
57 | representative at an online or offline event.
58 |
59 | ## Enforcement
60 |
61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
62 | reported to the community leaders responsible for enforcement at
63 | shashanklhr@gmail.com.
64 | All complaints will be reviewed and investigated promptly and fairly.
65 |
66 | All community leaders are obligated to respect the privacy and security of the
67 | reporter of any incident.
68 |
69 | ## Enforcement Guidelines
70 |
71 | Community leaders will follow these Community Impact Guidelines in determining
72 | the consequences for any action they deem in violation of this Code of Conduct:
73 |
74 | ### 1. Correction
75 |
76 | **Community Impact**: Use of inappropriate language or other behavior deemed
77 | unprofessional or unwelcome in the community.
78 |
79 | **Consequence**: A private, written warning from community leaders, providing
80 | clarity around the nature of the violation and an explanation of why the
81 | behavior was inappropriate. A public apology may be requested.
82 |
83 | ### 2. Warning
84 |
85 | **Community Impact**: A violation through a single incident or series
86 | of actions.
87 |
88 | **Consequence**: A warning with consequences for continued behavior. No
89 | interaction with the people involved, including unsolicited interaction with
90 | those enforcing the Code of Conduct, for a specified period of time. This
91 | includes avoiding interactions in community spaces as well as external channels
92 | like social media. Violating these terms may lead to a temporary or
93 | permanent ban.
94 |
95 | ### 3. Temporary Ban
96 |
97 | **Community Impact**: A serious violation of community standards, including
98 | sustained inappropriate behavior.
99 |
100 | **Consequence**: A temporary ban from any sort of interaction or public
101 | communication with the community for a specified period of time. No public or
102 | private interaction with the people involved, including unsolicited interaction
103 | with those enforcing the Code of Conduct, is allowed during this period.
104 | Violating these terms may lead to a permanent ban.
105 |
106 | ### 4. Permanent Ban
107 |
108 | **Community Impact**: Demonstrating a pattern of violation of community
109 | standards, including sustained inappropriate behavior, harassment of an
110 | individual, or aggression toward or disparagement of classes of individuals.
111 |
112 | **Consequence**: A permanent ban from any sort of public interaction within
113 | the community.
114 |
115 | ## Attribution
116 |
117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage],
118 | version 2.0, available at
119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
120 |
121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct
122 | enforcement ladder](https://github.com/mozilla/diversity).
123 |
124 | [homepage]: https://www.contributor-covenant.org
125 |
126 | For answers to common questions about this code of conduct, see the FAQ at
127 | https://www.contributor-covenant.org/faq. Translations are available at
128 | https://www.contributor-covenant.org/translations.
129 |
--------------------------------------------------------------------------------
/src/components/Home/Home.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { GoogleGenerativeAI } from "@google/generative-ai";
3 | import { useRef, useEffect, useState } from "react";
4 | import { Send } from "@mui/icons-material";
5 | import rehypeHighlight from "rehype-highlight";
6 | import remarkGfm from "remark-gfm";
7 | import "highlight.js/styles/github.css";
8 |
9 | import "katex/dist/katex.min.css";
10 |
11 | import {
12 | Dropdown,
13 | DropdownTrigger,
14 | DropdownMenu,
15 | DropdownItem,
16 | Button,
17 | } from "@nextui-org/react";
18 |
19 | import ReactMarkdown from "react-markdown";
20 |
21 |
22 | function Home() {
23 | console.log("Arrived at Homepage");
24 | const [inputValue, setInputValue] = useState("");
25 |
26 | const [chatHistory, setChatHistory] = useState([]);
27 |
28 | const [currentVoice, setCurrentVoice] = useState(0);
29 |
30 | const [activityIndex, setActivityIndex] = useState(0);
31 |
32 | const inputRef = useRef(null);
33 | const chatEndRef = useRef(null);
34 | const VoiceList = [
35 | { person: "Desi", prompt: "Hinglish and sarcasm" },
36 | { person: "Baby", prompt: "silly baby voice" },
37 | {
38 | person: "intellectual",
39 | prompt: "english and help me with the problem",
40 | },
41 | { person: "Girlfriend", prompt: "caring girlfriend voice" },
42 |
43 | {
44 | person: "Royal",
45 | prompt: " talk in gardinose style and royal voice ",
46 | },
47 | { person: "BrainRot", prompt: " funny brainrot" },
48 | {
49 | person: "Real AI",
50 | prompt: "Hypothetical Evil AI",
51 | },
52 | {
53 | person: "Anime",
54 | prompt: "voice of any random anime main character and provide the name of the main character",
55 | },
56 |
57 | { person: "Sigma Male", prompt: "sigma male voice, like the top g" },
58 | ];
59 |
60 | useEffect(() => {
61 | chatEndRef.current?.scrollIntoView({ behavior: "smooth" });
62 | }, [inputValue]);
63 |
64 | useEffect(() => {
65 | // Function to handle keypress event
66 | const handleKeyPress = (event) => {
67 | if (event.key === "/") {
68 | event.preventDefault(); // Prevent typing the '/' into the input field
69 | if (inputRef.current) {
70 | inputRef.current.focus(); // Focus the input field
71 | }
72 | }
73 | };
74 |
75 | // Add event listener for keydown
76 | window.addEventListener("keydown", handleKeyPress);
77 |
78 | // Clean up the event listener on component unmount
79 | return () => {
80 | window.removeEventListener("keydown", handleKeyPress);
81 | };
82 | }, []);
83 |
84 | const handleSubmit = async (e) => {
85 | e.preventDefault();
86 | if (inputValue.trim !== "") {
87 | setChatHistory((prevHistory) => [
88 | ...prevHistory,
89 | {
90 | type: "user",
91 | text: inputValue,
92 | },
93 | ]);
94 |
95 | setInputValue("");
96 |
97 | setChatHistory((prevHistory) => [
98 | ...prevHistory,
99 | {
100 | type: "bot",
101 | text: "...",
102 | },
103 | ]);
104 |
105 | try {
106 | const genAI = new GoogleGenerativeAI(
107 | import.meta.env.VITE_REACT_GEMINI_API
108 | );
109 | const model = genAI.getGenerativeModel({
110 | model: "gemini-1.5-flash",
111 | });
112 |
113 | const prompt = `Give response in ${VoiceList[currentVoice].prompt} to the further message, ${inputValue}`;
114 |
115 | const chat = model.startChat({
116 | history: [
117 | {
118 | role: "user",
119 | parts: [{ text: "Hello" }],
120 | },
121 | {
122 | role: "model",
123 | parts: [
124 | {
125 | text: "Great to meet you. What would you like to know?",
126 | },
127 | ],
128 | },
129 | ],
130 | });
131 |
132 | let result = await chat.sendMessage(prompt);
133 | console.log(result.response.text());
134 |
135 | // const result = await model.generateContent(prompt);
136 | // console.log(result.response.text());
137 | const textResponse = result.response.text();
138 | setChatHistory((prevHistory) =>
139 | prevHistory.map((msg) =>
140 | msg.text === "..."
141 | ? { type: "bot", text: textResponse }
142 | : msg
143 | )
144 | );
145 | } catch (error) {
146 | console.error("Error while fetching the values", error);
147 | setChatHistory((prevHistory) =>
148 | prevHistory.map((msg) =>
149 | msg.text === "..."
150 | ? { type: "Enable to fetch request." }
151 | : msg
152 | )
153 | );
154 | }
155 | }
156 | };
157 |
158 | useEffect(() => {
159 | chatEndRef.current?.scrollIntoView({ behavior: "smooth" });
160 | }, [chatHistory]);
161 |
162 | const handleActive = (index) => {
163 | setActivityIndex(index);
164 | setCurrentVoice(index);
165 | };
166 |
167 | const [selectedKeys, setSelectedKeys] = React.useState(new Set(["Desi"]));
168 |
169 | const selectedValue = React.useMemo(
170 | () => Array.from(selectedKeys).join(", ").replaceAll("_", " "),
171 | [selectedKeys]
172 | );
173 |
174 |
175 |
176 |
177 |
178 | return (
179 |
46 |
54 |
47 |
49 | YAPPER AI
48 |50 | Your AI companion, with personalities that match your every 51 | mood! 52 |
53 |
55 |
70 |
56 |
58 | Sign Up
57 |
62 | 
67 |
69 | Sign in with Google
68 |
180 | {/* for big screens */}
181 |
423 | );
424 | }
425 |
426 | export default Home;
427 |
--------------------------------------------------------------------------------
182 | {VoiceList.map((voice, index) => (
183 |
194 | ))}
195 |
196 |
197 | {/* for small screens */}
198 |
199 |
200 |
201 |
202 |
209 |
210 |
219 | {VoiceList.map((msg, index) => (
220 | handleActive(index)}
227 | key={msg.person}
228 | >
229 | {msg.person}
230 |
231 | ))}
232 |
233 |
234 |
235 |
236 |
237 |
400 |
238 | {chatHistory.map((msg, index) => (
239 | <>
240 |
399 |
248 |
318 | ),
319 | ol: (props) => (
320 |
324 | ),
325 | li: (props) => (
326 |
330 | ),
331 |
332 | // Blockquote
333 | blockquote: (props) => (
334 |
338 | ),
339 |
340 | // Code and Preformatted Text
341 | code: ({
342 | inline,
343 | children,
344 | ...props
345 | }) =>
346 | inline ? (
347 |
351 | {children}
352 |
353 | ) : (
354 |
355 |
357 | ),
358 |
359 | // Links
360 | a: (props) => (
361 |
365 | ),
366 |
367 | // Horizontal Rule
368 | hr: () => (
369 | {children}
356 |
370 | ),
371 |
372 | // Images
373 | img: (props) => (
374 |
379 | ),
380 | }}
381 | >
382 | {msg.text}
383 |
387 | YOU 388 |
389 | ) : ( 390 |391 | YAI 392 |
393 | )} 394 | 395 | ))} 396 | 397 | 398 |
401 |
421 |
422 |