[dev] [Marfuen] mariano/security-questionnaire-ui (#1762)

* refactor(security-questionnaire): reorganize imports and update header text

* chore(security-questionnaire): enhance auto-answer button and add error handling for unanswered questions

---------

Co-authored-by: Mariano Fuentes <marfuen98@gmail.com>

Author: github-actions[bot]

apps/app/src/app/(app)/[orgId]/security-questionnaire/components/QuestionnaireParser.tsx

@@ -1,9 +1,9 @@
 'use client';
 
+import { useQuestionnaireParser } from '../hooks/useQuestionnaireParser';
 import { QuestionnaireResults } from './QuestionnaireResults';
-import { QuestionnaireUpload } from './QuestionnaireUpload';
 import { QuestionnaireSidebar } from './QuestionnaireSidebar';
-import { useQuestionnaireParser } from '../hooks/useQuestionnaireParser';
+import { QuestionnaireUpload } from './QuestionnaireUpload';
 
 export function QuestionnaireParser() {
   const {
@@ -60,14 +60,14 @@ export function QuestionnaireParser() {
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-12">
           <div className="lg:col-span-2">
             <QuestionnaireUpload
-            selectedFile={selectedFile}
-            onFileSelect={handleFileSelect}
-            onFileRemove={() => setSelectedFile(null)}
-            onParse={handleParse}
-            isLoading={isLoading}
-            parseStatus={parseStatus}
-            orgId={orgId}
-          />
+              selectedFile={selectedFile}
+              onFileSelect={handleFileSelect}
+              onFileRemove={() => setSelectedFile(null)}
+              onParse={handleParse}
+              isLoading={isLoading}
+              parseStatus={parseStatus}
+              orgId={orgId}
+            />
           </div>
           <div className="lg:col-span-1">
             <QuestionnaireSidebar />
@@ -79,38 +79,36 @@ export function QuestionnaireParser() {
 
   return (
     <div className="flex flex-col gap-6">
-      <h1 className="text-xl lg:text-2xl font-semibold text-foreground">
-        Vendor Questionnaire
-      </h1>
+      <h1 className="text-xl lg:text-2xl font-semibold text-foreground">Security Questionnaire</h1>
       <QuestionnaireResults
-      orgId={orgId}
-      results={results}
-      filteredResults={filteredResults}
-      searchQuery={searchQuery}
-      onSearchChange={setSearchQuery}
-      editingIndex={editingIndex}
-      editingAnswer={editingAnswer}
-      onEditingAnswerChange={setEditingAnswer}
-      expandedSources={expandedSources}
-      questionStatuses={questionStatuses}
-      answeringQuestionIndex={answeringQuestionIndex}
-      hasClickedAutoAnswer={hasClickedAutoAnswer}
-      isLoading={isLoading}
-      isAutoAnswering={isAutoAnswering}
-      isExporting={isExporting}
-      showExitDialog={showExitDialog}
-      onShowExitDialogChange={setShowExitDialog}
-      onExit={confirmReset}
-      onAutoAnswer={handleAutoAnswer}
-      onAnswerSingleQuestion={handleAnswerSingleQuestion}
-      onEditAnswer={handleEditAnswer}
-      onSaveAnswer={handleSaveAnswer}
-      onCancelEdit={handleCancelEdit}
-      onExport={handleExport}
-      onToggleSource={handleToggleSource}
-      totalCount={totalCount}
-      answeredCount={answeredCount}
-      progressPercentage={progressPercentage}
+        orgId={orgId}
+        results={results}
+        filteredResults={filteredResults}
+        searchQuery={searchQuery}
+        onSearchChange={setSearchQuery}
+        editingIndex={editingIndex}
+        editingAnswer={editingAnswer}
+        onEditingAnswerChange={setEditingAnswer}
+        expandedSources={expandedSources}
+        questionStatuses={questionStatuses}
+        answeringQuestionIndex={answeringQuestionIndex}
+        hasClickedAutoAnswer={hasClickedAutoAnswer}
+        isLoading={isLoading}
+        isAutoAnswering={isAutoAnswering}
+        isExporting={isExporting}
+        showExitDialog={showExitDialog}
+        onShowExitDialogChange={setShowExitDialog}
+        onExit={confirmReset}
+        onAutoAnswer={handleAutoAnswer}
+        onAnswerSingleQuestion={handleAnswerSingleQuestion}
+        onEditAnswer={handleEditAnswer}
+        onSaveAnswer={handleSaveAnswer}
+        onCancelEdit={handleCancelEdit}
+        onExport={handleExport}
+        onToggleSource={handleToggleSource}
+        totalCount={totalCount}
+        answeredCount={answeredCount}
+        progressPercentage={progressPercentage}
       />
     </div>
   );

apps/app/src/app/(app)/[orgId]/security-questionnaire/components/QuestionnaireResultsHeader.tsx

@@ -135,43 +135,23 @@ export function QuestionnaireResultsHeader({
           </div>
 
           <div className="flex items-center gap-3">
-            <div className="relative">
-              {!hasClickedAutoAnswer && results.some((qa) => !qa.answer) && (
+            <Button
+              onClick={(e) => {
+                e.stopPropagation();
+                onAutoAnswer();
+              }}
+              disabled={isAutoAnswering || isLoading}
+              size="default"
+            >
+              {isAutoAnswering ? (
+                <Loader2 className="size-4 animate-spin" />
+              ) : (
                 <>
-                  <style
-                    dangerouslySetInnerHTML={{
-                      __html: `
-                      @keyframes ping-subtle {
-                        0%, 100% { transform: scale(1); opacity: 0.8; }
-                        60% { transform: scale(1.05); opacity: 0.5; }
-                      }
-                    `,
-                    }}
-                  />
-                  <span
-                    className="absolute -inset-0.5 rounded-xs bg-primary/10"
-                    style={{ animation: 'ping-subtle 2.5s ease-in-out infinite' }}
-                  />
+                  <Zap className="size-4" />
+                  Auto-Fill All
                 </>
               )}
-              <Button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onAutoAnswer();
-                }}
-                disabled={isAutoAnswering || isLoading}
-                size="default"
-              >
-                {isAutoAnswering ? (
-                  <Loader2 className="size-4 animate-spin" />
-                ) : (
-                  <>
-                    <Zap className="size-4" />
-                    Auto-Fill All
-                  </>
-                )}
-              </Button>
-            </div>
+            </Button>
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <Button variant="outline" size="default" disabled={isExporting || isLoading}>

apps/app/src/app/(app)/[orgId]/security-questionnaire/components/QuestionnaireResultsTable.tsx

@@ -100,6 +100,22 @@ export function QuestionnaireResultsTable({
                           <Loader2 className="h-4 w-4 animate-spin text-primary" />
                           <span className="text-sm text-muted-foreground">Finding answer...</span>
                         </div>
+                      ) : qa.failedToGenerate ? (
+                        <div className="flex items-center justify-between gap-4">
+                          <p className="text-sm text-muted-foreground italic">
+                            Could not find an answer
+                          </p>
+                          <Button
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              onEditAnswer(originalIndex);
+                            }}
+                            variant="outline"
+                            size="sm"
+                          >
+                            Write Answer
+                          </Button>
+                        </div>
                       ) : (
                         <div className="flex gap-2 justify-end">
                           <Button

apps/app/src/jobs/tasks/vendors/answer-question-helpers.ts

@@ -1,6 +1,6 @@
 import { findSimilarContent } from '@/lib/vector';
-import { logger } from '@trigger.dev/sdk';
 import { openai } from '@ai-sdk/openai';
+import { logger } from '@trigger.dev/sdk';
 import { generateText } from 'ai';
 
 export interface AnswerWithSources {
@@ -37,13 +37,16 @@ export async function generateAnswerWithRAG(
 
     // Extract sources information and deduplicate by sourceName
     // Multiple chunks from the same source (same policy/context) should appear as a single source
-    const sourceMap = new Map<string, {
-      sourceType: string;
-      sourceName?: string;
-      sourceId: string;
-      policyName?: string;
-      score: number;
-    }>();
+    const sourceMap = new Map<
+      string,
+      {
+        sourceType: string;
+        sourceName?: string;
+        sourceId: string;
+        policyName?: string;
+        score: number;
+      }
+    >();
 
     for (const result of similarContent) {
       // Generate sourceName first to use as deduplication key
@@ -55,12 +58,12 @@ export async function generateAnswerWithRAG(
       } else if (result.contextQuestion) {
         sourceName = 'Context Q&A';
       }
-      
+
       // Use sourceName as the unique key to prevent duplicates
       // For policies: same policy name = same source
       // For context: all context entries = single "Context Q&A" source
       const key = sourceName || result.sourceId;
-      
+
       // If we haven't seen this source, or this chunk has a higher score, use it
       const existing = sourceMap.get(key);
       if (!existing || result.score > existing.score) {
@@ -114,11 +117,13 @@ Your task is to answer questions based ONLY on the provided context from the org
 CRITICAL RULES:
 1. Answer based ONLY on the provided context. Do not make up facts or use general knowledge.
 2. If the context does not contain enough information to answer the question, respond with exactly: "N/A - no evidence found"
-3. Be concise and direct. Use enterprise-ready language.
-4. If multiple sources provide information, synthesize them into a coherent answer.
-5. Do not include disclaimers or notes about the source unless specifically relevant.
-6. Format your answer as a clear, professional response suitable for a vendor questionnaire.
-7. Always write in first person plural (we, our, us) as if speaking on behalf of the organization.`,
+3. BE CONCISE. Give SHORT, direct answers. Do NOT provide detailed explanations or elaborate unnecessarily.
+4. Use enterprise-ready language appropriate for vendor questionnaires.
+5. If multiple sources provide information, synthesize them into ONE concise answer.
+6. Do not include disclaimers or notes about the source unless specifically relevant.
+7. Format your answer as a clear, professional response suitable for a vendor questionnaire.
+8. Always write in first person plural (we, our, us) as if speaking on behalf of the organization.
+9. Keep answers to 1-3 sentences maximum unless the question explicitly requires more detail.`,
       prompt: `Based on the following context from our organization's policies and documentation, answer this question:
 
 Question: ${question}
@@ -149,4 +154,3 @@ Answer the question based ONLY on the provided context, using first person plura
     return { answer: null, sources: [] };
   }
 }
-