Skip to content

Commit

Permalink
peerlist hacks
Browse files Browse the repository at this point in the history
  • Loading branch information
@SkidGod4444
SkidGod4444 committed Dec 21, 2024
1 parent 9b9b358 commit 94b1eea
Show file tree
Hide file tree
Showing 31 changed files with 703 additions and 533 deletions.
1 change: 1 addition & 0 deletions .github/FUNDING.yml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
github: [SkidGod4444]
136 changes: 48 additions & 88 deletions app/(routes)/chat/[slug]/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,59 @@
"use client";

import { useState } from 'react';
import { ChevronLeft, ChevronRight, PaperclipIcon, ArrowUpIcon } from 'lucide-react';
import { ScrollArea } from "@/components/ui/scroll-area";
import { Button } from "@/components/ui/button";
import { CustomTextArea } from "@/components/custom/text.area";
import { useEffect, useState } from "react";
import { SideBar } from "@/components/custom/sidebar/sidebar";
import useLocalStorage from "@/lib/use.local";
import { LibSelector } from '@/components/custom/lib.selector';
import { Message } from "ai/react";
import { ChatComp } from "@/components/custom/chat/comp";
import LoadingScreen from "@/components/custom/loading.screen";

export default function Component() {
const [isCodeCollapsed, setIsCodeCollapsed] = useState(false);
const [isSidebarExpanded, setIsSidebarExpanded] = useLocalStorage("acter-isCollapsed", false);

const toggleCodePanel = () => {
setIsCodeCollapsed(!isCodeCollapsed);
interface PageProps {
params: {
slug: string;
};
}

const messages = [
{ id: 1, text: "Hello! How can I help you today?" },
{ id: 2, text: "Can you explain how to use React hooks?" },
{ id: 3, text: "React hooks are functions that let you use state and other React features in functional components..." },
];
export default function ChatPage({ params }: PageProps) {
const [loading, setLoading] = useState(true);
const [isSidebarExpanded, setIsSidebarExpanded] = useLocalStorage(
"acter-isCollapsed",
false,
);
const [history, setHistory] = useState<Message[]>([]);

const codeExample = `
import React, { useState } from 'react';
const chatID = params.slug.replace(/^\//, "");

function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
async function handleSlug() {
setLoading(true);
try {
const response = await fetch("/api/ai/history", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ chatID }),
});

return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
`.trim();
if (response.ok) {
const chatHistory = await response.json();
setHistory(chatHistory);
} else {
console.error("Failed to fetch chat history");
}
} catch (error) {
console.error("Error fetching chat history:", error);
} finally {
setLoading(false);
}
}

handleSlug();
}, [params.slug, chatID]);

if (loading) {
return <LoadingScreen />;
}

