mirror of
https://github.com/arc53/DocsGPT.git
synced 2025-11-29 08:33:20 +00:00
add dark mode - conversation, bubble, UI fixes
This commit is contained in:
ManishMadan2882
@@ -17,12 +17,13 @@ export default function App() {
|
||||
useEffect(()=>{
|
||||
if (selectedTheme === 'Dark') {
|
||||
document.documentElement.classList.add('dark');
|
||||
document.body.classList.add('dark:bg-raisin-black');
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark');
|
||||
}
|
||||
},[])
|
||||
return (
|
||||
<div className="min-h-full min-w-full dark:bg-dark-charcoal">
|
||||
<div className="min-h-full min-w-full dark:bg-raisin-black">
|
||||
<Navigation navOpen={navOpen} setNavOpen={setNavOpen} />
|
||||
<div
|
||||
className={`transition-all duration-200 ${
|
||||
|
||||
@@ -4,7 +4,8 @@ import DocsGPT3 from './assets/cute_docsgpt3.svg';
|
||||
export default function Hero({ className = '' }: { className?: string }) {
|
||||
// const isMobile = window.innerWidth <= 768;
|
||||
const { isMobile } = useMediaQuery();
|
||||
const isDarkTheme = localStorage.getItem('selectedTheme') === 'Dark';
|
||||
const isDarkTheme = document.documentElement.classList.contains('dark');
|
||||
console.log(isDarkTheme)
|
||||
return (
|
||||
<div className={`mt-14 ${isMobile ? 'mb-2' : 'mb-12'}flex flex-col text-black-1000 dark:text-bright-gray`}>
|
||||
<div className=" mb-2 flex items-center justify-center sm:mb-10">
|
||||
|
||||
@@ -3,14 +3,21 @@ import { useDispatch, useSelector } from 'react-redux';
|
||||
import { NavLink, useNavigate } from 'react-router-dom';
|
||||
import DocsGPT3 from './assets/cute_docsgpt3.svg';
|
||||
import Documentation from './assets/documentation.svg';
|
||||
import DocumentationDark from './assets/documentation-dark.svg';
|
||||
import Discord from './assets/discord.svg';
|
||||
import DiscordDark from './assets/discord-dark.svg';
|
||||
|
||||
import Arrow2 from './assets/dropdown-arrow.svg';
|
||||
import Expand from './assets/expand.svg';
|
||||
import Trash from './assets/trash.svg';
|
||||
import Github from './assets/github.svg';
|
||||
import GithubDark from './assets/github-dark.svg';
|
||||
import Hamburger from './assets/hamburger.svg';
|
||||
import HamburgerDark from './assets/hamburger-dark.svg';
|
||||
import Info from './assets/info.svg';
|
||||
import InfoDark from './assets/info-dark.svg';
|
||||
import SettingGear from './assets/settingGear.svg';
|
||||
import SettingGearDark from './assets/settingGear-dark.svg';
|
||||
import Add from './assets/add.svg';
|
||||
import UploadIcon from './assets/upload.svg';
|
||||
import { ActiveState } from './models/misc';
|
||||
@@ -47,7 +54,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
|
||||
const conversations = useSelector(selectConversations);
|
||||
const conversationId = useSelector(selectConversationId);
|
||||
const { isMobile } = useMediaQuery();
|
||||
|
||||
const isDarkTheme = document.documentElement.classList.contains('dark');
|
||||
const [isDocsListOpen, setIsDocsListOpen] = useState(false);
|
||||
|
||||
const isApiKeySet = useSelector(selectApiKeyStatus);
|
||||
@@ -182,17 +189,15 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
|
||||
<img
|
||||
src={Expand}
|
||||
alt="menu toggle"
|
||||
className={`${
|
||||
!navOpen ? 'rotate-180' : 'rotate-0'
|
||||
} m-auto transition-all duration-200`}
|
||||
className={`${!navOpen ? 'rotate-180' : 'rotate-0'
|
||||
} m-auto transition-all duration-200`}
|
||||
/>
|
||||
</button>
|
||||
)}
|
||||
<div
|
||||
ref={navRef}
|
||||
className={`${
|
||||
!navOpen && '-ml-96 md:-ml-[18rem]'
|
||||
} duration-20 fixed top-0 z-20 flex h-full w-72 flex-col border-r-2 bg-white dark:bg-chinese-black transition-all dark:text-white`}
|
||||
className={`${!navOpen && '-ml-96 md:-ml-[18rem]'
|
||||
} duration-20 fixed top-0 z-20 flex h-full w-72 flex-col border-r-[1px] border-b-0 dark:border-r-purple-taupe bg-white dark:bg-chinese-black transition-all dark:text-white`}
|
||||
>
|
||||
<div
|
||||
className={'visible mt-2 flex h-[6vh] w-full justify-between md:h-12'}
|
||||
@@ -210,9 +215,8 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
|
||||
<img
|
||||
src={Expand}
|
||||
alt="menu toggle"
|
||||
className={`${
|
||||
!navOpen ? 'rotate-180' : 'rotate-0'
|
||||
} m-auto transition-all duration-200`}
|
||||
className={`${!navOpen ? 'rotate-180' : 'rotate-0'
|
||||
} m-auto transition-all duration-200`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
@@ -227,9 +231,8 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
|
||||
);
|
||||
}}
|
||||
className={({ isActive }) =>
|
||||
`${
|
||||
isActive ? 'bg-gray-3000 dark:bg-black' : ''
|
||||
} group sticky mx-4 mt-4 flex cursor-pointer gap-2.5 rounded-3xl border border-silver p-3 hover:border-rainy-gray dark:border-purple-taupe dark:text-white hover:dark:bg-black hover:bg-gray-3000`
|
||||
`${isActive ? 'bg-gray-3000 dark:bg-transparent' : ''
|
||||
} group sticky mx-4 mt-4 flex cursor-pointer gap-2.5 rounded-3xl border border-silver p-3 hover:border-rainy-gray dark:border-purple-taupe dark:text-white dark:hover:bg-transparent hover:bg-gray-3000`
|
||||
}
|
||||
>
|
||||
<img
|
||||
@@ -263,7 +266,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
|
||||
</div>
|
||||
|
||||
<div className="flex h-auto flex-col justify-end text-eerie-black dark:text-white">
|
||||
<div className="flex flex-col-reverse border-b-2">
|
||||
<div className="flex flex-col-reverse border-b-[1px] dark:border-b-purple-taupe">
|
||||
<div className="relative my-4 flex gap-2 px-2">
|
||||
<div
|
||||
className="flex h-12 w-5/6 cursor-pointer justify-between rounded-3xl border-2 bg-white dark:bg-chinese-black"
|
||||
@@ -277,9 +280,8 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
|
||||
<img
|
||||
src={Arrow2}
|
||||
alt="arrow"
|
||||
className={`${
|
||||
!isDocsListOpen ? 'rotate-0' : 'rotate-180'
|
||||
} ml-auto mr-3 w-3 transition-all`}
|
||||
className={`${!isDocsListOpen ? 'rotate-0' : 'rotate-180'
|
||||
} ml-auto mr-3 w-3 transition-all`}
|
||||
/>
|
||||
</div>
|
||||
<img
|
||||
@@ -299,7 +301,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
|
||||
dispatch(setSelectedDocs(doc));
|
||||
setIsDocsListOpen(false);
|
||||
}}
|
||||
className="flex h-10 w-full cursor-pointer items-center justify-between border-x-2 border-b-2 dark:border-purple-taupe hover:bg-gray-100 dark:hover:bg-black"
|
||||
className="flex h-10 w-full cursor-pointer items-center justify-between border-x-2 border-b-[1px] dark:border-purple-taupe hover:bg-gray-100 dark:hover:bg-purple-taupe"
|
||||
>
|
||||
<p className="ml-5 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3">
|
||||
{doc.name} {doc.version}
|
||||
@@ -321,7 +323,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
|
||||
}
|
||||
})
|
||||
) : (
|
||||
<div className="h-10 w-full cursor-pointer border-x-2 border-b-2 hover:bg-gray-100">
|
||||
<div className="h-10 w-full cursor-pointer border-b-[1px] dark:border-b-purple-taupe hover:bg-gray-100">
|
||||
<p className="ml-5 py-3">No default documentation.</p>
|
||||
</div>
|
||||
)}
|
||||
@@ -330,17 +332,16 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
|
||||
</div>
|
||||
<p className="ml-6 mt-3 text-sm font-semibold">Source Docs</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2 border-b-2 py-2">
|
||||
<div className="flex flex-col gap-2 border-b-[1px] dark:border-b-purple-taupe py-2">
|
||||
<NavLink
|
||||
to="/settings"
|
||||
className={({ isActive }) =>
|
||||
`my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-black ${
|
||||
isActive ? 'bg-gray-3000 dark:bg-transparent' : ''
|
||||
`my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-purple-taupe ${isActive ? 'bg-gray-3000 dark:bg-transparent' : ''
|
||||
}`
|
||||
}
|
||||
>
|
||||
<img
|
||||
src={SettingGear}
|
||||
src={isDarkTheme ? SettingGearDark : SettingGear}
|
||||
alt="settings"
|
||||
className="ml-2 w-5 opacity-60"
|
||||
/>
|
||||
@@ -348,16 +349,15 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
|
||||
</NavLink>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2 border-b-2 py-2">
|
||||
<div className="flex flex-col gap-2 border-b-[1.5px] dark:border-b-purple-taupe py-2">
|
||||
<NavLink
|
||||
to="/about"
|
||||
className={({ isActive }) =>
|
||||
`my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-black ${
|
||||
isActive ? 'bg-gray-3000' : ''
|
||||
`my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-purple-taupe ${isActive ? 'bg-gray-3000 dark:bg-purple-taupe' : ''
|
||||
}`
|
||||
}
|
||||
>
|
||||
<img src={Info} alt="info" className="ml-2 w-5" />
|
||||
<img src={isDarkTheme ? InfoDark : Info} alt="info" className="ml-2 w-5" />
|
||||
<p className="my-auto text-sm">About</p>
|
||||
</NavLink>
|
||||
|
||||
@@ -365,10 +365,10 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
|
||||
href="https://docs.docsgpt.co.uk/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-black"
|
||||
className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-purple-taupe"
|
||||
>
|
||||
<img
|
||||
src={Documentation}
|
||||
src={isDarkTheme ? DocumentationDark : Documentation}
|
||||
alt="documentation"
|
||||
className="ml-2 w-5"
|
||||
/>
|
||||
@@ -378,9 +378,9 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
|
||||
href="https://discord.gg/WHJdfbQDR4"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-black"
|
||||
className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-purple-taupe"
|
||||
>
|
||||
<img src={Discord} alt="discord-link" className="ml-2 w-5" />
|
||||
<img src={isDarkTheme ? DiscordDark : Discord} alt="discord-link" className="ml-2 w-5" />
|
||||
<p className="my-auto text-sm">
|
||||
Visit our Discord
|
||||
</p>
|
||||
@@ -390,9 +390,9 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
|
||||
href="https://github.com/arc53/DocsGPT"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-black"
|
||||
className="mt-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-purple-taupe"
|
||||
>
|
||||
<img src={Github} alt="github-link" className="ml-2 w-5" />
|
||||
<img src={isDarkTheme ? GithubDark : Github} alt="github-link" className="ml-2 w-5" />
|
||||
<p className="my-auto text-sm">
|
||||
Visit our Github
|
||||
</p>
|
||||
@@ -400,12 +400,12 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="fixed z-10 h-16 w-full border-b-2 bg-gray-50 md:hidden">
|
||||
<div className="fixed z-10 h-16 w-full border-b-2 dark:border-b-purple-taupe bg-gray-50 dark:bg-chinese-black md:hidden">
|
||||
<button
|
||||
className="mt-5 ml-6 h-6 w-6 md:hidden"
|
||||
onClick={() => setNavOpen(true)}
|
||||
>
|
||||
<img src={Hamburger} alt="menu toggle" className="w-7" />
|
||||
<img src={isDarkTheme ? HamburgerDark :Hamburger} alt="menu toggle" className="w-7" />
|
||||
</button>
|
||||
</div>
|
||||
<SelectDocsModal
|
||||
|
||||
@@ -193,6 +193,7 @@ const General: React.FC = () => {
|
||||
useEffect(() => {
|
||||
if (selectedTheme === 'Dark') {
|
||||
document.documentElement.classList.add('dark');
|
||||
document.documentElement.classList.add('dark:bg-raisin-black');
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark');
|
||||
}
|
||||
|
||||
3
frontend/src/assets/discord-dark.svg
Normal file
3
frontend/src/assets/discord-dark.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="18" viewBox="0 0 22 18" fill="none">
|
||||
<path d="M18.7359 2.29769C17.4059 1.66546 15.9659 1.20658 14.4659 0.941453C14.4528 0.941024 14.4397 0.943541 14.4276 0.948827C14.4155 0.954112 14.4047 0.962038 14.3959 0.972045C14.2159 1.30856 14.0059 1.74704 13.8659 2.08355C12.2749 1.83882 10.6569 1.83882 9.06594 2.08355C8.92594 1.73684 8.71594 1.30856 8.52594 0.972045C8.51594 0.951651 8.48594 0.941453 8.45594 0.941453C6.95594 1.20658 5.52594 1.66546 4.18594 2.29769C4.17594 2.29769 4.16594 2.30789 4.15594 2.31809C1.43594 6.46839 0.685937 10.5065 1.05594 14.5039C1.05594 14.5243 1.06594 14.5447 1.08594 14.5548C2.88594 15.9009 4.61594 16.7167 6.32594 17.2571C6.35594 17.2673 6.38594 17.2571 6.39594 17.2367C6.79594 16.6759 7.15594 16.0844 7.46594 15.4624C7.48594 15.4216 7.46594 15.3808 7.42594 15.3706C6.85594 15.1463 6.31594 14.8812 5.78594 14.5752C5.74594 14.5549 5.74594 14.4937 5.77594 14.4631C5.88594 14.3815 5.99594 14.2897 6.10594 14.2081C6.12594 14.1877 6.15594 14.1877 6.17594 14.1979C9.61594 15.7989 13.3259 15.7989 16.7259 14.1979C16.7459 14.1877 16.7759 14.1877 16.7959 14.2081C16.9059 14.2999 17.0159 14.3815 17.1259 14.4733C17.1659 14.5039 17.1659 14.565 17.1159 14.5854C16.5959 14.9016 16.0459 15.1565 15.4759 15.3808C15.4359 15.391 15.4259 15.442 15.4359 15.4726C15.7559 16.0946 16.1159 16.6861 16.5059 17.2469C16.5359 17.2571 16.5659 17.2673 16.5959 17.2571C18.3159 16.7167 20.0459 15.9009 21.8459 14.5548C21.8659 14.5447 21.8759 14.5243 21.8759 14.5039C22.3159 9.88449 21.1459 5.87695 18.7759 2.31809C18.7659 2.30789 18.7559 2.29769 18.7359 2.29769ZM7.98594 12.0667C6.95594 12.0667 6.09594 11.098 6.09594 9.90488C6.09594 8.7118 6.93594 7.74305 7.98594 7.74305C9.04594 7.74305 9.88594 8.72199 9.87594 9.90488C9.87594 11.098 9.03594 12.0667 7.98594 12.0667ZM14.9559 12.0667C13.9259 12.0667 13.0659 11.098 13.0659 9.90488C13.0659 8.7118 13.9059 7.74305 14.9559 7.74305C16.0159 7.74305 16.8559 8.72199 16.8459 9.90488C16.8459 11.098 16.0159 12.0667 14.9559 12.0667Z" fill="#949494"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
@@ -1 +1 @@
|
||||
<svg fill="none" width="20" height="20" viewBox="0 0 22 20" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path d="M18.942 5.556a16.299 16.299 0 0 0-4.126-1.297c-.178.321-.385.754-.529 1.097a15.175 15.175 0 0 0-4.573 0 11.583 11.583 0 0 0-.535-1.097 16.274 16.274 0 0 0-4.129 1.3c-2.611 3.946-3.319 7.794-2.965 11.587a16.494 16.494 0 0 0 5.061 2.593 12.65 12.65 0 0 0 1.084-1.785 10.689 10.689 0 0 1-1.707-.831c.143-.106.283-.217.418-.331 3.291 1.539 6.866 1.539 10.118 0 .137.114.277.225.418.331-.541.326-1.114.606-1.71.832a12.52 12.52 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595c.415-4.396-.709-8.209-2.973-11.589zM8.678 14.813c-.988 0-1.798-.922-1.798-2.045s.793-2.047 1.798-2.047 1.815.922 1.798 2.047c.001 1.123-.793 2.045-1.798 2.045zm6.644 0c-.988 0-1.798-.922-1.798-2.045s.793-2.047 1.798-2.047 1.815.922 1.798 2.047c0 1.123-.793 2.045-1.798 2.045z" fill="gray" fill-opacity="0.85"/></svg>
|
||||
<svg fill="none" width="20" height="20" viewBox="0 0 22 20" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path d="M18.942 5.556a16.299 16.299 0 0 0-4.126-1.297c-.178.321-.385.754-.529 1.097a15.175 15.175 0 0 0-4.573 0 11.583 11.583 0 0 0-.535-1.097 16.274 16.274 0 0 0-4.129 1.3c-2.611 3.946-3.319 7.794-2.965 11.587a16.494 16.494 0 0 0 5.061 2.593 12.65 12.65 0 0 0 1.084-1.785 10.689 10.689 0 0 1-1.707-.831c.143-.106.283-.217.418-.331 3.291 1.539 6.866 1.539 10.118 0 .137.114.277.225.418.331-.541.326-1.114.606-1.71.832a12.52 12.52 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595c.415-4.396-.709-8.209-2.973-11.589zM8.678 14.813c-.988 0-1.798-.922-1.798-2.045s.793-2.047 1.798-2.047 1.815.922 1.798 2.047c.001 1.123-.793 2.045-1.798 2.045zm6.644 0c-.988 0-1.798-.922-1.798-2.045s.793-2.047 1.798-2.047 1.815.922 1.798 2.047c0 1.123-.793 2.045-1.798 2.045z" fill="black" fill-opacity="0.54"/></svg>
|
||||
|
Before Width: | Height: | Size: 911 B After Width: | Height: | Size: 912 B |
3
frontend/src/assets/documentation-dark.svg
Normal file
3
frontend/src/assets/documentation-dark.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0,0,256,256">
|
||||
<g transform="translate(-19.2,-19.2) scale(1.15,1.15)"><g fill="#949494" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(10.66667,10.66667)"><path d="M13.172,2h-7.172c-1.1,0 -2,0.9 -2,2v16c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2v-11.172c0,-0.53 -0.211,-1.039 -0.586,-1.414l-4.828,-4.828c-0.375,-0.375 -0.884,-0.586 -1.414,-0.586zM15,18h-6c-0.552,0 -1,-0.448 -1,-1v0c0,-0.552 0.448,-1 1,-1h6c0.552,0 1,0.448 1,1v0c0,0.552 -0.448,1 -1,1zM15,14h-6c-0.552,0 -1,-0.448 -1,-1v0c0,-0.552 0.448,-1 1,-1h6c0.552,0 1,0.448 1,1v0c0,0.552 -0.448,1 -1,1zM13,9v-5.5l5.5,5.5z"></path></g></g></g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 933 B |
@@ -1,3 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0,0,256,256">
|
||||
<g transform="translate(-19.2,-19.2) scale(1.15,1.15)"><g fill="gray" fill-opacity="0.85" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(10.66667,10.66667)"><path d="M13.172,2h-7.172c-1.1,0 -2,0.9 -2,2v16c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2v-11.172c0,-0.53 -0.211,-1.039 -0.586,-1.414l-4.828,-4.828c-0.375,-0.375 -0.884,-0.586 -1.414,-0.586zM15,18h-6c-0.552,0 -1,-0.448 -1,-1v0c0,-0.552 0.448,-1 1,-1h6c0.552,0 1,0.448 1,1v0c0,0.552 -0.448,1 -1,1zM15,14h-6c-0.552,0 -1,-0.448 -1,-1v0c0,-0.552 0.448,-1 1,-1h6c0.552,0 1,0.448 1,1v0c0,0.552 -0.448,1 -1,1zM13,9v-5.5l5.5,5.5z"></path></g></g></g>
|
||||
<g transform="translate(-19.2,-19.2) scale(1.15,1.15)"><g fill="black" fill-opacity="0.54" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(10.66667,10.66667)"><path d="M13.172,2h-7.172c-1.1,0 -2,0.9 -2,2v16c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2v-11.172c0,-0.53 -0.211,-1.039 -0.586,-1.414l-4.828,-4.828c-0.375,-0.375 -0.884,-0.586 -1.414,-0.586zM15,18h-6c-0.552,0 -1,-0.448 -1,-1v0c0,-0.552 0.448,-1 1,-1h6c0.552,0 1,0.448 1,1v0c0,0.552 -0.448,1 -1,1zM15,14h-6c-0.552,0 -1,-0.448 -1,-1v0c0,-0.552 0.448,-1 1,-1h6c0.552,0 1,0.448 1,1v0c0,0.552 -0.448,1 -1,1zM13,9v-5.5l5.5,5.5z"></path></g></g></g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 950 B After Width: | Height: | Size: 951 B |
3
frontend/src/assets/github-dark.svg
Normal file
3
frontend/src/assets/github-dark.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="22" viewBox="0 0 21 22" fill="none">
|
||||
<path d="M19.8155 2.09139C19.0825 1.34392 18.2005 0.970703 17.1685 0.970703H4.68155C3.64955 0.970703 2.76755 1.34392 2.03455 2.09139C1.30155 2.83885 0.935547 3.73825 0.935547 4.79061V17.524C0.935547 18.5763 1.30155 19.4757 2.03455 20.2232C2.76755 20.9707 3.64955 21.3439 4.68155 21.3439H7.59555C7.78555 21.3439 7.92855 21.3368 8.02455 21.3235C8.13624 21.3007 8.23705 21.2399 8.31055 21.1512C8.40555 21.0492 8.45355 20.9013 8.45355 20.7076L8.44655 19.8051C8.44255 19.23 8.44055 18.7752 8.44055 18.4387L8.14055 18.4917C7.95055 18.5274 7.71055 18.5427 7.41955 18.5386C7.11624 18.5329 6.81389 18.5019 6.51555 18.4458C6.19795 18.386 5.89897 18.2497 5.64355 18.0481C5.37604 17.8418 5.17652 17.5572 5.07155 17.2323L4.94155 16.9264C4.83198 16.6851 4.69432 16.4581 4.53155 16.2503C4.34555 16.0025 4.15655 15.8353 3.96555 15.7466L3.87555 15.6803C3.81279 15.6345 3.75571 15.5811 3.70555 15.5212C3.65764 15.4657 3.6182 15.4031 3.58855 15.3356C3.56255 15.2734 3.58455 15.2224 3.65355 15.1827C3.72355 15.1419 3.84855 15.1225 4.03155 15.1225L4.29155 15.1633C4.46455 15.198 4.67955 15.304 4.93455 15.4804C5.19261 15.6598 5.40818 15.8957 5.56555 16.1708C5.76555 16.5328 6.00555 16.8091 6.28755 16.9998C6.56955 17.1895 6.85355 17.2854 7.13955 17.2854C7.42555 17.2854 7.67255 17.2629 7.88155 17.2191C8.08366 17.1765 8.28005 17.1094 8.46655 17.0192C8.54455 16.4278 8.75655 15.9709 9.10355 15.6528C8.65392 15.6078 8.2083 15.5281 7.77055 15.4142C7.34334 15.2945 6.93249 15.1208 6.54755 14.8972C6.14479 14.6736 5.78905 14.3714 5.50055 14.008C5.22355 13.6541 4.99555 13.1901 4.81755 12.616C4.64055 12.0409 4.55155 11.377 4.55155 10.6255C4.55155 9.55581 4.89355 8.64519 5.57855 7.89263C5.25855 7.08908 5.28855 6.18662 5.66955 5.18831C5.92155 5.10775 6.29455 5.16791 6.78855 5.36676C7.28255 5.56561 7.64455 5.7359 7.87455 5.87662C8.10455 6.01939 8.28855 6.13869 8.42755 6.23557C9.24052 6.00486 10.0807 5.88889 10.9245 5.8909C11.7835 5.8909 12.6155 6.00613 13.4225 6.23557L13.9165 5.91741C14.2965 5.68476 14.6973 5.48946 15.1135 5.33413C15.5735 5.15669 15.9235 5.10877 16.1675 5.18831C16.5575 6.18764 16.5915 7.08908 16.2705 7.89365C16.9555 8.64519 17.2985 9.55581 17.2985 10.6265C17.2985 11.3781 17.2095 12.044 17.0315 12.6221C16.8545 13.2013 16.6245 13.6653 16.3425 14.0151C16.049 14.3739 15.6917 14.6731 15.2895 14.8972C14.8695 15.1358 14.4615 15.3081 14.0665 15.4142C13.6288 15.5284 13.1832 15.6085 12.7335 15.6538C13.1835 16.0515 13.4095 16.6786 13.4095 17.5362V20.7076C13.4095 20.8575 13.4305 20.9788 13.4745 21.0716C13.4948 21.1163 13.5236 21.1564 13.5593 21.1895C13.5951 21.2226 13.637 21.2481 13.6825 21.2643C13.7785 21.299 13.8625 21.3215 13.9365 21.3296C14.0105 21.3398 14.1165 21.3429 14.2545 21.3429H17.1685C18.2005 21.3429 19.0825 20.9696 19.8155 20.2222C20.5475 19.4757 20.9145 18.5753 20.9145 17.523V4.79061C20.9145 3.73825 20.5485 2.83885 19.8155 2.09139Z" fill="#949494"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
@@ -1,5 +1,5 @@
|
||||
<svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<title>github</title>
|
||||
<rect width="24" height="24" fill="none"/>
|
||||
<path d="M12,2A10,10,0,0,0,8.84,21.5c.5.08.66-.23.66-.5V19.31C6.73,19.91,6.14,18,6.14,18A2.69,2.69,0,0,0,5,16.5c-.91-.62.07-.6.07-.6a2.1,2.1,0,0,1,1.53,1,2.15,2.15,0,0,0,2.91.83,2.16,2.16,0,0,1,.63-1.34C8,16.17,5.62,15.31,5.62,11.5a3.87,3.87,0,0,1,1-2.71,3.58,3.58,0,0,1,.1-2.64s.84-.27,2.75,1a9.63,9.63,0,0,1,5,0c1.91-1.29,2.75-1,2.75-1a3.58,3.58,0,0,1,.1,2.64,3.87,3.87,0,0,1,1,2.71c0,3.82-2.34,4.66-4.57,4.91a2.39,2.39,0,0,1,.69,1.85V21c0,.27.16.59.67.5A10,10,0,0,0,12,2Z" fill="gray" fill-opacity="0.85"/>
|
||||
<path d="M12,2A10,10,0,0,0,8.84,21.5c.5.08.66-.23.66-.5V19.31C6.73,19.91,6.14,18,6.14,18A2.69,2.69,0,0,0,5,16.5c-.91-.62.07-.6.07-.6a2.1,2.1,0,0,1,1.53,1,2.15,2.15,0,0,0,2.91.83,2.16,2.16,0,0,1,.63-1.34C8,16.17,5.62,15.31,5.62,11.5a3.87,3.87,0,0,1,1-2.71,3.58,3.58,0,0,1,.1-2.64s.84-.27,2.75,1a9.63,9.63,0,0,1,5,0c1.91-1.29,2.75-1,2.75-1a3.58,3.58,0,0,1,.1,2.64,3.87,3.87,0,0,1,1,2.71c0,3.82-2.34,4.66-4.57,4.91a2.39,2.39,0,0,1,.69,1.85V21c0,.27.16.59.67.5A10,10,0,0,0,12,2Z" fill="black" fill-opacity="0.54"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 678 B After Width: | Height: | Size: 679 B |
3
frontend/src/assets/hamburger-dark.svg
Normal file
3
frontend/src/assets/hamburger-dark.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="600" height="450" viewBox="0 0 600 450" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M25 25H575M25 225H575M25 425H575" stroke="#949494" stroke-opacity="0.54" stroke-width="50" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 256 B |
3
frontend/src/assets/info-dark.svg
Normal file
3
frontend/src/assets/info-dark.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21" fill="none">
|
||||
<path d="M10.9355 0.442139C5.41555 0.442139 0.935547 5.01053 0.935547 10.6394C0.935547 16.2683 5.41555 20.8367 10.9355 20.8367C16.4555 20.8367 20.9355 16.2683 20.9355 10.6394C20.9355 5.01053 16.4555 0.442139 10.9355 0.442139ZM11.9355 15.7381H9.93555V9.61971H11.9355V15.7381ZM11.9355 7.58025H9.93555V5.54079H11.9355V7.58025Z" fill="#949494"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 446 B |
@@ -1,3 +1,3 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM11 15H9V9H11V15ZM11 7H9V5H11V7Z" fill="gray" fill-opacity="0.85"/>
|
||||
<path d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM11 15H9V9H11V15ZM11 7H9V5H11V7Z" fill="black" fill-opacity="0.54"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 272 B After Width: | Height: | Size: 273 B |
3
frontend/src/assets/message-dark.svg
Normal file
3
frontend/src/assets/message-dark.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M20 4H4C2.9 4 2 4.9 2 6V24L6 20H20C21.1 20 22 19.1 22 18V6C22 4.9 21.1 4 20 4ZM20 18H6L4 20V6H20V18Z" fill="#949494"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 232 B |
3
frontend/src/assets/settingGear-dark.svg
Normal file
3
frontend/src/assets/settingGear-dark.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="22" viewBox="0 0 21 22" fill="none">
|
||||
<path d="M10.5024 14.1916C9.50037 14.1916 8.5394 13.8044 7.83087 13.1152C7.12234 12.426 6.72429 11.4913 6.72429 10.5166C6.72429 9.54193 7.12234 8.60718 7.83087 7.91799C8.5394 7.22879 9.50037 6.8416 10.5024 6.8416C11.5044 6.8416 12.4654 7.22879 13.1739 7.91799C13.8824 8.60718 14.2805 9.54193 14.2805 10.5166C14.2805 11.4913 13.8824 12.426 13.1739 13.1152C12.4654 13.8044 11.5044 14.1916 10.5024 14.1916ZM18.5227 11.5351C18.5659 11.1991 18.5983 10.8631 18.5983 10.5166C18.5983 10.1701 18.5659 9.8236 18.5227 9.4666L20.8004 7.7551C21.0055 7.5976 21.0595 7.3141 20.9299 7.0831L18.771 3.4501C18.6415 3.2191 18.35 3.1246 18.1125 3.2191L15.4247 4.2691C14.8634 3.8596 14.2805 3.5026 13.6004 3.2401L13.201 0.457604C13.1791 0.333931 13.1129 0.221802 13.0141 0.141083C12.9153 0.0603633 12.7903 0.0162658 12.6613 0.0166035H8.34347C8.07361 0.0166035 7.84692 0.205604 7.80374 0.457604L7.40435 3.2401C6.72429 3.5026 6.14138 3.8596 5.58007 4.2691L2.89222 3.2191C2.65474 3.1246 2.36329 3.2191 2.23375 3.4501L0.0748404 7.0831C-0.0654889 7.3141 -0.000721403 7.5976 0.204375 7.7551L2.48203 9.4666C2.43885 9.8236 2.40647 10.1701 2.40647 10.5166C2.40647 10.8631 2.43885 11.1991 2.48203 11.5351L0.204375 13.2781C-0.000721403 13.4356 -0.0654889 13.7191 0.0748404 13.9501L2.23375 17.5831C2.36329 17.8141 2.65474 17.8981 2.89222 17.8141L5.58007 16.7536C6.14138 17.1736 6.72429 17.5306 7.40435 17.7931L7.80374 20.5756C7.84692 20.8276 8.07361 21.0166 8.34347 21.0166H12.6613C12.9312 21.0166 13.1578 20.8276 13.201 20.5756L13.6004 17.7931C14.2805 17.5201 14.8634 17.1736 15.4247 16.7536L18.1125 17.8141C18.35 17.8981 18.6415 17.8141 18.771 17.5831L20.9299 13.9501C21.0595 13.7191 21.0055 13.4356 20.8004 13.2781L18.5227 11.5351Z" fill="#949494"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
@@ -1,3 +1,3 @@
|
||||
<svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.5024 14.6918C9.50037 14.6918 8.5394 14.3047 7.83087 13.6155C7.12234 12.9263 6.72429 11.9915 6.72429 11.0168C6.72429 10.0422 7.12234 9.10743 7.83087 8.41823C8.5394 7.72903 9.50037 7.34185 10.5024 7.34185C11.5044 7.34185 12.4654 7.72903 13.1739 8.41823C13.8824 9.10743 14.2805 10.0422 14.2805 11.0168C14.2805 11.9915 13.8824 12.9263 13.1739 13.6155C12.4654 14.3047 11.5044 14.6918 10.5024 14.6918ZM18.5227 12.0353C18.5659 11.6993 18.5983 11.3633 18.5983 11.0168C18.5983 10.6703 18.5659 10.3238 18.5227 9.96685L20.8004 8.25535C21.0055 8.09785 21.0595 7.81435 20.9299 7.58335L18.771 3.95035C18.6415 3.71935 18.35 3.62485 18.1125 3.71935L15.4247 4.76935C14.8634 4.35985 14.2805 4.00285 13.6004 3.74035L13.201 0.957848C13.1791 0.834176 13.1129 0.722046 13.0141 0.641327C12.9153 0.560607 12.7903 0.51651 12.6613 0.516848H8.34347C8.07361 0.516848 7.84692 0.705848 7.80374 0.957848L7.40435 3.74035C6.72429 4.00285 6.14138 4.35985 5.58007 4.76935L2.89222 3.71935C2.65474 3.62485 2.36329 3.71935 2.23375 3.95035L0.0748404 7.58335C-0.0654889 7.81435 -0.000721403 8.09785 0.204375 8.25535L2.48203 9.96685C2.43885 10.3238 2.40647 10.6703 2.40647 11.0168C2.40647 11.3633 2.43885 11.6993 2.48203 12.0353L0.204375 13.7783C-0.000721403 13.9358 -0.0654889 14.2193 0.0748404 14.4503L2.23375 18.0833C2.36329 18.3143 2.65474 18.3983 2.89222 18.3143L5.58007 17.2538C6.14138 17.6738 6.72429 18.0308 7.40435 18.2933L7.80374 21.0758C7.84692 21.3278 8.07361 21.5168 8.34347 21.5168H12.6613C12.9312 21.5168 13.1578 21.3278 13.201 21.0758L13.6004 18.2933C14.2805 18.0203 14.8634 17.6738 15.4247 17.2538L18.1125 18.3143C18.35 18.3983 18.6415 18.3143 18.771 18.0833L20.9299 14.4503C21.0595 14.2193 21.0055 13.9358 20.8004 13.7783L18.5227 12.0353Z" fill="gray" fill-opacity="0.95"/>
|
||||
<path d="M10.5024 14.6918C9.50037 14.6918 8.5394 14.3047 7.83087 13.6155C7.12234 12.9263 6.72429 11.9915 6.72429 11.0168C6.72429 10.0422 7.12234 9.10743 7.83087 8.41823C8.5394 7.72903 9.50037 7.34185 10.5024 7.34185C11.5044 7.34185 12.4654 7.72903 13.1739 8.41823C13.8824 9.10743 14.2805 10.0422 14.2805 11.0168C14.2805 11.9915 13.8824 12.9263 13.1739 13.6155C12.4654 14.3047 11.5044 14.6918 10.5024 14.6918ZM18.5227 12.0353C18.5659 11.6993 18.5983 11.3633 18.5983 11.0168C18.5983 10.6703 18.5659 10.3238 18.5227 9.96685L20.8004 8.25535C21.0055 8.09785 21.0595 7.81435 20.9299 7.58335L18.771 3.95035C18.6415 3.71935 18.35 3.62485 18.1125 3.71935L15.4247 4.76935C14.8634 4.35985 14.2805 4.00285 13.6004 3.74035L13.201 0.957848C13.1791 0.834176 13.1129 0.722046 13.0141 0.641327C12.9153 0.560607 12.7903 0.51651 12.6613 0.516848H8.34347C8.07361 0.516848 7.84692 0.705848 7.80374 0.957848L7.40435 3.74035C6.72429 4.00285 6.14138 4.35985 5.58007 4.76935L2.89222 3.71935C2.65474 3.62485 2.36329 3.71935 2.23375 3.95035L0.0748404 7.58335C-0.0654889 7.81435 -0.000721403 8.09785 0.204375 8.25535L2.48203 9.96685C2.43885 10.3238 2.40647 10.6703 2.40647 11.0168C2.40647 11.3633 2.43885 11.6993 2.48203 12.0353L0.204375 13.7783C-0.000721403 13.9358 -0.0654889 14.2193 0.0748404 14.4503L2.23375 18.0833C2.36329 18.3143 2.65474 18.3983 2.89222 18.3143L5.58007 17.2538C6.14138 17.6738 6.72429 18.0308 7.40435 18.2933L7.80374 21.0758C7.84692 21.3278 8.07361 21.5168 8.34347 21.5168H12.6613C12.9312 21.5168 13.1578 21.3278 13.201 21.0758L13.6004 18.2933C14.2805 18.0203 14.8634 17.6738 15.4247 17.2538L18.1125 18.3143C18.35 18.3983 18.6415 18.3143 18.771 18.0833L20.9299 14.4503C21.0595 14.2193 21.0055 13.9358 20.8004 13.7783L18.5227 12.0353Z" fill="black" fill-opacity="0.54"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
@@ -23,7 +23,7 @@ export default function Conversation() {
|
||||
const dispatch = useDispatch<AppDispatch>();
|
||||
const endMessageRef = useRef<HTMLDivElement>(null);
|
||||
const inputRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const isDarkTheme = document.documentElement.classList.contains('dark');
|
||||
const [hasScrolledToLast, setHasScrolledToLast] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -122,7 +122,7 @@ export default function Conversation() {
|
||||
<button
|
||||
onClick={scrollIntoView}
|
||||
aria-label="scroll to bottom"
|
||||
className="fixed bottom-32 right-14 z-10 flex h-7 w-7 items-center justify-center rounded-full border-[0.5px] border-gray-alpha bg-gray-100 bg-opacity-50 md:h-9 md:w-9 md:bg-opacity-100 "
|
||||
className="fixed bottom-32 right-14 z-10 flex h-7 w-7 items-center justify-center rounded-full border-[0.5px] border-gray-alpha bg-gray-100 dark:bg-purple-taupe bg-opacity-50 md:h-9 md:w-9 md:bg-opacity-100 "
|
||||
>
|
||||
<img
|
||||
src={ArrowDown}
|
||||
@@ -153,7 +153,7 @@ export default function Conversation() {
|
||||
{queries.length === 0 && (
|
||||
<Hero className="mt-24 h-[100vh] md:mt-52"></Hero>
|
||||
)}
|
||||
<div className="relative bottom-0 flex w-10/12 flex-col items-end self-center bg-white dark:bg-dark-charcoal pt-3 md:fixed md:w-[65%]">
|
||||
<div className="relative bottom-0 flex w-10/12 flex-col items-end self-center bg-white dark:bg-raisin-black pt-3 md:fixed md:w-[65%]">
|
||||
<div className="flex h-full w-full">
|
||||
<div
|
||||
id="inputbox"
|
||||
@@ -188,12 +188,12 @@ export default function Conversation() {
|
||||
inputRef.current.textContent = '';
|
||||
}
|
||||
}}
|
||||
src={localStorage.getItem('selectedTheme') === 'Dark' ? SendDark : Send}
|
||||
src={isDarkTheme ? SendDark : Send}
|
||||
></img>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-gray-595959 dark:text-bright-gray w-[100vw] self-center bg-white dark:bg-dark-charcoal p-5 text-center text-xs md:w-full">
|
||||
<p className="text-gray-595959 dark:text-bright-gray w-[100vw] self-center bg-transparent p-5 text-center text-xs md:w-full">
|
||||
This is a chatbot that uses the GPT-3, Faiss and LangChain to answer
|
||||
questions.
|
||||
</p>
|
||||
|
||||
@@ -64,7 +64,7 @@ const ConversationBubble = forwardRef<
|
||||
bubble = (
|
||||
<div
|
||||
ref={ref}
|
||||
className={`flex self-start ${className} group flex-col pr-20`}
|
||||
className={`flex self-start ${className} group flex-col pr-20 dark:text-bright-gray`}
|
||||
>
|
||||
<div className="flex self-start">
|
||||
<Avatar
|
||||
@@ -79,7 +79,7 @@ const ConversationBubble = forwardRef<
|
||||
/>
|
||||
|
||||
<div
|
||||
className={`ml-2 mr-5 flex rounded-3xl bg-gray-1000 p-3.5 ${
|
||||
className={`ml-2 mr-5 flex rounded-3xl bg-gray-1000 dark:bg-gun-metal p-3.5 ${
|
||||
type === 'ERROR'
|
||||
? 'flex-row items-center rounded-full border border-transparent bg-[#FFE7E7] p-2 py-5 text-sm font-normal text-red-3000 dark:border-red-2000 dark:text-white'
|
||||
: 'flex-col rounded-3xl'
|
||||
@@ -237,7 +237,7 @@ const ConversationBubble = forwardRef<
|
||||
>
|
||||
<div className="absolute left-6 top-4">
|
||||
<div
|
||||
className="flex items-center justify-center rounded-full p-2"
|
||||
className="flex items-center justify-center rounded-full p-2 dark:bg-transparent"
|
||||
style={{
|
||||
backgroundColor: isLikeHovered
|
||||
? isLikeClicked
|
||||
@@ -307,13 +307,13 @@ const ConversationBubble = forwardRef<
|
||||
</div>
|
||||
|
||||
{sources && openSource !== null && sources[openSource] && (
|
||||
<div className="ml-10 mt-2 max-w-[800px] rounded-xl bg-blue-200 p-2">
|
||||
<p className="m-1 w-3/4 truncate text-xs text-gray-500">
|
||||
<div className="ml-10 mt-2 max-w-[800px] rounded-xl bg-blue-200 dark:bg-gun-metal p-2">
|
||||
<p className="m-1 w-3/4 truncate text-xs text-gray-500 dark:text-bright-gray">
|
||||
Source: {sources[openSource].title}
|
||||
</p>
|
||||
|
||||
<div className="m-2 rounded-xl border-2 border-gray-200 bg-white p-2">
|
||||
<p className="text-break text-black">
|
||||
<div className="m-2 rounded-xl border-2 border-gray-200 dark:border-chinese-silver bg-white dark:bg-dark-charcoal p-2">
|
||||
<p className="text-break text-black dark:text-bright-gray">
|
||||
{sources[openSource].text}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -3,6 +3,8 @@ import { useSelector } from 'react-redux';
|
||||
import Edit from '../assets/edit.svg';
|
||||
import Exit from '../assets/exit.svg';
|
||||
import Message from '../assets/message.svg';
|
||||
import MessageDark from '../assets/message-dark.svg';
|
||||
|
||||
import CheckMark2 from '../assets/checkMark2.svg';
|
||||
import Trash from '../assets/trash.svg';
|
||||
|
||||
@@ -27,7 +29,7 @@ export default function ConversationTile({
|
||||
}: ConversationTileProps) {
|
||||
const conversationId = useSelector(selectConversationId);
|
||||
const tileRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const isDarkTheme = document.documentElement.classList.contains('dark');
|
||||
const [isEdit, setIsEdit] = useState(false);
|
||||
const [conversationName, setConversationsName] = useState('');
|
||||
// useOutsideAlerter(
|
||||
@@ -67,16 +69,14 @@ export default function ConversationTile({
|
||||
onClick={() => {
|
||||
selectConversation(conversation.id);
|
||||
}}
|
||||
className={`my-auto mx-4 mt-4 flex h-9 cursor-pointer items-center justify-between gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-black ${
|
||||
conversationId === conversation.id ? 'bg-gray-100' : ''
|
||||
}`}
|
||||
className={`my-auto mx-4 mt-4 flex h-9 cursor-pointer items-center justify-between gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-purple-taupe ${conversationId === conversation.id ? 'bg-gray-100 dark:bg-purple-taupe' : ''
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`flex ${
|
||||
conversationId === conversation.id ? 'w-[75%]' : 'w-[95%]'
|
||||
} gap-4`}
|
||||
className={`flex ${conversationId === conversation.id ? 'w-[75%]' : 'w-[95%]'
|
||||
} gap-4`}
|
||||
>
|
||||
<img src={Message} className="ml-4 w-5 dark:text-white"/>
|
||||
<img src={isDarkTheme ? MessageDark : Message} className="ml-4 w-5 dark:text-white" />
|
||||
{isEdit ? (
|
||||
<input
|
||||
autoFocus
|
||||
@@ -102,18 +102,17 @@ export default function ConversationTile({
|
||||
event.stopPropagation();
|
||||
isEdit
|
||||
? handleSaveConversation({
|
||||
id: conversationId,
|
||||
name: conversationName,
|
||||
})
|
||||
id: conversationId,
|
||||
name: conversationName,
|
||||
})
|
||||
: handleEditConversation();
|
||||
}}
|
||||
/>
|
||||
<img
|
||||
src={isEdit ? Exit : Trash}
|
||||
alt="Exit"
|
||||
className={`mr-4 ${
|
||||
isEdit ? 'h-3 w-3' : 'h-4 w-4'
|
||||
}mt-px cursor-pointer hover:opacity-50`}
|
||||
className={`mr-4 ${isEdit ? 'h-3 w-3' : 'h-4 w-4'
|
||||
}mt-px cursor-pointer hover:opacity-50`}
|
||||
id={`img-${conversation.id}`}
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
|
||||
@@ -37,11 +37,13 @@ module.exports = {
|
||||
'dove-gray': '#6c6c6c',
|
||||
'silver': '#c4c4c4',
|
||||
'rainy-gray': '#a4a4a4',
|
||||
'dark-bg':'#222327',
|
||||
'raisin-black':'#222327',
|
||||
'chinese-black':'#161616',
|
||||
'chinese-silver':'#CDCDCD',
|
||||
'dark-charcoal':'#2F3036',
|
||||
'bright-gray':'#ECECF1',
|
||||
'outer-space':'#444654'
|
||||
'outer-space':'#444654',
|
||||
'gun-metal':'#2E303E'
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user