ALwrity AI Blog Writer - Added Google Grounding UI Implementation

2025-09-18 18:45:53 +05:30
parent 9f13daf443
commit 4d153b292d
72 changed files with 11944 additions and 1526 deletions
--- a/frontend/src/components/BlogWriter/OutlineGenerator.tsx
+++ b/frontend/src/components/BlogWriter/OutlineGenerator.tsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import { useCopilotAction } from '@copilotkit/react-core';
+import { blogWriterApi, BlogResearchResponse } from '../../services/blogWriterApi';
+
+interface OutlineGeneratorProps {
+  research: BlogResearchResponse | null;
+  onTaskStart: (taskId: string) => void;
+  onPollingStart: (taskId: string) => void;
+}
+
+const useCopilotActionTyped = useCopilotAction as any;
+
+export const OutlineGenerator: React.FC<OutlineGeneratorProps> = ({
+  research,
+  onTaskStart,
+  onPollingStart
+}) => {
+  useCopilotActionTyped({
+    name: 'generateOutline',
+    description: 'Generate outline from research results using AI analysis',
+    parameters: [],
+    handler: async () => {
+      if (!research) return { success: false, message: 'No research yet. Please research a topic first.' };
+      
+      try {
+        // Start async outline generation
+        const { task_id } = await blogWriterApi.startOutlineGeneration({ research });
+        onTaskStart(task_id);
+        onPollingStart(task_id);
+        
+        return { 
+          success: true, 
+          message: `🧩 Outline generation started! Task ID: ${task_id}. Progress will be shown below.`,
+          task_id: task_id
+        };
+      } catch (error) {
+        console.error('Outline generation failed:', error);
+        const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+        
+        // Provide more specific error messages based on the error type
+        let userMessage = '❌ Outline generation failed. ';
+        if (errorMessage.includes('503') || errorMessage.includes('overloaded')) {
+          userMessage += 'The AI service is temporarily overloaded. Please try again in a few minutes.';
+        } else if (errorMessage.includes('timeout')) {
+          userMessage += 'The request timed out. Please try again.';
+        } else if (errorMessage.includes('Invalid outline structure')) {
+          userMessage += 'The AI generated an invalid response. Please try again with different research data.';
+        } else {
+          userMessage += `${errorMessage}. Please try again or contact support if the problem persists.`;
+        }
+        
+        return { 
+          success: false, 
+          message: userMessage
+        };
+      }
+    },
+    render: ({ status }: any) => {
+      console.log('generateOutline render called with status:', status);
+      if (status === 'inProgress' || status === 'executing') {
+        return (
+          <div style={{ 
+            padding: '16px', 
+            backgroundColor: '#f8f9fa', 
+            borderRadius: '8px',
+            border: '1px solid #e0e0e0',
+            margin: '8px 0'
+          }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '12px' }}>
+              <div style={{ 
+                width: '20px', 
+                height: '20px', 
+                border: '2px solid #388e3c',
+                borderTop: '2px solid transparent',
+                borderRadius: '50%',
+                animation: 'spin 1s linear infinite'
+              }} />
+              <h4 style={{ margin: 0, color: '#388e3c' }}>🧩 Generating Outline</h4>
+            </div>
+            <div style={{ fontSize: '14px', color: '#666', lineHeight: '1.5' }}>
+              <p style={{ margin: '0 0 8px 0' }}>• Analyzing research results and content angles...</p>
+              <p style={{ margin: '0 0 8px 0' }}>• Structuring content based on keyword analysis...</p>
+              <p style={{ margin: '0 0 8px 0' }}>• Creating logical flow and section hierarchy...</p>
+              <p style={{ margin: '0' }}>• Optimizing for SEO and reader engagement...</p>
+            </div>
+            <style>{`
+              @keyframes spin {
+                0% { transform: rotate(0deg); }
+                100% { transform: rotate(360deg); }
+              }
+            `}</style>
+          </div>
+        );
+      }
+      return null;
+    }
+  });
+
+  return null; // This component only provides the copilot action
+};
+
+export default OutlineGenerator;