Allinix-Labs/allinix-demo
1
0
Fork 0
mirror of https://github.com/trushildhokiya/allininx-2.git synced 2025-03-15 11:38:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

#debug 1

Browse Source
This commit is contained in:
allinix 2025-02-19 08:46:05 +05:30
parent 5a6c465dab
commit 667a2a97b8
2 changed files with 172 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

246
next/src/components/drawer/LeftSidebar.tsx
View File

@ -2,7 +2,7 @@ import Image from "next/image";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { useTranslation } from "next-i18next"; import { useTranslation } from "next-i18next";
import { FaBars } from "react-icons/fa"; import { FaBars } from "react-icons/fa";
import { useState, useEffect } from 'react';
import { DrawerItemButton, DrawerItemButtonLoader } from "./DrawerItemButton"; import { DrawerItemButton, DrawerItemButtonLoader } from "./DrawerItemButton";
import type { DisplayProps } from "./Sidebar"; import type { DisplayProps } from "./Sidebar";
import Sidebar from "./Sidebar"; import Sidebar from "./Sidebar";
@ -21,145 +21,155 @@ const LeftSidebar = ({ show, setShow, onReload }: DisplayProps & { onReload?: ()
const router = useRouter(); const router = useRouter();
const { signIn, status } = useAuth(); const { signIn, status } = useAuth();
const [t] = useTranslation("drawer"); const [t] = useTranslation("drawer");
const [isPageLoading, setIsPageLoading] = useState(false);
const { isLoading, data } = api.agent.getAll.useQuery(undefined, { const { isLoading, data } = api.agent.getAll.useQuery(undefined, {
enabled: status === "authenticated", enabled: status === "authenticated",
}); });
const userAgents = data ?? []; const userAgents = data ?? [];
useEffect(() => {
const handleStart = (url: string) => {
if (PAGE_LINKS.some(link => link.href === url)) {
setIsPageLoading(true);
}
};
const handleComplete = () => {
setIsPageLoading(false);
};
router.events.on('routeChangeStart', handleStart);
router.events.on('routeChangeComplete', handleComplete);
router.events.on('routeChangeError', handleComplete);
return () => {
router.events.off('routeChangeStart', handleStart);
router.events.off('routeChangeComplete', handleComplete);
router.events.off('routeChangeError', handleComplete);
};
}, [router]);
const navigateToPage = (href: string) => { const navigateToPage = (href: string) => {
if (router.pathname === href) { if (router.pathname === href) {
onReload?.(); onReload?.();
return; return;
} }
void router.push(href); void router.push(href);
}; };
return ( return (
<Sidebar show={show} setShow={setShow} side="left" className="border-2 bg-black border-gray-800"> <>
<div className="flex flex-row items-center pb-6"> {isPageLoading && (
<Link href="/" className="flex cursor-pointer items-center"> <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
<Image src="/allinix-logo.png" width="42" height="42" alt="Reworkd AI" /> <div className="relative space-y-3 text-center">
<p className="text-xl">Allinix</p> <div className="h-1.5 w-32 overflow-hidden rounded-full bg-gray-800">
</Link> <div className="absolute inset-0">
<div
<button className="h-full w-1/3 bg-blue-500"
className="btn-primary-orange ml-auto flex rounded-md border-none bg-orange-500/50 p-2 text-orange-500 transition-all" style={{
onClick={() => navigateToPage("/chat")} animation: 'loadingN 1.5s infinite ease-in-out',
> transform: 'translateX(-100%)'
}}
<SquarePlus className="mr-2" /> New Agent ></div>
</button> </div>
<button </div>
className="ml-auto rounded-md border-none hover:scale-110 transition-all duration-150" <p className="text-sm font-medium text-white/90">Loading...</p>
onClick={() => setShow(!show)}
>
<FaX size="18" className="z-20 text-white-" />
</button>
</div>
<div className="mb-2 mr-2 flex-1 overflow-y-auto overflow-x-hidden overflow-ellipsis">
{/* {status === "unauthenticated" && (
<div className="p-1 text-sm text-slate-12">
<a className="link" onClick={() => void signIn()}>
{t("SIGN_IN")}
</a>{" "}
{t("SIGN_IN_NOTICE")}
</div> </div>
)} </div>
{status === "authenticated" && !isLoading && userAgents.length === 0 && ( )}
<div className="p-1 text-sm text-white">
{t("NEED_TO_SIGN_IN_AND_CREATE_AGENT_FIRST")} <Sidebar show={show} setShow={setShow} side="left" className="border-2 bg-black border-gray-800">
</div> <div className="flex flex-row items-center pb-6">
)} */} <Link href="/" className="flex cursor-pointer items-center">
{/* {(status === "loading" || (status === "authenticated" && isLoading)) && ( <Image src="/allinix-logo.png" width="42" height="42" alt="Reworkd AI" />
<div className="flex flex-col gap-2 overflow-hidden"> <p className="text-xl">Allinix</p>
{Array(13) </Link>
.fill(0)
.map((_, index) => ( <button
<DrawerItemButtonLoader key={index} /> className="btn-primary-orange ml-auto flex rounded-md border-none bg-orange-500/50 p-2 text-orange-500 transition-all"
onClick={() => navigateToPage("/chat")}
>
<SquarePlus className="mr-2" /> New Agent
</button>
<button
className="ml-auto rounded-md border-none hover:scale-110 transition-all duration-150"
onClick={() => setShow(!show)}
>
<FaX size="18" className="z-20 text-white" />
</button>
</div>
<div className="mb-2 mr-2 flex-1 overflow-y-auto overflow-x-hidden overflow-ellipsis">
<p className="my-5 text-3xl font-semibold text-white">Welcome Back to Allinix</p>
<p className="text-sm">Valid member of Allinix since Jan 2025</p>
<ul role="list" className="flex flex-col">
<ul className="mb-2">
<div className="mb-2 ml-2 text-base my-4 font-semibold text-slate-10">Menu</div>
{PAGE_LINKS.map((link, i) => (
<LinkItem
key={i}
title={link.name}
href={link.href}
onClick={() => navigateToPage(link.href)}
>
<link.icon className={link.className} />
</LinkItem>
))} ))}
</div> </ul>
)} */} </ul>
<p className="my-5 text-3xl font-semibold text-white">Welcome Back to Allinix</p> <h3 className="mb-2 ml-2 text-base my-4 font-semibold text-slate-10">Conversations</h3>
<p className="text-sm">Valid member of Allinix since Jan 2025</p> {userAgents.map((agent, index) => (
<DrawerItemButton
{/* <button className="px-3 py-2 btn-primary-teal text-teal-500 bg-teal-600/50 flex w-full text-center justify-center rounded-lg my-4"> key={`${index}-${agent.name}`}
<Rocket className="mr-2 fill-teal-500" /> Subscribe className="flex w-full rounded-md p-2 text-sm font-semibold text-white"
</button> */} text={agent.name}
onClick={() => void router.push(`/agent?id=${agent.id}`)}
/>
))}
</div>
<ul role="list" className="flex flex-col"> <ul role="list" className="flex flex-col">
<ul className="mb-2"> <li className="mb-2">
<div className="mb-2 ml-2 text-base my-4 font-semibold text-slate-10">Menu</div> <div className="mx-2 flex items-center justify-center gap-3">
{PAGE_LINKS.map((link, i) => ( {SOCIAL_LINKS.map((link) => (
<LinkItem <motion.div
key={i}
title={link.name}
href={link.href}
onClick={() => navigateToPage(link.href)}
>
<link.icon className={link.className} />
</LinkItem>
))}
</ul>
</ul>
<h3 className="mb-2 ml-2 text-base my-4 font-semibold text-slate-10">Conversations</h3>
{userAgents.map((agent, index) => (
<DrawerItemButton
key={`${index}-${agent.name}`}
className="flex w-full rounded-md p-2 text-sm font-semibold text-white"
text={agent.name}
onClick={() => void router.push(`/agent?id=${agent.id}`)}
/>
))}
</div>
<ul role="list" className="flex flex-col">
<li className="mb-2">
<div className="mx-2 flex items-center justify-center gap-3">
{SOCIAL_LINKS.map((link) => (
<motion.div
whileHover={{ scale: 1.2, opacity: 0.9 }}
whileTap={{ scale: 0.9 }}
transition={{ type: "spring", stiffness: 300, damping: 15 }}
>
<LinkIconItem
key={link.name} key={link.name}
href={link.href} whileHover={{ scale: 1.2, opacity: 0.9 }}
onClick={() => { whileTap={{ scale: 0.9 }}
void router.push(link.href); transition={{ type: "spring", stiffness: 300, damping: 15 }}
}}
> >
{link.icon instanceof Object ? ( <LinkIconItem
<link.icon size={20} className="" /> href={link.href}
) : ( onClick={() => {
<Image void router.push(link.href);
src={link.icon} }}
width={link.width} >
height={link.height} {link.icon instanceof Object ? (
className="" <link.icon size={20} />
alt="image" ) : (
/> <Image
)} src={link.icon}
</LinkIconItem> width={link.width}
</motion.div> height={link.height}
))} alt="icon"
</div> />
</li> )}
<li> </LinkIconItem>
<div className="mb-2 ml-2 text-xs font-semibold text-slate-10"></div> </motion.div>
</li> ))}
<li> </div>
<div className="mb-2 ml-2 text-center text-xs font-semibold text-slate-10"> </li>
@{new Date().getFullYear()} Allinix.ai | All Rights reserved <li>
</div> <div className="mb-2 ml-2 text-center text-xs font-semibold text-slate-10">
</li> @{new Date().getFullYear()} Allinix.ai | All Rights reserved
{/* <li> </div>
<AuthItem session={session} signOut={signOut} signIn={signIn} /> </li>
</li> */} </ul>
</ul> </Sidebar>
</Sidebar> </>
); );
}; };

48
next/src/styles/globals.css
View File

@ -17,13 +17,42 @@ img {
@keyframes loading { @keyframes loading {
0% { 0% {
transform: translateX(-100%); transform: translateX(-100%);
} }
100% { 100% {
transform: translateX(200%); transform: translateX(200%);
} }
} }
@keyframes loadingN {
0% {
transform: translateX(-100%);
}
50% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
/* Optional: Add smooth transitions for loading overlay */
.fixed {
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
/* Optional: Add backdrop blur transition */
.backdrop-blur-sm {
transition-property: backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.gradient-text { .gradient-text {
background: linear-gradient(180deg, #fff 0%, #525252 100%); background: linear-gradient(180deg, #fff 0%, #525252 100%);
background-clip: text; background-clip: text;
@ -37,33 +66,34 @@ img {
box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.5) inset; box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.5) inset;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.btn-primary-orange { .btn-primary-orange {
border: 1px solid rgba(255, 134, 53, 0.1); border: 1px solid rgba(255, 134, 53, 0.1);
background: rgba(255, 134, 53, 0.1); background: rgba(255, 134, 53, 0.1);
box-shadow: 0px 0px 10px 0px rgba(255, 134, 53, 0.5) inset; box-shadow: 0px 0px 10px 0px rgba(255, 134, 53, 0.5) inset;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.btn-primary-teal { .btn-primary-teal {
border: 1px solid rgba(20, 184, 166, 0.1); border: 1px solid rgba(20, 184, 166, 0.1);
background: rgba(20, 184, 166, 0.1); background: rgba(20, 184, 166, 0.1);
box-shadow: 0px 0px 10px 0px rgba(20, 184, 166, 0.5) inset; box-shadow: 0px 0px 10px 0px rgba(20, 184, 166, 0.5) inset;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.btn-primary-purple { .btn-primary-purple {
border: 1px solid rgba(168, 85, 247, 0.1); border: 1px solid rgba(168, 85, 247, 0.1);
background: rgba(168, 85, 247, 0.1); background: rgba(168, 85, 247, 0.1);
box-shadow: 0px 0px 10px 0px rgba(168, 85, 247, 0.5) inset; box-shadow: 0px 0px 10px 0px rgba(168, 85, 247, 0.5) inset;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.btn-primary-red { .btn-primary-red {
border: 1px solid rgba(244, 63, 94, 0.1); border: 1px solid rgba(244, 63, 94, 0.1);
background: rgba(244, 63, 94, 0.1); background: rgba(244, 63, 94, 0.1);
box-shadow: 0px 0px 10px 0px rgba(244, 63, 94, 0.5) inset; box-shadow: 0px 0px 10px 0px rgba(244, 63, 94, 0.5) inset;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.btn-primary:hover { .btn-primary:hover {
box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 1) inset; box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 1) inset;