return (
<div className="flex h-screen">
Expand All @@ -49,64 +64,9 @@ function Counter() {
/>

{/* Left Panel */}
<div className="flex-1 flex flex-col p-4 border-r">
<nav className="flex items-center justify-between border-b pb-2 mb-4">
<h2 className="text-2xl font-bold">Messages</h2>
<Button
variant="ghost"
size="icon"
onClick={toggleCodePanel}
>
{isCodeCollapsed ? <ChevronLeft className="h-6 w-6" /> : <ChevronRight className="h-6 w-6" />}
</Button>
</nav>
<ScrollArea className="flex-1 mb-4 p-4 bg-gray-50 rounded-lg">
{messages.map((message) => (
<div key={message.id} className="mb-4 p-3 bg-white rounded-lg shadow-sm">
{message.text}
</div>
))}
</ScrollArea>

<div className="flex-1 flex flex-col p-4 border-r overflow-hidden">
{/* Input Area */}
<form
// onSubmit={handleFormSubmit}
className="flex flex-col gap-2 bg-background border dark:bg-black rounded-xl dark:border-white p-2 min-h-[60px]"
>
<CustomTextArea
placeholder="Acter, make me a glowing button component..."
className="flex-1 bg-transparent focus:outline-none shadow-none"
/>
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Button variant="outline" size="icon" disabled>
<PaperclipIcon className="w-4 h-4" />
</Button>
<LibSelector />
</div>
<Button size="icon">
<ArrowUpIcon className="w-4 h-4" />
</Button>
</div>
</form>
</div>

{/* Right Panel - Code Viewer */}
<div
className={`flex transition-all duration-300 ease-in-out ${
isCodeCollapsed ? 'w-12' : 'w-1/2'
}`}
>
{!isCodeCollapsed && (
<div className="flex-1 p-4 border-l">
<h2 className="text-2xl font-bold mb-4">Code</h2>
<ScrollArea className="h-[calc(100vh-8rem)]">
<pre className="p-4 bg-gray-100 rounded-lg overflow-x-auto">
<code>{codeExample}</code>
</pre>
</ScrollArea>
</div>
)}
<ChatComp chatId={chatID} history={history} />
</div>
</div>
);
Expand Down
66 changes: 32 additions & 34 deletions app/(routes)/chat/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,75 +1,73 @@
"use client";

import { Badge } from "@/components/ui/badge";
import { MoveUpRight } from "lucide-react";
import useLocalStorage from "@/lib/use.local";
import { useUser } from "@/context/user.context";
import { OfcLinks } from "@/db/defaults";
import { SideBar } from "@/components/custom/sidebar/sidebar";
import { useEffect, useState } from "react";
import { useEffect, useState, useRef } from "react";
import { ChatComp } from "@/components/custom/chat/comp";
import LoadingScreen from "@/components/custom/loading.screen";
import { useRouter } from "next/navigation";

export default function ChatPage() {
const { user } = useUser();
const [chatID, setChatID] = useState<string | number>("null");
const router = useRouter();
const [chatID, setChatID] = useState<string | null>(null);
const [isMsg, setMsg] = useState(false);
const chatInitialized = useRef(false);

const [isSidebarExpanded, setIsSidebarExpanded] = useLocalStorage(
"acter-isCollapsed",
false,
);

// Generate chat ID once the user is available
useEffect(() => {
const fetchChatID = async () => {
if (user && !chatInitialized.current) {
const id = Math.floor(Math.random() * 900000) + 100000;
setChatID(id.toString());
};

if (user) {
fetchChatID();
chatInitialized.current = true;
}
}, [user, chatID]);
}, [user]);

// Navigate to chat page when ready
useEffect(() => {
if (chatID && isMsg) {
window.location.href = `/chat/${chatID}`;
window.history.replaceState(null, "", `/chat/${chatID}`);
}
}, [chatID, isMsg]);
}, [chatID, isMsg, router]);

const [isSidebarExpanded, setIsSidebarExpanded] = useLocalStorage(
"acter-isCollapsed",
false
);
if (!chatID) {
return <LoadingScreen />;
}

