Merge branch 'staging' into dependabot/npm_and_yarn/staging/radix-ui/react-select-2.1.2

Author: gkorland

app/api/repo/[graph]/commit/route.ts

@@ -0,0 +1,29 @@
+import { NextRequest, NextResponse } from "next/server";
+
+export async function GET(request: NextRequest, { params }: { params: { graph: string } }) {
+
+    try {
+        const result = await fetch(`${process.env.BEAKEND_URL}/list_commits`, {
+            method: 'POST',
+            body: JSON.stringify({ repo: params.graph }),
+            headers: {
+                "Authorization": process.env.SECRET_TOKEN!,
+                "Content-Type": 'application/json'
+            }
+        })
+
+        if (!result.ok) {
+            throw new Error(await result.text())
+        }
+
+        const json = await result.json()
+
+        return NextResponse.json({ result: json }, { status: 200 })
+    } catch (err) {
+        return NextResponse.json({ message: (err as Error).message }, { status: 400 })
+    }
+}
+
+export async function POST(request: NextRequest, { params }: { params: { graph: string } }) {
+
+}

app/api/repo/[graph]/info/route.ts

@@ -0,0 +1,25 @@
+import { NextRequest, NextResponse } from "next/server";
+
+export async function GET(request: NextRequest, { params }: { params: { graph: string } }) {
+
+    try {
+        const result = await fetch(`${process.env.BACKEND_URL}/repo_info`, {
+            method: 'POST',
+            body: JSON.stringify({ repo: params.graph }),
+            headers: {
+                "Authorization": process.env.SECRET_TOKEN!,
+                "Content-Type": 'application/json'
+            }
+        })
+
+        if (!result.ok) {
+            throw new Error(await result.text())
+        }
+
+        const json = await result.json()
+
+        return NextResponse.json({ result: json }, { status: 200 })
+    } catch (err) {
+        return NextResponse.json({ message: (err as Error).message }, { status: 400 })
+    }
+}

app/api/repo/[graph]/neighbors/route.ts

