Merge remote-tracking branch 'origin/staging' into add-create-repo

Author: Anchel123

README.md

@@ -1,87 +1,113 @@
+# CodeGraph - Knowledge Graph Visualization Tool
+
+### Visualize your repository with our graph for code analysis
+
 [![Try Free](https://img.shields.io/badge/Try%20Free-FalkorDB%20Cloud-FF8101?labelColor=FDE900&link=https://app.falkordb.cloud)](https://app.falkordb.cloud)
 [![Dockerhub](https://img.shields.io/docker/pulls/falkordb/falkordb?label=Docker)](https://hub.docker.com/r/falkordb/falkordb/)
 [![Discord](https://img.shields.io/discord/1146782921294884966?style=flat-square)](https://discord.com/invite/6M4QwDXn2w)
 [![Workflow](https://github.com/FalkorDB/code-graph/actions/workflows/nextjs.yml/badge.svg?branch=main)](https://github.com/FalkorDB/code-graph/actions/workflows/nextjs.yml)
+-
+
+![Alt Text](https://res.cloudinary.com/dhd0k02an/image/upload/v1739719361/FalkorDB_-_Github_-_readme_jr6scy.gif)
 
-![image](https://github.com/FalkorDB/code-graph/assets/753206/60f535ed-cf29-44b2-9005-721f11614803)
+**👉🏻[Live Demo](https://code-graph.falkordb.com/)**
 
-## Getting Started
-[Live Demo](https://code-graph.falkordb.com/)
+## Running Locally  
 
-## Run locally
-This project is composed of three pieces:
+This project consists of three core components:  
 
-1. FalkorDB Graph DB - this is where your graphs are stored and queried
-2. Code-Graph-Backend - backend logic
-3. Code-Graph-Frontend - website
+1. **FalkorDB Graph DB** – Stores and queries your graphs.  
+2. **Code-Graph-Backend** – Handles backend logic.  
+3. **Code-Graph-Frontend** – Provides the web interface.  
 
-You'll need to start all three components:
+To set up the project, you’ll need to start all three components.  
 
-### Run FalkorDB 
+### 1. Start FalkorDB  
+
+Run the following command to start FalkorDB using Docker:  
 
 ```bash
 docker run -p 6379:6379 -it --rm falkordb/falkordb
 ```
 
-### Run Code-Graph-Backend
+### 2. Start the Backend  
 
-#### Clone the Backend
+#### Clone the Backend Repository  
 
 ```bash
 git clone https://github.com/FalkorDB/code-graph-backend.git
+cd code-graph-backend
 ```
 
-#### Setup environment variables
+#### Set Up Environment Variables  
 
-`SECRET_TOKEN` - user defined token used to authorize the request
+Define the required environment variables:  
 
 ```bash
 export FALKORDB_HOST=localhost FALKORDB_PORT=6379 \
-    OPENAI_API_KEY=<YOUR OPENAI_API_KEY> SECRET_TOKEN=<YOUR_SECRECT_TOKEN> \
+    OPENAI_API_KEY=<YOUR_OPENAI_API_KEY> SECRET_TOKEN=<YOUR_SECRET_TOKEN> \
     FLASK_RUN_HOST=0.0.0.0 FLASK_RUN_PORT=5000
 ```
 
-#### Install dependencies & run
+`SECRET_TOKEN` is a user-defined token used for request authorization.  
 
-```bash
-cd code-graph-backend
+#### Install Dependencies & Start the Backend  
 
+```bash
 pip install --no-cache-dir -r requirements.txt
-
 flask --app api/index.py run --debug > flask.log 2>&1 &
-
 ```
 
-### Run Code-Graph-Frontend
+### 3. Start the Frontend  
 
-#### Clone the Frontend
+#### Clone the Frontend Repository  
 
 ```bash
 git clone https://github.com/FalkorDB/code-graph.git
+cd code-graph
 ```
 
-#### Setup environment variables
+#### Set Up Environment Variables  
 
 ```bash
 export BACKEND_URL=http://${FLASK_RUN_HOST}:${FLASK_RUN_PORT} \
-    SECRET_TOKEN=<YOUR_SECRECT_TOKEN> OPENAI_API_KEY=<YOUR_OPENAI_API_KEY>
+    SECRET_TOKEN=<YOUR_SECRET_TOKEN> OPENAI_API_KEY=<YOUR_OPENAI_API_KEY>
 ```
 
-#### Install dependencies & run
+#### Install Dependencies & Start the Frontend  
 
 ```bash
-cd code-graph
 npm install
 npm run dev
 ```
 
-### Process a local repository
+### 4. Process a Local Repository  
+
+Use the following `curl` command to analyze a local repository:  
+
 ```bash
-curl -X POST http://127.0.0.1:5000/analyze_folder -H "Content-Type: application/json" -d '{"path": "<PATH_TO_LOCAL_REPO>", "ignore": ["./.github", "./sbin", "./.git","./deps", "./bin", "./build"]}' -H "Authorization: <YOUR_SECRECT_TOKEN>"
+curl -X POST http://127.0.0.1:5000/analyze_folder \
+    -H "Content-Type: application/json" \
+    -H "Authorization: <YOUR_SECRET_TOKEN>" \
+    -d '{"path": "<PATH_TO_LOCAL_REPO>", "ignore": ["./.github", "./sbin", "./.git", "./deps", "./bin", "./build"]}'
 ```
 
-Note: At the moment code-graph can analyze both the C & Python source files.
-Support for additional languages e.g. JavaScript, Go, Java is planned to be added
-in the future.
+**Note:** Currently, Code-Graph supports analyzing C and Python source files.  
+Support for additional languages (e.g., JavaScript, Go, Java) is planned.  
+
+### 5. Access the Web Interface  
+
+Once everything is running, open your browser and go to:  
+
+[http://localhost:3000](http://localhost:3000)  
+
+## Community
+
+Have questions or feedback? Reach out via:
+
+* [GitHub Issues](https://github.com/FalkorDB/GraphRAG-SDK/issues)
+* Join our [Discord](https://discord.com/invite/6M4QwDXn2w)
+
+⭐️ If you find this repository helpful, please consider giving it a star!
 
-Browse to [http://localhost:3000](http://localhost:3000)
+Knowledge Graph, Code Analysis, Code Visualization, Dead Code Analysis, Graph Database

app/components/Input.tsx

@@ -1,7 +1,7 @@
 import { toast } from "@/components/ui/use-toast"
 import { getCategoryColorName, getCategoryColorValue, Graph } from "./model"
 import { useEffect, useRef, useState } from "react"
-import { PathNode } from "../page"
+import { PathNode } from "@/lib/utils"
 import { cn } from "@/lib/utils"
 import { prepareArg } from "../utils"
 
@@ -131,7 +131,7 @@ export default function Input({ onValueChange, handleSubmit, graph, icon, node,
 
     return (
         <div
-            className={cn("w-[20dvw] relative pointer-events-none rounded-md gap-4", parentClassName)}
+            className={cn("w-full md:w-[20dvw] relative pointer-events-none rounded-md gap-4", parentClassName)}
             data-name='search-bar'
         >
             <input
@@ -142,6 +142,7 @@ export default function Input({ onValueChange, handleSubmit, graph, icon, node,
                 }}
                 onKeyDown={handleKeyDown}
                 className={cn("w-full border p-2 rounded-md pointer-events-auto", className)}
+                placeholder="Search for nodes in the graph"
                 value={node?.name || ""}
                 onChange={(e) => {
                     const newVal = e.target.value
@@ -166,7 +167,7 @@ export default function Input({ onValueChange, handleSubmit, graph, icon, node,
                 open &&
                 <div
                     ref={containerRef}
-                    className="z-10 w-full bg-white absolute flex flex-col pointer-events-auto border rounded-md max-h-[50dvh] overflow-y-auto overflow-x-hidden p-2 gap-2"
+                    className="z-10 w-full bg-white absolute flex flex-col pointer-events-auto border rounded-md md:max-h-[50dvh] h-[25dvh] overflow-y-auto overflow-x-hidden p-2 gap-2"
                     data-name='search-bar-list'
                     style={{
                         top: inputHeight + 16