docs(TSP-1114): add filesystem browser documentation for Chat

docs.json

@@ -38,6 +38,7 @@
             "group": "Chat",
             "pages": [
               "get-started/chat/introduction",
+              "get-started/chat/project-files",
               {
                 "group": "Chat Agents",
                 "pages": [

get-started/chat/introduction.mdx

@@ -13,12 +13,12 @@
   Start chatting now at chat.relevanceai.com — works on desktop and mobile
 </Card>
 
 ## Using different LLMs in Chat
 
 You can select the LLM you want to use in Chat:
 
 <div style={{ width:"100%",position:"relative","padding-top":"56.75%"}}>
 <iframe src="https://app.supademo.com/embed/cmfgfi5x0bz4239ozw2fj4het" frameBorder="0" title="How to set up Google Drive as a source of Knowledge" allow="clipboard-write; fullscreen" webkitAllowFullscreen="true" mozAllowFullscreen="true" allowFullscreen style={{ position:"absolute",top:0,left:0,width:"100%",height:"100%",border:"3px solid #5E43CE",borderRadius:"10px" }} />
 </div>
 
 1. Click the name of the LLM you're currently on (or Auto if you've selected 'Auto' previously) in the top right of Chat
@@ -101,7 +101,7 @@
 Save any prompt from your Chat conversations to make it available to all users in your project through the @ menu.
 
 <div style={{ width:"100%",position:"relative","padding-top":"56.75%" }}>
 <iframe src="https://app.supademo.com/embed/cminu37g60bizgxadmuzniah7" frameBorder="0" title="How to save a prompt" allow="clipboard-write; fullscreen" webkitAllowFullscreen="true" mozAllowFullscreen="true" allowFullscreen style={{ position:"absolute",top:0,left:0,width:"100%",height:"100%",border:"3px solid #5E43CE",borderRadius:"10px" }} />
 </div>
 
 1. Start a new conversation and enter the prompt you want to save
@@ -148,6 +148,8 @@
 2. Browse the results — files appear alongside agents, workforces, and saved prompts, showing the file name and path
 3. Select a file to insert its file path into your message
 
+For a full guide to browsing and managing project files — including view options, folder navigation, and file operations — see [Project files](/get-started/chat/project-files).
+
 ---
 
 ## Providing Feedback on Responses
@@ -196,7 +198,7 @@
 
 ## Supported file types in Chat
 
 Chat empowers you to work with a wide range of file types, both for input and output. Upload documents, images, and data files to provide context to your conversations, and generate new files based on your Agent's responses or built-in Agent outputs. Whether you're analyzing spreadsheets, processing PDFs, or creating presentations, Chat seamlessly handles file operations across different model providers.
 
 Here's a comprehensive breakdown of supported file types by model provider:
 
@@ -330,7 +332,7 @@
         To monitor your Chat credit usage, navigate to **Settings > Plan & Billing** to see a detailed breakdown of your credit expenses. Learn more about [Plans and credits](/admin/subscriptions/plans).
         </Tip>
     </Accordion>
     <Accordion title="Can I use different LLMs in Chat?">
     Yes, you can select the LLM you want to use in Chat by following these steps:
 
     1. Click on the cog icon in the top right of your screen

get-started/chat/project-files.mdx

@@ -0,0 +1,72 @@
+---
+title: "Project files"
+sidebarTitle: "Project files"
+description: "Browse and manage files in your project's file system from the Chat interface"
+---
+
+The filesystem browser in Chat gives you a visual way to explore and manage files stored in your project. You can view folder hierarchies, perform file operations, and reference files directly in your chat messages using @.
+
+## Accessing the filesystem browser
+
+The filesystem browser appears in the right sidebar panel of Chat. To open it, select the **Files** tab in the SuperAgent panel on the right side of the Chat interface.
+
+---
+
+## View options
+
+The filesystem browser supports two layout modes so you can work in whichever format suits your task.
+
+### List view
+
+The default layout displays files and folders in a hierarchical tree structure. This view is useful for navigating deeply nested directories and seeing the full folder structure at a glance.
+
+### Grid view
+
+Grid view displays files as icon tiles in a Finder-style layout. Each tile shows the file icon and name, making it easier to visually scan a flat directory with many files.
+
+### Switching between views
+
+Use the toggle button in the filesystem browser toolbar to switch between list view and grid view. Your view choice is saved automatically and persists across sessions — the next time you open Chat, the filesystem browser will use the same layout you last selected.
+
+---
+
+## Navigating folders
+
+A breadcrumb trail at the top of the filesystem browser shows your current location in the folder hierarchy. Click any folder name in the breadcrumb to jump directly to that level.
+
+---
+
+## File operations
+
+Right-clicking a file or folder in either view opens a context menu with the following operations:
+
+| Operation | Description |
+|-----------|-------------|
+| **Open** | Opens the file for viewing |
+| **Download** | Downloads the file to your local machine |
+| **Copy file path** | Copies the full path of the file to your clipboard |
+| **Rename** | Renames the file or folder inline |
+| **Delete** | Permanently deletes the file or folder |
+
+<Warning>
+Delete operations are permanent and cannot be undone.
+</Warning>
+
+---
+
+## Referencing files in chat
+
+Files visible in the filesystem browser can be referenced in your chat messages using the @ menu. This is useful when you want an agent to read, process, or act on a specific file.
+
+### How to reference a file
+
+1. Type **@** in the chat input field
+2. Start typing the file name or path
+3. Select the file from the results — it shows the file icon, name, and path
+4. The file path is inserted into your message, and the agent can access the file during its run
+
+<Tip>
+Use the filesystem browser to locate a file and copy its path, then paste it into the chat if you prefer not to use the @ search.
+</Tip>
+
+Files appear in the @ menu alongside agents, workforces, and saved prompts. For more on using agents and other @ mentions, see the [Chat introduction](/get-started/chat/introduction).