@@ -2,10 +2,10 @@ import { NextRequest, NextResponse } from "next/server";
 
 export async function POST(request: NextRequest, { params }: { params: { graph: string } }) {
 
-    const { nodeIds } = await request.json();
+    const nodeIds = (await request.json()).nodeIds.map((id: string) => Number(id));
     const graphId = params.graph;
+    
     try {
-
         const result = await fetch(`${process.env.BACKEND_URL}/get_neighbors`, {
             method: 'POST',
             body: JSON.stringify({ node_ids: nodeIds, repo: graphId }),

app/api/repo/[graph]/route.ts

@@ -45,7 +45,7 @@ export default function Input({ value, onValueChange, handelSubmit, graph, icon,
                 return
             }
 
-            const result = await fetch(`/api/repo/${graph.Id}/?prefix=${value}&type=autoComplete`, {
+            const result = await fetch(`/api/repo/${graph.Id}/?prefix=${value}`, {
                 method: 'POST'
             })
 
@@ -91,15 +91,15 @@ export default function Input({ value, onValueChange, handelSubmit, graph, icon,
             case "ArrowUp": {
                 e.preventDefault()
                 setSelectedOption(prev => {
-                    containerRef.current?.scrollTo({ behavior: 'smooth', top: (prev <= 0 ? options.length - 1 : prev - 1) * 64 })
+                    containerRef.current?.scrollTo({ behavior: 'smooth', top: (prev <= 0 ? options.length - 1 : prev - 1) * containerRef.current.children[0].clientHeight })
                     return prev <= 0 ? options.length - 1 : prev - 1
                 })
                 return
             }
             case "ArrowDown": {
                 e.preventDefault()
                 setSelectedOption(prev => {
-                    containerRef.current?.scrollTo({ behavior: 'smooth', top: ((prev + 1) % options.length) * 64 })
+                    containerRef.current?.scrollTo({ behavior: 'smooth', top: ((prev + 1) % options.length) * containerRef.current.children[0].clientHeight })
                     return (prev + 1) % options.length
                 })
                 return
@@ -144,6 +144,7 @@ export default function Input({ value, onValueChange, handelSubmit, graph, icon,
                 <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"
+                    data-name='search-bar-list'
                     style={{
                         top: (inputRef.current?.clientHeight || 0) + 16
                     }}
@@ -162,7 +163,6 @@ export default function Input({ value, onValueChange, handelSubmit, graph, icon,
                                         selectedOption === index && "bg-gray-100"
                                     )}
                                     onMouseEnter={() => setSelectedOption(index)}
-                                    onMouseLeave={() => setSelectedOption(-1)}
                                     onClick={() => {
                                         onValueChange({ name: option.properties.name, id: option.id })
                                         handelSubmit && handelSubmit(option)

app/components/Input.tsx

@@ -1,13 +1,14 @@
 import { toast } from "@/components/ui/use-toast";
 import { Dispatch, FormEvent, MutableRefObject, SetStateAction, useEffect, useRef, useState } from "react";
 import Image from "next/image";
-import { AlignLeft, ArrowRight, ChevronDown, Lightbulb, Undo2 } from "lucide-react";
+import { AlignLeft, ArrowDown, ArrowRight, ChevronDown, Lightbulb, Undo2 } from "lucide-react";
 import { Path } from "../page";
 import Input from "./Input";
 import { Graph } from "./model";
 import { cn } from "@/lib/utils";
 import { LAYOUT } from "./code-graph";
 import { TypeAnimation } from "react-type-animation";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
 
 enum MessageTypes {
     Query,
@@ -35,6 +36,14 @@ interface Props {
     setIsPath: (isPathResponse: boolean) => void
 }
 
+const SUGGESTIONS = [
+    "List a few recursive functions",
+    "What is the name of the most used method?",
+    "Who is calling the most used method?",
+    "Which function has the largest number of arguments? List a few arguments",
+    "Show a calling path between the drop_edge_range_index function and _query, only return function(s) names",
+]
+
 const RemoveLastPath = (messages: Message[]) => {
     const index = messages.findIndex((m) => m.type === MessageTypes.Path)
 
@@ -63,19 +72,13 @@ export function Chat({ repo, path, setPath, graph, chartRef, selectedPathId, isP
 
     const [tipOpen, setTipOpen] = useState(false);
 
+    const [sugOpen, setSugOpen] = useState(false);
+
     // A reference to the chat container to allow scrolling to the bottom
     const containerRef: React.RefObject<HTMLDivElement> = useRef(null);
 
-    const tipRef: React.RefObject<HTMLDivElement> = useRef(null);
-
     const isSendMessage = messages.some(m => m.type === MessageTypes.Pending) || (messages.some(m => m.text === "Please select a starting point and the end point. Select or press relevant item on the graph") && !messages.some(m => m.type === MessageTypes.Path))
 
-    useEffect(() => {
-        if (tipOpen) {
-            tipRef.current?.focus()
-        }
-    }, [tipOpen])
-
     useEffect(() => {
         const p = paths.find((path) => [...path.edges, ...path.nodes].some((e: any) => e.id === selectedPathId))
 
@@ -202,11 +205,13 @@ export function Chat({ repo, path, setPath, graph, chartRef, selectedPathId, isP
     }
 
     // Send the user query to the server
-    async function sendQuery(event: FormEvent) {
+    async function sendQuery(event?: FormEvent, sugQuery?: string) {
 
-        event.preventDefault();
+        event?.preventDefault();
 
-        const q = query.trim()
+        if (isSendMessage) return
+
+        const q = query?.trim() || sugQuery!
 
         if (!q) {
             toast({
@@ -436,7 +441,7 @@ export function Chat({ repo, path, setPath, graph, chartRef, selectedPathId, isP
                                 key={i}
                                 className={cn("flex text-wrap border p-2 gap-2 rounded-md", p.nodes.length === selectedPath?.nodes.length && selectedPath?.nodes.every(node => p?.nodes.some((n) => n.id === node.id)) && "border-[#FF66B3] bg-[#FFF0F7]")}
                                 onClick={() => {
-                                    if (selectedPath?.nodes.every(node => p?.nodes.some((n) => n.id === node.id))) return
+                                    if (p.nodes.length === selectedPath?.nodes.length && selectedPath?.nodes.every(node => p?.nodes.some((n) => n.id === node.id))) return
                                     handelSetSelectedPath(p)
                                     setIsPath(true)
                                 }}
@@ -486,27 +491,52 @@ export function Chat({ repo, path, setPath, graph, chartRef, selectedPathId, isP
                 }
                 {
                     tipOpen &&
-                    <div ref={tipRef} className="bg-white fixed bottom-[85px] border rounded-md flex flex-col gap-3 p-2 overflow-y-auto" onBlur={() => setTipOpen(false)}>
+                    <div ref={ref => ref?.focus()} className="bg-white absolute bottom-0 border rounded-md flex flex-col gap-3 p-2 overflow-y-auto" tabIndex={-1} onMouseDown={(e) => e.preventDefault()} onBlur={() => setTipOpen(false)}>
                         {getTip()}
                     </div>
                 }
             </main>
-            <footer>
-                {
-                    repo &&
-                    <div className="flex gap-4 px-4">
-                        <button data-name="lightbulb" disabled={isSendMessage} className="p-4 border rounded-md hover:border-[#FF66B3] hover:bg-[#FFF0F7]" onClick={() => setTipOpen(prev => !prev)}>
-                            <Lightbulb />
-                        </button>
-                        <form className="grow flex items-center border rounded-md pr-2" onSubmit={sendQuery}>
-                            <input disabled={isSendMessage} className="grow p-4 rounded-md focus-visible:outline-none" placeholder="Ask your question" onChange={handleQueryInputChange} value={query} />
-                            <button disabled={isSendMessage} className={`bg-gray-200 p-2 rounded-md ${!isSendMessage && 'hover:bg-gray-300'}`}>
-                                <ArrowRight color="white" />
+            <DropdownMenu open={sugOpen} onOpenChange={setSugOpen}>
+                <footer>
+                    {
+                        repo &&
+                        <div className="flex gap-4 px-4">
+                            <button data-name="lightbulb" onClick={() => setTipOpen(prev => !prev)} disabled={isSendMessage} className="p-4 border rounded-md hover:border-[#FF66B3] hover:bg-[#FFF0F7]">
+                                <Lightbulb />
                             </button>
-                        </form>
-                    </div>
-                }
-            </footer>
+                            <form className="grow flex items-center border rounded-md px-2" onSubmit={sendQuery}>
+                                <DropdownMenuTrigger asChild>
+                                    <button className="bg-gray-200 p-2 rounded-md hover:bg-gray-300">
+                                        <ArrowDown color="white" />
+                                    </button>
+                                </DropdownMenuTrigger>
+                                <input className="grow p-4 rounded-md focus-visible:outline-none" placeholder="Ask your question" onChange={handleQueryInputChange} value={query} />
+                                <button disabled={isSendMessage} className={`bg-gray-200 p-2 rounded-md ${!isSendMessage && 'hover:bg-gray-300'}`}>
+                                    <ArrowRight color="white" />
+                                </button>
+                            </form>
+                        </div>
+                    }
+                </footer>
+                <DropdownMenuContent className="flex flex-col mb-4 w-[20dvw]" side="top">
+                    {
+                        SUGGESTIONS.map((s, i) => (
+                            <button
+                                disabled={isSendMessage}
+                                type="submit"
+                                key={i}
+                                className="p-2 text-left hover:bg-gray-200"
+                                onClick={() => {
+                                    sendQuery(undefined, s)
+                                    setSugOpen(false)
+                                }}
+                            >
+                                {s}
+                            </button>
+                        ))
+                    }
+                </DropdownMenuContent>
+            </DropdownMenu>
         </div>
     );
 }