src/components/AddQuestions.svelte

<script lang="ts">

  import { questions, nextStep, currentStep } from '../stores/appStore'

  import { parseDocument } from '../utils/documentParser'

  import { onMount, onDestroy } from 'svelte'

  

  let dragActive = false

  let questionText = ''

  let isProcessing = false

  let processingStatus = ''

  let uploadedFiles: File[] = []

  let currentMethod: 'paste' | 'upload' = 'upload'

  let extractedContent = ''

  let previousStep = $currentStep

  

  // Auto-clear functionality

  onMount(() => {

    // Clear questions when component mounts (page refresh)

    if ($questions.length > 0) {

      console.log('Clearing questions on component mount (page refresh)')

      clearAllQuestions()

    }

  })

  

  // Watch for step changes

  $: if ($currentStep !== previousStep && previousStep !== undefined) {

    if ($currentStep !== 2) { // If we're leaving step 2 (Add Questions)

      console.log('Clearing questions due to step change')

      clearAllQuestions()

    }

    previousStep = $currentStep

  }

  

  async function handleFileUpload(event: Event) {

    const target = event.target as HTMLInputElement

    if (target.files) {

      await processFiles(Array.from(target.files))

    }

  }

  

  async function processFiles(files: File[]) {

    isProcessing = true

    processingStatus = 'Processing RFP document...'

    uploadedFiles = [...uploadedFiles, ...files]

    

    try {

      for (const file of files) {

        processingStatus = `Extracting content from ${file.name}...`

        const content = await parseDocument(file)

        extractedContent = content

        

        processingStatus = 'Identifying questions in document...'

        // Enhanced question extraction

        const extractedQuestions = extractQuestions(content)

        

        questions.update(current => [...current, ...extractedQuestions])

        processingStatus = `Found ${extractedQuestions.length} questions in RFP document`

      }

    } catch (error) {

      console.error('Error processing files:', error)

      processingStatus = 'Error processing document. Please check format and try again.'

    } finally {

      setTimeout(() => {

        isProcessing = false

        processingStatus = ''

      }, 2000)

    }

  }

  

  function extractQuestions(content: string): any[] {

    const questions = []

    

    console.log('Original content:', content)

    

    // SIMPLE APPROACH: Just split by "number. " pattern

    // Remove any leading/trailing whitespace and normalize

    const cleanContent = content.trim()

    

    // Split using a simple approach - find all "number. " patterns

    const parts = cleanContent.split(/(?=\d+\.\s)/)

    

    console.log('Split parts:', parts)

    

    for (let i = 0; i < parts.length; i++) {

      const part = parts[i].trim()

      

      if (!part) continue

      

      // Extract the question number and text

      const match = part.match(/^(\d+)\.\s*(.+)$/)

      

      if (match) {

        const questionNumber = match[1]

        let questionText = match[2].trim()

        

        // Remove any trailing numbers that might be part of the next question

        questionText = questionText.replace(/\s+\d+\.\s*.*$/, '')

        

        console.log(`Extracted Q${questionNumber}: "${questionText}"`)

        

        if (questionText.length > 3) {

          questions.push({

            id: `q-split-${Date.now()}-${i}`,

            text: questionText,

            selected: true,

            priority: 'high' as const,

            source: 'split'

          })

        }

      }

    }

    

    // FALLBACK: If the above didn't work, try manual character-by-character parsing

    if (questions.length <= 1 && cleanContent.includes('1.') && cleanContent.includes('2.')) {

      console.log('Using fallback manual parsing...')

      questions.length = 0 // Clear any previous attempts

      

      const questionParts = []

      let currentQuestion = ''

      let i = 0

      

      while (i < cleanContent.length) {

        const char = cleanContent[i]

        const nextFew = cleanContent.substring(i, i + 10)

        

        // Check if we're at the start of a new question (digit followed by period and space)

        const questionStart = nextFew.match(/^(\d+)\.\s/)

        

        if (questionStart && currentQuestion.trim()) {

          // Save the previous question

          questionParts.push(currentQuestion.trim())

          currentQuestion = ''

        }

        

        currentQuestion += char

        i++

      }

      

      // Don't forget the last question

      if (currentQuestion.trim()) {

        questionParts.push(currentQuestion.trim())

      }

      

      console.log('Manual parsing result:', questionParts)

      

      // Process each part

      questionParts.forEach((part, index) => {

        const match = part.match(/^(\d+)\.\s*(.+)$/)

        if (match) {

          const questionText = match[2].trim()

          console.log(`Manual Q${match[1]}: "${questionText}"`)

          

          questions.push({

            id: `q-manual-${Date.now()}-${index}`,

            text: questionText,

            selected: true,

            priority: 'high' as const,

            source: 'manual'

          })

        }

      })

    }

    

    console.log(`Final result: ${questions.length} questions extracted`)

    return questions

  }

  

  function handleDrop(event: DragEvent) {

    event.preventDefault()

    dragActive = false

    

    if (event.dataTransfer?.files) {

      processFiles(Array.from(event.dataTransfer.files))

    }

  }

  

  function handleDragOver(event: DragEvent) {

    event.preventDefault()

    dragActive = true

  }

  

  function handleDragLeave() {

    dragActive = false

  }

  

  function addManualQuestion() {

    if (questionText.trim()) {

      // Use the extraction function to split multiple questions

      const extractedQuestions = extractQuestions(questionText.trim())

      

      if (extractedQuestions.length > 0) {

        // Add all extracted questions

        questions.update(current => [...current, ...extractedQuestions])

      } else {

        // Fallback: add as single question if extraction fails

        questions.update(current => [...current, {

          id: `manual-${Date.now()}`,

          text: questionText.trim(),

          selected: true,

          priority: 'high' as const,

          source: 'manual'

        }])

      }

      

      questionText = ''

    }

  }

  

  function removeFile(index: number) {

    uploadedFiles = uploadedFiles.filter((_, i) => i !== index)

  }

  

  function removeQuestion(id: string) {

    questions.update(current => current.filter(q => q.id !== id))

  }

  

  function clearAllQuestions() {

    questions.set([])

    uploadedFiles = []

    extractedContent = ''

    questionText = ''

  }

  

  function proceedToAnswers() {

    if ($questions.length > 0) {

      // Skip selection step and go directly to AI Processing (step 3)

      nextStep() // This will go to step 3 (AI Processing)

    }

  }

