fix: improve AI config UI and shop selector behavior

- Remove knowledge base section from AI config page
- Keep AI configuration menu open when submenu is selected
- Fix shop selector not updating content on website-content page
- Improve navigation state management for AI submenu pages

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

shopcall.ai-main/src/components/AIConfigContent.tsx

@@ -7,7 +7,7 @@ import { Textarea } from "@/components/ui/textarea";
 import { Switch } from "@/components/ui/switch";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Badge } from "@/components/ui/badge";
-import { Mic, MessageSquare, Brain, Zap, Store, ChevronDown, Loader2 } from "lucide-react";
+import { Mic, MessageSquare, Store, Loader2 } from "lucide-react";
 import { useState, useEffect } from "react";
 import { API_URL } from "@/lib/config";
 import { useToast } from "@/hooks/use-toast";
@@ -402,65 +402,6 @@ export function AIConfigContent() {
             </div>
           </CardContent>
         </Card>
-
-        <Card className="bg-slate-800 border-slate-700">
-          <CardHeader>
-            <div className="flex items-center gap-3">
-              <Brain className="w-6 h-6 text-cyan-500" />
-              <CardTitle className="text-white">{t('aiConfig.knowledgeBase.title')}</CardTitle>
-            </div>
-            <p className="text-slate-400">{t('aiConfig.knowledgeBase.subtitle')} {selectedStore.store_name || 'your store'}</p>
-          </CardHeader>
-          <CardContent className="space-y-6">
-            <div className="grid gap-4 md:grid-cols-3">
-              <div className="p-4 bg-slate-700/50 rounded-lg">
-                <div className="flex items-center justify-between mb-2">
-                  <h4 className="text-white font-medium">{t('aiConfig.knowledgeBase.productCatalog')}</h4>
-                  <Badge className={`${selectedStore.sync_status === 'completed' ? 'bg-green-500' : 'bg-slate-500'} text-white`}>
-                    {selectedStore.sync_status === 'completed' ? t('aiConfig.knowledgeBase.synced') : t('aiConfig.knowledgeBase.notSynced')}
-                  </Badge>
-                </div>
-                <p className="text-slate-400 text-sm">
-                  {selectedStore.alt_data?.last_sync_stats?.products?.synced || 0} {t('aiConfig.knowledgeBase.products')}
-                </p>
-                <p className="text-slate-500 text-xs capitalize">{t('aiConfig.knowledgeBase.autoSync')} {selectedStore.platform_name}</p>
-              </div>
-              <div className="p-4 bg-slate-700/50 rounded-lg">
-                <div className="flex items-center justify-between mb-2">
-                  <h4 className="text-white font-medium">{t('aiConfig.knowledgeBase.orders')}</h4>
-                  <Badge className={`${selectedStore.sync_status === 'completed' ? 'bg-green-500' : 'bg-slate-500'} text-white`}>
-                    {selectedStore.sync_status === 'completed' ? t('aiConfig.knowledgeBase.synced') : t('aiConfig.knowledgeBase.notSynced')}
-                  </Badge>
-                </div>
-                <p className="text-slate-400 text-sm">
-                  {selectedStore.alt_data?.last_sync_stats?.orders?.synced || 0} {t('aiConfig.knowledgeBase.ordersCount')}
-                </p>
-                <p className="text-slate-500 text-xs">{t('aiConfig.knowledgeBase.orderHistory')}</p>
-              </div>
-              <div className="p-4 bg-slate-700/50 rounded-lg">
-                <div className="flex items-center justify-between mb-2">
-                  <h4 className="text-white font-medium">{t('aiConfig.knowledgeBase.customers')}</h4>
-                  <Badge className={`${selectedStore.sync_status === 'completed' ? 'bg-green-500' : 'bg-slate-500'} text-white`}>
-                    {selectedStore.sync_status === 'completed' ? t('aiConfig.knowledgeBase.synced') : t('aiConfig.knowledgeBase.notSynced')}
-                  </Badge>
-                </div>
-                <p className="text-slate-400 text-sm">
-                  {selectedStore.alt_data?.last_sync_stats?.customers?.synced || 0} {t('aiConfig.knowledgeBase.customersCount')}
-                </p>
-                <p className="text-slate-500 text-xs">{t('aiConfig.knowledgeBase.customerDatabase')}</p>
-              </div>
-            </div>
-
-            <div className="flex gap-3">
-              <Button
-                className="bg-cyan-500 hover:bg-cyan-600 text-white"
-                onClick={() => window.location.href = `/manage-store-data?shop=${selectedStore.id}`}
-              >
-                {t('aiConfig.knowledgeBase.manageStoreData')}
-              </Button>
-            </div>
-          </CardContent>
-        </Card>
       </div>
     </div>
   );

shopcall.ai-main/src/components/AppSidebar.tsx

@@ -30,7 +30,14 @@ export function AppSidebar() {
   const currentPath = window.location.pathname;
   const { logout } = useAuth();
   const { selectedShop, setSelectedShop, stores, setStores } = useShop();
-  const [isAIMenuOpen, setIsAIMenuOpen] = useState(false);
+  // Keep AI menu open when on any AI submenu page
+  const aiMenuPaths = ['/ai-config', '/products', '/website-content'];
+  const [isAIMenuOpen, setIsAIMenuOpen] = useState(aiMenuPaths.includes(currentPath));
+
+  // Update AI menu state when path changes
+  useEffect(() => {
+    setIsAIMenuOpen(aiMenuPaths.includes(currentPath));
+  }, [currentPath]);
 
   // Fetch stores on component mount
   useEffect(() => {

shopcall.ai-main/src/components/ManageStoreDataContent.tsx

@@ -206,17 +206,22 @@ export function ManageStoreDataContent({ defaultTab }: ManageStoreDataContentPro
           const storesList = result.stores || [];
           setStores(storesList);
 
-          // Select store from URL parameter or first store
-          const shopId = searchParams.get('shop');
-          if (shopId) {
-            const store = storesList.find((s: StoreData) => s.id === shopId);
-            if (store) {
-              setSelectedStore(store);
+          // For dedicated pages (Products/Website Content), use global shop context
+          if (isDedicatedPage && selectedShop) {
+            setSelectedStore(selectedShop);
+          } else {
+            // For non-dedicated pages, select store from URL parameter or first store
+            const shopId = searchParams.get('shop');
+            if (shopId) {
+              const store = storesList.find((s: StoreData) => s.id === shopId);
+              if (store) {
+                setSelectedStore(store);
+              } else if (storesList.length > 0) {
+                setSelectedStore(storesList[0]);
+              }
             } else if (storesList.length > 0) {
               setSelectedStore(storesList[0]);
             }
-          } else if (storesList.length > 0) {
-            setSelectedStore(storesList[0]);
           }
         }
       } catch (error) {
@@ -232,7 +237,7 @@ export function ManageStoreDataContent({ defaultTab }: ManageStoreDataContentPro
     };
 
     fetchStores();
-  }, [searchParams, toast]);
+  }, [searchParams, toast, isDedicatedPage, selectedShop]);
 
   // Update selected store when global shop context changes (for dedicated pages)
   useEffect(() => {