11 |
)
31 | }
32 |
33 | export default App;
--------------------------------------------------------------------------------
/src/components/answerComponent.jsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef } from 'react'
2 | import { useRecoilState ,useRecoilValue, useRecoilStateLoadable } from 'recoil'
3 | import ReactMarkdown from 'react-markdown';
4 | import rehypeHighlight from 'rehype-highlight';
5 | import 'highlight.js/styles/github-dark.css';
6 | import remarkGfm from "remark-gfm";
7 | import { v4 as uuidv4 } from 'uuid';
8 | import { allChats } from '../store/atoms/allChats';
9 | import { questionFamily } from '../store/atoms/questionFamily';
10 | import { answerFamily } from '../store/atoms/answerFamily';
11 | import '../styles/style.css'
12 |
13 | export default function Chat(props){
14 |
15 | let askedQuestion=useRecoilValue(questionFamily(props.questionId))
16 | let answerId=useRef(uuidv4())
17 | let [currentAnswer,setAnswer]=useRecoilStateLoadable(answerFamily({id:answerId.current,question:askedQuestion.question}))
18 | let [chatHistory,setChatHistory]=useRecoilState(allChats)
19 |
20 | useEffect(()=>{
21 | let updatedAnswerId=chatHistory.map(chat=>
22 | chat.question===props.questionId?{ ...chat, answer: answerId}:chat
23 | );
24 | setChatHistory(updatedAnswerId)
25 | },[])
26 |
27 | function handleCopy(){
28 | navigator.clipboard.writeText(currentAnswer.contents.answer);
29 | }
30 |
31 | if(currentAnswer.state==='loading'){
32 |
33 | return
34 |
45 | }
46 |
47 | if(currentAnswer.state==='hasError'){
48 | console.log(currentAnswer.contents);
49 |
50 | return
35 |
36 |
37 |
38 |
39 |
44 |
40 |
41 |
42 |
43 |
51 |
53 | }
54 |
55 | return Some Error Occured While Generating Response
52 |
56 |
71 | }
--------------------------------------------------------------------------------
/src/components/chatArea.jsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef } from 'react'
2 | import { useRecoilState, useRecoilValue } from 'recoil'
3 | import 'highlight.js/styles/github-dark.css';
4 | import Online from './onlineIndicator';
5 | import { allChats } from '../store/atoms/allChats';
6 | import Question from './questions';
7 | import Chat from './answerComponent';
8 | import { chatBotAttributes } from '../store/atoms/attributesData';
9 | import '../styles/style.css'
10 |
11 | function scrollToBottom(element){
12 | element.scrollTop=element.scrollHeight
13 | }
14 |
15 | export default function ChatArea(){
16 | let [chatHistory,setChatHistory]=useRecoilState(allChats)//[{question: id,answer: id},]
17 | let chatArea=useRef();
18 |
19 | useEffect(()=>{
20 | scrollToBottom(chatArea.current)
21 | },[chatHistory])
22 |
23 | return
57 | 
58 |
59 |
60 |
70 |
61 |
66 | Copy
67 | {/* Add to Collection */}
68 |
69 |
24 |
32 | }
33 |
34 | function HeroIntro(){
35 | let {title,stylizeTitle,description,cta}=useRecoilValue(chatBotAttributes)
36 |
37 | let emphasizedTitle=null
38 | let normalTitle=null
39 | try{
40 | emphasizedTitle=stylizeTitle.emphasized
41 | normalTitle=stylizeTitle.normal
42 | }
43 | catch(e){
44 | null
45 | }
46 |
47 | return
27 | {chatHistory.map((history,index)=>{
28 | return(<>)
29 | })}
30 |
31 |
48 |
65 | }
--------------------------------------------------------------------------------
/src/components/heading.jsx:
--------------------------------------------------------------------------------
1 | import { useRecoilValue } from "recoil"
2 | import { chatBotAttributes } from "../store/atoms/attributesData"
3 | import '../styles/style.css'
4 |
5 | export default function Heading({setWindowState}){
6 | let {title}=useRecoilValue(chatBotAttributes)
7 |
8 | return
49 | {/* */}
50 |
51 |
52 |
53 |
54 | 55 | 56 | {emphasizedTitle?stylizeTitle.emphasized:"10x"} 57 | 58 | {normalTitle?normalTitle:title?title:"10xAnswers"} 59 |
60 |{description||"Because your Questions should not be left un-answered."}
61 | 62 |{cta||"Start Asking your Burning Questions"}
63 | 64 |
9 |
17 | }
--------------------------------------------------------------------------------
/src/components/index.jsx:
--------------------------------------------------------------------------------
1 | import '../styles/style.css'
2 | import 'highlight.js/styles/github-dark.css';
3 | import Input from './inputArea';
4 | import ChatArea from './chatArea';
5 | import Heading from './heading';
6 | import {useEffect } from 'react'
7 | import { RecoilRoot, useRecoilState, useSetRecoilState } from 'recoil'
8 | import { Rnd } from 'react-rnd'
9 | import { chatBotAttributes } from '../store/atoms/attributesData';
10 | import { chatWindowState } from '../store/atoms/chatWindowState';
11 |
12 | export default function ChatBot(props){
13 |
14 | return {title||"10xAnswers"}
10 | {setWindowState(current=>!current)}} 13 | > 14 | 15 | 16 |
66 |
75 |
67 |
71 | setWindowOpen(!open)}>
72 |
73 |
74 |
77 |
86 | }
87 |
88 | }
89 | // custom hookd, wanted to practice recoil, react(custom hooks), tailwind, ui ux and revise node express basically every thing
90 | // learned b/w week 9and 13 so created this component instead tell me a better way to get strong hold of these concepts
91 |
92 | // i have created a complete chatbot component10xAnswers because why not with the backend for your next project so you dont need to
93 | // worry about creating chatbot in your peoject, just add the prompt add backend url(dont worry if you dont want to build be just for
94 | // this i will be providing url to) hit and generate your responses, this is completely customizable and draggable too, open sourced
95 | // for you to look the codebase, built using react and recoil for optmizing state management, users can edit their questions,copy,
96 | // with complete support of markkdown rendering, for codes and tables try it out, also with a custom hook to display if the bot is up
97 | // for chat by checking internet connectivity status, soon will be adding ,media and voice modes along with more themes
98 |
99 | //installation and usage is very simple just do npm i 10xanswers
100 | // import { ChatBot } from '10xanswers';
101 |
102 | //
78 |
79 |
82 | {!open&&setWindowOpen(!open)}>
83 |
84 |
}
85 |
54 |
55 |
56 |
58 | }
59 |
60 | function InputOptions(){
61 | return
62 |
71 | }
72 |
73 |
--------------------------------------------------------------------------------
/src/components/onlineIndicator.jsx:
--------------------------------------------------------------------------------
1 | import useOnline from "../hooks/useOnline"
2 | import '../styles/style.css'
3 |
4 | export default function Online(){
5 | let online=useOnline();
6 | let onlineLabelStyle={padding: "0.3rem 1.1rem",borderRadius:"1rem",backgroundColor:"#15161d",
7 | fontSize:".8rem",display:"flex",width:"max-content",justifyContents:"center",
8 | alignItems:"center",gap:"6px",color:"white",fontWeight:500}
9 |
10 | return
63 |
64 |
66 | Add Media
65 |
67 |
68 |
70 | Voice Chat
69 |
11 | {online&&
12 |
13 |
15 | Online
16 | }
17 | {!online&&
18 |
19 |
21 | OffLine
22 | }
23 |
24 | }
--------------------------------------------------------------------------------
/src/components/questions.jsx:
--------------------------------------------------------------------------------
1 | import { questionFamily } from "../store/atoms/questionFamily"
2 | import { useRef, useState } from 'react'
3 | import { useRecoilState, useRecoilValue } from 'recoil'
4 | import 'highlight.js/styles/github-dark.css';
5 | import { chatBotAttributes } from "../store/atoms/attributesData";
6 | import '../styles/style.css'
7 |
8 | export default function Question(props){
9 | let {userIcon}=useRecoilValue(chatBotAttributes)
10 | let [currentQuestion,setQuestion]=useRecoilState(questionFamily(props.id))
11 |
12 | let [editing,setEditing]=useState(false)
13 | let questionArea=useRef()
14 | let originalQuestion=useRef()
15 |
16 | function handleEdit(){
17 | questionArea.current.contentEditable="true"
18 | questionArea.current.classList.add("editing")
19 | setEditing(editing=>!editing)
20 | originalQuestion.current=questionArea.current.innerText
21 | }
22 |
23 | function handleSubmit(){
24 | questionArea.current.contentEditable="false"
25 | questionArea.current.classList.remove("editing")
26 | setEditing(editing=>!editing)
27 |
28 | setQuestion(q=>({...q,question:questionArea.current.innerText}))
29 | }
30 |
31 | function handleCancel(){
32 | questionArea.current.contentEditable="false"
33 | questionArea.current.classList.remove("editing")
34 | setEditing(editing=>!editing)
35 |
36 | questionArea.current.innerText=originalQuestion.current
37 | }
38 |
39 | return
40 |
50 | }
--------------------------------------------------------------------------------
/src/hooks/useOnline.js:
--------------------------------------------------------------------------------
1 | import { useState,useEffect } from 'react'
2 |
3 | export default function useOnline(){
4 | let [online,setOnline]=useState(navigator.onLine)
5 | useEffect(()=>{
6 | function updateStatus(){
7 | setOnline(navigator.onLine)
8 | }
9 | window.addEventListener("online",updateStatus)
10 | window.addEventListener("offline",updateStatus)
11 |
12 | return()=>{
13 | window.removeEventListener("online",updateStatus)
14 | window.removeEventListener("offline",updateStatus)
15 | }
16 | },[])
17 |
18 | return online
19 | }
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | body{
6 | box-sizing: border-box;
7 | }
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | // @ts-ignore
2 |
3 | export { default as ChatBot } from './components'
--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
1 | import { createRoot } from 'react-dom/client'
2 | import './index.css'
3 | import App from './App.jsx'
4 |
5 | createRoot(document.getElementById('root')).render(
6 |
41 | 
42 |
45 | {editing&&
42 | {currentQuestion.question}
43 | {!editing&&} 44 |
46 | Save
47 | Cancel
48 |
}
49 |