Merge branch 'staging' into fix-collapsed

Anchel123 · web-flow · commit 8369d88901a2 · 2024-11-27T14:22:52.000+02:00
diff --git a/app/api/repo/[graph]/commit/route.ts b/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 } }) {
+
+}
diff --git a/app/api/repo/[graph]/info/route.ts b/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 })
+    }
+}
diff --git a/app/api/repo/[graph]/route.ts b/app/api/repo/[graph]/route.ts
diff --git a/app/components/Input.tsx b/app/components/Input.tsx
@@ -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
@@ -163,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)
diff --git a/app/components/chat.tsx b/app/components/chat.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({
@@ -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>
     );
 }
diff --git a/app/components/code-graph.tsx b/app/components/code-graph.tsx
@@ -168,8 +168,8 @@ export function CodeGraph({
     }, [selectedObjects, selectedObj, isSelectedObj]);
 
     async function fetchCount() {
-        const result = await fetch(`/api/repo/${graphName}`, {
-            method: 'POST'
+        const result = await fetch(`/api/repo/${graphName}/info`, {
+            method: 'GET'
         })
 
         if (!result.ok) {
@@ -198,27 +198,29 @@ export function CodeGraph({
 
         const run = async () => {
             fetchCount()
-            // const result = await fetch(`/api/repo/${graphName}/?type=commit`, {
-            //     method: 'POST'
-            // })
-
-            // if (!result.ok) {
-            //     toast({
-            //         variant: "destructive",
-            //         title: "Uh oh! Something went wrong.",
-            //         description: await result.text(),
-            //     })
-            //     return
-            // }
-
-            // const json = await result.json()
-            // const commitsArr = json.result.commits
-            // setCommits(commitsArr)
-
-            // if (commitsArr.length > 0) {
-            //     setCurrentCommit(commitsArr[commitsArr.length - 1].hash)
-            //     setCommitIndex(commitsArr.length)
-            // }
+            /*
+            const result = await fetch(`/api/repo/${graphName}/commit`, {
+                method: 'GET'
+            })
+
+            if (!result.ok) {
+                toast({
+                    variant: "destructive",
+                    title: "Uh oh! Something went wrong.",
+                    description: await result.text(),
+                })
+                return
+            }
+
+            const json = await result.json()
+            const commitsArr = json.result.commits
+            setCommits(commitsArr)
+
+            if (commitsArr.length > 0) {
+                setCurrentCommit(commitsArr[commitsArr.length - 1].hash)
+                setCommitIndex(commitsArr.length)
+            }
+            */
         }
 
         run()
diff --git a/app/components/commitList.tsx b/app/components/commitList.tsx
@@ -141,4 +141,4 @@
 //             </button>
 //         </footer>
 //     )
-// }
+// }
diff --git a/app/components/dataPanel.tsx b/app/components/dataPanel.tsx
@@ -36,7 +36,7 @@ export default function DataPanel({ obj, setObj, url }: Props) {
     const object = Object.entries(obj).filter(([k]) => !excludedProperties.includes(k))
 
     return (
-        <div className="z-20 absolute -top-10 left-20 text-white shadow-lg rounded-lg flex flex-col min-h-[65%] max-h-[88%] max-w-[56%] overflow-hidden" >
+        <div className="z-20 absolute -top-10 left-20 bg-[#343434] text-white shadow-lg rounded-lg flex flex-col max-h-[88%] max-w-[56%] overflow-hidden" >
             <header className="bg-[#191919] flex items-center gap-8 justify-between p-8">
                 <p title={label} className="truncate font-bold">{label.toUpperCase()}</p>
                 <button onClick={() => setObj(undefined)}>
diff --git a/e2e/config/testData.ts b/e2e/config/testData.ts
@@ -10,6 +10,6 @@ const categorizeCharacters = (characters: string[], expectedRes: boolean): { cha
 };
 
 export const specialCharacters: { character: string; expectedRes: boolean }[] = [
-  ...categorizeCharacters(['%', '*', '(', ')', '-', '[', ']', '{', '}', ';', ':', '"', '|', '~'], true),
-  ...categorizeCharacters(['!', '@', '#', '$', '^', '&', '_', '=', '+', "'", ',', '.', '<', '>', '/', '?', '\\', '`'], false)
+  ...categorizeCharacters([ '#', '%', '&', '*', '(', ')', '-', '[', ']', '{', '}', ';', ':', '"', '|', '~'], true),
+  ...categorizeCharacters(['!', '@', '$', '^', '_', '=', '+', "'", ',', '.', '<', '>', '/', '?', '\\', '`'], false)
 ];
