Move chatbot settings to dedicated sidebar section with submenu

- Add Chatbot submenu: Overview, Settings, Keywords, Flows, AI Contexts
- Create ChatbotSettingsView with tabs for Chatbot, Business Hours, and AI
- Add AllowAutomatedOutsideHours setting for 24/7 automated responses
- Remove chatbot/AI tabs from general Settings (now only General/Notifications)
- Update docs with new navigation structure and business hours documentation

Author: shridarpatil

docs/src/content/docs/features/chatbot.mdx

@@ -11,12 +11,22 @@ import { Card, CardGrid, Steps, Aside } from '@astrojs/starlight/components';
 
 Whatomate's chatbot automation allows you to create intelligent, automated responses for your WhatsApp messages. From simple keyword-based replies to complex AI-powered conversations, you have full control over how your business responds to customers.
 
+## Navigation
+
+The Chatbot section in the sidebar provides access to all chatbot features:
+
+- **Overview** - Dashboard with statistics and quick access to settings
+- **Settings** - Configure chatbot behavior, business hours, and AI
+- **Keywords** - Create keyword-based auto-responses
+- **Flows** - Design multi-step conversation flows
+- **AI Contexts** - Configure AI knowledge bases
+
 ## Chatbot Settings
 
-Configure global chatbot behavior including greeting and fallback messages.
+Configure global chatbot behavior including greeting messages, fallback messages, and session settings.
 
 ### Greeting Message
-The greeting message is automatically sent to new contacts when they first message your business. You can optionally add interactive buttons (up to 10) to guide users to common actions.
+The greeting message is automatically sent to new contacts when they first message your business (or after the session timeout expires). You can optionally add interactive buttons (up to 10) to guide users to common actions.
 
 ### Fallback Message
 When no keyword rules, AI contexts, or conversation flows match an incoming message, the fallback message is sent. Like the greeting message, you can add interactive buttons to help users navigate.
@@ -26,10 +36,45 @@ Both greeting and fallback messages support WhatsApp interactive buttons:
 - **1-3 buttons**: Displayed as quick reply buttons
 - **4-10 buttons**: Displayed as a list menu
 
+### Session Timeout
+Configure how long a session remains active. When a user messages again after the timeout, they receive the greeting message as if starting a new conversation.
+
 <Aside type="tip">
   Use buttons to guide users to common topics like "Track Order", "Speak to Agent", or "View Products".
 </Aside>
 
+## Business Hours
+
+Configure when your chatbot is active and how it behaves outside business hours.
+
+### Setting Up Business Hours
+
+<Steps>
+
+1. **Enable Business Hours**
+
+   Toggle the business hours feature on in the Business Hours tab.
+
+2. **Configure Daily Schedule**
+
+   For each day of the week:
+   - Enable or disable the day
+   - Set opening and closing times
+
+3. **Out of Hours Message**
+
+   Configure a message to send when customers contact you outside business hours.
+
+4. **Automated Responses Outside Hours**
+
+   Choose whether to allow flows, keywords, and AI responses to work 24/7 (enabled by default) or restrict them to business hours only.
+
+</Steps>
+
+<Aside type="tip">
+  Even with business hours enabled, you can allow automated flows and keyword responses to work around the clock. This is useful for handling common inquiries while still informing customers of your operating hours.
+</Aside>
+
 ## Keyword Rules
 
 ![Keyword Rules](/whatomate/images/03-keyword-rules.png)
@@ -68,21 +113,31 @@ Create automated responses triggered by specific keywords or phrases.
 
 </Steps>
 
-## AI Contexts
+## AI Settings
 
-![AI Contexts](/whatomate/images/05-ai-contexts.png)
+Configure AI-powered responses to handle queries that don't match keywords or flows.
 
-Enhance your chatbot with AI-powered responses using contexts that provide relevant information to the AI.
+### Enabling AI Responses
 
-### Creating an AI Context
+<Steps>
 
-![AI Context Editor](/whatomate/images/06-ai-context-editor.png)
+1. **Choose an AI Provider**
 
-AI Contexts allow you to:
-- Define static knowledge bases
-- Connect to external APIs for dynamic data
-- Set trigger keywords for context activation
-- Configure priority for multiple contexts
+   Select from OpenAI, Anthropic, or Google AI.
+
+2. **Select a Model**
+
+   Choose the model that best fits your needs and budget.
+
+3. **Configure API Key**
+
+   Enter your API key from the provider (stored securely and encrypted).
+
+4. **Set System Prompt**
+
+   Define how the AI should behave and what context it should use for responses.
+
+</Steps>
 
 ### Supported AI Providers
 
@@ -98,6 +153,22 @@ AI Contexts allow you to:
   </Card>
 </CardGrid>
 
+## AI Contexts
+
+![AI Contexts](/whatomate/images/05-ai-contexts.png)
+
+Enhance your chatbot with AI-powered responses using contexts that provide relevant information to the AI.
+
+### Creating an AI Context
+
+![AI Context Editor](/whatomate/images/06-ai-context-editor.png)
+
+AI Contexts allow you to:
+- Define static knowledge bases
+- Connect to external APIs for dynamic data
+- Set trigger keywords for context activation
+- Configure priority for multiple contexts
+
 ## Conversation Flows
 
 ![Conversation Flows](/whatomate/images/07-conversation-flows.png)
@@ -123,5 +194,7 @@ The visual flow builder allows you to:
 | **Variable Storage** | Store user inputs for later use in the conversation |
 | **Conditional Logic** | Branch based on user responses |
 | **API Integration** | Fetch data from external APIs during the flow |
+| **Webhook Headers** | Configure custom headers for API calls and completion webhooks |
 | **Agent Transfer** | Transfer to human agent when needed |
 | **WhatsApp Flows** | Integrate native WhatsApp Flows |
+| **Drag & Drop Ordering** | Reorder steps by dragging them to new positions |

frontend/src/components/layout/AppLayout.vue

@@ -56,6 +56,7 @@ const allNavItems = [
     roles: ['admin', 'manager'],
     children: [
       { name: 'Overview', path: '/chatbot', icon: Bot },
+      { name: 'Settings', path: '/chatbot/settings', icon: Settings },
       { name: 'Keywords', path: '/chatbot/keywords', icon: Key },
       { name: 'Flows', path: '/chatbot/flows', icon: Workflow },
       { name: 'AI Contexts', path: '/chatbot/ai', icon: Sparkles }

frontend/src/router/index.ts

@@ -78,6 +78,12 @@ const router = createRouter({
           component: () => import('@/views/chatbot/ChatbotView.vue'),
           meta: { roles: ['admin', 'manager'] }
         },
+        {
+          path: 'chatbot/settings',
+          name: 'chatbot-settings',
+          component: () => import('@/views/chatbot/ChatbotSettingsView.vue'),
+          meta: { roles: ['admin', 'manager'] }
+        },
         {
           path: 'chatbot/keywords',
           name: 'chatbot-keywords',