commit

Author: Anchel123

app/components/Input.tsx

@@ -36,7 +36,11 @@ export default function Input({ value, onValueChange, handelSubmit, graph, icon,
     useEffect(() => {
         const timeout = setTimeout(async () => {
 
-            if (!value || node?.id) return
+            if (!value || node?.id) {
+                setOptions([])
+                setOpen(false)
+                return
+            }
 
             const result = await fetch(`/api/repo/${graph.Id}/?prefix=${value}&type=autoComplete`, {
                 method: 'POST'
@@ -71,10 +75,10 @@ export default function Input({ value, onValueChange, handelSubmit, graph, icon,
                 if (!option) return
                 if (handelSubmit) {
                     handelSubmit(option)
+                } else {
+                    if (!open) return
                     onValueChange({ name: option.properties.name, id: option.id })
-                } 
-                if (!open) return
-                onValueChange({ name: option.properties.name, id: option.id })
+                }
                 setOpen(false)
                 return
             }

app/components/chat.tsx

@@ -344,18 +344,6 @@ export function Chat({ repo, path, setPath, graph, chartRef, selectedPathId, isP
 
     const getTip = () =>
         <>
-            <button
-                className="Tip"
-                onClick={() => {
-                    setTipOpen(false)
-                }}
-            >
-                <Lightbulb />
-                <div>
-                    <h1 className="label">Show unreachable code</h1>
-                    <p className="text">Remove it if unnecessary or fix logic issues.</p>
-                </div>
-            </button>
             <button
                 className="Tip"
                 onClick={() => {
@@ -364,16 +352,18 @@ export function Chat({ repo, path, setPath, graph, chartRef, selectedPathId, isP
                     setMessages(prev => [
                         ...RemoveLastPath(prev),
                         { type: MessageTypes.Query, text: "Create a path" },
-                        {
-                            type: MessageTypes.Response,
-                            text: "Please select a starting point and the end point. Select or press relevant item on the graph"
-                        },
-                        { type: MessageTypes.Path }
                     ])
+
                     if (isPathResponse) {
                         chartRef.current?.elements().removeStyle().layout(LAYOUT).run()
                         setIsPathResponse(false)
                     }
+
+                    setTimeout(() => setMessages(prev => [...prev, {
+                        type: MessageTypes.Response,
+                        text: "Please select a starting point and the end point. Select or press relevant item on the graph"
+                    }]), 300)
+                    setTimeout(() => setMessages(prev => [...prev, { type: MessageTypes.Path }]), 4000)
                 }}
             >
                 <Lightbulb />
@@ -382,18 +372,6 @@ export function Chat({ repo, path, setPath, graph, chartRef, selectedPathId, isP
                     <p className="text">Fetch, update, batch, and navigate data efficiently</p>
                 </div>
             </button>
-            <button
-                className="Tip"
-                onClick={() => {
-                    setTipOpen(false)
-                }}
-            >
-                <Lightbulb />
-                <div>
-                    <h1 className="label">Show me cluster</h1>
-                    <p className="text">Scale and distribute workloads across multiple servers</p>
-                </div>
-            </button>
         </>
 
     const getMessage = (message: Message, index?: number) => {

app/components/code-graph.tsx

@@ -11,7 +11,7 @@ import ElementMenu from "./elementMenu";
 import ElementTooltip from "./elementTooltip";
 import Combobox from "./combobox";
 import { toast } from '@/components/ui/use-toast';
-import { Path } from '../page';
+import { Path, PathNode } from '../page';
 import Input from './Input';
 import CommitList from './commitList';
 import { Checkbox } from '@/components/ui/checkbox';
@@ -136,7 +136,7 @@ export function CodeGraph({
     const [position, setPosition] = useState<Position>();
     const [tooltipPosition, setTooltipPosition] = useState<Position>();
     const [graphName, setGraphName] = useState<string>("");
-    const [searchNodeName, setSearchNodeName] = useState<string>("");
+    const [searchNode, setSearchNode] = useState<PathNode>({});
     const [commits, setCommits] = useState<any[]>([]);
     const [nodesCount, setNodesCount] = useState<number>(0);
     const [edgesCount, setEdgesCount] = useState<number>(0);
@@ -321,7 +321,9 @@ export function CodeGraph({
 
         if (!chart) return
 
-        let chartNode = chart.elements(`node[name = "${node.properties.name}"]`)
+        const n = { name: node.properties.name, id: node.id }
+
+        let chartNode = chart.elements(`node[name = "${n.name}"]`)
 
         if (chartNode.length === 0) {
             const [newNode] = graph.extend({ nodes: [node], edges: [] })
@@ -331,7 +333,7 @@ export function CodeGraph({
         chartNode.select()
         const layout = { ...LAYOUT, padding: 250 }
         chartNode.layout(layout).run()
-        setSearchNodeName("")
+        setSearchNode(n)
     }
 
     return (
@@ -353,10 +355,11 @@ export function CodeGraph({
                                     <div className='flex gap-4 pointer-events-auto'>
                                         <Input
                                             graph={graph}
-                                            value={searchNodeName}
-                                            onValueChange={(node) => setSearchNodeName(node.name!)}
+                                            value={searchNode.name}
+                                            onValueChange={({ name }) => setSearchNode({ name })}
                                             icon={<Search />}
                                             handelSubmit={handelSearchSubmit}
+                                            node={searchNode}
                                         />
                                         <Labels categories={graph.Categories} onClick={onCategoryClick} />
                                     </div>

components/ui/progress.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils"
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
+      className
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }

package-lock.json

@@ -13,6 +13,7 @@
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-hover-card": "^1.1.2",
+    "@radix-ui/react-progress": "^1.1.0",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.5",