repomix-output.txt

This file is a merged representation of the entire codebase, combining all repository files into a single document.
Generated by Repomix on: 2024-12-06T17:55:47.703Z

================================================================
File Summary
================================================================

Purpose:
--------
This file contains a packed representation of the entire repository's contents.
It is designed to be easily consumable by AI systems for analysis, code review,
or other automated processes.

File Format:
------------
The content is organized as follows:
1. This summary section
2. Repository information
3. Repository structure
4. Multiple file entries, each consisting of:
  a. A separator line (================)
  b. The file path (File: path/to/file)
  c. Another separator line
  d. The full contents of the file
  e. A blank line

Usage Guidelines:
-----------------
- This file should be treated as read-only. Any changes should be made to the
  original repository files, not this packed version.
- When processing this file, use the file path to distinguish
  between different files in the repository.
- Be aware that this file may contain sensitive information. Handle it with
  the same level of security as you would the original repository.

Notes:
------
- Some files may have been excluded based on .gitignore rules and Repomix's
  configuration.
- Binary files are not included in this packed representation. Please refer to
  the Repository Structure section for a complete list of file paths, including
  binary files.

Additional Info:
----------------

For more information about Repomix, visit: https://github.com/yamadashy/repomix

================================================================
Repository Structure
================================================================
backend/
  JobReadyAI.API/
    Controllers/
      ChatController.cs
    Models/
      ChatRequest.cs
    Properties/
      launchSettings.json
    Services/
      OpenAIService.cs
    appsettings.Development.json
    appsettings.json
    JobReadyAI.API.csproj
    JobReadyAI.API.http
    Program.cs
frontend/
  job-ready-ai-client/
    src/
      app/
        core/
          models/
            chat.model.ts
          services/
            chat.service.ts
        features/
          chat/
            components/
              message/
                message.component.html
                message.component.ts
              message-input/
                message-input.component.html
                message-input.component.ts
            chat.component.html
            chat.component.ts
        app.component.html
        app.component.spec.ts
        app.component.ts
        app.config.ts
        app.routes.ts
      environments/
        environment.development.ts
        environment.ts
      _redirects
      env.js
      index.html
      main.ts
      styles.scss
    .editorconfig
    .gitignore
    angular.json
    netlify.toml
    package.json
    postcss.config.js
    README.md
    tailwind.config.js
    tsconfig.app.json
    tsconfig.json
    tsconfig.spec.json
.gitignore
JobReadyAI.sln
README.md

================================================================
Repository Files
================================================================

================
File: backend/JobReadyAI.API/Controllers/ChatController.cs
================
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using JobReadyAI.API.Models;
using JobReadyAI.API.Services;
using Microsoft.AspNetCore.Cors;
using OpenAI.Chat;

namespace JobReadyAI.API.Controllers
{
    [ApiController]
    [Route("api/[controller]")]
    [EnableCors("AllowAngular")]
    public class ChatController : ControllerBase
    {
        private readonly IOpenAIService _openAIService;

        public ChatController(IOpenAIService openAIService)
        {
            _openAIService = openAIService;
        }

        public class ChatRequest
        {
            public string Message { get; set; }
            public List<MessageHistory> ConversationHistory { get; set; } = new List<MessageHistory>();
        }

        public class MessageHistory
        {
            public string Role { get; set; } 
            public string Content { get; set; }
        }

        [HttpPost]
        public async Task<IActionResult> GetResponse([FromBody] ChatRequest request)
        {
            try
            {
                if (request == null || string.IsNullOrEmpty(request.Message))
                {
                    return BadRequest("Message cannot be empty");
                }

                var messages = new List<ChatMessage>();
                foreach (var msg in request.ConversationHistory ?? new List<MessageHistory>())
                {
                    messages.Add(msg.Role == "user" 
                        ? new UserChatMessage(msg.Content)
                        : new AssistantChatMessage(msg.Content));
                }

                messages.Add(new UserChatMessage(request.Message));

                var response = await _openAIService.GetChatResponseAsync(messages);
                return Ok(new { response });
            }
            catch (Exception ex)
            {

                Console.WriteLine($"Error: {ex.Message}");
                return BadRequest(new { error = ex.Message });
            }
        }
    }
}

================
File: backend/JobReadyAI.API/Models/ChatRequest.cs
================
namespace JobReadyAI.API.Models
{
    public class ChatRequest
    {
        public string Message { get; set; }
        public List<MessageHistory> ConversationHistory { get; set; } = new List<MessageHistory>();
    }

    public class MessageHistory
    {
        public string Role { get; set; }
        public string Content { get; set; }
    }
}

