Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Solves Issue #19 #52

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 24 additions & 10 deletions components/ChatSection.tsx
Original file line number Diff line number Diff line change
@@ -1,23 +1,37 @@
import ChatBubble from "@/components/ChatBubble";
import { useRef, useEffect } from "react";
import ChatBubble from '@/components/ChatBubble'
import { useState, useRef, useEffect } from 'react'
import Header from './Header'

interface ChatSectionProps {
chat?: Array<{ sent: boolean; message: string }>;
chat?: Array<{ sent: boolean; message: string }>
}

const ChatSection = ({ chat }: ChatSectionProps) => {
const messagesEndRef = useRef<HTMLDivElement>(null);
const messagesEndRef = useRef<HTMLDivElement>(null)
const [firstResponseGenerated, setFirstResponseGenerated] = useState(false)

const scrollToBottom = () => {
if (messagesEndRef.current) {
messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
messagesEndRef.current.scrollIntoView({ behavior: 'smooth' })
}
};
}

useEffect(scrollToBottom, [chat]);
useEffect(() => {
if (chat && chat.length > 0 && !firstResponseGenerated) {
scrollToBottom()
setFirstResponseGenerated(true)
}
}, [chat, firstResponseGenerated])

return (
<section className="overflow-auto scrollbar-none pr-2">
{firstResponseGenerated ? (
<h1 className="text-4xl md:text-3xl flex items-center justify-center text-center bg-clip-text h-10 md:h-16 text-transparent bg-gradient-to-r from-yellow-500 to-orange-500 font-extrabold mb-1">
BhagavadGita.ai
</h1>
) : (
<Header />
)}
<ChatBubble
message="Radhey Radhey, I am Gita AI, a repository of knowledge and wisdom. Allow me to assist you by answering any inquiries you may have. Ask me anything."
sent={false}
Expand All @@ -29,7 +43,7 @@ const ChatSection = ({ chat }: ChatSectionProps) => {
</div>
))}
</section>
);
};
)
}

export default ChatSection;
export default ChatSection
49 changes: 8 additions & 41 deletions components/Header.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
import React from "react";
import Image from "next/image";
import Tooltip from "./Tooltip";
import React from 'react'

const Header = () => {
return (
Expand All @@ -9,53 +7,22 @@ const Header = () => {
BhagavadGita.ai
</h1>
<p className="text-md leading-normal text-center text-gray-500">
Unlock Your Potential with GitaGPT - The AI-Powered Spiritual Companion.
{/* </p> */}
{/* <p className="text-sm leading-normal text-center"> */}
Unlock the Wisdom of Krishna with{' '}
<a
className="text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-amber-600 ml-1"
target="_blank"
rel="noreferrer"
href="https://writesonic.com/chat?utm_source=bhagavadgita.ai&utm_medium=banner&utm_campaign=bhagavadgita.ai"
>
Powered by ChatSonic.
ChatSonic
</a>
</p>
<div className="flex items-center justify-start px-4 py-2 bg-gray-200 rounded-full mx-auto w-fit mt-3">
<div className="flex items-start justify-start px-4 py-2 bg-gray-200 rounded-full mx-auto w-fit mt-3">
<p className="text-xs font-medium tracking-wide leading-none text-center text-black">
300,000+ devotees guided so far
200,000+ devotees guided so far
</p>
<div className="ml-2">
<Tooltip message={"Follow us on Twitter!"}>
<a
href="https://twitter.com/ShriKrishna"
target="_blank"
rel="noreferrer"
>
<Image
src="/icons8-twitter-96.png"
alt="Twitter"
width={20}
height={20}
/>
</a>
</Tooltip>
</div>
<div className="ml-1">
<Tooltip message={"Gita AI is open source. Come contribute."}>
<a href="https://github.com/gita" target="_blank" rel="noreferrer">
<Image
src="/icons8-github-90.png"
alt="Github"
width={20}
height={20}
/>
</a>
</Tooltip>
</div>
</div>
</header>
);
};
)
}

export default Header;
export default Header
40 changes: 20 additions & 20 deletions pages/index.tsx
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
import ChatSection from "@/components/ChatSection";
import Header from "@/components/Header";
import Input from "@/components/Input";
import Navbar from "@/components/Navbar";
import { useEffect, useState } from "react";
import Head from "next/head";
import { useCookies } from "react-cookie";
import { useRouter } from "next/router";
import ChatSection from '@/components/ChatSection'
import Header from '@/components/Header'
import Input from '@/components/Input'
import Navbar from '@/components/Navbar'
import { useEffect, useState } from 'react'
import Head from 'next/head'
import { useCookies } from 'react-cookie'
import { useRouter } from 'next/router'

export default function Home() {
const [showSuggestions, setShowSuggestions] = useState<boolean>(true);
const [input, setInput] = useState<string>("");
const [chat, setChat] = useState<Array<{ sent: boolean; message: string }>>();
const [cookies, setCookie, removeCookie] = useCookies(["Token"]);
const router = useRouter();
const [showSuggestions, setShowSuggestions] = useState<boolean>(true)
const [input, setInput] = useState<string>('')
const [chat, setChat] = useState<Array<{ sent: boolean; message: string }>>()
const [cookies, setCookie, removeCookie] = useCookies(['Token'])
const router = useRouter()

useEffect(() => {
const pathName = router.asPath;
const access_token = pathName.match(/\#(?:access_token)\=([\S\s]*?)\&/);
const pathName = router.asPath
const access_token = pathName.match(/\#(?:access_token)\=([\S\s]*?)\&/)

if (access_token && access_token.length > 1) {
setCookie("Token", access_token[1]);
setCookie('Token', access_token[1])
}
}, [router.query]);
}, [router.query])

function addJsonLd() {
return {
Expand Down Expand Up @@ -51,7 +51,7 @@ export default function Home() {
},
}
`,
};
}
}

return (
Expand Down Expand Up @@ -118,7 +118,7 @@ export default function Home() {
</Head>
<Navbar></Navbar>
<main className="max-w-4xl pt-5 pb-2 mx-auto h-[90vh] grid grid-rows-layout gap-2 px-4">
<Header />
{/* <Header /> */}
<ChatSection chat={chat} />

<Input
Expand All @@ -131,5 +131,5 @@ export default function Home() {
/>
</main>
</>
);
)
}