</script>

<div class="max-w-4xl mx-auto space-y-6">
  <!-- Method Selection -->
  <div class="bg-gray-800 border border-gray-600 rounded-lg p-6">
    <h2 class="text-xl font-semibold text-white mb-4">Add RFP Questions</h2>
    
    <div class="flex gap-4 mb-6">
      <button 

        class="px-4 py-2 rounded border {currentMethod === 'upload' ? 'bg-blue-500/20 border-blue-500 text-blue-300' : 'bg-gray-700 border-gray-600 text-gray-300'}"

        on:click={() => currentMethod = 'upload'}
      >
        Upload Document
      </button>
      <button 

        class="px-4 py-2 rounded border {currentMethod === 'paste' ? 'bg-blue-500/20 border-blue-500 text-blue-300' : 'bg-gray-700 border-gray-600 text-gray-300'}"

        on:click={() => currentMethod = 'paste'}
      >
        Manual Entry
      </button>
    </div>

    {#if currentMethod === 'upload'}
      <!-- File Upload Section -->
      <div class="space-y-4">
        <div

          class="border-2 border-dashed border-gray-600 rounded-lg p-8 text-center transition-colors bg-gray-800

          {dragActive ? 'border-blue-500 bg-blue-500/10' : 'hover:border-blue-500/50'}

          {isProcessing ? 'opacity-60' : ''}"

          on:drop={handleDrop}

          on:dragover={handleDragOver}

          on:dragleave={handleDragLeave}

        >
          {#if isProcessing}
            <div class="space-y-3">
              <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
              <p class="text-blue-400 font-medium">{processingStatus}</p>
              {#if processingStatus.includes('Found')}
                <div class="text-green-400 text-sm">✓ Processing complete</div>
              {/if}
            </div>
          {:else}
            <div class="space-y-3">
              <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
              <div>
                <p class="text-gray-200 font-medium">Drop RFP documents here</p>
                <p class="text-gray-400 text-sm">or</p>
                <label class="inline-block px-4 py-2 bg-blue-600 text-white rounded cursor-pointer hover:bg-blue-700">
                  Browse Files
                  <input type="file" class="hidden" accept=".pdf,.docx,.doc" multiple on:change={handleFileUpload}>
                </label>
              </div>
              <p class="text-xs text-gray-500">Supports PDF, DOCX, DOC files</p>
            </div>
          {/if}
        </div>

        <!-- Uploaded Files List -->
        {#if uploadedFiles.length > 0}
          <div class="bg-gray-700/50 rounded-lg p-4">
            <h3 class="font-medium text-gray-200 mb-3">Uploaded Documents</h3>
            <div class="space-y-2">
              {#each uploadedFiles as file, index}
                <div class="flex items-center justify-between bg-gray-800 p-3 rounded border border-gray-600">
                  <div class="flex items-center space-x-3">
                    <svg class="h-5 w-5 text-blue-400" fill="currentColor" viewBox="0 0 20 20">
                      <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd" />
                    </svg>
                    <div>
                      <p class="font-medium text-gray-200">{file.name}</p>
                      <p class="text-sm text-gray-400">{(file.size / 1024 / 1024).toFixed(2)} MB</p>
                    </div>
                  </div>
                  <button 

                    class="text-red-400 hover:text-red-300"

                    on:click={() => removeFile(index)}
                  >
                    Remove
                  </button>
                </div>
              {/each}
            </div>
          </div>
        {/if}
      </div>
    {:else}
      <!-- Manual Entry Section -->
      <div class="space-y-4">
        <div>
          <label class="block text-sm font-medium text-gray-200 mb-2">
            Enter Questions (one per line or numbered)
          </label>
          <textarea

            bind:value={questionText}

            placeholder="Example:

1. What is your company's experience with similar projects?

2. How do you ensure data security and compliance?

3. What is your implementation timeline?"

            class="w-full h-32 p-3 border border-gray-600 bg-gray-800 text-gray-100 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none placeholder-gray-500"

          />
        </div>
        
        <button

          on:click={addManualQuestion}

          disabled={!questionText.trim()}

          class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"

        >
          Add Question
        </button>
      </div>
    {/if}
  </div>

  <!-- Questions Preview -->
  {#if $questions.length > 0}
    <div class="bg-gray-800 border border-gray-600 rounded-lg p-6">
      <div class="flex items-center justify-between mb-4">
        <div>
          <h3 class="text-lg font-semibold text-white">Extracted Questions</h3>
          <p class="text-sm text-gray-400">{$questions.length} questions found</p>
        </div>
        
        <div class="flex items-center space-x-2">
          <button

            on:click={clearAllQuestions}

            class="px-3 py-1 bg-red-600 text-white text-sm rounded hover:bg-red-700 transition-colors"

            title="Clear all questions"

          >
            Clear All
          </button>
          <button

            on:click={proceedToAnswers}

            class="px-6 py-2 bg-green-600 text-white rounded hover:bg-green-700"

          >
            Generate AI Answers
          </button>
        </div>
      </div>
      
      <div class="space-y-3 max-h-96 overflow-y-auto">
        {#each $questions as question, index}
          <div class="border border-gray-600 bg-gray-700/50 rounded-lg p-4">
            <div class="flex items-start justify-between">
              <div class="flex-1">
                <div class="flex items-center space-x-2 mb-2">
                  <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-500/20 text-blue-300">
                    Q{index + 1}
                  </span>
                  {#if question.source}
                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-600 text-gray-300">
                      {question.source}
                    </span>
                  {/if}
                  <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium

                    {question.priority === 'high' ? 'bg-red-500/20 text-red-300' : 

                      question.priority === 'medium' ? 'bg-blue-500/20 text-blue-300' : 

                      'bg-green-500/20 text-green-300'}">
                    {question.priority}
                  </span>
                </div>
                <p class="text-gray-200">{question.text}</p>
              </div>
              <button

                on:click={() => removeQuestion(question.id)}
                class="ml-4 text-red-400 hover:text-red-300"
                title="Remove question"
              >
                ×
              </button>
            </div>
          </div>
        {/each}
      </div>
    </div>
  {/if}
</div>