================
File: backend/JobReadyAI.API/Properties/launchSettings.json
================
{
  "$schema": "http://json.schemastore.org/launchsettings.json",
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:51977",
      "sslPort": 44341
    }
  },
  "profiles": {
    "http": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "launchUrl": "swagger",
      "applicationUrl": "http://localhost:5001",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "https": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "launchUrl": "swagger",
      "applicationUrl": "https://localhost:7108;http://localhost:5001",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "launchUrl": "swagger",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

================
File: backend/JobReadyAI.API/Services/OpenAIService.cs
================
using System;
using System.Collections.Generic;
using System.Threading.Tasks;
using OpenAI;
using OpenAI.Chat;
using OpenAI.Models;

namespace JobReadyAI.API.Services
{
    public interface IOpenAIService
    {
        Task<string> GetChatResponseAsync(List<ChatMessage> conversationHistory);
    }

    public class OpenAIService : IOpenAIService
    {
        private readonly ChatClient _chatClient;
        private readonly string _systemPrompt = @"You are an experienced recruiter and interview specialist with expertise in creating targeted interview questions for a variety of roles and industries. Your task is to generate high-quality interview questions based on the job description provided by the user.
        ### Instructions:
        1. Analyze the job description thoroughly to identify key skills, responsibilities, and qualifications.
        2. Generate interview questions in the following categories:
         - **Technical Questions**: Assess the candidate's job-specific technical skills.
         - **Behavioral Questions**: Evaluate the candidate's soft skills, such as teamwork, leadership, and communication.
         - **Situational Questions**: Explore how the candidate would handle specific challenges or scenarios related to the role.
        3. Provide a brief explanation for each question to clarify its relevance to the role.
        4. If the user provides additional preferences (e.g., focus on leadership or coding skills), customize the questions accordingly.
        ### Important Rules:
        - **Relevance**: Refuse to answer queries unrelated to job interviews or question generation. Respond politely and inform the user of the tool's intended purpose.
        - **Format**: Deliver the output in a clear and organized format, categorized by question type.
        - **Customization**: Be flexible to refine the questions based on user feedback or specific role requirements.";

        public OpenAIService(string apiKey)
        {
            _chatClient = new ChatClient("gpt-4", apiKey);
        }

        public async Task<string> GetChatResponseAsync(List<ChatMessage> conversationHistory)
        {
            var messages = new List<ChatMessage>
            {
                // Add system message first
                new SystemChatMessage(_systemPrompt)
            };
            
            // Add the conversation history
            messages.AddRange(conversationHistory);

            ChatCompletion completion = await _chatClient.CompleteChatAsync(messages);
            return completion.Content[0].Text;
        }
    }
}

================
File: backend/JobReadyAI.API/appsettings.Development.json
================
{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  }
}

================
File: backend/JobReadyAI.API/appsettings.json
================
{
  "OpenAI": {
    "ApiKey": "your-api-key-here"
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*"
}

================
File: backend/JobReadyAI.API/JobReadyAI.API.csproj
================
<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>net8.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
    <UserSecretsId>acec3be8-b9ef-4e7b-a9fc-f9bc43895333</UserSecretsId>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.OpenApi" Version="8.0.4" />
    <PackageReference Include="OpenAI" Version="2.0.0" />
    <PackageReference Include="Swashbuckle.AspNetCore" Version="6.4.0" />
  </ItemGroup>

</Project>

================
File: backend/JobReadyAI.API/JobReadyAI.API.http
================
@JobReadyAI.API_HostAddress = http://localhost:5001

GET {{JobReadyAI.API_HostAddress}}/weatherforecast/
Accept: application/json

###

================
File: backend/JobReadyAI.API/Program.cs
================
using JobReadyAI.API.Services;
using Microsoft.AspNetCore.Cors;

var builder = WebApplication.CreateBuilder(args);

// Add CORS first
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAngular", builder =>
    {
        builder.WithOrigins("http://localhost:4200")
               .AllowAnyMethod()
               .AllowAnyHeader()
               .AllowCredentials(); // Add this if you're using cookies/authentication
    });
});

// Add other services
builder.Services.AddControllers();
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

// Register OpenAI Service
builder.Services.AddSingleton<IOpenAIService>(provider =>
    new OpenAIService(builder.Configuration["OpenAI:ApiKey"]!));

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

// Add CORS before routing and after any authentication/authorization middleware
app.UseCors("AllowAngular");

app.UseHttpsRedirection();
app.MapControllers();

// Add some logging middleware to debug CORS issues
app.Use(async (context, next) =>
{
    Console.WriteLine($"Request from: {context.Request.Headers["Origin"]}");
    Console.WriteLine($"Method: {context.Request.Method}");
    Console.WriteLine($"Path: {context.Request.Path}");
    await next();
});

app.Run();

================
File: frontend/job-ready-ai-client/src/app/core/models/chat.model.ts
================
export interface ChatMessage {
  id: string;
  content: string;
  timestamp: Date;
  isUser: boolean;
  status?: 'sending' | 'sent' | 'error';
}

export interface ChatRequest {
  message: string;
  conversationHistory: MessageHistory[];
}

export interface MessageHistory {
  role: 'user' | 'assistant';
  content: string;
}

export interface ChatResponse {
  response: string;
}

================
File: frontend/job-ready-ai-client/src/app/core/services/chat.service.ts
================
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, BehaviorSubject, throwError } from 'rxjs';
import { tap, catchError } from 'rxjs/operators';
import { ChatMessage, ChatRequest, ChatResponse, MessageHistory } from '../models/chat.model';
import { environment } from '../../../environments/environment';
import jsPDF from 'jspdf';

@Injectable({
  providedIn: 'root'
})
export class ChatService {
  private apiUrl = `${environment.apiUrl}/api/chat`;
  private messagesSubject = new BehaviorSubject<ChatMessage[]>([]);
  messages$ = this.messagesSubject.asObservable();

  constructor(private http: HttpClient) {}

