keep chat history

Author: anunayajoshi

backend/collaboration/src/service/post/openai-service.ts

@@ -22,11 +22,16 @@ interface OpenAIRequest {
 const createSystemMessage = (editorCode?: string, language?: string, questionDetails?: string) => {
   return {
     role: 'system' as const,
-    content: `You are a helpful coding assistant. 
+    content: `You are a mentor in a coding interview.
 You are helping a user with a coding problem.
 ${questionDetails ? `\nQuestion Context:\n${JSON.stringify(questionDetails, null, 2)}` : ''}
-${editorCode ? `\nCurrent Code (${language || 'unknown'}):\n${editorCode}` : ''}
-Provide detailed help while referring to their specific code and question context when available.`,
+
+${editorCode ? `\nCurrent Code in the Editor written by the user in language: (${language || 'unknown'}):\n${editorCode}` : ''}
+
+
+If they do not ask for questions related to their code or the question context, you can provide general coding advice anyways. Be very concise and conversational in your responses.
+
+Your response should only be max 4-5 sentences. Do NOT provide code in your answers, but instead try to guide them and give tips for how to solve it. YOU MUST NOT SOLVE THE PROBLEM FOR THEM, OR WRITE ANY CODE. Guide the user towards the solution, don't just give the solution. MAX 4-5 SENTENCES. Ask questions instead of giving answers. Be conversational and friendly.`,
   };
 };
 
@@ -36,8 +41,16 @@ export async function getOpenAIResponse(request: OpenAIRequest) {
 
   try {
     const response = await openai.chat.completions.create({
-      model: 'gpt-3.5-turbo',
-      messages: [createSystemMessage(editorCode, language, questionDetails), ...messages],
+      model: 'gpt-4o',
+      messages: [
+        createSystemMessage(editorCode, language, questionDetails),
+        ...messages,
+        {
+          role: 'assistant',
+          content:
+            '<This is an internal reminder to the assistant to not provide code solutions, but to guide the user towards the solution. Max 4-5 sentences responses please.>',
+        },
+      ],
     });
 
     if (response.choices && response.choices[0].message) {
@@ -60,7 +73,7 @@ export async function getOpenAIStreamResponse(request: OpenAIRequest): Promise<E
 
   try {
     const response = await openai.chat.completions.create({
-      model: 'gpt-3.5-turbo',
+      model: 'gpt-4o',
       messages: [createSystemMessage(editorCode, language, questionDetails), ...messages],
       stream: true,
     });

frontend/src/components/blocks/interview/ai-chat.tsx

@@ -1,5 +1,5 @@
 import { type LanguageName } from '@uiw/codemirror-extensions-langs';
-import React, { useRef,useState } from 'react';
+import React, { useEffect,useRef, useState } from 'react';
 
 import { sendChatMessage } from '@/services/collab-service';
 
@@ -14,6 +14,13 @@ interface AIChatProps {
   questionDetails?: string;
 }
 
+const STORAGE_KEY = 'ai_chat_history';
+
+interface StoredChat {
+  messages: ChatMessageType[];
+  questionDetails: string;
+}
+
 export const AIChat: React.FC<AIChatProps> = ({
   isOpen,
   onClose,
@@ -25,6 +32,50 @@ export const AIChat: React.FC<AIChatProps> = ({
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [error, setError] = useState<string | null>(null);
   const streamingTextRef = useRef<string>('');
+  const prevQuestionRef = useRef<string>(questionDetails);
+
+  useEffect(() => {
+    const loadMessages = () => {
+      const stored = localStorage.getItem(STORAGE_KEY);
+
+      if (stored) {
+        const { messages: storedMessages, questionDetails: storedQuestion } = JSON.parse(
+          stored
+        ) as StoredChat;
+
+        // If question has changed, clear the history
+        if (storedQuestion !== questionDetails) {
+          localStorage.removeItem(STORAGE_KEY);
+          setMessages([]);
+        } else {
+          // Convert stored timestamps back to Date objects
+          const messagesWithDates = storedMessages.map((msg) => ({
+            ...msg,
+            timestamp: new Date(msg.timestamp),
+          }));
+          setMessages(messagesWithDates);
+        }
+      }
+    };
+
+    loadMessages();
+    prevQuestionRef.current = questionDetails;
+  }, [questionDetails]);
+
+  const handleClearHistory = () => {
+    localStorage.removeItem(STORAGE_KEY);
+    setMessages([]);
+  };
+
+  useEffect(() => {
+    if (messages.length > 0) {
+      const dataToStore: StoredChat = {
+        messages,
+        questionDetails,
+      };
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(dataToStore));
+    }
+  }, [messages, questionDetails]);
 
   const handleSend = async (userMessage: string): Promise<void> => {
     if (!userMessage.trim() || isLoading) return;
@@ -119,6 +170,7 @@ export const AIChat: React.FC<AIChatProps> = ({
       isLoading={isLoading}
       error={error}
       title='AI Assistant'
+      onClearHistory={handleClearHistory}
     />
   );
 };

frontend/src/components/blocks/interview/chat/chat-layout.tsx

@@ -1,7 +1,18 @@
-import { Loader2, MessageSquare, Send, X } from 'lucide-react';
+import { Loader2, MessageSquare, Send, Trash2, X } from 'lucide-react';
 import React, { ChangeEvent, KeyboardEvent, useEffect, useRef, useState } from 'react';
 
 import { Alert, AlertDescription } from '@/components/ui/alert';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@/components/ui/alert-dialog';
 import { Button } from '@/components/ui/button';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Textarea } from '@/components/ui/textarea';
@@ -16,6 +27,7 @@ interface ChatLayoutProps {
   isLoading: boolean;
   error: string | null;
   title: string;
+  onClearHistory?: () => void;
 }
 
 export const ChatLayout: React.FC<ChatLayoutProps> = ({
@@ -26,6 +38,7 @@ export const ChatLayout: React.FC<ChatLayoutProps> = ({
   isLoading,
   error,
   title,
+  onClearHistory,
 }) => {
   const [input, setInput] = useState<string>('');
   const inputRef = useRef<HTMLTextAreaElement>(null);
@@ -35,20 +48,17 @@ export const ChatLayout: React.FC<ChatLayoutProps> = ({
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
   };
 
-  // Focus and scroll to bottom on window open
   useEffect(() => {
     if (isOpen) {
       inputRef.current?.focus();
       scrollToBottom();
     }
   }, [isOpen]);
 
-  // Scroll to bottom on reception of messages
   useEffect(() => {
     scrollToBottom();
   }, [messages, isLoading]);
 
-  // Resize textarea on input, up to a maximum height
   useEffect(() => {
     const textAreaEl = inputRef.current;
 
@@ -82,6 +92,32 @@ export const ChatLayout: React.FC<ChatLayoutProps> = ({
           <h2 className='font-semibold'>{title}</h2>
         </div>
         <div className='flex items-center gap-2'>
+          {onClearHistory && (
+            <AlertDialog>
+              <AlertDialogTrigger asChild>
+                <Button
+                  variant='ghost'
+                  size='icon'
+                  className='hover:bg-secondary rounded-full'
+                  disabled={messages.length === 0}
+                >
+                  <Trash2 className='size-4' />
+                </Button>
+              </AlertDialogTrigger>
+              <AlertDialogContent>
+                <AlertDialogHeader>
+                  <AlertDialogTitle>Clear Chat History</AlertDialogTitle>
+                  <AlertDialogDescription>
+                    Are you sure you want to clear the chat history? This action cannot be undone.
+                  </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                  <AlertDialogCancel>Cancel</AlertDialogCancel>
+                  <AlertDialogAction onClick={onClearHistory}>Clear History</AlertDialogAction>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
+          )}
           <Button
             variant='ghost'
             size='icon'