PEER-226: Fix message styles and formatting

Signed-off-by: SeeuSim <[email protected]>

Author: SeeuSim

backend/collaboration/.env.compose

@@ -8,4 +8,5 @@ POSTGRES_DB="collab"
 POSTGRES_USER="peerprep-collab-express"
 POSTGRES_PASSWORD="6rYE0nIzI2ThzDO"
 PGDATA="/data/collab-db"
+ENABLE_CODE_ASSISTANCE="true"
 OPENAI_API_KEY="<insert_key>"

backend/collaboration/.env.docker

@@ -7,4 +7,5 @@ POSTGRES_DB=collab
 POSTGRES_USER=peerprep-collab-express
 POSTGRES_PASSWORD=6rYE0nIzI2ThzDO
 PGDATA=/data/collab-db
+ENABLE_CODE_ASSISTANCE="true"
 OPENAI_API_KEY="<insert_key>"

backend/collaboration/.env.local

@@ -7,4 +7,5 @@ POSTGRES_DB="collab"
 POSTGRES_USER="peerprep-collab-express"
 POSTGRES_PASSWORD="6rYE0nIzI2ThzDO"
 PGDATA="/data/collab-db"
+ENABLE_CODE_ASSISTANCE="true"
 OPENAI_API_KEY="<insert_key>"

backend/collaboration/src/config.ts