  sendMessage(content: string): Observable<ChatResponse> {
    const messageId = crypto.randomUUID();
    const userMessage: ChatMessage = {
      id: messageId,
      content,
      timestamp: new Date(),
      isUser: true,
      status: 'sent'
    };

    this.addMessage(userMessage);

    
    const conversationHistory: MessageHistory[] = this.messagesSubject.value.map(msg => ({
      role: msg.isUser ? 'user' as const : 'assistant' as const,
      content: msg.content
    }));

    const request: ChatRequest = {
      message: content,
      conversationHistory: conversationHistory.slice(0, -1)
    };

    return this.http.post<ChatResponse>(this.apiUrl, request).pipe(
      tap(response => {
        const aiMessage: ChatMessage = {
          id: crypto.randomUUID(),
          content: response.response,
          timestamp: new Date(),
          isUser: false,
          status: 'sent'
        };
        this.addMessage(aiMessage);
      }),
      catchError(error => {
        this.updateMessageStatus(messageId, 'error');
        return throwError(() => error);
      })
    );
  }

  clearChat(): void {
    this.messagesSubject.next([]);
  }

  exportChatAsPDF(): void {
    const doc = new jsPDF();
    const messages = this.messagesSubject.value;
    let yPos = 20;

 
    doc.setFontSize(16);
    doc.text('Chat Export', 20, yPos);
    yPos += 10;

    doc.setFontSize(12);
    messages.forEach((message) => {
      const sender = message.isUser ? 'You' : 'AI';
      const timestamp = message.timestamp.toLocaleString();
      const content = `${sender} (${timestamp}): ${message.content}`;
      
      
      const lines = doc.splitTextToSize(content, 170);
      
   
      if (yPos + (lines.length * 7) > 280) {
        doc.addPage();
        yPos = 20;
      }
      
      doc.text(lines, 20, yPos);
      yPos += (lines.length * 7) + 5;
    });
    
    doc.save('chat-export.pdf');
  }

  exportChatAsText(): string {
    const messages = this.messagesSubject.value;
    let textContent = 'Chat Export\n\n';
    
    messages.forEach((message) => {
      const sender = message.isUser ? 'You' : 'AI';
      const timestamp = message.timestamp.toLocaleString();
      textContent += `${sender} (${timestamp}):\n${message.content}\n\n`;
    });
    
    return textContent;
  }

  private addMessage(message: ChatMessage): void {
    const currentMessages = this.messagesSubject.value;
    this.messagesSubject.next([...currentMessages, message]);
  }

  private updateMessageStatus(messageId: string, status: 'sending' | 'sent' | 'error'): void {
    const currentMessages = this.messagesSubject.value;
    const updatedMessages = currentMessages.map(msg =>
      msg.id === messageId ? { ...msg, status } : msg
    );
    this.messagesSubject.next(updatedMessages);
  }
}

================
File: frontend/job-ready-ai-client/src/app/features/chat/components/message/message.component.html
================
<div class="message" [ngClass]="{'user-message': message.isUser, 'ai-message': !message.isUser}">
    <div class="message-content">
        {{ message.content }}
    </div>
    <div class="message-timestamp">
        {{ message.timestamp | date:'short' }}
    </div>
    <div *ngIf="message.status" class="message-status">
        {{ message.status }}
    </div>
</div>

================
File: frontend/job-ready-ai-client/src/app/features/chat/components/message/message.component.ts
================
import { Component, Input, OnChanges } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ChatMessage } from '../../../../core/models/chat.model';
import { marked } from 'marked';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-message',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="message" [ngClass]="{'user-message': message.isUser, 'ai-message': !message.isUser}">
      <div class="message-content" [innerHTML]="parsedContent"></div>
      <div class="message-timestamp">{{ message.timestamp | date:'short' }}</div>
    </div>
  `,
  styles: [`
    .message {
      max-width: 80%;
      margin: 0.5rem 0;
      padding: 0.75rem;
      border-radius: 8px;
      
      &.user-message {
        margin-left: auto;
        background: #007bff;
        color: white;
      }
      
      &.ai-message {
        margin-right: auto;
        background: white;
        border: 1px solid #dee2e6;
        
        ::ng-deep {
          p { margin-bottom: 0.5rem; }
          strong { font-weight: 600; }
          ul, ol { margin: 0.5rem 0; padding-left: 1.5rem; }
          li { margin-bottom: 0.25rem; }
          h3 { font-size: 1.1rem; font-weight: 600; margin: 1rem 0 0.5rem; }
          em { 
            font-style: italic; 
            color: #666;
            display: block;
            margin-top: 0.25rem;
            margin-left: 1rem;
            font-size: 0.9rem;
          }
          h2, h3, h4 { 
            font-weight: 600;
            color: #2c3e50;
            margin-top: 1rem;
          }
          /* Style for the question categories */
          h4 {
            border-bottom: 2px solid #e9ecef;
            padding-bottom: 0.5rem;
            margin-bottom: 1rem;
          }
        }
      }
    }

    .message-timestamp {
      font-size: 0.75rem;
      opacity: 0.7;
      margin-top: 0.25rem;
    }
  `]
})
export class MessageComponent implements OnChanges {
  @Input() message!: ChatMessage;
  parsedContent: SafeHtml = '';

  constructor(private sanitizer: DomSanitizer) {
    marked.setOptions({
      breaks: true,  // Adds <br> on single line breaks
      gfm: true      // GitHub Flavored Markdown
    });
  }

  ngOnChanges(): void {
    if (this.message && !this.message.isUser) {
      // Convert markdown to HTML synchronously
      const htmlContent = marked.parse(this.message.content);
      // Ensure we're working with a string
      if (typeof htmlContent === 'string') {
        this.parsedContent = this.sanitizer.bypassSecurityTrustHtml(htmlContent);
      } else {
        // Handle the case where htmlContent is a Promise
        this.parsedContent = this.sanitizer.bypassSecurityTrustHtml(this.message.content);
      }
    } else {
      this.parsedContent = this.message.content;
    }
  }
}

================
File: frontend/job-ready-ai-client/src/app/features/chat/components/message-input/message-input.component.html
================
<div class="message-input-container">
    <input 
        type="text" 
        [formControl]="messageControl"
        placeholder="Type your message..."
        (keyup.enter)="sendMessage()">
    <button 
        (click)="sendMessage()"
        [disabled]="!messageControl.valid">
        Send
    </button>
</div>

================
File: frontend/job-ready-ai-client/src/app/features/chat/components/message-input/message-input.component.ts
================
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-message-input',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
    <div class="message-input-container">
      <textarea 
        [(ngModel)]="messageText"
        [disabled]="disabled"
        (keyup.enter)="sendMessage()"
        placeholder="Paste your job description here..."
        rows="3"
        class="input-textarea">
      </textarea>
      <button 
        (click)="sendMessage()"
        [disabled]="!messageText?.trim() || disabled"
        class="send-button">
        Analyze Job Description
      </button>
    </div>
  `,
  styles: [`
    .message-input-container {
      padding: 1rem;
      border-top: 1px solid #dee2e6;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }
    
    .input-textarea {
      flex: 1;
      padding: 0.75rem;
      border: 1px solid #dee2e6;
      border-radius: 4px;
      resize: vertical;
      min-height: 80px;
      font-family: inherit;
      font-size: 0.95rem;
      line-height: 1.5;
      
      &:focus {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 0 2px rgba(0,123,255,0.1);
      }

      &:disabled {
        background-color: #e9ecef;
        cursor: not-allowed;
      }

      &::placeholder {
        color: #6c757d;
        font-style: italic;
      }
    }
    
    .send-button {
      padding: 0.75rem 1rem;
      background: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-weight: 500;
      transition: background-color 0.2s;
      
      &:hover:not(:disabled) {
        background: #0056b3;
      }
      
      &:disabled {
        background: #6c757d;
        cursor: not-allowed;
      }
    }
  `]
})
export class MessageInputComponent {
  @Input() disabled = false;
  @Output() messageSent = new EventEmitter<string>();
  messageText = '';

