done

Author: anunayajoshi

.env.local

@@ -12,6 +12,8 @@ COLLAB_SERVICE_NAME=collab-express
 COLLAB_EXPRESS_PORT=9003
 COLLAB_EXPRESS_DB_PORT=5434
 COLLAB_PGDATA="/data/collab-db"
+OPENAI_API_KEY=PUT_YOUR_OPENAI_API_KEY_HERE
+
 
 MATCHING_SERVICE_NAME=match-express
 MATCHING_EXPRESS_PORT=9004
@@ -22,3 +24,4 @@ MATCHING_DB_HOST_MGMT_PORT=3001
 
 FRONTEND_SERVICE_NAME=frontend
 FRONTEND_PORT=3000
+

backend/collaboration/.env.compose

@@ -8,3 +8,4 @@ POSTGRES_DB="collab"
 POSTGRES_USER="peerprep-collab-express"
 POSTGRES_PASSWORD="6rYE0nIzI2ThzDO"
 PGDATA="/data/collab-db"
+OPENAI_API_KEY="PUT_YOUR_OPENAI_API_KEY_HERE"

backend/collaboration/.env.docker

@@ -7,3 +7,4 @@ POSTGRES_DB=collab
 POSTGRES_USER=peerprep-collab-express
 POSTGRES_PASSWORD=6rYE0nIzI2ThzDO
 PGDATA=/data/collab-db
+OPENAI_API_KEY=OPENAI_KEY_HERE

backend/collaboration/.env.local

@@ -6,4 +6,5 @@ EXPRESS_DB_PORT=5434
 POSTGRES_DB="collab"
 POSTGRES_USER="peerprep-collab-express"
 POSTGRES_PASSWORD="6rYE0nIzI2ThzDO"
-PGDATA="/data/collab-db"
+PGDATA="/data/collab-db"
+OPENAI_API_KEY=PUT-YOUR-KEYS-HERE

backend/collaboration/package.json

@@ -21,6 +21,7 @@
     "env-cmd": "^10.1.0",
     "express": "^4.21.1",
     "http-status-codes": "^2.3.0",
+    "openai": "^4.70.2",
     "pg": "^8.13.0",
     "pino": "^9.4.0",
     "pino-http": "^10.3.0",

backend/collaboration/src/controller/openai-controller.ts

@@ -0,0 +1,27 @@
+import type { Request, Response } from 'express';
+import { StatusCodes } from 'http-status-codes';
+
+import { getOpenAIResponse } from '@/service/post/openai-service';
+
+export async function queryOpenAI(req: Request, res: Response) {
+  const { messages } = req.body;
+
+  // Ensure 'messages' array is provided
+  if (!messages || !Array.isArray(messages)) {
+    return res.status(StatusCodes.BAD_REQUEST).json({
+      error: 'Invalid request: messages array is required.',
+    });
+  }
+
+  try {
+    const result = await getOpenAIResponse(messages);
+
+    return res.status(StatusCodes.OK).json(result);
+  } catch (err) {
+    return res.status(StatusCodes.INTERNAL_SERVER_ERROR).json({
+      success: false,
+      message: 'An error occurred while querying OpenAI',
+      error: err,
+    });
+  }
+}

backend/collaboration/src/routes/chat.ts

@@ -0,0 +1,9 @@
+import express from 'express';
+
+import { queryOpenAI } from '@/controller/openai-controller';
+
+const router = express.Router();
+
+router.get('/chat', queryOpenAI);
+
+export default router;

backend/collaboration/src/server.ts

@@ -9,6 +9,7 @@ import pino from 'pino-http';
 import { UI_HOST } from '@/config';
 import { config, db } from '@/lib/db';
 import { logger } from '@/lib/utils';
+import aiChatRoutes from '@/routes/chat';
 import roomRoutes from '@/routes/room';
 
 import { setUpWSServer } from './ws';
@@ -55,6 +56,8 @@ export const dbHealthCheck = async () => {
   }
 };
 
+app.post('/ai', aiChatRoutes);
+
 // Ensure DB service is up before running.
 app.get('/test-db', async (_req, res) => {
   await dbHealthCheck();

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

@@ -0,0 +1,37 @@
+import OpenAI from 'openai';
+
+const openai = new OpenAI({
+  apiKey: process.env.OPENAI_API_KEY,
+});
+
+interface OpenAIMessage {
+  role: 'system' | 'user' | 'assistant';
+  content: string;
+}
+
+export async function getOpenAIResponse(messages: OpenAIMessage[]) {
+  try {
+    const response = await openai.chat.completions.create({
+      model: 'gpt-3.5-turbo', // or the desired model
+      messages: [
+        {
+          role: 'system',
+          content:
+            'You are a helpful coding assistant. You are helping a user with a coding problem. Provide tips to the user on solving the problem but do not provide the solution directly.',
+        },
+        ...messages,
+      ],
+    });
+
+    if (response.choices && response.choices[0].message) {
+      return {
+        success: true,
+        data: response.choices[0].message.content,
+      };
+    } else {
+      throw new Error('No valid response from OpenAI');
+    }
+  } catch (error) {
+    throw new Error((error as Error)?.message || 'Failed to query OpenAI');
+  }
+}

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

@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+
+import { sendChatMessage } from '@/services/collab-service';
+
+import { ChatLayout } from './chat/chat-layout';
+import { ChatMessageType } from './chat/chat-message';
+
+// Types for OpenAI API
+// interface OpenAIMessage {
+//   role: 'user' | 'assistant';
+//   content: string;
+// }
+
+interface AIChatProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+// const API_URL = 'https://api.openai.com/v1/chat/completions';
+// const API_KEY = process.env.OPENAI_API_KEY;
+
+export const AIChat: React.FC<AIChatProps> = ({ isOpen, onClose }) => {
+  const [messages, setMessages] = useState<ChatMessageType[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSend = async (userMessage: string): Promise<void> => {
+    if (!userMessage.trim() || isLoading) return;
+
+    const updatedMessages = [
+      ...messages,
+      { text: userMessage, isUser: true, timestamp: new Date() },
+    ];
+
+    setMessages(updatedMessages);
+    setIsLoading(true);
+    setError(null);
+
+    const inputMessages = updatedMessages.map((message) => ({
+      role: message.isUser ? 'user' : 'assistant',
+      content: message.text,
+    }));
+
+    try {
+      const response = await sendChatMessage(inputMessages);
+      setMessages((prev) => [
+        ...prev,
+        { text: response?.message, isUser: false, timestamp: new Date() },
+      ]);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : 'An error occurred while fetching the response'
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <ChatLayout
+      isOpen={isOpen}
+      onClose={onClose}
+      messages={messages}
+      onSend={handleSend}
+      isLoading={isLoading}
+      error={error}
+      title='AI Assistant'
+    />
+  );
+};