From aa5cee4951ea8a01ffab400d1219fb6c5e1b1efa Mon Sep 17 00:00:00 2001
From: Ashad Qureshi <ashad001sp@gmail.com>
Date: Wed, 11 Jun 2025 22:55:18 +0500
Subject: [PATCH] Custom Agnets now striclty to paid users only

---
 .gitignore                                    |  2 +-
 auto-analyst-backend/.gitignore               |  4 +-
 auto-analyst-backend/chat_database.db         |  3 +
 .../custom-agents/AgentListView.tsx           |  4 +-
 .../custom-agents/CustomAgentsSidebar.tsx     | 73 +++++++++++++++----
 .../custom-agents/TemplateListView.tsx        | 19 ++++-
 6 files changed, 81 insertions(+), 24 deletions(-)
 create mode 100644 auto-analyst-backend/chat_database.db

diff --git a/.gitignore b/.gitignore
index 0400e75c..a292cd68 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,5 +7,5 @@ terraform/.tfvars
 
 try*
 
-*.db
+*-2.db
 *_code*.py
\ No newline at end of file
diff --git a/auto-analyst-backend/.gitignore b/auto-analyst-backend/.gitignore
index 4e796d12..5f058853 100644
--- a/auto-analyst-backend/.gitignore
+++ b/auto-analyst-backend/.gitignore
@@ -11,8 +11,6 @@ venv/
 
 try*
 
-chat_database_temp.db
-
 logs/
 
 updated_code.py
@@ -27,7 +25,7 @@ migrations/
 alembic.ini
 
 
-*.db
+*-2.db
 
 schema*.md
 