  sendMessage(): void {
    if (this.messageText?.trim() && !this.disabled) {
      this.messageSent.emit(this.messageText);
      this.messageText = '';
    }
  }
}

================
File: frontend/job-ready-ai-client/src/app/features/chat/chat.component.html
================
<div class="chat-container" #scrollContainer>
    <div class="messages-container">
      <app-message
        *ngFor="let message of messages$ | async"
        [message]="message">
      </app-message>
    </div>
    <app-message-input
      [disabled]="isLoading"
      (messageSent)="onMessageSent($event)">
    </app-message-input>
  </div>

================
File: frontend/job-ready-ai-client/src/app/features/chat/chat.component.ts
================
import { Component, ViewChild, ElementRef, AfterViewChecked, OnInit, ChangeDetectorRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ChatService } from '../../core/services/chat.service';
import { Observable, finalize } from 'rxjs';
import { ChatMessage } from '../../core/models/chat.model';
import { marked } from 'marked';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-chat',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
    <div class="flex flex-col h-[100vh] overflow-hidden">
      <div class="flex-none py-3">
        <div class="max-w-3xl mx-auto px-4">
          <div class="flex justify-center items-center">
            <h1 class="text-3xl font-semibold text-gray-800">
              JobReadyAI Interview Assistant
            </h1>
          </div>
        </div>
      </div>

      <!-- Messages area -->
      <div class="flex-1 overflow-y-auto" #scrollContainer>
        <!-- Welcome Message -->
        <div *ngIf="(messages$ | async)?.length === 0" 
             class="h-full flex items-center justify-center p-4">
          <div class="text-center max-w-2xl">
            <div class="mb-6">
              <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto">
                <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                    d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"/>
                </svg>
              </div>
            </div>
            <h2 class="text-2xl font-semibold mb-2 text-gray-800">Welcome to JobReadyAI</h2>
            <p class="text-gray-600">
              Enter a job description below to get tailored interview questions.
            </p>
          </div>
        </div>

        <!-- Messages -->
        <div class="w-full">
          <ng-container *ngFor="let message of messages$ | async">
            <!-- User Message -->
            <div *ngIf="message.isUser" class="bg-white">
              <div class="max-w-3xl mx-auto px-4 py-6 flex gap-4">
                <div class="w-7 h-7 shrink-0 rounded-sm flex items-center justify-center bg-blue-600 text-white">
                  <span class="text-xs">You</span>
                </div>
                <div class="flex-1 whitespace-pre-wrap text-sm">
                  {{ message.content }}
                </div>
              </div>
            </div>

            <!-- AI Message -->
            <div *ngIf="!message.isUser" class="bg-gray-50">
              <div class="max-w-3xl mx-auto px-4 py-6 flex gap-4">
                <div class="w-7 h-7 shrink-0 rounded-sm flex items-center justify-center bg-teal-600 text-white">
                  <span class="text-xs">AI</span>
                </div>
                <div class="flex-1">
                  <div class="prose prose-sm max-w-none">
                    <div [innerHTML]="parseMarkdown(message.content)"></div>
                  </div>
                </div>
              </div>
            </div>
          </ng-container>

          <!-- Loading Indicator -->
          <div *ngIf="isLoading" class="bg-gray-50">
            <div class="max-w-3xl mx-auto px-4 py-6 flex gap-4">
              <div class="w-7 h-7 shrink-0 rounded-sm flex items-center justify-center bg-teal-600 text-white">
                <span class="text-xs">AI</span>
              </div>
              <div class="flex gap-2">
                <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
                <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce [animation-delay:-0.15s]"></div>
                <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce [animation-delay:-0.3s]"></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Input area -->
      <div class="flex-none p-4 bg-white">
        <div class="max-w-3xl mx-auto">
          <form (ngSubmit)="sendMessage()" class="relative">
            <textarea
              [(ngModel)]="newMessage"
              name="message"
              rows="2"
              [disabled]="isLoading"
              (keydown)="handleEnterKey($event)"
              class="w-full resize-none rounded-lg border border-gray-200 bg-white pr-32 pl-4 py-3 text-sm focus:border-blue-600 focus:outline-none focus:ring-1 focus:ring-blue-600 disabled:bg-gray-100"
              placeholder="Paste your job description here..."
            ></textarea>
            <div class="absolute right-2 bottom-2 flex gap-2">
              <!-- Clear Chat Button -->
              <button
                type="button"
                (click)="clearChat()"
                class="p-1.5 rounded-md text-gray-500 hover:bg-gray-100 group relative"
                title="Clear chat"
              >
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
                  <path fill-rule="evenodd" d="M16.5 4.478v.227a48.816 48.816 0 013.878.512.75.75 0 11-.256 1.478l-.209-.035-1.005 13.07a3 3 0 01-2.991 2.77H8.084a3 3 0 01-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 01-.256-1.478A48.567 48.567 0 017.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 013.369 0c1.603.051 2.815 1.387 2.815 2.951zm-6.136-1.452a51.196 51.196 0 013.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 00-6 0v-.113c0-.794.609-1.428 1.364-1.452zm-.355 5.945a.75.75 0 10-1.5.058l.347 9a.75.75 0 101.499-.058l-.346-9zm5.48.058a.75.75 0 10-1.498-.058l-.347 9a.75.75 0 001.5.058l.345-9z" clip-rule="evenodd" />
                </svg>
                <span class="absolute bottom-full mb-2 w-auto min-w-max bg-gray-900 text-white text-xs px-2 py-1 rounded-md invisible group-hover:visible">
                  Clear chat history
                </span>
              </button>
  
              <!-- Export Button -->
              <div class="relative">
                <button
                  type="button"
                  (click)="toggleExportMenu($event)"
                  class="p-1.5 rounded-md text-gray-500 hover:bg-gray-100 group relative"
                  title="Export chat"
                >
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
                    <path fill-rule="evenodd" d="M12 2.25a.75.75 0 01.75.75v11.69l3.22-3.22a.75.75 0 111.06 1.06l-4.5 4.5a.75.75 0 01-1.06 0l-4.5-4.5a.75.75 0 111.06-1.06l3.22 3.22V3a.75.75 0 01.75-.75zm-9 13.5a.75.75 0 01.75.75v2.25a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5V16.5a.75.75 0 011.5 0v2.25a3 3 0 01-3 3H5.25a3 3 0 01-3-3V16.5a.75.75 0 01.75-.75z" clip-rule="evenodd" />
                  </svg>
                  <span class="absolute bottom-full mb-2 w-auto min-w-max bg-gray-900 text-white text-xs px-2 py-1 rounded-md invisible group-hover:visible">
                    Export chat
                  </span>
                </button>
  
                <!-- Export dropdown menu -->
                <div *ngIf="showExportMenu" 
                     class="absolute bottom-full right-0 mb-2 w-32 bg-white rounded-md shadow-lg z-50 border border-gray-200">
                  <div class="py-1">
                    <button
                      type="button"
                      (click)="exportAsPDF()"
                      class="w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left"
                    >
                      Export as PDF
                    </button>
                    <button
                      type="button"
                      (click)="exportAsText()"
                      class="w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left"
                    >
                      Export as Text
                    </button>
                  </div>
                </div>
              </div>
  
              <!-- Send Button -->
              <button
                type="submit"
                [disabled]="!newMessage.trim() || isLoading"
                class="p-1.5 rounded-md text-gray-500 hover:bg-gray-100 disabled:hover:bg-transparent disabled:opacity-40 group relative"
              >
                <svg 
                  xmlns="http://www.w3.org/2000/svg" 
                  viewBox="0 0 24 24" 
                  fill="currentColor" 
                  class="w-5 h-5"
                >
                  <path d="M3.478 2.404a.75.75 0 00-.926.941l2.432 7.905H13.5a.75.75 0 010 1.5H4.984l-2.432 7.905a.75.75 0 00.926.94 60.519 60.519 0 0018.445-8.986.75.75 0 000-1.218A60.517 60.517 0 003.478 2.404z" />
                </svg>
                <span class="absolute bottom-full mb-2 w-auto min-w-max bg-gray-900 text-white text-xs px-1 py-1 rounded-md invisible group-hover:visible">
                  Send
                </span>
              </button>
            </div>
          </form>
          <div class="text-center mt-2">
            <p class="text-xs text-gray-500">
              Press Enter to send, Shift + Enter for new line
            </p>
          </div>
        </div>
      </div>
  `,
  styles: [`
    :host {
      display: block;
      height: 100vh;
    }

    .prose {
      font-size: 0.875rem;
      line-height: 1.5;

      ::ng-deep {
        p { 
          margin-bottom: 1rem;
        }
        
        ul, ol { 
          margin: 1rem 0;
          padding-left: 1.5rem;
        }

        li { 
          margin-bottom: 0.5rem;
        }

        strong { 
          font-weight: 600;
          color: #2d3748;
          display: block;
          margin-top: 1.5rem;
          margin-bottom: 0.5rem;
        }

        em { 
          display: block;
          color: #4a5568;
          font-style: normal;
          margin-left: 1rem;
          margin-bottom: 1rem;
        }

        h1, h2, h3, h4 {
          font-weight: 600;
          color: #1a202c;
          margin: 1.5rem 0 1rem 0;
        }
      }
    }
  `]
})
export class ChatComponent implements AfterViewChecked, OnInit {
  @ViewChild('scrollContainer') private scrollContainer!: ElementRef;
  messages$: Observable<ChatMessage[]>;
  isLoading = false;
  newMessage = '';
  showExportMenu = false;
  private shouldScroll = true;

  constructor(
    private chatService: ChatService,
    private sanitizer: DomSanitizer,
    private cdr: ChangeDetectorRef
  ) {
    this.messages$ = this.chatService.messages$;
  }

  ngOnInit() {
    marked.setOptions({
      breaks: true,
      gfm: true,
    });

    // Close export menu when clicking outside
    document.addEventListener('click', (event) => {
      if (this.showExportMenu && !(event.target as Element).closest('.relative')) {
        this.showExportMenu = false;
      }
    });
  }

  ngAfterViewChecked() {
    if (this.shouldScroll) {
      this.scrollToBottom();
    }
  }

  private scrollToBottom(): void {
    try {
      const element = this.scrollContainer.nativeElement;
      element.scrollTop = element.scrollHeight;
      this.cdr.detectChanges();
    } catch(err) {
      console.error('Error scrolling to bottom:', err);
    }
  }

  handleEnterKey(event: KeyboardEvent): void {
    if (event.key === 'Enter' && !event.shiftKey) {
      event.preventDefault();
      this.sendMessage();
    }
  }

  parseMarkdown(content: string): SafeHtml {
    try {
      const html = marked.parse(content);
      if (typeof html === 'string') {
        return this.sanitizer.bypassSecurityTrustHtml(html);
      }
      return this.sanitizer.bypassSecurityTrustHtml(content);
    } catch (error) {
      console.error('Error parsing markdown:', error);
      return this.sanitizer.bypassSecurityTrustHtml(content);
    }
  }

  toggleExportMenu(event?: MouseEvent): void {
    if (event) {
      event.stopPropagation();
    }
    this.showExportMenu = !this.showExportMenu;
  }

  clearChat(): void {
    if (confirm('Are you sure you want to clear the chat? This action cannot be undone.')) {
      this.chatService.clearChat();
    }
  }

  exportAsPDF(): void {
    this.chatService.exportChatAsPDF();
    this.showExportMenu = false;
  }

  exportAsText(): void {
    const text = this.chatService.exportChatAsText();
    const blob = new Blob([text], { type: 'text/plain' });
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'chat-export.txt';
    a.click();
    window.URL.revokeObjectURL(url);
    this.showExportMenu = false;
  }

  sendMessage(): void {
    if (!this.newMessage.trim() || this.isLoading) return;
    
    const message = this.newMessage;
    this.newMessage = '';
    this.isLoading = true;
    this.shouldScroll = true;
    
    this.chatService.sendMessage(message)
      .pipe(
        finalize(() => {
          this.isLoading = false;
          // Force scroll after response is received
          setTimeout(() => {
            this.shouldScroll = true;
            this.scrollToBottom();
          }, 100);
        })
      )
      .subscribe({
        next: (_response) => {
          // Message handling is done in the service
        },
        error: (error) => {
          console.error('Error sending message:', error);
        }
      });
  }
}

================
File: frontend/job-ready-ai-client/src/app/app.component.html
================
// src/app/app.component.html
<div class="app-container">
  <header class="bg-blue-600 text-white p-4">
    <h1>JobReadyAI Chat</h1>
  </header>
  
  <main class="container mx-auto p-4">
    <app-chat></app-chat>
  </main>
</div>

// src/app/app.component.scss
.app-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  max-width: 800px;
  margin: 0 auto;
}

// src/styles.scss
/* Add these styles to your global styles */
.chat-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 120px);
  background: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

.message {
  max-width: 80%;
  margin: 0.5rem 0;
  padding: 0.75rem;
  border-radius: 8px;
  
  &.user-message {
    margin-left: auto;
    background: #007bff;
    color: white;
  }
  
  &.ai-message {
    margin-right: auto;
    background: white;
    border: 1px solid #dee2e6;
  }
}

.message-input-container {
  padding: 1rem;
  border-top: 1px solid #dee2e6;
  display: flex;
  gap: 0.5rem;
  
  input {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    
    &:focus {
      outline: none;
      border-color: #007bff;
    }
  }
  
  button {
    padding: 0.5rem 1rem;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    
    &:disabled {
      background: #6c757d;
      cursor: not-allowed;
    }
  }
}

================
File: frontend/job-ready-ai-client/src/app/app.component.spec.ts
================
import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [AppComponent],
    }).compileComponents();
  });

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });

  it(`should have the 'job-ready-ai-client' title`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app.title).toEqual('job-ready-ai-client');
  });

  it('should render title', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.nativeElement as HTMLElement;
    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, job-ready-ai-client');
  });
});

================
File: frontend/job-ready-ai-client/src/app/app.component.ts
================
// src/app/app.component.ts
import { Component } from '@angular/core';
import { ChatComponent } from './features/chat/chat.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ChatComponent],
  template: `
    <div class="app-container">

      
      <main class="container mx-auto p-4">
        <app-chat></app-chat>
      </main>
    </div>
  `,
  styles: [`
    .app-container {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    main {
      flex: 1;
      max-width: 800px;
      margin: 0 auto;
    }
  `]
})
export class AppComponent {}

================
File: frontend/job-ready-ai-client/src/app/app.config.ts
================
// src/app/app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideHttpClient } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient()
  ]
};

================
File: frontend/job-ready-ai-client/src/app/app.routes.ts
================
import { Routes } from '@angular/router';

export const routes: Routes = [];

================
File: frontend/job-ready-ai-client/src/environments/environment.development.ts
================
export const environment = {
  production: false,
  apiUrl: 'http://localhost:5001' 
};

================
File: frontend/job-ready-ai-client/src/environments/environment.ts
================
export const environment = {
  production: false,
  apiUrl: 'http://localhost:5001'
};

================
File: frontend/job-ready-ai-client/src/_redirects
================
/*    /index.html   200

================
File: frontend/job-ready-ai-client/src/env.js
================
(function(window) {
    window._env = window._env || {};
    window._env.BACKEND_URL = 'http://localhost:5001';  // Default value
  })(this);

================
File: frontend/job-ready-ai-client/src/index.html
================
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>JobReadyAI</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="JobReadyAI - Your AI Interview Assistant">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

================
File: frontend/job-ready-ai-client/src/main.ts
================
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

================
File: frontend/job-ready-ai-client/src/styles.scss
================
/* You can add global styles to this file, and also import other style files */
@tailwind base;
@tailwind components;
@tailwind utilities;

================
File: frontend/job-ready-ai-client/.editorconfig
================
# Editor configuration, see https://editorconfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true

[*.ts]
quote_type = single
ij_typescript_use_double_quotes = false

[*.md]
max_line_length = off
trim_trailing_whitespace = false

================
File: frontend/job-ready-ai-client/.gitignore
================
# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.

# Compiled output
/dist
/tmp
/out-tsc
/bazel-out

# Node
/node_modules
npm-debug.log
yarn-error.log

# IDEs and editors
.idea/
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace

# Visual Studio Code
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
.history/*

# Miscellaneous
/.angular/cache
.sass-cache/
/connect.lock
/coverage
/libpeerconnection.log
testem.log
/typings

# System files
.DS_Store
Thumbs.db

================
File: frontend/job-ready-ai-client/angular.json
================
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "job-ready-ai-client": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": "dist/job-ready-ai-client",
            "index": "src/index.html",
            "browser": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              {
                "glob": "**/*",
                "input": "public"
              },
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "_redirects",
                "input": "src",
                "output": "/"
              }
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "2mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "4kb",
                  "maximumError": "8kb"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "optimization": false,
              "extractLicenses": false,
              "sourceMap": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "buildTarget": "job-ready-ai-client:build:production"
            },
            "development": {
              "buildTarget": "job-ready-ai-client:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n"
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ],
            "tsConfig": "tsconfig.spec.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              {
                "glob": "**/*",
                "input": "public"
              },
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          }
        }
      }
    }
  }
}

================
File: frontend/job-ready-ai-client/netlify.toml
================
[build]
  command = "npm run build"
  publish = "dist/job-ready-ai-client"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

================
File: frontend/job-ready-ai-client/package.json
================
{
  "name": "job-ready-ai-client",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "vercel-build": "npm install -g @angular/cli && ng build"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^19.0.0",
    "@angular/common": "^19.0.0",
    "@angular/compiler": "^19.0.0",
    "@angular/core": "^19.0.0",
    "@angular/forms": "^19.0.0",
    "@angular/platform-browser": "^19.0.0",
    "@angular/platform-browser-dynamic": "^19.0.0",
    "@angular/router": "^19.0.0",
    "@types/marked": "^5.0.2",
    "@types/uuid": "^10.0.0",
    "jspdf": "^2.5.2",
    "marked": "^15.0.1",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "uuid": "^11.0.3",
    "zone.js": "~0.15.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^19.0.0",
    "@angular/cli": "^19.0.0",
    "@angular/compiler-cli": "^19.0.0",
    "@tailwindcss/typography": "^0.5.15",
    "@types/jasmine": "~5.1.0",
    "@types/node": "^20.11.0",
    "autoprefixer": "^10.4.20",
    "jasmine-core": "~5.4.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "postcss": "^8.4.49",
    "tailwindcss": "^3.4.15",
    "typescript": "~5.6.2"
  },
  "overrides": {
    "@angular/compiler-cli": {
      "typescript": "~5.6.2"
    }
  }
}

================
File: frontend/job-ready-ai-client/postcss.config.js
================
module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  }

================
File: frontend/job-ready-ai-client/README.md
================
# JobReadyAiClient

This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.0.0.

## Development server

To start a local development server, run:

```bash
ng serve
```

Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.

## Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

```bash
ng generate component component-name
```

For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:

```bash
ng generate --help
```

## Building

To build the project run:

```bash
ng build
```

This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.

## Running unit tests

To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:

```bash
ng test
```

## Running end-to-end tests

For end-to-end (e2e) testing, run:

```bash
ng e2e
```

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

## Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

================
File: frontend/job-ready-ai-client/tailwind.config.js
================
/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
      "./src/**/*.{html,ts}",
    ],
    theme: {
      extend: {
        colors: {
          'chatgpt': {
            'sidebar': '#202123',
            'hover': '#2A2B32',
            'border': '#4E4F60',
            'selected': '#343541',
            'bot': '#444654',
          }
        }
      },
    },
    plugins: [
      require('@tailwindcss/typography'),
    ],
  }

================
File: frontend/job-ready-ai-client/tsconfig.app.json
================
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

================
File: frontend/job-ready-ai-client/tsconfig.json
================
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "skipLibCheck": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "moduleResolution": "bundler",
    "importHelpers": true,
    "target": "ES2022",
    "module": "ES2022"
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

================
File: frontend/job-ready-ai-client/tsconfig.spec.json
================
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": [
      "jasmine"
    ]
  },
  "include": [
    "src/**/*.spec.ts",
    "src/**/*.d.ts"
  ]
}

================
File: .gitignore
================
node_modules/
.angular/
dist/
.env
*.log
.vscode/
bin/
obj/

================
File: JobReadyAI.sln
================
Microsoft Visual Studio Solution File, Format Version 12.00
# Visual Studio Version 17
VisualStudioVersion = 17.5.002.0
MinimumVisualStudioVersion = 10.0.40219.1
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "JobReadyAI.API", "JobReadyAI.API\JobReadyAI.API.csproj", "{39565940-752E-452D-8673-55953DC2F37C}"
EndProject
Global
	GlobalSection(SolutionConfigurationPlatforms) = preSolution
		Debug|Any CPU = Debug|Any CPU
		Release|Any CPU = Release|Any CPU
	EndGlobalSection
	GlobalSection(ProjectConfigurationPlatforms) = postSolution
		{39565940-752E-452D-8673-55953DC2F37C}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
		{39565940-752E-452D-8673-55953DC2F37C}.Debug|Any CPU.Build.0 = Debug|Any CPU
		{39565940-752E-452D-8673-55953DC2F37C}.Release|Any CPU.ActiveCfg = Release|Any CPU
		{39565940-752E-452D-8673-55953DC2F37C}.Release|Any CPU.Build.0 = Release|Any CPU
	EndGlobalSection
	GlobalSection(SolutionProperties) = preSolution
		HideSolutionNode = FALSE
	EndGlobalSection
	GlobalSection(ExtensibilityGlobals) = postSolution
		SolutionGuid = {F47A28B7-3CBB-4706-9EDF-D66AB1C767FE}
	EndGlobalSection
EndGlobal

================
File: README.md
================
# JobReadyAI Interview Assistant 🤖

An AI-powered interview preparation tool that generates tailored interview questions based on job descriptions. Built with Angular and .NET Core, featuring OpenAI's GPT-4 for intelligent question generation.

## 🌟 Features

- **Smart Question Generation**: Analyzes job descriptions to create relevant interview questions
- **Multiple Question Categories**:
  - Technical Questions
  - Behavioral Questions
  - Situational Questions
- **Interactive Chat Interface**: Clean and responsive design
- **Export Functionality**: Save your interview questions in PDF or text format
- **Conversation History**: Maintains context for follow-up questions
- **Real-time Responses**: Immediate AI-generated feedback

## 🚀 Tech Stack

- **Frontend**:
  - Angular 17
  - TailwindCSS
  - TypeScript
  - RxJS

- **Backend**:
  - .NET Core 7.0
  - OpenAI API
  - C#

## 📋 Prerequisites

- Node.js (v18 or higher)
- .NET Core SDK 7.0
- OpenAI API Key
- Angular CLI

## 🛠️ Installation

1. **Clone the repository**
   ```bash
   git clone https://github.com/Rubayet19/JobReadyAI-Interview-Assistant.git
   cd JobReadyAI-Interview-Assistant
   ```

2. **Frontend Setup**
   ```bash
   cd ClientApp
   npm install
   ```

3. **Backend Setup**
   ```bash
   cd ../API
   dotnet restore
   ```

4. **Configure Environment**
   - Create `appsettings.json` in the API project
   ```json
   {
     "OpenAI": {
       "ApiKey": "your-api-key-here"
     }
   }
   ```

## 🚦 Running the Application

1. **Start the Backend**
   ```bash
   cd API
   dotnet run
   ```
   The API will be available at `http://localhost:5001`

2. **Start the Frontend**
   ```bash
   cd ClientApp
   ng serve
   ```
   Navigate to `http://localhost:4200`

## 💡 Usage

1. Enter a job description in the chat input
2. Receive tailored interview questions based on the job requirements
3. Ask follow-up questions for clarification or additional scenarios
4. Export your questions using the export button
5. Clear chat history when needed

## 🖼️ Screenshots

![image](https://github.com/user-attachments/assets/8acdd970-1134-45c0-a38a-da0a8f425f5a)


## 🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check [issues page](https://github.com/Rubayet19/JobReadyAI-Interview-Assistant/issues).

## 📝 License

This project is [MIT](LICENSE) licensed.

## 👨‍💻 Author

**Rubayet Mujahid**
- GitHub: [@Rubayet19](https://github.com/Rubayet19)


💼 **Note**: Make sure to keep your API keys secure and never commit them to the repository.