Add info on Ask Fern side panel, restructure overview page (Ask Fern)

fern/products/ask-fern/ask-fern.yml

@@ -3,6 +3,8 @@ navigation:
     contents:
       - page: What is Ask Fern?
         path: ./pages/getting-started/what-is-ask-fern.mdx
+      - page: How it works
+        path: ./pages/getting-started/how-it-works.mdx
       - link: Customer showcase
         href: https://buildwithfern.com/showcase#ask-fern-customers
   - section: Configuration

fern/products/ask-fern/pages/getting-started/how-it-works.mdx

@@ -0,0 +1,56 @@
+---
+title: How Ask Fern works
+description: Learn how Ask Fern's RAG system transforms your documentation into an intelligent, searchable knowledge base with automatic indexing, semantic search, and AI-powered responses.
+---
+
+Ask Fern is a **Retrieval Augmented Generation (RAG)** system that appears as a side panel on your documentation site, transforming your documentation into an intelligent, searchable knowledge base.
+
+## Visual design and behavior
+
+Ask Fern appears as a resizable side panel on your documentation site. Users can drag to resize it or use the expand/minimize button to control their viewing experience.
+
+Key behaviors:
+- **Adaptive layout** – Seamlessly integrates with all [Fern Docs layouts](/docs/configuration/what-is-docs-yml#layout-configuration)
+- **Persistent navigation** – Side panel stays open as users browse different pages or click links provided by the AI responses
+- **Document-specific queries** – Users can ask questions about the current page through a dropdown option
+- **Mobile optimization** – Expands to full screen when users start typing on mobile devices
+
+The interface maintains your site's design language while providing a familiar chat experience that feels native to your documentation.
+
+## How it works
+
+The main parts of the Ask Fern system are:
+
+* **Content and code indexing** – Fern automatically processes your
+  documentation pages and Fern-generated SDK code, breaking them into semantic
+  chunks and converting each chunk into a vector using sentence embedding
+  models. They're stored in a database that serves as Ask Fern's search index. 
+* **Query processing** – When users ask questions, Ask Fern vectorizes their
+  query and searches the database to find the most relevant documentation and
+  code chunks.
+* **Response generation** – Ask Fern uses the retrieved chunks as context to
+  generate accurate answers with [citations](/ask-fern/features/citations) for the user. If the initial context isn't sufficient, it performs an additional keyword search. 
+
+<Accordion title="Architecture diagram">
+
+Each Ask Fern user query follows these steps:
+
+```mermaid
+sequenceDiagram
+  autonumber
+    participant U as User
+    participant C as /chat Endpoint
+    participant V as Documentation Database
+    participant A as Ask Fern
+
+    U->>C: Submit question via Ask Fern searchbox
+    C->>C: Convert query to vector
+    C->>V: Search for relevant chunks
+    V->>C: Return matching documents
+    C->>A: Send query + context
+    A->>V: Perform additional keyword search if needed
+    V->>A: Return additional chunks
+    A->>A: Generate response
+    A->>U: Return answer with citations
+```
+</Accordion>

fern/products/ask-fern/pages/getting-started/what-is-ask-fern.mdx

@@ -1,29 +1,29 @@
 ---
 title: What is Ask Fern?
-subtitle: Let your customers find answers in your documentation instantly. 
+description: Let your customers find answers in your documentation instantly. 
 ---
 
-<Note>Ask Fern is available on the [Pro plan](https://buildwithfern.com/pricing#Docs) of Fern Docs. Billing is by usage.</Note>
-
-## Overview
+Ask Fern is Fern's AI Search feature that indexes your documentation and provides an interface for your end users to ask questions and get answers. It appears as a side panel on your documentation site.
 
-<Frame caption="AI Search is accessed via the search bar, alongside keyword search.">
-<img src="../assets/search-modal.png" alt="Accessing AI Search" />
-</Frame>
+Ask Fern helps you:
 
-Ask Fern is Fern's AI Search feature that indexes your documentation and provides an interface for your users to ask questions and get answers. It helps our customers
+- **Reduce support burden** – Enable your users to quickly find answers in your documentation without contacting your support team.
+- **Accelerate user onboarding** – Help users integrate your product faster by surfacing relevant code samples and guides.
+- **Identify documentation gaps** – Understand where your docs need improvement through user search patterns and feedback.
 
-- **Decrease the time to find needed information** – Help users quickly locate crucial documentation without navigating through a maze of tabs and endpoints.
-- **Integrate your product faster** – Accelerate implementation with ready-to-use code samples that demonstrate practical applications.
-- **Surface where your docs have gaps** – Identify documentation weaknesses through user feedback and search patterns.
-
-<Frame caption="Users can ask questions and get support in an intuitive chat interface.">
-<img src="../assets/ask-ai-modal.png" alt="Preview of AI Search" />
-</Frame>
+<Note>Ask Fern is available on the [Pro plan](https://buildwithfern.com/pricing#Docs) of Fern Docs. Billing is by usage.</Note>
 
-## Features 
+## Get started
 
 <CardGroup cols={2}>
+  <Card 
+    title="How it works"
+    icon="regular lightbulb"
+    href="/learn/ask-fern/getting-started/how-it-works"
+  >
+    Learn about Ask Fern's interface, behavior, and technical architecture.
+  </Card>
+
   <Card 
     title="Custom prompting"
     icon="regular book-open"
@@ -32,9 +32,15 @@ Ask Fern is Fern's AI Search feature that indexes your documentation and provide
     Tailor Ask Fern behavior to your users' needs. 
   </Card>
 
+</CardGroup>
+
+## Features 
+
+<CardGroup cols={2}>
+
   <Card 
     title="Citations" 
-    icon="regular quote-right"
+    icon="fa-solid fa-quote-right"
     href="/learn/ask-fern/features/citations" 
     >
     Point users to the exact source of the answer. 
@@ -56,57 +62,4 @@ Ask Fern is Fern's AI Search feature that indexes your documentation and provide
     Add custom documents to Ask Fern. 
   </Card>
 
-  <Card 
-    title="Integration with Algolia" 
-    icon="regular plug"
-    href="/learn/docs/building-and-customizing-your-docs/search" 
-    >
-    Users can "Ask AI" or search your docs directly with Algolia. 
-  </Card>
-
-  <Card 
-    title="All-in-one platform" 
-    icon="regular fa-layer-group"
-    href="/learn/docs/getting-started/overview"
-  >
-    Create seamless UX by offering a one-stop-shop for all API questions. 
-  </Card>
-
-</CardGroup>
-
-##  How it works
-
-Ask Fern is a **Retrieval Augmented Generation (RAG)** system built on top of your documentation site that transforms your documentation into an intelligent, searchable knowledge base. The main parts of the Ask Fern system are:
-
-* **Content indexing** – Fern automatically processes your documentation pages,
-  breaking them into semantic chunks and converting each chunk into a vector
-  using sentence embedding models. They're stored in a database that serves as
-  Ask Fern's search index. 
-* **Query processing** – When users ask questions, Ask Fern vectorizes their
-  query and searches the database to find the most relevant documentation
-  chunks.
-* **Response generation** – Ask Fern uses the retrieved chunks as context to
-  generate accurate answers with [citations](/ask-fern/features/citations) for the user. If the initial context isn't sufficient, it performs an additional keyword search. 
-
-### Life of a query
-
-Each Ask Fern user query follows these steps:
-
-```mermaid
-sequenceDiagram
-  autonumber
-    participant U as User
-    participant C as /chat Endpoint
-    participant V as Documentation Database
-    participant A as Ask Fern
-
-    U->>C: Submit question via Ask Fern searchbox
-    C->>C: Convert query to vector
-    C->>V: Search for relevant chunks
-    V->>C: Return matching documents
-    C->>A: Send query + context
-    A->>V: Perform additional keyword search if needed
-    V->>A: Return additional chunks
-    A->>A: Generate response
-    A->>U: Return answer with citations
-```
+</CardGroup>