diff --git a/auto-analyst-backend/chat_database.db b/auto-analyst-backend/chat_database.db
new file mode 100644
index 00000000..169301de
--- /dev/null
+++ b/auto-analyst-backend/chat_database.db
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:eba37409fcfd29b12a840c1a16aae4616c9a3a25edb89dc1746d23740a172607
+size 73728
diff --git a/auto-analyst-frontend/components/custom-agents/AgentListView.tsx b/auto-analyst-frontend/components/custom-agents/AgentListView.tsx
index 400368ca..73e4bb9e 100644
--- a/auto-analyst-frontend/components/custom-agents/AgentListView.tsx
+++ b/auto-analyst-frontend/components/custom-agents/AgentListView.tsx
@@ -123,8 +123,8 @@ export default function AgentListView({
         <div className="mb-4 p-3 bg-blue-50 border border-blue-200 rounded-lg">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-2">
-              <Power className="w-4 h-4 text-blue-600" />
-              <span className="text-sm font-medium text-blue-900">
+              <Power className="w-4 h-4 text-[#FF7F7F]" />
+              <span className="text-sm font-medium text-[#FF7F7F]">
                 Active Agents: {activeCount.active_count}/{activeCount.max_allowed}
               </span>
             </div>
diff --git a/auto-analyst-frontend/components/custom-agents/CustomAgentsSidebar.tsx b/auto-analyst-frontend/components/custom-agents/CustomAgentsSidebar.tsx
index 274c4c89..de1a7bba 100644
--- a/auto-analyst-frontend/components/custom-agents/CustomAgentsSidebar.tsx
+++ b/auto-analyst-frontend/components/custom-agents/CustomAgentsSidebar.tsx
@@ -120,11 +120,12 @@ export default function CustomAgentsSidebar({
 
   // Load agents when component mounts or user changes
   useEffect(() => {
+    // Load templates for all users (free users can browse but not use)
+    loadTemplateAgents()
+    
     // Only load custom agents if user has access
     if (customAgentsAccess.hasAccess) {
       loadCustomAgents()
-      // Only load templates if user has paid access (templates are part of custom agents feature)
-      loadTemplateAgents()
     }
   }, [refreshTrigger, customAgentsAccess.hasAccess, session])
 
@@ -562,10 +563,12 @@ export default function CustomAgentsSidebar({
           {!isCollapsed && (
             <>
               <Tabs value={activeTab} onValueChange={(value) => setActiveTab(value as any)} className="flex-1 flex flex-col min-h-0">
-                <TabsList className="grid w-full grid-cols-4 bg-gray-100 mx-3 mt-3 mb-2 flex-shrink-0">
+                <TabsList className={`grid w-full ${customAgentsAccess.hasAccess ? 'grid-cols-4' : 'grid-cols-3'} bg-gray-100 mx-3 mt-3 mb-2 flex-shrink-0`}>
                   <TabsTrigger value="list" className="text-xs">My Agents</TabsTrigger>
                   <TabsTrigger value="templates" className="text-xs">Templates</TabsTrigger>
-                  <TabsTrigger value="create" className="text-xs">Create New</TabsTrigger>
+                  {customAgentsAccess.hasAccess && (
+                    <TabsTrigger value="create" className="text-xs">Create New</TabsTrigger>
+                  )}
                   <TabsTrigger value="details" className="text-xs">
                     Details
                     {selectedAgent && (
@@ -575,14 +578,33 @@ export default function CustomAgentsSidebar({
                 </TabsList>
 
                 <TabsContent value="list" className="flex-1 min-h-0 overflow-hidden">
-                  <AgentListView
-                    agents={customAgents}
-                    onSelectAgent={handleSelectAgent}
-                    onDeleteAgent={handleDeleteAgent}
-                    onToggleActive={toggleAgentActiveStatus}
-                    getActiveCount={getActiveAgentsCount}
-                    refreshTrigger={refreshTrigger}
-                  />
+                  {customAgentsAccess.hasAccess ? (
+                    <AgentListView
+                      agents={customAgents}
+                      onSelectAgent={handleSelectAgent}
+                      onDeleteAgent={handleDeleteAgent}
+                      onToggleActive={toggleAgentActiveStatus}
+                      getActiveCount={getActiveAgentsCount}
+                      refreshTrigger={refreshTrigger}
+                    />
+                  ) : (
+                    <div className="p-4 h-full flex flex-col items-center justify-center text-center">
+                      <div className="max-w-sm">
+                        <Lock className="w-12 h-12 text-gray-400 mx-auto mb-4" />
+                        <h3 className="text-lg font-semibold text-gray-700 mb-2">Custom Agents - Premium Feature</h3>
+                        <p className="text-gray-500 text-sm mb-6">
+                          Create and manage your own specialized AI agents with custom instructions and behaviors.
+                        </p>
+                        <Button
+                          onClick={() => setShowPremiumUpgradeModal(true)}
+                          className="bg-gradient-to-r from-[#FF7F7F] to-[#FF6666] hover:from-[#FF6666] hover:to-[#E55555] text-white"
+                        >
+                          <Crown className="w-4 h-4 mr-2" />
+                          Upgrade to Premium
+                        </Button>
+                      </div>
+                    </div>
+                  )}
                 </TabsContent>
 
                 <TabsContent value="templates" className="flex-1 min-h-0 overflow-hidden">
@@ -606,10 +628,29 @@ export default function CustomAgentsSidebar({
                 </TabsContent>
 
                 <TabsContent value="create" className="flex-1 min-h-0 overflow-hidden">
-                  <CreateAgentForm
-                    onCreateAgent={handleCreateAgent}
-                    onValidateAgentName={validateAgentName}
-                  />
+                  {customAgentsAccess.hasAccess ? (
+                    <CreateAgentForm
+                      onCreateAgent={handleCreateAgent}
+                      onValidateAgentName={validateAgentName}
+                    />
+                  ) : (
+                    <div className="p-4 h-full flex flex-col items-center justify-center text-center">
+                      <div className="max-w-sm">
+                        <Lock className="w-12 h-12 text-gray-400 mx-auto mb-4" />
+                        <h3 className="text-lg font-semibold text-gray-700 mb-2">Create Agents - Premium Only</h3>
+                        <p className="text-gray-500 text-sm mb-6">
+                          Upgrade to create custom agents with AI-powered instruction generation.
+                        </p>
+                        <Button
+                          onClick={() => setShowPremiumUpgradeModal(true)}
+                          className="bg-gradient-to-r from-[#FF7F7F] to-[#FF6666] hover:from-[#FF6666] hover:to-[#E55555] text-white"
+                        >
+                          <Crown className="w-4 h-4 mr-2" />
+                          Upgrade to Premium
+                        </Button>
+                      </div>
+                    </div>
+                  )}
                 </TabsContent>
 
                 <TabsContent value="details" className="flex-1 min-h-0 overflow-hidden">
diff --git a/auto-analyst-frontend/components/custom-agents/TemplateListView.tsx b/auto-analyst-frontend/components/custom-agents/TemplateListView.tsx
index 438383e9..aab2c680 100644
--- a/auto-analyst-frontend/components/custom-agents/TemplateListView.tsx
+++ b/auto-analyst-frontend/components/custom-agents/TemplateListView.tsx
@@ -80,7 +80,11 @@ export default function TemplateListView({
           <span className="font-medium text-sm">Agent Templates</span>
         </div>
         <p className="text-xs text-gray-600 mb-3">
-          Professional templates you can use immediately. {!hasAccess && 'Upgrade to Premium to use these agents.'}
+          {hasAccess ? (
+            "Professional templates you can use immediately. Clone any template to create your own custom version."
+          ) : (
+            "Browse professional templates to see what's possible. Upgrade to Premium to clone and use these agents."
+          )}
         </p>
         
         {/* Search Input */}
@@ -176,7 +180,18 @@ export default function TemplateListView({
                               Clone
                             </Button>
                           ) : (
-                            <Lock className="w-4 h-4 text-gray-400 flex-shrink-0" />
+                            <Button
+                              size="sm"
+                              variant="outline"
+                              className="text-xs h-7 px-2 text-gray-500 cursor-not-allowed"
+                              onClick={(e) => {
+                                e.stopPropagation()
+                                onUpgradePrompt()
+                              }}
+                            >
+                              <Lock className="w-3 h-3 mr-1" />
+                              Upgrade
+                            </Button>
                           )}
                         </div>
                       </div>