-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
d2ea4e8
commit 9b9b358
Showing
21 changed files
with
999 additions
and
73 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,113 @@ | ||
| "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 { SideBar } from "@/components/custom/sidebar/sidebar"; | ||
| import useLocalStorage from "@/lib/use.local"; | ||
| import { LibSelector } from '@/components/custom/lib.selector'; | ||
|
|
||
| export default function Component() { | ||
| const [isCodeCollapsed, setIsCodeCollapsed] = useState(false); | ||
| const [isSidebarExpanded, setIsSidebarExpanded] = useLocalStorage("acter-isCollapsed", false); | ||
|
|
||
| const toggleCodePanel = () => { | ||
| setIsCodeCollapsed(!isCodeCollapsed); | ||
| }; | ||
|
|
||
| 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..." }, | ||
| ]; | ||
|
|
||
| const codeExample = ` | ||
| import React, { useState } from 'react'; | ||
| function Counter() { | ||
| const [count, setCount] = useState(0); | ||
| return ( | ||
| <div> | ||
| <p>You clicked {count} times</p> | ||
| <button onClick={() => setCount(count + 1)}> | ||
| Click me | ||
| </button> | ||
| </div> | ||
| ); | ||
| } | ||
| `.trim(); | ||
|
|
||
| return ( | ||
| <div className="flex h-screen"> | ||
| {/* Sidebar */} | ||
| <SideBar | ||
| isSidebarExpanded={isSidebarExpanded} | ||
| setIsSidebarExpanded={setIsSidebarExpanded} | ||
| /> | ||
|
|
||
| {/* 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> | ||
|
|
||
| {/* 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> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,114 @@ | ||
| import React from 'react' | ||
| "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 { ChatComp } from "@/components/custom/chat/comp"; | ||
|
|
||
| export default function ChatPage() { | ||
| const { user } = useUser(); | ||
| const [chatID, setChatID] = useState<string | number>("null"); | ||
| const [isMsg, setMsg] = useState(false); | ||
|
|
||
| useEffect(() => { | ||
| const fetchChatID = async () => { | ||
| const id = Math.floor(Math.random() * 900000) + 100000; | ||
| setChatID(id.toString()); | ||
| }; | ||
|
|
||
| if (user) { | ||
| fetchChatID(); | ||
| } | ||
| }, [user, chatID]); | ||
|
|
||
| useEffect(() => { | ||
| if (chatID && isMsg) { | ||
| window.location.href = `/chat/${chatID}`; | ||
| } | ||
| }, [chatID, isMsg]); | ||
|
|
||
| const [isSidebarExpanded, setIsSidebarExpanded] = useLocalStorage( | ||
| "acter-isCollapsed", | ||
| false | ||
| ); | ||
|
|
||
| return ( | ||
| <div> | ||
| Damn! bro can't you even wait for my wings? | ||
| <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"> | ||
| {/* 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)} | ||
| /> | ||
|
|
||
| {/* Main Content */} | ||
| <div className="flex flex-col flex-1 z-40"> | ||
| {/* Header at the top */} | ||
| <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"> | ||
| <ChatComp chatId={chatID} onHasMessagesChange={setMsg} /> | ||
| </div> | ||
|
|
||
| <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" /> | ||
| </Badge> | ||
| <Badge variant={"secondary"} className="cursor-pointer rounded-xl border border-muted-foreground"> | ||
| How can I structure LLM output? | ||
| <MoveUpRight className="size-3 ml-1" /> | ||
| </Badge> | ||
| <Badge variant={"secondary"} className="cursor-pointer rounded-xl border border-muted-foreground"> | ||
| Write code to implement a min heap | ||
| <MoveUpRight className="size-3 ml-1" /> | ||
| </Badge> | ||
| </div> | ||
| </main> | ||
|
|
||
| {/* Footer at the bottom */} | ||
| <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"> | ||
| Terms | ||
| </a> | ||
| <div className="h-4 w-px bg-gray-300 mx-2"></div> | ||
| <a href="/legal/agreement" className="hover:underline"> | ||
| AI Policy | ||
| </a> | ||
| <div className="h-4 w-px bg-gray-300 mx-2"></div> | ||
| <a href="/legal/privacy-policy" className="hover:underline"> | ||
| Privacy | ||
| </a> | ||
| </div> | ||
| <div className="h-4 w-px bg-gray-300 mx-2"></div> | ||
| <a href={OfcLinks.portfolio} className="hover:underline"> | ||
| By Saidev Dhal | ||
| </a> | ||
| </div> | ||
| </footer> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| import { NextRequest } from "next/server"; | ||
| import { aiUseChatAdapter } from "@upstash/rag-chat/nextjs"; | ||
| import { ragChat } from "@/lib/rag"; | ||
|
|
||
| export const POST = async (req: NextRequest) => { | ||
| const { messages } = await req.json(); | ||
|
|
||
| const lastMsg = messages[messages.length - 1].content; | ||
| const res = await ragChat.chat(lastMsg, { | ||
| namespace: "acter-db", | ||
| streaming: true, | ||
| historyLength: 100, | ||
| historyTTL: 604_800, | ||
| similarityThreshold: 0.7, | ||
| }); | ||
|
|
||
| return aiUseChatAdapter(res); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import { ragChat } from '@/lib/rag'; | ||
| import { NextRequest, NextResponse } from 'next/server'; | ||
|
|
||
| export async function POST(req: NextRequest) { | ||
| try { | ||
| const { source, namespace, metadata } = await req.json(); | ||
|
|
||
| await ragChat.context.add({ | ||
| type: "html", | ||
| source: source, | ||
| config: { chunkOverlap: 50, chunkSize: 200 }, | ||
| options: { namespace: namespace, metadata: { title: metadata.title, description: metadata.description } }, | ||
| }); | ||
|
|
||
| return NextResponse.json({ message: "Content added successfully to ragChat context!" }); | ||
| } catch (error) { | ||
| console.error("Error adding content to ragChat context:", error); | ||
| return NextResponse.json({ error: "Internal Server Error" }, { status: 500 }); | ||
| } | ||
| } |
Oops, something went wrong.