mirror of
https://github.com/ItzCrazyKns/Perplexica.git
synced 2025-10-25 16:38:16 +00:00
feat(layout): add everything inside chat provider
This commit is contained in:
@@ -1,16 +1,11 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import ChatWindow from '@/components/ChatWindow';
|
import ChatWindow from '@/components/ChatWindow';
|
||||||
import { useParams } from 'next/navigation';
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { ChatProvider } from '@/lib/hooks/useChat';
|
|
||||||
|
|
||||||
const Page = () => {
|
const Page = () => {
|
||||||
const { chatId }: { chatId: string } = useParams();
|
|
||||||
return (
|
return (
|
||||||
<ChatProvider id={chatId}>
|
<ChatWindow />
|
||||||
<ChatWindow />
|
|
||||||
</ChatProvider>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -9,6 +9,7 @@ import { Toaster } from 'sonner';
|
|||||||
import ThemeProvider from '@/components/theme/Provider';
|
import ThemeProvider from '@/components/theme/Provider';
|
||||||
import configManager from '@/lib/config';
|
import configManager from '@/lib/config';
|
||||||
import SetupWizard from '@/components/Setup/SetupWizard';
|
import SetupWizard from '@/components/Setup/SetupWizard';
|
||||||
|
import { ChatProvider } from '@/lib/hooks/useChat';
|
||||||
|
|
||||||
const montserrat = Montserrat({
|
const montserrat = Montserrat({
|
||||||
weight: ['300', '400', '500', '700'],
|
weight: ['300', '400', '500', '700'],
|
||||||
@@ -36,7 +37,7 @@ export default function RootLayout({
|
|||||||
<body className={cn('h-full', montserrat.className)}>
|
<body className={cn('h-full', montserrat.className)}>
|
||||||
<ThemeProvider>
|
<ThemeProvider>
|
||||||
{setupComplete ? (
|
{setupComplete ? (
|
||||||
<>
|
<ChatProvider>
|
||||||
<Sidebar>{children}</Sidebar>
|
<Sidebar>{children}</Sidebar>
|
||||||
<Toaster
|
<Toaster
|
||||||
toastOptions={{
|
toastOptions={{
|
||||||
@@ -47,7 +48,7 @@ export default function RootLayout({
|
|||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</>
|
</ChatProvider>
|
||||||
) : (
|
) : (
|
||||||
<SetupWizard configSections={configSections} />
|
<SetupWizard configSections={configSections} />
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -1,7 +1,5 @@
|
|||||||
import ChatWindow from '@/components/ChatWindow';
|
import ChatWindow from '@/components/ChatWindow';
|
||||||
import { ChatProvider } from '@/lib/hooks/useChat';
|
|
||||||
import { Metadata } from 'next';
|
import { Metadata } from 'next';
|
||||||
import { Suspense } from 'react';
|
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: 'Chat - Perplexica',
|
title: 'Chat - Perplexica',
|
||||||
@@ -10,13 +8,7 @@ export const metadata: Metadata = {
|
|||||||
|
|
||||||
const Home = () => {
|
const Home = () => {
|
||||||
return (
|
return (
|
||||||
<div>
|
<ChatWindow />
|
||||||
<Suspense>
|
|
||||||
<ChatProvider>
|
|
||||||
<ChatWindow />
|
|
||||||
</ChatProvider>
|
|
||||||
</Suspense>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -9,6 +9,7 @@ import Link from 'next/link';
|
|||||||
import NextError from 'next/error';
|
import NextError from 'next/error';
|
||||||
import { useChat } from '@/lib/hooks/useChat';
|
import { useChat } from '@/lib/hooks/useChat';
|
||||||
import Loader from './ui/Loader';
|
import Loader from './ui/Loader';
|
||||||
|
import SettingsButtonMobile from './Settings/SettingsButtonMobile';
|
||||||
|
|
||||||
export interface BaseMessage {
|
export interface BaseMessage {
|
||||||
chatId: string;
|
chatId: string;
|
||||||
@@ -56,9 +57,7 @@ const ChatWindow = () => {
|
|||||||
return (
|
return (
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<div className="absolute w-full flex flex-row items-center justify-end mr-5 mt-5">
|
<div className="absolute w-full flex flex-row items-center justify-end mr-5 mt-5">
|
||||||
<Link href="/settings">
|
<SettingsButtonMobile />
|
||||||
<Settings className="cursor-pointer lg:hidden" />
|
|
||||||
</Link>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col items-center justify-center min-h-screen">
|
<div className="flex flex-col items-center justify-center min-h-screen">
|
||||||
<p className="dark:text-white/70 text-black/70 text-sm">
|
<p className="dark:text-white/70 text-black/70 text-sm">
|
||||||
|
|||||||
@@ -17,7 +17,7 @@ import {
|
|||||||
useState,
|
useState,
|
||||||
} from 'react';
|
} from 'react';
|
||||||
import crypto from 'crypto';
|
import crypto from 'crypto';
|
||||||
import { useSearchParams } from 'next/navigation';
|
import { useParams, useSearchParams } from 'next/navigation';
|
||||||
import { toast } from 'sonner';
|
import { toast } from 'sonner';
|
||||||
import { getSuggestions } from '../actions';
|
import { getSuggestions } from '../actions';
|
||||||
import { MinimalProvider } from '../models/types';
|
import { MinimalProvider } from '../models/types';
|
||||||
@@ -274,15 +274,14 @@ export const chatContext = createContext<ChatContext>({
|
|||||||
|
|
||||||
export const ChatProvider = ({
|
export const ChatProvider = ({
|
||||||
children,
|
children,
|
||||||
id,
|
|
||||||
}: {
|
}: {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
id?: string;
|
|
||||||
}) => {
|
}) => {
|
||||||
|
const params: { chatId: string } = useParams()
|
||||||
const searchParams = useSearchParams();
|
const searchParams = useSearchParams();
|
||||||
const initialMessage = searchParams.get('q');
|
const initialMessage = searchParams.get('q');
|
||||||
|
|
||||||
const [chatId, setChatId] = useState<string | undefined>(id);
|
const [chatId, setChatId] = useState<string | undefined>(params.chatId);
|
||||||
const [newChatCreated, setNewChatCreated] = useState(false);
|
const [newChatCreated, setNewChatCreated] = useState(false);
|
||||||
|
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
@@ -451,6 +450,19 @@ export const ChatProvider = ({
|
|||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (params.chatId && params.chatId !== chatId) {
|
||||||
|
setChatId(params.chatId);
|
||||||
|
setMessages([]);
|
||||||
|
setChatHistory([]);
|
||||||
|
setFiles([]);
|
||||||
|
setFileIds([]);
|
||||||
|
setIsMessagesLoaded(false);
|
||||||
|
setNotFound(false);
|
||||||
|
setNewChatCreated(false);
|
||||||
|
}
|
||||||
|
}, [params.chatId, chatId]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (
|
if (
|
||||||
chatId &&
|
chatId &&
|
||||||
@@ -474,7 +486,7 @@ export const ChatProvider = ({
|
|||||||
setChatId(crypto.randomBytes(20).toString('hex'));
|
setChatId(crypto.randomBytes(20).toString('hex'));
|
||||||
}
|
}
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
}, []);
|
}, [chatId, isMessagesLoaded, newChatCreated, messages.length]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
messagesRef.current = messages;
|
messagesRef.current = messages;
|
||||||
|
|||||||
Reference in New Issue
Block a user