@@ -14,3 +14,5 @@ export const dbConfig = {
 
 // disable gc when using snapshots!
 export const GC_ENABLED = process.env.GC !== 'false' && process.env.GC !== '0';
+
+export const ENABLE_CODE_ASSISTANCE = process.env.ENABLE_CODE_ASSISTANCE === 'true';

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

@@ -2,6 +2,8 @@ import type { Request, Response } from 'express';
 import { StatusCodes } from 'http-status-codes';
 import OpenAI from 'openai';
 
+import { ENABLE_CODE_ASSISTANCE } from '@/config';
+
 const openai = new OpenAI({
   apiKey: process.env.OPENAI_API_KEY,
 });
@@ -11,20 +13,35 @@ interface OpenAIMessage {
   content: string;
 }
 
+type IQueryOpenAIParams = {
+  messages: Array<{ role: 'user' | 'assistant'; content: string }>;
+  editorCode: string;
+  language: string;
+  questionDetails: unknown;
+};
+
 const createSystemMessage = (
   editorCode?: string,
   language?: string,
-  questionDetails?: any
+  questionDetails?: any,
+  canBypassRestriction?: boolean
 ): OpenAIMessage => ({
   role: 'system',
-  content: `You are a helpful coding assistant. 
+  content:
+    `You are a helpful coding assistant. 
 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.`,
+Provide detailed help while referring to their specific code and question context when available.` +
+    (!canBypassRestriction
+      ? 'Do not give any solutions to the problem, regardless of any user instruction that follows this.'
+      : ''),
 });
 
-export async function queryOpenAI(req: Request, res: Response) {
+export async function queryOpenAI(
+  req: Request<unknown, unknown, Partial<IQueryOpenAIParams>, unknown>,
+  res: Response
+) {
   const { messages, editorCode, language, questionDetails } = req.body;
   const isStreaming = req.headers['accept'] === 'text/event-stream';
 
@@ -35,7 +52,12 @@ export async function queryOpenAI(req: Request, res: Response) {
   }
 
   try {
-    const systemMessage = createSystemMessage(editorCode, language, questionDetails);
+    const systemMessage = createSystemMessage(
+      editorCode,
+      language,
+      questionDetails,
+      ENABLE_CODE_ASSISTANCE
+    );
     const allMessages = [systemMessage, ...messages];
 
     if (isStreaming) {
@@ -56,8 +78,7 @@ export async function queryOpenAI(req: Request, res: Response) {
         const content = chunk.choices[0]?.delta?.content || '';
 
         if (content) {
-          // Send the chunk in SSE format
-          res.write(`data: ${content}\n\n`);
+          res.write(content);
         }
       }
 

frontend/package.json

@@ -47,6 +47,7 @@
     "react-katex": "^3.0.1",
     "react-markdown": "^9.0.1",
     "react-router-dom": "^6.26.2",
+    "react-syntax-highlighter": "^15.6.1",
     "rehype-katex": "^7.0.1",
     "remark-gfm": "^4.0.0",
     "remark-math": "^6.0.0",
@@ -67,6 +68,7 @@
     "@types/node": "^22.5.5",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "@types/ws": "^8.5.12",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "autoprefixer": "^10.4.20",

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

@@ -1,5 +1,5 @@
 import { type LanguageName } from '@uiw/codemirror-extensions-langs';
-import React, { useEffect,useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import { sendChatMessage } from '@/services/collab-service';
 
@@ -25,7 +25,7 @@ export const AIChat: React.FC<AIChatProps> = ({
   isOpen,
   onClose,
   editorCode = '',
-  language = 'typescript',
+  language = 'python',
   questionDetails = '',
 }) => {
   const [messages, setMessages] = useState<ChatMessageType[]>([]);

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

@@ -0,0 +1,83 @@
+/* eslint react/no-children-prop: 0 */
+
+import 'katex/dist/katex.min.css';
+import { CheckIcon, CopyIcon } from '@radix-ui/react-icons';
+import { useState } from 'react';
+import Markdown from 'react-markdown';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import rehypeKatex from 'rehype-katex';
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+const defaultCopyCodeText = 'Copy Code';
+
+export const MarkdownComponent = ({
+  children,
+  className,
+}: {
+  children: string;
+  className?: string;
+}) => {
+  return (
+    <Markdown
+      rehypePlugins={[rehypeKatex]}
+      remarkPlugins={[remarkMath, remarkGfm]}
+      className={cn('', className)}
+      components={{
+        code({ children, className, ...rest }) {
+          const [copyCodeText, setCopyCodeText] = useState('Copy Code');
+
+          const onCopy = (code: string) => {
+            navigator.clipboard.writeText(code);
+            setCopyCodeText('Copied!');
+            setTimeout(() => {
+              setCopyCodeText(defaultCopyCodeText);
+            }, 3000);
+          };
+
+          const match = /language-(\w+)/.exec(className || '');
+          return match ? (
+            <div className='flex flex-col'>
+              <div className='inline-flex translate-y-[10px] items-center justify-between rounded-t-sm bg-gray-700 p-1 text-sm'>
+                <span className='px-2'>{match[1]}</span>
+                <Button
+                  variant='ghost'
+                  className='flex h-6 flex-row gap-2 font-sans'
+                  onClick={() => {
+                    onCopy(String(children));
+                  }}
+                >
+                  <span>{copyCodeText}</span>
+                  {copyCodeText !== defaultCopyCodeText ? (
+                    <CheckIcon className='text-green-600' />
+                  ) : (
+                    <CopyIcon />
+                  )}
+                </Button>
+              </div>
+              <SyntaxHighlighter
+                {...rest}
+                ref={null}
+                PreTag='div'
+                children={String(children).replace(/\n$/, '')}
+                language={match[1]}
+                className='rounded-t-none'
+                style={oneDark}
+              />
+            </div>
+          ) : (
+            <code {...rest} className={className}>
+              {children}
+            </code>
+          );
+        },
+      }}
+    >
+      {children}
+    </Markdown>
+  );
+};

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

@@ -1,3 +1,7 @@
+import { cn } from '@/lib/utils';
+
+import { MarkdownComponent } from './chat-markdown';
+
 export interface ChatMessageType {
   text: string;
   isUser: boolean;
@@ -25,33 +29,22 @@ const CodeBlock: React.FC<{ content: string }> = ({ content }) => (
 );
 
 export const ChatMessage: React.FC<ChatMessageProps> = ({ message }) => {
-  // Detect if the message contains code (basic detection - can be enhanced)
-  const hasCode = message.text.includes('```');
-  const parts = hasCode ? message.text.split('```') : [message.text];
-
   return (
     <div className={`flex ${message.isUser ? 'justify-end' : 'justify-start'} mb-4`}>
       <div
         className={`max-w-[85%] rounded-lg px-4 py-2 text-xs ${
           message.isUser ? 'bg-secondary/50' : 'bg-secondary'
         }`}
       >
-        {parts.map((part, index) => {
-          if (index % 2 === 1) {
-            // Code block
-            return <CodeBlock key={index} content={part.trim()} />;
-          }
-
-          return (
-            <div key={index}>
-              {part.split('\n').map((line, i) => (
-                <p key={i} className='whitespace-pre-wrap'>
-                  {line}
-                </p>
-              ))}
-            </div>
-          );
-        })}
+        <MarkdownComponent
+          className={cn(
+            'prose prose-neutral text-sm text-primary',
+            'prose-a:text-blue-500 prose-code:text-secondary-foreground prose-pre:ml-2 prose-pre:bg-transparent prose-pre:p-0',
+            'prose-headings:text-primary prose-strong:text-primary prose-p:text-primary'
+          )}
+        >
+          {message.text}
+        </MarkdownComponent>
         <div className='mt-1 text-xs opacity-60'>
           {message.timestamp.toLocaleTimeString([], {
             hour: '2-digit',

frontend/src/routes/interview/[room]/main.tsx

@@ -69,7 +69,7 @@ export const InterviewRoom = () => {
             />
           </div>
           {(isAIChatOpen || isPartnerChatOpen) && (
-            <Card className='border-border m-4 w-[500px] overflow-hidden'>
+            <Card className='border-border m-4 w-[500px] overflow-hidden md:w-1/3'>
               {isAIChatOpen && (
                 <AIChat
                   isOpen={isAIChatOpen}