commit

app/components/Input.tsx

@@ -24,6 +24,7 @@ export default function Input({ value, onValueChange, handelSubmit, graph, icon,
     const [options, setOptions] = useState<any[]>([])
     const [selectedOption, setSelectedOption] = useState<number>(0)
     const inputRef = useRef<HTMLInputElement>(null)
+    const containerRef = useRef<HTMLDivElement>(null)
 
     useEffect(() => {
         setSelectedOption(0)
@@ -37,7 +38,7 @@ export default function Input({ value, onValueChange, handelSubmit, graph, icon,
         const timeout = setTimeout(async () => {
 
             if (!value || node?.id) {
-                if (!value) {   
+                if (!value) {
                     setOptions([])
                 }
                 setOpen(false)
@@ -59,7 +60,7 @@ export default function Input({ value, onValueChange, handelSubmit, graph, icon,
 
             const json = await result.json()
             const { completions } = json.result
-            
+
             setOptions(completions || [])
 
             if (completions?.length > 0) {
@@ -89,12 +90,18 @@ export default function Input({ value, onValueChange, handelSubmit, graph, icon,
             }
             case "ArrowUp": {
                 e.preventDefault()
-                setSelectedOption(prev => prev <= 0 ? options.length - 1 : prev - 1)
+                setSelectedOption(prev => {
+                    containerRef.current?.scrollTo({ behavior: 'smooth', top: (prev <= 0 ? options.length - 1 : prev - 1) * 64 })
+                    return prev <= 0 ? options.length - 1 : prev - 1
+                })
                 return
             }
             case "ArrowDown": {
                 e.preventDefault()
-                setSelectedOption(prev => (prev + 1) % options.length)
+                setSelectedOption(prev => {
+                    containerRef.current?.scrollTo({ behavior: 'smooth', top: ((prev + 1) % options.length) * 64 })
+                    return (prev + 1) % options.length
+                })
                 return
             }
             case "Space": {
@@ -125,10 +132,16 @@ export default function Input({ value, onValueChange, handelSubmit, graph, icon,
                     onValueChange({ name: newVal })
                 }}
                 {...props}
+                onBlur={(e) => {
+                    if (!containerRef.current?.contains(e.relatedTarget as Node)) {
+                        setOpen(false)
+                    }
+                }}
             />
             {
                 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"
                     style={{
                         top: (inputRef.current?.clientHeight || 0) + 16

app/components/chat.tsx

@@ -205,7 +205,7 @@ export function Chat({ repo, path, setPath, graph, chartRef, selectedPathId, isP
     async function sendQuery(event: FormEvent) {
 
         event.preventDefault();
-        
+
         const q = query.trim()
 
         if (!q) {
@@ -216,11 +216,11 @@ export function Chat({ repo, path, setPath, graph, chartRef, selectedPathId, isP
             })
             return
         }
-        
+
         setQuery("")
-        
+
         setMessages((messages) => [...messages, { text: q, type: MessageTypes.Query }, { type: MessageTypes.Pending }]);
-        
+
         const result = await fetch(`/api/chat/${repo}?msg=${encodeURIComponent(q)}`, {
             method: 'POST'
         })
@@ -495,7 +495,7 @@ export function Chat({ repo, path, setPath, graph, chartRef, selectedPathId, isP
                 {
                     repo &&
                     <div className="flex gap-4 px-4">
-                        <button className="p-4 border rounded-md hover:border-[#FF66B3] hover:bg-[#FFF0F7]" onClick={() => setTipOpen(prev => !prev)}>
+                        <button 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}>