From bf13bb474430ab2d755f05afff0ab6692994fcc5 Mon Sep 17 00:00:00 2001 From: while-basic Date: Sun, 1 Dec 2024 11:50:01 -0700 Subject: [PATCH] fix: Update chat authentication and RLS handling - Implement proper Supabase authentication using createClientComponentClient - Fix Row Level Security (RLS) policy issues - Add proper error handling for authentication states - Update chat operations to work with authenticated sessions - Fix TypeScript and linting issues --- app/chat/page.tsx | 71 ++++++++++++++++++--------- components/chat/chat-interface.tsx | 73 ++++++++++++++++++---------- components/chat/message-list.tsx | 58 ++++++++++++---------- components/chat/sidebar.tsx | 78 ++++++++++++++++++++---------- components/work-carousel.tsx | 11 +++-- data/visitor-count.json | 2 +- lib/chat.ts | 40 +++++++++------ lib/projects.ts | 10 ++-- public/sitemap.xml | 34 ++++++------- 9 files changed, 236 insertions(+), 141 deletions(-) diff --git a/app/chat/page.tsx b/app/chat/page.tsx index 37db501..b68e5d4 100644 --- a/app/chat/page.tsx +++ b/app/chat/page.tsx @@ -11,6 +11,7 @@ import { Sidebar } from "@/components/chat/sidebar" import { useEffect, useState } from "react" import { getConversations, createConversation, updateConversation, Conversation } from "@/lib/chat" import { Message } from "@/components/chat/message-list" +import { cn } from "@/lib/utils" export default function ChatPage() { const { user, loading } = useAuth() @@ -19,27 +20,33 @@ export default function ChatPage() { const [conversations, setConversations] = useState([]) const [currentConversation, setCurrentConversation] = useState(null) - useEffect(() => { - if (!loading && !user) { - setShowAuthDialog(true) - } - if (user) { - loadConversations() - } - }, [user, loading]) - const loadConversations = async () => { try { if (!user?.id) return const data = await getConversations(user.id) setConversations(data) - } catch (error) { + } catch (error: unknown) { console.error('Error loading conversations:', error) + if (error instanceof Error && error.message === 'Not authenticated') { + setShowAuthDialog(true) + } } } + useEffect(() => { + if (!loading && !user) { + setShowAuthDialog(true) + } + if (user) { + loadConversations() + } + }, [user, loading, loadConversations]) + const handleNewMessage = async (messages: Message[]) => { - if (!user?.id) return + if (!user?.id) { + setShowAuthDialog(true) + return + } try { if (!currentConversation) { @@ -56,11 +63,24 @@ export default function ChatPage() { prev.map(conv => conv.id === updatedConversation.id ? updatedConversation : conv) ) } - } catch (error) { + } catch (error: unknown) { console.error('Error saving conversation:', error) + if (error instanceof Error && error.message === 'Not authenticated') { + setShowAuthDialog(true) + } } } + const handleNewConversation = () => { + console.log('handleNewConversation called'); + setCurrentConversation(null); + console.log('currentConversation set to null'); + setConversations(prev => { + console.log('updating conversations'); + return [...prev.filter(conv => conv.id !== undefined)]; + }); + } + return (
@@ -75,24 +95,29 @@ export default function ChatPage() {
- {showSidebar && ( -
- -
- )} -
-
+
+ +
+
+
diff --git a/components/chat/chat-interface.tsx b/components/chat/chat-interface.tsx index a60b698..89b3c13 100644 --- a/components/chat/chat-interface.tsx +++ b/components/chat/chat-interface.tsx @@ -4,6 +4,9 @@ import { Conversation } from '@/lib/chat' import { Button } from "@/components/ui/button" import { Textarea } from "@/components/ui/textarea" import { useToast } from "@/components/ui/use-toast" +import { Card, CardContent, CardFooter } from "@/components/ui/card" +import { ScrollArea } from "@/components/ui/scroll-area" +import { MessageSquare } from "lucide-react" interface ChatInterfaceProps { conversation: Conversation | null @@ -16,12 +19,13 @@ export function ChatInterface({ conversation, onNewMessage }: ChatInterfaceProps const [isLoading, setIsLoading] = useState(false) const { toast } = useToast() + // Reset state when conversation changes useEffect(() => { - if (conversation) { - setMessages(conversation.messages || []) - } else { - setMessages([]) - } + console.log('ChatInterface: conversation changed', { conversation }); + setMessages(conversation?.messages || []) + setInputValue('') + setIsLoading(false) + console.log('ChatInterface: states reset'); }, [conversation]) const handleSubmit = async (e: React.FormEvent) => { @@ -54,12 +58,13 @@ export function ChatInterface({ conversation, onNewMessage }: ChatInterfaceProps }), }) - const data = await response.json() - if (!response.ok) { + const data = await response.json() throw new Error(data.message || 'Failed to get response') } + const data = await response.json() + // Add AI response to messages const assistantMessage: Message = { role: 'assistant', @@ -82,17 +87,33 @@ export function ChatInterface({ conversation, onNewMessage }: ChatInterfaceProps } return ( -
-
- -
-
-
+ + + +
+ {!conversation && messages.length === 0 ? ( +
+ +
+

Start a New Chat

+

+ Begin your conversation by typing a message below. +

+
+
+ ) : ( + + )} +
+
+
+ +