clean up Readme

README.md

@@ -1,50 +1,27 @@
 <div align="center">
-  <img src="LOGO.png" alt="Probly Logo" width="400"/>
+  <img src="docs/docs/assets/images/Logo.png" alt="Probly Logo" width="400"/>
 
   # Probly
-  ### AI-Powered Spreadsheet Analysis Made Simple 🚀
+  ### Data analysis with spreadsheets made simple
 
-  [![Discord](https://img.shields.io/discord/YOUR_DISCORD_ID?color=7289DA&label=Discord&logo=discord&logoColor=white)](https://discord.gg/S273ycM6zW)
+  [![Discord](https://img.shields.io/badge/Discord-Join%20Us-7289DA?logo=discord&logoColor=white)](https://discord.gg/S273ycM6zW)
   [![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
 </div>
 
-## 🌟 What is Probly?
+## What is Probly?
 
-Probly is a next-generation spreadsheet application that combines the power of traditional spreadsheets with AI-driven analysis, Python computation, and intelligent document processing. Think of it as your personal data analysis assistant! 🤖
+Probly is a next-generation spreadsheet application that combines the power of traditional spreadsheets with AI-driven analysis, Python computation, and intelligent document processing.
 
-## ✨ Key Features
+## Key Features
 
-### 📊 Smart Spreadsheet
-- Full-featured spreadsheet with formula support
-- Real-time collaboration capabilities
-- Intelligent cell suggestions and auto-completion
+- **Smart Spreadsheet**: Full-featured spreadsheet with formula support and intelligent cell suggestions
+- **Python Integration**: Run Python code directly in your browser using WebAssembly
+- **Data Visualization**: Create interactive charts and visualizations
+- **AI-Powered Analysis**: Get intelligent insights and automated trend analysis
+- **Document Processing**: Extract and process data from images.
+- **Prompt Library**: Access predefined analysis templates and save custom prompts
 
-### 🐍 Python Integration
-- Run Python code directly in your browser using WebAssembly
-- No server-side execution needed - everything runs locally
-- Perfect for data analysis and manipulation
-
-### 📈 Data Visualization
-- Create beautiful charts and visualizations
-- Interactive plotting capabilities
-- Multiple chart types supported
-
-### 🤖 AI-Powered Analysis
-- Get intelligent insights about your data
-- Automated trend analysis and predictions
-- Natural language queries for data exploration
-
-### 📚 Prompt Library
-- Access predefined analysis templates
-- Save and manage your custom prompts
-- Quick access to common operations
-
-### 📄 Document Processing
-- Extract data from images and PDFs using AI
-- Automatic table detection and data extraction
-- Smart data placement in spreadsheets
-- Support for various document types
-- Handles files up to 10MB
+![Probly Spreadsheet Example](/docs/docs/assets/images/probly02.png)
 
 ## 🏗️ Architecture
 

src/app/page.tsx

@@ -340,16 +340,6 @@ const SpreadsheetApp = () => {
     localStorage.removeItem("chatHistory");
   };
 
-  const handleDataChange = (data: any[][]) => {
-    // We don't need to store this data in state anymore
-    // If needed, we can get it from the spreadsheet context
-  };
-
-  const handleSelectPrompt = (promptText: string) => {
-    setMessage(promptText);
-    setIsPromptLibraryOpen(false);
-    setIsChatOpen(true);
-  };
 
   return (
     <main className="h-screen w-screen flex flex-col bg-gray-50">

src/components/ToolResponse.tsx

@@ -21,6 +21,8 @@ const ToolResponse: React.FC<ToolResponseProps> = ({
   onAccept,
   onReject,
 }) => {
+ 
+
   // Extract the main text response (without the tool-specific parts)
   const mainResponse = response.split('\n\n')[0];
   
@@ -31,13 +33,12 @@ const ToolResponse: React.FC<ToolResponseProps> = ({
   
   // Add state for chart expansion
   const [chartExpanded, setChartExpanded] = React.useState(false);
-  // Add state for spreadsheet expansion
-  const [spreadsheetExpanded, setSpreadsheetExpanded] = React.useState(false);
+  const [expanded, setExpanded] = React.useState(false);
   
   // Function to create a mini spreadsheet visualization
-  const renderMiniSpreadsheet = (updates: CellUpdate[], expanded: boolean, setExpanded: (expanded: boolean) => void) => {
+  const renderMiniSpreadsheet = (updates: CellUpdate[]) => {
     if (!updates || updates.length === 0) return null;
-    console.log("UPDATES IN TOOL RESPONSE >>>", updates);
+    
     // Extract column and row information from cell references
     const cellInfo = updates.map(update => {
       const match = update.target.match(/([A-Z]+)(\d+)/);
@@ -53,8 +54,6 @@ const ToolResponse: React.FC<ToolResponseProps> = ({
     // Find the range of rows and columns
     const minRow = Math.min(...cellInfo.map(cell => cell.row));
     const maxRow = Math.max(...cellInfo.map(cell => cell.row));
-    const minCol = Math.min(...cellInfo.map(cell => cell.col.charCodeAt(0)));
-    const maxCol = Math.max(...cellInfo.map(cell => cell.col.charCodeAt(0)));
     
     // Get unique columns in alphabetical order
     const uniqueCols = Array.from(new Set(cellInfo.map(cell => cell.col)))
@@ -78,86 +77,56 @@ const ToolResponse: React.FC<ToolResponseProps> = ({
       updateMap.set(cell.target, cell.formula);
     });
     
-    // Calculate update range for summary
-    const rangeSummary = `${String.fromCharCode(minCol)}${minRow}:${String.fromCharCode(maxCol)}${maxRow}`;
-    
     return (
       <div className="space-y-2">
-        {/* Update summary */}
-        <div className="text-xs text-gray-600 mb-2">
-          <span className="font-medium">{updates.length}</span> cells updated in range <span className="font-mono">{rangeSummary}</span>
-          {!expanded && (
-            <span className="text-gray-500">
-              {` (+${maxRow - displayMaxRow} more rows, +${uniqueCols.length - colsToShow.length} more columns)`}
-            </span>
-          )}
-        </div>
-        
         <div className="overflow-x-auto max-w-full">
-          <div className={`transition-all duration-300 ease-in-out ${expanded ? 'max-h-[1000px]' : 'max-h-[200px]'} overflow-hidden`}>
-            <table className="text-xs border-collapse">
-              <thead>
-                <tr>
-                  <th className="p-1 bg-gray-100 border border-gray-300"></th>
-                  {colsToShow.map(col => (
-                    <th key={col} className="p-1 bg-gray-100 border border-gray-300 font-medium text-center w-16">
-                      {col}
-                    </th>
-                  ))}
-                </tr>
-              </thead>
-              <tbody>
-                {Array.from({ length: displayMaxRow - displayMinRow + 1 }, (_, i) => displayMinRow + i).map(row => (
-                  <tr key={row}>
-                    <td className="p-1 bg-gray-100 border border-gray-300 font-medium text-center">
-                      {row}
-                    </td>
-                    {colsToShow.map(col => {
-                      const cellRef = `${col}${row}`;
-                      const hasUpdate = updateMap.has(cellRef);
-                      const cellValue = updateMap.get(cellRef) || '';
-                      
-                      return (
-                        <td 
-                          key={cellRef} 
-                          className={`p-1 border border-gray-300 font-mono text-xs ${hasUpdate ? 'bg-[#1A6B4C]/10' : ''}`}
-                          title={cellValue}
-                        >
-                          <div className="truncate max-w-[120px]">
-                            {hasUpdate ? cellValue : ''}
-                          </div>
-                        </td>
-                      );
-                    })}
-                  </tr>
+          <table className="text-xs border-collapse">
+            <thead>
+              <tr>
+                <th className="p-1 bg-gray-100 border border-gray-300"></th>
+                {colsToShow.map(col => (
+                  <th key={col} className="p-1 bg-gray-100 border border-gray-300 font-medium text-center w-16">
+                    {col}
+                  </th>
                 ))}
-              </tbody>
-            </table>
-          </div>
+              </tr>
+            </thead>
+            <tbody>
+              {Array.from({ length: displayMaxRow - displayMinRow + 1 }, (_, i) => displayMinRow + i).map(row => (
+                <tr key={row}>
+                  <td className="p-1 bg-gray-100 border border-gray-300 font-medium text-center">
+                    {row}
+                  </td>
+                  {colsToShow.map(col => {
+                    const cellRef = `${col}${row}`;
+                    const hasUpdate = updateMap.has(cellRef);
+                    const cellValue = updateMap.get(cellRef) || '';
+                    
+                    return (
+                      <td 
+                        key={cellRef} 
+                        className={`p-1 border border-gray-300 font-mono text-xs ${hasUpdate ? 'bg-[#1A6B4C]/10' : ''}`}
+                        title={cellValue}
+                      >
+                        <div className="truncate max-w-[120px]">
+                          {hasUpdate ? cellValue : ''}
+                        </div>
+                      </td>
+                    );
+                  })}
+                </tr>
+              ))}
+            </tbody>
+          </table>
         </div>
         
         {needsExpand && (
-          <div className="flex justify-between items-center">
-            <button 
-              onClick={() => setExpanded(!expanded)} 
-              className="text-xs text-[#1A6B4C] hover:text-[#1A6B4C]/80 transition-colors flex items-center gap-1"
-            >
-              {expanded ? (
-                <>
-                  <span>Show less</span>
-                  <ChevronUp size={14} />
-                </>
-              ) : (
-                <>
-                  <span>Show more</span>
-                  <ChevronDown size={14} />
-                </>
-              )}
-            </button>
-            <span className="text-xs text-gray-500">
-              {expanded ? "Showing all" : `+${maxRow - displayMaxRow} more rows`}
-            </span>
-          </div>
+          <button 
+            onClick={() => setExpanded(!expanded)} 
+            className="text-xs text-[#1A6B4C] hover:text-[#1A6B4C]/80 transition-colors"
+          >
+            {expanded ? "Show less" : `Show more`}
+          </button>
         )}
       </div>
     );
@@ -188,7 +157,7 @@ const ToolResponse: React.FC<ToolResponseProps> = ({
                 </div>
               </div>
               <div className="overflow-auto">
-                {renderMiniSpreadsheet(updates, spreadsheetExpanded, setSpreadsheetExpanded)}
+                {renderMiniSpreadsheet(updates)}
               </div>
             </div>
           )}