return (
<div className="relative h-screen flex z-50 flex-col dark:bg-black dark:text-white bg-background text-black font-[family-name:var(--font-geist-regular)] overflow-hidden">
<div className="relative h-full flex z-50 flex-col dark:bg-black dark:text-white bg-background text-black font-[family-name:var(--font-geist-regular)] overflow-hidden">
{/* Background */}
<div className="fixed inset-0 z-20 h-full w-full bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:3rem_3rem] dark:bg-[linear-gradient(to_right,#333_1px,transparent_1px),linear-gradient(to_bottom,#333_1px,transparent_1px)] dark:bg-[size:3rem_3rem]" />

{/* Main Layout */}
<div className="flex h-full w-full z-30">
{/* Sidebar */}
<SideBar
isSidebarExpanded={isSidebarExpanded}
setIsSidebarExpanded={(expanded) => setIsSidebarExpanded(expanded)}
/>
isSidebarExpanded={isSidebarExpanded}
setIsSidebarExpanded={(expanded) => setIsSidebarExpanded(expanded)}
/>

{/* Main Content */}
<div className="flex flex-col flex-1 z-40">
{/* Header at the top */}
{/* Header */}
<header className="flex justify-end items-center p-4 bg-transparent border-none">
<Badge>Public Beta</Badge>
</header>

<main className="flex-1 flex flex-col items-center justify-center p-4">
<h2 className="text-4xl mb-4 font-[family-name:var(--font-geist-bold)] tracking-tighter select-none">
Need awesome components to ship?
</h2>
<p className="text-sm mb-4 select-none dark:text-white text-muted-foreground">
Am the one who supports Acternity UI, Magic UI and more libraries. Ask questions, modify component.
</p>

{/* Input area */}
<div className="w-full max-w-3xl mb-10">
<div className="w-full max-w-3xl">
<ChatComp chatId={chatID} onHasMessagesChange={setMsg} />
</div>

<div className="flex flex-wrap justify-center gap-4">
{/* <div className="flex flex-wrap justify-center gap-4">
<Badge variant={"secondary"} className="cursor-pointer rounded-xl border border-muted-foreground">
Generate a SaaS pricing calculator
<MoveUpRight className="size-3 ml-1" />
Expand All @@ -82,11 +80,11 @@ export default function ChatPage() {
Write code to implement a min heap
<MoveUpRight className="size-3 ml-1" />
</Badge>
</div>
</div> */}
</main>

{/* Footer at the bottom */}
<footer className="p-8">
{/* Footer */}
{/* <footer className="p-8">
<div className="flex justify-center items-center text-xs text-gray-500">
<div className="flex items-center">
<a href="/legal/ai-policy" className="hover:underline">
Expand All @@ -106,7 +104,7 @@ export default function ChatPage() {
By Saidev Dhal
</a>
</div>
</footer>
</footer> */}
</div>
</div>
</div>
Expand Down
33 changes: 16 additions & 17 deletions app/(routes)/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,7 @@

import { useState } from "react";
import { Button } from "@/components/ui/button";
import {
PaperclipIcon,
ArrowUpIcon,
MoveUpRight,
} from "lucide-react";
import { PaperclipIcon, ArrowUpIcon, MoveUpRight } from "lucide-react";
import { CustomTextArea } from "@/components/custom/text.area";
import { Badge } from "@/components/ui/badge";
import { OsBtn } from "@/components/custom/os.button";
Expand All @@ -18,14 +14,13 @@ import { LibSelector } from "@/components/custom/lib.selector";
export default function HomePage() {
const [isOpen, setIsOpen] = useState(false);

const handleFormSubmit = async(event: React.FormEvent<HTMLFormElement>) => {
const handleFormSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
setIsOpen(!isOpen);
}
};

return (
<div className="relative h-screen z-50 flex flex-col dark:bg-black dark:text-white bg-background text-black font-[family-name:var(--font-geist-regular)] overflow-hidden">

{/* Background */}
<div className="fixed inset-0 z-20 h-full w-full bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:3rem_3rem] dark:bg-[linear-gradient(to_right,#333_1px,transparent_1px),linear-gradient(to_bottom,#333_1px,transparent_1px)] dark:bg-[size:3rem_3rem]" />

Expand All @@ -36,7 +31,7 @@ export default function HomePage() {
{/* Header at the top */}
<header className="flex justify-end items-center p-4 bg-transparent border-none">
{/* <Badge>Public Beta</Badge> */}
<AuthDialog open={isOpen} onOpenChange={setIsOpen}/>
<AuthDialog open={isOpen} onOpenChange={setIsOpen} />
</header>

<div className="mt-28 md:mt-10">
Expand All @@ -47,23 +42,27 @@ export default function HomePage() {
Need awesome components to ship?
</h2>
<p className="text-sm mb-4 select-none dark:text-white text-muted-foreground">
Am the one who supports Acternity UI, Magic UI and more libraries. Ask questions, modify component.
Am the one who supports Acternity UI, Magic UI and more libraries.
Ask questions, modify component.
</p>

{/* Input area */}
<div className="w-full max-w-3xl mb-10">
<form onSubmit={handleFormSubmit} className="flex flex-col gap-2 bg-background dark:bg-black rounded-xl border dark:border-white p-2 min-h-[60px]">
<form
onSubmit={handleFormSubmit}
className="flex flex-col gap-2 bg-background dark:bg-black rounded-xl border dark:border-white p-2 min-h-[60px]"
>
<CustomTextArea
placeholder="Acter make me a glowing button component..."
className="flex-1 bg-transparent focus:outline-none shadow-none"
/>
<div className="flex items-center justify-between gap-2">
<div className='flex items-center gap-2 flex-row'>
<Button variant="outline" size="icon" disabled>
<PaperclipIcon className="w-4 h-4" />
</Button>
<LibSelector />
</div>
<div className="flex items-center gap-2 flex-row">
<Button variant="outline" size="icon" disabled>
<PaperclipIcon className="w-4 h-4" />
</Button>
<LibSelector />
</div>
<Button size="icon">
<ArrowUpIcon className="w-4 h-4" />
</Button>
Expand Down
17 changes: 17 additions & 0 deletions app/api/ai/history/route.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { ragChat } from "@/lib/rag";
import { NextRequest, NextResponse } from "next/server";

export const POST = async (req: NextRequest) => {
try {
const { chatID } = await req.json();
const chatHistory = await ragChat.history.getMessages({
amount: 100,
sessionId: chatID,
});

return NextResponse.json(chatHistory);
} catch (error) {
console.error("Error fetching chat history:", error);
return new NextResponse("Failed to fetch chat history", { status: 500 });
}
};
Loading

0 comments on commit 94b1eea

Please sign in to comment.