faet(docs): fix up README with new screenshots

README.md

@@ -1,21 +1,74 @@
 # <img src="./docs/images/logo.png" width="30px" height="auto" />  WhoDB
+Build Status: &nbsp; <img src="https://hello.clidey.com/api/flows/status?id=b32257fa-1415-4847-a0f3-e684f5f76608&secret=cd74dbd5-36ec-42f9-b4f0-12ce9fcc762b" alt="Clidey build status" height="20px" />
 
-### *"Making your database management disappear like magic!"*
+### *"Is it magic? Is it sorcery? No, it's just WhoDB!"*
 <p align="center"><img src="./docs/images/trailer.png" alt="Trailer" width="100%" height="auto" /></p>
 
+<details>
+    <summary>View screenshots of WhoDB</summary>
+    <img src="./docs/images/album_table_view.png" alt="View of the Album table" width="100%" height="auto" />
+    <img src="./docs/images/edit_view.png" alt="Edit view pop-up" width="100%" height="auto" />
+    <img src="./docs/images/export_delete_btns.png" alt="Export and delete buttons in action" width="100%" height="auto" />
+    <img src="./docs/images/scratchpad2.png" alt="The scratchpad functionality" width="100%" height="auto" />
+    <img src="./docs/images/table_view.png" alt="All available tables in the current database" width="100%" height="auto" />
+</details>
+
+<div style="width:100%;border-bottom:0.5px solid white;margin:50px 0px;"></div>
+
+#### Table of Contents
+1. [Description](#description)
+2. [Key Features](#key-features)
+3. [Demo](#try-the-demo)
+4. [Documentation](#documentation)
+5. [Quick Start](#quick-start)
+6. [Development Setup](#development-setup)
+7. [Frontend](#frontend-setup)
+8. [Backend](#backend-setup)
+9. [FAQs](#faqs)
+10. [Contributing](#contributing)
+11. [Infrastrucutre](#infrastrucutre)
+12. [Contact details](#contact)
+
+
 ## Description
-Welcome to **WhoDB** – a powerful, lightweight (~20Mi), and user-friendly database management tool that combines the simplicity of Adminer with superior UX and performance. WhoDB is written in GoLang for optimal speed and efficiency and features interactive graphs for visualizing your entire database schema. Whether you're managing a small project or a complex enterprise system, WhoDB is designed to make your database administration tasks smoother and more intuitive.
+**WhoDB** is a lightweight (~20MB), powerful, and user-friendly database management tool designed to streamline your database administration tasks.
+Combining the simplicity of Adminer with enhanced UX and performance, WhoDB is built with GoLang to deliver optimal speed and efficiency.
+With features like interactive schema visualization and inline editing, WhoDB caters to both small projects and complex enterprise systems.
+
+**WhoDB offers you the opportunity to talk to your data using natural language thanks to our integration with Ollama.
+This feature allows you to perform queries and manage your data through conversation instead of complex SQL.**
+
+## Key Features
+- **Conversate With Your Data:** No more wasting time crafting complex SQL queries - ask away!
+- **Enhanced UX:** A clean, intuitive interface that’s easy to navigate.
+- **Blazing Fast Performance:** Built with GoLang for exceptional speed, including table virtualization on the frontend.
+- **Schema Visualization:** Interactive graphs to easily visualize your database schema.
+- **Inline Editing & Preview:** Edit and preview data directly in the interface.
+- **Broad Database Support:** Compatible with PostgreSQL, MySQL, SQLite3, MongoDB, Redis, MariaDB, & ElasticSearch.
+- **Scratchpad:** A Jupyter notebook-like interface for performing database queries.
 
-## Quick Start
+<div style="width:100%;border-bottom:0.5px solid white;margin:50px 0px;"></div>
+
+## Try the demo
+Experience WhoDB firsthand with our [live demo](https://whodb.clidey.com/demo/login?host=quick-container-491288b0-3138-48fa-93b4-1e730296c0b7.hello.svc.cluster.local&username=user&password=password&database=Adventureworks).  
+*Note: This demo is populated with a sample database from postgresDBSamples, with credentials pre-filled.*
+
+Or checkout our [demo video](https://youtu.be/hnAQcYYzcLo)
+
+## Documentation
 
-To start using WhoDB right away, you can run it using Docker:
+For more detailed information, check out our [Documentation README](/docs/docs.md)
 
+<div style="width:100%;border-bottom:0.5px solid white;margin:50px 0px;"></div>
+
+## Quick Start
+
+Get up and running with WhoDB quickly using Docker:
 ```sh
 docker run -it -p 8080:8080 clidey/whodb
 ```
 
-or using docker-compose
-
+Or, use Docker Compose:
 ```sh
 version: "3.8"
 services:
@@ -27,85 +80,73 @@ services:
       - "8080:8080"
 ```
 
-Go to http://localhost:8080 and get started!
-
-Or try here: https://whodb.clidey.com/demo/login?host=quick-container-491288b0-3138-48fa-93b4-1e730296c0b7.hello.svc.cluster.local&username=user&password=password&database=Adventureworks
-
-- This is currently populated with fake database from [postgresDBSamples](https://github.com/morenoh149/postgresDBSamples/) and the URL should automatically put the credentials
-
-Or checkout our Demo Video: [![Demo Video](/docs/images/demo-thumbnail.png)](https://youtu.be/hnAQcYYzcLo)
-
-## Features
-- **Better UX:** Intuitive and easy-to-use interface
-- **Faster Performance:** Built with GoLang for exceptional speed and table virtualization in Frontend
-- **Schema Visualization:** Interactive graphs to visualize your entire database schema
-- **Inline Editing & Preview:** Easily preview cell or edit inline
-- **Current Support:** PostgreSQL, MySQL, SQLite3, MongoDB, Redis, MariaDB, & Elastic Search.
-- **Scratchpad:** Perform database queries in a jupyter notebook like experience
-
-## Documentation
+Access WhoDB by navigating to http://localhost:8080 in your browser.
 
-Check the following [Documentation README](/docs/docs.md)
+<div style="width:100%;border-bottom:0.5px solid white;margin:20px 0px;"></div>
 
 ## Development Setup
-
-If you want to run and develop WhoDB locally, follow these steps:
-
 ### Prerequisites
 - GoLang (latest version recommended)
 - PNPM (latest version recommended)
 
-## Backend Setup
-
-Navigate to the core/ directory and run the GoLang application:
-
+### Frontend Setup
+To start the frontend service, navigate to the `frontend/` directory and run:
 ```sh
-cd core/
-go run .
+pnpm i && pnpm start
 ```
 
-## Frontend Setup
-
-Navigate to the frontend/ directory and run the React frontend:
-
+### Backend Setup
+##### 1. Preparing the Frontend for the Backend (Only if you don’t have a build/ directory in core/):
+If the `core/` directory doesn't have a `build/` folder, you'll need to build the frontend and move it to the backend directory. From the root directory, run:
 ```sh
-cd frontend/
-pnpm i && pnpm start
+cd frontend && pnpm install && pnpm run build && rm -rf ../core/build/ && cp -r ./build ../core/ && cd -;
 ```
+This command will compile the frontend and copy the `build/` folder to `core/`. 
+This step is required because Go will attempt to embed the `build/` folder on each launch. 
+You only need to do this once.
 
-## FAQs
-
-**Q: What inspired the creation of WhoDB?**
-
-A: WhoDB was inspired by Adminer due to its lightweight nature and ease of use. We aimed to enhance these qualities with a focus on graph-based visualization and a consistent user experience across different types of databases.
-
-**Q: How does WhoDB handle large queries?**
+##### 2. Setting up Ollama (if you'd like to enable the natural conversation integration)
+Go to https://ollama.com/ and download it for your system. 
+Once that is done, we recommend that you start out with the [Llama 3.1 8b model](https://ollama.com/library/llama3.1).
+WhoDB will automatically detect your installed model(s) and will show you a **Chat** option on the left sidebar.
 
-A: WhoDB supports lazy loading to efficiently manage and display large query results, ensuring smooth performance even with extensive datasets.
+##### 3. Starting the Backend Service
+If the `core/` directory already has a `build/` folder, or once you've completed the step above, you can start the backend service by running:
+```sh
+cd core/
+go run .
+```
 
-**Q: What makes WhoDB different from DBeaver?**
+<div style="width:100%;border-bottom:0.5px solid white;margin:50px 0px;"></div>
 
-A: While DBeaver is a highly advanced tool written in Java, it can be resource-intensive. WhoDB, on the other hand, is designed to be lightweight and runs with minimal resources, making it accessible to a wider range of users and devices. You can run WhoDB with as little as 50m core and 100Mb RAM. WhoDB is also only ~25Mb compressed size.
+## FAQs
 
-**Q: Can I use WhoDB with any type of database?**
+**What inspired the creation of WhoDB?**  
+WhoDB was inspired by Adminer for its lightweight nature and ease of use. We aimed to build on these qualities with enhanced visualization and a consistent user experience across various databases.
 
-A: Yes, WhoDB aims to provide a consistent exploration and editing experience across SQL, NoSQL, and Graph databases. It currently only supports PostgreSQL, MySQL, SQLite3, MongoDB, Redis, MariaDB & Elastic Search.
+**How does WhoDB handle large queries?**  
+WhoDB supports lazy loading, ensuring smooth performance even with large datasets.
 
-**Q: How do I deploy WhoDB?**
+**What makes WhoDB different from DBeaver?**  
+Unlike DBeaver, which is feature-rich but resource-heavy, WhoDB is designed to be lightweight and efficient, running on minimal resources—perfect for smaller setups or resource-constrained environments.
 
-A: WhoDB can be easily deployed using Docker or Docker Compose. Check "Getting Started" section for more details.
+**Is WhoDB compatible with any database?**
+WhoDB supports a wide range of databases, providing a consistent experience across SQL, NoSQL, and Graph databases. Currently, it supports PostgreSQL, MySQL, SQLite3, MongoDB, Redis, MariaDB, & ElasticSearch.
 
-**Q: Is WhoDB suitable for production environments?**
+**How do I deploy WhoDB?**
+WhoDB can be deployed easily using Docker or Docker Compose. See the ["Quick Start"](#quick-start) section for details.
 
-A: While WhoDB is designed for lightweight and efficient database exploration, it is always recommended to evaluate its suitability for your specific production environment and use case.
+**Q: Is WhoDB suitable for production environments?**  
+While WhoDB is lightweight and efficient, we recommend evaluating its suitability for your specific production environment.
 
 ## Contributing
 
-We welcome contributions from the community! Feel free to open issues or submit pull requests to help improve WhoDB.
+We welcome contributions from the community! Feel free to open issues or submit pull requests to help improve WhoDB. 
+We have a contribution guide [here](https://github.com/clidey/whodb/blob/main/CONTRIBUTING.md).
 
 ## Infrastrucutre
 
-The Deployment and CI/CD is completely managed by Clidey (a no-code DevOps platform). For more information, visit https://clidey.com
+WhoDB's deployment and CI/CD are managed by Clidey, a no-code DevOps platform. For more information, visit https://clidey.com
 
 Clidey Build Status: &nbsp; <img src="https://hello.clidey.com/api/flows/status?id=b32257fa-1415-4847-a0f3-e684f5f76608&secret=cd74dbd5-36ec-42f9-b4f0-12ce9fcc762b" alt="Clidey build status" height="20px" />
 
@@ -114,6 +155,4 @@ Clidey Build Status: &nbsp; <img src="https://hello.clidey.com/api/flows/status?
 For any inquiries or support, please reach out to [[email protected]](mailto:[email protected]).
 
 
-<div style="width:100%;border-bottom:0.5px solid white;margin:50px 0px;"></div>
-
-*WhoDB - Making your database management disappear like magic!*
+*"Is it magic? Is it sorcery? No, it's just WhoDB!"*

frontend/src/pages/chat/chat.tsx

@@ -42,7 +42,7 @@ const TablePreview: FC<{ data: TableData, text: string }> = ({ data, text }) =>
                 </div>
                 :  (data != null && data.Rows.length > 0) || textWithoutComments.trim().startsWith("SELECT")
                     ? <Table className="h-[150px]" columns={data?.Columns.map(c => c.Name) ?? []} columnTags={data?.Columns.map(c => c.Type)}
-                    rows={data?.Rows ?? []} totalPages={1} currentPage={1} disableEdit={true} hideActions={true} />
+                        rows={data?.Rows ?? []} totalPages={1} currentPage={1} disableEdit={true} />
                     : <div className="bg-white/10 text-neutral-800 dark:text-neutral-300 rounded-lg p-2 flex gap-2">
                         Action Executed
                         {Icons.CheckCircle}